/* ===========================================================================
   site.css — Design system unificado do Logen.
   ===========================================================================
   Compartilhado pelos 5 HTMLs (raiz · _deploy/index · _deploy/en · _deploy/es
   · _deploy/admin). Antes desse arquivo, esse mesmo CSS estava DUPLICADO inline
   em cada HTML — qualquer ajuste de design token tinha que pingar em 5 lugares.

   Estrutura (mesma ordem do <style> antigo):
     1. RESPONSIVE GRID TOKENS  — vars de coluna
     2. DESIGN TOKENS           — color, type, spacing, motion
     3. CSS RESET + BASE        — tipografia, signature blue lines
     4. HARD MOBILE GUARDRAILS  — @media + html.m fallback
     5. UTILITY CLASSES         — .shell, .btn, .card, .pill, etc.
     6. STICKY TOPBAR           — frosted glass on scroll
     7. NAV + FORM
     8. ANIMATIONS              — @keyframes
     9. THEME DECORATIONS       — banner, corners, rainbow, logo hat
    10. MOBILE FUNCTIONAL PASS  — html.m overrides
    11. DARK MODE               — [data-theme="dark"] tokens
    12. ADMIN SHELL (no fim)    — .admin-* classes usadas só pela página /admin/
                                  (carregadas pelos outros shells também, mas
                                  inertes porque os elementos não existem lá).
   =========================================================================== */
  /* ====== RESPONSIVE GRID TOKENS ====== */
  :root {
    --g2:       1fr 1fr;
    --g3:       repeat(3,1fr);
    --g4:       repeat(4,1fr);
    --g4m:      repeat(2,1fr);   /* 4-col mobile variant */
    --g-hero:   1.05fr .95fr;
    --g-svc:    1.05fr 1fr;
    --g-news:   1.4fr .9fr;
    --g-news3:  repeat(3,1fr);
    --g-freight: .95fr 1.1fr;
    --g-app:    1.1fr .9fr;
    --g-cta:    1.3fr 1fr;
    --g-footer: 1.4fr repeat(4,1fr);
    --g-trust:  auto 1fr;
    --g-svc-h:  1fr 1fr;
  --g-hero-gap:  56px;
  --g-svc-min:   460px;
  }
  @media (max-width: 980px) {
    :root {
      --g2:        1fr;
      --g3:        1fr;
      --g4:        repeat(2,1fr);
      --g4m:       repeat(2,1fr);
      --g-hero:    1fr;
      --g-svc:     1fr;
      --g-news:    1fr;
      --g-news3:   1fr;
      --g-freight: 1fr;
      --g-app:     1fr;
      --g-cta:     1fr;
      --g-footer:  1fr;
      --g-trust:   1fr;
      --g-svc-h:    1fr;
    --g-hero-gap: 32px;
    --g-svc-min:  auto;
  }
}

  /* ====== DESIGN TOKENS ======
     Single source of truth for color, type, spacing, radius, shadow, motion.
     Inline styles should reference these via var(--name) wherever possible. */
  :root {
    /* Brand color */
    --cyan: #06AEFE;          /* primary action / hero bg */
    --cyan-2: #00C2FF;        /* slightly punchier highlight */
    --cyan-deep: #0098E0;     /* hover / pressed */
    --royal: #1846E2;         /* secondary accent / logo blue */
    --royal-deep: #0F2FB8;
    /* Neutrals */
    --ink: #0A1532;           /* primary text on light bg */
    --ink-soft: #1F2A4D;      /* secondary text */
    --muted: #5A6A8A;         /* tertiary / labels / hints */
    --paper: #F4F8FC;         /* page bg / soft surface */
    --paper-2: #ECF3FA;       /* alt surface (slightly cooler) */
    --line: #E3ECF4;          /* dividers / form borders */
    --line-soft: #EEF3F8;     /* subtler dividers */
    --white: #FFFFFF;
    --surface: #FFFFFF;       /* elevated surface (cards, modals, inputs) — inverts in dark mode */
    --success: #1FAE6B;
    --warn: #F0A93B;
    --danger: #E53E3E;
    /* Type families */
    --display: 'Plus Jakarta Sans', system-ui, sans-serif;
    --body: 'Inter', system-ui, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, monospace;
    /* Spacing scale (multiples of 4) — use with padding/gap/margin */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 40px;
    --space-6: 64px;
    /* Radius scale */
    --radius-sm: 10px;
    --radius: 18px;
    --radius-lg: 28px;
    --radius-pill: 999px;
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(10,21,50,.04), 0 2px 6px rgba(10,21,50,.04);
    --shadow-md: 0 4px 14px rgba(10,21,50,.08), 0 18px 48px -22px rgba(10,21,50,.18);
    --shadow-lg: 0 30px 80px -30px rgba(10,21,50,.35);
    /* Motion — keep short & soft. Respects prefers-reduced-motion below. */
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --dur-fast: 0.15s;
    --dur: 0.25s;
    /* Keyboard focus ring (high-contrast halo around focused control) */
    --focus-ring: 0 0 0 3px rgba(6,174,254,.45);
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; background: var(--paper); color: var(--ink); font-family: var(--body); -webkit-font-smoothing: antialiased; }
  /* Replace the default grey tap-highlight on mobile (it flashes on every
     touch). We provide visual feedback via :active transform on .btn. */
  a, button, [role="button"], input, label { -webkit-tap-highlight-color: transparent; }
  /* overflow-x: clip prevents horizontal scroll WITHOUT creating a new scroll
     container (unlike overflow: hidden, which would give us a duplicate
     vertical scrollbar). The vertical scroll stays on the root html. */
  html, body { overflow-x: clip; max-width: 100vw; }

  /* ====== HARD MOBILE GUARDRAILS ======
     Triggered by both @media query AND a JS-added html.m class, so it works
     even if a browser misreports viewport width. */
  @media (max-width: 980px) {
    html, body { width: 100vw !important; max-width: 100vw !important; overflow-x: clip !important; }
    section, header.hero, footer, .hero-shell, .shell, .shell-wide, .nav {
      max-width: 100vw !important; box-sizing: border-box !important;
    }
    [class*="grid-"][style*="grid"] { grid-template-columns: 1fr !important; }
    p, h1, h2, h3, h4, span, div, a { overflow-wrap: anywhere; word-break: break-word; }
    img, svg, video, canvas, iframe { max-width: 100% !important; height: auto; }
  }

  html.m, html.m body { width: 100vw !important; max-width: 100vw !important; overflow-x: clip !important; }
  html.m * { max-width: 100vw; box-sizing: border-box; }
  html.m section, html.m header.hero, html.m footer,
  html.m .hero-shell, html.m .shell, html.m .shell-wide, html.m .nav {
    max-width: 100vw !important; padding-left: 20px !important; padding-right: 20px !important;
  }
  html.m .hero-shell { padding-top: 12px !important; padding-bottom: 56px !important; }
  html.m section, html.m section.tight { padding-top: 56px !important; padding-bottom: 56px !important; }
  html.m [class*="grid-"][style*="grid"] { grid-template-columns: 1fr !important; }
  html.m .grid-4-mobile-2 { grid-template-columns: repeat(2, 1fr) !important; }
  html.m p, html.m h1, html.m h2, html.m h3, html.m h4, html.m span, html.m div, html.m a {
    overflow-wrap: anywhere; word-break: break-word;
  }
  html.m img, html.m svg, html.m video, html.m canvas, html.m iframe { max-width: 100% !important; }
  /* kill motion stripes on mobile — they have explicit pixel widths and cause overflow */
  html.m .motion-strip { display: none !important; }
  /* nav: tighter padding on mobile, hamburger drawer carries the links */
  html.m .nav { padding: 12px 20px !important; flex-wrap: nowrap !important; gap: 8px !important; }
  html.m .nav .brand-mark img { height: 32px !important; width: auto !important; }
  html.m .nav-right { gap: 6px !important; flex-shrink: 0 !important; }
  /* hero typography down */
  html.m .hero h1 { font-size: clamp(40px, 11vw, 64px) !important; line-height: .96 !important; }
  html.m .hero p { font-size: 17px !important; }
  /* hero form: stack vertically so the dark button doesn't push form past viewport */
  html.m .hero form { flex-direction: column !important; align-items: stretch !important; padding: 10px !important; gap: 6px !important; }
  html.m .hero form input { width: 100% !important; padding: 14px 12px !important; }
  html.m .hero form button[type="submit"] { width: 100% !important; justify-content: center !important; min-height: 48px !important; }
  /* hide absolutely-positioned decorative elements in hero on mobile */
  html.m .hero [aria-hidden="true"][style*="position: absolute"] { display: none !important; }
  /* large section heads */
  html.m h2 { font-size: clamp(28px, 7.5vw, 42px) !important; }
  /* code preview becomes horizontally scrollable instead of pushing layout */
  html.m pre { overflow-x: auto !important; max-width: 100% !important; -webkit-overflow-scrolling: touch; }
  /* trust strip logos stack */
  html.m .trust-logos { gap: 18px 24px !important; justify-content: flex-start !important; flex-wrap: wrap !important; }
  /* utility bar / cookie bar hidden on small screens */
  html.m .util-bar { display: none !important; }
  /* coverage table simplified */
  html.m .coverage-row { grid-template-columns: 1.2fr auto !important; gap: 10px !important; }
  html.m .coverage-row span:nth-child(3) { display: none !important; }
  /* audience tabs */
  html.m .audience-tabs button { padding: 9px 16px !important; font-size: 12px !important; }
  /* CTAFinal dark box uses 80px 64px padding inline — too tight on mobile */
  html.m section [style*="padding: 80px 64px"],
  html.m section [style*="padding:80px 64px"] {
    padding: 36px 24px !important;
  }
  /* large floating cards/boxes never exceed viewport */
  html.m .card, html.m section > div > div { max-width: 100% !important; }
  /* HAMBURGER button */
  .nav-burger {
    display: none; width: 40px; height: 40px; border-radius: 12px;
    background: rgba(255,255,255,.12); color: white; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .nav-burger:hover { background: rgba(255,255,255,.18); }
  .nav-burger span { display: block; width: 18px; height: 2px; background: white; position: relative; }
  .nav-burger span::before, .nav-burger span::after {
    content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: white;
  }
  .nav-burger span::before { top: -6px; }
  .nav-burger span::after { top: 6px; }
  html.m .nav-burger { display: inline-flex; }
  /* mobile drawer */
  .mobile-menu-overlay {
    position: fixed; inset: 0; background: rgba(10,21,50,.6); z-index: 90;
    display: flex; flex-direction: column; padding: 80px 28px 28px;
    animation: fadeUp .25s ease both;
  }
  .mobile-menu-overlay .close {
    position: absolute; top: 18px; right: 18px;
    width: 40px; height: 40px; border-radius: 99; background: white; color: var(--ink);
    font-size: 20px;
  }
  .mobile-menu-overlay a {
    display: block; color: white; padding: 14px 0; font-family: var(--display);
    font-weight: 700; font-size: 22px; border-bottom: 1px solid rgba(255,255,255,.15);
  }

  /* ====== THEME DECORATIONS ====== */
  .theme-banner {
    position: fixed; top: 0; left: 0; right: 0; z-index: 80;
    padding: 8px 20px; color: white; text-align: center;
    font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: .02em;
    box-shadow: 0 2px 12px rgba(0,0,0,.18);
  }
  body.has-banner { padding-top: 36px; }
  .theme-corner {
    position: fixed; pointer-events: none; z-index: 70;
    font-size: 28px; line-height: 1;
    text-shadow: 0 2px 8px rgba(0,0,0,.25);
    animation: themeFloat 3.5s ease-in-out infinite alternate;
  }
  @keyframes themeFloat {
    0% { transform: translateY(0) rotate(-6deg); }
    100% { transform: translateY(-8px) rotate(6deg); }
  }
  .theme-rainbow {
    position: fixed; top: 36px; left: 0; right: 0; height: 4px; z-index: 79;
    background: linear-gradient(90deg, #FF0000, #FF7F00, #FFFF00, #00FF00, #0000FF, #4B0082, #9400D3);
    pointer-events: none;
  }
  /* Theme-driven hat overlay on the brand mark */
  .brand-mark { position: relative; }
  .brand-mark::before {
    content: ""; position: absolute;
    top: -16px; left: -6px;
    font-size: 22px; line-height: 1;
    pointer-events: none;
    transform: rotate(-22deg);
    text-shadow: 0 1px 3px rgba(0,0,0,.35);
    z-index: 2;
  }
  [data-skin="natal"]     .brand-mark::before { content: "🎅"; }
  [data-skin="pascoa"]    .brand-mark::before { content: "🐰"; top: -18px; left: -4px; }
  [data-skin="setembro"]  .brand-mark::before { content: "💛"; font-size: 16px; top: -8px; left: 0; transform: rotate(0deg); }
  [data-skin="orgulho"]   .brand-mark::before { content: "🌈"; font-size: 18px; top: -14px; left: -2px; }
  [data-skin="outubro"]   .brand-mark::before { content: "🎀"; font-size: 18px; top: -14px; left: -2px; transform: rotate(0deg); }
  [data-skin="pinkfloyd"] .brand-mark::before { content: "🔺"; font-size: 16px; top: -10px; left: 0; transform: rotate(0deg); }
  [data-skin="carnaval"]  .brand-mark::before { content: "🎭"; font-size: 20px; top: -15px; left: -4px; }

  /* ====== SCROLL REVEALS (A1) ======
     Elements with [data-reveal] start hidden and slide-up when they enter
     the viewport. App.jsx auto-applies the attribute to <section> and
     <footer>. For grid children that should appear in cascade, mark the
     parent grid with [data-reveal="stagger"]. */
  [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    will-change: opacity, transform;
  }
  [data-reveal].in {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .85s cubic-bezier(.22,.61,.36,1),
                transform .85s cubic-bezier(.22,.61,.36,1);
  }

  [data-reveal="stagger"] > * {
    opacity: 0;
    transform: translateY(18px);
  }
  [data-reveal="stagger"].in > * {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .55s cubic-bezier(.22,.61,.36,1),
                transform .55s cubic-bezier(.22,.61,.36,1);
  }
  [data-reveal="stagger"].in > *:nth-child(1) { transition-delay: 0s; }
  [data-reveal="stagger"].in > *:nth-child(2) { transition-delay: .07s; }
  [data-reveal="stagger"].in > *:nth-child(3) { transition-delay: .14s; }
  [data-reveal="stagger"].in > *:nth-child(4) { transition-delay: .21s; }
  [data-reveal="stagger"].in > *:nth-child(5) { transition-delay: .28s; }
  [data-reveal="stagger"].in > *:nth-child(6) { transition-delay: .35s; }
  [data-reveal="stagger"].in > *:nth-child(7) { transition-delay: .42s; }
  [data-reveal="stagger"].in > *:nth-child(8) { transition-delay: .49s; }

  /* A2 focus rules consolidated below in the A11Y block (lines ~605+). */

  /* ====== CARD HOVER REFINEMENTS (A3) ======
     Builds on the existing .card:hover lift. Adds: eyebrow color shift,
     subtle inner SVG glow, and a tiny arrow nudge for cards that contain
     a forward-arrow CTA. */
  .card .eyebrow { transition: color .35s ease; }
  .card:hover .eyebrow { color: var(--cyan); }
  .card svg { transition: transform .35s ease, filter .35s ease; }
  .card:hover svg { filter: drop-shadow(0 4px 10px rgba(6,174,254,.28)); }
  .card:hover .arrow { transform: translateX(4px); }

  /* ====== LIVE MAP — pulses + toasts (E1) ======
     On mobile (html.m): hide the live map entirely to keep the page short,
     consistent with how the original hero photo was hidden. The Hero text
     column already has the live counter pill, so users on mobile still see
     the "X pacotes em rota agora" signal.
     Also pauses motion when prefers-reduced-motion is set (handled below
     by the global reduced-motion block, but we explicitly freeze pulses
     and toasts here to avoid spinning timers offscreen). */
  html.m .live-map-card { display: none !important; }
  /* LiveMap mobile compact counter (Sessão 4) */
  .live-map-mobile { display: none; }
  html.m .live-map-mobile {
    display: flex; flex-direction: column;
    background: linear-gradient(135deg, #0F1A3D 0%, #1846E2 100%);
    border-radius: 20px; padding: 20px 24px;
    margin-top: 20px;
  }
  /* Tracking drawer: tighter padding on mobile so content breathes */
  html.m .tracking-drawer-panel { padding: 20px 18px !important; gap: 18px !important; }
  /* Origin/Destination landmark cards: stack vertically on mobile */
  html.m .landmark-cards-row { flex-direction: column !important; align-items: stretch !important; }
  html.m .landmark-arrow { display: none !important; }
  /* Admin hub panel: tighter padding on mobile */
  html.m .hub-panel-inner { padding: 18px 16px !important; gap: 16px !important; }

  /* Track input — visually distinct from the form container in all themes */
  .track-input-field { border: 1.5px solid rgba(10, 21, 50, 0.22) !important; }
  [data-theme="dark"] .track-input-field { border-color: rgba(255, 255, 255, 0.18) !important; }

  /* Scrollbar do modal HubLendario — visível em todos os browsers */
  .hub-panel-inner::-webkit-scrollbar { width: 10px; }
  .hub-panel-inner::-webkit-scrollbar-track {
    background: transparent;
    margin: 8px 0;
  }
  .hub-panel-inner::-webkit-scrollbar-thumb {
    background: var(--cyan);
    border-radius: 99px;
    border: 2px solid var(--surface);
  }
  .hub-panel-inner::-webkit-scrollbar-thumb:hover {
    background: var(--cyan-deep);
  }

  /* ── RSS News Ticker ── */
  .news-ticker-wrap {
    background: #04345D;
    overflow: hidden;
    height: 38px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,.08);
    position: relative;
    z-index: 10;
  }
  .news-ticker-label {
    flex-shrink: 0;
    padding: 0 14px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    color: #06AEFE;
    letter-spacing: .08em;
    border-right: 1px solid rgba(255,255,255,.15);
    white-space: nowrap;
    height: 100%;
    display: flex;
    align-items: center;
  }
  .news-ticker-track-wrap {
    flex: 1;
    overflow: hidden;
    height: 100%;
    display: flex;
    align-items: center;
  }
  .news-ticker-track {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    animation: tickerScroll 90s linear infinite;
    padding-left: 12px;
  }
  .news-ticker-wrap:hover .news-ticker-track {
    animation-play-state: paused;
  }
  @keyframes tickerScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  html.m .news-ticker-wrap { height: 32px; }
  html.m .news-ticker-label { font-size: 10px; padding: 0 10px; }
  html.m .news-ticker-track { font-size: 11px; }

  @keyframes livePulse {
    0%   { width: 0;     height: 0;     opacity: .9;  border-width: 2px; }
    70%  { width: 36px;  height: 36px;  opacity: .25; border-width: 1px; }
    100% { width: 52px;  height: 52px;  opacity: 0;   border-width: 1px; }
  }
  .live-pulse {
    box-sizing: border-box;
    width: 0; height: 0;
    border-radius: 99px;
    border: 2px solid #5BFFA9;
    transform: translate(-50%, -50%);
    animation: livePulse 1.3s cubic-bezier(.22,.61,.36,1) forwards;
    pointer-events: none;
    will-change: width, height, opacity;
  }
  @keyframes liveToast {
    0%   { opacity: 0; transform: translateY(6px) scale(.96); }
    12%  { opacity: 1; transform: translateY(0) scale(1); }
    88%  { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-4px) scale(.98); }
  }
  .live-toast {
    position: absolute;
    background: white;
    color: var(--ink);
    border-radius: 12px;
    padding: 8px 12px;
    box-shadow: 0 8px 24px -10px rgba(0,30,90,.5);
    font-family: var(--display); font-weight: 600; font-size: 12px;
    line-height: 1.25;
    white-space: nowrap;
    animation: liveToast 4.5s cubic-bezier(.22,.61,.36,1) forwards;
    pointer-events: none;
    z-index: 2;
  }
  .live-toast .arrow-tiny { color: var(--muted); margin: 0 4px; }
  .live-toast .from-to { display: flex; align-items: center; gap: 2px; }

  /* ====== FOOTER TICKER (B3) ====== */
  .footer-ticker {
    background: linear-gradient(90deg, rgba(6,174,254,.18), rgba(24,70,226,.10) 60%, transparent);
    border-top: 1px solid rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.06);
    padding: 14px 0;
    font-family: var(--mono);
    font-size: 13px;
    color: rgba(255,255,255,.78);
    letter-spacing: .01em;
    overflow: hidden;
  }
  .footer-ticker .shell { line-height: 1.5; }
  .footer-ticker strong { color: white; font-weight: 700; }
  .footer-ticker .pulse-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 99px;
    background: #5BFFA9;
    box-shadow: 0 0 0 4px rgba(91,255,169,.18);
    animation: pulse 1.6s ease infinite;
    flex-shrink: 0;
  }
  html.m .footer-ticker { font-size: 11px; padding: 12px 0; }

  /* ====== MOBILE FUNCTIONAL PASS ======
     The site is desktop-first. On mobile we keep a shorter, focused
     flow: Hero → Stats → Services → HowItWorks → AudienceToggle →
     Coverage → App → CTAFinal → Footer. Heavier/decorative sections
     (TrustStrip, NewsPortal, FreightCalc, Sectors, Testimonials) are
     hidden — desktop still shows them. */

  /* 1) Hide noise sections on mobile (data-screen-label hooks) */
  html.m [data-screen-label="TrustStrip"],
  html.m [data-screen-label="EmDestaque"],
  html.m [data-screen-label="Calc"],
  html.m [data-screen-label="Setores"],
  html.m [data-screen-label="Testimonials"] { display: none !important; }

  /* 2) Tighter vertical rhythm */
  html.m section, html.m section.tight { padding-top: 48px !important; padding-bottom: 48px !important; }
  html.m [data-screen-label="App"] { padding: 56px 0 !important; }
  html.m [data-screen-label="CTAFinal"] { padding: 40px 0 64px !important; }

  /* 3) Hero: subtler watermark, slimmer typography */
  html.m .hero::before { background-size: 64px 64px; opacity: .10; }
  html.m .hero h1 { font-size: clamp(36px, 10.5vw, 56px) !important; }
  html.m .hero h1 svg { width: 36px !important; height: 36px !important; }
  html.m .hero .pill { font-size: 12px !important; padding: 7px 12px !important; }
  html.m .hero-shell { padding-bottom: 32px !important; }
  html.m .hero-slogan { font-size: 19px !important; margin-top: 18px !important; }

  /* 4) Forms: iOS no-zoom + bigger tap targets */
  html.m input, html.m select, html.m textarea { font-size: 16px !important; }
  html.m .btn { min-height: 44px !important; }

  /* 5) Coverage section: map shrinks, table already trimmed elsewhere */
  html.m [data-screen-label="Cobertura"] svg { max-height: 360px !important; height: auto !important; }
  html.m [data-screen-label="Cobertura"] table { font-size: 13px !important; }

  /* 6) AppPromo: phone mockup contained */
  html.m [data-screen-label="App"] h2 { font-size: clamp(32px, 8vw, 44px) !important; }
  html.m [data-screen-label="App"] [class*="phone"],
  html.m [data-screen-label="App"] img { max-width: 88vw !important; }

  /* 7) AudienceToggle: stack tabs + simpler cards */
  html.m [data-screen-label="AudienceToggle"] h2 { font-size: clamp(28px, 7.5vw, 40px) !important; }

  /* 8) Services: simpler grid; hide the "Simular envio" button since #calc is hidden on mobile */
  html.m [data-screen-label="Servicos"] h2 { font-size: clamp(28px, 7.5vw, 40px) !important; }
  html.m [data-screen-label="Servicos"] a[href="#calc"] { display: none !important; }

  /* 9) HowItWorks: 2-col on mobile instead of 4, smaller card */
  html.m [data-screen-label="HowItWorks"] .grid-4 { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  html.m [data-screen-label="HowItWorks"] h2 { font-size: clamp(28px, 7.5vw, 40px) !important; }

  /* 10) Footer: stack columns, smaller type */
  html.m footer { padding: 32px 0 !important; }
  html.m footer [style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 24px !important; }

  /* 11) CTAFinal: prevent its inner dark box from cropping text */
  html.m [data-screen-label="CTAFinal"] h2 { font-size: clamp(36px, 9vw, 56px) !important; }

  /* 12) Make every clickable nav/social link tap-friendly */
  html.m a[href^="http"][aria-label] { min-width: 44px !important; min-height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }

  /* ====== REDUCED MOTION (D5) ======
     Respects the OS-level "Reduce motion" preference (System Settings on
     macOS/iOS, Accessibility on Windows/Android). Disables every animation,
     speeds transitions to ~instant, freezes decorative motion (stripes,
     floating theme corners, pulsing dots), and renders scroll-reveals as
     already-revealed so nothing requires scrolling to become visible. */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
    .motion-strip,
    .theme-corner { animation: none !important; }
    [data-reveal],
    [data-reveal="stagger"] > * {
      opacity: 1 !important;
      transform: none !important;
    }
  }
  a { color: inherit; text-decoration: none; }
  button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
  input, textarea, select { font-family: inherit; color: inherit; }
  ::selection { background: var(--cyan); color: white; }
  h1,h2,h3,h4 { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; color: var(--ink); margin: 0; line-height: 1.02; text-wrap: balance; }
  p { margin: 0; text-wrap: pretty; }

  /* ====== A11Y: keyboard focus + tap feedback ======
     Mouse users never see the ring (focus-visible drops it on pointer
     interactions). Keyboard users get a clear cyan halo on every focusable. */
  :focus { outline: none; }
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: 6px;
  }
  /* Subtle press feedback — feels native on touch + reassuring on click. */
  .btn:active, button:active { transform: translateY(1px) scale(.99); }
  /* Skip link — appears on Tab for keyboard users to jump past the nav. */
  .skip-link {
    position: absolute; top: -100px; left: 16px; z-index: 999;
    padding: 10px 18px; background: var(--ink); color: white;
    font-family: var(--display); font-weight: 700; font-size: 14px;
    border-radius: var(--radius-sm);
    transition: top var(--dur) var(--ease);
  }
  .skip-link:focus-visible { top: 16px; }

  /* SIGNATURE BLUE LINE — runs fixed down the full page */
  body::before {
    content: ""; position: fixed; left: 0; top: 0; bottom: 0;
    width: 4px; background: var(--royal);
    z-index: 60; pointer-events: none;
  }
  body::after {
    content: ""; position: fixed; right: 0; top: 0; bottom: 0;
    width: 4px; background: var(--royal);
    z-index: 60; pointer-events: none;
  }

  /* SECTION SIDE GUTTERS — slightly darker tint on the outer edges */
  section, header.hero, footer {
    position: relative;
    overflow-x: clip;
  }
  section::before, section::after,
  header.hero::before, header.hero::after,
  footer::before, footer::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 5.2%;
    pointer-events: none; z-index: 0;
    background: linear-gradient(90deg, rgba(0,0,0,.055), rgba(0,0,0,0));
  }
  section::before, header.hero::before, footer::before { left: 4px; }
  section::after, header.hero::after, footer::after {
    right: 4px;
    background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.055));
  }
  section > *, header.hero > *, footer > * { position: relative; z-index: 1; }

  /* SECTION DIVIDER — thin line */
  section + section, header.hero + section, section + footer {
    border-top: 1px solid rgba(0,0,0,.06);
  }

  /* utility */
  .shell { max-width: 1120px; margin: 0 auto; padding: 0 32px; position: relative; }
  .shell-wide { max-width: 1280px; margin: 0 auto; padding: 0 32px; position: relative; }
  .mono { font-family: var(--mono); font-feature-settings: "tnum"; letter-spacing: -0.02em; }
  /* WCAG AA fix (3.9/3.10): --cyan-deep (#0098E0) on --paper gives ~2.9:1 — fails.
     Switching eyebrows on light bg to --royal (#1846E2) → ~6.5:1 — passes.
     .on-dark keeps var(--cyan-2) which works on dark/cyan hero backgrounds. */
  .eyebrow { font-family: var(--mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--royal); font-weight: 500; }
  .eyebrow.on-dark { color: var(--cyan-2); }
  /* WCAG AA fix: white pill text on rgba(255,255,255,.16) over cyan = ~2.1:1.
     Text-shadow adds perceived separation; not a full fix but meaningful improvement. */
  .pill { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 999px; background: rgba(255,255,255,.16); color: white; font-size: 15px; font-weight: 600; font-family: var(--display); text-shadow: 0 1px 3px rgba(0,20,60,.22); }
  /* ── Sessão 3: mobile bottom tracking bar (item 3.1) ── */
  .mobile-track-bar {
    display: none; /* hidden on desktop */
  }
  html.m .mobile-track-bar {
    display: flex;
    position: fixed; bottom: 0; left: 0; right: 0;
    z-index: 50; /* below drawer(100) / hub-panel(110) */
    background: var(--ink);
    box-shadow: 0 -2px 16px rgba(0,0,0,.45);
    align-items: center;
    padding: 8px 12px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    gap: 8px;
  }
  html.m .mobile-track-bar input {
    flex: 1; border: 0; outline: 0;
    background: rgba(255,255,255,.10);
    border-radius: 10px; padding: 10px 12px;
    font-size: 14px; font-family: var(--mono);
    color: white; min-width: 0;
    caret-color: white;
  }
  html.m .mobile-track-bar input::placeholder { color: rgba(255,255,255,.45); }
  html.m .mobile-track-bar .btn {
    padding: 10px 14px; font-size: 13px; border-radius: 10px; white-space: nowrap; flex-shrink: 0;
  }
  /* Push footer up so the fixed bar doesn't cover content */
  html.m footer { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; }
  .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: var(--radius-pill); font-family: var(--display); font-weight: 700; font-size: 15px; transition: transform var(--dur-fast) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); white-space: nowrap; }
  .btn:hover { transform: translateY(-1px); }
  .btn-primary { background: var(--ink); color: white; }
  .btn-primary:hover { background: #1c2a55; box-shadow: 0 8px 22px -8px rgba(10,21,50,.45); }
  /* btn-accent: white on dark sections (CTAFinal). Stays white in both modes
     because CTAFinal uses var(--ink) which doesn't invert. */
  .btn-accent { background: white; color: var(--ink); }
  .btn-accent:hover { background: #F4F8FC; }
  .btn-track {
    background: linear-gradient(135deg, var(--ink) 0%, var(--royal-deep) 100%);
    color: white; box-shadow: 0 6px 18px -8px rgba(10,21,50,.5);
  }
  .btn-track:hover { background: linear-gradient(135deg, #1c2a55 0%, var(--royal) 100%); }
  .btn-royal { background: var(--royal); color: white; }
  .btn-royal:hover { background: var(--royal-deep); }
  .btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
  .btn-ghost:hover { background: var(--surface); border-color: var(--ink); }
  .btn-ghost-white { background: transparent; color: white; border: 1.5px solid rgba(255,255,255,.35); }
  .btn-ghost-white:hover { background: rgba(255,255,255,.1); border-color: white; }
  /* card */
  .card { background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--line); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
  .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: #DAE6F2; }
  /* sections */
  section { padding: 80px 0; position: relative; }
  section.tight { padding: 56px 0; }
  /* hero — solid cyan, kept compact to balance the page.
     `isolation: isolate` creates a local stacking context so the
     ::before watermark (with z-index: -1) stays behind hero contents
     without bleeding outside the hero. */
  .hero { background: var(--cyan); color: white; padding: 0; overflow: hidden; position: relative; isolation: isolate; }
  .hero-fade-out {
    position: absolute; left: 0; right: 0; bottom: -1px;
    height: 90px; pointer-events: none; z-index: 2;
    background: linear-gradient(180deg, transparent 0%, var(--paper) 100%);
  }
  /* Subtle repeating brand monogram across the hero, à la Louis Vuitton.
     The JPG icon has cyan bg matching --cyan, so soft-light blending
     dissolves the squares — only the white EN bars + arrow remain
     as a faint pattern. */
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/assets/logen-icon.jpg");
    background-repeat: repeat;
    background-size: 96px 96px;
    opacity: .14;
    mix-blend-mode: soft-light;
    pointer-events: none;
    z-index: -1;
  }
  .hero-shell { padding: 28px 32px 80px; max-width: 1280px; margin: 0 auto; }
  /* hero slogan tag — sits just below the "Sem código? / Vendedor?" line */
  .hero-slogan {
    margin-top: 28px;
    display: inline-block;
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(20px, 2.2vw, 28px);
    color: white;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 12px rgba(0,30,90,.35);
  }
  /* moving stripes */
  .motion-strip { position: absolute; pointer-events: none; }
  .motion-strip span { display: block; height: 14px; background: white; border-radius: 4px; opacity: .9; transform: skewX(-18deg); }
  .motion-strip span + span { margin-top: 10px; }
  /* ====== STICKY TOPBAR ======
     #topbar-sticky wraps UtilityBar + Nav and sits in the page's main scroll
     flow (outside header.hero) so it sticks for the entire page, not just the
     hero section.
     Z-index map: topbar(50) < mobile-overlay(90) < TrackingDrawer(100) <
                  HubLendarioPanel(110) < skip-link(999).
     iOS Safari: overflow-x:clip on ancestors does NOT break sticky (unlike
     overflow:hidden), so no fixed+padding-top fallback is needed. */
  #topbar-sticky {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--cyan);
    transition: background var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
  }
  /* Frosted glass when user scrolls > 8px — mantém a cor cyan do tema,
     apenas com leve translucidez para o efeito de profundidade. */
  #topbar-sticky.scrolled {
    background: color-mix(in srgb, var(--cyan) 92%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 12px rgba(0, 30, 90, .15);
  }
  /* Collapse util-bar smoothly on scroll */
  .util-bar {
    overflow: hidden;
    max-height: 60px;
    transition: max-height var(--dur) var(--ease);
  }
  #topbar-sticky.scrolled .util-bar { max-height: 0; }
  /* Tighten nav padding on scroll (logo 40px fixed, so only padding shrinks) */
  #topbar-sticky .nav { transition: padding var(--dur) var(--ease); }
  #topbar-sticky.scrolled .nav { padding-top: 10px; padding-bottom: 10px; }
  /* When a seasonal theme banner (position:fixed z-80) is shown, push the
     sticky topbar down so it isn't hidden under the banner. */
  body.has-banner #topbar-sticky { top: 36px; }

  /* nav */
  .nav { display: flex; align-items: center; justify-content: space-between; padding: 18px 32px; max-width: 1280px; margin: 0 auto; }
  .nav-right { display: flex; align-items: center; gap: 12px; }
  /* logo */
  .brand-mark { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; letter-spacing: -0.04em; }
  /* form */
  .field { display: flex; flex-direction: column; gap: 6px; }
  .field label { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
  /* color is inherited from body (line 600); flips correctly in dark mode */
  .field input, .field select { padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); font-size: 15px; outline: none; transition: border-color .2s ease, box-shadow .2s ease; }
  .field input:focus, .field select:focus { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(6,174,254,.15); }
  /* animations */
  @keyframes slideX { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
  @keyframes pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .4; } }
  @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes truckMove { 0% { transform: translateX(-20px); } 100% { transform: translateX(calc(100% - 40px)); } }
  @keyframes alertPulse { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(245,101,0,.0); } 50% { opacity: .82; box-shadow: 0 0 0 6px rgba(245,101,0,.10); } }
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes shimmer {
    from { background-position: -200% 0; }
    to   { background-position:  200% 0; }
  }
  .skeleton {
    background: linear-gradient(90deg, #EDF2F7 25%, #E2E8F0 50%, #EDF2F7 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s ease infinite;
    border-radius: 6px;
  }
  .fade-up { animation: fadeUp .6s ease both; }
  /* ── Sessão 2: submit spinner ── */
  .btn-spinner {
    display: inline-block; width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: white; border-radius: 50%;
    animation: spin .65s linear infinite;
    flex-shrink: 0;
  }
  /* ── Sessão 2: recent-codes chips ── */
  .track-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  .track-chip {
    font-family: var(--mono); font-size: 11px; font-weight: 500;
    padding: 4px 10px; border-radius: 99px;
    background: rgba(255,255,255,.18); color: rgba(255,255,255,.92);
    border: 1px solid rgba(255,255,255,.22);
    cursor: pointer; transition: background var(--dur-fast) var(--ease);
    white-space: nowrap;
  }
  .track-chip:hover { background: rgba(255,255,255,.28); }
  html.m .track-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }

  /* ====== RESPONSIVE (MOBILE) — FALLBACK LAYER ======
     Strategy: the page uses TWO layers of mobile rules.
       1. THIS @media block runs even when JS is disabled or hasn't mounted.
       2. The html.m class (added by JS in Nav, see useEffect there) carries
          stricter, !important-heavy rules that defeat React inline styles
          when the @media isn't enough (Chrome desktop-site mode, etc).
     If you're editing mobile rules, prefer html.m above for new ones. Keep
     this block as the no-JS safety net only. */
  @media (max-width: 980px) {
    .shell { padding: 0 20px; }
    section, section.tight { padding: 64px 0 !important; }
    .hero-shell { padding: 16px 20px 64px !important; }
    .nav { padding: 14px 20px; flex-wrap: wrap; gap: 12px; }
    body::before, body::after { width: 3px; }
    section::before, section::after,
    header.hero::before, header.hero::after,
    footer::before, footer::after { width: 4%; }

    .grid-2, .grid-3, .grid-4 {
      grid-template-columns: 1fr !important; gap: 32px !important;
    }
    .grid-4-mobile-2 { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
    .hero h1 { font-size: clamp(48px, 11vw, 72px) !important; }
    .util-bar { display: none !important; }
    .trust-logos { gap: 18px 24px !important; justify-content: flex-start !important; }
    .audience-tabs button { padding: 10px 18px !important; font-size: 13px !important; }
    .coverage-row { grid-template-columns: 1.2fr auto !important; gap: 10px !important; }
    .coverage-row span:nth-child(3) { display: none; }
  }

  /* ====== DARK MODE (Sessão 6) ======
     Activated by [data-theme="dark"] on <html> — toggled by the HubLendarioPanel
     Temas tab (☀️/🌙/🖥️) and persisted in localStorage "lgn-theme".
     A flash-prevention <script> in <head> applies the attribute synchronously
     before first paint.

     Token strategy:
       --surface: new token for elevated surfaces (cards, modals, form bg).
                  White in light mode, dark navy in dark mode.
       --paper / --paper-2: page-level background. Inverts to deep navy.
       --ink-soft / --muted / --line: invert for readability.
       --ink: intentionally NOT inverted — dark-bg sections (HowItWorks,
              AppPromo, CTAFinal, footer, buttons) use var(--ink) and must
              stay dark. Body text is overridden via body{color}.
       --cyan / --royal / etc.: brand colors — unchanged. ============================================================ */
  [data-theme="dark"] {
    --surface:   #1A2035;   /* card / modal / form bg */
    --paper:     #0F1421;   /* page background */
    --paper-2:   #141A2E;   /* alternate surface */
    --ink-soft:  #8A9BB8;   /* secondary text */
    --muted:     #607090;   /* tertiary / labels */
    --line:      #1E2A40;   /* borders / dividers */
    /* --ink intentionally left as #070D1F — keeps dark sections dark */
  }

  /* Body text: override so inherited text on --paper bg is readable */
  [data-theme="dark"] body { color: #E2EAF8; }
  [data-theme="dark"] h1,
  [data-theme="dark"] h2,
  [data-theme="dark"] h3,
  [data-theme="dark"] h4 { color: #E2EAF8; }

  /* Eyebrow on dark bg sections already uses .on-dark variant.
     Eyebrow on light sections needs to stay legible after paper inverts. */
  [data-theme="dark"] .eyebrow:not(.on-dark) { color: var(--cyan-2); }

  /* Most surfaces flip automatically because their CSS uses tokens
     (--surface, --paper, --line) — see .card, .field input, etc.
     The overrides below are for places where:
       (a) inline styles set hard-coded colors we can't refactor cleanly, or
       (b) the dark visual needs a different value than the token inversion.

     Inline `background: "white"` rules in JSX that we DID refactor to
     var(--surface): hero form, EmDestaque, TrustStrip, Stats, FreightCalc,
     Cobertura, Services card, Testimonials, audience tabs, services tab
     inactive, mode toggle, hub-panel-inner, tracking-drawer-panel,
     InfoModal, LandmarkCard, copy/edit/delete buttons, palette buttons,
     theme-mode buttons. */

  /* ── Text legibility on inverted surfaces ──
     --ink is intentionally NOT inverted (dark sections like HowItWorks,
     AppPromo, CTAFinal, Footer use var(--ink) as bg and need to stay dark).
     But any JSX that uses `color: var(--ink)` inline ends up dark-on-dark
     when the surface around it (paper, surface) IS inverted. Universal
     override: anywhere inline `color: var(--ink)` appears in dark mode,
     flip it to the light text color. */
  [data-theme="dark"] [style*="color: var(--ink)"] {
    color: #E2EAF8 !important;
  }

  /* Placeholder text — explicit color (browser default is too light on white).
     Light mode: dark navy at ~72% alpha (cinza escuro legível sobre branco).
     Dark mode: light text at 40% alpha. */
  input::placeholder,
  textarea::placeholder {
    color: rgba(10, 21, 50, 0.72);
  }

  /* Inputs / selects / textareas: text color + placeholder */
  [data-theme="dark"] input,
  [data-theme="dark"] select,
  [data-theme="dark"] textarea {
    color: #E2EAF8 !important;
  }
  [data-theme="dark"] input::placeholder,
  [data-theme="dark"] textarea::placeholder {
    color: rgba(226, 234, 248, 0.4) !important;
  }

  /* News cards: visually distinct from page bg (var(--paper)) in dark mode */
  [data-theme="dark"] .news-card { background: var(--paper-2) !important; }

  /* Ghost buttons: transparent reads poorly on dark page bg → give them a surface */
  [data-theme="dark"] .btn-ghost { background: var(--paper-2) !important; color: #E2EAF8 !important; }

  /* Yellow alert banners inside hub panel (hardcoded #fffbeb) */
  [data-theme="dark"] .hub-panel-inner div[style*="#fffbeb"] {
    background: rgba(246, 201, 14, .12) !important;
    border-color: rgba(246, 201, 14, .3) !important;
    color: #f6c90e !important;
  }

  /* Skeleton shimmer needs darker shades in dark mode */
  [data-theme="dark"] .skeleton {
    background: linear-gradient(90deg, var(--paper-2) 25%, #1E2540 50%, var(--paper-2) 75%);
    background-size: 200% 100%;
  }

  /* Scrollbars (Webkit) */
  [data-theme="dark"] ::-webkit-scrollbar { width: 6px; height: 6px; }
  [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--paper); }
  [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

  /* Mobile track bar / hamburger / HowItWorks / AppPromo / CTAFinal / Footer
     all use var(--ink) bg, which intentionally stays dark — no override needed. */

  /* ── Acessibilidade: prefers-reduced-motion ─────────────────────────────
     Honra a preferência do SO/navegador de reduzir movimento. Desliga as
     animações (pulse de hubs, live-pulse de entregas, fadeUp dos drawers,
     toasts flutuantes, banners sazonais) e quase-zera transitions. Mantém
     opacidade/visibilidade finais para não ocultar conteúdo. WCAG 2.1 AA. */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }
    .live-pulse, .live-toast, .motion-strip span,
    .theme-corner, .theme-rainbow { animation: none !important; }
    [data-reveal] { opacity: 1 !important; transform: none !important; }
  }
  /* ── Layout específico da página /admin/ (G2, 23/05) ─────────────────── */
  body { background: var(--paper); color: var(--ink); font-family: var(--body); margin: 0; }

  .admin-shell {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr;
  }

  .admin-topbar {
    display: flex; align-items: center; gap: 18px;
    padding: 14px 24px;
    background: var(--surface);
    border-bottom: 1.5px solid var(--line);
    box-shadow: 0 2px 8px -4px rgba(0,30,90,.08);
    position: sticky; top: 0; z-index: 10;
  }
  .admin-brand {
    display: inline-flex; align-items: center;
    text-decoration: none;
    color: var(--cyan-deep);
    font-family: var(--display); font-weight: 800; letter-spacing: -.02em;
    font-size: 18px;
    padding: 6px 12px; border-radius: 8px;
    transition: background .15s;
  }
  .admin-brand:hover { background: var(--paper); }
  .admin-brand-mark { line-height: 1; }
  .admin-topbar-title { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
  .admin-pill {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 4px 11px;
    background: var(--paper); border-radius: 999px;
    font-family: var(--mono); font-size: 10px; font-weight: 700;
    color: var(--ink-soft); letter-spacing: .08em;
  }
  .admin-pill-dot {
    width: 6px; height: 6px; border-radius: 99px;
    background: var(--cyan);
    box-shadow: 0 0 0 3px rgba(6,174,254,.18);
    animation: pulse 1.6s ease infinite;
  }
  .admin-topbar-h {
    font-family: var(--display); font-weight: 800; font-size: 16px;
    color: var(--ink); letter-spacing: -.01em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .admin-topbar-actions { display: flex; gap: 8px; }
  .admin-btn-ghost {
    padding: 8px 14px; border-radius: 99px;
    background: transparent; color: var(--ink-soft);
    border: 1.5px solid var(--line); cursor: pointer;
    font-family: var(--display); font-weight: 700; font-size: 12px;
    transition: all .15s;
  }
  .admin-btn-ghost:hover {
    background: var(--paper); color: var(--ink);
    border-color: var(--ink-soft);
  }

  .admin-body {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 0;
    min-height: 0;
  }

  .admin-sidebar {
    background: var(--surface);
    border-right: 1.5px solid var(--line);
    padding: 18px 12px;
    display: flex; flex-direction: column; gap: 4px;
    position: sticky; top: 64px; align-self: start;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
  }
  .admin-side-btn {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 10px;
    background: transparent; border: 0; cursor: pointer;
    font-family: var(--display); font-weight: 600; font-size: 14px;
    color: var(--ink-soft);
    text-align: left;
    transition: all .15s;
  }
  .admin-side-btn:hover { background: var(--paper); color: var(--ink); }
  .admin-side-btn.is-active {
    background: var(--paper);
    color: var(--cyan-deep);
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--cyan);
  }
  .admin-side-icon { font-size: 18px; flex-shrink: 0; line-height: 1; }
  .admin-side-sep {
    border: 0; border-top: 1px solid var(--line);
    margin: 12px 6px; height: 0;
  }
  .admin-side-back {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 12px; border-radius: 10px;
    color: var(--muted); font-family: var(--display); font-weight: 600;
    font-size: 12px; text-decoration: none;
    transition: all .15s;
  }
  .admin-side-back:hover { background: var(--paper); color: var(--ink-soft); }

  .admin-main {
    padding: 28px 32px;
    max-width: 720px;
    width: 100%;
    margin: 0 auto;
    display: flex; flex-direction: column; gap: 16px;
  }

  /* Mobile (≤ 760px): sidebar vira topo horizontal scrollável */
  @media (max-width: 760px) {
    .admin-body { grid-template-columns: 1fr; }
    .admin-sidebar {
      flex-direction: row;
      border-right: 0;
      border-bottom: 1.5px solid var(--line);
      padding: 8px 12px;
      overflow-x: auto;
      position: sticky; top: 64px; max-height: none;
      gap: 6px;
    }
    .admin-side-btn { white-space: nowrap; flex-shrink: 0; }
    .admin-side-sep, .admin-side-back { display: none; }
    .admin-main { padding: 20px 16px; }
    .admin-topbar { padding: 12px 16px; gap: 10px; }
    .admin-topbar-h { display: none; }
    .admin-btn-ghost { font-size: 11px; padding: 7px 11px; }
  }