:root {
  --bg: #0b0a08;
  --surface: rgba(26, 23, 16, 0.92);
  --surface-2: rgba(40, 34, 21, 0.86);
  --line: rgba(244, 201, 93, 0.18);
  --gold: #f4c95d;
  --gold-2: #c99928;
  --gold-soft: #ffe7a4;
  --text: #fff9e8;
  --muted: #bdb39b;
  --ok: #baf5c6;
  --danger: #ffadad;
  --shadow: 0 20px 60px rgba(0,0,0,.38);
  --radius: 24px;
}
* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; }
body {
  margin: 0; min-height: 100dvh; color: var(--text); background:
    radial-gradient(circle at 10% -10%, rgba(244,201,93,.14), transparent 35%),
    radial-gradient(circle at 100% 30%, rgba(154,104,12,.12), transparent 35%),
    linear-gradient(180deg, #11100c 0%, #090806 75%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.bg-orb { position: fixed; pointer-events:none; filter: blur(24px); opacity:.4; border-radius:50%; z-index:-1; }
.orb-a { width:180px; height:180px; background:#9f751a; top:18%; left:-120px; }
.orb-b { width:240px; height:240px; background:#5d4213; bottom:10%; right:-150px; }
.app-shell { width:min(100%, 760px); margin:0 auto; padding: env(safe-area-inset-top) 16px calc(100px + env(safe-area-inset-bottom)); }
.topbar { position:sticky; top:0; z-index:10; display:flex; justify-content:space-between; align-items:center; padding:16px 2px 14px; background:linear-gradient(180deg, rgba(11,10,8,.98) 60%, rgba(11,10,8,0)); backdrop-filter: blur(12px); }
.brand-title { margin:0; font-size:1.32rem; letter-spacing:-.03em; }
.brand-title span, h1 span { color:var(--gold); }
.top-actions { display:flex; gap:8px; }
.eyebrow { margin:0 0 6px; text-transform:uppercase; letter-spacing:.13em; font-size:.68rem; font-weight:800; color:var(--gold); }
.muted, .mini-note { color:var(--muted); }
.mini-note { font-size:.78rem; line-height:1.5; }
.icon-btn { width:42px; height:42px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.04); color:var(--gold-soft); }
.view { display:none; animation: rise .25s ease; }
.view.active { display:block; }
@keyframes rise { from{opacity:.2; transform:translateY(8px)} to{opacity:1; transform:none} }
.gold-frame { border:1px solid rgba(244,201,93,.32); box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), var(--shadow); }
.hero { position:relative; overflow:hidden; display:grid; grid-template-columns:1fr auto; gap:16px; padding:22px; border-radius:30px; background:linear-gradient(135deg, rgba(67,52,22,.95), rgba(21,19,14,.97) 55%, rgba(12,11,9,.98)); }
.hero::after { content:"✦"; position:absolute; right:16%; top:-38px; font-size:8rem; color:rgba(244,201,93,.05); transform:rotate(17deg); }
.hero h2 { margin:4px 0 10px; font-size:clamp(1.35rem, 5vw, 2rem); line-height:1.15; letter-spacing:-.035em; }
.hero p:last-child { margin:0; color:#ddd2ba; font-size:.9rem; line-height:1.55; }
.progress-ring { --p:0; width:84px; height:84px; border-radius:50%; display:grid; place-items:center; align-self:center; background:conic-gradient(var(--gold) calc(var(--p)*1%), rgba(255,255,255,.08) 0); position:relative; }
.progress-ring::before { content:""; position:absolute; inset:7px; background:#15130e; border-radius:50%; }
.progress-ring span { position:relative; font-weight:900; color:var(--gold-soft); }
.metric-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:12px 0; }
.metric-card { min-height:120px; border:1px solid var(--line); border-radius:22px; padding:16px; text-align:left; color:var(--text); background:linear-gradient(145deg, rgba(36,31,21,.9), rgba(20,18,14,.9)); }
.metric-icon { display:grid; width:32px; height:32px; place-items:center; border-radius:10px; background:rgba(244,201,93,.1); color:var(--gold); margin-bottom:14px; }
.metric-card strong { display:block; font-size:1.45rem; color:var(--gold-soft); }
.metric-card small { color:var(--muted); }
.card { position:relative; margin:12px 0; padding:18px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(145deg, rgba(31,28,20,.94), rgba(18,16,12,.94)); box-shadow:0 12px 40px rgba(0,0,0,.22); }
.card h3 { margin:0; font-size:1.05rem; }
.card-head { display:flex; justify-content:space-between; gap:14px; align-items:flex-start; }
.big-symbol { font-size:2rem; color:var(--gold); }
.charity-card { overflow:hidden; }
.charity-card::before { content:""; position:absolute; inset:auto -50px -70px auto; width:150px; height:150px; border:1px solid rgba(244,201,93,.12); border-radius:50%; box-shadow:0 0 0 20px rgba(244,201,93,.025), 0 0 0 40px rgba(244,201,93,.015); }
.chip-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.chip { font-size:.75rem; padding:7px 10px; border:1px solid rgba(244,201,93,.22); border-radius:999px; color:var(--gold-soft); background:rgba(244,201,93,.06); }
.reminder-banner { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:14px; margin:0 0 12px; border-radius:18px; background:linear-gradient(90deg, #553b08, #2b220f); border:1px solid rgba(255,218,119,.25); }
.reminder-banner span { display:block; color:#e5d8ba; margin-top:3px; font-size:.8rem; }
.summary-list { display:grid; gap:9px; margin-top:14px; }
.summary-row { display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-top:1px solid rgba(255,255,255,.06); }
.summary-row:first-child { border-top:0; }
.summary-row small { color:var(--muted); }
.summary-state { color:var(--gold-soft); font-weight:700; font-size:.82rem; text-align:right; }
.status-pill, .date-badge { border:1px solid var(--line); border-radius:999px; padding:7px 10px; color:var(--muted); font-size:.72rem; }
.section-title { display:flex; justify-content:space-between; gap:12px; align-items:flex-end; margin:6px 0 14px; }
.section-title h2 { margin:0; font-size:1.35rem; }
.numbered-card { padding-top:28px; }
.number-badge { position:absolute; top:-11px; left:18px; min-width:42px; height:30px; padding:0 10px; display:grid; place-items:center; border-radius:10px; background:linear-gradient(135deg, var(--gold), var(--gold-2)); color:#251900; font-weight:1000; box-shadow:0 8px 24px rgba(201,153,40,.25); }
.form-stack { display:grid; gap:12px; margin-top:14px; }
.item-row { display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:center; }
.item-row.good-row { grid-template-columns:auto 1fr; }
.index-dot { width:29px; height:29px; display:grid; place-items:center; border-radius:9px; color:var(--gold); background:rgba(244,201,93,.07); border:1px solid var(--line); font-size:.76rem; }
.text-input { width:100%; min-height:46px; border:1px solid rgba(244,201,93,.15); border-radius:14px; padding:12px 13px; background:#11100d; color:var(--text); outline:none; transition:.2s; }
.text-input:focus { border-color:rgba(244,201,93,.6); box-shadow:0 0 0 3px rgba(244,201,93,.08); }
.textarea { resize:vertical; min-height:88px; }
.done-check { appearance:none; width:25px; height:25px; border:1px solid rgba(244,201,93,.35); border-radius:8px; background:#12100d; display:grid; place-content:center; }
.done-check::before { content:"✓"; transform:scale(0); color:#1d1606; font-weight:900; }
.done-check:checked { background:var(--gold); }
.done-check:checked::before { transform:scale(1); }
.field-label { display:block; color:#d4c8ae; font-size:.78rem; font-weight:700; margin:0 0 7px; }
.btn { border:1px solid var(--line); border-radius:14px; padding:11px 14px; color:var(--gold-soft); background:rgba(244,201,93,.06); font-weight:800; }
.btn-gold { border:0; color:#241800; background:linear-gradient(135deg, #ffe49a, #d7a72f 65%, #b98310); box-shadow:0 10px 28px rgba(201,153,40,.18); }
.btn-small { padding:8px 11px; font-size:.76rem; }
.btn-wide { width:100%; min-height:52px; margin:2px 0 10px; }
.btn-ghost { background:transparent; }
.check-list { display:grid; gap:9px; margin-top:14px; }
.check-item { display:grid; grid-template-columns:auto 1fr auto; gap:11px; align-items:center; padding:12px; border:1px solid rgba(255,255,255,.06); border-radius:16px; background:rgba(255,255,255,.02); }
.check-item.done { border-color:rgba(244,201,93,.2); background:rgba(244,201,93,.045); }
.check-item strong { display:block; font-size:.9rem; }
.check-item small { color:var(--muted); }
.delete-btn { border:0; background:transparent; color:#9e9278; padding:6px; }
.toggle-row { display:flex; gap:10px; align-items:flex-start; color:#d9cfba; font-size:.86rem; }
.dialog { border:0; padding:0; background:transparent; width:min(92vw,520px); }
.dialog::backdrop { background:rgba(0,0,0,.75); backdrop-filter:blur(4px); }
.dialog-card { border:1px solid var(--line); border-radius:24px; padding:20px; background:#17140e; box-shadow:var(--shadow); display:grid; gap:12px; color:var(--text); }
.bottom-nav { position:fixed; left:50%; bottom:0; transform:translateX(-50%); z-index:20; width:min(100%,760px); display:grid; grid-template-columns:repeat(4,1fr); gap:2px; padding:9px max(8px, env(safe-area-inset-left)) calc(9px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-right)); background:rgba(13,12,9,.94); border-top:1px solid var(--line); backdrop-filter: blur(16px); }
.nav-item { border:0; border-radius:14px; padding:8px 3px; background:transparent; color:#8f866f; display:grid; gap:3px; place-items:center; }
.nav-item span { font-weight:900; min-height:20px; }
.nav-item small { font-size:.65rem; }
.nav-item.active { color:var(--gold); background:rgba(244,201,93,.07); }
.lock-screen { min-height:100dvh; padding:22px; display:grid; place-items:center; }
.lock-card { width:min(100%,440px); border-radius:30px; padding:28px; background:linear-gradient(145deg, #242016, #100f0b); }
.brand-mark { width:72px; height:72px; display:grid; place-items:center; border-radius:22px; margin-bottom:22px; font-size:1.3rem; font-weight:1000; color:#281b00; background:linear-gradient(135deg,#ffe9a8,#be8816); transform:rotate(-4deg); box-shadow:0 18px 40px rgba(201,153,40,.2); }
.lock-card h1 { margin:0 0 10px; font-size:2rem; }
.pin-row { display:grid; grid-template-columns:1fr auto; gap:8px; }
.toast { position:fixed; z-index:100; left:50%; top:18px; transform:translate(-50%,-20px); opacity:0; pointer-events:none; max-width:90vw; padding:11px 15px; border-radius:13px; color:#191105; background:#f6d677; font-weight:800; font-size:.82rem; box-shadow:var(--shadow); transition:.25s; }
.toast.show { opacity:1; transform:translate(-50%,0); }
@media (min-width:700px) {
  .metric-grid { grid-template-columns:repeat(4,1fr); }
  .metric-card { min-height:130px; }
  .hero { padding:30px; }
}
@media (max-width:420px) {
  .hero { grid-template-columns:1fr; }
  .progress-ring { width:72px; height:72px; }
  .reminder-banner { align-items:flex-start; flex-direction:column; }
}

.btn:disabled { opacity:.55; cursor:not-allowed; }