/* Subscription Manager. Built on the shared RandomZone variables (--surface, --ink, --mut, --line, --a1, --a2 ...), same look as TaskLite. */
:root{--s1:#2a78d6;--s2:#eb6834;--s3:#1baf7a;--s4:#eda100;--s5:#e87ba4;--s6:#008300;--s7:#4a3aa7;--s8:#e34948;--bad:#e5484d;--tabh:64px}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--s1:#3987e5;--s2:#d95926;--s3:#199e70;--s4:#c98500;--s5:#d55181;--s6:#008300;--s7:#9085e9;--s8:#e66767}}
:root[data-theme=dark]{--s1:#3987e5;--s2:#d95926;--s3:#199e70;--s4:#c98500;--s5:#d55181;--s6:#008300;--s7:#9085e9;--s8:#e66767}
.smapp{max-width:1240px;padding-top:22px;padding-bottom:70px}
[hidden]{display:none!important}
#authView,#appView{padding:0}
dialog{margin:auto;border:0;border-radius:20px;padding:0;max-width:min(94vw,600px);width:100%;background:var(--surface);color:var(--ink);box-shadow:var(--shadow-lg);max-height:92vh;overflow:auto}
dialog::backdrop{background:rgba(8,10,28,.7);backdrop-filter:blur(3px)}
.dlg{padding:20px}
.dlg-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.dlg-h h2{font-size:1.25rem;font-weight:850;letter-spacing:-.02em}
.x{border:0;background:var(--surface2);color:var(--ink);width:44px;height:44px;border-radius:12px;font-size:1.2rem;cursor:pointer;flex:none}
.x:hover{background:var(--line)}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible,summary:focus-visible,.subcard:focus-visible,.col:focus-visible,.slice:focus-visible{outline:2px solid var(--a1);outline-offset:2px}
.hint{color:var(--mut);font-size:.82rem}
.btn.sm{min-height:44px;white-space:nowrap}
.btn.danger{background:var(--bad);color:#fff;box-shadow:0 8px 20px rgba(229,72,77,.3)}
.btn[disabled]{opacity:.55;cursor:default;transform:none}
input.in,select.in,textarea.in{font:inherit;font-weight:600;color:var(--ink);background:var(--surface2);border:1px solid var(--line);border-radius:11px;padding:10px 12px;min-height:46px;width:100%}
textarea.in{min-height:80px;resize:vertical;font-weight:500}
input.in:focus,select.in:focus,textarea.in:focus{outline:2px solid var(--a1);outline-offset:1px;background:var(--surface)}
label.fl{display:grid;gap:6px;font-weight:700;font-size:.88rem;min-width:0;align-content:start}
.row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.row3{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr) minmax(0,1fr);gap:12px}
@media (max-width:560px){.row2,.row3{grid-template-columns:minmax(0,1fr)}.row2.keep{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.stack{display:grid;gap:14px}
.err{color:var(--bad);font-weight:650;font-size:.86rem;min-height:1.2em}
.ok{color:var(--good);font-weight:650;font-size:.88rem}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);background:var(--surface2);border-radius:12px;padding:4px;gap:3px}
.seg button{border:0;background:none;font:inherit;font-weight:700;font-size:.88rem;color:var(--mut);padding:9px 8px;border-radius:9px;cursor:pointer;white-space:nowrap;min-height:44px}
.seg button[aria-pressed=true],.seg button[aria-selected=true]{background:var(--surface);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.14)}
.seg.small{display:inline-grid}.seg.small button{min-height:40px;padding:7px 14px}
.chk{display:flex;gap:10px;align-items:center;font-weight:650;font-size:.92rem;cursor:pointer;min-height:44px}
.chk input{width:20px;height:20px;accent-color:var(--a1);flex:none}
.chk.big{align-items:flex-start;padding:6px 0}.chk.big span{display:grid}.chk.big small{color:var(--mut);font-weight:500;font-size:.8rem}
.linkbtn{border:0;background:none;color:var(--a1);font:inherit;font-weight:700;cursor:pointer;padding:6px 2px;min-height:44px;text-align:left}
.linkbtn.sm{min-height:36px;font-size:.84rem}
.linkbtn[disabled]{color:var(--mut);cursor:default}
.spin{display:grid;place-items:center;padding:70px 0;color:var(--mut);font-weight:700}
.toast{position:fixed;bottom:calc(22px + env(safe-area-inset-bottom));left:50%;transform:translate(-50%,20px);background:var(--ink);color:var(--bg);padding:11px 18px;border-radius:999px;font-weight:700;font-size:.9rem;opacity:0;pointer-events:none;transition:.25s;z-index:400;max-width:92vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---- signed-out ---- */
.auth-wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,420px);gap:40px;align-items:center;padding:34px 0 10px}
@media (max-width:880px){.auth-wrap{grid-template-columns:minmax(0,1fr);gap:24px;padding-top:12px}}
.auth-hero h1{font-size:clamp(2rem,6vw,3.4rem);font-weight:900;letter-spacing:-.035em;line-height:1.05;margin-bottom:14px}
.auth-hero p.lead2{color:var(--mut);font-size:1.08rem;max-width:520px}
.perks{display:grid;gap:10px;margin-top:22px;list-style:none}
.perks li{display:flex;gap:12px;align-items:flex-start;font-weight:600}
.perks .pi{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--a1) 14%,transparent);font-size:1.05rem}
.perks small{display:block;color:var(--mut);font-weight:500}
.auth-card{padding:22px}.auth-card h2{font-size:1.35rem;font-weight:850;margin:16px 0 4px}.auth-card form{margin-top:8px}
.pw{position:relative}.pw input{padding-right:70px}
.pw .show{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--a1);font:inherit;font-weight:800;font-size:.82rem;cursor:pointer;padding:8px;min-height:44px}
.meter{height:6px;border-radius:99px;background:var(--surface2);overflow:hidden}
.meter i{display:block;height:100%;width:0;background:var(--bad);transition:width .2s,background .2s}
.row-r{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-top:-6px}
.note-box{background:color-mix(in srgb,var(--good) 12%,transparent);border:1px solid color-mix(in srgb,var(--good) 35%,transparent);border-radius:12px;padding:12px 14px;font-weight:600;font-size:.92rem}
.privacy{margin-top:26px;color:var(--mut);font-size:.84rem;text-align:center}

