/* Page-specific styles for security.html.
   Extracted from former inline styles to avoid collisions/overrides. */

/* ========================================
   CODE SYNTAX HIGHLIGHTING
   ======================================== */

/* Keywords (const, let, if, return, function, async, await, etc.) */
.security-page code .kw {
  color: #ff79c6;
  font-weight: 600;
}

/* Strings */
.security-page code .str {
  color: #50fa7b;
}

/* Comments */
.security-page code .cmt {
  color: #6272a4;
  font-style: italic;
}

/* Numbers */
.security-page code .num {
  color: #bd93f9;
}

/* Methods/Properties */
.security-page code .prop {
  color: #8be9fd;
}

/* Function names */
.security-page code .fn {
  color: #ffb86c;
  font-weight: 600;
}

/* Operators */
.security-page code .op {
  color: #ff79c6;
}

/* Variables / identifiers */
.security-page code .var {
  color: #f8f8f2;
}

/* Built-in objects (console, process, require, etc.) */
.security-page code .built {
  color: #8be9fd;
  font-style: italic;
}

/* Light mode syntax highlighting */
[data-theme="light"] .security-page code .kw {
  color: #d63384;
}

[data-theme="light"] .security-page code .str {
  color: #198754;
}

[data-theme="light"] .security-page code .cmt {
  color: #6c757d;
}

[data-theme="light"] .security-page code .num {
  color: #6f42c1;
}

[data-theme="light"] .security-page code .prop {
  color: #0d6efd;
}

[data-theme="light"] .security-page code .fn {
  color: #fd7e14;
}

[data-theme="light"] .security-page code .op {
  color: #d63384;
}

[data-theme="light"] .security-page code .var {
  color: #212529;
}

[data-theme="light"] .security-page code .built {
  color: #0d6efd;
}

/* ========================================
   MODULE DOTS
   ======================================== */

.security-page .module-dot--overview { background: #7aa2ff; }
.security-page .module-dot--refresher { background: #fbbf24; }
.security-page .module-dot--browser { background: #3b82f6; }
.security-page .module-dot--node { background: #22c55e; }
.security-page .module-dot--security { background: #ef4444; }

.security-page .security-jwt-logo { display: block; }

.security-page .security-h3-with-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.security-page .security-h3-with-logo .security-jwt-logo {
  display: inline-block;
  flex: 0 0 auto;
}

/* Generic helpers (scoped to this page) */
.security-page .security-pane {
  background: var(--card);
  padding: 24px;
  border-radius: 12px;
  border: 1px solid var(--border);
}
.security-page .security-pane--mb-24 { margin-bottom: 24px; }
.security-page .security-pane--mt-24 { margin-top: 24px; }

.security-page .security-p {
  font-size: 16px;
  line-height: 1.8;
  margin: 0;
}
.security-page .security-p--mb-16 { margin-bottom: 16px; }

.security-page .jwt-decoder-label {
  display: block;
  font-weight: 700;
  margin: 10px 0 6px;
}

.security-page .jwt-decoder-input {
  width: 100%;
  resize: vertical;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  line-height: 1.6;
}

.security-page .jwt-decoder-secret {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  line-height: 1.5;
}

.security-page .jwt-decoder-json {
  width: 100%;
  resize: vertical;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  line-height: 1.55;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
}

.security-page .jwt-decoder-note {
  margin: 10px 0 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
}

.security-page .jwt-decoder-error {
  margin-top: 10px;
  font-weight: 600;
}

.security-page .jwt-decoder-sig {
  margin-top: 8px;
  font-weight: 650;
  color: var(--text);
}

.security-page .jwt-decoder-output {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.security-page .jwt-decoder-output-title {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 800;
}

@media (min-width: 900px) {
  .security-page .jwt-decoder-output {
    grid-template-columns: 1fr 1fr;
  }
}

/* HTTP Stateless section */
.security-page .http-stateless-warning {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.12) 0%, rgba(245, 158, 11, 0.06) 100%);
  border-left: 4px solid var(--yellow);
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 24px;
}

[data-theme="light"] .security-page .http-stateless-warning {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-left-color: #f59e0b;
}

.security-page .http-stateless-warning-layout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.security-page .http-stateless-warning-icon {
  font-size: 32px;
  line-height: 1;
}

.security-page .http-stateless-warning-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
}

[data-theme="light"] .security-page .http-stateless-warning-text {
  color: #78350f;
}

/* In dark theme, let the base .info-box styles handle background.
   In light theme, keep the original light gradient look from the former inline styles. */
[data-theme="light"] .security-page .http-stateless-info {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  border-left: 4px solid #3b82f6;
}

.security-page .http-stateless-info .info-icon { font-size: 24px; }

.security-page .http-stateless-list {
  margin: 12px 0 0 0;
  padding-left: 20px;
}

.security-page .http-stateless-list > li {
  margin-bottom: 12px;
  line-height: 1.7;
}

.security-page .http-stateless-list > li:last-child { margin-bottom: 0; }

.security-page .http-stateless-answer {
  font-size: 16px;
  line-height: 1.8;
  margin: 0;
  padding: 16px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.14) 0%, rgba(16, 185, 129, 0.08) 100%);
  border-radius: 8px;
  border-left: 4px solid var(--green);
}

[data-theme="light"] .security-page .http-stateless-answer {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  border-left-color: #10b981;
}

/* Auth overview: “When to use what?” */
.security-page .auth-when-box {
  /* Keep spacing from the old inline styles, but avoid forcing a light-only palette in dark mode. */
  padding: 24px;
  border-radius: 12px;
}

[data-theme="light"] .security-page .auth-when-box {
  background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
  border-left: 4px solid #0284c7;
}

.security-page .auth-when-header { margin-bottom: 20px; }
.security-page .auth-when-header .info-icon { font-size: 28px; }
.security-page .auth-when-header .info-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

[data-theme="light"] .security-page .auth-when-header .info-title {
  color: #0c4a6e;
}

.security-page .auth-when-grid {
  display: grid;
  gap: 20px;
}

.security-page .auth-when-card {
  background: var(--card);
  padding: 20px;
  border-radius: 8px;
  border-left: 3px solid transparent;
  border: 1px solid var(--border);
}

.security-page .auth-when-card--sessions {
  border-left-color: var(--accent);
}

.security-page .auth-when-card--jwt { border-left-color: var(--accent-2); }
.security-page .auth-when-card--providers { border-left-color: var(--green); }

[data-theme="light"] .security-page .auth-when-card--sessions {
  background: rgb(242, 229, 229);
  border-left-color: #3b82f6;
}

[data-theme="light"] .security-page .auth-when-card--jwt {
  border-left-color: #8b5cf6;
}

[data-theme="light"] .security-page .auth-when-card--providers {
  border-left-color: #10b981;
}

.security-page .auth-when-card-title {
  font-weight: 700;
  font-size: 15px;
  margin: 0 0 12px 0;
}

.security-page .auth-when-card-title--sessions { color: var(--accent); }
.security-page .auth-when-card-title--jwt { color: var(--accent-2); }
.security-page .auth-when-card-title--providers { color: var(--green); }

[data-theme="light"] .security-page .auth-when-card-title--sessions { color: #1e40af; }
[data-theme="light"] .security-page .auth-when-card-title--jwt { color: #6d28d9; }
[data-theme="light"] .security-page .auth-when-card-title--providers { color: #047857; }

.security-page .auth-when-card-text {
  margin: 0 0 12px 0;
  line-height: 1.7;
  font-size: 14px;
}

.security-page .auth-when-card-text:last-child { margin-bottom: 0; }

.security-page .auth-when-pros { color: #059669; }
.security-page .auth-when-cons { color: #dc2626; }

/* Prefer theme vars in dark mode (and keep the light palette in light mode) */
[data-theme="dark"] .security-page .auth-when-pros { color: var(--green); }
[data-theme="dark"] .security-page .auth-when-cons { color: var(--red); }

.security-page .auth-when-protip {
  background: rgba(251, 191, 36, 0.12);
  padding: 16px;
  border-radius: 8px;
  margin-top: 20px;
  border-left: 3px solid var(--yellow);
}

.security-page .auth-when-protip-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}

[data-theme="light"] .security-page .auth-when-protip {
  background: #fef3c7;
  border-left-color: #f59e0b;
}

[data-theme="light"] .security-page .auth-when-protip-text {
  color: #78350f;
}

/* Sessions: examples and callouts */
.security-page .sessions-example-box {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.10) 0%, rgba(14, 165, 233, 0.04) 100%);
  padding: 32px;
  border-radius: 16px;
  margin-top: 32px;
  border: 2px solid rgba(14, 165, 233, 0.45);
}

[data-theme="light"] .security-page .sessions-example-box {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-color: #0ea5e9;
}

.security-page .sessions-example-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px 0;
  font-size: 20px;
  color: var(--accent);
}

.security-page .sessions-example-title-icon { font-size: 32px; }

.security-page .sessions-example-intro {
  margin: 0 0 24px 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
}

.security-page .security-callout {
  padding: 16px;
  border-radius: 8px;
}

.security-page .security-callout--yellow {
  background: rgba(251, 191, 36, 0.12);
  border-left: 4px solid var(--yellow);
}

.security-page .security-callout--yellow.security-mb-24 { margin-bottom: 24px; }

.security-page .security-callout-text-yellow {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}

[data-theme="light"] .security-page .security-callout--yellow {
  background: #fef3c7;
  border-left-color: #f59e0b;
}

[data-theme="light"] .security-page .security-callout-text-yellow {
  color: #78350f;
}

.security-page .security-callout--red {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.08) 100%);
  border: 2px solid rgba(239, 68, 68, 0.4);
  border-left: 6px solid var(--red);
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.2);
  padding: 20px;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

