/* inter-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-cyrillic-ext-wght-normal-BOeWTOD4.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-cyrillic-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-cyrillic-wght-normal-DqGufNeO.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-greek-ext-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-greek-ext-wght-normal-DlzME5K_.woff2) format('woff2-variations');
  unicode-range: U+1F00-1FFF;
}

/* inter-greek-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-greek-wght-normal-CkhJZR-_.woff2) format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* inter-vietnamese-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-vietnamese-wght-normal-CBcvBZtf.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* inter-latin-ext-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-latin-ext-wght-normal-DO1Apj_S.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-latin-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-latin-wght-normal-Dx4kXJAl.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* roboto-flex-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'Roboto Flex Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 1000;
  src: url(/assets/roboto-flex-cyrillic-ext-wght-normal-CVcCQn0y.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* roboto-flex-cyrillic-wght-normal */
@font-face {
  font-family: 'Roboto Flex Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 1000;
  src: url(/assets/roboto-flex-cyrillic-wght-normal-BJ-nQEdz.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* roboto-flex-greek-wght-normal */
@font-face {
  font-family: 'Roboto Flex Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 1000;
  src: url(/assets/roboto-flex-greek-wght-normal-DeN4rzfy.woff2) format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* roboto-flex-vietnamese-wght-normal */
@font-face {
  font-family: 'Roboto Flex Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 1000;
  src: url(/assets/roboto-flex-vietnamese-wght-normal-AVFfiTln.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* roboto-flex-latin-ext-wght-normal */
@font-face {
  font-family: 'Roboto Flex Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 1000;
  src: url(/assets/roboto-flex-latin-ext-wght-normal-gysdOMcS.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* roboto-flex-latin-wght-normal */
@font-face {
  font-family: 'Roboto Flex Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 1000;
  src: url(/assets/roboto-flex-latin-wght-normal-n-dP9qr2.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* =====================================================================
   Стили старой Sorbon CRM — дословная копия СРМ/css/style.css (коммит 4a7c99a).
   Дизайн новой CRM — как в старой (решение владельца 2026-09-27): экраны используют
   её классы и её разметку. Этот файл руками не правим — переносим обновления целиком.
   Переменные тем здесь тоже есть, но tokens.css подключён после и главнее.
   Что пришлось подстроить под новую CRM — в legacy-compat.css.
   ===================================================================== */
/* =====================================================================
   ОФОРМЛЕНИЕ (2026-09): два стиля × две темы.
   <html data-style="liquid|material" data-theme="dark|light" data-wall="ocean|aurora|sunset|calm" data-glass="on|off">
   liquid — современный, со стеклом и обоями; material — простой, без размытия (быстро на слабых ПК).
   Имена переменных прежние (--card, --text-dim, --blue…), поэтому весь старый CSS берёт новые цвета.
   Новые: --glass (рамка: меню, шапка), --pop (всплывающие окна), --hi/--sheen (блик стекла), --blur.
   ===================================================================== */
:root{
  color-scheme: dark;
  --blue:#3b82f6; --blue-dark:#7fb0ff; --accent-hover:#2f6fdb; --on-accent:#fff;
  --green:#22c55e; --orange:#f59e0b; --red:#ef4444; --purple:#8b5cf6;
  --radius:14px; --r-card:14px; --r-btn:99px; --r-shell:22px;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --blur:blur(26px) saturate(170%);
  /* тёмная Liquid Glass — по умолчанию, пока скрипт не выставил атрибуты */
  --bg:#0a1330; --navy:#16203a; --navy-2:#1b2741;
  --glass:rgba(14,22,40,.34); --card:rgba(26,36,60,.72); --pop:rgba(22,31,54,.86); --bg-solid:#16203a;
  --border:rgba(255,255,255,.11); --text:#eef3fa; --text-dim:rgba(226,236,250,.66); --faint:rgba(226,236,250,.42);
  --chip-bg:rgba(255,255,255,.07); --hover-bg:rgba(255,255,255,.12); --input-bg:rgba(255,255,255,.06);
  --col-bg:rgba(255,255,255,.05); --drag-bg:rgba(59,130,246,.18); --th-bg:rgba(255,255,255,.03); --row-hover:rgba(255,255,255,.06);
  --col-divider:rgba(255,255,255,.07); --err-bg:rgba(239,68,68,.14); --err-border:rgba(239,68,68,.4);
  --hi:rgba(255,255,255,.16); --sheen:linear-gradient(165deg,rgba(255,255,255,.10),rgba(255,255,255,0) 38%);
  --shadow:inset 0 1px 0 var(--hi), 0 10px 28px -16px rgba(0,0,12,.7);
  --shadow-pop:inset 0 1px 0 var(--hi), 0 24px 60px rgba(0,0,12,.55);
  --bg-image:radial-gradient(60% 70% at 10% 5%,rgba(37,99,235,.75),transparent 70%),radial-gradient(50% 60% at 90% 15%,rgba(124,58,237,.6),transparent 70%),radial-gradient(55% 60% at 70% 100%,rgba(8,145,178,.55),transparent 70%);
}
:root[data-theme="light"]{
  color-scheme: light;
  --blue:#3b82f6; --blue-dark:#1f5fd0; --accent-hover:#2f6fdb;
  --bg:#dce6f6; --navy:#1b2733; --navy-2:#232f3d;
  --glass:rgba(255,255,255,.34); --card:rgba(255,255,255,.84); --pop:rgba(255,255,255,.9); --bg-solid:#fff;
  --border:rgba(20,40,90,.10); --text:#101828; --text-dim:#4f5b6e; --faint:#8b95a6;
  --chip-bg:rgba(20,40,90,.055); --hover-bg:rgba(20,40,90,.09); --input-bg:rgba(255,255,255,.75);
  --col-bg:rgba(20,40,90,.04); --drag-bg:rgba(59,130,246,.14); --th-bg:rgba(20,40,90,.03); --row-hover:rgba(20,40,90,.045);
  --col-divider:rgba(20,40,90,.08); --err-bg:#fdecec; --err-border:#f6c8c6;
  --hi:rgba(255,255,255,.95); --sheen:linear-gradient(165deg,rgba(255,255,255,.65),rgba(255,255,255,0) 42%);
  --shadow:inset 0 1px 0 var(--hi), 0 1px 2px rgba(20,40,90,.07), 0 12px 28px -16px rgba(20,40,90,.30);
  --shadow-pop:inset 0 1px 0 var(--hi), 0 24px 60px rgba(20,40,90,.22);
}
/* обои (только Liquid Glass) */
[data-theme="dark"][data-wall="aurora"]{ --bg:#0c0a1e; --bg-image:radial-gradient(55% 60% at 15% 10%,rgba(20,184,166,.55),transparent 70%),radial-gradient(50% 60% at 85% 15%,rgba(139,92,246,.65),transparent 70%),radial-gradient(50% 55% at 60% 95%,rgba(219,39,119,.45),transparent 70%); }
[data-theme="dark"][data-wall="sunset"]{ --bg:#1a0e16; --bg-image:radial-gradient(55% 60% at 12% 10%,rgba(234,88,12,.5),transparent 70%),radial-gradient(50% 60% at 88% 15%,rgba(225,29,72,.5),transparent 70%),radial-gradient(55% 55% at 65% 95%,rgba(124,58,237,.5),transparent 70%); }
[data-theme="dark"][data-wall="calm"]{ --bg:#111a28; --bg-image:radial-gradient(60% 60% at 12% 0%,rgba(59,130,246,.20),transparent 70%),radial-gradient(50% 55% at 100% 0%,rgba(124,92,252,.13),transparent 70%); }
[data-theme="light"]{ --bg-image:radial-gradient(60% 70% at 10% 5%,rgba(96,165,250,.6),transparent 70%),radial-gradient(50% 60% at 90% 15%,rgba(167,139,250,.5),transparent 70%),radial-gradient(55% 60% at 70% 100%,rgba(45,212,191,.4),transparent 70%); }
[data-theme="light"][data-wall="aurora"]{ --bg:#e7e3f7; --bg-image:radial-gradient(55% 60% at 12% 10%,rgba(94,234,212,.5),transparent 70%),radial-gradient(50% 60% at 88% 12%,rgba(196,181,253,.7),transparent 70%),radial-gradient(50% 55% at 60% 95%,rgba(249,168,212,.55),transparent 70%); }
[data-theme="light"][data-wall="sunset"]{ --bg:#f6e6de; --bg-image:radial-gradient(55% 60% at 10% 10%,rgba(253,186,116,.65),transparent 70%),radial-gradient(50% 60% at 90% 12%,rgba(253,164,175,.6),transparent 70%),radial-gradient(55% 55% at 65% 95%,rgba(196,181,253,.55),transparent 70%); }
[data-theme="light"][data-wall="calm"]{ --bg:#e9edf3; --bg-image:radial-gradient(60% 60% at 10% 0%,rgba(147,197,253,.35),transparent 70%),radial-gradient(50% 55% at 100% 0%,rgba(196,181,253,.25),transparent 70%); }
/* «Эффект стекла» выключен — плотные панели без размытия */
[data-theme="dark"][data-glass="off"]{ --glass:#131c30; --card:#1b2640; --pop:#1b2640; }
[data-theme="light"][data-glass="off"]{ --glass:#f1f4f8; --card:#fff; --pop:#fff; }
[data-glass="off"] *{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }

/* Material 3 — простой: тональные поверхности, без стекла и обоев */
[data-style="material"]{ --blur:none; --radius:20px; --r-card:18px; --r-btn:99px; --r-shell:26px; --font:'Roboto Flex','Roboto',system-ui,sans-serif;
  --sheen:linear-gradient(transparent,transparent); --hi:transparent; --bg-image:none; }
[data-style="material"][data-theme="dark"]{ --bg:#141218; --glass:#1d1b20; --card:#2b2930; --pop:#2b2930; --bg-solid:#2b2930; --navy:#2b2930;
  --border:rgba(147,143,153,.18); --text:#e6e0e9; --text-dim:#cac4d0; --faint:#938f99; --blue:#d0bcff; --blue-dark:#d0bcff; --accent-hover:#e0d0ff; --on-accent:#381e72;
  --chip-bg:rgba(208,188,255,.08); --hover-bg:#4a4458; --input-bg:rgba(208,188,255,.06); --col-bg:rgba(208,188,255,.05); --drag-bg:rgba(208,188,255,.16);
  --th-bg:transparent; --row-hover:rgba(208,188,255,.06); --col-divider:rgba(147,143,153,.14);
  --shadow:0 1px 3px rgba(0,0,0,.3); --shadow-pop:0 24px 60px rgba(0,0,0,.5); }
[data-style="material"][data-theme="light"]{ --bg:#fef7ff; --glass:#f3edf7; --card:#fff; --pop:#fff; --bg-solid:#fff; --navy:#322f37;
  --border:rgba(121,116,126,.16); --text:#1d1b20; --text-dim:#49454f; --faint:#79747e; --blue:#6750a4; --blue-dark:#5a4494; --accent-hover:#5a4494; --on-accent:#fff;
  --chip-bg:rgba(103,80,164,.06); --hover-bg:#e8def8; --input-bg:#fff; --col-bg:rgba(103,80,164,.05); --drag-bg:rgba(103,80,164,.12);
  --th-bg:transparent; --row-hover:rgba(103,80,164,.05); --col-divider:rgba(121,116,126,.14);
  --shadow:0 1px 2px rgba(0,0,0,.06),0 2px 6px -2px rgba(0,0,0,.08); --shadow-pop:0 24px 60px rgba(40,20,80,.18); }
[hidden]{display:none !important;}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:14px;
}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;font-size:14px;}

/* ---------- Buttons ---------- */
.btn{
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  padding:9px 16px;
  border-radius:6px;
  font-size:14px;
  font-weight:500;
  transition:.15s;
}
.btn:hover{background:var(--hover-bg);}
.btn-primary{background:var(--blue);border-color:var(--blue);color:#fff;}
.btn-primary:hover{background:var(--blue-dark);}
.btn-danger{background:var(--card);border-color:var(--red);color:var(--red);}
.btn-danger:hover{background:var(--red);color:#fff;}
.btn-ghost{background:transparent;border-color:transparent;color:var(--text-dim);}
.btn-ghost:hover{background:var(--hover-bg);}
.btn-sm{padding:5px 10px;font-size:12.5px;}
.btn-block{width:100%;}
.btn[disabled]{opacity:.45;cursor:not-allowed;}
.modal-body input[readonly]{opacity:.7;cursor:not-allowed;}

/* ---------- Login ---------- */
.login-screen{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--navy) 0%,#2a3b4d 60%,var(--blue-dark) 130%);
  padding:20px;
}
.login-card{
  background:var(--card);
  width:380px;
  max-width:100%;
  border-radius:14px;
  padding:32px 30px 26px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.login-logo{font-size:24px;font-weight:700;text-align:center;}
.login-logo span{color:var(--blue);}
.login-sub{text-align:center;color:var(--text-dim);margin:4px 0 24px;font-size:13px;}
#login-form label{display:block;font-size:12.5px;color:var(--text-dim);margin:14px 0 5px;font-weight:600;}
#login-form input,#login-form select{
  width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:6px;background:var(--input-bg);color:var(--text);
}
#login-form input:focus,#login-form select:focus{outline:none;border-color:var(--blue);}
/* Только кнопка «Войти»: глазик в поле пароля — тоже кнопка, и общий отступ его бы сдвинул. */
#login-form button[type="submit"]{margin-top:20px;}
/* Поле пароля с кнопкой «показать» */
.pw-wrap{position:relative;display:flex;align-items:center;}
.pw-wrap input{padding-right:42px;}
#login-form .pw-eye{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;margin:0;padding:0;display:grid;place-items:center;
  border:0;background:none;color:var(--text-dim);cursor:pointer;border-radius:8px;
}
#login-form .pw-eye:hover{background:var(--hover-bg);color:var(--text);}
#login-form .pw-eye .ic-svg{width:18px;height:18px;}
.login-error{
  margin-top:12px;background:var(--err-bg);color:var(--red);border:1px solid var(--err-border);
  padding:9px 12px;border-radius:6px;font-size:13px;
}

/* ---------- App shell ---------- */
.app{display:flex;height:100vh;overflow:hidden;}
.sidebar{
  width:230px;flex:none;background:var(--card);color:var(--text);
  display:flex;flex-direction:column;padding:18px 0;
  border-right:1px solid var(--border);
  transition:width .15s;
}
.sidebar-logo{font-weight:700;font-size:18px;color:var(--text);padding:0 20px 18px;white-space:nowrap;overflow:hidden;}
.sidebar-logo span{color:var(--blue);}
.nav{flex:1;overflow:auto;}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:11px 20px;color:var(--text-dim);font-size:13.5px;font-weight:500;
  border-left:3px solid transparent;cursor:pointer;
}
.nav-item:hover{background:var(--hover-bg);color:var(--text);}
.nav-item.active{background:rgba(47,140,240,.14);border-left-color:var(--blue);color:var(--blue-dark);}
.sidebar-user{padding:14px 20px 0;border-top:1px solid var(--border);margin-top:10px;}
.sidebar-user-name{color:var(--text);font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;}
.sidebar-user-role{color:var(--text-dim);font-size:12px;margin:2px 0 12px;}

.sidebar-toggle-btn{
  flex:none;background:none;border:1px solid var(--border);border-radius:7px;
  width:34px;height:34px;font-size:15px;color:var(--text-dim);cursor:pointer;
}
.sidebar-toggle-btn:hover{background:var(--hover-bg);color:var(--text);}

/* ---------- Свёрнутое меню слева ---------- */
.app.sidebar-collapsed .sidebar{width:64px;}
.app.sidebar-collapsed .sidebar-logo,
.app.sidebar-collapsed .nav-item span:last-child,
.app.sidebar-collapsed .sidebar-user-role,
.app.sidebar-collapsed .sidebar-user-name,
.app.sidebar-collapsed .sidebar .theme-switcher,
.app.sidebar-collapsed .logout-label{display:none;}
.app.sidebar-collapsed .nav-item{justify-content:center;padding:11px 0;}
.app.sidebar-collapsed .sidebar-user{padding:14px 10px 0;}

.theme-switcher{margin-bottom:12px;}
.sound-toggle,.push-toggle{margin-bottom:12px;}
.sound-toggle:empty,.push-toggle:empty{display:none;}
.sound-toggle-row{display:flex;gap:6px;}
.sound-toggle .theme-opt,.push-toggle .theme-opt{font-size:12px;padding:7px 0;}
.sound-toggle .theme-opt.active,.push-toggle .theme-opt.active{color:#fff;}
.app.sidebar-collapsed .sidebar .sound-toggle,.app.sidebar-collapsed .sidebar .push-toggle{display:none;}
.push-hint{font-size:12px;line-height:1.45;color:rgba(255,255,255,.62);}
.profile-theme .push-hint{color:var(--text-dim);font-size:13px;}
.theme-switcher-label{font-size:10.5px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px;}
.theme-switcher-options{display:flex;gap:6px;}
.theme-opt{
  flex:1;background:var(--chip-bg);border:1px solid var(--border);border-radius:7px;
  padding:6px 0;font-size:14px;cursor:pointer;color:var(--text-dim);line-height:1;
}
.theme-opt:hover{background:var(--hover-bg);}
.theme-opt.active{background:var(--blue);border-color:var(--blue);}

.main{flex:1;display:flex;flex-direction:column;min-width:0;}
.topbar{
  background:var(--card);border-bottom:1px solid var(--border);
  padding:16px 26px;display:flex;align-items:center;justify-content:space-between;flex:none;
}
.topbar h1{font-size:19px;margin:0;}
.topbar-left{display:flex;align-items:center;gap:14px;min-width:0;}
.topbar-actions{display:flex;gap:10px;}
.topbar-right{display:flex;align-items:center;gap:14px;}
.content{flex:1;overflow:auto;padding:22px 26px;}

/* ---------- Кнопка смены (учёт рабочего времени) ---------- */
.shift-widget:empty{display:none;}
.shift-btn{
  display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:20px;cursor:pointer;
  font-size:13.5px;font-weight:600;white-space:nowrap;border:1px solid transparent;line-height:1.2;
}
.shift-btn[disabled]{opacity:.6;cursor:progress;}
.shift-off{background:var(--blue);color:#fff;}
.shift-off:hover{background:var(--blue-dark);}
.shift-on{background:rgba(46,204,113,.14);border-color:rgba(46,204,113,.5);color:var(--text);}
.shift-on:hover{background:rgba(46,204,113,.22);}
.shift-dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(46,204,113,.25);animation:shift-pulse 1.6s ease-in-out infinite;}
@keyframes shift-pulse{50%{box-shadow:0 0 0 6px rgba(46,204,113,.08);}}
.shift-time{font-variant-numeric:tabular-nums;font-size:14.5px;}
.shift-on .shift-label{color:var(--text-dim);font-weight:500;font-size:12.5px;}
.shift-today{font-weight:500;font-size:12px;opacity:.85;padding-left:6px;border-left:1px solid rgba(255,255,255,.4);}
.shift-stop-icon{display:none;font-size:13px;opacity:.8;}
.shift-marked{font-size:11.5px;color:var(--purple);font-weight:600;}
.shift-seg-fix{padding:3px 10px;font-size:12px;color:var(--orange);border-color:var(--orange);}
.shift-modal-info{font-size:13.5px;margin-bottom:12px;line-height:1.5;}
.shift-modal-now{padding:14px;font-size:16px;border-radius:10px;}
.shift-modal-or{text-align:center;font-size:12.5px;color:var(--text-dim);margin:14px 0 8px;}
.shift-modal-custom{display:flex;gap:8px;align-items:center;}
.modal-body .shift-modal-custom label{margin:0;flex:none;}
.modal-body .shift-modal-custom input{flex:1;min-width:0;}
.shift-modal-custom .btn{flex:none;}

.presence-widget:empty{display:none;}

/* Вкладка «Уведомления» (телефон) */
.notif-page{max-width:760px;}
.notif-card{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-bottom:1px solid var(--border);cursor:pointer;}
.notif-card:last-child{border-bottom:none;}
.notif-card-due{background:rgba(245,166,35,.08);}
.notif-card-main{flex:1;min-width:0;}
.notif-card-text{font-size:14.5px;font-weight:600;}
.notif-card-meta{font-size:12.5px;color:var(--text-dim);margin-top:3px;}
.notif-card-remove{flex:none;width:32px;height:32px;border-radius:50%;border:none;background:var(--chip-bg);color:var(--text-dim);font-size:18px;line-height:1;cursor:pointer;}
.presence-btn{
  display:inline-flex;align-items:center;gap:4px;padding:8px 12px;border-radius:20px;cursor:pointer;
  background:var(--chip-bg);border:1px solid var(--border);color:var(--text);font-size:13.5px;white-space:nowrap;
}
.presence-btn:hover{background:var(--hover-bg);}
.presence-label{color:var(--text-dim);}
.presence-row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 14px;border-bottom:1px solid var(--border);}
.presence-row:last-child{border-bottom:none;}
.presence-main{font-size:14px;min-width:0;}
.presence-role{font-size:12px;color:var(--text-dim);margin-left:4px;}
.presence-time{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:flex-end;}
.presence-marked{font-size:11.5px;color:var(--purple);font-weight:600;}
.shift-now{color:var(--green);font-weight:600;font-size:12.5px;white-space:nowrap;}

.shift-day{padding:11px 14px;border-bottom:1px solid var(--border);}
.shift-day:last-child{border-bottom:none;}
.shift-day-head{display:flex;justify-content:space-between;gap:10px;align-items:baseline;}
.shift-day-date{font-weight:600;font-size:14px;}
.shift-day-total{font-weight:700;font-size:14px;white-space:nowrap;}
.shift-day-sessions{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;}
.shift-seg{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;background:var(--chip-bg);padding:3px 9px;border-radius:10px;color:var(--text-dim);font-variant-numeric:tabular-nums;}
.shift-seg-open{color:var(--green);font-weight:600;}
.shift-seg-auto{color:var(--orange);}
.shift-seg-edit{background:none;border:none;cursor:pointer;padding:0 0 0 2px;font-size:12px;line-height:1;}
.dash-hint.dash-hint-below{margin:8px 2px 18px;}
.dash-worktime-table{margin-bottom:0;}

/* ---------- Колокольчик уведомлений ---------- */
.notif-bell-wrap{position:relative;}
.notif-bell{
  position:relative;background:none;border:none;font-size:19px;cursor:pointer;
  padding:4px;line-height:1;color:var(--text);
}
.notif-badge{
  position:absolute;top:-3px;right:-3px;background:var(--red);color:#fff;font-size:10px;font-weight:700;
  border-radius:10px;min-width:16px;height:16px;display:flex;align-items:center;justify-content:center;padding:0 3px;
}
.notif-dropdown{
  position:absolute;right:0;top:calc(100% + 8px);width:300px;max-height:360px;overflow-y:auto;
  background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);z-index:60;
}
.notif-item{position:relative;padding:11px 30px 11px 14px;border-bottom:1px solid var(--border);cursor:pointer;}
.notif-item:last-child{border-bottom:none;}
.notif-item:hover{background:var(--hover-bg);}
.notif-item-text{font-size:12.5px;font-weight:600;}
.notif-item-meta{font-size:11px;color:var(--text-dim);margin-top:2px;}
.notif-item-remove{
  position:absolute;top:9px;right:8px;background:none;border:none;color:var(--text-dim);
  font-size:15px;cursor:pointer;line-height:1;padding:2px;
}
.notif-item-remove:hover{color:var(--red);}

/* ---------- Badges ---------- */
.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11.5px;font-weight:600;}
.badge-admin{background:rgba(142,111,224,.16);color:var(--purple);}
.badge-mp{background:rgba(47,140,240,.16);color:var(--blue-dark);}
.badge-master{background:rgba(196,122,18,.16);color:#c47a12;}
.badge-tech{background:rgba(28,154,91,.16);color:#1c9a5b;}
.badge-snab{background:rgba(192,96,42,.16);color:#c0602a;}
.badge-rop{background:rgba(199,58,75,.16);color:#c73a4b;}

.pill{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600;}
.pill-new{background:rgba(107,123,144,.18);color:var(--text-dim);}
.pill-in_progress{background:rgba(47,140,240,.16);color:var(--blue-dark);}
.pill-done{background:rgba(28,154,91,.16);color:#1c9a5b;}
.pill-cancelled{background:rgba(226,80,74,.16);color:var(--red);}
.pill-upcoming{background:rgba(245,166,35,.16);color:var(--orange);}

/* ---------- Kanban ----------
   Доска занимает ровно высоту экрана: полоса прокрутки вбок всегда видна внизу,
   колонки тянутся до низа (в любую можно бросить карточку), а длинная колонка
   прокручивается сама по себе — заголовки этапов не уезжают. */
.content:has(> .kanban){display:flex;flex-direction:column;overflow:hidden;padding-bottom:0;}
.kanban{
  flex:1;min-height:0;display:flex;overflow-x:auto;overflow-y:hidden;
  padding-bottom:12px;align-items:stretch;
  overscroll-behavior-x:contain;   /* свайп у края доски не листает страницу «Назад» (Mac) */
  scrollbar-width:auto;scrollbar-color:var(--text-dim) var(--col-bg);
}
.kanban::-webkit-scrollbar{height:14px;}
.kanban::-webkit-scrollbar-track{background:var(--col-bg);border-radius:7px;}
.kanban::-webkit-scrollbar-thumb{background:var(--text-dim);border-radius:7px;border:3px solid var(--col-bg);}
.kanban::-webkit-scrollbar-thumb:hover{background:var(--text);}
/* Колонки «без фона»: карточки стоят прямо на фоне страницы, этапы разделены
   тонкой линией, цвет этапа — полоска под заголовком. */
.kanban-col{
  min-width:290px;max-width:290px;padding:0 8px;
  display:flex;flex-direction:column;min-height:0;
  border-right:1px solid var(--col-divider);
}
.kanban-col:first-child{padding-left:0;}
.kanban-col:last-child{border-right:none;}
.kanban-col-head{padding:12px 6px 10px;margin:0 2px 4px;box-shadow:inset 0 -2px 0 var(--stage-color, var(--border));}
.kanban-col-head-top{display:flex;align-items:center;gap:8px;}
.kanban-col-dot{width:8px;height:8px;border-radius:50%;flex:none;}
.kanban-col-title{
  flex:1;min-width:0;font-weight:700;color:var(--text);
  text-transform:uppercase;letter-spacing:.02em;font-size:11.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.kanban-col-count{
  background:var(--card);border-radius:12px;padding:1px 9px;font-size:11.5px;font-weight:700;
  color:var(--text-dim);flex:none;box-shadow:0 1px 2px rgba(20,30,50,.06);
}
.kanban-col-sum{font-weight:700;font-size:17px;color:var(--text);margin-top:6px;}
.kanban-col-owner{font-weight:500;color:var(--blue-dark);font-size:11px;margin-top:4px;}
.kanban-col-body{
  flex:1;overflow-y:auto;padding:8px 2px 10px;min-height:60px;
  /* вверх-вниз прокрутка остаётся в колонке, а влево-вправо уходит доске */
  overscroll-behavior-y:contain;overscroll-behavior-x:auto;
  border-radius:10px;transition:background .15s;
}
/* Пока карточку тащат — все колонки чуть подсвечены (видно, куда можно бросить),
   колонка под курсором — ярче. */
.kanban.is-dragging .kanban-col-body{background:var(--col-bg);}
.kanban-col-body.drag-over,.kanban.is-dragging .kanban-col-body.drag-over{background:var(--drag-bg);}

.card{
  background:var(--card);border-radius:10px;box-shadow:var(--shadow);
  padding:12px 13px;margin-bottom:10px;cursor:grab;border-left:4px solid transparent;
  transition:box-shadow .15s, transform .1s;
}
.card:hover{box-shadow:0 4px 14px rgba(20,30,50,.1), 0 1px 3px rgba(20,30,50,.08);}
.card:active{cursor:grabbing;}
.card.overdue{border-left-color:var(--red);}
.card-title{font-weight:600;font-size:13.5px;margin-bottom:5px;}
.card-meta{font-size:11.5px;color:var(--text-dim);margin-bottom:3px;}
.card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:8px;}
.card-footer-right{display:flex;align-items:center;gap:6px;}
.card-advance-btn{
  flex:none;width:20px;height:20px;border-radius:50%;border:1px solid var(--border);
  background:var(--chip-bg);color:var(--blue);font-size:12px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;
}
.card-advance-btn:hover{background:var(--blue);color:#fff;border-color:var(--blue);}
.item-advance-btn{
  width:100%;height:auto;border-radius:8px;margin-top:9px;padding:10px 8px;
  background:var(--blue);color:#fff;border:none;font-size:12.5px;font-weight:700;
}
.item-advance-btn:hover{background:var(--blue-dark);color:#fff;}
.card-master{font-size:11px;background:var(--chip-bg);border-radius:20px;padding:2px 8px;color:var(--text-dim);}
.card-deadline{font-size:11px;font-weight:600;}
.card-deadline.overdue{color:var(--red);}

/* ---------- Карточка сделки: товары и мини-воронка ---------- */
.deal-card-body{margin-top:8px;}
.deal-products-toggle{
  display:flex;justify-content:space-between;align-items:center;cursor:pointer;
  font-size:11.5px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.02em;
  padding:4px 0;
}
.deal-products-toggle{padding:6px 0;user-select:none;}
.deal-products-toggle:hover{color:var(--text);}
.deal-products-toggle .chevron{font-size:12px;}
.deal-products-alert{color:var(--orange);font-size:12px;}
.deal-products-list{display:flex;flex-direction:column;gap:8px;margin:4px 0 6px;}
.deal-product-row{display:flex;gap:8px;background:var(--chip-bg);border-radius:8px;padding:7px 8px;}
.deal-product-thumb{width:32px;height:32px;border-radius:6px;object-fit:cover;flex:none;}
.deal-product-thumb-empty{display:flex;align-items:center;justify-content:center;background:var(--input-bg);font-size:14px;}
.deal-product-info{flex:1;min-width:0;overflow:hidden;}
.deal-product-name{font-size:12.5px;font-weight:600;}
.deal-product-comment{font-size:11px;color:var(--text-dim);margin-top:1px;font-style:italic;}
.deal-product-fabric{font-size:11px;color:var(--text-dim);margin-top:3px;}
.deal-product-claim{font-size:11px;font-weight:600;margin-top:4px;}
.deal-product-claim.waiting{color:var(--orange);}
.deal-product-claim.in-progress{color:var(--blue);}
.deal-product-fabric-empty{color:var(--orange);}
.fabric-warning{
  font-size:11px;font-weight:600;color:var(--red);margin-top:4px;
  background:rgba(226,80,74,.12);border-radius:6px;padding:3px 7px;display:inline-block;
}
.card.needs-fabric{border-left-color:var(--orange);}
.deal-prepay{font-weight:400;color:var(--text-dim);}
.deal-progress{display:flex;align-items:center;gap:7px;margin-top:8px;}
.deal-progress-track{flex:1;height:6px;border-radius:3px;background:var(--border);overflow:hidden;}
.deal-progress-fill{height:100%;background:var(--blue);border-radius:3px;}
.deal-progress-pct{font-size:11px;font-weight:600;color:var(--text-dim);flex:none;}

/* ---------- Полоска фото (карточки сделки/производства/задач) + лайтбокс ---------- */
.photo-strip{display:flex;gap:4px;flex:none;align-items:flex-start;flex-wrap:wrap;}
.item-card-photos{margin-bottom:8px;}
.photo-thumb{width:32px;height:32px;border-radius:6px;object-fit:cover;cursor:pointer;flex:none;}
.photo-strip-more{
  display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;
  background:var(--chip-bg);color:var(--text-dim);font-size:11px;font-weight:600;flex:none;
}

.lightbox-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:500;
  display:flex;align-items:center;justify-content:center;padding:40px;
}
.lightbox-img{max-width:90vw;max-height:85vh;object-fit:contain;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.5);}
.lightbox-close{
  position:absolute;top:18px;right:24px;background:rgba(255,255,255,.12);color:#fff;border:none;
  width:38px;height:38px;border-radius:50%;font-size:22px;line-height:1;cursor:pointer;
}
.lightbox-close:hover{background:rgba(255,255,255,.22);}
.lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.12);color:#fff;
  border:none;width:44px;height:44px;border-radius:50%;font-size:20px;cursor:pointer;
}
.lightbox-nav:hover{background:rgba(255,255,255,.22);}
.lightbox-prev{left:24px;}
.lightbox-next{right:24px;}
.lightbox-count{
  position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
  color:#fff;font-size:13px;background:rgba(0,0,0,.4);padding:4px 12px;border-radius:20px;
}

/* ---------- Встроенный просмотр PDF с ТЗ (телефон) ---------- */
.pdf-viewer{position:fixed;inset:0;z-index:600;background:#525659;display:flex;flex-direction:column;}
.pdf-viewer-bar{
  flex:none;display:flex;align-items:center;gap:8px;background:#1b2733;color:#fff;
  padding:8px 10px 8px 14px;padding-top:calc(8px + env(safe-area-inset-top));
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.pdf-viewer-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:600;}
.pdf-viewer-btn{
  flex:none;width:42px;height:42px;border-radius:10px;border:none;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;font-size:22px;line-height:1;
}
.pdf-viewer-close{background:rgba(226,80,74,.9);margin-left:4px;}
.pdf-viewer-pages{
  flex:1;overflow:auto;-webkit-overflow-scrolling:touch;
  padding:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom));
}
.pdf-viewer-pages canvas{display:block;margin:0 auto 8px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.35);}
.pdf-viewer-status{color:#fff;text-align:center;padding:48px 16px;font-size:14px;line-height:1.5;}

/* ---------- Автокомплит клиента/дизайнера в форме сделки ---------- */
.autocomplete-wrap{position:relative;}
.autocomplete-list{
  position:absolute;left:0;right:0;top:calc(100% + 2px);z-index:20;
  background:var(--card);border:1px solid var(--border);border-radius:8px;
  box-shadow:var(--shadow);max-height:180px;overflow-y:auto;
}
.autocomplete-item{padding:8px 11px;font-size:13px;cursor:pointer;display:flex;justify-content:space-between;gap:8px;}
.autocomplete-item:hover{background:var(--hover-bg);}
.autocomplete-phone{color:var(--text-dim);font-size:12px;white-space:nowrap;}

/* ---------- Редактор товаров в форме сделки ---------- */
.product-edit-row{margin-bottom:10px;padding-bottom:10px;border-bottom:1px dashed var(--border);}
.prod-photos-row{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:6px;}
.prod-photo-item{position:relative;flex:none;}
.prod-photo-preview-img{width:40px;height:40px;border-radius:6px;object-fit:cover;cursor:pointer;display:block;}
.prod-photo-remove{
  position:absolute;top:-6px;right:-6px;width:17px;height:17px;border-radius:50%;
  background:var(--red);color:#fff;border:none;font-size:12px;line-height:1;cursor:pointer;padding:0;
}
.product-edit-row-top{display:flex;gap:6px;align-items:center;margin-bottom:6px;flex-wrap:wrap;}
.product-edit-row-top .prod-name{flex:1;min-width:120px;}
.product-edit-row-top .prod-qty{width:56px;flex:none;}
.product-edit-row-top .prod-price{width:90px;flex:none;}
.product-edit-row-top .prod-sum{flex:none;white-space:nowrap;font-size:12.5px;color:var(--text-dim);min-width:90px;text-align:right;}
.product-edit-row-top .prod-photo-btn{flex:none;white-space:nowrap;font-size:12px;padding:6px 9px;}
.prod-photos-row .prod-photo-btn{flex:none;white-space:nowrap;font-size:12px;padding:9px;}
.product-edit-row-top button.btn-danger{flex:none;}
.product-edit-row .prod-comment,.product-edit-row .prod-fabric{width:100%;padding:7px 9px;border:1px solid var(--border);border-radius:6px;background:var(--input-bg);color:var(--text);font-size:12.5px;margin-bottom:6px;}
.product-edit-row .prod-fabric.prod-fabric-empty{border-color:var(--orange);}
/* Товар, к которому прикрепится картинка по Ctrl+V (когда товаров несколько) */
.product-edit-row.paste-target{box-shadow:inset 3px 0 0 var(--blue);padding-left:10px;border-radius:4px;}
.paste-hint{opacity:.7;font-weight:400;}
@media (hover:none){ .paste-hint{display:none;} }  /* на телефоне Ctrl+V нет */

/* ---------- Быстрое добавление товара в карточке сделки ---------- */
.quick-product-add-btn{margin-top:10px;border-style:dashed;color:var(--blue);font-weight:600;}
.quick-product-form{margin-top:10px;padding:12px;border:1px solid var(--blue);border-radius:10px;background:var(--chip-bg);display:flex;flex-direction:column;gap:8px;}
.quick-product-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--text-dim);}
.quick-product-form .prod-photos-row{margin-bottom:0;}
.quick-product-row{display:flex;gap:8px;align-items:center;}
.modal-body .quick-product-row #qp-qty{width:70px;flex:none;}
.modal-body .quick-product-row #qp-price{flex:1;min-width:0;}
.quick-product-sum{flex:none;white-space:nowrap;font-size:13px;color:var(--text-dim);}
.modal-body .quick-product-form input.prod-fabric-empty{border-color:var(--orange);}
.quick-product-actions{display:flex;gap:8px;justify-content:flex-end;}

/* ---------- Tables ---------- */
.table-wrap{background:var(--card);border-radius:10px;box-shadow:var(--shadow);overflow:hidden;}
table{width:100%;border-collapse:collapse;}
th,td{text-align:left;padding:11px 14px;font-size:13px;border-bottom:1px solid var(--border);}
th{color:var(--text-dim);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.02em;background:var(--th-bg);}
tr:last-child td{border-bottom:none;}
tr.row-clickable:hover{background:var(--row-hover);cursor:pointer;}

/* ---------- Task list (master) ---------- */
.task-list{display:flex;flex-direction:column;gap:12px;max-width:760px;}
.task-list-hidden-toggle{max-width:760px;margin:16px 0;}
.task-card{
  background:var(--card);border-radius:10px;box-shadow:var(--shadow);cursor:pointer;
  padding:16px 18px;border-left:5px solid var(--blue);display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.task-card:hover{box-shadow:0 4px 14px rgba(0,0,0,.12);}
.task-card.stage-done{border-left-color:var(--green);opacity:.7;}
.task-card.overdue{border-left-color:var(--red);}
.task-card.needs-fabric{border-left-color:var(--orange);}
.task-card.task-card-done{border-left-color:var(--green);opacity:.65;}
.task-card.task-card-done .card-meta{margin-bottom:0;}
.task-card.task-card-upcoming{border-left-color:var(--orange);opacity:.85;}
.task-card-info h3{margin:0 0 6px;font-size:15px;}
.task-card-info .card-meta{font-size:12.5px;}
.task-card-action{flex:none;text-align:right;}
.task-stage-label{font-size:11.5px;color:var(--text-dim);margin-bottom:6px;}
.task-card-info{min-width:0;flex:1;}
.task-card-specs{white-space:pre-line;}

/* Переключатель «В работе / Скоро / Готово» (Заказы) и фильтры задачника */
.task-tabs{display:flex;gap:4px;max-width:760px;margin-bottom:16px;background:var(--chip-bg);padding:4px;border-radius:10px;}
.task-tab{flex:1;border:none;background:none;padding:8px 10px;border-radius:7px;font-size:13.5px;font-weight:600;color:var(--text-dim);cursor:pointer;}
.task-tab:hover{color:var(--text);}
.task-tab.active{background:var(--card);color:var(--text);box-shadow:var(--shadow);}
.task-tab-count{display:inline-block;min-width:20px;padding:0 6px;border-radius:10px;background:var(--border);font-size:11.5px;margin-left:3px;}
.task-section-title{max-width:760px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--text-dim);margin:0 2px 8px;}
.task-section-title span{color:var(--text);margin-left:4px;}
.task-list + .task-section-title{margin-top:22px;}
.task-empty{max-width:760px;text-align:center;color:var(--text-dim);padding:44px 16px;font-size:14px;line-height:1.6;}
.task-hint{max-width:760px;font-size:12.5px;color:var(--text-dim);margin:0 2px 10px;}

/* ---------- Профиль (вкладка на телефоне) ---------- */
.profile-page{max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:14px;}
.profile-card{background:var(--card);border-radius:12px;box-shadow:var(--shadow);padding:22px 16px;text-align:center;}
.profile-avatar{
  width:64px;height:64px;border-radius:50%;background:var(--blue);color:#fff;font-size:28px;font-weight:700;
  display:flex;align-items:center;justify-content:center;margin:0 auto 10px;
}
.profile-name{font-size:18px;font-weight:700;}
.profile-role{margin-top:6px;color:var(--text-dim);font-size:13px;}
.profile-section-label{font-size:11.5px;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:.03em;margin:4px 2px -6px;}
.profile-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.profile-stat{background:var(--card);border-radius:10px;box-shadow:var(--shadow);padding:14px;}
.profile-stat b{display:block;font-size:24px;}
.profile-stat span{font-size:12.5px;color:var(--text-dim);}
.profile-stat-bad b{color:var(--red);}
.profile-links{background:var(--card);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;}
.profile-link{
  display:flex;gap:12px;align-items:center;width:100%;padding:14px 16px;background:none;border:none;
  border-bottom:1px solid var(--border);color:var(--text);font-size:15px;text-align:left;cursor:pointer;
}
.profile-link:last-child{border-bottom:none;}
.profile-theme{background:var(--card);border-radius:12px;box-shadow:var(--shadow);padding:14px 16px;margin:0;}
.profile-theme .theme-opt{padding:10px 0;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:18px;}
.profile-theme .theme-opt.active{color:#fff;}
.profile-theme.sound-toggle .theme-opt,.profile-theme.push-toggle .theme-opt{flex-direction:row;justify-content:center;font-size:14px;font-weight:600;padding:11px 0;}
.theme-opt-label{display:none;}
.profile-theme .theme-opt-label{display:block;font-size:11.5px;font-weight:600;}
.profile-logout{padding:13px;font-size:15px;color:var(--red);}

/* ---------- Нижняя панель вкладок (только телефон) ---------- */
.bottom-nav{display:none;}

/* ---------- Dashboard ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:22px;}
.stat-card{background:var(--card);border-radius:10px;box-shadow:var(--shadow);padding:16px 18px;}
.stat-card .num{font-size:26px;font-weight:700;}
.stat-card .label{color:var(--text-dim);font-size:12.5px;margin-top:2px;}
.stat-card .sub{font-size:12.5px;font-weight:600;margin-top:4px;}
.stat-card-link{cursor:pointer;}
.stat-card-link:hover{box-shadow:0 4px 14px rgba(0,0,0,.12);}

/* Дашборд: разделы, фильтр периода, список выполненных работ */
.dash{max-width:1100px;}
.dash .dash-stats{margin-bottom:18px;}
.dash-section-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--text-dim);margin:6px 2px 10px;}
.dash-section-title span{color:var(--text);margin-left:4px;}
.dash-tables{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:22px;}
.dash-tables .table-wrap{flex:1;min-width:280px;}
.dash-hint{font-size:12.5px;color:var(--text-dim);margin:-12px 2px 18px;}
.dash-period{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px;}
.dash-period-tabs{display:flex;gap:4px;background:var(--chip-bg);padding:4px;border-radius:10px;}
.dash-period-btn{border:none;background:none;padding:7px 12px;border-radius:7px;font-size:13px;font-weight:600;color:var(--text-dim);cursor:pointer;white-space:nowrap;}
.dash-period-btn:hover{color:var(--text);}
.dash-period-btn.active{background:var(--card);color:var(--text);box-shadow:var(--shadow);}
.dash-period-custom{display:flex;align-items:center;gap:6px;}
.dash-period-custom input{padding:7px 9px;border:1px solid var(--border);border-radius:6px;background:var(--input-bg);color:var(--text);font-size:13px;}
.dash-period-label{font-size:13px;font-weight:600;}
.worklog{background:var(--card);border-radius:10px;box-shadow:var(--shadow);overflow:hidden;margin-bottom:22px;}
.worklog-row{display:flex;gap:14px;padding:11px 14px;border-bottom:1px solid var(--border);align-items:baseline;}
.worklog-row:last-child{border-bottom:none;}
.worklog-date{flex:none;width:120px;font-size:12.5px;color:var(--text-dim);}
.worklog-main{min-width:0;flex:1;}
.worklog-name{font-weight:600;font-size:14px;}
.worklog-qty{color:var(--text-dim);font-weight:500;}
.worklog-meta{font-size:12.5px;color:var(--text-dim);margin-top:2px;}
/* ---------- Доделки и переделки ---------- */
.item-flags{display:flex;flex-wrap:wrap;gap:5px;margin:3px 0 4px;}
.flag{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px;white-space:nowrap;}
.flag-todo{background:rgba(245,166,35,.16);color:var(--orange);}
.flag-rework{background:rgba(226,80,74,.14);color:var(--red);}
.rework-note{font-size:12.5px;color:var(--red);margin:2px 0 4px;}
.todo-block{display:flex;flex-direction:column;gap:6px;}
.todo-row{display:flex;gap:10px;align-items:center;justify-content:space-between;background:rgba(245,166,35,.1);border-radius:8px;padding:8px 10px;}
.todo-main{min-width:0;flex:1;}
.todo-text{font-size:13.5px;font-weight:600;}
.todo-meta{font-size:11.5px;color:var(--text-dim);margin-top:2px;}
.todo-actions{display:flex;gap:6px;flex:none;}
.todo-closed summary{cursor:pointer;font-size:12px;color:var(--text-dim);margin:2px 0;}
.todo-add{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px;}
.modal-body .todo-add input{flex:2;min-width:180px;}
.modal-body .todo-add select{flex:1;min-width:140px;width:auto;}
.todo-add .btn{flex:none;}
.rework-row{margin-top:12px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;}
.rework-banner{background:rgba(226,80,74,.1);border-left:3px solid var(--red);border-radius:6px;padding:8px 10px;font-size:13px;align-self:stretch;}
.rework-btn{color:var(--red);}
.todo-card{border-left-color:var(--orange);}
.todo-card-text{font-size:14px;font-weight:700;color:var(--orange);margin:4px 0;}
.adv-q{font-size:14.5px;margin-bottom:12px;line-height:1.5;}
.adv-todos{font-size:12.5px;color:var(--orange);margin-bottom:10px;}
.modal-body label.adv-todo-toggle{display:flex;flex-wrap:wrap;gap:2px 8px;align-items:center;font-size:14px;color:var(--text);cursor:pointer;margin:6px 0;}
.modal-body label.adv-todo-toggle input{width:auto;}
.adv-todo-toggle small{flex-basis:100%;padding-left:24px;color:var(--text-dim);font-weight:400;}
#adv-todo-form{margin-top:6px;}
.rw-fault{display:flex;flex-direction:column;gap:8px;}
.modal-body label.rw-fault-opt{display:flex;gap:10px;align-items:flex-start;margin:0;padding:9px 11px;border:1px solid var(--border);border-radius:8px;cursor:pointer;color:var(--text);font-weight:400;}
.modal-body label.rw-fault-opt input{width:auto;margin-top:3px;}
.rw-fault-opt b{display:block;font-size:13.5px;}
.rw-fault-opt small{display:block;font-size:12px;color:var(--text-dim);}
.rw-fault-opt:has(input:checked){border-color:var(--blue);background:rgba(47,140,240,.06);}

/* ---------- Задачник ---------- */
.nav-badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--red);color:#fff;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;}
.tk-page{max-width:760px;}
.tk-row{display:flex;gap:12px;align-items:center;padding:11px 14px;border-bottom:1px solid var(--border);cursor:pointer;}
.tk-row:last-child{border-bottom:none;}
.tk-row:hover{background:var(--row-hover);}
.tk-main{min-width:0;flex:1;}
.tk-title{font-size:14px;font-weight:600;line-height:1.4;overflow-wrap:anywhere;}
.tk-type{margin-right:2px;}
.tk-meta{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;font-size:12px;color:var(--text-dim);margin-top:4px;}
.tk-link{color:var(--blue);font-weight:600;}
.tk-noone{font-style:italic;}
.tk-status-pill{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px;white-space:nowrap;}
.tk-status-pill.st-new{background:rgba(47,140,240,.14);color:var(--blue);}
.tk-status-pill.st-progress{background:rgba(245,166,35,.18);color:var(--orange);}
.tk-status-pill.st-done{background:rgba(46,204,113,.16);color:#1f9d57;}
.tk-actions{display:flex;gap:6px;flex:none;}
.tk-done .tk-title{text-decoration:line-through;color:var(--text-dim);font-weight:500;}
.tk-overdue{box-shadow:inset 3px 0 0 var(--red);}
.tk-overdue .tk-due,.tk-overdue-text{color:var(--red);font-weight:700;}
.task-section-title.tk-overdue-text span{color:var(--red);}
.tk-page .worklog{margin-bottom:18px;}
.tk-page .task-list-hidden-toggle{margin:4px 0 12px;}
.tk-block{display:flex;flex-direction:column;gap:8px;align-items:stretch;margin-bottom:14px;}
.tk-block .worklog{margin-bottom:0;}
.tk-block .tk-row{padding:9px 11px;}
.tk-add{align-self:flex-start;}
.tk-view-title{font-size:16px;font-weight:700;line-height:1.45;margin-bottom:10px;white-space:pre-wrap;overflow-wrap:anywhere;}
.tk-types{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px;}
.tk-type-btn{border:1px solid var(--border);background:var(--chip-bg);color:var(--text);padding:7px 11px;border-radius:18px;font-size:13px;cursor:pointer;}
.tk-type-btn.active{border-color:var(--blue);background:rgba(47,140,240,.12);color:var(--blue);font-weight:700;}
.tk-people{display:flex;flex-wrap:wrap;gap:6px;max-height:230px;overflow-y:auto;padding:2px;margin-bottom:6px;}
.modal-body label.tk-person{display:flex;gap:8px;align-items:center;flex:1 1 200px;margin:0;padding:7px 10px;border:1px solid var(--border);border-radius:8px;cursor:pointer;color:var(--text);font-weight:500;font-size:13.5px;}
.modal-body label.tk-person input{width:auto;margin:0;}
.tk-person small{display:block;font-size:11.5px;color:var(--text-dim);font-weight:400;}
.modal-body label.tk-person.on{border-color:var(--blue);background:rgba(47,140,240,.07);}

/* ---------- Строка товара: шкала этапов, под ней кто · значки ---------- */
.psl-bar{--c:var(--blue);display:flex;align-items:center;gap:8px;margin-top:7px;}
.psl-segs{flex:1;min-width:0;display:flex;gap:3px;}
.psl-seg{flex:1;height:6px;border-radius:3px;background:color-mix(in srgb, var(--text-dim) 28%, transparent);}
.psl-seg.done{background:color-mix(in srgb, var(--c) 45%, transparent);}
.psl-seg.current{background:var(--c);}
.psl-seg.was{background:transparent;box-shadow:inset 0 0 0 1.5px var(--orange);}
.psl-bar-label{flex:none;max-width:48%;font-size:11.5px;font-weight:700;color:var(--c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.psl-bar-queue .psl-seg{opacity:.6;}
.psl-bar-queue .psl-bar-label{color:var(--text-dim);font-weight:600;}
/* Узкая карточка на доске продаж: шкала на всю ширину, название этапа — под ней. */
.deal-card .psl-bar{flex-wrap:wrap;row-gap:4px;}
.deal-card .psl-segs{flex-basis:100%;}
.deal-card .psl-bar-label{max-width:100%;}
.product-status-line{display:flex;flex-wrap:wrap;gap:5px 8px;align-items:center;margin-top:6px;font-size:12px;}
.psl-who{color:var(--text-dim);white-space:nowrap;}
.psl-wait{color:var(--orange);}
.deal-product-sum{float:right;font-weight:600;color:var(--text-dim);font-size:12.5px;margin-left:8px;}
.item-icons{display:inline-flex;gap:6px;align-items:center;vertical-align:middle;margin-left:4px;}
.ic{display:inline-block;font-size:11.5px;font-weight:700;padding:1px 6px;border-radius:9px;background:var(--chip-bg);color:var(--text-dim);white-space:nowrap;line-height:1.5;}
.ic-task{background:rgba(245,166,35,.16);color:var(--orange);}
.ic-rework{background:rgba(226,80,74,.14);color:var(--red);}
.ic-warn{background:rgba(226,80,74,.1);color:var(--red);}

/* «⋯ Ещё» в карточке изделия: откат и его история */
.more-menu{margin-top:12px;align-self:stretch;}
.more-menu > summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--text-dim);padding:6px 0;list-style:none;}
.more-menu > summary::-webkit-details-marker{display:none;}
.more-menu[open] > summary{color:var(--text);}
.more-menu[open]{display:flex;flex-direction:column;gap:8px;align-items:flex-start;}
.rw-hint{font-size:12.5px;color:var(--text-dim);line-height:1.5;background:var(--chip-bg);border-radius:8px;padding:8px 10px;align-self:stretch;}
.rw-hint .btn{margin-top:8px;display:block;}
.rw-history{display:flex;flex-direction:column;gap:3px;align-self:stretch;border-top:1px dashed var(--border);padding-top:8px;}

/* Списки за цифрами дашборда (сделки, платежи, изделия) */
.dlist-summary{font-size:14px;margin:0 2px 12px;}
.dlist-row{display:flex;gap:14px;align-items:center;justify-content:space-between;padding:11px 14px;border-bottom:1px solid var(--border);cursor:pointer;}
.dlist-row:last-child{border-bottom:none;}
.dlist-row:hover{background:var(--row-hover);}
.dlist-main{min-width:0;flex:1;}
.dlist-stage{font-weight:600;}
.dlist-cols{display:flex;gap:16px;flex:none;text-align:right;}
.dlist-col > span{display:block;font-size:11px;color:var(--text-dim);}
.dlist-col b{font-size:13.5px;white-space:nowrap;}
.dlist-strong b{font-size:15px;}
@media (max-width:768px){
  .dlist-row{flex-direction:column;align-items:stretch;gap:6px;}
  .dlist-cols{justify-content:flex-start;text-align:left;gap:18px;}
}
.worklog-card{display:flex;gap:12px;padding:12px 14px;border-bottom:1px solid var(--border);cursor:pointer;align-items:flex-start;}
.worklog-card:last-child{border-bottom:none;}
.worklog-card:hover{background:var(--row-hover);}
.worklog-photo-wrap{position:relative;flex:none;width:64px;height:64px;}
.worklog-card .worklog-photo{width:64px;height:64px;border-radius:8px;}
.worklog-photo-count{
  position:absolute;right:3px;bottom:3px;background:rgba(0,0,0,.6);color:#fff;
  font-size:11px;font-weight:700;padding:1px 6px;border-radius:9px;pointer-events:none;
}
.worklog-photo-empty{display:flex;align-items:center;justify-content:center;border-radius:8px;background:var(--chip-bg);font-size:24px;}
.worklog-card .worklog-date{width:auto;font-size:12px;margin-bottom:2px;}
.worklog-card .worklog-name{font-size:15px;}
.worklog-line{font-size:13px;color:var(--text);margin-top:3px;}
.worklog-deal{color:var(--text-dim);font-size:12px;}
.worklog-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;}
.worklog-stage{font-size:11.5px;font-weight:600;background:var(--chip-bg);padding:2px 8px;border-radius:10px;color:var(--text-dim);}

/* ---------- Modal ---------- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(15,20,30,.45);
  display:flex;align-items:center;justify-content:center;z-index:100;padding:20px;
}
.modal{
  background:var(--card);border-radius:12px;width:540px;max-width:100%;max-height:88vh;
  display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.3);
}
.modal.modal-wide{width:820px;}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--border);}
.modal-header h2{font-size:16px;margin:0;}
.modal-close{background:none;border:none;font-size:22px;color:var(--text-dim);line-height:1;}
.modal-body{padding:20px 22px;overflow-y:auto;}
.modal-body label{display:block;font-size:12.5px;color:var(--text-dim);font-weight:600;margin:12px 0 5px;}
.modal-body label:first-child{margin-top:0;}
.modal-body input,.modal-body select,.modal-body textarea{
  width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:6px;background:var(--input-bg);color:var(--text);
}
.modal-body textarea{resize:vertical;min-height:60px;}
.modal-actions{margin-top:20px;display:flex;gap:10px;justify-content:flex-end;}
.form-row{display:flex;gap:10px;}
.form-row > *{flex:1;}

.material-row{display:flex;gap:8px;align-items:center;margin-bottom:6px;}
.material-row input{flex:1;}
.material-row select{width:130px;}
.material-row button{flex:none;}

/* ---------- Управление колонками ---------- */
.stage-row{display:flex;gap:10px;align-items:center;margin-bottom:8px;}
.stage-row .stage-name{flex:1;}
.stage-row .stage-color{
  flex:none;width:28px;height:28px;padding:0;border:1px solid var(--border);border-radius:6px;
  background:none;cursor:pointer;
}
.stage-row .stage-color::-webkit-color-swatch-wrapper{padding:2px;}
.stage-row .stage-color::-webkit-color-swatch{border:none;border-radius:4px;}
.stage-row .stage-count{font-size:11.5px;color:var(--text-dim);white-space:nowrap;}
.stage-row .stage-locked{font-size:13px;}
.stage-visibility{
  flex:none;width:26px;height:26px;border-radius:6px;border:1px solid var(--border);
  background:var(--chip-bg);font-size:13px;cursor:pointer;padding:0;
}
.stage-visibility:hover{background:var(--hover-bg);}
.stage-row button{flex:none;}
.stage-order{display:flex;flex-direction:column;flex:none;gap:1px;}
.stage-order button{
  width:20px;height:15px;border:1px solid var(--border);background:var(--chip-bg);color:var(--text-dim);
  font-size:8px;line-height:1;cursor:pointer;padding:0;border-radius:3px;
}
.stage-order button:hover:not(:disabled){background:var(--blue);color:#fff;border-color:var(--blue);}
.stage-order button:disabled{opacity:.3;cursor:default;}
.stage-add-row{display:flex;gap:8px;margin-top:10px;padding-top:12px;border-top:1px dashed var(--border);}
.stage-add-row input{flex:1;padding:9px 11px;border:1px solid var(--border);border-radius:6px;background:var(--input-bg);color:var(--text);}
.stage-add-row button{flex:none;}

.specialty-row{margin-bottom:14px;padding-bottom:14px;border-bottom:1px dashed var(--border);}
.specialty-row-head{display:flex;gap:8px;align-items:center;margin-bottom:9px;}
.specialty-row-head .specialty-name{flex:1;padding:9px 11px;border:1px solid var(--border);border-radius:6px;background:var(--input-bg);color:var(--text);}
.specialty-row-head .stage-count{font-size:11.5px;color:var(--text-dim);white-space:nowrap;}
.specialty-row-head button{flex:none;}
.specialty-stages{display:flex;flex-wrap:wrap;gap:8px;}
.specialty-stage-chk{display:flex;align-items:center;gap:6px;font-size:12.5px;background:var(--chip-bg);padding:5px 10px 5px 8px;border-radius:20px;cursor:pointer;color:var(--text);}
.specialty-stage-chk input{margin:0;}

/* ---------- Toast ---------- */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:var(--navy);color:#fff;padding:11px 20px;border-radius:8px;font-size:13.5px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:200;
}
.toast.error{background:var(--red);}

/* ---------- «Сохранить изменения?» — поверх окна с формой ---------- */
.confirm-overlay{
  position:fixed;inset:0;z-index:300;background:rgba(15,20,30,.55);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.confirm-box{background:var(--card);border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.35);padding:20px;width:400px;max-width:100%;}
.confirm-title{font-size:16px;font-weight:700;margin-bottom:8px;}
.confirm-text{font-size:13.5px;color:var(--text-dim);line-height:1.5;margin-bottom:16px;}
.confirm-actions{display:flex;flex-direction:column;gap:8px;}
.confirm-actions .btn{width:100%;padding:11px;font-size:14px;}
.confirm-discard{color:var(--red);}

.empty-state{color:var(--text-dim);font-size:13.5px;padding:30px;text-align:center;}
.empty-hint{color:var(--text-dim);font-style:italic;}
.tz-file-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.tz-attach-btn{display:inline-flex;align-items:center;gap:4px;cursor:pointer;}
.tz-upload-btn, .modal-body label.tz-upload-btn{display:inline-flex;align-items:center;gap:4px;cursor:pointer;margin:0;}
.tz-upload-btn[aria-busy="true"], .prod-photo-btn[aria-busy="true"]{cursor:progress;opacity:.75;}
.tz-file-info{display:inline-flex;align-items:baseline;gap:6px;min-width:0;flex:1;font-size:12.5px;color:var(--text-dim);}
.tz-file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px;}
.tz-file-size{white-space:nowrap;}
.finance-filter-select{font-size:12px;font-weight:600;background:transparent;border:none;color:inherit;cursor:pointer;}
.stage-owner-hint{font-size:12px;color:var(--text-dim);margin-top:6px;}

.section-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}

@media (max-width:860px){
  .sidebar{width:64px;}
  .sidebar-logo,.nav-item span:last-child,.sidebar-user-role,.sidebar-user-name,.sidebar .theme-switcher,.sidebar .sound-toggle,.sidebar .push-toggle,.logout-label{display:none;}
  .nav-item{justify-content:center;}
  .sidebar-user{padding:14px 8px 0;}
}

/* ---------- Узкий экран (телефон, планшет, маленький ноутбук): шапка в две строки ----------
   1-я строка — название + «Кто в цеху» + смена (всегда одна строка, длинное название
   обрезается многоточием); 2-я строка — кнопки раздела («+ Новая сделка» и т.п.),
   листаются вбок. */
@media (max-width:1100px){
  .topbar{flex-wrap:wrap;gap:8px;}
  .topbar-left{flex:1;min-width:0;}
  .topbar h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
  .topbar-right{display:contents;}
  .presence-widget,.shift-widget,.notif-bell-wrap{flex:none;}
  .topbar-actions{order:10;flex:1 0 100%;overflow-x:auto;flex-wrap:nowrap;gap:6px;scrollbar-width:none;}
  .topbar-actions::-webkit-scrollbar{display:none;}
  .topbar-actions:empty{display:none;}
  .topbar-actions .btn,.topbar-actions select{flex:none;white-space:nowrap;padding:7px 11px;font-size:13px;}
}

/* ---------- Телефон: боковое меню → нижняя панель, крупные карточки задач ---------- */
@media (max-width:768px){
  .app{flex-direction:column;height:100vh;height:100dvh;}
  /* Без min-height:0 длинная страница (например, дашборд) растягивает .main
     и выталкивает нижнюю панель за край экрана — прокручиваться должен только #content. */
  .main,.content{min-height:0;}
  .sidebar,.sidebar-toggle-btn{display:none;}
  .topbar{padding:10px 12px;padding-top:calc(10px + env(safe-area-inset-top));}
  .topbar h1{font-size:18px;}
  .topbar-actions{margin:0 -12px;padding:0 12px 2px;}
  /* Колокольчик на телефоне заменяет вкладка «Уведомления» внизу. */
  .topbar .notif-bell-wrap{display:none;}
  .shift-btn{padding:7px 12px;font-size:13px;}
  .shift-on .shift-label,.shift-today{display:none;}
  .shift-stop-icon{display:inline;}
  .presence-btn{padding:7px 10px;font-size:13px;}
  .presence-label{display:none;}
  .content{padding:14px 12px 24px;}

  .bottom-nav{
    display:flex;flex:none;background:var(--card);border-top:1px solid var(--border);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .bottom-nav-item{
    flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:8px 2px 7px;min-height:58px;background:none;border:none;cursor:pointer;
    color:var(--text-dim);font-size:11px;font-weight:600;
  }
  .bottom-nav-item.active{color:var(--blue);}
  .bottom-nav-icon{position:relative;font-size:22px;line-height:1;}
  .bottom-nav-item:not(.active) .bottom-nav-emoji{filter:grayscale(1);opacity:.6;}
  .bottom-nav-label{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .bottom-nav-badge{
    position:absolute;top:-5px;right:-13px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
    background:var(--red);color:#fff;font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;
  }
  .bottom-nav-badge-muted{background:var(--text-dim);}

  .task-tabs{margin-bottom:12px;}
  .task-tab{padding:9px 4px;font-size:13px;}
  .tk-row{flex-wrap:wrap;}
  .tk-actions{width:100%;justify-content:flex-end;}
  .tk-person{flex-basis:100%;}

  .dash .stat-grid{grid-template-columns:1fr 1fr;gap:10px;}
  .dash .stat-card{padding:13px 14px;}
  .dash .stat-card .num{font-size:21px;}
  .dash-period{flex-direction:column;align-items:stretch;}
  .dash-period-tabs{overflow-x:auto;}
  .dash-period-btn{flex:1;padding:9px 6px;}
  .dash-period-custom input{flex:1;min-width:0;font-size:16px;}
  .dash-tables{gap:12px;}
  .dash-tables .table-wrap{min-width:100%;overflow-x:auto;}
  .worklog-row{flex-direction:column;gap:2px;}
  .worklog-date{width:auto;font-size:12px;}
  .task-list{max-width:none;gap:10px;}
  .task-card{flex-direction:column;align-items:stretch;gap:12px;padding:14px;}
  .task-card:hover{box-shadow:var(--shadow);}
  .task-card-info h3{font-size:17px;}
  .task-card-info .card-meta{font-size:14px;margin-bottom:4px;}
  .task-card .item-card-photos{gap:6px;}
  .task-card .photo-thumb,.task-card .photo-strip-more{width:64px;height:64px;border-radius:8px;}
  .task-card .btn-tz-open{width:100%;padding:11px;font-size:15px;margin:6px 0 4px;}
  .task-card .fabric-warning{font-size:13px;}
  .task-card-action{text-align:center;}
  .task-card-action .btn{width:100%;padding:13px;font-size:16px;border-radius:10px;}
  .task-card-action .pill{font-size:13px;padding:6px 14px;}

  /* Окна — на весь экран; шрифт полей 16px, иначе iPhone приближает страницу при вводе */
  .modal-overlay{padding:0;align-items:stretch;}
  .modal,.modal.modal-wide{width:100%;max-height:none;height:100%;border-radius:0;}
  .modal-header{padding:14px 16px;padding-top:calc(14px + env(safe-area-inset-top));}
  .modal-close{font-size:30px;padding:0 4px;}
  .modal-body{padding:16px 16px calc(20px + env(safe-area-inset-bottom));}
  .modal-body input,.modal-body select,.modal-body textarea{font-size:16px;}
  #login-form input,#login-form select{font-size:16px;}

  .toast{bottom:calc(84px + env(safe-area-inset-bottom));max-width:calc(100% - 32px);text-align:center;}
  .lightbox-overlay{padding:0;}
  .lightbox-img{max-width:100vw;max-height:80vh;border-radius:0;}
  .lightbox-prev{left:8px;}
  .lightbox-next{right:8px;}
}

/* ---------- Просмотр сделки: две колонки ---------- */
.deal-view-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;}
@media (max-width:700px){ .deal-view-grid{grid-template-columns:1fr;} }

.view-field{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--border);font-size:13px;}
.view-field:first-child{padding-top:0;}
.view-label{color:var(--text-dim);flex:none;}
.view-value{font-weight:600;text-align:right;}
.view-progress{margin:12px 0 16px;}
.view-section-label{display:block;font-size:11.5px;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:.03em;margin:14px 0 8px;}

.deal-info-card{background:var(--chip-bg);border-radius:10px;padding:12px 14px;margin-bottom:12px;}
.deal-info-main{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.deal-info-name{font-size:16px;font-weight:700;}
.deal-info-phone{font-size:12.5px;color:var(--text-dim);}
.deal-info-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;font-size:12.5px;color:var(--text-dim);align-items:center;}
.deal-info-stage-badge{
  padding:2px 10px;border-radius:20px;font-size:11px;font-weight:700;
  background:rgba(47,140,240,.16);color:var(--blue-dark);
}

.deal-finance-card{background:var(--chip-bg);border-radius:10px;padding:12px 14px;margin-bottom:12px;}
.deal-finance-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center;}
.deal-finance-stat .num{font-size:15px;font-weight:700;}
.deal-finance-stat .lbl{font-size:10.5px;color:var(--text-dim);margin-top:2px;}
.deal-finance-subrow{margin-top:10px;padding-top:10px;border-top:1px solid var(--border);font-size:12px;color:var(--text-dim);}
.deal-finance-subrow b{color:var(--text);}

.view-products-list{display:flex;flex-direction:column;gap:8px;}
.view-product-row{display:flex;gap:10px;background:var(--chip-bg);border-radius:8px;padding:9px 10px;}
.view-product-info{flex:1;min-width:0;}
.view-product-open,.deal-product-open{cursor:pointer;transition:box-shadow .12s;}
.view-product-open:hover,.deal-product-open:hover{box-shadow:inset 0 0 0 1px var(--blue);}
.pc-chip{display:inline-block;font-size:11px;font-weight:600;color:var(--blue);background:rgba(47,140,240,.12);padding:1px 7px;border-radius:10px;margin-left:4px;vertical-align:1px;}

/* ---------- Карточка товара: шапка с главным, ниже блоки «О товаре» + «Задачи» | комментарии ---------- */
.pcard-grid{align-items:start;}
.pcard-left{display:flex;flex-direction:column;gap:14px;min-width:0;}
.pcard-right{display:flex;flex-direction:column;min-width:0;}

.pcard-hero{display:flex;gap:16px;align-items:flex-start;background:var(--col-bg);border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:16px;}
.pcard-hero-main{flex:1;min-width:0;}
.pcard-photos{display:flex;flex-direction:column;gap:6px;flex:none;width:132px;}
.pcard-photos .pcard-photo-main{width:132px;height:108px;border-radius:10px;}
.pcard-photo-row{display:flex;gap:6px;}
.pcard-photos .pcard-photo-small{width:40px;height:40px;border-radius:7px;}
.pcard-photo-more{position:relative;display:block;width:40px;height:40px;flex:none;}
.pcard-photo-more > span{position:absolute;inset:0;border-radius:7px;background:rgba(10,15,22,.6);color:#fff;
  font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center;pointer-events:none;}
.pcard-nophoto{flex:none;width:132px;height:108px;border-radius:10px;background:var(--chip-bg);color:var(--text-dim);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:24px;}
.pcard-nophoto span{font-size:12px;}
.pcard-name{font-size:18px;font-weight:700;line-height:1.3;}
.pcard-hero .psl-bar{margin-top:10px;}
.pcard-hero .psl-segs{max-width:320px;}
.pcard-chips{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;margin-top:12px;}
.pcard-chip{display:inline-block;padding:4px 10px;border-radius:14px;font-size:12.5px;font-weight:600;background:var(--chip-bg);color:var(--text);white-space:nowrap;}
.pcard-chip-wait{background:rgba(245,166,35,.15);color:var(--orange);}
.pcard-chip-warn{background:rgba(226,80,74,.13);color:var(--red);}
.pcard-chip-muted{color:var(--text-dim);font-weight:500;}
.pcard-hero .rework-banner{margin-top:10px;}

.pcard-box{background:var(--col-bg);border:1px solid var(--border);border-radius:12px;padding:12px 14px;min-width:0;}
.pcard-box-title,.pcard-box .pc-panel > .view-section-label{
  display:block;font-size:14px;font-weight:700;color:var(--text);text-transform:none;letter-spacing:0;margin:0 0 10px;
}
.pcard-box .view-field:last-of-type{border-bottom:none;}
.pcard-note{background:var(--chip-bg);border-radius:8px;padding:8px 10px;font-size:13px;white-space:pre-line;margin-top:8px;}
.pcard-note-label{color:var(--text-dim);font-weight:600;}
.pcard-box .tk-block{margin-bottom:0;}
/* Окно изделия: ТЗ в шапке (открыть / прикрепить / удалить), правка — в свёрнутом блоке. */
.pcard-tz{display:contents;}
.pcard-tz .tz-file-row{display:inline-flex;flex-wrap:nowrap;}
.pcard-tz .tz-file-info{flex:0 1 auto;}
.pcard-tz .tz-file-name{max-width:170px;}
.pcard-tz .tz-upload-btn + .empty-hint{display:none;}
.pcard-tz > .empty-hint{display:inline-block;padding:4px 10px;border-radius:14px;font-size:12.5px;font-style:normal;background:var(--chip-bg);color:var(--text-dim);}
.pcard-edit > summary{cursor:pointer;list-style:none;margin:0;color:var(--text-dim);}
.pcard-edit > summary::-webkit-details-marker{display:none;}
.pcard-edit[open] > summary{color:var(--text);margin-bottom:6px;}
.pcard-edit > label:first-of-type{margin-top:0;}
.pcard-left > .more-menu{margin-top:0;padding:0 4px;}
.pcard-box-comments .pc-list{max-height:420px;}
@media (max-width:520px){
  .pcard-hero{flex-direction:column;}
  .pcard-photos{flex-direction:row;width:auto;align-items:flex-end;}
  .pcard-nophoto{width:100%;height:72px;}
}
.pc-panel{display:flex;flex-direction:column;min-height:0;}
.pc-count{color:var(--blue);margin-left:2px;}
.pc-list{display:flex;flex-direction:column;gap:8px;max-height:380px;overflow-y:auto;padding-right:2px;margin-bottom:10px;}
.pc-item{background:var(--chip-bg);border-radius:10px;padding:8px 11px;max-width:92%;}
.pc-item.pc-mine{align-self:flex-end;background:rgba(47,140,240,.14);}
.pc-head{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;font-size:12px;}
.pc-role{font-size:11px;color:var(--text-dim);}
.pc-time{font-size:11px;color:var(--text-dim);margin-left:auto;}
.pc-text{font-size:13.5px;margin-top:3px;white-space:pre-line;word-break:break-word;}
.pc-hint{font-size:11.5px;color:var(--text-dim);margin-top:6px;}
.view-product-stage-badge{
  display:inline-block;margin-top:3px;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600;
  background:rgba(47,140,240,.16);color:var(--blue-dark);
}
.view-product-stage-badge.not-started{background:rgba(107,123,144,.18);color:var(--text-dim);}

.deal-view-right{display:flex;flex-direction:column;min-height:0;}
.deal-tabs{display:flex;gap:4px;margin-bottom:10px;border-bottom:1px solid var(--border);}
.deal-tab-btn{
  flex:1;background:none;border:none;padding:8px 6px;font-size:12px;font-weight:600;color:var(--text-dim);
  cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;
}
.deal-tab-btn.active{color:var(--blue);border-bottom-color:var(--blue);}
.deal-tab-btn:hover{color:var(--text);}
.deal-tab-content{flex:1;min-height:0;display:flex;flex-direction:column;}
.comments-list,.reminders-list,.payments-list{
  display:flex;flex-direction:column;gap:8px;max-height:180px;overflow-y:auto;
  padding-right:2px;margin-bottom:8px;
}
.payment-item{
  position:relative;background:var(--chip-bg);border-radius:8px;padding:8px 30px 8px 10px;
}
.payment-amount{font-size:12.5px;font-weight:600;color:var(--green);}
.payment-meta{font-size:10.5px;color:var(--text-dim);margin-top:2px;}
.payment-remove{
  position:absolute;top:6px;right:6px;background:none;border:none;color:var(--text-dim);
  font-size:15px;cursor:pointer;line-height:1;padding:2px;
}
.payment-remove:hover{color:var(--red);}
.payment-form{display:flex;gap:6px;flex-wrap:wrap;}
.payment-form input,.payment-form select{
  flex:1;min-width:120px;padding:8px 10px;border:1px solid var(--border);border-radius:6px;background:var(--input-bg);color:var(--text);font-size:12.5px;
}
.payment-form button{flex:none;}
.comment-item{background:var(--chip-bg);border-radius:8px;padding:8px 10px;}
.comment-item.comment-system{background:rgba(142,111,224,.12);}
.comment-item.comment-system .comment-text{color:var(--purple);font-weight:600;}
.deal-view-delete{margin-right:auto;}
.trash-row{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:11px 14px;border-bottom:1px solid var(--border);flex-wrap:wrap;}
.trash-row:last-child{border-bottom:none;}
.trash-main{min-width:0;flex:1;}
.trash-actions{display:flex;gap:6px;flex:none;}
.deal-transfer-btn{padding:2px 8px;font-size:11.5px;margin-left:4px;vertical-align:1px;}
.comment-text{font-size:12.5px;}
.comment-meta{font-size:10.5px;color:var(--text-dim);margin-top:3px;}
.comment-form{display:flex;flex-direction:column;gap:6px;}
.comment-form textarea{
  width:100%;min-height:56px;padding:8px 10px;border:1px solid var(--border);border-radius:6px;
  background:var(--input-bg);color:var(--text);font-size:12.5px;resize:vertical;
}
.comment-form button{align-self:flex-end;}

.reminder-item{
  position:relative;background:var(--chip-bg);border-radius:8px;padding:8px 30px 8px 10px;
}
.reminder-item.due{background:rgba(226,80,74,.12);}
.reminder-item.reminder-seen{opacity:.7;}
.reminder-item.reminder-seen .reminder-status{color:var(--green);font-weight:600;}
.reminder-text{font-size:12.5px;font-weight:600;}
.reminder-meta{font-size:10.5px;color:var(--text-dim);margin-top:2px;}
.reminder-remove{
  position:absolute;top:6px;right:6px;background:none;border:none;color:var(--text-dim);
  font-size:15px;cursor:pointer;line-height:1;padding:2px;
}
.reminder-remove:hover{color:var(--red);}
.reminder-form{display:flex;gap:6px;flex-wrap:wrap;}
.reminder-form input{
  padding:8px 10px;border:1px solid var(--border);border-radius:6px;background:var(--input-bg);color:var(--text);font-size:12.5px;
}
.reminder-form input#new-reminder-text{flex:1;min-width:140px;}
.reminder-form input#new-reminder-when{flex:none;}
.reminder-form button{flex:none;}


/* =====================================================================
   НОВОЕ ОФОРМЛЕНИЕ — слой поверх старых правил (без изменения разметки и логики)
   ===================================================================== */
body{font-family:var(--font);background:var(--bg-image),var(--bg);background-attachment:fixed;-webkit-font-smoothing:antialiased;}
.ic-svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;display:block}

/* стекло — только «рамка» интерфейса и всплывающие окна (карточки с данными плотные — по правилам Apple) */
.sidebar,.topbar,.kanban-col,.modal,.notif-dropdown,.autocomplete-list,.confirm-box,.login-card,.bottom-nav,.toast,.table-wrap,.stat-card,.worklog,.task-card,.profile-card,.profile-links,.profile-theme,.profile-stat{
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);}

/* ---- каркас: парящие меню и шапка ---- */
.app{gap:0}
.sidebar{margin:10px 0 10px 10px;height:calc(100% - 20px);border:1px solid var(--border);border-radius:var(--r-shell);
  background:var(--sheen),var(--glass);box-shadow:var(--shadow);padding:14px 10px;}
.sidebar-logo{display:flex;align-items:center;gap:10px;padding:4px 10px 16px;font-size:17px;letter-spacing:-.01em}
.logo-mark{width:32px;height:32px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:radial-gradient(120% 100% at 25% 0%,#3a5a9a 0%,#16213a 55%,#0b1220 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 16px -6px rgba(59,130,246,.6)}
.logo-mark svg{width:20px;height:20px;display:block;overflow:visible}
.nav{display:flex;flex-direction:column;gap:2px}
.nav-item{border-left:0;border-radius:12px;padding:9px 12px;margin:0;font-size:13.5px}
.nav-item:hover{background:var(--chip-bg)}
.nav-item.active{background:var(--sheen),var(--hover-bg);color:var(--text);box-shadow:inset 0 1px 0 var(--hi)}
.nav-item.active .ic-svg{color:var(--blue)}
.nav-item .nav-ic{display:grid;place-items:center;width:20px}
.sidebar-user{margin:10px 0 0;padding:12px;border-top:0;border-radius:16px;background:var(--chip-bg)}
.app.sidebar-collapsed .sidebar-logo{display:flex;justify-content:center;padding:4px 0 16px}
.app.sidebar-collapsed .sidebar-logo .logo-text{display:none}
.app.sidebar-collapsed .nav-item{padding:10px 0}
.app.sidebar-collapsed .sidebar .look-switcher{display:none}

.main{padding:10px 10px 0 10px;gap:10px}
.topbar{border:1px solid var(--border);border-radius:var(--r-shell);background:var(--sheen),var(--glass);box-shadow:var(--shadow);padding:10px 12px 10px 16px}
.topbar h1{font-size:20px;letter-spacing:-.02em}
.sidebar-toggle-btn{border-radius:50%;width:36px;height:36px;background:var(--chip-bg);display:grid;place-items:center}
.content{padding:6px 4px 22px 6px}

/* ---- кнопки (капсулы) и поля ---- */
.btn{border-radius:var(--r-btn);background:var(--sheen),var(--chip-bg);box-shadow:inset 0 1px 0 var(--hi);padding:8px 15px;font-size:13.5px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn:hover{background:var(--sheen),var(--hover-bg)}
.btn-block{width:100%}
.btn-primary{background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,0) 60%),var(--blue);border-color:transparent;color:var(--on-accent);font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 20px -8px var(--blue)}
.btn-primary:hover{background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,0) 60%),var(--accent-hover);color:var(--on-accent)}
.btn-danger{background:transparent;border-color:color-mix(in srgb,var(--red) 50%,transparent);color:var(--red);box-shadow:none}
.btn-danger:hover{background:var(--red);color:#fff}
.btn-ghost{background:transparent;box-shadow:none;border-color:transparent}
.btn-ghost:hover{background:var(--chip-bg);color:var(--text)}
.btn-sm{padding:5px 11px;font-size:12.5px}
.modal-body input,.modal-body select,.modal-body textarea,#login-form input,#login-form select,.stage-add-row input,.specialty-row-head .specialty-name,.dash-period-custom input,.product-edit-row .prod-comment,.product-edit-row .prod-fabric{
  border-radius:10px;background:var(--input-bg);border-color:var(--border);color:var(--text)}
.modal-body input:focus,.modal-body select:focus,.modal-body textarea:focus,#login-form input:focus,#login-form select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 22%,transparent)}
select option{background:var(--bg-solid);color:var(--text)}

/* ---- смена, «кто в цеху», колокольчик ---- */
.shift-btn,.presence-btn{border-radius:99px}
.shift-off{background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,0) 60%),var(--blue);color:var(--on-accent);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 20px -8px var(--blue)}
.shift-off:hover{background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,0) 60%),var(--accent-hover)}
.presence-btn{background:var(--chip-bg)}
.notif-bell{width:38px;height:38px;border-radius:50%;background:var(--chip-bg);border:1px solid var(--border);display:grid;place-items:center;padding:0}
.notif-bell .ic-svg{width:18px;height:18px}

