/* Portal da aula (Lucas Tarifa) — identidade do deck "Banco de dados na nuvem":
   modo escuro de ferramenta de dev, grade de planta técnica, acento verde "run",
   azul só para links e caminhos de dados, mono nos títulos. */
:root {
  --p-bg: #0f172a;
  --p-deep: #020617;
  --p-card: #1b2336;
  --p-card-2: #131c2e;
  --p-chip: #272f42;
  --p-line: #334155;
  --p-line-2: #475569;
  --p-fg: #f8fafc;
  --p-text: #cbd5e1;
  --p-sub: #94a3b8;
  --p-green: #22c55e;
  --p-green-2: #4ade80;
  --p-green-soft: #86efac;
  --p-green-deep: #0f2a1e;
  --p-cyan: #38bdf8;
  --p-cyan-soft: #7dd3fc;
  --p-red: #ef4444;
  --p-amber: #f59e0b;
  --p-mono: "JetBrains Mono", Consolas, ui-monospace, Menlo, monospace;
  --p-ui: "IBM Plex Sans", Calibri, system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--p-bg); }
body.portal {
  margin: 0;
  padding: 0 !important;
  min-height: 100vh;
  display: flex; flex-direction: column;
  color: var(--p-text);
  background-color: var(--p-bg);
  background-image:
    radial-gradient(60rem 40rem at 100% -10%, rgba(34, 197, 94, .10), transparent 60%),
    radial-gradient(50rem 36rem at -10% 110%, rgba(56, 189, 248, .07), transparent 60%),
    linear-gradient(rgba(51, 65, 85, .22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(51, 65, 85, .22) 1px, transparent 1px);
  background-size: auto, auto, 48px 48px, 48px 48px;
  background-attachment: fixed;
  font-family: var(--p-ui);
  -webkit-font-smoothing: antialiased;
}
.portal h1, .portal h2 { font-family: var(--p-mono); color: var(--p-fg); letter-spacing: -.02em; }
.portal a { color: var(--p-cyan-soft); text-underline-offset: 3px; }
.portal a:hover { color: var(--p-cyan); }
.portal :focus-visible { outline: 2px solid var(--p-green); outline-offset: 3px; border-radius: 4px; }
.portal ::selection { background: rgba(34, 197, 94, .35); color: var(--p-fg); }
.mono { font-family: var(--p-mono); }

/* ------------------------------------------------------------ topo do site */
.site-nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(2, 6, 23, .78);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--p-line);
}
.site-nav__in {
  max-width: 76rem; margin: 0 auto;
  padding: .7rem max(16px, env(safe-area-inset-left, 0px));
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
}
.marca {
  font-family: var(--p-mono); font-weight: 700; font-size: 1.02rem;
  color: var(--p-fg) !important; text-decoration: none; display: inline-flex; align-items: center;
  white-space: nowrap;
}
.marca__prompt { color: var(--p-green); margin-right: .15rem; }
.marca__tld { color: var(--p-sub); }
.marca__cursor {
  display: inline-block; width: .55em; height: 1.05em; margin-left: .25rem;
  background: var(--p-green); animation: piscar 1.1s steps(1) infinite;
}
@keyframes piscar { 50% { opacity: 0; } }
.site-nav nav { display: flex; gap: .2rem; flex-wrap: wrap; margin-left: auto; }
.site-nav nav a {
  font-family: var(--p-mono); font-size: .84rem; color: var(--p-sub);
  text-decoration: none; padding: .38rem .7rem; border-radius: 8px; border: 1px solid transparent;
  min-height: 2.25rem; display: inline-flex; align-items: center;
}
.site-nav nav a:hover { color: var(--p-fg); border-color: var(--p-line); }
.site-nav nav a[aria-current="page"] { color: var(--p-green); border-color: rgba(34, 197, 94, .45); background: var(--p-green-deep); }
.site-nav nav a[aria-current="page"]::before { content: "> "; }
.status {
  font-family: var(--p-mono); font-size: .74rem; color: var(--p-green-soft);
  border: 1px solid var(--p-line); background: var(--p-chip); border-radius: 999px;
  padding: .22rem .65rem; display: inline-flex; align-items: center; gap: .4rem;
}
.status i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--p-green); box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }
@media (max-width: 640px) {
  .status { display: none; }
  .site-nav nav { margin-left: 0; width: 100%; }
}

/* ------------------------------------------------------------ rodapé do site */
.site-footer {
  margin-top: auto;
  border-top: 1px solid var(--p-line);
  background: rgba(2, 6, 23, .6);
}
.site-footer__in {
  max-width: 76rem; margin: 0 auto;
  padding: 1.1rem max(16px, env(safe-area-inset-right, 0px)) 1.4rem max(16px, env(safe-area-inset-left, 0px));
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; align-items: center;
  font-size: .82rem; color: var(--p-sub);
}
.site-footer__in .mono { color: var(--p-green); }
.site-footer__in .dir { margin-left: auto; }

/* área de conteúdo de cada página */
.conteudo { width: 100%; padding: 2rem max(16px, env(safe-area-inset-right, 0px)) 3rem max(16px, env(safe-area-inset-left, 0px)); }

/* ------------------------------------------------------------ peças comuns */
.eyebrow { font-family: var(--p-mono); font-size: .82rem; color: var(--p-green); letter-spacing: 0; text-transform: none; }
.botao {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--p-mono); font-size: .88rem; font-weight: 600;
  color: var(--p-green) !important; text-decoration: none;
  background: var(--p-green-deep); border: 1px solid var(--p-green); border-radius: 10px;
  padding: .62rem 1rem; min-height: 2.75rem;
  transition: background-color .18s ease, transform .18s ease;
}
.botao:hover { background: #133a27; }
.botao svg { width: 1.05rem; height: 1.05rem; }
/* cantos de "mira": o motivo do deck, só no elemento principal */
.mira { position: relative; }
.mira::before, .mira::after {
  content: ""; position: absolute; width: 18px; height: 18px; pointer-events: none;
  border-color: var(--p-green); border-style: solid;
}
.mira::before { top: -6px; left: -6px; border-width: 2px 0 0 2px; }
.mira::after { bottom: -6px; right: -6px; border-width: 0 2px 2px 0; }

@media (prefers-reduced-motion: reduce) {
  .marca__cursor, .cursor { animation: none; }
  .botao { transition: none; }
}