:root {
  --bg:       #0f1117;
  --surface:  #1a1d27;
  --surface2: #242736;
  --border:   #2e3247;
  --accent:   #4f8ef7;
  --accent-d: #1e3a6e;
  --success:  #22c55e;
  --warning:  #f59e0b;
  --danger:   #ef4444;
  --text:     #e2e8f0;
  --text-dim: #8892a4;
  --radius:   8px;
  --radius-lg:12px;
}
* { box-sizing:border-box; margin:0; padding:0; }
body {
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg); color:var(--text); min-height:100vh;
  font-size:14px; line-height:1.5;
}

/* ── App shell ── */
#app-header {
  background:var(--surface); border-bottom:1px solid var(--border);
  padding:0 24px; height:56px; display:flex; align-items:center; gap:12px;
  position:sticky; top:0; z-index:100;
}
.logo { display:flex; align-items:center; gap:10px; font-weight:700; font-size:15px; flex:1; }
.logo svg { color:var(--accent); }
.user-chip {
  display:flex; align-items:center; gap:8px;
  background:var(--surface2); border:1px solid var(--border);
  border-radius:20px; padding:4px 12px 4px 4px; font-size:12px;
}
.avatar {
  width:26px; height:26px; border-radius:50%;
  background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700;
}
.role-badge {
  padding:2px 7px; border-radius:10px; font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.5px;
}
.role-badge.sales    { background:rgba(79,142,247,.15); color:var(--accent); }
.role-badge.engineer { background:rgba(34,197,94,.15);  color:var(--success); }
.role-badge.admin    { background:rgba(245,158,11,.15); color:var(--warning); }

.notif-btn {
  position:relative; background:none; border:none; cursor:pointer;
  color:var(--text-dim); padding:6px; border-radius:var(--radius);
  display:flex; align-items:center; transition:color .15s;
}
.notif-btn:hover { color:var(--text); background:var(--surface2); }
.notif-badge {
  position:absolute; top:2px; right:2px;
  background:var(--danger); color:#fff; border-radius:10px;
  font-size:9px; font-weight:700; padding:1px 4px; min-width:16px; text-align:center;
}
.btn-ghost {
  background:none; border:1px solid var(--border); border-radius:var(--radius);
  color:var(--text-dim); padding:6px 12px; font-size:12px; cursor:pointer;
  transition:all .15s;
}
.btn-ghost:hover { border-color:var(--accent); color:var(--text); }

/* ── Sub-nav ── */
#sub-nav {
  background:var(--surface); border-bottom:1px solid var(--border);
  display:flex; gap:4px; padding:0 24px;
}
.nav-tab {
  padding:14px 16px; font-size:13px; font-weight:500; cursor:pointer;
  border-bottom:2px solid transparent; color:var(--text-dim);
  transition:all .15s; white-space:nowrap; background:none; border-top:none;
  border-left:none; border-right:none;
}
.nav-tab:hover  { color:var(--text); }
.nav-tab.active { color:var(--accent); border-bottom-color:var(--accent); }

/* ── Main content ── */
#main { max-width:1200px; margin:0 auto; padding:24px; }

/* ── Cards ── */
.card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:20px 24px; margin-bottom:20px;
}
.card-title {
  font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:.5px; color:var(--text-dim); margin-bottom:16px;
  display:flex; align-items:center; gap:8px;
}

