:root{
      --card-bg: #ffffff;
      --accent: #0b79d0;
      --muted: #666;
      --success: #2e8b57;
      --danger: #d9534f;
    }
    *{box-sizing:border-box}
  
.container{
      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial;
      width:100%;
      max-width:780px;
      background:var(--card-bg);
      border-radius:12px;
      box-shadow:0 6px 24px rgba(10,30,60,0.08);
      padding:22px;
      overflow:hidden;
      margin-left: 25%;
    }
header{
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin-bottom:12px;
    }
header h1{font-size:1.15rem;margin:0}
.meta{color:var(--muted);font-size:0.9rem}
.progress{
      height:8px;
      background:#f1f5f9;
      border-radius:999px;
      overflow:hidden;
      margin:14px 0;
    }
.progress > i{
      display:block;
      height:100%;
      background:var(--accent);
      width:0%;
      transition:width .35s ease;
    }

.card{
      padding:18px;
      border-radius:10px;
      background:linear-gradient(180deg,#ffffff,#fbfdff);
      border:1px solid rgba(10,20,40,0.03);
    }

.question{
      font-weight:600;
      margin-bottom:10px;
      font-size:1.05rem;
    }

.choices{display:grid;gap:10px;margin-top:8px}
.choice{
      padding:12px 14px;
      border-radius:8px;
      cursor:pointer;
      border:1px solid rgba(10,20,40,0.06);
      background:transparent;
      transition:all .15s ease;
      user-select:none;
    }
.choice:hover{transform:translateY(-2px)}
.choice.selected{box-shadow:0 6px 20px rgba(11,121,208,0.08); border-color:var(--accent)}
.choice.correct{background:rgba(46,139,87,0.12); border-color:var(--success)}
.choice.wrong{background:rgba(217,83,79,0.08); border-color:var(--danger)}

.controls{
      display:flex;
      gap:8px;
      margin-top:14px;
      align-items:center;
      justify-content:space-between;
    }
.left-controls{display:flex;gap:8px;align-items:center}

button{
      padding:8px 12px;
      border-radius:8px;
      border:0;
      cursor:pointer;
      background:var(--accent);
      color:white;
      font-weight:600;
    }
button.ghost{background:transparent;color:var(--accent);border:1px solid rgba(11,121,208,0.12)}
.small{padding:6px 10px;font-size:0.95rem}
.timer{font-weight:700;color:var(--muted)}
.result{padding:16px;text-align:center}
.hidden{display:none}
footer{margin-top:16px;text-align:center;color:var(--muted);font-size:0.9rem}
    @media (max-width:540px){
.container{padding:14px}
    }
   .custom-link {
    margin-left: 10%;
    display: inline-block;
    padding: 12px 28px;
    background: linear-gradient(45deg, #6a11cb, #2575fc);
    color: white;
    text-decoration: none;
    font-weight: 600;
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(38, 50, 56, 0.3);
    transition: background 0.3s ease, box-shadow 0.3s ease;
    font-family: Arial, sans-serif;
  }

  .custom-link:hover {
    background: linear-gradient(45deg, #2575fc, #6a11cb);
    box-shadow: 0 6px 20px rgba(38, 50, 56, 0.5);
    text-decoration: none;
  }