/* ==========================================================================
   DeuOdds — site publico
   --------------------------------------------------------------------------
   Mesmos tokens do painel, estetica propria. Escuro por padrao: e o que o
   publico de poker espera, e faz a capa dos cursos saltar.
   ========================================================================== */

@layer reset, tokens, base, components;

@layer tokens {
  :root {
    --st-bg:        #0b0f14;
    --st-surface:   #141a22;
    --st-surface-2: #1b232d;
    --st-border:    #26303c;

    --st-fg:        #e8eef5;
    --st-fg-muted:  #9aabbd;
    --st-fg-subtle: #6b7d90;

    --st-accent:      #16a34a;
    --st-accent-soft: #0f2a1c;
    --st-gold:        #d4a72c;

    --st-radius: 12px;
    --st-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    --st-1: 4px; --st-2: 8px;  --st-3: 12px; --st-4: 16px;
    --st-5: 24px; --st-6: 32px; --st-7: 48px; --st-8: 72px;
  }
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }

  body {
    font-family: var(--st-font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--st-fg);
    background: var(--st-bg);
    -webkit-font-smoothing: antialiased;
  }

  /* Rolagem suave nas ancoras internas, exceto para quem pediu menos
     movimento no sistema. */
  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }

  a { color: inherit; text-decoration: none; }
  img { display: block; max-width: 100%; }
  h1, h2, h3 { line-height: 1.2; font-weight: 650; letter-spacing: -.02em; }
  button { font: inherit; cursor: pointer; }
}

@layer base {
  .st-container { width: min(1180px, 100% - 2 * var(--st-5)); margin-inline: auto; }

  /* ------------------------------------------------------------- cabecalho */
  .st-header {
    position: sticky; top: 0; z-index: 20;
    background: color-mix(in srgb, var(--st-bg) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--st-border);
  }
  .st-header__inner { display: flex; align-items: center; gap: var(--st-6); height: 64px; }

  .st-brand { display: flex; align-items: center; gap: var(--st-2); font-weight: 700; }
  .st-brand__mark {
    display: grid; place-items: center;
    width: 30px; height: 30px;
    border-radius: 8px;
    background: var(--st-accent); color: #fff;
    font-size: 15px;
  }

  .st-nav { display: flex; gap: var(--st-5); font-size: 15px; color: var(--st-fg-muted); }
  .st-nav a:hover { color: var(--st-fg); }
  .st-header__end { margin-left: auto; }

  /* ------------------------------------------------------------------ hero */
  .st-hero { padding: var(--st-8) 0 var(--st-6); }
  .st-hero h1 { font-size: clamp(28px, 4vw, 40px); }
  .st-hero p { margin-top: var(--st-3); color: var(--st-fg-muted); max-width: 60ch; }

  /* --------------------------------------------------------------- layout */
  .st-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--st-6);
    padding-bottom: var(--st-8);
  }

  .st-footer {
    padding: var(--st-6) 0;
    border-top: 1px solid var(--st-border);
    color: var(--st-fg-subtle);
    font-size: 14px;
  }
}

