/* ==========================================================================
Collab — design system «signal»
Холодные графитовые нейтрали, электрический индиго-акцент и свечение
вместо теней. Цвет работает точечно: заливка действия, активный раздел,
статус — всё остальное держит стекло и линия.
========================================================================== */
:root{
/* нейтральная шкала — холодный графит с петролевой прохладой */
--n-950:#071012;
--n-900:#0E1618;
--n-800:#172225;
--n-700:#243437;
--n-600:#3C4F53;
--n-500:#5C6C70;
--n-400:#849699;
--n-300:#A9BABD;
--n-200:#CBD9DB;
--n-150:#DCE7E9;
--n-100:#EAF1F2;
--n-050:#F4F9F9;
/* brand — петролевый ряд вокруг заливки кнопок */
--brand-700:#0D3B50;
--brand-600:#175976;
--brand-500:#2A7396; /* основной акцент */
--brand-400:#4E93B4;
--brand-300:#8ABBD1;
--brand-200:#C0DCE9;
--brand-100:#E0EEF4;
--brand-050:#F1F8FB;
/* залитые акценты: активный пункт меню, основная кнопка.
Цвет — тёмная часть петролевого градиента логотипа */
--solid:#175976;
--solid-2:#114A63;
--solid-ink:#FFFFFF;
/* подсветка hover-подложек */
--tint:rgba(23,89,118,.08);
/* semantic — насыщенные, экранные */
--ok:#12A06E; --ok-bg:#E4F6EF; --ok-ink:#0B7351;
--warn:#C8811A; --warn-bg:#FCF1DF; --warn-ink:#8F5B10;
--bad:#E0384E; --bad-bg:#FDEAEC; --bad-ink:#A82235;
--info:#2D7FF9; --info-bg:#E7F0FE; --info-ink:#1B5AC0;
/* surfaces (light) — ЭКСПЕРИМЕНТ: холст белый, плашки петролево-серые.
Откат — вернуть значения из комментария справа. */
--bg:#FFFFFF; /* было #E8F0F1 */
--bg-2:#EDF4F5; /* было #DCE8EA */
--card:#F5F8F9; /* было #FFFFFF; тон плашки «Мы на связи» */
--card-2:#EDF3F4; /* было #F5FAFA */
--ink:#0E1618;
--ink-2:#2C3A3E;
--muted:#5C6C70;
--faint:#8B9A9E;
--line:#F2F2F2; /* тонкая линия внутри поверхностей; было #E4EDEE */
/* разделитель внутри плашки: на тон темнее её заливки и в той же
петролевой тональности, иначе нейтральный серый смотрится грязным */
--line-2:#EAF0F2; /* было #EFF5F5 */
--line-strong:#E6E6E6; /* рамки полей и кнопок; каркас (топбар, сайдбар) теперь на --line */
--sheet:#FFFFFF; /* модалки и поля ввода остаются белыми */
--bg-side:#F3F7F8; /* сайдбар: чуть темнее белого холста; было #F9FBFC */
--line-side:#F7F7F7; /* граница сайдбара — тише обычной линии */
/* контентные блоки живут без тени — их держит обводка.
Тень остаётся только у того, что действительно висит над страницей. */
--shadow-xs:none;
--shadow-sm:none;
--shadow:0 6px 20px -14px rgba(12,16,24,.22);
--shadow-lg:0 20px 48px -28px rgba(12,16,24,.26), 0 2px 8px -6px rgba(12,16,24,.08);
--ring:0 0 0 3px rgba(23,89,118,.22);
--r-xs:6px; --r-sm:9px; --r:12px; --r-lg:16px; --r-xl:20px; --r-2xl:26px;
--sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
--display:'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
--ease:cubic-bezier(.2,.8,.2,1);
--t-fast:.14s var(--ease);
--t:.2s var(--ease);
--sidebar:264px;
--topbar:56px;
--card-content-pt:30px;
--card-content-px:34px;
--card-content-pb:30px;
--rows-std-min-h:46px;
--rows-std-py:11px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
margin:0; background:var(--bg); color:var(--ink);
font:450 14px/1.55 var(--sans);
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
font-feature-settings:"cv11","ss01","calt";
}
h1,h2,h3,h4{font-family:var(--display); font-weight:700; letter-spacing:-.025em; margin:0; color:var(--ink); text-wrap:balance}
h1{letter-spacing:-.035em}
html{scroll-behavior:smooth}
input,textarea,select,button{accent-color:var(--ink)}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
svg{width:20px; height:20px; fill:currentColor; flex:none}
/* иконки Lucide — только контур */
.ic{fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
/* единая обводка: цвет всегда из --line */
[hidden]{display:none !important}
.bd{border:1px solid var(--line)}
.bd-t{border-top:1px solid var(--line)}
.bd-b{border-bottom:1px solid var(--line)}
::selection{background:var(--brand-200); color:var(--ink)}
/* ссылка в тексте — акцентом и всегда подчёркнута */
.link{color:var(--brand-600); font-weight:500; text-decoration:underline;
text-decoration-color:color-mix(in srgb, currentColor 55%, transparent);
text-underline-offset:3px; text-decoration-thickness:1px; transition:text-decoration-color var(--t-fast), color var(--t-fast)}
.link:hover{color:var(--brand-500); text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--brand-500); outline-offset:2px; border-radius:5px}
/* числа всегда моноширинные по цифрам — колонки не «пляшут» */
.num,.money,.tbl td,.rows__i b,.kv dd,time{font-variant-numeric:tabular-nums}
/* scrollbars — скрыты, прокрутка остаётся */
html,body,*{scrollbar-width:none; -ms-overflow-style:none}
*::-webkit-scrollbar{width:0; height:0}
/* ───────────────── layout ───────────────── */
.app{display:flex; min-height:100vh}
.sidebar{
width:var(--sidebar); flex:none; position:sticky; top:0; height:100vh;
display:flex; flex-direction:column; z-index:40;
background:linear-gradient(168deg,#005570 0%,#00465C 44%,#00303F 100%); color:var(--ink-2);
/* тёмная панель, как в админке: внутри токены инвертированы */
--ink:#F1F8FB;
--ink-2:#CFE3EC;
--muted:#93B4C2;
--faint:#7BA0B0;
--line:rgba(255,255,255,.12);
--line-2:rgba(255,255,255,.10);
--line-strong:rgba(255,255,255,.12);
--card:rgba(255,255,255,.10);
--card-2:rgba(255,255,255,.06);
--bg-2:rgba(255,255,255,.12);
--tint:rgba(255,255,255,.08); /* подложка ховера */
--brand-050:rgba(255,255,255,.08);
--brand-100:rgba(255,255,255,.14);
--brand-500:#8FD0E6; /* иконка и акцентный текст на тёмном */
--brand-600:#8FD0E6;
}
/* логотип с воздухом сверху: раньше стоял по центру полосы высотой с шапку и жался к краю */
.sidebar__head{display:flex; align-items:center; justify-content:space-between; padding:30px 22px 12px; flex:none}
.sidebar__scroll{flex:1; overflow-y:auto; padding:14px 14px 18px; display:flex; flex-direction:column; gap:18px}
.sidebar__foot{flex:none; padding:10px 14px 14px}
.sidebar .sidebar__close{display:none}
/* logo */
/* логотип Collab в сайдбаре — свой класс: .logo ниже занят плашкой компании
(квадрат 38×38 с обрезкой), и на общем классе надпись обрезалась */
.brand{display:inline-flex; align-items:center}
.brand img{height:30px; width:auto; display:block}
/* nav */
.nav{display:flex; flex-direction:column; gap:1px}
.nav__label{font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); padding:18px 10px 8px}
.nav__label:first-child{padding-top:2px}
.nav__item{
display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:var(--r-sm);
color:var(--ink-2); font-size:13.5px; font-weight:500; position:relative;
transition:background var(--t-fast), color var(--t-fast);
}
.nav__item svg{width:18px; height:18px; color:var(--faint); transition:color var(--t-fast)}
.nav__item:hover{background:var(--tint); color:var(--ink)}
.nav__item:hover svg{color:var(--brand-500)}
/* активный пункт — как в админке: светлый градиент в гамме на тёмной панели, белый текст */
.nav__item.is-active{color:var(--solid-ink); font-weight:600; background:linear-gradient(140deg,#1691B3,#0A7E9E)}
.nav__item.is-active svg{color:var(--solid-ink)}
.nav__count{margin-left:auto; font-size:11px; font-weight:600; background:var(--bg-2); color:var(--muted);
padding:1px 7px; border-radius:99px; font-style:normal; font-variant-numeric:tabular-nums}
.nav__item.is-active .nav__count{background:color-mix(in srgb,var(--solid-ink) 16%,transparent); color:var(--solid-ink)}
.nav__count--hot:not(:empty){background:var(--bad); color:#fff}
.nav__count:empty{display:none}
/* мессенджеры в подвале сайдбара — плашка на месте прежнего блока с именем */
.sidebar__social{
display:flex; align-items:center; justify-content:space-between; gap:10px;
/* без заливки — подвал отделяет от меню только тихая линия */
padding:14px 12px 4px; border:0; border-top:1px solid var(--line); border-radius:0;
background:transparent
}
.social__t{font-size:12px; font-weight:500; color:var(--muted); letter-spacing:.01em; white-space:nowrap}
.social__row{display:flex; align-items:center; gap:12px; flex:none}
.social{
width:26px; height:26px; flex:none; border-radius:99px; display:block; overflow:hidden;
transition:transform var(--t-fast), opacity var(--t-fast)
}
.social:hover{transform:translateY(-1px); opacity:.88}
.social img{width:100%; height:100%; display:block; object-fit:cover}
/* user — ведёт в профиль */
.user{display:flex; align-items:center; gap:10px; width:100%; padding:8px; border:0; border-radius:var(--r-sm);
background:transparent; cursor:pointer; text-align:left; transition:background var(--t-fast)}
.user.is-active{background:var(--card); box-shadow:var(--shadow-sm)}
.user__chev{width:16px}
.user:hover{background:var(--tint)}
.user__meta{display:flex; flex-direction:column; min-width:0}
.user__meta b{font-size:13px; font-weight:600; letter-spacing:-.01em}
.user__meta i{font-style:normal; font-size:11.5px; color:var(--muted)}
.user__chev{margin-left:auto; color:var(--faint); width:18px}
/* main + topbar */
.main{flex:1; min-width:0; display:flex; flex-direction:column}
.topbar{
position:sticky; top:0; z-index:30; height:var(--topbar); flex:none;
display:flex; align-items:center; gap:14px; padding:0 42px;
background:color-mix(in srgb, var(--bg) 82%, transparent);
backdrop-filter:saturate(140%) blur(16px); border-bottom:1px solid var(--line);
}
.topbar .topbar__burger{display:none}
.topbar__actions{display:flex; align-items:center; gap:8px; margin-left:auto}
.topbar__social{gap:6px}
/* полоса под шапкой: анкета исполнителя на проверке */
.review-bar{
display:flex; align-items:center; gap:10px; padding:11px 42px;
background:var(--warn-bg); color:var(--warn-ink); font-size:13.5px; line-height:1.4
}
.review-bar[hidden]{display:none}
.review-bar .ic{width:17px; height:17px; flex:none}
.review-bar b{font-weight:600}
/* телефон менеджера в шапке */
.topbar__phone{display:flex; align-items:center; gap:8px}
/* переключатель режимов суперадмина — слева от телефона */
@media (max-width:640px){ .topbar__mode .segmented button{padding:0 8px} }
/* высотой и градиентом — как аватар рядом (.avatar--sm, цвет #175976) */
.btn.topbar__call{
height:30px; padding:0 13px; font-size:12.5px; border:0; border-radius:99px; color:#fff;
background:linear-gradient(145deg, color-mix(in srgb,#175976 74%,#fff) 0%, #175976 76%)
}
.btn.topbar__call:hover{color:#fff; background:linear-gradient(145deg, color-mix(in srgb,#175976 86%,#fff) 0%, var(--solid-2) 76%)}
@media (max-width:640px){ .btn.topbar__call{display:none} }
/* круглая кнопка с трубкой, без номера */
.emp-phone{
display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
border-radius:99px; color:var(--ink-2);
transition:background var(--t-fast), color var(--t-fast)
}
.emp-phone svg{width:16px; height:16px; color:var(--faint); transition:color var(--t-fast)}
.emp-phone:hover{background:var(--tint); color:var(--brand-600)}
.emp-phone:hover svg{color:var(--brand-500)}
/* аватар в шапке — вход в «Мой профиль» */
.topbar__user{display:flex; border-radius:99px; transition:box-shadow var(--t-fast)}
.topbar__user:hover, .topbar__user.is-active{box-shadow:0 0 0 2px var(--brand-300)}
.topbar__user:focus-visible{outline:2px solid var(--brand-300); outline-offset:2px}
.crumbs{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); white-space:nowrap; min-width:0}
.crumbs b{color:var(--ink); font-weight:600; overflow:hidden; text-overflow:ellipsis; letter-spacing:-.01em}
.crumbs span{color:var(--n-300)}
.crumbs a{transition:color var(--t-fast)}
.crumbs a:hover{color:var(--ink)}
/* search */
.search{position:relative; display:flex; align-items:center; gap:8px; width:200px; flex:none;
background:var(--card); border:1px solid var(--line); border-radius:99px; padding:0 12px; height:36px;
box-shadow:var(--shadow-xs);
transition:width .24s var(--ease), border-color var(--t-fast), box-shadow var(--t-fast)}
.search:focus-within{width:320px; border-color:var(--n-300); box-shadow:var(--ring)}
.search svg{color:var(--faint); width:15px; height:15px}
.search input{flex:1; min-width:0; border:0; background:none; outline:none; font-size:13px}
.search input::placeholder{color:var(--faint)}
.search kbd{font:500 10.5px var(--sans); color:var(--faint); background:var(--bg-2); border:0; border-radius:5px; padding:3px 6px}
.search__results{position:absolute; top:calc(100% + 10px); right:0; width:340px; max-width:78vw; background:var(--card); border:1px solid var(--line);
border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:6px; display:none; max-height:60vh; overflow:auto}
.search__results.is-open{display:block; animation:menuIn .16s var(--ease)}
.search__group{font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); padding:10px 10px 6px}
.search__row{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--r-sm); cursor:pointer; transition:background var(--t-fast)}
.search__row:hover,.search__row.is-cursor{background:var(--bg-2)}
.search__row small{margin-left:auto; color:var(--faint); font-size:11.5px}
/* view */
.view{padding:34px 42px 40px; max-width:1400px; width:100%; margin:0 auto; animation:rise .36s var(--ease)}
@keyframes rise{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
/* ───────────────── atoms ───────────────── */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:7px; height:38px; padding:0 15px;
border-radius:var(--r-sm); border:1px solid var(--line-strong); background:var(--card); color:var(--ink);
font-size:13.5px; font-weight:600; letter-spacing:-.01em; cursor:pointer; white-space:nowrap;
box-shadow:var(--shadow-xs);
transition:background var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), transform .1s var(--ease);
}
.btn svg{width:16px;height:16px}
.btn:hover{border-color:var(--brand-300); background:var(--card-2); color:var(--brand-600)}
.btn:active{transform:translateY(.5px); box-shadow:none}
.btn--primary{background:var(--solid); border-color:transparent; color:var(--solid-ink)}
.btn--primary:hover{background:var(--solid-2); color:var(--solid-ink)}
.btn--ghost{background:transparent; border-color:transparent; color:var(--muted); box-shadow:none}
.btn--ghost:hover{background:var(--bg-2); border-color:transparent; color:var(--ink)}
.btn--white{background:#fff; border-color:transparent; color:var(--brand-600)}
.btn--white:hover{background:#fff; color:var(--brand-500)}
/* вторичное действие рядом с primary — акцент, но без заливки */
.btn--soft{background:var(--brand-050); border-color:var(--brand-200); color:var(--brand-600)}
.btn--soft:hover{background:var(--brand-100); border-color:var(--brand-300); color:var(--brand-700)}
.btn--danger{color:var(--bad); border-color:var(--line-strong)}
.btn--danger:hover{background:var(--bad-bg); border-color:transparent; color:var(--bad-ink)}
/* полностью скруглённая кнопка — «Выйти» в профиле */
.btn--round{border-radius:99px}
.btn--sm{height:32px; padding:0 11px; font-size:12.5px; border-radius:var(--r-xs)}
/* чёрная пилюля — «Добавить» в профиле */
.btn.btn--black{background:var(--n-950); border-color:var(--n-950); color:#fff; border-radius:99px;
height:28px; padding:0 11px; font-size:12px; gap:5px}
.btn.btn--black svg{width:13px; height:13px}
.btn.btn--black:hover{background:var(--n-800); border-color:var(--n-800); color:#fff}
.btn--sm svg{width:15px; height:15px}
.btn--icon{width:38px; padding:0}
.btn[disabled]{opacity:.4; pointer-events:none; box-shadow:none}
.icon-btn{width:36px; height:36px; display:grid; place-items:center; border-radius:var(--r-sm); border:1px solid transparent;
background:transparent; color:var(--muted); cursor:pointer; position:relative;
transition:background var(--t-fast), color var(--t-fast)}
.icon-btn svg{width:18px; height:18px}
.icon-btn:hover{background:var(--bg-2); border-color:transparent; color:var(--brand-600)}
.icon-btn--dot::after{content:''; position:absolute; top:8px; right:8px; width:6px; height:6px; border-radius:99px; background:var(--bad); border:2px solid var(--bg)}
.avatar{width:34px; height:34px; flex:none; border-radius:99px; display:grid; place-items:center;
font:600 12px var(--display); color:#fff; letter-spacing:.01em;
background:linear-gradient(145deg, color-mix(in srgb,var(--av) 74%,#fff) 0%, var(--av) 76%)}
.avatar--sm{width:30px; height:30px; border-radius:99px; font-size:11px}
.avatar--md{width:40px; height:40px; border-radius:99px; font-size:14px}
.avatar--44{width:44px; height:44px; border-radius:99px; font-size:15px}
.avatar--lg{width:56px; height:56px; border-radius:99px; font-size:19px}
.avatar--xl{width:72px; height:72px; border-radius:99px; font-size:24px}
/* логотип компании: пока цветной прямоугольник с буквой, потом — картинка */
.logo{width:38px; height:38px; flex:none; border-radius:11px; display:grid; place-items:center;
font:700 15px var(--display); color:#fff; letter-spacing:-.02em; overflow:hidden;
background:linear-gradient(145deg, color-mix(in srgb,var(--lg) 78%,#fff) 0%, var(--lg) 78%)}
.logo--sm{width:34px; height:34px; border-radius:10px; font-size:14px}
.logo img{width:100%; height:100%; object-fit:cover; display:block}
.stack{display:flex}
.stack .avatar{border:2px solid var(--card); margin-left:-9px; border-radius:99px}
.stack .avatar:first-child{margin-left:0}
.stack__more{width:34px;height:34px;border-radius:99px;display:grid;place-items:center;background:var(--bg-2);color:var(--muted);
font:700 11px var(--display); border:2px solid var(--card); margin-left:-9px}
/* статус — залитая пилюля: в таблице это единственная цветная точка,
приглушённый вариант читался как «неактивно» */
.badge{display:inline-flex; align-items:center; height:23px; padding:0 10px; border-radius:99px;
font-size:11.5px; font-weight:600; letter-spacing:-.005em; white-space:nowrap;
background:var(--n-500); color:#fff; border:1px solid transparent}
.badge::before{display:none}
.badge.ok{background:var(--ok); color:#fff}
/* «на рассмотрении» и прочие ожидания — светлее общего --warn, в золотистый */
.badge.warn{background:#DE9228; color:#fff}
.badge.bad{background:var(--bad); color:#fff}
.badge.info{background:var(--info); color:#fff}
.badge.brand{background:var(--brand-500); color:#fff}
.badge.mute{background:var(--n-400); color:#fff}
.badge--none::before{display:none}
.chip{display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 11px; border-radius:99px;
background:var(--card-2); color:var(--ink-2); font-size:11.5px; font-weight:500; border:1px solid var(--line)}
.chip--brand{background:var(--brand-050); color:var(--brand-600); border-color:var(--brand-100)}
.chip button{border:0;background:none;cursor:pointer;color:var(--faint);padding:0;display:grid}
.chip button svg{width:13px;height:13px}
/* card */
.card{background:var(--card); border:0; border-radius:var(--r-lg); box-shadow:var(--shadow-sm)}
.card__head{display:flex; align-items:center; gap:12px; padding:17px 20px 15px; border-bottom:1px solid var(--line-2)}
.card__head h3{font-size:15px}
.card__head .btn{margin-left:auto}
.card__body{padding:20px}
.card__foot{padding:13px 20px; border-top:1px solid var(--line-2); display:flex; align-items:center; gap:10px}
.card--pad{padding:20px}
.card--content{
padding:var(--card-content-pt) var(--card-content-px) var(--card-content-pb)
}
.card--content > .field:last-child{margin-bottom:0}
.card--compact{padding:20px 24px 22px}
.card--compact .card__t{margin-bottom:8px}
.card--flat{box-shadow:none}
/* кликабельная плашка отзывается так же, как плитка вакансии: заливка
на месте, на наведении — тихий петролевый контур поверх, без сдвига */
.card--hover{transition:box-shadow var(--t-fast); cursor:pointer}
.card--hover:hover{box-shadow:0 0 0 1px color-mix(in srgb,var(--brand-500) 26%,transparent)}
.card--hover:focus-visible{outline:none; box-shadow:var(--ring)}
.grid{display:grid; gap:16px}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--main{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr); align-items:start}
.grid--side{grid-template-columns:minmax(0,1fr) 330px; align-items:start}
/* page header */
.page{display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:22px}
.page--top{align-items:flex-start; margin-bottom:30px}
.page--mid{align-items:center}
.page h1{font-size:27px; line-height:1.15}
.page p{margin:8px 0 0; color:var(--muted); font-size:14px; line-height:1.55; max-width:62ch}
.page__actions{margin-left:auto; display:flex; gap:8px; align-items:center}
/* hero (dashboard) — чернильная плита, свет из одного угла */
.hero{position:relative; overflow:hidden; border-radius:var(--r-xl); padding:32px 34px; color:#fff; margin-bottom:18px;
background:linear-gradient(135deg,#1E5570 0%,#123543 46%,#0B1F28 100%)}
.hero::after{content:''; position:absolute; right:-120px; top:-200px; width:520px; height:520px; border-radius:50%;
background:radial-gradient(circle,rgba(42,115,150,.55),transparent 62%)}
.hero::before{content:''; position:absolute; left:-120px; bottom:-240px; width:460px; height:460px; border-radius:50%;
background:radial-gradient(circle,rgba(138,187,209,.30),transparent 66%)}
.hero__inner{position:relative; display:flex; align-items:center; gap:28px; flex-wrap:wrap}
.hero h1{color:#fff; font-size:30px; line-height:1.12; letter-spacing:-.035em}
.hero p{margin:10px 0 0; opacity:.72; font-size:14px; line-height:1.55; max-width:52ch}
.hero__side{margin-left:auto; display:flex; gap:32px}
.hero__kpi b{display:block; font-family:var(--display); font-size:30px; font-weight:700; letter-spacing:-.04em; line-height:1;
font-variant-numeric:tabular-nums}
.hero__kpi span{font-size:11.5px; opacity:.62; letter-spacing:.02em}
.hero__actions{display:flex; gap:9px; margin-top:22px; position:relative}
/* stat */
.stat{position:relative; overflow:hidden; padding:18px 20px 20px; background:var(--card); border:1px solid var(--line);
border-radius:var(--r-lg); box-shadow:var(--shadow-sm)}
.stat__top{display:flex; align-items:center; gap:10px; margin-bottom:14px}
.stat__ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--brand-050);color:var(--brand-500)}
.stat__ico svg{width:16px;height:16px}
.stat__label{font-size:12.5px; color:var(--muted); font-weight:500}
.stat__val{font-family:var(--display); font-size:28px; font-weight:700; letter-spacing:-.045em; line-height:1;
font-variant-numeric:tabular-nums}
.stat__val small{font-size:14px; font-weight:500; color:var(--muted); letter-spacing:-.01em}
.stat__delta{display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:600; margin-top:10px}
.stat__delta svg{width:13px; height:13px}
.stat__delta.up{color:var(--ok)} .stat__delta.down{color:var(--bad)} .stat__delta.flat{color:var(--muted)}
.spark{position:absolute; right:0; bottom:0; left:0; width:100%; height:44px; opacity:.35}
/* table */
.table-wrap{overflow-x:auto; border-radius:var(--r-lg)}
table.tbl{width:100%; min-width:680px; border-collapse:separate; border-spacing:0; font-size:13.5px}
table.tbl--wide{min-width:1080px}
.tbl th:last-child, .tbl td:last-child{width:1%}
.tbl td.nowrap{white-space:nowrap}
.tbl th{text-align:left; font-size:10.5px; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--faint);
padding:13px 18px; background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; white-space:nowrap}
.tbl thead th:first-child{border-top-left-radius:var(--r-lg)}
.tbl tfoot th{position:static; background:var(--card-2); border-top:1px solid var(--line); border-bottom:0;
border-radius:0; color:var(--muted)}
.tbl thead th:last-child{border-top-right-radius:var(--r-lg)}
.tbl td{padding:15px 18px; border-bottom:1px solid var(--line-2); vertical-align:middle}
/* поля таблицы совпадают с полями карточки — строка не липнет к краю */
.tbl th:first-child,.tbl td:first-child{padding-left:20px}
.tbl th:last-child,.tbl td:last-child{padding-right:20px}
.tbl tbody tr{transition:background var(--t-fast)}
.tbl tbody tr:hover{background:var(--card-2)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl .cell-user{display:flex; align-items:center; gap:11px; min-width:0}
.tbl .cell-user b{font-weight:600; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tbl .cell-user i{font-style:normal; font-size:12px; color:var(--muted)}
.tbl .num{font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap; letter-spacing:-.01em}
.tbl .row-actions{display:flex; gap:4px; justify-content:flex-end; opacity:0; transition:opacity var(--t-fast)}
.tbl tr:hover .row-actions{opacity:1}
.tbl a{color:var(--brand-600); font-weight:500; text-decoration:underline; text-decoration-color:transparent;
text-underline-offset:3px; text-decoration-thickness:1px; transition:text-decoration-color var(--t-fast)}
.tbl a:hover{text-decoration-color:currentColor}
.clickable{cursor:pointer}
/* toolbar / filters */
.toolbar{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:16px}
.segmented{display:inline-flex; background:var(--bg-2); border:1px solid transparent; border-radius:var(--r-sm); padding:3px; gap:2px}
.segmented button{border:0; background:transparent; padding:0 12px; height:30px; border-radius:7px; font-size:12.5px; font-weight:600;
color:var(--muted); cursor:pointer; transition:background var(--t-fast), color var(--t-fast); display:inline-flex; align-items:center; gap:6px}
.segmented button:hover{color:var(--ink)}
.segmented button.is-active{background:var(--card); color:var(--brand-600); box-shadow:var(--shadow-xs)}
.segmented button i{font-style:normal; font-size:11px; opacity:.75}
.filter{display:flex; align-items:center; height:38px; padding:0 11px; gap:7px; background:var(--card); border:1px solid var(--line-strong);
border-radius:var(--r-sm); box-shadow:var(--shadow-xs)}
.filter svg{width:16px; color:var(--faint)}
.filter select,.filter input{border:0; background:none; outline:none; font-size:13px; font-weight:500; cursor:pointer}
.spacer{margin-left:auto}
/* progress */
.bar{height:5px; border-radius:99px; background:var(--bg-2); overflow:hidden}
.bar i{display:block; height:100%; border-radius:99px; background:var(--brand-500); transition:width .5s var(--ease)}
.bar--ok i{background:var(--ok)}
.bar--warn i{background:var(--warn)}
.meta{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted)}
.tbl .meta{white-space:nowrap}
.dot-sep{width:3px;height:3px;border-radius:99px;background:var(--faint);flex:none}
/* forms */
.field{display:flex; flex-direction:column; gap:7px; margin-bottom:15px}
.field > label{font-size:12.5px; font-weight:600; color:var(--ink-2); letter-spacing:-.005em}
.field .hint{font-size:11.5px; color:var(--faint)}
.input,.select,.textarea{
width:100%; height:42px; padding:0 13px; border-radius:var(--r-sm); border:1px solid var(--line-strong);
background:var(--sheet); outline:none; font-size:13.5px;
transition:border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.input:hover,.select:hover,.textarea:hover{border-color:var(--n-300)}
.inline:focus,.input:focus,.select:focus,.textarea:focus{outline:none}
.textarea{height:auto; min-height:92px; padding:11px 13px; resize:vertical; line-height:1.55}
.textarea--bare{border:0; background:transparent; padding:0; min-height:120px; resize:none; font-size:14px}
.textarea--bare:focus{border:0; background:transparent; box-shadow:none}
.select{appearance:none; cursor:pointer;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right 11px center; background-size:15px; padding-right:34px}
.input:focus,.select:focus,.textarea:focus{border-color:var(--brand-400); box-shadow:var(--ring); background:var(--sheet)}
.input::placeholder,.textarea::placeholder{color:var(--faint)}
.row-2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.row-3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.switch{display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-size:13.5px}
.switch input{display:none}
.switch i{width:38px; height:22px; border-radius:99px; background:var(--n-200); position:relative; transition:background var(--t); flex:none}
.switch i::after{content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:99px; background:#fff;
box-shadow:var(--shadow-xs); transition:transform var(--t)}
.switch input:checked + i{background:var(--brand-500)}
.switch input:checked + i::after{transform:translateX(16px)}
/* modal */
.modal-root{position:fixed; inset:0; z-index:80; display:none}
.modal-root.is-open{display:flex; align-items:center; justify-content:center; padding:24px}
.modal-root.has-sheet{align-items:flex-end; padding:0}
.modal-root__bd{position:absolute; inset:0; background:rgba(8,11,20,.46); backdrop-filter:blur(3px); animation:fade .22s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{position:relative; width:min(620px,calc(100vw - 24px)); height:auto; max-height:calc(100vh - 48px); margin:0;
background:var(--sheet); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); display:flex; flex-direction:column;
animation:pop .26s var(--ease); overflow:hidden; border:0}
@keyframes pop{from{opacity:0; transform:translateY(8px) scale(.99)}to{opacity:1; transform:none}}
.modal--wide{width:min(860px,calc(100vw - 32px))}
.modal--sm{width:min(400px,calc(100vw - 32px))}
.modal--md{width:min(750px,calc(100vw - 24px))}
.modal--md .modal__foot{background:transparent; border-top:0; padding:12px 22px 18px}
.modal--sm .modal__head{padding:16px 18px 8px}
.modal--sm .modal__body{padding:0 18px 6px}
.modal--sm .modal__foot{padding:10px 18px 14px; background:transparent; border-top:0}
.modal--sm .row-2,.modal--sm .row-3{grid-template-columns:1fr}
/* карточка проекта в панели */
.modal--sheet .modal__head{padding:26px 44px 0}
.modal--sheet .modal__head h3{font-size:22px}
.modal--sheet .modal__tools{gap:8px; align-items:center}
.sheet__meta{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted)}
.sheet__status{margin-left:auto}
/* логотип в шапке панели — на высоту заголовка вместе с подписью под ним */
.logo--lg{width:54px; height:54px; border-radius:14px; font-size:20px}
.sheet__body{margin-top:20px}
.sheet__stack{display:flex; flex-direction:column; gap:16px}
@media (max-width:640px){ .modal--sheet .modal__head{padding:20px 18px 0} }
/* панель: широкая карточка от верха до низа экрана */
.modal--sheet{width:min(70vw,1240px); height:calc(100vh - 20px); max-height:none;
border-radius:12px 12px 0 0; border-bottom:0; animation:sheetIn .28s cubic-bezier(.2,.9,.2,1)}
.modal--sheet .modal__body{padding:18px 44px 44px; flex:1}
.modal__x{position:absolute; top:12px; right:14px; z-index:2}
/* модалка без заголовка: тело само отвечает за верхний и нижний отступ */
.modal__x + .modal__body{padding-top:20px}
.modal--sm .modal__x + .modal__body{padding:20px 20px 20px}
/* панель выезжает снизу и уезжает вниз (закрытие ждёт анимацию — UI.close) */
@keyframes sheetIn{from{transform:translateY(100%)}to{transform:none}}
@keyframes sheetOut{to{transform:translateY(100%)}}
@keyframes fadeOut{to{opacity:0}}
.modal--sheet{animation-duration:.34s}
.modal.no-enter,.modal-root__bd.no-enter{animation:none}
.modal-root.is-leaving .modal--sheet{animation:sheetOut .26s cubic-bezier(.4,0,1,1) forwards}
.modal-root.is-leaving .modal-root__bd{animation:fadeOut .26s ease forwards}
@media (prefers-reduced-motion:reduce){ .modal--sheet{animation:none} }
@media (max-width:1180px){ .modal--sheet{width:calc(100vw - 24px)} }
/* подвал панели — на тех же отступах, что шапка и тело */
.modal--sheet .modal__foot{padding:16px 44px}
@media (max-width:640px){ .modal--sheet .modal__foot{padding:14px 18px} }
/* узкая панель (size:'md'): та же панель снизу, шириной под форму.
Список внутри не прокручивается сам — тянется до низа, листается панель */
.modal--sheet.modal--md{width:min(750px,calc(100vw - 24px))}
.modal--sheet.modal--md .modal__foot{background:var(--bg-2); border-top:1px solid var(--line-2); padding:16px 44px}
.modal--sheet .pick{max-height:none; overflow:visible}
/* навигация в шапке панели: верхняя строка — только кнопки (слева круглая,
справа основное действие), заголовок с подписью — строкой ниже */
.modal__head--nav{align-items:center; flex-wrap:wrap; column-gap:16px; row-gap:18px}
.modal__head--nav > .modal__tools{order:1; margin-left:auto}
.modal__head--nav > div:not(.modal__start):not(.modal__tools){order:2; flex-basis:100%}
.modal__start{flex:none; display:flex}
.round-btn{width:34px; height:34px; display:grid; place-items:center; flex:none; cursor:pointer;
border-radius:50%; background:#fff; border:1px solid var(--line-strong); color:var(--ink);
transition:background var(--t-fast), border-color var(--t-fast)}
.round-btn:hover{background:var(--bg-2); border-color:var(--n-300)}
.round-btn svg{width:17px; height:17px}
.btn.btn--black.btn--head{height:34px; padding:0 16px; font-size:13px}
/* панель направления: выбранное — чёрным, кнопки внизу — пилюлями,
основная («Далее», «Добавить») тоже чёрная */
.modal--sheet .pick__row.is-on,
.modal--sheet .pick__row.is-on:hover{background:var(--n-950); border-color:var(--n-950); color:#fff}
.modal--sheet.modal--md .modal__foot .btn{border-radius:99px; padding:0 18px}
.modal--sheet.modal--md .modal__foot .btn--primary{background:var(--n-950); border-color:var(--n-950); color:#fff}
.modal--sheet.modal--md .modal__foot .btn--primary:hover{background:var(--n-800); border-color:var(--n-800)}
@media (max-width:640px){ .modal--sheet.modal--md{width:100vw}
.modal--sheet.modal--md .modal__foot{padding:14px 18px} }
@media (max-width:640px){ .modal--sheet{width:100vw; border-radius:10px 10px 0 0}
.modal--sheet .modal__body{padding:20px 18px 32px} }
.modal__head{display:flex; align-items:flex-start; gap:12px; padding:22px 24px 14px}
/* логотип компании слева от заголовка панели */
.modal__media{flex:none; display:block}
.modal--sheet .modal__head .modal__media{margin-top:2px}
.modal__head h3{font-size:18px; letter-spacing:-.03em}
.modal__head p{margin:6px 0 0; font-size:13px; color:var(--muted); line-height:1.5}
.modal__tools{margin-left:auto; display:flex; align-items:center; gap:2px}
.icon-btn--xs{width:30px; height:30px}
.icon-btn--xs svg{width:16px; height:16px}
.modal__body{padding:4px 24px 22px; overflow-y:auto}
.modal__foot{padding:15px 24px; border-top:1px solid var(--line-2); display:flex; gap:9px; justify-content:flex-end; background:var(--bg-2)}
.modal__foot .spacer{margin-right:auto}
/* заголовок карточки в сводке */
.card__t{font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
color:var(--faint); margin-bottom:12px}
/* строки «ключ — значение» в сводке */
.rows{display:flex; flex-direction:column}
.rows__i{display:flex; align-items:center; justify-content:space-between; gap:12px;
padding:8px 0; border-bottom:1px solid var(--line); font-size:13px}
.rows--std .rows__i,
.card--content > .rows .rows__i{
min-height:var(--rows-std-min-h); padding:var(--rows-std-py) 0; font-size:14px
}
.rows--std .rows__i:first-child,
.card--content > .rows .rows__i:first-child{padding-top:var(--rows-std-py)}
.rows--info .rows__i{min-height:var(--rows-std-min-h); padding:var(--rows-std-py) 0; font-size:14px}
.rows--info .rows__i:first-child{padding-top:var(--rows-std-py)}
/* плитка «подпись → значение»: для коротких данных вместо длинных строк */
.facts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px 32px}
.facts__i{display:flex; flex-direction:column; gap:3px; min-width:0}
.facts__i span{font-size:12px; font-weight:500; color:var(--muted)}
.facts__i b{font-size:14.5px; font-weight:600; color:var(--ink); letter-spacing:-.015em;
font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis}
@media (max-width:900px){ .facts{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .facts{grid-template-columns:1fr} }
/* строки в две колонки — для широких карточек */
.rows--cols{display:grid; grid-template-columns:1fr 1fr; column-gap:48px}
@media (max-width:760px){ .rows--cols{grid-template-columns:1fr} }
/* значение с инлайн-полем не должно вылезать за карточку */
.rows--info .rows__i b{overflow:visible; flex:1; display:flex; justify-content:flex-end; align-items:center}
.rows--std .rows__i b{overflow:visible; flex:1; display:flex; justify-content:flex-end; align-items:center}
.rows--info .inline{margin:0; max-width:100%}
.rows--std .inline{margin:0; max-width:100%}
/* значения без поля ввода выравниваем по тексту инлайн-полей */
.rows--info .rows__i b > a,
.rows--info .rows__i b > .kv__static{padding-right:8px}
.rows__i:last-child{border-bottom:0}
.rows__i:first-child{padding-top:0}
/* вес держит подпись, значение остаётся спокойным — иначе в две колонки
правые края сливаются в сплошную жирную стену */
.rows__i span{color:var(--ink-2); font-weight:600; flex:none}
.rows__i b{font-weight:450; color:var(--ink-2); font-variant-numeric:tabular-nums; text-align:right;
min-width:0; letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rows__i{border-bottom-color:var(--line-2)}
/* лог-таблица: без шапки, компактные строки */
.tbl--log{min-width:0}
.tbl--log td{padding:14px 16px; font-size:13px}
/* секции страницы */
.section{margin-top:30px}
.section__head{display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap}
.section__head h2{font-size:18px; letter-spacing:-.03em}
.section__head .spacer{margin-left:auto}
/* незаполненная позиция в таблице исполнителей */
.row--empty td{background:var(--card-2)}
.avatar--ghost{width:34px; height:34px; border-radius:99px; display:grid; place-items:center; flex:none;
background:var(--bg-2); border:1px dashed var(--line); color:var(--faint)}
.avatar--ghost svg{width:16px; height:16px}
.ghost{color:var(--faint) !important; font-weight:500}
/* просмотр описания задачи в модалке: клик превращает в поле */
.taskview{font-size:14px; line-height:1.65; color:var(--ink); cursor:text; white-space:pre-wrap;
padding:10px 12px; margin:0 -12px; border:1px solid transparent; border-radius:var(--r-sm); transition:.15s}
.taskview:hover{background:var(--card-2); border-color:var(--line)}
.taskview.is-empty{color:var(--faint)}
/* задача проекта — серая плашка, полный текст в модалке */
.task{
display:block; width:100%; text-align:left; margin-bottom:16px;
font:inherit; color:var(--ink-2); cursor:pointer; transition:.15s;
}
.task:hover{border-color:var(--brand-300); background:var(--card-2)}
.task p{margin:0; font-size:13.5px; line-height:1.6;
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.task p.task--empty{color:var(--faint)}
.task__more{display:inline-block; margin-top:9px; font-size:12px; font-weight:600; color:var(--brand-600)}
.task:hover .task__more{text-decoration:underline; text-underline-offset:3px}
/* строка-заметка под верхней панелью */
.notebar{
display:flex; align-items:center; gap:10px; width:100%; margin-bottom:18px;
padding:11px 14px; border:1px solid var(--brand-100); border-radius:var(--r-sm);
background:var(--brand-050); color:var(--ink-2); font:inherit; font-size:13px;
text-align:left; cursor:pointer; transition:border-color var(--t-fast), background var(--t-fast);
}
.notebar:hover{border-color:var(--brand-300); background:var(--brand-100)}
.notebar > svg:first-child{width:16px; height:16px; color:var(--brand-500); flex:none}
.notebar > svg:last-child{width:14px; height:14px; color:var(--faint); flex:none; margin-left:auto; opacity:0; transition:.15s}
.notebar:hover > svg:last-child{opacity:1}
.notebar span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* логотип в шапке — интерфейс смены */
.logo-edit{position:relative; padding:0; border:0; background:none; cursor:pointer; line-height:0;
border-radius:12px; flex:none; overflow:hidden}
.logo-edit::after{content:''; position:absolute; inset:0; border-radius:12px;
background:rgba(8,11,20,.55); opacity:0; transition:.15s}
.logo-edit:hover::after,.logo-edit:focus-visible::after{opacity:1}
.logo-edit__pen{position:absolute; inset:0; display:grid; place-items:center; color:#fff; z-index:1;
opacity:0; transition:.15s}
.logo-edit__pen svg{width:16px; height:16px}
.logo-edit:hover .logo-edit__pen,.logo-edit:focus-visible .logo-edit__pen{opacity:1}
/* логотип компании — квадрат со скруглением, в отличие от круглых аватаров людей */
.avatar--img{background:var(--card-2); border:1px solid var(--line); overflow:hidden; padding:0}
.avatar--img img{width:100%; height:100%; object-fit:cover; display:block}
.avatar--sq{border-radius:11px}
.avatar--md.avatar--sq{border-radius:12px}
.avatar--lg.avatar--sq{border-radius:16px}
.avatar--xl.avatar--sq{border-radius:20px}
/* блок здоровья заказчика */
.health{display:flex; flex-direction:column; align-items:center; text-align:center}
.health .card__t{align-self:flex-start}
.health__gauge{border:0; background:none; padding:0; cursor:pointer; border-radius:99px; transition:.16s;
font:inherit; color:inherit}
.health__gauge:hover{opacity:.82}
.health__cap{margin-top:16px; font-size:13.5px; font-weight:600; border:0; background:none; padding:0;
font-family:inherit; cursor:pointer; text-decoration:underline; text-decoration-thickness:1px;
text-underline-offset:3px; text-decoration-color:transparent; transition:.16s}
button.health__cap:hover{text-decoration-color:currentColor}
.health__cap.ok{color:var(--ok)}
.health__cap.warn{color:var(--warn)}
.health__cap.bad{color:var(--bad)}
.health__btn{margin-top:12px}
.health__hint{margin-top:4px; justify-content:center}
/* кольцевой индикатор */
.gauge{position:relative; margin-top:6px}
.gauge svg{width:100%; height:100%; display:block}
.gauge__c{position:absolute; inset:0; display:grid; place-content:center; text-align:center; line-height:1}
.gauge__c b{display:block; font:700 30px/1 var(--display); letter-spacing:-.04em; font-variant-numeric:tabular-nums}
.gauge__c span{display:block; font-size:11px; color:var(--muted); margin-top:4px}
/* список проблем в модалке */
.issues{display:flex; flex-direction:column; gap:6px}
.issue{display:flex; align-items:center; gap:11px; padding:11px 12px; border:1px solid var(--line);
border-radius:var(--r-sm); background:var(--card); color:inherit; transition:.14s}
a.issue:hover,button.issue:hover{border-color:var(--brand-300); background:var(--brand-050)}
button.issue{width:100%; font:inherit; cursor:pointer; text-align:left}
.issue__t{min-width:0; flex:1; text-align:left}
.issue__t b{display:block; font-size:13.5px; font-weight:600}
.issue__t span{display:block; font-size:12.5px; color:var(--muted); margin-top:2px}
.issue__go{color:var(--faint); font-size:12.5px; font-weight:600; flex:none; display:grid; place-items:center}
.issue__go svg{width:16px; height:16px}
a.issue:hover .issue__go,button.issue:hover .issue__go{color:var(--brand-600)}
.dot{width:7px; height:7px; border-radius:99px; flex:none}
.dot--bad{background:var(--bad)}
.dot--warn{background:var(--warn)}
/* карточка нанятого человека */
.person{display:flex; flex-direction:column; gap:12px; padding:16px}
.person__top{display:flex; gap:12px; align-items:flex-start}
.person__name{display:block; font-size:14.5px; font-weight:600; line-height:1.25; overflow:hidden; text-overflow:ellipsis}
.person__role{font-size:12.5px; color:var(--muted); font-weight:500; margin-top:2px}
.person__projects{display:flex; gap:6px; flex-wrap:wrap}
.person__projects .chip{cursor:pointer; font-family:inherit; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block}
.person__projects .chip:hover{background:var(--brand-050); border-color:var(--brand-200)}
.person__foot{display:flex; align-items:center; gap:8px; padding-top:11px; border-top:1px solid var(--line-2)}
/* группы полей в длинных формах */
.form-group{padding:0 0 4px; margin-bottom:16px; border-bottom:1px solid var(--line-2)}
.form-group:last-of-type{border-bottom:0; margin-bottom:6px}
.form-group__t{font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
color:var(--faint); margin-bottom:10px}
/* инлайн-редактирование значений */
.inline{
width:auto; max-width:100%; field-sizing:content; min-width:56px;
border:1px solid transparent; background:transparent; border-radius:var(--r-xs);
padding:4px 8px; margin:0 -8px; font:inherit; font-size:13px; font-weight:500; color:var(--ink);
text-align:right; outline:none; transition:border-color .15s, background .15s, box-shadow .15s;
}
.inline::placeholder{color:var(--faint); font-weight:400}
/* числовые поля без нативных стрелок */
.inline[type="number"]{-moz-appearance:textfield}
.inline[type="number"]::-webkit-outer-spin-button,
.inline[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.inline:hover{background:var(--card-2); border-color:var(--line)}
.inline:focus{background:var(--card); border-color:var(--brand-400); box-shadow:var(--ring)}
select.inline{appearance:none; cursor:pointer; padding-right:8px; min-width:0}
.inline--area{width:100%; field-sizing:content; resize:none; overflow:hidden; line-height:1.45; min-height:0}
.kv__static{font-size:13px; font-weight:500}
/* карточки вкладки «Информация» */
.info__head{display:flex; align-items:center; gap:8px; margin-bottom:14px}
.info__head svg{width:17px; height:17px; color:var(--brand-400)}
.info__head h3{font-size:14px}
.kv--info{grid-template-columns:minmax(0,30%) minmax(0,70%); gap:17px 18px; align-items:center}
.kv--info dd{word-break:break-word}
/* popup-меню */
.menu{
position:fixed; z-index:70; min-width:196px; max-width:280px; padding:6px;
background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
box-shadow:var(--shadow-lg); animation:menuIn .16s cubic-bezier(.2,.9,.2,1);
}
@keyframes menuIn{from{opacity:0; transform:translateY(-4px) scale(.985)}to{opacity:1; transform:none}}
.menu__title{font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--faint); padding:7px 10px 6px}
.menu__item{
display:flex; align-items:center; gap:9px; width:100%; padding:8px 10px; border:0; border-radius:var(--r-xs);
background:transparent; color:var(--ink-2); font-size:13px; font-weight:500; cursor:pointer; text-align:left; transition:.13s;
}
.menu__item svg{width:17px; height:17px; color:var(--faint)}
.menu__item:hover{background:var(--bg-2); color:var(--ink)}
.menu__item:hover svg{color:var(--brand-500)}
.menu__label{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.menu__badge.is-zero{opacity:.45}
.menu__badge{font-style:normal; font-size:11px; font-weight:700; color:var(--muted); background:var(--bg-2); padding:1px 6px; border-radius:99px}
.menu__check{display:grid; place-items:center; width:17px; color:transparent}
.menu__check svg{width:15px; height:15px; color:inherit}
.menu__item.is-on{color:var(--brand-600); font-weight:600}
.menu__item.is-on .menu__check{color:var(--brand-500)}
.menu__item.is-on .menu__badge{background:var(--brand-100); color:var(--brand-700)}
.menu__item--danger{color:var(--bad)}
.menu__item--danger:hover{background:var(--bad-bg); color:var(--bad)}
.menu__sep{height:1px; background:var(--line-2); margin:5px 4px}
/* кнопка-триггер меню с активным состоянием */
.btn.is-on{border-color:var(--brand-300); color:var(--brand-600); background:var(--brand-050)}
.btn[data-f] span{max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.btn[data-f] > svg:last-of-type{width:14px; height:14px; opacity:.55; margin-left:-2px}
.btn__dot{position:absolute; top:-3px; right:-3px; width:8px; height:8px; border-radius:99px; background:var(--brand-500); border:2px solid var(--bg)}
.btn--rel{position:relative}
/* toasts */
.toasts{position:fixed; bottom:22px; right:22px; z-index:100; display:flex; flex-direction:column; gap:9px; pointer-events:none}
.toast{display:flex; align-items:center; gap:12px; min-width:270px; max-width:380px; padding:13px 16px; border-radius:var(--r);
/* тёмные: на белом кабинете светлая плашка терялась */
background:var(--n-950); color:#fff; border:1px solid transparent;
box-shadow:0 14px 34px -14px rgba(7,16,18,.55); animation:slidein .32s var(--ease); pointer-events:auto}
.toast.out{animation:slideout .24s forwards}
@keyframes slidein{from{opacity:0; transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes slideout{to{opacity:0; transform:translateY(6px) scale(.99)}}
.toast__ico{width:26px;height:26px;border-radius:99px;display:grid;place-items:center;flex:none;background:rgba(255,255,255,.12);color:#fff}
.toast__ico svg{width:15px;height:15px}
.toast.ok .toast__ico{background:rgba(18,160,110,.24); color:#4ADE9B}
.toast.bad .toast__ico{background:rgba(224,56,78,.26); color:#FF8494}
.toast b{font-size:13px; font-weight:600; display:block; letter-spacing:-.01em; color:#fff}
.toast div > span{font-size:12px; color:rgba(255,255,255,.66)}
/* misc blocks */
.empty{text-align:center; padding:60px 20px}
.empty__ico{width:52px;height:52px;border-radius:99px;margin:0 auto 16px;display:grid;place-items:center;
background:var(--brand-050); color:var(--brand-400)}
.empty__ico svg{width:22px;height:22px}
.empty h3{font-size:16px; letter-spacing:-.025em}
.empty p{margin:7px auto 18px; color:var(--muted); font-size:13.5px; line-height:1.55; max-width:38ch}
.timeline{display:flex; flex-direction:column; gap:2px}
.tl{display:flex; gap:12px; padding:2px 0}
.tl__rail{display:flex; flex-direction:column; align-items:center; flex:none; width:22px}
.tl__dot{width:8px;height:8px;border-radius:99px;background:var(--brand-400); margin-top:7px; box-shadow:0 0 0 3px var(--brand-050)}
.tl__dot.ok{background:var(--ok); box-shadow:0 0 0 3px var(--ok-bg)}
.tl__dot.bad{background:var(--bad); box-shadow:0 0 0 3px var(--bad-bg)}
.tl__dot.warn{background:var(--warn); box-shadow:0 0 0 3px var(--warn-bg)}
.tl__line{flex:1; width:1.5px; background:var(--line); margin:4px 0}
.tl__body{padding-bottom:15px; min-width:0}
.tl__body p{margin:0; font-size:13px}
.tl__body time{font-size:11.5px; color:var(--faint)}
.kv{display:grid; grid-template-columns:auto 1fr; gap:9px 16px; font-size:13px}
.kv dt{color:var(--muted)}
.kv dd{margin:0; font-weight:500; text-align:right}
.steps{display:flex; align-items:center; gap:0; margin:2px 0 6px}
.step{display:flex; align-items:center; gap:8px; flex:1}
.step__num{width:24px;height:24px;border-radius:99px;display:grid;place-items:center;flex:none;font:600 11px var(--display);
background:var(--bg-2); color:var(--faint); border:1px solid var(--line)}
.step__t{font-size:12px; color:var(--muted); font-weight:500; white-space:nowrap}
.step__bar{flex:1; height:1px; background:var(--line); margin:0 8px}
.step.done .step__num{background:var(--ok); border-color:var(--ok); color:#fff}
.step.done .step__t{color:var(--ink)}
.step.now .step__num{background:var(--brand-500); border-color:transparent; color:#fff; box-shadow:0 0 0 4px var(--brand-100)}
.step.now .step__t{color:var(--brand-600); font-weight:600}
.rolelist{display:flex; flex-direction:column; gap:10px}
.role{display:flex; align-items:center; gap:12px; padding:11px 13px; border:1px solid var(--line); border-radius:var(--r); background:var(--card-2)}
.role__name{font-weight:600; font-size:13.5px}
.role__meta{font-size:12px; color:var(--muted)}
.role__fill{margin-left:auto; display:flex; align-items:center; gap:10px}
.role__fill b{font:700 12.5px var(--display); font-variant-numeric:tabular-nums}
.tabs{display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom:20px; overflow-x:auto}
.tabs button{border:0; background:none; padding:11px 13px; font-size:13.5px; font-weight:600; color:var(--muted); cursor:pointer;
border-bottom:1.5px solid transparent; margin-bottom:-1px; letter-spacing:-.01em;
transition:color var(--t-fast), border-color var(--t-fast); white-space:nowrap; display:inline-flex; gap:7px; align-items:center}
.tabs button:hover{color:var(--ink)}
.tabs button.is-active{color:var(--brand-600); border-color:var(--brand-500)}
.tabs button b{font-size:11px; background:var(--bg-2); border-radius:99px; padding:1px 6px; font-weight:600}
.tabs button.is-active b{background:var(--brand-100); color:var(--brand-700)}
/* табы под названием: без общей линии, подчёркивание по ширине текста */
.tabs--inline{border-bottom:0; margin:22px 0 0 -4px; overflow:visible; flex-wrap:wrap; gap:16px}
.tabs--inline button,
.tabs--inline button.is-active{position:relative; padding:2px 4px 7px; border-bottom:0; margin-bottom:0}
/* подчёркивание вплотную к тексту: по его ширине плюс 2 px с каждой стороны */
.tabs--inline button.is-active::after{content:''; position:absolute; left:2px; right:2px; bottom:2px;
height:2px; border-radius:2px; background:var(--brand-600)}
.mini-list{display:flex; flex-direction:column}
.mini{display:flex; align-items:center; gap:11px; padding:11px 4px; border-bottom:1px solid var(--line-2)}
.mini:last-child{border-bottom:0}
.mini__t{min-width:0}
.mini__t b{display:block; font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mini__t span{font-size:12px; color:var(--muted)}
.mini__r{margin-left:auto; text-align:right; flex:none}
.pcard{display:flex; flex-direction:column; gap:14px; padding:18px}
.pcard__top{display:flex; align-items:flex-start; gap:12px}
.pcard h3{font-size:16px; line-height:1.25}
.pcard__client{font-size:12.5px; color:var(--muted); margin-top:3px}
.pcard__tags{display:flex; gap:6px; flex-wrap:wrap}
/* рекламное место на «Вакансиях»: единственная заливка брендом на странице,
поэтому держим её спокойной — один градиент и никаких теней */
.promos{position:relative; margin-bottom:20px}
/* заголовок блока внутри страницы — тише h1, но заметнее подписи;
отбит с обеих сторон, чтобы отделять блок от того, что стоит выше */
.sec-title{font-size:19px; line-height:1.25; margin:38px 0 18px}
/* карусель на нативной прокрутке: свайп и колесо работают без скриптов */
.promos__track{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; border-radius:var(--r-lg)}
.promos__track > .promo{flex:0 0 100%; scroll-snap-align:start; margin-bottom:0; border-radius:0}
.promos__dots{position:absolute; right:20px; bottom:14px; z-index:2; display:flex; align-items:center; gap:6px}
.promos__dot{width:7px; height:7px; padding:0; border:0; border-radius:99px; cursor:pointer;
background:rgba(255,255,255,.42); transition:width var(--t-fast), background var(--t-fast)}
.promos__dot:hover{background:rgba(255,255,255,.7)}
.promos__dot.is-on{width:18px; background:#fff}
.promo{position:relative; overflow:hidden; display:flex; align-items:center; gap:24px;
padding:22px 26px; margin-bottom:20px; border-radius:var(--r-lg); color:#fff;
background:linear-gradient(115deg, var(--brand-700) 0%, var(--brand-600) 48%, var(--brand-400) 100%)}
/* тон задаётся баннером — так три подряд не сливаются в одну полосу */
.promo--deep{background:linear-gradient(115deg, var(--n-900) 0%, var(--brand-700) 70%, var(--brand-600) 100%)}
.promo--sky{background:linear-gradient(115deg, var(--brand-600) 0%, var(--brand-400) 55%, var(--brand-300) 100%)}
.promo::after{content:''; position:absolute; right:-70px; top:-90px; width:260px; height:260px;
border-radius:99px; background:rgba(255,255,255,.09); pointer-events:none}
.promo__t{position:relative; z-index:1; min-width:0}
.promo__kicker{font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; opacity:.72}
.promo h2{font:700 18px var(--display); letter-spacing:-.02em; line-height:1.3; margin:5px 0 5px; color:#fff}
.promo p{margin:0; font-size:13px; line-height:1.5; opacity:.86; max-width:62ch}
.promo .btn{position:relative; z-index:1; margin-left:auto; flex:none}
@media (max-width:760px){
.promo{flex-direction:column; align-items:flex-start; gap:16px; padding-bottom:44px}
.promo .btn{margin-left:0}
}
/* приветствие над вакансиями: тот же баннер, только суть — заголовок и абзац.
Чёрный, как лендинг, с большими размытыми пятнами цветов его градиента
(#2997ff, #a855f7, #ec4899) по всей площади.
Прежний лавандовый: белые круги поверх linear-gradient(115deg, #AA88DE 0%, #9A88DE 100%) */
.welcome{padding:26px 28px;
background:
/* большие пятна по всей площади: синее слева, фиолетовое по центру
сверху, малиновое снизу, ещё синее и фиолетовое справа */
radial-gradient(45% 150% at 6% 20%, rgba(41,151,255,.42) 0%, transparent 72%),
radial-gradient(40% 140% at 34% 105%, rgba(236,72,153,.34) 0%, transparent 72%),
radial-gradient(45% 150% at 55% -10%, rgba(168,85,247,.48) 0%, transparent 72%),
radial-gradient(40% 140% at 80% 100%, rgba(41,151,255,.40) 0%, transparent 72%),
radial-gradient(40% 150% at 100% 10%, rgba(168,85,247,.42) 0%, transparent 72%),
#0A0A0C}
.welcome::after{display:none}
/* шаги внутри баннера — в строку, номера в полупрозрачных кругах */
.welcome__steps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin:16px 0 0; padding:0; list-style:none}
.welcome__steps li{display:flex; align-items:flex-start; gap:10px; font-size:14px; line-height:1.45; color:rgba(255,255,255,.92)}
.welcome__steps b{flex:none; width:24px; height:24px; display:grid; place-items:center; border-radius:50%;
background:rgba(255,255,255,.14); font-size:12px; font-weight:600; color:#fff}
@media (max-width:760px){ .welcome__steps{grid-template-columns:1fr; gap:12px} }
.emp-welcome{margin-bottom:32px}
/* «Как мы работаем»: плитки преимуществ — как карточки ролей в регистрации:
светлая заливка, крупное скругление, цветной круг с белой иконкой */
.emp-perks__title{margin:0 0 16px; font:700 20px/1.25 var(--display); letter-spacing:-.02em}
.emp-perks{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.emp-perk{padding:24px 22px 22px; border-radius:20px; background:var(--brand-050);
transition:background .15s, transform .15s var(--ease)}
.emp-perk:hover{background:var(--brand-100); transform:translateY(-1px)}
.emp-perk__ico{width:48px; height:48px; margin-bottom:16px; display:grid; place-items:center; border-radius:50%; color:#fff;
background:linear-gradient(140deg, var(--brand-400) 0%, var(--brand-600) 100%)}
.emp-perk__ico svg{width:22px; height:22px}
.emp-perk b{display:block; margin-bottom:6px; font-size:15px; font-weight:700; letter-spacing:-.01em}
.emp-perk p{margin:0; font-size:13.5px; line-height:1.55; color:var(--muted)}
/* «Остались вопросы?» — финальная полоса: текст слева, способы связи справа */
.emp-ask{display:flex; align-items:center; gap:32px; margin-top:32px; padding:30px 32px;
border:1px solid var(--line); border-radius:20px; background:#fff}
.emp-ask__t{flex:1; min-width:0}
.emp-ask h2{margin:0 0 8px; font:700 20px/1.25 var(--display); letter-spacing:-.02em}
.emp-ask p{margin:0; font-size:14px; line-height:1.55; color:var(--muted); max-width:52ch}
.emp-ask p.emp-ask__sign{margin-top:16px; font-size:13px; font-weight:600; color:var(--brand-600)}
.emp-ask__actions{flex:none; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; max-width:440px}
.emp-ask__btn{display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 16px 0 12px;
border:1px solid var(--line-strong); border-radius:99px; background:#fff; color:var(--ink);
font-size:13.5px; font-weight:600; white-space:nowrap; transition:border-color var(--t-fast), background var(--t-fast)}
.emp-ask__btn:hover{border-color:var(--brand-300); background:var(--brand-050)}
.emp-ask__btn img{width:22px; height:22px; border-radius:50%; display:block}
.emp-ask__btn svg{width:17px; height:17px; color:var(--brand-600)}
.btn.emp-ask__call{height:42px; padding:0 20px}
@media (max-width:900px){ .emp-ask{flex-direction:column; align-items:flex-start; padding:24px 22px}
.emp-ask__actions{justify-content:flex-start; max-width:none} }
@media (max-width:1100px){ .emp-perks{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .emp-perks{grid-template-columns:1fr} }
/* светлый вариант — над вакансиями исполнителя: мягкие пятна фирменного
цвета на почти белом, текст тёмный */
.welcome--light{color:var(--ink);
background:
radial-gradient(45% 150% at 4% 10%, rgba(79,161,187,.22) 0%, transparent 72%),
radial-gradient(45% 150% at 100% 100%, rgba(173,214,228,.55) 0%, transparent 72%),
var(--brand-050)}
.welcome--light h2{color:var(--ink)}
.welcome--light p{color:var(--ink-2); opacity:1}
.welcome .promo__t{flex:1}
.welcome h2{font-size:21px; margin-top:0}
.welcome p{font-size:14px; max-width:none; opacity:.95}
@media (max-width:760px){
.welcome{padding-bottom:26px}
}
/* вакансии и работа — строками во всю ширину: логотип и заказчик слева,
суть по центру, статус и действия справа */
.jobs{display:flex; flex-direction:column; gap:12px}
.job{position:relative; display:flex; align-items:center; gap:22px; padding:18px 20px;
background:var(--card); border:0; border-radius:var(--r-lg); overflow:hidden;
transition:background var(--t-fast), box-shadow var(--t-fast)}
/* на наведении меняется только контур — тихий петролевый, через box-shadow,
чтобы не двигать содержимое; заливка остаётся прежней */
.job:hover{box-shadow:0 0 0 1px color-mix(in srgb,var(--brand-500) 26%,transparent)}
.job__head{flex:0 0 200px; display:flex; align-items:center; gap:11px; min-width:0}
.job__client{display:flex; flex-direction:column; gap:1px; min-width:0}
.job__client b{font-size:13.5px; font-weight:600; letter-spacing:-.01em;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.job__client span{font-size:12px; color:var(--muted)}
.job__main{flex:1; min-width:0; display:flex; flex-direction:column; gap:5px}
.job__name{font-family:var(--display); font-size:17px; line-height:1.25; letter-spacing:-.02em}
.job__role{font-size:13px; font-weight:600; color:var(--brand-600)}
.job__tags{display:flex; flex-wrap:wrap; gap:6px; margin:3px 0 0}
/* на светлой плитке пилюли держит белая заливка, а не своя подложка */
.job__tags span{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:var(--ink-2);
background:var(--sheet); border:1px solid var(--line); border-radius:99px; padding:3px 9px; white-space:nowrap}
/* «подходит мне» — та же пилюля, выделяют галочка и полупрозрачный зелёный контур */
.job__tags .job__tag--fit{font-weight:600; border-color:color-mix(in srgb,var(--ok) 42%,transparent)}
.job__tags .job__tag--fit svg{width:13px; height:13px; stroke-width:2.6; color:var(--ok)}
/* доступность проекта — та же пилюля, но с петролевым знаком */
.job__tags .job__tag--a11y{font-weight:600; color:var(--brand-700);
border-color:color-mix(in srgb,var(--brand-500) 38%,transparent);
background:color-mix(in srgb,var(--brand-050) 70%,var(--sheet))}
.job__tags .job__tag--a11y svg{width:14px; height:14px; color:var(--brand-600)}
/* та же отметка в шапке панели проекта */
.sheet__a11y{display:inline-flex; align-items:center; gap:6px; font-weight:600; color:var(--brand-600)}
.sheet__a11y svg{width:15px; height:15px}
.job__foot{flex:0 0 auto; display:flex; align-items:center; justify-content:flex-end; gap:14px}
.job__foot > span:empty{display:none}
.job__since{font-size:12px; color:var(--muted); white-space:nowrap}
.job__acts{display:flex; align-items:center; gap:2px}
/* вакансии на «Главном»: заказчик под логотипом — колонка узкая, без пустоты */
.job__head--stack{flex-basis:96px; flex-direction:column; align-items:center; gap:7px; text-align:center}
.job__head--stack .job__client{max-width:100%}
.job__head--stack .job__client b{font-size:11.5px}
.job__head--stack .logo{width:46px; height:46px; border-radius:13px; font-size:17px}
/* на узком экране строка складывается обратно в карточку */
@media (max-width:900px){
.jobs{gap:14px}
.job{flex-direction:column; align-items:stretch; gap:10px; padding:18px 20px 14px}
.job__head{flex:none}
.job__foot{justify-content:space-between; padding-top:12px; border-top:1px solid var(--line-2)}
/* в карточке на телефоне — снова в строку: логотип и рядом заказчик */
.job__head--stack{flex-direction:row; align-items:center; gap:11px; text-align:left}
}
.job__fav.is-on{color:var(--bad)}
.job__fav.is-on svg{fill:var(--bad)}
.job__fav:hover{color:var(--bad)}
.money{font-family:var(--display); font-weight:700; letter-spacing:-.04em; font-variant-numeric:tabular-nums}
.donut{display:flex; align-items:center; gap:18px}
.donut svg{width:120px;height:120px;flex:none}
.legend{display:flex; flex-direction:column; gap:8px; font-size:12.5px; flex:1}
.legend div{display:flex; align-items:center; gap:8px}
.legend i{width:9px;height:9px;border-radius:3px;flex:none}
.legend b{margin-left:auto; font-variant-numeric:tabular-nums}
.bars{display:flex; align-items:flex-end; gap:9px; height:130px; padding-top:10px}
.bars > div{flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:7px; height:100%}
.bars u{display:block; width:100%; max-width:40px; border-radius:5px 5px 2px 2px;
background:linear-gradient(180deg,var(--brand-400),var(--brand-600)); min-height:4px; transition:height .5s var(--ease)}
.bars > div:hover u{opacity:.82}
.bars small{font-size:10.5px; color:var(--faint)}
.pick{display:flex; flex-direction:column; gap:7px; max-height:340px; overflow-y:auto; padding:2px}
.pick__row{display:flex; align-items:center; gap:11px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r);
cursor:pointer; transition:border-color var(--t-fast), background var(--t-fast); background:var(--card)}
.pick__row:hover{border-color:var(--n-300); background:var(--card-2)}
.pick__row.is-on{border-color:var(--brand-400); background:var(--brand-050)}
.pick__row .check{margin-left:auto; width:19px;height:19px;border-radius:6px;border:1px solid var(--line-strong); display:grid; place-items:center; color:transparent; flex:none}
.pick__row.is-on .check{background:var(--brand-500); border-color:transparent; color:#fff}
.pick__row .check svg{width:12px;height:12px}
.scrim{display:none; position:fixed; inset:0; background:rgba(8,11,20,.44); z-index:35; backdrop-filter:blur(2px)}
/* ───────────────── responsive ───────────────── */
@media (max-width:1180px){
.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--main,.grid--side{grid-template-columns:1fr}
.search kbd{display:none}
}
@media (max-width:900px){
.sidebar{position:fixed; left:0; top:0; transform:translateX(-102%); transition:transform .28s cubic-bezier(.2,.8,.2,1); box-shadow:var(--shadow-lg)}
.app.nav-open .sidebar{transform:none}
.app.nav-open .scrim{display:block}
.sidebar .sidebar__close{display:grid}
.topbar .topbar__burger{display:grid}
.crumbs{display:none}
.view{padding:24px 18px 18px}
.review-bar{padding:10px 18px}
.grid--3{grid-template-columns:1fr}
}
@media (max-width:640px){
.grid--4,.grid--2{grid-template-columns:1fr}
.topbar{padding:0 14px; gap:8px}
.search{width:130px}
.search:focus-within{width:170px}
.hero{padding:22px 20px}
.hero__side{margin-left:0; gap:18px}
.row-2,.row-3{grid-template-columns:1fr}
.page h1{font-size:22px}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important; transition-duration:.01ms !important}}
/* ───────────────── registration (тёплый холст + карточка без рамки) ───────────────── */
.reg-body{margin:0; background:var(--bg); color:var(--ink)}
.reg{
min-height:100vh; display:flex; flex-direction:column; position:relative; overflow-x:hidden
}
.reg__bg{
position:fixed; inset:0; pointer-events:none; z-index:0;
background:radial-gradient(120% 100% at 12% 0%, #FFFFFF 0%, var(--bg) 48%, var(--bg-2) 100%)
}
/* две цветные ауры — единственный цвет на экране входа */
.reg__bg::before{
content:''; position:absolute; width:620px; height:620px; border-radius:50%;
top:-260px; left:-180px; background:radial-gradient(circle,rgba(75,70,245,.20),transparent 62%)
}
.reg__bg::after{
content:''; position:absolute; width:560px; height:560px; border-radius:50%;
bottom:-240px; right:-160px; background:radial-gradient(circle,rgba(14,165,183,.18),transparent 64%)
}
.reg__top{display:none}
.reg__logo{flex:none; line-height:0}
.reg__logo img{height:22px; width:auto; display:block}
.reg__login{margin:0; font-size:14px; color:var(--muted)}
.reg__login a{color:var(--brand-600); font-weight:600; text-decoration:underline; text-underline-offset:3px}
.reg__center{
position:relative; z-index:1; flex:1; display:flex; align-items:center; justify-content:center;
padding:clamp(24px,4vw,40px) clamp(16px,3vw,32px) clamp(24px,4vw,32px); min-height:0
}
.reg__center--tall{align-items:flex-start; padding-top:clamp(20px,3vw,32px)}
.reg__frame{
width:100%; max-width:520px;
display:flex; flex-direction:column; align-items:stretch;
transition:max-width .38s cubic-bezier(.22,1,.36,1)
}
.reg__frame--sm{max-width:400px}
.reg__frame--md{max-width:520px}
.reg__frame--lg{max-width:680px}
.reg__frame--xl{max-width:780px; align-self:center; display:flex; flex-direction:column; min-height:0}
.reg__progress{
display:flex; gap:6px; justify-content:center; align-items:center;
margin:24px auto 0; width:min(168px,60%); flex:none
}
.reg__progress i{width:32px; height:2px; flex:none; border-radius:99px; background:rgba(0,0,0,.1)}
.reg__progress i.is-done{background:var(--brand-500)}
.reg__progress i.is-now{background:var(--brand-500); opacity:1}
.reg__card{
background:transparent; color:var(--ink); border:none; border-radius:0;
padding:0;
display:flex; flex-direction:column; overflow:visible;
box-shadow:none
}
.reg__card.is-resizing{transition:height .38s cubic-bezier(.22,1,.36,1) !important}
.reg__card__body{flex:none; min-height:0; overflow:visible; display:flex; flex-direction:column; gap:14px}
.reg__card__head{margin-bottom:8px; text-align:left; flex:none}
.reg__card__title{display:flex; align-items:center; gap:8px; margin-bottom:10px}
.reg__card__title h1{
font-family:var(--display); font-size:clamp(20px,2.3vw,24px); font-weight:800;
letter-spacing:-.03em; line-height:1.18; margin:0; flex:1; min-width:0; color:var(--ink)
}
.reg__card__title .reg__logo{margin-left:4px}
.reg__card__head p{margin:0; color:var(--muted); font-size:14px; line-height:1.55; max-width:42ch}
.reg__card__foot{flex:none; margin-top:20px; padding-top:0}
.reg__back--icon{
flex:none; margin:0; padding:0; border:0; background:none;
display:grid; place-items:center; color:var(--ink); cursor:pointer;
transition:opacity .16s
}
.reg__back--icon:hover{opacity:.65}
.reg__back--icon .ic{width:22px; height:22px; stroke-width:2.6}
.reg__submit{
display:flex; align-items:center; justify-content:center; width:100%; height:52px;
border:0; border-radius:999px; background:var(--solid); color:var(--solid-ink);
font:600 15px var(--sans); letter-spacing:-.01em; cursor:pointer;
transition:background var(--t-fast), box-shadow var(--t-fast), transform .1s var(--ease)
}
.reg__submit:hover{background:var(--solid-2)}
.reg__submit:active{transform:translateY(.5px); box-shadow:none}
.reg__submit:disabled{opacity:.45; cursor:not-allowed}
.reg__back{
border:0; background:none; padding:6px 0; font:500 14px var(--sans); color:var(--muted);
cursor:pointer; align-self:center
}
.reg__back:hover{color:var(--ink)}
.reg__tagline{margin:0 0 16px; font-size:13px; color:var(--muted); line-height:1.45}
.reg__card .field{margin-bottom:0}
.reg__card .field > label{font-size:13px; font-weight:500; color:var(--muted)}
.reg__card .input,.reg__card .select,.reg__card .textarea{
background-color:#fff; border-color:var(--line-strong); border-radius:12px; height:48px; font-size:14px
}
.reg__card .select{
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right 10px center; background-size:18px;
padding-right:34px
}
.reg__card .textarea{height:auto; min-height:88px; padding:12px 14px}
.reg__card .input:focus,.reg__card .select:focus,.reg__card .textarea:focus{
border-color:var(--brand-400); box-shadow:var(--ring)
}
.reg-roles{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.reg-role{
text-align:left; padding:24px 22px; border-radius:18px; border:1px solid var(--line);
background:var(--card);
cursor:pointer; transition:border-color var(--t-fast), background var(--t-fast)
}
.reg-role:hover{border-color:var(--brand-300); background:var(--brand-050)}
.reg-role__ico{
width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
background:var(--brand-100);color:var(--brand-500);margin-bottom:14px
}
.reg-role__ico svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
.reg-role b{display:block; font-size:15px; font-weight:700; margin-bottom:4px; color:var(--ink)}
.reg-role span{font-size:13px; color:var(--muted); line-height:1.4}
.reg-otp-box{
background:var(--card); border:1px solid var(--line); border-radius:18px; padding:22px 24px 20px
}
.reg-otp{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:0}
.reg-otp input{
width:100%; height:56px; text-align:center; font:700 22px var(--display);
border:1px solid var(--line-strong); border-radius:12px; background:#fff; outline:none
}
.reg-otp input:focus{border-color:var(--brand-400); box-shadow:var(--ring)}
.reg-otp-field label{display:block; text-align:center; margin:0 0 14px}
.reg-otp-field .field__err{text-align:center; margin-top:10px}
.reg-otp-box .reg-resend{margin:16px 0 0; font-size:13px; color:var(--muted); line-height:1.5; text-align:center}
.reg-resend{margin:14px 0 0; font-size:13px; color:var(--muted); line-height:1.5; text-align:center}
.reg-resend button{
border:0; background:none; padding:0; color:var(--brand-600); font:inherit; font-weight:600; cursor:pointer
}
.reg-resend button:disabled{color:var(--faint); cursor:not-allowed}
.reg-spec-grid{
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;
padding:2px; margin:-2px
}
.reg__frame--xl .reg-spec-grid{align-content:start; max-height:none; overflow:visible}
.reg__frame--lg .reg-spec-grid,.reg__frame--md .reg-spec-grid,.reg__frame--sm .reg-spec-grid{max-height:none; overflow:visible}
.reg-spec{
display:flex; flex-direction:column; gap:8px; padding:14px; border-radius:12px;
border:1px solid var(--line); background:var(--card);
cursor:pointer; transition:border-color var(--t-fast), background var(--t-fast)
}
.reg-spec.is-on{border-color:var(--brand-200)}
.reg-spec__head{display:flex; align-items:flex-start; gap:10px}
.reg-spec__head input[type="checkbox"]{
appearance:none; -webkit-appearance:none;
width:16px; height:16px; margin-top:2px; flex:none;
border:1.5px solid var(--n-400); border-radius:4px; background:#fff;
position:relative; transition:background .15s, border-color .15s;
pointer-events:none
}
.reg-spec__head input[type="checkbox"]:checked{
background:var(--brand-600); border-color:var(--brand-600)
}
.reg-spec__head input[type="checkbox"]:checked::after{
content:''; position:absolute; left:4px; top:1px; width:5px; height:9px;
border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg)
}
.reg-spec__t{font-size:12.5px; font-weight:600; line-height:1.35; flex:1; color:var(--ink)}
.reg-spec .select{
display:none; width:100%; height:38px; font-size:12.5px; padding-right:34px;
background-color:#fff;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right 10px center; background-size:18px;
border-color:var(--line-strong); color:var(--ink); cursor:pointer
}
.reg-spec .select.is-placeholder{color:var(--faint)}
.reg-spec .select option{color:var(--ink)}
.reg-spec.is-on .select{display:block}
.reg-spec__other{grid-column:1/-1}
.reg-done{padding:4px 0}
.reg-done .empty__ico{margin:0 0 18px}
.reg-done h2{
font-family:var(--display); font-size:22px; font-weight:800; letter-spacing:-.02em;
line-height:1.2; margin:0 0 8px; color:var(--ink)
}
.reg-done p{margin:0 0 24px; color:var(--muted); font-size:14px; line-height:1.5; max-width:38ch}
.reg-done__actions{display:flex; flex-direction:column; gap:10px}
.reg-done__actions .reg__submit{text-decoration:none}
.reg-done__actions .reg__back{margin-top:4px}
.reg-upload{
display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 18px; margin-top:14px;
border:1px solid var(--line); border-radius:14px; background:var(--card);
font-size:13px; color:var(--muted)
}
.reg-upload b{color:var(--ink); font-weight:600}
.reg-upload button{border:0;background:none;padding:0;color:var(--brand-600);font-weight:600;cursor:pointer;font-size:13px}
.reg-err-block{font-size:13px; color:var(--bad); margin-bottom:10px; display:none}
.reg-err-block.is-show{display:block}
.reg__card .field.is-error .input,.reg__card .field.is-error .select,.reg__card .field.is-error .textarea{
border-color:var(--bad); box-shadow:0 0 0 3px var(--bad-bg)
}
.reg__card .field__err{font-size:12px; color:var(--bad); margin-top:4px; display:none}
.reg__card .field.is-error .field__err{display:block}
@media (max-width:640px){
.reg__center{padding:20px 16px 24px}
.reg-roles,.reg-spec-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
.reg__frame,.reg__card{transition-duration:.01ms !important}
}
/* ───────────────── registration2 (плавающая карточка на чернильном фоне) ───────────────── */
.reg2-body{margin:0; color:var(--ink)}
.reg2{
min-height:100vh; display:flex; align-items:center; justify-content:center;
padding:32px 28px;
background:linear-gradient(155deg, var(--brand-700) 0%, var(--brand-500) 52%, var(--brand-400) 100%)
}
.reg2__float{
display:flex; width:100%; max-width:860px; max-height:calc(100vh - 64px);
background:var(--card); border-radius:22px; overflow:hidden; box-shadow:var(--shadow-lg)
}
.reg2__brand{
flex:0 0 240px; display:flex; flex-direction:column;
padding:32px 24px; background:var(--brand-050); border-right:1px solid var(--line)
}
.reg2__side{display:flex; flex-direction:column; width:100%; min-height:0; flex:1}
.reg2__brand__logo{display:inline-flex; line-height:0; margin:0 0 36px; flex:none}
.reg2__brand__logo img{height:24px; width:auto; display:block}
.reg2__toc{flex:1; min-height:0; overflow-y:auto}
.reg2__toc__list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
.reg2__toc__item{
display:flex; align-items:center; gap:12px; width:100%;
padding:10px 12px; border:0; border-radius:10px; background:transparent;
color:var(--muted); font:inherit; text-align:left; cursor:default;
transition:background .15s, color .15s
}
button.reg2__toc__item{cursor:pointer}
button.reg2__toc__item:hover{background:rgba(255,255,255,.7); color:var(--ink-2)}
.reg2__toc__item.is-done{color:var(--ink-2)}
.reg2__toc__item.is-now{background:#fff; color:var(--brand-700)}
.reg2__toc__item.is-pending{color:var(--faint)}
.reg2__toc__n{
width:26px; height:26px; border-radius:99px; flex:none;
display:grid; place-items:center; font-size:11.5px; font-weight:700;
background:var(--line); color:var(--muted)
}
.reg2__toc__item.is-now .reg2__toc__n{background:var(--brand-600); color:#fff}
.reg2__toc__item.is-done .reg2__toc__n{background:var(--brand-100); color:var(--brand-700)}
.reg2__toc__n svg{width:13px; height:13px; stroke:currentColor; fill:none}
.reg2__toc__label{font-size:13.5px; font-weight:600; line-height:1.3}
.reg2__main{
flex:1; min-width:0; display:flex; align-items:flex-start; justify-content:center;
padding:36px 32px 28px; overflow-y:auto; background:#fff
}
.reg2__panel{width:100%; max-width:360px}
.reg2__nav{display:flex; align-items:center; margin:0 0 20px}
.reg2__back{
display:inline-flex; align-items:center; gap:6px; border:0; background:none; padding:0;
color:var(--brand-600); font-size:14px; font-weight:600; cursor:pointer
}
.reg2__back svg{width:18px; height:18px; stroke:currentColor; fill:none}
.reg2__title{
font-family:var(--display); font-size:clamp(24px,4vw,30px); font-weight:800;
letter-spacing:-.03em; line-height:1.15; margin:0 0 8px
}
.reg2__sub{margin:0 0 28px; color:var(--muted); font-size:14px; line-height:1.5}
.reg2__tagline{margin:-16px 0 20px; font-size:13px; color:var(--muted); line-height:1.45}
.reg2__body .field{margin-bottom:16px}
.reg2__body .field > label{font-size:13px; font-weight:600; color:var(--ink-2)}
.reg2__body .input,.reg2__body .select,.reg2__body .textarea{
background:#fff; border-color:var(--line-strong); border-radius:10px; height:46px; font-size:14px
}
.reg2__body .select{
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right 10px center; background-size:18px;
padding-right:34px
}
.reg2__body .textarea{height:auto; min-height:96px; padding:12px 14px}
.reg2__body .input:focus,.reg2__body .select:focus,.reg2__body .textarea:focus{
border-color:var(--brand-400); box-shadow:var(--ring)
}
.reg2__body .field.is-error .input,.reg2__body .field.is-error .select,.reg2__body .field.is-error .textarea{
border-color:var(--bad); box-shadow:0 0 0 3px var(--bad-bg)
}
.reg2__body .field__err{font-size:12px; color:var(--bad); margin-top:4px; display:none}
.reg2__body .field.is-error .field__err{display:block}
.reg2__submit{
display:flex; align-items:center; justify-content:center; width:100%; height:48px;
margin-top:8px; border:0; border-radius:10px; cursor:pointer;
background:var(--solid); color:var(--solid-ink); font-size:15px; font-weight:600; letter-spacing:-.01em;
text-decoration:none;
transition:background var(--t-fast), box-shadow var(--t-fast), transform .1s var(--ease)
}
.reg2__submit:hover{background:var(--solid-2)}
.reg2__submit:active{transform:translateY(.5px); box-shadow:none}
.reg2__link{
display:block; width:100%; margin-top:12px; border:0; background:none; padding:8px 0;
color:var(--brand-600); font-size:14px; font-weight:600; cursor:pointer; text-align:center
}
.reg2-roles{display:flex; flex-direction:column; gap:10px}
/* выбор роли: две карточки в ряд одной высоты, цветной круг с иконкой;
выбранная — с рамкой акцента и галочкой в углу */
.reg3-center .reg2-roles{display:grid; grid-template-columns:1fr 1fr; gap:12px; width:100%; margin-top:20px}
.reg2-role{
position:relative; display:flex; flex-direction:column; align-items:center; text-align:center;
padding:26px 14px 22px; border-radius:20px; border:1.5px solid transparent;
background:var(--brand-050); cursor:pointer; font:inherit; color:inherit;
transition:border-color .15s, background .15s, transform .15s var(--ease)
}
.reg2-role:hover{background:var(--brand-100); transform:translateY(-1px)}
.reg2-role.is-on{border-color:var(--brand-500); background:#fff}
.reg2-role__ico{
width:60px; height:60px; margin-bottom:14px; display:grid; place-items:center; border-radius:50%; color:#fff;
background:linear-gradient(140deg, var(--brand-400) 0%, var(--brand-600) 100%)
}
.reg2-role--employer .reg2-role__ico{background:linear-gradient(140deg, var(--brand-300) 0%, var(--brand-500) 100%)}
.reg2-role__ico svg{width:26px; height:26px}
.reg2-role b{display:block; font-size:15px; font-weight:700; margin-bottom:6px}
.reg2-role span{display:block; font-size:13px; line-height:1.45; color:var(--muted)}
.reg2-role__check{
position:absolute; top:10px; right:10px; width:22px; height:22px; display:grid; place-items:center;
border-radius:50%; background:var(--brand-500); color:#fff; opacity:0; transform:scale(.6);
transition:opacity .15s, transform .15s var(--ease)
}
.reg2-role__check svg{width:13px; height:13px; stroke-width:2.4}
.reg2-role.is-on .reg2-role__check{opacity:1; transform:none}
.reg3__submit:disabled{opacity:.4; cursor:default}
.reg3__submit:disabled:hover{background:var(--n-950)}
@media (max-width:380px){ .reg3-center .reg2-roles{grid-template-columns:1fr} }
.reg2-otp{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:8px; max-width:260px}
.reg2-otp input{
width:100%; min-width:0; height:48px; padding:0; box-sizing:border-box;
border:1px solid var(--line-strong); border-radius:10px; background:#fff;
text-align:center; font-size:20px; font-weight:700; font-family:var(--display); outline:none
}
.reg2-otp input:focus{border-color:var(--brand-400); box-shadow:var(--ring)}
.reg2 .reg-otp-field label{text-align:left; margin:0 0 8px}
.reg2 .reg-otp-field .field__err{text-align:left; margin-top:10px}
.reg2-resend{margin:14px 0 0; font-size:13px; color:var(--muted); line-height:1.5}
.reg2-resend button{border:0; background:none; padding:0; color:var(--brand-600); font:inherit; font-weight:600; cursor:pointer}
.reg2-resend button:disabled{color:var(--faint); cursor:not-allowed}
.reg2-upload,
.modal .reg2-upload{
display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; margin-top:4px;
border:1px solid var(--line); border-radius:10px; font-size:13px; color:var(--muted)
}
.reg2-upload b{color:var(--ink); font-weight:600}
.reg2-upload button{border:0; background:none; padding:0; color:var(--brand-600); font-weight:600; cursor:pointer; font-size:13px}
.reg2__legal{margin-top:32px; padding-top:20px; border-top:1px solid var(--line)}
.reg2__login{margin:0 0 10px; font-size:14px; color:var(--muted); text-align:center}
.reg2__login a{color:var(--brand-600); font-weight:600}
.reg2__terms{margin:0; font-size:12px; color:var(--faint); line-height:1.5; text-align:center}
.reg2__terms a{color:var(--muted); text-decoration:underline}
.reg2 .row-2{grid-template-columns:1fr}
@media (max-width:760px){
.reg2{padding:16px 12px; align-items:flex-start}
.reg2__float{flex-direction:column; max-width:480px; max-height:none}
.reg2__brand{flex:none; border-right:0; border-bottom:1px solid var(--line); padding:20px 18px}
.reg2__brand__logo{margin-bottom:16px}
.reg2__toc{overflow:visible}
.reg2__toc__list{flex-direction:row; gap:6px; overflow-x:auto; padding-bottom:2px}
.reg2__toc__item{width:auto; flex:none; padding:8px 10px}
.reg2__toc__label{font-size:12.5px; white-space:nowrap}
.reg2__main{padding:24px 20px 20px}
}
/* ───────────────── registration3 (фото слева, форма справа) ───────────────── */
/* фон с небом рисует .reg3 на весь экран; второй слой здесь, да ещё с
background-attachment:fixed, только заставлял перерисовывать всё целиком */
.reg3-body{margin:0; color:var(--ink); background-color:#fff}
.reg3{
min-height:100vh; display:flex; align-items:center; justify-content:center;
padding:40px 32px;
background-color:#fff;
background-image:linear-gradient(rgba(244,246,250,.60), rgba(233,237,245,.74)), url('../images/bg-sky.jpg?v=2');
background-size:cover; background-position:center; background-repeat:no-repeat
}
/* высота постоянная: ошибки под полями и смена шагов не дёргают карточку,
длинный шаг прокручивается внутри; меняется только ширина фото */
.reg3__float{
display:flex; align-items:stretch; width:100%; max-width:920px;
height:min(720px, calc(100vh - 80px)); min-height:min(600px, calc(100vh - 80px));
background:var(--card); border-radius:22px; overflow:hidden;
box-shadow:var(--shadow-lg)
}
.reg3__aside{
flex:0 0 50%; display:flex; min-width:0; background:#fff
}
.reg3__visual{
flex:1; position:relative; min-height:0; overflow:hidden;
background:var(--n-800)
}
.reg3__visual img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:1}
.reg3__visual__shade{
position:absolute; inset:0; pointer-events:none;
background:radial-gradient(120% 90% at 0% 0%, rgba(0,0,0,.24) 0%, rgba(0,0,0,.08) 32%, transparent 58%)
}
.reg3__visual__logo{position:absolute; left:24px; top:24px; z-index:1; line-height:0}
.reg3__visual__logo img{height:24px; width:auto; display:block; filter:brightness(0) invert(1)}
.reg3__main{
flex:1; min-width:0; min-height:0; display:flex; flex-direction:column;
/* верхний отступ живёт внутри прокрутки: иначе контент обрывается на его
границе и над ним висит белая полоса вместо ухода за край карточки */
padding:0 32px 28px; overflow:hidden; background:#fff
}
.reg3__panel{
flex:1; display:flex; flex-direction:column; min-height:0;
width:100%; max-width:360px; margin:0 auto
}
.reg3__body{
flex:1; min-height:0; overflow-y:auto; padding-top:36px; padding-bottom:4px;
/* прокрутка обрезает кольцо фокуса по краям — отыгрываем поля отрицательным margin */
padding-left:4px; padding-right:4px; margin-left:-4px; margin-right:-4px
}
/* над кнопкой немного воздуха: прокручиваемая форма уходит под неё без большой белой полосы */
.reg3__foot{flex:none; padding-top:14px; margin-top:auto}
.reg3__title{
font-family:var(--display); font-size:clamp(20px,3vw,24px); font-weight:700;
letter-spacing:-.02em; line-height:1.2; margin:0 0 8px
}
.reg3__sub{margin:0 0 28px; color:var(--muted); font-size:14px; line-height:1.5}
.reg3__title-row.reg3__title-row--exp{margin-bottom:18px}
.reg3__title-row.reg3__title-row--solo{margin-bottom:24px}
/* шаг опыта: меньше воздуха сверху и над кнопкой, кнопка ближе к низу карточки */
.reg3__panel--exp .reg3__body{padding-top:28px}
.reg3__main:has(.reg3__panel--exp),
.reg3__float--wide .reg3__main{padding-bottom:20px}
/* смена шага: вперёд — справа, назад — слева */
.reg3__body.is-in-fwd{animation:regStepFwd .32s var(--ease) both}
.reg3__body.is-in-back{animation:regStepBack .32s var(--ease) both}
@keyframes regStepFwd{from{opacity:0; transform:translateX(28px)}to{opacity:1; transform:none}}
@keyframes regStepBack{from{opacity:0; transform:translateX(-28px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .reg3__body.is-in-fwd,.reg3__body.is-in-back{animation:none} }
.reg3__foot > .reg3__submit{margin-top:0}
.reg3__foot > .reg3__link{margin-top:12px}
.reg3__body .field{margin-bottom:12px}
/* поле с плавающей подписью: пока пусто — подпись стоит вместо плейсхолдера,
при вводе уезжает наверх и уменьшается */
.reg3__body .field--float{position:relative}
.reg3__body .field--float .input,
.reg3__body .field--float .textarea{
width:100%; height:52px; padding:19px 14px 5px; font-size:14px;
border:1px solid var(--line-strong); border-radius:10px; background:#fff;
transition:border-color var(--t-fast), box-shadow var(--t-fast)
}
.reg3__body .field--float label{
position:absolute; left:15px; top:16px; font-size:14px; line-height:1.2; font-weight:400;
color:var(--faint); pointer-events:none; transform-origin:left top;
transition:transform var(--t-fast), color var(--t-fast)
}
.reg3__body .field--float .input:focus,
.reg3__body .field--float .textarea:focus{border-color:var(--brand-400); box-shadow:var(--ring)}
.reg3__body .field--float .input:focus + label,
.reg3__body .field--float .input:not(:placeholder-shown) + label,
.reg3__body .field--float .textarea:focus + label,
.reg3__body .field--float .textarea:not(:placeholder-shown) + label{
transform:translateY(-9px) scale(.79); color:var(--muted)
}
/* уровень по специализации — на шаге опыта, три варианта в ряд */
.reg3-levels{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:0 0 18px; padding:3px}
/* уровень — как плитки специализаций: иконка сверху, выбранный светится фиолетовым */
.reg3-level{
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
height:90px; padding:6px 6px 0; border:1px solid var(--line-strong); border-radius:14px;
background:#fff; cursor:pointer; font:inherit; text-align:center;
transition:border-color .2s, box-shadow .2s var(--ease), transform .15s var(--ease)
}
.reg3-level > svg{width:22px; height:22px; margin-bottom:4px; color:var(--brand-600); transition:color .2s}
.reg3-level b{font-size:13.5px; font-weight:600; color:var(--ink)}
.reg3-level i{font-style:normal; font-size:11px; color:var(--muted); white-space:nowrap}
.reg3-level:hover{border-color:var(--n-300); transform:translateY(-1px)}
.reg3-level.is-on{border-color:#7C5CE6;
box-shadow:0 0 0 2px rgba(124,92,230,.5), 0 6px 22px -4px rgba(124,92,230,.45)}
.reg3-level.is-on > svg{color:#7C5CE6}
/* телефон — подпись над полем, внутри маска-плейсхолдер */
.reg3__body .field--stack{display:flex; flex-direction:column; gap:7px}
.reg3__body .field--stack label{font-size:12.5px; font-weight:600; color:var(--ink-2)}
.reg3__body .field--stack .input,
.reg3__body .field--stack .select{
height:52px; padding:0 14px; font-size:16px; letter-spacing:.01em; font-variant-numeric:tabular-nums;
border:1px solid var(--line-strong); border-radius:10px; background:#fff;
transition:border-color var(--t-fast), box-shadow var(--t-fast)
}
.reg3__body .field--stack .input::placeholder{color:var(--n-300); letter-spacing:.01em}
.reg3__body .field--stack .input:focus,
.reg3__body .field--stack .select:focus{border-color:var(--brand-400); box-shadow:var(--ring)}
.reg3__body .field--float-area .textarea{height:auto; min-height:92px; padding:24px 14px 12px; line-height:1.5}
.reg3__body .field--float-area label{top:15px}
/* подсказка в поле не спорит с подписью: проявляется, когда подпись уехала наверх */
.reg3__body .field--float .textarea::placeholder{color:transparent; transition:color var(--t-fast)}
.reg3__body .field--float .textarea:focus::placeholder{color:var(--faint)}
/* поле-подсказка: вместо подписи — обычный плейсхолдер, видный сразу */
.reg3__body .field--hint .textarea{padding:13px 14px 12px}
.reg3__body .field--hint .textarea::placeholder{color:var(--faint)}
.reg3__body .field--hint label{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
.reg3__body .field.is-error.field--float .input,
.reg3__body .field.is-error.field--float .textarea,
.reg3__body .field.is-error.field--stack .input,
.reg3__body .field.is-error.field--stack .select{border-color:var(--bad); box-shadow:0 0 0 3px var(--bad-bg)}
.reg3__body .input,.reg3__body .select,.reg3__body .textarea{
background:#fff; border-color:var(--line-strong); border-radius:10px; height:46px; font-size:14px
}
.reg3__body .select{
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right 10px center; background-size:18px;
padding-right:34px
}
.reg3__body .textarea{height:auto; min-height:96px; padding:12px 14px}
.reg3__body .input:focus,.reg3__body .select:focus,.reg3__body .textarea:focus{
border-color:var(--brand-400); box-shadow:var(--ring)
}
.reg3__body .field.is-error .input,.reg3__body .field.is-error .select,.reg3__body .field.is-error .textarea{
border-color:var(--bad); box-shadow:0 0 0 3px var(--bad-bg)
}
.reg3__body .field__err{font-size:12px; color:var(--bad); margin-top:4px; display:none}
.reg3__body .field.is-error .field__err{display:block}
.reg3__actions{display:flex; align-items:stretch; gap:10px}
.reg3__submit{
display:flex; align-items:center; justify-content:center; width:100%; height:48px;
margin-top:8px; border:0; border-radius:999px; cursor:pointer;
background:var(--n-950); color:#fff; font-size:15px; font-weight:600; letter-spacing:-.01em;
text-decoration:none;
transition:background var(--t-fast), transform .1s var(--ease), box-shadow var(--t-fast)
}
.reg3__actions .reg3__submit{flex:1; width:auto; margin-top:0}
.reg3__submit:hover{
background:var(--n-800)
}
.reg3__submit:active{
transform:translateY(.5px);
box-shadow:none
}
.reg3__link{
display:block; width:100%; margin-top:12px; border:0; background:none; padding:8px 0;
color:var(--brand-600); font-size:14px; font-weight:600; cursor:pointer; text-align:center
}
/* заголовок со стрелкой «назад» слева — без подложки, только иконка */
.reg3__title-row{display:flex; align-items:center; gap:6px; margin:0 0 8px}
.reg3__title-row .reg3__title{margin:0}
.reg3__back-arrow{
flex:none; display:grid; place-items:center; width:32px; height:32px; margin-left:-6px; padding:0;
border:0; border-radius:50%; background:none; color:var(--muted); cursor:pointer;
transition:color var(--t-fast), background var(--t-fast)
}
.reg3__back-arrow:hover{color:var(--ink); background:var(--bg-2)}
.reg3__back-arrow svg{width:22px; height:22px}
/* шаг задачи заказчика: звонок — под тонкой линией */
.reg3__foot > .reg3__link--call{margin-top:20px; padding-top:16px; border-top:1px solid var(--line); font-weight:400}
.reg3__legal{flex:none; margin-top:16px}
/* подвал пока пустой — без него кнопка не висит лишние 16 px над краем */
.reg3__legal:empty{display:none}
.reg3__login{margin:0; font-size:14px; color:var(--muted); text-align:center}
.reg3__login a{color:var(--brand-600); font-weight:600}
.reg3 .row-2{grid-template-columns:1fr}
.reg3 .reg-otp-field label{text-align:left; margin:0 0 8px}
.reg3 .reg-otp-field .field__err{text-align:left; margin-top:10px}
/* выбор специализации: плитки фиксированной высоты по три в ряд — пока колонка
расширяется, переносы текста не меняют размер. Сверху цветная шапка с белой
иконкой, снизу белое поле с тёмным названием. Выбранная целиком белая,
иконка в цвете, вокруг — мягко светящаяся фиолетовая рамка */
.spec-tiles{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:116px; gap:12px;
margin:0 0 12px; padding:6px}
.spec-tile{
--tile-a:#1A9BBE; --tile-b:#00465C;
/* белое поле на белой карточке — рамка заметнее обычной линии */
display:flex; flex-direction:column; height:116px; padding:0; border:1px solid var(--line-strong); border-radius:16px;
overflow:hidden; background:#fff; font:inherit; color:var(--ink); cursor:pointer; text-align:center;
transition:transform .15s var(--ease), box-shadow .2s var(--ease), border-color .2s
}
.spec-tile:hover{transform:translateY(-2px); border-color:var(--n-300)}
.spec-tile--1{--tile-a:#3FBFA8; --tile-b:#0F6B66}
.spec-tile--2{--tile-a:#5B8DEF; --tile-b:#2A4FA8}
.spec-tile--3{--tile-a:#8A7CF0; --tile-b:#4B3FA8}
.spec-tile__top{position:relative; flex:none; height:54px; display:grid; place-items:center; color:#fff;
background:linear-gradient(135deg, var(--tile-a) 0%, var(--tile-b) 100%);
transition:background .2s, color .2s}
.spec-tile__ico{width:44px; height:44px; display:grid; place-items:center; border-radius:50%;
background:transparent; transition:background .2s, transform .25s var(--ease)}
.spec-tile__ico svg{width:24px; height:24px}
/* название по центру белого поля; высота плитки задана, лишнее не растягивает её */
.spec-tile__t{flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:6px 8px 8px;
overflow:hidden; font-size:12.5px; font-weight:600; line-height:1.3; overflow-wrap:break-word; hyphens:auto}
.spec-tile__check{position:absolute; top:7px; right:7px; width:20px; height:20px; display:grid; place-items:center;
border-radius:50%; background:#7C5CE6; color:#fff; opacity:0; transform:scale(.6);
transition:opacity .15s, transform .15s var(--ease)}
.spec-tile__check svg{width:12px; height:12px; stroke-width:2.6}
.spec-tile.is-on{border-color:#7C5CE6;
box-shadow:0 0 0 2px rgba(124,92,230,.5), 0 6px 22px -4px rgba(124,92,230,.45)}
.spec-tile.is-on .spec-tile__top{background:#fff}
/* шапка белеет, а иконка не остаётся одна: опускается в круг цвета шапки */
.spec-tile.is-on .spec-tile__ico{transform:translateY(8px);
background:linear-gradient(135deg, var(--tile-a) 0%, var(--tile-b) 100%)}
.spec-tile.is-on .spec-tile__check{opacity:1; transform:none}
@media (max-width:420px){ .spec-tiles{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* на шаге специализации фото уезжает целиком — остаётся белая карточка.
Пока она расширяется, текст переносился бы на ходу, поэтому содержимое
шага проявляется уже после того, как ширина доехала */
.reg3__aside{transition:flex-basis .45s var(--ease)}
.reg3__float--wide .reg3__aside{flex-basis:0}
.reg3__float--wide .reg3__panel{max-width:600px}
.reg3__float--wide .reg3__body{animation:regWideIn .3s var(--ease) .45s both}
@keyframes regWideIn{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .reg3__aside{transition:none} .reg3__float--wide .reg3__body{animation:none} }
@media (max-width:760px){
.reg3{padding:16px 12px; align-items:flex-start}
.reg3__float{flex-direction:column; max-width:480px; height:auto; max-height:none; min-height:0}
.reg3__aside{flex:none; width:100%; padding:0}
.reg3__visual{min-height:200px}
.reg3__float--wide .reg3__aside{display:none}
.reg3__float--wide .reg3__body{animation:none}
.reg3__visual__logo{left:16px; top:16px}
.reg3__main{padding:24px 20px 20px}
}
/* вход через Telegram-бота: кнопка в цветах Telegram, шаги, состояние */
.reg3__submit.reg3__tg{display:flex; align-items:center; justify-content:center; width:100%; margin:4px 0 22px; border-radius:999px;
background:#2AABEE; color:#fff; text-decoration:none}
.reg3__submit.reg3__tg:hover{background:#229ED9}
.reg3__submit.reg3__tg:disabled{opacity:.6; cursor:default}
.reg3-steps{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; font-size:13.5px; line-height:1.45; color:var(--muted)}
.reg3-steps li{display:flex; gap:10px}
.reg3-steps b{flex:none; width:20px; height:20px; border-radius:50%; display:grid; place-items:center;
background:var(--brand-050); color:var(--brand-600); font-size:11.5px; font-weight:600}
.reg3-tg-state{margin:18px 0 0; font-size:13px; color:var(--muted)}
.reg2-otp.reg2-otp--6{grid-template-columns:repeat(6,minmax(0,1fr)); max-width:340px}
/* шаги входа: всё по центру карточки — и по горизонтали, и по вертикали */
.reg3__panel--center .reg3__body{display:flex; flex-direction:column; justify-content:center; padding-top:0; padding-bottom:0}
.reg3-center{display:flex; flex-direction:column; align-items:center; text-align:center}
.reg3-center .reg3__title,.reg3-center .reg3__sub{text-align:center}
/* список по центру целиком, пункты внутри — по левому краю: номера в одну колонку */
.reg3-center .reg3-steps{align-self:center; max-width:300px; text-align:left}
.reg3-center .reg2-otp{margin-left:auto; margin-right:auto}
.reg3-center .field__err{text-align:center}
.reg3-mark{display:grid; place-items:center; width:64px; height:64px; margin:0 0 20px; border-radius:50%; background:var(--solid)}
.reg3-mark img{display:block; width:30px; height:auto}
.reg3-center .reg2-resend{text-align:center}
.reg3-center .reg2-resend a{color:var(--brand-600); font-weight:600; text-decoration:none}
.reg3-center .reg2-resend a:hover{text-decoration:underline}
.reg3__panel--center .reg3__foot{display:flex; justify-content:center; padding-top:16px}
.reg3__foot > .reg3-back-link{display:inline-flex; align-items:center; gap:6px; width:auto; margin-top:0; color:var(--muted)}
.reg3__foot > .reg3-back-link:hover{color:var(--ink)}
.reg3-back-link svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8}
/* уровень обязателен: без выбора — красная подпись и рамки */
.reg3-levels__err{grid-column:1/-1; margin-top:0}
.reg3-levels.is-error .reg3-levels__err{display:block}
.reg3-levels.is-error .reg3-level{border-color:var(--bad)}
/* вложение к направлению в модалке профиля */
.spec-upload{
display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; margin-top:4px;
border:1px solid var(--line); border-radius:10px; font-size:13px; color:var(--muted)
}
.spec-upload b{color:var(--ink); font-weight:600}
.spec-upload button{border:0; background:none; padding:0; color:var(--brand-600); font-weight:600; cursor:pointer; font-size:13px}
/* ───────────────── employer portal ───────────────── */
.employer-portal{
--shell-gutter:18px;
--nav-pad-x:11px;
--content-max:1100px;
--content-pad-x:60px
}
.employer-portal .app{
flex-direction:column; min-height:100vh
}
.employer-portal .app__body{
flex:1; display:flex; min-width:0; align-items:stretch
}
.employer-portal .sidebar{
position:sticky; top:var(--topbar); align-self:flex-start;
height:calc(100vh - var(--topbar)); z-index:30
}
.employer-portal .sidebar__head{
display:none; padding:12px 18px 0; justify-content:flex-end
}
.employer-portal .sidebar__scroll{padding-top:18px}
.employer-portal .main{flex:1; min-width:0}
.employer-portal .topbar{
position:sticky; top:0; z-index:50; flex:none;
display:flex; justify-content:flex-start; padding:0; width:100%;
border-bottom:1px solid var(--line)
}
.employer-portal .topbar__in{
width:100%; max-width:none; margin:0; padding:0;
display:flex; align-items:stretch; height:var(--topbar)
}
.employer-portal .topbar__brand{
flex:none; width:var(--sidebar); display:flex; align-items:center; gap:14px;
padding-left:calc(var(--shell-gutter) + var(--nav-pad-x)); padding-right:18px
}
.employer-portal .topbar__main{
flex:1; min-width:0; display:flex; justify-content:flex-start
}
.employer-portal .topbar__content{
width:100%; max-width:var(--content-max); min-width:min(800px, 100%);
margin:0 auto; padding:0 var(--content-pad-x);
display:flex; align-items:center; gap:14px; height:var(--topbar)
}
.employer-portal .topbar__logo{flex:none}
.employer-portal .crumbs{
flex:1; min-width:0; display:flex; align-items:center
}
.employer-portal .crumbs:empty{display:none}
.employer-portal .crumbs a{
color:var(--muted); text-decoration:none; font-weight:600; transition:.15s
}
.employer-portal .crumbs a:hover{color:var(--ink)}
.employer-portal .topbar__social{margin-left:auto; gap:14px; flex:none}
.employer-portal .view{
max-width:var(--content-max); min-width:min(800px, 100%); width:100%;
padding-left:var(--content-pad-x); padding-right:var(--content-pad-x)
}
.employer-portal .view > .card,
.employer-portal .view > .grid,
.employer-portal .view > .emp-projects,
.employer-portal .view > .emp-success,
.employer-portal .view > .emp-actions{width:100%; max-width:none}
/* модалка «звонок заказан»: телефон в круге по центру */
.call-done{text-align:center; padding:10px 6px 2px}
.call-done__ico{width:64px; height:64px; margin:0 auto 18px; display:grid; place-items:center; border-radius:50%;
background:var(--brand-050); color:var(--brand-600)}
.call-done__ico svg{width:28px; height:28px}
.call-done h3{margin:0 0 8px; font:700 20px/1.25 var(--display); letter-spacing:-.02em}
.call-done p{margin:0; font-size:14px; line-height:1.55; color:var(--ink-2)}
.call-done b{white-space:nowrap}
.modal__foot .call-done__ok{flex:1}
/* под широкой кнопкой — столько же воздуха, сколько по бокам и сверху */
.modal--sm .modal__foot:has(.call-done__ok){padding:14px 24px 24px}
.emp-form-row{margin-bottom:14px}
.emp-form-row .field{margin-bottom:0}
.emp-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.emp-success{
display:flex; flex-direction:column; align-items:center; text-align:center;
gap:8px; margin-bottom:16px
}
.emp-success__ico{
width:56px; height:56px; border-radius:99px; background:var(--ok-bg); color:var(--ok);
display:grid; place-items:center; margin-bottom:4px
}
.emp-success__ico svg{width:28px; height:28px; stroke:currentColor; fill:none}
.emp-success b{font-family:var(--display); font-size:18px}
.emp-success p{margin:0; color:var(--muted); font-size:14px; line-height:1.5; max-width:420px}
/* проекты заказчика — плитками */
.emp-projects{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; margin-bottom:16px}
.emp-card{display:flex; flex-direction:column; gap:16px; padding:20px; cursor:pointer}
.emp-card__top{display:flex; align-items:flex-start; gap:10px; justify-content:space-between}
.emp-card__title{
font-family:var(--display); font-size:16.5px; font-weight:700; letter-spacing:-.025em;
color:var(--ink); min-width:0; overflow:hidden; text-overflow:ellipsis
}
.emp-card__team{margin-top:auto}
.emp-card__foot{display:flex; align-items:center; justify-content:space-between; gap:10px;
margin-top:auto; padding-top:14px; border-top:1px solid var(--line-2)}
.emp-card__cap{font-size:12.5px; color:var(--muted)}
.emp-card .emp-project__team{margin-left:0}
/* пустая плитка «Создать проект» — последней в ряду, пунктирная рамка */
.emp-new{
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:150px;
padding:20px; border:1.5px dashed var(--line-strong); border-radius:var(--r-lg); background:transparent;
font:inherit; color:inherit; text-align:center; cursor:pointer;
transition:border-color var(--t-fast), background var(--t-fast)
}
.emp-new:hover{border-color:var(--brand-300); background:var(--brand-050)}
.emp-new__ico{width:40px; height:40px; margin-bottom:8px; display:grid; place-items:center; border-radius:50%;
background:var(--brand-050); color:var(--brand-600); transition:background var(--t-fast)}
.emp-new:hover .emp-new__ico{background:#fff}
.emp-new__ico svg{width:20px; height:20px}
.emp-new b{font-size:14.5px; font-weight:600; color:var(--ink)}
.emp-new > span:last-child{font-size:12.5px; color:var(--muted)}
@media (max-width:560px){ .emp-projects{grid-template-columns:1fr} }
.emp-project{
padding:0; overflow:hidden; cursor:pointer;
transition:border-color .15s ease
}
.emp-project:hover{border-color:var(--brand-200); box-shadow:var(--shadow); transform:translateY(-1px)}
.emp-project:focus-visible{outline:2px solid var(--brand-500); outline-offset:2px}
.emp-project__row{
display:flex; align-items:center; gap:14px; padding:18px 22px; min-height:72px
}
.emp-project__head{
flex:none; display:flex; align-items:center; gap:10px; min-width:0
}
.emp-project__title{
flex:none; font-family:var(--display); font-size:16.5px; font-weight:700; letter-spacing:-.025em; color:var(--ink)
}
.emp-project__status{flex:none}
.emp-project__team{
flex:none; min-width:0; display:flex; align-items:center;
margin-left:auto
}
.emp-project__slots{display:flex; align-items:center; gap:6px; flex:none}
.emp-project__slots .avatar{
width:28px; height:28px; font-size:10px; flex:none; border:0; margin:0
}
.emp-project__slot{
width:28px; height:28px; border-radius:99px; flex:none;
display:grid; place-items:center; background:var(--bg-2); color:var(--faint);
border:1px solid var(--line)
}
.emp-project__slot svg{width:14px; height:14px}
.emp-tile{
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
min-height:88px; padding:12px; border:1px solid var(--line); border-radius:var(--r);
background:var(--card-2); cursor:pointer; font-size:13px; font-weight:600; color:var(--ink-2);
transition:border-color var(--t-fast), background var(--t-fast)
}
.emp-tile svg{width:20px; height:20px; stroke:var(--ink); fill:none}
.emp-tile:hover{border-color:var(--line-strong); background:#fff}
.emp-box-text{margin:0; line-height:1.55; color:var(--ink-2)}
.emp-docs{display:flex; flex-direction:column}
.emp-doc{
display:flex; align-items:center; gap:10px; width:100%; padding:10px 0;
border:0; border-bottom:1px solid var(--line); background:transparent;
font-size:14px; font-weight:600; color:var(--ink); text-align:left; cursor:pointer;
transition:color .15s
}
.emp-doc:last-child{border-bottom:0; padding-bottom:0}
.emp-doc:first-child{padding-top:0}
.emp-doc svg{width:18px; height:18px; flex:none; color:var(--muted); stroke:var(--muted)}
.emp-doc:hover{color:var(--brand-600)}
.emp-doc:hover svg{color:var(--brand-600); stroke:var(--brand-600)}
.modal--sheet .emp-panel{padding:0}
.modal--sheet .emp-panel__head{padding:18px 20px 12px}
.emp-panel{padding:0; overflow:hidden}
.emp-panel__head{
display:flex; align-items:center; gap:12px; padding:20px 24px 14px
}
.emp-panel__head h3{margin:0; font-size:15px}
.emp-chat-link{
margin-left:auto; display:inline-flex; align-items:center; gap:6px;
border:0; background:transparent; padding:0; cursor:pointer;
font-size:14px; font-weight:600; color:var(--muted); transition:color .15s
}
.emp-chat-link svg{width:16px; height:16px}
.emp-chat-link:hover{color:var(--brand-600)}
.emp-back{
display:inline-flex; align-items:center; gap:6px; margin-bottom:12px;
font-size:14px; font-weight:600; color:var(--muted); text-decoration:none
}
.emp-back svg{width:18px; height:18px; stroke:currentColor; fill:none}
.emp-back:hover{color:var(--ink)}
.emp-form-foot{display:flex; flex-direction:row; gap:10px; margin-top:8px}
.emp-form-foot .btn{flex:1}
/* кнопки под формой — пилюли; основная чёрная */
.btn.btn--pill{border-radius:99px; height:42px; background:#fff}
.btn.btn--pill:hover{background:var(--bg-2)}
.btn.btn--pill-black{background:var(--n-950); border-color:var(--n-950); color:#fff}
.btn.btn--pill-black:hover{background:var(--n-800); border-color:var(--n-800); color:#fff}
@media (max-width:560px){
.emp-form-foot{flex-direction:column}
}
.emp-estimate{
display:flex; align-items:center; justify-content:space-between; gap:12px;
padding:14px 18px; border-top:1px solid var(--line); font-size:14px; color:var(--muted)
}
.emp-estimate b{color:var(--ink); font-size:15px}
/* «Помощь»: три карточки — контакты, мессенджеры, заказ звонка */
.emp-help .card__body{padding-top:8px; padding-bottom:8px}
.emp-help__call{display:flex; flex-direction:column}
.emp-help__call p{margin:12px 0 16px; font-size:14px; line-height:1.55; color:var(--muted)}
.emp-help__call .btn{width:100%; margin-bottom:12px}
/* мессенджеры в разделе «Помощь» */
.emp-msg__i{
display:flex; align-items:center; gap:12px; padding:12px 12px 12px 0;
border-bottom:1px solid var(--line-2); color:var(--ink);
transition:padding-left var(--t-fast), background var(--t-fast)
}
.emp-msg__i:last-child{border-bottom:0}
.emp-msg__i:hover{background:var(--tint); padding-left:12px; border-radius:var(--r-sm)}
.emp-msg__ico{width:32px; height:32px; flex:none; border-radius:99px; display:block}
.emp-msg__t{display:flex; flex-direction:column; min-width:0}
.emp-msg__t b{font-size:14px; font-weight:600; letter-spacing:-.01em}
.emp-msg__t i{font-style:normal; font-size:12.5px; color:var(--muted)}
.emp-msg__i > svg:last-child{
width:16px; height:16px; margin-left:auto; flex:none; color:var(--faint);
opacity:0; transform:translateX(-4px);
transition:opacity var(--t-fast), transform var(--t-fast), color var(--t-fast)
}
.emp-msg__i:hover > svg:last-child{opacity:1; transform:none; color:var(--brand-500)}
.session-block{margin-bottom:16px}
.session-block:last-child{margin-bottom:0}
/* меню аккаунта — центральная композиция: аватар, имя, где вы сейчас, действия */
.session-head{display:flex; flex-direction:column; align-items:center; gap:12px; margin:4px 0 14px}
.session-head b{font-family:var(--display); font-size:16px; font-weight:700; letter-spacing:-.025em; min-width:0; text-align:center}
.session-note{margin:0 0 18px; font-size:13.5px; line-height:1.6; color:var(--ink-2); text-align:center; text-wrap:pretty}
.session-note b{color:var(--ink); font-weight:600}
.session-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.session-actions .btn{flex:1; min-width:0}
/* переключатель секций в техменю — во всю ширину модалки */
.dev-roles{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%}
.dev-roles button{justify-content:center; white-space:nowrap}
.dev-links{display:flex; flex-direction:column; gap:8px}
.dev-links .btn{width:100%; justify-content:center}
/* выбор специализации: поиск, список направлений, уровень кнопками */
.spec-search{position:relative; display:flex; align-items:center}
.spec-search svg{position:absolute; left:12px; width:16px; height:16px; color:var(--faint); pointer-events:none}
.spec-search .input{padding-left:36px}
.spec-search .input::-webkit-search-cancel-button{-webkit-appearance:none; appearance:none}
.pick{max-height:260px; margin:0 0 16px}
.pick__row{width:100%; font:inherit; text-align:left; color:var(--ink); font-size:13.5px}
.pick__row > span:first-child{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* выбранное направление — залито акцентом, ошибиться невозможно */
.pick__row.is-on{background:var(--solid); border-color:transparent; color:var(--solid-ink); font-weight:600}
.pick__row.is-on:hover{background:var(--solid-2); border-color:transparent}
.pick__check{display:none; margin-left:auto; flex:none; place-items:center}
.pick__check svg{width:16px; height:16px}
.pick__row.is-on .pick__check{display:grid}
.spec-other{margin-top:-4px}
.levels{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px}
.level{
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
height:54px; padding:0 6px; border:1px solid var(--line-strong); border-radius:10px;
background:var(--card); cursor:pointer; font:inherit; text-align:center;
transition:border-color var(--t-fast), background var(--t-fast)
}
.level b{font-size:13px; font-weight:600; color:var(--ink)}
.level i{font-style:normal; font-size:10.5px; color:var(--muted); white-space:nowrap}
.level:hover{border-color:var(--brand-300)}
.level.is-on{border-color:var(--brand-500); background:var(--brand-050)}
.level.is-on b{color:var(--brand-700)}
.level.is-on i{color:var(--brand-600)}
@media (max-width:560px){ .levels{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* профиль: название компании заказчик правит на месте, у исполнителя имя — текст */
.inline--title{
font-family:var(--display); font-size:27px; font-weight:700; letter-spacing:-.035em;
color:var(--ink); text-align:left; width:auto; max-width:100%; field-sizing:content;
padding:2px 8px; margin:0 -8px
}
.rows__i .inline{font-weight:450; color:var(--ink-2); font-size:13px}
.rows__i select.inline{text-align:right}
.skills{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
/* «о себе» и пустые блоки анкеты — обычный текст, без поля ввода */
.profile-text{margin:0; font-size:14px; line-height:1.6; color:var(--ink-2); white-space:pre-line}
/* профиль: плашка роли, табы ролей, подсказка о незаполненном */
.role-note{
display:flex; align-items:center; gap:16px; flex-wrap:wrap;
padding:16px 20px; margin-bottom:18px; border:1px solid var(--brand-200);
border-radius:var(--r-lg); background:var(--brand-050)
}
.role-note__t{flex:1; min-width:220px; display:flex; flex-direction:column; gap:3px}
.role-note__t b{font-size:14px; font-weight:600; letter-spacing:-.01em}
.role-note__t span{font-size:13px; color:var(--muted); line-height:1.45}
.profile-tabs{margin:0 0 18px -4px}
.role-hint{display:flex; flex-direction:column; gap:4px; margin-bottom:16px;
border-style:dashed; border-color:var(--line-strong); background:var(--card-2)}
.role-hint b{font-size:14px; font-weight:600}
.role-hint span{font-size:13px; color:var(--muted); line-height:1.45}
.profile-head{align-items:center; gap:16px}
.profile-head__meta{flex:1; min-width:0}
.profile-head__meta h1{margin:0}
.profile-head__meta p{margin:1px 0 0; color:var(--muted); font-size:13.5px}
.profile-head__meta p{display:flex; align-items:center; gap:7px}
/* тумблер рядом с ролью — открывает переключение роли */
.role-toggle{
display:grid; place-items:center; width:20px; height:20px; padding:0; border:0; border-radius:6px;
background:transparent; color:var(--faint); cursor:pointer;
transition:color var(--t-fast), background var(--t-fast)
}
.role-toggle svg{width:15px; height:15px}
.role-toggle:hover{color:var(--brand-600); background:var(--tint)}
/* выбор роли в модалке: роль одна, поэтому кружки, а не тумблеры */
.role-switch{display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line-2); cursor:pointer}
.role-switch:last-child{border-bottom:0}
.role-switch__t{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.role-switch__t b{font-size:14px; font-weight:600}
.role-switch__t i{font-style:normal; font-size:12.5px; color:var(--muted)}
.role-switch .switch{flex:none}
.switch--pick i{width:20px; height:20px; border-radius:99px; background:#fff; box-shadow:none;
border:1.8px solid var(--n-300); transition:border-color var(--t), background var(--t)}
.switch--pick i::after{top:4px; left:4px; width:8px; height:8px; background:#fff; box-shadow:none;
opacity:0; transition:opacity var(--t)}
.switch--pick input:checked + i{background:var(--brand-500); border-color:var(--brand-500)}
.switch--pick input:checked + i::after{transform:none; opacity:1}
.profile-head .page__actions{align-self:center; margin-left:auto}
.emp-profile-av{
position:relative; flex:none; width:56px; height:56px; padding:0; border:0; border-radius:99px;
overflow:hidden; cursor:pointer; background:transparent
}
.emp-profile-av:focus-visible{outline:2px solid var(--brand-300); outline-offset:2px}
.emp-profile-av__media{display:block; width:100%; height:100%}
.emp-profile-av__overlay{
position:absolute; inset:0; display:grid; place-items:center;
background:rgba(8,11,20,.55); color:#fff; opacity:0; transition:opacity .15s;
border-radius:99px; pointer-events:none
}
.emp-profile-av__overlay svg{width:22px; height:22px}
.emp-profile-av:hover .emp-profile-av__overlay,
.emp-profile-av:focus-visible .emp-profile-av__overlay{opacity:1}
.emp-profile-av .avatar{width:56px; height:56px; font-size:19px}
.emp-profile-av img{width:100%; height:100%; object-fit:cover; display:block; border-radius:99px}
@media (max-width:900px){
.employer-portal .sidebar{
top:var(--topbar); height:calc(100vh - var(--topbar))
}
.employer-portal .sidebar__head{display:flex}
.employer-portal .sidebar__scroll{padding-top:6px}
.employer-portal .crumbs{display:flex}
.employer-portal .topbar__brand{width:auto; padding-left:14px; padding-right:10px}
.employer-portal .topbar__content{min-width:0; padding-right:28px}
}
@media (max-width:760px){
.employer-portal{--content-pad-x:28px}
.employer-portal .view{padding-left:28px; padding-right:28px; min-width:0}
.employer-portal .topbar__content{padding-left:28px; padding-right:28px; min-width:0}
.emp-project__row{flex-wrap:wrap; gap:12px 14px; padding:16px 18px}
.emp-project__team{width:100%; margin-left:0; order:3; justify-content:flex-end}
}