:root{
  --bg:#f7fbff; --primary:#5b7cfa; --accent:#ff5fa2; --good:#1ec28b; --bad:#ff4f64; --card:#ffffff;
  --text:#1f2a44; --muted:#6b7a90;
}
*{box-sizing:border-box}
body{ margin:0; background:linear-gradient(135deg, #e6f3ff 0%, #fff6f8 100%);
      font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans;
      color:var(--text); }
h1,h2,h3{ margin:0 0 .5rem }
.container{ max-width:980px; margin:0 auto; padding:16px; }
.panel{ background:var(--card); border-radius:20px; box-shadow:0 10px 30px rgba(40,60,120,.12); padding:20px; margin-bottom:16px; }
.btn{ border:none; border-radius:14px; padding:14px 18px; font-weight:800; cursor:pointer; letter-spacing:.4px;
      background:linear-gradient(135deg, var(--primary), #7aa5ff); color:white; box-shadow:0 10px 20px rgba(90,120,255,.25);
      transition:.2s transform,.2s filter; }
.btn.secondary{ background:linear-gradient(135deg, #ccc, #e2e6f2); color:#2b3a55; box-shadow:none; }
.btn:active{ transform:translateY(1px); filter:brightness(.95) }
.card{ background:var(--card); border-radius:18px; padding:22px; box-shadow:0 10px 30px rgba(40,60,120,.12); }
.grid{ display:grid; gap:12px; }
a.tile{ text-decoration:none; color:inherit; display:flex; gap:12px; align-items:center; padding:16px;
        border-radius:16px; background:linear-gradient(135deg,#fff,#f7faff); box-shadow:0 8px 18px rgba(40,60,120,.1); }
.tile .emoji{ font-size:28px }
.footer{ color:var(--muted); font-size:14px; text-align:center; padding:12px }