/* ============================================================
   省钱搭子 BudgetBuddy — App UI Kit styles
   Loads tokens from ../../colors_and_type.css
   ============================================================ */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body { background:#E9E6DF; font-family:var(--font-sans); color:var(--fg1); }
.lic { display:inline-flex; align-items:center; justify-content:center; }
.lic svg { width:100%; height:100%; display:block; }

/* ---------- Stage / phone frame ---------- */
.stage { min-height:100vh; display:flex; align-items:center; justify-content:center; gap:40px; padding:40px; flex-wrap:wrap; }
.phone { width:390px; height:844px; background:#fff; border-radius:46px; padding:11px; box-shadow:0 2px 4px rgba(0,0,0,.18), 0 30px 60px rgba(60,50,40,.28); position:relative; flex:none; }
.bezel { width:100%; height:100%; background:var(--bg); border-radius:36px; overflow:hidden; position:relative; display:flex; flex-direction:column; }
.notch { position:absolute; top:0; left:50%; transform:translateX(-50%); width:128px; height:30px; background:#0c0c0e; border-radius:0 0 18px 18px; z-index:60; }

/* ---------- Status bar ---------- */
.statusbar { height:50px; flex:none; display:flex; align-items:center; justify-content:space-between; padding:0 26px; padding-top:8px; font:600 15px/1 var(--font-num); color:var(--ink-900); position:relative; z-index:50; }
.statusbar .right { display:flex; align-items:center; gap:6px; }
.statusbar .lic { width:17px; height:17px; }

/* ---------- Screen scroll ---------- */
.screen { flex:1; overflow-y:auto; overflow-x:hidden; position:relative; }
.screen::-webkit-scrollbar { display:none; }
.pad { padding:8px 20px 120px; }

/* ---------- Top bar ---------- */
.topbar { display:flex; align-items:center; gap:12px; padding:6px 20px 10px; }
.topbar h1 { font:var(--t-h1); white-space:nowrap; }
.topbar .sub { font:var(--t-caption); color:var(--fg3); margin-top:2px; white-space:nowrap; }
.topbar .spacer { flex:1; }
.iconbtn { width:40px; height:40px; border-radius:12px; background:var(--surface); box-shadow:var(--shadow-sm); display:grid; place-items:center; color:var(--ink-700); border:none; cursor:pointer; }
.iconbtn .lic { width:21px; height:21px; }
.back { width:40px; height:40px; border-radius:50%; background:var(--surface); box-shadow:var(--shadow-sm); display:grid; place-items:center; color:var(--ink-900); border:none; cursor:pointer; }
.back .lic { width:22px; height:22px; }

/* ---------- Cards ---------- */
.card { background:var(--surface); border-radius:18px; box-shadow:var(--shadow-card); padding:18px; }
.card.flat { box-shadow:none; border:1px solid var(--line); }
.sec-title { font:var(--t-h2); margin:18px 2px 10px; display:flex; align-items:center; justify-content:space-between; white-space:nowrap; gap:10px; }
.sec-title a { font:var(--t-caption); color:var(--blue-500); display:flex; align-items:center; gap:2px; flex:none; cursor:pointer; }
.sec-title a .lic { width:14px; height:14px; }

/* ---------- Buttons ---------- */
.btn { border:none; cursor:pointer; white-space:nowrap; font:600 17px/1 var(--font-sans); border-radius:var(--r-pill); display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:transform var(--dur) var(--ease), background var(--dur) var(--ease); }
.btn:active { transform:scale(.97); }
.btn .lic { width:20px; height:20px; }
.btn-primary { background:var(--blue-500); color:#fff; padding:16px 24px; box-shadow:0 6px 16px rgba(74,134,232,.28); }
.btn-primary:active { background:var(--blue-600); }
.btn-secondary { background:var(--blue-50); color:var(--blue-700); padding:16px 24px; }
.btn-orange { background:var(--orange-500); color:#fff; padding:16px 24px; box-shadow:0 6px 16px rgba(255,154,61,.28); }
.btn-ghost { background:transparent; color:var(--ink-700); padding:14px 20px; border:1.5px solid var(--line-strong); }
.btn-block { width:100%; }

/* ---------- Category tile ---------- */
.cat-tile { width:44px; height:44px; border-radius:13px; display:grid; place-items:center; flex:none; }
.cat-tile.lg { width:52px; height:52px; border-radius:15px; }
.cat-tile .lic { width:23px; height:23px; }
.cat-tile.lg .lic { width:26px; height:26px; }

/* ---------- List rows ---------- */
.list { display:flex; flex-direction:column; }
.row { display:flex; align-items:center; gap:13px; padding:13px 4px; }
.row + .row { border-top:1px solid var(--line); }
.row .grow { flex:1; min-width:0; }
.row .t1 { font:var(--t-body); color:var(--ink-900); }
.row .t2 { font:var(--t-caption); color:var(--fg3); margin-top:2px; }
.row .amt { font:var(--t-num); color:var(--ink-900); white-space:nowrap; }
.row .amt.in { color:var(--green-600); }

/* ---------- Progress ---------- */
.track { height:10px; background:var(--surface-2); border-radius:999px; overflow:hidden; }
.fill { height:100%; border-radius:999px; transition:width .9s var(--ease); }
.bar-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.bar-head .l { font:var(--t-body-sm); color:var(--ink-900); }
.bar-head .r { font:var(--t-num); color:var(--fg2); }

/* ---------- Goal ring ---------- */
.ring { position:relative; display:grid; place-items:center; flex:none; }
.ring svg { transform:rotate(-90deg); }
.ring circle.fg { transition:stroke-dashoffset 1s var(--ease); }
.ring .center { position:absolute; text-align:center; }

/* ---------- Tab bar ---------- */
.tabbar { position:absolute; left:0; right:0; bottom:0; height:88px; background:rgba(255,255,255,.92); backdrop-filter:blur(12px); border-top:1px solid var(--line); display:flex; align-items:flex-start; padding:9px 16px 0; z-index:40; }
.tab { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--ink-500); background:none; border:none; cursor:pointer; padding-top:4px; }
.tab .lic { width:25px; height:25px; }
.tab span { font:11px/1 var(--font-sans); }
.tab.on { color:var(--blue-500); }
.tab-fab-wrap { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; }
.fab { width:56px; height:56px; border-radius:50%; background:var(--blue-500); display:grid; place-items:center; box-shadow:var(--shadow-float); margin-top:-26px; border:none; cursor:pointer; transition:transform var(--dur) var(--ease); }
.fab:active { transform:scale(.94); }
.fab .lic { width:28px; height:28px; color:#fff; }
.tab-fab-wrap span { font:11px/1 var(--font-sans); color:var(--ink-500); }

/* ---------- Bottom sheet ---------- */
.scrim { position:absolute; inset:0; background:rgba(43,42,49,.4); z-index:70; opacity:0; pointer-events:none; transition:opacity var(--dur) var(--ease); }
.scrim.show { opacity:1; pointer-events:auto; }
.sheet { position:absolute; left:0; right:0; bottom:0; background:var(--surface); border-radius:24px 24px 0 0; z-index:71; transform:translateY(100%); transition:transform .32s var(--ease); padding:10px 20px 28px; }
.sheet.show { transform:translateY(0); }
.sheet .grab { width:40px; height:5px; border-radius:3px; background:var(--line-strong); margin:0 auto 14px; }

/* ---------- Chips / segmented ---------- */
.chips { display:flex; gap:8px; flex-wrap:wrap; }
.chip { font:600 13px/1 var(--font-sans); padding:9px 14px; border-radius:999px; background:var(--surface); color:var(--fg2); border:1px solid var(--line); cursor:pointer; }
.chip.on { background:var(--blue-500); color:#fff; border-color:var(--blue-500); }
.seg { display:flex; background:var(--surface-2); border-radius:13px; padding:4px; gap:4px; }
.seg button { flex:1; padding:11px 0; font:var(--t-body-sm); border-radius:10px; color:var(--fg2); border:none; background:none; cursor:pointer; }
.seg button.on { background:#fff; color:var(--blue-700); font-weight:600; box-shadow:var(--shadow-sm); }

/* ---------- Amount keypad ---------- */
.keypad { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:6px; }
.keypad button { padding:16px 0; font:600 22px/1 var(--font-num); background:var(--surface); border:none; border-radius:14px; color:var(--ink-900); cursor:pointer; }
.keypad button:active { background:var(--surface-2); }

/* ---------- Pills / tags ---------- */
.tag { font:600 12px/1 var(--font-sans); padding:5px 10px; border-radius:999px; display:inline-flex; align-items:center; gap:4px; }
.tag .lic { width:13px; height:13px; }

/* ---------- Alert banner ---------- */
.alert { display:flex; align-items:flex-start; gap:11px; padding:14px 15px; border-radius:16px; font:var(--t-body-sm); }
.alert .lic { width:20px; height:20px; flex:none; margin-top:1px; }
.alert b { font-weight:600; }

/* ---------- AI assistant ---------- */
.bubble { max-width:80%; padding:12px 15px; border-radius:18px; font:var(--t-body); line-height:1.55; }
.bubble.ai { background:var(--surface); color:var(--ink-900); border-bottom-left-radius:6px; box-shadow:var(--shadow-sm); align-self:flex-start; }
.bubble.me { background:var(--blue-500); color:#fff; border-bottom-right-radius:6px; align-self:flex-end; }
.ai-row { display:flex; gap:9px; align-items:flex-end; }
.ai-av { width:34px; height:34px; border-radius:50%; background:var(--orange-50); display:grid; place-items:center; flex:none; }
.ai-av .lic { width:19px; height:19px; color:var(--orange-500); }
/* typing indicator (three bouncing dots) */
.bubble.typing { display:flex; gap:5px; align-items:center; padding:14px 16px; }
.bubble.typing span { width:7px; height:7px; border-radius:50%; background:var(--ink-300); display:block; animation:bounce 1.1s infinite ease-in-out; }
.bubble.typing span:nth-child(2) { animation-delay:.18s; }
.bubble.typing span:nth-child(3) { animation-delay:.36s; }
@keyframes bounce { 0%,80%,100% { transform:translateY(0); opacity:.5; } 40% { transform:translateY(-5px); opacity:1; } }

/* ---------- Onboarding ---------- */
.ob { height:100%; display:flex; flex-direction:column; padding:0 28px 40px; }
.ob-art { flex:1; display:grid; place-items:center; }
.ob-illus { width:230px; height:230px; border-radius:36px; display:grid; place-items:center; position:relative; }
.dots { display:flex; gap:7px; justify-content:center; margin:18px 0 22px; }
.dots i { width:7px; height:7px; border-radius:50%; background:var(--line-strong); display:block; }
.dots i.on { width:22px; border-radius:5px; background:var(--blue-500); }

/* ---------- Helpers ---------- */
.muted { color:var(--fg3); }
.center { text-align:center; }
.stack { display:flex; flex-direction:column; }
.fadein { animation:fade .4s var(--ease); }
@keyframes fade { from { opacity:0; transform:translateY(6px);} to { opacity:1; transform:none;} }
.label-input { display:flex; flex-direction:column; gap:7px; }
.label-input label { font:var(--t-caption); color:var(--fg2); }
.input { height:50px; border-radius:13px; background:#fff; border:1.5px solid var(--line-strong); padding:0 15px; display:flex; align-items:center; gap:9px; font:var(--t-body); color:var(--ink-900); }
.input .lic { width:19px; height:19px; color:var(--ink-500); }
.input input { border:none; outline:none; flex:1; font:var(--t-body); background:none; color:var(--ink-900); }
.input.focus { border-color:var(--blue-500); box-shadow:0 0 0 3px var(--blue-100); }

/* device caption under each phone */
.dev-cap { width:390px; text-align:center; margin-top:-20px; }
.dev-cap b { font:var(--t-h3); color:var(--ink-900); }
.dev-cap p { font:var(--t-caption); color:var(--ink-500); margin-top:2px; }