/*
Theme Name: Mnemosine Portal
Theme URI: https://mnemosine.ia.br/
Author: BGR
Author URI: https://mnemosine.ia.br/
Description: Tema do portal Mnemosine — pele canônica de terminal (fundo escuro, ciano parcimonioso, Geist Mono, grid-bg + scan-line + cursor). Design system único cobrindo vitrine, forms e área do aluno; sem build step, sem plugins externos, sem CSS inline.
Version: 0.4.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mnemosine-portal
Tags: custom-menu, featured-images, translation-ready
*/

/* =========================================================================
   FONTES — auto-hospedadas (Geist / Geist Mono, OFL, vercel/geist-font).
   Arquivos variáveis: um woff2 por família cobre todos os pesos (100–900).
   url() é relativo a este style.css → assets/fonts/. Sem CDN externo:
   requisito da CSP estrita (nada de fonts.googleapis.com/gstatic.com).
   ========================================================================= */
@font-face {
  font-family: "Geist";
  src: url("assets/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("assets/fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* =========================================================================
   DESIGN TOKENS — pele terminal canônica (SEM modo claro, sempre escuro)
   ========================================================================= */
:root {
  /* Nomes canônicos da marca */
  --background: #09090b;   /* base quase-preta (zinc-950) — fundo escuro é regra */
  --foreground: #fafafa;   /* off-white */
  --accent: #06b6d4;       /* ciano — a ÚNICA cor de destaque, parcimoniosa */
  --accent-dim: #0891b2;   /* ciano escuro (hover / secundário) */
  --surface: #18181b;      /* superfície de cards/blocos (zinc-900) */
  --border: #27272a;       /* contornos (zinc-800); acendem ciano no hover */
  --muted: #a1a1aa;        /* texto secundário (zinc-400) — contraste ≈6:1 (WCAG AA) */
  --glow: 0 0 40px rgba(6, 182, 212, .15);   /* glow CONTIDO (~40px) */
  --grid: rgba(6, 182, 212, .03);            /* grid-bg MUITO sutil */
  --sans: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Nomes-alias mapeados aos MESMOS valores canônicos (outro código depende deles) */
  --bg: #09090b;
  --text: #fafafa;
  --primary: #06b6d4;
  --primary-contrast: #09090b;
  --surface-2: #27272a;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 0 40px rgba(6, 182, 212, .15);  /* = --glow */
  --maxw: 1120px;
  --font: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* =========================================================================
   RESET / BASE
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* grid-bg: o papel-milimetrado ciano em TODA a tela */
body {
  margin: 0;
  background-color: var(--background);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 56px 56px;
  color: var(--foreground);
  font-family: var(--mono);          /* MONO é o padrão — dominante */
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* scan-line: linha CRT fina de 2px descendo a tela, ciclo 8s */
.scan-line {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  pointer-events: none;
  z-index: 9999;
  background: linear-gradient(90deg, transparent, rgba(6, 182, 212, .30), transparent);
  animation: scan 8s linear infinite;
}
@keyframes scan { 0% { top: -2%; } 100% { top: 102%; } }

/* cursor: underscore ciano piscando */
.cursor { color: var(--accent); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.prompt { color: var(--accent); }
.cyan { color: var(--accent); }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dim); text-decoration: underline; }

h1, h2, h3, h4 {
  margin: 0 0 .4em;
  font-family: var(--mono);          /* títulos em mono */
  line-height: 1.18;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--foreground);
}

h1 { font-size: clamp(1.9rem, 4.6vw, 3rem); font-weight: 600; }
h2 { font-size: clamp(1.45rem, 3vw, 2rem); }
h3 { font-size: 1.18rem; }

p { margin: 0 0 1rem; }

.muted { color: var(--muted); }
.small { font-size: .875rem; }

.mono { font-family: var(--mono); }
.sans { font-family: var(--sans); }   /* a exceção rara — destaque */

::selection { background: rgba(6, 182, 212, .25); color: var(--foreground); }

/* =========================================================================
   LAYOUT — .page
   ========================================================================= */
.page {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
}

.section { padding-block: clamp(48px, 7vw, 88px); }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}
.section-head h2 { margin: 0; }

/* Kicker / eyebrow — comentário de terminal (# …) */
.eyebrow, .kicker {
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color: var(--accent);
}
.eyebrow { margin-bottom: 14px; }
.kicker { margin-bottom: 6px; display: block; }
.eyebrow::before, .kicker::before { content: "# "; color: var(--muted); }

/* =========================================================================
   TOPBAR / NAV (header)
   ========================================================================= */
.site-header { position: relative; z-index: 2; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 18px;
  border-bottom: 1px solid var(--border);
}
.topbar .brand { display: flex; flex-direction: column; gap: 3px; }

/* wordmark: > mnemosine_ */
.brand-mark {
  font-family: var(--mono);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--foreground);
  text-transform: lowercase;
}
.brand-mark .prompt { margin-right: 4px; }
.topbar .brand span { color: var(--muted); font-size: .8rem; }

