/* EnhancedOps.Ninja — Tax Lien Platform demo.
   Brand tokens are fixed. Blue + white dominant; gold is a SECONDARY accent
   reserved for deadlines and warnings only. Background is always dark. */
:root{
  --blue:#1A6ECC; --blue-lt:#3F8AE0; --gold:#F5B301;
  --bg:#0A0F1A; --panel:#0E1420; --panel-2:#131b2b;
  --line:#243044; --line-2:#31415c;
  --tx:#EEF3FA; --tx-2:#AEBBCD; --tx-3:#7E8DA0;
  --ok:#2FA86B; --bad:#D9534F;
  --pad:28px; --r:10px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--tx);
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,.dsp{font-family:'Bebas Neue',Impact,'Arial Narrow',sans-serif;
  font-weight:400;letter-spacing:.02em;margin:0}
a{color:var(--blue-lt);text-decoration:none}

/* ---------- app bar ---------- */
.appbar{position:sticky;top:0;z-index:60;background:var(--panel);
  border-bottom:1px solid var(--line);display:flex;align-items:center;
  gap:16px;padding:12px var(--pad)}
.appbar .logo{width:280px;max-width:46vw;height:auto;display:block;flex:0 0 auto}
.appbar .spacer{flex:1 1 auto}
.appbar .env{font-size:11px;letter-spacing:.10em;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--line-2);border-radius:999px;
  padding:5px 12px;white-space:nowrap;font-weight:700}
.appbar .mascot{height:46px;width:auto;flex:0 0 auto;display:block;pointer-events:none}

/* ---------- layout ---------- */
.shell{display:flex;align-items:flex-start;min-height:calc(100vh - 71px)}
.side{width:246px;flex:0 0 246px;border-right:1px solid var(--line);
  padding:20px 0 40px;position:sticky;top:71px;align-self:flex-start;
  max-height:calc(100vh - 71px);overflow-y:auto}
.side .grp{padding:16px 20px 6px;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tx-3);font-weight:700}
.side button{display:flex;align-items:center;gap:10px;width:100%;
  background:none;border:0;border-left:3px solid transparent;color:var(--tx-2);
  font:inherit;font-size:14px;text-align:left;padding:9px 20px;cursor:pointer}
.side button:hover{background:var(--panel);color:var(--tx)}
.side button.on{background:var(--panel-2);color:var(--tx);
  border-left-color:var(--blue-lt);font-weight:700}
.side .lyr{font-size:10px;color:var(--tx-3);margin-left:auto;font-weight:700;
  letter-spacing:.06em}
.side button.on .lyr{color:var(--blue-lt)}
.main{flex:1 1 auto;min-width:0;padding:26px var(--pad) 80px}

/* ---------- page furniture ---------- */
.ph{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.ph h1{font-size:38px;line-height:1}
.tag{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  color:var(--blue-lt);border:1px solid var(--line-2);border-radius:999px;padding:4px 11px}
.sub{color:var(--tx-2);margin:0 0 22px;max-width:760px}
.sec{margin:34px 0 12px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sec h2{font-size:23px}
.sec .note{color:var(--tx-3);font-size:13px}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:20px}
.panel + .panel{margin-top:14px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ---------- stats ---------- */
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.stat .k{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-3);font-weight:700}
.stat .v{font-family:'Bebas Neue',Impact,sans-serif;font-size:34px;line-height:1.1;margin-top:4px}
.stat .m{font-size:12.5px;color:var(--tx-2)}
.stat.acc{border-color:var(--line-2);box-shadow:inset 3px 0 0 var(--blue-lt)}
.stat.warn{box-shadow:inset 3px 0 0 var(--gold)}

/* ---------- buttons: ALWAYS solid fill, never ghost ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--blue);color:#fff;border:1px solid var(--blue);
  border-radius:8px;padding:9px 16px;font:inherit;font-size:14px;font-weight:700;
  cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--blue-lt);border-color:var(--blue-lt)}
.btn.sm{padding:6px 12px;font-size:13px}
.btn.alt{background:var(--panel-2);border-color:var(--line-2);color:var(--tx)}
.btn.alt:hover{background:var(--line);border-color:var(--line-2)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#231A00}
.btn.gold:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btnrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

/* ---------- chips / pills ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
  border-radius:999px;padding:3px 10px;background:var(--panel-2);
  border:1px solid var(--line-2);color:var(--tx-2);white-space:nowrap}
.chip.b{background:rgba(63,138,224,.14);border-color:rgba(63,138,224,.45);color:var(--blue-lt)}
.chip.g{background:rgba(245,179,1,.13);border-color:rgba(245,179,1,.42);color:var(--gold)}
.chip.ok{background:rgba(47,168,107,.14);border-color:rgba(47,168,107,.45);color:#5DD79B}
.chip.bad{background:rgba(217,83,79,.14);border-color:rgba(217,83,79,.45);color:#F08682}
.chip.deed{background:rgba(63,138,224,.14);border-color:var(--blue-lt);color:var(--blue-lt)}
.chips{display:flex;gap:7px;flex-wrap:wrap}

/* ---------- tables ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--tx-3);font-weight:700;padding:0 12px 9px;border-bottom:1px solid var(--line)}
.tbl td{padding:12px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{cursor:pointer}
.tbl tbody tr:hover{background:var(--panel-2)}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.tbl .ttl{font-weight:700}
.tbl .sm{font-size:12.5px;color:var(--tx-3)}
.wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- forms ---------- */
label.f{display:block;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--tx-3);font-weight:700;margin-bottom:6px}
input[type=text],input[type=number],select{width:100%;background:var(--bg);
  color:var(--tx);border:1px solid var(--line-2);border-radius:8px;
  padding:9px 11px;font:inherit;font-size:14px}
