/* =====================================================================
   DC4AI Console — styles
   Shares the marketing site's palette and type scale.
   ===================================================================== */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:680;letter-spacing:-.015em;line-height:1.2}
h1{font-size:26px}
h2{font-size:19px}
h3{font-size:16px}
ul{list-style:none}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
::selection{background:var(--brand-soft-2)}

.mono{font-family:var(--font-mono)}
.hidden{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------- Logo ---------------- */
.logo{height:26px;width:auto;display:block}
.logo .lg-ink{fill:var(--text)}
.auth-aside .logo .lg-ink{fill:var(--aside-text)}

/* ---------------- Auth screens ---------------- */
.auth-wrap{
  min-height:100vh;display:grid;grid-template-columns:1fr 1fr;
  background:var(--bg);position:relative;overflow:hidden;
}
.auth-aside{
  position:relative;padding:44px 48px;display:flex;flex-direction:column;
  justify-content:space-between;border-right:1px solid var(--line);
  background:linear-gradient(160deg,var(--aside-1) 0%,var(--aside-2) 45%,var(--aside-3) 100%);
  color:var(--aside-text);overflow:hidden;
}
.auth-aside::after{
  content:"";position:absolute;width:620px;height:620px;right:-220px;top:-160px;
  background:radial-gradient(circle,rgba(24,205,142,.16),transparent 62%);
  filter:blur(28px);pointer-events:none;
}
.auth-aside-grid{
  position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(700px 520px at 40% 35%,#000 20%,transparent 76%);
  mask-image:radial-gradient(700px 520px at 40% 35%,#000 20%,transparent 76%);
}
.auth-aside > *{position:relative;z-index:1}
.auth-claim{font-family:var(--font-display);font-size:clamp(28px,3.1vw,40px);font-weight:700;letter-spacing:-.02em;line-height:1.14;max-width:16ch}
.auth-claim em{font-style:normal;color:var(--aside-accent)}
.auth-points{display:flex;flex-direction:column;gap:14px;margin-top:26px;max-width:44ch}
.auth-point{display:flex;gap:11px;align-items:flex-start;color:var(--aside-text-2);font-size:14.5px}
.auth-point svg{flex:none;margin-top:3px}
.auth-foot{font-family:var(--font-mono);font-size:11px;letter-spacing:.09em;color:var(--aside-muted);text-transform:uppercase}

.auth-main{display:flex;flex-direction:column;padding:28px 40px 40px}
.auth-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px}
.auth-card{margin:auto;width:100%;max-width:404px;padding:26px 0}
.auth-card h1{font-size:25px;margin-bottom:7px}
.auth-card .sub{color:var(--muted);font-size:14.5px;margin-bottom:26px}

.field{margin-bottom:15px}
.field > label,.lbl{
  display:block;font-size:12.5px;font-weight:600;color:var(--text-2);
  margin-bottom:7px;letter-spacing:.01em;
}
.lbl .opt{color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0}
.inp,.sel,.txa{
  width:100%;background:var(--field);border:1px solid var(--line-2);
  border-radius:var(--radius-sm);padding:11px 13px;font-size:14.5px;color:var(--text);
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.txa{min-height:84px;resize:vertical;line-height:1.5}
.inp::placeholder,.txa::placeholder{color:var(--placeholder)}
.inp:focus,.sel:focus,.txa:focus{
  outline:none;border-color:var(--brand-fill);
  box-shadow:0 0 0 3px var(--ring);background:var(--field-focus);
}
.inp:disabled,.sel:disabled{opacity:.62;cursor:not-allowed}
.inp.invalid,.sel.invalid{border-color:var(--danger);box-shadow:0 0 0 3px var(--ring-danger)}
.sel{
  appearance:none;cursor:pointer;padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%237A83A0' stroke-width='1.7' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
  text-overflow:ellipsis;
}
.sel option{background:var(--surface);color:var(--text)}
.pw-wrap{position:relative}
.pw-wrap .inp{padding-right:44px}
.pw-toggle{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;display:grid;place-items:center;color:var(--muted);
  border-radius:8px;
}
.pw-toggle:hover{color:var(--text-2);background:var(--hover)}
.err{display:none;color:var(--danger);font-size:12.5px;margin-top:6px}
.err.show{display:block}
.hint{color:var(--muted);font-size:12.5px;margin-top:6px}
.hint.warn{color:var(--warn)}

.form-row{display:grid;grid-template-columns:repeat(2,1fr);gap:0 16px}
.field-flush{margin-bottom:0}

.check{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--text-2);cursor:pointer;line-height:1.5}
.check input{
  appearance:none;flex:none;width:16px;height:16px;margin-top:2px;border-radius:5px;
  border:1px solid var(--line-2);background:var(--field);cursor:pointer;
  transition:background .15s ease,border-color .15s ease;
}
.check input:checked{
  background:var(--brand-fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' viewBox='0 0 11 9'%3E%3Cpath d='M1 4.6L4 7.6L10 1.4' stroke='%23080820' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat;
  border-color:var(--brand-fill);
}
.legal{font-size:12.5px;color:var(--muted);line-height:1.6;margin:16px 0 18px}
.legal a{color:var(--text-2);text-decoration:underline;text-underline-offset:2px}
.legal a:hover{color:var(--brand)}

.divider{display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--muted);font-size:12px}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}

.oauth{display:flex;flex-direction:column;gap:9px}
.swap{text-align:center;font-size:13.5px;color:var(--muted);margin-top:20px}
.swap a{color:var(--brand);font-weight:600}
.swap a:hover{text-decoration:underline}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 17px;border-radius:999px;font-size:14px;font-weight:600;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .12s ease,opacity .16s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--brand-fill);color:var(--brand-on)}
.btn-primary:hover{background:var(--brand-fill-hover)}
.btn-ghost{border-color:var(--line-2);color:var(--text)}
.btn-ghost:hover{border-color:var(--line-strong);background:var(--hover)}
.btn-quiet{color:var(--text-2)}
.btn-quiet:hover{background:var(--hover);color:var(--text)}
.btn-danger{border-color:var(--danger-line);color:var(--danger)}
.btn-danger:hover{background:var(--danger-soft)}
.btn-block{width:100%}
.btn-lg{padding:12px 20px;font-size:15px}
.btn-sm{padding:7px 13px;font-size:13px}
.btn[disabled],.btn.is-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}
.btn .spin{
  width:14px;height:14px;border-radius:50%;flex:none;
  border:2px solid rgba(6,18,26,.28);border-top-color:var(--brand-on);
  animation:spin .6s linear infinite;
}
.btn-ghost .spin,.btn-quiet .spin{border-color:var(--line-2);border-top-color:var(--text)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------------- App shell ---------------- */
.app{display:grid;grid-template-columns:var(--sidebar) 1fr;min-height:100vh}

.side{
  position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
  background:var(--bg-nav);border-right:1px solid var(--line);z-index:40;
}
.side-head{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line);min-height:var(--topbar)}
.side-head .badge{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brand);border:1px solid var(--brand-line);border-radius:5px;padding:2px 6px;
}
.side-nav{flex:1;overflow-y:auto;padding:14px 12px 18px}
.side-group{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-2);padding:14px 10px 7px;
}
.side-nav a{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;
  font-size:14px;color:var(--text-2);transition:background .14s ease,color .14s ease;
}
.side-nav a svg{flex:none;opacity:.72}
.side-nav a:hover{background:var(--hover);color:var(--text)}
.side-nav a.on{background:var(--brand-soft);color:var(--brand)}
.side-nav a.on svg{opacity:1}
.side-foot{border-top:1px solid var(--line);padding:12px}
.side-user{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;width:100%;text-align:left}
.side-user:hover{background:var(--hover)}
.avatar{
  width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,#18CD8E,#12A873);color:var(--brand-on);
  font-weight:700;font-size:12.5px;font-family:var(--font-display);
}
.side-user .who{min-width:0;flex:1}
.side-user .who b{display:block;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-user .who span{display:block;font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------------- Top bar ---------------- */
.main{min-width:0;display:flex;flex-direction:column}
.top{
  position:sticky;top:0;z-index:30;min-height:var(--topbar);
  display:flex;padding:10px 26px;
  background:var(--nav-bg);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
/* Chrome runs edge to edge, but its contents line up with the page below
   it — otherwise the title and the toggles drift away from the content on
   a wide monitor. */
.top-in{
  display:flex;align-items:center;gap:14px;
  width:100%;max-width:var(--measure);margin:0 auto;
}
.top .burger{display:none;width:34px;height:34px;place-items:center;border-radius:8px}
.top .burger:hover{background:var(--hover-2)}
.top-title{font-family:var(--font-display);font-weight:660;font-size:15.5px;letter-spacing:-.01em}
.top-spacer{flex:1}
.pill{
  display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;
  border:1px solid var(--line-2);font-size:12.5px;color:var(--text-2);
}
.pill b{color:var(--text);font-weight:600}
.dot{width:6px;height:6px;border-radius:50%;background:var(--brand-fill);flex:none;box-shadow:0 0 0 3px var(--ring)}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;overflow:hidden}
.seg button{padding:5px 11px;font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.03em}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--brand-fill);color:var(--brand-on)}

