/* (same modern cerah styles, slightly trimmed) */
:root{
  --bg:#f5f7fb; --card:#ffffff; --primary:#1E88E5; --accent:#FFCA28; --muted:#6b7280; --danger:#ef5350; --radius:12px;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Poppins',sans-serif;background:var(--bg);color:#08304a;padding:20px}
.app{max-width:1200px;margin:0 auto}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:16px;border-radius:14px;background:linear-gradient(90deg, rgba(255,255,255,0.95), rgba(255,255,255,0.8));box-shadow:0 10px 30px rgba(16,24,40,0.06)}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:64px;height:64px;border-radius:10px;background:linear-gradient(180deg,var(--primary),#4fa3f8);display:flex;align-items:center;justify-content:center;color:white;font-size:28px}
.subtitle{margin:0;color:var(--muted);font-size:13px}
.top-controls{display:flex;gap:12px;align-items:center}
.timer-circle{width:84px;height:84px;position:relative}
.timer-circle svg{width:100%;height:100%;transform:rotate(-90deg)}
.timer-circle .bg{fill:none;stroke:#eef5fb;stroke-width:3}
.timer-circle .progress{fill:none;stroke:var(--primary);stroke-width:3;stroke-linecap:round;stroke-dasharray:100,100}
.time-text{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;align-items:center;justify-content:center;font-weight:800;color:#08304a}
.controls-row{display:flex;gap:8px;align-items:center}
.select{padding:8px 10px;border-radius:8px;border:1px solid #e6eef9;background:white}
.input-num{padding:8px;border-radius:8px;border:1px solid #e6eef9}
.btn{padding:8px 12px;border-radius:10px;border:none;background:white;box-shadow:0 6px 16px rgba(16,24,40,0.04);cursor:pointer;font-weight:700}
.btn.primary{background:linear-gradient(90deg,var(--primary),#4fa3f8);color:white}
.btn.danger{background:linear-gradient(90deg,var(--danger),#ff7b7b);color:white}
.main{display:flex;gap:18px;margin-top:18px}
.left-panel{flex:0 0 360px}
.right-panel{flex:1}
.card{background:var(--card);padding:14px;border-radius:12px;box-shadow:0 6px 20px rgba(16,24,40,0.04)}
.row{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.small-grid{display:flex;gap:8px}
.input-small{width:68px;padding:8px;border-radius:8px;border:1px solid #eef6ff}
.team-controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.teams-list{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.team-row{display:flex;gap:8px;align-items:center;padding:10px;border-radius:10px;background:linear-gradient(180deg,#fff,#fbfdff);box-shadow:0 6px 18px rgba(16,24,40,0.03)}
.team-row input[type="text"]{flex:1;padding:8px;border-radius:8px;border:1px solid #eef6ff;font-weight:700}
.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:12px}
.team-card{padding:14px;border-radius:12px;background:linear-gradient(180deg,#fff,#fffef6);box-shadow:0 10px 28px rgba(16,24,40,0.06);position:relative;overflow:hidden}
.team-name{font-weight:800;margin-bottom:6px;color:#0b2340}
.team-score{font-size:44px;font-weight:900;color:var(--primary)}
.card-actions{display:flex;gap:8px;margin-top:10px}
.btn-small{padding:10px 12px;border-radius:10px;border:none;cursor:pointer;font-weight:800}
.btn-correct{background:linear-gradient(90deg,#66bb6a,#43a047);color:white}
.btn-wrong{background:linear-gradient(90deg,#ef5350,#e53935);color:white}
.btn-reset{background:linear-gradient(90deg,var(--accent),#ffb300);color:#08304a}
.rank-badge{position:absolute;right:12px;top:12px;padding:6px 10px;border-radius:999px;font-weight:800;color:white}
.footer{margin-top:14px;color:var(--muted);font-size:13px;text-align:center}
.present-overlay{position:fixed;inset:0;background:#071126;display:flex;align-items:center;justify-content:center;z-index:9999}
.present-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;width:90%;max-width:1400px}
.present-card{padding:18px;border-radius:12px;background:linear-gradient(180deg,#081633,#0b2a50);color:white;text-align:center}
.present-score{font-size:48px;font-weight:900;color:var(--accent);margin-top:8px}
.confetti{position:fixed;top:-10px;width:10px;height:18px;border-radius:2px;z-index:9999;opacity:0.95}
@media (max-width:900px){.main{flex-direction:column}.left-panel{flex:1}}