input:focus,select:focus{outline:none;border-color:var(--blue-lt)}
input[type=range]{width:100%;accent-color:var(--blue-lt)}
.fld{margin-bottom:14px}
.toggle{display:flex;align-items:center;gap:9px;cursor:pointer;
  padding:7px 0;font-size:14px;color:var(--tx-2)}
.toggle input{accent-color:var(--blue-lt);width:16px;height:16px;cursor:pointer}
.toggle.on{color:var(--tx)}

/* ---------- hero ---------- */
.hero{background:linear-gradient(160deg,#101a2c 0%,var(--panel) 55%,var(--panel) 100%);
  border:1px solid var(--line);border-radius:14px;padding:30px 34px;
  display:flex;align-items:center;gap:30px;margin-bottom:22px;overflow:hidden}
.hero .cp{flex:1 1 auto;min-width:0}
.hero h1{font-size:46px;line-height:.98;margin-bottom:10px}
.hero p{color:var(--tx-2);margin:0;max-width:620px}
.hero img{width:290px;max-width:38%;height:auto;flex:0 0 auto;display:block}

/* ---------- sub-tax hero (Layer 3 headline feature) ---------- */
.subtax{border:1px solid var(--gold);border-radius:var(--r);
  background:linear-gradient(180deg,rgba(245,179,1,.07),transparent 70%);padding:20px}
.subtax .hd{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:6px}
.subtax .hd h2{font-size:25px}
.rule{border-left:3px solid var(--gold);background:var(--panel-2);
  border-radius:0 8px 8px 0;padding:12px 15px;margin:12px 0;color:var(--tx-2);font-size:13.5px}
.rule b{color:var(--tx)}

/* countdown bar */
.bar{height:6px;background:var(--panel-2);border-radius:99px;overflow:hidden;margin-top:7px}
.bar i{display:block;height:100%;background:var(--blue-lt);border-radius:99px}
.bar.g i{background:var(--gold)}
.bar.r i{background:var(--bad)}

/* ---------- notices / misc ---------- */
.callout{border:1px solid var(--line-2);border-left:3px solid var(--blue-lt);
  background:var(--panel-2);border-radius:0 8px 8px 0;padding:13px 16px;
  color:var(--tx-2);font-size:13.5px}
.callout.gold{border-left-color:var(--gold)}
.callout.bad{border-left-color:var(--bad)}
.callout b{color:var(--tx)}
.why{margin:8px 0 0;padding-left:18px;color:var(--tx-2);font-size:13px}
.why li{margin:3px 0}
.score{font-family:'Bebas Neue',Impact,sans-serif;font-size:30px;line-height:1;color:var(--blue-lt)}
.muted{color:var(--tx-3)}
.hr{height:1px;background:var(--line);margin:18px 0;border:0}

/* empty / illustration states */
.illus{display:flex;align-items:center;gap:22px;padding:8px 4px}
.illus img{height:132px;width:auto;flex:0 0 auto;display:block}
.illus .tx{color:var(--tx-2);font-size:13.5px;max-width:520px}

/* ---------- modal ---------- */
.mask{position:fixed;inset:0;background:rgba(5,8,14,.74);z-index:200;
  display:none;align-items:flex-start;justify-content:center;padding:40px 18px;overflow-y:auto}
.mask.on{display:flex}
.modal{background:var(--panel);border:1px solid var(--line-2);border-radius:14px;
  width:100%;max-width:680px;padding:24px}
.modal .mh{display:flex;align-items:flex-start;gap:14px;margin-bottom:6px}
.modal .mh h2{font-size:26px;line-height:1.05}
.modal .x{margin-left:auto;background:var(--panel-2);border:1px solid var(--line-2);
  color:var(--tx-2);border-radius:8px;width:32px;height:32px;font-size:17px;
  cursor:pointer;flex:0 0 auto;line-height:1}
.kv{display:grid;grid-template-columns:auto 1fr;gap:7px 18px;font-size:14px;margin-top:12px}
.kv dt{color:var(--tx-3);font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;
  font-weight:700;padding-top:2px}
.kv dd{margin:0;color:var(--tx)}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,26px);
  background:var(--panel-2);border:1px solid var(--line-2);border-left:3px solid var(--blue-lt);
  color:var(--tx);border-radius:9px;padding:12px 18px;font-size:14px;z-index:300;
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;
  max-width:min(560px,92vw);box-shadow:0 12px 34px rgba(0,0,0,.5)}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  :root{--pad:16px}
  .appbar{gap:10px;padding:10px var(--pad)}
  .appbar .logo{width:210px}
  .appbar .mascot{display:none}
  .shell{display:block}
  .side{position:static;width:auto;flex:none;max-height:none;border-right:0;
    border-bottom:1px solid var(--line);display:flex;gap:6px;overflow-x:auto;
    padding:10px var(--pad);scrollbar-width:none}
  .side::-webkit-scrollbar{display:none}
  .side .grp{display:none}
  .side button{width:auto;flex:0 0 auto;border-left:0;border-bottom:3px solid transparent;
    border-radius:8px 8px 0 0;padding:8px 13px;white-space:nowrap}
  .side button.on{border-left:0;border-bottom-color:var(--blue-lt)}
  .side .lyr{display:none}
  .main{padding:20px var(--pad) 64px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .ph h1{font-size:31px}
  .hero{flex-direction:column;align-items:flex-start;padding:24px;gap:18px}
  .hero h1{font-size:36px}
  .hero img{width:190px;max-width:60%;align-self:center}
  .illus{flex-direction:column;align-items:flex-start;gap:14px}
  .illus img{height:108px}
  .modal{padding:19px}
  .kv{grid-template-columns:1fr;gap:3px 0}
  .kv dd{margin-bottom:9px}
}
@media (max-width:420px){
  .appbar .logo{width:172px}
  .appbar .env{font-size:10px;padding:4px 9px}
}