/* ---- store badges ---- */
.stores{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.store{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:6px 16px 6px 12px;border-radius:12px;background:#111;color:#fff;text-decoration:none;border:1px solid #333;font:inherit;text-align:left;line-height:1.15}
.store i{font-style:normal;font-size:1.5rem}.store small{display:block;font-size:.66rem;opacity:.8;font-weight:600;text-transform:uppercase;letter-spacing:.04em}.store b{display:block;font-size:1.02rem}
.store.soon{background:var(--surface2);color:var(--mut);border:1px dashed var(--line);cursor:not-allowed}
a.store:hover{background:#000;border-color:var(--a1)}

/* ---- app head ---- */
.app-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.app-head h1{font-size:clamp(1.5rem,4vw,2.1rem);font-weight:900;letter-spacing:-.03em;line-height:1.15}
.app-head p{color:var(--mut);margin-top:2px}
.head-actions{display:flex;gap:8px;align-items:center;position:relative}
.avatar{width:44px;height:44px;border-radius:50%;border:0;background:linear-gradient(135deg,var(--a1),var(--a2));color:#fff;font:inherit;font-weight:850;cursor:pointer;display:grid;place-items:center}
.iconbtn.bell{position:relative;width:44px;height:44px;font-size:1.15rem}
.badge{position:absolute;top:-5px;right:-5px;min-width:20px;height:20px;border-radius:999px;background:var(--bad);color:#fff;font-size:.72rem;font-weight:850;display:grid;place-items:center;padding:0 5px;font-style:normal;border:2px solid var(--bg)}
.menu{position:absolute;right:0;top:52px;z-index:60;min-width:230px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:8px}
.menu .who{padding:8px 12px 10px;border-bottom:1px solid var(--line);margin-bottom:6px;min-width:0}
.menu .who b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.menu .who span{color:var(--mut);font-size:.82rem;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu button{display:block;width:100%;text-align:left;border:0;background:none;color:var(--ink);font:inherit;font-weight:650;padding:11px 12px;border-radius:10px;cursor:pointer;min-height:44px}
.menu button:hover{background:var(--surface2)}

/* ---- tabs: top on desktop, bottom bar on phones ---- */
.tabs{display:flex;gap:6px;margin:0 0 16px;background:var(--surface2);padding:5px;border-radius:14px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:1 0 auto;border:0;background:none;color:var(--mut);font:inherit;font-weight:750;font-size:.92rem;padding:9px 16px;border-radius:10px;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;position:relative;white-space:nowrap}
.tabs button i{font-style:normal}
.tabs button[aria-selected=true]{background:var(--surface);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.14)}
.tabs .badge{position:static;border:0;margin-left:2px}
@media (max-width:760px){
  .tabs{position:fixed;left:0;right:0;bottom:0;z-index:90;margin:0;border-radius:0;padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);gap:2px;overflow:visible}
  .tabs button{flex:1 1 0;min-width:0;flex-direction:column;gap:2px;padding:6px 2px;font-size:.68rem;min-height:52px}
  .tabs button i{font-size:1.25rem;line-height:1}
  .tabs .badge{position:absolute;top:2px;left:calc(50% + 6px);margin:0}
  .smapp{padding-bottom:calc(var(--tabh) + 40px + env(safe-area-inset-bottom))}
  .toast{bottom:calc(var(--tabh) + 16px + env(safe-area-inset-bottom))}
  .head-actions #addBtn{display:none}
  #fab:not([hidden]){display:grid}
  input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px!important}
}
#fab{display:none;position:fixed;right:16px;bottom:calc(var(--tabh) + 18px + env(safe-area-inset-bottom));z-index:95;width:56px;height:56px;border-radius:50%;border:0;background:linear-gradient(135deg,var(--a1),var(--a2));color:#fff;font-size:1.8rem;font-weight:500;cursor:pointer;box-shadow:0 10px 26px color-mix(in srgb,var(--a1) 50%,transparent);place-items:center;line-height:1}

/* ---- dashboard ---- */
.stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:8px}
@media (max-width:1040px){.stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.stat.wide{grid-column:1/-1}}
.stat{padding:14px 16px;min-width:0;animation:rise .35s both}
.stat .k{color:var(--mut);font-size:.74rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.tabs .short{display:none}
@media (max-width:420px){.tabs .long{display:none}.tabs .short{display:inline}}
.stat .v{font-size:clamp(1.25rem,3.2vw,1.65rem);font-weight:900;letter-spacing:-.02em;line-height:1.2;overflow-wrap:anywhere}
@media (max-width:560px){.stat .v{font-size:clamp(.95rem,4.4vw,1.4rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal}}
@media (max-width:359px){.stats{grid-template-columns:minmax(0,1fr)}.stat .v{font-size:1.35rem}}
.stat .s{color:var(--mut);font-size:.78rem}
.stat.acc{background:linear-gradient(135deg,color-mix(in srgb,var(--a1) 18%,var(--surface)),var(--surface))}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
.approx{margin:0 0 14px}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-bottom:14px;align-items:start}
@media (max-width:900px){.grid2{grid-template-columns:minmax(0,1fr)}}
.card h3{font-size:1.02rem;font-weight:850}
.smapp .card{padding:16px}
.ch-h{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px}
.upl{display:grid;gap:8px}
.up{display:flex;gap:12px;align-items:center;width:100%;text-align:left;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;border-radius:14px;padding:9px 12px;cursor:pointer;min-height:56px;min-width:0}
.up:hover{border-color:color-mix(in srgb,var(--a1) 50%,var(--line))}
.up .tt{min-width:0;flex:1;display:grid}.up .tt b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.up .tt span{color:var(--mut);font-size:.8rem}
.up .amt{font-weight:800;white-space:nowrap}
.logo{--lc:#6b7fe8;flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-weight:900;font-size:1.05rem;color:#fff;background:linear-gradient(145deg,var(--lc),color-mix(in srgb,var(--lc) 70%,#000));box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);letter-spacing:-.03em;line-height:1}
.logo.two{font-size:.86rem}.logo.big{width:48px;height:48px;border-radius:14px;font-size:1.25rem}.logo.sm{width:32px;height:32px;border-radius:10px;font-size:.9rem}
.chip{font-size:.72rem;font-weight:800;padding:2px 9px;border-radius:999px;border:1px solid var(--line);background:var(--surface2);color:var(--mut);white-space:nowrap}
.chip.urgent{color:#fff;background:var(--bad);border-color:var(--bad)}.chip.soon{color:#7a4a00;background:#ffd54f;border-color:#ffd54f}.chip.good{color:var(--good);border-color:color-mix(in srgb,var(--good) 40%,transparent)}
.chip.paused{color:#b97800;background:color-mix(in srgb,#f5a300 12%,transparent)}.chip.cancelled{color:var(--bad);background:color-mix(in srgb,var(--bad) 10%,transparent)}
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.empty{color:var(--mut);text-align:center;font-size:.9rem;padding:26px 8px;border:2px dashed var(--line);border-radius:14px}
.empty-state{text-align:center;padding:34px 18px!important}
.empty-state h2{font-size:1.3rem;font-weight:850}.empty-state p{color:var(--mut);margin:6px auto 16px;max-width:460px}
.quickadd{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:16px}
.quickadd button{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-weight:700;border-radius:12px;padding:6px 12px 6px 6px;cursor:pointer;min-height:48px}
.quickadd button:hover{border-color:var(--a1)}

/* ---- charts ---- */
.chartcard{margin-bottom:14px}.grid2 .chartcard{margin-bottom:0}
.ch-h h3{margin:0}.ch-h .hint{margin-top:2px}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 8px;font-size:.78rem;color:var(--mut);font-weight:650}
.legend:empty{display:none}.lg{display:inline-flex;align-items:center;gap:6px}.lg i{width:11px;height:11px;border-radius:3px;display:inline-block}
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .axis{fill:var(--mut);font-size:11px;font-weight:600}
.chart .seg.a{fill:var(--s1)}.chart .seg.p{fill:color-mix(in srgb,var(--s1) 38%,transparent);stroke:var(--s1);stroke-width:1.5;stroke-dasharray:4 3}
.chart .hit{fill:transparent}.chart .col{outline:none;cursor:pointer}.chart .col:hover .seg,.chart .col:focus .seg{filter:brightness(1.12)}
.chart .col.now .axis.x{fill:var(--ink);font-weight:850}
.chart .ring-bg{stroke:var(--surface2)}.chart .slice{cursor:pointer;outline:none}.chart .slice:hover,.chart .slice:focus{stroke-width:30}
.chart .dn-v{fill:var(--ink);font-size:17px;font-weight:850}.chart .dn-k{fill:var(--mut);font-size:10px;font-weight:700}
.donut-wrap{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:16px;align-items:center}
@media (max-width:520px){.donut-wrap{grid-template-columns:minmax(0,1fr)}.donut-wrap .chart{max-width:220px;margin:0 auto}}
.donut-legend{display:grid;gap:6px;font-size:.85rem}
.donut-legend div{display:flex;gap:8px;align-items:center;min-width:0}.donut-legend i{flex:none;width:11px;height:11px;border-radius:3px}
.donut-legend span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.donut-legend b{white-space:nowrap}
.ctip{position:fixed;z-index:500;background:var(--ink);color:var(--bg);font-size:.78rem;font-weight:650;padding:7px 11px;border-radius:9px;pointer-events:none;max-width:min(88vw,340px);box-shadow:0 8px 20px rgba(0,0,0,.3);line-height:1.35}
.hbars{display:grid;gap:8px}
.hrow2{display:grid;grid-template-columns:auto minmax(0,1.1fr) minmax(0,1.3fr) auto;gap:10px;align-items:center;border:0;background:none;color:var(--ink);font:inherit;text-align:left;padding:4px 2px;border-radius:12px;cursor:pointer;min-height:44px;width:100%}
.hrow2:hover{background:var(--surface2)}
.hrow2 .hn{min-width:0;display:grid}.hrow2>.logo{width:32px}.hrow2 .hn b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9rem}.hrow2 .hn small{color:var(--mut);font-size:.74rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbar{height:10px;border-radius:99px;background:var(--surface2);overflow:hidden}.hbar i{display:block;height:100%;border-radius:99px;min-width:3px}
.hv{font-weight:800;font-size:.86rem;white-space:nowrap;min-width:7.4em;text-align:right}
@media (max-width:520px){.hrow2{grid-template-columns:auto minmax(0,1fr) auto}.hrow2 .hbar{grid-column:2/-1;grid-row:2}.hrow2 .hv{grid-column:3;grid-row:1}}
.ctable .tscroll{overflow-x:auto}.ctable table{width:100%;border-collapse:collapse;font-size:.86rem}
.ctable th,.ctable td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}.ctable th:first-child,.ctable td:first-child{text-align:left}.ctable thead th{color:var(--mut);font-size:.74rem;text-transform:uppercase;letter-spacing:.04em}

/* ---- subscriptions list ---- */
.tools{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) auto;gap:10px;margin-bottom:10px;align-items:center}
@media (max-width:860px){.tools{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.tools .search{grid-column:1/-1}.tools .chk{grid-column:1/-1}}
.hist-tools{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.chips-row{display:flex;gap:8px;overflow-x:auto;padding:2px 0 8px;margin-bottom:4px;scrollbar-width:none}.chips-row::-webkit-scrollbar{display:none}
.cchip{flex:none;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-weight:700;font-size:.84rem;border-radius:999px;padding:6px 14px;cursor:pointer;min-height:44px;white-space:nowrap}
.cchip[aria-pressed=true]{background:var(--a1);border-color:var(--a1);color:#fff}
.subs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:12px}
.group-h{grid-column:1/-1;font-size:.82rem;font-weight:850;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);margin:8px 0 -2px}
.subcard{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px;display:grid;gap:10px;min-width:0;box-shadow:0 1px 3px rgba(0,0,0,.06);animation:rise .3s both}
.subcard:hover{border-color:color-mix(in srgb,var(--a1) 45%,var(--line))}
.subcard.is-paused,.subcard.is-cancelled{opacity:.8}
.sc-top{display:flex;gap:12px;align-items:center;min-width:0}
.sc-top .tt{min-width:0;flex:1}.sc-top .tt b{display:block;font-size:1.02rem;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-amt{text-align:right;white-space:nowrap}.sc-amt b{display:block;font-weight:900;font-size:1.05rem}.sc-amt span{color:var(--mut);font-size:.76rem}
.sc-meta{display:flex;flex-wrap:wrap;gap:6px 12px;color:var(--mut);font-size:.82rem}
.sc-act{display:flex;flex-wrap:wrap;gap:6px}
.sc-act button{border:1px solid var(--line);background:var(--surface2);color:var(--ink);font:inherit;font-weight:700;font-size:.82rem;border-radius:10px;min-height:44px;padding:0 12px;cursor:pointer;flex:1 1 auto}
.sc-act button:hover{border-color:var(--a1);color:var(--a1)}.sc-act button.dg:hover{border-color:var(--bad);color:var(--bad)}

/* ---- reminders ---- */
.remlist{display:grid;gap:10px}
.rem{border:1px solid var(--line);border-radius:14px;padding:12px;display:grid;gap:10px;background:var(--surface)}
.rem .top{display:flex;gap:12px;align-items:center;min-width:0}.rem .tt{min-width:0;flex:1;display:grid}.rem .tt b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rem .tt span{color:var(--mut);font-size:.82rem}
.rem .amt{font-weight:850;white-space:nowrap}
.rem .acts{display:flex;gap:8px;flex-wrap:wrap}.rem .acts button{flex:1 1 120px;min-height:44px;border-radius:10px;border:1px solid var(--line);background:var(--surface2);color:var(--ink);font:inherit;font-weight:750;cursor:pointer}
.rem .acts button.pri{background:var(--a1);border-color:var(--a1);color:#fff}
.rem .later{display:flex;gap:8px;flex-wrap:wrap}.rem .later button{flex:1 1 110px;min-height:44px;border-radius:10px;border:1px dashed var(--line);background:none;color:var(--ink);font:inherit;font-weight:700;cursor:pointer}
fieldset.offsets{border:1px solid var(--line);border-radius:12px;padding:8px 14px 6px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
fieldset.offsets legend{padding:0 6px;font-weight:800;font-size:.86rem}
@media (max-width:420px){fieldset.offsets{grid-template-columns:minmax(0,1fr)}}
.rem-grid{margin-bottom:0}

/* ---- reports ---- */
.rep-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}.grow{flex:1}
@media (max-width:560px){.rep-bar .grow{display:none}.rep-bar .btn{flex:1 1 auto;justify-content:center}}
.sect-h{font-size:1.2rem;font-weight:850;margin:22px 0 10px;letter-spacing:-.01em}
.insights{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:12px}
.ins{border:1px solid var(--line);border-radius:16px;padding:14px;background:var(--surface);display:grid;gap:6px;align-content:start}
.ins .k{color:var(--mut);font-size:.74rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.ins .v{font-size:1.5rem;font-weight:900;letter-spacing:-.02em;line-height:1.2}.ins p{color:var(--mut);font-size:.86rem}
.ins.good{border-color:color-mix(in srgb,var(--good) 40%,var(--line));background:color-mix(in srgb,var(--good) 7%,var(--surface))}
.ins ul{list-style:none;display:grid;gap:6px;font-size:.88rem}.ins li{display:flex;gap:8px;justify-content:space-between;align-items:center;min-width:0}.ins li span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hist2{display:grid;gap:8px}
.hrow{display:flex;gap:10px;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:12px;padding:9px 12px;min-width:0}
.hrow .tt{min-width:0;flex:1;display:grid}.hrow b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hrow span{color:var(--mut);font-size:.78rem}.hrow .amt{font-weight:800;white-space:nowrap}

/* ---- account ---- */
.danger-zone h3{color:var(--bad)}
.card h3{margin-bottom:10px}

@media (prefers-reduced-motion:reduce){.stat,.subcard{animation:none}.meter i,.toast{transition:none}}
/* phones: dialogs become bottom sheets */
@media (max-width:560px){
  dialog{margin:auto 0 0;max-width:100vw;width:100vw;border-radius:20px 20px 0 0;max-height:94vh;padding-bottom:env(safe-area-inset-bottom)}
  dialog[open]{animation:sheet .25s ease-out}
  @keyframes sheet{from{transform:translateY(40px);opacity:.4}}
}