/* Verstak shared theme variables: light (:root) and dark
   (:root[data-theme="dark"]) palettes. Linked by every template.
   --bg/--panel/.../--shadow are the pre-existing admin-section
   palette (unchanged light values); generated background, text, and border variables
   are generated 1:1 from the literal colors previously hardcoded
   in index.html/docs.html/contact.html/viewer2.html/login.html/
   chat.css so light mode is pixel-identical to before this pass. */

:root {
    --bg: #f7f9fc;
    --panel: #fff;
    --line: #dfe5ee;
    --text: #111827;
    --muted: #5f6b7a;
    --blue: #0f62c9;
    --blue-soft: #eaf3ff;
    --violet: #5f45ff;
    --violet-soft: #f0edff;
    --green: #16a34a;
    --green-soft: #eaf8ef;
    --amber: #b77905;
    --amber-soft: #fff6df;
    --red: #c53030;
    --gray-soft: #f1f3f6;
    --shadow: 0 18px 45px rgba(30,41,59,.06);

    /* Shared button component -- shape (radius/padding/font) and the
       light-mode look are taken directly from the home page's own CTA
       buttons ("Открыть чат"/"Открыть раздел", see .home-card a below),
       so new UI (auth, Messages) reuses the SAME button instead of a
       separately-invented one. Dark mode is intentionally black-based,
       not a blue fill -- transparent background (the modal/page's own
       black shows through) with the accent reserved for the primary
       button's border/text, matching how --blue is used as an accent
       elsewhere in dark mode (focus rings, links), never as a large
       fill surface.
       2026-07-27: bumped 6px -> 8px -- every button on the site (this is
       the ONE shared token every .primary-button/.secondary-button uses,
       home page CTAs included) read as "square" next to the rest of the
       site, which already standardizes on 8px for cards/inputs/panels
       (19 separate border-radius:8px rules across chat.css/messages.css
       alone) -- 6px was the one place still using a smaller, barely-
       perceptible radius. */
    --btn-radius: 8px;
    --btn-padding: 8px 12px;
    --btn-font-size: 13px;

    --btn-primary-bg: rgba(255,255,255,.75);
    --btn-primary-bg-hover: rgba(255,255,255,.75);
    --btn-primary-border: var(--border-d8d8d8);
    --btn-primary-border-hover: var(--border-999);
    --btn-primary-text: var(--text-222);
    --btn-primary-weight: 600;

    --btn-secondary-bg: transparent;
    --btn-secondary-bg-hover: var(--gray-soft);
    --btn-secondary-border: var(--border-d8d8d8);
    --btn-secondary-border-hover: var(--border-999);
    --btn-secondary-text: var(--text-222);
    --btn-secondary-weight: 400;

    --bg-22c55e: #22c55e;
    --bg-245ec7: #245ec7;
    --bg-7fae8d: #7fae8d;
    --bg-9ca3af: #9ca3af;
    --bg-e3f0ff: #e3f0ff;
    --bg-e4f3e8: #e4f3e8;
    --bg-e9f8ef: #e9f8ef;
    --bg-e9f9ee: #e9f9ee;
    --bg-eaf4ff: #eaf4ff;
    --bg-eef5ff: #eef5ff;
    --bg-eef6ff: #eef6ff;
    --bg-eef8f0: #eef8f0;
    --bg-ef4444: #ef4444;
    --bg-f1f1f1: #f1f1f1;
    --bg-f2f5f9: #f2f5f9;
    --bg-f2fbf5: #f2fbf5;
    --bg-f4f6f9: #f4f6f9;
    --bg-f4f8ff: #f4f8ff;
    --bg-f4f9ff: #f4f9ff;
    --bg-f6fbf7: #f6fbf7;
    --bg-f7f8fa: #f7f8fa;
    --bg-f7f9fc: #f7f9fc;
    --bg-f8fafc: #f8fafc;
    --bg-fbfdff: #fbfdff;
    --bg-fcfcfd: #fcfcfd;
    --bg-fdfefe: #fdfefe;
    --bg-fff: #fff;
    --bg-fff0f0: #fff0f0;
    --bg-fff2df: #fff2df;
    --bg-fff4f7: #fff4f7;
    --bg-0b56b3: #0b56b3;
    --bg-0f62c9: #0f62c9;
    --bg-dcfce7: #dcfce7;
    --bg-e0f2fe: #e0f2fe;
    --bg-eaf3ff: #eaf3ff;
    --bg-eaf8ef: #eaf8ef;
    --bg-effdf4: #effdf4;
    --bg-f1f3f6: #f1f3f6;
    --bg-f1f5f9: #f1f5f9;
    --bg-fbfcff: #fbfcff;
    --bg-fee2e2: #fee2e2;
    --bg-fef3c7: #fef3c7;
    --bg-fff2db: #fff2db;
    --bg-fff4f2: #fff4f2;
    --bg-fff6df: #fff6df;
    --bg-eff6ff: #eff6ff;
    --bg-f0fdf4: #f0fdf4;
    --bg-f9fafb: #f9fafb;
    --bg-fef2f2: #fef2f2;
    --border-245ec7: #245ec7;
    --border-2f6b45: #2f6b45;
    --border-8fd1a6: #8fd1a6;
    --border-999: #999;
    --border-9ca3af: #9ca3af;
    --border-aaa: #aaa;
    --border-bdbdbd: #4a4a4a;
    --border-bfe4cc: #bfe4cc;
    --border-c9d7eb: #c9d7eb;
    --border-cbd5df: #cbd5df;
    --border-cfe0f8: #cfe0f8;
    --border-d6d6d6: #d6d6d6;
    --border-d7dce2: #d7dce2;
    --border-d8d8d8: #d8d8d8;
    --border-d8dde4: #d8dde4;
    --border-d8dee7: #d8dee7;
    --border-d8e6fb: #d8e6fb;
    --border-d8e7de: #d8e7de;
    --border-dcdcdc: #dcdcdc;
    --border-ddd: #ddd;
    --border-dde5ef: #dde5ef;
    --border-e1e1e1: #e1e1e1;
    --border-e1e5ea: #e1e5ea;
    --border-e3e3e3: #e3e3e3;
    --border-e4e8ee: #e4e8ee;
    --border-e5e7eb: #e5e7eb;
    --border-edf0f3: #edf0f3;
    --border-eef1f4: #eef1f4;
    --border-9bbbea: #9bbbea;
    --border-b8d7ff: #b8d7ff;
    --border-bbefcf: #bbefcf;
    --border-bde7ca: #bde7ca;
    --border-c8d3e3: #c8d3e3;
    --border-dfe5ee: #dfe5ee;
    --border-f0c8c3: #f0c8c3;
    --border-f3c987: #f3c987;
    --border-f3d48b: #f3d48b;
    --border-98a2b3: #98a2b3;
    --border-bbf7d0: #bbf7d0;
    --border-bfdbfe: #bfdbfe;
    --border-fecaca: #fecaca;
    --text-0066aa: #0066aa;
    --text-111827: #111827;
    --text-168044: #168044;
    --text-16a34a: #16a34a;
    --text-1f4f7a: #1f4f7a;
    --text-1f5132: #1f5132;
    --text-20242a: #20242a;
    --text-222: #222;
    --text-245338: #245338;
    --text-2f6b45: #2f6b45;
    --text-2f8a45: #2f8a45;
    --text-333: #333;
    --text-374151: #374151;
    --text-444: #444;
    --text-4b5563: #4b5563;
    --text-52606d: #52606d;
    --text-555: #555;
    --text-5f6b7a: #5f6b7a;
    --text-666: #666;
    --text-6b7280: #6b7280;
    --text-777: #777;
    --text-888: #888;
    --text-071329: #071329;
    --text-075985: #075985;
    --text-0f4f9e: #0f4f9e;
    --text-0f62c9: #0f62c9;
    --text-116c32: #116c32;
    --text-166534: #166534;
    --text-1f2937: #1f2937;
    --text-334155: #334155;
    --text-475569: #475569;
    --text-5b6472: #5b6472;
    --text-64748b: #64748b;
    --text-73510a: #73510a;
    --text-92400e: #92400e;
    --text-991b1b: #991b1b;
    --text-9a5a00: #9a5a00;
    --text-b42318: #b42318;
    --text-1d4ed8: #1d4ed8;
    --text-344054: #344054;
    --text-475467: #475467;
    --text-667085: #667085;
    --text-b00020: #b00020;
    --text-c96a00: #c96a00;
    --text-fff: #fff;
}

