/* ============================================================
   «ПУЛЬС» — дизайн-система
   Метафора: лляне полотно (тепла нейтраль) + петроль-патина на латунній
   фурнітурі (холодний акцент). Температурна пара з меблевої предметки —
   не дефолтний «сірий + синій» дашборд.
   Світла і темна теми рівноцінні (див. 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}
a{color:inherit;text-decoration:none}
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;
  text-align:left;width:100%;font:inherit;color:inherit;
  transition:transform var(--t-tap) var(--e-out),background-color var(--t-tap)}
button.kpi:active{transform:scale(.975);background:var(--bg-pressed)}
button.kpi::after{content:"";position:absolute;right:12px;bottom:12px;width:5px;height:5px;
  border-right:1.5px solid var(--text-disabled);border-top:1.5px solid var(--text-disabled);
  transform:rotate(45deg);opacity:.7}
.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;text-align:left;width:100%;font:inherit;color:inherit;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}
button.alert:active{transform:scale(.99)}
.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}
.bar-v.best{color:var(--success-text);font-weight:700}
.bar-v.worst{color:var(--text-tertiary)}
.bars-note{font-size:11px;color:var(--text-tertiary);margin-top:10px;line-height:1.4}

.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);pointer-events:none;
  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);pointer-events:auto}
.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}

/* ---------- 21б. ПОШУК, ФІЛЬТРИ, НОМЕРИ ---------- */
.search{display:flex;align-items:center;gap:9px;background:var(--bg-surface);border:1px solid var(--line);
  border-radius:var(--r-btn);padding:0 12px;height:44px;margin-bottom:10px;box-shadow:var(--shadow-1),var(--edge-top)}
.search svg{width:17px;height:17px;color:var(--text-tertiary)}
.search input{flex:1;min-width:0;border:none;background:none;outline:none;font-size:14.5px;
  color:var(--text-primary);font-family:inherit}
.search input::placeholder{color:var(--text-disabled)}
.search input::-webkit-search-cancel-button{display:none}
.s-clear{width:24px;height:24px;border-radius:50%;background:var(--bg-sunken);color:var(--text-secondary);
  font-size:12px;display:flex;align-items:center;justify-content:center;flex:none}

.chips{display:flex;gap:7px;overflow-x:auto;padding-bottom:8px;margin-bottom:2px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;font-size:12.5px;font-weight:600;padding:7px 13px;border-radius:999px;white-space:nowrap;
  background:var(--bg-surface);border:1px solid var(--line);color:var(--text-secondary);
  transition:transform var(--t-tap) var(--e-out),background-color var(--t-tap)}
.chip:active{transform:scale(.95)}
.chip.on{background:var(--accent);border-color:transparent;color:var(--text-on-accent);box-shadow:var(--shadow-1)}

.mono{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:.92em;letter-spacing:-.02em;color:var(--text-tertiary)}

/* ---------- 21а. ШТОРКА ПІДТВЕРДЖЕННЯ ---------- */
.sheet-wrap{position:absolute;inset:0;z-index:40;display:flex;align-items:flex-end}
.sheet-scrim{position:absolute;inset:0;background:var(--bg-scrim);opacity:0;
  transition:opacity var(--t-base) var(--e-out)}
.sheet-wrap.open .sheet-scrim{opacity:1}
.sheet{position:relative;width:100%;background:var(--bg-raised);
  border-radius:var(--r-sheet) var(--r-sheet) 0 0;box-shadow:var(--shadow-4);
  padding:10px 20px max(22px,env(safe-area-inset-bottom));
  transform:translateY(100%);transition:transform var(--t-base) var(--e-spring)}
.sheet-wrap.open .sheet{transform:none}
.sheet-grip{width:38px;height:4px;border-radius:2px;background:var(--line-strong);
  margin:0 auto 16px;opacity:.6}
.sheet-t{font-size:19px;font-weight:700;letter-spacing:-.025em;margin-bottom:8px}
.sheet-p{font-size:14.5px;color:var(--text-secondary);line-height:1.5}
.sheet-sys{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-tertiary);
  background:var(--bg-sunken);border:1px solid var(--line-hairline);border-radius:var(--r-btn);
  padding:10px 12px;margin-top:14px}
