/* --- Tema Azul & Laranja inspirado nos mockups --- */
/* Suporte a tema claro/escuro via [data-theme] (mantido) */
:root{
  --bg: #0b1020; --card:#ffffff; --text:#10121a; --muted:#667085;
  --accent: var(--accent-runtime, #1677ff); --accent-2: var(--accent2-runtime, #ff7a18);
  --success:#22c55e; --danger:#ef4444; --border:#e6e8f0;
  --shadow: 0 20px 35px rgba(16,23,53,.25);
}
html[data-theme="dark"]{
  --bg:#0b1020; --card:#12162a; --text:#eef2ff; --muted:#a8b0d4;
  --border:#22274a; --shadow: 0 20px 50px rgba(0,0,0,.5);
}
html[data-theme="light"]{
  --bg:#f3f7ff; --card:#ffffff; --text:#0f1226; --muted:#5b5f77;
  --border:#e6e8f0; --shadow: 0 14px 28px rgba(17, 40, 84, .15);
}

/* Fundo com gradiente suave azul -> laranja */
body.container{
  margin:0; padding:48px 20px; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial;
  color:var(--text);
  background: linear-gradient(135deg, color-mix(in oklab, var(--accent), white 82%) 0%, color-mix(in oklab, var(--accent-2), white 88%) 100%) fixed;
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center;
}

/* Wrapper tipo card central (aplicado onde há .card) */
.card{
  width:min(880px, 96vw);
  background: var(--card);
  border:1px solid var(--border);
  border-radius:24px;
  padding:32px;
  box-shadow: var(--shadow);
  margin:16px auto;
}

/* HEADER mais adaptável */
header{
  width:min(880px,96vw);
  display:flex; align-items:center; gap:16px;
  margin:0 auto 16px auto; flex-wrap:wrap;
}
.logo{
  width: clamp(160px, 22vw, 70px);
  height: auto; max-width:50%;
}
.theme-toggle{margin-left:auto}
button.theme{
  background:transparent; border:1px solid var(--border); color:var(--text);
  padding:8px 12px; border-radius:12px; cursor:pointer
}

h1{font-size:clamp(24px, 3.1vw, 40px); line-height:1.1; margin:8px 0 2px 0}
h2{font-size:clamp(18px, 2.1vw, 22px); margin:0 0 12px 0}
.muted{color:var(--muted)}

/* Badge de status */
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:999px; border:1px solid var(--border);
  background: color-mix(in oklab, var(--card), black 4%);
  margin: 8px 0 16px; font-weight:600;
  max-width:100%;
}
.status-live{color:white; background: linear-gradient(135deg, var(--accent), var(--accent-2)); border:none}
.status-ended{}

/* Inputs */
label{display:block; margin-top:12px; margin-bottom:6px; color:var(--muted); font-weight:600}
input, select, textarea{
  width:100%; padding:12px 14px; border-radius:14px; border:1px solid var(--border);
  background: color-mix(in oklab, var(--card), black 3%); color:var(--text); outline:none;
}
input:focus, select:focus, textarea:focus{ box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent), white 70%); border-color: var(--accent) }

/* Botões */
.btn{
  display:inline-block; border:none; cursor:pointer; font-weight:800; letter-spacing:.2px;
  padding:12px 18px; border-radius:14px; color:#fff;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  text-decoration:none; box-shadow: 0 8px 18px rgba(0,0,0,.15);
}
.btn:hover{ transform: translateY(-1px) }
.btn:active{ transform: translateY(0) }
.btn.outline{ background:transparent; color:var(--accent); border:2px solid var(--accent); box-shadow:none }
.btn.danger{ background: linear-gradient(135deg, var(--danger), #ff9aa1) }

/* Opções de resposta = estilo "pílula" */
.option{
  display:block; width:100%; margin:10px 0; padding:14px 16px; border-radius:16px;
  background: color-mix(in oklab, var(--card), black 3%);
  border:1px solid var(--border); color:var(--text); cursor:pointer; text-align:left; font-size:16px; font-weight:600;
  transition: transform .06s ease, box-shadow .15s ease, border-color .15s ease;
}
.option:hover{ border-color: var(--accent); box-shadow: 0 6px 14px rgba(0,0,0,.10); transform: translateY(-1px) }
.option.correct{ background: color-mix(in oklab, var(--success), white 85%); border-color: color-mix(in oklab, var(--success), black 15%) }
.option.incorrect{ background: color-mix(in oklab, var(--danger), white 85%); border-color: color-mix(in oklab, var(--danger), black 15%) }
.option:disabled{ opacity:.95; cursor:not-allowed; box-shadow:none; transform:none }

/* GRID utilitário (usado nos formulários) */
.grid2{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
@media (max-width: 900px){
  .grid2{ grid-template-columns:1fr; }
}

/* Tabelas (admin/histórico) */
.table{width:100%; border-collapse:collapse}
.table th, .table td{ text-align:left; padding:12px; border-bottom:1px solid var(--border) }
.table th{ color:var(--muted); font-weight:700 }

/* Tabela rolável em telas pequenas, sem alterar HTML */
@media (max-width: 700px){
  .table{ display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .table thead, .table tbody, .table tr{ display:table; width:100%; table-layout:fixed; }
  .table td, .table th{ white-space:nowrap; }
}

/* Ranking */
.rank{ display:flex; flex-direction:column; gap:10px }
.rank-row{
  display:grid; grid-template-columns:60px 1fr 120px 150px; gap:12px; align-items:center;
  background: color-mix(in oklab, var(--card), black 3%);
  border:1px solid var(--border); padding:14px; border-radius:14px;
}
.pos{ font-weight:900; text-align:center }

/* Utilitários */
.center{text-align:center}
.spacer{height:12px}

/* AJUSTES RESPONSIVOS GERAIS */
@media (max-width: 1024px){
  body.container{ padding:36px 16px; }
  .card{ padding:24px; }
}

@media (max-width: 840px){
  header{ gap:12px; }
  .theme-toggle{ margin-left:0; order:3; width:100%; display:flex; justify-content:flex-end; }
}

@media (max-width:700px){
  .rank-row{ grid-template-columns:42px 1fr 90px 90px }
}

@media (max-width: 560px){
  header{ flex-direction:column; align-items:flex-start; }
  .badge{ width:100%; justify-content:center; }
  .btn{ width:100%; text-align:center; }          /* botões ocupam largura total */
  .logo{ width: clamp(140px, 40vw, 220px); }
}

/* Preferência do usuário: reduz movimento */
@media (prefers-reduced-motion: reduce){
  .btn:hover{ transform:none }
  .option{ transition:none }
}