/* Pack restyle 2026-10-22: design direction 3 「夜行霓光」. CSS override layer only; no data changes. */
:root{
  --color-bg:#0A0A0F;--color-surface:#17171F;--color-surface-2:#1F1F29;--color-border:#2E2E3A;
  --color-track:#26262F;--color-fg:#F5F5F7;--color-muted:#9A9AA8;--color-faint:#80808E;
  --color-spend:#FF5C7A;--color-income:#3DDCFF;
  --font-serif:"Space Grotesk","Noto Sans TC","PingFang TC",sans-serif;
}
body{background:var(--color-bg)}
.font-serif{font-weight:700;letter-spacing:-.01em}
h1.font-serif,h2.font-serif{font-weight:900}
.tabular-nums{font-family:"Space Grotesk",var(--font-sans);font-weight:700}
header p.text-accent{font-weight:700;letter-spacing:.06em}

/* Hero: big ring + big number */
section:has(> div.absolute.h-px.bg-accent){background:transparent;border-color:transparent;padding-left:0;padding-right:0}
section:has(> div.absolute.h-px.bg-accent) > div.absolute.h-px{display:none}
section:has(> div.absolute.h-px.bg-accent) > div.flex-col{align-items:center}
section:has(> div.absolute.h-px.bg-accent) > div.flex-col > div:first-child{
  width:244px;height:244px;margin:4px auto 0;border-radius:50%;flex:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  background:
    radial-gradient(closest-side,var(--color-bg) calc(100% - 18px),transparent calc(100% - 17px)),
    conic-gradient(var(--pack-ring,var(--color-accent)) calc(var(--pack-pct,0) * 1%),var(--color-track) 0);
}
section:has(> div.absolute.h-px.bg-accent) > div.flex-col > div:first-child > p:first-child{font-weight:700}
section:has(> div.absolute.h-px.bg-accent) [aria-live=polite].font-serif{
  font-size:var(--pack-hero-fs,40px);line-height:1.1;letter-spacing:-.02em;white-space:nowrap}
section:has(> div.absolute.h-px.bg-accent) > div.flex-col > div:last-child{width:100%;gap:8px}
section:has(> div.absolute.h-px.bg-accent) > div.flex-col > div:last-child > div,
section:has(> div.absolute.h-px.bg-accent) > div.grid-cols-3 > div{
  background:var(--color-surface);border-radius:16px;padding:12px}
section:has(> div.absolute.h-px.bg-accent) > div.flex-col > div:last-child .text-xl{font-size:22px}
section:has(> div.absolute.h-px.bg-accent) > div.grid-cols-3{border-top:0;padding-top:0;gap:8px}
section:has(> div.absolute.h-px.bg-accent) > div.grid-cols-3 p:first-child{font-size:13px;font-weight:700}
section:has(> div.absolute.h-px.bg-accent) > div.grid-cols-3 p:last-child{font-size:16px;letter-spacing:-.02em}
section:has(> div.absolute.h-px.bg-accent) > div.grid-cols-3 > div{padding:10px 8px}
section:has(> div.absolute.h-px.bg-accent) > div.grid-cols-3 > div:nth-child(2) p:last-child{color:var(--color-accent)}
section:has(> div.absolute.h-px.bg-accent) > div.grid-cols-3 > div:nth-child(3) p:last-child{color:var(--color-spend)}

/* Cards and buttons */
.rounded-2xl{border-radius:20px}
.bg-accent{box-shadow:0 0 18px -6px var(--color-accent)}
button.bg-accent,button.border-border{font-weight:800}
.safe-bottom.fixed{background:linear-gradient(transparent,var(--color-bg) 30%);border-top:0}
.safe-bottom.fixed button{height:60px;border-radius:20px;font-size:19px;font-weight:900}
.safe-bottom.fixed button:first-child{flex:.7;background:var(--color-surface);color:var(--color-income);border:2px solid var(--color-border)}
.safe-bottom.fixed button:last-child::before{content:"＋ "}

/* Add-entry sheet: bigger amount */
[role=dialog] input[inputmode=decimal]{font-family:"Space Grotesk",var(--font-sans);font-weight:700;font-size:56px;height:76px}

/* features-3: Day N pill on the trip dates line */
header p.text-faint::after{content:var(--pack-day,none);display:inline-block;margin-left:8px;padding:1px 10px;border-radius:999px;
  background:var(--color-accent);color:var(--color-accent-fg);font-weight:800;font-size:13px;line-height:20px;vertical-align:1px}
html:not([data-pack-day]) header p.text-faint::after,html[data-pack-day=""] header p.text-faint::after{content:none}

/* features-3: high-contrast toggle + mode */
#pack-contrast{flex:none;height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--color-border);
  background:transparent;color:var(--color-fg);font-size:13px;font-weight:800;white-space:nowrap}
#pack-contrast[aria-pressed=true]{background:#FFFF00;color:#000;border-color:#FFFF00}
html[data-pack-contrast=on]{
  --color-bg:#000!important;--color-surface:#000!important;--color-surface-2:#000!important;
  --color-border:#FFFFFF!important;--color-track:#5A5A5A!important;--color-fg:#FFFFFF!important;
  --color-muted:#FFFFFF!important;--color-faint:#E6E6E6!important;
  --color-accent:#FFFF00!important;--color-accent-fg:#000!important;
  --color-spend:#FF8A8A!important;--color-income:#7FE3FF!important;
  font-size:112.5%;
}
html[data-pack-contrast=on] .border{border-width:2px}
html[data-pack-contrast=on] .border-t{border-top-width:2px}
html[data-pack-contrast=on] .text-xs,html[data-pack-contrast=on] .text-sm{font-weight:600}
html[data-pack-contrast=on] .bg-accent{box-shadow:none}
html[data-pack-contrast=on] *:focus-visible{outline:3px solid #FFFF00;outline-offset:2px}
html[data-pack-contrast=on] section:has(> div.absolute.h-px.bg-accent){border-color:transparent!important}
html[data-pack-contrast=on] section:has(> div.absolute.h-px.bg-accent) > div.flex-col > div:last-child > div,
html[data-pack-contrast=on] section:has(> div.absolute.h-px.bg-accent) > div.grid-cols-3 > div{border:2px solid #FFFFFF}
html[data-pack-contrast=on] section:has(> div.absolute.h-px.bg-accent) > div.grid-cols-3{grid-template-columns:1fr}
html[data-pack-contrast=on] section:has(> div.absolute.h-px.bg-accent) > div.grid-cols-3 > div{display:flex;align-items:center;justify-content:space-between;gap:8px}
html[data-pack-contrast=on] section:has(> div.absolute.h-px.bg-accent) > div.grid-cols-3 p{margin:0;font-size:17px!important}