:root{--bg:#0b0f14;--bg2:#121821;--card:#161e29;--text:#e8edf2;--muted:#8ba0b3;--accent:#4fd1c5;--accent2:#7c9eff;--ok:#3ddc84;--warn:#f5b942;--err:#ff5c5c;--border:#22303f;}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.5}
a{color:var(--accent2);text-decoration:none}
a:hover{text-decoration:underline}
header.nav{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid var(--border);background:var(--bg2)}
header.nav .brand{font-weight:700;color:var(--text);font-size:1.1rem}
header.nav .brand span{color:var(--accent)}
header.nav nav a{margin-left:18px;color:var(--muted)}
header.nav nav a.cta{background:var(--accent);color:#04211c;padding:8px 14px;border-radius:8px;font-weight:600}
main{max-width:1080px;margin:0 auto;padding:32px 20px 60px}
footer{text-align:center;color:var(--muted);padding:24px;border-top:1px solid var(--border);font-size:.85rem}
.hero{text-align:center;padding:40px 0 20px}
.hero h1{font-size:2.2rem;margin-bottom:8px}
.hero p{color:var(--muted);font-size:1.1rem}
.scanbox{display:flex;gap:10px;max-width:640px;margin:30px auto;flex-wrap:wrap;justify-content:center}
.scanbox input[type=url],.scanbox input[type=text]{flex:1;min-width:260px;padding:14px 16px;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--text);font-size:1rem}
button,.btn{background:var(--accent);color:#04211c;border:none;padding:14px 22px;border-radius:10px;font-weight:700;cursor:pointer;font-size:1rem}
button.secondary,.btn.secondary{background:transparent;border:1px solid var(--border);color:var(--text)}
button.danger{background:var(--err);color:#2a0000}
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:20px;margin-bottom:18px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin:20px 0}
.stat{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;text-align:center}
.stat .n{font-size:1.8rem;font-weight:700}
.stat.ok .n{color:var(--ok)}.stat.err .n{color:var(--err)}.stat.warn .n{color:var(--warn)}
table{width:100%;border-collapse:collapse;margin-top:10px}
th,td{padding:10px 8px;border-bottom:1px solid var(--border);text-align:left;font-size:.9rem}
th{color:var(--muted);font-weight:600;cursor:pointer}
tr:hover{background:#1a2330}
.badge{padding:3px 8px;border-radius:6px;font-size:.75rem;font-weight:700}
.badge.ok{background:#0f3d2c;color:var(--ok)}
.badge.redirect{background:#3d370f;color:var(--warn)}
.badge.client_error{background:#3d1616;color:var(--err)}
.badge.server_error{background:#3d1616;color:var(--err)}
.badge.timeout,.badge.dns_fail,.badge.conn_error{background:#3d1616;color:var(--err)}
.badge.unverified,.badge.blocked{background:#22303f;color:var(--muted)}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.tabs button{background:var(--card);color:var(--muted);border:1px solid var(--border);padding:8px 14px;font-weight:600}
.tabs button.active{background:var(--accent);color:#04211c}
form.inline{display:inline}
.banner{background:#3d370f;color:var(--warn);padding:10px 16px;text-align:center;font-weight:600}
.progress-bar{height:10px;background:var(--border);border-radius:6px;overflow:hidden;margin:16px 0}
.progress-bar > div{height:100%;background:var(--accent);transition:width .3s}
input,select{background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:8px}
label{display:block;margin:10px 0 4px;color:var(--muted);font-size:.9rem}
.error{color:var(--err);margin:10px 0}
.msg{color:var(--ok);margin:10px 0}
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:24px}
.plan{text-align:center}
.plan h3{color:var(--accent)}
.plan .price{font-size:2rem;font-weight:700;margin:10px 0}
[dir=auto]{unicode-bidi:plaintext}

/* Live scan progress: step list so the wait reads as "here's what's happening now"
   instead of a bare spinner -- see templates/scan_progress.html */
.lc-steps{list-style:none;margin:0;padding:0}
.lc-steps li{display:flex;align-items:center;gap:10px;padding:9px 0;color:var(--muted);
  border-bottom:1px solid var(--border)}
.lc-steps li:last-child{border-bottom:none}
.lc-steps .lc-step-dot{width:10px;height:10px;border-radius:50%;background:var(--border);
  flex:0 0 auto;transition:background .2s}
.lc-steps li.done .lc-step-dot{background:var(--ok)}
.lc-steps li.active .lc-step-dot{background:var(--accent);
  box-shadow:0 0 0 4px rgba(79,209,197,.18);animation:lc-pulse 1.2s ease-in-out infinite}
.lc-steps li.done .lc-step-label{color:var(--text)}
.lc-steps li.active .lc-step-label{color:var(--text);font-weight:700}
.lc-steps .lc-step-detail{margin-left:auto;color:var(--muted);font-size:.85rem;text-align:right}
@keyframes lc-pulse{0%,100%{box-shadow:0 0 0 4px rgba(79,209,197,.18)}50%{box-shadow:0 0 0 8px rgba(79,209,197,.06)}}
.lc-current-url{color:var(--muted);font-size:.85rem;margin:10px 0 0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lc-live-stats{display:flex;gap:14px;margin:16px 0}
.lc-live-stats .stat{flex:1}