.security-page .security-callout--red::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--red) 0%, rgba(239, 68, 68, 0.3) 100%);
  animation: warningPulse 2s ease-in-out infinite;
}

@keyframes warningPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.security-page .security-callout-text-red {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--text);
}

.security-page .security-callout-text-red strong {
  display: block;
  margin-bottom: 10px;
  font-size: 17px;
  font-weight: 700;
  color: var(--red);
  letter-spacing: -0.3px;
}

[data-theme="light"] .security-page .security-callout--red {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  border: 2px solid #ef4444;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
}

[data-theme="light"] .security-page .security-callout--red::before {
  background: linear-gradient(180deg, #dc2626 0%, rgba(220, 38, 38, 0.4) 100%);
}

[data-theme="light"] .security-page .security-callout-text-red {
  color: #450a0a;
}

[data-theme="light"] .security-page .security-callout-text-red strong {
  color: #991b1b;
}

.security-page pre.code.security-pre-elevated {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.security-page .security-mb-32 { margin-bottom: 32px; }
.security-page .security-mb-24 { margin-bottom: 24px; }

.security-page .security-callout--blue {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0.06) 100%);
  padding: 20px;
  border-radius: 12px;
  border-left: 4px solid var(--accent);
}

[data-theme="light"] .security-page .security-callout--blue {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  border-left-color: #3b82f6;
}

.security-page .security-callout-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.security-page .security-callout-emoji { font-size: 24px; }

.security-page .security-callout-title {
  font-size: 16px;
  color: var(--text);
}

.security-page .security-callout-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}

[data-theme="light"] .security-page .security-callout-title,
[data-theme="light"] .security-page .security-callout-desc {
  color: #1e40af;
}

.security-page .security-inline-code {
  background: var(--code-bg);
  padding: 2px 6px;
  border-radius: 4px;
}

.security-page .security-inline-code--red { color: var(--red); }
.security-page .security-inline-code--purple { color: var(--accent-2); }

.security-page .security-callout--green {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.14) 0%, rgba(16, 185, 129, 0.08) 100%);
  padding: 16px;
  border-radius: 8px;
  border-left: 4px solid var(--green);
}

[data-theme="light"] .security-page .security-callout--green {
  background: #f0fdf4;
  border-left-color: #10b981;
}

.security-page .security-callout-layout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.security-page .security-callout-check { font-size: 20px; line-height: 1; }

.security-page .sessions-benefits-title {
  color: var(--green);
  font-size: 15px;
  display: block;
  margin-bottom: 8px;
}

.security-page .sessions-benefits-list {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.8;
}

.security-page .security-inline-code--small {
  padding: 2px 4px;
  border-radius: 3px;
}

.security-page .sessions-how-box {
  background: var(--card);
  border-left: 4px solid var(--accent);
  border: 1px solid var(--border);
}

.security-page .sessions-how-box .info-icon { font-size: 28px; }
.security-page .sessions-how-box .info-title {
  font-weight: 700;
  font-size: 17px;
  color: var(--text);
}

[data-theme="light"] .security-page .sessions-how-box {
  background: white;
  border-left-color: #3b82f6;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: none;
}

[data-theme="light"] .security-page .sessions-how-box .info-title {
  color: #1e40af;
}

.security-page .sessions-how-steps {
  margin: 16px 0 0 20px;
  padding-left: 20px;
  line-height: 1.8;
}

.security-page .sessions-step {
  margin-bottom: 16px;
  padding: 12px;
  border-radius: 8px;
  border-left: 3px solid transparent;
}

.security-page .sessions-step:last-child { margin-bottom: 0; }

.security-page .sessions-step--blue {
  background: rgba(59, 130, 246, 0.10);
  border-left-color: var(--accent);
}

.security-page .sessions-step--green {
  background: rgba(34, 197, 94, 0.10);
  border-left-color: var(--green);
}

.security-page .sessions-step--yellow {
  background: rgba(251, 191, 36, 0.12);
  border-left-color: var(--yellow);
}

.security-page .sessions-step--purple {
  background: rgba(168, 85, 247, 0.10);
  border-left-color: var(--accent-2);
}