/* ---------------- Page ---------------- */
.page{padding:24px 26px 64px;max-width:var(--measure);width:100%;margin:0 auto}
.page-head{margin-bottom:22px}
.page-head h1{margin-bottom:6px}
.page-head .sub{color:var(--muted);font-size:14.5px;max-width:74ch}

/* alert banner */
.alerts{display:flex;flex-direction:column;gap:9px;margin-bottom:20px}
.alert{
  display:flex;align-items:flex-start;gap:10px;padding:11px 14px;border-radius:var(--radius-sm);
  font-size:13.5px;line-height:1.5;
}
.alert svg{flex:none;margin-top:2px}
.alert-warn{background:var(--warn-soft);border:1px solid var(--warn-line);color:var(--warn)}
.alert-warn a{color:var(--warn);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.alert-warn a:hover{color:var(--warn-strong)}
.alert-info{background:var(--brand-soft);border:1px solid var(--brand-line);color:var(--brand)}
.alert-info a{color:var(--brand);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.alert-ok{background:var(--brand-soft);border:1px solid var(--brand-line);color:var(--brand)}

/* cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-card)}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.card-head h2{font-size:15.5px}
.card-head .sub{font-size:13px;color:var(--muted);margin-top:3px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.stack{display:flex;flex-direction:column;gap:16px}
/* Settings: a form column capped at a readable measure, with the
   secondary cards taking the rest of the row. The second column
   flexes rather than the whole grid centring — centred, this was the
   only Administration tab that did not start at the left edge. */
.settings{display:grid;grid-template-columns:minmax(0,760px) minmax(0,1fr);gap:16px;align-items:start}
.dash{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:16px;align-items:start}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.spacer{flex:1}
/* Grid and flex children default to min-width:auto, so one wide descendant
   (a <pre>, a long spec value) grows the track past the viewport instead of
   scrolling inside it. Opt every layout child out of that. */
.grid > *,.dash > *,.stack > *,.detail > *,.row > *,.card,.item,.pcard{min-width:0}
.card *,.pcard *{min-width:0}

/* stat tiles */
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow-card)}
.stat .l{font-size:12.5px;color:var(--muted);margin-bottom:6px}
.stat .v{font-family:var(--font-display);font-size:24px;font-weight:700;letter-spacing:-.02em}
.stat .v small{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:0}
.stat .d{font-size:12px;color:var(--muted-2);margin-top:4px}

