/* ============================================================
   «ПУЛЬС» — дизайн-система
   Метафора: лляне полотно (тепла нейтраль) + петроль-патина на латунній
   фурнітурі (холодний акцент). Температурна пара з меблевої предметки —
   не дефолтний «сірий + синій» дашборд.
   Світла і темна теми рівноцінні (див. docs/DECISIONS.md D1).
   ============================================================ */

/* ---------- 1. ТОКЕНИ: СВІТЛА (за замовчуванням) ---------- */
:root{
  color-scheme: light;

  --bg-canvas:#F4F1EB; --bg-surface:#FBF9F5; --bg-raised:#FFFDFA; --bg-sunken:#EDE9E1;
  --bg-scrim:rgb(38 34 28 / .36); --bg-nav:rgb(251 249 245 / .82); --bg-hero:#0F2C2E;
  --bg-hover:rgb(51 41 31 / .045); --bg-pressed:rgb(51 41 31 / .075);
  --bg-neutral-soft:#EDE9E1;

  --text-primary:#26221C; --text-secondary:#5C554A; --text-tertiary:#776F61;
  --text-disabled:#A79E8E; --text-on-accent:#FFFFFF; --text-on-hero:#F0F7F6;

  --line-hairline:rgb(51 41 31 / .07); --line:rgb(51 41 31 / .12);
  --line-strong:rgb(51 41 31 / .22); --line-solid:#D5CEC1;

  --accent:#0B5F63; --accent-hover:#0A5457; --accent-text:#0A5054;
  --accent-soft-bg:#E4F0EF; --accent-soft-border:#C3DEDB; --accent-2:#A8712A;

  --critical:#C2321C; --critical-text:#9C2A14;
  --critical-soft-bg:#FBEBE6; --critical-soft-border:#F3D2C8;
  --warning:#C1860E;  --warning-text:#7E5406;
  --warning-soft-bg:#FBF0DC;  --warning-soft-border:#F0DDB4;
  --success:#2E7A33;  --success-text:#1F6330;
  --success-soft-bg:#E9F4E9;  --success-soft-border:#CDE5CE;

  --shadow-rgb:51 41 31;
  --shadow-1:0 1px 1px rgb(var(--shadow-rgb)/.045), 0 2px 4px -1px rgb(var(--shadow-rgb)/.05);
  --shadow-2:0 1px 2px rgb(var(--shadow-rgb)/.05), 0 4px 8px -2px rgb(var(--shadow-rgb)/.06),
             0 12px 20px -8px rgb(var(--shadow-rgb)/.05);
  --shadow-3:0 2px 4px rgb(var(--shadow-rgb)/.05), 0 8px 16px -4px rgb(var(--shadow-rgb)/.07),
             0 24px 40px -12px rgb(var(--shadow-rgb)/.08);
  --shadow-4:0 4px 8px rgb(var(--shadow-rgb)/.06), 0 16px 32px -8px rgb(var(--shadow-rgb)/.09),
             0 40px 72px -24px rgb(var(--shadow-rgb)/.12);
  --edge-top:inset 0 1px 0 rgb(255 255 255 / .70);
  --shadow-focus:0 0 0 3px rgb(11 95 99 / .22);

  --chart-grid:rgb(51 41 31 / .06); --chart-baseline:rgb(51 41 31 / .14);
  --chart-area-from:rgb(11 95 99 / .18); --chart-area-to:rgb(11 95 99 / 0);
  --chart-bad-band:rgb(194 50 28 / .06);
  --chart-1:#0B5F63; --chart-2:#A8712A;

  --veil-top:linear-gradient(180deg, rgb(11 95 99/.05), rgb(11 95 99/.02) 45%, transparent);
  --grain-opacity:.035; --grain-blend:multiply;

  /* радіуси — навмисно різні за масштабом (concentric) */
  --r-chip:7px; --r-btn:12px; --r-card:16px; --r-hero:22px; --r-sheet:28px;

  /* motion */
  --e-out:cubic-bezier(.22,.61,.36,1);
  --e-inout:cubic-bezier(.4,0,.2,1);
  --e-spring:cubic-bezier(.34,1.28,.64,1);
  --t-tap:110ms; --t-fast:180ms; --t-base:260ms; --t-slow:380ms;
}

