:root {
  --bg: #070b14;
  --bg2: #0e1524;
  --bg3: #151f35;
  --surface: rgba(255, 255, 255, 0.04);
  --border: rgba(255, 255, 255, 0.09);

  --blue: #4f8ef7;
  --purple: #a855f7;
  --cyan: #22d3ee;
  --green: #34d399;
  --yellow: #fcd34d;
  --red: #f87171;
  --pink: #f472b6;

  --txt: #e8edf5;
  --txt2: #8896b0;
  --txt3: #4a5568;

  --radius: 14px;
  --rad-sm: 8px;

  /* Dark / Light mode swap */
  --mode-bg: var(--bg);
  --mode-bg2: var(--bg2);
  --mode-txt: var(--txt);
  --mode-txt2: var(--txt2);
  --mode-border: var(--border);
  --mode-surface: var(--surface);
}

/* Light mode overrides */
body.light {
  --mode-bg: #f0f4f8;
  --mode-bg2: #ffffff;
  --mode-txt: #1a202c;
  --mode-txt2: #4a5568;
  --mode-border: rgba(0, 0, 0, 0.1);
  --mode-surface: rgba(0, 0, 0, 0.03);
}

/* ── 2. RESET ─────────────────────────────────── */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--mode-bg);
  color: var(--mode-txt);
  min-height: 100vh;
  overflow-x: hidden;
  transition: background 0.4s, color 0.4s;
}

/* ── 3. SCROLL PROGRESS BAR ───────────────────── */
#scroll-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--blue), var(--purple), var(--pink));
  z-index: 9999;
  transition: width 0.08s linear;
  border-radius: 0 100px 100px 0;
}

/* ── 4. STICKY NAVBAR ─────────────────────────── */
#navbar {
  position: sticky;
  top: 0;
  z-index: 800;
  background: rgba(7, 11, 20, 0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  height: 62px;
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  gap: 1.5rem;
}

body.light #navbar {
  background: rgba(240, 244, 248, 0.88);
}

.navbar-brand {
  font-weight: 900;
  font-size: 1rem;
  background: linear-gradient(90deg, var(--blue), var(--purple));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
  text-decoration: none;
  flex-shrink: 0;
}

.navbar-nav {
  display: flex;
  list-style: none;
  gap: 0;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}

.navbar-nav::-webkit-scrollbar {
  display: none;
}

.navbar-nav a {
  display: block;
  padding: 0.4rem 0.75rem;
  color: var(--mode-txt2);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 500;
  border-radius: 8px;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}

.navbar-nav a:hover,
.navbar-nav a.active {
  background: var(--mode-surface);
  color: var(--mode-txt);
}

.navbar-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-shrink: 0;
}

/* Dark/Light toggle button */
#mode-toggle {
  width: 40px;
  height: 40px;
  border-radius: var(--rad-sm);
  background: var(--mode-surface);
  border: 1px solid var(--mode-border);
  color: var(--mode-txt);
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

#mode-toggle:hover {
  background: rgba(79, 142, 247, 0.15);
  border-color: var(--blue);
}

.nav-back-link {
  text-decoration: none;
  color: var(--mode-txt2);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--mode-border);
  border-radius: 8px;
  transition: all 0.2s;
  white-space: nowrap;
}

.nav-back-link:hover {
  color: var(--mode-txt);
  border-color: var(--blue);
  background: rgba(79, 142, 247, 0.08);
}

/* Mobile hamburger */
#hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--mode-txt);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 0.4rem;
}

/* ── 5. HERO SECTION ──────────────────────────── */
#hero {
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 1.5rem;
  background:
    radial-gradient(ellipse 80% 40% at 20% 0%, rgba(79, 142, 247, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse 60% 30% at 80% 100%, rgba(168, 85, 247, 0.12) 0%, transparent 60%);
  position: relative;
  overflow: hidden;
}

/* Animated grid background */
#hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(79, 142, 247, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 142, 247, 0.05) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 80%);
  z-index: 0;
}

#hero>* {
  position: relative;
  z-index: 1;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(79, 142, 247, 0.1);
  border: 1px solid rgba(79, 142, 247, 0.3);
  border-radius: 100px;
  padding: 0.35rem 1.2rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 2rem;
  animation: fadeUp 0.6s ease both;
}

#hero h1 {
  font-size: clamp(2.2rem, 6vw, 4.5rem);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  animation: fadeUp 0.7s ease both 0.1s;
}

#hero h1 .grad {
  background: linear-gradient(120deg, var(--blue), var(--purple), var(--pink));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-sub {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--mode-txt2);
  max-width: 600px;
  line-height: 1.75;
  margin-bottom: 2.5rem;
  animation: fadeUp 0.7s ease both 0.2s;
}

.hero-pills {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 2.5rem;
  animation: fadeUp 0.7s ease both 0.3s;
}

.hero-pill {
  background: var(--mode-surface);
  border: 1px solid var(--mode-border);
  border-radius: 100px;
  padding: 0.3rem 0.9rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--mode-txt2);
}

.hero-cta {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  animation: fadeUp 0.7s ease both 0.4s;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 1.6rem;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: all 0.2s;
}

.btn-primary {
  background: linear-gradient(135deg, var(--blue), var(--purple));
  color: #fff;
  box-shadow: 0 4px 20px rgba(79, 142, 247, 0.35);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(79, 142, 247, 0.45);
}

.btn-outline {
  background: var(--mode-surface);
  color: var(--mode-txt);
  border: 1px solid var(--mode-border);
}

.btn-outline:hover {
  border-color: var(--blue);
  background: rgba(79, 142, 247, 0.08);
}

/* Animations */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ── 6. SECTION LAYOUT ────────────────────────── */
.showcase-section {
  padding: 5rem 1.5rem;
  border-bottom: 1px solid var(--mode-border);
  scroll-margin-top: 70px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.showcase-section.visible {
  opacity: 1;
  transform: none;
}

.section-inner {
  max-width: 1040px;
  margin: 0 auto;
}

.section-label {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  background: rgba(79, 142, 247, 0.1);
  padding: 0.2rem 0.8rem;
  border-radius: 100px;
  margin-bottom: 0.8rem;
}

.section-title {
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  font-weight: 800;
  margin-bottom: 0.75rem;
  color: var(--mode-txt);
}

.section-desc {
  color: var(--mode-txt2);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 660px;
  margin-bottom: 3rem;
}

/* ── 7. CARDS & GRIDS ─────────────────────────── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.25rem;
}

.card {
  background: var(--mode-surface);
  border: 1px solid var(--mode-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.card:hover {
  transform: translateY(-4px);
  border-color: rgba(79, 142, 247, 0.35);
  box-shadow: 0 10px 30px rgba(79, 142, 247, 0.12);
}

.card-icon {
  font-size: 1.8rem;
  margin-bottom: 0.75rem;
}

.card h3 {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  color: var(--mode-txt);
}

.card p {
  font-size: 0.83rem;
  color: var(--mode-txt2);
  line-height: 1.6;
}

/* ── 8. CODE BLOCK ────────────────────────────── */
.code-block {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--rad-sm);
  padding: 1.1rem 1.25rem;
  font-family: 'Fira Code', monospace;
  font-size: 0.82rem;
  color: #a5d6ff;
  overflow-x: auto;
  white-space: pre;
  line-height: 1.65;
}

body.light .code-block {
  background: #1e293b;
  border-color: rgba(0, 0, 0, 0.15);
}

.code-block .kw {
  color: #ff7b72;
}

.code-block .fn {
  color: #d2a8ff;
}

.code-block .st {
  color: #79c0ff;
}

.code-block .cm {
  color: #6e7d91;
  font-style: italic;
}

.code-block .vl {
  color: #ffa657;
}

/* ── 9. DEMO PANEL ────────────────────────────── */
.demo-panel {
  background: var(--mode-surface);
  border: 1px solid var(--mode-border);
  border-radius: var(--radius);
  padding: 1.75rem;
}

.demo-panel h3 {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 1.25rem;
}

/* ── 10. FORM INPUT STYLES ────────────────────── */
.form-group {
  margin-bottom: 1.1rem;
}

.form-group label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--mode-txt2);
  margin-bottom: 0.35rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.65rem 0.9rem;
  background: var(--mode-bg2);
  border: 1.5px solid var(--mode-border);
  border-radius: var(--rad-sm);
  color: var(--mode-txt);
  font-family: inherit;
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(79, 142, 247, 0.15);
}

.form-group input.valid {
  border-color: var(--green);
}

.form-group input.invalid {
  border-color: var(--red);
}

.field-msg {
  font-size: 0.75rem;
  margin-top: 0.3rem;
  min-height: 1rem;
}

.field-msg.ok {
  color: var(--green);
}

.field-msg.err {
  color: var(--red);
}

/* Radio & Checkbox */
.radio-group,
.check-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.radio-group.horizontal,
.check-group.horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.radio-group label,
.check-group label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--mode-txt);
  font-weight: 400;
}

/* ── 11. TIMELINE ─────────────────────────────── */
.timeline {
  position: relative;
  padding: 1rem 0;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 28px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--blue), var(--purple), var(--pink));
  border-radius: 2px;
}

.timeline-item {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 2rem;
  align-items: flex-start;
}

.tl-dot {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--mode-bg2);
  border: 2px solid var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 4px rgba(79, 142, 247, 0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}

.timeline-item:hover .tl-dot {
  transform: scale(1.1);
  box-shadow: 0 0 0 8px rgba(79, 142, 247, 0.15);
}

.tl-content {
  background: var(--mode-surface);
  border: 1px solid var(--mode-border);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  flex: 1;
  transition: border-color 0.2s;
}

.timeline-item:hover .tl-content {
  border-color: rgba(79, 142, 247, 0.3);
}

.tl-year {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.25rem;
}

.tl-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--mode-txt);
  margin-bottom: 0.3rem;
}

.tl-desc {
  font-size: 0.82rem;
  color: var(--mode-txt2);
  line-height: 1.6;
}

/* ── 12. PROTOCOL CARDS ───────────────────────── */
.protocol-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.protocol-card {
  background: var(--mode-surface);
  border: 1px solid var(--mode-border);
  border-radius: var(--radius);
  padding: 1.25rem;
  transition: transform 0.2s, border-color 0.2s;
  cursor: default;
}

.protocol-card:hover {
  transform: translateY(-3px);
  border-color: var(--blue);
}

.protocol-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  margin-bottom: 0.75rem;
}

.protocol-card .p-title {
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: 0.35rem;
  color: var(--mode-txt);
}

.protocol-card .p-desc {
  font-size: 0.8rem;
  color: var(--mode-txt2);
  line-height: 1.55;
}