/* code block */
.code{
  background:var(--code-bg);border:1px solid var(--line);border-radius:var(--radius-sm);
  overflow:hidden;
}
.code-bar{
  display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--code-line);
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--code-com);
}
.code pre{padding:13px 14px;overflow-x:auto;font-family:var(--font-mono);font-size:12.5px;line-height:1.72;color:var(--code-fg)}
.code .k{color:var(--code-key)}
.code .s{color:var(--code-str)}
.code .c{color:var(--code-com)}
/* Builtins share the keyword colour; numbers stay distinct from strings. */
.code .b{color:var(--code-key)}
.code .n{color:var(--code-num)}

/* key row */
.keyrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.keybox{
  flex:1;min-width:220px;font-family:var(--font-mono);font-size:13px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:10px 12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-2);
}

/* toolbar / filters */
.toolbar{
  display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:16px;
  padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-card);
}
.toolbar .fgroup{display:flex;flex-direction:column;gap:6px;min-width:150px}
.toolbar .fgroup > label{font-size:11.5px;color:var(--muted);font-weight:600}
.toolbar .sel,.toolbar .inp{padding:8px 12px;font-size:13.5px}
.toolbar .sel{padding-right:32px}
.count{font-size:13px;color:var(--muted);margin-bottom:12px}

/* table-ish instance list */
.list{display:flex;flex-direction:column;gap:10px}
.item{
  position:relative;
  /* 232, not 200: the widest GPU label plus the copy control needs the
     extra 32px, and short of it the control wrapped to its own line. */
  display:grid;grid-template-columns:232px 1fr auto;gap:18px;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;cursor:pointer;text-align:left;width:100%;box-shadow:var(--shadow-card);
  transition:border-color .16s ease,background .16s ease,transform .16s ease;
}
.item:hover{border-color:var(--brand-line-strong);background:var(--surface-2);transform:translateY(-1px)}
.item-id{display:flex;align-items:center;gap:11px;min-width:0}
.chip-gpu{
  width:46px;min-height:46px;border-radius:10px;flex:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:4px 2px;
  background:var(--brand-soft);border:1px solid var(--brand-line);
  font-family:var(--font-mono);font-weight:600;color:var(--brand);letter-spacing:.02em;
}
.chip-gpu b{font-size:11px;font-weight:700;line-height:1}
/* The label is what carries the meaning; the glyph only draws the eye. */
.chip-gpu i{font-style:normal;font-size:7.5px;letter-spacing:.09em;opacity:.85;line-height:1}
.chip-gpu svg{opacity:.9}
.chip-gpu.mig{background:var(--surface-2);border-color:var(--line-2);color:var(--text-2)}
.item-id .nm{display:block;font-family:var(--font-display);font-weight:660;font-size:15px}
.item-id .sk{display:block;font-family:var(--font-mono);font-size:11px;color:var(--muted-2);margin-top:1px}
.specs{display:flex;gap:22px;flex-wrap:wrap}
.spec{min-width:0}
.spec .sl{display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);margin-bottom:2px}
.spec .sv{display:block;font-size:13.5px;font-weight:600;white-space:nowrap}
.item-price{text-align:right;white-space:nowrap}
.item-price .p{font-family:var(--font-display);font-size:18px;font-weight:700;letter-spacing:-.01em}
.item-price .u{font-size:12px;color:var(--muted);margin-left:2px}
.item-price .h{display:block;font-size:11.5px;color:var(--muted-2);margin-top:2px}