/* ---------- 2. ТОКЕНИ: ТЕМНА ---------- */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  color-scheme: dark;
  --bg-canvas:#1B1A18; --bg-surface:#242320; --bg-raised:#2D2B28; --bg-sunken:#131211;
  --bg-scrim:rgb(0 0 0 / .62); --bg-nav:rgb(27 26 24 / .78); --bg-hero:#0C2325;
  --bg-hover:rgb(255 255 255 / .055); --bg-pressed:rgb(255 255 255 / .09);
  --bg-neutral-soft:rgb(255 255 255 / .06);
  --text-primary:#F2EFE9; --text-secondary:#B3AC9F; --text-tertiary:#8A8274;
  --text-disabled:#5F594E; --text-on-accent:#06201F; --text-on-hero:#F0F7F6;
  --line-hairline:rgb(255 255 255 / .07); --line:rgb(255 255 255 / .11);
  --line-strong:rgb(255 255 255 / .20); --line-solid:#3A3833;
  --accent:#45BFB4; --accent-hover:#5BCCC1; --accent-text:#7FD9D0;
  --accent-soft-bg:rgb(69 191 180 / .14); --accent-soft-border:rgb(69 191 180 / .28);
  --accent-2:#E0A75C;
  --critical:#FF6B54; --critical-text:#FF9B85;
  --critical-soft-bg:rgb(255 107 84 / .13); --critical-soft-border:rgb(255 107 84 / .26);
  --warning:#F0AE43;  --warning-text:#F5C173;
  --warning-soft-bg:rgb(240 174 67 / .13);  --warning-soft-border:rgb(240 174 67 / .26);
  --success:#46B45C;  --success-text:#7FD08C;
  --success-soft-bg:rgb(70 180 92 / .13);   --success-soft-border:rgb(70 180 92 / .26);
  --shadow-rgb:0 0 0;
  --shadow-1:0 1px 2px rgb(0 0 0/.45); --shadow-2:0 2px 6px rgb(0 0 0/.50);
  --shadow-3:0 8px 24px rgb(0 0 0/.55); --shadow-4:0 24px 56px rgb(0 0 0/.62);
  --edge-top:inset 0 1px 0 rgb(255 255 255 / .06);
  --shadow-focus:0 0 0 3px rgb(69 191 180 / .30);
  --chart-grid:rgb(255 255 255 / .07); --chart-baseline:rgb(255 255 255 / .16);
  --chart-area-from:rgb(69 191 180 / .22); --chart-area-to:rgb(69 191 180 / 0);
  --chart-bad-band:rgb(255 107 84 / .10);
  --chart-1:#45BFB4; --chart-2:#E0A75C;
  --veil-top:linear-gradient(180deg, rgb(69 191 180/.06), transparent);
  --grain-opacity:.05; --grain-blend:screen;
}}