/* ── 13. CSS PLAYGROUND ───────────────────────── */
.playground-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 680px) {
  .playground-wrap {
    grid-template-columns: 1fr;
  }
}

.prop-toggle-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.prop-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 1rem;
  background: var(--mode-bg2);
  border: 1px solid var(--mode-border);
  border-radius: var(--rad-sm);
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--mode-txt);
  transition: border-color 0.2s;
  user-select: none;
}

.prop-toggle.on {
  border-color: var(--blue);
}

.toggle-switch {
  width: 32px;
  height: 20px;
  background: var(--mode-bg3, #151f35);
  border-radius: 100px;
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
}

.prop-toggle.on .toggle-switch {
  background: var(--blue);
}

.toggle-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}

.prop-toggle.on .toggle-switch::after {
  transform: translateX(12px);
}

.css-preview-box {
  min-height: 200px;
  background: var(--mode-bg2);
  border: 1px solid var(--mode-border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.preview-target {
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  text-align: center;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
}

/* ── 14. FLEXBOX / GRID DEMO ──────────────────── */
.layout-tabs {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}

.layout-tab {
  padding: 0.45rem 1rem;
  border-radius: var(--rad-sm);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  border: 1px solid var(--mode-border);
  background: var(--mode-surface);
  color: var(--mode-txt2);
  font-family: inherit;
  transition: all 0.2s;
}

.layout-tab.active {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

.layout-demo-area {
  background: var(--mode-bg2);
  border: 1px solid var(--mode-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  min-height: 200px;
}

.demo-children {
  gap: 10px;
}

.demo-child {
  background: linear-gradient(135deg, var(--blue), var(--purple));
  border-radius: 8px;
  height: 60px;
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  transition: all 0.3s;
  flex: none;
}

/* ── 15. JS COMPONENTS ────────────────────────── */

/* Calculator */
.calc-wrap {
  background: var(--mode-bg2);
  border: 1px solid var(--mode-border);
  border-radius: var(--radius);
  padding: 1.25rem;
  max-width: 280px;
}

.calc-display {
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--mode-border);
  border-radius: var(--rad-sm);
  padding: 0.9rem 1rem;
  text-align: right;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--mode-txt);
  font-family: 'Fira Code', monospace;
  margin-bottom: 1rem;
  min-height: 3.5rem;
  word-break: break-all;
}

.calc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}

.calc-btn {
  padding: 0.75rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: inherit;
  transition: opacity 0.15s, transform 0.1s;
  background: var(--mode-surface);
  color: var(--mode-txt);
  border: 1px solid var(--mode-border);
}

.calc-btn:hover {
  opacity: 0.85;
  transform: scale(0.97);
}

.calc-btn:active {
  transform: scale(0.93);
}

.calc-btn.op {
  background: rgba(79, 142, 247, 0.15);
  color: var(--blue);
  border-color: rgba(79, 142, 247, 0.3);
}

.calc-btn.eq {
  background: linear-gradient(135deg, var(--blue), var(--purple));
  color: #fff;
  border-color: transparent;
}

.calc-btn.clr {
  background: rgba(248, 113, 113, 0.15);
  color: var(--red);
  border-color: rgba(248, 113, 113, 0.3);
}

.calc-btn.wide {
  grid-column: span 2;
}

/* Todo list */
.todo-input-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.todo-input {
  flex: 1;
  padding: 0.65rem 0.9rem;
  background: var(--mode-bg2);
  border: 1.5px solid var(--mode-border);
  border-radius: var(--rad-sm);
  color: var(--mode-txt);
  font-family: inherit;
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.2s;
}

.todo-input:focus {
  border-color: var(--blue);
}

.todo-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 260px;
  overflow-y: auto;
}

.todo-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  background: var(--mode-surface);
  border: 1px solid var(--mode-border);
  border-radius: var(--rad-sm);
  animation: slideIn 0.3s ease;
}

.todo-item.done .todo-text {
  text-decoration: line-through;
  opacity: 0.45;
}

.todo-check {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid var(--mode-border);
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  transition: all 0.2s;
}

.todo-item.done .todo-check {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.todo-text {
  flex: 1;
  font-size: 0.875rem;
  color: var(--mode-txt);
}

.todo-del {
  background: none;
  border: none;
  color: var(--mode-txt2);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0.2rem;
  transition: color 0.2s;
}

.todo-del:hover {
  color: var(--red);
}

/* Quiz component */
.quiz-card {
  background: var(--mode-surface);
  border: 1px solid var(--mode-border);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.quiz-q-text {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 1.2rem;
  line-height: 1.5;
}

.quiz-opts {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.quiz-opt-btn {
  padding: 0.65rem 1rem;
  border: 1px solid var(--mode-border);
  border-radius: var(--rad-sm);
  background: var(--mode-bg2);
  color: var(--mode-txt);
  text-align: left;
  cursor: pointer;
  font-size: 0.875rem;
  font-family: inherit;
  transition: all 0.15s;
}

.quiz-opt-btn:hover:not(:disabled) {
  border-color: var(--blue);
}

.quiz-opt-btn.correct {
  border-color: var(--green);
  background: rgba(52, 211, 153, 0.1);
  color: var(--green);
}

.quiz-opt-btn.wrong {
  border-color: var(--red);
  background: rgba(248, 113, 113, 0.1);
  color: var(--red);
}

/* Countdown timer */
.timer-display {
  font-family: 'Fira Code', monospace;
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--mode-txt);
  text-align: center;
  margin-bottom: 1.5rem;
  letter-spacing: 0.05em;
}

.timer-display.urgent {
  color: var(--red);
  animation: pulse 1s infinite;
}

.timer-controls {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.timer-set-row {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

.timer-set-row input {
  width: 80px;
  padding: 0.5rem;
  border-radius: var(--rad-sm);
  background: var(--mode-bg2);
  border: 1px solid var(--mode-border);
  color: var(--mode-txt);
  font-family: 'Fira Code', monospace;
  font-size: 1rem;
  text-align: center;
  outline: none;
}

/* Product cards */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.1rem;
}

.product-card {
  background: var(--mode-surface);
  border: 1px solid var(--mode-border);
  border-radius: var(--radius);
  padding: 1.25rem;
  transition: transform 0.2s, border-color 0.2s;
}

.product-card:hover {
  transform: translateY(-4px);
  border-color: var(--blue);
}

.product-emoji {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
  display: block;
}

.product-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--mode-txt);
  margin-bottom: 0.2rem;
}

.product-cat {
  font-size: 0.72rem;
  color: var(--blue);
  font-weight: 600;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.product-price {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--green);
}

.product-btn {
  display: block;
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.5rem;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  color: #fff;
  border: none;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.2s;
}

.product-btn:hover {
  opacity: 0.85;
}

/* ── 16. FETCH / AJAX SECTION ─────────────────── */
.fetch-tabs {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--mode-border);
  border-bottom-color: var(--blue);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin: 2rem auto;
}

.posts-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 420px;
  overflow-y: auto;
}

.post-card {
  background: var(--mode-surface);
  border: 1px solid var(--mode-border);
  border-radius: var(--rad-sm);
  padding: 1rem 1.25rem;
  animation: slideIn 0.3s ease;
}

.post-card h4 {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--mode-txt);
  margin-bottom: 0.25rem;
}

.post-card p {
  font-size: 0.8rem;
  color: var(--mode-txt2);
  line-height: 1.5;
}

.user-card {
  background: var(--mode-surface);
  border: 1px solid var(--mode-border);
  border-radius: var(--rad-sm);
  padding: 1rem 1.25rem;
  animation: slideIn 0.3s ease;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.user-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.user-info h4 {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--mode-txt);
}

.user-info p {
  font-size: 0.78rem;
  color: var(--mode-txt2);
}

.fetch-status {
  font-size: 0.8rem;
  padding: 0.6rem 1rem;
  border-radius: var(--rad-sm);
  margin-bottom: 1rem;
}

.fetch-status.loading {
  background: rgba(79, 142, 247, 0.1);
  color: var(--blue);
}

.fetch-status.error {
  background: rgba(248, 113, 113, 0.1);
  color: var(--red);
}

.fetch-status.success {
  background: rgba(52, 211, 153, 0.1);
  color: var(--green);
}

/* ── 17. A11Y SECTION ─────────────────────────── */
.a11y-demo {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}

.a11y-card {
  background: var(--mode-surface);
  border: 1px solid var(--mode-border);
  border-radius: var(--radius);
  padding: 1.25rem;
}

.a11y-card h4 {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--mode-txt);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.focus-demo-btn {
  display: block;
  width: 100%;
  padding: 0.6rem;
  border-radius: var(--rad-sm);
  border: 2px solid var(--mode-border);
  background: var(--mode-bg2);
  color: var(--mode-txt);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  transition: all 0.2s;
  margin-bottom: 0.4rem;
}

.focus-demo-btn:focus {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-color: var(--blue);
}

.contrast-pair {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.contrast-box {
  flex: 1;
  padding: 0.65rem;
  border-radius: 6px;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
}

/* ── 18. RESPONSIVE DEMO ──────────────────────── */
.breakpoint-indicator {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.bp-badge {
  padding: 0.3rem 0.75rem;
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 700;
  border: 1px solid var(--mode-border);
  background: var(--mode-surface);
  color: var(--mode-txt2);
  transition: all 0.3s;
}

.bp-badge.active {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

.fluid-text-demo {
  font-size: clamp(1rem, 5vw, 2.5rem);
  font-weight: 800;
  background: linear-gradient(90deg, var(--blue), var(--purple));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  margin: 2rem 0;
  padding: 1rem;
  border: 1px dashed var(--mode-border);
  border-radius: var(--radius);
}

/* ── 19. BACK TO TOP ──────────────────────────── */
#back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.2s;
  z-index: 700;
  box-shadow: 0 4px 20px rgba(79, 142, 247, 0.4);
}

#back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
}

#back-to-top:hover {
  transform: translateY(-3px);
}

/* ── 20. FOOTER ───────────────────────────────── */
footer {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--mode-txt2);
  font-size: 0.83rem;
  border-top: 1px solid var(--mode-border);
}

footer a {
  color: var(--blue);
  text-decoration: none;
}

/* ── 21. RESPONSIVE BREAKPOINTS ──────────────── */
@media (max-width: 900px) {
  .navbar-nav {
    display: none;
  }

  #hamburger {
    display: flex;
  }

  .navbar-nav.mobile-open {
    display: flex;
    position: fixed;
    top: 62px;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--mode-bg2);
    border-bottom: 1px solid var(--mode-border);
    padding: 1rem;
    z-index: 799;
  }
}

