/* ============================================================
   EVERBORN SYSTEMS — Client Account Hub
   Design language: "The Ledger" — a formal infrastructure
   register. Twin-metric bars (echoing the wordmark's twin
   underline strokes) are the signature device used everywhere
   requests and CPU-time need to be read side by side.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --ink:#0b0b14;
  --paper:#fdfdff;
  --paper-dim:#f3f3f7;
  --panel:#ffffff;
  --line:rgba(11,11,20,.13);
  --line-strong:rgba(11,11,20,.24);
  --blue:#1452db;
  --blue-ink:#0e3ea3;
  --blue-dim:#e9eefb;
  --slate:#43434f;
  --slate-2:#75758a;
  --slate-3:#9c9cae;
  --amber:#8a5406;
  --amber-bg:#fbf0da;
  --amber-line:#e3b866;
  --green:#0f6b46;
  --green-bg:#e2f3ea;
  --red:#a3241b;
  --red-bg:#fbe7e4;
  --violet:#5b3fae;
  --violet-bg:#efebfa;
  --teal:#0f7a6c;
  --teal-bg:#e2f4f1;
  --rose:#a83a6b;
  --rose-bg:#f9e9f0;
  --shadow:0 1px 2px rgba(11,11,20,.04);
  --radius-s:3px;
  --radius-m:6px;
  --font-display:'Space Grotesk',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
}

html[data-theme="dark"]{
  --ink:#f6f6fb;
  --paper:#08080f;
  --paper-dim:#101018;
  --panel:#0e0e17;
  --line:rgba(246,246,251,.12);
  --line-strong:rgba(246,246,251,.22);
  --blue:#5c85f2;
  --blue-ink:#8fb0f7;
  --blue-dim:rgba(92,133,242,.15);
  --slate:#c6c6d6;
  --slate-2:#9898aa;
  --slate-3:#6f6f82;
  --amber:#eebd63;
  --amber-bg:rgba(238,189,99,.12);
  --amber-line:rgba(238,189,99,.4);
  --green:#4fd8a0;
  --green-bg:rgba(79,216,160,.12);
  --red:#f4897c;
  --red-bg:rgba(244,137,124,.12);
  --violet:#a996e8;
  --violet-bg:rgba(169,150,232,.14);
  --teal:#5ed9c7;
  --teal-bg:rgba(94,217,199,.13);
  --rose:#e896bd;
  --rose-bg:rgba(232,150,189,.13);
  --shadow:0 1px 2px rgba(0,0,0,.3);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  transition:background .2s ease,color .2s ease;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;}
button{font-family:inherit;}
::selection{background:var(--blue);color:#fff;}

.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-0.01em;}
.eyebrow{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--slate-2);
}
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:2px;}
.skip-link{
  position:absolute;left:8px;top:-48px;background:var(--blue);color:#fff;
  padding:10px 16px;border-radius:var(--radius-s);z-index:1000;font-weight:600;
  transition:top .15s ease;
}
.skip-link:focus{top:8px;}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
}

/* ---------- Masthead ---------- */
.masthead{
  position:sticky;top:0;z-index:60;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.masthead-top{
  display:flex;align-items:center;gap:20px;
  max-width:1360px;margin:0 auto;
  padding:14px 28px;
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;}
.brand-mark{width:26px;height:26px;}
.brand-word{width:auto;height:16px;display:block;}
.masthead-divider{width:1px;height:22px;background:var(--line-strong);margin:0 2px;flex-shrink:0;}

.account-switch{
  display:flex;align-items:center;gap:9px;
  background:transparent;border:1px solid transparent;
  border-radius:var(--radius-s);
  padding:5px 8px 5px 2px;cursor:pointer;
  color:var(--ink);
  min-width:0;
}
.account-switch:hover{border-color:var(--line);}
.account-badge{
  width:28px;height:28px;border-radius:5px;
  background:var(--ink);color:var(--paper);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:12px;flex-shrink:0;
}
html[data-theme="dark"] .account-badge{background:var(--blue);color:#04060f;}
.account-switch-text{text-align:left;min-width:0;}
.account-switch-name{font-family:var(--font-display);font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}
.account-switch-sub{font-size:11px;color:var(--slate-2);white-space:nowrap;}
.account-switch svg{flex-shrink:0;color:var(--slate-3);}

.masthead-spacer{flex:1;}

.masthead-actions{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.icon-btn{
  width:34px;height:34px;border-radius:var(--radius-s);
  border:1px solid transparent;background:transparent;
  display:flex;align-items:center;justify-content:center;
  color:var(--slate);cursor:pointer;position:relative;
}
.icon-btn:hover{border-color:var(--line);background:var(--paper-dim);}
.icon-btn .dot{
  position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;
  background:var(--amber);border:1.5px solid var(--paper);
}
.user-chip{
  display:flex;align-items:center;gap:8px;
  padding:4px 10px 4px 4px;border-radius:20px;
  border:1px solid var(--line);cursor:pointer;background:transparent;color:var(--ink);
}
.user-chip:hover{background:var(--paper-dim);}
.user-avatar{
  width:26px;height:26px;border-radius:50%;
  background:var(--blue-dim);color:var(--blue-ink);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:11px;
}
.user-chip-name{font-size:12.5px;font-weight:600;}

/* Nav */
.masthead-nav{border-top:1px solid var(--line);}
.nav-scroll{
  max-width:1360px;margin:0 auto;padding:0 28px;
  display:flex;gap:2px;overflow-x:auto;
  scrollbar-width:none;
}
.nav-scroll::-webkit-scrollbar{display:none;}
.nav-item{
  font-family:var(--font-display);font-weight:600;font-size:13px;
  color:var(--slate-2);background:none;border:none;cursor:pointer;
  padding:12px 14px 11px;white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px;
  display:flex;align-items:center;gap:7px;
}
.nav-item:hover{color:var(--ink);}
.nav-item[aria-current="page"]{color:var(--ink);border-bottom-color:var(--blue);}
.nav-item .badge-count{
  font-family:var(--font-mono);font-size:10px;font-weight:500;
  background:var(--amber-bg);color:var(--amber);
  border:1px solid var(--amber-line);
  padding:1px 5px;border-radius:8px;line-height:1.4;
}

/* ---------- Shell ---------- */
.shell{max-width:1360px;margin:0 auto;padding:32px 28px 96px;}
.view{display:none;}
.view.active{display:block;animation:fadein .25s ease;}
@keyframes fadein{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}

.view-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:24px;margin-bottom:28px;flex-wrap:wrap;
}
.view-title{
  font-family:var(--font-display);font-weight:700;
  font-size:26px;letter-spacing:-.01em;margin:6px 0 6px;
}
.view-desc{color:var(--slate-2);font-size:13.5px;max-width:56ch;}

.btn{
  font-family:var(--font-display);font-weight:600;font-size:12.5px;
  border-radius:var(--radius-s);padding:9px 16px;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;border:1px solid transparent;
  white-space:nowrap;
}
.btn-primary{background:var(--ink);color:var(--paper);}
.btn-primary:hover{background:var(--blue);}
html[data-theme="dark"] .btn-primary{background:var(--blue);color:#04060f;}
html[data-theme="dark"] .btn-primary:hover{background:var(--blue-ink);}
.btn-line{background:transparent;border-color:var(--line-strong);color:var(--ink);}
.btn-line:hover{background:var(--paper-dim);}
.btn-ghost{background:transparent;color:var(--slate);border-color:transparent;padding:9px 10px;}
.btn-ghost:hover{color:var(--ink);}
.btn[disabled]{opacity:.45;cursor:not-allowed;}
.btn svg{flex-shrink:0;}

/* ---------- Ledger-line section header ---------- */
.section-rule{
  display:flex;align-items:baseline;justify-content:space-between;
  border-bottom:1px solid var(--line-strong);
  padding-bottom:9px;margin:44px 0 2px;gap:16px;flex-wrap:wrap;
}
.section-rule:first-child{margin-top:0;}
.section-rule h2{
  font-family:var(--font-display);font-size:15px;font-weight:600;margin:0;
  display:flex;align-items:center;gap:9px;
}
.section-rule .rule-meta{font-family:var(--font-mono);font-size:11.5px;color:var(--slate-2);}

/* ---------- Cycle strip (signature ledger progress bar) ---------- */
.cycle-strip{
  border:1px solid var(--line);border-radius:var(--radius-m);
  background:var(--panel);padding:18px 22px;margin-bottom:32px;
  display:grid;grid-template-columns:1fr auto;gap:16px 32px;align-items:center;
}
.cycle-strip-info{grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px;}
.cycle-strip-label{font-family:var(--font-display);font-weight:600;font-size:14px;}
.cycle-strip-dates{font-family:var(--font-mono);font-size:11.5px;color:var(--slate-2);}
.cycle-track{
  grid-column:1/-1;height:6px;border-radius:4px;background:var(--paper-dim);
  overflow:hidden;position:relative;border:1px solid var(--line);
}
.cycle-fill{height:100%;background:var(--blue);border-radius:4px 0 0 4px;}
.cycle-strip-figs{grid-column:1/-1;display:flex;gap:32px;flex-wrap:wrap;}
.cycle-fig .eyebrow{margin-bottom:3px;}
.cycle-fig-val{font-family:var(--font-mono);font-size:19px;font-weight:600;}
.cycle-fig-val.muted{color:var(--slate-2);font-weight:500;font-size:15px;}

/* ---------- KPI tiles ---------- */
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-m);overflow:hidden;margin-bottom:8px;}
.kpi{background:var(--panel);padding:16px 18px;}
.kpi-label{font-size:11.5px;color:var(--slate-2);margin-bottom:8px;display:flex;align-items:center;gap:6px;}
.kpi-val{font-family:var(--font-mono);font-size:22px;font-weight:600;letter-spacing:-.01em;}
.kpi-sub{font-size:11.5px;color:var(--slate-2);margin-top:5px;}
.kpi-val.status-green{color:var(--green);}
.kpi-val.status-amber{color:var(--amber);}

@media(max-width:860px){.kpi-row{grid-template-columns:repeat(2,1fr);}}

/* ---------- Twin meter — the signature element ---------- */
.meter{display:flex;flex-direction:column;gap:3px;min-width:120px;}
.meter-row{display:flex;align-items:center;gap:7px;}
.meter-tag{font-family:var(--font-mono);font-size:9.5px;color:var(--slate-3);width:26px;flex-shrink:0;letter-spacing:.03em;}
.meter-track{flex:1;height:5px;border-radius:3px;background:var(--paper-dim);overflow:hidden;border:1px solid var(--line);}
.meter-fill{height:100%;border-radius:3px 0 0 0;}
.meter-fill.blue{background:var(--blue);}
.meter-fill.slate{background:var(--slate-3);}
.meter-fill.violet{background:var(--violet);}
.meter-fill.teal{background:var(--teal);}
.meter-fill.rose{background:var(--rose);}
html[data-theme="dark"] .meter-fill.slate{background:var(--slate-2);}

/* ---------- Metric registry chips (billing-scope legend) ---------- */
.metric-chip{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:10.5px;color:var(--slate);
  padding:4px 10px;border-radius:20px;border:1px solid var(--line);background:var(--panel);
}
.metric-chip .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.metric-chip.sm{padding:2px 8px;font-size:9.5px;}
.scopes-legend{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px;}
.scopes-legend-label{width:100%;margin-bottom:2px;}

/* ---------- Per-product billing breakdown block ---------- */
.billing-product-block{border:1px solid var(--line);border-radius:var(--radius-m);background:var(--panel);margin-bottom:14px;overflow:hidden;}
.billing-product-block:last-child{margin-bottom:0;}
.billing-product-head{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;background:var(--paper-dim);border-bottom:1px solid var(--line);gap:14px;flex-wrap:wrap;}
.billing-product-block .lit{padding:0;}
.billing-product-block .lit th,.billing-product-block .lit td{padding:11px 20px;}

/* ---------- Dynamic grouped usage bars ---------- */
.bar-group{display:flex;gap:3px;align-items:flex-end;height:100%;width:100%;justify-content:center;}
.bar-seg-dyn{width:7px;border-radius:2px 2px 0 0;min-height:2px;}

/* ---------- Ledger rows (product / invoice / domain lists) ---------- */
.ledger{border:1px solid var(--line);border-radius:var(--radius-m);overflow:hidden;background:var(--panel);}
.ledger-row{
  display:grid;grid-template-columns:2.1fr 1fr 1.3fr 1fr auto;
  gap:18px;align-items:center;padding:16px 20px;
  border-bottom:1px solid var(--line);text-decoration:none;color:inherit;
  background:var(--panel);
}
.ledger-row:last-child{border-bottom:none;}
a.ledger-row{cursor:pointer;}
a.ledger-row:hover{background:var(--paper-dim);}
.ledger-row.head{
  padding:11px 20px;background:var(--paper-dim);
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate-2);
}
.ledger-row.head:hover{background:var(--paper-dim);}

