/* ============================================================
   BRUDAM ACADEMY PORTAL — DESIGN SYSTEM v3 "COCKPIT"
   Sidebar escura · fundo papel · números grandes · raio 20px
   ============================================================ */
:root{
  --ink:        #0B0B1E;
  --ink-soft:   #50506B;
  --ink-faint:  #8F8FA8;
  --ink-read:   #2A2A44;   /* texto de leitura (parágrafos longos) */
  --brand:      #0000F9;
  --brand-deep: #0000B4;
  --brand-soft: #EBEBFF;
  --brand-glow: #5A5AFF;
  --accent:     #FF6F1D;
  --accent-soft:#FFF0E6;
  --bg:         #F6F5F1;          /* papel quente */
  --surface:    #FFFFFF;
  --surface-2:  #FBFAF7;   /* superfície levemente tingida */
  /* Azul institucional das superfícies escuras. Centralizado aqui para
     sidebar, dock, capas e badges nunca voltarem a divergir de tom. */
  --navy-surface:#18183D;
  --navy-surface-rgb:24,24,61;
  --rail:       var(--navy-surface); /* sidebar escura */
  --rail-soft:  rgba(255,255,255,.06);
  --line:       #E9E7E0;
  --line-dark:  rgba(255,255,255,.09);
  --ok:         #14A35C;
  --danger:     #E11D48;
  --grad: linear-gradient(120deg, #FF6F1D -15%, #0000F9 60%);
  /* Design v8 — linhas retas.
     Containers são quadrados; o arredondado sobrevive só onde COMUNICA ação
     (botão, aba, filtro, badge) ou onde a forma é semântica (avatar).
     2px em vez de 0 absoluto: tira o ar de "app modular" sem deixar a borda
     áspera nos campos de formulário. */
  /* v8.4 — recalibrado pelas referências enviadas: elas têm superfície
     branca sobre fundo cinza e raio MODERADO (~12-16px), não canto vivo.
     "Linhas retas" era sobre tirar o excesso de 22px + sombra difusa, não
     sobre eliminar o raio. */
  /* ⚠️ ESCALA ÚNICA DE RAIO — v8.7
     Antes havia 18 valores diferentes espalhados (0, 2px, 8, 9, 10, 12, 14,
     18, 20, 28...) e a plataforma misturava canto reto com arredondado.
     Agora TODO canto usa um destes três. Sem px solto.

       --r-lg  contêineres: card, seção, modal, painel
       --r-md  controles: campo, botão quadrado, thumb, chip
       --r-sm  detalhes: barra de progresso, marcador, tag pequena

     Exceções legítimas, e só estas: 999px (pílula) e 50% (círculo). */
  --r-lg: 10px;
  --r-md: 8px;
  --r-sm: 6px;
  /* contêiner FLUTUANTE (menu lateral, painel do celular): mais arredondado
     que um card porque paira sobre a página — mas dentro da mesma escala,
     não um valor solto. */
  --r-float: 18px;
  /* bloco pequeno do mapa: proporcional ao próprio tamanho (~50px) */
  --r-bloco: 3px;
  /* ⚠️ ESCALA ÚNICA DE RAIO — v8.10
     As seções "ah-*" (home/dashboard) cresceram depois da v8.7 com px
     soltos de novo (9, 11, 12, 13, 14, 16, 17, 19, 20, 22, 24, 28...) —
     auditoria de frontend encontrou 53 ocorrências fora da escala.
     Consolidado nos 3 valores mais usados de fato (sem mudar nenhum raio
     em mais de ~2px do que já estava): os isolados foram arredondados pro
     degrau mais próximo, os que se repetiam viraram degrau novo. */
  --r-xl: 12px;   /* ícone/ação um degrau acima de --r-md: goal-icon, achievement-icon */
  --r-2xl: 20px;  /* card/painel "ah-*": goals, live, news, community-card */
  --r-3xl: 24px;  /* destaque grande: hero, bloco de comunidade em featured */

  /* ⚠️ ESCALA DE RECUO — v8.9
     O conteúdo dentro de um card e o cabeçalho de seção fora dele precisam
     compartilhar a MESMA margem esquerda, senão os títulos ficam deslocados
     em relação ao conteúdo que anunciam. */
  --pad-card: 20px;   /* respiro interno de card, widget, painel */
  --pad-edge: 2px;    /* recuo de título de seção (fora de card) */
  --shadow: none;   /* v8: containers não flutuam mais */
  --shadow-pop: 0 2px 4px rgba(11,11,30,.05), 0 24px 48px -20px rgba(11,11,30,.22);
  /* Família única: Montserrat. As três variáveis continuam existindo porque
     115 regras dependem delas e porque marcam INTENÇÃO diferente — display
     para títulos, body para leitura, mono para dados. Se um dia voltar a ter
     três famílias, basta trocar aqui. */
  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Montserrat', sans-serif;
  --font-mono: 'Montserrat', sans-serif;

  /* Escala tipográfica semântica. Elementos com a mesma função usam o
     mesmo token, ainda que apareçam em componentes diferentes. */
  --type-context-label: 9.5px;
  --type-section-title: 18px;
  --type-card-title: 15.5px;
  --type-widget-title: 13.5px;
  --type-content-title: 14.5px;
  --type-action-small: 12px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);background:var(--bg);color:var(--ink);
  font-size:14.5px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
input{font-family:inherit}
/* ⚠️ Montserrat não é monoespaçada. Onde antes a IBM Plex Mono alinhava os
   dígitos por natureza, agora é o tabular-nums que faz isso — sem ele um
   contador de "917" para "1.024" faz o layout pular. */
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
/* ⚠️ .card não é mais uma caixa flutuante: é uma SEÇÃO separada por linha.
   Sem sombra, sem raio, sem fundo próprio — o conteúdo corre sobre o mesmo
   fundo da página. Onde a caixa flutuante tem função (modal, painel do
   pomodoro, formulário do admin) existe .card-float. */
/* v8.4 — recalibrado pelas referências: o card TEM superfície de novo.
   O que não volta é a sombra difusa e o raio de 22px do v7. Plano e
   delimitado, não flutuante. */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:none;padding:var(--pad-card)}
.eyebrow{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--type-context-label);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.divider{height:1px;background:var(--line);border:none}

/* shell interna das páginas */
.shell{
  max-width:1320px;width:100%;margin:0 auto;padding:4px 0 40px;
  display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start;
}
.shell.one{grid-template-columns:minmax(0,1fr)}
.col-right{position:sticky;top:22px;min-width:0}

/* ============================================================
   AVATARES / TAGS / BOTÕES
   ============================================================ */
.avatar{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px}
.avatar.sm{width:30px;height:30px;font-size:11px}
.avatar.xs{width:24px;height:24px;font-size:9.5px}
.avatar.lg{width:52px;height:52px;font-size:18px}
.av-1{background:linear-gradient(135deg,#0000F9,#5A5AFF)}
.av-2{background:linear-gradient(135deg,#7C3AED,#C084FC)}
.av-3{background:linear-gradient(135deg,#0F766E,#2DD4BF)}
.av-4{background:linear-gradient(135deg,#B45309,#F59E0B)}
.av-5{background:linear-gradient(135deg,#BE123C,#FB7185)}
.av-6{background:linear-gradient(135deg,#0000B4,#0000F9)}
.tag{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:10.5px;font-weight:600;letter-spacing:.03em;padding:4px 10px;border-radius:999px;border:1px solid}
.tag-blue{color:var(--brand);border-color:#C4C4FF;background:var(--brand-soft)}
.tag-orange{color:#C2410C;border-color:#FFD3B5;background:var(--accent-soft)}
.tag-green{color:#0F7A44;border-color:#BDE8D0;background:#EBFAF1}
.tag-purple{color:#6D28D9;border-color:#DDD0FA;background:#F5F0FF}
.btn-primary{background:var(--brand);color:#fff;font-weight:700;font-size:13px;padding:11px 20px;border-radius:999px;box-shadow:none}
.btn-outline{border:1px solid var(--line);background:#fff;font-weight:600;font-size:13px;padding:10px 18px;border-radius:999px;color:var(--ink-soft)}
.btn-solid{background:#fff;color:var(--brand-deep);font-weight:700;font-size:13.5px;padding:12px 22px;border-radius:999px}
/* ⚠️ .btn não existia: qualquer link com essa classe renderizava como
   texto puro. Botão primário sólido, para ação principal de página. */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--brand);color:#fff;
  font-weight:700;font-size:13.5px;
  padding:12px 22px;border-radius:999px;border:0;cursor:pointer;
  box-shadow:0 6px 16px -6px color-mix(in srgb, var(--brand) 70%, transparent);
}
@media (hover:hover){
  .btn:hover{background:var(--brand-deep, #0000C4);color:#fff}
}
.btn svg{width:16px;height:16px}

.btn-ghost{border:1px solid rgba(255,255,255,.4);color:#fff;font-weight:600;font-size:13.5px;padding:11px 20px;border-radius:999px}
.btn-light{background:#fff;color:var(--brand-deep);font-weight:700;font-size:13px;padding:10px 20px;border-radius:999px}

/* ============================================================
   FAIXA DE STATS (números grandes, estilo FINNOVA)
   ============================================================ */

/* ============================================================
   OBJETIVOS DE NÍVEL
   ============================================================ */
.goals-card{margin-bottom:18px;overflow:hidden}
.goals-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px 12px}
.goals-head h3{font-family:var(--font-display);font-size:var(--type-card-title);font-weight:700}
.goals-head span{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:10.5px;color:var(--ink-faint)}
.lvl-track{display:flex;gap:7px;padding:38px 22px 8px;position:relative}
.lvl-seg{flex:1;position:relative}
.lvl-seg .rail-x{height:8px;border-radius:var(--r-md);background:var(--line);overflow:hidden}
.lvl-seg .rail-x i{display:block;height:100%;background:var(--grad);border-radius:var(--r-md)}
.lvl-seg small{display:block;text-align:center;font-size:10.5px;font-weight:600;color:var(--ink-faint);margin-top:8px}
.lvl-seg.done small{color:var(--ink-soft)}
.lvl-seg.now small{color:var(--brand);font-weight:700}
.lvl-marker{position:absolute;top:-30px;transform:translateX(-50%);transition:left .3s ease}
.lvl-marker .chip{position:relative;display:inline-flex;align-items:center;gap:4px;background:var(--brand);color:#fff;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:10px;font-weight:700;padding:4px 9px;border-radius:999px;white-space:nowrap;box-shadow:none}
.lvl-marker .chip svg{width:13px;height:13px}
.lvl-marker .chip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:4px solid transparent;border-top-color:var(--brand)}
.rings{display:flex;padding:20px 22px 22px;gap:14px}
.ring-item{flex:1;text-align:center}
.ring-wrap{position:relative;width:104px;height:104px;margin:0 auto}
.ring-wrap svg{transform:rotate(-90deg)}
.ring-val{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
.ring-val b{font-family:var(--font-display);font-size:24px;font-weight:700;letter-spacing:-.015em}
.ring-val small{font-size:10.5px;color:var(--ink-faint)}
.ring-item h5{font-size:12.5px;font-weight:600;margin-top:9px}
.ring-item a{display:inline-block;font-size:11.5px;font-weight:700;color:var(--accent);margin-top:3px}

/* ============================================================
   COMPOSER + FEED
   ============================================================ */
.composer{padding:16px 18px 13px;margin-bottom:18px}
.post{margin-bottom:18px;overflow:hidden}
.play-badge{width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.16);backdrop-filter:blur(4px);display:grid;place-items:center;border:1.5px solid rgba(255,255,255,.5)}

/* ============================================================
   WIDGETS DA COLUNA DIREITA
   ============================================================ */
.widget{margin-bottom:18px}
.widget-head{display:flex;align-items:center;justify-content:space-between;padding:17px var(--pad-card) 11px}
.widget-head h4{font-family:var(--font-display);font-size:var(--type-widget-title);font-weight:700}
.widget-head a:not([class]){font-size:var(--type-action-small);font-weight:600;color:var(--brand)}  /* idem linha 272 */
.live-strip{margin:0 14px 14px;border-radius:var(--r-md);padding:15px;background:var(--rail);color:#fff;position:relative;overflow:hidden}
.live-strip::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 100% 0%,rgba(255,111,29,.32),transparent 55%)}
.live-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--type-context-label);font-weight:700;letter-spacing:.08em;color:#FFB27D;position:relative;z-index:1}
.live-badge i{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.live-strip b{display:block;font-family:var(--font-display);font-size:var(--type-content-title);margin:6px 0 2px;position:relative;z-index:1}
.live-strip span:not(.live-badge){font-size:12px;opacity:.75;position:relative;z-index:1}
.trend{display:flex;gap:12px;padding:10px 18px;align-items:baseline}
.trend:hover{background:var(--bg)}
.trend .n{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:11px;color:var(--ink-faint);width:18px;flex-shrink:0}
.trend b{font-size:13px;font-weight:600;display:block;line-height:1.35}
.trend span{font-size:11.5px;color:var(--ink-faint)}

/* ---------- LIGA: painel escuro de destaque ---------- */
.league-card{position:relative;overflow:hidden;margin-bottom:18px;background:var(--rail);border:none;color:#fff;box-shadow:var(--shadow-pop)}
.league-head{padding:17px 18px 4px;display:flex;align-items:center;gap:10px;position:relative}
.league-card::before{content:"";position:absolute;inset:0;height:180px;background:radial-gradient(90% 140% at 100% 0%,rgba(0,0,249,.5),transparent 60%),radial-gradient(50% 80% at 0% 0%,rgba(255,111,29,.25),transparent 55%);pointer-events:none}
.league-head h4{font-family:var(--font-display);font-size:16.5px;font-weight:700}
.league-chip{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:9px;font-weight:600;letter-spacing:.1em;border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:2px 8px;color:rgba(255,255,255,.75)}
.league-stamp{margin-left:auto;width:50px;height:50px;border-radius:50%;border:2px dashed rgba(255,255,255,.4);display:grid;place-items:center;flex-shrink:0;text-align:center;line-height:1}
.league-stamp small{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:6.5px;letter-spacing:.08em;display:block;margin-top:2px;opacity:.85}
.lg-timer{padding:8px 18px 4px;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.6);position:relative}
.lg-timer b{color:var(--accent);font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.lg-track{display:flex;gap:6px;padding:10px 18px 14px;position:relative}
.lg-tile{flex:1;aspect-ratio:3/4.4;border-radius:var(--r-md);background:rgba(255,255,255,.08);display:grid;place-items:center;color:rgba(255,255,255,.35)}
.lg-tile.done{background:rgba(90,90,255,.22);color:var(--brand-glow)}
.lg-tile.now{background:linear-gradient(160deg,var(--brand),var(--brand-glow));color:#fff;flex:1.7;box-shadow:none}
.lg-tile.now span{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:9.5px;font-weight:600;letter-spacing:.14em}
.lg-list{border-top:1px solid var(--line-dark)}
.lg-row{display:flex;align-items:center;gap:10px;padding:10px var(--pad-card);font-size:13px}
.lg-row .pos{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:12px;font-weight:600;width:20px;color:rgba(255,255,255,.45)}
.lg-row b{font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:rgba(255,255,255,.85)}
.lg-row .km{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:12px;font-weight:600;color:rgba(255,255,255,.55)}
.lg-row.me{background:rgba(0,0,249,.35)}
.lg-row.me .pos,.lg-row.me b,.lg-row.me .km{color:#fff;font-weight:700}
.lg-row.down .pos,.lg-row.down b,.lg-row.down .km{color:#FB7185}
.lg-releg{text-align:center;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:9.5px;font-weight:600;letter-spacing:.14em;color:#FB7185;padding:8px 0 4px;border-top:1px dashed rgba(251,113,133,.35);margin-top:4px}
.lg-foot{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;border-top:1px solid var(--line-dark)}
.lg-foot .total{display:flex;align-items:baseline;gap:8px}
.lg-foot .total b{font-family:var(--font-display);font-size:19px}
.lg-foot .total span{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:8.5px;letter-spacing:.08em;border:1px solid rgba(255,255,255,.25);padding:2px 7px;border-radius:var(--r-md);color:rgba(255,255,255,.55)}
.lg-foot a{font-size:11.5px;font-weight:600;color:var(--brand-glow);text-decoration:underline}

/* ============================================================
   COMUNIDADE
   ============================================================ */
.comm-hero{padding:24px;margin-bottom:20px;display:flex;align-items:center;gap:18px;background:var(--rail);color:#fff;border-radius:var(--r-lg);position:relative;overflow:hidden;box-shadow:var(--shadow-pop)}
.comm-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 120% at 100% 0%,rgba(0,0,249,.5),transparent 60%),radial-gradient(45% 80% at 0% 100%,rgba(255,111,29,.25),transparent 55%)}
.comm-hero > *{position:relative;z-index:1}
.comm-hero h2{font-family:var(--font-display);font-size:22px;font-weight:700;letter-spacing:-.01em}
.comm-hero p{font-size:13px;opacity:.8;margin-top:3px}
.comm-hero .btn-light{margin-left:auto;flex-shrink:0}
.feed-tabs{display:flex;gap:7px;margin-bottom:16px}
.ftab{padding:9px 18px;border-radius:999px;font-weight:600;font-size:13px;color:var(--ink-soft);border:1px solid transparent}
.ftab:hover{background:#fff;border-color:var(--line)}
.ftab.on{background:var(--ink);color:#fff}
.vote-post{display:flex;margin-bottom:16px;overflow:hidden}
.vote-rail{width:54px;flex-shrink:0;background:var(--bg);border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;padding:16px 0;gap:3px}
.vote-rail button{color:var(--ink-faint);display:grid;place-items:center;width:28px;height:24px;border-radius:var(--r-md)}
.vote-rail button:hover{background:#fff;color:var(--accent)}
.vote-rail .up.voted{color:var(--accent)}
.vote-n{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:600}
.vote-main{flex:1;padding:16px 20px;min-width:0}
.vote-meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-faint);margin-bottom:6px;flex-wrap:wrap}
.vote-meta .c-name{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:12px;font-weight:600;color:var(--ink)}
.vote-main h3{font-family:var(--font-display);font-size:15.5px;font-weight:600;letter-spacing:-.01em;margin-bottom:5px}
.vote-main p{font-size:13.5px;color:var(--ink-soft)}
.vote-actions{display:flex;gap:14px;margin-top:11px;font-size:12px;font-weight:600;color:var(--ink-faint)}
.vote-actions span{display:flex;align-items:center;gap:6px}
.pin{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:10px;font-weight:600;letter-spacing:.08em;color:var(--ok);text-transform:uppercase;display:inline-flex;align-items:center;gap:5px}
.answered{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:10px;font-weight:600;letter-spacing:.06em;color:#fff;background:var(--ok);padding:3px 9px;border-radius:999px;text-transform:uppercase}
.profile-stats{display:flex;gap:0;margin-top:20px;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.pstat{flex:1;padding:14px var(--pad-card);background:var(--surface-2)}
.pstat + .pstat{border-left:1px solid var(--line)}
.pstat b{font-family:var(--font-display);font-size:21px;font-weight:700;display:block;letter-spacing:-.015em}
.pstat span{font-size:11.5px;color:var(--ink-faint)}

/* ============================================================
   CURSOS
   ============================================================ */
.courses-hero{border-radius:var(--r-lg);overflow:hidden;margin-bottom:26px;position:relative;background:var(--rail);color:#fff;padding:36px 36px 32px;box-shadow:var(--shadow-pop)}
.courses-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 130% at 100% 0%,rgba(0,0,249,.55),transparent 55%),radial-gradient(45% 70% at 0% 100%,rgba(255,111,29,.3),transparent 55%)}
.courses-hero > *{position:relative;z-index:1}
.hero-logo{position:absolute;top:28px;right:34px;opacity:.95;z-index:1}
.courses-hero .eyebrow{color:#FFB27D}
.courses-hero h2{font-family:var(--font-display);font-size:31px;font-weight:700;letter-spacing:-.015em;max-width:640px;margin:8px 0 6px}
.courses-hero p{font-size:14.5px;opacity:.82;max-width:560px}
.hero-row{display:flex;align-items:center;gap:14px;margin-top:22px}
.progress-pill{margin-left:auto;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:var(--r-md);padding:13px 17px;min-width:260px}
.progress-pill small{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:10px;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.progress-pill b{display:block;font-family:var(--font-display);font-size:13.5px;margin:3px 0 9px}
.bar{height:6px;border-radius:var(--r-md);background:rgba(255,255,255,.18);overflow:hidden}
.bar i{display:block;height:100%;border-radius:var(--r-md);background:var(--grad)}
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin:28px var(--pad-edge) 15px}
.section-head h3{font-family:var(--font-display);font-size:var(--type-section-title);font-weight:700;letter-spacing:-.01em}
.section-head a:not([class]){font-size:var(--type-action-small);font-weight:600;color:var(--brand)}
/* ⚠️ :not([class]) é essencial. Sem ele, .section-head a (especificidade 0,1,1)
   vence .btn-primary (0,1,0) e pinta o TEXTO de var(--brand) — mesma cor do
   fundo do botão. Resultado: botão azul sem texto nenhum. */
.course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.course-card{overflow:hidden;display:flex;flex-direction:column;transition:.18s}
.course-card:hover{border-color:var(--ink-faint)}
.cc-thumb{aspect-ratio:16/8.2;position:relative;display:grid;place-items:center;color:#fff}
.cc-thumb .modcount{position:absolute;right:12px;bottom:10px;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:10.5px;background:rgba(var(--navy-surface-rgb),.55);backdrop-filter:blur(3px);padding:3px 9px;border-radius:999px}
.cc-body{padding:15px 18px 17px;display:flex;flex-direction:column;flex:1}
.cc-body .tag{align-self:flex-start;margin-bottom:10px}
.cc-body h4{font-family:var(--font-display);font-size:var(--type-content-title);font-weight:600;letter-spacing:-.01em;line-height:1.35;margin-bottom:5px}
.cc-body p{font-size:12.5px;color:var(--ink-soft);flex:1}
.cc-foot{display:flex;align-items:center;gap:9px;margin-top:14px;padding-top:13px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-faint)}
.cc-foot b{color:var(--ink);font-weight:600;font-size:12.5px}
.cc-foot .rate{margin-left:auto;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:11.5px;color:#B45309;font-weight:600}
.cbar{height:4px;background:var(--line)}
.cbar i{display:block;height:100%;background:var(--grad)}
.th-1{background:linear-gradient(135deg,#0000B4,#0000F9)}
.th-2{background:linear-gradient(135deg,#052E1F,#14A35C)}
.th-3{background:linear-gradient(135deg,#3B0764,#7C3AED)}
.th-4{background:linear-gradient(135deg,#7A2E0E,#F97316)}
.th-5{background:linear-gradient(135deg,var(--navy-surface),#3A3A8C)}
.th-6{background:linear-gradient(135deg,#831843,#EC4899)}
.mat-row{display:flex;gap:16px;overflow-x:auto;padding:2px 2px 16px;scroll-snap-type:x mandatory}
.mat-row::-webkit-scrollbar{height:8px}
.mat-row::-webkit-scrollbar-thumb{background:var(--line);border-radius:var(--r-md)}
.mat-card{flex:0 0 252px;scroll-snap-align:start;overflow:hidden;display:flex;flex-direction:column}
.mat-thumb{aspect-ratio:16/9;position:relative;display:grid;place-items:center;color:#fff}
.mat-ribbon{position:absolute;top:0;left:0;right:0;background:var(--brand);color:#fff;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:9.5px;font-weight:600;letter-spacing:.1em;text-align:center;padding:5px 0}
.mat-ribbon.hot{background:var(--accent)}
.mat-body{padding:13px 16px 15px;display:flex;flex-direction:column;flex:1}
.mat-type{align-self:flex-start;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:9.5px;font-weight:600;letter-spacing:.06em;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:3px 9px;color:var(--ink-soft);margin-bottom:8px}
.mat-body h5{font-family:var(--font-display);font-size:13px;font-weight:600;line-height:1.35;margin-bottom:4px}
.mat-body em{font-style:normal;font-size:11.5px;font-weight:600;color:var(--brand);margin-bottom:5px}
.mat-body p{font-size:11.5px;color:var(--ink-soft);flex:1}
.mat-body a{font-size:12px;font-weight:700;color:var(--accent);margin-top:10px}

/* --- Próximas aulas ao vivo (Meus cursos) — antes era 100% inline style --- */
.nl-row{display:flex;overflow:hidden}
.nl-item{flex:1;min-width:0;padding:18px;display:flex}
.nl-item+.nl-item{border-left:1px solid var(--line)}
.nl-chip{display:none}
.nl-when-sm{display:none}
.nl-body{min-width:0}
.nl-body h4{font-family:var(--font-display);font-size:14.5px;font-weight:600;line-height:1.3;margin:6px 0 4px}
.nl-body p{font-size:12.5px;color:var(--ink-soft);line-height:1.35}
.nl-item.is-live .nl-when,.nl-item.is-live .nl-when-sm{color:var(--accent)}

/* ============================================================
   PERFIL
   ============================================================ */
.profile-cover{height:196px;border-radius:var(--r-lg) var(--r-lg) 0 0;background:var(--rail);position:relative;overflow:hidden}
/* sem foto: gradiente decorativo (ícone + linha pontilhada). Com foto
   (.has-photo), o ::after some — senão pintaria por cima da imagem, já
   que conteúdo gerado é pintado depois dos filhos reais no DOM. */
.profile-cover.has-photo::after{content:none}

/* moldura digital (recompensa 100% digital — ver App\Support\MolduraStyles):
   anel decorativo ao redor da capa do perfil E do avatar, aplicado via
   classe .moldura-{chave} nos dois (ver profile.blade.php). Pedido do
   Arthur, depois da v1 (só um box-shadow de 2 cores): "estão simples
   demais, quero elas mais trabalhadas, a pessoa precisa ter a sensação
   de estar resgatando algo premium mesmo."

   3 camadas por variante, todas em cima do MESMO truque de sempre:
   .profile-cover e .profile-avatar têm overflow:hidden (recortam a capa/
   foto redonda), e overflow só corta CONTEÚDO que ultrapassa a caixa —
   nunca a box-shadow do próprio elemento, e nunca um pseudo-elemento que
   fica TODO dentro dela (inset:0). Por isso nada aqui usa `border` nem
   sai da caixa com inset negativo.

   1) baixo-relevo — inset box-shadow (luz fina em cima, sombra embaixo)
      dá volume de metal/vidro de verdade, não só uma linha chapada;
   2) anel em camadas — fininho branco → cor cheia → cor escura → glow
      difuso, tudo em box-shadow, mais grosso e com mais profundidade
      que a v1;
   3) brilho diagonal animado (::before, inset:0 — por isso não é
      cortado) deslizando devagar sobre a capa inteira, tipo o "glint"
      de item raro em loja de jogo. mix-blend-mode:overlay pra não
      lavar a cor por baixo (capa com foto OU sem foto).
   Neon ainda pulsa (glow variando de brilho) — as outras duas ficam
   paradas, o brilho que já desliza é suficiente; pulsar as 3 ficava
   cansativo de olhar num perfil que fica a tela toda aberta.
   prefers-reduced-motion desliga as duas animações. */
.profile-cover[class*="moldura-"]::before{
  content:"";
  position:absolute; inset:0;
  z-index:2;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(115deg,
    transparent 32%,
    rgba(255,255,255,.55) 47%,
    rgba(255,255,255,.18) 53%,
    transparent 70%);
  background-size:230% 230%;
  background-position:130% -30%;
  mix-blend-mode:overlay;
  animation:moldura-brilho 5.5s ease-in-out infinite;
}
/* ⚠️ .profile-avatar não tem position própria (position:static) — sem
   isto o ::before absolute usaria .profile-top (o ancestral relative
   mais próximo) como referência e cobriria a linha toda, não só o
   círculo. */
.profile-avatar[class*="moldura-"]{ position:relative; }
.profile-avatar[class*="moldura-"]::before{
  content:"";
  position:absolute; inset:0;
  z-index:2;
  pointer-events:none;
  border-radius:50%;
  background:linear-gradient(125deg, rgba(255,255,255,.6), transparent 58%);
  mix-blend-mode:overlay;
}
@keyframes moldura-brilho{
  0%,12%  { background-position:130% -30%; }
  55%     { background-position:-30% 130%; }
  100%    { background-position:-30% 130%; }
}
@media (prefers-reduced-motion: reduce){
  .profile-cover[class*="moldura-"]::before{ animation:none; background-position:20% 0%; }
}

/* ---- Ouro — metal dourado, baixo-relevo + brilho ---- */
.profile-cover.moldura-ouro{
  box-shadow:
    inset 0 2px 0 rgba(255,247,214,.55),
    inset 0 -3px 6px rgba(90,58,10,.35),
    0 0 0 3px #fff,
    0 0 0 5px #f2c463,
    0 0 0 7.5px #9c6a1c,
    0 16px 34px -12px rgba(219,165,54,.7);
}
.profile-avatar.moldura-ouro{
  border-color:#f2c463;
  box-shadow:
    inset 0 1.5px 0 rgba(255,247,214,.6),
    inset 0 -2px 4px rgba(90,58,10,.4),
    0 0 0 3px #fff,
    0 0 0 6px #9c6a1c,
    0 10px 22px -8px rgba(219,165,54,.75);
}

/* ---- Gelo — cristal / vidro fosco, baixo-relevo + brilho ---- */
.profile-cover.moldura-gelo{
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.7),
    inset 0 -3px 6px rgba(18,86,112,.3),
    0 0 0 3px #fff,
    0 0 0 5px #bdeeff,
    0 0 0 7.5px #4fb3e0,
    0 16px 34px -12px rgba(111,208,246,.65);
}
.profile-avatar.moldura-gelo{
  border-color:#bdeeff;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.75),
    inset 0 -2px 4px rgba(18,86,112,.35),
    0 0 0 3px #fff,
    0 0 0 6px #4fb3e0,
    0 10px 22px -8px rgba(111,208,246,.7);
}

/* ---- Neon Roxo — vidro escuro + glow pulsante (a única que pulsa —
   combina com o tema "neon", as outras duas ficariam artificiais) ---- */
.profile-cover.moldura-neon-roxo{
  box-shadow:
    inset 0 2px 0 rgba(232,178,255,.35),
    inset 0 -3px 8px rgba(15,3,28,.55),
    0 0 0 3px #0a0a14,
    0 0 0 5px #a83bf0,
    0 0 22px 4px rgba(168,59,240,.6),
    0 0 46px 10px rgba(168,59,240,.32);
  animation:moldura-pulso-neon 2.6s ease-in-out infinite;
}
.profile-avatar.moldura-neon-roxo{
  border-color:#a83bf0;
  box-shadow:
    inset 0 1.5px 0 rgba(232,178,255,.4),
    inset 0 -2px 5px rgba(15,3,28,.6),
    0 0 0 3px #0a0a14,
    0 0 0 5px #a83bf0,
    0 0 16px 3px rgba(168,59,240,.65);
  animation:moldura-pulso-neon 2.6s ease-in-out infinite;
}
@keyframes moldura-pulso-neon{
  0%,100%{ filter:brightness(1); }
  50%    { filter:brightness(1.16); }
}
@media (prefers-reduced-motion: reduce){
  .profile-cover.moldura-neon-roxo,
  .profile-avatar.moldura-neon-roxo{ animation:none; }
}

/* ---- v2: moldações de VERDADE nos cantos — pedido do Arthur depois de
   ver referências (certificado com cantos ornamentados, borda tracejada
   com bolinha no canto): "quero colocar algum estilo na volta, algo que
   realmente mude o perfil", o anel de cor sozinho não bastava.

   Ouro e Gelo ganham um ORNAMENTO DE CANTO (moldura-corner, 4 <span>
   em profile.blade.php, só a caixa retangular da capa — o avatar é
   redondo, canto não existe nele, por isso só .profile-cover usa isto).
   Um SVG só por variante (público, não upload de usuário — mesmo
   espírito de logo-dark-bg.svg), aplicado como MASK em vez de
   background-image: a forma fica em public/img/molduras/*.svg sem cor
   nenhuma, e cada variante pinta com background-color — assim os dois
   reaproveitam infraestrutura, só a cor (e o desenho) muda. Os 4 cantos
   são o MESMO arquivo espelhado por transform:scale(-1) — desenhar um
   canto só e espelhar garante que os 4 ficam simétricos de verdade.

   Neon Roxo não usa canto — ganha uma borda tracejada + 4 bolinhas
   brilhantes (::after, puro CSS, sem SVG) que lembra fio de led/circuito,
   mais a cara do tema do que um ornamento clássico. */
.moldura-corner{
  position:absolute;
  width:15%; height:26%;
  max-width:46px; max-height:46px;
  min-width:26px; min-height:26px;
  z-index:3;
  pointer-events:none;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:0 0; mask-position:0 0;
  -webkit-mask-size:contain; mask-size:contain;
}
.moldura-corner--tl{ top:5px; left:5px; }
.moldura-corner--tr{ top:5px; right:5px; transform:scaleX(-1); }
.moldura-corner--bl{ bottom:5px; left:5px; transform:scaleY(-1); }
.moldura-corner--br{ bottom:5px; right:5px; transform:scale(-1,-1); }

.profile-cover.moldura-ouro .moldura-corner{
  -webkit-mask-image:url('/img/molduras/corner-flourish.svg');
  mask-image:url('/img/molduras/corner-flourish.svg');
  background-color:#f2c463;
  filter:drop-shadow(0 1px 2px rgba(90,58,10,.5));
}
.profile-cover.moldura-gelo .moldura-corner{
  -webkit-mask-image:url('/img/molduras/corner-crystal.svg');
  mask-image:url('/img/molduras/corner-crystal.svg');
  background-color:#d8f4ff;
  filter:drop-shadow(0 1px 2px rgba(18,86,112,.5));
}
/* neon-roxo não define mask-image — os 4 <span class="moldura-corner">
   continuam no HTML (mesmo partial pras 3 variantes), mas sem
   mask-image eles não têm o que recortar e ficam invisíveis; o efeito
   dela é só o ::after logo abaixo. */

.profile-cover.moldura-neon-roxo::after{
  content:"";
  position:absolute; inset:7px;
  z-index:3;
  pointer-events:none;
  border-radius:inherit;
  border:2px dashed #d9a8ff;
  opacity:.9;
}
.cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cover-logo{position:absolute;top:22px;left:30px;opacity:.95;z-index:1}
.route-line{position:absolute;left:34px;right:34px;bottom:34px;height:2px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.4) 0 10px,transparent 10px 20px)}
.route-line::before,.route-line::after{content:"";position:absolute;top:-4px;width:10px;height:10px;border-radius:50%;background:#fff}
.route-line::before{left:0}
.route-line::after{right:0;background:var(--accent)}
.profile-card{border-radius:0 0 var(--r-lg) var(--r-lg);border-top:none;padding:0 28px 24px;margin-bottom:20px}
.profile-top{display:flex;align-items:flex-end;gap:20px;padding-top:16px;position:relative}
.profile-avatar{width:98px;height:98px;flex:0 0 98px;border-radius:50%;overflow:hidden;border:4px solid #fff;background:linear-gradient(135deg,#0000F9,#5A5AFF);display:grid;place-items:center;color:#fff;font-family:var(--font-display);font-weight:700;font-size:30px;box-shadow:var(--shadow);margin-top:-64px;letter-spacing:-.015em}
.profile-id{flex:1;padding-bottom:4px}
.profile-id h2{font-family:var(--font-display);font-size:22px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.verified{width:18px;height:18px;border-radius:50%;background:var(--grad);display:inline-grid;place-items:center}
.profile-id p{font-size:13px;color:var(--ink-soft)}
.profile-id .mono-id{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:11px;color:var(--ink-faint)}
.profile-actions{display:flex;gap:9px;padding-bottom:6px}
.game-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
.game-tile{border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;background:var(--surface-2)}
.game-tile .gt-head{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.game-tile b{font-family:var(--font-display);font-size:20px;font-weight:700;display:block;margin-top:5px;letter-spacing:-.015em}
.game-tile small{font-size:11px;color:var(--ink-faint)}
.gt-streak .gt-head{color:var(--accent)}
.gt-level .gt-head{color:var(--brand)}
.gt-league .gt-head{color:var(--brand)}
.gt-km .gt-head{color:var(--ok)}
.xp-line{display:flex;align-items:center;gap:9px;margin-top:6px}
.xp-bar{flex:1;height:6px;border-radius:var(--r-md);background:var(--line);overflow:hidden}
.xp-bar i{display:block;height:100%;background:var(--grad)}
.xp-line small{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:10.5px;color:var(--ink-faint)}
.badge-row{display:flex;gap:10px;flex-wrap:wrap;padding:14px 18px}
.badge{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:var(--r-md);padding:10px 14px;background:var(--surface-2)}
.badge-icon{width:34px;height:34px;border-radius:var(--r-md);display:grid;place-items:center;color:#fff;flex-shrink:0;font-size:16px;line-height:1}
.badge b{font-size:12.5px;font-weight:600;display:block;line-height:1.25}
.badge span{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:10px;color:var(--ink-faint)}
.cert{display:flex;align-items:center;gap:13px;padding:14px var(--pad-card);transition:.15s;position:relative}
.cert:hover{background:linear-gradient(90deg,#FFF9EE,transparent)}
.cert-icon{
  width:44px;height:44px;border-radius:var(--r-md);flex-shrink:0;
  display:grid;place-items:center;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#F59E0B 0%,#FBBF24 45%,#F97316 100%);
  box-shadow:0 6px 16px -6px rgba(245,158,11,.6), inset 0 1px 0 rgba(255,255,255,.4);
}
.cert-icon::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 32% 25%,rgba(255,255,255,.55),transparent 60%);pointer-events:none}
.cert-icon svg{position:relative;z-index:1;filter:drop-shadow(0 1px 1px rgba(120,60,0,.25))}
.cert b{font-size:13.5px;font-weight:600;display:block;color:var(--ink);line-height:1.35}
.cert span{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:11px;color:var(--ink-soft)}
.cert .cert-badge{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:9px;font-weight:600;letter-spacing:.08em;color:#B45309;background:#FEF3C7;border-radius:999px;padding:2px 7px;margin-top:3px}
.cert .btn-outline{margin-left:auto;padding:7px 15px;font-size:12px;font-weight:600;border-color:#F5C77E;color:#B45309;background:#FFFBF3}
.cert .btn-outline:hover{background:#FEF3C7;border-color:#F59E0B}

/* Certificado DE TRILHA ("formação") — azul forte do Academy em vez do
   dourado do certificado de curso avulso. Usa as variáveis de marca (não
   hex fixo) pra herdar automaticamente os tons certos no dark mode — ver
   [data-theme="dark"] mais abaixo, onde --brand-soft/--brand-deep/--brand-glow
   já são redefinidos pro escuro. */
.cert.trilha:hover{background:linear-gradient(90deg,var(--brand-soft),transparent)}
.cert.trilha .cert-icon{
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-deep) 55%,var(--brand-glow) 100%);
  box-shadow:0 6px 16px -6px rgba(0,0,249,.55), inset 0 1px 0 rgba(255,255,255,.4);
}
.cert.trilha .cert-icon svg{filter:drop-shadow(0 1px 1px rgba(0,0,80,.3))}
.cert.trilha .cert-badge{color:var(--brand-deep);background:var(--brand-soft)}
.cert.trilha .btn-outline{border-color:var(--brand-glow);color:var(--brand-deep);background:var(--brand-soft)}
.cert.trilha .btn-outline:hover{background:var(--brand-soft);border-color:var(--brand)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ============================================================
   HOME v4 — RADAR LOGÍSTICO (hero editorial + news)
   ============================================================ */

/* filtros de categoria */
.news-filters{display:flex;gap:7px;margin:4px 2px 14px;flex-wrap:wrap}

/* lista de notícias */

/* cursos recomendados */
.reco-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.reco-reason{
  display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:var(--type-context-label);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);margin-bottom:8px;
}
.reco-reason svg{flex-shrink:0}

/* ============================================================
   NEWS — BLOG
   ============================================================ */
.blog-featured{display:flex;overflow:hidden;margin-bottom:22px;min-height:280px}
.bf-media{flex:0 0 46%;position:relative;display:grid;place-items:center;color:#fff}
.bf-media .tag{position:absolute;top:16px;left:16px;background:rgba(var(--navy-surface-rgb),.5);border-color:rgba(255,255,255,.3);color:#fff;backdrop-filter:blur(4px)}
.bf-body{flex:1;padding:26px 28px;display:flex;flex-direction:column}
.bf-body h2{font-family:var(--font-display);font-size:23px;font-weight:700;letter-spacing:-.015em;line-height:1.25;margin:8px 0 10px}
.bf-body p{font-size:13.5px;color:var(--ink-soft);flex:1}
.bf-meta{display:flex;align-items:center;gap:10px;margin-top:16px;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:11px;color:var(--ink-faint)}
.blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.blog-card{overflow:hidden;display:flex;flex-direction:column;transition:.18s}
.blog-card:hover{border-color:var(--ink-faint)}
.bc-thumb{aspect-ratio:16/7.5;position:relative;display:grid;place-items:center;color:#fff}
.bc-thumb .tag{position:absolute;top:12px;left:12px;background:rgba(var(--navy-surface-rgb),.5);border-color:rgba(255,255,255,.3);color:#fff;backdrop-filter:blur(4px)}
.bc-body{padding:16px 18px 17px;display:flex;flex-direction:column;flex:1}
.bc-body h4{font-family:var(--font-display);font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.35;margin-bottom:6px}
.bc-body p{font-size:12.5px;color:var(--ink-soft);flex:1}
.bc-meta{display:flex;align-items:center;gap:8px;margin-top:13px;padding-top:12px;border-top:1px solid var(--line);font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:10.5px;color:var(--ink-faint)}
.bc-meta .read{margin-left:auto;display:flex;align-items:center;gap:5px}

/* página da matéria */
.article-hero{border-radius:var(--r-lg);overflow:hidden;position:relative;min-height:240px;display:flex;align-items:flex-end;color:#fff;box-shadow:var(--shadow-pop);margin-bottom:-56px}
.article-hero .tag{position:absolute;top:20px;left:22px;background:rgba(var(--navy-surface-rgb),.5);border-color:rgba(255,255,255,.3);color:#fff;backdrop-filter:blur(4px)}
.article-card{max-width:760px;margin:0 auto;position:relative;padding:34px 44px 40px}
.article-card h1{font-family:var(--font-display);font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.25}
.article-meta{display:flex;align-items:center;gap:12px;margin:14px 0 22px;padding-bottom:18px;border-bottom:1px solid var(--line);font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:11px;color:var(--ink-faint);flex-wrap:wrap}
.article-meta b{color:var(--ink);font-family:var(--font-body);font-size:12.5px}
.article-prose p{font-size:15px;line-height:1.75;color:var(--ink-read);margin-bottom:18px}
.article-prose p:first-of-type{font-size:16.5px;color:var(--ink);font-weight:500}
.article-prose p:first-of-type::first-letter{font-family:var(--font-display);font-size:44px;font-weight:700;float:left;line-height:.9;padding:4px 10px 0 0;color:var(--brand);letter-spacing:-.015em}
.article-back{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:13px;color:var(--ink-soft);margin-bottom:14px}
.article-back:hover{color:var(--ink)}

/* ============================================================
   AUTENTICAÇÃO
   ============================================================ */
.auth-split{display:flex;min-height:100vh;min-height:calc(var(--vh, 1vh) * 100)}
.auth-brand{
  flex:0 0 44%;background:var(--rail);color:#fff;position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;padding:48px 52px;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:24px 24px;
}
.auth-brand::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 110% at 100% 0%,rgba(0,0,249,.6),transparent 55%),
             radial-gradient(60% 90% at 0% 100%,rgba(255,111,29,.34),transparent 58%),
             radial-gradient(35% 45% at 85% 85%,rgba(90,90,255,.28),transparent 60%);
}
.auth-brand > *{position:relative;z-index:1}
.ab-logo{display:flex;align-items:center;gap:var(--brand-logo-gap)}
.ab-logo img{height:var(--brand-logo-icon-height);width:auto}
.ab-logo b{font-family:var(--brand-font);font-weight:var(--brand-wordmark-weight);font-size:var(--brand-wordmark-size);letter-spacing:var(--brand-wordmark-tracking);display:block;line-height:var(--brand-wordmark-line-height);color:var(--brand-wordmark-color-on-dark)}
.ab-logo small{margin-top:var(--brand-caption-gap-top);font-family:var(--brand-font);font-variant-numeric:tabular-nums;font-size:var(--brand-caption-size);font-weight:var(--brand-caption-weight);line-height:var(--brand-wordmark-line-height);letter-spacing:var(--brand-caption-tracking);color:var(--brand-caption-color-on-dark);text-transform:uppercase;display:block}
.ab-hero h1{font-family:var(--font-display);font-size:36px;font-weight:700;letter-spacing:-.02em;line-height:1.18;max-width:430px}
.ab-hero h1 em{font-style:normal;color:#FFB27D}
.ab-hero p{font-size:14.5px;opacity:.75;max-width:400px;margin-top:13px;line-height:1.5}
.ab-stats{display:flex;gap:30px;margin-top:30px}
.ab-stats b{font-family:var(--font-display);font-size:26px;font-weight:700;display:block;line-height:1;letter-spacing:-.01em}
.ab-stats span{display:block;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:5px}
.ab-road{position:relative;height:2px;margin-top:34px;max-width:420px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.4) 0 10px,transparent 10px 20px)}
.ab-road::before,.ab-road::after{content:"";position:absolute;top:-4px;width:10px;height:10px;border-radius:50%;background:#fff}
.ab-road::before{left:0}
.ab-road::after{right:0;background:var(--accent)}
.ab-foot{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:10.5px;color:rgba(255,255,255,.4)}
.auth-side{flex:1;display:grid;place-items:center;padding:40px}
.auth-card{width:100%;max-width:400px}
.auth-card h2{font-family:var(--font-display);font-size:24px;font-weight:700;letter-spacing:-.015em}
.auth-card .sub{font-size:13px;color:var(--ink-faint);margin:5px 0 24px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:600;color:var(--ink-soft);margin-bottom:6px}
.field-input{position:relative}
.field-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--ink-faint);pointer-events:none;transition:.15s}
.field-input:focus-within .field-icon{color:var(--brand)}
.field input{
  width:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:12px 16px 12px 40px;font-size:14px;color:var(--ink);outline:none;transition:.15s;
}
html.keyboard-nav .field input:focus-visible{border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,0,249,.1)}
.field-input:focus-within input{border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,0,249,.1)}
.field .err{display:block;font-size:11.5px;color:var(--danger);margin-top:5px;font-weight:600}
.auth-submit{width:100%;justify-content:center;display:flex;padding:13px;font-size:14px;margin-top:6px}
.auth-alt{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--ink-faint);font-size:11.5px}
.auth-alt hr{flex:1}
.btn-google{
  width:100%;display:flex;align-items:center;justify-content:center;gap:11px;
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:12px;
  font-weight:600;font-size:13.5px;color:var(--ink);box-shadow:var(--shadow);transition:.15s;
}
.btn-google:hover{border-color:var(--ink-faint)}
.auth-switch{text-align:center;font-size:13px;color:var(--ink-soft);margin-top:20px}
.auth-switch a{color:var(--brand);font-weight:700}

@media (max-width:760px){
  .auth-split{flex-direction:column;min-height:0}
  .auth-brand{flex:0 0 auto;padding:26px 22px 24px}
  .ab-hero h1{font-size:23px;max-width:none}
  .ab-hero p,.ab-road{display:none}
  .ab-stats{margin-top:18px;gap:22px}
  .ab-stats b{font-size:20px}
  .auth-side{padding:28px 20px 44px}
}

/* ============================================================
   FASE 2 — interações
   ============================================================ */
.km-toast{
  position:fixed;bottom:26px;left:50%;transform:translate(-50%, 80px);
  background:var(--ink);color:#fff;font-weight:600;font-size:13.5px;
  padding:13px 22px;border-radius:999px;box-shadow:var(--shadow-pop);
  z-index:100;opacity:0;transition:.35s cubic-bezier(.2,.9,.3,1.2);
  display:flex;align-items:center;gap:9px;
}
.km-toast.show{transform:translate(-50%, 0);opacity:1}
.km-toast .kt-km{color:#FFB27D;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.vote-rail button:disabled{opacity:.5}
.vote-rail .down.voted{color:var(--brand)}

/* formulário de publicação */
.pub-card{max-width:720px;margin:0 auto;padding:26px 30px 28px}
.pub-card h2{font-family:var(--font-display);font-size:20px;font-weight:700;margin-bottom:4px;letter-spacing:-.015em}
.pub-card .sub{font-size:13px;color:var(--ink-faint);margin-bottom:20px}
.field select,.field textarea{
  width:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:12px 16px;font-size:14px;color:var(--ink);outline:none;font-family:inherit;transition:.15s;
}
.field textarea{min-height:170px;resize:vertical;line-height:1.6}
/* seta customizada no <select> nativo, pra alinhar com a seta do combo de cidade */
.field select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  padding-right:36px;background-repeat:no-repeat;background-position:right 13px center;background-size:14px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238F8FA8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.field select:disabled{opacity:.6}
[data-theme="dark"] .field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236E6E8A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
html.keyboard-nav .field select:focus-visible,
html.keyboard-nav .field textarea:focus-visible{border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,0,249,.1)}
.kind-pills{display:flex;gap:8px;flex-wrap:wrap}
.kind-pill{position:relative}
.kind-pill input{position:absolute;inset:0;opacity:0;cursor:pointer}
.kind-pill span{display:inline-block;padding:9px 16px;border-radius:999px;border:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--ink-soft);background:#fff;transition:.12s}
.kind-pill input:checked + span{background:var(--ink);color:#fff;border-color:var(--ink)}
.pub-actions{display:flex;align-items:center;gap:12px;margin-top:20px}
.pub-hint{margin-left:auto;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:11px;color:var(--accent);font-weight:600}

/* página da thread */
.thread-main{padding:22px 26px}
.thread-main h1{font-family:var(--font-display);font-size:21px;font-weight:700;letter-spacing:-.015em;line-height:1.3;margin:8px 0 10px}
.thread-main .thread-body p{font-size:14.5px;line-height:1.7;color:var(--ink-read);margin-bottom:12px}
.reply{display:flex;gap:13px;padding:18px 22px}
.reply + .reply{border-top:1px solid var(--line)}
.reply.best{background:#F2FBF6;border-left:3px solid var(--ok)}
.reply-body{flex:1;min-width:0}
.reply-body .rb-meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-faint);margin-bottom:4px;flex-wrap:wrap}
.reply-body .rb-meta b{color:var(--ink);font-size:13px}
.reply-body p{font-size:13.5px;line-height:1.65;color:var(--ink-read)}
.reply-actions{margin-top:8px}
.btn-best{font-size:11.5px;font-weight:700;color:var(--ok);border:1px solid #BDE8D0;background:#fff;border-radius:999px;padding:6px 13px}
.btn-best:hover{background:#EBFAF1}
.reply-form{display:flex;gap:13px;padding:18px 22px;border-top:1px solid var(--line);background:var(--surface-2)}
.reply-form textarea{flex:1;min-height:74px}

/* ============================================================
   FASE 3 — cursos e aulas
   ============================================================ */
.course-hero{border-radius:var(--r-lg);overflow:hidden;position:relative;color:#fff;padding:34px 36px 30px;box-shadow:var(--shadow-pop);margin-bottom:22px}
.course-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 120% at 100% 0%,rgba(255,255,255,.14),transparent 55%),radial-gradient(50% 90% at 0% 100%,rgba(11,11,30,.35),transparent 60%);pointer-events:none}
.course-hero > *{position:relative;z-index:1}
.course-hero h1{font-family:var(--font-display);font-size:27px;font-weight:700;letter-spacing:-.015em;max-width:620px;margin:8px 0 8px}
.course-hero .ch-desc{font-size:14px;opacity:.85;max-width:560px}
.ch-meta{display:flex;align-items:center;gap:16px;margin-top:16px;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:11.5px;flex-wrap:wrap}
.ch-meta .avatar{border:2px solid rgba(255,255,255,.6)}
.ch-row{display:flex;align-items:center;gap:14px;margin-top:20px;flex-wrap:wrap}
.ch-progress{flex:1;min-width:220px;max-width:340px}
.ch-progress small{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:10px;letter-spacing:.08em;opacity:.8}
.mod-acc{overflow:hidden;margin-bottom:12px}
.mod-acc summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;
  padding:16px 20px;font-family:var(--font-display);font-weight:600;font-size:14px;
}
.mod-acc summary::-webkit-details-marker{display:none}
.mod-acc summary .mn{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:11px;color:var(--ink-faint);width:26px}
.mod-acc summary .chev{margin-left:auto;transition:.2s;color:var(--ink-faint)}
.mod-acc[open] summary .chev{transform:rotate(180deg)}
.mod-acc summary .done-count{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:10.5px;color:var(--ink-faint)}
.lesson-row{display:flex;align-items:center;gap:13px;padding:12px 20px;border-top:1px solid var(--line);font-size:13.5px}
.lesson-row:hover{background:var(--bg)}
.lesson-row .check{
  width:24px;height:24px;border-radius:50%;border:2px solid var(--line);flex-shrink:0;
  display:grid;place-items:center;color:#fff;
}
.lesson-row.done .check{background:var(--ok);border-color:var(--ok)}
.lesson-row b{font-weight:600;flex:1;min-width:0}
.lesson-row.done b{color:var(--ink-faint);text-decoration:line-through}
.lesson-row .lr-meta{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:10.5px;color:var(--ink-faint);display:flex;gap:12px}
.lesson-row .lr-km{color:var(--accent);font-weight:600}

/* página da aula */
.player{
  aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;position:relative;
  display:grid;place-items:center;color:#fff;box-shadow:var(--shadow-pop);
}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player .pl-label{position:absolute;left:22px;bottom:18px;text-align:left}
.lesson-head{display:flex;align-items:flex-start;gap:14px;margin:18px 2px 6px}
.lesson-head h1{font-family:var(--font-display);font-size:20px;font-weight:700;letter-spacing:-.015em;flex:1}
.lesson-nav{display:flex;gap:10px;margin-top:16px}
.outline{overflow:hidden}
.outline .o-mod{padding:12px 18px 6px;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);border-top:1px solid var(--line)}
.outline .o-mod:first-child{border-top:none}
.o-lesson{display:flex;align-items:center;gap:10px;padding:9px 18px;font-size:13px;color:var(--ink-soft)}
.o-lesson:hover{background:var(--bg)}
.o-lesson .check{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);flex-shrink:0;display:grid;place-items:center;color:#fff}
.o-lesson.done .check{background:var(--ok);border-color:var(--ok)}
.o-lesson.now{background:var(--brand-soft);color:var(--brand);font-weight:700}
.o-lesson.now .check{border-color:var(--brand)}
.btn-complete{background:var(--ok);color:#fff;font-weight:700;font-size:13.5px;padding:12px 22px;border-radius:999px;box-shadow:none;display:inline-flex;align-items:center;gap:9px}
.btn-done{background:#EBFAF1;color:var(--ok);font-weight:700;font-size:13.5px;padding:12px 22px;border-radius:999px;display:inline-flex;align-items:center;gap:9px;border:1px solid #BDE8D0}

/* ============================================================
   AULA — resumo e perguntas
   ============================================================ */
.lesson-section{margin-top:20px;padding:20px 24px 22px}
.lesson-section h3{font-family:var(--font-display);font-size:15.5px;font-weight:700;display:flex;align-items:center;gap:9px;margin-bottom:12px}
.lesson-section h3 svg{color:var(--brand)}
.lesson-summary p{font-size:14px;line-height:1.7;color:var(--ink-read)}
.qa-item{padding:16px 0}
.qa-item + .qa-item{border-top:1px solid var(--line)}
.qa-q{display:flex;gap:12px}
.qa-q .qa-body{flex:1;min-width:0}
.qa-meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-faint);margin-bottom:3px;flex-wrap:wrap}
.qa-meta b{color:var(--ink);font-size:13px}
.qa-q p,.qa-a p{font-size:13.5px;line-height:1.65;color:var(--ink-read)}
.qa-a{
  display:flex;gap:12px;margin:12px 0 0 42px;padding:13px 16px;
  background:var(--brand-soft);border-radius:var(--r-md);border:1px solid #D8D8FF;
}
.qa-a .qa-body{flex:1;min-width:0}
.admin-badge{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:9px;font-weight:600;letter-spacing:.08em;color:#fff;background:var(--brand);padding:2px 8px;border-radius:999px;text-transform:uppercase}
.qa-pending{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:10px;color:var(--accent);font-weight:600;margin:8px 0 0 42px}
.qa-answer-form{margin:10px 0 0 42px;display:flex;gap:10px;align-items:flex-start}
.qa-answer-form textarea{min-height:60px;flex:1}
.qa-ask{display:flex;gap:12px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.qa-ask textarea{min-height:64px}

/* ============================================================
   FASE 4 — notificações
   ============================================================ */
.notif{position:relative}
.notif summary{list-style:none;cursor:pointer}
.notif summary::-webkit-details-marker{display:none}
.notif-panel{
  position:absolute;right:0;top:52px;width:360px;z-index:80;
  overflow:hidden;box-shadow:var(--shadow-pop);
}
.notif-head{display:flex;align-items:center;justify-content:space-between;padding:14px 17px 10px}
.notif-head h4{font-family:var(--font-display);font-size:13.5px;font-weight:700}
.notif-head button{font-size:11.5px;font-weight:600;color:var(--brand)}
.notif-item{display:flex;gap:12px;padding:12px 17px;border-top:1px solid var(--line);align-items:flex-start}
.notif-item:hover{background:var(--bg)}
.notif-item.unread{background:var(--brand-soft)}
.notif-item.unread:hover{background:#E0E0FF}
.notif-icon{width:34px;height:34px;border-radius:var(--r-md);background:#fff;border:1px solid var(--line);display:grid;place-items:center;font-size:15px;flex-shrink:0}
.notif-item b{font-size:12.5px;font-weight:700;display:block;line-height:1.35}
.notif-item p{font-size:11.5px;color:var(--ink-soft);line-height:1.4;margin-top:2px}
.notif-item small{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:9.5px;color:var(--ink-faint);display:block;margin-top:4px}
.notif-empty{padding:22px 17px;text-align:center;font-size:12.5px;color:var(--ink-faint);border-top:1px solid var(--line)}

/* ============================================================
   FASE 6A — perfil & pessoas
   ============================================================ */
.avatar.av-img{object-fit:cover;border:2px solid #fff;box-shadow:0 0 0 1px var(--line)}
/* ⚠️ o contêiner é círculo (border-radius:50%) mas a imagem usava
   var(--r-md) = 8px: aparecia um quadrado por cima do círculo, com os
   cantos vazando a borda branca.

   object-fit:cover + object-position:center recortam a foto no centro em
   vez de esticá-la — foto retangular num contêiner quadrado deforma o
   rosto sem isso. */
.profile-avatar img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  border-radius:50%;
  display:block;
}
.person-link{color:inherit;font-weight:inherit}
.person-link:hover{color:var(--brand);text-decoration:underline}

/* ---- Aberto a oportunidades ---- */
/* selo compacto ao lado do nome */
.otw-pill{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:700;letter-spacing:.01em;color:#0F7A44;
  background:linear-gradient(135deg,#EBFAF1,#DCF7E8);border:1px solid #A9E3C4;
  border-radius:999px;padding:4px 11px 4px 9px;vertical-align:middle;
  box-shadow:0 1px 0 rgba(15,122,68,.06);
}
.otw-pill svg{flex-shrink:0}
.check-line{display:flex;align-items:flex-start;gap:11px;padding:13px 15px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);margin-bottom:14px;cursor:pointer}
.check-line input{width:17px;height:17px;accent-color:var(--brand);margin-top:2px;flex-shrink:0;cursor:pointer}
.check-line b{font-size:13px;font-weight:600;display:block}
.check-line small{font-size:11.5px;color:var(--ink-faint);display:block;margin-top:1px}
.field input:disabled{background:var(--bg);color:var(--ink-faint);cursor:not-allowed}

/* ---- faixa "Aberto a oportunidades" (destaque no perfil) ---- */
.otw-ribbon{
  display:flex;align-items:center;gap:14px;margin-top:18px;padding:15px 18px;
  border-radius:var(--r-md);position:relative;overflow:hidden;
  background:linear-gradient(120deg,#0F7A44 -10%,#14A35C 55%,#2DD4BF 120%);
  color:#fff;box-shadow:none;
}
.otw-ribbon::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 130% at 100% 0%,rgba(255,255,255,.22),transparent 55%);
}
.otw-ribbon > *{position:relative;z-index:1}
.otw-ico{
  width:42px;height:42px;border-radius:var(--r-md);flex-shrink:0;display:grid;place-items:center;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);
}
.otw-ico .ring{position:absolute;width:42px;height:42px;border-radius:var(--r-md);border:2px solid rgba(255,255,255,.5);animation:otwpulse 2.4s ease-out infinite}
@keyframes otwpulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.35);opacity:0}}
.otw-ribbon b{font-family:var(--font-display);font-size:14.5px;font-weight:700;display:block;line-height:1.2}
.otw-ribbon span{font-size:12px;opacity:.9;line-height:1.35}
.otw-ribbon .otw-tag{margin-left:auto;flex-shrink:0;white-space:nowrap;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);padding:4px 10px;border-radius:999px}

/* ---- estado vazio das conquistas ---- */
.badges-empty{padding:14px 18px 22px;text-align:center}
.badges-empty .be-ico{width:56px;height:56px;border-radius:var(--r-md);margin:2px auto 13px;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand-soft),#F5F0FF);border:1.5px dashed #C4C4FF;color:var(--brand);position:relative}
.badges-empty .be-ico::after{content:"";position:absolute;inset:-1px;border-radius:var(--r-md);border:1.5px solid rgba(0,0,249,.12);animation:otwpulse 3s ease-out infinite}
.badges-empty b{font-size:13.5px;font-weight:700;display:block;color:var(--ink)}
.badges-empty p{font-size:12px;color:var(--ink-faint);margin-top:4px;line-height:1.55;max-width:230px;margin-left:auto;margin-right:auto}
.badges-empty .be-track{display:flex;gap:7px;justify-content:center;margin-top:16px}
.badges-empty .be-dot{width:30px;height:30px;border-radius:var(--r-md);background:var(--bg);border:1px dashed var(--line);display:grid;place-items:center;font-size:13px;opacity:.45;transition:.2s}
.badges-empty .be-dot:hover{opacity:.85;border-style:solid;border-color:#C4C4FF}

/* conquista com brilho quando existe */
.badge{transition:.16s}
.badge:hover{border-color:var(--brand)}
.badge-icon{position:relative;overflow:hidden}
.badge-icon::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 30% 25%,rgba(255,255,255,.4),transparent 60%)}

/* ---- upload de avatar no editar perfil ---- */
.avatar-upload{display:flex;align-items:center;gap:16px;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.avatar-preview{width:76px;height:76px;border-radius:50%;flex-shrink:0;object-fit:cover;display:grid;place-items:center;color:#fff;font-family:var(--font-display);font-weight:700;font-size:26px;box-shadow:var(--shadow);letter-spacing:-.015em}
.avatar-upload .au-info,.cover-upload .au-info{flex:1}
.avatar-upload .au-info b,.cover-upload .au-info b{font-size:13.5px;font-weight:600;display:block}
.avatar-upload .au-info small,.cover-upload .au-info small{font-size:11.5px;color:var(--ink-faint)}
.au-btn{margin-top:9px;display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--brand);border:1px solid #C4C4FF;background:var(--brand-soft);border-radius:999px;padding:8px 15px;cursor:pointer}
.au-btn:hover{background:#E0E0FF}
.au-btn input{display:none}

/* ---- Capa do perfil — upload + ajuste de ponto focal -------------------
   Pedido do Arthur: área de upload com a resolução recomendada, e um jeito
   simples de ajustar o que aparece no recorte quando a foto não tem a
   proporção certa. Em vez de recorte em pixels (precisaria de canvas ou lib
   de crop — nenhuma instalada, ver AGENTS/notas da sessão sobre não somar
   dependência à toa), guarda-se o PONTO FOCAL em % e o CSS (object-position/
   background-position) resolve o recorte em qualquer tamanho de tela —
   mesmo raciocínio de object-position:center que .profile-avatar img já usa,
   só que aqui o ponto é escolhido pelo usuário arrastando na prévia. ---- */
.cover-upload{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.cu-preview{position:relative;height:140px;border-radius:var(--r-lg);background:var(--rail) center/cover no-repeat;overflow:hidden;touch-action:none}
.cu-preview.has-cover{cursor:grab}
.cu-preview.has-cover:active{cursor:grabbing}
.cu-empty{position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.65);font-size:12px;font-weight:600;text-align:center;padding:0 24px}
.cu-focus-dot{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#fff;border:2px solid var(--brand);box-shadow:0 1px 4px rgba(0,0,0,.35);pointer-events:none;display:none}
.cu-preview.has-cover .cu-focus-dot{display:block}
.cu-hint{display:block;margin-top:6px;font-size:11px;color:var(--ink-faint)}

/* ============================================================
   FASE 6B — jornada & lives
   ============================================================ */
.journey-hero{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px}
.jstat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:18px 20px;position:relative;overflow:hidden}
.jstat.dark{background:var(--rail);border-color:transparent;color:#fff}
.jstat.dark::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 130% at 100% 0%,rgba(0,0,249,.5),transparent 60%),radial-gradient(60% 90% at 0% 100%,rgba(255,111,29,.25),transparent 55%)}
.jstat > *{position:relative;z-index:1}
.jstat .js-head{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.jstat b{font-family:var(--font-display);font-size:30px;font-weight:700;display:block;margin-top:7px;line-height:1;letter-spacing:-.015em}
.jstat b small{font-size:14px;font-weight:600;opacity:.6}
.jstat .js-sub{font-size:11.5px;opacity:.65;margin-top:5px}
.jstat .js-bar{height:6px;border-radius:var(--r-md);background:rgba(255,255,255,.16);overflow:hidden;margin-top:10px}
.jstat:not(.dark) .js-bar{background:var(--line)}
.jstat .js-bar i{display:block;height:100%;background:var(--grad)}

.ledger-row{display:flex;align-items:center;gap:13px;padding:13px 20px}
.ledger-row + .ledger-row{border-top:1px solid var(--line)}
.ledger-ico{width:38px;height:38px;border-radius:var(--r-md);background:var(--bg);border:1px solid var(--line);display:grid;place-items:center;font-size:16px;flex-shrink:0}
.ledger-row .lr-main{flex:1;min-width:0}
.ledger-row .lr-main b{font-size:13.5px;font-weight:600;display:block}
.ledger-row .lr-main span{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:10.5px;color:var(--ink-faint)}
.ledger-km{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:13px;font-weight:700;color:var(--ok);flex-shrink:0}
.ledger-km.zero{color:var(--ink-faint)}

.live-card{display:flex;gap:16px;padding:18px 20px;align-items:center}
.live-card + .live-card{border-top:1px solid var(--line)}
.live-thumb{width:120px;height:74px;border-radius:var(--r-md);flex-shrink:0;position:relative;display:grid;place-items:center;color:#fff;overflow:hidden}
.live-thumb.on::after{content:"AO VIVO";position:absolute;top:8px;left:8px;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:8.5px;font-weight:700;letter-spacing:.1em;background:var(--accent);padding:3px 8px;border-radius:999px}
.live-info{flex:1;min-width:0}
.live-info .li-when{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:10.5px;color:var(--brand);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.live-info h4{font-family:var(--font-display);font-size:15px;font-weight:600;letter-spacing:-.01em;margin:4px 0 3px}
.live-info p{font-size:12.5px;color:var(--ink-soft)}
.live-cta{flex-shrink:0}
.live-attended{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--ok);background:#EBFAF1;border:1px solid #BDE8D0;border-radius:999px;padding:9px 16px}
.live-soon{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:11px;color:var(--ink-faint)}

/* ============================================================
   PÁGINA: O QUE SÃO AS LIGAS
   ============================================================ */
.lg-explain-hero{border-radius:var(--r-lg);overflow:hidden;position:relative;color:#fff;padding:34px 36px 30px;box-shadow:var(--shadow-pop);margin-bottom:24px;background:var(--rail);background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:22px 22px}
.lg-explain-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(75% 120% at 100% 0%,rgba(0,0,249,.55),transparent 55%),radial-gradient(45% 80% at 0% 100%,rgba(255,111,29,.3),transparent 55%)}
.lg-explain-hero > *{position:relative;z-index:1}
.lg-explain-hero h1{font-family:var(--font-display);font-size:28px;font-weight:700;letter-spacing:-.02em;max-width:600px;margin:8px 0 8px}
.lg-explain-hero p{font-size:14.5px;opacity:.85;max-width:580px}
.explain-section{margin-bottom:30px}
.explain-section > h2{font-family:var(--font-display);font-size:19px;font-weight:700;letter-spacing:-.01em;margin-bottom:6px}
.explain-section > .lead{font-size:13.5px;color:var(--ink-soft);margin-bottom:16px;max-width:640px;line-height:1.6}
/* trilha de divisões */
.div-ladder{display:flex;flex-direction:column;gap:10px}
.div-step{display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);position:relative;overflow:hidden}
.div-step .ds-tier{width:48px;height:48px;border-radius:var(--r-md);flex-shrink:0;display:grid;place-items:center;color:#fff;font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:-.015em}
.div-step .ds-body{flex:1;min-width:0}
.div-step .ds-body b{font-family:var(--font-display);font-size:16px;font-weight:700;display:block}
.div-step .ds-body span{font-size:12.5px;color:var(--ink-soft)}
.div-step .ds-arrow{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:10px;color:var(--ink-faint);text-align:right;flex-shrink:0;line-height:1.5}
.t1{background:linear-gradient(135deg,#64748B,#94A3B8)}
.t2{background:linear-gradient(135deg,#0000B4,#0000F9)}
.t3{background:linear-gradient(135deg,#0F766E,#2DD4BF)}
.t4{background:linear-gradient(135deg,#B45309,#F59E0B)}
.t5{background:linear-gradient(135deg,#7C3AED,#C084FC)}
/* como funciona: 3 passos */
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.how-card{padding:20px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface)}
.how-card .hc-num{width:32px;height:32px;border-radius:var(--r-md);background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:15px;margin-bottom:12px}
.how-card b{font-family:var(--font-display);font-size:14.5px;font-weight:700;display:block;margin-bottom:5px}
.how-card p{font-size:12.5px;color:var(--ink-soft);line-height:1.55}
.how-card .hc-tag{display:inline-block;margin-top:10px;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:10px;font-weight:600;padding:3px 9px;border-radius:999px}
.hc-up{background:#EBFAF1;color:#0F7A44}
.hc-down{background:#FEECEF;color:#BE123C}
.hc-stay{background:var(--bg);color:var(--ink-soft)}
/* tabela de km */
.km-table{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.km-tr{display:flex;align-items:center;gap:14px;padding:13px 18px}
.km-tr + .km-tr{border-top:1px solid var(--line)}
.km-tr .kt-ico{width:34px;height:34px;border-radius:var(--r-md);background:var(--bg);border:1px solid var(--line);display:grid;place-items:center;font-size:16px;flex-shrink:0}
.km-tr b{flex:1;font-size:13.5px;font-weight:600}
.km-tr .kt-km{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:13px;font-weight:700;color:var(--ok)}
/* níveis */
.lvl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.lvl-chip{padding:14px 16px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);text-align:center}
.lvl-chip b{font-family:var(--font-display);font-size:15px;display:block}
.lvl-chip span{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:11px;color:var(--ink-faint)}
.callout{display:flex;gap:14px;padding:18px 20px;border-radius:var(--r-md);background:var(--brand-soft);border:1px solid #C4C4FF}
.callout .co-ico{font-size:22px;flex-shrink:0}
.callout b{font-family:var(--font-display);font-size:14px;display:block;margin-bottom:3px}
.callout p{font-size:12.5px;color:var(--ink-soft);line-height:1.55}

/* ============================================================
   FASE 6C — busca, tabs, paginação
   ============================================================ */
.search-page-hero{margin-bottom:20px}
.search-box{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:14px 22px;box-shadow:var(--shadow)}
.search-box svg{color:var(--ink-faint);flex-shrink:0}
.search-box input{flex:1;border:none;outline:none;font-size:15px;font-family:inherit;color:var(--ink);background:transparent}
.search-box input::placeholder{color:var(--ink-faint)}
.search-group{margin-bottom:24px}
.search-group h3{font-family:var(--font-display);font-size:14px;font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.search-group h3 .cnt{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:11px;color:var(--ink-faint);font-weight:500}
.sr-row{display:flex;align-items:center;gap:13px;padding:13px 18px}
.sr-row + .sr-row{border-top:1px solid var(--line)}
.sr-row:hover{background:var(--bg)}
.sr-ico{width:38px;height:38px;border-radius:var(--r-md);flex-shrink:0;display:grid;place-items:center;color:#fff}
.sr-main{flex:1;min-width:0}
.sr-main b{font-size:13.5px;font-weight:600;display:block;line-height:1.35}
.sr-main span{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:10.5px;color:var(--ink-faint)}
.sr-empty{text-align:center;padding:50px 20px;color:var(--ink-faint)}
.sr-empty .se-ico{width:56px;height:56px;border-radius:var(--r-md);margin:0 auto 14px;display:grid;place-items:center;background:var(--bg);border:1.5px dashed var(--line)}
.sr-empty b{font-size:15px;font-weight:600;color:var(--ink-soft);display:block}
.sr-empty p{font-size:13px;margin-top:4px}

/* tabs da comunidade (agora links ativos) */
.ftab.on{background:var(--ink);color:#fff}

/* paginação estilizada */
.pagination{display:flex;gap:6px;list-style:none;padding:0;margin:0;flex-wrap:wrap;align-items:center;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:12.5px}
.pagination li{display:flex}
.pagination li span,.pagination li a{
  display:grid;place-items:center;min-width:38px;height:38px;padding:0 12px;border-radius:var(--r-md);
  border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);font-weight:600;transition:.14s;
}
.pagination li a:hover{border-color:var(--brand);color:var(--brand)}
.pagination li.active span{background:var(--ink);border-color:var(--ink);color:#fff}
.pagination li.disabled span{opacity:.4;cursor:not-allowed}
.pagination li[aria-hidden="true"] span{border:none;background:transparent}

/* ============================================================
   RECONSTRUÇÃO v7.1 — condensada, dock centralizado, sem vazamento
   ============================================================ */
:root{ --bg:#F4F3F0; --dock:var(--navy-surface); --r-card:20px; }
/* ⚠️ o fundo precisa estar no HTML, não só no body: em qualquer
   repintura o que aparece atrás é o fundo do html. */

/* ⚠️ `clip`, não `hidden`.
   `overflow-x:hidden` força `overflow-y:auto` pela especificação, o que
   cria um CONTÊINER DE ROLAGEM. Todo `position:sticky` dentro dele passa
   a se prender a esse contêiner em vez da viewport — e simplesmente não
   gruda. Era por isso que o sumário do artigo rolava junto com o texto.
   `clip` corta o transbordo sem criar contêiner de rolagem. */
html,body{overflow-x:clip;max-width:100%;background:var(--bg)}
*{min-width:0}

.app{display:flex;min-height:100vh;min-height:calc(var(--vh, 1vh) * 100);gap:0;background:var(--bg)}

/* -------- DOCK: fixo, centralizado verticalmente na tela -------- */
.dock{
  position:fixed;left:18px;top:50%;transform:translateY(-50%);z-index:40;
  flex-shrink:0;width:72px;
  display:flex;flex-direction:column;align-items:center;
  padding:18px 0;gap:14px;
  background:var(--dock);border-radius:var(--r-md);
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:18px 18px;
  box-shadow:0 24px 50px -20px rgba(11,11,30,.5);
}

/* tooltip */

/* -------- FRAME: margem p/ dock fixo, largo em TODAS as telas -------- */
.frame{flex:1;min-width:0;display:flex;flex-direction:column;padding:0 30px 0 108px;overflow-x:clip}
.frame-body{max-width:1320px;width:100%;margin:0 auto;padding-bottom:40px;box-sizing:border-box}

/* -------- TOPBAR condensada -------- */
.topbar{display:flex;align-items:center;gap:16px;max-width:1320px;width:100%;margin:0 auto;padding:34px 0 24px}
.tb-greet{flex:1;min-width:0}
.tb-greet h1{font-family:var(--font-display);font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.tb-greet h1 em{font-style:normal;color:var(--brand)}
.tb-greet p{font-size:12px;color:var(--ink-faint);margin-top:2px}
.tb-search{display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 16px;color:var(--ink-faint);font-size:12.5px;box-shadow:var(--shadow);cursor:text;min-width:200px}
.tb-search .kbd{margin-left:6px;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:10px;border:1px solid var(--line);border-radius:var(--r-md);padding:1px 6px}
.tb-icon{width:40px;height:40px;border-radius:var(--r-md);flex-shrink:0;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);color:var(--ink-soft);cursor:pointer;position:relative;list-style:none}
.tb-icon::-webkit-details-marker{display:none}

/* -------- ABAS -------- */

/* ============================================================
   HOME v7.1 — mais densa
   ============================================================ */
.home-v7{display:flex;flex-direction:column;gap:18px}

/* notícia destaque: menor, mais horizontal */
/* ⚠️ era .hl-actions .btn-white — preso ao hero antigo. Sem escopo, serve
   também ao carrossel. */
.btn-white{background:#fff;color:var(--brand-deep);font-weight:700;font-size:12.5px;
  padding:10px 20px;border-radius:999px;display:inline-block}
.btn-white:hover{background:rgba(255,255,255,.9)}

.hl-section-head{display:flex;align-items:baseline;justify-content:space-between;margin:0 var(--pad-edge) 2px}
.hl-section-head h3{font-family:var(--font-display);font-size:var(--type-section-title);font-weight:700;letter-spacing:-.01em}
.hl-section-head a:not([class]){font-size:var(--type-action-small);font-weight:600;color:var(--brand)}  /* mesma armadilha da linha 272 */

/* progresso: 4 cards mais baixos */
.progress-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}
.pcard{border-radius:var(--r-md);padding:16px 18px;position:relative;overflow:hidden}
.pcard.light{background:var(--surface);border:1px solid var(--line)}
.pcard.blue{background:var(--brand);color:#fff}
.pcard.orange{background:var(--accent);color:#fff}
.pcard .pc-label{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--type-context-label);font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.pcard.light .pc-label{color:var(--ink-faint);opacity:1}
.pcard .pc-num{font-family:var(--font-display);font-size:28px;font-weight:700;letter-spacing:-.03em;line-height:1;margin-top:6px}
.pcard.light .pc-num{color:var(--ink)}
.pcard .pc-sub{font-size:10.5px;margin-top:3px;opacity:.85}
.pcard.light .pc-sub{color:var(--ink-faint);opacity:1}
.pcard .pc-sub.up{color:var(--ok);font-weight:600}
.pcard.light .pc-sub.up{color:var(--ok)}
.pcard .pc-bar{height:5px;background:rgba(255,255,255,.25);border-radius:var(--r-md);margin-top:8px;overflow:hidden}
.pcard .pc-bar i{display:block;height:100%;background:#fff}

/* duas colunas mais densas */
.home-cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
.home-cols aside,.home-side{position:sticky;top:18px}
.home-main{min-width:0}

/* recomendados: cards menores pra caber melhor */
.reco-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}

/* ============================================================
   RESPONSIVO — desktop / tablet / mobile
   ============================================================ */

/* desktop grande */
@media (max-width:1240px){ .reco-grid{grid-template-columns:repeat(2,1fr)} }

/* TABLET (≤1080px): colunas empilham, dock ainda lateral mas menor */
@media (max-width:1080px){
  .home-cols{grid-template-columns:1fr}
  .home-cols aside,.home-side{position:static}
  .shell{grid-template-columns:1fr}
  .col-right{position:static}
  .progress-grid{grid-template-columns:repeat(2,1fr)}
  .frame{padding:0 24px 0 96px}
  .dock{width:64px;gap:12px}
}

/* MOBILE (≤720px): dock = barra inferior fixa estilo app nativo */
@media (max-width:720px){
  .app{display:block}

  .dock{
    position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));top:auto;transform:none;
    flex-direction:row;width:auto;max-width:100%;
    justify-content:space-around;align-items:center;
    padding:8px 8px;gap:0;
    border-radius:var(--r-md);z-index:60;
    box-shadow:0 12px 32px -8px rgba(11,11,30,.45), 0 4px 12px -4px rgba(11,11,30,.3);
    background-image:none;
  }
  /* esconde "Sair" da barra (fica no perfil); mantém perfil */
  /* sem tooltip no mobile (toque não tem hover) */

  /* ⚠️ padding do frame no mobile fica APENAS no bloco "MENU LATERAL NO
     MOBILE", no fim do arquivo. Duas fontes de verdade para a mesma
     propriedade foi o que produziu a margem torta. */
  .frame-body{padding-bottom:0}

  /* topbar: saudação em linha própria, busca+sino embaixo lado a lado */
  .topbar{flex-wrap:wrap;gap:12px;padding:20px 0 14px}
  .tb-greet{flex:1 1 100%;order:1}
  .tb-greet h1{font-size:19px}
  .tb-greet p{font-size:11px}
  .tb-search{order:2;flex:1;justify-content:flex-start;min-width:0;padding:11px 16px}
  .tb-search .kbd{display:none}
  .tb-spinner{display:none}
  .notif{order:3}

  /* abas: scroll horizontal suave, sem barra visível */

  .home-v7{gap:16px}
  .home-v7 > *{max-width:100%}
  .progress-grid{grid-template-columns:1fr 1fr;gap:10px}
  .reco-grid{grid-template-columns:1fr}
  .pcard{padding:14px 16px;max-width:100%}
  .pcard .pc-num{font-size:26px}

  /* HERO: forçar caber, quebrar título longo, tirar max-width fixo */
  .hl-src{word-break:break-word}

  .rings{flex-wrap:wrap;justify-content:space-around;gap:18px}
  .card{border-radius:var(--r-md);max-width:100%;box-sizing:border-box}

  /* qualquer hero/card não estoura */
  .news-hero,.courses-hero,.course-hero,.comm-hero,.lg-explain-hero{max-width:100%;box-sizing:border-box}
  .news-hero h2,.courses-hero h2,.course-hero h1{max-width:100%;overflow-wrap:break-word}
  .league-card{max-width:100%;box-sizing:border-box}

  /* busca do topo: garantir ícone + texto visíveis */
  .tb-search{width:100%;box-sizing:border-box}
  .tb-search svg{flex-shrink:0}
}

/* MOBILE pequeno (≤400px): progresso 1 coluna, textos menores */
@media (max-width:400px){
  .tb-greet h1{font-size:18px}
}

/* ============================================================
   DARK MODE — azulado suave (#141428), ativado por [data-theme="dark"]
   ============================================================ */
[data-theme="dark"]{
  --ink:        #EDEDF5;   /* texto principal claro */
  --ink-soft:   #A9A9C2;
  --ink-faint:  #6E6E8A;
  --ink-read:   #C4C4DA;   /* leitura clara no escuro */
  --brand:      #4D4DFF;   /* azul um pouco mais claro pra contraste no escuro */
  --brand-deep: #6B6BFF;
  --brand-soft: #1E1E3C;   /* fundo suave da marca no escuro */
  --brand-glow: #7A7AFF;
  --accent:     #FF7A2E;
  --accent-soft:#3A2416;
  --bg:         #0E0E1C;   /* fundo geral (azulado bem escuro) */
  --surface:    #171730;   /* cards */
  --surface-2:  #1E1E38;   /* superfície elevada no escuro */
  --dock:       #08081A;   /* dock ainda mais escuro pra destacar */
  --rail:       #08081A;
  --rail-soft:  rgba(255,255,255,.06);
  /* ⚠️ Borda mais clara que antes (#262642 -> #33335A). No design anterior o
     card tinha fundo próprio e a borda era secundária; agora a LINHA é o
     único separador entre seções, então precisa de contraste real contra o
     fundo — senão a tela vira um bloco único no escuro. */
  --line:       #33335A;
  --line-dark:  rgba(255,255,255,.08);
  --ok:         #2EC76F;
  --danger:     #F43F5E;
  --shadow: none;   /* v8: acompanha o tema claro */
  --shadow-pop: 0 2px 4px rgba(0,0,0,.35), 0 24px 48px -20px rgba(0,0,0,.7);
  --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -16px rgba(0,0,0,.5);
}
[data-theme="dark"] body{background:var(--bg)}

/* botão sol/lua: mostra o ícone certo por tema */
.tb-icon .ic-moon{display:none}
.tb-icon .ic-sun{display:block}
[data-theme="dark"] .tb-icon .ic-sun{display:none}
[data-theme="dark"] .tb-icon .ic-moon{display:block}

/* ajustes finos no escuro */
[data-theme="dark"] .tb-search{background:var(--surface);border-color:var(--line)}
[data-theme="dark"] .tb-icon{background:var(--surface);border-color:var(--line)}
[data-theme="dark"] .ctx-tab{background:var(--surface);border-color:var(--line)}
[data-theme="dark"] .ctx-tab.on{background:var(--brand);border-color:var(--brand);color:#fff}
[data-theme="dark"] .card{background:var(--surface);border-color:var(--line)}
[data-theme="dark"] .pcard.light{background:var(--surface);border-color:var(--line)}
[data-theme="dark"] .tag-blue{background:#1E1E3C;color:#9B9BFF}
[data-theme="dark"] .tag-green{background:#12301F;color:#4ADE80}
[data-theme="dark"] .tag-orange{background:#3A2416;color:#FDBA74}
[data-theme="dark"] .avatar{border-color:var(--line)}
/* a notícia destaque e o dock já são escuros — mantêm o visual */
[data-theme="dark"] .hl-news,[data-theme="dark"] .league-card,[data-theme="dark"] .courses-hero{background:#0A0A1E}
/* inputs no escuro */
[data-theme="dark"] input,[data-theme="dark"] textarea,[data-theme="dark"] select{background:var(--surface);color:var(--ink);border-color:var(--line)}
[data-theme="dark"] input::placeholder,[data-theme="dark"] textarea::placeholder{color:var(--ink-faint)}
/* certificado no escuro: mantém o dourado, ajusta o wash */
[data-theme="dark"] .cert:hover{background:linear-gradient(90deg,rgba(245,158,11,.08),transparent)}
[data-theme="dark"] .cert .btn-outline{background:#2A2015;border-color:#5A4420;color:#FBBF24}
[data-theme="dark"] .cert-badge{background:#2A2015;color:#FBBF24}
/* transição suave ao alternar */
body,.card,.tb-search,.tb-icon,.ctx-tab,.pcard,.dock{transition:background-color .25s ease,border-color .25s ease,color .25s ease}

/* ============================================================
   DARK MODE — correções de textos e cards hardcoded
   ============================================================ */
[data-theme="dark"]{
  /* textos de leitura (artigos, threads, respostas, aulas) que eram #2A2A44 */
}
/* TEXTOS hardcoded escuros -> claros no dark */
[data-theme="dark"] .article-prose p,
[data-theme="dark"] .thread-main .thread-body p,
[data-theme="dark"] .reply-body p,
[data-theme="dark"] .lesson-summary p,
[data-theme="dark"] .qa-q p,
[data-theme="dark"] .qa-a p{color:var(--ink-soft)}
[data-theme="dark"] .article-prose p:first-of-type{color:var(--ink)}

/* CARDS/superfícies brancas hardcoded -> surface escura */
[data-theme="dark"] .btn-outline,
[data-theme="dark"] .ftab:hover,
[data-theme="dark"] .kind-pill span,
[data-theme="dark"] .notif-icon,
[data-theme="dark"] .news-item .arrow,
[data-theme="dark"] .search-input{background:var(--surface);border-color:var(--line);color:var(--ink-soft)}

/* superfícies bege claras (#FBFAF7) -> surface elevada escura */
[data-theme="dark"] .pstat,
[data-theme="dark"] .game-tile,
[data-theme="dark"] .badge{background:#1E1E38;border-color:var(--line)}

/* tags pastel -> versões escuras */
[data-theme="dark"] .tag-purple{background:#241A3C;color:#C4A9FF;border-color:#3A2A5C}
[data-theme="dark"] .tag-green{background:#12301F;color:#4ADE80;border-color:#1E4A32}

/* respostas destacadas */
[data-theme="dark"] .reply.best{background:#0F2418}
[data-theme="dark"] .btn-best{background:var(--surface);border-color:#1E4A32}
[data-theme="dark"] .btn-best:hover{background:#12301F}

/* botões brancos que devem continuar claros (dentro de heros escuros) ficam OK.
   Mas btn-solid/btn-light soltos no fundo claro precisam virar surface no dark */
[data-theme="dark"] .ftab{background:var(--surface);border-color:var(--line);color:var(--ink-soft)}
[data-theme="dark"] .ftab.on{background:var(--brand);color:#fff;border-color:var(--brand)}

/* composer / inputs de foco */
[data-theme="dark"] .composer-input:focus{background:var(--surface)}

/* headings e textos genéricos que usam ink já seguem a variável.
   Garantir que qualquer texto solto preto vire claro: */
[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3,
[data-theme="dark"] h4,[data-theme="dark"] h5{color:var(--ink)}

/* widgets internos escuros (liga, hero) mantêm texto branco — não sobrescrever */
[data-theme="dark"] .hl-news h2,[data-theme="dark"] .hl-news .hl-excerpt,
[data-theme="dark"] .league-card *,[data-theme="dark"] .courses-hero h2,
[data-theme="dark"] .courses-hero p{color:inherit}

/* pcard coloridos (azul/laranja) mantêm branco */
[data-theme="dark"] .pcard.blue,[data-theme="dark"] .pcard.orange{color:#fff}
[data-theme="dark"] .pcard.blue *,[data-theme="dark"] .pcard.orange *{color:#fff}

/* scrollbar mais discreta no escuro */
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A2A48}

/* ============================================================
   DARK MODE — correções pontuais (selo OTW, reply box, badges vazio)
   ============================================================ */

/* selo "Estou aberto a oportunidades" — fundo escuro no dark */
[data-theme="dark"] .check-line{background:#1E1E38;border-color:var(--line)}
[data-theme="dark"] .check-line b{color:var(--ink)}
[data-theme="dark"] .check-line small{color:var(--ink-soft)}

/* box de resposta na comunidade — fundo escuro no dark */
[data-theme="dark"] .reply-form{background:#12122A;border-color:var(--line)}
[data-theme="dark"] .reply-form textarea{background:var(--surface);color:var(--ink);border-color:var(--line)}

/* ícone de conquistas vazio — gradiente e bordas escuras no dark */
[data-theme="dark"] .badges-empty .be-ico{
  background:linear-gradient(135deg,#1E1E3C,#241A3C);
  border-color:#3A3A6C;color:var(--brand-deep);
}
[data-theme="dark"] .badges-empty .be-ico::after{border-color:rgba(107,107,255,.25)}
[data-theme="dark"] .badges-empty .be-dot{background:#1E1E38;border-color:var(--line)}
[data-theme="dark"] .badges-empty .be-dot:hover{border-color:#3A3A6C}

/* garantir que TODO textarea/input no dark tenha fundo e texto certos */
[data-theme="dark"] .field input,[data-theme="dark"] .field select,[data-theme="dark"] .field textarea,
[data-theme="dark"] textarea,[data-theme="dark"] input[type="text"],[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"]{background:var(--surface);color:var(--ink);border-color:var(--line)}
[data-theme="dark"] .field input::placeholder,[data-theme="dark"] textarea::placeholder{color:var(--ink-faint)}

/* qualquer outra superfície #FBFAF7 hardcoded que sobrou */
[data-theme="dark"] .composer{background:#12122A;border-color:var(--line)}

/* ============================================================
   BUSCA AO VIVO — glow no foco + dropdown de autocomplete
   ============================================================ */
.tb-search-wrap{position:relative}
/* grupo de ações: busca + tema + notificações, tudo junto à direita */
.tb-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.tb-search{
  display:flex;align-items:center;gap:9px;width:340px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:0 16px;height:44px;box-shadow:var(--shadow);
  transition:border-color .18s,box-shadow .18s,width .18s;
}
.tb-search svg{color:var(--ink-faint);flex-shrink:0;transition:color .18s}
.tb-search input{
  flex:1;min-width:0;border:none;outline:none;background:transparent;
  font-family:inherit;font-size:13px;color:var(--ink);height:100%;padding:0;
}
.tb-search input::placeholder{color:var(--ink-faint)}
.tb-search .kbd{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:10px;border:1px solid var(--line);border-radius:var(--r-md);padding:1px 6px;color:var(--ink-faint);flex-shrink:0;transition:opacity .18s}

/* O clique abre a busca sem desenhar sua hitbox. O destaque visual fica
   reservado à navegação por teclado, identificada em portal.js. */
.tb-search-wrap.focused .tb-search{
  border-color:var(--line);
  box-shadow:var(--shadow);
}
html.keyboard-nav .tb-search-wrap.focused .tb-search{
  border-color:var(--brand);
  box-shadow:0 0 0 4px rgba(0,0,249,.12), 0 8px 24px -10px rgba(0,0,249,.35);
}
html.keyboard-nav .tb-search-wrap.focused .tb-search svg{color:var(--brand)}
.tb-search-wrap.focused .kbd{opacity:0}

/* spinner de carregamento */
.tb-spinner{width:14px;height:14px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--brand);flex-shrink:0;display:none;animation:tbspin .6s linear infinite}
.tb-search-wrap.loading .tb-spinner{display:block}
.tb-search-wrap.loading .kbd{display:none}
@keyframes tbspin{to{transform:rotate(360deg)}}

/* dropdown */
.search-drop{
  /* min() em vez de width fixo: 400px no desktop, nunca mais que a tela */
  position:absolute;top:calc(100% + 8px);right:0;width:min(400px, calc(100vw - 24px));
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-pop);overflow:hidden;z-index:70;
  animation:sdIn .16s ease;
}
@keyframes sdIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.sd-body{max-height:60vh;overflow-y:auto;padding:6px}
.sd-group-label{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);padding:10px 12px 5px}
.sd-item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--r-md);cursor:pointer;text-decoration:none}
.sd-item:hover,.sd-item.active{background:var(--bg)}
.sd-ico{width:34px;height:34px;border-radius:var(--r-md);flex-shrink:0;display:grid;place-items:center;color:#fff;font-size:14px}
.sd-ico.course{background:linear-gradient(135deg,#0000B4,#0000F9)}
.sd-ico.thread{background:linear-gradient(135deg,#0F766E,#2DD4BF)}
.sd-ico.news{background:linear-gradient(135deg,#B45309,#F59E0B)}
.sd-ico.person{overflow:hidden}
.sd-ico img{width:100%;height:100%;object-fit:cover}
.sd-main{flex:1;min-width:0}
.sd-main b{display:block;font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sd-main span{font-size:11px;color:var(--ink-faint)}
.sd-main mark{background:rgba(0,0,249,.16);color:inherit;border-radius:var(--r-md);padding:0 1px}
[data-theme="dark"] .sd-main mark{background:rgba(107,107,255,.28)}
.sd-empty{padding:26px 16px;text-align:center;color:var(--ink-faint);font-size:13px}
.sd-empty b{display:block;color:var(--ink-soft);font-size:14px;margin-bottom:3px}
.sd-all{display:block;text-align:center;padding:12px;font-size:12.5px;font-weight:600;color:var(--brand);border-top:1px solid var(--line);text-decoration:none}
.sd-all:hover{background:var(--bg)}

@media (max-width:720px){
  .tb-search{width:100%}
  .tb-search-wrap.focused .tb-search{width:100%}
  .search-drop{width:100%;left:0;right:auto}
}

/* fallback do avatar quando a imagem quebra (mostra iniciais via data-attr) */
.profile-avatar[data-initials]::after{content:attr(data-initials)}

/* faixa de news mini na home */
@media (max-width:900px){.news-mini-grid{grid-template-columns:1fr}}

/* ============================================================
   NEWS — post individual: progresso, sumário, reações, comentários
   ============================================================ */

/* barra de progresso de leitura (fixa no topo) */
.read-progress{position:fixed;top:0;left:0;right:0;height:3px;background:transparent;z-index:80}
.read-progress i{display:block;height:100%;width:0;background:var(--grad);transition:width .1s linear}

/* layout 2 colunas: artigo + sumário. Usa a mesma largura da topbar e do
   frame para não criar uma faixa vazia artificial antes do sumário. */
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:28px;max-width:1320px;width:100%;margin:0 auto;align-items:start}
.article-layout.without-toc{grid-template-columns:minmax(0,1fr)}
.article-col{min-width:0;width:100%;max-width:none}

/* sumário lateral fixo (dentro de box, acompanha a rolagem) */
.toc-sticky{position:sticky;top:24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:18px 16px;box-shadow:var(--shadow-card)}
.toc-label{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:12px;padding-left:13px}
#tocNav{display:flex;flex-direction:column;gap:1px;border-left:2px solid var(--line)}
.toc-link{font-size:12.5px;color:var(--ink-faint);padding:7px 13px;margin-left:-2px;border-left:2px solid transparent;line-height:1.35;transition:.14s;text-decoration:none}
.toc-link:hover{color:var(--ink-soft)}
.toc-link.on{color:var(--brand);border-left-color:var(--brand);font-weight:600}

/* seções do artigo (âncoras) */
.article-section{scroll-margin-top:90px;font-family:var(--font-display);font-size:18px;font-weight:700;margin:26px 0 10px;letter-spacing:-.01em}

/* reações */
.react-card{margin-top:18px;padding:20px 22px}
.react-title{font-family:var(--font-display);font-size:14.5px;font-weight:700;margin-bottom:14px}
.react-row{display:flex;gap:10px;flex-wrap:wrap}
.react-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;border:1px solid var(--line);background:var(--surface);cursor:pointer;transition:.15s;font-family:inherit}
.react-btn:hover{border-color:var(--brand)}
.react-btn.on{background:var(--brand-soft);border-color:var(--brand)}
.react-btn .re-emoji{font-size:17px}
.react-btn .re-label{font-size:12.5px;font-weight:600;color:var(--ink-soft)}
.react-btn.on .re-label{color:var(--brand-deep)}
.react-btn .re-count{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:11px;font-weight:700;color:var(--ink-faint);min-width:14px;text-align:center}
.react-btn.on .re-count{color:var(--brand)}

/* comentários */
.comments-card{margin-top:18px;padding:22px}
.comments-head{display:flex;align-items:center;gap:9px;margin-bottom:16px}
.comments-head h3{font-family:var(--font-display);font-size:17px;font-weight:700}
.comments-head span{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:12px;font-weight:600;color:#fff;background:var(--brand);border-radius:999px;padding:1px 9px}
.comment-form{display:flex;gap:12px;margin-bottom:20px}
.cf-field{flex:1;min-width:0}
.cf-field textarea{width:100%;border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;font-family:inherit;font-size:13.5px;color:var(--ink);background:var(--surface);resize:vertical;min-height:60px;line-height:1.5;box-sizing:border-box}
html.keyboard-nav .cf-field textarea:focus-visible{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,0,249,.1)}
.cf-foot{display:flex;align-items:center;justify-content:space-between;margin-top:9px}
.cf-counter{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:11px;color:var(--ink-faint)}
.cf-counter.near{color:var(--accent)}
.cf-counter.near b{color:var(--accent)}
.cf-error{color:var(--danger);font-size:12px;margin:-12px 0 14px 52px}
.comment-list{display:flex;flex-direction:column;gap:16px}
.comment{display:flex;gap:12px}
.cmt-main{flex:1;min-width:0}
.cmt-head{display:flex;align-items:baseline;gap:8px;margin-bottom:3px}
.cmt-head b{font-size:13px;font-weight:600}
.cmt-head span{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:10.5px;color:var(--ink-faint)}
.cmt-main p{font-size:13.5px;color:var(--ink-soft);line-height:1.55;word-break:break-word}
.comment-empty{font-size:13px;color:var(--ink-faint);text-align:center;padding:16px}

@media (max-width:980px){
  .article-layout{grid-template-columns:1fr}
  .article-toc{display:none}
  .article-col{max-width:100%}
}

/* dark mode das features de news */
[data-theme="dark"] .react-btn{background:var(--surface);border-color:var(--line)}
[data-theme="dark"] .react-btn.on{background:#1E1E3C;border-color:var(--brand)}
[data-theme="dark"] .cf-field textarea{background:var(--surface);color:var(--ink);border-color:var(--line)}
[data-theme="dark"] #tocNav{border-left-color:var(--line)}
[data-theme="dark"] .read-progress{background:transparent}

/* dot de notificação não-lida (bolinha no canto do sino) — estava sem CSS */
.tb-icon .dot{
  position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;
  background:var(--accent);border:2px solid var(--surface);box-sizing:content-box;
}
.notif{position:relative}
/* painel de notificação não sai da tela em telas menores */
@media (max-width:520px){
  .notif-panel{position:fixed;right:12px;left:12px;top:70px;width:auto}
}

/* ============================================================
   COMUNIDADES — lista, criar, modal
   ============================================================ */
.widget-add{font-size:11.5px;font-weight:700;color:var(--brand);cursor:pointer;background:none;border:none}
.widget-add:hover{text-decoration:underline}
.comm-list{display:flex;flex-direction:column;padding:4px 8px 8px}
.comm-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-md);text-decoration:none;transition:.14s}
.comm-item:hover{background:var(--bg)}
.comm-item.on{background:var(--brand-soft)}
.comm-dot{width:30px;height:30px;border-radius:var(--r-md);flex-shrink:0}
.comm-info{min-width:0;display:flex;flex-direction:column}
.comm-info b{font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.comm-info span{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:10px;color:var(--ink-faint)}
.comm-item.on .comm-info b{color:var(--brand-deep)}
.comm-locked{display:flex;align-items:center;gap:6px;justify-content:center;padding:10px;margin:0 8px 8px;font-size:11px;color:var(--ink-faint);background:var(--bg);border-radius:var(--r-md)}

/* modal de criar comunidade */
.comm-modal{border:none;border-radius:var(--r-md);padding:0;max-width:440px;width:92vw;box-shadow:var(--shadow-pop);background:var(--surface);margin:auto;position:fixed;inset:0}
.comm-modal::backdrop{background:rgba(11,11,30,.5);backdrop-filter:blur(3px)}
.comm-modal-inner{padding:24px}
.cm-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.cm-head h3{font-family:var(--font-display);font-size:18px;font-weight:700}
.cm-close{background:none;border:none;font-size:15px;color:var(--ink-faint);cursor:pointer;padding:4px}
.cm-sub{font-size:12.5px;color:var(--ink-soft);line-height:1.5;margin-bottom:18px}
.cm-label{display:block;font-size:12px;font-weight:600;color:var(--ink-soft);margin-bottom:6px}
.cm-input{width:100%;border:1px solid var(--line);border-radius:var(--r-md);padding:11px 14px;font-family:inherit;font-size:13.5px;color:var(--ink);background:var(--surface);box-sizing:border-box;margin-bottom:14px;resize:vertical}
html.keyboard-nav .cm-input:focus-visible{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,0,249,.1)}
.cm-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:4px}
[data-theme="dark"] .cm-input{background:#12122A}
.km-toast.err{background:var(--danger)}

/* ============================================================
   EXPLORAR COMUNIDADES (modal)
   ============================================================ */
.comm-none{padding:14px;text-align:center;font-size:12px;color:var(--ink-faint);line-height:1.5}
.comm-none button{display:block;margin:8px auto 0;color:var(--brand);font-weight:600;font-size:12px;background:none;border:none;cursor:pointer}
.comm-explore-btn{display:flex;align-items:center;justify-content:center;gap:7px;width:calc(100% - 16px);margin:4px 8px 8px;padding:10px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:.14s}
.comm-explore-btn:hover{border-color:var(--brand);color:var(--brand)}

.explore-modal{max-width:520px}
.explore-search{display:flex;align-items:center;gap:9px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 14px;margin-bottom:14px}
.explore-search svg{color:var(--ink-faint);flex-shrink:0}
.explore-search input{flex:1;border:none;outline:none;background:transparent;font-family:inherit;font-size:13.5px;color:var(--ink)}
.explore-list{display:flex;flex-direction:column;gap:6px;max-height:52vh;overflow-y:auto;margin:0 -6px;padding:0 6px}
.explore-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--r-md);border:1px solid var(--line);transition:.14s}
.explore-item:hover{border-color:var(--ink-faint)}
.comm-dot.lg{width:42px;height:42px;border-radius:var(--r-md)}
.explore-info{flex:1;min-width:0}
.explore-info b{font-size:13.5px;font-weight:600;display:block}
.ei-desc{font-size:11.5px;color:var(--ink-soft);display:block;line-height:1.4;margin:2px 0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ei-meta{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:10px;color:var(--ink-faint)}
.explore-actions{display:flex;flex-direction:column;gap:6px;flex-shrink:0}
.btn-light.sm,.btn-primary.sm{padding:6px 12px;font-size:11.5px;text-align:center;border-radius:var(--r-md)}
.btn-primary.sm.is-member{background:var(--ok)}
.explore-empty{text-align:center;padding:24px;color:var(--ink-faint);font-size:13px}
.explore-create{width:100%;margin-top:14px;padding:11px;border-radius:var(--r-md);border:1.5px dashed var(--line);background:none;color:var(--brand);font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:.14s}
.explore-create:hover{border-color:var(--brand);background:var(--brand-soft)}
[data-theme="dark"] .explore-search{background:#12122A}
[data-theme="dark"] .comm-explore-btn{background:var(--surface)}

/* ============================================================
   EXPERIÊNCIAS PROFISSIONAIS
   ============================================================ */
/* edição (profile-edit) */
.exp-section{border-top:1px solid var(--line);margin-top:24px;padding-top:22px}
.exp-head h3{font-family:var(--font-display);font-size:16px;font-weight:700}
.exp-head p{font-size:12.5px;color:var(--ink-faint);margin-top:3px;margin-bottom:16px}
.exp-del{background:none;border:none;color:var(--ink-faint);cursor:pointer;font-size:13px;padding:4px;flex-shrink:0}
.exp-del:hover{color:var(--danger)}
.exp-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* timeline (profile view) */
.exp-timeline{padding:20px 22px}
@media (max-width:560px){.exp-grid{grid-template-columns:1fr}}

/* ============================================================
   VAGAS
   ============================================================ */
.jobs-topbar{display:flex;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.jobs-search{flex:1;min-width:220px;display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:11px 16px;box-shadow:var(--shadow)}
.jobs-search svg{color:var(--ink-faint);flex-shrink:0}
.jobs-search input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:inherit;font-size:13.5px;color:var(--ink)}
.jobs-actions{display:flex;gap:10px}

.jobs-cta{display:flex;align-items:center;gap:16px;justify-content:space-between;background:var(--brand-soft);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 20px;margin-bottom:18px}
.jobs-cta b{font-size:13.5px;display:block}
.jobs-cta span{font-size:12px;color:var(--ink-soft)}

.jobs-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.job-card{padding:18px 20px;display:flex;flex-direction:column;gap:10px;transition:.15s}
.job-card:hover{border-color:var(--ink-faint)}
.job-card-head{display:flex;align-items:center;gap:12px}
.job-logo{width:44px;height:44px;border-radius:var(--r-md);background:linear-gradient(135deg,var(--brand),var(--brand-deep));color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:19px;flex-shrink:0}
.job-logo.lg{width:56px;height:56px;font-size:24px;border-radius:var(--r-md)}
.job-card-main{flex:1;min-width:0}
.job-card-main b{font-size:14px;font-weight:600;display:block;line-height:1.3}
.job-card-main span{font-size:12px;color:var(--ink-soft)}
.job-applied-tag{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:9.5px;font-weight:700;color:var(--ok);background:rgba(20,163,92,.1);border-radius:999px;padding:3px 9px;flex-shrink:0}
.job-desc{font-size:12.5px;color:var(--ink-soft);line-height:1.5}
.job-tags{display:flex;flex-wrap:wrap;gap:6px}
.job-tag{font-size:11px;font-weight:600;color:var(--ink-soft);background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);padding:4px 9px}
.job-tag.money{color:var(--ok);border-color:rgba(20,163,92,.25);background:rgba(20,163,92,.06)}
.job-foot{display:flex;justify-content:space-between;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:10.5px;color:var(--ink-faint);border-top:1px solid var(--line);padding-top:10px;margin-top:2px}

.jobs-empty{grid-column:1/-1;text-align:center;padding:50px 20px;display:flex;flex-direction:column;align-items:center}
.jobs-empty .je-ico{font-size:38px;margin-bottom:12px}
.jobs-empty b{font-size:15px;display:block;margin-bottom:4px}
.jobs-empty p{font-size:13px;color:var(--ink-faint);max-width:340px;margin:0 auto}
.jobs-empty .btn-primary{margin-top:16px;display:inline-block}

/* detalhe da vaga */
.job-detail{padding:26px}
.job-detail-head{display:flex;align-items:center;gap:16px}
.job-detail-head h1{font-family:var(--font-display);font-size:22px;font-weight:700;line-height:1.2;letter-spacing:-.015em}
.job-detail-head p{font-size:13px;color:var(--ink-soft);margin-top:3px}
.job-closed{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:10px;font-weight:700;color:var(--danger);background:rgba(244,63,94,.1);border-radius:999px;padding:4px 10px}
.job-body{font-size:14px;color:var(--ink-read);line-height:1.7;margin:8px 0 20px}
.job-cta-row{display:flex;gap:12px;border-top:1px solid var(--line);padding-top:20px}
.job-employer{display:flex;align-items:center;gap:12px;padding:4px 16px 16px;text-decoration:none}
.job-employer b{font-size:13.5px;font-weight:600;display:block;color:var(--ink)}
.job-employer span{font-size:12px;color:var(--ink-faint)}

/* minhas vagas */
.mine-job{padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px;flex-wrap:wrap}
.mine-job-main{display:flex;align-items:center;gap:13px;flex:1;min-width:0}
.mine-job-main a{text-decoration:none}
.mine-job-main b{font-size:14px;font-weight:600;color:var(--ink);display:block}
.mine-job-main > div > span{font-size:12px;color:var(--ink-soft)}
.mine-job-stats{display:flex;align-items:center;gap:16px;flex-shrink:0}
.mjs{text-align:center}
.mjs b{font-family:var(--font-display);font-size:18px;font-weight:700;display:block;line-height:1}
.mjs span{font-size:10px;color:var(--ink-faint)}
.mine-status{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:9.5px;font-weight:700;border-radius:999px;padding:4px 10px}
.mine-status.open{color:var(--ok);background:rgba(20,163,92,.1)}
.mine-status.closed{color:var(--ink-faint);background:var(--bg)}
.mine-job-actions{display:flex;gap:8px;flex-shrink:0}
.btn-outline.sm{padding:6px 12px;font-size:11.5px;border-radius:var(--r-md)}

@media (max-width:820px){.jobs-grid{grid-template-columns:1fr}}
[data-theme="dark"] .job-tag{background:#12122A}
[data-theme="dark"] .jobs-search{background:var(--surface)}

/* trava de empregador (15 dias) */
.check-line.locked{opacity:.7;cursor:not-allowed;background:var(--bg)}
.check-line.locked input{cursor:not-allowed}
.lock-note{display:block;margin-top:7px;color:var(--accent);font-weight:600;font-size:11px}

/* ============================================================
   CANDIDATOS (empregador vê quem se candidatou)
   ============================================================ */
.applicants-head{margin-bottom:18px}
.applicants-head h2{font-family:var(--font-display);font-size:20px;font-weight:700;letter-spacing:-.015em}
.applicants-head span{font-size:12.5px;color:var(--ink-soft)}
.applicant{padding:20px 22px;margin-bottom:14px}
.applicant-top{display:flex;align-items:flex-start;gap:14px}
.applicant-id{flex:1;min-width:0}
.applicant-id b{font-size:15px;font-weight:600;display:flex;align-items:center;gap:5px}
.verified{flex-shrink:0}
.applicant-id > span{font-size:12.5px;color:var(--ink-soft);display:block;margin-top:1px}
.applicant-stats{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;font-size:11.5px;color:var(--ink-soft);font-weight:600}
.applicant-status{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:9.5px;font-weight:700;border-radius:999px;padding:4px 11px;flex-shrink:0;height:fit-content}
.applicant-status.st-new{color:var(--brand);background:var(--brand-soft)}
.applicant-status.st-seen{color:var(--ink-soft);background:var(--bg)}
.applicant-status.st-ok{color:var(--ok);background:rgba(20,163,92,.1)}
.applicant-status.st-no{color:var(--danger);background:rgba(244,63,94,.1)}
.applicant-msg{font-size:13px;color:var(--ink-read);font-style:italic;line-height:1.55;background:var(--surface-2);border-radius:var(--r-md);padding:12px 15px;margin:14px 0 0}
.applicant-exp{margin-top:14px;border-top:1px solid var(--line);padding-top:14px}
.ae-label{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:7px}
.ae-item{font-size:12.5px;color:var(--ink-soft);padding:3px 0}
.ae-item b{color:var(--ink);font-weight:600}
.ae-item span{color:var(--ink-faint);font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:10.5px}
.applicant-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;border-top:1px solid var(--line);padding-top:14px;flex-wrap:wrap}
.applicant-decision{display:flex;gap:8px}
.btn-approve,.btn-reject{font-family:inherit;font-size:12px;font-weight:600;padding:7px 14px;border-radius:var(--r-md);cursor:pointer;border:1px solid var(--line);background:var(--surface);transition:.14s}
.btn-approve{color:var(--ok)}
.btn-approve:hover,.btn-approve.on{background:var(--ok);color:#fff;border-color:var(--ok)}
.btn-reject{color:var(--danger)}
.btn-reject:hover,.btn-reject.on{background:var(--danger);color:#fff;border-color:var(--danger)}

/* minhas candidaturas (perfil do candidato) */
.myapp-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.myapp-item:first-child{border-top:none}
.myapp-main{flex:1;min-width:0}
.myapp-main b{font-size:13px;font-weight:600;display:block}
.myapp-main span{font-size:11.5px;color:var(--ink-faint)}

/* ============================================================
   MOBILE — otimização consolidada de toda a plataforma
   (mobile-first cleanup: tudo empilha, nada estoura, respiro)
   ============================================================ */
@media (max-width: 760px) {
  /* --- GRIDS: tudo vira 1 coluna --- */
  .course-grid,
  .reco-grid,
  .blog-grid,
  .how-grid,
  .news-mini-grid,
  .progress-grid,
  .exp-grid,
  .jobs-grid,
  .journey-hero { grid-template-columns: 1fr !important; gap: 14px; }

  /* --- LAYOUTS de 2 colunas (conteúdo + aside) empilham --- */
  .shell,
  .article-layout { grid-template-columns: 1fr !important; }
  .col-right { width: 100%; }

  /* aside/sumário viram largura total, sem sticky no mobile */
  .article-toc { display: none; }

  /* --- LARGURAS FIXAS nunca estouram a tela --- */
  .profile-card,
  .job-detail,
  .article-col,
  .applicant,
  .mine-job,
  .card { max-width: 100%; }

  /* modais ocupam quase toda a largura */
  .comm-modal,
  .explore-modal { width: 94vw; max-width: 94vw; }

  /* --- TIPOGRAFIA: títulos maiores e legíveis (estilo das refs) --- */
  .greeting h1,
  .job-detail-head h1,
  .article-card h1 { font-size: 24px; line-height: 1.15; }

  /* --- CARDS: mais respiro interno --- */
  .card { border-radius:var(--r-md); }

  /* --- TOPBAR/BUSCA: full width --- */
  .tb-search-wrap,
  .tb-search { width: 100% !important; max-width: 100%; }
  .tb-search-wrap.focused { width: 100% !important; }

  /* --- FILTROS/ABAS horizontais com scroll suave (mesma lógica das abas do topo) --- */
  .feed-tabs,
  .news-filters,
  .ftab-row { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
  .feed-tabs::-webkit-scrollbar,
  .news-filters::-webkit-scrollbar,
  .ftab-row::-webkit-scrollbar { display: none; }
  .ftab { white-space: nowrap; flex-shrink: 0; }

  /* --- VAGAS: topbar e ações empilham --- */
  .jobs-topbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .jobs-search { min-width: 0; width: 100%; }
  .jobs-actions { display: flex; gap: 8px; }
  .jobs-actions .btn-primary,
  .jobs-actions .btn-light {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    text-align: center;
    white-space: nowrap;
    box-sizing: border-box;
    padding: 12px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* candidatos: ações empilham */
  .applicant-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .applicant-decision { justify-content: stretch; }
  .applicant-decision form { flex: 1; }
  .applicant-decision button { width: 100%; }

  /* minhas vagas: card empilha */
  .mine-job { flex-direction: column; align-items: stretch; }
  .mine-job-stats { justify-content: space-between; }
  .mine-job-actions { display: flex; }
  .mine-job-actions a,
  .mine-job-actions form { flex: 1; }
  .mine-job-actions .btn-light,
  .mine-job-actions .btn-outline { width: 100%; text-align: center; }

  /* --- reações/comentários no news --- */
  .react-row { gap: 7px; }
  .react-btn { padding: 8px 12px; }
  .comment-form { flex-direction: column; }

  /* --- experiências: form empilha --- */
  .exp-item { flex-wrap: wrap; }

  /* --- home: colunas empilham (main + side) --- */
  .home-main,
  .home-side { width: 100%; }

  /* imagens de capa não estouram */
  .cc-thumb, .bc-thumb, .mat-thumb { width: 100%; }

  /* salvaguardas: elementos com min-width fixo liberam no mobile */
  .progress-pill { min-width: 0; width: 100%; margin-left: 0; }
  .tb-search { min-width: 0; }
  .jobs-search { min-width: 0; }
  .notif-panel { width: auto; }

  /* trava final: mídia nunca estoura a tela */
  img, video, iframe { height: auto; max-width: 100%; }
}

/* telas bem pequenas (< 400px): aperta ainda mais */
@media (max-width: 400px) {
  .greeting h1 { font-size: 21px; }
  .frame { padding-left: 12px !important; padding-right: 12px !important; }
  .card { padding: 16px; }
  .job-tags { gap: 5px; }
  .job-tag { font-size: 10.5px; padding: 3px 7px; }
}

/* logo mobile na topbar (escondido no desktop) */
.tb-logo-mobile{display:none}
.tb-logo-mobile .logo-on-dark{display:none}
[data-theme="dark"] .tb-logo-mobile .logo-on-light{display:none}
[data-theme="dark"] .tb-logo-mobile .logo-on-dark{display:block}
@media (max-width:760px){
  .tb-logo-mobile{display:grid;place-items:center;width:40px;height:40px;flex-shrink:0}
  .tb-logo-mobile img{width:30px;height:30px;object-fit:contain}
  /* saudação some no mobile pra dar espaço ao logo + busca na mesma linha */
  .topbar .tb-greet{display:none}
  .topbar{padding:16px 0 12px;gap:10px;flex-wrap:nowrap}
  .tb-actions{margin-left:0;flex:1}
  .tb-search-wrap{flex:1}
}

/* ============================================================
   PERFIL — rediagramação mobile (evita sobreposições)
   ============================================================ */
@media (max-width: 760px) {
  /* cabeçalho: empilha avatar → nome → ações, tudo centralizado */
  .profile-top {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding-top: 8px;
  }
  .profile-avatar {
    width: 88px; height: 88px;
    margin-top: -52px;
    font-size: 26px;
  }
  .profile-id { padding-bottom: 0; width: 100%; }
  /* nome + selos: nome numa linha, selos quebram pra baixo centralizados */
  .profile-id h2 {
    flex-wrap: wrap;
    justify-content: center;
    font-size: 20px;
    row-gap: 8px;
    line-height: 1.2;
  }
  /* força os selos a ocupar linha própria (quebra depois do nome) */
  .profile-id h2 .verified { order: 2; }
  .profile-id h2 .admin-badge { order: 3; }
  .profile-id h2 .otw-pill { order: 4; }
  .profile-id p { font-size: 12.5px; }
  .profile-id .mono-id { font-size: 10.5px; margin-top: 4px; line-height: 1.5; }

  /* botão editar perfil: largura confortável, centralizado */
  .profile-actions {
    padding-bottom: 0;
    width: 100%;
    justify-content: center;
  }
  .profile-actions .btn-primary,
  .profile-actions .btn-outline { flex: 1; max-width: 220px; text-align: center; }

  /* selos (verificado/instrutor/disponível): viram linha própria, sem sobrepor o nome */
  .profile-id .otw-pill,
  .profile-id .admin-badge { display: inline-flex; }

  /* gamificação: 2x2 em vez de 4 colunas apertadas */
  .game-strip { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
  .game-tile { padding: 13px 14px; }
  .game-tile b,
  .game-tile .gt-value { font-size: 19px; word-break: normal; }
  .game-tile .gt-head { font-size: 9.5px; }

  /* stats (publicações/seguidores/etc): 2x2, sem cortar texto */
  .profile-stats { flex-wrap: wrap; }
  .pstat { flex: 1 1 50%; min-width: 50%; box-sizing: border-box; }
  .pstat:nth-child(2) { border-left: 1px solid var(--line); }
  .pstat:nth-child(3) { border-left: none; border-top: 1px solid var(--line); }
  .pstat:nth-child(4) { border-top: 1px solid var(--line); }
  .pstat b { font-size: 19px; }
  .pstat span { font-size: 11px; }

  /* padding do card mais justo */
  .profile-card { padding: 0 18px 20px; }
}

/* ============================================================
   MOBILE — correções finas de texto/badges (anti-overflow)
   ============================================================ */
@media (max-width: 760px) {
  /* banner "aberto a oportunidades": compacto, sem badge estourando */
  .otw-ribbon { gap: 12px; padding: 14px 16px; }
  .otw-ribbon b { font-size: 13.5px; }
  .otw-ribbon span { font-size: 11.5px; line-height: 1.3; }
  .otw-ribbon .otw-tag { display: none; } /* redundante no mobile, evita estouro */

  /* line-heights compactos em textos secundários (evita "esparramado") */
  .job-desc, .ei-desc, .cmt-main p, .exp-body p, .exp-tl-body p,
  .notif-item p, .comm-none, .applicant-msg, .card p { line-height: 1.4; }

  /* badges/tags/pills nunca estouram: não quebram no meio e encolhem se preciso */
  .badge, .job-tag, .otw-tag, .admin-badge, .applicant-status,
  .mine-status, .job-applied-tag, .re-count, .tag {
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* tags com muito letter-spacing apertam no mobile */
  .mono, .gt-head, .toc-label, .ae-label { letter-spacing: .06em; }
}

/* ============================================================
   NEWS — rediagramação mobile do card de destaque
   ============================================================ */
@media (max-width: 760px) {
  /* card de destaque vira 1 coluna: mídia em cima, texto embaixo */
  .blog-featured {
    flex-direction: column;
    min-height: 0;
  }
  .bf-media {
    flex: none;
    height: 150px;
    width: 100%;
  }
  .bf-body { padding: 18px 18px 20px; }
  .bf-body h2 {
    font-size: 20px;
    line-height: 1.2;
    margin: 6px 0 8px;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: none;
  }
  .bf-body p { font-size: 13px; line-height: 1.45; }
  /* rodapé (fonte · tempo · leitura): uma linha só, com scroll se precisar */
  .bf-meta {
    flex-wrap: wrap;
    gap: 6px 8px;
    margin-top: 14px;
    font-size: 10.5px;
    line-height: 1.3;
  }
  .bf-meta span { white-space: nowrap; }
}

/* ============================================================
   MEUS CURSOS — rediagramação mobile do hero
   ============================================================ */
@media (max-width: 760px) {
  .courses-hero { padding: 24px 20px 22px; margin-bottom: 20px; }
  /* logo menor, sem sobrepor o texto */
  .hero-logo { top: 18px; right: 18px; }
  .hero-logo img { width: 32px; height: auto; }
  .courses-hero .eyebrow { font-size: 10px; padding-right: 44px; }
  .courses-hero h2 { font-size: 23px; line-height: 1.18; margin: 8px 0 8px; }
  .courses-hero p { font-size: 13.5px; line-height: 1.5; }

  /* botões e card de progresso EMPILHAM (não espremem mais) */
  .hero-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 18px;
  }
  .hero-row .btn-solid,
  .hero-row .btn-ghost {
    width: 100%;
    text-align: center;
    padding: 13px 20px;
    white-space: nowrap;
  }
  /* card "em andamento" ocupa largura total, abaixo dos botões */
  .hero-row .progress-pill {
    width: 100%;
    min-width: 0;
    margin-left: 0;
    box-sizing: border-box;
    margin-top: 4px;
  }
  .progress-pill b { font-size: 13px; line-height: 1.3; }
}

/* ============================================================
   COMUNIDADE — rediagramação mobile (hero + threads)
   ============================================================ */
@media (max-width: 760px) {
  /* HERO: ícone+texto lado a lado no topo, botão em largura total embaixo */
  .comm-hero {
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 20px;
  }
  .comm-hero > div:not(.avatar) { flex: 1; min-width: 0; }
  .comm-hero h2 { font-size: 20px; line-height: 1.2; }
  .comm-hero p { font-size: 12.5px; line-height: 1.45; }
  .comm-hero form { width: 100%; }
  .comm-hero .btn-light {
    margin-left: 0;
    width: 100%;
    text-align: center;
  }

  /* THREADS: a coluna de votos vira rodapé horizontal (mais limpo no mobile) */
  .vote-post { flex-direction: column; }
  .vote-rail {
    width: 100%;
    flex-direction: row;
    justify-content: flex-start;
    border-right: none;
    order: 2;                 /* votos vão pro fim do card */
    padding: 10px 20px 14px;
    gap: 10px;
    background: transparent;
    align-items: center;
  }
  .vote-rail button { width: 34px; height: 30px; border: 1px solid var(--line); }
  .vote-n { font-size: 14px; min-width: 28px; text-align: center; }
  .vote-main { order: 1; padding: 16px 20px 6px; }
  .vote-main h3 { font-size: 16px; line-height: 1.25; }
  .vote-main p { font-size: 13px; line-height: 1.45; }
  /* meta (fixado · comunidade · autor · tempo): quebra bonito */
  .vote-meta { gap: 5px 8px; font-size: 11.5px; }
  .vote-meta span { white-space: nowrap; }
  /* ações (comentários/compartilhar/salvar): espaçadas e tocáveis */
  .vote-actions { gap: 16px; flex-wrap: wrap; padding-top: 4px; }
}

/* ============================================================
   VAGAS — refinamento mobile
   ============================================================ */
@media (max-width: 760px) {
  /* estado vazio com mais presença */
  .jobs-empty { padding: 56px 24px; }
  .jobs-empty .je-ico {
    font-size: 30px;
    width: 68px; height: 68px;
    display: grid; place-items: center;
    background: var(--brand-soft);
    border-radius:var(--r-md);
    margin-bottom: 16px;
  }
  .jobs-empty b { font-size: 16px; margin-bottom: 6px; }
  .jobs-empty p { font-size: 13px; line-height: 1.5; }

  /* card de vaga: respira melhor */
  .job-card { padding: 16px 18px; gap: 12px; }
  .job-card-main b { font-size: 14.5px; line-height: 1.3; }
  .job-card-head { gap: 12px; }
  /* logo/ícone da empresa não encolhe */
  .job-card-head > .avatar,
  .job-card-head > div:first-child { flex-shrink: 0; }
  /* tags de vaga em linha, sem estourar */
  .job-tags { gap: 6px; }
  .job-tag { white-space: nowrap; }
}

/* ============================================================
   MOBILE — "Próximas aulas ao vivo": 3 colunas espremidas (~110px)
   viram lista vertical com chip de data. Desktop segue intacto.
   ============================================================ */
@media (max-width: 760px) {
  .nl-row { flex-direction: column; }
  .nl-item { padding: 14px; gap: 12px; align-items: flex-start; }
  .nl-item + .nl-item { border-left: 0; border-top: 1px solid var(--line); }

  /* chip de data: dia grande + mês mono, na cor da marca */
  .nl-chip {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    flex: 0 0 46px; width: 46px; padding: 7px 0;
    border-radius:var(--r-md); background: var(--brand); color: #fff;
    line-height: 1; text-align: center;
  }
  .nl-chip b { font-family: var(--font-display); font-size: 18px; font-weight: 700; }
  .nl-chip span { font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .06em; margin-top: 3px; opacity: .85; }
  .nl-item.is-live .nl-chip { background: var(--accent); }

  /* data curta (dia da semana + hora) — o resto já está no chip */
  .nl-when { display: none; }
  .nl-when-sm { display: block; white-space: nowrap; }

  /* título respira e NUNCA hifeniza */
  .nl-body { flex: 1 1 auto; min-width: 0; }
  .nl-body h4 {
    font-size: 15.5px; line-height: 1.25; margin: 4px 0 3px;
    overflow-wrap: break-word; word-break: normal; hyphens: none;
  }
  .nl-body p { font-size: 12.5px; line-height: 1.3; }
}

/* ============================================================
   DIRECT — mensagens privadas com solicitação
   Tudo via variáveis pra não quebrar o dark mode.
   ============================================================ */

/* badge do ícone no topbar */
.tb-icon.on{color:var(--brand);border-color:var(--brand)}
.tb-count{
  position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;
  border-radius:999px;background:var(--accent);color:#fff;
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:9.5px;font-weight:600;
  display:grid;place-items:center;border:2px solid var(--bg);box-sizing:content-box;
}

/* Painel do direct. As abas moram DENTRO da superfície de conteúdo e são
   sublinhadas, não pílulas — forma e lugar diferentes da navegação do topo,
   pra não lerem como continuação dela. */
.dm-panel{padding:0;overflow:hidden}
.dm-panel-head{
  display:flex;align-items:stretch;gap:24px;
  padding:0 18px;border-bottom:1px solid var(--line);background:var(--surface-2);
}
.dm-switch{display:flex;gap:24px;min-width:0}
.dm-switch-item{
  display:inline-flex;align-items:center;gap:8px;
  padding:15px 0 12px;margin-bottom:-1px;
  border-bottom:3px solid transparent;
  font-size:13.5px;font-weight:600;color:var(--ink-faint);
  white-space:nowrap;flex-shrink:0;
}
.dm-switch-item:hover{color:var(--ink)}
.dm-switch-item.on{color:var(--brand);border-bottom-color:var(--brand)}
.dm-switch-count{
  min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  background:var(--accent);color:#fff;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:9.5px;font-weight:600;
  display:grid;place-items:center;
}

/* linha da caixa de entrada */
.dm-row{display:flex;align-items:center;gap:14px;padding:15px 18px;border-bottom:1px solid var(--line)}
.dm-row:last-child{border-bottom:0}
.dm-row:hover{background:var(--surface-2)}
.dm-row.unread{background:var(--brand-soft)}
[data-theme="dark"] .dm-row.unread{background:rgba(77,77,255,.12)}
.dm-row-main{flex:1;min-width:0}
.dm-row-top{display:flex;align-items:baseline;gap:8px}
.dm-row-top b{font-family:var(--font-display);font-size:14.5px;font-weight:600;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-time{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:10px;color:var(--ink-faint);flex-shrink:0}
.dm-row-prev{font-size:12.5px;color:var(--ink-soft);line-height:1.35;margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-flag{
  display:inline-block;margin-top:6px;padding:3px 9px;border-radius:999px;
  background:var(--bg);border:1px solid var(--line);
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:9.5px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-faint);white-space:nowrap;
}
.dm-flag.new{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.dm-dot{
  flex-shrink:0;min-width:20px;height:20px;padding:0 5px;border-radius:999px;
  background:var(--accent);color:#fff;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:10px;font-weight:600;
  display:grid;place-items:center;
}

/* estado vazio */
.dm-empty{padding:44px 24px;text-align:center}
/* '> b' de propósito: sem o filho direto isto pegava o <b> inline dentro do
   <p> e jogava a palavra pra linha própria em 17px. */
.dm-empty > b{font-family:var(--font-display);font-size:17px;display:block;margin-bottom:7px}
.dm-empty p{font-size:13px;color:var(--ink-soft);line-height:1.5;max-width:420px;margin:0 auto 16px}

/* cabeçalho da conversa */
.dm-head{display:flex;align-items:center;gap:14px;padding:14px 16px;margin-bottom:12px}
.dm-head-id{flex:1;min-width:0}
.dm-head-id b{font-family:var(--font-display);font-size:15px;font-weight:600;display:flex;align-items:center;gap:6px}
.dm-head-id span{display:block;font-size:12.5px;color:var(--ink-soft);line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* caixa de decisão da solicitação */
.dm-decide{padding:18px;margin-bottom:12px;border-color:var(--accent)}
.dm-decide b{font-family:var(--font-display);font-size:15px;display:block;margin-bottom:5px}
.dm-decide p{font-size:13px;color:var(--ink-soft);line-height:1.45;margin-bottom:14px}
.dm-decide-actions{display:flex;gap:10px}

/* log de mensagens */
.dm-log{padding:18px 16px;margin-bottom:12px;display:flex;flex-direction:column;gap:14px}
.dm-msg{display:flex;flex-direction:column;align-items:flex-start;max-width:78%}
.dm-msg.mine{align-self:flex-end;align-items:flex-end}
.dm-bubble{
  padding:11px 14px;border-radius:var(--r-md);
  background:var(--bg);border:1px solid var(--line);
  font-size:13.5px;line-height:1.5;color:var(--ink);
  overflow-wrap:break-word;word-break:normal;hyphens:none;
}
.dm-msg.mine .dm-bubble{border-radius:var(--r-md);background:var(--brand);border-color:var(--brand);color:#fff}
.dm-msg-time{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:9.5px;color:var(--ink-faint);margin-top:4px}

/* formulário de envio */
.dm-form,.dm-compose{padding:16px}
.dm-form textarea,.dm-compose textarea{
  width:100%;box-sizing:border-box;resize:vertical;
  padding:12px 14px;border-radius:var(--r-md);
  background:var(--bg);border:1px solid var(--line);color:var(--ink);
  font-family:var(--font-body,inherit);font-size:13.5px;line-height:1.5;
}
html.keyboard-nav .dm-form textarea:focus-visible,
html.keyboard-nav .dm-compose textarea:focus-visible{outline:none;border-color:var(--brand)}
.dm-form-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.dm-form-foot .mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:10px;color:var(--ink-faint)}
.dm-compose-hint{font-size:12.5px;color:var(--ink-soft);line-height:1.45;margin:4px 0 12px}

/* aviso de "aguardando" (é o que o solicitante vê, recusado ou não) */
.dm-waiting{display:flex;gap:14px;align-items:flex-start;padding:16px}
.dm-waiting-ico{flex-shrink:0;width:38px;height:38px;border-radius:var(--r-md);display:grid;place-items:center;
  background:var(--bg);border:1px solid var(--line);color:var(--ink-faint)}
.dm-waiting b{font-family:var(--font-display);font-size:14px;display:block;margin-bottom:3px}
.dm-waiting p{font-size:12.5px;color:var(--ink-soft);line-height:1.45}

/* ---- MOBILE ---- */
@media (max-width: 760px) {
  .tb-actions{gap:8px}
  .dm-panel-head{padding:0 14px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .dm-panel-head::-webkit-scrollbar{display:none}
  .dm-switch{gap:20px}
  .dm-row{padding:13px 14px;gap:12px}
  .dm-row-top b{font-size:14px}
  .dm-msg{max-width:88%}
  .dm-head{flex-wrap:wrap}
  .dm-head .btn-light{width:100%;text-align:center}
  .dm-decide-actions{flex-direction:column}
  .dm-decide-actions form{width:100%}
  .dm-decide-actions button{width:100%}
  .dm-form-foot{flex-direction:column;align-items:stretch}
  .dm-form-foot .btn-primary{width:100%}
  .dm-empty{padding:26px 18px}
}

/* ============================================================
   EXPERIÊNCIA PROFISSIONAL — empresa com cargos aninhados
   ============================================================ */

/* --- exibição no perfil --- */
.xp-co{padding:18px 0;border-bottom:1px solid var(--line)}
.xp-co:first-child{padding-top:0}
.xp-co:last-child{border-bottom:0;padding-bottom:0}
.xp-co-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.xp-co-logo{
  flex-shrink:0;width:42px;height:42px;border-radius:var(--r-md);display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand);
  font-family:var(--font-display);font-size:14px;font-weight:700;letter-spacing:.02em;
}
[data-theme="dark"] .xp-co-logo{background:rgba(77,77,255,.18)}
.xp-co-id{min-width:0}
.xp-co-id b{font-family:var(--font-display);font-size:15px;font-weight:600;display:block;line-height:1.3}
.xp-co-id span{font-size:12px;color:var(--ink-faint);font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* trilho vertical: só aparece quando há mais de um cargo */
.xp-roles{padding-left:20px}
.xp-co.multi .xp-roles{position:relative;margin-left:20px;padding-left:22px}
.xp-co.multi .xp-roles::before{
  content:"";position:absolute;left:0;top:7px;bottom:9px;width:2px;
  background:var(--line);border-radius:var(--r-md);
}
.xp-role{position:relative;padding-bottom:14px}
.xp-role:last-child{padding-bottom:0}
.xp-dot{display:none}
.xp-co.multi .xp-dot{
  display:block;position:absolute;left:-27px;top:6px;
  width:10px;height:10px;border-radius:50%;
  background:var(--surface);border:2px solid var(--ink-faint);
}
.xp-co.multi .xp-role:first-child .xp-dot{background:var(--brand);border-color:var(--brand)}
.xp-role-body b{font-family:var(--font-display);font-size:14px;font-weight:600;display:block;line-height:1.3}
.xp-per{display:block;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:11px;color:var(--ink-faint);margin-top:2px}
.xp-role-body p{font-size:12.5px;color:var(--ink-soft);line-height:1.5;margin-top:6px}

/* --- edição --- */
.xp-edit-list{display:flex;flex-direction:column;gap:14px;margin-bottom:18px}
.xp-edit-co{border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;background:var(--surface-2)}
.xp-edit-co-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.xp-edit-co-id{flex:1;min-width:0}
.xp-edit-co-id b{font-family:var(--font-display);font-size:14.5px;font-weight:600;display:block}
.xp-edit-co-id span{font-size:11.5px;color:var(--ink-faint);font-family:var(--font-mono);font-variant-numeric:tabular-nums}

.xp-edit-role{
  position:relative;display:flex;align-items:flex-start;gap:10px;
  padding:12px 0 12px 22px;border-top:1px solid var(--line);
}
.xp-edit-role .xp-dot{
  display:block;position:absolute;left:2px;top:17px;
  width:9px;height:9px;border-radius:50%;
  background:var(--surface);border:2px solid var(--ink-faint);
}
.xp-edit-role:first-of-type .xp-dot{background:var(--brand);border-color:var(--brand)}
.xp-edit-role-body{flex:1;min-width:0}
.xp-edit-role-body b{font-family:var(--font-display);font-size:13.5px;font-weight:600;display:block}
.xp-edit-role-body p{font-size:12.5px;color:var(--ink-soft);line-height:1.45;margin-top:5px}

/* <details> como acordeão de formulário — sem JS */
.xp-inline{margin-top:8px}
.xp-inline > summary{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;
  padding:6px 13px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);
  font-size:12px;font-weight:600;color:var(--ink-soft);
}
.xp-inline > summary::-webkit-details-marker{display:none}
.xp-inline > summary:hover{color:var(--brand);border-color:var(--brand)}
.xp-inline[open] > summary{color:var(--brand);border-color:var(--brand)}
.xp-form{margin-top:12px;padding:14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.xp-form-actions{display:flex;gap:10px;margin-top:12px}
.xp-add-role{margin-top:12px}
.xp-new{margin-top:4px}
.xp-new > summary{background:var(--brand-soft);border-color:transparent;color:var(--brand);padding:9px 16px;font-size:12.5px}

.xp-menu{position:relative;flex-shrink:0}
.xp-menu > summary{
  cursor:pointer;list-style:none;padding:5px 11px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);
  font-size:11.5px;font-weight:600;color:var(--ink-soft);
}
.xp-menu > summary::-webkit-details-marker{display:none}
.xp-rename{display:flex;gap:8px;margin-top:8px}
.xp-rename input{
  flex:1;min-width:0;padding:8px 12px;border-radius:var(--r-md);
  background:var(--bg);border:1px solid var(--line);color:var(--ink);font-size:13px;
}

@media (max-width: 760px) {
  .xp-co.multi .xp-roles{margin-left:12px;padding-left:20px}
  .xp-co.multi .xp-dot{left:-25px}
  .xp-edit-co{padding:12px}
  .xp-edit-co-head{flex-wrap:wrap}
  .xp-rename{flex-direction:column}
  .xp-rename button{width:100%}
  .xp-form-actions{flex-direction:column}
  .xp-form-actions .btn-primary{width:100%}
  .xp-inline > summary{width:100%;justify-content:center}
}

/* ---- formulário de vaga: campos estruturados ---- */
.field-hint{display:block;font-size:11px;color:var(--ink-faint);line-height:1.4;margin-top:5px}
.money-field{display:flex;align-items:center;gap:0}
.money-field > span{
  flex-shrink:0;padding:11px 12px;border-radius:var(--r-md);
  background:var(--surface-2);border:1px solid var(--line);border-right:0;
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:12px;color:var(--ink-faint);
}
.money-field > input{flex:1;min-width:0;border-radius:var(--r-md)}
.job-cnpj{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:11px;color:var(--ink-faint);margin-top:3px;letter-spacing:.02em}
#localFields{transition:opacity .2s ease}
#localFields.atenuado{opacity:.55}

/* ---- combobox de cidade ----
   Substitui o <datalist> nativo, que o navegador desenha por conta própria:
   não aceita CSS (parecia autofill do navegador) e casa substring em qualquer
   posição, então "C" trazia "Araucária". Aqui prefixo vem primeiro. */
.combo{position:relative}
.combo-input{width:100%;box-sizing:border-box;padding-right:36px !important}
.combo-arrow{
  position:absolute;right:13px;top:50%;transform:translateY(-50%);
  display:grid;place-items:center;color:var(--ink-faint);cursor:pointer;
  transition:transform .18s ease,color .18s ease;
}
.combo.open .combo-arrow{transform:translateY(-50%) rotate(180deg);color:var(--brand)}
.combo-input:disabled ~ .combo-arrow{opacity:.4;cursor:default}

.combo-list{
  position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:70;
  max-height:262px;overflow-y:auto;padding:6px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--shadow-pop);
}
.combo-list[hidden]{display:none}
.combo-opt{
  padding:9px 12px;border-radius:var(--r-md);cursor:pointer;
  font-size:13.5px;line-height:1.3;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.combo-opt:hover{background:var(--bg)}
.combo-opt.active{background:var(--brand-soft);color:var(--brand)}
.combo-opt mark{background:transparent;color:var(--brand);font-weight:700;padding:0}
.combo-opt.active mark{color:inherit}
.combo-empty{padding:14px 12px;font-size:12.5px;color:var(--ink-faint);text-align:center;line-height:1.4}

[data-theme="dark"] .combo-opt.active{background:rgba(77,77,255,.20);color:#fff}
[data-theme="dark"] .combo-opt mark{color:#9C9CFF}

.combo-list::-webkit-scrollbar{width:9px}
.combo-list::-webkit-scrollbar-track{background:transparent}
.combo-list::-webkit-scrollbar-thumb{background:var(--line);border-radius:var(--r-md);border:3px solid var(--surface)}

@media (max-width: 760px){
  .combo-list{max-height:220px}
  .combo-opt{padding:11px 12px;font-size:14px}
}

/* ============================================================
   RODAPÉ DA PLATAFORMA + MODAL DE REPORT
   ============================================================ */
.site-footer{margin-top:52px;padding-top:22px;border-top:1px solid var(--line)}
.sf-inner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.sf-brand{display:flex;align-items:center;gap:12px;min-width:0}
.sf-logo{height:19px;width:auto;flex-shrink:0;opacity:.75}
.sf-logo-dark{display:none}
[data-theme="dark"] .sf-logo-light{display:none}
[data-theme="dark"] .sf-logo-dark{display:block}
.sf-brand span{font-size:12.5px;color:var(--ink-faint);line-height:1.4}

.sf-links{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.sf-link{font-size:12.5px;font-weight:500;color:var(--ink-soft);white-space:nowrap}
.sf-link:hover{color:var(--brand)}
.sf-report{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  padding:8px 15px;border-radius:999px;
  border:1px solid var(--line);background:transparent;
  font-size:12.5px;font-weight:600;color:var(--ink-soft);white-space:nowrap;
  transition:color .15s ease,border-color .15s ease;
}
.sf-report:hover{color:var(--brand);border-color:var(--brand)}

.sf-bottom{
  margin-top:18px;padding-top:14px;border-top:1px solid var(--line);
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:10.5px;color:var(--ink-faint);letter-spacing:.02em;
}

/* modal */
.report-modal{
  /* margin:auto é o que centraliza um <dialog>. O reset global da linha 35
     (*{margin:0}) mata isso e prega o modal no canto superior esquerdo. */
  margin:auto;
  width:min(520px,calc(100vw - 32px));padding:0;border:none;
  border-radius:var(--r-lg);background:var(--surface);color:var(--ink);
  box-shadow:var(--shadow-pop);
}
.report-modal::backdrop{background:rgba(11,11,30,.45)}
.report-form{padding:22px}
.rm-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px}
.rm-head b{font-family:var(--font-display);font-size:16.5px;font-weight:600;display:block}
.rm-head span{display:block;font-size:12.5px;color:var(--ink-soft);line-height:1.45;margin-top:4px}
.rm-close{flex-shrink:0;width:30px;height:30px;border-radius:var(--r-md);display:grid;place-items:center;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-faint);cursor:pointer}
.rm-close:hover{color:var(--ink);border-color:var(--ink-faint)}
.rm-context{
  display:flex;align-items:flex-start;gap:9px;margin-top:4px;padding:11px 13px;
  border-radius:var(--r-md);background:var(--bg);border:1px solid var(--line);
  font-size:11.5px;color:var(--ink-faint);line-height:1.45;
}
.rm-context svg{flex-shrink:0;margin-top:1px}
.rm-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}

/* páginas legais / ajuda */
.doc-body{background:var(--bg);color:var(--ink);min-height:100vh;display:flex;flex-direction:column}
.doc-top{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 28px;border-bottom:1px solid var(--line);background:var(--surface)}
.doc-main{flex:1;padding:38px 28px 56px}
.doc-article{max-width:760px;margin:0 auto}
/* páginas que precisam da largura cheia do grid de duas colunas (News) em
   vez da coluna de leitura estreita — ver @yield('doc-class') em layouts/doc.blade.php */
.doc-article-wide{max-width:1320px}
.doc-eyebrow{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:10.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent)}
.doc-article h1{font-family:var(--font-display);font-size:32px;font-weight:700;line-height:1.15;margin:10px 0 8px;letter-spacing:-.015em}
.doc-lead{font-size:13.5px;color:var(--ink-faint);margin-bottom:30px;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.doc-article h2{font-family:var(--font-display);font-size:18px;font-weight:600;margin:30px 0 10px;line-height:1.3}
.doc-article p{font-size:14.5px;line-height:1.65;color:var(--ink-soft);margin-bottom:12px}
.doc-article ul{margin:0 0 14px 20px}
.doc-article li{font-size:14.5px;line-height:1.6;color:var(--ink-soft);margin-bottom:6px;list-style:disc}
.doc-article b{color:var(--ink);font-weight:600}
.doc-article a{color:var(--brand);font-weight:600}
.doc-table{width:100%;border-collapse:collapse;margin:6px 0 18px;font-size:13.5px}
.doc-table th{text-align:left;padding:9px 12px;background:var(--surface-2);border:1px solid var(--line);
  font-weight:600;color:var(--ink)}
.doc-table td{padding:9px 12px;border:1px solid var(--line);color:var(--ink-soft);line-height:1.5}
.doc-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:18px 28px;border-top:1px solid var(--line);background:var(--surface);
  font-size:12.5px;color:var(--ink-faint)}
.doc-foot a{color:var(--ink-soft);font-weight:600}
.doc-foot a:hover{color:var(--brand)}

@media (max-width: 760px) {
  /* o dock flutua sobre o rodapé: sem esse respiro ele nasce escondido */
  .site-footer{margin-top:34px;padding-bottom:90px}
  .sf-inner{flex-direction:column;align-items:flex-start;gap:18px}
  .sf-links{width:100%;gap:16px 20px}
  .sf-report{width:100%;justify-content:center;order:-1;margin-bottom:2px}
  .report-form{padding:18px}
  .rm-actions{flex-direction:column-reverse}
  .rm-actions button{width:100%}
  .doc-top,.doc-main,.doc-foot{padding-left:18px;padding-right:18px}
  .doc-article h1{font-size:25px}
}

/* documento legal renderizado DENTRO da plataforma (usuário logado) */
.doc-in-app{padding:34px 44px 40px;max-width:820px}
.doc-in-app h1{font-size:27px;margin-top:8px}
.doc-in-app .doc-lead{margin-bottom:26px}
@media (max-width: 760px){
  .doc-in-app{padding:22px 20px 26px}
  .doc-in-app h1{font-size:23px}
}

/* ---- menu de três pontos ---- */
.dots{position:relative;flex-shrink:0}
.dots > summary{
  list-style:none;cursor:pointer;display:grid;place-items:center;
  width:26px;height:26px;border-radius:var(--r-md);color:var(--ink-faint);
  transition:background .15s ease,color .15s ease;
}
.dots > summary::-webkit-details-marker{display:none}
.dots > summary:hover{background:var(--surface-2);color:var(--ink)}
.dots[open] > summary{background:var(--surface-2);color:var(--ink)}
.dots-menu{
  position:absolute;right:0;top:calc(100% + 5px);z-index:60;min-width:172px;padding:5px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--shadow-pop);
}
.dots-item{
  display:flex;align-items:center;gap:9px;width:100%;cursor:pointer;
  padding:9px 11px;border-radius:var(--r-md);background:none;border:none;text-align:left;
  font-size:13px;font-weight:500;color:var(--ink);white-space:nowrap;
}
.dots-item:hover{background:var(--bg)}
.dots-item.danger{color:#C2410C}
.dots-item.danger:hover{background:#FEF0E8}
[data-theme="dark"] .dots-item.danger{color:#FF8A4C}
[data-theme="dark"] .dots-item.danger:hover{background:rgba(255,111,29,.14)}

/* bolha do direct precisa acomodar o menu ao lado */
.dm-bubble-row{display:flex;align-items:flex-start;gap:4px}
.dm-msg.mine .dm-bubble-row{flex-direction:row-reverse}
.dm-bubble-row .dots{opacity:0;transition:opacity .15s ease}
.dm-msg:hover .dots,.dots[open]{opacity:1 !important}
@media (hover:none){.dm-bubble-row .dots{opacity:1}}

.opt{font-weight:400;color:var(--ink-faint)}

.dm-older{text-align:center;font-size:11.5px;color:var(--ink-faint);padding:6px 0 10px;
  border-bottom:1px dashed var(--line);margin-bottom:4px}

.field-link{float:right;font-size:11.5px;font-weight:500;color:var(--brand)}
.field-link:hover{text-decoration:underline}
.auth-note{padding:11px 14px;border-radius:var(--r-md);font-size:12.5px;line-height:1.45;margin-bottom:16px}
.auth-note.ok{background:var(--brand-soft);color:var(--brand)}
.auth-submit{width:100%;margin-top:4px}
.auth-foot{margin-top:18px;text-align:center;font-size:12.5px}
.auth-foot a{color:var(--ink-soft);font-weight:500}
.auth-foot a:hover{color:var(--brand)}

/* ============================================================
   TRILHAS E ANOTAÇÕES
   ============================================================ */

/* --- anotações na aula --- */
.note-box h3{display:flex;align-items:center;gap:9px}
.note-status{margin-left:auto;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:10.5px;color:var(--ink-faint);font-weight:500}
.note-box textarea{
  width:100%;box-sizing:border-box;resize:vertical;min-height:110px;
  padding:13px 15px;border-radius:var(--r-md);
  background:var(--bg);border:1px solid var(--line);color:var(--ink);
  font-family:inherit;font-size:13.5px;line-height:1.6;
}
html.keyboard-nav .note-box textarea:focus-visible{outline:none;border-color:var(--brand)}
.note-hint{font-size:11.5px;color:var(--ink-faint);margin-top:9px}
.note-hint a{color:var(--brand);font-weight:600}

/* --- página de anotações --- */
.note-card{padding:16px 18px;margin-bottom:10px}
.note-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px}
.note-card-head a{font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--ink)}
.note-card-head a:hover{color:var(--brand)}
.note-card-head .mono{font-size:10px;color:var(--ink-faint);flex-shrink:0}
.note-card p{font-size:13px;color:var(--ink-soft);line-height:1.6;white-space:pre-wrap}

/* --- card de trilha --- */
.track-card{display:flex;gap:16px;align-items:center;padding:16px 18px;margin-bottom:12px}
.track-card:hover{border-color:var(--brand)}
.track-card.done{opacity:.72}
.tk-mark{
  flex-shrink:0;width:62px;height:62px;border-radius:var(--r-md);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;
}
.tk-mark b{font-family:var(--font-display);font-size:20px;font-weight:700;letter-spacing:-.015em}
.tk-mark span{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:8.5px;letter-spacing:.06em;margin-top:3px;opacity:.85}
.tk-body{flex:1;min-width:0}
.tk-top{display:flex;align-items:center;gap:10px}
.tk-top h3{font-family:var(--font-display);font-size:15.5px;font-weight:600;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-flag{
  flex-shrink:0;padding:3px 9px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent);
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:9px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
}
.tk-flag.done{background:var(--brand-soft);color:var(--brand)}
.tk-flag.next{background:var(--brand);color:#fff}
.tk-sub{font-size:12.5px;color:var(--ink-soft);line-height:1.4;margin-top:3px}
.tk-bar{height:7px;border-radius:var(--r-md);background:var(--bg);overflow:hidden;margin:10px 0 7px}
.tk-bar.lg{height:10px;margin:16px 0 14px}
.tk-bar > span{display:block;height:100%;border-radius:var(--r-md);transition:width .3s ease}
.tk-meta{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:10.5px;color:var(--ink-faint)}
.tk-meta b{color:var(--ink)}

/* --- página da trilha --- */
.tk-hero{padding:22px 24px;margin-bottom:20px}
.tk-hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.tk-hero h2{font-family:var(--font-display);font-size:22px;font-weight:700;line-height:1.2;letter-spacing:-.015em}
.tk-hero p{font-size:13.5px;color:var(--ink-soft);line-height:1.55;margin-top:7px;max-width:62ch}
.tk-badge-done{
  flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:999px;
  background:var(--brand-soft);color:var(--brand);font-size:12px;font-weight:600;
}
.tk-hero-stats{display:flex;gap:28px;flex-wrap:wrap}
.tk-hero-stats div{display:flex;flex-direction:column}
.tk-hero-stats b{font-family:var(--font-display);font-size:19px;font-weight:700;line-height:1}
.tk-hero-stats span{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:9.5px;color:var(--ink-faint);
  letter-spacing:.05em;text-transform:uppercase;margin-top:4px}

/* --- passos da trilha --- */
.tk-steps{position:relative;padding-left:6px}
.tk-step{display:flex;align-items:flex-start;gap:14px;padding:15px 0;position:relative}
.tk-step:not(:last-child)::before{
  content:"";position:absolute;left:17px;top:48px;bottom:-6px;width:2px;background:var(--line);
}
.tk-step-num{
  flex-shrink:0;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;z-index:1;
  background:var(--surface);border:2px solid var(--line);color:var(--ink-faint);
  font-family:var(--font-display);font-size:14px;font-weight:700;
}
.tk-step.next .tk-step-num{border-color:var(--brand);color:var(--brand)}
.tk-step-body{flex:1;min-width:0}
.tk-step-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.tk-step-top b{font-family:var(--font-display);font-size:14.5px;font-weight:600}
.tk-step-body p{font-size:12.5px;color:var(--ink-soft);line-height:1.5;margin-top:4px}
.tk-step-meta{margin-top:6px;display:flex;gap:6px;flex-wrap:wrap}
.tk-step-meta .mono{font-size:10.5px;color:var(--ink-faint)}
.tk-step.ok .tk-step-top b{color:var(--ink-soft)}

@media (max-width: 760px){
  .track-card{padding:14px;gap:13px}
  .tk-mark{width:52px;height:52px;border-radius:var(--r-md)}
  .tk-hero{padding:18px}
  .tk-hero-top{flex-direction:column;gap:12px}
  .tk-hero-stats{gap:20px}
  .tk-step{flex-wrap:wrap}
  .tk-step .btn-primary,.tk-step .btn-light{width:100%;text-align:center;margin-left:50px}
  .note-card-head{flex-direction:column;gap:3px}
}

/* --- trilha sugerida na home: faixa única, não grade --- */
.home-track{
  display:flex;align-items:center;gap:16px;padding:16px 18px;margin:24px 0 0;
  border-left:3px solid var(--tk);
}
.home-track:hover{border-color:var(--line);border-left-color:var(--tk);background:var(--surface-2)}
.ht-mark{
  flex-shrink:0;width:54px;height:54px;border-radius:var(--r-md);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;
}
.ht-mark b{font-family:var(--font-display);font-size:19px;font-weight:700}
.ht-mark span{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:8px;letter-spacing:.06em;margin-top:3px;opacity:.85}
.ht-body{flex:1;min-width:0}
.ht-eyebrow{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--type-context-label);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent);
}
.ht-body h4{font-family:var(--font-display);font-size:var(--type-card-title);font-weight:600;line-height:1.25;margin:4px 0 3px}
.ht-body p{font-size:12.5px;color:var(--ink-soft);line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ht-bar{height:6px;border-radius:var(--r-md);background:var(--bg);overflow:hidden;margin:9px 0 6px;max-width:340px}
.ht-bar > span{display:block;height:100%;border-radius:var(--r-md)}
.ht-meta{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:10px;color:var(--ink-faint);display:block;margin-top:6px}
.ht-meta b{color:var(--ink)}
.ht-go{flex-shrink:0;color:var(--ink-faint)}
.home-track:hover .ht-go{color:var(--tk)}

@media (max-width: 760px){
  .home-track{padding:14px;gap:13px}
  .ht-mark{width:46px;height:46px;border-radius:var(--r-md)}
  .ht-go{display:none}
  .ht-body p{white-space:normal}
}

/* estado vazio da formação: presente, mas discreto — marca o lugar sem competir */
.home-track.empty{border-left-color:var(--line);background:transparent;border-style:dashed}
.home-track.empty:hover{background:var(--surface-2)}
.ht-mark.ghost{
  background:var(--bg) !important;border:1px dashed var(--line);
  color:var(--ink-faint);
}
.ht-eyebrow.ghost{color:var(--ink-faint)}
.home-track.empty h4{color:var(--ink-soft)}
.home-track.empty p{white-space:normal;font-size:12px}

/* ---- montador de trilha ---- */
.tf-form{padding:20px 22px}
.tf-colors{display:flex;gap:9px}
.tf-color{cursor:pointer}
.tf-color input{position:absolute;opacity:0;width:0;height:0}
.tf-color span{
  display:block;width:30px;height:30px;border-radius:var(--r-md);background:var(--c);
  border:2px solid transparent;box-shadow:0 0 0 2px var(--surface) inset;
}
.tf-color input:checked + span{border-color:var(--ink);box-shadow:0 0 0 3px var(--surface) inset}

.tf-picker{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:6px}
.tf-col h4{font-family:var(--font-display);font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:8px}
.tf-count{
  min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--brand);color:#fff;
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:10px;display:grid;place-items:center;
}
.tf-hint{font-size:11px;color:var(--ink-faint);margin:2px 0 9px}
.tf-pool,.tf-chosen{display:flex;flex-direction:column;gap:7px;min-height:60px}
.tf-chosen{padding:4px;border:1px dashed var(--line);border-radius:var(--r-md);min-height:80px}

.tf-item{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;cursor:pointer;
  padding:11px 13px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--line);
  font-size:13px;color:var(--ink);
}
.tf-item:hover{border-color:var(--brand)}
.tf-item-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tf-plus{flex-shrink:0;color:var(--brand);font-size:16px;font-weight:700;line-height:1}
.tf-item.chosen{cursor:grab;background:var(--surface-2)}
.tf-item.chosen.dragging{opacity:.45;cursor:grabbing}
.tf-grip{flex-shrink:0;color:var(--ink-faint);font-size:13px;letter-spacing:-2px}
.tf-num{
  flex-shrink:0;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand);
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:10px;font-weight:600;
}
.tf-remove{
  flex-shrink:0;width:22px;height:22px;border-radius:var(--r-md);cursor:pointer;
  background:none;border:none;color:var(--ink-faint);font-size:17px;line-height:1;
}
.tf-remove:hover{background:var(--bg);color:#C2410C}
.tf-empty{font-size:11.5px;color:var(--ink-faint);text-align:center;padding:10px 6px;line-height:1.45}
.tf-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.tf-actions .btn-outline{margin-right:auto}

@media (max-width: 760px){
  .tf-form{padding:16px}
  .tf-picker{grid-template-columns:1fr;gap:20px}
  .tf-actions{flex-direction:column-reverse}
  .tf-actions .btn-outline{margin-right:0}
  .tf-actions > *{width:100%;text-align:center}
  /* arrastar em celular é hostil: o grip vira só decoração e a ordem
     é ajustada removendo e re-adicionando na sequência desejada */
  .tf-item.chosen{cursor:default}
}
.tk-flag.oficial{background:var(--ink);color:#fff}

/* ============================================================
   POMODORO — caminhão de A a B enquanto o aluno estuda
   ============================================================ */
.pomo{
  position:fixed;right:20px;bottom:20px;z-index:80;
  font-family:var(--font-body);
}

/* ---- minimizado: pílula com a estrada ---- */
.pomo-mini{
  display:none;align-items:center;gap:11px;cursor:pointer;
  padding:9px 15px 9px 12px;border-radius:999px;
  background:var(--rail);color:#fff;border:none;
  box-shadow:0 14px 34px -12px rgba(11,11,30,.55);
}
.pomo-mini:hover{opacity:.9}
.pomo[data-open="false"] .pomo-mini{display:flex}
.pomo[data-open="false"] .pomo-panel{display:none}

.pomo-mini-road{position:relative;display:block;width:62px;height:16px}
.pomo-mini-dots{
  position:absolute;left:0;right:0;top:50%;height:2px;transform:translateY(-1px);
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 4px,transparent 4px 9px);
  background-size:9px 100%;
}
/* ⚠️ É a ESTRADA que dá a sensação de movimento, não o caminhão. Numa sessão
   de 1h ele avança menos de 1px por minuto — imperceptível. O tracejado
   correndo pra trás cria a ilusão de deslocamento. */
.pomo[data-state="running"] .pomo-mini-dots{animation:pomo-estrada .6s linear infinite}
@keyframes pomo-estrada{to{background-position:-9px 0}}
.pomo-mini-truck{
  position:absolute;top:0;left:0;color:#fff;
  transition:left .9s linear;
}
.pomo-mini-time{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:13px;font-weight:700;letter-spacing:.02em;
}

/* ---- painel aberto ---- */
.pomo-panel{
  width:296px;padding:16px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--line);
  box-shadow:0 22px 50px -18px rgba(11,11,30,.4);
}
.pomo[data-open="false"] .pomo-panel{display:none}

.pomo-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.pomo-head b{font-family:var(--font-display);font-size:14.5px;font-weight:700;display:block}
.pomo-head span{display:block;font-size:11.5px;color:var(--ink-faint);line-height:1.4;margin-top:2px}
.pomo-close{
  flex-shrink:0;width:26px;height:26px;border-radius:var(--r-md);cursor:pointer;display:grid;place-items:center;
  background:var(--bg);border:1px solid var(--line);color:var(--ink-faint);
}
.pomo-close:hover{color:var(--ink)}

/* ---- a estrada ---- */
.pomo-road{position:relative;height:52px;margin:4px 0 10px}
.pomo-lane{
  position:absolute;left:8px;right:26px;top:34px;height:3px;border-radius:var(--r-md);
  background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 13px);
  background-size:13px 100%;
}
.pomo[data-state="running"] .pomo-lane{animation:pomo-estrada-lg .75s linear infinite}
@keyframes pomo-estrada-lg{to{background-position:-13px 0}}
/* trecho já percorrido, pintado */
.pomo-lane i{
  position:absolute;left:0;top:0;height:100%;width:0;border-radius:var(--r-md);
  background:repeating-linear-gradient(90deg,var(--brand) 0 6px,transparent 6px 13px);
  transition:width .9s linear;
}
/* Destino: um ponto só, na cor accent da marca. Rótulos "A" e "B" pediam
   leitura sem acrescentar nada — a estrada já diz que se vai da esquerda
   pra direita. */
.pomo-pin{
  position:absolute;top:30px;right:14px;width:11px;height:11px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(255,111,29,.2);   /* rgba: --accent-soft é opaca e taparia a estrada */
}
/* pulsa devagar enquanto o caminhão não chega */
.pomo[data-state="running"] .pomo-pin{animation:pomo-alvo 2s ease-in-out infinite}
@keyframes pomo-alvo{
  50%{box-shadow:0 0 0 8px rgba(255,111,29,.1)}
}
.pomo-pin.arrived{
  background:var(--ok,#16A34A);
  box-shadow:0 0 0 5px rgba(22,163,74,.2);
  animation:none;
}

.pomo-truck{
  position:absolute;top:6px;left:0;
  transition:left .9s linear;
  will-change:left;
}
/* balanço leve só quando está rodando */
.pomo[data-state="running"] .pomo-truck{animation:pomo-bump 1.1s ease-in-out infinite}
@keyframes pomo-bump{
  0%,100%{transform:translateY(0) rotate(0deg)}
  25%{transform:translateY(-1.5px) rotate(-.7deg)}
  60%{transform:translateY(.5px) rotate(.5deg)}
}
/* ⚠️ transform-box:fill-box é ESSENCIAL. Em SVG, transform-origin:center
   sozinho aponta pro centro do viewBox, não do próprio círculo — a roda
   orbita o caminhão em vez de girar no eixo. */
.pomo-wheel{transform-box:fill-box;transform-origin:center}
.pomo[data-state="running"] .pomo-wheel{animation:pomo-roll .55s linear infinite}
@keyframes pomo-roll{to{transform:rotate(360deg)}}

/* poeirinha atrás do caminhão */
.pomo-dust{position:absolute;left:-6px;bottom:3px;width:6px;height:6px}
.pomo[data-state="running"] .pomo-dust::before,
.pomo[data-state="running"] .pomo-dust::after{
  content:"";position:absolute;width:5px;height:5px;border-radius:50%;
  background:var(--ink-faint);opacity:0;
  animation:pomo-dust 1.3s ease-out infinite;
}
.pomo[data-state="running"] .pomo-dust::after{animation-delay:.65s}
@keyframes pomo-dust{
  0%{opacity:.35;transform:translate(0,0) scale(.5)}
  100%{opacity:0;transform:translate(-16px,-7px) scale(1.5)}
}

/* pausado: tudo congela e esmaece um pouco */
.pomo[data-state="paused"] .pomo-truck{opacity:.55}

/* ---- relógio ---- */
.pomo-clock{
  font-family:var(--font-display);font-variant-numeric:tabular-nums;
  font-size:40px;font-weight:700;line-height:1;letter-spacing:-.02em;
  text-align:center;margin-bottom:14px;
}
.pomo[data-state="paused"] .pomo-clock{color:var(--ink-faint)}
.pomo[data-state="done"] .pomo-clock{color:var(--ok,#16A34A)}

/* ---- escolha de tempo ---- */
.pomo-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px}
.pomo-preset{
  cursor:pointer;padding:8px 2px;border-radius:var(--r-md);
  background:var(--bg);border:1px solid var(--line);color:var(--ink-soft);
  display:flex;flex-direction:column;align-items:center;gap:1px;
}
.pomo-preset b{font-family:var(--font-display);font-size:14px;font-weight:700}
.pomo-preset span{font-size:8.5px;letter-spacing:.02em}
.pomo-preset:hover{border-color:var(--brand)}
.pomo-preset.on{background:var(--brand-soft);border-color:var(--brand);color:var(--brand)}

.pomo-custom{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink-faint)}
.pomo-custom input{
  width:62px;padding:7px 9px;border-radius:var(--r-md);text-align:center;
  background:var(--bg);border:1px solid var(--line);color:var(--ink);
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:12.5px;
}
html.keyboard-nav .pomo-custom input:focus-visible{outline:none;border-color:var(--brand)}

.pomo-actions{display:flex;gap:8px;margin-top:14px}
.pomo-actions button{flex:1;padding:10px 8px;font-size:12.5px;border-radius:var(--r-md)}
.pomo-note{font-size:10.5px;color:var(--ink-faint);line-height:1.4;margin-top:10px;text-align:center}

/* chegou */
.pomo[data-state="done"] .pomo-panel{border-color:var(--ok,#16A34A)}
.pomo[data-state="done"] .pomo-mini{background:var(--ok,#16A34A);animation:pomo-pulse 1.4s ease-in-out infinite}
@keyframes pomo-pulse{50%{box-shadow:0 0 0 9px rgba(22,163,74,.16)}}

[data-theme="dark"] .pomo-mini{background:var(--surface);border:1px solid var(--line)}

/* ---- mobile: acima do dock flutuante ---- */
@media (max-width: 900px){
  /* a barra inferior ocupa ~62px + 12px de margem; sem esse respiro o
     pomodoro nasce embaixo dela */
  .pomo{right:12px;bottom:92px}
  .pomo-panel{width:min(300px, calc(100vw - 24px))}
  .pomo-clock{font-size:34px}
}

/* quem prefere menos movimento não leva animação nenhuma */
@media (prefers-reduced-motion: reduce){
  .pomo-truck,.pomo-wheel,.pomo-dust::before,.pomo-dust::after,.pomo-mini,
  .pomo-mini-dots,.pomo-lane,.pomo-pin{animation:none !important}
  .pomo-truck,.pomo-mini-truck,.pomo-lane i{transition:none}
}

/* ---- player de aula: mantém o aluno dentro da plataforma ---- */
.player.has-video{position:relative;overflow:hidden}
.player.has-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ⚠️ Cobre APENAS a faixa do título/logo do YouTube (topo). O YouTube não
   deixa escondê-los; sem esta faixa, um clique no título abre o youtube.com
   e o aluno sai do Academy. A altura para em 54px justamente para não
   atrapalhar play, progresso e tela cheia, que ficam embaixo. */
.player-guard{
  position:absolute;top:0;left:0;right:0;height:54px;z-index:2;
  cursor:default;background:transparent;
}
/* em telas pequenas o cabeçalho do player é mais baixo */
@media (max-width: 760px){ .player-guard{height:40px} }

/* ============================================================
   DESIGN v8 — o que volta a ser CAIXA, e por quê

   Critério: caixa só onde ela é ALVO DE CLIQUE. Um card de curso você
   clica — a superfície delimita a área clicável e isso é função. Um widget
   lateral você lê — vira seção com divisor.

   Não é gosto: superfície sem alvo de clique é ruído, e alvo de clique sem
   superfície deixa a pessoa adivinhando onde tocar.
   ============================================================ */

/* --- clicáveis: superfície plana, sem sombra, canto reto --- */
.course-card, .blog-card, .mat-card, .track-card,
.job-card, .live-card, .home-track {
  background: var(--surface);
  border: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: none;
  padding: 0;
  overflow: hidden;   /* a capa acompanha o canto do card */
}
.course-card:hover, .blog-card:hover, .mat-card:hover,
.track-card:hover, .job-card:hover, .live-card:hover, .home-track:hover {
  border-color: var(--ink-faint);
  /* sem translateY: em 2026 o hover confirma o alvo, não simula levitação */
  transform: none;
}
.job-card, .live-card, .track-card { padding: 18px 20px; }
.home-track { padding: 16px 18px; }

/* --- leitura: seção com divisor, sem superfície --- */
/* v8.4: voltam a ter superfície, como nas referências. O que NÃO volta é a
   sombra difusa e o raio de 22px do v7. */
.widget, .pub-card, .lesson-section, .dm-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: none;
}
.widget { padding: var(--pad-card); margin-bottom: 14px; }

/* --- caixa flutuante fica SÓ onde precisa se descolar do fundo --- */
.report-modal, .pomo-panel, .dots-menu, .combo-list, .notif-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
}

/* --- linhas de lista: divisor, nunca caixa --- */
/* linha de lista: raio pequeno para o fundo do hover não virar bloco reto */
.dm-row, .xp-edit-role, .tk-step {
  background: transparent;
  border-radius: var(--r-md);
  box-shadow: none;
}
.dm-row:hover { background: var(--surface-2); }

/* --- imagem de capa perde o arredondado junto do card --- */
/* topo arredondado, base reta: a capa encosta no conteúdo do card */

/* ============================================================
   MENU LATERAL (v8.1)
   Substitui o dock de ícones + as abas em pílula do topo. Navegação
   em dois lugares obrigava a procurar em dois lugares.

   ⚠️ A sidebar é MUITO arredondada de propósito, contrastando com os
   containers retos do conteúdo: ela é um objeto flutuante sobre a página,
   e o raio é o que comunica isso.
   ============================================================ */
.sb{
  position:fixed;left:16px;top:16px;bottom:16px;z-index:40;
  width:248px;display:flex;flex-direction:column;
  background:var(--dock);color:#fff;
  border-radius:var(--r-float);
  padding:20px 14px 14px;
  box-shadow:0 24px 60px -24px rgba(11,11,30,.6);
  /* ⚠️ NÃO usar overflow:hidden: o botão de recolher fica em right:-11px,
     pra fora da barra, e seria decepado. O arredondamento é garantido pelo
     próprio border-radius; quem rola é o .sb-nav. */
  overflow:visible;
}

/* marca */
.sb-top{display:flex;align-items:center;gap:6px;padding:0 4px 18px;flex-shrink:0}
.sb-brand{display:flex;align-items:center;gap:10px;flex:1;min-width:0;padding:0 6px}
.sb-toggle{
  flex-shrink:0;width:28px;height:28px;border-radius:var(--r-md);cursor:pointer;
  display:grid;place-items:center;background:none;border:0;color:rgba(255,255,255,.45);
  transition:background .14s ease,color .14s ease,transform .2s ease;
}
.sb-toggle svg{width:16px;height:16px}
.sb-toggle:hover{background:rgba(255,255,255,.08);color:#fff}
.sb-brand img{height:24px;width:auto}
.sb-brand span{font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:-.01em}

/* navegação rolável */
.sb-nav{flex:1;min-height:0;display:flex;flex-direction:column;gap:2px;
  overflow-y:auto;
  /* ⚠️ overflow-x explícito. Pela especificação, overflow-y diferente de
     visible força overflow-x a virar auto — e o tooltip, que fica FORA da
     barra, gerava scroll horizontal. */
  overflow-x:hidden;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent}
.sb-nav::-webkit-scrollbar{width:5px}
.sb-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:999px}

/* item */
.sb-item{
  display:flex;align-items:center;gap:11px;
  padding:10px 12px;border-radius:var(--r-lg);
  font-size:13.5px;font-weight:500;color:rgba(255,255,255,.62);
  transition:background .14s ease,color .14s ease;
}
.sb-item svg{width:18px;height:18px;flex-shrink:0}
/* ⚠️ @media (hover:hover): no toque o :hover GRUDA depois do tap e o fundo
   fica preso no último item tocado — era o quadrado grande que destoava da
   fileira no celular. */
@media (hover:hover){
  .sb-item:hover{background:rgba(255,255,255,.07);color:#fff}
}
.sb-item.on{background:var(--brand);color:#fff;font-weight:600}
.sb-badge{
  margin-left:auto;min-width:19px;height:19px;padding:0 6px;border-radius:999px;
  background:var(--accent);color:#fff;
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:10px;font-weight:700;display:grid;place-items:center;
}

/* grupo recolhível — <details>, sem JS */
.sb-group{margin-top:12px}
.sb-group > summary{
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 12px;cursor:pointer;list-style:none;
  font-family:var(--font-mono);font-size:10px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.38);
}
.sb-group > summary::-webkit-details-marker{display:none}
@media (hover:hover){
  .sb-group > summary:hover{color:rgba(255,255,255,.7)}
}
.sb-gico{display:none}   /* só no mobile, onde o summary vira botão da barra */
.sb-group > summary .sb-chev{width:13px;height:13px;transition:transform .18s ease}
.sb-group[open] > summary .sb-chev{transform:rotate(180deg)}
.sb-list{display:flex;flex-direction:column;gap:2px;margin-top:2px}

.sb-admin{margin-top:14px;color:var(--accent)}
.sb-admin:hover{background:rgba(255,111,29,.12);color:var(--accent)}

/* rodapé: usuário */
.sb-foot{
  flex-shrink:0;display:flex;align-items:center;gap:8px;
  margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1);
  overflow:hidden;   /* sem isto o nome longo gera scrollbar horizontal visível */
}
.sb-me{display:flex;align-items:center;gap:10px;flex:1;min-width:0;padding:6px 8px;border-radius:var(--r-lg)}
@media (hover:hover){
  .sb-me:hover{background:rgba(255,255,255,.07)}
}
.sb-avatar{width:32px;height:32px;border-radius:50%;flex-shrink:0;font-size:12px}
.sb-me-id{min-width:0}
.sb-me-id b{display:block;font-size:12.5px;font-weight:600;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-me-id small{display:block;font-family:var(--font-mono);font-size:9.5px;
  color:rgba(255,255,255,.45);margin-top:1px}
.sb-out{
  flex-shrink:0;width:32px;height:32px;border-radius:var(--r-md);cursor:pointer;
  display:grid;place-items:center;background:none;border:0;color:rgba(255,255,255,.45);
}
.sb-out svg{width:17px;height:17px}
.sb-out:hover{background:rgba(255,255,255,.07);color:#fff}

/* o conteúdo abre espaço pra sidebar */
.frame{padding-left:288px !important}

/* ============================================================
   MENU LATERAL RECOLHIDO — só ícones
   Largura vai de 248px para 68px. A preferência fica no localStorage.
   ============================================================ */
.sb{transition:width .22s ease}
.frame{transition:padding-left .22s ease}

html.sb-mini .sb{width:68px;padding-left:9px;padding-right:9px}
/* blindagem: nada dentro da barra recolhida pode empurrar largura e
   reintroduzir o scroll horizontal */
html.sb-mini .sb-nav,html.sb-mini .sb-list,html.sb-mini .sb-item{max-width:100%;min-width:0}
html.sb-mini .frame{padding-left:104px !important}

/* tudo que é texto desaparece */
html.sb-mini .sb-txt{display:none}

html.sb-mini .sb-top{justify-content:center;padding:0 0 14px;margin-bottom:4px;
  border-bottom:1px solid rgba(255,255,255,.1)}
html.sb-mini .sb-brand{justify-content:center;padding:0}
html.sb-mini .sb-brand img{height:26px}

/* botão migra pra borda; a barra precisa de overflow visível pra ele aparecer */
html.sb-mini .sb-toggle{position:absolute;top:22px;right:-12px;
  background:var(--brand);color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.35);
  width:24px;height:24px;border-radius:var(--r-md)}
html.sb-mini .sb-toggle svg{width:14px;height:14px;transform:rotate(180deg)}

html.sb-mini .sb-item{justify-content:center;padding:11px 0;position:relative}
html.sb-mini .sb-item svg{width:20px;height:20px}

/* ⚠️ <details> FECHADO esconde o conteúdo no nível do próprio details —
   display:flex no filho não vence isso. Sem forçar aqui, quem tivesse
   fechado "Comunidade" ficaria sem esses ícones no modo recolhido, e não
   haveria como reabrir: o título (onde se clica) não existe mais. */
/* ⚠️ O JS abre os grupos ao recolher a barra, mas ele roda no fim do <body>:
   sem esta regra os ícones dos grupos fechados piscariam antes de aparecer.
   O CSS já está carregado no <head><meta charset="utf-8">, então garante o resultado desde o
   primeiro frame. O JS continua ajustando o atributo `open` — os dois juntos
   cobrem também o caso de JS desligado. */
html.sb-mini .sb-group{margin:0;display:contents}
html.sb-mini .sb-group:not([open]) > .sb-list{display:flex !important}
html.sb-mini .sb-group > summary{display:none}
html.sb-mini .sb-list{
  display:flex !important;flex-direction:column;gap:2px;
  padding-top:8px;margin-top:8px;
  border-top:1px solid rgba(255,255,255,.1);
}

html.sb-mini .sb-admin{margin-top:8px;padding-top:8px;
  border-top:1px solid rgba(255,255,255,.1);border-radius:var(--r-md)}
html.sb-mini .sb-admin:hover{border-radius:var(--r-lg)}

html.sb-mini .sb-badge{position:absolute;top:5px;right:9px;transform:none;
  min-width:15px;height:15px;font-size:8.5px;padding:0 4px}

html.sb-mini .sb-foot{flex-direction:column;gap:4px;padding-top:10px}
html.sb-mini .sb-me{justify-content:center;padding:3px}
html.sb-mini .sb-avatar{width:34px;height:34px}

/* tooltip: recolhido, o nome tem que aparecer em algum lugar */
/* ⚠️ SEM tooltip em CSS aqui.
   Tentativa 1 (position:absolute): o elemento fica fora da barra e o .sb-nav,
   que tem overflow-y:auto, passava a mostrar scroll horizontal.
   Tentativa 2 (position:fixed): resolve o scroll, mas perde a referência
   vertical do item — precisaria de JS pra calcular o top a cada hover.

   Solução: atributo `title` nativo no HTML. O navegador posiciona sozinho,
   não entra no layout, não gera overflow e funciona com leitor de tela.
   Custo: aparece com ~1s de atraso. Aceitável para navegação secundária. */

/* ============================================================
   CARROSSEL DO TOPO — 5 notícias mais recentes
   Rolagem nativa com scroll-snap: swipe no celular e teclado
   funcionam de graça. O JS cuida só de setas e pontinhos.
   ============================================================ */
.hero-car{position:relative;margin-bottom:26px}

.hc-track{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;border-radius:var(--r-lg);
  scrollbar-width:none;-ms-overflow-style:none;
}
.hc-track::-webkit-scrollbar{display:none}

.hero-car{
  /* ⚠️ recuo do slide em UMA variável. Os pontinhos ficavam em left:36px
     enquanto o texto tinha padding-left:44px — 8px de desalinhamento que
     salta aos olhos quando se traça uma linha vertical. */
  --hero-pad: 36px;
}
.hc-slide{
  position:relative;
  flex:0 0 100%;scroll-snap-align:start;min-width:0;
  min-height:300px;display:flex;align-items:flex-end;
  padding:34px var(--hero-pad) 40px;
  background-size:cover;background-position:center;
  color:#fff;overflow:hidden;
}

/* ---- sem capa: cor por categoria + textura ----
   ⚠️ Um gradiente chapado igual em todo slide faz o carrossel parecer
   travado — a pessoa passa de lâmina e "nada muda". Variar a cor por
   categoria dá o sinal de movimento que a foto daria. */
.hc-slide.sem-foto{background:linear-gradient(115deg,var(--navy-surface) 0%,#24245A 55%,#0000B4 100%)}
.hc-slide.cat-1{background:linear-gradient(118deg,var(--navy-surface) 0%,#24245A 50%,#0000B4 100%)}
.hc-slide.cat-2{background:linear-gradient(118deg,#04231A 0%,#0A5138 52%,#14A35C 100%)}
.hc-slide.cat-3{background:linear-gradient(118deg,#2A0845 0%,#4C1D95 52%,#7C3AED 100%)}
.hc-slide.cat-4{background:linear-gradient(118deg,#2B1206 0%,#7C2D12 52%,#EA580C 100%)}
.hc-slide.cat-5{background:linear-gradient(118deg,#0B1F2A 0%,#0E4A63 52%,#0891B2 100%)}
.hc-slide.cat-6{background:linear-gradient(118deg,#2B0B1E 0%,#7A1240 52%,#DB2777 100%)}

/* textura de pontos: dá profundidade e evita o chapado */
.hc-slide.sem-foto::before,
.hc-slide[class*="cat-"]::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:22px 22px;
  mask-image:linear-gradient(100deg,transparent 30%,#000 100%);
  -webkit-mask-image:linear-gradient(100deg,transparent 30%,#000 100%);
}

/* ---- véu sobre a foto ----
   ⚠️ Forte à esquerda, quase transparente à direita: o texto precisa de
   contraste garantido e a foto precisa aparecer. A curva é longa (até 88%)
   porque um corte curto cria uma borda visível no meio da imagem — foi o que
   deixou o corte em duas colunas com cara de colagem. */
.hc-slide.tem-foto::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(97deg,
    rgba(9,9,26,.96) 0%,
    rgba(9,9,26,.93) 26%,
    rgba(9,9,26,.82) 44%,
    rgba(9,9,26,.5)  62%,
    rgba(9,9,26,.2)  78%,
    rgba(9,9,26,.06) 88%,
    rgba(9,9,26,0)   100%);
}
/* base escurecida: os pontinhos e a fonte ficam sobre a foto */
.hc-slide.tem-foto::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:120px;z-index:1;
  pointer-events:none;
  background:linear-gradient(to top,rgba(var(--navy-surface-rgb),.75),rgba(var(--navy-surface-rgb),0));
}

.hc-body{position:relative;z-index:2;max-width:min(52%,560px)}

.hc-kicker{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:10px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
}
.hc-kicker i{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.hc-slide h2{
  font-family:var(--font-display);font-size:27px;font-weight:700;
  line-height:1.18;letter-spacing:-.02em;margin:12px 0 10px;
  /* sombra sutil: garante leitura mesmo se a foto tiver área clara aqui */
  text-shadow:0 2px 14px rgba(9,9,26,.5);
}
.hc-slide p{font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.76);
  text-shadow:0 1px 8px rgba(9,9,26,.5)}
.hc-actions{display:flex;align-items:center;gap:16px;margin-top:20px;flex-wrap:wrap}
.hc-src{font-family:var(--font-mono);font-size:10.5px;color:rgba(255,255,255,.5)}

/* setas */
.hc-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:38px;height:38px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);
  color:#fff;backdrop-filter:blur(6px);
  opacity:0;transition:opacity .18s ease,background .18s ease;
}
.hc-arrow svg{width:17px;height:17px}
.hc-arrow:hover{background:rgba(255,255,255,.26)}
/* ⚠️ As duas no canto inferior DIREITO. Centralizada à esquerda, a seta caía
   em cima do título — visível no primeiro teste real. */
.hc-arrow{top:auto;bottom:20px;transform:none}
.hc-arrow.prev{left:auto;right:64px}
.hc-arrow.next{right:18px}
.hero-car:hover .hc-arrow,.hc-arrow:focus-visible{opacity:1;transform:none}
/* setas só no hover: em repouso elas competem com o título */
.hero-car:hover .hc-arrow,.hc-arrow:focus-visible{opacity:1}
/* ⚠️ No carrossel infinito a seta NUNCA é desabilitada — não existe "fim
   da lista". A regra antiga de esconder seta desabilitada foi removida:
   se algo marcasse disabled por engano, a seta sumiria sem motivo. */

/* pontinhos */
.hc-dots{
  position:absolute;left:var(--hero-pad);bottom:22px;z-index:3;
  display:flex;gap:7px;
}
.hc-dot{
  width:7px;height:7px;border-radius:50%;cursor:pointer;padding:0;
  background:rgba(255,255,255,.32);border:0;transition:.2s;
}
.hc-dot:hover{background:rgba(255,255,255,.6)}
.hc-dot.on{width:22px;border-radius:999px;background:rgba(255,255,255,.35);position:relative;overflow:hidden}

/* ⚠️ o pontinho ativo preenche junto com a contagem. Sem sinal de tempo o
   slide troca "do nada" e a pessoa perde a linha que estava lendo. */
.hc-dot.on::after{
  content:"";position:absolute;inset:0;
  background:#fff;transform-origin:left center;
  transform:scaleX(0);
}
.hero-car.tocando .hc-dot.on::after{
  animation:hc-carga var(--hc-tempo, 5s) linear forwards;
}
@keyframes hc-carga{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* pausado: a barra congela onde está */
.hero-car.pausado .hc-dot.on::after{animation-play-state:paused}
/* sem autoplay o ponto ativo é sólido, como antes */
.hero-car:not(.tocando) .hc-dot.on{background:#fff}

@media (prefers-reduced-motion: reduce){
  .hc-dot.on{background:#fff}
  .hc-dot.on::after{animation:none;transform:scaleX(0)}
}

@media (max-width: 760px){
  .hero-car{--hero-pad:20px}
  .hc-slide{min-height:250px;padding:24px var(--hero-pad) 46px}
  .hc-body{max-width:100%}
  .hc-slide h2{font-size:20px}
  .hc-slide p{font-size:12.5px}
  /* na tela estreita não há "metade livre": o véu cobre por igual */
  .hc-slide.tem-foto::before{
    background:linear-gradient(to top,
      rgba(9,9,26,.96) 30%,
      rgba(9,9,26,.7) 70%,
      rgba(9,9,26,.45) 100%);
  }
  /* no toque o swipe já resolve; as setas só atrapalhariam */
  .hc-arrow{display:none}
  .hc-dots{bottom:16px}
}

/* ---- clones do carrossel infinito ----
   ⚠️ O JS insere uma cópia da primeira e da última lâmina nas pontas. Sem
   flex:0 0 100% explícito aqui, o flex-basis se redistribui quando o número
   de filhos muda e todos os slides encolhem. */
.hc-slide.is-clone{flex:0 0 100%}
/* clone não participa da navegação por teclado nem é lido duas vezes */
.hc-slide.is-clone a,.hc-slide.is-clone button{pointer-events:none}

/* ============================================================
   MENU LATERAL NO MOBILE — barra inferior

   ⚠️ Este bloco fica no FIM do arquivo de propósito. As regras
   `html.sb-mini` têm especificidade maior que as de layout normal;
   se o mobile viesse antes, elas venceriam e a barra empilharia em
   coluna no celular (foi exatamente o defeito reportado).
   ============================================================ */

/* ============================================================
   MENU LATERAL NO MOBILE  (escrito do zero — v8.6)

   Regras: Início + 3 categorias + admin na fileira, avatar à direita.
   Tocar numa categoria abre painel acima, com a largura da barra.

   ⚠️ Cada seletor aparece UMA vez neste bloco. A versão anterior tinha
   três regras contraditórias para `.sb-group` e o painel herdava um
   max-width de 60px sem que ninguém percebesse.

   ⚠️ `!important` nas propriedades de layout é deliberado: as regras
   `html.sb-mini` têm especificidade alta e valem em qualquer largura.
   ============================================================ */
@media (max-width: 900px){

  /* ---------- a barra ---------- */
  .sb{
    position:fixed !important;
    left:10px; right:10px; bottom:10px; top:auto !important;
    width:auto !important; height:auto !important;
    flex-direction:row !important; align-items:center;
    padding:6px !important; border-radius:var(--r-lg);
    gap:6px; overflow:visible !important;
    z-index:90;   /* acima do pomodoro (80) */
  }

  /* ⚠️ precisa cobrir html.sb-mini .frame (0,2,1), que vale em qualquer
     largura e tem !important. Com `.frame` sozinho (0,1,0) a margem de
     104px do modo recolhido continuava valendo no celular. */
  html.sb-mini .frame, .frame{
    padding-left:16px !important;
    padding-right:16px !important;
    padding-bottom:calc(88px + env(safe-area-inset-bottom,0px)) !important;
  }

  /* ---------- o que não vai pra barra ---------- */
  .sb-top, .sb-brand, .sb-toggle, .sb-out, .sb-chev,
  .sb-nav > .sb-item .sb-txt{ display:none !important; }

  /* ---------- fileira de alvos ---------- */
  .sb-nav{
    flex:1 !important; min-width:0;
    flex-direction:row !important; align-items:center;
    justify-content:space-between !important;
    gap:2px !important; margin:0 !important; padding:0 !important;
    border:0 !important; overflow:visible !important;
  }

  /* grupo = só um alvo na fileira; NÃO ancora o painel */
  .sb-group{
    display:block !important; position:static !important;
    flex:1 1 0 !important; max-width:64px; min-width:0;
    margin:0 !important; border:0 !important;
  }

  /* alvo: botão de categoria e item solto têm a mesma caixa */
  .sb-group > summary,
  .sb-nav > .sb-item{
    display:flex !important; align-items:center; justify-content:center;
    position:relative;
    width:100% !important; height:46px !important;
    padding:0 !important; margin:0 !important;
    border-radius:var(--r-md); cursor:pointer;
    color:rgba(255,255,255,.62);
    font-size:0 !important;
  }
  .sb-nav > .sb-item{ flex:1 1 0 !important; max-width:64px; min-width:0; }
  .sb-group > summary > svg,
  .sb-nav > .sb-item > svg{ width:21px !important; height:21px !important; }
  .sb-gico{ display:block !important; }

  .sb-nav > .sb-item.on{ background:var(--brand); color:#fff; }
  .sb-group[open] > summary{ background:rgba(255,255,255,.12); color:#fff; }
  .sb-group:has(.sb-item.on) > summary{ color:#fff; }
  .sb-group:has(.sb-item.on) > summary::after{
    content:""; position:absolute; left:50%; bottom:5px;
    transform:translateX(-50%);
    width:16px; height:2px; border-radius:1px; background:var(--brand);
  }

  /* badge sobre o ícone da barra */
  .sb-nav > .sb-item .sb-badge{
    position:absolute !important; top:4px; right:8px; transform:none !important;
    min-width:15px; height:15px; font-size:8.5px; padding:0 4px; margin:0 !important;
  }

  /* ---------- painel ---------- */
  .sb-list{
    display:none !important;   /* fechado */
    position:absolute !important;
    left:0 !important; right:0 !important; bottom:calc(100% + 10px) !important;
    width:auto !important; max-width:none !important; min-width:0 !important;
    transform:none !important;
    flex-direction:column !important; align-items:stretch !important;
    gap:2px !important; padding:7px !important; margin:0 !important;
    background:var(--dock);
    border:1px solid rgba(255,255,255,.14); border-radius:var(--r-lg);
    box-shadow:0 18px 44px -12px rgba(0,0,0,.7);
  }
  .sb-group[open] > .sb-list{ display:flex !important; }

  /* item DENTRO do painel: ícone à esquerda, rótulo ao lado, uma linha */
  .sb-list > .sb-item{
    display:flex !important; flex-direction:row !important;
    align-items:center !important; justify-content:flex-start !important;
    place-items:initial !important; place-content:initial !important;
    width:100% !important; max-width:none !important; height:auto !important;
    padding:11px 13px !important; margin:0 !important;
    gap:11px !important; border-radius:var(--r-lg);
    font-size:13.5px !important; text-align:left !important;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .sb-list > .sb-item > svg{ width:18px !important; height:18px !important; flex:0 0 auto; }
  .sb-list > .sb-item .sb-txt{ display:inline !important; }
  .sb-list > .sb-item .sb-badge{
    position:static !important; transform:none !important;
    margin-left:auto !important;
    min-width:19px; height:19px; font-size:10px; padding:0 6px;
  }

  /* ---------- avatar ---------- */
  .sb-foot{
    flex:0 0 auto !important; flex-direction:row !important;
    margin:0 !important; padding:0 2px 0 8px !important;
    border:0 !important; border-left:1px solid rgba(255,255,255,.12) !important;
  }
  .sb-me{ padding:0 !important; justify-content:center; }
  .sb-avatar{ width:32px !important; height:32px !important; }

  /* ---------- véu ---------- */
  .sb-veu{
    position:fixed; inset:0; z-index:85;
    background:rgba(11,11,30,.55);
    opacity:0; pointer-events:none; transition:opacity .16s ease;
  }
  .sb-veu.on{ opacity:1; pointer-events:auto; }

  /* topo da barra = 10 + 6 + 46 + 6 = 68px; 86 dá 18px de respiro */
  .pomo{ right:10px; bottom:calc(86px + env(safe-area-inset-bottom,0px)); }
}

/* ============================================================
   DOBRA DA HOME — radar em vidro DENTRO do hero

   Antes eram dois boxes lado a lado e o da direita sobrava por baixo.
   Agora é um box só: o radar flutua sobre a imagem, em vidro translúcido,
   ocupando a altura inteira.
   ============================================================ */
.dobra{
  position:relative;
  margin-bottom:26px;
  /* ⚠️ clamp, não vh puro: só 68vh deixaria o hero minúsculo num notebook
     de 768px e gigante num monitor 4K. */
  height:clamp(400px, 70vh, 560px);
}

.dobra .hero-car{margin:0;height:100%;min-height:0}
.dobra .hc-track{height:100%}
.dobra .hero-car{--hero-pad:44px}
.dobra .hc-slide{height:100%;min-height:0;padding:40px var(--hero-pad) 46px}
.dobra .hc-slide h2{font-size:clamp(24px, 2.5vw, 36px)}
.dobra .hc-slide p{font-size:14.5px}
/* o texto para antes do radar, senão passa por baixo do vidro */
.dobra .hc-body{max-width:min(46%, 560px)}

/* ---- radar sobre a imagem ---- */
.dobra-radar{
  position:absolute;z-index:4;
  top:18px;right:18px;bottom:18px;width:316px;
  display:flex;flex-direction:column;
  /* direita menor: a barra de rolagem ocupa o resto e o texto fica alinhado */
  padding:var(--pad-card) 10px var(--pad-card) var(--pad-card);
  border-radius:var(--r-lg);
  /* vidro: escuro translúcido + desfoque do que está atrás */
  background:rgba(10,10,26,.52);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(16px) saturate(120%);
  -webkit-backdrop-filter:blur(16px) saturate(120%);
  color:#fff;
}
/* ⚠️ sem backdrop-filter (Firefox antigo) o vidro fica transparente demais
   e o texto some sobre a foto — o fallback escurece de vez. */
@supports not (backdrop-filter: blur(1px)){
  .dobra-radar{background:rgba(10,10,26,.86)}
}

.dr-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding-right:calc(var(--pad-card) - 10px);padding-bottom:12px;flex-shrink:0;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.dr-head h3{font-family:var(--font-display);font-size:15px;font-weight:700;
  letter-spacing:-.01em;color:#fff}
.dr-head a{font-size:11.5px;font-weight:600;color:#fff;opacity:.7;white-space:nowrap}
.dr-head a:hover{opacity:1}

/* ⚠️ space-between + flex:1 nos itens: é o que elimina a sobra embaixo.
   A lista distribui a altura disponível em vez de empilhar do topo. */
.dr-list{
  flex:1;min-height:0;
  display:flex;flex-direction:column;
  padding-right:calc(var(--pad-card) - 10px);
  overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent;
}
.dr-list::-webkit-scrollbar{width:4px}
.dr-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:999px}

.dr-item{
  flex:1 1 0;min-height:0;
  display:flex;flex-direction:column;justify-content:center;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.dr-item:last-child{border-bottom:0}
.dr-cat{
  font-family:var(--font-mono);font-size:9px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:5px;
}
.dr-item b{
  font-size:13px;font-weight:600;line-height:1.35;color:#fff;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.dr-item:hover b{color:var(--accent)}
.dr-meta{font-family:var(--font-mono);font-size:9.5px;
  color:rgba(255,255,255,.5);margin-top:5px}

/* setas e pontinhos ficam à esquerda do vidro */
.dobra .hc-arrow.next{right:calc(316px + 34px)}
.dobra .hc-arrow.prev{right:calc(316px + 82px)}

/* ---- telas médias ---- */
@media (max-width: 1180px){
  .dobra{height:clamp(380px, 64vh, 480px)}
  .dobra-radar{width:270px}
  .dobra .hc-body{max-width:52%}
  .dobra .hc-arrow.next{right:calc(270px + 30px)}
  .dobra .hc-arrow.prev{right:calc(270px + 76px)}
}

/* ---- empilha: o radar sai de cima da imagem ---- */
@media (max-width: 900px){
  .dobra{height:auto;display:flex;flex-direction:column;gap:16px}
  .dobra .hero-car{height:auto}
  .dobra .hero-car{--hero-pad:22px}
  .dobra .hc-slide{height:auto;min-height:280px;padding:26px var(--hero-pad) 46px}
  .dobra .hc-body{max-width:100%}

  /* ⚠️ vira card comum: vidro sobre o fundo da página não tem o que desfocar
     e o texto branco ficaria ilegível */
  .dobra-radar{
    position:static;width:auto;padding:16px;
    background:var(--surface);border-color:var(--line);
    backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--ink);
  }
  .dr-head{border-bottom-color:var(--line);padding-right:0}
  .dr-head h3{color:var(--ink)}
  .dr-head a{color:var(--brand);opacity:1}
  .dr-list{overflow:visible;padding-right:0}
  .dr-item{flex:0 0 auto;border-bottom-color:var(--line)}
  .dr-item b{color:var(--ink);-webkit-line-clamp:3}
  .dr-meta{color:var(--ink-faint)}
  .dobra .hc-arrow{display:none}
}

/* ============================================================
   AJUSTES DE MOBILE — auditoria v8.11

   Encontrados varrendo o CSS por larguras fixas maiores que a tela
   e por alvos de toque pequenos demais para o polegar.
   ============================================================ */
@media (max-width: 640px){

  /* ⚠️ .search-drop tinha width:400px fixo — estoura numa tela de 360px
     e provoca rolagem horizontal na página inteira. */
  .search-drop{
    width:auto !important;
    left:10px !important; right:10px !important;
    max-width:calc(100vw - 20px);
  }

  /* ⚠️ alvo de toque: a recomendação de acessibilidade é 44px. Estes
     ficavam entre 26 e 30px — erra-se com o polegar e a pessoa fecha
     o que não queria. O ícone continua do mesmo tamanho; cresce só a
     área clicável. */
  .rm-close, .pomo-close, .comm-dot, .be-dot, .dots > summary{
    min-width:44px; min-height:44px;
    display:inline-flex; align-items:center; justify-content:center;
  }

  /* linhas de tabela viram lista: tabela estreita fica ilegível */
  .tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* nenhum elemento pode empurrar a página na horizontal */
  img, video, iframe, pre, table{max-width:100%}
  pre{overflow-x:auto}

  /* ⚠️ 16px no campo evita o zoom automático do iOS ao focar. Abaixo
     disso o Safari amplia a página e ela não volta sozinha. */
  input, select, textarea{font-size:16px}
}

/* ============================================================
   FOTOS DE PERFIL — recorte circular

   ⚠️ No partial de avatar a <img> É o próprio .avatar (não fica dentro
   dele). Sem object-fit, uma foto retangular é ESTICADA para preencher
   o quadrado e o rosto deforma.

   A classe .av-img existia no markup e não tinha regra nenhuma no CSS —
   era a peça que faltava.
   ============================================================ */
.av-img,
.avatar img,
.sb-avatar img,
.avatar-preview img{
  object-fit:cover;          /* recorta em vez de esticar */
  object-position:center;    /* mantém o rosto no centro do recorte */
  border-radius:50%;         /* acompanha o contêiner redondo */
  display:block;
  background:var(--surface-2);   /* enquanto carrega, não pisca transparente */
}

/* contêiner recorta o que passar do tamanho */
.avatar, .sb-avatar, .avatar-preview, .profile-avatar{overflow:hidden}

/* ⚠️ flex-shrink: numa linha flex (nome ao lado da foto) o avatar era
   espremido e virava elipse quando o nome era longo. */
.avatar, .sb-avatar{flex-shrink:0}

/* linha do extrato: "onde aconteceu" abaixo do título */
.lr-onde{
  display:block;font-size:12px;color:var(--ink-soft);
  margin-top:1px;
  /* nome de curso longo não pode empurrar o valor em km pra fora */
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;
}
.lr-main{min-width:0}

/* ============================================================
   CAPA GERADA — quando não há imagem cadastrada

   SVG inline, não arquivo: nada a armazenar, nada que quebre, e some
   sozinha assim que a foto for enviada.
   ============================================================ */
.cover-art{
  display:block;width:100%;height:100%;
  object-fit:cover;
}

/* no carrossel a capa gerada é o fundo da lâmina */
.hc-gerada{
  position:absolute;inset:0;z-index:0;
  overflow:hidden;
}
.hc-gerada .cover-art{width:100%;height:100%}

/* ⚠️ o véu do texto precisa ficar ACIMA da capa gerada, senão o título
   fica sobre o gradiente claro e some. */
.hc-slide.tem-foto::before{z-index:1}
.hc-body{position:relative;z-index:2}

/* miniatura de curso: a arte ocupa a caixa inteira */
.cc-thumb{position:relative;overflow:hidden}
.cc-thumb .cover-art{position:absolute;inset:0}
/* o contador de módulos fica por cima */
.cc-thumb .modcount{position:relative;z-index:2}

/* nota ao lado do título de seção: diferencia formação de dica */
.sh-nota{
  font-family:var(--font-mono);font-size:10px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);
}

/* dica rápida é conteúdo curto: cartão mais baixo, sem barra de progresso
   dominando o visual */
.course-grid.dicas .cc-thumb{aspect-ratio:16/7}
.course-grid.dicas .cc-body p{-webkit-line-clamp:2}

/* selo de tipo no topo do curso */
.ch-tipo{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:999px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);
  font-size:11.5px;font-weight:600;color:#fff;
}
.ch-tipo.com-cert{background:rgba(20,163,92,.22);border-color:rgba(20,163,92,.5)}

/* ============================================================
   CABEÇALHO DE TIPO DE CURSO — certificado × complementar

   Ícone + título + contagem + uma linha explicando. A explicação
   importa: "complementar" sozinho não diz que rende km.
   ============================================================ */
.tipo-head{
  display:flex;align-items:flex-start;gap:14px;
  margin:34px var(--pad-edge) 16px;
  padding-left:14px;
  border-left:3px solid var(--line);
}
.tipo-head:first-of-type{margin-top:8px}

.tipo-head .th-ico{
  flex:0 0 38px;width:38px;height:38px;border-radius:var(--r-md);
  display:grid;place-items:center;
  background:var(--surface-2);color:var(--ink-soft);
}
.tipo-head .th-ico svg{width:19px;height:19px}

.tipo-head .th-txt{min-width:0}
.tipo-head h3{
  font-family:var(--font-display);font-size:17px;font-weight:700;
  letter-spacing:-.01em;color:var(--ink);
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
}
/* contagem: pílula discreta, não compete com o título */
.tipo-head h3 b{
  font-family:var(--font-mono);font-size:10.5px;font-weight:700;
  padding:2px 8px;border-radius:999px;
  background:var(--surface-2);color:var(--ink-faint);
}
.tipo-head p{
  font-size:12.5px;line-height:1.5;color:var(--ink-soft);
  margin-top:3px;max-width:62ch;
}

/* certificado: verde discreto — o mesmo verde do selo no curso */
.tipo-head.certificado{border-left-color:#14A35C}
.tipo-head.certificado .th-ico{background:rgba(20,163,92,.12);color:#0A5138}
.tipo-head.certificado h3 b{background:rgba(20,163,92,.14);color:#0A5138}

/* complementar: azul da marca — diferente, não inferior */
.tipo-head.complementar{border-left-color:var(--brand)}
.tipo-head.complementar .th-ico{background:rgba(0,0,249,.09);color:var(--brand)}
.tipo-head.complementar h3 b{background:rgba(0,0,249,.1);color:var(--brand)}

/* ---- celular ----
   ⚠️ o ícone encolhe e a explicação continua visível: é ela que ensina
   a diferença, e some justamente onde a pessoa tem menos contexto. */
@media (max-width: 640px){
  .tipo-head{
    gap:11px;margin:26px var(--pad-edge) 13px;
    padding-left:11px;border-left-width:2px;
  }
  .tipo-head .th-ico{flex:0 0 30px;width:30px;height:30px}
  .tipo-head .th-ico svg{width:16px;height:16px}
  .tipo-head h3{font-size:15px;gap:7px}
  .tipo-head h3 b{font-size:9.5px;padding:2px 7px}
  .tipo-head p{font-size:12px;line-height:1.45}
}

/* ============================================================
   FILTRO DE CATEGORIA
   ============================================================ */
.cat-bar{
  display:flex;gap:8px;flex-wrap:wrap;
  margin:0 var(--pad-edge) 4px;
}
.cat-pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);
  font-size:12.5px;font-weight:600;color:var(--ink-soft);
  white-space:nowrap;transition:.15s;
}
.cat-pill b{
  font-family:var(--font-mono);font-size:10px;font-weight:700;
  color:var(--ink-faint);
}
@media (hover:hover){
  .cat-pill:hover{border-color:var(--brand);color:var(--brand)}
}
.cat-pill.on{background:var(--brand);border-color:var(--brand);color:#fff}
.cat-pill.on b{color:rgba(255,255,255,.7)}

/* etiquetas do card: categoria + situação lado a lado */
.cc-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.cc-tags .tag{margin:0}
.tag.cat{background:var(--surface-2);color:var(--ink-soft);border:1px solid var(--line)}
.tag.st-doing{background:rgba(0,0,249,.1);color:var(--brand);border:1px solid rgba(0,0,249,.22)}
.tag.st-done{background:rgba(20,163,92,.12);color:#0A5138;border:1px solid rgba(20,163,92,.3)}
.tag.st-new{background:rgba(255,111,29,.14);color:#9A3412;border:1px solid rgba(255,111,29,.32)}
.tag.st-free{background:rgba(20,163,92,.1);color:#0A5138;border:1px solid rgba(20,163,92,.24)}

.cat-vazio{
  text-align:center;padding:40px 20px;
  border:1px dashed var(--line);border-radius:var(--r-lg);
  margin:18px var(--pad-edge);
}
.cat-vazio p{color:var(--ink-soft);font-size:14px;margin-bottom:14px}

/* ---- celular ----
   ⚠️ rola na horizontal: sete pílulas não cabem em 360px, e quebrar em
   duas linhas empurra os cursos para fora da primeira tela. */
@media (max-width: 640px){
  .cat-bar{
    flex-wrap:nowrap;overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:2px var(--pad-edge) 6px;
    margin:0 0 4px;
    /* a última pílula não pode encostar na borda */
    scroll-padding-right:16px;
  }
  .cat-bar::-webkit-scrollbar{display:none}
  .cat-pill{padding:7px 12px;font-size:12px;flex:0 0 auto}
}

/* ============================================================
   TRANSIÇÕES — troca de página e interações

   Duas camadas:
     1. View Transitions API — navegação suave entre páginas nos
        navegadores que suportam (Chrome/Edge 126+)
     2. Fallback em @keyframes — entrada suave do conteúdo em
        qualquer navegador

   ⚠️ Tudo desligado sob prefers-reduced-motion. Movimento de página
   é a categoria que essa preferência mais existe para evitar.
   ============================================================ */

/* ---- 1. entrada do conteúdo ----

   ⚠️ NÃO usamos a View Transitions API aqui.

   Ela foi testada e descartada: `view-transition-name` em elemento
   `position:fixed` (menu, barra de topo, pomodoro) arranca o elemento
   do snapshot da página e o desenha num grupo próprio. O resultado
   eram faixas de fundo nas bordas e o pomodoro flutuando destacado,
   fora da página.

   Sem nomear esses elementos o problema é outro e pior: eles entram
   no snapshot e piscam a cada navegação.

   Uma animação de entrada no corpo da página dá quase toda a
   suavidade, é previsível e funciona em qualquer navegador.
   ------------------------------------------------------------------ */
.frame-body{
  animation: entra-conteudo 240ms cubic-bezier(0,0,.2,1) both;
}

/* ⚠️ SÓ OPACIDADE — sem deslocamento nenhum.

   Um ancestral com `transform` vira o bloco de contenção dos
   descendentes `position:fixed`: eles passam a se comportar como
   `absolute`. Com translateY aqui o pomodoro ficava preso no rodapé
   em vez de acompanhar a rolagem.

   As propriedades individuais `translate`, `rotate` e `scale` têm o
   MESMO efeito — não servem de substituto.

   A mesma armadilha vale para `filter`, `perspective`,
   `backdrop-filter`, `will-change: transform` e `contain: paint`.
   Nenhum deles pode entrar no .frame-body enquanto houver elemento
   fixo dentro do conteúdo (barra de leitura das notícias, modal de
   comunidades).

   O fade sozinho já resolve o corte seco. */
@keyframes entra-conteudo{
  from{ opacity:0 }
}

/* ⚠️ só o corpo. O menu lateral e a barra de topo permanecem parados —
   animá-los a cada clique é justamente o "piscar" que queremos evitar. */

/* ---- 3. interações ----
   Curva e duração únicas: transições com tempos diferentes entre
   componentes fazem a interface parecer desmontada. */
:root{
  --t-rapida: 120ms;
  --t-media:  180ms;
  --t-curva:  cubic-bezier(.4,0,.2,1);
}

/*
 * ⚠️ .hc-dot e .hc-arrow ficam DE FORA: já têm transição própria que
 * inclui `width` (a barra de progresso do carrossel). Esta regra vem
 * depois no arquivo e sobrescreveria — o pontinho pararia de crescer.
 *
 * Ao adicionar seletores aqui, confira se o elemento já não tem
 * `transition` própria mais acima.
 */
a, button, summary,
.btn, .btn-white, .btn-ghost, .btn-outline,
.tag, .cat-pill, .card, .course-card, .job-card, .live-card,
.home-track, .track-card, .dr-item, .ledger-row, .sb-item,
.avatar, .sb-me, input, select, textarea{
  transition:
    background-color var(--t-rapida) var(--t-curva),
    border-color     var(--t-rapida) var(--t-curva),
    color            var(--t-rapida) var(--t-curva),
    box-shadow       var(--t-media)  var(--t-curva),
    opacity          var(--t-rapida) var(--t-curva),
    transform        var(--t-media)  var(--t-curva);
}

/* ⚠️ o clique precisa de resposta imediata: sem isto o botão só
   reage no hover e o toque parece não ter registrado */
button:active, .btn:active, .btn-white:active,
.cat-pill:active, .course-card:active, .sb-item:active{
  transform: scale(.975);
  transition-duration: 60ms;
}

/* Mouse e toque não desenham o retângulo da hitbox. O contorno reaparece
   somente quando Tab indica navegação por teclado. */
:where(a,button,summary,input,select,textarea,[tabindex]):focus{
  outline:none;
}
a,button,summary,label,[role="button"]{-webkit-tap-highlight-color:transparent}
html.keyboard-nav a:focus-visible,
html.keyboard-nav button:focus-visible,
html.keyboard-nav input:focus-visible,
html.keyboard-nav select:focus-visible,
html.keyboard-nav textarea:focus-visible,
html.keyboard-nav summary:focus-visible,
html.keyboard-nav [tabindex]:focus-visible{
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ---- 4. respeito à preferência do sistema ---- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .frame-body{ animation: none }
}

/* barra de carregamento no topo — só aparece se a navegação demora */
.nav-carga{
  position:fixed;left:0;top:0;height:2px;width:100%;
  z-index:9999;pointer-events:none;
  background:linear-gradient(90deg,var(--brand),var(--accent));
  transform-origin:left center;
  animation: nav-avanca 2.4s cubic-bezier(.1,.6,.3,1) forwards;
}
/* ⚠️ para em 90%: fingir 100% antes da página trocar dá a impressão
   de que travou no fim */
@keyframes nav-avanca{
  from{ transform:scaleX(.02) }
  to  { transform:scaleX(.9) }
}
@media (prefers-reduced-motion: reduce){
  .nav-carga{display:none}
}

/* ============================================================
   NEWS — leitura

   O objetivo é convidar à leitura. As três alavancas, em ordem de
   impacto: medida da linha, ritmo vertical e hierarquia dos títulos.
   ============================================================ */

/* ---- capa ---- */
.article-hero{
  min-height:300px;
  background-size:cover;background-position:center;
}
/* ⚠️ o título fica logo abaixo, sobre o cartão branco. Sem escurecer a
   base, uma foto clara deixa a borda do cartão invisível. */
.article-hero.com-foto::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(9,9,26,.55),transparent 55%);
}
.article-hero .cover-art{position:absolute;inset:0}
.article-hero .tag{z-index:2}

.article-card{
  width:calc(100% - 60px);max-width:none;
  padding:38px 52px 44px;
}

/* ---- título ---- */
.article-card h1{
  font-size:clamp(26px, 2.6vw, 36px);
  line-height:1.18;
  letter-spacing:-.025em;
  /* ⚠️ manchete longa em linha cheia cansa: 22 palavras por linha é
     leitura de documento, não de notícia */
  max-width:19ch;
  max-width:min(100%, 24ch);
}

/* ---- assinatura ---- */
.article-meta{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:14px 0 20px;margin-bottom:26px;
  border-bottom:1px solid var(--line);
  font-size:12.5px;color:var(--ink-faint);
}
.article-meta b{color:var(--ink);font-size:13.5px;font-weight:700}

/* ---- corpo ----
   ⚠️ 68 caracteres por linha. Acima de ~75 o olho perde a linha ao
   voltar para a esquerda e a pessoa relê sem perceber — é o motivo
   mais comum de abandono em texto longo. */
.article-prose{max-width:68ch}

.article-prose p{
  font-size:16.5px;
  line-height:1.72;
  color:var(--ink-read);
  margin-bottom:22px;
}

/* abertura com mais peso: o primeiro parágrafo decide se a pessoa fica */
.article-prose p:first-of-type{
  font-size:18.5px;
  line-height:1.62;
  color:var(--ink);
  font-weight:500;
}
.article-prose p:first-of-type::first-letter{
  font-size:56px;
  padding:6px 12px 0 0;
}

/* ---- títulos de seção ---- */
.article-prose .article-section{
  font-family:var(--font-display);
  letter-spacing:-.02em;
  color:var(--ink);
  /* ⚠️ espaço ANTES bem maior que depois: o título pertence ao texto
     que vem em seguida, não ao anterior. Espaço igual dos dois lados
     faz o título parecer solto no meio da página. */
  margin:42px 0 14px;
  scroll-margin-top:80px;   /* âncora do sumário não cola no topo */
}
.article-prose .article-section.n2{
  font-size:23px;font-weight:700;
  padding-left:14px;
  border-left:3px solid var(--brand);
}
.article-prose .article-section.n3{
  font-size:18px;font-weight:700;margin-top:32px;
}

/* ---- listas ---- */
.article-prose ul, .article-prose ol{
  margin:0 0 22px;padding-left:22px;
}
.article-prose li{
  font-size:16.5px;line-height:1.7;color:var(--ink-read);
  margin-bottom:9px;padding-left:4px;
}
.article-prose ul li::marker{color:var(--accent)}
.article-prose ol li::marker{color:var(--brand);font-weight:700}

/* ---- citação ---- */
.article-prose blockquote{
  margin:30px 0;padding:4px 0 4px 22px;
  border-left:3px solid var(--accent);
  font-family:var(--font-display);
  font-size:19px;line-height:1.55;font-weight:500;
  color:var(--ink);
}

.article-prose strong{color:var(--ink);font-weight:700}
.article-prose a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.article-prose code{
  font-family:var(--font-mono);font-size:14px;
  background:var(--surface-2);padding:2px 6px;border-radius:var(--r-sm);
}

/* ---- sumário ----
   ⚠️ Só funciona porque os ancestrais usam `overflow-x:clip` e não
   `hidden`: `hidden` cria contêiner de rolagem e o sticky se prende a
   ele em vez da viewport. */
.article-toc{
  min-width:0;
  position:sticky;top:24px;
  /* ⚠️ artigo com 12 seções estouraria a tela e o fim do sumário ficaria
     inalcançável. Rola por dentro quando não cabe. */
  max-height:calc(100vh - 48px);
  overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
.article-toc::-webkit-scrollbar{width:3px}
.article-toc::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px}

/* seção em leitura */
.article-toc a.lendo{
  border-left-color:var(--brand);
  color:var(--brand);
  font-weight:600;
}
.article-toc a{
  display:block;padding:8px 0 8px 14px;
  border-left:2px solid var(--line);
  font-size:13px;line-height:1.4;color:var(--ink-soft);
}
@media (hover:hover){
  .article-toc a:hover{border-left-color:var(--brand);color:var(--brand)}
}

/* ---- celular ---- */
@media (max-width: 860px){
  .article-hero{min-height:200px;margin-bottom:-34px}
  .article-card{width:100%;padding:24px 22px 32px}
  .article-card h1{max-width:100%}
  /* ⚠️ o limite de 68ch é para tela larga. No celular a largura já é
     a medida, e o max-width criaria uma faixa vazia à direita. */
  .article-prose{max-width:100%}
  .article-prose p{font-size:16px;line-height:1.68}
  .article-prose p:first-of-type{font-size:17px}
  .article-prose p:first-of-type::first-letter{font-size:46px}
  .article-prose .article-section.n2{font-size:20px;margin-top:34px}
}

/* ============================================================
   REDE DE TRANSPORTADORAS

   Mapa com o contorno real dos estados. O 3D vem de perspectiva
   na cena inteira + camadas de sombra sob cada estado.
   ============================================================ */

/* ---- abertura ---- */
.rede-hero{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:30px;align-items:center;
  margin:0 var(--pad-edge) 26px;
  padding:26px 28px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);
}
.rh-kicker{
  font-family:var(--font-mono);font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
}
.rede-hero h2{
  font-family:var(--font-display);font-size:clamp(20px,2vw,26px);
  font-weight:800;letter-spacing:-.02em;line-height:1.2;
  margin:10px 0 12px;max-width:24ch;
}
.rh-txt p{font-size:14px;line-height:1.65;color:var(--ink-read);max-width:58ch}

.rh-aviso{
  display:flex;align-items:center;gap:9px;
  margin-top:16px;padding-left:13px;
  border-left:2px solid var(--accent);
  font-size:12.5px !important;line-height:1.55 !important;
  color:var(--ink-soft) !important;
}
.rh-aviso svg{flex:0 0 15px;color:var(--accent)}
/* ⚠️ o <b> herdava peso 700 e quebrava o ritmo da frase no meio.
   Aqui só muda a cor: destaca sem partir a leitura. */
.rh-aviso b{color:var(--ink);font-weight:600}

.rede-hero .btn{margin-top:16px;display:inline-block}

.rh-nums{display:flex;gap:0;flex-shrink:0}
.rh-nums > div{
  padding:18px 26px;text-align:center;position:relative;
}
/* divisor entre os dois, sem borda em volta */
.rh-nums > div + div::before{
  content:"";position:absolute;left:0;top:18%;bottom:18%;
  width:1px;background:var(--line);
}
.rh-nums b{
  display:block;font-family:var(--font-display);
  font-size:clamp(38px, 4vw, 52px);font-weight:800;letter-spacing:-.04em;
  line-height:.95;
  /* gradiente da marca: o número é o argumento da página */
  background:linear-gradient(135deg, var(--brand), #5A5AFF 60%, var(--accent));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--brand);
}
.rh-nums span{
  display:block;font-family:var(--font-mono);font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);
  margin-top:8px;
}

/* ---- layout ---- */
.rede-wrap{
  display:grid;grid-template-columns:minmax(0,1fr) 330px;
  gap:24px;align-items:start;margin:0 var(--pad-edge);
}

.mapa-cena{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:26px 20px 16px;
}

/* ⚠️ a perspectiva fica no PALCO, não no SVG: aplicada ao próprio SVG,
   cada path teria seu ponto de fuga e o mapa se despedaçaria. */
.mapa-palco{
  position:relative;
  perspective:1400px;perspective-origin:50% 40%;
}

.mapa-br{
  display:block;width:100%;max-width:480px;height:auto;margin:0 auto;
  overflow:visible;
  transform:rotateX(24deg) rotateZ(-4deg) scale(.94);
  transform-origin:50% 45%;
  transition:transform .55s cubic-bezier(.2,.7,.3,1);
  /* sombra da massa continental inteira, projetada no "chão" */
  filter:drop-shadow(0 26px 26px rgba(11,11,30,.28));
}
/* endireita ao aproximar: mapa inclinado é bonito, mapa reto é preciso */
@media (hover:hover){
  .mapa-cena:hover .mapa-br{ transform:rotateX(10deg) rotateZ(0deg) scale(1) }
}

/* ---- estado ---- */
.uf{
  /* ⚠️ a cor vem de --cor (região) com opacidade em --peso (quantidade
     de parceiros). Assim dá pra ler concentração e região ao mesmo tempo,
     sem legenda dupla. */
  fill:color-mix(in srgb, var(--cor) calc(var(--peso) * 100%), var(--surface-2));
  stroke:var(--surface);
  stroke-width:2.5;
  stroke-linejoin:round;
  cursor:pointer;
  transition:fill .18s ease, transform .22s cubic-bezier(.2,.7,.3,1),
             filter .22s ease;
  transform-box:fill-box;      /* ⚠️ sem isto o estado orbita o canto do SVG */
  transform-origin:center;
}

.uf.vazio{
  fill:var(--surface-2);
  stroke:var(--line);stroke-width:1.5;
  cursor:default;
}

@media (hover:hover){
  .uf:not(.vazio):hover{
    fill:var(--cor);
    /* sobe e se destaca do resto da massa */
    transform:translateY(-7px) scale(1.03);
    filter:drop-shadow(0 10px 14px rgba(11,11,30,.4));
  }
}

.uf.ativo{
  fill:var(--cor);
  stroke:var(--ink);stroke-width:3;
  transform:translateY(-9px) scale(1.04);
  filter:drop-shadow(0 12px 18px rgba(11,11,30,.45));
}

html.keyboard-nav .uf:focus-visible{outline:none;stroke:var(--ink);stroke-width:4}

/* ---- rótulo que segue o cursor ---- */
.mapa-tip{
  position:absolute;z-index:6;pointer-events:none;
  padding:7px 11px;border-radius:var(--r-md);
  background:var(--rail);color:#fff;
  box-shadow:0 8px 20px -6px rgba(11,11,30,.5);
  transform:translate(-50%, -130%);
  white-space:nowrap;
}
.mapa-tip b{display:block;font-size:12.5px;font-weight:700}
.mapa-tip span{display:block;font-family:var(--font-mono);font-size:9.5px;
  color:rgba(255,255,255,.7);margin-top:1px}

.mapa-legenda{
  display:flex;gap:15px;flex-wrap:wrap;justify-content:center;
  margin-top:20px;padding-top:14px;border-top:1px solid var(--line);
}
.mapa-legenda span{display:inline-flex;align-items:center;gap:6px;
  font-size:11px;color:var(--ink-soft)}
.mapa-legenda i{width:9px;height:9px;border-radius:var(--r-bloco);flex:0 0 9px}
.mapa-legenda i.vazia{background:var(--surface-2);border:1px solid var(--line)}

/* ---- painel lateral ---- */
.rede-painel{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--pad-card);
  position:sticky;top:24px;
  max-height:calc(100vh - 48px);
  display:flex;flex-direction:column;
}
/* ⚠️ ESTA REGRA FALTAVA e era a causa do painel estourar a página.
   Sem display:flex aqui, o `flex:1` da lista não tem a quem obedecer:
   a cadeia quebra e .rp-lista cresce sem limite, passando por cima do
   rodapé. */
.rp-conteudo{display:flex;flex-direction:column;min-height:0;flex:1}

.rp-vazio{text-align:center;padding:44px 12px;color:var(--ink-faint)}
.rp-vazio p{font-size:13px;margin-top:12px;line-height:1.5}

.rp-head{display:flex;align-items:center;gap:12px;padding-bottom:14px;
  margin-bottom:12px;border-bottom:1px solid var(--line);flex-shrink:0}
.rp-uf{flex:0 0 44px;width:44px;height:44px;border-radius:var(--r-md);
  display:grid;place-items:center;color:#fff;
  font-family:var(--font-mono);font-size:14px;font-weight:700}
.rp-head h3{font-family:var(--font-display);font-size:16px;font-weight:700;
  letter-spacing:-.01em;line-height:1.2}
.rp-head p{font-size:11.5px;color:var(--ink-faint);margin-top:2px}

.rp-lista{flex:1;min-height:0;overflow-y:auto;padding-right:8px;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.rp-lista::-webkit-scrollbar{width:4px}
.rp-lista::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px}

.rp-item{display:flex;align-items:center;gap:9px;padding:9px 0;
  border-bottom:1px solid var(--line)}
.rp-item:last-child{border-bottom:0}
.rp-item b{font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.3}
/* ⚠️ era ".rp-item span" (0,1,1) — batia também no .rp-ico (0,1,0), que
   também é um <span>, e ganhava por especificidade: o display:block daqui
   pisava no display:grid do ícone, e o globo/envelope ficava colado no
   canto superior esquerdo do círculo em vez de centralizado. Escopado só
   pro span de dentro do link (o texto do site/e-mail), que é o único que
   isso deveria afetar. */
.rp-item a span{display:block;font-size:10.5px;color:var(--ink-faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp-ico{flex:0 0 26px;width:26px;height:26px;border-radius:var(--r-sm);
  display:grid;place-items:center;background:var(--surface-2);color:var(--ink-soft)}
.rp-item a{min-width:0;flex:1}
@media (hover:hover){ .rp-item a:hover b{color:var(--brand)} }

.rp-mais{
  flex-shrink:0;margin-top:12px;padding-top:12px;
  border-top:1px solid var(--line);text-align:center;
}
.rp-mais a{font-size:12px;font-weight:600;color:var(--brand)}

/* ============================================================
   LISTA COMPLETA — em HTML, colapsada

   ⚠️ Um <details> por estado deixava 24 cartões abertos empilhados:
   muito ruído para uma informação de consulta. Agora é UM bloco
   fechado.

   Fechado ≠ escondido: o conteúdo está no HTML, é indexado e o leitor
   de tela alcança. Só não ocupa a tela de quem veio usar o mapa.
   ============================================================ */
.rede-todas{
  margin:24px var(--pad-edge) 0;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;
}
.rede-todas > summary{
  display:flex;align-items:center;gap:11px;
  padding:16px 20px;cursor:pointer;list-style:none;
}
.rede-todas > summary::-webkit-details-marker{display:none}
.rede-todas > summary b{font-family:var(--font-display);font-size:15px;
  font-weight:700;color:var(--ink)}
.rede-todas > summary i{font-style:normal;font-size:12px;color:var(--ink-faint);
  margin-left:auto}
.rede-todas > summary .rt-seta{width:16px;height:16px;color:var(--ink-faint);
  transition:transform .2s ease;flex-shrink:0}
.rede-todas[open] > summary .rt-seta{transform:rotate(180deg)}
@media (hover:hover){
  .rede-todas > summary:hover b{color:var(--brand)}
}

.rt-corpo{padding:16px 16px 18px;border-top:1px solid var(--line);
  background:var(--surface-2)}

/* ⚠️ cada estado é um CARTÃO com borda própria.
   Antes eram só títulos soltos sobre o mesmo fundo: sem limite visível,
   não dava para saber onde um estado terminava e o outro começava. */
.rt-uf{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:13px 16px 14px;
  margin-bottom:10px;
}
.rt-uf:last-child{margin-bottom:0}

.rt-uf h4{
  display:flex;align-items:center;gap:9px;
  font-size:13.5px;font-weight:700;color:var(--ink);
  padding-bottom:10px;margin-bottom:11px;
  border-bottom:1px solid var(--line);
  scroll-margin-top:24px;
}
.rt-sigla{
  flex:0 0 26px;width:26px;height:26px;border-radius:var(--r-sm);
  display:grid;place-items:center;color:#fff;
  font-family:var(--font-mono);font-size:10px;font-weight:700;
}
/* ⚠️ a contagem fica COLADA no nome, não empurrada para a outra ponta
   da tela: a mil pixels de distância ela não se lê como parte do
   cabeçalho daquele estado. */
.rt-qtd{
  font-family:var(--font-mono);font-size:10px;font-weight:700;
  padding:2px 7px;border-radius:999px;
  background:var(--surface-2);color:var(--ink-faint);
}

.rt-lista{
  columns:3;column-gap:22px;
  /* fio entre as colunas: deixa claro que é uma lista em colunas, e não
     três listas diferentes */
  column-rule:1px solid var(--line);
}
.rt-lista a{
  display:block;break-inside:avoid;
  padding:5px 0;font-size:12px;line-height:1.35;color:var(--ink-read);
}
@media (hover:hover){ .rt-lista a:hover{color:var(--brand)} }
.rt-lista a span{display:block;font-size:10px;color:var(--ink-faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media (max-width: 900px){
  .rt-lista{columns:2;column-gap:18px}
}
@media (max-width: 560px){
  .rt-lista{columns:1}
  .rede-todas > summary{padding:14px}
  .rt-corpo{padding:0 14px 16px}
}

@media (max-width: 900px){
  .rede-hero{grid-template-columns:1fr;gap:20px;padding:20px}
  .rh-nums{gap:30px}
  .rede-wrap{grid-template-columns:1fr}
  .rede-painel{position:static;max-height:none}
  .rp-lista{max-height:none;overflow:visible}

  /* ⚠️ menos inclinação: em tela pequena o topo do mapa (Norte) fica
     comprimido demais e Roraima some. */
  .mapa-br{transform:rotateX(12deg) scale(.98);max-width:340px}
  .uf{stroke-width:3}
}

@media (max-width: 480px){
  /* ⚠️ sem perspectiva: os estados pequenos do Nordeste ficam finos
     demais para o dedo quando inclinados. */
  .mapa-palco{perspective:none}
  .mapa-br{transform:none;filter:drop-shadow(0 8px 14px rgba(11,11,30,.2))}
  .mapa-cena{padding:16px 10px 12px}
}

@media (prefers-reduced-motion: reduce){
  .mapa-br, .uf{transition:none}
  .mapa-cena:hover .mapa-br{transform:rotateX(24deg) rotateZ(-4deg) scale(.94)}
}

/* ============================================================
   SIDEBAR MODERNA — BRUDAM ACADEMY (v9.3)

   Esta camada substitui visualmente o menu v8 sem alterar seus hooks de
   comportamento. O resultado é um painel editorial claro, com hierarquia
   mais legível, progresso em destaque e uma dock translúcida no celular.
   ============================================================ */
.sb{
  --sb-border:rgba(15,15,35,.09);
  --sb-muted:#74788d;
  --sb-soft:#f4f5fa;
  --sb-hover:#f0f1fb;
  --sb-active:#ececff;
  --sb-active-ink:#0000ce;
  left:0;top:0;bottom:0;width:272px;
  padding:22px 18px 16px;
  border:0;border-right:1px solid var(--sb-border);border-radius:0;
  background:
    radial-gradient(circle at 0 0,rgba(0,0,249,.065),transparent 34%),
    rgba(255,255,255,.94);
  color:#151529;
  box-shadow:18px 0 48px -42px rgba(11,11,30,.48);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}

/* marca oficial do projeto, com variação para cada tema */
.sb-top{gap:10px;padding:0 2px 20px}
.sb-brand{gap:var(--brand-logo-gap);padding:0;overflow:hidden}
.sb-brand-logo{
  flex:0 0 40px;width:40px;height:42px;display:grid;place-items:center;
}
.sb-brand-logo img{display:block;width:36px;height:39px;object-fit:contain}
.sb-brand-logo .sb-logo-on-dark{display:none}
.sb-brand-copy{display:flex;flex-direction:column;min-width:0;line-height:1}
.sb-brand-copy b{
  color:#111126;font-family:var(--brand-font);font-size:var(--brand-wordmark-size);
  font-weight:var(--brand-wordmark-weight);letter-spacing:var(--brand-wordmark-tracking);
}
.sb-brand-copy small{
  margin-top:var(--brand-caption-gap-top);color:var(--sb-muted);font-family:var(--brand-font);
  font-size:var(--brand-caption-size);font-weight:var(--brand-caption-weight);letter-spacing:var(--brand-caption-tracking);text-transform:uppercase;
}
.sb-toggle{
  width:32px;height:32px;border:1px solid var(--sb-border);border-radius:var(--r-lg);
  background:rgba(255,255,255,.72);color:var(--sb-muted);
}
.sb-toggle:hover{background:var(--sb-hover);color:var(--brand);transform:translateX(-1px)}

/* perfil em primeiro plano: o acesso deixa de ficar escondido no rodapé */
.sb-profile-card{
  position:relative;display:flex;align-items:center;gap:11px;
  flex:0 0 auto;margin-bottom:16px;padding:13px;
  border-radius:var(--r-float);color:#fff;overflow:hidden;
  background:linear-gradient(135deg,#121236 0%,#0000e4 68%,#2f2fff 100%);
  box-shadow:0 18px 34px -24px rgba(0,0,249,.85);
}
.sb-profile-card::after{
  content:"";position:absolute;right:-26px;top:-34px;width:96px;height:96px;
  border:18px solid rgba(255,255,255,.08);border-radius:50%;pointer-events:none;
}
.sb-profile-avatar-wrap{position:relative;z-index:1;display:block;flex:0 0 auto}
.sb-profile-avatar{
  width:44px;height:44px;border:2px solid rgba(255,255,255,.88);
  box-shadow:0 7px 18px -9px rgba(0,0,0,.55);
}
.sb-profile-presence{
  position:absolute;right:0;bottom:1px;width:10px;height:10px;
  border:2px solid #1010a9;border-radius:50%;background:#35d279;
}
.sb-profile-copy{
  position:relative;z-index:1;display:flex;min-width:0;flex:1;flex-direction:column;
}
.sb-profile-copy small{
  color:rgba(255,255,255,.62);font-family:var(--font-mono);font-size:8px;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;
}
.sb-profile-copy b{
  margin-top:4px;overflow:hidden;color:#fff;font-size:13px;font-weight:750;
  text-overflow:ellipsis;white-space:nowrap;
}
.sb-profile-copy > span{
  margin-top:4px;color:rgba(255,255,255,.62);
  font-family:var(--font-mono);font-size:8px;
}
.sb-profile-arrow{
  position:relative;z-index:1;flex:0 0 auto;width:14px;height:14px;
  color:rgba(255,255,255,.62);transition:transform .16s ease,color .16s ease;
}
@media (hover:hover){
  .sb-profile-card:hover .sb-profile-arrow{color:#fff;transform:translateX(2px)}
}

/* navegação: menos blocos, mais hierarquia */
.sb-nav{
  gap:3px;margin:0 -4px;padding:0 4px 4px;
  scrollbar-color:rgba(15,15,35,.14) transparent;
}
.sb-nav::-webkit-scrollbar-thumb{background:rgba(15,15,35,.14)}
.sb-item{
  position:relative;gap:11px;padding:7px 10px;border-radius:var(--r-xl);
  color:#606478;font-size:13px;font-weight:550;
  transition:background .16s ease,color .16s ease,transform .16s ease;
}
.sb-item > svg{
  box-sizing:content-box;width:17px;height:17px;padding:6px;border-radius:var(--r-md);
  background:var(--sb-soft);color:#73778c;
  transition:background .16s ease,color .16s ease,transform .16s ease;
}
@media (hover:hover){
  .sb-item:hover{background:var(--sb-hover);color:#22223d;transform:translateX(2px)}
  .sb-item:hover > svg{background:#fff;color:var(--brand)}
}
.sb-item.on{background:var(--sb-active);color:var(--sb-active-ink);font-weight:700}
.sb-item.on::before{
  content:"";position:absolute;left:-4px;top:50%;width:3px;height:20px;
  border-radius:0 4px 4px 0;background:var(--brand);transform:translateY(-50%);
}
.sb-item.on > svg{
  color:#fff;background:linear-gradient(145deg,#2525ff,#0000ce);
  box-shadow:0 8px 18px -12px rgba(0,0,249,.85);
}
.sb-home{margin-bottom:2px}
.sb-badge{
  box-shadow:0 0 0 3px var(--sb-active);font-size:9px;font-weight:800;
}

.sb-group{margin-top:10px}
.sb-group > summary{
  gap:10px;justify-content:flex-start;padding:7px 9px;border-radius:var(--r-lg);
  font-family:var(--font-body);font-size:12px;letter-spacing:0;text-transform:none;
  color:var(--sb-muted);transition:background .16s ease,color .16s ease;
}
.sb-group > summary .sb-gico{
  display:block;box-sizing:content-box;flex:0 0 16px;width:16px;height:16px;
  padding:6px;border-radius:var(--r-md);background:var(--sb-soft);color:#62667b;
}
.sb-group-copy{display:flex;flex:1;min-width:0;align-items:center;line-height:1}
.sb-group-copy b{font-size:11.5px;font-weight:750;color:#34364d}
.sb-group > summary .sb-chev{margin-left:auto;width:12px;height:12px;color:#9da0af}
@media (hover:hover){
  .sb-group > summary:hover{background:var(--sb-soft);color:var(--brand)}
  .sb-group > summary:hover .sb-gico{background:#fff;color:var(--brand)}
}
.sb-group[open] > summary .sb-gico{background:#eeeeff;color:var(--brand)}
.sb-list{
  gap:2px;margin:3px 0 0 22px;padding:2px 0 2px 10px;
  border-left:1px solid var(--sb-border);
}
.sb-list .sb-item{padding-top:6px;padding-bottom:6px}
.sb-admin{
  margin-top:12px;color:#d65817;border:1px dashed rgba(255,111,29,.25);
}
.sb-admin > svg{background:#fff3eb;color:var(--accent)}
.sb-admin:hover{background:#fff3eb;color:#b9460d}

/* perfil: vira uma linha independente e silenciosa */
.sb-foot{
  gap:8px;margin-top:12px;padding:12px 0 0;
  border-top:1px solid var(--sb-border);overflow:visible;
}
.sb-foot .sb-me{display:none}
.sb-foot form{margin-left:auto}
.sb-me{gap:10px;padding:5px;border-radius:var(--r-xl)}
@media (hover:hover){.sb-me:hover{background:var(--sb-hover)}}
.sb-avatar-wrap{position:relative;display:block;flex:0 0 auto}
.sb-avatar{width:34px;height:34px;border:2px solid rgba(255,255,255,.9);box-shadow:0 0 0 1px var(--sb-border)}
.sb-presence{
  position:absolute;right:-1px;bottom:0;width:9px;height:9px;border:2px solid #fff;
  border-radius:50%;background:#22c55e;
}
.sb-me-id b{color:#25263d;font-size:12px;font-weight:700}
.sb-me-id small{color:var(--sb-muted);font-size:8.5px}
.sb-out{
  width:34px;height:34px;border:1px solid transparent;border-radius:var(--r-lg);
  color:#8b8e9e;
}
.sb-out:hover{border-color:rgba(255,111,29,.18);background:#fff3eb;color:var(--accent)}

/* o novo painel ocupa toda a altura e ganha um pouco mais de respiro */
.frame{padding-left:304px !important}

/* modo compacto: um rail de ícones, não uma versão espremida */
html.sb-mini .sb{width:80px;padding:18px 12px 14px}
html.sb-mini .frame{padding-left:106px !important}
html.sb-mini .sb-top{padding:0 0 16px;margin-bottom:5px;border-bottom:1px solid var(--sb-border)}
html.sb-mini .sb-brand-logo{width:40px;height:42px;flex-basis:40px}
html.sb-mini .sb-brand-logo img{width:34px;height:36px}
html.sb-mini .sb-toggle{
  top:24px;right:-12px;width:25px;height:25px;border:0;border-radius:var(--r-md);
  background:var(--brand);color:#fff;box-shadow:0 6px 18px -7px rgba(0,0,249,.8);
}
html.sb-mini .sb-profile-card{
  justify-content:center;margin:0 0 10px;padding:5px 0;border-radius:var(--r-xl);
  background:transparent;box-shadow:none;overflow:visible;
}
html.sb-mini .sb-profile-card::after{display:none}
html.sb-mini .sb-profile-avatar{width:38px;height:38px;border-color:#fff}
html.sb-mini .sb-profile-presence{right:-1px;bottom:0;border-color:#fff}
html.sb-mini .sb-nav{
  margin-inline:0;padding-inline:0;overflow-x:hidden;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:rgba(116,120,141,.38) transparent;
  scrollbar-gutter:stable both-edges;
}
html.sb-mini .sb-nav::-webkit-scrollbar{display:block;width:5px;height:0}
html.sb-mini .sb-nav::-webkit-scrollbar-track{background:transparent}
html.sb-mini .sb-nav::-webkit-scrollbar-thumb{
  border-radius:999px;background:rgba(116,120,141,.38);
}
html.sb-mini .sb-item{padding:6px 0;border-radius:var(--r-xl)}
html.sb-mini .sb-item > svg{width:18px;height:18px;padding:8px}
html.sb-mini .sb-item.on::before{left:0;height:22px}
html.sb-mini .sb-list{
  width:100%;max-width:100%;gap:2px;margin:8px 0 0;padding:8px 0 0;
  border-top:1px solid var(--sb-border);border-left:0;
}
@media (hover:hover){
  html.sb-mini .sb-item:hover{transform:none}
}
html.sb-mini .sb-admin{padding-top:7px;border:0;border-top:1px solid var(--sb-border)}
html.sb-mini .sb-foot{padding-top:12px}
html.sb-mini .sb-foot form{margin-left:0}
html.sb-mini .sb-avatar{width:36px;height:36px}

/* tema escuro */
[data-theme="dark"] .sb{
  --sb-border:rgba(255,255,255,.085);
  --sb-muted:#9295a8;
  --sb-soft:#1c1c35;
  --sb-hover:#20203d;
  --sb-active:#24244a;
  --sb-active-ink:#a9a9ff;
  background:
    radial-gradient(circle at 0 0,rgba(77,77,255,.14),transparent 34%),
    rgba(var(--navy-surface-rgb),.95);
  color:#f5f5ff;box-shadow:18px 0 54px -42px rgba(0,0,0,.9);
}
[data-theme="dark"] .sb-brand-copy b,[data-theme="dark"] .sb-group-copy b,
[data-theme="dark"] .sb-me-id b{color:#f4f4ff}
[data-theme="dark"] .sb-brand-logo .sb-logo-on-light{display:none}
[data-theme="dark"] .sb-brand-logo .sb-logo-on-dark{display:block}
[data-theme="dark"] .sb-toggle{background:#181832;color:#9a9daf}
[data-theme="dark"] .sb-item{color:#a8aabe}
[data-theme="dark"] .sb-item > svg{color:#a8aabe}
[data-theme="dark"] .sb-item.on > svg{color:#fff;background:linear-gradient(145deg,#4e4eff,#2020df)}
html[data-theme="dark"].sb-mini .sb-nav{
  scrollbar-color:rgba(169,169,255,.34) transparent;
}
html[data-theme="dark"].sb-mini .sb-nav::-webkit-scrollbar-thumb{
  background:rgba(169,169,255,.34);
}
@media (hover:hover){
  [data-theme="dark"] .sb-item:hover{background:var(--sb-hover);color:#a9a9ff}
  [data-theme="dark"] .sb-item:hover > svg{
    color:#fff;background:linear-gradient(145deg,#4e4eff,#2020df);
  }
}
[data-theme="dark"] .sb-group[open] > summary .sb-gico{background:#24244a;color:#a9a9ff}
[data-theme="dark"] .sb-avatar{border-color:#181832}
[data-theme="dark"] .sb-presence{border-color:var(--navy-surface)}
[data-theme="dark"] .sb-admin,[data-theme="dark"] .sb-admin:hover{background:rgba(255,111,29,.08)}
[data-theme="dark"] .sb-admin > svg{background:rgba(255,111,29,.12)}

/* dock mobile e painel de categorias */
@media (max-width:900px){
  .sb{
    --sb-mobile-bg:rgba(255,255,255,.94);
    left:12px;right:12px;bottom:12px;
    padding:6px !important;border:1px solid var(--sb-border);border-radius:var(--r-float);
    background:var(--sb-mobile-bg);color:#303248;
    box-shadow:0 18px 46px -16px rgba(15,15,35,.34);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  }
  [data-theme="dark"] .sb{--sb-mobile-bg:rgba(20,20,43,.94)}
  .sb-profile-card{display:none !important}
  .sb-group-copy{display:none !important}

  .sb-group > summary,.sb-nav > .sb-item{
    height:48px !important;border-radius:var(--r-xl);color:#797c90;
    background:transparent;transform:none !important;
  }
  .sb-group > summary > svg,.sb-nav > .sb-item > svg{
    box-sizing:border-box;width:22px !important;height:22px !important;padding:0 !important;
    border-radius:0;background:transparent;color:currentColor;box-shadow:none;
  }
  .sb-nav > .sb-item.on{
    background:var(--sb-active);color:var(--brand);
  }
  .sb-nav > .sb-item.on::before{display:none}
  .sb-group[open] > summary{background:var(--sb-active);color:var(--brand)}
  .sb-group:has(.sb-item.on) > summary{color:var(--brand)}
  .sb-group:has(.sb-item.on) > summary::after{
    bottom:5px;width:13px;height:2px;background:var(--brand);
  }

  .sb-list{
    bottom:calc(100% + 12px) !important;
    gap:4px !important;padding:9px !important;
    border:1px solid var(--sb-border);border-radius:var(--r-float);
    background:var(--sb-mobile-bg);
    box-shadow:0 24px 56px -18px rgba(15,15,35,.45);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  }
  .sb-list > .sb-item{
    min-height:48px !important;padding:8px 10px !important;border-radius:var(--r-xl);
    color:#55596e;
  }
  .sb-list > .sb-item > svg{
    box-sizing:content-box;width:17px !important;height:17px !important;
    padding:7px !important;border-radius:var(--r-md);background:var(--sb-soft);color:#73778c;
  }
  .sb-list > .sb-item.on{color:var(--sb-active-ink);background:var(--sb-active)}
  .sb-list > .sb-item.on::before{display:none}
  .sb-list > .sb-item.on > svg{background:var(--brand);color:#fff}
  [data-theme="dark"] .sb-list > .sb-item{color:#c4c5d4}

  .sb-foot{padding-left:8px !important;border-left:1px solid var(--sb-border) !important}
  .sb-foot .sb-me{display:flex}
  .sb-foot form{display:none}
  .sb-avatar-wrap{display:block}
  .sb-avatar{width:34px !important;height:34px !important}
  .sb-presence{width:8px;height:8px}
  .sb-veu{background:rgba(9,9,26,.48);backdrop-filter:blur(2px)}
}

@media (max-width:420px){
  .sb{left:8px;right:8px;bottom:8px;border-radius:var(--r-float)}
  .sb-nav{gap:0 !important}
  .sb-foot{padding-left:5px !important}
  .sb-avatar{width:31px !important;height:31px !important}
}

@media (prefers-reduced-motion:reduce){
  .sb,.frame,.sb-item,.sb-toggle,.sb-item > svg{transition:none}
}

/* ============================================================
   AJUSTES DE GEOMETRIA DO RAIL E ISOLAMENTO MOBILE (v9.3)

   O scroll pertence à largura total do rail. A coluna de ícones continua
   centralizada em 40px e a scrollbar ocupa uma faixa própria na borda.
   No mobile, o estado sb-mini do desktop não pode abrir listas fechadas nem
   reaplicar o recuo lateral do conteúdo.
   ============================================================ */
@media (min-width:901px){
  html.sb-mini .sb-nav{
    width:calc(100% + 24px);max-width:none;
    margin-left:-12px;margin-right:-12px;
    padding:0 12px;
    scrollbar-gutter:stable both-edges;
  }
  html.sb-mini .sb-nav::-webkit-scrollbar-button{
    display:none;width:0;height:0;
  }
}

/* ============================================================
   HOME v10 — EXPERIÊNCIA PESSOAL + EDITORIAL

   A página começa pela próxima ação do usuário. Notícias, formação, metas
   e comunidade aparecem em blocos com funções claras, sem competir entre si.
   ============================================================ */

/* abertura */
.ah-hero{
  position:relative;isolation:isolate;display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(310px,.7fr);
  gap:36px;align-items:center;min-height:350px;padding:38px 40px;
  border-radius:var(--r-3xl);overflow:hidden;color:#fff;
  background:
    radial-gradient(circle at 88% 10%,rgba(80,80,255,.52),transparent 28%),
    radial-gradient(circle at 4% 110%,rgba(255,111,29,.28),transparent 34%),
    linear-gradient(135deg,#0b0b24 0%,#17174a 58%,#0000c8 100%);
}
.ah-hero::before{
  content:"";position:absolute;z-index:-1;left:-7%;right:36%;bottom:43px;height:1px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.24) 0 10px,transparent 10px 20px);
  transform:rotate(-5deg);transform-origin:left center;
}
.ah-hero::after{
  content:"";position:absolute;z-index:-1;right:-86px;top:-118px;width:310px;height:310px;
  border:52px solid rgba(255,255,255,.045);border-radius:50%;
}
.ah-hero-copy{max-width:700px}
.ah-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:9.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:#b9b9ff;
}
.ah-eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.ah-hero h2{
  max-width:680px;margin:14px 0 12px;font-family:var(--font-display);
  font-size:clamp(32px,3.15vw,48px);font-weight:800;letter-spacing:-.045em;line-height:1.04;
}
.ah-hero h2 span{
  color:transparent;background:linear-gradient(90deg,#9b9bff 4%,#ff9a5e 92%);
  background-clip:text;-webkit-background-clip:text;
}
.ah-hero-copy > p{max-width:610px;color:rgba(255,255,255,.67);font-size:14px;line-height:1.65}
.ah-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:24px}
.ah-btn-primary,.ah-btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:44px;padding:0 20px;border-radius:var(--r-xl);font-size:12.5px;font-weight:750;
}
.ah-btn-primary{background:#fff;color:#10103a}
.ah-btn-primary svg{width:15px;height:15px;transition:transform .16s ease}
.ah-btn-ghost{border:1px solid rgba(255,255,255,.18);color:#fff;background:rgba(255,255,255,.055)}
@media (hover:hover){
  .ah-btn-primary:hover svg{transform:translateX(3px)}
  .ah-btn-ghost:hover{background:rgba(255,255,255,.1)}
}
.ah-hero-note{display:flex;align-items:center;gap:12px;margin-top:20px;color:rgba(255,255,255,.53);font-size:10px}
.ah-hero-note > i{display:block;width:120px;height:4px;border-radius:999px;background:rgba(255,255,255,.16);overflow:hidden}
.ah-hero-note > i span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#7979ff,#ff8f4e)}

.ah-level{
  position:relative;padding:22px;border:1px solid rgba(255,255,255,.15);border-radius:var(--r-2xl);
  background:rgba(8,8,28,.38);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.ah-level-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.ah-level-top > span{display:flex;flex-direction:column}
.ah-level-top small{
  font-family:var(--font-mono);font-size:8.5px;font-weight:650;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.52);
}
.ah-level-top b{margin-top:5px;font-family:var(--font-display);font-size:19px;font-weight:750}
.ah-level-top strong{font-family:var(--font-display);font-size:34px;line-height:1;font-weight:800;letter-spacing:-.05em}
.ah-level-bar{height:7px;margin-top:18px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden}
.ah-level-bar span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#fff,#ff9b62)}
.ah-level > p{margin-top:8px;color:rgba(255,255,255,.48);font-family:var(--font-mono);font-size:8.5px}
.ah-level-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12)}
.ah-level-stats div{padding:0 12px;text-align:center}
.ah-level-stats div:first-child{padding-left:0;text-align:left}
.ah-level-stats div:last-child{padding-right:0;text-align:right}
.ah-level-stats div+div{border-left:1px solid rgba(255,255,255,.1)}
.ah-level-stats b{display:block;font-family:var(--font-display);font-size:18px;font-weight:750}
.ah-level-stats span{display:block;margin-top:3px;color:rgba(255,255,255,.45);font-size:8.5px}

/* atalhos */

/* cabeçalhos de seção */
.ah-section{min-width:0}
.ah-section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:14px}
.ah-section-head > div{display:flex;flex-direction:column}
.ah-section-head > div > span{
  font-family:var(--font-mono);font-size:8.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);
}
.ah-section-head h3{margin-top:4px;font-family:var(--font-display);font-size:21px;font-weight:750;letter-spacing:-.025em;color:var(--ink)}
.ah-section-head > a{display:flex;align-items:center;gap:6px;color:var(--brand);font-size:11px;font-weight:700;white-space:nowrap}
.ah-section-head > a span{font-size:15px;line-height:1}
.ah-section-head.compact{margin-bottom:12px}
.ah-section-head.compact h3{font-size:18px}

/* editorial em duas superfícies independentes */
[data-home-news]{height:clamp(370px,48vh,430px);margin-bottom:0}
.ah-news-layout{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(270px,.62fr);gap:14px;height:100%}
.ah-news-layout.solo{grid-template-columns:1fr}
.ah-news-layout .hero-car,.ah-news-layout .hc-track{height:100%}
.ah-news-layout .hc-track{border-radius:var(--r-2xl)}
.ah-news-layout .hc-slide{padding:32px 34px 38px}
.ah-news-layout .hc-body{max-width:min(72%,650px)}
.ah-news-layout .hc-slide h2{font-size:clamp(24px,2.2vw,34px)}
.ah-news-layout .hc-arrow.next{right:18px}
.ah-news-layout .hc-arrow.prev{right:64px}
.ah-news-layout .dobra-radar {
  position:static;inset:auto;z-index:auto;width:auto;height:100%;padding:17px;
  border:1px solid var(--line);border-radius:var(--r-2xl);background:var(--surface);
  color:var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none;
}
.ah-news-layout .dr-head{padding-right:0;border-bottom-color:var(--line)}
.ah-news-layout .dr-head h3{color:var(--ink);font-size:14px}
.ah-news-layout .dr-head a{color:var(--brand);opacity:1}
.ah-news-layout .dr-list{padding-right:0;scrollbar-color:var(--line) transparent}
.ah-news-layout .dr-list::-webkit-scrollbar-thumb{background:var(--line)}
.ah-news-layout .dr-item{border-bottom-color:var(--line)}
.ah-news-layout .dr-item b{color:var(--ink);font-size:12.5px}
.ah-news-layout .dr-item:hover b{color:var(--brand)}
.ah-news-layout .dr-meta{color:var(--ink-faint)}

/* corpo */

/* formação */

/* cursos */

.ah-empty{grid-column:1/-1;padding:28px;text-align:center}
.ah-empty b{font-family:var(--font-display);font-size:15px}
.ah-empty p{margin-top:5px;color:var(--ink-soft);font-size:12px}
.ah-empty a{display:inline-block;margin-top:12px;color:var(--brand);font-size:12px;font-weight:700}

/* metas em lista */
.ah-goals{padding:22px;border-radius:var(--r-2xl);background:var(--surface)}
.ah-goals > header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding-bottom:17px;border-bottom:1px solid var(--line)}
.ah-goals > header > div{display:flex;flex-direction:column}
.ah-goals > header span{font-family:var(--font-mono);font-size:8px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.ah-goals > header h3{margin-top:4px;font-family:var(--font-display);font-size:17px;font-weight:750}
.ah-goals > header strong{font-family:var(--font-display);font-size:28px;font-weight:800;color:var(--brand);letter-spacing:-.04em}
.ah-goal-list{display:flex;flex-direction:column}
.ah-goal{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.ah-goal-icon{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:var(--r-lg);background:var(--surface-2);color:var(--brand)}
.ah-goal-icon svg{width:16px;height:16px}
.ah-goal-body{display:flex;flex:1;min-width:0;flex-direction:column;gap:7px}
.ah-goal-body > span{display:flex;justify-content:space-between;gap:12px}
.ah-goal-body b{font-size:11.5px;font-weight:650}
.ah-goal-body small{color:var(--ink-faint);font-family:var(--font-mono);font-size:9px}
.ah-goal-body > i{display:block;height:5px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.ah-goal-body > i span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--brand),#7373ff)}
.ah-goal-arrow{width:13px;height:13px;color:var(--ink-faint)}
.ah-goal:hover .ah-goal-arrow{color:var(--brand)}
.ah-goals > footer{display:flex;align-items:center;gap:11px;padding-top:15px}
.ah-goals > footer > span{font-family:var(--font-mono);font-size:9px;font-weight:700;color:var(--ink-soft)}
.ah-goals > footer > i{display:block;flex:1;height:6px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.ah-goals > footer > i span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--brand));border-radius:inherit}
.ah-goals > footer > b{font-family:var(--font-mono);font-size:9px;color:var(--ink-faint)}

/* coluna lateral */
.ah-live{
  position:relative;display:flex;flex-direction:column;padding:20px;border:0;border-radius:var(--r-2xl);
  overflow:hidden;color:#fff;background:linear-gradient(145deg,#18183f,#09091f);
}
.ah-live::after{content:"";position:absolute;right:-44px;bottom:-54px;width:140px;height:140px;border:24px solid rgba(255,111,29,.12);border-radius:50%}
.ah-live > *{position:relative;z-index:1}
.ah-live > b{margin:12px 0 5px;font-family:var(--font-display);font-size:16px;line-height:1.3}
.ah-live > span:not(.live-badge){color:rgba(255,255,255,.54);font-size:10.5px}
.ah-live > strong{margin-top:18px;color:#ffad7b;font-size:11px}
.ah-community-card{border-radius:var(--r-2xl)}
.ah-community-card .widget-head{padding:16px 16px 10px}
.ah-community-card .trend{padding:11px 16px}
.ah-side-empty{padding:18px;color:var(--ink-faint);font-size:11px;line-height:1.5}
.ah-achievement{display:flex;align-items:center;gap:11px;padding:14px;border-radius:var(--r-float)}
.ah-achievement-icon{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:var(--r-lg);color:#b45309;background:#fff4df}
.ah-achievement-icon svg{width:18px;height:18px}
.ah-achievement > span:nth-child(2){display:flex;flex:1;min-width:0;flex-direction:column}
.ah-achievement small{font-family:var(--font-mono);font-size:7.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint)}
.ah-achievement b{margin-top:3px;font-size:11.5px;font-weight:700}
.ah-achievement em{margin-top:2px;font-style:normal;color:var(--ink-faint);font-size:8.5px}

/* tema escuro */

[data-theme="dark"] .ah-news-layout .dobra-radar {background:var(--surface)}
[data-theme="dark"] .ah-achievement-icon{background:#342819;color:#f8bd65}
[data-theme="dark"] .ah-btn-primary{background:#fff;color:#10103a}

/* responsivo */
@media (max-width:1180px){
  .ah-hero{grid-template-columns:minmax(0,1.05fr) minmax(285px,.7fr);gap:24px;padding:32px}
  
  .ah-news-layout{grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr)}
  
}

@media (max-width:1100px){
  .ah-hero{grid-template-columns:1fr}
  
  
  
}

@media (max-width:900px){
  
  .ah-hero{grid-template-columns:1fr;min-height:0;padding:30px}
  .ah-level{max-width:none}
  [data-home-news]{height:auto;display:block;margin-bottom:0}
  .ah-news-layout{display:flex;flex-direction:column;height:auto}
  .ah-news-layout .hero-car{height:auto}
  .ah-news-layout .hc-track{height:auto}
  .ah-news-layout .hc-slide{min-height:300px;padding:28px 24px 44px}
  .ah-news-layout .hc-body{max-width:100%}
  .ah-news-layout .dobra-radar {height:auto}
  
  
  
}

@media (max-width:680px){
  
  .ah-hero{padding:24px 20px;border-radius:var(--r-2xl)}
  .ah-hero h2{font-size:31px}
  .ah-hero-copy > p{font-size:12.5px}
  .ah-actions{align-items:stretch;flex-direction:column}
  .ah-btn-primary,.ah-btn-ghost{width:100%}
  .ah-hero-note{align-items:flex-start;flex-direction:column;gap:7px}
  .ah-hero-note > i{width:100%}
  .ah-level{padding:18px;border-radius:var(--r-float)}
  .ah-level-stats b{font-size:16px}
  
  
  
  
  
  .ah-section-head{align-items:flex-start}
  .ah-section-head h3{font-size:18px}
  .ah-section-head > a{font-size:9.5px}
  .ah-news-layout .hc-slide{min-height:280px}
  
  
  
  
  
  
  .ah-goals{padding:18px}
  
}

@media (max-width:900px){
  /* o conteúdo sempre volta ao eixo mobile, com ou sem sb-mini salvo */
  html .frame,
  html.sb-mini .frame{
    padding-left:16px !important;
    padding-right:16px !important;
    padding-bottom:calc(88px + env(safe-area-inset-bottom,0px)) !important;
  }

  /* remove toda a geometria e a rolagem vertical do rail desktop */
  .sb-nav,
  html.sb-mini .sb-nav{
    width:auto !important;max-width:none !important;
    flex:1 1 auto !important;
    justify-content:stretch !important;
    margin:0 !important;padding:0 !important;
    overflow:visible !important;
    scrollbar-gutter:auto;
    scrollbar-width:none;
  }
  html.sb-mini .sb-nav::-webkit-scrollbar{display:none;width:0;height:0}

  /* todos os alvos recebem exatamente a mesma fração da fileira */
  .sb-nav > .sb-item,
  .sb-nav > .sb-group,
  html.sb-mini .sb-nav > .sb-item,
  html.sb-mini .sb-nav > .sb-group{
    flex:1 1 0 !important;max-width:none !important;min-width:0 !important;
    margin:0 !important;
  }
  html.sb-mini .sb-group{
    display:block !important;position:static !important;
  }

  /* a seleção acompanha o ícone, não a largura variável da célula */
  .sb-group > summary,
  .sb-nav > .sb-item{
    background:transparent !important;
  }
  .sb-group > summary > .sb-gico,
  .sb-nav > .sb-item > svg{
    box-sizing:content-box !important;
    width:20px !important;height:20px !important;padding:8px !important;
    border-radius:var(--r-xl) !important;background:transparent !important;
    color:#777b90;box-shadow:none !important;
  }
  .sb-nav > .sb-item.on > svg,
  .sb-group[open] > summary > .sb-gico{
    color:#fff !important;
    background:linear-gradient(145deg,#2525ff,#0000ce) !important;
    box-shadow:0 8px 18px -12px rgba(0,0,249,.85) !important;
  }
  .sb-group:has(.sb-item.on):not([open]) > summary > .sb-gico{
    color:var(--brand) !important;background:var(--sb-active) !important;
  }
  .sb-group:has(.sb-item.on) > summary::after{display:none !important}

  /* fechado é fechado: vence a regra global do modo compacto */
  html.sb-mini .sb-group:not([open]) > .sb-list{
    display:none !important;
  }
  html.sb-mini .sb-group[open] > .sb-list{
    display:flex !important;
  }

  /* avatar ocupa uma célula própria e não altera o eixo dos demais itens */
  .sb-foot{
    flex:0 0 42px !important;width:42px !important;
    justify-content:center !important;padding:0 0 0 4px !important;
  }
  .sb-foot .sb-me{
    width:38px !important;height:48px !important;justify-content:center !important;
  }
}

/* ============================================================
   HOME v11 — PORTAL EDITORIAL + COMUNIDADE

   A ordem da experiência é intencional: atualização do setor, troca entre
   profissionais e, só então, continuidade do aprendizado.
   ============================================================ */

/* cabeçalhos editoriais */
.ae-section-head {
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:28px;margin-bottom:18px;
}
.ae-section-head > div {min-width:0}
.ae-kicker {
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:9px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--brand);
}
.ae-kicker i {width:7px;height:7px;border-radius:50%;background:var(--accent)}
.ae-kicker.light {color:#b9b9ff}
.ae-section-head h2 {
  margin-top:7px;font-family:var(--font-display);font-size:clamp(25px,2.5vw,36px);
  font-weight:800;line-height:1.08;letter-spacing:-.04em;color:var(--ink);
}
.ae-news-head h2 {
  color:transparent;background:linear-gradient(90deg,var(--ink) 0%,var(--brand) 82%);
  background-clip:text;-webkit-background-clip:text;
}
.ae-section-head p {margin-top:6px;color:var(--ink-soft);font-size:12.5px;line-height:1.5}
.ae-text-link {
  display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  padding-bottom:4px;color:var(--brand);font-size:11px;font-weight:700;
}
.ae-text-link span {font-size:16px;transition:transform .18s ease}
.ae-text-link:hover span {transform:translateX(3px)}

/* manchete principal: ocupa a primeira grande dobra da página */

/* radar integrado ao hero */

/* comunidade: deixa de ser widget e vira segundo grande momento */
.ae-community {
  display:grid;grid-template-columns:minmax(340px,.88fr) minmax(0,1.25fr);
  min-height:410px;border:1px solid var(--line);border-radius:var(--r-3xl);
  overflow:hidden;background:var(--surface);box-shadow:var(--shadow-card);
}
.ae-community-lead {
  position:relative;isolation:isolate;display:flex;flex-direction:column;
  justify-content:flex-end;min-height:410px;padding:34px;color:#fff;overflow:hidden;
  background:
    radial-gradient(circle at 12% 8%,rgba(255,111,29,.34),transparent 30%),
    radial-gradient(circle at 100% 100%,rgba(74,74,255,.48),transparent 36%),
    linear-gradient(145deg,#0a0a20 0%,#151547 58%,#0000c8 100%);
}
.ae-community-lead::before {
  content:"";position:absolute;z-index:-1;inset:0;opacity:.38;
  background-image:radial-gradient(rgba(255,255,255,.2) 1px,transparent 1px);
  background-size:22px 22px;
  mask-image:linear-gradient(to bottom,#000,transparent 55%);
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 55%);
}
.ae-community-lead::after {
  content:"";position:absolute;z-index:-1;right:-70px;top:52px;
  width:210px;height:210px;border:34px solid rgba(255,255,255,.05);border-radius:50%;
}
.ae-community-orbit {
  position:absolute;top:31px;left:34px;width:116px;height:116px;
  display:grid;place-items:center;border:1px solid rgba(255,255,255,.15);border-radius:50%;
}
.ae-community-orbit::before {
  content:"";position:absolute;inset:15px;border:1px dashed rgba(255,255,255,.16);border-radius:50%;
}
.ae-community-orbit svg {
  position:relative;width:42px;height:42px;padding:9px;border-radius:var(--r-xl);
  color:#fff;background:rgba(255,255,255,.12);box-sizing:content-box;
}
.ae-community-orbit i {position:absolute;width:11px;height:11px;border:3px solid #111139;border-radius:50%}
.ae-community-orbit i:nth-child(1) {top:1px;left:54px;background:#ff7a2e}
.ae-community-orbit i:nth-child(2) {right:3px;bottom:22px;background:#7272ff}
.ae-community-orbit i:nth-child(3) {left:7px;bottom:14px;background:#35d07f}
.ae-community-lead h2 {
  max-width:440px;margin:12px 0 10px;font-family:var(--font-display);
  font-size:clamp(25px,2.25vw,35px);font-weight:800;line-height:1.08;letter-spacing:-.04em;
}
.ae-community-lead > p {max-width:460px;color:rgba(255,255,255,.65);font-size:12.5px;line-height:1.6}
.ae-community-actions {display:flex;align-items:center;gap:17px;margin-top:22px;flex-wrap:wrap}
.ae-community-actions a:first-child {
  display:inline-flex;align-items:center;gap:10px;padding:11px 17px;border-radius:var(--r-xl);
  color:#10102f;background:#fff;font-size:11px;font-weight:750;
}
.ae-community-actions a:first-child span {font-size:15px}
.ae-community-actions a:last-child {color:#c6c6ff;font-size:10.5px;font-weight:700}

.ae-community-feed {display:flex;flex-direction:column;padding:28px 30px 24px;background:var(--surface)}
.ae-community-feed > header {
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  padding-bottom:18px;border-bottom:1px solid var(--line);
}
.ae-community-feed > header span {
  font-family:var(--font-mono);font-size:8px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);
}
.ae-community-feed > header h3 {
  margin-top:5px;font-family:var(--font-display);font-size:18px;font-weight:750;letter-spacing:-.025em;
}
.ae-community-feed > header > a {color:var(--brand);font-size:10.5px;font-weight:700}
.ae-discussions {display:flex;flex:1;min-height:0;flex-direction:column}
.ae-discussion {
  display:flex;align-items:center;gap:15px;flex:1;min-height:88px;
  padding:15px 2px;border-bottom:1px solid var(--line);
}
.ae-discussion:last-child {border-bottom:0}
.ae-discussion-rank {
  flex:0 0 40px;font-family:var(--font-display);font-size:25px;font-weight:800;
  letter-spacing:-.06em;color:color-mix(in srgb,var(--brand) 28%,var(--ink-faint));
}
.ae-discussion-copy {display:flex;flex:1;min-width:0;flex-direction:column}
.ae-discussion-copy small {
  font-family:var(--font-mono);font-size:7.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--brand);
}
.ae-discussion-copy b {
  display:-webkit-box;overflow:hidden;margin-top:5px;font-size:12.5px;font-weight:700;line-height:1.35;
  -webkit-box-orient:vertical;-webkit-line-clamp:2;
}
.ae-discussion-copy em {margin-top:5px;color:var(--ink-faint);font-size:9px;font-style:normal}
.ae-discussion > svg {flex:0 0 auto;width:16px;height:16px;color:var(--ink-faint);transition:.18s ease}
.ae-discussion:hover .ae-discussion-copy b {color:var(--brand)}
.ae-discussion:hover > svg {color:var(--brand);transform:translateX(3px)}
.ae-community-empty {display:flex;flex:1;min-height:230px;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.ae-community-empty b {font-family:var(--font-display);font-size:16px}
.ae-community-empty p {margin-top:5px;color:var(--ink-soft);font-size:11px}
.ae-community-empty a {margin-top:13px;color:var(--brand);font-size:11px;font-weight:700}

/* aprendizado como continuidade, não como dashboard */

.ae-track-action {
  position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  color:var(--brand);font-size:10.5px;font-weight:750;white-space:nowrap;
}
.ae-track-action b {font-size:15px}

.ae-subhead {display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:13px}
.ae-subhead span {
  font-family:var(--font-mono);font-size:8px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);
}
.ae-subhead h3 {margin-top:4px;font-family:var(--font-display);font-size:18px;font-weight:750;letter-spacing:-.02em}
.ae-subhead > a {color:var(--brand);font-size:10.5px;font-weight:700}

.ae-empty-course {grid-column:1/-1;padding:28px;text-align:center}
.ae-empty-course b {font-family:var(--font-display);font-size:15px}
.ae-empty-course p {margin-top:5px;color:var(--ink-soft);font-size:11px}
.ae-empty-course a {display:inline-block;margin-top:12px;color:var(--brand);font-size:11px;font-weight:700}

/* lateral do aprendizado */
.ae-home-side {position:static!important}
.ae-live {
  position:relative;display:flex;flex-direction:column;min-height:185px;padding:22px;
  border-radius:var(--r-2xl);overflow:hidden;color:#fff;
  background:
    radial-gradient(circle at 100% 100%,rgba(255,111,29,.27),transparent 42%),
    linear-gradient(145deg,#18183f,#09091f);
}
.ae-live::after {content:"";position:absolute;right:-45px;bottom:-52px;width:145px;height:145px;border:24px solid rgba(255,255,255,.04);border-radius:50%}
.ae-live > * {position:relative;z-index:1}
.ae-live > b {margin:17px 0 6px;font-family:var(--font-display);font-size:17px;line-height:1.28}
.ae-live > small {color:rgba(255,255,255,.55);font-size:9.5px}
.ae-live > strong {margin-top:auto;padding-top:18px;color:#ffab78;font-size:10.5px}
.ae-journey {padding:18px;border-radius:var(--r-float)}
.ae-journey > header {display:flex;align-items:center;justify-content:space-between;color:var(--ink-faint)}
.ae-journey > header span {font-family:var(--font-mono);font-size:8px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.ae-journey > header svg {width:14px;height:14px}
.ae-journey-level {display:flex;align-items:end;justify-content:space-between;gap:15px;margin-top:17px}
.ae-journey-level b {font-family:var(--font-display);font-size:17px}
.ae-journey-level strong {font-family:var(--font-display);font-size:25px;color:var(--brand);letter-spacing:-.04em}
.ae-journey > i {display:block;height:7px;margin-top:11px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.ae-journey > i span {display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--brand),#7777ff)}
.ae-journey > p {margin-top:7px;color:var(--ink-faint);font-family:var(--font-mono);font-size:8px}

/* destinos secundários ficam no fim, sem competir com as três prioridades */
.ae-explore {
  display:grid;grid-template-columns:auto repeat(4,1fr);align-items:center;
  gap:8px;padding:10px;border:1px solid var(--line);border-radius:var(--r-float);background:var(--surface);
}
.ae-explore > span {
  padding:0 14px 0 7px;font-family:var(--font-mono);font-size:8px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap;
}
.ae-explore a {
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;border-radius:var(--r-xl);color:var(--ink-soft);font-size:10.5px;font-weight:650;
}
.ae-explore a b {font-size:14px;color:var(--ink-faint)}
.ae-explore a:hover {color:var(--brand);background:var(--surface-2)}
.ae-explore a:hover b {color:var(--brand)}

/* modo escuro */
[data-theme="dark"] .ae-news-head h2 {
  background:linear-gradient(90deg,#f3f3ff 0%,#8f8fff 82%);
  background-clip:text;-webkit-background-clip:text;
}
[data-theme="dark"] .ae-community {background:var(--surface);box-shadow:none}
[data-theme="dark"] .ae-community-feed {background:var(--surface)}

@media (max-width:1200px) {
  
  
  .ae-community {grid-template-columns:minmax(310px,.82fr) minmax(0,1.18fr)}
  .ae-community-lead {padding:30px}
  
}

@media (max-width:900px) {
  
  
  
  
  
  
  
  
  
  
  
  
  
  .ae-community {grid-template-columns:1fr}
  .ae-community-lead {min-height:360px}
  .ae-community-feed {min-height:390px}
}

@media (max-width:680px) {
  
  .ae-section-head {align-items:flex-start;gap:12px;margin-bottom:14px}
  .ae-section-head h2 {font-size:26px}
  .ae-section-head p {font-size:11.5px}
  .ae-text-link {padding-top:4px;font-size:9px}
  
  
  
  
  
  
  
  
  .ae-community {border-radius:var(--r-2xl)}
  .ae-community-lead {min-height:380px;padding:25px 21px}
  .ae-community-orbit {top:25px;left:21px;width:102px;height:102px}
  .ae-community-lead h2 {font-size:29px}
  .ae-community-lead > p {font-size:11.5px}
  .ae-community-actions {align-items:stretch;flex-direction:column;gap:12px}
  .ae-community-actions a:first-child {justify-content:space-between}
  .ae-community-actions a:last-child {padding-left:3px}
  .ae-community-feed {min-height:0;padding:23px 20px 17px}
  .ae-community-feed > header {align-items:flex-start}
  .ae-community-feed > header h3 {font-size:16px}
  .ae-discussion {min-height:103px;gap:11px}
  .ae-discussion-rank {flex-basis:31px;font-size:20px}
  .ae-discussion-copy b {font-size:11.5px}
  
  
  
  
  .ae-track-action {margin-left:63px}
  
  
  .ae-explore {grid-template-columns:1fr 1fr}
  .ae-explore > span {grid-column:1/-1;padding:7px 8px 2px}
}

@media (max-width:420px) {
  .ae-section-head {flex-direction:column}
  
  .ae-community-lead h2 {font-size:26px}
  .ae-community-feed > header > a {display:none}
  
  
  .ae-track-action {margin-left:0}
}

/* ============================================================
   HOME v12 — ESTRUTURA ORIGINAL, DIAGRAMAÇÃO REFINADA

   Mantém a arquitetura da home entregue no projeto. As seções passam a
   respirar no próprio fundo da página e os cards ficam reservados a objetos
   clicáveis. A comunidade ganha prioridade na coluna lateral.
   ============================================================ */

/* notícia: mesma dobra original, com mais segurança para textos longos */

/* grade principal */

/* progresso vira uma faixa editorial aberta, sem quatro caixas */

/* objetivos: conteúdo solto entre divisórias; os antigos círculos saíram */

.home-goal-lines {
  display:flex;flex-direction:column;margin-top:26px;border-top:1px solid var(--line);
}
.home-goal-line {
  display:grid;grid-template-columns:minmax(150px,.75fr) minmax(160px,1fr) auto;
  align-items:center;gap:22px;min-height:66px;padding:13px 0;border-bottom:1px solid var(--line);
}
.home-goal-line:last-child {border-bottom:0}
.home-goal-copy {display:flex;min-width:0;align-items:baseline;justify-content:space-between;gap:10px}
.home-goal-copy b {font-size:12px;font-weight:700;white-space:normal;overflow-wrap:anywhere}
.home-goal-copy small {flex:0 0 auto;color:var(--ink-faint);font-family:var(--font-mono);font-size:9px}
.home-goal-bar {display:block;height:6px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.home-goal-bar i {display:block;height:100%;border-radius:inherit;background:var(--goal-color)}
.home-goal-link {color:var(--brand);font-size:10px;font-weight:700;white-space:nowrap}
.home-goal-link b {margin-left:4px;font-size:14px}
.home-goal-line:hover .home-goal-link {color:var(--accent)}

/* formação: um único card funcional, com conteúdo sempre inteiro */

/* cursos deixam de parecer caixas dentro de outra seção */

/* comunidade em destaque: um painel, sem cards internos ou círculos decorativos */
.home-community-feature {
  position:relative;overflow:hidden;padding:25px 24px 20px;border-radius:var(--r-2xl);color:#fff;
  background:
    linear-gradient(115deg,rgba(255,111,29,.16),transparent 42%),
    linear-gradient(145deg,#11112f 0%,#17174a 56%,#0000c7 100%);
  box-shadow:0 24px 55px -38px rgba(0,0,90,.8);
}
.home-community-feature::before {
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent);
}
.home-community-feature > header {
  position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  padding-bottom:17px;border-bottom:1px solid rgba(255,255,255,.14);
}
.home-community-feature > header > div {min-width:0}
.home-community-feature > header span {
  display:block;font-family:var(--font-mono);font-size:8px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:#ffad7d;
}
.home-community-feature > header h3 {
  max-width:235px;margin-top:6px;font-family:var(--font-display);font-size:18px;
  font-weight:750;line-height:1.18;letter-spacing:-.025em;overflow-wrap:anywhere;
}
.home-community-feature > header > a {
  flex:0 0 auto;padding-top:2px;color:#bfc0ff;font-size:9.5px;font-weight:700;white-space:nowrap;
}
.home-community-intro {
  margin:16px 0 4px;color:rgba(255,255,255,.64);font-size:11.5px;line-height:1.55;
}
.home-community-list {display:flex;flex-direction:column}
.home-community-topic {
  display:flex;align-items:flex-start;gap:12px;padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,.12);color:#fff;
}
.home-community-topic .n {
  flex:0 0 22px;padding-top:2px;font-family:var(--font-mono);font-size:9px;color:rgba(255,255,255,.38);
}
.home-community-topic .topic-copy {display:flex;flex:1;min-width:0;flex-direction:column}
.home-community-topic small {
  font-family:var(--font-mono);font-size:7.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:#ffad7d;
}
.home-community-topic b {
  display:block;margin-top:5px;font-size:12px;font-weight:700;line-height:1.4;
  white-space:normal;overflow:visible;overflow-wrap:anywhere;word-break:normal;
}
.home-community-topic em {margin-top:5px;color:rgba(255,255,255,.48);font-size:8.5px;font-style:normal}
.home-community-topic .topic-arrow {flex:0 0 auto;padding-top:17px;color:rgba(255,255,255,.38);font-size:14px}
.home-community-topic:hover b {color:#c8c8ff}
.home-community-topic:hover .topic-arrow {color:#ffad7d}
.home-community-feature > footer {padding-top:17px}
.home-community-feature > footer a {
  display:flex;align-items:center;justify-content:space-between;width:100%;
  color:#fff;font-size:10.5px;font-weight:700;
}
.home-community-feature > footer a span {color:#ffad7d;font-size:15px}
.home-community-empty {padding:24px 0 13px}
.home-community-empty b {display:block;font-size:12px}
.home-community-empty a {display:inline-block;margin-top:9px;color:#ffad7d;font-size:10px;font-weight:700}

/* ao vivo é uma faixa aberta; não existe card contendo outro card */
.home-live-open {
  display:flex;flex-direction:column;padding:19px 2px 20px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.home-live-open .live-badge {color:var(--accent)}
.home-live-open > b {
  margin:10px 0 4px;font-family:var(--font-display);font-size:15px;line-height:1.35;
  white-space:normal;overflow-wrap:anywhere;
}
.home-live-open > span:not(.live-badge) {color:var(--ink-faint);font-size:10px;line-height:1.45}
.home-live-open > strong {margin-top:12px;color:var(--brand);font-size:10.5px}

/* a medalha circular da liga vira selo retangular */

/* dark */

@media (max-width:760px) {
  
  
  
  
  
  
  
  
  .home-goal-line {grid-template-columns:1fr;gap:9px;padding:15px 0}
  .home-goal-copy {justify-content:space-between}
  .home-goal-link {white-space:normal}
  
  
  
}

@media (max-width:520px) {
  
  
  
  
  
  .home-community-feature {padding:22px 19px 18px;border-radius:var(--r-float)}
  .home-community-feature > header {flex-direction:column;gap:9px}
  .home-community-feature > header h3 {max-width:none}
  .home-community-topic {gap:9px}
  
  
  
}

/* ============================================================
   AJUSTES PONTUAIS DA HOME ORIGINAL
   ============================================================ */

/* comunidade: destaque próprio sem alterar a estrutura da coluna */
.home-community-widget {
  position:relative;overflow:hidden;border-color:#cfcfff;
  background:linear-gradient(145deg,#f3f3ff 0%,var(--surface) 68%);
  box-shadow:0 18px 38px -32px rgba(0,0,180,.58);
}
.home-community-widget::before {
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent);
}
.home-community-widget .widget-head {align-items:flex-start;padding:19px 19px 10px 22px}
.home-community-widget .widget-head > div {min-width:0}
.home-community-widget .widget-head h4 {
  margin-top:4px;color:var(--brand);font-size:var(--type-widget-title);letter-spacing:-.01em;
}
.home-community-widget .widget-head > a {padding-top:12px;white-space:nowrap}
.hcw-kicker {
  display:block;font-family:var(--font-mono);font-size:var(--type-context-label);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--accent);
}
.hcw-intro {
  padding:0 19px 12px 22px;color:var(--ink-soft);font-size:11.5px;line-height:1.5;
}
.home-community-widget .trend {
  align-items:center;gap:11px;padding:13px 19px 13px 22px;
  border-top:1px solid color-mix(in srgb,var(--line) 76%,transparent);
}
.home-community-widget .trend:hover {background:color-mix(in srgb,var(--brand-soft) 68%,transparent)}
.home-community-widget .trend .n {color:var(--brand);font-weight:700}
.home-community-widget .trend > div {flex:1;min-width:0}
.home-community-widget .trend b {
  color:var(--ink);font-size:12.5px;white-space:normal;overflow-wrap:anywhere;
}
.home-community-widget .trend span:not(.n):not(.hcw-arrow) {
  display:block;margin-top:3px;font-size:10px;line-height:1.35;white-space:normal;overflow-wrap:anywhere;
}
.hcw-arrow {flex:0 0 auto;color:var(--ink-faint);font-size:14px}
.home-community-widget .trend:hover .hcw-arrow {color:var(--brand);transform:translateX(2px)}
.hcw-empty {padding:18px 22px;color:var(--ink-faint);font-size:11px;line-height:1.5}
.hcw-foot {padding:10px 14px 14px}
.hcw-foot > a {
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;padding:11px 13px;border-radius:var(--r-lg);background:var(--brand);
  color:#fff;font-size:10.5px;font-weight:700;
}
.hcw-foot > a span {font-size:15px}
.hcw-foot > a:hover {background:var(--brand-deep);color:#fff}

[data-theme="dark"] .home-community-widget {
  border-color:#3c3c72;background:linear-gradient(145deg,#20204a 0%,var(--surface) 70%);
  box-shadow:none;
}
[data-theme="dark"] .home-community-widget .widget-head h4 {color:#9b9bff}

/* Dock mobile: navegação e perfil participam da mesma grade. Assim, cada
   acesso ocupa uma coluna idêntica, inclusive nos perfis administrativos. */
@media (max-width:900px) {
  .sb {
    --dock-target:52px;
    --dock-icon-box:44px;
    --dock-icon-glyph:24px;
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr));
    grid-auto-rows:var(--dock-target);
    align-items:center !important;
    padding:8px !important;
    column-gap:4px !important;row-gap:0 !important;
  }

  /* Aluno: 5 colunas. Administrador: 6. :has cobre partial em cache. */
  .sb.sb-with-admin,
  .sb:has(> .sb-nav > .sb-admin) {
    grid-template-columns:repeat(6,minmax(0,1fr));
  }

  /* Remove apenas os agrupadores da distribuição: seus filhos passam a ser
     itens diretos da grade e recebem exatamente a mesma largura. */
  .sb-nav,.sb-foot {display:contents !important}

  .sb-nav > .sb-item,
  .sb-nav > .sb-group,
  .sb-foot > .sb-me {
    width:100% !important;min-width:0 !important;max-width:none !important;
    height:var(--dock-target) !important;margin:0 !important;
  }
  .sb-group > summary,
  .sb-nav > .sb-item,
  .sb-foot > .sb-me {
    display:flex !important;align-items:center !important;justify-content:center !important;
    height:var(--dock-target) !important;padding:0 !important;
  }
  .sb-group > summary > .sb-gico,
  .sb-nav > .sb-item > svg {
    box-sizing:border-box !important;flex:0 0 var(--dock-icon-box) !important;
    width:var(--dock-icon-box) !important;height:var(--dock-icon-box) !important;
    padding:calc((var(--dock-icon-box) - var(--dock-icon-glyph)) / 2) !important;
    border-radius:var(--r-lg) !important;
    background:var(--sb-soft) !important;
  }
  .sb-nav > .sb-item.on > svg,
  .sb-group[open] > summary > .sb-gico {
    background:linear-gradient(145deg,#2525ff,#0000ce) !important;
  }
  .sb-nav > .sb-home {margin:0 !important}

  /* Admin usa a mesma geometria dos outros acessos; só a cor comunica função. */
  .sb-nav > .sb-admin {
    margin:0 !important;padding:0 !important;border:0 !important;
    color:var(--accent) !important;background:transparent !important;
  }
  .sb-nav > .sb-admin > svg {color:var(--accent) !important}

  /* Perfil: mesma coluna e mesmo centro geométrico dos demais acessos. */
  .sb-foot .sb-me {
    gap:0 !important;border:0 !important;border-radius:var(--r-lg) !important;
    background:transparent !important;overflow:visible !important;
  }
  .sb-foot .sb-avatar {width:var(--dock-icon-box) !important;height:var(--dock-icon-box) !important}
  .sb-profile-copy,.sb-profile-arrow,.sb-foot .sb-me-id {display:none !important}
  .sb-foot form {display:none !important}
}

@media (max-width:340px) {
  .sb {
    --dock-target:48px;
    --dock-icon-box:40px;
    --dock-icon-glyph:22px;
    left:7px !important;right:7px !important;bottom:7px !important;
    padding:6px !important;column-gap:2px !important;
  }
}

/* rodapé: o desktop permanece intocado; no mobile continua aberto sobre a página */
@media (max-width:760px) {
  /* 82px cobrem o dock + margem; 8px preservam o respiro do conteúdo */
  html .frame,html.sb-mini .frame {
    padding-bottom:calc(90px + env(safe-area-inset-bottom,0px)) !important;
  }
  .site-footer {
    margin-top:38px;padding:22px 2px 10px;
    border:0;border-top:1px solid var(--line);border-radius:0;
    background:transparent;box-shadow:none;
  }
  .sf-inner {align-items:stretch;gap:18px}
  .sf-brand {
    display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;
    width:100%;gap:13px;
  }
  .sf-logo {height:23px;opacity:1}
  .sf-brand span {font-size:11.5px;line-height:1.5}
  .sf-links {
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;gap:7px 18px;
  }
  .sf-link {
    display:flex;align-items:center;justify-content:flex-start;min-height:32px;
    padding:5px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;
    background:transparent;font-size:10.5px;line-height:1.35;
    text-align:left;white-space:normal;
  }
  .sf-link:first-child {grid-column:1/-1}
  .sf-report {
    grid-column:1/-1;order:initial;width:100%;min-height:42px;margin:3px 0 0;
    justify-content:center;border-radius:var(--r-md);border-color:color-mix(in srgb,var(--accent) 42%,var(--line));
    background:var(--accent-soft);color:var(--accent);font-size:11px;
  }
  .sf-bottom {
    margin-top:15px;padding:13px 150px 0 0;font-size:9.5px;line-height:1.5;text-align:left;
  }
}

@media (max-width:420px) {
  .site-footer {padding-left:2px;padding-right:2px}
  .sf-brand {grid-template-columns:auto minmax(0,1fr);text-align:left;justify-items:start}
  .sf-brand span {max-width:none}
}

@media (max-width:340px) {
  html .frame,html.sb-mini .frame {
    padding-bottom:calc(78px + env(safe-area-inset-bottom,0px)) !important;
  }
}

/* ============================================================
   PADRÃO INSTITUCIONAL — SIDEBAR SEMPRE ESCURA

   A sidebar, o dock mobile e seus painéis compartilham o mesmo azul
   institucional definido em --navy-surface.
   ============================================================ */
.sb {
  --sb-border:rgba(255,255,255,.11);
  --sb-muted:#a0a3b8;
  --sb-soft:#24244c;
  --sb-hover:#2d2d58;
  --sb-active:#343466;
  --sb-active-ink:#c2c2ff;
  --sb-mobile-bg:rgba(var(--navy-surface-rgb),.96);
  border-color:var(--sb-border);
  background:
    radial-gradient(circle at 0 0,rgba(92,92,255,.2),transparent 36%),
    rgba(var(--navy-surface-rgb),.97);
  color:#f5f5ff;
  box-shadow:18px 0 54px -42px rgba(0,0,0,.92);
}
.sb-brand-logo .sb-logo-on-light{display:none !important}
.sb-brand-logo .sb-logo-on-dark{display:block !important}
.sb-brand-copy b,.sb-group-copy b,.sb-me-id b{color:#f4f4ff}
.sb-brand-copy small{color:#a0a3b8}
.sb-toggle{border-color:var(--sb-border);background:#23234f;color:#b2b4c7}
.sb-toggle:hover{background:#30305e;color:#c2c2ff}

.sb-nav{
  scrollbar-color:rgba(181,181,255,.32) transparent;
}
.sb-nav::-webkit-scrollbar-thumb{background:rgba(181,181,255,.32)}
.sb-item{color:#b2b4c7}
.sb-item > svg{background:var(--sb-soft);color:#b2b4c7}
.sb-item.on{background:var(--sb-active);color:var(--sb-active-ink)}
.sb-item.on > svg{
  color:#fff;background:linear-gradient(145deg,#4e4eff,#2020df);
}
.sb-group > summary{color:var(--sb-muted)}
.sb-group > summary .sb-gico{background:var(--sb-soft);color:#b2b4c7}
.sb-group > summary .sb-chev{color:#9699ae}
.sb-group[open] > summary .sb-gico{background:var(--sb-active);color:#c2c2ff}
@media (hover:hover){
  .sb-item:hover{background:var(--sb-hover);color:#c2c2ff}
  .sb-item:hover > svg,
  .sb-group > summary:hover .sb-gico{
    color:#fff;background:linear-gradient(145deg,#4e4eff,#2020df);
  }
  .sb-group > summary:hover{background:var(--sb-hover);color:#c2c2ff}
}

.sb-profile-card{
  background:linear-gradient(135deg,#24245a 0%,#1010df 68%,#5050ff 100%);
}
.sb-avatar{border-color:#252551}
.sb-presence{border-color:var(--navy-surface)}
.sb-foot{border-color:var(--sb-border)}
.sb-me:hover{background:var(--sb-hover)}
.sb-out{color:#8f92a6}
.sb-out:hover{border-color:rgba(255,111,29,.28);background:rgba(255,111,29,.1);color:var(--accent)}
.sb-admin,.sb-admin:hover{
  border-color:rgba(255,111,29,.3);background:rgba(255,111,29,.08);color:#ff8b4d;
}
.sb-admin > svg{background:rgba(255,111,29,.13);color:#ff8b4d}

@media (max-width:900px){
  .sb{
    --sb-mobile-bg:rgba(var(--navy-surface-rgb),.96);
    background:var(--sb-mobile-bg);
    border-color:var(--sb-border);
    box-shadow:0 18px 48px -16px rgba(3,3,18,.72);
  }
  .sb-list{
    background:var(--sb-mobile-bg);border-color:var(--sb-border);
    box-shadow:0 24px 56px -18px rgba(3,3,18,.82);
  }
  .sb-list > .sb-item{color:#d0d1dc}
  .sb-list > .sb-item.on{background:var(--sb-active);color:var(--sb-active-ink)}
  .sb-list > .sb-item > svg{
    background:var(--sb-soft) !important;color:#b2b4c7 !important;
  }
  .sb-list > .sb-item.on > svg{
    background:linear-gradient(145deg,#4e4eff,#2020df) !important;color:#fff !important;
  }
  .sb-group > summary > .sb-gico,
  .sb-nav > .sb-item > svg{
    background:var(--sb-soft) !important;color:#b2b4c7 !important;
  }
  .sb-nav > .sb-item.on > svg,
  .sb-group[open] > summary > .sb-gico{
    color:#fff !important;
    background:linear-gradient(145deg,#4e4eff,#2020df) !important;
  }
  .sb-group:has(.sb-item.on):not([open]) > summary > .sb-gico{
    color:#c2c2ff !important;background:var(--sb-active) !important;
  }
  .sb-nav > .sb-admin > svg{
    color:#ff8b4d !important;background:rgba(255,111,29,.13) !important;
  }
  .sb-foot .sb-avatar{border-color:#30305e !important}
  .sb-presence{border-color:var(--navy-surface)}
  .sb-veu{background:rgba(11,11,32,.58)}
}

/* ============================================================
   LIGAS — apresentação visual, ampla e sem quebras artificiais
   ============================================================ */
.league-page{padding-bottom:28px}
.league-wrap{width:100%;max-width:1180px;margin:0 auto}
.league-back{margin-bottom:16px}
.league-page :where(h1,h2,h3,p){word-break:normal;overflow-wrap:normal;hyphens:none}
.league-page :where(h1,h2,h3){text-wrap:balance}
.league-page p{text-wrap:pretty}

.league-hero{
  position:relative;display:grid;grid-template-columns:minmax(0,1.22fr) minmax(300px,.78fr);
  gap:34px;overflow:hidden;padding:42px 42px 30px;border-radius:var(--r-lg);
  color:#fff;background:
    radial-gradient(circle at 86% 2%,rgba(92,92,255,.42),transparent 31%),
    radial-gradient(circle at 4% 110%,rgba(255,111,29,.24),transparent 31%),
    var(--navy-surface);
}
.league-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.36;
  background-image:radial-gradient(rgba(255,255,255,.13) 1px,transparent 1px);
  background-size:24px 24px;
  mask-image:linear-gradient(110deg,transparent 8%,#000 100%);
  -webkit-mask-image:linear-gradient(110deg,transparent 8%,#000 100%);
}
.league-hero > *{position:relative;z-index:1}
.league-kicker,.league-section-head > span,.league-cta > div > span,
.league-compare article > span,.league-tier-label{
  font-family:var(--font-mono);font-size:var(--type-context-label);font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;
}
.league-kicker{color:#ffad7d}
.league-hero h1{
  max-width:650px;margin:11px 0 13px;color:#fff;font-family:var(--font-display);
  font-size:clamp(31px,3.6vw,48px);font-weight:750;line-height:1.07;letter-spacing:-.035em;
}
.league-hero-copy > p{max-width:680px;color:rgba(255,255,255,.74);font-size:14.5px;line-height:1.7}
.league-hero-actions{display:flex;align-items:center;gap:18px;margin-top:24px;flex-wrap:wrap}
.league-hero-actions > span{color:rgba(255,255,255,.58);font-size:11.5px;line-height:1.45}
.league-hero-actions > span b{color:#fff;white-space:nowrap}

.league-score{
  align-self:center;padding:22px;border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-lg);background:rgba(255,255,255,.08);backdrop-filter:blur(10px);
}
.league-score-top{display:flex;align-items:center;gap:14px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.12)}
.league-emblem{display:grid;place-items:center;width:50px;height:50px;flex:0 0 50px;border-radius:var(--r-md);color:#fff}
.league-emblem svg{width:27px;height:27px}
.league-score-name{display:flex;min-width:0;flex-direction:column}
.league-score-name small{color:rgba(255,255,255,.48);font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.1em}
.league-score-name b{margin-top:3px;color:#fff;font-family:var(--font-display);font-size:17px;line-height:1.25}
.league-score-stats{display:grid;grid-template-columns:repeat(3,1fr);padding-top:18px}
.league-score-stats > span{display:flex;min-width:0;flex-direction:column;padding:0 10px}
.league-score-stats > span:first-child{padding-left:0}
.league-score-stats > span:last-child{padding-right:0}
.league-score-stats > span + span{border-left:1px solid rgba(255,255,255,.12)}
.league-score-stats b{color:#fff;font-size:19px;line-height:1.1;white-space:nowrap}
.league-score-stats small{margin-top:5px;color:rgba(255,255,255,.48);font-size:8.5px;line-height:1.35}

.league-route{grid-column:1/-1;display:grid;grid-template-columns:repeat(5,1fr);margin-top:8px;position:relative}
.league-route::before{content:"";position:absolute;left:9%;right:9%;top:14px;height:2px;background:rgba(255,255,255,.14)}
.league-route-stop{position:relative;display:flex;align-items:center;min-width:0;flex-direction:column;text-align:center}
.league-route-stop i{
  position:relative;z-index:1;display:grid;place-items:center;width:30px;height:30px;
  border:2px solid rgba(255,255,255,.18);border-radius:50%;background:var(--navy-surface);
  color:rgba(255,255,255,.48);font-family:var(--font-mono);font-size:10px;font-style:normal;font-weight:700;
}
.league-route-stop span{max-width:130px;margin-top:8px;color:rgba(255,255,255,.46);font-size:9px;font-weight:600;line-height:1.35}
.league-route-stop.is-passed i{border-color:#6f6fff;background:#303066;color:#fff}
.league-route-stop.is-passed span{color:rgba(255,255,255,.68)}
.league-route-stop.is-current i{border-color:#fff;background:var(--brand);color:#fff;box-shadow:0 0 0 5px rgba(92,92,255,.23)}
.league-route-stop.is-current span{color:#fff;font-weight:700}

.league-section{padding:58px 0 0}
.league-section-head{display:grid;grid-template-columns:minmax(0,1fr);max-width:780px;margin-bottom:24px}
.league-section-head > span{color:var(--brand)}
.league-section-head h2{margin:7px 0 8px;font-family:var(--font-display);font-size:var(--type-section-title);font-weight:750;line-height:1.25;letter-spacing:-.015em}
.league-section-head p{max-width:720px;color:var(--ink-soft);font-size:13.5px;line-height:1.65}

.league-cycle{
  display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.league-cycle article{display:flex;min-width:0;gap:14px;padding:24px 22px}
.league-cycle article + article{border-left:1px solid var(--line)}
.league-cycle article > span{
  color:var(--brand);font-family:var(--font-mono);font-size:10px;font-weight:700;
  letter-spacing:.08em;line-height:1.7;
}
.league-cycle h3{font-family:var(--font-display);font-size:var(--type-content-title);font-weight:700;line-height:1.35}
.league-cycle p{margin-top:6px;color:var(--ink-soft);font-size:12px;line-height:1.6}

.league-ladder{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.league-ladder-row{
  position:relative;display:grid;grid-template-columns:54px minmax(0,1fr) auto;
  align-items:center;gap:18px;min-height:98px;padding:17px 22px;
}
.league-ladder-row + .league-ladder-row{border-top:1px solid var(--line)}
.league-ladder-row.is-current{background:var(--brand-soft)}
.league-ladder-row.is-current::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--brand)}
.league-tier-mark{display:grid;place-items:center;width:54px;height:54px;border-radius:var(--r-md);color:#fff;font-size:19px;font-weight:750}
.league-tier-label{display:block;color:var(--ink-faint);font-size:8.5px}
.league-ladder-row h3{margin:3px 0 4px;font-family:var(--font-display);font-size:var(--type-content-title);font-weight:750;line-height:1.3}
.league-ladder-row p{max-width:720px;color:var(--ink-soft);font-size:12.5px;line-height:1.55}
.league-you-are-here,.league-tier-end{
  justify-self:end;padding:6px 10px;border-radius:999px;font-family:var(--font-mono);
  font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
}
.league-you-are-here{background:var(--brand);color:#fff}
.league-tier-end{color:var(--ink-faint);border:1px solid var(--line)}

.league-rewards{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
}
.league-reward-row{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:60px;padding:10px 16px}
.league-reward-row:nth-child(even){border-left:1px solid var(--line)}
.league-reward-row:nth-child(n+3){border-top:1px solid var(--line)}
.league-reward-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r-md);background:var(--bg);font-size:16px}
.league-reward-row b{font-size:12.5px;font-weight:650;line-height:1.4}
.league-reward-row strong{color:var(--ok);font-family:var(--font-mono);font-size:11.5px;white-space:nowrap}

.league-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:22px;border-radius:var(--r-lg);background:var(--brand-soft);border:1px solid #cfcfff;overflow:hidden}
.league-compare article{padding:24px 26px}
.league-compare article + article{border-left:1px solid #cfcfff}
.league-compare article > span{color:var(--brand);font-size:9px}
.league-compare h3{margin:5px 0 7px;font-family:var(--font-display);font-size:var(--type-content-title);font-weight:750}
.league-compare p{max-width:470px;color:var(--ink-soft);font-size:12.5px;line-height:1.65}

.league-level-track{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.league-level-stop{position:relative;display:flex;min-width:0;flex-direction:column;align-items:center;padding:18px 8px;text-align:center}
.league-level-stop + .league-level-stop{border-left:1px solid var(--line)}
.league-level-stop > span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--bg);color:var(--ink-faint);font-size:11px;font-weight:700}
.league-level-stop b{margin-top:8px;font-size:10.5px;white-space:nowrap}
.league-level-stop small{margin-top:3px;color:var(--ink-faint);font-family:var(--font-mono);font-size:8.5px;white-space:nowrap}
.league-level-stop.is-passed > span{background:#303066;color:#fff}
.league-level-stop.is-current{background:var(--brand-soft)}
.league-level-stop.is-current > span{background:var(--brand);color:#fff;box-shadow:0 0 0 4px rgba(0,0,249,.12)}

.league-cta{
  display:flex;align-items:center;justify-content:space-between;gap:28px;margin-top:58px;
  padding:30px 34px;border-radius:var(--r-lg);color:#fff;background:
    radial-gradient(circle at 90% 0,rgba(92,92,255,.36),transparent 32%),
    var(--navy-surface);
}
.league-cta > div > span{color:#ffad7d}
.league-cta h2{margin:6px 0 5px;color:#fff;font-family:var(--font-display);font-size:var(--type-section-title);font-weight:750}
.league-cta p{max-width:700px;color:rgba(255,255,255,.66);font-size:12.5px;line-height:1.6}
.league-cta .btn-white{flex:0 0 auto;white-space:nowrap}

[data-theme="dark"] .league-ladder-row.is-current,
[data-theme="dark"] .league-level-stop.is-current{background:rgba(92,92,255,.12)}
[data-theme="dark"] .league-rewards{background:var(--surface)}
[data-theme="dark"] .league-compare{background:#202045;border-color:#343467}
[data-theme="dark"] .league-compare article + article{border-color:#343467}
[data-theme="dark"] .league-emblem{color:#fff}

@media (max-width:1000px){
  .league-hero{grid-template-columns:minmax(0,1fr) 320px;padding:34px 32px 28px}
  .league-cycle{grid-template-columns:repeat(2,1fr)}
  .league-cycle article:nth-child(3){border-left:0;border-top:1px solid var(--line)}
  .league-cycle article:nth-child(4){border-top:1px solid var(--line)}
  .league-level-track{grid-template-columns:repeat(4,1fr)}
  .league-level-stop:nth-child(5){border-left:0}
  .league-level-stop:nth-child(n+5){border-top:1px solid var(--line)}
}

@media (max-width:760px){
  .league-page{padding-bottom:12px}
  .league-hero{grid-template-columns:1fr;gap:25px;padding:28px 22px 23px}
  .league-hero h1{font-size:30px}
  .league-hero-copy > p{font-size:13px;line-height:1.65}
  .league-score{padding:18px}
  .league-route{grid-template-columns:repeat(5,112px);overflow-x:auto;padding:2px 0 8px;scrollbar-width:none}
  .league-route::-webkit-scrollbar{display:none}
  .league-route::before{left:56px;right:auto;width:448px}
  .league-section{padding-top:44px}
  .league-section-head{margin-bottom:19px}
  .league-cycle{grid-template-columns:1fr}
  .league-cycle article{padding:19px 4px}
  .league-cycle article + article{border-left:0;border-top:1px solid var(--line)}
  .league-ladder-row{grid-template-columns:46px minmax(0,1fr);gap:14px;padding:16px 10px;min-height:90px}
  .league-tier-mark{width:46px;height:46px}
  .league-ladder-row > strong{grid-column:2;justify-self:start;margin-top:4px}
  .league-rewards{grid-template-columns:1fr}
  .league-reward-row:nth-child(even){border-left:0}
  .league-reward-row:nth-child(n+2){border-top:1px solid var(--line)}
  .league-compare{grid-template-columns:1fr}
  .league-compare article{padding:21px 20px}
  .league-compare article + article{border-left:0;border-top:1px solid #cfcfff}
  [data-theme="dark"] .league-compare article + article{border-color:#343467}
  .league-level-track{grid-template-columns:repeat(2,1fr)}
  .league-level-stop:nth-child(odd){border-left:0}
  .league-level-stop:nth-child(n+3){border-top:1px solid var(--line)}
  .league-cta{align-items:flex-start;flex-direction:column;margin-top:44px;padding:25px 22px}
  .league-cta .btn-white{width:100%;justify-content:center;text-align:center}
}

@media (max-width:380px){
  .league-score-stats{grid-template-columns:1fr;gap:11px}
  .league-score-stats > span{padding:0}
  .league-score-stats > span + span{padding-top:11px;border-left:0;border-top:1px solid rgba(255,255,255,.12)}
  .league-hero-actions{align-items:stretch;flex-direction:column}
  .league-hero-actions .btn-white{justify-content:center;text-align:center}
}

/* ============================================================
   PAINEL DO MENU NO CELULAR — alinhamento do rótulo

   ⚠️ ESTA REGRA FICA NO FIM DO ARQUIVO DE PROPÓSITO.

   O painel é redefinido em QUATRO pontos deste CSS (linhas ~3327,
   ~4692, ~5096 e ~6020). Qualquer ajuste feito no primeiro bloco é
   sobrescrito pelos seguintes — foi o que aconteceu nas tentativas
   anteriores, e por isso a correção "não pegava".

   Como o rótulo alinha:

   `align-self:stretch` faz o texto ocupar a altura inteira do item
   (min-height:48px), e o `display:flex; align-items:center` centra as
   letras dentro dessa altura. Assim o alinhamento não depende de
   line-height nem do tamanho do chip do ícone — se qualquer um dos dois
   mudar, continua centrado.
   ============================================================ */
@media (max-width: 900px){
  .sb-list > .sb-item{
    align-items:center !important;
  }

  .sb-list > .sb-item .sb-txt{
    display:flex !important;
    align-items:center !important;
    align-self:stretch !important;
    line-height:1 !important;
  }
}

/* ============================================================
   AULAS AO VIVO NO CELULAR

   ⚠️ O card não tinha NENHUMA regra de celular. No desktop são três
   colunas — miniatura, texto e botão — e em 400px elas não cabem:
   a miniatura de 120px e o botão largo espremiam o título até sobrar
   uma palavra por linha, e o botão vazava para fora da tela.

   Aqui o card empilha. Regra no fim do arquivo porque `.live-card`
   é redefinido também na linha ~2821.
   ============================================================ */
@media (max-width: 640px){

  .live-card{
    flex-direction:column !important;
    align-items:stretch !important;
    gap:12px !important;
    padding:14px !important;
  }

  /* ⚠️ a miniatura vira capa de largura cheia. Mantida em 16:9 com
     aspect-ratio em vez de altura fixa: em tela estreita uma altura
     fixa distorce a proporção. */
  .live-thumb{
    width:100% !important;
    height:auto !important;
    aspect-ratio:16/9;
    max-height:170px;
  }

  .live-info{ min-width:0 }

  /* o título tinha espaço para uma palavra por linha; agora usa a
     largura inteira do card */
  .live-info h4{
    font-size:16px;
    line-height:1.3;
  }
  .live-info .li-when{ display:block; margin-bottom:4px }
  .live-info p{ margin-top:4px }

  /* botão de largura cheia: alvo confortável e nada de transbordo */
  .live-cta{ width:100% }
  .live-cta form{ width:100% }
  .live-cta .btn-primary{
    display:flex;
    width:100%;
    justify-content:center;
    text-align:center;
    min-height:44px;
    /* ⚠️ o texto "Confirmar presença · +30 km" é longo: sem quebrar,
       ele estoura o botão em telas de 360px */
    white-space:normal;
    line-height:1.25;
  }
  .live-attended{
    display:block;
    text-align:center;
    padding:10px 0;
  }
}

/* ============================================================
   PÁGINA DA AULA NO CELULAR

   ⚠️ Nem `.lesson-head` nem `.lesson-nav` tinham regra de celular.
   Os dois são flex em LINHA, feitos para a largura do desktop.

   No cabeçalho, o botão "Marcar como concluída · +10 km" tem ~28
   caracteres e não encolhe — sobrava tão pouco espaço que o título
   "Aula 2" quebrava em duas linhas, uma palavra em cada.
   ============================================================ */
@media (max-width: 640px){

  /* ---- cabeçalho: título em cima, ação embaixo ---- */
  .lesson-head{
    flex-direction:column !important;
    align-items:stretch !important;
    gap:12px !important;
  }
  .lesson-head h1{
    font-size:19px;
    line-height:1.25;
  }

  /* botão de largura cheia: alvo confortável, e o texto longo deixa
     de disputar espaço com o título */
  .lesson-head form{ width:100% }
  .btn-complete,
  .btn-done{
    display:flex !important;
    width:100%;
    justify-content:center;
    min-height:46px;
    /* ⚠️ "Marcar como concluída · +10 km" estoura um botão de 360px
       se não puder quebrar */
    white-space:normal;
    line-height:1.25;
    text-align:center;
  }

  /* ---- navegação entre aulas ---- */
  /* ⚠️ os dois títulos vêm cortados em 26 caracteres cada: lado a lado
     não cabem. Empilhados, cada um usa a largura inteira. */
  .lesson-nav{
    flex-direction:column !important;
    gap:8px !important;
  }
  .lesson-nav .btn-outline{
    display:flex;
    width:100%;
    justify-content:center;
    min-height:44px;
    text-align:center;
  }

  /* ---- sumário do curso ---- */
  /* o nome da aula é longo; sem isto ele empurra o marcador de
     concluída para fora do card */
  .o-lesson{ align-items:flex-start }
  .o-lesson .check{ margin-top:2px }
}

/* ============================================================
   PERFIL NO CELULAR — a pessoa em destaque

   O perfil existe para a transportadora avaliar o candidato. No
   celular a proporção estava invertida: uma capa de 196px vazia
   ocupando metade da tela, e o rosto em 88px embaixo dela.

   Aqui a capa encolhe e o avatar cresce.
   ============================================================ */
@media (max-width: 760px){

  /* ⚠️ sem foto a capa é só decorativa (gradiente e linha pontilhada); com
     foto (.cover-img, object-fit:cover) ela também não precisa de 196px em
     tela estreita — em ambos os casos vira faixa. */
  .profile-cover{
    height:120px !important;
  }
  .route-line{
    left:20px; right:20px; bottom:22px;
  }

  /* ---- o rosto ----
     ⚠️ as TRÊS medidas mudam juntas. A regra da linha ~1699 troca só
     width/height e deixa o `flex:0 0 98px` da regra global valendo —
     como `.profile-top` vira COLUNA no celular, esse basis passa a
     controlar a ALTURA e o círculo vira ovo. */
  .profile-avatar{
    width:124px !important;
    height:124px !important;
    flex:0 0 124px !important;
    aspect-ratio:1;
    font-size:38px !important;
    margin-top:-72px !important;
    border-width:5px;
    /* sombra mais marcada: separa o rosto da capa e do card */
    box-shadow:0 14px 34px -10px rgba(11,11,30,.45);
  }

  /* nome com mais presença — é a informação principal da tela */
  .profile-id h2{
    font-size:23px;
  }
}

@media (max-width: 400px){
  .profile-cover{ height:104px !important }

  .profile-avatar{
    width:108px !important;
    height:108px !important;
    flex:0 0 108px !important;
    font-size:33px !important;
    margin-top:-64px !important;
  }
  .profile-id h2{ font-size:21px }
}

/* ============================================================
   SKIN DE COR DA SIDEBAR (recompensa 100% digital)

   A sidebar é sempre escura, independente do tema (ver bloco
   "PADRÃO INSTITUCIONAL — SIDEBAR SEMPRE ESCURA" acima) — então a skin só
   precisa de UMA variante, sem repetir a lógica pra claro/escuro.

   A cor escolhida no resgate chega pela custom property --skin, definida
   inline no <aside class="sb sb-skinned" style="--skin:#hex"> (ver
   partials/sidebar.blade.php) — sem precisar calcular tom nenhum no
   servidor.

   ⚠️ v2 (primeira versão misturava --skin com as âncoras azuis/roxas do
   tema institucional — #121236, #0000e4, #4e4eff etc. Resultado: "verde"
   sempre saía puxando pra um verde-azulado torto, "vermelho" virava um
   vinho arroxeado — a cor escolhida nunca aparecia limpa, ficava sempre
   contaminada pelo matiz azul do tema. Agora cada tom SÓ nasce de --skin
   misturado com preto/branco (nunca com azul/roxo) — sidebar e cartão
   ficam na mesma família de matiz da cor escolhida, sem mistura entre
   cores diferentes: escuro → cor pura → claro, tudo dentro da paleta da
   própria cor.

   Os tokens saem definidos uma vez em .sb.sb-skinned (custom property
   cascateia pros filhos, inclusive dentro da media query do celular) pra
   não repetir a mesma conta de cor em cada seletor.

   ⚠️ v3: os ícones fora do estado ativo continuavam roxo-institucional
   mesmo com a skin ligada — porque .sb-item > svg, .sb-group > summary
   .sb-gico etc. (ver bloco "PADRÃO INSTITUCIONAL" acima) pintam o fundo
   do badge com var(--sb-soft)/var(--sb-hover)/var(--sb-active), e a v2
   só sobrescrevia o item ATIVO, não esses tokens em si. Redefinindo os
   três aqui (maior especificidade que ".sb" sozinho), TODO ícone da
   sidebar passa a nascer da cor escolhida de graça — sem precisar repetir
   ".sb-item > svg", ".sb-list > .sb-item > svg" etc. um por um, porque
   já são a mesma variável em cascata. Só os pontos com gradiente
   "cravado" no CSS (não uma var) continuam precisando de override
   explícito abaixo: ícone do item ativo, ícone do grupo aberto, hover e a
   versão mobile do item ativo. */
.sb.sb-skinned{
  --sb-soft:     color-mix(in srgb, var(--skin) 26%, #14141e);
  --sb-hover:    color-mix(in srgb, var(--skin) 20%, #14141e);
  --sb-active:   color-mix(in srgb, var(--skin) 42%, #0a0a14);
  --skin-bg:     color-mix(in srgb, var(--skin) 30%, #05050c);
  --skin-edge-a: color-mix(in srgb, var(--skin) 62%, black);
  --skin-edge-b: color-mix(in srgb, var(--skin) 85%, white 16%);
  --skin-icon-a: color-mix(in srgb, var(--skin) 88%, white 10%);
  --skin-icon-b: color-mix(in srgb, var(--skin) 72%, black 12%);

  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--skin) 40%, transparent), transparent 36%),
    var(--skin-bg);
}
.sb.sb-skinned .sb-profile-card{
  /* gradiente dentro da MESMA família de tom: borda escura → cor pura
     (var(--skin) sem mistura nenhuma) → borda clara. */
  background:linear-gradient(135deg, var(--skin-edge-a) 0%, var(--skin) 62%, var(--skin-edge-b) 100%);
  box-shadow:0 18px 34px -24px color-mix(in srgb, var(--skin) 65%, black);
}
.sb.sb-skinned .sb-item.on{
  background:var(--sb-active);
  color:#fff;
}
.sb.sb-skinned .sb-item.on > svg,
.sb.sb-skinned .sb-group[open] > summary .sb-gico{
  background:linear-gradient(145deg, var(--skin-icon-a), var(--skin-icon-b));
  color:#fff;
}
@media (hover:hover){
  /* sem isto, o badge do ícone "piscava" de volta pro azul institucional
     ao passar o mouse — .sb-item:hover > svg tem seu próprio gradiente
     cravado, não olha pra --sb-soft/--sb-hover. */
  .sb.sb-skinned .sb-item:hover > svg,
  .sb.sb-skinned .sb-group > summary:hover .sb-gico{
    background:linear-gradient(145deg, var(--skin-icon-a), var(--skin-icon-b));
    color:#fff;
  }
}
@media (max-width:900px){
  /* card de perfil some no dock mobile (regra já existente acima) — o
     fundo do dock em si é o que carrega a skin aqui.
     ⚠️ achado revisando com o Arthur: no desktop a sidebar tem DUAS
     camadas de cor — o --skin-bg (30%) MAIS um radial-gradient de 40%
     por cima (perto do topo) — e o mobile só tinha a camada de baixo,
     mais fraca ainda (34%). Pra cor de luminosidade baixa (o verde da
     loja, #0f7a44, já nasce escuro) 34% em cima de quase-preto rendia
     um tom tão perto do azul-marinho institucional padrão que dava pra
     jurar que "não mudou" — laranja/vermelho/azul disfarçavam o mesmo
     problema por serem mais claros de origem. Sem como repetir o
     radial-gradient num rodapé baixo e horizontal (ele foi desenhado
     pra a barra vertical alta do desktop, ia virar uma mancha num
     canto), a correção aqui é compensar subindo a mistura pra 50% e
     trocando a âncora de #05050c (quase preto puro) pra #0d0d18 (um
     fio mais claro) — dá o mesmo respiro de cor que o desktop tem só
     que numa camada só. */
  .sb.sb-skinned{
    --sb-mobile-bg:color-mix(in srgb, var(--skin) 50%, #0d0d18);
    background:var(--sb-mobile-bg);
  }
  .sb.sb-skinned .sb-nav > .sb-item.on > svg,
  .sb.sb-skinned .sb-group[open] > summary > .sb-gico,
  .sb.sb-skinned .sb-list > .sb-item.on > svg{
    background:linear-gradient(145deg, var(--skin-icon-a), var(--skin-icon-b)) !important;
    color:#fff !important;
  }
}