/* ручний вибір темної — має перемагати системну світлу */
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg-canvas:#1B1A18; --bg-surface:#242320; --bg-raised:#2D2B28; --bg-sunken:#131211;
  --bg-scrim:rgb(0 0 0 / .62); --bg-nav:rgb(27 26 24 / .78); --bg-hero:#0C2325;
  --bg-hover:rgb(255 255 255 / .055); --bg-pressed:rgb(255 255 255 / .09);
  --bg-neutral-soft:rgb(255 255 255 / .06);
  --text-primary:#F2EFE9; --text-secondary:#B3AC9F; --text-tertiary:#8A8274;
  --text-disabled:#5F594E; --text-on-accent:#06201F; --text-on-hero:#F0F7F6;
  --line-hairline:rgb(255 255 255 / .07); --line:rgb(255 255 255 / .11);
  --line-strong:rgb(255 255 255 / .20); --line-solid:#3A3833;
  --accent:#45BFB4; --accent-hover:#5BCCC1; --accent-text:#7FD9D0;
  --accent-soft-bg:rgb(69 191 180 / .14); --accent-soft-border:rgb(69 191 180 / .28);
  --accent-2:#E0A75C;
  --critical:#FF6B54; --critical-text:#FF9B85;
  --critical-soft-bg:rgb(255 107 84 / .13); --critical-soft-border:rgb(255 107 84 / .26);
  --warning:#F0AE43;  --warning-text:#F5C173;
  --warning-soft-bg:rgb(240 174 67 / .13);  --warning-soft-border:rgb(240 174 67 / .26);
  --success:#46B45C;  --success-text:#7FD08C;
  --success-soft-bg:rgb(70 180 92 / .13);   --success-soft-border:rgb(70 180 92 / .26);
  --shadow-rgb:0 0 0;
  --shadow-1:0 1px 2px rgb(0 0 0/.45); --shadow-2:0 2px 6px rgb(0 0 0/.50);
  --shadow-3:0 8px 24px rgb(0 0 0/.55); --shadow-4:0 24px 56px rgb(0 0 0/.62);
  --edge-top:inset 0 1px 0 rgb(255 255 255 / .06);
  --shadow-focus:0 0 0 3px rgb(69 191 180 / .30);
  --chart-grid:rgb(255 255 255 / .07); --chart-baseline:rgb(255 255 255 / .16);
  --chart-area-from:rgb(69 191 180 / .22); --chart-area-to:rgb(69 191 180 / 0);
  --chart-bad-band:rgb(255 107 84 / .10);
  --chart-1:#45BFB4; --chart-2:#E0A75C;
  --veil-top:linear-gradient(180deg, rgb(69 191 180/.06), transparent);
  --grain-opacity:.05; --grain-blend:screen;
}

/* ---------- 3. БАЗА ---------- */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",system-ui,sans-serif;
  background:var(--bg-canvas); color:var(--text-primary);
  font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1,"cv05" 1;
  display:flex; align-items:center; justify-content:center; min-height:100dvh;
  overscroll-behavior:none;
}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none;font-feature-settings:inherit}
b,strong{font-weight:650}
.hidden{display:none !important}
svg{width:16px;height:16px;flex:none;vertical-align:middle}
::selection{background:var(--accent-soft-bg);color:var(--accent-text)}
:focus-visible{outline:none;box-shadow:var(--shadow-focus)}

/* плавне перемикання теми — точково, без transition:all */
.theming, .theming *{transition:background-color 220ms var(--e-inout),
  border-color 220ms var(--e-inout), color 220ms var(--e-inout) !important}

/* ---------- 4. ОБОЛОНКА-ПРИСТРІЙ ---------- */
.app{
  width:min(430px,100vw); height:min(920px,100dvh);
  background:var(--bg-canvas); position:relative; overflow:hidden;
  display:flex; flex-direction:column; isolation:isolate;
}
@media(min-width:480px){
  .app{border-radius:38px; box-shadow:var(--shadow-4); border:1px solid var(--line); height:min(880px,94dvh)}
}
/* атмосфера: вуаль зверху + зерно — рятує світлу тему від «білої адмінки» */
.app::before{content:"";position:absolute;inset:0 0 auto;height:280px;background:var(--veil-top);
  pointer-events:none;z-index:0}
.app::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:9;
  opacity:var(--grain-opacity);mix-blend-mode:var(--grain-blend);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- 5. ЛОГІН ---------- */
.login{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:28px;z-index:5}
.login-card{width:100%;max-width:340px;text-align:center}
.brand-lg{display:flex;gap:13px;align-items:center;justify-content:center}
.brand-mark{width:46px;height:46px;color:var(--text-on-hero);background:var(--bg-hero);
  border-radius:14px;padding:11px;box-shadow:var(--shadow-2)}
