@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;600;700;800&display=swap');

:root { --ink:#111827; --muted:#6b7280; --muted-2:#9ca3af; --line:#e5e7eb; --surface:#fff; --wash:#f9fafb; --mint:rgba(99,102,241,.12); --green:#4f46e5; --green-dark:#818cf8; --coral:#ef4444; --yellow:#f59e0b; --blue:#6366f1; --shadow:0 2px 10px rgba(0,0,0,.04); }
html { --font-scale: 1; --app-zoom: 1; --modal-zoom: calc(1 / var(--app-zoom)); }
html.dark { --ink:#f3f4f6; --muted:#9ca3af; --muted-2:#6b7280; --line:#1f2937; --surface:#111827; --wash:#0b0f19; --mint:rgba(129,140,248,.16); --green:#818cf8; --green-dark:#a5b4fc; --coral:#f87171; --yellow:#fbbf24; --blue:#818cf8; --shadow:none; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; font-family:'Inter','Noto Sans SC',sans-serif; color:var(--ink); background:var(--wash); }
button { font:inherit; cursor:pointer; color:inherit; }
button:focus-visible { outline:3px solid rgba(14,165,233,.28); outline-offset:2px; }
.app-shell { min-height:100vh; display:flex; }
.sidebar { width:258px; min-height:100vh; background:#fbfcfa; border-right:1px solid var(--line); padding:27px 16px 18px; display:flex; flex-direction:column; flex-shrink:0; }
.brand-block { display:flex; align-items:center; gap:11px; padding:0 12px 27px; }
.brand-mark { width:35px; height:35px; border-radius:11px; background:var(--ink); display:flex; align-items:center; justify-content:center; gap:3px; transform:rotate(-5deg); }
.brand-mark span { width:4px; height:17px; border-radius:4px; background:#b8e8d0; display:block; transform:rotate(18deg); }
.brand-mark span:nth-child(2) { height:22px; background:#fff; }.brand-mark span:nth-child(3) { height:13px; background:#ec745f; }
.brand-name { font-size:17px; font-weight:800; letter-spacing:-.4px; }.brand-name span { color:var(--green); font-size:11px; letter-spacing:1.3px; margin-left:3px; }.brand-caption { font:500 8px 'DM Mono',monospace; color:var(--muted-2); letter-spacing:1.4px; margin-top:2px; }
.workspace-switcher { height:52px; border:1px solid var(--line); border-radius:11px; padding:8px 10px; display:flex; align-items:center; gap:9px; margin-bottom:22px; background:var(--surface); }.workspace-avatar,.user-avatar { display:grid; place-items:center; border-radius:8px; font-weight:700; }.workspace-avatar { width:32px; height:32px; background:#f0c9a7; color:#604530; font-size:13px; }.workspace-copy { display:flex; flex-direction:column; flex:1; min-width:0; }.workspace-copy strong { font-size:12px; }.workspace-copy small { color:var(--muted); font-size:10px; margin-top:3px; }.icon-button { background:transparent; border:0; color:var(--muted-2); padding:5px; line-height:1; }.nav-label { font:500 10px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:1.1px; color:#a3aea9; padding:0 12px 9px; }.secondary-label { margin-top:25px; }.main-nav { display:flex; flex-direction:column; gap:4px; }.nav-item { border:0; background:transparent; border-radius:8px; padding:11px 12px; color:#6f7e77; font-size:12px; font-weight:600; display:flex; align-items:center; gap:11px; text-align:left; }.nav-item:hover { background:#f0f5f1; color:var(--ink); }.nav-item.active { color:var(--green-dark); background:#e7f4ed; box-shadow:inset 3px 0 0 var(--green); }.nav-icon { width:17px; color:currentColor; font-size:16px; display:inline-grid; place-items:center; }.status-dot { width:7px; height:7px; border-radius:50%; background:#47b87a; margin-left:5px; margin-right:5px; }.sidebar-bottom { margin-top:auto; }.support-card { display:flex; gap:9px; align-items:center; padding:13px 9px; border:1px solid #dcebe1; background:#f2faf4; border-radius:10px; }.support-icon { width:22px; height:22px; border:1px solid #bbdfc8; color:var(--green); border-radius:7px; display:grid; place-items:center; font-weight:700; font-size:12px; }.support-card > div:nth-child(2) { display:flex; flex-direction:column; gap:2px; flex:1; }.support-card strong { font-size:11px; }.support-card span { color:var(--muted); font-size:9px; }.arrow-button { border:0; background:transparent; color:var(--green); font-size:17px; }.user-row { border-top:1px solid var(--line); margin-top:17px; padding:16px 4px 0; display:flex; align-items:center; gap:8px; }.user-avatar { width:28px; height:28px; background:#d4e7ed; color:#355967; font-size:11px; }.user-meta { flex:1; display:flex; flex-direction:column; gap:3px; min-width:0; }.user-meta strong { font-size:11px; }.user-meta span { color:var(--muted); font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.main-content { flex:1; min-width:0; }.topbar { height:78px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(22px,4.1vw,60px); border-bottom:1px solid var(--line); background:rgba(245,247,244,.85); }.breadcrumbs { display:flex; align-items:center; gap:9px; font-size:11px; color:var(--muted-2); }.breadcrumbs b { color:#c8d0cb; font-weight:400; }.breadcrumbs strong { color:var(--ink); }.topbar-actions { display:flex; align-items:center; gap:13px; }.demo-pill { color:#8b7862; font-size:10px; background:#fff6e9; border:1px solid #f3e0c3; border-radius:100px; padding:7px 10px; display:flex; align-items:center; gap:5px; }.demo-pill span { display:inline-block; width:5px; height:5px; border-radius:50%; background:#e9b45a; }.outline-button { background:var(--surface); border:1px solid var(--line); border-radius:7px; padding:8px 11px; font-size:11px; font-weight:600; box-shadow:0 2px 5px rgba(35,50,43,.03); }.outline-button span { color:var(--green); font-size:15px; margin-left:6px; }.notification-button { border:0; background:transparent; color:#788680; font-size:20px; position:relative; padding:3px 5px; }.notification-button i { display:block; position:absolute; width:5px; height:5px; top:1px; right:2px; background:var(--coral); border-radius:50%; border:1px solid var(--wash); }.mobile-menu { display:none; border:0; background:none; font-size:19px; }.page-wrap { max-width:1280px; padding:42px clamp(22px,4.1vw,60px) 30px; margin:0 auto; }.page-heading { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:27px; }.eyebrow { color:var(--green); font:500 10px 'DM Mono',monospace; letter-spacing:1.3px; text-transform:uppercase; margin-bottom:9px; }.page-heading h1 { font-size:30px; line-height:1.1; margin:0; letter-spacing:-1.1px; }.page-heading p { color:var(--muted); font-size:12px; margin:9px 0 0; }.date-select { display:flex; align-items:center; border:1px solid var(--line); background:var(--surface); border-radius:7px; padding:8px 10px; font-size:11px; color:var(--muted); }.date-select select { border:0; background:none; color:var(--ink); font:inherit; outline:0; margin-left:5px; }.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; }.metric-card { background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:17px 18px; min-height:121px; }.metric-card .metric-label { display:flex; justify-content:space-between; color:var(--muted); font-size:10px; }.metric-card .metric-label span:last-child { width:21px; height:21px; border-radius:7px; display:grid; place-items:center; color:var(--green); background:var(--mint); font-size:13px; }.metric-value { font-size:26px; letter-spacing:-1px; font-weight:700; margin-top:13px; }.metric-value small { font-size:12px; letter-spacing:0; color:var(--muted); font-weight:500; margin-left:3px; }.metric-trend { font-size:10px; color:var(--green); margin-top:6px; }.metric-trend.down { color:var(--coral); }.content-grid { margin-top:15px; display:grid; grid-template-columns:1.45fr 1fr; gap:15px; }.panel { border:1px solid var(--line); background:var(--surface); border-radius:10px; padding:20px; }.panel-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:19px; }.panel-heading h2 { font-size:14px; margin:0; letter-spacing:-.3px; }.panel-heading p { color:var(--muted); margin:5px 0 0; font-size:10px; }.text-button { background:none; border:0; color:var(--green); font-size:10px; font-weight:600; }.chart-legend { display:flex; align-items:center; gap:14px; color:var(--muted); font-size:9px; }.chart-legend span { display:flex; align-items:center; gap:5px; }.legend-line { width:10px; height:3px; background:var(--green); border-radius:3px; }.legend-line.coral { background:var(--coral); }.chart { position:relative; height:200px; padding:13px 0 22px 29px; }.chart-lines { position:absolute; inset:13px 0 22px 29px; background:repeating-linear-gradient(to bottom, transparent 0, transparent 39px, #edf1ee 40px); }.chart svg { width:100%; height:100%; position:relative; overflow:visible; }.axis-labels { position:absolute; left:0; top:10px; bottom:20px; display:flex; flex-direction:column; justify-content:space-between; color:#adb7b2; font:9px 'DM Mono',monospace; }.x-labels { position:absolute; left:29px; right:0; bottom:0; display:flex; justify-content:space-between; color:#adb7b2; font:9px 'DM Mono',monospace; }.activity-list { display:flex; flex-direction:column; gap:17px; }.activity-row { display:flex; align-items:center; gap:9px; }.activity-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }.activity-dot.green { background:#5cb987; }.activity-dot.blue { background:#77a6bf; }.activity-dot.orange { background:#e6af54; }.activity-copy { display:flex; flex-direction:column; gap:4px; flex:1; min-width:0; }.activity-copy strong { font-size:11px; font-weight:600; }.activity-copy span { color:var(--muted); font-size:9px; }.activity-amount { color:var(--green-dark); font:500 11px 'DM Mono',monospace; }.panel-note { border-top:1px solid var(--line); padding-top:14px; margin-top:18px; display:flex; gap:9px; color:var(--muted); font-size:10px; line-height:1.6; }.panel-note b { color:var(--green); font-size:13px; }.quickstart { margin-top:15px; display:grid; grid-template-columns:1fr 1.15fr; gap:15px; }.quickstart-copy { background:var(--ink); color:white; border-radius:10px; padding:24px; position:relative; overflow:hidden; }.quickstart-copy:after { content:''; position:absolute; width:180px; height:180px; border:1px solid rgba(184,232,208,.2); border-radius:50%; right:-75px; bottom:-100px; box-shadow:0 0 0 18px rgba(184,232,208,.05),0 0 0 37px rgba(184,232,208,.035); }.quickstart-copy h2 { margin:0; font-size:17px; letter-spacing:-.4px; }.quickstart-copy p { color:#b3c4bc; font-size:11px; line-height:1.7; max-width:280px; margin:12px 0 22px; }.quickstart-copy button { border:1px solid #719c87; border-radius:6px; background:transparent; padding:8px 11px; color:#d5efe1; font-size:10px; position:relative; z-index:1; }.code-card { background:#202f2b; color:#d6ece1; border-radius:10px; padding:20px 22px; font:11px/1.8 'DM Mono',monospace; overflow:hidden; }.code-card .code-header { display:flex; justify-content:space-between; border-bottom:1px solid rgba(214,236,225,.15); padding-bottom:12px; margin-bottom:14px; color:#8dab9e; font-family:'Manrope',sans-serif; font-size:10px; }.code-card button { border:0; background:none; color:#a7dfbf; font-size:10px; }.code-comment { color:#719487; }.code-key { color:#f2c888; }.code-string { color:#a4d5f1; }.view-list { display:flex; flex-direction:column; gap:15px; }.view-list .panel { padding:22px; }.table-wrap { overflow:auto; }.data-table { border-collapse:collapse; width:100%; font-size:11px; }.data-table th { color:var(--muted); font-size:10px; text-align:left; font-weight:500; padding:11px 10px; border-bottom:1px solid var(--line); white-space:nowrap; }.data-table td { padding:14px 10px; border-bottom:1px solid #edf1ee; white-space:nowrap; }.data-table tbody tr:last-child td { border-bottom:0; }.model-cell { display:flex; align-items:center; gap:9px; }.model-badge { width:26px; height:26px; border-radius:7px; display:grid; place-items:center; font:600 10px 'DM Mono',monospace; }.model-badge.green { background:#dff3e8; color:#15734f; }.model-badge.blue { background:#e3eff5; color:#396a85; }.model-badge.gold { background:#f9eedb; color:#a26a27; }.availability { display:inline-flex; align-items:center; gap:5px; color:var(--green); }.availability:before { content:''; width:5px; height:5px; border-radius:50%; background:#51b47d; }.tag { display:inline-block; border-radius:100px; font-size:9px; padding:4px 8px; color:var(--muted); background:#f1f4f2; }.tag.green { background:#e7f4ed; color:var(--green); }.key-row { display:flex; align-items:center; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--line); }.key-row:last-child { border-bottom:0; }.key-info { display:flex; align-items:center; gap:12px; }.key-icon { width:31px; height:31px; display:grid; place-items:center; border-radius:8px; background:#edf4f0; color:var(--green); font-size:16px; }.key-info strong { display:block; font-size:11px; }.key-info span { display:block; margin-top:4px; color:var(--muted); font:10px 'DM Mono',monospace; }.key-actions { display:flex; gap:7px; align-items:center; }.small-button { background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:6px 9px; font-size:10px; color:var(--muted); }.small-button.primary { background:var(--green); color:white; border-color:var(--green); }.status-banner { border:1px solid #cde9d8; background:#edf9f1; border-radius:10px; display:flex; align-items:center; gap:11px; padding:14px 16px; }.status-check { width:26px; height:26px; display:grid; place-items:center; background:#c8efd6; color:var(--green); border-radius:50%; }.status-banner strong { font-size:12px; }.status-banner span { display:block; color:var(--muted); font-size:10px; margin-top:3px; }.status-time { margin-left:auto; color:var(--green); font:10px 'DM Mono',monospace; }.docs-layout { display:grid; grid-template-columns:220px 1fr; gap:15px; }.docs-nav { display:flex; flex-direction:column; gap:4px; }.docs-nav button { border:0; background:transparent; text-align:left; padding:9px 11px; border-radius:6px; color:var(--muted); font-size:11px; }.docs-nav button.active { color:var(--green); background:#e8f5ed; font-weight:600; }.doc-content h2 { margin:0 0 9px; font-size:20px; }.doc-content p { color:var(--muted); font-size:11px; line-height:1.75; }.endpoint { border:1px solid var(--line); border-radius:7px; display:flex; align-items:center; gap:9px; padding:10px 12px; margin-top:12px; font:10px 'DM Mono',monospace; }.method { color:var(--green); font-weight:600; }.footer { max-width:1280px; margin:0 auto; padding:0 clamp(22px,4.1vw,60px) 25px; color:#a2ada7; font-size:9px; display:flex; justify-content:space-between; }.footer b { color:#c3cbc6; font-weight:400; margin:0 5px; }.footer button { border:0; background:none; padding:0; color:var(--green); font-size:9px; }.toast { position:fixed; bottom:25px; left:50%; transform:translate(-50%, 20px); background:var(--ink); color:white; font-size:14px; font-weight:500; padding:13px 20px; border-radius:9px; opacity:0; pointer-events:none; max-width:88vw; letter-spacing:.2px; transition:.25s ease; z-index:20; box-shadow:var(--shadow); }.toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width:960px) { .sidebar { width:220px; }.metric-grid { grid-template-columns:repeat(2,1fr); }.content-grid,.quickstart { grid-template-columns:1fr; } }
@media (max-width:720px) { .sidebar { position:fixed; z-index:10; left:-270px; transition:left .25s ease; box-shadow:var(--shadow); }.sidebar.open { left:0; }.mobile-menu { display:block; }.topbar { height:62px; padding:0 18px; gap:13px; justify-content:flex-start; }.breadcrumbs { flex:1; }.topbar-actions { gap:7px; }.demo-pill { display:none; }.outline-button { padding:7px 8px; font-size:10px; }.page-wrap { padding:18px 18px 20px; }.page-heading { align-items:flex-start; gap:12px; flex-direction:column; }.page-heading h1 { font-size:24px; }.date-select { align-self:stretch; justify-content:space-between; }.metric-grid { grid-template-columns:1fr 1fr; gap:9px; }.metric-card { padding:14px; min-height:109px; }.metric-value { font-size:22px; }.panel { padding:16px; }.footer { padding:0 18px 20px; flex-direction:column; gap:7px; }.docs-layout { grid-template-columns:1fr; }.docs-nav { flex-direction:row; overflow:auto; }.docs-nav button { white-space:nowrap; }.status-time { display:none; } }
@media (max-width:420px) { .metric-grid { grid-template-columns:1fr; }.topbar .outline-button { display:none; }.chart { height:180px; } }

/* Nexus reference treatment: quiet neutral surfaces, blue system accent, compact admin density. */
body { font-family:'Inter','Noto Sans SC',sans-serif; background:var(--wash); color:var(--ink); transition:background .2s ease,color .2s ease; }
.sidebar { width:256px; background:var(--surface); border-right-color:var(--line); padding:0 0 16px; }
.brand-block { height:64px; padding:0 25px; border-bottom:1px solid var(--line); }
.brand-mark { width:24px; height:24px; border-radius:0; background:transparent; transform:none; gap:0; position:relative; }
.brand-mark:before { content:none; }
.brand-mark span { display:none; }
.brand-mark svg { width:24px; height:24px; color:var(--blue); display:block; }
.brand-name { color:var(--blue); font-size:17px; letter-spacing:-.4px; }.brand-name span { color:#9ca3af; font-size:11px; letter-spacing:0; font-weight:400; }
.brand-caption { display:none; }
.workspace-switcher { height:52px; margin:14px 16px 20px; background:var(--wash); border-color:var(--line); border-radius:8px; }
.workspace-avatar { background:var(--mint); color:var(--blue); border-radius:4px; }
.workspace-copy strong { color:var(--ink); }
.nav-label { color:#9ca3af; padding-left:24px; }.secondary-label { margin-top:25px; }
.main-nav { padding:0 12px; }.nav-item { color:var(--muted); border-radius:6px; padding:9px 12px; gap:11px; font-size:12px; }.nav-item:hover { background:rgba(14,165,233,.06); color:var(--ink); }.nav-item.active { color:var(--green); background:rgba(14,165,233,.10); box-shadow:inset 3px 0 0 var(--blue); }
.support-card { margin:0 16px; background:rgba(14,165,233,.05); border-color:rgba(14,165,233,.14); }.user-row { margin:17px 16px 0; padding-left:0; padding-right:0; }.user-avatar { background:#e5e7eb; color:#4b5563; }
.topbar { height:56px; padding:0 clamp(22px,3.4vw,40px); background:var(--surface); border-bottom-color:var(--line); }.breadcrumbs { color:#6b7280; }.breadcrumbs strong { color:var(--ink); }
.accent-toggle,.theme-toggle { border:0; background:transparent; width:32px; height:32px; border-radius:6px; color:var(--muted); display:grid; place-items:center; }.accent-toggle:hover,.theme-toggle:hover { background:rgba(107,114,128,.12); color:var(--ink); }.accent-toggle span { width:14px; height:14px; border-radius:50%; background:var(--accent-dot,var(--blue)); border:2px solid var(--surface); box-shadow:0 0 0 1px var(--line); display:block; }
.demo-pill { background:var(--surface); border-color:#d1d5db; color:#4b5563; border-radius:6px; padding:8px 11px; }.demo-pill span { background:var(--yellow); }.outline-button { border-color:#d1d5db; border-radius:6px; background:var(--surface); color:var(--ink); }.outline-button:hover { background:var(--wash); }.outline-button span { color:var(--blue); }
.notification-button { display:none; }
.page-wrap { max-width:1024px; padding:20px clamp(22px,3.4vw,40px) 24px; }.page-heading { margin-bottom:18px; }.eyebrow { color:#9ca3af; letter-spacing:1.7px; }.page-heading h1 { font-size:26px; letter-spacing:-.9px; line-height:32px; }.page-heading p { color:var(--muted); }
.date-select { background:var(--surface); border-color:#d1d5db; border-radius:6px; }
.metric-grid { gap:12px; }.metric-card { border-color:var(--line); border-radius:10px; box-shadow:var(--shadow); }.metric-card .metric-label span:last-child { background:rgba(14,165,233,.12); color:var(--blue); }.metric-trend { color:#10b981; }.metric-trend.down { color:var(--coral); }
.content-grid,.quickstart { gap:14px; }.panel { border-color:var(--line); border-radius:10px; box-shadow:var(--shadow); }.panel-heading h2 { color:var(--ink); }.panel-heading p,.activity-copy span { color:var(--muted); }.chart-lines { background:repeating-linear-gradient(to bottom, transparent 0, transparent 39px, var(--line) 40px); }.chart svg path:first-child { stroke:var(--blue); }.legend-line { background:var(--blue); }.code-card { background:#111827; }.quickstart-copy { background:#111827; }
.data-table th { color:var(--muted); border-color:var(--line); }.data-table td { border-color:var(--line); }.text-button,.method,.availability,.activity-amount { color:var(--blue); }.availability:before { background:#10b981; }.tag.green { background:rgba(16,185,129,.12); color:#059669; }.key-icon { background:rgba(14,165,233,.1); color:var(--blue); }.status-banner { border-color:rgba(16,185,129,.25); background:rgba(16,185,129,.07); }.status-check { background:rgba(16,185,129,.18); color:#10b981; }
.footer { max-width:1024px; }.footer button { color:var(--blue); }
html.dark .workspace-avatar { background:rgba(14,165,233,.18); color:var(--blue); } html.dark .user-avatar { background:#374151; color:#d1d5db; } html.dark .outline-button,.dark .demo-pill { border-color:#374151; } html.dark .support-card { background:rgba(14,165,233,.08); border-color:rgba(56,189,248,.2); } html.dark .tag { background:#1f2937; } html.dark .tag.green { background:rgba(16,185,129,.15); color:#6ee7b7; } html.dark .status-banner { background:rgba(16,185,129,.11); }
.nav-label,.code-card,.key-info span,.activity-amount,.status-time,.endpoint,.axis-labels,.x-labels { font-family:'JetBrains Mono',monospace; }
.auth-card input[type=email],.auth-card input[type=password] { font-family:'Inter','Noto Sans SC',sans-serif; }

/* Typography calibration against the supplied Nexus reference. */
.brand-name { font-size:17px; line-height:22px; }.brand-name span { font-size:11px; }
.workspace-copy strong { font-size:12px; line-height:18px; }.workspace-copy small { font-size:10px; line-height:14px; }
.nav-label { font-size:10px; line-height:14px; }.nav-item { font-size:12px; line-height:18px; font-weight:600; }.nav-item.active { font-weight:600; }
.support-card strong { font-size:11px; line-height:16px; }.support-card span { font-size:10px; line-height:14px; }.user-meta strong { font-size:12px; line-height:18px; }.user-meta span { font-size:10px; line-height:14px; }
.breadcrumbs { font-size:12px; line-height:16px; }.page-heading h1 { font-size:30px; line-height:36px; }.page-heading p { font-size:14px; line-height:20px; }
.demo-pill,.outline-button { font-size:14px; line-height:20px; }.date-select { font-size:12px; line-height:16px; }
.metric-card .metric-label { font-size:12px; line-height:16px; }.metric-value { font-size:30px; line-height:36px; }.metric-value small { font-size:14px; }.metric-trend { font-size:12px; line-height:16px; }
.panel-heading h2 { font-size:16px; line-height:24px; font-weight:600; }.panel-heading p { font-size:13px; line-height:16px; }.chart-legend { font-size:12px; }.activity-copy strong { font-size:14px; line-height:20px; }.activity-copy span { font-size:13px; line-height:16px; }.activity-amount { font-size:12px; line-height:16px; }.panel-note { font-size:13px; line-height:18px; }
.data-table { font-size:14px; }.data-table th { font-size:12px; line-height:16px; }.key-info strong { font-size:14px; line-height:20px; }.key-info span { font-size:12px; line-height:16px; }.tag,.small-button { font-size:12px; line-height:16px; }.docs-nav button { font-size:14px; line-height:20px; }.doc-content p { font-size:14px; line-height:20px; }.footer { font-size:12px; line-height:16px; }.footer button { font-size:12px; line-height:16px; }

/* Reference interaction system: segmented controls, motion, hover lift, and status pulse. */
.brand-mark { width:32px; height:32px; border-radius:8px; background:var(--blue); color:#fff; display:grid; place-items:center; box-shadow:0 1px 3px rgba(0,0,0,.12); transition:background .2s ease,transform .2s ease,box-shadow .2s ease; }
.brand-mark:hover { transform:translateY(-1px); box-shadow:0 4px 10px color-mix(in srgb, var(--blue) 25%, transparent); }.brand-mark svg { width:18px; height:18px; color:#fff; }
.brand-name { color:var(--ink); }.brand-name span { color:#9ca3af; }
.auth-brand .brand-mark { width:32px; height:32px; background:var(--blue); }.auth-brand .brand-mark svg { color:#fff; }
.theme-controls { display:flex; align-items:stretch; border:1px solid var(--line); border-radius:8px; background:var(--surface); box-shadow:0 1px 2px rgba(0,0,0,.03); overflow:hidden; }.theme-controls .accent-toggle,.theme-controls .theme-toggle { border-radius:0; width:33px; height:33px; }.theme-controls .theme-toggle { border-left:1px solid var(--line); }.theme-controls button:hover { background:var(--wash); }
.primary-button { display:flex; align-items:center; gap:8px; border:1px solid transparent; border-radius:8px; padding:8px 14px; background:var(--green); color:#fff; font-size:14px; line-height:20px; font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.08); transition:background .2s ease,transform .2s ease,box-shadow .2s ease; }.primary-button:hover { background:var(--blue); transform:translateY(-1px); box-shadow:0 4px 10px color-mix(in srgb, var(--blue) 22%, transparent); }.primary-button span { font-size:18px; line-height:14px; }
.eyebrow { display:flex; align-items:center; gap:7px; }.eyebrow:before { content:''; width:7px; height:7px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 0 color-mix(in srgb, var(--blue) 30%, transparent); animation:status-pulse 2s infinite; }
.nav-item,.outline-button,.demo-pill,.small-button,.text-button,.panel,.metric-card,.key-row,.support-card { transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease; }.nav-item:hover { transform:translateX(2px); }.metric-card:hover,.panel:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(15,23,42,.07); }.key-row:hover { background:var(--wash); padding-left:8px; padding-right:8px; border-radius:8px; }.activity-row { transition:transform .2s ease; }.activity-row:hover { transform:translateX(4px); }.model-badge,.key-icon { transition:transform .25s ease,background-color .2s ease; }.model-cell:hover .model-badge,.key-info:hover .key-icon { transform:scale(1.08); }
.page-wrap > * { animation:page-enter .34s ease both; }.page-wrap > *:nth-child(2) { animation-delay:.04s; }.page-wrap > *:nth-child(3) { animation-delay:.08s; }.status-dot { animation:status-pulse 2s infinite; }.status-banner { border-left:4px solid #10b981; box-shadow:0 2px 10px rgba(0,0,0,.04); }.status-banner .status-time { font-size:28px; line-height:32px; font-weight:700; }.status-banner .status-time:after { content:' UPTIME (30 DAYS)'; display:block; color:var(--muted); font:600 11px/16px 'Inter',sans-serif; letter-spacing:1px; margin-top:4px; }
@keyframes page-enter { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } } @keyframes status-pulse { 0%,100% { box-shadow:0 0 0 0 color-mix(in srgb, var(--blue) 28%, transparent); } 50% { box-shadow:0 0 0 5px transparent; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }
.status-copy strong { display:block; font-size:20px; line-height:28px; }.status-copy span { display:block; color:var(--muted); font-size:14px; line-height:20px; margin-top:4px; }.status-copy b { color:#d1d5db; font-weight:400; margin:0 7px; }.status-panel { overflow:hidden; padding:0; }.status-panel .panel-heading { padding:18px 24px 16px; margin:0; border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--wash) 45%, transparent); }.refresh-pill { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; background:var(--mint); color:var(--green); border:1px solid color-mix(in srgb, var(--blue) 16%, transparent); font-size:12px; line-height:16px; }.status-component-list { display:flex; flex-direction:column; }.status-component-row { display:flex; align-items:center; gap:15px; min-height:88px; padding:18px 24px; border-bottom:1px solid var(--line); transition:background-color .2s ease; }.status-component-row:last-child { border-bottom:0; }.status-component-row:hover { background:var(--wash); }.component-icon { width:40px; height:40px; display:grid; place-items:center; flex:0 0 auto; border-radius:9px; background:var(--mint); border:1px solid color-mix(in srgb, var(--blue) 18%, transparent); color:var(--blue); font-size:20px; transition:transform .25s ease,background-color .2s ease; }.status-component-row:hover .component-icon { transform:scale(1.07); }.component-copy { min-width:190px; flex:1; }.component-copy strong { display:block; font-size:14px; line-height:20px; }.component-copy span { display:block; color:var(--muted); font:12px/16px 'JetBrains Mono',monospace; margin-top:4px; }.sparkline { width:150px; height:34px; opacity:.65; overflow:visible; }.sparkline path { fill:none; stroke:var(--blue); stroke-width:2; stroke-linecap:round; stroke-dasharray:260; stroke-dashoffset:260; animation:sparkline-draw 1.5s ease forwards; }.status-component-row .availability { min-width:53px; justify-content:flex-end; font-size:14px; line-height:20px; font-weight:500; }.status-component-row .availability:before { width:10px; height:10px; box-shadow:0 0 8px rgba(16,185,129,.4); }.status-banner { padding:22px 24px; min-height:107px; }.status-banner .status-check { width:48px; height:48px; font-size:22px; }.status-time { text-align:right; color:#10b981; }.status-time:after { white-space:nowrap; }
@keyframes sparkline-draw { to { stroke-dashoffset:0; } }
@media (max-width:720px) { .status-component-row { padding:16px; gap:10px; }.component-copy { min-width:0; }.sparkline { width:80px; }.status-banner .status-time { font-size:22px; }.status-copy strong { font-size:18px; }.status-copy span { font-size:12px; } }

/* Model catalog cards: make provider identity the primary visual signal. */
.model-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.model-card { min-width:0; display:flex; flex-direction:column; gap:15px; padding:19px; border:1px solid var(--line); border-radius:11px; background:var(--surface); transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; }
.model-card:hover { transform:translateY(-3px); border-color:color-mix(in srgb,var(--blue) 30%,var(--line)); box-shadow:0 10px 24px rgba(15,23,42,.09); }
.model-card[hidden] { display:none; }
.model-card-head { display:flex; align-items:center; gap:12px; min-width:0; }
.model-card-icon { width:58px; height:58px; flex:0 0 58px; display:grid; place-items:center; border-radius:15px; font:700 18px/1 'JetBrains Mono',monospace; letter-spacing:-.04em; box-shadow:inset 0 0 0 1px rgba(255,255,255,.4); transition:transform .25s ease; }
.model-card-icon .openai-mark { width:34px; height:34px; color:currentColor; }
.model-card:hover .model-card-icon { transform:scale(1.07) rotate(-2deg); }
.model-card-icon.green { background:linear-gradient(145deg,#dff7e9,#bcebd1); color:#146c49; }
.model-card-icon.blue { background:linear-gradient(145deg,#e4f1ff,#c8ddf8); color:#2e5f91; }
.model-card-icon.gold { background:linear-gradient(145deg,#fff2d9,#f7ddb1); color:#9b661f; }
.model-card-title { min-width:0; flex:1; display:flex; flex-direction:column; gap:5px; }
.model-card-title strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); font-size:16px; line-height:22px; }
.model-card-title span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:12px; line-height:18px; }
.model-card-head .availability { align-self:flex-start; flex:0 0 auto; font-size:12px; }
.model-card-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:13px; border-bottom:1px solid var(--line); }
.model-card-meta .tag { font-size:12px; padding:5px 9px; }
.model-card-latency { color:var(--muted); font-size:12px; }
.model-card-price { display:flex; flex-direction:column; gap:6px; }
.model-card-price span { color:var(--muted); font-size:12px; }
.model-card-price strong { color:var(--ink); font-size:15px; line-height:22px; font-weight:600; }
.model-card-price strong .muted { color:var(--muted); font-size:11px; font-weight:400; }
.model-card-price-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.model-card-price-grid strong { min-width:0; }
.model-card-description { min-height:42px; margin:0; color:var(--muted); font-size:13px; line-height:1.55; }
.model-card-footer { display:flex; align-items:center; gap:12px; min-height:34px; padding-top:12px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
.model-card-footer .tag { margin-right:auto; }
.model-card-detail { align-self:flex-start; border:0; padding:0; background:transparent; color:var(--blue); font-size:13px; font-weight:600; cursor:pointer; }
.model-card-detail span { display:inline-block; margin-left:4px; transition:transform .2s ease; }
.model-card-detail:hover span { transform:translateX(3px); }
.model-card-actions { display:flex; align-items:center; gap:10px; margin-top:auto; }
.model-card-copy { width:38px; height:34px; display:grid; place-items:center; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--muted); font-size:20px; line-height:1; cursor:pointer; transition:color .2s ease, border-color .2s ease, background-color .2s ease, transform .2s ease; }
.model-card-copy:hover { color:var(--blue); border-color:color-mix(in srgb,var(--blue) 45%,var(--line)); background:var(--mint); transform:translateY(-1px); }
.key-actions { flex-wrap:wrap; justify-content:flex-end; }
@media (max-width:1050px) { .model-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:720px) { .model-grid { grid-template-columns:1fr; gap:12px; }.model-card { padding:16px; }.model-card-icon { width:52px; height:52px; flex-basis:52px; }.model-card-title strong { font-size:16px; }.key-row { align-items:flex-start; gap:12px; flex-direction:column; }.key-actions { width:100%; justify-content:flex-start; } }

/* Prevent narrow settings and action areas from stacking on top of each other. */
.settings-grid { grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); }
.settings-grid > *,.panel,.panel-heading > div,.setting-row > div { min-width:0; }
.profile-panel { grid-column:1 / -1; }
.profile-form { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; align-items:end; gap:14px; }
.profile-form label { display:flex; flex-direction:column; gap:7px; color:var(--ink); font-size:13px; line-height:16px; font-weight:600; min-width:0; }
.profile-form input { width:100%; box-sizing:border-box; min-height:46px; border:1px solid var(--line); background:var(--surface); border-radius:7px; padding:10px 11px; color:var(--ink); font:14px/18px 'Inter','Noto Sans SC',sans-serif; outline:0; }
.profile-form input:focus { border-color:var(--blue); box-shadow:0 0 0 3px var(--mint); }
.profile-form input[readonly] { color:var(--muted); background:var(--wash); }
.profile-form .auth-error { grid-column:1 / -1; }
.settings-panel .panel-heading { flex-wrap:wrap; gap:12px; }
.setting-row { flex-wrap:wrap; }
.setting-row > div { flex:1 1 220px; }
.setting-row .outline-button { flex:0 0 auto; }
.font-levels { grid-template-columns:repeat(5,minmax(0,1fr)); }
.font-level { min-width:0; }
.font-level strong,.font-level small { max-width:100%; overflow-wrap:anywhere; text-align:center; }
.settings-preview strong,.settings-preview span { overflow-wrap:anywhere; }
.panel-actions { min-width:0; flex-wrap:wrap; justify-content:flex-end; }
.page-heading { min-width:0; flex-wrap:wrap; gap:18px; }
.page-heading > div { min-width:0; }
@media (max-width:980px) { .settings-grid { grid-template-columns:1fr; }.profile-panel { grid-column:auto; }.profile-form { grid-template-columns:1fr 1fr; }.profile-form .primary-button { justify-self:start; }.profile-form .auth-error { grid-column:1 / -1; } }
@media (max-width:620px) { .profile-form { grid-template-columns:1fr; }.profile-form .auth-error { grid-column:1; }.font-levels { gap:2px; padding-left:0; padding-right:0; }.font-level strong { font-size:12px; }.font-level small { font-size:10px; white-space:normal; line-height:13px; }.font-track { left:9%; right:9%; }.panel-actions { width:100%; justify-content:flex-start; }.panel-actions .table-search { flex:1 1 160px; width:auto; }.setting-row { align-items:flex-start; }.setting-row .outline-button { margin-left:auto; } }

/* These rules intentionally come last so the compact canvas overrides the
   original desktop settings grid on phones and small embedded windows. */
html, body { overflow-x:hidden; }
@media (max-width:980px) { .app-body .settings-grid { grid-template-columns:minmax(0,1fr) !important; }.app-body .profile-panel { grid-column:auto; } }
@media (max-width:620px) { .app-body .profile-form { grid-template-columns:minmax(0,1fr); }.app-body .settings-panel { padding:16px; }.app-body .font-levels { grid-template-columns:repeat(5,minmax(0,1fr)); } }

/* Removed: viewport-based clamp() overrides that inflated model cards
   and settings forms to 17-27px on wide screens. Fixed values below. */


.panel-actions { display:flex; align-items:center; gap:12px; }.table-search { width:150px; border:1px solid var(--line); border-radius:7px; background:var(--surface); color:var(--ink); padding:8px 10px; font:12px/16px 'Inter','Noto Sans SC',sans-serif; outline:0; }.table-search:focus { border-color:var(--blue); box-shadow:0 0 0 3px var(--mint); }.live-badge { display:inline-flex; vertical-align:middle; align-items:center; gap:5px; margin-left:7px; padding:3px 7px; border-radius:999px; color:var(--muted); background:var(--wash); border:1px solid var(--line); font:11px/15px 'Inter','Noto Sans SC',sans-serif; font-weight:400; }.live-badge.live { color:#059669; background:rgba(16,185,129,.1); border-color:rgba(16,185,129,.22); }.live-badge.live:before { content:''; width:5px; height:5px; border-radius:50%; background:#10b981; box-shadow:0 0 0 3px rgba(16,185,129,.12); }
.loading-row,.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:150px; gap:7px; color:var(--muted); text-align:center; }.loading-row { flex-direction:row; }.loading-dot { width:8px; height:8px; border-radius:50%; background:var(--blue); animation:status-pulse 1s infinite; }.empty-state strong { color:var(--ink); font-size:16px; line-height:24px; }.empty-state span { font-size:12px; line-height:18px; }.channel-list { display:flex; flex-direction:column; }.channel-row { display:flex; align-items:center; gap:13px; padding:17px 0; border-bottom:1px solid var(--line); transition:background-color .2s ease,transform .2s ease; }.channel-row:last-child { border-bottom:0; }.channel-row:hover { transform:translateX(4px); }.channel-icon { width:40px; height:40px; display:grid; place-items:center; background:var(--mint); border:1px solid color-mix(in srgb,var(--blue) 18%,transparent); color:var(--blue); border-radius:9px; font-size:19px; }.channel-copy { flex:1; min-width:0; }.channel-copy strong { display:block; font-size:15px; line-height:20px; }.channel-copy span { display:block; color:var(--muted); font:12px/18px 'JetBrains Mono',monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:3px; }.channel-row .availability { min-width:70px; justify-content:flex-end; }.channel-form { margin-top:15px; }.channel-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.channel-fields label:not(.channel-check) { display:flex; flex-direction:column; gap:7px; color:var(--ink); font-size:13px; line-height:16px; font-weight:600; }.channel-fields input { border:1px solid var(--line); background:var(--surface); border-radius:7px; padding:10px 11px; color:var(--ink); font:14px/18px 'Inter','Noto Sans SC',sans-serif; outline:0; }.channel-fields input:focus { border-color:var(--blue); box-shadow:0 0 0 3px var(--mint); }.channel-fields .channel-check { grid-column:1/-1; display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; }.channel-fields .primary-button { grid-column:1/-1; justify-self:start; }.settings-grid { display:grid; grid-template-columns:1.25fr 1fr; gap:15px; }.settings-panel { padding:22px; }.font-levels { position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:8px; padding:21px 0 5px; }.font-track { position:absolute; top:31px; left:10%; right:10%; height:2px; background:var(--line); z-index:0; }.font-level { position:relative; z-index:1; border:0; background:transparent; display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--muted); padding:0 3px; }.font-level:hover { color:var(--blue); }.font-dot { width:18px; height:18px; border-radius:50%; background:var(--surface); border:2px solid var(--line); box-shadow:0 0 0 4px var(--surface); transition:.2s ease; }.font-level.active { color:var(--blue); }.font-level.active .font-dot { background:var(--blue); border-color:var(--blue); transform:scale(1.16); }.font-level strong { font-size:12px; line-height:16px; }.font-level small { font-size:10px; line-height:15px; color:var(--muted); white-space:nowrap; }.settings-preview { margin-top:22px; border:1px solid var(--line); border-radius:8px; padding:15px; display:flex; flex-direction:column; gap:6px; background:var(--wash); }.preview-label { color:var(--blue); font:11px/15px 'JetBrains Mono',monospace; }.settings-preview strong { font-size:16px; line-height:24px; }.settings-preview span:last-child { color:var(--muted); font-size:12px; line-height:18px; }.setting-row { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:16px 0; border-bottom:1px solid var(--line); }.setting-row:last-child { border-bottom:0; }.setting-row strong { display:block; font-size:14px; line-height:20px; }.setting-row span { display:block; color:var(--muted); font-size:12px; line-height:18px; margin-top:4px; }
html[data-font-level='0'] .nav-item,html[data-font-level='0'] .workspace-copy strong,html[data-font-level='0'] .page-heading p,html[data-font-level='0'] .panel-heading p,html[data-font-level='0'] .activity-copy span { font-size:calc(1em * .86); }
html[data-font-level='1'] .nav-item,html[data-font-level='1'] .workspace-copy strong,html[data-font-level='1'] .page-heading p,html[data-font-level='1'] .panel-heading p,html[data-font-level='1'] .activity-copy span { font-size:calc(1em * .94); }
html[data-font-level='2'] .nav-item,html[data-font-level='2'] .workspace-copy strong,html[data-font-level='2'] .page-heading p,html[data-font-level='2'] .panel-heading p,html[data-font-level='2'] .activity-copy span,
html[data-font-level='3'] .nav-item,html[data-font-level='3'] .workspace-copy strong,html[data-font-level='3'] .page-heading p,html[data-font-level='3'] .panel-heading p,html[data-font-level='3'] .activity-copy span { font-size:calc(1em * 1.08); }
html[data-font-level='4'] .nav-item,html[data-font-level='4'] .workspace-copy strong,html[data-font-level='4'] .page-heading p,html[data-font-level='4'] .panel-heading p,html[data-font-level='4'] .activity-copy span { font-size:calc(1em * 1.16); }

/* Removed: viewport-based clamp() sidebar overrides that inflated
   nav-item to 18-27px on wide screens. The calc(1em * X) rules above
   keep font-level scaling within a reasonable 12-16px range. */

@media (min-width:1100px) {
  .app-body { width:100%; overflow-x:hidden; }
  .app-body .main-content { min-width:0; overflow:hidden; }
  .app-body .page-wrap { max-width:none; width:100%; min-width:0; }
  .app-body .settings-grid { grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); min-width:0; }
  .app-body .settings-panel { min-width:0; }
}

@media (min-width:1100px) {
  .app-body .page-heading p { font-size:16px; line-height:1.45; }
  .app-body .settings-panel .panel-heading h2 { font-size:17px; line-height:1.35; }
  .app-body .settings-panel .panel-heading p { font-size:15px; line-height:1.45; }
  .app-body .settings-panel .setting-row strong { font-size:16px; line-height:1.35; }
  .app-body .settings-panel .setting-row span { font-size:15px; line-height:1.45; }
  .app-body .settings-panel .outline-button { font-size:14px; line-height:1.35; }
  .app-body .profile-form label,
  .app-body .password-form label { font-size:15px; line-height:1.35; }
  .app-body .profile-form input,
  .app-body .password-form input { font-size:15px; line-height:1.35; }
  .app-body .font-level strong { font-size:15px; line-height:1.35; }
  .app-body .font-level small { font-size:13px; line-height:1.35; }
  .app-body .settings-preview strong { font-size:18px; line-height:1.35; }
  .app-body .settings-preview span:last-child { font-size:15px; line-height:1.45; }
  .app-body .model-card-price > span { font-size:14px; line-height:1.35; }
  .app-body .model-card-price strong { font-size:15px; line-height:1.4; }
  .app-body .model-card-price strong .muted { font-size:12px; }
  .app-body .model-card-description { font-size:14px; line-height:1.5; }
  .app-body .model-card-footer { font-size:13px; }
  .app-body .model-card-copy { width:38px; height:34px; font-size:18px; }
  .app-body .model-card-title strong { font-size:17px; line-height:22px; }
  .app-body .model-card-title span { font-size:13px; line-height:18px; }
  .app-body .model-card-detail { font-size:14px; }
}

.channel-key-field { grid-column:1/-1; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:12px; }
.channel-key-field label { display:flex; flex-direction:column; gap:7px; min-width:0; }
.channel-key-field .outline-button { min-height:42px; white-space:nowrap; }
.channel-actions { display:flex; align-items:center; gap:8px; margin-left:4px; }
@media (max-width:720px) {
  .channel-key-field { grid-template-columns:1fr; }
  .channel-key-field .outline-button { justify-self:start; }
  .channel-row { flex-wrap:wrap; }
  .channel-actions { margin-left:auto; }
}


.auth-page { min-height:100vh; display:grid; grid-template-columns:minmax(360px, .86fr) 1.14fr; background:#f5f7f4; }
.auth-card { width:min(420px, calc(100% - 44px)); margin:auto; background:#fff; border:1px solid var(--line); border-radius:14px; padding:34px 36px; box-shadow:0 18px 55px rgba(30,48,40,.08); }
.auth-brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); margin-bottom:58px; font-size:17px; }.auth-brand b { color:var(--green); font:700 10px 'DM Mono',monospace; letter-spacing:1px; margin-left:3px; }.auth-brand .brand-mark { display:flex; width:32px; height:32px; }
.auth-brand .brand-mark svg { width:24px; height:24px; color:var(--blue); }
.auth-card h1 { margin:0; font-size:29px; letter-spacing:-1px; }.auth-lead { color:var(--muted); font-size:12px; margin:10px 0 29px; }.auth-card form { display:flex; flex-direction:column; gap:17px; }.auth-card label:not(.consent) { color:var(--ink); font-size:11px; font-weight:600; display:flex; flex-direction:column; gap:7px; }.auth-card input[type=email],.auth-card input[type=password] { width:100%; border:1px solid var(--line); border-radius:7px; padding:11px 12px; outline:0; font:12px 'Manrope','Noto Sans SC',sans-serif; background:#fbfcfa; }.auth-card input:focus { border-color:#7fbea0; box-shadow:0 0 0 3px rgba(23,116,82,.1); }.consent { display:flex; align-items:flex-start; gap:7px; color:var(--muted); font-size:10px; line-height:1.5; font-weight:400; }.consent input { margin:2px 0 0; accent-color:var(--green); }.auth-submit { border:0; border-radius:7px; padding:12px; background:var(--green); color:#fff; font-size:12px; font-weight:700; margin-top:3px; }.auth-submit:hover { background:var(--green-dark); }.auth-submit span { float:right; font-size:16px; line-height:12px; }.auth-error { color:var(--coral); font-size:10px; min-height:14px; }.auth-foot { text-align:center; color:var(--muted); font-size:10px; margin-top:24px; }.auth-foot a { color:var(--green); font-weight:700; text-decoration:none; margin-left:4px; }.auth-aside { display:flex; flex-direction:column; justify-content:center; padding:clamp(40px, 8vw, 120px); background:var(--ink); color:#fff; position:relative; overflow:hidden; }.auth-aside:after { content:''; position:absolute; width:520px; height:520px; border:1px solid rgba(184,232,208,.18); border-radius:50%; right:-250px; bottom:-250px; box-shadow:0 0 0 28px rgba(184,232,208,.05),0 0 0 57px rgba(184,232,208,.03); }.auth-aside h2 { font-size:clamp(34px, 4vw, 56px); line-height:1.1; letter-spacing:-2px; margin:17px 0 21px; position:relative; z-index:1; }.auth-aside p { max-width:360px; color:#b3c4bc; line-height:1.8; font-size:12px; position:relative; z-index:1; }.auth-stat { border-top:1px solid rgba(214,236,225,.18); margin-top:75px; padding-top:16px; display:flex; flex-direction:column; gap:5px; position:relative; z-index:1; }.auth-stat strong { font-size:25px; }.auth-stat span { color:#8dab9e; font-size:10px; }
.code-field { display:grid; grid-template-columns:1fr auto; align-items:end; gap:8px; }.code-field label { min-width:0; }.code-field .outline-button { height:40px; white-space:nowrap; }.code-field .outline-button:disabled { opacity:.55; cursor:wait; }
@media (max-width:760px) { .auth-page { display:block; padding:24px 0; }.auth-card { margin:0 auto; }.auth-aside { display:none; } }
.security-panel { grid-column:1/-1; }.password-form { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }.password-form label { display:flex; flex-direction:column; gap:7px; color:var(--ink); font-size:13px; line-height:16px; font-weight:600; }.password-form input { border:1px solid var(--line); background:var(--surface); border-radius:7px; padding:10px 11px; color:var(--ink); font:14px/18px 'Inter','Noto Sans SC',sans-serif; outline:0; }.password-form input:focus { border-color:var(--blue); box-shadow:0 0 0 3px var(--mint); }.password-form .primary-button { align-self:end; justify-self:start; }.password-form .auth-error { grid-column:1/-1; }
@media (max-width:900px) { .password-form { grid-template-columns:1fr; }.password-form .primary-button,.password-form .auth-error { grid-column:1; } }

.key-create-form { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:14px; margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
.key-create-form[hidden] { display:none !important; }
.key-create-form label,.pricing-row label { display:flex; flex-direction:column; gap:7px; color:var(--ink); font-size:12px; line-height:16px; font-weight:600; }
.key-create-form input,.pricing-row input { border:1px solid var(--line); background:var(--surface); border-radius:7px; padding:10px 11px; color:var(--ink); font:13px/18px 'Inter','Noto Sans SC',sans-serif; outline:0; }
.key-create-form input:focus,.pricing-row input:focus { border-color:var(--blue); box-shadow:0 0 0 3px var(--mint); }
.key-create-form .auth-error { grid-column:1/-1; }
.key-secret { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:18px; padding:15px; border:1px solid color-mix(in srgb,var(--blue) 25%,var(--line)); border-radius:8px; background:var(--mint); }
.key-secret strong { color:var(--ink); }.key-secret code { flex:1; min-width:220px; overflow:auto; color:var(--ink); font:13px/18px 'JetBrains Mono',monospace; }
.model-pricing-panel { margin-top:15px; }.pricing-rows { display:flex; flex-direction:column; gap:10px; }.pricing-row { display:grid; grid-template-columns:minmax(180px,1fr) minmax(150px,.45fr) minmax(150px,.45fr); align-items:end; gap:14px; padding:13px 0; border-bottom:1px solid var(--line); }.pricing-row:last-child { border-bottom:0; }.pricing-row > strong { padding-bottom:11px; color:var(--ink); }.pricing-form-actions { display:flex; align-items:center; gap:15px; margin-top:18px; }.pricing-form-actions .auth-error { flex:1; }
@media (max-width:720px) { .key-create-form { grid-template-columns:1fr; }.pricing-row { grid-template-columns:1fr 1fr; }.pricing-row > strong { grid-column:1/-1; padding-bottom:0; }.pricing-form-actions { align-items:flex-start; flex-direction:column; } }
@media (min-width:1100px) { .app-body .key-create-form label,.app-body .pricing-row label { font-size:18px; line-height:24px; }.app-body .key-create-form input,.app-body .pricing-row input { font-size:18px; line-height:24px; min-height:46px; }.app-body .key-secret { font-size:18px; }.app-body .key-secret code { font-size:18px; }.app-body .pricing-row > strong { font-size:20px; }.app-body .model-pricing-panel .panel-heading p { font-size:18px; } }

/* Match the supplied Gemini/Tailwind reference typography. Keep Chinese on a
   native Windows fallback so it stays crisp when remote fonts are unavailable. */
html, body { font-family:'Inter','Microsoft YaHei UI','Microsoft YaHei','Noto Sans SC',system-ui,sans-serif; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
.app-body, .auth-page { font-synthesis:none; }
.app-body h1,.app-body h2,.app-body h3,.auth-page h1,.auth-page h2 { letter-spacing:-.025em; }
.app-body p,.app-body label,.app-body button,.app-body input,.app-body select,.auth-page p,.auth-page label,.auth-page button,.auth-page input { letter-spacing:0; }


/* Authentication layout follows the Nexus reference: spacious form, narrative panel first. */
.auth-page { position:relative; grid-template-columns:minmax(0,1.14fr) minmax(440px,.86fr); background:var(--wash); }
.auth-aside { grid-column:1; grid-row:1; min-width:0; padding:clamp(48px,8vw,132px); background:#111827; color:#fff; }
.auth-card { grid-column:2; grid-row:1; width:min(560px,calc(100% - 72px)); padding:48px 54px; background:var(--surface); border-color:var(--line); box-shadow:0 22px 70px rgba(15,23,42,.12); }
.auth-toolbar { position:absolute; top:24px; right:32px; z-index:5; }
.auth-card h1 { font-size:38px; line-height:1.12; letter-spacing:-1.3px; }
.auth-lead { font-size:14px; line-height:22px; margin:12px 0 34px; }
.auth-card form { gap:20px; }
.auth-card label:not(.consent) { font-size:13px; gap:9px; }
.auth-card input[type=text],.auth-card input[type=email],.auth-card input[type=password] { box-sizing:border-box; padding:14px 15px; border-color:var(--line); background:var(--wash); color:var(--ink); font-size:14px; line-height:20px; }
.auth-card input:focus { border-color:var(--blue); box-shadow:0 0 0 4px var(--mint); }
.consent { font-size:12px; line-height:18px; }
.auth-submit { padding:15px 16px; font-size:14px; border-radius:8px; background:var(--green); }
.auth-foot { font-size:12px; margin-top:28px; }
body.register-mode .auth-card { border-top:4px solid var(--blue); }
html.dark .auth-page { background:var(--wash); }
html.dark .auth-card { background:var(--surface); box-shadow:none; }
html.dark .auth-card input[type=text],html.dark .auth-card input[type=email],html.dark .auth-card input[type=password] { background:#0b0f19; }
html.dark .auth-toolbar .theme-controls { background:var(--surface); }
@media (max-width:900px) { .auth-page { grid-template-columns:minmax(0,1fr) minmax(390px,.9fr); }.auth-card { width:min(500px,calc(100% - 48px)); padding:40px 42px; } }
@media (max-width:760px) { .auth-toolbar { top:14px; right:16px; }.auth-card { width:calc(100% - 34px); padding:34px 28px; }.auth-card h1 { font-size:32px; }.auth-lead { font-size:13px; }.auth-aside { display:none; } }
.auth-card [hidden] { display:none !important; }
.workspace-switcher-wrap { position:relative; }
.workspace-switcher { cursor:pointer; }
.workspace-switcher:focus-visible { outline:3px solid color-mix(in srgb,var(--blue) 35%,transparent); outline-offset:2px; }
.workspace-menu { position:absolute; z-index:15; top:calc(100% - 12px); left:clamp(20px,1.9vw,34px); right:clamp(20px,1.9vw,34px); padding:9px; border:1px solid var(--line); border-radius:10px; background:var(--surface); box-shadow:0 14px 30px rgba(15,23,42,.14); }
.workspace-menu[hidden] { display:none; }
.workspace-menu button[hidden] { display:none !important; }
.workspace-menu-heading { padding:8px 11px 7px; color:var(--muted-2); font:500 11px/16px 'JetBrains Mono',monospace; letter-spacing:.5px; }
.workspace-menu button { width:100%; display:flex; align-items:center; gap:9px; border:0; background:transparent; border-radius:7px; padding:10px 11px; text-align:left; color:var(--ink); font-size:13px; line-height:18px; }
.workspace-menu button:hover { background:var(--wash); color:var(--blue); }
.workspace-menu button span { width:18px; color:var(--blue); text-align:center; }





/* ===== 自定义确认 / 输入对话框（替代原生 window.confirm / window.prompt） ===== */
.jc-modal { position:fixed; inset:0; background:rgba(17,24,39,.45); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:60; }
.jc-modal.show { opacity:1; pointer-events:auto; }
.jc-dialog { width:min(420px, 100%); background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:24px; box-shadow:0 20px 50px rgba(0,0,0,.18); transform:translateY(12px) scale(.98); transition:transform .2s ease; }
.jc-modal.show .jc-dialog { transform:translateY(0) scale(1); }
.jc-dialog-icon { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-size:20px; font-weight:700; background:var(--mint); color:var(--green); margin-bottom:14px; }
.jc-dialog.danger .jc-dialog-icon { background:color-mix(in srgb, var(--coral) 16%, transparent); color:var(--coral); }
.jc-dialog-title { margin:0 0 8px; font-size:17px; font-weight:700; color:var(--ink); letter-spacing:-.3px; }
.jc-dialog-message { margin:0 0 18px; font-size:14px; line-height:1.6; color:var(--muted); }
.jc-dialog-input-label { display:block; font-size:11px; color:var(--muted); margin-bottom:6px; }
.jc-dialog-input { width:100%; box-sizing:border-box; padding:10px 12px; font-size:14px; color:var(--ink); background:var(--wash); border:1px solid var(--line); border-radius:8px; margin-bottom:18px; outline:none; transition:border-color .15s ease, box-shadow .15s ease; }
.jc-dialog-input:focus { border-color:var(--green); box-shadow:0 0 0 3px var(--mint); }
.jc-dialog-actions { display:flex; justify-content:flex-end; gap:10px; }
.jc-btn { border:1px solid transparent; border-radius:8px; padding:9px 16px; font-size:14px; font-weight:600; cursor:pointer; transition:background .15s ease, transform .15s ease, border-color .15s ease; }
.jc-btn-cancel { background:var(--surface); border-color:var(--line); color:var(--muted); }
.jc-btn-cancel:hover { background:var(--wash); color:var(--ink); }
.jc-btn-ok { background:var(--green); color:#fff; }
.jc-btn-ok:hover { background:var(--blue); transform:translateY(-1px); }
.jc-dialog.danger .jc-btn-ok { background:var(--coral); }
.jc-dialog.danger .jc-btn-ok:hover { background:color-mix(in srgb, var(--coral) 85%, #000); }
@media (prefers-reduced-motion: reduce) { .jc-modal, .jc-dialog { transition:none; } }

/* ===== 密钥表单：过期时间 + 模型限制 ===== */
.key-create-form { display:flex; flex-direction:column; gap:14px; }
.key-form-section { border:1px solid var(--line); border-radius:10px; padding:14px 16px; background:var(--wash); }
.key-form-section-title { display:flex; flex-direction:column; gap:2px; margin-bottom:10px; }
.key-form-section-title strong { font-size:13px; color:var(--ink); }
.key-form-section-title span { font-size:10px; color:var(--muted); }
.key-form-actions { display:flex; align-items:center; gap:10px; }
.expiry-group { display:flex; gap:8px; flex-wrap:wrap; }
.expiry-option { border:1px solid var(--line); background:var(--surface); color:var(--muted); border-radius:8px; padding:7px 12px; font-size:11px; font-weight:600; cursor:pointer; transition:.15s ease; }
.expiry-option:hover { border-color:var(--green); color:var(--green); }
.expiry-option.active { background:var(--green); border-color:var(--green); color:#fff; }
.model-filter { width:100%; box-sizing:border-box; padding:8px 10px; font-size:11px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); margin-bottom:8px; outline:none; }
.model-filter:focus { border-color:var(--green); box-shadow:0 0 0 3px var(--mint); }
.model-picker { display:flex; flex-wrap:wrap; gap:7px; max-height:170px; overflow:auto; padding:2px; }
.model-chip { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:var(--surface); border-radius:100px; padding:5px 10px; font-size:10px; color:var(--muted); cursor:pointer; user-select:none; transition:.15s ease; }
.model-chip:hover { border-color:var(--green); }
.model-chip:has(input:checked) { background:var(--mint); border-color:var(--green); color:var(--green); font-weight:600; }
.model-chip input { accent-color:var(--green); margin:0; }
.model-picker-summary { margin-top:8px; font-size:10px; color:var(--muted); }
.key-secret strong { display:block; color:var(--green); }
.key-secret span { display:block; color:var(--muted); font-size:10px; margin:6px 0 10px; line-height:1.6; }
/* ===== 密钥表格 ===== */
.key-table td { vertical-align:middle; }
.key-table .cell-sub { display:block; color:var(--muted-2); font-size:9px; margin-top:3px; }
.key-table .key-code { font-size:10px; background:var(--wash); border:1px solid var(--line); border-radius:6px; padding:3px 7px; }
.key-table .muted-text { color:var(--muted-2); font-size:12px; }
.small-button.danger { color:var(--coral); border-color:color-mix(in srgb, var(--coral) 35%, var(--line)); }
.small-button.danger:hover { background:color-mix(in srgb, var(--coral) 10%, var(--surface)); }
.tag.warn { background:color-mix(in srgb, var(--yellow) 16%, transparent); color:color-mix(in srgb, var(--yellow) 70%, var(--ink)); }
/* ===== 使用日志 ===== */
.logs-filter { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.logs-filter input { flex:1 1 200px; padding:8px 11px; font-size:11px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); outline:none; }
.logs-filter input:focus { border-color:var(--green); box-shadow:0 0 0 3px var(--mint); }
.logs-filter select { padding:8px 11px; font-size:11px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); }
.log-summary { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.log-chip { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:var(--wash); border-radius:100px; padding:6px 12px; font-size:10px; color:var(--muted); }
.log-chip b { color:var(--ink); font-size:11px; }
.log-detail { color:var(--muted); font-size:10px; max-width:220px; overflow-wrap:anywhere; }
tr.log-error td { background:color-mix(in srgb, var(--coral) 5%, transparent); }
.logs-pager { display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:12px; }
.logs-pager .small-button:disabled { opacity:.45; cursor:not-allowed; }

/* ===== 数据看板（模型调用分析） ===== */
.range-group { display:flex; gap:8px; flex-wrap:wrap; }
.chart-toggle { display:flex; gap:8px; }
.chart-toggle .small-button.active { background:var(--green); border-color:var(--green); color:#fff; }
.chart-box { width:100%; }
.chart-box svg { width:100%; height:auto; display:block; }
.chart-legend { display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:10px; }
.legend-item { display:inline-flex; align-items:center; gap:6px; font-size:10px; color:var(--muted); }
.legend-item i { width:9px; height:9px; border-radius:2px; display:inline-block; }
.rank-list { display:flex; flex-direction:column; }
.rank-row { display:flex; align-items:center; gap:12px; padding:8px 0; border-bottom:1px solid var(--line); }
.rank-row:last-child { border-bottom:0; }
.rank-name { flex:0 0 190px; font-size:11px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rank-track { flex:1; height:10px; border-radius:100px; background:var(--wash); overflow:hidden; }
.rank-fill { height:100%; border-radius:100px; }
.rank-val { flex:0 0 auto; font-size:10px; color:var(--muted); }

/* ===== 密钥管理：搜索栏 / 分页 / 操作图标 / 编辑弹窗（对齐 New API 模式） ===== */
.keys-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.keys-toolbar .table-search { flex:1; max-width:340px; }
.key-table .key-actions-col { width:1%; white-space:nowrap; }
.key-actions { display:flex; gap:6px; }
.icon-action { width:32px; height:32px; display:grid; place-items:center; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--muted); font-size:15px; cursor:pointer; transition:color .15s ease,border-color .15s ease,background-color .15s ease,transform .15s ease; }
.icon-action:hover { color:var(--blue); border-color:color-mix(in srgb,var(--blue) 45%,var(--line)); background:var(--mint); transform:translateY(-1px); }
.icon-action.danger { color:var(--coral); }
.icon-action.danger:hover { border-color:color-mix(in srgb,var(--coral) 45%,var(--line)); background:color-mix(in srgb,var(--coral) 10%,var(--surface)); }
.key-code { font:12px/16px 'JetBrains Mono',monospace; background:var(--wash); border:1px solid var(--line); border-radius:6px; padding:4px 8px; display:inline-block; color:var(--ink); }
.key-table .cell-sub { display:block; color:var(--muted-2); font-size:11px; margin-top:4px; }

.key-editor { z-index:70; }
.key-editor-dialog { width:min(620px,100%); max-height:88vh; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:0; box-shadow:0 24px 60px rgba(0,0,0,.2); transform:translateY(12px) scale(.98); transition:transform .2s ease; overflow:hidden; }
.key-editor.show .key-editor-dialog { transform:translateY(0) scale(1); }
.key-editor-head { display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--line); }
.key-editor-head h3 { margin:0; font-size:17px; font-weight:700; color:var(--ink); letter-spacing:-.3px; }
.key-editor-body { padding:18px 22px; overflow:auto; display:flex; flex-direction:column; gap:14px; }
.key-editor-actions { display:flex; justify-content:flex-end; gap:10px; padding:14px 22px; border-top:1px solid var(--line); background:var(--wash); }
.key-form-hint { font-size:11px; color:var(--muted-2); margin:6px 0 0; }
.key-quota-unlimited { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink); font-weight:600; margin-bottom:8px; cursor:pointer; }
.key-quota-unlimited input { accent-color:var(--green); width:16px; height:16px; }
.key-spent { font-size:12px; color:var(--muted); margin:8px 0 0; }
.key-spent b { color:var(--ink); }
.key-editor-label { display:flex; flex-direction:column; gap:7px; color:var(--ink); font-size:12px; line-height:16px; font-weight:600; }
.key-editor-label input { width:100%; box-sizing:border-box; padding:10px 11px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); font:13px/18px 'Inter','Noto Sans SC',sans-serif; outline:none; }
.key-editor-label input:focus { border-color:var(--blue); box-shadow:0 0 0 3px var(--mint); }
#key-editor-quota:disabled { background:var(--wash); color:var(--muted); }
#key-editor-group { width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:8px; background:var(--wash); color:var(--muted); font:13px/18px 'Inter','Noto Sans SC',sans-serif; }
.key-editor-secret { margin-top:12px; padding:12px 14px; border:1px solid color-mix(in srgb,var(--blue) 25%,var(--line)); border-radius:8px; background:var(--mint); }
.key-editor-secret-label { display:block; font-size:11px; color:var(--muted); margin-bottom:8px; }
.key-editor-secret-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.key-editor-secret-row code { flex:1; min-width:200px; overflow:auto; font:13px/18px 'JetBrains Mono',monospace; color:var(--ink); }
.key-ip-label { display:flex; flex-direction:column; gap:7px; font-size:12px; font-weight:600; color:var(--ink); margin-top:10px; }
.key-ip-label textarea { width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:8px; padding:9px 11px; font:13px/18px 'JetBrains Mono',monospace; color:var(--ink); background:var(--surface); outline:none; resize:vertical; }
.key-ip-label textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px var(--mint); }


/* ===== 接口文档页（数据来自上游 /api/pricing） ===== */
.docs-layout { align-items:start; }
.docs-nav { position:sticky; top:18px; }
.docs-nav button.active { background:var(--mint); color:var(--ink); box-shadow:inset 2px 0 0 var(--blue); }
html.dark .docs-nav button.active { background:rgba(245,158,11,.16); color:var(--ink); }
.doc-content .doc-section + .doc-section { margin-top:34px; padding-top:30px; border-top:1px solid var(--line); }
.doc-content h3.docs-sub { margin:26px 0 12px; font-size:14px; color:var(--muted); letter-spacing:.04em; }
.doc-content p code, .doc-content li code, .docs-note code { background:var(--mint); color:var(--ink); border-radius:4px; padding:1px 5px; font-size:12px; font-family:'JetBrains Mono',monospace; }
.docs-base-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px; margin:16px 0; }
.docs-base-card { display:flex; flex-direction:column; gap:9px; align-items:flex-start; padding:15px; border:1px solid var(--line); border-radius:9px; background:var(--surface); }
.docs-base-card code { font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--ink); word-break:break-all; }
.docs-base-label { font-size:11px; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; }
.docs-note { display:flex; flex-direction:column; gap:6px; margin-top:18px; padding:14px 16px; border:1px solid var(--line); border-left:3px solid var(--blue); border-radius:8px; background:var(--surface); }
.docs-note strong { font-size:13px; }
.docs-note span { font-size:12px; color:var(--muted); line-height:1.7; }
.docs-table { font-size:12px; }
.docs-table th, .docs-table td { padding:9px 10px; vertical-align:top; }
.docs-table td code { font-family:'JetBrains Mono',monospace; font-size:12px; }
.docs-method { display:inline-block; min-width:52px; text-align:center; padding:2px 7px; border-radius:5px; font:600 10px/16px 'JetBrains Mono',monospace; letter-spacing:.04em; }
.docs-method.post { background:rgba(59,130,246,.13); color:#2563eb; }
.docs-method.get { background:rgba(16,185,129,.13); color:#047857; }
.docs-method.del { background:rgba(239,68,68,.13); color:#b91c1c; }
html.dark .docs-method.post { color:#93c5fd; }
html.dark .docs-method.get { color:#6ee7b7; }
html.dark .docs-method.del { color:#fca5a5; }
.docs-code { margin-top:14px; }
.docs-code .code-body { margin:0; padding:14px 16px; overflow-x:auto; font:12px/1.75 'JetBrains Mono',monospace; color:#e5e7eb; white-space:pre; }
.docs-list { margin:14px 0 0; padding-left:18px; color:var(--muted); font-size:12px; line-height:2; }
.docs-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:16px 0 12px; }
.docs-toolbar .table-search { flex:1 1 220px; max-width:320px; }
.docs-chip-group { display:flex; flex-wrap:wrap; gap:6px; }
.docs-chip { border:1px solid var(--line); background:var(--surface); color:var(--muted); border-radius:999px; padding:5px 11px; font-size:11px; cursor:pointer; }
.docs-chip:hover { border-color:var(--blue); color:var(--ink); }
.docs-chip.active { background:var(--mint); border-color:var(--blue); color:var(--ink); font-weight:600; }
.docs-switch { display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--muted); cursor:pointer; }
.docs-filter-summary { font:11px/1.5 'JetBrains Mono',monospace; color:var(--muted); margin-bottom:10px; }
.model-table td { white-space:nowrap; }
.docs-row-authorized td { background:var(--mint); }
html.dark .docs-row-authorized td { background:rgba(245,158,11,.08); }
.docs-flag { margin-left:8px; }
.docs-sample-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:14px; margin-top:16px; }
.docs-sample .code-header { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 14px; border-bottom:1px solid rgba(255,255,255,.08); color:#9ca3af; font:11px/1 'JetBrains Mono',monospace; letter-spacing:.06em; text-transform:uppercase; }
.docs-faq { border:1px solid var(--line); border-radius:8px; padding:12px 14px; margin-bottom:9px; background:var(--surface); }
.docs-faq summary { cursor:pointer; font-size:13px; font-weight:600; list-style:none; }
.docs-faq summary::-webkit-details-marker { display:none; }
.docs-faq summary::before { content:"+ "; color:var(--blue); font-weight:700; }
.docs-faq[open] summary::before { content:"\2212 "; }
.docs-faq p { margin:9px 0 0; font-size:12px; color:var(--muted); line-height:1.8; }
.docs-code-tag { font:11px 'JetBrains Mono',monospace; color:var(--muted); }
@media (max-width:720px) {
  .docs-layout { grid-template-columns:1fr; }
  .docs-nav { position:static; flex-direction:row; overflow:auto; }
  .docs-nav button { white-space:nowrap; }
  .docs-table { font-size:11px; }
}

/* ===== 弹窗字号放大（画布 zoom:.9 会连弹窗一起缩小，这里先复位） ===== */
/* 画布本身 zoom:.9 会连弹窗一起缩小；在弹窗层做 1/0.9 补偿，弹窗内文字回到 100% 显示。
   注意：补偿必须作用在 .jc-dialog / .key-editor-dialog 上，不能加在外层遮罩上，
   否则遮罩 inset:0 的尺寸也会被放大，出现超出视口。 */
.jc-dialog,
.key-editor-dialog,
.key-editor .jc-dialog { zoom: var(--modal-zoom); }
.jc-dialog { max-height: calc(92vh * var(--app-zoom)); }
.jc-modal { padding:32px 20px; }
.jc-dialog { width:min(460px, 100%); padding:26px; }
.jc-dialog-title { font-size:19px; }
.jc-dialog-message { font-size:15px; margin-bottom:20px; }
.jc-dialog-input { font-size:15px; padding:11px 13px; }
.jc-dialog-input-label { font-size:12px; }
.jc-dialog-actions { gap:12px; }
.jc-dialog .jc-btn { padding:11px 18px; font-size:14px; }

.key-editor-dialog { width:min(780px, 100%); }
.key-editor-head { padding:20px 28px; }
.key-editor-head h3 { font-size:20px; }
.key-editor-body { padding:22px 28px; gap:18px; }
.key-editor-actions { padding:16px 28px; gap:12px; }
.key-editor-actions .primary-button { padding:12px 22px; font-size:15px; }
.key-editor-actions .small-button { padding:11px 18px; font-size:14px; }
.key-editor .key-form-section-title { margin-bottom:12px; }
.key-editor .key-form-section-title strong { font-size:15px; line-height:22px; }
.key-editor .key-form-section-title span { font-size:12px; line-height:17px; }
.key-editor .key-editor-label { font-size:13px; line-height:18px; gap:8px; }
.key-editor .key-editor-label input { font:15px/22px 'Inter','Noto Sans SC',sans-serif; padding:12px 13px; }
.key-editor .expiry-option { padding:10px 18px; font-size:13px; border-radius:9px; }
.key-editor .model-filter { font-size:13px; padding:11px 12px; }
.key-editor .model-picker { gap:9px; max-height:210px; padding:3px; }
.key-editor .model-chip { font-size:13px; padding:8px 14px; gap:8px; }
.key-editor .model-picker-summary { font-size:12px; }
.key-editor .model-picker-summary b { font-size:13px; }
.key-editor .model-filter { margin-bottom:10px; }
.key-editor .key-quota-unlimited { font-size:14px; gap:9px; margin-bottom:10px; }
.key-editor .key-quota-unlimited input { width:18px; height:18px; }
.key-editor .key-spent { font-size:13px; margin-top:10px; }
.key-editor .key-spent b { font-size:14px; }
.key-editor .key-editor-secret { margin-top:14px; padding:14px 16px; }
.key-editor .key-editor-secret-label { font-size:12px; margin-bottom:10px; }
.key-editor .key-editor-secret-row code { font:15px/22px 'JetBrains Mono',monospace; }
.key-editor .key-ip-label { font-size:13px; gap:8px; margin-top:12px; }
.key-editor .key-ip-label textarea { padding:11px 12px; font:14px/22px 'JetBrains Mono',monospace; }
.key-editor .key-form-hint { font-size:12px; }
.key-editor .key-editor-close { font-size:18px; width:34px; height:34px; }

@media (max-width:720px) {
  .key-editor-dialog { width:100%; max-height:92vh; }
  .key-editor-body { padding:18px 18px; }
  .key-editor-head { padding:16px 18px; }
}

/* 表格字号档位：以固定像素为基准，默认档渲染约 15.3px（画布 0.9 缩放后） */
html[data-font-level='2'] .data-table { font-size:calc(17px * 1); }
html[data-font-level='2'] .key-info span { font-size:calc(14px * 1); }
html[data-font-level='0'] .data-table { font-size:calc(17px * .86); }
html[data-font-level='0'] .key-info span { font-size:calc(14px * .86); }
html[data-font-level='1'] .data-table { font-size:calc(17px * .94); }
html[data-font-level='1'] .key-info span { font-size:calc(14px * .94); }
html[data-font-level='3'] .data-table { font-size:calc(17px * 1.08); }
html[data-font-level='3'] .key-info span { font-size:calc(14px * 1.08); }
html[data-font-level='4'] .data-table { font-size:calc(17px * 1.16); }
html[data-font-level='4'] .key-info span { font-size:calc(14px * 1.16); }

/* ===== 表格 / 筛选 / 空状态 可读性修正（画布 0.9 缩放下的最终渲染尺寸） ===== */
.data-table { font-size:15.5px; }
.data-table th { font-size:13px; line-height:18px; padding:10px 10px; }
.data-table td { padding:12px 10px; }
.key-info strong { font-size:15.5px; line-height:22px; }
.key-info span { font-size:13px; line-height:18px; }
.tag, .small-button { font-size:14px; line-height:19px; }
.small-button { padding:9px 15px; }
.table-search { width:200px; padding:10px 12px; font:14.5px/20px 'Inter','Noto Sans SC',sans-serif; }
.keys-toolbar .table-search { max-width:460px; }
.icon-action { width:34px; height:34px; font-size:15px; }

/* 日志页 */
.logs-filter { gap:12px; margin-bottom:14px; }
.logs-filter input { flex:1 1 260px; padding:11px 13px; font-size:14.5px; }
.logs-filter select { padding:11px 13px; font-size:14.5px; }
.logs-filter .primary-button { padding:11px 18px; font-size:14px; }
.log-summary { gap:12px; margin-bottom:14px; }
.log-chip { padding:9px 15px; font-size:13px; gap:7px; }
.log-chip b { font-size:14px; }
.logs-pager { margin-top:14px; gap:12px; }
.logs-pager .muted-text { font-size:13px; }

/* 表格内空状态：别撑出大空白 */
.data-table .empty-state { min-height:96px; }
.empty-state strong { font-size:17px; }
.empty-state span { font-size:13.5px; }

/* 操作列：列宽 1% 会把按钮容器压到单个图标宽度并逐个换行，这里禁止换行并给列保留最小宽度 */
.key-actions { flex-wrap:nowrap; }
.key-table .key-actions-col { min-width:154px; }
@media (max-width:720px) { .key-actions { flex-wrap:wrap; } .key-table .key-actions-col { min-width:0; } }
/* 窄窗口下隐藏「创建时间」列（第 6 列），保证操作按钮完整可见 */
@media (max-width:1200px) { .key-table th:nth-child(6), .key-table td:nth-child(6) { display:none; } }











/* ==========================================================================
   Content-area small-text fixes (targeted raise, does not change the overall scale)
   For small text of 10-12px in the content area on the right side of pages like docs/keys/logs/models,
   raise it to a readable baseline coordinated with the whole (12.5-14px); larger text like headings/tables stays untouched.
   The doubled [data-font-level] prefix is only to override legacy !important rules; the attribute is always present on html.
   ========================================================================== */
/* ---- Interface documentation ---- */
html[data-font-level][data-font-level] .app-body .main-content .docs-table td code,
html[data-font-level][data-font-level] .app-body .docs-table td code { font-size:14px !important; }
html[data-font-level][data-font-level] .app-body .main-content .doc-content p code,
html[data-font-level][data-font-level] .app-body .doc-content p code,
html[data-font-level][data-font-level] .app-body .main-content .doc-content li code,
html[data-font-level][data-font-level] .app-body .doc-content li code,
html[data-font-level][data-font-level] .app-body .main-content .docs-note code,
html[data-font-level][data-font-level] .app-body .docs-note code { font-size:13px !important; }
html[data-font-level][data-font-level] .app-body .main-content .docs-chip,
html[data-font-level][data-font-level] .app-body .docs-chip { font-size:13px !important; }
html[data-font-level][data-font-level] .app-body .main-content .docs-switch,
html[data-font-level][data-font-level] .app-body .docs-switch { font-size:13px !important; }
html[data-font-level][data-font-level] .app-body .main-content .docs-filter-summary,
html[data-font-level][data-font-level] .app-body .docs-filter-summary { font-size:12.5px !important; }
html[data-font-level][data-font-level] .app-body .main-content .docs-base-label,
html[data-font-level][data-font-level] .app-body .docs-base-label { font-size:12.5px !important; }
html[data-font-level][data-font-level] .app-body .main-content .docs-list,
html[data-font-level][data-font-level] .app-body .docs-list { font-size:14px !important; }
html[data-font-level][data-font-level] .app-body .main-content .docs-note strong,
html[data-font-level][data-font-level] .app-body .docs-note strong { font-size:14px !important; }
html[data-font-level][data-font-level] .app-body .main-content .docs-note span,
html[data-font-level][data-font-level] .app-body .docs-note span { font-size:13.5px !important; }
html[data-font-level][data-font-level] .app-body .main-content .docs-method,
html[data-font-level][data-font-level] .app-body .docs-method { font-size:12.5px !important; }
html[data-font-level][data-font-level] .app-body .main-content .code-body,
html[data-font-level][data-font-level] .app-body .code-body { font-size:13px !important; }
html[data-font-level][data-font-level] .app-body .main-content .docs-sample .code-header,
html[data-font-level][data-font-level] .app-body .docs-sample .code-header { font-size:12px !important; }
html[data-font-level][data-font-level] .app-body .main-content .docs-code-tag,
html[data-font-level][data-font-level] .app-body .docs-code-tag { font-size:12.5px !important; }
html[data-font-level][data-font-level] .app-body .main-content .doc-content h3.docs-sub,
html[data-font-level][data-font-level] .app-body .doc-content h3.docs-sub { font-size:15.5px !important; }
html[data-font-level][data-font-level] .app-body .main-content .docs-table .tag,
html[data-font-level][data-font-level] .app-body .docs-table .tag { font-size:12.5px !important; }
/* ---- Key management / create key dialog ---- */
html[data-font-level][data-font-level] .app-body .main-content .key-table .key-code,
html[data-font-level][data-font-level] .app-body .key-table .key-code { font-size:13px !important; }
html[data-font-level][data-font-level] .app-body .main-content .key-table .cell-sub,
html[data-font-level][data-font-level] .app-body .key-table .cell-sub { font-size:12.5px !important; }
html[data-font-level][data-font-level] .app-body .main-content .key-form-section-title span,
html[data-font-level][data-font-level] .app-body .key-form-section-title span { font-size:12.5px !important; }
html[data-font-level][data-font-level] .app-body .main-content .key-editor-secret-label,
html[data-font-level][data-font-level] .app-body .key-editor-secret-label { font-size:13px !important; }
html[data-font-level][data-font-level] .app-body .main-content .key-form-hint,
html[data-font-level][data-font-level] .app-body .key-form-hint { font-size:12.5px !important; }
html[data-font-level][data-font-level] .app-body .main-content .key-secret span,
html[data-font-level][data-font-level] .app-body .key-secret span { font-size:12.5px !important; }
html[data-font-level][data-font-level] .app-body .main-content .muted-text,
html[data-font-level][data-font-level] .app-body .muted-text { font-size:13px !important; }
/* ---- General (logs / models / footer) ---- */
html[data-font-level][data-font-level] .app-body .main-content .footer button,
html[data-font-level][data-font-level] .app-body .footer button { font-size:13px !important; }
html[data-font-level][data-font-level] .app-body .main-content .live-badge,
html[data-font-level][data-font-level] .app-body .live-badge { font-size:12.5px !important; }
html[data-font-level][data-font-level] .app-body .main-content .log-detail,
html[data-font-level][data-font-level] .app-body .log-detail { font-size:12.5px !important; }
html[data-font-level][data-font-level] .app-body .main-content .model-picker-summary,
html[data-font-level][data-font-level] .app-body .model-picker-summary { font-size:13px !important; }

/* 侧栏常驻展示的对外 API 接口地址（每页都可见） */
.endpoint-card { margin:0 16px 12px; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:rgba(14,165,233,.05); }
.endpoint-card-label { font-size:12.5px; line-height:17px; color:var(--muted); letter-spacing:.2px; }
.endpoint-card-row { display:flex; align-items:center; gap:8px; margin-top:6px; }
.endpoint-card code { flex:1 1 auto; min-width:0; font-family:'JetBrains Mono',monospace; font-size:13px; line-height:18px; color:var(--green); word-break:break-all; }
.endpoint-copy { flex:none; width:27px; height:27px; border-radius:6px; border:1px solid var(--line); background:var(--surface); color:var(--muted); cursor:pointer; display:grid; place-items:center; font-size:13px; padding:0; }
.endpoint-copy:hover { border-color:var(--green); color:var(--green); }
html.dark .endpoint-card { background:rgba(14,165,233,.08); border-color:rgba(56,189,248,.2); }
html.dark .endpoint-card code { color:#6ee7b7; }
@media (max-width:960px) { .endpoint-card code { font-size:12.5px; } }

/* 数据看板时间范围与弹窗过期时间共用 .expiry-option（基准 11px），统一抬到 13px */
html[data-font-level][data-font-level] .app-body .main-content .expiry-option,
html[data-font-level][data-font-level] .app-body .expiry-option { font-size:13px !important; }