.brand-link { color: inherit; }
.brand-link:hover { text-decoration: none; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--foreground);
  font-family: var(--mono);
  font-size: .85rem;
  font-weight: 500;
  transition: border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.chip:hover { text-decoration: none; border-color: var(--accent); color: var(--accent); box-shadow: var(--glow); }

.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-block: 14px;
  border-bottom: 1px solid var(--border);
}
.subnav a {
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-family: var(--mono);
  font-size: .88rem;
  font-weight: 500;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  border: 1px solid transparent;
}
.subnav a:hover { text-decoration: none; background: var(--surface); color: var(--foreground); border-color: var(--border); }
.subnav a.active {
  background: rgba(6, 182, 212, .10);
  border-color: rgba(6, 182, 212, .38);
  color: var(--accent);
}

/* =========================================================================
   BUTTONS — estilo terminal:  > label_
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(6, 182, 212, .38);
  background: rgba(6, 182, 212, .10);
  color: var(--accent);
  font-family: var(--mono);
  font-size: .95rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.btn::before { content: ">"; margin-right: 2px; opacity: .9; }
.btn::after { content: "_"; margin-left: 1px; animation: blink 1.1s steps(1) infinite; }
.btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--glow); }

/* primário: preenchido ciano, texto quase-preto */
.btn.primary {
  background: var(--accent);
  color: var(--primary-contrast);
  border-color: var(--accent);
}
.btn.primary::before, .btn.primary::after { color: var(--primary-contrast); }
.btn.primary:hover { background: var(--accent-dim); border-color: var(--accent-dim); box-shadow: var(--glow); }

/* secundário: ghost ciano-sobre-escuro */
.btn.secondary {
  background: transparent;
  color: var(--foreground);
  border-color: var(--border);
}
.btn.secondary::before, .btn.secondary::after { color: var(--accent); }
.btn.secondary:hover { border-color: var(--accent); color: var(--accent); }

/* =========================================================================
   BADGES — mono; default zinc, .primary ciano/10% (mantém o ciano parco)
   ========================================================================= */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.badge.primary {
  background: rgba(6, 182, 212, .10);
  border-color: rgba(6, 182, 212, .25);
  color: var(--accent);
}
.badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* =========================================================================
   CARDS — borda sutil que acende ciano no hover
   ========================================================================= */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.card:hover {
  transform: translateY(-2px);
  border-color: rgba(6, 182, 212, .38);
  box-shadow: var(--glow);
}

.card .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(6, 182, 212, .10);
  border: 1px solid rgba(6, 182, 212, .25);
  color: var(--accent);
  font-family: var(--mono);
  font-weight: 600;
  font-size: .95rem;
  margin-bottom: 14px;
}

/* =========================================================================
   GRIDS
   ========================================================================= */
.grid { display: grid; gap: 20px; }
.grid.two { grid-template-columns: repeat(2, 1fr); }
.grid.three { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 860px) {
  .grid.two, .grid.three { grid-template-columns: 1fr; }
}

/* =========================================================================
   HERO
   ========================================================================= */
.hero {
  position: relative;
  z-index: 1;
  padding-block: clamp(56px, 9vw, 104px);
  max-width: 860px;
}
.hero h1 { margin-bottom: .3em; }
.hero p {
  font-size: clamp(1.05rem, 2vw, 1.22rem);
  color: var(--muted);
  max-width: 640px;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* =========================================================================
   ROTATOR (destaques)
   ========================================================================= */
.rotator-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.rotator-tabs .badge { padding: 7px 13px; font-size: .78rem; }
.rotator-tabs + .rotator-shell { margin-top: 14px; }

/* eyebrow/kicker centrado (ex.: CTA da matrícula) */
.eyebrow.center, .kicker.center { text-align: center; }

.rotator-shell {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 20px;
}
@media (max-width: 860px) { .rotator-shell { grid-template-columns: 1fr; } }

.rotator-stage { display: grid; gap: 16px; }
.rotator-card { scroll-margin-top: 90px; }
.rotator-label {
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.rotator-meta { color: var(--muted); margin: 0; }

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
}
.preview-title h3 { margin: 4px 0 6px; }
.preview-title p { margin: 0; }

.preview-list { display: grid; gap: 8px; margin-top: 18px; }
.preview-list a {
  display: block;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--background);
  border: 1px solid var(--border);
  color: var(--foreground);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.preview-list a:hover { text-decoration: none; border-color: var(--accent); box-shadow: var(--glow); }
.preview-list b { display: block; font-size: .95rem; }
.preview-list span { color: var(--muted); font-size: .82rem; }

.mini-rail { display: grid; gap: 6px; margin-top: 16px; }
.mini-rail a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--foreground);
  transition: background .15s ease;
}
.mini-rail a:hover { text-decoration: none; background: var(--background); }
.mini-rail b { display: block; font-size: .9rem; }
.mini-rail span { font-size: .8rem; }

