/* Застосунок Оленки. Токени — як у Myvex: одна крива --ease, кольори лише через змінні.
   Чотири стилі (А/Б/В/Г) — це набори токенів; обирається в «Налаштуваннях». */
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%}
html{--ease:cubic-bezier(.22,.8,.24,1);-webkit-text-size-adjust:100%;
  --c-income:#3E7CB1;--c-exp:#C9702A;--c-profit:#7A4E9C}
html.dark{--c-income:#4A93DB;--c-exp:#C66C26;--c-profit:#A276D6}
body{background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,sans-serif;font-size:16px;line-height:1.4;-webkit-font-smoothing:antialiased;overflow:hidden;transition:background-color .32s var(--ease),color .32s var(--ease)}
button,input,select,textarea{font:inherit;color:inherit}
button{-webkit-tap-highlight-color:transparent}

/* А · Перлина */
html[data-dir="pearl"]{--bg:#F7F3EE;--side:#F1EBE4;--side-rule:#E6DDD3;--side-ink:#2A1F2D;--side-ink-soft:#625566;--surface:#FFFFFF;--surface-2:#F3EDE6;--rule:#E6DDD3;--ink:#2A1F2D;--ink-soft:#625566;--ink-faint:#736676;--accent:#6E3A63;--accent-ink:#FFFFFF;--accent-bg:rgba(110,58,99,.09);--accent-line:rgba(110,58,99,.28);--nav-on-bg:rgba(110,58,99,.09);--nav-on-ink:#6E3A63;--nav-on-line:transparent;--svc-k:#C9A97E;--svc-c:#7FA6B8;--svc-b:#B07AA1;--svc-r:#8DB596;--svc-h:#D6B25E;--svc-x:#9C8FB8;--svc-d:#A9B48C;--svc-o:#B8AFA6;--gain:#2E7558;--gain-bg:rgba(46,117,88,.10);--loss:#B03A34;--loss-bg:rgba(176,58,52,.09);--warn:#9A6414;--warn-bg:rgba(154,100,20,.10);--card-shadow:0 1px 2px rgba(42,31,45,.05),0 12px 30px -22px rgba(42,31,45,.35);--pri-shadow:none;--knob:0 1px 3px rgba(42,31,45,.18);--prog:var(--accent);--r-card:22px;--r-btn:999px;--r-chip:999px;--r-pill:999px;--r-nav:12px;--r-ava:50%;--r-field:14px;--font-display:'Cormorant Garamond',Georgia,serif;--display-weight:600;--display-track:-.01em;--font-h2:inherit;--font-label:inherit;--h1-size:52px;--h2-size:18px;--kpi-size:40px;--time-size:30px;--amt-size:26px;--calc-size:36px;--day-size:26px}
html[data-dir="pearl"].dark{--bg:#17121A;--side:#1B151E;--side-rule:#3A3040;--side-ink:#F4EDF3;--side-ink-soft:#C5B8C3;--surface:#211B25;--surface-2:#2A2230;--rule:#3A3040;--ink:#F4EDF3;--ink-soft:#C5B8C3;--ink-faint:#9C8F9B;--accent:#D9A8CD;--accent-ink:#2A1F2D;--accent-bg:rgba(217,168,205,.12);--accent-line:rgba(217,168,205,.32);--nav-on-bg:rgba(217,168,205,.12);--nav-on-ink:#D9A8CD;--svc-k:#D8BC8E;--gain:#6FC79F;--gain-bg:rgba(111,199,159,.12);--loss:#F08A80;--loss-bg:rgba(240,138,128,.12);--warn:#E3B25A;--warn-bg:rgba(227,178,90,.12);--card-shadow:0 1px 2px rgba(0,0,0,.4),0 14px 34px -22px rgba(0,0,0,.8);--knob:0 1px 3px rgba(0,0,0,.5)}

/* Б · Шовк і мед */
html[data-dir="silk"]{--bg:#F5ECE2;--side:#EFE3D6;--side-rule:#E2D1BF;--side-ink:#2B1D14;--side-ink-soft:#6A5444;--surface:#FFFAF4;--surface-2:#F1E5D8;--rule:#E2D1BF;--ink:#2B1D14;--ink-soft:#6A5444;--ink-faint:#7A6352;--accent:#96541C;--accent-ink:#FFFFFF;--accent-bg:rgba(150,84,28,.10);--accent-line:rgba(150,84,28,.3);--nav-on-bg:rgba(150,84,28,.10);--nav-on-ink:#96541C;--nav-on-line:transparent;--svc-k:#E2AE4A;--svc-c:#8FB3B5;--svc-b:#C98B7A;--svc-r:#9DB07A;--svc-h:#D9A441;--svc-x:#A98FB0;--svc-d:#A3B47C;--svc-o:#BBA996;--gain:#3C7A4E;--gain-bg:rgba(60,122,78,.11);--loss:#A8402C;--loss-bg:rgba(168,64,44,.09);--warn:#8E5A12;--warn-bg:rgba(142,90,18,.10);--card-shadow:0 1px 2px rgba(80,50,20,.06),0 14px 32px -22px rgba(80,50,20,.38);--pri-shadow:0 8px 20px -12px rgba(150,84,28,.8);--knob:0 1px 3px rgba(80,50,20,.18);--prog:var(--svc-k);--r-card:18px;--r-btn:14px;--r-chip:12px;--r-pill:9px;--r-nav:12px;--r-ava:14px;--r-field:12px;--font-display:'Playfair Display',Georgia,serif;--display-weight:600;--display-track:-.01em;--font-h2:'Playfair Display',Georgia,serif;--font-label:inherit;--h1-size:46px;--h2-size:21px;--kpi-size:34px;--time-size:26px;--amt-size:23px;--calc-size:31px;--day-size:23px}
html[data-dir="silk"].dark{--bg:#1A140F;--side:#1E1711;--side-rule:#3E3125;--side-ink:#F6EBDF;--side-ink-soft:#CFBBA8;--surface:#241C15;--surface-2:#2E241B;--rule:#3E3125;--ink:#F6EBDF;--ink-soft:#CFBBA8;--ink-faint:#A69079;--accent:#E8B867;--accent-ink:#2B1D14;--accent-bg:rgba(232,184,103,.13);--accent-line:rgba(232,184,103,.34);--nav-on-bg:rgba(232,184,103,.13);--nav-on-ink:#E8B867;--svc-k:#E8B867;--gain:#7CC795;--gain-bg:rgba(124,199,149,.12);--loss:#EE8E78;--loss-bg:rgba(238,142,120,.12);--warn:#E8B867;--warn-bg:rgba(232,184,103,.12);--card-shadow:0 1px 2px rgba(0,0,0,.45),0 14px 34px -22px rgba(0,0,0,.85);--pri-shadow:0 8px 20px -12px rgba(0,0,0,.9);--knob:0 1px 3px rgba(0,0,0,.5)}

/* В · Нічний салон */
html[data-dir="night"]{--bg:#F6F3F5;--side:rgba(255,255,255,.72);--side-rule:#DFD7DD;--side-ink:#1A1520;--side-ink-soft:#5D5462;--surface:#FFFFFF;--surface-2:#EFEAEE;--rule:#DFD7DD;--ink:#1A1520;--ink-soft:#5D5462;--ink-faint:#71677A;--accent:#A9584B;--accent-ink:#FFFFFF;--accent-bg:rgba(169,88,75,.10);--accent-line:rgba(169,88,75,.3);--nav-on-bg:rgba(169,88,75,.10);--nav-on-ink:#A9584B;--nav-on-line:rgba(169,88,75,.3);--glowc:rgba(169,88,75,.35);--svc-k:#B98A45;--svc-c:#5E9CC2;--svc-b:#C27FAE;--svc-r:#7FAF72;--svc-h:#C9A13A;--svc-x:#8E7FC0;--svc-d:#7FAF72;--svc-o:#A39AA6;--gain:#2B7A55;--gain-bg:rgba(43,122,85,.10);--loss:#B23A30;--loss-bg:rgba(178,58,48,.09);--warn:#946015;--warn-bg:rgba(148,96,21,.10);--card-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 1px 2px rgba(26,21,32,.06),0 14px 34px -22px rgba(26,21,32,.35);--pri-shadow:0 0 0 1px var(--accent-line),0 8px 24px -10px var(--glowc);--knob:0 1px 3px rgba(26,21,32,.16);--prog:var(--accent);--r-card:20px;--r-btn:999px;--r-chip:999px;--r-pill:999px;--r-nav:12px;--r-ava:50%;--r-field:14px;--font-display:'Unbounded','Arial Black',system-ui,sans-serif;--display-weight:600;--display-track:-.02em;--font-h2:inherit;--font-label:inherit;--h1-size:38px;--h2-size:18px;--kpi-size:28px;--time-size:22px;--amt-size:21px;--calc-size:26px;--day-size:19px}
html[data-dir="night"].dark{--bg:#0D0B10;--side:rgba(20,17,24,.82);--side-rule:#2B2532;--side-ink:#F3EDF2;--side-ink-soft:#B9ADB8;--surface:#16131B;--surface-2:#201B26;--rule:#2B2532;--ink:#F3EDF2;--ink-soft:#B9ADB8;--ink-faint:#938792;--accent:#EBAE9E;--accent-ink:#1A1520;--accent-bg:rgba(235,174,158,.12);--accent-line:rgba(235,174,158,.35);--nav-on-bg:rgba(235,174,158,.12);--nav-on-ink:#EBAE9E;--nav-on-line:rgba(235,174,158,.35);--glowc:rgba(235,174,158,.5);--svc-k:#E2C08D;--svc-c:#7FB7D6;--svc-b:#D9A0C8;--svc-r:#9CCB8F;--svc-d:#9CCB8F;--gain:#5FD3A0;--gain-bg:rgba(95,211,160,.12);--loss:#FF8577;--loss-bg:rgba(255,133,119,.12);--warn:#F0C060;--warn-bg:rgba(240,192,96,.12);--card-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 1px 2px rgba(0,0,0,.5),0 16px 40px -24px rgba(0,0,0,.95);--pri-shadow:0 0 0 1px var(--accent-line),0 8px 26px -8px var(--glowc);--knob:0 1px 3px rgba(0,0,0,.6)}

/* Г · Як у прайсі (@stylish_hair_pro) */
html[data-dir="price"]{--bg:#F3EFE9;--side:#A49680;--side-rule:#958771;--side-ink:#2B231B;--side-ink-soft:#2B231B;--surface:#FFFFFF;--surface-2:#F1ECE4;--rule:#E4DCD0;--ink:#2B231B;--ink-soft:#5E5245;--ink-faint:#75685A;--accent:#4A3B2E;--accent-ink:#FFFFFF;--accent-bg:rgba(74,59,46,.07);--accent-line:rgba(74,59,46,.25);--nav-on-bg:#FFFFFF;--nav-on-ink:#2B231B;--nav-on-line:transparent;--brand-tile:#9A8B76;--brand-sub:#2B231B;--svc-k:#C8A46E;--svc-c:#8EA9B4;--svc-b:#B9938B;--svc-r:#9AA383;--svc-h:#C9A458;--svc-x:#A497B0;--svc-d:#A9B48C;--svc-o:#B5A99A;--gain:#3F7356;--gain-bg:rgba(63,115,86,.11);--loss:#A8432F;--loss-bg:rgba(168,67,47,.09);--warn:#8A5E16;--warn-bg:rgba(138,94,22,.10);--card-shadow:0 1px 2px rgba(43,35,27,.05),0 12px 28px -22px rgba(43,35,27,.32);--pri-shadow:none;--knob:0 1px 3px rgba(43,35,27,.18);--prog:var(--brand-tile);--r-card:16px;--r-btn:10px;--r-chip:10px;--r-pill:8px;--r-nav:10px;--r-ava:50%;--r-field:10px;--font-display:'Cormorant Garamond',Georgia,serif;--display-weight:500;--display-track:0;--font-h2:'Montserrat',system-ui,sans-serif;--font-label:'Montserrat',system-ui,sans-serif;--h1-size:52px;--h2-size:13px;--kpi-size:42px;--time-size:31px;--amt-size:27px;--calc-size:38px;--day-size:28px}
html[data-dir="price"].dark{--bg:#1B1814;--side:#3B342B;--side-rule:#4A4136;--side-ink:#F3ECE2;--side-ink-soft:#E6DCCD;--surface:#24201B;--surface-2:#2E2923;--rule:#3D362E;--ink:#F3ECE2;--ink-soft:#CDBFAE;--ink-faint:#A69886;--accent:#D9CBB5;--accent-ink:#2B231B;--accent-bg:rgba(217,203,181,.10);--accent-line:rgba(217,203,181,.3);--nav-on-bg:rgba(255,255,255,.12);--nav-on-ink:#FFFFFF;--brand-tile:#5A4F42;--brand-sub:#E6DCCD;--svc-k:#D4B07A;--gain:#7FC09A;--gain-bg:rgba(127,192,154,.12);--loss:#E88F7C;--loss-bg:rgba(232,143,124,.12);--warn:#E2B866;--warn-bg:rgba(226,184,102,.12);--card-shadow:0 1px 2px rgba(0,0,0,.4),0 14px 34px -22px rgba(0,0,0,.8);--knob:0 1px 3px rgba(0,0,0,.5)}

/* Каркас: бічне меню + прокручуваний вміст */
.shell{display:flex;height:100vh;height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}
.side{position:relative;width:256px;flex:none;display:flex;flex-direction:column;gap:6px;padding:30px 16px 20px;background:var(--side);border-right:1px solid var(--side-rule);color:var(--side-ink);overflow-y:auto;transition:background-color .32s var(--ease)}
html[data-dir="night"] .side{-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
.wm{display:none;flex-direction:column;gap:8px;padding:0 12px 26px}
html[data-dir="pearl"] .wm-pearl,html[data-dir="silk"] .wm-silk,html[data-dir="night"] .wm-night,html[data-dir="price"] .wm-price{display:flex}
.wm-price{align-items:center;text-align:center;padding:4px 4px 26px;gap:10px}
.script{font-family:'Great Vibes',cursive;font-size:38px;line-height:1;white-space:nowrap;color:#FFFFFF}
.wm-line{width:100%;height:1px;background:rgba(255,255,255,.85)}
.side-nav{display:flex;flex-direction:column;gap:4px}
.side-bottom{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding-top:16px}
.nav{display:flex;align-items:center;gap:12px;height:46px;padding:0 14px;border:1px solid transparent;border-radius:var(--r-nav);background:none;color:var(--side-ink-soft);font-size:16px;text-align:left;cursor:pointer;text-decoration:none}
.nav[aria-current="page"]{background:var(--nav-on-bg);border-color:var(--nav-on-line);color:var(--nav-on-ink);font-weight:600}
html[data-dir="price"] .nav{font-weight:500}
html[data-dir="price"] .nav[aria-current="page"]{font-weight:600}
.main{flex:1;min-width:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.page{max-width:1180px;margin:0 auto;padding:32px 36px 48px;display:flex;flex-direction:column;gap:22px}
.store-note{display:flex;align-items:center;gap:10px;padding:12px;border-radius:14px;background:var(--surface);border:1px solid var(--rule);color:var(--ink);font-size:13px;line-height:1.3}
.store-note b{display:block;font-size:13px}
.store-note span{color:var(--ink-faint)}

/* Типографіка й базові елементи */
.disp{font-family:var(--font-display);font-weight:var(--display-weight);letter-spacing:var(--display-track)}
.num{font-variant-numeric:tabular-nums lining-nums}
.lbl{font-family:var(--font-label);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
html[data-dir="price"] .lbl{font-size:11px;font-weight:600;letter-spacing:.16em}
html[data-dir="price"] .side .lbl{color:var(--side-ink);letter-spacing:.2em}
.h1{margin:0;font-size:var(--h1-size);line-height:1.02}
.h2{margin:0;font-family:var(--font-h2);font-size:var(--h2-size);font-weight:600}
html[data-dir="price"] .h2{text-transform:uppercase;letter-spacing:.14em}
.muted{color:var(--ink-faint);font-size:14px}
.soft{color:var(--ink-soft)}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-card);box-shadow:var(--card-shadow);transition:background-color .32s var(--ease),border-color .32s var(--ease)}
.pad{padding:20px 22px}
.stack{display:flex;flex-direction:column;gap:14px}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 24px;flex-wrap:wrap}
.head-title{display:flex;flex-direction:column;gap:10px}
.head-sub{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;font-size:15px;color:var(--ink-soft)}
.actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.grid-2{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:22px;align-items:start}
.col{display:flex;flex-direction:column;gap:16px;min-width:0}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.kpi{display:flex;flex-direction:column;gap:6px;padding:18px 20px;min-width:0}
.kpi .bn{font-size:var(--kpi-size);line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform-origin:left center}
.kpi .bs{font-size:13px;color:var(--ink-soft)}
.up{color:var(--gain);font-weight:600}
.down{color:var(--loss);font-weight:600}
html[data-dir="price"] .kpi-brand{background:var(--brand-tile);border-color:transparent}
html[data-dir="price"] .kpi-brand .bn{color:#FFFFFF}
html[data-dir="price"] .kpi-brand .lbl,html[data-dir="price"] .kpi-brand .bs,html[data-dir="price"] .kpi-brand .up,html[data-dir="price"] .kpi-brand .down{color:var(--brand-sub)}
html[data-dir="night"] .kpi-glow{border-color:var(--accent-line);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 30px -14px var(--glowc)}
.track{height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden}
.prog{height:100%;border-radius:3px;background:var(--prog);transition:width .5s var(--ease)}

/* Кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 18px;border-radius:var(--r-btn);font-weight:600;cursor:pointer;white-space:nowrap;text-decoration:none}
.btn.pri{border:0;background:var(--accent);color:var(--accent-ink);box-shadow:var(--pri-shadow)}
.btn.sec{border:1px solid var(--rule);background:var(--surface);color:var(--ink)}
html[data-dir="night"] .btn.sec{background:var(--surface-2)}
.btn.ghost{border:0;background:none;color:var(--ink-soft)}
.btn.danger{border:1px solid var(--rule);background:var(--surface);color:var(--loss)}
.btn.sm{min-height:38px;padding:0 14px;font-size:14px}
.btn.wide{width:100%}
.btn:disabled{opacity:.45;cursor:default}
.ib{width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:var(--r-btn);border:1px solid var(--rule);background:var(--surface);color:var(--ink-soft);cursor:pointer}
.ib.sm{width:38px;height:38px}
.press{transition:transform .15s var(--ease),background-color .24s var(--ease),color .24s var(--ease),border-color .24s var(--ease),box-shadow .24s var(--ease)}
.press:active{transform:scale(.97)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hold{position:relative;min-height:44px;display:inline-flex;align-items:center;gap:8px;padding:0 16px 0 8px;border-radius:var(--r-btn);border:1px solid var(--rule);background:var(--surface);color:var(--loss);font-size:15px;font-weight:600;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none}
.hold svg{flex:none}
.hold .ring{stroke-dasharray:132;stroke-dashoffset:132}
.hold.run .ring{animation:ring .8s linear forwards}

/* Пігулки, бейджі, аватари */
.pill{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;border-radius:var(--r-pill);background:var(--surface-2);font-size:13px;color:var(--ink);white-space:nowrap}
.pill.soft{color:var(--ink-soft)}
.pill.accent{background:var(--accent-bg);color:var(--accent);font-weight:600}
.pill.warn{background:var(--warn-bg);color:var(--warn);font-weight:600}
button.pill{border:0;cursor:pointer}
.dot{width:8px;height:8px;flex:none;border-radius:50%}
.badge{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border:0;border-radius:var(--r-pill);font-size:13px;font-weight:600;white-space:nowrap}
.badge.done{background:var(--gain-bg);color:var(--gain)}
.badge.planned{background:var(--surface-2);color:var(--ink-soft)}
.badge.cancelled,.badge.noshow{background:var(--loss-bg);color:var(--loss)}
.badge.free{background:var(--warn-bg);color:var(--warn)}
.ava{width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:var(--r-ava);background:var(--surface-2);color:var(--ink-soft);font-weight:600;font-size:15px}
html[data-dir="night"] .ava{border:1px solid var(--rule)}
.svc-k{background:var(--svc-k)}.svc-c{background:var(--svc-c)}.svc-b{background:var(--svc-b)}.svc-r{background:var(--svc-r)}.svc-h{background:var(--svc-h)}.svc-x{background:var(--svc-x)}.svc-d{background:var(--svc-d)}.svc-o{background:var(--svc-o)}

/* Записи */
.visit{display:flex;align-items:center;gap:16px;padding:16px 20px;width:100%;text-align:left;cursor:pointer;color:inherit}
.visit .vt{width:66px;flex:none;display:flex;flex-direction:column;gap:2px}
.visit .tm{font-size:var(--time-size);line-height:1.1}
.visit .dur{font-size:12px;color:var(--ink-faint)}
.visit .vm{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.who{display:flex;align-items:baseline;gap:4px 8px;flex-wrap:wrap}
.who strong{font-size:17px;font-weight:600}
.who span{font-size:14px;color:var(--ink-faint)}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.visit .vr{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.amt{font-size:var(--amt-size);white-space:nowrap}
.empty{padding:26px 22px;text-align:center;color:var(--ink-soft);display:flex;flex-direction:column;align-items:center;gap:12px}

/* Сегменти, чипи, перемикач */
.seg{position:relative;display:inline-flex;padding:4px;border-radius:var(--r-chip);background:var(--surface-2);gap:2px}
html[data-dir="night"] .seg{border:1px solid var(--rule)}
.seg button{min-height:36px;padding:0 14px;border:0;border-radius:var(--r-chip);background:none;color:var(--ink-soft);font-size:14px;cursor:pointer;transition:background-color .24s var(--ease),color .24s var(--ease)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:var(--knob)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:0 14px;border-radius:var(--r-chip);border:1px solid var(--rule);background:var(--surface);color:var(--ink);font-size:14px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
html[data-dir="night"] .chip{background:var(--surface-2)}
html[data-dir="night"] .chip[aria-pressed="true"]{background:var(--accent-bg);border-color:var(--accent-line);color:var(--accent);box-shadow:0 0 22px -8px var(--glowc)}
.switch{position:relative;width:52px;height:32px;flex:none;padding:0;border-radius:999px;border:0;background:var(--rule);cursor:pointer;transition:background-color .24s var(--ease)}
.switch[aria-checked="true"]{background:var(--accent)}
.switch .knob{position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#FFFFFF;box-shadow:var(--knob);transition:transform .32s var(--ease)}
.switch[aria-checked="true"] .knob{transform:translateX(20px)}

/* Поля форм */
.form{display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field > span,.field-label{font-size:13px;font-weight:600;color:var(--ink-soft)}
.input{width:100%;min-height:46px;padding:10px 14px;border-radius:var(--r-field);border:1px solid var(--rule);background:var(--surface);color:var(--ink);font-size:16px}
textarea.input{min-height:76px;resize:vertical}
.input:focus{border-color:var(--accent)}
.fields-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fields-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.step{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 6px 6px 14px;border-radius:var(--r-field);background:var(--surface-2)}
.step b{font-size:17px}
.step-btns{display:flex;gap:6px}
.sbtn{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-btn);border:1px solid var(--rule);background:var(--surface);font-size:20px;line-height:1;cursor:pointer}
.suggest{display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:var(--r-field);overflow:hidden;max-height:240px;overflow-y:auto}
.suggest button{display:flex;align-items:center;gap:10px;padding:10px 12px;border:0;border-bottom:1px solid var(--rule);background:var(--surface);text-align:left;cursor:pointer}
.suggest button:last-child{border-bottom:0}
.suggest small{color:var(--ink-faint)}
.picked{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-field);background:var(--surface-2)}
.calc-out{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:16px;background:var(--accent-bg)}
.calc-out .bn{font-size:var(--calc-size);line-height:1.15;color:var(--accent)}
.calc-out .bs{font-size:13px;color:var(--ink-soft)}
html[data-dir="price"] .calc-out{background:var(--brand-tile);align-items:center;text-align:center}
html[data-dir="price"] .calc-out .bn{color:#FFFFFF}
html[data-dir="price"] .calc-out .bs{color:var(--brand-sub);font-weight:500}
html[data-dir="night"] .calc-out{border:1px solid var(--accent-line);box-shadow:0 0 30px -16px var(--glowc)}
.note-warn{padding:10px 14px;border-radius:var(--r-field);background:var(--warn-bg);color:var(--warn);font-size:14px;font-weight:600}

/* Списки */
.list{display:flex;flex-direction:column}
.li{display:flex;align-items:center;gap:14px;padding:12px 0;border:0;background:none;width:100%;text-align:left;color:inherit;cursor:pointer}
.li + .li{border-top:1px solid var(--rule)}
.li .grow{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.li .grow b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li .grow small{font-size:13px;color:var(--ink-faint)}
.li .end{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:14px}
.tile{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:12px;background:var(--surface-2);color:var(--ink-soft)}
.bars{display:flex;flex-direction:column;gap:10px}
.barrow{display:grid;grid-template-columns:140px 1fr 110px;align-items:center;gap:12px;font-size:14px}
.barrow .bt{height:10px;border-radius:5px;background:var(--surface-2);overflow:hidden}
.barrow .bf{height:100%;border-radius:5px}
.barrow .bv{text-align:right}

/* Тиждень і календар */
.days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.day{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 2px;border-radius:14px;border:1px solid transparent;background:none;cursor:pointer;color:inherit}
.day .d{font-size:var(--day-size);line-height:1.15}
.day .t{font-size:12px;color:var(--ink-soft)}
.bar{width:26px;height:4px;margin-top:6px;border-radius:2px;background:var(--surface-2)}
.bar.keratin{background:var(--svc-k)}.bar.cold{background:var(--svc-c)}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal-h{font-size:12px;text-align:center;color:var(--ink-faint);padding-bottom:4px}
.cell{position:relative;min-height:84px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:8px 9px;border-radius:14px;border:1px solid var(--rule);background:var(--surface);cursor:pointer;color:inherit;text-align:left}
.cell.out{opacity:.35}
.cell.today{border-color:var(--accent)}
.cell[aria-pressed="true"]{background:var(--accent-bg);border-color:var(--accent)}
.cell .cd{font-size:16px;font-weight:600}
.cell .cc{font-size:12px;color:var(--ink-soft)}
.cell .ctype{position:absolute;left:9px;right:9px;bottom:7px;height:4px;border-radius:2px}
.cell .ctype.keratin{background:var(--svc-k)}.cell .ctype.cold{background:var(--svc-c)}.cell .ctype.off{background:var(--rule)}

/* Графік */
.chart{position:relative;width:100%}
.chart svg{display:block;width:100%;overflow:visible}
.chart .grid line{stroke:var(--rule);stroke-width:1}
.chart .zero{stroke:var(--ink-faint);stroke-width:1}
.chart .ax{fill:var(--ink-faint);font-size:12px;font-family:inherit}
.chart .b-in{fill:var(--c-income)}
.chart .b-ex{fill:var(--c-exp)}
.chart .l-pr{fill:none;stroke:var(--c-profit);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .m-pr{fill:var(--c-profit);stroke:var(--surface);stroke-width:2}
.chart .dl{fill:var(--ink);font-size:12px;font-weight:600;font-family:inherit}
.chart .hit{fill:transparent;cursor:pointer}
.chart .hit.on{fill:var(--accent-bg)}
.legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;font-size:13px;color:var(--ink-soft)}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px}
.legend i.line{height:2px;width:16px;border-radius:1px;position:relative}
.legend i.line::after{content:"";position:absolute;left:4px;top:-3px;width:8px;height:8px;border-radius:50%;background:inherit}
.tip{position:absolute;z-index:5;min-width:170px;padding:10px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--rule);box-shadow:0 12px 30px -14px rgba(0,0,0,.45);font-size:13px;pointer-events:none;transform:translate(-50%,-100%)}
.tip b{display:block;margin-bottom:4px;font-size:14px}
.tip div{display:flex;justify-content:space-between;gap:14px}
.tip i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px}
table.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th,.tbl td{padding:8px 6px;border-bottom:1px solid var(--rule);text-align:right;white-space:nowrap}
.tbl th:first-child,.tbl td:first-child{text-align:left}
.tbl th{font-size:12px;font-weight:600;color:var(--ink-faint)}
.tbl-wrap{overflow-x:auto}

/* Шторка (форми й картки) */
.backdrop{position:fixed;inset:0;z-index:70;background:rgba(20,16,12,.38);display:flex;justify-content:flex-end;opacity:0;transition:opacity .24s var(--ease)}
.backdrop.show{opacity:1}
.sheet{width:min(560px,100%);height:100%;display:flex;flex-direction:column;background:var(--bg);box-shadow:-20px 0 60px -30px rgba(0,0,0,.6);transform:translateX(24px);transition:transform .32s var(--ease);padding-top:env(safe-area-inset-top)}
.backdrop.show .sheet{transform:none}
.sheet-head{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--rule)}
.sheet-head .h2{flex:1}
.sheet-body{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:16px;-webkit-overflow-scrolling:touch}
.sheet-foot{display:flex;gap:10px;padding:14px 20px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--rule);background:var(--bg)}
.sheet-foot .btn{flex:1}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:15px}
.kv dt{color:var(--ink-faint)}
.kv dd{margin:0;text-align:right}

/* Повідомлення */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));z-index:90;display:flex;align-items:center;gap:14px;max-width:min(92vw,560px);padding:12px 14px 12px 18px;border-radius:14px;background:var(--ink);color:var(--bg);font-size:14px;line-height:1.35;box-shadow:0 12px 30px -12px rgba(0,0,0,.5);opacity:0;transform:translate(-50%,16px);pointer-events:none;transition:opacity .24s var(--ease),transform .32s var(--ease)}
.toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast button{border:0;background:none;color:inherit;font-weight:700;text-decoration:underline;cursor:pointer;padding:4px}

/* Налаштування */
.themes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.theme{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:14px;border:2px solid var(--rule);background:var(--surface);cursor:pointer;text-align:left}
.theme[aria-pressed="true"]{border-color:var(--accent)}
.swatch{display:flex;height:34px;border-radius:8px;overflow:hidden}
.swatch i{flex:1}

/* Телефон і вузьке вікно: одна колонка, меню стає нижньою панеллю */
@media (max-width:760px){
  .shell{flex-direction:column;padding:env(safe-area-inset-top) 0 0}
  .side{position:fixed;left:0;right:0;bottom:0;z-index:60;width:auto;flex-direction:row;gap:0;padding:6px 6px calc(6px + env(safe-area-inset-bottom));border-right:0;border-top:1px solid var(--side-rule);overflow:visible;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
  .side .wm,.store-note{display:none!important}
  .side-nav{flex:1;flex-direction:row;gap:2px}
  .side-bottom{margin:0;padding:0;flex:none;width:20%}
  .nav{flex:1;min-width:0;flex-direction:column;justify-content:center;gap:3px;height:54px;padding:0 2px;font-size:11px;border-radius:12px}
  .side-bottom .nav{width:100%}
  .page{padding:16px 16px calc(96px + env(safe-area-inset-bottom));gap:16px}
  .h1{font-size:calc(var(--h1-size) * .62)}
  .head{flex-direction:column;align-items:stretch}
  .actions .btn{flex:1}
  .grid-2{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kpi{padding:14px 16px}
  .kpi .bn{font-size:calc(var(--kpi-size) * .66)}
  .kpi .bs{font-size:12px}
  .pad{padding:16px}
  .visit{flex-wrap:wrap;gap:10px 12px;padding:14px 16px}
  .visit .vt{width:auto;min-width:52px}
  .visit .tm{font-size:calc(var(--time-size) * .8)}
  .visit .vm{flex:1 1 150px}
  .visit .vr{width:100%;flex-direction:row;align-items:center;justify-content:space-between;padding-top:10px;border-top:1px solid var(--rule)}
  .amt{font-size:calc(var(--amt-size) * .85)}
  .day .t{display:none}
  .day .d{font-size:calc(var(--day-size) * .72)}
  .days{gap:2px}
  .cell{min-height:58px;padding:6px;border-radius:10px}
  .cell .cc{display:none}
  .cal{gap:3px}
  .fields-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .barrow{grid-template-columns:96px 1fr 88px;font-size:13px}
  .themes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .backdrop{align-items:flex-end}
  .sheet{width:100%;height:94%;border-radius:20px 20px 0 0;transform:translateY(30px);padding-top:0}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom))}
}

/* Рух */
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes pop{40%{transform:scale(1.07)}}
@keyframes ring{from{stroke-dashoffset:132}to{stroke-dashoffset:0}}
.rise{animation:rise .24s var(--ease) both}
.pop{animation:pop .32s var(--ease)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}