/* ---- всплывающее: окна, списки, подтверждения, тост ---- */
.modal-overlay{background:rgba(5,10,25,.32)}
.modal{background:var(--sheen),var(--pop);border:1px solid var(--border);border-radius:var(--r-shell);box-shadow:var(--shadow-pop)}
.modal{backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%)}
.modal-header{border-bottom-color:var(--border);padding:16px 20px}
.modal-header h2{font-size:18px;letter-spacing:-.01em}
.modal-close{width:36px;height:36px;border-radius:50%;background:var(--chip-bg);display:grid;place-items:center;font-size:20px}
.notif-dropdown,.autocomplete-list,.confirm-box{background:var(--sheen),var(--pop);border-color:var(--border);border-radius:16px;box-shadow:var(--shadow-pop)}
.toast{border-radius:99px;background:var(--pop);color:var(--text);border:1px solid var(--border);box-shadow:var(--shadow-pop)}
.toast.error{background:var(--red);color:#fff}
.confirm-overlay{background:rgba(5,10,25,.4)}

/* ---- канбан: стеклянные колонки на всю высоту ---- */
.kanban{gap:10px}
.kanban-col{background:var(--sheen),var(--glass);border:1px solid var(--border);border-right:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:0 8px}
.kanban-col:first-child{padding-left:8px}
.kanban-col:last-child{border-right:1px solid var(--border)}
.kanban-col-head{box-shadow:none;border-bottom:0;padding:12px 6px 8px}
.kanban-col-dot{box-shadow:0 0 8px currentColor}
.kanban-col-title{text-transform:none;letter-spacing:0;font-size:13px}
.kanban-col-count{background:transparent;box-shadow:none;padding:0}
.kanban-col-sum{font-size:13px;color:var(--text-dim);margin-top:2px}
.kanban-col-owner{color:var(--text-dim)}
.kanban-col-body{border-radius:12px}
.kanban.is-dragging .kanban-col-body{background:transparent}
.kanban-col-body.drag-over,.kanban.is-dragging .kanban-col-body.drag-over{background:var(--drag-bg);box-shadow:inset 0 0 0 2px var(--blue)}
.card{background:var(--sheen),var(--card);border:1px solid var(--border);border-left:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--shadow);padding:12px}
.card:hover{border-color:color-mix(in srgb,var(--blue) 55%,var(--border));box-shadow:var(--shadow)}
.card.overdue{border-left-color:var(--border);box-shadow:inset 3px 0 0 var(--red),var(--shadow)}
.card.needs-fabric{border-left-color:var(--border);box-shadow:inset 3px 0 0 var(--orange),var(--shadow)}
.card-title{font-size:14px}
.card-master{background:var(--chip-bg)}
.card-advance-btn{width:28px;height:28px;background:var(--chip-bg);color:var(--text-dim);font-size:13px}
.item-advance-btn{border-radius:var(--r-btn);background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 60%),var(--blue);color:var(--on-accent)}
.deal-product-row,.view-product-row{border-radius:11px}
.deal-products-toggle{text-transform:none;letter-spacing:0;font-size:12.5px}
.deal-progress-track{background:var(--hover-bg)}
.psl-seg.current{box-shadow:0 0 8px color-mix(in srgb,var(--c) 55%,transparent)}
.fabric-warning{border-radius:8px}

