/* Theme tokens and targeted small-screen refinements for the existing OPI layout. */
:root {
    color-scheme: light;
    --surface: #fff;
    --surface-soft: #edf2e5;
    --control: #fbfcf9;
    --button-bg: #182017;
    --button-ink: #fff;
    --accent-ink: #182017;
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --paper: #111610;
    --ink: #edf2e7;
    --muted: #a5b09c;
    --line: #333e2e;
    --white: #1a2218;
    --surface: #1a2218;
    --surface-soft: #232e1e;
    --control: #151d13;
    --deep: #0c110b;
    --button-bg: #c5f969;
    --button-ink: #15200e;
}
html { scroll-padding-top: 20px; }
body { min-width: 280px; }
::selection { color: var(--accent-ink); }
.button.dark, .tab.active { background: var(--button-bg); color: var(--button-ink); }
.button.lime, .floating-tag.three { color: var(--accent-ink); }
.button.light, .panel, .model-card, .stat-card { background: var(--surface); }
input, select, textarea, .search-input { background: var(--control); border-color: var(--line); color: var(--ink); }
input[type="checkbox"] { accent-color: #82ab46; }
.hero-grid > *, .auth-layout > *, .formula-grid > *, .code-section > *, .stats-grid > *,
.status-row > *, .admin-model-row > *, .input-row > *, .key-row > div { min-width: 0; }
.key-row strong, .status-row strong, .page-intro h1 { overflow-wrap: anywhere; }
.header-tools { display: flex; align-items: center; gap: 18px; }
.theme-toggle, .menu-toggle {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    height: 44px; min-width: 44px; gap: 8px; padding: 0 12px;
    color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 9px;
}
.theme-toggle:hover, .menu-toggle:hover { background: var(--surface-soft); }
.theme-toggle-label { font-size: 12px; }
.theme-sun, .menu-toggle, .header-inner nav .mobile-nav-link { display: none; }
[data-theme="dark"] .theme-moon { display: none; }
[data-theme="dark"] .theme-sun { display: block; }
.menu-toggle { width: 44px; flex-direction: column; gap: 4px; padding: 11px; }
.menu-toggle span { width: 20px; height: 1.5px; background: currentColor; border-radius: 2px; }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(5.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-5.5px) rotate(-45deg); }
.docs-toc-toggle { display: none; }
.table-wrap:focus-visible { outline: 2px solid #82ab46; outline-offset: 3px; }
.table-wrap { overscroll-behavior-x: contain; }
.table-scroll-hint { display: none; }
.stat-value { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stats-grid > .stat-card.wide-value { grid-column: span 2; }
.stat-card.accent { background: var(--green); color: var(--accent-ink); }
.stat-card.accent .stat-caption { color: #50633b; }
[data-theme="dark"] .nav-count, [data-theme="dark"] .hero-badge,
[data-theme="dark"] .protocol-labels span, [data-theme="dark"] .docs-sidebar a,
[data-theme="dark"] .empty { background: var(--surface-soft); color: #bfceb1; border-color: var(--line); }
[data-theme="dark"] .hero h1 em, [data-theme="dark"] .gift-number { color: #a5c587; }
[data-theme="dark"] .hero-art { background: #202c1c; border-color: #35472b; }
[data-theme="dark"] .art-label { color: #a7bb95; }
[data-theme="dark"] .floating-tag:not(.three), [data-theme="dark"] .model-orb {
    background: #283523; border-color: #45563b; color: #e4eddb;
}
[data-theme="dark"] .model-orb.b { background: #29364f; color: #c8d9ff; }
[data-theme="dark"] .model-orb.c { background: #3b2e4c; color: #e2d0f9; }
[data-theme="dark"] .providers, [data-theme="dark"] .footer-top > div,
[data-theme="dark"] .footer-bottom, [data-theme="dark"] .model-slug,
[data-theme="dark"] .key-row code, [data-theme="dark"] .stat-label,
[data-theme="dark"] .stat-caption, [data-theme="dark"] th,
[data-theme="dark"] .chart-labels, [data-theme="dark"] .step-number { color: var(--muted); }
[data-theme="dark"] .model-icon { background: #273222; border-color: #3c4834; }
[data-theme="dark"] .model-icon.anthropic { background: #3a2920; color: #efb99b; }
[data-theme="dark"] .model-icon.google, [data-theme="dark"] .model-icon.deepseek { background: #23304a; color: #b7caff; }
[data-theme="dark"] .model-icon.xai { background: #302c35; color: #d7cfe2; }
[data-theme="dark"] .model-icon.qwen { background: #302343; color: #d3b7fa; }
[data-theme="dark"] .model-card-bottom, [data-theme="dark"] td { border-color: var(--line); }
[data-theme="dark"] .status-badge { color: #b1ce92; }
[data-theme="dark"] .status-badge.unknown, [data-theme="dark"] .status-badge.maintenance { color: var(--muted); }
[data-theme="dark"] .status-badge.offline, [data-theme="dark"] .status-badge.error { color: #f0ac9c; }
[data-theme="dark"] .status-badge.degraded { color: #e7cb80; }
[data-theme="dark"] .formula-section { background: #1c2817; border-color: var(--line); }
[data-theme="dark"] .formula-box { background: #151e12; border-color: var(--line); }
[data-theme="dark"] .formula-grid p, [data-theme="dark"] .formula-breakdown { color: var(--muted); }
[data-theme="dark"] .formula-code b { color: #bbdf8f; }
[data-theme="dark"] .notice, [data-theme="dark"] .status-summary {
    background: #23311b; border-color: #3a502c; color: #c1d6ae;
}
[data-theme="dark"] .notice.warning { background: #352d19; border-color: #594a26; color: #ead198; }
[data-theme="dark"] .notice.error { background: #39231f; border-color: #694239; color: #f2b8a9; }
[data-theme="dark"] .inline-error { color: #f1a994; }
[data-theme="dark"] .status-summary p { color: #b1c39e; }
[data-theme="dark"] .status-summary .status-big { color: #c5f969; }
[data-theme="dark"] .docs-main p, [data-theme="dark"] .docs-main li,
[data-theme="dark"] .docs-main .lead { color: #b3bfaa; }
[data-theme="dark"] .docs-main table { background: var(--surface); }
[data-theme="dark"] .docs-main code:not(pre code), [data-theme="dark"] .method {
    background: #26331f; border-color: #3b4b31; color: #c2dba9;
}
[data-theme="dark"] .form-note { color: #a5b09c !important; }
[data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: #8c9c81; }
[data-theme="dark"] .table-status { background: #28391d; color: #c3dca7; }
[data-theme="dark"] .table-status.failed, [data-theme="dark"] .table-status.interrupted { background: #3a2720; color: #edb6a0; }
[data-theme="dark"] .table-status.pending { background: #382f1d; color: #e4cd94; }
[data-theme="dark"] .icon-button { color: #c4d2b8; }
[data-theme="dark"] .icon-button:hover { background: var(--surface-soft); }
[data-theme="dark"] .chart svg > path { stroke: var(--line); }
[data-theme="dark"] .stat-card.accent .stat-label { color: #50633b; }
[data-theme="dark"] nav a:hover, [data-theme="dark"] .text-link:hover { color: #c5f969; }

@media (max-width: 1000px) {
    .header-tools { gap: 10px; }
    .theme-toggle-label { display: none; }
    .theme-toggle { padding: 0; }
}
@media (max-width: 760px) {
    body { font-size: 15px; }
    .container { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
    .site-header { min-height: 76px; }
    .header-inner { padding-top: 14px; padding-bottom: 14px; gap: 12px; }
    .brand { font-size: 34px; }
    .brand-caption, .brand-divider { display: none; }
    .header-tools { margin-left: auto; gap: 8px; }
    .header-actions { gap: 8px; margin: 0; }
    .header-actions .button.small, .header-actions .tab { min-height: 44px; padding: 10px 14px; font-size: 12px; }
    .header-actions .text-link { display: none; }
    .header-actions [data-action="logout"] { display: none; }
    .menu-toggle { display: inline-flex; }
    .header-inner nav { display: none; order: 3; width: 100%; padding-top: 12px; gap: 8px; }
    .site-header.menu-open nav { display: grid; grid-template-columns: 1fr 1fr; }
    .header-inner nav a, .header-inner nav .mobile-nav-link {
        display: flex; min-height: 48px; padding: 10px 12px; border-radius: 9px;
        background: var(--surface-soft); font-size: 13px; gap: 7px;
    }
    .header-inner nav button.mobile-nav-link { border: 0; color: var(--ink); text-align: left; align-items: center; font-weight: 500; }
    .header-inner nav a[aria-current="page"] { box-shadow: inset 0 0 0 1px #83a94e; }
    .hero { padding-top: 28px; }
    .hero-grid { gap: 24px; }
    .hero h1 { font-size: clamp(40px, 9vw, 56px); letter-spacing: -2px; margin: 20px 0; }
    .hero-description { font-size: 15px; line-height: 1.7; max-width: 500px; }
    .hero-small { flex-wrap: wrap; gap: 8px 14px; font-size: 11px; }
    .hero .button-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .hero .button-row .button { gap: 10px; padding: 12px; white-space: normal; }
    .button { min-height: 48px; font-size: 13px; max-width: 100%; white-space: normal; text-align: center; }
    .button.small, .tab, .icon-button { min-height: 44px; }
    .icon-button { width: 44px; height: 44px; flex-shrink: 0; }
    .tab { padding: 10px 14px; font-size: 12px; }
    .eyebrow { font-size: 10px; letter-spacing: 1.2px; }
    .hero-badge { font-size: 10px; }
    .section { padding: 36px 0; }
    .section-head { gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
    .section-head h2, .formula-grid h2, .code-section h2 { font-size: 30px; }
    .section-head p { display: block; font-size: 13px; max-width: none; }
    .text-link { font-size: 13px; }
    .catalog-tools { gap: 16px; }
    .catalog-tools .tabs, .admin-tabs { width: 100%; flex-wrap: nowrap; overflow-x: auto; padding: 2px 1px 8px; overscroll-behavior-x: contain; }
    .catalog-tools .tab, .admin-tabs .tab { flex-shrink: 0; white-space: nowrap; }
    input, select, textarea, .search-input, .dashboard-toolbar select { font-size: 16px; min-height: 48px; }
    input[type="checkbox"] { min-height: 20px; width: 20px; height: 20px; flex-shrink: 0; }
    label { font-size: 13px; gap: 8px; }
    .model-card { padding: 20px; }
    .model-name { font-size: 17px; }
    .model-slug { font-size: 11px; }
    .model-context, .status-badge, .protocol-labels span, .multiplier span { font-size: 11px; }
    .formula-grid p, .step p, .code-section p, .gift-banner p { font-size: 14px; }
    .formula-code { font-size: 18px; overflow-wrap: anywhere; }
    .formula-breakdown { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; font-size: 12px; }
    .formula-breakdown strong { font-size: 16px; }
    .formula-total { align-items: flex-start; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; }
    .formula-total strong { font-size: 18px; }
    .steps { grid-template-columns: 1fr; gap: 20px; }
    .step { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; }
    .step h3 { margin: 0 0 8px; font-size: 18px; }
    .step p { grid-column: 2; max-width: none; margin: 0; }
    .step-number { padding-top: 5px; }
    .code-section { padding: 24px 20px; }
    .code-window pre { padding: 16px; font-size: 11px; }
    .code-window-bar { gap: 8px; font-size: 9px; }
    .page-intro { padding: 30px 0 18px; }
    .page-intro h1 { font-size: clamp(29px, 7vw, 38px); line-height: 1.2; letter-spacing: -1.2px; }
    .page-intro p, .key-check .lead, .auth-pitch p { font-size: 14px; }
    .panel { padding: 20px; border-radius: 14px; }
    .panel p, .notice { font-size: 13px; }
    .notice { padding: 14px; overflow-wrap: anywhere; }
    .auth-layout { padding-top: 28px; gap: 20px; }
    .auth-pitch h1 { font-size: 32px; margin: 16px 0; }
    .auth-switch { font-size: 13px; }
    .form-note { font-size: 12px !important; }
    .stats-grid { gap: 10px; }
    .stats-grid > .stat-card.wide-value { grid-column: 1 / -1; }
    .stat-card { padding: 15px; }
    .stat-label, .stat-caption { font-size: 11px; }
    .stat-value { font-size: clamp(23px, 5.5vw, 30px); line-height: 1.25; letter-spacing: -.8px; }
    .dashboard-toolbar { align-items: flex-start; gap: 12px; }
    .dashboard-toolbar h1 { flex: 1 1 100%; }
    .dashboard-toolbar select { width: auto; }
    .input-row { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
    .input-row label { flex: auto; width: 100%; }
    .input-row .button { width: 100%; margin-bottom: 0; }
    .key-row { padding: 12px; }
    .key-row strong { font-size: 13px; }
    .key-row code { font-size: 12px; }
    .table-wrap { position: relative; border: 1px solid var(--line); border-radius: 10px; margin-top: 14px; }
    .table-wrap table { font-size: 12px; }
    .table-wrap th, .table-wrap td { padding: 12px; }
    .table-wrap td code { font-size: 11px; }
    .table-scroll-hint { display: block; font-size: 12px; color: var(--muted); margin: 8px 0 0; }
    .table-status { font-size: 11px; }
    .pager { justify-content: space-between; font-size: 12px; gap: 8px; flex-wrap: wrap; }
    .admin-model-row { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 18px 0; font-size: 14px; }
    .admin-model-row > div { grid-column: 1 / -1; }
    .admin-model-row input[name="multiplier"] { width: 100%; }
    .admin-model-row .checkbox-label { font-size: 12px; }
    .admin-model-row .button { grid-column: 1 / -1; width: 100%; }
    .inline-code { font-size: 12px; }
    .status-summary { align-items: flex-start; padding: 18px; gap: 12px; }
    .status-summary h2 { font-size: 17px; }
    .status-summary p { font-size: 12px; }
    .status-summary .status-big { font-size: 28px; white-space: nowrap; }
    .status-row.muted { display: none; }
    .status-row:not(.muted) { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 18px 0; font-size: 14px; }
    .status-row .muted { font-size: 12px; }
    .status-row > :nth-child(3)::before { content: 'Задержка / uptime'; display: block; font-size: 11px; color: var(--muted); margin-bottom: 4px; }
    .status-row > :last-child { text-align: right; }
    .status-row > :last-child::before { content: 'Последняя проверка'; display: block; font-size: 11px; margin-bottom: 4px; }
    .docs-layout { display: flex; flex-direction: column; gap: 16px; padding-top: 20px; }
    .docs-toc-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: 14px; }
    .docs-toc-toggle::after { content: '+'; font-size: 21px; line-height: 1; }
    .docs-toc-toggle[aria-expanded="true"]::after { content: '−'; }
    .docs-sidebar { display: none; width: 100%; padding: 4px 0 16px; }
    .docs-sidebar.is-open { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .docs-sidebar a { display: flex; align-items: center; min-height: 44px; padding: 10px; font-size: 12px; background: var(--surface-soft); }
    .docs-main { width: 100%; }
    .docs-main h1 { font-size: clamp(27px, 7vw, 34px); letter-spacing: -1px; }
    .docs-main h2 { font-size: 24px; margin-top: 36px; }
    .docs-main p, .docs-main li { font-size: 14px; line-height: 1.8; }
    .docs-main .lead { font-size: 15px; }
    .docs-main pre { padding: 54px 16px 18px; font-size: 12px; line-height: 1.8; }
    .copy-code { min-height: 36px; padding: 6px 10px; font-size: 11px; }
    .docs-main code:not(pre code) { font-size: 12px; }
    .docs-main .endpoint { align-items: flex-start; font-size: 12px; overflow-wrap: anywhere; }
    .docs-main table { table-layout: fixed; }
    .docs-main th, .docs-main td { padding: 10px 8px; font-size: 12px; overflow-wrap: anywhere; }
    .docs-main table td code { display: inline; max-width: none; }
    .key-check { padding: 28px 0 40px; }
    .key-check h1 { font-size: 30px; }
    .key-check .stats-grid { grid-template-columns: 1fr; }
    .footer-top { gap: 24px 16px; }
    .footer-top p { font-size: 12px; }
    .footer-top > div { font-size: 12px; gap: 4px; }
    .footer-top > div a { display: flex; align-items: center; min-height: 44px; }
    .footer-bottom { font-size: 11px; padding-bottom: env(safe-area-inset-bottom); }
    dialog { padding: 20px; width: calc(100% - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; }
    .dialog-head { gap: 12px; }
    .dialog-head h2 { font-size: 20px; }
    dialog textarea { font-size: 14px; }
    dialog .button-row { display: grid; grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
    .container { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
    .header-tools { gap: 6px; }
    .header-actions .button.small, .header-actions .tab { padding-left: 10px; padding-right: 10px; }
    .hero .button-row { grid-template-columns: 1fr; }
    .hero-art { height: 265px; }
    .token-card { width: 225px; top: 59px; }
    .floating-tag { font-size: 9px; padding: 8px; }
    .floating-tag.three { bottom: 17px; }
    .art-label { left: 16px; font-size: 8px; }
    .art-label.right { right: 16px; bottom: 12px; }
    .panel { padding: 16px; }
    .stats-grid { grid-template-columns: 1fr; }
    .stats-grid > .stat-card.wide-value { grid-column: 1 / -1; }
    .docs-sidebar.is-open { grid-template-columns: 1fr; }
    .status-row:not(.muted) { grid-template-columns: minmax(0, 1fr); }
    .status-row > :last-child { text-align: left; }
}