:root{
  --bg:#0f1115;
  --panel:#161920;
  --panel-2:#1c202a;
  --row-alt:#14171d;
  --line:#2a2f3a;
  --ink:#e7e9ee;
  --ink-dim:#9aa1b0;
  --ink-faint:#6a7182;
  --accent:#5fb3a3;
  --accent-2:#e0a458;
  --danger:#d9694f;
  --ok:#5fb37a;
  --warn:#e0c458;
  --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --radius:10px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; line-height:1.5;
}
a{color:var(--accent);}
button{font-family:var(--sans);}

/* ---------------- login ---------------- */
#loginScreen{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
}
.login-box{
  width:100%; max-width:360px; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:28px;
}
.login-box h1{font-size:17px; margin:0 0 4px;}
.login-box .sub{color:var(--ink-dim); font-size:12.5px; margin-bottom:20px;}
.login-box label{display:block; font-family:var(--mono); font-size:10.5px; text-transform:uppercase;
  letter-spacing:.08em; color:var(--ink-faint); margin:14px 0 6px;}
.login-box input{
  width:100%; background:var(--panel-2); border:1px solid var(--line); color:var(--ink);
  padding:9px 12px; border-radius:8px; font-size:13.5px; font-family:var(--sans);
}
.login-box button{
  width:100%; margin-top:20px; background:var(--accent); color:#0b0d11; border:none;
  padding:11px; border-radius:8px; font-size:13.5px; font-weight:600; cursor:pointer;
}
.login-box button:hover{opacity:.9;}
.login-error{color:var(--danger); font-size:12px; margin-top:10px; min-height:16px;}

/* ---------------- app shell ---------------- */
#app{display:none;}
#app.show{display:block;}

header{
  position:sticky; top:0; z-index:50; background:rgba(15,17,21,0.94); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line); padding:16px 24px 14px;
}
.header-row{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;}
.brand{display:flex; align-items:baseline; gap:12px;}
h1{font-size:18px; font-weight:600; margin:0; letter-spacing:-0.01em;}
.tag{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); border:1px solid var(--accent); border-radius:20px; padding:3px 9px;}
.who{display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--ink-dim);}
.role-pill{font-family:var(--mono); font-size:10.5px; padding:3px 9px; border-radius:20px; border:1px solid var(--line);}
.role-pill.benchmarked{color:var(--accent); border-color:var(--accent);}
.role-pill.client{color:var(--accent-2); border-color:var(--accent-2);}
.logout-btn{background:transparent; border:1px solid var(--line); color:var(--ink-dim);
  padding:6px 11px; border-radius:8px; font-size:12px; cursor:pointer;}
.logout-btn:hover{border-color:var(--danger); color:var(--danger);}

/* KPI row */
.kpi-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px;}
.kpi-card{
  flex:1 1 220px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px;
}
.kpi-card .num{font-family:var(--mono); font-size:26px; font-weight:600; color:var(--ink);}
.kpi-card .num small{font-size:13px; color:var(--ink-faint); font-family:var(--sans); font-weight:400; margin-left:4px;}
.kpi-card .label{font-size:12px; color:var(--ink-dim); margin-top:2px;}
.kpi-card.extra .num{color:var(--accent);}
.kpi-card.upgrade .num{color:var(--accent-2);}
.kpi-card.count .num{color:var(--ink);}

.controls{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; align-items:center;}
input[type=search]{
  flex:1 1 200px; background:var(--panel-2); border:1px solid var(--line); color:var(--ink);
  padding:8px 12px; border-radius:8px; font-size:13px; font-family:var(--sans);
}
select.filter{
  background:var(--panel-2); border:1px solid var(--line); color:var(--ink);
  padding:8px 10px; border-radius:8px; font-size:12.5px; font-family:var(--sans);
}
.add-btn{
  background:var(--accent-2); color:#1a1400; border:none; padding:8px 14px; border-radius:8px;
  font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap;
}
.add-btn:hover{opacity:.9;}

/* tabs */
.tab-bar{display:flex; gap:8px; margin-bottom:12px;}
.tab-btn{
  background:var(--panel); border:1px solid var(--line); color:var(--ink-dim);
  padding:8px 14px; border-radius:8px 8px 0 0; font-size:12.5px; cursor:pointer; font-family:var(--sans);
}
.tab-btn.active{color:var(--ink); border-bottom-color:var(--panel); background:var(--panel-2); font-weight:600;}
.tab-count{
  font-family:var(--mono); font-size:10px; color:var(--ink-faint); background:var(--bg);
  border-radius:10px; padding:1px 6px; margin-left:6px;
}
.tab-btn.active .tab-count{color:var(--accent);}

