/* Mobile-first, safe-area-aware styling for ASTER-HUNTER.
   Safe areas: the header/footer pad with env(safe-area-inset-*) so content clears
   the iOS notch / home indicator and Android display cutouts. */

:root {
  --bg: #0b1020;
  --surface: #151b2e;
  --surface-2: #1d2540;
  --text: #e7ecf6;
  --muted: #9aa6c2;
  --primary: #5b8cff;
  --primary-press: #3f6fe0;
  --danger: #ff6b6b;
  --ok: #4ade80;
  --radius: 14px;
  /* Safe-area insets (0 on devices without cutouts). */
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* --- native-app feel ------------------------------------------------------
   Remove the web-y grey tap flash, give every interactive control an instant
   press response (scale-down), enable momentum scrolling, and stop the page
   behind sheets/panels from moving when an inner list reaches its end. */
* { -webkit-tap-highlight-color: transparent; }
button, a, .nav-item, .seg-btn, .chip, [role="button"], .bd-btn, .tm-btn,
.m3-tab, .sentinel-row, .map-mode .seg-btn {
  -webkit-touch-callout: none; user-select: none;
  transition: transform .08s ease, background .15s ease, opacity .15s ease;
}
/* instant tactile feedback on press (pointer-driven so mouse + touch both fire) */
@media (hover: none) {
  button:active, a:active, .nav-item:active, .seg-btn:active, .chip:active,
  [role="button"]:active, .bd-btn:active, .tm-btn:active, .m3-tab:active,
  .sentinel-row:active { transform: scale(0.96); }
  .nav-item:active { transform: scale(0.92); }
}
/* momentum + contained overscroll on every scrollable surface */
.sentinel-scroll, .map-detail-panel, .m3-panel, .app-main, .iasc-files {
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}

body { min-height: 100vh; min-height: 100dvh; }

.app, .screen { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.is-hidden { display: none !important; }

.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(11, 16, 32, 0.85);
  backdrop-filter: blur(8px);
  /* clear the notch/status bar */
  padding: calc(var(--sat) + 0.9rem) calc(var(--sar) + 1rem) 0.9rem calc(var(--sal) + 1rem);
  border-bottom: 1px solid var(--surface-2);
}
.app-header.row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.brand { font-size: 1.15rem; margin: 0; letter-spacing: 0.02em; }

.content {
  flex: 1;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 1rem calc(var(--sar) + 1rem) 1rem calc(var(--sal) + 1rem);
}
.auth-content { display: flex; align-items: center; }

.app-footer {
  padding: 0.9rem calc(var(--sar) + 1rem) calc(var(--sab) + 0.9rem) calc(var(--sal) + 1rem);
  text-align: center;
  font-size: 0.8rem;
  border-top: 1px solid var(--surface-2);
}

.card {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--surface-2);
  border-radius: var(--radius);
  padding: 1.1rem;
  margin: 0 auto 1rem;
}
.card h2 { margin: 0 0 0.25rem; font-size: 1.05rem; }

.tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.tab {
  flex: 1; padding: 0.6rem; border-radius: 10px; border: 1px solid var(--surface-2);
  background: transparent; color: var(--muted); font-weight: 600; cursor: pointer;
}
.tab.is-active { background: var(--surface-2); color: var(--text); }

.form { display: flex; flex-direction: column; gap: 0.85rem; }
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field > span { font-size: 0.85rem; color: var(--muted); }
.field-inline { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }

input[type="email"], input[type="password"], input[type="text"] {
  width: 100%; padding: 0.8rem; font-size: 1rem; /* >=16px avoids iOS zoom-on-focus */
  border-radius: 10px; border: 1px solid var(--surface-2);
  background: var(--surface-2); color: var(--text);
}
input[type="file"] {
  width: 100%; padding: 0.7rem; border-radius: 10px;
  border: 1px dashed var(--surface-2); background: var(--surface-2); color: var(--muted);
}

.btn {
  appearance: none; border: none; border-radius: 10px; cursor: pointer;
  padding: 0.85rem 1rem; font-size: 1rem; font-weight: 700;
  min-height: 44px; /* comfortable touch target */
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--primary); color: #07101f; }
.btn-primary:active { background: var(--primary-press); }
.btn-ghost { background: transparent; color: var(--muted); border: 1px solid var(--surface-2); min-height: 38px; padding: 0.45rem 0.8rem; }

.muted { color: var(--muted); }
.hello { margin: 0.25rem 0 1rem; }
.error { color: var(--danger); min-height: 1.2em; margin: 0.6rem 0 0; font-size: 0.9rem; }