.prod-id{display:flex;align-items:center;gap:12px;min-width:0;}
.prod-icon{
  width:36px;height:36px;border-radius:7px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--paper-dim);border:1px solid var(--line);
  font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--slate);
}
.prod-icon.licensed{background:var(--blue-dim);color:var(--blue-ink);border-color:transparent;}
.prod-icon.custom{background:var(--ink);color:var(--paper);border-color:transparent;}
html[data-theme="dark"] .prod-icon.custom{background:var(--slate-2);color:var(--paper);}
.prod-name-wrap{min-width:0;}
.prod-name{font-family:var(--font-display);font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.prod-meta{font-size:11.5px;color:var(--slate-2);margin-top:2px;display:flex;align-items:center;gap:6px;}

.type-pill{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;
  padding:2px 6px;border-radius:3px;border:1px solid var(--line-strong);color:var(--slate-2);
}
.type-pill.licensed{border-color:transparent;background:var(--blue-dim);color:var(--blue-ink);}
.type-pill.custom{border-color:transparent;background:var(--paper-dim);color:var(--ink);border:1px solid var(--line-strong);}

.status-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;}
.status-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.status-dot.ok{background:var(--green);}
.status-dot.attn{background:var(--amber);}
.status-dot.fail{background:var(--red);}
.status-chip.ok{color:var(--green);}
.status-chip.attn{color:var(--amber);}
.status-chip.fail{color:var(--red);}

