:root{
  --bg1:#0b1020;
  --bg2:#0a2a2f;
  --card:rgba(255,255,255,.09);
  --card2:rgba(255,255,255,.06);
  --stroke:rgba(255,255,255,.14);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.72);
  --good:#39d98a;
  --bad:#ff5c7a;
  --warn:#ffd166;
  --shadow: 0 18px 50px rgba(0,0,0,.35);
  --radius:18px;
}

:root[data-theme="light"]{
  --bg1:#eef2ff;
  --bg2:#e7fff7;
  --card:rgba(255,255,255,.74);
  --card2:rgba(255,255,255,.55);
  --stroke:rgba(10,15,40,.10);
  --text:rgba(15,20,35,.92);
  --muted:rgba(15,20,35,.66);
  --shadow: 0 16px 40px rgba(10,15,40,.12);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background: linear-gradient(145deg,var(--bg1),var(--bg2));
  overflow-x:hidden;
}

.bg{
  position:fixed; inset:0;
  background:
    radial-gradient(900px 500px at 20% 15%, rgba(121,137,255,.30), transparent 60%),
    radial-gradient(900px 600px at 80% 20%, rgba(58,255,204,.22), transparent 60%),
    radial-gradient(700px 520px at 40% 90%, rgba(255,92,122,.16), transparent 60%);
  filter: blur(0px);
  pointer-events:none;
}

.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px;
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,0));
  border-bottom:1px solid rgba(255,255,255,.06);
}

:root[data-theme="light"] .topbar{
  background: linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,0));
  border-bottom:1px solid rgba(10,15,40,.08);
}

.brand{display:flex; gap:12px; align-items:center}
.logo{
  width:40px; height:40px; border-radius:12px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(121,137,255,.55), rgba(58,255,204,.45));
  border:1px solid rgba(255,255,255,.20);
  box-shadow: var(--shadow);
  font-weight:800;
  overflow:hidden;
}
.logoImg{width:100%; height:100%; object-fit:cover; display:block}

.logoPreview{
  width:72px;
  height:72px;
  border-radius:18px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.06);
  overflow:hidden;
  display:grid;
  place-items:center;
}
:root[data-theme="light"] .logoPreview{ background: rgba(255,255,255,.45) }
.logoPreview img{width:100%;height:100%;object-fit:cover;display:block}
.brandName{font-weight:800; letter-spacing:.2px}
.brandSub{font-size:12px; color:var(--muted); margin-top:2px}

.themeToggle{
  border:1px solid var(--stroke);
  background: var(--card);
  color:var(--text);
  border-radius:999px;
  padding:10px 12px;
  display:flex; gap:10px; align-items:center;
  box-shadow: var(--shadow);
}
.themeDot{
  width:10px; height:10px; border-radius:999px;
  background: linear-gradient(135deg, rgba(255,209,102,.95), rgba(255,92,122,.85));
}
.themeLabel{font-size:12px; color:var(--muted)}

.container{
  width:min(980px, 100%);
  margin:0 auto;
  padding:18px 16px 44px;
}

.grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

@media (min-width: 880px){
  .grid.two{grid-template-columns: 1.2fr .8fr}
}

.card{
  background: linear-gradient(180deg, var(--card), var(--card2));
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:16px;
  backdrop-filter: blur(14px);
}

.h1{font-size:18px; font-weight:900; margin:0 0 8px}
.p{margin:0; color:var(--muted); line-height:1.55}
.muted{color:var(--muted)}

.formRow{display:flex; gap:10px; margin-top:14px}
.input{
  flex:1;
  width:100%;
  padding:12px 12px;
  border-radius: 14px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.10);
  color: var(--text);
  outline:none;
}
:root[data-theme="light"] .input{ background: rgba(255,255,255,.55) }
.input:focus{
  border-color: rgba(58,255,204,.55);
  box-shadow: 0 0 0 3px rgba(58,255,204,.12);
}

/* Select (Windows option list readability) */
select.input{
  padding-right: 42px;
}
select.input option{
  color: #101522;
  background: #ffffff;
}
.input.textarea{
  min-height:120px;
  line-height:1.6;
  padding:12px 14px;
  font-weight:700;
}
.charMeta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:8px;
  font-size:12px;
  color: var(--muted);
}
.charMeta .count{
  font-weight:900;
  color: var(--text);
}
.charMeta .count.bad{
  color: var(--bad);
}
.charMeta .count.good{
  color: var(--good);
}

/* Captcha (word scramble) */
.captchaGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
  margin-top:10px;
}
@media (min-width: 640px){
  .captchaGrid{ grid-template-columns: 1fr auto; align-items:end; }
}
.captchaCode{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px dashed rgba(255,255,255,.22);
  background: rgba(0,0,0,.06);
  font-weight:900;
  letter-spacing:.12em;
}
:root[data-theme="light"] .captchaCode{ background: rgba(255,255,255,.45); }
.btn{
  min-height:44px;
  padding:11px 14px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.18);
  background: linear-gradient(135deg, rgba(121,137,255,.55), rgba(58,255,204,.45));
  color: var(--text);
  font-weight:800;
  font-size:14px;
  line-height:1;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-decoration:none;
}
.btn:active{transform: translateY(1px)}
.btnAlt{
  background: transparent;
  border: 1px solid var(--stroke);
}
.btn.btnAlt{
  background: rgba(0,0,0,.06);
}
:root[data-theme="light"] .btn.btnAlt{
  background: rgba(255,255,255,.45);
}

