/* Экраны приложения и входа. Внешний файл — inline-CSS запрещён строгим CSP (§3).
   Палитра взята из логотипа: тёмно-синий, жёлтая галочка, белый.

   Жёлтый — цвет ЗАЛИВКИ, а не текста: на светлом фоне он даёт контраст
   около 1.7:1 и нечитаем. Для акцентных надписей есть тёмное золото
   (--gold-ink), оно от того же цвета, но проходит по контрасту. */

:root{
  /* Фон чуть глубже белого: раньше карточки цвета #FFF лежали на почти таком
     же #F5F7FA и не отделялись — весь экран выглядел одной блёклой простынёй. */
  --canvas:#EDF1F8;
  --ink:#16243C;
  --ink-soft:#3D4A64;
  /* Второстепенный текст был #8892A6 — почти в половину силы основного.
     Именно он и создавал ощущение выцветшего экрана: приметы дел, подписи
     полей и подсказки написаны им. Здесь он темнее и синее. */
  --ink-faint:#5E6B85;
  --line:rgba(22,36,60,.12);
  --line-strong:rgba(22,36,60,.20);
  --white:#FFFFFF;
  --amber:#FBBE0F;
  --amber-soft:rgba(251,190,15,.22);
  --gold-ink:#8A6404;
  --work:#12A47C;
  --err:#CE3E38;

  /* ЦВЕТА КРУГОВ — один набор на всё приложение.
     Раньше они были вписаны числами в десяток мест, и полоска дела в ленте
     жила своей жизнью относительно кнопки в форме: полоска бледная, кнопка
     яркая. Теперь набор один: -ink для текста (тёмный, проходит по
     контрасту), -line для рамок и полосок (яркий), -bg для заливок. */
  --p-ink:#2F3A9E;  --p-line:#4A55C4;  --p-bg:rgba(74,85,196,.16);
  --f-ink:#B02040;  --f-line:#E0455F;  --f-bg:rgba(224,69,95,.16);
  --w-ink:#08694E;  --w-line:#12A47C;  --w-bg:rgba(18,164,124,.16);

  --r:16px;

  /* ШКАЛА ОТСТУПОВ. Раньше в файле встречались 2,3,4,5,6,7,8,9,10,11,12,13,
     14,16,18,20,22,24,26 px: соседние значения глазом не различаются, но
     каждое приходится держать в голове, и при любой правке они расходятся.
     Шесть ступеней покрывают всё, и разница с прежними числами нигде не
     больше двух пикселей. */
  --s1:4px;
  --s2:8px;
  --s3:12px;
  --s4:16px;
  --s5:24px;
  --s6:32px;
}

*{box-sizing:border-box;margin:0;padding:0}

/* Скрытый — значит скрытый. Правила вроде .check{display:flex} имеют ту же
   силу, что и [hidden], и перебивали его: галочка «просить подтвердить»
   оставалась на экране, хотя должна была исчезнуть. */
[hidden]{display:none!important}

body{
  background:var(--canvas);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:17.5px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* Единые отступы для всех экранов: раньше у дня, кругов и форм они были
   разные, и переход между экранами «дёргал» вёрстку. */
/* ОДНА ШИРИНА НА ВСЁ ПРИЛОЖЕНИЕ.
   Лента дня была 560, остальные экраны 460 — и переход с главной на дело
   выглядел как переход в другое приложение: карточка внезапно ужималась.
   Разница осталась с тех пор, когда лента была единственным «широким»
   экраном; смысла в ней нет, а глазу такой скачок заметен сразу. */
.shell{max-width:560px;margin:0 auto;padding:5px 5px 48px}

/* Логотип — картинка из фирменного файла, а не набранный шрифтом текст.
   Размер зафиксирован в пикселях: без этого браузер до загрузки картинки не
   знает её высоту, и шапка на глазах подпрыгивает. */
/* Логотип — это ссылка на главную, и попасть в неё пальцем надо так же
   легко, как в остальные. Отступ снизу отрицательным полем гасится: он
   был частью прежней высоты шапки. */
.brand{
  display:inline-flex;align-items:center;gap:10px;line-height:1;
  color:var(--ink);text-decoration:none;margin-bottom:var(--s4);
  padding:var(--s2) 0;
}
/* Логотип приподнят на 9.4% собственной высоты. Это поправка на то, что в
   файле над буквами торчит галочка: она тянет вверх границу кадра, и у
   отцентрованной коробки само слово «slovin» оказывается ниже соседнего
   текста и бургера. Число подобрано замером: середина букв логотипа, середина
   даты и середина бургера сходятся в одну линию с точностью до трети пикселя.
   Проценты, а не пиксели: на узком экране логотип мельче, и поправка обязана
   уменьшиться вместе с ним. Смещение рисованное (transform) — на раскладку
   не влияет, высота строки не прыгает. */
.brand-logo{display:block;width:95px;height:26px;flex:none;transform:translateY(-9.4%)}
.brand .glyph{
  width:11px;height:11px;border-radius:50%;
  background:var(--amber);box-shadow:0 0 0 4px var(--amber-soft);
}

/* Индикатор шагов — человеку видно, что осталось немного */
.progress{display:flex;gap:7px;margin-bottom:18px}
.progress .dot{
  height:4px;flex:1;border-radius:4px;background:var(--line-strong);
  transition:background .25s ease;
}
.progress .dot.done{background:var(--work)}
.progress .dot.now{background:var(--amber)}

.card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:18px;
  padding:var(--s4) 5px;
  box-shadow:0 1px 2px rgba(27,42,68,.04), 0 18px 40px -20px rgba(27,42,68,.18);
}

