/* Цвета определены один раз для кабинета, формы входа и диалогов. */
:root {
    color-scheme: light;
    --bg: #f6f7f9;
    --surface: #ffffff;
    --surface-soft: #eef2f6;
    --field-disabled-bg: #e5e9ee;
    --field-disabled-text: #787f88;
    --sidebar: #ffffff;
    --text: #172b3c;
    --muted: #4b5c70;
    --nav-text: #334b63;
    --border: #d6dee8;
    /* Внутренние разделители мягче внешних границ карточек. */
    --divider: #e9edf3;
    --accent: #047857;
    --accent-hover: #046044;
    --accent-soft: #dff3e9;
    --accent-text: #046b48;
    --success: #046b48;
    --success-soft: #dff3e9;
    --danger: #b64347;
    --danger-soft: #fff0f0;
    --warning: #946515;
    --warning-soft: #fff6e5;
    /* Насыщенные заливки сообщений отделены от мягких цветов меток и таблиц. */
    --notice-warning-border: #fdcb75;
    --notice-warning-bg: #ffe1a7;
    --notice-error-border: #f49ba7;
    --notice-error-bg: #ffc8d0;
    --notice-error-text: #8f2434;
    --info: #4267a4;
    --info-soft: #edf3ff;
    --shadow: 0 2px 4px #18243b06, 0 5px 18px #18243b07;
    --focus: #089e765c;
    --radius: 14px;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #101419;
    --surface: #181e25;
    --surface-soft: #1f2730;
    --field-disabled-bg: #252d36;
    --field-disabled-text: #696e75;
    --sidebar: #151a20;
    --text: #ecf0f5;
    --muted: #a1acba;
    --nav-text: #a1acba;
    --border: #2c3540;
    --divider: #2c3540;
    --accent: #087f5b;
    --accent-hover: #07835d;
    --accent-soft: #17372e;
    --accent-text: #73dab0;
    --success: #73dab0;
    --success-soft: #17372e;
    --danger: #f29da0;
    --danger-soft: #3f2529;
    --warning: #edc379;
    --warning-soft: #3a3222;
    --notice-warning-border: var(--warning);
    --notice-warning-bg: var(--warning-soft);
    --notice-error-border: var(--danger);
    --notice-error-bg: var(--danger-soft);
    --notice-error-text: var(--danger);
    --info: #a6c4f9;
    --info-soft: #22344b;
    --shadow: 0 8px 30px #00000015;
    --focus: #6ad8b64d;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        color-scheme: dark;
        --bg: #101419;
        --surface: #181e25;
        --surface-soft: #1f2730;
        --field-disabled-bg: #252d36;
        --field-disabled-text: #696e75;
        --sidebar: #151a20;
        --text: #ecf0f5;
        --muted: #a1acba;
        --nav-text: #a1acba;
        --border: #2c3540;
        --divider: #2c3540;
        --accent: #087f5b;
        --accent-hover: #07835d;
        --accent-soft: #17372e;
        --accent-text: #73dab0;
        --success: #73dab0;
        --success-soft: #17372e;
        --danger: #f29da0;
        --danger-soft: #3f2529;
        --warning: #edc379;
        --warning-soft: #3a3222;
        --notice-warning-border: var(--warning);
        --notice-warning-bg: var(--warning-soft);
        --notice-error-border: var(--danger);
        --notice-error-bg: var(--danger-soft);
        --notice-error-text: var(--danger);
        --info: #a6c4f9;
        --info-soft: #22344b;
        --shadow: 0 8px 30px #00000015;
        --focus: #6ad8b64d;
    }
}

/* Дополнительная голубовато-бирюзовая палитра: исходные зелёные значения выше сохраняются. */
:root[data-palette="turquoise"] {
    --accent: #007b95;
    --accent-hover: #00657c;
    --accent-soft: #def3f8;
    --accent-text: #006d85;
    --focus: #00a6c960;
}

:root[data-palette="turquoise"][data-theme="dark"] {
    --accent: #087f98;
    --accent-hover: #087b96;
    --accent-soft: #153640;
    --accent-text: #75d8ec;
    --focus: #75d8ec4d;
}

@media (prefers-color-scheme: dark) {
    :root[data-palette="turquoise"]:not([data-theme="light"]):not([data-theme="dark"]) {
        --accent: #087f98;
        --accent-hover: #087b96;
        --accent-soft: #153640;
        --accent-text: #75d8ec;
        --focus: #75d8ec4d;
    }
}