@media (max-width: 600px) {
  .showcase-section {
    padding: 3rem 1rem;
  }

  #hero h1 {
    font-size: 2rem;
  }

  .products-grid {
    grid-template-columns: 1fr 1fr;
  }

  .card-grid {
    grid-template-columns: 1fr;
  }

  .playground-wrap {
    grid-template-columns: 1fr;
  }
}

/* ── 22. MICRO-ANIMATION DEMOS ────────────────── */
.anim-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
}

.anim-box {
  background: var(--mode-surface);
  border: 1px solid var(--mode-border);
  border-radius: var(--radius);
  padding: 1.25rem;
  text-align: center;
  cursor: pointer;
}

.anim-preview {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  margin: 0 auto 0.75rem;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.anim-box:hover .anim-scale {
  transform: scale(1.3);
}

.anim-box:hover .anim-rotate {
  transform: rotate(45deg);
}

.anim-box:hover .anim-bounce {
  transform: translateY(-15px);
}

.anim-box:hover .anim-skew {
  transform: skewX(20deg);
}

.anim-box:hover .anim-shadow {
  box-shadow: 0 0 30px rgba(79, 142, 247, 0.6);
}

.anim-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--mode-txt2);
}

/* ── 23. UTILITY CLASSES ──────────────────────── */
.mt-1 {
  margin-top: 0.5rem;
}

.mt-2 {
  margin-top: 1rem;
}

.mt-3 {
  margin-top: 1.5rem;
}

.mb-1 {
  margin-bottom: 0.5rem;
}

.mb-2 {
  margin-bottom: 1rem;
}

.flex {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

@media (max-width: 640px) {
  .split {
    grid-template-columns: 1fr;
  }
}

.tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.15rem 0.6rem;
  border-radius: 6px;
}

.tag-blue {
  background: rgba(79, 142, 247, 0.15);
  color: var(--blue);
}

.tag-green {
  background: rgba(52, 211, 153, 0.15);
  color: var(--green);
}

.tag-purple {
  background: rgba(168, 85, 247, 0.15);
  color: var(--purple);
}

.tag-red {
  background: rgba(248, 113, 113, 0.15);
  color: var(--red);
}

.tag-yellow {
  background: rgba(252, 211, 77, 0.15);
  color: var(--yellow);
}

/* ── 24. HTTP METHODS GRID ────────────────────── */
.methods-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 2rem;
}

.http-m-card {
  border-radius: var(--radius);
  padding: 1.25rem 1.1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  border: 2.5px solid transparent;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s, box-shadow 0.2s;
}

.http-m-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.14);
}

.http-m-card.get {
  background: #ffe4e6;
  border-color: #fda4af;
}

.http-m-card.put {
  background: #dbeafe;
  border-color: #93c5fd;
}

.http-m-card.post {
  background: #dcfce7;
  border-color: #86efac;
}

.http-m-card.delete {
  background: #ffe4e6;
  border-color: #fda4af;
}

.http-m-card.patch {
  background: #ede9fe;
  border-color: #c4b5fd;
}

.http-m-card.head {
  background: #dcfce7;
  border-color: #86efac;
}

.http-m-card.connect {
  background: #ffe4e6;
  border-color: #fda4af;
}

.http-m-card.options {
  background: #fef9c3;
  border-color: #fde047;
}

.http-m-card.trace {
  background: #fae8ff;
  border-color: #e879f9;
}

.http-m-card .card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.http-m-card .card-title h3 {
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: #0f172a;
  margin-bottom: 0;
}

.http-m-card .emoji {
  font-size: 1.5rem;
}

.http-m-card .url-pill {
  display: inline-block;
  font-family: 'Fira Code', monospace;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  border-radius: 8px;
  width: 100%;
}

.get .url-pill,
.delete .url-pill,
.connect .url-pill {
  background: #fecdd3;
  color: #9f1239;
}

.put .url-pill {
  background: #bfdbfe;
  color: #1e40af;
}

.post .url-pill,
.head .url-pill {
  background: #bbf7d0;
  color: #14532d;
}

.patch .url-pill {
  background: #ddd6fe;
  color: #4c1d95;
}

.options .url-pill {
  background: #fef08a;
  color: #713f12;
}

.trace .url-pill {
  background: #f5d0fe;
  color: #701a75;
}

.http-m-card .label {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  width: fit-content;
  color: #fff;
}

.label.request {
  background: #1e40af;
}

.label.response {
  background: #7c3aed;
}

.get .label.response,
.delete .label.response,
.head .label.response,
.connect .label.response,
.options .label.response,
.trace .label.response {
  background: #b45309;
}

.http-m-card .code-block {
  background: #0f172a;
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  font-family: 'Fira Code', monospace;
  font-size: 0.75rem;
  line-height: 1.6;
  color: #e2e8f0;
  white-space: pre-wrap;
  overflow-x: auto;
  border: none;
}

.http-m-card .s200 {
  color: #4ade80;
}

.http-m-card .s201 {
  color: #34d399;
}

.http-m-card .s204 {
  color: #f87171;
  font-weight: 700;
}

.http-m-card .description {
  margin-top: auto;
  padding-top: 0.6rem;
  border-top: 1.5px dashed rgba(0, 0, 0, 0.12);
  font-size: 0.82rem;
  color: #334155;
  text-align: center;
  line-height: 1.5;
}

.http-m-card .hl {
  color: #dc2626;
  font-weight: 700;
}

.http-m-card .hlg {
  color: #16a34a;
  font-weight: 700;
}

.http-m-card .hlp {
  color: #7c3aed;
  font-weight: 700;
}

@media (max-width: 900px) {
  .methods-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .methods-grid {
    grid-template-columns: 1fr;
  }
}

/* ── 20. PEDAGOGICAL BLOCKS ───────────────────── */
.exercise-card {
  background: rgba(30, 41, 59, 0.4);
  border: 1px solid var(--mode-border);
  padding: 1.75rem;
  margin: 2rem 0;
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}

body.light .exercise-card {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.exercise-card::before {
  content: "🔥 Desafio Hands-on";
  position: absolute;
  top: 0;
  right: 0;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  color: white;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.35rem 0.85rem;
  border-bottom-left-radius: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  z-index: 2;
}

.exercise-card h3 {
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 1rem;
  color: var(--mode-txt);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.exercise-card ul,
.exercise-card ol {
  margin-left: 1.25rem;
  color: var(--mode-txt2);
  font-size: 0.875rem;
  line-height: 1.7;
}

.exercise-card li {
  margin-bottom: 0.6rem;
}

/* ── 21. PERFORMANCE & AUDIT ─────────────────── */
.audit-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
}

.audit-item {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: rgba(52, 211, 153, 0.08);
  border: 1px solid rgba(52, 211, 153, 0.2);
  padding: 1rem 1.25rem;
  border-radius: var(--rad-sm);
  transition: transform 0.2s;
}

.audit-item:hover {
  transform: translateX(5px);
}

.audit-score {
  width: 44px;
  height: 44px;
  border: 3px solid var(--green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 0.9rem;
  color: var(--green);
  flex-shrink: 0;
  background: rgba(52, 211, 153, 0.1);
}

.audit-info strong {
  display: block;
  font-size: 0.9rem;
  color: var(--mode-txt);
  margin-bottom: 0.2rem;
}

.audit-info p {
  font-size: 0.8rem;
  color: var(--mode-txt2);
  line-height: 1.5;
}

/* ── 22. WEB APIS EXPLORER ───────────────────── */
.api-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}

.api-card {
  background: var(--mode-surface);
  border: 1px solid var(--mode-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  transition: all 0.3s ease;
}

.api-card:hover {
  border-color: var(--blue);
  background: rgba(79, 142, 247, 0.05);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.api-icon {
  font-size: 2rem;
  margin-bottom: 0.2rem;
}

.api-card h3 {
  font-size: 1rem;
  font-weight: 700;
}

.api-card p {
  font-size: 0.8rem;
  color: var(--mode-txt2);
  line-height: 1.5;
  flex-grow: 1;
}

.api-action {
  margin-top: 0.5rem;
}

.api-result {
  font-size: 0.75rem;
  font-family: 'Fira Code', monospace;
  color: var(--blue);
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  margin-top: 0.5rem;
  min-height: 2.2rem;
  display: flex;
  align-items: center;
  word-break: break-all;
}

/* Battery Bar */
.battery-container {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 100px;
  margin-top: 0.5rem;
  overflow: hidden;
}

.battery-fill {
  height: 100%;
  background: var(--green);
  width: 0%;
  transition: width 0.5s ease;
}

/* ── 23. GAME AREA ────────────────────────────── */
.game-container {
  background: var(--mode-surface);
  border: 1px solid var(--mode-border);
  border-radius: var(--radius);
  padding: 2rem;
  max-width: 480px;
  margin-top: 1rem;
}

.game-stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: 2rem;
  text-align: center;
}

.stat-box .val {
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--blue);
  display: block;
  line-height: 1;
}

.stat-box .lbl {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mode-txt2);
  font-weight: 700;
}

.stat-box .val.timer {
  color: var(--red);
}

.game-controls {
  display: flex;
  gap: 1rem;
}

.btn-game {
  flex: 1;
  height: 60px;
  font-size: 1.1rem;
  font-weight: 800;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: all 0.1s;
}

.btn-start {
  background: var(--green);
  color: #fff;
  box-shadow: 0 4px 15px rgba(52, 211, 153, 0.3);
}

.btn-click {
  background: var(--red);
  color: #fff;
  box-shadow: 0 4px 15px rgba(248, 113, 113, 0.3);
}

.btn-click:active:not(:disabled) {
  transform: scale(0.95);
}

.btn-game:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  filter: grayscale(1);
}

/* ── 24. UI LAB ───────────────────────────────── */
.lab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.lab-card {
  background: var(--mode-surface);
  border: 1px solid var(--mode-border);
  border-radius: var(--radius);
  padding: 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

/* Ripple */
.ripple-btn {
  position: relative;
  overflow: hidden;
  padding: 0.8rem 2rem;
  background: var(--blue);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
}

.ripple-btn .ripple {
  position: absolute;
  background: rgba(255, 255, 255, 0.4);
  transform: translate(-50%, -50%);
  pointer-events: none;
  border-radius: 50%;
  animation: rippleEffect 0.6s linear;
}

@keyframes rippleEffect {
  from {
    width: 0;
    height: 0;
    opacity: 0.5;
  }

  to {
    width: 500px;
    height: 500px;
    opacity: 0;
  }
}

/* Loader */
.css-loader {
  width: 48px;
  height: 48px;
  border: 5px solid var(--mode-border);
  border-bottom-color: var(--blue);
  border-radius: 50%;
  display: inline-block;
  animation: rotation 1s linear infinite;
}

/* Glass */
.glass-preview {
  width: 100%;
  height: 100px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
}

/* ════════════════════════════════════════
   SELETORES CSS DEMO
════════════════════════════════════════ */
.selectors-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 1rem;
}

