:root{
  --taupe:#A78D72;
  --taupe-dark:#8E765D;
  --cream:#FAF6EF;
  --cream-2:#EFE7D8;
  --cream-3:#EAE1D2;
  --ink:#4A3526;
  --ink-soft:#6B4A35;
  --sage:#8DA06F;
  --rose:#C99B8C;
  --border:#D9CBB6;
  --white:#ffffff;
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 1px 3px rgba(74,53,38,.10);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:'Nunito Sans',system-ui,sans-serif;
  color:var(--ink);
  background:var(--cream);
  overscroll-behavior-y:none;
}
#app{
  max-width:480px;margin:0 auto;min-height:100vh;
  min-height:100dvh;display:flex;flex-direction:column;
  background:var(--cream);
}

/* ---------- Top bar ---------- */
.topbar{
  position:relative;background:var(--taupe);
  padding:calc(env(safe-area-inset-top) + 14px) 16px 14px;
  color:var(--white);display:flex;align-items:center;justify-content:center;
}
.topbar-logo{position:absolute;left:16px;top:0;bottom:0;margin:auto 0;width:54px;height:54px;border-radius:12px;object-fit:contain;background:var(--cream)}
.topbar-text{text-align:center;line-height:1;min-width:0}
.brand-script{font-family:'Great Vibes',cursive;font-size:28px;line-height:1;color:#fff}
.brand-sub{font-size:10px;letter-spacing:1px;color:var(--ink);margin-top:4px;font-weight:600}
.topbar-heart{position:absolute;top:calc(env(safe-area-inset-top) + 12px);right:16px;font-size:18px;color:#F0E7D8}

/* ---------- Main scroll area ---------- */
#view{flex:1;overflow-y:auto;padding:16px 14px 90px}

/* ---------- Generic bits ---------- */
.section-title{font-size:13px;letter-spacing:.5px;color:var(--ink-soft);font-weight:700;text-transform:uppercase;margin:4px 2px 10px}
.stat-card{
  background:var(--cream-2);border-radius:var(--radius-sm);
  padding:14px 16px;display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px;
}
.stat-card .label{font-size:13px;color:var(--ink-soft)}
.stat-card .value{font-size:24px;font-weight:700;color:var(--ink)}

.card{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius);padding:14px 16px;margin-bottom:12px;box-shadow:var(--shadow);
}

/* envelope row */
.env{margin-bottom:14px}
.env-top{display:flex;justify-content:space-between;align-items:center;font-size:15px;margin-bottom:7px}
.env-name{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--ink)}
.env-emoji{font-size:18px;width:22px;text-align:center}
.env-nums{font-size:13px;color:var(--ink-soft)}
.bar{height:9px;background:var(--cream-3);border-radius:99px;overflow:hidden}
.bar > span{display:block;height:100%;border-radius:99px;transition:width .35s ease}
.env-actions{display:flex;gap:8px;margin-top:9px}