/* Тёплая палитра с красным оттенком и самостоятельная насыщенная синяя палитра. */
:root[data-palette="orange"] {
    --accent: #c94216;
    --accent-hover: #aa3411;
    --accent-soft: #fff0e8;
    --accent-text: #9a3412;
    --focus: #ef754d60;
}

:root[data-palette="orange"][data-theme="dark"] {
    --accent: #c94216;
    --accent-hover: #b53510;
    --accent-soft: #42271f;
    --accent-text: #ffb18a;
    --focus: #ffb18a4d;
}

:root[data-palette="blue"] {
    --accent: #2454ce;
    --accent-hover: #1e40af;
    --accent-soft: #eaf0ff;
    --accent-text: #1e40af;
    --focus: #4b7efa60;
}

:root[data-palette="blue"][data-theme="dark"] {
    --accent: #285ada;
    --accent-hover: #244fc2;
    --accent-soft: #1e2d4b;
    --accent-text: #9dbbff;
    --focus: #9dbbff4d;
}

@media (prefers-color-scheme: dark) {
    :root[data-palette="orange"]:not([data-theme="light"]):not([data-theme="dark"]) {
        --accent: #c94216;
        --accent-hover: #b53510;
        --accent-soft: #42271f;
        --accent-text: #ffb18a;
        --focus: #ffb18a4d;
    }

    :root[data-palette="blue"]:not([data-theme="light"]):not([data-theme="dark"]) {
        --accent: #285ada;
        --accent-hover: #244fc2;
        --accent-soft: #1e2d4b;
        --accent-text: #9dbbff;
        --focus: #9dbbff4d;
    }
}