/* availability tags */
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.tag{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;padding:3px 7px;border-radius:5px;
  background:var(--chip);color:var(--muted);border:1px solid var(--line);
}
.tag.em{background:var(--brand-soft);color:var(--brand);border-color:var(--brand-line)}

/* model / product cards */
/* auto-fit, not auto-fill: a section with fewer cards than tracks would
   otherwise keep the empty tracks and dump its cards against the left
   edge — three of these on the Voice page left ~900px dead each. */
.cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.pcard{
  position:relative;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;display:flex;flex-direction:column;gap:10px;cursor:pointer;text-align:left;box-shadow:var(--shadow-card);
  transition:border-color .16s ease,background .16s ease,transform .16s ease;
}
/* The title is the card's link and stretches over the whole card, so the
   click target is the card exactly as it was when it was a button. */
.cardgo{color:inherit;text-decoration:none}
.cardgo::after{content:"";position:absolute;inset:0;border-radius:inherit}
.cardgo:hover{text-decoration:none}
.pcard:has(.cardgo:focus-visible),.item:has(.cardgo:focus-visible){outline:2px solid var(--brand);outline-offset:2px}
.pcard:has(.cardgo:focus-visible) .cardgo,.item:has(.cardgo:focus-visible) .cardgo{outline:none}

/* The title reserves the control's width instead of leaving it to wrap:
   a name that filled the card pushed the icon onto a line of its own. */
.pcard h3{display:flex;align-items:baseline;gap:7px}
.pcard h3 .cardgo{min-width:0}
.pcard h3 .cardlink{flex:none;margin-left:0}

/* Parameter size is what the eye looks for first in a model list. */
.pcard .vd .param{color:var(--brand);font-weight:640}

/* In and out on one line, with the unit stated once for the pair. */
.pcard .pf.pf-io{display:flex;align-items:baseline;gap:14px}
.pcard .pf.pf-io .io{display:flex;align-items:baseline;gap:5px}
.pcard .pf.pf-io .io i{font-style:normal;font-size:11.5px;color:var(--muted-2)}
.pcard .pf.pf-io .io b{font-family:var(--font-display);font-size:14px;color:var(--text)}
.pcard .pf .pu{font-weight:400;color:var(--muted);font-size:11px;margin-left:auto;white-space:nowrap}

.about{font-size:14px;line-height:1.7;color:var(--text-2)}
.page-head .sub .param{color:var(--brand);font-weight:640}
.buy .price-io{display:flex;gap:20px;align-items:baseline}
.buy .price-io span{display:flex;flex-direction:column;gap:2px}
.buy .price-io i{font-style:normal;font-size:11.5px;color:var(--muted-2)}
.buy .price-io b{font-family:var(--font-display);font-size:24px;font-weight:700;color:var(--text)}

/* Copy control: above the stretched link so it takes its own clicks. */
.cardlink{
  position:relative;z-index:1;display:inline-flex;align-items:center;vertical-align:baseline;
  margin-left:7px;padding:0;color:var(--muted-2);opacity:0;
  transition:opacity .14s ease,color .14s ease;
}
.pcard:hover .cardlink,.item:hover .cardlink{opacity:1}
.cardlink:hover{color:var(--brand)}
.cardlink:focus-visible{opacity:1}
@media(hover:none){.cardlink{opacity:.5}}
.pcard:hover{border-color:var(--brand-line-strong);background:var(--surface-2);transform:translateY(-2px)}
.pcard .ph{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.pcard h3{font-size:15px;line-height:1.3}
.pcard .vd{font-size:12px;color:var(--muted-2);margin-top:2px}
.pcard p{font-size:13px;color:var(--text-2);line-height:1.55}
/* The footer is the spacer, so prices line up across a row while the
   copy above stays tight to the top of each card. */
.pcard .pf{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:11px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.pcard .pf b{color:var(--text);font-family:var(--font-display);font-size:14px}
/* A label and a stack name do not fit on one line at card width; side
   by side both wrapped, and a row's footers ended up 20px out of step.
   Stacked they are always two lines, so the row lines up. */
.pcard .pf.pf-stack{flex-direction:column;align-items:stretch;gap:2px}
/* A fixed line box, so the 14px price and the 12px stack name occupy
   the same height and both footer variants line up in one row. */
.pcard .pf.pf-stack b{line-height:20px}
.pcard .pf.pf-stack b.oss{font-family:var(--font);font-size:12px;font-weight:600}
.pcard ul{display:flex;flex-direction:column;gap:6px}
.pcard li{font-size:12.5px;color:var(--text-2);padding-left:13px;position:relative;line-height:1.5}
.pcard li::before{content:"·";position:absolute;left:2px;color:var(--brand);font-weight:700}
.icon-sq{
  width:36px;height:36px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:var(--brand-soft);border:1px solid var(--brand-line);
}

/* tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:20px;overflow-x:auto}
.tabs button{
  padding:9px 14px;font-size:14px;font-weight:600;color:var(--muted);white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s ease,border-color .15s ease;
}
.tabs button:hover{color:var(--text-2)}
.tabs button.on{color:var(--brand);border-bottom-color:var(--brand)}

/* detail page */
.detail{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start}
.back{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--muted);margin-bottom:14px}
.back:hover{color:var(--brand)}
.dl{display:grid;grid-template-columns:150px 1fr;gap:10px 18px;font-size:13.5px}
.dl dt{color:var(--muted)}
.dl dd{font-weight:600}
.buy{position:sticky;top:calc(var(--topbar) + 20px)}
.buy .price{font-family:var(--font-display);font-size:30px;font-weight:750;letter-spacing:-.025em;line-height:1}
.buy .price small{font-size:14px;font-weight:600;color:var(--muted);letter-spacing:0}
.buy .sub{font-size:12.5px;color:var(--muted-2);margin-top:5px}

/* sold-out watermark */
.deploy-zone{position:relative;margin-top:16px}
.soldout-wrap{position:relative;border-radius:999px;overflow:hidden}
.soldout-mark{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
  font-family:var(--font-display);font-weight:800;font-size:15px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--sold);
  background:var(--sold-bg);
}
.btn.sold{
  width:100%;background:var(--hover);color:transparent;
  border-color:var(--danger-line);opacity:1;cursor:not-allowed;
}
.coupon{display:block;text-align:center;font-size:12px;color:var(--muted);margin-top:8px}