@media (min-width: 768px) {
  .selectors-container {
    flex-direction: row;
  }

  .selector-types {
    flex: 1;
  }

  .selector-demo-box {
    flex: 1;
  }
}

.selector-card {
  background: var(--mode-surface);
  border: 1px solid var(--mode-border);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}

.selector-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: var(--blue);
}

.selector-card h4 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
  color: var(--blue);
}

.selector-card p {
  font-size: 0.85rem;
  color: var(--mode-txt2);
  margin-bottom: 0.75rem;
}

.selector-card code {
  background: var(--mode-bg);
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  font-family: 'Fira Code', monospace;
  font-size: 0.8rem;
  color: #ff7b72;
}

.selector-demo-box {
  background: var(--mode-surface);
  border: 1px solid var(--mode-border);
  border-radius: 8px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.selector-demo-html,
.selector-demo-css {
  background: #0d1117;
  color: #e6edf3;
  padding: 1rem;
  border-radius: 6px;
  font-family: 'Fira Code', monospace;
  font-size: 0.85rem;
  line-height: 1.5;
}

.selector-demo-css .comment {
  color: #8b949e;
}

.selector-demo-css .sel-el {
  color: #ff7b72;
}

.selector-demo-css .sel-id {
  color: #79c0ff;
}

.selector-demo-css .sel-cl {
  color: #d2a8ff;
}

.selector-live-preview {
  background: #ffffff;
  color: #000000;
  padding: 1.5rem;
  border-radius: 6px;
  border: 1px dashed #ccc;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#demo-para {
  padding: 0.5rem 1rem;
  transition: all 0.3s ease;
  border-radius: 4px;
  font-family: sans-serif;
  color: #333;
}

/* ════════════════════════════════════════
   COMBINED SELECTORS
════════════════════════════════════════ */
.combined-selectors-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .combined-selectors-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.combined-card {
  background: var(--mode-surface);
  border: 1px solid var(--mode-border);
  border-radius: 8px;
  padding: 1.5rem;
  transition: all 0.3s ease;
}

.combined-card:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.combined-card h4 {
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
  color: var(--mode-txt);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.combined-card .symbol {
  background: var(--blue);
  color: white;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: bold;
}

.combined-card code {
  display: block;
  background: #0d1117;
  color: #ff7b72;
  padding: 0.75rem;
  border-radius: 6px;
  font-family: 'Fira Code', monospace;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.combined-card p {
  font-size: 0.85rem;
  color: var(--mode-txt2);
  line-height: 1.5;
}

/* Split panel generic class */
.split {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 768px) {
  .split {
    flex-direction: row;
  }

  .split>* {
    flex: 1;
  }
}

/* ════════════════════════════════════════
   RENDER FLOW DEMO
════════════════════════════════════════ */
.render-flow-container {
  background: var(--mode-surface);
  border: 1px solid var(--mode-border);
  border-radius: 8px;
  padding: 1.5rem;
}

.render-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .render-steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.render-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1rem;
  background: var(--mode-bg);
  border-radius: 8px;
  position: relative;
}

.render-step-num {
  width: 32px;
  height: 32px;
  background: var(--blue);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
}

.render-step h4 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
  color: var(--mode-txt);
}

.render-step p {
  font-size: 0.8rem;
  color: var(--mode-txt2);
}

.flow-diagram {
  background: #0d1117;
  border-radius: 8px;
  padding: 1.5rem;
  overflow-x: auto;
}

.flow-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: max-content;
}

.flow-box {
  padding: 0.5rem 1rem;
  background: #21262d;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #c9d1d9;
  font-size: 0.85rem;
  font-family: 'Fira Code', monospace;
  font-weight: 600;
}

.flow-box.accent-blue {
  border-color: #3182ce;
  color: #63b3ed;
}

.flow-box.accent-cyan {
  border-color: #00b5d8;
  color: #4fd1c5;
}

.flow-box.accent-purple {
  border-color: #805ad5;
  color: #b794f4;
}

.flow-box.accent-green {
  border-color: #38a169;
  color: #68d391;
}

.flow-arrow {
  color: #8b949e;
  font-size: 0.8rem;
}

.flow-connector {
  width: 2px;
  height: 20px;
  background: #8b949e;
  margin-left: 5rem;
}

/* ════════════════════════════════════════
   UX/UI COMPARISON
════════════════════════════════════════ */
.ui-ux-comparison {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  background: var(--mode-surface);
  border: 1px solid var(--mode-border);
  border-radius: 8px;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
}

@media (min-width: 768px) {
  .ui-ux-comparison {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
  }
}

.ui-ux-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  z-index: 2;
  min-width: 250px;
}

.ui-ux-header {
  font-size: 1.2rem;
  font-weight: 800;
  text-align: center;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--mode-border);
  margin-bottom: 0.5rem;
}

.ui.ui-ux-col .ui-ux-header {
  color: var(--blue);
  border-color: var(--blue);
}

.ux.ui-ux-col .ui-ux-header {
  color: var(--purple);
  border-color: var(--purple);
}

.ui-ux-item {
  background: var(--mode-bg);
  padding: 1rem;
  border-radius: 6px;
  transition: transform 0.3s ease;
}

.ui-ux-item:hover {
  transform: translateX(5px);
}

.ui-ux-item h4 {
  font-size: 0.95rem;
  margin-bottom: 0.3rem;
  color: var(--mode-txt);
}

.ui-ux-item p {
  font-size: 0.8rem;
  color: var(--mode-txt2);
}

.ui-ux-quote {
  width: 100%;
  text-align: center;
  font-style: italic;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--mode-txt);
  margin-top: 1rem;
  padding: 1rem;
  background: linear-gradient(90deg, rgba(79, 142, 247, 0.1), rgba(168, 85, 247, 0.1));
  border-radius: 8px;
  border-left: 4px solid var(--blue);
}

@media (min-width: 768px) {
  .ui-ux-quote {
    flex-basis: 100%;
    margin-top: 2rem;
    border-left: none;
    border-top: 4px solid var(--blue);
  }
}

/* ════════════════════════════════════════
   MICRO-ANIMATIONS
════════════════════════════════════════ */
.anim-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
}

.anim-box {
  background: var(--mode-surface);
  border: 1px solid var(--mode-border);
  border-radius: 8px;
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  cursor: pointer;
  transition: border-color 0.3s ease;
}

.anim-box:hover {
  border-color: var(--blue);
}

