:root { --bg:#f7f8f2; --card:#fffefb; --text:#263536; --muted:#718083; --mint:#9de2d2; --mint-dark:#287b72; --amber:#f7ba45; --amber-soft:#fff1c9; --coral:#e98d8d; --line:#e1ebe5; --shadow:0 12px 32px #3a625f16; }
* { box-sizing:border-box; } body { margin:0; color:var(--text); background:radial-gradient(circle at 0 0,#ffe9b1 0,transparent 27%),radial-gradient(circle at 100% 15%,#c9eff1 0,transparent 32%),var(--bg); font-family:Inter,Arial,sans-serif; } button { font:inherit; cursor:pointer; } button:active { transform:scale(.98); }
.app-shell { max-width:680px; min-height:100vh; margin:auto; padding:28px 20px 110px; } .topbar,.section-heading,.task-card,.reward-card,.history-row,.member-card { display:flex; align-items:center; } .topbar,.section-heading { justify-content:space-between; } .topbar-actions { display:flex; align-items:center; gap:9px; } .refresh-button { width:36px; height:36px; border:1px solid #b9e8d9; border-radius:12px; background:#e4f7ef; color:var(--mint-dark); font-size:22px; line-height:1; } h1,h2,h3,p { margin:0; } h1 { font-size:28px; letter-spacing:-.9px; } h2 { font-size:24px; letter-spacing:-.7px; } h3 { font-size:16px; } p { color:var(--muted); font-size:13px; margin-top:4px; line-height:1.35; }.eyebrow { color:var(--mint-dark); font-size:10px; font-weight:800; letter-spacing:1.2px; margin-bottom:4px; }
.avatar,.member-avatar { border:0; border-radius:50%; background:linear-gradient(145deg,var(--mint),#64bcb4); color:#174b47; font-weight:850; box-shadow:inset 0 1px #ffffff99; }.avatar { width:43px;height:43px; }.balance-card { position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center; justify-content:space-between; min-height:157px; background:linear-gradient(125deg,#ffe3a0,#fae7ae 38%,#b5eade 100%); color:#294846; border:1px solid #ffffffb3; border-radius:28px; margin:25px 0 30px; padding:22px 23px; box-shadow:var(--shadow),0 16px 34px #cfaa5140; }.balance-copy { position:relative; z-index:1; }.balance-card .balance-copy>span { color:#4c6c68; font-size:13px; font-weight:700; }.balance-card strong { display:block;font-size:42px;margin-top:2px;letter-spacing:-1.5px; }.balance-card small { font-size:22px; }.balance-card p { color:#4c6c68; max-width:190px; }.balance-mark { z-index:1; display:grid; place-items:center; width:72px; height:72px; margin-right:6px; border:5px solid #fff8cf; border-radius:50%; background:radial-gradient(circle at 33% 25%,#fff9cf 0 8%,#ffd96a 9% 50%,#eaa535 51%); box-shadow:0 6px 0 #c7862e,0 12px 20px #715a2930; color:#9b6326; font-size:37px; font-weight:900; transform:rotate(-9deg); }.balance-orb { position:absolute; border-radius:50%; opacity:.65; filter:blur(1px); }.orb-one { width:150px; height:150px; right:-55px; top:-65px; background:#a9e9e2; }.orb-two { width:100px; height:100px; left:42%; bottom:-58px; background:#ffcc69; }
.icon-button { width:39px;height:39px;border:0;border-radius:14px;background:#e4f7ef;color:var(--mint-dark);font-size:25px;line-height:1; box-shadow:inset 0 0 0 1px #b9e8d9; }.task-card,.reward-card,.history-row,.member-card { gap:13px; background:var(--card); border:1px solid var(--line); border-radius:19px; padding:15px; margin:12px 0; box-shadow:0 4px 13px #3a625f0a; }.task-card b,.reward-card b,.history-row b { margin-left:auto; font-size:14px; white-space:nowrap; color:#486563; }.task-check { width:23px;height:23px;border:2px solid #b7cdca;border-radius:8px; background:#fafffd; }.accent-violet { border-left:5px solid var(--mint-dark); }.accent-mint { border-left:5px solid var(--amber); }.reward-icon { display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:var(--amber-soft);color:#a46b21;font-size:22px; }.history-icon { width:30px;height:30px;display:grid;place-items:center;border-radius:10px;font-weight:800; }.mint { background:#daf5eb;color:#17875a; }.violet { background:#e0f3ee;color:var(--mint-dark); }.positive { color:#159160!important; }.negative { color:#c46868!important; }.member-avatar { width:38px;height:38px;display:grid;place-items:center; }.member-avatar.mint { background:#d8f2e8; }
.primary-button,.secondary-button { width:100%;border-radius:15px;padding:15px;border:0;font-weight:750;margin-top:13px; }.primary-button { background:linear-gradient(135deg,#348a80,#236d66);color:#fff; box-shadow:0 8px 18px #287b7233; }.secondary-button { background:#e6f6ef;color:var(--mint-dark); }.tab-panel { display:none; }.tab-panel.is-active { display:block; }.bottom-nav { position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:center;gap:8px;padding:11px max(13px,env(safe-area-inset-right)) calc(11px + env(safe-area-inset-bottom)) max(13px,env(safe-area-inset-left));background:#fffffff0;backdrop-filter:blur(15px);border-top:1px solid var(--line); }.nav-item { border:0;background:transparent;color:var(--muted);font-size:11px;display:grid;gap:3px;place-items:center;min-width:67px; }.nav-item span { font-size:19px; }.nav-item.is-active { color:var(--mint-dark);font-weight:800; }
.empty-state { padding:28px 8px; text-align:center; }.task-description { color:#536564; margin:5px 0; white-space:pre-wrap; }.accent-overdue { border-left:5px solid var(--coral); }.overdue { color:#c45d5d; font-weight:700; }.card-action { border:0; border-radius:10px; background:#e5f5ef; color:var(--mint-dark); font-size:12px; font-weight:750; padding:8px 10px; }.card-action.danger { background:#fff0ed; color:#c46868; }.subheading { font-size:18px; margin:28px 0 8px; }.member-card.is-selected { border-color:#8fd4c5; }.selected-label { margin-left:auto; color:var(--mint-dark); font-size:12px; }.quiet-form { display:flex; flex-wrap:wrap; gap:8px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:15px; margin-top:12px; }.quiet-form h3 { width:100%; }.quiet-form input { border:1px solid var(--line); border-radius:9px; padding:7px; }
dialog { border:0; border-radius:24px; width:min(420px,calc(100% - 30px)); color:var(--text); box-shadow:0 20px 60px #26403e55; } dialog::backdrop { background:#213c3966; } dialog form { position:relative; display:grid; gap:15px; padding:12px; } dialog label { display:grid; gap:7px; font-size:13px; font-weight:700; } dialog input,dialog textarea { border:1px solid var(--line); border-radius:12px; padding:13px; font:inherit; } dialog textarea { resize:vertical; } .dialog-close { position:absolute; right:10px; top:6px; border:0; background:transparent; font-size:27px; color:var(--muted); } dialog select { border:1px solid var(--line); border-radius:12px; padding:13px; background:#fff; font:inherit; }
@media (min-width:700px) { body { background:linear-gradient(120deg,#fff0bd,#f7f8f2 45%,#d7f3ef); }.app-shell { background:var(--bg);box-shadow:0 0 40px #38615d19; } }