/* 8nterp consoles — the same schematic ink as the marketing sheet.
   Red is supply, blue is return, purple is the controls layer. */
:root{
  /* Schematic ink. Every HVAC drawing is inked red for supply and blue for
     return; purple is the third thing on the sheet — the controls layer, and
     8nterp's own voice. One colour, one job, and the job comes from the trade. */
  --graphite:#0D0B14; --panel:#17141F; --panel2:#1E1A29; --panel3:#282234;
  --steel:#EDEBF2; --dim:#A29CB5; --faint:#8B84A0;
  --paper:#FFFFFF;
  --copper:#A177F5; --copper-lt:#B892FF;      /* purple — 8nterp, primary action */
  --cool:#5B9BFF; --cool-lt:#86B7FF;          /* blue  — return air, information */
  --good:#5B9BFF; --warn:#A177F5; --bad:#F0616B;
  --rule:rgba(237,235,242,.13); --rule2:rgba(237,235,242,.06);
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --sans:'IBM Plex Sans',ui-sans-serif,system-ui,sans-serif;
  --slab:Bitter,Georgia,serif;
  --r:5px;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--graphite);color:var(--steel);font-family:var(--sans);
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;}
a{color:var(--cool-lt);}
h1,h2,h3{font-family:var(--slab);font-weight:600;letter-spacing:-.012em;margin:0;}

/* ── chrome ─────────────────────────────────────────── */
.topbar{display:flex;align-items:center;gap:26px;padding:0 22px;height:58px;
  background:var(--panel);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:50;}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--paper);
  font-family:var(--slab);font-weight:700;font-size:1.02rem;}
.brand i{width:23px;height:23px;display:grid;place-items:center;background:var(--copper);
  color:#0D0B14;border-radius:3px;font-style:normal;font-size:.85rem;font-weight:700;}
.mainnav{display:flex;gap:3px;flex:1;overflow-x:auto;}
.mainnav a{color:var(--dim);text-decoration:none;font-size:.88rem;padding:7px 11px;border-radius:4px;white-space:nowrap;}
.mainnav a:hover{color:var(--paper);background:var(--panel2);}
.mainnav a.on{color:var(--copper);background:rgba(161,119,245,.14);font-weight:600;}
.who{display:flex;align-items:center;gap:10px;font-size:.85rem;color:var(--dim);}
.avatar{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;
  background:var(--panel3);color:var(--steel);font-size:.7rem;font-weight:600;font-family:var(--mono);}
.uname{white-space:nowrap;}
@media(max-width:760px){.uname{display:none}.topbar{gap:14px;padding:0 12px}}
.linkish{background:none;border:0;color:var(--dim);cursor:pointer;font:inherit;font-size:.85rem;padding:0;text-decoration:underline;}
.linkish:hover{color:var(--paper);}
main{max-width:1240px;margin:0 auto;padding:30px 22px 70px;}
main.wide{max-width:1500px;}
.consolefoot{border-top:1px solid var(--rule);padding:20px 22px;color:var(--faint);font-size:.8rem;text-align:center;}

.flash{max-width:1240px;margin:16px auto -8px;padding:11px 16px;border-radius:var(--r);font-size:.9rem;}
.flash.ok{background:rgba(91,155,255,.13);color:var(--good);border:1px solid rgba(91,155,255,.3);}
.flash.err{background:rgba(240,97,107,.13);color:var(--bad);border:1px solid rgba(240,97,107,.3);}
.flash.info{background:rgba(91,155,255,.12);color:var(--cool-lt);border:1px solid rgba(91,155,255,.28);}

/* ── page head ──────────────────────────────────────── */
.phead{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;
  margin-bottom:24px;flex-wrap:wrap;}
.phead h1{font-size:1.72rem;color:var(--paper);}
.phead .sub{color:var(--dim);font-size:.92rem;margin:5px 0 0;}
.eyebrow{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--copper);margin:0 0 7px;}

/* ── tiles ──────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:12px;margin-bottom:26px;}
.stat{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r);padding:15px 16px;}
.stat .k{font-family:var(--mono);font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin:0 0 7px;}
.stat .v{font-family:var(--mono);font-size:1.5rem;font-weight:600;color:var(--paper);margin:0;
  font-variant-numeric:tabular-nums;line-height:1.1;}
.stat .v.good{color:var(--good);} .stat .v.warn{color:var(--warn);}
.stat .v.bad{color:var(--bad);} .stat .v.cool{color:var(--cool-lt);} .stat .v.copper{color:var(--copper-lt);}
.stat .s{font-size:.76rem;color:var(--dim);margin:5px 0 0;line-height:1.4;}

/* ── panels ─────────────────────────────────────────── */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;}
.grid-side{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:18px;}
@media(max-width:940px){.grid2,.grid-side{grid-template-columns:1fr;}}
.panel{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;margin-bottom:18px;}
.panel > h2{font-size:.95rem;font-family:var(--sans);font-weight:600;color:var(--paper);
  padding:13px 16px;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;gap:12px;align-items:center;}
.panel > h2 .more{font-size:.8rem;font-weight:400;}
.panel .pad{padding:16px;}

