:root {
  --bg: #0E1217;
  --bg-2: #161B22;
  --bg-3: #1F2630;
  --line: #2A323D;
  --line-soft: #232A33;
  --text: #E6EDF3;
  --text-2: #9CA9B7;
  --text-3: #6B7884;
  --accent: #E8B339;
  --accent-soft: #2A2412;
  --green: #56D364;
  --green-soft: #14301A;
  --amber: #E3B341;
  --amber-soft: #2A2412;
  --red: #F47067;
  --red-soft: #2D1414;
  --blue: #58A6FF;
  --blue-soft: #0D2D5C;
  --purple: #BC8CFF;
  --shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 12px 40px rgba(0,0,0,.4);
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: "IBM Plex Serif", Georgia, serif;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--text); font-family:var(--sans); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; }
body { background: radial-gradient(ellipse at top, rgba(232,179,57,.05) 0%, transparent 60%), radial-gradient(ellipse at bottom right, rgba(88,166,255,.03) 0%, transparent 50%), var(--bg); min-height:100vh; }

.topbar { display:flex; align-items:center; justify-content:space-between; padding:14px 28px; border-bottom:1px solid var(--line); background:rgba(14,18,23,.85); backdrop-filter:blur(8px); position:sticky; top:0; z-index:50; }
.brand { display:flex; align-items:center; gap:12px; }
.brand-mark { width:28px; height:28px; background:linear-gradient(135deg, var(--accent), #B88824); border-radius:6px; display:grid; place-items:center; font-family:var(--serif); font-weight:600; color:#1a1308; font-size:16px; letter-spacing:-0.5px; }
.brand-name { font-family:var(--serif); font-weight:600; font-size:18px; letter-spacing:0.2px; }
.brand-name .accent { color:var(--accent); }
.brand-tag { font-family:var(--mono); font-size:10px; color:var(--text-3); letter-spacing:1px; text-transform:uppercase; padding-left:12px; margin-left:12px; border-left:1px solid var(--line); }
.topbar-right { display:flex; align-items:center; gap:18px; }
.clock { font-family:var(--mono); font-size:11px; color:var(--text-2); letter-spacing:0.5px; }
.clock .live-dot { display:inline-block; width:6px; height:6px; background:var(--green); border-radius:50%; margin-right:6px; box-shadow:0 0 6px var(--green); animation:pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity:.4; } }

.role-switcher { position:relative; }
.role-btn { background:var(--bg-2); border:1px solid var(--line); color:var(--text); padding:7px 14px; border-radius:6px; font-family:var(--sans); font-size:13px; font-weight:500; cursor:pointer; display:flex; align-items:center; gap:10px; transition:all .15s; }
.role-btn:hover { background:var(--bg-3); border-color:var(--accent); }
.role-btn .role-label { font-size:10px; color:var(--text-3); text-transform:uppercase; letter-spacing:1px; }
.role-btn .chev { color:var(--text-3); transition:transform .15s; }
.role-switcher.open .chev { transform:rotate(180deg); }
.role-menu { position:absolute; top:calc(100% + 6px); right:0; background:var(--bg-2); border:1px solid var(--line); border-radius:8px; min-width:300px; box-shadow:var(--shadow); overflow:hidden; display:none; }
.role-switcher.open .role-menu { display:block; }
.role-menu-section { padding:8px 0; }
.role-menu-section + .role-menu-section { border-top:1px solid var(--line-soft); }
.role-menu-label { font-family:var(--mono); font-size:9px; text-transform:uppercase; letter-spacing:1.5px; color:var(--text-3); padding:4px 14px; }
.role-option { display:flex; align-items:center; gap:10px; padding:9px 14px; cursor:pointer; font-size:13px; transition:background .1s; }
.role-option:hover { background:var(--bg-3); }
.role-option.active { background:var(--accent-soft); color:var(--accent); }
.role-option .v-mark { width:22px; height:22px; background:var(--bg-3); border:1px solid var(--line); border-radius:4px; display:grid; place-items:center; font-family:var(--mono); font-size:10px; font-weight:600; color:var(--text-2); }
.role-option.active .v-mark { background:var(--accent); border-color:var(--accent); color:#1a1308; }

.container { max-width:1480px; margin:0 auto; padding:28px; }
.page-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:24px; }
.page-title { font-family:var(--serif); font-size:30px; font-weight:600; letter-spacing:-0.5px; margin:0; }
.page-sub { font-family:var(--mono); font-size:11px; color:var(--text-3); text-transform:uppercase; letter-spacing:1.5px; margin-top:6px; }
.page-actions { display:flex; gap:10px; }
.btn { background:var(--bg-2); border:1px solid var(--line); color:var(--text); padding:8px 14px; border-radius:6px; font-family:var(--sans); font-size:12px; font-weight:500; cursor:pointer; transition:all .15s; display:inline-flex; align-items:center; gap:6px; }
.btn:hover { background:var(--bg-3); border-color:var(--text-3); }
.btn-primary { background:var(--accent); color:#1a1308; border-color:var(--accent); }
.btn-primary:hover { background:#f3c04a; border-color:#f3c04a; }

.kpi-grid { display:grid; grid-template-columns:repeat(5, 1fr); gap:14px; margin-bottom:28px; }
.kpi { background:var(--bg-2); border:1px solid var(--line); border-radius:10px; padding:18px 20px; position:relative; overflow:hidden; transition:border-color .2s; }
.kpi:hover { border-color:var(--text-3); }
.kpi::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--accent); opacity:.5; }
.kpi.green::before { background:var(--green); }
.kpi.amber::before { background:var(--amber); }
.kpi.red::before { background:var(--red); }
.kpi.blue::before { background:var(--blue); }
.kpi-label { font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:1.5px; color:var(--text-3); margin-bottom:12px; }
.kpi-value { font-family:var(--serif); font-size:32px; font-weight:600; line-height:1; margin-bottom:6px; letter-spacing:-1px; }
.kpi-meta { font-family:var(--mono); font-size:11px; color:var(--text-2); }
.kpi-meta .pct { color:var(--text); font-weight:500; }

.panels { display:grid; grid-template-columns:2fr 1fr; gap:20px; }
.panel { background:var(--bg-2); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.panel-head { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line); background:linear-gradient(180deg, rgba(255,255,255,.02), transparent); }
.panel-title { font-family:var(--serif); font-size:16px; font-weight:600; margin:0; }
.panel-sub { font-family:var(--mono); font-size:10px; color:var(--text-3); text-transform:uppercase; letter-spacing:1.2px; }

.table-wrap { max-height:620px; overflow:auto; }
table { width:100%; border-collapse:collapse; font-size:12.5px; }
thead th { position:sticky; top:0; background:var(--bg-3); color:var(--text-2); font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:1.2px; font-weight:500; text-align:left; padding:10px 14px; border-bottom:1px solid var(--line); white-space:nowrap; z-index:1; }
tbody td { padding:10px 14px; border-bottom:1px solid var(--line-soft); white-space:nowrap; vertical-align:middle; }
tbody tr { transition:background .08s; cursor:pointer; }
tbody tr:hover { background:rgba(255,255,255,.02); }
tbody tr.selected { background:var(--accent-soft); }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; font-family:var(--mono); }
td.mono { font-family:var(--mono); font-size:11.5px; }
td.dim { color:var(--text-2); }