/* ── Pill selector (build tabs) ── */
.pill-list { display:flex; flex-wrap:wrap; gap:8px; }
.pill {
  padding:6px 14px; border-radius:20px; border:1px solid var(--border);
  font-size:12px; font-weight:500; cursor:pointer; color:var(--text-dim);
  background:var(--surface2); transition:all .15s; white-space:nowrap;
}
.pill:hover  { border-color:var(--accent); color:var(--text); }
.pill.active { background:var(--accent); border-color:var(--accent); color:#fff; }

/* ── Drop zone ── */
.drop-zone {
  border:2px dashed var(--border); border-radius:var(--radius-lg);
  padding:40px; text-align:center; cursor:pointer; transition:all .2s;
}
.drop-zone:hover, .drop-zone.drag-over {
  border-color:var(--accent); background:rgba(79,142,247,.05);
}
.drop-zone p { color:var(--text-dim); margin-top:10px; }
.drop-zone strong { color:var(--accent); }
.file-tag {
  display:inline-flex; align-items:center; gap:8px; margin-top:12px;
  background:var(--surface2); border:1px solid var(--border);
  border-radius:var(--radius); padding:8px 14px; font-size:13px;
}

/* ── Buttons ── */
.btn-primary {
  background:var(--accent); border:none; border-radius:var(--radius);
  color:#fff; padding:10px 20px; font-size:13px; font-weight:600;
  cursor:pointer; transition:filter .15s;
}
.btn-primary:hover    { filter:brightness(1.1); }
.btn-primary:disabled { filter:brightness(.4); cursor:not-allowed; }
.btn-success {
  background:var(--success); border:none; border-radius:var(--radius);
  color:#fff; padding:10px 20px; font-size:13px; font-weight:600;
  cursor:pointer; transition:filter .15s;
}
.btn-success:hover { filter:brightness(1.1); }
.btn-danger {
  background:var(--danger); border:none; border-radius:var(--radius);
  color:#fff; padding:10px 20px; font-size:13px; font-weight:600;
  cursor:pointer; transition:filter .15s;
}
.btn-danger:hover { filter:brightness(1.1); }

/* ── Accuracy score ── */
.score-row { display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.score-circle {
  width:68px; height:68px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:19px; font-weight:700;
}
.score-circle.high   { background:rgba(34,197,94,.12);  color:var(--success); border:2px solid var(--success); }
.score-circle.medium { background:rgba(245,158,11,.12); color:var(--warning); border:2px solid var(--warning); }
.score-circle.low    { background:rgba(239,68,68,.12);  color:var(--danger);  border:2px solid var(--danger); }
.score-meta h3 { font-size:15px; font-weight:600; }
.score-meta p  { color:var(--text-dim); font-size:12px; margin-top:3px; }

/* ── Tables ── */
.tbl-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th {
  text-align:left; padding:8px 12px; border-bottom:1px solid var(--border);
  color:var(--text-dim); font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.4px; background:var(--surface2);
  white-space:nowrap;
}
td { padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:top; }
tr:last-child td { border-bottom:none; }
tr:hover td { background:rgba(255,255,255,.02); }

/* ── Status badges ── */
.badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px; border-radius:10px; font-size:11px; font-weight:600;
  white-space:nowrap;
}
.badge.match            { background:rgba(34,197,94,.12);  color:var(--success); }
.badge.qty_mismatch     { background:rgba(245,158,11,.12); color:var(--warning); }
.badge.desc_mismatch    { background:rgba(245,158,11,.12); color:var(--warning); }
.badge.both_mismatch    { background:rgba(239,68,68,.12);  color:var(--danger); }
.badge.missing_in_upload{ background:rgba(239,68,68,.12);  color:var(--danger); }
.badge.extra_in_upload  { background:rgba(79,142,247,.12); color:var(--accent); }
.badge.pending          { background:rgba(245,158,11,.12); color:var(--warning); }
.badge.approved         { background:rgba(34,197,94,.12);  color:var(--success); }
.badge.rejected         { background:rgba(239,68,68,.12);  color:var(--danger); }
.badge.sold             { background:rgba(79,142,247,.12);  color:var(--accent); }
.badge.qc_pending       { background:rgba(168,85,247,.12);  color:#a855f7; }
.badge.qc_passed        { background:rgba(34,197,94,.12);   color:var(--success); }
.badge.qc_failed        { background:rgba(239,68,68,.12);   color:var(--danger); }

/* ── Dashboard ── */
.dashboard-cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:12px; margin-bottom:20px; }
.dash-card { background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:16px; text-align:center; }
.dash-card .dash-value { font-size:28px; font-weight:700; }
.dash-card .dash-label { font-size:11px; color:var(--text-dim); margin-top:4px; text-transform:uppercase; letter-spacing:.5px; }
.chart-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(340px,1fr)); gap:16px; margin-bottom:20px; }
.chart-box { background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:16px; }
.chart-box h4 { margin:0 0 12px; font-size:13px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.5px; }

