/* Lapidação Escuro Premium — ENEM Platform
   Carrega depois de redesign.css e de direcao.css.
   Só forma: nenhuma regra aqui muda função, id ou dado. */

/* ── 1. Liga a base de cores da direção nas variáveis que o sistema já usa ── */
:root{
  --bg:var(--cor-fundo);
  --bg2:var(--cor-superficie);
  --bg3:var(--cor-superficie-2);
  --surface:var(--cor-superficie);
  --surface2:var(--cor-superficie-2);
  --surface3:var(--cor-superficie-3);
  --text:var(--cor-texto);
  --text2:var(--cor-texto-2);
  --text3:var(--cor-texto-3);
  --border:var(--cor-borda);
  --border2:var(--cor-borda-forte);
  --accent:var(--cor-marca);
  --accent2:var(--cor-acento);
  --accent-glow:var(--lap-marca-luz,rgba(91,143,255,.16));
  --green:var(--cor-sucesso);
  --amber:var(--cor-alerta);
  --red:var(--cor-perigo);
  --font:'Geist','Inter',system-ui,sans-serif;
  --font-display:'Geist','Inter',system-ui,sans-serif;
  --font-mono:'Geist Mono',ui-monospace,monospace;
}
body{font-family:var(--font)}

/* ── 2. Cor: sai o degradê de IA e o texto pintado ── */
/* botão principal sólido com luz em cima e anel (direcao.md §7) */
.btn-primary,.welcome-panel .btn-primary{
  background:var(--cor-marca)!important;
  color:var(--cor-marca-texto)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 0 0 1px var(--lap-marca-funda,rgba(0,0,0,.35)),0 2px 6px -2px rgba(0,0,0,.6)!important;
  font-weight:600;
}
.btn-primary:hover,.welcome-panel .btn-primary:hover{
  background:var(--cor-marca-hover,var(--cor-acento))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 0 0 1px var(--lap-marca-funda,rgba(0,0,0,.35)),0 6px 18px -6px var(--lap-marca-brilho,rgba(91,143,255,.5))!important;
  transform:none!important;
}
/* texto com degradê → cor sólida */
#dash-taxa-big{
  background:none!important;-webkit-text-fill-color:currentColor!important;
  color:var(--cor-texto)!important;
}
.welcome-panel h2 em{color:var(--cor-acento);font-style:normal}
/* o logo ganha o degradê interno da marca (é o lugar certo dele) */
.s-mark{
  background:linear-gradient(160deg,var(--lap-marca-clara,#8aabff),var(--cor-marca) 52%,var(--lap-marca-funda,#2f5ab8))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 6px 16px -8px var(--lap-marca-brilho,rgba(91,143,255,.5))!important;
}

/* ── 3. Tipografia: contraste de tamanho e rótulos em mono ── */
.overview-heading{align-items:flex-end;margin-bottom:32px}
.lap-titulo-tela{
  font-size:56px;line-height:60px;font-weight:300;letter-spacing:-.04em;
  color:var(--cor-texto);margin:0;
}
.lap-titulo-tela .lap-apagado{color:var(--cor-texto-3);font-weight:300}
.dash-saudacao-linha{
  font-family:var(--font-mono);font-size:12px;line-height:16px;
  color:var(--cor-texto-3);margin:0 0 8px;letter-spacing:0;
}
.overview-heading p{font-size:13px;color:var(--cor-texto-3);margin-top:8px}
.date-chip{
  font-family:var(--font-mono);font-size:12px;color:var(--cor-texto-3);
  border:1px solid var(--cor-borda);border-radius:8px;padding:8px 12px;
}
/* rótulos pequenos do mesmo tipo, todos em mono 12 */
.stat-top span,.stat-foot,.goal-summary,.event-meta,.event-time,.shortcut small,.page-footnote,.search-count,kbd{
  font-family:var(--font-mono);font-size:12px;letter-spacing:0;
}
.stat-foot,.page-footnote{color:var(--cor-texto-3)}
/* sai a CAIXA ALTA espaçada */
.eyebrow{
  font-family:var(--font-mono);font-size:12px;font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--cor-acento);margin-bottom:12px;
}
.nav-group summary,.s-sec-label{
  font-family:var(--font-mono);font-size:12px;font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--cor-texto-3);
}