.ledger-fee{text-align:right;}
.ledger-fee-val{font-family:var(--font-mono);font-size:14px;font-weight:600;}
.ledger-fee-label{font-size:10.5px;color:var(--slate-2);}
.chev{color:var(--slate-3);flex-shrink:0;}

@media(max-width:920px){
  .ledger-row{grid-template-columns:1fr auto;grid-template-areas:"id status" "meter meter" "fee chev";row-gap:10px;}
  .ledger-row.head{display:none;}
  .prod-id{grid-area:id;}
  .status-col{grid-area:status;justify-self:end;}
  .meter-col{grid-area:meter;}
  .ledger-fee{grid-area:fee;text-align:left;}
  .chev{grid-area:chev;justify-self:end;align-self:center;}
}

/* ---------- Two column layout ---------- */
.split{display:grid;grid-template-columns:1.7fr 1fr;gap:24px;align-items:start;}
@media(max-width:980px){.split{grid-template-columns:1fr;}}

.panel{border:1px solid var(--line);border-radius:var(--radius-m);background:var(--panel);padding:22px 24px;}
.panel-title{font-family:var(--font-display);font-weight:600;font-size:14px;margin:0 0 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.panel + .panel{margin-top:16px;}

/* ---------- Attention list ---------- */
.attn-item{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line);}
.attn-item:last-child{border-bottom:none;padding-bottom:0;}
.attn-item:first-child{padding-top:0;}
.attn-icon{width:30px;height:30px;border-radius:6px;background:var(--red-bg);color:var(--red);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.attn-body{flex:1;min-width:0;}
.attn-title{font-weight:600;font-size:13px;}
.attn-desc{font-size:12px;color:var(--slate-2);margin-top:2px;}
.attn-action{font-size:12px;font-weight:600;color:var(--blue);white-space:nowrap;background:none;border:none;cursor:pointer;padding:0;}
.empty-check{display:flex;align-items:center;gap:10px;color:var(--slate-2);font-size:13px;padding:4px 0;}
.empty-check svg{color:var(--green);flex-shrink:0;}

/* ---------- Line item table (billing breakdown) ---------- */
.lit{width:100%;border-collapse:collapse;}
.lit th{
  text-align:left;font-family:var(--font-mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--slate-2);font-weight:500;padding:0 10px 8px;border-bottom:1px solid var(--line-strong);
}
.lit th.num-col,.lit td.num-col{text-align:right;}
.lit td{padding:12px 10px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:top;}
.lit tr:last-child td{border-bottom:none;}
.lit td.num-col{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
.lit tr.total-row td{border-top:1px solid var(--line-strong);border-bottom:none;padding-top:14px;font-weight:700;font-family:var(--font-display);}
.lit tr.total-row td.num-col{font-family:var(--font-mono);}
.lit .lit-name{font-weight:600;}
.lit .lit-sub{color:var(--slate-2);font-size:11.5px;font-weight:400;font-family:var(--font-body);}

/* ---------- Invoice history rows ---------- */
.invoice-row{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr auto;
  gap:14px;align-items:center;padding:14px 20px;border-bottom:1px solid var(--line);
}
.invoice-row:last-child{border-bottom:none;}
.invoice-row.head{
  padding:10px 20px;background:var(--paper-dim);
  font-family:var(--font-mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--slate-2);
}
.inv-period{font-family:var(--font-display);font-weight:600;font-size:13px;}
.inv-period-sub{font-size:11px;color:var(--slate-2);}
.invoice-row .num{font-size:13px;}
@media(max-width:900px){
  .invoice-row{grid-template-columns:1fr 1fr;grid-template-areas:"period dl" "fixed usage" "total total";row-gap:6px;}
  .invoice-row.head{display:none;}
}

/* ---------- Chart bars (usage view) ---------- */
.bar-chart{display:flex;align-items:flex-end;gap:6px;height:150px;padding:8px 4px 0;}
.bar-chart-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:2px;position:relative;}
.bar-chart-col .stack{width:100%;display:flex;flex-direction:column-reverse;justify-content:flex-start;align-items:center;height:100%;}
.bar-seg{width:62%;border-radius:2px 2px 0 0;}
.bar-seg.req{background:var(--blue);}
.bar-seg.cpu{background:var(--slate-3);margin-bottom:2px;border-radius:2px;}
.bar-chart-label{font-family:var(--font-mono);font-size:10px;color:var(--slate-2);margin-top:8px;}
.chart-legend{display:flex;gap:18px;margin-top:4px;}
.legend-item{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--slate-2);}
.legend-swatch{width:9px;height:9px;border-radius:2px;}

