/* Gigatokens house style — tokens and components mirrored from gigatokens.ai (STYLE-GUIDE v1.0, Developer theme).
   Fonts are self-hosted from the brand package; no third-party origins. */
@font-face { font-family: 'Space Grotesk'; font-weight: 700; font-display: swap; src: url('fonts/SpaceGrotesk-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('fonts/Inter-Regular.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 400; font-display: swap; src: url('fonts/JetBrainsMono-Regular.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 600; font-display: swap; src: url('fonts/JetBrainsMono-SemiBold.woff2') format('woff2'); }

:root { --bg:#070B12; --surface:#0E1520; --surface-2:#131C2B; --line:#1E2A3D; --text:#E8EEF7; --muted:#8A97A8;
        --green:#00E88F; --blue:#2E7CF6; --grad:linear-gradient(120deg,#00E88F,#2E7CF6); --radius:14px;
        --danger:#FF6B6B; --warn:#FFB86B; --panel:var(--surface); --accent:var(--green); }
* { box-sizing:border-box; }
html, body { margin:0; } body { min-height:100vh; display:flex; flex-direction:column; } main.gt { flex:1; }
body { background:var(--bg); color:var(--text); font-family:'Inter',system-ui,-apple-system,sans-serif; font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
.wrap { max-width:1140px; margin:0 auto; padding:0 24px; }

/* Nav (site parity) */
nav.gt { position:sticky; top:0; z-index:50; background:rgba(7,11,18,.85); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:66px; gap:24px; }
.logo { display:flex; align-items:center; gap:10px; font-family:'Space Grotesk','Inter',sans-serif; font-weight:700; font-size:29px; letter-spacing:.02em; color:var(--text); }
.logo .tok { color:var(--green); }
.logo sup { font-size:.52em; line-height:0; }
.logo .area { font-family:'Inter',sans-serif; font-weight:400; font-size:14.5px; color:var(--muted); margin-left:6px; padding-left:14px; border-left:1px solid var(--line); line-height:1; }
.swap { position:relative; display:inline-block; }
.swap .p1, .swap .p2, .swap .p3 { display:inline-block; }
.swap .p2, .swap .p3 { position:absolute; right:0; top:0; }
.swap .p3 { font-family:'JetBrains Mono',monospace; font-size:.92em; top:.07em; }
.swap .p1 { animation:swp1 12s ease-in-out infinite; } .swap .p2 { animation:swp2 12s ease-in-out infinite; } .swap .p3 { animation:swp3 12s ease-in-out infinite; }
@keyframes swp1 { 0%,29% { opacity:1; transform:translateY(0);} 33%,92% { opacity:0; transform:translateY(-.45em);} 93% { opacity:0; transform:translateY(.45em);} 100% { opacity:1; transform:translateY(0);} }
@keyframes swp2 { 0%,29% { opacity:0; transform:translateY(.45em);} 33%,62% { opacity:1; transform:translateY(0);} 66%,100% { opacity:0; transform:translateY(-.45em);} }
@keyframes swp3 { 0%,62% { opacity:0; transform:translateY(.45em);} 66%,95% { opacity:1; transform:translateY(0);} 99%,100% { opacity:0; transform:translateY(-.45em);} }
@media (prefers-reduced-motion: reduce) { .swap .p1, .swap .p2, .swap .p3 { animation:none; } .swap .p2, .swap .p3 { opacity:0; } }
.nav-links { display:flex; gap:28px; font-size:14.5px; color:var(--muted); font-weight:500; }
.nav-links a:hover, .nav-links a.active { color:var(--text); }
.nav-cta { display:flex; gap:10px; align-items:center; }
@media (max-width:760px) { .nav-links { gap:16px; font-size:13.5px; } .logo { font-size:24px; } .logo .area { display:none; } }

/* Buttons */
.btn, button { display:inline-block; padding:10px 22px; border-radius:10px; font-weight:600; font-size:14.5px; font-family:inherit; border:0; cursor:pointer; transition:all .15s ease; line-height:1.4; }
.btn-primary, button:not(.ghost):not(.danger):not(.btn-ghost) { background:var(--grad); color:#04110B; }
.btn-primary:hover, button:not(.ghost):not(.danger):hover { filter:brightness(1.1); transform:translateY(-1px); }
.btn-ghost, button.ghost { background:transparent; border:1px solid var(--line); color:var(--text); }
.btn-ghost:hover, button.ghost:hover { border-color:var(--green); }
button.danger { background:transparent; color:var(--danger); border:1px solid var(--danger); }
button.danger:hover { background:rgba(255,107,107,.08); }
button.sm, .btn.sm, form.inline button { padding:6px 12px; font-size:13px; border-radius:8px; }

/* Page */
main.gt { padding:36px 0 64px; }
h1 { font-family:'Space Grotesk','Inter',sans-serif; font-size:clamp(26px,3vw,34px); line-height:1.15; letter-spacing:-.02em; margin:0 0 6px; }
.meta { color:var(--muted); font-size:14px; margin:0 0 28px; }
h2 { font-family:'Inter',sans-serif; font-size:12.5px; margin:28px 0 10px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-weight:600; }
h3 { font-size:16px; margin:0 0 6px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-bottom:16px; }
.muted { color:var(--muted); } .error { color:var(--danger); } .right { text-align:right; }
code, .mono, td.mono { font-family:'JetBrains Mono',ui-monospace,Menlo,monospace; font-size:13px; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; font-size:14px; }
th { color:var(--muted); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; font-family:'JetBrains Mono',monospace; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; font-family:'JetBrains Mono',monospace; }
tr:last-child td { border-bottom:0; }
td.mono, td.num, th { white-space:nowrap; }
/* Tables: keep every cell inside its card (GTS-150). The card scrolls horizontally when the table is wider than the page. */
.table-wrap { overflow-x:auto; }
.table-wrap table { min-width:720px; }
/* dense admin/console tables: the key lists carry limits + usage in one row */
.table-wrap th, .table-wrap td { padding:8px 10px; font-size:13px; }
.table-wrap td.wrap { max-width:240px; }
.table-wrap .chip { font-size:10.5px; padding:0 6px; }
table.bordered th, table.bordered td { border:1px solid var(--line); }
table.bordered tr:first-child th { background:var(--surface-2); }
table.bordered tr:last-child td { border-bottom:1px solid var(--line); }
table.bordered tr > :first-child { border-left:0; } table.bordered tr > :last-child { border-right:0; }
td.wrap { white-space:normal; overflow-wrap:anywhere; max-width:280px; }
.chip { display:inline-block; padding:1px 8px; margin:1px 4px 1px 0; border:1px solid var(--line); border-radius:999px; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text); white-space:nowrap; }
/* Model picker: checkboxes instead of a multi-select box (GTS-151). Same control on keys, org create and org limits. */
.checks { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:6px 16px; padding:12px 14px; background:var(--surface-2); border:1px solid var(--line); border-radius:10px; }
.checks label.check { display:flex; align-items:center; gap:10px; margin:0; text-transform:none; letter-spacing:0; font-size:13.5px; font-weight:500; color:var(--text); font-family:'JetBrains Mono',monospace; cursor:pointer; }
.checks input[type=checkbox] { width:16px; height:16px; padding:0; margin:0; flex:none; accent-color:var(--green); cursor:pointer; }

/* Forms (site contact-form parity) */
label { display:block; margin-bottom:6px; font-size:12.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
input, select, textarea { width:100%; padding:11px 14px; background:var(--surface-2); color:var(--text); border:1px solid var(--line); border-radius:10px; font-family:inherit; font-size:15px; line-height:1.5; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline:2px solid var(--green); outline-offset:2px; }
select { appearance:none; }
.field + .field { margin-top:16px; }
.actions { margin-top:22px; }
.form-note { margin-top:16px; font-size:13.5px; color:var(--muted); }
.form-note a { color:var(--green); }
.toolbar { display:flex; gap:12px; flex-wrap:wrap; align-items:end; margin-bottom:14px; } .toolbar > div { min-width:150px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; }
form.inline { display:inline; }

/* Badges, alerts, KPIs, charts */
.badge { display:inline-block; padding:3px 10px; border-radius:999px; font-size:11.5px; font-weight:600; font-family:'JetBrains Mono',monospace; letter-spacing:.02em; }
.ok { background:rgba(0,232,143,.12); color:var(--green); } .off { background:rgba(255,107,107,.12); color:var(--danger); }
.warn { background:rgba(255,184,107,.12); color:var(--warn); } .info { background:rgba(46,124,246,.14); color:#7FB0FF; }
.alert { background:var(--surface); border:1px solid var(--green); border-radius:var(--radius); padding:16px 20px; margin-bottom:18px; }
.alert code { font-size:14px; word-break:break-all; user-select:all; }
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:18px; }
.kpi { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; }
.kpi .v { font-family:'Space Grotesk','Inter',sans-serif; font-size:26px; font-weight:700; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; font-variant-numeric:tabular-nums; }
.kpi .l { color:var(--muted); font-size:12.5px; }
.legend { display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; font-size:12.5px; color:var(--muted); }
.legend i { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:6px; vertical-align:middle; }
.charts { display:grid; grid-template-columns:1fr 1fr; gap:16px; } @media (max-width:900px) { .charts { grid-template-columns:1fr; } }
.chart h3 { font-size:12.5px; margin:0 0 8px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
progress { width:100%; height:8px; accent-color:var(--green); }
.status-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(0,232,143,.6); animation:pulse 2.4s infinite; vertical-align:middle; margin-right:6px; }
@keyframes pulse { 0% { box-shadow:0 0 0 0 rgba(0,232,143,.6);} 70% { box-shadow:0 0 0 8px rgba(0,232,143,0);} 100% { box-shadow:0 0 0 0 rgba(0,232,143,0);} }

/* Login */
.login-wrap { max-width:480px; margin:56px auto 0; text-align:center; padding:0 24px; }
.login-wrap h1 { font-size:clamp(30px,4vw,40px); }
.login-wrap .btn, .login-wrap button { width:100%; padding:14px 28px; font-size:15.5px; }
.login-help { font-size:13.5px; color:var(--muted); }

/* Footer */
footer.gt { border-top:1px solid var(--line); padding:32px 0 28px; color:var(--muted); font-size:13.5px; margin-top:48px; }
.foot-grid { display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:center; }
.foot-links { display:flex; gap:22px; } .foot-links a:hover { color:var(--text); }

/* Utilities (replace inline style attributes so CSP can drop 'unsafe-inline') */
.p0 { padding:0; } .mt6 { margin-top:6px; } .mt8 { margin-top:8px; } .mt10 { margin-top:10px; } .mt12 { margin-top:12px; } .mt14 { margin-top:14px; }
.fs11 { font-size:11px; } .fs12 { font-size:12px; } .fs13 { font-size:13px; }
.w260 { min-width:260px; } .w280 { min-width:280px; } .prewrap { white-space:pre-wrap; margin-bottom:0; } .nowrap { white-space:nowrap; } .self-end { align-self:end; }
.alert-error { border-color:var(--danger); }
.login-card { max-width:380px; margin:60px auto; }

/* Docs */
main.doc{max-width:860px;margin:0 auto;padding:40px 24px 64px}
.doc h2{font-family:'Space Grotesk','Inter',sans-serif;font-size:20px;color:var(--text);text-transform:none;letter-spacing:-.01em;margin:36px 0 10px}
pre{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;overflow:auto;font-size:13px}
.doc a{color:var(--green)}

/* Dual-list model picker (GTS-151): available | buttons | selected. Fixed-height scrollable lists with visible scrollbars. */
.picker { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:10px 14px; align-items:end; }
.picker-col { min-width:0; }
.picker select[multiple] { appearance:auto; -webkit-appearance:listbox; height:132px; padding:6px; overflow-y:scroll; overflow-x:hidden; font-family:'JetBrains Mono',monospace; font-size:13px; line-height:1.45; scrollbar-width:thin; scrollbar-color:var(--muted) var(--surface); }
.picker select[multiple] option { padding:5px 8px; border-radius:6px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.picker select[multiple] option:checked { background:var(--green) linear-gradient(0deg,var(--green),var(--green)); color:#04110b; }
.picker select::-webkit-scrollbar { width:12px; } .picker select::-webkit-scrollbar-track { background:var(--surface); border-radius:8px; }
.picker select::-webkit-scrollbar-thumb { background:var(--muted); border-radius:8px; border:2px solid var(--surface); }
.picker-btns { display:flex; flex-direction:column; gap:8px; align-self:center; padding-top:26px; }
.picker-btns button { padding:7px 12px; font-size:13px; border-radius:8px; min-width:160px; white-space:nowrap; }
.picker-help { grid-column:1 / -1; }
@media (max-width:760px) { .picker { grid-template-columns:1fr; } .picker-btns { flex-direction:row; flex-wrap:wrap; padding-top:0; } .picker-btns button { min-width:0; flex:1 1 45%; } }