/* ── 4. Superfícies: borda de luz + sombra física (direcao.md §5) ── */
.card,.stat-tile,.shortcut,.today-event{
  background:var(--cor-superficie);
  border:1px solid var(--lap-luz-6,rgba(255,255,255,.06));
  border-radius:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 1px 0 var(--lap-breu-35,rgba(0,0,0,.35)),0 18px 36px -18px var(--lap-breu-70,rgba(0,0,0,.7));
  position:relative;
}
.card::before,.stat-tile::before,.shortcut::before{
  content:'';position:absolute;left:12%;right:12%;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--lap-luz-16,rgba(255,255,255,.16)),transparent);
}
.shortcut:hover{transform:none;border-color:var(--cor-borda-forte)}
.shortcut:hover::before{background:linear-gradient(90deg,transparent,var(--lap-luz-42,rgba(255,255,255,.3)),transparent)}
/* item ativo do menu: levantado, não bloco saturado */
.n.active{
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035))!important;
  border-color:var(--cor-borda-forte)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 2px rgba(0,0,0,.5)!important;
  color:var(--cor-texto)!important;
}
.n.active svg{color:var(--cor-acento)}
/* campos afundados */
.input,.select,.textarea,.inp,.sel,.search-trigger{
  background:var(--cor-superficie-2);
  box-shadow:inset 0 1px 2px var(--lap-breu-35,rgba(0,0,0,.35));
}

/* ── 5. Espaço na escala de 4 (a régua acusou 27 vãos diferentes) ── */
.main{padding:0 32px 40px}
.shell-header{height:88px;gap:16px;margin-bottom:24px}
.welcome-panel{padding:32px;gap:32px;margin-bottom:24px;min-height:208px}
.stats-row{gap:16px;margin-bottom:28px}
.stat-tile{padding:20px}
.stat-value{margin:12px 0 4px}
.home-grid{gap:20px;margin-bottom:28px}
.card{padding:24px}
.section-head{margin-bottom:20px}
.shortcut-grid{gap:16px;margin-bottom:28px}
.shortcut{padding:20px;gap:12px}
.charts-grid{gap:20px}
.today-list{gap:8px}
.today-event{padding:12px}
.s-nav{padding:4px 16px}
.n{margin:4px 0;padding:12px;min-height:44px;gap:12px}
.nav-group{margin:20px 0}
.s-logo{padding:28px 24px 24px;gap:12px}

/* ── 6. Herói: luz da marca, grão e o objeto 3D (direcao.md §8.1) ── */
.welcome-panel{
  border:1px solid var(--lap-luz-6,rgba(255,255,255,.06));
  border-radius:20px;
  background:var(--cor-superficie);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 1px 0 var(--lap-breu-35,rgba(0,0,0,.35)),0 18px 36px -18px var(--lap-breu-70,rgba(0,0,0,.7));
  overflow:hidden;position:relative;
}
.welcome-panel::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(240px 170px at 72% 46%,var(--lap-marca-luz,rgba(91,143,255,.17)),transparent 70%);
}
.welcome-panel::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.welcome-panel>div{position:relative;z-index:1}
.welcome-panel h2{font-size:32px;line-height:1.18;font-weight:300;letter-spacing:-.03em;max-width:430px}
.welcome-panel p{font-size:13px;color:var(--cor-texto-2);margin:12px 0 24px}

/* ── 7. Números dos cartões (direcao.md §6) ── */
.stat-value{
  font-size:36px;line-height:44px;font-weight:500;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;color:var(--cor-texto);
}
/* a cor viva fica nos dados (gráfico, categorias), não em 4 números iguais */
#dash-horas-val,#dash-q-val,#dash-sim-val{color:var(--cor-texto)}
.stat-top svg{width:16px;height:16px;color:var(--cor-texto-3);stroke-width:1.75}