/* ── QC form ── */
.qc-table { width:100%; border-collapse:collapse; font-size:13px; }
.qc-table th { text-align:left; padding:8px; border-bottom:2px solid var(--border); font-size:11px; text-transform:uppercase; color:var(--text-dim); }
.qc-table td { padding:6px 8px; border-bottom:1px solid var(--border); vertical-align:middle; }
.qc-table input[type="number"] { width:60px; padding:4px 6px; border-radius:6px; border:1px solid var(--border); background:var(--surface2); color:var(--text); }
.qc-table select { padding:4px 6px; border-radius:6px; border:1px solid var(--border); background:var(--surface2); color:var(--text); }
.qc-table input[type="text"] { width:100%; padding:4px 6px; border-radius:6px; border:1px solid var(--border); background:var(--surface2); color:var(--text); box-sizing:border-box; }
.qc-check-row { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); }
.qc-check-row label { flex:1; font-size:13px; }

/* ── Notification panel ── */
#notif-panel {
  position:fixed; top:56px; right:0; width:360px; max-height:70vh;
  background:var(--surface); border-left:1px solid var(--border);
  border-bottom:1px solid var(--border); border-radius:0 0 0 var(--radius-lg);
  overflow-y:auto; z-index:200; display:none; box-shadow:-4px 4px 20px rgba(0,0,0,.4);
}
#notif-panel.open { display:block; }
.notif-header {
  padding:14px 16px; border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center;
  font-size:13px; font-weight:600; position:sticky; top:0; background:var(--surface);
}
.notif-item {
  padding:12px 16px; border-bottom:1px solid var(--border);
  font-size:13px; cursor:pointer; transition:background .15s;
}
.notif-item:hover { background:var(--surface2); }
.notif-item.unread { border-left:3px solid var(--accent); }
.notif-time { color:var(--text-dim); font-size:11px; margin-top:4px; }
.notif-empty { padding:24px; text-align:center; color:var(--text-dim); }

