:root {
  --void:     #080c12;
  --base:     #23133a;
  --panel:    #191127;
  --panel2:   #23133a;
  --panel3:   #1f1232;
  --rim:      #3a1c63;
  --rim2:     #5e309d;
  --cyan:     #883CF0;
  --cyan2:    #883CF0;
  --cyan-dim: #1f12327a;
  --cyan-lt:  #1f1232;
  --mag:      #af62c8;
  --mag-dim:  #1f12327a;
  --mag-lt:   rgba(247,37,133,0.08);
  --amber:    #bf42f5;
  --amber-dim:#1f12327a;
  --amber-lt: rgba(255,190,11,0.08);
  --green:    #d76df9;
  --green-dim:#1f12327a;
  --green-lt: #66706e14;
  --blue:     #e399fa;
  --blue-lt:  rgba(76,201,240,0.08);
  --txt:      #b8cfe0;
  --txt2:     #c8d6e5;
  --txt3:     #d6d6d6;
  --txt4:     #d6d6d6;
  --white:    #e8f4ff;
  --glow-c:   0 0 20px #be52e50f;
  --glow-m:   0 0 20px #be52e50f;
  --glow-a:   0 0 20px #be52e50f;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

.secret-server-siem-integration-guide {
  background: #191127;
  color: var(--txt);
  font-size: 12.5px;
  line-height: 1.7;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  /* height: 100vh;
  overflow-y: auto; */
}

/* Animated scanline overlay */
.secret-server-siem-integration-guide::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,245,212,0.008) 3px,
    rgba(0,245,212,0.008) 4px
  );
  pointer-events: none; z-index: 9998;
  animation: scanPan 8s linear infinite;
}
@keyframes scanPan {
  0%  { background-position-y: 0; }
  100%{ background-position-y: 100vh; }
}

/* Moving dot-matrix grid */
.secret-server-siem-integration-guide::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(159, 0, 245, 0.07) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none; z-index: 0;
  animation: gridDrift 20s linear infinite;
}
@keyframes gridDrift {
  0%  { background-position: 0 0; }
  100%{ background-position: 28px 28px; }
}

/* ═══ LAYOUT ═══ */
.shell { display: flex; min-height: 100vh; position: relative; z-index: 1; }

/* ══════════════════════════════════
   SIDEBAR — SOC mission control panel
══════════════════════════════════ */
.sidebar {
  width: 272px; flex-shrink: 0;
  background: #180f26;
  border-right: 1px solid var(--rim);
  position: sticky; top: 0; height: 100vh;
  overflow-y: auto; display: flex; flex-direction: column;
}
.sidebar::-webkit-scrollbar { width: 3px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--cyan-dim); }

/* Status bar at top */
.sb-status {
  background: #23133a;
  border-bottom: 1px solid var(--rim);
  padding: 6px 16px;
  display: flex; align-items: center; justify-content: space-between;
}
.sb-status-left { display: flex; align-items: center; gap: 8px; }
.live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  animation: livePulse 1.5s ease-in-out infinite;
}
@keyframes livePulse {
  0%,100%{ opacity:1; transform:scale(1); }
  50%    { opacity:0.4; transform:scale(0.8); }
}
.sb-status-txt { font-size: 9px; color: var(--cyan2); }
.sb-status-right { font-size: 9px; color: var(--txt3); }

/* Brand */
.sb-brand { padding: 18px 16px 14px; border-bottom: 1px solid var(--rim); }
.sb-logo-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sb-icon {
  width: 38px; height: 38px; border-radius: 4px;
  background: linear-gradient(135deg, var(--cyan-dim), #684895);
  border: 1px solid var(--cyan-dim);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
  box-shadow: var(--glow-c);
}
.sb-name {
  font-weight: 700; font-size: 13px;
  color: var(--white); line-height: 1.25;
}
.sb-name span { color: var(--cyan); }
.sb-tagline {
  font-size: 9px; color: var(--txt3);
  line-height: 1.7;
}

/* Progress */
.sb-prog { padding: 12px 16px; border-bottom: 1px solid var(--rim); }
.sb-prog-hd { display: flex; justify-content: space-between; margin-bottom: 6px; }
.sb-prog-lbl { font-size: 9px; color: var(--txt3); }
.sb-prog-val { font-size: 9px; color: var(--cyan); font-weight: 700; }
.sb-prog-track {
  height: 2px; background: #282035; border-radius: 1px;
  overflow: hidden; position: relative;
}
.sb-prog-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--cyan), var(--mag));
  border-radius: 1px; transition: width 0.5s ease;
  box-shadow: 0 0 8px var(--cyan);
}

