/* Тема в духе платформы Firstbase (просьба Дарьи 26.09.2026): глубокий индиго,
   узкая колонка иконок слева, строка поиска сверху, крупные цифры тонким
   начертанием, вкладки с подчёркиванием, градиентное свечение в приветствии.
   Отдельным файлом НИЖЕ proto.css / fonts-play1.css / ui.css по каскаду:
   прототип не правится, тема снимается удалением одной строки в base.html. */
:root{
  --ink:#04061A; --surface:#0B0E33; --surface-2:#12163F;
  --line:#1E2357; --line-soft:#171B48;
  --text:#EDEDF3; --text-dim:#A5A8E6; --text-mute:#7D80C4;
  --brand:#7B61FF; --brand-2:#A4A7FF;
  --live:#09CE68; --money:#F5C451; --warn:#FF5DB1; --bad:#FF5C7A;
  --radius:14px; --radius-sm:10px; --nav:64px;
}
body{background:var(--ink)}
/* типографика: спокойные веса вместо ExtraBold */
h1,h2,.brand b,.tile .v,.mbody h3,.sheet h3{font-weight:500;letter-spacing:-.02em}
h3,.card h3,.who2 b,.doc__n b,.mitem b{font-weight:500;letter-spacing:-.01em}
.tile .v{font-weight:400;font-size:30px;letter-spacing:-.025em;margin-top:6px}
.tile .k{font-family:var(--font);font-weight:400;letter-spacing:0;text-transform:none;font-size:13px;color:var(--text-dim)}
.tile .d{font-size:12px;color:var(--text-mute)}
th{font-family:var(--font);font-weight:500;letter-spacing:0;text-transform:none;font-size:12px;color:var(--text-mute)}
.chip{font-family:var(--font);letter-spacing:0;background:rgba(123,97,255,.08);border-color:rgba(123,97,255,.2);color:var(--text-dim)}
.chip--brand{background:rgba(123,97,255,.18);border-color:rgba(164,167,255,.45);color:#D8D9FF}
.chip--live{background:rgba(9,206,104,.1);border-color:rgba(9,206,104,.3);color:var(--live)}
.badge{font-family:var(--font)}
/* цифры — Inter с табличными цифрами, моно остаётся только кодам (.mono) */
.num,.tile .v,td.num,.stage .c,.kv b,.tzbox .v,.side-foot .who small{font-family:var(--font);font-variant-numeric:tabular-nums}
.avatar{font-family:var(--font);border-radius:50%}
.btn{background:transparent;border-color:var(--line);color:var(--text)}
.btn:hover{background:var(--surface-2)}
.btn--p{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:500}
.btn--p:hover{background:#8F7BFF}
.card,.tile{box-shadow:0 1px 0 rgba(255,255,255,.02) inset}
.livepill{color:var(--live);border-color:rgba(9,206,104,.25);background:rgba(9,206,104,.06)}
.nav-i.on{background:rgba(123,97,255,.16);color:var(--brand-2)}
.stage.done{border-color:rgba(9,206,104,.3)} .stage.now{border-color:rgba(164,167,255,.5);background:rgba(123,97,255,.1)}
/* текстовые поля — как наши выпадашки (.ui-field): скругление, фон, рамка, фокус (просьба Дарьи 26.09) */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not(.ui-hidden),textarea{
  appearance:none;-webkit-appearance:none;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);
  color:var(--text);font:inherit;font-size:14px;min-height:38px;padding:8px 11px;box-sizing:border-box;outline:0;transition:border-color .15s,box-shadow .15s}
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not(.ui-hidden):focus,textarea:focus{
  border-color:var(--brand-2);box-shadow:0 0 0 3px rgba(123,97,255,.22)}
input::placeholder,textarea::placeholder{color:var(--text-mute)}
input[readonly]:not([type=checkbox]){color:var(--text-dim);background:var(--surface)}
input:disabled,textarea:disabled{opacity:.6}
textarea{min-height:88px;resize:vertical}
.top .search input,.top .search input:focus{background:transparent;border:0;box-shadow:none;min-height:0;padding:6px 0}
input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}
.kv input,.kv textarea{width:100%}
.ok{background:rgba(9,206,104,.08);border-color:rgba(9,206,104,.3);color:#7EE2AE}

/* ── колонка иконок (≥761px): подписи в title, группы скрыты ── */
@media (min-width:761px){
  :root{--nav:64px}
  html.nav-open{--nav:236px}
  .side{align-items:center}
  .brand{padding:14px 0;justify-content:center;border-bottom:0}
  .brand b,.brand span,.nav-i span.lb,.nav-i .badge,.navlbl,.side-foot .who{display:none}
  nav{padding:8px 10px;gap:4px;width:100%}
  .nav-i{justify-content:center;padding:10px 0}
  .nav-i svg{width:20px;height:20px;flex:0 0 auto}
  .side-foot{flex-direction:column;justify-content:center;gap:6px;padding:10px 8px;width:100%}
  .side-foot form{display:contents}
  .side-foot .chip{padding:3px 6px;font-size:10.5px}
  /* кнопка разворота */
  .nav-toggle{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--surface-2);color:var(--text-dim);display:grid;place-items:center;cursor:pointer;margin:2px auto 4px}
  .nav-toggle:hover{color:var(--text);border-color:var(--brand-2)}
  .nav-toggle svg{transition:transform .2s}
  html.nav-open .nav-toggle svg{transform:rotate(180deg)}
  /* развёрнуто: подписи, группы, имя */
  html.nav-open .side{align-items:stretch}
  html.nav-open .brand{justify-content:flex-start;padding:14px 16px}
  html.nav-open .brand b,html.nav-open .brand span,html.nav-open .nav-i span.lb,html.nav-open .navlbl,html.nav-open .side-foot .who{display:block}
  html.nav-open .nav-i{justify-content:flex-start;padding:9px 10px;gap:10px}
  html.nav-open .side-foot{align-items:flex-start;padding:10px 12px}
  html.nav-open .side-foot .who{margin-bottom:6px}
  html.nav-open .nav-toggle{margin:2px 14px 4px auto}
}
@media (max-width:760px){.nav-toggle{display:none}}
/* ── верхняя строка: поиск, колокольчик, аватар ── */
.top{padding:10px 18px;gap:12px}
.top .search{flex:1;display:flex;align-items:center;gap:8px;max-width:640px;color:var(--text-mute)}
.top .search input{flex:1;background:transparent;border:0;color:var(--text);font-size:14px;padding:6px 0;outline:0}
.top .search input::placeholder{color:var(--text-mute)}
.top .ibtn{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--text-dim);border:1px solid transparent;position:relative}
.top .ibtn:hover{background:var(--surface-2);border-color:var(--line)}
.top .ibtn .dot{position:absolute;top:8px;right:8px;width:6px;height:6px;border-radius:50%;background:var(--money);animation:none;box-shadow:none}
.top .ava{width:34px;height:34px;border-radius:50%;background:linear-gradient(140deg,#7B61FF,#2FD3C8);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:600;text-decoration:none}
.pagehead{display:flex;align-items:flex-end;gap:14px;padding:22px 18px 6px}
.pagehead h1{font-size:24px;margin:0}
.pagehead .sub{color:var(--text-dim);font-size:13px;margin-top:4px}
.pagehead .spacer{flex:1}
/* ── вкладки фильтров ── */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:14px;flex-wrap:wrap}
.tabs .chip{background:none;border:0;border-bottom:2px solid transparent;border-radius:0;padding:8px 12px;font-size:13px;color:var(--text-mute);margin-bottom:-1px}
.tabs .chip--brand{color:var(--text);border-bottom-color:var(--brand)}
/* ── приветствие с градиентным свечением ── */
.hero{position:relative;overflow:hidden;border-radius:var(--radius);border:1px solid var(--line);padding:22px 24px;margin-bottom:14px;
  background:radial-gradient(90% 140% at 0% 0%,rgba(255,93,177,.55) 0%,rgba(123,97,255,.45) 35%,rgba(47,211,200,.25) 60%,rgba(11,14,51,0) 100%),var(--surface)}
.hero .k{color:#D8D9FF;font-size:13px}
.hero h2{font-size:26px;font-weight:400;letter-spacing:-.02em;margin:4px 0 0}
.hero .d{color:#C9CBF5;font-size:13px;margin-top:6px}
.btn--white{background:#F1F1FF;border-color:#F1F1FF;color:#0B0E33;font-weight:500}
.btn--white:hover{background:#fff}
/* вход: свечение фоном */
.anon-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(55% 45% at 50% 108%,rgba(255,93,177,.55) 0%,rgba(123,97,255,.45) 35%,rgba(47,160,255,.28) 60%,transparent 80%),
             radial-gradient(40% 30% at 12% 8%,rgba(123,97,255,.18),transparent 70%)}
.anon-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 100%,rgba(255,255,255,.08),transparent 70%)}
main.main[style] h1{font-size:30px;font-weight:500;letter-spacing:-.03em}

/* столбики аналитики Workforce: насыщенный верх с белой кромкой и свечением,
   к основанию цвет тает в фон (правки Дарьи 26.09: не ярко, но и не серо) */
.bars{display:flex;gap:6px;align-items:flex-end;height:170px;padding:6px 0 0}
.bars .bar{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;font-size:10.5px;color:var(--text-mute);gap:3px}
.bars .bar i{--c:123,97,255;display:block;width:100%;max-width:34px;min-height:3px;border-radius:7px 7px 3px 3px;
  background:linear-gradient(180deg,rgba(255,255,255,.55) 0,rgba(255,255,255,0) 2px),
             linear-gradient(180deg,rgba(var(--c),.95) 0%,rgba(var(--c),.55) 45%,rgba(var(--c),.10) 100%);
  border-top:1px solid rgba(255,255,255,.7);box-shadow:0 0 18px rgba(var(--c),.28),0 -1px 0 rgba(255,255,255,.2) inset;transition:box-shadow .15s,filter .15s}
.bars .bar:hover i{filter:brightness(1.12);box-shadow:0 0 26px rgba(var(--c),.45)}
.bars .bar i.warn{--c:255,93,177}
.bars .bar i.money{--c:245,196,81}
.bars .bar i.live{--c:9,206,104}
.bars .bar b{font-weight:500;color:var(--text);font-size:11px;white-space:nowrap;letter-spacing:-.02em}
/* полоски прогресса (рейтинг, маржа): та же гамма, свечение по цвету */
.meter{display:inline-block;width:90px;height:6px;border-radius:99px;background:rgba(255,255,255,.07);vertical-align:middle;overflow:hidden}
.meter i{--c:123,97,255;display:block;height:6px;border-radius:99px;background:linear-gradient(90deg,rgba(var(--c),.55),rgba(var(--c),1));box-shadow:0 0 10px rgba(var(--c),.45)}
.meter i.live{--c:9,206,104} .meter i.money{--c:245,196,81} .meter i.warn{--c:255,93,177}