/* ---- таблицы, плитки, списки ---- */
.table-wrap{background:var(--sheen),var(--card);border:1px solid var(--border);border-radius:var(--radius)}
th{background:transparent;text-transform:none;letter-spacing:0;font-size:12px;font-weight:500;color:var(--faint)}
.stat-card{background:var(--sheen),var(--card);border:1px solid var(--border);border-radius:var(--radius)}
.stat-card .num{letter-spacing:-.02em}
.stat-card-link:hover{border-color:color-mix(in srgb,var(--blue) 50%,var(--border));box-shadow:var(--shadow)}
.worklog,.task-card,.profile-card,.profile-links,.profile-theme,.profile-stat{background:var(--sheen),var(--card);border:1px solid var(--border);border-radius:var(--radius)}
.task-card{border-left:1px solid var(--border);box-shadow:inset 4px 0 0 var(--blue),var(--shadow)}
.task-card.overdue{box-shadow:inset 4px 0 0 var(--red),var(--shadow)}
.task-card.needs-fabric,.task-card.task-card-upcoming{box-shadow:inset 4px 0 0 var(--orange),var(--shadow)}
.task-card.task-card-done,.task-card.stage-done{box-shadow:inset 4px 0 0 var(--green),var(--shadow)}
.task-tabs,.dash-period-tabs{border-radius:99px;background:var(--chip-bg);border:1px solid var(--border)}
.task-tab,.dash-period-btn{border-radius:99px}
.task-tab.active,.dash-period-btn.active{background:var(--sheen),var(--hover-bg);box-shadow:inset 0 1px 0 var(--hi)}
.deal-tab-btn.active{color:var(--text);border-bottom-color:var(--blue)}
.tk-type-btn,.specialty-stage-chk,.pcard-chip,.badge,.pill,.flag,.ic{border-radius:99px}
.deal-info-card,.deal-finance-card,.pcard-hero,.pcard-box{border-radius:16px}
.pcard-hero,.pcard-box{background:var(--chip-bg)}

