/* Fonts (self-hosted via @fontsource) — só subset latin + só woff2 (browsers modernos) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/inter-latin-400-normal-C38fXH4l.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/inter-latin-500-normal-Cerq10X2.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/inter-latin-600-normal-LgqL8muc.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/inter-latin-700-normal-Yt3aPRUw.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/jetbrains-mono-latin-400-normal-V6pRDFza.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/jetbrains-mono-latin-500-normal-BWZEU5yA.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/jetbrains-mono-latin-600-normal-C8RAYTDA.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/jetbrains-mono-latin-700-normal-BYuf6tUa.woff2') format('woff2');
}

/* ─── Design tokens (redesign — consumed by shared classes) ────────── */
:root {
  --bg:        #0a0d12;
  --fg:        #fafafa;
  --muted:     #a3a3a3;
  --muted-2:   #6b7280;
  --border:    rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --card:      rgba(15, 18, 25, 0.65);
  --card-solid:rgba(15, 18, 25, 0.85);
  --primary:   #3b82f6;
  --primary-2: #60a5fa;
  --accent-rgb: 59, 130, 246;
  --ok:        #22c55e;
  --warn:      #eab308;
  --bad:       #ef4444;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
}

#root {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.mono { font-family: "JetBrains Mono", ui-monospace, monospace; }

/* ─── Background stage + overlays ──────────────────────────────────── */
.bg-stage {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 50% 20%, rgba(var(--accent-rgb), 0.06), transparent 60%),
    radial-gradient(ellipse 100% 80% at 50% 100%, rgba(var(--accent-rgb), 0.03), transparent 70%),
    var(--bg);
}
.bg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bg-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 50% at 50% 50%, transparent 30%, rgba(0, 0, 0, 0.5) 100%);
}
.bg-noise {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1   0 0 0 0 1   0 0 0 0 1   0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.bg-scanlines {
  position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 0px, rgba(255, 255, 255, 0.025) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: overlay;
}

.page { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; }

/* ─── Header ───────────────────────────────────────────────────────── */
header.site {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  background: rgba(10, 13, 18, 0.6);
  border-bottom: 1px solid var(--border);
}
header.site .row {
  max-width: 1400px; margin: 0 auto;
  padding: 14px 28px;
  display: flex; align-items: center; gap: 24px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; color: var(--primary-2);
  font-size: 17px; letter-spacing: -0.01em;
  text-decoration: none;
}
.brand-mark {
  width: 28px; height: 28px; display: block;
}
nav.main { display: flex; gap: 4px; margin-left: 12px; }
nav.main a {
  color: var(--muted); text-decoration: none;
  padding: 7px 12px; border-radius: 7px;
  font-size: 14px; font-weight: 500;
  transition: color .15s, background .15s;
}
nav.main a:hover { color: var(--fg); background: rgba(255, 255, 255, 0.04); }
nav.main a.active { color: var(--fg); background: rgba(var(--accent-rgb), 0.1); }

.header-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.search-inline { position: relative; flex: 0 0 280px; }
.search-inline input {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  color: var(--fg);
  border-radius: 9px;
  padding: 8px 12px 8px 32px;
  font-size: 13px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  outline: none;
  transition: border-color .15s, background .15s;
}
.search-inline input:focus { border-color: rgba(var(--accent-rgb), 0.5); background: rgba(255, 255, 255, 0.06); }
.search-inline svg {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 13px; height: 13px; color: var(--muted-2);
}
.avatar-btn {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.3), rgba(var(--accent-rgb), 0.1));
  border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; color: var(--primary-2); cursor: pointer;
  text-decoration: none;
}

/* ─── Navbar ───────────────────────────────────────────────────────── */
header.site .nav-desktop { display: contents; }

/* ─── Buttons ──────────────────────────────────────────────────────── */
.btn {
  appearance: none; border: 0;
  font-family: inherit; font-weight: 500; font-size: 13.5px;
  padding: 9px 14px;
  border-radius: 9px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  text-decoration: none; color: var(--fg);
  transition: transform .1s, background .15s, border-color .15s;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary {
  background: var(--primary); color: white;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 6px 22px -8px rgba(var(--accent-rgb), 0.7);
}
.btn-primary:hover:not(:disabled) { background: color-mix(in oklab, var(--primary) 90%, white); }
.btn-ghost {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
}
.btn-ghost:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); border-color: var(--border-strong); }
.btn-lg { padding: 12px 18px; font-size: 14px; border-radius: 10px; }
.btn-mono { font-family: "JetBrains Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase; font-size: 12px; }

/* ─── Card ─────────────────────────────────────────────────────────── */
.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}
.card.solid { background: var(--card-solid); }
.card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.4), transparent);
  opacity: 0.5;
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.card-head .ttl {
  font-size: 11px;
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.card-head .ttl::before { content: "▸ "; color: rgba(var(--accent-rgb), 0.7); }
.card-head .actions {
  font-size: 11px; font-family: "JetBrains Mono", monospace;
  color: rgba(var(--accent-rgb), 0.8); text-decoration: none;
}
.card-head button.actions {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
}
.card-body { padding: 18px; }

/* ─── Page head ────────────────────────────────────────────────────── */
.page-head {
  max-width: 1280px; margin: 0 auto;
  padding: 32px 28px 12px;
  width: 100%;
}
.page-head .breadcrumb,
.adm-header .breadcrumb {
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  color: var(--muted-2); letter-spacing: 0.04em;
  margin-bottom: 10px;
}
.page-head .breadcrumb a,
.adm-header .breadcrumb a { color: var(--muted-2); text-decoration: none; }
.page-head .breadcrumb a:hover,
.adm-header .breadcrumb a:hover { color: var(--fg); }
.page-head .breadcrumb .sep,
.adm-header .breadcrumb .sep { color: var(--muted-2); margin: 0 6px; }
.page-head .breadcrumb .cur,
.adm-header .breadcrumb .cur { color: var(--muted-2); }
.page-head h1 {
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 600; letter-spacing: -0.02em;
  margin: 0;
}
.page-head .subtitle { color: var(--muted); font-size: 14.5px; margin-top: 4px; }
.page-head .title-row {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
/* Linha de topo: breadcrumb à esquerda, cartão/eyebrow à direita (igual ao admin). */
.page-head .head-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px 16px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.page-head .head-top .breadcrumb { margin-bottom: 0; }

/* ─── Eyebrow / chip ───────────────────────────────────────────────── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 11px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--primary-2);
  font-size: 10.5px; font-weight: 500;
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.08em;
}
.eyebrow .pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 6px var(--ok);
  animation: pulseDot 2s infinite;
}
@keyframes pulseDot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ─── Inputs ───────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  display: flex; justify-content: space-between; align-items: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  color: var(--muted-2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.input {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-strong);
  color: var(--fg);
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: "JetBrains Mono", monospace;
  outline: none;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.input:focus {
  border-color: rgba(var(--accent-rgb), 0.7);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}
.field.error .input { border-color: rgba(239, 68, 68, 0.6); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1); }
.field .err {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; color: #fca5a5;
}
.field .err::before { content: "⚠ "; }

/* ─── Footer ───────────────────────────────────────────────────────── */
footer.site {
  border-top: 1px solid var(--border);
  padding: 22px 28px 26px;
  color: var(--muted-2);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.05em;
  text-align: center;
}
footer.site .row { display: flex; justify-content: space-between; max-width: 1400px; margin: 0 auto; gap: 16px; flex-wrap: wrap; }

/* ─── Common badge ─────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.badge.ok { background: rgba(34, 197, 94, 0.12); color: #86efac; border: 1px solid rgba(34, 197, 94, 0.3); }
.badge.warn { background: rgba(234, 179, 8, 0.12); color: #fcd34d; border: 1px solid rgba(234, 179, 8, 0.3); }
.badge.bad { background: rgba(239, 68, 68, 0.12); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.3); }
.badge.neutral { background: rgba(255, 255, 255, 0.05); color: var(--muted); border: 1px solid var(--border); }

/* ─── App shell (estrutura global do AppRouter) ────────────────────── */
.app-shell {
  display: flex; flex-direction: column;
  min-height: 100vh;
  background: var(--bg); color: var(--fg);
}
.app-main { flex: 1 1 0; min-width: 0; }
.app-footer-wrap { position: relative; z-index: 1; }

/* ─── Loading spinner (full-screen ou inline) ──────────────────────── */
.loading-spinner {
  display: flex; align-items: center; justify-content: center;
  padding: 48px 0;
}
.loading-spinner--full { min-height: 100vh; padding: 0; }
.loading-spinner__icon {
  color: var(--primary);
  animation: loadingSpin 1s linear infinite;
}
@keyframes loadingSpin {
  to { transform: rotate(360deg); }
}

/* ════════════════════════════════════════════════════════════════════
   PAGE: Landing  ([data-page="home"])
   ════════════════════════════════════════════════════════════════════ */
[data-page="home"] .btn-lg { padding: 12px 22px; font-size: 15px; border-radius: 11px; }

[data-page="home"] section.hero {
  text-align: center;
  padding: 110px 28px 80px;
  max-width: 1280px; margin: 0 auto;
  position: relative;
}
[data-page="home"] .eyebrow {
  padding: 6px 14px;
  font-size: 12px;
  letter-spacing: 0.04em;
  margin-bottom: 28px;
}
[data-page="home"] .section-head .eyebrow { margin-bottom: 16px; }
[data-page="home"] .eyebrow .pulse {
  width: 7px; height: 7px;
  background: var(--primary);
  box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.7);
  animation: heroPulse 2s infinite;
}
[data-page="home"] .eyebrow.is-offline .pulse { background: var(--bad); }
@keyframes heroPulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(var(--accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}
[data-page="home"] h1.hero-title {
  font-size: clamp(40px, 6vw, 76px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.02;
  margin: 0 auto 24px;
  max-width: 16ch;
  text-wrap: balance;
}
[data-page="home"] h1.hero-title .accent {
  background: linear-gradient(120deg, var(--primary-2), white 50%, var(--primary-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 200% 100%;
  animation: shimmer 8s linear infinite;
}
@keyframes shimmer { 0% { background-position: 0% 0%; } 100% { background-position: 200% 0%; } }
[data-page="home"] .hero-sub {
  max-width: 56ch; margin: 0 auto 36px;
  color: var(--muted);
  font-size: 18px; line-height: 1.55;
  text-wrap: pretty;
}
[data-page="home"] .hero-ctas { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
[data-page="home"] .hero-meta {
  margin-top: 60px;
  display: flex; gap: 36px; justify-content: center; flex-wrap: wrap;
  color: var(--muted-2);
  font-size: 12px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.04em;
}
[data-page="home"] .hero-meta .item { display: flex; align-items: center; gap: 8px; }
[data-page="home"] .hero-meta .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.8);
}

[data-page="home"] .hud {
  position: absolute;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--muted-2);
  letter-spacing: 0.03em;
  pointer-events: none;
}
[data-page="home"] .hud .label { color: rgba(var(--accent-rgb), 0.7); margin-right: 6px; }
[data-page="home"] .hud .val { color: var(--fg); opacity: 0.7; }
[data-page="home"] .hud-tl { top: 28px; left: 28px; text-align: left; }
[data-page="home"] .hud-tr { top: 28px; right: 28px; text-align: right; }
[data-page="home"] .hud-line + .hud-line { margin-top: 4px; }
@media (max-width: 720px) { [data-page="home"] .hud { display: none; } }

[data-page="home"] section.features {
  max-width: 1280px; margin: 0 auto;
  padding: 80px 28px;
}
[data-page="home"] .section-head { text-align: center; margin-bottom: 56px; }
[data-page="home"] .section-head h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}
[data-page="home"] .section-head p {
  color: var(--muted);
  max-width: 60ch; margin: 0 auto;
  font-size: 16px;
}
[data-page="home"] .feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 1180px) { [data-page="home"] .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { [data-page="home"] .feature-grid { grid-template-columns: 1fr; } }
[data-page="home"] .feature {
  position: relative;
  display: block;
  padding: 24px 22px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--card);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color .2s, transform .2s;
}
[data-page="home"] .feature:hover {
  border-color: rgba(var(--accent-rgb), 0.3);
  transform: translateY(-2px);
}
[data-page="home"] .feature::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--accent-rgb), 0.10), transparent 60%);
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}
[data-page="home"] .feature:hover::before { opacity: 1; }
[data-page="home"] .feature .corner {
  position: absolute; top: 0; right: 0;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  color: var(--muted-2);
  padding: 10px 14px;
  opacity: 0.6;
}
[data-page="home"] .feature .icon {
  width: 44px; height: 44px;
  border-radius: 11px;
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  display: flex; align-items: center; justify-content: center;
  color: var(--primary-2);
  margin-bottom: 18px;
}
[data-page="home"] .feature h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
[data-page="home"] .feature p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 18px;
}
[data-page="home"] .feature .arrow {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--primary-2);
  font-size: 13px;
  font-weight: 500;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
[data-page="home"] .feature .arrow svg { transition: transform .2s; }
[data-page="home"] .feature:hover .arrow svg { transform: translateX(3px); }
[data-page="home"] .feature .underline {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.5), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s;
}
[data-page="home"] .feature:hover .underline { transform: scaleX(1); }

[data-page="home"] section.topics {
  max-width: 1280px; margin: 0 auto;
  padding: 40px 28px 80px;
}
[data-page="home"] .topic-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
@media (max-width: 1024px) { [data-page="home"] .topic-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px) { [data-page="home"] .topic-row { grid-template-columns: repeat(2, 1fr); } }
[data-page="home"] .topic-chip {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 6px;
  transition: background .15s, border-color .15s;
  text-decoration: none;
  color: inherit;
}
[data-page="home"] .topic-chip:hover { background: rgba(255, 255, 255, 0.05); border-color: var(--border-strong); }
[data-page="home"] .topic-chip .num {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  color: rgba(var(--accent-rgb), 0.7);
  letter-spacing: 0.06em;
}
[data-page="home"] .topic-chip .ttl { font-weight: 500; font-size: 14.5px; }
[data-page="home"] .topic-chip .meta { font-size: 12px; color: var(--muted-2); }

[data-page="home"] section.about {
  padding: 80px 28px;
}
[data-page="home"] .about-inner { max-width: 720px; margin: 0 auto; text-align: center; }
[data-page="home"] .about-inner h2 {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
[data-page="home"] .about-inner p { color: var(--muted); font-size: 16px; line-height: 1.7; }

/* ════════════════════════════════════════════════════════════════════
   PAGE: Auth  ([data-page="auth"])
   ════════════════════════════════════════════════════════════════════ */
[data-page="auth"] .auth-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 28px;
}
[data-page="auth"] .auth-card {
  width: 100%;
  max-width: 880px;
  background: var(--card-solid);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 30px 80px -20px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(var(--accent-rgb), 0.06),
    0 0 60px -10px rgba(var(--accent-rgb), 0.15);
  position: relative;
}
[data-page="auth"] .auth-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.5), transparent);
}
@media (max-width: 800px) {
  [data-page="auth"] .auth-card { grid-template-columns: 1fr; max-width: 460px; }
}

[data-page="auth"] .auth-side {
  padding: 32px 32px 28px;
  border-right: 1px solid var(--border);
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(var(--accent-rgb), 0.07), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent);
  display: flex; flex-direction: column; gap: 22px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--muted);
}
@media (max-width: 800px) {
  [data-page="auth"] .auth-side { border-right: 0; border-bottom: 1px solid var(--border); }
}
[data-page="auth"] .auth-side .badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 11px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--primary-2);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  width: fit-content;
  text-transform: none;
}
[data-page="auth"] .auth-side .badge .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 6px var(--ok);
  animation: pulseDot 2s infinite;
}
[data-page="auth"] .auth-side h2 {
  font-family: "Inter", sans-serif;
  font-size: 26px;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}
[data-page="auth"] .auth-side h2 .accent {
  background: linear-gradient(120deg, var(--primary-2), white 55%, var(--primary-2));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
[data-page="auth"] .auth-side .lead {
  font-family: "Inter", sans-serif;
  font-size: 13.5px; color: var(--muted);
  line-height: 1.55;
  margin: -8px 0 0;
}
[data-page="auth"] .term {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.7;
}
[data-page="auth"] .term .prompt { color: rgba(var(--accent-rgb), 0.9); }
[data-page="auth"] .term .ok { color: var(--ok); }
[data-page="auth"] .term .cmd { color: var(--fg); }
[data-page="auth"] .term .cur::after {
  content: "▊";
  color: var(--primary-2);
  animation: blink 1s steps(2) infinite;
  margin-left: 2px;
}
@keyframes blink { 50% { opacity: 0; } }
[data-page="auth"] .stats-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: auto;
}
[data-page="auth"] .stat-tile {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}
[data-page="auth"] .stat-tile .k {
  font-size: 9.5px; letter-spacing: 0.1em;
  color: var(--muted-2); text-transform: uppercase;
}
[data-page="auth"] .stat-tile .v {
  font-size: 18px; color: var(--fg);
  font-weight: 600; margin-top: 4px;
  font-variant-numeric: tabular-nums;
  font-family: "Inter", sans-serif; letter-spacing: -0.01em;
}
[data-page="auth"] .sys-rows { display: grid; gap: 6px; }
[data-page="auth"] .sys-row { display: flex; justify-content: space-between; gap: 12px; }
[data-page="auth"] .sys-row .k { color: var(--muted-2); }
[data-page="auth"] .sys-row .v { color: var(--fg); text-align: right; }

[data-page="auth"] .auth-form {
  padding: 32px 36px 30px;
  display: flex; flex-direction: column; gap: 18px;
  position: relative;
}
[data-page="auth"] .form-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
}
[data-page="auth"] .tab-toggle {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.02);
}
[data-page="auth"] .tab-toggle button {
  appearance: none; border: 0; background: transparent;
  padding: 6px 12px;
  border-radius: 6px;
  color: var(--muted);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.06em;
  cursor: pointer;
  text-transform: uppercase;
  transition: color .15s, background .15s;
}
[data-page="auth"] .tab-toggle button:hover { color: var(--fg); }
[data-page="auth"] .tab-toggle button.active {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--primary-2);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.3) inset;
}
[data-page="auth"] .req-line {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px; color: var(--muted-2);
  letter-spacing: 0.05em;
}
[data-page="auth"] .form-title {
  font-size: 24px; font-weight: 600;
  letter-spacing: -0.02em;
  margin: 4px 0 0;
}
[data-page="auth"] .form-sub { color: var(--muted); font-size: 13.5px; margin: -8px 0 8px; line-height: 1.5; }