.sheet-sys svg{width:15px;height:15px}
.sheet-sys b{color:var(--text-primary)}
.sheet-btns{display:flex;gap:10px;margin-top:18px}
.sheet-btns .btn{flex:1;justify-content:center;height:48px;font-size:14.5px}
.btn.danger-solid{background:var(--critical);color:#fff;border-color:transparent;box-shadow:var(--shadow-2)}

/* ---------- 21б-2. НАЛАШТУВАННЯ: перемикачі, пороги, вибір ---------- */
.sw{width:46px;height:27px;border-radius:14px;background:var(--bg-sunken);border:1px solid var(--line);
  flex:none;position:relative;transition:background-color var(--t-fast) var(--e-out)}
.sw i{position:absolute;top:2px;left:2px;width:21px;height:21px;border-radius:50%;
  background:var(--bg-raised);box-shadow:var(--shadow-1);
  transition:transform var(--t-fast) var(--e-spring)}
.sw.on{background:var(--accent);border-color:transparent}
.sw.on i{transform:translateX(19px);background:#fff}
.sw:active i{width:24px}

.rule{transition:opacity var(--t-fast)}
.rule.off{opacity:.55}
.rule-th{margin-top:12px;padding-top:12px;border-top:1px solid var(--line-hairline)}
.stepper{display:inline-flex;align-items:center;gap:2px;background:var(--bg-sunken);
  border:1px solid var(--line-hairline);border-radius:var(--r-btn);padding:2px}
.stepper button{width:32px;height:30px;border-radius:9px;font-size:17px;font-weight:600;
  color:var(--text-secondary);display:flex;align-items:center;justify-content:center}
.stepper button:active{background:var(--bg-pressed)}
.stepper b{min-width:78px;text-align:center;font-size:13.5px;font-weight:650;letter-spacing:-.01em}

.sel{max-width:58%;font:inherit;font-size:13px;color:var(--text-primary);
  background:var(--bg-sunken);border:1px solid var(--line);border-radius:9px;padding:7px 9px;
  appearance:none;-webkit-appearance:none}

.a-owner{font-size:12px;color:var(--text-secondary);margin-top:8px;display:flex;align-items:center;gap:6px}
.a-owner svg{width:14px;height:14px;color:var(--text-tertiary)}
.a-owner b{color:var(--text-primary)}

/* ---------- 21в. ВСТАНОВЛЕННЯ В ОДИН ДОТИК ---------- */
.ins-btn{width:100%;justify-content:center;height:50px;font-size:15px;margin:2px 0 8px;
  border-radius:var(--r-btn);box-shadow:var(--shadow-2)}
.ins-btn svg{width:19px;height:19px}
.ins-hint{font-size:12.5px;color:var(--text-tertiary);line-height:1.45;margin-bottom:4px}
.ins-done{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;
  color:var(--success-text);background:var(--success-soft-bg);border:1px solid var(--success-soft-border);
  border-radius:var(--r-btn);padding:12px 14px;margin-bottom:6px}
.ins-done svg{width:18px;height:18px;color:var(--success)}

/* iPhone: Apple не дає встановити програмно — ведемо до кнопки «Поділитися» */
.ins-ios{background:var(--accent-soft-bg);border:1px solid var(--accent-soft-border);
  border-radius:var(--r-btn);padding:14px;margin-bottom:8px;position:relative}
.ins-ios-t{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:650;color:var(--accent-text)}
.ins-ios-t svg{width:18px;height:18px}
.ins-ios-p{font-size:12.5px;color:var(--text-secondary);line-height:1.45;margin-top:7px}
.ins-arrow{display:flex;justify-content:center;margin-top:6px;color:var(--accent)}
.ins-arrow svg{width:24px;height:24px;animation:insDown 1.6s var(--e-inout) infinite}
@keyframes insDown{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(7px);opacity:1}}

/* ---------- 21г. ВЕРСІЯ ТА ОНОВЛЕННЯ ---------- */
.upd{margin-top:12px;padding-top:12px;border-top:1px solid var(--line-hairline)}
.upd-t2{font-size:13.5px;font-weight:650}
.upd-p{font-size:12.5px;color:var(--text-tertiary);line-height:1.4;margin-top:2px}
.upd-new{background:var(--accent-soft-bg);border:1px solid var(--accent-soft-border);
  border-radius:var(--r-btn);padding:14px;margin-top:12px}
.upd-new .upd-t{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:650;color:var(--accent-text)}
.upd-new .upd-t svg{width:17px;height:17px}
.upd-new .upd-p{color:var(--text-secondary);margin-top:6px}
.upd-btn{width:100%;justify-content:center;height:46px;margin-top:12px}
.upd-cur{font-size:11.5px;color:var(--text-tertiary);text-align:center;margin-top:8px}


/* ---------- 21д. ПРО ПРОДУКТ: це презентація, а не частина бізнес-даних ---------- */
/* Візуально відрізняється від карток із даними: акцентна підкладка, пунктирна рамка,
   мітка зверху. Щоб не сплутати «наш продукт» із «ваш бізнес». */
.promo{position:relative;display:flex;gap:12px;align-items:flex-start;
  background:var(--accent-soft-bg);border:1px dashed var(--accent-soft-border);
  border-radius:var(--r-card);padding:13px 14px;margin-bottom:14px}
.promo .p-ic{width:34px;height:34px;border-radius:10px;flex:none;display:flex;
  align-items:center;justify-content:center;background:var(--bg-hero);color:var(--text-on-hero)}
.promo .p-ic svg{width:17px;height:17px}
.promo .p-body{flex:1;min-width:0;padding-right:16px}
.promo .p-eyebrow{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-text);opacity:.75}
.promo .p-t{font-size:14px;font-weight:650;letter-spacing:-.012em;margin-top:3px}
.promo .p-d{font-size:12.5px;color:var(--text-secondary);margin-top:3px;line-height:1.42}
.promo .p-go{display:inline-flex;align-items:center;gap:5px;margin-top:9px;font-size:13px;
  font-weight:650;color:var(--accent-text)}
