:root {
  --bg: #060a12;
  --side: #090e18;
  --panel: #0d1424;
  --panel2: #111a2d;
  --line: #192441;
  --text: #e7edf8;
  --muted: #8293b4;
  --faint: #5b6690;
  --green: #2fe6a6;
  --green2: #10b981;
  --cyan: #22d3ee;
  --blue: #3b82f6;
  --red: #ef4444;
  --amber: #f59e0b;
  --font: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(1200px 700px at 78% -5%, #0c1a2e 0%, transparent 55%), var(--bg);
  color: var(--text); font: 14.5px/1.55 var(--font); -webkit-font-smoothing: antialiased;
}
.boot { display: grid; place-items: center; min-height: 100vh; color: var(--muted); }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
a { color: var(--green); text-decoration: none; }

/* ============ app shell ============ */
.app { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }

.side {
  background: var(--side); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 18px 14px; position: sticky; top: 0; height: 100vh;
}
.logo { display: flex; align-items: center; gap: 11px; padding: 6px 8px 22px; }
.logo img { width: 34px; height: 36px; }
.logo .wm { line-height: 1; }
.logo .wm b { font-size: 18px; letter-spacing: .5px; display: block; }
.logo .wm span { font-size: 10px; letter-spacing: 4px; color: var(--muted); }
.nav { display: flex; flex-direction: column; gap: 4px; }
.nav a {
  display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 11px;
  color: var(--muted); font-weight: 600; font-size: 14px;
}
.nav a .ic { width: 18px; height: 18px; display: inline-grid; place-items: center; opacity: .9; }
.nav a:hover { color: var(--text); background: #0e1728; }
.nav a.on { color: #04140e; background: linear-gradient(90deg, var(--green), var(--green2)); }
.nav a.on .ic { opacity: 1; }
.side .foot { margin-top: auto; display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; padding: 12px 8px 2px; border-top: 1px solid var(--line); }
.side .foot img { width: 22px; height: 22px; opacity: .8; }

/* ============ topbar ============ */
.topbar { display: flex; align-items: center; gap: 14px; padding: 18px 28px; }
.topbar .crumbs { color: var(--muted); font-size: 13px; }
.topbar .crumbs b { color: var(--text); }
.topbar .sp { flex: 1; }
.iconbtn { position: relative; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: var(--muted); border: 1px solid var(--line); }
.iconbtn:hover { color: var(--text); border-color: var(--green2); }
.iconbtn .badge { position: absolute; top: -5px; right: -5px; background: var(--red); color: #fff; font-size: 10px; font-weight: 800; min-width: 17px; height: 17px; line-height: 17px; border-radius: 999px; padding: 0 4px; }
.user { display: flex; align-items: center; gap: 9px; padding: 5px 12px 5px 6px; border: 1px solid var(--line); border-radius: 12px; }
.user .av { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, var(--blue), #1e3a8a); display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.user b { font-size: 13.5px; }

.content { padding: 4px 28px 60px; }

/* ============ stat cards ============ */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 22px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px; display: flex; gap: 14px; align-items: flex-start; }
.stat .si { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 19px; flex: none; }
.stat .si.blue { background: #0e2036; color: #5aa9ff; }
.stat .si.green { background: #0c2b22; color: var(--green); }
.stat .si.red { background: #2b1113; color: #ff8a8a; }
.stat .si.violet { background: #1a1736; color: #a78bfa; }
.stat .l { color: var(--muted); font-size: 13px; }
.stat .n { font-size: 28px; font-weight: 800; line-height: 1.1; margin: 2px 0; }
.stat .sub { font-size: 12px; color: var(--muted); }
.stat .sub.ok { color: var(--green); } .stat .sub.bad { color: #ff8a8a; }

/* ============ hero: live protection ============ */
.hero {
  background: linear-gradient(120deg, var(--panel) 0%, #0b1526 60%, #0a1a2a 100%);
  border: 1px solid var(--line); border-radius: 20px; padding: 26px 28px; margin-bottom: 22px;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 20px; align-items: center; overflow: hidden; position: relative;
}
.hero .live { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--green); font-weight: 600; }
.hero .live .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); animation: beep 1.4s infinite; }
.hero.exposed .live { color: #ff8a8a; } .hero.exposed .live .dot { background: var(--red); box-shadow: 0 0 10px var(--red); }
.hero h1 { font-size: 28px; margin: 12px 0 8px; letter-spacing: -.3px; }
.hero p.lead { color: var(--muted); max-width: 42ch; margin: 0 0 18px; }
.hero .scanbar { display: flex; gap: 8px; }
.hero .scanbar .in { flex: 1; display: flex; align-items: center; gap: 9px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; }
.hero .scanbar input { flex: 1; background: none; border: 0; color: var(--text); padding: 12px 0; outline: none; font: inherit; }
.hero .scanbar .go { background: linear-gradient(90deg, var(--green), var(--green2)); color: #04140e; font-weight: 700; border-radius: 12px; padding: 0 18px; }
.hero .checks { display: none; }

/* big beeping padlock */
.herolock { position: relative; display: grid; place-items: center; min-height: 240px; }
.herolock .rings, .herolock .rings::before, .herolock .rings::after {
  position: absolute; border-radius: 50%; border: 1.5px solid var(--lock, var(--green));
}
.herolock .rings { width: 150px; height: 150px; opacity: .25; }
.herolock .rings::before { content: ""; inset: -28px; opacity: .5; }
.herolock .rings::after { content: ""; inset: -56px; opacity: .22; }
.herolock .halo { position: absolute; width: 230px; height: 230px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--lock) 40%, transparent) 0%, transparent 62%); animation: beep 1.5s infinite; }
.biglock { width: 168px; height: 189px; position: relative; z-index: 2; }
.biglock .glow { fill: color-mix(in srgb, var(--lock) 10%, transparent); }
.biglock .shield { fill: color-mix(in srgb, var(--lock) 9%, #070d18); stroke: color-mix(in srgb, var(--lock) 75%, transparent); stroke-width: 2.5; transition: fill .5s, stroke .5s; }
.biglock .shackle { fill: none; stroke: var(--lock); stroke-width: 12; stroke-linecap: round; transform-origin: 38px 58px; transition: transform .5s cubic-bezier(.3,1.4,.5,1), stroke .4s; }
.biglock .body { fill: color-mix(in srgb, var(--lock) 20%, #081018); stroke: var(--lock); stroke-width: 2.6; transition: fill .4s, stroke .4s; }
.biglock .keyhole, .biglock .stem { fill: var(--lock); }
@keyframes beep { 0%,100% { opacity: .9; transform: scale(1); } 50% { opacity: .35; transform: scale(1.06); } }

.herolock.secure { --lock: var(--green); }
.herolock.exposed { --lock: var(--red); }
.herolock.exposed .shackle { transform: rotate(30deg) translate(-2px,-6px); }
.herolock.scanning { --lock: var(--red); }
.herolock.scanning .shackle { transform: rotate(30deg) translate(-2px,-6px); }
.herolock.securing { --lock: var(--amber); }
.herolock.securing .shackle { transform: rotate(18deg) translate(-1px,-4px); }
.herolock.new, .herolock.unverified, .herolock.ready, .herolock.unreached { --lock: #64748b; }
.heroL { min-width: 0; }
.herolock.at_risk { --lock: var(--amber); }
.herolock.watching { --lock: var(--amber); }
.herolock.unreached .shackle, .herolock.new .shackle, .herolock.unverified .shackle, .herolock.ready .shackle, .herolock.at_risk .shackle { transform: rotate(30deg) translate(-2px,-6px); }
.herolock.unreached .flow, .herolock.unverified .flow, .herolock.ready .flow, .herolock.at_risk .flow, .herolock.exposed .flow { display: none; }
.herolock.new .halo, .herolock.unverified .halo, .herolock.ready .halo { animation: none; opacity: .4; }
.herolock .lockname { position: absolute; bottom: -14px; width: 100%; text-align: center; font-size: 12.5px; color: var(--muted); z-index: 3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.hero .statusword { position: absolute; bottom: 10px; width: 100%; text-align: center; font-weight: 700; font-size: 14px; color: var(--lock, var(--green)); z-index: 3; }

/* checklist that appears while scanning */
.hero.scanning .checks { display: flex; flex-direction: column; gap: 9px; margin-top: 6px; }
.chk { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 13.5px; }
.chk .d { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; font-size: 11px; }
.chk.done { color: var(--text); } .chk.done .d { background: var(--green); border-color: var(--green); color: #04140e; }

/* ============ bottom panels ============ */
.cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.pnl { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.pnl .ph { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.pnl .ph h3 { font-size: 15px; margin: 0; display: flex; align-items: center; gap: 9px; }
.pnl .ph .all { font-size: 12.5px; color: var(--green); }
.row { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-top: 1px solid var(--line); }
.row:first-of-type { border-top: 0; }
.row .ri { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--panel2); }
.row .rt { flex: 1; min-width: 0; }
.row .rt .t { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .rt .s { font-size: 12px; color: var(--muted); }
.row .chev { color: var(--muted); }
.tag { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.tag.secure { background: #0c2b22; color: var(--green); }
.tag.exposed { background: #2b1113; color: #ff8a8a; }
.tag.at_risk { background: #2b2410; color: var(--amber); }
.tag.new { background: #1a2338; color: var(--muted); }
.dotline { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.empty { color: var(--muted); text-align: center; padding: 22px 0; font-size: 13.5px; }

/* ============ assets view (padlock cards) ============ */
.add { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 16px; margin-bottom: 20px; display: grid; gap: 10px; grid-template-columns: 1.1fr .9fr 1.6fr auto; align-items: end; }
.add .field { display: flex; flex-direction: column; gap: 5px; }
.add label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.add input, .add select { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; color: var(--text); font: inherit; outline: none; }
.add input:focus, .add select:focus { border-color: var(--green2); }
.add .auth { grid-column: 1/-1; display: flex; gap: 8px; color: var(--muted); font-size: 13px; align-items: center; }
.add .auth input { width: auto; }
.btn { background: linear-gradient(90deg, var(--green), var(--green2)); color: #04140e; font-weight: 700; border-radius: 11px; padding: 11px 18px; white-space: nowrap; }
.btn:hover { filter: brightness(1.07); } .btn:disabled { opacity: .5; cursor: not-allowed; }
.err { color: #ff8a8a; font-size: 13px; min-height: 15px; grid-column: 1/-1; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 16px; }
.card { background: linear-gradient(180deg, var(--panel), #0a1120); border: 1px solid var(--line); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; align-items: center; gap: 9px; position: relative; overflow: hidden; }
.card .kind { position: absolute; top: 12px; left: 14px; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px; }
.card .mon { position: absolute; top: 12px; right: 36px; border: 1px solid var(--line); color: var(--muted); font-size: 10px; border-radius: 6px; padding: 2px 7px; }
.card .mon.on { color: var(--green); border-color: #164e3b; }
.card .del { position: absolute; top: 10px; right: 12px; color: var(--muted); font-size: 15px; opacity: 0; transition: opacity .2s; }
.card:hover .del { opacity: 1; } .card .del:hover { color: var(--red); }
.card .name { font-weight: 700; margin-top: 8px; text-align: center; }
.card .target { font: 11.5px var(--mono); color: var(--muted); word-break: break-all; text-align: center; }
.card .state { font-size: 13px; font-weight: 700; }
.card .scanned { font-size: 11px; color: var(--muted); margin-top: -2px; }
.card .counts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.pill { font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 700; }
.pill.c { background: #3a1212; color: #ff9a9a; } .pill.h { background: #3a2412; color: #ffbf8a; }
.pill.m { background: #3a3312; color: #ffe08a; } .pill.l { background: #122a3a; color: #8ac8ff; }
.card .actions { display: flex; gap: 8px; margin-top: 4px; }
.card .actions button { background: var(--panel2); border: 1px solid var(--line); color: var(--text); border-radius: 9px; padding: 7px 12px; font-size: 13px; }
.card .actions button:hover { border-color: var(--green2); }
.card.s-secure { border-color: #124535; box-shadow: 0 0 40px -18px var(--green); --lock: var(--green); }
.card.s-exposed { border-color: #4a1a1a; box-shadow: 0 0 44px -16px var(--red); --lock: var(--red); }
.card.s-at_risk { border-color: #45380f; --lock: var(--amber); }
.card.s-new { --lock: #64748b; } .card.s-scanning { --lock: var(--cyan); }
.card.s-secure .state { color: var(--green); } .card.s-exposed .state { color: var(--red); }
.card.s-at_risk .state { color: var(--amber); } .card.s-new .state, .card.s-scanning .state { color: var(--muted); }
.padlock { width: 96px; height: 116px; margin: 4px 0; }
.padlock .shackle { fill: none; stroke: var(--lock); stroke-width: 12; stroke-linecap: round; transform-origin: 38px 58px; transition: transform .5s cubic-bezier(.3,1.4,.5,1), stroke .4s; }
.padlock .body { fill: color-mix(in srgb, var(--lock) 20%, #0a1120); stroke: var(--lock); stroke-width: 2.6; }
.padlock .keyhole, .padlock .stem, .padlock .glow { fill: var(--lock); }
.padlock .glow { opacity: 0; }
.card.s-new .shackle, .card.s-scanning .shackle, .card.s-exposed .shackle { transform: rotate(30deg) translate(-2px,-6px); }
.card.s-secure .glow { opacity: 1; animation: beep 1.8s infinite; }
.card.s-exposed .padlock { animation: shake .5s 1; }
.card.s-scanning .padlock { animation: beep 1s infinite; }
@keyframes shake { 10%,90% { transform: translateX(-2px); } 30%,70% { transform: translateX(4px); } 50% { transform: translateX(-4px); } }
.card.scan-sweep::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(47,230,166,.16), transparent); transform: translateX(-100%); animation: sweep 1.1s linear infinite; }
@keyframes sweep { to { transform: translateX(100%); } }

/* ============ authorization modal ============ */
.authbox {
  position: fixed; z-index: 50; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(460px, 94vw); background: #0b1322; border: 1px solid var(--line); border-radius: 18px;
  padding: 22px 24px; box-shadow: 0 30px 80px -20px #000; animation: popIn .22s ease;
}
@keyframes popIn { from { transform: translate(-50%, -46%) scale(.97); opacity: .4; } }
.authbox .ah { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 700; color: var(--amber); margin-bottom: 12px; }
.authbox p { margin: 8px 0; color: var(--muted); font-size: 13.5px; }
.authbox .tgt { font: 12.5px var(--mono); color: var(--cyan); background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; word-break: break-all; }
.authbox .warn { color: #ffba8a; font-size: 12.5px; }
.authbox .chk2 { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--text); background: #0e1728; border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; margin: 10px 0 14px; cursor: pointer; }
.authbox .chk2 input { margin-top: 2px; width: 16px; height: 16px; flex: none; accent-color: var(--green); }
.authbox .arow { display: flex; gap: 10px; justify-content: flex-end; }
.authbox .ghost { background: var(--panel2); border: 1px solid var(--line); color: var(--text); border-radius: 11px; padding: 11px 18px; }
.authbox .ghost:hover { border-color: var(--muted); }
.authbox .fine { color: var(--faint); font-size: 11px; margin-top: 10px; text-align: center; }
.authbox .ah.danger { color: var(--red); }
.authbox .al { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin: 10px 0 5px; }
.authbox .aref { width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; color: var(--text); font: inherit; outline: none; }
.authbox .aref:focus { border-color: var(--green2); }

/* verify drawer + card ownership badges */
.vmethod { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; margin: 12px 0; }
.vmethod .vt { font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.vmethod p { margin: 0 0 8px; color: var(--muted); font-size: 13px; }
.vstatus { margin-top: 12px; font-size: 13px; color: var(--muted); }
.vstatus.ok { color: var(--green); } .vstatus.bad { color: #ff8a8a; }
.card .unver { font-size: 11.5px; color: var(--amber); font-weight: 600; }
.card .ver { font-size: 11.5px; color: var(--green); font-weight: 600; }

/* ============ drawer ============ */
.drawer-bg { position: fixed; inset: 0; background: rgba(2,5,12,.62); backdrop-filter: blur(3px); z-index: 40; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px,100%); background: #0a1120; border-left: 1px solid var(--line); z-index: 41; overflow-y: auto; padding: 22px; animation: slide .25s ease; }
@keyframes slide { from { transform: translateX(26px); opacity: .4; } }
.drawer h2 { margin: 0 0 2px; } .drawer .sub { color: var(--muted); font: 12px var(--mono); word-break: break-all; margin-bottom: 14px; }
.x { position: absolute; top: 16px; right: 18px; color: var(--muted); font-size: 22px; }
.finding { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 13px; margin: 10px 0; }
.finding .fh { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sev { color: #fff; font-size: 10px; font-weight: 800; text-transform: uppercase; padding: 2px 8px; border-radius: 5px; }
.sev.critical { background: #b91c1c; } .sev.high { background: #c2410c; } .sev.medium { background: #b45309; } .sev.low { background: #2563eb; } .sev.info { background: #475569; }
.finding .ft { font-weight: 700; } .finding .loc { font: 11px var(--mono); color: #7fd8ff; margin: 6px 0 0; word-break: break-all; }
.finding pre { background: #05080f; border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px; font: 11px var(--mono); color: #c7d2fe; overflow-x: auto; margin: 7px 0; }
.finding .detail { font-size: 13.5px; margin: 6px 0 4px; } .finding .fix { color: var(--muted); font-size: 13px; } .finding .fix b { color: var(--green); }
.clean-note { color: var(--green); background: var(--panel); border: 1px solid #124535; border-radius: 12px; padding: 16px; }
.alert { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--muted); border-radius: 10px; padding: 12px; margin: 10px 0; }
.alert.worsened, .alert.new-issues { border-left-color: var(--red); } .alert.recovered { border-left-color: var(--green); }
.alert .awhen { font-size: 11px; color: var(--muted); margin-top: 4px; }

/* ============ settings ============ */
.set { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 20px; max-width: 640px; }
.set .kv { display: flex; justify-content: space-between; padding: 11px 0; border-top: 1px solid var(--line); }
.set .kv:first-child { border-top: 0; } .set .kv .k { color: var(--muted); } .set .kv code { font: 12px var(--mono); color: var(--cyan); }

/* ============ login ============ */
.login { min-height: 100vh; display: grid; place-items: center; }
.login .box { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 30px; width: 330px; text-align: center; }
.login img { width: 54px; height: 56px; }
.login h1 { font-size: 21px; margin: 12px 0 4px; } .login p { color: var(--muted); font-size: 13px; margin: 0 0 18px; }
.login input { width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 11px; padding: 12px; color: var(--text); margin-bottom: 10px; }
.login .btn { width: 100%; }

/* ============ favicon flowing through the padlock ============ */
.herolock .flow {
  position: absolute; top: calc(50% + 6px); left: 50%; width: 38px; height: 38px;
  margin: -19px 0 0 -19px; z-index: 1; display: grid; place-items: center; pointer-events: none;
  animation: flowThrough 3.6s linear infinite;
}
.herolock .flow .fav, .herolock .flow .glyph {
  position: absolute; width: 34px; height: 34px; border-radius: 9px;
  filter: drop-shadow(0 0 7px var(--lock));
}
.herolock .flow .glyph { display: grid; place-items: center; color: var(--lock); background: #081018; border: 1px solid color-mix(in srgb, var(--lock) 50%, transparent); }
.herolock .flow .fav { background: #081018; object-fit: cover; }
@keyframes flowThrough {
  0%   { transform: translateX(-108px) scale(.72); opacity: 0; }
  14%  { opacity: 1; }
  44%  { transform: translateX(-4px) scale(1); opacity: 1; }
  50%  { transform: translateX(0) scale(.5); opacity: .12; }
  56%  { transform: translateX(4px) scale(1); opacity: 1; }
  86%  { opacity: 1; }
  100% { transform: translateX(108px) scale(.72); opacity: 0; }
}
.herolock.scanning .flow { animation-duration: 1.9s; }
.herolock.securing .flow { animation-duration: 2.6s; }
.herolock.secure   .flow, .herolock.watching .flow { animation-duration: 4.4s; }
.herolock.new      .flow { display: none; }

/* ============ live orbit around the secured padlock ============ */
.herolock .orbit {
  position: absolute; width: 320px; height: 320px; left: 50%; top: 50%; margin: -160px 0 0 -160px;
  z-index: 1; opacity: 0; transform: scale(.82); transition: opacity .6s ease, transform .6s ease;
  pointer-events: none; animation: orbSpin 26s linear infinite;
}
.herolock.secure .orbit, .herolock.watching .orbit { opacity: 1; transform: scale(1); }
.herolock .orbit .wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.herolock .orbit .track { fill: none; stroke: color-mix(in srgb, var(--lock) 28%, transparent); stroke-width: 1; stroke-dasharray: 2 7; }
.herolock .orbit .wire { stroke: var(--lock); stroke-width: 1.4; stroke-dasharray: 5 8; opacity: .55; animation: wireFlow 1.1s linear infinite; }
@keyframes wireFlow { to { stroke-dashoffset: -26; } }
@keyframes orbSpin { to { transform: rotate(360deg); } }
@keyframes orbSpinRev { to { transform: rotate(-360deg); } }
.herolock .orbit .node { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; }
.herolock .orbit .nT { transform: translate(-50%, calc(-50% - 140px)); }
.herolock .orbit .nR { transform: translate(calc(-50% + 140px), -50%); }
.herolock .orbit .nB { transform: translate(-50%, calc(-50% + 140px)); }
.herolock .orbit .nL { transform: translate(calc(-50% - 140px), -50%); }
.herolock .orbit .lbl {
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: 13px;
  background: #06140f; border: 1px solid color-mix(in srgb, var(--lock) 55%, transparent); color: var(--lock);
  font: 800 11px var(--mono); letter-spacing: .5px; box-shadow: 0 0 16px -5px var(--lock);
  animation: orbSpinRev 26s linear infinite;
}

/* scan line sweeping the lock while probing */
.herolock .scanline { position: absolute; width: 150px; height: 2px; z-index: 3; left: 50%; margin-left: -75px;
  background: linear-gradient(90deg, transparent, var(--lock), transparent); opacity: 0; }
.herolock.scanning .scanline, .herolock.securing .scanline { opacity: .9; animation: sweepY 1.5s ease-in-out infinite; }
@keyframes sweepY { 0%,100% { transform: translateY(-58px); } 50% { transform: translateY(58px); } }

/* ============ live sequence: log stream + protection meter ============ */
.seq { margin-top: 2px; }
.meter { height: 9px; border-radius: 999px; background: #0a1322; border: 1px solid var(--line); overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--red), var(--amber) 55%, var(--green)); transition: width .5s ease; }
.mlabel { font-size: 12.5px; color: var(--muted); margin: 7px 0 12px; }
.mlabel b { color: var(--text); }
.logstream { font: 12px/1.7 var(--mono); background: #05080f; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; height: 132px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.logline { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; animation: logIn .25s forwards; }
.logline .ok { color: var(--green); } .logline .bad { color: #ff8a8a; } .logline .warn { color: var(--amber); } .logline .run { color: var(--cyan); }
.logline b { color: #cdd8f0; font-weight: 600; }
@keyframes logIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.secbtn { margin-top: 13px; background: linear-gradient(90deg, var(--red), #b91c1c); color: #fff; font-weight: 700;
  border-radius: 12px; padding: 12px 20px; box-shadow: 0 0 26px -8px var(--red); }
.secbtn:hover { filter: brightness(1.08); }
.secbtn.done { background: linear-gradient(90deg, var(--green), var(--green2)); color: #04140e; box-shadow: 0 0 26px -8px var(--green); }

/* ============ app footer ============ */
.appfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 34px; padding-top: 18px;
  border-top: 1px solid var(--line); color: var(--muted); font-size: 12.5px; }
.appfoot a { color: var(--muted); } .appfoot a:hover { color: var(--text); }
.appfoot .sp { flex: 1; }

/* ============ dynamic login ============ */
.login { position: relative; overflow: hidden; }
.login::before { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(59,130,246,.16), transparent 62%); top: -120px; filter: blur(8px); }
.login .box { position: relative; z-index: 2; width: 360px; padding: 34px 30px; }
.login .shieldwrap { position: relative; width: 112px; height: 112px; margin: 0 auto 6px; display: grid; place-items: center; }
.login .shieldwrap .ring, .login .shieldwrap .ring::before {
  position: absolute; border-radius: 50%; border: 1.5px solid var(--cyan); }
.login .shieldwrap .ring { width: 104px; height: 104px; opacity: .35; animation: beep 2s infinite; }
.login .shieldwrap .ring::before { content: ""; inset: -16px; opacity: .5; border-color: var(--blue); }
.login .shieldwrap .glow { position: absolute; width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle, rgba(34,211,238,.28), transparent 60%); animation: beep 2s infinite; }
.login img { width: 86px; height: 86px; position: relative; z-index: 2; border-radius: 16px; }
.login .pill { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--green);
  background: #0c2b22; border: 1px solid #124535; border-radius: 999px; padding: 4px 11px; margin: 4px 0 2px; }
.login .pill .d { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: beep 1.4s infinite; }
.login .foot { margin-top: 16px; display: flex; justify-content: center; gap: 14px; font-size: 12px; }
.login .foot a { color: var(--muted); } .login .foot a:hover { color: var(--text); }
.login .cap { color: var(--faint); font-size: 11.5px; margin-top: 10px; }

@media (prefers-reduced-motion: reduce) {
  .herolock .flow, .herolock .halo, .herolock .scanline, .login .shieldwrap .ring, .login .shieldwrap .glow,
  .login .pill .d, .hero .live .dot, .card.s-secure .glow, .card.s-scanning .padlock,
  .herolock .orbit, .herolock .orbit .wire, .herolock .orbit .lbl { animation: none !important; }
}

@media (max-width: 980px) {
  .app { grid-template-columns: 1fr; } .side { position: static; height: auto; flex-direction: row; align-items: center; overflow-x: auto; }
  .side .foot { display: none; } .nav { flex-direction: row; }
  .stats { grid-template-columns: 1fr 1fr; } .hero { grid-template-columns: 1fr; } .cols { grid-template-columns: 1fr; } .add { grid-template-columns: 1fr; }
}

/* ---------- admin ---------- */
.adm-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.adm-block { margin-top: 16px; }
.adm-warn { margin-top: 16px; border-color: #45380f; }
.adm-note { color: var(--muted); font-size: 12.5px; margin: -4px 0 10px; }
.adm-table { overflow-x: auto; }
.adm-table table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.adm-table th { text-align: left; color: var(--faint); font-weight: 600; padding: 6px 10px 8px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.adm-table td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.adm-table tr:last-child td { border-bottom: 0; }
.adm-table .mono { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.adm-table .sub { margin-top: 2px; word-break: break-all; }
.adm-table .sev { margin-right: 4px; white-space: nowrap; }
.adm-cols .set { max-width: none; }
.user .tag { margin-left: 8px; }
/* log in / create account */
.login .lf { display: block; text-align: left; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.login .lf input { margin-top: 5px; font-weight: 400; font-size: 14px; }
.login .hint { text-align: left; font-size: 12px; color: var(--faint); margin: -4px 0 10px; }
.login .agree { display: flex; gap: 9px; align-items: flex-start; text-align: left; font-size: 12.5px; color: var(--muted); margin: 0 0 14px; line-height: 1.45; }
.login .agree input { width: auto; margin: 2px 0 0; accent-color: var(--green); flex: none; }
.login .agree a { color: var(--green); }
.login .switch { margin-top: 16px; font-size: 13px; color: var(--muted); }
.login .switch button { background: none; border: 0; padding: 0; color: var(--green); font: inherit; font-weight: 600; cursor: pointer; }
.login .switch button:hover, .login .switch button:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.login .btn:disabled { opacity: .6; cursor: wait; }
@media (max-width: 980px) { .adm-cols { grid-template-columns: 1fr; } }

/* report downloads in the findings drawer */
.repbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 16px; }
.repbar .btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; padding: 9px 14px; }
.repbar .ghost { color: var(--muted); font-size: 12.5px; border: 1px solid var(--line); border-radius: 9px; padding: 7px 11px; text-decoration: none; }
.repbar .ghost:hover, .repbar .ghost:focus-visible { color: var(--text); border-color: var(--muted); }

/* two-step login (settings) */
.set.twostep { margin-top: 16px; }
.ts-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.ts-head h3 { margin: 0 0 4px; font-size: 15px; }
.ts-head p { margin: 0 0 14px; color: var(--muted); font-size: 13.5px; max-width: 52ch; }
.tsform { display: grid; gap: 10px; max-width: 340px; }
.tsform .lf { display: block; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.tsform input { display: block; width: 100%; margin-top: 5px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; color: var(--text); font-size: 14px; }
.tsform input[name=code] { font-family: var(--mono); letter-spacing: 3px; font-size: 16px; }
.tsform .warn { color: var(--amber); font-size: 13px; margin: 0; }
.tssetup { display: grid; grid-template-columns: 180px 1fr; gap: 22px; align-items: start; }
.qrbox { background: #fff; border-radius: 12px; padding: 8px; }
.qrbox .qr { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.steps { margin: 0 0 14px; padding-left: 18px; color: var(--muted); font-size: 13.5px; display: grid; gap: 8px; }
.key code { display: inline-block; margin-top: 6px; font: 13px var(--mono); color: var(--cyan); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; letter-spacing: 1px; word-break: break-all; }
.recovery p { color: var(--muted); font-size: 13.5px; margin: 0 0 12px; max-width: 60ch; }
.recovery p b { color: var(--text); }
.codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-bottom: 14px; max-width: 560px; }
.codes code { font: 14px var(--mono); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px; text-align: center; color: var(--text); }
.ghost-btn { background: transparent !important; color: var(--text) !important; border: 1px solid var(--line) !important; }
.danger-btn { background: var(--red) !important; color: #fff !important; }
@media (max-width: 640px) { .tssetup { grid-template-columns: 1fr; } .qrbox { max-width: 200px; } }

/* ============ scan, then protect ============ */
.hero { align-items: start; }
.hero .herolock { min-height: 360px; align-self: center; }
.hero.ready .live, .hero.new .live, .hero.unverified .live { color: var(--muted); }
.hero.ready .live .dot, .hero.new .live .dot, .hero.unverified .live .dot { background: var(--muted); box-shadow: none; animation: none; }
.hero.watching .live, .hero.at_risk .live { color: var(--amber); } .hero.watching .live .dot, .hero.at_risk .live .dot { background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.hero.scanning .live .dot { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); } .hero.scanning .live { color: var(--cyan); }
.stepper { display: flex; gap: 8px; list-style: none; padding: 0; margin: 2px 0 16px; }
.stepper li { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--faint); padding: 5px 12px 5px 6px; border: 1px solid var(--line); border-radius: 999px; }
.stepper li span { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: var(--bg); border: 1px solid var(--line); }
.stepper li.on { color: var(--text); border-color: color-mix(in srgb, var(--green) 55%, var(--line)); }
.stepper li.on span { background: var(--green); color: #04140e; border-color: var(--green); }
.stepper li.done { color: var(--green); } .stepper li.done span { background: transparent; border-color: var(--green); color: var(--green); }
.types { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 10px; }
.type { display: flex; gap: 10px; align-items: flex-start; text-align: left; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; color: var(--muted); cursor: pointer; transition: border-color .2s, background .2s; }
.type svg { flex: none; margin-top: 2px; }
.type b { display: block; color: var(--text); font-size: 13.5px; }
.type small { display: block; font-size: 11.5px; line-height: 1.35; margin-top: 2px; }
.type:hover { border-color: var(--muted); }
.type.on { border-color: var(--green); background: color-mix(in srgb, var(--green) 9%, var(--bg)); color: var(--text); }
.type.on svg { color: var(--green); }
.type:focus-visible, .vopt:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
#quickErr { margin-top: 8px; min-height: 0; }
.hero .seq { margin-top: 12px; }
.next { margin-top: 12px; display: flex; gap: 14px; align-items: center; justify-content: space-between; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.next .nt b { display: block; font-size: 14.5px; }
.next .nt span { display: block; color: var(--muted); font-size: 12.5px; margin-top: 3px; max-width: 52ch; }
.next .na { display: flex; gap: 8px; flex: none; }
.next .btn { display: inline-flex; align-items: center; gap: 7px; }
.next.protect { border-color: color-mix(in srgb, var(--green) 45%, var(--line)); box-shadow: 0 0 30px -16px var(--green); }
.next.on { border-color: color-mix(in srgb, var(--green) 30%, var(--line)); }
.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); border-radius: 11px; padding: 10px 14px; font-weight: 600; cursor: pointer; }
.ghost:hover { border-color: var(--muted); }
.cols.two { grid-template-columns: 1fr 1fr; }

/* ownership verification */
.vpick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 12px; }
.vopt { text-align: left; background: var(--panel); border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; color: var(--muted); cursor: pointer; }
.vopt b { display: block; color: var(--text); font-size: 14px; margin-bottom: 3px; }
.vopt span { font-size: 12px; }
.vopt.on { border-color: var(--green); background: color-mix(in srgb, var(--green) 8%, var(--panel)); }
.vsteps { margin: 0; padding-left: 20px; display: grid; gap: 14px; color: var(--muted); font-size: 13px; }
.vsteps li > div { margin-bottom: 7px; }
.vsteps code, .dns code { font: 12px var(--mono); color: var(--cyan); }
.vsteps .tgt { font: 12px var(--mono); color: var(--cyan); background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; word-break: break-all; display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.hint2 { font-size: 12px; color: var(--faint); margin-top: 6px; }
.copy { flex: none; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 7px; padding: 3px 9px; font-size: 11.5px; cursor: pointer; font-family: inherit; }
.btn.small, .ghost.small { display: inline-block; padding: 7px 12px; font-size: 12.5px; text-decoration: none; }
.dns { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.dns th { text-align: left; color: var(--faint); font-weight: 600; padding: 6px 10px 6px 0; width: 64px; vertical-align: top; }
.dns td { padding: 6px 0; word-break: break-all; }
.drawer .arow { margin-top: 18px; }
@media (max-width: 980px) { .cols.two { grid-template-columns: 1fr; } .next { flex-direction: column; align-items: flex-start; } }
@media (max-width: 640px) { .vpick { grid-template-columns: 1fr; } .types { grid-template-columns: 1fr; } }
@media (max-width: 980px) {
  .hero .herolock { order: -1; min-height: 330px; }
}
@media (max-width: 640px) {
  .hero { padding: 20px 16px; }
  .hero .scanbar { flex-wrap: wrap; }
  .hero .scanbar .in { flex: 1 1 100%; }
  .hero .scanbar .go { flex: 1 1 100%; padding: 12px 18px; }
  .hero .herolock { min-height: 300px; transform: scale(.86); }
  .next .na { width: 100%; } .next .na > * { flex: 1; }
}
.hero .herolock .statusword { bottom: -6px; }
.hero .herolock .lockname { bottom: -26px; }
.hero .herolock { margin-bottom: 26px; }