/* Nova aula com IA — "ClipClass Editor v2 · Fluxo IA" do Claude Design, variação A (Cards).
   Tudo nos tokens do style.css, então o fluxo acompanha os temas claro, escuro e de Halloween. */
.af{--cc:var(--ink2);--cb:var(--fill);padding:0 0 60px}
.af-c-vocabulary{--cc:#1E8A5E;--cb:#E2F3EC}
.af-c-grammar{--cc:#3E6BD6;--cb:#E9EFFD}
.af-c-conversation{--cc:#7A5AD8;--cb:#EEE8FD}
.af-c-pronunciation{--cc:#C2453A;--cb:#FBE5E3}
.af-c-comprehension{--cc:#A1620A;--cb:#FBF0DC}
.af-c-custom{--cc:var(--ink2);--cb:var(--fill)}
:root[data-theme=dark] .af-c-vocabulary{--cc:#6ad9a0;--cb:rgba(106,217,160,.14)}
:root[data-theme=dark] .af-c-grammar{--cc:#8fb0ff;--cb:rgba(143,176,255,.14)}
:root[data-theme=dark] .af-c-conversation{--cc:#bca6ff;--cb:rgba(188,166,255,.15)}
:root[data-theme=dark] .af-c-pronunciation{--cc:#ff9a8f;--cb:rgba(255,154,143,.14)}
:root[data-theme=dark] .af-c-comprehension{--cc:#f5c267;--cb:rgba(245,194,103,.14)}
@media(prefers-color-scheme:dark){
  :root:not([data-theme=light]) .af-c-vocabulary{--cc:#6ad9a0;--cb:rgba(106,217,160,.14)}
  :root:not([data-theme=light]) .af-c-grammar{--cc:#8fb0ff;--cb:rgba(143,176,255,.14)}
  :root:not([data-theme=light]) .af-c-conversation{--cc:#bca6ff;--cb:rgba(188,166,255,.15)}
  :root:not([data-theme=light]) .af-c-pronunciation{--cc:#ff9a8f;--cb:rgba(255,154,143,.14)}
  :root:not([data-theme=light]) .af-c-comprehension{--cc:#f5c267;--cb:rgba(245,194,103,.14)}
}
.af button{font:inherit;cursor:pointer}
.af button:disabled{cursor:default}
.af code{font-family:var(--mono)}
.af .grow{flex:1}

/* passos no topo */
#topextra:has(.af-steps){display:inline-flex;align-items:center;gap:6px}
.af-steps{display:flex;flex-direction:row;flex-wrap:nowrap;gap:3px;padding:3px;border-radius:999px;background:var(--fill)}
.af-step{display:flex;align-items:center;gap:7px;padding:4px 12px 4px 4px;border-radius:999px;font-size:12px;font-weight:700;color:var(--muted);background:transparent}
.af-step i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:10px;font-weight:800;background:var(--fill-hover);color:var(--muted)}
.af-step.on{background:var(--glass-strong);color:var(--ink);box-shadow:0 2px 8px rgba(28,28,48,.12)}
.af-step.on i{background:var(--ink);color:var(--bg,#fff)}
.af-step.feito{color:var(--ink)}
.af-step.feito i{background:var(--green);color:#fff}
.af-step:not(:disabled):not(.on):hover{background:var(--fill-hover)}
.af-cancel{font-size:13px;font-weight:700;color:var(--muted);padding:9px 12px;border-radius:12px}
.af-cancel:hover{background:var(--fill)}

/* molduras */
.af-wrap{max-width:1180px;margin:0 auto;padding:30px 20px 0;display:flex;flex-direction:column;gap:18px}
.af-wrap.narrow{max-width:1080px;padding-top:34px;gap:22px}
.af-wrap.mid{max-width:980px;padding-top:48px}
.af-glass{background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid var(--glass-line);border-radius:22px;box-shadow:var(--shadow)}
.af-head{display:flex;flex-direction:column;gap:7px}
.af-head.row{flex-direction:row;align-items:flex-end;gap:10px;flex-wrap:wrap}
.af-head.row>div:first-child{flex:1;min-width:280px;display:flex;flex-direction:column;gap:6px}
.af-head h1{margin:0;font-size:36px;font-weight:800;letter-spacing:-.045em;line-height:1.05}
.af-head h1.sm{font-size:32px;line-height:1.1}
.af-head h1 em{font-style:normal;color:var(--red-ink)}
.af-head p{margin:0;font-size:14px;color:var(--muted);max-width:560px;line-height:1.5;text-wrap:pretty}
.af-headbtns{display:flex;gap:8px;flex-wrap:wrap}
.af-eyebrow,.af-label{font-size:10px;font-weight:800;letter-spacing:.14em;color:var(--muted)}
.af-grey{background:var(--fill);border-radius:13px;padding:10px 15px;font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap}
.af-grey:hover:not(:disabled){background:var(--fill-hover)}
.af-grey:disabled{opacity:.5}
.af-erro{padding:12px 15px;border-radius:14px;background:var(--red-soft);color:var(--red-ink);font-size:13px;font-weight:700}
.af-cat{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.1em;color:var(--cc);background:var(--cb);border-radius:999px;padding:4px 9px}


/* a IA trabalhando */
.af-carga{padding:22px 22px 20px;display:flex;flex-direction:column;gap:16px}
.af-cargahead{display:flex;align-items:center;gap:12px}
.af-cargahead b{font-size:22px;font-weight:800;letter-spacing:-.035em}
.af-spark{width:34px;height:34px;border-radius:11px;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:15px;flex:none}
.af-pct{font-size:12px;color:var(--muted)}
.af-bar{height:6px;border-radius:99px;background:var(--fill);overflow:hidden}
.af-bar i{display:block;height:100%;width:0;border-radius:99px;background:var(--brand);transition:width .2s linear}
.af-logs{display:flex;flex-direction:column;gap:8px}
.af-logs>div{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--faint)}
.af-logs i{width:18px;height:18px;border-radius:50%;background:var(--fill-hover);color:#fff;font-size:10px;font-style:normal;font-weight:800;display:grid;place-items:center;flex:none}
.af-logs .ativo,.af-logs .feito{color:var(--ink)}
.af-logs .ativo i{background:#ff6b5e}
.af-logs .feito i{background:var(--green)}
.af-skels{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.af-skel{border-radius:20px;background:var(--glass-soft);border:1px solid var(--glass-line);padding:16px;display:flex;flex-direction:column;gap:10px;opacity:.35;transition:opacity .3s}
.af-skel i{display:block;height:10px;border-radius:5px;background:var(--fill)}
.af-skel i:nth-child(1){width:84px;height:16px;border-radius:99px}
.af-skel i:nth-child(2){width:80%;height:18px;border-radius:6px;background:var(--fill-hover)}
.af-skel i:nth-child(4){width:64%}
.af-skel i:nth-child(5){height:36px;border-radius:11px;background:var(--fill-soft)}

/* passo 3: o trecho de cada parada */
.af-fala{display:flex!important;gap:9px;align-items:baseline;padding:9px 11px;border-radius:12px;background:var(--fill-soft)}
.af-fala code{font-size:10px;color:var(--muted);flex:none}
.af-fala span{font-size:13px;font-weight:600;line-height:1.4;color:var(--ink2)}
.af-fala b{font-weight:800;color:var(--cc)}
.af-fala.big span{font-size:14px}

/* passo 3 */
.af-titulo{width:100%;box-sizing:border-box;border:none!important;background:transparent!important;padding:0!important;margin:0!important;box-shadow:none!important;font-size:32px!important;font-weight:800;letter-spacing:-.045em;color:var(--ink)}
.af-head #af-meta{font-size:13px}
#af-salvar.ok{background:var(--green);box-shadow:none}
.af-aula{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.af-roteiro{flex:1 1 360px;max-width:460px;min-width:0;padding:15px;display:flex;flex-direction:column;gap:8px}
.af-rhead{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding-bottom:4px}
.af-rhead small{font-size:11px;font-weight:600;color:var(--muted)}
.af-row{display:flex;align-items:center;gap:6px;padding:9px 10px;border-radius:14px;background:var(--glass-soft);border:1px solid var(--glass-line)}
.af-row.on{background:var(--blue-soft);border-color:color-mix(in srgb,var(--blue) 35%,transparent)}
.af-row.busy{opacity:.45}
.af-row.clip{background:var(--fill-soft);border-color:transparent;gap:10px}
.af-row>i,.af-rowmain>i{width:26px;height:26px;border-radius:8px;background:var(--muted);color:#fff;display:grid;place-items:center;font-size:11px;font-style:normal;font-weight:800;flex:none}
.af-row.q>i{background:#ff6b5e}
.af-row.q{gap:10px}
/* roteiro da aula cinema: o cabeçalho de cada etapa, com o que entra nela */
.af-etapa{display:flex;align-items:center;gap:10px;padding:8px 4px 2px}
.af-etapa>i{width:22px;height:22px;border-radius:50%;background:#6f5bd6;color:#fff;display:grid;place-items:center;font-size:11px;font-style:normal;font-weight:800;flex:none}
.af-etapa>span{display:flex;flex-direction:column;min-width:0}
.af-etapa b{font-size:12px;font-weight:800}
.af-etapa small{font-size:11px;color:var(--muted)}
.af-etapa.fora>i{background:var(--fill);color:var(--muted);border:1px dashed var(--glass-line)}
.af-etapa.fora b{color:var(--muted)}
.af-row>span:not(.af-rowbtns),.af-rowmain>span{min-width:0;flex:1;display:flex;flex-direction:column}
.af-row small{font-size:9px;font-weight:800;letter-spacing:.1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.af-row.q small{color:#ff6b5e}
.af-row b{font-size:13px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.af-row.clip b{color:var(--ink2)}
.af-rowmain{flex:1;min-width:0;display:flex;align-items:center;gap:10px;background:transparent;text-align:left;color:var(--ink);padding:0}
.af-rowbtns{display:flex;flex:none}
.af-rowbtns button{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;color:var(--muted);font-size:12px;background:transparent}
.af-rowbtns button:hover:not(:disabled){background:var(--fill-hover);color:var(--ink)}
.af-rowbtns button:disabled{opacity:.35}
.af-addassunto{padding:9px;border-radius:12px;border:1px dashed var(--line-strong);font-size:12px;font-weight:700;color:var(--ink2);background:transparent}
.af-addassunto:hover{border-color:var(--blue);color:var(--blue)}
.af-sel{flex:1.4 1 460px;min-width:0;position:sticky;top:74px;padding:15px;display:flex;flex-direction:column;gap:13px}
.af-selhead{display:flex;align-items:center;gap:8px}
.af-selhead code{font-size:10px;color:var(--muted)}
.af-previa{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#121014;transition:opacity .2s}
.af-previa.busy{opacity:.35}
.af-previa iframe{position:absolute;top:0;left:0;width:1920px;height:1080px;border:0;transform-origin:0 0;pointer-events:none}
.af-selbody{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.af-selbody h2{margin:0;font-size:20px;font-weight:800;letter-spacing:-.03em}
.af-selbody p{margin:0;font-size:13px;color:var(--muted);line-height:1.45}
#af-selinfo{display:flex;flex-direction:column;gap:13px}
.af-selbtns{display:flex;gap:7px;flex-wrap:wrap;align-items:flex-start}
.af-selbtns .primary{flex:1;white-space:nowrap}
.af-trocar{position:relative}
.af-menu{position:absolute;z-index:6;bottom:calc(100% + 6px);left:0;width:min(340px,80vw);max-height:360px;overflow:auto;display:flex;flex-direction:column;gap:2px;padding:6px;border-radius:16px;background:var(--glass-strong);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid var(--glass-line);box-shadow:var(--shadow-lg)}
.af-menu button{display:flex;align-items:flex-start;gap:10px;padding:8px 9px;border-radius:11px;text-align:left;background:transparent;color:var(--ink)}
.af-menu button:hover:not(:disabled){background:var(--fill)}
.af-menu button:disabled{opacity:.45}
.af-menu i{width:22px;height:22px;border-radius:7px;color:#fff;display:grid;place-items:center;font-size:11px;font-style:normal;font-weight:800;flex:none}
.af-menu span{display:flex;flex-direction:column;gap:2px}
.af-menu b{font-size:13px}
.af-menu small{font-size:11px;color:var(--muted);line-height:1.35}

@media(max-width:700px){
  .af-head h1{font-size:28px}.af-titulo{font-size:26px!important}
  .af-sel{position:static}
  .af-steps .af-step{padding-right:8px;font-size:0}.af-steps .af-step i{font-size:10px}
}

/* passo 1, antes do clipe: a grade de cenas (clip-grid.js) */
.af-grade{padding:18px;display:flex;flex-direction:column;gap:14px}
.af-grade .cg-grid{max-height:none;overflow:visible;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}


/* Passo 2 — "ClipClass Passo 2 Topicos" do Claude Design: 3a (a lista) e 3b (as sugestões da IA).
   No tema claro, as cores do design; no escuro, as mesmas funções sobre o vidro do estúdio. */
.af-p2{--p2-roxo:#6a3fd8;--p2-roxo-ink:#5530b8;--p2-roxo-soft:#f0ebfd;--p2-roxo-sel:#f5f2fd;--p2-roxo-hl:#e8e0fc;--p2-roxo-line:#ddd3f7;--p2-roxo-x:#8b74d6;
  --p2-par:#f7f5fd;--p2-par-line:#e6dff8;--p2-panel:#fff;--p2-line:#e8e6ef;--p2-btn-line:#e1dfe9;--p2-row-line:#ebe9f1;--p2-hover:#f6f5fa;--p2-field:#f4f3f8;--p2-track:#efedf4;
  --p2-box:#cfccd9;--p2-rank:#c9c5d6;--p2-ink:#24222e;--p2-tx2:#4a4756;--p2-tx3:#5d5a69;--p2-mut:#6b6878;--p2-fnt:#8a8796;--p2-dim:#b6b3c2;--p2-off:#a3a0ae;
  --p2-coral:#fff5f3;--p2-coral-line:#f6d6da;--p2-cta:linear-gradient(110deg,#fba58c,#f0707e);
  max-width:1184px;padding-top:40px;gap:24px;color:var(--p2-ink)}
:root[data-theme=dark] .af-p2{--p2-roxo:#a58bff;--p2-roxo-ink:#c7b6ff;--p2-roxo-soft:rgba(165,139,255,.18);--p2-roxo-sel:rgba(165,139,255,.1);--p2-roxo-hl:rgba(165,139,255,.32);--p2-roxo-line:rgba(165,139,255,.3);--p2-roxo-x:#b9a6ff;
  --p2-par:rgba(255,255,255,.04);--p2-par-line:rgba(165,139,255,.22);--p2-panel:var(--glass-strong);--p2-line:var(--glass-line);--p2-btn-line:var(--line-strong);--p2-row-line:var(--line);--p2-hover:var(--fill);--p2-field:var(--fill);--p2-track:var(--fill);
  --p2-box:var(--line-strong);--p2-rank:var(--faint);--p2-ink:var(--ink);--p2-tx2:var(--ink2);--p2-tx3:var(--muted);--p2-mut:var(--muted);--p2-fnt:var(--faint);--p2-dim:var(--faint);--p2-off:var(--faint);
  --p2-coral:rgba(240,112,126,.1);--p2-coral-line:rgba(240,112,126,.28)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .af-p2{--p2-roxo:#a58bff;--p2-roxo-ink:#c7b6ff;--p2-roxo-soft:rgba(165,139,255,.18);--p2-roxo-sel:rgba(165,139,255,.1);--p2-roxo-hl:rgba(165,139,255,.32);--p2-roxo-line:rgba(165,139,255,.3);--p2-roxo-x:#b9a6ff;
  --p2-par:rgba(255,255,255,.04);--p2-par-line:rgba(165,139,255,.22);--p2-panel:var(--glass-strong);--p2-line:var(--glass-line);--p2-btn-line:var(--line-strong);--p2-row-line:var(--line);--p2-hover:var(--fill);--p2-field:var(--fill);--p2-track:var(--fill);
  --p2-box:var(--line-strong);--p2-rank:var(--faint);--p2-ink:var(--ink);--p2-tx2:var(--ink2);--p2-tx3:var(--muted);--p2-mut:var(--muted);--p2-fnt:var(--faint);--p2-dim:var(--faint);--p2-off:var(--faint);
  --p2-coral:rgba(240,112,126,.1);--p2-coral-line:rgba(240,112,126,.28)}}
.af-p2 button{color:inherit;background:transparent;border:0;text-align:left}
.af-p2 button:focus-visible,.af-p2 textarea:focus-visible{outline:2px solid color-mix(in srgb,var(--p2-roxo) 45%,transparent);outline-offset:1px}

/* cabeçalho */
.af-p2head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.af-p2tit{display:flex;flex-direction:column;gap:8px;min-width:min(100%,420px);flex:1}
.af-p2volta{display:flex;align-items:center;gap:10px}
.af-p2volta button{font-size:14px;font-weight:700;color:var(--p2-mut);padding:0}
.af-p2volta button:hover{color:var(--p2-ink)}
.af-p2volta span{font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--p2-mut)}
.af-p2tit h1{margin:0;font-size:42px;font-weight:800;letter-spacing:-.045em;line-height:1.05}
.af-p2tit h1 span{color:var(--p2-roxo)}
.af-p2tit p{margin:0;font-size:16px;color:var(--p2-mut);max-width:620px;line-height:1.5;text-wrap:pretty}
.af-clipmini{display:flex;align-items:center;gap:12px;background:var(--p2-panel);border:1px solid var(--p2-line);border-radius:16px;padding:8px 14px 8px 8px;max-width:100%}
.af-clipmini i{width:72px;aspect-ratio:16/9;flex:none;border-radius:8px;background:linear-gradient(160deg,#2c3048,#12131b) center/cover}
.af-clipmini span{display:flex;flex-direction:column;gap:2px;min-width:0}
.af-clipmini b{font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.af-clipmini small{font-size:12px;color:var(--p2-mut)}
.af-clipmini code{font-weight:700;color:var(--p2-ink);background:none;padding:0;font-size:12px}
.af-p2btns{display:flex;gap:10px;flex-wrap:wrap}
.af-p2 .af-p2btn{padding:12px 18px;border-radius:13px;background:var(--p2-panel);border:1px solid var(--p2-btn-line);font-size:14px;font-weight:700;white-space:nowrap}
.af-p2 .af-p2btn:hover{background:var(--p2-hover)}
.af-p2 .af-p2btn.roxo{color:var(--p2-roxo)}

/* 3a: lateral, busca e linhas */
.af-p2corpo{display:grid;grid-template-columns:240px minmax(0,1fr);gap:20px;align-items:start}
.af-p2lado{display:flex;flex-direction:column;gap:14px}
.af-cats{display:flex;flex-direction:column;gap:2px;background:var(--p2-panel);border:1px solid var(--p2-line);border-radius:18px;padding:8px}
.af-p2 .af-cats button{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;border-radius:11px;font-size:14px;font-weight:700;color:var(--p2-tx2)}
.af-p2 .af-cats button:hover{background:var(--p2-hover)}
.af-p2 .af-cats button[aria-pressed=true]{background:var(--p2-roxo-soft);color:var(--p2-roxo-ink)}
.af-cats code{font-size:11px;color:var(--p2-fnt);background:none;padding:0}
.af-iacard,.af-pedircard{border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:10px}
.af-iacard{background:var(--p2-coral);border:1px solid var(--p2-coral-line)}
.af-iacard b,.af-pedircard b{font-size:15px;font-weight:800;letter-spacing:-.01em}
.af-iacard span,.af-pedircard span{font-size:13px;color:var(--p2-tx3);line-height:1.5}
.af-p2 .af-iacard button{text-align:center;padding:11px;border-radius:12px;background:var(--p2-cta);color:#fff;font-size:14px;font-weight:800}
.af-p2 .af-iacard button:hover{filter:brightness(1.04)}
.af-pedircard{background:var(--p2-panel);border:1px solid var(--p2-line)}
.af-pedircard textarea{margin:0;min-height:0;border-radius:12px;font-size:13px;line-height:1.45;resize:vertical}
.af-p2 .af-pedircard button{align-self:flex-start;padding:9px 13px;border-radius:11px;background:var(--p2-roxo-soft);color:var(--p2-roxo-ink);font-size:13px;font-weight:800}
.af-p2lista{background:var(--p2-panel);border:1px solid var(--p2-line);border-radius:22px;padding:22px 24px;display:flex;flex-direction:column;gap:22px;min-width:0}
.af-p2busca{display:flex;align-items:center;gap:10px;background:var(--p2-field);border-radius:13px;padding:0 14px;margin:0;color:var(--p2-fnt);font-size:15px}
.af-p2busca:focus-within{outline:2px solid color-mix(in srgb,var(--p2-roxo) 40%,transparent);outline-offset:1px}
.af-p2busca input{flex:1;min-width:0;margin:0;border:0;background:transparent;box-shadow:none;padding:13px 0;font-size:15px;color:var(--p2-ink)}
.af-p2busca input:focus{outline:none;box-shadow:none}
.af-p2busca input::placeholder{color:var(--p2-off)}
#af-lista{display:flex;flex-direction:column;gap:22px}
.af-grupo{display:flex;flex-direction:column;gap:10px}
.af-grupohead{display:flex;align-items:baseline;gap:10px}
.af-grupohead span{font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--p2-mut)}
.af-grupohead i{flex:1;height:1px;background:var(--p2-track)}
.af-linhas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.af-p2 .af-linha{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:13px;border:1.5px solid var(--p2-row-line);background:var(--p2-panel);color:var(--p2-ink)}
.af-p2 .af-linha:hover{border-color:#c9bdf0}
.af-p2 .af-linha.on{border-color:var(--p2-roxo);background:var(--p2-roxo-sel)}
.af-p2 .af-linha.bloq,.af-sug.bloq{opacity:.5}
.af-p2 .af-linha.bloq,.af-p2 .af-sug.bloq .af-sugrow{cursor:not-allowed}
.af-check{width:20px;height:20px;flex:none;border-radius:6px;border:1.5px solid var(--p2-box);background:var(--p2-panel);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800}
.af-linha.on .af-check{border-color:var(--p2-roxo);background:var(--p2-roxo)}
.af-linhanome{flex:1;min-width:0;font-size:15px;font-weight:600;line-height:1.35}
.af-linha small{flex:none;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--p2-fnt);background:var(--p2-field);border-radius:999px;padding:3px 8px}
.af-p2 .af-vazio{padding:30px;text-align:center;font-size:15px;color:var(--p2-mut)}

/* 3b: o ranking */
.af-suglista{display:flex;flex-direction:column;gap:10px}
.af-sug{border-radius:20px;background:var(--p2-panel);border:2px solid var(--p2-line);overflow:hidden}
.af-sug.on{background:var(--p2-roxo-sel);border-color:var(--p2-roxo)}
.af-p2 .af-sugrow{display:grid;grid-template-columns:56px minmax(0,1fr) 150px 36px;gap:20px;align-items:center;width:100%;padding:20px 22px;color:var(--p2-ink)}
.af-sugrank{font-size:34px;font-weight:800;letter-spacing:-.04em;color:var(--p2-rank);align-self:start;line-height:1}
.af-sugmain{display:flex;flex-direction:column;gap:10px;min-width:0}
.af-sugtit{display:flex;flex-direction:column;gap:3px}
.af-sugtit small{font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--p2-roxo)}
.af-sugtit b{font-size:20px;font-weight:800;letter-spacing:-.025em;line-height:1.2}
.af-sugfalas{display:flex;gap:6px;flex-wrap:wrap}
.af-sugfala{padding:7px 10px;border-radius:10px;background:var(--p2-field);font-size:13px;font-weight:600;color:var(--p2-tx2);line-height:1.5}
.af-sugfala code{font-size:10.5px;color:var(--p2-fnt);margin-right:8px;background:none;padding:0}
.af-sugfala b{color:var(--p2-ink);font-weight:800;background:var(--p2-roxo-hl);border-radius:4px;padding:0 3px}
.af-sugconta{display:flex;flex-direction:column;gap:6px;align-self:start;padding-top:4px}
.af-sugconta code{font-size:12px;font-weight:700;color:var(--p2-ink);background:none;padding:0}
.af-sugconta>i{display:block;height:6px;border-radius:999px;background:var(--p2-track);overflow:hidden}
.af-sugconta>i>i{display:block;height:100%;background:var(--p2-roxo);border-radius:999px}
.af-sugbox{width:30px;height:30px;border-radius:50%;border:2px solid var(--p2-box);background:var(--p2-panel);color:#fff;display:grid;place-items:center;font-size:15px;font-weight:800}
.af-sug.on .af-sugbox{border-color:var(--p2-roxo);background:var(--p2-roxo)}
.af-p2 .af-sugmais{align-self:center;margin-top:6px;padding:11px 18px;border-radius:12px;font-size:14px;font-weight:700;color:var(--p2-mut)}
.af-p2 .af-sugmais:hover{background:var(--p2-track)}

/* "combina com": embaixo do card marcado (3b) ou do grupo do tópico (3a) */
.af-pares{padding:16px 18px 18px;border-radius:16px;background:var(--p2-panel);border:1px solid var(--p2-roxo-line);display:flex;flex-direction:column;gap:12px}
.af-sug .af-pares{margin:0 22px 22px 98px}
.af-pareshead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.af-pareshead b{font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--p2-roxo-ink);white-space:nowrap}
.af-pareshead span{font-size:13px;color:var(--p2-tx3)}
.af-paresgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.af-p2 .af-par{display:flex;gap:14px;align-items:center;background:var(--p2-par);border:1.5px solid var(--p2-par-line);border-radius:14px;padding:14px 16px;color:var(--p2-ink)}
.af-p2 .af-par:hover{border-color:var(--p2-roxo)}
.af-parinfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.af-partop{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.af-partop small{font-size:10.5px;font-weight:800;letter-spacing:.1em;color:var(--p2-mut)}
.af-partop em{font-style:normal;font-size:10.5px;font-weight:800;color:var(--p2-roxo);background:var(--p2-roxo-soft);border-radius:999px;padding:2px 8px;white-space:nowrap}
.af-parinfo>b{font-size:16px;font-weight:800;letter-spacing:-.015em}
.af-parinfo>span:last-child{font-size:13px;color:var(--p2-tx3);line-height:1.45}
.af-paradd{flex:none;padding:9px 13px;border-radius:11px;background:var(--p2-roxo);color:#fff;font-size:13px;font-weight:800;white-space:nowrap}

/* a bandeja "Sua aula" */
.af-bandeja{position:sticky;bottom:16px;z-index:5;display:flex;align-items:center;gap:16px;background:var(--p2-panel);border:1px solid var(--p2-line);border-radius:20px;padding:10px 10px 10px 22px;box-shadow:0 16px 36px rgba(30,24,60,.1);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.af-bandeja>b{font-size:15px;font-weight:800;white-space:nowrap}
.af-bandejachips{flex:1;min-width:0;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.af-bandejamais{font-size:14px;font-weight:800;color:var(--p2-dim)}
.af-bandejachip{display:flex;align-items:center;gap:8px;padding:8px 10px 8px 14px;border-radius:999px;background:var(--p2-roxo-soft);color:var(--p2-roxo-ink);font-size:14px;font-weight:800}
.af-p2 .af-bandejachip button{font-size:15px;line-height:1;color:var(--p2-roxo-x);padding:0 2px}
.af-bandejadica{font-size:14px;color:var(--p2-fnt)}
.af-p2 .af-montar{padding:13px 22px;border-radius:14px;background:var(--p2-cta);color:#fff;box-shadow:0 10px 22px rgba(240,112,126,.3);font-size:15px;font-weight:800;white-space:nowrap}
.af-p2 .af-montar:hover:not(:disabled){filter:brightness(1.04)}
.af-p2 .af-montar:disabled{background:var(--p2-track);color:var(--p2-off);box-shadow:none}

@media(max-width:900px){
  .af-p2corpo{grid-template-columns:minmax(0,1fr)}
  .af-cats{flex-direction:row;flex-wrap:wrap}
  .af-sug .af-pares{margin:0 14px 14px}
}
@media(max-width:640px){
  .af-p2{padding-top:24px}
  .af-p2tit h1{font-size:30px}
  .af-linhas,.af-paresgrid{grid-template-columns:minmax(0,1fr)}
  .af-p2lista{padding:16px}
  .af-p2 .af-sugrow{grid-template-columns:28px minmax(0,1fr) 30px;gap:12px;padding:16px}
  .af-sugrank{font-size:24px}
  .af-sugconta{grid-column:2;grid-row:2;padding-top:0}
  .af-sugbox{grid-column:3;grid-row:1}
  .af-bandeja{flex-wrap:wrap;padding:10px 10px 10px 16px}
  .af-p2 .af-montar{flex:1;text-align:center}
}

/* Passo 1 — "ClipClass Passo 1 Caminhos" do Claude Design, tela 3a. Usa os tokens --p2-* do passo 2. */
.af-p1{--p1-ia-line:#f6c3c8;--p1-ia-ink:#c2414f;--p1-ia-shadow:0 20px 40px rgba(240,112,126,.12);--p1-escuro:#24222e;--p1-escuro-hover:#3a3846;--p1-ou:#f4f3f9;
  max-width:1168px;padding-top:44px}
:root[data-theme=dark] .af-p1{--p1-ia-line:rgba(240,112,126,.45);--p1-ia-ink:#ff8f99;--p1-ia-shadow:none;--p1-escuro:#f3f2f8;--p1-escuro-hover:#ffffff;--p1-ou:var(--bg)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .af-p1{--p1-ia-line:rgba(240,112,126,.45);--p1-ia-ink:#ff8f99;--p1-ia-shadow:none;--p1-escuro:#f3f2f8;--p1-escuro-hover:#ffffff;--p1-ou:var(--bg)}}
.af-p1head{display:flex;flex-direction:column;gap:8px}
.af-p1head span{font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--p2-mut)}
.af-p1head h1{margin:0;font-size:44px;font-weight:800;letter-spacing:-.045em;line-height:1.05}
.af-p1head em{font-style:normal;color:var(--p2-roxo)}

/* a faixa do clipe */
.af-p1faixa{background:var(--p2-panel);border:1px solid var(--p2-line);border-radius:20px;padding:14px;display:flex;gap:20px;align-items:center}
.af-p1thumb{position:relative;width:240px;flex:none;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:linear-gradient(160deg,#2c3048,#12131b) center/cover}
.af-p1range{position:absolute;top:8px;left:8px;font-family:var(--mono);font-size:11px;color:#fff;background:rgba(0,0,0,.55);border-radius:6px;padding:3px 7px}
.af-p1leg{position:absolute;left:8px;right:8px;bottom:10px;display:flex;justify-content:center}
.af-p1leg span{background:rgba(0,0,0,.8);color:#fff;font-size:12px;font-weight:800;padding:4px 9px;border-radius:5px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.af-p1info{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.af-p1tit{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.af-p1tit b{font-size:20px;font-weight:800;letter-spacing:-.025em}
.af-p1tit span{font-size:14px;color:var(--p2-mut)}
.af-p1falas{display:flex;gap:6px;flex-wrap:wrap;min-width:0}
.af-p1falas>span{font-size:13px;font-weight:600;background:var(--p2-field);border-radius:9px;padding:7px 10px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.af-p1falas code{font-size:11px;color:var(--p2-mut);background:none;padding:0;margin-right:8px}
.af-p1falas small{font-size:13px;color:var(--p2-mut);padding:7px 4px}
.af-p2 .af-p1troca{align-self:flex-start;font-size:14px;font-weight:700;color:var(--p2-roxo);padding:0}
.af-p2 .af-p1troca:hover{text-decoration:underline}
.af-p1nivel{display:flex;flex-direction:column;gap:8px;padding-right:8px}
.af-p1nivel>span{font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--p2-mut)}
.af-p1nivel>div{display:flex;gap:3px;padding:4px;border-radius:14px;background:var(--p2-track)}
.af-p2 .af-p1nivel button{padding:8px 14px;border-radius:10px;font-family:var(--mono);font-size:13px;font-weight:700;color:var(--p2-mut)}
.af-p2 .af-p1nivel button[aria-checked=true]{background:var(--p2-panel);color:var(--p2-ink);box-shadow:0 2px 6px rgba(30,24,60,.12)}
:root[data-theme=dark] .af-p2 .af-p1nivel button[aria-checked=true]{background:var(--fill-hover)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .af-p2 .af-p1nivel button[aria-checked=true]{background:var(--fill-hover)}}
.af-p1trechos{background:var(--p2-panel);border:1px solid var(--p2-line);border-radius:20px;padding:14px}

/* as duas portas */
.af-portas{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.af-porta{background:var(--p2-panel);border:2px solid var(--p2-line);border-radius:22px;padding:26px;display:flex;flex-direction:column;gap:18px}
.af-porta.ia{border-color:var(--p1-ia-line);box-shadow:var(--p1-ia-shadow)}
.af-portatit{display:flex;flex-direction:column;gap:6px}
.af-portatit strong{font-size:40px;font-weight:800;letter-spacing:-.04em;line-height:1.05;color:var(--p2-roxo)}
.af-porta.ia .af-portatit strong{color:var(--p1-ia-ink)}
.af-portatit b{font-size:22px;font-weight:800;letter-spacing:-.025em}
.af-portatit span{font-size:15px;color:var(--p2-tx3);line-height:1.5;text-wrap:pretty}
.af-portaia{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:12px;border-radius:16px;background:var(--p2-field)}
.af-portaia>small{grid-column:1/-1;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--p2-fnt)}
.af-portaia>div{background:var(--p2-panel);border:1px solid var(--p2-row-line);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:6px;min-width:0}
.af-portaia code{font-size:10px;color:var(--p2-roxo);background:var(--p2-roxo-soft);border-radius:5px;padding:2px 6px;align-self:flex-start}
.af-portaia b{font-size:13px;font-weight:800;line-height:1.25}
.af-portaia span{font-size:11px;font-weight:700;color:var(--p2-roxo);line-height:1.3}
.af-porta.off .af-portaia{opacity:.5}
.af-porta textarea{width:100%;box-sizing:border-box;margin:0;min-height:0;border:1px solid var(--p2-btn-line);background:var(--p2-panel);border-radius:12px;padding:11px 13px;font-size:14px;line-height:1.5;color:var(--p2-tx2);resize:vertical;box-shadow:none}
.af-porta textarea::placeholder{color:var(--p2-off)}
.af-portalista{padding:14px;border-radius:16px;background:var(--p2-field);display:flex;flex-direction:column;gap:10px}
.af-portalista>div{display:flex;flex-direction:column;gap:6px}
.af-portalista small{font-size:10.5px;font-weight:800;letter-spacing:.1em;color:var(--p2-fnt)}
.af-portalista>div>div{display:flex;flex-wrap:wrap;gap:5px}
.af-p2 .af-portalista button{font-size:12px;font-weight:600;color:var(--p2-tx2);background:var(--p2-panel);border:1px solid var(--p2-btn-line);border-radius:999px;padding:5px 10px;white-space:nowrap}
.af-p2 .af-portalista button:hover{border-color:var(--p2-roxo);color:var(--p2-roxo)}
.af-portapes{margin-top:auto;display:flex;flex-direction:column;align-items:stretch;gap:8px}
.af-p2 .af-portacta{text-align:center;padding:16px;border-radius:14px;background:var(--p2-cta);color:#fff;font-size:16px;font-weight:800;box-shadow:0 12px 26px rgba(240,112,126,.3)}
.af-p2 .af-portacta:hover:not(:disabled){filter:brightness(1.04)}
.af-p2 .af-portacta:disabled{background:var(--p2-track);color:var(--p2-off);box-shadow:none;cursor:not-allowed}
.af-p2 .af-portacta.escuro{background:var(--p1-escuro);color:var(--p2-panel);box-shadow:none}
:root[data-theme=dark] .af-p2 .af-portacta.escuro{color:#1c1c1e}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .af-p2 .af-portacta.escuro{color:#1c1c1e}}
.af-p2 .af-portacta.escuro:hover{background:var(--p1-escuro-hover);filter:none}
.af-p2 .af-portaver{align-self:center;font-size:13px;font-weight:700;color:var(--p2-mut);padding:2px 6px}
.af-p2 .af-portaver:hover{color:var(--p2-ink)}
.af-ou{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:var(--p1-ou);border:1px solid var(--p2-btn-line);display:grid;place-items:center;font-size:14px;font-weight:800;color:var(--p2-mut)}

@media(max-width:900px){
  .af-p1faixa{flex-wrap:wrap}
  .af-p1thumb{width:min(100%,240px)}
  .af-portas{grid-template-columns:minmax(0,1fr)}
  .af-ou{position:static;transform:none;justify-self:center;margin:-12px 0;order:1}
  .af-porta.lista{order:2}
}
@media(max-width:640px){
  .af-p1{padding-top:24px}
  .af-p1head h1{font-size:32px}
  .af-portatit strong{font-size:32px}
  .af-portaia{grid-template-columns:minmax(0,1fr)}
  .af-porta{padding:20px}
}

/* Aula do Lesson Flow (public/lf-slides.js): a fala marcada em cada parada e a lista de slides para marcar,
   no passo 3 do fluxo da IA e no editor de lição. */
.af-lffala{display:block;margin-top:3px;font-style:normal;font-size:12.5px;line-height:1.35;color:var(--muted);white-space:normal}
.af-lffala b{color:var(--ink,inherit);background:color-mix(in srgb,#6f5bd6 16%,transparent);border-radius:4px;padding:0 2px}
.af-row.lf .af-rowmain{align-items:flex-start}
.lfs-lista{display:flex;flex-direction:column;gap:2px;margin:4px 0 8px 34px}
.lfs-row{display:flex;align-items:center;gap:6px;border-radius:10px;padding:2px 4px}
.lfs-row.sel{background:var(--blue-soft)}
.lfs-row.fora .lfs-nome{opacity:.55}
.lfs-check{display:grid;place-items:center;width:26px;height:26px;flex:none;cursor:pointer}
.lfs-check input{margin:0;width:15px;height:15px;accent-color:#6f5bd6;cursor:pointer}
.lfs-nome{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px;padding:5px 6px;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;border-radius:8px}
.lfs-nome small{flex:none;width:72px;font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.lfs-nome span{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lfs-nome em{margin-left:auto;font-style:normal;font-size:11px;color:var(--muted)}
.lfs-tema{display:inline-flex;gap:6px;margin-left:auto}
.lfs-origem{margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}
.lfs-origem b{color:inherit}
.lfs-titulo{margin:6px 0 4px;font-size:20px;line-height:1.25}
.lfs-cab{margin-top:14px}
/* As falas do episódio na última parada do tópico (lf-slides.js, episodioHTML): tirar, devolver, reordenar e ver. */
.ep-lista{display:flex;flex-direction:column;gap:2px;margin:4px 0 8px}
.ep-row{display:flex;align-items:center;gap:6px;border-radius:10px;padding:2px 4px}
.ep-row.sel{background:var(--blue-soft)}
.ep-row.fora .ep-fala{opacity:.5}
.ep-fala{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding:6px;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;border-radius:8px}
.ep-fala small{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.ep-fala span{font-size:13.5px;line-height:1.4}
.ep-fala b{background:color-mix(in srgb,#f5c267 45%,transparent);border-radius:4px;padding:0 2px}
.ep-ordem{display:flex;gap:2px;flex:none}
.ep-ordem button{width:28px;height:28px;border:1px solid var(--line,#0002);border-radius:8px;background:none;color:inherit;cursor:pointer;font:inherit}
.ep-ordem button:disabled{opacity:.3;cursor:default}
/* passo 3 da aula cinema — "Overview Aula IA" do Claude Design: as etapas numa barra, os itens da etapa à esquerda
   e a prévia fixa à direita. O roxo é o da aula cinema (--afc). */
.af{--afc:#6f5bd6;--afc-ink:#5b46c9;--afc-soft:rgba(111,91,214,.13);--afc-feita:rgba(111,91,214,.42)}
:root[data-theme=dark] .af{--afc-ink:#bca6ff;--afc-soft:rgba(165,139,255,.16)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .af{--afc-ink:#bca6ff;--afc-soft:rgba(165,139,255,.16)}}
.afc-etapas{display:flex;flex-direction:row;flex-wrap:nowrap;gap:6px;overflow-x:auto;padding-bottom:2px}
.afc-etapa{min-width:84px;display:flex;flex-direction:column;align-items:stretch;gap:7px;padding:0;background:transparent;text-align:left;color:var(--ink)}
.afc-etapa>i{display:block;height:6px;border-radius:3px;background:var(--fill-hover)}
.afc-etapa.feita>i{background:var(--afc-feita)}
.afc-etapa.on>i{background:var(--afc)}
.afc-etapa>span{display:flex;align-items:baseline;gap:7px;min-width:0}
.afc-etapa code{font-size:11px;font-weight:700;color:var(--faint)}
.afc-etapa b{font-size:13px;font-weight:700;line-height:1.2;color:var(--ink2);text-wrap:balance}
.afc-etapa small{font-size:11px;line-height:1.3;color:var(--muted)}
.afc-etapa.on code{color:var(--afc-ink)}
.afc-etapa.on b{color:var(--ink);font-weight:800}
.afc-etapa.fora b,.afc-etapa.fora small{color:var(--faint)}
.afc-etapa.fora>i{background:transparent;border:1px dashed var(--line-strong);height:4px}
.afc-etapa:hover:not(.on) b{color:var(--ink)}
.af-aula.afc{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:22px;align-items:start}
.afc-lista{display:flex;flex-direction:column;gap:14px;min-width:0}
.afc-cab{display:flex;flex-direction:column;gap:4px}
.afc-cab .af-label{font-family:var(--mono);color:var(--afc-ink)}
.afc-cab h2{margin:0;font-size:22px;font-weight:800;letter-spacing:-.03em}
.afc-cab p{margin:0;font-size:13px;line-height:1.5;color:var(--muted);text-wrap:pretty}
.afc-itens{display:flex;flex-direction:column;gap:6px}
.afc-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid var(--glass-line);background:var(--glass-soft)}
.afc-item.on{background:var(--afc-soft);border-color:color-mix(in srgb,var(--afc) 45%,transparent)}
.afc-item.fora .afc-main{opacity:.5}
.afc-check{display:grid;place-items:center;width:20px;height:20px;flex:none;cursor:pointer}
.afc-check input{margin:0;width:16px;height:16px;accent-color:var(--afc);cursor:pointer}
.afc-check.vazio{cursor:default}
.afc-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;padding:0;background:transparent;text-align:left;color:var(--ink)}
.afc-main b{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.afc-main b b{color:var(--afc-ink);font-weight:800}
.afc-main small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.afc-tag{flex:none;font:700 9px var(--mono);letter-spacing:.1em;padding:4px 7px;border-radius:6px;color:var(--muted);background:var(--fill)}
.afc-tag.cena{color:var(--red-ink);background:var(--red-soft)}
.afc-tag.ep{color:var(--blue-deep);background:var(--blue-soft)}
.afc-tag.ia{color:var(--afc-ink);background:var(--afc-soft)}
.afc-ordem{display:flex;flex-direction:column;flex:none}
.afc-ordem button{width:22px;height:16px;border-radius:5px;font-size:11px;line-height:1;color:var(--muted);background:transparent}
.afc-ordem button:hover:not(:disabled){background:var(--fill-hover);color:var(--ink)}
.afc-ordem button:disabled{opacity:.3}
.afc-nota{margin:0 0 4px;font-size:12px;line-height:1.45;color:var(--muted)}
.afc-nav{display:flex;justify-content:space-between;gap:10px}
.afc-nav button{padding:6px 0;background:transparent;font-size:13px;font-weight:600;color:var(--muted)}
.afc-nav button.next{font-weight:700;color:var(--afc-ink)}
.afc-nav button:hover{color:var(--ink)}
.afc .af-sel{top:74px}
.afc .af-selhead .lfs-tema{margin-left:0}
.af-previa iframe.cinema{width:100%;height:100%;transform:none;pointer-events:auto;background:#000}
.afc-fora{position:absolute;inset:0;display:grid;place-items:center;padding:0 12%;text-align:center;background:#0b0a10;color:#a39db3;font-size:14px;font-weight:600;line-height:1.5}
.afc-fora[hidden]{display:none}
.afc-sel{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.afc-seltxt{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 220px}
.afc-seltxt b{font-size:16px;font-weight:800;letter-spacing:-.02em}
.afc-seltxt small{font-size:12px;color:var(--muted)}
.afc-selbtns{display:flex;gap:8px}
@media(max-width:900px){.af-aula.afc{grid-template-columns:1fr}.afc .af-sel{position:static}}
.afc-falas{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:12px;background:var(--fill-soft)}
.afc-falas p{margin:0 0 2px;font-size:12px;line-height:1.45;color:var(--muted)}
.afc-falacena{display:flex;gap:9px;align-items:baseline;font-size:13px;font-weight:600;line-height:1.4;color:var(--ink2)}
.afc-falacena code{font-size:10px;color:var(--muted);flex:none}
.afc-falacena b{color:var(--afc-ink);font-weight:800}
.afc-sub{display:block;margin-top:8px}
.afc-mais{display:flex;flex-direction:column;gap:8px;margin-top:6px;padding:12px 14px;border-radius:12px;border:1px dashed var(--line-strong)}
.afc-mais p{margin:0;font-size:12px;line-height:1.45;color:var(--muted)}
.afc-maisbtns{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.afc-maisbtns small{width:100%;font-size:11px;font-weight:700;color:var(--muted)}
.afc-maisbtns .af-grey{padding:7px 11px;font-size:12px}