[data-page="auth"] .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
[data-page="auth"] .field label {
  display: flex; justify-content: flex-start; gap: 6px; align-items: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  color: var(--muted-2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
[data-page="auth"] .field label .opt { color: var(--muted-2); text-transform: none; letter-spacing: 0; }
[data-page="auth"] .field .input-wrap { position: relative; display: flex; align-items: center; }
[data-page="auth"] .field input {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-strong);
  color: var(--fg);
  border-radius: 9px;
  padding: 11px 12px 11px 36px;
  font-size: 14px;
  font-family: "JetBrains Mono", monospace;
  outline: none;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
[data-page="auth"] .field input:focus {
  border-color: rgba(var(--accent-rgb), 0.7);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}
[data-page="auth"] .field.error input { border-color: rgba(239, 68, 68, 0.6); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1); }
[data-page="auth"] .field .icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px;
  color: var(--muted-2);
  pointer-events: none;
}
[data-page="auth"] .field .reveal {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  appearance: none; border: 0; background: transparent; cursor: pointer;
  padding: 6px; border-radius: 6px;
  color: var(--muted-2);
  display: inline-flex;
}
[data-page="auth"] .field .reveal:hover { color: var(--fg); background: rgba(255, 255, 255, 0.05); }
[data-page="auth"] .field .err {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: #fca5a5;
  display: flex; align-items: center; gap: 6px;
}
[data-page="auth"] .field .err::before { content: "⚠"; }
[data-page="auth"] .pw-strength { display: grid; gap: 8px; margin-top: 4px; }
[data-page="auth"] .pw-bar { display: flex; gap: 4px; }
[data-page="auth"] .pw-bar span {
  flex: 1; height: 3px; border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  transition: background .2s;
}
[data-page="auth"] .pw-bar span.s1 { background: var(--bad); }
[data-page="auth"] .pw-bar span.s2 { background: var(--warn); }
[data-page="auth"] .pw-bar span.s3 { background: var(--primary); }
[data-page="auth"] .pw-bar span.s4 { background: var(--ok); }
[data-page="auth"] .pw-checks {
  display: flex; flex-wrap: wrap; gap: 6px 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--muted-2);
}
[data-page="auth"] .pw-checks .check { display: inline-flex; align-items: center; gap: 4px; transition: color .15s; }
[data-page="auth"] .pw-checks .check.valid { color: #86efac; }
[data-page="auth"] .pw-checks .check .mark { display: inline-block; width: 12px; }

[data-page="auth"] .submit-row { margin-top: 6px; display: flex; flex-direction: column; gap: 12px; }
[data-page="auth"] .btn-submit {
  width: 100%;
  appearance: none; border: 0;
  background: var(--primary);
  color: white;
  font-family: "JetBrains Mono", monospace;
  font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.1em;
  padding: 13px 16px;
  border-radius: 10px;
  cursor: pointer;
  text-transform: uppercase;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 6px 22px -8px rgba(var(--accent-rgb), 0.7);
  transition: transform .1s, background .15s, opacity .15s;
}
[data-page="auth"] .btn-submit:hover:not(:disabled) { background: color-mix(in oklab, var(--primary) 90%, white); }
[data-page="auth"] .btn-submit:active { transform: translateY(1px); }
[data-page="auth"] .btn-submit:disabled { cursor: not-allowed; opacity: 0.7; }
[data-page="auth"] .btn-submit.is-ok { background: var(--ok); }
[data-page="auth"] .btn-submit .arrow { display: inline-block; transition: transform .2s; }
[data-page="auth"] .btn-submit:hover:not(:disabled) .arrow { transform: translateX(3px); }
/* OAuth — divider "ou" + botão Google */
[data-page="auth"] .oauth-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 18px 0 14px;
  color: var(--muted-2);
  font-family: "JetBrains Mono", monospace; font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
}
[data-page="auth"] .oauth-divider::before,
[data-page="auth"] .oauth-divider::after {
  content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.08);
}
[data-page="auth"] .btn-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 10px 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--fg);
  font-family: inherit; font-size: 13.5px; font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .12s;
}
[data-page="auth"] .btn-google:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.22);
}
[data-page="auth"] .btn-google:active { transform: translateY(1px); }
[data-page="auth"] .btn-google svg { flex-shrink: 0; }

[data-page="auth"] .form-foot { text-align: center; font-size: 13px; color: var(--muted); margin-top: 14px; }
[data-page="auth"] .form-foot button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  color: var(--primary-2);
  font-weight: 500; font-size: 13px;
  border-bottom: 1px dashed rgba(var(--accent-rgb), 0.4);
  padding-bottom: 1px;
}
[data-page="auth"] .form-foot button:hover { border-bottom-color: var(--primary-2); }
[data-page="auth"] .auth-note {
  text-align: center;
  padding: 18px 28px 28px;
  color: var(--muted-2);
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
}

/* ════════════════════════════════════════════════════════════════════
   PAGE: Topics  ([data-page="topics"])
   ════════════════════════════════════════════════════════════════════ */
[data-page="topics"] .topics-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 28px 80px;
  width: 100%;
  flex: 1;
}
[data-page="topics"] .cat-rail {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin: 22px 0 36px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
[data-page="topics"] .cat-pill {
  appearance: none; border: 0; background: transparent;
  color: var(--muted);
  padding: 8px 12px 7px;
  border-bottom: 2px solid transparent;
  font-size: 12.5px;
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color .15s, border-color .15s;
  display: inline-flex; align-items: center; gap: 7px;
}
[data-page="topics"] .cat-pill:hover { color: var(--fg); }
[data-page="topics"] .cat-pill.active {
  color: var(--primary-2);
  border-bottom-color: var(--primary);
}
[data-page="topics"] .cat-pill .count {
  font-size: 10px;
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 6px; border-radius: 5px;
  color: var(--muted-2);
}
[data-page="topics"] .cat-pill.active .count { background: rgba(var(--accent-rgb), 0.16); color: var(--primary-2); }

[data-page="topics"] .cat-section { margin-bottom: 48px; scroll-margin-top: 90px; }
[data-page="topics"] .cat-header {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  gap: 16px; flex-wrap: wrap;
}
[data-page="topics"] .cat-header .ttl {
  display: flex; align-items: baseline; gap: 12px;
}
[data-page="topics"] .cat-header h2 {
  font-size: 22px; font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}
[data-page="topics"] .cat-header .num {
  display: inline-flex; align-items: baseline; gap: 7px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg);
}
[data-page="topics"] .cat-header .num::before {
  content: "▸"; color: rgba(var(--accent-rgb), 0.85);
}
[data-page="topics"] .cat-header .num .c {
  color: rgba(var(--accent-rgb), 0.7);
}
[data-page="topics"] .progress-meta {
  display: flex; align-items: center; gap: 12px;
  color: var(--muted-2);
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  letter-spacing: 0.05em;
}
[data-page="topics"] .cat-progress {
  width: 120px; height: 4px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.06); overflow: hidden;
}
[data-page="topics"] .cat-progress > div {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
  box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.5);
}

[data-page="topics"] .topic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 980px) { [data-page="topics"] .topic-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { [data-page="topics"] .topic-grid { grid-template-columns: 1fr; } }

[data-page="topics"] .topic-card {
  position: relative;
  padding: 20px 20px 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  text-decoration: none;
  color: inherit;
  transition: border-color .2s, transform .2s, background .2s;
  display: flex; flex-direction: column; gap: 8px;
  overflow: hidden;
}
[data-page="topics"] .topic-card:hover {
  border-color: rgba(var(--accent-rgb), 0.4);
  transform: translateY(-2px);
  background: rgba(15, 18, 25, 0.75);
}
[data-page="topics"] .topic-card::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--accent-rgb), 0.08), transparent 60%);
  opacity: 0; transition: opacity .25s; pointer-events: none;
}
[data-page="topics"] .topic-card:hover::after { opacity: 1; }
[data-page="topics"] .topic-card .head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
[data-page="topics"] .topic-card .idx {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  color: var(--muted-2);
  letter-spacing: 0.08em;
}
[data-page="topics"] .topic-card h3 {
  font-size: 15.5px; font-weight: 600;
  margin: 2px 0 0;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
[data-page="topics"] .topic-card p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  margin: 4px 0 0;
  flex: 1;
}
[data-page="topics"] .topic-card .meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  color: var(--muted-2);
}
[data-page="topics"] .topic-card .meta .right { display: flex; align-items: center; gap: 8px; }
[data-page="topics"] .topic-card .arrow {
  color: var(--primary-2);
  transition: transform .2s;
  display: inline-block;
}
[data-page="topics"] .topic-card:hover .arrow { transform: translateX(3px); }

[data-page="topics"] .empty {
  text-align: center;
  padding: 60px 28px;
  color: var(--muted);
}
[data-page="topics"] .empty .glyph {
  font-family: "JetBrains Mono", monospace;
  font-size: 60px;
  color: var(--muted-2);
  margin-bottom: 16px;
  opacity: 0.4;
}

/* ════════════════════════════════════════════════════════════════════
   PAGE: Topic Details  ([data-page="topic"])
   ════════════════════════════════════════════════════════════════════ */
[data-page="topic"] .detail-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 28px 80px;
  width: 100%;
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 40px;
}
@media (max-width: 980px) {
  [data-page="topic"] .detail-main { grid-template-columns: 1fr; }
  [data-page="topic"] aside.toc { display: none; }
}

[data-page="topic"] article.topic { min-width: 0; }
[data-page="topic"] article.topic .meta-strip {
  display: flex; gap: 16px; flex-wrap: wrap;
  margin: 14px 0 28px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
[data-page="topic"] article.topic .meta-strip .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary-2); display: inline-block;
  vertical-align: middle; margin: 0 4px 2px 0;
  box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.5);
}
[data-page="topic"] .topic-sec { scroll-margin-top: 92px; }
[data-page="topic"] article.topic h2 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 36px 0 12px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
[data-page="topic"] article.topic h2 .num {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: rgba(var(--accent-rgb), 0.7);
  margin-right: 10px;
  letter-spacing: 0.08em;
}
[data-page="topic"] article.topic h3 { font-size: 16px; font-weight: 600; margin: 22px 0 8px; }
[data-page="topic"] article.topic p {
  color: var(--muted);
  line-height: 1.65;
  font-size: 15px;
  margin: 0 0 14px;
  max-width: 70ch;
  text-wrap: pretty;
  white-space: pre-wrap;
}
[data-page="topic"] article.topic p strong { color: var(--fg); font-weight: 600; }
[data-page="topic"] article.topic p code, [data-page="topic"] article.topic li code {
  font-family: "JetBrains Mono", monospace;
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--primary-2);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.88em;
  border: 1px solid rgba(var(--accent-rgb), 0.2);
}
[data-page="topic"] article.topic ul { color: var(--muted); padding-left: 22px; line-height: 1.7; margin: 0 0 16px; }
[data-page="topic"] article.topic ul li { margin: 4px 0; }
[data-page="topic"] article.topic ul li::marker { color: rgba(var(--accent-rgb), 0.8); }

[data-page="topic"] pre.code {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  overflow-x: auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 12.5px;
  color: #cbd5e1;
  line-height: 1.55;
  margin: 16px 0;
}

[data-page="topic"] .quiz-cta {
  margin-top: 48px;
  padding: 24px 28px;
  border-radius: 14px;
  background:
    radial-gradient(ellipse 80% 80% at 100% 0%, rgba(var(--accent-rgb), 0.18), transparent 60%),
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.10), rgba(var(--accent-rgb), 0.02));
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  flex-wrap: wrap;
}
[data-page="topic"] .quiz-cta .left { display: flex; gap: 16px; align-items: center; }
[data-page="topic"] .quiz-cta .icon-box {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  display: flex; align-items: center; justify-content: center;
  color: var(--primary-2);
  flex: 0 0 auto;
}
[data-page="topic"] .quiz-cta h3 { font-size: 17px; font-weight: 600; margin: 0 0 3px; letter-spacing: -0.01em; }
[data-page="topic"] .quiz-cta p { font-size: 13px; color: var(--muted); margin: 0; }

[data-page="topic"] aside.toc {
  position: sticky;
  top: 92px;
  align-self: start;
  font-size: 13.5px;
}
[data-page="topic"] aside.toc .toc-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 16px 18px;
}
[data-page="topic"] aside.toc .ttl {
  font-size: 10.5px;
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 12px;
}
[data-page="topic"] aside.toc .ttl::before { content: "▸ "; color: rgba(var(--accent-rgb), 0.7); }
[data-page="topic"] aside.toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
[data-page="topic"] aside.toc a {
  display: flex; gap: 10px; align-items: baseline;
  color: var(--muted);
  text-decoration: none;
  padding: 5px 0 5px 10px;
  transition: color .15s;
  font-size: 13px;
  line-height: 1.4;
  border-left: 1px solid transparent;
  cursor: pointer;
}
[data-page="topic"] aside.toc a:hover { color: var(--fg); }
[data-page="topic"] aside.toc a.active { color: var(--primary-2); border-left-color: var(--primary-2); }
[data-page="topic"] aside.toc a .n {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--muted-2);
}
[data-page="topic"] aside.toc .toc-progress {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
[data-page="topic"] aside.toc .toc-progress .lbl {
  display: flex; justify-content: space-between;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  color: var(--muted-2);
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
[data-page="topic"] aside.toc .toc-progress .lbl b { color: var(--primary-2); font-weight: 600; }
[data-page="topic"] aside.toc .toc-progress .bar { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
[data-page="topic"] aside.toc .toc-progress .bar > div { height: 100%; background: linear-gradient(90deg, var(--primary), var(--primary-2)); transition: width .25s; }

[data-page="topic"] .topic-nav {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: 36px;
}
[data-page="topic"] .topic-nav a {
  text-decoration: none; color: inherit;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: background .15s, border-color .15s;
}
[data-page="topic"] .topic-nav a:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(var(--accent-rgb), 0.3); }
[data-page="topic"] .topic-nav a .lbl {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  color: var(--muted-2);
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
[data-page="topic"] .topic-nav a .ttl { font-size: 14px; font-weight: 500; }
[data-page="topic"] .topic-nav a.next { text-align: right; }

/* ════════════════════════════════════════════════════════════════════
   PAGE: Quiz  ([data-page="quiz"])
   ════════════════════════════════════════════════════════════════════ */
[data-page="quiz"] .quiz-main {
  max-width: 880px;
  margin: 0 auto;
  padding: 24px 28px 80px;
  width: 100%;
  flex: 1;
}
[data-page="quiz"] .mission-hud {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  align-items: center;
  margin: 22px 0;
  padding: 14px 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
[data-page="quiz"] .mission-hud .mission-title {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--muted-2);
  letter-spacing: 0.05em;
}
[data-page="quiz"] .mission-hud .mission-title b {
  color: var(--fg);
  font-weight: 600;
  letter-spacing: 0;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  margin-right: 8px;
}
[data-page="quiz"] .timer {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border);
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  color: var(--fg);
  font-weight: 600;
}
[data-page="quiz"] .timer .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok);
  animation: pulseDot 1.4s infinite;
}
[data-page="quiz"] .abort-btn {
  appearance: none;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--muted);
  padding: 7px 12px;
  border-radius: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
[data-page="quiz"] .abort-btn:hover { color: #fca5a5; border-color: rgba(239, 68, 68, 0.4); }

[data-page="quiz"] .progress-row {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 18px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  color: var(--muted-2);
  letter-spacing: 0.04em;
}
[data-page="quiz"] .progress-bar {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
[data-page="quiz"] .progress-bar > div {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
  box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.5);
  transition: width 0.4s ease;
}
[data-page="quiz"] .question-dots { display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap; }
[data-page="quiz"] .question-dots .dot {
  width: 26px; height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
  border: 0; padding: 0;
  transition: background .15s, transform .15s;
}
[data-page="quiz"] .question-dots .dot.answered { background: rgba(var(--accent-rgb), 0.4); }
[data-page="quiz"] .question-dots .dot.current { background: var(--primary); transform: scaleY(1.6); }
[data-page="quiz"] .question-dots .dot:hover { background: rgba(var(--accent-rgb), 0.6); }

[data-page="quiz"] .q-card {
  padding: 28px 30px;
  background: var(--card-solid);
  border: 1px solid var(--border);
  border-radius: 14px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: relative;
}
[data-page="quiz"] .q-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.4), transparent);
}
[data-page="quiz"] .q-meta { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
[data-page="quiz"] .q-meta .tag {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  border: 1px solid var(--border);
  letter-spacing: 0.05em;
}
[data-page="quiz"] .q-text {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  margin: 0 0 24px;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
[data-page="quiz"] .q-text .num {
  font-family: "JetBrains Mono", monospace;
  color: rgba(var(--accent-rgb), 0.8);
  margin-right: 12px;
  font-size: 16px;
}
[data-page="quiz"] .options { display: grid; gap: 10px; }
[data-page="quiz"] .option {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
  text-align: left;
  font-family: inherit;
  color: inherit;
  font-size: 14.5px;
  line-height: 1.45;
  width: 100%;
}
[data-page="quiz"] .option:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border-strong);
}
[data-page="quiz"] .option .label {
  width: 26px; height: 26px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  transition: background .15s, color .15s, border-color .15s;
}
[data-page="quiz"] .option .body { flex: 1; padding-top: 2px; }
[data-page="quiz"] .option.selected {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
}
[data-page="quiz"] .option.selected .label {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}
[data-page="quiz"] .q-nav {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 28px;
  gap: 16px;
}
[data-page="quiz"] .q-status {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--muted-2);
  letter-spacing: 0.04em;
}
[data-page="quiz"] .q-status b { color: var(--primary-2); }

[data-page="quiz"] .result {
  padding: 36px 32px;
  background: var(--card-solid);
  border: 1px solid var(--border);
  border-radius: 14px;
  text-align: center;
  backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden;
}
[data-page="quiz"] .result .lbl {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--primary-2);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
[data-page="quiz"] .result h2 {
  font-size: 28px; font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
}
[data-page="quiz"] .score-circle {
  width: 180px; height: 180px;
  margin: 0 auto 22px;
  position: relative;
}
[data-page="quiz"] .score-circle svg { transform: rotate(-90deg); width: 100%; height: 100%; }
[data-page="quiz"] .score-circle .track { stroke: rgba(255, 255, 255, 0.08); fill: none; stroke-width: 9; }
[data-page="quiz"] .score-circle .fill {
  fill: none; stroke-width: 9; stroke-linecap: round;
  stroke: var(--primary);
  filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.6));
  transition: stroke-dashoffset 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
