/* Темы. Имя темы — data-theme, светлая/тёмная — data-mode (ставит theme.js).
   Каждая тема задаёт только фон, панели, текст и акцент; остальное выводится
   из --acc-rgb и --panel, поэтому переопределять нужно немного. */
:root{
  color-scheme:dark;
  --bg:#0a0b10; --panel:#12141b; --card:#191c25; --border:#23262f; --border2:#343845;
  --text:#eceef4; --dim:#9498ab; --dim2:#646879;
  --acc:#7c83ff; --acc2:#b18cff; --acc-rgb:124,131,255; --acc2-rgb:177,140,255;
  --ok:#3ddc97; --warn:#f6bd3c; --bad:#ff6b6b;
  --SA:#ff8a3d; --BE:#3ddc97; --FE:#5b9bff; --QA:#ff6fae; --AT:#2fd4e6;
  --DM:#ff6b6b; --BA:#f3d13a; --arch:#c084fc; --design:#2dd4bf;
  /* подложки: слабая заливка поверх фона */
  --soft:rgba(255,255,255,.055); --soft2:rgba(255,255,255,.03); --stripe:rgba(255,255,255,.014);
  --line:rgba(255,255,255,.04);
  --th:#14161e; --overlay:rgba(4,5,10,.72);
  --panel-stripe:#151821; --panel-hover:#1b1e2a; --icon-filter:invert(.6);
  --acc-soft:rgba(var(--acc-rgb),.14); --acc-line:rgba(var(--acc-rgb),.38); --acc-hover:rgba(var(--acc-rgb),.07);
  --acc-press:color-mix(in srgb,var(--acc) 88%,#000); --on-acc:#fff;
  --warn-soft:rgba(246,189,60,.09); --warn-line:rgba(246,189,60,.3); --warn-text:#f0cf7a;
  --shadow:0 18px 44px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.035);
  --hi:inset 0 1px 0 rgba(255,255,255,.045);
  --glow:0 6px 20px rgba(var(--acc-rgb),.28);
  --top-bg:color-mix(in srgb,var(--panel) 80%,transparent);
  --score-l:70%; --score-bg:.13;
  --bg-glow:radial-gradient(1200px 500px at 15% -10%,rgba(var(--acc-rgb),.09),transparent 60%),
    radial-gradient(900px 400px at 100% 0,rgba(var(--acc2-rgb),.06),transparent 60%);
}
:root[data-mode="light"]{
  color-scheme:light;
  --bg:#f5f6f9; --panel:#ffffff; --card:#f1f2f6; --border:#dfe1e8; --border2:#c2c6d2;
  --text:#15161c; --dim:#5b6072; --dim2:#8a8f9e;
  --acc:#4f46e5; --acc2:#7c3aed; --acc-rgb:79,70,229; --acc2-rgb:124,58,237;
  --ok:#16a34a; --warn:#f2a516; --bad:#dc2626;
  --SA:#c2410c; --BE:#15803d; --FE:#1d4ed8; --QA:#be185d; --AT:#0e7490;
  --DM:#b91c1c; --BA:#a16207; --arch:#7e22ce; --design:#0f766e;
  --soft:rgba(17,20,36,.05); --soft2:rgba(17,20,36,.028); --stripe:rgba(17,20,36,.022);
  --line:rgba(17,20,36,.06);
  --th:color-mix(in srgb,var(--panel) 60%,var(--card)); --overlay:rgba(22,24,34,.42);
  --panel-stripe:color-mix(in srgb,var(--panel) 70%,var(--card)); --panel-hover:color-mix(in srgb,var(--panel) 93%,var(--acc)); --icon-filter:none;
  --acc-soft:rgba(var(--acc-rgb),.10); --acc-line:rgba(var(--acc-rgb),.32); --acc-hover:rgba(var(--acc-rgb),.07);
  --acc-press:color-mix(in srgb,var(--acc) 86%,#000); --on-acc:#fff;
  --warn-soft:rgba(242,165,22,.12); --warn-line:rgba(242,165,22,.45); --warn-text:#a36b00;
  --shadow:0 10px 30px rgba(21,25,45,.14);
  --hi:none; --glow:0 6px 18px rgba(var(--acc-rgb),.22);
  --top-bg:color-mix(in srgb,var(--panel) 82%,transparent);
  --score-l:34%; --score-bg:.1;
  --bg-glow:none;
}

/* тёмные */
:root[data-theme="graphite"]{
  --bg:#121212; --panel:#1b1b1b; --card:#232323; --border:#2c2c2c; --border2:#3d3d3d;
  --text:#ededed; --dim:#9a9a9a; --dim2:#6b6b6b; --th:#181818; --panel-stripe:#1e1e1e; --panel-hover:#262626;
  --acc:#5aa9ff; --acc2:#8ec5ff; --acc-rgb:90,169,255; --acc2-rgb:142,197,255}
:root[data-theme="ocean"]{
  --bg:#06111c; --panel:#0b1826; --card:#102131; --border:#1a2d40; --border2:#274259;
  --text:#e4eef7; --dim:#8ea6bb; --dim2:#5c7286; --th:#0a1622; --panel-stripe:#0d1b2a; --panel-hover:#132537;
  --acc:#22d3ee; --acc2:#38bdf8; --acc-rgb:34,211,238; --acc2-rgb:56,189,248; --on-acc:#04222b; --acc-press:#0fb8d2}
:root[data-theme="forest"]{
  --bg:#0a120d; --panel:#111a14; --card:#17231b; --border:#213027; --border2:#2f4537;
  --text:#e6efe8; --dim:#93a89a; --dim2:#5f7466; --th:#0f1712; --panel-stripe:#131d17; --panel-hover:#1a2820;
  --acc:#4ade80; --acc2:#a3e635; --acc-rgb:74,222,128; --acc2-rgb:163,230,53; --on-acc:#052e12; --acc-press:#34c46a}
:root[data-theme="ember"]{
  --bg:#140e0b; --panel:#1c1411; --card:#251b17; --border:#33261f; --border2:#4a372d;
  --text:#f4ece6; --dim:#b39c8e; --dim2:#7d675a; --th:#181110; --panel-stripe:#1f1613; --panel-hover:#2a1e19;
  --acc:#fb923c; --acc2:#fbbf24; --acc-rgb:251,146,60; --acc2-rgb:251,191,36; --on-acc:#2b1300; --acc-press:#ea7c22}
:root[data-theme="plum"]{
  --bg:#120b1a; --panel:#1a1024; --card:#23172f; --border:#31233f; --border2:#463456;
  --text:#f0e9f7; --dim:#a898bb; --dim2:#736586; --th:#160d1f; --panel-stripe:#1d1328; --panel-hover:#281b36;
  --acc:#e879f9; --acc2:#c084fc; --acc-rgb:232,121,249; --acc2-rgb:192,132,252; --on-acc:#2a0632; --acc-press:#d95fea}
:root[data-theme="nord"]{
  --bg:#2e3440; --panel:#353b49; --card:#3b4252; --border:#434c5e; --border2:#4c566a;
  --text:#eceff4; --dim:#a7b1c2; --dim2:#7b869a; --th:#323947; --panel-stripe:#384050; --panel-hover:#3f4859;
  --acc:#88c0d0; --acc2:#81a1c1; --acc-rgb:136,192,208; --acc2-rgb:129,161,193; --on-acc:#1c2632; --acc-press:#6fb0c4;
  --ok:#a3be8c; --warn:#ebcb8b; --bad:#bf616a; --shadow:0 18px 44px rgba(0,0,0,.4)}
:root[data-theme="contrast"]{
  --bg:#000; --panel:#000; --card:#111; --border:#3a3a3a; --border2:#6a6a6a;
  --text:#fff; --dim:#c8c8c8; --dim2:#9a9a9a; --th:#000; --panel-stripe:#0a0a0a; --panel-hover:#1a1a1a;
  --soft:rgba(255,255,255,.1); --soft2:rgba(255,255,255,.06); --stripe:rgba(255,255,255,.03); --line:rgba(255,255,255,.1);
  --acc:#ffd60a; --acc2:#ffea7a; --acc-rgb:255,214,10; --acc2-rgb:255,234,122; --on-acc:#000; --acc-press:#e6c000;
  --ok:#5cff9d; --warn:#ffcf4a; --bad:#ff7a7a; --bg-glow:none; --score-l:76%}

/* светлые */
:root[data-theme="paper"]{
  --bg:#f3ede2; --panel:#fbf7ef; --card:#efe8da; --border:#e0d6c4; --border2:#c9bca4;
  --text:#2b2418; --dim:#6b5f4c; --dim2:#98897a;
  --acc:#a85a1e; --acc2:#8a4b17; --acc-rgb:168,90,30; --acc2-rgb:138,75,23;
  --soft:rgba(60,40,10,.06); --soft2:rgba(60,40,10,.035); --stripe:rgba(60,40,10,.025); --line:rgba(60,40,10,.07)}
:root[data-theme="mint"]{
  --bg:#eef6f1; --panel:#ffffff; --card:#e6f1ea; --border:#d3e2d8; --border2:#b1c8b9;
  --text:#132019; --dim:#516459; --dim2:#7f9287;
  --acc:#0f766e; --acc2:#15803d; --acc-rgb:15,118,110; --acc2-rgb:21,128,61}
:root[data-theme="sky"]{
  --bg:#eef3fa; --panel:#ffffff; --card:#e5edf8; --border:#d2dded; --border2:#adbfd9;
  --text:#121a28; --dim:#51607a; --dim2:#8090a8;
  --acc:#0369a1; --acc2:#1d4ed8; --acc-rgb:3,105,161; --acc2-rgb:29,78,216}
:root[data-theme="rose"]{
  --bg:#fbf1f4; --panel:#ffffff; --card:#f7e6ec; --border:#ead3dc; --border2:#d4adbd;
  --text:#24141a; --dim:#6c515c; --dim2:#9c8089;
  --acc:#be185d; --acc2:#9d174d; --acc-rgb:190,24,93; --acc2-rgb:157,23,77}
:root[data-theme="solar"]{
  --bg:#fdf6e3; --panel:#fffbf0; --card:#eee8d5; --border:#e3dcc3; --border2:#c9c0a3;
  --text:#073642; --dim:#586e75; --dim2:#93a1a1;
  --acc:#268bd2; --acc2:#2aa198; --acc-rgb:38,139,210; --acc2-rgb:42,161,152;
  --ok:#859900; --warn:#b58900; --bad:#dc322f;
  --soft:rgba(7,54,66,.06); --soft2:rgba(7,54,66,.035); --stripe:rgba(7,54,66,.025); --line:rgba(7,54,66,.07)}
:root[data-theme="lavender"]{
  --bg:#f3f0fb; --panel:#ffffff; --card:#ebe6f8; --border:#dbd3ee; --border2:#b9acd9;
  --text:#1a1426; --dim:#5b5270; --dim2:#8a8099;
  --acc:#7c3aed; --acc2:#db2777; --acc-rgb:124,58,237; --acc2-rgb:219,39,119}

*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--text);font-size:14px;line-height:1.45;
  background-image:var(--bg-glow);
  background-attachment:fixed;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
.mono,.num,input[type=number]{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
a{color:var(--acc);text-decoration:none}
a:hover{color:var(--acc2)}
input,select,textarea,button{font:inherit;color:inherit}
svg{flex-shrink:0}

/* боковая панель с меню */
.side{position:sticky;top:0;height:100vh;width:232px;flex:none;display:flex;flex-direction:column;gap:14px;
  padding:16px 12px 12px;background:var(--top-bg);border-right:1px solid var(--border);
  backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);z-index:10}
.brand{display:flex;align-items:center;gap:10px;padding:2px 6px;font-weight:800;font-size:14px;letter-spacing:.06em;white-space:nowrap}
.brand>span{background:linear-gradient(90deg,var(--text) 0,var(--text) 34%,var(--acc) 60%,var(--acc2) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.brand i{font-style:normal}
.brand-mark{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:12px;letter-spacing:0;
  background:linear-gradient(135deg,var(--acc),var(--acc2));color:var(--on-acc);box-shadow:var(--glow)}
a.brand{text-decoration:none;cursor:pointer}
.side .dir-pick{width:100%;max-width:none;justify-content:flex-start}
.side>.nav{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;margin:0 -4px;padding:0 4px}
.side>.nav::-webkit-scrollbar{display:none}
.nav{display:flex;flex-direction:column}
.nav-grp{display:flex;flex-direction:column;gap:2px}
.nav-grp+.nav-grp{margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.nav a{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:8px;color:var(--dim);white-space:nowrap;
  transition:color .12s,background .12s}
.nav a svg{opacity:.85}
.nav a:hover{color:var(--text);background:var(--soft)}
.nav a.on{background:var(--acc-soft);color:var(--acc);font-weight:600}
.nav a.on svg{opacity:1}
:root[data-mode="light"] .nav a.on{color:var(--acc-press)}
.side-foot{display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:1px solid var(--border)}
.who{display:flex;align-items:center;gap:9px;padding:8px 6px 8px 8px;border-radius:10px;
  background:var(--soft2);border:1px solid var(--border)}
.who-name{flex:1;min-width:0;line-height:1.25;font-size:13px}
.who-name>div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who .ava{width:28px;height:28px;font-size:11.5px}
.who a{color:inherit;text-decoration:none}
.who .theme-btn{width:28px;height:28px;border-color:transparent;background:none}
/* панель, свёрнутая до иконок */
.side.folded{width:64px;padding-left:10px;padding-right:10px}
.side.folded :is(.brand>span,.nav a span,.who-name,.dir-pick,.unsaved){display:none}
.side.folded .brand{padding:2px 7px}
.side.folded .nav a{justify-content:center;padding:9px 0}
.side.folded .who{flex-direction:column;padding:6px 0;gap:6px;background:none;border:0}
/* правку не принял сервер и перечитать не вышло: на экране прежние данные */
.unsaved{font-size:12px;color:var(--bad);white-space:nowrap}
.ava{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:var(--on-acc);background:linear-gradient(135deg,var(--acc),var(--acc2));
  box-shadow:0 0 0 2px rgba(var(--acc-rgb),.18);position:relative;overflow:hidden;flex-shrink:0}
.ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.mcard .head{display:flex;align-items:center;gap:8px}
.mcard .head .ava{width:26px;height:26px;font-size:10px;box-shadow:none}
.mcard .head a{flex:1;min-width:0}
.mcard .head a.ext{flex:none;font-size:10.5px;font-weight:600;color:var(--dim2);letter-spacing:.02em}
.mcard .head a.ext:hover{color:var(--acc)}

/* выбор темы */
.theme-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:8px;background:var(--soft2);border:1px solid var(--border);color:var(--dim);cursor:pointer;
  transition:color .12s,border-color .12s,background .12s}
.theme-btn:hover{color:var(--text);border-color:var(--border2);background:var(--soft)}
.theme-menu{min-width:236px;display:grid;grid-template-columns:1fr 1fr;gap:0 4px}
.theme-menu .grp{grid-column:1/-1;padding:6px 10px 3px;font-size:10.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dim2)}
.menu-item.theme-item{display:flex;align-items:center;gap:8px;padding:6px 10px}
.theme-item .sw{width:16px;height:16px;border-radius:50%;flex-shrink:0;
  border:1px solid rgba(128,128,128,.4);
  background:linear-gradient(135deg,var(--sw-bg) 50%,var(--sw-acc) 50%)}
.menu-item.theme-item.on{background:var(--acc-soft);color:var(--acc);font-weight:600}
.theme-btn.float{position:fixed;top:16px;right:16px;z-index:5}

/* общие куски */
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 22px 10px}
.bar.wrap{flex-wrap:wrap;row-gap:8px}
.tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.stats{display:flex;gap:34px}
.stat b{display:block;font-size:22px;font-weight:700;line-height:1.15;letter-spacing:-.02em;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.stat span{display:block;font-size:11px;color:var(--dim2);letter-spacing:.07em;margin-bottom:3px}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:12px;box-shadow:var(--hi)}
/* Файл тащат мышкой: пока он над этим местом, рамка показывает, куда он ляжет. */
[data-drop].dropping{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
[data-drop].dropping *{pointer-events:none}
/* Кнопки — три вида на всю систему, одной высоты:
   обычная (.btn)      — фон панели, рамка, текст обычного цвета;
   основная (.btn.pri) — плоская заливка цветом темы, одна на блок;
   тихая (.btn.ghost, .btn.x) — без рамки, для действий в строках; «×» при наведении краснеет.
   Мелкая (.btn.sm) — для строк инструментов, где кнопок много. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:32px;padding:5px 12px;border-radius:8px;
  background:var(--panel);border:1px solid var(--border);color:var(--text);font:inherit;font-size:13px;font-weight:500;
  line-height:1.25;cursor:pointer;white-space:nowrap;box-shadow:0 1px 0 var(--line);
  transition:color .12s,border-color .12s,background .12s,box-shadow .12s}
.btn:hover{border-color:var(--border2);background:color-mix(in srgb,var(--panel) 92%,var(--text))}
.btn:active{transform:translateY(.5px)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--acc-soft);border-color:var(--acc)}
.btn:disabled,.btn[disabled]{opacity:.45;cursor:default;pointer-events:none}
.btn.pri{background:var(--acc);border-color:var(--acc);color:var(--on-acc);font-weight:600;box-shadow:0 1px 2px rgba(var(--acc-rgb),.25)}
.btn.pri:hover{background:var(--acc-press);border-color:var(--acc-press);color:var(--on-acc)}
.btn.pri:focus-visible{box-shadow:0 0 0 3px var(--acc-soft)}
.btn.ghost,.btn.x{background:none;border-color:transparent;box-shadow:none;color:var(--dim)}
.btn.ghost:hover{background:var(--soft);color:var(--text);border-color:transparent}
.btn.x{width:28px;min-height:28px;height:28px;padding:0;font-size:16px;font-weight:400;color:var(--dim2)}
.btn.x:hover{background:color-mix(in srgb,var(--bad) 12%,transparent);color:var(--bad);border-color:transparent}
.btn.ico{width:32px;padding:0;line-height:0}
.btn.sm{min-height:28px;padding:4px 10px;font-size:12.5px;gap:5px}
.btn.sm svg{width:14px;height:14px;opacity:.85}
.btn.sm.pri svg{opacity:1}
.btn.ico.sm{width:28px;padding:0}
select.btn.sm{padding:0 26px 0 8px}
.btn.on{background:var(--acc-soft);border-color:var(--acc-line);color:var(--acc);font-weight:600;box-shadow:none}
.field{display:flex;align-items:center;gap:7px;padding:7px 10px;border-radius:8px;
  background:var(--soft2);border:1px solid var(--border);transition:border-color .12s,box-shadow .12s,background .12s}
.field:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft);background:var(--soft)}
.field input{background:none;border:none;outline:none;width:100%;font-size:13.5px}
.field input::placeholder{color:var(--dim2)}
.chip{display:inline-flex;align-items:center;height:17px;padding:0 7px;border-radius:9px;font-size:10.5px;font-weight:600;line-height:1;white-space:nowrap;letter-spacing:.02em}
.muted{color:var(--dim2)}
.dim{color:var(--dim)}
.num{font-variant-numeric:tabular-nums;text-align:right}
/* Балл оценки: плашка с цветной цифрой, оттенок --h от 0 (красный) через янтарный до 150 (зелёный),
   см. hue() в screens/assessments.mjs. Ячейку целиком не красим: на тёмном фоне заливка мутнеет */
.tbl td.score{text-align:center;padding:0 5px}
.tbl td.score.total{text-align:right;padding-right:9px}
.pt{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:22px;padding:0 8px;
  border-radius:7px;font-weight:600;font-size:12.5px;font-variant-numeric:tabular-nums;
  color:hsl(var(--h) 65% var(--score-l));background:hsl(var(--h) 60% 50% / var(--score-bg));
  box-shadow:inset 0 0 0 1px hsl(var(--h) 60% 50% / .28)}
.pt.total{min-width:50px;font-size:13px;font-weight:700}
/* колонки критериев одной ширины — по самому длинному заголовку */
.tbl th.crit{width:104px;min-width:104px}
.note{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:9px;font-size:13px;
  background:var(--soft2);border:1px solid var(--border);color:var(--dim)}
.note.warn{background:var(--warn-soft);border-color:var(--warn-line);color:var(--warn-text)}

/* таблица */
.tbl{width:100%;border-collapse:collapse}
.tbl th{position:sticky;top:0;background:var(--th);text-align:left;font-size:10.5px;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;color:var(--dim2);padding:8px 9px;
  border-bottom:1px solid var(--border);white-space:nowrap}
.tbl td{padding:0 9px;height:32px;font-size:13px;border-bottom:1px solid var(--line);
  white-space:nowrap}
.tbl tbody tr:nth-child(even){background:var(--stripe)}
.tbl tbody tr{transition:background .08s}
.tbl tbody tr:hover{background:var(--acc-hover)}
.scroll{overflow:auto;flex:1;min-height:0}

/* доска команд */
.board{display:flex;gap:14px;padding:2px 22px 22px;align-items:flex-start;overflow-x:auto}
.col{display:flex;flex-direction:column;width:264px;flex-shrink:0;background:var(--panel);
  border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:var(--hi)}
.col-head{padding:12px 13px 11px;border-bottom:1px solid var(--border);background:var(--soft2)}
.mix{display:flex;gap:2px;margin-top:8px}
.mix i{height:3px;border-radius:2px}
.cards{display:flex;flex-direction:column;gap:6px;padding:10px;min-height:60px}
.cards.over{background:var(--acc-soft)}
.mcard{position:relative;display:flex;flex-direction:column;gap:6px;padding:9px 11px;border-radius:9px;
  background:var(--card);border:1px solid var(--border);border-left:2.5px solid var(--dim);cursor:grab;
  box-shadow:var(--hi);transition:border-color .12s,box-shadow .12s,transform .12s}
.mcard:hover{border-color:var(--border2);border-left-color:inherit;box-shadow:var(--hi),0 6px 16px rgba(0,0,0,.25)}
:root[data-mode="light"] .mcard:hover{box-shadow:0 6px 16px rgba(21,25,45,.08)}
.mcard.drag{opacity:.4}
.mcard .badges{display:flex;gap:4px;flex-wrap:wrap}
.mcard a{color:var(--text);font-size:13.5px;font-weight:500}
.add{display:flex;align-items:center;justify-content:center;gap:5px;padding:8px;border:1px dashed var(--border2);
  border-radius:9px;color:var(--dim2);font-size:12.5px;cursor:pointer}
.add:hover{color:var(--dim);border-color:var(--border2)}

/* карточка сотрудника */
.grid5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:17px 22px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px 22px}
.grid4>.attr{justify-content:flex-end}
.grid5>.attr{justify-content:flex-end}
/* атрибуты в карточке: шесть колонок, теснее и мельче */
.grid5.tight{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px 14px}
.grid5.tight>.attr{gap:1px}
.grid5.tight>.attr>span{font-size:10px}
.grid5.tight .attr input,.grid5.tight .attr select{font-size:13px;padding:3px 6px;margin-left:-6px}
.grid5.tight .attr select{background-position:calc(100% - 12px) 9px,calc(100% - 7px) 9px;padding-right:20px}
.grid-line{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px 10px}  /* число колонок ставится на месте: по критериям компетенции */
.flip{margin-left:3px;color:var(--dim2);font-weight:600;cursor:help}
.kv span{display:block;font-size:11px;color:var(--dim2);letter-spacing:.04em}
.kv b{display:block;font-size:14px;font-weight:400;margin-top:4px}
.kv i{display:block;font-size:11px;color:var(--dim2);margin-top:2px;font-style:normal}
.sect{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}
.sect h2{font-size:13.5px;font-weight:600}
.row{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:9px;
  background:var(--soft2);border:1px solid var(--border)}
.row.cur{background:var(--acc-soft);border-color:var(--acc-line)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--dim2);flex-shrink:0}
.row.cur .dot{background:var(--acc)}
.stack{display:flex;flex-direction:column;gap:4px}

/* правка прямо в таблице */
.cell-in{width:100%;background:none;border:1px solid transparent;border-radius:5px;
  padding:4px 6px;text-align:right;font-size:14px;font-family:ui-monospace,Menlo,monospace}
.cell-in:hover{border-color:var(--border)}
.cell-in:focus{outline:none;border-color:var(--acc);background:var(--soft)}
.cell-in.zero{color:var(--dim2)}
.col.free{border-style:dashed}
/* варианты распределения */
.variants{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:8px 22px 0;border-bottom:1px solid var(--border)}
.variants .tab{padding:8px 12px 10px;font-size:13px;white-space:nowrap}
.variants .tab-add{font-size:18px;line-height:1;padding:6px 10px 8px;color:var(--dim2)}
.variants .tab-add:hover{color:var(--acc)}
.variants .tab-new{gap:4px;padding:5px 6px 6px 8px;border-bottom-color:var(--acc)}
.variants .tab-new input{width:190px;background:none;border:none;outline:none;color:var(--text);font-size:13px;padding:2px 0}
.variants .tab-new input::placeholder{color:var(--dim2)}
.variants .tab-new button{background:none;border:none;cursor:pointer;font-size:16px;line-height:1;padding:0 4px}
.variants .tab-new button:hover{color:var(--text)}
.variants .tab.applied{color:var(--dim)}
.variants .tab .ok{font-style:normal;color:var(--ok, var(--acc));margin-right:5px}
.vstate{font-size:12px;color:var(--warn-text);white-space:nowrap}
.vstate.done{color:var(--dim)}
.by-pick{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dim2);white-space:nowrap}
.by-pick select{font-size:13px}
.col-head .one-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.col-head .title[draggable="true"]{cursor:grab}
.col.col-drag{opacity:.45}
.col.col-before{box-shadow:-4px 0 0 -1px var(--acc)}
.col.col-after{box-shadow:4px 0 0 -1px var(--acc)}
.btn.undo{min-height:28px;padding:4px 10px;font-size:12px}
.btn.undo:disabled{opacity:.4;cursor:default}
.mcard.moved{border-color:var(--warn-line);background:color-mix(in srgb,var(--warn-soft) 60%,var(--card))}
.mcard .kvs{display:flex;flex-direction:column;gap:2px;font-size:11.5px}
.mcard .kvs div{display:flex;justify-content:space-between;gap:8px}
.mcard .kvs span{color:var(--dim2);flex-shrink:0}
.mcard .kvs b{font-weight:500;color:var(--dim);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mcard .from{font-size:11px;color:var(--warn-text)}
/* переименование команды на месте */
.rename{display:none;gap:6px}
.rename.on{display:flex}
.col-head.editing .title{display:none}
.col-head.editing .rename{display:flex}
select.btn{padding:5px 10px}

/* правка атрибутов прямо в карточке */
.attr{display:flex;flex-direction:column;gap:4px;min-width:0}
.attr>span{font-size:11px;color:var(--dim2);letter-spacing:.04em}
.attr>i{font-size:11px;color:var(--dim2);font-style:normal}
/* «?» у названия критерия: расшифровка шкалы всплывает при наведении */
.q{position:relative;display:inline-block;vertical-align:-3px;margin-left:5px;width:15px;height:15px;border-radius:50%;font-size:10px;font-weight:600;
  line-height:15px;text-align:center;color:var(--dim);background:var(--soft);border:1px solid var(--border);
  cursor:help;letter-spacing:0;outline:none}
.q:hover,.q:focus{color:var(--on-acc);background:var(--acc);border-color:var(--acc)}
.q>s{display:none;position:absolute;left:-6px;top:calc(100% + 7px);z-index:30;width:230px;padding:8px 10px;
  border-radius:7px;background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow);
  font-size:12.5px;font-weight:400;line-height:1.4;text-align:left;text-decoration:none;color:var(--text);
  white-space:normal;letter-spacing:0;pointer-events:none}
.q:hover>s,.q:focus>s{display:block}
.grid5 .attr:nth-child(5n) .q>s,.grid5 .attr:nth-child(5n-1) .q>s{left:auto;right:-6px}
.grid-line .attr:nth-last-child(-n+2) .q>s{left:auto;right:-6px}
.attr input,.attr select{width:100%;background:none;color:var(--text);font-size:14px;
  border:1px solid transparent;border-radius:6px;padding:5px 7px;margin-left:-7px}
.attr input::placeholder{color:var(--dim2)}
.attr input:hover,.attr select:hover{border-color:var(--border);background:var(--soft2)}
.attr input:focus,.attr select:focus{outline:none;border-color:var(--acc);background:var(--soft)}
.attr select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--dim2) 50%),
                   linear-gradient(135deg,var(--dim2) 50%,transparent 50%);
  background-position:calc(100% - 13px) 12px,calc(100% - 8px) 12px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:24px}
.attr select option{background:var(--card);color:var(--text)}
.attr input[type=date]::-webkit-calendar-picker-indicator{filter:var(--icon-filter)}
.save{opacity:.4;pointer-events:none;transition:opacity .15s}
form.dirty .save{opacity:1;pointer-events:auto}
form.dirty .save::after{content:' •'}
.saved{color:var(--ok);font-size:12px;opacity:0;transition:opacity .2s}
.saved.on{opacity:1}

/* ФИО — закреплённая первая колонка, не уже 330px, длинные имена растягивают её */
.tbl th:first-child,.tbl td:first-child{position:sticky;left:0;z-index:2}
.tbl th:first-child{width:330px;min-width:330px}
.tbl td:first-child{min-width:330px}
.tbl th:first-child{z-index:4;background:var(--th)}
.tbl td:first-child{background:var(--panel)}
.tbl tbody tr:nth-child(even) td:first-child{background:var(--panel-stripe)}
.tbl tbody tr:hover td:first-child{background:var(--panel-hover)}
/* первая колонка бывает не именем, а галочкой — тогда широкой ей быть незачем */
.tbl th.pick,.tbl td.pick{width:36px;min-width:36px}
.tbl th:first-child::after,.tbl td:first-child::after{content:'';position:absolute;
  top:0;right:0;bottom:0;width:1px;background:var(--border)}

/* многострочное поле комментария выглядит как текст, пока его не тронули */
.attr textarea{width:100%;background:none;color:var(--text);font:inherit;font-size:14px;
  line-height:1.55;border:1px solid transparent;border-radius:6px;padding:5px 7px;
  margin-left:-7px;resize:none;overflow:hidden;min-height:30px}
.attr textarea:hover{border-color:var(--border);background:var(--soft2)}
.attr textarea:focus{outline:none;border-color:var(--acc);background:var(--soft)}

/* ФИО правится прямо в шапке карточки */
.title-in{width:100%;background:none;color:var(--text);font-size:21px;font-weight:700;
  border:1px solid transparent;border-radius:7px;padding:3px 8px;margin-left:-8px}
.title-in:hover{border-color:var(--border);background:var(--soft2)}
.title-in:focus{outline:none;border-color:var(--acc);background:var(--soft)}
.title-in[readonly]{border-color:transparent;background:none}

/* условия фильтра */
.cond{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border-radius:6px;
  background:var(--acc-soft);border:1px solid var(--acc-line);font-size:13px}
.cond b{font-weight:600}
.cond i{color:var(--dim);font-style:normal;font-size:12px}
.cond u{text-decoration:none;color:var(--acc);font-weight:600;white-space:nowrap}
.cond a{color:var(--dim2);font-size:15px;line-height:1;margin-left:2px}
.cond a:hover{color:var(--bad)}

/* карточки проектов */
.cards-grid{display:grid;gap:14px;padding:0 22px 22px;
  grid-template-columns:repeat(auto-fill,minmax(430px,1fr))}
.proj{display:flex;flex-direction:column;padding:16px 18px 14px}
.proj-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.proj-money{margin-top:13px;padding:12px 14px;border-radius:8px;background:var(--soft2);
  border:1px solid var(--border)}
.proj-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;margin-top:14px}
.proj-foot{display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--border)}

/* ставка месяца мелкой подписью под днями */
.cell-rate{text-align:right;font-size:10px;color:var(--dim2);padding:0 36px 2px 6px;
  font-family:ui-monospace,Menlo,monospace;line-height:1.2;min-height:12px;
  white-space:nowrap;overflow:hidden}
.cell-rate.changed{color:var(--warn);font-weight:600}
.tbl td:has(.cell-in){height:46px;min-width:74px}
.cell-in{min-width:0}

/* вкладки в карточке сотрудника */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:-13px;padding:0 2px}
.tab{background:none;border:none;border-bottom:2px solid transparent;color:var(--dim);
  font-size:14px;padding:9px 14px;cursor:pointer;display:flex;align-items:center;gap:7px}
.tab:hover{color:var(--text)}
.tab.on{color:var(--text);font-weight:600;border-bottom-color:var(--acc)}
.tab .muted{font-size:12px}
.tab-body{margin-top:13px}

/* кнопки продления в бюджете */
.btn.step{min-height:26px;padding:2px 8px;font-size:15px;line-height:1.2;min-width:28px;justify-content:center}

/* своё окно подтверждения */
#ask{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center}
.ask-back{position:absolute;inset:0;background:var(--overlay);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.ask-box{position:relative;width:460px;max-width:calc(100vw - 40px);padding:22px 24px;
  box-shadow:0 18px 48px rgba(0,0,0,.55)}
.ask-text{font-size:14px;line-height:1.55;white-space:pre-line}
.ask-row{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}

/* плюс и минус внутри клетки бюджета */
.cell{position:relative}
.cell-top{display:block;position:relative}
.cell-top .cell-in{width:100%;display:block;padding-right:36px;padding-left:4px}
.mini{position:absolute;top:0;bottom:0;margin:auto 0;width:16px;height:18px;padding:0;
  border:none;border-radius:4px;background:var(--panel);color:var(--dim2);
  font:14px/1 ui-monospace,Menlo,monospace;display:flex;align-items:center;justify-content:center;
  cursor:pointer;opacity:0;transition:opacity .12s;z-index:3;outline:none}
.mini:first-of-type{right:19px}
.mini:last-of-type{right:2px}
.cell:hover .mini{opacity:1}
.mini:hover{background:var(--soft);color:var(--text)}
.mini:focus,.mini:focus-visible{outline:none;box-shadow:none}
/* стрелки порядка в панелях «Управления»: у каждой строки свои, видны всегда */
.fk-tail .mini{position:static;opacity:1;width:20px;height:22px;background:none}
.fk-tail .mini:disabled{color:var(--border);cursor:default;background:none}

/* ФИО в списке сотрудников — ссылка на карточку во всю ширину ячейки */
.fio-link{flex:1;min-width:0;color:var(--text);text-decoration:none;font-size:13px;padding:2px 0}
.fio-link:hover{color:var(--acc);text-decoration:underline}

/* правка прямо в таблице */
.ed{width:100%;min-width:64px;background:none;color:var(--text);font:inherit;font-size:13px;
  border:1px solid transparent;border-radius:5px;padding:2px 5px;margin:0 -5px}
.ed:hover:not([readonly]):not(:disabled){border-color:var(--border);background:#ffffff05}
.ed:focus{outline:none;border-color:var(--acc);background:#ffffff08}
.ed.good{border-color:var(--ok)}
.ed.bad{border-color:var(--bad)}
.ed.need{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 8%,transparent)}
select.ed{appearance:none;cursor:pointer}
select.ed option{background:var(--card)}

/* меню из трёх точек */
.menu{position:relative;display:inline-block}
.btn.dots{min-height:28px;padding:0 8px;font-size:16px;line-height:1;background:none;border-color:transparent;box-shadow:none;color:var(--dim)}
.btn.dots:hover{background:var(--soft);color:var(--text);border-color:transparent}
.menu-list{position:fixed;z-index:60;min-width:210px;
  background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:5px;
  box-shadow:var(--shadow);border-radius:10px}
.menu-item{display:block;width:100%;text-align:left;padding:8px 10px;border:none;
  border-radius:7px;background:none;color:var(--text);font:inherit;font-size:13px;cursor:pointer}
.menu-item:hover{background:var(--soft);color:var(--text)}
.menu-item.danger{color:var(--bad)}

/* заголовок колонки: клик по названию сортирует (▲, ▼, потом без сортировки),
   воронка открывает фильтр по значениям этой колонки — окно .col-pop под заголовком */
.th-in{display:inline-flex;align-items:center;gap:3px}
/* свободная ширина уходит в последнюю, служебную колонку — остальные по содержимому */
.tbl.people th:last-child{width:100%}
.th-sort{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;letter-spacing:inherit;
  text-transform:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:4px;border-radius:4px}
.th-sort:hover,.th-sort.on{color:var(--text)}
.th-sort i{font-style:normal;font-size:8px;color:var(--acc);line-height:1}
.th-filter{background:none;border:none;padding:2px;margin:0;line-height:0;color:var(--dim2);cursor:pointer;
  border-radius:4px;opacity:.5;transition:opacity .12s,color .12s}
.th-filter svg{width:11px;height:11px}
.tbl th:hover .th-filter,.th-filter.on{opacity:1}
.th-filter:hover{color:var(--text);background:var(--soft)}
.th-filter.on{color:var(--acc)}
.th-filter.on svg{fill:currentColor}
.pop-back{position:fixed;inset:0;z-index:15}
.col-pop{position:fixed;z-index:16;width:280px;padding:12px;box-shadow:var(--shadow)}
.pop-list{max-height:300px;overflow:auto;margin:0 -4px}
.pop-list .col-row{cursor:pointer}

/* заголовок группы */
.tbl tr.grp td{background:#ffffff09;height:32px;font-size:13px;
  position:sticky;top:29px;z-index:3}

/* заголовок таблицы отделён тенью, когда список прокручен */
.tbl thead th{box-shadow:0 1px 0 var(--border)}
.scroll{scrollbar-width:thin}
/* стрелка у выпадающих списков в таблице */
select.ed{padding-right:16px;
  background-image:linear-gradient(45deg,transparent 50%,var(--dim2) 50%),
                   linear-gradient(135deg,var(--dim2) 50%,transparent 50%);
  background-position:calc(100% - 9px) 11px,calc(100% - 5px) 11px;
  background-size:4px 4px,4px 4px;background-repeat:no-repeat}
select.ed:hover{background-color:#ffffff05}

/* каждой колонке — свой минимум, чтобы текст не сжимался в кашу */
.tbl.people [data-col=competency]{min-width:125px}
.tbl.people [data-col=team_role]{min-width:130px}
.tbl.people [data-col=project]{min-width:120px}
.tbl.people [data-col=rate]{min-width:140px}
.tbl.people [data-col=rate_from]{min-width:130px}
.tbl.people [data-col=vendor]{min-width:260px}
.tbl.people [data-col=team]{min-width:190px}
.tbl.people [data-col=ap_team]{min-width:290px}
.tbl.people [data-col=employment]{min-width:130px}
.tbl.people [data-col=position]{min-width:250px}
.tbl.people [data-col=pernr],.tbl [data-col=login]{min-width:130px}
.tbl.people [data-col=paid_to],.tbl [data-col=prolongation]{min-width:160px}
.tbl.people [data-col=citizenship]{min-width:150px}

/* ===== свои элементы форм вместо встроенных в браузер ===== */
.ui-native{display:none!important}

/* кнопка выпадающего списка: наследует вид .btn / .ed / поля карточки */
.sel{display:inline-flex;align-items:center;gap:6px;text-align:left;cursor:pointer;
  background:none;border:1px solid transparent;border-radius:6px;color:var(--text);
  font:inherit;font-size:14px;padding:5px 7px;min-width:0;max-width:100%}
.sel .sel-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sel .sel-empty{color:var(--dim2)}
.sel .sel-chev{color:var(--dim2);flex-shrink:0;transition:transform .12s}
.sel:hover:not(:disabled){border-color:var(--border);background:var(--soft2)}
.sel:focus-visible{outline:none;border-color:var(--acc);background:var(--soft)}
.sel:disabled{cursor:default;color:var(--text)}
.sel:disabled .sel-chev{display:none}
.attr .sel{width:100%;margin-left:-7px}
.sel.btn{padding:7px 10px;font-size:13px;color:var(--dim);background:var(--card);border-color:var(--border)}
.sel.btn:hover:not(:disabled){color:var(--text);border-color:var(--border2)}
.sel.btn.on{background:var(--acc-soft);border-color:var(--acc-line);color:var(--acc);font-weight:600}
.sel.btn .sel-empty{color:inherit}
.sel.ed{width:100%;min-width:64px;font-size:13px;padding:2px 5px;margin:0 -5px;border-radius:5px;gap:4px}
.sel.ed .sel-chev{width:10px;height:10px;opacity:0;transition:opacity .12s}
.sel.ed:hover .sel-chev,.sel.ed:focus-visible .sel-chev{opacity:1}
.sel.ed:hover:not(:disabled){background:#ffffff05}
.sel.ed.good{border-color:var(--ok)}
.sel.ed.bad{border-color:var(--bad)}
.sel.ed .sel-empty{color:var(--dim2)}

/* сам список */
.sel-pop{position:fixed;z-index:70;padding:5px;box-shadow:var(--shadow);max-width:420px;border-radius:10px;
  animation:pop .1s ease-out;outline:none}
@keyframes pop{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.sel-find{padding:2px 2px 6px}
.sel-find input{width:100%;background:var(--card);border:1px solid var(--border);border-radius:6px;
  padding:6px 9px;font-size:13px;outline:none;color:var(--text)}
.sel-find input:focus{border-color:var(--acc)}
.sel-find input::placeholder{color:var(--dim2)}
.sel-list{max-height:300px;overflow:auto;scrollbar-width:thin}
.sel-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 10px;
  border-radius:6px;font-size:13px;cursor:pointer;color:var(--text);white-space:nowrap}
.sel-opt span{overflow:hidden;text-overflow:ellipsis}
.sel-opt.blank{color:var(--dim2)}
.sel-opt.act{background:var(--soft)}
.sel-opt{transition:background .08s}
.sel-opt.cur{color:var(--acc);font-weight:600}
.sel-opt.cur svg{color:var(--acc);flex-shrink:0}
.sel-none{padding:9px 10px;font-size:13px;color:var(--dim2)}

/* список с галочками (выбор нескольких) */
.picklist{display:flex;flex-direction:column;gap:1px;max-height:230px;overflow:auto;padding:4px;
  border:1px solid var(--border);border-radius:6px;background:var(--card);scrollbar-width:thin}
.pick-opt{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:5px;font-size:13.5px;
  cursor:pointer;user-select:none}
.pick-opt:hover{background:var(--soft)}
.pick-opt.on{color:var(--text)}
.pick-opt.off{cursor:default;color:var(--dim2)}
.pick-opt.off:hover{background:none}
.pick-opt.off .ck{visibility:hidden}
.pick-note{margin-left:auto;padding-left:10px;font-size:12.5px;color:var(--dim2);white-space:nowrap}

/* галочка: нарисована сама, одна на всю систему */
.ck,input[type=checkbox]{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;
  justify-content:center;width:16px;height:16px;flex-shrink:0;border-radius:4px;cursor:pointer;
  background:var(--card);border:1.5px solid var(--border2);color:var(--on-acc);margin:0;
  transition:background .1s,border-color .1s;vertical-align:middle;font-style:normal}
.ck svg{opacity:0;transform:scale(.6);transition:.1s}
.pick-opt.on .ck{background:var(--acc);border-color:var(--acc)}
.pick-opt.on .ck svg{opacity:1;transform:none}
input[type=checkbox]:hover:not(:disabled){border-color:var(--acc)}
input[type=checkbox]:focus-visible{outline:none;box-shadow:0 0 0 3px var(--acc-soft)}
input[type=checkbox]::before{content:'';width:9px;height:5px;border:2px solid var(--on-acc);
  border-top:none;border-right:none;transform:translateY(-1px) rotate(-45deg) scale(0);transition:transform .1s}
input[type=checkbox]:checked{background:var(--acc);border-color:var(--acc)}
input[type=checkbox]:checked::before{transform:translateY(-1px) rotate(-45deg) scale(1)}
input[type=checkbox]:disabled{opacity:.6;cursor:default}

/* переключатель — та же галочка, но в виде ползунка */
input[type=checkbox].toggle{width:30px;height:17px;border-radius:10px;position:relative;
  border-color:var(--border2);background:var(--soft)}
input[type=checkbox].toggle::before{content:'';position:absolute;top:2px;left:2px;width:11px;height:11px;
  border:none;border-radius:50%;background:var(--dim);transform:none;transition:left .12s,background .12s}
input[type=checkbox].toggle:checked{background:var(--acc);border-color:var(--acc)}
input[type=checkbox].toggle:checked::before{left:15px;background:var(--on-acc)}

/* число: без стрелок браузера */
input[type=number]{appearance:textfield;-moz-appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{
  -webkit-appearance:none;margin:0}

/* дата: текст + свой календарь */
.date{display:inline-flex;align-items:center;gap:4px;width:100%;position:relative}
.date-in{flex:1;min-width:0;width:100%;background:none;color:var(--text);font:inherit;font-size:14px;
  border:1px solid transparent;border-radius:6px;padding:5px 30px 5px 7px;
  font-variant-numeric:tabular-nums}
.attr .date{margin-left:-7px}
.attr .date-in{margin-left:0}  /* сдвиг уже у обёртки, второй раз не нужен */
.grid5.tight .attr .date{margin-left:-6px}
.grid5.tight .attr .date-in{margin-left:0;padding-right:30px}
.date-in::placeholder{color:var(--dim2)}
.date-in:hover:not([readonly]){border-color:var(--border);background:var(--soft2)}
.date-in:focus{outline:none;border-color:var(--acc);background:var(--soft)}
.date-in.bad{border-color:var(--bad)}
.date-btn{position:absolute;right:6px;top:0;bottom:0;margin:auto;width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;border:none;border-radius:5px;
  background:none;color:var(--dim2);cursor:pointer;padding:0}
.date-btn:hover{color:var(--text);background:var(--soft)}
.date.ro .date-btn{display:none}
.field .date{gap:0}
.field .date-in{padding:0 24px 0 0;border:none;background:none}
.field .date-btn{right:0}

.cal{position:fixed;z-index:70;padding:10px;width:246px;box-shadow:var(--shadow);animation:pop .1s ease-out}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.cal-head b{font-size:13px;font-weight:600}
.cal-nav{width:26px;height:26px;border:none;border-radius:6px;background:none;color:var(--dim);
  font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.cal-nav:hover{background:var(--soft);color:var(--text)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-grid i{font-size:10.5px;font-style:normal;color:var(--dim2);text-align:center;letter-spacing:.04em;
  padding:2px 0 4px;font-weight:600}
.cal-grid i:nth-child(6),.cal-grid i:nth-child(7){color:var(--dim2);opacity:.7}
.cal-day{height:28px;border:1px solid transparent;border-radius:6px;background:none;color:var(--text);
  font:inherit;font-size:13px;cursor:pointer;font-variant-numeric:tabular-nums}
.cal-day.we{color:var(--dim)}
.cal-day:hover{background:var(--soft)}
.cal-day.today{border-color:var(--acc-line);color:var(--acc);font-weight:600}
.cal-day.cur{background:var(--acc);border-color:var(--acc);color:var(--on-acc);font-weight:600}
.cal-foot{display:flex;justify-content:space-between;margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}
.cal-link{border:none;background:none;color:var(--acc);font:inherit;font-size:12.5px;cursor:pointer;
  padding:3px 6px;border-radius:5px}
.cal-link:hover{background:var(--acc-soft)}

/* полоса прокрутки — тонкая и в цвет темы */
*{scrollbar-width:thin;scrollbar-color:var(--border2) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background-color:var(--dim2)}

/* порядок колонок: строки в настройке перетаскиваются */
.col-row{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:6px;cursor:grab}
.col-row:hover{background:var(--soft)}
.col-row.dragging{opacity:.45;background:rgba(99,102,241,.14)}
.col-row .grip{width:12px;color:var(--dim2);font-size:12px;line-height:1;cursor:grab}
.col-row span:not(.grip):not(.muted){font-size:13px}

/* цветные значения в таблице — тот же чип, что на доске и в карточке.
   Список рисует ui.js: родной select прячется, вместо него кнопка .sel */
.chipbox{display:inline-flex;align-items:center;max-width:100%;color:var(--c)}
.chipbox .sel.ed{height:19px;padding:0 6px 0 8px;margin:0;gap:3px;border-radius:10px;
  width:auto;min-width:0;max-width:100%;font-size:10.5px;font-weight:600;letter-spacing:.02em;
  color:var(--c);background:color-mix(in srgb,var(--c) 13%,transparent);
  border-color:color-mix(in srgb,var(--c) 26%,transparent)}
.chipbox .sel.ed:hover:not(:disabled){background:color-mix(in srgb,var(--c) 20%,transparent);
  border-color:color-mix(in srgb,var(--c) 38%,transparent)}
.chipbox .sel.ed:focus-visible{border-color:var(--c);background:color-mix(in srgb,var(--c) 20%,transparent)}
.chipbox .sel.ed .sel-chev{color:currentColor;width:9px;height:9px}
.chipbox .sel.ed .sel-empty{color:var(--dim2)}

/* бюджет: слева ровно столько, сколько нужно, остальное — месяцам.
   Колонка с фамилиями подстраивается под самую длинную: ширина 1% при
   запрете переноса заставляет браузер взять ровно ширину содержимого */
.tbl.budget [data-col=fio]{width:1%;min-width:0;max-width:none;white-space:nowrap}
.tbl.budget [data-col=competency]{width:86px;min-width:86px}
.tbl.budget [data-col=rate]{width:96px;min-width:96px}
.tbl.budget td.cell{min-width:64px;width:64px;max-width:64px;height:46px}
.tbl.budget th.month{min-width:64px;width:64px}
.tbl.budget [data-col=md]{width:70px;min-width:70px;max-width:70px}
.tbl.budget [data-col=sum]{width:112px;min-width:112px;max-width:112px}
.tbl.budget [data-col=delta]{width:112px;min-width:112px;max-width:112px}
/* в бюджете доп. колонки скромнее: главное — месяцы */
.tbl.budget:not(.initiative) th[data-col]:not([data-col=fio]):not([data-col=competency]):not([data-col=rate]):not([data-col=md]):not([data-col=sum]):not([data-col=delta]),
.tbl.budget:not(.initiative) td[data-col]:not([data-col=fio]):not([data-col=competency]):not([data-col=rate]):not([data-col=md]):not([data-col=sum]):not([data-col=delta])
  {min-width:120px;max-width:170px;white-space:normal}
.tbl.budget th[data-col]{line-height:1.25;vertical-align:middle}
.tbl.budget td[data-col]{vertical-align:middle}

/* убрать строку из плана года: крестик в конце ячейки, виден при наведении.
   Место под него отведено всегда, поэтому на фамилию он не налезает */
.row-drop{position:absolute;right:3px;top:0;bottom:0;display:flex;align-items:center;margin:0}
.tbl.budget th[data-col=fio],.tbl.budget td[data-col=fio]{padding-right:24px}
.row-drop .mini{position:static;opacity:0}
tr:hover .row-drop .mini{opacity:1}

/* год — один блок колонок: общая шапка, границы кварталов, своя подложка */
.tbl.budget th.year{text-align:center;font-size:11px;letter-spacing:.06em;color:var(--dim);
  background:var(--soft2);border-bottom:1px solid var(--border);padding:6px 0}
.tbl.budget th.month{padding:5px 6px;font-size:11px;background:var(--soft2)}
.tbl.budget th.month .days{display:block;font-weight:400;font-size:10px;color:var(--dim2);margin-top:1px}
.tbl.budget th.q-start,.tbl.budget td.q-start{border-left:1px solid var(--border)}
.tbl.budget [data-col=md]{border-left:2px solid var(--border)}
.tbl.budget td.cell{background:color-mix(in srgb,var(--panel) 92%,var(--acc) 8%)}
.tbl.budget tbody tr:hover td.cell{background:color-mix(in srgb,var(--panel) 84%,var(--acc) 16%)}
.tbl.budget .cell-in{font-size:12px}
.tbl.budget .cell-rate{font-size:9px}

/* ===== расширение: чего не было в серверной версии ===== */
#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:80;padding:10px 16px;
  border-radius:10px;background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow);
  font-size:13px;color:var(--text);max-width:calc(100vw - 40px)}
#toast.bad{border-color:var(--bad);color:var(--bad)}
.modal{position:fixed;inset:0;background:var(--overlay);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  display:flex;align-items:center;
  justify-content:center;z-index:20}
.modal.top{align-items:flex-start;padding-top:90px;z-index:25}
.drop{position:absolute;right:22px;top:106px;width:280px;z-index:9}
/* правый край строки инструментов: кнопки «Колонки»/«Поля» и панель, что раскрывается под ними */
.bar-side{display:flex;gap:8px;align-items:center;position:relative;margin-left:auto}
.bar-side>.drop{right:0;top:calc(100% + 8px)}
.welcome{flex:1;display:flex;align-items:center;justify-content:center;position:relative;
  background-image:radial-gradient(ellipse at 30% 20%,rgba(var(--acc-rgb),.16) 0,transparent 55%),
  radial-gradient(ellipse at 75% 85%,rgba(var(--acc2-rgb),.14) 0,transparent 55%)}
.welcome::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:36px 36px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 45%,#000 20%,transparent 70%);
  mask-image:radial-gradient(ellipse at 50% 45%,#000 20%,transparent 70%)}
.welcome>*{position:relative}
.settings-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.settings-grid .stat{padding:10px 12px;border-radius:7px;background:var(--soft2);border:1px solid var(--border)}
.busy{opacity:.6;pointer-events:none}
.nav a{cursor:pointer}

.login-box{display:flex;flex-direction:column;width:400px;gap:22px}
.role-tag{font-size:11px;color:var(--dim2)}

/* многострочный текст в ячейке: растёт по содержимому, Enter — закончить правку */
textarea.ed{resize:none;overflow:hidden;white-space:normal;line-height:1.3;min-height:22px;
  padding:3px 5px;display:block;font-size:12.5px}

/* год с итогами закреплён справа: дополнительные колонки прокручиваются между ФИО и месяцами */
.tbl.budget [data-m],.tbl.budget [data-col=md],.tbl.budget [data-col=sum],.tbl.budget [data-col=delta],.tbl.budget th.year{position:sticky;z-index:2}
.tbl.budget thead th[data-m],.tbl.budget thead th[data-col=md],.tbl.budget thead th[data-col=sum],.tbl.budget thead th[data-col=delta],.tbl.budget thead th.year{z-index:4}
.tbl.budget [data-col=delta]{right:0}
/* когда выбраны свои колонки, закреплены только три итога, а месяцы прокручиваются вместе с остальным:
   иначе на ноутбуке между ФИО и закреплённым годом остаётся полоска в сотню пикселей */
.tbl.budget.free-months td[data-m]{position:static}
.tbl.budget.free-months th.year{position:static}
.tbl.budget td[data-m],.tbl.budget td[data-col=md],.tbl.budget td[data-col=sum],.tbl.budget td[data-col=delta]{background:var(--panel)}
.tbl.budget tbody tr:nth-child(even) td[data-m],.tbl.budget tbody tr:nth-child(even) td[data-col=md],.tbl.budget tbody tr:nth-child(even) td[data-col=sum],.tbl.budget tbody tr:nth-child(even) td[data-col=delta]{background:var(--panel-stripe)}
.tbl.budget tbody tr:hover td[data-m],.tbl.budget tbody tr:hover td[data-col=md],.tbl.budget tbody tr:hover td[data-col=sum],.tbl.budget tbody tr:hover td[data-col=delta]{background:var(--panel-hover)}
.tbl.budget td.cell{background:color-mix(in srgb,var(--panel) 92%,var(--acc) 8%)}
.tbl.budget tbody tr:nth-child(even) td.cell{background:color-mix(in srgb,var(--panel-stripe) 92%,var(--acc) 8%)}
.tbl.budget tbody tr:hover td.cell{background:color-mix(in srgb,var(--panel) 84%,var(--acc) 16%)}
.tbl.budget th.year,.tbl.budget th.month{background:var(--th)}
.tbl.budget th.year{border-left:1px solid var(--border);border-bottom:1px solid var(--border);padding:6px 0}
.tbl.budget [data-m="1"]{border-left:1px solid var(--border)}
.tbl.budget th.month{text-align:center;padding:4px 4px 5px;white-space:nowrap}
.tbl.budget th.month .days{text-align:center}

/* ===== план и факт ===== */
/* переключатель режима таблицы */
.seg{display:inline-flex;padding:3px;border-radius:9px;background:var(--soft2);border:1px solid var(--border)}
.seg button{padding:5px 13px;border:none;border-radius:6px;background:none;color:var(--dim);
  font-size:13px;cursor:pointer;white-space:nowrap}
.seg button:hover{color:var(--text)}
.seg button{transition:color .12s,background .12s}
.seg button.on{background:var(--card);color:var(--text);font-weight:600;
  box-shadow:0 1px 3px rgba(0,0,0,.35),var(--hi)}
:root[data-mode="light"] .seg button.on{background:var(--panel);box-shadow:0 1px 3px rgba(21,25,45,.14)}

/* цвет отклонения: плюс — сэкономили, минус — потратили больше */
.ok{color:var(--ok)}
.bad{color:var(--bad)}
.chip.ok{background:color-mix(in srgb,var(--ok) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--ok) 26%,transparent)}

/* мелкая строка под числом клетки: план в режиме факта, деньги в режиме разницы */
/* Ровно та же высота, что у строки со ставкой в режиме «План»:
   при переключении режимов таблица не должна менять размер ни на пиксель */
.cell-sub{text-align:right;font-size:9px;padding:0 6px 2px;color:var(--dim2);
  font-family:ui-monospace,Menlo,monospace;line-height:1.2;min-height:12px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Режим «Разница»: дни и деньги стоят на одной правой линии, как числа в «Плане» */
.tbl.budget td.cell .cell-diff{display:block;text-align:right;font-size:13px;font-weight:600;
  font-variant-numeric:tabular-nums;font-family:ui-monospace,Menlo,monospace;padding:3px 6px 1px 0}
.cell-diff.none{color:var(--dim2);font-weight:400;padding-right:8px}
.tbl.budget .cell-sub.cell-money{font-size:10px;font-weight:500;padding-right:6px;opacity:.85}
.tbl.budget .cell-sub.cell-money.ok,.tbl.budget .cell-sub.cell-money.bad{color:inherit}
.tbl.budget .cell-sub.cell-money.ok{color:var(--ok)}
.tbl.budget .cell-sub.cell-money.bad{color:var(--bad)}
/* Режим «Факт»: расхождение с планом. Плюс — отработал меньше плана (экономия),
   минус — больше плана (перерасход). Подпись красится и клетка подсвечивается */
.tbl.budget .cell-sub.ok{color:var(--ok);font-weight:600}
.tbl.budget .cell-sub.bad{color:var(--bad);font-weight:600}
.tbl.budget tbody tr td.cell:has(> .cell-sub.ok:not(.cell-money)),
.tbl.budget tbody tr:nth-child(even) td.cell:has(> .cell-sub.ok:not(.cell-money)),
.tbl.budget tbody tr:hover td.cell:has(> .cell-sub.ok:not(.cell-money)){background:color-mix(in srgb,var(--ok) 14%,var(--panel))}
.tbl.budget tbody tr td.cell:has(> .cell-sub.bad:not(.cell-money)),
.tbl.budget tbody tr:nth-child(even) td.cell:has(> .cell-sub.bad:not(.cell-money)),
.tbl.budget tbody tr:hover td.cell:has(> .cell-sub.bad:not(.cell-money)){background:color-mix(in srgb,var(--bad) 14%,var(--panel))}
/* закрытый месяц: факт по нему уже есть */
.tbl.budget th.month.closed{color:var(--text)}
.tbl.budget th.month.closed .days{color:var(--ok)}
.tbl.budget td.cell.closed{box-shadow:inset 2px 0 0 -1px color-mix(in srgb,var(--ok) 45%,transparent)}

/* подпись у переключателя режима */
.hint{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto}
.hint.warn{color:var(--warn)}
@media (max-width:1500px){.hint{display:none}}

/* итоги года: три числа, кнопки и столбики по месяцам.
   Полоса прилипает к низу окна: свободные деньги видно и в длинной таблице */
.totals{padding:14px 18px;position:sticky;bottom:0;z-index:5;box-shadow:var(--shadow);
  background:var(--top-bg);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3)}
.tots{display:flex;gap:30px;align-items:flex-start;margin-bottom:12px}
.tot span{display:block;font-size:11px;letter-spacing:.07em;color:var(--dim2)}
.tot b{display:block;font-size:22px;font-weight:700;line-height:1.2;letter-spacing:-.01em;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;margin-top:2px}
.tot i{display:block;font-style:normal;font-size:11.5px;color:var(--dim2);margin-top:1px}
.mbars{display:flex;gap:8px;align-items:flex-end}
.mcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px}
.mcol span{font-size:11px}
.mcol span.closed{color:var(--ok)}
.mwrap{display:flex;align-items:flex-end;justify-content:center;gap:2px;width:100%;height:40px}
.mbar{flex:1;max-width:16px;border-radius:3px 3px 0 0}
.mbar.plan{background:var(--acc-soft);box-shadow:inset 0 0 0 1px var(--acc-line)}
.mbar.fact{background:linear-gradient(180deg,var(--acc2),var(--acc));box-shadow:0 0 12px rgba(var(--acc-rgb),.35)}

/* откуда взялись свободные деньги и куда ушли */
.panel.free{padding:14px 18px}
.free-h{font-size:12px;letter-spacing:.03em;color:var(--dim);margin-bottom:8px}
.mini-tbl td{height:30px;padding:2px 8px;font-size:12.5px;vertical-align:middle}
.mini-tbl td:first-child{position:static;min-width:0;background:none}
.mini-tbl td:first-child::after{display:none}
.mini-tbl tbody tr:hover,.mini-tbl tr:hover{background:var(--soft2)}
.mini-tbl tr.head td{font-size:10.5px;letter-spacing:.04em;color:var(--dim2);height:22px}

/* масштаб таблицы: мельче — обычный — крупнее */
.seg.zoom button{padding:5px 8px;font-size:12.5px;min-width:30px;justify-content:center}
.seg.zoom button.z{min-width:46px;font-variant-numeric:tabular-nums}
.seg.zoom button:disabled{opacity:.35;cursor:default}

/* Колонка с фамилиями закреплена слева, месяцы — справа. У обеих одна и та же
   «липкость», поэтому при прокрутке месяцы уезжали поверх фамилий: фамилиям нужен
   слой выше. */
.tbl.budget tbody td[data-col=fio]{z-index:3}
.tbl.budget thead th[data-col=fio]{z-index:5}
.free-h.bad{color:var(--bad)}

/* месяц занят на другом проекте: править нечего, видно только где он.
   Под полосками сплошной фон: месяцы закреплены справа, и сквозь прозрачные
   промежутки просвечивали колонки вендора и компетенции, уехавшие под них. */
.tbl.budget td.cell.locked{background:repeating-linear-gradient(135deg,
  var(--soft2) 0 6px, transparent 6px 12px), var(--panel)}
.tbl.budget td.cell .cell-lock{display:block;text-align:center;font-size:10px;font-weight:600;
  color:var(--dim2);padding:6px 2px 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  letter-spacing:.02em}
.cell-sub.warn{color:var(--warn)}

/* итоговые колонки: сверху план, снизу факт */
.tbl.budget td[data-col=md] b,.tbl.budget td[data-col=sum] b,.tbl.budget td[data-col=delta] b{
  display:block;line-height:1.15;font-size:12.5px}
.tbl.budget td[data-col=md] i,.tbl.budget td[data-col=sum] i,.tbl.budget td[data-col=delta] i{
  display:block;font-style:normal;font-size:10px;color:var(--dim2);line-height:1.2;min-height:12px;
  font-family:ui-monospace,Menlo,monospace}
.tbl.budget td[data-col=delta] i.ok{color:var(--ok)}
.tbl.budget td[data-col=delta] i.bad{color:var(--bad)}

/* группы в списке: два уровня, клик по строке сворачивает. Свёрнутая группа
   остаётся строкой: название, сколько людей и суммы по числовым колонкам */
.tbl tr.grp td{cursor:pointer;user-select:none;white-space:nowrap}
.tbl tr.grp.g2 td:first-child{padding-left:28px}
.tbl tr.grp.g2 td{background:#ffffff05}
.tbl tr.grp.g2 td:first-child b{font-weight:600}
.tbl tr.grp td.gsum{text-align:right;font-family:ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--dim)}
.fold-mark::before{content:'▾';display:inline-block;width:15px;color:var(--dim);font-size:11px}
.tbl tr.grp.shut .fold-mark::before{content:'▸'}
.tbl tr.grp.shut td:first-child b{color:var(--dim)}
.tbl tr.folded{display:none}

/* инициативы: закреплены только три итога справа, месяцы прокручиваются вместе с остальным.
   Колонки слева — одной ширины в шапке и в строках, подписи и значения выровнены по левому краю */
.tbl.initiative [data-m]{position:static}
.tbl.initiative th[data-col=fio]{width:230px;min-width:230px}
.tbl.initiative td[data-col=fio]{min-width:230px}
.tbl.initiative [data-col=who]{width:180px;min-width:180px;max-width:180px}
.tbl.initiative [data-col=empl]{width:100px;min-width:100px;max-width:100px}
.tbl.initiative [data-col=rate]{width:90px;min-width:90px;max-width:90px;text-align:left;border-left:none}
.tbl.initiative [data-col=count]{width:70px;min-width:70px;max-width:70px}
.tbl.initiative [data-col=note]{width:200px;min-width:200px;max-width:200px}
.tbl.initiative td[data-col] .ed{width:100%;min-width:0;text-align:left}
.tbl.initiative th[data-col]{text-align:left}

/* кнопка «скачать проект» в строке проекта бюджета: рядом с названием, заметна при наведении */
.tbl.budget .sec-dl{position:static;display:inline-flex;align-items:center;justify-content:center;width:22px;height:20px;
  margin-left:6px;vertical-align:middle;opacity:.55;border-radius:5px}
.tbl.budget .sec-dl svg{width:13px;height:13px}
.tbl.budget tr:hover .sec-dl,.tbl.budget .sec-dl:hover{opacity:1}

/* маршрут пакета в списке: полоска из десяти этапов. Пройденные зелёные,
   текущий — синий, а если ответа нет дольше обычного — красный */
.route{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px}
.route>div{display:flex;flex-direction:column;gap:5px;min-width:0}
.route i{display:block;height:6px;border-radius:3px;background:var(--border2)}
.route .done i{background:var(--ok)}
.route .now i{background:var(--acc)}
.route .late i{background:var(--bad)}

/* готовность к переводу: правится вся строка, поэтому длинным названиям — свой предел,
   чтобы поля выкупа и разговора помещались на экран без прокрутки */
.ready .tbl [data-col=fio]{min-width:230px}
.ready .tbl [data-col=vendor],.ready .tbl [data-col=pack]{max-width:150px;overflow:hidden;text-overflow:ellipsis}

/* карточка пакета в списке кликается целиком */
.pack-card{text-decoration:none}
.pack-card:hover{border-color:var(--border2);background:var(--panel-hover);color:var(--text)}

/* параметры пакета: много коротких значений — колонок столько, сколько влезет */
.fields{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px 16px}
@media (max-width:1180px){
  .fields{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* на трёх колонках широкие поля только рвали ряды — становятся обычными */
  .fields>.attr{grid-column:auto !important}
}
.fields .attr{gap:1px}
.fields .attr>span{font-size:10px}
.fields .attr input,.fields .attr select{font-size:13px;padding:3px 7px}
.fields .attr select{background-position:calc(100% - 13px) 9px,calc(100% - 8px) 9px;padding-right:24px}

/* что сделать на текущем этапе — списком, без отступа маркера в пустоту */
.todo{list-style:none;display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--dim);white-space:normal}
.todo li{position:relative;padding-left:13px}
.todo li::before{content:'';position:absolute;left:2px;top:7px;width:4px;height:4px;border-radius:50%;background:var(--dim2)}
/* пункты, которые видно по данным: галочка ставится сама, пока пусто — пустой квадрат */
.todo li.ok,.todo li.wait{padding-left:25px;font-size:13px;line-height:1.45}
.todo li.ok::before,.todo li.wait::before{left:0;top:1px;width:17px;height:17px;border-radius:4px;
  border:1.5px solid var(--border2);background:none;font-size:12px;line-height:15px;text-align:center}
.todo li[data-act]:hover::before{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 10%,transparent)}
.todo li.ok{color:var(--text)}
.todo li.ok::before{content:'✓';color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent);
  background:color-mix(in srgb,var(--ok) 12%,transparent)}

/* выбор должности: стрелка рядом с полем, список длинный — со своей прокруткой */
.btn.caret{padding:2px 6px;font-size:11px;line-height:1.2;color:var(--dim2)}
.menu-list.posts{max-height:320px;overflow:auto;min-width:250px;max-width:320px}
.menu-list.posts .grp{padding:7px 10px 3px;font-size:10.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dim2)}
.menu-list.posts .menu-item.on{background:var(--acc-soft);color:var(--acc);font-weight:600}

/* текст для презентации: правится на месте, подставленные из данных куски — жирные */
.attr .rich{width:100%;background:none;color:var(--text);font:inherit;font-size:14px;line-height:1.55;
  border:1px solid transparent;border-radius:6px;padding:5px 7px;margin-left:-7px;white-space:pre-wrap}
.attr .rich:hover{border-color:var(--border);background:var(--soft2)}
.attr .rich:focus{outline:none;border-color:var(--acc);background:var(--soft)}
.attr .rich b{font-weight:600;color:var(--text)}

/* возврат на экран выше */
.back-to{display:inline-flex;align-items:center;gap:5px;max-width:100%;height:28px;padding:0 11px 0 7px;
  border-radius:8px;background:var(--soft);color:var(--dim);font-size:13px;font-weight:500;text-decoration:none;
  transition:background .15s,color .15s}
.back-to span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.back-to svg{flex:none;transition:transform .15s}
.back-to:hover{background:var(--acc-soft);color:var(--acc);text-decoration:none}
.back-to:hover svg{transform:translateX(-2px)}

/* возврат на пройденный этап — маленькой стрелкой в углу строки маршрута */
.btn.back{padding:3px 9px;font-size:12px;line-height:1.4;color:var(--dim);opacity:.75;white-space:nowrap}
.row:hover .btn.back{opacity:1}
.btn.back:hover{color:var(--text);border-color:var(--border2)}

/* последний этап: отметки по каждому человеку — заявка, СЭБ, оффер */
.people-wrap{max-width:100%}
/* колонка с людьми тянется, отметки — узкие; длинное имя переносится, а не режется */
.tbl.people-marks{margin-top:2px;width:100%;table-layout:fixed}
/* у общей таблицы первая колонка фиксирована под списки ставок — здесь она тянется сама */
.tbl.people-marks th:first-child,.tbl.people-marks td:first-child{width:auto;min-width:0;position:static}
.tbl.people-marks th,.tbl.people-marks td{padding-left:8px;padding-right:8px}
.tbl.people-marks td:first-child{white-space:normal;line-height:1.35}
.tbl.people-marks .tick{gap:5px}
.tbl.people-marks th{background:none;padding:2px 8px 4px}
.tbl.people-marks td{height:28px;border-bottom:1px solid var(--line)}

/* маршрут в карточке: пройденные и будущие этапы — одна плотная строка, разворачивается текущий */
.stages{display:flex;flex-direction:column;gap:2px}
.stages .row{padding:6px 12px}
.stages .row.cur{padding:11px 12px}
.stages .row .dot{margin-top:5px}
.stages .row.cur .dot{margin-top:6px}
.stages .stage-in{font-size:12.5px;padding:4px 8px}

/* «Что мешает»: отмеченное видно в ячейке, весь список — в выпадающем */
.btn.blockers{font-size:11.5px;padding:2px 8px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-list .menu-item.on{color:var(--acc);font-weight:600}
.btn.icon{padding:5px 9px;font-size:13px;line-height:1}
/* вкладка «Перевод» в карточке: суммы стоят у подписи, а не у дальнего края колонки */
.tab-body .attr .ed.num{text-align:left}

/* комментарий к этапу: пишется к любому из них и правится в любой момент */
.note-line{background:none;border:1px solid transparent;border-radius:6px;padding:2px 6px;margin-left:-6px;
  color:var(--dim);font:inherit;font-size:12px;text-align:left;cursor:text;max-width:100%}
.note-line:hover{border-color:var(--border);color:var(--text)}
.btn.note-add{padding:1px 7px;font-size:12px;opacity:.45}
.row:hover .btn.note-add,.row.cur .btn.note-add{opacity:1}

/* материалы пакета: имя файла — обычная ссылка, но это кнопка (файл качается через ключ) */
.link-cell{background:none;border:none;padding:0;font:inherit;font-size:13px;color:var(--acc);
  cursor:pointer;text-align:left;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.link-cell:hover{text-decoration:underline}

/* порядок сборки файлов на первом этапе: номера вместо точек, заголовок без маркера */
.todo li.step::before,.todo li.lead::before{display:none}
.todo li.lead{padding-left:0;margin-top:4px;color:var(--dim2)}
.todo li.step{padding-left:13px}

/* отметки по людям на последнем этапе — те же галочки, что и в чек-листе этапа */
.tick{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-size:12px;color:var(--dim2)}
.tick>i{width:17px;height:17px;border-radius:4px;border:1.5px solid var(--border2);
  font-size:12px;line-height:15px;text-align:center;font-style:normal}
.tick:hover>i{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 10%,transparent)}
.tick.on{color:var(--dim)}
.tick.on>i{content:'';color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent);
  background:color-mix(in srgb,var(--ok) 12%,transparent)}
.tick.on>i::before{content:'✓'}

/* бюджет: выделено на проект, недоплаченные, месяцы без оплаты */
.lim{margin-left:8px;font:inherit;font-size:11.5px;padding:1px 8px;border-radius:10px;cursor:pointer;
  border:1px solid var(--border);background:var(--panel);color:var(--dim)}
.lim.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 35%,transparent)}
.lim.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent);font-weight:600}
.lim.none{border-style:dashed;color:var(--dim2)}
.lim:disabled{cursor:default}
.cell-in.short{color:var(--warn);font-weight:600;background:color-mix(in srgb,var(--warn) 10%,transparent)}
.cell-rate.unpaid{color:var(--dim2);font-style:italic}
.warn{color:var(--warn)}
.free-h.warn{color:var(--warn)}
.tot i.bad{color:var(--bad)}
.tot b.warn{color:var(--warn)}
.rate-form .seg{display:flex}
.rate-form .seg button{flex:1}
.rate-form .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rate-form .two input.num{text-align:left}
.rate-cost{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 12px;
  border:1px solid var(--border);border-radius:8px;background:var(--soft);font-size:13px}