:root[data-theme="dark"] {
    /* Dark theme is black, not blue: no fill background here at all --
       transparent lets the already-black modal/page surface show
       through. --blue is used only as the primary button's border/
       text accent, the same restrained role it already has elsewhere
       in dark mode (focus rings, links). */
    --btn-primary-bg: transparent;
    --btn-primary-bg-hover: var(--gray-soft);
    --btn-primary-border: var(--blue);
    --btn-primary-border-hover: var(--blue);
    --btn-primary-text: var(--text-fff);

    --btn-secondary-bg: transparent;
    --btn-secondary-bg-hover: var(--gray-soft);
    --btn-secondary-border: var(--border-d8d8d8);
    --btn-secondary-border-hover: var(--border-999);
    --btn-secondary-text: var(--text-222);

    --bg: #111213;
    --panel: #121212;
    --line: #383c42;
    --text: #dee4f1;
    --muted: #97a2ae;
    --blue: #1375ed;
    --blue-soft: #1a1c1e;
    --violet: #583dff;
    --violet-soft: #1b1a1e;
    --green: #1bc75a;
    --green-soft: #1a1e1c;
    --amber: #df9306;
    --amber-soft: #1e1d1a;
    --red: #e05353;
    --gray-soft: #1a1c1e;
    --shadow: 0 18px 45px rgba(0,0,0,.45);

    --bg-22c55e: #34dc72;
    --bg-245ec7: #3972db;
    --bg-7fae8d: #88b495;
    --bg-9ca3af: #949ba8;
    --bg-e3f0ff: #1a1c1e;
    --bg-e4f3e8: #1a1e1b;
    --bg-e9f8ef: #1a1e1c;
    --bg-e9f9ee: #1a1e1b;
    --bg-eaf4ff: #1a1c1e;
    --bg-eef5ff: #1a1c1e;
    --bg-eef6ff: #1a1c1e;
    --bg-eef8f0: #1a1e1b;
    --bg-ef4444: #f04c4c;
    --bg-f1f1f1: #1c1c1c;
    --bg-f2f5f9: #1a1c1e;
    --bg-f2fbf5: #1a1e1b;
    --bg-f4f6f9: #1a1c1e;
    --bg-f4f8ff: #111213;
    --bg-f4f9ff: #111213;
    --bg-f6fbf7: #111311;
    --bg-f7f8fa: #111113;
    --bg-f7f9fc: #111213;
    --bg-f8fafc: #111213;
    --bg-fbfdff: #111213;
    --bg-fcfcfd: #111113;
    --bg-fdfefe: #111313;
    --bg-fff: #121212;
    --bg-fff0f0: #131111;
    --bg-fff2df: #1e1c1a;
    --bg-fff4f7: #131111;
    --bg-0b56b3: #0d68d9;
    --bg-0f62c9: #1375ed;
    --bg-dcfce7: #1a1e1c;
    --bg-e0f2fe: #1a1c1e;
    --bg-eaf3ff: #1a1c1e;
    --bg-eaf8ef: #1a1e1c;
    --bg-effdf4: #1a1e1c;
    --bg-f1f3f6: #1a1c1e;
    --bg-f1f5f9: #1a1c1e;
    --bg-fbfcff: #111113;
    --bg-fee2e2: #1e1a1a;
    --bg-fef3c7: #3e3613;
    --bg-fff2db: #1e1d1a;
    --bg-fff4f2: #131111;
    --bg-fff6df: #1e1d1a;
    --bg-eff6ff: #1a1c1e;
    --bg-f0fdf4: #1a1e1b;
    --bg-f9fafb: #111213;
    --bg-fef2f2: #131111;
    --border-245ec7: #3d75dc;
    --border-2f6b45: #46a067;
    --border-8fd1a6: #5cbc7e;
    --border-999: #8c8c8c;
    --border-9ca3af: #808998;
    --border-aaa: #8c8c8c;
    --border-bdbdbd: #8c8c8c;
    --border-bfe4cc: #38423c;
    --border-c9d7eb: #383c42;
    --border-cbd5df: #383d42;
    --border-cfe0f8: #304869;
    --border-d6d6d6: #3d3d3d;
    --border-d7dce2: #383d42;
    --border-d8d8d8: #3d3d3d;
    --border-d8dde4: #383c42;
    --border-d8dee7: #383c42;
    --border-d8e6fb: #383c42;
    --border-d8e7de: #38423c;
    --border-dcdcdc: #3d3d3d;
    --border-ddd: #3d3d3d;
    --border-dde5ef: #383d42;
    --border-e1e1e1: #3d3d3d;
    --border-e1e5ea: #383d42;
    --border-e3e3e3: #3d3d3d;
    --border-e4e8ee: #383c42;
    --border-e5e7eb: #383c42;
    --border-edf0f3: #383d42;
    --border-eef1f4: #383d42;
    --border-9bbbea: #344865;
    --border-b8d7ff: #264873;
    --border-bbefcf: #356447;
    --border-bde7ca: #3b5e46;
    --border-c8d3e3: #383c42;
    --border-dfe5ee: #383c42;
    --border-f0c8c3: #633b36;
    --border-f3c987: #eaa12e;
    --border-f3d48b: #e9b22f;
    --border-98a2b3: #7b889e;
    --border-bbf7d0: #2e6b43;
    --border-bfdbfe: #274872;
    --border-fecaca: #712828;
    --text-0066aa: #3ab0ff;
    --text-111827: #dee4f1;
    --text-168044: #46df88;
    --text-16a34a: #5ee992;
    --text-1f4f7a: #5497d4;
    --text-1f5132: #59bf80;
    --text-20242a: #dbdfe4;
    --text-222: #e2e2e2;
    --text-245338: #5fba86;
    --text-2f6b45: #6bbe89;
    --text-2f8a45: #77d18d;
    --text-333: #d4d4d4;
    --text-374151: #bac3d0;
    --text-444: #c5c5c5;
    --text-4b5563: #abb3bf;
    --text-52606d: #a2aeb9;
    --text-555: #b7b7b7;
    --text-5f6b7a: #97a2ae;
    --text-666: #a8a8a8;
    --text-6b7280: #959ba7;
    --text-777: #9e9e9e;
    --text-888: #9e9e9e;
    --text-071329: #dce6f9;
    --text-075985: #27acf4;
    --text-0f4f9e: #4e95ee;
    --text-0f62c9: #72acf5;
    --text-116c32: #39e075;
    --text-166534: #43d67b;
    --text-1f2937: #d0d9e5;
    --text-334155: #b7c3d4;
    --text-475569: #a6b2c3;
    --text-5b6472: #9ea6b2;
    --text-64748b: #b4bdc9;
    --text-73510a: #edae2c;
    --text-92400e: #ed8342;
    --text-991b1b: #e36060;
    --text-9a5a00: #ffa62a;
    --text-b42318: #ec786f;
    --text-1d4ed8: #93acf1;
    --text-344054: #b8c2d3;
    --text-475467: #a7b2c3;
    --text-667085: #919aab;
    --text-b00020: #ff4063;
    --text-c96a00: #ffb059;
    --text-fff: #fff;
}