/* ── 8. Estado vazio com ofício, em vez de caixa vazia ── */
.lap-vazio-mini{
  display:grid;justify-items:center;gap:8px;padding:28px 16px;text-align:center;
  border:1px dashed var(--cor-borda-forte);border-radius:12px;
}
.lap-vazio-mini .lap-vazio-placas{
  position:relative;width:64px;height:44px;margin-bottom:4px;
}
.lap-vazio-mini .lap-vazio-placa{
  position:absolute;inset:0;border-radius:8px;
  background:linear-gradient(145deg,var(--cor-superficie-3),var(--cor-superficie-2));
  border:1px solid var(--lap-luz-6,rgba(255,255,255,.08));
  box-shadow:0 6px 14px -8px rgba(0,0,0,.8);
}
.lap-vazio-mini .lap-vazio-placa:nth-child(1){transform:translate(-8px,6px) rotate(-8deg);opacity:.55}
.lap-vazio-mini .lap-vazio-placa:nth-child(2){transform:translate(6px,0) rotate(5deg)}
.lap-vazio-mini .lap-vazio-placa:nth-child(2)::after{
  content:'';position:absolute;left:10px;right:10px;top:14px;height:2px;border-radius:2px;
  background:var(--cor-acento);opacity:.5;
}
.lap-vazio-mini strong{font-size:13px;font-weight:500;color:var(--cor-texto)}
.lap-vazio-mini p{font-family:var(--font-mono);font-size:12px;color:var(--cor-texto-3);max-width:260px;line-height:1.6}

/* ── 9. Movimento sutil ── */
@media(prefers-reduced-motion:no-preference){
  .lap-objeto3d .lap-pilha{animation:lapFlutua 9s ease-in-out infinite alternate}
  @keyframes lapFlutua{from{transform:translateY(0) rotate(-1.5deg)}to{transform:translateY(-3px) rotate(1.5deg)}}
}

/* ── 10. Celular (direcao.md §12) ── */
@media(max-width:768px){
  .main{padding:0 20px calc(95px + env(safe-area-inset-bottom))}
  .lap-titulo-tela{font-size:40px;line-height:44px}
  .stat-value{font-size:30px;line-height:36px}
  .welcome-panel{padding:24px;gap:20px}
  .welcome-panel h2{font-size:28px}
  /* o objeto 3D desce para o canto em vez de sumir */
  .welcome-art{display:flex!important;min-height:120px;margin-top:4px}
  .welcome-panel{grid-template-columns:1fr}
  .stats-row{gap:12px}
  .stat-tile{padding:16px}
  .card{padding:20px}
}
@media(max-width:380px){
  .lap-titulo-tela{font-size:34px;line-height:38px}
}

/* ── 11. O estado vazio que o sistema já tem, com acabamento 3D ── */
.empty-home{
  border:1px dashed var(--cor-borda-forte);border-radius:12px;
  padding:28px 20px;gap:10px;
}
.empty-home>.ui-icon{
  width:40px;height:40px;color:var(--cor-acento);
  padding:9px;border-radius:10px;
  background:linear-gradient(145deg,var(--cor-superficie-3),var(--cor-superficie-2));
  border:1px solid var(--lap-luz-6,rgba(255,255,255,.08));
  box-shadow:0 8px 18px -10px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.1);
  transform:rotate(-6deg);
}
.empty-home strong{font-size:13px;font-weight:500;color:var(--cor-texto)}
.empty-home p{font-family:var(--font-mono);font-size:12px;color:var(--cor-texto-3);line-height:1.6}

/* ── 12. Correções da conferência da amostra ──────────────────────
   O título perdia em especificidade para .overview-heading h1 (30px/600). */
.overview-heading h1.lap-titulo-tela{
  font-size:56px;line-height:60px;font-weight:300;letter-spacing:-.04em;
  color:var(--cor-texto);
}
.overview-heading h1.lap-titulo-tela .lap-apagado{
  color:var(--cor-texto-3);font-weight:300;
}
@media(max-width:768px){
  .overview-heading h1.lap-titulo-tela{font-size:40px;line-height:44px}
}
@media(max-width:380px){
  .overview-heading h1.lap-titulo-tela{font-size:34px;line-height:38px}
}

/* Cor viva: a luz da marca nas peças que têm papel (direcao.md §9.3/9.4),
   nunca pintando texto nem borda de cartão. */
