:root { color-scheme: light dark; --bg:#eef2f7; --surface:#fff; --ink:#17253b; --muted:#53647b; --line:#c7d1df; --brand:#2356a4; --good:#14733c; --warn:#8a5a00; --bad:#a32828; --focus:#ffbf47; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { scroll-behavior:smooth; scroll-padding-top:calc(var(--sticky-header-height, 180px) + 16px); }
body { margin:0; min-width:0; background:var(--bg); color:var(--ink); font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; }
.app-header { position:sticky; top:0; z-index:5; display:flex; flex-wrap:wrap; align-items:center; gap:24px; min-height:72px; padding:12px max(18px,calc((100vw - 1180px)/2)); background:#17243a; color:#fff; box-shadow:0 2px 12px #0003; }
.brand { display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none; white-space:nowrap; }
.brand-mark { display:grid; place-items:center; width:42px; height:42px; border:1px solid #7385a1; border-radius:10px; }
.brand-copy { display:flex; min-width:0; flex-direction:column; align-items:flex-start; gap:2px; line-height:1.1; }
.client-build { color:#c8d5e8; font-size:11px; font-weight:700; letter-spacing:.03em; }
.app-header nav { display:flex; flex:1 1 360px; flex-wrap:wrap; min-width:0; gap:6px; }
.app-header nav a { min-height:44px; min-width:0; display:flex; align-items:center; padding:8px 12px; border-radius:8px; color:#eef4ff; text-decoration:none; white-space:normal; overflow-wrap:anywhere; }
.app-header nav a:focus-visible,.app-header nav a:hover { background:#31415d; }
main { width:min(1120px,calc(100% - 32px)); margin:28px auto 72px; display:grid; gap:18px; }
section { min-width:0; padding:22px; border:1px solid var(--line); border-radius:14px; background:var(--surface); box-shadow:0 7px 24px #18314f12; }
.hero { border-top:4px solid var(--brand); }
.eyebrow { margin:0; color:var(--brand); font-size:12px; font-weight:800; letter-spacing:.12em; }
h1,h2 { margin:4px 0 8px; line-height:1.15; }
h1 { font-size:34px; }
h2 { font-size:23px; }
p { margin:6px 0 14px; color:var(--muted); }
.connect-form { display:grid; grid-template-columns:minmax(180px,1fr) auto auto; gap:10px; align-items:end; }
.connect-form label { grid-column:1/-1; font-size:12px; font-weight:800; }
input,button,select,textarea { font:inherit; }
input,textarea { width:100%; min-height:44px; padding:10px 12px; border:1px solid #8a98ab; border-radius:8px; background:var(--surface); color:var(--ink); }
button { min-height:44px; padding:9px 16px; border:1px solid #1d4788; border-radius:8px; background:var(--brand); color:#fff; font-weight:750; cursor:pointer; }
button:disabled { opacity:.55; cursor:not-allowed; }
button.danger { background:var(--bad); border-color:#741b1b; }
:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
.result { min-height:24px; margin:10px 0 0; font-weight:700; color:var(--ink); }
.identity-card,.metric-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:14px; }
.identity-card>div,.metric-grid article { min-width:0; padding:14px; border:1px solid var(--line); border-radius:10px; background:color-mix(in srgb,var(--surface) 92%,var(--brand)); }
.identity-card span,.metric-grid span { display:block; color:var(--muted); font-size:12px; font-weight:700; }
.identity-card strong,.metric-grid strong { display:block; margin-top:5px; font-size:20px; overflow-wrap:anywhere; }
.available-models { display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 12px; margin-top:12px; }
.available-models h2 { margin:0; font-size:16px; }
.available-models p { margin:0; }
.available-models-list { display:flex; flex-wrap:wrap; gap:2px 10px; min-width:0; margin:0; padding:0; list-style:none; }
.available-models-list li { max-width:100%; overflow-wrap:anywhere; }
.note { margin-top:12px; }
.selftest-controls { display:flex; gap:10px; flex-wrap:wrap; }
.selftest-results { display:grid; gap:10px; margin-top:12px; }
.selftest-row { min-width:0; padding:12px; border:1px solid var(--line); border-radius:8px; overflow-wrap:anywhere; }
.selftest-row strong { margin-right:8px; }
.selftest-row details { margin:8px 0; }
.selftest-row pre { max-height:240px; overflow:auto; padding:10px; border-radius:6px; background:color-mix(in srgb,var(--surface) 88%,var(--brand)); white-space:pre-wrap; overflow-wrap:anywhere; }
.selftest-row button { min-height:36px; padding:6px 10px; }
.toml-controls { display:flex; align-items:end; gap:10px; flex-wrap:wrap; }
.catalog-option { display:flex; align-items:center; gap:8px; margin:12px 0; }
.catalog-option input { width:20px; min-height:20px; padding:0; }
#catalog-controls { margin-bottom:16px; }
#catalog-controls button { margin-top:8px; }
.toml-controls label { flex-basis:100%; font-size:12px; font-weight:800; }
.toml-controls select { min-height:44px; min-width:min(100%,240px); padding:8px; border:1px solid #8a98ab; border-radius:8px; background:var(--surface); color:var(--ink); }
#toml-output { min-height:230px; margin-top:12px; font:12px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace; resize:vertical; }
#error-list { margin:12px 0 0; padding-left:22px; }
#error-list li { margin:8px 0; overflow-wrap:anywhere; }
.telemetry-toolbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.telemetry-toolbar select { min-height:44px; font:inherit; color:var(--ink); background:var(--surface); padding:8px; border:1px solid var(--line); border-radius:8px; }
.access-indicator { font-weight:700; overflow-wrap:anywhere; }
.access-indicator::before { content:"●"; display:inline-block; margin-right:6px; }
.access-indicator.ready { color:var(--good); }
.access-indicator.error { color:var(--bad); }
.table-scroll { min-width:0; max-width:100%; }
.table-scroll table { width:100%; table-layout:fixed; border-collapse:collapse; font-size:12px; }
.table-scroll th,.table-scroll td { text-align:left; padding:9px; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
.table-scroll caption { overflow-wrap:anywhere; }
.model-cell-label { display:none; }
.token-price { display:block; margin-top:4px; color:var(--muted); font-size:12px; overflow-wrap:anywhere; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.chart-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.chart-grid>div { min-width:0; }
.chart-grid svg { display:block; width:100%; height:auto; }
.chart-grid svg polyline { fill:none; stroke-width:2; }
.chart-grid svg text { fill:var(--muted); font-size:12px; }
.chart-axis { fill:none; stroke:var(--line); }
.chart-input { stroke:var(--brand); fill:var(--brand); color:var(--brand); }
.chart-output { stroke:var(--good); fill:var(--good); color:var(--good); }
.chart-errors { stroke:var(--bad); fill:var(--bad); color:var(--bad); }
.chart-legend { font-size:12px; }
.error-region { min-width:0; max-height:clamp(140px,36vh,360px); overflow-y:auto; overscroll-behavior:contain; overflow-wrap:anywhere; }
#price-basis { overflow-wrap:anywhere; }
@media (max-width:900px) {
  #model-usage table,#model-usage caption,#model-usage tbody { display:block; width:100%; }
  #model-usage thead { display:none; }
  #model-usage tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin:12px 0; border:1px solid var(--line); border-radius:8px; }
  #model-usage th,#model-usage td { display:block; min-width:0; }
  #model-usage th,#model-usage td:last-child { grid-column:1/-1; }
  .model-cell-label { display:block; font-weight:700; color:var(--muted); }
}
@media (max-width:700px) { .chart-grid{grid-template-columns:minmax(0,1fr)}.error-region{max-height:40vh} }
@media (max-width:700px) { .app-header{align-items:flex-start;flex-wrap:wrap;gap:8px;padding:10px}.app-header nav{order:3;flex-basis:100%}main{width:min(100% - 20px,1120px);margin-top:14px}.connect-form{grid-template-columns:1fr}.connect-form label{grid-column:auto}.identity-card,.metric-grid{grid-template-columns:1fr 1fr}section{padding:16px}h1{font-size:28px} }
@media (max-width:420px) { .identity-card,.metric-grid{grid-template-columns:1fr}.app-header nav a{padding:8px 9px;font-size:12px}.toml-controls>*{width:100%} }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}*{transition:none!important;animation:none!important} }
@media (forced-colors:active) { section,.identity-card>div,.metric-grid article{border:1px solid CanvasText}button{border:2px solid ButtonText} }

.client-presentation-controls{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.client-presentation-controls a{min-height:36px;display:inline-flex;align-items:center;padding:0 9px;border:1px solid #34506a;border-radius:8px;text-decoration:none;color:inherit}.client-dashboard2-return,.client-dashboard2-design{display:none}.client-dashboard2-active .client-dashboard2-entry{display:none}.client-dashboard2-active .client-dashboard2-return,.client-dashboard2-active .client-dashboard2-design{display:inline-flex}.client-dashboard2-active main{display:grid;grid-template-columns:minmax(280px,.75fr) minmax(0,1.25fr);align-items:start;gap:14px;max-width:1440px}.client-dashboard2-active main>section{margin:0}.client-dashboard2-active #my-telemetry{grid-row:span 2}.client-dashboard2-active[data-dashboard2-design="classic"]{background:#edf3f8}.client-dashboard2-active[data-dashboard2-design="classic"] main>section{background:#fff;border-color:#c8d7e4}
/* MyGateway Cockpit owns the palette inherited by cards, forms and SVGs. */
.client-dashboard2-active[data-dashboard2-design="cockpit"] {
  color-scheme:dark;
  --bg:#07111b; --surface:#0d1b28; --ink:#dce8f4; --muted:#a9bed0;
  --line:#668399; --brand:#83bfff; --good:#75dda1; --warn:#ffd27a; --bad:#ffa0a0;
  background:var(--bg); color:var(--ink);
}
.client-dashboard2-active[data-dashboard2-design="cockpit"] .app-header,
.client-dashboard2-active[data-dashboard2-design="cockpit"] main>section {
  background:var(--surface); border-color:var(--line); color:var(--ink);
}
.client-dashboard2-active[data-dashboard2-design="cockpit"] .client-build { color:var(--muted); }
.client-dashboard2-active[data-dashboard2-design="cockpit"] .app-header nav a { color:var(--ink); }
.client-dashboard2-active[data-dashboard2-design="cockpit"] .app-header nav a:hover,
.client-dashboard2-active[data-dashboard2-design="cockpit"] .app-header nav a:focus-visible {
  background:color-mix(in srgb,var(--surface) 75%,var(--brand));
}
.client-dashboard2-active[data-dashboard2-design="cockpit"] .brand-mark,
.client-dashboard2-active[data-dashboard2-design="cockpit"] .client-presentation-controls a,
.client-dashboard2-active[data-dashboard2-design="cockpit"] input,
.client-dashboard2-active[data-dashboard2-design="cockpit"] textarea,
.client-dashboard2-active[data-dashboard2-design="cockpit"] .toml-controls select { border-color:var(--line); }
.client-dashboard2-active[data-dashboard2-design="cockpit"] button { border-color:var(--brand); color:var(--bg); }
.client-dashboard2-active[data-dashboard2-design="cockpit"] button.danger { border-color:var(--bad); }
.client-dashboard2-active[data-dashboard2-design="cockpit"] button:disabled {
  opacity:1; background:color-mix(in srgb,var(--surface) 80%,var(--brand));
  color:var(--muted); border-color:var(--line);
}
@media (max-width:900px){.client-dashboard2-active main{grid-template-columns:1fr}}@media (max-width:420px){.client-dashboard2-active .client-presentation-controls{width:100%}.client-dashboard2-active .client-presentation-controls a{flex:1;justify-content:center;min-width:0}.client-dashboard2-active main{display:block}.client-dashboard2-active main>section{margin-bottom:12px}}
body[data-session-state="anonymous"] main { max-width:640px; grid-template-columns:minmax(0,1fr); }
body[data-session-state="authenticated"] .anonymous-title { display:none; }