@layer components {
  .st-btn {
    display: inline-flex; align-items: center; justify-content: center;
    height: 42px; padding-inline: var(--st-5);
    border: 1px solid var(--st-border);
    border-radius: 10px;
    background: var(--st-surface);
    color: var(--st-fg);
    font-size: 15px; font-weight: 550;
    transition: background .15s, border-color .15s, transform .06s;
  }
  .st-btn:hover { background: var(--st-surface-2); }
  .st-btn:active { transform: translateY(1px); }
  .st-btn--small { height: 34px; padding-inline: var(--st-4); font-size: 14px; }
  .st-btn--ghost { background: transparent; }
  .st-btn--block { width: 100%; }
  .st-btn--primary {
    background: var(--st-accent);
    border-color: var(--st-accent);
    color: #fff;
  }
  .st-btn--primary:hover { filter: brightness(1.1); background: var(--st-accent); }
  .st-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

  /* ------------------------------------------------------------- filtros */
  .st-search { display: flex; gap: var(--st-2); margin-bottom: var(--st-5); }
  .st-search input {
    flex: 1; min-width: 0; height: 34px;
    padding: 0 var(--st-3);
    border: 1px solid var(--st-border);
    border-radius: 8px;
    background: var(--st-surface);
    color: var(--st-fg);
  }
  .st-search input:focus { outline: none; border-color: var(--st-accent); }

  .st-filters__title {
    margin-bottom: var(--st-2);
    font-size: 12px; font-weight: 650;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--st-fg-subtle);
  }
  .st-filters__link {
    display: block;
    padding: 6px var(--st-3);
    border-radius: 8px;
    color: var(--st-fg-muted);
    font-size: 14.5px;
  }
  .st-filters__link:hover { background: var(--st-surface); color: var(--st-fg); }
  .st-filters__link.is-active { background: var(--st-accent-soft); color: var(--st-accent); font-weight: 600; }

  /* ---------------------------------------------------------------- home */

  .st-home-hero { padding: var(--st-8) 0 var(--st-7); }
  .st-home-hero__inner {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: var(--st-7);
    align-items: center;
  }
  .st-home-hero h1 {
    font-size: clamp(32px, 4.2vw, 52px);
    margin: var(--st-3) 0 var(--st-4);
    text-wrap: balance;
  }
  .st-home-hero__lead { font-size: 18px; color: var(--st-fg-muted); max-width: 52ch; }
  .st-home-hero__actions { display: flex; gap: var(--st-3); margin-top: var(--st-6); flex-wrap: wrap; }
  .st-home-hero__aside { display: grid; gap: var(--st-3); }

  /* O painel do heroi mostra o produto — uma aula tocando —, e nao um
     enfeite. Sem imagem ainda: gradiente com o naipe da marca. */
  .st-home-hero__card {
    position: relative;
    aspect-ratio: 16 / 10;
    display: grid; place-items: center;
    border: 1px solid var(--st-border);
    border-radius: 16px;
    overflow: hidden;
    background:
      radial-gradient(120% 90% at 20% 0%, var(--st-accent-soft) 0%, transparent 60%),
      linear-gradient(160deg, #0f1620, var(--st-bg));
  }
  .st-home-hero__suit {
    position: absolute; right: -20px; bottom: -44px;
    font-size: 180px; line-height: 1; color: #fff; opacity: .04;
  }
  .st-home-hero__play {
    display: grid; place-items: center;
    width: 60px; height: 60px; border-radius: 50%;
    padding-left: 4px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.22);
    color: #fff;
  }

  /* ----------------------------------------------------------- prova social */

  .st-proof { padding-block: var(--st-5); border-block: 1px solid var(--st-border); }

  /* De dois a quatro numeros, conforme o que passou do piso — dai o auto-fit
     em vez de quatro colunas fixas. */
  .st-proof__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--st-4);
    text-align: center;
  }
  .st-proof__item { display: grid; gap: 2px; }
  .st-proof__value { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
  .st-proof__label { font-size: 13.5px; color: var(--st-fg-subtle); }

  /* --------------------------------------------------------------- trilha */

  .st-rail { padding-block: var(--st-6); }
  .st-rail__head { display: flex; align-items: baseline; gap: var(--st-3); margin-bottom: var(--st-4); }
  .st-rail__head h2 { font-size: 19px; }
  .st-rail__why { font-size: 13.5px; color: var(--st-fg-subtle); }
  .st-rail__more { margin-left: auto; font-size: 13.5px; color: var(--st-accent); font-weight: 550; }

  /* Rolagem nativa com encaixe: funciona no toque, no teclado e sem script.
     A trilha sangra ate a borda — card cortado na margem e o que avisa que
     ha mais coisa para o lado. */
  .st-rail__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 272px;
    gap: var(--st-4);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding: 4px max(var(--st-5), calc((100vw - 1180px) / 2)) var(--st-4);
    scrollbar-width: thin;
    scrollbar-color: var(--st-border) transparent;
  }
  .st-rail__track > * { scroll-snap-align: start; }
  .st-rail__track::-webkit-scrollbar { height: 8px; }
  .st-rail__track::-webkit-scrollbar-thumb { background: var(--st-border); border-radius: 4px; }

  /* ------------------------------------------------------------- vitrine */
  .st-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--st-5);
  }

  .st-card {
    display: flex; flex-direction: column;
    background: var(--st-surface);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    overflow: hidden;
    transition: transform .16s, border-color .16s;
  }
  .st-card:hover { transform: translateY(-3px); border-color: var(--st-accent); }

  .st-card__media { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--st-surface-2); }
  .st-card__media img { width: 100%; height: 100%; object-fit: cover; }
  .st-card__placeholder {
    display: grid; place-items: center; height: 100%;
    font-size: 40px; font-weight: 700; color: var(--st-fg-subtle);
  }

  .st-tag {
    position: absolute; top: var(--st-3); left: var(--st-3);
    padding: 3px var(--st-2);
    border-radius: 999px;
    background: rgba(0,0,0,.65);
    font-size: 11.5px; font-weight: 600; text-transform: capitalize;
  }

  /* Cadeado e trailer: os dois selos que dizem, antes de qualquer texto, se
     da para assistir agora. */
  .st-card__lock {
    position: absolute; top: var(--st-3); right: var(--st-3);
    display: grid; place-items: center;
    width: 26px; height: 26px; border-radius: 8px;
    background: rgba(0,0,0,.6); color: #cfd8e2;
  }
  .st-card__trailer {
    position: absolute; left: var(--st-3); bottom: var(--st-3);
    padding: 2px 8px; border-radius: 6px;
    background: rgba(0,0,0,.65);
    font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  }

  /* Etiqueta de estado. A cor diferencia, mas o texto e que informa — quem
     nao distingue as cores le a mesma coisa. */
  .st-state {
    align-self: flex-start;
    padding: 3px 9px; border-radius: 999px;
    border: 1px solid transparent;
    font-size: 11.5px; font-weight: 600;
  }
  .st-state--mine    { background: var(--st-accent-soft); color: #6ee7a0; border-color: #1d4a30; }
  .st-state--plan    { background: #12222e; color: #7cc4e8; border-color: #1e3b4d; }
  .st-state--upgrade { background: #2a2313; color: var(--st-gold); border-color: #4a3d17; }
  .st-state--preview { background: var(--st-surface-2); color: var(--st-fg-muted); border-color: var(--st-border); }

  .st-card__foot { margin-top: auto; padding-top: var(--st-3); display: grid; gap: var(--st-2); }
  .st-card__foot-row { display: flex; align-items: center; gap: var(--st-3); }
  .st-card__foot-row .st-btn { margin-left: auto; }
  .st-price { font-size: 15px; font-weight: 650; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }

  /* Trocar de plano nao e a mesma acao que comprar: a cor separa o caminho
     de upgrade do fluxo normal de compra. */
  .st-btn--gold { background: var(--st-gold); border-color: var(--st-gold); color: #1a1406; font-weight: 600; }
  .st-btn--gold:hover { background: #e0b53c; border-color: #e0b53c; }

  .st-card__body { padding: var(--st-4); display: flex; flex-direction: column; gap: var(--st-2); }
  .st-card__eyebrow { font-size: 12px; color: var(--st-accent); font-weight: 600; }
  .st-card__title { font-size: 17px; }
  .st-card__title a:hover { color: var(--st-accent); }
  .st-card__text { font-size: 14px; color: var(--st-fg-muted); }
  .st-card__meta {
    display: flex; flex-wrap: wrap; gap: var(--st-3);
    margin-top: auto; padding-top: var(--st-2);
    font-size: 13px; color: var(--st-fg-subtle);
  }

  .st-empty { padding: var(--st-8) var(--st-5); text-align: center; }
  .st-empty h2 { font-size: 20px; }
  .st-empty p { margin: var(--st-3) auto var(--st-5); color: var(--st-fg-muted); max-width: 46ch; }

  /* ---------------------------------------------------------------- planos */

  /* Fundo proprio para separar a assinatura das trilhas: e outra decisao,
     e a mudanca de superficie avisa isso antes de qualquer texto. */
  .st-plans {
    margin-top: var(--st-7);
    padding-block: var(--st-8);
    /* O cabecalho e fixo: sem isto a ancora para o titulo debaixo dele. */
    scroll-margin-top: 64px;
    border-top: 1px solid var(--st-border);
    background:
      radial-gradient(80% 60% at 50% 0%, var(--st-accent-soft) 0%, transparent 70%),
      var(--st-bg);
  }
  .st-plans__head { text-align: center; margin-bottom: var(--st-7); }
  .st-plans__head h2 { font-size: clamp(24px, 3vw, 34px); margin-top: var(--st-2); text-wrap: balance; }
  .st-plans__lead {
    margin: var(--st-3) auto 0;
    max-width: 52ch;
    color: var(--st-fg-muted);
  }

  /* Teto de largura por cartao, e nao fracao do container: com um plano so
     cadastrado, "1fr" esticaria o cartao pela tela inteira. */
  .st-plans__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 340px));
    justify-content: center;
    gap: var(--st-4);
    align-items: start;
  }

  .st-plan {
    position: relative;
    display: flex; flex-direction: column; gap: var(--st-3);
    padding: var(--st-5);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    background: var(--st-surface);
  }

  /* O destaque sobe o cartao um degrau em vez de mudar de cor: a diferenca
     fica visivel sem transformar a comparacao em semaforo. */
  .st-plan--highlight {
    border-color: var(--st-gold);
    background: var(--st-surface-2);
    box-shadow: 0 12px 40px -18px rgba(212, 167, 44, .45);
  }
  .st-plan__flag {
    position: absolute; top: -11px; left: var(--st-5);
    padding: 2px var(--st-3);
    border-radius: 999px;
    background: var(--st-gold); color: #1a1406;
    font-size: 11.5px; font-weight: 650;
    letter-spacing: .02em;
  }

  .st-plan__title { font-size: 17px; }
  .st-plan__price { display: flex; align-items: baseline; gap: var(--st-2); }
  .st-plan__price strong { font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
  .st-plan__price span { font-size: 14px; }
  .st-plan__monthly { margin-top: calc(-1 * var(--st-2)); font-size: 13px; color: var(--st-fg-subtle); }

  .st-plan__features { display: grid; gap: var(--st-2); list-style: none; padding: 0; font-size: 14.5px; }
  .st-plan__features li {
    display: grid; grid-template-columns: 15px 1fr; gap: var(--st-2);
    align-items: start;
    color: var(--st-fg-muted);
  }
  .st-plan__features svg { margin-top: 4px; color: var(--st-accent); }

  .st-plan__current {
    display: block;
    font-size: 13.5px; font-weight: 600;
    color: var(--st-accent);
  }

  /* O botao do heroi diz o preco; o "/mes" e sufixo, e nao parte do numero. */
  .st-btn__aside { margin-left: 2px; font-weight: 450; opacity: .75; }

  @media (max-width: 640px) {
    .st-plans { padding-block: var(--st-7); }
    .st-plans__grid { grid-template-columns: 1fr; }
  }

  /* -------------------------------------------------------- pagina do curso */
  .st-course-hero { padding: var(--st-7) 0; border-bottom: 1px solid var(--st-border); }
  .st-course-hero__inner {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--st-7);
    align-items: start;
  }
  .st-course-hero h1 { font-size: clamp(26px, 3.4vw, 38px); margin-top: var(--st-2); }
  .st-course-hero__sub { margin-top: var(--st-3); color: var(--st-fg-muted); font-size: 17px; }
  .st-course-hero__meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--st-4);
    margin-top: var(--st-5);
    font-size: 14px; color: var(--st-fg-subtle);
  }
  .st-course-hero__meta .st-tag { position: static; background: var(--st-surface-2); }

  .st-eyebrow { font-size: 13px; font-weight: 650; color: var(--st-accent); }

  .st-course-hero__card {
    background: var(--st-surface);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    overflow: hidden;
    position: sticky; top: 88px;
  }
  .st-course-hero__card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
  .st-course-hero__placeholder {
    display: grid; place-items: center;
    aspect-ratio: 16/9; background: var(--st-surface-2);
    font-size: 48px; font-weight: 700; color: var(--st-fg-subtle);
  }

  .st-buybox { padding: var(--st-5); display: grid; gap: var(--st-3); }
  .st-buybox__price { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
  .st-buybox__note { font-size: 13px; color: var(--st-fg-subtle); text-align: center; }

  /* Soma dos precos avulsos, acima do preco do combo. Discreta de proposito:
     o numero que vende e a economia, nao o valor riscado. */
  .st-buybox__was { margin-bottom: calc(-1 * var(--st-2)); font-size: 13.5px; color: var(--st-fg-subtle); }
  .st-buybox__was s { color: var(--st-fg-muted); }
  .st-buybox .st-badge--free { justify-self: start; }

  /* "Leve junto": o combo que contem o curso desta pagina. */
  .st-upsell { display: grid; gap: var(--st-2); }
  .st-upsell__item {
    display: flex; align-items: center; justify-content: space-between; gap: var(--st-4);
    padding: var(--st-3) var(--st-4);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    background: var(--st-surface);
  }
  .st-upsell__item:hover { border-color: var(--st-accent); }
  .st-upsell__item span.st-muted { display: block; font-size: 13.5px; }

  .st-course-body {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--st-7);
    padding: var(--st-7) 0 var(--st-8);
  }
  .st-section + .st-section { margin-top: var(--st-6); }
  .st-section h2 { font-size: 20px; margin-bottom: var(--st-4); }
  .st-prose { color: var(--st-fg-muted); }
  .st-muted { color: var(--st-fg-muted); font-size: 14.5px; }

  .st-lessons { list-style: none; padding: 0; border: 1px solid var(--st-border); border-radius: var(--st-radius); overflow: hidden; }
  .st-lessons__item {
    display: flex; align-items: center; gap: var(--st-3);
    padding: var(--st-3) var(--st-4);
    background: var(--st-surface);
    border-bottom: 1px solid var(--st-border);
    font-size: 15px;
  }
  .st-lessons__item:last-child { border-bottom: 0; }
  .st-lessons__index {
    flex-shrink: 0;
    width: 26px; height: 26px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--st-surface-2);
    font-size: 12px; color: var(--st-fg-subtle);
  }
  .st-lessons__title { flex: 1; min-width: 0; }
  .st-lessons__time { font-size: 13px; color: var(--st-fg-subtle); }
  .st-lessons__lock { font-size: 12px; color: var(--st-fg-subtle); }

  .st-badge {
    padding: 2px var(--st-2);
    border-radius: 999px;
    font-size: 11.5px; font-weight: 600;
  }
  .st-badge--free { background: var(--st-accent-soft); color: var(--st-accent); }

  .st-instructor { display: flex; gap: var(--st-3); }
  .st-instructor img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
  .st-instructor__name { font-weight: 600; margin-bottom: 2px; }

  /* -------------------------------------------------------------- checkout */
  .st-checkout { padding: var(--st-7) 0 var(--st-8); }
  .st-checkout h1 { font-size: 28px; margin-bottom: var(--st-6); }

  .st-checkout__grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--st-6);
    align-items: start;
  }

  .st-checkout__form,
  .st-summary {
    background: var(--st-surface);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    padding: var(--st-5);
  }
  .st-checkout__form h2,
  .st-summary h2 { font-size: 16px; margin-bottom: var(--st-4); }
  .st-checkout__note { margin-top: var(--st-3); font-size: 13px; color: var(--st-fg-subtle); text-align: center; }

  .st-methods { display: grid; gap: var(--st-2); margin-bottom: var(--st-5); }
  .st-method {
    display: flex; align-items: center; gap: var(--st-3);
    padding: var(--st-3) var(--st-4);
    border: 1px solid var(--st-border);
    border-radius: 10px;
    cursor: pointer;
  }
  .st-method:has(input:checked) { border-color: var(--st-accent); background: var(--st-accent-soft); }

  .st-summary__item,
  .st-summary__total {
    display: flex; justify-content: space-between; gap: var(--st-3);
    padding: var(--st-2) 0;
  }
  .st-summary__total {
    margin-top: var(--st-2);
    padding-top: var(--st-3);
    border-top: 1px solid var(--st-border);
    font-size: 18px;
  }

  .st-result { max-width: 560px; margin: 0 auto; text-align: center; }
  .st-result h1 { margin-bottom: var(--st-3); }
  .st-result p { color: var(--st-fg-muted); margin-bottom: var(--st-4); }
  .st-result--ok h1 { color: var(--st-accent); }

  .st-pix {
    margin: var(--st-5) 0;
    padding: var(--st-4);
    background: var(--st-surface);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
  }
  .st-pix__label { font-size: 13px; color: var(--st-fg-subtle); margin-bottom: var(--st-2); }
  .st-pix__code {
    display: block;
    padding: var(--st-3);
    background: var(--st-bg);
    border-radius: 8px;
    font-size: 12px;
    word-break: break-all;
    color: var(--st-fg-muted);
  }

  /* --------------------------------------------------------------- conta */

  /* Abas da conta: cursos, perfil, assinatura, seguranca. */
  .st-account-nav {
    display: flex; flex-wrap: wrap; gap: var(--st-4);
    margin: var(--st-5) 0 var(--st-6);
    border-bottom: 1px solid var(--st-border);
  }
  .st-account-nav__item {
    padding-bottom: var(--st-3);
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: var(--st-fg-muted);
    font-size: 15px; font-weight: 550;
  }
  .st-account-nav__item:hover { color: var(--st-fg); }
  .st-account-nav__item.is-active { color: var(--st-fg); border-bottom-color: var(--st-accent); }

  .st-account--narrow { max-width: 720px; }

  .st-panel {
    margin-bottom: var(--st-5);
    padding: var(--st-5);
    background: var(--st-surface);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
  }
  .st-panel h2 { font-size: 17px; margin-bottom: var(--st-4); }
  .st-panel > p { margin-bottom: var(--st-4); }
  .st-panel > form + form { margin-top: var(--st-4); }

  /* A borda vermelha e o unico aviso visual antes de uma acao sem volta. */
  .st-panel--danger { border-color: #7f1d1d; }
  .st-panel--danger h2 { color: #fca5a5; }

  .st-btn--danger { background: #b91c1c; border-color: #b91c1c; color: #fff; }
  .st-btn--danger:hover { background: #dc2626; border-color: #dc2626; }

  .st-account-form { display: grid; gap: var(--st-4); }
  .st-account-form__foot {
    display: flex; align-items: center; gap: var(--st-3); flex-wrap: wrap;
    margin-top: var(--st-2);
  }
  .st-field { display: grid; gap: var(--st-1); }
  .st-field label { font-size: 13.5px; font-weight: 550; }
  .st-field .dd-input {
    width: 100%; height: 42px;
    padding: 0 var(--st-3);
    border: 1px solid var(--st-border);
    border-radius: 10px;
    background: var(--st-bg);
    color: var(--st-fg);
    font-size: 15px;
  }
  .st-field .dd-input:focus { outline: none; border-color: var(--st-accent); }
  .st-field .dd-input.is-error { border-color: #dc2626; }
  .st-field input[type="file"] { height: auto; padding: var(--st-2) var(--st-3); }

  .st-avatar-field { display: flex; align-items: center; gap: var(--st-5); flex-wrap: wrap; }
  .st-avatar-field__actions { display: grid; gap: var(--st-2); flex: 1; min-width: 240px; }
  .st-avatar {
    display: grid; place-items: center;
    width: 84px; height: 84px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--st-surface-2);
    border: 1px solid var(--st-border);
    font-size: 30px; font-weight: 650; color: var(--st-fg-subtle);
    flex-shrink: 0;
  }
  .st-avatar img { width: 100%; height: 100%; object-fit: cover; }

  .st-connections, .st-sessions { display: grid; gap: var(--st-2); list-style: none; padding: 0; }
  .st-connections__item, .st-sessions__item {
    display: flex; align-items: center; justify-content: space-between; gap: var(--st-4);
    padding: var(--st-3) var(--st-4);
    border: 1px solid var(--st-border);
    border-radius: 10px;
  }
  .st-connections__item span, .st-sessions__item span.st-muted { display: block; font-size: 13.5px; }
  .st-sessions__item.is-current { border-color: var(--st-accent); }

  /* Lista do que se perde ao apagar a conta. */
  .st-impact { display: grid; gap: var(--st-3); list-style: none; padding: 0; }
  .st-impact__item {
    display: flex; align-items: center; justify-content: space-between; gap: var(--st-4);
    padding-left: var(--st-4);
    border-left: 3px solid var(--st-border);
  }
  .st-impact__item span { display: block; margin-top: 2px; font-size: 13.5px; }
  .st-impact__item.is-blocking { border-left-color: #b91c1c; }

  .st-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
  .st-table th, .st-table td { padding: var(--st-2) var(--st-3); text-align: left; }
  .st-table th { font-size: 12.5px; color: var(--st-fg-subtle); font-weight: 600; }
  .st-table tbody tr { border-top: 1px solid var(--st-border); }

  /* Fatos lado a lado: situacao, valor, proxima cobranca. */
  .st-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--st-4);
    margin-bottom: var(--st-5);
  }
  .st-facts dt { font-size: 12.5px; color: var(--st-fg-subtle); }
  .st-facts dd { font-size: 15px; font-weight: 550; margin: 0; }

  /* --------------------------------------------------------- login social */

  .st-social { display: grid; gap: var(--st-3); margin-top: var(--st-5); }
  .st-social__btn {
    display: flex; align-items: center; justify-content: center; gap: var(--st-3);
    height: 44px;
    border: 1px solid var(--st-border);
    border-radius: 10px;
    background: var(--st-surface);
    font-size: 15px; font-weight: 550;
  }
  .st-social__btn:hover { background: var(--st-surface-2); }

  /* Separador "ou" entre o social e o formulario. */
  .st-social__or {
    display: flex; align-items: center; gap: var(--st-3);
    color: var(--st-fg-subtle); font-size: 13px;
  }
  .st-social__or::before, .st-social__or::after {
    content: ""; flex: 1; height: 1px; background: var(--st-border);
  }

  /* --------------------------------------------------------- area do aluno */
  .st-account { padding: var(--st-7) 0 var(--st-8); }
  .st-account__head {
    display: flex; align-items: center; gap: var(--st-4); flex-wrap: wrap;
    margin-bottom: var(--st-6);
  }
  .st-account__head h1 { font-size: 28px; }

  .st-continue { margin-bottom: var(--st-7); }
  .st-continue__label {
    font-size: 12px; font-weight: 650; letter-spacing: .06em;
    text-transform: uppercase; color: var(--st-fg-subtle);
    margin-bottom: var(--st-3);
  }
  .st-continue__card {
    display: flex; gap: var(--st-4);
    background: var(--st-surface);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    overflow: hidden;
    transition: border-color .16s;
  }
  .st-continue__card:hover { border-color: var(--st-accent); }
  .st-continue__card img { width: 220px; aspect-ratio: 16/9; object-fit: cover; flex-shrink: 0; }
  .st-continue__body { padding: var(--st-4); display: flex; flex-direction: column; gap: var(--st-2); flex: 1; min-width: 0; }
  .st-continue__course { font-size: 13px; color: var(--st-accent); font-weight: 600; }
  .st-continue__lesson { font-size: 18px; font-weight: 600; }
  .st-continue__percent { font-size: 13px; color: var(--st-fg-subtle); }

  .st-progress {
    height: 6px;
    background: var(--st-surface-2);
    border-radius: 999px;
    overflow: hidden;
  }
  .st-progress--thin { height: 3px; margin-top: 4px; }
  .st-progress__bar { height: 100%; background: var(--st-accent); border-radius: 999px; }

  .st-orders { list-style: none; padding: 0; display: grid; gap: var(--st-2); }
  .st-orders li {
    display: flex; align-items: center; gap: var(--st-4); flex-wrap: wrap;
    padding: var(--st-3) var(--st-4);
    background: var(--st-surface);
    border: 1px solid var(--st-border);
    border-radius: 10px;
    font-size: 14px;
  }
  .st-mono { font-family: ui-monospace, monospace; font-size: 13px; }

  /* ---------------------------------------------------------------- player */

  /*
     A tela da aula.

     Duas colunas: o palco (video + abas) e o indice do curso. Recolher o
     indice redefine o grid em vez de esconder o aside — escondido, ele
     continuaria reservando a coluna e o video nao ganharia a largura.
  */
  .st-watch {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: var(--st-5);
    width: min(1560px, 100% - 2 * var(--st-4));
    margin: var(--st-4) auto var(--st-8);
    align-items: start;
  }
  .st-watch.is-collapsed { grid-template-columns: minmax(0, 1fr); }

  .st-watch__stage { min-width: 0; }

  .st-player {
    position: relative;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: var(--st-radius);
    overflow: hidden;
  }
  .st-player iframe,
  .st-player video { width: 100%; height: 100%; border: 0; display: block; }
  .st-player__placeholder {
    display: grid; place-items: center; align-content: center; gap: var(--st-2);
    height: 100%; text-align: center; color: var(--st-fg-muted);
  }
  /*
   | Espera sem fim conhecido: a criptografia leva o tempo que levar, e o
   | servidor de video nao informa percentual. Uma barra parada num numero
   | qualquer seria mentira; esta so diz "esta acontecendo".
   */
  .st-encoding { width: min(320px, 70%); }
  .st-encoding__bar {
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    overflow: hidden;
  }
  .st-encoding__bar span {
    display: block;
    width: 35%;
    height: 100%;
    border-radius: 999px;
    background: #3fb950;
    animation: st-encoding 1.4s ease-in-out infinite;
  }

  @keyframes st-encoding {
    0%   { margin-left: -35%; }
    100% { margin-left: 100%; }
  }

  @media (prefers-reduced-motion: reduce) {
    .st-encoding__bar span { width: 100%; margin-left: 0; animation: none; opacity: .55; }
  }

  .st-player__icon {
    display: grid; place-items: center;
    width: 72px; height: 72px;
    padding-left: 5px;
    border-radius: 50%;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
    color: #fff;
    margin-bottom: var(--st-2);
  }

  .st-watermark {
    position: absolute; right: var(--st-3); bottom: var(--st-3);
    padding: 3px var(--st-2);
    border-radius: 6px;
    background: rgba(0,0,0,.45);
    color: rgba(255,255,255,.65);
    font-size: 11px;
    pointer-events: none;
    user-select: none;
  }

  /* Convite para a proxima aula, sobre o video que acabou. */
  .st-next-prompt {
    position: absolute; inset: 0;
    display: grid; place-content: center; justify-items: center; gap: var(--st-3);
    background: rgba(11, 15, 20, .88);
    text-align: center;
  }
  .st-next-prompt p { font-size: 18px; font-weight: 600; }

  /* --------------------------------------------------------- barra da aula */

  .st-watch__bar {
    display: flex; align-items: center; gap: var(--st-4); flex-wrap: wrap;
    padding: var(--st-4) 0;
    border-bottom: 1px solid var(--st-border);
  }
  .st-watch__title { order: 1; min-width: 0; flex: 1; }
  .st-watch__title h1 { font-size: 21px; margin-bottom: 2px; }
  .st-watch__title span { font-size: 13.5px; display: block; }
  .st-watch__nav { order: 2; display: flex; gap: var(--st-2); }
  .st-watch__done {
    order: 3;
    display: flex; align-items: center; gap: var(--st-2);
    font-size: 14px; cursor: pointer; white-space: nowrap;
  }
  .st-watch__done input { width: 17px; height: 17px; accent-color: var(--st-accent); cursor: pointer; }

  /* ------------------------------------------------------------------ abas */

  .st-tabs__bar {
    display: flex; gap: var(--st-5);
    overflow-x: auto;
    border-bottom: 1px solid var(--st-border);
    scrollbar-width: none;
  }
  .st-tabs__bar::-webkit-scrollbar { display: none; }
  .st-tabs__tab {
    padding: var(--st-4) 0;
    margin-bottom: -1px;
    border: 0; border-bottom: 2px solid transparent;
    background: none;
    color: var(--st-fg-muted);
    font-size: 15px; font-weight: 550;
    white-space: nowrap;
  }
  .st-tabs__tab:hover { color: var(--st-fg); }
  .st-tabs__tab.is-active { color: var(--st-fg); border-bottom-color: var(--st-accent); }

  .st-tabs__panel { padding-top: var(--st-5); min-height: 240px; }
  .st-tabs__loading,
  .st-tab-error { padding: var(--st-6) 0; color: var(--st-fg-subtle); text-align: center; }

  .st-tab { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--st-6); align-items: start; }
  .st-tab__title { font-size: 19px; margin-bottom: var(--st-3); }
  .st-tab__content { margin-top: var(--st-5); }
  .st-tab__side { display: grid; gap: var(--st-3); }
  .st-tab__box {
    padding: var(--st-4);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    background: var(--st-surface);
    font-size: 14px;
  }
  .st-tab__box-title {
    margin-bottom: var(--st-2);
    font-size: 12px; font-weight: 650;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--st-fg-subtle);
  }

  /* ------------------------------------------------------------ materiais */

  .st-materials { margin-top: var(--st-6); }
  .st-materials h3 { font-size: 16px; margin-bottom: var(--st-3); }
  .st-materials__list { display: grid; gap: var(--st-2); list-style: none; padding: 0; }
  .st-materials__list a {
    display: flex; align-items: center; gap: var(--st-3);
    padding: var(--st-3) var(--st-4);
    border: 1px solid var(--st-border);
    border-radius: 10px;
    background: var(--st-surface);
    font-size: 14.5px;
  }
  .st-materials__list a:hover { border-color: var(--st-accent); }
  .st-materials__title { flex: 1; min-width: 0; }

  /* ------------------------------------------------------------ anotacoes */

  .st-notes { display: grid; gap: var(--st-5); }
  .st-notes__form { display: grid; gap: var(--st-2); }
  .st-notes__form label { font-size: 13.5px; color: var(--st-fg-muted); }
  .st-notes__form textarea,
  .st-qa textarea,
  .st-qa .dd-input {
    width: 100%;
    padding: var(--st-3);
    border: 1px solid var(--st-border);
    border-radius: 10px;
    background: var(--st-bg);
    color: var(--st-fg);
    font: inherit; font-size: 15px;
    resize: vertical;
  }
  .st-notes__form textarea:focus,
  .st-qa textarea:focus,
  .st-qa .dd-input:focus { outline: none; border-color: var(--st-accent); }
  .st-notes__actions { display: flex; align-items: center; gap: var(--st-3); flex-wrap: wrap; }
  .st-notes__filters { display: flex; gap: var(--st-2); }

  .st-notes__list { display: grid; gap: var(--st-3); list-style: none; padding: 0; }
  .st-note {
    padding: var(--st-4);
    border: 1px solid var(--st-border);
    border-left: 3px solid var(--st-accent);
    border-radius: 10px;
    background: var(--st-surface);
  }
  .st-note__head { display: flex; align-items: center; gap: var(--st-3); margin-bottom: var(--st-2); }
  .st-note__time {
    padding: 2px var(--st-2);
    border-radius: 6px;
    background: var(--st-accent-soft);
    color: var(--st-accent);
    font-size: 12.5px; font-weight: 650;
    font-variant-numeric: tabular-nums;
  }
  .st-note__lesson { font-size: 13px; color: var(--st-fg-subtle); }
  .st-note__delete { margin-left: auto; }
  .st-note__delete button {
    border: 0; background: none; color: var(--st-fg-subtle);
    font-size: 20px; line-height: 1; padding: 0 4px;
  }
  .st-note__delete button:hover { color: #fca5a5; }
  .st-note__body { font-size: 14.5px; white-space: pre-wrap; }

  /* ------------------------------------------------------------ perguntas */

  .st-qa { display: grid; gap: var(--st-5); }
  .st-qa__ask summary,
  .st-answer-form summary { padding: var(--st-2) 0; cursor: pointer; font-size: 14.5px; font-weight: 550; }
  .st-qa__ask form { display: grid; gap: var(--st-2); margin-top: var(--st-3); }
  .st-qa__ask label { font-size: 13.5px; color: var(--st-fg-muted); }
  .st-qa__ask-foot { display: flex; align-items: center; gap: var(--st-3); flex-wrap: wrap; }

  .st-qa__filters { display: flex; align-items: center; gap: var(--st-4); flex-wrap: wrap; }
  .st-qa__filters .st-search { margin: 0 0 0 auto; }

  .st-chips { display: flex; gap: var(--st-2); }
  .st-chip {
    padding: 5px var(--st-3);
    border: 1px solid var(--st-border);
    border-radius: 999px;
    font-size: 13.5px;
    color: var(--st-fg-muted);
  }
  .st-chip:hover { color: var(--st-fg); }
  .st-chip.is-active { background: var(--st-accent-soft); border-color: var(--st-accent); color: var(--st-accent); }

  .st-qa__list { display: grid; gap: var(--st-3); list-style: none; padding: 0; }
  .st-question {
    display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--st-3);
    padding: var(--st-4);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    background: var(--st-surface);
  }
  .st-question.is-resolved { border-left: 3px solid var(--st-accent); }
  .st-question__head { display: flex; align-items: center; gap: var(--st-3); flex-wrap: wrap; }
  .st-question__head h3 { font-size: 16px; }
  .st-question__meta {
    display: flex; gap: var(--st-3); flex-wrap: wrap;
    margin: var(--st-1) 0 var(--st-3);
    font-size: 13px; color: var(--st-fg-subtle);
  }
  .st-question__meta a { color: var(--st-accent); }
  .st-question__lesson { font-style: italic; }
  .st-question__text { font-size: 14.5px; white-space: pre-wrap; }
  .st-question__resolve { margin-top: var(--st-3); }

  .st-vote {
    display: grid; justify-items: center; gap: 2px;
    width: 44px; padding: var(--st-2) 0;
    border: 1px solid var(--st-border);
    border-radius: 10px;
    background: none;
    color: var(--st-fg-muted);
    font-size: 13px; font-weight: 650;
  }
  .st-vote:hover { border-color: var(--st-accent); color: var(--st-fg); }
  .st-vote.is-on { background: var(--st-accent-soft); border-color: var(--st-accent); color: var(--st-accent); }

  .st-answers { display: grid; gap: var(--st-2); list-style: none; padding: 0; margin-top: var(--st-4); }
  .st-answer { padding: var(--st-3); border-radius: 10px; background: var(--st-bg); font-size: 14px; }

  /* Resposta do instrutor puxa o olho: e a que o aluno veio ler. */
  .st-answer.is-instructor { background: var(--st-accent-soft); }
  .st-answer__meta { display: flex; align-items: center; gap: var(--st-2); margin-bottom: var(--st-1); font-size: 13px; }
  .st-answer-form form { display: grid; gap: var(--st-2); margin-top: var(--st-2); justify-items: start; }
  .st-answer-form textarea {
    width: 100%;
    padding: var(--st-3);
    border: 1px solid var(--st-border);
    border-radius: 10px;
    background: var(--st-bg);
    color: var(--st-fg);
    font: inherit; font-size: 14.5px;
  }

  /* -------------------------------------------------------------- anuncios */

  .st-announcements { display: grid; gap: var(--st-3); }
  .st-announcement {
    padding: var(--st-4);
    border: 1px solid var(--st-border);
    border-left: 3px solid var(--st-fg-subtle);
    border-radius: var(--st-radius);
    background: var(--st-surface);
  }
  .st-announcement--info    { border-left-color: #3b82f6; }
  .st-announcement--success { border-left-color: var(--st-accent); }
  .st-announcement--warning { border-left-color: var(--st-gold); }
  .st-announcement--danger  { border-left-color: #dc2626; }
  .st-announcement__head { display: flex; align-items: baseline; gap: var(--st-3); margin-bottom: var(--st-2); }
  .st-announcement__head h3 { font-size: 16px; }

  /* ---------------------------------------------------------------- indice */

  .st-outline {
    position: sticky; top: 76px;
    max-height: calc(100vh - 96px);
    display: flex; flex-direction: column;
    background: var(--st-surface);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    overflow: hidden;
  }
  .st-outline__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--st-3) var(--st-4);
    border-bottom: 1px solid var(--st-border);
    font-size: 14px; font-weight: 650;
  }
  .st-outline__close {
    border: 0; background: none; color: var(--st-fg-subtle);
    font-size: 22px; line-height: 1; padding: 0 2px;
  }
  .st-outline__close:hover { color: var(--st-fg); }

  .st-outline__progress {
    display: grid; gap: var(--st-2);
    padding: var(--st-3) var(--st-4);
    border-bottom: 1px solid var(--st-border);
    font-size: 12.5px;
  }
  .st-outline__body { overflow-y: auto; }

  /* Botao de reabrir, no lugar onde o indice estava. */
  .st-outline__open {
    position: fixed; right: var(--st-4); top: 84px;
    z-index: 10;
    height: 36px; padding-inline: var(--st-4);
    border: 1px solid var(--st-border);
    border-radius: 999px;
    background: var(--st-surface);
    color: var(--st-fg);
    font-size: 14px; font-weight: 550;
  }

  .st-section-group { border-bottom: 1px solid var(--st-border); }
  .st-section-group:last-child { border-bottom: 0; }
  .st-section-group > summary {
    display: flex; flex-direction: column; gap: 2px;
    padding: var(--st-3) var(--st-4);
    background: var(--st-surface-2);
    cursor: pointer;
    list-style: none;
  }
  .st-section-group > summary::-webkit-details-marker { display: none; }
  .st-section-group__title { font-size: 14px; font-weight: 650; }
  .st-section-group__meta { font-size: 12px; color: var(--st-fg-subtle); }

  .st-outline__list { list-style: none; margin: 0; padding: 0; }
  .st-outline__item {
    display: flex; align-items: flex-start; gap: var(--st-2);
    padding: var(--st-2) var(--st-4);
    border-top: 1px solid var(--st-border);
  }
  .st-outline__item:hover { background: var(--st-surface-2); }
  .st-outline__item.is-current { background: var(--st-accent-soft); }
  .st-outline__item.is-current .st-outline__title { color: var(--st-accent); font-weight: 600; }

  .st-outline__check {
    margin-top: 3px;
    width: 16px; height: 16px;
    accent-color: var(--st-accent);
    flex-shrink: 0; cursor: pointer;
  }
  .st-outline__link { display: grid; gap: 3px; flex: 1; min-width: 0; padding: 2px 0; }
  .st-outline__title { font-size: 14px; line-height: 1.35; }
  .st-outline__meta { font-size: 12px; color: var(--st-fg-subtle); }

  @media (max-width: 1100px) {
    /* Tela estreita: o video vem primeiro e o indice desce para o fim. */
    .st-watch { grid-template-columns: minmax(0, 1fr); }
    .st-outline { position: static; max-height: none; }
    .st-outline__open { display: none; }
    .st-tab { grid-template-columns: minmax(0, 1fr); }
  }

  .st-locked__actions { display: flex; gap: var(--st-3); justify-content: center; flex-wrap: wrap; }

  /* ------------------------------------------------------------------ blog */
  .st-post { max-width: 760px; padding: var(--st-7) 0 var(--st-8); }
  .st-post__head { margin-bottom: var(--st-5); }
  .st-post__head h1 { font-size: clamp(26px, 3.4vw, 36px); margin-bottom: var(--st-2); }
  .st-post__cover {
    width: 100%; aspect-ratio: 16/9; object-fit: cover;
    border-radius: var(--st-radius);
    margin-bottom: var(--st-5);
  }
  .st-post__body { font-size: 17px; line-height: 1.75; }

  .st-post__cta {
    display: flex; align-items: center; gap: var(--st-4); flex-wrap: wrap;
    margin-top: var(--st-7);
    padding: var(--st-5);
    background: var(--st-surface);
    border: 1px solid var(--st-accent);
    border-radius: var(--st-radius);
  }
  .st-post__cta > div { flex: 1; min-width: 220px; }
  .st-post__cta-label { font-size: 12px; font-weight: 650; color: var(--st-accent); text-transform: uppercase; letter-spacing: .05em; }
  .st-post__cta-title { font-size: 19px; font-weight: 650; margin-top: 2px; }

  /* ------------------------------------------------------------ avaliacoes */
  .st-rating { display: flex; align-items: center; gap: var(--st-2); }
  .st-stars { color: var(--st-gold); letter-spacing: 1px; }
  .st-stars span { opacity: .25; }

  .st-reviews { display: grid; gap: var(--st-3); }
  .st-review {
    padding: var(--st-4);
    background: var(--st-surface);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
  }
  .st-review__head { display: flex; align-items: center; gap: var(--st-3); margin-bottom: var(--st-2); }
  .st-review__author { font-weight: 600; font-size: 14px; }
  .st-review__date { font-size: 12.5px; color: var(--st-fg-subtle); margin-left: auto; }

  .st-related { list-style: none; padding: 0; display: grid; gap: var(--st-2); }
  .st-related a { color: var(--st-fg-muted); font-size: 14.5px; }
  .st-related a:hover { color: var(--st-accent); }
}

