/* Дизайн-основа: общая для лендинга и мини-приложения.
   Тема как в dash.css: data-theme="light|dark" на <html> (мини-приложение ставит по Telegram), без него как в системе.
   Шрифты подключаются отдельно: Geologica (заголовки и крупные числа) и Golos Text (текст), оба с кириллицей.
   Все цвета только через переменные --rs-*; классы компонентов начинаются с .rs- и сами ничего на странице не меняют. */

:root{color-scheme:light dark}
:root[data-theme=light]{color-scheme:light}
:root[data-theme=dark]{color-scheme:dark}

:root{
  /* Цвета. Свой цвет — «базилик»; «шафран» только для выделения, не для кнопок. */
  --rs-bg:        light-dark(#f6f7f4, #121513);
  --rs-panel:     light-dark(#ffffff, #1b1f1c);
  --rs-sunk:      light-dark(#eef0eb, #232824);   /* поля ввода, полосы, подложки */
  --rs-raised:    light-dark(#ffffff, #323a34);   /* нажатая вкладка поверх подложки */
  --rs-fg:        light-dark(#18201b, #eaede8);
  --rs-fg-2:      light-dark(#59625b, #a7b0a8);   /* подписи */
  --rs-fg-3:      light-dark(#6b736c, #8a938b);   /* совсем второстепенное */
  --rs-line:      light-dark(rgb(24 32 27 / .11), rgb(234 237 232 / .11));
  --rs-line-2:    light-dark(rgb(24 32 27 / .2),  rgb(234 237 232 / .2));

  --rs-brand:     light-dark(#1d5c45, #6cc79c);
  --rs-brand-fg:  light-dark(#ffffff, #0f1a14);   /* текст на кнопке своего цвета */
  --rs-brand-soft:light-dark(#e3efe8, #1d3328);
  --rs-brand-hover:light-dark(#174a37, #84d4ae);
  --rs-accent:    light-dark(#f2b630, #f2c14e);   /* шафран: маркер, бегущая строка, значки */
  --rs-accent-fg: #1d1a10;
  --rs-accent-soft:light-dark(#fbefcd, #3a3119);

  /* Состояния. Хорошо = свой цвет; плохо и внимание отдельно. */
  --rs-ok:        var(--rs-brand);
  --rs-ok-soft:   var(--rs-brand-soft);
  --rs-warn:      light-dark(#9a5a00, #f29a52);
  --rs-warn-soft: light-dark(#fbebd6, #3b2817);
  --rs-bad:       light-dark(#b3391f, #f2846c);
  --rs-bad-soft:  light-dark(#f9e3dc, #3d2019);

  /* Графики */
  --rs-chart-1:   var(--rs-brand);                 /* факт */
  --rs-chart-2:   light-dark(#c9cec8, #4a524b);    /* план, прошлое, фон */
  --rs-chart-3:   light-dark(#4d6fa3, #8fb0e3);    /* третий ряд */
  --rs-chart-4:   var(--rs-accent);                /* прогноз, выделение */
  --rs-chart-neutral:light-dark(#a3aba4, #6b756d); /* серый ряд, который должен читаться на панели */
  --rs-chart-grid:light-dark(rgb(24 32 27 / .07), rgb(234 237 232 / .07));
  --rs-chart-axis:light-dark(#8a928b, #737c74);

  /* Шрифты */
  --rs-font-display:"Geologica", "Golos Text", system-ui, sans-serif;
  --rs-font-text:   "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --rs-font-mono:   ui-monospace, "SF Mono", Menlo, Consolas, monospace;  /* номера счетов, почта, коды */

  /* Размеры текста: 12 · 14 · 16 · 18 · 22 · 28 · 36 · 48 */
  --rs-t-xs:.75rem; --rs-t-s:.875rem; --rs-t-m:1rem; --rs-t-l:1.125rem;
  --rs-t-xl:1.375rem; --rs-t-2xl:1.75rem; --rs-t-3xl:2.25rem; --rs-t-4xl:clamp(2.25rem,5vw,3rem);

  /* Отступы, шаг 4px */
  --rs-1:4px; --rs-2:8px; --rs-3:12px; --rs-4:16px; --rs-5:24px; --rs-6:32px; --rs-7:48px; --rs-8:64px;

  /* Скругления: у кнопок и полей меньше, у крупных панелей больше; мелочи без скругления */
  --rs-r-s:10px; --rs-r-m:14px; --rs-r-l:22px; --rs-r-pill:999px;
  --rs-shadow-float:0 10px 30px rgb(10 20 14 / .16), 0 2px 6px rgb(10 20 14 / .08); /* только всплывающее */
  --rs-ease:cubic-bezier(.2,.7,.2,1);
}

/* Запасные цвета для браузеров без light-dark() (Telegram на iOS до 17.5, старый Android WebView).
   Собраны из значений выше; меняешь цвет там — поменяй и здесь. */
@supports not (color: light-dark(#000, #fff)){
  :root{
    --rs-bg:#f6f7f4;
    --rs-panel:#ffffff;
    --rs-sunk:#eef0eb;
    --rs-raised:#ffffff;
    --rs-fg:#18201b;
    --rs-fg-2:#59625b;
    --rs-fg-3:#6b736c;
    --rs-brand:#1d5c45;
    --rs-brand-fg:#ffffff;
    --rs-brand-soft:#e3efe8;
    --rs-brand-hover:#174a37;
    --rs-accent:#f2b630;
    --rs-accent-soft:#fbefcd;
    --rs-warn:#9a5a00;
    --rs-warn-soft:#fbebd6;
    --rs-bad:#b3391f;
    --rs-bad-soft:#f9e3dc;
    --rs-chart-2:#c9cec8;
    --rs-chart-3:#4d6fa3;
    --rs-chart-neutral:#a3aba4;
    --rs-chart-axis:#8a928b;
  }
  @media (prefers-color-scheme: dark){:root:not([data-theme=light]){
    --rs-bg:#121513;
    --rs-panel:#1b1f1c;
    --rs-sunk:#232824;
    --rs-raised:#323a34;
    --rs-fg:#eaede8;
    --rs-fg-2:#a7b0a8;
    --rs-fg-3:#8a938b;
    --rs-brand:#6cc79c;
    --rs-brand-fg:#0f1a14;
    --rs-brand-soft:#1d3328;
    --rs-brand-hover:#84d4ae;
    --rs-accent:#f2c14e;
    --rs-accent-soft:#3a3119;
    --rs-warn:#f29a52;
    --rs-warn-soft:#3b2817;
    --rs-bad:#f2846c;
    --rs-bad-soft:#3d2019;
    --rs-chart-2:#4a524b;
    --rs-chart-3:#8fb0e3;
    --rs-chart-neutral:#6b756d;
    --rs-chart-axis:#737c74;
  }}
  :root[data-theme=dark]{
    --rs-bg:#121513;
    --rs-panel:#1b1f1c;
    --rs-sunk:#232824;
    --rs-raised:#323a34;
    --rs-fg:#eaede8;
    --rs-fg-2:#a7b0a8;
    --rs-fg-3:#8a938b;
    --rs-brand:#6cc79c;
    --rs-brand-fg:#0f1a14;
    --rs-brand-soft:#1d3328;
    --rs-brand-hover:#84d4ae;
    --rs-accent:#f2c14e;
    --rs-accent-soft:#3a3119;
    --rs-warn:#f29a52;
    --rs-warn-soft:#3b2817;
    --rs-bad:#f2846c;
    --rs-bad-soft:#3d2019;
    --rs-chart-2:#4a524b;
    --rs-chart-3:#8fb0e3;
    --rs-chart-neutral:#6b756d;
    --rs-chart-axis:#737c74;
  }
}

/* Углы гиперэллипсом, где браузер умеет (Chrome, Android). Гиперэллипс с тем же радиусом выглядит острее,
   поэтому радиусы крупнее. Без поддержки остаются обычные скругления из :root. */
@supports (corner-shape: squircle){
  :root{--rs-r-s:16px; --rs-r-m:22px; --rs-r-l:36px}
  :is(.rs-btn,.rs-input,.rs-panel,.rs-seg,.rs-seg button,.rs-sq){corner-shape:squircle}
}

/* Страница. Подключается классом на body, чтобы не трогать старые страницы. */
.rs-page{margin:0;background:var(--rs-bg);color:var(--rs-fg);font:400 var(--rs-t-m)/1.55 var(--rs-font-text);-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}
.rs-page :is(h1,h2,h3){font-family:var(--rs-font-display);font-weight:600;line-height:1.15;letter-spacing:-.015em;text-wrap:balance;margin:0}
.rs-h1{font-size:var(--rs-t-4xl)}
.rs-h2{font-size:var(--rs-t-2xl)}
.rs-h3{font-size:var(--rs-t-l)}
.rs-sub{color:var(--rs-fg-2)}
.rs-cap{font-size:var(--rs-t-xs);color:var(--rs-fg-2);letter-spacing:.02em}
.rs-num{font-family:var(--rs-font-display);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.rs-mark{background:linear-gradient(transparent 58%,var(--rs-accent-soft) 58%);padding:0 .1em}

/* Кнопки */
.rs-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--rs-2);min-height:44px;padding:0 var(--rs-5);
  border:1px solid transparent;border-radius:var(--rs-r-m);font:600 var(--rs-t-m)/1 var(--rs-font-text);text-decoration:none;cursor:pointer;
  background:var(--rs-brand);color:var(--rs-brand-fg);transition:background .15s,border-color .15s,transform .1s}
.rs-btn:hover{background:var(--rs-brand-hover)}
.rs-btn:active{transform:translateY(1px)}
.rs-btn--second{background:var(--rs-panel);color:var(--rs-fg);border-color:var(--rs-line-2)}
.rs-btn--second:hover{background:var(--rs-sunk)}
.rs-btn--quiet{background:transparent;color:var(--rs-brand);padding:0 var(--rs-2)}
.rs-btn--quiet:hover{background:var(--rs-brand-soft)}
.rs-btn--s{min-height:34px;padding:0 var(--rs-3);font-size:var(--rs-t-s);border-radius:var(--rs-r-s)}
.rs-btn:disabled{opacity:.45;cursor:default;transform:none}
:is(.rs-btn,.rs-input,.rs-seg button,.rs-link):focus-visible{outline:2px solid var(--rs-brand);outline-offset:2px}

/* Поля */
.rs-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.rs-field label{font-size:var(--rs-t-s);color:var(--rs-fg-2)}
.rs-input{min-height:44px;padding:0 var(--rs-3);border:1px solid var(--rs-line-2);border-radius:var(--rs-r-m);background:var(--rs-panel);color:var(--rs-fg);font:inherit;width:100%;box-sizing:border-box}
.rs-input::placeholder{color:var(--rs-fg-3)}
/* Ссылка «← Меню» вверху страниц мини-приложения на компьютере и в браузере; на телефоне есть кнопка «Назад» Telegram. Ставит её runtime/ui.js в элемент с data-back. */
.rs-back{display:inline-flex;align-items:center;gap:.35em;margin:0 0 var(--rs-3);padding:var(--rs-1) 0;font:500 var(--rs-t-s)/1.2 var(--rs-font-text);color:var(--rs-fg-2);text-decoration:none}
.rs-back:hover{color:var(--rs-fg)}
.rs-link{color:var(--rs-brand);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* Переключатель вкладок */
.rs-seg{display:inline-flex;padding:3px;gap:2px;background:var(--rs-sunk);border-radius:var(--rs-r-m)}
.rs-seg button{border:0;background:transparent;color:var(--rs-fg-2);font:500 var(--rs-t-s)/1 var(--rs-font-text);padding:9px 14px;border-radius:calc(var(--rs-r-m) - 3px);cursor:pointer}
.rs-seg button[aria-pressed=true]{background:var(--rs-raised);color:var(--rs-fg);box-shadow:0 1px 2px rgb(0 0 0 / .08)}

/* Метки состояния */
.rs-tag{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:var(--rs-r-pill);font:500 var(--rs-t-xs)/1.4 var(--rs-font-text);white-space:nowrap;background:var(--rs-sunk);color:var(--rs-fg-2)}
.rs-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.rs-tag--ok{background:var(--rs-ok-soft);color:var(--rs-ok)}
.rs-tag--warn{background:var(--rs-warn-soft);color:var(--rs-warn)}
.rs-tag--bad{background:var(--rs-bad-soft);color:var(--rs-bad)}

/* Панель: только для того, что правда отдельный предмет (кусок приложения, тариф) */
.rs-panel{background:var(--rs-panel);border:1px solid var(--rs-line);border-radius:var(--rs-r-l)}

/* Таблица */
.rs-table{width:100%;border-collapse:collapse;font-size:var(--rs-t-s)}
.rs-table th{text-align:left;font-weight:500;color:var(--rs-fg-2);font-size:var(--rs-t-xs);padding:0 var(--rs-3) var(--rs-2);border-bottom:1px solid var(--rs-line-2)}
.rs-table td{padding:var(--rs-3);border-bottom:1px solid var(--rs-line);vertical-align:middle}
.rs-table tr:last-child td{border-bottom:0}
.rs-table .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rs-table th.n{text-align:right}
.rs-table tbody tr:hover td{background:color-mix(in srgb,var(--rs-sunk) 60%,transparent)}

/* Бегущая строка */
.rs-ticker{overflow:hidden;white-space:nowrap;background:var(--rs-fg);color:var(--rs-bg);font:500 var(--rs-t-s)/1 var(--rs-font-text)}
.rs-ticker > div{display:inline-flex;gap:var(--rs-6);padding:11px 0;animation:rs-run 40s linear infinite}
.rs-ticker b{color:var(--rs-accent);font-weight:600;font-variant-numeric:tabular-nums}
@keyframes rs-run{to{transform:translateX(-50%)}}

@media (prefers-reduced-motion:reduce){
  .rs-ticker > div{animation:none}
  .rs-btn{transition:none}
}

/* Юридический документ: политика, соглашение, договор. Шапка с логотипом и вкладками документов, оглавление сбоку
   (на телефоне свёрнуто), пункты нумеруются в тексте, чтобы номер не менялся при правке. Оглавление и подписи
   ячеек для телефона собирает runtime/doc.js. */
.rs-logo{display:inline-flex;align-items:center;gap:10px;font:600 var(--rs-t-m)/1.1 var(--rs-font-display);text-decoration:none;letter-spacing:-.01em;color:var(--rs-fg)}
.rs-logo i{width:26px;height:26px;border-radius:8px;background:var(--rs-brand);display:grid;place-items:center;flex:none}
.rs-logo i::after{content:"";width:12px;height:12px;background:linear-gradient(var(--rs-brand-fg),var(--rs-brand-fg)) 0 100%/3px 50% no-repeat,linear-gradient(var(--rs-brand-fg),var(--rs-brand-fg)) 50% 100%/3px 100% no-repeat,linear-gradient(var(--rs-accent),var(--rs-accent)) 100% 100%/3px 70% no-repeat}
.rs-doc-head{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--rs-bg) 92%,transparent);backdrop-filter:saturate(1.4) blur(8px);-webkit-backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--rs-line)}
.rs-doc-head>div,.rs-doc-wrap{max-width:1080px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px));box-sizing:border-box}
.rs-doc-head>div{display:flex;align-items:center;justify-content:space-between;gap:var(--rs-4);min-height:60px;flex-wrap:wrap;padding-block:8px}
.rs-doc-tabs{display:inline-flex;padding:3px;gap:2px;background:var(--rs-sunk);border-radius:var(--rs-r-m);max-width:100%;overflow-x:auto}
.rs-doc-tabs a{color:var(--rs-fg-2);text-decoration:none;font:500 var(--rs-t-s)/1 var(--rs-font-text);padding:9px 14px;border-radius:calc(var(--rs-r-m) - 3px);white-space:nowrap}
.rs-doc-tabs a:hover{color:var(--rs-fg)}
.rs-doc-tabs a[aria-current=page]{background:var(--rs-raised);color:var(--rs-fg);box-shadow:0 1px 2px rgb(0 0 0 / .08)}
.rs-doc-wrap{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--rs-7);align-items:start;padding-block:var(--rs-7) var(--rs-8)}
.rs-doc-toc{position:sticky;top:84px;max-height:calc(100vh - 108px);overflow:auto;font-size:var(--rs-t-s)}
.rs-doc-toc summary{list-style:none;font:600 var(--rs-t-xs)/1.4 var(--rs-font-text);letter-spacing:.04em;text-transform:uppercase;color:var(--rs-fg-3);margin-bottom:var(--rs-2);cursor:default}
.rs-doc-toc summary::-webkit-details-marker{display:none}
.rs-doc-toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--rs-line)}
.rs-doc-toc a{display:block;padding:5px 0 5px 14px;margin-left:-1px;border-left:2px solid transparent;color:var(--rs-fg-2);text-decoration:none;line-height:1.35}
.rs-doc-toc a:hover{color:var(--rs-fg)}
.rs-doc-toc a[aria-current=true]{color:var(--rs-brand);border-left-color:var(--rs-brand)}
.rs-doc{max-width:720px;min-width:0}
.rs-doc h1{font-size:clamp(1.75rem,4vw,var(--rs-t-3xl));margin-bottom:var(--rs-3)}
.rs-doc .rs-doc-ed{font-size:var(--rs-t-s);color:var(--rs-fg-2);margin:0 0 var(--rs-6)}
.rs-doc h2{font-size:var(--rs-t-l);margin:var(--rs-7) 0 var(--rs-3);scroll-margin-top:84px}
.rs-doc h2 .n{color:var(--rs-brand);margin-right:.3em}
.rs-doc p,.rs-doc li{margin:0 0 var(--rs-3);overflow-wrap:break-word}
.rs-doc p>b:first-child{font-variant-numeric:tabular-nums;color:var(--rs-fg-3);font-weight:500;margin-right:.4em}
.rs-doc ul{margin:0 0 var(--rs-3);padding-left:1.3em}
.rs-doc li::marker{color:var(--rs-brand)}
.rs-doc a{color:var(--rs-brand)}
.rs-doc .rs-table{margin:var(--rs-3) 0 var(--rs-5);background:var(--rs-panel);border:1px solid var(--rs-line);border-radius:var(--rs-r-l);border-collapse:separate;border-spacing:0;overflow:hidden}
.rs-doc .rs-table th{padding:var(--rs-3)}
.rs-doc .rs-table td{vertical-align:top}
.rs-doc .rs-table tbody tr:hover td{background:none}
.rs-doc-todo{background:var(--rs-accent-soft);padding:0 .25em;border-radius:4px}
.rs-doc-foot{margin-top:var(--rs-7);padding-top:var(--rs-4);border-top:1px solid var(--rs-line);font-size:var(--rs-t-s);color:var(--rs-fg-2);line-height:1.7}
:is(.rs-logo,.rs-doc-tabs a,.rs-doc-toc a):focus-visible{outline:2px solid var(--rs-brand);outline-offset:2px;border-radius:6px}
@supports (corner-shape: squircle){:is(.rs-doc .rs-table,.rs-doc-tabs,.rs-doc-tabs a,.rs-logo i){corner-shape:squircle}}
@media (max-width:60rem){
  .rs-doc-wrap{grid-template-columns:minmax(0,1fr);gap:var(--rs-5);padding-block:var(--rs-5) var(--rs-7)}
  .rs-doc-toc{position:static;max-height:none;order:-1;background:var(--rs-panel);border:1px solid var(--rs-line);border-radius:var(--rs-r-l);padding:var(--rs-3) var(--rs-4)}
  .rs-doc-toc summary{cursor:pointer;margin:0}
  .rs-doc-toc summary::after{content:" ▾"}
  .rs-doc-toc[open] summary{margin-bottom:var(--rs-2)}
  .rs-doc-toc ol{border-left:0}
  .rs-doc-toc a{padding-left:0;border-left:0}
}
@media (max-width:40rem){
  .rs-doc-head .rs-logo span{display:none}
  .rs-doc .rs-table,.rs-doc .rs-table tbody,.rs-doc .rs-table tr,.rs-doc .rs-table td{display:block}
  .rs-doc .rs-table thead{display:none}
  .rs-doc .rs-table tr{padding:var(--rs-3) var(--rs-4);border-bottom:1px solid var(--rs-line)}
  .rs-doc .rs-table tr:last-child{border-bottom:0}
  .rs-doc .rs-table td{padding:2px 0;border:0}
  .rs-doc .rs-table td:first-child{font-weight:600;padding-bottom:6px}
  .rs-doc .rs-table td[data-l]:not(:first-child)::before{content:attr(data-l);display:block;font-size:var(--rs-t-xs);color:var(--rs-fg-3);margin-top:4px}
}
@media print{.rs-doc-head,.rs-doc-toc{display:none}.rs-doc-wrap{display:block;padding:0}.rs-doc{max-width:none}.rs-doc-todo{background:none}}