/* ============================================================================
   BacVision — Design System (CSS3 nativo, sem Tailwind)
   Organização por cascade layers: reset → tokens → base → utils → components
   Recursos modernos usados: @layer, nesting nativo, container queries,
   color-mix(), logical properties, :has(), clamp(). Baseline widely available.
   ========================================================================= */

@layer reset, tokens, base, utils, components;

/* ============================ TOKENS ==================================== */
@layer tokens {
  :root {
    /* Marca / semânticas (fixas) */
    --primary:    #ff2600;
    --secondary:  #37b5ff;
    --tertiary:   #ffd700;
    --on-primary: #fff;   /* texto/ícone sobre o primary */
    --background: #0b0d12;
    --card:       #12151c;
    --border:     #232937;

    /* Resultados Bac Bo */
    --color-b: #ef4444;  /* Banca  */
    --color-p: #3b82f6;  /* Jugador */
    --color-t: #ffa60d;  /* Empate */

    /* Acento (usado por estados "ao vivo") — default = primary */
    --accent: var(--primary);

    /* Superfícies derivadas */
    --surface-1: color-mix(in srgb, #fff 2%, transparent);
    --surface-2: color-mix(in srgb, #fff 4%, transparent);
    --surface-3: color-mix(in srgb, #000 25%, transparent);
    --border-soft: color-mix(in srgb, #fff 6%, transparent);

    /* Texto (escala de opacidade sobre branco) */
    --text:    #fff;
    --text-90: color-mix(in srgb, #fff 90%, transparent);
    --text-70: color-mix(in srgb, #fff 70%, transparent);
    --text-55: color-mix(in srgb, #fff 55%, transparent);
    --text-45: color-mix(in srgb, #fff 45%, transparent);
    --text-35: color-mix(in srgb, #fff 35%, transparent);

    /* Raios */
    --r-sm: 8px;  --r-md: 11px; --r-lg: 14px; --r-xl: 16px; --r-2xl: 18px;
    --r-full: 9999px;

    /* Espaçamento base */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 40px;

    /* Tipografia */
    --font: 'Poppins', system-ui, sans-serif;
    --num: tabular-nums;

    /* Sombras */
    --shadow-card: 0 14px 30px -16px rgba(0,0,0,.5);
    --ring-focus: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);

    /* Transições */
    --ease: cubic-bezier(.2,.8,.2,1);
    --ease-back: cubic-bezier(.34,1.56,.64,1);
  }

  /* ---- Tema CLARO: sobrescreve só os tokens de cor. As cores de marca
     (primary/secondary/color-p/b/t) ficam; muda o fundo, superfícies e a
     escala de texto (agora derivada de preto sobre fundo claro). ---------- */
  :root[data-theme="light"] {
    /* claro NEUTRO — não branco puro (menos ofuscante, texto não some) */
    --background: #eceef4;   /* cinza-azulado claro */
    --card:       #f7f8fc;   /* cartão levemente acima do fundo, não #fff */
    --border:     #d3d8e4;

    /* superfícies: véus de preto (contraste real sobre o card claro) */
    --surface-1: color-mix(in srgb, #000 4%, transparent);
    --surface-2: color-mix(in srgb, #000 6%, transparent);
    --surface-3: color-mix(in srgb, #000 8%, transparent);
    --border-soft: color-mix(in srgb, #000 10%, transparent);

    /* texto: sobre um cinza-escuro (#1b2130) e opacidades ALTAS — nada some.
       Os níveis "fracos" no light precisam de mais tinta que no dark. */
    --text:    #1b2130;
    --text-90: color-mix(in srgb, #1b2130 92%, transparent);
    --text-70: color-mix(in srgb, #1b2130 82%, transparent);
    --text-55: color-mix(in srgb, #1b2130 70%, transparent);
    --text-45: color-mix(in srgb, #1b2130 62%, transparent);
    --text-35: color-mix(in srgb, #1b2130 52%, transparent);

    --shadow-card: 0 14px 30px -18px rgba(20,30,60,.18);
    color-scheme: light;
  }
}

/* ============================ RESET ==================================== */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  html { scrollbar-width: none; }

  body {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--background);
    color: var(--text);
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden; /* nada estoura a viewport na horizontal */
  }
  body::-webkit-scrollbar { display: none; }

  a   { color: inherit; text-decoration: none; }
  img { max-width: 100%; height: auto; display: block; }
  button { font: inherit; color: inherit; }
  [hidden] { display: none !important; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
    }
  }
}

/* ============================ BASE ===================================== */
@layer base {
  /* App-shell: a página NÃO rola; quem rola é cada .view-layer dentro do
     #spa-main. Header e host são o esqueleto fixo; o conteúdo desliza/rola
     dentro da área de view. Isso permite o slide lateral entre abas sem que o
     footer "pule" e sem overlap do header. */
  html, body { block-size: 100%; overflow: hidden; }

  .app-root {
    display: flex; flex-direction: column;
    block-size: 100dvh; inline-size: 100%;
  }
  #spa-main {
    position: relative; flex: 1; min-block-size: 0;
    inline-size: 100%; overflow: hidden;
  }
  /* cada camada de view rola por dentro (scroll do app, não do documento).
     scrollbar oculta em todas as abas (mantém o scroll, some a barra). */
  .view-layer {
    position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    display: flex; flex-direction: column;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .view-layer::-webkit-scrollbar { width: 0; height: 0; display: none; }
  /* keep-alive: camadas inativas ficam no DOM porém ocultas (display:flex
     sobreporia o atributo [hidden], então forçamos). */
  .view-layer[hidden] { display: none; }
  /* wrapper interno centraliza e limita a largura do conteúdo. */
  .view-inner { inline-size: 100%; max-inline-size: 1440px; margin-inline: auto; min-inline-size: 0; flex: 1; display: flex; flex-direction: column; }
  #spa-main.is-loading { opacity: .4; }

  /* Splash de boot */
  .splash {
    position: fixed; inset: 0; z-index: 100;
    display: flex; align-items: center; justify-content: center;
    background: var(--background);
    transition: opacity .4s ease, visibility .4s ease;
  }
  .splash.hide { opacity: 0; visibility: hidden; pointer-events: none; }
  .splash-spin {
    inline-size: 38px; block-size: 38px; border-radius: 50%;
    border: 3px solid var(--surface-2); border-top-color: var(--primary);
    animation: bv-spin .8s linear infinite;
  }
  @keyframes bv-spin { to { transform: rotate(360deg); } }

  /* Scroll containers (esconde barra, gestos táteis).
     touch-action mantém o eixo do container MAS permite pan vertical: assim
     rolar a página por cima de um card horizontal não "sequestra" o gesto.
     overscroll-behavior contém o scroll no container sem encadear na página. */
  .px-scroll { scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .px-scroll::-webkit-scrollbar { display: none; }
  /* pan-x pan-y: o gesto vertical (rolar a página) continua livre por cima do
     scroller horizontal. padding-inline dá "respiro" nas beiradas para o dedo
     não prender no scroll lateral logo na borda da tela. */
  .px-scroll-x { touch-action: pan-x pan-y; overscroll-behavior-x: contain; scroll-padding-inline: 12px; padding-inline: 2px; }
  .px-scroll-y { touch-action: pan-y; overscroll-behavior-y: contain; scroll-padding-block: 8px; }
  .no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
  .no-scrollbar::-webkit-scrollbar { display: none; }
}

/* ============================ UTILS ==================================== */
@layer utils {
  /* Layout */
  .flex   { display: flex; }
  .iflex  { display: inline-flex; }
  .grid   { display: grid; }
  .block  { display: block; }
  .hidden { display: none; }
  .col    { flex-direction: column; }
  .wrap   { flex-wrap: wrap; }
  .items-center  { align-items: center; }
  .items-start   { align-items: flex-start; }
  .items-stretch { align-items: stretch; }
  .justify-center  { justify-content: center; }
  .justify-between { justify-content: space-between; }
  .flex-1 { flex: 1; }
  .grow   { flex-grow: 1; }
  .shrink-0 { flex-shrink: 0; }
  .min-w-0 { min-width: 0; }
  .relative { position: relative; }
  .w-full { width: 100%; }
  .mx-auto { margin-inline: auto; }
  .text-center { text-align: center; }
  .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nowrap { white-space: nowrap; }
  .tnum { font-variant-numeric: var(--num); }
  .uppercase { text-transform: uppercase; }

  /* Número de destaque — refinado: peso menor, tracking negativo, tabular.
     Antes era 22px/900 (pesado e grande demais no mobile). */
  .stat-num {
    font-variant-numeric: var(--num);
    font-size: clamp(16px, 3.5vw, 19px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--text);
  }

  /* Gaps */
  .gap-1 { gap: var(--sp-1); }  .gap-2 { gap: var(--sp-2); }
  .gap-3 { gap: var(--sp-3); }  .gap-4 { gap: var(--sp-4); }
  .gap-5 { gap: var(--sp-5); }  .gap-6 { gap: var(--sp-6); }

  /* Grid presets */
  .grid-1 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-auto-sm { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

  /* Eyebrow / rótulo de seção */
  .eyebrow {
    font-size: clamp(8px, .5vw + 6px, 9px);
    font-weight: 800; text-transform: uppercase;
    letter-spacing: .18em; color: var(--text-45);
  }
  .label-xs {
    font-size: clamp(9px, .5vw + 7px, 10px);
    font-weight: 800; text-transform: uppercase;
    letter-spacing: .1em; color: var(--text-55);
  }

  /* Container query opt-in */
  .cq { container-type: inline-size; }
}

/* ========================== COMPONENTS ================================= */
@layer components {

  /* ---- Card ---------------------------------------------------------- */
  .card {
    position: relative;
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--card) 96%, #fff 4%), var(--card) 70%);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    overflow: hidden;

    &::before {
      content: ''; position: absolute; inset-block-start: 0;
      inset-inline: 12%; block-size: 1px; z-index: 1; pointer-events: none;
      background: linear-gradient(90deg, transparent,
        color-mix(in srgb, #fff 12%, transparent), transparent);
    }
    @media (min-width: 640px) { border-radius: var(--r-2xl); }
  }
  .card-pad   { padding: var(--sp-3); }
  .card-head  {
    position: relative; z-index: 2;
    display: flex; flex-direction: column; gap: var(--sp-3);
    padding: 14px;
    border-block-end: 1px solid var(--border-soft);
    background: linear-gradient(180deg, var(--surface-1), transparent);
    @media (min-width: 768px) { flex-direction: row; align-items: center; justify-content: space-between; }
  }
  @media (min-width: 640px) { .card-pad { padding: var(--sp-4); } }

  /* ---- Botões -------------------------------------------------------- */
  .btn {
    --btn-bg: var(--surface-2);
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    padding: 10px 18px; border: 1px solid var(--border);
    border-radius: var(--r-md); background: var(--btn-bg);
    font-weight: 700; font-size: .82rem; color: var(--text);
    cursor: pointer; white-space: nowrap;
    transition: transform .12s var(--ease), background .2s, border-color .2s, box-shadow .2s;

    &:hover  { transform: translateY(-1px); border-color: color-mix(in srgb, #fff 22%, transparent); }
    &:active { transform: translateY(0) scale(.98); }
    &:focus-visible { outline: none; box-shadow: var(--ring-focus); }
    &:disabled { opacity: .5; pointer-events: none; }
  }
  .btn--primary {
    --btn-bg: var(--primary); border-color: transparent; color: #fff;
    &:hover { box-shadow: 0 8px 24px -8px var(--primary); }
  }
  .btn--ghost { --btn-bg: transparent; }
  .btn--block { display: flex; width: 100%; }
  .btn--lg { padding: 13px 22px; font-size: .9rem; }

  /* ---- Icon button --------------------------------------------------- */
  .icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    inline-size: 38px; block-size: 38px; flex-shrink: 0;
    border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--surface-2); cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
    &:hover { background: var(--surface-3); color: #fff; }
    &:focus-visible { outline: none; box-shadow: var(--ring-focus); }
    & svg { inline-size: 18px; block-size: 18px; }
  }

  /* ---- Chip / badge -------------------------------------------------- */
  .chip {
    display: inline-flex; align-items: center; gap: var(--sp-1);
    padding: 4px 10px; border-radius: var(--r-full);
    border: 1px solid var(--border); background: var(--surface-2);
    font-size: .7rem; font-weight: 700; color: var(--text-90);
    font-variant-numeric: var(--num); white-space: nowrap;
  }
  .badge {
    display: inline-flex; align-items: center; gap: var(--sp-1);
    padding: 3px 9px; border-radius: var(--r-full);
    font-size: .72rem; font-weight: 800; color: var(--text);
    & .dot { inline-size: 6px; block-size: 6px; border-radius: var(--r-full); background: currentColor; }
  }

  /* ---- Divisores / seção -------------------------------------------- */
  .hairline { block-size: 1px; background: var(--border-soft); border: 0; }
  .sec-accent {
    display: inline-block; flex-shrink: 0;
    inline-size: 3px; block-size: 22px; border-radius: var(--r-full);
    background: var(--accent);
    box-shadow: 0 0 14px -2px var(--accent);
    @media (min-width: 640px) { block-size: 26px; }
  }
  .sec-title {
    margin: 0; font-size: clamp(12px, .6vw + 9px, 13px);
    font-weight: 800; text-transform: uppercase; letter-spacing: .14em;
    color: var(--text-90);
  }
  /* linha de "métrica destacada" (divisor com gradiente da marca) */
  .rule-brand {
    flex: 1; block-size: 1px; min-inline-size: 20px; opacity: .7;
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--primary) 50%, transparent) 0%,
      var(--border) 50%, transparent 100%);
  }

  /* ---- Live dot ------------------------------------------------------ */
  .live-dot {
    position: relative; display: inline-flex; inline-size: 8px; block-size: 8px;
    &::before {
      content: ''; position: absolute; inset: 0; border-radius: var(--r-full);
      background: var(--accent, var(--primary)); opacity: .6;
      animation: bv-ping 1.4s var(--ease) infinite;
    }
    & > i {
      position: relative; inline-size: 8px; block-size: 8px; border-radius: var(--r-full);
      background: var(--accent, var(--primary)); box-shadow: 0 0 10px var(--accent, var(--primary));
    }
  }

  /* ---- Skeleton (SPA) ------------------------------------------------ */
  .skeleton {
    position: relative; overflow: hidden;
    background: var(--surface-2); border-radius: var(--r-sm);
    &::after {
      content: ''; position: absolute; inset: 0;
      transform: translateX(-100%);
      background: linear-gradient(90deg, transparent,
        color-mix(in srgb, #fff 7%, transparent), transparent);
      animation: bv-shimmer 1.4s infinite;
    }
  }
  .sk-line   { block-size: 12px; border-radius: 6px; }
  .sk-circle { inline-size: 40px; block-size: 40px; border-radius: var(--r-full); flex-shrink: 0; }
  .sk-card   { block-size: 120px; border-radius: var(--r-lg); }

  /* ---- Empty / erro -------------------------------------------------- */
  .empty {
    display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
    padding: var(--sp-6); text-align: center; color: var(--text-45);
    & h3 { margin: 0; font-size: 1rem; color: var(--text-90); }
    & p  { margin: 0; font-size: .85rem; }
  }

  /* ---- Bola universal (resultado) ----------------------------------- */
  .b {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--r-full); color: #fff; font-weight: 900;
    user-select: none; overflow: hidden; flex-shrink: 0;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.3), 0 2px 6px -1px rgba(0,0,0,.4);

    &::before {
      content: ''; position: absolute; inset: 0; border-radius: var(--r-full);
      background: linear-gradient(to bottom, rgba(255,255,255,.28), transparent 50%, rgba(0,0,0,.25));
      pointer-events: none;
    }
    & > * { position: relative; z-index: 1; }
  }
  .b--xs { inline-size: 18px; block-size: 18px; font-size: 9px; }
  .b--sm { inline-size: 24px; block-size: 24px; font-size: 10px; }
  .b--md { inline-size: 32px; block-size: 32px; font-size: 13px; }
  .b--lg { inline-size: 40px; block-size: 40px; font-size: 15px; }
  .b--xl { inline-size: 48px; block-size: 48px; font-size: 17px; }
  @media (max-width: 768px) {
    .b--md { inline-size: 28px; block-size: 28px; font-size: 11px; }
    .b--lg { inline-size: 36px; block-size: 36px; font-size: 14px; }
    .b--xl { inline-size: 42px; block-size: 42px; font-size: 15px; }
  }
  .b--p { background: var(--color-p); }
  .b--b { background: var(--color-b); }
  .b--t { background: var(--color-t); }
  .b--dim  { opacity: .25; filter: saturate(70%); }
  .b--glow { box-shadow: 0 0 0 2px rgba(255,255,255,.35), 0 0 18px 3px color-mix(in srgb, var(--primary) 90%, transparent); }

  /* ---- Select estilizado (filtros) ---------------------------------- */
  .fx-sel-wrap { position: relative; flex: 1; min-inline-size: 0; }
  @media (min-width: 768px) { .fx-sel-wrap { flex: 0 0 auto; min-inline-size: 180px; } }
  .fx-sel {
    appearance: none; inline-size: 100%;
    background-color: var(--surface-3);
    background-image: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.005));
    border: 1px solid color-mix(in srgb, #fff 10%, transparent);
    color: #fff; font: 700 12px/1 var(--font); letter-spacing: .02em;
    padding: 10px 36px 10px 14px; min-block-size: 38px; border-radius: var(--r-sm) 2px;
    border-radius: 10px; cursor: pointer;
    transition: border-color .2s, background-color .2s, box-shadow .2s;

    &:hover { border-color: color-mix(in srgb, #fff 22%, transparent); background-color: color-mix(in srgb, #000 45%, transparent); }
    &:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring-focus); }
    & option { background-color: #0a0a0a; color: #fff; font-weight: 600; padding: 8px 12px; }
  }
  .fx-sel-arrow {
    inline-size: 12px; block-size: 12px; position: absolute;
    inset-inline-end: 12px; inset-block-start: 50%; transform: translateY(-50%);
    pointer-events: none; color: var(--text-55);
  }

  /* ---- Barra de proporção (P/B/T) — progress bar contínua ------------ */
  .ac-bar {
    position: relative; display: flex; inline-size: 100%; block-size: 22px;
    border-radius: var(--r-full); overflow: hidden; background: var(--surface-3);
    box-shadow: inset 0 0 0 1px var(--border);
    @media (min-width: 640px) { block-size: 24px; }
  }
  .ac-seg {
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.55);
    transition: width .5s var(--ease); overflow: hidden; white-space: nowrap; position: relative;
    @media (min-width: 640px) { font-size: 11px; }
    &[data-c="P"] { background: var(--color-p); }
    &[data-c="B"] { background: var(--color-b); }
    &[data-c="T"] { background: var(--color-t); }
    & .hide { visibility: hidden; }
  }
  .ac-empty {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-35);
    @media (min-width: 640px) { font-size: 10px; }
  }

  /* Cabeçalho do card de tendência: "N · total" + badge (padrão referência) */
  .tc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-block-end: 10px; }
  .tc-left { display: flex; align-items: baseline; min-inline-size: 0; }
  .tc-num {
    font-size: 24px; font-weight: 800; color: var(--text); line-height: 1;
    font-variant-numeric: var(--num); letter-spacing: -.02em;
  }
  .tc-count { margin-inline-start: 7px; font-size: 11px; font-weight: 700; color: var(--text-45); font-variant-numeric: var(--num); white-space: nowrap; }
  @media (max-width: 640px) {
    .tc-num { font-size: 19px; }
    .tc-count { font-size: 10px; margin-inline-start: 5px; }
  }

  /* ---- Card de análise (tendência) ---------------------------------- */
  .ac {
    position: relative; overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(0,0,0,.18) 60%, rgba(0,0,0,.32) 100%);
    border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px;
    transition: transform .25s var(--ease), border-color .25s, box-shadow .25s;
    @media (min-width: 640px) { border-radius: var(--r-xl); padding: var(--sp-4); }

    &::before {
      content: ''; position: absolute; inset-block-start: 0; inset-inline: 12%; block-size: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent); pointer-events: none;
    }
    &:hover { transform: translateY(-2px); border-color: color-mix(in srgb, #fff 18%, transparent); box-shadow: var(--shadow-card); }
    &.is-empty { opacity: .45; filter: saturate(50%); }
    &.is-now {
      border-color: var(--accent);
      box-shadow: 0 0 32px -8px var(--accent), inset 0 0 0 1px var(--accent);
      &::after {
        content: ''; position: absolute; inset: 0; pointer-events: none;
        background: linear-gradient(110deg, transparent 30%, color-mix(in srgb, var(--accent) 20%, transparent) 50%, transparent 70%);
        transform: translateX(-100%); animation: bv-shimmer 3s var(--ease) infinite;
      }
    }
  }
  .ac-now-badge {
    position: absolute; inset-block-start: -9px; inset-inline-end: 10px;
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 8px;
    border-radius: var(--r-full); font-size: 8px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase;
    color: #fff; background: var(--accent, var(--color-p)); z-index: 5;
    box-shadow: 0 0 18px -2px var(--accent, var(--color-p)), inset 0 1px 0 rgba(255,255,255,.25);
    animation: bv-pulse 2s var(--ease) infinite;
    @media (min-width: 640px) { inset-block-start: -10px; inset-inline-end: 12px; padding: 4px 10px 4px 9px; font-size: 9px; }
    &::before { content: ''; inline-size: 5px; block-size: 5px; border-radius: var(--r-full); background: #fff; box-shadow: 0 0 6px #fff; animation: bv-blink 1.2s var(--ease) infinite; }
  }
  .ac-pct-badge {
    display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: var(--r-full);
    font-size: 9px; font-weight: 800; color: #fff; letter-spacing: .04em;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.3), 0 2px 8px -2px rgba(0,0,0,.4);
    @media (min-width: 640px) { gap: 4px; padding: 4px 10px; font-size: 10px; }
    &[data-c="P"] { background: var(--color-p); }
    &[data-c="B"] { background: var(--color-b); }
    &[data-c="T"] { background: var(--color-t); }
  }

  /* ---- Linha de padrão ---------------------------------------------- */
  .pat-row {
    position: relative; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.32));
    transition: transform .25s, border-color .25s, box-shadow .25s;
    @media (min-width: 640px) { gap: 14px; padding: 11px 16px; border-radius: 12px; flex-wrap: nowrap; }

    &:hover { transform: translateX(3px); border-color: color-mix(in srgb, #fff 18%, transparent); box-shadow: 0 8px 20px -10px rgba(0,0,0,.5); }
    &.is-empty { opacity: .38; }
    &.is-now { border-color: var(--accent); box-shadow: 0 0 26px -8px var(--accent), inset 0 0 0 1px var(--accent); }
  }
  .pat-fill { position: absolute; inset-block: 0; inset-inline-start: 0; opacity: .18; transition: width .5s var(--ease); pointer-events: none; }
  .pat-pct {
    position: relative; font-size: 15px; font-weight: 800; font-variant-numeric: var(--num); letter-spacing: -.02em;
    @media (min-width: 640px) { font-size: 16px; }
    &[data-c="P"] { color: var(--color-p); text-shadow: 0 0 16px color-mix(in srgb, var(--color-p) 40%, transparent); }
    &[data-c="B"] { color: var(--color-b); text-shadow: 0 0 16px color-mix(in srgb, var(--color-b) 40%, transparent); }
    &[data-c="T"] { color: var(--color-t); text-shadow: 0 0 16px color-mix(in srgb, var(--color-t) 40%, transparent); }
  }
  .pat-now-badge {
    position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px;
    border-radius: var(--r-full); font-size: 8px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase;
    color: #fff; background: var(--accent); box-shadow: 0 0 14px -2px var(--accent), inset 0 1px 0 rgba(255,255,255,.25);
    animation: bv-pulse 2s var(--ease) infinite;
    @media (min-width: 640px) { padding: 4px 10px; font-size: 9px; }
    &::before { content: ''; inline-size: 5px; block-size: 5px; border-radius: var(--r-full); background: #fff; box-shadow: 0 0 6px #fff; animation: bv-blink 1.2s var(--ease) infinite; }
  }

  /* ---- Resultados por hora (linhas: hora + barra P/B/T + contagens) -- */
  .hr-row {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 10px; border-radius: var(--r-md);
    background: var(--surface-1); border: 1px solid var(--border-soft);
    transition: border-color .2s, transform .2s;
    &:hover { border-color: color-mix(in srgb, #fff 14%, transparent); transform: translateX(2px); }
  }
  .hr-time {
    flex: none; inline-size: 46px; font-weight: 800; letter-spacing: .03em;
    color: var(--text); font-variant-numeric: var(--num); font-size: .82rem;
  }
  .hr-bar {
    flex: 1; display: flex; block-size: 10px; border-radius: var(--r-full);
    overflow: hidden; background: var(--surface-3); min-inline-size: 40px;
    & span { transition: width .5s var(--ease); }
    & span[data-c="P"] { background: var(--color-p); }
    & span[data-c="B"] { background: var(--color-b); }
    & span[data-c="T"] { background: var(--color-t); }
  }
  .hr-counts {
    flex: none; display: inline-flex; gap: 8px; font-size: .8rem; font-weight: 800;
    & b { min-inline-size: 16px; text-align: end; }
  }

  /* ---- Grid (cuadrícula) -------------------------------------------- */
  .grid-scroll { direction: rtl; }
  @media (min-width: 768px) { .grid-scroll { min-block-size: 340px; } }
  .grid-rows { display: inline-flex; align-items: flex-start; gap: 12px; direction: ltr; }
  .grid-column { display: flex; flex-direction: column; gap: 8px; align-items: center; }
  .grid-cell-empty { inline-size: 28px; block-size: 28px; flex-shrink: 0; display: grid; place-items: center; }
  /* bolinha apagada nas células vazias, como o emptyRoadItem da transmissão */
  .grid-cell-empty::before { content: ''; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--border); }
  @media (min-width: 768px) { .grid-cell-empty { inline-size: 32px; block-size: 32px; } }

  .grid-legend.hidden { display: none; }
  .grid-legend-list {
    display: flex; flex-wrap: wrap; gap: 12px; padding: 8px 12px;
    background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--r-sm);
  }
  .grid-legend-item {
    display: flex; align-items: center; gap: 8px; padding: 6px 12px;
    border-radius: var(--r-full); border: 1px solid var(--border);
    font-size: 14px; color: var(--text-90);
  }
  .grid-legend-dot { display: inline-block; inline-size: 12px; block-size: 12px; border-radius: var(--r-full); }

  /* ---- Sequências ---------------------------------------------------- */
  /* altura reservada só no desktop (alinha com a Cuadrícula lado a lado);
     no mobile a altura acompanha o conteúdo — sem card esticado vazio. */
  .seq-row { display: inline-flex; align-items: flex-start; gap: 16px; }
  @media (min-width: 768px) { .seq-row { min-block-size: 315px; } }
  .seq-column { display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .seq-tie {
    position: absolute; inset-inline: 4px; block-size: 3px;
    background: var(--color-t); box-shadow: 0 0 10px var(--color-t); z-index: 2;
  }
  .seq-dim { opacity: .25; filter: saturate(70%); }
  .seq-glow .b { box-shadow: 0 0 0 2px rgba(255,255,255,.25), 0 0 14px 2px color-mix(in srgb, var(--primary) 55%, transparent); }
  .seq-spot { box-shadow: 0 0 0 2px rgba(255,255,255,.35), 0 0 18px 3px color-mix(in srgb, var(--primary) 90%, transparent) !important; }

  /* ---- 404 ----------------------------------------------------------- */
  .nf-section { min-block-size: 70vh; display: flex; align-items: center; justify-content: center; padding: 48px 16px; }
  .nf-box { inline-size: 100%; max-inline-size: 448px; text-align: center; }
  .nf-icon-wrap { position: relative; margin: 0 auto 24px; inline-size: 96px; block-size: 96px; }
  .nf-icon-glow {
    position: absolute; inset: 0; border-radius: var(--r-full); filter: blur(24px);
    background: linear-gradient(to bottom right, rgba(239,68,68,.2), rgba(249,115,22,.1), transparent);
  }
  .nf-icon-circle {
    position: relative; inline-size: 100%; block-size: 100%; border-radius: var(--r-full);
    border: 1px solid var(--border); background: var(--card);
    display: flex; align-items: center; justify-content: center;
    & svg { inline-size: 48px; block-size: 48px; color: var(--text-70); }
  }
  .nf-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .2em; color: var(--text-45); text-transform: uppercase; margin-block-end: 12px; }
  .nf-title { font-size: 30px; font-weight: 700; margin-block-end: 12px; line-height: 1.15; }
  .nf-text { font-size: 14px; color: var(--text-55); margin-block-end: 32px; line-height: 1.6; }
  .nf-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 24px; border-radius: var(--r-sm); background: #fff; color: #0b0b0d;
    font-weight: 500; font-size: 14px; transition: background .15s, transform .1s;
    &:hover { background: color-mix(in srgb, #fff 90%, transparent); }
    &:active { transform: scale(.98); }
    & svg { inline-size: 16px; block-size: 16px; }
  }

  /* ---- Dashboard: grids responsivas --------------------------------- */
  /* Painéis Cuadrícula/Secuencias: 1 col → 2 col em lg */
  .panels { grid-template-columns: 1fr; align-items: stretch; }
  @media (min-width: 640px) { .panels { gap: var(--sp-6); } }
  @media (min-width: 1024px) { .panels { grid-template-columns: 1fr 1fr; } }

  /* Grids de cards de análise (mobile-first, expandem por breakpoint) */
  .an-grid-2  { grid-template-columns: 1fr; }
  .an-grid-4  { grid-template-columns: repeat(2, 1fr); } /* tendências: 2 por linha já no mobile */
  .an-grid-6  { grid-template-columns: repeat(2, 1fr); }
  .an-grid-10 { grid-template-columns: repeat(2, 1fr); }
  @media (min-width: 640px) {
    .an-grid-4  { grid-template-columns: repeat(2, 1fr); }
    .an-grid-6  { grid-template-columns: repeat(3, 1fr); }
    .an-grid-10 { grid-template-columns: repeat(5, 1fr); }
    .grid.gap-3 { gap: var(--sp-4); }
  }
  @media (min-width: 768px) {
    .an-grid-6  { grid-template-columns: repeat(4, 1fr); }
    .an-grid-10 { grid-template-columns: repeat(10, 1fr); }
  }
  @media (min-width: 1024px) {
    .an-grid-2  { grid-template-columns: repeat(2, 1fr); }
    .an-grid-4  { grid-template-columns: repeat(3, 1fr); }
  }
  @media (min-width: 1280px) {
    .an-grid-4  { grid-template-columns: repeat(4, 1fr); }
    .an-grid-6  { grid-template-columns: repeat(6, 1fr); }
  }

  /* ---- Dashboard: wrappers e seções --------------------------------- */
  .page      { inline-size: 100%; max-inline-size: 72rem; margin-inline: auto; padding: 32px var(--sp-6); }
  @media (min-width: 768px) { .page { padding-inline: var(--sp-8); } }
  .page-stack { display: flex; flex-direction: column; gap: var(--sp-5); }
  @media (min-width: 640px) { .page-stack { gap: var(--sp-7); } }

  /* Cabeçalho de painel (Cuadrícula / Secuencias) */
  .panel-head {
    position: relative; z-index: 2;
    display: flex; flex-direction: column; gap: var(--sp-3);
    padding: 14px; border-block-end: 1px solid var(--border-soft);
    background: linear-gradient(180deg, var(--surface-1), transparent);
    @media (min-width: 640px) { padding: var(--sp-4); }
    @media (min-width: 768px) { flex-direction: row; align-items: center; justify-content: space-between; }
  }
  .panel-title { margin: 0; font-size: clamp(12px, .6vw + 9px, 13px); font-weight: 800; text-transform: uppercase; letter-spacing: .16em; color: var(--text); }
  .panel-sub   { display: none; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--text-35); margin-inline-start: 4px; }
  @media (min-width: 640px) { .panel-sub { display: inline-flex; } }
  .panel-body  { flex: 1; display: flex; flex-direction: column; padding: var(--sp-3); }
  @media (min-width: 640px) { .panel-body { padding: var(--sp-4); } }

  /* ---- Acordeão (seções recolhíveis da aba Análisis) ----------------
     .acc.card = o card (fundo/borda/raio); head e corpo vivem dentro dele,
     então mesmo colapsado a seção mantém o fundo. */
  .acc { display: flex; flex-direction: column; }
  .acc-head {
    display: flex !important; flex-direction: row !important;
    align-items: center; gap: 10px; cursor: pointer;
    margin-block-end: 0 !important; padding: 14px 16px;
    border-radius: inherit;
    transition: background .15s;
    &:hover { background: var(--surface-1); }
    &:focus-visible { outline: none; box-shadow: var(--ring-focus); }
  }
  /* dentro do acordeão o título fica mais discreto (não "gigante") */
  .acc-head .sec-title { font-size: clamp(11px, .5vw + 9px, 12px); letter-spacing: .1em; }
  .acc-head .eyebrow { font-size: 8px; letter-spacing: .16em; }
  /* legenda e chevron vão para a direita; chevron sempre por último */
  .acc-head > .legend { margin-inline-start: auto; }
  .acc-head > .acc-chev { margin-inline-start: auto; }
  .acc-head:has(.legend) > .acc-chev { margin-inline-start: 10px; }
  .acc-chev {
    flex: none; display: inline-flex; color: var(--text-45);
    transition: transform .25s var(--ease), color .2s;
    & svg { inline-size: 18px; block-size: 18px; }
  }
  .acc.is-open > .acc-head .acc-chev { transform: rotate(180deg); color: var(--text-90); }
  /* corpo: altura animada via grid-rows (0fr↔1fr) — sem medir, GPU-friendly */
  .acc-body {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .28s var(--ease);
  }
  .acc.is-open > .acc-body { grid-template-rows: 1fr; }
  /* .acc-inner clipa (overflow); o padding fica em .acc-pad dentro dele, então
     quando 0fr some por completo (nada de conteúdo "espiando"). */
  .acc-inner { overflow: hidden; min-block-size: 0; }
  .acc-pad { padding: 4px 16px 16px; }
  /* head sem hover-bg quando fechado deixa a borda inferior mais limpa */
  .acc:not(.is-open) .acc-head { border-radius: inherit; }

  /* ---- Controle segmentado (Momentos que pagan) --------------------- */
  .seg {
    display: flex; gap: 4px; padding: 4px; margin-block-end: var(--sp-4);
    border-radius: var(--r-full); background: var(--surface-3); border: 1px solid var(--border-soft);
    overflow-x: auto; scrollbar-width: none;
  }
  .seg::-webkit-scrollbar { display: none; }
  .seg-chip {
    flex: 1; white-space: nowrap; padding: 8px 12px; border: 0; border-radius: var(--r-full);
    background: transparent; color: var(--text-55);
    font: 700 .74rem/1 var(--font); letter-spacing: .03em; cursor: pointer;
    transition: color .2s, background .2s;
    &:hover { color: var(--text-90); }
    &.is-active { color: #fff; background: color-mix(in srgb, var(--color-t) 82%, #000); }
    &:focus-visible { outline: none; box-shadow: var(--ring-focus); }
  }

  /* Cabeçalho de sub-seção com barra de acento (secHead) */
  .sec-head {
    display: flex; flex-direction: column; gap: var(--sp-2);
    margin-block-end: var(--sp-3); padding-inline: 2px;
    @media (min-width: 768px) { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--sp-4); }
  }
  .sec-head-left { display: flex; align-items: center; gap: 10px; min-inline-size: 0; }
  .sec-head-txt  { display: flex; flex-direction: column; line-height: 1.15; min-inline-size: 0; }

  /* Legenda P/B/T */
  /* legenda = só as 3 bolinhas P/B/E (sem texto) */
  .legend { display: inline-flex; align-items: center; gap: 6px; flex: none; }
  .legend-item { display: inline-flex; align-items: center; gap: 6px; }
  .legend-dot { inline-size: 8px; block-size: 8px; border-radius: var(--r-full); }
  @media (min-width: 640px) { .legend-dot { inline-size: 10px; block-size: 10px; } }

  /* Filtro (rótulo + select) */
  .filter { display: flex; align-items: center; gap: 10px; inline-size: 100%; }
  @media (min-width: 768px) { .filter { inline-size: auto; } }

  /* Cabeçalho "Análisis Detallado" */
  .metrics-head { display: flex; align-items: center; gap: var(--sp-3); margin-block-start: 4px; }
  @media (min-width: 640px) { .metrics-head { gap: var(--sp-4); } }
  .metrics-badge {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    inline-size: 36px; block-size: 36px; border-radius: var(--r-md);
    color: var(--primary); border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 28%, transparent), color-mix(in srgb, var(--primary) 8%, transparent));
    box-shadow: 0 0 22px -4px color-mix(in srgb, var(--primary) 50%, transparent), inset 0 1px 0 rgba(255,255,255,.08);
    @media (min-width: 640px) { inline-size: 40px; block-size: 40px; }
    & svg { inline-size: 18px; block-size: 18px; }
  }
  .metrics-title { margin: 0; font-size: clamp(13px,.7vw+10px,15px); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--primary); white-space: nowrap; }

  /* Sub-box de padrões (win/lose) */
  .subbox {
    background: color-mix(in srgb, #000 25%, transparent);
    border: 1px solid var(--border-soft); border-radius: var(--r-lg); padding: var(--sp-3);
  }
  .subbox-head { display: flex; align-items: center; gap: var(--sp-2); padding-block-end: 10px; margin-block-end: 10px; border-block-end: 1px solid var(--border-soft); }
  .subbox-ic {
    display: inline-flex; align-items: center; justify-content: center;
    inline-size: 24px; block-size: 24px; border-radius: var(--r-sm); border: 1px solid;
    & svg { inline-size: 12px; block-size: 12px; }
  }
  .subbox-title { flex: 1; margin: 0; font-size: clamp(11px,.5vw+9px,12px); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--text); }

  /* Cor por lado nas sub-boxes */
  .side-p { --side: var(--color-p); }
  .side-b { --side: var(--color-b); }
  .subbox-ic.side-p, .subbox-ic.side-b {
    background: color-mix(in srgb, var(--side) 18%, transparent);
    border-color: color-mix(in srgb, var(--side) 40%, transparent);
    color: var(--side);
  }

  /* Texto descritivo de seção */
  .sec-desc { margin: 0; font-size: clamp(10px,.5vw+8px,11px); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-55); }
  .sec-desc-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-block-end: var(--sp-3); padding-block-end: var(--sp-3); border-block-end: 1px solid var(--border-soft); }
  @media (min-width: 640px) { .sec-desc-row { margin-block-end: var(--sp-4); } }

  /* Histórico (timeline com máscara). Grid auto-fill: as colunas sempre
     cabem na largura disponível — nada é cortado na borda (bug do flex-wrap
     com itens de largura fixa no mobile). */
  .hist-wrap {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
    gap: 10px 6px; justify-items: center;
    max-block-size: 340px; overflow-y: auto; padding-inline-end: 2px;
    mask-image: linear-gradient(180deg, #000 85%, transparent 100%);
    @media (min-width: 640px) { grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); max-block-size: 440px; }
  }

  /* ---- App header (topo, no fluxo): logo à esquerda + pílula ---------- */
  .app-header {
    flex: none; z-index: 50;
    block-size: 64px; padding-inline: var(--sp-4);
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
    border-block-end: 1px solid var(--border);
    background: color-mix(in srgb, var(--background) 92%, transparent);
    backdrop-filter: blur(12px);
    @media (min-width: 768px) { padding-inline: var(--sp-6); }
  }
  .app-logo {
    display: flex; align-items: center;
    & img { max-block-size: 44px; inline-size: auto; object-fit: contain; }
    @media (min-width: 640px) { & img { max-block-size: 48px; } }
  }
  /* logo por tema: clara (texto branco) no dark; escura (texto invertido) no
     light. Alterna por data-theme — sem flash (ambas já no DOM). */
  .logo-dark { display: none; }
  :root[data-theme="light"] .logo-light { display: none; }
  :root[data-theme="light"] .logo-dark { display: block; }

  /* Nav do header (desktop): 4 links. Escondido no mobile (usa a tab bar). */
  .hd-nav { display: none; align-items: center; gap: 4px; }
  @media (min-width: 768px) {
    .hd-nav { display: flex; }
  }
  .hd-link {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; border-radius: var(--r-full);
    color: var(--text-55); font-size: .82rem; font-weight: 700;
    white-space: nowrap; transition: color .2s, background .2s;
    & svg { inline-size: 17px; block-size: 17px; }
    &:hover { color: var(--text-90); background: var(--surface-2); }
    &.is-active { color: var(--on-primary); background: var(--primary); box-shadow: 0 4px 14px -6px var(--primary); }
  }

  /* ---- Menu de conta (dropdown, canto superior direito) -------------- */
  .acct { position: relative; flex: none; }
  .acct-btn {
    display: inline-flex; align-items: center; justify-content: center; padding: 0;
    border: 0; background: transparent; cursor: pointer; border-radius: var(--r-full);
    transition: transform .15s;
    &:active { transform: scale(.94); }
    &:focus-visible { outline: none; box-shadow: var(--ring-focus); }
  }
  /* avatar neutro (nas cores do sistema) — anel sutil, harmônico com os cards */
  .acct-avatar {
    inline-size: 40px; block-size: 40px; border-radius: var(--r-full);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1rem; color: var(--text);
    background: var(--surface-2); border: 1px solid var(--border);
  }
  .acct-avatar--lg {
    inline-size: 44px; block-size: 44px; font-size: 1.1rem;
    background: linear-gradient(140deg, var(--surface-1), var(--surface-3));
  }

  .acct-menu {
    position: absolute; inset-block-start: calc(100% + 12px); inset-inline-end: 0; z-index: 90;
    inline-size: 300px; max-inline-size: calc(100vw - 20px);
    padding: 8px; border-radius: var(--r-2xl);
    background: var(--card); border: 1px solid var(--border);
    box-shadow: 0 24px 64px -24px color-mix(in srgb, #000 60%, transparent),
                0 2px 8px -4px color-mix(in srgb, #000 40%, transparent);
    opacity: 0; transform: translateY(-8px) scale(.97); transform-origin: top right;
    transition: opacity .18s ease, transform .2s var(--ease-back);
    pointer-events: none;
  }
  .acct.is-open .acct-menu, .acct-menu.is-in { opacity: 1; transform: none; pointer-events: auto; }

  /* cabeçalho: um "card" interno com avatar + nome + id, coeso com o sistema */
  .acct-head {
    display: flex; align-items: center; gap: 12px;
    padding: 12px; margin-block-end: 8px; border-radius: var(--r-lg);
    background: var(--surface-1); border: 1px solid var(--border-soft);
  }
  .acct-head-txt { flex: 1; min-inline-size: 0; }
  .acct-name-row { display: flex; align-items: center; gap: 4px; }
  .acct-name-in {
    flex: 1; min-inline-size: 0; padding: 2px 6px; margin-inline-start: -6px;
    border: 1px solid transparent; border-radius: var(--r-sm); background: transparent;
    color: var(--text); font: 800 1rem/1.25 var(--font);
    text-overflow: ellipsis; transition: background .15s, border-color .15s;
    &:hover { background: var(--surface-2); }
    &:focus { outline: none; border-color: var(--border); background: var(--surface-3); box-shadow: var(--ring-focus); }
  }
  .acct-edit {
    flex: none; inline-size: 26px; block-size: 26px; padding: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-45);
    transition: color .15s, background .15s;
    & svg { inline-size: 14px; block-size: 14px; }
    &:hover { color: var(--text); background: var(--surface-2); }
  }
  .acct-id { margin: 3px 0 0; font-size: 10.5px; font-weight: 600; color: var(--text-45); font-variant-numeric: var(--num); letter-spacing: .02em; }

  /* seções idioma/tema */
  .acct-group { padding: 6px 6px 4px; }
  .acct-label { margin: 0 0 8px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--text-45); }

  /* trilho segmentado (mesmo padrão do .seg do sistema): 3 opções, ícone só,
     selecionado com pílula preenchida no acento secundário (harmônico, sutil) */
  .acct-opts {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
    padding: 4px; border-radius: var(--r-lg);
    background: var(--surface-3); border: 1px solid var(--border-soft);
  }
  .acct-opt {
    display: flex; align-items: center; justify-content: center;
    block-size: 44px; padding: 0; cursor: pointer;
    border: 0; border-radius: calc(var(--r-lg) - 4px); background: transparent;
    color: var(--text-55); transition: background .18s var(--ease), color .18s, box-shadow .18s;
    & svg { inline-size: 20px; block-size: 20px; }
    &:hover { color: var(--text); background: var(--surface-2); }
    &:focus-visible { outline: none; box-shadow: var(--ring-focus); }
    /* selecionado: pílula preenchida com acento secundário (azul do sistema) */
    &[data-on="1"] {
      color: #fff; background: var(--secondary);
      box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--secondary) 80%, transparent);
    }
    &[data-on="1"]:hover { background: var(--secondary); }
  }
  /* bandeira num "cartão" arredondado (não emoji solto) — recorta e destaca */
  .acct-flag {
    inline-size: 30px; block-size: 21px; border-radius: 5px; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px; line-height: 1;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #000 15%, transparent), 0 1px 2px -1px color-mix(in srgb, #000 40%, transparent);
  }
  .acct-opt[data-on="1"] .acct-flag { box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 40%, transparent); }

  /* ---- Bottom tab bar (mobile): fixa, full-width, 4 abas -------------- */
  .tabbar {
    position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 50;
    display: flex; align-items: stretch;
    border-block-start: 1px solid var(--border);
    background: color-mix(in srgb, var(--background) 96%, transparent);
    backdrop-filter: blur(14px);
    padding-block-end: env(safe-area-inset-bottom, 0);
  }
  @media (min-width: 768px) { .tabbar { display: none; } }
  .tabbar-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 9px 4px 8px; color: var(--text-45); min-inline-size: 0;
    transition: color .2s;
    /* ícone acompanha o estado (apagado → primary quando ativo) via currentColor */
    & .tabbar-ic { display: inline-flex; color: var(--text-45); transition: color .2s; & svg { inline-size: 22px; block-size: 22px; } }
    /* label sempre com o texto do tema (branco no dark, escuro no light) */
    & .tabbar-lb { font-size: 10px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; color: var(--text); }
    &:active { transform: scale(.94); }
    &.is-active .tabbar-ic { color: var(--primary); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--primary) 55%, transparent)); }
  }
  /* espaço no fim da view para a tab bar fixa não cobrir o conteúdo (mobile) */
  .tabbar-spacer { block-size: 0; }
  @media (max-width: 767px) { .tabbar-spacer { block-size: 68px; } }

  /* ---- Transição de slide direcional entre views -------------------- */
  /* durante o slide: promove à GPU e trava scroll/toque, para o transform ser
     puramente composto (sem reflow) e a animação não perder frames. */
  #spa-main.view-sliding { overflow: hidden; }
  #spa-main.view-sliding .view-layer { will-change: transform; overflow: hidden; backface-visibility: hidden; }
  #spa-main.view-sliding .view-layer.is-out { pointer-events: none; }
  .view-anim { transition: transform .32s cubic-bezier(.4,0,.2,1); }
  .view-error { padding: 48px 16px; text-align: center; color: var(--text-55); }

  /* ==================== GESTIÓN DE BANCA ============================== */
  .gb-head { display: flex; align-items: center; gap: 14px; margin-block-end: var(--sp-2); }
  .gb-head-ic {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    inline-size: 44px; block-size: 44px; border-radius: 12px;
    /* --hc = cor do ícone da aba (default dourado; a inicial usa primary) */
    color: var(--hc, var(--tertiary));
    background: color-mix(in srgb, var(--hc, var(--tertiary)) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--hc, var(--tertiary)) 35%, transparent);
    & svg { inline-size: 23px; block-size: 23px; }
  }

  /* herói: banca atual grande + chip de P&L + barra rumo à meta */
  .gb-hero-card { position: relative; overflow: hidden;
    background: linear-gradient(160deg, color-mix(in srgb, var(--primary) 10%, var(--card)), var(--card) 60%); }
  .gb-hero { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
  .gb-big { font-size: clamp(2rem, 8vw, 2.8rem); font-weight: 800; letter-spacing: -.02em; color: var(--text); font-variant-numeric: var(--num); line-height: 1; }
  .gb-hero-track { margin-block-start: 14px; block-size: 8px; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; }
  .gb-hero-bar { block-size: 100%; inline-size: 0; border-radius: inherit; transition: inline-size .45s cubic-bezier(.4,0,.2,1), background .3s;
    &[data-dir="up"]   { background: linear-gradient(90deg, color-mix(in srgb, var(--color-p) 70%, #000), var(--color-p)); }
    &[data-dir="down"] { background: linear-gradient(90deg, color-mix(in srgb, var(--color-b) 70%, #000), var(--color-b)); } }
  .gb-pnl {
    display: inline-flex; align-items: center; padding: 8px 14px; border-radius: var(--r-full);
    font-size: 1rem; font-weight: 800; font-variant-numeric: var(--num);
    &[data-dir="up"]   { color: var(--color-p); background: color-mix(in srgb, var(--color-p) 15%, transparent); }
    &[data-dir="down"] { color: var(--color-b); background: color-mix(in srgb, var(--color-b) 15%, transparent); }
  }

  /* tiles de métrica */
  .gb-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
  @media (min-width: 640px) { .gb-metrics { grid-template-columns: repeat(4, 1fr); } }
  .gb-tile {
    display: flex; align-items: center; gap: 12px;
    padding: var(--sp-3); border-radius: var(--r-lg);
    background: var(--card); border: 1px solid var(--border);
  }
  .gb-tile-ic {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    inline-size: 40px; block-size: 40px; border-radius: 12px;
    color: #fff; background: linear-gradient(135deg, var(--tc), color-mix(in srgb, var(--tc) 55%, #000));
    & svg { inline-size: 20px; block-size: 20px; }
  }
  .gb-tile-val { margin: 2px 0 0; font-size: 1.15rem; font-weight: 800; color: var(--text); font-variant-numeric: var(--num); line-height: 1.1;
    &[data-dir="up"] { color: var(--color-p); } &[data-dir="down"] { color: var(--color-b); } }
  .gb-tile-sub { margin: 0; font-size: 10px; color: var(--text-45); }

  /* status stop-win/stop-loss */
  .gb-status {
    padding: 12px 14px; border-radius: var(--r-md); font-size: .88rem; font-weight: 700; text-align: center;
    &.is-win  { color: var(--color-p); background: color-mix(in srgb, var(--color-p) 14%, transparent); border: 1px solid color-mix(in srgb, var(--color-p) 35%, transparent); }
    &.is-lose { color: var(--color-b); background: color-mix(in srgb, var(--color-b) 14%, transparent); border: 1px solid color-mix(in srgb, var(--color-b) 35%, transparent); }
  }

  /* botões ganar/perder — 2 por linha, amplos */
  .gb-btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
  .gb-win, .gb-lose { gap: 7px; padding-block: 14px; font-size: .92rem; & svg { inline-size: 17px; block-size: 17px; } }
  .gb-win  { color: #fff; background: var(--color-p); border-color: transparent; &:hover { box-shadow: 0 8px 24px -8px var(--color-p); } }
  .gb-lose { color: #fff; background: var(--color-b); border-color: transparent; &:hover { box-shadow: 0 8px 24px -8px var(--color-b); } }
  .btn.gb-win[disabled], .btn.gb-lose[disabled] { opacity: 1; } /* ganar/perder nunca desabilitam */

  /* log de apostas (chips) */
  .gb-log-wrap { margin-block-start: 4px; }
  .gb-log { display: flex; flex-wrap: wrap; gap: 6px; }
  .gb-chip {
    inline-size: 26px; block-size: 26px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px; font-size: 12px; font-weight: 800; font-variant-numeric: var(--num);
    &.is-win  { color: #fff; background: var(--color-p); }
    &.is-lose { color: #fff; background: var(--color-b); }
  }
  .gb-log-empty { font-size: .82rem; color: var(--text-45); }

  /* config: campos com stepper (−  valor  +). box-sizing global garante que
     nada vaze a largura no mobile; grid de 1 coluna no celular, 2 no tablet. */
  .gb-cfg { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
  @media (min-width: 480px) { .gb-cfg { grid-template-columns: 1fr 1fr; } }
  .gb-field { display: flex; flex-direction: column; gap: 7px; min-inline-size: 0; }
  .gb-field-lb { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--text-55); }
  .gb-field-in {
    display: flex; align-items: stretch; inline-size: 100%; max-inline-size: 100%; box-sizing: border-box;
    border-radius: var(--r-md); background: var(--surface-3); border: 1px solid var(--border); overflow: hidden;
  }
  .gb-field-in:focus-within { border-color: var(--primary); box-shadow: var(--ring-focus); }
  .gb-step {
    flex: none; inline-size: 44px; border: 0; background: transparent; cursor: pointer;
    color: var(--text-90); font: 800 1.35rem/1 var(--font); user-select: none;
    display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s;
    &:hover { background: color-mix(in srgb, var(--primary) 16%, transparent); color: #fff; }
    &:active { background: color-mix(in srgb, var(--primary) 26%, transparent); }
    &:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--primary); }
  }
  .gb-field-mid { flex: 1; min-inline-size: 0; display: flex; align-items: center; justify-content: center; gap: 3px;
    border-inline: 1px solid var(--border); padding: 11px 6px; }
  .gb-field-pre { color: var(--text-45); font-weight: 800; font-size: 1rem; }
  .gb-input {
    inline-size: 100%; min-inline-size: 0; text-align: center; padding: 0; border: 0; background: transparent;
    color: var(--text); font: 800 1.15rem/1 var(--font); font-variant-numeric: var(--num);
    &:focus { outline: none; }
  }
  .gb-field-hint { font-size: 11px; color: var(--text-45); text-align: center; }
  .gb-hint { margin: 2px 0 0; font-size: .78rem; color: var(--text-45); line-height: 1.5; & b { color: var(--text-90); } }

  /* ==================== BANNER DE COOKIES ============================ */
  /* card discreto no canto inferior; no mobile ocupa a largura (acima da tab bar) */
  .cc {
    position: fixed; z-index: 110; inset-inline-end: 20px; inset-block-end: 20px;
    inline-size: 340px; max-inline-size: calc(100vw - 32px);
    display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
    padding: 22px 22px 18px; border-radius: var(--r-2xl);
    background: var(--card); border: 1px solid var(--border);
    box-shadow: 0 24px 60px -22px color-mix(in srgb, #000 60%, transparent);
    opacity: 0; transform: translateY(16px) scale(.98);
    transition: opacity .28s ease, transform .3s var(--ease-back);
  }
  .cc.is-in { opacity: 1; transform: none; }
  @media (max-width: 767px) {
    .cc { inset-inline: 12px; inset-block-end: calc(68px + 12px); inline-size: auto; } /* acima da tab bar */
  }
  .cc-ic { color: var(--tertiary); & svg { inline-size: 42px; block-size: 42px; display: block; } }
  .cc-tx { display: flex; flex-direction: column; gap: 5px; }
  .cc-title { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--text); }
  .cc-desc { margin: 0; font-size: .8rem; font-weight: 500; line-height: 1.5; color: var(--text-55); }
  .cc-actions { display: flex; gap: 10px; margin-block-start: 4px; inline-size: 100%; }
  .cc-btn {
    flex: 1; padding: 10px 14px; border-radius: var(--r-full); cursor: pointer;
    font: 800 .85rem/1 var(--font); border: 1px solid transparent; transition: background .15s, color .15s, border-color .15s;
    &:focus-visible { outline: none; box-shadow: var(--ring-focus); }
  }
  .cc-accept { color: var(--on-primary); background: var(--secondary);
    &:hover { background: color-mix(in srgb, var(--secondary) 85%, #fff); } }
  .cc-decline { color: var(--text-55); background: var(--surface-2); border-color: var(--border);
    &:hover { color: var(--text); background: var(--surface-1); } }

  /* ==================== MODAL (confirm/alert) ========================= */
  .md-overlay {
    position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center;
    padding: 20px; background: color-mix(in srgb, #000 62%, transparent);
    opacity: 0; transition: opacity .2s ease; backdrop-filter: blur(3px);
    &.is-open { opacity: 1; }
  }
  .md-card {
    inline-size: min(100%, 400px); box-sizing: border-box; text-align: center;
    padding: 26px 22px 20px; border-radius: var(--r-2xl);
    background: var(--card); border: 1px solid var(--border);
    box-shadow: 0 24px 60px -20px #000;
    transform: translateY(12px) scale(.97); transition: transform .24s cubic-bezier(.34,1.3,.5,1);
    .md-overlay.is-open & { transform: none; }
  }
  .md-icon {
    inline-size: 52px; block-size: 52px; margin: 0 auto 14px; border-radius: var(--r-lg);
    display: flex; align-items: center; justify-content: center;
    color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, transparent);
    & svg { inline-size: 26px; block-size: 26px; }
    &.md-icon--danger { color: var(--color-b); background: color-mix(in srgb, var(--color-b) 14%, transparent); }
    &.md-icon--win    { color: var(--color-p); background: color-mix(in srgb, var(--color-p) 14%, transparent); }
  }
  .md-title { margin: 0 0 8px; font-size: 1.12rem; font-weight: 800; color: var(--text); }
  .md-msg { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--text-55); }
  .md-actions { display: flex; gap: 10px; margin-block-start: 22px; }
  .md-danger { color: #fff; background: var(--color-b); border-color: transparent; &:hover { box-shadow: 0 8px 24px -8px var(--color-b); } }
  .md-win    { color: #fff; background: var(--color-p); border-color: transparent; &:hover { box-shadow: 0 8px 24px -8px var(--color-p); } }

  /* ==================== SKELETON / CROSS-FADE DE VIEW ================= */
  /* skeleton e conteúdo real coexistem na mesma camada; o real entra por cima
     e some o skeleton — sem flash nem salto de layout. */
  .view-skeleton { transition: opacity .22s ease; }
  .view-skeleton.is-out { opacity: 0; pointer-events: none; }
  .view-real { opacity: 0; transition: opacity .26s ease; }
  .view-real.is-in { opacity: 1; }
  /* quando há skeleton + real, o real ocupa o fluxo e o skeleton fica atrás */
  .view-layer:has(.view-real.is-in) .view-skeleton { position: absolute; inset: 0; }

  /* ---- Footer (só copyright) — fica no fim do conteúdo de cada view -- */
  .app-footer {
    margin-block-start: auto; padding: 24px var(--sp-6) 32px;
    text-align: center; border-block-start: 1px solid var(--border);
    & p { margin: 0; font-size: 11px; color: var(--text-55); }
  }

  /* ==================== TUTORIAL (vídeo como herói) ==================== */
  /* Um único vídeo: coluna centrada, cabeçalho enxuto, player em destaque.
     Acento: cor SECUNDÁRIA do sistema (azul) — nada de vermelho aqui. */
  .course-wrap { inline-size: 100%; max-inline-size: 960px; margin-inline: auto; }

  .course-head { display: flex; align-items: center; gap: 14px; margin-block-end: var(--sp-4); }
  .course-head-ic {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    inline-size: 44px; block-size: 44px; border-radius: 12px;
    color: var(--secondary);
    background: color-mix(in srgb, var(--secondary) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--secondary) 35%, transparent);
    & svg { inline-size: 23px; block-size: 23px; }
  }
  .course-eyebrow { display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .24em; color: var(--text-45); }
  .course-title { margin: 2px 0 0; font-size: clamp(1.15rem, 2.6vw, 1.5rem); font-weight: 700; letter-spacing: -.01em; color: var(--text); line-height: 1.2; }
  .course-sub   { margin: 4px 0 0; font-size: .85rem; color: var(--text-55); }

  /* Guia rápida: três passos abaixo do vídeo */
  .course-steps-head { margin-block-start: var(--sp-6); margin-block-end: var(--sp-3); }
  .course-steps-title { margin: 2px 0 0; font-size: clamp(1rem, 2.2vw, 1.2rem); font-weight: 700; color: var(--text); letter-spacing: -.01em; }
  .course-steps { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
  @media (min-width: 768px) { .course-steps { grid-template-columns: repeat(3, 1fr); } }
  .course-step {
    position: relative; overflow: hidden;
    border-radius: var(--r-xl); border: 1px solid var(--border);
    background: linear-gradient(180deg, var(--surface-1), transparent), var(--card);
    padding: var(--sp-4);
    & .cs-num {
      position: absolute; inset-block-start: 10px; inset-inline-end: 14px;
      font-size: 30px; font-weight: 800; line-height: 1;
      color: color-mix(in srgb, var(--secondary) 16%, transparent);
      font-variant-numeric: var(--num); letter-spacing: -.03em;
    }
    & .cs-ic {
      display: inline-flex; align-items: center; justify-content: center;
      inline-size: 36px; block-size: 36px; border-radius: 10px;
      color: var(--secondary); background: color-mix(in srgb, var(--secondary) 13%, transparent);
      & svg { inline-size: 19px; block-size: 19px; }
    }
    & .cs-title { margin: 12px 0 6px; font-size: .95rem; font-weight: 700; color: var(--text); }
    & .cs-text { margin: 0; font-size: .85rem; line-height: 1.65; color: var(--text-55); }
  }

  /* Textos opcionais do painel (só renderizam se preenchidos) */
  .course-notes { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); margin-block-start: var(--sp-4); }
  @media (min-width: 768px) { .course-notes { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }
  .course-note {
    display: flex; align-items: flex-start; gap: 12px;
    border-radius: var(--r-xl); border: 1px solid var(--border);
    background: var(--card); padding: var(--sp-4);
    & .cn-ic {
      flex: none; inline-size: 34px; block-size: 34px; border-radius: 10px;
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--secondary); background: color-mix(in srgb, var(--secondary) 13%, transparent);
      & svg { inline-size: 18px; block-size: 18px; }
    }
    & p { margin: 0; font-size: .9rem; line-height: 1.7; color: var(--text-90); white-space: pre-line; }
  }

  /* ---- Player de vídeo próprio (sem controles nativos) --------------- */
  .vp {
    --vp-accent: var(--secondary);
    position: relative; inline-size: 100%; border-radius: var(--r-xl); overflow: hidden;
    background: #000; border: 1px solid var(--border); line-height: 0;
    box-shadow: 0 24px 60px -30px rgba(0,0,0,.8);
  }
  .vp-ratio { position: relative; inline-size: 100%; padding-block-start: 56.25%; }
  .vp-ratio iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }
  .vp-video { inline-size: 100%; block-size: auto; max-block-size: 68vh; display: block; cursor: pointer; }

  .vp-overlay {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 50% 45%, rgba(0,0,0,.12), rgba(0,0,0,.45));
    border: 0; cursor: pointer; transition: opacity .25s;
  }
  .vp.is-playing .vp-overlay { opacity: 0; pointer-events: none; }
  .vp-overlay-btn {
    display: flex; align-items: center; justify-content: center;
    inline-size: 72px; block-size: 72px; border-radius: var(--r-full);
    background: var(--vp-accent, var(--secondary)); color: #fff;
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--vp-accent, var(--secondary)) 22%, transparent), 0 18px 44px -10px var(--vp-accent, var(--secondary));
    transition: transform .2s var(--ease-back);
    & svg { inline-size: 30px; block-size: 30px; margin-inline-start: 3px; }
  }
  .vp-overlay:hover .vp-overlay-btn { transform: scale(1.07); }

  .vp-controls {
    position: absolute; inset-inline: 0; inset-block-end: 0;
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.78));
    opacity: 0; transition: opacity .25s; line-height: 1;
  }
  .vp:hover .vp-controls, .vp:not(.is-playing) .vp-controls { opacity: 1; }
  .vp-btn {
    display: inline-flex; align-items: center; justify-content: center;
    inline-size: 30px; block-size: 30px; border: 0; border-radius: 8px;
    background: transparent; color: #fff; cursor: pointer;
    &:hover { background: rgba(255,255,255,.12); }
    & svg { inline-size: 17px; block-size: 17px; }
  }
  .vp-track {
    position: relative; flex: 1; block-size: 5px; border-radius: var(--r-full);
    background: rgba(255,255,255,.18); cursor: pointer;
  }
  .vp-fill { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 0%; border-radius: var(--r-full); background: var(--vp-accent, var(--secondary)); }
  .vp-time { font-size: 11px; font-weight: 600; color: rgba(255,255,255,.75); font-variant-numeric: var(--num); white-space: nowrap; }

  /* ================= POLIMENTO + RESPONSIVIDADE MOBILE ================= */

  /* Alvos de toque confortáveis e sem realce cinza no tap (mobile) */
  a, button, .btn, .icon-btn, .fx-sel, .nav-pill {
    -webkit-tap-highlight-color: transparent;
  }

  /* Hover só onde há ponteiro fino (evita "hover preso" no touch) */
  @media (hover: none) {
    .card:hover, .ac:hover, .pat-row:hover { transform: none; }
  }

  /* Mobile: aperta paddings da página e sobe a densidade, sem perder respiro */
  @media (max-width: 640px) {
    /* respiro lateral maior: conteúdo não cola na beira → zona de scroll
       vertical confortável para o dedo, sem prender no scroll horizontal. */
    .page { padding: 20px 20px; }
    .page-stack { gap: 18px; }

    /* cards de análise: padding menor e radius um tico menor */
    .card-pad { padding: 12px; }
    .ac { padding: 12px; border-radius: 13px; }
    .subbox { padding: 12px; }

    /* headers de painel: menos padding vertical */
    .panel-head { padding: 12px 14px; }
    .panel-body { padding: 12px; }

    /* filtro ocupa a largura toda e ganha respiro do título */
    .filter { margin-block-start: 2px; }

    /* seção "Análisis Detallado" — badge menor no mobile */
    .metrics-badge { inline-size: 34px; block-size: 34px; }

    /* linhas de hora mais compactas */
    .hr-time { inline-size: 42px; font-size: .78rem; }
    .hr-counts { gap: 6px; font-size: .76rem; }
  }

  /* Telas muito estreitas (≤380px): grids de minutos/números respiram */
  @media (max-width: 380px) {
    .an-grid-6, .an-grid-10 { gap: 6px; }
    .b--xl { inline-size: 38px; block-size: 38px; font-size: 14px; }
  }

  /* Rolagem suave e sem "pulo" de âncora sob o header fixo */
  html { scroll-behavior: smooth; }
  :target { scroll-margin-block-start: 80px; }

  /* Foco visível consistente (acessibilidade) sem poluir clique de mouse */
  :where(a, button, select, [tabindex]):focus-visible {
    outline: 2px solid color-mix(in srgb, var(--primary) 70%, #fff);
    outline-offset: 2px;
  }

  /* Seleção de texto com a cor da marca */
  ::selection { background: color-mix(in srgb, var(--primary) 35%, transparent); color: #fff; }

  /* ---- Modo leve (aparelho fraco): corta blur/sombras/transições ----- */
  :root.lite {
    & .app-header { backdrop-filter: none; background: var(--background); }
    & .card, & .ac, & .pat-row { box-shadow: none !important; }
    & .card:hover, & .ac:hover, & .pat-row:hover { transform: none; box-shadow: none !important; }
    & .view-anim { transition: none !important; }
    & .is-now::after, & .ac-now-badge, & .pat-now-badge, & .live-dot::before { animation: none !important; }
  }
}

/* ============================ KEYFRAMES ================================ */
@keyframes bv-pulse   { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.06); opacity: .85; } }
@keyframes bv-blink   { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
@keyframes bv-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(200%); } }
@keyframes bv-ping    { 75%,100% { transform: scale(2); opacity: 0; } }