/* NiteOwl — galactic purple, sober, no third-party fonts (every font request
   would leak a visitor's IP to a font host; see SCP-004). */
:root{
  --void:#0A0613; --void-2:#0E0A1C; --panel:#150E2B; --panel-2:#1B1238;
  --line:#2C2150; --line-soft:#221A3E;
  --violet:#A57BFF; --indigo:#6C4DFF; --magenta:#E26DFF;
  --text:#ECE7FA; --muted:#8E80B8; --muted-2:#6F6496;
  --ok:#7BE0C0; --warn:#F2C66D; --bad:#FF6B8B;
  --r:14px;
  --f-display:"Avenir Next","Segoe UI Variable Display","SF Pro Display","Helvetica Neue",system-ui,sans-serif;
  --f-ui:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-mono:ui-monospace,"SF Mono","Cascadia Mono","JetBrains Mono",Menlo,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  background:
    radial-gradient(1200px 700px at 82% 8%, rgba(108,77,255,.10), transparent 60%),
    radial-gradient(900px 600px at 12% 90%, rgba(226,109,255,.06), transparent 55%),
    linear-gradient(180deg,var(--void-2),var(--void));
  background-color:var(--void);
  color:var(--text);font:15px/1.5 var(--f-ui);-webkit-font-smoothing:antialiased;
}
a{color:var(--violet)}
:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none !important}

/* ---------- top bar ---------- */
.topbar{display:flex;align-items:center;gap:20px;padding:14px 28px;border-bottom:1px solid var(--line-soft);
  position:sticky;top:0;z-index:20;background:rgba(10,6,19,.85);backdrop-filter:blur(10px)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--text)}
.brand svg{width:28px;height:28px}
.brand .word{font:600 15px/1 var(--f-display);letter-spacing:.32em}
.brand .word b{color:var(--violet);font-weight:600}
.nav{display:flex;gap:6px}
.nav a{font:500 13px/1 var(--f-ui);color:var(--muted);text-decoration:none;padding:9px 15px;border-radius:10px;border:1px solid transparent}
.nav a:hover{color:var(--text);background:rgba(165,123,255,.07)}
.nav a[aria-current="page"]{color:var(--text);background:rgba(108,77,255,.14);border-color:rgba(165,123,255,.32)}
.spacer{flex:1}

/* ---------- site check strip (signature element #2) ---------- */
.sitecheck{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:9px 28px;
  font:12px/1.4 var(--f-mono);color:var(--muted);border-bottom:1px solid var(--line-soft);background:rgba(21,14,43,.55)}
.sitecheck .dot{width:8px;height:8px;border-radius:50%;background:var(--muted-2);flex:0 0 auto}
.sitecheck[data-state="ok"] .dot{background:var(--ok);box-shadow:0 0 9px var(--ok)}
.sitecheck[data-state="warn"] .dot{background:var(--warn);box-shadow:0 0 9px var(--warn)}
.sitecheck[data-state="bad"]{background:rgba(255,107,139,.12);color:var(--text)}
.sitecheck[data-state="bad"] .dot{background:var(--bad);box-shadow:0 0 9px var(--bad)}
.sitecheck .fp{color:var(--text);letter-spacing:.02em}
.sitecheck .fp span{color:var(--violet)}
.sitecheck a{color:var(--muted);margin-left:auto}