.welcome-panel::before{
  background:
    radial-gradient(260px 185px at 74% 48%,
      color-mix(in oklab,var(--cor-marca) 26%,transparent),transparent 72%),
    radial-gradient(520px 320px at 8% 0%,
      color-mix(in oklab,var(--cor-marca) 10%,transparent),transparent 70%);
}
/* o chão e a aresta do metal recebem a marca (a peça de profundidade da tela) */
.welcome-art .lap-chao{
  background:radial-gradient(60% 50% at 50% 50%,
    color-mix(in oklab,var(--cor-marca) 42%,transparent),transparent 72%)!important;
  filter:blur(10px);opacity:.75;
}
.welcome-art .lap-face-falsa--marca{
  background:var(--cor-marca)!important;
  box-shadow:0 0 10px color-mix(in oklab,var(--cor-marca) 55%,transparent);
}
.welcome-art .lap-espessura{
  background:linear-gradient(180deg,
    color-mix(in oklab,var(--cor-marca) 38%,transparent),
    color-mix(in oklab,var(--cor-marca) 10%,transparent))!important;
}
/* o ícone do item ativo do menu na marca (seção 4.2) */
.n.active svg{color:var(--cor-marca)}

/* ── 13. O dia não pode sumir no celular ──
   O título leva só mês e ano; a etiqueta da data é quem carrega o dia.
   O redesign a escondia abaixo de 1180px, deixando o dia sem nenhuma forma. */
@media(max-width:1180px){
  .date-chip{display:inline-block}
}
@media(max-width:768px){
  .overview-heading{flex-direction:column;align-items:flex-start;gap:12px}
  .date-chip{padding:6px 10px}
}

/* ── 14. Uma grossura a menos ──
   O "E" do logo era o único peso 800 da tela; 700 deixa o conjunto em
   cinco grossuras (300/400/500/600/700) sem diferença visível. */
.s-mark{font-weight:700}

/* ── 15. Ícones que substituíram emoji (uma família, 16px, traço 1,75) ── */
.lap-ic{width:16px;height:16px;vertical-align:-3px;margin-right:2px;flex-shrink:0}
.s-btn .lap-ic{margin-right:0}
.lap-ic--bene{width:16px;height:16px;color:var(--cor-acento)}

/* ── 16. Cores por área do ENEM (direcao.md §4.3) ─────────────────
   Antes: 11 matérias dividiam 5 cores e havia repetição — Português e
   Geografia saíam idênticas num gráfico. Agora cada área do ENEM tem
   uma cor fixa, na ordem das categorias, igual em toda a plataforma.
   O !important é necessário: o --c vem no atributo style de cada item. */
.disc-chip[data-slug="portugues"],
.disc-chip[data-slug="ingles"]      { --c:var(--cor-cat-1)!important } /* Linguagens */
.disc-chip[data-slug="historia"],
.disc-chip[data-slug="geografia"],
.disc-chip[data-slug="filosofia"],
.disc-chip[data-slug="sociologia"]  { --c:var(--cor-cat-2)!important } /* Humanas */
.disc-chip[data-slug="fisica"],
.disc-chip[data-slug="quimica"],
.disc-chip[data-slug="biologia"]    { --c:var(--cor-cat-3)!important } /* Natureza */
.disc-chip[data-slug="matematica"]  { --c:var(--cor-cat-4)!important } /* Matemática */
.disc-chip[data-slug="redacao"]     { --c:var(--cor-cat-5)!important } /* Redação */

/* A grade de matérias é a peça principal desta tela: cada item vira um
   cartão com a bolinha viva da área, acabamento e estado selecionado. */
.disc-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px;
}
.disc-chip{
  display:flex;align-items:center;gap:12px;
  padding:16px;border-radius:12px;cursor:pointer;
  background:var(--cor-superficie);
  border:1px solid var(--lap-luz-6,rgba(255,255,255,.06));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 1px 0 var(--lap-breu-35,rgba(0,0,0,.35));
  font-size:13px;font-weight:500;color:var(--cor-texto-2);
  transition:border-color .15s,color .15s,background .15s;position:relative;
}
.disc-chip::before{
  content:'';width:10px;height:10px;border-radius:50%;flex-shrink:0;
  background:var(--c);
  box-shadow:0 0 0 3px color-mix(in oklab,var(--c) 16%,transparent),
             0 0 8px color-mix(in oklab,var(--c) 55%,transparent);
}
.disc-chip:hover{color:var(--cor-texto);border-color:var(--cor-borda-forte)}
.disc-chip.active,.disc-chip.sel,.disc-chip[aria-pressed="true"]{
  color:var(--cor-texto);
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
  border-color:var(--cor-borda-forte);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 2px rgba(0,0,0,.5);
}

