/* ====== Base ====== */
:root{
  --bg1:#74ebd5;
  --bg2:#9face6;
  --card:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --line:#e5e7eb;
  --primary:#2563eb;
  --primaryHover:#1d4ed8;
  --danger:#dc2626;
  --dangerHover:#b91c1c;
  --shadow: 0 12px 35px rgba(0,0,0,.18);
  --radius: 16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--text);
  background: linear-gradient(135deg, var(--bg1), var(--bg2));
}

/* ====== Layout ====== */
.topbar{
  position: sticky;
  top: 0;
  z-index: 30;
  display:flex;
  gap:12px;
  justify-content: space-between;
  align-items:center;
  padding: 14px 18px;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.65);
  border-bottom: 1px solid rgba(229,231,235,.7);
}

.brand{
  display:flex;
  gap:10px;
  align-items:center;
  min-width: 0;
}
.logo{
  width:38px;height:38px;
  border-radius: 12px;
  background: rgba(37,99,235,.12);
  display:grid;place-items:center;
  font-weight:900;color:var(--primary);
  flex:0 0 auto;
}
.title{font-weight:800; line-height:1.1}
.subtitle{font-size:12px;color:var(--muted); margin-top:2px}
.timer{
  font-weight:900;
  padding:10px 12px;
  border-radius: 999px;
  background: rgba(220,38,38,.12);
  color: var(--danger);
  border: 1px solid rgba(220,38,38,.18);
  flex:0 0 auto;
  font-variant-numeric: tabular-nums;
}

.container{
  max-width: 980px;
  margin: 18px auto 92px;
  padding: 0 14px;
}

.card{
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  margin: 14px;
}

.intro h1{margin: 0 0 6px}
.intro p{margin: 0 0 12px; color: var(--muted); line-height: 1.5}
.meta{margin-top:10px; color: var(--muted); font-size: 13px}

.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}

.btn{
  border: 0;
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .05s ease, background .2s ease, color .2s ease, opacity .2s ease;
}
.btn:active{transform: translateY(1px)}
.btn.primary{background: var(--primary); color:white}
.btn.primary:hover{background: var(--primaryHover)}
.btn.danger{background: var(--danger); color:white}
.btn.danger:hover{background: var(--dangerHover)}
.btn.ghost{
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
}
.btn.ghost:hover{background: rgba(0,0,0,.03)}
.btn:disabled{opacity:.55; cursor:not-allowed}

/* ====== Quiz ====== */
.quiz{display:grid; gap: 14px}
.qcard{
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  border: 1px solid rgba(229,231,235,.6);
}
.qhead{
  display:flex;
  gap:10px;
  justify-content: space-between;
  align-items:flex-start;
}
.qnum{
  font-weight: 900;
  color: var(--primary);
  min-width: 54px;
}
.qtext{
  font-weight: 800;
  line-height: 1.35;
  flex: 1 1 auto;
}
.answers{
  margin-top: 12px;
  display:grid;
  gap: 10px;
}
.answer{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  user-select: none;
}
.answer:hover{background: rgba(37,99,235,.04)}
.answer input{
  margin-top: 2px;
  transform: scale(1.2);
}
.answerText{line-height: 1.35}
.correct{font-weight: 900; color: #166534}
.wrong{color: var(--danger)}
.note{
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
}

.results h2{margin: 0 0 10px}
#result{font-size: 18px; font-weight: 800}
.small{font-size: 13px; font-weight: 600; color: var(--muted); margin-top: 8px}

/* ====== Bottom bar ====== */
.bottombar{
  position: fixed;
  left: 0; right:0; bottom:0;
  z-index: 40;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(229,231,235,.75);
  padding: 10px 12px;
  display:flex;
  gap:12px;
  align-items:center;
  justify-content: space-between;
}
.progressWrap{flex: 1 1 auto; min-width: 0}
.progressLabel{font-size: 12px; color: var(--muted); font-weight: 700; margin-bottom: 6px}
.progress{
  height: 10px;
  background: rgba(0,0,0,.06);
  border-radius: 999px;
  overflow: hidden;
}
.progressBar{
  height: 100%;
  background: var(--primary);
  width: 0%;
}

/* ====== RWD ====== */
@media (max-width: 640px){
  .topbar{padding: 12px 12px}
  .logo{width:34px;height:34px;border-radius: 12px}
  .title{font-size: 14px}
  .subtitle{display:none}
  .timer{padding: 8px 10px; font-size: 14px}
  .container{margin-bottom: 106px}
  .btn{width: 100%}
  .btn.ghost{width: auto}
  .qnum{min-width: 44px}
  .answer{padding: 10px}
  .bottombar{
    flex-direction: column;
    align-items: stretch;
  }
  .bottombar .btn{width:100%}
}

@media (prefers-reduced-motion: reduce){
  .btn{transition:none}
}