/* ── Status/alert messages ── */
.msg {
  display:flex; align-items:center; gap:8px; padding:12px 16px;
  border-radius:var(--radius); font-size:13px; margin-bottom:16px;
}
.msg.error   { background:rgba(239,68,68,.08);  border:1px solid rgba(239,68,68,.25);  color:#fca5a5; }
.msg.success { background:rgba(34,197,94,.08);  border:1px solid rgba(34,197,94,.25);  color:#86efac; }
.msg.info    { background:rgba(79,142,247,.08); border:1px solid rgba(79,142,247,.25); color:#93c5fd; }

/* ── Detail panel ── */
.detail-panel {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:24px; margin-top:20px;
}
.detail-meta {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:16px; margin-bottom:20px;
}
.meta-item label { font-size:11px; font-weight:700; color:var(--text-dim);
                   text-transform:uppercase; letter-spacing:.4px; display:block; margin-bottom:4px; }
.meta-item span  { font-size:14px; font-weight:500; }

textarea {
  width:100%; background:var(--surface2); border:1px solid var(--border);
  border-radius:var(--radius); color:var(--text); padding:10px 12px;
  font-size:13px; resize:vertical; font-family:inherit;
}
textarea:focus { outline:none; border-color:var(--accent); }

/* ── Spinner ── */
.spinner {
  width:16px; height:16px; border:2px solid var(--border);
  border-top-color:var(--accent); border-radius:50%;
  animation:spin .7s linear infinite; flex-shrink:0;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ── Approve/Reject banner ── */
.approve-bar {
  display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap;
  background:var(--surface2); border:1px solid var(--border);
  border-radius:var(--radius); padding:14px 16px; margin-top:20px;
}
.approve-bar textarea { flex:1; min-width:200px; min-height:72px; margin:0; }
.approve-bar .btn-group { display:flex; gap:8px; flex-shrink:0; align-self:flex-end; }

/* ── GPU banner ── */
.gpu-banner {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:rgba(168,85,247,.08); border:1px solid rgba(168,85,247,.3);
  border-radius:var(--radius); padding:10px 14px; margin-bottom:16px;
}
.gpu-badge-lg {
  background:rgba(168,85,247,.2); color:#c084fc;
  border:1px solid rgba(168,85,247,.5);
  padding:3px 10px; border-radius:10px; font-size:11px; font-weight:800;
  letter-spacing:.6px; flex-shrink:0;
}
.gpu-badge-sm {
  background:rgba(168,85,247,.2); color:#c084fc;
  border:1px solid rgba(168,85,247,.4);
  padding:1px 6px; border-radius:8px; font-size:9px; font-weight:800;
  letter-spacing:.5px; margin-left:6px; vertical-align:middle;
}

/* ── Side-by-side comparison table ── */
.cmp-table { width:100%; border-collapse:collapse; font-size:13px; }

.pid-th, .status-th {
  background:var(--surface2); padding:8px 12px;
  border-bottom:2px solid var(--border); color:var(--text-dim);
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
}
.section-th {
  padding:6px 12px; font-size:11px; font-weight:800;
  text-transform:uppercase; letter-spacing:.6px; text-align:center;
}
.ref-th { background:rgba(79,142,247,.12); color:#93c5fd; border-bottom:2px solid rgba(79,142,247,.4); }
.up-th  { background:rgba(251,146,60,.1);  color:#fdba74; border-bottom:2px solid rgba(251,146,60,.35); }

.sub-th {
  padding:6px 12px; font-size:10px; font-weight:600;
  text-transform:uppercase; letter-spacing:.3px; color:var(--text-dim);
  border-bottom:1px solid var(--border);
}
.qty-th { text-align:center; width:56px; }
.status-th { width:120px; text-align:center; }

/* row tinting by status */
.cmp-row td { padding:9px 12px; border-bottom:1px solid var(--border); vertical-align:middle; }
.cmp-row:last-child td { border-bottom:none; }

.cmp-match            td { background:rgba(34,197,94,.03); }
.cmp-qty_mismatch     td { background:rgba(245,158,11,.06); }
.cmp-desc_mismatch    td { background:rgba(245,158,11,.06); }
.cmp-both_mismatch    td { background:rgba(239,68,68,.06); }
.cmp-missing_in_upload td { background:rgba(239,68,68,.06); }
.cmp-extra_in_upload  td { background:rgba(79,142,247,.05); }

.cmp-row:hover td { filter:brightness(1.15); }

/* individual cells */
.pid-cell  { font-family:monospace; font-size:11px; white-space:nowrap; }
.pid-text  { color:var(--text); }
.cmp-cell  { font-size:13px; }
.qty-cell  { text-align:center; width:56px; font-weight:600; }
.status-cell { text-align:center; }

/* highlight differing cells */
.cell-diff    { background:rgba(239,68,68,.12) !important; color:#fca5a5; font-weight:600; border-radius:4px; }
.cell-ok      { color:var(--text-dim); }
.cell-missing { color:var(--text-dim); font-style:italic; }

/* ── Utility ── */
.flex-gap { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.text-dim { color:var(--text-dim); }
.mt-16 { margin-top:16px; }
.mt-8  { margin-top:8px; }

@media(max-width:640px) {
  #main { padding:16px; }
  #app-header { padding:0 16px; }
  #sub-nav { padding:0 12px; gap:0; overflow-x:auto; }
  .nav-tab { padding:12px 10px; font-size:12px; }
}