/* Nav */
.secret-server-siem-integration-guide nav { flex: 1; padding: 10px 0; }
.nav-group { margin-bottom: 2px; }
.nav-grp-lbl {
  font-size: 8.5px;
  color: var(--txt4); text-transform: uppercase;
  padding: 8px 16px 4px; font-weight: 700;
  display: flex; align-items: center; gap: 8px;
}
.nav-grp-lbl::after { content: ''; flex: 1; height: 1px; background: var(--rim); }

.nav-a {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 16px; color: var(--txt2);
  font-size: 11px; text-decoration: none;
  border-left: 2px solid transparent;
  transition: all 0.15s; cursor: pointer;
}
.nav-a:hover { color: var(--txt); background: #23133a9f; }
.nav-a.active {
  color: var(--cyan);
  border-left-color: var(--cyan);
  background: #23133a;
}
.nav-a .ni { font-size: 9px; color: var(--txt4); min-width: 18px; text-align: right; flex-shrink: 0; }
.nav-a.active .ni { color: var(--cyan2); }

/* Sidebar event counter */
.sb-events {
  padding: 12px 16px;
  border-top: 1px solid var(--rim);
}
.evt-counter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.evt-counter {
  background: #23133a; border: 1px solid var(--rim);
  border-radius: 3px; padding: 8px 10px;
}
.ec-val {
  font-weight: 700; font-size: 18px;
  color: var(--white); line-height: 1;
  margin-bottom: 2px;
}
.ec-lbl { font-size: 8.5px; color: var(--txt3); line-height: 1.3; }
.ec-val.c { color: var(--cyan); }
.ec-val.m { color: var(--mag); }
.ec-val.a { color: var(--amber); }
.ec-val.g { color: var(--green); }

/* ══════════════════════════════════
   MAIN
══════════════════════════════════ */
.main { flex: 1; height: 100vh;
  overflow-y: auto;}

/* ═══ HERO ═══ */
.hero {
  background: var(--base);
  border-bottom: 1px solid var(--rim);
  position: relative; overflow: hidden;
  padding: 0;
}

/* Animated radar sweep effect */
.hero-radar {
  position: absolute; right: -60px; top: -60px;
  width: 320px; height: 320px;
  border-radius: 50%;
  border: 1px solid rgba(180, 0, 245, 0.137);
  pointer-events: none;
}
.hero-radar::before {
  content: '';
  position: absolute; inset: 20px;
  border-radius: 50%;
  border: 1px solid rgba(245, 0, 237, 0.05);
}
.hero-radar::after {
  content: '';
  position: absolute; inset: 60px;
  border-radius: 50%;
  border: 1px solid rgba(245, 0, 200, 0.04);
}
.radar-sweep {
  position: absolute; inset: 0;
  background: conic-gradient(from 0deg, transparent 70%, rgba(216, 0, 245, 0.08) 90%, transparent 100%);
  border-radius: 50%;
  animation: radarSpin 4s linear infinite;
}
@keyframes radarSpin { to { transform: rotate(360deg); } }

.hero-inner { padding: 40px 48px 0; }

.hero-breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 9px; color: var(--txt3);
  margin-bottom: 20px;
}
.hbc-sep { color: var(--cyan-dim); }
.hbc-cur { color: var(--cyan); }

.hero-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--cyan-lt);
  border: 1px solid #3a1c63;
  color: var(--cyan); font-size: 9px;
  padding: 4px 12px;
  margin-bottom: 16px; font-weight: 700;
  text-transform: uppercase;
}
.hero-badge::before {
  content: ''; width: 6px; height: 6px;
  border-radius: 50%; background: var(--cyan);
  box-shadow: 0 0 6px var(--cyan);
  animation: livePulse 1.5s ease-in-out infinite;
}

