/* Shared design tokens, resets and components used on every page. */
:root{
  --bg:#faf8f5;            /* cozy warm white */
  --bg2:#f2efe9;
  --card:#ffffff;
  --text:#2b2a27;
  --muted:#8a8577;
  --border:#ece7df;
  --border-strong:#ddd6ca;
  --accent:#2f7d55;        /* pitch green */
  --accent-soft:#e7f2ec;
  --accent-fg:#ffffff;
  --gold:#c8952b;
  --danger:#c0392b;
  --danger-soft:#fbeceb;
  --shadow:0 6px 24px rgba(60,50,30,.07), 0 1px 3px rgba(60,50,30,.06);
  --shadow-lg:0 18px 50px rgba(60,50,30,.14);
  --radius:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:'Nunito',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:radial-gradient(1200px 600px at 50% -10%, #fff 0%, var(--bg) 55%, var(--bg2) 100%);
  color:var(--text);line-height:1.5;min-height:100%;
  display:flex;flex-direction:column;
}
button{font:inherit;cursor:pointer;border:none;border-radius:10px;padding:10px 16px;
  background:var(--accent);color:var(--accent-fg);font-weight:700;transition:.15s ease}
button:hover{filter:brightness(1.05)}
button:active{transform:translateY(1px)}
button:disabled{opacity:.45;cursor:not-allowed;filter:none;transform:none}
button.ghost{background:var(--bg2);color:var(--text)}
button.ghost:hover{background:var(--border)}
button.link{background:none;color:var(--muted);padding:6px 4px;font-weight:600}
button.link:hover{color:var(--text);filter:none}
button.danger{background:var(--danger-soft);color:var(--danger)}
input{width:100%;padding:12px 14px;border:1.5px solid var(--border-strong);border-radius:11px;
  background:#fff;color:var(--text);font-size:15px;font-family:inherit;transition:.15s ease}
input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
label{display:block;font-size:13px;font-weight:700;color:var(--muted);margin:14px 0 6px}
.muted{color:var(--muted)}
.hide{display:none!important}
.msg{font-size:13.5px;margin-top:12px;min-height:18px;font-weight:600}
.msg.err{color:var(--danger)}
.msg.ok{color:var(--accent)}

/* ---------- APP SHELL (layout, cards) ---------- */
.wrap{width:100%;max-width:900px;margin:0 auto;padding:26px 20px 60px}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:22px;margin-bottom:20px;box-shadow:var(--shadow)}
.card h2{margin:0 0 4px;font-size:13px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);font-weight:800}
.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.empty{text-align:center;color:var(--muted);padding:26px 10px;font-weight:600}

.spinner{display:inline-block;width:18px;height:18px;border:2.5px solid var(--border);
  border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}

/* utilities (formerly inline styles) */
.bold{font-weight:700}
button.block{width:100%;margin-top:16px}
.grow{flex:1}
.loading{padding:30px;text-align:center}