/* ---------------- table ---------------- */
main{padding:18px 24px 80px; max-width:1500px; margin:0 auto;}
.table-wrap{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
table{width:100%; border-collapse:collapse; font-size:12.8px;}
thead th{
  text-align:left; font-family:var(--mono); font-size:10.5px; text-transform:uppercase;
  letter-spacing:.06em; color:var(--ink-faint); background:var(--panel-2);
  padding:10px 10px; border-bottom:1px solid var(--line); white-space:nowrap;
}
tbody tr.item-row{background:var(--panel); border-bottom:1px solid var(--line);}
tbody tr.item-row:nth-child(4n+1){background:var(--row-alt);}
tbody tr.item-row td{padding:9px 10px; vertical-align:top;}
tbody tr.item-row.new-item{box-shadow:inset 3px 0 0 var(--accent-2);}

.cell-id{font-family:var(--mono); color:var(--accent); font-weight:600; white-space:nowrap;}
.cell-title{max-width:340px; min-width:260px;}
.cell-title .t{font-weight:600; color:var(--ink); font-size:13px;}
.cell-title .a{color:var(--ink-faint); font-size:11px; margin-top:2px;}
.id-input{
  width:64px; background:var(--panel-2); border:1px solid var(--line); color:var(--accent);
  font-family:var(--mono); font-weight:600; font-size:12.5px; padding:4px 6px; border-radius:6px;
}
.title-input{
  width:100%; min-height:44px; background:var(--panel-2); border:1px solid var(--line); color:var(--ink);
  font-family:var(--sans); font-weight:600; font-size:13px; padding:6px 8px; border-radius:6px;
  margin-bottom:2px; resize:vertical; line-height:1.35;
}
.expand-btn{
  background:none; border:none; color:var(--ink-faint); cursor:pointer; font-size:12px;
  padding:2px 6px; margin-top:4px; border:1px solid var(--line); border-radius:6px;
}
.expand-btn:hover{color:var(--accent); border-color:var(--accent);}

.md-input{
  width:56px; background:var(--panel-2); border:1px solid var(--line); color:var(--accent-2);
  padding:5px 6px; border-radius:6px; font-family:var(--mono); font-size:12px; text-align:right;
}
.md-input:disabled{opacity:.55; cursor:not-allowed;}
.est-label{color:var(--ink-faint); font-size:10.5px; margin-top:3px; display:block;}

select.cell-select{
  background:var(--panel-2); border:1px solid var(--line); color:var(--ink);
  padding:5px 7px; border-radius:6px; font-size:12px; font-family:var(--sans); min-width:108px;
}
select.cell-select:disabled{opacity:.5; cursor:not-allowed;}
select.cell-select[data-val="Yes"], select.cell-select[data-val="Done"], select.cell-select[data-val="benchmarked"]{color:var(--ok);}
select.cell-select[data-val="No"]{color:var(--danger);}
select.cell-select[data-val="Pending"], select.cell-select[data-val="In progress"], select.cell-select[data-val="tbd"]{color:var(--warn);}
select.cell-select[data-val="client"]{color:var(--danger);}

textarea.comment-box{
  width:180px; min-height:36px; background:var(--panel-2); border:1px solid var(--line); color:var(--ink);
  padding:6px 8px; border-radius:6px; font-size:12px; font-family:var(--sans); resize:vertical;
}
textarea.comment-box:disabled{opacity:.55; cursor:not-allowed;}

.detail-row td{background:var(--panel-2); padding:14px 18px; border-bottom:1px solid var(--line);}
.detail-row{display:none;}
.detail-row.open{display:table-row;}

.section-label{font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.1em;
  color:var(--ink-faint); margin:10px 0 6px;}
.quote-block{background:var(--panel); border-left:3px solid var(--accent); border-radius:0 6px 6px 0;
  padding:9px 12px; margin-bottom:7px;}
.quote-block.predlog{border-left-color:var(--accent-2);}
.quote-meta{font-family:var(--mono); font-size:10.5px; color:var(--ink-faint); margin-bottom:4px;}
.quote-block p{margin:0 0 5px; font-size:13px; color:#d7dae2; white-space:pre-wrap;}
.quote-block p:last-child{margin-bottom:0;}

.gallery{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px;}
.thumb{width:130px; border:1px solid var(--line); border-radius:6px; overflow:hidden; cursor:zoom-in; background:#0b0d11;}
.thumb img{display:block; width:100%; height:80px; object-fit:cover; object-position:top;}

.saved-tick{font-family:var(--mono); font-size:10px; color:var(--accent); opacity:0; transition:opacity .3s;}
.saved-tick.show{opacity:1;}
.saved-tick.warn{color:var(--warn);}

.comment-cell{display:flex; flex-direction:column; gap:5px;}
.save-comment-btn{
  align-self:flex-start; background:transparent; border:1px solid var(--line); color:var(--ink-dim);
  padding:4px 10px; border-radius:6px; font-size:11px; cursor:pointer;
}
.save-comment-btn:hover{border-color:var(--accent); color:var(--accent);}
.comment-actions{display:flex; gap:8px; align-items:center;}
.attach-btn{
  border:1px solid var(--line); border-radius:6px; padding:4px 9px; font-size:12px; cursor:pointer;
  color:var(--ink-dim); user-select:none;
}
.attach-btn:hover{border-color:var(--accent-2); color:var(--accent-2);}
.attach-gallery{display:flex; gap:5px; flex-wrap:wrap;}
.thumb.small{width:44px; border-radius:5px;}
.thumb.small img{height:32px;}

.actions-cell{display:flex; flex-direction:column; gap:5px; min-width:92px;}
.action-btn{
  border:1px solid var(--line); background:transparent; border-radius:6px; padding:5px 9px;
  font-size:11px; cursor:pointer; text-align:left; font-family:var(--sans);
}
.action-btn.done{color:var(--ok);} .action-btn.done:hover{border-color:var(--ok);}
.action-btn.remove{color:var(--danger);} .action-btn.remove:hover{border-color:var(--danger);}
.action-btn.restore{color:var(--accent);} .action-btn.restore:hover{border-color:var(--accent);}

.archive-badge{
  display:inline-block; margin-left:6px; font-family:var(--mono); font-size:9px; padding:1px 6px;
  border-radius:10px; vertical-align:middle;
}
.archive-badge.done{color:var(--ok); border:1px solid var(--ok);}
.archive-badge.removed{color:var(--danger); border:1px solid var(--danger);}

.empty-state{color:var(--ink-faint); text-align:center; padding:50px 0; font-size:13.5px;}

/* lightbox */
.lightbox{position:fixed; inset:0; background:rgba(6,7,9,0.92); display:none; align-items:center;
  justify-content:center; z-index:200; padding:30px; cursor:zoom-out;}
.lightbox.open{display:flex;}
.lightbox img{max-width:100%; max-height:100%; border-radius:6px; border:1px solid var(--line);}

/* modal for new item */
.modal-overlay{position:fixed; inset:0; background:rgba(6,7,9,0.75); display:none; align-items:center;
  justify-content:center; z-index:150; padding:20px;}
.modal-overlay.open{display:flex;}
.modal{width:100%; max-width:460px; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px;}
.modal h2{font-size:15px; margin:0 0 14px;}
.modal label{display:block; font-family:var(--mono); font-size:10.5px; text-transform:uppercase;
  letter-spacing:.08em; color:var(--ink-faint); margin:12px 0 6px;}
.modal input, .modal textarea{
  width:100%; background:var(--panel-2); border:1px solid var(--line); color:var(--ink);
  padding:9px 11px; border-radius:8px; font-size:13px; font-family:var(--sans);
}
.modal textarea{min-height:80px; resize:vertical;}
.modal-actions{display:flex; gap:10px; margin-top:18px; justify-content:flex-end;}
.modal-actions button{padding:9px 16px; border-radius:8px; font-size:12.5px; cursor:pointer; border:1px solid var(--line);}
.modal-actions .cancel{background:transparent; color:var(--ink-dim);}
.modal-actions .save{background:var(--accent-2); color:#1a1400; border:none; font-weight:600;}

footer{max-width:1500px; margin:0 auto; padding:0 24px 50px; color:var(--ink-faint); font-size:11.5px;}
footer p{max-width:820px;}

@media (max-width:900px){
  main{padding:14px;}
  table{font-size:12px;}
  .cell-title{max-width:170px;}
}