.rate-cost span{display:block;font-size:11.5px;color:var(--dim2);margin-top:2px}
.rate-cost b{font-size:17px;white-space:nowrap}

/* Окна с формой: у переключателя, полей и плашек общие левый и правый края,
   текст внутри рамок — с одним отступом 12px. Поля здесь в рамке, а не «призраки»
   со сдвигом влево, как в карточках: иначе края расходятся на 7px. */
.boxed .attr input,.boxed .attr textarea,.boxed .attr .rich,.boxed .attr .date,.boxed .attr .date-in{margin-left:0}
.boxed .attr input,.boxed .date-in{border-color:var(--border);background:var(--soft2);padding:7px 12px;height:36px}
.boxed .attr textarea,.boxed .attr .rich{border-color:var(--border);background:var(--soft2);padding:7px 12px}
.boxed .date-in{padding-right:36px}
.boxed .date-btn{right:8px}
.boxed .attr input:focus,.boxed .attr textarea:focus,.boxed .attr .rich:focus,.boxed .date-in:focus{border-color:var(--acc);background:var(--soft)}
.boxed .attr>span{margin-left:0}
.boxed .rate-cost{padding:10px 12px;min-height:44px}
.boxed .seg{margin:0}
/* подпись под заголовком итоговой колонки: что сверху, что снизу */
.th-sub{display:block;font-style:normal;font-size:9.5px;font-weight:400;letter-spacing:.02em;
  text-transform:none;color:var(--dim2);line-height:1.25;margin-top:3px}
