/* ── Variables ────────────────────────────────────────────────────────────── */
:root {
  --bg:      #030303;
  --bg2:     #080808;
  --bg3:     #101010;
  --panel:   rgba(12,12,12,.88);
  --panel2:  rgba(17,17,17,.88);
  --line:    rgba(255,255,255,.08);
  --line2:   rgba(255,255,255,.14);
  --text:    #f2f2f2;
  --muted:   #858585;
  --dim:     #4a4a4a;
  --white:   #ffffff;

  /* ── Bleu accent ── */
  --blue:    #3b82f6;
  --blue2:   #2563eb;
  --blue3:   #1d4ed8;
  --blueg:   rgba(59,130,246,.15);
  --blueg2:  rgba(59,130,246,.06);
  --glow:    0 0 24px rgba(59,130,246,.35), 0 0 60px rgba(59,130,246,.12);
  --glow-sm: 0 0 12px rgba(59,130,246,.3);

  --green:  #10b981;
  --red:    #ef4444;
  --gold:   #f59e0b;
  --purple: #7c3aed;

  --r:   12px;
  --ease: cubic-bezier(.34,1.56,.64,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
}
@media (pointer: fine) { body, a, button, input, select { cursor: none; } }
::selection { background: var(--blue); color: #fff; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: #1a1a2e; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--blue2); }

/* ── Background layers ────────────────────────────────────────────────────── */
#space-wrap {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
}
#space {
  position: absolute; inset: 0;
  pointer-events: none; display: block;
  width: 100%; height: 100%;
}
/* Dot grid subtle */
.grid-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(59,130,246,.22) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: .18;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
}
/* Grand glow central */
.glow-bg {
  position: fixed; pointer-events: none; z-index: 0;
  border-radius: 50%; filter: blur(80px); opacity: .12;
  background: radial-gradient(circle, #3b82f6 0%, transparent 70%);
  width: 800px; height: 500px;
  top: -100px; left: 50%; translate: -50% 0;
}
main, nav, aside, section, footer, .dash-layout { position: relative; z-index: 2; }

/* ── Curseur custom ───────────────────────────────────────────────────────── */
#cur-dot, #cur-ring {
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 9999;
  border-radius: 50%; translate: -50% -50%;
}
#cur-dot {
  width: 5px; height: 5px;
  background: var(--blue);
  box-shadow: 0 0 8px var(--blue);
}
#cur-ring {
  width: 32px; height: 32px;
  border: 1px solid rgba(59,130,246,.5);
  transition: width .25s var(--ease), height .25s var(--ease), border-color .25s, background .25s;
}
#cur-ring.hover { width: 52px; height: 52px; border-color: rgba(59,130,246,.9); background: rgba(59,130,246,.05); }
#cur-ring.down  { width: 22px; height: 22px; }
@media (pointer: coarse) { #cur-dot, #cur-ring { display: none; } }

/* ── Boutons ──────────────────────────────────────────────────────────────── */
.btn {
  --mx: 0px; --my: 0px;
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 13px Inter; color: var(--text);
  padding: 11px 22px; border-radius: 10px;
  border: 1px solid rgba(59,130,246,.2);
  background: rgba(59,130,246,.06);
  translate: var(--mx) var(--my);
  transition: translate .4s var(--ease), border-color .2s, box-shadow .2s, background .2s;
  isolation: isolate; white-space: nowrap;
}
.btn:hover {
  border-color: rgba(59,130,246,.5);
  background: rgba(59,130,246,.1);
  box-shadow: var(--glow-sm);
}
.btn-primary {
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue3) 100%);
  color: #fff; border-color: transparent;
  font-weight: 700;
  box-shadow: 0 4px 20px rgba(59,130,246,.4);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #4f93f8 0%, var(--blue2) 100%);
  box-shadow: 0 6px 28px rgba(59,130,246,.55);
  border-color: transparent;
}
.btn-discord {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: rgba(8,8,10,.9); border-color: rgba(255,255,255,.2); color: #fff;
  box-shadow: 0 0 28px rgba(69,91,255,.2), inset 0 1px 0 rgba(255,255,255,.04);
}
.btn-discord > svg { display: none; }
.btn-discord::before {
  content: ''; position: relative; z-index: 2; display: block;
  width: 18px; height: 18px; flex: 0 0 18px;
  background: url('/discord.svg') center / contain no-repeat;
}
.btn-discord .lbl { gap: 8px; }
.btn-discord:hover {
  background: rgba(15,16,24,.98); border-color: rgba(150,160,255,.52);
  color: #fff; box-shadow: 0 0 32px rgba(69,91,255,.32), inset 0 1px 0 rgba(255,255,255,.06);
}
.btn-outline { background: transparent; border-color: rgba(59,130,246,.25); color: var(--text); }
.btn-outline:hover { border-color: rgba(59,130,246,.55); background: rgba(59,130,246,.07); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: rgba(59,130,246,.07); border-color: rgba(59,130,246,.15); }
.btn-lg { padding: .75rem 1.75rem; font-size: .95rem; border-radius: 12px; }
.btn-sm { padding: .3rem .75rem; font-size: .78rem; border-radius: 8px; }
.btn.bump { animation: bump .6s var(--ease); }
.btn .lbl { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px; transition: translate .4s var(--ease); }
.btn .shine { position: absolute; inset: 0; z-index: 1; background: radial-gradient(90px circle at var(--sx,50%) var(--sy,50%), rgba(255,255,255,.18), transparent 60%); opacity: 0; transition: opacity .2s; }
.btn:hover .shine { opacity: 1; }
.ripple { position: absolute; border-radius: 50%; background: rgba(59,130,246,.3); transform: scale(0); animation: ripple .6s ease-out forwards; pointer-events: none; z-index: 1; }

@keyframes bump  { 0%{scale:1} 25%{scale:1.1 .92} 50%{scale:.96 1.06} 75%{scale:1.03 .98} 100%{scale:1} }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }

/* ── Navbar ───────────────────────────────────────────────────────────────── */
nav.top {
  position: fixed; top: 16px; left: 50%; translate: -50% 0;
  width: min(900px, calc(100% - 32px)); z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 8px 8px 16px; border-radius: 999px;
  background: rgba(6,6,14,.8);
  border: 1px solid rgba(59,130,246,.18);
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  box-shadow: 0 4px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(59,130,246,.1);
}
.nav-brand {
  display: flex; align-items: center; gap: 9px;
  font-weight: 800; letter-spacing: -.03em; font-size: 16px;
  text-decoration: none; color: var(--text);
}
.nav-brand img { border-radius: 50%; }
.nav-links { display: flex; gap: 2px; }
.nav-links a {
  color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 500;
  padding: 7px 14px; border-radius: 999px; transition: .2s;
}
.nav-links a:hover { color: var(--text); background: rgba(59,130,246,.1); }
.nav-cta { display: flex; gap: 8px; }
.nav-user {
  display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px;
  border-radius: 999px;
  background: rgba(59,130,246,.08);
  border: 1px solid rgba(59,130,246,.2);
  transition: border-color .2s, box-shadow .2s; text-decoration: none;
}
.nav-user:hover { border-color: rgba(59,130,246,.5); box-shadow: var(--glow-sm); }
.nav-user img { width: 24px; height: 24px; border-radius: 50%; }
.nav-user span { font-size: .82rem; font-weight: 600; color: var(--text); }
@media (max-width: 760px) { .nav-links { display: none; } }