[data-theme="light"] .security-page .sessions-step--blue { background: #f0f9ff; border-left-color: #0ea5e9; }
[data-theme="light"] .security-page .sessions-step--green { background: #f0fdf4; border-left-color: #10b981; }
[data-theme="light"] .security-page .sessions-step--yellow { background: #fef3c7; border-left-color: #f59e0b; }
[data-theme="light"] .security-page .sessions-step--purple { background: #fae8ff; border-left-color: #a855f7; }

.security-page .sessions-step-strong {
  font-size: 15px;
}

.security-page .sessions-step-strong--blue { color: var(--accent); }
.security-page .sessions-step-strong--green { color: var(--green); }
.security-page .sessions-step-strong--yellow { color: var(--yellow); }
.security-page .sessions-step-strong--purple { color: var(--accent-2); }

[data-theme="light"] .security-page .sessions-step-strong--blue { color: #0c4a6e; }
[data-theme="light"] .security-page .sessions-step-strong--green { color: #065f46; }
[data-theme="light"] .security-page .sessions-step-strong--yellow { color: #78350f; }
[data-theme="light"] .security-page .sessions-step-strong--purple { color: #6b21a8; }

.security-page .sessions-step-span { color: var(--muted); }

[data-theme="light"] .security-page .sessions-step-span { color: #475569; }

/* Cookie attributes box */
.security-page .cookie-attrs-box {
  background: var(--card);
  border-radius: 12px;
  padding: 24px;
  margin-top: 24px;
  border: 1px solid rgba(14, 165, 233, 0.35);
}

.security-page .cookie-attrs-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.security-page .cookie-attrs-icon { font-size: 32px; }

.security-page .cookie-attrs-title {
  margin: 0;
  font-weight: 700;
  font-size: 18px;
  color: var(--text);
}

.security-page .cookie-attrs-grid {
  display: grid;
  gap: 16px;
}

.security-page .cookie-attr {
  padding: 16px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.10) 0%, rgba(59, 130, 246, 0.05) 100%);
  border-radius: 8px;
  border-left: 4px solid var(--accent);
}

.security-page .cookie-attr-code {
  background: var(--code-bg);
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 700;
  color: var(--accent);
  font-size: 14px;
}

.security-page .cookie-attr-desc {
  color: var(--text);
  margin-left: 8px;
}

.security-page .cookie-attr-inline {
  background: var(--code-bg);
  padding: 2px 4px;
  border-radius: 3px;
}

[data-theme="light"] .security-page .cookie-attrs-box {
  background: white;
  border: 2px solid #0ea5e9;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2);
}

[data-theme="light"] .security-page .cookie-attrs-title { color: #0c4a6e; }

[data-theme="light"] .security-page .cookie-attr {
  background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
  border-left-color: #0ea5e9;
}

[data-theme="light"] .security-page .cookie-attr-code {
  background: white;
  color: #0284c7;
}

[data-theme="light"] .security-page .cookie-attr-desc { color: #0c4a6e; }

[data-theme="light"] .security-page .cookie-attr-inline { background: white; }

/* Session hijacking demo test box */
.security-page .hijack-demo-box {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(37, 99, 235, 0.06) 100%);
  border: 2px solid rgba(59, 130, 246, 0.35);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.18);
}

.security-page .hijack-demo-box .info-header {
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.05) 100%);
  margin: -20px -20px 16px -20px;
  padding: 16px 20px;
  border-radius: 10px 10px 0 0;
  border-bottom: 2px solid rgba(59, 130, 246, 0.25);
}

.security-page .hijack-demo-box .info-icon {
  font-size: 28px;
}

.security-page .hijack-demo-box .info-title {
  color: var(--accent);
  font-size: 17px;
  font-weight: 700;
}

.security-page .hijack-demo-box ol.info-text {
  counter-reset: demo-step;
  list-style: none;
  padding-left: 0;
  margin-top: 16px;
}

.security-page .hijack-demo-box ol.info-text > li {
  counter-increment: demo-step;
  position: relative;
  padding-left: 52px;
  margin-bottom: 18px;
  line-height: 1.8;
}

.security-page .hijack-demo-box ol.info-text > li::before {
  content: counter(demo-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--accent) 0%, rgba(59, 130, 246, 0.8) 100%);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 3px 10px rgba(59, 130, 246, 0.4);
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.security-page .hijack-demo-box ol.info-text > li:last-child {
  margin-bottom: 16px;
}

.security-page .hijack-demo-box ol.info-text > li strong {
  color: var(--accent);
  font-weight: 700;
}

.security-page .hijack-demo-box > p.info-text:last-child {
  margin-top: 16px;
  padding: 14px;
  background: rgba(59, 130, 246, 0.08);
  border-radius: 8px;
  border-left: 3px solid var(--accent);
  font-style: italic;
  color: var(--text);
}

[data-theme="light"] .security-page .hijack-demo-box {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  border: 2px solid #3b82f6;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.3);
}

[data-theme="light"] .security-page .hijack-demo-box .info-header {
  background: linear-gradient(90deg, #bfdbfe 0%, #e0f2fe 100%);
  border-bottom-color: rgba(59, 130, 246, 0.4);
}

[data-theme="light"] .security-page .hijack-demo-box .info-title {
  color: #1e3a8a;
}

[data-theme="light"] .security-page .hijack-demo-box ol.info-text > li::before {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  box-shadow: 0 3px 10px rgba(59, 130, 246, 0.5);
}

[data-theme="light"] .security-page .hijack-demo-box ol.info-text > li strong {
  color: #1e40af;
}

[data-theme="light"] .security-page .hijack-demo-box > p.info-text:last-child {
  background: rgba(59, 130, 246, 0.12);
  border-left-color: #3b82f6;
  color: #1e3a8a;
}

/* Session techniques use cases box */
.security-page .sessions-usecases-box {
  border: 2px solid rgba(168, 85, 247, 0.3);
  box-shadow: 0 4px 16px rgba(168, 85, 247, 0.15);
}

.security-page .sessions-usecases-box .info-header {
  border-bottom: 1px solid rgba(168, 85, 247, 0.2);
  padding-bottom: 12px;
  margin-bottom: 16px;
}

.security-page .sessions-usecases-box .info-icon {
  font-size: 28px;
}

.security-page .sessions-usecases-box .info-title {
  color: var(--accent-2);
  font-size: 17px;
}

.security-page .sessions-usecases-box .info-text {
  line-height: 1.8;
}

.security-page .sessions-usecases-box ul.info-text {
  padding-left: 24px;
  margin-top: 16px;
}

.security-page .sessions-usecases-box ul.info-text > li {
  margin-bottom: 14px;
  padding-left: 8px;
  position: relative;
}

.security-page .sessions-usecases-box ul.info-text > li::marker {
  color: var(--accent-2);
  font-weight: bold;
}

.security-page .sessions-usecases-box ul.info-text > li:last-child {
  margin-bottom: 0;
}

.security-page .sessions-usecases-box ul.info-text > li strong {
  color: var(--accent-2);
  font-weight: 700;
}

[data-theme="light"] .security-page .sessions-usecases-box {
  background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
  border: 2px solid #a855f7;
  box-shadow: 0 4px 16px rgba(168, 85, 247, 0.25);
}

[data-theme="light"] .security-page .sessions-usecases-box .info-header {
  border-bottom-color: rgba(168, 85, 247, 0.3);
}

[data-theme="light"] .security-page .sessions-usecases-box .info-title {
  color: #6b21a8;
}

[data-theme="light"] .security-page .sessions-usecases-box ul.info-text > li::marker {
  color: #a855f7;
}

[data-theme="light"] .security-page .sessions-usecases-box ul.info-text > li strong {
  color: #6b21a8;
}

/* Detailed auth use case pane */
.security-page .auth-usecase-pane {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(5, 150, 105, 0.04) 100%);
  border: 2px solid rgba(16, 185, 129, 0.3);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.15);
}

.security-page .auth-usecase-pane h4 {
  color: var(--green);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(16, 185, 129, 0.2);
}

.security-page .auth-usecase-flow-box {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0.06) 100%);
  border: 2px solid rgba(59, 130, 246, 0.4);
  box-shadow: 0 2px 10px rgba(59, 130, 246, 0.2);
}

.security-page .auth-usecase-flow-box .info-header {
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.05) 100%);
  margin: -20px -20px 16px -20px;
  padding: 16px 20px;
  border-radius: 8px 8px 0 0;
  border-bottom: 2px solid rgba(59, 130, 246, 0.3);
}

