@font-face{font-family:'Onest';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/onest-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Onest';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/onest-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Onest';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/onest-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Onest';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/onest-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* Токены — по образцу Flowwow CRM; акцент Han Life — индиго */
:root{
  --bg:#f6f6f9;--card:#fff;--line:#e9e9f0;--line2:#dcdce6;--text:#1c1b24;--text2:#46455a;--muted:#66657a;--soft:#86859a;
  --acc:#4f46e5;--acc-d:#3f37c9;--acc2:#eeedfd;--acc3:#d9d6fb;--acc-s:#4338ca;
  --green:#0f7342;--green2:#e3f6ea;--green-s:#12804a;--red:#c43535;--red2:#fde8e8;--red-s:#c93b3b;
  --amber:#965207;--amber2:#fdf1dc;--blue:#2a62cc;--blue2:#e6eefc;--gray2:#f1f1f5;
  --r:14px;--r-sm:10px;--sh:0 1px 2px rgba(25,20,45,.04),0 2px 8px rgba(25,20,45,.04);--sh-lg:0 12px 40px rgba(25,20,45,.14);
  --sh-hover:0 6px 20px rgba(25,20,45,.08);--ease:cubic-bezier(.2,.8,.2,1);--ink:#22202c;
  --glass:rgba(246,246,249,.88);--sk1:#eeeef3;--sk2:#f6f6f9;--viz-grid:#ececf2;
  color-scheme:light;
}
/* Тёмная база: включается атрибутом data-dark (ставится вместе с темой) */
html[data-dark]{
  color-scheme:dark;
  --bg:#121118;--card:#1b1a22;--line:#2c2a36;--line2:#3a3846;--text:#ebeaf2;--text2:#cbc9d8;--muted:#a19fb0;--soft:#7d7b8c;
  --acc:#8b85ff;--acc-d:#b7b3ff;--acc2:#24224a;--acc3:#34306b;--acc-s:#5a52e0;
  --green:#45cf86;--green2:#16301f;--green-s:#1d7f4c;--red:#ff7676;--red2:#3a1a1c;--red-s:#c93b3b;
  --amber:#f2b552;--amber2:#33260f;--blue:#79a8ff;--blue2:#18263f;--gray2:#26252e;
  --sh:0 1px 2px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.25);--sh-lg:0 14px 44px rgba(0,0,0,.55);--sh-hover:0 6px 22px rgba(0,0,0,.45);
  --ink:#37344a;--glass:rgba(18,17,24,.86);--sk1:#22212a;--sk2:#2b2a34;--viz-grid:#2c2a36;
}
/* ── светлые темы ── */
html[data-theme="mint"]{--bg:#f3f7f5;--acc:#0f9a72;--acc-d:#0b7a5a;--acc2:#e3f5ee;--acc3:#bfe6d6;--acc-s:#0b7a5a;--glass:rgba(243,247,245,.88);--gray2:#ebf2ee;--line:#e2ebe6}
html[data-theme="sakura"]{--bg:#fbf6f8;--acc:#e6457a;--acc-d:#cc2f63;--acc2:#fdedf3;--acc3:#fbd5e3;--acc-s:#cc2f63;--glass:rgba(251,246,248,.88);--gray2:#f6eef2;--line:#f0e4ea}
html[data-theme="ocean"]{--bg:#f2f7fb;--acc:#0284c7;--acc-d:#036196;--acc2:#e0f2fe;--acc3:#bae6fd;--acc-s:#0369a1;--glass:rgba(242,247,251,.88);--gray2:#e8f1f8;--line:#dfeaf3}
html[data-theme="sand"]{--bg:#f6f0e4;--card:#fbf7ee;--line:#e6dcc8;--line2:#d6cab2;--text:#1f1d19;--text2:#4a453c;--muted:#6b6459;--soft:#8b8477;
  --acc:#9a6b2f;--acc-d:#7a5220;--acc2:#efe4cf;--acc3:#e2d0ac;--acc-s:#1f1d19;--gray2:#efe7d7;--glass:rgba(246,240,228,.9);--sk1:#ece3d1;--sk2:#f4eddf;--viz-grid:#e6dcc8}
html[data-theme="lavender"]{--bg:#f7f5fc;--acc:#7c3aed;--acc-d:#6025c4;--acc2:#f0e9fe;--acc3:#ddd0fb;--acc-s:#6d28d9;--glass:rgba(247,245,252,.88);--gray2:#efebf8;--line:#e8e2f4}
html[data-theme="sunset"]{--bg:#fdf6f1;--acc:#ea580c;--acc-d:#c2410c;--acc2:#ffedd5;--acc3:#fed7aa;--acc-s:#c2410c;--glass:rgba(253,246,241,.88);--gray2:#f8ede4;--line:#f1e3d7}
html[data-theme="mono"]{--bg:#f5f5f5;--acc:#111;--acc-d:#111;--acc2:#e9e9e9;--acc3:#d4d4d4;--acc-s:#111;--glass:rgba(245,245,245,.9);--gray2:#ececec;--line:#e4e4e4;--line2:#d4d4d4}
/* ── тёмные темы ── */
html[data-theme="midnight"]{
  --bg:#0d1320;--card:#141c2c;--line:#243048;--line2:#30405e;--text:#e6edf8;--text2:#c3cee0;--muted:#93a2bb;--soft:#7a8aa6;
  --acc:#4d8dff;--acc-d:#9cc0ff;--acc2:#16284a;--acc3:#203a6b;--acc-s:#2a66d4;--gray2:#1e283b;
  --ink:#2b3a58;--glass:rgba(13,19,32,.86);--sk1:#1a2336;--sk2:#222d44;--viz-grid:#243048;
}
html[data-theme="amoled"]{
  --bg:#000;--card:#0c0c0e;--line:#1e1e22;--line2:#2c2c32;--gray2:#17171b;--glass:rgba(0,0,0,.86);--sk1:#141417;--sk2:#1c1c20;--viz-grid:#1e1e22;
  --acc:#a3a0ff;--acc-d:#c9c7ff;--acc2:#1b1a33;--acc3:#2a2852;--acc-s:#5a52e0;--ink:#2a2a30;
}
html[data-theme="forest"]{
  --bg:#0f1714;--card:#16211c;--line:#24342c;--line2:#30453b;--text:#e4efe9;--text2:#c2d4ca;--muted:#93aa9e;--soft:#73897e;--gray2:#1c2a23;
  --acc:#4ade80;--acc-d:#86efac;--acc2:#163323;--acc3:#1f4a32;--acc-s:#15803d;--glass:rgba(15,23,20,.86);--sk1:#1a2620;--sk2:#213129;--viz-grid:#24342c;--ink:#24382e;
}
html[data-theme="coffee"]{
  --bg:#17120e;--card:#211a15;--line:#33281f;--line2:#45372b;--text:#f0e7de;--text2:#d6c8b9;--muted:#ab9a88;--soft:#86766a;--gray2:#2a211a;
  --acc:#f2b552;--acc-d:#fbd28a;--acc2:#3a2b14;--acc3:#55401c;--acc-s:#b7791f;--glass:rgba(23,18,14,.88);--sk1:#261e18;--sk2:#30261f;--viz-grid:#33281f;--ink:#3a2e24;
}
html[data-theme="plum"]{
  --bg:#150f1a;--card:#1f1726;--line:#332640;--line2:#443352;--text:#f0e8f6;--text2:#d6c7e2;--muted:#ab98bb;--soft:#86749a;--gray2:#281e31;
  --acc:#e879f9;--acc-d:#f5b3ff;--acc2:#3a1d44;--acc3:#552a63;--acc-s:#a21caf;--glass:rgba(21,15,26,.88);--sk1:#241b2c;--sk2:#2e2338;--viz-grid:#332640;--ink:#3a2a48;
}
html[data-theme="nord"]{
  --bg:#242933;--card:#2e3440;--line:#3b4252;--line2:#434c5e;--text:#eceff4;--text2:#d8dee9;--muted:#a3adbf;--soft:#7f8a9e;--gray2:#353c4a;
  --acc:#88c0d0;--acc-d:#a8d5e2;--acc2:#2f4350;--acc3:#3b5a68;--acc-s:#5e81ac;--glass:rgba(36,41,51,.9);--sk1:#323845;--sk2:#3a4150;--viz-grid:#3b4252;--ink:#434c5e;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:14.5px/1.45 Onest,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}
.hidden{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--acc);text-decoration:none}
.muted{color:var(--muted)}
.small{font-size:12.5px}
.pos{color:var(--green)} .neg{color:var(--red)}
.err{color:var(--red);min-height:1.2em;font-size:13px}
.grow{flex:1}
svg.i{width:18px;height:18px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;vertical-align:-4px}
svg.i.s{width:15px;height:15px;vertical-align:-3px}
svg.i.l{width:22px;height:22px}

/* вход */
.login{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;
  background:radial-gradient(circle at 20% 20%,var(--acc2),transparent 50%),radial-gradient(circle at 80% 80%,var(--blue2),transparent 50%),var(--bg)}
.login-card{background:var(--card);padding:34px;border-radius:20px;box-shadow:var(--sh-lg);display:flex;flex-direction:column;gap:14px;width:min(380px,100%);animation:pop .35s var(--ease)}
.login-card h1{margin:0;font-size:22px}
.login-card p{margin:-8px 0 6px}
.logo{width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,#6366f1,#22d3ee);color:#fff;font-weight:800;display:grid;place-items:center;flex-shrink:0;box-shadow:0 3px 10px rgba(79,70,229,.3)}
.logo.big{width:52px;height:52px;font-size:24px;border-radius:15px}

/* каркас */
.app{display:flex;min-height:100vh}
.side{width:228px;background:var(--card);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;height:100dvh;flex-shrink:0;z-index:30}
.brand{display:flex;align-items:center;gap:10px;padding:18px 18px 14px;font-weight:700;font-size:16.5px}
#nav{flex:1;overflow-y:auto;padding:4px 10px;display:flex;flex-direction:column;gap:2px}
#nav a{color:var(--text2);padding:9px 11px;border-radius:10px;display:flex;align-items:center;gap:11px;font-weight:500;transition:background .15s,color .15s}
#nav a:hover{background:var(--gray2);color:var(--text)}
#nav a.on{background:var(--acc2);color:var(--acc-d)}
#nav .sep{height:1px;background:var(--line);margin:8px 6px}
.side-foot{padding:12px;border-top:1px solid var(--line);display:flex;gap:6px}
.side-foot .btn{flex:1}
main{flex:1;min-width:0}
.top{display:flex;align-items:center;gap:10px;padding:12px 26px;background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);position:sticky;top:0;z-index:10;border-bottom:1px solid var(--line)}
.top h2{margin:0;font-size:21px;letter-spacing:-.01em;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top-actions{display:flex;gap:8px}
.top .menu-btn{display:none}
.view{padding:20px 26px 48px;max-width:1360px;animation:fadeUp .25s var(--ease)}
.scrim,.tabbar{display:none}
body.busy .top::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:40%;background:var(--acc);animation:loadbar 1s var(--ease) infinite}

/* кнопки и поля */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line2);background:var(--card);border-radius:var(--r-sm);padding:8px 14px;cursor:pointer;white-space:nowrap;font-weight:500;transition:background .15s,border-color .15s,transform .08s,box-shadow .15s;user-select:none}
.btn:hover{background:var(--gray2)}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--acc-s);border-color:var(--acc-s);color:#fff;box-shadow:0 2px 8px rgba(79,70,229,.25)}
.btn.primary:hover{filter:brightness(.93)}
.btn.danger{color:var(--red);border-color:var(--red2)}
.btn.danger:hover{background:var(--red2)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--gray2)}
.btn.sm{padding:5px 10px;font-size:13px;border-radius:8px}
.btn:disabled{opacity:.55;cursor:default;transform:none}
.btn.loading{position:relative;color:transparent!important}
.btn.loading::after{content:"";position:absolute;width:16px;height:16px;border:2px solid #fff;border-color:#fff #fff transparent transparent;border-radius:50%;animation:spin .7s linear infinite}
.btn:not(.primary).loading::after{border-color:var(--muted) var(--muted) transparent transparent}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;border:0;background:transparent;cursor:pointer;color:var(--muted);transition:background .15s,color .15s;flex-shrink:0}
.icon-btn:hover{background:var(--gray2);color:var(--text)}
input,select,textarea{width:100%;border:1px solid var(--line2);border-radius:var(--r-sm);padding:9px 11px;background:var(--card);min-width:0;outline:none;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc2)}
input[type=checkbox]{width:auto;accent-color:var(--acc)}
::placeholder{color:var(--soft)}
textarea{min-height:84px;resize:vertical}
.seg{display:inline-flex;background:var(--gray2);border-radius:11px;padding:3px;gap:2px;flex-wrap:wrap}
.seg button{border:0;background:transparent;padding:6px 12px;border-radius:8px;cursor:pointer;color:var(--muted);font-weight:500;transition:background .15s,color .15s}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--card);color:var(--text);box-shadow:var(--sh);font-weight:600}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.toolbar input,.toolbar select{width:auto}
.quick{display:flex;gap:8px;margin-bottom:14px}