/* ---- вход ---- */
.login-screen{background:var(--bg-image),var(--bg)}
.login-card{background:var(--sheen),var(--pop);border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow-pop)}
.login-logo{display:flex;align-items:center;justify-content:center;gap:10px}
.login-logo .logo-mark{width:40px;height:40px;border-radius:12px}
.login-logo .logo-mark svg{width:24px;height:24px}

/* ---- переключатель вида: стиль, тема, фон, стекло ---- */
.look-switcher{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.look-styles{display:flex;flex-direction:column;gap:2px}
.look-style{display:flex;align-items:center;gap:9px;width:100%;border:0;background:none;padding:6px 8px;border-radius:10px;color:var(--text);font-size:12.5px;text-align:left}
.look-style:hover{background:var(--chip-bg)}
.look-style.active{background:var(--hover-bg)}
.look-style small{display:block;font-size:10.5px;color:var(--text-dim)}
.look-prev{width:24px;height:24px;border-radius:7px;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.look-prev-liquid{background:radial-gradient(circle at 25% 25%,#2563eb,transparent 60%),radial-gradient(circle at 80% 30%,#7c3aed,transparent 60%),radial-gradient(circle at 60% 90%,#0891b2,transparent 60%),#0a1330}
.look-prev-material{background:linear-gradient(135deg,#e8def8 0 50%,#6750a4 50%)}
.look-walls{display:flex;gap:7px;padding:2px 0}
.look-wall{width:28px;height:28px;border-radius:50%;border:2px solid transparent;padding:0;cursor:pointer}
.look-wall.active{border-color:var(--blue)}
.look-wall[data-look-wall="ocean"]{background:radial-gradient(circle at 25% 25%,#2563eb,transparent 60%),radial-gradient(circle at 80% 30%,#7c3aed,transparent 60%),radial-gradient(circle at 60% 90%,#0891b2,transparent 60%),#0a1330}
.look-wall[data-look-wall="aurora"]{background:radial-gradient(circle at 25% 25%,#14b8a6,transparent 60%),radial-gradient(circle at 80% 30%,#8b5cf6,transparent 60%),radial-gradient(circle at 60% 90%,#db2777,transparent 60%),#0c0a1e}
.look-wall[data-look-wall="sunset"]{background:radial-gradient(circle at 25% 25%,#ea580c,transparent 60%),radial-gradient(circle at 80% 30%,#e11d48,transparent 60%),radial-gradient(circle at 60% 90%,#7c3aed,transparent 60%),#1a0e16}
.look-wall[data-look-wall="calm"]{background:radial-gradient(circle at 25% 20%,#3b5b9a,transparent 60%),#111a28}
.look-glass{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--text);cursor:pointer;border:0;background:none;padding:4px 0;width:100%}
.look-sw{width:32px;height:18px;border-radius:99px;background:var(--blue);position:relative;flex:none}
.look-sw::after{content:"";position:absolute;right:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:right .15s}
.look-glass.off .look-sw{background:var(--hover-bg)}.look-glass.off .look-sw::after{right:16px}
:root:not([data-style="liquid"]) .look-liquid-only{display:none}
.theme-opt{border-radius:10px;background:var(--chip-bg);display:flex;align-items:center;justify-content:center}
.theme-opt .ic-svg{width:15px;height:15px}
.theme-opt.active{background:var(--sheen),var(--hover-bg);border-color:var(--border);color:var(--text);box-shadow:inset 0 1px 0 var(--hi)}
.sound-toggle .theme-opt.active,.push-toggle .theme-opt.active{background:var(--blue);color:var(--on-accent)}
.profile-theme .theme-opt.active{color:var(--text)}

/* ---- Material: без стекла, тональные поверхности ---- */
[data-style="material"] .card,[data-style="material"] .kanban-col,[data-style="material"] .sidebar,[data-style="material"] .topbar,[data-style="material"] .table-wrap,[data-style="material"] .stat-card{border-color:transparent}
[data-style="material"] .btn-primary,[data-style="material"] .shift-off,[data-style="material"] .item-advance-btn{background:var(--blue);box-shadow:none}
[data-style="material"] .nav-item.active .ic-svg{color:var(--text)}
[data-style="material"] .logo-mark{background:radial-gradient(120% 100% at 25% 0%,#3a5a9a 0%,#16213a 55%,#0b1220 100%)}

/* ---- телефон: меньше размытия (быстрее), парящее нижнее меню ---- */
@media (max-width:768px){
  .kanban-col,.table-wrap,.stat-card,.worklog,.task-card,.profile-card,.profile-links,.profile-theme,.profile-stat{backdrop-filter:none;-webkit-backdrop-filter:none}
  [data-style="liquid"][data-theme="dark"] .kanban-col{background:rgba(16,24,44,.72)}
  [data-style="liquid"][data-theme="light"] .kanban-col{background:rgba(255,255,255,.6)}
  .main{padding:0;gap:0}
  .topbar{margin:8px 8px 0;border-radius:20px;padding-top:calc(10px + env(safe-area-inset-top))}
  .content{padding:12px 10px 24px}
  .bottom-nav{margin:0 8px calc(8px + env(safe-area-inset-bottom));border:1px solid var(--border);border-radius:24px;background:var(--sheen),var(--pop);box-shadow:var(--shadow-pop);padding-bottom:0}
  .bottom-nav-item.active{color:var(--blue)}
  .bottom-nav-icon .ic-svg{width:22px;height:22px}
  .modal{border-radius:0;border:0}
}
.sidebar-logo .logo-text,.login-logo .logo-text{color:var(--text)}
.sidebar-logo .logo-text span,.login-logo .logo-text span{color:var(--blue)}
[data-theme="dark"] .sidebar-logo .logo-text span,[data-theme="dark"] .login-logo .logo-text span{color:#6ea8ff}

/* ---- профиль внизу меню: компактная строка, настройки — во всплывающем окне ---- */
.sidebar-user{position:relative;padding:0;background:none}
.me-row{display:flex;align-items:center;gap:10px;width:100%;padding:10px;border-radius:14px;border:0;background:var(--chip-bg);color:var(--text);text-align:left;cursor:pointer}
.me-row:hover{background:var(--hover-bg)}
.me-ava{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:700;font-size:14px;background:color-mix(in srgb,var(--blue) 24%,transparent);color:var(--blue)}
[data-theme="dark"] .me-ava{color:#9cc2ff}
.me-txt{flex:1;min-width:0}
.me-txt .sidebar-user-name{font-size:13px}
.me-txt .sidebar-user-role{margin:3px 0 0}
.me-row .me-chev{color:var(--text-dim);transition:transform .15s}
.sidebar-user.open .me-chev{transform:rotate(180deg)}
.me-pop{display:none;position:absolute;left:0;bottom:calc(100% + 8px);width:268px;max-height:calc(100vh - 120px);overflow-y:auto;z-index:70;
  padding:12px;border-radius:18px;border:1px solid var(--border);background:var(--sheen),var(--bg-solid);box-shadow:var(--shadow-pop)}
.sidebar-user.open .me-pop{display:block}
.me-pop .btn-block{margin-top:4px;color:var(--red);justify-content:flex-start}
.sidebar{position:relative;z-index:30}
.app.sidebar-collapsed .me-row{justify-content:center;padding:8px 0;background:none}
.app.sidebar-collapsed .me-txt,.app.sidebar-collapsed .me-chev{display:none}
@media (max-width:860px){ .me-txt,.me-chev{display:none} .me-row{justify-content:center;padding:8px 0;background:none} }
@media (max-width:768px){ .sidebar-toggle-btn{display:none} .presence-btn .ic-svg{width:16px;height:16px} }
.presence-btn .ic-svg{width:16px;height:16px;display:inline-block;vertical-align:-3px}

/* свёрнутое меню и планшет: старые правила прячут настройки в меню — во всплывающем окне профиля показываем */
.app.sidebar-collapsed .sidebar .me-pop .theme-switcher,.app.sidebar-collapsed .sidebar .me-pop .sound-toggle:not(:empty),
.app.sidebar-collapsed .sidebar .me-pop .look-switcher:not(.look-liquid-only){display:block}
:root[data-style="liquid"] .app.sidebar-collapsed .sidebar .me-pop .look-liquid-only{display:flex}
.app.sidebar-collapsed .sidebar .me-pop .push-toggle:not([hidden]):not(:empty){display:block}
.me-pop .logout-label{display:inline !important}
@media (max-width:860px){
  .sidebar .me-pop .theme-switcher,.sidebar .me-pop .sound-toggle:not(:empty),.sidebar .me-pop .look-switcher:not(.look-liquid-only){display:block}
  :root[data-style="liquid"] .sidebar .me-pop .look-liquid-only{display:flex}
  .sidebar .me-pop .push-toggle:not([hidden]):not(:empty){display:block}
}
/* шапка (и выпадающий список колокольчика) — поверх колонок и карточек; ниже окон (100) и меню профиля */
.topbar{position:relative;z-index:40}
.notif-dropdown{background:var(--sheen),var(--bg-solid)}
/* имя в плашке профиля: не выходит за плашку — до 2 строк, дальше многоточие */
.me-row{overflow:hidden}
.me-txt{display:flex;flex-direction:column;gap:3px;overflow:hidden}
.me-txt .sidebar-user-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;white-space:normal;line-height:1.25;overflow-wrap:anywhere}
.me-txt .sidebar-user-role{display:block;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-row .me-chev{flex:none}
/* ---- карточка изделия на доске «Производство»: как в макете ---- */
.card-advance-btn.item-advance-btn{width:100%;height:auto;display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px;padding:9px 12px;
  border-radius:var(--r-btn);border:1px solid var(--border);background:var(--sheen),var(--chip-bg);box-shadow:inset 0 1px 0 var(--hi);color:var(--text);font-size:13px;font-weight:600}
.card-advance-btn.item-advance-btn:hover{background:var(--blue);border-color:var(--blue);color:var(--on-accent)}
.card-advance-btn.item-advance-btn .ic-svg{width:15px;height:15px}
.deal-product-claim{display:flex;align-items:center;gap:7px;margin-top:8px;font-size:12.5px;font-weight:500}
.deal-product-claim.in-progress{color:var(--text-dim)}
.deal-product-claim.in-progress b{color:var(--text);font-weight:600}
.claim-ava{width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:10px;font-weight:700;background:color-mix(in srgb,var(--blue) 24%,transparent);color:var(--blue)}
[data-theme="dark"] .claim-ava{color:#9cc2ff}
.deal-product-claim.waiting{justify-content:center;padding:8px 10px;border-radius:var(--r-btn);border:1px dashed color-mix(in srgb,var(--orange) 60%,var(--border));
  background:color-mix(in srgb,var(--orange) 8%,transparent);color:var(--orange);font-weight:600;cursor:default}
.deal-product-claim.waiting .ic-svg{width:14px;height:14px}
.task-card-action .btn .ic-svg{width:16px;height:16px}

/* ---- иконки внутри текста (вместо эмодзи) ---- */
.ic-svg.ic-i{width:1.15em;height:1.15em;display:inline-block;vertical-align:-.2em;stroke-width:2}
.btn .ic-svg.ic-i,.theme-opt .ic-svg.ic-i{vertical-align:-.18em}
.card-advance-btn .ic-svg{width:14px;height:14px;display:block}
.stage-order button .ic-svg{width:11px;height:11px;display:block;margin:auto}
.stage-visibility .ic-svg,.stage-locked .ic-svg{width:14px;height:14px;display:block;margin:auto}
.deal-product-thumb-empty .ic-svg,.worklog-photo-empty .ic-svg{width:55%;height:55%;color:var(--faint);stroke-width:1.5}
.pcard-nophoto .ic-svg{width:34px;height:34px;color:var(--faint);stroke-width:1.4}
.pdf-viewer-btn .ic-svg{width:22px;height:22px;display:block;margin:auto}
.deal-products-toggle .chevron{display:inline-flex}
.deal-products-alert .ic-svg{color:var(--orange)}
.tk-type .ic-svg{color:var(--blue)}
.shift-stop-icon .ic-svg{width:14px;height:14px}

/* ---- «Заказы» мастера: кнопки как в макете ---- */
.task-card-action .btn-claim{background:transparent;border:1px dashed color-mix(in srgb,var(--blue) 60%,var(--border));color:var(--blue);box-shadow:none;font-weight:600}
.task-card-action .btn-claim:hover{background:color-mix(in srgb,var(--blue) 12%,transparent);color:var(--blue)}
[data-theme="dark"] .task-card-action .btn-claim{color:#8cbcff}
.task-card-action .btn-advance{background:var(--sheen),var(--chip-bg);border:1px solid var(--border);color:var(--text);box-shadow:inset 0 1px 0 var(--hi);font-weight:600}
.task-card-action .btn-advance:hover{background:var(--blue);border-color:var(--blue);color:var(--on-accent)}
[data-style="material"] .task-card-action .btn-advance{background:var(--hover-bg);border-color:transparent}

/* =====================================================================
   ПРОДАЖИ как в макете: подзаголовок и поиск в шапке, строка фильтров, карточка сделки
   ===================================================================== */
.topbar-left{gap:10px}
.view-sub{color:var(--text-dim);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.theme-quick .ic-svg{width:17px;height:17px}
/* общий поиск */
.gsearch{position:relative;display:flex;align-items:center;gap:8px;width:280px;padding:0 10px 0 14px;height:38px;border-radius:99px;background:var(--chip-bg);border:1px solid var(--border);color:var(--text-dim)}
.gsearch .ic-svg{width:16px;height:16px;flex:none}
.gsearch input{flex:1;min-width:0;border:0;background:none;outline:none;color:var(--text);font:inherit;font-size:13px}
.gsearch input::placeholder{color:var(--faint)}
.gsearch input::-webkit-search-cancel-button{display:none}
.gsearch kbd{font:inherit;font-size:11px;color:var(--faint);border:1px solid var(--border);border-radius:6px;padding:0 5px;white-space:nowrap}
.gsearch:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 20%,transparent)}
.gsearch:focus-within kbd{display:none}
.gsearch-list{position:absolute;top:calc(100% + 8px);left:0;right:0;min-width:340px;max-height:420px;overflow-y:auto;z-index:80;padding:6px;
  border-radius:16px;border:1px solid var(--border);background:var(--sheen),var(--bg-solid);box-shadow:var(--shadow-pop)}
.gs-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;background:none;border-radius:10px;color:var(--text);text-align:left;cursor:pointer}
.gs-item:hover{background:var(--chip-bg)}
.gs-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.gs-main b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs-main small{font-size:11.5px;color:var(--text-dim)}
.gs-sum{font-size:12.5px;font-weight:600;white-space:nowrap}
.gs-empty{padding:14px;text-align:center;color:var(--text-dim);font-size:13px}
@media (max-width:1100px){ .gsearch{display:none !important} }

/* строка фильтров и кнопок над содержимым раздела (доска, таблица, список) */
.board-toolbar{flex:none;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.content > .board-toolbar:not(:has(+ .kanban)){margin-bottom:16px}
.tb-filter{display:flex;align-items:center;gap:8px;width:250px;height:38px;padding:0 14px;border-radius:99px;background:var(--sheen),var(--glass);border:1px solid var(--border);color:var(--faint);cursor:text;backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.tb-filter .ic-svg{width:15px;height:15px;flex:none}
.tb-filter input{flex:1;min-width:0;border:0;background:none;outline:none;color:var(--text);font:inherit;font-size:13px}
.tb-filter input::placeholder{color:var(--faint)}
.tb-filter:focus-within{border-color:var(--blue)}
.seg{display:inline-flex;padding:3px;border-radius:99px;background:var(--sheen),var(--glass);border:1px solid var(--border);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.seg button{border:0;background:none;padding:6px 13px;border-radius:99px;color:var(--text-dim);font-size:13px;font-weight:500;white-space:nowrap;cursor:pointer}
.seg button.on{background:var(--sheen),var(--hover-bg);color:var(--text);box-shadow:inset 0 1px 0 var(--hi)}
.seg button:disabled{opacity:.45;cursor:default}
.seg .tb-count{margin-left:3px;font-size:12px}
.seg-badge{display:inline-block;margin-left:4px;padding:0 6px;border-radius:99px;background:color-mix(in srgb,var(--red) 18%,transparent);color:var(--red);font-size:11.5px;font-weight:600;line-height:18px}
.tb-select{position:relative;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 12px;border-radius:99px;background:var(--sheen),var(--glass);border:1px solid var(--border);color:var(--text);font-size:13px;font-weight:600;cursor:pointer;backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.tb-select.on{border-color:var(--blue)}
.tb-select .ic-svg{width:15px;height:15px;flex:none;color:var(--text-dim)}
.tb-select select{appearance:none;-webkit-appearance:none;border:0;background:none;color:inherit;font:inherit;outline:none;cursor:pointer;padding:0;max-width:200px}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.tb-right .btn-ghost{color:var(--text-dim)}
.tb-right .btn-ghost:hover{color:var(--text)}
.tb-right .btn-ghost .ic-svg{width:16px;height:16px;color:currentColor}
.tb-count{color:var(--text-dim);font-weight:500}
.board-empty{flex:none;padding:10px;text-align:center;color:var(--text-dim);font-size:13px}

/* колонки: «⋯» (настройка) и «+ Сделка» — цвета и раскладка шапки прежние */
.kanban-col-more{flex:none;width:24px;height:24px;margin-left:2px;border-radius:8px;border:0;background:none;color:var(--faint);display:grid;place-items:center;cursor:pointer}
.kanban-col-more:hover{background:var(--chip-bg);color:var(--text)}
.kanban-col-add{flex:none;margin:0 0 8px;padding:8px;border-radius:12px;border:1px dashed var(--border);background:none;color:var(--faint);font-size:12.5px;cursor:pointer}
.kanban-col-add:hover{color:var(--text);background:var(--chip-bg)}
@media (max-width:768px){
  .board-toolbar{gap:6px}
  .tb-filter{width:100%;order:-1}
  .tb-right{margin-left:0;width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .tb-right .btn{flex:none}
}
@media (max-width:768px){ .view-sub{display:none} .board-toolbar .seg,.board-toolbar .tb-select{height:36px} }

/* =====================================================================
   ЭКРАНЫ КАК В МАКЕТЕ (design/): панели, плитки-счётчики, таблицы, чипы.
   Имена как в макете, кроме .card → .pn (в CRM .card — карточка канбана).
   ===================================================================== */
.page-narrow{max-width:1080px;width:100%;display:flex;flex-direction:column;gap:10px}
.page-narrow > .board-toolbar{margin-bottom:0}
.pn{background:var(--sheen),var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
[data-style="material"] .pn{border-color:transparent}
.muted{color:var(--text-dim)}
.z{color:var(--faint)}
.hint{color:var(--faint);font-size:12px}
.num{font-variant-numeric:tabular-nums}
.ava{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:11px;background:color-mix(in srgb,var(--blue) 24%,transparent);color:var(--blue);flex:none;text-transform:uppercase}
[data-theme="dark"] .ava{color:#9cc2ff}
.ava.sm{width:22px;height:22px;font-size:9.5px}
.ava .ic-svg{width:14px;height:14px}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:99px;background:var(--chip-bg);color:var(--text-dim);white-space:nowrap;vertical-align:middle}
.chip .ic-svg{width:12px;height:12px}
.chip.ok{background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green)}
.chip.warn{background:color-mix(in srgb,var(--orange) 18%,transparent);color:var(--orange)}
.chip.danger{background:color-mix(in srgb,var(--red) 16%,transparent);color:var(--red)}
.chip.acc{background:color-mix(in srgb,var(--blue) 16%,transparent);color:var(--blue)}
.live{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 25%,transparent);display:inline-block;flex:none}
.note{font-size:12.5px;color:var(--text-dim);padding:10px 12px;border-radius:12px;background:var(--chip-bg);line-height:1.5}
.seg .n{display:inline-grid;place-items:center;min-width:20px;height:18px;padding:0 6px;margin-left:6px;border-radius:99px;font-size:11px;font-weight:600;background:var(--chip-bg);color:var(--text-dim)}
.seg button.on .n{background:var(--blue);color:var(--on-accent)}
.seg button .ic-svg{width:14px;height:14px;display:inline-block;vertical-align:-2px;margin-right:4px}
.sec-h{display:flex;align-items:center;gap:12px;margin-top:8px;flex-wrap:wrap}
.sec-h h2{margin:0;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);font-weight:600}
.sec-h .dash-period{margin-left:auto}
.grp-h{display:flex;align-items:center;gap:8px;margin:10px 2px 2px;font-size:12px;text-transform:uppercase;letter-spacing:.07em;font-weight:600;color:var(--text-dim)}
.grp-h .c{font-size:11px;padding:1px 7px;border-radius:99px;background:var(--chip-bg)}
.card-h{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.card-h h3{margin:0;font-size:14px;font-weight:600}
.card-h .meta{margin-left:auto;color:var(--text-dim);font-size:12px}
.card-h .link{margin-left:auto;color:var(--blue);font-size:12.5px;font-weight:600;cursor:pointer;background:none;border:0;padding:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.empty{text-align:center;padding:36px 20px;color:var(--text-dim);font-size:13px}
.empty .big{width:56px;height:56px;border-radius:18px;margin:0 auto 12px;display:grid;place-items:center;background:var(--chip-bg);color:var(--text-dim)}
.empty .big .ic-svg{width:26px;height:26px}
.empty b{display:block;color:var(--text);font-size:15px;margin-bottom:4px}
.kc-alert{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500;padding:6px 9px;border-radius:10px;background:color-mix(in srgb,var(--orange) 16%,transparent);color:var(--orange)}
.kc-alert.danger{background:color-mix(in srgb,var(--red) 14%,transparent);color:var(--red)}
.kc-alert .ic-svg{width:13px;height:13px;flex:none}
.list{display:flex;flex-direction:column;gap:2px}
.li{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;color:inherit}
.li[data-open],.li[data-item]{cursor:pointer}
.li:hover{background:var(--chip-bg)}
.li-main{flex:1;min-width:0;display:flex;flex-direction:column}
.li-main b{font-weight:600;font-size:13.5px}
.li-main small{font-size:12px;color:var(--text-dim)}
.li-r{display:flex;flex-direction:column;align-items:flex-end;gap:3px;font-size:12px;text-align:right}

/* плитки-счётчики над таблицами (нажатие — фильтр) */
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.st{display:flex;flex-direction:column;gap:4px;transition:box-shadow .12s}
.st[data-f],.st[data-w]{cursor:pointer}
.st.on{box-shadow:inset 0 0 0 2px var(--blue),var(--shadow)}
.st .l{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-dim);font-weight:500}
.st .l i{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--chip-bg);color:var(--text-dim);font-style:normal;flex:none}
.st .l i .ic-svg{width:15px;height:15px}
.st .v{font-size:22px;font-weight:700;letter-spacing:-.02em;margin-top:4px;white-space:nowrap}
.st .s{font-size:12px;color:var(--text-dim)}
.st.acc .l i{background:color-mix(in srgb,var(--blue) 16%,transparent);color:var(--blue)}
.st.ok .l i{background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green)}
.st.warn .l i{background:color-mix(in srgb,var(--orange) 18%,transparent);color:var(--orange)}
.st.warn .v{color:var(--orange)}
.st.danger .l i{background:color-mix(in srgb,var(--red) 16%,transparent);color:var(--red)}
.wshare{height:6px;border-radius:99px;background:var(--chip-bg);overflow:hidden;margin-top:6px}
.wshare i{display:block;height:100%;border-radius:inherit;background:var(--blue)}

/* таблицы-справочники */
.tbl-wrap{padding:0;overflow:hidden}
.tbl-scroll{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:13px;background:none;box-shadow:none}
.tbl th{text-align:left;font-weight:500;color:var(--faint);font-size:12px;padding:12px 14px;border-bottom:1px solid var(--border);white-space:nowrap;background:none;text-transform:none;letter-spacing:0}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr[data-id]{cursor:pointer;transition:background .1s}
.tbl tbody tr[data-id]:hover{background:var(--chip-bg)}
.tbl .r{text-align:right}
.tbl .who{display:flex;align-items:center;gap:10px;font-weight:600}
.tbl a.tel{color:var(--text);text-decoration:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.tbl a.tel .ic-svg{width:14px;height:14px;color:var(--text-dim)}
.tbl .grp-row td{background:var(--chip-bg);cursor:default}
.tbl-sel{appearance:none;-webkit-appearance:none;font:inherit;font-size:12px;font-weight:500;padding:4px 26px 4px 10px;border-radius:99px;border:1px solid var(--border);background-color:var(--input-bg);color:var(--text);cursor:pointer;width:auto;margin:0;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 13px) 55%,calc(100% - 9px) 55%;background-size:4px 4px;background-repeat:no-repeat}
.tbl-sel option{background:var(--bg-solid);color:var(--text)}
.tbl-foot{display:flex;justify-content:space-between;gap:10px;padding:10px 14px;font-size:12px;color:var(--text-dim);border-top:1px solid var(--border)}
/* статус материала — цветной выпадающий список прямо в строке */
.mst{appearance:none;-webkit-appearance:none;font:inherit;font-size:12px;font-weight:600;padding:5px 26px 5px 10px;border-radius:99px;cursor:pointer;width:auto;margin:0;
  border:1px solid color-mix(in srgb,var(--sc) 40%,transparent);background-color:color-mix(in srgb,var(--sc) 15%,transparent);color:var(--sc);
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 13px) 55%,calc(100% - 9px) 55%;background-size:4px 4px;background-repeat:no-repeat}
.mst option{background:var(--bg-solid);color:var(--text)}
[data-theme="light"] .mst{color:color-mix(in srgb,var(--sc) 80%,#000)}
.mat{display:flex;align-items:center;gap:10px;font-weight:600}
.mat i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--chip-bg);color:var(--text-dim);flex:none;font-style:normal}
.mat i .ic-svg{width:15px;height:15px}
.on-shift{display:inline-flex;align-items:center;gap:6px;color:var(--green);font-size:12px;font-weight:600;white-space:nowrap}

/* «Сводка»: плитки как в макете */
.kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.kpis.k4{grid-template-columns:repeat(4,minmax(0,1fr))}
.kpis.k3{grid-template-columns:repeat(3,minmax(0,1fr))}
.kpis.k2{grid-template-columns:repeat(2,minmax(0,1fr))}
.kpi{display:flex;flex-direction:column;gap:5px;min-width:0}
.kpi[data-open],.kpi[data-go]{cursor:pointer}
.kpi[data-open]:hover,.kpi[data-go]:hover{border-color:color-mix(in srgb,var(--blue) 50%,var(--border))}
.kpi-top{display:flex;align-items:center;gap:8px;color:var(--text-dim);font-size:13px;font-weight:500}
.kpi-ic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--chip-bg);color:var(--text-dim);flex:none}
.kpi-ic .ic-svg{width:15px;height:15px}
.kpi-val{font-size:26px;font-weight:700;letter-spacing:-.02em;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi-sub{font-size:12.5px;color:var(--text-dim)}
.kpi-sub b{color:var(--text);font-weight:600}
.kpi.danger .kpi-ic{background:color-mix(in srgb,var(--red) 16%,transparent);color:var(--red)}
.kpi.danger .kpi-val{color:var(--red)}
.kpi.danger{border-color:color-mix(in srgb,var(--red) 40%,var(--border))}
.kpi.warn .kpi-ic{background:color-mix(in srgb,var(--orange) 16%,transparent);color:var(--orange)}
.kpi.ok .kpi-ic{background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green)}
.kpi.acc .kpi-ic{background:color-mix(in srgb,var(--blue) 16%,transparent);color:var(--blue)}
.kpi.zero .kpi-val{color:var(--faint)}
.dash2{display:flex;flex-direction:column;gap:10px;max-width:1400px}
.dash2 .dash-period-bar{margin:0}
.pn table.dt{width:100%;border-collapse:collapse;font-size:13px;background:none;box-shadow:none}
.pn table.dt th{text-align:left;font-weight:500;color:var(--faint);font-size:12px;padding:0 0 9px;background:none;border:0;text-transform:none;letter-spacing:0}
.pn table.dt td{padding:9px 0;border-top:1px solid var(--border);border-bottom:0}
.pn table.dt .r{text-align:right}
.pn table.dt tr[data-sales-stage].row-clickable,.pn table.dt tr[data-prod-stage].row-clickable,.pn table.dt tr[data-manager],.pn table.dt tr[data-worker],.pn table.dt tr[data-wt-user]{cursor:pointer}
.pn table.dt tbody tr:hover td{background:none}
.pn table.dt tr.row-clickable:hover td,.pn table.dt tr[data-manager]:hover td,.pn table.dt tr[data-worker]:hover td,.pn table.dt tr[data-wt-user]:hover td{color:var(--text)}
.pn table.dt tr.row-clickable:hover td:first-child,.pn table.dt tr[data-manager]:hover td:first-child,.pn table.dt tr[data-worker]:hover td:first-child,.pn table.dt tr[data-wt-user]:hover td:first-child{text-decoration:underline;text-underline-offset:3px}
.dot-l{font-weight:600;white-space:nowrap}
/* «Сводка»: воронка продаж (полоски) и производство по этапам (столбики) */
.funnel{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.pn:has(> .funnel){display:flex;flex-direction:column}
.pn > .funnel + .f-foot{margin-top:auto}
.f-row{display:grid;grid-template-columns:minmax(120px,170px) 1fr minmax(90px,auto);align-items:center;gap:12px}
.f-row.row-clickable{cursor:pointer}
.f-name{font-weight:600;font-size:13px;display:flex;align-items:center;gap:8px;min-width:0;color:var(--c)}
.f-lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f-cnt{min-width:24px;height:22px;padding:0 7px;border-radius:99px;background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--c);font-size:12px;font-weight:700;display:inline-grid;place-items:center;flex:none}
.f-bar{height:12px;border-radius:99px;background:var(--chip-bg);overflow:hidden}
.f-bar i{display:block;height:100%;border-radius:inherit;background:var(--c);transition:width .4s ease}
.f-sum{text-align:right;font-size:13px;font-weight:600;white-space:nowrap}
.f-row.zero .f-name,.f-row.zero .f-cnt,.f-row.zero .f-sum{color:var(--faint)}
.f-row.zero .f-cnt{background:var(--chip-bg)}
.f-row.row-clickable:hover .f-lbl{text-decoration:underline;text-underline-offset:3px}
.f-foot{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px;padding-top:12px;border-top:1px dashed var(--border);font-size:12.5px;color:var(--text-dim)}
.f-foot b{color:var(--text)}
.f-foot .row-clickable{cursor:pointer}
.f-foot .row-clickable:hover{color:var(--text)}
.prod-chart{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:8px;align-items:end;height:220px}
.p-col{display:flex;flex-direction:column;gap:6px;height:100%;justify-content:flex-end;text-align:center;min-width:0}
.p-col.row-clickable{cursor:pointer}
.p-val{font-weight:700;font-size:16px}
.p-bar{border-radius:7px 7px 3px 3px;background:color-mix(in srgb,var(--c) 55%,var(--chip-bg));min-height:3px;transition:height .4s ease}
.p-col.row-clickable:hover .p-bar{background:var(--c)}
.p-col.zero .p-val{color:var(--faint)}
.p-col.zero .p-bar{background:var(--chip-bg)}
.p-col.hot .p-bar{background:var(--c);box-shadow:0 0 0 2px color-mix(in srgb,var(--orange) 70%,transparent),0 6px 18px -6px var(--c)}
.p-col.hot .p-val{color:var(--orange)}
.p-name{font-size:11.5px;color:var(--text-dim);line-height:1.2;min-height:28px;overflow-wrap:anywhere}
.p-col.hot .p-name{color:var(--text);font-weight:600}
.p-note{display:flex;align-items:center;gap:8px;margin-top:14px;padding:9px 12px;border-radius:10px;background:color-mix(in srgb,var(--orange) 12%,transparent);font-size:12.5px}
.p-note .ic-svg{color:var(--orange);width:16px;height:16px;flex:none}
@media (max-width:768px){
  .f-row{grid-template-columns:minmax(0,1fr) auto;gap:6px 10px}
  .f-row .f-bar{grid-column:1 / -1;grid-row:2}
  .prod-chart{height:180px;gap:4px}
  .p-name{font-size:10px}
  .p-val{font-size:13px}
}
.dash2 #dash-worktime{display:flex;flex-direction:column;gap:10px}
.dash2 #dash-worktime:empty{display:none}
.sec-h .dash-period{margin:0 0 0 auto}
.pn .worklog{background:none;box-shadow:none;border:0;border-radius:0;margin:0}
/* выполненные работы — плитками, как в макете */
.worklog.wl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;background:none;box-shadow:none;border:0;overflow:visible;margin:0}
.wl-grid .worklog-card{background:var(--sheen),var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:12px}
.wl-grid .worklog-card:last-child{border-bottom:1px solid var(--border)}
.wl-grid .worklog-card:hover{background:var(--sheen),var(--card);border-color:color-mix(in srgb,var(--blue) 50%,var(--border))}
[data-style="material"] .wl-grid .worklog-card{border-color:transparent}
.worklog-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:3px}
.pn .who{display:flex;align-items:center;gap:10px;font-weight:600}
.role-seg{align-self:flex-start}

/* боковое меню: разделы как в макете */
.nav-sep{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);padding:14px 12px 6px;font-weight:600}
.presence-btn .presence-dot{width:8px;height:8px;border-radius:50%;background:var(--faint);display:inline-block;margin-right:2px;vertical-align:1px}
.presence-btn .presence-dot.on{background:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 25%,transparent)}
.shift-off .ic-svg polygon{fill:currentColor}

/* выпадающий список в стиле CRM (вместо системного окошка <select> на компьютере) */
.dd-pop{position:fixed;z-index:2000;max-height:min(340px,60vh);overflow-y:auto;padding:6px;border-radius:16px;
  border:1px solid var(--border);background:var(--sheen),var(--bg-solid);box-shadow:var(--shadow-pop);
  display:flex;flex-direction:column;gap:1px;animation:dd-in .12s ease-out}
@keyframes dd-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.dd-item{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:0;background:none;border-radius:10px;
  color:var(--text);font:inherit;font-size:13px;font-weight:500;text-align:left;cursor:pointer;white-space:nowrap}
.dd-item span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.dd-item:hover{background:var(--chip-bg)}
.dd-item.on{color:var(--blue);font-weight:600}
[data-theme="dark"] .dd-item.on{color:#8cbcff}
[data-style="material"] .dd-item.on{color:var(--blue)}
.dd-item .ic-svg{width:15px;height:15px;flex:none}
.dd-item:disabled{opacity:.45;cursor:default}
.dd-dot{width:8px;height:8px;border-radius:50%;flex:none}
.dd-group{padding:8px 10px 4px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);font-weight:600}
.tb-select.dd-open{border-color:var(--blue)}
.tb-select.dd-open > .ic-svg:last-child{transform:rotate(180deg)}
.tb-select > .ic-svg:last-child{transition:transform .15s}

/* шкала этапов, по которой можно нажать (МП, РОП, админ): отрезок = «перенести на этап» */
.psl-click .psl-seg{position:relative;cursor:pointer;transition:transform .12s,background .12s}
.psl-click .psl-seg::after{content:'';position:absolute;inset:-8px -1px}   /* зона нажатия больше тонкой полоски */
.psl-click .psl-seg:hover{transform:scaleY(1.7);background:color-mix(in srgb,var(--c) 70%,transparent)}
.psl-click .psl-seg.current:hover{background:var(--c)}
.stage-pop{width:290px;padding:12px;gap:6px}
.stage-pop-title{font-size:14px;font-weight:700}
.stage-pop-sub{font-size:12.5px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage-pop-note{font-size:12px;line-height:1.45;color:var(--orange);padding:7px 9px;border-radius:10px;background:color-mix(in srgb,var(--orange) 12%,transparent)}
.stage-pop-actions{display:flex;justify-content:flex-end;gap:6px;margin-top:4px}

/* задачи — как в макете: значок типа, жирный заголовок, серая строка сведений, кнопка справа */
.tk-page.page-narrow{max-width:1080px}
.tk-list{display:flex;flex-direction:column;gap:8px}
.tk-row.tk2{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:0;cursor:pointer;transition:border-color .12s,background .12s}
.tk-list .tk-row.tk2{background:var(--sheen),var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
[data-style="material"] .tk-list .tk-row.tk2{border-color:transparent}
.tk-list .tk-row.tk2:hover{background:var(--sheen),var(--card);border-color:color-mix(in srgb,var(--blue) 50%,var(--border))}
.tk-row.tk2.late{box-shadow:inset 3px 0 0 var(--red),var(--shadow)}
.tk-row.tk2.done{opacity:.62}
.tk-row.tk2.done .tk-t{text-decoration:line-through;font-weight:500}
.tk2 .tk-ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--tc) 16%,transparent);color:var(--tc)}
.tk2 .tk-ic .ic-svg{width:17px;height:17px}
.tk2 .tk-t{font-weight:600;font-size:14px;line-height:1.4;color:var(--text);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tk2 .tk-m{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-top:5px;font-size:12px;color:var(--text-dim)}
.tk2 .tk-m > span{display:inline-flex;align-items:center;gap:5px;min-width:0}
.tk2 .tk-m .ic-svg{width:13px;height:13px;flex:none}
.tk2 .tk-m .ava.sm{width:20px;height:20px;font-size:9px}
.tk2 .tk-deal .tk-link{color:var(--text-dim);font-weight:600}
.tk2 .tk-m .late{color:var(--red);font-weight:600}
.tk2 .tk-m .soon{color:var(--orange);font-weight:600}
.tk2 .tk-noone{color:var(--orange);font-style:normal}
.tk2 .tk-a{flex:none;display:flex;gap:6px}
.tk-block .tk-row.tk2{padding:10px 11px}
.tk-block .tk-row.tk2 + .tk-row.tk2{border-top:1px solid var(--border)}
.tk-block .tk2 .tk-ic{width:30px;height:30px;border-radius:9px}
/* в узкой колонке карточки товара кнопка — под текстом, чтобы не сжимать его */
.tk-block .tk-row.tk2{flex-wrap:wrap;align-items:flex-start;row-gap:6px}
.tk-block .tk2 .tk-main{flex:1 1 calc(100% - 44px)}
.tk-block .tk2 .tk-a{width:100%;justify-content:flex-end}
.tk-block .tk2 .tk-a:empty{display:none}
.tk-types-f button{display:inline-flex;align-items:center;gap:5px}
.tk-types-f .ic-svg{width:14px;height:14px;margin:0}
@media (max-width:768px){
  .tk-row.tk2{align-items:flex-start;flex-wrap:wrap;gap:10px}
  .tk2 .tk-main{flex:1 1 calc(100% - 50px)}
  .tk2 .tk-a{width:100%;justify-content:flex-end}
  .tk-types-f{max-width:100%;overflow-x:auto;scrollbar-width:none}
}

/* окно сделки: деньги строками — подпись слева, сумма справа в одну строку */
.fin2{display:flex;flex-direction:column;gap:7px;padding:12px 14px}
.fin-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:13px}
.fin-row > span{color:var(--text-dim);min-width:0}
.fin-row > span small{display:block;font-size:11px;color:var(--faint);margin-top:1px}
.fin-row b,.fin-row .num{white-space:nowrap;font-weight:700;color:var(--text)}
.fin-row.fin-main{padding-top:8px;border-top:1px solid var(--border);align-items:center}
.fin-row.fin-main > span{color:var(--text);font-weight:600}
.fin-row.fin-main b{font-size:17px}
.fin-paid{height:6px;border-radius:99px;background:var(--chip-bg);overflow:hidden;margin:1px 0 2px}
.fin-paid i{display:block;height:100%;border-radius:inherit;background:var(--green)}
.fin-bonus{display:flex;flex-direction:column;gap:5px;margin-top:4px;padding-top:9px;border-top:1px dashed var(--border)}
.fin-bonus .ic-svg{width:14px;height:14px;vertical-align:-2px}
.fin-row.fin-sub{font-size:12px;padding-left:20px}
.fin-row.fin-sub .num{font-weight:500;color:var(--text-dim)}
.fin-row.fin-sub b.num{font-weight:700;color:var(--text)}

/* карточка задачи (просмотр): тип и статус, текст, сделка и товар — кнопками, люди и срок */
.tkv{display:flex;flex-direction:column;gap:14px}
.tkv-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tkv-head .tk-ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--tc) 16%,transparent);color:var(--tc)}
.tkv-head .tk-ic .ic-svg{width:16px;height:16px}
.tkv-type{font-weight:600;font-size:13px;color:var(--text-dim);margin-right:auto}
.tkv-title{font-size:17px;font-weight:600;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.tkv-links{display:flex;flex-direction:column;gap:8px}
.tkv-link{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;border:1px solid var(--border);background:var(--sheen),var(--chip-bg);color:var(--text);font:inherit;text-align:left;cursor:pointer;min-width:0;transition:border-color .12s}
.tkv-link:hover{border-color:color-mix(in srgb,var(--blue) 55%,var(--border))}
.tkv-link > .ic-svg{width:16px;height:16px;flex:none;color:var(--faint)}
.tkv-link-ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--blue) 14%,transparent);color:var(--blue)}
.tkv-link-ic .ic-svg{width:18px;height:18px}
.tkv-link-ph{width:38px;height:38px;border-radius:10px;object-fit:cover;flex:none}
.tkv-link-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.tkv-link-main small{font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.tkv-link-main b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tkv-link-main .psl-bar{margin-top:5px}
.tkv-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;padding:12px 14px;border-radius:14px;background:var(--chip-bg)}
.tkv-f > span{display:block;font-size:11.5px;color:var(--text-dim);margin-bottom:4px}
.tkv-f > div{font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tkv-f .ic-svg{width:14px;height:14px}
.tkv-person{display:inline-flex;align-items:center;gap:6px}
.tkv-people{gap:6px 12px}
.tkv-meta{font-size:12px;color:var(--text-dim)}
@media (max-width:768px){ .tkv-grid{grid-template-columns:1fr} }

/* ткань: куплена / ждёт закупки (задача снабженцу) */
.fab-state{display:inline-flex;align-items:center;gap:3px;margin-left:6px;padding:0 7px;border-radius:99px;font-size:11px;font-weight:700;line-height:18px;white-space:nowrap}
.fab-state.ok{background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green)}
.fab-state.wait{background:color-mix(in srgb,var(--orange) 16%,transparent);color:var(--orange)}

/* покупной товар (без производства) */
.prod-bought{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;margin:2px 0;padding:6px 12px 6px 9px;border-radius:99px;
  border:1px dashed var(--border);font-size:12.5px;font-weight:600;color:var(--text-dim);cursor:pointer;user-select:none;width:auto}
.modal-body label.prod-bought,.quick-product-form label.prod-bought{display:inline-flex;width:fit-content;max-width:100%;margin:2px 0 6px}
.prod-bought input{width:auto;margin:0;accent-color:var(--orange)}
.prod-bought:has(input:checked){border-style:solid;border-color:color-mix(in srgb,var(--orange) 55%,transparent);background:color-mix(in srgb,var(--orange) 12%,transparent);color:var(--orange)}
.prod-bought.locked{opacity:.5;cursor:not-allowed}
.is-bought .prod-fabric,.is-bought #qp-fabric{display:none}
.psl-buy-tag{flex:none;display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:var(--orange);padding:1px 7px;border-radius:99px;background:color-mix(in srgb,var(--orange) 14%,transparent)}
.psl-bar-buy .psl-segs{max-width:140px}

/* задача: ответственный / соисполнители / наблюдатели */
.pp-rows{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.pp-row label .hint{font-weight:400;margin-left:4px}
.pp{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:38px;padding:5px;border-radius:14px;border:1px solid var(--border);background:var(--input-bg)}
.pp-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 4px 3px 3px;border-radius:99px;background:var(--chip-bg);font-size:13px;font-weight:500;white-space:nowrap}
.pp-x{width:22px;height:22px;border:0;border-radius:50%;background:none;color:var(--text-dim);display:grid;place-items:center;cursor:pointer;padding:0}
.pp-x:hover{background:var(--hover-bg);color:var(--red)}
.pp-add{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 11px;border-radius:99px;border:1px dashed var(--border);background:none;color:var(--text-dim);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.pp-add:hover{color:var(--blue);border-color:color-mix(in srgb,var(--blue) 50%,transparent)}
.pp-pop{width:320px;padding:8px}
.pp-search{width:100%;margin:0 0 6px;padding:8px 12px;border-radius:10px;border:1px solid var(--border);background:var(--input-bg);color:var(--text);font:inherit;font-size:13px;outline:none}
.pp-search:focus{border-color:var(--blue)}
.pp-list{display:flex;flex-direction:column;gap:1px;overflow-y:auto;max-height:min(300px,50vh)}
.dd-item > .ava{flex:none}
.pp-chip .ava{flex:none}
.pp-item span small{display:block;font-size:11.5px;color:var(--text-dim);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* поле времени «чч:мм»: набор цифрами + окошко с часами и минутами */
.tf{position:relative;display:block}
.tf .tf-input{padding-right:38px;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.tf-btn{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:28px;height:28px;border:0;border-radius:8px;background:none;color:var(--text-dim);display:grid;place-items:center;cursor:pointer;padding:0}
.tf-btn:hover{background:var(--chip-bg);color:var(--text)}
.tf-btn .ic-svg{width:16px;height:16px}
.shift-modal-custom .tf{display:inline-block;width:130px}
.tp-pop{width:292px;padding:10px;gap:6px}
.tp-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);font-weight:600;padding:2px 2px 0}
.tp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.tp-grid.tp-m{grid-template-columns:repeat(4,1fr)}
.tp-grid button{height:34px;border:1px solid transparent;border-radius:10px;background:var(--chip-bg);color:var(--text);font:inherit;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;cursor:pointer;padding:0}
.tp-grid button:hover{border-color:color-mix(in srgb,var(--blue) 50%,transparent)}
.tp-grid button.on{background:var(--blue);color:var(--on-accent)}
.tp-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:4px}
.tp-clear{border:0;background:none;color:var(--red);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;padding:4px 6px;border-radius:8px}
.tp-clear:hover{background:var(--chip-bg)}

/* «Заказы» мастера: карточки и смена справа */
.mo-wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:10px;align-items:start;max-width:1120px}
.mo-col{display:flex;flex-direction:column;gap:10px;min-width:0}
.mo-list{display:flex;flex-direction:column;gap:10px}
.mo{display:flex;flex-direction:column;gap:10px;cursor:pointer}
.mo:hover{border-color:color-mix(in srgb,var(--blue) 40%,var(--border))}
.mo.late{box-shadow:inset 3px 0 0 var(--red),var(--shadow)}
.mo.upcoming{opacity:.88}
.mo .item-card-photos{margin:0}
.mo-h{display:flex;align-items:flex-start;gap:10px}
.mo-h h3{margin:0;font-size:16px;line-height:1.3;flex:1}
.mo-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--text-dim)}
.mo-meta span{display:inline-flex;align-items:center;gap:5px}
.mo-meta .ic-svg{width:14px;height:14px}
.mo-meta b{color:var(--text);font-weight:600}
.mo-meta .late,.mo-meta .late b{color:var(--red);font-weight:600}
.mo-specs{font-size:13px;padding:9px 12px;border-radius:12px;background:var(--chip-bg);white-space:pre-wrap}
.mo-act{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.mo-act .grow{flex:1}
.mo-act .btn-primary{padding:10px 18px;font-size:14px}
.mo-act .btn:disabled{opacity:.55;cursor:default}
.shift-card{display:flex;flex-direction:column;gap:12px;position:sticky;top:0}
.shift-card .clock{font-size:34px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.shift-card .state{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--text-dim)}
.shift-card .state.on{color:var(--green)}
.shift-card .blk-h{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-dim);font-weight:600}
.shift-days{display:flex;flex-direction:column;font-size:12.5px}
.shift-days div{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-top:1px solid var(--border)}
.shift-days div span:last-child{font-weight:600;white-space:nowrap}

@media (max-width:1100px){
  .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .mo-wrap{grid-template-columns:1fr}
  .shift-card{position:static;order:-1;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:10px 14px}
  .shift-card .blk-h,.shift-card .shift-days,.shift-card .hint{display:none}
  .shift-card .clock{font-size:22px;margin-left:auto}
  .shift-card .btn{width:100%}
}
@media (max-width:768px){
  .hide-m{display:none}
  .kpis,.kpis.k4,.kpis.k3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid2{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st .v,.kpi-val{font-size:19px}
  .tbl td,.tbl th{padding:10px}
  .tbl-foot span:last-child{display:none}
  .mo-act .btn{flex:1}
}

/* ---------- Кнопки окна закреплены внизу ----------
   Длинное содержимое (много товаров в сделке) прокручивается, а «Закрыть / Удалить /
   Редактировать / ← Назад» всегда видны. Работает для любого окна, где кнопки — последний блок. */
#modal-body:has(> .modal-actions:last-child){padding-bottom:0}
#modal-body > .modal-actions:last-child{
  position:sticky;bottom:0;z-index:6;flex-wrap:wrap;
  margin:20px -22px 0;padding:12px 22px 14px;
  background:var(--pop);border-top:1px solid var(--border);
  backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);
}
@media (max-width:768px){
  #modal-body > .modal-actions:last-child{margin:16px -16px 0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));gap:8px}
  #modal-body > .modal-actions:last-child > .btn{flex:1 1 auto;min-width:0;padding-left:10px;padding-right:10px;justify-content:center}
  #modal-body > .modal-actions:last-child > .deal-view-delete{margin-right:0}
}
/* колонки окна сделки не должны раздвигаться шире экрана из-за длинного содержимого */
.deal-view-grid > *{min-width:0}
/* вкладки сделки в узкой колонке переносятся, а не вылезают вбок (иначе — горизонтальная прокрутка) */
.deal-tabs{flex-wrap:wrap}
.deal-tab-btn{flex:1 1 auto}

/* ---------- Окно: тонкая прокрутка без стрелок, размер тянется мышью (ПК) ---------- */
.modal-body::-webkit-scrollbar{width:8px;height:8px}
.modal-body::-webkit-scrollbar-track{background:transparent}
.modal-body::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--text-dim) 45%,transparent);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
.modal-body::-webkit-scrollbar-thumb:hover{background-color:var(--text-dim)}
.modal-body::-webkit-scrollbar-button{display:none;height:0;width:0}
@supports (-moz-appearance:none){ .modal-body{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--text-dim) 45%,transparent) transparent} }
.modal-body{overflow-x:hidden}