.candidates { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.candidate {
  background: var(--surface); border: 1px solid var(--surface-2); border-radius: 12px;
  padding: 0.8rem 1rem; display: flex; justify-content: space-between; align-items: center; gap: 0.75rem;
}
.candidate .score { font-weight: 800; font-size: 1.1rem; }
.badge { font-size: 0.72rem; padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.badge.known { color: #07101f; background: var(--ok); }

/* Larger screens: keep it centered and comfortable, not stretched. */
@media (min-width: 640px) {
  .auth-content .card { max-width: 420px; }
}

/* ============================================================
   APP SHELL — sidebar (desktop) / bottom-nav (mobile)
   ============================================================ */
#screen-dashboard { display: block; }
.app-shell { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }

.sidebar {
  position: fixed; z-index: 30; left: 0; right: 0; bottom: 0;
  display: flex; align-items: stretch; justify-content: space-around;
  background: rgba(11, 16, 32, 0.92); backdrop-filter: blur(14px);
  border-top: 1px solid var(--surface-2);
  padding: 0.25rem calc(var(--sal)) calc(var(--sab) + 0.25rem) calc(var(--sar));
}
/* brand is hidden in the mobile bottom bar (.sidebar); shown only in the desktop
   sidebar. Scoped with .sidebar to beat the generic .sidebar-brand flex rule. */
.sidebar .sidebar-brand { display: none; }
.nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
  background: none; border: none; cursor: pointer; color: var(--muted);
  padding: 0.5rem 0.25rem; min-height: 52px; font: inherit; border-radius: 12px;
}
/* the explicit display:flex above would defeat the hidden attribute (students
   must not see the Turmas nav) — restate it with priority */
.nav-item[hidden] { display: none !important; }
.nav-ico { font-size: 1.25rem; line-height: 1; transition: transform .18s cubic-bezier(.22,1,.36,1); }
.nav-txt { font-size: 0.72rem; font-weight: 600; }
.nav-item.is-active { color: var(--primary); }
.nav-item.is-active .nav-ico { transform: translateY(-2px) scale(1.08); }
/* native-style active indicator: a tiny dot that animates in above the icon */
.nav-item { position: relative; }
.nav-item::after {
  content: ""; position: absolute; top: 6px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--primary);
  transform: scale(0); opacity: 0; transition: transform .2s cubic-bezier(.22,1,.36,1), opacity .2s ease;
}
.nav-item.is-active::after { transform: scale(1); opacity: 1; }
.nav-profile::after { display: none; }
.nav-logout { color: var(--muted); }
/* mobile: profile is a compact avatar tab pinned to the LEFT of the bottom bar.
   It's last in the DOM (so desktop keeps it at the sidebar's bottom), so order:-1
   moves it to the far left here. Name/plan text is hidden — just the avatar. */
.nav-profile { order: -1; gap: 0; }
.nav-profile .profile-txt { display: none; }
.nav-profile .avatar { width: 28px; height: 28px; font-size: 0.85rem; }

.app-main {
  flex: 1; width: 100%; max-width: 720px; margin: 0 auto;
  /* Top padding clears the iOS notch / Dynamic Island / Android cutout ALWAYS, so the
     first visible element (greeting OR the map title when the greeting is hidden) never
     slides under the status bar. */
  padding: calc(var(--sat) + 0.75rem) calc(var(--sar) + 1rem) calc(72px + var(--sab)) calc(var(--sal) + 1rem);
}
.main-head { padding-top: 0; margin-bottom: 0.6rem; }
.main-head .brand { font-size: 1.1rem; margin: 0; }
.hello { margin: 0; }
.mobile-only { display: block; }

/* views: only the active one shows */
.view { display: none; animation: fadeUp 0.35s ease both; }
.view.is-active { display: block; }
.view-title { font-size: 1.2rem; margin: 0.2rem 0 1rem; }

/* sidebar collapse toggle — desktop only (mobile uses the bottom nav) */
.sidebar-toggle { display: none; }

/* desktop: real left sidebar */
@media (min-width: 880px) {
  .app-shell { flex-direction: row; }
  .sidebar {
    position: sticky; top: 0; left: auto; right: auto; bottom: auto;
    flex-direction: column; justify-content: flex-start; align-items: stretch;
    width: 232px; height: 100vh; height: 100dvh;
    border-top: none; border-right: 1px solid var(--surface-2);
    padding: calc(var(--sat) + 1.2rem) 0.8rem 1.2rem; gap: 0.3rem;
    transition: width 0.22s ease;
  }
  .sidebar .sidebar-brand {
    display: flex; align-items: center; gap: 0.4rem; font-weight: 800;
    padding: 0.4rem 0.5rem 1.2rem; font-size: 0.92rem; letter-spacing: -0.01em;
    white-space: nowrap; overflow: hidden;
  }
  .nav-item {
    flex: 0 0 auto; flex-direction: row; justify-content: flex-start; gap: 0.7rem;
    padding: 0.7rem 0.9rem; min-height: 44px; border-radius: 12px; white-space: nowrap;
  }
  .nav-item:hover { background: var(--surface); color: var(--text); }
  .nav-item.is-active { background: var(--surface-2); color: var(--text); }
  .nav-ico { font-size: 1.1rem; flex: 0 0 auto; }
  .nav-txt { font-size: 0.95rem; }
  /* profile is pinned to the bottom-left, set apart from the nav links */
  .nav-profile {
    display: flex; order: 0; gap: 0.6rem; margin-top: auto;
    padding: 0.6rem 0.7rem; border-radius: 14px;
    border: 1px solid var(--surface-2); background: var(--surface);
  }
  .nav-profile .profile-txt { display: flex; }     /* restore name/plan on desktop */
  .nav-profile .avatar { width: 34px; height: 34px; font-size: 0.95rem; }
  .nav-profile::before {
    content: ""; position: absolute; left: 0.8rem; right: 0.8rem; top: -0.5rem;
    border-top: 1px solid var(--surface-2);
  }
  .nav-profile { position: relative; }
  .nav-profile:hover { background: var(--surface-2); }
  .app-main { padding-bottom: calc(var(--sab) + 1.5rem); }
  .mobile-only { display: none; }

  /* the collapse toggle sits at the sidebar's top-right edge */
  .sidebar-toggle {
    display: grid; place-items: center; position: absolute; top: 0.8rem; right: -12px;
    width: 24px; height: 24px; border-radius: 50%; cursor: pointer; z-index: 31;
    background: var(--surface-2); color: var(--muted); border: 1px solid var(--surface-2);
    font-size: 0.8rem; line-height: 1;
  }
  .sidebar-toggle:hover { color: var(--text); border-color: var(--primary); }
  .sidebar { position: sticky; } /* keep the toggle anchored to the sidebar */

  /* collapsed: icons only */
  .sidebar-collapsed .sidebar { width: 64px; padding-left: 0.5rem; padding-right: 0.5rem; }
  .sidebar-collapsed .sidebar .nav-txt,
  .sidebar-collapsed .sidebar .sidebar-brand span,
  .sidebar-collapsed .sidebar .nav-badge { display: none; }
  .sidebar-collapsed .sidebar .sidebar-brand { justify-content: center; padding: 0.4rem 0 1.2rem; }
  .sidebar-collapsed .sidebar .nav-item { justify-content: center; padding: 0.7rem 0; gap: 0; }
  .sidebar-collapsed .sidebar .nav-ico { font-size: 1.3rem; }
  .sidebar-collapsed .sidebar .nav-profile { padding: 0.45rem 0; }
  .sidebar-collapsed .sidebar .nav-profile::before { left: 0.4rem; right: 0.4rem; }
}

/* first-run pulse hint on the primary action */
.pulse-hint { animation: pulseHint 1.6s ease-in-out 3; }
@keyframes pulseHint {
  0%, 100% { box-shadow: 0 0 0 0 rgba(91, 140, 255, 0); }
  50% { box-shadow: 0 0 0 6px rgba(91, 140, 255, 0.35); }
}
@media (prefers-reduced-motion: reduce) { .pulse-hint { animation: none; } }

/* analyze mode selector */
.mode-select { border: none; padding: 0; margin: 0 0 0.9rem; display: flex; flex-direction: column; gap: 0.5rem; }
.mode-select legend { padding: 0 0 0.4rem; }
.mode-opt { display: block; cursor: pointer; }
.mode-opt input { position: absolute; opacity: 0; pointer-events: none; }
.mode-card {
  display: block; border: 1px solid var(--surface-2); border-radius: 12px; padding: 0.7rem 0.85rem;
  transition: border-color 0.2s, background 0.2s;
}
.mode-card strong { display: block; margin-bottom: 0.15rem; font-size: 0.95rem; }
.mode-opt input:checked + .mode-card { border-color: var(--primary); background: rgba(91, 140, 255, 0.08); }
.mode-opt input:focus-visible + .mode-card { outline: 2px solid var(--primary); outline-offset: 2px; }
.mode-rec { font-size: 0.66rem; font-weight: 800; color: #07101f; background: var(--ok); border-radius: 999px; padding: 0.05rem 0.4rem; vertical-align: middle; }
#opt-shift-wrap { margin-top: 0.5rem; }

/* quick analyze result */
.quick-result h3 { font-size: 1.05rem; margin: 0 0 0.3rem; }
.quick-list { list-style: none; margin: 0.7rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.quick-row { display: flex; align-items: center; gap: 0.7rem; background: var(--surface); border: 1px solid var(--surface-2); border-radius: 10px; padding: 0.5rem 0.8rem; }

/* term tooltip */
.tip {
  display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 0.3rem;
  border-radius: 50%; border: none; cursor: help; vertical-align: middle;
  background: var(--surface-2); color: var(--muted); font-size: 0.7rem; font-weight: 800;
  position: relative; padding: 0;
}
.tip:hover, .tip:focus { background: var(--primary); color: #07101f; outline: none; }
.tip::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px);
  /* anchor the LEFT edge of the bubble near the button and clamp its width to the
     viewport so it never gets clipped off-screen. */
  left: 0; transform: translateY(4px); text-align: left;
  width: max-content; max-width: min(260px, calc(100vw - 2rem));
  background: #05080f; color: var(--text); border: 1px solid var(--surface-2);
  padding: 0.55rem 0.7rem; border-radius: 10px; font-size: 0.78rem; font-weight: 400; line-height: 1.45;
  opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; z-index: 60;
  box-shadow: 0 12px 30px -12px rgba(0,0,0,0.8);
}
.tip:hover::after, .tip:focus::after { opacity: 1; transform: translateY(0); }
/* tips near the right edge open leftwards so they don't overflow the right side */
.tip.tip-left::after { left: auto; right: 0; }

/* Small screens: the floating bubble is fragile. Pin the tooltip to the viewport
   (position:fixed) as a near-full-width card placed by JS just below the button —
   it can never be clipped and is comfortable to read. JS sets --tip-top/--tip-left. */
@media (max-width: 520px) {
  .tip.tip-open::after {
    position: fixed;
    top: var(--tip-top, 50%); left: max(0.75rem, var(--tip-left, 0.75rem));
    bottom: auto; right: auto; transform: none;
    width: min(320px, calc(100vw - 1.5rem)); max-width: calc(100vw - 1.5rem);
    opacity: 1;
  }
  /* don't double-show via :hover/:focus on mobile — only the JS-driven tip-open */
  .tip:hover::after, .tip:focus::after { opacity: 0; }
  .tip.tip-open::after { opacity: 1; }
}

/* --- sky map (Aladin Lite) --- */
.sky-map-wrap { position: relative; }
.sky-map {
  width: 100%; height: 62vh; min-height: 340px; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--surface-2); background: #05080f; position: relative;
}
.sky-map.is-hidden { display: none; }
/* --- map detail panel (clicked body) --- desktop: floats top-left; mobile: it becomes
   a native draggable bottom-sheet (see the @media rule). */
.map-detail-panel {
  position: absolute; top: 0.6rem; left: 0.6rem; z-index: 31; display: none;
  max-width: min(320px, 80%); padding: 0.7rem 0.8rem; border-radius: 14px;
  font: 400 0.82rem system-ui, sans-serif; line-height: 1.45;
  background: rgba(8, 14, 28, 0.95); color: #dfe9ff;
  border: 1px solid rgba(108, 240, 255, 0.45); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}
.map-detail-panel.is-open { display: block; }
/* glossary: a tappable dotted-underline term inside any card */
.glo { border-bottom: 1px dotted rgba(108, 240, 255, 0.7); cursor: help; color: #bfe9ff; }
.glo:active { background: rgba(108, 240, 255, 0.14); }
/* glossary definition popover (centered over the map) */
.glo-pop {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 40;
  max-width: min(300px, 84vw); padding: 0.8rem 0.9rem; border-radius: 12px;
  font: 400 0.82rem system-ui; line-height: 1.5; color: #eaf2ff;
  background: rgba(12, 18, 34, 0.98); border: 1px solid rgba(108, 240, 255, 0.5);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.6);
}
.glo-pop strong { color: #6cf0ff; }
.glo-pop .glo-x { margin-top: 0.6rem; width: 100%; min-height: 34px; border: none; border-radius: 8px; cursor: pointer; font: 600 0.8rem system-ui; background: rgba(108, 240, 255, 0.18); color: #6cf0ff; }
/* provenance stamp (footer of every card) — makes the honesty contract auditable */
.prov { margin-top: 0.5rem; padding-top: 0.4rem; border-top: 1px solid rgba(159, 179, 214, 0.18); font: 500 0.68rem system-ui; color: #7e91b5; }
.prov-real { color: #6ee7a0; font-weight: 700; }
.prov-illus { color: #ffd27d; font-weight: 700; }
/* uncertainty layer — a collapsible "how sure are we?" note; the honesty IS the lesson */
.unc { margin-top: 0.5rem; font-size: 0.78rem; }
.unc summary { cursor: pointer; color: #9fd8ff; font-weight: 600; list-style: none; }
.unc summary::-webkit-details-marker { display: none; }
.unc[open] summary { margin-bottom: 0.3rem; }
.unc { color: #cfe0ff; line-height: 1.45; }

/* first-visit onboarding coach-mark (bottom sheet-ish card over the 3D map) */
.onb3d { position: absolute; inset: 0; z-index: 45; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; }
.onb3d-card {
  pointer-events: auto; margin: 0 0 calc(1rem + env(safe-area-inset-bottom)); width: min(340px, 88vw);
  padding: 1rem 1.1rem; border-radius: 16px; text-align: center;
  background: rgba(10, 16, 32, 0.97); color: #eaf2ff; border: 1px solid rgba(108, 240, 255, 0.4);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6); animation: onbUp 0.3s ease both;
}
@keyframes onbUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.onb3d-title { font: 700 1rem system-ui; margin-bottom: 0.3rem; }
.onb3d-body { font: 400 0.85rem system-ui; line-height: 1.45; color: #cfe0ff; }
.onb3d-dots { display: flex; gap: 0.35rem; justify-content: center; margin: 0.7rem 0; }
.onb3d-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); }
.onb3d-dots span.on { background: var(--primary, #6cf0ff); }
.onb3d-row { display: flex; gap: 0.5rem; }
.onb3d-skip { flex: 0 0 auto; background: transparent; border: none; color: #9fb3d6; font: 600 0.82rem system-ui; cursor: pointer; padding: 0.5rem 0.6rem; }
.onb3d-next { flex: 1; min-height: 40px; border: none; border-radius: 10px; cursor: pointer; font: 700 0.85rem system-ui; background: var(--primary, #6cf0ff); color: #07101f; }
/* the ladder rung the onboarding is pointing at pulses */
.map-level-step.onb-highlight { background: rgba(108, 240, 255, 0.22); box-shadow: 0 0 0 2px rgba(108, 240, 255, 0.6); animation: onbPulse 1.1s ease-in-out infinite; }
@keyframes onbPulse { 0%, 100% { box-shadow: 0 0 0 2px rgba(108, 240, 255, 0.5); } 50% { box-shadow: 0 0 0 5px rgba(108, 240, 255, 0.2); } }
@media (max-width: 700px) {
  /* Native bottom-sheet: slides up from the bottom, full-width, rounded top, a grab
     handle (the ::before pill), safe-area padding, and drag-to-dismiss (in solar3d.js). */
  .map-detail-panel {
    top: auto; left: 0; right: 0; bottom: 0; max-width: none; width: 100%;
    border-radius: 18px 18px 0 0; border-left: none; border-right: none; border-bottom: none;
    padding: 1.1rem 1rem calc(1rem + var(--sab)); max-height: 76vh; overflow-y: auto;
    transition: transform 0.25s cubic-bezier(.22,1,.36,1); touch-action: pan-y;
  }
  .map-detail-panel.is-open { display: block; animation: sheetUp 0.28s cubic-bezier(.22,1,.36,1) both; }
  .map-detail-panel::before {  /* the grab handle */
    content: ""; position: absolute; top: 0.45rem; left: 50%; transform: translateX(-50%);
    width: 40px; height: 4px; border-radius: 99px; background: rgba(180, 200, 230, 0.45);
  }
}
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
/* 2D/3D mode toggle */
.map-mode { display: inline-flex; gap: 0.3rem; margin-bottom: 0.6rem; background: var(--surface-2); padding: 0.2rem; border-radius: 10px; }
.map-mode .seg-btn { border: none; background: transparent; color: var(--muted); cursor: pointer; padding: 0.35rem 0.8rem; border-radius: 8px; font: inherit; font-size: 0.85rem; font-weight: 600; min-height: 36px; }
.map-mode .seg-btn.is-active { background: var(--primary); color: #07101f; }
#sky-3d canvas { display: block; width: 100% !important; height: 100% !important; border-radius: 14px; }
/* L8: visible keyboard focus on the 3D canvas (mouse users never see it) */
#sky-3d canvas:focus-visible { outline: 2px solid var(--primary, #6cf0ff); outline-offset: -2px; }
/* ============================================================================
   3D map controls — overlaid ON the map, grouped & collapsible (mobile-first).
   Layout:  top-left = tool clusters (🛰️ Asteroides / 🎨 Camadas / 📷 Câmera),
            top-right = 🔍 search,  bottom-center = ⏪▶⏩ time machine (always on).
   The whole overlay only renders in 3D mode (#map3d-overlay.is-hidden off).
   ========================================================================== */
.map3d-overlay { position: absolute; inset: 0; z-index: 18; pointer-events: none; }
.map3d-overlay.is-hidden { display: none; }
/* children opt back into pointer events so the canvas stays draggable between them */
.map3d-overlay > * { pointer-events: auto; }

/* glass surface shared by every overlay cluster */
.m3-tab, .m3-panel, .m3-search, .time-machine.tm-overlay {
  background: rgba(8, 14, 28, 0.82); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  border: 1px solid rgba(120, 150, 200, 0.22); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4);
}

/* --- top-left tool clusters --- */
.m3-clusters { position: absolute; top: 0.6rem; left: 0.6rem; display: flex; flex-direction: column; gap: 0.4rem; max-width: min(78vw, 360px); }
.m3-cluster { display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-start; }
.m3-tab { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; color: var(--text, #e8eefc);
  border-radius: 10px; min-height: 38px; padding: 0 0.7rem; font: 600 0.82rem system-ui, sans-serif; line-height: 1;
  transition: background .15s, border-color .15s; }
.m3-tab:hover { background: rgba(20, 30, 52, 0.92); }
.m3-tab[aria-expanded="true"] { border-color: var(--primary); color: var(--primary); }
/* the "Além do Sistema Solar" CTA tab: a subtle cosmic gradient so it invites the tap */
.m3-tab-cta { background: linear-gradient(100deg, rgba(60, 40, 110, 0.9), rgba(20, 60, 110, 0.9));
  border-color: rgba(150, 130, 255, 0.4); }
.m3-tab-cta:hover { background: linear-gradient(100deg, rgba(76, 52, 140, 0.95), rgba(28, 78, 140, 0.95)); }
.m3-tab.is-active { border-color: var(--primary); color: var(--primary); }
.m3-panel { border-radius: 12px; padding: 0.55rem 0.65rem; display: flex; flex-direction: column; gap: 0.45rem;
  max-width: min(82vw, 340px); max-height: 56vh; overflow-y: auto; animation: m3pop .14s ease; }
.m3-panel[hidden] { display: none; }
@keyframes m3pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* --- top-CENTER search --- (kept clear of the left tool clusters, the right
   fullscreen button, and the right-side Sentinela panel, which used to overlap it) */
.m3-search { position: absolute; top: 0.6rem; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 0.4rem; border-radius: 10px; padding: 0.2rem 0.3rem; max-width: 56vw; }
.m3-search-icon { display: none; cursor: pointer; background: transparent; border: none; color: var(--text); font-size: 1.05rem;
  min-width: 40px; min-height: 38px; border-radius: 8px; }
.m3-search #ast-search-status { max-width: 40vw; }

/* (The old top-left floating "Voltar" / "Ver na Via Láctea" buttons were removed — the
   right-side level ladder is now the single level navigator, decluttering the top.) */

/* LEVEL LADDER — always-visible zoom-out stepper (Sistema Solar → Universo). Tap any
   rung to fly there. Vertical on the right edge, out of the way of the top-left buttons
   and the bottom time machine. This is how the user navigates between expansion levels. */
.map-level-ladder {
  position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); z-index: 21;
  display: flex; flex-direction: column; gap: 0.3rem; align-items: stretch;
  padding: 0.35rem; border-radius: 14px;
  background: rgba(8, 14, 28, 0.72); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  border: 1px solid rgba(120, 150, 200, 0.22); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4);
}
.map-level-step {
  display: flex; align-items: center; gap: 0.4rem; cursor: pointer; text-align: left;
  background: transparent; border: none; color: var(--muted, #9fb3d6);
  border-radius: 9px; min-height: 34px; padding: 0.2rem 0.5rem 0.2rem 0.35rem;
  font: 600 0.72rem system-ui, sans-serif; transition: background .15s, color .15s, transform .08s ease;
}
.map-level-step .mls-ico { font-size: 1rem; line-height: 1; width: 1.2rem; text-align: center; }
.map-level-step:active { transform: scale(0.95); }
.map-level-step:hover { background: rgba(20, 30, 52, 0.9); color: var(--text, #e8eefc); }
.map-level-step.is-current { background: rgba(108, 240, 255, 0.16); color: var(--primary, #6cf0ff); }
.map-level-step.is-current .mls-ico { filter: drop-shadow(0 0 4px rgba(108, 240, 255, 0.6)); }
/* the non-navigable "Multiverso?" rung: dashed, tinted violet + a top divider so it
   reads as "beyond the data" (hypotheses), visually distinct from the real levels */
.map-level-mv { color: #c9a8ff; border-top: 1px dashed rgba(159,140,214,.35); margin-top: 2px; padding-top: .35rem; }
.map-level-mv:hover { background: rgba(120,90,200,.18); color: #e0ccff; }
.map-level-mv .mls-ico { filter: drop-shadow(0 0 3px rgba(180,140,255,.5)); }
/* on a narrow phone, collapse the ladder to icons only (labels would crowd the map) */
@media (max-width: 700px) {
  .map-level-step .mls-tx { display: none; }
  .map-level-step { justify-content: center; padding: 0.2rem 0.35rem; min-width: 38px; }
}
/* live scale ruler (bottom-left) — the camera's real distance, updated every frame,
   so the child watches the number climb UA → anos-luz → Mpc as they zoom out. */
.map-scale-ruler {
  position: absolute; left: 0.6rem; bottom: 0.9rem; z-index: 20; pointer-events: none;
  padding: 0.3rem 0.6rem; border-radius: 999px; font: 600 0.72rem system-ui, sans-serif;
  color: #cfe0ff; background: rgba(8, 14, 28, 0.78);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  border: 1px solid rgba(120, 150, 200, 0.22); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  font-variant-numeric: tabular-nums; white-space: nowrap; max-width: 70vw; overflow: hidden; text-overflow: ellipsis;
}
.map-scale-ruler .msr-ico { opacity: 0.8; }
.map-scale-ruler strong { color: #6cf0ff; }
.map-sys-scale { bottom: calc(0.9rem + 2.1rem); border-color: rgba(159, 140, 214, 0.35); }
.map-sys-scale strong { color: #c9a8ff; }

.map-regime-chip {
  position: absolute; left: 50%; bottom: 0.9rem; transform: translateX(-50%);
  z-index: 20; pointer-events: none; white-space: nowrap; max-width: 92vw; overflow: hidden; text-overflow: ellipsis;
  padding: 0.4rem 0.85rem; border-radius: 999px; font: 600 0.76rem system-ui, sans-serif; color: #cfe0ff;
  background: rgba(8, 14, 28, 0.82); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  border: 1px solid rgba(108, 240, 255, 0.35); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4);
}

/* --- deep-sky ("Ir mais longe") control — top-center, only in the Universo level --- */
.deep-sky {
  position: absolute; left: 50%; top: calc(0.6rem + env(safe-area-inset-top) + 44px); transform: translateX(-50%);
  z-index: 21; display: flex; flex-direction: column; gap: 0.35rem; align-items: center;
  max-width: min(90vw, 420px); padding: 0.45rem 0.6rem; border-radius: 12px;
  background: rgba(8, 14, 28, 0.82); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  border: 1px solid rgba(150, 130, 255, 0.3); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4);
}
.deep-sky.is-hidden { display: none; }
.ds-row { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; justify-content: center; }
.ds-row.is-hidden { display: none; }
.deep-sky .bd-slider { width: min(46vw, 190px); }
.deep-sky #ds-status { text-align: center; max-width: 88vw; color: #cfe0ff; }
/* real-time download progress bar + ludic feedback while the deep layer streams in */
.ds-load { display: flex; flex-direction: column; gap: 0.3rem; align-items: center; min-width: min(80vw, 300px); }
.ds-load-msg { font: 600 0.78rem system-ui; color: #dfe9ff; min-height: 1.1em; }
.ds-bar { width: 100%; height: 7px; border-radius: 99px; background: rgba(255,255,255,0.12); overflow: hidden; }
.ds-bar-fill {
  height: 100%; border-radius: 99px; transition: width 0.15s ease;
  background: linear-gradient(90deg, #6cf0ff, #a78bfa 60%, #ff8ad6);
  box-shadow: 0 0 8px rgba(108,240,255,0.6);
}
/* indeterminate (server still building the query, no bytes yet): a sliding shimmer */
.ds-bar-fill.is-indeterminate {
  width: 40% !important; animation: dsIndet 1.2s ease-in-out infinite;
}
@keyframes dsIndet { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
.ds-load-sub { font: 600 0.72rem system-ui; color: #9fd8ff; font-variant-numeric: tabular-nums; }
.ds-est { color: #7e91b5; font-weight: 500; }
/* object list (☰) — browsable list of exoplanet systems */
.exo-list-panel {
  position: absolute; left: 0.6rem; top: calc(0.6rem + env(safe-area-inset-top) + 44px); z-index: 23;
  width: min(320px, 82vw); max-height: 60vh; display: flex; flex-direction: column;
  border-radius: 14px; padding: 0.6rem; background: rgba(8, 14, 28, 0.95);
  border: 1px solid rgba(120, 150, 200, 0.28); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}
.exo-list-panel.is-hidden { display: none; }
.elp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem; color: #eaf2ff; }
.elp-filter { width: 100%; box-sizing: border-box; padding: 0.4rem 0.55rem; margin-bottom: 0.4rem; border-radius: 8px; border: 1px solid var(--surface-2, #1e2740); background: var(--surface, #131a2c); color: var(--text, #e8eefc); font: inherit; font-size: 0.85rem; }
.elp-body { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.elp-item { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; width: 100%; background: none; border: none; cursor: pointer; color: #dfe9ff; padding: 0.5rem 0.4rem; border-radius: 8px; font: inherit; text-align: left; }
.elp-item:active { background: rgba(108, 240, 255, 0.14); }
.elp-name { font-weight: 600; font-size: 0.85rem; }
.elp-meta { color: #9fb3d6; font-size: 0.74rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* "Dados no dispositivo" — persistent cache management */
.dc-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.5rem 0; border-bottom: 1px solid var(--surface-2, #1e2740); }
.dc-row:last-child { border-bottom: none; }
.dc-info { display: flex; flex-direction: column; gap: 0.15rem; }
.dc-info strong { font-size: 0.88rem; }
.dc-ok { color: #6ee7a0; font-weight: 700; }
.dc-off { color: #9fb3d6; }

/* --- bottom-center time machine (always visible) --- */
.time-machine.tm-overlay { position: absolute; left: 50%; bottom: 0.7rem; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 0.4rem; align-items: center; border-radius: 14px;
  padding: 0.5rem 0.7rem calc(0.5rem + env(safe-area-inset-bottom)); max-width: 94%; }

/* Time machine: scrub the real motion of planets + asteroids backward/forward. */
.time-machine.is-hidden { display: none; }
.tm-controls { display: inline-flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; justify-content: center; }
.tm-btn { border: 1px solid var(--border, #2a3550); background: var(--surface, #0d1424); color: var(--text, #e8eefc);
  cursor: pointer; min-height: 40px; min-width: 44px; padding: 0 0.6rem; border-radius: 9px; font: inherit;
  font-size: 1rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, transform .1s; }
.tm-btn:hover { background: var(--surface-2); }
.tm-btn:active { transform: scale(0.94); }
.tm-btn[data-tm="now"] { font-size: 0.82rem; font-weight: 600; }
.tm-speed { font-size: 1.15rem; } /* the animal speed icon reads as a fun, tappable control */
.tm-date { margin-left: 0.5rem; color: var(--primary); font-weight: 600; font-variant-numeric: tabular-nums; }
/* Asteroid density selector (sample / 10k / max) for the 3D belt. */
.belt-density { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.bd-label { color: var(--muted); }
.bd-btn { border: 1px solid var(--border, #2a3550); background: var(--surface, #0d1424); color: var(--text, #e8eefc);
  cursor: pointer; min-height: 34px; padding: 0 0.6rem; border-radius: 8px; font: 600 0.8rem system-ui, sans-serif; }
.bd-btn.is-active { background: var(--primary); color: #07101f; border-color: var(--primary); }
.bd-btn:disabled { opacity: 0.5; cursor: progress; }
.bd-status { color: var(--muted); }
/* asteroid-count slider — THREE bands painted under the track:
   GREEN (≤ GPU-recommended) → YELLOW (heavy) → RED (extreme = whole catalogue).
   Boundaries come from --green-pct and --yellow-pct (set from the GPU estimate). */
.bd-slider { -webkit-appearance: none; appearance: none; height: 8px; border-radius: 6px; width: 13rem; max-width: 50vw;
  background:
    linear-gradient(to right,
      rgba(57,224,138,.40) 0%,
      rgba(57,224,138,.40) var(--green-pct, 20%),
      rgba(255,196,80,.34) var(--green-pct, 20%),
      rgba(255,196,80,.34) var(--yellow-pct, 55%),
      rgba(255,75,60,.42) var(--yellow-pct, 55%),
      rgba(255,75,60,.55) 100%);
  cursor: pointer; }
.bd-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--primary); border: 2px solid #07101f; cursor: pointer; }
.bd-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--primary); border: 2px solid #07101f; cursor: pointer; }
.bd-count { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; min-width: 4.2rem; }
/* time scrubber: a plain blue track (no recommended band), thumb centered = today */
.tm-scrub { display: flex; align-items: center; gap: 0.45rem; }
.tm-slider { background: linear-gradient(to right, rgba(108,240,255,.18), rgba(108,240,255,.30) 50%, rgba(108,240,255,.18)); width: 13rem; max-width: 72vw; }
.bd-fps { color: var(--muted); font-variant-numeric: tabular-nums; }
/* 3D camera presets + asteroid search */
.map3d-tools { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.ast-search { display: inline-flex; }
.ast-search input { min-height: 38px; padding: 0 0.55rem; border-radius: 8px; font: 500 0.82rem system-ui, sans-serif;
  background: var(--surface, #0d1424); color: var(--text, #e8eefc); border: 1px solid var(--border, #2a3550); width: 13rem; max-width: 56vw; }
/* Mobile: the bottom nav (~64px) + its safe-area sit over the page bottom, and the
   map view has the mode toggle + a credit line above. The 3D controls now overlay
   the map (no stacked bars below it), so the map can be tall — leave room only for
   the nav + the surrounding chrome. */
@media (max-width: 879px) {
  .sky-map { height: calc(100dvh - 168px - var(--sab)); min-height: 320px; }

  /* FOCUS ON THE MAP. On a phone the page header (greeting), the map title, the
     subtitle and the 2D legend ate most of the screen, squeezing the map into a small
     box. When the Map view is active we strip that chrome to the essentials so the map
     gets the whole screen — the controls live on the map itself. */
  .app-main:has([data-view-panel="map"].is-active) .main-head,
  .app-main:has([data-view-panel="map"].is-active) #map-subtitle {
    display: none;            /* greeting / subtitle: not needed on a phone */
  }
  /* The DSS2/Pan-STARRS image credit (ODbL) is only relevant in 2D mode (3D is our own
     render). Aladin also shows its own on-canvas attribution. Hide the text line only
     in 3D, where there are no third-party tiles to attribute. */
  #map-credit.is-hidden { display: none; }
  /* Title + 2D/3D toggle share ONE row on mobile (the toggle floats to the right of the
     title), reclaiming a whole row of vertical space for the map. */
  [data-view-panel="map"].is-active .view-title {
    font-size: 1.05rem; margin: 0 0 0.45rem; display: inline-block;
  }
  [data-view-panel="map"].is-active .map-mode {
    float: right; margin: -0.1rem 0 0.45rem; gap: 0.2rem; padding: 0.15rem;
  }
  [data-view-panel="map"].is-active .map-mode .seg-btn {
    padding: 0.3rem 0.6rem; font-size: 0.8rem; min-height: 32px;   /* more compact */
  }
  /* the 2D legend chips collapse to a compact row; the survey picker stays usable */
  [data-view-panel="map"].is-active .map-legend { clear: both; gap: 0.3rem; margin-bottom: 0.4rem; }
  /* with the chrome gone the map can be much taller (only the title row + nav remain) */
  .app-main:has([data-view-panel="map"].is-active) .sky-map {
    height: calc(100dvh - 110px - var(--sab));
  }
}
/* Phone in LANDSCAPE: vertical space is scarce — also hide the title and the mode
   toggle wrapper margin, and let the map fill almost everything above the nav. */
@media (max-width: 879px) and (orientation: landscape) and (max-height: 520px) {
  [data-view-panel="map"].is-active .view-title { display: none; }
  .app-main:has([data-view-panel="map"].is-active) .sky-map {
    height: calc(100dvh - 96px - var(--sab));
  }
}
@media (min-width: 880px) { .sky-map { height: 74vh; } }

/* The map view breaks out of the 720px reading column to use the full width. */
@media (min-width: 880px) {
  .app-main:has([data-view-panel="map"].is-active) { max-width: none; padding-right: 2rem; }
}
.map-fs-btn {
  position: absolute; top: 0.6rem; right: 0.6rem; z-index: 20;
  width: 44px; height: 44px; min-height: 44px; padding: 0; font-size: 1.2rem; line-height: 1;
}
/* Fullscreen: the wrapper fills the screen and the canvas fills the wrapper. The
   pseudo-fs class is the iOS fallback (no element Fullscreen API there). */
.sky-map-wrap:fullscreen, .sky-map-wrap.is-pseudo-fs {
  width: 100vw; height: 100vh; background: #05080f; position: relative;
}
.sky-map-wrap.is-pseudo-fs { position: fixed; inset: 0; z-index: 1000; }
.sky-map-wrap:fullscreen .sky-map, .sky-map-wrap.is-pseudo-fs .sky-map { height: 100%; border-radius: 0; border: none; }
.sky-map-wrap:fullscreen #sky-3d canvas, .sky-map-wrap.is-pseudo-fs #sky-3d canvas { border-radius: 0; }
/* The 3D controls are PERMANENT overlays inside .sky-map-wrap, so they work the
   same in normal and fullscreen with no relocation. In fullscreen we only nudge
   them slightly inward to clear the OS chrome / notch. */
.sky-map-wrap:fullscreen .m3-clusters, .sky-map-wrap.is-pseudo-fs .m3-clusters { top: max(0.6rem, env(safe-area-inset-top)); left: max(0.6rem, env(safe-area-inset-left)); }
.sky-map-wrap:fullscreen .time-machine.tm-overlay, .sky-map-wrap.is-pseudo-fs .time-machine.tm-overlay { bottom: max(0.9rem, env(safe-area-inset-bottom)); }

/* MOBILE-FIRST: on small screens the tab clusters start as compact ICONS (label
   hidden) and the search collapses to a 🔍 button until tapped. */
@media (max-width: 700px) {
  .m3-tab .m3-tab-tx { display: none; }              /* icon-only tabs */
  .m3-tab { min-width: 42px; padding: 0 0.55rem; justify-content: center; font-size: 1.05rem; }
  .m3-clusters { flex-direction: row; flex-wrap: wrap; max-width: calc(100vw - 1.2rem); }
  .m3-search { padding: 0; gap: 0; }
  .m3-search .m3-search-icon { display: inline-flex; }
  .m3-search.is-open .m3-search-icon { background: rgba(20,30,52,0.92); }
  .m3-search:not(.is-open) #ast-search, .m3-search:not(.is-open) #ast-search-status { display: none; }
  .time-machine.tm-overlay { left: 0.5rem; right: 0.5rem; transform: none; max-width: none; }
}
/* --- Sentinela: Console de Vigilância Planetária (impact-risk monitoring) --- */
.sentinel-panel {
  position: absolute; top: 0.6rem; right: 0.6rem; z-index: 19; width: min(330px, 84vw);
  max-height: 72%; display: flex; flex-direction: column; border-radius: 12px;
  background: rgba(8, 14, 28, 0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(90, 170, 230, 0.32); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  color: var(--text, #e8eefc); overflow: hidden;
}
.sentinel-panel.is-hidden { display: none; }
/* COLLAPSED (default): only the header bar shows — a compact "N vigiados · céu calmo"
   summary you tap to expand. Keeps the map clear, mobile-first. */
.sentinel-panel.is-collapsed { max-height: none; }
.sentinel-panel.is-collapsed .sentinel-scroll,
.sentinel-panel.is-collapsed .sentinel-nav { display: none; }
.sentinel-bar { flex: 0 0 auto; display: flex; align-items: center; gap: .5rem;
  padding: .5rem .65rem; border-bottom: 1px solid rgba(90, 170, 230, 0.22); font-size: .9rem; }
.sentinel-panel.is-collapsed .sentinel-bar { border-bottom: none; }
.sentinel-title { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; cursor: pointer;
  background: none; border: none; color: inherit; font: inherit; text-align: left; padding: 0; }
.sentinel-title strong { font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sentinel-title .sentinel-sum { font-size: .72rem; color: #9fb3d6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sentinel-chevron { transition: transform .2s; flex: 0 0 auto; }
.sentinel-panel:not(.is-collapsed) .sentinel-chevron { transform: rotate(180deg); }
/* the body scrolls; the bar (above) and the nav (below) stay fixed in the panel */
.sentinel-scroll { flex: 1 1 auto; overflow-y: auto; padding: .55rem .65rem; min-height: 0; }
.sentinel-nav { flex: 0 0 auto; display: flex; gap: .25rem; padding: .4rem .5rem;
  border-top: 1px solid rgba(90, 170, 230, 0.22); background: rgba(8, 14, 28, 0.6); }
.sentinel-nav .bd-btn { flex: 1; min-width: 0; padding: 0 .25rem; font-size: .72rem; min-height: 36px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sentinel-head { margin-bottom: .5rem; }
.sentinel-head strong { display: block; font-size: .9rem; }
.sentinel-head .micro { color: #9fb3d6; }
.sentinel-list { display: flex; flex-direction: column; gap: .3rem; }
.sentinel-row { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  gap: 0 .5rem; align-items: center; text-align: left; cursor: pointer; width: 100%;
  background: rgba(20, 30, 52, 0.6); border: 1px solid rgba(80, 120, 180, 0.2);
  border-radius: 8px; padding: .35rem .5rem; color: var(--text, #e8eefc); font: inherit; }
.sentinel-row:hover { background: rgba(30, 45, 75, 0.8); }
.sentinel-row.is-loading { opacity: 0.6; cursor: progress; }
.sentinel-row .t-chip { grid-row: 1 / span 2; }
.sentinel-row .s-name { font-size: .82rem; font-weight: 600; }
.sentinel-row .s-meta { grid-column: 2; color: #9fb3d6; }
.t-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 30px;
  height: 22px; border-radius: 6px; font: 700 .72rem system-ui, sans-serif; color: #07101f; padding: 0 .3rem; }
.t-chip.t-none { background: #2a3550; color: #9fb3d6; }
/* ludic loading inside the watch console */
.sentinel-loading { display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 1rem .5rem; text-align: center; }
.sentinel-loading .sentinel-spin { font-size: 1.8rem; animation: sentinelSpin 2.4s linear infinite; }
.sentinel-loading .micro { color: #bfe3ff; min-height: 2.2em; margin: 0; }
.sentinel-bartrack { width: min(200px, 80%); height: 5px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; }
.sentinel-bartrack .sentinel-bar { height: 100%; width: 40%; border-radius: 99px;
  background: linear-gradient(90deg, #6cf0ff, #a78bfa); animation: sentinelBar 1.4s ease-in-out infinite; }
@keyframes sentinelSpin { to { transform: rotate(360deg); } }
@keyframes sentinelBar { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
.sentinel-foot { margin-top: .55rem; padding-top: .45rem; border-top: 1px solid rgba(90, 170, 230, 0.18); }
.sentinel-tabs { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.sentinel-tabs .bd-btn { flex: 1; min-width: max-content; font-size: .74rem; }
.lesson-card { background: rgba(20, 30, 52, 0.55); border: 1px solid rgba(80, 120, 180, 0.22);
  border-radius: 9px; padding: .5rem .6rem; margin-bottom: .45rem; }
.lesson-card strong { font-size: .84rem; }
.lesson-card .micro { color: #c2d4ee; margin: .25rem 0 0; line-height: 1.35; }
.lesson-card .lesson-stat { font-size: .74rem; color: #9fe9ff; margin-top: .3rem; }
.lesson-card .lesson-take { color: #ffe9a8; }
@media (max-width: 700px) {
  /* MOBILE Sentinela layout — designed so it NEVER collides with the tool clusters,
     the search, or the time machine.
     • EXPANDED: a near-full-height sheet (its own surface; clusters/search are auto-
       closed by JS while it's open), leaving the time machine visible at the bottom.
     • COLLAPSED: a slim status bar docked just above the time machine ("N vigiados ·
       céu calmo") that expands upward — out of the top zone entirely. */
  .sentinel-panel { top: 0.6rem; bottom: 9.5rem; left: 0.5rem; right: 0.5rem; width: auto; max-height: none; }
  .sentinel-panel.is-collapsed {
    top: auto; bottom: 8.6rem; left: 0.5rem; right: 0.5rem; width: auto; max-height: none;
  }
  .sentinel-panel.is-collapsed .sentinel-bar { padding: .45rem .65rem; }
}
.sky-map .aladin-location, .sky-map .aladin-fov { font-size: 0.72rem; }
.map-legend { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.7rem; align-items: center; }
.map-legend .chip { cursor: default; }
/* comfortable touch targets on mobile (≥44px) for the interactive map controls */
@media (max-width: 879px) {
  .map-legend .map-survey, .map-survey .select-sm { min-height: 44px; }
  .map-survey { padding-top: 0.2rem; padding-bottom: 0.2rem; }
}
.lg-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 0.3rem; vertical-align: middle; }
.lg-ecliptic { background: #c4b5fd; border-radius: 2px; }
.lg-hotspot { background: #38bdf8; }
.lg-saved { background: #4ade80; }
.map-survey { gap: 0.4rem; }
#map-credit { margin: 0.5rem 0 0; }
.map-fallback { margin-top: 0.5rem; }

/* click-to-hunt action sheet */
.map-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 25;
  display: flex; justify-content: center; padding: 0 0.8rem calc(var(--sab) + 0.8rem);
  pointer-events: none;
}
.map-sheet-card {
  pointer-events: auto; width: 100%; max-width: 460px;
  background: rgba(21, 27, 46, 0.95); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; padding: 0.8rem 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  box-shadow: 0 18px 50px -20px rgba(0,0,0,0.8); animation: fadeUp 0.25s ease both;
}
.map-sheet-info { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.map-sheet-actions { display: flex; gap: 0.4rem; flex: 0 0 auto; }
.app-main:has([data-view-panel="map"].is-active) { position: relative; }

/* --- profile (footer card + modal) --- */
.avatar {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; color: #07101f; background: linear-gradient(135deg, #5b8cff, #a855f7); font-size: 0.95rem;
}
.avatar-lg { width: 52px; height: 52px; font-size: 1.4rem; }
.nav-profile { gap: 0.6rem; }
.profile-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.profile-txt strong { font-size: 0.9rem; }
.profile-hero { display: flex; align-items: center; gap: 0.85rem; margin: 0.5rem 0 1rem; }
.profile-hero .avatar-lg { box-shadow: 0 0 0 3px rgba(91, 140, 255, 0.25), 0 8px 24px -8px rgba(91, 140, 255, 0.5); }
.profile-hero-tx { min-width: 0; }
.profile-hero-name { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.profile-hero-name strong { font-size: 1.05rem; }
.profile-sec { border-top: 1px solid var(--surface-2); padding: 0.9rem 0; }
.profile-sec h4 { margin: 0 0 0.6rem; font-size: 0.95rem; }
.gami-row { display: flex; gap: 0.8rem; margin-bottom: 0.6rem; }
.gami-stat { flex: 1; background: var(--surface-2); border-radius: 10px; padding: 0.6rem; text-align: center; display: flex; flex-direction: column; gap: 0.15rem; }
.gami-num { font-size: 1.3rem; font-weight: 800; }
.gami-bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-bottom: 0.5rem; }
.gami-bar-fill { height: 100%; background: linear-gradient(90deg, #5b8cff, #a855f7); transition: width 0.4s ease; }
.plan-badge { font-weight: 800; font-size: 0.72rem; padding: 0.12rem 0.55rem; border-radius: 999px; background: var(--ok); color: #07101f; white-space: nowrap; }

/* collapsible profile sections — one topic per fold, current state on the summary */
.prof-acc { border-top: 1px solid var(--surface-2); }
.prof-acc summary {
  display: flex; align-items: center; gap: 0.55rem; cursor: pointer; list-style: none;
  padding: 0.85rem 0.15rem; font-weight: 700; font-size: 0.95rem; border-radius: 10px;
  -webkit-tap-highlight-color: transparent;
}
.prof-acc summary::-webkit-details-marker { display: none; }
.prof-acc summary:hover { background: rgba(91, 140, 255, 0.06); }
.prof-acc summary::after { content: "▾"; color: var(--muted); font-size: 0.8rem; transition: transform 0.18s ease; }
.prof-acc[open] summary::after { transform: rotate(180deg); }
.pa-ico { font-size: 1.05rem; }
.pa-tx { flex: 1; }
.pa-hint { font-size: 0.74rem; font-weight: 600; color: var(--muted); }
.prof-acc-body { padding: 0.15rem 0.15rem 0.95rem; }
.profile-foot { border-top: 1px solid var(--surface-2); padding-top: 0.9rem; margin-top: 0.1rem; }
.profile-foot .btn { width: 100%; }

/* soft danger: readable red text on transparent, filling on hover — for actions
   that are destructive-ish but shouldn't scream (logout, clear cache). The SOLID
   .btn.danger (red bg + white text) stays for confirm-dialog CTAs only. */
.btn-danger-soft {
  background: transparent; color: var(--danger); border: 1px solid rgba(255, 107, 107, 0.35);
  min-height: 38px; padding: 0.45rem 0.8rem;
}
.btn-danger-soft:hover { background: rgba(255, 107, 107, 0.12); border-color: var(--danger); }

/* accessibility settings (toggled from profile) */
.high-contrast { --muted: #c9d4ee; }
.high-contrast .micro.muted, .high-contrast .muted { color: #c9d4ee; }
.reduce-motion * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }

/* nav badge (count of saved objects) */
.nav-badge {
  background: var(--primary); color: #07101f; font-size: 0.66rem; font-weight: 800;
  border-radius: 999px; padding: 0.02rem 0.4rem; min-width: 16px; text-align: center;
}
@media (max-width: 879px) { .nav-badge { position: absolute; top: 4px; right: 22%; } .nav-item { position: relative; } }

/* --- Meus objetos (collection) --- */
.saved-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.chip {
  border: 1px solid var(--surface-2); background: var(--surface); color: var(--muted);
  border-radius: 999px; padding: 0.35rem 0.7rem; font-size: 0.82rem; cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; gap: 0.35rem;
}
.chip.is-active { background: var(--surface-2); color: var(--text); border-color: var(--primary); }
.chip-n { font-size: 0.7rem; font-weight: 800; background: rgba(255,255,255,0.08); border-radius: 999px; padding: 0 0.35rem; }

.saved-list { display: flex; flex-direction: column; gap: 0.7rem; }
.saved-item {
  display: flex; gap: 0.8rem; background: var(--surface); border: 1px solid var(--surface-2);
  border-radius: 14px; padding: 0.7rem; align-items: flex-start;
}
.saved-item .blink { width: 84px; height: 84px; flex: 0 0 auto; border-radius: 10px; }
.saved-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.saved-top { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.saved-label { font-size: 0.95rem; margin-right: auto; }
.status-pill { font-size: 0.7rem; font-weight: 700; padding: 0.1rem 0.5rem; border-radius: 999px; white-space: nowrap; }
/* origin badge: where the object came from (hunt vs analysis) */
.origin-badge { font-size: 0.68rem; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 999px; white-space: nowrap; }
.origin-hunt { background: rgba(91,140,255,0.18); color: #9db8ff; }
.origin-analysis { background: rgba(168,85,247,0.18); color: #d6b3ff; }
.status-triagem { background: var(--surface-2); color: var(--muted); }
.status-analisando { background: rgba(91,140,255,0.2); color: #bcd0ff; }
.status-revisao { background: rgba(251,191,36,0.2); color: #fcd34d; }
.status-submetido { background: rgba(74,222,128,0.2); color: #86efac; }
.status-arquivado { background: rgba(255,255,255,0.06); color: var(--muted); }
.saved-note {
  width: 100%; resize: vertical; min-height: 2.2rem; font: inherit; font-size: 0.85rem;
  border-radius: 8px; border: 1px solid var(--surface-2); background: var(--surface-2);
  color: var(--text); padding: 0.4rem 0.55rem;
}
.saved-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.saved-status-lbl { font-size: 0.78rem; color: var(--muted); display: inline-flex; align-items: center; gap: 0.35rem; }
.select-sm { font: inherit; font-size: 0.82rem; padding: 0.3rem 0.5rem; border-radius: 8px; border: 1px solid var(--surface-2); background: var(--surface-2); color: var(--text); }
.btn.danger { color: var(--danger); }
.disc-actions { display: flex; gap: 0.4rem; margin-top: 0.5rem; }
.disc-actions .btn { flex: 1; min-height: 32px; padding: 0.3rem 0.4rem; font-size: 0.78rem; }
.btn-save.is-saved { color: var(--ok); border-color: rgba(74,222,128,0.4); }

/* FAQ cards */
.faq-card { padding: 0; }
.faq-card > summary { list-style: none; cursor: pointer; padding: 1rem 1.1rem; font-size: 0.98rem; }
.faq-card > summary::-webkit-details-marker { display: none; }
.faq-card > summary::after { content: "+"; float: right; color: var(--muted); font-size: 1.2rem; line-height: 1; }
.faq-card[open] > summary::after { content: "−"; }
.faq-card > p { padding: 0 1.1rem 1rem; margin: 0; line-height: 1.55; }

/* ============================================================
   AUTH — immersive split with animated sky
   ============================================================ */
.auth-split {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr;
  background:
    radial-gradient(900px 500px at 110% -10%, rgba(168, 85, 247, 0.18), transparent 55%),
    radial-gradient(900px 600px at -10% 110%, rgba(91, 140, 255, 0.18), transparent 55%),
    var(--bg);
}
.auth-split > canvas.sky { z-index: 1; opacity: 0.85; }

/* flowing aurora behind everything */
.aurora { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; filter: blur(60px); }
.aurora-band {
  position: absolute; border-radius: 50%; opacity: 0.5; mix-blend-mode: screen;
  will-change: transform;
}
.aurora .a1 {
  width: 60vw; height: 60vw; left: -10vw; top: -20vw;
  background: radial-gradient(circle at 50% 50%, rgba(91, 140, 255, 0.9), transparent 60%);
  animation: aurora1 18s ease-in-out infinite alternate;
}
.aurora .a2 {
  width: 55vw; height: 55vw; right: -15vw; top: 10vh;
  background: radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.85), transparent 60%);
  animation: aurora2 22s ease-in-out infinite alternate;
}
.aurora .a3 {
  width: 50vw; height: 50vw; left: 20vw; bottom: -20vw;
  background: radial-gradient(circle at 50% 50%, rgba(56, 189, 248, 0.8), transparent 60%);
  animation: aurora3 26s ease-in-out infinite alternate;
}
@keyframes aurora1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(12vw, 14vh) scale(1.25); } }
@keyframes aurora2 { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(-14vw, 8vh) scale(0.85); } }
@keyframes aurora3 { from { transform: translate(0, 0) scale(0.9); } to { transform: translate(10vw, -12vh) scale(1.2); } }
@media (prefers-reduced-motion: reduce) { .aurora-band { animation: none; } }

/* left branding panel — hidden on small screens */
.auth-aside { display: none; }
@media (min-width: 880px) {
  .auth-split { grid-template-columns: 1.05fr 0.95fr; }
  .auth-aside {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: clamp(2rem, 5vw, 3.5rem);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
  }
}
.auth-brand { font-weight: 800; font-size: 1.15rem; color: var(--text); text-decoration: none; letter-spacing: 0.01em; }
.auth-aside-mid { max-width: 30rem; }
.auth-tagline { font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: 1.1; letter-spacing: -0.02em; font-weight: 800; margin: 0 0 1rem; }
.auth-sub { color: var(--muted); font-size: 1.05rem; line-height: 1.6; max-width: 26rem; }
.auth-aside-foot { font-size: 0.82rem; }

/* right card panel */
.auth-main {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100vh; min-height: 100dvh;
  padding: calc(var(--sat) + 1.2rem) 1.2rem calc(var(--sab) + 1.2rem);
}
.auth-back { position: absolute; top: calc(var(--sat) + 1rem); left: 1rem; }
.auth-card {
  width: 100%; max-width: 400px; margin: 0;
  background: rgba(21, 27, 46, 0.72);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.9);
  animation: authIn 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes authIn { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }
.auth-card-head { text-align: center; margin-bottom: 1.2rem; }
.auth-logo {
  display: inline-grid; place-items: center; width: 54px; height: 54px; margin-bottom: 0.6rem;
  font-size: 1.6rem; border-radius: 16px;
  background: linear-gradient(135deg, rgba(91,140,255,0.25), rgba(168,85,247,0.25));
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.auth-card-head h1 { font-size: 1.4rem; margin: 0 0 0.2rem; letter-spacing: -0.01em; }
.auth-fineprint { text-align: center; margin: 0.9rem 0 0; }
@media (prefers-reduced-motion: reduce) { .auth-card { animation: none; } }

/* ============================================================
   LANDING / MARKETING SPA — Apple-like
   ============================================================ */
.landing {
  --max: 1080px;
  display: block;
  width: 100%; max-width: 100vw;
  min-height: 100vh; min-height: 100dvh;
  scroll-behavior: smooth;
  overflow-x: hidden;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(91, 140, 255, 0.18), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(168, 85, 247, 0.14), transparent 55%),
    var(--bg);
}
html:has(#screen-landing:not(.is-hidden)) { scroll-behavior: smooth; }

.btn-lg { padding: 0.95rem 1.6rem; font-size: 1.02rem; border-radius: 999px; }
.btn-glass {
  background: rgba(255, 255, 255, 0.06); color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.16); backdrop-filter: blur(10px);
}
.btn-glass:active { background: rgba(255, 255, 255, 0.12); }
.btn-nav { background: var(--primary); color: #07101f; min-height: 38px; padding: 0.5rem 1.1rem; border-radius: 999px; font-size: 0.92rem; }

/* --- top nav --- */
.nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--sat) + 0.85rem) calc(var(--sar) + 1.25rem) 0.85rem calc(var(--sal) + 1.25rem);
  background: rgba(11, 16, 32, 0.6);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
/* brand logo image sits beside the wordmark, sized to the line */
.nav-brand, .auth-brand, .sidebar-brand, .landing-footer span:first-child, .brand {
  display: inline-flex; align-items: center; gap: 0.45rem;
}
.brand-logo { width: 1.4em; height: 1.4em; flex: 0 0 auto; display: block; }
.auth-brand .brand-logo { width: 1.6em; height: 1.6em; }
.sidebar-brand .brand-logo { width: 1.5em; height: 1.5em; }
/* collapsed sidebar: keep just the logo, centered */
.sidebar-collapsed .sidebar .sidebar-brand { gap: 0; }

.nav-brand { font-weight: 700; letter-spacing: 0.01em; text-decoration: none; color: var(--text); font-size: 1.02rem; }
.nav-links { display: flex; align-items: center; gap: 1.4rem; }
.nav-link { color: var(--muted); text-decoration: none; font-size: 0.92rem; transition: color 0.2s; display: none; }
.nav-link:hover { color: var(--text); }
@media (min-width: 720px) { .nav-link { display: inline; } }

/* --- animated sky canvas (shared hero + login) --- */
canvas.sky {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; display: block;
}

/* --- hero --- */
.hero {
  position: relative; overflow: hidden;
  margin: 0 auto;
  padding: clamp(3.5rem, 12vh, 8rem) calc(var(--sar) + 1.25rem) 3.5rem calc(var(--sal) + 1.25rem);
  text-align: center;
}
.hero > .eyebrow, .hero > .hero-title, .hero > .hero-sub,
.hero > .hero-cta, .hero > .hero-stats { position: relative; z-index: 1; }
.hero > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.hero-glow {
  position: absolute; inset: -20% -20% auto -20%; height: 420px; z-index: 0;
  background: radial-gradient(60% 100% at 50% 0%, rgba(91, 140, 255, 0.35), transparent 70%);
  filter: blur(20px);
}
.eyebrow {
  display: inline-block; font-size: clamp(0.66rem, 2.6vw, 0.8rem); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--primary); font-weight: 700; max-width: 100%;
  padding: 0.35rem 0.9rem; border-radius: 999px;
  border: 1px solid rgba(91, 140, 255, 0.3); background: rgba(91, 140, 255, 0.08);
}
.hero-title {
  font-size: clamp(2.1rem, 8vw, 5rem); line-height: 1.04; letter-spacing: -0.03em;
  font-weight: 800; margin: 1.4rem 0 0; max-width: 100%; overflow-wrap: break-word;
}
.grad-text {
  background: linear-gradient(120deg, #5b8cff 0%, #a855f7 55%, #38bdf8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub {
  max-width: 620px; margin: 1.4rem auto 0; color: var(--muted);
  font-size: clamp(1.02rem, 2.6vw, 1.25rem); line-height: 1.55;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; margin-top: 2.2rem; }
.hero-stats { display: flex; align-items: flex-start; justify-content: center; gap: 1.2rem; margin-top: 3rem; flex-wrap: wrap; }
.stat { display: flex; flex-direction: column; gap: 0.3rem; align-items: center; text-align: center; max-width: 120px; }
.stat-num { font-size: 1.6rem; line-height: 1; }
.stat-label { font-size: 0.78rem; color: var(--muted); line-height: 1.3; }
.stat-sep { display: none; }
@media (min-width: 560px) { .stat-sep { display: block; width: 1px; height: 44px; background: rgba(255, 255, 255, 0.12); align-self: center; } }

/* --- generic sections --- */
.section { max-width: var(--max); margin: 0 auto; padding: clamp(3rem, 9vh, 6rem) calc(var(--sar) + 1.25rem) clamp(3rem, 9vh, 6rem) calc(var(--sal) + 1.25rem); }
.section-alt { background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.02), transparent); max-width: none; }
.section-alt > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.section-title { font-size: clamp(1.8rem, 5vw, 2.8rem); letter-spacing: -0.02em; font-weight: 800; text-align: center; margin: 0; }
.section-lead { text-align: center; color: var(--muted); max-width: 560px; margin: 0.9rem auto 0; font-size: 1.05rem; }

/* --- features grid --- */
.grid { display: grid; gap: 1rem; margin-top: 2.6rem; grid-template-columns: 1fr; }
@media (min-width: 600px) { .grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .grid { grid-template-columns: 1fr 1fr 1fr; } }
.feature {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 18px; padding: 1.4rem;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.feature:hover { transform: translateY(-4px); border-color: rgba(91, 140, 255, 0.45); box-shadow: 0 18px 40px -24px rgba(91, 140, 255, 0.6); }
.feature-icon { font-size: 1.8rem; }
.feature h3 { margin: 0.7rem 0 0.4rem; font-size: 1.12rem; }
.feature p { margin: 0; color: var(--muted); line-height: 1.5; font-size: 0.95rem; }
.feature em { color: var(--text); font-style: normal; font-weight: 600; }

/* --- steps --- */
.steps { list-style: none; counter-reset: none; margin: 2.6rem auto 0; padding: 0; max-width: 720px; display: flex; flex-direction: column; gap: 1.1rem; }
.step { display: flex; gap: 1.1rem; align-items: flex-start; }
.step-n {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: 1.15rem;
  background: linear-gradient(135deg, var(--primary), #a855f7); color: #07101f;
}
.step h3 { margin: 0.25rem 0 0.3rem; font-size: 1.12rem; }
.step p { margin: 0; color: var(--muted); line-height: 1.5; }

/* --- ethics + final cta --- */
.ethics { max-width: 720px; margin: 0 auto; background: rgba(74, 222, 128, 0.06); border: 1px solid rgba(74, 222, 128, 0.2); border-radius: 18px; padding: 1.8rem; }
.ethics .section-title { text-align: left; font-size: clamp(1.5rem, 4vw, 2.1rem); }
.ethics-list { list-style: none; padding: 0; margin: 1.2rem 0 0; display: flex; flex-direction: column; gap: 0.7rem; }
.ethics-list li { color: var(--muted); line-height: 1.5; }
.ethics-list strong { color: var(--text); }
.final-cta { text-align: center; margin-top: 3.5rem; }
.final-cta h2 { font-size: clamp(1.6rem, 4.5vw, 2.4rem); letter-spacing: -0.02em; margin: 0 0 1.4rem; }

.landing-footer {
  display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
  padding: 2.5rem calc(var(--sar) + 1.25rem) calc(var(--sab) + 2.5rem) calc(var(--sal) + 1.25rem);
  border-top: 1px solid rgba(255, 255, 255, 0.06); text-align: center; font-size: 0.85rem;
}

/* --- scroll reveal --- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .landing, html { scroll-behavior: auto; }
  .feature:hover { transform: none; }
}

/* ============================================================
   HUNT — original discovery in real survey data
   ============================================================ */
.hunt-card {
  position: relative;
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(91, 140, 255, 0.12), transparent 60%),
    var(--surface);
  border-color: rgba(91, 140, 255, 0.3);
}
.pill-ai {
  position: absolute; top: 0.9rem; right: 0.9rem;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em;
  padding: 0.2rem 0.55rem; border-radius: 999px;
  background: linear-gradient(120deg, #5b8cff, #a855f7); color: #07101f;
}
.honesty {
  margin: 0.8rem 0 0.2rem; border: 1px solid rgba(251, 191, 36, 0.3);
  background: rgba(251, 191, 36, 0.07); border-radius: 12px; padding: 0.6rem 0.8rem;
}
.honesty > summary { cursor: pointer; font-size: 0.9rem; color: #fcd34d; list-style: none; }
.honesty > summary::-webkit-details-marker { display: none; }
.honesty > summary::before { content: "⚠️ "; }
.honesty-body { margin-top: 0.6rem; font-size: 0.88rem; color: #d7def0; line-height: 1.55; }
.honesty-body ul { margin: 0.5rem 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.35rem; }
.honesty-body strong { color: var(--text); }
.honesty-body a { color: var(--primary); }

.tabs-sm { margin: 0.9rem 0; }
.tabs-sm .tab { padding: 0.45rem; font-size: 0.9rem; }
.hunt-pane { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 0.9rem; }
.row-fields { display: flex; gap: 0.6rem; }
.row-fields .field { flex: 1; }
.select {
  width: 100%; padding: 0.7rem; font-size: 1rem; border-radius: 10px;
  border: 1px solid var(--surface-2); background: var(--surface-2); color: var(--text);
}
.btn-sm { min-height: 36px; padding: 0.4rem 0.8rem; font-size: 0.85rem; align-self: flex-start; }
.micro { font-size: 0.78rem; }
.hunt-card .btn-primary { width: 100%; }
.hunt-card #hunt-status { margin: 0.7rem 0 0.2rem; }

.hunt-results { display: flex; flex-direction: column; gap: 1.2rem; margin-bottom: 1rem; }
.disc-section h3 { margin: 0 0 0.2rem; font-size: 1.05rem; display: flex; align-items: center; gap: 0.5rem; }
.disc-section .count {
  font-size: 0.78rem; font-weight: 700; color: var(--primary);
  background: rgba(91, 140, 255, 0.12); border-radius: 999px; padding: 0.05rem 0.5rem;
}
.disc-grid {
  display: grid; gap: 0.7rem; margin-top: 0.7rem;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.disc {
  background: var(--surface); border: 1px solid var(--surface-2); border-radius: 14px;
  overflow: hidden; display: flex; flex-direction: column;
}
.disc.is-new { border-color: rgba(91, 140, 255, 0.45); box-shadow: 0 10px 30px -22px rgba(91, 140, 255, 0.8); }
.disc .blink {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
  background: #05080f; border-bottom: 1px solid var(--surface-2);
}
.disc .blink-missing {
  display: grid; place-items: center; color: var(--muted); font-size: 0.78rem;
}
.blink-caption {
  margin: 0; padding: 0.4rem 0.65rem; line-height: 1.4; color: var(--muted);
  background: rgba(251,191,36,0.06); border-bottom: 1px solid var(--surface-2);
}
.blink-caption strong { color: var(--text); }
.disc-meta { padding: 0.55rem 0.65rem; display: flex; flex-direction: column; gap: 0.25rem; }
.disc-row { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.disc-score { font-weight: 800; font-size: 1.05rem; }
.badge.ai { color: #07101f; background: linear-gradient(120deg, #5b8cff, #a855f7); font-weight: 700; }
.badge.new { color: #07101f; background: var(--primary); font-weight: 700; }
.disclaimer { color: var(--muted); border-top: 1px dashed var(--surface-2); padding-top: 0.7rem; }

/* --- credibility banner --- */
.cred-banner {
  background: var(--surface); border: 1px solid var(--surface-2); border-radius: 14px;
  padding: 0.9rem 1rem; margin-bottom: 0.3rem;
}
.cred-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 0.5rem; }
.cred-list { list-style: none; margin: 0 0 0.5rem; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.85rem; }
.cred-list li { padding-left: 0.2rem; }
.cred-list li.ok { color: #86efac; }
.cred-list li.warn { color: #fcd34d; }
.ok-tag { color: #07101f; background: var(--ok); padding: 0.05rem 0.4rem; border-radius: 999px; font-weight: 700; }
.warn-tag { color: #07101f; background: #fcd34d; padding: 0.05rem 0.4rem; border-radius: 999px; font-weight: 700; }
.badge.confirmed { color: #07101f; background: var(--ok); font-weight: 700; }
/* scan level segmented control */
.scan-level { margin: 0.3rem 0 0.6rem; }
.scan-level-lbl { font-size: 0.85rem; color: var(--muted); display: block; margin-bottom: 0.35rem; }
.seg { display: flex; gap: 0.3rem; background: var(--surface-2); border-radius: 12px; padding: 0.25rem; }
.seg-btn {
  flex: 1; border: none; background: transparent; color: var(--muted); cursor: pointer;
  font: inherit; font-size: 0.85rem; font-weight: 600; padding: 0.5rem 0.3rem; border-radius: 9px;
  display: flex; flex-direction: column; align-items: center; gap: 0.1rem; min-height: 44px; justify-content: center;
}
.seg-btn.is-active { background: var(--primary); color: #07101f; }
.seg-eta { font-size: 0.68rem; font-weight: 700; opacity: 0.8; }
.compute-ind { margin: 0.45rem 0 0; display: flex; flex-direction: column; gap: 0.15rem; }
.ci-line { line-height: 1.4; }

.confirm-opt { margin: 0.3rem 0 0.7rem; }
.btn-export { width: 100%; margin-top: 0.5rem; min-height: 34px; font-size: 0.82rem; padding: 0.35rem; }

/* --- track labels (hierarchy) --- */
.track-label {
  display: flex; align-items: center; gap: 0.7rem; margin: 0.4rem 0 0.7rem;
}
.track-label.track-b { margin-top: 1.6rem; }
.track-num {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: 0.95rem;
  background: var(--surface-2); color: var(--text);
}
.track-b .track-num { background: linear-gradient(135deg, #4ade80, #38bdf8); color: #07101f; }
.track-label strong { display: block; font-size: 0.98rem; }
.track-label .micro { display: block; }

/* --- collapsible sweep --- */
.scan-block { margin-top: 1.1rem; padding: 0; border-top: 1px dashed var(--surface-2); }
.scan-summary {
  list-style: none; cursor: pointer; padding: 0.9rem 0 0.2rem; display: flex;
  flex-direction: column; gap: 0.1rem;
}
.scan-summary::-webkit-details-marker { display: none; }
.scan-summary::after { content: "▾ mostrar"; font-size: 0.78rem; color: var(--muted); margin-top: 0.2rem; }
.scan-block[open] .scan-summary::after { content: "▴ ocultar"; }
.scan-body { padding-top: 0.6rem; }

/* sky-map thumbnail (lightweight SVG preview of a field/candidate position) */
.sky-thumb { display: block; border-radius: 6px; }
.sky-thumb-wrap { flex: 0 0 auto; line-height: 0; }
.field-map-row { display: flex; align-items: center; gap: 0.7rem; margin: 0.5rem 0; }
.field-map-cap { margin: 0; }
.cand-skymap { margin-top: 0.4rem; }
.cand-skymap .sky-thumb { width: 100%; height: auto; }
.saved-skymap { flex: 0 0 auto; }

/* advanced options: same collapsed pattern, sits above the multi-field scan */
.adv-block { margin-top: 0.9rem; padding: 0; }
.adv-summary {
  list-style: none; cursor: pointer; padding: 0.6rem 0 0.2rem; display: flex;
  flex-direction: column; gap: 0.1rem; user-select: none;
}
.adv-summary::-webkit-details-marker { display: none; }
.adv-summary > span:first-child { font-weight: 600; }
.adv-summary::after { content: "▾ mostrar"; font-size: 0.78rem; color: var(--muted); margin-top: 0.2rem; }
.adv-block[open] .adv-summary::after { content: "▴ ocultar"; }
.adv-body { padding-top: 0.5rem; display: flex; flex-direction: column; gap: 0.8rem; }
.adv-subsection { padding-top: 0.7rem; border-top: 1px dashed var(--surface-2); display: flex; flex-direction: column; gap: 0.6rem; }
.adv-subhead { font-weight: 600; display: flex; flex-direction: column; gap: 0.1rem; }

/* --- empty state --- */
.empty-state {
  text-align: center; padding: 2.2rem 1rem; color: var(--muted);
  border: 1px dashed var(--surface-2); border-radius: 16px;
}
.empty-icon { font-size: 2.2rem; display: block; margin-bottom: 0.5rem; opacity: 0.8; }
.empty-state p { margin: 0.2rem 0; }
.empty-cta {
  display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center;
  margin-top: 1rem;
}
.empty-cta .btn-sm { align-self: auto; }

/* --- "Hoje" daily hub cards --- */
.today-card {
  margin: 0 0 0.9rem; padding: 1rem 1.1rem; border-radius: 16px;
  background: var(--surface, #131a2c); border: 1px solid var(--surface-2, #1e2740);
}
.today-card.today-tip { background: transparent; border: 1px dashed var(--surface-2); font-size: 0.85rem; color: var(--muted); }
.today-loading { color: var(--muted); font-size: 0.9rem; }
.today-eyebrow { font: 700 0.72rem system-ui; letter-spacing: 0.03em; color: var(--primary, #6cf0ff); text-transform: uppercase; margin-bottom: 0.4rem; }
.today-h { display: flex; align-items: center; gap: 0.5rem; font-size: 1.15rem; }
.today-emoji { font-size: 1.5rem; }
.today-tag { margin: 0.4rem 0 0.8rem; color: var(--muted, #9fb3d6); font-size: 0.88rem; line-height: 1.45; }
.today-countdown { font: 800 1.8rem system-ui; color: #ffd27d; font-variant-numeric: tabular-nums; margin: 0.2rem 0; letter-spacing: 0.01em; }
.today-go { align-self: flex-start; }
/* Missões do Vigilante */
.miss-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }
.miss-item { display: flex; align-items: center; gap: 0.55rem; opacity: 0.85; }
.miss-item.done { opacity: 1; }
.miss-check { font-size: 1rem; }
.miss-ico { font-size: 1.1rem; width: 1.4rem; text-align: center; }
.miss-txt { display: flex; flex-direction: column; }
.miss-txt strong { font-size: 0.86rem; }
.miss-item.done .miss-txt strong { color: #6ee7a0; }
.miss-desc { font-size: 0.74rem; color: var(--muted, #9fb3d6); }


/* --- IASC upload --- */
.upload-card { position: relative; border-color: rgba(74, 222, 128, 0.3); }
.pill-grade {
  position: absolute; top: 0.9rem; right: 0.9rem;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em;
  padding: 0.2rem 0.55rem; border-radius: 999px;
  background: linear-gradient(120deg, #4ade80, #38bdf8); color: #07101f;
}
.dropzone {
  display: block; margin: 0.4rem 0 0.7rem; padding: 1.4rem 1rem; cursor: pointer;
  border: 2px dashed var(--surface-2); border-radius: 14px; background: var(--surface-2);
  text-align: center; transition: border-color 0.2s, background 0.2s;
}
.dropzone.is-over { border-color: var(--primary); background: rgba(91, 140, 255, 0.12); }
.dz-inner { display: flex; flex-direction: column; gap: 0.3rem; align-items: center; }
.dz-icon { font-size: 1.8rem; }
.dz-text { font-size: 0.95rem; }
.dz-text u { color: var(--primary); }
.iasc-files { list-style: none; margin: 0 0 0.7rem; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; }
.upload-card .btn-primary { width: 100%; }

/* --- guided step report: animated timeline stepper --- */
.steps-report { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; }
.step-row {
  position: relative; display: flex; gap: 0.8rem; align-items: flex-start;
  padding-bottom: 0.9rem; opacity: 0.5;
  transition: opacity 0.4s ease;
}
.step-row:last-child { padding-bottom: 0; }
.step-row.is-active, .step-row.is-done { opacity: 1; }

/* the connecting rail between dots; fills as the step completes */
.step-rail {
  position: absolute; left: 11px; top: 24px; bottom: -2px; width: 2px;
  background: var(--surface-2); overflow: hidden;
}
.step-row:last-child .step-rail { display: none; }
.step-rail::after {
  content: ""; position: absolute; inset: 0; transform: scaleY(0); transform-origin: top;
  background: linear-gradient(var(--ok), var(--primary)); transition: transform 0.5s ease 0.15s;
}
.step-row.is-done .step-rail::after { transform: scaleY(1); }

/* the status dot, holding three swappable visuals */
.step-dot {
  position: relative; flex: 0 0 auto; width: 24px; height: 24px;
  display: grid; place-items: center;
}
.dot-pending {
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid var(--surface-2); background: var(--surface);
  transition: transform 0.3s, border-color 0.3s;
}
.dot-spin {
  position: absolute; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid rgba(91,140,255,0.25); border-top-color: var(--primary);
  opacity: 0; animation: spin 0.7s linear infinite;
}
.dot-check { position: absolute; width: 24px; height: 24px; opacity: 0; transform: scale(0.5); transition: opacity 0.2s, transform 0.3s; }
.check-ring { stroke: var(--ok); stroke-width: 2; opacity: 0;
  stroke-dasharray: 70; stroke-dashoffset: 70; transition: stroke-dashoffset 0.4s ease, opacity 0.2s; }
.check-mark { stroke: var(--ok); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset 0.35s ease 0.25s; }

/* ACTIVE: pending dot fades, spinner shows */
.step-row.is-active .dot-pending { opacity: 0; transform: scale(0.4); }
.step-row.is-active .dot-spin { opacity: 1; }
.step-row.is-active .step-body strong { color: var(--text); }

/* DONE: spinner + pending gone, checkmark draws itself with a little pop */
.step-row.is-done .dot-pending,
.step-row.is-done .dot-spin { opacity: 0; }
.step-row.is-done .dot-check { opacity: 1; transform: scale(1); animation: checkPop 0.4s ease; }
.step-row.is-done .check-ring { opacity: 1; stroke-dashoffset: 0; }
.step-row.is-done .check-mark { stroke-dashoffset: 0; }

.step-body { padding-top: 0.05rem; line-height: 1.35; }
.step-body strong { font-weight: 600; }
.step-body .micro { display: block; margin-top: 0.1rem; }

/* collapsible "o que é isso?" explainer under each step */
.step-more { margin-top: 0.2rem; }
.step-more > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: 0.72rem; font-weight: 600; color: var(--primary);
  padding: 0.1rem 0; user-select: none;
}
.step-more > summary::-webkit-details-marker { display: none; }
.step-more > summary::before { content: "▸"; font-size: 0.7em; transition: transform 0.15s ease; }
.step-more[open] > summary::before { transform: rotate(90deg); }
.step-more > p { margin: 0.25rem 0 0; line-height: 1.45; }

@keyframes checkPop { 0% { transform: scale(0.5); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* warn / skip steps: don't show a green check — use a coloured dot instead */
.step-row[data-status="warn"].is-done .dot-check,
.step-row[data-status="skip"].is-done .dot-check { display: none; }
.step-row[data-status="warn"].is-done .dot-pending,
.step-row[data-status="skip"].is-done .dot-pending {
  opacity: 1; transform: scale(1); width: 13px; height: 13px;
}
.step-row[data-status="warn"].is-done .dot-pending { border-color: #fcd34d; background: rgba(251,191,36,0.25); }
.step-row[data-status="skip"].is-done { opacity: 0.6; }
.step-row[data-status="skip"].is-done .dot-pending { border-color: var(--muted); }
.step-row[data-status="warn"].is-done .step-rail::after { background: linear-gradient(#fcd34d, var(--primary)); }

.spinner.sm { width: 13px; height: 13px; border-width: 2px; }

.submit-banner {
  background: rgba(74, 222, 128, 0.12); border: 1px solid rgba(74, 222, 128, 0.4);
  border-radius: 14px; padding: 0.9rem 1rem; font-size: 0.9rem; color: #d6ffe6;
}

/* --- export modal --- */
.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; }
.modal.is-hidden { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(3, 6, 14, 0.7); backdrop-filter: blur(3px); }
.modal-card {
  position: relative; z-index: 1; width: min(94vw, 560px); max-height: 86vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--surface-2); border-radius: 16px;
  padding: 1.1rem; margin: calc(var(--sat) + 0.5rem) 0.5rem calc(var(--sab) + 0.5rem);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.modal-head h3 { margin: 0; font-size: 1.1rem; }
/* compact modal for confirm dialogs */
.modal-card-sm { width: min(92vw, 400px); }
.confirm-message { margin: 0.8rem 0 1.1rem; line-height: 1.5; color: var(--text); }
.confirm-actions { display: flex; gap: 0.6rem; justify-content: flex-end; }
.confirm-actions .btn { min-width: 96px; }
.btn.danger { background: var(--danger); color: #fff; border-color: transparent; }
.btn.danger:hover { filter: brightness(1.08); }
.export-warnings { font-size: 0.84rem; color: var(--muted); margin: 0.6rem 0; }
.export-warnings ul { margin: 0.3rem 0 0; padding-left: 1.1rem; }
.export-pre {
  background: #05080f; border: 1px solid var(--surface-2); border-radius: 10px;
  padding: 0.7rem; font-size: 0.74rem; line-height: 1.45; overflow-x: auto; white-space: pre;
  color: #cfe0ff; margin: 0.5rem 0;
}

.details-card { padding: 0; }
.details-card summary {
  list-style: none; cursor: pointer; padding: 1.1rem; display: flex; align-items: center;
}
.details-card summary::-webkit-details-marker { display: none; }
.details-card summary::after { content: "▾"; margin-left: auto; color: var(--muted); }
.details-card[open] summary::after { content: "▴"; }
.details-card > *:not(summary) { padding: 0 1.1rem; }
.details-card > *:last-child { padding-bottom: 1.1rem; }
h2.inline { display: inline; font-size: 1.05rem; margin: 0; }

/* --- button loading spinner --- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; }
.spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(7, 16, 31, 0.35); border-top-color: #07101f;
  animation: spin 0.7s linear infinite; display: inline-block;
}
/* A spinner is only shown while its button is loading. `hidden` alone loses to
   the class rule, so gate visibility on `.is-loading` and honour [hidden]. */
.spinner[hidden] { display: none; }
.btn:not(.is-loading) .spinner { display: none; }
.btn-glass .spinner, .btn-ghost .spinner { border-color: rgba(255,255,255,0.3); border-top-color: var(--text); }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- multi-field sweep --- */
.scan-block { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px dashed var(--surface-2); }
.scan-head { display: flex; flex-direction: column; gap: 0.1rem; margin-bottom: 0.7rem; font-size: 0.92rem; }
.range { width: 100%; accent-color: var(--primary); }
.btn-scan { width: 100%; }
.scan-progress { margin-top: 0.8rem; }
.scan-bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.scan-bar-fill {
  height: 100%; width: 0%; border-radius: 999px;
  background: linear-gradient(90deg, #5b8cff, #a855f7); transition: width 0.4s ease;
}
.scan-log {
  list-style: none; margin: 0.6rem 0 0; padding: 0; max-height: 150px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem;
}
.scan-log-row { display: flex; justify-content: space-between; padding: 0.15rem 0; }

/* --- skeletons --- */
.skeleton { pointer-events: none; }
.sk, .sk-line {
  background: linear-gradient(90deg, var(--surface-2) 25%, rgba(255,255,255,0.06) 37%, var(--surface-2) 63%);
  background-size: 400% 100%; animation: shimmer 1.4s ease infinite;
}
.blink.sk { aspect-ratio: 1/1; }
.sk-line { height: 12px; border-radius: 6px; margin: 4px 0; }
.sk-line.short { width: 55%; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* --- candidate enter animation --- */
.disc.enter { animation: discIn 0.45s ease both; }
@keyframes discIn { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }

/* --- toast --- */
#toast {
  position: fixed; left: 50%; bottom: calc(var(--sab) + 1rem); transform: translate(-50%, 1.5rem);
  z-index: 50; max-width: min(92vw, 420px);
  padding: 0.8rem 1.1rem; border-radius: 12px; font-size: 0.92rem; font-weight: 600;
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease;
  box-shadow: 0 18px 50px -20px rgba(0,0,0,0.7);
}
#toast.is-shown { opacity: 1; transform: translate(-50%, 0); }
.toast-error { background: #2a1620; color: #ffd7d7; border: 1px solid rgba(255,107,107,0.4); }
.toast-ok { background: #122a1c; color: #c6f6d5; border: 1px solid rgba(74,222,128,0.4); }

/* --- Turmas (escolas): teacher panel + student PIN/turma bits --- */
.form-inline-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.form-inline-row input {
  flex: 1; min-width: 200px; padding: 0.65rem 0.8rem; border-radius: 10px;
  border: 1px solid var(--border, #2a3550); background: var(--surface, #0d1424); color: var(--text, #e8eefc);
  font-size: 0.92rem;
}
.class-card { display: block; width: 100%; text-align: left; cursor: pointer; margin-top: 0.7rem; border: 1px solid var(--border, #2a3550); }
.class-card:hover { border-color: rgba(91, 140, 255, 0.55); }
.class-card-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.class-code-chip {
  font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: 0.04em;
  padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.8rem;
  background: rgba(91, 140, 255, 0.16); color: #9fc2ff; border: 1px solid rgba(91, 140, 255, 0.35);
}
.class-detail-card { text-align: center; }
.class-code-big {
  font-size: clamp(1.8rem, 7vw, 3rem); font-weight: 800; letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums; color: #9fc2ff; margin: 0.4rem 0;
  text-shadow: 0 0 24px rgba(91, 140, 255, 0.45);
}
.roster-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.roster-table th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted, #8fa2c4); padding: 0.4rem 0.5rem; }
.roster-table td { padding: 0.45rem 0.5rem; border-top: 1px solid rgba(120, 150, 200, 0.14); }
.team-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding: 0.35rem 0; border-top: 1px solid rgba(120, 150, 200, 0.1); }
.team-row:first-of-type { border-top: none; }
.team-pick { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.4rem; }
.nick-row { display: flex; gap: 0.45rem; }
.nick-row input { flex: 1; }
.nick-dice { font-size: 1.2rem; padding: 0 0.8rem; min-width: 52px; }
#form-student input[name="code"] { text-transform: uppercase; }
.team-rank { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.45rem; }
.team-rank-row {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.55rem;
  border-radius: 10px; border: 1px solid rgba(120, 150, 200, 0.14);
}
.team-rank-row.is-mine { border-color: rgba(91, 140, 255, 0.5); background: rgba(91, 140, 255, 0.08); }
.team-rank-pos { min-width: 1.6rem; text-align: center; }
.team-rank-name { flex: 1; }
.class-org-chip { font-size: 0.9rem; }
/* admin: issued license key display (long HMAC string — wrap + one-tap select) */
.key-box {
  display: flex; align-items: center; gap: 0.5rem; margin: 0.3rem 0;
  background: var(--surface-2); border-radius: 8px; padding: 0.45rem 0.6rem;
}
.key-box code { flex: 1; font-size: 0.7rem; word-break: break-all; user-select: all; }
/* school-plan activation stepper */
.school-step { display: flex; gap: 0.6rem; padding: 0.5rem 0; opacity: 0.55; }
.school-step.is-on { opacity: 1; }
.school-step.is-done { opacity: 0.85; }
.school-step + .school-step { border-top: 1px dashed rgba(120, 150, 200, 0.14); }
.step-num {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: 0.78rem; font-weight: 800; background: var(--surface-2); color: var(--muted);
}
.school-step.is-on .step-num { background: var(--primary); color: #07101f; }
.school-step.is-done .step-num { background: var(--ok); color: #07101f; }
.step-body { flex: 1; min-width: 0; }
.pin-card { text-align: center; }
.pin-big {
  font-size: clamp(2.2rem, 10vw, 3.4rem); font-weight: 800; letter-spacing: 0.35em;
  font-variant-numeric: tabular-nums; color: #ffd27d; margin: 0.6rem 0;
  text-shadow: 0 0 28px rgba(255, 210, 125, 0.4);
  user-select: all; /* one tap selects the whole PIN (easy to copy) */
}

/* "Nova versão disponível" update banner (PWA) — persists until the user taps */
.update-banner {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--sab) + 76px);  /* clears the mobile bottom nav */
  z-index: 60; display: flex; align-items: center; gap: 0.8rem;
  max-width: min(92vw, 440px); padding: 0.6rem 0.7rem 0.6rem 1.1rem;
  border-radius: 999px; font-size: 0.92rem; font-weight: 600; color: var(--text);
  background: rgba(21, 27, 46, 0.97); backdrop-filter: blur(12px);
  border: 1px solid rgba(91,140,255,0.4);
  box-shadow: 0 18px 50px -18px rgba(0,0,0,0.8);
  animation: fadeUp 0.3s ease both;
}
.update-banner.is-hidden { display: none; }
.update-banner .btn { white-space: nowrap; }
@media (min-width: 880px) { .update-banner { bottom: calc(var(--sab) + 1.2rem); } }

/* fade results in as they render */
.hunt-results > .disc-section,
.hunt-results > .cred-banner,
.hunt-results > .submit-banner { animation: fadeUp 0.4s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .spinner, .sk, .sk-line, .dot-spin { animation-duration: 0.01ms; }
  .disc.enter, .hunt-results > * { animation: none; }
  .scan-bar-fill, #toast, .step-row, .track-num,
  .step-rail::after, .dot-check, .check-ring, .check-mark, .dot-pending { transition: none; }
  .step-row.is-done .dot-check { animation: none; }
}

/* --- Calendário Cósmico (card no Hoje + view completa, colapsável) ------------- */
.today-card.today-event-day {
  border-color: var(--primary); background: linear-gradient(160deg, rgba(91,140,255,.14), var(--surface, #131a2c));
  box-shadow: 0 0 0 1px rgba(91,140,255,.25), 0 6px 22px rgba(91,140,255,.14);
}
.cal-cta-row { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .3rem; }
.cal-cta-row .btn { flex: 1 1 auto; }
.cal-oly-pill { margin: .3rem 0 .5rem; padding: .4rem .6rem; border-radius: 10px; font-size: .8rem;
  background: rgba(248,224,138,.14); border: 1px solid rgba(248,224,138,.34); color: #f8e08a; }

/* view header + segmented control */
.cal-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .2rem; }
.cal-seg { display: flex; gap: .4rem; margin: .2rem 0 1rem; }
.cal-seg-btn { flex: 1; min-height: 42px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--surface-2, #1e2740); background: var(--surface, #131a2c);
  color: var(--muted); font: 600 .85rem system-ui; }
.cal-seg-btn.is-active { background: var(--primary); color: #07101f; border-color: var(--primary); }

/* month accordion (sky) */
.cal-month { margin-bottom: .5rem; border-radius: 13px; overflow: hidden;
  border: 1px solid var(--surface-2, #1e2740); background: var(--surface, #131a2c); }
.cal-month.is-current { border-color: rgba(91,140,255,.45); scroll-margin-top: 8px; }
.cal-month-sum { display: flex; align-items: center; gap: .5rem; padding: .8rem .9rem; cursor: pointer;
  font: 700 .82rem system-ui; letter-spacing: .04em; text-transform: uppercase; color: var(--text);
  list-style: none; user-select: none; }
.cal-month-sum::-webkit-details-marker { display: none; }
.cal-month-sum::after { content: "▾"; margin-left: auto; color: var(--muted); font-size: .7rem;
  transition: transform .2s; }
.cal-month[open] > .cal-month-sum::after { transform: rotate(180deg); }
.cal-month.is-current .cal-month-sum { color: var(--primary); }
.cal-month-n { font: 700 .68rem system-ui; color: var(--muted); background: rgba(255,255,255,.06);
  border-radius: 20px; padding: .05rem .45rem; letter-spacing: 0; }
.cal-month-now { font: 700 .62rem system-ui; color: #07101f; background: var(--primary);
  border-radius: 5px; padding: .05rem .35rem; letter-spacing: 0; }
.cal-month-today { margin-left: -.2rem; }

/* one collapsed row per sky event */
.cal-row { border-top: 1px solid var(--surface-2, #1e2740); }
.cal-row.is-today { background: linear-gradient(160deg, rgba(91,140,255,.12), transparent); }
.cal-row-sum { display: flex; align-items: center; gap: .55rem; padding: .6rem .9rem; cursor: pointer;
  list-style: none; user-select: none; }
.cal-row-sum::-webkit-details-marker { display: none; }
.cal-row-emoji { font-size: 1.2rem; flex-shrink: 0; }
.cal-row-name { font: 600 .86rem system-ui; color: var(--text); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-row[open] .cal-row-name { white-space: normal; }
.cal-row-when { font: 700 .78rem system-ui; color: var(--primary); flex-shrink: 0;
  min-width: 1.8rem; text-align: right; }
.cal-today-badge { font-size: .66rem; background: var(--primary); color: #07101f; border-radius: 6px;
  padding: 0 .4rem; font-weight: 700; flex-shrink: 0; }
.cal-row-body { padding: 0 .9rem .8rem 2.65rem; }
.cal-row-desc { font-size: .82rem; line-height: 1.45; color: #cfe0ff; margin-bottom: .35rem; }
.cal-when-mov { display: inline-block; font-size: .74rem; font-weight: 600; color: #f8e08a;
  background: rgba(248,224,138,.14); border-radius: 7px; padding: .12rem .45rem; margin-bottom: .3rem; }
.cal-item-foot { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.cal-src { font-size: .7rem; color: #8a9cbd; }
.cal-mini-act, .cal-link { font-size: .76rem; font-weight: 600; color: var(--primary);
  background: none; border: none; cursor: pointer; padding: 0; text-decoration: none; }
.cal-link { color: #9fe9ff; }
.cal-disclaimer { margin-top: .9rem; line-height: 1.45; }

/* olympiads (status-first, collapsible) */
.cal-oly-warn { padding: .6rem .75rem; border-radius: 11px; margin-bottom: .7rem; font-size: .8rem; line-height: 1.45;
  background: rgba(248,224,138,.12); border: 1px solid rgba(248,224,138,.32); color: #f8e08a; }
.cal-oly-count { margin: 0 0 .8rem; font-size: .82rem; color: #7ee0a0; }
.cal-oly { margin-bottom: .5rem; border-radius: 13px; overflow: hidden;
  border: 1px solid var(--surface-2, #1e2740); background: var(--surface, #131a2c); }
.cal-oly.st-open { border-color: rgba(57,224,138,.4); }
.cal-oly.is-featured { border-color: rgba(108,240,255,.45); background: linear-gradient(160deg, rgba(108,240,255,.07), var(--surface)); }
.cal-oly.st-closed { opacity: .62; }
.cal-oly-sum { display: flex; align-items: center; gap: .55rem; padding: .7rem .85rem; cursor: pointer;
  list-style: none; user-select: none; }
.cal-oly-sum::-webkit-details-marker { display: none; }
.cal-oly-id { flex: 1; min-width: 0; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.cal-oly-sigla { font: 700 .9rem system-ui; color: var(--text); }
.cal-oly-name { font-size: .72rem; color: var(--muted); flex-basis: 100%; }
.cal-st { font: 700 .68rem system-ui; border-radius: 6px; padding: .12rem .4rem; flex-shrink: 0; white-space: nowrap; }
.cal-st.st-open { background: rgba(57,224,138,.18); color: #39e08a; }
.cal-st.st-soon { background: rgba(91,140,255,.18); color: #8fb4ff; }
.cal-st.st-closed { background: rgba(255,255,255,.06); color: #8a9cbd; }
.cal-st.st-roll { background: rgba(248,224,138,.14); color: #f8e08a; }
.cal-feat-tag { font-size: .66rem; background: rgba(108,240,255,.2); color: #6cf0ff; border-radius: 5px; padding: 0 .35rem; font-weight: 700; }
.cal-oly-meta { display: flex; flex-direction: column; gap: .2rem; margin: 0 0 .6rem; font-size: .8rem; color: #c2d4f2; }
.cal-free { color: #39e08a; font-weight: 600; }
.cal-oly-link { display: inline-flex; width: 100%; justify-content: center; }