/* инициатива: колонка «Отпуск» закреплена справа вместе с итогами */
.tbl.initiative [data-col=vac]{position:sticky;z-index:2;width:64px;min-width:64px;border-left:2px solid var(--border)}
.tbl.initiative thead th[data-col=vac]{z-index:4}
.tbl.initiative td[data-col=vac]{background:var(--panel)}
.tbl.initiative tbody tr:nth-child(even) td[data-col=vac]{background:var(--panel-stripe)}
.tbl.initiative tbody tr:hover td[data-col=vac]{background:var(--panel-hover)}
.tbl.initiative tfoot td[data-col=vac]{background:var(--panel)}
.tbl.initiative [data-col=vac]+[data-col=md]{border-left:none}
/* бюджет: отпуск года рядом с выбором года */
.vac-box{gap:6px;cursor:default}
.vac-in{width:34px;background:none;border:none;border-bottom:1px solid var(--border);color:var(--text);
  font:inherit;text-align:center;padding:0}
.vac-in:focus{outline:none;border-bottom-color:var(--acc)}
.tbl.budget td[data-col=delta]{white-space:nowrap}
/* итоговые колонки бюджета: заголовок по правому краю, как числа под ним */
.tbl.budget thead th[data-col=md],.tbl.budget thead th[data-col=sum],.tbl.budget thead th[data-col=delta]{text-align:right}
/* «отгулено из запаса»: число по правому краю, «из N» — ровным столбиком */
.vac-cell .vt{font-weight:700}
.vac-cell .vo{display:inline-block;min-width:6.5ch;text-align:left;padding-left:.5ch;color:var(--dim)}
.vac-cell.late .vt,.vac-cell.late .vo{color:var(--bad)}