/* overflow:hidden — закреплённая внизу полоса с кнопками не вылезает острыми углами
   за скругление окна; ручки размера поэтому лежат внутри края */
.modal{position:relative;overflow:hidden}
.mrz{position:absolute;z-index:8;touch-action:none}
.mrz-e{top:18px;bottom:22px;right:0;width:7px;cursor:ew-resize}
.mrz-w{top:18px;bottom:22px;left:0;width:7px;cursor:ew-resize}
.mrz-s{left:22px;right:22px;bottom:0;height:7px;cursor:ns-resize}
.mrz-se{right:0;bottom:0;width:22px;height:22px;cursor:nwse-resize}
.mrz-sw{left:0;bottom:0;width:22px;height:22px;cursor:nesw-resize}
/* заметный «уголок» справа внизу — чтобы было понятно, что окно тянется */
.mrz-se::after{content:"";position:absolute;right:9px;bottom:9px;width:9px;height:9px;opacity:.45;
  background:linear-gradient(135deg,transparent 45%,var(--text-dim) 45%,var(--text-dim) 55%,transparent 55%,transparent 70%,var(--text-dim) 70%,var(--text-dim) 80%,transparent 80%)}
.mrz:hover::before{content:"";position:absolute;inset:2px;border-radius:4px;background:color-mix(in srgb,var(--blue) 35%,transparent)}
.mrz-se:hover::before,.mrz-sw:hover::before{inset:6px;border-radius:50%}
body.modal-resizing,body.modal-resizing *{user-select:none!important}
body.modal-resizing .modal{transition:none}
@media (max-width:768px),(hover:none),(pointer:coarse){ .mrz{display:none} }