.promo .p-go svg{width:15px;height:15px}
.promo .p-x{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;color:var(--text-tertiary)}
.promo .p-x:active{background:var(--bg-pressed)}
.promo .p-x svg{width:14px;height:14px}


/* Плашка ледь бʼється — подвійний удар, як у пульсі. Амплітуда 1,2%: помітно краєм ока,
   не смикається перед очима. Тим, хто вимкнув анімації в системі, нічого не рухається. */
@media (prefers-reduced-motion: no-preference) {
  .promo, .menu-i.product { animation: promo-beat 3.6s ease-in-out infinite; }
  .promo:active, .menu-i.product:active { animation: none; }
}
@keyframes promo-beat {
  0%, 58%, 100% { transform: scale(1); }
  63%  { transform: scale(1.012); }
  69%  { transform: scale(1); }
  75%  { transform: scale(1.007); }
  81%  { transform: scale(1); }
}

/* блок «про продукт» у розділі «Ще» — окремо від бізнес-розділів */
.grp{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-tertiary);margin:2px 2px 9px}
.grp.second{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-hairline)}
.menu-i.product{background:var(--accent-soft-bg);border-color:var(--accent-soft-border);
  border-style:dashed}
.menu-i.product .m-ic{background:var(--bg-hero);border-color:transparent}
.menu-i.product .m-ic svg{color:var(--text-on-hero)}

/* ---------- 22. ОНБОРДИНГ: як встановити застосунок ---------- */
.onb{position:absolute;inset:0;z-index:30;background:var(--bg-canvas);display:flex;flex-direction:column;
  animation:onbIn var(--t-slow) var(--e-out)}
@keyframes onbIn{from{opacity:0;transform:scale(1.02)}to{opacity:1;transform:none}}
.onb.closing{animation:onbOut var(--t-base) var(--e-inout) forwards}
@keyframes onbOut{to{opacity:0;transform:scale(.98)}}