/* ---------- Catalog grid ---------- */
.catalog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;}
.catalog-card{border:1px solid var(--line);border-radius:var(--radius-m);background:var(--panel);padding:20px;display:flex;flex-direction:column;gap:12px;}
.catalog-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
.catalog-card-title{font-family:var(--font-display);font-weight:600;font-size:15px;}
.catalog-card-desc{font-size:12.5px;color:var(--slate-2);flex:1;}
.catalog-rates{display:flex;flex-direction:column;gap:4px;padding-top:10px;border-top:1px solid var(--line);font-size:12px;}
.catalog-rate-row{display:flex;justify-content:space-between;color:var(--slate);}
.catalog-rate-row .num{color:var(--ink);}
.subscribed-pill{
  display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--green);
  background:var(--green-bg);padding:3px 8px;border-radius:20px;
}

/* ---------- Domains ---------- */
.domain-group{margin-bottom:4px;}
.domain-group-head{display:flex;align-items:center;gap:10px;padding:14px 20px;background:var(--paper-dim);border-bottom:1px solid var(--line);}
.host-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:14px;align-items:center;padding:13px 20px 13px 48px;border-bottom:1px solid var(--line);}
.host-row:last-child{border-bottom:none;}
.host-name{font-family:var(--font-mono);font-size:12.5px;}
@media(max-width:760px){.host-row{grid-template-columns:1fr;gap:6px;padding-left:20px;}}

