:root { --bg:#0a1120; --surface:#111c30; --surface2:#16233b; --line:#263754; --text:#edf4ff; --muted:#93a5c4; --accent:#77e7b5; --accent2:#37c98f; --danger:#ff8fa0; --shadow:0 20px 52px rgba(0,0,0,.26); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--text); background:var(--bg); }
* { box-sizing:border-box; } body { margin:0; min-width:320px; min-height:100vh; background:radial-gradient(circle at 92% 2%,rgba(65,205,149,.12),transparent 32rem),var(--bg); } button,input,textarea,select { font:inherit; } button { cursor:pointer; }
.app-shell { min-height:100vh; display:flex; }.sidebar { width:248px; position:fixed; inset:0 auto 0 0; padding:29px 16px 20px; display:flex; flex-direction:column; border-right:1px solid var(--line); background:rgba(9,16,30,.84); backdrop-filter:blur(18px); }.brand { color:var(--text); text-decoration:none; display:flex; align-items:center; gap:11px; padding:0 12px 30px; font-size:18px; font-weight:760; letter-spacing:-.035em; }.brand small { display:block; margin-top:2px; color:var(--muted); letter-spacing:.14em; font-size:9px; }.brand-mark { width:31px; height:31px; border-radius:10px; display:grid; place-items:center; color:#08251a; background:linear-gradient(135deg,#b9ffe0,#38c890); font-weight:900; font-size:18px; box-shadow:0 8px 18px rgba(50,202,143,.25); }.brand-mark.large { width:43px; height:43px; border-radius:14px; font-size:22px; margin-bottom:15px; }.nav { display:grid; gap:5px; }.nav-link { color:var(--muted); padding:11px 12px; display:flex; gap:11px; align-items:center; border-radius:9px; text-decoration:none; font-size:14px; font-weight:620; transition:.16s; }.nav-link span { width:16px; text-align:center; font-size:16px; }.nav-link b { margin-left:auto; padding:2px 7px; border-radius:20px; background:#22324d; color:#bdcae0; font-size:10px; }.nav-link:hover,.nav-link.active { background:#182842; color:var(--text); }.nav-link.active { box-shadow:inset 2px 0 var(--accent); }.sidebar-footer { margin:auto 12px 0; color:#8496b4; border-top:1px solid var(--line); padding-top:16px; font-size:11px; }.sidebar-footer p { margin:9px 0 0; line-height:1.5; }.local-badge { padding:3px 6px; color:#baf8dc; background:rgba(95,223,166,.12); border-radius:5px; font-size:10px; font-weight:700; }.main { width:calc(100% - 248px); max-width:1490px; margin-left:248px; padding:37px clamp(24px,4vw,64px) 64px; }.topbar { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:31px; }.eyebrow { margin:0 0 9px; color:#78ae9d; font-size:10px; line-height:1; font-weight:760; letter-spacing:.15em; } h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:0; font-size:28px; letter-spacing:-.045em; } h2 { font-size:20px; letter-spacing:-.032em; margin-bottom:0; } h3 { margin-bottom:11px; font-size:14px; }.connection-indicator { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:12px; }.connection-indicator i { width:8px; height:8px; border-radius:50%; background:#61708b; }.connection-indicator i.online { background:var(--accent); box-shadow:0 0 0 4px rgba(115,231,177,.11); }.connection-indicator i.error { background:var(--danger); }.quiet-button { padding:7px 10px; color:#bdcce3; background:transparent; border:1px solid #334763; border-radius:8px; font-size:11px; }.quiet-button:hover { color:white; background:#1b2b45; }.view { display:none; animation:fade .18s ease; }.view.active { display:block; } @keyframes fade { from { opacity:.5; transform:translateY(5px) } to { opacity:1; transform:none } }
.panel,.metric-card { border:1px solid var(--line); border-radius:13px; background:linear-gradient(145deg,rgba(24,38,64,.82),rgba(14,23,41,.91)); box-shadow:var(--shadow); }.hero { display:flex; align-items:center; justify-content:space-between; padding:29px; margin-bottom:18px; gap:26px; background:linear-gradient(120deg,rgba(30,70,76,.86),rgba(17,29,49,.88) 60%); }.hero h2 { font-size:25px; }.hero p:not(.eyebrow) { max-width:650px; color:#afc0da; font-size:13px; line-height:1.7; margin:13px 0 0; }.primary-button { padding:10px 14px; border:0; border-radius:8px; background:linear-gradient(135deg,#a9fbd5,#4ace9a); color:#082117; font-weight:800; font-size:12px; box-shadow:0 8px 20px rgba(50,205,144,.18); white-space:nowrap; }.primary-button:hover { filter:brightness(1.06); }.metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:18px; }.metric-card { min-height:126px; padding:18px; display:flex; flex-direction:column; }.metric-card span { color:var(--muted); font-size:12px; }.metric-card strong { margin:12px 0 auto; font-size:28px; letter-spacing:-.06em; }.metric-card small { color:#879ab9; font-size:11px; }.metric-card.accent strong { color:var(--accent); }.grid { display:grid; gap:18px; }.two-columns { grid-template-columns:1fr 1fr; }.panel { padding:22px; }.panel-heading,.section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }.panel-heading { margin-bottom:20px; }.details { margin:0; }.details div { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:12px 0; border-top:1px solid rgba(64,85,119,.48); }.details dt { color:var(--muted); font-size:12px; }.details dd { margin:0; text-align:right; color:#d6e1f3; font:11px "SFMono-Regular",Consolas,monospace; overflow-wrap:anywhere; }.steps { list-style:none; padding:0; margin:0; display:grid; gap:12px; color:#bcc9dd; font-size:12px; }.steps li { display:flex; align-items:center; gap:11px; }.steps span { width:22px; height:22px; display:grid; place-items:center; border-radius:50%; color:#9af2c7; background:rgba(98,223,164,.12); font-size:10px; font-weight:800; }.section-head { align-items:center; margin-bottom:18px; }.section-head p { margin:0; max-width:720px; color:var(--muted); font-size:13px; line-height:1.65; }.section-head code,.guide-panel code,.connection-card code { color:#b8f6d9; font:11px "SFMono-Regular",Consolas,monospace; }.table-panel { padding:0; overflow:hidden; }.table-wrap { overflow:auto; } table { width:100%; min-width:700px; border-collapse:collapse; } th { padding:13px 18px; background:rgba(9,17,31,.46); color:#899ab6; text-align:left; font-size:10px; letter-spacing:.08em; } td { padding:15px 18px; border-top:1px solid rgba(57,77,108,.55); color:#d3ddef; font-size:12px; } .empty { text-align:center; color:var(--muted); padding:35px; }.model-id { color:#bbf7da; font:12px "SFMono-Regular",Consolas,monospace; }.model-button { padding:5px 8px; color:#b3c3dd; background:transparent; border:1px solid #324760; border-radius:6px; font-size:10px; }.model-button:hover { color:white; background:#20334e; }.playground-grid { grid-template-columns:1fr 1fr; }.request-form { display:grid; align-content:start; gap:13px; }.request-form .panel-heading { margin-bottom:3px; }.method-pill { padding:4px 7px; color:#ffdb9e; background:rgba(247,181,72,.13); border-radius:5px; font:700 10px "SFMono-Regular",Consolas,monospace; }.request-form label,.connection-card label { display:grid; gap:7px; color:#b9c8df; font-size:12px; }.request-form select,.request-form textarea,.connection-card input { width:100%; color:var(--text); background:#0a1425; border:1px solid #344962; border-radius:8px; padding:10px; outline:0; font-size:12px; }.request-form select:focus,.request-form textarea:focus,.connection-card input:focus { border-color:#5ac296; box-shadow:0 0 0 3px rgba(81,202,150,.12); }.request-form textarea { resize:vertical; font:11px/1.6 "SFMono-Regular",Consolas,monospace; }.form-actions { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }.response-panel { min-width:0; }.response-status { color:#94a6c2; font-size:11px; }.response-status.success { color:#aaf0ce; }.response-status.error { color:#ffc2c9; }.response-panel pre { margin:0; min-height:382px; max-height:640px; overflow:auto; padding:14px; border:1px solid #2a3d5a; border-radius:8px; background:#091323; color:#c9d7eb; white-space:pre-wrap; overflow-wrap:anywhere; font:11px/1.65 "SFMono-Regular",Consolas,monospace; }.guide-panel { max-width:940px; }.guide-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:22px; }.guide-grid>div { padding:17px; border:1px solid rgba(59,80,113,.64); background:rgba(8,17,31,.32); border-radius:9px; }.guide-grid ul { padding-left:17px; margin:0; color:#acbbd4; font-size:12px; line-height:1.9; }.notice { margin:16px 0 0; padding:12px; border-radius:8px; color:#d6e3f4; background:rgba(98,149,218,.1); border-left:2px solid #77aee9; font-size:12px; line-height:1.6; }.modal-mask { position:fixed; z-index:10; inset:0; display:grid; place-items:center; padding:20px; background:rgba(4,9,17,.76); backdrop-filter:blur(10px); }.modal-mask.hidden { display:none; }.connection-card { width:min(430px,100%); padding:32px; border:1px solid #2d4261; border-radius:17px; background:linear-gradient(145deg,#17263e,#0d1729); box-shadow:0 30px 90px rgba(0,0,0,.5); }.connection-card h2 { margin-bottom:11px; font-size:24px; }.connection-card p:not(.eyebrow):not(.form-error) { color:#9dadc8; font-size:12px; line-height:1.65; }.connection-card label { margin:22px 0 5px; }.form-error { min-height:18px; margin:0; color:#ffbac3!important; font-size:11px!important; }.toast { position:fixed; right:24px; bottom:24px; z-index:12; max-width:min(390px,calc(100vw - 48px)); padding:12px 14px; border-radius:9px; color:#0a2f1e; background:#dffdeb; box-shadow:0 16px 40px rgba(0,0,0,.28); font-size:12px; font-weight:650; opacity:0; transform:translateY(12px); pointer-events:none; transition:.2s; }.toast.visible { opacity:1; transform:none; }.toast.error { color:#551622; background:#ffdde2; }
.account-grid { align-items:start; }.compact-table { margin-top:18px; border:1px solid rgba(57,77,108,.55); border-radius:8px; }.compact-table table { min-width:560px; }.account-form,.settings-form { display:grid; gap:14px; }.account-form label,.settings-form label,.auth-card label { display:grid; gap:7px; color:#b9c8df; font-size:12px; }.account-form input,.account-form textarea,.settings-form input,.auth-card input { width:100%; color:var(--text); background:#0a1425; border:1px solid #344962; border-radius:8px; padding:10px; outline:0; font-size:12px; }.account-form input:focus,.account-form textarea:focus,.settings-form input:focus,.auth-card input:focus { border-color:#5ac296; box-shadow:0 0 0 3px rgba(81,202,150,.12); }.account-form textarea { resize:vertical; font:11px/1.6 "SFMono-Regular",Consolas,monospace; }.form-copy { margin:0; color:var(--muted); font-size:12px; line-height:1.6; }.compact-notice { margin:0; }.token-safe { color:#aaf0ce; font-size:11px; }.token-name { color:var(--text); font-size:12px; font-weight:700; }.table-actions { display:flex; gap:7px; justify-content:flex-end; }.danger-button { color:#ffb9c3; border-color:#6f3a47; }.danger-button:hover { background:#3a1d27; }
.model-tabs-panel { padding:20px 18px; margin-bottom:28px; }.model-tabs { display:flex; align-items:stretch; gap:8px; overflow-x:auto; margin:2px 0 14px; padding-bottom:2px; }.model-tab { min-width:max-content; display:grid; gap:2px; padding:8px 11px; color:var(--muted); background:var(--surface2); border:1px solid var(--line); border-radius:8px; font-size:12px; font-weight:700; text-align:left; }.model-tab small { color:inherit; font-size:10px; font-weight:500; }.model-tab:hover { color:var(--text); border-color:var(--accent); }.model-tab.active { color:var(--accent); border-color:var(--accent); background:rgba(81,202,150,.1); box-shadow:inset 0 0 0 1px rgba(81,202,150,.1); }
.token-usage { display:grid; gap:3px; color:var(--muted); font-size:10px; line-height:1.45; }.usage-problem { color:var(--danger)!important; font-weight:650; }
.table-meta { display:inline-block; margin-top:4px; color:var(--muted); font:10px "SFMono-Regular",Consolas,monospace; overflow-wrap:anywhere; }.gateway-log-table { min-width:980px; } #generatedGatewayKeyRow { display:grid; gap:10px; }
.settings-form { width:min(620px,100%); padding:30px; }.settings-form h2 { margin-bottom:0; }.settings-form .brand-mark { margin-bottom:0; }.auth-screen { position:fixed; z-index:30; inset:0; display:grid; place-items:center; padding:20px; background:rgba(4,9,17,.76); backdrop-filter:blur(10px); }.auth-screen.hidden { display:none; }.auth-card { width:min(430px,100%); display:grid; gap:14px; padding:32px; border:1px solid #2d4261; border-radius:17px; background:linear-gradient(145deg,#17263e,#0d1729); box-shadow:0 30px 90px rgba(0,0,0,.5); }.auth-card h2 { margin:0; font-size:24px; }.auth-card p:not(.eyebrow):not(.form-error) { margin:0; color:#9dadc8; font-size:12px; line-height:1.65; }
@media (max-width:930px) { .sidebar { width:205px; }.main { width:calc(100% - 205px); margin-left:205px; padding:30px 24px 52px; }.metrics { grid-template-columns:1fr 1fr; }.two-columns,.playground-grid,.guide-grid { grid-template-columns:1fr; } }
@media (max-width:620px) { .app-shell { display:block; }.sidebar { position:sticky; z-index:3; top:0; width:100%; height:auto; padding:13px 15px; flex-direction:row; align-items:center; border-right:0; border-bottom:1px solid var(--line); }.brand { padding:0; font-size:15px; }.brand-mark { width:26px; height:26px; border-radius:8px; font-size:15px; }.brand small,.sidebar-footer { display:none; }.nav { display:flex; gap:2px; margin-left:auto; }.nav-link { padding:8px; font-size:0; }.nav-link span { font-size:16px; }.nav-link b { display:none; }.main { width:100%; margin:0; padding:24px 16px 42px; }.topbar { align-items:center; margin-bottom:23px; }.topbar h1 { font-size:24px; }.connection-indicator span { display:none; }.hero { padding:22px; align-items:flex-start; flex-direction:column; }.hero h2 { font-size:22px; }.metrics { gap:10px; }.metric-card { min-height:108px; padding:14px; }.metric-card strong { font-size:24px; }.panel { padding:17px; }.table-panel { padding:0; }.section-head { flex-direction:column; align-items:stretch; }.section-head .primary-button { align-self:start; }.connection-card { padding:26px; } }
/* Component display rules must not override semantic hidden state. */
[hidden] { display: none !important; }

/* Light workspace theme */
:root { --bg:#f4f6f8; --surface:#ffffff; --surface2:#f8fafc; --line:#dfe5ec; --text:#182230; --muted:#667085; --accent:#2563eb; --accent2:#1d4ed8; --danger:#d92d20; --shadow:0 10px 30px rgba(16,24,40,.07); color:var(--text); background:var(--bg); }
body { background:radial-gradient(circle at 94% 0,rgba(37,99,235,.07),transparent 30rem),var(--bg); }
.sidebar { background:rgba(255,255,255,.94); border-color:var(--line); box-shadow:8px 0 24px rgba(16,24,40,.025); }
.brand-mark { color:#fff; background:linear-gradient(135deg,#3b82f6,#1d4ed8); box-shadow:0 8px 18px rgba(37,99,235,.2); }
.nav-link b { color:#475467; background:#eef2f6; }
.nav-link:hover,.nav-link.active { color:#1d4ed8; background:#edf4ff; }
.sidebar-footer { color:#667085; border-color:var(--line); }.local-badge { color:#175cd3; background:#eff6ff; }
.eyebrow { color:#3970cf; }.connection-indicator i { background:#98a2b3; }.connection-indicator i.online { box-shadow:0 0 0 4px rgba(37,99,235,.1); }
.quiet-button { color:#475467; background:#fff; border-color:#cfd8e3; }.quiet-button:hover { color:#1d4ed8; background:#f5f8ff; border-color:#a9c4f7; }
.panel,.metric-card { background:var(--surface); border-color:var(--line); }.hero { background:linear-gradient(120deg,#f8fbff,#eef5ff); }.hero p:not(.eyebrow) { color:#526173; }
.primary-button { color:#fff; background:linear-gradient(135deg,#3b82f6,#2563eb); box-shadow:0 8px 20px rgba(37,99,235,.18); }.primary-button:hover { filter:brightness(.98); }
.metric-card small { color:#667085; }.metric-card.accent strong { color:#2563eb; }.details div { border-color:#e7ecf2; }.details dd { color:#344054; }.steps { color:#475467; }.steps span { color:#1d4ed8; background:#eaf2ff; }
.section-head code,.guide-panel code,.connection-card code { color:#175cd3; } th { color:#667085; background:#f7f9fc; } td { color:#344054; border-color:#e7ecf2; }.model-id { color:#175cd3; }
.model-button { color:#475467; background:#fff; border-color:#cfd8e3; }.model-button:hover { color:#1d4ed8; background:#f5f8ff; border-color:#a9c4f7; }
.request-form label,.connection-card label,.account-form label,.settings-form label,.auth-card label { color:#475467; }.request-form select,.request-form textarea,.connection-card input,.account-form input,.account-form textarea,.settings-form input,.auth-card input { color:#182230; background:#fff; border-color:#cfd8e3; }.request-form select:focus,.request-form textarea:focus,.connection-card input:focus,.account-form input:focus,.account-form textarea:focus,.settings-form input:focus,.auth-card input:focus { border-color:#5b8def; box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.response-status { color:#667085; }.response-status.success,.token-safe { color:#067647; }.response-status.error { color:#b42318; }.response-panel pre { color:#344054; background:#f8fafc; border-color:#dfe5ec; }.guide-grid>div { background:#f8fafc; border-color:#e1e8f0; }.guide-grid ul { color:#475467; }
.notice { color:#344054; background:#eff6ff; border-left-color:#4f8df4; }.modal-mask,.auth-screen { background:rgba(16,24,40,.34); }.connection-card,.auth-card { background:#fff; border-color:#dfe5ec; box-shadow:0 28px 80px rgba(16,24,40,.2); }.connection-card p:not(.eyebrow):not(.form-error),.auth-card p:not(.eyebrow):not(.form-error) { color:#667085; }.form-error { color:#b42318!important; }
.toast { color:#075c37; background:#ecfdf3; box-shadow:0 16px 40px rgba(16,24,40,.18); }.toast.error { color:#b42318; background:#fef3f2; }.compact-table { border-color:#e1e8f0; }.model-tab { color:#475467; background:#f8fafc; border-color:#d7e0eb; }.model-tab:hover { color:#1d4ed8; border-color:#8fb3ef; background:#f5f8ff; }.model-tab.active { color:#175cd3; border-color:#86abea; background:#edf4ff; box-shadow:inset 0 0 0 1px rgba(37,99,235,.08); }.token-name { color:#344054; }.danger-button { color:#b42318; border-color:#f0b7b1; }.danger-button:hover { color:#fff; background:#d92d20; border-color:#d92d20; }