/* внимание к сотруднику: строка добавления — поля в ряд, комментарий забирает остаток */
.flag-add{display:grid;grid-template-columns:260px 160px 1fr auto;gap:12px;align-items:end;margin-bottom:14px}
.flag-add .btn{height:36px}
.tbl.flags td{vertical-align:middle}
.tbl.flags .flag-done td{opacity:.7}
/* текст отметки и итог — во всю клетку, одно под другим; ширина по тексту здесь не нужна */
.tbl.flags td.flag-text input.ed{display:block;width:100%;min-width:0!important}
.tbl.flags td.flag-text input.ed+input.ed{margin-top:4px}
.tbl.flags input.ed{width:100%}
.tbl.flags input.ed+input.ed{margin-top:3px}
.flag-chips{display:flex;flex-wrap:wrap;gap:4px}
.boxed .attr select{margin-left:0;border-color:var(--border);background-color:var(--soft2);height:36px;padding:7px 30px 7px 12px}
.boxed .attr .sel{margin-left:0;width:100%;border:1px solid var(--border);background:var(--soft2);height:36px;padding:7px 12px;border-radius:6px}
/* таблица отметок начинается по тому же краю, что строка добавления над ней */
.tbl.flags td:first-child{padding-left:0}
/* виды отметок в «Управлении»: строки, заголовок и строка добавления — одна сетка,
   текст в полях строк с тем же отступом 12px, что в полях добавления */
