:root{ --bg:#0f172a; --muted:#94a3b8; --text:#e5e7eb; --accent:#22d3ee; --ok:#34d399; }
*{box-sizing:border-box}
body{
  margin:0; font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  color:var(--text); background:#0b1020;
  display:flex; flex-direction:column; gap:18px; align-items:center; padding:24px;
}
header{width:min(1100px,95%); display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:12px}
.brand{font-size:clamp(20px,2.4vw,30px); font-weight:800}
.header-actions{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.intro-actions{display:flex; align-items:flex-end; justify-content:flex-end; gap:10px; flex-wrap:wrap}
.lang-switch{display:flex; gap:6px; z-index:60}
.lang-switch button{all:unset; cursor:pointer; padding:6px 12px; border-radius:999px; border:1px solid #334155;
  background:#0b1220; color:#94a3b8; font-weight:700; font-size:13px; min-width:44px; text-align:center;}
.lang-switch button.active{color:#22d3ee; border-color:#22d3ee}
.timer-display{flex:1; text-align:center; font-weight:700; font-size:18px; color:var(--accent)}
@media (max-width:700px){.timer-display{order:3; width:100%; margin-top:8px}}
.pill{border:1px solid #334155; color:var(--muted); padding:6px 10px; border-radius:999px; font-size:12px}
.time-note{width:min(1100px,95%); color:var(--muted); font-weight:600; text-align:center}
#respondent{background:#0b1220;border:1px solid #334155;color:#e5e7eb;
  border-radius:10px;padding:6px 10px;outline:none;min-width:160px}
.intro{width:min(1100px,95%); display:flex; flex-direction:column; gap:18px}
.intro-head{display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap}
.intro-title{font-size:clamp(26px,3.2vw,36px); font-weight:800}
.intro-card{background:rgba(255,255,255,.02); border:1px solid #273043; border-radius:18px; padding:26px 28px; display:grid; gap:18px}
.intro-card h2{margin:0; font-size:clamp(20px,2.4vw,28px); font-weight:700}
.intro-card p{margin:0; color:var(--muted); line-height:1.5}
.captcha-block{display:grid; gap:10px}
.captcha-visual{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
#captchaCanvas{background:#0b1220; border:1px solid #22314a; border-radius:10px}
.captcha-inputs{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.captcha-error{color:#f87171; font-size:14px; min-height:18px}
.ack-check{display:flex; align-items:center; gap:10px; font-weight:600; color:var(--muted)}
.ack-check input{width:18px; height:18px; accent-color:var(--accent)}
.ack-error{color:#f87171; font-size:14px; min-height:18px}
#appShell{display:none; width:100%; align-items:center; flex-direction:column; gap:18px}
.badge-name{display:none; align-items:center; gap:6px; border-radius:999px; border:1px solid #334155; padding:6px 10px; font-size:12px; color:var(--muted)}

.frame-wrap{position:relative; width:100%; max-width:1100px; padding:0 90px; display:flex; flex-direction:column; align-items:center; gap:14px}
.frame{position:relative; background:rgba(255,255,255,.02); border:1px solid #273043; border-radius:18px;
  padding:22px 24px 26px; min-height:460px; box-shadow:0 10px 30px rgba(0,0,0,.35);
  display:flex; flex-direction:column; gap:18px; width:100%}
.q-header{display:flex; justify-content:space-between; align-items:center; gap:12px}
.q-title{font-weight:700; font-size:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1}
.points-left{font-weight:700}
.points-left span{color:var(--accent)}
.list{display:grid; gap:10px}
.row{display:grid; grid-template-columns:max-content 1fr; gap:12px; align-items:center}
.ctrl{display:inline-flex; align-items:center; gap:10px; background:#0c1424; border:1px solid #22314a;
  border-radius:11px; padding:6px 10px; min-width:130px; justify-content:center}
.btn{width:36px; height:36px; display:grid; place-items:center; border-radius:10px; cursor:pointer;
  user-select:none; border:1px solid #22314a; background:#0b1220; font-weight:700; transition:background .15s}
.btn[disabled]{opacity:.35; cursor:not-allowed}
.btn.minus{ background:#2a1420; border-color:#5b2333; color:#fca5a5; }
.btn.minus:hover:not([disabled]){ background:#351826; }
.btn.plus{  background:#10281f; border-color:#1f513e; color:#86efac; }
.btn.plus:hover:not([disabled]){  background:#153126; }
.num{width:42px; text-align:center; font-weight:800; letter-spacing:.5px}
.ans{line-height:1.35}

.nav-row{display:flex; justify-content:center; align-items:center; gap:50px; width:100%;}
.nav-arrow{position:static; transform:none; width:60px; height:60px; border-radius:999px;
  background:#0b1220; border:1px solid #22314a; box-shadow:0 8px 20px rgba(0,0,0,.35);
  cursor:pointer; font-size:26px; display:flex; align-items:center; justify-content:center}
.nav-arrow.hidden{visibility:hidden; pointer-events:none}

.progress{display:flex; gap:6px; align-items:center; flex-wrap:wrap; flex-shrink:0}
.dot{width:24px; height:24px; border-radius:999px; border:1px solid #22314a; display:grid; place-items:center;
  font-size:12px; color:var(--muted)}
.dot.done{background:#0f3a2d; color:#dcfce7; border-color:#22c55e}
.dot.active{border-color:#22d3ee; color:#22d3ee}

.btn-primary{all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:12px; border:1px solid #1f2d45;
  background:linear-gradient(180deg,#0b1220,#0f1b34); font-weight:800}
#startTestBtn{display:flex; align-items:center; justify-content:center; height:40px;
  padding:0 24px; margin:0 auto}
.btn-primary[disabled]{opacity:.45; cursor:not-allowed}
.btn-secondary{all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  padding:9px 12px; border-radius:10px; border:1px solid #334155; background:#0b1220; color:#aab2c2; font-weight:700}

.charts{width:min(1100px,95%); display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:900px){ .charts{grid-template-columns:1fr} }
.canvas-wrap{background:rgba(255,255,255,.02); border:1px solid #22314a; border-radius:12px;
  padding:10px; display:flex; flex-direction:column; align-items:center}
.chart-canvas{width:100%; height:360px; min-height:260px; background:#0f172a;
  border:1px solid #22314a; border-radius:10px}
.download-row{width:60%; display:flex; justify-content:center; margin-top:8px}

.results{width:min(1100px,95%); display:none; gap:12px}
.card{background:rgba(255,255,255,.02); border:1px solid #273043; border-radius:18px; padding:16px 18px}
.res-list{display:grid; gap:8px}
.res-row{display:flex; justify-content:space-between; align-items:center; padding:10px 12px;
  background:#0b1324; border:1px solid #22314a; border-radius:12px}
.res-name{font-weight:700; cursor:pointer}
.panel{margin-top:8px; padding:12px; border:1px solid #22314a; border-radius:10px; background:#0b1220}
.panel h4{margin:0 0 6px 0}
.stack{display:grid; gap:8px}
.line{display:flex; gap:8px; align-items:flex-start}
.pillIcon{width:22px; height:22px; border-radius:999px; display:grid; place-items:center; font-weight:900}
.pos{background:#0d3b2f; color:#86efac}
.neg{background:#3b1220; color:#fca5a5}
.more-block{margin-top:10px; border-top:1px dashed #334155; padding-top:10px; display:none}
.more-title{font-weight:700; margin-bottom:6px; color:#cbd5e1}
.more-btn{margin-top:10px}
.stats-wrap{margin-top:12px; display:none; overflow-x:auto}
table.stats{width:100%; border-collapse:collapse; margin-top:12px}
.stats th,.stats td{border:1px solid #22314a; padding:6px 8px; text-align:left}
.stats th{background:#0b1324}
.results-actions{width:100%; display:flex; justify-content:center; margin-top:12px}
.results-footer{margin-top:18px; color:var(--muted); line-height:1.5}
.modal{position:fixed; inset:0; background:rgba(8,12,24,.82); display:flex; align-items:center; justify-content:center; padding:20px; z-index:50}
.modal.hidden{display:none}
.modal-card{background:#0b1324; border:1px solid #22314a; border-radius:16px; padding:24px 28px; max-width:360px; text-align:center; display:grid; gap:18px}
#timeoutOkBtn{justify-self:center; padding:6px 0; width:30px; display:inline-flex; justify-content:center}

/* Responsive tweaks for better mobile layout */
@media (max-width:1024px){
  body{padding:20px;}
  .frame-wrap{padding:0 48px;}
  .frame{padding:18px 18px 22px; min-height:420px;}
  .q-header{flex-direction:column; align-items:flex-start;}
  .row{grid-template-columns:1fr; gap:10px; align-items:flex-start;}
  .ctrl{width:100%; justify-content:space-between;}
  .header-actions{flex-wrap:wrap;}
  .nav-row{gap:50px;}
  .nav-arrow{width:54px; height:54px;}
  .intro{gap:14px;}
  .intro-card{padding:22px;}
  .captcha-visual,.captcha-inputs{flex-direction:column; align-items:flex-start;}
  .captcha-visual canvas{max-width:100%; height:auto;}
}

/* Compact stacking for small devices */
@media (max-width:700px){
  body{padding:16px;}
  header{flex-direction:column; align-items:flex-start;}
  .intro-head{flex-direction:column; align-items:flex-start;}
  .frame-wrap{display:flex; gap:12px; padding:0;}
  .frame{height:auto; min-height:380px;}
  .q-title{white-space:normal; text-overflow:unset;}
  .nav-row{gap:50px; justify-content:center;}
  .nav-arrow{width:52px; height:52px; justify-self:flex-start;}
  .progress{justify-content:center;}
  .list{gap:12px;}
  .chart-canvas{height:300px; min-height:240px;}
  .download-row{width:100%;}
  .res-row{flex-direction:column; align-items:flex-start; gap:10px;}
  .results{width:100%;}
  .charts{width:100%;}
  .intro-actions{justify-content:flex-start; width:100%;}
  .lang-switch{order:2;}
  #respondent{width:100%;}
}

/* Prevent overflow on very small screens */
@media (max-width:480px){
  .frame{padding:16px;}
  .btn{width:34px; height:34px;}
  .ctrl{padding:6px 8px;}
  .brand{font-size:22px;}
  .download-row{flex-direction:column; gap:8px;}
  .canvas-wrap{padding:12px;}
  .stats-wrap{overflow-x:auto;}
}