.security-page .auth-usecase-flow-box .info-icon {
  font-size: 26px;
}

.security-page .auth-usecase-flow-box .info-title {
  color: var(--accent);
  font-size: 16px;
  font-weight: 700;
}

.security-page .auth-usecase-flow-box ol.info-text {
  counter-reset: step-counter;
  list-style: none;
  padding-left: 0;
}

.security-page .auth-usecase-flow-box ol.info-text > li {
  counter-increment: step-counter;
  position: relative;
  padding-left: 48px;
  margin-bottom: 16px;
  line-height: 1.8;
}

.security-page .auth-usecase-flow-box ol.info-text > li::before {
  content: counter(step-counter);
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--accent) 0%, rgba(59, 130, 246, 0.7) 100%);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
}

.security-page .auth-usecase-flow-box ol.info-text > li:last-child {
  margin-bottom: 0;
}

.security-page .auth-usecase-flow-box ol.info-text > li strong {
  color: var(--accent);
  font-weight: 700;
}

[data-theme="light"] .security-page .auth-usecase-pane {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  border: 2px solid #10b981;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3);
}

[data-theme="light"] .security-page .auth-usecase-pane h4 {
  color: #065f46;
  border-bottom-color: rgba(16, 185, 129, 0.4);
}

[data-theme="light"] .security-page .auth-usecase-flow-box {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  border: 2px solid #3b82f6;
  box-shadow: 0 2px 10px rgba(59, 130, 246, 0.3);
}