.fk-grid{display:grid;grid-template-columns:260px 1fr 180px 150px;gap:12px;align-items:center}
.fk-head{font-size:11px;letter-spacing:.04em;color:var(--dim2);padding:0 0 4px}
.fk-head span{padding-left:12px}
.fk-head span:last-child{text-align:right;padding-left:0}
.fk-row{padding:2px 0;border-top:1px solid var(--border)}
.fk-row .ed{width:100%;margin:0;padding:6px 12px;height:34px;border:1px solid transparent;border-radius:6px;background:none;font-size:13px}
.fk-row .ed:hover{border-color:var(--border);background:var(--soft2)}
.fk-row .ed:focus{outline:none;border-color:var(--acc);background:var(--soft)}
.fk-tail{display:flex;align-items:center;justify-content:flex-end;gap:4px}
.fk-tail .num{margin-right:8px}
.fk-add{margin-top:12px;align-items:end}
.fk-add .btn{height:36px;justify-self:end;width:100%}
.fk-cell{display:block;min-width:0}
.fk-row .fk-cell .sel{width:100%;margin:0;padding:6px 12px;height:34px;border:1px solid transparent;border-radius:6px;font-size:13px}
.fk-row .fk-cell .sel:hover{border-color:var(--border);background:var(--soft2)}

