:root{
  --bg:#0b1020;
  --bg2:#0a1433;
  --card:rgba(16,26,51,.86);
  --text:#e8ecff;
  --muted:#a7b0d6;
  --line:rgba(255,255,255,.12);
  --line2:rgba(255,255,255,.18);
  --ok:#3ddc84;
  --bad:#ff5b5b;
  --shadow: 0 20px 60px rgba(0,0,0,.28);
  --radius: 18px;
}
.theme-light{
  --bg:#f6f7fb;
  --bg2:#eef2ff;
  --card:rgba(255,255,255,.9);
  --text:#0c1020;
  --muted:#445072;
  --line:rgba(12,16,32,.12);
  --line2:rgba(12,16,32,.18);
  --shadow: 0 18px 40px rgba(12,16,32,.10);
}
*{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;
  background: radial-gradient(1200px 600px at 20% 0%, var(--bg2) 0%, var(--bg) 60%);
  color:var(--text);
}
.wrap{max-width:1040px;margin:0 auto;padding:16px;}
.topbar{
  position:sticky;top:0;z-index:10;
  background:rgba(11,16,32,.65);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.theme-light .topbar{background:rgba(246,247,251,.75);}
.topbar .wrap{display:flex;gap:12px;align-items:center;justify-content:space-between;}
.brand{font-weight:900;letter-spacing:.4px;font-size:18px;}
.card{
  border:1px solid var(--line);
  background:var(--card);
  border-radius:var(--radius);
  padding:18px;
  box-shadow: var(--shadow);
}
h1{margin:0 0 10px 0;font-size:32px;letter-spacing:.2px;}
h2{margin:16px 0 10px 0;font-size:20px;}
.muted{color:var(--muted);}
.form{display:grid;gap:12px;margin-top:12px;}
.form label > span{display:block;margin-bottom:6px;color:var(--muted);font-weight:650;}
input{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background: rgba(12,20,48,.6);
  color:var(--text);
  outline:none;
}
.theme-light input{background: rgba(245,247,255,.9);}
input:focus{border-color:var(--line2);}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(18,31,68,.7);
  color:var(--text);
  cursor:pointer;
  text-decoration:none;
  user-select:none;
}
.theme-light .btn{background:rgba(239,242,255,.9);}
.btn:hover{filter:brightness(1.05);}
.btn.primary{background:rgba(26,45,99,.78);border-color:rgba(255,255,255,.22);}
.theme-light .btn.primary{background:rgba(220,232,255,.95);border-color:rgba(12,16,32,.15);}
.btn.small{padding:8px 10px;border-radius:12px;line-height:1;}
.sep{border:none;border-top:1px solid var(--line);margin:14px 0;}
.alert{
  padding:10px 12px;
  border:1px solid var(--line2);
  border-radius:14px;
  background: rgba(255,255,255,.06);
}
.theme-light .alert{background: rgba(12,16,32,.04);}
.alert.subtle{opacity:.95;}
.row{display:flex;gap:12px;align-items:center;}
.space-between{justify-content:space-between;}
.timer{font-weight:800;letter-spacing:.2px;}
.q{
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  margin:14px 0;
  background: rgba(0,0,0,.10);
}
.theme-light .q{background: rgba(12,16,32,.03);}
.qhead{
  display:grid;
  grid-template-columns:70px 1fr 80px;
  gap:12px;
  align-items:start;
  margin-bottom:10px;
}
.qid{
  font-weight:900;
  color:rgba(255,255,255,.75);
  background: rgba(255,255,255,.06);
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 12px;
  text-align:center;
}
.theme-light .qid{color:rgba(12,16,32,.78);background: rgba(12,16,32,.04);}
.qtitle{font-weight:900;font-size:20px;line-height:1.25;}
.qpts{text-align:right;color:var(--muted);font-weight:800;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:10px;}
.inline{display:flex;gap:10px;align-items:center;justify-content:space-between;}
.inline input{max-width:170px;}
.mat{
  border-collapse:separate;
  border-spacing:10px 10px;
  margin-top:6px;
}
.mat td{
  border:1px solid var(--line);
  padding:10px 12px;
  min-width:56px;
  text-align:center;
  background: rgba(12,20,48,.55);
  border-radius:12px;
  font-weight:800;
}
.theme-light .mat td{background: rgba(245,247,255,.9);}
.matrix{
  position:relative;
  display:inline-block;
  padding:10px 16px;
  margin-top:4px;
}
.matrix:before,
.matrix:after{
  content:"";
  position:absolute;
  top:6px; bottom:6px;
  width:12px;
}
.matrix:before{
  left:0;
  border-left:3px solid var(--text);
  border-top:3px solid var(--text);
  border-bottom:3px solid var(--text);
  border-radius:12px 0 0 12px;
  opacity:.85;
}
.matrix:after{
  right:0;
  border-right:3px solid var(--text);
  border-top:3px solid var(--text);
  border-bottom:3px solid var(--text);
  border-radius:0 12px 12px 0;
  opacity:.85;
}
.theme-light .matrix:before,
.theme-light .matrix:after{opacity:.55;}
.mat-input td{padding:0;background: transparent;border:none;min-width:auto;}
.mat-input input{width:92px;text-align:center;font-weight:800;padding:10px 10px;}
.matrix-input{margin-top:8px;}
.options{display:grid;gap:10px;margin-top:10px;}
.opt{
  display:flex;gap:10px;align-items:flex-start;
  padding:12px;border-radius:14px;
  border:1px solid var(--line);
  background: rgba(12,20,48,.55);
}
.theme-light .opt{background: rgba(245,247,255,.9);}
.opt input{width:auto;margin-top:2px;}
.score .big{font-size:44px;font-weight:950;}
.q.result.ok{border-color:rgba(61,220,132,.35);}
.q.result.bad{border-color:rgba(255,91,91,.35);}
.explain{margin-top:8px;color:var(--muted);}
.noselect, .noselect *{-webkit-user-select:none !important;user-select:none !important;}
.table{width:100%;border-collapse:collapse;font-size:14px;min-width:920px;}
.table th,.table td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top;}
.table th{color:var(--muted);font-weight:800;}
select{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background: rgba(12,20,48,.55);
  color:var(--text);
  outline:none;
}
.theme-light select{background: rgba(245,247,255,.9);}
select:focus{border-color:var(--line2);}


.stepper{margin-top:10px;}
.progress{height:10px;border-radius:999px;border:1px solid var(--line);background: rgba(255,255,255,.06);overflow:hidden;}
.theme-light .progress{background: rgba(12,16,32,.04);}
.progress .bar{height:100%;width:0%;background: rgba(61,220,132,.65);transition: width .2s ease;}

.opt span{display:inline;}

.btn.danger{
  background: rgba(120, 20, 20, .55);
  border-color: rgba(255, 91, 91, .45);
}

.tbl{
  width:100%;
  border-collapse: collapse;
  font-size: 14px;
}
.tbl th, .tbl td{
  border-bottom:1px solid var(--line);
  padding:10px 8px;
  text-align:left;
  vertical-align: top;
}
.tbl th{color:var(--muted); font-weight:700;}