/* 酒酷 × Apple HIG layer (presentation only). Loaded last; overrides only look & feel, never data. */
:root{
  --hig-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","SF Pro",Roboto,"Noto Sans TC","PingFang TC","Noto Sans CJK TC","Microsoft JhengHei",system-ui,sans-serif;
  /* vibrancy text levels */
  --label:var(--ink);--label-2:var(--mut);--label-3:#78594B;--fill:rgba(120,120,128,.16);--sep:var(--line);
  /* materials: thick / regular / thin (blur + saturate) */
  --mat-thick:blur(50px) saturate(190%);--mat-reg:blur(30px) saturate(180%);--mat-thin:blur(16px) saturate(150%);
  --hig-spring:cubic-bezier(.34,1.45,.64,1);--hig-ease:cubic-bezier(.32,.72,0,1);
  --focus:#0A66D8;--sy:0;
}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--label-3:#C2A99A;--focus:#6CB2FF}}
[data-theme=dark]{--label-3:#C2A99A;--focus:#6CB2FF}
/* ---- typography & dynamic type (rem-based; iOS: system Dynamic Type via -apple-system-body; Android: system font scale; in-app override) ---- */
html{font-size:100%}
@supports (-webkit-touch-callout:none){html{font:-apple-system-body}}
html[data-ts="s"]{font-size:14px!important}html[data-ts="l"]{font-size:18px!important}html[data-ts="xl"]{font-size:20px!important}html[data-ts="m"]{font-size:16px!important}
body{font-family:var(--hig-font);font-size:1rem;line-height:1.5}
button,input,select,textarea{font-family:inherit}
h2{font-size:clamp(2.125rem,9vw,3.25rem);font-family:var(--hig-font)}
h3{font-size:1.1875rem}.brand h1{font-size:1.3125rem}.top.scrolled .brand h1{font-size:1.0625rem}
.sub-t{font-size:.75rem;color:var(--label-2)}.sync{font-size:.8125rem;min-height:44px;display:inline-flex;align-items:center}
.kpi .l{font-size:.8125rem}.kpi .v{font-size:1.875rem}.cf-big{font-size:clamp(2.5rem,7vw,3.25rem)}
.cf-stats span,.cf-est span{font-size:.75rem}.cf-stats b{font-size:1.125rem}.cf-est b{font-size:1.5rem}
th{font-size:.75rem}td{font-size:.875rem}.note,.warn{font-size:.8125rem}label{font-size:.8125rem;color:var(--label-2)}
input,select{font-size:1rem}.btn{font-size:.9375rem}.pill{font-size:.75rem}
.entry .meta{font-size:.75rem}.dayh{font-size:.8125rem}.dayh b{font-size:.875rem}.dayh span{font-size:.75rem}
.cat span{font-size:.75rem}.key{font-size:1.5rem}.amtbox b{font-size:3.25rem}.amtbox small{font-size:1rem}
.tabs a{font-size:.6875rem;min-height:50px}.toast{font-size:.875rem}.undo{font-size:.9375rem}
.mut,.note,.entry .meta,.kpi .l,.sub-t,th,.dayh,.sync{color:var(--label-2)}
::placeholder{color:var(--label-3);opacity:1}
/* ---- 44pt minimum targets ---- */
/* style.css already enforces 48px on buttons/tabs/segments; add the rest at >=44 */
.key,.cat,.ctx-menu button,.install-pill button,.undo button,.hig-as button{min-height:44px}
.install-pill button{min-width:44px}
.ios-row{min-height:52px}
a{min-height:0}
input[type=checkbox]:not(.ios-sw){width:24px;min-height:24px;height:24px}
/* ---- focus-visible rings ---- */
:where(a,button,input,select,textarea,summary,[tabindex],[role=button],[role=switch]):focus{outline:none}
:where(a,button,input,select,textarea,summary,[tabindex],[role=button],[role=switch]):focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:inherit}
.seg input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px}
.key:focus-visible,.cat:focus-visible,.tabs a:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
/* segmented: keep radios in the a11y tree (VoiceOver/TalkBack) while visually hidden */
.seg input[type=radio]{display:block!important;position:absolute;opacity:0;width:1px;height:1px;min-height:0;margin:0;pointer-events:none}
.seg label{position:relative}
/* ---- materials ---- */
.top,.tabs{background:color-mix(in srgb,var(--bg) 72%,transparent);-webkit-backdrop-filter:var(--mat-reg);backdrop-filter:var(--mat-reg)}
.card,.kpi{-webkit-backdrop-filter:var(--mat-thin);backdrop-filter:var(--mat-thin)}
dialog:not(.hig-wheel):not(.hig-as){background:color-mix(in srgb,var(--bg) 84%,transparent);-webkit-backdrop-filter:var(--mat-thick);backdrop-filter:var(--mat-thick)}
.ctx-menu{-webkit-backdrop-filter:var(--mat-thick);backdrop-filter:var(--mat-thick)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.top,.tabs,dialog,.ctx-menu{background:var(--bg)}}
/* ---- continuous (squircle) corners where supported (Chrome/Android ≥139); elsewhere plain rounding ---- */
@supports (corner-shape:squircle){
  .card,.kpi,.btn,.key,.cat,dialog,.ctx-menu,.cf-stats>div,.cf-est,.hig-as .grp,.hig-as .cancel,.pill,.toast,.undo,.warn,.entry button,.banner,.ios-seg,.seg.ios-seg>.seg-thumb{corner-shape:squircle}
  .card{border-radius:36px}.kpi{border-radius:34px}.key,.cat{border-radius:26px}
}
/* ---- grouped inset lists (iOS Settings style) ---- */
[data-testid=rlist],[data-testid=mlist]{padding:6px 16px 8px}
.dayh{border-bottom:0;text-transform:none;letter-spacing:.01em;padding:14px 4px 6px}
.dayh b{color:var(--label-2);font-weight:600;font-size:.8125rem;text-transform:uppercase;letter-spacing:.04em}
.rwrap,.entry{position:relative}
.rwrap+.rwrap .rrow::before,.rwrap+.rwrap::before{content:none}
.rrow{border-bottom:0!important}
.rwrap::after{content:"";position:absolute;left:58px;right:0;bottom:0;height:1px;background:var(--sep);pointer-events:none}
.rwrap:last-child::after{display:none}
.ios-row{padding:0 4px;border-bottom:1px solid var(--sep)}.ios-row:last-of-type{border-bottom:0}
/* ---- large-title navigation: compact title fades into the bar as the large title scrolls away ---- */
.top{position:sticky}
.hig-nt{position:absolute;left:calc(20px + 40px + 12px + env(safe-area-inset-left));top:50%;transform:translateY(-50%);max-width:calc(100% - 300px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700;font-size:1.0625rem;opacity:0;pointer-events:none;transition:opacity .2s}
.top.hig-compact .hig-nt{opacity:1}
.top.hig-compact .brand>div{opacity:0;position:absolute;pointer-events:none}
#app>h2,#app>.herow h2{will-change:transform;transform:translateY(calc(var(--sy)*.22px)) scale(var(--hs,1));transform-origin:0 100%;opacity:calc(1 - var(--sy)/260)}
.hig-pull-stretch{--hs:1.06}
/* ---- skeleton shimmer ---- */
.hig-skel{display:grid;gap:14px;padding:6px 0}
.hig-skel>i{display:block;border-radius:26px;background:linear-gradient(100deg,var(--fill) 30%,color-mix(in srgb,var(--fill) 40%,#fff 25%) 50%,var(--fill) 70%);background-size:220% 100%;animation:higShim 1.3s linear infinite}
.hig-skel .t{height:48px;width:55%;border-radius:14px}.hig-skel .k{height:96px}.hig-skel .c{height:200px}
@keyframes higShim{from{background-position:120% 0}to{background-position:-120% 0}}
.q-load,[data-hig-shim]{position:relative;color:transparent!important;border-radius:10px;background:linear-gradient(100deg,var(--fill) 30%,rgba(255,255,255,.35) 50%,var(--fill) 70%);background-size:220% 100%;animation:higShim 1.3s linear infinite}
/* ---- number roll overlay ---- */
.hig-rolling{position:relative;color:transparent!important}
.hig-rolling *{color:transparent!important}
.hig-roll{position:absolute;left:0;top:0;width:100%;white-space:nowrap;pointer-events:none;color:var(--hig-c,inherit);font:inherit;letter-spacing:inherit;text-align:inherit;font-variant-numeric:tabular-nums}
.amtbox b.hig-rolling{display:inline-block}
.amtbox b.hig-rolling .hig-roll{text-align:right}
.hig-bump{animation:higBump .22s var(--hig-spring)}
@keyframes higBump{0%{transform:scale(1)}40%{transform:scale(var(--bump,1.04))}100%{transform:scale(1)}}
.amtbox.hig-shake{animation:higShake .45s}
@keyframes higShake{15%{transform:translateX(-9px)}35%{transform:translateX(8px)}55%{transform:translateX(-6px)}75%{transform:translateX(4px)}}
/* ---- bars & chart tooltips ---- */
.bar>i{transition:width .9s var(--hig-spring)}
.bar{touch-action:pan-y;position:relative}
.bar.hig-scrub>i{filter:brightness(1.08)}
.chart-box canvas{touch-action:pan-y}
.hig-tip{position:fixed;z-index:90;pointer-events:none;padding:6px 12px;border-radius:14px;font-size:.8125rem;font-weight:700;color:var(--label);background:color-mix(in srgb,var(--bg) 78%,transparent);-webkit-backdrop-filter:var(--mat-thick);backdrop-filter:var(--mat-thick);border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.2);transform:translate(-50%,-120%) scale(.9);opacity:0;transition:opacity .15s,transform .3s var(--hig-spring);white-space:nowrap;font-variant-numeric:tabular-nums}
.hig-tip.on{opacity:1;transform:translate(-50%,-120%) scale(1)}
/* ---- mascot reactions ---- */
.mascot::before{content:attr(data-fx);position:absolute;left:50%;top:-6px;font-size:22px;opacity:0;pointer-events:none;transform:translate(-50%,0)}
.mascot[class*=hig-]::before{animation:higPop 1.2s ease-out both}
@keyframes higPop{0%{opacity:0;transform:translate(-50%,6px) scale(.4)}25%{opacity:1;transform:translate(-50%,-16px) scale(1.2)}100%{opacity:0;transform:translate(-50%,-52px) scale(1)}}
.mascot.hig-income{animation:none}.mascot.hig-income img{animation:higJoy .9s var(--hig-spring) 1,tail .2s ease-in-out 8}
.mascot.hig-expense{animation:none}.mascot.hig-expense img{animation:higNod .9s ease-in-out 1}
.mascot.hig-debt{animation:none}.mascot.hig-debt img{animation:higBow 1.1s var(--hig-ease) 1}
.mascot.hig-delete{animation:none}.mascot.hig-delete img{animation:higShakeHead .8s ease-in-out 1}
.mascot.hig-undo{animation:none}.mascot.hig-undo img{animation:higSpin .8s var(--hig-spring) 1}
.mascot.hig-ptr{animation:none}.mascot.hig-ptr img{animation:higSniff .5s ease-in-out infinite}
@keyframes higJoy{0%{transform:translateY(0) scale(1)}30%{transform:translateY(-24px) scale(1.15) rotate(-6deg)}55%{transform:translateY(0) scale(.94,1.06)}75%{transform:translateY(-10px) scale(1.06) rotate(5deg)}100%{transform:none}}
@keyframes higNod{0%,100%{transform:none}30%{transform:translateY(5px) rotate(7deg) scale(.96)}60%{transform:translateY(3px) rotate(4deg) scale(.97)}}
@keyframes higBow{0%{transform:none}35%{transform:rotate(22deg) translate(6px,8px) scaleY(.9)}70%{transform:rotate(22deg) translate(6px,8px) scaleY(.9)}100%{transform:none}}
@keyframes higShakeHead{0%,100%{transform:none}15%{transform:rotate(-18deg)}35%{transform:rotate(16deg)}55%{transform:rotate(-12deg)}75%{transform:rotate(8deg)}}
@keyframes higSpin{0%{transform:rotate(0) scale(1)}60%{transform:rotate(-380deg) scale(1.15)}100%{transform:rotate(-360deg) scale(1)}}
@keyframes higSniff{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(5px) rotate(5deg) scale(1.04)}}
/* ---- action sheet (replaces confirm()) ---- */
dialog.hig-as{position:fixed;inset:auto 0 0 0;margin:0 auto;width:min(520px,100vw);max-width:100vw;max-height:none;padding:8px 8px calc(8px + env(safe-area-inset-bottom));border:0;background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none;overflow:visible;color:var(--label);animation:none;transform:translateY(110%);transition:transform .5s var(--hig-spring)}
dialog.hig-as.on{transform:none}
dialog.hig-as.out{transform:translateY(110%);transition:transform .25s ease-in}
dialog.hig-as::backdrop{background:rgba(0,0,0,.34);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);transition:opacity .3s}
.hig-as .grp{border-radius:20px;overflow:hidden;background:color-mix(in srgb,var(--bg) 86%,transparent);-webkit-backdrop-filter:var(--mat-thick);backdrop-filter:var(--mat-thick);border:1px solid var(--line)}
.hig-as .msg{padding:16px 18px 14px;text-align:center;color:var(--label-2);font-size:.8125rem;white-space:pre-line;border-bottom:1px solid var(--sep)}
.hig-as button{display:block;width:100%;min-height:56px;border:0;background:transparent;font:inherit;font-size:1.0625rem;color:var(--focus);cursor:pointer;position:relative}
.hig-as .grp button+button{border-top:1px solid var(--sep)}
.hig-as button.danger{color:var(--out);font-weight:600}
.hig-as .cancel{margin-top:8px;border-radius:20px;overflow:hidden;background:var(--bg);font-weight:700;border:1px solid var(--line)}
.hig-as button:active{background:var(--fill)}
/* ---- sheet detents ---- */
dialog[data-detent]{transition:height .4s var(--hig-spring);overflow:auto}
dialog.hig-det-drag{transition:none!important;animation:none!important}
dialog .grab{cursor:grab}
dialog .grab:focus-visible{outline:3px solid var(--focus);outline-offset:-6px;border-radius:20px}
/* ---- wheel date picker ---- */
dialog.hig-wheel{position:fixed;inset:auto 0 0 0;margin:0 auto;width:min(520px,100vw);max-width:100vw;border-radius:28px 28px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom));border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:var(--mat-thick);backdrop-filter:var(--mat-thick);color:var(--label);transform:translateY(105%);transition:transform .5s var(--hig-spring);animation:none}
dialog.hig-wheel.on{transform:none}
dialog.hig-wheel::backdrop{background:rgba(0,0,0,.34)}
.hig-wh-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.hig-wh-top b{font-size:1.0625rem}.hig-wh-top button{min-height:44px;min-width:64px;border:0;background:transparent;font:inherit;font-weight:700;color:var(--focus);cursor:pointer;border-radius:12px}
.hig-cols{position:relative;display:flex;gap:4px;height:200px;-webkit-mask-image:linear-gradient(transparent,#000 32%,#000 68%,transparent);mask-image:linear-gradient(transparent,#000 32%,#000 68%,transparent)}
.hig-cols::before{content:"";position:absolute;left:0;right:0;top:80px;height:40px;border-radius:12px;background:var(--fill);pointer-events:none}
.hig-col{flex:1;height:200px;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;padding:80px 0;overscroll-behavior:contain;touch-action:pan-y;position:relative}
.hig-col::-webkit-scrollbar{display:none}
.hig-col div{height:40px;line-height:40px;text-align:center;scroll-snap-align:center;font-size:1.25rem;font-variant-numeric:tabular-nums;transition:transform .15s,opacity .15s;opacity:.55}
.hig-col div.sel{opacity:1;font-weight:700;transform:scale(1.08)}
/* ---- skeleton for text size control ---- */
.hig-ts{display:flex;gap:6px;margin-top:10px}.hig-ts button{flex:1}
/* ---- momentum / scroll polish ---- */
.cats,.scroll,.chart-box{overscroll-behavior-x:contain}
.card,.kpi,.btn,.key,.cat{transition-timing-function:var(--hig-spring)}
/* ---- reduced motion ---- */
@media(prefers-reduced-motion:reduce){
  .hig-skel>i,.q-load,[data-hig-shim]{animation:none}
  .mascot[class*=hig-]::before{animation:none;opacity:1;transform:translate(-50%,-30px)}
  .mascot[class*=hig-] img{animation:none!important}
  dialog.hig-as,dialog.hig-wheel,.hig-tip,dialog[data-detent]{transition:none!important}
  .hig-bump,.amtbox.hig-shake{animation:none}
  #app>h2,#app>.herow h2{transform:none;opacity:1}
  .bar>i{transition:none}
}
/* ---- shared cross-platform touch-feel tokens (Apple HIG motion + Material 3 / One UI) — see DESIGN-FEEDBACK.md ---- */
:root{
  --dur-instant:80ms;--dur-fast:150ms;--dur-std:250ms;--dur-enter:400ms;--dur-emph:500ms;--dur-exit:200ms;
  --ease-std:cubic-bezier(.2,0,0,1);--ease-decel:cubic-bezier(.05,.7,.1,1);--ease-accel:cubic-bezier(.3,0,.8,.15);
  --press-scale:.96;--press-scale-lg:.985;
  --r-focus:32px;           /* One UI "focus block" large rounded container */
  --margin-x:max(24px,env(safe-area-inset-left)); /* One UI ≥24dp side margins; also fine for iOS */
}
main{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}
@media(max-width:360px){main{padding-left:16px;padding-right:16px}}
#app>h2,#app>.herow{margin-top:20px}
.card{border-radius:var(--r-focus)}
.pressed{transform:scale(var(--press-scale))!important}
.rwrap.pressed,.kpi.pressed,.ios-row.pressed{transform:scale(var(--press-scale-lg))!important}
dialog.hig-as.out,dialog.hig-wheel:not(.on){transition-timing-function:var(--ease-accel)}
.hig-tip{transition-duration:var(--dur-fast),var(--dur-enter)}