/* ---------- instrument types (first-class concept) ---------- */
.inst{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;
  border-radius:5px;padding:3px 9px;white-space:nowrap;letter-spacing:.03em;
  border:1px solid;text-transform:uppercase}
.i-lien{background:rgba(63,138,224,.15);border-color:rgba(63,138,224,.55);color:#7FB4F0}
.i-deed{background:rgba(47,168,107,.15);border-color:rgba(47,168,107,.55);color:#5DD79B}
.i-redeem{background:rgba(245,179,1,.14);border-color:rgba(245,179,1,.55);color:var(--gold)}
.i-pending{background:var(--panel-2);border-color:var(--line-2);color:var(--tx-3)}
.inst.lg{font-size:13px;padding:5px 12px}

/* rules library grid */
.states{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(126px,1fr))}
.st{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--line-2);
  border-radius:8px;padding:10px 11px;cursor:pointer;text-align:left;font:inherit;color:var(--tx)}
.st:hover{background:var(--panel-2);border-color:var(--line-2)}
.st .c{font-family:'Bebas Neue',Impact,sans-serif;font-size:21px;line-height:1}
.st .n{font-size:11px;color:var(--tx-3);margin:1px 0 6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st .d{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.st.lien{border-left-color:#3F8AE0} .st.lien .d{color:#7FB4F0}
.st.deed{border-left-color:var(--ok)} .st.deed .d{color:#5DD79B}
.st.redeem{border-left-color:var(--gold)} .st.redeem .d{color:var(--gold)}
.st.pending{border-left-color:var(--line-2);opacity:.72} .st.pending .d{color:var(--tx-3)}
.st.verified .c::after{content:" ✓";font-size:12px;color:var(--ok);vertical-align:middle}

.legend{display:flex;gap:16px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:var(--tx-2)}
.legend i{width:11px;height:11px;border-radius:3px;display:inline-block;margin-right:6px;vertical-align:-1px}

/* return calculator comparison */
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cmp .col{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.cmp .col.win{border-color:var(--gold);box-shadow:inset 0 0 0 1px rgba(245,179,1,.22)}
.big{font-family:'Bebas Neue',Impact,sans-serif;line-height:1;letter-spacing:.01em}
.big.xl{font-size:44px} .big.md{font-size:29px}
.pend{color:var(--tx-3);font-style:italic}
@media (max-width:900px){ .cmp{grid-template-columns:1fr} .states{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))} }

/* ---------- Illinois step-function chart ---------- */
.steps{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;align-items:end;
  height:160px;margin:14px 0 8px}
.steps .b{background:var(--panel-2);border:1px solid var(--line-2);
  border-radius:6px 6px 0 0;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;padding:7px 3px;position:relative;transition:background .15s,border-color .15s}
.steps .b.on{background:rgba(245,179,1,.18);border-color:var(--gold)}
.steps .b.past{background:rgba(63,138,224,.10);border-color:rgba(63,138,224,.35)}
.steps .b .p{font-family:'Bebas Neue',Impact,sans-serif;font-size:19px;line-height:1;color:var(--tx-2)}
.steps .b.on .p{color:var(--gold);font-size:23px}
.steps .lb{font-size:9.5px;color:var(--tx-3);text-align:center;margin-top:5px;line-height:1.25}
.stepnote{display:flex;gap:9px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:var(--tx-2)}
@media (max-width:900px){ .steps{height:132px} .steps .b .p{font-size:15px} .steps .b.on .p{font-size:18px} }