.anim-preview {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  border-radius: 8px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.anim-box:hover .anim-scale {
  transform: scale(1.3);
}

.anim-box:hover .anim-rotate {
  transform: rotate(45deg);
}

.anim-box:hover .anim-bounce {
  transform: translateY(-15px);
}

.anim-box:hover .anim-skew {
  transform: skewX(20deg);
}

.anim-box:hover .anim-shadow {
  box-shadow: 0 0 20px var(--blue);
}

.anim-label {
  font-size: 0.75rem;
  font-family: 'Fira Code', monospace;
  color: var(--mode-txt2);
  text-align: center;
}

.keyframe-demo {
  width: 100%;
  padding: 2rem;
  text-align: center;
  color: white;
  font-weight: 800;
  border-radius: 8px;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradientBG 10s ease infinite;
}

@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* ── 26. A11Y GUIDE ───────────────────────────── */
.a11y-category-btn {
  padding: 0.5rem 1rem;
  background: var(--mode-surface);
  border: 1px solid var(--mode-border);
  border-radius: 8px;
  color: var(--mode-txt2);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.a11y-category-btn.active {
  background: var(--blue);
  color: white;
  border-color: var(--blue);
  box-shadow: 0 4px 12px rgba(79, 142, 247, 0.3);
}

.a11y-guide-card {
  background: var(--mode-surface);
  border: 1px solid var(--mode-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  margin-top: 1rem;
}

.a11y-guide-header {
  padding: 1rem 1.5rem;
  background: rgba(79, 142, 247, 0.05);
  border-bottom: 1px solid var(--mode-border);
}

.a11y-table {
  width: 100%;
  border-collapse: collapse;
}

.a11y-table th,
.a11y-table td {
  padding: 1rem 1.5rem;
  text-align: left;
  border-bottom: 1px solid var(--mode-border);
  font-size: 0.88rem;
}

.a11y-table th {
  background: var(--mode-bg2);
  color: var(--mode-txt);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

.a11y-table td.do {
  color: var(--green);
  border-left: 4px solid var(--green);
}

.a11y-table td.dont {
  color: var(--red);
  border-left: 4px solid var(--red);
}

/* ── 27. SEO METRICS ──────────────────────────── */
.seo-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.metric-card {
  background: var(--mode-surface);
  border: 1px solid var(--mode-border);
  border-radius: 12px;
  padding: 1.5rem;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.metric-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.metric-header h4 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--mode-txt);
}

.metric-status {
  font-size: 0.65rem;
  text-transform: uppercase;
  font-weight: 800;
  padding: 0.2rem 0.6rem;
  border-radius: 100px;
}

.metric-value {
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1;
  font-family: 'Fira Code', monospace;
}

.metric-desc {
  font-size: 0.8rem;
  color: var(--mode-txt2);
  min-height: 2.5rem;
}

.metric-slider {
  width: 100%;
  height: 6px;
  -webkit-appearance: none;
  background: var(--mode-bg2);
  border-radius: 100px;
  outline: none;
}

.metric-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  background: var(--blue);
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid var(--mode-surface);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

/* Status Colors */
.metric-card.good .metric-value {
  color: var(--green);
}

.metric-card.good .metric-status {
  background: rgba(52, 211, 153, 0.1);
  color: var(--green);
}

.metric-card.good .metric-slider::-webkit-slider-thumb {
  background: var(--green);
}

.metric-card.needs-improvement .metric-value {
  color: var(--yellow);
}

.metric-card.needs-improvement .metric-status {
  background: rgba(250, 204, 21, 0.1);
  color: var(--yellow);
}

.metric-card.needs-improvement .metric-slider::-webkit-slider-thumb {
  background: var(--yellow);
}

.metric-card.poor .metric-value {
  color: var(--red);
}

.metric-card.poor .metric-status {
  background: rgba(248, 113, 113, 0.1);
  color: var(--red);
}

.metric-card.poor .metric-slider::-webkit-slider-thumb {
  background: var(--red);
}

/* --------------------------- SEGUNDO CONTEUDO ---------------------------- */

/* DNS CHAIN */
.dns-chain {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: center;
  padding: 1rem 0
}

.dns-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  padding: .75rem .85rem;
  background: var(--mode-bg2);
  border: 1.5px solid var(--mode-border);
  border-radius: var(--radius);
  min-width: 80px;
  text-align: center;
  transition: all .35s ease;
  cursor: default
}

.dns-node.active {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(79, 142, 247, .2), 0 0 20px rgba(79, 142, 247, .3);
  transform: scale(1.08)
}

.dns-node.resolved {
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(52, 211, 153, .15)
}

.dns-icon {
  font-size: 1.4rem
}

.dns-label {
  font-size: .72rem;
  font-weight: 600;
  color: var(--mode-txt);
  line-height: 1.3
}

.dns-label small {
  color: var(--mode-txt2);
  font-weight: 400;
  font-size: .65rem
}

.dns-arrow {
  font-size: 1.1rem;
  color: var(--mode-txt2);
  transition: color .3s, transform .3s;
  flex-shrink: 0
}

.dns-arrow.active {
  color: var(--blue);
  transform: scale(1.3)
}

/* IP CARDS */
.dns-ip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.5rem
}

.dns-ip-card {
  background: var(--mode-surface);
  border: 1px solid var(--mode-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  transition: transform .2s, border-color .2s
}

.dns-ip-card:hover {
  transform: translateY(-3px);
  border-color: rgba(79, 142, 247, .35)
}

.dns-ip-badge {
  display: inline-block;
  font-size: .72rem;
  font-weight: 800;
  padding: .2rem .75rem;
  border-radius: 100px;
  margin-bottom: .75rem
}

.dns-ip-card h4 {
  font-size: .95rem;
  font-weight: 700;
  margin-bottom: .5rem;
  color: var(--mode-txt)
}

.dns-ip-card p {
  font-size: .82rem;
  color: var(--mode-txt2);
  line-height: 1.6;
  margin-bottom: .75rem
}

.dns-ip-example {
  display: block;
  font-family: 'Fira Code', monospace;
  font-size: 1.1rem;
  color: var(--cyan);
  font-weight: 700;
  margin-bottom: .75rem;
  letter-spacing: .05em
}

.dns-ip-bits {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  font-family: 'Fira Code', monospace;
  font-size: .68rem;
  color: var(--mode-txt2);
  background: rgba(0, 0, 0, .2);
  padding: .5rem;
  border-radius: 6px
}

.dns-ip-bits span {
  color: var(--blue)
}

/* TCP/UDP */
.tcp-udp-table {
  border: 1px solid var(--mode-border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1.5rem
}

.tcp-udp-header {
  display: grid;
  grid-template-columns: 110px 1fr 1fr;
  background: var(--mode-bg2);
  padding: .75rem 1rem;
  font-size: .85rem;
  font-weight: 700;
  gap: .75rem;
  border-bottom: 1px solid var(--mode-border)
}

.tcp-udp-row {
  display: grid;
  grid-template-columns: 110px 1fr 1fr;
  padding: .75rem 1rem;
  gap: .75rem;
  font-size: .82rem;
  border-bottom: 1px solid var(--mode-border);
  transition: background .2s
}

.tcp-udp-row:last-child {
  border-bottom: none
}

.tcp-udp-row:hover {
  background: var(--mode-surface)
}

.tcp-udp-label {
  font-weight: 700;
  color: var(--mode-txt2);
  font-size: .78rem;
  display: flex;
  align-items: center
}

.tcp-udp-val {
  color: var(--mode-txt);
  line-height: 1.5
}

.tcp-udp-val.tcp {
  color: var(--blue)
}

.tcp-udp-val.udp {
  color: var(--yellow)
}

/* PACKETS */
.packet-diagram {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  padding: 1rem 0
}

.packet-source,
.packet-dest {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  text-align: center
}

.packet-middle {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  flex: 1;
  min-width: 200px
}

.packet-route {
  display: flex;
  align-items: center;
  gap: .5rem
}

.packet-box {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  animation: packetPulse 2s ease-in-out infinite
}

@keyframes packetPulse {

  0%,
  100% {
    transform: scale(1)
  }

  50% {
    transform: scale(1.1);
    box-shadow: 0 0 12px rgba(79, 142, 247, .5)
  }
}

.packet-path {
  font-family: 'Fira Code', monospace;
  font-size: .72rem;
  color: var(--mode-txt2);
  animation: packetMove 3s ease-in-out infinite
}

@keyframes packetMove {
  0% {
    opacity: .4
  }

  50% {
    opacity: 1;
    color: var(--cyan)
  }

  100% {
    opacity: .4
  }
}

/* GOV HIERARCHY */
.gov-hierarchy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-bottom: 1.5rem
}

.gov-node {
  background: var(--mode-surface);
  border: 1.5px solid var(--mode-border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  text-align: center;
  transition: transform .2s, border-color .2s;
  max-width: 520px;
  width: 100%
}

.gov-node:hover {
  transform: translateY(-3px)
}

.gov-cgi {
  border-color: rgba(79, 142, 247, .4)
}

.gov-nic {
  border-color: rgba(168, 85, 247, .4)
}

.gov-reg {
  border-color: rgba(52, 211, 153, .4)
}

.gov-icon {
  font-size: 1.8rem;
  margin-bottom: .5rem
}

.gov-node h4 {
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: .5rem;
  color: var(--mode-txt)
}

.gov-node p {
  font-size: .82rem;
  color: var(--mode-txt2);
  line-height: 1.6
}

.gov-connector {
  width: 2px;
  height: 32px;
  background: linear-gradient(180deg, var(--blue), var(--purple));
  margin: 0 auto
}

.gov-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  width: 100%;
  max-width: 680px
}

/* DOMAINS */
.domain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem
}

.domain-card {
  background: var(--mode-surface);
  border: 1px solid var(--mode-border);
  border-radius: var(--radius);
  padding: 1.1rem;
  transition: transform .2s, border-color .2s
}

.domain-card:hover {
  transform: translateY(-3px);
  border-color: rgba(79, 142, 247, .3)
}

.domain-ext {
  font-family: 'Fira Code', monospace;
  font-size: 1.2rem;
  font-weight: 800;
  display: block;
  margin-bottom: .5rem
}

.domain-card p {
  font-size: .8rem;
  color: var(--mode-txt2);
  line-height: 1.5;
  margin-bottom: .5rem
}

.domain-example {
  font-size: .72rem;
  color: var(--mode-txt2)
}

.domain-example code {
  color: var(--cyan);
  font-family: 'Fira Code', monospace
}

/* REG FLOW */
.reg-flow {
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center
}

.reg-step {
  background: var(--mode-bg2);
  border: 1px solid var(--mode-border);
  border-radius: var(--radius);
  padding: 1rem;
  flex: 1;
  min-width: 120px;
  max-width: 175px;
  text-align: center;
  transition: transform .2s, border-color .2s;
  cursor: default
}

.reg-step:hover,
.reg-step:focus {
  transform: translateY(-4px);
  border-color: var(--blue);
  outline: 2px solid rgba(79, 142, 247, .3)
}

.reg-step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  color: #fff;
  font-weight: 800;
  font-size: .85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto .5rem
}

.reg-step h4 {
  font-size: .8rem;
  font-weight: 700;
  margin-bottom: .4rem;
  color: var(--mode-txt)
}

.reg-step p {
  font-size: .73rem;
  color: var(--mode-txt2);
  line-height: 1.5
}

.reg-arrow {
  color: var(--mode-txt2);
  font-size: 1rem;
  flex-shrink: 0
}

/* ARCH DIAGRAM */
.arch-diagram {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: stretch;
  margin-bottom: 1.5rem
}

@media(max-width:768px) {
  .arch-diagram {
    grid-template-columns: 1fr
  }
}

.arch-col {
  background: var(--mode-surface);
  border: 1px solid var(--mode-border);
  border-radius: var(--radius);
  overflow: hidden
}

.arch-col-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--mode-border)
}

.arch-tech-list {
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .6rem
}

.arch-tech {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .82rem;
  color: var(--mode-txt2)
}

.arch-tech-badge {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  padding: .15rem .55rem;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 56px;
  text-align: center
}

.arch-middle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem
}

.arch-http-badge,
.arch-rest-badge {
  font-size: .7rem;
  font-weight: 800;
  padding: .3rem .7rem;
  border-radius: 100px;
  white-space: nowrap
}

.arch-http-badge {
  background: rgba(79, 142, 247, .15);
  color: var(--blue);
  border: 1px solid rgba(79, 142, 247, .3)
}

.arch-rest-badge {
  background: rgba(52, 211, 153, .15);
  color: var(--green);
  border: 1px solid rgba(52, 211, 153, .3)
}

.arch-http-arrows {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  text-align: center
}

.arch-arrow-up {
  font-size: .68rem;
  color: var(--blue);
  font-weight: 600;
  animation: arrowPulse 2s ease-in-out infinite
}

.arch-arrow-down {
  font-size: .68rem;
  color: var(--green);
  font-weight: 600;
  animation: arrowPulse 2s ease-in-out infinite 1s
}

@keyframes arrowPulse {

  0%,
  100% {
    opacity: .5
  }

  50% {
    opacity: 1
  }
}

/* AUTH FLOW */
.auth-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  max-width: 520px;
  margin: 0 auto
}

.auth-step {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: var(--mode-bg2);
  border: 1px solid var(--mode-border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  width: 100%;
  transition: border-color .2s
}

.auth-step:hover {
  border-color: var(--blue)
}

.auth-step-icon {
  font-size: 1.2rem;
  flex-shrink: 0
}

.auth-step-content {
  display: flex;
  flex-direction: column;
  gap: .35rem
}

.auth-step-content strong {
  font-size: .85rem;
  color: var(--mode-txt)
}

.auth-step-content code {
  font-family: 'Fira Code', monospace;
  font-size: .72rem;
  color: var(--cyan);
  line-height: 1.6
}

.auth-arrow {
  font-size: 1.2rem;
  color: var(--mode-txt2);
  text-align: center;
  padding: .15rem 0
}

/* MONOLITH / MICROSERVICES */
.arch-compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem
}

.arch-compare-card {
  background: var(--mode-surface);
  border: 1px solid var(--mode-border);
  border-radius: var(--radius);
  padding: 1.5rem
}

.arch-compare-card h4 {
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: .5rem
}

.arch-mono-box {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--mode-border);
  margin-bottom: 1rem
}

.arch-mono-layer {
  padding: .6rem 1rem;
  text-align: center;
  font-size: .8rem;
  font-weight: 600;
  color: var(--mode-txt)
}