h1 {
  font-weight: 900; font-size: 42px;
  color: var(--white); line-height: 1.05;
  margin-bottom: 8px;
}
h1 .cx { color: var(--cyan); }
h1 .mx { color: var(--mag); }

.hero-sub {
  font-size: 13px; color: var(--txt2);
  margin-bottom: 20px; line-height: 1.7;
  max-width: 580px;
}

/* SIEM platform logos row */
.siem-row {
  display: flex; gap: 10px; margin-bottom: 28px; flex-wrap: wrap;
}
.siem-badge {
  display: flex; align-items: center; gap: 7px;
  background: var(--panel); border: 1px solid var(--rim);
  padding: 8px 14px; font-size: 11px;
  font-weight: 600;
  color: var(--txt); transition: all 0.2s;
}
.siem-badge:hover { border-color: var(--cyan); color: var(--cyan); box-shadow: var(--glow-c); }
.siem-ico { font-size: 16px; }

/* Hero stat strip */
.hero-stats {
  display: flex; border-top: 1px solid var(--rim);
}
.hs {
  flex: 1; padding: 16px 20px;
  border-right: 1px solid var(--rim);
  position: relative; overflow: hidden;
}
.hs:last-child { border-right: none; }
.hs::before {
  content: ''; position: absolute;
  bottom: 0; left: 0; right: 0; height: 2px;
}
.hs:nth-child(1)::before { background: var(--cyan); box-shadow: var(--glow-c); }
.hs:nth-child(2)::before { background: var(--mag); box-shadow: var(--glow-m); }
.hs:nth-child(3)::before { background: var(--amber); box-shadow: var(--glow-a); }
.hs:nth-child(4)::before { background: var(--green); }
.hs:nth-child(5)::before { background: var(--blue); }

.hs-val {
  font-weight: 900; font-size: 24px;
  color: var(--white); line-height: 1;
  margin-bottom: 4px;
}
.hs-lbl { font-size: 9px; color: var(--txt3); text-transform: uppercase; }

/* ═══ CONTENT SECTIONS ═══ */
.sec {
  padding: 40px 48px;
  border-bottom: 1px solid var(--rim);
  background: var(--base);
  animation: fadeUp 0.4s ease both;
  opacity: 0;
}
.sec:nth-child(odd) { background: var(--base); }
.sec:nth-child(even) { background: var(--panel); }

@keyframes fadeUp {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}
.sec:nth-child(n+1) { animation-delay: calc((n - 1) * 0.05s); }

.sec-hd { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 24px; }
.sec-num-badge {
  font-weight: 900; font-size: 10px;
  color: var(--cyan); background: var(--cyan-lt);
  border: 1px solid #3a1c63;
  padding: 3px 9px;
  flex-shrink: 0; margin-top: 6px;
}

.sec-module {
  font-size: 9px; font-weight: 700;
  color: var(--mag); text-transform: uppercase;
  margin-bottom: 3px;
}
h2 {
  font-weight: 700; font-size: 22px;
  color: var(--white); line-height: 1.2;
}
h3 {
  font-weight: 600; font-size: 15px;
  color: var(--txt); margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
h3::before { content: '//'; color: var(--cyan-dim); font-size: 11px; }

p { color: var(--txt2); font-size: 12.5px; line-height: 1.85; margin-bottom: 14px; }
p strong { color: var(--txt); font-weight: 600; }

code {
  font-size: 11.5px;
  background: var(--panel2); border: 1px solid var(--rim);
  color: var(--cyan); padding: 1px 6px; border-radius: 2px;
}

/* ═══ EVENT TYPE CARDS ═══ */
.evt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0; }
.evt-card {
  background: var(--panel2);
  border: 1px solid var(--rim);
  border-radius: 3px; padding: 16px;
  position: relative; overflow: hidden;
  cursor: pointer; transition: all 0.2s;
}
.evt-card::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
}
.evt-card.crit::before { background: var(--mag); }
.evt-card.warn::before { background: var(--amber); }
.evt-card.info::before { background: var(--cyan); }
.evt-card.ok::before   { background: var(--green); }