/* ── 17. Título de tela em 56/300 (direcao.md §6 e §14.1) ──
   Vale para as páginas internas; o Início usa .lap-titulo-tela. */
.topbar .page-title{
  font-size:56px;line-height:60px;font-weight:300;letter-spacing:-.04em;
  color:var(--cor-texto);
}
.topbar .page-sub{font-size:13px;color:var(--cor-texto-3);margin-top:10px}
.topbar{margin-bottom:32px}
@media(max-width:768px){
  .topbar .page-title{font-size:40px!important;line-height:44px}
}
@media(max-width:380px){
  .topbar .page-title{font-size:34px!important;line-height:38px}
}
/* O calendário tem barra própria no topo, não usa .page-title. */

/* ── 18. Calendário: título de contexto, hoje com a luz da marca ──
   É tela de colunas, então o título vai em 24/300 (direcao.md §6),
   não nos 56 das páginas de uma coluna. */
#cal-topbar-title{
  font-family:var(--font);font-size:24px;line-height:32px;
  font-weight:300;letter-spacing:-.02em;color:var(--cor-texto);
}
#cal-topbar-title .lap-apagado{color:var(--cor-texto-3)}
/* o dia de hoje é o "agora" desta tela: ganha a luz da marca */
.month-cell.today{
  background:
    radial-gradient(120% 90% at 50% 0%,
      color-mix(in oklab,var(--cor-marca) 16%,transparent),transparent 72%),
    var(--cor-superficie-2);
  box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--cor-marca) 38%,transparent);
}
.month-cell.today .cell-date{
  background:var(--cor-marca);color:var(--cor-marca-texto);font-weight:600;
  box-shadow:0 0 10px color-mix(in oklab,var(--cor-marca) 55%,transparent);
}
/* bolinha de categoria com luz interna e halo (direcao.md §7) */
.cat-dot{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),
             0 0 0 3px color-mix(in oklab,currentColor 10%,transparent);
}
.cat-item .cat-dot{color:inherit}
/* abas de visão: trilho afundado, ativa levantada — não bloco saturado */
.cal-view-tab.active{
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.045))!important;
  color:var(--cor-texto)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(0,0,0,.55)!important;
}

/* ── 19. Histórico e listas: a cor vem da área da matéria ──
   As barras já recebem a cor da disciplina no atributo style; aqui elas
   ganham o acabamento (ponta acesa) que a direção pede para dado. */
.bar-fill,.prog-fill{
  box-shadow:0 0 8px color-mix(in oklab,currentColor 45%,transparent);
  border-radius:4px;
}
.bar-track,.prog-track{
  background:var(--cor-superficie-2);
  box-shadow:inset 0 1px 2px var(--lap-breu-35,rgba(0,0,0,.35));
}
.bar-label{font-size:13px;color:var(--cor-texto-2)}
.bar-val{font-family:var(--font-mono);font-size:12px;color:var(--cor-texto-3)}

/* ── 20. Correções finais ────────────────────────────────────────
   O título do calendário trazia font-size e weight no atributo style. */
#cal-topbar-title{
  font-size:24px!important;line-height:32px!important;
  font-weight:300!important;letter-spacing:-.02em!important;
}

/* O histórico escreve o estado vazio como um div com estilo embutido.
   Aqui ele ganha o mesmo acabamento dos outros vazios do sistema. */