.arch-micro-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .4rem;
  margin-bottom: 1rem
}

.arch-micro-svc {
  border: 1.5px solid;
  border-radius: 8px;
  padding: .4rem;
  text-align: center;
  font-size: .72rem;
  font-weight: 700;
  color: var(--mode-txt);
  background: var(--mode-bg2)
}

.arch-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  font-size: .8rem;
  color: var(--mode-txt2)
}

/* EXAM PROGRESS */
.exam-progress-bar-wrap {
  background: var(--mode-surface);
  border: 1px solid var(--mode-border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem
}

.exam-progress-track {
  height: 8px;
  background: var(--mode-bg2);
  border-radius: 100px;
  overflow: hidden
}

.exam-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--green));
  border-radius: 100px;
  transition: width .5s ease
}

/* EXAM QUIZ */
.exam-q-card {
  background: var(--mode-surface);
  border: 1px solid var(--mode-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
  transition: border-color .2s
}

.exam-q-card.answered-correct {
  border-color: var(--green);
  background: rgba(52, 211, 153, .05)
}

.exam-q-card.answered-wrong {
  border-color: var(--red);
  background: rgba(248, 113, 113, .05)
}

.exam-q-meta {
  display: flex;
  gap: .5rem;
  align-items: center;
  margin-bottom: .75rem;
  flex-wrap: wrap
}

.exam-q-num {
  font-size: .72rem;
  color: var(--mode-txt2)
}

.exam-q-cat {
  font-size: .68rem;
  font-weight: 700;
  padding: .15rem .6rem;
  border-radius: 100px;
  background: rgba(79, 142, 247, .12);
  color: var(--blue)
}

.exam-q-type-badge {
  font-size: .65rem;
  font-weight: 700;
  padding: .15rem .55rem;
  border-radius: 6px;
  background: rgba(168, 85, 247, .12);
  color: var(--purple)
}

.exam-q-text {
  font-size: .92rem;
  font-weight: 600;
  color: var(--mode-txt);
  margin-bottom: 1rem;
  line-height: 1.6
}

.exam-opts {
  display: flex;
  flex-direction: column;
  gap: .5rem
}

.exam-opt-btn {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem 1rem;
  background: var(--mode-bg2);
  border: 1.5px solid var(--mode-border);
  border-radius: var(--rad-sm);
  cursor: pointer;
  font-family: inherit;
  font-size: .85rem;
  color: var(--mode-txt);
  text-align: left;
  transition: all .15s;
  width: 100%
}

.exam-opt-btn:hover:not(:disabled) {
  border-color: var(--blue);
  background: rgba(79, 142, 247, .08)
}

.exam-opt-btn.selected {
  border-color: var(--blue);
  background: rgba(79, 142, 247, .12)
}

.exam-opt-btn.correct {
  border-color: var(--green) !important;
  background: rgba(52, 211, 153, .1) !important;
  color: var(--green)
}

.exam-opt-btn.wrong {
  border-color: var(--red) !important;
  background: rgba(248, 113, 113, .1) !important;
  color: var(--red)
}

.exam-opt-btn:disabled {
  cursor: default
}

.exam-opt-letter {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--mode-surface);
  border: 1px solid var(--mode-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 700;
  flex-shrink: 0
}

.exam-feedback {
  margin-top: .75rem;
  font-size: .82rem;
  padding: .6rem .9rem;
  border-radius: var(--rad-sm);
  line-height: 1.5
}

.exam-feedback.ok {
  background: rgba(52, 211, 153, .1);
  color: var(--green);
  border: 1px solid rgba(52, 211, 153, .25)
}

.exam-feedback.err {
  background: rgba(248, 113, 113, .1);
  color: var(--red);
  border: 1px solid rgba(248, 113, 113, .25)
}

/* FLASHCARD */
.flashcard-wrap {
  perspective: 1200px;
  max-width: 540px;
  margin: 0 auto
}

.flashcard {
  position: relative;
  width: 100%;
  height: 240px;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.4, 0, .2, 1);
  cursor: pointer;
  border-radius: var(--radius)
}

.flashcard.flipped {
  transform: rotateY(180deg)
}

.flashcard-front,
.flashcard-back {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  border: 1px solid var(--mode-border)
}

.flashcard-front {
  background: var(--mode-surface)
}

.flashcard-back {
  background: linear-gradient(135deg, rgba(79, 142, 247, .15), rgba(168, 85, 247, .1));
  border-color: rgba(79, 142, 247, .3);
  transform: rotateY(180deg)
}

.flashcard-category {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--blue);
  background: rgba(79, 142, 247, .1);
  padding: .2rem .7rem;
  border-radius: 100px;
  margin-bottom: .75rem
}

.flashcard-front p {
  font-size: .95rem;
  font-weight: 600;
  color: var(--mode-txt);
  line-height: 1.6;
  margin-bottom: .75rem
}

.flashcard-back p {
  font-size: .9rem;
  color: var(--mode-txt);
  line-height: 1.6
}

/* LIVE EDITOR */
.editor-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  height: 480px
}

@media(max-width:768px) {
  .editor-layout {
    grid-template-columns: 1fr;
    height: auto
  }

  .editor-layout .editor-pane {
    height: 320px
  }
}

.editor-pane {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  border: 1px solid var(--mode-border);
  overflow: hidden
}

.editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .6rem 1rem;
  background: var(--mode-bg2);
  border-bottom: 1px solid var(--mode-border);
  font-size: .8rem;
  font-weight: 600;
  color: var(--mode-txt2);
  flex-shrink: 0
}

.editor-run-btn {
  padding: .3rem .85rem;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  color: #fff;
  border: none;
  border-radius: var(--rad-sm);
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: opacity .2s
}

.editor-run-btn:hover {
  opacity: .85
}

.code-textarea {
  flex: 1;
  width: 100%;
  background: #0d1117;
  color: #e6edf3;
  font-family: 'Fira Code', monospace;
  font-size: .82rem;
  line-height: 1.7;
  border: none;
  outline: none;
  padding: 1rem;
  resize: none;
  tab-size: 2
}

.code-textarea::placeholder {
  color: #4a5568
}

body.light .code-textarea {
  background: #1e293b;
  color: #e2e8f0
}

.preview-iframe {
  flex: 1;
  width: 100%;
  border: none;
  background: #fff
}

/* CHECKLIST */
.checklist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: .6rem;
  margin-top: 1rem
}

.checklist-item {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .65rem .85rem;
  border-radius: var(--rad-sm);
  border: 1px solid var(--mode-border);
  background: var(--mode-bg2);
  font-size: .82rem;
  transition: all .2s
}

.checklist-item.pass {
  border-color: var(--green);
  background: rgba(52, 211, 153, .08)
}

.checklist-item.fail {
  border-color: var(--red);
  background: rgba(248, 113, 113, .05)
}

.checklist-item-icon {
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: .05rem
}

.checklist-item-text {
  color: var(--mode-txt);
  line-height: 1.4
}

/* HINTS */
.hint-item {
  border: 1px solid var(--mode-border);
  border-radius: var(--rad-sm);
  margin-bottom: .5rem;
  overflow: hidden
}

.hint-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  background: var(--mode-bg2);
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: .83rem;
  font-weight: 600;
  color: var(--mode-txt);
  text-align: left;
  transition: background .2s
}

.hint-toggle:hover {
  background: var(--mode-surface)
}

.hint-toggle .hint-chevron {
  transition: transform .3s;
  font-size: .7rem
}

.hint-toggle.open .hint-chevron {
  transform: rotate(180deg)
}

.hint-body {
  display: none;
  padding: .75rem 1rem;
  font-size: .82rem;
  color: var(--mode-txt2);
  line-height: 1.6;
  border-top: 1px solid var(--mode-border);
  background: var(--mode-surface)
}

.hint-body.open {
  display: block
}

.hint-body code {
  color: var(--cyan);
  font-family: 'Fira Code', monospace;
  font-size: .8rem
}

/* ═══════════════════════════════════════════════════════
   ── 28. MÓDULO 2 SPECIFIC STYLES ─────────────────────
═══════════════════════════════════════════════════════ */

.modulo2-page .grad {
  background: linear-gradient(135deg, var(--blue), var(--purple), var(--pink));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


.modulo2-page .hero-cta {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.modulo2-page .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius);
  font-weight: 700;
  text-decoration: none;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s;
  border: none;
  gap: 0.5rem;
}

.modulo2-page .btn-primary {
  background: var(--blue);
  color: #fff;
}

.modulo2-page .btn-primary:hover {
  background: #3b7ee3;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(79, 142, 247, 0.25);
}

.modulo2-page .btn-outline {
  background: transparent;
  border: 1px solid var(--mode-border);
  color: var(--mode-txt);
}

.modulo2-page .btn-outline:hover {
  background: var(--mode-surface);
  transform: translateY(-2px);
}

.modulo2-page main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem 5rem;
}

.modulo2-page .showcase-section {
  padding: 5rem 0;
  border-top: 1px solid var(--mode-border);
  scroll-margin-top: 80px;
}

.modulo2-page .section-inner {
  max-width: 1000px;
  margin: 0 auto;
}

.modulo2-page .section-label {
  color: var(--purple);
  font-weight: 800;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}

.modulo2-page .section-title {
  font-size: 2.2rem;
  font-weight: 800;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}

.modulo2-page .section-desc {
  color: var(--mode-txt2);
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 3rem;
}

.modulo2-page .card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.modulo2-page .card {
  background: var(--mode-bg2);
  border: 1px solid var(--mode-border);
  border-radius: var(--radius);
  padding: 2rem;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.modulo2-page .card:hover {
  transform: translateY(-4px);
  border-color: rgba(79, 142, 247, 0.3);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
}

.modulo2-page .card-icon {
  font-size: 2rem;
  margin-bottom: 1.25rem;
  display: inline-block;
}

.modulo2-page .card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.modulo2-page .card p {
  color: var(--mode-txt2);
  font-size: 0.9rem;
  line-height: 1.6;
}

.modulo2-page .demo-panel {
  background: var(--mode-bg2);
  border: 1px solid var(--mode-border);
  border-radius: var(--radius);
  padding: 2rem;
  margin-top: 2rem;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.modulo2-page .panel-title {
  font-weight: 800;
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.modulo2-page .code-block {
  background: #090e1a;
  border-radius: var(--rad-sm);
  padding: 1.25rem;
  font-family: 'Fira Code', monospace;
  font-size: 0.85rem;
  overflow-x: auto;
  margin: 1.5rem 0;
  color: #b4c6e7;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.modulo2-page .code-block .kw {
  color: #f472b6;
}

/* Keyword */
.modulo2-page .code-block .fn {
  color: #4f8ef7;
}

/* Function */
.modulo2-page .code-block .st {
  color: #34d399;
}

/* String */
.modulo2-page .code-block .cm {
  color: #4a5568;
}

/* Comment */
.modulo2-page .code-block .vl {
  color: #fcd34d;
}

/* Value */
/* 1. CLIENT-SERVER GRAPHIC ANIMATIONS */
.modulo2-page .arch-diagram {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--mode-surface);
  border: 1px solid var(--mode-border);
  border-radius: var(--radius);
  padding: 3rem 2rem;
  position: relative;
  overflow: hidden;
  margin-bottom: 2rem;
}

.modulo2-page .arch-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  z-index: 10;
  width: 140px;
  text-align: center;
}

.modulo2-page .node-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--mode-bg2);
  border: 2px solid var(--mode-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  transition: all 0.3s;
}

