/* iCode Ops — shared design system · Command Deck v2 (re-skin 2026-07-11)
   Petroleum-black ground, brass accent, steel hairlines, monospace instrument labels.
   Every selector from v1 preserved — this only shifts the visual layer (colors/type/finish);
   no structural or behavioural change, no data touched. */
:root{
  /* grounds — petroleum black, cool-steel bias */
  --navy-950:#070a10;--navy-900:#0b0f16;--navy-850:#111826;--navy-800:#161f30;--navy-750:#1c2740;
  /* steel hairlines */
  --line:rgba(150,172,208,.13);--line-strong:rgba(150,172,208,.30);
  /* accent — desert brass (Zerust gold, control-room readout) */
  --accent:#e2ab41;--accent-2:#f2c664;--accent-ink:#dcb85f;
  --gold:#e2ab41;--gold-2:#f2ce6a;--green:#43c08d;--red:#e5544e;--orange:#ef8a3c;
  --white:#f0f4fb;--text:#c4cfe0;--muted:#8493ac;
  --radius:12px;--shadow:0 22px 50px -20px rgba(0,0,0,.7);
  --font-d:'Archivo',system-ui,sans-serif;--font-b:'Inter',system-ui,sans-serif;
  --font-m:ui-monospace,'Cascadia Code','SF Mono',Consolas,'Liberation Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-b);color:var(--text);line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh;
  background:
    radial-gradient(1100px 520px at 82% -8%, rgba(226,171,65,.07), transparent 60%),
    linear-gradient(180deg,#0c111a,var(--navy-900) 42%)}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  background-image:linear-gradient(rgba(226,171,65,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(226,171,65,.045) 1px,transparent 1px);
  background-size:46px 46px;mask-image:radial-gradient(ellipse 90% 70% at 60% 0%,#000,transparent 80%)}
img{max-width:100%}a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-d);color:var(--white);line-height:1.15;letter-spacing:-.01em}
.wrap{max-width:min(1660px,94vw);margin:0 auto;padding:0 clamp(22px,3vw,48px)}

/* top nav */
.topnav{position:sticky;top:0;z-index:50;background:rgba(9,12,19,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.topnav .in{max-width:min(1660px,94vw);margin:0 auto;padding:0 clamp(22px,3vw,48px);display:flex;align-items:center;gap:26px;height:62px}
.topnav img{height:30px}
.topnav .links{display:flex;gap:3px;flex:1;overflow-x:auto;scrollbar-width:none}
.topnav .links::-webkit-scrollbar{display:none}
.topnav .links a{font-size:.86rem;font-weight:500;padding:7px 10px;border-radius:8px;white-space:nowrap;color:var(--muted)}
.topnav .links a:hover{color:var(--white);background:rgba(226,171,65,.09)}
.topnav .links a.on{color:var(--white);background:rgba(226,171,65,.15);border:1px solid rgba(226,171,65,.4)}
.topnav .out{font-size:.8rem;color:var(--muted);cursor:pointer;border:1px solid var(--line);border-radius:8px;padding:7px 12px;background:none}
.topnav .out:hover{color:var(--white);border-color:var(--line-strong)}
/* hamburger + mobile-only user block: hidden on desktop */
.topnav .burger{display:none;font-size:1.25rem;line-height:1;color:var(--text);background:none;border:1px solid var(--line);border-radius:8px;width:40px;height:38px;cursor:pointer;padding:0}
.topnav .burger:hover{color:var(--white);border-color:var(--line-strong)}
.topnav .mnav-user{display:none}

/* mobile dropdown nav */
@media(max-width:760px){
  .topnav .in{gap:12px;justify-content:space-between}
  .topnav .brand{flex:none}
  .topnav .navright > .badge,.topnav .navright > .small,.topnav .navright > a,.topnav .navright > .out{display:none}
  .topnav .burger{display:inline-flex;align-items:center;justify-content:center}
  .topnav .links{position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:2px;flex:none;overflow:hidden;
    background:rgba(9,12,19,.98);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
    padding:0 16px;max-height:0;opacity:0;transform:translateY(-6px);pointer-events:none;
    transition:max-height .28s ease,opacity .2s ease,transform .28s ease,padding .28s ease;
    box-shadow:var(--shadow)}
  .topnav.nav-open .links{max-height:80vh;overflow-y:auto;opacity:1;transform:translateY(0);pointer-events:auto;padding:10px 16px 16px}
  .topnav .links a{padding:12px 14px;font-size:.95rem;border-radius:8px}
  .topnav .links a.on{border-color:var(--accent)}
  .topnav .mnav-user{display:flex;flex-direction:column;gap:2px;margin-top:8px;padding-top:10px;border-top:1px solid var(--line)}
  .topnav .mnav-user > .small{padding:6px 14px}
  .topnav .mnav-user a{padding:12px 14px;font-size:.95rem;border-radius:8px;color:var(--muted)}
  .topnav .mnav-user a:hover{color:var(--white);background:rgba(226,171,65,.09)}
  .topnav .mnav-user .mnav-out{color:#f08a8a}
}

/* page header */
.pagehead{padding:34px 0 8px}
.pagehead .eyebrow{font-family:var(--font-m);font-weight:600;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.pagehead h1{font-size:clamp(1.5rem,3vw,2.1rem);margin:8px 0 4px}
.pagehead p{color:var(--muted);font-size:.95rem;max-width:720px}

/* cards & grids */
.card{background:linear-gradient(168deg,rgba(24,33,52,.55),rgba(13,18,30,.42));border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.card:hover{border-color:var(--line-strong)}
.card h3{font-size:1.02rem;margin-bottom:6px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.kpi{background:linear-gradient(160deg,rgba(24,33,52,.7),rgba(13,18,30,.45));border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent),transparent)}
.kpi .n{font-family:var(--font-m);font-weight:600;font-size:1.5rem;color:var(--white);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.kpi .l{font-family:var(--font-m);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.kpi.gold::before{background:linear-gradient(90deg,var(--gold),transparent)}
.kpi.gold .n{color:var(--gold-2)}

/* badges & chips */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:600;padding:3px 10px;border-radius:20px;border:1px solid;white-space:nowrap}
.b-ok{color:#79e2b5;border-color:rgba(67,192,141,.45);background:rgba(67,192,141,.1)}
.b-warn{color:#f2c072;border-color:rgba(239,138,60,.45);background:rgba(239,138,60,.1)}
.b-danger{color:#f79490;border-color:rgba(229,84,78,.5);background:rgba(229,84,78,.12)}
.b-info{color:#f2c664;border-color:rgba(226,171,65,.45);background:rgba(226,171,65,.1)}
.b-muted{color:var(--muted);border-color:var(--line);background:rgba(132,147,172,.08)}
.b-gold{color:var(--gold-2);border-color:rgba(226,171,65,.5);background:rgba(226,171,65,.1)}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:500;padding:6px 13px;border-radius:20px;border:1px solid var(--line);background:rgba(17,24,38,.6);cursor:pointer;color:var(--text)}
.chip:hover{border-color:var(--line-strong);color:var(--white)}
.chip.on{background:rgba(226,171,65,.16);border-color:var(--accent);color:var(--white)}
.demo{font-size:.6rem;font-weight:700;letter-spacing:.08em;color:var(--muted);border:1px dashed var(--line-strong);border-radius:4px;padding:1px 5px;vertical-align:middle}

/* buttons */
.btn{font-family:var(--font-d);font-weight:700;font-size:.86rem;display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;border:none;padding:10px 18px;border-radius:9px;white-space:nowrap;transition:transform .15s,box-shadow .2s,filter .2s}
.btn-primary{background:linear-gradient(120deg,var(--accent),var(--accent-2));color:#1a1200;box-shadow:0 10px 26px -12px rgba(226,171,65,.7)}
.btn-primary:hover{transform:translateY(-1px);filter:brightness(1.05)}
.btn-ghost{background:rgba(255,255,255,.04);color:var(--white);border:1px solid var(--line-strong)}
.btn-ghost:hover{background:rgba(255,255,255,.09)}
.btn-sm{padding:6px 12px;font-size:.78rem}

/* tables */
table.t{width:100%;border-collapse:collapse;font-size:.88rem}
table.t th{font-family:var(--font-m);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line-strong)}
table.t td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
table.t tr:hover td{background:rgba(226,171,65,.05)}
.num{font-variant-numeric:tabular-nums;text-align:right}
.mono2{font-family:var(--font-m);font-size:.82rem}
.t-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:rgba(13,18,30,.45)}

/* forms */
.field label{display:block;font-size:.78rem;color:var(--text);margin-bottom:5px;font-weight:500}
.field input,.field select,.field textarea{width:100%;background:rgba(7,10,16,.6);border:1px solid var(--line-strong);border-radius:8px;padding:10px 12px;color:var(--white);font-family:var(--font-b);font-size:.9rem}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(226,171,65,.18)}
.field{margin-bottom:12px}
.frow{display:flex;gap:12px}.frow .field{flex:1}

/* modal */
.modal-bg{position:fixed;inset:0;background:rgba(3,6,11,.72);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;z-index:90;padding:20px}
.modal-bg.open{display:flex}
.modal{background:var(--navy-850);border:1px solid var(--line-strong);border-radius:14px;padding:26px;max-width:520px;width:100%;box-shadow:var(--shadow);max-height:88vh;overflow:auto}
.modal h3{margin-bottom:14px}

/* misc */
.muted{color:var(--muted)}.gold{color:var(--gold-2)}.small{font-size:.82rem}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.spread{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sep{height:1px;background:var(--line);margin:16px 0}
.hintbox{border:1px solid rgba(226,171,65,.32);border-left:3px solid var(--accent);background:rgba(226,171,65,.06);border-radius:10px;padding:12px 14px;font-size:.84rem}
.hintbox b{color:var(--accent)}
footer.portal{padding:34px 0;text-align:center;font-size:.72rem;letter-spacing:.06em;color:var(--muted);font-family:var(--font-m)}

@media(max-width:960px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.g4,.g3,.g2{grid-template-columns:1fr}.frow{flex-direction:column}.topnav .in{gap:12px}}
@media print{
  body::before,.topnav,.no-print{display:none!important}
  body{background:#fff;color:#000}
}