/* =========================================================
   Ponte Brasil — folha de estilo principal
   Paleta oficial da marca:
     petróleo #1F4E5F · jade #4F8A7A · creme #F7F4EE
     dourado  #C8A24A · coral #E36C5A
   ========================================================= */

:root{
  /* rodada 11, item 3.3: o site é claro por padrão. "only light" também
     impede o modo escuro forçado do navegador (Chrome/Android) */
  color-scheme:only light;
  /* --- cores da marca --- */
  --petrol:#1F4E5F;  --petrol-d:#143843;  --petrol-l:#E6EDEF;
  --jade:#4F8A7A;    --jade-d:#3C6B5E;    --jade-l:#E6F0EC;
  --gold:#C8A24A;    --gold-d:#A6842F;    --gold-l:#F7F0DF;
  --coral:#E36C5A;   --coral-d:#C4523F;   --coral-l:#FBEAE6;
  --cream:#F7F4EE;   --cream-d:#EDE7DB;
  --seal:#C8362A;
  /* Rodada 11, item 5: cores para associação por cor — sem coral (erro) e sem jade (acerto) */
  --violet:#6B5CA5; --violet-d:#564898; --violet-l:#EEE9F8;
  --amber:#C87830;  --amber-d:#A55D20;  --amber-l:#FBF2E5;

  /* --- superfícies --- */
  --bg:var(--cream);
  --surface:#FFFFFF;
  --surface-2:#FDFBF7;
  --line:#E6DFD2;
  --ink:#1F2A2E;
  --ink-2:#5C6B70;
  --ink-3:#8D9A9E;
  --on-petrol:#FFFFFF;
  --heading:var(--petrol);

  /* --- forma --- */
  --r:18px; --r-sm:12px; --r-lg:26px;
  --shadow:0 1px 2px rgba(31,78,95,.05), 0 8px 24px -14px rgba(31,78,95,.22);
  --shadow-lg:0 2px 8px rgba(31,78,95,.07), 0 28px 56px -24px rgba(31,78,95,.32);
  --topbar-h:74px;
  --font:"Outfit","Noto Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --rainbow:linear-gradient(90deg,var(--coral) 0%,#E8A33D 25%,var(--gold) 45%,var(--jade) 70%,var(--petrol) 100%);
}

/* Tema escuro — rodada 8
   Os balões e cartões de explicação ficavam quase da cor do fundo:
   lendo à noite, o texto parecia flutuar num borrão só. O fundo desceu
   um tom e as superfícies subiram para um AZUL MAIS CLARO (a mesma
   família petróleo da marca), então cada cartão se destaca sem que o
   tema deixe de ser escuro. */
[data-theme="dark"]{
  color-scheme:only dark;
  --bg:#0D171C;
  --surface:#20394A;
  --surface-2:#28455A;
  --line:#3B5E73;
  --ink:#F0F5F5;
  --ink-2:#B7C8CE;
  --ink-3:#8DA1A9;
  --cream:#0D171C;
  --cream-d:#28455A;
  --petrol-l:#264A5E;
  --jade-l:#1F3F38;
  --gold-l:#3D3420;
  --coral-l:#452B26;
  --violet-l:#201840;
  --amber-l:#3A2408;
  --heading:#9AD3C9;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -14px rgba(0,0,0,.7);
  --shadow-lg:0 2px 8px rgba(0,0,0,.45), 0 28px 56px -24px rgba(0,0,0,.8);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;font-size:calc(100% * var(--fs, 1))}
/* rodada 9: no celular o tamanho da letra tem teto menor (ver config.js) */
@media (max-width:480px){ html{font-size:calc(100% * min(var(--fs, 1), var(--fs-phone-max, 1.15)))} }
body{
  margin:0;font-family:var(--font);background:var(--bg);color:var(--ink);
  line-height:1.55;-webkit-font-smoothing:antialiased;
  transition:background .3s var(--ease),color .3s var(--ease);
}
body.lang-zh{font-family:"Noto Sans SC","Outfit",system-ui,sans-serif}
h1,h2,h3,h4{margin:0 0 .4em;line-height:1.2;letter-spacing:-.02em;color:var(--heading)}
h1{font-size:clamp(1.55rem,4vw,2.3rem);font-weight:800}
h2{font-size:clamp(1.2rem,2.6vw,1.5rem);font-weight:700}
h3{font-size:1.05rem;font-weight:700}
p{margin:0 0 1em}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
[hidden]{display:none !important}
.is-hidden{display:none !important}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:6px}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  border:1.5px solid transparent;border-radius:999px;padding:.7em 1.4em;
  font-weight:600;font-size:.95rem;background:var(--surface);color:var(--ink);
  transition:transform .15s var(--ease),box-shadow .2s,background .2s,opacity .2s,border-color .2s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn:disabled,.btn.is-disabled{opacity:.45;cursor:not-allowed}
