/* Homepage (Oct 3 2026 redesign). Scoped to .hm-* plus the kept #real-receipt block (.demo-*). Dark site, tokens from variables.css. */
.hm-hero{position:relative;padding:2.5rem 0 4rem;background:linear-gradient(to bottom,#12121c,var(--color-bg-primary));overflow:hidden}
.hm-hero .hero-glow{pointer-events:none}
.hm-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:3rem;align-items:center}
.hm-eyebrow{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-accent-primary);margin-bottom:.9rem}
.hm-hero h1{font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.1;letter-spacing:-.02em;margin:0 0 1.1rem;background:none;-webkit-text-fill-color:currentColor;color:var(--color-text-primary);font-weight:800}
.hm-sub{font-size:1.1rem;line-height:1.6;color:var(--color-text-secondary);margin:0 0 1.6rem;max-width:34em}
.hm-btns{display:flex;flex-wrap:nowrap;gap:.7rem}
.hm-btns .btn{flex:0 1 auto;padding:1rem 1.5rem;font-size:1rem;white-space:nowrap}
.hm-ticks{list-style:none;margin:1.3rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;color:var(--color-text-secondary);font-size:.9rem}
.hm-ticks li:before{content:"\2713";color:var(--color-accent-success);font-weight:800;margin-right:.4rem}
.hm-links{margin-top:1rem;display:flex;flex-direction:column;gap:.5rem;font-size:.9rem}
.hm-links a{color:var(--color-accent-primary);text-decoration:none}
.hm-links a:hover{text-decoration:underline}
.hm-links i{width:1.2rem;color:var(--color-accent-primary)}
/* receipt -> phone */
.hm-xform{display:grid;grid-template-columns:minmax(0,1fr) 2rem minmax(0,.9fr);align-items:center;gap:.4rem}
.hm-paper{background:#d4d1ca;color:#1a1a1a;font:.78rem/1.5 "Courier New",ui-monospace,monospace;padding:1.1rem .9rem;border-radius:4px;box-shadow:0 14px 40px rgba(0,0,0,.45);transform:rotate(-1.6deg);position:relative}
.hm-paper .h{text-align:center;font-weight:700;letter-spacing:.06em;margin-bottom:.5rem}
.hm-paper .it{padding:.15rem 0}
.hm-paper .r{display:flex;justify-content:space-between;gap:.5rem}
.hm-paper .hr{border-top:1px dashed #8a877f;margin:.45rem 0}
.hm-paper .t{font-weight:700}
.hm-chip{display:inline-block;font:600 .6rem/1 system-ui,sans-serif;color:#fff;border-radius:999px;padding:.22rem .5rem;margin-top:.12rem}
.hm-paper .lab{position:absolute;top:-.7rem;left:.6rem;background:var(--color-accent-primary);color:#fff;font:700 .62rem system-ui,sans-serif;padding:.2rem .55rem;border-radius:999px;transform:rotate(1.6deg);text-transform:uppercase;letter-spacing:.04em}
.hm-arrow{font-size:1.6rem;color:var(--color-accent-primary);text-align:center}
.hm-phone{background:#000;border-radius:2rem;padding:.4rem;box-shadow:0 20px 50px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.12);width:100%;max-width:17rem;margin:0 auto}
.hm-phone .scr{border-radius:1.65rem;overflow:hidden;position:relative;background:#f2f2f7}
.hm-phone .scr:after{content:"";position:absolute;left:0;right:0;bottom:0;height:18%;background:linear-gradient(transparent,#f2f2f7)}
.hm-phone img{display:block;width:100%;height:auto}
.hm-cap{text-align:center;font-size:.8rem;color:var(--color-text-tertiary);margin:1rem auto 0;max-width:30em}
@media(prefers-reduced-motion:no-preference){
 .hm-paper .hm-chip{animation:hmpop .5s both}
 .hm-paper .hm-chip{animation-delay:var(--d,0s)}
 .hm-hero .hm-phone{animation:hmrise .8s .3s both}
 @keyframes hmpop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
 @keyframes hmrise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
}
/* generic section rhythm */
.hm-sec{padding:4.5rem 0}
.hm-sec.alt{background:var(--color-bg-secondary)}
.hm-h2{font-size:clamp(1.6rem,3vw,2.25rem);line-height:1.15;letter-spacing:-.015em;margin:0 0 .8rem;color:var(--color-text-primary);text-align:center;font-weight:800}
.hm-lead{color:var(--color-text-secondary);font-size:1.05rem;max-width:40em;margin:0 auto;text-align:center}
/* try band */
.hm-try{background:linear-gradient(135deg,#4f46e5,#7c3aed);border-radius:1.5rem;padding:2.2rem;display:grid;grid-template-columns:minmax(0,1.4fr) auto;gap:1.5rem;align-items:center;box-shadow:0 20px 50px rgba(79,70,229,.3)}
.hm-try h2{margin:0;color:#fff;font-size:1.7rem;text-align:left}
.hm-try p{color:#e6e6ff;margin:.5rem 0 0}
.hm-try .btn{background:#fff;color:#3730a3;white-space:nowrap}
.hm-try .btn:hover{color:#3730a3;background:#f1f1ff}
/* app screens: ALWAYS centered */
.hm-screens{display:flex;flex-wrap:wrap;justify-content:center;gap:2.5rem;margin:2.5rem auto 0}
.hm-screens figure{margin:0;width:16rem;max-width:100%;text-align:center}
.hm-screens figcaption b{display:block;font-size:1.05rem;margin-top:1rem;color:var(--color-text-primary)}
.hm-screens figcaption span{display:block;color:var(--color-text-secondary);font-size:.9rem;margin-top:.2rem}
.hm-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin:2.5rem auto 0;max-width:52rem}
.hm-chips a{color:inherit;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
.hm-chips span{border:1px solid var(--color-border-default);background:var(--color-bg-primary);border-radius:999px;padding:.5rem .95rem;font-size:.875rem;font-weight:600;color:var(--color-text-secondary)}
.hm-chips span.hl{border-color:var(--color-border-accent);color:var(--color-accent-primary)}
/* privacy */
.hm-priv{max-width:46rem;margin:0 auto;display:flex;gap:1.1rem;align-items:flex-start;background:var(--color-bg-secondary);border:1px solid var(--color-border-default);border-radius:1.25rem;padding:1.6rem}
.hm-priv i{font-size:1.5rem;color:var(--color-accent-primary);margin-top:.2rem}
.hm-priv h2{font-size:1.25rem;margin:0 0 .4rem;color:var(--color-text-primary);text-align:left}
.hm-priv p{margin:0;color:var(--color-text-secondary)}
/* pricing */
.hm-price{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:2rem}
.hm-price .price-item{background:var(--color-bg-primary);border:1px solid var(--color-border-default);border-radius:1rem;padding:1.3rem;display:flex;flex-direction:column;gap:.5rem}
.hm-price .price-item-main{border-color:var(--color-border-accent)}
.hm-price .price-amount{font-size:1.2rem;font-weight:800;color:var(--color-text-primary)}
.hm-sec .price-note{text-align:center;margin-top:1rem;font-size:.8rem;color:var(--color-text-tertiary)}
.hm-sec .price-note a{color:var(--color-accent-primary);text-decoration:none}
/* faq */
.hm-faq{max-width:46rem;margin:1.5rem auto 0}
.hm-faq details{border-bottom:1px solid var(--color-border-default);padding:1rem 0}
.hm-faq summary{cursor:pointer;font-weight:700;color:var(--color-text-primary)}
.hm-faq p{color:var(--color-text-secondary);margin:.6rem 0 0}
.hm-final{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;margin-top:1.5rem}
/* real receipt block (kept; two-column on desktop) */
.demo-section{padding:4.5rem 0;background:var(--color-bg-secondary)}
.demo-paper{background:#d4d1ca;color:#1a1a1a;border:1px solid rgba(0,0,0,.06);font-family:"Courier New",ui-monospace,monospace;font-size:.9rem;line-height:1.55;padding:var(--space-6);border-radius:var(--radius-xl);box-shadow:0 6px 24px rgba(0,0,0,.12)}
.demo-paper .row{display:flex;justify-content:space-between;gap:1rem}
.demo-paper .head{text-align:center;font-weight:700;margin-bottom:.6rem;letter-spacing:.08em}
.demo-paper .rule{border-top:1px dashed #999;margin:.5rem 0}
.demo-paper .total{font-weight:700}
.demo-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--space-8);align-items:start;max-width:880px;margin:var(--space-8) auto 0}
.demo-result{display:flex;flex-direction:column;gap:var(--space-4)}
.demo-cat{background:var(--color-bg-primary);border:1px solid var(--color-border-subtle);border-radius:var(--radius-xl);padding:var(--space-4) var(--space-6)}
.demo-cat-head{display:flex;justify-content:space-between;align-items:baseline;font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}
.demo-cat-head .amt,.demo-cat li{font-variant-numeric:tabular-nums}
.demo-cat ul{margin:.4rem 0 0;padding:0;list-style:none;color:var(--color-text-secondary);font-size:var(--text-sm)}
.demo-cat li{display:flex;justify-content:space-between}
.demo-dot{display:inline-block;width:.7rem;height:.7rem;border-radius:50%;margin-right:.5rem}
.demo-note{text-align:center;color:var(--color-text-tertiary);font-size:var(--text-sm);margin:var(--space-4) auto 0;max-width:760px;line-height:1.5}
.demo-receipt-row{max-width:360px;margin:var(--space-8) auto 0}
.demo-col-label{font-size:var(--text-lg,1.125rem);font-weight:var(--font-weight-semibold,600);color:var(--color-text-primary);letter-spacing:-.01em;margin-bottom:.2rem}   /* a column TITLE (Xinzhou Oct 3: was too small) */
.demo-bank{background:var(--color-bg-primary);border:1px dashed var(--color-border-subtle);border-radius:var(--radius-xl);padding:var(--space-4) var(--space-6);display:flex;flex-direction:column;gap:.4rem}
.demo-bank-col{align-self:start;display:flex;flex-direction:column;gap:var(--space-4)}
.demo-bank-line{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font-weight:var(--font-weight-semibold);color:var(--color-text-primary);font-variant-numeric:tabular-nums}
.demo-bank-chip{display:inline-block;align-self:flex-start;padding:.1rem .65rem;border-radius:999px;background:var(--color-bg-secondary);border:1px solid var(--color-border-subtle);color:var(--color-text-secondary);font-size:var(--text-sm)}
.demo-bank-note{color:var(--color-text-secondary);font-size:var(--text-sm);margin:0}
/* bank-vs-receipt, default (non-ja) layout: receipt left, bank + result right */
.demo-bvr{display:grid;grid-template-columns:minmax(0,22rem) minmax(0,1fr);gap:2rem;align-items:start;max-width:56rem;margin:2rem auto 0}
.demo-bvr .demo-receipt-row{margin:0;max-width:none}
.demo-bvr-right{display:flex;flex-direction:column;gap:var(--space-4)}
.demo-bvr-right .demo-bank{margin-bottom:.4rem}
/* Xinzhou Oct 3: the receipt's top lines up with the bank card, not with the label above it. The spacer is the same
   element as that label (same font, margin, column gap), so it holds in every language; hidden when stacked. */
.demo-bvr .demo-receipt-row{display:flex;flex-direction:column;gap:var(--space-4)}
.demo-align-spacer{visibility:hidden}
.demo-bvr-right .demo-bank-col{align-self:stretch}
@media(max-width:860px){
 .hm-hero{padding:1.75rem 0 3rem}
 .hm-hero-grid{grid-template-columns:1fr;gap:2.5rem}
 .hm-try{grid-template-columns:1fr;padding:1.6rem}
 .hm-price{grid-template-columns:1fr}
 .demo-bvr,.demo-grid{grid-template-columns:1fr}
 .demo-bvr .demo-receipt-row{max-width:360px;margin:0 auto}
 .demo-align-spacer{display:none}
}
@media(max-width:560px){
 .hm-btns{gap:.5rem}
 .hm-btns .btn{padding:.9rem .8rem;font-size:.92rem;gap:.35rem;flex:1 1 0;min-width:0;white-space:nowrap}
 .hm-btns .btn i{display:none}
 .hm-xform{grid-template-columns:1fr;gap:.9rem;max-width:20rem;margin:0 auto}
 .hm-arrow{transform:rotate(90deg);height:2rem}
 .hm-phone{max-width:15rem}
 .hm-sec,.demo-section{padding:3rem 0}
 .hm-priv{flex-direction:column;gap:.6rem}
}
@media(max-width:420px){.hm-btns .btn{font-size:.84rem;padding:.9rem .4rem}}

/* "Every card and account, in one place" (Xinzhou, Oct 2 2026: receipts work across several cards, accounts and banks) */
.demo-multi { max-width: 720px; margin: var(--space-8, 2rem) auto 0; text-align: center; }
.demo-multi h3 { margin: 0 0 0.4rem; font-size: var(--text-lg, 1.125rem); }
.demo-multi p { color: var(--color-text-secondary); font-size: var(--text-sm); line-height: 1.55; margin: 0 auto 0.6rem; }
.demo-multi-badge { display: inline-block; padding: 0.2rem 0.8rem; border-radius: 999px; border: 1px solid var(--color-border-subtle); background: var(--color-bg-primary); color: var(--color-text-secondary); font-size: var(--text-xs, 0.75rem); }

/* ---- Hero stories (Oct 3 2026): tabs + a stage where ONE story shows at a time. Script: js/hero-stories.js ---- */
.hm-visual{min-width:0}
.hm-tabs{display:flex;gap:.3rem;flex:1 1 auto;min-width:0;margin:0;padding:.25rem;background:rgba(255,255,255,.06);border:1px solid var(--color-border-default);border-radius:999px;visibility:hidden}
.hm-tabs.ready{visibility:visible}
.hm-tab{position:relative;flex:1 1 auto;min-width:0;min-height:44px;padding:.35rem .7rem;border:0;border-radius:999px;background:transparent;color:var(--color-text-secondary);font-family:inherit;font-weight:600;font-size:.85rem;line-height:1.15;text-align:center;cursor:pointer;transition:background .2s,color .2s}
.hm-tab:hover{color:var(--color-text-primary)}
.hm-tab[aria-selected="true"]{background:var(--color-accent-primary);color:#fff}
.hm-tab:focus-visible{outline:2px solid #fff;outline-offset:2px}
.hm-stage{display:grid}
.hm-story{grid-area:1/1;min-width:0;transition:opacity .25s}
.hm-story:not(.on){visibility:hidden;opacity:0;pointer-events:none}
.hm-story:not([data-story="bought"]){display:flex;flex-direction:column;justify-content:flex-start}
/* Every story starts right under the tabs (Xinzhou Oct 3 2026: centring left a big gap above Balance).
   Desktop keeps one shared box (tallest story) so nothing below moves; phones size the box to the story on screen,
   since the text and buttons sit ABOVE the visual there and the leftover space would otherwise sit under it. */
@media(max-width:860px){.hm-story:not(.on){display:none}}
.hm-hero.hm-pending .hm-stage{opacity:0}
/* A "spending" pick must not flash the "bought" headline while the strings load (Oct 3 2026): the text fades in with the visual. */
.hm-hero.hm-pending .hm-eyebrow,.hm-hero.hm-pending h1,.hm-hero.hm-pending .hm-sub{opacity:0}
.hm-hero .hm-eyebrow,.hm-hero h1,.hm-hero .hm-sub,.hm-hero .hm-stage{transition:opacity .2s ease}
@media (prefers-reduced-motion:reduce){.hm-hero .hm-eyebrow,.hm-hero h1,.hm-hero .hm-sub,.hm-hero .hm-stage{transition:none}}
.hm-stage{transition:opacity .3s}
/* spending story */
.hm-sp{position:relative;display:flex;flex-direction:column;gap:1rem;width:100%}
.hm-sp-tray{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;align-items:stretch}
/* The three receipts are one height (Xinzhou Oct 3 2026); the TOTAL block sits at the bottom so the totals line up. */
.hm-sp-tray .hm-rc{display:flex;flex-direction:column}
.hm-sp-tray .hm-rc .hr{margin-top:auto;padding-top:.4rem;border-top:0;position:relative}
.hm-sp-tray .hm-rc .hr:after{content:"";position:absolute;left:0;right:0;bottom:0;border-top:1px dashed #8a877f}
.hm-rc{position:relative;background:#d4d1ca;color:#1a1a1a;font:.66rem/1.45 "Courier New",ui-monospace,monospace;padding:.75rem .6rem .6rem;border-radius:4px;box-shadow:0 8px 22px rgba(0,0,0,.4);transition:opacity .4s,filter .4s,transform .3s,box-shadow .3s}
.hm-rc:nth-child(1){transform:rotate(-.9deg)}.hm-rc:nth-child(2){transform:rotate(.7deg)}.hm-rc:nth-child(3){transform:rotate(-.5deg)}
.hm-rc .lab{position:absolute;top:-.65rem;left:.4rem;background:var(--color-accent-primary);color:#fff;font:700 .58rem system-ui,sans-serif;padding:.18rem .5rem;border-radius:999px;text-transform:uppercase;letter-spacing:.04em}
.hm-rc .h{text-align:center;font-weight:700;letter-spacing:.03em;font-size:.6rem;line-height:1.3;margin-bottom:.4rem}
.hm-rc .it{display:flex;align-items:center;gap:.3rem;padding:.07rem 0}
.hm-rc .it i{flex:none;width:.5rem;height:.5rem;border-radius:50%}
.hm-rc .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-rc .pr{flex:none;font-variant-numeric:tabular-nums}
.hm-rc .hr{border-top:1px dashed #8a877f;margin:.4rem 0 .3rem}
.hm-rc .t{font-weight:700}
.hm-rc.cur{transform:translateY(-4px);box-shadow:0 0 0 2px var(--color-accent-primary),0 14px 30px rgba(0,0,0,.5)}
.hm-rc.done{opacity:.4;filter:saturate(.6)}
.hm-rc.done:after{content:"\2713";position:absolute;right:.35rem;top:.3rem;width:1rem;height:1rem;border-radius:50%;background:#2e7d32;color:#fff;font:700 .65rem/1rem system-ui,sans-serif;text-align:center}
.hm-sp-chart{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.3rem;align-items:center;background:var(--color-bg-secondary);border:1px solid var(--color-border-default);border-radius:1.25rem;padding:1.1rem 1.3rem}
.hm-sp-donut{width:11.5rem;max-width:100%;transition:transform .35s}
.hm-sp-donut.pulse{transform:scale(1.035)}
.hm-sp-donut svg{display:block;width:100%;height:auto;overflow:visible}
.hm-sp-donut .trk{stroke:rgba(255,255,255,.07)}
.hm-sp-donut .sl{stroke:var(--color-bg-secondary);stroke-width:2;stroke-linejoin:round}
.hm-sp-donut .pc{fill:#fff;font:500 9.5px system-ui,sans-serif;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.hm-sp-donut .tl{fill:var(--color-text-secondary);font:500 14px system-ui,sans-serif;text-anchor:middle}
.hm-sp-donut .tv{fill:#F26157;font:600 14px system-ui,sans-serif;text-anchor:middle;font-variant-numeric:tabular-nums}
.hm-sp-legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem;min-width:0}
.hm-sp-legend li{display:flex;align-items:center;gap:.55rem;font-size:.86rem;line-height:1.25;color:var(--color-text-primary);opacity:0;transition:opacity .4s}
.hm-sp-legend li.on{opacity:1}
.hm-sp-legend i{flex:none;width:.7rem;height:.7rem;border-radius:50%}
.hm-sp-legend .nm{flex:1;min-width:0;color:var(--color-text-secondary)}
.hm-sp-legend .am{flex:none;font-weight:600;font-variant-numeric:tabular-nums}
.hm-sp-foot{display:flex;align-items:center;justify-content:center;gap:.9rem;flex-wrap:wrap}
.hm-sp-foot .hm-cap{margin:0;flex:1 1 16rem;text-align:left}
.hm-sp-replay{min-height:44px;padding:0 1rem;border-radius:999px;border:1px solid var(--color-border-default);background:transparent;color:var(--color-text-secondary);font:600 .85rem system-ui,sans-serif;cursor:pointer}
.hm-sp-replay:hover{color:var(--color-text-primary);border-color:var(--color-border-accent)}
@media(prefers-reduced-motion:no-preference){
 .hm-rc.cur:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--color-accent-primary);box-shadow:0 0 8px var(--color-accent-primary);animation:hmscan .38s linear forwards}
 @keyframes hmscan{from{top:0}to{top:100%}}
}
@media(prefers-reduced-motion:reduce){.hm-rc,.hm-sp-donut,.hm-sp-legend li,.hm-story,.hm-stage{transition:none}}
@media(max-width:560px){
 .hm-tabs{margin-bottom:1rem}
 .hm-tab{padding:.35rem .5rem;font-size:.85rem}
 .hm-sp-tray{gap:.4rem}
 .hm-rc{font-size:.62rem;padding:.7rem .45rem .5rem}
 .hm-rc .h{font-size:.56rem}
 .hm-sp-chart{grid-template-columns:1fr;gap:1rem;padding:1rem}
 .hm-sp-donut{width:11rem;margin:0 auto}
 .hm-sp-foot .hm-cap{text-align:center}
}
/* visible legend rows stack at the top (the hidden ones keep their space at the bottom, so the card never changes height) */
.hm-sp-legend li{order:1}
.hm-sp-legend li.on{order:0}
.hm-rc.done .h{padding-right:.9rem}
.hm-hero h1{text-wrap:balance}

/* ---- Hero rotation (Oct 3 2026): tab bar with pause control, progress fill, four stories ---- */
.hm-tabbar{display:flex;align-items:center;gap:.5rem;margin:0 auto 1.2rem;max-width:100%}
.hm-tabs.ready,.hm-pause.ready{visibility:visible}
.hm-tab .fill{position:absolute;left:14px;right:14px;bottom:4px;height:2px;border-radius:2px;background:rgba(255,255,255,.55);transform:scaleX(0);transform-origin:left}
.hm-tab[aria-selected="true"] .lb{position:relative}
.hm-pause{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--color-border-default);background:rgba(255,255,255,.06);color:var(--color-text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;visibility:hidden;padding:0}
.hm-pause:hover{color:var(--color-text-primary)}
.hm-pause:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* app-style cards (AppColors.cardBackground, dark) */
.hm-ac{background:#1c1c1e;border:1px solid var(--color-border-default);border-radius:12px;padding:.8rem 1rem}
.hm-ac .hd{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;font-size:.75rem;color:var(--color-text-secondary)}
.hm-ac .hd b,.hm-ac .hd .bal b{font-weight:600}
/* balance */
.hm-bl{display:flex;flex-direction:column;gap:.8rem;width:100%}
.hm-bl-feed{display:flex;flex-direction:column;gap:.45rem}
.hm-bl-row{display:flex;align-items:center;gap:.7rem;background:#1c1c1e;border:1px solid var(--color-border-default);border-radius:12px;padding:.55rem .9rem;opacity:0;transform:translateY(-8px);transition:opacity .45s,transform .45s}
.hm-bl-row.on{opacity:1;transform:none}
.hm-bl-row i{flex:none;width:1.5rem;height:1.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font:700 .95rem/1 system-ui,sans-serif;font-style:normal}
.hm-bl-row.inc i{background:rgba(107,209,128,.2);color:#6BD180}
.hm-bl-row.exp i{background:rgba(242,97,92,.2);color:#F2615C}
.hm-bl-row .nm{flex:1;min-width:0;font-size:.9rem;color:var(--color-text-primary)}
.hm-bl-row .am{flex:none;font-weight:600;font-size:.9rem;font-variant-numeric:tabular-nums}
.hm-bl-row.inc .am{color:#6BD180}.hm-bl-row.exp .am{color:#F2615C}
.hm-bl .bar{display:grid;grid-template-columns:1fr 1fr;gap:2px;height:20px;margin:.55rem 0}
.hm-bl .bar span:first-child{background:rgba(107,209,128,.7);border-radius:6px}
.hm-bl .bar span:last-child{background:rgba(242,97,92,.7);border-radius:6px}
.hm-bl .lg{display:flex;justify-content:space-between;gap:.6rem;font-size:.75rem;color:var(--color-text-secondary)}
.hm-bl .lg span{display:flex;align-items:center;gap:.3rem}
.hm-bl .lg b{font-weight:600;font-variant-numeric:tabular-nums}
.hm-bl .lg .iv{color:#6BD180}.hm-bl .lg .ev{color:#F2615C}
.hm-bl .dot{display:inline-block;width:10px;height:10px;border-radius:50%}
.hm-bl .bv{font-variant-numeric:tabular-nums}
.hm-bl .hd.b,.hm-bl .hm-ac:last-of-type .hd{font-size:.95rem;align-items:center;margin-bottom:.5rem}
.hm-bl .hm-ac:last-of-type .hd b{font-size:1.05rem;color:var(--color-text-primary)}
.hm-bl .sum{font-size:.95rem;color:var(--color-text-secondary)}
.hm-bl .sum b{font-weight:600;font-variant-numeric:tabular-nums}
.hm-bl .trk{height:8px;border-radius:4px;background:rgba(142,142,147,.25);overflow:hidden}
.hm-bl .fl{display:block;height:100%;width:0;border-radius:4px;background:#34C759}
.hm-bl .ft{display:flex;justify-content:space-between;gap:.6rem;margin-top:.4rem;font-size:.75rem;color:var(--color-text-secondary)}
/* calendar */
.hm-cl{display:flex;flex-direction:column;gap:.8rem;width:100%}
.hm-cl-card{padding:.8rem .8rem .9rem}
.hm-cl .mo{font-size:1.05rem;font-weight:600;color:var(--color-text-primary);margin:0 .2rem .55rem}
.hm-cl .wd,.hm-cl .gr{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.hm-cl .wd{margin-bottom:.35rem;font-size:.78rem;font-weight:500;color:var(--color-text-secondary);text-align:center}
.hm-cl .dc{height:50px;background:#232326;border:.5px solid rgba(255,255,255,.14);border-radius:8px;display:flex;flex-direction:column;align-items:center;padding-top:2px;gap:1px;min-width:0;transition:box-shadow .3s,transform .3s,border-color .3s}
.hm-cl .dc b{width:22px;height:22px;line-height:22px;text-align:center;font-size:.8rem;font-weight:500;color:#fff;border-radius:50%}
.hm-cl .dc b.td{background:#0A84FF;font-weight:700}
.hm-cl .dc em{font-style:normal;font-size:.62rem;font-weight:500;line-height:1.05;max-width:100%;white-space:nowrap;opacity:0;transform:translateY(3px);transition:opacity .3s,transform .3s}
.hm-cl .dc .ex{color:#F2615C}.hm-cl .dc .in{color:#6BD180}
.hm-cl .dc.on em{opacity:1;transform:none}
.hm-cl.hi .dc.top{border-color:var(--color-accent-primary);box-shadow:0 0 0 2px var(--color-accent-primary);transform:scale(1.04);z-index:1}
.hm-cl-day{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:.4rem 1.2rem;align-items:center;opacity:.25;transform:translateY(6px);transition:opacity .5s,transform .5s}
.hm-cl.hi .hm-cl-day{opacity:1;transform:none}
.hm-cl-day .hi{font-size:.75rem;color:var(--color-text-secondary)}
.hm-cl-day .tot{font-size:1.45rem;font-weight:600;color:#F2615C;margin:.15rem 0;font-variant-numeric:tabular-nums}
.hm-cl-day .cn{font-size:.75rem;color:var(--color-text-secondary)}
.hm-cl-day ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3rem;min-width:0}
.hm-cl-day li{display:flex;align-items:center;gap:.45rem;font-size:.8rem;color:var(--color-text-secondary)}
.hm-cl-day li i{flex:none;width:.6rem;height:.6rem;border-radius:50%}
.hm-cl-day li .nm{flex:1;min-width:0;color:var(--color-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-cl-day li .am{flex:none;font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){.hm-bl-row,.hm-cl .dc,.hm-cl .dc em,.hm-cl-day{transition:none}.hm-cl-day{opacity:1;transform:none}}
@media(max-width:560px){
 .hm-tabbar{gap:.4rem}
 .hm-tabs{display:grid;grid-template-columns:1fr 1fr;border-radius:1.4rem;gap:.25rem}
 .hm-tab{border-radius:1.1rem;padding:.3rem .4rem;font-size:.82rem}
 .hm-cl-day{grid-template-columns:1fr}
 .hm-cl .dc{height:50px}
 .hm-cl .dc em{font-size:.58rem}
 .hm-cl-card{padding:.7rem .5rem .8rem}
 .hm-cl .wd,.hm-cl .gr{gap:3px}
}