/* «Управление»: панели одной колонкой, таблицы на общих краях с .fk-grid —
   первая колонка 260px, последняя (счётчик и ↑↓×) 150px */
.manage-col{display:flex;flex-direction:column;gap:14px;padding:0 22px 22px}
.cf-grid{display:grid;grid-template-columns:260px 150px minmax(0,1fr) 90px 150px;gap:12px;align-items:center}
.cf-grid.money{grid-template-columns:260px 150px minmax(0,1fr) 90px 90px 150px}
.cr-grid{display:grid;grid-template-columns:minmax(150px,1.1fr) 100px minmax(200px,2fr) 80px repeat(4,40px) 130px;gap:12px;align-items:center}
.cf-grid.fk-head span:last-child,.cr-grid.fk-head span:last-child{text-align:right;padding-left:0}
/* подгонка ширины под текст (fitEd) здесь не нужна: колонки задаёт сетка */
.cf-grid input.ed,.cr-grid input.ed,.fk-grid input.ed{min-width:0 !important}
.fk-row textarea.ed{min-height:34px;padding:8px 12px;line-height:1.35}
.cf-pad{display:flex;align-items:center;height:34px;padding-left:12px}
.cf-pad input[type=checkbox],.cf-box input[type=checkbox]{accent-color:var(--acc);cursor:pointer}
.boxed .attr.cf-box input{appearance:auto;width:16px;height:36px;padding:0;margin:0 0 0 12px;border:0;background:none}
.cf-grid.fk-add,.cr-grid.fk-add{align-items:end}
/* строка допуска и кнопки копии базы — один правый край: 272 + 200 + 150 и два зазора = 646 */
.us-copy{display:grid;grid-template-columns:repeat(2,317px);gap:12px}
.us-copy .btn{justify-content:center;cursor:pointer}
.manage-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
/* направления пользователя: в строке — открытые через запятую, раскрытием — галочки столбиком */
.us-dirs{width:200px;font-size:13px}
.us-dirs summary{display:flex;align-items:center;gap:4px;list-style:none;cursor:pointer;padding:2px 5px;margin:0 -5px;
  border:1px solid transparent;border-radius:5px;white-space:nowrap}