/* Карточки шли встык: margin у .card не было, а .shell — обычный блок без
   gap. Просвет, который казался отступом, давали только скругления углов,
   и на стыке двух карточек получалась «талия». На экранах, где карточек
   по пять (профиль) и по четыре (витрина), это читалось как один большой
   блок с двойной чертой поперёк. */
.card + .card{margin-top:var(--s3)}
/* Последний элемент в карточке не должен добавлять свой нижний отступ к
   её собственному: именно из-за этого под текстом внизу карточки набегало
   лишних 20 px, и в разметке появлялись ручные поправки. */
.card > *:last-child{margin-bottom:0}

.stepno{
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:600;margin-bottom:12px;
}

h1{font-size:26px;line-height:1.15;letter-spacing:-.02em;margin-bottom:10px}
.lede{color:var(--ink-soft);font-size:14.5px;margin-bottom:var(--s4)}
/* Подсказка прижата к тому, что объясняет, и НЕ тащит за собой нижний
   отступ: она чаще всего стоит последней в карточке. */
/* Пояснения — мелким: их читают один раз, а место они занимают всегда.
   Крупная подсказка под каждым полем спорит с самим полем. */
.hint{color:var(--ink-faint);font-size:12.5px;line-height:1.45;margin:var(--s2) 0 0}
/* Когда за подсказкой что-то идёт — отступ появляется снизу у неё, а не
   сверху у соседа: так его видно в одном месте. */
.hint + *{margin-top:var(--s4)}

.err{
  background:rgba(196,69,63,.08);
  border:1px solid rgba(196,69,63,.25);
  color:var(--err);
  border-radius:12px;padding:11px 14px;font-size:14.5px;margin-bottom:18px;
}

/* Выбор оператора */
.choices{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.choice{display:block;cursor:pointer}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice .op{
  display:flex;align-items:center;gap:13px;
  border:1.5px solid var(--line-strong);
  border-radius:14px;padding:15px 17px;
  font-weight:600;font-size:16px;
  transition:border-color .18s, background .18s, box-shadow .18s;
}
/* Кружок-индикатор: без него выбранный вариант почти не отличается от прочих */
.choice .op::before{
  content:"";flex:none;
  width:20px;height:20px;border-radius:50%;
  border:2px solid var(--line-strong);
  transition:border-color .18s, box-shadow .18s;
}
.choice .op em{
  display:block;font-style:normal;font-weight:500;
  font-size:13px;color:var(--work);margin-top:3px;
}
.choice:hover .op{border-color:var(--ink-faint)}
.choice input:focus-visible + .op{outline:2px solid var(--amber);outline-offset:2px}
.choice input:checked + .op{
  border-color:var(--amber);
  background:#FFFBF4;
  box-shadow:0 0 0 3px var(--amber-soft);
}
.choice input:checked + .op::before{
  border-color:var(--amber);
  box-shadow:inset 0 0 0 4px var(--amber);
}

/* Согласия */
.check{
  display:flex;gap:11px;align-items:flex-start;
  padding:13px 0;font-size:15px;cursor:pointer;
}
.check input{width:19px;height:19px;flex:none;margin-top:1px;accent-color:var(--ink)}
.check span{color:var(--ink-soft)}
/* Недоступная галочка: гасим, но не прячем — рядом стоит строка о том,
   чего не хватает, и исчезнувший пункт объяснить было бы нечем. */
.check.off{cursor:default;opacity:.55}
.check.off input{cursor:default}

/* Поля */
.field{display:block;margin-bottom:6px}
.field .lbl{
  display:block;font-size:14.5px;font-weight:600;
  color:var(--ink-soft);margin-bottom:7px;
}
.field input{
  width:100%;font-size:18px;font-family:inherit;color:var(--ink);
  background:var(--canvas);
  border:1.5px solid var(--line-strong);border-radius:13px;
  padding:14px 16px;
  transition:border-color .18s;
}
.field input:focus{outline:none;border-color:var(--ink)}
.field input.code{
  letter-spacing:.4em;text-align:center;font-size:24px;font-weight:600;
}

/* ТРИ УРОВНЯ КНОПОК, И БОЛЬШЕ НИКАКИХ.
   .btn — главное действие экрана, одно на экран: тёмная, во всю ширину.
   .act — второстепенное: белая пилюля по содержимому (app.css).
   .act-danger / .btn-danger — опасное.
   Всё, что было помимо (синяя телеграмная, «призрак», «как ссылка»), —
   это варианты этих трёх, а не четвёртый и пятый вид. */
.btn{
  width:100%;margin-top:var(--s4);
  background:var(--ink);color:var(--canvas);
  font-family:inherit;font-weight:600;font-size:16px;
  border:none;border-radius:13px;padding:15px;cursor:pointer;
  min-height:52px;
  transition:transform .15s ease, box-shadow .2s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px -10px rgba(27,42,68,.6)}
.btn:active{transform:none}

.ok{
  width:52px;height:52px;border-radius:50%;
  background:var(--work);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:26px;margin-bottom:16px;
}

/* Подпись над выбором канала на шаге 3 */
.channel-lbl{margin:22px 0 10px}

/* Недоступный вариант (Telegram, пока нет бота) */
.choice .op.off{opacity:.5}
.choice input:disabled + .op{cursor:not-allowed}
.choice .op.off em{color:var(--ink-faint)}

/* Ссылка под формой входа */
.alt{
  margin-top:20px;padding-top:18px;
  border-top:1px solid var(--line);
  font-size:14.5px;color:var(--ink-soft);text-align:center;
}
.alt a{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--amber)}
.alt a:hover{color:var(--amber)}