/* =========================================================================
   NEWS / BLOG
   ========================================================================= */
.news-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 860px) { .news-list { grid-template-columns: 1fr; } }
.news-card h3 { margin: 12px 0 8px; }
.news-meta { color: var(--muted); font-size: .9rem; }

/* =========================================================================
   MODULES / LAUNCHES
   ========================================================================= */
.module-list, .launch-list { display: grid; gap: 16px; }
.module-meta, .launch-meta { color: var(--muted); font-size: .9rem; margin-bottom: 4px; }

/* =========================================================================
   VERSION TABLE
   ========================================================================= */
.version-table {
  display: grid;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
}
.version-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--background);
  border: 1px solid var(--border);
  transition: border-color .15s ease;
}
.version-row:hover { border-color: rgba(6, 182, 212, .38); }
.version-row b { display: block; }
.version-row span { color: var(--muted); font-size: .88rem; }
.version-tag {
  font-family: var(--mono);
  font-size: .82rem;
  font-weight: 500;
  color: var(--accent);
  background: rgba(6, 182, 212, .10);
  border: 1px solid rgba(6, 182, 212, .25);
  padding: 5px 11px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* =========================================================================
   DOORS (comunidade)
   ========================================================================= */
.door {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--foreground);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.door:hover { text-decoration: none; transform: translateY(-2px); border-color: rgba(6, 182, 212, .38); box-shadow: var(--glow); }
.door .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(6, 182, 212, .10);
  border: 1px solid rgba(6, 182, 212, .25);
  color: var(--accent);
  font-family: var(--mono);
  font-weight: 600;
  flex-shrink: 0;
}
.door b { display: block; }
.door .meta { color: var(--muted); font-size: .88rem; }
.door .arrow { margin-left: auto; color: var(--accent); font-size: 1.3rem; }

/* =========================================================================
   LESSONS / TIMELINE (landing do curso)
   ========================================================================= */
.lesson-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color .15s ease;
}
.lesson-row:hover { border-color: rgba(6, 182, 212, .38); }
.lesson-row b { display: block; }
.lesson-row span { color: var(--muted); font-size: .88rem; }
.status-dot {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: var(--accent);
  flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(6, 182, 212, .18);
}

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
.timeline li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.timeline .step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(6, 182, 212, .10);
  border: 1px solid rgba(6, 182, 212, .25);
  color: var(--accent);
  font-family: var(--mono);
  font-weight: 600;
  font-size: .85rem;
  margin-bottom: 12px;
}
.timeline b { display: block; margin-bottom: 4px; }

/* =========================================================================
   PRICING / CTA (matrícula)
   ========================================================================= */
.cta-panel {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(28px, 5vw, 48px);
  box-shadow: var(--glow);
  text-align: center;
}
.cta-panel h2 { margin-bottom: .3em; }
.cta-panel p { color: var(--muted); max-width: 560px; margin-inline: auto; }
.cta-panel .hero-actions { justify-content: center; }
.price {
  font-family: var(--mono);
  font-size: clamp(2rem, 5vw, 2.8rem);
  font-weight: 600;
  color: var(--accent);
  margin: 8px 0;
}
.price small { display: block; font-size: .95rem; color: var(--muted); font-weight: 400; }

/* =========================================================================
   TERMINAL CHROME (janela com 3 dots + label mono)
   ========================================================================= */
.term {
  background: rgba(24, 24, 27, .55);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--glow);
  overflow: hidden;
}
.term .bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(9, 9, 11, .6);
  border-bottom: 1px solid var(--border);
}
.term .dot { width: 11px; height: 11px; border-radius: 50%; }
.term .dot.r { background: rgba(239, 68, 68, .8); }
.term .dot.y { background: rgba(234, 179, 8, .8); }
.term .dot.g { background: rgba(34, 197, 94, .8); }
.term .bar .tag { margin-left: 8px; font-family: var(--mono); font-size: .85rem; color: var(--muted); }
.term .body { padding: 20px 24px; font-family: var(--mono); line-height: 1.8; }
.term .body .cmt { color: var(--muted); }

/* =========================================================================
   INDEX / GENERIC ARTICLES (fallback)
   ========================================================================= */
