:root{
  --vie:#087c6a;--vie2:#0aa085;--vie-soft:#e8f7f3;
  --admin:#9a6900;--admin2:#d89a19;
  --bg:#f4f7f7;--card:#ffffff;--ink:#13211f;--muted:#71817d;
  --line:#dce7e4;--danger:#c93d3d;--shadow:0 14px 38px rgba(24,52,47,.10)
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink)}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
a{color:var(--vie);text-decoration:none}
.hidden{display:none!important}
.shell{width:min(1120px,100%);margin:auto;padding:16px}
.card{background:var(--card);border:1px solid rgba(9,61,52,.06);border-radius:22px;box-shadow:var(--shadow)}
.pad{padding:18px}
.muted{color:var(--muted);font-size:13px}
.small{font-size:12px}
.brand{display:flex;align-items:center;gap:10px;font-weight:950;letter-spacing:.4px}
.brand-mark{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,var(--vie),var(--vie2));box-shadow:0 8px 20px rgba(8,124,106,.22)}
.admin-theme .brand-mark{background:linear-gradient(145deg,var(--admin),var(--admin2));box-shadow:0 8px 20px rgba(154,105,0,.20)}
.topbar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;background:rgba(244,247,247,.88);backdrop-filter:blur(14px)}
.top-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.btn{border:0;border-radius:13px;padding:11px 14px;font-weight:850;transition:.15s transform,.15s opacity,.15s background}
.btn:active{transform:scale(.98)}
.btn-primary{color:#fff;background:linear-gradient(145deg,var(--vie),var(--vie2))}
.admin-theme .btn-primary{background:linear-gradient(145deg,var(--admin),var(--admin2))}
.btn-soft{background:#edf5f3;color:#31544e}
.btn-danger{background:#fff0f0;color:var(--danger)}
.btn-dark{background:#182724;color:#fff}
.btn:disabled{opacity:.42;cursor:not-allowed}
.icon-btn{width:42px;height:42px;padding:0;display:grid;place-items:center;border-radius:14px}
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px;background:
 radial-gradient(circle at 15% 5%,rgba(10,160,133,.15),transparent 32%),
 radial-gradient(circle at 90% 100%,rgba(8,124,106,.12),transparent 35%),var(--bg)}
.login-card{width:min(430px,100%);padding:25px}
.login-card h1{margin:15px 0 4px;font-size:29px}
.field{display:grid;gap:6px;margin-top:12px}
.field label{font-size:13px;font-weight:800;color:#52635f}
input,textarea,select{width:100%;border:1px solid var(--line);background:#fff;border-radius:13px;padding:12px 13px;color:var(--ink);outline:none}
input:focus,textarea:focus,select:focus{border-color:var(--vie);box-shadow:0 0 0 3px rgba(8,124,106,.10)}
textarea{resize:vertical}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.section-title{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:13px}
.section-title h2,.section-title h3{margin:0}
.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:999px;background:#edf5f3;color:#47615c;font-size:12px;font-weight:850}
.pill.green{background:#e7f8ef;color:#16784c}.pill.orange{background:#fff3dc;color:#93620a}.pill.red{background:#ffeded;color:#b53131}.pill.blue{background:#eaf3ff;color:#3167a6}
.dot{width:8px;height:8px;border-radius:50%;background:#97a7a3}.dot.on{background:#20a96b;box-shadow:0 0 0 4px rgba(32,169,107,.11)}
.player-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px}
.quiz-card{padding:18px;min-height:360px}
.question-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.timer{font-size:20px;font-weight:950;font-variant-numeric:tabular-nums}
.qtext{font-size:clamp(21px,4vw,31px);line-height:1.28;margin:18px 0 12px}
.qimg{width:100%;max-height:42vh;object-fit:contain;background:#f2f5f4;border-radius:18px;border:1px solid var(--line);margin-bottom:15px}
.answers{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.answer{width:100%;min-height:62px;text-align:left;border:2px solid var(--line);background:#fff;border-radius:17px;padding:13px;display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:780}
.answer-letter{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:11px;background:#eef4f2;font-weight:950}
.answer.selected{border-color:var(--vie);background:#ebfaf6}.answer.selected .answer-letter{background:var(--vie);color:#fff}
.answer.correct{border-color:#19a35e;background:#eaf9f0}.answer.correct .answer-letter{background:#19a35e;color:#fff}
.answer.wrong{border-color:#d64a4a;background:#fff1f1}.answer.wrong .answer-letter{background:#d64a4a;color:#fff}
.waiting{min-height:330px;display:grid;place-items:center;text-align:center;padding:30px}
.waiting-orb{width:78px;height:78px;border-radius:24px;display:grid;place-items:center;font-size:35px;background:var(--vie-soft);margin:auto}
.voice-bar{display:flex;gap:9px;align-items:center}
.voice-btn{min-width:112px}
.voice-btn.on{background:#e6f7ef;color:#117449}
.voice-btn.off{background:#f1f3f3;color:#586863}
.online-card{padding:15px;align-self:start;position:sticky;top:78px}
.people{display:grid;gap:8px}
.person{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px;border:1px solid var(--line);border-radius:14px;background:#fff}
.person-main{display:flex;align-items:center;gap:9px;min-width:0}
.avatar{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:#eef5f3;font-weight:900;color:#335a53}
.person-name{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.score-card{margin-top:14px;padding:13px 15px;display:flex;justify-content:space-between;align-items:center}
.score-number{font-size:24px;font-weight:950;color:var(--vie)}
.admin-tabs{display:flex;gap:7px;padding:6px;background:#e9efed;border-radius:15px;width:max-content;max-width:100%;overflow:auto}
.tab{border:0;background:transparent;padding:9px 13px;border-radius:11px;font-weight:850;color:#5a6b67;white-space:nowrap}
.tab.active{background:#fff;color:#253632;box-shadow:0 4px 14px rgba(35,56,51,.08)}
.admin-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:14px;margin-top:14px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.stat{border:1px solid var(--line);border-radius:16px;padding:12px;background:#fbfcfc}
.stat strong{font-size:22px;display:block}
.live-question{margin-top:12px;padding:13px;background:#f7faf9;border-radius:16px;border:1px solid var(--line)}
.stat-answer{display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:9px;margin-top:8px}
.bar{height:8px;background:#e8efed;border-radius:999px;overflow:hidden}.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--admin),var(--admin2));border-radius:999px}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.question-list{display:grid;gap:9px}
.qitem{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;border:1px solid var(--line);border-radius:16px;padding:11px;background:#fff}
.qnum{width:37px;height:37px;border-radius:12px;display:grid;place-items:center;background:#f2f5f4;font-weight:950}
.qmeta{min-width:0}.qmeta strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qactions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.mini{padding:8px 10px;border-radius:10px;font-size:12px}
.player-admin-list{display:grid;gap:8px}
.admin-player{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:14px}
.modal{position:fixed;inset:0;z-index:80;background:rgba(13,25,22,.46);display:grid;place-items:center;padding:16px}
.modal-box{width:min(720px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:22px;box-shadow:0 25px 80px rgba(0,0,0,.22);padding:18px}
.option-editor{display:grid;gap:8px;margin-top:10px}
.option-row{display:grid;grid-template-columns:42px 1fr auto;gap:8px;align-items:center}
.option-radio{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);display:grid;place-items:center;background:#f8faf9}
.option-radio input{width:auto;margin:0}
.toast{position:fixed;right:18px;bottom:18px;z-index:100;background:#182724;color:#fff;padding:11px 14px;border-radius:13px;box-shadow:var(--shadow);max-width:min(390px,calc(100vw - 36px))}
.kicker{font-size:12px;font-weight:900;letter-spacing:.8px;text-transform:uppercase;color:var(--vie)}
.admin-theme .kicker{color:var(--admin)}
@media(max-width:850px){
  .player-layout,.admin-grid{grid-template-columns:1fr}
  .online-card{position:static}
  .stats{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .shell{padding:10px}.topbar{padding:9px 10px}
  .card{border-radius:18px}.pad,.quiz-card{padding:14px}
  .brand-text small{display:none}
  .voice-btn{min-width:auto;padding:10px 11px}
  .answers{gap:8px}.answer{padding:10px;min-height:58px}.answer-letter{width:30px;height:30px;flex-basis:30px}
  .qtext{margin-top:14px}.grid2,.grid3{grid-template-columns:1fr}
  .qitem{grid-template-columns:auto 1fr}.qactions{grid-column:1/-1;justify-content:flex-start}
  .admin-tabs{width:100%}.tab{flex:1}
}