/* ===== Global + Layout (sticky footer) ===== */
:root{
    --primary:#4da3ff; --primary-dark:#0073e6;
    --secondary:#eaf5ff; --accent:#005bbb;
    --text:#1c1c1c; --muted:#555; --card:#fff; --border:#cce5ff;
  }
  *{box-sizing:border-box}
  html,body{height:100%;margin:0;padding:0}
  body{
    display:flex; flex-direction:column; min-height:100vh;
    background:var(--secondary); color:var(--text);
    font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;
  }
  main{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2rem 1rem}
  
  /* ===== Containers / Utils ===== */
  .container{max-width:1100px;margin:0 auto;padding:18px}
  .flex-between{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
  .hidden{display:none}
  .muted{color:var(--muted)}
  /* Prevent auth flicker: hidden by default; JS reveals the right ones */
  [data-auth="guest"],[data-auth="authed"]{display:none}
  
  /* ===== Header / Nav ===== */
  .site-header{background:var(--primary);color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.1)}
  .site-header a{color:#fff;text-decoration:none}
  
  /* ===== Buttons ===== */
  .btn{display:inline-block;background:var(--primary);color:#fff;border:0;border-radius:10px;padding:.6rem 1rem;cursor:pointer;transition:.2s;text-align:center;font-size:1rem}
  .btn:hover{background:var(--primary-dark);transform:translateY(-1px)}
  .btn.secondary{background:#fff;color:#333;border:1px solid var(--border)}
  .btn.bad{background:#e64d4d}
  
  /* ===== Hero ===== */
  .hero{
    margin:28px auto;background:linear-gradient(180deg,#4da3ff 0%,#b3e0ff 100%);
    color:#fff;border-radius:20px;padding:40px 28px;box-shadow:0 6px 20px rgba(0,0,0,.1)
  }
  .hero h1{margin:0 0 8px;font-weight:700}
  
  /* ===== Tiles (category picker) ===== */
  .tile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin:10px 0 24px}
  .tile{
    display:flex;align-items:center;justify-content:center;padding:22px;min-height:110px;text-align:center;
    background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 4px 12px rgba(0,0,0,.06);
    color:#113;font-weight:700;text-decoration:none
  }
  .tile:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.08)}
  
  /* ===== Cards / Quiz UI ===== */
  .card,.q-card{background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:0 6px 20px rgba(0,0,0,.1);padding:2rem;margin:2rem auto}
  .q-card{max-width:700px;width:100%}
  .q-title{font-weight:700;color:var(--text);font-size:1.2rem;margin-bottom:10px}
  .q-type{color:var(--muted);font-size:.95rem;margin-bottom:15px}
  .input{width:100%;padding:1rem;border:2px solid var(--border);border-radius:10px;background:#fff;font-size:1rem}
  
  .progress{height:10px;background:#d6ebff;border-radius:999px;overflow:hidden;margin:1rem 0}
  .bar{height:100%;background:var(--accent);width:0;transition:width .3s ease}
  
  .badge{display:inline-block;background:#fff;border:1px solid var(--border);border-radius:999px;padding:.25rem .6rem;margin:4px}
  .table{width:100%;border-collapse:collapse}
  .table th,.table td{border:1px solid var(--border);padding:8px;background:#fff}
  .hr{height:1px;background:#e0efff;margin:10px 0}
  
  /* ===== Footer (always bottom) ===== */
  footer,.footer{
    background:var(--primary);color:#fff;text-align:center;padding:18px;width:100%;margin-top:auto;font-size:.95rem;letter-spacing:.2px
  }