.btnSm{
  min-height:38px;
  padding:9px 12px;
  border-radius:14px;
  font-size:13px;
}
.btnIcon{
  min-width:38px;
  padding:9px 10px;
}
.btn[disabled], .input[disabled]{
  opacity:.55;
  cursor:not-allowed;
}

.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.08);
  font-weight:900;
}
.dot{width:10px;height:10px;border-radius:999px;background:var(--warn)}
.dot.good{background:var(--good)}
.dot.bad{background:var(--bad)}

.result{
  margin-top:12px;
  display:grid;
  gap:10px;
}

.kv{
  display:grid;
  grid-template-columns: 120px 1fr;
  gap:8px;
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.06);
  align-items:center;
}
:root[data-theme="light"] .kv{ background: rgba(255,255,255,.45) }
.k{color:var(--muted); font-size:12px}
.v{font-weight:800}

/* KV variant for single-column form rows */
.kv.kvFull{
  grid-template-columns: 1fr;
}
.kv.kvFull .k{ display:none; }
.kv.kvFull .v{ font-weight:inherit; }
.labelInset{
  margin-left:42px; /* match .inputWrap.hasLeft padding */
}

.countdown{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  margin-top:10px;
}
.lockCenter{ text-align:center; }
.lockCenter .badge{ margin-left:auto; margin-right:auto; }
.lockCenter .countdown{ justify-content:center; }
.cdBox{
  min-width: 76px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.06);
  text-align:center;
}
.cdNum{font-weight:900; font-size:18px}
.cdLbl{font-size:11px; color:var(--muted); margin-top:2px}

.footer{margin-top:18px}
.footerInner{
  display:flex; gap:10px; align-items:center; justify-content:center;
  color:var(--muted); font-size:12px;
}
.footerLink{color:var(--muted); text-decoration:none}
.footerLink:hover{color:var(--text)}
.footerSep{opacity:.6}

.alert{
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.06);
}
.alert.bad{border-color: rgba(255,92,122,.35)}
.alert.good{border-color: rgba(57,217,138,.35)}

.flashStack{
  display:grid;
  gap:10px;
  margin-bottom:14px;
}

/* Progress bar */
.progressWrap{
  margin-top:12px;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.06);
}
:root[data-theme="light"] .progressWrap{ background: rgba(255,255,255,.45); }
.progressTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.progressLabel{font-weight:900}
.progressPct{color:var(--muted); font-size:12px; font-weight:900}
.progressTrack{
  height:10px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.08);
  overflow:hidden;
}
:root[data-theme="light"] .progressTrack{ background: rgba(255,255,255,.55); }
.progressFill{
  height:100%;
  width:0%;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(121,137,255,.85), rgba(58,255,204,.70));
  box-shadow: 0 10px 30px rgba(58,255,204,.10);
  transition: width .18s ease;
}

.confettiCanvas{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:999;
}

.icon{
  width:18px;
  height:18px;
  display:inline-block;
  vertical-align:-0.2em;
  fill: currentColor;
  opacity:.95;
}
.icon.sm{ width:16px; height:16px; }
.icon.lg{ width:20px; height:20px; }

.btnDanger{
  border-color: rgba(255,92,122,.30);
  background: linear-gradient(135deg, rgba(255,92,122,.35), rgba(255,209,102,.12));
}

/* Data table (admin) */
.tableCard{
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  overflow:hidden;
  background: rgba(0,0,0,.06);
}
:root[data-theme="light"] .tableCard{ background: rgba(255,255,255,.45); }
.dataTable{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}
.dataTable thead th{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color: var(--muted);
  padding:12px 12px;
  background: rgba(0,0,0,.10);
  border-bottom:1px solid var(--stroke);
  text-align:left;
  position:sticky;
  top:0;
  backdrop-filter: blur(10px);
}
:root[data-theme="light"] .dataTable thead th{
  background: rgba(255,255,255,.70);
}
.dataTable tbody tr{
  background: rgba(255,255,255,.03);
}
:root[data-theme="light"] .dataTable tbody tr{
  background: rgba(255,255,255,.60);
}
.dataTable tbody tr:nth-child(even){
  background: rgba(255,255,255,.01);
}
:root[data-theme="light"] .dataTable tbody tr:nth-child(even){
  background: rgba(255,255,255,.50);
}
.dataTable tbody tr:hover{
  background: rgba(121,137,255,.10);
}
.dataTable td{
  padding:12px 12px;
  border-bottom:1px solid rgba(255,255,255,.06);
  vertical-align:middle;
}
:root[data-theme="light"] .dataTable td{
  border-bottom:1px solid rgba(10,15,40,.06);
}
.cellStrong{font-weight:900}
.cellMuted{color:var(--muted); font-weight:700}
.statusPill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.06);
  font-weight:900;
  font-size:12px;
}
:root[data-theme="light"] .statusPill{ background: rgba(255,255,255,.45); }
.statusPill.good{ border-color: rgba(57,217,138,.35); color: var(--good); }
.statusPill.bad{ border-color: rgba(255,92,122,.35); color: var(--bad); }
.checkCell{ width:44px; text-align:center; }
.actionsCell{ width:180px; }
.checkBox{
  width:18px;
  height:18px;
  accent-color: #7989ff;
}