.brand-name{font-size:27px;font-weight:700;letter-spacing:-.035em;text-align:left;line-height:1.1}
.brand-sub{font-size:12.5px;color:var(--text-tertiary);text-align:left;letter-spacing:.005em}
.login-co{font-size:12.5px;color:var(--text-tertiary);margin:26px 0 32px}
.pin{display:flex;gap:16px;justify-content:center;margin-bottom:14px}
.pin span{width:13px;height:13px;border-radius:50%;border:1.5px solid var(--line-strong);
  transition:transform var(--t-fast) var(--e-spring), background-color var(--t-fast)}
.pin span.on{background:var(--accent);border-color:var(--accent);transform:scale(1.12)}
.pin.err span{border-color:var(--critical);animation:shake .36s var(--e-out)}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.pin-hint{font-size:12px;color:var(--text-tertiary);margin-bottom:28px}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:268px;margin:0 auto}
.key{height:60px;border-radius:var(--r-btn);background:var(--bg-surface);border:1px solid var(--line);
  box-shadow:var(--shadow-1),var(--edge-top);font-size:22px;font-weight:550;letter-spacing:-.01em;
  display:flex;align-items:center;justify-content:center;
  transition:transform var(--t-tap) var(--e-out), background-color var(--t-tap)}
.key:active{background:var(--bg-pressed);transform:scale(.94)}
.key.blank{background:none;border:none;box-shadow:none}
.key svg{width:22px;height:22px;color:var(--text-secondary)}

/* ---------- 6. ХЕДЕР ---------- */
.shell{display:flex;flex-direction:column;height:100%;position:relative;z-index:1}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px 12px;padding-top:max(14px,env(safe-area-inset-top));
  border-bottom:1px solid var(--line-hairline);background:var(--bg-nav);
  backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);
  position:sticky;top:0;z-index:3}
.tb-co{font-size:16px;font-weight:700;letter-spacing:.01em}
.tb-owner{font-size:12px;color:var(--text-tertiary);margin-top:1px}
.tb-actions{display:flex;align-items:center;gap:8px}
.icon-btn{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  color:var(--text-secondary);border:1px solid var(--line);background:var(--bg-surface);
  transition:transform var(--t-tap) var(--e-out),background-color var(--t-tap)}
.icon-btn:active{transform:scale(.92);background:var(--bg-pressed)}
.icon-btn svg{width:18px;height:18px}

/* ---------- 7. ОБЛАСТЬ ЕКРАНА ---------- */
.screen{flex:1;overflow-y:auto;overflow-x:hidden;padding:16px 16px 28px;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.screen::-webkit-scrollbar{width:0;height:0}
.scr-title{font-size:25px;font-weight:700;letter-spacing:-.03em;line-height:1.15;margin:2px 0 4px;
  text-wrap:balance}
.scr-sub{font-size:12.5px;color:var(--text-tertiary);margin:0 0 18px;display:flex;align-items:center;gap:6px}
.scr-sub svg{width:14px;height:14px;color:var(--text-tertiary)}

/* ---------- 8. КАРТКИ ---------- */
.card{background:var(--bg-surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:16px;margin-bottom:12px;box-shadow:var(--shadow-1),var(--edge-top)}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.card-h .t{font-size:11px;font-weight:650;color:var(--text-tertiary);letter-spacing:.07em;
  text-transform:uppercase;display:flex;align-items:center;gap:6px}
.card-h .t svg{width:13px;height:13px}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px}

/* ---------- 9. ГЕРОЙ — єдина смілива поверхня ---------- */
.hero{background:var(--bg-hero);border-radius:var(--r-hero);padding:18px;margin-bottom:16px;
  display:flex;gap:16px;align-items:center;color:var(--text-on-hero);box-shadow:var(--shadow-3);
  position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 88% 8%, rgb(69 191 180/.16), transparent 60%)}