.post-list { display: grid; gap: 24px; }
.post-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  transition: border-color .15s ease;
}
.post-item:hover { border-color: rgba(6, 182, 212, .38); }
.post-item .entry-title { margin: 0 0 8px; }
.post-item .entry-title a { color: var(--foreground); }
.post-item .entry-title a:hover { color: var(--accent); text-decoration: none; }
.post-item .entry-meta { color: var(--muted); font-family: var(--mono); font-size: .85rem; margin-bottom: 14px; }
.entry-content > * + * { margin-top: 1rem; }

.pagination { display: flex; gap: 12px; margin-top: 32px; }
.pagination a, .pagination .page-numbers {
  font-family: var(--mono);
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted);
}
.pagination .current { color: var(--accent); border-color: rgba(6, 182, 212, .38); }
.no-posts { color: var(--muted); }

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--border);
  padding-block: 40px;
  margin-top: 32px;
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.footer-brand strong {
  display: block;
  font-family: var(--mono);
  letter-spacing: -0.01em;
  text-transform: lowercase;
}
.footer-brand strong .prompt { margin-right: 4px; }
.footer-brand span { color: var(--muted); font-size: .85rem; }
.footer-tagline {
  font-family: var(--mono);
  font-size: .82rem;
  color: var(--muted);
}
.footer-tagline .cyan { color: var(--accent); }

/* =========================================================================
   FORMS — inputs, labels, alerts (design system; NADA de CSS inline)
   ========================================================================= */
.field { margin-bottom: 16px; }
.field:last-of-type { margin-bottom: 0; }

.label {
  display: block;
  font-family: var(--mono);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--muted);
  margin-bottom: 7px;
}

.input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--foreground);
  font-family: var(--mono);
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder { color: var(--muted); opacity: .7; }
.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, .14);
}
textarea.input { min-height: 120px; resize: vertical; }

/* input de código (OTP): centrado, mono, dígitos espaçados */
.input.code {
  text-align: center;
  letter-spacing: .5em;
  font-size: 1.5rem;
  font-weight: 600;
  padding-inline: 10px;
}

.field-hint { margin-top: 10px; font-size: .82rem; color: var(--muted); }
.field-hint.center { text-align: center; }

/* botão largura-cheia (comum em forms) */
.btn.block { width: 100%; }

/* =========================================================================
   ALERTS — avisos/erros (ciano p/ info; vermelho SÓ p/ erro real)
   ========================================================================= */
.alert {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--foreground);
  padding: 12px 14px;
  font-size: .9rem;
  margin-bottom: 16px;
}
.alert.error { border-color: rgba(239, 68, 68, .40); background: rgba(239, 68, 68, .08); color: #fca5a5; }
.alert.info  { border-color: rgba(6, 182, 212, .35); background: rgba(6, 182, 212, .08); color: var(--accent); }

/* =========================================================================
   AUTH — cartão central de acesso (login sem senha)
   ========================================================================= */
.auth { max-width: 440px; margin: clamp(40px, 8vw, 88px) auto; }
.auth h1 { font-size: 1.5rem; margin-bottom: .35em; }
.auth .sub { color: var(--muted); margin: 0 0 24px; font-size: .98rem; }
.auth .foot { margin-top: 20px; text-align: center; font-size: .85rem; }

/* =========================================================================
   PAINEL — área do aluno (logada)
   ========================================================================= */
.painel-intro { padding-block: clamp(28px, 5vw, 44px) 8px; }
.painel-intro h1 { margin-bottom: .25em; }
.painel-intro p { color: var(--muted); margin: 0; }

.painel-sec { padding-block: clamp(20px, 3vw, 30px); }

/* rótulo de seção estilo comentário de código:  // núcleo */
.sec-label {
  font-family: var(--mono);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: lowercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.sec-label::before { content: "// "; color: var(--muted); }

/* linha com conteúdo à esquerda e ação/etiqueta à direita (ex.: card do núcleo) */
.row-split {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.row-split .grow { flex: 1 1 260px; }
.row-split b { display: block; margin-bottom: 4px; }

/* superfícies não deixam margem sobrando no último filho (nada de style inline) */
.panel > :last-child, .card > :last-child { margin-bottom: 0; }

/* =========================================================================
   ACCESSIBILITY
   ========================================================================= */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* =========================================================================
   RESPONSIVO — grid-bg / scan-line discretos no mobile
   ========================================================================= */
@media (max-width: 640px) {
  body { background-size: 40px 40px; }
  .scan-line { opacity: .6; }
}

@media (prefers-reduced-motion: reduce) {
  .scan-line, .cursor, .btn::after { animation: none; }
}