/* ---------- Team ---------- */
.team-row{display:grid;grid-template-columns:2fr 1fr 2fr auto;gap:16px;align-items:center;padding:14px 20px;border-bottom:1px solid var(--line);}
.team-row:last-child{border-bottom:none;}
.person{display:flex;align-items:center;gap:11px;}
.person-avatar{width:32px;height:32px;border-radius:50%;background:var(--blue-dim);color:var(--blue-ink);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:12px;flex-shrink:0;}
.person-name{font-weight:600;font-size:13px;}
.person-email{font-size:11.5px;color:var(--slate-2);}
.role-pill{font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:20px;background:var(--paper-dim);border:1px solid var(--line-strong);display:inline-block;}
.scope-list{display:flex;flex-wrap:wrap;gap:5px;}
.scope-tag{font-size:10.5px;font-family:var(--font-mono);color:var(--slate-2);background:var(--paper-dim);padding:2px 7px;border-radius:3px;border:1px solid var(--line);}
.scope-tag.all{color:var(--blue-ink);background:var(--blue-dim);border-color:transparent;}
@media(max-width:820px){.team-row{grid-template-columns:1fr;row-gap:8px;}}

/* ---------- Custom request form ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.form-grid.full{grid-template-columns:1fr;}
@media(max-width:760px){.form-grid{grid-template-columns:1fr;}}
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-size:12.5px;font-weight:600;}
.field .hint{font-size:11.5px;color:var(--slate-2);font-weight:400;}
.field input,.field select,.field textarea{
  font-family:var(--font-body);font-size:13.5px;padding:10px 12px;
  border:1px solid var(--line-strong);border-radius:var(--radius-s);
  background:var(--paper);color:var(--ink);width:100%;
}
.field textarea{resize:vertical;min-height:96px;}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--blue);outline-offset:0;border-color:var(--blue);}
.checkline{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;color:var(--slate);}
.process-steps{display:flex;flex-direction:column;gap:0;}
.process-step{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);}
.process-step:last-child{border-bottom:none;padding-bottom:0;}
.process-step:first-child{padding-top:0;}
.process-num{
  font-family:var(--font-mono);font-size:11px;color:var(--slate-2);
  width:22px;height:22px;border-radius:50%;border:1px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;
}
.process-step-title{font-weight:600;font-size:12.5px;}
.process-step-desc{font-size:12px;color:var(--slate-2);margin-top:2px;}

/* ---------- Empty / boundary notices ---------- */
.boundary-note{
  display:flex;gap:12px;align-items:flex-start;
  border:1px solid var(--line);border-left:3px solid var(--blue);
  border-radius:var(--radius-s);padding:14px 16px;background:var(--blue-dim);
}
.boundary-note svg{flex-shrink:0;color:var(--blue-ink);margin-top:1px;}
.boundary-note-title{font-weight:600;font-size:13px;color:var(--blue-ink);}
.boundary-note-desc{font-size:12.5px;color:var(--slate);margin-top:3px;}