/* modal */
.backdrop{
  position:fixed;inset:0;background:var(--scrim);backdrop-filter:blur(5px);
  display:none;align-items:center;justify-content:center;padding:22px;z-index:200;
}
.backdrop.open{display:flex}
.modal{
  background:var(--surface);border:1px solid var(--line-2);border-radius:18px;
  width:100%;max-width:440px;max-height:calc(100vh - 44px);overflow-y:auto;
  padding:24px;animation:pop .18s cubic-bezier(.2,.8,.3,1.1);
}
.modal.wide{max-width:520px}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.modal{animation:none}}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px}
.modal h2{font-size:18px}
.modal p{font-size:14px;color:var(--text-2);line-height:1.6}
.modal .x{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;color:var(--muted);flex:none}
.modal .x:hover{background:var(--hover-2);color:var(--text)}
.modal-actions{display:flex;gap:9px;margin-top:20px;flex-wrap:wrap}
.modal-actions .btn{flex:1;min-width:130px}
.modal-icon{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;margin-bottom:14px;
  background:var(--warn-soft);border:1px solid var(--warn-line);
}
.modal-icon.ok{background:var(--brand-soft);border-color:var(--brand-line)}
.modal-icon.info{background:var(--brand-soft);border-color:var(--brand-line)}

/* empty state */
.empty{
  text-align:center;padding:44px 24px;border:1px dashed var(--line-2);border-radius:var(--radius);
  background:var(--surface-2);
}
.empty h3{margin-bottom:7px}
.empty p{color:var(--muted);font-size:13.5px;max-width:52ch;margin:0 auto}
.empty .btn{margin-top:16px}

/* data center list */
.dcs{display:flex;flex-direction:column;gap:1px;background:var(--line);border-radius:var(--radius-sm);overflow:hidden}
.dcrow{display:flex;align-items:center;gap:12px;padding:11px 14px;background:var(--surface);font-size:13.5px}
.dcrow .op{font-weight:600;min-width:112px}
.dcrow .lo{color:var(--muted);flex:1}
.dcrow .cd{font-family:var(--font-mono);font-size:11px;color:var(--muted-2)}
.dcrow .st{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--brand)}

/* simple table */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{
  text-align:left;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted-2);font-weight:500;padding:0 14px 9px;
}
.tbl td{padding:11px 14px;border-top:1px solid var(--line)}
.tbl tbody tr:hover{background:var(--hover)}
.tbl .num{text-align:right;font-family:var(--font-mono)}