/* ---------- Адрес доставки (этапы «Доставка» и «Сдан», окно сделки) ---------- */
.addr-box{display:flex;gap:10px;align-items:flex-start;margin:10px 0 2px;padding:10px 12px;border-radius:12px;
  background:color-mix(in srgb,var(--blue) 11%,transparent);border:1px solid color-mix(in srgb,var(--blue) 30%,transparent)}
.addr-box > .ic-svg{flex:none;width:20px;height:20px;color:var(--blue);margin-top:2px}
.addr-box small{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--text-dim)}
.addr-box b{display:block;font-size:14.5px;font-weight:700;color:var(--text);line-height:1.35;word-break:break-word}
.addr-box.addr-missing{background:color-mix(in srgb,var(--orange) 11%,transparent);border-color:color-mix(in srgb,var(--orange) 40%,transparent)}
.addr-box.addr-missing > .ic-svg{color:var(--orange)}
.addr-box.addr-missing b{color:var(--orange);font-weight:600;font-size:13px}
.addr-box.addr-sm{margin:6px 0;padding:7px 9px;gap:7px;border-radius:9px}
.addr-box.addr-sm > .ic-svg{width:16px;height:16px;margin-top:1px}
.addr-box.addr-sm small{font-size:10px}
.addr-box.addr-sm b{font-size:12.5px}
.pcard-addr{margin-top:12px}
.deal-info-addr{display:flex;gap:6px;align-items:flex-start;margin-top:8px;font-size:13px;font-weight:600;color:var(--text);word-break:break-word}
.deal-info-addr .ic-i{color:var(--blue);margin-top:2px;flex:none}
.deal-info-addr.is-missing{color:var(--orange);font-weight:500}
.deal-info-addr.is-missing .ic-i{color:var(--orange)}