.theme-toggle-button{
    box-sizing:border-box;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    min-width:36px;
    min-height:36px;
    padding:0;
    overflow:hidden;
    background-color:transparent;
    border:none;
    border-radius:6px;
    cursor:pointer;
    vertical-align:middle;
    /* Same fix as .msg-uin-badge's own flex-shrink:0 (messages.css) --
       this button already has a fixed 36px width/min-width, but without
       flex-shrink:0 a flex container under width pressure can still
       compress it, which is what let it visually ride on top of the
       UIN badge next to it in .header-actions instead of the row
       wrapping. */
    flex-shrink:0;
}

.theme-toggle-button:hover{
    background-color:var(--gray-soft);
}

.theme-toggle-button:focus-visible{
    outline:2px solid var(--blue);
    outline-offset:2px;
}

.theme-toggle-button > img.theme-toggle-icon{
    width:24px;
    height:24px;
    max-width:24px;
    max-height:24px;
    object-fit:contain;
    display:block;
    flex:0 0 auto;
}

.theme-toggle-button > img.theme-toggle-icon.icon-dark{
    display:none;
}

:root[data-theme="dark"] .theme-toggle-button > img.theme-toggle-icon.icon-light{
    display:none;
}

:root[data-theme="dark"] .theme-toggle-button > img.theme-toggle-icon.icon-dark{
    display:block;
}