[data-theme="light"] .security-page .auth-usecase-flow-box .info-header {
  background: linear-gradient(90deg, #bfdbfe 0%, #e0f2fe 100%);
  border-bottom-color: rgba(59, 130, 246, 0.5);
}

[data-theme="light"] .security-page .auth-usecase-flow-box .info-title {
  color: #0c4a6e;
}

[data-theme="light"] .security-page .auth-usecase-flow-box ol.info-text > li::before {
  background: linear-gradient(135deg, #3b82f6 0%, #0ea5e9 100%);
}

[data-theme="light"] .security-page .auth-usecase-flow-box ol.info-text > li strong {
  color: #0c4a6e;
}

/* Compare section */
.security-page .compare-icon {
  font-size: 32px;
  margin-bottom: 12px;
}

.security-page .compare-title {
  margin-bottom: 16px;
}

.security-page .compare-title--sessions { color: var(--green); }

/* ========================================
   BCRYPT EXPLAINER SECTION
   ======================================== */
.bcrypt-explainer {
  background: linear-gradient(135deg, var(--card-bg) 0%, var(--accent-bg) 100%);
  border: 2px solid var(--accent);
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 32px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.bcrypt-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--accent);
}

.bcrypt-icon {
  font-size: 32px;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.bcrypt-title {
  color: var(--accent);
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0;
}

.bcrypt-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Rule Section */
.bcrypt-rule {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px;
  background: rgba(255, 59, 48, 0.1);
  border-left: 4px solid #ff3b30;
  border-radius: 8px;
}

.bcrypt-rule-icon {
  font-size: 24px;
  flex-shrink: 0;
}

/* What/How Sections */
.bcrypt-what,
.bcrypt-how {
  padding: 20px;
  background: var(--card-bg);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.bcrypt-subtitle {
  color: var(--accent);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.bcrypt-subtitle::before {
  content: "▸";
  color: var(--accent);
  font-size: 1.2rem;
}

.bcrypt-what p,
.bcrypt-how p {
  margin: 8px 0;
  line-height: 1.8;
}

/* Example Section */
.bcrypt-example {
  background: var(--code-bg);
  border-radius: 12px;
  padding: 20px;
  border: 2px dashed var(--accent);
}

.bcrypt-example-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 16px;
  font-size: 1.05rem;
}

.example-icon {
  font-size: 20px;
}

.bcrypt-code-example {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px;
  margin: 0;
  font-size: 0.95rem;
}

.bcrypt-code-example code {
  color: var(--text);
}

/* Cost Section */
.bcrypt-cost {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 18px;
  background: linear-gradient(135deg, rgba(0, 122, 255, 0.1) 0%, rgba(88, 86, 214, 0.1) 100%);
  border-radius: 8px;
  border-left: 4px solid var(--accent);
}

.bcrypt-cost-icon {
  font-size: 22px;
  flex-shrink: 0;
}

/* Inline Code Variants */
.inline-code-primary {
  background: linear-gradient(135deg, #007aff 0%, #5856d6 100%);
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
  font-size: 0.9em;
}

.inline-code-method {
  background: rgba(52, 199, 89, 0.15);
  color: #34c759;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
  font-size: 0.9em;
  border: 1px solid rgba(52, 199, 89, 0.3);
}

.inline-code-var {
  background: rgba(255, 159, 10, 0.15);
  color: #ff9f0a;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
  font-size: 0.9em;
  border: 1px solid rgba(255, 159, 10, 0.3);
}

.inline-code-accent {
  background: rgba(255, 59, 48, 0.15);
  color: #ff3b30;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
  font-size: 0.9em;
  border: 1px solid rgba(255, 59, 48, 0.3);
}

.inline-code-number {
  background: rgba(175, 82, 222, 0.15);
  color: #af52de;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
  font-size: 0.9em;
  border: 1px solid rgba(175, 82, 222, 0.3);
}

/* Text Highlights */
.text-highlight-slow {
  color: #ff3b30;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(255, 59, 48, 0.3);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

.text-highlight-salt {
  color: var(--accent);
  font-weight: 700;
  padding: 0 4px;
  background: linear-gradient(to bottom, transparent 60%, rgba(0, 122, 255, 0.2) 60%);
}

/* Light Mode Overrides */
[data-theme="light"] .bcrypt-explainer {
  background: linear-gradient(135deg, #ffffff 0%, #f5f9ff 100%);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .bcrypt-rule {
  background: rgba(255, 59, 48, 0.08);
}

[data-theme="light"] .bcrypt-what,
[data-theme="light"] .bcrypt-how {
  background: #ffffff;
  border-color: #e5e5e7;
}

[data-theme="light"] .bcrypt-example {
  background: #f5f5f7;
}

[data-theme="light"] .bcrypt-code-example {
  background: #ffffff;
  border-color: #d1d1d6;
}

[data-theme="light"] .bcrypt-cost {
  background: linear-gradient(135deg, rgba(0, 122, 255, 0.08) 0%, rgba(88, 86, 214, 0.08) 100%);
}

[data-theme="light"] .inline-code-primary {
  background: linear-gradient(135deg, #007aff 0%, #5856d6 100%);
  color: white;
}

[data-theme="light"] .inline-code-method {
  background: rgba(52, 199, 89, 0.12);
  color: #28a745;
  border-color: rgba(52, 199, 89, 0.25);
}

[data-theme="light"] .inline-code-var {
  background: rgba(255, 159, 10, 0.12);
  color: #d97706;
  border-color: rgba(255, 159, 10, 0.25);
}

[data-theme="light"] .inline-code-accent {
  background: rgba(255, 59, 48, 0.12);
  color: #dc2626;
  border-color: rgba(255, 59, 48, 0.25);
}

[data-theme="light"] .inline-code-number {
  background: rgba(175, 82, 222, 0.12);
  color: #9333ea;
  border-color: rgba(175, 82, 222, 0.25);
}

[data-theme="light"] .text-highlight-slow {
  color: #dc2626;
}

[data-theme="light"] .text-highlight-salt {
  color: #007aff;
  background: linear-gradient(to bottom, transparent 60%, rgba(0, 122, 255, 0.15) 60%);
}

/* ========================================
   JWT STEP-BY-STEP IMPLEMENTATION GUIDE
   ======================================== */
.jwt-implementation-guide {
  background: linear-gradient(135deg, var(--card-bg) 0%, var(--accent-bg) 100%);
  border: 2px solid var(--accent);
  border-radius: 16px;
  padding: 32px;
}

.jwt-implementation-guide > h4 {
  color: var(--accent);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Individual Step Styling */
.jwt-step {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  border: 1px solid var(--border-color);
  position: relative;
}

.jwt-step:last-child {
  margin-bottom: 0;
}

.jwt-step-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.jwt-step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--accent) 0%, #5856d6 100%);
  color: white;
  font-weight: 700;
  font-size: 1.2rem;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
}

.jwt-step-title {
  color: var(--text);
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
}

.jwt-step-desc {
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 20px;
}

.jwt-step-desc:last-child {
  margin-bottom: 0;
}

/* Code Breakdown Legend */
.jwt-code-breakdown {
  margin-bottom: 20px;
}

.jwt-code-legend {
  background: rgba(0, 122, 255, 0.08);
  border: 1px solid rgba(0, 122, 255, 0.2);
  border-radius: 8px;
  padding: 16px 20px;
}

.jwt-legend-title {
  display: block;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 12px;
  font-size: 1rem;
}

.jwt-legend-list {
  margin: 0;
  padding-left: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 8px;
}

.jwt-legend-list li {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.jwt-legend-list li strong {
  color: var(--text);
  font-weight: 600;
}

/* Light Mode Overrides */
[data-theme="light"] .jwt-implementation-guide {
  background: linear-gradient(135deg, #ffffff 0%, #f5f9ff 100%);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .jwt-step {
  background: #ffffff;
  border-color: #e5e5e7;
}

[data-theme="light"] .jwt-code-legend {
  background: rgba(0, 122, 255, 0.05);
  border-color: rgba(0, 122, 255, 0.15);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .jwt-implementation-guide {
    padding: 20px;
  }
  
  .jwt-step {
    padding: 16px;
  }
  
  .jwt-step-header {
    gap: 12px;
  }
  
  .jwt-step-number {
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }
  
  .jwt-step-title {
    font-size: 1.05rem;
  }
  
  .jwt-legend-list {
    grid-template-columns: 1fr;
  }
}
.security-page .compare-title--jwt { color: var(--accent); }

.security-page .compare-list {
  text-align: left;
  margin: 0;
  padding-left: 20px;
}

.security-page .compare-list > li { margin-bottom: 8px; }
.security-page .compare-list > li:last-child { margin-bottom: 0; }

/* ========================================
   OAUTH SECTION STYLES
   ======================================== */

/* Benefits Grid */
.oauth-benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.oauth-benefit-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}

.oauth-benefit-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.oauth-benefit-icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 12px;
}

.oauth-benefit-title {
  color: var(--accent);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 8px 0;
}

.oauth-benefit-desc {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
}

/* OAuth Terms List */
.oauth-terms-list li {
  margin-bottom: 8px;
}

.oauth-terms-list li code {
  background: rgba(0, 122, 255, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
}

/* OAuth Flow Animation */
.oauth-flow-container {
  background: var(--card-bg);
  border: 2px solid var(--accent);
  border-radius: 16px;
  padding: 24px;
  margin: 24px 0;
}

.oauth-flow-controls {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.oauth-flow-btn {
  padding: 10px 20px;
  background: linear-gradient(135deg, var(--accent) 0%, #5856d6 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.oauth-flow-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
}

.oauth-step-info {
  background: var(--accent-bg);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  border-left: 4px solid var(--accent);
}

.oauth-step-number {
  font-size: 0.85rem;
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.oauth-step-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.oauth-step-desc {
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.oauth-flow-svg {
  width: 100%;
  max-width: 900px;
  height: auto;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
}

/* OAuth Implementation Guide */
.oauth-implementation-guide {
  background: linear-gradient(135deg, var(--card-bg) 0%, var(--accent-bg) 100%);
  border: 2px solid var(--accent);
  border-radius: 16px;
  padding: 32px;
}

.oauth-step-card {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  border: 1px solid var(--border-color);
}

.oauth-step-card:last-child {
  margin-bottom: 0;
}

.oauth-step-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.oauth-step-number-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--accent) 0%, #5856d6 100%);
  color: white;
  font-weight: 700;
  font-size: 1.2rem;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
}

.oauth-step-card-title {
  color: var(--text);
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
}

.oauth-setup-steps {
  margin: 16px 0;
}

.oauth-numbered-list {
  padding-left: 24px;
  line-height: 1.8;
}

.oauth-numbered-list li {
  margin-bottom: 8px;
}

.oauth-numbered-list a {
  color: var(--accent);
  text-decoration: underline;
}

.oauth-packages-explain {
  margin-top: 16px;
}

.oauth-package-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 8px;
}

.oauth-package-list li {
  padding: 8px 12px;
  background: var(--accent-bg);
  border-radius: 6px;
  font-size: 0.9rem;
}

/* OAuth Code Breakdown */
.oauth-code-breakdown {
  margin-bottom: 20px;
}

.oauth-code-legend {
  background: rgba(0, 122, 255, 0.08);
  border: 1px solid rgba(0, 122, 255, 0.2);
  border-radius: 8px;
  padding: 16px 20px;
}

.oauth-legend-title {
  display: block;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 12px;
  font-size: 1rem;
}

.oauth-legend-list {
  margin: 0;
  padding-left: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 8px;
}

.oauth-legend-list li {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.oauth-legend-list li strong {
  color: var(--text);
}

/* OAuth Walkthrough */
.oauth-walkthrough {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.oauth-walkthrough-item {
  background: var(--accent-bg);
  border-radius: 8px;
  padding: 16px;
  border-left: 4px solid var(--accent);
}

.oauth-walkthrough-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.oauth-walkthrough-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--accent);
  color: white;
  font-weight: 700;
  font-size: 0.85rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.oauth-walkthrough-item p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.6;
  font-size: 0.95rem;
}

.oauth-walkthrough-item code {
  background: rgba(0, 122, 255, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.85rem;
}

/* OAuth Providers List */
.oauth-providers-list {
  column-count: 2;
  column-gap: 24px;
}

.oauth-providers-list li {
  margin-bottom: 8px;
  break-inside: avoid;
}

/* Light Mode Overrides */
[data-theme="light"] .oauth-benefit-card {
  background: #ffffff;
  border-color: #e5e5e7;
}

[data-theme="light"] .oauth-benefit-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .oauth-flow-container {
  background: #ffffff;
}

[data-theme="light"] .oauth-flow-svg {
  background: #f8fafc;
}

/* OAuth SVG Light Mode - Override inline colors using classes */
[data-theme="light"] .oauth-flow-svg .oauth-svg-entity-bg {
  opacity: 0.4 !important;
}

[data-theme="light"] .oauth-flow-svg #oauthUser .oauth-svg-entity-bg {
  fill: #3b82f6 !important;
}

[data-theme="light"] .oauth-flow-svg #oauthApp .oauth-svg-entity-bg {
  fill: #22c55e !important;
}

[data-theme="light"] .oauth-flow-svg #oauthProvider .oauth-svg-entity-bg {
  fill: #a855f7 !important;
}

[data-theme="light"] .oauth-flow-svg .oauth-svg-box {
  fill: #ffffff !important;
}

[data-theme="light"] .oauth-flow-svg .oauth-svg-text-secondary {
  fill: #64748b !important;
}

[data-theme="light"] .oauth-flow-svg .oauth-svg-text-light {
  fill: #334155 !important;
}

[data-theme="light"] .oauth-implementation-guide {
  background: linear-gradient(135deg, #ffffff 0%, #f5f9ff 100%);
}

[data-theme="light"] .oauth-step-card {
  background: #ffffff;
  border-color: #e5e5e7;
}

[data-theme="light"] .oauth-walkthrough-item {
  background: #f5f9ff;
}

[data-theme="light"] .oauth-code-legend {
  background: rgba(0, 122, 255, 0.05);
  border-color: rgba(0, 122, 255, 0.15);
}

/* Responsive */
@media (max-width: 768px) {
  .oauth-benefits-grid {
    grid-template-columns: 1fr;
  }
  
  .oauth-flow-container {
    padding: 16px;
  }
  
  .oauth-implementation-guide {
    padding: 20px;
  }
  
  .oauth-step-card {
    padding: 16px;
  }
  
  .oauth-legend-list,
  .oauth-package-list {
    grid-template-columns: 1fr;
  }
  
  .oauth-providers-list {
    column-count: 1;
  }
}

/* ========================================
   COMPARISON SECTION - SESSIONS vs JWT vs OAUTH
   ======================================== */

/* Three-column grid for comparison */
.security-page .comparison-grid--three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}

.security-page .comparison-card {
  background: var(--card-bg);
  border: 2px solid var(--border-color);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}

.security-page .comparison-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.security-page .comparison-card.good {
  border-color: var(--green);
  background: linear-gradient(135deg, var(--card-bg) 0%, rgba(80, 250, 123, 0.08) 100%);
}

.security-page .comparison-card.neutral {
  border-color: var(--accent);
  background: linear-gradient(135deg, var(--card-bg) 0%, rgba(122, 162, 255, 0.08) 100%);
}

.security-page .comparison-card.oauth {
  border-color: #ff79c6;
  background: linear-gradient(135deg, var(--card-bg) 0%, rgba(255, 121, 198, 0.08) 100%);
}

.security-page .compare-subtitle {
  font-size: 0.9rem;
  color: var(--muted-text);
  margin: 0 0 16px 0;
  font-style: italic;
}

.security-page .compare-title--oauth {
  color: #ff79c6;
}

.security-page .compare-pro {
  color: var(--green);
}

.security-page .compare-con {
  color: #fbbf24;
}

/* Decision Tree */
.decision-tree {
  background: var(--card-bg);
  border: 2px solid var(--accent);
  border-radius: 16px;
  padding: 28px;
  margin-bottom: 32px;
}

.decision-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.decision-icon {
  font-size: 1.75rem;
}

.decision-title {
  margin: 0;
  color: var(--accent);
  font-size: 1.25rem;
}

.decision-flow {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px dashed var(--border-color);
}

.decision-flow:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.decision-question {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 1.05rem;
}

.decision-q-icon {
  font-size: 1.25rem;
}

.decision-answer {
  margin-left: 36px;
  padding: 10px 16px;
  border-radius: 8px;
  margin-bottom: 8px;
  background: rgba(122, 162, 255, 0.08);
}

.decision-answer:last-child {
  margin-bottom: 0;
}

.decision-arrow {
  color: var(--accent);
  font-weight: 600;
  margin-right: 4px;
}

.decision-highlight {
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
}

.decision-highlight--session {
  background: rgba(80, 250, 123, 0.2);
  color: var(--green);
}

.decision-highlight--jwt {
  background: rgba(122, 162, 255, 0.2);
  color: var(--accent);
}

.decision-highlight--oauth {
  background: rgba(255, 121, 198, 0.2);
  color: #ff79c6;
}

.decision-highlight--hybrid {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}

/* Guidance rows */
.guidance-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(122, 162, 255, 0.2);
  flex-wrap: wrap;
}

.guidance-row:last-child {
  border-bottom: none;
}

.guidance-scenario {
  flex: 1;
  min-width: 200px;
}

.guidance-arrow {
  color: var(--accent);
  font-weight: bold;
}

.guidance-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.85rem;
}

.guidance-badge--session {
  background: rgba(80, 250, 123, 0.2);
  color: var(--green);
}

.guidance-badge--jwt {
  background: rgba(122, 162, 255, 0.2);
  color: var(--accent);
}

.guidance-badge--oauth {
  background: rgba(255, 121, 198, 0.2);
  color: #ff79c6;
}

.guidance-badge--hybrid {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}

/* Combinations Box */
.combinations-box {
  background: linear-gradient(135deg, var(--card-bg) 0%, rgba(122, 162, 255, 0.05) 100%);
  border: 2px solid var(--border-color);
  border-radius: 16px;
  padding: 28px;
  margin-bottom: 32px;
}

.combinations-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.combinations-icon {
  font-size: 1.75rem;
}

.combinations-title {
  margin: 0;
  color: var(--text-primary);
  font-size: 1.2rem;
}

.combinations-intro {
  color: var(--muted-text);
  margin-bottom: 20px;
}

.combinations-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.combination-item {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}

.combination-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.combo-badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.85rem;
}

.combo-badge--session {
  background: rgba(80, 250, 123, 0.25);
  color: var(--green);
}

.combo-badge--jwt {
  background: rgba(122, 162, 255, 0.25);
  color: var(--accent);
}

.combo-badge--oauth {
  background: rgba(255, 121, 198, 0.25);
  color: #ff79c6;
}

.combo-arrow {
  color: var(--accent);
  font-size: 1.25rem;
  font-weight: bold;
}

.combo-plus {
  color: var(--muted-text);
  font-size: 1.25rem;
  font-weight: bold;
}

.combination-desc {
  font-size: 0.9rem;
  color: var(--muted-text);
  margin: 0;
  line-height: 1.5;
}

/* Light mode adjustments */
[data-theme="light"] .decision-highlight--session {
  background: rgba(25, 135, 84, 0.15);
  color: #198754;
}

[data-theme="light"] .decision-highlight--jwt {
  background: rgba(13, 110, 253, 0.15);
  color: #0d6efd;
}

[data-theme="light"] .decision-highlight--oauth {
  background: rgba(214, 51, 132, 0.15);
  color: #d63384;
}

[data-theme="light"] .security-page .compare-title--oauth {
  color: #d63384;
}

[data-theme="light"] .guidance-badge--session,
[data-theme="light"] .combo-badge--session {
  background: rgba(25, 135, 84, 0.15);
  color: #198754;
}

[data-theme="light"] .guidance-badge--jwt,
[data-theme="light"] .combo-badge--jwt {
  background: rgba(13, 110, 253, 0.15);
  color: #0d6efd;
}

[data-theme="light"] .guidance-badge--oauth,
[data-theme="light"] .combo-badge--oauth {
  background: rgba(214, 51, 132, 0.15);
  color: #d63384;
}

[data-theme="light"] .guidance-badge--hybrid,
[data-theme="light"] .decision-highlight--hybrid {
  background: rgba(202, 138, 4, 0.15);
  color: #ca8a04;
}

/* Responsive for comparison section */
@media (max-width: 992px) {
  .security-page .comparison-grid--three {
    grid-template-columns: 1fr;
  }
  
  .combinations-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .decision-tree,
  .combinations-box {
    padding: 20px;
  }
  
  .guidance-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .guidance-arrow {
    display: none;
  }
}

/* ========================================
   VULNERABILITIES SECTION
   ======================================== */

/* Golden Rule Box */
.golden-rule-box {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(245, 158, 11, 0.15) 100%);
  border: 2px solid #fbbf24;
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 32px;
}

.golden-rule-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.golden-rule-icon {
  font-size: 2.5rem;
}

.golden-rule-title {
  margin: 0;
  color: #fbbf24;
  font-size: 1.4rem;
}

.golden-rule-desc {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 24px;
}

/* Trust Comparison */
.trust-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 28px;
}

.trust-wrong,
.trust-right {
  padding: 20px;
  border-radius: 12px;
}

.trust-wrong {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.trust-right {
  background: rgba(80, 250, 123, 0.1);
  border: 1px solid rgba(80, 250, 123, 0.3);
}

.trust-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 1.1rem;
}

.trust-header--wrong strong {
  color: #ef4444;
}

.trust-header--right strong {
  color: var(--green);
}

.trust-icon {
  font-size: 1.25rem;
}

.trust-problem,
.trust-rule {
  margin-top: 12px;
  padding: 12px;
  border-radius: 8px;
  font-size: 0.95rem;
}

.trust-problem {
  background: rgba(239, 68, 68, 0.15);
}

.trust-rule {
  background: rgba(80, 250, 123, 0.15);
}

/* Trust Examples Grid */
.trust-examples {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 20px;
}

.trust-examples-title {
  margin: 0 0 16px 0;
  color: var(--accent);
}

.trust-examples-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.trust-example-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: var(--accent-bg);
  border-radius: 8px;
}