/* ---------- «Войти как» (администратор) ---------- */
.view-as-box{margin-bottom:12px}
.view-as-box select{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:var(--input-bg);color:var(--text);font:inherit;font-size:13px}
.view-as-box .view-as-back{margin-top:8px;color:var(--blue);font-weight:600}
.view-as-bar{flex:none;display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:14px;
  background:color-mix(in srgb,var(--orange) 16%,var(--pop));border:1px solid color-mix(in srgb,var(--orange) 45%,transparent);font-size:13px;color:var(--text)}
.view-as-bar .vab-ic{color:var(--orange);display:flex}
.view-as-bar .vab-txt{flex:1;min-width:0}
.view-as-bar .vab-txt small{display:block;color:var(--text-dim);font-size:11.5px}
.view-as-bar .btn{flex:none}
.view-as-bar .vab-short{display:none}
@media (max-width:768px){
  .view-as-bar .vab-long{display:none}
  .view-as-bar .vab-short{display:inline}
  .view-as-bar{margin:8px 8px 0;padding:6px 8px 6px 10px;gap:8px;font-size:12.5px;border-radius:12px}
  .view-as-bar .vab-txt small{display:none}
  .view-as-bar .vab-txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* Окно сделки: заголовок «Товары (N)» сворачивает/разворачивает список */
.view-products-toggle{display:flex;width:100%;align-items:center;justify-content:space-between;gap:8px;
  background:none;border:0;padding:4px 0;cursor:pointer;text-align:left;font-family:inherit}
.view-products-toggle .vpt-act{display:inline-flex;align-items:center;gap:4px;text-transform:none;letter-spacing:0;
  font-size:12.5px;font-weight:600;color:var(--blue)}
.view-products-toggle .vpt-act .ic-i{transition:transform .15s;transform:rotate(180deg)}
.view-products-toggle.is-closed .vpt-act .ic-i{transform:none}
.view-products-toggle:hover .vpt-act{text-decoration:underline}

/* Договоры поставки: наши юр. лица, вкладка «Договоры» в сделке, окно формирования */
.le-intro{margin:0 0 12px;font-size:13px;color:var(--text-dim)}
.le-list{display:flex;flex-direction:column;gap:8px}
.le-row{display:flex;flex-direction:column;gap:3px;align-items:flex-start;width:100%;text-align:left;padding:11px 13px;
  border:1px solid var(--border);border-radius:10px;background:var(--chip-bg);color:var(--text);cursor:pointer;font-family:inherit}
.le-row:hover{border-color:var(--blue)}
.le-name{font-weight:600;font-size:14px}
.le-meta{font-size:12px;color:var(--text-dim)}
.ctr-list{max-height:260px}
.ctr-item .ctr-title{font-size:13px;font-weight:600;color:var(--text)}
.ctr-item .ctr-dl{margin-top:7px}
.modal-body .view-section-label.ctr-section{margin:18px 0 8px}
.ctr-opt{margin-top:8px !important;align-items:center !important}
.ctr-opt span{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ctr-opt input[type="date"],.ctr-opt input[type="number"]{width:auto;min-width:0;padding:5px 8px}
.ctr-opt input[type="number"]{width:72px}
.ctr-pay-hint{align-self:flex-end;font-size:12.5px;line-height:1.5;color:var(--text-dim);padding-bottom:6px}
.ctr-spec{border:1px solid var(--border);border-radius:10px;overflow:hidden}
.ctr-spec-row{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;font-size:13px;border-bottom:1px solid var(--border)}
.ctr-spec-row:last-child{border-bottom:0}
.ctr-spec-total{background:var(--chip-bg)}
.ctr-warn{color:var(--red);font-weight:600}
.ctr-warn-box{margin-top:8px;padding:8px 11px;border-radius:8px;font-size:12.5px;color:var(--orange);
  background:color-mix(in srgb,var(--orange) 12%,transparent)}
.ctr-note{margin-top:8px;font-size:12px;color:var(--text-dim)}
#ctr-kind{margin-bottom:4px}
.le-settings-row{display:flex;gap:8px;align-items:center}
.le-settings-row input{width:110px;flex:none}
/* =====================================================================
   Токены оформления: перенос из старой CRM (СРМ/css/style.css, строки 1–65) почти без правок.
   Два стиля × две темы, четыре переключателя на <html>:
     data-theme = light | dark          — цвета текста и поверхностей
     data-style = liquid | material     — стекло и обои против плотных поверхностей
     data-wall  = ocean | aurora | sunset | calm — обои (только Liquid Glass)
     data-glass = on | off              — «эффект стекла»: off выключает размытие (слабые ПК)
   Ставит их инлайн-скрипт в index.html до отрисовки, дальше — shared/store/look.ts.
   Имена переменных прежние (--card, --text-dim, --blue…): так легче переносить стили экранов.
   Hex-цвета живут только здесь — в компонентах только var(--…).
   ===================================================================== */
:root {
  color-scheme: dark;
  --blue: #3b82f6;
  --blue-dark: #7fb0ff;
  --accent-hover: #2f6fdb;
  --on-accent: #fff;
  --green: #22c55e;
  --orange: #f59e0b;
  --red: #ef4444;
  --purple: #8b5cf6;
  --radius: 14px;
  --r-card: 14px;
  --r-btn: 99px;
  --r-shell: 22px;
  --font:
    "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --blur: blur(26px) saturate(170%);
  /* тёмная Liquid Glass — по умолчанию, пока скрипт не выставил атрибуты */
  --bg: #0a1330;
  --navy: #16203a;
  --glass: rgba(14, 22, 40, 0.34);
  --card: rgba(26, 36, 60, 0.72);
  --pop: rgba(22, 31, 54, 0.86);
  --bg-solid: #16203a;
  --border: rgba(255, 255, 255, 0.11);
  --text: #eef3fa;
  --text-dim: rgba(226, 236, 250, 0.66);
  --faint: rgba(226, 236, 250, 0.42);
  --chip-bg: rgba(255, 255, 255, 0.07);
  --hover-bg: rgba(255, 255, 255, 0.12);
  --input-bg: rgba(255, 255, 255, 0.06);
  --row-hover: rgba(255, 255, 255, 0.06);
  --err-bg: rgba(239, 68, 68, 0.14);
  --err-border: rgba(239, 68, 68, 0.4);
  --hi: rgba(255, 255, 255, 0.16);
  --sheen: linear-gradient(165deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 38%);
  --btn-gloss: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 60%);
  --btn-gloss-hi: rgba(255, 255, 255, 0.35);
  --shadow: inset 0 1px 0 var(--hi), 0 10px 28px -16px rgba(0, 0, 12, 0.7);
  --shadow-pop: inset 0 1px 0 var(--hi), 0 24px 60px rgba(0, 0, 12, 0.55);
  --overlay: rgba(5, 10, 25, 0.32);
  --overlay-strong: rgba(5, 10, 25, 0.4);
  --bg-image:
    radial-gradient(60% 70% at 10% 5%, rgba(37, 99, 235, 0.75), transparent 70%),
    radial-gradient(50% 60% at 90% 15%, rgba(124, 58, 237, 0.6), transparent 70%),
    radial-gradient(55% 60% at 70% 100%, rgba(8, 145, 178, 0.55), transparent 70%);
  /* акцент на тёмном фоне: инициалы, «CRM» в логотипе */
  --accent-soft: #9cc2ff;
  --logo-accent: #6ea8ff;
  /* текст на красной кнопке «Уволить», «Приостановить» */
  --on-danger: #fff;

  /* роли — подписи-«капсулы» (перенос .badge-* из старой CRM) */
  --role-admin: var(--purple);
  --role-rop: #c73a4b;
  --role-mp: var(--blue);
  --role-tech: #1c9a5b;
  --role-master: #c47a12;
  --role-snab: #c0602a;

  /* знак CentrCRM: градиент линии и подложка (как у прежнего знака Sorbon) */
  --logo-g1: #7dd3fc;
  --logo-g2: #60a5fa;
  --logo-g3: #c4b5fd;
  --logo-bg: radial-gradient(120% 100% at 25% 0%, #3a5a9a 0%, #16213a 55%, #0b1220 100%);
  --logo-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 16px -6px rgba(59, 130, 246, 0.6);

  /* превью в переключателе вида: как выглядят стиль и обои */
  --swatch-liquid:
    radial-gradient(circle at 25% 25%, #2563eb, transparent 60%),
    radial-gradient(circle at 80% 30%, #7c3aed, transparent 60%),
    radial-gradient(circle at 60% 90%, #0891b2, transparent 60%), #0a1330;
  --swatch-material: linear-gradient(135deg, #e8def8 0 50%, #6750a4 50%);
  --swatch-ocean: var(--swatch-liquid);
  --swatch-aurora:
    radial-gradient(circle at 25% 25%, #14b8a6, transparent 60%),
    radial-gradient(circle at 80% 30%, #8b5cf6, transparent 60%),
    radial-gradient(circle at 60% 90%, #db2777, transparent 60%), #0c0a1e;
  --swatch-sunset:
    radial-gradient(circle at 25% 25%, #ea580c, transparent 60%),
    radial-gradient(circle at 80% 30%, #e11d48, transparent 60%),
    radial-gradient(circle at 60% 90%, #7c3aed, transparent 60%), #1a0e16;
  --swatch-calm: radial-gradient(circle at 25% 20%, #3b5b9a, transparent 60%), #111a28;
  --knob: #fff;
}

:root[data-theme="light"] {
  color-scheme: light;
  --blue: #3b82f6;
  --blue-dark: #1f5fd0;
  --accent-hover: #2f6fdb;
  --bg: #dce6f6;
  --navy: #1b2733;
  --glass: rgba(255, 255, 255, 0.34);
  --card: rgba(255, 255, 255, 0.84);
  --pop: rgba(255, 255, 255, 0.9);
  --bg-solid: #fff;
  --border: rgba(20, 40, 90, 0.1);
  --text: #101828;
  --text-dim: #4f5b6e;
  --faint: #8b95a6;
  --chip-bg: rgba(20, 40, 90, 0.055);
  --hover-bg: rgba(20, 40, 90, 0.09);
  --input-bg: rgba(255, 255, 255, 0.75);
  --row-hover: rgba(20, 40, 90, 0.045);
  --err-bg: #fdecec;
  --err-border: #f6c8c6;
  --hi: rgba(255, 255, 255, 0.95);
  --sheen: linear-gradient(165deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0) 42%);
  --shadow:
    inset 0 1px 0 var(--hi), 0 1px 2px rgba(20, 40, 90, 0.07), 0 12px 28px -16px rgba(20, 40, 90, 0.3);
  --shadow-pop: inset 0 1px 0 var(--hi), 0 24px 60px rgba(20, 40, 90, 0.22);
  --accent-soft: var(--blue);
  --logo-accent: var(--blue);
}

/* обои (только Liquid Glass) */
[data-theme="dark"][data-wall="aurora"] {
  --bg: #0c0a1e;
  --bg-image:
    radial-gradient(55% 60% at 15% 10%, rgba(20, 184, 166, 0.55), transparent 70%),
    radial-gradient(50% 60% at 85% 15%, rgba(139, 92, 246, 0.65), transparent 70%),
    radial-gradient(50% 55% at 60% 95%, rgba(219, 39, 119, 0.45), transparent 70%);
}
[data-theme="dark"][data-wall="sunset"] {
  --bg: #1a0e16;
  --bg-image:
    radial-gradient(55% 60% at 12% 10%, rgba(234, 88, 12, 0.5), transparent 70%),
    radial-gradient(50% 60% at 88% 15%, rgba(225, 29, 72, 0.5), transparent 70%),
    radial-gradient(55% 55% at 65% 95%, rgba(124, 58, 237, 0.5), transparent 70%);
}
[data-theme="dark"][data-wall="calm"] {
  --bg: #111a28;
  --bg-image:
    radial-gradient(60% 60% at 12% 0%, rgba(59, 130, 246, 0.2), transparent 70%),
    radial-gradient(50% 55% at 100% 0%, rgba(124, 92, 252, 0.13), transparent 70%);
}
[data-theme="light"] {
  --bg-image:
    radial-gradient(60% 70% at 10% 5%, rgba(96, 165, 250, 0.6), transparent 70%),
    radial-gradient(50% 60% at 90% 15%, rgba(167, 139, 250, 0.5), transparent 70%),
    radial-gradient(55% 60% at 70% 100%, rgba(45, 212, 191, 0.4), transparent 70%);
}
[data-theme="light"][data-wall="aurora"] {
  --bg: #e7e3f7;
  --bg-image:
    radial-gradient(55% 60% at 12% 10%, rgba(94, 234, 212, 0.5), transparent 70%),
    radial-gradient(50% 60% at 88% 12%, rgba(196, 181, 253, 0.7), transparent 70%),
    radial-gradient(50% 55% at 60% 95%, rgba(249, 168, 212, 0.55), transparent 70%);
}
[data-theme="light"][data-wall="sunset"] {
  --bg: #f6e6de;
  --bg-image:
    radial-gradient(55% 60% at 10% 10%, rgba(253, 186, 116, 0.65), transparent 70%),
    radial-gradient(50% 60% at 90% 12%, rgba(253, 164, 175, 0.6), transparent 70%),
    radial-gradient(55% 55% at 65% 95%, rgba(196, 181, 253, 0.55), transparent 70%);
}
[data-theme="light"][data-wall="calm"] {
  --bg: #e9edf3;
  --bg-image:
    radial-gradient(60% 60% at 10% 0%, rgba(147, 197, 253, 0.35), transparent 70%),
    radial-gradient(50% 55% at 100% 0%, rgba(196, 181, 253, 0.25), transparent 70%);
}

/* «Эффект стекла» выключен — плотные панели без размытия */
[data-theme="dark"][data-glass="off"] {
  --glass: #131c30;
  --card: #1b2640;
  --pop: #1b2640;
}
[data-theme="light"][data-glass="off"] {
  --glass: #f1f4f8;
  --card: #fff;
  --pop: #fff;
}
[data-glass="off"] * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Material 3 — простой: тональные поверхности, без стекла и обоев */
[data-style="material"] {
  --blur: none;
  --radius: 20px;
  --r-card: 18px;
  --r-btn: 99px;
  --r-shell: 26px;
  --font: "Roboto Flex Variable", "Roboto Flex", "Roboto", system-ui, sans-serif;
  --sheen: linear-gradient(transparent, transparent);
  --btn-gloss: linear-gradient(transparent, transparent);
  --btn-gloss-hi: transparent;
  --hi: transparent;
  --bg-image: none;
}
[data-style="material"][data-theme="dark"] {
  --bg: #141218;
  --glass: #1d1b20;
  --card: #2b2930;
  --pop: #2b2930;
  --bg-solid: #2b2930;
  --navy: #2b2930;
  --border: rgba(147, 143, 153, 0.18);
  --text: #e6e0e9;
  --text-dim: #cac4d0;
  --faint: #938f99;
  --blue: #d0bcff;
  --blue-dark: #d0bcff;
  --accent-hover: #e0d0ff;
  --on-accent: #381e72;
  --chip-bg: rgba(208, 188, 255, 0.08);
  --hover-bg: #4a4458;
  --input-bg: rgba(208, 188, 255, 0.06);
  --row-hover: rgba(208, 188, 255, 0.06);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-pop: 0 24px 60px rgba(0, 0, 0, 0.5);
  --accent-soft: var(--blue);
}
[data-style="material"][data-theme="light"] {
  --bg: #fef7ff;
  --glass: #f3edf7;
  --card: #fff;
  --pop: #fff;
  --bg-solid: #fff;
  --navy: #322f37;
  --border: rgba(121, 116, 126, 0.16);
  --text: #1d1b20;
  --text-dim: #49454f;
  --faint: #79747e;
  --blue: #6750a4;
  --blue-dark: #5a4494;
  --accent-hover: #5a4494;
  --on-accent: #fff;
  --chip-bg: rgba(103, 80, 164, 0.06);
  --hover-bg: #e8def8;
  --input-bg: #fff;
  --row-hover: rgba(103, 80, 164, 0.05);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 6px -2px rgba(0, 0, 0, 0.08);
  --shadow-pop: 0 24px 60px rgba(40, 20, 80, 0.18);
  --accent-soft: var(--blue);
}
/* Общие правила страницы. Всё остальное — в CSS-модулях рядом с компонентами. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
#root {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  /* Высота строки — по шрифту («normal»), как у body старой CRM: с 1.4 всё было на 1–8 px выше. */
  line-height: normal;
  color: var(--text);
  background: var(--bg-image), var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

[hidden] {
  display: none !important;
}

h1,
h2,
h3,
p {
  margin: 0;
}

button {
  font-family: inherit;
  cursor: pointer;
}

input,
select,
textarea {
  font: inherit;
  font-size: 14px;
  color: inherit;
}

select option {
  background: var(--bg-solid);
  color: var(--text);
}

a {
  color: var(--blue);
}

/* Фокус с клавиатуры видно всегда: outline не убираем без замены (CONVENTIONS.md §8). */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* тонкая прокрутка без стрелок — как в окнах старой CRM */
* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text-dim) 45%, transparent) transparent;
}

/* Шрифт полей 16px на телефоне — иначе iPhone приближает страницу при вводе. */
@media (max-width: 768px) {
  input,
  select,
  textarea {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
/* =====================================================================
   Стыковка стилей старой CRM (legacy.css) с новой: только то, чего в старой не было
   или что устроено иначе. Вид — прежний; новые правила повторяют старые.
   ===================================================================== */

/* Окна — на <dialog> (фокус внутри, Esc). Сам dialog — прозрачный слой на весь экран, затемнение
   и окно рисует разметка старой CRM: .modal-overlay > .modal, .confirm-overlay > .confirm-box. */
dialog.legacy-modal {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  overflow: visible;
}
dialog.legacy-modal::backdrop {
  background: transparent;
}

/* Правила #modal-body старой CRM (кнопки закреплены внизу) — на класс: окон бывает несколько сразу. */
.modal-body:has(> .modal-actions:last-child) {
  padding-bottom: 0;
}
.modal-body > .modal-actions:last-child {
  position: sticky;
  bottom: 0;
  z-index: 6;
  flex-wrap: wrap;
  margin: 20px -22px 0;
  padding: 12px 22px 14px;
  background: var(--pop);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}
@media (max-width: 768px) {
  .modal-body > .modal-actions:last-child {
    margin: 16px -16px 0;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    gap: 8px;
  }
  .modal-body > .modal-actions:last-child > .btn {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 10px;
    padding-right: 10px;
    justify-content: center;
  }
  .modal-body > .modal-actions:last-child > .deal-view-delete {
    margin-right: 0;
  }
}

/* Тост живёт в слое popover (поверх открытых окон); сам слой — без рамки и фона. */
.toast-layer {
  position: fixed;
  inset: auto;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.toast-layer:not(:popover-open) {
  display: none;
}
.toast {
  cursor: pointer;
}

/* Разделы меню — ссылки (адреса разделов), а в старой CRM были div: без подчёркивания. */
a.nav-item,
a.bottom-nav-item,
a.profile-link {
  text-decoration: none;
}

/* Название компании мелко под знаком и «CentrCRM» — решение владельца 30.09 (сначала было наоборот, №48).
   В старой CRM компания была одна. */
.sidebar-company {
  margin: -10px 10px 12px;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app.sidebar-collapsed .sidebar-company {
  display: none;
}

/* Свёрнутое меню (и планшет, где меню всегда узкое). Старая CRM прятала подпись раздела правилом
   `.nav-item span:last-child`, а за подписью бывает красный счётчик — тогда подпись оставалась, «Задачи»
   вылезали текстом и появлялась прокрутка вбок (замечание владельца 30.09). Здесь: подпись прячем по классу,
   счётчик — маленький в углу значка, подписи групп — тонкой чертой, значок профиля — целиком (его
   обрезала плашка шириной 22px с overflow: hidden). */
.app.sidebar-collapsed .nav-item .nav-label {
  display: none;
}
.app.sidebar-collapsed .nav-item {
  position: relative;
}
.app.sidebar-collapsed .nav-badge {
  position: absolute;
  top: 2px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
}
.app.sidebar-collapsed .nav-sep {
  height: 1px;
  margin: 10px 8px;
  flex: none;
  padding: 0;
  overflow: hidden;
  background: var(--border);
  color: transparent;
}
.app.sidebar-collapsed .me-row {
  overflow: visible;
}
@media (max-width: 860px) {
  .sidebar .nav-item .nav-label {
    display: none;
  }
  .sidebar .nav-item {
    position: relative;
  }
  .sidebar .nav-badge {
    position: absolute;
    top: 2px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
  }
  .sidebar .nav-sep {
    height: 1px;
    margin: 10px 8px;
    flex: none;
    padding: 0;
    overflow: hidden;
    background: var(--border);
    color: transparent;
  }
  .sidebar .me-row {
    overflow: visible;
  }
}
.nav-empty {
  padding: 12px;
  color: var(--faint);
  font-size: 12.5px;
  line-height: 1.45;
}

/* «Перенести на этап?» у шкалы товара — popover (top layer), чтобы быть поверх окна <dialog>.
   Снимаем оформление popover по умолчанию; остальное — .dd-pop.stage-pop старой CRM. */
.dd-pop[popover] {
  inset: auto;
  margin: 0;
  color: var(--text);
}
.dd-pop[popover]:not(:popover-open) {
  display: none;
}

/* «Открыть ТЗ» — ссылка на файл, а выглядит кнопкой старой CRM: без подчёркивания. */
a.btn {
  text-decoration: none;
}

/* Статус материала (.mst) в окне: общие правила полей окна (.modal-body select — ширина 100%, свой
   фон и отступы) иначе растягивают его и снимают цвет статуса. Значения — те же, что у .mst. */
.modal-body select.mst {
  width: auto;
  flex: none;
  padding: 5px 26px 5px 10px;
  border-radius: 99px;
  border: 1px solid color-mix(in srgb, var(--sc) 40%, transparent);
  background-color: color-mix(in srgb, var(--sc) 15%, transparent);
  color: var(--sc);
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 13px) 55%,
    calc(100% - 9px) 55%;
  background-size: 4px 4px;
  background-repeat: no-repeat;
}

/* Плитки выполненных работ (.worklog.wl-grid) — прозрачная сетка, но общее правило стекла размывает под
   ней фон: справа от неполного ряда плиток было мутное пятно (в старой CRM тоже). Размытие — у плиток. */
.worklog.wl-grid {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Подсказка про уведомления в меню профиля: в старой CRM она была белой (меню было тёмным), в светлой теме
   её не прочесть — цвет как у подписей рядом. */
.me-pop .push-hint {
  color: var(--text-dim);
}

/* «Сменить пароль» в окне профиля: общее правило окна красит строки-кнопки в красный — это для «Выйти». */
.me-pop .btn-block.me-pw {
  color: var(--text);
}

/* «Сменить пароль» в профиле на телефоне — строкой, как «Выйти из аккаунта», но не красной. */
.profile-pw {
  padding: 13px;
  font-size: 15px;
  margin-bottom: 10px;
}

/* Глазик у пароля в окне (смена своего пароля) — как на входе: #login-form .pw-eye старой CRM. */
.modal-body .pw-eye {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  color: var(--text-dim);
  cursor: pointer;
  border-radius: 8px;
}
.modal-body .pw-eye:hover {
  background: var(--hover-bg);
  color: var(--text);
}
.modal-body .pw-eye .ic-svg {
  width: 18px;
  height: 18px;
}

/* Колокольчик — история уведомлений (задачник №22–24): новые, пока окно открыто, подсвечены тем же
   тёплым тоном, что сработавшие напоминания в старой CRM (.notif-card-due), и с точкой слева — на тёмном
   стекле одного тона мало. */
.notif-item.notif-item-new {
  background: rgba(245, 166, 35, 0.1);
}
.notif-item.notif-item-new:hover {
  background: rgba(245, 166, 35, 0.16);
}
.notif-item.notif-item-new::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 16px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
}
/* На телефоне колокольчик тоже в шапке (слово владельца 30.09) — вместо вкладки «Уведомления» внизу; окно
   — во всю ширину под шапкой, а не узкий список у края. */
@media (max-width: 768px) {
  .topbar .notif-bell-wrap {
    display: block;
  }
  .topbar .notif-dropdown {
    position: fixed;
    top: calc(64px + env(safe-area-inset-top));
    left: 10px;
    right: 10px;
    width: auto;
    max-height: min(70vh, 520px);
  }
}

/* «N в цеху» и кнопка смены — одной группой (слово владельца 30.09): капсула, внутри «● N в цеху», черта и знак
   «вкл/выкл» (⏻, как на пульте — логотип «C» владелец не узнавал как «вкл/выкл»). Не на смене знак синий; на
   смене кнопка зелёная, а перед ней в той же капсуле — таймер за сегодня. */
.shift-group {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 38px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 99px;
  background: var(--sheen), var(--chip-bg);
}
.shift-group.on {
  border-color: color-mix(in srgb, var(--green) 45%, var(--border));
}
.shift-group .presence-btn {
  height: 32px;
  padding: 0 8px 0 10px;
  border: 0;
  border-radius: 99px;
  background: none;
  box-shadow: none;
}
.shift-group .presence-btn:hover {
  background: var(--hover-bg);
}
.shift-group-sep {
  flex: none;
  width: 1px;
  height: 20px;
  background: var(--border);
}
.shift-power {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--blue);
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s,
    box-shadow 0.15s;
}
.shift-power:hover {
  background: var(--hover-bg);
}
.shift-power .ic-svg {
  width: 19px;
  height: 19px;
  stroke-width: 2.3;
}
.shift-power.on {
  background: var(--green);
  color: #fff;
  box-shadow: 0 0 12px -3px color-mix(in srgb, var(--green) 80%, transparent);
}
.shift-timer {
  padding-left: 4px;
  color: var(--green);
  font-size: 13.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Телефон: шапка узкая — плотнее, чтобы название страницы не пряталось в «Св…». */
@media (max-width: 768px) {
  .topbar {
    column-gap: 6px;
  }
  .shift-group .presence-btn {
    padding: 0 6px 0 8px;
  }
  .shift-timer {
    font-size: 12.5px;
  }
}

/* Строка фильтров (задачник №41, shared/ui/ToolbarMore): в строке — поиск, воронка «Фильтры и вид» и кнопка
   «+ …»; остальное («Все / Мои», «Менеджер», «Развернуть товары», «Колонки»…) — по нажатию на воронку. Сначала
   так было только на телефоне; 30.09 владелец попросил так же на компьютере — не столь важное не должно
   занимать место. */
.tb-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  height: 38px;
  padding: 0 12px;
  border-radius: 99px;
}
.tb-more.on {
  border-color: var(--blue);
  color: var(--blue);
}
.tb-more-count {
  font-size: 12px;
  font-weight: 700;
}
.tb-extra {
  display: none;
}
.tb-extra.open {
  order: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.tb-extra.open .tb-right {
  margin-left: 0;
  flex-wrap: wrap;
  overflow: visible;
}
/* Кнопки «завести новое» — «+ Новая сделка», «+ Задача», «+ Заказчик», «+ Дизайнер / компания», «+ Пользователь»,
   «+ Компания» в консоли… — пунктиром, как «+ Сделка» внизу колонки (владелец 30.09: синие путались с кнопкой
   смены, «все подобные кнопки — как «+ Задача»»). В строке фильтров — прижаты вправо. */
.btn.btn-add {
  border: 1px dashed var(--border);
  background: none;
  box-shadow: none;
  color: var(--text-dim);
}
.btn.btn-add:hover {
  color: var(--text);
  background: var(--chip-bg);
}
.board-toolbar .btn.tb-new {
  flex: none;
  height: 38px;
  margin-left: auto;
}
@media (max-width: 768px) {
  .board-toolbar .tb-filter {
    order: 0;
    width: auto;
    flex: 1;
    min-width: 0;
  }
}

/* Телефоны клиента и дизайнера в шапке окна сделки (shared/ui/PhoneLinks): позвонить и открыть чат в
   WhatsApp — у МП в окне сделки и у технолога в сделке изделия (задачник №25–27). У технолога дизайнер —
   второй строкой шапки .deal-info-card, чуть мельче клиента; у МП — в строке .deal-info-meta, как было. */
.deal-info-meta .deal-info-designer-meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}
.deal-contact-phone {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}
.deal-contact-phone a.tel {
  color: var(--text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.deal-contact-phone a.btn {
  text-decoration: none;
}
.deal-info-designer {
  margin-top: 8px;
}
.deal-info-designer .deal-info-name {
  font-size: 14px;
}
.deal-info-designer .deal-info-name small {
  color: var(--text-dim);
  font-weight: 500;
}
/* «№… · клиент» в карточке товара у технолога нажимается и открывает сделку — как товар в окне сделки
   открывает свою карточку. Вид — ссылка .link старой CRM, но размером самого поля. */
.view-value-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--blue);
  text-align: right;
  cursor: pointer;
}
.view-value-link:hover {
  text-decoration: underline;
}

/* Номер выпуска — «CentrCRM v26.10.01 · лаборатория» (слово владельца 30.09, INTEGRATION.md §8.17): мелко
   внизу меню, в «Профиле», под окном входа и в консоли. */
.version-label {
  font-size: 11.5px;
  color: var(--faint);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.sidebar-version {
  margin: 8px 10px 2px;
}
.app.sidebar-collapsed .sidebar-version {
  display: none;
}
.profile-version {
  margin: 18px 0 6px;
}
.login-version {
  margin-top: 14px;
}
.console-version {
  margin: 24px 0 8px;
}

/* Сервер обновился, пока вкладка открыта, — полоса «Вышло обновление — обновить» под шапкой. */
.update-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0 0;
  padding: 8px 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--blue) 40%, transparent);
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  font-size: 13.5px;
}

/* Окно «Что нового» (слово владельца 30.09): обращение, пункты для сотрудника и у каждого — звёзды 1–5
   (нажал — сохранилось), внизу — поле пожеланий. Навели на звёзды — горят до курсора. */
.whatsnew-hello {
  margin: 0 0 12px;
  font-size: 14.5px;
  line-height: 1.5;
}
.whatsnew-list {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  line-height: 1.45;
}
.whatsnew-list li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--chip-bg);
}
.whatsnew-stars {
  display: flex;
  gap: 2px;
}
.whatsnew-star {
  width: 30px;
  height: 30px;
  padding: 3px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: color-mix(in srgb, var(--text-dim) 45%, transparent);
  cursor: pointer;
}
.whatsnew-star svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}
.whatsnew-star.on,
.whatsnew-stars:hover .whatsnew-star {
  color: #f5a623;
}
.whatsnew-stars:hover .whatsnew-star:hover ~ .whatsnew-star {
  color: color-mix(in srgb, var(--text-dim) 45%, transparent);
}
.whatsnew-star:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}
.whatsnew-poll {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.whatsnew-question {
  font-weight: 600;
}
.whatsnew-comment {
  width: 100%;
  resize: vertical;
}

/* «+» рядом с названием колонки продаж (слово владельца 30.09): новая сделка сразу на этом этапе — у колонок
   до «В производстве». Название больше не растягивается, счётчик прижат вправо — как было. */
.kanban-col-head-top .kanban-col-title {
  flex: 0 1 auto;
}
.kanban-col-head-top .kanban-col-count {
  margin-left: auto;
}
.kanban-col-plus {
  flex: none;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--chip-bg);
  color: var(--blue);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}
.kanban-col-plus:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--on-accent);
}
.kanban-col-plus .ic-svg {
  width: 14px;
  height: 14px;
}
@media (max-width: 768px) {
  .kanban-col-plus {
    width: 28px;
    height: 28px;
    border-radius: 9px;
  }
}

/* «Клиенты»: вкладки «Заказчики · Дизайнеры» сверху (слово владельца 30.09) — .seg старой CRM, но ссылками:
   вкладка в адресе. */
.clients-tabs {
  align-items: flex-start;
  margin-bottom: 4px;
}
.seg a {
  padding: 6px 15px;
  border-radius: 99px;
  color: var(--text-dim);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}
.seg a:hover {
  color: var(--text);
}
.seg a.on {
  background: var(--sheen), var(--hover-bg);
  color: var(--text);
  box-shadow: inset 0 1px 0 var(--hi);
}

/* Период «Сводки» на телефоне (слово владельца 30.09): вместо ряда кнопок и подписи под ним — одна плашка
   «Сентябрь 2026 ▾» справа от «Итоги за период»; нажали — родной список телефона (select поверх плашки,
   прозрачный). Свои даты — строкой ниже. На компьютере — как было. */
.dash-period-pick {
  display: none;
}
@media (max-width: 768px) {
  .dash-period,
  .sec-h .dash-period {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin: 0 0 0 auto;
  }
  .dash-period .dash-period-tabs,
  .dash-period .dash-period-label {
    display: none;
  }
  .dash-period-pick {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border-radius: 99px;
    border: 1px solid var(--border);
    background: var(--sheen), var(--glass);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
  }
  .dash-period-pick:focus-within {
    border-color: var(--blue);
  }
  .dash-period-pick .ic-svg {
    width: 14px;
    height: 14px;
    color: var(--text-dim);
  }
  .dash-period-pick select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    font-size: 16px;
    cursor: pointer;
  }
  .dash-period .dash-period-custom {
    flex-basis: 100%;
  }
}

/* «Оформление» в профиле (слово владельца 30.09): свёрнуто в строку «Оформление · Liquid Glass · Авто ▾»,
   внутри плотнее — стили двумя плашками в ряд без пояснений, тема — значок и слово в строку, фон и
   «Эффект стекла» — одной строкой. */
.look-details > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.look-details > summary::-webkit-details-marker {
  display: none;
}
.look-details-value {
  min-width: 0;
  margin-left: auto;
  overflow: hidden;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.look-details > summary .ic-svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--text-dim);
  transition: transform 0.15s;
}
.look-details[open] > summary .ic-svg {
  transform: rotate(180deg);
}
.look-details-body {
  margin-top: 12px;
}
.look-details .look-styles {
  flex-direction: row;
  gap: 6px;
}
.look-details .look-style {
  flex: 1;
  min-width: 0;
  padding: 8px;
  background: var(--chip-bg);
}
.look-details .look-style.active {
  background: var(--hover-bg);
  box-shadow: inset 0 0 0 1px var(--blue);
}
.look-details .look-style small {
  display: none;
}
.look-details .theme-opt {
  flex-direction: row;
  gap: 6px;
  padding: 8px 0;
  font-size: 14px;
}
.look-details .look-liquid-only {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
.look-details .look-liquid-only .theme-switcher-label {
  flex-basis: 100%;
  margin-bottom: 0;
}
.look-details .look-glass {
  width: auto;
  margin-left: auto;
}

/* Анкета (слово владельца 30.09): фото в кружке вместо буквы — в меню, в «Профиле» и в окне анкеты. */
.has-photo {
  padding: 0;
  overflow: hidden;
  background: var(--chip-bg);
}
.has-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.profile-anketa {
  margin-top: 14px;
}
.anketa-photo {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 6px;
}
.anketa-ava {
  flex: none;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--blue);
  color: var(--on-accent);
  font-size: 34px;
  font-weight: 700;
}
.anketa-photo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Окошки «Начать смену» и «Кто в цеху» — у самих кнопок шапки (слово владельца 30.09), а не окном посреди
   экрана и не вкладкой на весь экран телефона. */
.dd-pop.shift-pop,
.dd-pop.presence-pop {
  width: min(360px, calc(100vw - 16px));
  max-height: min(78vh, 620px);
  padding: 12px 14px 14px;
}
.shift-pop-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.shift-pop-head b {
  margin-right: auto;
  font-size: 15px;
}
.shift-pop-x {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--chip-bg);
  color: var(--text-dim);
  cursor: pointer;
}
.shift-pop-x:hover {
  color: var(--text);
}
.shift-pop-x .ic-svg {
  width: 15px;
  height: 15px;
}
.shift-pop .shift-modal-custom {
  display: flex;
  align-items: center;
  gap: 8px;
}
.shift-pop .shift-modal-custom .tf {
  width: 96px;
}
/* Поле времени в окошке — как поля в окнах (.modal-body input старой CRM), только без окошка выбора. */
.shift-pop .tf .tf-input {
  width: 100%;
  height: 38px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--input-bg);
  color: var(--text);
  font: inherit;
  font-size: 15px;
}
.shift-pop .tf .tf-input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 22%, transparent);
}
.presence-cal {
  position: relative;
  display: inline-flex;
}
.presence-cal input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}
.presence-back {
  margin: -4px 0 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--blue);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.presence-absent {
  margin-top: 10px;
}
.presence-absent > summary {
  cursor: pointer;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  list-style: none;
}
.presence-absent > summary::-webkit-details-marker {
  display: none;
}
.presence-absent > summary::before {
  content: "▸ ";
}
.presence-absent[open] > summary::before {
  content: "▾ ";
}
.presence-absent > summary span {
  margin-left: 4px;
  color: var(--text);
}
.presence-absent .worklog {
  margin-top: 8px;
}