[data-page="quiz"] .score-circle .center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
[data-page="quiz"] .score-circle .pct {
  font-size: 44px; font-weight: 600;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
[data-page="quiz"] .score-circle .of {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--muted-2);
  letter-spacing: 0.08em;
  margin-top: 2px;
}
[data-page="quiz"] .stat-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin: 22px 0;
}
[data-page="quiz"] .stat-tile {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}
[data-page="quiz"] .stat-tile .k {
  font-size: 10px; letter-spacing: 0.1em;
  color: var(--muted-2); text-transform: uppercase;
  font-family: "JetBrains Mono", monospace;
}
[data-page="quiz"] .stat-tile .v {
  font-size: 18px; font-weight: 600; margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
[data-page="quiz"] .result .actions { display: flex; gap: 10px; justify-content: center; margin-top: 8px; flex-wrap: wrap; }

[data-page="quiz"] .review {
  margin-top: 24px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
[data-page="quiz"] .review-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; color: var(--muted-2);
  letter-spacing: 0.1em; text-transform: uppercase;
}
[data-page="quiz"] .review-head::before { content: "▸ "; color: rgba(var(--accent-rgb), 0.7); }
[data-page="quiz"] .review-item {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}
[data-page="quiz"] .review-item:last-child { border-bottom: 0; }
[data-page="quiz"] .review-item .row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  margin-bottom: 8px;
}
[data-page="quiz"] .review-item .q { flex: 1; font-size: 14.5px; font-weight: 500; line-height: 1.4; }
[data-page="quiz"] .review-item .q .num {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px; color: var(--muted-2);
  margin-right: 8px;
}
[data-page="quiz"] .review-item .ans {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--muted);
}
[data-page="quiz"] .review-item .ans .lbl { color: var(--muted-2); }
[data-page="quiz"] .review-item .ans .you {
  padding: 2px 7px; border-radius: 4px;
  background: rgba(239, 68, 68, 0.1);
  color: #fca5a5;
}
[data-page="quiz"] .review-item .ans .you.ok { background: rgba(34, 197, 94, 0.1); color: #86efac; }
[data-page="quiz"] .review-item .ans .right {
  padding: 2px 7px; border-radius: 4px;
  background: rgba(34, 197, 94, 0.1); color: #86efac;
}
[data-page="quiz"] .review-item .expl {
  margin-top: 6px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
  border-left: 2px solid rgba(var(--accent-rgb), 0.4);
  border-radius: 0 6px 6px 0;
  font-size: 13px; color: var(--muted);
  line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════════════
   PAGE: Subnet Calculator  ([data-page="subnet"])
   ════════════════════════════════════════════════════════════════════ */
[data-page="subnet"] .calc-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 28px 80px;
  width: 100%;
  flex: 1;
  display: flex; flex-direction: column; gap: 22px;
}
[data-page="subnet"] .input-panel,
[data-page="subnet"] .binary,
[data-page="subnet"] .vlsm {
  padding: 22px 26px;
  background: var(--card-solid);
  border: 1px solid var(--border);
  border-radius: 14px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: relative;
}
[data-page="subnet"] .input-panel::before,
[data-page="subnet"] .binary::before,
[data-page="subnet"] .vlsm::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.4), transparent);
}
[data-page="subnet"] .binary { overflow-x: auto; }
[data-page="subnet"] .input-panel .card-head { margin: -22px -26px 18px; }
[data-page="subnet"] .input-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
  align-items: end;
}
@media (max-width: 720px) { [data-page="subnet"] .input-row { grid-template-columns: 1fr; } }

[data-page="subnet"] .result-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 980px) { [data-page="subnet"] .result-grid { grid-template-columns: repeat(2, 1fr); } }
[data-page="subnet"] .res-tile {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.02);
}
[data-page="subnet"] .res-tile .k {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  color: var(--muted-2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
[data-page="subnet"] .res-tile .v {
  font-family: "JetBrains Mono", monospace;
  font-size: 18px;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.005em;
  word-break: break-all;
}
[data-page="subnet"] .res-tile .v .muted { color: var(--muted); font-weight: 400; }
[data-page="subnet"] .res-tile.accent .v { color: var(--primary-2); }

[data-page="subnet"] .bin-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 16px; gap: 16px; flex-wrap: wrap;
}
[data-page="subnet"] .bin-head .ttl {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--muted-2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
[data-page="subnet"] .bin-head .ttl::before { content: "▸ "; color: rgba(var(--accent-rgb), 0.7); }
[data-page="subnet"] .bin-head .legend {
  display: flex; gap: 14px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--muted-2);
}
[data-page="subnet"] .bin-head .legend .item { display: inline-flex; align-items: center; gap: 6px; }
[data-page="subnet"] .bin-head .legend .sw { width: 10px; height: 10px; border-radius: 2px; }
[data-page="subnet"] .bin-head .legend .sw.net { background: rgba(var(--accent-rgb), 0.55); border: 1px solid rgba(var(--accent-rgb), 0.7); }
[data-page="subnet"] .bin-head .legend .sw.host { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); }
[data-page="subnet"] .bin-row {
  display: grid;
  grid-template-columns: 90px 1fr 110px;
  gap: 14px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border);
  font-family: "JetBrains Mono", monospace;
  min-width: 840px;
}
[data-page="subnet"] .bin-row:last-of-type { border-bottom: 0; }
[data-page="subnet"] .bin-row .lbl {
  font-size: 11px;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
[data-page="subnet"] .bin-row .lbl b {
  display: block; color: var(--fg); font-weight: 600;
  font-size: 13px;
  letter-spacing: 0;
  margin-bottom: 1px;
}
[data-page="subnet"] .octets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
[data-page="subnet"] .octet {
  display: flex; gap: 1px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  padding: 4px;
}
[data-page="subnet"] .bit {
  flex: 1;
  aspect-ratio: 1;
  max-width: 26px;
  min-width: 16px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  transition: background .15s;
}
[data-page="subnet"] .bit.network {
  background: rgba(var(--accent-rgb), 0.55);
  color: white;
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.7);
}
[data-page="subnet"] .bit.host.on { background: rgba(255, 255, 255, 0.12); color: var(--fg); }
[data-page="subnet"] .bit.host.off { background: rgba(255, 255, 255, 0.03); color: var(--muted-2); }
[data-page="subnet"] .bit.network.off { background: rgba(var(--accent-rgb), 0.15); color: var(--muted); box-shadow: none; }
[data-page="subnet"] .bin-row .decimal {
  text-align: right;
  font-size: 13px;
  color: var(--fg);
  font-weight: 600;
}
[data-page="subnet"] .cidr-marker {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(var(--accent-rgb), 0.06);
  border: 1px dashed rgba(var(--accent-rgb), 0.3);
  border-radius: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--muted);
  display: flex; align-items: center; gap: 10px;
}
[data-page="subnet"] .cidr-marker b { color: var(--primary-2); }

[data-page="subnet"] .vlsm-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px; gap: 12px; flex-wrap: wrap;
}
[data-page="subnet"] .vlsm-head h3 {
  font-size: 16px; font-weight: 600; margin: 0;
  display: flex; align-items: center; gap: 10px;
  letter-spacing: -0.01em;
}
[data-page="subnet"] .vlsm-head h3 .tag {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  padding: 2px 7px; border-radius: 4px;
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--primary-2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
[data-page="subnet"] .req-list { display: grid; gap: 8px; }
[data-page="subnet"] .req-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 40px;
  gap: 10px;
  align-items: center;
}
/* Esconder spinners do <input type="number"> dos hosts. */
[data-page="subnet"] .req-row input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
[data-page="subnet"] .req-row input[type="number"]::-webkit-outer-spin-button,
[data-page="subnet"] .req-row input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
[data-page="subnet"] .icon-btn {
  appearance: none;
  width: 36px; height: 36px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  border-radius: 8px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color .15s, background .15s, border-color .15s;
}
[data-page="subnet"] .icon-btn:hover { color: var(--fg); background: rgba(255, 255, 255, 0.06); border-color: var(--border-strong); }
[data-page="subnet"] .icon-btn.danger:hover { color: #fca5a5; border-color: rgba(239, 68, 68, 0.4); }
[data-page="subnet"] .vlsm-table {
  margin-top: 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow-x: auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 12.5px;
}
[data-page="subnet"] .vlsm-table .vrow {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1.1fr 56px 1.1fr 1.1fr 78px;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  align-items: center;
  min-width: 760px;
}
[data-page="subnet"] .vlsm-table .vrow:last-child { border-bottom: 0; }
[data-page="subnet"] .vlsm-table .vrow.head {
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted-2);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 9px 14px;
}
[data-page="subnet"] .vlsm-table .vrow b { color: var(--primary-2); font-weight: 600; }
[data-page="subnet"] .vlsm-table .vrow .nm { font-family: "Inter", sans-serif; font-weight: 500; }
/* ─── VLSMTree — árvore binária de divisão recursiva ────────────────── */

[data-page="subnet"] .vlsm-tree {
  padding: 22px 26px;
  background: var(--card-solid);
  border: 1px solid var(--border);
  border-radius: 14px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: relative;
}
[data-page="subnet"] .vlsm-tree::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.4), transparent);
}

[data-page="subnet"] .vlsm-tree-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px; gap: 12px; flex-wrap: wrap;
}
[data-page="subnet"] .vlsm-tree-head h3 {
  font-size: 16px; font-weight: 600; margin: 0;
  display: flex; align-items: center; gap: 10px;
}
[data-page="subnet"] .vlsm-tree-head h3 .tag {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  padding: 2px 7px; border-radius: 4px;
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--primary-2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
[data-page="subnet"] .vlsm-tree-head .legend {
  display: flex; align-items: center; gap: 14px;
  font-size: 11.5px;
  color: var(--muted);
  font-family: "JetBrains Mono", monospace;
}
[data-page="subnet"] .vlsm-tree-head .legend .lg {
  display: inline-flex; align-items: center; gap: 6px;
}
[data-page="subnet"] .vlsm-tree-head .legend .sw {
  display: inline-block; width: 10px; height: 10px; border-radius: 3px; border: 1px solid;
}
[data-page="subnet"] .vlsm-tree-head .legend .sw.alloc {
  background: rgba(34,197,94,0.18); border-color: rgba(34,197,94,0.55);
}
[data-page="subnet"] .vlsm-tree-head .legend .sw.free {
  background: rgba(234,179,8,0.14); border-color: rgba(234,179,8,0.55);
}
[data-page="subnet"] .vlsm-tree-head .legend .sw.split {
  background: rgba(var(--accent-rgb), 0.12); border-color: rgba(var(--accent-rgb), 0.55);
}

[data-page="subnet"] .vlsm-tree-svg-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 0 2px;
  margin: 0 -2px;
  mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}
[data-page="subnet"] .vlsm-tree-svg {
  display: block;
  width: 100%;
  height: auto;
}

[data-page="subnet"] .vt-node {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  gap: 4px;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: rgba(15, 18, 25, 0.92);
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.92);
  transform-origin: 50% 50%;
  transition: opacity 280ms ease-out, transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
[data-page="subnet"] .vt-node.in {
  opacity: 1;
  transform: scale(1);
}
[data-page="subnet"] .vt-node .ip {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
  line-height: 1.2;
}
[data-page="subnet"] .vt-node .name {
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.25;
  min-height: 1em;
}
[data-page="subnet"] .vt-node::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
}

[data-page="subnet"] .vt-node.split {
  border-color: rgba(var(--accent-rgb), 0.45);
  background: linear-gradient(rgba(var(--accent-rgb), 0.05), rgba(var(--accent-rgb), 0.05)), rgba(15,18,25,0.92);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.08), 0 6px 16px -10px rgba(var(--accent-rgb), 0.5);
}
[data-page="subnet"] .vt-node.split::before {
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.7), transparent);
}

[data-page="subnet"] .vt-node.alloc {
  border-color: rgba(34, 197, 94, 0.55);
  background: linear-gradient(rgba(34,197,94,0.08), rgba(34,197,94,0.08)), rgba(15,18,25,0.92);
  box-shadow: 0 0 0 1px rgba(34,197,94,0.10), 0 8px 18px -10px rgba(34,197,94,0.45);
}
[data-page="subnet"] .vt-node.alloc::before {
  background: linear-gradient(90deg, transparent, rgba(134, 239, 172, 0.85), transparent);
}
[data-page="subnet"] .vt-node.alloc .name { color: #86efac; }

[data-page="subnet"] .vt-node.free {
  border-color: rgba(234, 179, 8, 0.55);
  background: linear-gradient(rgba(234,179,8,0.06), rgba(234,179,8,0.06)), rgba(15,18,25,0.92);
  box-shadow: 0 0 0 1px rgba(234,179,8,0.08), 0 6px 16px -10px rgba(234,179,8,0.4);
}
[data-page="subnet"] .vt-node.free::before {
  background: linear-gradient(90deg, transparent, rgba(252,211,77,0.7), transparent);
}
[data-page="subnet"] .vt-node.free .name {
  color: #fcd34d; opacity: 0.85; font-weight: 500; font-style: italic;
}

[data-page="subnet"] .vt-edge {
  fill: none;
  stroke: rgba(var(--accent-rgb), 0.35);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: var(--len, 200);
  stroke-dashoffset: var(--len, 200);
  transition: stroke-dashoffset 360ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
[data-page="subnet"] .vt-edge.in { stroke-dashoffset: 0; }

[data-page="subnet"] .vt-foot {
  margin-top: 14px;
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  color: var(--muted);
}
[data-page="subnet"] .vt-foot b { color: var(--primary-2); font-weight: 600; }
[data-page="subnet"] .vt-foot .dot {
  display: inline-block; width: 4px; height: 4px; border-radius: 999px;
  background: var(--muted-2); vertical-align: middle; margin: 0 6px;
}

[data-page="subnet"] .vt-explain {
  margin: 16px 0 0;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.02);
  border-left: 2px solid rgba(var(--accent-rgb), 0.4);
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
}
[data-page="subnet"] .vt-explain-intro {
  margin: 0 0 8px;
  color: var(--fg);
  font-weight: 600;
}
[data-page="subnet"] .vt-explain-list {
  margin: 0;
  padding-left: 22px;
  display: flex; flex-direction: column; gap: 8px;
}
[data-page="subnet"] .vt-explain-list li::marker {
  color: rgba(var(--accent-rgb), 0.85);
  font-weight: 600;
}
[data-page="subnet"] .vt-explain strong { color: var(--fg); font-weight: 600; }
[data-page="subnet"] .vt-explain code {
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  background: rgba(var(--accent-rgb), 0.10);
  color: var(--primary-2);
  padding: 1px 5px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  [data-page="subnet"] .vt-node,
  [data-page="subnet"] .vt-edge { transition: none !important; }
  [data-page="subnet"] .vt-node { opacity: 1 !important; transform: none !important; }
  [data-page="subnet"] .vt-edge { stroke-dashoffset: 0 !important; }
}

/* ════════════════════════════════════════════════════════════════════
   PAGE: Search  ([data-page="search"])
   ════════════════════════════════════════════════════════════════════ */
[data-page="search"] .search-main {
  max-width: 980px;
  margin: 0 auto;
  padding: 24px 28px 80px;
  width: 100%;
  flex: 1;
}
[data-page="search"] .big-search { margin-bottom: 24px; position: relative; }
[data-page="search"] .big-search input {
  width: 100%;
  background: rgba(15, 18, 25, 0.85);
  border: 1px solid var(--border-strong);
  color: var(--fg);
  border-radius: 12px;
  padding: 16px 18px 16px 52px;
  font-size: 17px;
  font-family: "JetBrains Mono", monospace;
  outline: none;
  transition: border-color .15s, background .15s, box-shadow .15s;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
[data-page="search"] .big-search input:focus {
  border-color: rgba(var(--accent-rgb), 0.6);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.12);
}
[data-page="search"] .big-search svg {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--primary-2);
}
[data-page="search"] .meta-line {
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  color: var(--muted-2);
  letter-spacing: 0.05em;
  margin-bottom: 22px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
}
[data-page="search"] .meta-line b { color: var(--primary-2); }
[data-page="search"] .meta-line .filters { display: flex; gap: 6px; flex-wrap: wrap; }
[data-page="search"] .filter-chip {
  appearance: none;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 5px 11px;
  border-radius: 999px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  cursor: pointer;
  text-transform: uppercase;
  transition: color .15s, background .15s, border-color .15s;
}
[data-page="search"] .filter-chip:hover { color: var(--fg); border-color: var(--border-strong); }
[data-page="search"] .filter-chip.active {
  color: var(--primary-2);
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.4);
}
[data-page="search"] .results { display: grid; gap: 10px; }
[data-page="search"] .result-item {
  display: block;
  padding: 16px 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 11px;
  text-decoration: none;
  color: inherit;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background .15s, border-color .15s, transform .15s;
}
[data-page="search"] .result-item:hover {
  background: rgba(15, 18, 25, 0.75);
  border-color: rgba(var(--accent-rgb), 0.3);
  transform: translateY(-1px);
}
[data-page="search"] .result-item .top {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
}
[data-page="search"] .result-item .crumb {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; color: var(--muted-2);
}
[data-page="search"] .result-item .ttl {
  font-size: 16px; font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0 0 4px;
}
[data-page="search"] .result-item .ttl mark {
  background: rgba(var(--accent-rgb), 0.22);
  color: var(--primary-2);
  padding: 1px 3px; border-radius: 3px;
  font-weight: 600;
}
[data-page="search"] .result-item .desc {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0;
}
[data-page="search"] .result-item .desc mark {
  background: rgba(var(--accent-rgb), 0.18);
  color: var(--fg);
  padding: 0 2px; border-radius: 2px;
}
[data-page="search"] .result-item .footer-meta {
  margin-top: 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  color: var(--muted-2);
  letter-spacing: 0.05em;
  display: flex; gap: 14px; flex-wrap: wrap;
}
[data-page="search"] .result-item .footer-meta .lbl { color: var(--muted-2); margin-right: 4px; }
[data-page="search"] .result-item .footer-meta .content-hit { color: rgba(var(--accent-rgb), 0.8); }
[data-page="search"] .empty {
  text-align: center;
  padding: 80px 28px;
  color: var(--muted);
}
[data-page="search"] .empty .glyph {
  font-family: "JetBrains Mono", monospace;
  font-size: 80px;
  line-height: 1;
  color: var(--muted-2);
  opacity: 0.3;
  margin-bottom: 18px;
}
[data-page="search"] .empty h3 {
  font-size: 18px; font-weight: 500;
  color: var(--fg);
  margin: 0 0 8px;
}
[data-page="search"] .empty p { font-size: 13.5px; margin: 0; }
[data-page="search"] .empty .suggestions {
  margin-top: 22px;
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
}
[data-page="search"] .empty .suggestions .s {
  appearance: none;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed var(--border-strong);
  border-radius: 999px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  color: var(--muted);
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
[data-page="search"] .empty .suggestions .s:hover {
  color: var(--primary-2);
  border-color: rgba(var(--accent-rgb), 0.5);
  background: rgba(var(--accent-rgb), 0.05);
}

/* ════════════════════════════════════════════════════════════════════
   PAGE: Dashboard / My Area  ([data-page="dashboard"])
   ════════════════════════════════════════════════════════════════════ */
[data-page="dashboard"] .session-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.02);
}
[data-page="dashboard"] .session-chip .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 8px var(--ok);
  animation: pulseDot 2s infinite;
}
[data-page="dashboard"] .head-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