#hist-sessoes>div[style],#hist-questoes>div[style],
#disc-sugg:only-child,#metas-grid>p{
  display:grid!important;justify-items:center;gap:10px;
  border:1px dashed var(--cor-borda-forte);border-radius:12px;
  padding:28px 20px!important;
  font-family:var(--font-mono);font-size:12px!important;
  color:var(--cor-texto-3)!important;line-height:1.6;
}
#hist-sessoes>div[style]::before,#hist-questoes>div[style]::before{
  content:'';width:40px;height:40px;border-radius:10px;
  background:
    linear-gradient(145deg,var(--cor-superficie-3),var(--cor-superficie-2));
  border:1px solid var(--lap-luz-6,rgba(255,255,255,.08));
  box-shadow:0 8px 18px -10px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.1);
  transform:rotate(-6deg);
  background-image:
    linear-gradient(145deg,var(--cor-superficie-3),var(--cor-superficie-2)),
    linear-gradient(var(--cor-acento),var(--cor-acento));
  background-size:100% 100%,18px 2px;
  background-position:0 0,11px 17px;
  background-repeat:no-repeat,no-repeat;
}

/* ── 21. Vazio do histórico com peça 3D de verdade ──
   Com o perfil sem sessões, a tela só tem o estado vazio: é ele que
   carrega a profundidade e a cor da marca (direcao.md §8.7). */
#hist-sessoes>div[style]::before,#hist-questoes>div[style]::before{
  width:72px;height:52px;border-radius:10px;
  background:
    linear-gradient(150deg,
      color-mix(in oklab,var(--cor-marca) 26%,var(--cor-superficie-3)),
      var(--cor-superficie-2) 62%);
  background-size:auto;background-position:0 0;background-repeat:no-repeat;
  box-shadow:
    0 10px 22px -12px rgba(0,0,0,.9),
    inset 0 1px 0 rgba(255,255,255,.14),
    6px 7px 0 -2px color-mix(in oklab,var(--cor-superficie-2) 92%,transparent),
    0 14px 26px -16px color-mix(in oklab,var(--cor-marca) 60%,transparent);
  position:relative;
}
#hist-sessoes>div[style]::after,#hist-questoes>div[style]::after{
  content:'';position:absolute;width:30px;height:3px;border-radius:2px;
  background:var(--cor-marca);
  box-shadow:0 0 10px color-mix(in oklab,var(--cor-marca) 70%,transparent);
  transform:translate(-14px,-24px) rotate(-6deg);
}
#hist-sessoes>div[style],#hist-questoes>div[style]{position:relative}

/* ── 22. Módulo de Mapas Mentais e sobras globais ────────────────
   O degradê fica só nas peças de ofício (logo, herói, dado). Avatar,
   capa de cartão e cartão de número passam a fundo liso. */
.u-av,#nav-avatar.u-av{
  background:var(--cor-superficie-3)!important;
  color:var(--cor-texto)!important;
  font-weight:600!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
}
.mm-hero{
  background:var(--cor-superficie)!important;
  border:1px solid var(--lap-luz-6,rgba(255,255,255,.06));
}
.mm-hero::before{
  background:radial-gradient(260px 180px at 86% 18%,
    color-mix(in oklab,var(--cor-marca) 20%,transparent),transparent 70%)!important;
}
.mm-card-preview{
  background:var(--cor-superficie-2)!important;
}
.mm-stat-card{
  background:var(--cor-superficie);
  border:1px solid var(--lap-luz-6,rgba(255,255,255,.06));
  padding:16px;
}
/* contraste: texto branco sobre a marca dava 3,08:1 (mínimo 4,5:1) */
.mm-btn-primary,.mm-chip.active,.btn-primary{
  color:var(--cor-marca-texto)!important;
}
.mm-btn-primary{background:var(--cor-marca)!important}
.mm-btn-primary:hover{background:var(--cor-marca-hover,var(--cor-acento))!important;box-shadow:none!important}
.mm-chip.active{background:var(--cor-marca)!important;border-color:var(--cor-marca)!important}

/* ── 23. Caixa alta espaçada: sai de todos os rótulos ── */
.s-sub,.mm-stat-label,.stat-label,.mm-card-materia,
.perfil-section-title,.s-section-label,.card-title{
  text-transform:none!important;
  letter-spacing:0!important;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--cor-texto-3);
}
.card-title{font-family:var(--font);font-size:13px;font-weight:600;color:var(--cor-texto)}
.s-sub{font-size:11px}