.btn:disabled:hover,.btn.is-disabled:hover{transform:none}
.btn-coral{background:var(--coral);color:#fff;box-shadow:0 8px 20px -10px var(--coral)}
.btn-coral:hover{background:var(--coral-d)}
.btn-jade{background:var(--jade);color:#fff;box-shadow:0 8px 20px -10px var(--jade)}
.btn-jade:hover{background:var(--jade-d)}
.btn-petrol{background:var(--petrol);color:#fff;box-shadow:0 8px 20px -10px var(--petrol)}
.btn-petrol:hover{background:var(--petrol-d)}
.btn-gold{background:var(--gold);color:#3A2B00;box-shadow:0 8px 20px -10px var(--gold)}
.btn-gold:hover{background:var(--gold-d);color:#fff}
.btn-outline{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-outline:hover{border-color:var(--jade);color:var(--jade)}
.btn-ghost{background:transparent;color:var(--ink-2)}
.btn-ghost:hover{background:var(--cream-d);color:var(--ink)}
.btn-danger{background:var(--coral-l);color:var(--coral-d);border-color:rgba(227,108,90,.3)}
.btn-danger:hover{background:var(--coral);color:#fff}
.btn-sm{padding:.48em 1em;font-size:.85rem}
.btn-lg{padding:.9em 1.8em;font-size:1.02rem}
.btn-block{width:100%}

/* ---------- seletor de idioma ---------- */
.lang-switch{
  position:relative;display:flex;padding:3px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--line);flex:none;
}
.lang-opt{
  position:relative;z-index:1;border:0;background:transparent;color:var(--ink-2);
  padding:.4em .9em;border-radius:999px;font-size:.84rem;font-weight:600;
  transition:color .25s;white-space:nowrap;
}
.lang-opt.is-active{color:#fff}
.lang-thumb{
  position:absolute;top:3px;bottom:3px;left:3px;border-radius:999px;
  background:linear-gradient(135deg,var(--jade),var(--petrol));
  transition:transform .32s var(--ease),width .32s var(--ease),background .32s;
  box-shadow:0 4px 12px -5px var(--petrol);
}
.lang-switch[data-active="zh"] .lang-thumb{background:linear-gradient(135deg,var(--coral),var(--gold))}

/* =========================================================
   TELA DE LOGIN
   ========================================================= */
.screen-login{
  min-height:100dvh;display:grid;place-items:center;padding:2rem 1rem 3rem;
  position:relative;overflow:hidden;
}
/* ---------------------------------------------------------
   Fundo da entrada — rodada 6 (ajustes finos)

   Camadas, de trás para a frente:
     1. degradê de base: creme com um véu petróleo no alto e jade embaixo
     2. manchas orgânicas nas cores da marca, borradas e respirando
        devagar (a borda muda de forma, sem virar círculo perfeito)
     3. pontilhado fino que só aparece em volta do cartão
     4. um halo de luz dourado-coral logo atrás do cartão
     5. duas ondas na base da tela — a "ponte" entre as duas margens
   Tudo fica atrás do cartão e sem capturar clique. Quem pediu menos
   movimento no sistema vê o fundo parado.
   --------------------------------------------------------- */
.screen-login{
  background:
    radial-gradient(70% 55% at 0% 0%, color-mix(in srgb,var(--jade) 16%,transparent), transparent 70%),
    radial-gradient(60% 50% at 100% 8%, color-mix(in srgb,#EE8FA0 16%,transparent), transparent 70%),
    radial-gradient(90% 60% at 50% 115%, color-mix(in srgb,#F2C230 16%,transparent), transparent 65%),
    var(--bg);
}
/* Fundo ilustrado da entrada (Branding/Fundo login.png): bambu e Muralha
   de um lado, Cristo e Pão de Açúcar do outro. A ilustração já traz sua
   própria arte, então as camadas decorativas abaixo ficam desligadas
   nesta tela. A cor de base é o azul da imagem, para não piscar claro
   enquanto ela carrega. Vale para toda a entrada — login, verificação
   de e-mail e onboarding — até o teste de nivelamento. */
/* Rodada 9 — o fundo dava "zoom" ao clicar em Criar conta ou trocar de
   etapa no onboarding: com `cover` aplicado na própria tela, a imagem
   era redimensionada toda vez que a ALTURA do conteúdo mudava (o
   formulário de cadastro é mais alto que o de entrada; cada etapa tem
   um tamanho). Agora a arte mora numa camada fixa do tamanho da janela,
   que não depende do conteúdo, não tem transform nem animação e nunca
   é recriada. `100lvh` usa a altura MAIOR da janela no celular, para a
   barra de endereço aparecer/sumir sem reescalar a imagem. */
#screenLogin,
#screenVerify,
#screenOnb{
  background:#0F3346;
  isolation:isolate;
}
#screenLogin::before,
#screenVerify::before,
#screenOnb::before{
  content:"";position:fixed;top:0;left:0;z-index:-1;pointer-events:none;
  width:100%;height:100vh;height:100lvh;
  background:#0F3346 url("../assets/fundo-login.jpg") center / cover no-repeat;
}
#screenLogin .login-art,
#screenVerify .login-art{display:none}
/* Rodada 8 — fundo artístico Brasil × China, leve.
   Sobre as camadas acima entram: o calçadão de Copacabana bem apagado
   nas bordas, folhas de costela-de-adão (canto superior esquerdo),
   nuvens auspiciosas 祥云 em dourado e coral, um galho de ipê-amarelo
   (inferior esquerdo) frente a um galho de ameixeira 梅花 em traço de
   nanquim (inferior direito), e algumas pétalas flutuando. */
.login-art{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;
  --leaf:#4F8A7A; --leaf-2:#2E8B5E; --vein:#E6F0EC;
  --ipe:#F2C230; --ipe-c:#D9822B; --branch-ipe:#8A6A50;
  --plum:#EE8FA0; --plum-c:#C8A24A; --branch-plum:#3D3A3A;
}
[data-theme="dark"] .login-art{
  --leaf:#3C6B5E; --leaf-2:#2E6B4E; --vein:#8FC4BB;
  --branch-ipe:#B89A80; --branch-plum:#8A8F92;
}

/* calçadão de Copacabana: ondas alternadas, só nas bordas */
.art-calcadao{
  position:absolute;inset:0;opacity:.08;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40'%3E%3Cpath fill='%231F4E5F' d='M0 10Q20 -10 40 10T80 10V30Q60 50 40 30Q20 10 0 30Z'/%3E%3C/svg%3E");
  background-size:80px 40px;
  -webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 50%, transparent 40%, #000 100%);
          mask-image:radial-gradient(ellipse 75% 70% at 50% 50%, transparent 40%, #000 100%);
}
[data-theme="dark"] .art-calcadao{
  opacity:.1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40'%3E%3Cpath fill='%238FC4BB' d='M0 10Q20 -10 40 10T80 10V30Q60 50 40 30Q20 10 0 30Z'/%3E%3C/svg%3E");
}

/* ilustrações dos cantos */
.art-deco{position:absolute;height:auto;overflow:visible}
.art-leaf{
  top:-12px;left:-24px;width:clamp(190px,24vw,330px);opacity:.85;
  transform-origin:0 0;animation:deco-sway 13s ease-in-out infinite alternate;
}
.art-leaf .leaf-2{--leaf:var(--leaf-2)}
.art-ipe{
  left:0;bottom:0;width:clamp(210px,30vw,420px);opacity:.9;
  transform-origin:0 100%;animation:deco-sway 15s ease-in-out infinite alternate-reverse;
}
.art-plum{
  right:0;bottom:0;width:clamp(210px,30vw,420px);opacity:.9;
  transform-origin:100% 100%;animation:deco-sway 17s ease-in-out infinite alternate;
}
.art-cloud{animation:cloud-drift 20s ease-in-out infinite alternate}
.art-cloud-1{top:calc(4.5rem + 3vh);right:5vw;width:clamp(110px,14vw,200px);color:var(--gold);opacity:.7}
.art-cloud-2{top:40%;left:3vw;width:clamp(80px,9vw,140px);color:var(--coral);opacity:.5;animation-delay:-8s}
[data-theme="dark"] .art-deco{opacity:.55}

@keyframes deco-sway{
  from{transform:rotate(0deg)}
  to  {transform:rotate(2.2deg)}
}
@keyframes cloud-drift{
  from{transform:translateX(0)}
  to  {transform:translateX(-22px)}
}

/* pétalas soltas — ipê e ameixeira */
.art-petal{
  position:absolute;width:11px;height:8px;border-radius:0 80% 0 80%;opacity:.75;
  animation:petal-float 16s ease-in-out infinite;
}
.art-petal.p1{left:18%;top:62%;background:#F2C230}
.art-petal.p2{left:26%;top:78%;background:#EE8FA0;animation-delay:-4s;width:9px;height:7px}
.art-petal.p3{right:20%;top:66%;background:#EE8FA0;animation-delay:-9s}
.art-petal.p4{right:28%;top:82%;background:#F2C230;animation-delay:-2s;width:8px;height:6px}
.art-petal.p5{left:12%;top:30%;background:#E36C5A;animation-delay:-12s;opacity:.5}
.art-petal.p6{right:12%;top:28%;background:#EE8FA0;animation-delay:-6s;opacity:.55}
[data-theme="dark"] .art-petal{opacity:.45}
@keyframes petal-float{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  50%    {transform:translate(14px,-18px) rotate(160deg)}
}

@media (max-width:560px){
  .art-deco{opacity:.6}
  .art-cloud-2,.art-petal.p5,.art-petal.p6{display:none}
  .art-cloud-1{top:auto;bottom:34%;right:-10px}
}
.art-blob{
  position:absolute;filter:blur(64px);opacity:.42;
  border-radius:42% 58% 63% 37% / 45% 38% 62% 55%;
  animation:blob-drift 22s ease-in-out infinite alternate, blob-morph 16s ease-in-out infinite;
}
.art-a{width:480px;height:440px;background:var(--coral);top:-170px;left:-130px}
.art-b{width:460px;height:420px;background:var(--jade);bottom:-190px;right:-130px;animation-delay:-6s,-3s}
.art-c{width:340px;height:320px;background:#F2C230;top:34%;right:8%;opacity:.3;animation-delay:-11s,-8s}
.art-d{width:300px;height:280px;background:#EE8FA0;bottom:8%;left:6%;opacity:.26;animation-delay:-3s,-12s}
[data-theme="dark"] .art-blob{opacity:.2}

@keyframes blob-drift{
  0%  {transform:translate(0,0) rotate(0deg) scale(1)}
  50% {transform:translate(26px,-18px) rotate(12deg) scale(1.05)}
  100%{transform:translate(-18px,22px) rotate(-8deg) scale(.97)}
}
@keyframes blob-morph{
  0%,100%{border-radius:42% 58% 63% 37% / 45% 38% 62% 55%}
  33%    {border-radius:61% 39% 44% 56% / 58% 51% 49% 42%}
  66%    {border-radius:37% 63% 52% 48% / 38% 60% 40% 62%}
}

/* halo atrás do cartão: um anel de luz nas cores quentes da marca */
.art-halo{
  position:absolute;left:50%;top:50%;width:min(720px,120vw);aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;
  background:conic-gradient(from 200deg,
    color-mix(in srgb,var(--gold) 38%,transparent),
    color-mix(in srgb,var(--coral) 30%,transparent),
    color-mix(in srgb,var(--jade) 30%,transparent),
    color-mix(in srgb,var(--petrol) 22%,transparent),
    color-mix(in srgb,var(--gold) 38%,transparent));
  filter:blur(70px);opacity:.55;
  -webkit-mask-image:radial-gradient(closest-side, transparent 38%, #000 62%, transparent 100%);
          mask-image:radial-gradient(closest-side, transparent 38%, #000 62%, transparent 100%);
  animation:halo-spin 60s linear infinite;
}
[data-theme="dark"] .art-halo{opacity:.4}
@keyframes halo-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* ondas na base */
.art-waves{position:absolute;left:0;right:0;bottom:0;width:100%;height:clamp(90px,18vh,170px)}
.art-waves path{transition:fill .3s}
.art-waves .wave-1{fill:color-mix(in srgb,var(--jade) 16%,transparent);animation:wave-sway 14s ease-in-out infinite alternate}
.art-waves .wave-2{fill:color-mix(in srgb,var(--petrol) 12%,transparent);animation:wave-sway 18s ease-in-out infinite alternate-reverse}
[data-theme="dark"] .art-waves .wave-1{fill:color-mix(in srgb,var(--jade) 22%,transparent)}
[data-theme="dark"] .art-waves .wave-2{fill:color-mix(in srgb,var(--petrol) 40%,transparent)}
@keyframes wave-sway{from{transform:translateX(0)}to{transform:translateX(-4%)}}

@media (prefers-reduced-motion:reduce){
  .art-blob,.art-halo,.art-waves path,.art-deco,.art-petal{animation:none}
}

.login-lang{position:absolute;top:1.25rem;right:1.25rem;z-index:2}
/* no celular o seletor de idioma ficava por cima do cartão */
@media (max-width:560px){ .screen-login{padding-top:4.5rem} .login-lang{top:1rem;right:1rem} }

.login-box{
  position:relative;z-index:1;width:min(440px,100%);
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:2px solid var(--gold);border-radius:10px;
  box-shadow:var(--shadow-lg);padding:clamp(1.8rem,5vw,2.6rem);text-align:center;
}
/* Moldura dourada em estilo chinês: filete fino por dentro da borda e
   cantoneiras de grega (回纹) nos quatro cantos. */
.login-box::before,
.login-box::after{content:"";position:absolute;inset:7px;pointer-events:none}
.login-box::before{border:1px solid var(--gold);border-radius:3px}
.login-box::after{
  inset:3px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23C8A24A' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M1 31V1h30M7 31V7h24M13 25V13h12v8h-6v-4'/%3E%3C/svg%3E") left top / 30px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23C8A24A' stroke-width='2' stroke-linecap='square'%3E%3Cpath transform='matrix(-1 0 0 1 32 0)' d='M1 31V1h30M7 31V7h24M13 25V13h12v8h-6v-4'/%3E%3C/svg%3E") right top / 30px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23C8A24A' stroke-width='2' stroke-linecap='square'%3E%3Cpath transform='matrix(1 0 0 -1 0 32)' d='M1 31V1h30M7 31V7h24M13 25V13h12v8h-6v-4'/%3E%3C/svg%3E") left bottom / 30px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23C8A24A' stroke-width='2' stroke-linecap='square'%3E%3Cpath transform='matrix(-1 0 0 -1 32 32)' d='M1 31V1h30M7 31V7h24M13 25V13h12v8h-6v-4'/%3E%3C/svg%3E") right bottom / 30px no-repeat;
}
/* O cartão de entrada é sempre claro, mesmo no tema escuro: o wordmark
   "PONTE" é azul-petróleo e desapareceria sobre fundo escuro. Em vez de
   alterar a arte da marca, o cartão redefine os tokens localmente —
   tudo dentro dele volta a ser a versão clara. O fundo da página
   continua escuro, e o cartão claro ganha destaque. */
[data-theme="dark"] .login-box,
[data-theme="dark"] .onb-box{
  --surface:#FFFFFF;
  --surface-2:#FDFBF7;
  --line:#E6DFD2;
  --ink:#1F2A2E;
  --ink-2:#5C6B70;
  --ink-3:#8D9A9E;
  --cream-d:#EDE7DB;
  --heading:var(--petrol);
  --petrol-l:#E6EDEF;
  --jade-l:#E6F0EC;
  --gold-l:#F7F0DF;
  --coral-l:#FBEAE6;
  background:#FFFFFF;
  color:var(--ink);
}
/* desfaz os ajustes de contraste que só valem sobre fundo escuro */
[data-theme="dark"] .login-box .form-err,
[data-theme="dark"] .onb-box .form-err{color:var(--coral-d)}
[data-theme="dark"] .login-box .demo-box strong{color:var(--gold-d)}
[data-theme="dark"] .login-box .demo-box code{color:var(--coral-d)}

.login-logo{width:min(340px,88%);height:auto;margin:.2rem auto 1.4rem;background:transparent}
.login-box h1{font-size:1.5rem;margin-bottom:.25rem}
.login-sub{color:var(--ink-2);font-size:.93rem;margin-bottom:1.5rem}

.tabs{display:flex;gap:.25rem;padding:4px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);margin-bottom:1.4rem}
.tab{flex:1;border:0;background:transparent;color:var(--ink-2);padding:.55em;border-radius:999px;font-weight:700;font-size:.9rem;transition:background .25s,color .25s}
.tab.is-active{background:linear-gradient(135deg,var(--petrol),var(--jade));color:#fff;box-shadow:0 4px 12px -6px var(--petrol)}

.form{display:flex;flex-direction:column;gap:.9rem;text-align:left}
.field{display:flex;flex-direction:column;gap:.35rem}
.field > span{font-size:.82rem;font-weight:600;color:var(--ink-2)}
.field input,.field select,.field textarea,.input{
  width:100%;padding:.78rem .95rem;border-radius:var(--r-sm);
  border:1.5px solid var(--line);background:var(--surface-2);color:var(--ink);
  transition:border-color .2s,background .2s;
}
.field input:focus,.field select:focus,.input:focus{outline:0;border-color:var(--jade);background:var(--surface)}
.field-hint{font-size:.76rem;color:var(--ink-3);margin:0}
.form-err{margin:0;color:var(--coral-d);font-size:.86rem;font-weight:600}
[data-theme="dark"] .form-err{color:#FF9B86}

/* medidor de força da senha (rodada 9) */
.pw-meter{margin-top:-.4rem;display:grid;grid-template-columns:1fr auto;gap:.35rem .6rem;align-items:center}
.pw-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.pw-bar span{height:6px;border-radius:99px;background:var(--cream-d);transition:background .25s}
.pw-meter[data-level="1"] .pw-bar span:nth-child(-n+1){background:var(--coral)}
.pw-meter[data-level="2"] .pw-bar span:nth-child(-n+2){background:var(--gold)}
.pw-meter[data-level="3"] .pw-bar span{background:var(--jade)}
.pw-label{font-size:.76rem;font-weight:700;min-width:3.5em;text-align:right;color:var(--ink-3)}
.pw-meter[data-level="1"] .pw-label{color:var(--coral-d)}
.pw-meter[data-level="2"] .pw-label{color:var(--gold-d)}
.pw-meter[data-level="3"] .pw-label{color:var(--jade)}
.pw-rules{grid-column:1 / -1;list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.15rem .9rem;font-size:.76rem;color:var(--ink-3)}
.pw-rules li.is-ok{color:var(--jade);font-weight:600}
.pw-rules li:not(.is-ok) span{color:var(--coral-d)}

.sep{display:flex;align-items:center;gap:.8rem;margin:1.4rem 0 1rem;color:var(--ink-3);font-size:.78rem}
.sep::before,.sep::after{content:"";flex:1;height:1px;background:var(--line)}
.social{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.btn-social{border-color:var(--line);background:var(--surface-2);color:var(--ink);font-size:.9rem}
.btn-social:hover{border-color:var(--jade);background:var(--surface)}
.soc-ico{display:grid;place-items:center}
.soc-wechat{color:#07C160}
/* botões sociais "em construção" */
.btn-social-wip{position:relative;opacity:.7;cursor:not-allowed!important}
.btn-social-wip:hover{border-color:var(--line)!important;background:var(--surface-2)!important}
.soc-wip{position:absolute;top:.2rem;right:.3rem;font-size:.62rem;background:var(--ink-3);color:#fff;padding:.1rem .3rem;border-radius:.3rem;white-space:nowrap;pointer-events:none}
/* botão de e-mail corporativo */
.btn-social-corp{grid-column:1/-1;justify-content:center;gap:.5rem;color:var(--ink-2);font-size:.84rem}
/* link esqueci minha senha */
.login-forgot{text-align:right;font-size:.8rem;margin:-.2rem 0 .5rem}
.login-forgot a{color:var(--jade);text-decoration:none}
.login-forgot a:hover{text-decoration:underline}
/* --- verificação de conta --- */
.verify-ico{font-size:2.6rem;margin:.2rem 0 .5rem}
.code-input{
  text-align:center;font-size:1.9rem;font-weight:800;letter-spacing:.42em;
  padding-left:.42em;font-variant-numeric:tabular-nums;
}
.verify-actions{display:flex;gap:.5rem;justify-content:center;margin-top:1rem;flex-wrap:wrap}
.demo-box{
  background:var(--gold-l);border:1px dashed var(--gold);border-radius:var(--r-sm);
  padding:.8rem 1rem;margin-bottom:1.2rem;font-size:.82rem;color:var(--ink-2);text-align:left;
}
.demo-box strong{display:block;color:var(--gold-d);font-size:.7rem;
  text-transform:uppercase;letter-spacing:.07em;margin-bottom:.25rem}
[data-theme="dark"] .demo-box strong{color:var(--gold)}
.demo-box code{
  display:inline-block;margin-left:.4rem;padding:.1em .5em;border-radius:6px;
  background:var(--surface);color:var(--coral-d);font-size:1.05rem;font-weight:800;letter-spacing:.14em;
}
[data-theme="dark"] .demo-box code{color:#FF9B86}

.login-note{margin:1.3rem 0 0;font-size:.74rem;color:var(--ink-3)}
.login-sign{margin:.5rem 0 0;font-size:.72rem;color:var(--ink-3);font-style:italic}

/* =========================================================
   ONBOARDING
   ========================================================= */
.screen-onb{min-height:100dvh;display:grid;place-items:center;padding:2rem 1rem;background:var(--bg)}
.onb-box{
  width:min(620px,100%);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:clamp(1.5rem,5vw,2.5rem);
}
.onb-lang{display:flex;justify-content:flex-end;margin:0 0 .6rem}
.onb-logo{width:min(240px,72%);height:auto;margin:0 auto 1.5rem;background:transparent}
.onb-step{text-align:center;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:0 0 .5rem}
.onb-track{height:6px;border-radius:99px;background:var(--cream-d);overflow:hidden;margin-bottom:1.75rem}
.onb-track span{display:block;height:100%;border-radius:99px;background:var(--rainbow);transition:width .45s var(--ease)}
.onb-foot{display:flex;gap:.75rem;justify-content:space-between;margin-top:1.75rem}
.onb-hint{margin:1.1rem 0 0;text-align:right;font-size:.85rem}

/* campos obrigatórios não preenchidos */
.field input.is-invalid,.field select.is-invalid{border-color:var(--coral);background:var(--coral-l)}
.choice-grid.is-invalid{
  outline:2px solid var(--coral);outline-offset:6px;border-radius:14px;
}
.onb-q{margin-bottom:.3rem}
.onb-d{color:var(--ink-2);font-size:.92rem;margin-bottom:1.4rem}

/* cartões de escolha (usados no onboarding e no perfil) */
.choice-grid{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.choice{
  display:flex;align-items:flex-start;gap:.7rem;text-align:left;
  padding:.85rem 1rem;border-radius:var(--r-sm);
  border:2px solid var(--line);background:var(--surface-2);color:var(--ink);
  transition:border-color .18s,background .18s,transform .15s var(--ease);
}
.choice:hover{border-color:var(--jade);transform:translateY(-2px)}
.choice.is-on{border-color:var(--coral);background:var(--coral-l)}
.choice-ico{font-size:1.25rem;line-height:1.2;flex:none}
.choice-txt strong{display:block;font-size:.95rem;font-weight:700}
.choice-txt small{color:var(--ink-3);font-size:.78rem;line-height:1.35;display:block}

/* =========================================================
   APLICAÇÃO — barra superior e menu
   ========================================================= */
.screen-app{padding-top:calc(var(--topbar-h) + env(safe-area-inset-top, 0px));min-height:100dvh;display:flex;flex-direction:column}
/* fundo do Início: um degradê suave nas cores Brasil × China, sem
   desenho nenhum — fica parado atrás do conteúdo enquanto a página rola */
.screen-app[data-route="inicio"]::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 50% at 0% 0%, color-mix(in srgb,var(--jade) 18%,transparent), transparent 70%),
    radial-gradient(55% 45% at 100% 5%, color-mix(in srgb,#EE8FA0 20%,transparent), transparent 70%),
    radial-gradient(60% 50% at 100% 100%, color-mix(in srgb,#F2C230 16%,transparent), transparent 70%),
    radial-gradient(55% 45% at 0% 100%, color-mix(in srgb,var(--coral) 12%,transparent), transparent 70%),
    var(--bg);
}
[data-theme="dark"] .screen-app[data-route="inicio"]::before{
  background:
    radial-gradient(60% 50% at 0% 0%, color-mix(in srgb,var(--jade) 22%,transparent), transparent 70%),
    radial-gradient(55% 45% at 100% 5%, color-mix(in srgb,#EE8FA0 10%,transparent), transparent 70%),
    radial-gradient(60% 50% at 100% 100%, color-mix(in srgb,#F2C230 8%,transparent), transparent 70%),
    radial-gradient(55% 45% at 0% 100%, color-mix(in srgb,var(--coral) 8%,transparent), transparent 70%),
    var(--bg);
}
/* Tema claro: todo o app (do nivelamento em diante) usa o fundo padrão
   (assets/fundo-padrao.jpg: branco no alto, coral → amarelo na base)
   cobrindo a tela, levemente misturado ao creme do site pela opacidade.
   Fica fixo atrás do conteúdo. A entrada (login, verificação,
   onboarding) mantém o fundo-login. */
:root:not([data-theme="dark"]) .screen-app::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:url("../assets/fundo-padrao.jpg") center / cover no-repeat;
  opacity:.35;
}
/* Tema escuro: mesma ideia com o fundo padrão escuro
   (assets/fundo-padrao-escuro.jpg: azul-noite no alto, azul claro na
   base), misturado ao fundo escuro do site para o azul não ofuscar. */
:root[data-theme="dark"] .screen-app::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:url("../assets/fundo-padrao-escuro.jpg") center / cover no-repeat;
  opacity:.35;
}
.topbar{
  position:fixed;inset:0 0 auto 0;z-index:60;
  height:calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
  display:flex;align-items:center;gap:.7rem;
  padding:env(safe-area-inset-top, 0px) clamp(.7rem,3vw,1.4rem) 0;
  background:color-mix(in srgb,var(--surface) 84%,transparent);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;background:var(--rainbow)}
.icon-btn{
  width:42px;height:42px;display:grid;place-items:center;flex:none;
  border:1px solid var(--line);border-radius:13px;background:var(--surface-2);color:var(--ink);
  transition:background .2s,border-color .2s;
}
.icon-btn:hover{background:var(--cream-d);border-color:var(--gold)}
.burger{display:block;width:18px;height:13px;position:relative}
.burger i{position:absolute;left:0;height:2px;width:100%;border-radius:2px;background:currentColor;transition:transform .3s var(--ease),opacity .2s,width .3s var(--ease)}
.burger i:nth-child(1){top:0}
.burger i:nth-child(2){top:5.5px;width:70%}
.burger i:nth-child(3){top:11px}
.menu-open .burger i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.menu-open .burger i:nth-child(2){opacity:0;width:0}
.menu-open .burger i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
/* Marca sempre sobre fundo transparente — sem placa, sem retângulo,
   sem círculo. Os PNGs têm alfa de verdade, e o `background:transparent`
   fica explícito para nenhuma regra futura encostar uma cor aqui.
   No topo usamos só o ícone: ele é colorido e se lê em qualquer tema. */
.brand,.brand img,.footer img,.login-logo,.onb-logo,.logo-preview{
  background:transparent;border:0;box-shadow:none;
}
.brand{display:flex;align-items:center;min-width:0}
.brand img{width:auto;height:44px;display:block}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:.5rem}
.avatar{
  display:grid;place-items:center;width:36px;height:36px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--petrol),var(--jade));color:#fff;font-weight:700;font-size:.9rem;
}
.avatar-lg{width:48px;height:48px;font-size:1.15rem}
.avatar-btn{display:block;border-radius:50%;transition:transform .2s var(--ease)}
.avatar-btn:hover{transform:scale(1.07)}

.drawer{
  position:fixed;top:0;left:0;bottom:0;width:min(300px,86vw);z-index:80;
  background:var(--surface);border-right:1px solid var(--line);
  display:flex;flex-direction:column;transform:translateX(-102%);
  transition:transform .38s var(--ease);box-shadow:var(--shadow-lg);
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
.menu-open .drawer{transform:none}
.drawer-head{
  display:flex;align-items:center;gap:.8rem;
  padding:calc(1.1rem + env(safe-area-inset-top, 0px)) 1.1rem 1.1rem;
  border-bottom:1px solid var(--line);
  background:linear-gradient(135deg,var(--jade-l),var(--coral-l));
}
.drawer-id{min-width:0}
.drawer-id strong{display:block;font-size:.98rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drawer-id small{display:block;color:var(--ink-3);font-size:.76rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badge{display:inline-block;margin-top:.25rem;font-size:.63rem;font-weight:700;padding:.2em .6em;border-radius:999px;letter-spacing:.03em}
.badge-gold{background:var(--gold);color:#3A2B00}
.drawer-nav{flex:1;overflow-y:auto;padding:.7rem}
.drawer-label{margin:.9rem .6rem .35rem;font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.drawer-label:first-child{margin-top:.1rem}
.drawer-item{
  display:flex;align-items:center;gap:.7rem;padding:.65rem;border-radius:12px;
  font-weight:500;font-size:.95rem;color:var(--ink-2);
  transition:background .18s,color .18s,transform .18s var(--ease);
}
.drawer-item:hover{background:var(--cream-d);color:var(--ink);transform:translateX(2px)}
.drawer-item.is-active{background:var(--jade-l);color:var(--jade-d);font-weight:700}
[data-theme="dark"] .drawer-item.is-active{color:#7FD3BC}
.di-ico{width:24px;text-align:center;font-size:1.05rem;flex:none}
/* item do drawer ainda fechado para o aluno: cadeado no ícone e selo
   "em breve" no lugar do destino. Clicar avisa, não navega. */
.drawer-item.is-soon{opacity:.62;cursor:default}
.drawer-item.is-soon:hover{background:transparent;color:var(--ink-2);transform:none}
.drawer-item.is-soon .di-ico::after{content:"🔒";position:absolute;font-size:.62rem;transform:translate(-4px,6px)}
.drawer-item.is-soon .di-ico{position:relative}
.di-soon{
  margin-left:auto;padding:.14rem .45rem;border-radius:999px;
  background:var(--cream-d);color:var(--ink-3);
  font-size:.62rem;font-weight:700;letter-spacing:.02em;white-space:nowrap;
}
.drawer-foot{padding:.8rem 1rem 1.1rem;border-top:1px solid var(--line)}
.drawer-sign{margin:.7rem 0 0;text-align:center;font-size:.68rem;color:var(--ink-3);font-style:italic;line-height:1.4}
.scrim{position:fixed;inset:0;z-index:70;background:rgba(16,26,30,.45);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .3s}
.menu-open .scrim{opacity:1;pointer-events:auto}

/* ---------- layout de conteúdo ---------- */
#app{flex:1;width:100%;max-width:1060px;margin:0 auto;
  padding:clamp(1.1rem,3vw,2rem)
          max(clamp(1rem,4vw,1.75rem), env(safe-area-inset-right, 0px))
          max(4rem, calc(2rem + env(safe-area-inset-bottom, 0px)))
          max(clamp(1rem,4vw,1.75rem), env(safe-area-inset-left, 0px))}
.view-narrow{max-width:740px;margin:0 auto}
.page-head{margin-bottom:1.6rem}
.page-head p{color:var(--ink-2);max-width:58ch;margin:0}
.section{margin-top:2.5rem}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.section-head p{margin:0;font-size:.88rem;color:var(--ink-3)}
.grid{display:grid;gap:1rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.back-link{display:inline-block;margin-bottom:1rem;color:var(--ink-2);font-size:.9rem;font-weight:600}
.back-link:hover{color:var(--jade)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:1.25rem}
.bar{height:8px;border-radius:99px;background:var(--cream-d);overflow:hidden}
.bar span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--jade),var(--gold));transition:width .6s var(--ease)}
.empty{text-align:center;padding:2.75rem 1.5rem;color:var(--ink-3);border:2px dashed var(--line);border-radius:var(--r)}
.empty .e-ico{font-size:2.4rem;display:block;margin-bottom:.6rem}
.pill{font-size:.65rem;font-weight:700;padding:.22em .6em;border-radius:999px;background:var(--gold-l);color:var(--gold-d)}

/* =========================================================
   HOME
   ========================================================= */
.hello{
  position:relative;overflow:hidden;border-radius:var(--r-lg);padding:clamp(1.5rem,4vw,2.2rem);
  background:linear-gradient(135deg,var(--petrol),var(--jade));color:#fff;box-shadow:var(--shadow-lg);
  margin-bottom:1.5rem;
}
.hello::after{content:"";position:absolute;width:280px;height:280px;border-radius:50%;background:var(--gold);filter:blur(70px);opacity:.35;top:-110px;right:-70px}
.hello h1{color:#fff;margin-bottom:.2rem;position:relative}
.hello p{color:rgba(255,255,255,.82);margin:0;position:relative}

.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.1rem;box-shadow:var(--shadow)}
.stat strong{display:block;font-size:1.75rem;font-weight:800;line-height:1.15;color:var(--petrol)}
[data-theme="dark"] .stat strong{color:#8FC4BB}
.stat small{color:var(--ink-3);font-size:.78rem}
.stat.s-coral strong{color:var(--coral)}
.stat.s-gold strong{color:var(--gold-d)}
[data-theme="dark"] .stat.s-gold strong{color:var(--gold)}
.stat.s-jade strong{color:var(--jade)}
/* rodada 9: os cards do resumo ficam centralizados, com largura igual,
   qualquer que seja a quantidade (3 ou 4) */
.stats-row{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}
.stats-row > .stat{flex:1 1 170px;max-width:260px;text-align:center}
/* dias seguidos: o avatar (ou o emoji) muda de humor com a sequência */
.stat-streak{display:flex;align-items:center;justify-content:center;gap:.75rem;text-align:left}
.streak-emoji{font-size:2.3rem;line-height:1;flex:none}
.streak-av{position:relative;width:58px;height:58px;flex:none;overflow:visible}
.streak-av img{width:100%;height:100%;border-radius:50%}
.streak-av img.gear{position:absolute;height:auto}
.streak-av .mood-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.streak-av .mood-badge{position:absolute;right:-6px;bottom:-4px;font-size:1.15rem;line-height:1;
  background:var(--surface);border-radius:50%;padding:2px;box-shadow:var(--shadow)}
.streak-mood{display:block;font-size:.72rem;font-weight:700;color:var(--coral-d);margin-top:.15rem}
[data-theme="dark"] .streak-mood{color:#FF9B86}
.stat-streak[data-mood="sad"] .streak-av > img:first-child{filter:saturate(.55)}
/* classificação indicativa do filme do dia (rodada 10: frase completa + selo) */
.rating-warn{display:block;margin:.25rem 0 .65rem;padding:.45rem .7rem;border-radius:var(--r);
  font-size:.82rem;line-height:1.45;background:var(--coral-l);color:var(--ink);
  border-left:3px solid var(--coral)}
.rating-free{border-left-color:var(--jade);background:color-mix(in srgb,var(--jade) 12%,transparent)}
[data-theme="dark"] .rating-warn{color:var(--ink);background:color-mix(in srgb,var(--coral) 14%,transparent)}
[data-theme="dark"] .rating-free{background:color-mix(in srgb,var(--jade) 12%,transparent)}
.rating-badge{display:inline-block;margin-right:.4rem;padding:.1em .5em;border-radius:999px;
  font-size:.72rem;font-weight:800;background:var(--coral);color:#fff;vertical-align:.05em}
.check-row{display:flex;flex-wrap:wrap;gap:.4rem 1rem}
.check-inline{display:inline-flex;align-items:center;gap:.35rem;font-size:.88rem}

.continue{
  display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--coral);
  border-radius:var(--r);padding:1.2rem 1.3rem;box-shadow:var(--shadow);
  transition:transform .2s var(--ease),box-shadow .2s;
}
.continue:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.continue-ico{display:grid;place-items:center;width:56px;height:56px;border-radius:15px;background:var(--coral-l);font-size:1.5rem;flex:none;padding:5px}
.continue-ico img{width:100%;height:100%}
.continue-body{flex:1;min-width:180px}
.continue-body strong{display:block;font-size:1.1rem;color:var(--heading)}
.continue-body small{color:var(--ink-3);font-size:.85rem}

.tip-item{display:flex;gap:.8rem;align-items:flex-start;padding:.9rem 0;border-bottom:1px solid var(--line)}
.tip-item:last-child{border-bottom:0;padding-bottom:0}
.tip-item:first-child{padding-top:0}
.tip-ico{font-size:1.2rem;flex:none}
.tip-item p{margin:0;font-size:.92rem;color:var(--ink-2)}
.tip-item strong{color:var(--heading)}

/* cartões diários (filme, música, cultura) */
.daily{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.daily-card{
  display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;
}
.daily-top{padding:.6rem 1.1rem;font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#fff}
.dt-coral{background:var(--coral)} .dt-gold{background:var(--gold);color:#3A2B00}
.dt-jade{background:var(--jade)}  .dt-petrol{background:var(--petrol)}
/* faixas dos cartões do dia: degradê diagonal em cores vizinhas da marca,
   com um brilho suave no alto para dar volume */
.daily-card .daily-top{
  position:relative;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
  text-shadow:0 1px 2px rgba(0,0,0,.18);
}
.daily-card .dt-coral{background:linear-gradient(120deg,#D9574A 0%,#E36C5A 40%,#F0918A 100%)}
.daily-card .dt-gold{background:linear-gradient(120deg,#D9822B 0%,#E8A33D 45%,#F2C230 100%);color:#fff}
.daily-card .dt-jade{background:linear-gradient(120deg,#1F4E5F 0%,#3C7A6C 50%,#5FA893 100%)}
.daily-body{padding:1.1rem;flex:1;display:flex;flex-direction:column;gap:.6rem}
.poster{
  display:grid;place-items:center;height:110px;border-radius:var(--r-sm);font-size:3rem;
  background:linear-gradient(135deg,var(--petrol-l),var(--gold-l));flex:none;overflow:hidden;
}
/* toda imagem de cartão (capa própria ou foto padrão de assets/daily) vira
   faixa 16:9 que acompanha a largura do cartão — os três ficam iguais */
.poster.has-img{padding:0;height:auto;aspect-ratio:16/9}
.poster img{width:100%;height:100%;object-fit:cover}
/* foto padrão (3:2): o recorte mira nos rostos de cada foto */
.pp-movie img{object-position:50% 40%}
.pp-song img{object-position:50% 55%}
.pp-tip img{object-position:50% 45%}
.daily-body h3{margin:0}
.daily-meta{font-size:.8rem;color:var(--ink-3);margin:0}
.daily-body p{margin:0;font-size:.9rem;color:var(--ink-2)}
.why{background:var(--jade-l);border-radius:var(--r-sm);padding:.7rem .85rem;font-size:.85rem}
.why strong{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:var(--jade-d);margin-bottom:.2rem}
[data-theme="dark"] .why strong{color:#7FD3BC}
.lyric{border-left:3px solid var(--gold);padding-left:.8rem;margin-bottom:.7rem}
.lyric .l-pt{font-weight:600;font-size:.95rem}
.lyric .l-zh{font-size:.86rem;color:var(--ink-2)}
.lyric .l-note{font-size:.8rem;color:var(--ink-3);margin-top:.25rem}

/* pilares */
.pillar{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.2rem;box-shadow:var(--shadow);transition:transform .25s var(--ease)}
.pillar:hover{transform:translateY(-3px)}
.pillar-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;font-size:1.25rem;margin-bottom:.7rem}
.p-coral{background:var(--coral-l)} .p-gold{background:var(--gold-l)}
.p-jade{background:var(--jade-l)}   .p-petrol{background:var(--petrol-l)}
.pillar p{margin:0;font-size:.88rem;color:var(--ink-2)}

/* =========================================================
   PERFIL
   ========================================================= */
/* Rodada 7: uma coluna só, de cima para baixo — avatar, nome, nível
   (com a barrinha logo embaixo do nome) e a informação extra */
.profile-hero{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:.45rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);padding:1.4rem 1.2rem 1.2rem;margin-bottom:1.75rem;
}
.profile-hero .avatar{width:96px;height:96px;font-size:2.2rem}
.profile-hero .ph-name{margin:.2rem 0 0;font-size:clamp(1.3rem,3.6vw,1.6rem)}
.ph-level{width:min(360px,100%)}
.ph-level-line{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;flex-wrap:wrap;margin-bottom:.35rem}
.ph-level-line strong{color:var(--petrol);font-size:.95rem}
[data-theme="dark"] .ph-level-line strong{color:#8FC4BB}
.ph-level-line small{color:var(--ink-3);font-size:.8rem}
.profile-hero .ph-extra{margin:.15rem 0 0;color:var(--ink-3);font-size:.84rem}
/* a escolha do avatar, com o Guarda-roupa ao lado do título */
.avatar-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:.4rem}
.avatar-head h3{margin:0}
.avatar-head .mini-hint{margin:.25rem 0 0}

/* ---------- Perfil em abas (rodada 6) ---------- */
.profile-tabs{
  display:flex;gap:.35rem;flex-wrap:wrap;margin:0 0 1.5rem;padding:4px;
  border-radius:999px;background:var(--surface-2);border:1px solid var(--line);width:max-content;max-width:100%;
}
.profile-tab{
  padding:.55em 1.1em;border-radius:999px;font-weight:700;font-size:.9rem;color:var(--ink-2);
  transition:background .2s,color .2s;white-space:nowrap;
}
.profile-tab:hover{color:var(--ink);background:var(--cream-d)}
.profile-tab.is-active{background:linear-gradient(135deg,var(--petrol),var(--jade));color:#fff;box-shadow:0 4px 12px -6px var(--petrol)}
@media (max-width:560px){
  .profile-tabs{border-radius:var(--r-sm);width:100%}
  .profile-tab{flex:1 1 100%;text-align:center;border-radius:10px}
}
/* o botão do guarda-roupa, junto da escolha do avatar */
.wardrobe-btn{
  flex:none;display:flex;flex-direction:column;align-items:center;gap:.15rem;
  padding:.5rem .6rem;border-radius:14px;border:1.5px solid var(--line);background:var(--surface);
  color:var(--petrol);font-size:.7rem;font-weight:700;transition:border-color .15s,transform .15s var(--ease);
}
.wardrobe-btn:hover{border-color:var(--gold);transform:translateY(-2px)}
[data-theme="dark"] .wardrobe-btn{color:#8FC4BB}
.wardrobe-stage{display:grid;place-items:center;padding:1rem 0 .4rem}
.avatar.avatar-xl{width:140px;height:140px;font-size:3rem}
/* país: a bandeira desenhada ao lado do campo */
.select-flag{display:flex;align-items:center;gap:.5rem}
.select-flag select{flex:1;min-width:0}
.sel-flag{display:inline-flex;font-size:1.5rem;flex:none;min-width:1.6em;justify-content:center}
.sel-flag svg.flag{width:1.5em;height:1em}
.select-plain{display:block}
.profile-pane > .b-callout{margin-bottom:1.4rem}
/* status da personalização */
/* rodada 8: o aviso do que o Checklist serve — é orientação, não
   matéria, então vem na cor de destaque e não na do conteúdo */
.b-callout-why{border-left-color:var(--gold);background:var(--gold-l);margin-bottom:.9rem}
.b-callout.is-waiting{border-left-color:var(--gold);background:var(--gold-l)}
.b-callout.is-on{border-left-color:var(--jade);background:var(--jade-l)}
.form-section{margin-bottom:1.5rem}
.form-section > h3{margin-bottom:.9rem;padding-bottom:.5rem;border-bottom:1px solid var(--line)}
.form-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.form-grid .field-wide{grid-column:1/-1}
.sticky-save{position:sticky;bottom:1rem;display:flex;justify-content:flex-end;gap:.75rem;padding-top:.5rem}

/* =========================================================
   CURSO
   ========================================================= */
.modules{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.module{
  position:relative;overflow:hidden;aspect-ratio:1/1;display:flex;flex-direction:column;
  justify-content:space-between;text-align:left;padding:1.2rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);transition:transform .25s var(--ease),box-shadow .25s,border-color .25s;
}
.module:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--gold)}
.module::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--mc,var(--jade))}
.module.mc-jade{--mc:var(--jade)} .module.mc-gold{--mc:var(--gold)}
.module.mc-coral{--mc:var(--coral)} .module.mc-petrol{--mc:var(--petrol)}
.module-ico{display:block;width:54px;height:54px}
.module-ico img{width:100%;height:100%;display:block}
.module h3{margin:.6rem 0 .2rem}
.module p{margin:0;font-size:.84rem;color:var(--ink-2)}
.module-foot{margin-top:.9rem;font-size:.78rem;color:var(--ink-3);font-weight:600}
.module.is-locked{opacity:.6;cursor:default;pointer-events:none}
.lock{position:absolute;top:1rem;right:1rem;font-size:1.1rem}

.units{display:grid;gap:.8rem}
.unit{
  display:flex;align-items:center;gap:1rem;text-align:left;width:100%;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:1rem 1.15rem;box-shadow:var(--shadow);
  transition:transform .2s var(--ease),border-color .2s,box-shadow .2s;
}
.unit:hover{transform:translateX(4px);border-color:var(--jade);box-shadow:var(--shadow-lg)}
.unit.is-locked{opacity:.55;pointer-events:none}
.unit-num{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;flex:none;background:var(--petrol-l);color:var(--petrol);font-weight:800}
[data-theme="dark"] .unit-num{color:#8FC4BB}
.unit.is-done .unit-num{background:var(--jade);color:#fff}
.unit-body{flex:1;min-width:0}
.unit-body strong{display:block;font-size:1rem;color:var(--heading)}
.unit-body small{color:var(--ink-3);font-size:.82rem}
.unit-go{color:var(--ink-3);font-size:1.2rem}

/* partes da unidade */
.part{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);margin-bottom:1rem;overflow:hidden}
.part-head{display:flex;align-items:center;gap:.7rem;padding:1rem 1.2rem;border-bottom:1px solid var(--line);background:var(--surface-2)}
.part-kind{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.2em .6em;border-radius:999px;background:var(--petrol-l);color:var(--petrol)}
[data-theme="dark"] .part-kind{color:#8FC4BB}
.part-head h3{margin:0;font-size:1rem}
.part-body{padding:1.1rem 1.2rem}

.wordrow{display:flex;align-items:center;gap:.9rem;padding:.7rem 0;border-bottom:1px solid var(--line)}
.wordrow:last-child{border-bottom:0}
.wordrow-body{flex:1;min-width:0}
.w-pt{font-weight:700;font-size:1.02rem}
.w-zh{color:var(--ink-2);font-size:.9rem}
.w-tip{color:var(--ink-3);font-size:.8rem}
.w-note{margin-top:.3rem;font-size:.8rem;color:var(--jade-d);background:var(--jade-l);padding:.35rem .6rem;border-radius:8px;display:inline-block}
[data-theme="dark"] .w-note{color:#7FD3BC}

.say{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;flex:none;border:0;background:var(--jade-l);color:var(--jade-d);font-size:1rem;transition:transform .2s var(--ease)}
.say:hover{transform:scale(1.1)}
.say.is-playing{animation:pulse 1s infinite}
[data-theme="dark"] .say{color:#7FD3BC}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(79,138,122,.5)}50%{box-shadow:0 0 0 12px rgba(79,138,122,0)}}

.line{display:flex;gap:.8rem;align-items:flex-start;padding:.65rem 0}
.line-who{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;flex:none;font-size:.8rem;font-weight:700;background:var(--coral-l);color:var(--coral-d)}
.line.b .line-who{background:var(--petrol-l);color:var(--petrol)}
[data-theme="dark"] .line.b .line-who{color:#8FC4BB}
.line-body{flex:1}
.line-pt{font-weight:600}
.line-zh{color:var(--ink-2);font-size:.88rem}

/* --- objetivos da unidade --- */
.objectives{
  background:var(--jade-l);border-left:4px solid var(--jade);border-radius:var(--r-sm);
  padding:1rem 1.2rem;margin-bottom:1.5rem;
}
.objectives > strong{display:block;font-size:.72rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--jade-d);margin-bottom:.5rem}
[data-theme="dark"] .objectives > strong{color:#7FD3BC}
.objectives ul{margin:0;padding-left:1.15rem}
.objectives li{font-size:.93rem;margin-bottom:.25rem}

/* --- unidade em preparação --- */
.draft-note{
  display:flex;gap:.8rem;align-items:flex-start;margin-bottom:1.25rem;
  background:var(--gold-l);border:1px dashed var(--gold);border-radius:var(--r-sm);padding:.95rem 1.1rem;
}
.draft-note strong{display:block;color:var(--gold-d)}
[data-theme="dark"] .draft-note strong{color:var(--gold)}
.draft-note small{color:var(--ink-2);font-size:.85rem}
.plan-row{display:flex;gap:.9rem;align-items:flex-start;padding:.75rem 0;border-bottom:1px solid var(--line)}
.plan-row:last-child{border-bottom:0}
.plan-row .part-kind{flex:none;min-width:88px;text-align:center}
.plan-row p{margin:0;font-size:.92rem;color:var(--ink-2)}
.unit.is-draft{opacity:.82}
.unit.is-draft .unit-num{background:var(--gold-l);color:var(--gold-d)}
[data-theme="dark"] .unit.is-draft .unit-num{color:var(--gold)}

/* --- apoio em chinês por módulo --- */
[data-zh="partial"] .zh-ex{display:none}
[data-zh="minimal"] .zh{display:none}
.zh-toggle{display:flex;justify-content:flex-end;margin-bottom:1rem}

/* --- tabelas de gramática --- */
.tbl-wrap{overflow-x:auto;margin:0 0 1rem;border:1px solid var(--line);border-radius:var(--r-sm)}
.tbl{width:100%;border-collapse:collapse;font-size:.92rem;min-width:320px}
.tbl th,.tbl td{padding:.6rem .85rem;text-align:left;border-bottom:1px solid var(--line)}
.tbl th{background:var(--petrol-l);color:var(--petrol);font-weight:700;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
[data-theme="dark"] .tbl th{color:#8FC4BB}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:nth-child(even){background:var(--surface-2)}
.tbl td:first-child{font-weight:600}

/* --- fonética --- */
.phon{padding:.9rem 0;border-bottom:1px solid var(--line)}
.phon:last-child{border-bottom:0}
.phon:first-child{padding-top:0}
.phon-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.3rem}
.phon-label{font-weight:800;font-size:1.05rem;color:var(--heading)}
.phon-hint{margin:0 0 .6rem;font-size:.88rem;color:var(--ink-2)}
.phon-words{display:flex;flex-wrap:wrap;gap:.45rem}
.wchip{
  display:inline-flex;align-items:center;gap:.4rem;padding:.42em .85em;border-radius:11px;
  border:1px solid var(--line);background:var(--surface-2);color:var(--ink);
  font-weight:600;font-size:.9rem;transition:border-color .18s,transform .15s var(--ease);
}
.wchip:hover{border-color:var(--jade);transform:translateY(-2px)}
.wchip span{opacity:.5;font-size:.85em}

/* --- ler e escrever --- */
.reading .rtext{
  white-space:pre-wrap;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:1rem 1.1rem;font-size:.95rem;line-height:1.7;
}
.reading .rtext-zh{margin-top:.6rem;color:var(--ink-2);font-size:.9rem;background:transparent;border-style:dashed}
.qlist{margin:.5rem 0 0;padding-left:1.15rem}
.qlist li{font-size:.92rem;margin-bottom:.25rem}
.mini-label{display:block;margin:1.1rem 0 .4rem;font-size:.72rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.mini-hint{margin:0 0 .8rem;font-size:.85rem;color:var(--ink-3)}

/* --- cultura --- */
.cult{padding:.5rem 0 1rem;border-bottom:1px solid var(--line)}
.cult:last-child{border-bottom:0;padding-bottom:0}
.cult h4{margin:0 0 .4rem}
.cult p{margin:0 0 .8rem;font-size:.94rem;color:var(--ink-2)}
.compare{background:var(--coral-l);border-radius:var(--r-sm);padding:.8rem 1rem;font-size:.9rem;color:var(--ink-2)}
.compare strong{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--coral-d);margin-bottom:.25rem}
[data-theme="dark"] .compare strong{color:#FF9B86}

/* --- tarefa final --- */
.task p{margin:0;font-size:.95rem;color:var(--ink-2)}
.steps{margin:.4rem 0 0;padding-left:1.25rem}
.steps li{font-size:.92rem;margin-bottom:.35rem}
.model{background:var(--gold-l);border-radius:var(--r-sm);padding:.8rem 1rem}
.model-row{display:flex;align-items:center;gap:.7rem;padding:.3rem 0;font-size:.95rem;font-weight:600}
.model-row .say{width:32px;height:32px;font-size:.9rem;background:var(--surface);color:var(--gold-d)}

/* --- autoavaliação --- */
.check{display:flex;gap:.7rem;align-items:flex-start;padding:.6rem 0;border-bottom:1px solid var(--line);cursor:pointer}
.check:last-child{border-bottom:0}
.check input{width:20px;height:20px;flex:none;margin-top:.15rem;accent-color:var(--jade);cursor:pointer}
.check span{font-size:.93rem}
.check input:checked + span{color:var(--ink-3);text-decoration:line-through}

/* --- cartões de módulo --- */
.module-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.cefr{font-size:.66rem;font-weight:800;letter-spacing:.06em;padding:.2em .55em;border-radius:999px;
  background:var(--petrol-l);color:var(--petrol)}
[data-theme="dark"] .cefr{color:#8FC4BB}

.gram-ex-row{display:flex;align-items:center;gap:.7rem;padding:.3rem 0}
.gram-ex-row .say{width:32px;height:32px;font-size:.9rem;background:var(--surface)}
.gram p{margin:0 0 .9rem;font-size:.95rem;color:var(--ink-2)}
.gram-ex{background:var(--gold-l);border-radius:var(--r-sm);padding:.8rem 1rem}
.gram-ex div{padding:.3rem 0}
.gram-ex .g-pt{font-weight:600}
.gram-ex .g-zh{font-size:.86rem;color:var(--ink-2)}

/* =========================================================
   SUBUNIDADE — blocos de conteúdo
   ========================================================= */
.sub-kicker{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 .35rem}
.done-tag{color:var(--jade);font-size:.8em}
.unit-meta{color:var(--jade-d);font-weight:600}
[data-theme="dark"] .unit-meta{color:#7FD3BC}

.blocks{display:flex;flex-direction:column;gap:1.25rem;margin-bottom:1.75rem}
.b-text{margin:0;font-size:1rem;line-height:1.7;color:var(--ink-2)}

.b-callout{
  display:flex;gap:.9rem;align-items:flex-start;background:var(--surface);
  border:1px solid var(--line);border-left:4px solid var(--jade);
  border-radius:var(--r);padding:1.1rem 1.2rem;box-shadow:var(--shadow);
}
.b-ico{font-size:1.3rem;flex:none;line-height:1.3}
.b-callout strong{display:block;color:var(--heading);margin-bottom:.3rem}
.b-callout p{margin:0;font-size:.94rem;color:var(--ink-2);line-height:1.65}

/* =========================================================
   RODADA 9, ITEM 26 — CONTEÚDO × OBSERVAÇÃO
   Dois componentes reutilizáveis, para o aluno sempre distinguir o
   que é matéria do que é informação extra:
     .box-content  o que está sendo ensinado — fundo branco, faixa
                   petróleo à esquerda, título petróleo. Sempre igual.
     .box-note     observação / curiosidade / dica — fundo dourado
                   claro, ícone 💡, letra um pouco maior e mais ar.
   ========================================================= */
.box-content{
  background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--petrol);
  border-radius:var(--r);box-shadow:var(--shadow);
}
.box-content > div > strong{color:var(--petrol);font-size:1.05rem}
[data-theme="dark"] .box-content{border-left-color:#6FB6C9}
[data-theme="dark"] .box-content > div > strong{color:#9FD4E2}

.box-note{
  background:var(--gold-l);border:1px dashed color-mix(in srgb,var(--gold) 60%,var(--line));
  border-left:5px solid var(--gold);border-radius:var(--r);box-shadow:none;
  padding:1.2rem 1.35rem;
}
.box-note .b-ico{font-size:1.5rem}
.box-note strong{color:var(--gold-d)}
.box-note p{font-size:1.02rem;line-height:1.8;letter-spacing:.005em;color:var(--ink)}
.box-note-tag{
  display:block;margin-bottom:.2rem;font-size:.7rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gold-d);
}
[data-theme="dark"] .box-note{background:color-mix(in srgb,var(--gold) 12%,var(--surface))}
[data-theme="dark"] .box-note strong,[data-theme="dark"] .box-note-tag{color:var(--gold)}

/* o assunto principal da subunidade (Subunidade 4): mais chamativo */
.box-content.is-main{
  border-left-width:0;border-top:6px solid var(--coral);padding:1.4rem 1.5rem;
  background:linear-gradient(180deg,color-mix(in srgb,var(--coral) 9%,var(--surface)),var(--surface) 70%);
}
.box-content.is-main .b-ico{font-size:1.9rem}
.box-content.is-main > div > strong{font-size:clamp(1.3rem,3.4vw,1.6rem);color:var(--heading);line-height:1.25;margin-bottom:.45rem}
.box-content.is-main p{font-size:1rem}

.b-compare{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.b-col{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.1rem;box-shadow:var(--shadow)}
.b-col h4{margin:0 0 .6rem;font-size:.95rem}
.b-col ul{margin:0;padding-left:1.1rem}
.b-col li{font-size:.9rem;margin-bottom:.6rem;color:var(--ink-2)}
.b-col li .zh{color:var(--ink-3);font-size:.85rem}

.b-table-intro{margin:0 0 .75rem;color:var(--ink-2);font-size:.95rem;line-height:1.55}
.b-caption{margin:0 0 .5rem;font-size:.8rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3)}

.b-examples{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:.4rem 1.1rem;box-shadow:var(--shadow)}

/* alfabeto */
.b-alphabet{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
.letter{
  display:flex;flex-direction:column;align-items:center;gap:.1rem;padding:.7rem .4rem;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);
  transition:transform .15s var(--ease),border-color .15s,box-shadow .2s;
}
.letter:hover{transform:translateY(-3px);border-color:var(--jade);box-shadow:var(--shadow)}
.l-big{font-size:1.5rem;font-weight:800;color:var(--heading);line-height:1.1}
.l-name{font-size:.76rem;color:var(--coral);font-weight:700}
.l-word{font-size:.85rem;font-weight:600;margin-top:.2rem}
.l-zh{font-size:.74rem;color:var(--ink-3)}

/* sons */
.b-sounds{display:grid;gap:.7rem}
.sound{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:.9rem 1.1rem;box-shadow:var(--shadow)}
.sound.is-warn{border-left:4px solid var(--coral)}
.sound-head{display:flex;align-items:center;gap:.5rem;margin-bottom:.25rem}
.sound-label{font-weight:800;color:var(--heading);font-size:1rem}
.sound-hint{margin:0 0 .6rem;font-size:.88rem;color:var(--ink-2);line-height:1.6}
.sound-words{display:flex;flex-wrap:wrap;gap:.4rem}
.wchip{
  display:inline-flex;align-items:center;gap:.35rem;padding:.4em .8em;border-radius:11px;
  border:1px solid var(--line);background:var(--surface-2);color:var(--ink);
  font-weight:600;font-size:.9rem;transition:border-color .18s,transform .15s var(--ease);
}
.wchip:hover{border-color:var(--jade);transform:translateY(-2px)}
.wchip span{opacity:.45;font-size:.85em}

/* sílaba tônica */
.b-stress{display:flex;flex-wrap:wrap;gap:.6rem}
.stress-word{
  display:flex;flex-direction:column;gap:.15rem;padding:.7rem 1.1rem;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--surface);color:var(--ink);box-shadow:var(--shadow);
  transition:transform .15s var(--ease),border-color .15s;
}
.stress-word:hover{transform:translateY(-2px);border-color:var(--gold)}
.stress-word em{font-style:normal;font-size:1.1rem;color:var(--ink-3)}
.stress-word em.is-strong{color:var(--coral);font-weight:800;font-size:1.3rem}
.stress-word i{font-style:normal;opacity:.3;margin:0 .1rem}
.stress-word small{font-size:.76rem;color:var(--ink-3)}

/* entonação */
.b-intonation{display:grid;gap:.7rem}
/* ---------------------------------------------------------
   "Tem áudio aqui": um 🔊 pequeno no canto de tudo que fala.
   Antes, vários cartões eram clicáveis e nada dizia isso.
   --------------------------------------------------------- */
.has-audio{position:relative}
.audio-dot{
  position:absolute;top:5px;right:6px;font-size:.62rem;line-height:1;
  opacity:.45;pointer-events:none;
}
.has-audio:hover .audio-dot{opacity:.9}
.into-ear{font-size:.7rem;opacity:.45;margin-left:.35rem}
.into:hover .into-ear{opacity:.9}

/* ---------------------------------------------------------
   TABELA CRUZADA VOGAL × CONSOANTE

   Vinte e duas linhas por cinco colunas não cabem numa tela de
   celular, e comprimir tudo deixaria a sílaba ilegível — que é
   justamente o que se vem ler aqui. Então a tabela rola de lado,
   com a coluna das consoantes grudada na esquerda: o aluno nunca
   perde de vista de que letra é a linha que está olhando.
   --------------------------------------------------------- */
/* Rodada 6: a tabela passou a caber na largura da tela, sem rolar de
   lado — colunas de largura fixa, palavras que quebram linha, e as
   observações das linhas viraram balãozinho (.syl-tip). O overflow
   continua ligado só como rede de segurança para telas estreitíssimas. */
.b-syllables{margin:0 0 1.4rem}
.b-syllables .tbl-wrap{overflow:visible;border:1px solid var(--line);border-radius:var(--r-sm)}
.syl-table{border-collapse:separate;border-spacing:0;width:100%;table-layout:fixed;background:var(--surface)}
.syl-table col.syl-col-head{width:19%}
.syl-table th,.syl-table td{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:0}
.syl-table th:last-child,.syl-table td:last-child{border-right:0}
.syl-table tbody tr:last-child th,.syl-table tbody tr:last-child td{border-bottom:0}

/* sem rolagem própria, a linha das vogais gruda logo abaixo da barra do topo */
.syl-table thead th{background:var(--cream-d);position:sticky;top:var(--topbar-h);z-index:2}
.syl-table tbody th{
  position:relative;background:var(--surface-2);
  text-align:left;vertical-align:top;
}
.syl-table thead th:first-child{z-index:3}
.syl-table th,.syl-table td{min-width:0}
.syl-ex,.syl-zh{overflow-wrap:anywhere}

/* o balãozinho de observação: um "i" pequeno no canto da célula */
.syl-tip{
  position:absolute;bottom:.3rem;right:.3rem;z-index:4;
  width:1.05rem;height:1.05rem;border-radius:50%;padding:0;
  display:grid;place-items:center;
  border:1px solid var(--coral);background:var(--surface);color:var(--coral);
  font:italic 700 .66rem/1 Georgia,serif;cursor:help;
}
.syl-tip::after{
  content:attr(data-tip);
  position:absolute;left:-.3rem;top:calc(100% + .35rem);z-index:10;
  width:max-content;max-width:210px;padding:.45rem .6rem;border-radius:8px;
  background:var(--petrol);color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.18);
  font-family:var(--font, 'Outfit', system-ui, sans-serif);font-size:.74rem;font-weight:500;line-height:1.35;
  font-style:normal;text-align:left;white-space:normal;
  opacity:0;visibility:hidden;transform:translateY(-3px);transition:opacity .15s,transform .15s;
  pointer-events:none;
}
.syl-tip:hover::after,.syl-tip:focus-visible::after,.syl-tip.is-open::after{
  opacity:1;visibility:visible;transform:none;
}
/* Rodada 9, item 25: o balão não mora mais dentro da célula — ficava
   por baixo do ⓘ das outras linhas. Quem desenha é a camada única
   .tip-layer (TipLayer, em app.js), filha do <body>, acima de tudo. */
.syl-tip::after{content:none;display:none}
.syl-tip.is-open{background:var(--coral);color:#fff}
.tip-layer{
  position:fixed;z-index:2147483000;left:0;top:0;
  width:max-content;max-width:min(260px,calc(100vw - 16px));padding:.5rem .7rem;border-radius:9px;
  background:var(--petrol);color:#fff;box-shadow:0 10px 26px rgba(0,0,0,.25);
  font:500 .8rem/1.4 var(--font, 'Outfit', system-ui, sans-serif);pointer-events:none;
}
.tip-layer[hidden]{display:none}
.syl-tag{font-size:.62rem;font-weight:700;color:var(--coral);letter-spacing:.02em}

.syl-head{
  position:relative;display:flex;flex-direction:column;gap:.05rem;align-items:flex-start;
  width:100%;padding:.5rem .55rem;border:0;background:none;color:var(--ink);text-align:left;
  border-radius:0;transition:background .15s;
}
.syl-head:hover{background:var(--jade-l)}
.syl-head.is-flat{cursor:default}
.syl-big{font-size:1.15rem;font-weight:800;color:var(--petrol);line-height:1.1}
.syl-name{font-size:.7rem;color:var(--ink-3)}
.syl-ex{font-size:.78rem;color:var(--ink-2)}
.syl-zh{font-size:.72rem;color:var(--ink-3)}
thead .syl-big{color:var(--coral)}

.syl-cell{
  position:relative;display:flex;flex-direction:column;gap:.05rem;align-items:flex-start;
  width:100%;min-width:0;padding:.45rem .5rem;border:0;background:none;
  color:var(--ink);text-align:left;transition:background .15s;
}
.syl-cell:hover{background:var(--gold-l)}
.syl{font-weight:800;font-size:.92rem;color:var(--jade-d)}
.syl-cell .syl-ex{font-size:.76rem}
.syl-off{
  padding:.45rem .55rem;color:var(--ink-3);opacity:.5;font-size:.82rem;
  background:repeating-linear-gradient(-45deg,transparent 0 6px,var(--cream-d) 6px 7px);
}
.syl-off .syl{display:block;font-size:.9rem;opacity:.8}
[data-theme="dark"] .syl{color:#7FD3BC}
.syl-cell .syl-zh{font-size:.66rem;line-height:1.2}

/* combinação que quase não se usa: a sílaba aparece, esmaecida */
.syl-rare{padding:.45rem .5rem;vertical-align:top;background:var(--surface-2)}
.syl-rare .syl{display:block;opacity:.38}
.syl-rare-note{display:block;font-size:.62rem;line-height:1.2;color:var(--ink-3);opacity:.75;font-style:italic}

/* a grade das combinações (Ç, SS, CH…) usa a tabela cruzada como base */
.combo-table .syl-big{font-size:1.05rem;color:var(--coral)}
.combo-table th .syl-head.is-flat{padding:.5rem .55rem 1.3rem}
/* rodada 7: o som que a combinação faz, dito direto, embaixo dela */
.syl-table.combo-table col.syl-col-head{width:24%}
.combo-sound{
  display:block;margin-top:.25rem;font-size:.72rem;font-weight:700;line-height:1.3;
  color:var(--jade-d);background:var(--jade-l);border-radius:6px;padding:.15rem .35rem;
}
[data-theme="dark"] .combo-sound{color:#7FD3BC}
.combo-w{font-weight:700;font-size:.9rem}
.combo-w mark{background:none;color:var(--coral);font-weight:800}
[data-theme="dark"] .combo-w mark{color:#F2917B}
.combo-empty{background:var(--surface-2)}

/* celular: seis colunas em ~340px — letras menores, respiro menor */
@media (max-width:620px){
  .syl-table col.syl-col-head{width:19%}
  .syl-head,.syl-cell{padding:.35rem .18rem}
  .syl-off,.syl-rare{padding:.35rem .18rem}
  .syl-big{font-size:1rem}
  .syl{font-size:.8rem}
  .syl-ex,.syl-cell .syl-ex{font-size:.6rem;letter-spacing:-.01em}
  .syl-name{font-size:.6rem}
  tbody .syl-zh{font-size:.55rem}
  thead .syl-zh{font-size:.6rem}
  .syl-rare-note{font-size:.5rem}
  .combo-w{font-size:.66rem}
  .audio-dot{top:3px;right:3px;font-size:.5rem}
}
/* celular muito estreito: tabela rola dentro do próprio container */
@media (max-width:480px){
  .b-syllables .tbl-wrap{overflow-x:auto}
  .syl-table col.syl-col-head{width:22%}
  .syl-head,.syl-cell,.syl-off,.syl-rare{padding:.28rem .12rem}
  .syl-big{font-size:.9rem}
  .syl{font-size:.74rem}
  .syl-ex,.syl-cell .syl-ex{font-size:.56rem}
  .syl-name{font-size:.56rem}
  tbody .syl-zh{font-size:.5rem}
  thead .syl-zh{font-size:.56rem}
}

/* ---------------------------------------------------------
   COMBINAÇÕES DE LETRAS E ACENTOS
   Esquerda: o que é. Direita: onde aparece, com o pedaço
   responsável pelo som marcado na cor da marca.
   --------------------------------------------------------- */
.b-combos{display:grid;gap:.7rem;margin:0 0 1.4rem}
.combo{
  display:grid;grid-template-columns:minmax(190px,.9fr) 1.4fr;gap:.9rem;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:.75rem .9rem;align-items:start;
}
.combo-label{
  display:inline-block;font-weight:800;font-size:1.05rem;color:var(--petrol);
  background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:.1rem .5rem;
}
.combo-letters{display:block;margin-top:.35rem;font-weight:700;color:var(--coral);letter-spacing:.06em}
.combo-zh{margin:.45rem 0 .15rem;font-size:.85rem;color:var(--ink-2)}
.combo-pt{margin:0;font-size:.82rem;font-style:italic;color:var(--ink-3)}
.combo-body{margin:.45rem 0 0;font-size:.86rem;color:var(--ink-2);line-height:1.55}
.combo-words{display:flex;flex-wrap:wrap;gap:.4rem;align-content:flex-start}
.combo-word{
  position:relative;display:inline-flex;flex-direction:column;align-items:flex-start;gap:.05rem;
  padding:.4rem .7rem;border-radius:10px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font-size:.94rem;font-weight:600;transition:border-color .15s,transform .15s var(--ease);
}
.combo-word:hover{border-color:var(--jade);transform:translateY(-2px)}
.combo-word mark{background:none;color:var(--coral);font-weight:800}
/* rodada 8: a tradução do exemplo, pequena, logo abaixo da palavra */
.combo-word-zh{font-size:.74rem;font-weight:500;color:var(--ink-3);line-height:1.25}

/* rodada 8: a setinha ao lado do nome do acento abre um balãozinho
   com o SINAL sozinho e grande — reforço visual rápido. Reaproveita o
   balão de .syl-tip; aqui ele só muda de lugar e de tamanho. */
.combo-sym{
  position:relative;bottom:auto;right:auto;margin-left:.4rem;vertical-align:middle;
  width:1.25rem;height:1.25rem;font:700 .7rem/1 var(--font);
  border-color:var(--jade);color:var(--jade);cursor:pointer;
}
.combo-sym::after{
  left:50%;transform:translate(-50%,-3px);
  font:800 2.1rem/1 var(--font);letter-spacing:0;text-align:center;
  padding:.5rem .9rem;min-width:3.2rem;
}
.combo-sym:hover::after,.combo-sym:focus-visible::after,.combo-sym.is-open::after{
  transform:translate(-50%,0);
}
[data-theme="dark"] .combo-word mark{color:#F2917B}
/* rodada 9, item 25: "Acento agudo → [ ´ ]" sempre à vista */
.combo-head{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.combo-sign{display:inline-flex;align-items:center;gap:.35rem}
.combo-arrow{color:var(--jade);font-weight:800;font-size:1.05rem}
.combo-glyph{
  display:inline-grid;place-items:center;min-width:2.6rem;height:2.6rem;padding:0 .5rem;
  font:800 2rem/1 var(--font);color:#fff;background:var(--petrol);border-radius:10px;
  box-shadow:0 4px 12px rgba(0,0,0,.14);
}

@media (max-width:620px){
  .combo{grid-template-columns:1fr;gap:.55rem}
}

/* Observação (E × É, avô × avó): não é regra de acento — outra cor */
.b-combos.is-note .combo{
  background:var(--gold-l);border-color:color-mix(in srgb,var(--gold) 55%,var(--line));
  border-left:4px solid var(--gold);
}
.combo-note-tag{
  display:block;margin-bottom:.35rem;font-size:.72rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--gold-d);
}
[data-theme="dark"] .combo-note-tag{color:var(--gold)}

/* ---------------------------------------------------------
   O VERBO MUDA — os três fatores e o "o que mudou" (rodada 6)
   --------------------------------------------------------- */
.b-factors{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin:0 0 1.2rem}
.factor{
  position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.3rem;
  background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--jade);
  border-radius:var(--r-sm);padding:1rem .7rem .85rem;box-shadow:var(--shadow);
}
.factor:nth-child(2){border-top-color:var(--gold)}
.factor:nth-child(3){border-top-color:var(--coral)}
.factor-n{
  position:absolute;top:.4rem;left:.5rem;font-size:.7rem;font-weight:800;color:var(--ink-3);
}
.factor-ico{font-size:1.8rem;line-height:1}
.factor strong{font-size:.95rem;color:var(--heading);line-height:1.25}
.factor small{font-size:.76rem;color:var(--ink-3)}
@media (max-width:560px){ .b-factors{grid-template-columns:1fr} .factor{flex-direction:row;text-align:left} }

.b-changes{display:grid;gap:.7rem;margin:0 0 1.4rem}
.chg{
  display:grid;grid-template-columns:1fr auto 1fr;gap:.4rem .8rem;align-items:center;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:.8rem .9rem;
}
.chg-side{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.chg-who{display:inline-flex;align-items:center;gap:.35rem;font-size:1.3rem;line-height:1}
.chg-who small{font-size:.74rem;color:var(--ink-3);font-weight:600}
.chg-pt{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;font-weight:700;font-size:1.02rem}
.chg-zh{font-size:.8rem;color:var(--ink-3)}
.chg-arrow{font-size:1.4rem;color:var(--ink-3)}
.chg-why{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;
  border-top:1px dashed var(--line);padding-top:.5rem}
.chg-why-lbl{font-size:.74rem;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}
.chg-tag{font-size:.8rem;font-weight:700;border-radius:99px;padding:.15rem .6rem}
.chg-tag.chg-t-who{background:var(--jade-l);color:var(--jade-d)}
.chg-tag.chg-t-when{background:var(--gold-l);color:var(--gold-d)}
.chg-tag.chg-t-mode{background:var(--coral-l);color:var(--coral-d)}
.chg-and{font-size:.8rem;color:var(--ink-3)}
[data-theme="dark"] .chg-tag.chg-t-who{color:#7FD3BC}
[data-theme="dark"] .chg-tag.chg-t-when{color:var(--gold)}
[data-theme="dark"] .chg-tag.chg-t-mode{color:#FF9B86}
.chg mark.tgt{font-size:inherit}
@media (max-width:560px){
  .chg{grid-template-columns:1fr}
  .chg-arrow{transform:rotate(90deg);justify-self:start;margin-left:.3rem}
}

/* ---------------------------------------------------------
   UM SOM, UMA TABELA (ÃO · M · N)
   --------------------------------------------------------- */
.b-soundtable{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:.9rem 1rem;margin:0 0 .9rem;box-shadow:var(--shadow);
}
.st-head{display:flex;align-items:flex-start;gap:.85rem;margin-bottom:.7rem}
/* selo do mesmo tamanho para qualquer som — "M" e "R × RR" ocupam a
   mesma caixa, então nenhum cartão fica com cara diferente */
.st-label{
  flex:none;min-width:5.6rem;padding:0 .7rem;height:2.6rem;display:grid;place-items:center;text-align:center;
  font-weight:800;font-size:1rem;letter-spacing:.02em;color:#fff;white-space:nowrap;
  background:linear-gradient(135deg,var(--petrol),var(--jade));border-radius:12px;
}
.st-head-txt{min-width:0}
.st-tag{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--coral-d);margin-bottom:.15rem}
[data-theme="dark"] .st-tag{color:#FF9B86}
.st-head p{margin:0;font-size:.88rem;color:var(--ink-2);line-height:1.55}
@media (max-width:480px){ .st-head{flex-direction:column;gap:.45rem} }
.st-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.45rem}
/* rodada 9, item 33: o vídeo do movimento da boca ao lado do som */
.st-body{display:grid;gap:.8rem}
@media (min-width:760px){ .b-soundtable.has-video .st-body{grid-template-columns:minmax(0,1.6fr) minmax(200px,1fr);align-items:start} }
.admin-row.is-slot{margin-left:1.4rem;border-left:3px solid var(--jade)}
.st-word{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;
  padding:.5rem .65rem;border-radius:10px;border:1px solid var(--line);background:var(--surface-2);
  color:var(--ink);text-align:left;transition:border-color .15s,transform .15s var(--ease);
}
.st-word:hover{border-color:var(--jade);transform:translateY(-2px)}
.st-word strong{font-size:1rem}
.st-word small{font-size:.76rem;color:var(--ink-3)}

/* ---------------------------------------------------------
   TECLADO ABNT2 desenhado
   --------------------------------------------------------- */
.b-keyboard{margin:0 0 1.4rem}
.kb{
  display:flex;flex-direction:column;gap:4px;padding:10px;border-radius:14px;
  background:linear-gradient(180deg,#2B3A40,#1C272B);box-shadow:var(--shadow-lg);
  overflow-x:auto;
}
.kb-row{display:flex;gap:4px;min-width:560px}
.kb-key{
  position:relative;min-height:38px;border-radius:6px;background:#F4F1EA;color:#2B3438;
  box-shadow:0 2px 0 #9FA7AA;display:flex;flex-direction:column;justify-content:center;align-items:center;
  font-size:.78rem;font-weight:700;line-height:1;
}
.kb-key i{font-style:normal;font-size:.6rem;font-weight:600;color:#7B8589;margin-bottom:2px}
.kb-key.is-hl{background:var(--gold);color:#3A2B00;box-shadow:0 2px 0 var(--gold-d),0 0 0 2px #fff inset}
.kb-key.is-hl i{color:#5A4300}
.b-keyboard figcaption{margin-top:.6rem;font-size:.85rem;color:var(--ink-2)}
.kb-legend{list-style:none;margin:.4rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem 1rem}
.kb-legend kbd{
  display:inline-block;min-width:1.8em;text-align:center;border-radius:6px;padding:.05rem .35rem;
  background:var(--gold);color:#3A2B00;font-weight:800;font-family:var(--font);
}

/* ---------------------------------------------------------
   Pedaços ligados entre português e chinês ({1:…})
   Cada número tem uma cor; passar o mouse acende o par.
   --------------------------------------------------------- */
.lk{border-radius:4px;padding:0 .08em;transition:background .15s,box-shadow .15s;cursor:pointer;
  border-bottom:2px solid transparent}
/* Rodada 11, item 5: paleta nova — sem coral (reservado para erro) e sem jade (reservado para acerto)
   1=violeta · 2=dourado · 3=âmbar · 4=petróleo · 5=violeta-escuro · 6=dourado-escuro */
.lk-1{border-bottom-color:color-mix(in srgb,var(--violet) 60%,transparent)}
.lk-2{border-bottom-color:color-mix(in srgb,var(--gold) 70%,transparent)}
.lk-3{border-bottom-color:color-mix(in srgb,var(--amber) 65%,transparent)}
.lk-4{border-bottom-color:color-mix(in srgb,var(--petrol) 55%,transparent)}
.lk-5{border-bottom-color:color-mix(in srgb,var(--violet-d) 55%,transparent)}
.lk-6{border-bottom-color:color-mix(in srgb,var(--amber-d) 55%,transparent)}
.lk-1.is-lit{background:var(--violet-l);box-shadow:0 0 0 2px var(--violet)}
.lk-2.is-lit{background:var(--gold-l);box-shadow:0 0 0 2px var(--gold)}
.lk-3.is-lit{background:var(--amber-l);box-shadow:0 0 0 2px var(--amber)}
.lk-4.is-lit{background:var(--petrol-l);box-shadow:0 0 0 2px var(--petrol)}
.lk-5.is-lit{background:var(--violet-l);box-shadow:0 0 0 2px var(--violet-d)}
.lk-6.is-lit{background:var(--amber-l);box-shadow:0 0 0 2px var(--amber-d)}

/* Rodada 7 — o mesmo apoio em TODO par português ↔ chinês: a mini
   tradução [mesa|桌子] e o "mesa（桌子）" dos textos explicativos.
   Sublinhado fino na cor do par; passar o mouse acende os dois lados. */
.pair,.gl[data-pair]{border-radius:4px;transition:background .15s,box-shadow .15s;cursor:pointer}
.pair{border-bottom:2px solid transparent;padding:0 .06em}
.gl[data-pair]{border-bottom:2px dotted transparent}
.pair-1,.gl-1{border-bottom-color:color-mix(in srgb,var(--violet) 60%,transparent)}
.pair-2,.gl-2{border-bottom-color:color-mix(in srgb,var(--gold) 70%,transparent)}
.pair-3,.gl-3{border-bottom-color:color-mix(in srgb,var(--amber) 65%,transparent)}
.pair-4,.gl-4{border-bottom-color:color-mix(in srgb,var(--petrol) 55%,transparent)}
.pair-1.is-lit,.gl-1.is-lit{background:var(--violet-l);box-shadow:0 0 0 2px var(--violet)}
.pair-2.is-lit,.gl-2.is-lit{background:var(--gold-l);box-shadow:0 0 0 2px var(--gold)}
.pair-3.is-lit,.gl-3.is-lit{background:var(--amber-l);box-shadow:0 0 0 2px var(--amber)}
.pair-4.is-lit,.gl-4.is-lit{background:var(--petrol-l);box-shadow:0 0 0 2px var(--petrol)}
.gl.is-lit .gl-zh{color:inherit;opacity:1}
mark.tgt[data-pair]{cursor:pointer;transition:box-shadow .15s}
mark.tgt.is-lit{box-shadow:0 0 0 2px var(--gold)}
/* dentro de um botão de alternativa, o par não rouba o clique da alternativa */
.opt .gl,.opt .pair,.chip .gl{cursor:inherit}
/* Rodada 9, item 27: numa alternativa, cor só existe quando há
   associação por cor com a tradução (.has-tr: português em cima,
   chinês embaixo, pedaço com pedaço). Sem isso, texto normal — o
   sublinhado coral da 1ª alternativa parecia a marca de "errado".
   O vermelho de erro continua, só no feedback (.is-wrong). */
.opt:not(.has-tr) :is(.lk,.gl,.pair){border-bottom-color:transparent !important;background:none !important;box-shadow:none !important;color:inherit}
.opt:not(.has-tr) mark{background:none;color:inherit;border:0;padding:0}
/* tabelas bilíngues: a linha inteira acende — o português e o chinês
   da mesma linha ficam ligados pela cor */
.tbl tbody tr{transition:background .12s}
.tbl tbody tr:hover td{background:var(--gold-l)}

/* ---------------------------------------------------------
   A mesma frase em vários países de língua portuguesa
   --------------------------------------------------------- */
.b-variants{display:grid;gap:.9rem}
.variant{
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:.8rem .95rem;
}
.variant-zh{margin:0 0 .5rem;font-weight:700;color:var(--ink-2);font-size:.9rem}
.variant-row{display:flex;align-items:center;gap:.55rem;padding:.25rem 0;flex-wrap:wrap}
.variant-flag{font-size:1.15rem;line-height:1;flex:none;display:inline-flex}
.variant-country{font-size:.8rem;font-weight:600;color:var(--ink-2);min-width:6.5em;flex:none}
.variant-text{font-weight:600;color:var(--ink);flex:1;min-width:12ch}
.variant-note{margin:.55rem 0 0;font-size:.82rem;color:var(--ink-3)}

/* ---------------------------------------------------------
   Teclado: tecla morta + vogal = letra acentuada
   --------------------------------------------------------- */
.b-keys{display:grid;gap:.5rem}
.keyrow{
  display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:.55rem .8rem;
}
.keys-combo{display:flex;align-items:center;gap:.3rem}
.keys-combo i{font-style:normal;opacity:.45;font-size:.85rem}
.keyrow kbd{
  display:grid;place-items:center;min-width:2.1rem;height:2.1rem;padding:0 .35rem;
  border-radius:8px;border:1px solid var(--line);border-bottom-width:3px;
  background:var(--surface);color:var(--ink);font-family:inherit;font-weight:700;font-size:1rem;
}
.keys-eq{opacity:.45;font-weight:700}
.keys-out{
  display:grid;place-items:center;min-width:2.1rem;height:2.1rem;border-radius:8px;
  background:var(--jade-l);color:var(--jade-d);font-weight:800;font-size:1.15rem;
}
.keys-word{margin-left:.2rem}
.keyrow small{color:var(--ink-3);font-size:.8rem}

/* rodada 9, item 28: "onde fica cada tecla" — a tecla em miniatura */
.b-keyplaces{display:grid;gap:.55rem}
.kp-row{
  display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:.8rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:.7rem .9rem;box-shadow:var(--shadow);
}
.kp-keys{display:inline-flex;align-items:center;gap:.35rem}
.kp-keys em{font-style:normal;font-weight:800;color:var(--ink-3)}
.kp-arrow{font-size:1.3rem;font-weight:800;color:var(--jade)}
.kp-where{display:grid;grid-template-columns:auto 1fr;column-gap:.7rem;align-items:center}
.kp-where strong{color:var(--heading);font-size:.98rem}
.kp-where small{grid-column:2;color:var(--ink-3);font-size:.84rem}
.kp-where.no-map{grid-template-columns:1fr}
.kp-where.no-map small{grid-column:1}
.kp-map{grid-row:span 2;display:inline-flex;gap:3px;padding:4px;border-radius:8px;background:var(--cream-d)}
.mini-key{
  position:relative;display:inline-grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:8px;
  background:linear-gradient(180deg,var(--surface),var(--surface-2));border:1px solid var(--line);
  box-shadow:0 3px 0 color-mix(in srgb,var(--ink) 22%,transparent),0 4px 8px rgba(0,0,0,.08);
  font-family:var(--font);color:var(--ink);
}
.mini-key b{font-size:1.25rem;font-weight:800;line-height:1}
.mini-key i{position:absolute;top:3px;left:6px;font-style:normal;font-size:.72rem;font-weight:700;color:var(--ink-3)}
.mini-key.is-wide{width:4.6rem}
.mini-key.is-hl{background:linear-gradient(180deg,var(--gold-l),color-mix(in srgb,var(--gold) 30%,var(--surface)));border-color:var(--gold)}
.mini-key.is-xs{width:1.7rem;height:1.7rem;border-radius:5px;box-shadow:0 2px 0 color-mix(in srgb,var(--ink) 18%,transparent)}
.mini-key.is-xs b{font-size:.8rem}
.mini-key.is-xs i{font-size:.5rem;top:1px;left:3px}
.mini-key.is-ref{opacity:.6}
@media (max-width:520px){
  .kp-row{grid-template-columns:auto auto;row-gap:.5rem}
  .kp-where{grid-column:1 / -1}
}

/* o Checklist é uma seção à parte: fica claro que não trava nada */
.extra-section{margin-top:1.75rem}
.unit.is-extra{border-style:dashed}

/* Bandeira desenhada (ver flagify em data.js). O contorno fino segura
   as bandeiras claras no tema claro e as escuras no tema escuro.
   (O seletor de idioma NÃO usa bandeira — mostra "Português"/"中文".) */
svg.flag{
  display:inline-block;vertical-align:-.12em;flex:none;
  border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.12);
}

/* "isto volta nas próximas unidades" — menor e mais discreto que um
   callout, com a borda tracejada de coisa ainda por completar */
.b-later{
  border:1.5px dashed var(--gold);border-radius:var(--r-sm);
  background:color-mix(in srgb, var(--gold) 8%, transparent);
  padding:.6rem .85rem;
}
/* no escuro o fundo translúcido sumia no fundo da página */
[data-theme="dark"] .b-later{background:color-mix(in srgb, var(--gold) 12%, var(--surface))}
.b-later-tag{
  display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.02em;
  color:var(--ink-2);margin-bottom:.2rem;
}
.b-later p{margin:0;font-size:.88rem;color:var(--ink-2)}

/* a mesma frase em quatro intenções (entonação) */
/* Entonação — rodada 7: um tipo por cartão, empilhados, cada um com o
   desenho da melodia e o seu próprio exemplo */
.b-tones{display:grid;gap:.7rem}
.tone-card{
  --tc:var(--petrol);
  background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--tc);
  border-radius:var(--r);padding:.85rem 1rem;box-shadow:var(--shadow);
}
.tone-statement{--tc:var(--petrol)}
.tone-sad{--tc:#7C8FB5}
.tone-neutral{--tc:var(--jade)}
.tone-angry{--tc:var(--coral)}
.tone-excited{--tc:var(--gold)}
.tone-head{display:flex;align-items:center;gap:.55rem;margin-bottom:.35rem}
.tone-face{font-size:1.35rem;line-height:1}
.tone-label{font-size:1rem;font-weight:800;color:var(--heading)}
.tone-curve{margin-left:auto;flex:none;overflow:visible}
.tone-curve .tc-base{stroke:var(--line);stroke-width:1.2;stroke-dasharray:3 3;fill:none}
.tone-curve .tc-line{stroke:var(--tc);stroke-width:3.2;stroke-linecap:round;fill:none}
.tone-curve .tc-dot{fill:var(--tc)}
.tone-hint{margin:0 0 .6rem;font-size:.9rem;color:var(--ink-2);line-height:1.55}
.tone-ex{
  display:flex;align-items:center;gap:.7rem;background:var(--surface-2);
  border-radius:var(--r-sm);padding:.55rem .75rem;
}
.tone-text{font-weight:700;font-size:1.02rem;color:var(--ink)}
.tone-zh{font-size:.85rem;color:var(--ink-3);margin-top:.1rem}


.into-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.into{
  display:inline-flex;align-items:center;gap:.5rem;padding:.6em 1em;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:600;font-size:.94rem;
}
.into:hover{border-color:var(--jade)}
.into .arrow{font-size:1.1rem;color:var(--jade)}
.into.is-q{border-color:var(--coral-l);background:var(--coral-l)}
.into.is-q .arrow{color:var(--coral)}
.into-row small{width:100%;color:var(--ink-3);font-size:.8rem}

/* ---------------------------------------------------------
   VOCABULÁRIO COM FIGURA e DIÁLOGO (rodada 7)
   --------------------------------------------------------- */
.b-vocab .mini-hint{margin:0 0 .5rem}
.vocab-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:.55rem}
.vocab-card{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:.15rem;text-align:center;
  padding:.8rem .5rem .7rem;border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--surface);color:var(--ink);box-shadow:var(--shadow);
  transition:transform .15s var(--ease),border-color .15s;
}
.vocab-card:hover{transform:translateY(-2px);border-color:var(--jade)}
.vocab-ico{font-size:2rem;line-height:1.1;margin-bottom:.15rem}
.vocab-pt{font-weight:700;font-size:1rem}
.vocab-zh{font-size:.85rem;color:var(--ink-2);display:block;text-align:center}
.vocab-py{font-size:.72rem;color:var(--ink-3);font-style:italic}

.b-dialogue{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:1rem 1.05rem;
}
.dlg-head strong{color:var(--heading);font-size:1rem}
.dlg-head p{margin:.2rem 0 0;font-size:.88rem;color:var(--ink-2)}
.b-dialogue .mini-hint{margin:.5rem 0 .7rem}
.dlg-lines{display:flex;flex-direction:column;gap:.55rem}
.dlg-line{display:flex;flex-direction:column;align-items:flex-start;max-width:86%}
.dlg-line.dlg-r{align-self:flex-end;align-items:flex-end}
.dlg-who{font-size:.72rem;font-weight:700;color:var(--ink-3);margin:0 .5rem .12rem}
.dlg-bubble{
  background:var(--jade-l);border-radius:16px 16px 16px 4px;padding:.55rem .8rem;
}
.dlg-r .dlg-bubble{background:var(--gold-l);border-radius:16px 16px 4px 16px}
.dlg-pt{font-weight:600;color:var(--ink);display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.dlg-zh{font-size:.85rem;color:var(--ink-2);margin-top:.15rem}

/* =========================================================
   RODADA 9, ITENS 30 E 31 — DIÁLOGOS
   · a caixa do diálogo tem borda grossa na cor da marca: é um bloco
     diferente de tudo à volta;
   · avatar ao lado de cada fala;
   · o nome de quem fala numa etiqueta de fundo claro próprio, uma cor
     por gênero, com contraste nos dois temas (antes se perdia no fundo).
   ========================================================= */
.b-dialogue{border:3px solid var(--petrol);box-shadow:0 6px 18px rgba(31,78,95,.12)}
[data-theme="dark"] .b-dialogue{border-color:#5FA3B8}
.dlg-line{flex-direction:row;align-items:flex-end;gap:.45rem}
.dlg-line.dlg-r{flex-direction:row-reverse;align-items:flex-end}
.dlg-col{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.dlg-r .dlg-col{align-items:flex-end}
.dlg-av{
  flex:none;display:grid;place-items:center;width:2.3rem;height:2.3rem;border-radius:50%;
  font-size:1.35rem;line-height:1;background:var(--surface-2);border:2px solid var(--line);
}
.dlg-f .dlg-av{border-color:color-mix(in srgb,var(--coral) 55%,var(--line))}
.dlg-m .dlg-av{border-color:color-mix(in srgb,var(--petrol) 55%,var(--line))}
.dlg-av.is-xs{width:1.5rem;height:1.5rem;font-size:.9rem;border-width:1px;margin-right:.3rem;vertical-align:middle;display:inline-grid}
.dlg-who{
  display:inline-block;margin:0 .3rem .2rem;padding:.08rem .55rem;border-radius:999px;
  font-size:.74rem;font-weight:800;letter-spacing:.01em;
}
.dlg-f .dlg-who,.dlg-chip.dlg-f .dlg-chip-who{background:#FDE3DC;color:#8A2E1E}
.dlg-m .dlg-who,.dlg-chip.dlg-m .dlg-chip-who{background:#DCEDF2;color:#16404D}
[data-theme="dark"] .dlg-f .dlg-who,[data-theme="dark"] .dlg-chip.dlg-f .dlg-chip-who{background:#5A2A22;color:#FFD7CC}
[data-theme="dark"] .dlg-m .dlg-who,[data-theme="dark"] .dlg-chip.dlg-m .dlg-chip-who{background:#1D4552;color:#D4EEF5}
.dlg-chip .dlg-chip-who{border-radius:999px;padding:.12rem .5rem;align-self:center;display:inline-flex;align-items:center}

/* um vídeo curto por diálogo: ao lado no computador, embaixo no celular */
.dlg-with-video{display:grid;gap:1rem;align-items:start}
@media (min-width:860px){ .dlg-with-video{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)} }
.mini-video{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.mini-video .video-frame{border-radius:0}
.mini-video figcaption{padding:.45rem .7rem;font-size:.8rem;font-weight:600;color:var(--ink-2)}
.mini-video-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;aspect-ratio:16/9;
  background:repeating-linear-gradient(-45deg,var(--surface-2) 0 10px,var(--cream-d) 10px 11px);color:var(--ink-3);
}
.mini-video-empty span{font-size:1.6rem}
.mini-video-empty small{font-size:.74rem}

/* grupos de vocabulário, cada um no seu balão de conteúdo */
.vocab-group > div{flex:1;min-width:0}
.vocab-group .vocab-grid{margin-top:.6rem}
.vocab-group .mini-hint{margin:.4rem 0 0}

/* cartões de cultura: as expressões com 🔊 */
.cc-words{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.7rem}

/* cards de cultura */
.b-cards{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.culture-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:1.2rem;box-shadow:var(--shadow)}
.cc-ico{font-size:1.6rem;display:block;margin-bottom:.5rem}
/* ---------------------------------------------------------
   APPS LADO A LADO (rodada 8) — ver o bloco appPairs em app.js
   --------------------------------------------------------- */
.b-apps{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:1.1rem 1.2rem;box-shadow:var(--shadow);
}
.apps-title{margin:0 0 .4rem;font-size:1.1rem}
.apps-intro{margin:0 0 1rem;font-size:.92rem;color:var(--ink-2);line-height:1.65}
.apps-head{
  display:grid;grid-template-columns:1fr 2.2rem 1fr;gap:.4rem;align-items:center;
  margin-bottom:.5rem;
}
.apps-head-side{
  display:flex;align-items:center;gap:.35rem;justify-content:center;
  font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
}
.apps-list{display:grid;gap:.6rem}
.app-pair{
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:.7rem .8rem;
}
.app-row{display:grid;grid-template-columns:1fr 2.2rem 1fr;gap:.4rem;align-items:stretch}
.app-side{
  display:flex;align-items:center;gap:.5rem;min-width:0;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:.45rem .6rem;
}
.app-side strong{font-size:.95rem;line-height:1.25;overflow-wrap:anywhere}
.app-cn{border-left:4px solid var(--coral)}
.app-br{border-left:4px solid var(--jade)}
/* ícones dos apps: quadrado de cantos arredondados, como na tela do
   celular. As imagens (assets/apps) já vêm recortadas sem borda; um anel
   neutro bem fino dá contorno aos ícones de fundo branco. */
.app-icos{display:flex;gap:.3rem;flex:none}
.app-logo{
  width:2.4rem;height:2.4rem;border-radius:24%;flex:none;display:block;object-fit:cover;
  box-shadow:0 0 0 1px rgba(31,42,46,.08),0 2px 5px -2px rgba(31,42,46,.25);
}
.app-emoji{display:grid;place-items:center;font-size:1.35rem;line-height:1;
  background:linear-gradient(145deg,var(--surface-2),var(--cream-d))}
[data-theme="dark"] .app-logo{box-shadow:0 0 0 1px rgba(255,255,255,.1),0 2px 6px -2px rgba(0,0,0,.6)}
.app-eq{display:grid;place-items:center;font-size:1.15rem;font-weight:800;color:var(--ink-3)}
.app-what{margin:.5rem 0 0;font-size:.88rem;color:var(--ink-2);line-height:1.6}
.app-note{
  margin:.4rem 0 0;font-size:.82rem;color:var(--ink-2);line-height:1.55;
  background:var(--gold-l);border-radius:9px;padding:.35rem .55rem;
}
.apps-only{margin-top:.9rem}
@media (max-width:560px){
  .apps-head{display:none}
  .app-row{grid-template-columns:1fr}
  .app-eq{transform:rotate(90deg);height:1.2rem}
}

.culture-card h4{margin:0 0 .4rem}
.culture-card p{margin:0;font-size:.92rem;color:var(--ink-2);line-height:1.65}

/* vídeo */
.video-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);overflow:hidden;margin-bottom:1.5rem}
.video-head{display:flex;align-items:center;gap:.7rem;padding:.9rem 1.2rem;
  border-bottom:1px solid var(--line);background:var(--surface-2);flex-wrap:wrap}
.video-min{margin-left:auto;font-size:.8rem;color:var(--ink-3);font-weight:600}
.video-frame{position:relative;padding-top:56.25%}
.video-frame iframe,.video-frame video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.video-empty{padding:2.2rem 1.2rem;text-align:center;color:var(--ink-3);
  background:repeating-linear-gradient(45deg,var(--surface-2),var(--surface-2) 12px,transparent 12px,transparent 24px)}
.video-empty span{font-size:2.4rem;display:block;margin-bottom:.5rem}
.video-empty p{margin:0 0 .3rem;color:var(--ink-2);font-weight:600}
.video-empty small{font-size:.8rem}

/* chamada para os exercícios */
.sub-cta{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  background:linear-gradient(135deg,var(--jade-l),var(--gold-l));
  border:1px solid var(--line);border-radius:var(--r);padding:1.2rem 1.3rem;
}
.sub-cta-note{margin:0;font-size:.9rem;color:var(--ink-2);font-weight:600}
.sub-nav{display:flex;justify-content:space-between;align-items:center;gap:.75rem;margin-top:1.25rem}
.sub-nav-center{display:flex;flex-direction:column;align-items:center;gap:.5rem}
/* O PDF, discreto, entre "anterior" e "seguinte": um botão pequeno que
   abre um balãozinho com as opções (rodada 6). */
.pdf-balloon{position:relative;display:flex;justify-content:center}
/* Rodada 7: o botão do PDF chama atenção — coral da marca e um pulso
   sutil (cresce um pouco e volta) a cada poucos segundos. */
.pdf-pill{
  border:0;background:linear-gradient(135deg,var(--coral),#EE8A5E);color:#fff;
  border-radius:999px;padding:.5em 1.15em;font-size:.86rem;font-weight:800;letter-spacing:.01em;
  box-shadow:0 6px 16px -6px var(--coral);
  transition:filter .15s,box-shadow .15s;
  animation:pdfPulse 3.6s var(--ease) infinite;
}
.pdf-pill:hover,.pdf-pill[aria-expanded="true"]{filter:brightness(1.06);box-shadow:0 8px 20px -6px var(--coral-d);animation-play-state:paused}
@keyframes pdfPulse{
  0%,72%,100%{transform:scale(1)}
  80%{transform:scale(1.09)}
  88%{transform:scale(.98)}
  94%{transform:scale(1.03)}
}
@media (prefers-reduced-motion:reduce){ .pdf-pill{animation:none} }
.pdf-pop{
  position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);z-index:20;
  width:max-content;max-width:min(300px,86vw);display:flex;flex-direction:column;gap:.2rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  box-shadow:var(--shadow-lg);padding:.4rem;
}
.pdf-pop::after{
  content:"";position:absolute;top:100%;left:50%;margin-left:-7px;
  border:7px solid transparent;border-top-color:var(--surface);
}
.pdf-op{
  display:flex;align-items:center;gap:.45rem;text-align:left;border:0;background:none;color:var(--ink);
  padding:.45rem .6rem;border-radius:8px;font-size:.85rem;font-weight:600;
}
.pdf-op:hover{background:var(--gold-l)}
.pdf-op small{margin-left:auto;padding-left:.8rem;color:var(--ink-3);font-weight:500}
.b-check{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:.4rem 1.1rem;box-shadow:var(--shadow)}

/* =========================================================
   ATIVIDADES
   ========================================================= */
.q-subject-wrap{margin-bottom:1.2rem}
.q-subject-wrap .q-subject{margin-bottom:0}
.q-subject{
  display:flex;align-items:center;flex-wrap:nowrap;gap:.7rem;
  font-size:clamp(1.4rem,4vw,1.9rem);font-weight:800;color:var(--coral);
  background:var(--coral-l);border-radius:var(--r);padding:.9rem 1.2rem;margin-bottom:1.2rem;
  text-align:center;
}
/* botão de áudio à esquerda, texto ocupa o restante */
.q-subject-txt{flex:1;min-width:0;text-align:center}
/* Rodada 11, item 5: garante que o botão .say dentro do q-subject não "caia" para baixo do texto */
.q-subject .say{flex:none;align-self:center}
/* Frase inteira no lugar de palavra solta: o tamanho de palavra-alvo
   (quase 2rem, negrito 800) deixava a frase enorme e quebrada. */
.q-subject.is-long{
  font-size:clamp(1.05rem,2.6vw,1.25rem);font-weight:600;color:var(--ink);
  background:var(--surface-2);border:1px solid var(--line);padding:.8rem 1rem;line-height:1.7;
}
/* Rodada 8: a tradução do enunciado vem numa LINHA ABAIXO da frase em
   português, nunca entre parênteses no meio dela. É a mesma leitura de
   sempre — português primeiro, mandarim embaixo — e os pedaços
   continuam acendendo por cor. */
.q-subject-zh{
  margin-top:.4rem;text-align:center;line-height:1.6;
  font-size:clamp(.92rem,2.2vw,1.02rem);font-weight:600;color:var(--ink-2);
}
.q-pair-side .q-subject-zh{
  width:100%;margin-top:.3rem;padding-top:.3rem;border-top:1px dashed var(--line);
  font-size:.9rem;font-weight:500;
}
/* "antes → depois" (o que fez o verbo mudar?): duas frases lado a lado,
   no mesmo padrão de cartão das alternativas */
.q-pair{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:.6rem;margin-bottom:1.2rem}
.q-pair-side{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.2rem .35rem;text-align:center;
  background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:.75rem .8rem;
  font-size:clamp(1rem,2.4vw,1.15rem);font-weight:600;color:var(--ink);line-height:1.6;
}
.q-pair-side mark.tgt{font-size:1.05em}
/* os cartões esticam para a mesma altura; a seta fica no meio deles */
.q-pair-arrow{align-self:center;font-size:1.2rem;color:var(--ink-3);font-weight:700}
@media (max-width:520px){
  .q-pair{grid-template-columns:1fr}
  .q-pair-arrow{justify-self:center;transform:rotate(90deg)}
}
/* ---------------------------------------------------------
   DIÁLOGO E VÍDEO DENTRO DO EXERCÍCIO (rodada 8)
   --------------------------------------------------------- */
/* o diálogo do exercício usa o mesmo balão do conteúdo, só mais compacto */
.q-dialogue{margin:0 0 1.1rem}
.q-dialogue .dlg-head{margin-bottom:.5rem}
.q-dialogue .dlg-head p{margin:0;font-size:.85rem;color:var(--ink-3)}
.q-video{margin:0 0 1.1rem}
.vq-who{text-align:center;margin-bottom:.5rem}

/* falas fora de ordem: o banco embaixo, a conversa montada em cima */
.dlg-build{
  display:grid;gap:.4rem;min-height:4.5rem;margin-bottom:.9rem;padding:.6rem;
  background:var(--surface-2);border:2px dashed var(--line);border-radius:14px;
}
.dlg-build.has-mark{border-style:solid}
.dlg-build-empty{margin:0;align-self:center;text-align:center;color:var(--ink-3);font-size:.9rem}
.dlg-bank{display:grid;gap:.4rem}
.dlg-chip{
  display:grid;grid-template-columns:auto 1fr;gap:.15rem .5rem;text-align:left;
  padding:.55rem .7rem;border-radius:12px;
  border:2px solid var(--line);background:var(--surface);color:var(--ink);
  font-size:.95rem;font-weight:600;line-height:1.4;
  transition:border-color .15s,transform .15s var(--ease),opacity .15s;
}
.dlg-chip:hover:not(:disabled):not(.is-used){border-color:var(--jade);transform:translateX(3px)}
.dlg-chip.is-used{opacity:.32;pointer-events:none}
.dlg-chip-who{
  grid-row:1 / span 2;align-self:center;
  font-size:.74rem;font-weight:800;letter-spacing:.02em;color:var(--coral);
  min-width:3.2em;
}
.dlg-chip-n{
  grid-row:1 / span 2;align-self:center;width:1.5rem;height:1.5rem;border-radius:50%;
  display:grid;place-items:center;background:var(--petrol);color:#fff;font-size:.78rem;font-weight:800;
}
.dlg-chip-pt{min-width:0;overflow-wrap:anywhere}
.dlg-chip-zh{font-size:.8rem;font-weight:500;color:var(--ink-3);grid-column:2}
.dlg-chip.is-placed{background:var(--surface);border-color:var(--petrol)}
.dlg-chip.is-right{border-color:var(--jade);background:var(--jade-l)}
.dlg-chip.is-wrong{border-color:var(--coral);background:var(--coral-l)}

.ab-row{display:flex;gap:.8rem;justify-content:center;margin-bottom:1.2rem}
.ab{
  display:flex;flex-direction:column;align-items:center;gap:.2rem;
  width:96px;height:96px;justify-content:center;border-radius:20px;font-size:1.6rem;
  border:2px solid var(--line);background:var(--surface-2);color:var(--ink);
  transition:transform .15s var(--ease),border-color .15s;
}
.ab:hover{transform:translateY(-3px);border-color:var(--petrol)}
.ab span{font-size:.8rem;font-weight:800;color:var(--ink-3);letter-spacing:.1em}

.say-xs{width:26px;height:26px;font-size:.75rem;flex:none}

/* ---------- mini tradução e palavra-alvo (glossHtml, data.js) ----------
   [mesa|桌子]       → mesa (桌子): a tradução pequena, na linha, apagada
   [[trabalho|工作]] → a palavra-alvo da pergunta ganha fundo dourado e
                       sublinhado, com a tradução logo embaixo — o olho
                       liga uma à outra sem precisar procurar. */
.gl{white-space:nowrap}
.gl-zh{
  font-size:.72em;font-weight:500;color:var(--ink-3);margin-left:.18em;
  font-family:"Noto Sans SC",var(--font);letter-spacing:0;vertical-align:.08em;
}
.q-subject .gl-zh,.q-prompt .gl-zh{color:inherit;opacity:.7}
mark.tgt{
  display:inline-flex;flex-direction:column;align-items:center;line-height:1.05;
  background:color-mix(in srgb,var(--gold) 26%,transparent);color:inherit;
  border-bottom:3px solid var(--gold);border-radius:6px 6px 2px 2px;
  padding:.05em .22em .08em;margin:0 .05em;vertical-align:top;
}
.tgt-zh{
  font-size:.5em;font-weight:600;color:var(--gold-d);margin-top:.15em;
  font-family:"Noto Sans SC",var(--font);letter-spacing:0;
}
[data-theme="dark"] .tgt-zh{color:var(--gold)}
/* rodada 7: bloco de texto normal. Em coluna flex, cada palavra com
   mini tradução ([As casas|房子] [brancas|白色的]) virava uma linha. */
.opt-txt{display:block;min-width:0;line-height:1.5}
/* Cultura no nivelamento: alternativa nas duas línguas */
.opt-zh{display:block;margin-top:.1rem;font-size:.8rem;font-weight:500;color:var(--ink-3);font-family:"Noto Sans SC",var(--font)}
/* rodada 8: alternativa com a tradução numa linha própria, separada
   por um fio — em vez de (翻译) espalhado no meio do português */
.opt.has-tr .opt-zh{margin-top:.3rem;padding-top:.25rem;border-top:1px dashed var(--line);font-size:.86rem}
.opt.is-right .opt-zh,.opt.is-wrong .opt-zh{color:inherit;opacity:.8}
.q-zh{text-align:center;font-family:"Noto Sans SC",var(--font);font-size:1.05rem;margin:-.4rem 0 1rem}
.chip .gl-zh{display:block;margin:0;font-size:.7em}

/* nivelamento — Escrita, degrau fácil: "como se escreve?" */
.spell-card{
  display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;
  background:var(--gold-l);border-radius:var(--r);padding:.8rem 1.1rem;margin:.4rem 0 1rem;
}
.spell-ico{font-size:2.6rem;line-height:1}
.spell-zh{font-size:1.35rem;font-weight:700;color:var(--ink);font-family:"Noto Sans SC",var(--font)}
.spell-card .speak-big{margin:0}
/* nivelamento — Escrita, degrau médio: a imagem para descrever */
.write-image{
  font-size:clamp(2.2rem,8vw,3.2rem);letter-spacing:.25em;text-align:center;line-height:1.3;
  background:var(--jade-l);border-radius:var(--r);padding:1rem .8rem;margin:.5rem 0 1rem;
}
.session-mic{margin:.2rem 0 0;max-width:46ch;font-size:.9rem;color:var(--ink-2);
  background:var(--petrol-l);border-radius:var(--r-sm);padding:.6rem .8rem}

.rec-box{display:flex;flex-direction:column;align-items:center;gap:.7rem;margin-top:.5rem}
.rec-box audio{width:100%;max-width:320px}
.rec-note{margin:0;font-size:.85rem;color:var(--ink-3);text-align:center;max-width:46ch}

/* fluxo de gravação (recorder.js): gravar → ouvir-se → refazer/enviar */
.rec-flow{display:flex;flex-direction:column;align-items:center;gap:.7rem;margin-top:.6rem}
.rec-actions{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}
.rec-actions .btn:disabled{opacity:.45}

/* aviso antes de cada sessão do teste de nivelamento */
.session-intro{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.55rem}
.session-ico{font-size:2.6rem;line-height:1}
.session-intro h2{margin:0;font-size:clamp(1.2rem,3.4vw,1.6rem);color:var(--heading)}
.session-count{margin:0;font-weight:700;color:var(--ink-2)}
.session-what{margin:0;color:var(--ink-3);max-width:46ch}
.session-intro .q-foot{margin-top:.6rem}
/* Gramática e Leitura: aviso curto, uma linha (rodada 7) */
.session-intro.is-short h2{font-size:clamp(1.1rem,3vw,1.35rem)}
.explain{
  flex-basis:100%;background:var(--surface-2);border:1px dashed var(--line);
  border-radius:var(--r-sm);padding:.7rem .9rem;font-size:.88rem;color:var(--ink-2);
}
/* errou: a explicação vira a "mini aula do porquê", logo abaixo */
.explain.is-why{
  border-style:solid;border-color:color-mix(in srgb,var(--coral) 45%,var(--line));
  background:var(--coral-l);color:var(--ink);font-size:.92rem;
}
.explain-why{display:block;color:var(--coral-d);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.2rem}
[data-theme="dark"] .explain-why{color:#FF9B86}
.result-sub{color:var(--ink-3);font-size:.9rem;margin:-.2rem 0 0}
.result-hearts{margin:-.2rem 0 .2rem;color:var(--coral-d);font-weight:600;font-size:.92rem}

.player{display:flex;flex-direction:column;gap:1.2rem}
.player-top{display:flex;align-items:center;gap:1rem}
.quit{border:0;background:none;color:var(--ink-3);font-size:1.5rem;line-height:1;padding:.1rem .45rem;border-radius:10px}
.quit:hover{background:var(--cream-d);color:var(--coral)}
.progress-track{flex:1;height:10px;border-radius:99px;background:var(--cream-d);overflow:hidden}
.progress-fill{height:100%;border-radius:99px;background:var(--rainbow);width:0;transition:width .45s var(--ease)}
.hearts{display:flex;gap:.12rem;font-size:1rem}
.hearts .lost{filter:grayscale(1);opacity:.3}

.q-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:clamp(1.25rem,4vw,2rem);animation:pop .35s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.q-kind{font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.5rem}
.q-prompt{font-size:clamp(1.25rem,3.6vw,1.7rem);font-weight:700;margin-bottom:.3rem;color:var(--heading)}
.q-hint{color:var(--ink-2);font-size:.92rem;margin-bottom:1.2rem}

.opts{display:grid;gap:.6rem}
.opt{
  display:flex;align-items:center;gap:.7rem;text-align:left;padding:.9rem 1.05rem;border-radius:14px;
  border:2px solid var(--line);background:var(--surface-2);color:var(--ink);font-size:1rem;font-weight:600;
  transition:border-color .18s,background .18s,transform .15s var(--ease);
}
.opt:hover:not(:disabled){border-color:var(--petrol);transform:translateY(-2px)}
.opt:disabled{cursor:default}
.opt .key{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;flex:none;background:var(--cream-d);color:var(--ink-3);font-size:.78rem;font-weight:700}
.opt.is-right,.chip.is-right,.type-input.is-right{border-color:var(--jade);background:var(--jade-l);color:var(--jade-d)}
.opt.is-wrong,.chip.is-wrong,.type-input.is-wrong{border-color:var(--coral);background:var(--coral-l);color:var(--coral-d)}
.opt.is-wrong{animation:shake .38s}
[data-theme="dark"] .opt.is-right,[data-theme="dark"] .chip.is-right{color:#7FD3BC}
[data-theme="dark"] .opt.is-wrong,[data-theme="dark"] .chip.is-wrong{color:#FF9B86}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}

/* ---------- marca de certo/errado ----------
   A cor sozinha deixa sem resposta quem não distingue verde de
   vermelho, então todo elemento julgado também recebe um ✓ ou um ✕.
   O símbolo vem de `data-mark` por ::after: assim entra até em
   <input>, que não aceita filhos, e não encosta no conteúdo.
   O elemento fica `position:relative` só quando a marca existe,
   para não mudar o empilhamento de nada antes da resposta. */
.has-mark{position:relative}
.has-mark::after{
  content:attr(data-mark);
  position:absolute;top:-9px;right:-9px;z-index:2;
  display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  font-size:.82rem;font-weight:700;line-height:1;
  color:#fff;background:var(--jade);
  box-shadow:0 2px 6px rgba(16,26,30,.28);
  animation:markPop .34s var(--ease) both;
  pointer-events:none;
}
.is-wrong.has-mark::after{background:var(--coral)}
/* na montagem de frase a marca é da área inteira, não de cada palavra */
.build-area.has-mark::after{top:-10px;right:-4px}
.type-input.has-mark::after{top:-10px;right:-6px}
@keyframes markPop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}

/* a área de montagem também ganha a cor do julgamento */
.build-area.is-right{border-color:var(--jade)}
.build-area.is-wrong{border-color:var(--coral);animation:shake .38s}
.mitem.is-wrong{animation:shake .38s}
.type-input.is-wrong{animation:shake .38s}

@media (prefers-reduced-motion:reduce){
  .has-mark::after{animation:none}
  .opt.is-wrong,.mitem.is-wrong,.type-input.is-wrong,.build-area.is-wrong{animation:none}
}

.fcard{perspective:1200px;margin-bottom:.9rem}
.fcard-inner{position:relative;width:100%;min-height:220px;transform-style:preserve-3d;transition:transform .6s var(--ease);cursor:pointer}
.fcard.is-flipped .fcard-inner{transform:rotateY(180deg)}
.fcard-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border-radius:var(--r-lg);padding:1.4rem;text-align:center;color:#fff}
.fcard-front{background:linear-gradient(140deg,var(--petrol),var(--jade))}
.fcard-back{background:linear-gradient(140deg,var(--coral),var(--gold));transform:rotateY(180deg)}
.fcard-face .big{font-size:clamp(1.7rem,6vw,2.4rem);font-weight:800}
.fcard-face .sub{font-size:1rem;opacity:.88}
.fcard-face .tip{font-size:.85rem;background:rgba(255,255,255,.18);padding:.3em .8em;border-radius:999px}
.flip-hint{text-align:center;font-size:.8rem;color:var(--ink-3);margin:0 0 .9rem}

.build-area{min-height:74px;border:2px dashed var(--line);border-radius:14px;padding:.7rem;display:flex;flex-wrap:wrap;gap:.45rem;align-content:flex-start;margin-bottom:1rem;background:var(--surface-2)}
.bank{display:flex;flex-wrap:wrap;gap:.45rem}
.chip{padding:.5em .9em;border-radius:11px;border:2px solid var(--line);background:var(--surface);color:var(--ink);font-weight:600;font-size:.95rem;transition:transform .15s var(--ease),border-color .15s,opacity .2s}
.chip:hover{transform:translateY(-2px);border-color:var(--jade)}
.chip.is-used{opacity:.22;pointer-events:none}

.type-input{width:100%;padding:.85rem 1rem;border-radius:14px;border:2px solid var(--line);background:var(--surface-2);color:var(--ink);font-size:1.05rem;transition:border-color .2s}
.type-input:focus{outline:0;border-color:var(--petrol)}
/* rodada 7: a fileira de acentos vem com o porquê dela */
.accents-hint{margin:.7rem 0 0;font-size:.82rem;color:var(--ink-3);line-height:1.45}
.accents-hint + .accents{margin-top:.35rem}
.accents{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.6rem}
.accents button{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:600}
.accents button:hover{border-color:var(--gold);background:var(--gold-l)}

.q-foot{display:flex;align-items:center;gap:.75rem;margin-top:1.2rem;flex-wrap:wrap}
.feedback{display:flex;align-items:center;gap:.6rem;padding:.85rem 1.1rem;border-radius:14px;font-weight:600;font-size:.94rem;flex:1;min-width:200px;animation:pop .25s var(--ease)}
.feedback.ok{background:var(--jade-l);color:var(--jade-d)}
.feedback.no{background:var(--coral-l);color:var(--coral-d)}
/* Rodada 11, item 4: âmbar neutro para aviso de ortografia (acento/cedilha/maiúscula aceito) */
.feedback.warn{background:var(--amber-l);color:var(--amber-d);flex:0 1 auto}
[data-theme="dark"] .feedback.ok{color:#7FD3BC}
[data-theme="dark"] .feedback.no{color:#FF9B86}
[data-theme="dark"] .feedback.warn{color:color-mix(in srgb,var(--amber) 90%,#fff)}
.speak-big{display:grid;place-items:center;width:96px;height:96px;border-radius:50%;margin:0 auto 1.2rem;border:0;background:var(--petrol);color:#fff;font-size:2.1rem;box-shadow:0 10px 24px -10px var(--petrol);transition:transform .2s var(--ease)}
.speak-big:hover{transform:scale(1.07)}
.speak-big.is-playing{animation:pulse 1s infinite}

.result{text-align:center;padding:2rem 1rem}
.result-emoji{font-size:3.8rem;margin-bottom:.4rem;animation:pop .5s var(--ease)}
.result-stats{display:flex;justify-content:center;gap:2rem;margin:1.4rem 0 1.9rem;flex-wrap:wrap}
.result-stats div{display:flex;flex-direction:column}
.result-stats strong{font-size:1.8rem;font-weight:800;color:var(--jade)}
.result-stats small{color:var(--ink-3);font-size:.8rem}

/* =========================================================
   REVISÃO
   ========================================================= */
.err-row{display:flex;align-items:center;gap:.8rem;padding:.7rem 0;border-bottom:1px solid var(--line)}
.err-row:last-child{border-bottom:0}
.err-row .e-name{flex:1;min-width:0}
.err-row .e-name strong{display:block}
.err-row .e-name small{color:var(--ink-3);font-size:.8rem}
.err-bar{width:110px;height:7px;border-radius:99px;background:var(--cream-d);overflow:hidden;flex:none}
.err-bar span{display:block;height:100%;background:var(--coral)}
.err-count{font-size:.8rem;font-weight:700;color:var(--coral-d);min-width:58px;text-align:right}
[data-theme="dark"] .err-count{color:#FF9B86}
.chart{width:100%;height:190px;display:block}
.chart-grid{stroke:var(--line);stroke-width:1}
.chart-line{fill:none;stroke:var(--jade);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.chart-area{fill:var(--jade);opacity:.12}
.chart-dot{fill:var(--jade)}
.chart-label{fill:var(--ink-3);font-size:10px}

/* =========================================================
   CHATBOT
   ========================================================= */
.chat-wrap{display:flex;flex-direction:column;height:calc(100dvh - var(--topbar-h) - 7rem);min-height:420px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.chat-head{display:flex;align-items:center;gap:1rem}
.chat-head h1{margin-bottom:.1rem}
.chat-head p{margin:0}
.bot-face{flex:none;border-radius:50%;background:var(--surface);border:2px solid var(--line)}
.bot-face-sm{width:34px;height:34px;flex:none;border-radius:50%;background:var(--surface);
  border:1.5px solid var(--line);align-self:flex-end}

.chat-log{flex:1;overflow-y:auto;padding:1.2rem;display:flex;flex-direction:column;gap:.8rem}
.msg-row{display:flex;gap:.55rem;align-items:flex-end;max-width:100%}
.msg-row.bot{align-self:flex-start;max-width:min(88%,560px)}
.msg-row.me{align-self:flex-end;max-width:min(80%,520px)}
.msg{padding:.75rem 1rem;border-radius:16px;font-size:.94rem;line-height:1.5;animation:pop .25s var(--ease)}
.msg.bot{background:var(--surface-2);border:1px solid var(--line);border-bottom-left-radius:5px}
.msg.me{background:var(--petrol);color:#fff;border-bottom-right-radius:5px}
.msg .m-pt{font-weight:600}
.msg .m-foot{margin-top:.5rem;display:flex;gap:.5rem;align-items:center}
.msg .say{width:30px;height:30px;font-size:.85rem}
/* assistente com base de conhecimento: opções, idioma, 👍/👎 (js/chatbot.js) */
.msg .m-foot{flex-wrap:wrap}
.msg .m-note{margin:.45rem 0 0;font-size:.76rem;color:var(--ink-3)}
.msg .m-opts{display:flex;flex-direction:column;align-items:flex-start;gap:.4rem;margin-top:.6rem}
.msg .m-opt{white-space:normal;text-align:left;line-height:1.35}
.msg .m-opt.m-none{color:var(--ink-3);border-style:dashed}
.msg .m-alt{padding:.35em .7em;font-size:.8rem}
.msg .m-fb{display:inline-flex;gap:.25rem;margin-left:auto}
.m-fb-btn{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--surface);font-size:.85rem;opacity:.7;transition:opacity .2s var(--ease),transform .2s var(--ease)}
.m-fb-btn:hover{opacity:1;transform:scale(1.08)}
.m-fb-btn.is-on{opacity:1;border-color:var(--jade);background:var(--jade-l)}
.typing{display:flex;gap:.25rem;padding:.8rem 1rem;background:var(--surface-2);border:1px solid var(--line);border-radius:16px;border-bottom-left-radius:5px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--ink-3);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}
.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}
.chat-sugs{display:flex;gap:.5rem;padding:.7rem 1rem;overflow-x:auto;border-top:1px solid var(--line);background:var(--surface-2)}
.sug{flex:none;padding:.42em .9em;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font-size:.82rem;font-weight:600;white-space:nowrap}
.sug:hover{border-color:var(--jade);color:var(--jade)}
.chat-form{display:flex;gap:.6rem;padding:.8rem 1rem;border-top:1px solid var(--line);align-items:center}
.chat-form input{flex:1;padding:.75rem 1rem;border-radius:999px;border:1.5px solid var(--line);background:var(--surface-2);color:var(--ink)}
.chat-form input:focus{outline:0;border-color:var(--jade)}

/* =========================================================
   TESTE DE NIVELAMENTO
   ========================================================= */
.axis-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:1rem;box-shadow:var(--shadow);text-align:center;
}
.axis-ico{font-size:1.7rem;display:block;margin-bottom:.4rem}
.axis-card strong{display:block;font-size:.95rem;color:var(--heading)}
.axis-card small{color:var(--ink-3);font-size:.8rem;line-height:1.4;display:block;margin-top:.2rem}

.placement-top{display:flex;align-items:center;gap:1rem;margin-bottom:1.25rem;flex-wrap:wrap}
.placement-top strong{display:block;font-size:.98rem;color:var(--heading)}
.placement-top small{color:var(--ink-3);font-size:.8rem}
.placement-top .progress-track{margin-left:auto}

.write-area{
  width:100%;padding:.9rem 1rem;border-radius:14px;border:2px solid var(--line);
  background:var(--surface-2);color:var(--ink);font-family:inherit;font-size:1rem;
  line-height:1.6;resize:vertical;
}
.write-area:focus{outline:0;border-color:var(--jade)}

/* --- gráfico de radar ---
   Uma série só: uma cor, sem legenda. Os números ficam nos
   vértices e de novo na análise abaixo, que serve de tabela. */
.radar-card{overflow:hidden}
.radar{width:100%;height:auto;max-width:460px;margin:0 auto;display:block;overflow:visible}
.rd-ring{fill:none;stroke:var(--line);stroke-width:1}
.rd-spoke{stroke:var(--line);stroke-width:1}
.rd-area{fill:var(--jade);fill-opacity:.18;stroke:var(--jade);stroke-width:2;stroke-linejoin:round}
.rd-dot{fill:var(--jade);stroke:var(--surface);stroke-width:2}
.rd-label{font-size:11px;font-weight:600;fill:var(--ink-2)}
.rd-value{font-size:12px;font-weight:800;fill:var(--heading)}
.rd-scale{font-size:9px;fill:var(--ink-3)}

.axis-list{display:grid;gap:.8rem}
.axis-row{
  display:flex;gap:1rem;align-items:flex-start;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:1.1rem 1.2rem;box-shadow:var(--shadow);
}
.axis-row .axis-ico{font-size:1.5rem;margin:0}
.axis-body{flex:1;min-width:0}
.axis-body strong{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;color:var(--heading)}
.axis-level{color:var(--coral);font-weight:800}
.axis-body .bar{margin:.5rem 0 .6rem}
.axis-body p{margin:0;font-size:.92rem;color:var(--ink-2);line-height:1.6}
.axis-extra{margin-top:.4rem !important;font-size:.85rem !important;color:var(--coral-d) !important}
[data-theme="dark"] .axis-extra{color:#FF9B86 !important}

.recommend{
  display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap;
  background:linear-gradient(135deg,var(--jade-l),var(--gold-l));
  border:1px solid var(--line);border-radius:var(--r-lg);padding:1.4rem 1.5rem;
}
.rec-ico img{width:72px;height:72px}
.recommend small{font-size:.75rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3)}
.recommend h2{margin:.2rem 0 .4rem}
.recommend p{margin:0;font-size:.92rem;color:var(--ink-2);line-height:1.6;max-width:62ch}

/* Rodada 9, item 15 — nivelamento: o texto ocupa a MESMA largura dos
   balões. Os limites em "ch" (58ch no subtítulo, 62ch na recomendação,
   46ch nos avisos) faziam o texto parar na metade do card, desalinhado
   da borda dos balões logo abaixo. Aqui as três telas do teste (abertura,
   perguntas e resultado) usam um container só — mesma largura máxima,
   mesmo padding — e nenhum parágrafo tem largura própria. */
#view-nivelamento,
#view-resultado-nivelamento{max-width:760px;margin:0 auto}
#view-nivelamento p,
#view-resultado-nivelamento p{max-width:none}
.recommend > div{flex:1 1 260px;min-width:0}

/* item 17: na Leitura, o texto a ler vem num balão centralizado de
   destaque, separado da pergunta e das alternativas */
.read-balloon{
  position:relative;margin:.2rem 0 1.4rem;padding:1.1rem 1.3rem;
  background:var(--petrol-l);border:1px solid color-mix(in srgb,var(--petrol) 22%,var(--line));
  border-radius:var(--r-lg);text-align:center;box-shadow:var(--shadow);
}
.read-balloon::after{
  content:"";position:absolute;left:50%;bottom:-9px;width:16px;height:16px;transform:translateX(-50%) rotate(45deg);
  background:var(--petrol-l);border-right:1px solid color-mix(in srgb,var(--petrol) 22%,var(--line));
  border-bottom:1px solid color-mix(in srgb,var(--petrol) 22%,var(--line));
}
.read-balloon .rtext{margin:0;font-size:clamp(1.02rem,2.6vw,1.15rem);line-height:1.7;color:var(--ink);white-space:normal}

/* item 16: colocar as palavras na ordem certa */
.order-line{
  display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center;align-items:center;min-height:3.4rem;
  padding:.6rem;margin:.8rem 0 1rem;border:2px dashed var(--line);border-radius:var(--r);background:var(--surface-2);
}
.order-empty{color:var(--ink-3);font-size:.9rem}
.order-bank{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center;margin-bottom:.4rem}
.order-chip{font-size:1rem}
.order-chip.is-used{color:transparent;background:var(--surface-2);border-style:dashed;pointer-events:none;transform:none}

/* item 19: a imagem enviada pelo painel para descrever */
.write-photo{margin:.5rem 0 1rem;border-radius:var(--r);overflow:hidden;background:var(--surface-2);border:1px solid var(--line)}
.write-photo img{width:100%;max-height:360px;object-fit:contain;margin:0 auto}
.pimg-preview{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.pimg-preview img{max-width:220px;max-height:140px;border-radius:var(--r-sm);border:1px solid var(--line)}
.pimg-preview .write-image{margin:0;font-size:1.6rem;padding:.5rem .8rem}
.session-intro > *{align-self:stretch}
.session-intro .session-ico,
.session-intro .q-foot{align-self:center}

/* =========================================================
   PAINEL DE ADMINISTRAÇÃO
   ========================================================= */
.admin-tabs{max-width:640px;margin-bottom:1.5rem;flex-wrap:wrap}
.admin-tabs .tab{flex:1 1 130px;font-size:.85rem}

.color-grid{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.color-row{
  display:flex;align-items:center;gap:.8rem;padding:.7rem .9rem;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow);
}
.color-row input[type="color"]{
  width:46px;height:46px;flex:none;padding:0;border:1px solid var(--line);
  border-radius:12px;background:none;cursor:pointer;
}
.color-row strong{display:block;font-size:.9rem}
.color-row code{font-size:.78rem;color:var(--ink-3);text-transform:uppercase}

.logo-slot{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:1rem;box-shadow:var(--shadow);
}
/* A prévia do painel mostra o arquivo como ele é: sem o creme chapado
   que havia aqui, que escondia justamente o que se quer conferir —
   se o PNG enviado tem fundo transparente ou não. */
.logo-preview{
  display:grid;place-items:center;min-height:86px;margin:.5rem 0;padding:.6rem;
  border:1px dashed var(--line);border-radius:var(--r-sm);
}
.logo-preview img{max-height:64px;width:auto}
.logo-actions{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-top:.6rem}
.logo-actions .btn{cursor:pointer}

.admin-list{display:grid;gap:.6rem}
.admin-row{
  display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:.8rem 1rem;box-shadow:var(--shadow);
}
.admin-row-col{flex-direction:column;align-items:stretch}
.admin-row-body{flex:1;min-width:150px}
.admin-row-body strong{display:block;font-size:.95rem}
.admin-row-body small{color:var(--ink-3);font-size:.82rem}
.admin-thumb{
  display:grid;place-items:center;width:46px;height:46px;flex:none;font-size:1.4rem;
  border-radius:10px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden;
}
.admin-thumb img{width:100%;height:100%;object-fit:cover}
.admin-form{margin-bottom:1.25rem;border-left:4px solid var(--coral)}
.admin-form textarea{
  width:100%;padding:.7rem .9rem;border-radius:var(--r-sm);border:1.5px solid var(--line);
  background:var(--surface-2);color:var(--ink);resize:vertical;font-family:inherit;
}
.admin-form textarea:focus{outline:0;border-color:var(--jade)}
.head-ico{display:inline-block;vertical-align:-.35em}
.head-ico img{width:44px;height:44px}

/* =========================================================
   AVATARES
   ========================================================= */
.avatar.has-img{background:var(--surface);border:1.5px solid var(--line);padding:0;overflow:hidden}
.avatar.has-img img{width:100%;height:100%;object-fit:cover;display:block}
.di-img{border-radius:50%;display:block}

/* ---------- selo de nível no avatar do topo ---------- */
.avatar-btn{position:relative}
.lvl-badge{
  position:absolute;right:-3px;bottom:-3px;z-index:2;
  min-width:18px;height:18px;padding:0 4px;border-radius:999px;
  display:grid;place-items:center;
  background:var(--gold);color:#1F2A2E;border:2px solid var(--surface);
  font-size:.62rem;font-weight:800;line-height:1;
}

/* ---------- acessórios sobrepostos ao avatar ----------
   Cada peça é um SVG com 12 de folga em volta da caixa de 96 do bicho
   (por isso 125% e -12.5%), desenhado sobre uma cabeça de referência.
   O ajuste a cada bicho chega inline, como transform (gearStyle, app.js). */
.avatar.has-gear{position:relative}
.avatar.has-img img.gear{position:absolute;left:-12.5%;top:-12.5%;width:125%;height:125%;max-width:none;object-fit:fill;pointer-events:none}

.avatar-grid{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.gear-grid{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));margin-top:.9rem}
.gear-pick{
  display:flex;flex-direction:column;align-items:center;gap:.35rem;
  padding:.7rem .5rem;border:2px solid var(--line);border-radius:var(--r);
  background:var(--surface);color:var(--ink);cursor:pointer;
  transition:transform .2s var(--ease),border-color .2s,background .2s;
}
.gear-pick:hover:not(:disabled){transform:translateY(-3px);border-color:var(--jade)}
.gear-pick.is-on{border-color:var(--coral);background:var(--coral-l)}
.gear-pick small{font-size:.72rem;color:var(--ink-2);text-align:center;line-height:1.25}
.gear-art{position:relative;display:grid;place-items:center;width:64px;height:64px;overflow:hidden}
/* só o recorte da peça aparece: tamanho e posição chegam inline (gearThumbStyle) */
.gear-art img{position:absolute;max-width:none;display:block}
.gear-state{font-size:.65rem;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.03em}
.gear-pick.is-on .gear-state{color:var(--coral-d)}

/* bloqueado: apagado, sem cor, com o nível que o abre por cima */
.gear-pick.is-locked{cursor:default;background:var(--cream-d);border-style:dashed}
.gear-pick.is-locked .gear-art img{filter:grayscale(1);opacity:.32}
.gear-pick.is-locked small{opacity:.55}
.gear-lock{
  position:absolute;inset:auto 0 0 0;
  padding:.1rem .2rem;border-radius:8px;
  background:color-mix(in srgb,var(--ink) 72%,transparent);color:#fff;
  font-size:.6rem;font-weight:700;white-space:nowrap;
}
@media (prefers-reduced-motion:reduce){ .gear-pick:hover:not(:disabled){transform:none} }
.avatar-pick{
  display:flex;flex-direction:column;align-items:center;gap:.45rem;padding:.7rem .4rem;
  border:2px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);color:var(--ink);
  transition:border-color .18s,transform .15s var(--ease),background .18s;
}
.avatar-pick:hover{transform:translateY(-3px);border-color:var(--jade)}
.avatar-pick.is-on{border-color:var(--coral);background:var(--coral-l)}
.avatar-pick small{font-size:.74rem;color:var(--ink-2);text-align:center;line-height:1.25}
.avatar-pick .avatar{width:52px;height:52px;font-size:1.2rem}

/* =========================================================
   MARCAR UMA AULA
   ========================================================= */
.teachers{display:grid;gap:1rem}
.teacher{
  display:flex;gap:1.1rem;align-items:flex-start;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:1.2rem 1.3rem;box-shadow:var(--shadow);
}
.teacher-hero{border-left:5px solid var(--coral)}
.teacher-body{flex:1;min-width:200px}
.teacher-body strong{display:block;font-size:1.05rem;color:var(--heading)}
.teacher-spec{margin:.15rem 0 .5rem;font-size:.88rem;font-weight:600;color:var(--coral)}
.teacher-bio{margin:0 0 .5rem;font-size:.9rem;color:var(--ink-2);line-height:1.6}
.teacher-meta{margin:0;font-size:.8rem;color:var(--ink-3)}
.avatar.tc-jade{background:linear-gradient(135deg,var(--jade),var(--petrol))}
.avatar.tc-coral{background:linear-gradient(135deg,var(--coral),var(--gold))}
.avatar.tc-petrol{background:linear-gradient(135deg,var(--petrol),#2E7A8F)}
.avatar.tc-gold{background:linear-gradient(135deg,var(--gold),var(--coral))}

.slots{display:grid;gap:.7rem}
.slot-day{
  display:flex;gap:1rem;align-items:center;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:.9rem 1.1rem;box-shadow:var(--shadow);
}
.slot-date{font-weight:700;color:var(--heading);min-width:110px;font-size:.92rem}
.slot-times{display:flex;flex-wrap:wrap;gap:.45rem}
.slot{
  padding:.5em 1em;border-radius:999px;border:1.5px solid var(--line);
  background:var(--surface-2);color:var(--ink);font-weight:700;font-size:.9rem;
  font-variant-numeric:tabular-nums;transition:border-color .15s,background .15s,transform .15s var(--ease);
}
.slot:hover{border-color:var(--coral);background:var(--coral-l);transform:translateY(-2px)}

.bookings{display:grid;gap:.7rem}
.booking{
  display:flex;gap:1rem;align-items:center;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--jade);
  border-radius:var(--r);padding:.9rem 1.1rem;box-shadow:var(--shadow);
}
.booking-body{flex:1;min-width:160px}
.booking-body strong{display:block}
.booking-body small{color:var(--ink-3);font-size:.85rem}

/* =========================================================
   CONFIGURAÇÕES
   ========================================================= */
.setting{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.1rem 1.25rem;border-bottom:1px solid var(--line);flex-wrap:wrap}
.setting:last-child{border-bottom:0}
.setting small{display:block;color:var(--ink-3);font-size:.82rem;margin-top:.15rem}
.setting-danger strong{color:var(--coral)}
.seg{display:flex;gap:.25rem;padding:3px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line)}
.seg button{border:0;background:transparent;color:var(--ink-2);padding:.42em .95em;border-radius:999px;font-size:.85rem;font-weight:600;transition:background .2s,color .2s}
.seg button.is-active{background:var(--petrol);color:#fff}
.switch{position:relative;display:inline-block;width:50px;height:28px;flex:none}
.switch input{opacity:0;width:0;height:0}
.switch span{position:absolute;inset:0;border-radius:99px;background:var(--line);transition:background .25s;cursor:pointer}
.switch span::before{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .25s var(--ease);box-shadow:0 2px 6px rgba(0,0,0,.25)}
.switch input:checked + span{background:var(--jade)}
.switch input:checked + span::before{transform:translateX(22px)}
.range{width:180px;accent-color:var(--jade)}

/* =========================================================
   RODAPÉ E TOASTS
   ========================================================= */
.footer img{height:30px;width:auto}
.footer{display:flex;align-items:center;justify-content:center;gap:.7rem;border-top:1px solid var(--line);padding:1.4rem;font-size:.78rem;color:var(--ink-3);font-style:italic}
.toasts{position:fixed;bottom:1.25rem;left:50%;transform:translateX(-50%);z-index:120;display:flex;flex-direction:column;gap:.5rem;align-items:center;pointer-events:none}
.toast{background:var(--petrol);color:#fff;padding:.7rem 1.2rem;border-radius:999px;font-size:.9rem;font-weight:600;box-shadow:var(--shadow-lg);animation:toastIn .3s var(--ease)}
.toast.gold{background:var(--gold);color:#3A2B00}
.toast.coral{background:var(--coral)}
@keyframes toastIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width:760px){
  .modules{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .module{aspect-ratio:auto;min-height:170px}
}
@media (max-width:640px){
  :root{--topbar-h:62px}
  .brand img{height:36px}
  .lang-opt{padding:.38em .68em;font-size:.8rem}
  .icon-btn{width:38px;height:38px}
  .setting{flex-direction:column;align-items:flex-start;gap:.7rem}
  .result-stats{gap:1.2rem}
  .social{grid-template-columns:1fr}
  .chat-wrap{height:calc(100dvh - var(--topbar-h) - 5rem)}
  .msg{max-width:88%}
}
@media (max-width:420px){
  .login-box{padding:1.3rem 1.1rem}
  .modules{grid-template-columns:1fr 1fr}
  .module{padding:.9rem;min-height:150px}
  .module h3{font-size:.92rem}
  .module p{display:none}
}
/* música do dia: áudio + YouTube + Bilibili lado a lado */
.song-links{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}

/* o rodapé da subunidade: a ação principal (o PDF fica na navegação, ver .pdf-balloon) */
.cta-actions{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;justify-content:flex-end}

/* =========================================================
   FESTA DE FIM DE UNIDADE — versão Carnaval (rodada 6)

   A tela inteira vira desfile, em camadas:
     céu de noite de Carnaval → fogos subindo do pé da tela →
     carro alegórico passando ao fundo → serpentinas e confete →
     no palco, o bicho do aluno sambando de corpo inteiro e o cartão
     com o parabéns e o botão da próxima unidade.
   Quem pediu menos movimento no sistema vê tudo parado.
   ========================================================= */
.celebrate{
  position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:1.2rem;
  background:rgba(17,34,38,.72);backdrop-filter:blur(6px);
  animation:fadeIn .25s var(--ease);
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
body.is-celebrating{overflow:hidden}

/* O palco é o mesmo em toda festa; o que muda é a cor do céu de cada
   tema (ver UNIT_CELEBRATIONS em data.js e CENARIOS em celebration.js). */
.celebrate.is-party{
  overflow:hidden;align-content:end;padding:1rem 1rem max(1.2rem,4vh);
  backdrop-filter:none;
}
.celebrate.cv-carnaval{
  background:
    radial-gradient(90% 60% at 50% 110%, rgba(227,108,90,.55), transparent 60%),
    radial-gradient(70% 50% at 15% 0%, rgba(79,138,122,.45), transparent 60%),
    radial-gradient(70% 50% at 85% 0%, rgba(200,162,74,.4), transparent 60%),
    linear-gradient(180deg,#0E1F2E 0%,#1B2C4A 45%,#3A1F45 100%);
}
/* festa junina: noite de São João, com o clarão da fogueira embaixo */
.celebrate.cv-junina{
  background:
    radial-gradient(60% 40% at 50% 104%, rgba(255,150,40,.7), transparent 62%),
    radial-gradient(80% 50% at 20% 0%, rgba(90,60,140,.45), transparent 65%),
    linear-gradient(180deg,#141B3A 0%,#2B2350 48%,#4A2A22 100%);
}
/* frevo: tarde de Carnaval em Pernambuco, sol alto e cor */
.celebrate.cv-frevo{
  background:
    radial-gradient(75% 55% at 50% 108%, rgba(227,108,90,.5), transparent 62%),
    radial-gradient(60% 45% at 80% 4%, rgba(255,216,74,.5), transparent 62%),
    linear-gradient(180deg,#123B5C 0%,#1E5E7A 48%,#B4572F 100%);
}
/* gol: gramado sob refletor */
.celebrate.cv-gol{
  background:
    radial-gradient(70% 45% at 50% 106%, rgba(0,156,59,.65), transparent 62%),
    radial-gradient(45% 35% at 18% -4%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(45% 35% at 82% -4%, rgba(255,255,255,.3), transparent 60%),
    linear-gradient(180deg,#0B2033 0%,#0F3A2C 55%,#0C5A2B 100%);
}
/* forró: sertão à noite, lua cheia e areia quente */
.celebrate.cv-forro{
  background:
    radial-gradient(60% 40% at 50% 108%, rgba(200,162,74,.45), transparent 62%),
    radial-gradient(40% 30% at 78% 8%, rgba(255,243,176,.42), transparent 60%),
    linear-gradient(180deg,#0B1733 0%,#1D2A4A 50%,#4B3A22 100%);
}
/* bossa nova: praia à noite, tudo baixinho */
.celebrate.cv-bossa{
  background:
    radial-gradient(80% 50% at 50% 106%, rgba(79,138,122,.5), transparent 64%),
    radial-gradient(40% 30% at 22% 6%, rgba(159,208,255,.32), transparent 62%),
    linear-gradient(180deg,#081B2B 0%,#123245 50%,#1C4A50 100%);
}
/* festa neutra (cursos que não são de português): noite de fogos */
.celebrate.cv-festa{
  background:
    radial-gradient(80% 55% at 50% 108%, rgba(200,162,74,.45), transparent 62%),
    radial-gradient(60% 45% at 20% 0%, rgba(79,138,122,.4), transparent 62%),
    linear-gradient(180deg,#0E1F2E 0%,#1B2C4A 55%,#24324F 100%);
}
.cv-sky{position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(#fff 1px,transparent 1.5px),radial-gradient(#FFD84A 1px,transparent 1.5px);
  background-size:120px 110px,170px 150px;background-position:10px 20px,60px 80px;opacity:.35;
  -webkit-mask-image:linear-gradient(#000 0%,transparent 60%);mask-image:linear-gradient(#000 0%,transparent 60%);
}

/* ---------- fogos que sobem do pé da tela ---------- */
.cv-fireworks{position:absolute;inset:0;pointer-events:none}
.fw{position:absolute;left:var(--x);bottom:0;width:0;height:0}
.fw-trail{
  position:absolute;left:-2px;bottom:0;width:4px;height:22px;border-radius:2px;
  background:linear-gradient(#fff,rgba(255,216,74,0));
  animation:fw-rise 2.4s ease-out infinite;animation-delay:var(--d);
}
.fw-burst{
  position:absolute;left:-2px;bottom:var(--h);width:4px;height:4px;border-radius:50%;
  opacity:0;transform:scale(.1);
  animation:fw-burst 2.4s ease-out infinite;animation-delay:var(--d);
}
@keyframes fw-rise{
  0%  {transform:translateY(0);opacity:1}
  38% {transform:translateY(calc(-1 * var(--h)));opacity:1}
  40%,100%{transform:translateY(calc(-1 * var(--h)));opacity:0}
}
@keyframes fw-burst{
  0%,38%{opacity:0;transform:scale(.1)}
  42% {opacity:1;transform:scale(.4)}
  75% {opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.15) translateY(12px)}
}

/* ---------- o carro alegórico passando ao fundo ---------- */
.cv-parade{position:absolute;left:0;right:0;bottom:6vh;height:clamp(140px,26vh,230px);pointer-events:none}
.float-car{
  position:absolute;bottom:0;height:100%;width:auto;left:0;opacity:.9;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.35));
  animation:float-pass 14s linear infinite;
}
.fc-fan{transform-origin:210px 118px;animation:fan-sway 1.2s ease-in-out infinite alternate}
@keyframes float-pass{from{transform:translateX(-110%)}to{transform:translateX(110vw)}}
@keyframes fan-sway{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}

/* ---------- serpentinas ---------- */
.cv-streamers{position:absolute;inset:0;pointer-events:none}
.cv-streamers i{
  position:absolute;top:-30px;left:calc(8% + var(--i) * 16%);width:6px;height:120px;border-radius:6px;
  background:repeating-linear-gradient(180deg,var(--coral) 0 14px,var(--gold) 14px 28px,var(--jade) 28px 42px);
  opacity:.75;transform-origin:top center;
  animation:streamer 2.2s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -.37s);
}
@keyframes streamer{from{transform:rotate(-14deg) translateY(0)}to{transform:rotate(14deg) translateY(18px)}}

/* =========================================================
   CENÁRIOS DAS OUTRAS FESTAS (rodada 8)
   Um bloco por tema — ver CENARIOS em celebration.js.
   ========================================================= */

/* ---------- festa junina: bandeirinhas e fogueira ---------- */
.cv-buntings{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.cv-bunting{
  position:absolute;left:-6%;width:112%;display:flex;justify-content:space-between;
  border-top:3px solid rgba(255,243,176,.6);
  animation:bunting-sway 3.4s ease-in-out infinite alternate;
}
.cv-bunting-1{top:9%;transform:rotate(-4deg)}
.cv-bunting-2{top:20%;transform:rotate(3.5deg);animation-delay:-1.4s}
.cv-bunting i{
  width:22px;height:30px;background:var(--c);
  clip-path:polygon(0 0,100% 0,50% 100%);
  transform-origin:top center;
  animation:bunting-flap 1.8s ease-in-out infinite alternate;
  animation-delay:calc(var(--i) * -.12s);
}
@keyframes bunting-sway{from{transform:rotate(-4deg) translateY(0)}to{transform:rotate(-2deg) translateY(6px)}}
@keyframes bunting-flap{from{transform:rotateY(0) scaleY(1)}to{transform:rotateY(35deg) scaleY(.94)}}

.cv-bonfire{
  position:absolute;left:50%;bottom:3vh;transform:translateX(-50%);
  width:clamp(120px,22vw,200px);height:clamp(110px,20vh,170px);pointer-events:none;
}
.bf-logs{position:absolute;left:0;right:0;bottom:0;width:100%}
.bf-flame{
  position:absolute;left:50%;bottom:16%;border-radius:50% 50% 46% 46% / 62% 62% 38% 38%;
  transform:translateX(-50%);filter:blur(1px);
  animation:bonfire 1.1s ease-in-out infinite alternate;
}
.bf-1{width:62%;height:78%;background:linear-gradient(180deg,#FFD84A,#E8873D 55%,rgba(227,108,90,0));}
.bf-2{width:40%;height:58%;background:linear-gradient(180deg,#FFF3B0,#FFD84A 60%,rgba(232,135,61,0));animation-delay:-.4s}
.bf-3{width:22%;height:36%;background:linear-gradient(180deg,#FFFFFF,#FFF3B0 60%,rgba(255,216,74,0));animation-delay:-.75s}
@keyframes bonfire{
  from{transform:translateX(-50%) scale(1,.94) skewX(-4deg)}
  to  {transform:translateX(-50%) scale(1.05,1.08) skewX(5deg)}
}

/* ---------- frevo: sombrinhas subindo e girando ---------- */
.cv-umbrellas{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.cv-umbrella{
  position:absolute;left:var(--x);bottom:-20%;width:clamp(48px,9vw,86px);
  transform:scale(var(--s));
  animation:umbrella-rise 6.5s linear infinite;animation-delay:var(--d);
}
.cv-umbrella svg{animation:umbrella-spin 2.6s linear infinite}
@keyframes umbrella-rise{
  0%  {transform:translateY(0) scale(var(--s));opacity:0}
  12% {opacity:.95}
  85% {opacity:.95}
  100%{transform:translateY(-118vh) scale(var(--s));opacity:0}
}
@keyframes umbrella-spin{from{transform:rotate(-16deg)}50%{transform:rotate(16deg)}to{transform:rotate(-16deg)}}

/* ---------- gol: rede, bandeira e a bola cruzando ---------- */
.cv-goal{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.cv-net{position:absolute;left:0;right:0;bottom:0;width:100%;height:32vh;opacity:.5}
.cv-flag{
  position:absolute;right:6%;top:12%;width:clamp(70px,13vw,130px);
  transform-origin:left center;filter:drop-shadow(0 8px 16px rgba(0,0,0,.4));
  animation:flag-wave 1.8s ease-in-out infinite alternate;
}
@keyframes flag-wave{from{transform:rotate(-5deg) skewY(3deg)}to{transform:rotate(4deg) skewY(-3deg)}}
.cv-ball{
  position:absolute;left:0;bottom:16vh;width:clamp(34px,6vw,58px);
  animation:ball-cross 5.5s linear infinite;
}
@keyframes ball-cross{
  0%  {transform:translateX(-14vw) rotate(0)}
  100%{transform:translateX(112vw) rotate(1440deg)}
}

/* ---------- forró: lua, cactos e sanfona ---------- */
.cv-sertao{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.cv-moon{
  position:absolute;right:12%;top:9%;width:clamp(54px,9vw,100px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 36% 34%,#FFF8D8,#F0DC9A 62%,#D9BE72);
  box-shadow:0 0 42px 14px rgba(255,243,176,.28);
}
.cv-cactus{position:absolute;bottom:0;width:clamp(48px,9vw,90px);opacity:.9}
.cv-cactus-1{left:5%}
.cv-cactus-2{right:7%;bottom:0;width:clamp(36px,7vw,70px)}
/* fora do meio: no centro a sanfona ficava escondida atrás do cartão */
.cv-accordion{
  position:absolute;right:9%;bottom:5vh;width:clamp(110px,18vw,180px);
  opacity:.92;filter:drop-shadow(0 10px 18px rgba(0,0,0,.4));
}
.ac-bellows{transform-origin:50% 50%;animation:bellows .9s ease-in-out infinite alternate}
@keyframes bellows{from{transform:scaleX(.86)}to{transform:scaleX(1.06)}}

/* ---------- bossa nova: praia e violão ---------- */
.cv-beach{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.cv-waves{position:absolute;left:0;right:0;bottom:0;width:100%;height:30vh}
.cv-waves path{fill:rgba(127,211,188,.28)}
.cv-waves .bw-2{fill:rgba(159,208,255,.22);animation:bossa-wave 7s ease-in-out infinite alternate}
.cv-waves .bw-1{animation:bossa-wave 9s ease-in-out infinite alternate-reverse}
@keyframes bossa-wave{from{transform:translateX(-3%)}to{transform:translateX(3%)}}
.cv-guitar{
  position:absolute;right:8%;bottom:4vh;width:clamp(70px,13vw,130px);
  transform-origin:bottom center;opacity:.92;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.45));
  animation:guitar-lean 4s ease-in-out infinite alternate;
}
@keyframes guitar-lean{from{transform:rotate(9deg)}to{transform:rotate(13deg)}}

/* ---------- confete na tela toda ---------- */
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.confetti i{
  position:absolute;top:-14px;width:7px;height:13px;border-radius:2px;opacity:.9;
  left:calc(var(--i) * 7.1%);
  background:var(--coral);
  animation:fall 2.6s linear infinite;
  animation-delay:calc(var(--i) * -.19s);
}
.cv-confetti i{left:var(--x);animation-duration:var(--dur);animation-delay:var(--delay);width:8px;height:14px}
.confetti i:nth-child(3n){background:var(--gold)}
.confetti i:nth-child(3n+1){background:var(--jade)}
.confetti i:nth-child(4n){background:#FFFFFF}
.confetti i:nth-child(5n){background:#9FD0FF;border-radius:50%;width:9px;height:9px}
@keyframes fall{
  0%  {transform:translateY(-20px) rotate(0)}
  100%{transform:translateY(105vh) rotate(720deg)}
}

/* ---------- o palco ---------- */
/* rodada 7: a festa cobre a barra do topo, então traz o próprio seletor */
.cv-lang{position:absolute;top:max(1rem,env(safe-area-inset-top));right:1rem;z-index:5}
.cv-stage{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:.4rem;width:100%}
.celebrate-box{
  position:relative;
  background:var(--surface);border-radius:var(--r-lg);box-shadow:0 24px 60px rgba(0,0,0,.45);
  padding:clamp(1.1rem,4vw,1.8rem);max-width:460px;width:100%;text-align:center;
  animation:pop .4s var(--ease);overflow:hidden;
}
.celebrate-box::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--rainbow)}
.celebrate-box h2{margin:.3rem 0 .3rem;color:var(--heading);font-size:clamp(1.4rem,4.5vw,1.9rem)}
.celebrate-genre{margin:0;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--coral)}
.celebrate-sub{margin:0 0 1.1rem;color:var(--ink-2);font-size:.95rem}
.celebrate-foot{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}

/* ---------- o sambista de corpo inteiro ----------
   Tempo do samba: um passo a cada .46s. Cada parte do corpo tem o seu
   ritmo — pernas alternando, quadril para os lados, braços para cima e
   para baixo, a cabeça acompanhando — e o corpo inteiro quica. */
.samba-dancer{
  --beat:.46s;
  position:relative;width:clamp(150px,34vw,210px);aspect-ratio:120/190;
  animation:sd-bounce var(--beat) ease-in-out infinite;
  filter:drop-shadow(0 12px 16px rgba(0,0,0,.35));
}
.sd-body{position:absolute;left:0;right:0;bottom:0;width:100%;height:auto}

/* ⚠️ A CABEÇA É PARTE DO CORPO (rodada 8)
   `.sd-top` guarda a cabeça (o bicho SEM o círculo de fundo) e o adorno.
   `left`, `top` e `transform-origin` vêm de `encaixeCabeca`
   (celebration.js): o queixo de cada bicho cai sobre os ombros e o
   conjunto gira no MESMO tempo, sentido e ponto do tronco — a cintura.
   A largura daqui tem de ser a mesma de CABECA.larg, lá. */
.sd-top{
  position:absolute;width:68%;aspect-ratio:1;z-index:2;
  animation:sd-top calc(var(--beat) * 2) ease-in-out infinite;
}
.sd-head{position:absolute;inset:0;width:100%;height:100%}
.sd-head-emoji{inset:18%;width:auto;height:auto;border-radius:50%;display:grid;place-items:center;font-size:clamp(2rem,6vw,2.8rem);background:#FFF3B0}
/* o adorno senta no topo da cabeça de verdade: --hx é o meio dela e
   --hy o topo, em % da caixa (cada bicho tem o seu) */
.sd-crown{position:absolute;left:var(--hx,50%);top:calc(var(--hy,28%) - 64%);width:120%;transform:translateX(-50%);z-index:-1}
/* chapéus e faixas sentam NA cabeça, não atrás dela */
.sd-crown-hat,.sd-crown-leather,.sd-crown-panama{top:calc(var(--hy,28%) - 39%);width:88%;z-index:1}
.sd-crown-band{top:calc(var(--hy,28%) - 36%);width:88%;z-index:1}
.sd-crown-umbrella{top:calc(var(--hy,28%) - 68%);width:120%;z-index:-1}
.sd-body g{transform-box:fill-box}
.sd-leg{transform-origin:50% 0%}
.sd-leg-l{animation:sd-leg-l calc(var(--beat) * 2) ease-in-out infinite}
.sd-leg-r{animation:sd-leg-r calc(var(--beat) * 2) ease-in-out infinite}
.sd-hips{transform-origin:50% 0%;animation:sd-hips calc(var(--beat) * 2) ease-in-out infinite}
.sd-torso{transform-origin:50% 100%;animation:sd-torso calc(var(--beat) * 2) ease-in-out infinite}
.sd-arm-l{transform-origin:100% 100%;animation:sd-arm-l calc(var(--beat) * 2) ease-in-out infinite}
.sd-arm-r{transform-origin:0% 100%;animation:sd-arm-r calc(var(--beat) * 2) ease-in-out infinite}

@keyframes sd-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
/* mesmos ângulos e mesmo tempo de sd-torso: cabeça e tronco juntos */
@keyframes sd-top{0%,100%{transform:rotate(4deg)}50%{transform:rotate(-4deg)}}
@keyframes sd-leg-l{0%,100%{transform:rotate(10deg)}25%{transform:rotate(-18deg) translateY(-3px)}50%{transform:rotate(-4deg)}75%{transform:rotate(6deg)}}
@keyframes sd-leg-r{0%,100%{transform:rotate(4deg)}25%{transform:rotate(-6deg)}50%{transform:rotate(18deg) translateY(-3px)}75%{transform:rotate(-10deg)}}
@keyframes sd-hips{0%,100%{transform:translateX(-5px) rotate(-6deg)}50%{transform:translateX(5px) rotate(6deg)}}
@keyframes sd-torso{0%,100%{transform:rotate(4deg)}50%{transform:rotate(-4deg)}}
@keyframes sd-arm-l{0%,100%{transform:rotate(0deg)}25%{transform:rotate(-28deg)}50%{transform:rotate(12deg)}75%{transform:rotate(-10deg)}}
@keyframes sd-arm-r{0%,100%{transform:rotate(0deg)}25%{transform:rotate(-12deg)}50%{transform:rotate(28deg)}75%{transform:rotate(10deg)}}

@media (max-height:640px){
  .samba-dancer{width:clamp(110px,24vh,150px)}
  .celebrate-sub{margin-bottom:.6rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  /* quem pediu menos movimento continua vendo a festa, parada */
  .confetti,.cv-fireworks,.cv-streamers,.cv-umbrellas{display:none}
  .float-car{transform:translateX(5vw)}
  .cv-ball{transform:translateX(42vw)}
}

/* =========================================================
   JOGOS DE VOCABULÁRIO (rodada 7) — ver games.js
   ========================================================= */
/* Os dois balões fixos do app: jogos no canto inferior esquerdo,
   assistente no inferior direito. Aparecem em toda tela menos Perfil
   e Configurações; o do assistente também some na própria tela dele. */
.games-fab,.chat-fab{
  position:fixed;bottom:max(1.1rem,env(safe-area-inset-bottom));z-index:40;
  display:flex;align-items:center;gap:.45rem;border:0;cursor:pointer;
  padding:.75rem 1.1rem;color:#fff;
  font-weight:800;font-size:.92rem;
  transition:transform .18s var(--ease),box-shadow .18s;
  animation:fabIn .4s var(--ease);
}
.games-fab{
  left:max(1rem,env(safe-area-inset-left));border-radius:22px 22px 22px 6px;
  background:linear-gradient(135deg,var(--jade),var(--petrol));box-shadow:0 12px 28px -10px var(--petrol);
}
.games-fab:hover{transform:translateY(-3px);box-shadow:0 16px 32px -10px var(--petrol)}
.games-fab-ico{font-size:1.25rem;line-height:1}
.chat-fab{
  right:max(1rem,env(safe-area-inset-right));border-radius:22px 22px 6px 22px;padding:.5rem 1.1rem .5rem .5rem;
  background:linear-gradient(135deg,var(--coral),#E8A33D);box-shadow:0 12px 28px -10px var(--coral);
}
.chat-fab:hover{transform:translateY(-3px);box-shadow:0 16px 32px -10px var(--coral)}
.chat-fab-ico{width:30px;height:30px;border-radius:50%;background:#fff;padding:2px}
.chat-fab[aria-expanded="true"]{box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--coral)}
@keyframes fabIn{from{opacity:0;transform:translateY(12px) scale(.9)}to{opacity:1;transform:none}}

.screen-app[data-route="perfil"] :is(.games-fab,.chat-fab),
.screen-app[data-route="ajustes"] :is(.games-fab,.chat-fab),
.screen-app[data-route="chat"] .chat-fab{display:none}
/* o conteúdo não fica escondido atrás dos balões */
#app{padding-bottom:5.5rem}
/* na tela do assistente, o chat termina acima do balão de jogos */
.screen-app[data-route="chat"] #view-chat .chat-wrap{height:calc(100dvh - var(--topbar-h) - 11rem)}

/* no celular os balões viram só o ícone, para não cobrir a tela */
@media (max-width:560px){
  .games-fab,.chat-fab{padding:.7rem;border-radius:50%}
  .chat-fab{padding:.4rem}
  .games-fab > span:last-child,.chat-fab > span:last-child{
    position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .games-fab-ico{font-size:1.45rem}
  .chat-fab-ico{width:38px;height:38px}
}

/* a janelinha do assistente, aberta pelo balão */
.chat-dock{
  position:fixed;z-index:65;right:max(1rem,env(safe-area-inset-right));
  bottom:calc(max(1.1rem,env(safe-area-inset-bottom)) + 3.9rem);
  width:min(380px,calc(100vw - 2rem));height:min(560px,calc(100dvh - var(--topbar-h) - 6.5rem));
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);overflow:hidden;animation:fabIn .25s var(--ease);
}
.chat-dock::before{content:"";flex:none;height:4px;background:var(--rainbow)}
.chat-dock-close{
  position:absolute;top:.8rem;right:.7rem;z-index:1;width:32px;height:32px;border-radius:50%;
  border:0;background:var(--surface-2);color:var(--ink-2);font-size:.9rem;
}
.chat-dock-close:hover{background:var(--cream-d);color:var(--ink)}
.chat-dock-body{flex:1;min-height:0;display:flex;flex-direction:column}
.chat-dock .chat-head{margin:0;padding:.75rem 3rem .75rem 1rem;gap:.7rem;border-bottom:1px solid var(--line)}
.chat-dock .bot-face{width:40px;height:40px}
.chat-dock .chat-head h1{font-size:1.05rem}
.chat-dock .chat-head p{font-size:.8rem;line-height:1.35}
.chat-dock .chat-wrap{flex:1;height:auto;min-height:0;border:0;border-radius:0;box-shadow:none}
.chat-dock .chat-log{padding:.9rem}
@media (max-width:560px){
  .chat-dock{
    right:.5rem;left:.5rem;width:auto;
    bottom:calc(max(1.1rem,env(safe-area-inset-bottom)) + 3.8rem);
    height:calc(100dvh - var(--topbar-h) - 5.5rem);
  }
}

.games-modal{
  position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:1rem;
  background:rgba(17,34,38,.6);backdrop-filter:blur(4px);animation:fadeIn .2s var(--ease);
}
.games-panel{
  width:min(760px,100%);max-height:calc(100dvh - 2rem);overflow:auto;
  background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  padding:clamp(1rem,3.5vw,1.6rem);
}
.games-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:.9rem}
.games-head h2{margin:0;font-size:clamp(1.2rem,3.4vw,1.5rem);color:var(--heading)}
.games-head p{margin:.15rem 0 0;color:var(--ink-3);font-size:.86rem}
.games-tabs{display:flex;gap:.35rem;flex-wrap:wrap;margin-bottom:.7rem}
.games-tab{
  border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2);
  border-radius:999px;padding:.45em .95em;font-weight:700;font-size:.85rem;cursor:pointer;
}
.games-tab.is-active{background:linear-gradient(135deg,var(--petrol),var(--jade));color:#fff;border-color:transparent}
.games-bar{display:flex;justify-content:space-between;align-items:center;gap:.8rem;flex-wrap:wrap;margin-bottom:.8rem}
.games-desc{margin:0;font-size:.88rem;color:var(--ink-2);flex:1;min-width:14rem}
.games-unit select{border:1px solid var(--line);border-radius:10px;padding:.35rem .5rem;background:var(--surface);color:var(--ink);font:inherit;font-size:.85rem}
.games-status{display:flex;justify-content:space-between;gap:1rem;font-size:.82rem;font-weight:700;color:var(--ink-3);margin-bottom:.6rem}
.games-foot{display:flex;justify-content:center;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:.9rem}
.games-win,.games-miss{
  margin-top:.9rem;padding:.75rem 1rem;border-radius:var(--r-sm);font-weight:700;text-align:center;
  display:flex;align-items:center;justify-content:center;gap:.7rem;flex-wrap:wrap;
}
.games-win{background:var(--jade-l);color:var(--jade-d)}
.games-miss{background:var(--coral-l);color:var(--coral-d)}
.games-locked{margin:.5rem 0}

/* 1. memória */
.mem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}
@media (max-width:520px){ .mem-grid{grid-template-columns:repeat(3,1fr)} }
.mem-card{
  position:relative;aspect-ratio:1/1.05;border-radius:14px;border:2px solid var(--line);cursor:pointer;
  background:linear-gradient(135deg,var(--petrol),var(--jade));color:#fff;padding:.3rem;
  display:grid;place-items:center;transition:transform .2s var(--ease),background .2s;
}
.mem-card:hover{transform:translateY(-2px)}
.mem-back{font-size:1.6rem;opacity:.9}
.mem-face{display:none;flex-direction:column;align-items:center;gap:.15rem;text-align:center}
/* Rodada 8: a carta revelada fica PARADA. O giro é só da carta que
   acabou de ser virada — ver `virando` em games.js. Antes a animação
   morava em `.is-open` e voltava a cada redesenho do tabuleiro. */
.mem-card.is-open{background:var(--surface-2);color:var(--ink)}
.mem-card.is-flip{animation:memFlip .25s var(--ease)}
.mem-card.is-open .mem-back{display:none}
.mem-card.is-open .mem-face{display:flex}
.mem-card.is-found{border-color:var(--jade);background:var(--jade-l);animation:none}
.mem-card.is-found:hover,.mem-card.is-open:hover{transform:none}
.mem-face strong{font-size:clamp(.85rem,2.4vw,1rem)}
.mem-ico{font-size:clamp(1.6rem,5vw,2.1rem);line-height:1}
.mem-face small{font-size:.78rem;color:var(--ink-2)}
@keyframes memFlip{from{transform:rotateY(90deg)}to{transform:none}}

/* 2. cartões */
.flash-card{
  display:block;width:min(360px,100%);margin:0 auto;aspect-ratio:4/3;border:0;background:none;
  perspective:900px;cursor:pointer;padding:0;
}
.flash-inner{position:relative;display:block;width:100%;height:100%;transition:transform .5s var(--ease);transform-style:preserve-3d}
.flash-card.is-flipped .flash-inner{transform:rotateY(180deg)}
.flash-front,.flash-back{
  position:absolute;inset:0;backface-visibility:hidden;border-radius:var(--r-lg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;
  border:1px solid var(--line);box-shadow:var(--shadow);padding:1rem;
}
.flash-front{background:var(--gold-l);color:var(--ink)}
.flash-back{background:var(--jade-l);color:var(--ink);transform:rotateY(180deg)}
.flash-ico{font-size:3rem;line-height:1}
.flash-front strong{font-size:1.6rem}
.flash-back strong{font-size:1.5rem;color:var(--jade-d)}
[data-theme="dark"] .flash-back strong{color:#7FD3BC}
.flash-front small,.flash-back small{color:var(--ink-2);font-size:.9rem}

/* 3. palavra cruzada — rodada 8
   A pista da palavra que está sendo escrita fica numa faixa colada na
   grade (como na cruzadinha de papel, onde a pista está ao lado de
   onde se escreve), e as pistas da coluna são botões: clicar leva o
   cursor para a primeira casa daquela palavra. */
.cw-wrap{display:flex;gap:1.2rem;flex-wrap:wrap;align-items:flex-start;justify-content:center}
.cw-board{
  display:flex;flex-direction:column;gap:.5rem;align-items:center;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);
  padding:.7rem;box-shadow:var(--shadow);
}
.cw-active{
  display:flex;align-items:center;gap:.5rem;width:100%;min-height:2.4rem;
  background:linear-gradient(135deg,var(--petrol),var(--jade));color:#fff;
  border-radius:12px;padding:.4rem .7rem;font-size:.9rem;
}
.cw-active-n{font-weight:800;letter-spacing:.02em;flex:none}
.cw-active-ico{font-size:1.25rem;line-height:1;flex:none}
.cw-active-txt{display:flex;flex-direction:column;line-height:1.2;min-width:0;flex:1}
.cw-active-txt small{font-size:.72rem;opacity:.8}
.cw-active-len{flex:none;font-size:.74rem;font-weight:700;opacity:.85;white-space:nowrap}
.cw{border-collapse:separate;border-spacing:3px}
.cw td{width:clamp(1.9rem,7vw,2.5rem);height:clamp(1.9rem,7vw,2.5rem);padding:0}
.cw-void{background:transparent}
.cw-cell{
  position:relative;background:var(--surface);border:2px solid var(--petrol);border-radius:6px;
  transition:background .15s,border-color .15s;
}
.cw-cell input{
  width:100%;height:100%;border:0;background:transparent;text-align:center;text-transform:uppercase;
  font:800 clamp(.95rem,3vw,1.15rem) var(--font);color:var(--ink);padding:0;outline:none;caret-color:var(--coral);
}
.cw-cell.is-active{background:var(--gold-l);border-color:var(--gold)}
.cw-cell:focus-within{box-shadow:0 0 0 3px var(--coral);border-color:var(--coral);z-index:1}
.cw-n{position:absolute;top:0;left:2px;font-size:.55rem;font-weight:700;color:var(--ink-3);pointer-events:none}
.cw-cell.is-right{background:var(--jade-l);border-color:var(--jade)}
.cw-cell.is-wrong{background:var(--coral-l);border-color:var(--coral)}
.cw-clues{min-width:14rem;flex:1;max-width:22rem}
.cw-clues h4{margin:.2rem 0 .35rem;font-size:.8rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3)}
.cw-clues ol{list-style:none;margin:0 0 .8rem;padding:0;display:grid;gap:.3rem}
.cw-clue{
  display:flex;align-items:center;gap:.5rem;width:100%;text-align:left;
  font:inherit;font-size:.92rem;padding:.35rem .55rem;border-radius:10px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  transition:border-color .15s,background .15s,transform .15s var(--ease);
}
.cw-clue:hover{border-color:var(--jade);transform:translateX(2px)}
.cw-clue.is-active{border-color:var(--gold);background:var(--gold-l);box-shadow:0 0 0 2px var(--gold) inset}
.cw-clue.is-right{border-color:var(--jade);background:var(--jade-l)}
.cw-clue.is-wrong{border-color:var(--coral);background:var(--coral-l)}
.cw-clue-n{flex:none;min-width:1.4em;text-align:center;font-weight:800;color:var(--heading)}
.cw-clue-txt{display:flex;flex-direction:column;line-height:1.2;min-width:0;flex:1}
.cw-py{font-size:.72rem;color:var(--ink-3)}
.cw-len{
  flex:none;min-width:1.5rem;height:1.5rem;display:grid;place-items:center;border-radius:50%;
  background:var(--surface-2);color:var(--ink-3);font-size:.72rem;font-weight:800;
}
.cw-ico{font-size:1.2rem;flex:none}
@media (max-width:620px){
  .cw-wrap{gap:.8rem}
  .cw-clues{max-width:none}
}

/* 4. ouvir e achar */
.ls-top{display:flex;justify-content:center;margin-bottom:.8rem}
.ls-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.55rem}
.ls-opt{
  display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.8rem .5rem;cursor:pointer;
  border:2px solid var(--line);border-radius:14px;background:var(--surface-2);color:var(--ink);
  transition:border-color .15s,transform .15s var(--ease);
}
.ls-opt:hover:not(:disabled){border-color:var(--petrol);transform:translateY(-2px)}
.ls-ico{font-size:2.4rem;line-height:1}
.ls-opt small{color:var(--ink-2)}
.ls-opt.is-right{border-color:var(--jade);background:var(--jade-l)}
.ls-opt.is-wrong{border-color:var(--coral);background:var(--coral-l)}

/* rodada 9, item 13: o PDF no fim do resultado dos exercícios */
.result-pdf{display:flex;justify-content:center;margin:1rem 0 .2rem}
.result-pdf .pdf-balloon{position:relative}
/* rodada 9, item 9: resposta do assistente que aponta para uma tela */
.msg .m-go{display:flex;width:max-content;margin-top:.6rem}

/* rodada 9, item 12: Biblioteca de materiais */
.lib-group h3{margin-bottom:.8rem}
.lib-list{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.lib-item{display:flex;gap:.8rem;align-items:flex-start;padding:.9rem 1rem;border-radius:var(--r-sm);
  background:var(--surface-2);border:1px solid var(--line)}
.lib-ico{font-size:1.5rem;line-height:1;flex:none}
.lib-item strong{font-size:.98rem}
.lib-item small{color:var(--ink-3)}
.lib-item p{margin:.3rem 0 .5rem;font-size:.88rem;color:var(--ink-2)}
.pdf-unit{margin-top:1rem}
.pdf-unit h4{font-size:.92rem;margin:0 0 .4rem;color:var(--ink-2)}
.pdf-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.6rem 0;border-top:1px solid var(--line)}
.pdf-sub{font-weight:600;font-size:.92rem}
.pdf-files{display:flex;flex-wrap:wrap;gap:.4rem}
.pdf-files .pdf-op{width:auto;border:1px solid var(--line);background:var(--surface)}
.pdf-files .pdf-op:hover{border-color:var(--jade)}

/* rodada 9, item 10: tamanho da letra (A− 100% A+) */
.font-step{display:inline-flex;align-items:center;gap:.35rem;flex:none}
.font-step button{min-width:2.4rem;height:2.2rem;border-radius:10px;border:1px solid var(--line);
  background:var(--surface-2);color:var(--ink);font-weight:800}
.font-step button:disabled{opacity:.4;cursor:not-allowed}
.font-step button:not(:disabled):hover{border-color:var(--jade)}
.font-step output{min-width:3.2rem;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.font-step .fs-reset{min-width:2.2rem;font-weight:600}
/* no celular o card de dias seguidos empilha: avatar em cima, número embaixo */
@media (max-width:480px){
  .stat-streak{flex-direction:column;text-align:center;gap:.35rem}
  .streak-av{width:48px;height:48px}
}

/* =========================================================
   BLOCOS GENÉRICOS (renderer.js) — os que não existiam antes
   do editor. Os migrados (texto, balão, colunas de comparação e
   de cartões, tabela) reaproveitam as classes de sempre.
   ========================================================= */
/* aviso discreto: só a administradora vê (bloco desconhecido ou com erro) */
.rb-warn{margin:.25rem 0;padding:.45rem .7rem;border:1px dashed var(--coral);border-radius:var(--r-sm);
  background:var(--coral-l);color:var(--coral-d);font-size:.82rem}

/* formatação de texto */
.rb-t-pequeno{font-size:.88rem}
.rb-t-grande{font-size:1.18rem}
.rb-t-enorme{font-size:clamp(1.35rem,3.6vw,1.7rem);line-height:1.35}
.rb-a-centro{text-align:center}
.rb-a-direita{text-align:right}
.rb-a-justificado{text-align:justify}
.rb-b{font-weight:700}
.rb-i{font-style:italic}

.rb-title{margin:.6rem 0 .1rem;color:var(--heading);line-height:1.25}
.rb-emoji{line-height:1;text-align:center}
.rb-emoji-p{font-size:1.6rem}
.rb-emoji-m{font-size:2.6rem}
.rb-emoji-g{font-size:4rem}

/* colunas simples: 2 ou 3 lado a lado, empilham no celular */
.rb-cols{display:grid;gap:1rem}
.rb-cols-2{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.rb-cols-3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

/* balão personalizado: cor de fundo, cor e grossura da borda */
.b-callout.rb-custom{background:var(--rb-bg,var(--surface));
  border:var(--rb-bw,1px) solid var(--rb-bd,var(--line));
  border-left:calc(var(--rb-bw,1px) + 4px) solid var(--rb-bd,var(--petrol))}
.b-callout.rb-custom > div > strong{color:var(--rb-bd,var(--heading))}

.rb-sep{border:0;border-top:1px solid var(--line);margin:.6rem 0}
.rb-space-p{height:.5rem}
.rb-space-m{height:1.25rem}
.rb-space-g{height:2.5rem}
.rb-btn{margin:0}

.rb-img{margin:0}
.rb-img img{display:block;max-width:100%;height:auto;border-radius:var(--r);box-shadow:var(--shadow)}
.rb-img-p img{max-width:min(100%,280px)}
.rb-img-m img{max-width:min(100%,520px)}
.rb-img.rb-a-centro img,.rb-img-p img,.rb-img-m img{margin-inline:auto}
.rb-img figcaption,.rb-video figcaption{margin-top:.4rem;font-size:.82rem;color:var(--ink-3);text-align:center}
.rb-video{margin:0}

.rb-audio{display:flex;align-items:center;gap:.6rem;margin:0}

/* COR DO BLOCO (escolhida no editor): props.cores = { fundo, texto, borda } */
.rb-moldura.rb-com-fundo,.rb-moldura.rb-com-borda{border-radius:var(--r);padding:1rem 1.15rem}
.rb-pintado.rb-com-fundo{background:var(--rb-fundo)}
.rb-moldura.rb-com-borda{border:2px solid var(--rb-borda)}
.b-callout.rb-pintado.rb-com-borda,.b-later.rb-pintado.rb-com-borda{border-color:var(--rb-borda)}
.rb-pintado.rb-com-texto,
.rb-pintado.rb-com-texto :is(p,li,strong,h1,h2,h3,h4,h5,td,th,small,span:not([class*="lk-"]):not(.pair):not(.gl)){color:var(--rb-txt)}
.rb-pintado.rb-com-fundo .b-col,.rb-pintado.rb-com-fundo .culture-card,.rb-pintado.rb-com-fundo .tbl-wrap{background:transparent}

/* ÁUDIO LIGADO A UMA PALAVRA OU FRASE: ((Bom dia)) no texto */
.rb-fala{display:inline;font:inherit;color:inherit;background:none;border:0;padding:0 .1em;margin:0;cursor:pointer;
  border-bottom:2px dotted var(--jade);border-radius:3px;text-align:inherit}
.rb-fala:hover,.rb-fala:focus-visible{background:var(--jade-l);outline:0}
.rb-fala-ico{font-size:.72em;margin-left:.2em;vertical-align:.1em}

/* ÁREAS DE BLOCOS nos exercícios e no nivelamento (editor de exercícios) */
.q-blocos{display:flex;flex-direction:column;gap:.8rem;margin:.2rem 0 .6rem}
.opt-card{display:flex;flex-direction:column;gap:.3rem}
.opt-card .opt-blocos{padding:.5rem .7rem;border:1px dashed var(--line);border-radius:var(--r-sm)}
.explain-blocos{margin-top:.5rem;display:flex;flex-direction:column;gap:.6rem}


/* =========================================================
   RODADA 10 — ALVOS DE TOQUE E COMPORTAMENTOS HOVER x TOQUE
   ========================================================= */

/* Alvos minimos de 44 x 44 px em telas de toque */
@media (pointer: coarse) {
  .btn{min-height:44px}
  .btn-sm{min-height:40px}
  .icon-btn{width:44px;height:44px}
  .drawer-item{min-height:48px;padding:.75rem .65rem}
  .syl-head{min-height:44px}
  .syl-cell{min-height:40px}
  .opt{min-height:52px}
  .profile-tab{min-height:44px}
  .gear-pick{min-height:48px;min-width:48px}
  .avatar-pick{min-height:80px}
  .lang-opt{min-height:40px;min-width:40px}
  .sub-nav a.btn,.sub-nav .sub-nav-unit{min-height:40px;display:inline-flex;align-items:center}
}

/* Hover so quando o dispositivo suporta (mouse/trackpad) */
@media (hover: hover) {
  .btn:hover{transform:translateY(-1px)}
  .unit:not(.is-locked):not(.is-draft):hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
}
@media (hover: none) {
  /* toque: sem efeitos residuais de hover que ficam presos */
  .btn:hover{transform:none}
  .unit:hover{transform:none;box-shadow:var(--shadow)}
  .drawer-item:hover{transform:none}
  .avatar-btn:hover{transform:none}
  .choice:hover{transform:none}
}

/* Celular em landscape (barra do topo compacta) */
@media (orientation: landscape) and (max-height:500px){
  :root{--topbar-h:52px}
  .screen-login,.screen-onb{padding-top:max(1rem, env(safe-area-inset-top, 1rem));padding-bottom:max(1rem, env(safe-area-inset-bottom, 1rem))}
  .screen-login .login-box,.screen-onb .onb-box{max-height:calc(100dvh - 4rem);overflow-y:auto}
}

/* =========================================================
   RODADA 11 (aulas, perfil, home, música, termos, tela)
   ========================================================= */

/* --- item 2: e-mail só como informação --- */
.field-static .static-val{margin:0;padding:.78rem .95rem;border-radius:var(--r-sm);background:var(--cream-d);color:var(--ink-2);font-weight:600;word-break:break-all}
[data-theme="dark"] .field-static .static-val{background:var(--surface-2)}

/* --- item 8: lista pesquisável de país/província --- */
.cbx{position:relative}
.cbx .cbx-input{padding-right:2.4rem}
.cbx-toggle{position:absolute;right:.35rem;top:50%;transform:translateY(-50%);width:2rem;height:2rem;border:0;border-radius:8px;background:transparent;color:var(--ink-3);font-size:.9rem;cursor:pointer}
.cbx.is-open .cbx-toggle{color:var(--jade)}
.cbx.is-disabled{opacity:.55}
.cbx.is-disabled .cbx-toggle{pointer-events:none}
.cbx-list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:60;margin:0;padding:.3rem;list-style:none;
  max-height:240px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow-lg)}
.cbx.cbx-up .cbx-list{top:auto;bottom:calc(100% + 4px)}
.cbx-opt{padding:.55rem .7rem;border-radius:8px;cursor:pointer;font-size:.95rem;line-height:1.3}
.cbx-opt.is-selected{font-weight:700;color:var(--jade-d)}
.cbx-opt.is-active,.cbx-opt:hover{background:var(--jade-l);color:var(--ink)}
[data-theme="dark"] .cbx-opt.is-active,[data-theme="dark"] .cbx-opt:hover{background:var(--surface-2)}
[data-theme="dark"] .cbx-opt.is-selected{color:var(--jade)}
.cbx-empty{padding:.6rem .7rem;color:var(--ink-3);font-size:.9rem}
@media (max-height:600px){ .cbx-list{max-height:180px} }
.field input:disabled{opacity:.6;cursor:not-allowed}

/* --- item 4: emoji da constância na home --- */
.stat-streak[data-mood="perfeita"] .streak-emoji{font-size:1.75rem;letter-spacing:-.1em}

/* --- item 3.1: metas de estudo com liga/desliga --- */
.goal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.goal-head h3{margin-bottom:.25rem}
.goal-explain{margin:0;color:var(--ink-2);font-size:.88rem;line-height:1.45;max-width:46ch}
.goal-switch{flex:none;margin-top:.2rem}
.goal-body{margin-top:1rem}
.goal-days{grid-template-columns:repeat(7,minmax(0,1fr));gap:.35rem}
.goal-days .choice{padding:.55rem .2rem;justify-content:center;text-align:center}
.goal-progress{margin-top:1.2rem;padding:1rem;border-radius:var(--r-sm);background:var(--cream);border:1px solid var(--line)}
[data-theme="dark"] .goal-progress{background:var(--surface-2)}
.goal-progress h4{margin:.2rem 0 .6rem;font-size:.85rem;color:var(--ink-2);text-transform:uppercase;letter-spacing:.04em}
.goal-progress h4 + .goal-track{margin-top:0}
.goal-track{margin-bottom:.7rem}
.goal-track-top{display:flex;justify-content:space-between;font-size:.85rem;margin-bottom:.3rem}
.goal-week{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.35rem;text-align:center}
.goal-week li span{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin:0 auto .2rem;border-radius:50%;border:2px solid var(--line);color:var(--ink-3);font-weight:800}
.goal-week li.is-some span{border-color:var(--gold);color:var(--gold-d)}
.goal-week li.is-hit span{background:var(--jade);border-color:var(--jade);color:#fff}
.goal-week li.is-off{opacity:.45}
.goal-week small{font-size:.7rem;color:var(--ink-3)}
.goal-legend{margin:.6rem 0 0;font-size:.75rem;color:var(--ink-3)}

/* --- item 7: termos de uso (modal com rolagem obrigatória) --- */
.terms-row{margin:.5rem 0 .2rem;display:flex;align-items:flex-start;gap:.5rem;text-align:left}
.terms-row input{margin-top:.25rem;flex-shrink:0;width:1.05rem;height:1.05rem;accent-color:var(--jade)}
.terms-row a{font-weight:700}
.terms-state{display:block;margin-top:.15rem;font-size:.76rem;color:var(--ink-3)}
.terms-state.is-ok{color:var(--jade);font-weight:700}
body.tm-open{overflow:hidden}
.tm-overlay{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));background:rgba(15,28,33,.62);backdrop-filter:blur(2px)}
.tm-overlay[hidden]{display:none}
.tm-box{background:var(--surface);color:var(--ink);border-radius:var(--r);box-shadow:var(--shadow-lg);width:min(720px,100%);height:min(86vh,860px);height:min(86dvh,860px);display:flex;flex-direction:column;overflow:hidden}
.tm-head{flex:none;display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1rem 1.2rem .85rem;border-bottom:1px solid var(--line);background:var(--surface)}
.tm-head h2{margin:0;font-size:1.08rem;color:var(--heading)}
.tm-sub{margin:.2rem 0 0;font-size:.8rem;color:var(--ink-2)}
.tm-overlay.is-required .tm-sub{color:var(--coral-d);font-weight:600}
.tm-lang{flex:none}
.tm-body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:1rem 1.3rem 1.4rem;font-size:.9rem;line-height:1.65}
.tm-body:focus{outline:0}
.tm-body h2{font-size:1rem;margin:1.4rem 0 .4rem;color:var(--heading);border-bottom:2px solid var(--gold-l);padding-bottom:.25rem}
.tm-body h3{font-size:.93rem;margin:1.1rem 0 .3rem;color:var(--petrol)}
[data-theme="dark"] .tm-body h3{color:var(--jade)}
.tm-body p,.tm-body li{margin:.35rem 0}
.tm-body ol,.tm-body ul{padding-left:1.3rem;margin:.3rem 0}
.tm-body .tm-version{margin-top:0;color:var(--ink-2)}
.tm-body .tm-lead{background:var(--cream);border-left:4px solid var(--gold);padding:.6rem .8rem;border-radius:8px}
[data-theme="dark"] .tm-body .tm-lead{background:var(--surface-2)}
.tm-body .tm-end{text-align:center;color:var(--ink-3);margin-top:1.4rem}
.tm-fill{background:var(--gold-l);color:var(--gold-d);padding:0 .25em;border-radius:4px;font-weight:700}
.tm-foot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;padding:.75rem 1.2rem;border-top:1px solid var(--line);background:var(--surface)}
.tm-hint{margin:0;font-size:.82rem;font-weight:600;color:var(--coral-d)}
.tm-hint.is-done{color:var(--jade)}
.tm-actions{display:flex;gap:.5rem;margin-left:auto}
.tm-actions .btn[disabled]{opacity:.45;cursor:not-allowed}
@media (max-width:480px){
  .tm-overlay{padding:8px}
  .tm-box{height:calc(100dvh - 16px)}
  .tm-head{flex-direction:column;gap:.5rem;padding:.8rem .9rem}
  .tm-body{padding:.8rem .95rem 1.2rem;font-size:.88rem}
  .tm-foot{padding:.6rem .9rem}
  .tm-actions{width:100%}
  .tm-actions .btn{flex:1}
}

/* --- item 6: proteção do conteúdo das aulas --- */
/* marca d'água: e-mail + data (gerada em js/protecao.js). Só dissuade.
   Só aparece ao projetar (body.pb-projetando: 2º monitor/projetor ou tela cheia). */
#pbMarca{position:fixed;inset:0;z-index:40;pointer-events:none;display:none;
  background-image:var(--pb-marca);background-repeat:repeat;background-position:var(--pb-marca-pos,0 0);opacity:.075;
  transition:background-position 2s ease}
body.pb-aula.pb-projetando #pbMarca{display:block}
[data-theme="dark"] #pbMarca{filter:invert(1);opacity:.085}
body.pb-aula .video-frame,body.pb-aula .b-video{position:relative}
body.pb-aula.pb-projetando .video-frame::after,body.pb-aula.pb-projetando .b-video::after,.pb-fs::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background-image:var(--pb-marca);background-repeat:repeat;background-position:var(--pb-marca-pos,0 0);opacity:.16;filter:invert(1)}
.pb-fs{background:#000;display:flex;align-items:center;justify-content:center}
.pb-fs video{width:100%;height:100%;object-fit:contain}
/* sem selecionar/arrastar imagens e vídeos nas aulas */
body.pb-aula img,body.pb-aula video,.pb-protegido{-webkit-user-drag:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
/* imprimir uma tela de aula sai em branco (o PDF oficial imprime de outro jeito, num documento próprio) */
@media print{ body.pb-noprint{display:none !important} }

/* --- item 1: aulas com professores --- */
.aula-fuso{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .8rem;margin:1rem 0 .3rem;font-size:.9rem;color:var(--ink-2)}
.aula-fuso-pick{flex-basis:100%;max-width:440px}
.aula-st{display:inline-block;margin-top:.3rem;padding:.12rem .55rem;border-radius:99px;font-size:.74rem;font-weight:700;background:var(--cream-d);color:var(--ink-2)}
.aula-st.st-pendente{background:var(--gold-l);color:var(--gold-d)}
.aula-st.st-marcada{background:var(--jade-l);color:var(--jade-d)}
.aula-st.st-recusada,.aula-st.st-expirada{background:var(--coral-l);color:var(--coral-d)}
.aula-st.st-cancelada{background:var(--cream-d);color:var(--ink-3);text-decoration:line-through}
[data-theme="dark"] .aula-st{background:var(--surface-2)}
.aula-item{flex-wrap:wrap}
.aula-acoes{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-left:auto}
.aula-prazo{color:var(--ink-3);font-size:.75rem;max-width:22ch}
.aula-grupo{font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);margin:1rem 0 .5rem}
.bookings.is-past{opacity:.75}
.slot{display:inline-flex;flex-direction:column;align-items:center;line-height:1.15}
.slot b{font-size:1rem}
.slot small{font-size:.68rem;font-weight:500;opacity:.75;margin-top:.1rem}
.slot.is-picked{outline:3px solid var(--coral);outline-offset:2px}
.aula-confirma{position:sticky;top:calc(var(--topbar-h) + 8px);z-index:5;margin:.6rem 0 1rem;padding:.9rem 1rem;border-radius:var(--r-sm);background:var(--surface);border:2px solid var(--coral);box-shadow:var(--shadow-lg)}
.aula-confirma p{margin:0 0 .6rem;font-weight:600}
.aula-confirma-acoes{display:flex;gap:.5rem;justify-content:flex-end;flex-wrap:wrap}
.demo-box.is-warn{border-color:var(--coral);color:var(--coral-d)}
/* a página do link do e-mail do professor (sem login) */
.aula-resposta{position:fixed;inset:0;z-index:10001;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--bg)}
.aula-resposta-box{width:min(480px,100%);background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:1.6rem;text-align:center}
.aula-resposta-box h1{font-size:1.25rem;margin:.2rem 0 .8rem}
.aula-resposta-msg{font-weight:700;font-size:1.02rem;padding:.8rem;border-radius:var(--r-sm);background:var(--cream)}
.aula-resposta-msg.is-ok{background:var(--jade-l);color:var(--jade-d)}
.aula-resposta-msg.is-warn{background:var(--gold-l);color:var(--gold-d)}
/* admin: horários e lista de aulas */
.admin-slots{display:grid;gap:.4rem}
.admin-slot{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .7rem;padding:.45rem .7rem;border-radius:10px;border:1px solid var(--line);font-size:.86rem}
.admin-slot em{font-style:normal;font-weight:700;font-size:.75rem;padding:.05rem .45rem;border-radius:99px;background:var(--jade-l);color:var(--jade-d)}
.admin-slot.st-reservado em{background:var(--gold-l);color:var(--gold-d)}
.admin-slot.st-bloqueado{opacity:.6}
.admin-slot.st-bloqueado em{background:var(--cream-d);color:var(--ink-3)}
.admin-slot .btn{margin-left:auto}
.admin-slot .btn + .btn{margin-left:0}
.aula-filtro{display:flex;flex-wrap:wrap;gap:.3rem;margin:.6rem 0 1rem}
.aula-tabela-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-sm)}
.aula-tabela{width:100%;border-collapse:collapse;font-size:.86rem;min-width:620px}
.aula-tabela th,.aula-tabela td{padding:.55rem .7rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.aula-tabela th{background:var(--cream);font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2)}
[data-theme="dark"] .aula-tabela th{background:var(--surface-2)}
.email-item{border:1px solid var(--line);border-radius:10px;padding:.55rem .75rem;margin-bottom:.45rem;background:var(--surface)}
.email-item summary{cursor:pointer;display:flex;flex-direction:column;gap:.15rem}
.email-item summary small{color:var(--ink-3)}
.email-html{margin-top:.7rem;background:#fff;color:#1F2A2E;border-radius:8px;padding:.5rem;overflow-x:auto}
/* rótulo dos campos de lista pesquisável (label > span) igual aos demais */
.field > label > span{display:block;font-size:.82rem;font-weight:600;color:var(--ink-2);margin-bottom:.35rem}

/* =========================================================
   PRIVACIDADE (LGPD + PIPL) — cadastro, modal e Perfil → Privacidade e dados
   ========================================================= */
/* cadastro: idade (nenhuma opção vem marcada) e os consentimentos */
.age-block{border:1px solid var(--line);border-radius:var(--r-sm);padding:.6rem .8rem .7rem;margin:.4rem 0 .2rem;min-width:0;text-align:left}
.age-block legend{padding:0 .3rem;font-size:.82rem;font-weight:600;color:var(--ink-2)}
.age-opts{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem}
.age-opt{display:flex;align-items:center;gap:.4rem;font-size:.88rem;cursor:pointer}
.age-opt input{width:1.05rem;height:1.05rem;accent-color:var(--jade);flex-shrink:0}
.guardian{display:flex;flex-direction:column;gap:.55rem;margin-top:.7rem;padding-top:.6rem;border-top:1px dashed var(--line)}
.guardian[hidden]{display:none}
.guardian-intro{margin:0;font-size:.8rem;color:var(--ink-2);background:var(--gold-l);border-radius:8px;padding:.45rem .6rem}
[data-theme="dark"] .guardian-intro{background:var(--surface-2)}
.consent-row{margin:.35rem 0 .1rem;display:flex;align-items:flex-start;gap:.5rem;text-align:left;font-size:.85rem;line-height:1.45;cursor:pointer}
.consent-row input{margin-top:.2rem;flex-shrink:0;width:1.05rem;height:1.05rem;accent-color:var(--jade)}
.consent-row input:disabled + span{opacity:.6}
.consent-tag{display:inline-block;margin-left:.3rem;padding:.05em .5em;border-radius:999px;font-size:.68rem;font-weight:700;background:var(--coral-l);color:var(--coral-d);vertical-align:1px}
.consent-tag.is-opt{background:var(--jade-l);color:var(--jade-d)}
.consent-note{display:block;margin-top:.15rem;font-size:.76rem;color:var(--ink-3)}
.consent-note[hidden]{display:none}
/* tela de entrada e rodapé do app: link para a política */
.login-legal{margin:.55rem 0 0;font-size:.76rem;color:var(--ink-3);display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem}
.login-legal a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
.footer-legal{font-style:normal;color:var(--ink-3);text-decoration:underline;text-underline-offset:2px}
/* modal: idioma do documento (English) e o consentimento separado do reaceite */
.tm-langs{flex:none;display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.tm-en{border:1px solid var(--line);background:var(--surface);color:var(--ink-2);border-radius:999px;padding:.32rem .75rem;font:inherit;font-size:.8rem;font-weight:600;cursor:pointer}
.tm-en:hover{border-color:var(--jade);color:var(--jade)}
.tm-en.is-active{background:var(--petrol);border-color:var(--petrol);color:#fff}
.tm-langs.is-en .lang-thumb{opacity:0}
.tm-langs.is-en .lang-opt.is-active{color:var(--ink-2)}
.tm-consent{flex:1 1 100%;display:flex;align-items:flex-start;gap:.5rem;font-size:.82rem;line-height:1.45;background:var(--gold-l);border-radius:8px;padding:.5rem .65rem;cursor:pointer}
[data-theme="dark"] .tm-consent{background:var(--surface-2)}
.tm-consent[hidden]{display:none}
.tm-consent input{margin-top:.18rem;flex-shrink:0;width:1.05rem;height:1.05rem;accent-color:var(--jade)}
/* Perfil → Privacidade e dados */
.priv-sec > p{margin:.2rem 0 .7rem;font-size:.9rem;color:var(--ink-2)}
.priv-sec .setting{padding:.8rem 0}
.priv-sec .setting:last-child{border-bottom:0}
.priv-sec .badge{margin-top:0;font-size:.8rem;min-width:1.8rem;text-align:center}
.badge-jade{background:var(--jade-l);color:var(--jade-d)}
.priv-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.4rem}
.priv-sec .age-block{max-width:520px}
.priv-sec .age-block .form-err{margin:.5rem 0}
.priv-sec .age-block .btn{margin-top:.6rem}
.danger-zone > h3{color:var(--coral-d)}
.danger-confirm{margin-top:.8rem;padding:.8rem .9rem;border:1px solid rgba(227,108,90,.35);border-radius:var(--r-sm);background:var(--coral-l);display:flex;flex-direction:column;gap:.6rem;max-width:520px}
.danger-confirm[hidden]{display:none}
.danger-confirm .form-err{margin:0}

/* =========================================================
   CURSOS (js/cursos.js) — bandeira do curso no topo e
   "Meus cursos" no Perfil
   ========================================================= */
.course-top{font-size:1.25rem;line-height:1;text-decoration:none}
.course-list{display:grid;gap:.7rem}
.course-row{
  display:flex;align-items:center;gap:.85rem;
  padding:.85rem 1rem;border-radius:var(--r-sm);
  border:2px solid var(--line);background:var(--surface-2);
}
.course-row.is-on{border-color:var(--coral);background:var(--coral-l)}
.course-flag{font-size:1.6rem;line-height:1;flex:none}
.course-txt{display:grid;gap:.15rem;flex:1;min-width:0}
.course-txt strong{color:var(--heading)}
.course-txt small{color:var(--ink-2)}
.course-row .btn,.course-row .badge{flex:none}
@media (max-width:480px){
  .course-row{flex-wrap:wrap}
  .course-row .btn{width:100%}
}
/* painel: em qual curso a administradora está mexendo */
.admin-course{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:0 0 1rem}
.admin-course .ac-label{font-weight:600;color:var(--heading)}