:root{
    --bg:#f4f6f8;
    --card:#ffffff;
    --accent:#2563eb;
    --accent-2:#10b981;
    --muted:#6b7280;
    --danger:#ef4444;
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
    background:var(--bg);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:32px;
    color:#0f172a;
  }
  
  .container{width:100%; max-width:720px}
  .card{
    background:var(--card);
    border-radius:12px;
    padding:24px;
    box-shadow:0 8px 30px rgba(2,6,23,0.08);
  }
  
  .title{text-align:center; margin:0 0 12px; font-size:1.6rem}
  .center{text-align:center}
  
  .hidden{display:none}
  
  /* Start & end screens */
  .center p{margin:10px 0 18px; color:var(--muted)}
  
  /* Quiz screen layout */
  .top-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:14px;
    font-weight:600;
  }
  .timer{color:var(--danger)}
  .score{color:var(--muted)}
  
  /* Question card */
  .question-card{
    background:#f8fafc;
    border-radius:10px;
    padding:18px;
    margin-bottom:12px;
    border:1px solid #e6edf5;
  }
  
  .question{
    font-size:1.1rem;
    margin-bottom:12px;
  }
  
  /* Choices grid */
  .choices{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  .choice-btn{
    padding:10px 12px;
    border-radius:8px;
    border:1px solid #d1e3ff;
    background:white;
    cursor:pointer;
    text-align:left;
    font-weight:600;
    transition:transform .12s ease, background .15s;
  }
  .choice-btn:hover{ transform:translateY(-3px) }
  
  /* feedback states */
  .choice-btn.correct{
    background:linear-gradient(90deg, rgba(16,185,129,0.12), white);
    border-color: rgba(16,185,129,0.4);
    color:var(--accent-2);
  }
  .choice-btn.wrong{
    background:linear-gradient(90deg, rgba(239,68,68,0.08), white);
    border-color: rgba(239,68,68,0.35);
    color:var(--danger);
  }
  .choice-btn.disabled{
    opacity:0.7;
    pointer-events:none;
  }
  
  /* Controls */
  .controls{display:flex; justify-content:flex-end}
  .btn{
    padding:10px 14px;
    border-radius:8px;
    border:none;
    cursor:pointer;
    background:#e6eefc;
    color:var(--accent);
    font-weight:700;
  }
  .btn.primary{
    background:var(--accent);
    color:white;
  }
  .btn:disabled{ opacity:0.5; cursor:not-allowed }
  
  /* Responsive */
  @media (max-width:520px){
    .choices{ grid-template-columns: 1fr; }
    .top-row{flex-direction:column; gap:8px; align-items:flex-start}
  }