@media (max-width: 900px) {
  .st-layout,
  .st-course-hero__inner,
  .st-course-body,
  .st-home-hero__inner { grid-template-columns: 1fr; }
  .st-course-hero__card { position: static; order: -1; }
  .st-home-hero { padding-block: var(--st-6) var(--st-5); }

  /* Em tela estreita a trilha respeita a margem do container: o efeito de
     sangria so faz sentido quando ha o que sangrar. */
  .st-rail__track { grid-auto-columns: 240px; padding-inline: var(--st-4); }
}

/* Formularios embutidos nas secoes de comunidade */
.st-review-form { display: grid; gap: var(--st-3); margin-bottom: var(--st-5); }
.st-review-form__row { display: flex; align-items: center; gap: var(--st-3); }
.st-review-form .dd-input {
  width: 100%;
  padding: 9px var(--st-3);
  border: 1px solid var(--st-border);
  border-radius: 8px;
  background: var(--st-surface);
  color: var(--st-fg);
  font: inherit;
}
.st-review-form .dd-input:focus { outline: none; border-color: var(--st-accent); }
.st-review-form button { justify-self: start; }

.st-reply {
  margin-top: var(--st-3);
  padding-left: var(--st-4);
  border-left: 2px solid var(--st-border);
}
.st-reply-form { margin-top: var(--st-3); }
.st-reply-form .dd-input {
  width: 100%;
  padding: 7px var(--st-3);
  border: 1px solid var(--st-border);
  border-radius: 8px;
  background: var(--st-bg);
  color: var(--st-fg);
  font: inherit;
  font-size: 14px;
}