/* ССЫЛКА ВНУТРИ ТЕКСТА — один вид на всё приложение.
   Было вперемешку: «Правила» и «Тарифы» тёмным текстом без подчёркивания
   (от обычного слова не отличить), адрес визитки — синим подчёркнутым «как
   в браузере». Здесь и то и другое выглядит одинаково: цвет текста, тонкое
   подчёркивание с отступом. Вертикальный padding — ради пальца: сама
   строка от этого не разъезжается, у неё хватает межстрочного интервала. */
.ilink{
  color:var(--ink);font-weight:600;
  text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:var(--line-strong);
  padding:var(--s2) 0;
}
.ilink:hover{text-decoration-color:var(--ink)}
/* Внешняя ссылка помечена стрелкой: открытие нового окна не должно быть
   сюрпризом. Знак рисуем псевдоэлементом — в разметке ничего не нужно. */
.ilink[target="_blank"]::after,
.vcard-foot a[target="_blank"]::after{
  content:'\2197';
  font-size:.85em;margin-left:3px;
  text-decoration:none;display:inline-block;vertical-align:baseline;
}

/*
  ЛОВУШКИ. Скрываем так, чтобы простой парсер HTML этого не понял:
  не display:none (его боты научились определять), а вынос за экран.
  Живой человек их не видит и не может заполнить.
*/
.hp{
  position:absolute !important;
  left:-9999px !important;
  top:auto;
  width:1px;height:1px;
  overflow:hidden;
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important}
  .btn:hover{transform:none}
}

/* Экран блоков: онбординг после регистрации и настройка потом */
.blocks{display:flex;flex-direction:column;gap:10px;margin:14px 0 4px}
/* Круг: шапка (название + переключатель) и подвал (кто здесь, пригласить).
   Всё внутри одной рамки — снаружи было непонятно, к чему оно относится. */
.block{
  display:block;border:1.5px solid var(--line-strong);border-radius:14px;
  padding:12px 13px;transition:border-color .18s, background .18s;
}
.block-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.block-foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin-top:10px;padding-top:10px;border-top:1px solid var(--line);
}
.invite-form{margin-left:0}
.block-foot .invite-form{margin-left:auto}
.block-foot .members{margin-top:0}
/* Включённый круг красится в СВОЙ цвет — тот же, что у полоски дела в ленте
   и у кнопки выбора круга в форме. Раньше все три были зелёными, и «Личное»
   с «Семьёй» на этом экране выглядели работой. */
.block.on{border-color:var(--w-line);background:rgba(18,164,124,.07)}
.block.on.personal{border-color:var(--p-line);background:rgba(74,85,196,.07)}
.block.on.personal .block-name{color:var(--p-ink)}
.block.on.family{border-color:var(--f-line);background:rgba(224,69,95,.07)}
.block.on.family .block-name{color:var(--f-ink)}
.block.on.work{border-color:var(--w-line);background:rgba(18,164,124,.07)}
.block.on.work .block-name{color:var(--w-ink)}
.block-txt{flex:1;min-width:0}
.block-name{font-weight:700;font-size:16.5px;letter-spacing:-.01em}
.block-desc{font-size:14px;color:var(--ink-soft);margin-top:2px}
.block-note{font-size:12.5px;color:var(--ink-faint);margin-top:5px;font-style:italic}
.toggle{
  flex:none;font-family:inherit;font-weight:600;font-size:14px;
  border-radius:10px;padding:9px 16px;cursor:pointer;
  border:1.5px solid var(--ink);background:var(--ink);color:var(--canvas);
  transition:background .18s, color .18s, border-color .18s;
}
.toggle.on{background:transparent;color:var(--ink-soft);border-color:var(--line-strong)}
.toggle.on:hover{border-color:var(--err);color:var(--err)}

