:root, [data-theme="dark"] {
  color-scheme: dark;
  --bs-body-bg: #080b15;
  --bs-body-color: #f2f4ff;
  --bs-primary: #71e5d0;
  --page-bg: #080b15;
  --surface: #11182b;
  --surface-solid: #101525;
  --ink: #f2f4ff;
  --muted: #c3cbe0;
  --muted-2: #a9b3ca;
  --cyan: #71e5d0;
  --lilac: #a996ff;
  --line: rgba(164, 178, 220, .28);
  --grid-line: rgba(125,145,200,.045);
}
[data-theme="light"] {
  color-scheme: light;
  --bs-body-bg: #f3f6fb;
  --bs-body-color: #13213b;
  --bs-primary: #0f8f86;
  --page-bg: #f3f6fb;
  --surface: #ffffff;
  --surface-solid: #ffffff;
  --ink: #13213b;
  --muted: #3f516a;
  --muted-2: #52657e;
  --cyan: #0f8f86;
  --lilac: #6652ce;
  --line: rgba(40, 61, 100, .24);
  --grid-line: rgba(70,98,145,.07);
}
:root {
  --mono: "DM Mono", "SFMono-Regular", Consolas, monospace;
  --font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--page-bg); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; }
body .text-secondary, body .text-muted { color: var(--muted) !important; }
code, pre, .status-meta, .models-source, .model-count, .code-file, .code-tabs, .section-kicker { font-family: var(--mono); }
.background-grid { position: fixed; inset: 0; pointer-events: none; opacity: .8; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, #000, transparent 75%); }
.container { position: relative; }
.navbar { background: var(--page-bg); backdrop-filter: blur(12px); }
.navbar .navbar-brand, .navbar .text-white { color: var(--ink) !important; }
.brand-mark { width: 26px; height: 26px; display: inline-grid; place-items: center; border-radius: 8px; background: var(--cyan); color: #081219; font-size: 15px; box-shadow: 0 0 24px rgba(113,229,208,.26); }
.brand-accent, .eyebrow { color: var(--cyan); }
.status-meta { color: var(--muted-2); font-size: 11px; letter-spacing: .05em; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(113,229,208,.09), 0 0 12px var(--cyan); }
.meta-divider { width: 1px; height: 13px; background: var(--line); margin: 0 4px; }
.hero-section { min-height: 540px; }
.eyebrow { display: flex; gap: 10px; align-items: center; font: 11px var(--mono); letter-spacing: .16em; }
.eyebrow-line { width: 22px; height: 1px; background: var(--cyan); }
h1 { letter-spacing: -.07em; }
h1 em { color: var(--lilac); font-style: normal; }
.lead { font-size: 15px; line-height: 1.85; }
.api-source-badge { width: fit-content; display: flex; align-items: center; gap: 8px; padding: 7px 10px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font: 10px var(--mono); }
.api-source-badge code { color: var(--cyan); font-size: 10px; }
.btn-primary { --bs-btn-bg: var(--cyan); --bs-btn-border-color: var(--cyan); --bs-btn-color: #081219; --bs-btn-hover-bg: #9af5e5; --bs-btn-hover-border-color: #9af5e5; --bs-btn-hover-color: #081219; }
.btn-outline-light { --bs-btn-color: var(--ink); --bs-btn-border-color: rgba(164,178,220,.35); --bs-btn-hover-bg: rgba(255,255,255,.06); --bs-btn-hover-border-color: var(--cyan); --bs-btn-hover-color: var(--cyan); }
.theme-toggle { color: var(--muted) !important; border-color: var(--line) !important; }

.hero-orbit { height: 390px; position: relative; display: grid; place-items: center; }
.orbit { position: absolute; border-radius: 50%; border: 1px solid rgba(169,150,255,.25); transform: rotate(-20deg); }
.orbit-one { width: 310px; height: 190px; border-color: rgba(113,229,208,.34); box-shadow: 0 0 65px rgba(113,229,208,.06); }
.orbit-two { width: 190px; height: 310px; border-color: rgba(169,150,255,.27); transform: rotate(33deg); }
.orbit::after { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); top: 8px; left: 50%; box-shadow: 0 0 18px var(--cyan); }
.orbit-two::after { background: var(--lilac); top: auto; bottom: 28px; left: 15px; box-shadow: 0 0 18px var(--lilac); }
.orbit-core { width: 112px; height: 112px; border-radius: 32px; display: grid; place-items: center; position: relative; background: linear-gradient(145deg,#1f3850,#1a1934); border: 1px solid rgba(255,255,255,.16); transform: rotate(10deg); box-shadow: 0 18px 60px rgba(0,0,0,.4), inset 0 0 34px rgba(113,229,208,.13); }
.core-glow { position: absolute; inset: 19px; border-radius: 24px; border: 1px solid rgba(113,229,208,.5); box-shadow: inset 0 0 22px rgba(113,229,208,.18), 0 0 28px rgba(113,229,208,.15); }
.core-symbol { color: var(--cyan); font-size: 43px; line-height: 1; transform: rotate(-10deg); text-shadow: 0 0 20px rgba(113,229,208,.6); }
.orbit-label { position: absolute; color: var(--muted-2); font: 10px var(--mono); letter-spacing: .12em; }
.label-top { top: 31px; right: 19%; } .label-right { right: 3%; top: 52%; } .label-bottom { bottom: 27px; left: 18%; }

.status-strip, .credential-card, .models-panel, .code-card, .tester-form, .tester-output { background: var(--surface); border: 1px solid var(--line); }
.status-strip { border-color: var(--line); }
.info-item { padding: 21px 24px; display: flex; align-items: center; gap: 14px; border-right: 1px solid var(--line); }
.info-item:last-child { border-right: 0; }
.info-icon { color: var(--cyan); font-size: 22px; font-family: var(--mono); }
.info-item strong, .info-item span { display: block; }
.info-item strong { font-size: 12px; margin-bottom: 4px; }
.info-item span { color: var(--muted-2); font-size: 11px; }
.section-kicker { color: var(--muted-2); font-size: 11px; letter-spacing: .16em; margin-bottom: 8px; }
.section-heading h2 { letter-spacing: -.05em; }
.credential-card { border-radius: 13px; }
.key-card { border-color: rgba(169,150,255,.27); }
.card-label { color: var(--muted-2); font: 10px var(--mono); letter-spacing: .14em; }
.card-index { display:inline-grid; place-items:center; width:20px; height:20px; border-radius:6px; color:#081219; background:var(--cyan); font:11px var(--mono); margin-right:8px; }
.key-card .card-index { background:var(--lilac); }
.credential-card code { color: var(--ink); font-size: 13px; }
.key-value { color: #d6ceff !important; }
.card-note, .example-note { color: var(--muted-2); font-size: 11px; line-height: 1.6; }
.notice-icon { color:#8a6111; border:1px solid #8a6111; border-radius:50%; width:18px; height:18px; display:inline-grid; place-items:center; font:11px var(--mono); flex:0 0 auto; }

.models-panel, .code-card, .tester-form, .tester-output { border-radius: 13px; overflow: hidden; }
.upstream-intro { color: var(--ink); background: rgba(113,229,208,.1); border: 1px solid rgba(113,229,208,.28); }
.upstream-intro strong, .upstream-intro span { display: block; }
.upstream-intro strong { font-size: 13px; }
.upstream-intro span { margin-top: 3px; color: var(--muted); font-size: 11px; }
.upstream-intro-icon { width: 24px; height: 24px; flex: 0 0 auto; display: inline-grid; place-items: center; color: #081219; background: var(--cyan); border-radius: 7px; font-family: var(--mono); }
.upstream-card { border: 1px solid var(--line); border-radius: 15px; }
.upstream-sense { border-color: rgba(25,135,84,.35); }
.upstream-opencode { border-color: rgba(255,193,7,.35); }
.upstream-logo { display: inline-grid; place-items: center; width: 33px; height: 33px; border-radius: 10px; margin-bottom: 13px; color: #081219; background: var(--cyan); font: 17px var(--mono); }
.upstream-opencode .upstream-logo { background: #ffc107; }
.upstream-kicker { color: var(--muted-2); font: 10px var(--mono); letter-spacing: .12em; }
.upstream-card h3 { margin: 6px 0 0; color: var(--ink); font-size: 22px; letter-spacing: -.04em; }
.upstream-copy { min-height: 46px; margin: 18px 0 8px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.upstream-points { min-height: 92px; margin: 0 0 22px; padding-left: 18px; color: var(--muted); font-size: 11px; line-height: 1.9; }
.upstream-points li::marker { color: var(--cyan); }
.upstream-opencode .upstream-points li::marker { color: #ffc107; }
.upstream-disclaimer { color: var(--muted-2); font: 10px var(--mono); }
.models-panel .card-header, .code-card .card-header, .tester-output .card-header { background: rgba(255,255,255,.02); color: var(--muted-2); font: 10px var(--mono); letter-spacing: .08em; }
.models-source { font-size: 10px; color: var(--muted-2); }
.search-wrap { max-width: 320px; }
.search-wrap .input-group-text, .search-wrap .form-control, .tester-form .form-control, .tester-form .form-select { background:var(--surface-solid); border-color:var(--line); color:var(--ink); }
.search-wrap .form-control::placeholder { color:var(--muted-2); }
.models-list { min-height: 130px; }
.model-row { min-height:72px; padding:17px 18px; display:flex; align-items:center; gap:11px; border-bottom:1px solid var(--line); }
.model-row:last-child { border-bottom:0; }
.model-chip { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; color:var(--cyan); background:rgba(113,229,208,.1); font:12px var(--mono); }
.model-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:12px var(--mono); }
.model-type { margin-left:auto; color:var(--muted-2); font:9px var(--mono); }
.loading-state, .empty-state { min-height:130px; display:flex; align-items:center; justify-content:center; gap:10px; color:var(--muted-2); font-size:12px; }

.code-tabs .nav-link { color: var(--muted-2); border: 1px solid transparent; }
.code-tabs .nav-link:hover { color: var(--ink); }
.code-tabs .nav-link.active { color:var(--cyan); background:rgba(113,229,208,.1); border-color:rgba(113,229,208,.22); }
.code-file { font-size:10px; }
.file-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--lilac); margin-right:8px; }
.copy-code { color:var(--muted-2); text-decoration:none; }
.copy-code:hover { color:var(--cyan); }
#code-block { min-height:245px; overflow:auto; background:#0c1120; color:#d9e0f3; font:12px/1.8 var(--mono); tab-size:2; }
.tester-output .card-header #response-status { color:var(--cyan); letter-spacing:0; }
.tester-output .card-header #response-status.quota-status, .tester-output .card-header #response-status.error-status { color: #d58a00; }
.output-body { min-height:180px; color:#d9e0f3; font:12px/1.75 var(--mono); white-space:pre-wrap; word-break:break-word; }
.output-placeholder { color:var(--muted-2); }
.output-body.quota-error, .output-body.error-output { color: #d58a00; }
.footer { color:var(--muted-2); font-size:10px; }
.channel-cta { position: relative; overflow: hidden; color: var(--ink); text-decoration: none; border: 1px solid rgba(113,229,208,.5); background: linear-gradient(110deg, rgba(113,229,208,.18), rgba(169,150,255,.2)); box-shadow: 0 18px 50px rgba(113,229,208,.12), inset 0 0 50px rgba(255,255,255,.04); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.channel-cta::after { content: ""; position: absolute; width: 190px; height: 190px; right: 6%; top: -80px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; box-shadow: 0 0 0 15px rgba(255,255,255,.03), 0 0 0 30px rgba(255,255,255,.02); pointer-events: none; }
.channel-cta:hover { color: var(--ink); transform: translateY(-2px); border-color: var(--cyan); box-shadow: 0 22px 60px rgba(113,229,208,.2), inset 0 0 50px rgba(255,255,255,.06); }
.channel-icon { width: 48px; height: 48px; display: inline-grid; place-items: center; flex: 0 0 auto; color: #081219; border-radius: 15px; background: var(--cyan); font: 22px var(--mono); box-shadow: 0 0 26px rgba(113,229,208,.35); }
.channel-cta small, .channel-cta strong, .channel-cta em { display: block; }
.channel-cta small { color: var(--cyan); font: 10px var(--mono); letter-spacing: .16em; }
.channel-cta strong { margin-top: 3px; color: var(--ink); font-size: clamp(19px, 3vw, 28px); letter-spacing: -.04em; }
.channel-cta em { margin-top: 2px; color: var(--muted); font-size: 12px; font-style: normal; }
.channel-arrow { position: relative; z-index: 1; color: var(--cyan); font: 12px var(--mono); white-space: nowrap; }
.footer-brand { color:var(--ink); font-weight:700; }
.footer-brand .brand-mark { width:18px; height:18px; border-radius:5px; font-size:10px; margin-right:5px; }
.footer-badge { font:9px var(--mono); letter-spacing:.1em; }
.toast { --bs-toast-bg:var(--cyan); --bs-toast-color:#081219; --bs-toast-header-color:#081219; border:0; }
.toast.show { display:block; }
.toast-body { font-size:12px; font-weight:700; }

@media (max-width: 991px) {
  .hero-section { min-height:auto; }
  .hero-orbit { height:280px; order:-1; }
  .info-item { border-right:0; border-bottom:1px solid var(--line); }
  .info-item:last-child { border-bottom:0; }
  .footer-badge { margin-left:0 !important; width:100%; }
}
@media (max-width: 575px) {
  .status-meta { font-size:9px; }
  .status-meta .meta-divider, .status-meta #last-updated { display:none; }
  .hero-section { padding-top:1rem; }
  .hero-orbit { height:250px; }
  .orbit-one { width:260px; height:155px; }
  .orbit-two { width:155px; height:260px; }
  .orbit-core { width:90px; height:90px; }
  .core-symbol { font-size:34px; }
  h1 { font-size:2.7rem; }
  .lead br { display:none; }
  .section-heading { align-items:flex-start !important; flex-direction:column; }
  .search-wrap { max-width:none; width:100%; }
  .code-tabs { flex-direction:row !important; }
  .code-tabs .nav-link { flex:1; text-align:center; }
  .footer { gap:12px; }
  .channel-cta { align-items: flex-start !important; flex-direction: column; }
  .channel-arrow { margin-left: 61px; }
}