:root{
  --bg:#0a0e0a; --fg:#33ff66; --dim:#1d7a3a; --acc:#ffb000;
  --red:#ff3355; --panel:#0f150f; --line:#1b2a1b;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--fg);
  font:14px/1.6 "SF Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;
  padding:0 16px 60px; overflow-x:hidden;
}
.scanlines{
  position:fixed; inset:0; pointer-events:none; z-index:9999;
  background:repeating-linear-gradient(rgba(0,0,0,0) 0 2px,rgba(0,0,0,.22) 2px 4px);
  mix-blend-mode:multiply;
}
header{max-width:900px;margin:34px auto 20px;text-align:center}
.logo{
  color:var(--fg); font-size:9px; line-height:1.05; margin:0 0 12px;
  text-shadow:0 0 8px rgba(51,255,102,.55); overflow-x:auto;
}
h1{font-size:19px;margin:0 0 8px;color:var(--acc);letter-spacing:.5px}
.sub{max-width:640px;margin:0 auto;color:var(--dim)}
.sub b{color:var(--fg)}

.stats{display:flex;gap:14px;justify-content:center;margin:26px auto;max-width:900px}
.stat{
  background:var(--panel);border:1px solid var(--line);padding:14px 26px;
  text-align:center;min-width:150px;
}
.stat .num{display:block;font-size:26px;color:var(--acc);font-weight:700}
.stat .lbl{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:1px}

main{max-width:900px;margin:0 auto}
.card{
  background:var(--panel);border:1px solid var(--line);
  padding:22px 24px;margin:0 0 20px;
}
.card h2{
  font-size:15px;margin:0 0 14px;color:var(--acc);
  border-bottom:1px solid var(--line);padding-bottom:10px;
  display:flex;align-items:center;gap:10px;
}
.step{
  background:var(--acc);color:#000;width:22px;height:22px;flex:0 0 22px;
  display:grid;place-items:center;font-size:12px;font-weight:700;
}
.card h3{font-size:13px;color:var(--fg);margin:20px 0 8px}
.card p{color:var(--dim);margin:8px 0}
.card p b{color:var(--fg)}
code{color:var(--acc);background:rgba(255,176,0,.08);padding:1px 5px}
pre{
  background:#060906;border-left:2px solid var(--dim);
  padding:12px 14px;overflow-x:auto;margin:10px 0;
}
pre code{background:none;color:var(--fg);padding:0}
pre .c{color:#4a7a55}
a{color:var(--acc)}
.note{border-left:2px solid var(--acc);padding-left:12px}

/* upload */
.upload{border-color:var(--acc)}
form{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
input[type=file]{
  flex:1 1 260px;background:#060906;border:1px dashed var(--dim);
  color:var(--dim);padding:11px;cursor:pointer;font-family:inherit;font-size:13px;
}
input[type=text]{
  flex:0 1 170px;background:#060906;border:1px solid var(--line);
  color:var(--fg);padding:11px;font-family:inherit;font-size:13px;
}
input[type=text]::placeholder{color:#2f5c3a}
button{
  background:var(--acc);color:#000;border:0;padding:11px 26px;
  font-family:inherit;font-weight:700;font-size:13px;cursor:pointer;letter-spacing:1px;
}
button:hover{background:#ffc93c}
button:disabled{opacity:.5;cursor:wait}
#out{margin-top:14px}
.msg{padding:12px 14px;border-left:2px solid var(--dim);background:#060906}
.msg.ok{border-color:var(--fg)}
.msg.err{border-color:var(--red);color:var(--red)}
.msg.win{border-color:var(--acc);color:var(--acc)}

/* table */
table{width:100%;border-collapse:collapse;margin-top:12px;font-size:13px}
th{
  text-align:left;color:var(--dim);font-weight:400;font-size:11px;
  text-transform:uppercase;letter-spacing:1px;
  border-bottom:1px solid var(--line);padding:8px 8px;
}
td{padding:8px;border-bottom:1px solid #121c12;vertical-align:middle}
tr.solved td{background:rgba(51,255,102,.05)}
.flag{color:var(--fg);background:rgba(51,255,102,.1);word-break:break-all}
.missing{color:#6b5a2a;font-size:12px}
.bar{
  display:inline-block;width:64px;height:7px;background:#0a140a;
  border:1px solid var(--line);vertical-align:middle;margin-right:6px;
}
.bar span{display:block;height:100%;background:var(--acc)}

footer{max-width:900px;margin:40px auto 0;text-align:center;color:var(--dim);font-size:12px}
.tiny{font-size:11px;opacity:.6}

@media(max-width:640px){
  .logo{font-size:5px}
  .stats{flex-direction:column;align-items:center}
  .stat{width:100%}
  table{font-size:11px}
  .bar{width:38px}
}

/* auth states */
.ok-badge{
  background:var(--fg);color:#000;font-size:10px;padding:2px 8px;
  letter-spacing:1px;margin-left:auto;
}
.unlocked{border-left:2px solid var(--fg);padding-left:12px}
.locked{
  color:#6b5a2a;font-size:12px;letter-spacing:2px;
  background:repeating-linear-gradient(90deg,#1a1508 0 6px,transparent 6px 12px);
  padding:2px 6px;
}