/* Кнопка-ссылка (тот же вид, что .btn, но это <a>) */
.btn.as-link{display:block;text-align:center;text-decoration:none;box-sizing:border-box}

/* Приглашение в общий блок */
.invite-btn{
  font-family:inherit;font-size:13px;font-weight:600;
  background:none;border:1.5px solid var(--line-strong);border-radius:10px;
  padding:8px 12px;color:var(--ink-soft);cursor:pointer;
  transition:border-color .18s,color .18s;
}
.invite-btn:hover{border-color:var(--ink);color:var(--ink)}
.invite-box{
  background:#FFFBF4;border:1.5px solid var(--amber);
  border-radius:14px;padding:15px 16px;margin-bottom:18px;
}
.invite-title{font-weight:600;font-size:15px;margin-bottom:9px}
.invite-link{
  width:100%;font-family:ui-monospace,monospace;font-size:12.5px;
  background:var(--white);border:1px solid var(--line-strong);
  border-radius:9px;padding:10px 11px;color:var(--ink);
}
.invite-note{font-size:12.5px;color:var(--ink-soft);margin-top:8px}

/* СЕКЦИЯ ВНУТРИ КАРТОЧКИ — один вид на все.
   На экране настроек их было три разных: серая заливка у Telegram и
   уведомлений, обведённая рамка у «Модулей» и голые поля между ними —
   три способа сказать одно и то же на одном экране. */
.tg-box,.mod-block,.plan-ask-body{
  margin:0 0 var(--s4);padding:var(--s4);
  border:1px solid var(--line);border-radius:14px;background:var(--canvas);
}
.tg-box .lede{margin:0 0 var(--s3)}
/* Была единственной синей кнопкой во всём приложении и выбивалась из
   палитры логотипа. Telegram узнают по названию и значку, а не по тому,
   что кнопка чужого цвета. */
.tg-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;text-decoration:none}
.tg-box .hint{margin-top:10px}
/* Подсказка под полем и сразу рамка следующего блока — встык не ставим. */
.hint + .tg-box,.hint + .mod-block{margin-top:var(--s3)}

/* Кто в блоке */
.members{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:9px}
.members-lbl{font-size:12.5px;color:var(--ink-faint)}
.member{
  font-size:12.5px;padding:3px 9px;border-radius:20px;
  background:rgba(27,42,68,.06);color:var(--ink-soft);
}
.member.owner{background:var(--amber-soft);color:var(--gold-ink)}
.joined-title{margin-top:var(--s4);font-size:17px;font-weight:700;letter-spacing:-.01em}
.joined-lede{font-size:13.5px;color:var(--ink-faint);margin:4px 0 12px}
.block.joined{cursor:default}

/* --- Языки визитки: вкладки -------------------------------------------
   Панель каждого языка видна по очереди — но только когда скрипт на месте
   и умеет их переключать. Без него .tabs-on не появится, и человек увидит
   обе панели подряд: длиннее, зато ничего не потеряно. */

.langbox{margin-bottom:18px}

.lang-tabs{display:flex;align-items:center;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.lang-tab{
  font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.04em;
  color:var(--ink-faint);background:var(--white);
  border:1px solid var(--line);border-radius:10px;
  padding:10px 14px;min-height:40px;cursor:pointer;
  display:inline-flex;align-items:center;
  transition:background .15s,color .15s,border-color .15s;
}
.lang-tab:hover{border-color:var(--line-strong);color:var(--ink)}
.lang-tab.on{background:var(--ink);border-color:var(--ink);color:#fff}
.lang-note{font-size:13px;color:var(--ink-faint);margin-left:4px}

/* Пока вкладки не ожили, панели идут подряд и их надо разделить. */
.langbox:not(.tabs-on) .lang-pane + .lang-pane{
  margin-top:18px;padding-top:18px;border-top:1px solid var(--line);
}
.langbox.tabs-on .lang-pane{display:none}
.langbox.tabs-on .lang-pane.on{display:block}

/* Подсказка, текст которой убран (пустая строка в словаре), места не
   занимает: тексты правятся в словаре, разметку трогать не нужно. */
.hint:empty,.lede:empty,.inbox-lede:empty,.ob-help:empty{display:none}