/* ═══════════════════════════════════════════════════════════════════════════
   Netanix Forensic Flag Checker — theme
   Dark forensic lab · brand green (#9ef36b) · crafted, not templated
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#06080a; --bg2:#080b0f; --panel:#0c1014; --panel2:#0e1318;
  --line:#1b2730; --line2:#26343f;
  --green:#9ef36b; --green-d:#22c55e; --green-deep:#15803d;
  --cyan:#34e3c8; --ink:#e7f0ea; --mut:#8da098; --mut2:#5d6e67;
  --bad:#ff5d6c; --bad-d:#b3243a;
  --cat:#9ef36b; /* active-category accent — drives the background theme */
  --glow: 0 0 30px -6px var(--green);
  --r: 16px; --r-sm:11px;
  --mono:'JetBrains Mono', ui-monospace, monospace;
  --disp:'Space Grotesk', system-ui, sans-serif;
  --body:'Inter', system-ui, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--body);
  -webkit-font-smoothing:antialiased; overflow-x:hidden; line-height:1.55;
  min-height:100dvh;
}
a{color:inherit; text-decoration:none}
img{display:block}
::selection{background:var(--green); color:#04130a}
:focus-visible{outline:2px solid var(--green); outline-offset:2px; border-radius:6px}

/* ── animated background layers ─────────────────────────────────────────── */
#bg-canvas{position:fixed; inset:0; width:100%; height:100%; z-index:0; display:block}
.bg-grid{
  position:fixed; inset:-2px; z-index:0; pointer-events:none; opacity:.35;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--cat) 6%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--cat) 6%, transparent) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%, #000 35%, transparent 78%);
  transition:background-image .7s ease;
}
.bg-vignette{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 55% at 50% -8%, color-mix(in srgb, var(--cat) 17%, transparent), transparent 60%),
    radial-gradient(circle at 80% 18%, color-mix(in srgb, var(--cat) 11%, transparent), transparent 45%),
    radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--cat) 10%, transparent), transparent 55%);
  transition:background .7s ease;
}
.bg-noise{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
main, .topbar, .site-foot{position:relative; z-index:2}

/* ── boot loader ────────────────────────────────────────────────────────── */
.boot{
  position:fixed; inset:0; z-index:60; display:grid; place-content:center; justify-items:center;
  gap:22px; background:radial-gradient(ellipse at 50% 40%, #0b1014, var(--bg) 70%);
  transition:opacity .6s ease, visibility .6s;
}
.boot.hide{opacity:0; visibility:hidden}
.boot-logo{width:96px; mix-blend-mode:screen; filter:drop-shadow(0 0 22px rgba(158,243,107,.55)); animation:bootpulse 1.7s ease-in-out infinite}
.boot-bar{width:210px; height:3px; border-radius:3px; background:#13201a; overflow:hidden}
.boot-bar span{display:block; height:100%; width:40%; border-radius:3px;
  background:linear-gradient(90deg, transparent, var(--green), transparent); animation:bootslide 1.1s ease-in-out infinite}
.boot-text{margin:0; font-family:var(--mono); font-size:12px; letter-spacing:3px; text-transform:uppercase; color:var(--mut)}
.boot-text::after{content:'_'; animation:blink 1s steps(2) infinite; color:var(--green)}
@keyframes bootpulse{50%{transform:scale(1.06)}}
@keyframes bootslide{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
@keyframes blink{50%{opacity:0}}

/* ── top bar ────────────────────────────────────────────────────────────── */
.topbar{
  position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:13px clamp(16px,4vw,40px);
  background:linear-gradient(180deg, rgba(6,8,10,.92), rgba(6,8,10,.66));
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:13px}
.brand-logo{width:42px; height:42px; object-fit:contain; mix-blend-mode:screen; filter:drop-shadow(0 0 10px rgba(158,243,107,.45))}
.brand-text{display:flex; flex-direction:column; line-height:1}
.brand-text b{font-family:var(--disp); font-weight:700; font-size:18px; letter-spacing:2px}
.brand-text i{font-style:normal; font-size:11px; letter-spacing:2.5px; text-transform:uppercase; color:var(--mut); margin-top:3px}
.top-stats{display:flex; align-items:center; gap:10px}
.stat{display:flex; align-items:center; gap:7px; padding:7px 12px; border:1px solid var(--line);
  border-radius:99px; background:rgba(12,16,20,.6); font-family:var(--mono); font-size:13px}
.stat .ic{width:15px; height:15px; fill:none; stroke:var(--green); stroke-width:1.7; stroke-linejoin:round; stroke-linecap:round}
.stat b{color:var(--green)}
.btn-ghost{font-family:var(--body); font-weight:600; font-size:13px; cursor:pointer; color:var(--mut);
  background:transparent; border:1px solid var(--line); border-radius:99px; padding:8px 14px; transition:.18s}
.btn-ghost:hover{color:var(--ink); border-color:var(--line2); background:rgba(255,255,255,.03)}

/* ── layout ─────────────────────────────────────────────────────────────── */
main{max-width:1080px; margin:0 auto; padding:0 clamp(16px,4vw,40px) 80px}

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero{padding:clamp(40px,7vw,80px) 0 30px; text-align:center; animation:rise .8s .1s both}
.kicker{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px;
  letter-spacing:3px; text-transform:uppercase; color:var(--green); padding:6px 14px;
  border:1px solid rgba(158,243,107,.3); border-radius:99px; background:rgba(158,243,107,.05)}
.kicker::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); animation:blink 1.6s ease-in-out infinite}
.hero-title{font-family:var(--disp); font-weight:700; font-size:clamp(30px,6vw,54px); line-height:1.04;
  letter-spacing:-1.5px; margin:22px auto 0; max-width:14ch;
  background:linear-gradient(180deg,#fff,#bfe9c9 65%,#7fd79a); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero-sub{max-width:60ch; margin:18px auto 0; color:var(--mut); font-size:clamp(14px,1.6vw,16px)}
.hero-sub b{color:var(--ink)}
.hero-pills{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:30px auto 0; max-width:720px}
.cpill{display:flex; align-items:center; gap:9px; padding:9px 15px 9px 11px; border-radius:99px; cursor:pointer;
  border:1px solid var(--line); background:rgba(12,16,20,.55); transition:.2s; font-size:13px; font-weight:600}
.cpill:hover{border-color:var(--line2); transform:translateY(-2px)}
.cpill .pico{width:26px; height:26px; display:grid; place-items:center; border-radius:8px; background:rgba(158,243,107,.08)}
.cpill .pico svg{width:15px; height:15px; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.cpill .pcount{font-family:var(--mono); font-size:11px; color:var(--mut)}
.cpill.done{border-color:rgba(158,243,107,.5)}
.cpill.done .pcount{color:var(--green)}
.hero-progress{display:flex; align-items:center; gap:14px; justify-content:center; margin:26px auto 0; max-width:420px}
.hero-progress-track{flex:1; height:7px; border-radius:99px; background:#10171a; overflow:hidden; border:1px solid var(--line)}
.hero-progress-track span{display:block; height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg, var(--green-deep), var(--green)); box-shadow:0 0 14px rgba(158,243,107,.5); transition:width .8s cubic-bezier(.2,.8,.2,1)}
.hero-progress-label{font-family:var(--mono); font-size:12px; color:var(--mut); white-space:nowrap}
.hero-progress-label b{color:var(--green)}

/* ── category tabs ──────────────────────────────────────────────────────── */
.tabs{display:flex; gap:8px; overflow-x:auto; padding:6px; margin:34px 0 24px; scrollbar-width:none;
  border:1px solid var(--line); border-radius:99px; background:rgba(10,13,16,.6); backdrop-filter:blur(6px)}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto; display:flex; align-items:center; gap:9px; padding:10px 18px; border-radius:99px; cursor:pointer;
  font-weight:600; font-size:14px; color:var(--mut); white-space:nowrap; transition:.2s;
  background:transparent; border:1px solid transparent; -webkit-appearance:none; appearance:none}
.tab svg{width:17px; height:17px; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.tab:hover{color:var(--ink); background:rgba(255,255,255,.04)}
.tab.active{color:#06140b; background:linear-gradient(135deg, var(--cat), color-mix(in srgb, var(--cat) 60%, #0c5a2c));
  box-shadow:0 6px 20px -8px color-mix(in srgb, var(--cat) 75%, transparent)}
.tab .tcount{font-family:var(--mono); font-size:11px; opacity:.8}

/* ── panels / cards ─────────────────────────────────────────────────────── */
.panel{display:none; animation:rise .5s both}
.panel.active{display:block}
.panel-head{display:flex; align-items:flex-start; gap:14px; margin:6px 4px 22px}
.panel-head .phic{flex:0 0 auto; width:46px; height:46px; display:grid; place-items:center; border-radius:13px;
  border:1px solid var(--line2); background:rgba(158,243,107,.06)}
.panel-head .phic svg{width:24px; height:24px; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.panel-head h2{font-family:var(--disp); font-weight:700; font-size:22px; margin:0; letter-spacing:-.3px}
.panel-head p{margin:4px 0 0; color:var(--mut); font-size:13.5px}

.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:16px}
.card{position:relative; border:1px solid var(--line); border-radius:var(--r); background:
    linear-gradient(180deg, var(--panel2), var(--panel)); padding:20px 20px 18px; overflow:hidden;
  transition:border-color .25s, transform .25s}
.card::before{content:''; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(158,243,107,.5), transparent); opacity:.6}
.card:hover{border-color:var(--line2); transform:translateY(-3px)}
.card.solved{border-color:rgba(158,243,107,.45)}
.card.solved::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 120% 60% at 50% -10%, rgba(158,243,107,.10), transparent 60%)}
.card-top{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:11px}
.card-idx{font-family:var(--mono); font-size:11px; color:var(--mut2); letter-spacing:1px}
.card-cat-ic{width:16px; height:16px; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; color:var(--cat); opacity:.85}
.card h3{font-family:var(--disp); font-weight:600; font-size:18px; margin:0 0 8px; letter-spacing:-.2px}
.card .prompt{color:#b9c8c0; font-size:14px; margin:0 0 12px}
.hint{margin:0 0 14px}
.hint summary{cursor:pointer; font-size:12.5px; color:var(--mut); list-style:none; display:inline-flex; align-items:center; gap:6px; user-select:none}
.hint summary::-webkit-details-marker{display:none}
.hint summary::before{content:'›'; transition:.2s; color:var(--green); font-weight:700}
.hint[open] summary::before{transform:rotate(90deg)}
.hint .hint-body{margin:9px 0 0; font-size:13px; color:#a9bcb1; padding:10px 12px; border-left:2px solid var(--green-deep);
  background:rgba(158,243,107,.04); border-radius:0 8px 8px 0}

/* ── flag input row ─────────────────────────────────────────────────────── */
.flagform{display:flex; gap:9px; align-items:stretch}
.flag-in{flex:1; min-width:0; font-family:var(--mono); font-size:13.5px; color:var(--ink);
  background:#070b0d; border:1px solid var(--line2); border-radius:var(--r-sm); padding:12px 13px; transition:.2s}
.flag-in::placeholder{color:#46554e}
.flag-in:focus{border-color:var(--green); box-shadow:0 0 0 3px rgba(158,243,107,.12); outline:none}
.check{position:relative; flex:0 0 auto; font-family:var(--disp); font-weight:600; font-size:14px; cursor:pointer;
  color:#06140b; border:none; border-radius:var(--r-sm); padding:0 20px; overflow:hidden;
  background:linear-gradient(135deg, var(--green), var(--green-d)); transition:.18s; min-width:104px}
.check:hover{filter:brightness(1.06)}
.check:active{transform:translateY(1px)}
.check:disabled{cursor:default; filter:none}
.check .lbl{position:relative; z-index:2}
/* the unique forensic scan loader inside the button */
.check.scanning{color:transparent; background:#0b1a10; border:1px solid rgba(158,243,107,.4)}
.scanstrip{position:absolute; inset:0; z-index:1; display:none; align-items:center; justify-content:center;
  overflow:hidden; font-family:var(--mono); font-size:9px; letter-spacing:1px; color:rgba(158,243,107,.55)}
.check.scanning .scanstrip{display:flex}
.scanstrip .hex{white-space:nowrap; animation:hexroll .9s linear infinite}
.scanstrip::after{content:''; position:absolute; top:0; bottom:0; width:34%;
  background:linear-gradient(90deg, transparent, rgba(158,243,107,.9), transparent); filter:blur(1px);
  animation:sweep 1s cubic-bezier(.5,0,.5,1) infinite}
@keyframes sweep{0%{left:-40%}100%{left:110%}}
@keyframes hexroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

.result{display:flex; align-items:center; gap:8px; margin-top:12px; font-size:13px; min-height:18px;
  font-family:var(--mono); opacity:0; transform:translateY(-3px); transition:.25s}
.result.show{opacity:1; transform:none}
.result.ok{color:var(--green)}
.result.no{color:var(--bad)}
.result svg{width:15px; height:15px; flex:0 0 auto}
.card.shake{animation:shake .4s}
@keyframes shake{10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(4px)}50%{transform:translateX(-5px)}}
.card.pop{animation:pop .5s}
@keyframes pop{40%{transform:scale(1.018)}}

/* solved state */
.solved-badge{display:none; align-items:center; gap:6px; font-family:var(--mono); font-size:12px; color:var(--green);
  padding:7px 0 0}
.card.solved .flagform{display:none}
.card.solved .hint{display:none}
.card.solved .solved-badge{display:flex}
.solved-badge svg{width:16px; height:16px}

/* ── toasts ─────────────────────────────────────────────────────────────── */
.toast-host{position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:50;
  display:flex; flex-direction:column; gap:10px; align-items:center; pointer-events:none}
.toast{display:flex; align-items:center; gap:11px; padding:13px 18px; border-radius:13px; min-width:240px;
  font-size:14px; font-weight:500; backdrop-filter:blur(10px); border:1px solid var(--line2);
  background:rgba(12,16,20,.92); box-shadow:0 16px 40px -12px rgba(0,0,0,.7);
  animation:toastin .4s cubic-bezier(.2,.9,.2,1) both}
.toast.out{animation:toastout .3s ease forwards}
.toast .tic{width:34px; height:34px; flex:0 0 auto; display:grid; place-items:center; border-radius:9px}
.toast.ok .tic{background:rgba(158,243,107,.14); color:var(--green)}
.toast.no .tic{background:rgba(255,93,108,.14); color:var(--bad)}
.toast .tic svg{width:18px; height:18px}
.toast b{display:block; font-family:var(--disp)}
.toast small{color:var(--mut); font-family:var(--mono); font-size:11px}
@keyframes toastin{from{opacity:0; transform:translateY(16px) scale(.96)}}
@keyframes toastout{to{opacity:0; transform:translateY(10px)}}

/* ── modal ──────────────────────────────────────────────────────────────── */
.modal-host{position:fixed; inset:0; z-index:55; display:grid; place-items:center; padding:20px;
  background:rgba(3,5,7,.7); backdrop-filter:blur(4px); animation:rise .25s both}
.modal-host[hidden]{display:none}
.modal{max-width:400px; width:100%; border:1px solid var(--line2); border-radius:18px; padding:26px;
  background:linear-gradient(180deg, var(--panel2), var(--panel)); box-shadow:0 30px 70px -20px #000}
.modal h3{font-family:var(--disp); margin:0 0 8px; font-size:20px}
.modal p{margin:0 0 20px; color:var(--mut); font-size:14px}
.modal-actions{display:flex; gap:10px; justify-content:flex-end}
.btn-danger{font-family:var(--body); font-weight:600; font-size:13.5px; cursor:pointer; color:#fff;
  background:linear-gradient(135deg, var(--bad), var(--bad-d)); border:none; border-radius:99px; padding:10px 18px}
.btn-danger:hover{filter:brightness(1.07)}

/* ── footer ─────────────────────────────────────────────────────────────── */
.site-foot{max-width:1080px; margin:0 auto; padding:30px clamp(16px,4vw,40px) 50px;
  display:flex; align-items:center; gap:16px; border-top:1px solid var(--line)}
.foot-logo{width:38px; mix-blend-mode:screen; opacity:.9; flex:0 0 auto}
.foot-main{margin:0; font-size:13.5px}
.foot-main b{color:var(--green)}
.foot-sub{margin:3px 0 0; font-size:12px; color:var(--mut2)}
.foot-year{margin-left:auto; font-family:var(--mono); font-size:12px; color:var(--mut2)}

@keyframes rise{from{opacity:0; transform:translateY(14px)}}

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width:620px){
  .brand-text i{display:none}
  .stat span{font-size:12px}
  .cards{grid-template-columns:1fr}
  .top-stats{gap:7px}
  .hero-title{letter-spacing:-1px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.05ms !important; scroll-behavior:auto}
  #bg-canvas{display:none}
}