:root{
  color-scheme:light;
  --bg:#f1eee6; --card:#fffdf8; --line:#e3ded1; --line2:#d4cdba;
  --ink:#1b2a24; --mut:#66756d; --faint:#98a49c;
  --pine:#0e6b57; --pine-d:#0a5343; --amber:#e8a020; --amber-d:#9a6a08; --danger:#d64545;
  --cold:#2b7fd4; --hot:#e05a38; --energy:#d99a0d; --drain:#7a5af5;
  --fd:ui-rounded,'Arial Rounded MT Bold','Arial Black',sans-serif; --fb:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --fm:ui-monospace,'SFMono-Regular',Consolas,monospace;
  --tabbar-h:60px; --sbw:272px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--fb);font-size:15px;line-height:1.45;overscroll-behavior-y:none}
button{font-family:inherit;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;color:inherit}
input,select,textarea{font-family:inherit;color:var(--ink)}
select{appearance:none;-webkit-appearance:none;width:100%;min-height:52px;border:1.5px solid var(--line2);border-radius:13px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%2398a49c' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center/15px;
  padding:10px 36px 10px 13px;font-size:16px;font-family:var(--fm)}
select:focus{outline:none;border-color:var(--pine);box-shadow:0 0 0 3px rgba(14,107,87,.15)}
.bg-deco{position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(620px 320px at 105% -5%,rgba(43,127,212,.09),transparent 70%),
  radial-gradient(520px 320px at -10% 34%,rgba(224,90,56,.07),transparent 70%),
  radial-gradient(760px 420px at 50% 108%,rgba(14,107,87,.10),transparent 70%),
  repeating-linear-gradient(0deg,transparent 0 31px,rgba(20,40,32,.03) 31px 32px)}
.app{max-width:560px;margin:0 auto;padding:0 14px}

