/* Дизайн «Индиго» для страниц сервиса: админка (support.html), страница установки /s/<токен>, памятки /guide/*.
   Цвета и материалы - без изменений из infra/comms-sources/design, indigo-2026-10-19/tokens.css (MR !4, 6f3476af24; решение
   osiris 2026-10-19); править там и переносить сюда. Шрифт Golos Text - свой, из образа (те же файлы, что у веб-клиента:
   вариативный 400-900, наборы Google Fonts, SIL OFL 1.1 - GolosText-OFL.txt): страница не ходит ни на какие сторонние серверы. */
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("/assets/GolosText-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("/assets/GolosText-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("/assets/GolosText-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("/assets/GolosText-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
    U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: light dark;
  --font: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* шкала: поле экрана 14, зазор 10, низ 24; панели 56-60 высотой и r28-30; карточки r24; кнопки/клавиши r20, высота 56 */
  --space-edge: 14px; --space-gap: 10px; --space-bottom: 24px;
  --r-panel: 28px; --r-card: 24px; --r-btn: 20px; --h-btn: 56px; --h-panel: 58px;
  --bg: linear-gradient(165deg, #F7F7F9 0%, #EFEFF2 50%, #F5F5F7 100%);
  --b1: rgba(79,70,229,.14);
  --b2: rgba(120,120,135,.12);
  --b3: rgba(79,70,229,.09);
  --text: #18181B;
  --muted: #6B7280;
  --divider: rgba(24,24,27,.08);
  --field: rgba(255,255,255,.6);
  --code-bg: rgba(255,255,255,.8);
  --scrim: rgba(15,26,36,.35);
  --glass: rgba(255,255,255,.76);
  --blur: 20px;
  --sat: 1.05;
  --border: rgba(255,255,255,.85);
  --hl: rgba(255,255,255,.85);
  --hl-bottom: rgba(255,255,255,.35);
  --sheen: rgba(255,255,255,.55);
  --shadow: 0 10px 30px rgba(20,20,30,.10);
  --shadow-soft: 0 4px 14px rgba(20,20,30,.06);
  --card: rgba(255,255,255,.94);
  --card-blur: 10px;
  --accent: #4F46E5;
  --accent-ink: #fff;
  --accent-fill: linear-gradient(180deg, #4F46E5, #4338CA);
  --accent-glow: rgba(79,70,229,.28);
  --chip: rgba(24,24,27,.06);
  --chip-border: transparent;
  --chip-on: #18181B;
  --chip-on-ink: #fff;
  --tab-on: rgba(79,70,229,.12);
  --tab-on-ink: #4F46E5;
  --tab-shadow: none;
  --bubble-in: rgba(255,255,255,.94);
  --bubble-in-border: rgba(255,255,255,.9);
  --bubble-out: #4F46E5;
  --bubble-out-ink: #fff;
  --ok: #15803D;
  --ok-soft: rgba(21,128,61,.12);
  --warn-ink: #5B4300;
  --warn-soft: rgba(255,196,77,.35);
  --warn-glass: rgba(255,232,170,.75);
  --warn-border: rgba(255,255,255,.7);
  --bad: #C9402F;
  --bad-soft: rgba(201,64,47,.12);
  --av-ink: #1F2937;
  --p1: #D6E4FF;
  --p2: #FFE2C2;
  --p3: #DDF5E3;
  --p4: #EADFFF;
  --p5: #FFD9D9;
  --p6: #D9F1FF;
  --p7: #FFF1BF;
  --p8: #E2E8F0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: linear-gradient(165deg, #0E0E12 0%, #17171C 55%, #101014 100%);
    --b1: rgba(129,140,248,.16);
    --b2: rgba(140,140,160,.10);
    --b3: rgba(129,140,248,.10);
    --text: #F2F2F5;
    --muted: #9A9AA6;
    --divider: rgba(255,255,255,.07);
    --field: rgba(255,255,255,.06);
    --code-bg: rgba(255,255,255,.08);
    --scrim: rgba(0,0,0,.5);
    --glass: rgba(28,28,34,.68);
    --blur: 20px;
    --sat: 1.1;
    --border: rgba(255,255,255,.10);
    --hl: rgba(255,255,255,.14);
    --hl-bottom: rgba(255,255,255,.04);
    --sheen: rgba(255,255,255,.08);
    --shadow: 0 12px 34px rgba(0,0,0,.4);
    --shadow-soft: 0 4px 14px rgba(0,0,0,.25);
    --card: rgba(24,24,30,.9);
    --card-blur: 10px;
    --accent: #818CF8;
    --accent-ink: #0B0B0F;
    --accent-fill: linear-gradient(180deg, #818CF8, #818CF8);
    --accent-glow: rgba(129,140,248,.30);
    --chip: rgba(255,255,255,.07);
    --chip-border: transparent;
    --chip-on: #F2F2F5;
    --chip-on-ink: #18181B;
    --tab-on: rgba(129,140,248,.18);
    --tab-on-ink: #818CF8;
    --tab-shadow: none;
    --bubble-in: rgba(38,38,46,.92);
    --bubble-in-border: rgba(255,255,255,.08);
    --bubble-out: #4F46E5;
    --bubble-out-ink: #fff;
    --ok: #5CD48B;
    --ok-soft: rgba(92,212,139,.16);
    --warn-ink: #FFD98A;
    --warn-soft: rgba(255,196,77,.2);
    --warn-glass: rgba(90,75,25,.6);
    --warn-border: rgba(255,217,138,.25);
    --bad: #F08A7A;
    --bad-soft: rgba(240,138,122,.16);
    --av-ink: #1F2937;
    --p1: #D6E4FF;
    --p2: #FFE2C2;
    --p3: #DDF5E3;
    --p4: #EADFFF;
    --p5: #FFD9D9;
    --p6: #D9F1FF;
    --p7: #FFF1BF;
    --p8: #E2E8F0;
  }
}
:root[data-theme="dark"] {
  --bg: linear-gradient(165deg, #0E0E12 0%, #17171C 55%, #101014 100%);
  --b1: rgba(129,140,248,.16);
  --b2: rgba(140,140,160,.10);
  --b3: rgba(129,140,248,.10);
  --text: #F2F2F5;
  --muted: #9A9AA6;
  --divider: rgba(255,255,255,.07);
  --field: rgba(255,255,255,.06);
  --code-bg: rgba(255,255,255,.08);
  --scrim: rgba(0,0,0,.5);
  --glass: rgba(28,28,34,.68);
  --blur: 20px;
  --sat: 1.1;
  --border: rgba(255,255,255,.10);
  --hl: rgba(255,255,255,.14);
  --hl-bottom: rgba(255,255,255,.04);
  --sheen: rgba(255,255,255,.08);
  --shadow: 0 12px 34px rgba(0,0,0,.4);
  --shadow-soft: 0 4px 14px rgba(0,0,0,.25);
  --card: rgba(24,24,30,.9);
  --card-blur: 10px;
  --accent: #818CF8;
  --accent-ink: #0B0B0F;
  --accent-fill: linear-gradient(180deg, #818CF8, #818CF8);
  --accent-glow: rgba(129,140,248,.30);
  --chip: rgba(255,255,255,.07);
  --chip-border: transparent;
  --chip-on: #F2F2F5;
  --chip-on-ink: #18181B;
  --tab-on: rgba(129,140,248,.18);
  --tab-on-ink: #818CF8;
  --tab-shadow: none;
  --bubble-in: rgba(38,38,46,.92);
  --bubble-in-border: rgba(255,255,255,.08);
  --bubble-out: #4F46E5;
  --bubble-out-ink: #fff;
  --ok: #5CD48B;
  --ok-soft: rgba(92,212,139,.16);
  --warn-ink: #FFD98A;
  --warn-soft: rgba(255,196,77,.2);
  --warn-glass: rgba(90,75,25,.6);
  --warn-border: rgba(255,217,138,.25);
  --bad: #F08A7A;
  --bad-soft: rgba(240,138,122,.16);
  --av-ink: #1F2937;
  --p1: #D6E4FF;
  --p2: #FFE2C2;
  --p3: #DDF5E3;
  --p4: #EADFFF;
  --p5: #FFD9D9;
  --p6: #D9F1FF;
  --p7: #FFF1BF;
  --p8: #E2E8F0;
}

/* материалы (как в макете) */
.glass { background-color: var(--glass); background-image: radial-gradient(130% 90% at 12% 0%, var(--sheen), transparent 58%); -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat)); backdrop-filter: blur(var(--blur)) saturate(var(--sat)); border: 1px solid var(--border); box-shadow: inset 0 1px 0 var(--hl), inset 0 -1px 0 var(--hl-bottom), var(--shadow); }
.card { background-color: var(--card); background-image: radial-gradient(130% 70% at 10% 0%, var(--sheen), transparent 55%); border: 1px solid var(--border); box-shadow: inset 0 1px 0 var(--hl), var(--shadow-soft); border-radius: var(--r-card); }
.solid { background: var(--accent-fill); color: var(--accent-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.12), 0 8px 20px var(--accent-glow); }
.warnglass { background-color: var(--warn-glass); border: 1px solid var(--warn-border); box-shadow: inset 0 1px 0 var(--hl), var(--shadow-soft); color: var(--warn-ink); }
.btn { height: var(--h-btn); border-radius: var(--r-btn); display: inline-grid; place-items: center; font-weight: 600; font-size: 16px; padding: 0 20px; }
.btn.outline { background: var(--chip); color: var(--text); border: 1px solid var(--border); }
.btn.ghost { background: none; color: var(--accent); border: 0; }
.btn.danger { background: linear-gradient(180deg, #E25C4A, #C9402F); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 20px rgba(201,64,47,.3); }
/* без размытия (RDP без видеокарты, prefers-reduced-transparency, слабые устройства): стекло непрозрачнее, blur выключен */
@media (prefers-reduced-transparency: reduce) { .glass { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: var(--card); } }
:root[data-lowfx] .glass { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: var(--card); }