/* Admin widgets */
.adminStats{
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
}
.donut{
  width:120px; height:120px;
  border-radius:999px;
  background: conic-gradient(var(--good) calc(var(--pct)*1%), rgba(255,255,255,.10) 0);
  border:1px solid var(--stroke);
  display:grid; place-items:center;
  box-shadow: var(--shadow);
}
.donutInner{
  width:82px; height:82px;
  border-radius:999px;
  background: linear-gradient(180deg, var(--card), var(--card2));
  border:1px solid var(--stroke);
  display:grid; place-items:center;
  text-align:center;
}
.donutNum{font-weight:900; font-size:18px}
.donutLbl{font-size:11px; color:var(--muted); margin-top:-6px}
.adminStatList{flex:1; min-width: 210px}
.adminStatRow{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.06);
  margin-bottom:10px;
}
:root[data-theme="light"] .adminStatRow{ background: rgba(255,255,255,.45) }

/* Setup page */
.setupHero{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
  margin-top:12px;
}
@media (min-width: 880px){
  .setupHero{ grid-template-columns: .9fr 1.1fr; align-items:start; }
}
.setupSteps{
  display:grid;
  gap:10px;
}
.step{
  display:flex;
  gap:12px;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.06);
}
:root[data-theme="light"] .step{ background: rgba(255,255,255,.45) }
.stepNum{
  width:34px; height:34px;
  border-radius:12px;
  display:grid; place-items:center;
  font-weight:900;
  border:1px solid rgba(255,255,255,.18);
  background: linear-gradient(135deg, rgba(121,137,255,.55), rgba(58,255,204,.45));
  box-shadow: var(--shadow);
}
.stepTitle{font-weight:900}
.stepHint{font-size:12px; color:var(--muted); margin-top:2px}
.setupCard{
  padding:12px;
  border-radius:16px;
  border:1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
}
:root[data-theme="light"] .setupCard{
  background: linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.55));
}
.fieldGroup{padding:10px 10px}
.fieldTitle{font-weight:900}
.fieldHint{font-size:12px; color:var(--muted); margin-top:4px}
.inputGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
  margin-top:10px;
}
@media (min-width: 640px){
  .inputGrid.two{ grid-template-columns: 1fr 1fr; }
}
.label{font-size:12px; color:var(--muted); margin-bottom:6px}

/* Input with icons */
.inputWrap{
  position:relative;
}
.inputWrap .input{
  width:100%;
}
.inputWrap.hasLeft .input{ padding-left:42px; }
.inputWrap.hasRight .input{ padding-right:46px; }
.inputAffix{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.06);
  color: var(--muted);
}
:root[data-theme="light"] .inputAffix{ background: rgba(255,255,255,.45) }
.inputAffix.left{ left:8px; }
.inputAffix.right{ right:8px; }
.iconBtn{
  cursor:pointer;
  color: var(--muted);
}
.iconBtn:hover{ color: var(--text); }
.pwToggle[data-show="1"] .showOnHide{ display:none; }
.pwToggle[data-show="0"] .showOnShow{ display:none; }

/* Auth form labels (admin login) */
.authForm .label{
  color: var(--text);
  font-weight:900;
  font-size:13px;
  margin-bottom:8px;
}
.authForm .formField + .formField{ margin-top:12px; }

/* Auth actions (login/back buttons) */
.authActions{
  gap:12px;
  align-items:center;
  justify-content:flex-start;
}
@media (max-width: 420px){
  .authActions .btn,
  .authActions .btnAlt{ flex:1; }
}

/* Switch (toggle) */
.switch{
  position:relative;
  display:inline-block;
  width:52px;
  height:32px;
  vertical-align:middle;
}
.switch input{
  opacity:0;
  width:0;
  height:0;
}
.switch .slider{
  position:absolute;
  cursor:pointer;
  inset:0;
  border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.10);
  box-shadow: var(--shadow);
  transition: .18s ease;
}
:root[data-theme="light"] .switch .slider{
  background: rgba(255,255,255,.55);
}
.switch .slider:before{
  content:"";
  position:absolute;
  height:24px;
  width:24px;
  left:4px;
  top:50%;
  transform: translateY(-50%);
  border-radius:999px;
  background: linear-gradient(135deg, rgba(121,137,255,.90), rgba(58,255,204,.70));
  border:1px solid rgba(255,255,255,.25);
  transition: .18s ease;
}
.switch input:checked + .slider{
  border-color: rgba(57,217,138,.35);
  background: rgba(57,217,138,.14);
}
.switch input:checked + .slider:before{
  transform: translate(20px, -50%);
}