.evt-card:hover {
  border-color: var(--rim2);
  transform: translateY(-2px);
}
.evt-card.crit:hover { border-color: var(--mag); box-shadow: var(--glow-m); }
.evt-card.warn:hover { border-color: var(--amber); box-shadow: var(--glow-a); }
.evt-card.info:hover { border-color: var(--cyan); box-shadow: var(--glow-c); }
.evt-card.ok:hover   { border-color: var(--green); }

.evt-card-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.evt-severity {
  font-size: 8.5px; font-weight: 700;
  padding: 2px 7px; border: 1px solid;
  text-transform: uppercase;
}
.evt-severity.crit { color: var(--mag);   border-color: var(--mag-dim);   background: var(--mag-lt); }
.evt-severity.warn { color: var(--amber); border-color: var(--amber-dim); background: var(--amber-lt); }
.evt-severity.info { color: var(--cyan);  border-color: var(--cyan-dim);  background: var(--cyan-lt); }
.evt-severity.ok   { color: var(--green); border-color: var(--green-dim); background: var(--green-lt); }

.evt-name {
  font-weight: 700; font-size: 13px;
  color: var(--white); margin-bottom: 4px;
}
.evt-code {
  font-size: 10px; color: var(--txt3);
  margin-bottom: 8px;
}
.evt-desc { font-size: 11.5px; color: var(--txt2); line-height: 1.65; }
.evt-payload-btn {
  margin-top: 10px;
  font-size: 10px; color: var(--txt3);
  background: none; border: 1px solid var(--rim);
  padding: 3px 10px; cursor: pointer; transition: all 0.15s;
}
.evt-payload-btn:hover { color: var(--cyan); border-color: var(--cyan-dim); }

/* Live ticker indicator */
.evt-live {
  width: 6px; height: 6px; border-radius: 50%;
  flex-shrink: 0;
}
.evt-live.crit { background: var(--mag); box-shadow: 0 0 6px var(--mag); animation: livePulse 1s infinite; }
.evt-live.warn { background: var(--amber); box-shadow: 0 0 6px var(--amber); animation: livePulse 1.5s infinite; }
.evt-live.info { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); animation: livePulse 2s infinite; }
.evt-live.ok   { background: var(--green); }

/* ═══ CODE BLOCKS ═══ */
.cblock {
  background: #1f1232;
  border: 1px solid var(--rim);
  border-left: 3px solid var(--cyan);
  margin: 16px 0;
  overflow: hidden;
  box-shadow: inset 0 0 40px #be52e50f;
}
.cblock.mag { border-left-color: var(--mag); }
.cblock.amber { border-left-color: var(--amber); }
.cblock.green { border-left-color: var(--green); }

.cb-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 14px; background: #883cf050;
  border-bottom: 1px solid var(--rim);
}
.cb-meta { display: flex; align-items: center; gap: 8px; }
.cb-chip {
  font-size: 8.5px; font-weight: 700;
  padding: 2px 7px; 
  text-transform: uppercase;
}
.cb-chip.c { background: var(--cyan-dim); color: var(--cyan); }
.cb-chip.m { background: var(--mag-dim);  color: var(--mag); }
.cb-chip.a { background: var(--amber-dim);color: var(--amber); }
.cb-chip.g { background: var(--green-dim);color: var(--green); }
.cb-chip.b { background: rgba(158, 76, 240, 0.15); color: var(--blue); }

.cb-file { font-size: 10px; color: var(--txt3); }
.cb-copy {
  font-size: 10px;
  color: var(--txt3); background: none;
  border: 1px solid var(--rim); padding: 2px 10px;
  cursor: pointer; transition: all 0.15s;
}
.cb-copy:hover { color: var(--cyan); border-color: var(--cyan-dim); }
.cb-copy.ok    { color: var(--green); border-color: var(--green-dim); }

pre {
  padding: 18px 16px; overflow-x: auto;
  font-size: 12px; line-height: 1.65;
  color: rgba(255,255,255,0.65);
}
pre::-webkit-scrollbar { height: 3px; }
pre::-webkit-scrollbar-thumb { background: var(--rim2); }