.hero-ring{width:66px;height:66px;position:relative;flex:none}
.hero-ring span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:23px;font-weight:700;letter-spacing:-.03em}
.hero-txt{flex:1;min-width:0;position:relative}
.hero-t{font-size:15.5px;font-weight:650;letter-spacing:-.01em}
.hero-lbl{font-size:12.5px;color:rgb(240 247 246/.62);margin-top:2px}
.hero-note{font-size:12.5px;margin-top:9px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.hero-note .n-crit{display:inline-flex;align-items:center;gap:5px;font-weight:600;
  background:rgb(255 107 84/.18);color:#FFC4B7;padding:3px 9px;border-radius:var(--r-chip)}
.hero-note .n-crit svg{width:13px;height:13px}
.hero-note .n-rest{color:rgb(240 247 246/.6)}

/* ---------- 10. KPI ---------- */
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px}
.kpi{background:var(--bg-surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:14px;box-shadow:var(--shadow-1),var(--edge-top);position:relative}
.kpi .k-l{font-size:11.5px;color:var(--text-tertiary);letter-spacing:.005em;margin-bottom:8px;
  display:flex;align-items:center;gap:5px}
.kpi .k-v{font-size:23px;font-weight:680;letter-spacing:-.035em;line-height:1.05;color:var(--text-primary)}
.kpi .k-v.neg{color:var(--critical)}
.kpi .k-s{font-size:11.5px;margin-top:6px;color:var(--text-tertiary)}
.k-s.up{color:var(--success-text);font-weight:550}
.k-s.down{color:var(--critical-text);font-weight:550}
.kpi.wide{grid-column:1 / -1}

/* мітка стану — замість кольорових рамок навколо картки */
.k-flag{position:absolute;top:12px;right:12px;width:7px;height:7px;border-radius:50%}
.k-flag.crit{background:var(--critical)} .k-flag.warn{background:var(--warning)}

/* ---------- 11. ЗАГОЛОВКИ СЕКЦІЙ ---------- */
.sec-head{display:flex;align-items:baseline;justify-content:space-between;margin:24px 2px 11px;gap:10px}
.sec-head .t{font-size:16px;font-weight:680;letter-spacing:-.02em}
.link{display:flex;align-items:center;gap:2px;color:var(--accent-text);font-size:12.5px;font-weight:600}
.link svg{width:15px;height:15px}

/* ---------- 12. ТРИВОГИ ---------- */
.alert{display:flex;gap:12px;padding:14px;background:var(--bg-surface);border:1px solid var(--line);
  border-radius:var(--r-card);margin-bottom:10px;position:relative;overflow:hidden;
  box-shadow:var(--shadow-1),var(--edge-top)}
.alert::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px}
.alert.crit::before{background:var(--critical)}
.alert.warn::before{background:var(--warning)}
.alert.ok::before{background:var(--success)}
.a-ic{width:34px;height:34px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center}
.a-ic svg{width:17px;height:17px}
.crit .a-ic{background:var(--critical-soft-bg);color:var(--critical);border:1px solid var(--critical-soft-border)}
.warn .a-ic{background:var(--warning-soft-bg);color:var(--warning-text);border:1px solid var(--warning-soft-border)}
.ok .a-ic{background:var(--success-soft-bg);color:var(--success);border:1px solid var(--success-soft-border)}
.a-body{flex:1;min-width:0}
.a-title{font-size:14.5px;font-weight:640;letter-spacing:-.012em;line-height:1.3;text-wrap:pretty}
.a-ago{color:var(--text-tertiary);text-transform:none;letter-spacing:.02em}
.a-detail{font-size:13px;color:var(--text-secondary);margin-top:5px;line-height:1.42}
.a-src{font-size:10.5px;color:var(--text-tertiary);margin-top:8px;letter-spacing:.07em;text-transform:uppercase}
.a-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.alert.done{opacity:.62}
.done-badge{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--success-text);
  margin-top:11px;font-weight:600}
.done-badge svg{width:15px;height:15px}

/* ---------- 13. КНОПКИ ---------- */
.btn{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;padding:8px 13px;
  border-radius:var(--r-btn);border:1px solid var(--line);background:var(--bg-surface);
  color:var(--text-primary);box-shadow:var(--shadow-1);letter-spacing:-.005em;
  transition:transform var(--t-tap) var(--e-out),background-color var(--t-tap)}