.trust-example-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.trust-example-item strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text-primary);
}

.trust-example-item p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted-text);
}

/* Validation Example */
.validation-example {
  margin-bottom: 0;
}

.validation-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.validation-icon {
  font-size: 1.75rem;
}

.validation-title {
  margin: 0;
  color: var(--accent);
  font-size: 1.25rem;
}

.validation-desc {
  margin-bottom: 20px;
  color: var(--muted-text);
}

/* OWASP Intro */
.owasp-intro {
  background: linear-gradient(135deg, var(--card-bg) 0%, rgba(122, 162, 255, 0.08) 100%);
  border: 2px solid var(--accent);
  border-radius: 16px;
  padding: 28px;
  margin-bottom: 32px;
}

.owasp-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.owasp-logo {
  font-size: 2.5rem;
}

.owasp-title {
  margin: 0;
  color: var(--accent);
  font-size: 1.3rem;
}

.owasp-subtitle {
  margin: 4px 0 0 0;
  color: var(--muted-text);
  font-size: 0.95rem;
}

.owasp-desc {
  margin: 0;
  line-height: 1.6;
}

/* Vulnerability Cards */
.vuln-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 28px;
  margin-bottom: 28px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.vuln-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.vuln-badge {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.vuln-badge--critical {
  background: rgba(220, 38, 38, 0.2);
  color: #ef4444;
  border: 1px solid rgba(220, 38, 38, 0.4);
}

.vuln-badge--high {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.vuln-badge--medium {
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.4);
}

.vuln-title {
  margin: 0;
  font-size: 1.25rem;
  color: var(--text-primary);
}

.vuln-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.vuln-what h5,
.vuln-example h5,
.vuln-defense h5 {
  margin: 0 0 10px 0;
  font-size: 1rem;
  color: var(--accent);
}

.vuln-what p,
.vuln-example p {
  margin: 0;
  line-height: 1.6;
}

.vuln-code {
  margin: 12px 0 0 0;
  font-size: 0.9rem;
}

/* Defense List */
.defense-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.defense-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.defense-num {
  width: 28px;
  height: 28px;
  background: var(--accent);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* Security Headers Box */
.security-headers-box {
  background: linear-gradient(135deg, var(--card-bg) 0%, rgba(80, 250, 123, 0.05) 100%);
  border: 2px solid var(--green);
  border-radius: 16px;
  padding: 28px;
  margin-bottom: 32px;
}

.security-headers-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.security-headers-icon {
  font-size: 1.75rem;
}

.security-headers-title {
  margin: 0;
  color: var(--green);
  font-size: 1.25rem;
}

.security-headers-desc {
  margin-bottom: 20px;
  line-height: 1.6;
}

.helmet-features {
  margin-top: 20px;
}

.helmet-features-title {
  margin: 0 0 16px 0;
  color: var(--text-primary);
}

.helmet-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.helmet-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

.helmet-item span {
  font-size: 0.85rem;
  color: var(--muted-text);
}

/* Security Checklist */
.checklist-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(80, 250, 123, 0.08);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
}

.checklist-item:hover {
  background: rgba(80, 250, 123, 0.15);
}

.checklist-checkbox {
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--green);
}