/* ── Tier badges ──────────────────────────────────────────────────────────── */
.tier-badge { font-size: .62rem; font-weight: 700; padding: .12rem .4rem; border-radius: 5px; text-transform: uppercase; letter-spacing: .5px; }
.tier-free     { background: rgba(255,255,255,.05); color: var(--muted); border: 1px solid rgba(255,255,255,.1); }
.tier-vip      { background: rgba(59,130,246,.15); color: #93c5fd; border: 1px solid rgba(59,130,246,.35); }
.tier-advanced { background: rgba(59,130,246,.25); color: #bfdbfe; border: 1px solid rgba(59,130,246,.5); box-shadow: 0 0 8px rgba(59,130,246,.2); }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  text-align: left; padding: 160px 0 80px;
  max-width: 1100px; margin: 0 auto;
  padding-left: max(32px, 5vw); padding-right: max(32px, 5vw);
}
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid rgba(59,130,246,.3);
  background: rgba(59,130,246,.08);
  font: 600 10px 'JetBrains Mono', monospace; letter-spacing: .14em;
  color: #93c5fd; text-transform: uppercase; margin-bottom: 1.4rem;
  box-shadow: 0 0 16px rgba(59,130,246,.15);
}
.pill .dot-pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue); box-shadow: 0 0 8px var(--blue);
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot { 0%,100%{opacity:1;box-shadow:0 0 8px var(--blue)} 50%{opacity:.4;box-shadow:0 0 3px var(--blue)} }

h1.hero-title {
  font-size: clamp(52px, 9vw, 110px);
  font-weight: 900; letter-spacing: -.05em; line-height: .92;
  margin-bottom: 1.2rem; color: #fff;
}
.hero-title .dim-line {
  background: linear-gradient(90deg, #3b82f6 0%, #1d4ed8 60%, #0f172a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  display: block;
}
.grad {
  background: linear-gradient(90deg, #60a5fa 0%, #3b82f6 50%, #93c5fd 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub {
  color: var(--muted); font-size: clamp(14px, 1.6vw, 16px);
  max-width: 460px; line-height: 1.75; margin-bottom: 2.2rem;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 3rem; }

/* Right column features */
.hero-right-features {
  position: absolute; right: max(32px, 5vw); top: 50%; translate: 0 -50%;
  display: flex; flex-direction: column; gap: 22px; max-width: 210px;
}
.hero-feature-label {
  font: 700 10px 'JetBrains Mono', monospace; letter-spacing: .14em;
  color: #93c5fd; text-transform: uppercase; margin-bottom: 5px;
}
.hero-feature-desc { font-size: 12px; color: var(--muted); line-height: 1.55; }
.hero-feature-divider { height: 1px; background: rgba(59,130,246,.12); }

.hero-stats { display: flex; gap: 32px; flex-wrap: wrap; }
.hero-stat b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.03em; color: #fff; }
.hero-stat span { color: var(--muted); font-size: 12px; }

.scroll-hint { margin-top: 2.5rem; width: 22px; height: 34px; border: 1px solid rgba(59,130,246,.25); border-radius: 12px; position: relative; }
.scroll-hint::after { content: ''; position: absolute; left: 50%; top: 6px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--blue); animation: wheel 1.8s infinite; }
@keyframes wheel { 0%{opacity:0;translate:0 0} 30%{opacity:1} 100%{opacity:0;translate:0 12px} }

.hero-line {
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(59,130,246,.2), transparent);
}

