:root{
    --bg:#0f1220;
    --card:#171a2b;
    --text:#f2f4ff;
    --muted:#aab0d6;
    --accent:#7c5cff;
    --bad:#ff4d6d;
    --good:#22c55e;
    --warn:#fbbf24;
    --line:rgba(255,255,255,.08);
  }
  
  *{box-sizing:border-box}
  body{
    margin:0;
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
    background: radial-gradient(1200px 800px at 20% 0%, rgba(124,92,255,.25), transparent),
                radial-gradient(900px 700px at 90% 10%, rgba(34,197,94,.18), transparent),
                var(--bg);
    color:var(--text);
  }
  .container{max-width:760px;margin:0 auto;padding:18px}
  header{padding:10px 6px 18px}
  h1{margin:0;font-size:28px}
  .subtitle{margin:6px 0 0;color:var(--muted)}
  .card{
    background:rgba(23,26,43,.86);
    border:1px solid var(--line);
    border-radius:18px;
    padding:16px;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
    backdrop-filter: blur(8px);
  }
  .hidden{display:none}
  
  .row{display:flex;gap:10px;align-items:center;margin-top:10px}
  .row-between{justify-content:space-between}
  input{
    width:100%;
    padding:12px 12px;
    border-radius:12px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.04);
    color:var(--text);
    outline:none;
  }
  button{
    padding:12px 12px;
    border-radius:12px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.06);
    color:var(--text);
    cursor:pointer;
  }
  button:hover{background:rgba(255,255,255,.09)}
  button:disabled{opacity:.45;cursor:not-allowed}
  .primary{background:rgba(124,92,255,.25);border-color:rgba(124,92,255,.35)}
  .primary:hover{background:rgba(124,92,255,.35)}
  .ghost{background:transparent}
  .danger{background:rgba(255,77,109,.18);border-color:rgba(255,77,109,.35)}
  .danger:hover{background:rgba(255,77,109,.28)}
  
  .list{margin:10px 0 0;padding:0;list-style:none}
  .list li{
    display:flex;
    justify-content:space-between;
    padding:10px 12px;
    border:1px solid var(--line);
    border-radius:14px;
    margin-top:8px;
    background:rgba(255,255,255,.03);
  }
  .smallbtn{padding:8px 10px;border-radius:10px}
  
  .hint{color:var(--muted);margin:12px 0 0}
  .footer{color:var(--muted);text-align:center;margin-top:14px}
  
  .badge{
    display:inline-block;
    padding:6px 10px;
    border-radius:999px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.04);
    color:var(--muted);
    font-size:12px;
  }
  .turn{margin-top:6px;font-size:18px;font-weight:650}
  
  .qbox{margin-top:12px;padding:14px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.03)}
  .meta{display:flex;gap:8px;margin-bottom:10px}
  .pill{
    padding:6px 10px;border-radius:999px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.04);
    font-size:12px;color:var(--muted);
  }
  .question{margin:0 0 12px;font-size:20px}
  .options{display:grid;gap:10px}
  .opt{
    text-align:left;
    padding:12px 12px;
    border-radius:14px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.04);
  }
  .opt:hover{background:rgba(255,255,255,.07)}
  .opt.correct{border-color:rgba(34,197,94,.6);background:rgba(34,197,94,.15)}
  .opt.wrong{border-color:rgba(255,77,109,.65);background:rgba(255,77,109,.13)}
  
  .result{
    margin-top:12px;
    padding:12px;
    border-radius:14px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.03);
  }
  .result.good{border-color:rgba(34,197,94,.6)}
  .result.bad{border-color:rgba(255,77,109,.65)}
  .help{
    margin-top:10px;
    padding:10px 12px;
    border-radius:14px;
    border:1px dashed rgba(251,191,36,.55);
    background:rgba(251,191,36,.10);
    color:#ffe7a3;
    font-size:13px;
  }
  .toggle{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:14px}
  
  .comeback {
    margin-top: 12px;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid rgba(251,191,36,.6);
    background: linear-gradient(
      135deg,
      rgba(251,191,36,.15),
      rgba(251,191,36,.05)
    );
    box-shadow: 0 8px 20px rgba(0,0,0,.25);
  }
  
  .comeback-title {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 6px;
    color: #ffe7a3;
  }
  
  .comeback-sub {
    font-size: 13px;
    margin-bottom: 12px;
    color: #facc15;
  }
  
  .comeback-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .comeback-buttons button {
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(251,191,36,.6);
    background: rgba(251,191,36,.15);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    transition: all .15s ease;
  }
  
  .comeback-buttons button:hover {
    background: rgba(251,191,36,.35);
    transform: translateY(-2px);
  }