/* usage bars */
.bars{display:flex;flex-direction:column;gap:11px}
.bar-row{display:grid;grid-template-columns:130px 1fr 74px;gap:12px;align-items:center;font-size:13px}
.bar{height:7px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.bar span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#0C7A55,#18CD8E)}
.bar-row .n{text-align:right;font-family:var(--font-mono);font-size:12px;color:var(--muted)}

/* toast */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(14px);
  background:var(--surface-3);border:1px solid var(--line-2);border-radius:999px;
  padding:10px 18px;font-size:13.5px;z-index:300;opacity:0;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;box-shadow:var(--shadow-pop);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* legal doc */
.doc{max-width:74ch}
.doc h2{margin:26px 0 10px}
.doc p{color:var(--text-2);font-size:14.5px;line-height:1.7;margin-bottom:12px}

/* ---------------- Responsive ---------------- */
@media(max-width:1180px){.settings{grid-template-columns:minmax(0,1fr)}}
@media(max-width:1120px){
  .dash{grid-template-columns:1fr}
  .detail{grid-template-columns:1fr}
  .buy{position:static}
  .g4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:980px){
  .auth-wrap{grid-template-columns:1fr}
  .auth-aside{display:none}
  .auth-main{padding:22px 22px 36px}
  .item{grid-template-columns:1fr;gap:14px}
  .item-price{text-align:left}
  .g3{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  .app{grid-template-columns:1fr}
  .side{
    position:fixed;left:0;top:0;width:var(--sidebar);transform:translateX(-100%);
    transition:transform .22s cubic-bezier(.2,.8,.3,1);box-shadow:var(--shadow-side);
  }
  .side.open{transform:none}
  .top .burger{display:grid}
  .scrim{position:fixed;inset:0;background:var(--scrim);z-index:35;display:none}
  .scrim.open{display:block}
  .page{padding:20px 18px 56px}
  .top{padding:10px 18px}
}
@media(max-width:640px){
  .g2,.g3{grid-template-columns:1fr}
  /* g4 only ever holds short stat tiles — 2-up beats a four-tall stack */
  .g4{grid-template-columns:repeat(2,1fr);gap:12px}
  .stat{padding:13px 14px}
  .stat .v{font-size:20px}
  .stat .l{font-size:11.5px}
  .dl{grid-template-columns:1fr;gap:4px 0}
  .dl dt{margin-top:8px}
  .specs{gap:14px}
  .bar-row{grid-template-columns:96px 1fr 62px}
  .dcrow{flex-wrap:wrap;gap:6px 12px}
  .dcrow .op{min-width:0}
  /* The status pill keeps only its dot; the title and toggles need the room */
  .top .pill-label{display:none}
  .top .pill{padding:5px 9px}
  .top{padding:10px 14px}
  .top-in{gap:9px}
  .top-title{font-size:14.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .top .seg,.top .pill{flex:none}
  .page{padding:18px 14px 52px}
  .card,.toolbar{padding:16px 14px}
  /* Selects pair up; search and reset take their own rows */
  .toolbar{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}
  .toolbar .fgroup{min-width:0}
  .toolbar .fgroup-wide,.toolbar > .btn{grid-column:1/-1}
  .toolbar > .btn{justify-self:start}
  /* Paired form fields stack — restore the vertical rhythm they lose */
  .form-row{grid-template-columns:1fr}
  .field-flush{margin-bottom:15px}
  .form-row > .field:last-child{margin-bottom:0}
  .keybox{min-width:0;flex-basis:100%}
  .keyrow .btn{flex:1}
  .modal{padding:20px 18px}
  .modal-actions .btn{min-width:0}
  h1{font-size:22px}
  .buy .price{font-size:26px}
}
@media(max-width:420px){
  .item{padding:14px}
  .specs{gap:12px 18px}
  .side{width:min(var(--sidebar),86vw)}
  .top .seg button{padding:5px 9px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------------- Theme controls ---------------- */
.icon-btn{
  width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:999px;
  border:1px solid var(--line-2);color:var(--text-2);
  transition:color .16s ease,border-color .16s ease,background .16s ease;
}
.icon-btn:hover{color:var(--text);border-color:var(--line-strong);background:var(--hover)}
.choices{max-width:430px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.choice{
  display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 10px;
  border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--field);
  color:var(--text-2);font-size:13.5px;font-weight:600;
  transition:border-color .16s ease,color .16s ease,background .16s ease;
}
.choice:hover{border-color:var(--line-strong);color:var(--text)}
.choice.on{border-color:var(--brand-fill);color:var(--brand);background:var(--brand-soft)}
@media(max-width:420px){.choices{grid-template-columns:1fr}
  .choice{flex-direction:row;justify-content:flex-start;gap:11px;padding:12px 14px}}

/* ---------------- Catalogue ---------------- */
.mark{
  flex:none;display:grid;place-items:center;border-radius:11px;
  font-family:var(--font-display);font-weight:750;letter-spacing:-.02em;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.10);
}
.pcard.tpl{gap:12px}
/* These cards read [tile][title]; the inherited space-between pushed the
   title block to the right edge, so its start moved with the length of
   its own text and no two titles in a row began at the same x. */
.pcard.tpl .ph{align-items:center;gap:12px}
.pcard.tpl .ph > .mark{flex:none}
.pcard.tpl .ph > .mark + span{flex:1;min-width:0}
.pcard.tpl h3{font-size:15.5px}
.tpl-head{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.tpl-head h1{margin-bottom:3px}
.tpl-head .sub{color:var(--muted);font-size:14.5px}

.svc-list{display:flex;flex-direction:column;gap:1px;background:var(--line);border-radius:var(--radius-sm);overflow:hidden}
.svc-row{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--surface)}
.svc-row div{flex:1;min-width:0}
.svc-row b{display:block;font-size:14px}
.svc-row span{display:block;font-size:12.5px;color:var(--muted)}
.svc-row code{font-size:11px;color:var(--muted-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:44%}

/* ---------------- Wizard ---------------- */
.stepper{display:flex;gap:8px;list-style:none;margin:0 0 20px;padding:0;overflow-x:auto}
.step{
  display:flex;align-items:center;gap:9px;padding:9px 15px 9px 11px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);white-space:nowrap;flex:none;
  box-shadow:var(--shadow-card);
}
.step .sn{
  width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  background:var(--chip);color:var(--muted);
}
.step .st{font-size:13.5px;font-weight:600;color:var(--muted)}
.step.on{border-color:var(--brand-fill);background:var(--brand-soft)}
.step.on .sn{background:var(--brand-fill);color:var(--brand-on)}
.step.on .st{color:var(--brand)}
.step.done .sn{background:var(--brand-soft-2);color:var(--brand)}
.step.done .st{color:var(--text-2)}

.wiz-nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.wiz-cost .cost-lines{
  display:flex;flex-direction:column;gap:9px;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--line);
}
.wiz-cost .cost-lines div{display:flex;justify-content:space-between;gap:12px;font-size:13.5px}
.wiz-cost .cost-lines span{color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wiz-cost .cost-lines b{font-weight:600;white-space:nowrap}
.wiz-cost .coupon{margin-top:14px;text-align:left}

.picks{display:flex;flex-direction:column;gap:8px;max-height:460px;overflow-y:auto}
.pick{
  display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;
  padding:12px 14px;border-radius:var(--radius-sm);border:1px solid var(--line);
  background:var(--field);text-align:left;width:100%;
  transition:border-color .14s ease,background .14s ease;
}
.pick:hover{border-color:var(--line-strong)}
.pick.on{border-color:var(--brand-fill);background:var(--brand-soft)}
.pick-id{min-width:0}
.pick-id b{display:block;font-size:14px}
.pick-id span{display:block;font-size:11px;color:var(--muted-2)}
.pick-spec{font-size:12.5px;color:var(--muted);white-space:nowrap}
.pick-price{font-family:var(--font-display);font-weight:700;font-size:14px;white-space:nowrap}

.env-list{display:flex;flex-direction:column;gap:8px}
.env-row{display:grid;grid-template-columns:1fr 1.4fr auto;gap:8px;align-items:center}
.env-row .inp{padding:9px 11px;font-size:13.5px}

input[type=range]{
  appearance:none;height:6px;border-radius:99px;background:var(--surface-3);outline:none;
}
input[type=range]::-webkit-slider-thumb{
  appearance:none;width:18px;height:18px;border-radius:50%;cursor:pointer;
  background:var(--brand-fill);border:2px solid var(--surface);
}
input[type=range]::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;cursor:pointer;border:2px solid var(--surface);
  background:var(--brand-fill);
}

@media(max-width:640px){
  .pick{grid-template-columns:1fr auto;gap:8px 12px}
  .pick-spec{grid-column:1/-1;white-space:normal}
  .env-row{grid-template-columns:1fr 1fr auto}
  .svc-row code{display:none}
  .step{padding:8px 12px 8px 9px}
  .step .st{font-size:12.5px}
}

/* ---------------- Sidebar: wallet + project ---------------- */
.side-org{padding:14px 12px 4px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.wallet{
  display:block;padding:11px 13px;border-radius:var(--radius-sm);
  background:var(--brand-soft);border:1px solid var(--brand-line);
  transition:border-color .16s ease;
}
.wallet:hover{border-color:var(--brand-fill)}
.wallet .wl{display:block;font-size:11.5px;color:var(--muted)}
.wallet .wv{display:block;font-family:var(--font-display);font-size:19px;font-weight:750;color:var(--brand);letter-spacing:-.02em}
.wallet.low{background:var(--warn-soft);border-color:var(--warn-line)}
.wallet.low .wv{color:var(--warn)}
.wallet .wn{display:flex;align-items:center;gap:5px;margin-top:4px;font-size:11.5px;color:var(--warn)}
.side-lbl{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-2);display:block;
}
.side-org .sel{padding:8px 30px 8px 11px;font-size:13.5px}

/* ---------------- Team ---------------- */
.members{display:flex;flex-direction:column;gap:1px;background:var(--line);border-radius:var(--radius-sm);overflow:hidden}
.member{
  display:grid;grid-template-columns:auto 1fr auto auto auto;gap:12px;align-items:center;
  padding:11px 14px;background:var(--surface);
}
.member .who{min-width:0}
.member .who b{display:block;font-size:14px;font-weight:600}
.member .who span{display:block;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.member .mlimit{font-size:12.5px;white-space:nowrap}
.member .msel{padding:6px 28px 6px 10px;font-size:12.5px;width:auto}

/* ---------------- Projects ---------------- */
.item.proj .chip-gpu{color:var(--brand)}
.item.proj .item-price{display:flex;align-items:center}
@media(max-width:860px){
  .member{grid-template-columns:auto 1fr auto;gap:8px 12px}
  .member .mlimit{grid-column:2/-1;font-size:12px;color:var(--muted)}
}

/* ---------------- AI4DC ---------------- */
.pcard.flag{border-color:var(--brand-line);background:var(--brand-soft)}
.pcard.flag:hover{border-color:var(--brand-fill)}
/* Muted grey loses contrast on the tinted flagship card. */
.pcard.flag .vd,.pcard.flag .pf span{color:var(--text-2)}
a.svc-row{transition:background .14s ease}
a.svc-row:hover{background:var(--hover)}
a.svc-row svg{flex:none;color:var(--muted)}

/* ---------------- Command palette ---------------- */
.pal-back{
  position:fixed;inset:0;background:var(--scrim);backdrop-filter:blur(5px);
  z-index:300;display:flex;align-items:flex-start;justify-content:center;padding:12vh 20px 20px;
}
.pal{
  width:100%;max-width:560px;background:var(--surface);border:1px solid var(--line-2);
  border-radius:16px;overflow:hidden;box-shadow:var(--shadow-pop);
}
.pal-in{display:flex;align-items:center;gap:11px;padding:15px 17px;border-bottom:1px solid var(--line);color:var(--muted)}
.pal-in input{flex:1;background:none;border:none;outline:none;font-size:15.5px;color:var(--text)}
.pal-in input::placeholder{color:var(--placeholder)}
.pal-list{max-height:52vh;overflow-y:auto;padding:8px}
.pal-item{
  display:flex;align-items:center;gap:11px;width:100%;padding:9px 11px;
  border-radius:9px;text-align:left;color:var(--text-2);
}
.pal-item:hover,.pal-item.on{background:var(--brand-soft);color:var(--text)}
.pal-ic{width:26px;height:26px;flex:none;display:grid;place-items:center;border-radius:8px;background:var(--chip);color:var(--muted)}
.pal-l{flex:1;min-width:0;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pal-g{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;color:var(--muted-2);white-space:nowrap}
.pal-empty{padding:26px;text-align:center;color:var(--muted);font-size:13.5px}
kbd{
  font-family:var(--font-mono);font-size:10.5px;padding:3px 6px;border-radius:5px;
  background:var(--chip);border:1px solid var(--line);color:var(--muted);
}
.pal-hint{background:none;cursor:pointer}
.pal-hint:hover{border-color:var(--line-strong);color:var(--text)}

/* ---------------- Notifications ---------------- */
.bell-wrap{position:relative}
.bell-dot{
  position:absolute;top:5px;right:6px;width:7px;height:7px;border-radius:50%;
  background:var(--brand-fill);box-shadow:0 0 0 2px var(--nav-bg);
}
.notif{
  position:absolute;right:0;top:calc(100% + 10px);width:320px;z-index:60;display:none;
  background:var(--surface);border:1px solid var(--line-2);border-radius:14px;
  overflow:hidden;box-shadow:var(--shadow-pop);
}
.notif.open{display:block}
.notif-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);font-size:14px}
.notif-list{max-height:340px;overflow-y:auto}
.notif-row{display:flex;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line);align-items:flex-start}
.notif-row:last-child{border-bottom:none}
.notif-row .dot{margin-top:6px;background:var(--line-2);box-shadow:none}
.notif-row.unread .dot{background:var(--brand-fill)}
.notif-row span span{display:block}
.notif-row b{display:block;font-size:13.5px;font-weight:500;color:var(--text-2);line-height:1.45}
.notif-row.unread b{color:var(--text);font-weight:600}
.notif-row span span:last-child{font-size:11.5px;color:var(--muted-2);margin-top:2px}

/* ---------------- Tour ---------------- */
.side-tour{
  display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;margin-bottom:6px;
  border-radius:9px;font-size:13px;color:var(--muted);text-align:left;
}
.side-tour:hover{background:var(--hover);color:var(--text-2)}
.tour-scrim{position:fixed;inset:0;background:rgba(4,4,16,.55);z-index:200}
.tour-lit{position:relative;z-index:201;box-shadow:0 0 0 3px var(--brand-fill),0 0 0 9px rgba(24,205,142,.25);border-radius:10px}
.tour-pop{
  position:fixed;z-index:202;width:min(310px,calc(100vw - 28px));padding:18px;
  background:var(--surface);border:1px solid var(--line-2);border-radius:14px;box-shadow:var(--shadow-pop);
}
.tour-n{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;color:var(--muted-2);margin-bottom:7px}
.tour-pop p{font-size:14px;color:var(--text-2);line-height:1.55}

@media(max-width:640px){
  .pal-back{padding:8vh 14px 14px}
  .pal-g{display:none}
  .notif{width:min(320px,calc(100vw - 28px));position:fixed;right:14px;top:64px}
  .pal-hint .pill-label,.pal-hint kbd{display:none}
}

/* ---------------- Sidebar footer links ---------------- */
a.side-tour{text-decoration:none}
.side-ver{
  display:block;margin-top:8px;padding:6px 10px;font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:.1em;color:var(--muted-2);text-decoration:none;
}
.side-ver:hover{color:var(--brand)}
a.pill{text-decoration:none}
a.pill:hover{border-color:var(--line-strong);color:var(--text)}