/* карточки */
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.gauto{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
@media (max-width:1100px){.g4,.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g2,.g3{grid-template-columns:1fr}.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--sh);min-width:0}
a.card,.card.click{transition:box-shadow .15s,border-color .15s,transform .15s;cursor:pointer;color:inherit}
a.card:hover,.card.click:hover{box-shadow:var(--sh-hover);border-color:var(--line2)}
.card h3{margin:0 0 12px;font-size:14.5px;font-weight:650;display:flex;align-items:center;gap:8px}
.card h3 > svg.i{color:var(--acc)}
.card h3 .grow{flex:1}
.card h3 a{font-weight:500;font-size:13px}
.stat .lbl{color:var(--muted);font-size:12.5px;font-weight:500}
.stat .val{font-size:24px;font-weight:700;margin-top:3px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat .sub{font-size:12.5px;color:var(--muted);margin-top:3px}
.mt{margin-top:14px}
.section-title{font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:20px 0 9px;font-weight:700}
.empty{color:var(--muted);padding:26px 12px;text-align:center;font-size:14px;display:flex;flex-direction:column;align-items:center;gap:8px}
.empty svg.i{width:34px;height:34px;stroke-width:1.4;color:var(--soft)}
.sk{background:linear-gradient(90deg,var(--sk1) 25%,var(--sk2) 50%,var(--sk1) 75%);background-size:400% 100%;animation:shimmer 1.3s infinite;border-radius:var(--r)}
.sk-card{height:96px}
.sk-big{height:240px}

/* списки и таблицы */
.list{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--line);min-width:0}
.row:last-child{border-bottom:0}
.row .main{flex:1;min-width:0}
.row .ttl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .meta{font-size:12.5px;color:var(--muted)}
.row .amt{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.row.click{cursor:pointer;border-radius:8px;transition:background .12s}
.row.click:hover{background:var(--gray2)}
.dot{width:10px;height:10px;border-radius:50%;flex:none}
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:8px;border-bottom:1px solid var(--line);white-space:nowrap}
th{color:var(--muted);font-weight:500;font-size:12.5px}
td.num,th.num{text-align:right}
tr.click{cursor:pointer}
tr.click:hover td{background:var(--gray2)}
.badge{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border-radius:99px;font-size:12px;font-weight:500;background:var(--gray2);color:var(--muted);white-space:nowrap}
.badge.acc{background:var(--acc2);color:var(--acc-d)}
.badge.bad{background:var(--red2);color:var(--red)}
.badge.ok{background:var(--green2);color:var(--green)}
.badge.warn{background:var(--amber2);color:var(--amber)}
.chk{width:22px;height:22px;border:2px solid var(--line2);border-radius:7px;flex:none;cursor:pointer;display:grid;place-items:center;background:var(--card);color:#fff;transition:background .15s,border-color .15s,transform .1s}
.chk:hover{border-color:var(--green)}
.chk:active{transform:scale(.9)}
.chk.on{background:var(--green-s);border-color:var(--green-s)}
.chk svg.i{width:14px;height:14px;stroke-width:3}
.done .ttl{text-decoration:line-through;color:var(--muted)}
.prio{width:8px;height:8px;border-radius:50%;background:var(--red);display:inline-block;margin-right:6px;vertical-align:1px}

/* прогресс */
.bar{height:8px;background:var(--gray2);border-radius:99px;overflow:hidden}
.bar>i{display:block;height:100%;background:var(--acc);border-radius:99px;transform-origin:left;animation:growX .5s var(--ease)}
.bar.ok>i{background:var(--green-s)}.bar.bad>i{background:var(--red-s)}.bar.warn>i{background:#d98a12}
.macro{margin-bottom:11px}
.macro .top-line{display:flex;justify-content:space-between;font-size:13px;margin-bottom:5px}

/* графики */
.chart{width:100%;height:auto;display:block}
.chart text{fill:var(--muted);font-size:11px;font-family:inherit}
.chart .gridline{stroke:var(--viz-grid);stroke-width:1}
.chart rect{transform-box:fill-box;transform-origin:bottom;animation:grow .45s var(--ease)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-top:6px}
.legend span{display:inline-flex;align-items:center;gap:6px}

/* привычки */
.hgrid{display:grid;grid-template-columns:minmax(120px,1fr) repeat(7,38px) 64px;gap:6px;align-items:center}
.hgrid .hd{font-size:11.5px;color:var(--muted);text-align:center}
.hgrid .chk{margin:0 auto;width:28px;height:28px}
@media (max-width:640px){.hgrid{grid-template-columns:minmax(80px,1fr) repeat(7,30px)}.hgrid .streak{display:none}.hgrid .chk{width:24px;height:24px}}

/* модальное окно */
dialog{border:1px solid var(--line);border-radius:18px;padding:0;background:var(--card);color:var(--text);width:min(560px,calc(100vw - 20px));max-height:calc(100dvh - 30px);box-shadow:var(--sh-lg);overscroll-behavior:contain}
dialog[open]{animation:pop .25s var(--ease)}
dialog::backdrop{background:rgba(15,12,30,.45);backdrop-filter:blur(2px)}
.modal{padding:20px 20px 16px;display:grid;gap:12px}
.modal h3{margin:0 0 2px;font-size:18px}
.fld label{display:block;font-size:13px;color:var(--muted);margin-bottom:5px;font-weight:500}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.frow3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.frow4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:6px}
.modal-actions .left{margin-right:auto}
.ex-row{display:grid;grid-template-columns:1fr 60px 60px 70px 34px;gap:6px;margin-bottom:6px}
.ex-row input{padding:7px 8px}

/* уведомления */
#toasts{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:8px;z-index:70;align-items:flex-end;pointer-events:none}
.toast{display:flex;align-items:center;gap:10px;background:var(--ink);color:#fff;padding:11px 15px;border-radius:12px;max-width:420px;box-shadow:var(--sh-lg);animation:toastIn .3s var(--ease) both;pointer-events:auto;cursor:pointer}
.toast.out{animation:toastOut .25s ease-in both}
.toast.err{background:var(--red-s)}.toast.ok{background:var(--green-s)}

/* темы */
.theme-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.theme-group{font-size:12px;font-weight:600;color:var(--muted);margin:12px 0 6px;text-transform:uppercase;letter-spacing:.04em}
.theme-group:first-of-type{margin-top:0}
.theme-opt{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:10px;cursor:pointer;border:1px solid var(--line);background:var(--card);text-align:left}
.theme-opt:hover{background:var(--gray2)}
.theme-opt.on{border-color:var(--acc);background:var(--acc2)}
.theme-sw{width:46px;height:30px;border-radius:8px;border:1px solid var(--line2);display:flex;overflow:hidden;flex-shrink:0}
.theme-sw i{flex:1}
.theme-opt b{display:block;font-weight:600}
.theme-opt .muted{font-size:12px}

.note-card{white-space:pre-wrap}
.note-card .body{color:var(--muted);font-size:14px;max-height:160px;overflow:hidden}
.kpi-sm{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.kpi-sm b{color:var(--text);font-size:15px}

/* анимации */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.96) translateY(6px)}to{opacity:1;transform:none}}
@keyframes toastIn{from{transform:translateY(12px) scale(.96);opacity:0}to{transform:none;opacity:1}}
@keyframes toastOut{to{transform:translateX(30px);opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shimmer{from{background-position:100% 0}to{background-position:0 0}}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes growX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes loadbar{from{transform:translateX(-100%)}to{transform:translateX(260%)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* телефон: нижняя панель + выезжающее меню */
@media (max-width:860px){
  .side{position:fixed;inset:0 auto 0 0;height:100%;transform:translateX(-100%);transition:transform .22s var(--ease);box-shadow:var(--sh-lg)}
  .side.open{transform:none}
  .scrim.open{display:block;position:fixed;inset:0;background:rgba(15,12,30,.4);z-index:25;animation:fadeIn .2s}
  .top .menu-btn{display:inline-flex}
  .top{padding:8px 12px;padding-top:max(8px,env(safe-area-inset-top))}
  .top h2{font-size:18.5px}
  .top-actions .btn{padding:7px 11px}
  .view{padding:14px 12px 96px}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .tabbar a,.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--muted);padding:4px 0;font-weight:500;background:none;border:0;cursor:pointer}
  .tabbar svg.i{width:21px;height:21px}
  .tabbar a.on{color:var(--acc)}
  #toasts{left:12px;right:12px;bottom:80px;align-items:stretch}
  .toast{max-width:none}
  td{white-space:normal}
  th,td{padding:7px 5px}
  .hide-m{display:none!important}
}
@media (max-width:420px){.top-actions .btn:not(.primary) .lbl{display:none}}

/* ===== быстрый ввод: шторки, плитки, чипы ===== */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line2);background:var(--card);border-radius:99px;padding:8px 13px;cursor:pointer;font-weight:500;font-size:14px;transition:background .12s,border-color .12s,transform .08s;user-select:none;color:var(--text)}
.chip:active{transform:scale(.95)}
.chip.on{background:var(--acc2);border-color:var(--acc);color:var(--acc-d)}
.chip .dot{width:9px;height:9px}
.chips.scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -2px;padding:2px}
.chips.scroll::-webkit-scrollbar{display:none}
.chips.scroll .chip{flex-shrink:0}
.amount-in{font-size:34px!important;font-weight:700;letter-spacing:-.02em;text-align:center;padding:10px!important;font-variant-numeric:tabular-nums}
.hint{font-size:12.5px;color:var(--muted);text-align:center}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.tile{display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 4px;border:1px solid var(--line);background:var(--card);border-radius:16px;cursor:pointer;font-size:12.5px;font-weight:500;color:var(--text);transition:transform .08s,background .12s}
.tile:active{transform:scale(.95);background:var(--gray2)}
.tile .ti{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--acc2);color:var(--acc-d)}
.tile .ti svg.i{width:22px;height:22px}
.tile.red .ti{background:var(--red2);color:var(--red)}.tile.green .ti{background:var(--green2);color:var(--green)}
.tile.amber .ti{background:var(--amber2);color:var(--amber)}.tile.blue .ti{background:var(--blue2);color:var(--blue)}
.big-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.big-act{display:flex;align-items:center;justify-content:center;gap:9px;padding:15px 10px;border-radius:14px;border:1px solid var(--line2);background:var(--card);font-weight:600;cursor:pointer;color:var(--text);font-size:15px}
.big-act.primary{background:var(--acc-s);border-color:var(--acc-s);color:#fff}
.big-act svg.i{width:22px;height:22px}
.big-act:active{transform:scale(.97)}
.food-items{display:flex;flex-direction:column;gap:8px}
.food-it{border:1px solid var(--line);border-radius:12px;padding:10px;display:grid;grid-template-columns:1fr 78px 30px;gap:6px;align-items:center}
.food-it input{padding:7px 9px}
.food-it .nut{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.food-it .nut label{font-size:11px;color:var(--muted);display:block;margin-bottom:2px}
.food-total{display:flex;justify-content:space-between;font-weight:600;padding:4px 2px}
.photo-prev{width:100%;max-height:200px;object-fit:cover;border-radius:12px}
.spin{width:28px;height:28px;border:3px solid var(--acc2);border-top-color:var(--acc);border-radius:50%;animation:spin .8s linear infinite;margin:10px auto}
.copybox{display:flex;gap:6px}
.copybox input{font-size:12.5px;font-family:ui-monospace,Menlo,monospace}
.steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:14px}
.steps b{font-weight:600}
details.help summary{cursor:pointer;color:var(--acc);font-weight:500;font-size:14px;padding:4px 0}
details.help[open] summary{margin-bottom:8px}
.imp-row{display:grid;grid-template-columns:26px 1fr auto;gap:8px;align-items:center;padding:9px 2px;border-bottom:1px solid var(--line)}
.imp-row select{padding:5px 8px;font-size:13px;margin-top:4px}
.imp-row.off{opacity:.45}
.imp-row input[type=checkbox]{width:20px;height:20px}
.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--soft);margin-right:6px}
.status-dot.on{background:var(--green-s)}
.tabbar .fab{flex:0 0 auto;width:54px;height:54px;margin:-20px 6px 0;border-radius:18px;background:var(--acc-s);color:#fff;display:grid;place-items:center;box-shadow:0 6px 18px rgba(79,70,229,.35);padding:0}
.tabbar .fab svg.i{width:26px;height:26px;stroke-width:2.4}
.tabbar .fab:active{transform:scale(.94)}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}