@media (max-width:768px){
    .theme-toggle-button{
        width:34px;
        height:34px;
        min-width:34px;
        min-height:34px;
    }
}

/* Admin terminal interface — scoped to body.admin-terminal only (admin templates). */

:root{
    --admin-terminal-font:ui-monospace,Consolas,"Courier New",monospace;
    --admin-card-border:#c7d3e0;
}

body.admin-terminal,
body.admin-terminal input,
body.admin-terminal textarea,
body.admin-terminal select,
body.admin-terminal button{
    font-family:var(--admin-terminal-font);
}

body.admin-terminal .admin-header{
    background:var(--panel);
    backdrop-filter:none;
}

:root[data-theme="dark"] body.admin-terminal{
    --admin-terminal-text:#8fe6a8;
    --admin-terminal-muted:#5f9b74;
    --admin-terminal-border:#23392b;
    --admin-terminal-accent:#4bdc7d;
    --admin-terminal-panel:#0c1410;
    --admin-card-border:#23392b;

    --text:#8fe6a8;
    --text-071329:#a9f0c0;
    --text-111827:#a9f0c0;
    --text-1f2937:#a9f0c0;
    --text-334155:#8fe6a8;
    --text-374151:#8fe6a8;
    --text-fff:#eafff1;

    --muted:#5f9b74;
    --text-4b5563:#6fae82;
    --text-5b6472:#6fae82;
    --text-5f6b7a:#6fae82;
    --text-64748b:#6fae82;
    --text-475569:#6fae82;

    --blue:#4bdc7d;
    --blue-soft:#122217;
    --text-0f62c9:#4bdc7d;
    --text-0f4f9e:#4bdc7d;
    --text-075985:#4bdc7d;

    --panel:#0c1410;
    --bg:#080b09;
    --bg-fff:#0c1410;
    --bg-fbfcff:#080b09;
    --bg-f2f5f9:#101a13;
    --bg-f1f3f6:#101a13;
    --bg-f1f5f9:#101a13;
    --bg-f8fafc:#101a13;
    --bg-eaf3ff:#122217;
    --bg-e0f2fe:#122217;
    --gray-soft:#101a13;

    --line:#23392b;
    --border-c8d3e3:#23392b;
    --border-cbd5df:#23392b;
    --border-dfe5ee:#23392b;
    --border-9bbbea:#2c5a3c;
    --border-b8d7ff:#2c5a3c;

    --bg-0f62c9:#1c6b39;
    --bg-0b56b3:#22823f;

    --shadow:0 18px 45px rgba(0,0,0,.55);
}