.kw  { color: #c792ea; }
.str { color: #c3e88d; }
.num { color: var(--amber); }
.cmt { color: #384d61; font-style: italic; }
.key { color: var(--cyan); }
.val { color: var(--green); }
.op  { color: #80d9ff; }
.mg  { color: var(--mag); }
.tk  { color: var(--blue); }

/* ═══ CALLOUTS ═══ */
.callout {
  display: flex; gap: 12px; padding: 13px 15px;
  margin: 14px 0; border-left: 3px solid;
  border-radius: 0 3px 3px 0;
}
.callout-ico { font-size: 15px; flex-shrink: 0; margin-top: 2px; }
.callout p { margin: 0; font-size: 12px; line-height: 1.75; }
.callout-title {
  font-size: 9px; font-weight: 700; 
  text-transform: uppercase; margin-bottom: 4px;
}
.callout.warn  { background: var(--mag-lt);   border-color: var(--mag); }
.callout.warn  .callout-title { color: var(--mag); }
.callout.info  { background: var(--cyan-lt);  border-color: var(--cyan); }
.callout.info  .callout-title { color: var(--cyan); }
.callout.tip   { background: var(--green-lt); border-color: var(--green); }
.callout.tip   .callout-title { color: var(--green); }
.callout.note  { background: var(--amber-lt); border-color: var(--amber); }
.callout.note  .callout-title { color: var(--amber); }

/* ═══ TABS (SIEM platform switcher) ═══ */
.tab-bar {
  display: flex; gap: 0; margin-bottom: 0;
  border-bottom: 1px solid var(--rim);
  background: var(--void); overflow-x: auto;
}
.tab-btn {
  font-size: 12px; font-weight: 600;
  padding: 10px 20px; cursor: pointer;
  color: var(--txt3); background: none;
  border: none; border-bottom: 2px solid transparent;
  margin-bottom: -1px; white-space: nowrap;
  transition: all 0.15s;
  display: flex; align-items: center; gap: 7px;
}
.tab-btn:hover { color: var(--txt); background: #3a1c632b; }
.tab-btn.on { color: var(--cyan); border-bottom-color: var(--cyan); }
.tab-btn.splunk.on { color: #ff6b35; border-bottom-color: #ff6b35; }
.tab-btn.sentinel.on { color: #4cc9f0; border-bottom-color: #4cc9f0; }
.tab-btn.qradar.on  { color: #da1e28; border-bottom-color: #da1e28; }

.tab-content { background: var(--panel2); border: 1px solid var(--rim); border-top: none; }
.tab-pane { display: none; padding: 24px; }
.tab-pane.on { display: block; }

/* Platform header inside tab */
.platform-hd {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 20px; padding-bottom: 16px;
  border-bottom: 1px solid var(--rim);
}
.platform-logo {
  width: 44px; height: 44px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
  border: 1px solid var(--rim);
}
.platform-logo.splunk   { background: rgba(255,107,53,0.1); border-color: rgba(255,107,53,0.3); }
.platform-logo.sentinel { background: rgba(76,201,240,0.1); border-color: rgba(76,201,240,0.3); }
.platform-logo.qradar   { background: rgba(218,30,40,0.1);  border-color: rgba(218,30,40,0.3); }

.platform-name {
  font-weight: 700; font-size: 15px; color: var(--white);
}
.platform-desc { font-size: 11px; color: var(--txt3); margin-top: 2px; }

/* ═══ AUTH METHOD CARDS ═══ */
.auth-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin: 16px 0; }
.auth-card {
  background: var(--panel2); border: 1px solid var(--rim);
  padding: 16px; transition: all 0.2s;
  border-top: 2px solid transparent;
  cursor: pointer;
}
.auth-card:hover { border-top-color: var(--cyan); box-shadow: var(--glow-c); }
.auth-card.recommended { border-top-color: var(--cyan); }
.auth-ico { font-size: 22px; margin-bottom: 8px; }
.auth-name {
  font-weight: 600; font-size: 13px;
  color: var(--white); margin-bottom: 4px;
}
.auth-sub { font-size: 11px; color: var(--txt3); line-height: 1.65; }
.auth-rec {
  display: inline-block; margin-top: 8px;
  font-size: 8.5px; font-weight: 700;
  color: var(--cyan); background: var(--cyan-lt);
  border: 1px solid rgba(0,245,212,0.2);
  padding: 1px 7px;
}

/* ═══ STEPS ═══ */
.steps { display: flex; flex-direction: column; }
.step { display: flex; gap: 16px; cursor: pointer; }
.step-spine { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.step-badge {
  width: 30px; height: 30px; border-radius: 3px;
  background: var(--panel2); border: 1px solid var(--rim2);
  display: flex; align-items: center; justify-content: center;
   font-weight: 700; font-size: 12px;
  color: var(--txt3); transition: all 0.2s; flex-shrink: 0;
}
.step.done   .step-badge { background: var(--green-dim); border-color: var(--green); color: var(--green); }
.step.active .step-badge { background: var(--cyan-lt); border-color: var(--cyan); color: var(--cyan); }
.step-vline { flex: 1; width: 1px; background: var(--rim); min-height: 14px; margin: 3px 0; }
.step:last-child .step-vline { display: none; }
.step-body { padding-bottom: 22px; flex: 1; }
.step-title {
  font-weight: 600; font-size: 14px;
  color: var(--txt); margin: 5px 0 6px;
}
.step.done .step-title { color: var(--green); }
.step-desc { font-size: 12px; color: var(--txt2); line-height: 1.75; }

/* ═══ CHECKLISTS ═══ */
.cklist { list-style: none; display: flex; flex-direction: column; gap: 5px; margin: 12px 0; }
.ckitem {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 13px; border: 1px solid var(--rim);
  background: var(--panel2);
  cursor: pointer; transition: all 0.15s;
  font-size: 12px; color: var(--txt2);
}
.ckitem:hover { border-color: var(--rim2); background: var(--panel3); color: var(--txt); }
.ckitem.checked { border-color: var(--green-dim); background: var(--green-lt); color: var(--txt); }
.ckbox {
  width: 14px; height: 14px; border: 1px solid var(--rim2);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; flex-shrink: 0; margin-top: 2px;
  transition: all 0.15s;
  color: transparent;
}
.ckitem.checked .ckbox { background: var(--green-dim); border-color: var(--green); color: var(--green); }

/* ═══ QUIZ ═══ */
.qcard {
  background: #23133a; border: 1px solid var(--rim);
  margin: 14px 0; overflow: hidden;
}
.qcard-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; background: #23133a;
  border-bottom: 1px solid var(--rim);
}
.q-num { font-size: 9px; color: var(--cyan); font-weight: 700; }
.q-theme { font-size: 9px; color: var(--txt3); }
.qcard-body { padding: 18px 18px 16px; }
.q-txt {
  font-size: 14px; color: var(--white);
  margin-bottom: 14px; line-height: 1.55; font-weight: 400;
}
.q-opts { display: flex; flex-direction: column; gap: 6px; }
.qopt {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px; border: 1px solid var(--rim);
  cursor: pointer; transition: all 0.15s;
  font-size: 12px; color: var(--txt2); background: var(--panel);
}
.qopt:hover { border-color: var(--rim2); color: var(--txt); background: var(--panel2); }
.qopt.correct { border-color: #77b255; background: #77b25520; color: #60c090; }
.qopt.wrong   { border-color: #dc143c;   background: #dc143c2b;   color: #ff7a90; }
.qopt.disabled { pointer-events: none; }
.qltr { font-weight: 700; font-size: 11px;
  width: 20px; height: 20px; border: 1px solid var(--rim2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; background: var(--void); color: var(--txt3);
  margin-top: 1px;
}
.qfb {
  margin-top: 12px; padding: 10px 14px;
  font-size: 12px; line-height: 1.65;
  display: none; border-left: 3px solid;
}
.qfb.show { display: block; }
.qfb.ok  { background: #77b25520; color: #60c090; border-color: #77b255; }
.qfb.err { background: #dc143c2b;   color: #ff7a90;   border-color: #dc143c; }

/* ═══ PAYLOAD MODAL ═══ */
.modal-overlay {
  position: absolute; inset: 0; background: rgba(8,12,18,0.92);
  z-index: 1; display: flex; align-items: center; justify-content: center;
  padding: 24px; opacity: 0; pointer-events: none;
  transition: opacity 0.2s; backdrop-filter: blur(4px);
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal {
  background: var(--panel);
  border: 1px solid var(--rim2);
  border-top: 2px solid var(--cyan);
  max-width: 680px; width: 100%;
  max-height: 80vh; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--glow-c), 0 32px 64px #be52e50f;
  transform: translateY(10px);
  transition: transform 0.2s;
}
.modal-overlay.open .modal { transform: translateY(0); }
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; border-bottom: 1px solid var(--rim);
  background: var(--void); flex-shrink: 0;
}
.modal-title {
  font-weight: 700; font-size: 13px; color: var(--cyan);
  display: flex; align-items: center; gap: 8px;
}
.modal-close {
  font-size: 16px; color: var(--txt3);
  background: none; border: none; cursor: pointer;
  transition: color 0.15s; padding: 2px 6px;
}
.modal-close:hover { color: var(--mag); }
.modal-body { overflow-y: auto; flex: 1; }
.modal-body pre { font-size: 12px; padding: 20px; }
.modal-body::-webkit-scrollbar { width: 4px; }
.modal-body::-webkit-scrollbar-thumb { background: var(--rim2); }

/* ═══ FOOTER ═══ */
.footer-bar {
  background: #23133a;
  border-top: 1px solid var(--rim);
  padding: 24px 48px;
  display: flex; align-items: center; justify-content: space-between;
}
.footer-left { font-size: 10px; color: var(--txt3); line-height: 1.8; }
.complete-btn { font-weight: 700;
  font-size: 12px;
  background: transparent; color: var(--cyan);
  border: 1px solid var(--cyan);
  padding: 10px 24px; cursor: pointer;
  transition: all 0.2s; text-transform: uppercase;
}
.complete-btn:hover {
  background: #883cf0e0; color: #fff;
  box-shadow: var(--glow-c);
}
.complete-btn.done { background: var(--green); color: var(--void); border-color: var(--green); }

/* ═══ INLINE BADGES ═══ */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9px; font-weight: 700;
  padding: 2px 7px; border: 1px solid; text-transform: uppercase;
}
.badge.c { background: var(--cyan-lt);  color: var(--cyan);  border-color: var(--cyan-dim); }
.badge.m { background: var(--mag-lt);   color: var(--mag);   border-color: var(--mag-dim); }
.badge.a { background: var(--amber-lt); color: var(--amber); border-color: var(--amber-dim); }
.badge.g { background: var(--green-lt); color: var(--green); border-color: var(--green-dim); }

/* ═══ FIELD TABLE ═══ */
.field-table { border: 1px solid var(--rim); overflow: hidden; margin: 16px 0; }
.ft-row {
  display: grid; grid-template-columns: 180px 100px 1fr;
  border-bottom: 1px solid var(--rim);
}
.ft-row:last-child { border-bottom: none; }
.ft-row.hdr { background: #883cf050; }
.ft-cell { padding: 9px 14px; font-size: 11.5px;  }
.ft-row.hdr .ft-cell {
  font-size: 9px; color: var(--txt3);
  text-transform: uppercase; font-weight: 700;
}
.ft-row:not(.hdr):hover { background: #1f1232; }
.ft-cell.key-col { color: var(--cyan); }
.ft-cell.type-col { color: var(--amber); }
.ft-cell.desc-col { color: var(--txt2); }

/* ═══ RESPONSIVE ═══ */
@media(max-width:920px){
  .sidebar{width:220px}
  .hero-inner,.sec{padding:28px 24px}
  h1{font-size:32px}
  .evt-grid{grid-template-columns:1fr}
  .auth-grid{grid-template-columns:1fr}
  .hero-stats{flex-wrap:wrap}
  .hs{min-width:33%}
}
@media(max-width:660px){
  .shell{flex-direction:column}
  .sidebar{width:100%;height:auto;position:relative}
  .footer-bar{flex-direction:column;gap:14px;align-items:flex-start}
}


  /* SCROLLBAR */
  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: #873cf015; }
  ::-webkit-scrollbar-thumb { background: #873cf015; border-radius: 3px; }