/* ===== телефон ===== */
@media (max-width:860px){
  input,select,textarea{font-size:16px}  /* иначе iPhone приближает экран при вводе */
  .side{height:100%}
  dialog{width:100%;max-width:100%;margin:auto 0 0;border-radius:22px 22px 0 0;max-height:94dvh;border-bottom:0}
  dialog[open]{animation:sheetUp .3s var(--ease)}
  .modal{padding:6px 16px calc(14px + env(safe-area-inset-bottom))}
  .modal::before{content:"";width:40px;height:5px;border-radius:9px;background:var(--line2);justify-self:center;margin-bottom:4px}
  .modal-actions{position:sticky;bottom:calc(-14px - env(safe-area-inset-bottom));background:var(--card);padding:10px 0 4px;margin:0;z-index:2}
  .modal-actions .btn{flex:1;padding:12px 10px}
  .modal-actions .left{flex:0 0 auto}
  .row{min-height:50px}
  .row.click,.chk{touch-action:manipulation}
  .chk{width:26px;height:26px}
  .btn{min-height:40px}
  .seg button{padding:8px 12px}
  .card{padding:14px}
  .stat .val{font-size:21px}
  .frow4{grid-template-columns:repeat(2,1fr)}
  .tiles{grid-template-columns:repeat(4,1fr);gap:8px}
  .toolbar{gap:8px}
  .toolbar select{flex:1;min-width:0}
  .toolbar > .seg{flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none}
  .toolbar > .seg::-webkit-scrollbar{display:none}
  .toolbar > .seg button{flex-shrink:0}
}
/* на телефоне «залипающий» hover не красит нажатые элементы */
@media (hover:none){.btn:not(.primary):not(.ghost):hover{background:var(--card)}.btn.ghost:hover,.icon-btn:hover,.row.click:hover{background:transparent}a.card:hover,.card.click:hover{box-shadow:var(--sh);border-color:var(--line)}}