/* ---------- layout ---------- */
.stage{max-width:1180px;margin:0 auto;padding:34px 28px 26px;display:grid;grid-template-columns:1fr 360px;gap:26px;align-items:start}
.stage.single{grid-template-columns:minmax(0,760px);justify-content:center}
.eyebrow{font:500 11px/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--muted-2);margin:0 0 14px}
h1.headline{font:500 26px/1.2 var(--f-display);letter-spacing:-.01em;margin:0 0 6px}
.sub{color:var(--muted);margin:0 0 22px;font-size:14px;max-width:52ch}
.field-label{display:block;font:500 12px/1 var(--f-ui);color:var(--muted);letter-spacing:.04em;margin:0 0 8px}
textarea,input.txt{width:100%;background:var(--panel);border:1px solid var(--line);color:var(--text);outline:none}
textarea{min-height:280px;resize:vertical;border-radius:var(--r);font:15px/1.65 var(--f-ui);padding:18px}
input.txt{border-radius:11px;padding:12px 14px;font:14px var(--f-ui)}
textarea::placeholder,input.txt::placeholder{color:var(--muted-2)}
textarea:focus,input.txt:focus{border-color:var(--violet);box-shadow:0 0 0 3px rgba(165,123,255,.14)}
.meta{font:12px var(--f-mono);color:var(--muted-2);margin-top:8px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.meta .over{color:var(--bad)}
.row{display:flex;gap:12px;align-items:center;margin-top:16px;flex-wrap:wrap}

.btn{font:600 14px/1 var(--f-ui);border-radius:11px;padding:14px 22px;cursor:pointer;border:1px solid var(--line);
  background:transparent;color:var(--text)}
.btn:hover{border-color:var(--violet)}
.btn-primary{color:#15082b;background:linear-gradient(135deg,var(--violet),var(--indigo));border:none;
  box-shadow:0 6px 22px -8px rgba(108,77,255,.8)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-danger{color:var(--bad);border-color:rgba(255,107,139,.4)}
.btn-danger:hover{border-color:var(--bad)}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none}
.btn-sm{padding:7px 12px;font-size:12px;font-weight:500;border-radius:8px}

.notice{border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:13px;color:var(--muted);margin-top:14px}
.notice.warn{border-color:rgba(242,198,109,.4);color:var(--warn)}
.notice.bad{border-color:rgba(255,107,139,.45);color:var(--bad)}
.notice.ok{border-color:rgba(123,224,192,.35);color:var(--ok)}

/* ---------- result card ---------- */
.card{margin-top:20px;border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;
  background:linear-gradient(180deg,rgba(108,77,255,.07),rgba(108,77,255,0))}
.card-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.card-top .lab{font:500 11px/1 var(--f-mono);letter-spacing:.18em;color:var(--violet);text-transform:uppercase}
.linkbox{font:13px/1.55 var(--f-mono);word-break:break-all;background:rgba(10,6,19,.55);border:1px solid var(--line-soft);border-radius:9px;padding:12px 13px}
.linkbox .frag{color:var(--magenta)}
.words{font:600 15px/1.4 var(--f-mono);color:var(--text);letter-spacing:.03em}
.small{font-size:12px;color:var(--muted-2);margin:10px 2px 0}

/* ---------- config panel ---------- */
.config{background:linear-gradient(180deg,var(--panel),var(--void-2));border:1px solid var(--line);border-radius:18px;padding:22px 22px 24px;position:sticky;top:120px}
.config h2{font:500 12px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 18px}
.divider{height:1px;background:var(--line-soft);margin:20px 0}

.dial-wrap{display:flex;flex-direction:column;align-items:center}
.dial-wrap.off{opacity:.35;pointer-events:none}
.dial{--glowc:#E26DFF;width:230px;height:230px;position:relative;touch-action:none;cursor:grab;user-select:none;outline:none;border-radius:50%}
.dial:active{cursor:grabbing}
.dial:focus-visible{outline:2px solid var(--violet);outline-offset:4px}
.dial svg{display:block;overflow:visible;width:230px;height:230px}
.dial .glow-stop{stop-color:var(--glowc)}
.dial .needle-line{stroke:var(--glowc)}
.dial .needle-hub{fill:var(--glowc)}
.dial .tick{stroke:var(--muted-2);stroke-width:2;stroke-linecap:round}
.dial .tick.on{stroke:var(--glowc);stroke-width:3}
.dial .tlabel{fill:var(--muted);font:10px var(--f-mono);cursor:pointer}
.dial .tlabel.on{fill:var(--text)}
.needle{transform-origin:110px 110px;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.dial-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;text-align:center}
.dial-center .mode{font:600 21px/1.05 var(--f-display)}
.dial-center .conseq{font-size:11px;color:var(--muted);margin-top:7px;max-width:120px}
.hint{font-size:11px;color:var(--muted-2);margin-top:10px}

.ctl-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:11px}
.ctl-head .lab{font:500 13px var(--f-ui)}
.ctl-head .val{font:500 13px var(--f-mono);color:var(--violet)}
.slider-block.locked{opacity:.4}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:4px;outline-offset:6px;
  background:linear-gradient(90deg,var(--violet) var(--fill,0%),var(--line) var(--fill,0%));cursor:pointer}