/* ── шапка ── */
.hdr{display:flex;align-items:center;gap:12px;padding:16px 2px 8px}
.logo{width:46px;height:46px;flex:0 0 auto;background:linear-gradient(160deg,#12795f,#0a5343);border-radius:14px;display:grid;place-items:center;box-shadow:0 8px 18px -8px rgba(14,107,87,.65)}
.logo svg{width:30px;height:30px}
.logo .ring{fill:none;stroke:rgba(255,255,255,.55);stroke-width:1.6;stroke-dasharray:2 4.6}
.logo .needle{stroke:#fff;stroke-width:2.4;stroke-linecap:round;transform-origin:24px 24px;animation:swing 5.5s ease-in-out infinite alternate}
.logo .pin{fill:#fff}
@keyframes swing{from{transform:rotate(-52deg)}to{transform:rotate(52deg)}}
.brand b{font-family:var(--fd);font-weight:800;font-size:17px;display:block;letter-spacing:.02em}
.brand small{font-size:11px;color:var(--faint);letter-spacing:.09em;text-transform:uppercase}
.chip-month{margin-left:auto;text-align:right;background:var(--card);border:1px solid var(--line);border-radius:13px;padding:7px 14px;box-shadow:0 3px 10px -6px rgba(20,40,32,.25)}
.chip-month small{display:block;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip-month b{font-family:var(--fd);font-size:16px;font-weight:800;color:var(--pine)}
.sub-date{font-size:12px;color:var(--mut);padding:0 2px 12px}

/* ── панели  */
.panel{display:none;padding-bottom:104px}
.panel.active{display:block;animation:fadeUp .32s cubic-bezier(.25,.7,.3,1) both}
#panel-input{padding-bottom:150px}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.p-head{padding:4px 2px 14px}
.p-head h2{font-family:var(--fd);font-weight:800;font-size:21px}
.p-head p{color:var(--mut);font-size:13px;margin-top:5px}
.sec-lbl{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin:16px 2px 10px}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:0 4px 16px -12px rgba(20,40,32,.3)}

/* ── чипы ── */
.hchips,.ychips{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none}
.hchips::-webkit-scrollbar,.ychips::-webkit-scrollbar{display:none}
.hchips{margin-bottom:6px}.ychips{margin-bottom:8px}
.hchip,.ychip{border:1.5px solid var(--line2);background:#fff;border-radius:20px;padding:9px 17px;font-size:13px;font-weight:700;color:var(--mut);flex:0 0 auto;min-height:40px;display:flex;align-items:center;gap:7px}
.hchip svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.hchip.on,.ychip.on{background:var(--ink);border-color:var(--ink);color:#fff}

/* ── параметры ── */
.params-head{width:100%;display:flex;align-items:center;gap:10px;background:none;border:none;min-height:44px;text-align:left;color:var(--ink)}
.p-title{font-weight:800;font-size:15px;color:var(--ink)}
.p-summary{margin-left:auto;font-size:12px;font-family:var(--fm);color:var(--mut)}
.p-summary.warn{color:var(--amber-d);font-weight:700}
.chev{width:20px;height:20px;stroke:var(--faint);fill:none;stroke-width:2;stroke-linecap:round;transition:transform .3s;flex:0 0 auto}
.params.open .chev{transform:rotate(180deg)}
.pb{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s cubic-bezier(.3,.7,.3,1)}
.params.open .pb{grid-template-rows:1fr}
.pb>div{overflow:hidden}
.fld-lbl{display:block;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:16px 0 7px}
.date-btn{width:100%;min-height:54px;display:flex;align-items:center;gap:10px;border:1.5px solid var(--line2);border-radius:13px;background:#fff;padding:0 14px;font-weight:600;color:var(--ink)}
.date-btn svg.cal{width:19px;height:19px;stroke:var(--pine);fill:none;stroke-width:1.8;stroke-linecap:round;flex:0 0 auto}
.date-btn b{font-family:var(--fm);font-weight:600;font-size:15.5px}
.date-btn .chev{margin-left:auto}
.date-btn:active{background:#f2efe4}
.pick{margin-top:13px}
.pick label{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:7px}
.pick label .dot{width:8px;height:8px;border-radius:50%;background:var(--acc);flex:0 0 auto}
.auto-tag{margin-left:auto;font-size:9px;font-weight:800;letter-spacing:.1em;padding:3px 8px;border-radius:6px;text-transform:uppercase}
.auto-tag.a{color:var(--pine);background:rgba(14,107,87,.12)}
.auto-tag.m{color:var(--amber-d);background:rgba(232,160,32,.16)}
.pick.mismatch select{border-color:var(--amber);background-color:#fff9ec;box-shadow:0 0 0 3px rgba(232,160,32,.18)}
.pick-warn{display:none;margin-top:6px;font-size:12px;color:var(--amber-d);font-weight:600}
.pick.mismatch .pick-warn{display:block}
.note-mis{display:none;margin-top:14px;background:rgba(232,160,32,.12);border:1px solid rgba(232,160,32,.5);color:var(--amber-d);border-radius:12px;padding:10px 13px;font-size:12.5px;font-weight:600}
.note-mis.show{display:block}

/* ── счётчики ── */
.meters{display:flex;flex-direction:column;gap:14px}
.meter{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:15px 15px 14px;position:relative;overflow:hidden;box-shadow:0 4px 16px -12px rgba(20,40,32,.3)}
.meter::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--acc)}
.meter.err{animation:shake .45s}
@keyframes shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.m-head{display:flex;align-items:center;gap:9px;margin:4px 0 12px}
.m-head>svg{width:20px;height:20px;fill:var(--acc);flex:0 0 auto}
.m-name{font-weight:800;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-tag{font-size:9.5px;font-weight:800;letter-spacing:.12em;color:var(--acc);background:color-mix(in srgb,var(--acc) 12%,#fff);padding:3px 8px;border-radius:6px;flex:0 0 auto}
.m-prev{margin-left:auto;display:flex;align-items:center;gap:6px;background:#f2efe4;border:1px solid var(--line);border-radius:20px;padding:7px 12px;font-size:11.5px;color:var(--mut);min-height:36px}
.m-prev b{font-family:var(--fm);font-size:12.5px;color:var(--ink)}
.m-prev svg{width:14px;height:14px;stroke:var(--acc);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.m-prev:active{transform:scale(.96);background:#ebe7d8}
.odo{--ch:44px;display:flex;align-items:center;gap:4px;background:#233229;border-radius:13px;padding:10px;box-shadow:inset 0 3px 12px rgba(0,0,0,.45);overflow-x:auto;scrollbar-width:none}
.odo::-webkit-scrollbar{display:none}
.ocell{position:relative;width:30px;height:var(--ch);flex:0 0 auto;background:linear-gradient(#fdfcf7,#e8e5d8);border-radius:6px;overflow:hidden;font-family:var(--fm);font-weight:700;font-size:23px;color:#182420}
.ocell::after{content:'';position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.22),transparent 30% 70%,rgba(0,0,0,.22));pointer-events:none}
.odec{background:linear-gradient(color-mix(in srgb,var(--acc) 30%,#fff),color-mix(in srgb,var(--acc) 16%,#fff));color:color-mix(in srgb,var(--acc) 72%,#000)}
.oreel{display:block;transition:transform .55s cubic-bezier(.3,.85,.3,1)}
.odigit{display:block;height:var(--ch);line-height:var(--ch);text-align:center}
.osep{color:rgba(255,255,255,.55);font-family:var(--fm);font-weight:700;font-size:20px;padding:0 1px}
@media(max-width:380px){.odo{--ch:38px}.ocell{width:26px;font-size:20px}}
.m-controls{display:flex;gap:9px;margin-top:12px}
.step{width:56px;height:56px;flex:0 0 auto;border-radius:15px;border:1.5px solid var(--line2);background:#fff;font-family:var(--fd);font-weight:700;font-size:15px;color:var(--ink);transition:transform .12s}
.step:active{transform:scale(.93);background:#f2efe4}
.m-val{flex:1;min-width:0;height:56px;border:1.5px solid var(--line2);border-radius:15px;background:#fff;font-family:var(--fm);font-weight:600;font-size:21px;text-align:center}
.m-val:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 22%,transparent)}
.m-val::placeholder{color:#c2beb0}
.m-live{margin-top:10px;font-size:12.5px;font-family:var(--fm);color:var(--mut);min-height:18px}
.m-live.bad{color:var(--danger);font-weight:700;font-family:var(--fb);font-size:13px}

/* ── док ── */
.dock{position:fixed;bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 10px);left:50%;transform:translateX(-50%);width:calc(100% - 24px);max-width:536px;background:var(--card);border:1px solid var(--line);border-radius:17px;box-shadow:0 14px 34px -14px rgba(20,40,32,.45);display:flex;align-items:center;gap:12px;padding:10px 10px 10px 17px;z-index:55;transition:transform .3s,opacity .3s}
.dock.hide{transform:translate(-50%,26px);opacity:0;pointer-events:none}
.dt small{display:block;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.dt b{font-family:var(--fd);font-weight:800;font-size:18px}
.dock .btn-prime{flex:1;height:52px}
.btn-prime{border:none;border-radius:14px;background:linear-gradient(160deg,#12795f,#0a5343);color:#fff;font-family:var(--fd);font-weight:700;font-size:13.5px;letter-spacing:.05em;text-transform:uppercase;box-shadow:0 10px 22px -8px rgba(14,107,87,.55);transition:transform .12s}
.btn-prime:active{transform:scale(.97)}
.btn-prime.done{background:#2fae6b}

/* ── таб-бар / сайдбар ── */
.tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:560px;background:rgba(255,253,248,.95);backdrop-filter:blur(10px);border-top:1px solid var(--line);display:flex;z-index:60;padding-bottom:env(safe-area-inset-bottom)}
.tabbar button{flex:1;background:none;border:none;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0 9px;font-size:10px;font-weight:700;color:var(--faint);transition:color .2s,background .2s}
.tabbar button .ti{width:54px;height:34px;border-radius:17px;display:grid;place-items:center;transition:background .25s}
.tabbar button svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tabbar button.active{color:var(--pine)}
.tabbar button.active .ti{background:rgba(14,107,87,.14)}
.sb-brand{display:none}

/* ── тарифы ── */
.rblock{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:15px;margin-bottom:14px;box-shadow:0 4px 16px -12px rgba(20,40,32,.3)}
.rb-head{display:flex;align-items:center;gap:11px}
.rb-ic{width:40px;height:40px;flex:0 0 auto;border-radius:12px;background:color-mix(in srgb,var(--acc) 13%,#fff);display:grid;place-items:center}
.rb-ic svg{width:21px;height:21px;fill:var(--acc)}
.rb-head h3{font-size:15px;font-weight:800}
.rb-head small{display:block;font-size:11px;color:var(--faint)}
.rb-now{margin-left:auto;text-align:right;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.rb-now b{display:block;font-family:var(--fd);font-size:17px;color:var(--acc)}
.trow{display:flex;align-items:center;gap:10px;padding:12px 4px;margin-top:10px;border-top:1px solid var(--line);min-height:60px;cursor:pointer}
.trow.now{background:color-mix(in srgb,var(--acc) 8%,#fff);border-radius:12px;padding-left:10px;padding-right:6px;border-top-color:transparent}
.trow:active{background:#f2efe4;border-radius:12px}
.tv{font-family:var(--fm);font-weight:700;font-size:17px;min-width:86px}
.tv small{font-size:10px;color:var(--faint);font-weight:500}
.tm{flex:1;min-width:0}
.tp{font-family:var(--fm);font-size:11.5px;color:var(--mut)}
.badges{display:flex;gap:5px;margin-top:5px;flex-wrap:wrap}
.badge{font-size:8.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;padding:3px 7px;border-radius:5px}
.badge.b-now{color:var(--pine);background:rgba(14,107,87,.13)}
.badge.b-past{color:var(--faint);background:#efece1}
.badge.b-future{color:#2b6cb0;background:rgba(43,127,212,.13)}
.badge.b-overlap{color:var(--amber-d);background:rgba(232,160,32,.18)}
.badge.b-bad{color:var(--danger);background:rgba(214,69,69,.12)}
.badge.b-house{color:var(--drain);background:rgba(122,90,245,.12)}
.badge.b-nohouse{color:var(--danger);background:rgba(214,69,69,.12)}
.badge.b-err{color:var(--danger);background:rgba(214,69,69,.12)}
.badge.b-base{color:var(--faint);background:#efece1}
.badge.b-info{color:#2b6cb0;background:rgba(43,127,212,.12)}
.badge.b-tar{color:var(--amber-d);background:rgba(232,160,32,.16)}
.badge.b-man{color:var(--pine);background:rgba(14,107,87,.12)}
.tdel{width:40px;height:40px;flex:0 0 auto;border-radius:11px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;color:var(--faint)}
.tdel svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
.tdel.armed{width:auto;padding:0 12px;background:var(--danger);border-color:var(--danger);color:#fff;font-size:11px;font-weight:800}
.add-btn{width:100%;height:50px;margin-top:12px;border:1.5px dashed var(--line2);border-radius:13px;background:none;color:var(--mut);font-weight:700;font-size:14px}
.add-btn:active{background:#f2efe4}

/* ── шторка ── */
.sheet-ov{position:fixed;inset:0;background:rgba(24,32,28,.5);opacity:0;pointer-events:none;transition:opacity .25s;z-index:80}
.sheet-ov.open{opacity:1;pointer-events:auto}
.sheet{--sx:-50%;position:fixed;left:50%;bottom:0;transform:translate(var(--sx),105%);width:100%;max-width:520px;background:var(--card);border-radius:22px 22px 0 0;z-index:90;
  transition:transform .36s cubic-bezier(.32,.72,.25,1);padding:0 20px calc(22px + env(safe-area-inset-bottom));box-shadow:0 -12px 44px rgba(0,0,0,.2);
  max-height:88vh;max-height:calc(100dvh - 20px);overflow-y:auto;overscroll-behavior:contain}
.sheet.open{transform:translate(var(--sx),0)}
.grab-zone{padding:10px 0 6px;margin:0 -20px 0;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;display:flex;justify-content:center;position:sticky;top:0;background:linear-gradient(var(--card) 78%,transparent);z-index:2}
.grab{width:44px;height:5px;border-radius:5px;background:var(--line2)}
.sheet h3{font-family:var(--fd);font-size:16px;font-weight:700;display:flex;align-items:center;gap:9px}
.sheet h3 svg{width:20px;height:20px;fill:var(--acc,currentColor)}
.sh-f label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:16px 0 7px}
.tin{width:100%;height:54px;border:1.5px solid var(--line2);border-radius:13px;background:#fff;padding:0 14px;font-size:17px;font-family:var(--fm)}
.tin:focus{outline:none;border-color:var(--pine);box-shadow:0 0 0 3px rgba(14,107,87,.15)}
.tin.txt{font-family:var(--fb);font-size:15px}
.sh-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sh-save{width:100%;height:56px;margin-top:20px;font-size:14px}
.qchips{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.qchip{border:1.5px solid var(--line2);background:#fff;border-radius:20px;padding:10px 17px;font-size:13px;font-weight:700;color:var(--mut)}
.qchip:active{background:#f2efe4}
.dsel{display:flex;gap:8px}
.dsel select{flex:1;min-height:50px;padding:8px 30px 8px 10px;font-size:15px;background-position:right 8px center;background-size:13px}
.chk{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:14px;font-weight:600;color:var(--ink)}
.chk input{width:22px;height:22px;accent-color:var(--pine);flex:0 0 auto}
.erow{margin-top:13px;border:1px solid var(--line);border-radius:14px;padding:12px;background:#fff}
.erow .el{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--acc);margin-bottom:9px}
.erow .el svg{width:14px;height:14px;fill:var(--acc)}
.erow select{margin-top:9px;min-height:48px;font-size:14.5px}
.erow .ecalc{margin-top:8px;font-size:11.5px;color:var(--faint);font-family:var(--fm)}
.sh-hint{margin-top:14px;font-size:12px;color:var(--faint)}
.sh-grp{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:18px 0 4px}
.tr-check{display:flex;align-items:center;gap:11px;padding:11px 4px;border-bottom:1px solid var(--line);font-size:13px;min-height:48px}
.tr-check:last-child{border-bottom:none}
.tr-check input{width:22px;height:22px;accent-color:var(--pine);flex:0 0 auto}
.tr-check .tcv{font-family:var(--fm);font-weight:700;min-width:74px}
.tr-check .tcp{color:var(--mut);font-family:var(--fm);font-size:11.5px}
.pay-diff{margin-top:13px;font-size:14px;font-weight:600;color:var(--mut);min-height:20px}
.pay-diff b{font-family:var(--fm)}
.pd-eq{color:var(--pine)}.pd-over{color:var(--amber-d)}.pd-under{color:var(--danger)}
.prow{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.prow:last-of-type{border-bottom:none}
.prow .pl{flex:1;min-width:0;display:flex;align-items:center;gap:7px;font-size:12px;font-weight:800;color:var(--acc)}
.prow .pl svg{width:14px;height:14px;fill:var(--acc);flex:0 0 auto}
.prow .pl small{display:block;font-family:var(--fm);font-weight:600;color:var(--mut);font-size:11px}
.prow input{width:118px;flex:0 0 auto;height:48px;font-size:16px}
.prow .pdiff{width:86px;flex:0 0 auto;text-align:right;font-family:var(--fm);font-size:11.5px;font-weight:700}
.rc-item{border:1px solid var(--line);border-radius:14px;padding:12px 12px 10px;margin-top:12px;background:#fff}
.rc-head{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mut)}
.rc-head b{font-family:var(--fm);font-size:14px;color:var(--ink)}
.rc-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px dashed var(--line);font-size:12px;color:var(--mut);margin-top:7px}
.rc-row .rl{flex:1;min-width:0;display:flex;align-items:center;gap:6px;font-weight:800;font-size:11px;color:var(--acc);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-row .rl svg{width:13px;height:13px;fill:var(--acc);flex:0 0 auto}
.rc-row .rv{font-family:var(--fm);font-size:11.5px;white-space:nowrap}
.rc-row .rd{font-family:var(--fm);font-weight:700;font-size:11.5px;padding:3px 8px;border-radius:7px;white-space:nowrap}
.rd.eq{color:var(--pine);background:rgba(14,107,87,.12)}
.rd.over{color:var(--amber-d);background:rgba(232,160,32,.16)}
.rd.under{color:var(--danger);background:rgba(214,69,69,.12)}
.frm-in{width:100%;min-height:54px;border:1.5px solid var(--line2);border-radius:13px;background:#fff;padding:12px 13px;font-family:var(--fm);font-size:15px}
.frm-in:focus{outline:none;border-color:var(--pine);box-shadow:0 0 0 3px rgba(14,107,87,.15)}
.frm-prev{margin-top:8px;font-size:12.5px;font-family:var(--fm);color:var(--mut)}
.frm-prev.bad{color:var(--danger)}
.ic-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.ic-ch{width:44px;height:44px;border-radius:12px;border:1.5px solid var(--line2);background:#fff;display:grid;place-items:center;color:var(--mut)}
.ic-ch svg{width:20px;height:20px;fill:currentColor}
.ic-ch.on{border-color:var(--pine);background:rgba(14,107,87,.1);color:var(--pine)}
.cl-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:8px}
.cl-ch{width:34px;height:34px;border-radius:50%;border:2px solid transparent;background:var(--c);box-shadow:inset 0 0 0 2px #fffdf8}
.cl-ch.on{border-color:var(--ink)}

/* ── журнал ── */
.pay-banner{display:flex;align-items:center;gap:12px;background:linear-gradient(120deg,#fff6dd,#fffdf8);border:1px solid rgba(232,160,32,.45);border-radius:16px;padding:12px 14px;margin-bottom:12px;animation:fadeUp .35s both;cursor:pointer;transition:transform .15s}
.pay-banner:active{transform:scale(.99)}
.pay-banner .pbi{width:38px;height:38px;border-radius:12px;background:rgba(232,160,32,.18);display:grid;place-items:center;color:#b97e07;flex:0 0 auto}
.pay-banner .pbi svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pb-t{flex:1;min-width:0}
.pb-t b{font-size:13px;display:block}
.pb-t small{font-size:11px;color:var(--mut);display:block;margin-top:2px}
.pb-v{text-align:right;flex:0 0 auto}
.pb-v b{font-family:var(--fd);font-size:16px;display:block}
.pb-v span{font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.pb-v.eq b,.pb-v.eq span{color:var(--pine)}
.pb-v.over b,.pb-v.over span{color:var(--amber-d)}
.pb-v.under b,.pb-v.under span{color:var(--danger)}
.stats-row{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:14px}
.stat{flex:1 1 30%;min-width:100px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:11px 13px;box-shadow:0 4px 14px -12px rgba(20,40,32,.3)}
.stat small{display:block;font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:3px}
.stat b{font-family:var(--fd);font-weight:800;font-size:14px}
.stat.c1 b{color:var(--pine)}.stat.c2 b{color:var(--cold)}.stat.c3 b{color:var(--hot)}.stat.c4 b{color:var(--energy)}
.jcard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:13px 14px 10px;margin-bottom:11px;box-shadow:0 4px 16px -12px rgba(20,40,32,.3);animation:fadeUp .4s both}
.jc-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.jc-date b{font-family:var(--fm);font-size:15px}
.jc-date i{font-style:normal;font-size:12px;color:var(--faint)}
.jh-tag{font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--pine);background:rgba(14,107,87,.1);padding:3px 8px;border-radius:6px}
.jc-act{margin-left:auto;display:flex;gap:6px}
.jc-edit,.jc-del,.jc-payb{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--faint);display:grid;place-items:center}
.jc-edit svg,.jc-payb svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.jc-edit:active{background:#f2efe4;color:var(--pine)}
.jc-payb{border-color:rgba(232,160,32,.5);background:#fff6dd;color:#b97e07}
.jc-payb:active{transform:scale(.94)}
.jc-payb.has{background:var(--amber);border-color:var(--amber);color:#fff}
.jc-del{font-size:14px}
.jc-del.armed{width:auto;padding:0 12px;background:var(--danger);border-color:var(--danger);color:#fff;font-size:11px;font-weight:800}
.jg{display:grid;grid-template-columns:56px 1fr auto auto;gap:3px 8px;align-items:center}
.jg-h{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding:2px 0 7px}
.jg-h:nth-child(n+3){text-align:right}
.jg-l{display:flex;align-items:center;gap:5px;font-size:9.5px;font-weight:800;color:var(--acc);min-width:0}
.jg-l svg{width:13px;height:13px;fill:var(--acc);flex:0 0 auto}
.jg-l .jn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jg-v{font-family:var(--fm);font-weight:600;font-size:15px}
.jg-v small{font-size:10px;color:var(--faint);font-weight:500}
.jg-d{font-family:var(--fm);font-size:12px;color:var(--mut);text-align:right;white-space:nowrap}
.jg-c{font-family:var(--fm);font-weight:600;font-size:13px;text-align:right;min-width:86px;white-space:nowrap}
.jg-c.first{color:var(--faint);font-size:11px;font-family:var(--fb)}
.jg-c.info{color:var(--faint);font-size:11px;font-family:var(--fb)}
.jc-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:8px;padding-top:9px;border-top:1px dashed var(--line2);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.jc-total+.jc-total{border-top:none;padding-top:2px;margin-top:2px}
.jc-total b{font-family:var(--fd);font-size:15px;color:var(--pine);letter-spacing:0}
.jc-total.en b{color:var(--energy)}
.jc-total.ot b{color:var(--drain)}
.jc-pay{margin-top:8px;padding-top:9px;border-top:1px dashed var(--line2);font-size:12px;color:var(--mut)}
.jp-top{display:flex;align-items:center;gap:8px}
.jc-pay>svg,.jp-top>svg{width:15px;height:15px;stroke:#b97e07;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.jc-pay b{font-family:var(--fm);color:var(--ink)}
.jp-parts{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;padding-left:23px}
.jp-chip{font-family:var(--fm);font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:7px}
.jp-chip.eq{color:var(--pine);background:rgba(14,107,87,.12)}
.jp-chip.over{color:var(--amber-d);background:rgba(232,160,32,.16)}
.jp-chip.under{color:var(--danger);background:rgba(214,69,69,.12)}
.jp-cmt{margin-top:4px;padding-left:23px;font-size:11.5px;color:var(--faint);font-style:italic;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd-badge{margin-left:auto;font-family:var(--fm);font-weight:700;font-size:11.5px;padding:4px 9px;border-radius:8px;white-space:nowrap}
.pd-badge.eq{color:var(--pine);background:rgba(14,107,87,.12)}
.pd-badge.over{color:var(--amber-d);background:rgba(232,160,32,.16)}
.pd-badge.under{color:var(--danger);background:rgba(214,69,69,.12)}
.empty{border:1.5px dashed var(--line2);border-radius:18px;padding:48px 20px;text-align:center;color:var(--mut)}
.empty .ar{display:inline-block;font-size:26px;color:var(--pine);animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-7px)}}
.empty h4{font-family:var(--fd);font-size:15px;margin:12px 0 6px;color:var(--ink)}
.empty p{font-size:13px;color:var(--faint);margin-bottom:18px}

/* ── настройки / копия ── */
.bcard{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;margin-bottom:13px;box-shadow:0 4px 16px -12px rgba(20,40,32,.3)}
.bcard h3{font-size:14px;font-weight:800;display:flex;gap:8px;align-items:center;margin-bottom:5px}
.bcard h3 svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.bcard.hs h3{color:var(--pine)}.bcard.ex h3{color:var(--cold)}.bcard.im h3{color:var(--hot)}.bcard.st h3{color:var(--amber-d)}.bcard.dg h3{color:var(--danger)}.bcard.js h3{color:var(--drain)}.bcard.ms h3{color:var(--energy)}
.bcard>p{font-size:13px;color:var(--mut);margin-bottom:12px}
.hrow,.mrow{display:flex;align-items:center;gap:10px;padding:13px 4px;border-top:1px solid var(--line);margin-top:8px;min-height:56px;cursor:pointer}
.hrow:first-of-type,.mrow:first-of-type{border-top:none;margin-top:4px}
.hrow:active,.mrow:active{background:#f2efe4;border-radius:12px}
.mrow.off{opacity:.5}
.hn{flex:1;min-width:0}
.hn b{font-size:15px;display:block}
.hn small{font-size:11.5px;color:var(--faint)}
.hcur{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--pine);background:rgba(14,107,87,.12);padding:3px 8px;border-radius:6px}
.mi{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:0 0 auto;background:color-mix(in srgb,var(--acc) 13%,#fff)}
.mi svg{width:18px;height:18px;fill:var(--acc)}
.set-row{display:flex;align-items:center;gap:14px;padding:8px 0}
.set-row>div{flex:1}
.set-row b{font-size:14.5px;display:block}
.set-row small{font-size:12px;color:var(--faint);display:block;margin-top:3px}
.switch{width:52px;height:32px;flex:0 0 auto;border-radius:16px;background:#d8d2c2;border:none;position:relative;transition:background .25s}
.switch::after{content:'';position:absolute;width:26px;height:26px;border-radius:50%;background:#fff;top:3px;left:3px;transition:left .25s;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.switch.on{background:var(--pine)}
.switch.on::after{left:23px}
.switch.dis{opacity:.4;pointer-events:none}
.btn-big{width:100%;min-height:52px;border-radius:14px;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:9px;border:1.5px solid var(--line2);background:#fff;color:var(--ink);margin-top:9px;transition:transform .12s}
.btn-big svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.btn-big:active{transform:scale(.98);background:#f2efe4}
.btn-big.prime{background:var(--pine);border-color:var(--pine);color:#fff}
.btn-big.prime:active{background:var(--pine-d)}
.bk-stats dl{display:grid;grid-template-columns:1fr 1fr;gap:13px 20px;margin-bottom:4px}
.bk-stats dt{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.bk-stats dd{font-family:var(--fm);font-weight:600;font-size:16px;margin-top:2px}
.dg .btn-big{border-color:rgba(214,69,69,.45);color:var(--danger)}
.dg .btn-big.armed{background:var(--danger);border-color:var(--danger);color:#fff}

/* ── тосты ── */
#toasts{position:fixed;top:calc(12px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:120;display:flex;flex-direction:column;gap:8px;width:calc(100% - 32px);max-width:420px}
.toast{background:#20302a;color:#eef4f0;border-radius:13px;padding:13px 16px;font-size:14px;font-weight:600;box-shadow:0 14px 32px -10px rgba(0,0,0,.45);border-left:4px solid #4be08d;animation:tin .32s cubic-bezier(.2,.9,.3,1.2) both}
.toast.warn{border-left-color:var(--amber)}
.toast.err{border-left-color:var(--danger)}
@keyframes tin{from{opacity:0;transform:translateY(-18px)}}
.toast.out{opacity:0;transform:translateY(-14px);transition:all .3s}
footer{padding:8px 0 20px;text-align:center;font-size:11px;color:var(--faint)}

/* ═══════════ ДЕСКТОП ═══════════ */
@media(min-width:900px){
  body{font-size:16px;padding-left:var(--sbw)}
  .app{max-width:780px;margin:0 auto;padding:0 28px}
  .tabbar{left:0;top:0;bottom:0;transform:none;width:var(--sbw);max-width:var(--sbw);height:100%;
    flex-direction:column;align-items:stretch;gap:4px;border-top:none;border-right:1px solid var(--line);
    background:rgba(255,253,248,.98);backdrop-filter:none;padding:18px 12px;overflow-y:auto}
  .sb-brand{display:flex;align-items:center;gap:11px;padding:4px 8px 18px}
  .sb-brand .logo{width:44px;height:44px}
  .sb-brand b{font-family:var(--fd);font-weight:800;font-size:16px;display:block}
  .sb-brand small{font-size:10px;color:var(--faint);letter-spacing:.1em;text-transform:uppercase}
  .tabbar button{flex:none;width:100%;flex-direction:row;justify-content:flex-start;gap:12px;padding:11px 12px;font-size:13.5px;border-radius:14px}
  .tabbar button .ti{width:44px;height:44px;border-radius:13px}
  .tabbar button svg{width:24px;height:24px}
  .tabbar button.active{background:rgba(14,107,87,.12)}
  .dock{left:var(--sbw);right:0;transform:none;width:calc(100% - 56px);max-width:724px;margin:0 auto;bottom:18px;padding:12px 12px 12px 20px}
  .dock.hide{transform:translate(0,26px)}
  .dock .btn-prime{height:56px}
  .dt b{font-size:20px}
  .sheet{left:calc((100% + var(--sbw))/2);max-width:560px}
  #toasts{left:calc((100% + var(--sbw))/2)}
  .brand b{font-size:19px}
  .chip-month b{font-size:18px}
  .sub-date{font-size:13px}
  .p-head h2{font-size:26px}
  .p-head p{font-size:14px}
  .card{padding:20px;border-radius:20px}
  .p-title{font-size:16px}
  .date-btn{min-height:58px}
  .date-btn b{font-size:17px}
  .m-name{font-size:16px}
  .odo{--ch:48px}
  .ocell{width:34px;font-size:26px}
  .m-val{height:60px;font-size:23px}
  .step{width:60px;height:60px;font-size:16px}
  .m-prev{min-height:40px;font-size:12.5px}
  .m-live{font-size:13.5px}
  select{min-height:56px;font-size:17px}
  .tin,.frm-in{min-height:58px;height:58px;font-size:18px}
  .tin.txt{font-size:16px}
  .btn-prime{font-size:14.5px}
  .sheet h3{font-size:18px}
  .jg-v{font-size:16px}
  .jg-c{font-size:14px}
  .jg-d{font-size:13px}
  .jc-date b{font-size:16px}
  .stat b{font-size:16px}
  .hchip,.ychip{min-height:44px;font-size:14px}
  .bcard h3{font-size:15px}
  .hn b{font-size:16px}
  .set-row b{font-size:15.5px}
  .btn-big{min-height:56px;font-size:16px}
  .rb-head h3{font-size:16px}
  .tv{font-size:18px}
}

[hidden]{display:none!important}
html{min-height:100%;max-width:100%;overflow-x:clip;background:var(--bg)}
body{min-height:100dvh;max-width:100%;overflow-x:clip;padding-top:env(safe-area-inset-top);text-size-adjust:100%;-webkit-text-size-adjust:100%}
body.sheet-open{overflow:hidden;overscroll-behavior:none}
button,input,select{font-size:max(16px,1rem)}
button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid color-mix(in srgb,var(--pine) 45%,transparent);outline-offset:3px}
.booting{overflow:hidden}.booting::after{content:'';position:fixed;inset:0;background:var(--bg);z-index:300}

.auth-screen{min-height:calc(100dvh - env(safe-area-inset-top));display:grid;grid-template-rows:auto 1fr auto;gap:24px;padding:clamp(22px,5vw,48px) 20px calc(20px + env(safe-area-inset-bottom));background:
radial-gradient(700px 440px at 85% -10%,rgba(43,127,212,.15),transparent 67%),
radial-gradient(620px 460px at -10% 110%,rgba(14,107,87,.18),transparent 65%),var(--bg)}
.auth-brand{display:flex;align-items:center;gap:12px;width:min(100%,430px);margin:0 auto}
.auth-logo{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;color:#fff;background:linear-gradient(155deg,#138268,#084c3e);box-shadow:0 10px 25px -12px rgba(14,107,87,.8)}
.auth-logo svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.auth-brand b{display:block;font-family:var(--fd);font-size:17px}.auth-brand small{display:block;color:var(--mut);font-size:12px;margin-top:2px}
.auth-card{align-self:center;width:min(100%,430px);margin:0 auto;padding:clamp(22px,6vw,34px);background:rgba(255,253,248,.96);border:1px solid var(--line);border-radius:24px;box-shadow:0 28px 70px -35px rgba(20,40,32,.48)}
.auth-kicker{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--pine)}
.auth-card h1{font-family:var(--fd);font-size:clamp(25px,7vw,38px);line-height:1.16;margin:12px 0 10px;letter-spacing:-.025em}
.auth-card>p{color:var(--mut);font-size:15px}.auth-card form{margin-top:22px}.auth-card label{display:block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin:15px 0 7px}
.auth-card input{width:100%;height:56px;border:1.5px solid var(--line2);border-radius:14px;background:#fff;padding:0 14px;font-family:var(--fb)}
.auth-card input:focus{outline:none;border-color:var(--pine);box-shadow:0 0 0 3px rgba(14,107,87,.14)}
.auth-code-row{display:grid;grid-template-columns:1fr auto;gap:8px}.auth-code-row button{border:1.5px solid var(--line2);border-radius:14px;background:#fff;padding:0 12px;font-size:13px;font-weight:700;color:var(--pine)}
#nicknameHelp{display:block;margin-top:7px;font-size:12px;color:var(--faint)}
.auth-submit{width:100%;min-height:56px;border:0;border-radius:15px;background:linear-gradient(155deg,#12795f,#0a5343);color:#fff;font-weight:800;margin-top:20px;box-shadow:0 12px 24px -12px rgba(14,107,87,.8)}
.auth-submit:disabled{opacity:.6}.auth-error{padding:11px 13px;margin-top:14px!important;border-radius:12px;background:rgba(214,69,69,.1);color:var(--danger)!important;font-weight:650}
.auth-help{margin-top:15px!important;font-size:12px!important}.auth-offline{width:100%;min-height:48px;margin-top:10px;border:0;background:transparent;color:var(--pine);font-weight:750}.auth-footer{text-align:center;color:var(--mut);font-size:12px;line-height:1.55}

.brand{min-width:0}.brand-title{display:flex;align-items:center;gap:3px}.sync-status{--sync-color:#30a46c;display:grid;place-items:center;flex:0 0 auto;width:34px;height:34px;margin:-7px -8px -7px 0;border:0;border-radius:50%;background:transparent}.sync-status:hover,.sync-status:focus-visible{background:rgba(14,107,87,.08)}.sync-dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--sync-color);box-shadow:0 0 0 3px color-mix(in srgb,var(--sync-color) 15%,transparent)}.sync-dot::after{content:'';position:absolute;inset:-6px;border:1px solid var(--sync-color);border-radius:50%;opacity:.2}
.sync-status[data-state=syncing]{--sync-color:var(--cold)}.sync-status[data-state=syncing] .sync-dot::after{animation:syncPulse 1.2s ease-out infinite}.sync-status[data-state=warning]{--sync-color:var(--amber)}.sync-status[data-state=conflict]{--sync-color:var(--danger)}
@keyframes syncPulse{50%{transform:scale(.72);opacity:.5}100%{transform:scale(1.25);opacity:0}}
.sub-date{padding-top:0}.account-card h3{color:var(--pine)}.profile{display:flex;align-items:center;gap:12px;margin:14px 0}.profile-avatar{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--pine);color:#fff;font-family:var(--fd);font-size:18px}.profile b{display:block;font-size:16px}.profile small{display:block;color:var(--mut);margin-top:2px}.cloud-detail{font-size:13px!important;line-height:1.5;margin-bottom:10px!important}.logout-button{color:var(--danger);border-color:rgba(214,69,69,.35)}.conflict-button{color:var(--danger);border-color:rgba(214,69,69,.45);background:rgba(214,69,69,.06)}
.version-box{border:1px solid var(--line);border-radius:14px;padding:13px;margin-top:12px;background:#fff}.version-box b{font-size:13px}.version-box p{margin-top:4px;color:var(--mut);font-size:13px;overflow-wrap:anywhere}.danger-button{background:var(--danger);border-color:var(--danger);color:#fff}.sheet{overflow-x:hidden;overscroll-behavior:none;touch-action:pan-y}#sheetBody{min-width:0;max-width:100%;overflow-x:clip}#sheetBody>*{min-width:0}.sheet input,.sheet select,.sheet textarea{max-width:100%}.sheet-close{position:sticky;top:8px;float:right;z-index:4;width:36px;height:36px;border:1px solid var(--line);border-radius:50%;background:var(--card);font-size:14px;font-weight:600;line-height:1;color:var(--faint)}
.saving{cursor:progress}.saving button{pointer-events:none}

@media(max-width:460px){.hdr{gap:9px}.brand{flex:1}.chip-month{margin-left:0}.chip-month small{max-width:105px}.app{padding-left:12px;padding-right:12px}.m-controls{gap:7px}.step{width:52px}.sheet{padding-left:16px;padding-right:16px}.sh-row{grid-template-columns:1fr}}
@media(min-width:900px){.auth-screen{padding-left:calc(var(--sbw) + 20px)}body:has(.auth-screen:not([hidden])){padding-left:0}.auth-card{margin-top:-40px}.sheet-close{top:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}