/* ── tables ─────────────────────────────────────────── */
.tscroll{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:.875rem;}
th,td{text-align:left;padding:11px 16px;border-bottom:1px solid var(--rule2);vertical-align:middle;}
th{font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);font-weight:500;background:var(--panel2);white-space:nowrap;}
td{color:var(--steel);}
td.num,th.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;}
tbody tr:last-child td{border-bottom:0;}
tbody tr:hover{background:var(--panel2);}
td a{text-decoration:none;font-weight:500;}
td a:hover{text-decoration:underline;}
td .muted{color:var(--faint);font-size:.8rem;display:block;}
.empty{color:var(--faint);padding:22px 16px;margin:0;font-size:.9rem;}

/* ── badges ─────────────────────────────────────────── */
.badge{display:inline-block;font-family:var(--mono);font-size:.63rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:3px;white-space:nowrap;}
.badge.neutral{background:var(--panel3);color:var(--dim);}
.badge.good{background:rgba(91,155,255,.16);color:var(--good);}
.badge.cool{background:rgba(91,155,255,.15);color:var(--cool-lt);}
.badge.warn{background:rgba(161,119,245,.17);color:var(--warn);}
.badge.bad{background:rgba(240,97,107,.16);color:var(--bad);}
.badge.copper{background:rgba(161,119,245,.17);color:var(--copper-lt);}

/* ── stage bar ──────────────────────────────────────── */
.stagebar{display:flex;list-style:none;margin:0;padding:0;gap:0;flex-wrap:wrap;}
.stagebar li{flex:1;min-width:96px;position:relative;padding:0 0 0 0;text-align:center;}
.stagebar li .dot{display:block;width:11px;height:11px;border-radius:50%;margin:0 auto 7px;
  background:var(--panel3);border:2px solid var(--panel3);}
.stagebar li:not(:last-child)::after{content:"";position:absolute;top:5px;left:50%;right:-50%;
  height:2px;background:var(--panel3);z-index:0;}
.stagebar li.done .dot{background:var(--cool);border-color:var(--cool);}
.stagebar li.done::after{background:var(--cool);}
.stagebar li.now .dot{background:var(--copper);border-color:var(--copper);
  box-shadow:0 0 0 4px rgba(161,119,245,.24);}
.stagebar li .lbl{font-size:.72rem;color:var(--faint);position:relative;z-index:1;}
.stagebar li.done .lbl{color:var(--dim);}
.stagebar li.now .lbl{color:var(--copper-lt);font-weight:600;}

/* ── timeline ───────────────────────────────────────── */
.timeline{list-style:none;margin:0;padding:0;}
.timeline li{position:relative;padding:0 0 18px 22px;border-left:1px solid var(--rule);}
.timeline li:last-child{border-left-color:transparent;padding-bottom:0;}
.timeline li::before{content:"";position:absolute;left:-4.5px;top:5px;width:8px;height:8px;
  border-radius:50%;background:var(--cool);}
.timeline .t{font-size:.88rem;color:var(--paper);margin:0;}
.timeline .m{font-size:.78rem;color:var(--faint);margin:2px 0 0;font-family:var(--mono);}

/* ── forms ──────────────────────────────────────────── */
.field{margin-bottom:15px;}
.field label{display:block;font-size:.82rem;font-weight:600;color:var(--steel);margin-bottom:5px;}
.field .hint{font-size:.76rem;color:var(--faint);margin:0 0 6px;}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],select,textarea{
  width:100%;background:var(--graphite);border:1px solid var(--rule);border-radius:4px;
  color:var(--paper);font:inherit;font-size:.9rem;padding:9px 11px;}
input:focus,select:focus,textarea:focus{outline:2px solid var(--cool);outline-offset:0;border-color:transparent;}
textarea{min-height:88px;resize:vertical;}
.btn{display:inline-block;background:var(--copper);color:#0D0B14;border:0;border-radius:4px;
  padding:9px 18px;font:inherit;font-size:.88rem;font-weight:600;cursor:pointer;text-decoration:none;}
.btn:hover{background:var(--copper-lt);}
.btn.ghost{background:transparent;border:1px solid var(--rule);color:var(--steel);}
.btn.ghost:hover{border-color:var(--steel);color:var(--paper);}
.btn.sm{padding:6px 12px;font-size:.8rem;}
.btn[disabled]{opacity:.45;cursor:not-allowed;}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
a:focus-visible,button:focus-visible{outline:2px solid var(--cool);outline-offset:2px;}

/* ── sign in ────────────────────────────────────────── */
.signin{min-height:100vh;display:grid;place-items:center;padding:24px;}
.signin .card{width:100%;max-width:394px;background:var(--panel);border:1px solid var(--rule);
  border-radius:6px;padding:30px;}
.signin h1{font-size:1.35rem;color:var(--paper);margin:0 0 6px;}
.signin p.sub{color:var(--dim);font-size:.88rem;margin:0 0 22px;}
.signin .brand{margin-bottom:20px;}
.demo{margin-top:20px;padding-top:16px;border-top:1px solid var(--rule);font-size:.79rem;color:var(--faint);}
.demo b{color:var(--dim);font-weight:600;display:block;margin-bottom:5px;}
.demo code{font-family:var(--mono);color:var(--cool-lt);font-size:.76rem;}

/* ── misc ───────────────────────────────────────────── */
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:.88rem;margin:0;}
.kv dt{color:var(--faint);}
.kv dd{margin:0;color:var(--steel);font-family:var(--mono);font-size:.84rem;}
.bar{height:6px;background:var(--panel3);border-radius:3px;overflow:hidden;margin-top:6px;}
.bar i{display:block;height:100%;border-radius:3px;background:var(--cool);}
.bar i.over{background:var(--bad);}
.bar i.warn{background:var(--warn);}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}}