input[type=range]:disabled{cursor:not-allowed}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--text);border:3px solid var(--indigo);box-shadow:0 0 12px rgba(165,123,255,.6)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--text);border:3px solid var(--indigo)}
.lockmsg{font-size:11px;color:var(--muted-2);margin:8px 0 0}

.toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:11px 4px;cursor:pointer;
  border-radius:8px;background:none;border:none;color:inherit;text-align:left;font:inherit}
.toggle:hover{background:rgba(165,123,255,.05)}
.toggle .t-name{display:block;font:500 13.5px var(--f-ui)}
.toggle .t-desc{display:block;font-size:11.5px;color:var(--muted-2);margin-top:2px}
.switch{position:relative;width:42px;height:24px;flex:0 0 auto;border-radius:999px;background:var(--line);transition:background .2s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--muted);transition:transform .2s}
.toggle[aria-checked="true"] .switch{background:linear-gradient(135deg,var(--violet),var(--indigo))}
.toggle[aria-checked="true"] .switch::after{transform:translateX(18px);background:#fff}
.passfield{margin-top:10px}

/* ---------- reader ---------- */
.reader{white-space:pre-wrap;word-break:break-word;font:15px/1.7 var(--f-ui);background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:20px;margin:0;min-height:120px;transition:filter .15s}
body.veiled .reader{filter:blur(14px);user-select:none}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font:13px var(--f-mono);color:var(--muted)}
.kv b{color:var(--text);font-weight:500;word-break:break-all}

/* ---------- verify page ---------- */
table.files{width:100%;border-collapse:collapse;font:12px var(--f-mono);margin-top:10px}
table.files td,table.files th{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line-soft);word-break:break-all}
table.files th{color:var(--muted);font-weight:500}
td.ok{color:var(--ok)} td.bad{color:var(--bad)}
pre.canary{white-space:pre-wrap;font:13px/1.6 var(--f-mono);color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px}
.prose{color:var(--muted);font-size:14px;max-width:68ch}
.prose h2{color:var(--text);font:500 18px var(--f-display);margin:30px 0 8px}
.prose code{font:13px var(--f-mono);color:var(--text);background:var(--panel);padding:2px 6px;border-radius:6px}
.prose pre{font:12.5px/1.6 var(--f-mono);color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px;overflow-x:auto}

.trace{max-width:1180px;margin:6px auto 40px;padding:14px 28px 0;border-top:1px solid var(--line-soft);display:flex;gap:22px;flex-wrap:wrap;font:12px var(--f-mono);color:var(--muted-2)}
.trace b{color:var(--muted);font-weight:500}

@media (max-width:920px){
  .stage{grid-template-columns:1fr;padding:22px 16px}
  .config{position:static}
  .topbar{padding:12px 16px;gap:12px}
  .sitecheck{padding:9px 16px}
  .trace{padding:14px 16px 0}
  .brand .word{letter-spacing:.16em;font-size:13px}
  .brand svg{width:24px;height:24px}
  .nav{gap:2px}
  .nav a{padding:8px 9px}
  .topbar .spacer{display:none}
}
@media (max-width:360px){.brand .word{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}