.btn svg{width:14px;height:14px}
.btn:active{transform:scale(.965);background:var(--bg-pressed)}
.btn.primary{background:var(--accent);color:var(--text-on-accent);border-color:transparent;
  box-shadow:var(--shadow-2)}
.btn.primary:active{background:var(--accent-hover)}
.btn.danger{color:var(--critical-text);border-color:var(--critical-soft-border);background:var(--critical-soft-bg)}
.btn[disabled]{opacity:.45;pointer-events:none}

/* ---------- 14. ГРАФІКИ ---------- */
.bars{display:flex;align-items:flex-end;gap:10px;height:126px;padding-top:6px}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;height:100%;justify-content:flex-end}
.bar{width:100%;max-width:36px;border-radius:6px 6px 4px 4px;background:var(--chart-1);position:relative}
.bar.dim{background:color-mix(in oklab, var(--chart-1) 42%, var(--bg-sunken))}
.bar-l{font-size:11px;color:var(--text-tertiary)}
.bar-v{font-size:11px;color:var(--text-secondary);font-weight:550}

.funnel{display:flex;flex-direction:column;gap:9px}
.fn-row{display:flex;align-items:center;gap:11px}
.fn-lbl{width:62px;font-size:12.5px;color:var(--text-secondary);flex:none}
.fn-bar{height:28px;border-radius:8px;background:var(--chart-1);display:flex;align-items:center;
  padding:0 11px;min-width:46px}
.fn-v{font-size:12.5px;font-weight:650;color:var(--text-on-accent)}

.cash svg{width:100%;height:124px;display:block}
.cash-legend{display:flex;gap:16px;font-size:11.5px;color:var(--text-secondary);margin-top:10px}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px;vertical-align:middle}

/* ---------- 15. СПИСКИ ---------- */
.lrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;
  border-bottom:1px solid var(--line-hairline)}
.lrow:last-child{border-bottom:none}
.lrow:first-child{padding-top:2px}
.l-main{font-size:14px;font-weight:600;letter-spacing:-.01em}
.l-sub{font-size:12px;color:var(--text-tertiary);margin-top:2px}
.l-val{font-size:14.5px;font-weight:650;text-align:right;letter-spacing:-.02em}
.l-val.neg{color:var(--critical-text)} .l-val.pos{color:var(--success-text)}

.tag{font-size:11px;font-weight:600;padding:3px 9px;border-radius:var(--r-chip);display:inline-block;
  border:1px solid transparent;white-space:nowrap}
.tag.crit{background:var(--critical-soft-bg);color:var(--critical-text);border-color:var(--critical-soft-border)}
.tag.warn{background:var(--warning-soft-bg);color:var(--warning-text);border-color:var(--warning-soft-border)}
.tag.ok{background:var(--success-soft-bg);color:var(--success-text);border-color:var(--success-soft-border)}
.tag.mut{background:var(--bg-neutral-soft);color:var(--text-secondary);border-color:var(--line-hairline)}
.tag.accent{background:var(--accent-soft-bg);color:var(--accent-text);border-color:var(--accent-soft-border)}

.prog{height:8px;border-radius:5px;background:var(--bg-sunken);overflow:hidden;margin-top:10px;
  box-shadow:inset 0 1px 2px rgb(var(--shadow-rgb)/.06)}
.prog i{display:block;height:100%;border-radius:5px;background:var(--accent)}
.prog.crit i{background:var(--critical)} .prog.warn i{background:var(--warning)} .prog.ok i{background:var(--success)}

.av{width:36px;height:36px;border-radius:11px;background:var(--bg-sunken);border:1px solid var(--line-hairline);
  display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:650;
  color:var(--text-secondary);flex:none;letter-spacing:.01em}