[data-page="dashboard"] .dash {
  max-width: 1400px; margin: 0 auto;
  padding: 24px 28px 80px;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 20px;
}
@media (max-width: 980px) {
  [data-page="dashboard"] .dash { grid-template-columns: 1fr; }
  /* Mobile: achata as colunas num único fluxo e empurra a "Próxima missão"
     para o fim. Ordem: ID · 4 cards · atividade · domínio · resultados · missão. */
  [data-page="dashboard"] .dash .col { display: contents; }
  [data-page="dashboard"] .dash .card:has(.next-target) { order: 1; }
}
[data-page="dashboard"] .col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
[data-page="dashboard"] .card-body { padding: 18px; }
[data-page="dashboard"] .card-body.tight { padding: 14px 18px; }

[data-page="dashboard"] .op-card { padding: 22px 20px; text-align: center; }
[data-page="dashboard"] .op-avatar {
  width: 88px; height: 88px;
  border-radius: 20px;
  margin: 0 auto 14px;
  background:
    radial-gradient(circle at 30% 25%, rgba(var(--accent-rgb), 0.9), rgba(var(--accent-rgb), 0.3) 60%, rgba(var(--accent-rgb), 0.1)),
    linear-gradient(135deg, #1a2230, #0e1219);
  border: 1px solid var(--border-strong);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.08), 0 12px 40px -10px rgba(var(--accent-rgb), 0.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 600;
  color: white;
  letter-spacing: -0.02em;
  position: relative;
}
[data-page="dashboard"] .op-avatar::after {
  content: ""; position: absolute; right: 4px; bottom: 4px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--ok);
  border: 2px solid var(--bg);
  box-shadow: 0 0 8px var(--ok);
}
[data-page="dashboard"] .op-callsign {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--primary-2);
  letter-spacing: 0.1em;
  margin-bottom: 2px;
}
[data-page="dashboard"] .op-name { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
[data-page="dashboard"] .op-email { font-size: 12px; color: var(--muted); margin-top: 3px; font-family: "JetBrains Mono", monospace; word-break: break-all; }
[data-page="dashboard"] .op-meta {
  margin-top: 16px;
  border-top: 1px dashed var(--border);
  padding-top: 14px;
  display: grid; gap: 8px;
  text-align: left;
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
}
[data-page="dashboard"] .op-meta .k { color: var(--muted-2); }
[data-page="dashboard"] .op-meta .v { color: var(--fg); }
[data-page="dashboard"] .op-meta .row { display: flex; justify-content: space-between; gap: 10px; }
[data-page="dashboard"] .op-actions { margin-top: 18px; display: grid; gap: 8px; }
[data-page="dashboard"] .op-actions .btn { justify-content: center; width: 100%; }

[data-page="dashboard"] .kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 700px) { [data-page="dashboard"] .kpi-row { grid-template-columns: repeat(2, 1fr); } }
[data-page="dashboard"] .kpi {
  position: relative;
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
[data-page="dashboard"] .kpi::after {
  content: ""; position: absolute; top: 0; right: 0;
  width: 70px; height: 70px;
  background: radial-gradient(circle at 70% 30%, rgba(var(--accent-rgb), 0.18), transparent 70%);
}
[data-page="dashboard"] .kpi .label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  color: var(--muted-2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
[data-page="dashboard"] .kpi .value {
  font-size: 30px; font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
[data-page="dashboard"] .kpi .value .unit { font-size: 14px; color: var(--muted); font-weight: 400; margin-left: 2px; }
[data-page="dashboard"] .kpi .delta {
  margin-top: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--ok);
  display: inline-flex; align-items: center; gap: 4px;
}
[data-page="dashboard"] .kpi .delta.muted { color: var(--muted-2); }
[data-page="dashboard"] .kpi .spark { margin-top: 8px; width: 100%; height: 28px; display: block; }

[data-page="dashboard"] .heatmap {
  display: grid;
  grid-template-columns: repeat(26, 1fr);
  gap: 4px;
  margin-top: 4px;
}
[data-page="dashboard"] .heatmap .cell {
  aspect-ratio: 1;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.04);
}
/* Cor única — célula ativa (visitou pelo menos uma vez nesse dia). */
[data-page="dashboard"] .heatmap .cell[data-v="1"] {
  background: rgba(var(--accent-rgb), 0.7);
  box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.35);
}
[data-page="dashboard"] .heatmap-legend {
  margin-top: 10px;
  display: flex; align-items: center; justify-content: space-between;
  font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--muted-2);
  letter-spacing: 0.05em; gap: 12px; flex-wrap: wrap;
}
[data-page="dashboard"] .legend-scale { display: inline-flex; align-items: center; gap: 4px; }
[data-page="dashboard"] .legend-scale span:empty { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }

[data-page="dashboard"] .mastery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 700px) { [data-page="dashboard"] .mastery { grid-template-columns: repeat(2, 1fr); } }
[data-page="dashboard"] .ring {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 10px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.02);
  text-align: center;
}
[data-page="dashboard"] .ring svg { width: 78px; height: 78px; transform: rotate(-90deg); }
[data-page="dashboard"] .ring .track { stroke: rgba(255, 255, 255, 0.07); fill: none; stroke-width: 6; }
[data-page="dashboard"] .ring .fill {
  stroke: var(--primary); fill: none; stroke-width: 6; stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(var(--accent-rgb), 0.5));
  transition: stroke-dashoffset 1s ease;
}
[data-page="dashboard"] .ring .ring-wrap { position: relative; display: flex; align-items: center; justify-content: center; }
[data-page="dashboard"] .ring .pct {
  position: absolute;
  font-family: "JetBrains Mono", monospace;
  font-size: 14px; font-weight: 600;
  color: var(--fg);
}
[data-page="dashboard"] .ring .rttl { font-size: 13px; font-weight: 500; }
[data-page="dashboard"] .ring .meta { font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--muted-2); }

