/* ============================================================================
   Ядро · демо для Центра косметологии и пластической хирургии (Московская, 19)
   Светлая медицинская тема. База токенов и скелета — из демо «ВиК»,
   акцент сдвинут в синий под офтальмологию. Без зависимостей.
============================================================================ */

/* ── Шрифт вшит локально: демо показывается с чужих компьютеров, где нужного
      системного шрифта может не быть. Никаких внешних запросов. ─────────── */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('assets/fonts/inter-cyrillic.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('assets/fonts/inter-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('assets/fonts/inter-latin.woff2') format('woff2');
  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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  /* поверхности */
  --bg:        #F5F7FA;
  --panel:     #FFFFFF;
  --panel-2:   #FAFBFD;
  /* текст */
  --ink:       #16202B;
  --ink-2:     #56616F;
  --ink-3:     #949FAC;
  /* линии */
  --line:      #E2E7EE;
  --line-2:    #EDF0F5;
  /* акцент */
  --accent:    #1F6FEB;
  --accent-d:  #1857BC;
  --accent-bg: #E8F1FE;
  /* второй акцент — «новое направление» */
  --gold:      #B7791F;
  --gold-bg:   #FCF3E3;
  /* статусы */
  --ok:        #16A34A;
  --ok-bg:     #E7F6EC;
  --warn:      #F59E0B;
  --warn-bg:   #FEF3DA;
  --bad:       #DC2626;
  --bad-bg:    #FBE7E7;
  /* геометрия */
  --r:         12px;
  --r-sm:      8px;
  --shadow:    0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
  --shadow-lg: 0 8px 28px rgba(16,24,40,.14);
  --sidebar:   248px;
  --dock:      64px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px; line-height: 1.45;
  color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.01em; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--accent-bg); }

/* ---- скелет ----------------------------------------------------------- */
.app { display: grid; grid-template-columns: var(--sidebar) 1fr; min-height: 100%; }