.us-dirs summary>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.us-dirs summary::-webkit-details-marker{display:none}
.us-dirs summary::after{content:'';flex-shrink:0;width:6px;height:6px;margin-left:auto;border:solid var(--dim2);
  border-width:0 1.6px 1.6px 0;transform:translateY(-2px) rotate(45deg)}
.us-dirs[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.us-dirs summary:hover{border-color:var(--border);background:var(--soft2)}
.us-dirs-list{display:flex;flex-direction:column;gap:6px;padding:8px 0 4px}
.us-dirs .chk{display:inline-flex;align-items:center;gap:7px;cursor:pointer;white-space:nowrap}
/* «Направления»: те же края, что у таблиц «Управления» — первая колонка 260px, последняя 150px */
.dr-grid{display:grid;grid-template-columns:260px minmax(0,1fr) 150px;gap:12px;align-items:center}
.dr-grid input.ed{min-width:0 !important}
.dr-leads{padding-left:12px;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* окно нового направления: поля одной колонкой с одним зазором, список с галочками — в рамке, как поля */
.dr-form{display:flex;flex-direction:column;gap:12px}
.dr-form .attr .picklist{background:var(--soft2);max-height:200px}
/* поля и списки окна — одной высоты */
.dr-form .attr input:not([type=checkbox]):not([type=radio]){height:36px}
.dr-form .attr .picklist+input{margin-top:8px}
.dr-form .attr .us-find{margin-bottom:8px}
.dr-form .attr .us-find~.picklist{height:200px}
.dr-form .seg{display:flex}
.dr-form .seg button{flex:1;justify-content:center}
.dr-btns{display:flex;gap:8px;justify-content:flex-end;margin-top:4px}
/* Профиль: шапка как в карточке сотрудника, ниже смена пароля одной строкой */
.prof{display:flex;flex-direction:column;gap:13px;padding:22px 24px 24px;max-width:880px}
.prof-head{padding:0;overflow:hidden}
.prof-top{display:flex;align-items:center;gap:18px;padding:20px 20px 18px;
  background:linear-gradient(120deg,rgba(var(--acc-rgb),.12),rgba(var(--acc2-rgb),.05) 45%,transparent 75%)}
.prof-ava{width:60px;height:60px;border-radius:15px;font-size:20px;flex-shrink:0}
.prof-name{font-size:22px;font-weight:700;line-height:1.2}
.prof-sub{font-size:13px;color:var(--dim);margin-top:3px}
.prof-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.prof-acts{display:flex;gap:8px;align-self:flex-start}
.prof-facts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;padding:13px 20px 15px;border-top:1px solid var(--border)}
.prof-facts>.attr>b{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prof-pw{padding:15px 20px 18px}
.prof-pw-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:14px;align-items:end}
.prof-pw-row>.btn,.prof-pw.panel .attr input:not([type=checkbox]){height:36px}
@media (max-width:720px){.prof-top{flex-wrap:wrap}.prof-acts{width:100%;flex-wrap:wrap}.prof-acts .btn{flex:1;justify-content:center}.prof-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.prof-pw-row{grid-template-columns:1fr}}
/* переключатель направления в шапке */
.sel.dir-pick{max-width:220px}

/* ---------------------------------------------------------------- сводка */
.seg a{padding:5px 13px;border-radius:6px;color:var(--dim);text-decoration:none;font-size:13px}
.seg a:hover{color:var(--text)}
.seg a.on{background:var(--panel);color:var(--text);box-shadow:var(--hi)}
.sv-page{width:100%;max-width:1180px;margin:0 auto;padding:26px 28px 64px;font-variant-numeric:tabular-nums}
.sv-i{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sv-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sv-date{margin-right:auto;color:var(--dim);font-size:13px}
.sv-as{min-width:230px;height:34px}
.sv-say{margin:18px 0 0;max-width:23em;font-size:30px;line-height:1.2;font-weight:600;letter-spacing:-.02em;text-wrap:balance}
.sv-rail{display:grid;margin:18px 0 34px;background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 5%,var(--panel)),var(--panel) 70%);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--hi)}
.sv-cell{position:relative;display:flex;flex-direction:column;gap:2px;min-width:0;padding:16px;border-left:1px solid var(--border);color:inherit;text-decoration:none}
.sv-cell:first-child{border-left:0}
.sv-cell{transition:background .15s}
.sv-cell:hover{background:var(--acc-hover)}
.sv-cell::before{content:'';position:absolute;inset:0 0 auto;height:4px}
.sv-cell[data-state=crit]{background:linear-gradient(180deg,color-mix(in srgb,var(--bad) 13%,transparent),transparent 90%)}
.sv-cell[data-state=crit]::before{background:var(--bad)}
.sv-cell[data-state=warn]::before{background:var(--warn)}
.sv-cell[data-state=plain]::before,.sv-cell[data-state=ok]::before{background:linear-gradient(90deg,var(--acc),var(--acc2));opacity:.55}
.sv-cn .sv-i{color:var(--acc)}
.sv-cell[data-state=crit] .sv-cn .sv-i{color:var(--bad)}
.sv-cell[data-state=warn] .sv-cn .sv-i{color:var(--warn)}
.sv-cn{display:flex;align-items:center;gap:7px;min-width:0;font-size:13px;color:var(--dim);white-space:nowrap}
.sv-cn span{overflow:hidden;text-overflow:ellipsis}
.sv-cv{margin-top:6px;font-size:24px;font-weight:600;line-height:1.1;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-cell[data-state=crit] .sv-cv{color:var(--bad)}
.sv-cell[data-state=warn] .sv-cv{color:var(--warn)}
.sv-cu{font-size:12px;color:var(--dim)}
.sv-ok{display:flex;align-items:center;gap:5px;margin-top:10px;font-size:15px;font-weight:500;color:var(--ok)}
.sv-sec{margin-bottom:32px}
.sv-sec h2{display:flex;align-items:center;gap:14px;margin:0 0 12px;font-size:17px;font-weight:600;letter-spacing:-.01em}
.sv-sec h2::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--border2),transparent)}
.sv-issues{display:flex;flex-direction:column;gap:10px}
.sv-iss{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) auto;gap:28px;align-items:center;padding:18px 22px;background:var(--panel);border:1px solid var(--border);border-radius:14px;box-shadow:var(--hi)}
.sv-iss[data-state=crit]{background:linear-gradient(90deg,color-mix(in srgb,var(--bad) 7%,var(--panel)),var(--panel) 45%)}
.sv-iss[data-state=warn]{background:linear-gradient(90deg,color-mix(in srgb,var(--warn) 6%,var(--panel)),var(--panel) 45%)}
.sv-iss::before{content:'';position:absolute;left:-1px;top:14px;bottom:14px;width:4px;border-radius:0 3px 3px 0}
.sv-iss[data-state=crit]::before{background:var(--bad)}
.sv-iss[data-state=warn]::before{background:var(--warn)}
.sv-ih{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--dim)}
.sv-iss[data-state=crit] .sv-ih .sv-i{color:var(--bad)}
.sv-iss[data-state=warn] .sv-ih .sv-i{color:var(--warn)}
.sv-it{margin-top:4px;font-size:18px;font-weight:600;line-height:1.3}
.sv-iss[data-state=warn] .sv-it{font-size:16px}
.sv-iss[data-state=crit] .sv-it b{color:var(--bad)}
.sv-iss[data-state=warn] .sv-it b{color:var(--warn)}
.sv-in{margin-top:4px;font-size:13px;color:var(--dim)}
.sv-act{display:inline-flex;align-items:center;gap:4px;padding:7px 12px;border:1px solid var(--border2);border-radius:9px;color:var(--text);text-decoration:none;font-size:13px;font-weight:500;white-space:nowrap}
.sv-act{transition:border-color .15s,color .15s,filter .15s}
.sv-act:hover{border-color:var(--acc-line);color:var(--acc)}
.sv-act.strong{background:linear-gradient(135deg,var(--acc),var(--acc2));color:var(--on-acc);border-color:transparent;box-shadow:var(--glow)}
.sv-act.strong:hover{color:var(--on-acc);filter:brightness(1.08)}
.sv-bars{display:flex;flex-direction:column;gap:7px}
.sv-bars>div{display:grid;grid-template-columns:130px 1fr 24px;gap:10px;align-items:center;font-size:13px;color:var(--dim)}
.sv-bars span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-bars i{display:block;height:8px;border-radius:4px;background:linear-gradient(90deg,color-mix(in srgb,var(--bad) 45%,transparent),var(--bad))}
.sv-bars b{color:var(--text);text-align:right;font-weight:600}
.sv-who{display:flex;flex-direction:column;gap:5px;font-size:13px}
.sv-who>div{display:flex;justify-content:space-between;gap:12px}
.sv-who a{color:var(--text)}
.sv-who span{color:var(--dim);white-space:nowrap}
.sv-meters>div{display:grid;grid-template-columns:120px 1fr 44px;gap:10px;align-items:center;margin:5px 0;font-size:13px;color:var(--dim)}
.sv-meters>div>span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-meters b{text-align:right;font-weight:600}
.sv-meters b[data-state=crit]{color:var(--bad)}
.sv-meters b[data-state=warn]{color:var(--warn)}
.sv-meter{position:relative;height:10px;border-radius:5px;background:var(--soft)}
.sv-meter i{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:var(--dim2)}
.sv-meter i[data-state=crit]{background:var(--bad)}
.sv-meter i[data-state=warn]{background:var(--warn)}
.sv-meter u{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--text)}
.sv-faces{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sv-face{display:flex;align-items:center;gap:12px;min-width:0;padding:12px 16px;background:var(--panel);border:1px solid var(--border);border-radius:14px;color:inherit;text-decoration:none;box-shadow:var(--hi);transition:border-color .15s,transform .15s}
.sv-face:hover{border-color:var(--acc-line);transform:translateY(-1px)}
.sv-face .ava{flex:none}
.sv-fn{flex:1;min-width:0;display:flex;flex-direction:column}
.sv-fn b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-fn>span{font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-dot{display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;vertical-align:1px}
.sv-num{font-weight:600;white-space:nowrap;text-align:right}
.sv-face .sv-num{font-size:15px}
.sv-num[data-late]{color:var(--bad)}
.sv-list{padding:4px 22px;background:var(--panel);border:1px solid var(--border);border-radius:14px;box-shadow:var(--hi)}
.sv-list>*{border-top:1px solid var(--border)}
.sv-list>*:first-child{border-top:0}
.sv-pack{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1.5fr) 120px;gap:16px;align-items:center;padding:11px 0;font-size:13px;color:inherit;text-decoration:none}
.sv-pack>div{display:flex;flex-direction:column}
.sv-pack span:not(.sv-steps){color:var(--dim);font-size:12px;font-weight:400}
.sv-pack[data-late] b,.sv-pack[data-late] .sv-num{color:var(--bad)}
.sv-steps{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px}
.sv-steps i{height:8px;border-radius:3px;background:var(--soft)}
.sv-steps i[data-s=done]{background:color-mix(in srgb,var(--acc) 45%,transparent)}
.sv-steps i[data-s=now]{background:var(--acc);box-shadow:0 0 8px rgba(var(--acc-rgb),.5)}
.sv-steps i[data-s=late]{background:var(--bad)}
.sv-vac{display:grid;grid-template-columns:34px minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) 70px;gap:12px;align-items:center;padding:9px 0;font-size:13px}
.sv-vac>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-comp{font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--dim)}
@media (max-width:900px){
  .sv-rail{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .sv-cell:nth-child(3n+1){border-left:0}
  .sv-cell:nth-child(n+4){border-top:1px solid var(--border)}
  .sv-iss{grid-template-columns:1fr;gap:12px}
  .sv-faces{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sv-pack{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .sv-page{padding:20px 16px 48px}
  .sv-say{font-size:24px}
  .sv-rail{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .sv-cell{border-left:1px solid var(--border)!important;border-top:1px solid var(--border)}
  .sv-faces{grid-template-columns:1fr}
  .sv-vac{grid-template-columns:34px 1fr 70px}
  .sv-vac>span:nth-of-type(2),.sv-vac>span:nth-of-type(3){display:none}
}
.rules{display:flex;flex-direction:column}
.rule-row{display:grid;grid-template-columns:minmax(0,1fr) 90px 110px;gap:12px;align-items:center;padding:8px 0;border-top:1px solid var(--border)}
.rule-row:first-child{border-top:0}
.rule-num{height:34px}
.rule-num input{text-align:right}
/* На экране поуже в шапке от плашки с именем остаётся кружок — меню помещается целиком */
/* Поля и выпадающие списки в одной строке — одной высоты: иначе подпись у текстового поля
   ниже, чем у соседнего списка */
.attr input:not([type=checkbox]):not([type=radio]),.attr .sel{height:32px;box-sizing:border-box}
.grid5.tight .attr input:not([type=checkbox]):not([type=radio]),.grid5.tight .attr .sel{height:28px;font-size:13px;padding:3px 6px;margin-left:-6px}
/* Числа не ломаются посреди, подписи счётчиков — в одну строку; полоса над таблицей переносится
   целиком, а не вылезает за край на экране поуже */
.stat b,.stat span{white-space:nowrap}
.stats{flex-shrink:0}
.bar{flex-wrap:wrap;row-gap:10px}
.bar>*{min-width:0}
/* Названия областей сводки — целиком, при нехватке места в две строки */
.sv-cn{white-space:normal;align-items:flex-start}
.sv-cn span{overflow:visible}
/* Показанное значение рядом с полями ввода — на той же линии, что текст в полях */
.grid4>.kv b{display:flex;align-items:center;min-height:32px;margin-top:4px;padding:0}
/* Заголовок «Отпуск» в инициативе целиком */
.tbl.initiative [data-col=vac]{width:84px;min-width:84px}
.sv-iss[data-state=warn] .sv-bars i{background:var(--warn)}
/* У даты сдвиг влево уже у обёртки — у самого поля его нет, иначе текст левее подписи */
.attr .date-in{margin-left:0!important}
.grid5.tight .attr .date-in{padding:3px 30px 3px 6px}
.assess-who{display:flex;flex-wrap:wrap;gap:8px 22px}
.assess-who .chk{display:inline-flex;align-items:center;gap:7px;font-size:13px;cursor:pointer}
.sv-vac{color:inherit;border-radius:8px}
.sv-vac:hover{background:var(--panel-hover)}
/* в светлой теме заливки — ярким янтарём, цифры и слова — тёмным, чтобы читались */
:root[data-mode="light"] :is(.cell-rate.changed,.hint.warn,.cell-sub.warn,.cell-in.short,.warn,.free-h.warn,.tot b.warn,
  .sv-cell[data-state=warn] .sv-cv,.sv-iss[data-state=warn] .sv-it b,.sv-meters b[data-state=warn]){color:var(--warn-text)}
/* Инициативы: «Всего» за год перед месяцами — поле, число раздаётся по календарю */
.tbl.initiative [data-col=total]{border-right:1px solid var(--border)}
.tbl.initiative th[data-col=total]{position:static}
.tbl.initiative td[data-col=total] .cell-in{text-align:right;font-weight:600;padding:4px 6px}

/* «Управление» → «Сотрудники»: выпадающие списки — три колонки одной ширины */
.dl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.dl-col{display:flex;flex-direction:column;min-width:0}
.dl-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;min-height:36px}
.dl-row>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-add{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:8px}
@media (max-width:900px){.dl-grid{grid-template-columns:minmax(0,1fr)}}

/* «Управление»: разделы колонкой слева, содержимое — колонкой разумной ширины.
   Сверху колонки — название направления: всё под ним настраивается внутри него. */
.mg{display:grid;grid-template-columns:208px minmax(0,1120px);gap:28px;padding:22px 22px 32px;align-items:start}
.mg-nav{position:sticky;top:22px;display:flex;flex-direction:column;gap:2px}
.mg-dir{font-size:19px;font-weight:650;letter-spacing:-.01em;line-height:1.2;padding:2px 10px 14px;overflow-wrap:anywhere}
.mg-group{font-size:12px;font-weight:600;color:var(--dim2);padding:18px 10px 6px}
.mg-link{display:flex;align-items:center;min-height:34px;padding:6px 10px;border-radius:8px;color:var(--dim);font-size:13.5px}
.mg-link:hover{background:var(--soft);color:var(--text)}
.mg-link.on{background:var(--acc-soft);color:var(--acc);font-weight:600}
.mg-link:focus-visible{outline:none;box-shadow:0 0 0 3px var(--acc-soft)}
.mg-main{min-width:0}
.mg-main .manage-col{padding:0}
@media (max-width:900px){
  .mg{grid-template-columns:minmax(0,1fr);gap:14px;padding:14px 16px 24px}
  .mg-nav{position:static;flex-direction:row;flex-wrap:wrap;gap:4px}
  .mg-dir{width:100%;padding:0 4px 6px}
  .mg-group{display:none}
}

/* «Перевод в штат» внутри «Управления»: поля во всю ширину, шаблоны и спонсоры — под ними в две колонки */
.ts-side{flex:1 1 360px;max-width:560px;min-width:320px;display:flex;flex-direction:column;gap:14px}
.mg-main .ts-side{flex-basis:100%;max-width:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
@media (max-width:900px){.mg-main .ts-side{grid-template-columns:minmax(0,1fr)}}
/* «Сводка»: число стоит рядом с подписью, а не на другом конце экрана */
.mg-main .rules{max-width:680px}

/* ===== пустое направление: первая выгрузка из портала ===== */
.ap-welcome{min-height:100vh;padding:22px}
.ap-card{width:420px;max-width:100%;padding:24px;display:flex;flex-direction:column;gap:20px;
  box-shadow:var(--shadow),var(--hi)}
.ap-head{display:flex;align-items:center;gap:14px}
.ap-head h2{margin:0;font-size:18px;font-weight:600}
.ap-mark{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--acc),var(--acc2));color:var(--on-acc);font-size:20px;font-weight:700;
  box-shadow:var(--glow)}
.ap-rows{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.ap-row{display:flex;align-items:center;gap:10px;padding:12px 14px;font-size:13px}
.ap-row+.ap-row{border-top:1px solid var(--border)}
.ap-row>i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--dim2)}
.ap-row>span{color:var(--dim)}
.ap-row>b{margin-left:auto;font-weight:500;text-align:right}
.ap-row.ok>i{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 20%,transparent)}
.ap-row.bad>i{background:var(--bad);box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 20%,transparent)}
.ap-row.bad>b{color:var(--bad)}
.ap-row.warn>i{background:var(--warn)}
.ap-row.wait>i{background:var(--acc);animation:ap-pulse 1.2s ease-in-out infinite}
.ap-row:not(.ok):not(.bad)>b{color:var(--dim)}
@keyframes ap-pulse{50%{opacity:.3}}
.ap-go{width:100%;min-height:40px;font-size:14px}
.ap-card .note{margin:0}

/* «Управление» → «Действия»: отбор в три колонки, список — строками с переносом */
.al-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 16px}
.al-filters .attr input:not([type=checkbox]):not([type=radio]),.al-filters .date-in{height:36px}
@media (max-width:900px){.al-filters{grid-template-columns:minmax(0,1fr)}}
.al-tbl th:first-child,.al-tbl td:first-child{position:static;width:auto;min-width:0;background:none}
.tbl.al-tbl tbody tr td:first-child{background:none}
.al-tbl th:first-child::after,.al-tbl td:first-child::after{display:none}
.al-tbl td{height:auto;padding-top:7px;padding-bottom:7px;vertical-align:top;line-height:1.4}
.al-tbl td.al-what{white-space:normal;width:100%}
.al-when{width:1%}
.al-sub{font-size:11.5px}
.al-ch{font-size:12px}
.al-ch s{text-decoration:line-through}
.al-kind{background:var(--soft2);border:1px solid var(--border);color:var(--dim)}
.al-kind.al-change{color:var(--acc)}
.al-kind.al-login_failed{color:var(--bad)}
.al-empty{padding:26px !important;text-align:center}
.al-more{display:flex;justify-content:center;padding:12px}