/* ── 24. Espaços do módulo de mapas na escala de 4 ── */
.mm-stat-card{padding:16px}
.mm-toolbar{gap:12px;margin-bottom:16px}
.mm-chip{padding:8px 12px}
.mm-card-body{padding:12px}
.mm-hero{padding:24px;margin-bottom:20px}
.mm-stats-row{gap:12px;margin-bottom:24px}
.u-card{padding:12px 8px;gap:12px}
.breadcrumb{row-gap:12px}
.nav-group summary{padding:8px 12px}

/* ── 25. Telas vazias carregam a cor da marca ─────────────────────
   Com o perfil novo, Metas, Histórico e a agenda só têm o estado
   vazio: é ele que precisa ter a profundidade e o ponto de cor
   (direcao.md §8.7 e §14.8). */
.empty-home>.ui-icon{
  width:56px;height:56px;padding:13px;border-radius:12px;
  color:var(--cor-marca);
  background:linear-gradient(150deg,
    color-mix(in oklab,var(--cor-marca) 24%,var(--cor-superficie-3)),
    var(--cor-superficie-2) 64%);
  border:1px solid color-mix(in oklab,var(--cor-marca) 24%,transparent);
  box-shadow:
    0 12px 24px -14px rgba(0,0,0,.9),
    inset 0 1px 0 rgba(255,255,255,.16),
    0 14px 28px -18px color-mix(in oklab,var(--cor-marca) 65%,transparent);
  transform:rotate(-6deg);
}
.empty-home .text-btn{color:var(--cor-acento);font-weight:500}

/* ── 26. Últimos espaços fora da grade de 4 px ── */
.btn,.btn-primary,.btn-ghost,.btn-danger{gap:8px;padding:12px 16px}
.btn-sm{padding:8px 12px;gap:8px}
.text-btn{padding:8px 0;gap:8px}
.search-trigger{padding:8px 12px;gap:8px}
kbd{padding:4px 6px;margin-left:16px}
.empty-home>.ui-icon{padding:12px}
.shell-header{gap:16px}
.breadcrumb{gap:12px}
.mm-chip{padding:8px 12px}

/* ── 27. Luz ambiente sem borda reta ──────────────────────────────
   Pintada no fundo da página, a elipse era cortada pela caixa e virava
   um retângulo azulado. Agora mora numa camada maior que a página e
   se apaga por inteiro antes de chegar nas bordas dela. */
#page-dashboard{background-image:none!important;position:relative;isolation:isolate}
#page-dashboard::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  top:-200px;left:-32px;right:-32px;height:600px;
  background-image:
    radial-gradient(ellipse 36% 50% at 30% 50%,
      color-mix(in oklab,var(--cor-marca) 16%,transparent),transparent 100%),
    radial-gradient(ellipse 34% 50% at 66% 42%,
      color-mix(in oklab,var(--cor-marca) 8%,transparent),transparent 100%);
}
@media(max-width:768px){
  #page-dashboard::before{
    top:-160px;left:-20px;right:-20px;height:480px;
    background-image:radial-gradient(ellipse 50% 50% at 50% 50%,
      color-mix(in oklab,var(--cor-marca) 18%,transparent),transparent 100%);
  }
}

/* ── 28. A peça 3D fica em toda largura ───────────────────────────
   O redesign a escondia até 960px e uma regra anterior até 380px. */
@media(max-width:960px){
  .welcome-art{display:flex!important;min-height:120px;margin-top:4px}
}

/* ── 29. Login e tela de carregamento no mesmo visual ─────────────
   Os estilos vêm no atributo style e o redesign usa !important, por
   isso o seletor com body e o !important aqui. Nenhum id ou ação muda. */