/* buttons */
.btn{
  border:none;border-radius:var(--radius-sm);padding:11px 14px;font-size:14px;font-weight:700;
  font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;
}
.btn-primary{background:var(--taupe);color:#fff}
.btn-primary:active{background:var(--taupe-dark)}
.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--ink)}
.btn-soft{background:var(--cream-2);color:var(--ink)}
.btn-sage{background:var(--sage);color:#fff}
.btn-full{width:100%}
.btn-sm{padding:7px 12px;font-size:13px;border-radius:8px}
.btn:disabled{opacity:.5;cursor:default}

/* empty state */
.empty{text-align:center;color:var(--ink-soft);padding:30px 16px}
.empty .big{font-size:34px;display:block;margin-bottom:6px;opacity:.7}

/* ---------- Challenge grid ---------- */
.chal-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.chal-saved{font-weight:700;color:var(--sage)}
.grid100{display:grid;grid-template-columns:repeat(10,1fr);gap:5px}
.cell{
  font-size:11px;text-align:center;padding:6px 0;border-radius:6px;cursor:pointer;
  background:var(--cream-3);color:#A2906F;border:none;font-family:inherit;font-weight:600;
}
.cell.filled{background:var(--sage);color:#fff}
.chal-tabs{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.chip{
  border:1px solid var(--border);background:transparent;color:var(--ink-soft);
  border-radius:99px;padding:6px 13px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;
}
.chip.active{background:var(--taupe);color:#fff;border-color:var(--taupe)}

/* ---------- Payday ---------- */
.alloc-row{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.alloc-row input[type=text]{flex:1}
.alloc-row input[type=number]{width:92px;text-align:right}
.alloc-row .del{background:none;border:none;color:var(--rose);font-size:18px;cursor:pointer;padding:4px}
.leftover{display:flex;justify-content:space-between;font-size:15px;font-weight:700;margin-top:6px;padding-top:12px;border-top:1px solid var(--border)}
.leftover.neg{color:#B5443A}
.leftover.pos{color:var(--sage)}

/* inputs */
input,select{
  font-family:inherit;font-size:15px;color:var(--ink);background:#fff;
  border:1px solid var(--border);border-radius:9px;padding:10px 12px;outline:none;
}
input:focus,select:focus{border-color:var(--taupe);box-shadow:0 0 0 3px rgba(167,141,114,.18)}
label.fld{display:block;margin-bottom:12px}
label.fld .lbl{display:block;font-size:13px;color:var(--ink-soft);font-weight:600;margin-bottom:5px}
label.fld input,label.fld select{width:100%}

/* emoji picker */
.emoji-pick{display:flex;flex-wrap:wrap;gap:6px}
.emoji-pick button{font-size:20px;width:42px;height:42px;border-radius:10px;border:1px solid var(--border);background:#fff;cursor:pointer}
.emoji-pick button.sel{border-color:var(--taupe);background:var(--cream-2)}

/* ---------- Bottom nav ---------- */
.bottomnav{
  position:fixed;left:0;right:0;bottom:0;max-width:480px;margin:0 auto;
  background:var(--white);border-top:1px solid var(--border);
  display:flex;padding:6px 4px calc(env(safe-area-inset-bottom) + 6px);
}
.navbtn{
  flex:1;background:none;border:none;cursor:pointer;font-family:inherit;
  display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--ink-soft);padding:6px 0;
}
.navbtn .navicon{font-size:18px;line-height:1}
.navbtn .navlabel{font-size:11px;font-weight:600}
.navbtn.active{color:var(--taupe)}

/* ---------- Modal ---------- */
.modal-host{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center}
.modal-host.hidden{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(74,53,38,.45)}
.modal-sheet{
  position:relative;width:100%;max-width:480px;background:var(--cream);
  border-radius:20px 20px 0 0;padding:20px 18px calc(env(safe-area-inset-bottom) + 20px);
  max-height:88vh;overflow-y:auto;animation:slideup .22s ease;
}
@keyframes slideup{from{transform:translateY(100%)}to{transform:translateY(0)}}
.modal-title{font-size:18px;font-weight:700;margin:0 0 14px;color:var(--ink)}
.modal-actions{display:flex;gap:10px;margin-top:8px}
.modal-actions .btn{flex:1}

/* unlock card */
.unlock{text-align:center;border:1.5px solid var(--taupe);background:var(--white);border-radius:var(--radius);padding:20px 16px;box-shadow:var(--shadow)}
.unlock .price{font-size:30px;font-weight:700;color:var(--ink);margin:10px 0}
.unlock .script{font-family:'Great Vibes',cursive;font-size:26px;color:var(--ink)}

.muted{color:var(--ink-soft);font-size:13px}
.center{text-align:center}
.row-between{display:flex;justify-content:space-between;align-items:center}
hr.soft{border:none;border-top:1px solid var(--border);margin:16px 0}