/* ---------- Product detail ---------- */
.detail-back{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--slate-2);background:none;border:none;cursor:pointer;margin-bottom:14px;padding:0;}
.detail-back:hover{color:var(--ink);}
.detail-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:8px;}
.detail-title-row{display:flex;align-items:center;gap:14px;}
.detail-title{font-family:var(--font-display);font-weight:700;font-size:23px;}
.detail-sub{color:var(--slate-2);font-size:13px;margin-top:5px;}
.tag-row{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
.hostname-chip{font-family:var(--font-mono);font-size:11px;background:var(--paper-dim);border:1px solid var(--line);padding:3px 8px;border-radius:3px;}

/* ---------- Toast ---------- */
.toast{
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:var(--paper);font-size:13px;font-weight:500;
  padding:12px 18px;border-radius:var(--radius-m);box-shadow:0 8px 24px rgba(0,0,0,.25);
  opacity:0;pointer-events:none;transition:all .25s ease;z-index:200;display:flex;align-items:center;gap:10px;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast svg{color:var(--green);flex-shrink:0;}

/* ---------- Footer ---------- */
.app-footer{
  border-top:1px solid var(--line);margin-top:64px;padding:22px 28px;
  max-width:1360px;margin-left:auto;margin-right:auto;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  color:var(--slate-3);font-size:11.5px;
}
.app-footer .brand-mark-sm{width:16px;height:16px;opacity:.55;}
.footer-left{display:flex;align-items:center;gap:9px;}

/* ---------- Misc utility ---------- */
.mt-0{margin-top:0;}
.text-slate{color:var(--slate-2);}
.flex-between{display:flex;justify-content:space-between;align-items:center;}
.stack-gap{display:flex;flex-direction:column;gap:14px;}
hr.hair{border:none;border-top:1px solid var(--line);margin:16px 0;}

/* ========== Auth gate (Account Hub) ========== */
.auth-loading{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  color:var(--slate-2);font-size:14px;
}
.auth-gate{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:32px 16px;background:var(--paper-dim);
}
.auth-gate[hidden],.auth-loading[hidden]{display:none !important;}
.auth-card{
  width:100%;max-width:400px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-m);padding:28px 28px 24px;box-shadow:var(--shadow);
}
.auth-brand{display:flex;align-items:center;gap:10px;margin-bottom:20px;}
.auth-brand .brand-mark{width:28px;height:28px;}
.auth-brand .brand-word{height:18px;width:auto;}
.auth-title{font-family:var(--font-display);font-size:22px;font-weight:600;margin:0 0 8px;letter-spacing:-.02em;}
.auth-sub{margin:0 0 20px;color:var(--slate-2);font-size:13px;line-height:1.45;}
.auth-form{display:flex;flex-direction:column;gap:12px;}
.auth-label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;color:var(--slate);}
.auth-label input{
  font:inherit;font-weight:400;padding:10px 12px;border:1px solid var(--line-strong);
  border-radius:var(--radius-s);background:var(--paper);color:var(--ink);
}
.auth-label input:focus{outline:2px solid var(--blue);outline-offset:1px;}
.auth-submit{width:100%;margin-top:4px;}
.auth-divider{display:flex;align-items:center;gap:12px;margin:18px 0 14px;color:var(--slate-3);font-size:12px;}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--line);}
.auth-error{
  background:var(--red-bg);color:var(--red);border:1px solid color-mix(in srgb,var(--red) 35%,transparent);
  padding:10px 12px;border-radius:var(--radius-s);font-size:13px;margin-bottom:14px;
}
.auth-error[hidden]{display:none !important;}
.btn{font:inherit;cursor:pointer;border-radius:var(--radius-s);padding:10px 14px;border:1px solid transparent;}
.btn-primary{background:var(--blue);color:#fff;font-weight:600;}
.btn-primary:hover{background:var(--blue-ink);}
.btn-primary:disabled{opacity:.55;cursor:not-allowed;}
.btn-line{background:transparent;border-color:var(--line-strong);color:var(--ink);font-weight:500;}
.btn-line:hover{border-color:var(--ink);}