body #login-overlay{
  background:
    radial-gradient(ellipse 560px 340px at 50% 16%,
      color-mix(in oklab,var(--cor-marca) 14%,transparent),transparent 100%),
    var(--cor-fundo)!important;
}
#login-overlay,#login-overlay *,#splash,#splash *{font-family:var(--font)!important}
body #login-overlay>div{
  background:var(--cor-superficie)!important;
  border:1px solid var(--lap-luz-6,rgba(255,255,255,.08))!important;
  border-radius:20px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 1px 0 var(--lap-breu-35,rgba(0,0,0,.35)),0 24px 64px -16px var(--lap-breu-70,rgba(0,0,0,.7))!important;
  padding:40px!important;
}
/* o logo igual ao do menu */
#login-overlay>div>div:first-child>div:first-child,
#splash>div:first-child{
  background:linear-gradient(160deg,var(--lap-marca-clara,#8aabff),var(--cor-marca) 52%,var(--lap-marca-funda,#2f5ab8))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 8px 20px -8px var(--lap-marca-brilho,rgba(91,143,255,.5))!important;
  font-weight:600!important;
}
#login-overlay h1{
  font-size:24px!important;font-weight:400!important;letter-spacing:-.02em!important;
  color:var(--cor-texto)!important;
}
#login-overlay>div>div:first-child>p{color:var(--cor-texto-3)!important}
/* a lista de benefícios afundada, com texto legível */
#login-overlay>div>div:nth-child(2){
  background:var(--cor-fundo)!important;
  box-shadow:inset 0 1px 2px var(--lap-breu-50,rgba(0,0,0,.5));
}
#login-overlay>div>div:nth-child(2)>div{color:var(--cor-texto-2)!important}
/* Google é o secundário: um só botão principal por área */
body #login-overlay #login-btn{
  background:var(--cor-superficie-2)!important;
  color:var(--cor-texto)!important;
  border:1px solid var(--cor-borda-forte)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important;
  transform:none!important;
  font-size:14px!important;font-weight:600!important;
}
body #login-overlay #login-btn:hover{background:var(--cor-superficie-3)!important}
#login-overlay>div>div:nth-child(4) span{color:var(--cor-texto-3)!important;font-weight:400!important}
/* Continuar: o botão principal, sólido */
body #login-overlay #email-continue-btn{
  background:var(--cor-marca)!important;
  color:var(--cor-marca-texto)!important;
  border-radius:10px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 0 0 1px var(--lap-marca-funda,rgba(0,0,0,.35)),0 2px 6px -2px rgba(0,0,0,.6)!important;
  transform:none!important;
  font-size:14px!important;
}
body #login-overlay #email-continue-btn:hover{background:var(--cor-marca-hover,var(--cor-acento))!important}
/* campos afundados, com anel de foco */
body #login-overlay #login-email,body #login-overlay #login-password{
  background:var(--cor-superficie-2)!important;
  color:var(--cor-texto)!important;
  box-shadow:inset 0 1px 2px var(--lap-breu-50,rgba(0,0,0,.5))!important;
}
body #login-overlay #login-email:focus,body #login-overlay #login-password:focus{
  box-shadow:inset 0 1px 2px var(--lap-breu-50,rgba(0,0,0,.5)),0 0 0 3px color-mix(in oklab,var(--cor-foco,var(--cor-marca)) 28%,transparent)!important;
}
#login-overlay>div>p:last-child{font-size:12px!important;color:var(--cor-texto-3)!important}
/* carregando */
body #splash{background:var(--cor-fundo)!important}
#splash>div:nth-child(2){color:var(--cor-texto)!important;letter-spacing:-.01em!important}
#splash>div:nth-child(3){color:var(--cor-texto-3)!important}
#splash>div:nth-child(4){background:var(--cor-superficie-2)!important}
#splash-bar{background:var(--cor-marca)!important}
@media(max-width:768px){
  body #login-overlay>div{padding:28px 24px!important}
  #login-email,#login-password{font-size:16px!important}
}

/* ── 30. Logo do menu inteiro e luz atrás da peça ─────────────────
   A classe lap-logo encolhe o quadrado para 24px: o "E" do menu ficava
   cortado. Abaixo de 960px a peça 3D desce, e a luz desce com ela. */
.s-mark.lap-logo{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;line-height:1;font-weight:700;overflow:hidden;
  color:#fff;
}
@media(max-width:960px){
  .welcome-panel::before{
    background:
      radial-gradient(260px 185px at 68% 82%,
        color-mix(in oklab,var(--cor-marca) 26%,transparent),transparent 72%),
      radial-gradient(420px 260px at 8% 0%,
        color-mix(in oklab,var(--cor-marca) 8%,transparent),transparent 70%);
  }
}