.checklist-item span {
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Light Mode Adjustments */
[data-theme="light"] .golden-rule-box {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.08) 0%, rgba(245, 158, 11, 0.12) 100%);
}

[data-theme="light"] .golden-rule-title {
  color: #d97706;
}

[data-theme="light"] .trust-wrong {
  background: rgba(220, 38, 38, 0.08);
}

[data-theme="light"] .trust-right {
  background: rgba(22, 163, 74, 0.08);
}

[data-theme="light"] .trust-header--wrong strong {
  color: #dc2626;
}

[data-theme="light"] .trust-header--right strong {
  color: #16a34a;
}

[data-theme="light"] .vuln-badge--critical {
  background: rgba(220, 38, 38, 0.15);
  color: #dc2626;
}

[data-theme="light"] .vuln-badge--high {
  background: rgba(217, 119, 6, 0.15);
  color: #d97706;
}

[data-theme="light"] .vuln-badge--medium {
  background: rgba(37, 99, 235, 0.15);
  color: #2563eb;
}

[data-theme="light"] .security-headers-title {
  color: #16a34a;
}

/* Responsive for vulnerabilities */
@media (max-width: 992px) {
  .trust-comparison {
    grid-template-columns: 1fr;
  }
  
  .trust-examples-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .helmet-grid,
  .checklist-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .golden-rule-box,
  .owasp-intro,
  .vuln-card,
  .security-headers-box {
    padding: 20px;
  }
  
  .trust-examples-grid {
    grid-template-columns: 1fr;
  }
  
  .owasp-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* ========================================
   DEEP DIVE LABS
   Collapsible hands-on attack simulations
   ======================================== */

/* Deep Dive Container */
.deep-dive {
  margin-top: 20px;
  border: 2px solid var(--purple);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(189, 147, 249, 0.08) 0%, rgba(139, 92, 246, 0.12) 100%);
  overflow: hidden;
}