[data-page="dashboard"] .log { display: grid; gap: 2px; }
[data-page="dashboard"] .log .entry {
  display: grid;
  grid-template-columns: 110px 16px 1fr auto auto;
  gap: 14px;
  padding: 11px 4px;
  border-bottom: 1px dashed var(--border);
  align-items: center;
  font-size: 13.5px;
}
[data-page="dashboard"] .log .entry:last-child { border-bottom: 0; }
[data-page="dashboard"] .log .entry:hover { background: rgba(255, 255, 255, 0.02); }
[data-page="dashboard"] .log a.entry { text-decoration: none; color: inherit; cursor: pointer; }
[data-page="dashboard"] .log .ts { font-family: "JetBrains Mono", monospace; font-size: 11.5px; color: var(--muted-2); }
[data-page="dashboard"] .log .lvl {
  width: 14px; height: 14px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-family: monospace; font-size: 9px; font-weight: 700;
  color: var(--bg);
}
[data-page="dashboard"] .log .lvl.ok { background: var(--ok); }
[data-page="dashboard"] .log .lvl.warn { background: var(--warn); }
[data-page="dashboard"] .log .lvl.alert { background: #f97316; }
[data-page="dashboard"] .log .lvl.bad { background: var(--bad); }
[data-page="dashboard"] .log .msg { color: var(--fg); min-width: 0; }
[data-page="dashboard"] .log .msg .quiz { font-weight: 500; }
[data-page="dashboard"] .log .msg .ctx {
  font-family: "JetBrains Mono", monospace; font-size: 11.5px;
  color: var(--muted-2); margin-left: 6px;
}
[data-page="dashboard"] .log .score {
  font-family: "JetBrains Mono", monospace;
  font-weight: 600; font-size: 13px;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
[data-page="dashboard"] .log .pct {
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  padding: 3px 7px;
  border-radius: 6px;
  min-width: 50px;
  text-align: center;
}
[data-page="dashboard"] .log .pct.ok { background: rgba(34, 197, 94, 0.12); color: #86efac; }
[data-page="dashboard"] .log .pct.warn { background: rgba(234, 179, 8, 0.12); color: #fcd34d; }
[data-page="dashboard"] .log .pct.alert { background: rgba(249, 115, 22, 0.12); color: #fb923c; }
[data-page="dashboard"] .log .pct.bad { background: rgba(239, 68, 68, 0.12); color: #fca5a5; }
/* Mobile: tempo em cima e o badge/score/percentagem por baixo dele,
   no espaço livre à esquerda; o título do quiz ocupa a coluna direita. */
@media (max-width: 640px) {
  [data-page="dashboard"] .log .entry {
    grid-template-columns: auto auto auto 1fr;
    grid-template-areas:
      "ts    ts    ts  msg"
      "lvl   score pct msg";
    column-gap: 8px;
    row-gap: 7px;
    align-items: center;
  }
  [data-page="dashboard"] .log .ts { grid-area: ts; }
  [data-page="dashboard"] .log .msg { grid-area: msg; align-self: start; }
  [data-page="dashboard"] .log .lvl { grid-area: lvl; }
  [data-page="dashboard"] .log .score { grid-area: score; }
  [data-page="dashboard"] .log .pct { grid-area: pct; justify-self: start; min-width: 0; }
}

[data-page="dashboard"] .mission .obj {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0;
  font-size: 13.5px;
  border-bottom: 1px dashed var(--border);
}
[data-page="dashboard"] .mission .obj:last-child { border-bottom: 0; }
[data-page="dashboard"] .mission .obj .check {
  width: 16px; height: 16px; border-radius: 4px;
  border: 1px solid var(--border-strong);
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
[data-page="dashboard"] .mission .obj.done .check { background: var(--ok); border-color: var(--ok); color: var(--bg); }
[data-page="dashboard"] .mission .obj.done { color: var(--muted); text-decoration: line-through; }
[data-page="dashboard"] .next-target {
  padding: 18px;
  background: linear-gradient(160deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-rgb), 0.02));
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: 12px;
}
[data-page="dashboard"] .next-target .lbl {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px; letter-spacing: 0.1em;
  color: rgba(var(--accent-rgb), 0.85);
  text-transform: uppercase;
  margin-bottom: 6px;
}
[data-page="dashboard"] .next-target h3 { margin: 0 0 4px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
[data-page="dashboard"] .next-target p { color: var(--muted); font-size: 13px; margin: 0 0 14px; }
[data-page="dashboard"] .progress { height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
[data-page="dashboard"] .progress > div {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
  box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.5);
}
[data-page="dashboard"] .progress-meta {
  margin-top: 6px;
  display: flex; justify-content: space-between;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px; color: var(--muted-2);
}
[data-page="dashboard"] .corner-badge {
  position: absolute; top: 14px; right: 14px;
  padding: 3px 8px;
  border-radius: 999px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase;
}
[data-page="dashboard"] .corner-badge.ok { background: rgba(34, 197, 94, 0.12); color: #86efac; border: 1px solid rgba(34, 197, 94, 0.3); }
[data-page="dashboard"] .log-empty, [data-page="dashboard"] .mission-empty {
  color: var(--muted); font-size: 13.5px; padding: 8px 0;
}

/* ════════════════════════════════════════════════════════════════════
   PAGE: Edit Profile  ([data-page="edit"])
   ════════════════════════════════════════════════════════════════════ */
[data-page="edit"] .edit-main {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 28px 80px;
  width: 100%;
  flex: 1;
  display: flex; flex-direction: column; gap: 22px;
}
[data-page="edit"] .acc-card {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 18px 22px;
  background: var(--card-solid);
  border: 1px solid var(--border);
  border-radius: 14px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: relative;
}
[data-page="edit"] .acc-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.4), transparent);
}
@media (max-width: 560px) {
  [data-page="edit"] .acc-card { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}
[data-page="edit"] .acc-avatar {
  width: 72px; height: 72px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 30% 25%, rgba(var(--accent-rgb), 0.9), rgba(var(--accent-rgb), 0.3) 60%, rgba(var(--accent-rgb), 0.1)),
    linear-gradient(135deg, #1a2230, #0e1219);
  border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 600; color: white;
  letter-spacing: -0.02em;
}
[data-page="edit"] .acc-info .name { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
[data-page="edit"] .acc-info .email {
  font-family: "JetBrains Mono", monospace;
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 3px;
  word-break: break-all;
}
[data-page="edit"] .acc-info .meta {
  margin-top: 6px;
  display: flex; gap: 12px; flex-wrap: wrap;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  color: var(--muted-2);
  letter-spacing: 0.05em;
}
[data-page="edit"] .acc-info .meta b { color: var(--primary-2); }

[data-page="edit"] .section-card {
  padding: 22px 26px;
  background: var(--card-solid);
  border: 1px solid var(--border);
  border-radius: 14px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: relative;
}
[data-page="edit"] .section-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.4), transparent);
}
[data-page="edit"] .section-card h2 {
  font-size: 17px; font-weight: 600;
  margin: 0 0 4px;
  display: flex; align-items: center; gap: 10px;
  letter-spacing: -0.01em;
}
[data-page="edit"] .section-card h2 .tag {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  padding: 2px 7px; border-radius: 4px;
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--primary-2);
  letter-spacing: 0.1em; text-transform: uppercase;
}
[data-page="edit"] .section-card .lead {
  color: var(--muted);
  font-size: 13.5px;
  margin: 0 0 18px;
  line-height: 1.5;
}
[data-page="edit"] .section-card .lead.oauth-notice {
  margin: 8px 0 0;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(var(--accent-rgb), 0.06);
  border: 1px solid rgba(var(--accent-rgb), 0.20);
}
[data-page="edit"] .section-card .lead.oauth-notice b { color: var(--fg); font-weight: 600; }
[data-page="edit"] .section-card .lead.oauth-notice a {
  color: var(--primary-2);
  border-bottom: 1px dashed rgba(var(--accent-rgb), 0.4);
}
[data-page="edit"] .section-card .lead.oauth-notice a:hover { border-bottom-color: var(--primary-2); }
[data-page="edit"] .section-card .row-of-fields { display: grid; gap: 16px; }
[data-page="edit"] .field .input-wrap { position: relative; display: flex; align-items: center; }
[data-page="edit"] .field .input-wrap .input { padding-right: 40px; }
[data-page="edit"] .field .reveal {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  appearance: none; border: 0; background: transparent; cursor: pointer;
  padding: 6px; border-radius: 6px;
  color: var(--muted-2);
  display: inline-flex;
  transition: color .15s, background .15s;
}
[data-page="edit"] .field .reveal:hover { color: var(--fg); background: rgba(255, 255, 255, 0.05); }
[data-page="edit"] .section-card .actions {
  margin-top: 18px;
  display: flex; gap: 10px; justify-content: flex-end;
  align-items: center; flex-wrap: wrap;
}
[data-page="edit"] .section-card .actions .status {
  margin-right: auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--muted-2);
  letter-spacing: 0.04em;
}
[data-page="edit"] .section-card .actions .status.ok { color: #86efac; }

[data-page="edit"] .pw-strength { display: grid; gap: 8px; margin-top: 8px; }
[data-page="edit"] .pw-bar { display: flex; gap: 4px; }
[data-page="edit"] .pw-bar span {
  flex: 1; height: 3px; border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  transition: background .2s;
}
[data-page="edit"] .pw-bar span.s1 { background: var(--bad); }
[data-page="edit"] .pw-bar span.s2 { background: var(--warn); }
[data-page="edit"] .pw-bar span.s3 { background: var(--primary); }
[data-page="edit"] .pw-bar span.s4 { background: var(--ok); }
[data-page="edit"] .pw-checks {
  display: flex; flex-wrap: wrap; gap: 6px 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; color: var(--muted-2);
}
[data-page="edit"] .pw-checks .check { display: inline-flex; align-items: center; gap: 4px; transition: color .15s; }
[data-page="edit"] .pw-checks .check.valid { color: #86efac; }
[data-page="edit"] .pw-checks .check .mark { display: inline-block; width: 12px; }

/* ════════════════════════════════════════════════════════════════════
   PAGE: 404 Not Found  ([data-page="notfound"])
   ════════════════════════════════════════════════════════════════════ */
[data-page="notfound"] .lost {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 40px 28px 60px;
  text-align: center;
  position: relative;
}
[data-page="notfound"] .lost-card {
  max-width: 640px; width: 100%;
  background: var(--card-solid);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 44px 36px 36px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 30px 80px -20px rgba(0, 0, 0, 0.6),
    0 0 60px -10px rgba(239, 68, 68, 0.2);
}
[data-page="notfound"] .lost-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.5), transparent);
}
[data-page="notfound"] .lost-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.1);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.3);
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  margin-bottom: 28px;
}
[data-page="notfound"] .lost-eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #f87171;
  box-shadow: 0 0 8px #f87171;
  animation: blink404 1.2s infinite;
}
@keyframes blink404 { 50% { opacity: 0.3; } }
[data-page="notfound"] .lost-code {
  font-size: clamp(80px, 14vw, 144px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.9;
  background: linear-gradient(180deg, white, rgba(255, 255, 255, 0.4));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  margin: 0 0 6px;
  font-variant-numeric: tabular-nums;
  position: relative;
  animation: glitch 5s infinite;
}
@keyframes glitch {
  0%, 95%, 100% { transform: translate(0); filter: none; }
  96% { transform: translate(-2px, 0); filter: drop-shadow(2px 0 #f87171); }
  97% { transform: translate(2px, 0); filter: drop-shadow(-2px 0 #60a5fa); }
  98% { transform: translate(-1px, 1px); filter: drop-shadow(0 2px #f87171); }
}
[data-page="notfound"] .lost-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
}
[data-page="notfound"] .lost-sub {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.55;
  max-width: 44ch;
  margin: 0 auto 28px;
}
[data-page="notfound"] .lost-sub .path { color: var(--primary-2); font-family: "JetBrains Mono", monospace; word-break: break-all; }
[data-page="notfound"] .lost-term {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  text-align: left;
  margin: 0 auto 28px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.7;
  max-width: 460px;
}
[data-page="notfound"] .lost-term .prompt { color: rgba(var(--accent-rgb), 0.9); }
[data-page="notfound"] .lost-term .ok { color: #86efac; }
[data-page="notfound"] .lost-term .warn { color: #fcd34d; }
[data-page="notfound"] .lost-term .bad { color: #fca5a5; }
[data-page="notfound"] .lost-term .cur::after {
  content: "▊";
  color: var(--primary-2);
  animation: blink404 1s steps(2) infinite;
  margin-left: 2px;
}
[data-page="notfound"] .lost-actions {
  display: flex; gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
[data-page="notfound"] .help-links {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px dashed var(--border);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 540px;
  margin-left: auto; margin-right: auto;
}
@media (max-width: 600px) { [data-page="notfound"] .help-links { grid-template-columns: 1fr; } }
[data-page="notfound"] .help-links a {
  display: block;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 9px;
  text-decoration: none;
  color: var(--fg);
  text-align: left;
  transition: background .15s, border-color .15s;
}
[data-page="notfound"] .help-links a:hover {
  background: rgba(var(--accent-rgb), 0.05);
  border-color: rgba(var(--accent-rgb), 0.3);
}
[data-page="notfound"] .help-links a .k {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: rgba(var(--accent-rgb), 0.8);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
[data-page="notfound"] .help-links a .v { font-size: 13px; font-weight: 500; }

[data-page="subnet"] .alert {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid;
  font-size: 13.5px;
  line-height: 1.5;
}
[data-page="subnet"] .alert.info { background: rgba(var(--accent-rgb), 0.06); border-color: rgba(var(--accent-rgb), 0.25); color: var(--muted); }
[data-page="subnet"] .alert.bad { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.3); color: #fca5a5; }
[data-page="subnet"] .alert b { color: var(--fg); }
[data-page="subnet"] .alert.bad b { color: #fecaca; }
[data-page="subnet"] .alert svg { flex: 0 0 auto; margin-top: 1px; }

[data-page="subnet"] .shortcuts {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-top: 12px;
}
[data-page="subnet"] .shortcuts .sc-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; color: var(--muted-2); letter-spacing: 0.05em;
}
[data-page="subnet"] .shortcut-chip {
  appearance: none;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed var(--border-strong);
  color: var(--muted);
  padding: 6px 12px;
  border-radius: 999px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
[data-page="subnet"] .shortcut-chip:hover {
  color: var(--primary-2);
  border-color: rgba(var(--accent-rgb), 0.5);
  background: rgba(var(--accent-rgb), 0.05);
}

/* ═══════════════════════════════════════════════════════════════════
   Toasts (sonner re-estilizado) — 3 tons (ok/warn/bad) com pulse dot
   à esquerda.
   ═══════════════════════════════════════════════════════════════════ */
[data-sonner-toaster] {
  /* Sonner posiciona o container; só garantimos largura no canto. */
  --width: 360px;
}
[data-sonner-toast] {
  position: relative;
  width: 360px;
  max-width: 100%;
  padding: 12px 40px 13px 36px; /* 36px à esquerda para o pulse, 40px à direita para o close button */
  border-radius: 10px;
  background: rgb(11, 14, 20); /* --card-solid */
  border: 1px solid rgba(255, 255, 255, 0.14); /* --border-strong */
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.012) inset;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--fg);
  text-wrap: pretty;
}
/* Close button (X) — top-right, sempre visível, override do default do sonner que é top-left e on-hover */
[data-sonner-toast] [data-close-button] {
  position: absolute;
  top: 8px;
  right: 8px;
  left: auto !important;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.65);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 1 !important;
  transform: none !important;
  transition: background .15s, color .15s, border-color .15s;
}
[data-sonner-toast] [data-close-button]:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--fg);
  border-color: rgba(255, 255, 255, 0.20);
}
[data-sonner-toast] [data-close-button] svg {
  width: 12px;
  height: 12px;
}
/* Linha-luz fina no topo */
[data-sonner-toast]::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.10), transparent);
  pointer-events: none;
}
/* Pulse dot (default = ok verde; cobre default + data-type="success") */
[data-sonner-toast]::before {
  content: ""; position: absolute; left: 16px; top: 19px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e; /* --ok */
  box-shadow: 0 0 8px #22c55e;
  animation: toastPulseOk 2s infinite;
}
[data-sonner-toast][data-type="warning"]::before {
  background: #eab308; /* --warn */
  box-shadow: 0 0 8px #eab308;
  animation-name: toastPulseWarn;
}
[data-sonner-toast][data-type="error"]::before {
  background: #ef4444; /* --bad */
  box-shadow: 0 0 8px #ef4444;
  animation-name: toastPulseBad;
}
@keyframes toastPulseOk {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px #22c55e, 0 0 0 0 rgba(34, 197, 94, 0.5); }
  60%      { opacity: 0.55; box-shadow: 0 0 8px #22c55e, 0 0 0 5px rgba(34, 197, 94, 0); }
}
@keyframes toastPulseWarn {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px #eab308, 0 0 0 0 rgba(234, 179, 8, 0.5); }
  60%      { opacity: 0.55; box-shadow: 0 0 8px #eab308, 0 0 0 5px rgba(234, 179, 8, 0); }
}
@keyframes toastPulseBad {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px #ef4444, 0 0 0 0 rgba(239, 68, 68, 0.5); }
  60%      { opacity: 0.55; box-shadow: 0 0 8px #ef4444, 0 0 0 5px rgba(239, 68, 68, 0); }
}
/* Mobile (≤480): full-width com margens; entrada só vertical herda da sonner. */
@media (max-width: 480px) {
  [data-sonner-toaster] {
    left: 16px !important;
    right: 16px !important;
    top: 16px !important;
    width: auto !important;
  }
  [data-sonner-toast] {
    width: 100%;
    font-size: 12.5px;
    padding: 10px 36px 11px 32px;
  }
  [data-sonner-toast]::before { left: 12px; top: 17px; }
  [data-sonner-toast] [data-close-button] {
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
  }
}
/* Acessibilidade: respeitar quem desliga animações. */
@media (prefers-reduced-motion: reduce) {
  [data-sonner-toast]::before { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   Admin — área de administração. Adaptado do handoff (.adm-*),
   scoped a [data-page="admin"]; tokens locais --adm-* para fidelidade.
   ═══════════════════════════════════════════════════════════════════ */
/* Tokens em [data-page="admin"] (não em .adm-root) para que o drawer/modal,
   que são feitos via portal para o body, também os herdem. */
[data-page="admin"] {
  --adm-fg: #fafafa;
  --adm-muted: #a3a3a3;
  --adm-muted-2: #6b7280;
  --adm-border: rgba(255, 255, 255, 0.08);
  --adm-border-st: rgba(255, 255, 255, 0.14);
  --adm-card: rgba(15, 18, 25, 0.65);
  --adm-card-solid: rgb(11, 14, 20);
  --adm-primary: #3b82f6;
  --adm-primary-2: #60a5fa;
  --adm-rgb: 59, 130, 246;
  --adm-ok: #22c55e;
  --adm-pad: 28px;
  padding-bottom: 0;
}
/* Wrapper do portal (drawer/modal montados no body): não gera caixa,
   só serve para herdar os tokens e fazer match dos seletores scoped. */
.adm-portal { display: contents; }
[data-page="admin"] .adm-root {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  color: var(--adm-fg);
  isolation: isolate;
}
[data-page="admin"] .adm-mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
[data-page="admin"] .adm-mono--dim { color: var(--adm-muted-2); }

/* Header */
[data-page="admin"] .adm-header {
  padding: clamp(24px, 3vw, 36px) var(--adm-pad) 0;
}
[data-page="admin"] .adm-header__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
[data-page="admin"] .adm-crumb {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px; letter-spacing: 0.04em;
  color: var(--adm-muted-2);
  display: inline-flex; align-items: baseline; gap: 4px;
}
[data-page="admin"] .adm-crumb__sigil { color: var(--adm-primary-2); }
[data-page="admin"] .adm-crumb__sep { color: var(--adm-muted-2); padding: 0 2px; }
[data-page="admin"] .adm-crumb__seg { color: var(--adm-muted); }
[data-page="admin"] .adm-crumb__cur { color: var(--adm-primary-2); }
[data-page="admin"] .adm-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 10px;
  border: 1px solid var(--adm-border-st);
  border-radius: 999px;
  background: rgba(var(--adm-rgb), 0.08);
  color: var(--adm-primary-2);
  font-size: 10.5px; font-family: "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.08em;
}
[data-page="admin"] .adm-pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--adm-ok); box-shadow: 0 0 6px var(--adm-ok);
  animation: adm-pulse-anim 2s infinite;
}
@keyframes adm-pulse-anim { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
[data-page="admin"] .adm-header__bottom {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; padding-bottom: 22px; flex-wrap: wrap;
}
[data-page="admin"] .adm-title {
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 600; letter-spacing: -0.022em; line-height: 1.05; margin: 0;
}
[data-page="admin"] .adm-sub { margin: 4px 0 0; font-size: 14.5px; color: var(--adm-muted); max-width: 60ch; }
[data-page="admin"] .adm-statgrid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px; min-width: 360px;
}
[data-page="admin"] .adm-stat {
  padding: 10px 14px; border: 1px solid var(--adm-border);
  border-radius: 10px; background: rgba(255, 255, 255, 0.02);
}
[data-page="admin"] .adm-stat__k {
  font-family: "JetBrains Mono", monospace; font-size: 9.5px;
  letter-spacing: 0.1em; color: var(--adm-muted-2); text-transform: uppercase;
}
[data-page="admin"] .adm-stat__v {
  font-size: 22px; font-weight: 600; margin-top: 2px;
  letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
}

/* Tabs */
[data-page="admin"] .adm-tabs {
  position: relative; display: flex; gap: 0;
  padding: 0 var(--adm-pad);
  border-bottom: 1px solid var(--adm-border);
  overflow-x: auto; scrollbar-width: none;
}
[data-page="admin"] .adm-tabs::-webkit-scrollbar { display: none; }
[data-page="admin"] .adm-tab {
  appearance: none; border: 0; background: transparent;
  color: var(--adm-muted);
  padding: 14px 18px 13px;
  font-family: inherit; font-size: 13.5px; font-weight: 500;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  white-space: nowrap; transition: color .15s, border-color .15s;
}
[data-page="admin"] .adm-tab:hover { color: var(--adm-fg); }
[data-page="admin"] .adm-tab.is-active { color: var(--adm-primary-2); border-bottom-color: var(--adm-primary); }
[data-page="admin"] .adm-tab__short { display: none; }
[data-page="admin"] .adm-tab__count {
  font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.04em;
  padding: 2px 6px; border-radius: 5px;
  background: rgba(255, 255, 255, 0.05); color: var(--adm-muted-2);
}
[data-page="admin"] .adm-tab.is-active .adm-tab__count { background: rgba(var(--adm-rgb), 0.16); color: var(--adm-primary-2); }

/* Main / Toolbar */
[data-page="admin"] .adm-main { padding: 24px var(--adm-pad) 80px; }
[data-page="admin"] .adm-toolbar {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 16px; flex-wrap: wrap;
}
[data-page="admin"] .adm-toolbar__left { display: flex; flex-direction: column; gap: 12px; min-width: 0; flex: 1 1 auto; }
[data-page="admin"] .adm-toolbar__h {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--adm-muted-2);
}
[data-page="admin"] .adm-toolbar__caret { color: rgba(var(--adm-rgb), 0.85); }
[data-page="admin"] .adm-toolbar__title { color: var(--adm-fg); }
[data-page="admin"] .adm-toolbar__count { color: rgba(var(--adm-rgb), 0.7); }
[data-page="admin"] .adm-toolbar__right { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; }
[data-page="admin"] .adm-search { position: relative; display: inline-flex; align-items: center; }
[data-page="admin"] .adm-search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--adm-muted-2); }
[data-page="admin"] .adm-search input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--adm-border);
  color: var(--adm-fg); border-radius: 9px;
  padding: 8px 12px 8px 30px;
  font-size: 12.5px; font-family: "JetBrains Mono", monospace;
  outline: none; width: 240px; transition: border-color .15s, background .15s;
}
[data-page="admin"] .adm-search input:focus { border-color: rgba(var(--adm-rgb), 0.5); background: rgba(255, 255, 255, 0.06); }

/* Buttons */
[data-page="admin"] .adm-btn {
  appearance: none; border: 0;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: inherit; font-weight: 500; font-size: 13px;
  padding: 9px 14px; border-radius: 9px; cursor: pointer;
  color: var(--adm-fg); text-decoration: none;
  transition: transform .1s, background .15s, border-color .15s;
}
[data-page="admin"] .adm-btn:active { transform: translateY(1px); }
[data-page="admin"] .adm-btn:disabled { opacity: 0.45; cursor: not-allowed; }
[data-page="admin"] .adm-btn--primary {
  background: var(--adm-primary); color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 6px 22px -8px rgba(var(--adm-rgb), 0.7);
}
[data-page="admin"] .adm-btn--primary:hover:not(:disabled) { background: color-mix(in oklab, var(--adm-primary) 90%, white); }
[data-page="admin"] .adm-btn--ghost { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--adm-border); color: var(--adm-fg); }
[data-page="admin"] .adm-btn--ghost:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); border-color: var(--adm-border-st); }
[data-page="admin"] .adm-btn--danger { background: rgba(239, 68, 68, 0.16); border: 1px solid rgba(239, 68, 68, 0.5); color: #fca5a5; }
[data-page="admin"] .adm-btn--danger:hover:not(:disabled) { background: rgba(239, 68, 68, 0.24); color: #fecaca; }
[data-page="admin"] .adm-btn--warn { background: rgba(234, 179, 8, 0.16); border: 1px solid rgba(234, 179, 8, 0.5); color: #fcd34d; }
[data-page="admin"] .adm-btn--warn:hover:not(:disabled) { background: rgba(234, 179, 8, 0.24); color: #fde68a; }
[data-page="admin"] .adm-iconbtn {
  appearance: none; width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid var(--adm-border); background: rgba(255, 255, 255, 0.03);
  color: var(--adm-muted);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: color .15s, background .15s, border-color .15s;
}
[data-page="admin"] .adm-iconbtn:hover:not(:disabled) { color: var(--adm-fg); background: rgba(255, 255, 255, 0.07); border-color: var(--adm-border-st); }
[data-page="admin"] .adm-iconbtn:disabled { opacity: 0.35; cursor: not-allowed; }
[data-page="admin"] .adm-iconbtn--danger:hover:not(:disabled) { color: #fca5a5; border-color: rgba(239, 68, 68, 0.4); background: rgba(239, 68, 68, 0.1); }
[data-page="admin"] .adm-rowact { display: inline-flex; gap: 6px; }

/* List / table */
[data-page="admin"] .adm-list {
  border: 1px solid var(--adm-border); border-radius: 12px;
  background: var(--adm-card);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}
[data-page="admin"] .adm-row {
  display: grid; align-items: center; gap: 14px;
  padding: 12px 16px; border-bottom: 1px solid var(--adm-border);
}
[data-page="admin"] .adm-row:last-child { border-bottom: 0; }
[data-page="admin"] .adm-row--head {
  background: rgba(255, 255, 255, 0.025);
  font-family: "JetBrains Mono", monospace; font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--adm-muted-2); padding: 10px 16px;
}
[data-page="admin"] .adm-row:not(.adm-row--head):hover { background: rgba(255, 255, 255, 0.025); }
[data-page="admin"] .adm-row:has(.adm-col--user) { grid-template-columns: 2.4fr 160px 110px 90px 110px; }
[data-page="admin"] .adm-col--user .adm-col--role,
[data-page="admin"] .adm-row:has(.adm-col--user) .adm-col--role {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
[data-page="admin"] .adm-row:has(.adm-col--user) .adm-col--role .adm-badge {
  display: inline-flex; align-items: center; gap: 4px;
}
[data-page="admin"] .adm-name { font-weight: 500; font-size: 14px; letter-spacing: -0.005em; }
[data-page="admin"] .adm-pill {
  display: inline-flex; font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.02em; padding: 3px 9px;
  border-radius: 6px; border: 1px solid var(--adm-border);
  background: rgba(255, 255, 255, 0.04); color: var(--adm-muted);
}
[data-page="admin"] .adm-user { display: flex; align-items: center; gap: 12px; min-width: 0; }
[data-page="admin"] .adm-user__av {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(135deg, rgba(var(--adm-rgb), 0.32), rgba(var(--adm-rgb), 0.1));
  border: 1px solid var(--adm-border-st);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 12px; color: var(--adm-primary-2); letter-spacing: 0.02em;
}
[data-page="admin"] .adm-user__txt { min-width: 0; }
[data-page="admin"] .adm-user__name { font-weight: 500; font-size: 13.5px; display: flex; gap: 6px; align-items: baseline; }
[data-page="admin"] .adm-user__me { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.04em; color: var(--adm-muted-2); }
[data-page="admin"] .adm-user__email {
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  color: var(--adm-muted-2); letter-spacing: 0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
[data-page="admin"] .adm-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: 999px;
  font-family: "JetBrains Mono", monospace; font-size: 10.5px;
  letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap;
}
[data-page="admin"] .adm-badge--ok { background: rgba(34, 197, 94, 0.12); color: #86efac; border: 1px solid rgba(34, 197, 94, 0.3); }
[data-page="admin"] .adm-badge--warn { background: rgba(234, 179, 8, 0.12); color: #fcd34d; border: 1px solid rgba(234, 179, 8, 0.3); }
[data-page="admin"] .adm-badge--bad { background: rgba(239, 68, 68, 0.12); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.3); }
[data-page="admin"] .adm-badge--neutral { background: rgba(255, 255, 255, 0.05); color: var(--adm-muted); border: 1px solid var(--adm-border); }
[data-page="admin"] .adm-badge--primary { background: rgba(var(--adm-rgb), 0.13); color: var(--adm-primary-2); border: 1px solid rgba(var(--adm-rgb), 0.35); }

/* Empty state */
[data-page="admin"] .adm-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 48px 24px; text-align: center;
}
[data-page="admin"] .adm-empty__sigil { color: rgba(var(--adm-rgb), 0.55); margin-bottom: 4px; }
[data-page="admin"] .adm-empty__ttl { font-size: 15px; font-weight: 500; color: var(--adm-fg); letter-spacing: -0.005em; }
[data-page="admin"] .adm-empty__hint {
  font-size: 13px; color: var(--adm-muted); max-width: 42ch;
  font-family: "JetBrains Mono", monospace; letter-spacing: 0.01em;
}

/* Confirm modal (fixed overlay, acima da navbar sticky z:50) */
[data-page="admin"] .adm-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
[data-page="admin"] .adm-modal__scrim {
  position: absolute; inset: 0;
  background: rgba(5, 7, 10, 0.7);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: adm-fade-in .2s ease;
}
[data-page="admin"] .adm-modal__panel {
  position: relative; width: 100%; max-width: 520px;
  background: var(--adm-card-solid);
  border: 1px solid var(--adm-border-st); border-radius: 14px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7), 0 0 60px -10px rgba(239, 68, 68, 0.15);
  animation: adm-modal-in .22s cubic-bezier(.2, .7, .3, 1); overflow: hidden;
}
[data-page="admin"] .adm-modal__panel::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.55), transparent);
}
[data-page="admin"] .adm-modal--primary .adm-modal__panel::before { background: linear-gradient(90deg, transparent, rgba(var(--adm-rgb), 0.55), transparent); }
[data-page="admin"] .adm-modal--warn .adm-modal__panel::before { background: linear-gradient(90deg, transparent, rgba(234, 179, 8, 0.55), transparent); }
@keyframes adm-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes adm-modal-in { from { transform: translateY(8px) scale(0.98); opacity: 0.7; } to { transform: none; opacity: 1; } }
[data-page="admin"] .adm-modal__head { display: flex; align-items: flex-start; gap: 14px; padding: 22px 22px 14px; }
[data-page="admin"] .adm-modal__icon {
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: 9px;
  background: rgba(239, 68, 68, 0.16); border: 1px solid rgba(239, 68, 68, 0.4); color: #fca5a5;
  display: flex; align-items: center; justify-content: center;
}
[data-page="admin"] .adm-modal--primary .adm-modal__icon { background: rgba(var(--adm-rgb), 0.16); border-color: rgba(var(--adm-rgb), 0.4); color: var(--adm-primary-2); }
[data-page="admin"] .adm-modal--warn .adm-modal__icon { background: rgba(234, 179, 8, 0.16); border-color: rgba(234, 179, 8, 0.4); color: #fcd34d; }
[data-page="admin"] .adm-modal__crumb { font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: 0.06em; color: var(--adm-muted-2); margin-bottom: 4px; }
[data-page="admin"] .adm-modal__ttl { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
[data-page="admin"] .adm-modal__body { padding: 4px 22px 18px; }
[data-page="admin"] .adm-modal__intro { font-size: 13.5px; color: var(--adm-fg); margin: 0 0 14px; line-height: 1.55; }
[data-page="admin"] .adm-modal__target {
  border: 1px solid var(--adm-border); border-radius: 9px;
  padding: 10px 12px; background: rgba(255, 255, 255, 0.02); margin-bottom: 12px;
}
[data-page="admin"] .adm-modal__targetk { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--adm-muted-2); }
[data-page="admin"] .adm-modal__targetv { font-family: "JetBrains Mono", monospace; font-size: 13px; color: var(--adm-fg); margin-top: 2px; word-break: break-word; }
[data-page="admin"] .adm-modal__cascade {
  border: 1px dashed rgba(239, 68, 68, 0.32); border-radius: 9px;
  padding: 10px 12px; background: rgba(239, 68, 68, 0.04); margin-bottom: 12px;
}
[data-page="admin"] .adm-modal__cascadek { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #fca5a5; margin-bottom: 6px; }
[data-page="admin"] .adm-modal__cascade ul { margin: 0; padding: 0; list-style: none; }
[data-page="admin"] .adm-modal__cascade li {
  display: flex; gap: 8px; font-size: 12.5px; color: var(--adm-muted);
  padding: 3px 0; font-family: "JetBrains Mono", monospace; letter-spacing: 0.01em;
}
[data-page="admin"] .adm-modal__bullet { color: rgba(239, 68, 68, 0.85); flex: 0 0 auto; }
[data-page="admin"] .adm-modal__hint { font-size: 11.5px; color: var(--adm-muted-2); font-family: "JetBrains Mono", monospace; letter-spacing: 0.04em; }
[data-page="admin"] .adm-modal__foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 22px 20px; border-top: 1px solid var(--adm-border);
  background: rgba(255, 255, 255, 0.012);
}

/* Responsivo ≤720px — tabela vira cartões, modal full-width */
@media (max-width: 720px) {
  [data-page="admin"] .adm-root { --adm-pad: 16px; }
  [data-page="admin"] .adm-title { font-size: 26px; }
  [data-page="admin"] .adm-sub { font-size: 13px; }
  [data-page="admin"] .adm-tab__label { display: none; }
  [data-page="admin"] .adm-tab__short { display: inline; }
  [data-page="admin"] .adm-statgrid { min-width: 0; width: 100%; grid-template-columns: repeat(3, 1fr); }
  [data-page="admin"] .adm-toolbar { flex-direction: column; align-items: stretch; }
  [data-page="admin"] .adm-toolbar__right { flex-direction: column; align-items: stretch; }
  [data-page="admin"] .adm-search { flex: 1 1 auto; width: 100%; }
  [data-page="admin"] .adm-search input { width: 100%; }
  [data-page="admin"] .adm-list { background: transparent; border: 0; }
  [data-page="admin"] .adm-list .adm-row--head { display: none; }
  [data-page="admin"] .adm-row:not(.adm-row--head) {
    position: relative;
    display: flex; flex-direction: column; align-items: stretch; gap: 8px;
    border: 1px solid var(--adm-border); border-radius: 11px;
    background: var(--adm-card); padding: 14px; margin-bottom: 10px;
  }
  [data-page="admin"] .adm-row:last-child { margin-bottom: 0; }
  [data-page="admin"] .adm-row:not(.adm-row--head):hover { background: var(--adm-card); }
  [data-page="admin"] .adm-col { display: block; min-width: 0; }
  [data-page="admin"] .adm-col--role,
  [data-page="admin"] .adm-col--date,
  [data-page="admin"] .adm-col--qz { display: flex; align-items: baseline; gap: 8px; }
  [data-page="admin"] .adm-col--role::before { content: "role"; }
  [data-page="admin"] .adm-col--date::before { content: "criado"; }
  [data-page="admin"] .adm-col--qz::before { content: "quizzes"; }
  [data-page="admin"] [class*="adm-col--"]::before {
    font-family: "JetBrains Mono", monospace; font-size: 10.5px;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: rgba(96, 165, 250, 0.55); flex: 0 0 80px; font-weight: 500;
  }
  [data-page="admin"] .adm-col--user { border-bottom: 1px dashed var(--adm-border); padding-bottom: 8px; }
  [data-page="admin"] .adm-col--act { display: flex; gap: 8px; margin-top: 4px; }
}

/* ─── Admin · Categorias (lista) ─────────────────────────────────── */
[data-page="admin"] .adm-list--cats .adm-row { grid-template-columns: 48px 1.4fr 2fr 90px 110px; }
[data-page="admin"] .adm-name__id {
  font-family: "JetBrains Mono", monospace; font-size: 10.5px;
  color: var(--adm-muted-2); letter-spacing: 0.04em; margin-top: 1px;
}
[data-page="admin"] .adm-col--desc { color: var(--adm-muted); font-size: 13px; line-height: 1.45; }
[data-page="admin"] .adm-col--n .adm-mono { font-size: 13px; }

/* ─── Admin · Drawer (painel de formulário) ──────────────────────── */
[data-page="admin"] .adm-drawer {
  position: fixed; inset: 0; z-index: 900;
  display: flex; justify-content: flex-end;
}
[data-page="admin"] .adm-drawer__scrim {
  position: absolute; inset: 0;
  background: rgba(5, 7, 10, 0.65);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: adm-fade-in .2s ease;
}
[data-page="admin"] .adm-drawer__panel {
  position: relative; width: 560px; max-width: 100%;
  background: var(--adm-card-solid);
  border-left: 1px solid var(--adm-border-st);
  box-shadow: -20px 0 60px -10px rgba(0, 0, 0, 0.6);
  display: flex; flex-direction: column;
  animation: adm-slide-in .25s cubic-bezier(.2, .7, .3, 1) both;
}
[data-page="admin"] .adm-drawer__panel::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--adm-rgb), 0.5), transparent);
}
@keyframes adm-slide-in { from { transform: translateX(20px); opacity: 0.6; } to { transform: none; opacity: 1; } }
@keyframes adm-slide-up { from { transform: translateY(20px); opacity: 0.6; } to { transform: none; opacity: 1; } }
[data-page="admin"] .adm-drawer__head {
  padding: 20px 22px 18px; border-bottom: 1px solid var(--adm-border);
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; flex: 0 0 auto;
}
[data-page="admin"] .adm-drawer__crumb {
  font-family: "JetBrains Mono", monospace; font-size: 10.5px;
  letter-spacing: 0.06em; color: var(--adm-muted-2); margin-bottom: 6px;
}
[data-page="admin"] .adm-drawer__ttl { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; margin: 0; }
[data-page="admin"] .adm-drawer__sub { margin: 4px 0 0; font-size: 13px; color: var(--adm-muted); max-width: 50ch; }
[data-page="admin"] .adm-drawer__body { flex: 1 1 auto; overflow: auto; padding: 20px 22px 24px; }