.modulo2-page .arch-node.active .node-icon {
  border-color: var(--blue);
  box-shadow: 0 0 25px rgba(79, 142, 247, 0.4);
  transform: scale(1.1);
}

.modulo2-page .node-title {
  font-weight: 700;
  font-size: 0.85rem;
}

.modulo2-page .node-sub {
  font-size: 0.7rem;
  color: var(--mode-txt2);
}

.modulo2-page .arch-path {
  flex-grow: 1;
  height: 4px;
  background: var(--mode-border);
  position: relative;
  transform: translateY(-24px);
  margin: 0 0.5rem;
}

.modulo2-page .arch-packet {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--blue);
  border-radius: 50%;
  top: -4px;
  left: 0%;
  box-shadow: 0 0 10px var(--blue);
  display: none;
}

@media (max-width: 768px) {
  .modulo2-page .arch-diagram {
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem 1rem;
  }
  .modulo2-page .arch-path {
    display: none;
  }
}

.modulo2-page .arch-controls {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.modulo2-page .sim-console {
  background: #090e1a;
  border: 1px solid var(--mode-border);
  border-radius: var(--rad-sm);
  font-family: 'Fira Code', monospace;
  padding: 1.25rem;
  color: #34d399;
  font-size: 0.85rem;
  margin-top: 1.5rem;
  min-height: 120px;
  max-height: 200px;
  overflow-y: auto;
}

/* 2. HTTP EXPLORER */
.modulo2-page .status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.modulo2-page .status-btn {
  padding: 0.85rem;
  border-radius: var(--rad-sm);
  border: 1px solid var(--mode-border);
  background: var(--mode-bg2);
  color: var(--mode-txt);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s;
  text-align: center;
}

.modulo2-page .status-btn:hover {
  transform: translateY(-2px);
}

.modulo2-page .status-btn.s2xx {
  border-left: 4px solid var(--green);
}

.modulo2-page .status-btn.s3xx {
  border-left: 4px solid var(--blue);
}

.modulo2-page .status-btn.s4xx {
  border-left: 4px solid var(--yellow);
}

.modulo2-page .status-btn.s5xx {
  border-left: 4px solid var(--red);
}

.modulo2-page .status-btn.active {
  background: var(--mode-surface);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.modulo2-page .status-details {
  background: var(--mode-surface);
  border: 1px solid var(--mode-border);
  border-radius: var(--rad-sm);
  padding: 1.5rem;
  display: none;
}

.modulo2-page .status-details.active {
  display: block;
  animation: fadeIn 0.4s ease-out;
}

.modulo2-page .status-details.active {
  display: block;
}

.modulo2-page .status-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.modulo2-page .badge-2xx {
  background: rgba(52, 211, 153, 0.15);
  color: var(--green);
}

.modulo2-page .badge-3xx {
  background: rgba(79, 142, 247, 0.15);
  color: var(--blue);
}

.modulo2-page .badge-4xx {
  background: rgba(252, 211, 77, 0.15);
  color: var(--yellow);
}

.modulo2-page .badge-5xx {
  background: rgba(248, 113, 113, 0.15);
  color: var(--red);
}

/* 3. HTTP METHODS SIMULATOR */
.modulo2-page .rest-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 1.5rem;
}

.modulo2-page .method-menu {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.modulo2-page .method-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.25rem;
  border-radius: var(--rad-sm);
  border: 1px solid var(--mode-border);
  background: var(--mode-bg2);
  color: var(--mode-txt);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s;
  text-align: left;
}

.modulo2-page .method-btn:hover,
.modulo2-page .method-btn.active {
  background: var(--mode-surface);
  transform: translateX(4px);
}

.modulo2-page .m-badge {
  font-size: 0.7rem;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  color: #fff;
  font-weight: 800;
}

.modulo2-page .m-get {
  background: var(--green);
}

.modulo2-page .m-post {
  background: var(--blue);
}

.modulo2-page .m-put {
  background: var(--purple);
}

.modulo2-page .m-patch {
  background: var(--yellow);
  color: #000;
}

.modulo2-page .m-delete {
  background: var(--red);
}

.modulo2-page .rest-workspace {
  background: var(--mode-surface);
  border: 1px solid var(--mode-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.modulo2-page .url-bar {
  display: flex;
  background: var(--mode-bg2);
  border: 1px solid var(--mode-border);
  border-radius: var(--rad-sm);
  overflow: hidden;
}

.modulo2-page .url-method {
  padding: 0.6rem 1rem;
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
}

.modulo2-page .url-input {
  background: transparent;
  border: none;
  padding: 0.6rem 1rem;
  color: var(--mode-txt);
  font-family: 'Fira Code', monospace;
  font-size: 0.85rem;
  flex-grow: 1;
  outline: none;
}

.modulo2-page .payload-editor {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.modulo2-page .payload-textarea {
  width: 100%;
  height: 100px;
  background: #090e1a;
  border: 1px solid var(--mode-border);
  border-radius: var(--rad-sm);
  padding: 0.75rem;
  color: #b4c6e7;
  font-family: 'Fira Code', monospace;
  font-size: 0.8rem;
  resize: none;
  outline: none;
}

.modulo2-page .db-viewer {
  border-top: 1px dashed var(--mode-border);
  padding-top: 1rem;
}

.modulo2-page .db-title {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--mode-txt2);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.modulo2-page .db-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.modulo2-page .db-item {
  background: var(--mode-bg2);
  border: 1px solid var(--mode-border);
  border-radius: var(--rad-sm);
  padding: 0.4rem 0.8rem;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* 4. DOM PLAYGROUND */
.modulo2-page .dom-playground {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.modulo2-page .dom-target-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mode-surface);
  border: 1px solid var(--mode-border);
  border-radius: var(--radius);
  padding: 2rem;
  position: relative;
}

.modulo2-page #dom-target {
  padding: 1.5rem;
  background: var(--mode-bg2);
  border: 1px solid var(--mode-border);
  border-radius: var(--rad-sm);
  text-align: center;
  transition: all 0.3s ease;
  width: 100%;
  max-width: 300px;
}

.modulo2-page #dom-target.premium {
  background: linear-gradient(135deg, rgba(79, 142, 247, 0.1), rgba(168, 85, 247, 0.1));
  border-color: var(--purple);
  box-shadow: 0 10px 25px rgba(168, 85, 247, 0.2);
  transform: scale(1.05);
}

.modulo2-page #dom-target.highlight {
  border-color: var(--cyan);
  box-shadow: 0 0 15px var(--cyan);
}

.modulo2-page .dom-controls {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.modulo2-page .form-input {
  width: 100%;
  padding: 0.6rem 0.85rem;
  background: var(--mode-bg2);
  border: 1px solid var(--mode-border);
  border-radius: var(--rad-sm);
  color: var(--mode-txt);
  outline: none;
  font-family: inherit;
  font-size: 0.9rem;
  transition: all 0.3s;
}

.modulo2-page .form-input:focus {
  border-color: var(--blue);
}

/* 5. EVENTS VISUALIZER */
.modulo2-page .events-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.modulo2-page .event-triggers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.modulo2-page .event-trigger-box {
  background: var(--mode-bg2);
  border: 1px solid var(--mode-border);
  border-radius: var(--rad-sm);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  min-height: 100px;
}

.modulo2-page .event-trigger-box:hover {
  background: var(--mode-surface);
  border-color: var(--blue);
}

/* 6. FORM VALIDATION */
.modulo2-page .validation-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.modulo2-page .val-form-panel {
  background: var(--mode-surface);
  border: 1px solid var(--mode-border);
  border-radius: var(--radius);
  padding: 2rem;
}

.modulo2-page .val-comparison {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.modulo2-page .val-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.modulo2-page .val-badge.good {
  background: rgba(52, 211, 153, 0.15);
  color: var(--green);
}

.modulo2-page .val-badge.bad {
  background: rgba(248, 113, 113, 0.15);
  color: var(--red);
}

/* 7. JSON VISUALIZER */
.modulo2-page .json-editor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.modulo2-page .json-tree {
  background: #090e1a;
  border: 1px solid var(--mode-border);
  border-radius: var(--rad-sm);
  padding: 1.25rem;
  font-family: 'Fira Code', monospace;
  font-size: 0.85rem;
  color: #b4c6e7;
  overflow-y: auto;
  max-height: 250px;
}

.modulo2-page .json-key {
  color: #f472b6;
}

.modulo2-page .json-value-string {
  color: #34d399;
}

.modulo2-page .json-value-number {
  color: #fcd34d;
}

.modulo2-page .json-value-boolean {
  color: #4f8ef7;
}

/* 10. HTTP VS HTTPS INTERACTIVE BATTLE */
.modulo2-page .battle-track {
  background: var(--mode-bg2);
  border: 1px solid var(--mode-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1rem;
  position: relative;
  overflow: hidden;
}

.modulo2-page .battle-line {
  height: 4px;
  background: var(--mode-border);
  margin: 1.5rem 0;
  position: relative;
}

.modulo2-page .battle-packet {
  position: absolute;
  padding: 0.3rem 0.6rem;
  background: var(--blue);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  border-radius: 4px;
  top: -12px;
  left: 0%;
  transform: translateX(-50%);
  box-shadow: 0 0 10px rgba(79, 142, 247, 0.5);
}

.modulo2-page .battle-hacker {
  position: absolute;
  left: 50%;
  top: -24px;
  font-size: 1.5rem;
  transform: translateX(-50%);
  background: var(--mode-bg2);
  padding: 0 0.5rem;
  z-index: 5;
}

.modulo2-page .battle-intercept {
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid var(--red);
  border-radius: var(--rad-sm);
  padding: 0.75rem;
  font-family: 'Fira Code', monospace;
  font-size: 0.85rem;
  color: var(--red);
  margin-top: 1rem;
  display: none;
}

/* 11. ROLE SIMULATOR */
.modulo2-page .role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.modulo2-page .role-card {
  background: var(--mode-bg2);
  border: 1px solid var(--mode-border);
  border-radius: var(--rad-sm);
  padding: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.3s;
}

.modulo2-page .role-status-icon {
  font-size: 1.2rem;
}

.modulo2-page .role-card.allowed {
  border-color: var(--green);
  background: rgba(52, 211, 153, 0.03);
}

.modulo2-page .role-card.denied {
  border-color: var(--red);
  background: rgba(248, 113, 113, 0.03);
  opacity: 0.6;
}

/* 12. STORAGE MATRIX */
.modulo2-page .storage-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

.modulo2-page .storage-table th,
.modulo2-page .storage-table td {
  border: 1px solid var(--mode-border);
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.85rem;
}

.modulo2-page .storage-table th {
  background: var(--mode-surface);
  font-weight: 800;
}

/* 14. EXAM PREP WIDGETS */
.modulo2-page .quiz-container {
  background: var(--mode-bg2);
  border: 1px solid var(--mode-border);
  border-radius: var(--radius);
  padding: 2.5rem;
  position: relative;
}

.modulo2-page .quiz-progress {
  height: 4px;
  background: var(--mode-border);
  border-radius: 2px;
  margin-bottom: 2rem;
  overflow: hidden;
}

.modulo2-page .quiz-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--purple));
  width: 0%;
  transition: width 0.3s;
}

.modulo2-page .quiz-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
}