.onb-track{flex:1;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.onb-track::-webkit-scrollbar{display:none}
.onb-slide{flex:0 0 100%;width:100%;scroll-snap-align:center;scroll-snap-stop:always;
  display:flex;flex-direction:column;min-width:0}

.onb-pic{position:relative;height:42%;min-height:190px;flex:none;overflow:hidden;background:var(--bg-sunken)}
.onb-pic img{width:100%;height:100%;object-fit:cover;display:block}
/* м'який перехід фото → полотно, щоб не було різкої межі */
.onb-pic::after{content:"";position:absolute;inset:auto 0 -1px;height:78px;
  background:linear-gradient(180deg,transparent,var(--bg-canvas))}
.onb-step{position:absolute;top:calc(14px + env(safe-area-inset-top));left:16px;z-index:2;
  font-size:11px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;
  color:#F0F7F6;background:rgb(15 44 46/.72);backdrop-filter:blur(8px);
  padding:5px 10px;border-radius:var(--r-chip)}
.onb-badge{position:absolute;top:calc(14px + env(safe-area-inset-top));right:16px;z-index:2;
  font-size:11px;font-weight:650;color:var(--text-on-accent);background:var(--accent);
  padding:5px 10px;border-radius:var(--r-chip)}

/* safe center: короткий слайд центрується, довгий не обрізається зверху */
.onb-body{flex:1;padding:4px 22px 12px;display:flex;flex-direction:column;justify-content:safe center;
  min-height:0;overflow-y:auto}
.onb-body::-webkit-scrollbar{display:none}
.onb-t{font-size:24px;font-weight:700;letter-spacing:-.03em;line-height:1.18;text-wrap:balance;
  margin-bottom:8px}
.onb-p{font-size:14.5px;color:var(--text-secondary);line-height:1.5}
.onb-steps{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:10px}
.onb-steps li{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--text-primary);
  line-height:1.4}
.onb-steps .n{flex:none;width:23px;height:23px;border-radius:8px;background:var(--accent-soft-bg);
  border:1px solid var(--accent-soft-border);color:var(--accent-text);
  font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px}
.onb-steps b{font-weight:650}
.onb-note{margin-top:14px;font-size:12.5px;color:var(--text-tertiary);
  background:var(--bg-sunken);border:1px solid var(--line-hairline);
  border-radius:var(--r-btn);padding:10px 12px;line-height:1.45}

.onb-foot{flex:none;padding:12px 20px;padding-bottom:max(14px,env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:14px;border-top:1px solid var(--line-hairline);
  background:var(--bg-surface)}
.onb-dots{display:flex;gap:7px;flex:1}
.onb-dots i{width:7px;height:7px;border-radius:50%;background:var(--line-strong);
  transition:width var(--t-base) var(--e-spring),background-color var(--t-base)}
.onb-dots i.on{width:20px;border-radius:4px;background:var(--accent)}
.onb-close{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;
  padding:9px 15px;border-radius:var(--r-btn);border:1px solid var(--line);
  background:var(--bg-canvas);color:var(--text-secondary);white-space:nowrap}
.onb-close[disabled]{opacity:.55}
.onb-close.ready{background:var(--accent);color:var(--text-on-accent);border-color:transparent;
  box-shadow:var(--shadow-2)}
.onb-cta{width:100%;justify-content:center;margin-top:16px}

/* підказка «гортайте далі» — з'являється після автопрокрутки першого слайда */
.onb-hint{position:absolute;right:18px;bottom:84px;z-index:3;display:flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:600;color:var(--text-on-hero);background:rgb(15 44 46/.9);
  padding:8px 13px;border-radius:999px;box-shadow:var(--shadow-2);opacity:0;pointer-events:none;
  transition:opacity var(--t-base) var(--e-out)}
.onb-hint.show{opacity:1;animation:nudge 1.5s var(--e-inout) infinite}
.onb-hint svg{width:16px;height:16px}
@keyframes nudge{0%,100%{transform:translateX(0)}45%{transform:translateX(-11px)}}

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