/* ─── Admin · Campos de formulário ──────────────────────────────── */
[data-page="admin"] .adm-monolabel {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px;
  font-family: "JetBrains Mono", monospace; font-size: 10.5px;
  letter-spacing: 0.08em; color: var(--adm-muted-2);
  text-transform: uppercase; margin-bottom: 6px;
}
[data-page="admin"] .adm-monolabel__hint { font-size: 10px; text-transform: none; letter-spacing: 0.02em; opacity: 0.7; }
[data-page="admin"] .adm-field { margin-bottom: 14px; }
[data-page="admin"] .adm-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--adm-border-st);
  color: var(--adm-fg); border-radius: 9px;
  padding: 10px 12px; font-size: 14px; outline: none;
  font-family: inherit; resize: none;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
[data-page="admin"] .adm-input--mono { font-family: "JetBrains Mono", monospace; font-size: 13px; }
[data-page="admin"] .adm-input--num { width: 120px; }
[data-page="admin"] .adm-input:focus {
  border-color: rgba(var(--adm-rgb), 0.7);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 0 3px rgba(var(--adm-rgb), 0.15);
}
[data-page="admin"] .adm-field.is-error .adm-input { border-color: rgba(239, 68, 68, 0.6); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1); }
[data-page="admin"] .adm-field__err { margin-top: 4px; font-family: "JetBrains Mono", monospace; font-size: 11px; color: #fca5a5; }
[data-page="admin"] .adm-field__err::before { content: "⚠ "; }
[data-page="admin"] select.adm-input {
  appearance: none;
  /* popup nativo em tema escuro (senão fica branco/ilegível) */
  color-scheme: dark;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='1 1 5 5 9 1'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px;
}
[data-page="admin"] select.adm-input option {
  background: var(--adm-card-solid);
  color: var(--adm-fg);
}
[data-page="admin"] .adm-formact {
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--adm-border);
}

@media (max-width: 720px) {
  [data-page="admin"] .adm-drawer__panel {
    width: 100%; border-left: 0;
    animation: adm-slide-up .25s cubic-bezier(.2, .7, .3, 1);
  }
  [data-page="admin"] .adm-col--name {
    border-bottom: 1px dashed var(--adm-border); padding-bottom: 8px;
  }
  [data-page="admin"] .adm-col--desc,
  [data-page="admin"] .adm-col--n { display: flex; align-items: baseline; gap: 8px; }
  [data-page="admin"] .adm-col--desc::before { content: "descrição"; }
  [data-page="admin"] .adm-col--n::before { content: "tópicos"; }
  [data-page="admin"] .adm-col--ord { position: absolute; top: 14px; right: 14px; }
}

/* ─── Admin · Tópicos (lista + chips de categoria) ───────────────── */
[data-page="admin"] .adm-list--topics .adm-row { grid-template-columns: 48px 2.2fr 1.4fr 80px 110px; }
[data-page="admin"] .adm-name__desc {
  font-size: 12.5px; color: var(--adm-muted); margin-top: 1px; line-height: 1.4;
}
[data-page="admin"] .adm-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
/* Fila de chips como bloco próprio por baixo da toolbar (não dentro dela). */
[data-page="admin"] .adm-chips--rail { margin-top: -4px; margin-bottom: 16px; }
[data-page="admin"] .adm-chip {
  appearance: none;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--adm-border);
  color: var(--adm-muted);
  padding: 5px 11px; border-radius: 999px;
  font-size: 11.5px; font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.02em; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color .15s, background .15s, border-color .15s;
}
[data-page="admin"] .adm-chip:hover { color: var(--adm-fg); background: rgba(255, 255, 255, 0.05); }
[data-page="admin"] .adm-chip.is-active {
  color: var(--adm-primary-2);
  background: rgba(var(--adm-rgb), 0.13);
  border-color: rgba(var(--adm-rgb), 0.4);
}
[data-page="admin"] .adm-chip__n {
  font-size: 9.5px; padding: 1px 5px; border-radius: 5px;
  background: rgba(255, 255, 255, 0.06); color: var(--adm-muted-2);
}
[data-page="admin"] .adm-chip.is-active .adm-chip__n { background: rgba(var(--adm-rgb), 0.22); color: var(--adm-primary-2); }

@media (max-width: 720px) {
  [data-page="admin"] .adm-col--ttl {
    border-bottom: 1px dashed var(--adm-border); padding-bottom: 8px;
  }
  [data-page="admin"] .adm-col--cat,
  [data-page="admin"] .adm-col--hasquiz { display: flex; align-items: baseline; gap: 8px; }
  [data-page="admin"] .adm-col--cat::before { content: "categoria"; }
  [data-page="admin"] .adm-col--hasquiz::before { content: "quiz"; }
}

/* ─── Admin · Quizzes (lista + editor de perguntas) ──────────────── */
[data-page="admin"] .adm-list--quizzes .adm-row { grid-template-columns: 1.6fr 1.8fr 130px 110px; }
[data-page="admin"] .adm-col--qcount { display: inline-flex; align-items: baseline; gap: 6px; }
[data-page="admin"] .adm-col--qcount .adm-mono:first-child { font-size: 15px; color: var(--adm-fg); }
[data-page="admin"] .adm-col--qcount .adm-mono--dim { font-size: 10.5px; letter-spacing: 0.04em; }

[data-page="admin"] .adm-qsec { margin-top: 6px; }
[data-page="admin"] .adm-qsec__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
[data-page="admin"] .adm-btn--sm { padding: 6px 10px; font-size: 11.5px; border-radius: 7px; }
[data-page="admin"] .adm-iconbtn--sm { width: 26px; height: 26px; border-radius: 6px; }
[data-page="admin"] .adm-qlist { display: flex; flex-direction: column; gap: 10px; }
[data-page="admin"] .adm-qcard {
  border: 1px solid var(--adm-border);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px; padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
[data-page="admin"] .adm-qcard__head { display: flex; justify-content: space-between; align-items: center; }
[data-page="admin"] .adm-qcard__num {
  font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.08em;
  color: rgba(var(--adm-rgb), 0.85);
  padding: 3px 8px; border-radius: 6px;
  background: rgba(var(--adm-rgb), 0.1); border: 1px solid rgba(var(--adm-rgb), 0.25);
}
[data-page="admin"] .adm-qcard__nav { display: inline-flex; gap: 4px; }
[data-page="admin"] .adm-qopts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
[data-page="admin"] .adm-qopt {
  display: flex; align-items: center; gap: 8px;
  padding: 4px; border: 1px solid var(--adm-border);
  border-radius: 8px; background: rgba(255, 255, 255, 0.015); cursor: pointer;
}
[data-page="admin"] .adm-qopt.is-correct {
  border-color: rgba(34, 197, 94, 0.45); background: rgba(34, 197, 94, 0.06);
}
[data-page="admin"] .adm-qopt input[type="radio"] { accent-color: var(--adm-ok); margin: 0 4px; flex: 0 0 auto; }
[data-page="admin"] .adm-qopt__mark {
  flex: 0 0 auto;
  width: 22px; height: 22px; border-radius: 5px;
  background: rgba(255, 255, 255, 0.06); color: var(--adm-muted-2);
  display: inline-flex; align-items: center; justify-content: center;
}
[data-page="admin"] .adm-qopt.is-correct .adm-qopt__mark { background: rgba(34, 197, 94, 0.18); color: #86efac; }
[data-page="admin"] .adm-qopt__tag {
  flex: 0 0 auto;
  font-family: "JetBrains Mono", monospace; font-size: 9.5px;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.05); color: var(--adm-muted-2);
}
[data-page="admin"] .adm-qopt.is-correct .adm-qopt__tag {
  background: rgba(34, 197, 94, 0.14); color: #86efac;
}
[data-page="admin"] .adm-input--long { min-height: 160px; }
/* Resposta = ExpandableTextarea compacto dentro da linha da opção. */
[data-page="admin"] .adm-qopt .adm-ta { flex: 1 1 auto; min-width: 0; }
[data-page="admin"] .adm-qopt .adm-ta .adm-input {
  padding: 7px 32px 7px 10px; font-size: 12.5px; min-height: 0;
  overflow: hidden; /* caixa pequena, sem scroll — para texto grande usa-se o ⤢ */
}
[data-page="admin"] .adm-qopt .adm-ta__expand { top: 6px; right: 6px; width: 22px; height: 22px; }

@media (max-width: 720px) {
  [data-page="admin"] .adm-list--quizzes .adm-col--ttl {
    border-bottom: 1px dashed var(--adm-border); padding-bottom: 8px;
  }
  [data-page="admin"] .adm-col--topic,
  [data-page="admin"] .adm-col--qcount { display: flex; align-items: baseline; gap: 8px; }
  [data-page="admin"] .adm-col--topic::before { content: "tópico"; }
  [data-page="admin"] .adm-col--qcount::before { content: "perguntas"; }
  [data-page="admin"] .adm-qopts { grid-template-columns: 1fr; }
}

/* ─── Admin · Textarea expansível (editor em pop-up) ─────────────── */
[data-page="admin"] .adm-ta { position: relative; }
[data-page="admin"] .adm-ta .adm-input { padding-right: 48px; }
[data-page="admin"] .adm-ta__expand {
  position: absolute; top: 8px; right: 16px; /* 16px = ~10px scrollbar + folga */
  appearance: none; border: 1px solid var(--adm-border);
  background: rgba(255, 255, 255, 0.04); color: var(--adm-muted-2);
  width: 26px; height: 26px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: color .15s, background .15s, border-color .15s;
}
[data-page="admin"] .adm-ta__expand:hover {
  color: var(--adm-primary-2); background: rgba(var(--adm-rgb), 0.1);
  border-color: rgba(var(--adm-rgb), 0.4);
}
[data-page="admin"] .adm-modal--editor .adm-modal__panel {
  max-width: 860px; max-height: 88vh;
  display: flex; flex-direction: column;
}
[data-page="admin"] .adm-modal--editor .adm-modal__panel::before {
  background: linear-gradient(90deg, transparent, rgba(var(--adm-rgb), 0.5), transparent);
}
[data-page="admin"] .adm-ta-modal__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding: 20px 22px 14px;
  border-bottom: 1px solid var(--adm-border); flex: 0 0 auto;
}
[data-page="admin"] .adm-ta-modal__body { padding: 18px 22px; flex: 1 1 auto; overflow: auto; }
[data-page="admin"] .adm-ta-modal__field {
  width: 100%; min-height: 52vh; max-height: 60vh; resize: none;
}

/* ═══════════════════════════════════════════════════════════════════
   Scrollbars — estilo único (escuro/azul, fino, moderno) em TUDO:
   vertical, horizontal, textareas, tabelas, drawers, modais, página.
   (Os admin-tabs escondem a sua de propósito — regra mais específica.)
   ═══════════════════════════════════════════════════════════════════ */