.modulo2-page .quiz-opt-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1.5rem 0;
}

.modulo2-page .quiz-opt {
  background: var(--mode-surface);
  border: 1px solid var(--mode-border);
  border-radius: var(--rad-sm);
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  transition: all 0.3s;
  font-weight: 500;
}

.modulo2-page .quiz-opt:hover {
  border-color: var(--blue);
  background: rgba(79, 142, 247, 0.02);
}

.modulo2-page .quiz-opt.selected {
  border-color: var(--purple);
  background: rgba(168, 85, 247, 0.05);
}

.modulo2-page .quiz-opt.correct {
  border-color: var(--green);
  background: rgba(52, 211, 153, 0.08);
}

.modulo2-page .quiz-opt.wrong {
  border-color: var(--red);
  background: rgba(248, 113, 113, 0.08);
}

.modulo2-page .quiz-feedback {
  padding: 1rem;
  border-radius: var(--rad-sm);
  margin-top: 1.5rem;
  display: none;
  font-size: 0.9rem;
  line-height: 1.5;
}

.modulo2-page .quiz-feedback.show {
  display: block;
  animation: fadeIn 0.3s ease-out;
}

.modulo2-page .quiz-feedback.correct {
  background: rgba(52, 211, 153, 0.1);
  border-left: 4px solid var(--green);
  color: var(--mode-txt);
}

.modulo2-page .quiz-feedback.wrong {
  background: rgba(248, 113, 113, 0.1);
  border-left: 4px solid var(--red);
  color: var(--mode-txt);
}

/* 15. CODING SANDBOX LABS */
.modulo2-page .sandbox-tabs {
  display: flex;
  gap: 0.5rem;
  border-bottom: 1px solid var(--mode-border);
  margin-bottom: 1.5rem;
}

.modulo2-page .sandbox-tab-btn {
  padding: 0.6rem 1.25rem;
  border: none;
  background: transparent;
  color: var(--mode-txt2);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  position: relative;
  bottom: -1px;
  border-bottom: 2px solid transparent;
  transition: all 0.3s;
}

.modulo2-page .sandbox-tab-btn.active,
.modulo2-page .sandbox-tab-btn:hover {
  color: var(--mode-txt);
  border-bottom-color: var(--blue);
}

.modulo2-page .sandbox-tab-panel {
  display: none;
}

.modulo2-page .sandbox-tab-panel.active {
  display: block;
  animation: fadeIn 0.4s ease-out;
}

@keyframes sendRequest {
  0% {
    left: 0%;
  }
  100% {
    left: 100%;
  }
}

/* ════════════════════════════════════════
   MÓDULO 2 — NOVAS SEÇÕES COMPLEMENTARES
════════════════════════════════════════ */

/* Timeline Stepper (História do JS) */
.modulo2-page .history-stepper {
  background: var(--mode-surface);
  border: 1px solid var(--mode-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-top: 1.5rem;
}

.modulo2-page .stepper-header {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  border-bottom: 2px solid var(--mode-border);
  padding-bottom: 0.75rem;
  margin-bottom: 1.5rem;
}

.modulo2-page .step-tab {
  padding: 0.6rem 1.2rem;
  background: transparent;
  color: var(--mode-txt2);
  border: none;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
  border-radius: var(--rad-sm);
  transition: all 0.3s ease;
}

.modulo2-page .step-tab.active,
.modulo2-page .step-tab:hover {
  background: rgba(79, 142, 247, 0.08);
  color: var(--blue);
}

.modulo2-page .stepper-content {
  animation: fadeIn 0.4s ease-out;
  min-height: 150px;
}

.modulo2-page .stepper-content h3 {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--mode-txt);
  margin-bottom: 0.5rem;
}

/* Motores JS */
.modulo2-page .engines-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.modulo2-page .engine-box {
  background: var(--mode-bg2);
  border: 1px solid var(--mode-border);
  padding: 1.25rem;
  border-radius: var(--rad-sm);
  transition: all 0.3s ease;
}

.modulo2-page .engine-box:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
}

/* Script Loading Simulator */
.modulo2-page .loading-simulation-box {
  background: var(--mode-surface);
  border: 1px solid var(--mode-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.modulo2-page .sim-timeline-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.modulo2-page .timeline-label {
  width: 140px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--mode-txt);
}

.modulo2-page .timeline-track {
  flex: 1;
  height: 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.modulo2-page .timeline-bar {
  height: 100%;
  width: 0%;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 4px;
  transition: width 0.1s linear;
}

.modulo2-page .html-bar {
  background: linear-gradient(90deg, #3182ce, #63b3ed);
}

.modulo2-page .download-bar {
  background: linear-gradient(90deg, #d69e2e, #ecc94b);
}

.modulo2-page .execution-bar {
  background: linear-gradient(90deg, #e53e3e, #fc8181);
}

/* CSSOM split view */
.modulo2-page .cssom-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .modulo2-page .cssom-split {
    grid-template-columns: 1fr 1.2fr;
  }
}

.modulo2-page .cssom-control-panel {
  background: var(--mode-surface);
  border: 1px solid var(--mode-border);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.modulo2-page .cssom-code-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Types List */
.modulo2-page .types-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.modulo2-page .type-item {
  background: var(--mode-surface);
  border: 1px solid var(--mode-border);
  padding: 0.75rem 1rem;
  border-radius: var(--rad-sm);
  font-size: 0.85rem;
  color: var(--mode-txt2);
}

.modulo2-page .type-item code {
  color: var(--blue);
  font-weight: 700;
  font-size: 0.9rem;
}

/* JWT Decoder styles */
.modulo2-page .jwt-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .modulo2-page .jwt-grid {
    grid-template-columns: 1fr 1.2fr;
  }
}

.modulo2-page .jwt-editor {
  background: var(--mode-surface);
  border: 1px solid var(--mode-border);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.modulo2-page .jwt-string-box {
  background: #0d1117;
  color: #c9d1d9;
  padding: 1.25rem;
  border-radius: var(--rad-sm);
  font-family: 'Fira Code', monospace;
  font-size: 0.85rem;
  word-break: break-all;
  line-height: 1.6;
  border: 1px solid var(--mode-border);
}

.modulo2-page .jwt-parts-display {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}

.modulo2-page .jwt-part-card {
  background: var(--mode-surface);
  border: 1px solid var(--mode-border);
  border-radius: var(--rad-sm);
  padding: 0.75rem 1rem;
}

.modulo2-page .border-red {
  border-left: 4px solid var(--red) !important;
}

.modulo2-page .border-blue {
  border-left: 4px solid var(--blue) !important;
}

.modulo2-page .border-green {
  border-left: 4px solid var(--green) !important;
}

/* MVC Simulation styles */
.modulo2-page .mvc-simulation-container {
  background: var(--mode-surface);
  border: 1px solid var(--mode-border);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
}

.modulo2-page .mvc-flowchart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0;
}

@media (min-width: 768px) {
  .modulo2-page .mvc-flowchart {
    flex-direction: row;
    justify-content: center;
    gap: 2rem;
  }
}

.modulo2-page .mvc-node {
  background: var(--mode-bg2);
  border: 2px solid var(--mode-border);
  border-radius: 12px;
  padding: 1rem 1.5rem;
  text-align: center;
  min-width: 140px;
  transition: all 0.3s ease;
  position: relative;
  z-index: 5;
}

.modulo2-page .mvc-node .node-icon {
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
}

.modulo2-page .mvc-node strong {
  display: block;
  font-size: 0.9rem;
  color: var(--mode-txt);
}

.modulo2-page .mvc-node.active-route {
  border-color: var(--blue);
  box-shadow: 0 0 15px rgba(79, 142, 247, 0.4);
  background: rgba(79, 142, 247, 0.05);
}

.modulo2-page .mvc-arrow {
  font-size: 1.5rem;
  color: var(--mode-border);
  font-weight: 700;
  transition: color 0.3s;
}

@media (max-width: 767px) {
  .modulo2-page .mvc-arrow {
    transform: rotate(90deg);
  }
}

.modulo2-page .mvc-arrow.active-flow {
  color: var(--blue);
}

.modulo2-page .mvc-arrow-vertical {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  font-size: 1rem;
  color: var(--mode-border);
  font-weight: 700;
  transition: color 0.3s;
}

@media (min-width: 768px) {
  .modulo2-page .mvc-arrow-vertical {
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
  }
}

.modulo2-page .mvc-arrow-vertical.active-flow {
  color: var(--purple);
}

.modulo2-page .mvc-arrow-vertical .arrow-up,
.modulo2-page .mvc-arrow-vertical .arrow-down {
  transition: color 0.3s;
}

.modulo2-page .mvc-arrow-vertical.active-up .arrow-up {
  color: var(--purple);
}

.modulo2-page .mvc-arrow-vertical.active-down .arrow-down {
  color: var(--purple);
}

.modulo2-page .table-wrap {
  width: 100%;
  overflow-x: auto;
  margin-top: 1rem;
}

@keyframes sendResponse {
  0% {
    left: 100%;
  }
  100% {
    left: 0%;
  }
}