/* Белый знак бренда сохраняется, цвет его фона следует дополнительной палитре. */
:root[data-palette="turquoise"] img[src="/assets/brand.svg"] { filter: hue-rotate(24deg); }
:root[data-palette="orange"] img[src="/assets/brand.svg"] { filter: hue-rotate(-150deg) saturate(1.4); }
:root[data-palette="blue"] img[src="/assets/brand.svg"] { filter: hue-rotate(60deg) saturate(1.4); }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
/* Диалог прокручивается самостоятельно; фон остаётся на месте до закрытия последнего окна. */
html { scrollbar-gutter: stable; }
html.modal-open { overflow: hidden; }
html.modal-open body { position: fixed; top: var(--modal-scroll-top); left: 0; right: 0; overflow: hidden; }
.modal { overscroll-behavior: contain; }
.dialog-body { overscroll-behavior: contain; }
button, input, select, textarea { font: inherit; }
button, select, summary { cursor: pointer; }
button, input, select, textarea, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: var(--accent-text); }
button:disabled { cursor: not-allowed; opacity: .48; }
button, a, input, select, textarea, summary { outline-offset: 3px; }
:focus-visible { outline: 3px solid var(--focus); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
    border-color: var(--accent-text);
    outline: 3px solid var(--focus);
    outline-offset: 0;
}
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 10px; font-size: clamp(27px, 2.4vw, 34px); line-height: 1.22; letter-spacing: -.035em; font-weight: 650; }
h2 { margin-bottom: 4px; font-size: 17px; letter-spacing: -.015em; font-weight: 650; }
h3 { margin-bottom: 8px; font-size: 17px; font-weight: 600; }
p { margin-bottom: 16px; }
.icon { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 100; padding: 12px; background: var(--surface); }
.skip-link:focus { top: 12px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-size: 20px; font-weight: 700; letter-spacing: -.7px; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.live-dot { display: inline-block; width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--accent-text); box-shadow: 0 0 0 4px var(--accent-soft); }
.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--muted); transition: background .15s, color .15s; }
.icon-button:hover { background: var(--surface-soft); color: var(--text); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 11px 16px; border: 1px solid transparent; border-radius: 9px; font-size: 13px; font-weight: 600; line-height: 1.35; text-decoration: none; transition: background .15s, box-shadow .15s; }
.button-primary { color: #fff; background: var(--accent); box-shadow: 0 2px 3px #063b2d12; }
.button-primary:hover { background: var(--accent-hover); }
.button-secondary { background: var(--surface); border-color: var(--border); color: var(--text); }
.button-secondary:hover { background: var(--surface-soft); }
.button-danger { background: #b03c42; color: #fff; }
.button-danger:hover { background: #912e34; }
.button-full { width: 100%; }
.text-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 0; border: 0; background: transparent; color: var(--accent-text); font-size: 12px; font-weight: 600; white-space: nowrap; }
.text-button .icon { width: 16px; height: 16px; }
/* Обычное начертание для второстепенной ссылки под формой входа. */
.text-button-regular { font-weight: 400; text-underline-offset: 3px; }
.text-button-regular:hover { text-decoration: underline; }
.is-loading { cursor: wait; opacity: .7; }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; color: var(--text); font-size: 13px; font-weight: 600; }
/* Флажок с подписью: кабинет (события уведомлений) и согласие в форме запроса ссылки. */
.check-label { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.7; cursor: pointer; }
.check-label input { width: 17px; height: 17px; min-height: 17px; margin: 3px 0 0; padding: 0; accent-color: var(--accent); flex: 0 0 auto; }
/* Пояснение выводится второй строкой, чтобы название оставалось коротким. */
.check-label small { display: block; color: var(--muted); font-size: 12px; line-height: 1.6; }
input, select, textarea { min-width: 0; max-width: 100%; min-height: 44px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); font-size: 14px; font-weight: 400; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input[readonly] { background: var(--surface-soft); }
/* :disabled учитывает и блокировку через fieldset; флажки и переключатели оформляются отдельно. */
:is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):disabled {
    background: var(--field-disabled-bg);
    color: var(--field-disabled-text);
    -webkit-text-fill-color: var(--field-disabled-text);
    opacity: 1;
    cursor: not-allowed;
}
input:disabled::placeholder, textarea:disabled::placeholder { color: var(--field-disabled-text); }
.form-error { padding: 12px 14px; margin-bottom: 18px; border: 1px solid var(--notice-error-border); border-radius: 9px; background: var(--notice-error-bg); color: var(--notice-error-text); font-size: 13px; overflow-wrap: anywhere; }
.error-request-code { opacity: .3; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.boot-screen { display: flex; min-height: 100vh; align-items: center; justify-content: center; flex-direction: column; gap: 18px; color: var(--muted); }

.modal { width: calc(100% - 40px); max-width: 540px; max-height: 90vh; max-height: 90dvh; padding: 0; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); color: var(--text); box-shadow: 0 24px 80px #00000033; }
.modal::backdrop { background: #111a2980; backdrop-filter: blur(4px); }
.modal[open] { animation: dialog-in .16s ease-out; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 23px 24px; border-bottom: 1px solid var(--divider); }
.dialog-heading h2 { margin: 0; font-size: 21px; }
.dialog-heading .eyebrow { margin-bottom: 6px; font-size: 10px; }
.dialog-heading .icon-button { width: 32px; height: 32px; margin-top: -3px; }
.dialog-body { padding: 24px; }
.modal[open] { display: flex; flex-direction: column; overflow: hidden; }
.modal > form { display: flex; flex-direction: column; min-height: 0; }
.dialog-heading, .dialog-actions { flex-shrink: 0; }
.dialog-body { min-height: 0; overflow-y: auto; }
.dialog-body > p { font-size: 13px; line-height: 1.8; }
/* Подсказка перед полем отделяется так же, как поля между собой. */
.dialog-body > .notification-help:has(+ .field) { margin-bottom: 20px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 24px; border-top: 1px solid var(--divider); background: var(--surface-soft); }
.dialog-actions .button { min-height: 42px; }
.notice { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; margin-bottom: 22px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--muted); font-size: 12px; }
.notice .icon { width: 17px; height: 17px; color: var(--accent-text); }
.noscript-note { position: fixed; inset: 0; padding: 30px; background: var(--surface); z-index: 200; }
@media (max-width: 760px) {
    .modal[open]:not(.confirm-modal) { display: flex; flex-direction: column; width: 100%; max-width: none; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
    .modal > form, #token-reveal { display: flex; flex: 1; flex-direction: column; min-height: 0; }
    .dialog-heading { padding: 20px; flex: 0 0 auto; }
    .dialog-heading h2 { font-size: 21px; }
    .dialog-body { padding: 22px 20px; flex: 1; overflow-y: auto; }
    .dialog-actions { padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px)); flex: 0 0 auto; }
    .dialog-actions .button { flex: 1; min-height: 46px; }
    .dialog-heading .icon-button { min-width: 44px; height: 44px; margin-top: -6px; margin-right: -6px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
.text-button:hover { color: var(--text); text-decoration: underline; }
.brand:hover { color: var(--accent-text); }
/* Ссылки под формой и подвал используются также в каталоге общих компонентов. */
.login-note { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); color: var(--muted); font-size: 11px; }
.login-note .icon { width: 15px; height: 15px; }
.footer-links { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 24px; max-width: 100%; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-size: 12px; text-decoration: none; text-underline-offset: 4px; transition: color .15s; }
.footer-links a:hover { color: var(--accent-text); text-decoration: underline; }
.footer-links a:active { color: var(--text); }