/* ---------- Background 5: starry night galaxy, glass bubble cards ---------- */
:root {
  --void: #07080c;
  --ink: #f3f4f8;
  --ink-2: #b7bccb;
  --ink-3: #7d8396;
  --stroke: rgba(255, 255, 255, 0.09);
  --stroke-2: rgba(255, 255, 255, 0.16);
  --card-bg: linear-gradient(170deg, rgba(36, 39, 54, 0.86), rgba(20, 22, 31, 0.9));
  --card-shadow: 0 22px 44px -20px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.12) inset;
  --tab-bg: rgba(16, 18, 26, 0.86);
  --sheet-bg: linear-gradient(180deg, rgb(30, 33, 46), rgb(13, 14, 20));
}
html, body { background: var(--void); }
.aurora, .dots { display: none !important; }

.scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; contain: strict; transform: translateZ(0); }
.scene.bg-1 .sky { position: absolute; inset: 0;
  background: linear-gradient(180deg, #080a12 0%, #0f1222 38%, #1d2038 58%, #3a2f45 72%, #5b3d48 80%, #1a1b28 100%); }
.scene.bg-1 .haze { position: absolute; left: -20%; right: -20%; top: 56%; height: 30%;
  background: radial-gradient(60% 50% at 50% 50%, rgba(255, 160, 110, 0.32), transparent 70%); }
.scene.bg-1 .moon { display: none; position: absolute; right: 7%; top: 30%; width: 46px; height: 46px; opacity: 0.9; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #fffaf0 0%, #e9e2d2 45%, #b8b1a3 100%);
  box-shadow: 0 0 40px 10px rgba(255, 240, 210, 0.18), 0 0 120px 40px rgba(255, 240, 210, 0.07); }
.scene.bg-1 .stars { position: absolute; inset: 0 0 45% 0;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1px 1px at 28% 8%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 44% 26%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1px 1px at 58% 12%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1px 1px at 70% 32%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 86% 22%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1px 1px at 8% 40%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1px 1px at 36% 44%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1px 1px at 92% 46%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1px 1px at 52% 52%, rgba(255,255,255,.3), transparent 60%); }
.scene.bg-1 .ridges { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 62%; }

.scene.bg-2 .sky { position: absolute; inset: 0; background: linear-gradient(180deg, #05070f 0%, #0a1024 45%, #0b1128 100%); }
.scene.bg-2 .glow { position: absolute; left: -30%; right: -30%; top: 22%; height: 45%; background: radial-gradient(50% 50% at 60% 50%, rgba(110, 140, 255, 0.18), transparent 70%); }
.scene.bg-2 .waves { position: absolute; inset: 0; width: 100%; height: 100%; }

.scene.bg-3 .sky { position: absolute; inset: 0; background: radial-gradient(120% 80% at 30% 20%, #0d1022 0%, #06070f 60%, #030409 100%); }
.scene.bg-3 .stars { position: absolute; inset: 0; }
.scene.bg-3 .stars.far { opacity: .55; background-image:
    radial-gradient(1px 1px at 42% 20%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1px 1px at 51% 84%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1px 1px at 7% 10%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1px 1px at 69% 13%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1px 1px at 47% 75%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1px 1px at 8% 65%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1px 1px at 28% 5%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1px 1px at 12% 56%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1px 1px at 54% 9%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1px 1px at 31% 12%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1px 1px at 71% 55%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1px 1px at 8% 73%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1px 1px at 16% 29%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1px 1px at 81% 81%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1px 1px at 75% 8%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1px 1px at 74% 75%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1px 1px at 51% 7%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1px 1px at 29% 6%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1px 1px at 72% 18%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1px 1px at 38% 54%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1px 1px at 19% 70%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1px 1px at 16% 74%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1px 1px at 40% 72%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1px 1px at 88% 24%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1px 1px at 14% 75%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1px 1px at 74% 82%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1px 1px at 25% 48%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1px 1px at 13% 71%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1px 1px at 92% 9%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1px 1px at 73% 8%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1px 1px at 80% 27%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1px 1px at 64% 88%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1px 1px at 69% 55%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1px 1px at 41% 60%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1px 1px at 75% 59%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1px 1px at 47% 39%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1px 1px at 32% 24%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1px 1px at 90% 32%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1px 1px at 11% 74%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1px 1px at 39% 68%, rgba(255,255,255,0.8), transparent 60%); }
.scene.bg-3 .stars.near { opacity: .9; background-image:
    radial-gradient(2px 2px at 65% 45%, rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(2px 2px at 95% 59%, rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(2px 2px at 38% 11%, rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(2px 2px at 17% 67%, rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(2px 2px at 55% 23%, rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(2px 2px at 98% 45%, rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(2px 2px at 21% 64%, rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(2px 2px at 55% 7%, rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(2px 2px at 87% 11%, rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(2px 2px at 73% 42%, rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(2px 2px at 45% 46%, rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(2px 2px at 78% 65%, rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(2px 2px at 76% 60%, rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(2px 2px at 10% 13%, rgba(255,255,255,0.9), transparent 60%); }
.scene.bg-3 .nebula { position: absolute; inset: 0; background:
    radial-gradient(40% 25% at 20% 30%, rgba(120, 90, 200, 0.10), transparent 70%),
    radial-gradient(35% 22% at 80% 18%, rgba(80, 140, 220, 0.08), transparent 70%); }
.scene.bg-3 .planet { position: absolute; width: 150vw; height: 150vw; left: -5vw; top: 62%; border-radius: 50%;
  background: radial-gradient(circle at 50% 8%, #4b67b8 0%, #2a3c78 18%, #141d40 40%, #070a17 70%);
  box-shadow: 0 -8px 40px rgba(110, 150, 255, 0.25); }
.scene.bg-3 .planet .atmo { position: absolute; inset: -3px; border-radius: 50%; border-top: 3px solid rgba(160, 190, 255, 0.55); filter: blur(2px); }
.scene.bg-3 .moonlet { position: absolute; width: 22px; height: 22px; left: 14%; top: 44%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c9cfdc 0%, #6b7287 55%, #1d2130 100%); opacity: .85; }

.scene.bg-4 .sky { position: absolute; inset: 0; background: linear-gradient(180deg, #04050a 0%, #080b16 40%, #11152a 66%, #04060c 100%); }
.scene.bg-4 .stars { position: absolute; inset: 0 0 50% 0; opacity: .45; background-image:
    radial-gradient(1px 1px at 14% 12%, #fff, transparent 60%), radial-gradient(1px 1px at 33% 22%, #fff, transparent 60%),
    radial-gradient(1px 1px at 57% 9%, #fff, transparent 60%), radial-gradient(1px 1px at 76% 27%, #fff, transparent 60%),
    radial-gradient(1px 1px at 90% 14%, #fff, transparent 60%), radial-gradient(1px 1px at 46% 35%, #fff, transparent 60%); }
.scene.bg-4 .city { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 1; }

.scene.bg-5 .sky { position: absolute; inset: 0; background: radial-gradient(130% 90% at 60% 40%, #0d0f22 0%, #070814 55%, #030409 100%); }
.scene.bg-5 .galaxy { position: absolute; inset: 0; width: 100%; height: 100%; }

.scene.bg-6 .sky { position: absolute; inset: 0; background: linear-gradient(180deg, #03060b 0%, #061218 45%, #0a1a20 70%, #05080c 100%); }
.scene.bg-6 .curtain { position: absolute; left: -20%; right: -20%; height: 46%; filter: blur(28px); opacity: .32; border-radius: 50%; }
.scene.bg-6 .c1 { top: 8%; background: linear-gradient(100deg, transparent 10%, #2fbf8f 35%, #4fd1c5 55%, transparent 80%); transform: rotate(-12deg) skewX(-20deg); }
.scene.bg-6 .c2 { top: 20%; background: linear-gradient(80deg, transparent 15%, #3f8fd6 40%, #6a7fe0 60%, transparent 85%); transform: rotate(8deg) skewX(25deg); opacity: .22; }
.scene.bg-6 .stars { position: absolute; inset: 0 0 40% 0; opacity: .5; background-image: radial-gradient(1px 1px at 10% 15%, #fff, transparent 60%), radial-gradient(1px 1px at 30% 6%, #fff, transparent 60%), radial-gradient(1px 1px at 52% 18%, #fff, transparent 60%), radial-gradient(1px 1px at 70% 9%, #fff, transparent 60%), radial-gradient(1px 1px at 88% 25%, #fff, transparent 60%), radial-gradient(1px 1px at 42% 34%, #fff, transparent 60%), radial-gradient(1px 1px at 16% 40%, #fff, transparent 60%); }
.scene.bg-6 svg, .scene.bg-6 .baked { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 45%; }
.scene.bg-7 .sky { position: absolute; inset: 0; background: linear-gradient(180deg, #0b2a3d 0%, #071c2b 30%, #04111c 65%, #020810 100%); }
.scene.bg-7 .rays { position: absolute; left: -30%; right: -30%; top: -10%; height: 80%; opacity: .16;
  background: repeating-linear-gradient(100deg, transparent 0 38px, rgba(170, 230, 255, .9) 44px 52px, transparent 60px 110px);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 85%); mask-image: linear-gradient(to bottom, #000, transparent 85%); filter: blur(6px); transform: skewX(-8deg); }
.scene.bg-7 .surface { position: absolute; left: 0; right: 0; top: 0; height: 18%; background: radial-gradient(70% 100% at 50% 0%, rgba(140, 210, 240, .18), transparent 70%); }
.scene.bg-7 .motes { position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(1.5px 1.5px at 12% 30%, #bfeaff, transparent 60%), radial-gradient(1px 1px at 26% 62%, #bfeaff, transparent 60%), radial-gradient(1.5px 1.5px at 48% 44%, #bfeaff, transparent 60%), radial-gradient(1px 1px at 66% 72%, #bfeaff, transparent 60%), radial-gradient(1.5px 1.5px at 82% 38%, #bfeaff, transparent 60%), radial-gradient(1px 1px at 90% 80%, #bfeaff, transparent 60%), radial-gradient(1px 1px at 36% 86%, #bfeaff, transparent 60%); }
.scene.bg-7 .floor { position: absolute; left: -10%; right: -10%; bottom: -6%; height: 22%; border-radius: 50% 50% 0 0; background: radial-gradient(60% 80% at 50% 0%, #0b2433, #03080d 70%); }
.scene.bg-8 .sky { position: absolute; inset: 0; background: linear-gradient(180deg, #06070f 0%, #0d1024 45%, #1d1a2e 70%, #0a0910 100%); }
.scene.bg-8 .stars { position: absolute; inset: 0 0 45% 0; opacity: .6; background-image: radial-gradient(1px 1px at 8% 10%, #fff, transparent 60%), radial-gradient(1.5px 1.5px at 22% 24%, #fff, transparent 60%), radial-gradient(1px 1px at 40% 8%, #fff, transparent 60%), radial-gradient(1px 1px at 58% 30%, #fff, transparent 60%), radial-gradient(1.5px 1.5px at 74% 14%, #fff, transparent 60%), radial-gradient(1px 1px at 90% 34%, #fff, transparent 60%), radial-gradient(1px 1px at 32% 40%, #fff, transparent 60%), radial-gradient(1px 1px at 66% 46%, #fff, transparent 60%); }
.scene.bg-8 .moonglow { position: absolute; right: -10%; top: 30%; width: 70%; height: 30%; background: radial-gradient(50% 50% at 50% 50%, rgba(200, 190, 255, .10), transparent 70%); }
.scene.bg-8 svg, .scene.bg-8 .baked { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 55%; }

/* glass bubbles: see-through cards that show the sky behind them */
:root {
  --card-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
  --card-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(255, 255, 255, 0.04), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  --tab-bg: rgba(18, 20, 34, 0.45);
}
.glass, .stat, .hero, .list { -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%); border-color: rgba(255, 255, 255, 0.10); }
.glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 60% at 20% 0%, rgba(255, 255, 255, 0.10), transparent 55%); }
.glass { position: relative; }
.tabbar { -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }

/* calm buttons and numbers on every screen, not just Money */
.num.acc, .tile-num, .stat-num { background: none !important; -webkit-text-fill-color: var(--ink) !important; color: var(--ink) !important; }
.iconbtn.plus { background: rgba(255, 255, 255, 0.10); color: var(--ink); box-shadow: inset 0 0 0 1px var(--stroke-2); }
.btn { background: color-mix(in srgb, var(--a2) 18%, transparent); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a2) 38%, transparent); }
.seg .pill { background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.seg button.on { color: var(--ink); }
.chip.on { box-shadow: none; }

/* name on Today: clean white instead of the purple-blue gradient */
.head .title .grad-text { background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: #cdd8ec; color: #cdd8ec; text-shadow: none; }

/* ---------- Money, redesigned to sit with the night skyline ---------- */
#screen:has(> .seg) .seg .pill { background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); }
#screen:has(> .seg) .seg button.on { color: var(--ink); }
#screen:has(> .seg) .num.acc, #screen:has(> .seg) .tile-num { background: none; -webkit-text-fill-color: var(--ink); color: var(--ink); }
#screen:has(> .seg) .iconbtn.plus { background: rgba(255, 255, 255, 0.10); color: var(--ink); box-shadow: inset 0 0 0 1px var(--stroke-2); }
#screen:has(> .seg) .btn { background: rgba(157, 177, 230, 0.16); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(157, 177, 230, 0.35); }
.m-amount { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; }
.m-amount small { font-size: 20px; color: var(--ink-3); }
.m-amount .num { font-size: 54px; font-weight: 300; letter-spacing: -0.04em; color: var(--ink); }
.m-compare { margin-top: 14px; }
.m-track { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.m-track i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #6f86c9, #9db1e6); transition: width 0.9s cubic-bezier(.2,.9,.2,1); }
.m-compare-text { font-size: 13px; color: var(--ink-3); margin-top: 7px; }
.m-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--stroke); }
.m-stats span { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.m-stats b { display: block; font-weight: 500; font-size: 16px; margin-top: 4px; white-space: nowrap; }
.m-stack { display: flex; gap: 3px; height: 10px; margin: 14px 0 6px; border-radius: 6px; overflow: hidden; }
.m-stack i { display: block; min-width: 4px; opacity: 0.85; }
.m-cats { display: grid; }
.m-cat { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--stroke); font-size: 15px; }
.m-cat:last-child { border-bottom: 0; padding-bottom: 0; }
.m-cat .grow { flex: 1; }
.m-cat .muted { color: var(--ink-3); font-size: 13px; }
.m-cat b { font-weight: 500; min-width: 82px; text-align: right; }
.m-ci { display: grid; }

/* your own photo as the background, dimmed so cards stay readable */
.scene.bg-photo { background: center / cover no-repeat; }
.scene.bg-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,8,16,.45), rgba(6,8,16,.62)); }
.bg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.bg-opt { font: inherit; font-size: 14px; color: var(--text, #e8eaf0); text-align: left; padding: 12px 14px; border-radius: 14px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); cursor: pointer; }
.bg-opt.on { background: rgba(205,216,236,.18); border-color: rgba(205,216,236,.5); }
.bg-grid + .btn { width: 100%; justify-content: center; gap: 8px; }

.scene[class*="bg-"] .sky { position: absolute; inset: 0; }
.scene[class*="bg-"] .galaxy { position: absolute; inset: 0; width: 100%; height: 100%; }

.scene img.baked { display: block; user-select: none; -webkit-user-drag: none; }