:root{color-scheme:light;--brand-700: #24315f;--brand-600: #3d477a;--brand-500: #8c6bc3;--brand-300: #c9b6ed;--brand-100: #eee8fb;--rose-700: #7b417c;--rose-500: #d78bcd;--rose-100: #f8e4f6;--lav-700: #5f4b86;--lav-500: #a68cda;--lav-100: #eee9ff;--sand-700: #76551b;--sand-500: #e7b94f;--sand-100: #fff4d5;--blue-700: #3e568f;--blue-100: #e8edff;--canvas: #f7f4ff;--canvas-raised: #fbf9ff;--surface: #fffaff;--surface-strong: #ffffff;--ink: #17265a;--ink-2: #4d5477;--ink-3: #7c80a0;--line: rgba(36, 49, 95, .12);--line-strong: rgba(36, 49, 95, .22);--overlay: rgba(24, 20, 52, .48);--shadow-sm: 0 2px 10px rgba(63, 45, 102, .06);--shadow-md: 0 14px 34px rgba(63, 45, 102, .12);--shadow-float: 0 16px 38px rgba(123, 65, 124, .22);--radius-sm: 12px;--radius-md: 18px;--radius-lg: 24px;--radius-xl: 30px;--radius: var(--radius-md);--font-body: "IBM Plex Sans Thai Looped", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-display: var(--font-body);--mint: var(--brand-500);--mint-deep: var(--brand-700);--mint-soft: var(--brand-100);--pink: var(--rose-500);--pink-deep: var(--rose-700);--pink-soft: var(--rose-100);--lav: var(--lav-500);--lav-deep: var(--lav-700);--lav-soft: var(--lav-100);--peach-soft: var(--sand-100);--peach-deep: var(--sand-700);--cream: var(--canvas);--card: var(--surface);--ink-soft: var(--ink-3)}*{box-sizing:border-box;margin:0;padding:0}html{background:var(--canvas);min-height:100%}body{background:radial-gradient(circle at 12% -5%,rgba(201,182,237,.48),transparent 28rem),radial-gradient(circle at 102% 4%,rgba(248,196,238,.34),transparent 25rem),radial-gradient(circle at -8% 62%,rgba(196,230,219,.2),transparent 22rem),var(--canvas);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}button,input,select{font:inherit}button,input,select,textarea{-webkit-tap-highlight-color:transparent}button{touch-action:manipulation}#root{width:100%;max-width:480px;min-height:100dvh;margin:0 auto;position:relative;background:#f7f4ff6b}.screen{padding:22px 18px 116px}.screen-header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:18px}.screen-title{display:flex;align-items:center;gap:10px}.screen-title-copy{min-width:0}.eyebrow{color:var(--ink-3);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}h1,h2,h3,.display{color:var(--ink);font-family:var(--font-display);font-weight:650;letter-spacing:-.02em}h1{font-size:clamp(23px,6.2vw,28px);line-height:1.22}h2{font-size:18px;line-height:1.3}h3{font-size:15px;line-height:1.35}p{text-wrap:pretty}.muted{color:var(--ink-3);font-size:13px}.small{font-size:12px}.section-label{color:var(--ink-2);font-size:12px;font-weight:600;letter-spacing:.02em;margin-bottom:8px}.row{display:flex;align-items:center;gap:10px}.between{justify-content:space-between}.grow{flex:1;min-width:0}.stack{display:flex;flex-direction:column;gap:12px}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:17px;margin-bottom:12px}.card.soft{border-color:transparent;box-shadow:none}.soft.mint{background:var(--brand-100)}.soft.pink{background:var(--rose-100)}.soft.lav{background:var(--lav-100)}.soft.sand{background:var(--sand-100)}.hero-card{overflow:hidden;position:relative;padding:20px;background:linear-gradient(145deg,var(--brand-700) 0%,var(--brand-600) 56%,var(--lav-700) 100%);color:#fbf8ff;border:0;border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}.hero-card:after{content:"";position:absolute;width:180px;height:180px;right:-88px;top:-104px;border:32px solid rgba(255,255,255,.08);border-radius:50%;box-shadow:-96px 122px 0 8px #d78bcd14}.hero-card .muted,.hero-card .small{color:#fbf8ffb8}.hero-card .big-amount{color:#fff}.hero-card .bar{background:#ffffff29}.hero-card .bar>div{background:#d8c7ff}.hero-card .bar>div.over{background:#f3b6e9}.big-amount{font-family:var(--font-display);font-size:32px;font-weight:700;line-height:1.1;letter-spacing:-.035em;font-variant-numeric:tabular-nums}.money-value{font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:-.015em}.positive{color:var(--brand-700)}.caution{color:var(--rose-700)}.bar{height:8px;overflow:hidden;margin-top:10px;background:var(--line);border-radius:999px}.bar>div{height:100%;background:var(--brand-500);border-radius:inherit;transition:width .35s ease}.bar>div.over{background:var(--rose-500)}button{min-height:44px;padding:10px 16px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);cursor:pointer;font-size:14px;font-weight:500;transition:transform .14s ease,background .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease}button:hover{border-color:var(--line-strong)}button:active{transform:scale(.975)}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid rgba(140,107,195,.32);outline-offset:2px}button:disabled{cursor:not-allowed;opacity:.42}button.primary{color:#fff;background:var(--brand-700);border-color:transparent;font-weight:600;box-shadow:0 7px 18px #24315f33}button.primary:hover{background:var(--brand-600)}button.secondary{color:var(--brand-700);background:var(--brand-100);border-color:transparent;font-weight:600}button.ghost{min-height:40px;padding-inline:10px;color:var(--ink-2);background:transparent;border-color:transparent;box-shadow:none}button.icon-button{width:44px;min-width:44px;height:44px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:14px}input,select{width:100%;min-height:50px;padding:12px 14px;color:var(--ink);background:var(--surface-strong);border:1px solid var(--line);border-radius:14px;outline:none;font-size:16px}input::placeholder{color:var(--ink-3);opacity:.84}input:focus,select:focus{border-color:var(--brand-500);box-shadow:0 0 0 3px #8c6bc324}.field-label{display:block;margin:13px 0 6px;color:var(--ink-2);font-size:12px;font-weight:600}.chip{min-height:38px;padding:7px 13px;display:inline-flex;align-items:center;justify-content:center;gap:7px;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-radius:999px;font-size:13px}.chip.active{color:var(--brand-700);background:var(--brand-100);border-color:var(--brand-300);font-weight:600}.segmented-control{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;background:#24315f0f;border-radius:15px}.segmented-control button{min-height:40px;padding:8px 10px;background:transparent;border-color:transparent;box-shadow:none}.segmented-control button.active{color:var(--brand-700);background:var(--surface);border-color:var(--line);box-shadow:var(--shadow-sm)}.aom-icon{display:block;flex:0 0 auto}.icon-badge{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;color:var(--ink-2);background:#24315f0f;border-radius:14px}.icon-badge.tone-brand{color:var(--brand-700);background:var(--brand-100)}.icon-badge.tone-rose{color:var(--rose-700);background:var(--rose-100)}.icon-badge.tone-lavender{color:var(--lav-700);background:var(--lav-100)}.icon-badge.tone-sand{color:var(--sand-700);background:var(--sand-100)}.icon-badge.tone-blue{color:var(--blue-700);background:var(--blue-100)}.logo-mark{overflow:visible}.logo-mark-heart,.logo-mark-path{fill:none;stroke-linecap:round;stroke-linejoin:round}.logo-mark-heart{stroke:var(--brand-700);stroke-width:4.7}.logo-mark-path{stroke:var(--brand-500);stroke-width:4.1}.logo-mark-seed{fill:var(--sand-500)}.brand-lockup{display:flex;align-items:center;gap:11px}.brand-lockup.compact{gap:8px}.brand-name{color:var(--ink);font-size:21px;font-weight:700;line-height:1;letter-spacing:-.03em}.brand-tagline{margin-top:4px;color:var(--ink-3);font-size:11px}.tabbar{position:fixed;z-index:40;left:50%;bottom:0;width:100%;max-width:480px;padding:7px 10px calc(7px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(5,1fr);align-items:end;transform:translate(-50%);background:color-mix(in srgb,var(--surface) 92%,transparent);border-top:1px solid var(--line);box-shadow:0 -10px 32px #3f2d6614;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.tabbar button{min-width:0;min-height:54px;padding:6px 3px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--ink-3);background:transparent;border-color:transparent;border-radius:14px;font-size:10px;box-shadow:none}.tabbar button.active{color:var(--brand-700);background:var(--brand-100);font-weight:600}.tabbar .tab-icon{width:25px;height:25px;padding:3px;display:grid;place-items:center;border-radius:9px}.tabbar button.active .tab-icon{background:var(--surface);box-shadow:var(--shadow-sm)}.tabbar .fab{width:56px;min-height:56px;height:56px;margin:-22px auto 0;padding:0;color:#17265a;background:var(--sand-500);border:5px solid var(--surface);border-radius:50%;box-shadow:var(--shadow-float)}.tabbar .fab.active{color:#17265a;background:var(--sand-500)}.sheet-backdrop{position:fixed;z-index:50;top:0;right:0;bottom:0;left:0;display:flex;align-items:flex-end;justify-content:center;background:var(--overlay);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.sheet{width:100%;max-width:480px;max-height:92dvh;overflow-y:auto;overscroll-behavior:contain;padding:12px 18px calc(24px + env(safe-area-inset-bottom));background:var(--canvas-raised);border:1px solid var(--line);border-bottom:0;border-radius:28px 28px 0 0;box-shadow:var(--shadow-md);animation:slideup .24s ease both}.sheet:before{content:"";width:38px;height:4px;display:block;margin:0 auto 16px;background:var(--line-strong);border-radius:999px}.sheet-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.sheet-section{padding:14px 0;border-top:1px solid var(--line)}.sheet-section:first-of-type{border-top:0}.sheet-actions{position:sticky;z-index:3;bottom:calc(-24px - env(safe-area-inset-bottom));margin:14px -18px calc(-24px - env(safe-area-inset-bottom));padding:12px 18px calc(18px + env(safe-area-inset-bottom));background:linear-gradient(180deg,transparent 0,var(--canvas-raised) 18px)}@keyframes slideup{0%{transform:translateY(36px);opacity:.5}to{transform:none;opacity:1}}@keyframes pop{0%{transform:translate(-50%,8px);opacity:0}to{transform:translate(-50%);opacity:1}}.numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:10px 0 14px}.numpad button{min-height:48px;padding:8px 0;font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;background:var(--surface)}.quickadd-sheet{max-height:96dvh;padding-bottom:0}.quickadd-amount{margin:6px 0 2px;text-align:center;font-size:38px}.cat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:9px 0}.cat-tile{min-width:0;min-height:78px;padding:8px 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-radius:16px;font-size:11px;line-height:1.2}.cat-tile span:last-child{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cat-tile.active{color:var(--brand-700);background:var(--brand-100);border-color:var(--brand-500);box-shadow:0 0 0 1px var(--brand-500)}.cat-tile .cat-emoji{display:grid;place-items:center;font-size:inherit}.tx-row{display:flex;align-items:center;gap:12px;min-height:58px;padding:9px 0;border-bottom:1px solid var(--line)}.tx-row:last-child{border-bottom:0}.tx-emoji{width:42px;height:42px;display:flex;flex:0 0 auto;align-items:center;justify-content:center;color:var(--brand-700);background:var(--brand-100);border-radius:14px;font-size:0}.metric-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:12px}.metric-card{min-width:0;padding:14px;background:var(--surface);border:1px solid var(--line);border-radius:16px}.metric-card .money-value{margin-top:4px;font-size:19px}.feature-list{display:grid;gap:9px}.feature-row{width:100%;padding:12px;display:flex;align-items:center;gap:12px;text-align:left}.feature-row-copy{flex:1;min-width:0}.feature-row-copy p:first-child{color:var(--ink);font-weight:600}.ai-card{display:flex;align-items:center;gap:13px;background:linear-gradient(135deg,var(--brand-100),var(--blue-100));border-color:transparent}.ai-card-copy{flex:1;min-width:0}.ai-label{display:inline-flex;align-items:center;gap:5px;margin-bottom:5px;color:var(--brand-700);font-size:11px;font-weight:700;letter-spacing:.035em;text-transform:uppercase}.ai-card p:last-child{color:var(--ink-2);font-size:13px;line-height:1.55}.toast{position:fixed;z-index:99;left:50%;bottom:98px;max-width:calc(100% - 36px);padding:11px 18px;transform:translate(-50%);color:var(--surface);background:var(--ink);border-radius:999px;box-shadow:var(--shadow-md);font-size:13px;white-space:nowrap;animation:pop .18s ease}.bubble{position:relative;margin:11px 0;padding:15px 16px;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-radius:8px 20px 20px;font-size:14px;line-height:1.6}.ob-options{display:flex;flex-wrap:wrap;gap:8px;margin:11px 0}.onboarding-screen{min-height:100dvh;padding:24px 18px;display:flex;flex-direction:column}.onboarding-header{display:flex;align-items:center;justify-content:space-between;gap:14px}.onboarding-progress{display:flex;gap:5px;margin:22px 0 20px}.onboarding-progress span{height:4px;flex:1;background:var(--line);border-radius:999px;transition:background .2s ease}.onboarding-progress span.done{background:var(--brand-500)}.onboarding-panel{flex:1;display:flex;flex-direction:column;justify-content:center;padding-bottom:24px}.onboarding-hero{margin-bottom:18px}.onboarding-hero h1{max-width:330px;font-size:30px;line-height:1.25}.onboarding-hero p{margin-top:8px;color:var(--ink-2);line-height:1.6}.choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin:14px 0}.choice-card{min-height:94px;padding:13px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:10px;text-align:left}.choice-card.active{color:var(--brand-700);background:var(--brand-100);border-color:var(--brand-500);box-shadow:0 0 0 1px var(--brand-500)}.onboarding-actions{display:flex;align-items:center;gap:10px;margin-top:16px}.settings-group{margin-bottom:12px;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md)}.settings-group summary{min-height:54px;padding:13px 15px;display:flex;align-items:center;gap:11px;cursor:pointer;list-style:none;font-weight:600}.settings-group summary::-webkit-details-marker{display:none}.settings-group summary .chevron{margin-left:auto;transition:transform .2s ease}.settings-group[open] summary .chevron{transform:rotate(90deg)}.settings-content{padding:0 15px 16px}.empty-state{padding:24px 16px;text-align:center;color:var(--ink-3);background:#ffffff3d;border:1px dashed var(--line-strong);border-radius:16px}.empty-state .icon-badge{margin:0 auto 10px}.empty-state p{margin:0 auto;max-width:300px;font-size:13px;line-height:1.55}.sparkline{width:100%;height:48px;margin-top:8px}@media(max-width:360px){.screen{padding-inline:14px}.cat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.choice-grid{grid-template-columns:1fr}.tabbar{padding-inline:6px}.tabbar button{font-size:9px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}