/* ---------- 16. МЕНЮ «ЩЕ» ---------- */
.menu{display:flex;flex-direction:column}
.menu-i{display:flex;align-items:center;gap:14px;padding:14px;background:var(--bg-surface);
  border:1px solid var(--line);border-radius:var(--r-card);margin-bottom:9px;text-align:left;
  box-shadow:var(--shadow-1),var(--edge-top);
  transition:transform var(--t-tap) var(--e-out),background-color var(--t-tap)}
.menu-i:active{transform:scale(.985);background:var(--bg-pressed)}
.menu-i .m-ic{width:38px;height:38px;border-radius:11px;background:var(--accent-soft-bg);
  border:1px solid var(--accent-soft-border);display:flex;align-items:center;justify-content:center;flex:none}
.menu-i .m-ic svg{width:18px;height:18px;color:var(--accent-text)}
.menu-i .m-t{flex:1;min-width:0}
.menu-i .m-t .a{font-size:14.5px;font-weight:640;letter-spacing:-.012em}
.menu-i .m-t .b{font-size:12px;color:var(--text-tertiary);margin-top:1px}
.menu-i .m-arr svg{width:18px;height:18px;color:var(--text-disabled)}
.menu-i .badge{background:var(--critical);color:#fff;font-size:11px;font-weight:700;min-width:20px;height:20px;
  border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 6px}

/* ---------- 17. ІНТЕГРАЦІЇ ---------- */
.src-dot{width:8px;height:8px;border-radius:50%;background:var(--success);flex:none}
.rule-row{font-size:12.5px;color:var(--text-secondary);display:flex;gap:8px;align-items:flex-start;line-height:1.4}
.rule-row svg{width:14px;height:14px;color:var(--accent-text);margin-top:2px}

/* ---------- 18. ПІДЕКРАНИ ---------- */
.subhead{display:flex;align-items:center;margin:-2px 0 12px}
.back{display:flex;align-items:center;gap:4px;color:var(--text-secondary);font-size:13.5px;font-weight:600;
  padding:6px 10px 6px 4px;margin-left:-4px;border-radius:var(--r-btn)}
.back:active{background:var(--bg-pressed)}
.back svg{width:18px;height:18px;transform:rotate(180deg)}

/* ---------- 19. ТОСТ ---------- */
.toast{position:absolute;left:50%;bottom:88px;transform:translateX(-50%) translateY(16px);
  background:var(--bg-raised);border:1px solid var(--line);color:var(--text-primary);
  padding:12px 16px;border-radius:var(--r-btn);font-size:13px;font-weight:550;
  box-shadow:var(--shadow-3);z-index:20;opacity:0;max-width:88%;
  display:flex;align-items:center;gap:10px;
  transition:opacity var(--t-base) var(--e-out),transform var(--t-base) var(--e-spring)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast svg{width:18px;height:18px;color:var(--success);flex:none}

/* ---------- 20. ТАБ-БАР ---------- */
.tabbar{display:flex;border-top:1px solid var(--line-hairline);background:var(--bg-nav);
  backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);
  padding:7px 6px;padding-bottom:max(7px,env(safe-area-inset-bottom));z-index:3}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:5px 0;
  color:var(--text-tertiary);border-radius:var(--r-btn);
  transition:color var(--t-fast) var(--e-out),transform var(--t-tap) var(--e-out)}
.tab svg{width:22px;height:22px}
.tab span{font-size:10.5px;font-weight:600;letter-spacing:.005em}
.tab:active{transform:scale(.94)}
.tab.active{color:var(--accent-text)}

/* ---------- 21. СТАНИ ---------- */
.empty{text-align:center;color:var(--text-tertiary);font-size:13px;padding:34px 12px}
.enter{animation:enter var(--t-base) var(--e-out)}
@keyframes enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* каскадна поява перших елементів списку */
.stagger>*{animation:enter var(--t-base) var(--e-out) backwards}
.stagger>*:nth-child(1){animation-delay:20ms}
.stagger>*:nth-child(2){animation-delay:60ms}
.stagger>*:nth-child(3){animation-delay:100ms}
.stagger>*:nth-child(4){animation-delay:140ms}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
}