.deep-dive[open] {
  background: var(--card-bg);
}

/* Summary (clickable header) */
.deep-dive-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 0.2s ease;
}

.deep-dive-summary::-webkit-details-marker {
  display: none;
}

.deep-dive-summary:hover {
  background: rgba(189, 147, 249, 0.15);
}

.deep-dive-icon {
  font-size: 1.5rem;
}

.deep-dive-title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--purple);
  flex-grow: 1;
}

.deep-dive-badge {
  background: var(--purple);
  color: #fff;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Open state arrow indicator */
.deep-dive-summary::after {
  content: '▶';
  color: var(--purple);
  font-size: 0.75rem;
  transition: transform 0.3s ease;
}

.deep-dive[open] .deep-dive-summary::after {
  transform: rotate(90deg);
}

/* Content area */
.deep-dive-content {
  padding: 24px;
  border-top: 1px solid rgba(189, 147, 249, 0.3);
}

/* Lab Warning */
.lab-warning {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
}

.lab-warning-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.lab-warning p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Lab Steps */
.lab-step {
  margin-bottom: 28px;
  padding-left: 48px;
  position: relative;
}

.lab-step-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  margin-left: -48px;
}

.lab-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--purple);
  color: #fff;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.lab-step-header h6 {
  margin: 0;
  font-size: 1rem;
  color: var(--heading-color);
}

.lab-step p {
  margin: 0 0 12px 0;
  font-size: 0.95rem;
  line-height: 1.6;
}

.lab-step .code {
  margin-bottom: 12px;
}

/* Fix step (green themed) */
.lab-step--fix {
  background: rgba(80, 250, 123, 0.08);
  border: 1px solid rgba(80, 250, 123, 0.3);
  border-radius: 12px;
  padding: 20px;
  padding-left: 60px;
  margin-bottom: 24px;
}

.lab-step--fix .lab-step-num {
  background: var(--green);
}

/* Attack Payload Box */
.attack-payload {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 10px;
  margin-bottom: 16px;
  overflow: hidden;
}

.attack-payload-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(239, 68, 68, 0.12);
  border-bottom: 1px solid rgba(239, 68, 68, 0.2);
}

.attack-type {
  font-weight: 600;
  font-size: 0.85rem;
  color: #ef4444;
}

.attack-code {
  padding: 16px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--code-color);
  background: rgba(0, 0, 0, 0.2);
  white-space: pre-wrap;
  word-break: break-all;
}

.attack-explain {
  padding: 12px 16px;
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
  background: rgba(239, 68, 68, 0.05);
  border-top: 1px solid rgba(239, 68, 68, 0.15);
}

/* Lab Instructions Box */
.lab-instructions {
  background: rgba(96, 165, 250, 0.1);
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: 8px;
  padding: 16px;
  font-size: 0.9rem;
  margin-top: 16px;
}

.lab-instructions strong {
  color: #60a5fa;
}

/* Light Mode Deep Dive Adjustments */
[data-theme="light"] .deep-dive {
  background: linear-gradient(135deg, rgba(147, 51, 234, 0.06) 0%, rgba(139, 92, 246, 0.1) 100%);
  border-color: #8b5cf6;
}

[data-theme="light"] .deep-dive[open] {
  background: #fff;
}

[data-theme="light"] .deep-dive-summary:hover {
  background: rgba(139, 92, 246, 0.1);
}

[data-theme="light"] .deep-dive-title {
  color: #7c3aed;
}

[data-theme="light"] .deep-dive-badge {
  background: #7c3aed;
}

[data-theme="light"] .deep-dive-summary::after {
  color: #7c3aed;
}

[data-theme="light"] .deep-dive-content {
  border-top-color: rgba(139, 92, 246, 0.25);
}

[data-theme="light"] .lab-warning {
  background: rgba(251, 191, 36, 0.08);
  border-color: rgba(217, 119, 6, 0.3);
}

[data-theme="light"] .lab-step-num {
  background: #7c3aed;
}

[data-theme="light"] .lab-step--fix {
  background: rgba(22, 163, 74, 0.06);
  border-color: rgba(22, 163, 74, 0.25);
}

[data-theme="light"] .lab-step--fix .lab-step-num {
  background: #16a34a;
}

[data-theme="light"] .attack-payload {
  background: rgba(220, 38, 38, 0.05);
  border-color: rgba(220, 38, 38, 0.25);
}

[data-theme="light"] .attack-payload-header {
  background: rgba(220, 38, 38, 0.08);
  border-bottom-color: rgba(220, 38, 38, 0.2);
}

[data-theme="light"] .attack-type {
  color: #dc2626;
}

[data-theme="light"] .attack-code {
  background: rgba(0, 0, 0, 0.04);
  color: #1e293b;
}

[data-theme="light"] .attack-explain {
  background: rgba(220, 38, 38, 0.03);
  border-top-color: rgba(220, 38, 38, 0.12);
}

[data-theme="light"] .lab-instructions {
  background: rgba(37, 99, 235, 0.06);
  border-color: rgba(37, 99, 235, 0.2);
}

[data-theme="light"] .lab-instructions strong {
  color: #2563eb;
}

/* Responsive Deep Dive */
@media (max-width: 768px) {
  .deep-dive-summary {
    padding: 14px 16px;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .deep-dive-title {
    font-size: 0.9rem;
  }
  
  .deep-dive-badge {
    font-size: 0.7rem;
    padding: 3px 8px;
  }
  
  .deep-dive-content {
    padding: 16px;
  }
  
  .lab-step {
    padding-left: 0;
  }
  
  .lab-step-header {
    margin-left: 0;
  }
  
  .lab-step--fix {
    padding-left: 16px;
  }
  
  .attack-code {
    font-size: 0.75rem;
  }
}