/* ------------------------------------------------------------- entrar/criar */
.st-auth { display: grid; place-items: center; padding: var(--st-8) 0; }
.st-auth__box {
  width: min(420px, 100%);
  padding: var(--st-6);
  background: var(--st-surface);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius);
}
.st-auth__box h1 { font-size: 24px; margin-bottom: var(--st-2); }
.st-auth__form { display: grid; gap: var(--st-2); margin-top: var(--st-5); }
.st-auth__form label { font-size: 13.5px; font-weight: 550; margin-top: var(--st-2); }
.st-auth__form .dd-input {
  width: 100%;
  height: 42px;
  padding: 0 var(--st-3);
  border: 1px solid var(--st-border);
  border-radius: 8px;
  background: var(--st-bg);
  color: var(--st-fg);
  font: inherit;
}
.st-auth__form .dd-input:focus { outline: none; border-color: var(--st-accent); }
.st-auth__form .dd-input.is-error { border-color: #dc2626; }
.st-auth__form button { margin-top: var(--st-4); }
.st-auth__foot { margin-top: var(--st-5); text-align: center; font-size: 14px; color: var(--st-fg-muted); }
.st-auth__foot a { color: var(--st-accent); font-weight: 550; }

.st-alert {
  margin-top: var(--st-4);
  padding: var(--st-3) var(--st-4);
  border: 1px solid #dc2626;
  border-radius: 8px;
  background: rgba(220, 38, 38, .12);
  color: #fca5a5;
  font-size: 14px;
}
/* Mesma caixa, outro recado: confirmacao de senha alterada, conta criada. */
.st-alert--ok {
  border-color: var(--st-accent);
  background: rgba(22, 163, 74, .12);
  color: #86efac;
}

.st-field-error { font-size: 12.5px; color: #fca5a5; }
.st-field-help  { font-size: 12.5px; color: var(--st-fg-subtle); }