.tag { display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:4px; font-family:var(--mono); font-size:10px; font-weight:500; text-transform:uppercase; letter-spacing:.8px; border:1px solid; }
.tag-po { background:var(--blue-soft); border-color:var(--blue); color:var(--blue); }
.tag-wo { background:rgba(188,140,255,.1); border-color:var(--purple); color:var(--purple); }
.tag-ok { background:var(--green-soft); border-color:var(--green); color:var(--green); }
.tag-warn { background:var(--amber-soft); border-color:var(--amber); color:var(--amber); }
.tag-bad { background:var(--red-soft); border-color:var(--red); color:var(--red); }
.tag-neutral { background:var(--bg-3); border-color:var(--line); color:var(--text-2); }
.tag-save { background:var(--blue-soft); border-color:var(--blue); color:var(--blue); }
.status-stack { display:inline-flex; gap:6px; align-items:center; flex-wrap:wrap; }

.filter-bar { display:flex; gap:8px; flex-wrap:wrap; padding:12px 18px; border-bottom:1px solid var(--line); background:var(--bg-2); align-items:center; }
.filter-input { background:var(--bg); border:1px solid var(--line); color:var(--text); padding:6px 10px; border-radius:5px; font-family:var(--sans); font-size:12px; flex:1; min-width:220px; outline:none; transition:border-color .15s; }
.filter-input::placeholder { color:var(--text-3); }
.filter-input:focus { border-color:var(--accent); }
.chip { background:var(--bg); border:1px solid var(--line); color:var(--text-2); padding:5px 10px; border-radius:4px; font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:1px; cursor:pointer; transition:all .15s; }
.chip:hover { border-color:var(--text-3); color:var(--text); }
.chip.active { background:var(--accent); color:#1a1308; border-color:var(--accent); }

.vendor-list { padding:8px; }
.vendor-card { padding:14px 16px; border-radius:8px; border:1px solid var(--line-soft); margin-bottom:8px; background:var(--bg); transition:border-color .15s; }
.vendor-card:hover { border-color:var(--text-3); }
.vendor-name { font-weight:600; font-size:13px; margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; }
.vendor-name .vbadge { font-family:var(--mono); font-size:9px; color:var(--text-3); background:var(--bg-3); padding:2px 6px; border-radius:3px; text-transform:uppercase; letter-spacing:1px; }
.meter-row { margin-bottom:8px; }
.meter-row:last-child { margin-bottom:0; }
.meter-head { display:flex; justify-content:space-between; font-family:var(--mono); font-size:10px; color:var(--text-3); text-transform:uppercase; letter-spacing:.8px; margin-bottom:4px; }
.meter-head .meter-val { color:var(--text); font-weight:500; }
.meter { height:6px; background:var(--bg-3); border-radius:3px; overflow:hidden; position:relative; }
.meter-fill { height:100%; border-radius:3px; transition:width .4s cubic-bezier(.4,0,.2,1); }
.meter-fill.ok { background:linear-gradient(90deg, #2D7B36, var(--green)); }
.meter-fill.warn { background:linear-gradient(90deg, #8B6314, var(--amber)); }
.meter-fill.bad { background:linear-gradient(90deg, #8B2424, var(--red)); }

.drawer-bg { position:fixed; inset:0; background:rgba(0,0,0,.5); backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:opacity .2s; z-index:100; }
.drawer-bg.open { opacity:1; pointer-events:auto; }
.drawer { position:fixed; top:0; right:0; bottom:0; width:540px; max-width:90vw; background:var(--bg-2); border-left:1px solid var(--line); transform:translateX(100%); transition:transform .25s cubic-bezier(.4,0,.2,1); z-index:101; overflow-y:auto; }
.drawer.open { transform:translateX(0); }
.drawer-head { padding:22px 26px 16px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bg-2); }
.drawer-close { position:absolute; top:18px; right:22px; background:transparent; border:1px solid var(--line); color:var(--text-2); width:28px; height:28px; border-radius:5px; cursor:pointer; display:grid; place-items:center; font-size:16px; }
.drawer-close:hover { background:var(--bg-3); color:var(--text); }
.drawer-pr { font-family:var(--mono); font-size:11px; color:var(--text-3); text-transform:uppercase; letter-spacing:1.5px; margin-bottom:6px; }
.drawer-title { font-family:var(--serif); font-size:22px; font-weight:600; margin:0 0 4px; }
.drawer-sub { color:var(--text-2); font-size:13px; }
.drawer-body { padding:20px 26px 40px; }
.timeline-section { margin-bottom:28px; }
.timeline-title { font-family:var(--mono); font-size:10px; color:var(--text-3); text-transform:uppercase; letter-spacing:1.5px; margin-bottom:14px; }
.timeline { position:relative; padding-left:24px; border-left:1px dashed var(--line); }
.timeline-item { position:relative; margin-bottom:18px; }
.timeline-item::before { content:''; position:absolute; left:-29px; top:4px; width:10px; height:10px; border-radius:50%; background:var(--bg-2); border:2px solid var(--text-3); }
.timeline-item.done::before { border-color:var(--green); background:var(--green); }
.timeline-item.now::before { border-color:var(--accent); background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
.timeline-item .ti-date { font-family:var(--mono); font-size:11px; color:var(--text-2); margin-bottom:2px; }
.timeline-item .ti-event { font-size:13px; font-weight:500; }
.timeline-item .ti-note { color:var(--text-2); font-size:12px; margin-top:2px; }
.detail-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:14px 24px; margin-bottom:24px; }
.detail { border-bottom:1px solid var(--line-soft); padding-bottom:10px; }
.detail-label { font-family:var(--mono); font-size:10px; color:var(--text-3); text-transform:uppercase; letter-spacing:1.2px; margin-bottom:4px; }
.detail-val { font-size:14px; font-weight:500; }
.detail-val.mono { font-family:var(--mono); font-size:12px; }
.remark-box { background:var(--bg-3); border:1px solid var(--line); border-left:3px solid var(--amber); border-radius:6px; padding:14px 16px; font-size:13px; line-height:1.6; }
.remark-box.ok { border-left-color:var(--green); }
.remark-box.bad { border-left-color:var(--red); }

.vendor-portal-head { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; margin-bottom:24px; }
.util-card { background:var(--bg-2); border:1px solid var(--line); border-radius:10px; padding:20px; }
.util-title { font-family:var(--mono); font-size:10px; color:var(--text-3); text-transform:uppercase; letter-spacing:1.5px; margin-bottom:16px; }
.util-stack { display:flex; align-items:baseline; gap:8px; margin-bottom:4px; }
.util-current { font-family:var(--serif); font-size:28px; font-weight:600; letter-spacing:-0.5px; }
.util-of { font-family:var(--mono); font-size:12px; color:var(--text-3); }
.util-cap { font-family:var(--mono); font-size:13px; color:var(--text-2); }
.util-meter { height:8px; background:var(--bg-3); border-radius:4px; margin-top:12px; overflow:hidden; }
.util-meter-fill { height:100%; border-radius:4px; transition:width .4s; }
.util-pct { font-family:var(--mono); font-size:11px; color:var(--text-2); margin-top:8px; text-align:right; }

.empty { padding:40px; text-align:center; color:var(--text-3); font-size:13px; }
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--line); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--text-3); }
.hidden { display:none !important; }

/* Upload landing screen */
.upload-screen { min-height:calc(100vh - 64px); display:grid; place-items:center; padding:40px 20px; }
.upload-card { width:min(540px, 100%); background:var(--bg-2); border:1px solid var(--line); border-radius:14px; padding:36px 32px; text-align:center; }
.upload-card h2 { font-family:var(--serif); font-size:24px; font-weight:600; margin:0 0 8px; }
.upload-card p { color:var(--text-2); font-size:13px; margin:0 0 24px; }
.dropzone { border:1.5px dashed var(--line); border-radius:10px; padding:32px 20px; cursor:pointer; transition:all .15s; background:var(--bg); }
.dropzone:hover, .dropzone.drag { border-color:var(--accent); background:var(--accent-soft); }
.dropzone-icon { font-family:var(--serif); font-size:32px; color:var(--accent); margin-bottom:8px; }
.dropzone-text { font-size:14px; color:var(--text); margin-bottom:6px; }
.dropzone-sub { font-family:var(--mono); font-size:10px; color:var(--text-3); text-transform:uppercase; letter-spacing:1.2px; }
.upload-help { margin-top:24px; padding:16px; background:var(--bg); border:1px solid var(--line-soft); border-radius:8px; text-align:left; }
.upload-help-title { font-family:var(--mono); font-size:10px; color:var(--text-3); text-transform:uppercase; letter-spacing:1.2px; margin-bottom:10px; }
.upload-help li { margin-bottom:4px; font-size:12.5px; color:var(--text-2); }
.upload-error { margin-top:18px; padding:14px 16px; background:var(--red-soft); border:1px solid var(--red); border-left:3px solid var(--red); border-radius:6px; color:var(--red); font-size:13px; line-height:1.6; text-align:left; }

.template-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:18px 0 6px; }
.template-note { margin-top:12px; padding-top:10px; border-top:1px solid var(--line-soft); color:var(--text-3); font-size:12px; line-height:1.5; }
.validation-list { margin:10px 0 0; padding-left:20px; max-height:260px; overflow:auto; }
.validation-list li { margin-bottom:6px; }
.validation-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.validation-more { margin-top:10px; font-family:var(--mono); font-size:10px; color:var(--text-3); text-transform:uppercase; letter-spacing:.8px; }
.toast { position:fixed; bottom:24px; right:24px; background:var(--bg-2); border:1px solid var(--green); border-left:3px solid var(--green); padding:12px 18px; border-radius:8px; box-shadow:var(--shadow); font-size:13px; color:var(--text); z-index:200; opacity:0; transform:translateY(10px); transition:all .25s; }
.toast.show { opacity:1; transform:translateY(0); }


.activity-panel { max-width:980px; }
.activity-list { padding:10px 14px 14px; }
.activity-item { display:grid; grid-template-columns:18px 1fr; gap:12px; padding:14px 4px; border-bottom:1px solid var(--line-soft); }
.activity-item:last-child { border-bottom:0; }
.activity-dot { width:9px; height:9px; border-radius:50%; background:var(--accent); margin-top:6px; box-shadow:0 0 0 4px rgba(232,179,57,.10); }
.activity-main { min-width:0; }
.activity-top { display:flex; justify-content:space-between; gap:14px; align-items:baseline; margin-bottom:4px; }
.activity-top strong { font-size:13px; color:var(--text); }
.activity-top span { font-family:var(--mono); font-size:10px; color:var(--text-3); white-space:nowrap; }
.activity-copy { color:var(--text-2); font-size:12.5px; line-height:1.55; word-break:break-word; }
.btn[disabled] { opacity:.55; cursor:not-allowed; }

@media (max-width: 1100px) {
  .panels { grid-template-columns:1fr; }
  .kpi-grid { grid-template-columns:repeat(2, 1fr); }
  .vendor-portal-head { grid-template-columns:1fr; }
}

/* Login + sidebar shell additions */
.login-screen { min-height:calc(100vh - 64px); display:grid; place-items:center; padding:40px 20px; }
.login-card { width:min(860px, 100%); background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); border:1px solid var(--line); border-radius:18px; padding:38px; box-shadow:var(--shadow); }
.login-eyebrow { font-family:var(--mono); font-size:10px; color:var(--accent); text-transform:uppercase; letter-spacing:1.8px; margin-bottom:8px; }
.login-card h1 { font-family:var(--serif); font-size:38px; margin:0 0 8px; letter-spacing:-1px; }
.login-card p { color:var(--text-2); margin:0 0 24px; max-width:620px; }
.login-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.login-option { text-align:left; background:var(--bg-2); color:var(--text); border:1px solid var(--line); border-radius:14px; padding:22px; cursor:pointer; transition:all .18s; display:flex; flex-direction:column; gap:8px; min-height:190px; }
.login-option:hover { border-color:var(--accent); transform:translateY(-1px); }
.login-option strong { font-size:18px; }
.login-option small { color:var(--text-2); font-size:13px; line-height:1.5; }
.login-icon { width:36px; height:36px; border-radius:9px; background:var(--accent); color:#1a1308; display:grid; place-items:center; font-family:var(--mono); font-weight:700; }
.vendor-login-box { cursor:default; }
.vendor-login-box:hover { transform:none; }
.login-select { width:100%; margin-top:auto; background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:8px; padding:9px 10px; outline:none; }

.sidebar { position:fixed; left:0; top:64px; bottom:0; width:240px; border-right:1px solid var(--line); background:rgba(14,18,23,.92); backdrop-filter:blur(8px); padding:18px 12px; z-index:40; overflow-y:auto; }
body.app-active .container { margin-left:240px; max-width:none; }
body.app-active .upload-screen { margin-left:240px; }
.sidebar-section-label { font-family:var(--mono); font-size:9px; color:var(--text-3); text-transform:uppercase; letter-spacing:1.6px; margin:14px 10px 8px; }
.side-link { width:100%; display:flex; gap:10px; align-items:flex-start; padding:11px 10px; margin-bottom:6px; border-radius:9px; border:1px solid transparent; background:transparent; color:var(--text-2); text-align:left; cursor:pointer; transition:all .15s; }
.side-link span { width:24px; height:24px; display:grid; place-items:center; border-radius:6px; background:var(--bg-3); color:var(--text-2); }
.side-link strong { display:block; color:var(--text); font-size:13px; }
.side-link small { display:block; color:var(--text-3); font-size:11px; margin-top:2px; }
.side-link:hover, .side-link.active { background:var(--bg-2); border-color:var(--line); color:var(--text); }
.side-link.active span { background:var(--accent); color:#1a1308; }
.logic-card-mini { margin:8px 6px; border:1px solid var(--line-soft); border-radius:10px; padding:12px; background:var(--bg); color:var(--text-2); font-size:11.5px; line-height:1.75; }
.logic-card-mini b { color:var(--accent); }
.calc-box { background:var(--bg-3); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.calc-row { display:grid; grid-template-columns:170px 1fr; gap:12px; padding:10px 14px; border-bottom:1px solid var(--line-soft); }
.calc-row:last-child { border-bottom:0; }
.calc-label { font-family:var(--mono); font-size:10px; color:var(--text-3); text-transform:uppercase; letter-spacing:1.1px; }
.calc-value { color:var(--text); font-size:13px; }
.calc-value.good { color:var(--green); }
.calc-value.warn { color:var(--amber); }
.calc-value.bad { color:var(--red); }
.tradeoff-card { background:var(--bg-3); border:1px solid var(--line); border-left:3px solid var(--blue); border-radius:8px; padding:14px 16px; }
.tradeoff-card.significant { border-left-color:var(--accent); }
.tradeoff-top { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:10px; }
.tradeoff-label { font-family:var(--mono); font-size:10px; color:var(--text-3); text-transform:uppercase; letter-spacing:1.1px; margin-bottom:3px; }
.tradeoff-vendor { font-size:15px; font-weight:600; }
.tradeoff-copy { color:var(--text-2); font-size:13px; margin-bottom:14px; }
.tradeoff-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tradeoff-note { color:var(--text-3); font-family:var(--mono); font-size:10px; margin-left:2px; }


@media (max-width: 900px) {
  .login-grid { grid-template-columns:1fr; }
  .sidebar { display:none !important; }
  body.app-active .container, body.app-active .upload-screen { margin-left:0; }
}

/* Demo polish v6: state-of-the-art control tower treatment */
body {
  background:
    radial-gradient(circle at 18% 6%, rgba(232,179,57,.16) 0, transparent 30%),
    radial-gradient(circle at 86% 14%, rgba(88,166,255,.13) 0, transparent 28%),
    radial-gradient(circle at 65% 88%, rgba(188,140,255,.08) 0, transparent 32%),
    linear-gradient(135deg, #090D13 0%, #101720 42%, #0B1017 100%);
}
body::before {
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.25;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.85), transparent 78%);
}
.topbar,
.sidebar,
.panel,
.kpi,
.vendor-card,
.upload-card,
.login-card,
.util-card,
.rules-card,
.hero-panel,
.insight-card {
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 18px 55px rgba(0,0,0,.28);
}
.topbar { background:rgba(9,13,19,.78); border-bottom-color:rgba(255,255,255,.09); }
.sidebar { background:linear-gradient(180deg, rgba(13,18,26,.95), rgba(8,12,18,.92)); }
.side-link { border-radius:12px; }
.side-link:hover,
.side-link.active { background:linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.025)); border-color:rgba(255,255,255,.1); }
.container { padding-top:24px; }
.page-title { letter-spacing:-.8px; }
.hero-panel {
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:24px 26px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:18px;
  margin-bottom:18px;
  background:
    linear-gradient(135deg, rgba(232,179,57,.14), rgba(88,166,255,.06) 46%, rgba(255,255,255,.03)),
    rgba(22,27,34,.72);
}
.hero-panel::after {
  content:'';
  position:absolute;
  right:-80px;
  top:-120px;
  width:310px;
  height:310px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(232,179,57,.26), transparent 62%);
}
.hero-panel > * { position:relative; z-index:1; }
.hero-eyebrow,
.rules-kicker,
.insight-title { font-family:var(--mono); font-size:10px; color:var(--accent); text-transform:uppercase; letter-spacing:1.6px; }
.hero-panel h2 { margin:6px 0 8px; font-family:var(--serif); font-size:26px; line-height:1.15; letter-spacing:-.6px; max-width:760px; }
.hero-panel p { margin:0; color:var(--text-2); max-width:720px; }
.hero-metric { min-width:190px; padding:18px; border:1px solid rgba(255,255,255,.1); background:rgba(8,12,18,.52); border-radius:16px; text-align:right; }
.hero-metric strong { display:block; font-family:var(--serif); font-size:42px; line-height:1; color:var(--accent); }
.hero-metric span { display:block; margin-top:6px; font-family:var(--mono); font-size:10px; color:var(--text-2); text-transform:uppercase; letter-spacing:1.2px; }
.kpi-grid { margin-bottom:18px; }
.kpi { border-radius:16px; background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)); border-color:rgba(255,255,255,.095); }
.kpi::before { height:3px; opacity:.95; }
.kpi-value { font-size:36px; }
.insight-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-bottom:20px; }
.insight-card { display:grid; grid-template-columns:42px 1fr; gap:14px; padding:16px; border:1px solid rgba(255,255,255,.09); border-radius:16px; background:rgba(22,27,34,.68); }
.insight-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:linear-gradient(135deg, var(--accent), #9C6B1B); color:#160E05; font-family:var(--mono); font-weight:800; }
.insight-value { margin-top:4px; font-size:18px; font-weight:700; }
.insight-card p { margin:4px 0 0; color:var(--text-2); font-size:12.5px; }
.panel { border-radius:16px; background:rgba(22,27,34,.72); border-color:rgba(255,255,255,.09); backdrop-filter:blur(12px); }
.panel-head { background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01)); }
thead th { background:#1B2430; }
tbody tr:hover { background:rgba(232,179,57,.045); }
tbody tr.selected { background:rgba(232,179,57,.14); }
.tag { border-radius:999px; padding:3px 9px; }
.filter-bar { background:rgba(12,17,24,.5); }
.filter-input,
.chip,
.btn,
.role-btn,
.login-select { border-radius:10px; }
.vendor-card { border-radius:14px; background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); border-color:rgba(255,255,255,.08); }
.meter { height:7px; background:rgba(255,255,255,.07); }
.drawer { background:linear-gradient(180deg, #121922, #0B1016); }
.drawer-head { background:linear-gradient(135deg, rgba(232,179,57,.1), rgba(88,166,255,.05)); }
.rules-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:16px; }
.rules-card { border:1px solid rgba(255,255,255,.09); border-radius:18px; padding:22px; background:rgba(22,27,34,.72); }
.rules-card.featured { grid-column:1 / -1; background:linear-gradient(135deg, rgba(232,179,57,.14), rgba(88,166,255,.06)); }
.rules-card h2,
.rules-card h3 { margin:6px 0 12px; font-family:var(--serif); letter-spacing:-.4px; }
.rules-card h2 { font-size:28px; max-width:760px; }
.rules-card h3 { font-size:20px; }
.rules-card p,
.rules-card li { color:var(--text-2); }
.rules-card ul { margin:0; padding-left:18px; }
.formula-strip { display:flex; flex-wrap:wrap; gap:10px; margin:18px 0; }
.formula-strip span { display:inline-flex; padding:9px 12px; border-radius:999px; border:1px solid rgba(232,179,57,.4); background:rgba(232,179,57,.08); color:var(--accent); font-family:var(--mono); font-size:12px; }
@media (max-width:1100px) {
  .hero-panel { flex-direction:column; align-items:flex-start; }
  .hero-metric { text-align:left; width:100%; }
  .insight-grid { grid-template-columns:1fr; }
  .rules-grid { grid-template-columns:1fr; }
}
.btn-mini { padding:3px 8px; font-size:10px; border-radius:5px; }
.lead-time-inline { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.lead-time-input { width:76px; background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:5px; padding:4px 6px; font-family:var(--mono); }
.tradeoff-card.warning { border-left-color:var(--red); background:linear-gradient(180deg, rgba(244,112,103,.08), rgba(244,112,103,.02)); }
.tag-bad { background:var(--red-soft); border-color:var(--red); color:var(--red); }


.kpi.clickable { width:100%; text-align:left; color:inherit; font-family:inherit; cursor:pointer; }
.kpi.clickable.active { border-color:var(--accent); box-shadow:0 0 0 1px rgba(229, 176, 54, .35), 0 12px 28px rgba(0,0,0,.22); }
.remark-cell { min-width:320px; max-width:420px; color:var(--text-2); line-height:1.45; font-size:12px; white-space:normal; }
.decision-pill { display:inline-flex; margin-top:6px; padding:3px 8px; border-radius:999px; border:1px solid rgba(229,176,54,.35); background:rgba(229,176,54,.10); color:var(--accent); font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.6px; }
.decision-note { margin-top:10px; padding:10px 12px; border-radius:6px; background:rgba(71, 159, 245, .08); border:1px solid rgba(71, 159, 245, .18); color:var(--text-2); font-size:12px; }

.shared-password-row { margin:18px 0 20px; padding:14px; background:var(--bg-2); border:1px solid var(--line-soft); border-radius:12px; }
.shared-password-row label { display:flex; justify-content:space-between; gap:14px; font-family:var(--mono); font-size:10px; color:var(--text-3); text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; }
.shared-password-row label span { text-transform:none; letter-spacing:0; font-family:var(--sans); font-size:12px; color:var(--text-3); }
.shared-password-row input { width:100%; background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:8px; padding:10px 12px; outline:none; }
.shared-password-row input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }

.password-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.shared-password-row .password-input-wrap input,
.password-input-wrap input {
  padding-right: 74px;
}
.password-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--text-2);
  border-radius: 6px;
  padding: 5px 9px;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .6px;
  cursor: pointer;
}
.password-toggle:hover {
  border-color: var(--accent);
  color: var(--text);
}

.password-entry-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.password-entry-row input {
  flex: 1;
  min-width: 0;
}
.password-mini-btn,
.password-enter-btn {
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text-2);
  border-radius: 8px;
  padding: 0 12px;
  font-family: var(--mono);
  font-size: 11px;
  cursor: pointer;
  min-width: 54px;
}
.password-enter-btn {
  min-width: 42px;
  background: var(--accent);
  border-color: var(--accent);
  color: #1a1308;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}
.password-mini-btn:hover {
  border-color: var(--accent);
  color: var(--text);
}
.password-enter-btn:hover {
  background: #f3c04a;
  border-color: #f3c04a;
}
.password-hint {
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-3);
}