@media (max-width: 900px) {
  .hero { text-align: center; align-items: center; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-right-features { display: none; }
}

/* ── Sections ─────────────────────────────────────────────────────────────── */
.wrap { width: min(1100px, calc(100% - 48px)); margin: 0 auto; }
.sec { padding: 100px 0; }
.sec h2 {
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 900; letter-spacing: -.04em;
  text-align: center; color: #fff; margin-bottom: 10px;
}
.sec .sub-txt { color: var(--muted); font-size: 15px; max-width: 500px; margin: 0 auto; text-align: center; line-height: 1.7; }

/* ── Cards grid ───────────────────────────────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 48px; }
@media (max-width: 900px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .cards { grid-template-columns: 1fr; } }

.card {
  position: relative; padding: 24px; border-radius: 16px;
  background: var(--panel); border: 1px solid rgba(59,130,246,.1);
  transition: border-color .25s, transform .5s var(--ease), box-shadow .25s;
  overflow: hidden; transform-style: preserve-3d;
}
.card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(280px circle at var(--gx,50%) var(--gy,50%), rgba(59,130,246,.1), transparent 60%);
  opacity: 0; transition: opacity .3s;
}
.card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(135deg, rgba(59,130,246,.04) 0%, transparent 60%);
}
.card:hover { border-color: rgba(59,130,246,.35); box-shadow: 0 8px 40px rgba(59,130,246,.15); }
.card:hover::before { opacity: 1; }
.card .ic {
  width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
  background: rgba(59,130,246,.12); border: 1px solid rgba(59,130,246,.25);
  margin-bottom: 16px; transform: translateZ(20px);
  box-shadow: 0 0 14px rgba(59,130,246,.2);
}
.card .ic svg { width: 20px; height: 20px; stroke: #93c5fd; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.card h3 { font-size: 15px; font-weight: 700; margin-bottom: 7px; color: #fff; transform: translateZ(15px); }
.card p  { color: var(--muted); font-size: 13px; line-height: 1.65; transform: translateZ(8px); }

/* ── Steps ────────────────────────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 48px; counter-reset: s; }
@media (max-width: 800px) { .steps { grid-template-columns: 1fr; } }
.step {
  padding: 26px; border: 1px solid rgba(59,130,246,.12);
  background: var(--panel); border-radius: 14px; transition: border-color .2s, box-shadow .2s;
  position: relative; overflow: hidden;
}
.step::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(59,130,246,.04) 0%, transparent 50%); pointer-events: none; }
.step:hover { border-color: rgba(59,130,246,.3); box-shadow: 0 6px 30px rgba(59,130,246,.1); }
.step-icon { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.step-icon svg { width: 18px; height: 18px; stroke: #60a5fa; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.step-icon span { font: 700 10px 'JetBrains Mono', monospace; color: #60a5fa; letter-spacing: .12em; }
.step h3 { margin: 0 0 7px; font-size: 15px; font-weight: 700; color: #fff; }
.step p { color: var(--muted); font-size: 13px; line-height: 1.65; }

/* ── Pricing ──────────────────────────────────────────────────────────────── */
.prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 48px; align-items: stretch; }
@media (max-width: 900px) { .prices { grid-template-columns: 1fr; } }
.price { display: flex; flex-direction: column; }
.price.hot { border-color: rgba(59,130,246,.4) !important; box-shadow: 0 0 40px rgba(59,130,246,.15) !important; }
.price .tag {
  position: absolute; top: 16px; right: 16px;
  font: 700 9px 'JetBrains Mono', monospace; letter-spacing: .1em;
  padding: 4px 10px; border-radius: 6px;
  background: var(--blue); color: #fff;
  box-shadow: 0 2px 12px rgba(59,130,246,.5);
}
.price .amt { font-size: 38px; font-weight: 900; letter-spacing: -.04em; margin: 12px 0 4px; color: #fff; }
.price .amt small { font-size: 14px; color: var(--muted); font-weight: 500; }
.price-icon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 12px; border: 1px solid rgba(59,130,246,.25); background: rgba(59,130,246,.1); box-shadow: 0 0 12px rgba(59,130,246,.15); }
.price-icon svg { width: 18px; height: 18px; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke: #93c5fd; }
.price ul { list-style: none; margin: 16px 0 22px; display: grid; gap: 9px; flex: 1; }
.price li { color: var(--muted); font-size: 13px; display: flex; gap: 10px; align-items: center; }
.price li::before { content: "–"; color: var(--dim); }
.price li.on { color: rgba(255,255,255,.8); }
.price li.on::before { content: "✓"; color: #60a5fa; }
.price li.off::before { content: "✗"; color: var(--dim); }

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.faq { max-width: 680px; margin: 48px auto 0; display: grid; gap: 8px; }
.faq details { border: 1px solid rgba(59,130,246,.1); border-radius: 12px; background: var(--panel); padding: 16px 20px; transition: border-color .2s, box-shadow .2s; }
.faq details[open] { border-color: rgba(59,130,246,.35); box-shadow: 0 4px 24px rgba(59,130,246,.1); }
.faq summary { list-style: none; font-weight: 600; font-size: 14px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; color: #fff; }
.faq summary::after { content: '+'; font-size: 20px; color: var(--blue); transition: .3s var(--ease); }
.faq details[open] summary::after { rotate: 135deg; }
.faq p { color: var(--muted); margin-top: 12px; line-height: 1.65; font-size: 13px; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
footer { padding: 36px 0; border-top: 1px solid rgba(59,130,246,.08); color: var(--dim); font-size: 12px; }

/* ── Reveal animations ────────────────────────────────────────────────────── */
.reveal { opacity: 0; translate: 0 30px; filter: blur(6px); transition: opacity .8s, translate .8s var(--ease), filter .8s; }
.reveal.in { opacity: 1; translate: 0 0; filter: none; }

/* ── Toast ────────────────────────────────────────────────────────────────── */
#toasts { position: fixed; bottom: 20px; right: 20px; z-index: 300; display: grid; gap: 8px; }
.toast {
  padding: 12px 16px; border-radius: 12px;
  background: rgba(8,8,18,.95); border: 1px solid rgba(59,130,246,.2);
  font-size: 13px; display: flex; gap: 10px; align-items: center;
  box-shadow: 0 8px 32px rgba(0,0,0,.6), 0 0 20px rgba(59,130,246,.1);
  animation: t-in .4s var(--ease);
}
.toast i { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 8px var(--blue); flex: none; }
.toast.bad  i { background: var(--red);  box-shadow: 0 0 8px var(--red); }
.toast.warn i { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.toast.out { animation: t-out .3s forwards; }
@keyframes t-in  { from { translate: 100% 0; opacity: 0; } }
@keyframes t-out { to   { translate: 100% 0; opacity: 0; } }

/* ══════════════════════════════════════════════════════════════════════════════
   DASHBOARD
══════════════════════════════════════════════════════════════════════════════ */
#app { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100vh; transition: grid-template-columns .3s cubic-bezier(.4,0,.2,1); }
#app.side-collapsed { grid-template-columns: 56px minmax(0, 1fr); }

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
aside.side {
  position: sticky; top: 0; height: 100vh;
  border-right: 1px solid rgba(59,130,246,.1);
  background: rgba(5,5,10,.98);
  padding: 18px 12px; display: flex; flex-direction: column; gap: 4px;
  overflow-y: auto; overflow-x: hidden;
  transition: width .3s cubic-bezier(.4,0,.2,1), padding .3s;
  width: 250px;
  /* Subtle left gradient glow */
  box-shadow: inset -1px 0 0 rgba(59,130,246,.08);
}
.side-brand {
  display: flex; align-items: center; gap: 9px;
  font-weight: 800; font-size: 16px; padding: 4px 8px; margin-bottom: 4px;
  text-decoration: none; color: #fff; letter-spacing: -.02em;
}
.side-brand img { flex-shrink: 0; border-radius: 50%; }
.me {
  margin: 8px 0 6px; padding: 12px; border-radius: 12px;
  background: rgba(59,130,246,.07); border: 1px solid rgba(59,130,246,.15);
  box-shadow: inset 0 1px 0 rgba(59,130,246,.1);
}
.me-row { display: flex; gap: 10px; align-items: center; }
.me-av {
  width: 34px; height: 34px; border-radius: 9px; overflow: hidden;
  border: 1px solid rgba(59,130,246,.3); flex-shrink: 0;
  box-shadow: 0 0 12px rgba(59,130,246,.2);
}
.me-av img { width: 100%; height: 100%; object-fit: cover; }
.me b { font-size: 13px; font-weight: 700; color: #fff; }
.me small { display: block; color: var(--muted); font-size: 10px; margin-top: 1px; }
.quota-row { margin-top: 10px; font: 600 9px 'JetBrains Mono', monospace; letter-spacing: .1em; color: var(--muted); display: flex; justify-content: space-between; text-transform: uppercase; }
.bar { height: 3px; border-radius: 3px; background: rgba(59,130,246,.1); margin-top: 6px; overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--blue2), #60a5fa); box-shadow: 0 0 8px var(--blue); transition: width .8s var(--ease); }
.grp { font: 700 9px 'JetBrains Mono', monospace; letter-spacing: .18em; color: var(--dim); margin: 14px 8px 5px; text-transform: uppercase; }
.nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border-radius: 10px; border: 1px solid transparent;
  background: none; color: var(--muted); font: 600 13px Inter; text-align: left;
  transition: .2s; position: relative;
}
.nav-item .ni {
  width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
  background: rgba(59,130,246,.07); border: 1px solid rgba(59,130,246,.12);
  transition: .2s; flex-shrink: 0;
}
.nav-item .ni svg { stroke: var(--muted); }
.nav-item.nav-sub-item { min-height: 36px; padding-top: 5px; padding-bottom: 5px; font-size: 12px; }
.nav-item.nav-sub-item .ni { width: 24px; height: 24px; border-radius: 7px; }
.nav-item:hover { color: #c7d4ff; background: rgba(59,130,246,.07); border-color: rgba(59,130,246,.15); }
.nav-item:hover .ni { background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.25); }
.nav-item:hover .ni svg { stroke: #93c5fd; }
.nav-item.on { color: #fff; background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.3); box-shadow: 0 2px 16px rgba(59,130,246,.12); }
.nav-item.on .ni { background: var(--blue); border-color: transparent; box-shadow: 0 0 12px rgba(59,130,246,.4); }
.nav-item.on .ni svg { stroke: #fff; }
.nav-item.on::before { content: ''; position: absolute; left: -12px; top: 22%; bottom: 22%; width: 2px; border-radius: 2px; background: var(--blue); box-shadow: 0 0 8px var(--blue); }
.nav-lock { margin-left: auto; font-size: .65rem; color: var(--dim); }
.side-grow { flex: 1; }
.signout:hover { color: #f87171 !important; }

/* ── Sidebar toggle ───────────────────────────────────────────────────────── */
.side-toggle-btn {
  position: fixed; top: 20px; left: 238px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--bg2); border: 1px solid rgba(59,130,246,.2);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); z-index: 130;
  transition: left .3s cubic-bezier(.4,0,.2,1), color .2s, box-shadow .2s;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.side-toggle-btn:hover { color: #93c5fd; border-color: rgba(59,130,246,.5); box-shadow: var(--glow-sm); }
.side-toggle-btn svg { transition: rotate .3s cubic-bezier(.4,0,.2,1); pointer-events: none; }
#app.side-collapsed .side-toggle-btn { left: 46px; }
#app.side-collapsed .side-toggle-btn svg { rotate: 180deg; }

/* ── Sidebar collapsed ────────────────────────────────────────────────────── */
aside.side.collapsed { width: 56px; padding-left: 8px; padding-right: 8px; }
aside.side.collapsed .side-brand > span:last-of-type,
aside.side.collapsed .me > :not(.me-row),
aside.side.collapsed .me-row > div:last-child,
aside.side.collapsed .grp,
aside.side.collapsed .nav-lock { display: none; }
aside.side.collapsed .nav-item {
  gap: 0; padding: 9px; justify-content: center;
  font-size: 0; white-space: nowrap;
}
aside.side.collapsed .nav-item .ni { flex-shrink: 0; }
aside.side.collapsed .nav-item.on::before { left: 2px; }
aside.side.collapsed .me { padding: 6px; }
aside.side.collapsed .me-row { justify-content: center; }
aside.side.collapsed .side-brand { justify-content: center; }

/* ── Content ──────────────────────────────────────────────────────────────── */
.content { padding: 48px 40px 80px; min-width: 0; }
.view { animation: vin .5s var(--ease); }
@keyframes vin { from { opacity: 0; translate: 0 16px; } }
.hide { display: none !important; }

/* ── Panel head ───────────────────────────────────────────────────────────── */
.panel-head { margin-bottom: 36px; }
.panel-head h1 {
  font-size: clamp(28px, 4vw, 46px); font-weight: 900;
  letter-spacing: -.04em; margin: 10px 0 6px; color: #fff;
}
.panel-head p { color: var(--muted); font-size: 14px; }

/* ── Dash pill ────────────────────────────────────────────────────────────── */
.dash-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 12px; border-radius: 999px;
  border: 1px solid rgba(59,130,246,.25);
  background: rgba(59,130,246,.08);
  font: 700 9px 'JetBrains Mono', monospace;
  letter-spacing: .14em; color: #93c5fd;
  text-transform: uppercase; margin-bottom: .9rem;
  box-shadow: 0 0 14px rgba(59,130,246,.1);
}
.dash-pill .dot-pulse { width: 5px; height: 5px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 6px var(--blue); animation: pulse-dot 2s infinite; flex-shrink: 0; }

/* ── Stats ────────────────────────────────────────────────────────────────── */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 28px; }
.stat-card {
  padding: 20px; border-radius: 14px;
  background: var(--panel); border: 1px solid rgba(59,130,246,.1);
  position: relative; overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.stat-card::before { content: ''; position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; border-radius: 50%; background: radial-gradient(circle, rgba(59,130,246,.12) 0%, transparent 70%); pointer-events: none; }
.stat-card:hover { border-color: rgba(59,130,246,.25); box-shadow: 0 4px 24px rgba(59,130,246,.1); }
.stat-label { font: 700 9px 'JetBrains Mono', monospace; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; margin-bottom: 8px; }
.stat-value { font-size: 1.8rem; font-weight: 800; line-height: 1; color: #fff; }
.stat-sub   { font-size: .72rem; color: var(--muted); margin-top: 4px; }
.cbar { height: 3px; border-radius: 3px; background: rgba(59,130,246,.1); margin-top: 10px; overflow: hidden; }
.cbar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--blue2), #60a5fa); box-shadow: 0 0 8px var(--blue); transition: width .6s var(--ease); }

/* ── Quick access cards ───────────────────────────────────────────────────── */
.qa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 10px; }
.qa-card {
  padding: 20px; border-radius: 14px; cursor: pointer;
  background: var(--panel); border: 1px solid rgba(59,130,246,.1);
  transition: border-color .2s, translate .3s var(--ease), box-shadow .2s;
  display: flex; flex-direction: column; gap: 6px;
  position: relative; overflow: hidden;
}
.qa-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(59,130,246,.05) 0%, transparent 60%); }
.qa-card:hover { border-color: rgba(59,130,246,.35); translate: 0 -3px; box-shadow: 0 8px 30px rgba(59,130,246,.15); }
.qa-card .qic {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(59,130,246,.12); border: 1px solid rgba(59,130,246,.25);
  margin-bottom: 6px; box-shadow: 0 0 12px rgba(59,130,246,.15);
}
.qa-card .qic svg { width: 16px; height: 16px; stroke: #93c5fd; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.qa-card h4 { font-size: 13px; font-weight: 700; color: #fff; }
.qa-card p  { font-size: 12px; color: var(--muted); line-height: 1.4; }

/* ── Section label ────────────────────────────────────────────────────────── */
.sec-label { font: 700 9px 'JetBrains Mono', monospace; letter-spacing: .16em; color: var(--muted); text-transform: uppercase; margin: 0 0 14px; }

/* ── Search box ───────────────────────────────────────────────────────────── */
.sbox {
  max-width: 860px; margin: 0 auto 24px;
  border-radius: 16px; border: 1px solid rgba(59,130,246,.15);
  background: rgba(8,8,18,.95);
  transition: border-color .2s, box-shadow .2s;
  box-shadow: 0 4px 30px rgba(0,0,0,.4);
}
.sbox:focus-within { border-color: rgba(59,130,246,.45); box-shadow: 0 4px 30px rgba(59,130,246,.15), 0 0 0 3px rgba(59,130,246,.06); }
.sbox-inner { display: flex; align-items: center; gap: 8px; padding: 6px; }
.sbox-inner input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  color: #fff; font: 500 15px Inter; padding: 12px 8px;
}
.sbox-inner input::placeholder { color: var(--muted); }
.sbox-inner select {
  background: rgba(59,130,246,.08); border: 1px solid rgba(59,130,246,.2);
  border-radius: 8px; color: #fff; font: 600 12px Inter;
  padding: 8px 10px; outline: none; transition: border-color .2s;
}
.sbox-inner select:focus { border-color: rgba(59,130,246,.5); }
.sbox-inner select option { background: #0d0d18; }

/* ── MC form ──────────────────────────────────────────────────────────────── */
.mc-box {
  background: var(--panel); border: 1px solid rgba(59,130,246,.12);
  border-radius: 16px; padding: 24px; margin-bottom: 22px;
  box-shadow: 0 4px 30px rgba(0,0,0,.3);
}
.mc-box h3 { font-size: .9rem; font-weight: 700; margin-bottom: 3px; color: #fff; }
.mc-box .mc-hint { color: var(--muted); font-size: .78rem; margin-bottom: 18px; }
.mc-categories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.mc-category {
  min-width: 0; padding: 15px; border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px; background: rgba(255,255,255,.018);
}
.mc-category-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.mc-category-head h4 { color: #ddd; font-size: .78rem; font-weight: 700; }
.mc-category-head span { color: var(--dim); font-size: .65rem; text-align: right; }
.mc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(195px, 1fr)); gap: 10px; margin-bottom: 16px; }
.mc-category .mc-grid { grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 9px; margin-bottom: 0; }
.mc-field { display: flex; flex-direction: column; gap: 4px; }
.mc-field label {
  font: 700 9px 'JetBrains Mono', monospace;
  color: var(--muted); text-transform: uppercase; letter-spacing: .1em;
  display: flex; align-items: center; gap: 5px;
}
.mc-field label svg { stroke: var(--muted); flex-shrink: 0; }
.mc-field input {
  background: rgba(59,130,246,.04); border: 1px solid rgba(59,130,246,.12);
  border-radius: 9px; padding: 8px 11px;
  color: #fff; font: 500 13px Inter; outline: none; transition: border-color .2s, box-shadow .2s;
}
.mc-field input:focus { border-color: rgba(59,130,246,.45); box-shadow: 0 0 0 3px rgba(59,130,246,.08); }
.mc-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── Results ──────────────────────────────────────────────────────────────── */
.results-wrap { display: grid; gap: 10px; }

/* Summary bar */
.results-summary {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  padding: 13px 18px; border-radius: 14px; margin-bottom: 6px;
  background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.09);
}
.results-summary-left {
  display: flex; align-items: center; gap: 10px;
  font-size: .82rem; color: rgba(255,255,255,.55);
}
.results-summary-left strong { color: #fff; font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; }
.results-summary-left span { color: rgba(255,255,255,.35); font: 500 12px 'JetBrains Mono', monospace; }
.results-summary-tags { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.src-tag {
  padding: 3px 10px; border-radius: 999px;
  font: 600 10px 'JetBrains Mono', monospace; letter-spacing: .04em;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #bbb;
  transition: border-color .15s, color .15s;
}
.src-tag:hover { border-color: rgba(255,255,255,.25); color: #fff; }

/* Result card */
.res {
  border-radius: 16px;
  background: rgba(10,10,10,.92);
  border: 1px solid rgba(255,255,255,.08);
  opacity: 0; translate: 0 10px; scale: .995;
  animation: res-in .4s var(--ease) forwards;
  transition: border-color .2s, box-shadow .2s, translate .25s var(--ease);
  overflow: hidden;
}
.res:hover {
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 8px 40px rgba(0,0,0,.4);
  translate: 0 -1px;
}

/* Card header */
.res-top {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,.055);
  background: rgba(255,255,255,.022);
  gap: 10px;
}
.res-top-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.res-src-badge {
  font: 700 9px 'JetBrains Mono', monospace; letter-spacing: .08em;
  padding: 4px 11px; border-radius: 999px; text-transform: uppercase;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: #ccc;
}
.res-conf-badge {
  font: 600 9px 'JetBrains Mono', monospace;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); color: #888;
}
.res-idx {
  font: 600 10px 'JetBrains Mono', monospace; color: rgba(255,255,255,.2);
  margin-left: auto; flex-shrink: 0;
}

/* Field group sections */
.res-group {
  padding: 14px 16px 6px;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.res-group:last-of-type { border-bottom: 0; }
.res-group-label {
  font: 700 8px 'JetBrains Mono', monospace; letter-spacing: .16em;
  color: rgba(255,255,255,.22); text-transform: uppercase; margin-bottom: 10px;
  display: flex; align-items: center; gap: 7px;
}
.res-group-label::after {
  content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.06); border-radius: 1px;
}

/* Fields grid */
.res-fields {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px; padding: 12px 16px 14px;
}
.res-fields.dense { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

.res-field {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px; padding: 9px 12px;
  transition: border-color .15s, background .15s;
  min-width: 0;
}
.res-field:hover {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.14);
}
.res-field.highlight {
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.16);
}
.res-field .fl {
  font: 700 7.5px 'JetBrains Mono', monospace;
  color: rgba(255,255,255,.28); text-transform: uppercase; letter-spacing: .12em;
  margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.res-field .fv {
  font: 500 .83rem Inter; word-break: break-all; color: rgba(255,255,255,.88);
  line-height: 1.4;
}
.res-field .fv.mono { font-family: 'JetBrains Mono', monospace; font-size: .75rem; color: rgba(255,255,255,.7); }
.res-field .fv.password { color: #f87171; font-family: 'JetBrains Mono', monospace; font-size: .78rem; }
.res-field .fv.email { color: #93c5fd; }
.res-field .fv.id-val { color: #a78bfa; font-family: 'JetBrains Mono', monospace; font-size: .73rem; }

.res-empty { font-size: .82rem; color: rgba(255,255,255,.2); padding: 14px 16px; }

/* Card actions */
.res-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 10px 14px 12px;
  border-top: 1px solid rgba(255,255,255,.05);
  background: rgba(0,0,0,.15);
}
.res-actions .btn { border-radius: 8px; font-size: .72rem; padding: .3rem .85rem; gap: 5px; }
.res-actions .btn svg { width: 11px; height: 11px; }

/* Sub-array items (discord history) */
.res-sub {
  margin: 8px 16px 12px;
  background: rgba(255,255,255,.018);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  overflow: hidden;
}
.res-sub-head {
  padding: 7px 12px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  background: rgba(255,255,255,.025);
  font: 700 9px 'JetBrains Mono', monospace; letter-spacing: .1em;
  color: rgba(255,255,255,.35); text-transform: uppercase;
  display: flex; align-items: center; justify-content: space-between;
}
.res-sub-count {
  font: 600 9px 'JetBrains Mono', monospace; color: rgba(255,255,255,.2);
}
.res-sub-items { display: grid; gap: 0; }
.res-sub-item {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 4px 10px;
}
.res-sub-item:last-child { border-bottom: 0; }
.res-sub-kv { min-width: 0; }
.res-sub-kv .sk { font: 700 7px 'JetBrains Mono', monospace; color: rgba(255,255,255,.22); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 2px; }
.res-sub-kv .sv { font: 500 .78rem Inter; color: rgba(255,255,255,.75); word-break: break-all; line-height: 1.3; }

.res-state {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  padding: 2.5rem; color: var(--muted); font-size: .88rem;
  border: 1px solid rgba(59,130,246,.1); border-radius: 14px; background: var(--panel);
}
.res-state-err { color: var(--red); background: rgba(239,68,68,.04); border-color: rgba(239,68,68,.2); }
.res-spinner {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid rgba(59,130,246,.2); border-top-color: var(--blue);
  animation: spin .7s linear infinite;
  box-shadow: 0 0 8px rgba(59,130,246,.3);
}
@keyframes spin { to { transform: rotate(360deg); } }

.scan-box {
  max-width: 860px; margin: 0 auto 14px; padding: 14px 18px;
  border-radius: 12px; background: rgba(5,5,14,.95);
  border: 1px solid rgba(59,130,246,.15);
  font: 13px 'JetBrains Mono', monospace; color: #60a5fa;
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
}
.scan-line { opacity: 0; transition: opacity .2s; margin-bottom: 3px; }
.scan-bar-wrap { height: 2px; border-radius: 2px; background: rgba(59,130,246,.1); margin-top: 10px; overflow: hidden; }
#scan-prog { height: 100%; width: 0; background: linear-gradient(90deg, var(--blue2), #60a5fa); box-shadow: 0 0 8px var(--blue); transition: width .3s; }

.status-ok   { color: #93c5fd; margin-right: 12px; }
.status-warn { color: var(--gold); margin-right: 12px; }
.status-err  { color: var(--red); }

@keyframes res-in { to { opacity: 1; translate: 0 0; scale: 1; } }

/* ── History ──────────────────────────────────────────────────────────────── */
.hist-list { display: grid; gap: 6px; }
.hrow {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 13px 16px; border-radius: 11px;
  background: var(--panel); border: 1px solid rgba(59,130,246,.09);
  transition: border-color .2s, box-shadow .2s;
}
.hrow:hover { border-color: rgba(59,130,246,.25); box-shadow: 0 3px 16px rgba(59,130,246,.08); }
.hrow span { color: var(--dim); font: 12px 'JetBrains Mono', monospace; white-space: nowrap; }

/* ── Lock screen ──────────────────────────────────────────────────────────── */
.lock-screen {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 4rem 2rem;
  background: var(--panel); border: 1px solid rgba(59,130,246,.1); border-radius: 18px;
  box-shadow: 0 0 60px rgba(59,130,246,.06);
}
.lock-screen .lock-icon { display: flex; justify-content: center; margin-bottom: 1rem; }
.lock-screen .lock-icon svg { stroke: var(--blue); opacity: .35; }
.lock-screen h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: .5rem; color: #fff; }
.lock-screen p  { color: var(--muted); font-size: .85rem; max-width: 300px; margin-bottom: 1.5rem; }

/* ── Pagination ───────────────────────────────────────────────────────────── */
.pagination, .adm-pagination {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding: 14px 18px;
}
.adm-pagination { border-top: 1px solid rgba(59,130,246,.07); }
.pg-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 9px;
  border-radius: 8px; border: 1px solid rgba(59,130,246,.12);
  background: rgba(59,130,246,.04);
  color: var(--muted); font: 600 12px Inter;
  cursor: pointer; transition: .2s; user-select: none;
}
.pg-btn:hover:not(:disabled):not(.pg-active) { border-color: rgba(59,130,246,.35); color: #93c5fd; background: rgba(59,130,246,.1); }
.pg-btn.pg-active { border-color: rgba(59,130,246,.5); color: #fff; background: rgba(59,130,246,.18); box-shadow: 0 0 12px rgba(59,130,246,.2); }
.pg-btn:disabled { opacity: .25; cursor: not-allowed; }
.pg-ellipsis { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; color: var(--dim); font: 600 13px Inter; user-select: none; }

/* ── Sources status ───────────────────────────────────────────────────────── */
.src-status {
  background: var(--panel); border: 1px solid rgba(59,130,246,.12); border-radius: 12px;
  padding: 12px 16px; display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; margin-bottom: 18px;
}

/* ── Panel box ────────────────────────────────────────────────────────────── */
.panel-box {
  background: var(--panel); border: 1px solid rgba(59,130,246,.12);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 4px 30px rgba(0,0,0,.3);
}
.panel-box-head {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 18px;
  border-bottom: 1px solid rgba(59,130,246,.08);
  background: rgba(59,130,246,.04);
}
.panel-box-icon {
  width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center; flex-shrink: 0;
  background: rgba(59,130,246,.15); border: 1px solid rgba(59,130,246,.3);
  box-shadow: 0 0 10px rgba(59,130,246,.2);
}
.panel-box-icon svg { stroke: #93c5fd; }
.panel-box-title { font: 700 13px Inter; color: #fff; }
.panel-box-sub { font: 500 11px Inter; color: var(--muted); margin-left: 2px; }
.panel-box-pills {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid rgba(59,130,246,.07);
  background: rgba(59,130,246,.02);
}
.panel-box-input {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
}
.panel-box-input input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  color: #fff; font: 500 14px Inter; padding: 8px 6px;
}
.panel-box-input input::placeholder { color: var(--muted); }

/* ── Type pills ───────────────────────────────────────────────────────────── */
.type-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 9px;
  border: 1px solid rgba(59,130,246,.12);
  background: rgba(59,130,246,.04);
  color: var(--muted); font: 600 12px Inter;
  cursor: pointer; transition: .2s; user-select: none; white-space: nowrap;
}
.type-pill svg { width: 14px; height: 14px; flex-shrink: 0; stroke: currentColor; transition: stroke .2s; }
.type-pill:hover { border-color: rgba(59,130,246,.3); color: #93c5fd; background: rgba(59,130,246,.08); }
.type-pill.active { border-color: rgba(59,130,246,.5); color: #fff; background: rgba(59,130,246,.16); box-shadow: 0 0 12px rgba(59,130,246,.15); }

/* ── Mobile topbar ────────────────────────────────────────────────────────── */
.mtop { display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 110; justify-content: space-between; align-items: center; padding: 10px 14px; background: rgba(5,5,10,.97); border-bottom: 1px solid rgba(59,130,246,.1); }
@media (max-width: 860px) {
  #app { grid-template-columns: 1fr; }
  #app.side-collapsed { grid-template-columns: 1fr; }
  aside.side { position: fixed; left: 0; top: 0; width: 260px; z-index: 120; translate: -100% 0; transition: translate .4s var(--ease); }
  aside.side.collapsed { width: 260px; padding: 18px 12px; }
  aside.side.collapsed .side-brand > span:last-of-type,
  aside.side.collapsed .me > :not(.me-row),
  aside.side.collapsed .me-row > div:last-child,
  aside.side.collapsed .grp,
  aside.side.collapsed .nav-lock { display: initial; }
  aside.side.collapsed .side-brand { justify-content: flex-start; }
  aside.side.collapsed .me { padding: 12px; }
  aside.side.collapsed .me-row { justify-content: flex-start; }
  aside.side.collapsed .nav-item { gap: 10px; padding: 9px 10px; justify-content: flex-start; font-size: 13px; }
  aside.side.collapsed .nav-item.nav-sub-item { font-size: 12px; }
  .side-toggle-btn { display: none; }
  aside.side.open { translate: 0 0; }
  .content { padding: 76px 14px 56px; }
  .mtop { display: flex; }
}

/* ── Admin ────────────────────────────────────────────────────────────────── */
.nav-admin { color: rgba(239,68,68,.7) !important; }
.nav-admin:hover, .nav-admin.on {
  background: rgba(239,68,68,.08) !important;
  border-color: rgba(239,68,68,.2) !important;
  color: #f87171 !important;
}
.nav-admin.on .ni { background: var(--red) !important; border-color: transparent !important; box-shadow: 0 0 12px rgba(239,68,68,.4) !important; }
.nav-admin.on .ni svg { stroke: #fff !important; }
.nav-admin.on::before { background: var(--red) !important; box-shadow: 0 0 8px var(--red) !important; }

.adm-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 22px; }
.adm-stat { padding: 18px; border-radius: 12px; background: var(--panel); border: 1px solid rgba(59,130,246,.1); }
.adm-stat .lbl { font: 700 9px 'JetBrains Mono', monospace; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 7px; }
.adm-stat .val { font-size: 1.8rem; font-weight: 800; line-height: 1; color: #fff; }
.adm-stat .sub { font-size: .7rem; color: var(--muted); margin-top: 3px; }

.adm-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.adm-search { display: flex; align-items: center; gap: 7px; background: var(--panel); border: 1px solid rgba(59,130,246,.12); border-radius: 10px; padding: 7px 12px; flex: 1; max-width: 300px; transition: border-color .2s; }
.adm-search:focus-within { border-color: rgba(59,130,246,.4); box-shadow: 0 0 0 3px rgba(59,130,246,.06); }
.adm-search input { flex: 1; background: none; border: 0; outline: none; color: #fff; font: 500 12px Inter; }
.adm-search input::placeholder { color: var(--muted); }

.adm-table-box { background: var(--panel); border: 1px solid rgba(59,130,246,.1); border-radius: 14px; overflow: hidden; }
.adm-table-box table { width: 100%; border-collapse: collapse; }
.adm-table-box thead tr { background: rgba(59,130,246,.04); border-bottom: 1px solid rgba(59,130,246,.1); }
.adm-table-box th { padding: 9px 13px; text-align: left; font: 700 9px 'JetBrains Mono', monospace; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; white-space: nowrap; }
.adm-table-box td { padding: 10px 13px; font-size: .83rem; vertical-align: middle; border-bottom: 1px solid rgba(59,130,246,.04); }
.adm-table-box tbody tr:last-child td { border-bottom: 0; }
.adm-table-box tbody tr { transition: background .15s; }
.adm-table-box tbody tr:hover { background: rgba(59,130,246,.04); }

.adm-avatar { width: 28px; height: 28px; border-radius: 7px; object-fit: cover; flex-shrink: 0; border: 1px solid rgba(59,130,246,.2); }
.adm-user-cell { display: flex; align-items: center; gap: 9px; }
.adm-username { font-weight: 700; font-size: .85rem; color: #fff; }
.adm-uid { font: 500 10px 'JetBrains Mono', monospace; color: var(--dim); }
.adm-global { font-size: .72rem; color: var(--muted); }
.adm-cr { font-weight: 700; color: #93c5fd; }
.adm-cr-max { color: var(--dim); font-size: .72rem; }
.adm-searches { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 6px; background: rgba(59,130,246,.1); border: 1px solid rgba(59,130,246,.2); font: 600 10px 'JetBrains Mono', monospace; color: #93c5fd; }
.adm-tier { display: inline-block; padding: 2px 7px; border-radius: 5px; font: 700 9px 'JetBrains Mono', monospace; text-transform: uppercase; }
.adm-tier-free     { background: rgba(255,255,255,.05); color: var(--muted); border: 1px solid rgba(255,255,255,.1); }
.adm-tier-vip      { background: rgba(59,130,246,.12); color: #93c5fd; border: 1px solid rgba(59,130,246,.3); }
.adm-tier-advanced { background: rgba(59,130,246,.2); color: #bfdbfe; border: 1px solid rgba(59,130,246,.45); box-shadow: 0 0 8px rgba(59,130,246,.15); }
.adm-guild-out { font-size: .72rem; color: var(--red); }

.adm-drawer {
  position: fixed; right: 0; top: 0; bottom: 0; width: min(400px, 100vw);
  background: #060610; border-left: 1px solid rgba(59,130,246,.15);
  z-index: 200; overflow-y: scroll; padding: 0;
  translate: 100% 0; transition: translate .35s cubic-bezier(.34,1.56,.64,1);
  box-shadow: -20px 0 60px rgba(0,0,0,.6), -4px 0 20px rgba(59,130,246,.08);
  overscroll-behavior: contain;
}
.adm-drawer.open { translate: 0 0; }
.adm-drawer-inner { padding: 22px; min-height: 100%; }
body.drawer-open { overflow: hidden; }
.adm-drawer-overlay {
  position: fixed; inset: 0; z-index: 199;
  background: rgba(0,0,0,.7);
  opacity: 0; pointer-events: none; transition: opacity .3s;
  backdrop-filter: blur(2px);
}
.adm-drawer-overlay.open { opacity: 1; pointer-events: all; }

.drawer-avatar { width: 50px; height: 50px; border-radius: 12px; object-fit: cover; border: 1px solid rgba(59,130,246,.3); box-shadow: 0 0 16px rgba(59,130,246,.2); }
.drawer-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid rgba(59,130,246,.1); }
.drawer-name { font-size: 1rem; font-weight: 700; color: #fff; }
.drawer-sub  { font: 500 11px 'JetBrains Mono', monospace; color: var(--muted); margin-top: 2px; }
.drawer-section { margin-bottom: 16px; }
.drawer-section-title { font: 700 9px 'JetBrains Mono', monospace; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 9px; }
.drawer-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.drawer-field { background: rgba(59,130,246,.04); border: 1px solid rgba(59,130,246,.1); border-radius: 9px; padding: 8px 11px; }
.drawer-field .dk { font: 700 8px 'JetBrains Mono', monospace; color: var(--muted); text-transform: uppercase; letter-spacing: .09em; margin-bottom: 3px; }
.drawer-field .dv { font-size: .83rem; font-weight: 600; word-break: break-all; color: rgba(255,255,255,.85); }
.drawer-hist { display: grid; gap: 5px; max-height: 260px; overflow-y: auto; }
.drawer-hist-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 11px; background: rgba(59,130,246,.04); border: 1px solid rgba(59,130,246,.08); border-radius: 8px; }
.drawer-hist-q { font-size: .83rem; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(255,255,255,.8); }
.drawer-hist-meta { font: 500 10px 'JetBrains Mono', monospace; color: var(--dim); white-space: nowrap; }
.drawer-actions { display: grid; gap: 7px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(59,130,246,.1); }
.drawer-credit-row { display: flex; gap: 7px; }
.drawer-credit-row input { flex: 1; padding: 8px 11px; border-radius: 9px; background: rgba(59,130,246,.06); border: 1px solid rgba(59,130,246,.15); color: #fff; font: 500 13px Inter; outline: none; }
.drawer-credit-row input:focus { border-color: rgba(59,130,246,.4); }
.btn-red { background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.25); color: #f87171; }
.btn-red:hover { background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.4); box-shadow: 0 0 12px rgba(239,68,68,.2); }

.adm-spin { display: flex; align-items: center; justify-content: center; padding: 3rem; color: var(--muted); gap: 10px; }
.adm-spin-ring { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid rgba(59,130,246,.15); border-top-color: var(--blue); animation: spin .7s linear infinite; flex-shrink: 0; box-shadow: 0 0 8px rgba(59,130,246,.3); }

/* ── Cryptgen-inspired finish ─────────────────────────────────────────────── */
html { background: #030303; }
body { background-color: #030303; }

.grid-bg {
  background-image: radial-gradient(circle, rgba(255,255,255,.2) .7px, transparent .9px);
  background-size: 30px 30px;
  opacity: .1;
}

.glow-bg {
  background: radial-gradient(circle, rgba(75,105,190,.65) 0%, transparent 70%);
  opacity: .08;
}

@media (pointer: fine) {
  body, a, button, input, select { cursor: auto; }
  a, button, [role="button"], .type-pill, .qa-card, summary { cursor: pointer; }
}
#cur-dot, #cur-ring { display: none; }
#space { opacity: .58; filter: grayscale(1); }

nav.top {
  background: rgba(8,8,8,.82);
  border-color: rgba(255,255,255,.1);
  box-shadow: 0 12px 40px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04);
}
.nav-links a:hover { background: rgba(255,255,255,.07); }
.nav-user { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
.nav-user:hover { border-color: rgba(255,255,255,.24); box-shadow: 0 0 18px rgba(255,255,255,.06); }

.btn {
  border-radius: 999px;
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  text-decoration: none;
  transition: translate .3s var(--ease), border-color .2s, box-shadow .2s, background .2s;
}
.btn:hover {
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.08);
  box-shadow: 0 4px 20px rgba(255,255,255,.06);
}
.btn-primary {
  border-color: transparent;
  background: linear-gradient(135deg, #4f86ff, #2860df);
  box-shadow: 0 6px 24px rgba(59,130,246,.24);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #6495ff, #3971ee);
  box-shadow: 0 8px 30px rgba(59,130,246,.34);
}
.btn-outline { border-color: rgba(255,255,255,.18); }
.btn-outline:hover { border-color: rgba(255,255,255,.36); background: rgba(255,255,255,.06); }

.card, .step, .faq details, .panel-box, .mc-box, .res, .res-state,
.src-status, .adm-stat, .adm-table-box, .adm-quick, .adm-table-wrap,
.qa-card, .lock-screen, .hrow {
  background-color: rgba(12,12,12,.86);
  border-color: rgba(255,255,255,.09);
  box-shadow: 0 14px 42px rgba(0,0,0,.18);
}
.card, .step, .panel-box, .mc-box { border-radius: 20px; }
.card::after, .step::after {
  background: linear-gradient(135deg, rgba(255,255,255,.035), transparent 58%);
}
.card:hover, .step:hover, .hrow:hover {
  border-color: rgba(255,255,255,.2);
  box-shadow: 0 14px 42px rgba(0,0,0,.3);
}
.faq details { border-radius: 16px; }
.faq details[open] { border-color: rgba(255,255,255,.2); box-shadow: 0 8px 28px rgba(0,0,0,.25); }

.hero-panel {
  border-color: rgba(255,255,255,.14) !important;
  background: rgba(8,8,8,.94) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.035), 0 24px 80px rgba(0,0,0,.62) !important;
}
.hero-panel-glow { opacity: .3 !important; }
.hp-bar, .hp-search, .hp-scan, .hp-progress {
  background: rgba(255,255,255,.018) !important;
  border-color: rgba(255,255,255,.08) !important;
}
.hp-result {
  background: rgba(255,255,255,.025) !important;
  border-color: rgba(255,255,255,.08) !important;
}
.hp-result-icon {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.1) !important;
  box-shadow: none !important;
}
.hp-title, .hp-prog-label { color: #888 !important; }
.hp-scan-line.dim, .hp-result-label { color: #777 !important; }
.hp-search-tag {
  color: #bbb !important;
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.12) !important;
}
.ht-blue, .grad {
  background: linear-gradient(110deg, #f4f4f4 0%, #bdbdbd 55%, #777 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
.hero-desc, .hero-trust p { color: #929292 !important; }
.hero-trust p strong { color: #f0f0f0 !important; }
.hero-btns > a:not(.btn) { color: #b7b7b7 !important; }
.hero-btns > a:not(.btn):hover { color: #fff !important; }
.feat-num { color: #777 !important; }
.sb-item p { color: #858585 !important; }
.sbox, .scan-box {
  background-color: rgba(10,10,10,.94);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 14px 42px rgba(0,0,0,.25);
}
.sbox:focus-within { border-color: rgba(255,255,255,.28); box-shadow: 0 0 0 3px rgba(255,255,255,.035); }
.mc-field input, .sbox-inner select, .adm-search, .adm-search-wrap,
.credit-form input[type=number], .modal-field input {
  background-color: rgba(255,255,255,.035);
  border-color: rgba(255,255,255,.11);
}
.panel-box-head, .panel-box-pills, .res-top, .adm-table-box thead tr {
  background-color: rgba(255,255,255,.025);
  border-color: rgba(255,255,255,.08);
}

aside.side {
  background: rgba(6,6,6,.98);
  border-right-color: rgba(255,255,255,.08);
  box-shadow: inset -1px 0 0 rgba(255,255,255,.025);
}
.me, .nav-item.on {
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.12);
  box-shadow: none;
}
.nav-item:hover { color: #fff; background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.1); }
.nav-item.on::before { box-shadow: none; }
.mtop { background: rgba(6,6,6,.96); border-bottom-color: rgba(255,255,255,.08); }
.side-toggle-btn { border-color: rgba(255,255,255,.12); }

.adm-drawer, .modal { background-color: #090909; }
.adm-drawer { border-left-color: rgba(255,255,255,.12); }
.adm-table-box tbody tr:hover { background: rgba(255,255,255,.035); }

:focus-visible { outline: 2px solid #78a1ff; outline-offset: 3px; }

.results-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

/* Results toolbar actions */
.results-toolbar .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 14px;
  border-radius: 10px;
  font: 600 12px Inter, sans-serif;
  letter-spacing: 0;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
  color: rgba(255,255,255,.78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 2px 8px rgba(0,0,0,.16);
  transition: translate .16s ease, border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
  white-space: nowrap;
}
.results-toolbar .btn svg {
  width: 14px; height: 14px;
  stroke: currentColor;
  flex-shrink: 0;
  opacity: .9;
}
.results-toolbar .btn-copy {
  border-color: rgba(96,165,250,.2);
  background: rgba(59,130,246,.07);
  color: #bfdbfe;
}
.results-toolbar .btn-export {
  border-color: rgba(74,222,128,.18);
  background: rgba(34,197,94,.055);
  color: #bbf7d0;
}
.results-toolbar .btn-clear {
  border-color: rgba(248,113,113,.18);
  background: rgba(239,68,68,.055);
  color: #fecaca;
}
.results-toolbar .btn:hover {
  translate: 0 -1px;
}
.results-toolbar .btn:active {
  translate: 0 0;
}
.results-toolbar .btn-copy:hover {
  border-color: rgba(96,165,250,.45);
  background: rgba(59,130,246,.13);
  color: #bfdbfe;
  box-shadow: 0 5px 16px rgba(37,99,235,.16), inset 0 1px 0 rgba(255,255,255,.05);
}
.results-toolbar .btn-export:hover {
  border-color: rgba(74,222,128,.4);
  background: rgba(34,197,94,.11);
  color: #bbf7d0;
  box-shadow: 0 5px 16px rgba(22,163,74,.14), inset 0 1px 0 rgba(255,255,255,.05);
}
/* Bouton effacer — rouge subtil au hover */
.results-toolbar .btn-clear:hover {
  border-color: rgba(248,113,113,.42);
  background: rgba(239,68,68,.11);
  color: #fca5a5;
  box-shadow: 0 5px 16px rgba(220,38,38,.14), inset 0 1px 0 rgba(255,255,255,.05);
}
.results-toolbar .btn:focus-visible {
  outline: 2px solid rgba(147,197,253,.9);
  outline-offset: 3px;
}

/* Séparateur vertical entre groupes de boutons */
.results-toolbar .tb-sep {
  width: 1px; height: 22px;
  background: rgba(255,255,255,.08);
  margin: 0 2px;
  flex-shrink: 0;
}
.results-pagination {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 14px 0;
}
.results-page-info {
  color: rgba(255,255,255,.25);
  font: 500 10px 'JetBrains Mono', monospace;
  text-align: center;
  padding: 0 4px;
  min-width: 120px;
}
.pg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.45);
  font: 600 11px 'JetBrains Mono', monospace;
  letter-spacing: .04em;
  transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
  white-space: nowrap;
  user-select: none;
}
.pg-btn:hover:not(:disabled) {
  border-color: rgba(255,255,255,.25);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.9);
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
}
.pg-btn:active:not(:disabled) {
  transform: translateY(1px);
  background: rgba(255,255,255,.06);
}
.pg-btn.pg-active {
  border-color: rgba(255,255,255,.22);
  color: #fff;
  background: rgba(255,255,255,.1);
}
.pg-btn:disabled {
  opacity: .2;
  cursor: not-allowed;
}
.pg-ellipsis {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 34px;
  color: rgba(255,255,255,.2);
  font: 600 13px Inter;
  user-select: none;
}

.search-composer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  min-height: 64px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(18,18,18,.96), rgba(8,8,8,.96));
  box-shadow: 0 16px 48px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.035);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.search-composer:focus-within {
  border-color: rgba(96,145,255,.5);
  box-shadow: 0 16px 48px rgba(0,0,0,.3), 0 0 0 4px rgba(59,130,246,.08), inset 0 1px 0 rgba(255,255,255,.04);
}
.composer-module {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 999px;
  background: rgba(255,255,255,.055);
  color: #bdbdbd;
  font: 700 10px 'JetBrains Mono', monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.search-composer input {
  flex: 1;
  width: 0;
  min-width: 0;
  padding: 10px 2px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #f5f5f5;
  font: 500 15px Inter, sans-serif;
}
.search-composer input::placeholder { color: #777; opacity: 1; }
.composer-submit {
  display: inline-grid;
  place-items: center;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(145deg, #5c91ff, #3169e8);
  color: #fff;
  box-shadow: 0 5px 18px rgba(59,130,246,.26);
  transition: transform .2s, box-shadow .2s, filter .2s;
}
.composer-submit:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 7px 22px rgba(59,130,246,.36);
}
.composer-submit:active { transform: translateY(0) scale(.96); }
.composer-submit:disabled { opacity: .55; cursor: wait; transform: none; }
.composer-submit.is-loading { opacity: 1 !important; }
.composer-submit.is-loading svg { display: none; }
.composer-submit.is-loading::after {
  content: '';
  width: 19px;
  height: 19px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.search-progress-panel {
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(17,17,17,.94), rgba(8,8,8,.94));
  box-shadow: 0 10px 30px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.025);
}
.search-progress-heading {
  margin-bottom: 9px;
  color: rgba(255,255,255,.58);
  font: 700 10px 'JetBrains Mono', monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.search-progress-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 6px 12px;
}
.search-progress-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.045);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
  font-size: 11px;
}
.search-progress-source {
  overflow: hidden;
  color: rgba(255,255,255,.78);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-progress-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  color: rgba(255,255,255,.34);
  font-size: 10px;
}
.search-progress-status::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  content: '';
}
.search-progress-status.querying { color: #93c5fd; }
.search-progress-status.querying::before {
  box-shadow: 0 0 8px rgba(96,165,250,.7);
  animation: pulse-dot 1.1s ease-in-out infinite;
}
.search-progress-status.done { color: #86efac; }
.search-progress-status.error { color: #fca5a5; }
.search-progress-error {
  padding: 10px 12px;
  border: 1px solid rgba(248,113,113,.2);
  border-radius: 10px;
  color: #fca5a5;
  background: rgba(239,68,68,.05);
  font-size: 12px;
}

@media (max-width: 600px) {
  .sec { padding: 76px 0; }
  .wrap { width: min(100% - 32px, 1100px); }
  .mc-box { padding: 17px; }
  .mc-categories { grid-template-columns: 1fr; gap: 9px; }
  .mc-category { padding: 13px; }
  .mc-category .mc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search-composer { gap: 8px; min-height: 58px; border-radius: 21px; }
  .composer-module { min-height: 34px; padding: 0 10px; font-size: 9px; }
  .search-composer input { font-size: 16px; }
  .composer-submit { flex-basis: 42px; width: 42px; height: 42px; }
  .results-toolbar { justify-content: flex-start; }
  .results-toolbar .btn { flex: 1 1 auto; padding-left: 10px; padding-right: 10px; }
  .results-pagination { gap: 7px; }
  .results-page-info { font-size: 10px; }
}