@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700;800&display=swap');

:root{--bg:#f7f5f1;--surface:#fff;--surface2:#f0ede7;--text:#292824;--muted:#77736b;--line:#e8e3db;--coral:#f06c58;--coral-soft:#fff0ec;--teal:#43aa9f;--teal-soft:#e8f6f4;--yellow:#edb94b;--purple:#8c76c8;--shadow:0 14px 40px rgba(59,49,37,.08);color-scheme:light}
:root.dark{--bg:#191b1c;--surface:#232628;--surface2:#2d3032;--text:#f6f3ed;--muted:#aaa69f;--line:#393c3e;--coral-soft:#3b2927;--teal-soft:#213735;--shadow:0 14px 40px rgba(0,0,0,.24);color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:"Noto Sans TC",system-ui,sans-serif}.sidebar{position:fixed;inset:0 auto 0 0;width:250px;background:var(--surface);border-right:1px solid var(--line);padding:28px 20px;display:flex;flex-direction:column;z-index:10}.brand{display:flex;align-items:center;gap:12px;color:var(--text);text-decoration:none;padding:0 8px 28px}.brand-mark,.mobile-brand span{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:var(--coral);color:#fff;font-weight:800;box-shadow:0 8px 18px rgba(240,108,88,.27)}.brand b{display:block;font-size:18px}.brand small{display:block;color:var(--muted);font-size:10px;letter-spacing:1.5px;text-transform:uppercase}.nav-item{border:0;background:none;color:var(--muted);font:inherit;width:100%;display:flex;align-items:center;gap:13px;padding:12px 14px;margin:3px 0;border-radius:12px;cursor:pointer;text-align:left}.nav-item:hover{background:var(--surface2);color:var(--text)}.nav-item.active{background:var(--coral-soft);color:var(--coral);font-weight:700}.nav-icon{font-size:19px;width:24px;text-align:center}.house-card{margin-top:auto;background:var(--surface2);padding:16px;border-radius:16px}.house-card small{color:var(--muted)}.house-card strong{display:block;margin:3px 0 13px}.avatar-row{display:flex;align-items:center}.avatar{width:32px;height:32px;border-radius:50%;display:inline-grid;place-items:center;color:#fff;font-size:12px;font-weight:700;border:2px solid var(--surface);margin-right:-6px}.coral{background:var(--coral)}.teal{background:var(--teal)}.purple{background:var(--purple)}.member-count{font-size:11px;color:var(--muted);margin-left:13px}main{margin-left:250px;min-height:100vh}.topbar{height:78px;padding:0 38px;display:flex;justify-content:flex-end;align-items:center;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 88%,transparent);position:sticky;top:0;backdrop-filter:blur(14px);z-index:8}.top-actions{display:flex;align-items:center;gap:10px}.icon-button{border:1px solid var(--line);background:var(--surface);color:var(--text);width:40px;height:40px;border-radius:12px;font-size:18px;cursor:pointer}.profile-button{display:flex;align-items:center;gap:9px;border:0;background:transparent;color:var(--text);font:inherit;font-weight:600}.profile-button .avatar{margin:0}.mobile-brand{display:none}.page{max-width:1180px;margin:0 auto;padding:42px 40px 80px}.page-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:28px}.eyebrow{color:var(--coral);font-size:12px;letter-spacing:1.6px;font-weight:800;text-transform:uppercase;margin:0 0 5px}.page h1{font-size:32px;line-height:1.25;margin:0 0 7px}.subtext{color:var(--muted);margin:0}.btn{border:0;border-radius:12px;padding:11px 17px;font:inherit;font-weight:700;cursor:pointer}.btn.primary{background:var(--coral);color:#fff;box-shadow:0 8px 20px rgba(240,108,88,.22)}.btn.ghost{background:var(--surface2);color:var(--text)}.hero{background:linear-gradient(135deg,#ef735e,#e95a4c);border-radius:24px;padding:34px;color:#fff;display:flex;justify-content:space-between;align-items:center;box-shadow:0 18px 44px rgba(224,82,65,.2);overflow:hidden;position:relative}.hero:after{content:"";position:absolute;width:240px;height:240px;border:45px solid rgba(255,255,255,.09);border-radius:50%;right:-70px;top:-100px}.hero h1{font-size:31px;margin:3px 0 8px}.hero p{margin:0;color:rgba(255,255,255,.82)}.hero .avatar{width:52px;height:52px;font-size:18px;position:relative;z-index:1}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:22px 0}.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:var(--shadow)}.stat{display:flex;justify-content:space-between;align-items:flex-start}.stat-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--surface2);font-size:20px}.stat strong{display:block;font-size:27px;margin-top:15px}.stat small,.muted{color:var(--muted)}.two-col{display:grid;grid-template-columns:1.25fr .75fr;gap:18px}.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.section-title h2{font-size:18px;margin:0}.section-title button{border:0;background:none;color:var(--coral);font:inherit;font-size:13px;font-weight:700;cursor:pointer}.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.quick{border:1px solid var(--line);background:var(--bg);color:var(--text);border-radius:14px;padding:15px 10px;font:inherit;font-weight:600;cursor:pointer}.quick span{display:block;font-size:22px;margin-bottom:7px}.activity,.list{display:grid;gap:10px}.row{display:flex;align-items:center;gap:13px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}.row-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--surface2);font-size:18px}.row-main{min-width:0;flex:1}.row-main strong{display:block}.row-main small{color:var(--muted)}.badge{font-size:11px;font-weight:700;padding:5px 9px;border-radius:99px;background:var(--surface2);white-space:nowrap}.badge.coral{color:var(--coral);background:var(--coral-soft)}.badge.teal{color:var(--teal);background:var(--teal-soft)}.tabs{display:flex;gap:8px;margin-bottom:18px;overflow:auto}.tab{border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:99px;padding:8px 14px;font:inherit;white-space:nowrap;cursor:pointer}.tab.active{background:var(--text);color:var(--bg);border-color:var(--text)}.item-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:15px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px}.check{width:25px;height:25px;border:2px solid var(--line);border-radius:8px;background:transparent;color:white;cursor:pointer}.check.done{background:var(--teal);border-color:var(--teal)}.item-card h3{font-size:16px;margin:0 0 4px}.item-card p{font-size:13px;color:var(--muted);margin:0}.item-actions{display:flex;gap:6px}.mini{border:0;background:var(--surface2);color:var(--muted);width:34px;height:34px;border-radius:10px;cursor:pointer}.amount{font-size:18px;font-weight:800}.positive{color:var(--teal)}.negative{color:var(--coral)}.empty{text-align:center;padding:65px 20px;color:var(--muted)}.empty span{font-size:42px;display:block;margin-bottom:12px}dialog{width:min(520px,calc(100% - 30px));border:0;border-radius:22px;padding:0;background:var(--surface);color:var(--text);box-shadow:0 24px 80px rgba(0,0,0,.25)}dialog::backdrop{background:rgba(17,18,19,.55);backdrop-filter:blur(3px)}#modal-form{padding:25px}.modal-heading{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:22px}.modal-heading h2{margin:2px 0 0}.modal-heading small{color:var(--coral);font-weight:700}.form-grid{display:grid;gap:16px}.field{display:grid;gap:7px}.field label{font-size:13px;font-weight:700}.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);background:var(--bg);color:var(--text);border-radius:12px;padding:12px;font:inherit}.field textarea{min-height:90px;resize:vertical}.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:24px}.toast{position:fixed;right:28px;bottom:28px;background:var(--text);color:var(--bg);padding:12px 17px;border-radius:12px;box-shadow:var(--shadow);opacity:0;transform:translateY(10px);pointer-events:none;transition:.25s;z-index:30}.toast.show{opacity:1;transform:none}
@media(max-width:900px){.stats-grid{grid-template-columns:repeat(2,1fr)}.two-col{grid-template-columns:1fr}.sidebar{width:210px}main{margin-left:210px}.topbar{padding:0 24px}.page{padding:32px 24px 70px}}
@media(max-width:680px){.sidebar{position:fixed;top:auto;width:100%;height:72px;bottom:0;right:0;padding:7px 8px;border:0;border-top:1px solid var(--line)}.brand,.house-card{display:none}#main-nav{display:grid;grid-template-columns:repeat(6,1fr)}.nav-item{padding:7px 2px;display:flex;flex-direction:column;gap:1px;font-size:9px;margin:0}.nav-icon{font-size:19px}.nav-item.active{background:transparent}.nav-item:nth-child(6){display:none}main{margin:0}.topbar{height:64px;padding:0 16px;justify-content:space-between}.mobile-brand{display:flex;align-items:center;gap:8px;border:0;background:none;color:var(--text);font:inherit;font-weight:800}.mobile-brand span{width:32px;height:32px;border-radius:10px}.profile-button>span:last-child{display:none}.page{padding:25px 16px 105px}.page-heading{align-items:flex-start}.page-heading h1{font-size:25px}.page-heading .btn{padding:10px 12px}.hero{padding:25px 22px}.hero h1{font-size:25px}.stats-grid{gap:10px;margin:16px 0}.card{padding:16px}.stat strong{font-size:23px}.quick-grid{grid-template-columns:1fr}.item-card{grid-template-columns:auto 1fr}.item-actions{grid-column:2}.toast{right:16px;bottom:90px}}

/* Account and invitation flows */
[hidden]{display:none!important}.auth-screen{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;background:var(--surface)}.auth-intro{padding:44px clamp(35px,7vw,100px);background:linear-gradient(145deg,#f07560,#df584b);color:#fff;display:flex;flex-direction:column;position:relative;overflow:hidden}.auth-intro:after{content:"";position:absolute;width:460px;height:460px;border:80px solid rgba(255,255,255,.07);border-radius:50%;right:-230px;bottom:-180px}.auth-brand{display:flex;align-items:center;gap:12px;font-size:19px}.auth-brand .brand-mark{background:#fff;color:var(--coral)}.auth-copy{margin:auto 0;position:relative;z-index:1}.auth-pill{display:inline-block;padding:7px 12px;border:1px solid rgba(255,255,255,.35);border-radius:99px;font-size:10px;font-weight:800;letter-spacing:1.5px}.auth-copy h1{font-size:clamp(42px,5.4vw,72px);line-height:1.14;margin:22px 0 18px}.auth-copy p{font-size:17px;color:rgba(255,255,255,.78)}.auth-feature{display:flex;align-items:center;gap:13px;position:relative;z-index:1}.auth-feature>span{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.16)}.auth-feature b,.auth-feature small{display:block}.auth-feature small{color:rgba(255,255,255,.7);margin-top:3px}.auth-panel{display:grid;place-items:center;padding:45px;background:var(--bg)}.auth-box{width:min(440px,100%)}.auth-tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--surface2);border-radius:13px;padding:4px;margin-bottom:36px}.auth-tabs button{border:0;background:transparent;color:var(--muted);border-radius:10px;padding:10px;font:inherit;font-weight:700;cursor:pointer}.auth-tabs button.active{background:var(--surface);color:var(--text);box-shadow:0 4px 16px rgba(0,0,0,.07)}.auth-box h2{font-size:31px;margin:5px 0 8px}.auth-form{margin-top:27px}.field span{font-size:13px;font-weight:700}.wide{width:100%}.auth-form .btn{padding:14px;margin-top:3px}.form-error{color:var(--coral);font-size:13px;margin:0;min-height:18px}.onboarding{min-height:100vh;background:radial-gradient(circle at 50% 20%,var(--coral-soft),var(--bg) 48%);display:grid;place-items:center;padding:30px}.onboard-card{width:min(720px,100%);text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:46px;box-shadow:var(--shadow)}.onboard-card>.brand-mark{margin:0 auto 22px}.onboard-card h1{font-size:36px;margin:6px 0}.onboard-choices{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:30px 0}.choice-card{border:1px solid var(--line);background:var(--bg);color:var(--text);border-radius:18px;padding:24px 15px;font:inherit;cursor:pointer}.choice-card:hover{border-color:var(--coral);transform:translateY(-2px)}.choice-card>span{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--coral-soft);color:var(--coral);font-size:24px;margin:0 auto 12px}.choice-card b,.choice-card small{display:block}.choice-card small{color:var(--muted);margin-top:5px}.onboard-form{text-align:left;border-top:1px solid var(--line);padding-top:24px}.invite-card>.btn{margin:8px 0 17px}.invite-code{display:flex;align-items:center;justify-content:space-between;border:1px dashed var(--coral);background:var(--coral-soft);border-radius:14px;padding:13px 14px;margin-top:10px}.invite-code small,.invite-code strong{display:block}.invite-code small{color:var(--muted);font-size:10px}.invite-code strong{font-size:24px;letter-spacing:4px;color:var(--coral)}.logout{margin-top:22px;color:var(--coral)!important}
@media(max-width:760px){.auth-screen{grid-template-columns:1fr}.auth-intro{min-height:310px;padding:28px 24px}.auth-copy{margin:42px 0}.auth-copy h1{font-size:38px;margin:15px 0 10px}.auth-feature{display:none}.auth-panel{padding:35px 22px}.onboard-card{padding:32px 20px}.onboard-choices{grid-template-columns:1fr}.onboarding{padding:15px}}

/* User account */
.account-hero{display:flex;align-items:center;gap:18px;padding:26px;margin-bottom:16px}.account-avatar{width:76px;height:76px;display:grid;place-items:center;border-radius:24px;color:#fff;font-size:30px;font-weight:800;box-shadow:0 10px 24px rgba(0,0,0,.14)}.account-hero h2{margin:0 0 3px;font-size:23px}.account-hero p{margin:0 0 9px;color:var(--muted)}.account-hero>.btn{margin-left:auto}.account-stats{display:grid;grid-template-columns:repeat(3,1fr);background:var(--surface);border:1px solid var(--line);border-radius:18px;margin-bottom:18px}.account-stats div{text-align:center;padding:20px;border-right:1px solid var(--line)}.account-stats div:last-child{border:0}.account-stats strong,.account-stats span{display:block}.account-stats strong{font-size:22px}.account-stats span{color:var(--muted);font-size:12px;margin-top:4px}.account-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.account-form{display:flex;flex-direction:column;gap:16px}.account-form>.btn.primary{align-self:flex-start}.color-options{display:flex;gap:10px}.color-choice{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;cursor:pointer;box-shadow:inset 0 0 0 2px rgba(255,255,255,.45)}.color-choice input{position:absolute;opacity:0;pointer-events:none}.color-choice span{color:#fff;font-size:15px}.color-choice:has(input:checked){outline:3px solid var(--text);outline-offset:2px}.account-divider{height:1px;background:var(--line);margin-top:5px}.account-form .logout{margin-top:0}
@media(max-width:760px){.account-grid{grid-template-columns:1fr}.account-hero{align-items:flex-start;flex-wrap:wrap}.account-hero>.btn{width:100%;margin:4px 0 0}.account-avatar{width:64px;height:64px;border-radius:20px}.account-stats strong{font-size:17px}.account-stats div{padding:16px 6px}}