* {
  scrollbar-width: thin;
  scrollbar-color: #102e52 transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: #102e52;
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: #1b4a7e;
  background-clip: padding-box;
}
*::-webkit-scrollbar-corner { background: transparent; }

/* ════════════════════════════════════════════════════════════════════
   PAGE: Routing Tables  ([data-page="routing-tables"])
   ════════════════════════════════════════════════════════════════════ */
[data-page="routing-tables"] {
  max-width: 1280px; margin: 0 auto; padding: 32px 28px 80px;
}
/* O wrapper [data-page] já dá max-width + padding lateral; o .page-head
   global voltaria a aplicar os seus → hero ficava indentado a mais que as
   secções. Neutraliza a caixa própria do .page-head só nesta página. */
[data-page="routing-tables"] .page-head {
  max-width: none; width: auto; margin: 0; padding: 0;
}
[data-page="routing-tables"] .accent { color: var(--primary-2); }

[data-page="routing-tables"] .rt-meta {
  display: flex; flex-wrap: wrap; gap: 14px 22px;
  margin-top: 18px; font-family: "JetBrains Mono", monospace; font-size: 11.5px;
  color: var(--muted); letter-spacing: 0.02em;
}
[data-page="routing-tables"] .rt-meta .item {
  display: inline-flex; align-items: center; gap: 7px;
}
[data-page="routing-tables"] .rt-meta .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--primary-2);
  box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.5);
}

/* Tabs do Caderno (Tabelas e ARQ / VLSM / ARQ / Comandos) — mesmo estilo
   dos tabs do admin: planos, indicador de sublinhado, sem caixa com borda. */
[data-page="routing-tables"] .rt-tabs {
  position: relative; display: flex; gap: 0;
  margin: 36px 0 24px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: none;
}
[data-page="routing-tables"] .rt-tabs::-webkit-scrollbar { display: none; }
[data-page="routing-tables"] .rt-tab {
  appearance: none; border: 0; background: transparent;
  color: var(--muted);
  padding: 14px 18px 13px;
  font-family: "Inter", sans-serif; font-size: 13.5px; font-weight: 500;
  text-decoration: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  white-space: nowrap; transition: color .15s, border-color .15s;
}
[data-page="routing-tables"] .rt-tab:hover { color: var(--fg); }
[data-page="routing-tables"] .rt-tab.is-active {
  color: var(--primary-2); border-bottom-color: var(--primary);
}
[data-page="routing-tables"] .rt-tab .n {
  font-family: "JetBrains Mono", monospace; font-size: 10px;
  letter-spacing: 0.04em;
  padding: 2px 6px; border-radius: 5px;
  background: rgba(255, 255, 255, 0.05); color: var(--muted-2);
}
[data-page="routing-tables"] .rt-tab.is-active .n {
  background: rgba(var(--accent-rgb), 0.16); color: var(--primary-2);
}

[data-page="routing-tables"] .rt-main { display: grid; gap: 36px; }
/* Itens do grid principal não devem expandir além do viewport por causa de
   conteúdo interno (ex.: tabelas do inspector). min-width: 0 permite que
   encolham — o overflow horizontal fica contido nas tabelas internas. */
[data-page="routing-tables"] .rt-main > * { min-width: 0; }
[data-page="routing-tables"] .inspector { min-width: 0; }
[data-page="routing-tables"] .insp-section { min-width: 0; }

/* ─── Section head shared (Notebook + Calculadora) ─── */
[data-page="routing-tables"] .rt-sec-head {
  margin-bottom: 20px;
}
[data-page="routing-tables"] .rt-sec-head .num,
[data-page="subnet"] .rt-sec-head .num {
  display: inline-flex; align-items: baseline; gap: 7px;
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg);
  margin-bottom: 10px;
}
[data-page="routing-tables"] .rt-sec-head .num::before,
[data-page="subnet"] .rt-sec-head .num::before {
  content: "▸"; color: rgba(var(--accent-rgb), 0.85);
}
[data-page="routing-tables"] .rt-sec-head .num .c,
[data-page="subnet"] .rt-sec-head .num .c {
  color: rgba(var(--accent-rgb), 0.7);
}
[data-page="routing-tables"] .rt-sec-head h2,
[data-page="subnet"] .rt-sec-head h2 {
  font-size: clamp(22px, 2.6vw, 28px); font-weight: 600;
  letter-spacing: -0.015em; margin: 0; line-height: 1.15;
}
[data-page="routing-tables"] .rt-sec-head .lede,
[data-page="subnet"] .rt-sec-head .lede {
  color: var(--muted); font-size: 14px; line-height: 1.55;
  margin: 8px 0 0; max-width: 75ch;
}

/* Subnet calculator: cada <section> é um container flex que estilha
   header + blocos de conteúdo com o mesmo gap do calc-main. */
[data-page="subnet"] .calc-main > section {
  display: flex; flex-direction: column; gap: 22px;
}

/* ─── Triptych (3 cards lado a lado) ──────────────────────────────── */
[data-page="routing-tables"] .rt-triptych {
  display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 18px;
}
[data-page="routing-tables"] .rt-triptych-foot {
  margin: 16px 0 0;
  font-size: 12.5px;
  color: var(--muted-2);
  text-align: center;
  line-height: 1.55;
}

/* ─── Exercícios P — grid 2x2 das técnicas de janela deslizante ─────── */
[data-page="routing-tables"] .rt-arq-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
@media (max-width: 760px) {
  [data-page="routing-tables"] .rt-arq-grid { grid-template-columns: 1fr; }
}

/* ─── Exercícios P — toggle de notação (ACKᵢ₊₁ vs ACKᵢ) ─────────────── */
[data-page="routing-tables"] .rt-notation-toggle {
  display: inline-flex; gap: 4px;
  margin: 14px 0 12px;
  padding: 4px;
  background: rgba(15, 18, 25, 0.55);
  border: 1px solid var(--border);
  border-radius: 10px;
}
[data-page="routing-tables"] .rt-notation-opt {
  appearance: none;
  display: inline-flex; align-items: center;
  padding: 8px 14px;
  background: transparent; border: 0; border-radius: 6px;
  color: var(--muted); cursor: pointer;
  font-family: "JetBrains Mono", monospace; font-size: 12px;
  line-height: 1.2;
  transition: background .15s, color .15s;
}
[data-page="routing-tables"] .rt-notation-opt:hover { color: var(--fg); }
[data-page="routing-tables"] .rt-notation-opt.is-active {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--fg);
}

/* ─── Exercícios P — painel de cenário ──────────────────────────────── */
[data-page="routing-tables"] .rt-scen-panel {
  background: var(--card-solid);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px;
  position: relative;
  margin-top: 16px;
}
[data-page="routing-tables"] .rt-scen-panel::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.5), transparent);
}
[data-page="routing-tables"] .rt-scen-section + .rt-scen-redo {
  margin-top: 28px; padding-top: 24px;
  border-top: 1px dashed rgba(var(--accent-rgb), 0.20);
}
[data-page="routing-tables"] .rt-scen-config {
  display: inline-block;
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(var(--accent-rgb), 0.95);
  background: rgba(var(--accent-rgb), 0.10);
  border: 1px solid rgba(var(--accent-rgb), 0.30);
  padding: 4px 10px; border-radius: 999px;
  margin-bottom: 12px;
}
[data-page="routing-tables"] .rt-scen-enun {
  font-size: 13.5px; color: var(--muted); line-height: 1.6;
  margin: 0 0 16px;
}
[data-page="routing-tables"] .rt-scen-enun code {
  font-family: "JetBrains Mono", monospace; font-size: 12px;
  background: rgba(var(--accent-rgb), 0.10); color: var(--primary-2);
  padding: 1px 5px; border-radius: 4px;
}
[data-page="routing-tables"] .rt-scen-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 22px;
  align-items: start;
}
@media (max-width: 980px) {
  [data-page="routing-tables"] .rt-scen-grid { grid-template-columns: 1fr; }
}
[data-page="routing-tables"] .rt-scen-diagram { display: flex; justify-content: center; }

[data-page="routing-tables"] .rt-scen-events-head {
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(var(--accent-rgb), 0.85);
  margin-bottom: 8px;
}
[data-page="routing-tables"] .rt-scen-events-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
  counter-reset: ev;
}
[data-page="routing-tables"] .rt-scen-events-list li {
  counter-increment: ev;
  position: relative;
  padding: 6px 10px 6px 32px;
  font-size: 12.5px; line-height: 1.55; color: var(--muted);
  background: rgba(255, 255, 255, 0.015);
  border-left: 2px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 0 6px 6px 0;
}
[data-page="routing-tables"] .rt-scen-events-list li .evt { margin-bottom: 2px; }
[data-page="routing-tables"] .rt-scen-events-list li .state {
  font-size: 10.5px; color: var(--muted-2);
  background: rgba(0, 0, 0, 0.25);
  padding: 3px 7px; border-radius: 4px;
  display: inline-block; margin-top: 2px;
  letter-spacing: 0.02em;
}
[data-page="routing-tables"] .rt-scen-events-list li::before {
  content: counter(ev, decimal-leading-zero);
  position: absolute; left: 8px; top: 6px;
  font-family: "JetBrains Mono", monospace; font-size: 10.5px;
  color: rgba(var(--accent-rgb), 0.75);
}
[data-page="routing-tables"] .rt-scen-events-list li strong { color: var(--fg); font-weight: 600; }
[data-page="routing-tables"] .rt-scen-events-list li code {
  font-family: "JetBrains Mono", monospace; font-size: 11.5px;
  background: rgba(var(--accent-rgb), 0.10); color: var(--primary-2);
  padding: 1px 5px; border-radius: 4px;
}

/* ─── Bloco "redesenha" + olho ──────────────────────────────────────── */
[data-page="routing-tables"] .rt-scen-redo-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
[data-page="routing-tables"] .rt-scen-redo-head .lbl {
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(var(--accent-rgb), 0.85);
}
[data-page="routing-tables"] .rt-scen-eye {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(10, 13, 18, 0.7);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
[data-page="routing-tables"] .rt-scen-eye:hover {
  color: var(--fg);
  border-color: rgba(var(--accent-rgb), 0.4);
  background: rgba(10, 13, 18, 0.88);
}
[data-page="routing-tables"] .rt-scen-solution {
  margin-top: 16px;
  padding: 18px;
  border-radius: 10px;
  background: rgba(var(--accent-rgb), 0.04);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
}
[data-page="routing-tables"] .rt-scen-diff {
  font-size: 12.5px; line-height: 1.65; color: var(--muted);
}
[data-page="routing-tables"] .rt-scen-diff p { margin: 0; }
[data-page="routing-tables"] .rt-scen-diff strong { color: var(--fg); font-weight: 600; }
[data-page="routing-tables"] .rt-scen-diff code {
  font-family: "JetBrains Mono", monospace; font-size: 11.5px;
  background: rgba(var(--accent-rgb), 0.10); color: var(--primary-2);
  padding: 1px 5px; border-radius: 4px;
}

/* ─── Exercícios P — diagrama de troca de tramas (FrameExchange) ────── */
[data-page="routing-tables"] .rt-fx-wrap {
  display: flex; flex-direction: column; gap: 6px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
}
[data-page="routing-tables"] .rt-fx-title {
  font-family: "JetBrains Mono", monospace; font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(var(--accent-rgb), 0.8);
  text-align: center;
}
[data-page="routing-tables"] .rt-fx-svg { max-width: 100%; height: auto; }
[data-page="routing-tables"] .rt-fx-station {
  font-family: "JetBrains Mono", monospace; font-size: 14px; font-weight: 700;
  fill: var(--fg);
}
[data-page="routing-tables"] .rt-fx-time {
  font-family: "JetBrains Mono", monospace; font-size: 10.5px;
  fill: var(--muted-2); letter-spacing: 0.05em;
}
[data-page="routing-tables"] .rt-fx-label {
  font-family: "JetBrains Mono", monospace; font-size: 10.5px;
}
[data-page="routing-tables"] .rt-fx-x {
  font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 700;
  fill: rgba(248, 113, 113, 0.95);
}
@media (max-width: 980px) {
  [data-page="routing-tables"] .rt-triptych { grid-template-columns: 1fr; }
}

[data-page="routing-tables"] .rt-table-card {
  padding: 22px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--card-solid); position: relative;
  display: flex; flex-direction: column; gap: 16px;
  min-width: 0;
}
[data-page="routing-tables"] .rt-table-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.4), transparent);
}
[data-page="routing-tables"] .rt-table-card .head {
  display: flex; align-items: flex-start; gap: 12px;
}
[data-page="routing-tables"] .rt-table-card .icon {
  width: 38px; height: 38px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  color: var(--primary-2); background: rgba(var(--accent-rgb), 0.10);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  flex-shrink: 0;
}
[data-page="routing-tables"] .rt-table-card .title {
  font-size: 16px; font-weight: 600; margin: 0; letter-spacing: -0.005em;
}
[data-page="routing-tables"] .rt-table-card .sub {
  font-family: "JetBrains Mono", monospace; font-size: 9.5px;
  color: var(--muted-2); letter-spacing: 0.1em; text-transform: uppercase;
  margin-top: 2px;
}
[data-page="routing-tables"] .rt-table-card .body {
  display: flex; flex-direction: column; gap: 14px;
  min-width: 0;
}
[data-page="routing-tables"] .rt-table-card .facts { display: grid; gap: 8px; }
[data-page="routing-tables"] .rt-table-card .fact {
  display: grid; grid-template-columns: 70px 1fr; gap: 10px;
  padding: 7px 10px; border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  font-size: 12.5px;
}
[data-page="routing-tables"] .rt-table-card .fact .k {
  font-family: "JetBrains Mono", monospace; font-size: 10px;
  color: var(--muted-2); letter-spacing: 0.06em; text-transform: uppercase;
  align-self: center;
}
[data-page="routing-tables"] .rt-table-card .fact .v { color: var(--fg); line-height: 1.4; }
[data-page="routing-tables"] .rt-table-card .fact .v em {
  font-style: normal; color: var(--primary-2); margin: 0 2px;
}

/* Single-grid layout: a mini-table é o grid; cada .row tem display:contents
   para que as células de TODAS as rows pertençam ao mesmo grid (colunas
   sempre alinhadas). Padding/border ficam nas próprias células. */
[data-page="routing-tables"] .rt-table-card .mini-table {
  display: grid;
  border: 1px solid var(--border); border-radius: 6px;
  font-family: "JetBrains Mono", monospace; font-size: 10.5px;
  overflow-x: auto;
  min-width: 0;
}
[data-page="routing-tables"] .rt-table-card .mini-table.cols-2 {
  grid-template-columns: minmax(110px, 1fr) minmax(150px, 1.3fr);
}
[data-page="routing-tables"] .rt-table-card .mini-table.cols-4 {
  grid-template-columns: minmax(110px, 1.1fr) minmax(100px, 1.1fr) minmax(120px, 1.2fr) minmax(80px, 0.5fr);
}
[data-page="routing-tables"] .rt-table-card .mini-table .row { display: contents; }
[data-page="routing-tables"] .rt-table-card .mini-table .row > * {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
}
[data-page="routing-tables"] .rt-table-card .mini-table .row:last-child > * {
  border-bottom: 0;
}
[data-page="routing-tables"] .rt-table-card .mini-table .row.head > * {
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted-2); letter-spacing: 0.04em;
  font-size: 9.5px; text-transform: uppercase;
}
[data-page="routing-tables"] .rt-table-card .mini-table .row > div { color: var(--fg); }
[data-page="routing-tables"] .rt-table-card .mini-table .row.head > div { color: var(--muted-2); }

/* ─── "Comandos essenciais" section ────────────────────────────────── */
[data-page="routing-tables"] .rt-cmd-block {
  display: flex; flex-direction: column; gap: 20px;
}
[data-page="routing-tables"] .rt-cmd-picker {
  display: flex; flex-wrap: wrap; gap: 8px;
}
[data-page="routing-tables"] .rt-cmd-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 8px;
  background: transparent; border: 1px solid var(--border);
  color: var(--muted); cursor: pointer; transition: all .15s ease;
  font-family: "JetBrains Mono", monospace; font-size: 12px;
}
[data-page="routing-tables"] .rt-cmd-chip:hover { color: var(--fg); border-color: var(--border-strong); }
[data-page="routing-tables"] .rt-cmd-chip.is-active {
  color: var(--fg); border-color: rgba(var(--accent-rgb), 0.55);
  background: rgba(var(--accent-rgb), 0.08);
}
[data-page="routing-tables"] .rt-cmd-chip .prompt { color: var(--primary-2); }
[data-page="routing-tables"] .rt-cmd-chip .name { color: inherit; }
[data-page="routing-tables"] .mono { font-family: "JetBrains Mono", monospace; }

[data-page="routing-tables"] .rt-cmd-frame {
  padding: 22px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--card-solid); position: relative;
  display: flex; flex-direction: column; gap: 16px;
}
[data-page="routing-tables"] .rt-cmd-frame::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.4), transparent);
}
[data-page="routing-tables"] .rt-cmd-line {
  font-size: 14px; color: var(--fg);
  padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
[data-page="routing-tables"] .rt-cmd-line .prompt { color: var(--primary-2); margin-right: 8px; }
[data-page="routing-tables"] .rt-cmd-summary { color: var(--muted); font-size: 13.5px; line-height: 1.55; }

[data-page="routing-tables"] code {
  font-family: "JetBrains Mono", monospace; color: var(--primary-2);
  background: rgba(var(--accent-rgb), 0.08); padding: 1px 4px;
  border-radius: 3px; font-size: 0.9em;
}

/* ─── Comandos — separadores por bloco (DNS/Interface/ARP/Rotas/Diag.) */
[data-page="routing-tables"] .rt-cmd-blocks {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 4px 0 0;
}
[data-page="routing-tables"] .rt-cmd-block-tab {
  appearance: none;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 8px 14px;
  background: rgba(15, 18, 25, 0.45);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--fg);
  cursor: pointer;
  text-align: left;
  transition: background .15s, border-color .15s;
}
[data-page="routing-tables"] .rt-cmd-block-tab:hover {
  background: rgba(255, 255, 255, 0.035);
  border-color: var(--border-strong);
}
[data-page="routing-tables"] .rt-cmd-block-tab.is-active {
  background: rgba(var(--accent-rgb), 0.10);
  border-color: rgba(var(--accent-rgb), 0.55);
}
[data-page="routing-tables"] .rt-cmd-block-tab .lbl {
  font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--fg);
  letter-spacing: 0.04em;
}
[data-page="routing-tables"] .rt-cmd-block-tab .hint {
  font-size: 10.5px; color: var(--muted-2);
}
[data-page="routing-tables"] .rt-cmd-block-tab.is-active .hint { color: var(--muted); }