.sidebar {
  background: var(--panel); border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.brand { padding: 16px 18px 14px; border-bottom: 1px solid var(--line-2); }
.brand .clogo { display: block; width: 100%; max-width: 196px; height: auto; }
.brand-sys {
  display: flex; align-items: center; gap: 7px; margin-top: 12px;
  padding-top: 11px; border-top: 1px solid var(--line-2);
  font-size: 11.5px; color: var(--ink-3);
}
.brand-sys img { width: 18px; height: 18px; flex: none; }
.brand-sys b { color: var(--ink); font-weight: 800; letter-spacing: -.01em; }

.nav { padding: 10px; display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
.nav-cap { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 12px 11px 6px; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: var(--r-sm);
  color: var(--ink-2); font-weight: 500; font-size: 13.5px;
  border: 0; background: transparent; width: 100%; text-align: left;
  transition: background .12s, color .12s;
}
.nav-item svg { width: 18px; height: 18px; flex: none; stroke-width: 1.8; }
.nav-item:hover { background: var(--panel-2); color: var(--ink); }
.nav-item.active { background: var(--accent-bg); color: var(--accent-d); font-weight: 600; }
.nav-item .step-n {
  margin-left: auto; font-size: 10.5px; font-weight: 700; color: var(--ink-3);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 100px;
  min-width: 20px; height: 19px; display: grid; place-items: center; padding: 0 5px;
}
.nav-item.active .step-n { background: var(--panel); border-color: #BBD4F7; color: var(--accent-d); }
.nav-item .star { margin-left: auto; color: var(--gold); font-size: 12px; }
.nav-item.active .star + .step-n, .nav-item .star + .step-n { margin-left: 6px; }

.sidebar-foot { padding: 12px 14px; border-top: 1px solid var(--line-2); font-size: 11px; color: var(--ink-3); }

/* значок локальности — виден всегда */
.local {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(180deg, #F4FAF6, #EDF7F1);
  border: 1px solid #CFE8D9; border-radius: var(--r-sm);
  padding: 9px 10px; color: #15703F;
}
.local .bolt { flex: none; }
.local .l-main { font-size: 11.5px; font-weight: 700; line-height: 1.25; }
.local .l-sub  { font-size: 10.5px; color: #4A8767; margin-top: 1px; }
.local .dot { width: 7px; height: 7px; border-radius: 50%; background: #16A34A; box-shadow: 0 0 0 3px rgba(22,163,74,.16); flex: none; }

/* ---- основная область ------------------------------------------------- */
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 28px; background: var(--panel);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20;
}
.topbar h1 { font-size: 19px; }
.topbar .spacer { flex: 1; }
.topbar .today { font-size: 13px; color: var(--ink-2); }
.topbar .who { display: flex; align-items: center; gap: 9px; padding-left: 14px; border-left: 1px solid var(--line); }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 11.5px; font-weight: 700;
  background: var(--accent-bg); color: var(--accent-d);
}
.role-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border: 1px solid var(--line); border-radius: 100px;
  background: var(--panel-2); color: var(--ink-2); font-size: 12.5px; font-weight: 600;
}
.role-pill svg { color: var(--accent-d); flex: none; }

.view { padding: 22px clamp(24px, 3vw, 56px) 30px; width: 100%; flex: 1; }

/* ---- плашка «пришли из модуля КП» ------------------------------------- */
.kp-banner {
  display: flex; align-items: center; gap: 14px;
  padding: 10px clamp(24px, 3vw, 56px);
  background: #11181F; color: #EDE6D6;
  border-bottom: 1px solid rgba(237,230,214,.14);
  position: sticky; top: 61px; z-index: 19;
}
.kp-banner .kpb-num {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 13px; font-weight: 700; color: #7EE787;
  border: 1px solid rgba(126,231,135,.4); border-radius: 6px;
  padding: 3px 9px; flex: none;
}
.kp-banner .kpb-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kp-banner .kpb-t { font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; }
.kp-banner .kpb-s { font-size: 11.5px; color: rgba(237,230,214,.55); margin-top: 1px; }
.kp-banner .kpb-back {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.25;
  padding: 7px 13px; border-radius: var(--r-sm); cursor: pointer;
  background: rgba(237,230,214,.08); color: #EDE6D6;
  border: 1px solid rgba(237,230,214,.22); transition: background .13s, border-color .13s;
}
.kp-banner .kpb-back:hover { background: rgba(237,230,214,.15); border-color: rgba(237,230,214,.4); }
.kp-banner .kpb-back svg { flex: none; }

/* ---- док сценария ----------------------------------------------------- */
.dock {
  position: sticky; bottom: 0; z-index: 30;
  display: flex; align-items: center; gap: 14px;
  padding: 11px clamp(24px, 3vw, 56px);
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
}
.dock .dock-label { font-size: 12.5px; color: var(--ink-3); line-height: 1.25; display: flex; align-items: center; }
.dock .steps { display: flex; align-items: center; gap: 6px; flex: 1; overflow-x: auto; }
.dock .sdot {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  border: 1px solid var(--line); background: var(--panel);
  color: var(--ink-3); font-size: 11.5px; font-weight: 700;
  display: grid; place-items: center; transition: all .15s;
}
.dock .sdot:hover { border-color: #BBD4F7; color: var(--accent-d); }
.dock .sdot.on   { background: var(--accent); border-color: var(--accent); color: #fff; }
.dock .sdot.past { background: var(--accent-bg); border-color: #CFE0F8; color: var(--accent-d); }
.dock .sline { width: 14px; height: 1px; background: var(--line); flex: none; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  font-size: 13px; font-weight: 600; line-height: 1.25; padding: 8px 15px; border-radius: var(--r-sm);
  transition: background .12s, border-color .12s, transform .12s;
}
.btn svg { flex: none; display: block; }
.btn:hover:not(:disabled) { background: var(--panel-2); border-color: #CBD5E1; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover:not(:disabled) { background: var(--accent-d); border-color: var(--accent-d); }
.btn.big { padding: 11px 20px; font-size: 14px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); }

/* ---- общие компоненты ------------------------------------------------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.card-h { display: flex; align-items: center; gap: 10px; padding: 15px 18px; border-bottom: 1px solid var(--line-2); flex-wrap: wrap; }
.card-h h3 { font-size: 14.5px; }
.card-h .muted { font-size: 12px; color: var(--ink-3); font-weight: 500; }
.card-h .spacer { flex: 1; }
.card-b { padding: 16px 18px; }

.grid { display: grid; gap: 16px; }
.row-2 { display: grid; gap: 16px; grid-template-columns: 1.15fr .85fr; align-items: start; }
.row-2-eq { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; align-items: start; }
.grid > *, .row-2 > *, .row-2-eq > * { min-width: 0; }

.screen-head { margin-bottom: 16px; }
.screen-head .kick { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-d); }
.screen-head h2 { font-size: 22px; margin-top: 4px; letter-spacing: -.02em; }
.screen-head p { margin: 5px 0 0; color: var(--ink-2); font-size: 13.5px; max-width: 760px; }

.note { font-size: 11.5px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.note svg { flex: none; color: #4A8767; }

.tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 100px; background: var(--line-2); color: var(--ink-2); }
.tag.ok   { background: var(--ok-bg);   color: #15803D; }
.tag.warn { background: var(--warn-bg); color: #B45309; }
.tag.bad  { background: var(--bad-bg);  color: #B91C1C; }
.tag.acc  { background: var(--accent-bg); color: var(--accent-d); }
.tag.gold { background: var(--gold-bg); color: var(--gold); }
.tag .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { border: 1px solid var(--line); background: var(--panel); color: var(--ink-2); font-size: 12.5px; font-weight: 600; padding: 6px 13px; border-radius: 100px; }
.chip.on { background: var(--accent-bg); border-color: #CFE0F8; color: var(--accent-d); }

.fade-in { animation: fade .35s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pop-in { animation: pop .4s cubic-bezier(.2,.8,.3,1) both; }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }

/* ---- KPI -------------------------------------------------------------- */
.kpis { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; box-shadow: var(--shadow); }
.kpi .label { font-size: 12px; color: var(--ink-2); font-weight: 500; }
.kpi .num { font-size: 28px; font-weight: 800; letter-spacing: -.03em; margin-top: 7px; line-height: 1; }
.kpi .sub { font-size: 11.5px; color: var(--ink-3); margin-top: 6px; }

/* ============================ ЭКРАН 1 · ЛЕНТА ============================ */
.call-live {
  border: 1px solid #BBD4F7; background: linear-gradient(180deg, #F4F9FF, #EAF2FE);
  border-radius: var(--r); padding: 18px 20px; margin-bottom: 14px;
  display: flex; align-items: center; gap: 18px;
}
.call-live .ring { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--accent); color: #fff; animation: ring 1.1s ease-in-out infinite; }
@keyframes ring { 0%,100% { box-shadow: 0 0 0 0 rgba(31,111,235,.35); } 50% { box-shadow: 0 0 0 10px rgba(31,111,235,0); } }
.call-live .cl-num { font-size: 16px; font-weight: 700; }
.call-live .cl-sub { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.wave { display: flex; align-items: flex-end; gap: 3px; height: 34px; margin-left: auto; }
.wave i { width: 3px; border-radius: 3px; background: var(--accent); opacity: .75; animation: wv 900ms ease-in-out infinite; }
@keyframes wv { 0%,100% { height: 20%; } 50% { height: 100%; } }

.razbor { border: 1px solid #BBD4F7; border-radius: var(--r); overflow: hidden; margin-bottom: 14px; box-shadow: var(--shadow); }
.razbor-h { display: flex; align-items: center; gap: 10px; padding: 13px 18px; background: var(--accent-bg); border-bottom: 1px solid #D3E3FB; }
.razbor-h .t { font-weight: 700; font-size: 14px; color: var(--accent-d); }
.razbor-b { padding: 16px 18px; background: var(--panel); }

.tscript { display: flex; flex-direction: column; gap: 9px; }
.tline { display: flex; gap: 10px; align-items: flex-start; }
.tline .r { font-size: 11.5px; font-weight: 700; color: var(--ink-3); min-width: 104px; padding-top: 3px; text-transform: uppercase; letter-spacing: .03em; }
.tline .b { background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 12px; font-size: 13.5px; }
.tline.pat .b { background: #F4F8FF; border-color: #DCE9FB; }

.parsed { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 16px; }
.pfield { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 11px 13px; background: var(--panel-2); }
.pfield .pl { font-size: 11px; color: var(--ink-3); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.pfield .pv { font-size: 14px; font-weight: 700; margin-top: 5px; letter-spacing: -.01em; }
.pfield.lit { animation: lit .9s ease both; }
@keyframes lit {
  0%   { opacity: 0; transform: translateY(6px); background: #E9F7EF; border-color: #A7DDBD; }
  55%  { opacity: 1; transform: none; background: #E9F7EF; border-color: #A7DDBD; }
  100% { opacity: 1; transform: none; background: var(--panel-2); border-color: var(--line); }
}

.feed { display: flex; flex-direction: column; gap: 8px; }
.item {
  display: flex; align-items: center; gap: 14px; padding: 13px 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); transition: transform .12s, box-shadow .12s;
}
.item.hot { border-color: #BBD4F7; background: linear-gradient(180deg, #fff, #F7FAFF); }
.item .ch { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--panel-2); color: var(--ink-2); border: 1px solid var(--line-2); }
.item.hot .ch { background: var(--accent-bg); color: var(--accent-d); border-color: #D3E3FB; }
.item .who { display: block; font-weight: 600; font-size: 13.5px; }
.item .pv { display: block; font-size: 12.5px; color: var(--ink-2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .mid { flex: 1; min-width: 0; }
.item .tm { font-size: 12px; color: var(--ink-3); flex: none; }

/* ---- переключатель вида (лента / доска) ------------------------------- */
.seg { display: inline-flex; background: var(--panel-2); border: 1px solid var(--line); border-radius: 100px; padding: 2px; gap: 2px; margin-right: 6px; }
.seg button { border: 0; background: transparent; color: var(--ink-2); font-size: 12.5px; font-weight: 600; padding: 5px 14px; border-radius: 100px; transition: background .12s, color .12s; }
.seg button.on { background: var(--accent); color: #fff; }

/* ---- доска: путь пациента этапами ------------------------------------- */
.board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
.col { flex: 1 1 0; min-width: 210px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r); }
.col-h { display: flex; align-items: center; gap: 8px; padding: 11px 13px; border-bottom: 1px solid var(--line-2); }
.col-h .ttl { font-weight: 700; font-size: 12.5px; }
.col-h .cnt { margin-left: auto; font-size: 11.5px; color: var(--ink-3); font-weight: 700; background: var(--panel); border: 1px solid var(--line); border-radius: 100px; padding: 1px 8px; }
.col-body { padding: 9px; display: flex; flex-direction: column; gap: 8px; min-height: 44px; }
.ocard {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 10px 11px; box-shadow: var(--shadow);
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.ocard:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: #D5DCE5; }
.ocard.mine { border-color: #BBD4F7; background: linear-gradient(180deg, #fff, #F7FAFF); box-shadow: 0 0 0 2px rgba(31,111,235,.10), var(--shadow); }
.ocard.hot { border-color: #E8CE9B; background: linear-gradient(180deg, #fff, #FCF8F0); }
.oc-top { display: flex; align-items: center; gap: 7px; }
.oc-ch { color: var(--ink-3); flex: none; display: grid; place-items: center; }
.oc-n { font-size: 12.5px; font-weight: 700; letter-spacing: -.01em; }
.oc-s { font-size: 12px; color: var(--ink-2); margin-top: 5px; }
.oc-m { font-size: 11px; color: var(--ink-3); margin-top: 4px; }

/* ============================ ЭКРАН 2 · ПАСПОРТ ========================== */
.pcard-top { display: flex; align-items: center; gap: 14px; }
.ava-lg { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; font-weight: 700; background: var(--accent-bg); color: var(--accent-d); flex: none; }

.fields { display: flex; flex-direction: column; gap: 1px; background: var(--line-2); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.frow { display: grid; grid-template-columns: 190px 1fr; gap: 12px; padding: 11px 14px; background: var(--panel); align-items: center; }
.frow .fl { font-size: 12.5px; color: var(--ink-2); }
.frow .fv { font-size: 13.5px; font-weight: 600; min-height: 19px; }
.frow .fv.empty { color: var(--ink-3); font-weight: 400; font-style: italic; }
.frow.lit { animation: litrow 1.1s ease both; }
@keyframes litrow {
  0%   { background: #E9F7EF; }
  60%  { background: #E9F7EF; }
  100% { background: var(--panel); }
}
.frow.lit .fv { animation: fadeval .5s ease both; }
@keyframes fadeval { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }

.scanbox { position: relative; border: 1px dashed var(--line); border-radius: var(--r-sm); background: var(--panel-2); overflow: hidden; padding: 14px; min-height: 190px; }
.scanbox.empty { display: grid; place-items: center; color: var(--ink-3); font-size: 12.5px; text-align: center; }
.docmock { position: relative; border-radius: 6px; background: linear-gradient(160deg, #EEF1F6, #E3E8EF); padding: 14px 16px; height: 100%; min-height: 158px; }
.docmock .dl { height: 8px; border-radius: 4px; background: #C6CEDA; margin-bottom: 9px; filter: blur(1.6px); }
.docmock .dl.s { width: 45%; } .docmock .dl.m { width: 70%; } .docmock .dl.l { width: 88%; }
.docmock .ph { position: absolute; right: 16px; top: 16px; width: 54px; height: 68px; border-radius: 4px; background: #C6CEDA; filter: blur(2px); }
.scanline { position: absolute; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--accent), transparent); box-shadow: 0 0 14px 3px rgba(31,111,235,.4); top: 0; opacity: 0; }
.scanning .scanline { animation: scan 1.2s ease-in-out 2 both; }
@keyframes scan { 0% { top: 0; opacity: 1; } 100% { top: 100%; opacity: 1; } }
.recognized { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; }

.consents { display: flex; flex-direction: column; gap: 9px; }
.cons { display: flex; align-items: center; gap: 11px; font-size: 13px; }
.toggle { width: 36px; height: 21px; border-radius: 100px; background: var(--line); position: relative; flex: none; transition: background .18s; }
.toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: var(--shadow); transition: transform .18s; }
.toggle.on { background: var(--accent); }
.toggle.on::after { transform: translateX(15px); }

/* ============================ ЭКРАН 3 · ШАХМАТКА ========================= */
.sched { overflow-x: auto; }
.sched table { border-collapse: separate; border-spacing: 4px; width: 100%; min-width: 760px; }
.sched th { font-size: 11.5px; font-weight: 600; color: var(--ink-3); text-align: center; padding-bottom: 2px; }
.sched th.dr { text-align: left; min-width: 150px; font-size: 13px; color: var(--ink); font-weight: 600; }
.sched td.dr { font-size: 13px; font-weight: 600; padding-right: 8px; white-space: nowrap; }
.slot { height: 44px; border-radius: 7px; border: 1px solid var(--line-2); background: var(--panel-2); font-size: 11px; color: var(--ink-3); display: grid; place-items: center; text-align: center; padding: 2px; transition: all .14s; width: 100%; }
.slot.free { background: var(--panel); border-color: #DCE9FB; color: var(--accent-d); font-weight: 600; cursor: pointer; }
.slot.free:hover { background: var(--accent-bg); transform: translateY(-1px); box-shadow: var(--shadow); }
.slot.taken { color: var(--ink-2); background: #F1F3F7; border-color: var(--line); font-size: 11px; cursor: default; }
.slot.booked { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; animation: bookpop .5s cubic-bezier(.2,.8,.3,1) both; }
@keyframes bookpop { 0% { transform: scale(.9); box-shadow: 0 0 0 0 rgba(31,111,235,.5); } 60% { transform: scale(1.04); } 100% { transform: none; box-shadow: 0 0 0 8px rgba(31,111,235,0); } }

.booking-bar { display: flex; align-items: center; gap: 14px; padding: 13px 18px; border: 1px solid #BBD4F7; background: var(--accent-bg); border-radius: var(--r); margin-bottom: 16px; }
.booking-bar .bb-l { font-size: 11.5px; color: var(--accent-d); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.booking-bar .bb-n { font-size: 15px; font-weight: 700; margin-top: 2px; }

/* ============================ ЭКРАН 4 · ВРАЧ ============================= */
.day-list { display: flex; flex-direction: column; }
.day-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--r-sm); }
.day-row + .day-row { border-top: 1px solid var(--line-2); }
.day-row .tm { font-size: 13px; font-weight: 700; width: 46px; flex: none; }
.day-row .nm { font-size: 13px; font-weight: 600; }
.day-row .sv { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.day-row.cur { background: var(--accent-bg); box-shadow: inset 3px 0 0 var(--accent); }
.day-row.done { color: var(--ink-3); }
.day-row.done .nm { font-weight: 500; }

.proto { display: flex; flex-direction: column; gap: 8px; }
.proto .pf { border: 1px dashed var(--line); border-radius: var(--r-sm); padding: 10px 13px; background: var(--panel-2); font-size: 12.5px; color: var(--ink-3); display: flex; align-items: center; gap: 8px; }
.proto .pf b { font-weight: 600; color: var(--ink-2); }
.proto .pf.filled {
  border-style: solid; border-color: var(--line); background: var(--panel); color: var(--ink);
  display: grid; grid-template-columns: 210px 1fr; gap: 12px; align-items: baseline;
}
.proto .pf.filled .pk { font-size: 12px; color: var(--ink-2); }
.proto .pf.filled .pvv { font-size: 13.5px; font-weight: 600; }
.proto .pf.lit { animation: litrow 1.1s ease both; }

/* ---- склад и оптика --------------------------------------------------- */
.stock { display: flex; flex-direction: column; }
.st-row { display: flex; align-items: center; gap: 14px; padding: 10px 6px; font-size: 13px; }
.st-row + .st-row { border-top: 1px solid var(--line-2); }
.st-n { flex: 1; min-width: 0; font-weight: 600; display: flex; flex-direction: column; }
.st-sku { font-size: 11px; color: var(--ink-3); font-weight: 400; margin-top: 1px; }
.st-p { width: 92px; text-align: right; font-weight: 600; flex: none; }
.st-s { width: 108px; text-align: right; color: var(--ink-2); font-size: 12.5px; flex: none; }
.st-l { width: 168px; text-align: right; color: var(--ink-3); font-size: 12px; flex: none; }
.st-l.low { color: #B45309; font-weight: 600; }

/* ---- модалка ---------------------------------------------------------- */
.modal-scrim { position: fixed; inset: 0; background: rgba(20,28,38,.42); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 70; }
.modal-scrim.open { opacity: 1; pointer-events: auto; }
.modal-wrap { position: fixed; inset: 0; z-index: 71; display: grid; place-items: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity .2s; }
.modal-wrap.open { opacity: 1; pointer-events: auto; }
.modal-card {
  background: var(--panel); border-radius: var(--r); box-shadow: var(--shadow-lg);
  width: min(640px, 100%); max-height: 86vh; overflow-y: auto;
  transform: translateY(10px) scale(.985); transition: transform .2s;
}
.modal-wrap.open .modal-card { transform: none; }
.modal-h { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 15px; border-bottom: 1px solid var(--line-2); position: sticky; top: 0; background: var(--panel); z-index: 2; }
.modal-h h3 { font-size: 16px; }
.modal-h .modal-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.modal-b { padding: 16px 20px 20px; }
.script { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; font-size: 13px; color: var(--ink-2); }
.script li::marker { color: var(--accent-d); font-weight: 700; }
.msg { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r-sm); background: var(--panel-2); padding: 13px 15px; font-size: 13.5px; line-height: 1.55; }

/* ---- QR для участников встречи ---------------------------------------- */
.qr-b { text-align: center; }
.qr-frame {
  display: inline-block; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r); padding: 18px; box-shadow: var(--shadow);
}
.qr-frame { max-width: 100%; }
.qr-frame img { display: block; width: min(300px, 58vw); height: auto; aspect-ratio: 1; }
.qr-fail { width: min(300px, 58vw); display: grid; place-items: center; font-size: 13px; color: var(--ink-2); padding: 40px 10px; }
.qr-url { font-size: 15px; font-weight: 700; letter-spacing: -.01em; margin-top: 16px; }
.qr-hint { font-size: 12.5px; color: var(--ink-3); margin-top: 7px; max-width: 420px; margin-left: auto; margin-right: auto; line-height: 1.5; }

/* ---- пакет документов на печать --------------------------------------- */
.doclist { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.docrow { display: flex; align-items: center; gap: 11px; padding: 11px 13px; background: var(--panel); cursor: pointer; }
.docrow + .docrow { border-top: 1px solid var(--line-2); }
.docrow:hover { background: var(--panel-2); }
.docrow .dt { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; }
.docrow .dp { font-size: 11.5px; color: var(--ink-3); flex: none; }
.cbx {
  width: 19px; height: 19px; border-radius: 5px; flex: none;
  border: 1.5px solid var(--line); background: var(--panel);
  display: grid; place-items: center; color: transparent; transition: all .14s;
}
.cbx.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* бланк-предпросмотр */
.sheet {
  background: #fff; border: 1px solid var(--line); border-radius: 4px;
  box-shadow: 0 2px 10px rgba(16,24,40,.08); padding: 22px 26px 26px;
  font-size: 11.5px; color: #2A3442; line-height: 1.5;
}
.sheet-h { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #DDE3EA; padding-bottom: 11px; }
.sheet-h img { width: 128px; height: auto; flex: none; }
.sheet-org { font-size: 10.5px; font-weight: 600; line-height: 1.35; }
.sheet-org span { display: block; font-weight: 400; color: #7A8794; margin-top: 2px; }
.sheet-t { text-align: center; font-size: 13px; font-weight: 800; letter-spacing: .01em; margin-top: 16px; }
.sheet-num { text-align: center; font-size: 11px; color: #7A8794; margin-top: 3px; }
.sheet-b { margin-top: 16px; display: flex; flex-direction: column; gap: 7px; }
.sheet-b .sr { display: grid; grid-template-columns: 148px 1fr; gap: 10px; align-items: baseline; }
.sheet-b .sr-l { color: #7A8794; }
.sheet-b .sr-v { font-weight: 600; }
.sheet-b .sr-v.fill { background: #FFF3C4; box-shadow: 0 0 0 2px #FFF3C4; border-radius: 2px; }
.sheet-tail { margin-top: 18px; padding-top: 12px; border-top: 1px dashed #DDE3EA; color: #56616F; font-size: 11px; }

/* ============================ ЭКРАН 5 · ОТДЕЛЕНИЕ ======================== */
.funnel { display: flex; gap: 8px; align-items: stretch; }
.fstage { flex: 1 1 0; min-width: 120px; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 13px 14px; transition: transform .15s, border-color .15s; }
.fstage:hover { transform: translateY(-2px); }
.fstage .st-name { font-size: 11.5px; color: var(--ink-2); font-weight: 600; }
.fstage .st-num { font-size: 28px; font-weight: 800; letter-spacing: -.03em; margin-top: 5px; line-height: 1; }
.fstage .st-bar { height: 4px; border-radius: 4px; background: var(--accent); margin-top: 9px; opacity: .85; transition: width .6s cubic-bezier(.2,.8,.3,1); }
.fstage .st-pct { font-size: 11px; color: var(--ink-3); margin-top: 7px; }
.fstage.bump { border-color: #A7DDBD; background: #F1FAF4; }
.farrow { align-self: center; color: var(--ink-3); flex: none; }

/* повестка «требует решения» */
.agenda-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.agenda-item {
  display: flex; align-items: center; gap: 11px; text-align: left;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--panel-2); transition: transform .12s, box-shadow .12s, border-color .12s;
}
.agenda-item:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: #CBD5E1; }
.agenda-item.urg { background: #FDF6F6; border-color: #F0CFCF; }
.agenda-item .ai-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-bg); color: var(--accent-d); flex: none; }
.agenda-item.urg .ai-ic { background: var(--bad-bg); color: #B91C1C; }
.agenda-item .ai-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.agenda-item .ai-main { font-size: 13px; }
.agenda-item .ai-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.agenda-item > svg:last-child { color: var(--ink-3); flex: none; }

/* детализация потерь воронки */
.loss { padding: 14px 0; }
.loss + .loss { border-top: 1px solid var(--line-2); }
.loss-h { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.loss-t { font-size: 13px; font-weight: 700; }
.loss-n { font-size: 12.5px; font-weight: 700; color: #B91C1C; background: var(--bad-bg); border-radius: 100px; padding: 1px 9px; }
.loss-b { display: flex; flex-direction: column; gap: 6px; }
.lr { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; position: relative; padding: 7px 10px; border-radius: var(--r-sm); background: var(--panel-2); overflow: hidden; }
.lr-bar { position: absolute; left: 0; top: 0; bottom: 0; background: var(--bad-bg); opacity: .55; }
.lr-n { position: relative; font-size: 14px; font-weight: 800; letter-spacing: -.02em; text-align: right; }
.lr-l { position: relative; font-size: 12.5px; }
.lr-f { position: relative; font-size: 11.5px; color: #15703F; display: flex; align-items: center; gap: 5px; white-space: nowrap; }

/* сотрудники */
.staff { display: flex; align-items: center; gap: 12px; padding: 12px 4px; flex-wrap: wrap; }
.staff + .staff { border-top: 1px solid var(--line-2); }
.staff.warn { background: #FFFCF5; border-radius: var(--r-sm); padding-left: 8px; padding-right: 8px; }
.ava-md { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; background: var(--accent-bg); color: var(--accent-d); flex: none; }
.stf-id { min-width: 150px; flex: 1; display: flex; flex-direction: column; }
.stf-n { font-size: 13px; font-weight: 700; }
.stf-s { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.stf-m { display: flex; flex-direction: column; align-items: flex-end; font-size: 10.5px; color: var(--ink-3); min-width: 76px; }
.stf-m b { font-size: 14.5px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; line-height: 1.2; }
.stf-bar { min-width: 116px; display: flex; flex-direction: column; gap: 4px; }
.sb-t { height: 6px; border-radius: 6px; background: var(--line-2); overflow: hidden; }
.sb-t i { display: block; height: 100%; border-radius: 6px; }
.sb-l { font-size: 10.5px; color: var(--ink-3); }

/* мини-KPI склада */
.mini-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.mini-kpis div { border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--panel-2); padding: 10px 12px; display: flex; flex-direction: column; }
.mini-kpis b { font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.mini-kpis span { font-size: 11px; color: var(--ink-3); margin-top: 3px; }

.spark { display: flex; align-items: flex-end; gap: 8px; height: 96px; padding-top: 6px; }
.spark .sb { flex: 1; background: var(--accent); border-radius: 4px 4px 2px 2px; opacity: .82; min-height: 4px; transition: height .5s cubic-bezier(.2,.8,.3,1); }
.spark-x { display: flex; gap: 8px; margin-top: 6px; }
.spark-x span { flex: 1; text-align: center; font-size: 10.5px; color: var(--ink-3); }

/* ============================ ЭКРАН 6 · БАЗА ============================= */
.base-hero { text-align: center; padding: 26px 18px 22px; }
.base-hero .bh-num { font-size: 76px; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--ink); }
.base-hero .bh-num.sifted { color: var(--accent-d); }
.base-hero .bh-lbl { font-size: 13.5px; color: var(--ink-2); margin-top: 10px; }
.base-hero .bh-sub { font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.sifting .bh-num { animation: shake .5s ease-in-out infinite; }
@keyframes shake { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

.filt { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.filt .fx { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 13px; background: var(--panel-2); }
.filt .fx .k { font-size: 11px; color: var(--ink-3); font-weight: 600; }
.filt .fx .v { font-size: 13px; font-weight: 600; margin-top: 4px; }

.segment { border: 1px solid #BBD4F7; background: linear-gradient(180deg, #F7FAFF, #EEF5FE); border-radius: var(--r); padding: 18px 20px; }
.segment .sg-n { font-size: 34px; font-weight: 800; letter-spacing: -.03em; color: var(--accent-d); line-height: 1; }
.segment .sg-d { font-size: 13.5px; margin-top: 8px; font-weight: 600; }
.money { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
.money .eq { font-size: 19px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }

/* ============================ ЭКРАН 7 · БОРД ============================= */
.deps { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 10px; }
.dep {
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel);
  padding: 12px 13px; text-align: left; box-shadow: var(--shadow);
  transition: transform .13s, box-shadow .13s, border-color .13s; cursor: default;
}
.dep .dn { font-size: 12.5px; font-weight: 600; line-height: 1.3; min-height: 2.6em; }
.dep .dv { font-size: 21px; font-weight: 800; letter-spacing: -.02em; margin-top: 7px; line-height: 1; }
.dep .dm { font-size: 11px; color: var(--ink-3); margin-top: 5px; display: flex; justify-content: space-between; gap: 6px; }
.dep .dbar { height: 3px; border-radius: 3px; background: var(--line-2); margin-top: 9px; overflow: hidden; }
.dep .dbar i { display: block; height: 100%; border-radius: 3px; background: var(--accent); opacity: .7; }
.dep.new {
  border-color: #E8CE9B; background: linear-gradient(180deg, #FFFDF8, #FCF4E6); cursor: pointer;
  box-shadow: 0 0 0 3px rgba(183,121,31,.10), var(--shadow);
}
.dep.new:hover { transform: translateY(-3px); box-shadow: 0 0 0 3px rgba(183,121,31,.16), var(--shadow-lg); }
.dep.new .dv { color: var(--gold); }
.dep.new .dbar i { background: var(--gold); }
.deps.zoom-out .dep:not(.new) { animation: zoomout .45s ease both; }
@keyframes zoomout { to { opacity: 0; transform: scale(.96); } }

.center-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }

/* ═══════════════ МОДУЛИ КП · экраны вне сценария ═══════════════════════ */
.nav-item .step-n.kp { font-family: ui-monospace, 'SF Mono', Menlo, monospace; min-width: 26px; }
.item.fresh { border-color: #A7DDBD; box-shadow: 0 0 0 3px rgba(22,163,74,.12), var(--shadow); }

/* ---- 1.1 карта пути --------------------------------------------------- */
.pathmap { display: flex; align-items: stretch; gap: 4px; overflow-x: auto; padding-bottom: 6px; }
.pm-step {
  flex: 1 1 0; min-width: 156px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--panel-2); padding: 11px 12px 12px; display: flex; flex-direction: column; gap: 5px;
}
.pm-step.bad { border-color: #F0CFCF; background: #FDF7F7; }
.pm-n { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; font-weight: 800; background: var(--accent-bg); color: var(--accent-d); }
.pm-step.bad .pm-n { background: var(--bad-bg); color: #B91C1C; }
.pm-name { font-size: 13px; font-weight: 700; }
.pm-now { font-size: 11.5px; color: var(--ink-2); flex: 1; }
.pm-gap { font-size: 11.5px; font-weight: 600; color: #B91C1C; display: flex; align-items: center; gap: 4px; }
.pm-step:not(.bad) .pm-gap { color: #B45309; }
.pm-mod { font-size: 10.5px; color: var(--ink-3); border-top: 1px dashed var(--line); padding-top: 6px; }
.pm-arrow { align-self: center; color: var(--ink-3); flex: none; }

/* ---- 1.2 превью страницы --------------------------------------------- */
.site { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: #fff; }
.site-bar { display: flex; align-items: center; gap: 6px; padding: 8px 11px; background: #EEF1F5; border-bottom: 1px solid var(--line); }
.site-bar span { width: 8px; height: 8px; border-radius: 50%; background: #C6CEDA; }
.site-bar i { margin-left: 10px; font-style: normal; font-size: 11px; color: var(--ink-3); font-family: ui-monospace, Menlo, monospace; }
.site-body { padding: 20px 22px 22px; }
.site-h1 { font-size: 25px; font-weight: 800; letter-spacing: -.03em; }
.site-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 5px; }
.site-lead { font-size: 13px; color: var(--ink-2); margin-top: 12px; line-height: 1.55; }
.site-srv { margin-top: 16px; border-top: 1px solid var(--line-2); }
.ss-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.ss-n { flex: 1; font-size: 13px; font-weight: 600; display: flex; flex-direction: column; }
.ss-n i { font-style: normal; font-size: 11px; color: var(--ink-3); font-weight: 400; margin-top: 2px; }
.ss-p { font-size: 13.5px; font-weight: 700; color: var(--accent-d); }

/* ---- 1.5 матрица прав ------------------------------------------------- */
.rmatrix { width: 100%; border-collapse: collapse; min-width: 560px; }
.rmatrix th { font-size: 11.5px; font-weight: 700; color: var(--ink-2); text-align: center; padding: 0 10px 10px; }
.rmatrix th:first-child { text-align: left; }
.rmatrix td { padding: 9px 10px; border-top: 1px solid var(--line-2); text-align: center; }
.rmatrix td.rn { text-align: left; font-size: 13px; font-weight: 500; }
.rc { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; }
.rc.full { background: var(--ok-bg); color: #15803D; }
.rc.read { background: var(--accent-bg); color: var(--accent-d); }
.rc.no { background: var(--line-2); color: var(--ink-3); font-size: 12px; }
.rleg { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--ink-3); flex-wrap: wrap; }
.rleg .rc { width: 20px; height: 20px; }

/* ---- 1.6 база знаний -------------------------------------------------- */
.kb-sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.kb-sec { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 11px 13px; background: var(--panel-2); }
.kb-sec.hot { border-color: #BBD4F7; background: linear-gradient(180deg, #fff, #F5F9FF); }
.kb-n { font-size: 13px; font-weight: 700; }
.kb-m { font-size: 11px; color: var(--ink-3); margin-top: 4px; }
.kb-arts { display: flex; flex-direction: column; }
.kb-art { display: flex; align-items: center; gap: 10px; padding: 9px 2px; font-size: 13px; color: var(--ink-2); }
.kb-art + .kb-art { border-top: 1px solid var(--line-2); }
.kb-art svg { color: var(--ink-3); flex: none; }
.ka-t { flex: 1; min-width: 0; color: var(--ink); }

.ob-bar { height: 7px; border-radius: 7px; background: var(--line-2); overflow: hidden; margin: 10px 0 6px; }
.ob-bar i { display: block; height: 100%; border-radius: 7px; background: var(--ok); }
.ob-steps { display: flex; flex-direction: column; gap: 2px; }
.ob-s { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: var(--r-sm); font-size: 12.5px; color: var(--ink-2); }
.ob-s.ok { color: var(--ink-3); }
.ob-s.now { background: var(--accent-bg); color: var(--accent-d); font-weight: 600; }
.ob-i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; background: var(--line-2); color: var(--ink-3); flex: none; }
.ob-s.ok .ob-i { background: var(--ok-bg); color: #15803D; }
.ob-s.now .ob-i { background: var(--accent); color: #fff; }

.quiz { display: flex; flex-direction: column; gap: 8px; }
.qz {
  display: flex; align-items: center; gap: 10px; text-align: left; width: 100%;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  border-radius: var(--r-sm); padding: 11px 13px; font: inherit; font-size: 13px;
  transition: border-color .13s, background .13s;
}
.qz:hover { border-color: #BBD4F7; background: var(--panel-2); }
.qz-m { width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--panel-2); border: 1px solid var(--line); flex: none; }
.qz.right { border-color: #A7DDBD; background: #F1FAF4; }
.qz.right .qz-m { background: var(--ok); border-color: var(--ok); color: #fff; }
.qz.wrong { border-color: #F0CFCF; background: #FDF6F6; }
.qz.wrong .qz-m { background: var(--bad); border-color: var(--bad); color: #fff; }
.quiz-res { display: flex; gap: 9px; margin-top: 12px; padding: 11px 13px; border-radius: var(--r-sm); font-size: 12.5px; line-height: 1.5; background: #FDF6F6; border: 1px solid #F0CFCF; color: #8A3A3A; }
.quiz-res.ok { background: #F1FAF4; border-color: #A7DDBD; color: #17603A; }
.quiz-res svg { flex: none; margin-top: 1px; }

/* ---- 2.1 планшет ------------------------------------------------------ */
.tablet { background: #11161C; border-radius: 22px; padding: 16px 12px; box-shadow: var(--shadow-lg); }
.tab-scr { background: #fff; border-radius: 12px; padding: 14px 16px; max-height: 430px; overflow-y: auto; }
.tq { padding: 9px 0; border-bottom: 1px solid var(--line-2); }
.tq:last-child { border-bottom: 0; }
.tq-q { font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.tq-a { font-size: 13.5px; font-weight: 600; margin-top: 3px; }
.tq.sign .tq-a { color: #15803D; display: flex; align-items: center; gap: 6px; }
/* анкета, пришедшая с телефона: рамка поуже, как у смартфона */
.tablet.phone { max-width: 320px; margin: 0 auto; border-radius: 28px; padding: 14px 10px; }
.tablet.phone .tab-scr { border-radius: 18px; min-height: 180px; }

/* «ждём анкету» — три точки */
.live-dots { display: flex; gap: 6px; justify-content: center; }
.live-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: .35; animation: ld 1.2s ease-in-out infinite; }
.live-dots i:nth-child(2) { animation-delay: .18s; }
.live-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes ld { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

/* ---- 2.4 уведомления -------------------------------------------------- */
.trig { display: flex; align-items: center; gap: 12px; padding: 10px 4px; }
.trig + .trig { border-top: 1px solid var(--line-2); }
.tg-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tg-n { font-size: 13px; font-weight: 600; }
.tg-w { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.sent { display: flex; align-items: center; gap: 12px; padding: 9px 2px; }
.sent + .sent { border-top: 1px solid var(--line-2); }
.sn-w { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sn-t { font-size: 12.5px; font-weight: 600; }
.sn-x { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.sn-m { font-size: 11.5px; color: var(--ink-3); flex: none; }

/* ---- 2.5 разбор разговоров -------------------------------------------- */
.ctable { width: 100%; border-collapse: collapse; min-width: 860px; }
.ctable th { font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; text-align: left; padding: 0 10px 9px; }
.ctable td { padding: 10px; border-top: 1px solid var(--line-2); font-size: 12.5px; vertical-align: middle; }
.ctable td.mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12px; }
.ctable td.fix { font-size: 11.5px; color: #B45309; max-width: 260px; }
.ctable tr.miss td { background: #FFFCF5; }

@media (max-width: 620px) {
  .pathmap { flex-direction: column; }
  .pm-arrow { transform: rotate(90deg); }
  .kb-sections { grid-template-columns: 1fr 1fr; }
  .tab-scr { max-height: none; }
}

/* ---- шпаргалка ведущего (клавиша S) ----------------------------------- */
.cheat {
  position: fixed; right: 20px; bottom: 78px; z-index: 60; width: 380px; max-width: calc(100vw - 40px);
  background: #11181F; color: #E8EDF3; border-radius: var(--r); box-shadow: var(--shadow-lg);
  padding: 15px 17px; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .18s, transform .18s;
}
.cheat.open { opacity: .97; pointer-events: auto; transform: none; }
.cheat .ch-k { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #7FB0F5; }
.cheat .ch-t { font-size: 14px; line-height: 1.5; margin-top: 7px; }
.cheat .ch-f { font-size: 11px; color: #8C97A4; margin-top: 10px; }

/* ---- тост ------------------------------------------------------------- */
.toast {
  position: fixed; left: 50%; bottom: 82px; transform: translate(-50%, 16px); z-index: 80;
  background: #11181F; color: #fff; font-size: 13.5px; font-weight: 500;
  padding: 12px 20px; border-radius: 12px; box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: 92vw;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast .hl { color: #8FC6FF; font-weight: 700; }
.toast .sub { display: block; font-size: 11.5px; color: #9AA5B1; margin-top: 3px; font-weight: 400; }

/* ---- адаптив ---------------------------------------------------------- */
@media (max-width: 1280px) {
  .parsed { grid-template-columns: repeat(2, 1fr); }
  .filt { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1040px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .row-2, .row-2-eq { grid-template-columns: 1fr; }
  .kpis, .center-kpis { grid-template-columns: repeat(2, 1fr); }
  .funnel { flex-wrap: wrap; }
  .farrow { display: none; }
}
@media (max-width: 620px) {
  .view { padding: 16px 14px 22px; }
  .topbar { padding: 12px 14px; }
  .topbar .today, .topbar .who { display: none; }
  .base-hero .bh-num { font-size: 54px; }
  .frow { grid-template-columns: 1fr !important; gap: 3px; }
  .frow .fv[style*="right"] { text-align: left !important; }

  /* док: на телефоне только управление и компактный счётчик */
  .dock { padding: 9px 12px; gap: 8px; }
  .dock .steps { display: none; }
  .dock .dock-label { flex: 1; justify-content: center; font-size: 12px; font-weight: 600; color: var(--ink-2); text-align: center; }
  .dock .dock-label .lbl-full { display: none; }

  .modal-wrap { padding: 14px; }
  .modal-b, .modal-h { padding-left: 15px; padding-right: 15px; }

  .screen-head h2 { font-size: 19px; }
  .parsed { grid-template-columns: 1fr; }
  .kpis, .center-kpis, .mini-kpis { grid-template-columns: 1fr 1fr; }
  .deps { grid-template-columns: 1fr 1fr; }

  /* строки склада и потерь — в колонку, без обрезки */
  .st-row { flex-wrap: wrap; gap: 4px 12px; }
  .st-n { flex: 1 1 100%; }
  .st-p, .st-s, .st-l { width: auto; text-align: left; }
  .lr { grid-template-columns: 30px 1fr; }
  .lr-f { grid-column: 1 / -1; white-space: normal; padding-left: 40px; }

  /* сотрудники — метрики в сетку под именем */
  .staff { gap: 9px; }
  .stf-id { flex: 1 1 100%; min-width: 0; }
  .stf-m { align-items: flex-start; min-width: 68px; }
  .stf-bar { flex: 1 1 100%; }

  .proto .pf.filled { grid-template-columns: 1fr; gap: 3px; }
  .sheet { padding: 16px 15px 18px; }
  .sheet-b .sr { grid-template-columns: 1fr; gap: 2px; }
  .sheet-h img { width: 100px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}