/* «Что нового»: сколько уже оценено; оценённые пункты — коротко, одной строкой со звёздами (владелец 30.09:
   видно, что уже оценил и какую звезду поставил). */
.whatsnew-progress {
  margin: -4px 0 10px;
  color: var(--text-dim);
  font-size: 12.5px;
  font-weight: 600;
}
.whatsnew-list li.rated {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
}
.whatsnew-list li.rated .whatsnew-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text-dim);
  font-size: 13px;
}
.whatsnew-list li.rated .whatsnew-star {
  width: 22px;
  height: 22px;
  padding: 2px;
}

/* Окно Заказчика или дизайнера (слово владельца 30.09): итоги за период плитками, ниже — все сделки с этапом
   (цвет этапа — полоской), суммой и оплатой; нажали на сделку — её окно. */
.cs-phone {
  margin-bottom: 12px;
}
.cs-period {
  margin-bottom: 6px;
  color: var(--text-dim);
  font-size: 12.5px;
  font-weight: 600;
}
.cs-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.cs-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--chip-bg);
}
.cs-stat small {
  color: var(--text-dim);
  font-size: 12px;
}
.cs-stat b {
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}
.cs-deals {
  display: flex;
  flex-direction: column;
}
.cs-deal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.cs-deal:last-child {
  border-bottom: 0;
}
.cs-deal:hover {
  background: var(--chip-bg);
}
.cs-deal-main,
.cs-money {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cs-deal small,
.cs-money small {
  color: var(--text-dim);
  font-size: 12px;
}
.cs-money {
  align-items: flex-end;
  font-variant-numeric: tabular-nums;
}
.cs-stage {
  padding: 3px 10px;
  border-radius: 99px;
  border-left: 3px solid var(--stage-color);
  background: var(--chip-bg);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .cs-deal {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .cs-stage {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

/* «Задачи»: вкладки, воронка и «+ Задача» — одной строкой и на компьютере, и на телефоне (владелец 30.09: «всё
   равно разделение на 2 строки»). Вкладкам тесно — листаются вбок; на телефоне у «+» нет слова. */
.tk-page .board-toolbar {
  flex-wrap: wrap;
}
/* Основа 0 — строка не переносится (перенос считают по основе, а не по сжатию); растут вкладки не шире себя. */
.tk-page .board-toolbar .tk-filters {
  flex: 1 1 0;
  max-width: max-content;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.tk-page .board-toolbar .tk-filters::-webkit-scrollbar {
  display: none;
}
@media (max-width: 768px) {
  /* «+ Задача», «+ Заказчик»… на телефоне — только «+», чтобы строка не переносилась. */
  .board-toolbar .tb-icon-m {
    width: 38px;
    padding: 0;
    justify-content: center;
  }
  .board-toolbar .tb-icon-m .tb-new-text {
    display: none;
  }
}

/* Выбор вкладки на телефоне одной плашкой (shared/ui/PhonePick): «Мои задачи · 1 ▾», «Все · 12 ▾» — вместо
   ряда кнопок .seg, который не влезал (владелец 30.09). На компьютере — ряд кнопок, плашки нет. */
.seg-pick {
  display: none;
}
@media (max-width: 768px) {
  .seg.seg-desktop {
    display: none;
  }
  .seg-pick {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 12px 0 14px;
    border-radius: 99px;
    border: 1px solid var(--border);
    background: var(--sheen), var(--glass);
    color: var(--text);
    font-size: 13.5px;
    font-weight: 600;
  }
  .seg-pick-text {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .seg-pick .n {
    flex: none;
  }
  .seg-pick .ic-svg {
    flex: none;
    width: 14px;
    height: 14px;
    margin-left: auto;
    color: var(--text-dim);
  }
  .seg-pick select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    font-size: 16px;
    cursor: pointer;
  }
}

/* «Сотрудники», вид «Все» — группы по ролям: строка-заголовок «МП 3». */
.tbl .grp-row td {
  padding: 10px 14px 6px;
  background: var(--chip-bg);
  color: var(--text-dim);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: default;
}
.tbl .grp-row .n {
  margin-left: 4px;
  color: var(--text);
}

/* Плитки итогов на телефоне — «Сводка», «Клиенты» и другие (владелец 30.09: «забирают много экранного
   пространства»): плотнее — значок маленький и без подложки, число мельче, пояснение в одну строку;
   нечётная последняя — во всю ширину, без пустой клетки рядом. */
@media (max-width: 768px) {
  .kpis,
  .stats {
    gap: 8px;
  }
  .kpi,
  .pn.st {
    gap: 2px;
    padding: 9px 11px;
  }
  .kpi-top,
  .st .l {
    gap: 5px;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
  }
  .kpi-ic,
  .st .l i {
    width: 16px;
    height: 16px;
    background: none !important;
  }
  .kpi-ic .ic-svg,
  .st .l i .ic-svg {
    width: 14px;
    height: 14px;
  }
  .kpi-val,
  .st .v {
    margin-top: 1px;
    font-size: 17px;
  }
  .kpi-sub,
  .st .s {
    font-size: 11.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .kpis > :last-child:nth-child(odd),
  .stats > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* Таблицы итогов на телефоне — «Менеджеры», «Мастера», «Рабочее время сотрудников» (замечено 30.09): колонки
   стояли вплотную, сумма успешных переносилась и заезжала на «Оплат», карточка вылезала за экран. Между
   колонками — зазор, числа не переносятся и чуть мельче, сумма успешных — строкой ниже числа; у «Менеджеров» и
   «Мастеров» без кружков с буквами — место под суммы. Если суммы совсем большие, переносится имя, а не экран
   едет вбок. На компьютере — как в старой: «1 · 1 240 000 ₸» в строку, с кружками. */
@media (max-width: 768px) {
  .pn table.dt th + th,
  .pn table.dt td + td {
    padding-left: 8px;
  }
  .pn table.dt td.num {
    white-space: nowrap;
  }
  .team-tables > .pn {
    min-width: 0;
  }
  .team-tables td.num {
    font-size: 12.5px;
  }
  .team-tables .team-sum {
    display: block;
    margin-top: 1px;
    font-size: 11.5px;
    color: var(--text-dim);
  }
  .team-tables .team-dot,
  .team-tables .who .ava {
    display: none;
  }
  .team-tables .who {
    overflow-wrap: anywhere;
  }
}
/* Экран входа — перенос .login-screen / .login-card. */
._screen_1pubc_2 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 20px;
  padding-top: calc(20px + env(safe-area-inset-top));
}

._card_1pubc_12 {
  width: 380px;
  max-width: 100%;
  padding: 32px 30px 26px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--sheen), var(--pop);
  box-shadow: var(--shadow-pop);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}

._logo_1pubc_24 {
  display: flex;
  justify-content: center;
}

._sub_1pubc_29 {
  margin: 6px 0 22px;
  color: var(--text-dim);
  font-size: 13px;
  text-align: center;
}

._footer_1pubc_36 {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
}

._center_1pubc_46 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 20px;
}

@media (max-width: 768px) {
  ._card_1pubc_12 {
    padding: 26px 20px 22px;
  }
}
._logo_1yo2i_1 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

._mark_1yo2i_11 {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--logo-bg);
  box-shadow: var(--logo-shadow);
}

._mark_1yo2i_11 svg {
  display: block;
  width: 20px;
  height: 20px;
  overflow: visible;
}

._text_1yo2i_29 {
  font-size: 17px;
}

._accent_1yo2i_33 {
  color: var(--logo-accent);
}

._lg_1yo2i_37 ._mark_1yo2i_11 {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

._lg_1yo2i_37 ._mark_1yo2i_11 svg {
  width: 24px;
  height: 24px;
}

._lg_1yo2i_37 ._text_1yo2i_29 {
  font-size: 24px;
}

._md_1yo2i_52 {
}

._srOnly_1yo2i_55 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}