/* ─── Comandos — meta chips (OS / Camada / Protocolo) ────────────────── */
[data-page="routing-tables"] .rt-cmd-meta {
  display: flex; flex-wrap: wrap; gap: 6px;
}
[data-page="routing-tables"] .cmd-chip {
  display: inline-block;
  padding: 2px 8px; border-radius: 999px;
  font-family: "JetBrains Mono", monospace; font-size: 10px;
  letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid var(--border);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.02);
}
[data-page="routing-tables"] .cmd-chip.os-linux {
  color: #fbbf24; border-color: rgba(251, 191, 36, 0.4); background: rgba(251, 191, 36, 0.06);
}
[data-page="routing-tables"] .cmd-chip.os-windows {
  color: #60a5fa; border-color: rgba(96, 165, 250, 0.4); background: rgba(96, 165, 250, 0.06);
}
[data-page="routing-tables"] .cmd-chip.layer {
  color: #c4b5fd; border-color: rgba(167, 139, 250, 0.4); background: rgba(167, 139, 250, 0.08);
}
[data-page="routing-tables"] .cmd-chip.proto {
  color: #86efac; border-color: rgba(34, 197, 94, 0.4); background: rgba(34, 197, 94, 0.08);
}

/* ─── Comandos — sub-cabeçalho de cada secção do painel ─────────────── */
[data-page="routing-tables"] .rt-cmd-sub {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(var(--accent-rgb), 0.85);
  margin: 4px 0 8px;
  font-weight: 500;
}

/* ─── Comandos — sintaxe (lista clicável tipo tabs) ─────────────────── */
[data-page="routing-tables"] .rt-cmd-syntax {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 6px;
}
[data-page="routing-tables"] .rt-cmd-syn-item {
  appearance: none;
  width: 100%; text-align: left;
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 14px;
  align-items: baseline;
  padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 8px;
  background: rgba(255, 255, 255, 0.015);
  color: var(--fg);
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
[data-page="routing-tables"] .rt-cmd-syn-item:hover {
  background: rgba(255, 255, 255, 0.035);
  border-color: var(--border-strong);
}
[data-page="routing-tables"] .rt-cmd-syn-item.is-active {
  background: rgba(var(--accent-rgb), 0.10);
  border-color: rgba(var(--accent-rgb), 0.55);
}
[data-page="routing-tables"] .rt-cmd-syn-item code {
  font-size: 12.5px; padding: 2px 6px;
  background: rgba(var(--accent-rgb), 0.10);
  color: var(--fg);
  white-space: pre-wrap; word-break: break-word;
}
[data-page="routing-tables"] .rt-cmd-syn-item .d {
  font-size: 12.5px; color: var(--muted); line-height: 1.5;
}

/* ─── Comandos — bloco de output ─────────────────────────────────────── */
[data-page="routing-tables"] .rt-cmd-output {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--border); border-radius: 10px;
  background: rgba(0, 0, 0, 0.45);
  color: var(--fg);
  font-size: 12px; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word;
  overflow-x: auto;
}

/* ─── Comandos — lista de atenção ──────────────────────────────────── */
[data-page="routing-tables"] .rt-cmd-gotcha {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 6px;
}
[data-page="routing-tables"] .rt-cmd-gotcha li {
  position: relative;
  padding: 6px 10px 6px 22px;
  font-size: 12.5px; line-height: 1.55; color: var(--muted);
  border-left: 2px solid #fbbf24;
  background: rgba(255, 255, 255, 0.015);
  border-radius: 0 6px 6px 0;
}
[data-page="routing-tables"] .rt-cmd-gotcha li::before {
  content: "!"; position: absolute; left: 8px; top: 6px;
  color: #fbbf24; font-family: "JetBrains Mono", monospace;
}
[data-page="routing-tables"] .rt-cmd-gotcha li strong { color: var(--fg); font-weight: 600; }

/* ─── Exercícios — picker dos 6 cenários ────────────────────────────── */
[data-page="routing-tables"] .rt-const-pickrow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px 24px; flex-wrap: wrap;
  margin-top: 14px;
}
[data-page="routing-tables"] .rt-const-picker {
  display: flex; flex-wrap: wrap; gap: 6px;
}
[data-page="routing-tables"] .rt-super-chip {
  appearance: none;
  background: rgba(15, 18, 25, 0.45);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px 7px;
  cursor: pointer;
  display: flex; flex-direction: row; align-items: baseline; gap: 6px;
  text-align: left; color: var(--fg);
  font-family: inherit;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: relative; overflow: hidden;
  transition: background .15s, border-color .15s, transform .12s, box-shadow .15s;
}
[data-page="routing-tables"] .rt-super-chip::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.25), transparent);
  opacity: 0; transition: opacity .2s;
}
[data-page="routing-tables"] .rt-super-chip:hover {
  background: rgba(255, 255, 255, 0.035);
  border-color: var(--border-strong);
}
[data-page="routing-tables"] .rt-super-chip:hover::before { opacity: 0.6; }
[data-page="routing-tables"] .rt-super-chip.is-active {
  background: rgba(var(--accent-rgb), 0.10);
  border-color: rgba(var(--accent-rgb), 0.45);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.10);
}
[data-page="routing-tables"] .rt-super-chip.is-active::before { opacity: 1; }
[data-page="routing-tables"] .rt-super-chip .lbl {
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  font-weight: 500; color: var(--muted-2);
  letter-spacing: 0.02em; text-transform: lowercase; line-height: 1.1;
}
[data-page="routing-tables"] .rt-super-chip.is-active .lbl { color: var(--primary-2); }
[data-page="routing-tables"] .rt-super-chip .num {
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  font-weight: 600; color: var(--fg);
  letter-spacing: 0.02em; line-height: 1.1;
}
[data-page="routing-tables"] .rt-super-chip.is-active .num { color: var(--primary-2); }

/* ─── Meta-info do cenário activo (título + bloco-base) ─────────────── */
[data-page="routing-tables"] .rt-const-meta {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 8px 16px;
}
[data-page="routing-tables"] .rt-const-title {
  font-size: 14px; font-weight: 600; color: var(--fg);
  letter-spacing: -0.005em;
}
[data-page="routing-tables"] .rt-const-sep {
  color: var(--muted-2); margin: 0 8px;
}
[data-page="routing-tables"] .rt-const-meta .mono {
  font-family: "JetBrains Mono", monospace; font-size: 12.5px; color: var(--primary-2);
}
[data-page="routing-tables"] .rt-const-cap {
  color: var(--muted-2); font-size: 11.5px; margin-left: 8px;
}

/* Painel "espaço do bloco" — uso do bloco-pai + quantas redes cabem no livre */
[data-page="routing-tables"] .rt-const-space {
  margin-top: 10px;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.25);
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  color: var(--muted);
}
[data-page="routing-tables"] .rt-const-space .row {
  display: flex; flex-wrap: wrap; gap: 6px 20px;
}
[data-page="routing-tables"] .rt-const-space .row .lbl {
  color: rgba(var(--accent-rgb), 0.85);
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 10px;
}
[data-page="routing-tables"] .rt-const-space b { color: var(--fg); font-weight: 600; }
[data-page="routing-tables"] .rt-const-space .calc {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--border);
}
[data-page="routing-tables"] .rt-const-space .calc p {
  margin: 0 0 5px; line-height: 1.6;
}
[data-page="routing-tables"] .rt-const-space .calc p:last-child { margin: 0; }
[data-page="routing-tables"] .rt-const-space .calc b { color: var(--primary-2); font-weight: 600; }

/* ─── Stage (canvas + caption) ─────────────────────────────────────── */
[data-page="routing-tables"] .rt-const-stage {
  margin-top: 14px;
  position: relative;
  background: rgba(15, 18, 25, 0.55);
  border: 1px solid var(--border);
  border-radius: 16px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  height: 560px;
}
[data-page="routing-tables"] .rt-const-stage::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.5), transparent);
}
/* Wrapper que envolve o canvas — em desktop fica colado ao stage; em mobile
   ganha overflow-x: auto para o utilizador poder fazer scroll horizontal
   ao desenho (com o canvas a manter a sua largura natural via min-width). */
[data-page="routing-tables"] .rt-const-canvas-wrap {
  position: absolute; inset: 0;
  overflow: hidden;
}
[data-page="routing-tables"] .rt-const-canvas {
  display: block; width: 100%; height: 100%;
}
[data-page="routing-tables"] .rt-const-stage .caption {
  position: absolute; top: 14px; left: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  color: var(--muted); letter-spacing: 0.04em;
  padding: 6px 10px;
  background: rgba(10, 13, 18, 0.7);
  border: 1px solid var(--border);
  border-radius: 7px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
}
[data-page="routing-tables"] .rt-const-stage .caption .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.7);
}
/* Botão "olho" — toggle dos rótulos das interfaces sobre as ligações */
[data-page="routing-tables"] .rt-const-eye {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(10, 13, 18, 0.7);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
[data-page="routing-tables"] .rt-const-eye:hover {
  color: var(--fg);
  border-color: rgba(var(--accent-rgb), 0.4);
  background: rgba(10, 13, 18, 0.88);
}

/* ─── Inspector (router/pc/net details) ────────────────────────────── */
@keyframes rtStepIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
[data-page="routing-tables"] .inspector {
  margin-top: 16px;
  background: rgba(15, 18, 25, 0.65);
  border: 1px solid var(--border);
  border-radius: 16px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding: 22px 24px;
  position: relative;
  animation: rtStepIn .25s ease-out;
}
[data-page="routing-tables"] .inspector::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.5), transparent);
}
/* folga p/ a navbar fixa não tapar o topo do inspector ao fazer scroll */
[data-page="routing-tables"] .rt-insp-anchor { scroll-margin-top: 100px; }

[data-page="routing-tables"] .insp-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
}
[data-page="routing-tables"] .insp-head .kind {
  font-family: "JetBrains Mono", monospace; font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(var(--accent-rgb), 0.85);
}
[data-page="routing-tables"] .insp-head .kind::before { content: "▸ "; color: rgba(var(--accent-rgb), 0.7); }
[data-page="routing-tables"] .insp-head h3 {
  margin: 6px 0 4px;
  font-size: 22px; font-weight: 600; letter-spacing: -0.015em;
}
[data-page="routing-tables"] .insp-head .sub {
  font-family: "JetBrains Mono", monospace; font-size: 11.5px;
  color: var(--muted); letter-spacing: 0.04em;
}
[data-page="routing-tables"] .insp-close {
  background: transparent; border: 0;
  color: var(--muted-2); cursor: pointer;
  font-size: 22px; padding: 4px 10px;
  border-radius: 8px; line-height: 1;
}
[data-page="routing-tables"] .insp-close:hover {
  color: var(--fg); background: rgba(255, 255, 255, 0.05);
}

[data-page="routing-tables"] .insp-section + .insp-section { margin-top: 24px; }
[data-page="routing-tables"] .insp-lbl {
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(var(--accent-rgb), 0.85);
  margin-bottom: 10px;
}
[data-page="routing-tables"] .insp-lbl::before { content: "── "; color: rgba(var(--accent-rgb), 0.5); }

[data-page="routing-tables"] .insp-expl {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.02);
  border-left: 2px solid rgba(var(--accent-rgb), 0.4);
  border-radius: 0 8px 8px 0;
  max-width: 88ch;
}
[data-page="routing-tables"] .insp-expl strong { color: var(--fg); font-weight: 500; }
[data-page="routing-tables"] .insp-expl em { font-style: normal; color: var(--primary-2); }
[data-page="routing-tables"] .insp-expl p { margin: 0; }
[data-page="routing-tables"] .insp-expl p + p { margin-top: 8px; }
[data-page="routing-tables"] .insp-expl-list {
  margin: 8px 0;
  padding-left: 22px;
  display: flex; flex-direction: column; gap: 8px;
}
[data-page="routing-tables"] .insp-expl-list li::marker {
  color: rgba(var(--accent-rgb), 0.85);
  font-weight: 600;
}
[data-page="routing-tables"] .insp-expl code {
  font-family: "JetBrains Mono", monospace;
  color: var(--primary-2);
  background: rgba(var(--accent-rgb), 0.08);
  padding: 1px 5px; border-radius: 4px;
  font-size: 12px;
}

/* iface grid + kv-grid (tiles) */
[data-page="routing-tables"] .iface-grid,
[data-page="routing-tables"] .inspector .kv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
[data-page="routing-tables"] .iface-tile,
[data-page="routing-tables"] .inspector .kv-tile {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 10px 12px;
}
[data-page="routing-tables"] .iface-tile .k,
[data-page="routing-tables"] .inspector .kv-tile .k {
  font-family: "JetBrains Mono", monospace; font-size: 9.5px;
  color: rgba(var(--accent-rgb), 0.85);
  letter-spacing: 0.12em; text-transform: uppercase;
}
[data-page="routing-tables"] .iface-tile .v,
[data-page="routing-tables"] .inspector .kv-tile .v {
  font-family: "JetBrains Mono", monospace; font-size: 13px;
  color: var(--fg); margin-top: 4px;
}
[data-page="routing-tables"] .iface-tile .sub {
  font-size: 10.5px; color: var(--muted-2); margin-top: 2px;
}

/* inspector tables (Routing / ARP / MAC / Hosts) */
/* Single-grid layout: a insp-table é o grid; cada .row tem display:contents
   para que as células de TODAS as rows pertençam ao mesmo grid (colunas
   sempre alinhadas). Em mobile o conteúdo é mais largo que o container e
   o overflow-x: auto cria scroll horizontal sem comprimir. */
[data-page="routing-tables"] .insp-table {
  display: grid;
  font-family: "JetBrains Mono", monospace; font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow-x: auto;
  background: rgba(0, 0, 0, 0.3);
  align-items: center;
  min-width: 0;
}
[data-page="routing-tables"] .insp-table.arp-cols-2 {
  grid-template-columns: minmax(120px, 1fr) minmax(160px, 1.4fr);
}
[data-page="routing-tables"] .insp-table.rt-cols {
  grid-template-columns: minmax(140px, 1.4fr) minmax(120px, 1.2fr) minmax(140px, 1.4fr) minmax(80px, 0.8fr);
}
[data-page="routing-tables"] .insp-table .row { display: contents; }
[data-page="routing-tables"] .insp-table .row > * {
  padding: 8px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
[data-page="routing-tables"] .insp-table .row:last-child > * { border-bottom: 0; }
[data-page="routing-tables"] .insp-table .row.head > * {
  background: rgba(var(--accent-rgb), 0.08);
  color: rgba(var(--accent-rgb), 0.9);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* Folga entre uma tabela e uma explicação que venha logo a seguir
   (espelha o margin-bottom dos próprios .insp-expl). */
[data-page="routing-tables"] .insp-table + .insp-expl { margin-top: 12px; }

[data-page="routing-tables"] .insp-table .dest { color: var(--primary-2); }
[data-page="routing-tables"] .insp-table .row.row-direct  .dest { color: #86efac; }
[data-page="routing-tables"] .insp-table .row.row-default .dest { color: #fcd34d; }
[data-page="routing-tables"] .insp-table .nh   { color: var(--fg); }
[data-page="routing-tables"] .insp-table .if   { color: var(--muted); }
[data-page="routing-tables"] .insp-table .mask { color: var(--muted-2); }

[data-page="routing-tables"] .tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: "JetBrains Mono", monospace; font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted-2);
}
[data-page="routing-tables"] .tag.tag-direct   { background: rgba(34, 197, 94, 0.14);  color: #86efac; }
[data-page="routing-tables"] .tag.tag-indirect { background: rgba(96, 165, 250, 0.14); color: var(--primary-2); }
[data-page="routing-tables"] .tag.tag-default  { background: rgba(234, 179, 8, 0.14);  color: #fcd34d; }

@media (max-width: 720px) {
  [data-page="routing-tables"] .rt-const-stage { height: 480px; }
  /* Em mobile o canvas mantém o tamanho natural (720×560) e o wrap scrolla
     em ambos eixos quando preciso (cenários maiores). Eye e caption ficam
     fixos no stage (fora do wrap). */
  [data-page="routing-tables"] .rt-const-canvas-wrap {
    overflow: auto;
  }
  [data-page="routing-tables"] .rt-const-canvas {
    min-width: 720px;
    min-height: 560px;
  }
}


/* ─── Exercícios D — diagrama wireless (WirelessDiagram) ────────────── */
[data-page="routing-tables"] .rt-wd-wrap {
  width: 100%;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
}
[data-page="routing-tables"] .rt-wd-svg {
  width: 100%; height: auto;
  display: block;
  max-width: 900px;
  max-height: 480px;
  margin: 0 auto;
}

/* Diagrama "wide" — ocupa a largura toda do painel, ao contrário do
   .rt-scen-grid usado nos exercícios P. */
[data-page="routing-tables"] .rt-scen-diagram-wide {
  margin: 4px 0 18px;
}

/* ─── Análise narrativa (Exercícios D — walkthrough) ─────────────── */
[data-page="routing-tables"] .rt-anal {
  display: flex; flex-direction: column; gap: 14px;
  margin-top: 6px;
}
[data-page="routing-tables"] .rt-anal-head {
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(var(--accent-rgb), 0.85);
  margin-bottom: 2px;
}
[data-page="routing-tables"] .rt-anal-block {
  border-left: 2px solid rgba(var(--accent-rgb), 0.35);
  padding: 4px 0 4px 14px;
}
[data-page="routing-tables"] .rt-anal-titulo {
  margin: 0 0 6px;
  font-size: 13px; font-weight: 600; color: var(--fg);
  letter-spacing: 0.01em;
}
[data-page="routing-tables"] .rt-anal-texto {
  margin: 0;
  font-size: 13px; line-height: 1.7; color: var(--muted);
}
[data-page="routing-tables"] .rt-anal-texto strong { color: var(--fg); font-weight: 600; }
[data-page="routing-tables"] .rt-anal-texto code {
  font-family: "JetBrains Mono", monospace; font-size: 11.5px;
  background: rgba(var(--accent-rgb), 0.10); color: var(--primary-2);
  padding: 1px 5px; border-radius: 4px;
}

/* Mobile — sub-página Redes Wireless (WirelessExercises): aliviar paddings
   para ganhar largura horizontal nos diagramas e blocos de análise. */
@media (max-width: 640px) {
  [data-page="routing-tables"] .rt-scen-panel { padding: 14px; }
  [data-page="routing-tables"] .rt-wd-wrap { padding: 8px; }
  [data-page="routing-tables"] .rt-anal-block { padding-left: 10px; }
  [data-page="routing-tables"] .rt-scen-enun { font-size: 13px; }
  [data-page="routing-tables"] .rt-anal-titulo,
  [data-page="routing-tables"] .rt-anal-texto { font-size: 12.5px; }
}