/* Общий слой оформления Оптимуса. Токены и компоненты повторяют боевой business.multigo.ru,
   чтобы два сайта читались как один продукт. Подключается на всех страницах: <link href="/f/base.css">.
   Шрифты свои, обращений на сторону нет. Montserrat и Golos Text — вариативные, по одному файлу
   на алфавит: три начертания из одного файла, лишних загрузок нет. */

@font-face{font-family:Montserrat;font-style:normal;font-weight:400 800;font-display:swap;
  src:url("/f/montserrat-cyrillic.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Montserrat;font-style:normal;font-weight:400 800;font-display:swap;
  src:url("/f/montserrat-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:Montserrat;font-style:normal;font-weight:400 800;font-display:swap;
  src:url("/f/montserrat-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}
@font-face{font-family:"Golos Text";font-style:normal;font-weight:400 600;font-display:swap;
  src:url("/f/golos-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 600;font-display:swap;
  src:url("/f/golos-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{
  /* фирменные — значения боевого business.multigo.ru */
  --brand:#19a0ff; --brand-hover:#38b6ff; --brand-light:#4cc4ff; --brand-dark:#0a6ebd;
  --navy:#071b3a; --deep:#041327; --deep-2:#0a2857; --foot:#020d1d;
  --dark-gradient:linear-gradient(135deg,var(--deep) 0%,var(--navy) 35%,var(--deep-2) 100%);
  --on-brand:#02182d; --on-navy:#fff; --on-dark-2:#a8bed6;
  --glass:#ffffff14; --glass-border:#19a0ff40;
  --bg:#071b3a; --surface:#0a2142; --card:#102b4f;
  --ink:#eaf1f8; --ink-2:#b7c6d6; --ink-3:#8fa3b8;
  --rule:#4cc4ff24; --rule-2:#4cc4ff14; --field-border:#6b809a;
  /* свои, которых у «Бизнеса» нет: экономия и предупреждение. Проверены на фоне #071b3a */
  --save:#68ddbc; --save-bg:#68ddbc1f; --back:#ffad6b; --warn:#ffc107; --danger:#ff8a80; --danger-bg:#ff8a801f;
  /* сетка и шрифты */
  --shell:1100px; --gutter:clamp(16px, 1rem + 1vw, 28px); --header-h:72px; --measure:68ch;
  --display:Montserrat,"Helvetica Neue",Arial,sans-serif;
  --body:"Golos Text",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  /* шкала: одна на весь сайт, адаптив только через clamp */
  --text-xs:12px; --text-s:13px; --text-m:15px; --text-l:clamp(17px, 1rem + .3vw, 19px);
  --h3:clamp(18px, 1rem + .4vw, 22px);
  --h2:clamp(26px, 1.3rem + 1vw, 34px);
  --h1:clamp(34px, 1.6rem + 2.2vw, 56px);
  --dur:.15s;
}

*,:before,:after{box-sizing:border-box;min-width:0}
html{scroll-padding-top:calc(var(--header-h) + 16px);scroll-behavior:smooth}
html,body{max-width:100%;overflow-x:clip}
body{margin:0;padding-top:var(--header-h);background:var(--bg);color:var(--ink);font:16px/1.6 var(--body);-webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%;height:auto}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0;line-height:1.2}
a{color:var(--brand-light)}
:focus-visible{outline:2px solid var(--brand-light);outline-offset:2px;border-radius:2px}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}html{scroll-behavior:auto}}

/* ---- сетка ---- */
.shell{max-width:var(--shell);margin:0 auto;padding-inline:var(--gutter)}

/* ---- кнопки: три варианта, размер меняется только высотой и полями ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 26px;
  background:0 0;color:var(--ink);border:1px solid var(--rule);border-radius:6px;font:700 14px var(--display);text-decoration:none;
  white-space:nowrap;cursor:pointer;transition:background-color var(--dur),color var(--dur),border-color var(--dur)}
.btn.cy,.btn-primary{background:var(--brand);color:var(--on-brand);border-color:transparent}
.btn.cy:hover,.btn-primary:hover{background:var(--brand-hover)}
.btn.gh,.btn-ghost{background:0 0;color:var(--brand-light);border-color:var(--brand)}
.btn.gh:hover,.btn-ghost:hover{background:#19a0ff1f}
.btn.gh2{background:0 0;color:var(--ink-2);border-color:var(--rule)}
.btn.gh2:hover{color:var(--ink);border-color:var(--brand)}
.btn.sm{min-height:40px;padding:0 18px;font-size:var(--text-s)}

/* ---- шапка MultiGO ---- */
.mgtop{position:fixed;inset:0 0 auto;z-index:1100;background:var(--deep);color:var(--on-navy);
  border-bottom:1px solid #ffffff0f}
.mgtop-in{max-width:var(--shell);margin:0 auto;padding-inline:var(--gutter);height:var(--header-h);
  display:flex;align-items:center;gap:24px}
/* логотип: знак + слово «Оптимус» набором Montserrat, рядом мелко родительский бренд.
   Все три стоят на одной линии — нижнем крае букв GO: у картинки в гибком ряду базовая линия — её низ,
   поэтому align-items:baseline сажает строку «Оптимус» и «MultiGO» ровно на низ знака (решение владельца 25.09) */
.mgtop-in .mglogo{display:flex;align-items:baseline;gap:10px;flex:none;text-decoration:none;color:inherit}
.mgtop-in .mglogo .mark{width:auto;height:34px;display:block;flex:none}   /* знак GO: пропорция 2,2:1, ширина от высоты */
.mgtop-in .mglogo .wm{font:800 22px/1 var(--display);letter-spacing:-.02em;color:#fff}
.mgtop-in .mglogo .by{font:700 10px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.mgtop-in .mglogo:hover .wm{color:var(--brand-hover)}
.mgnav{display:flex;align-items:center;gap:26px;margin-left:auto;flex-wrap:nowrap}
.mgnav a{color:inherit;font:600 var(--text-s)/1.3 var(--display);text-decoration:none;white-space:nowrap;
  padding-bottom:3px;border-bottom:2px solid transparent;transition:color var(--dur),border-color var(--dur)}
.mgnav a:hover{color:var(--brand-hover)}
.mgnav a.cur,.mgnav a[aria-current=page]{color:var(--brand);border-bottom-color:var(--brand)}
.mgnav .ask{min-height:40px;margin:0;padding:0 18px;border:0;border-radius:6px;background:var(--brand);color:var(--on-brand);
  display:inline-flex;align-items:center;font:700 var(--text-s) var(--display)}
.mgnav a.ask,.mgnav a.ask.cur{color:var(--on-brand);border-bottom:0;padding-bottom:0}
.mgnav .ask:hover{background:var(--brand-hover);color:var(--on-brand)}
.mgnav .ask.cur{background:var(--brand-hover)}
.mgnav button,.mgnav .out{min-height:40px;padding:0 16px;border:1.5px solid #ffffff40;border-radius:6px;
  display:inline-flex;align-items:center;font:700 var(--text-s) var(--display);border-bottom-width:1.5px}
.mgnav button{background:0 0;color:inherit;cursor:pointer;white-space:nowrap}
.mgnav button:hover,.mgnav .out:hover{border-color:var(--brand);color:var(--brand-hover)}
@media (max-width:900px){.mgnav .ext{display:none}}
@media (max-width:760px){
  .mgtop-in{gap:18px;overflow-x:auto;scrollbar-width:none}
  .mgtop-in::-webkit-scrollbar{display:none}
  .mgtop-in .mglogo .mark{width:auto;height:28px} .mgtop-in .mglogo .wm{font-size:18px} .mgtop-in .mglogo .by{display:none}
  .mgnav{gap:18px}
}
/* На узком экране разделы не помещаются в строку и налезают на логотип, поэтому уходят под кнопку.
   Сворачивание — чистыми стилями, кнопка стоит в разметке: раньше её ставил /f/base.js, и пока он
   не загрузился (медленная сеть, тяжёлая страница), телефон показывал тесный ряд с наездом.
   Скрипт только открывает и закрывает список; вид без скриптов задан в <noscript> шаблонов. */
.mgburger{display:none}
@media (max-width:900px){
  .mgtop .mgtop-in{overflow:visible}          /* прокрутка строки обрезала бы раскрытый список */
  .mgtop .mgburger{display:inline-flex;align-items:center;justify-content:center;flex:none;
    margin-left:auto;width:44px;height:44px;padding:0;border:1.5px solid #ffffff40;border-radius:8px;
    background:0 0;color:inherit;cursor:pointer}
  .mgtop .mgburger:hover{border-color:var(--brand);color:var(--brand-hover)}
  .mgtop .mgburger i{position:relative;display:block;width:18px;height:2px;border-radius:2px;
    background:currentColor;transition:background var(--dur)}
  .mgtop .mgburger i::before,.mgtop .mgburger i::after{content:"";position:absolute;left:0;
    width:18px;height:2px;border-radius:2px;background:currentColor;
    transition:top var(--dur),transform var(--dur)}
  .mgtop .mgburger i::before{top:-6px} .mgtop .mgburger i::after{top:6px}
  .mgtop.open .mgburger i{background:0 0}
  .mgtop.open .mgburger i::before{top:0;transform:rotate(45deg)}
  .mgtop.open .mgburger i::after{top:0;transform:rotate(-45deg)}
  .mgtop .mgnav{display:none;position:absolute;left:0;right:0;top:100%;z-index:1;
    flex-direction:column;align-items:stretch;gap:0;margin:0;
    max-height:calc(100dvh - var(--header-h));overflow-y:auto;
    background:var(--deep);border-bottom:1px solid #ffffff1f;box-shadow:0 18px 40px #02101fa8;
    padding:6px var(--gutter) 18px}
  .mgtop.open .mgnav{display:flex}
  .mgtop .mgnav a{display:flex;align-items:center;min-height:48px;padding:0;
    border-bottom:1px solid #ffffff14;font-size:var(--text-m)}
  .mgtop .mgnav .ext{display:flex}          /* под кнопкой место есть — ссылку на «Бизнес» возвращаем */
  .mgtop .mgnav a.cur,.mgtop .mgnav a[aria-current=page]{border-bottom-color:#ffffff14}
  .mgtop .mgnav a.ask{justify-content:center;min-height:48px;margin-top:14px;border-bottom:0}
  .mgtop .mgnav button,.mgtop .mgnav .out{justify-content:center;min-height:48px;margin-top:10px}
}

/* ---- подвал ---- */
.mgfoot{background:var(--foot);color:var(--on-navy);margin-top:48px;padding-block:46px 34px}
.mgfoot-in{max-width:var(--shell);margin:0 auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:26px}
.mgfoot-in>.biz{justify-self:end}   /* «Для бизнеса» — у правого края (Владимир, 30.09.2026); на телефоне колонка одна, блок слева */
@media (max-width:559px){.mgfoot-in>.biz{justify-self:start}}
.mgfoot h3{margin:0;font:700 var(--text-s) var(--display);text-transform:uppercase;letter-spacing:.04em;color:#fff}
.mgfoot ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.mgfoot a{color:var(--on-dark-2);font-size:var(--text-m);text-decoration:none}
.mgfoot a:not(.btn):hover{color:var(--brand)}   /* кнопка в подвале держит свой тёмный текст: голубой на голубом не читался */
.mgask{max-width:var(--shell);margin:32px auto 0;padding-inline:var(--gutter);
  display:flex;align-items:center;gap:16px 24px;flex-wrap:wrap;font-size:var(--text-s);color:var(--on-dark-2)}
.mgask b{color:#fff;font-family:var(--display)}
.mgask .btn{min-height:42px;padding:0 20px;font-size:var(--text-s)}
.mgask span a{color:var(--brand-light)}
.mgcopy{max-width:var(--shell);margin:24px auto 0;padding-inline:var(--gutter);
  font-size:13px;line-height:1.6;color:var(--on-dark-2);border-top:1px solid #ffffff14;padding-top:24px}
.mgcopy b{color:#fff}
.mgcopy a{color:var(--on-dark-2);text-decoration:underline}
.mgcopy a:hover{color:var(--brand)}

/* ---- поля ввода: общий вид на тёмном; страницы со своей геометрией её и оставляют ---- */
/* Берём все текстовые поля, а не перечисление типов: у поля без атрибута type селектор
   input[type=text] не срабатывает, и оно оставалось прозрачным с системной серой подсказкой. */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=submit]):not([type=button]):not([type=reset]),
textarea,select{background:var(--surface);color:var(--ink);border:1px solid var(--field-border);border-radius:6px;font:inherit}
input::placeholder,textarea::placeholder{color:var(--ink-3);opacity:1}
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:var(--ink-3);opacity:1}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--brand-light);outline-offset:1px}
input[type=checkbox],input[type=radio]{accent-color:var(--brand)}
/* подсказка внутри поля не должна спорить с текстом: делаем её тусклее только у неактивного поля */
input:focus::placeholder,textarea:focus::placeholder{color:#7b8ea3}

/* ---- полоса «в разработке» ---- */
/* статус разработки: предупреждение в полный голос — сплошная жёлтая полоса с тёмным текстом.
   Полоска в косую линию — тот же язык, что у ленты «только просмотр» в админке; контраст
   #041327 на #ffc107 ≈ 12:1, читается и на солнце, и в тёмной теме браузера */
.wip{background:repeating-linear-gradient(135deg,#ffc107 0 18px,#f0b400 18px 36px);
  border-bottom:1px solid #0000001f;
  color:#041327;text-align:center;padding:12px 16px;
  font:800 14px/1.3 var(--display);letter-spacing:.16em;text-transform:uppercase;
  text-shadow:0 1px 0 #ffffff59}
.wip b{font-weight:800}
@media (max-width:560px){.wip{padding:10px 12px;font-size:12px;letter-spacing:.12em}}

/* ---- ссылка «к содержимому» ---- */
.skip{position:absolute;left:-9999px;top:8px;z-index:1200;background:var(--brand);color:var(--on-brand);
  padding:10px 16px;border-radius:6px;font-weight:700;text-decoration:none}
.skip:focus{left:var(--gutter)}

/* ---- печать: шапка, подвал и служебные полосы на бумагу не идут ---- */
@media print{
  body{padding-top:0}
  .mgtop,.mgfoot,.wip,.ckbar,.skip{display:none!important}
}

/* ---- пункты под шапкой: разделы админки и кабинета ----
   Ссылки-«таблетки» в ряд; текущий раздел — заливка фирменным. Адрес пункта — путь или #якорь. */
.tabs{max-width:var(--shell);margin:0 auto;padding:18px var(--gutter) 0;display:flex;gap:10px;flex-wrap:wrap}
.tabs a{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1.5px solid var(--rule);border-radius:999px;
  padding:10px 20px;font:800 12px var(--display);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);text-decoration:none;
  transition:border-color var(--dur),color var(--dur),background var(--dur)}
.tabs a:hover{border-color:var(--brand);color:var(--ink)}
.tabs a[aria-current="page"]{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.tabs a:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.tabs .n{font:800 11px var(--display);letter-spacing:0;background:#ffffff1f;border-radius:9px;padding:1px 7px}
.tabs a[aria-current="page"] .n{background:#02182d29}
@media (max-width:640px){.tabs a{padding:9px 15px}}