/* BRAZ SCHOOL — UI components reutilizáveis (white-label via var(--brand-*)).
   Base do redesign do dashboard; reaproveitar nas próximas telas.
   Tudo dirigido pelo brand.php (cores/fontes). */

:root {
    --bz-radius: 16px;
    --bz-radius-sm: 10px;
    --bz-border: 1px solid var(--border-soft, rgba(var(--brand-accent-rgb, 224,193,147), 0.16));
    --bz-border-gold: 1px solid rgba(var(--brand-accent-rgb, 224,193,147), 0.22);
    --bz-card-bg: linear-gradient(180deg, rgba(var(--sheen-rgb, 255,255,255),0.025), rgba(var(--sheen-rgb, 255,255,255),0));
    --bz-gap: 22px;
}

/* ---------- Layout ---------- */
.bz-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--bz-gap);
    align-items: start;
}
.bz-col { display: flex; flex-direction: column; gap: var(--bz-gap); min-width: 0; }
@media (max-width: 1100px) { .bz-grid { grid-template-columns: 1fr; } }

/* ---------- Tipografia ---------- */
/* Overline (eyebrow): Clash Display, caixa alta, tracking LARGO (referência 0.3em) */
.bz-eyebrow {
    font-family: var(--brand-font-detail, 'Clash Display', 'Inter', sans-serif);
    font-size: 0.72rem; font-weight: 400; letter-spacing: 0.3em;
    text-transform: uppercase; color: var(--accent-ink, #e0c193);
}
/* Variante com hairline dourada à direita (padrão "ENTRADA ——" do site) */
.bz-eyebrow--rule { display: flex; align-items: center; gap: 16px; }
.bz-eyebrow--rule::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, rgba(var(--brand-accent-rgb, 224,193,147), 0.4), transparent);
}
.bz-h1 {
    font-family: var(--brand-font-display, 'Source Serif 4', Georgia, serif);
    font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 400; line-height: 1.1;
    color: var(--text-strong); letter-spacing: 0; text-wrap: balance;
}
/* Ênfase editorial: 2ª linha/palavra em dourado */
.bz-h1 .accent, .bz-h2 .accent { color: var(--accent-ink, #e0c193); }
.bz-h2 {
    font-family: var(--brand-font-display, 'Source Serif 4', Georgia, serif);
    font-size: 1.5rem; font-weight: 400; color: var(--text-strong); line-height: 1.2; text-wrap: balance;
}
.bz-h3 {
    font-family: var(--brand-font-display, 'Source Serif 4', Georgia, serif);
    font-size: 1.1rem; font-weight: 400; color: var(--text-strong);
}
.bz-muted { color: rgba(var(--ink-rgb),0.6); }
.bz-small { font-size: 0.85rem; }

/* ---------- Cabeçalho de seção ---------- */
.bz-section-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    margin-bottom: 14px;
}
.bz-section-head .bz-h2 { font-size: 1.25rem; }
.bz-link {
    color: var(--accent-ink, #e0c193); text-decoration: none; font-size: 0.8rem;
    font-weight: 500; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.bz-link:hover { opacity: 0.85; }
.bz-link .material-icons { font-size: 16px; }

/* ---------- Card (card-soft do site: bg white/2% FLAT sobre preto, borda
   white/10, radius 16, SEM sombra — computed extraído de brazschool.com) ---------- */
.bz-card {
    background: rgba(var(--ink-rgb),0.02);
    border: 1px solid rgba(var(--brand-accent-rgb, 224, 193, 147), 0.16);
    border-radius: var(--bz-radius);
    padding: 22px;
    position: relative;
    transition: border-color 0.25s ease, transform 0.25s ease, background-color 0.25s ease;
}
.bz-card--hover:hover {
    border-color: rgba(var(--brand-accent-rgb, 224,193,147), 0.4);
    transform: translateY(-3px);
}
.bz-card--gold { border: var(--bz-border-gold); }
/* Traço dourado curto (detalhe de marca no topo do card) */
.bz-card-stroke { display: block; height: 1px; width: 32px; margin-bottom: 16px;
    background: rgba(var(--brand-accent-rgb, 224,193,147), 0.6); }

/* ---------- Botões (pill dourado — assinatura do site) ---------- */
.bz-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--brand-font-detail, 'Clash Display', 'Inter', sans-serif);
    font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
    padding: 14px 28px; border-radius: 9999px; border: none; cursor: pointer;
    text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: var(--brand-accent, #e0c193);
    color: var(--on-accent);
}
.bz-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 30px -10px rgba(var(--brand-accent-rgb, 224,193,147), 0.6); }
.bz-btn--block { width: 100%; }
.bz-btn-outline {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--brand-font-detail, 'Clash Display', 'Inter', sans-serif);
    font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
    padding: 13px 26px; border-radius: 9999px; cursor: pointer; text-decoration: none;
    background: transparent; color: var(--text-strong);
    border: 1px solid rgba(var(--ink-rgb),0.25);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.bz-btn-outline:hover { background: rgba(var(--ink-rgb),0.1); border-color: rgba(var(--ink-rgb),0.4); }
.bz-btn--block.bz-btn-outline, .bz-btn-outline.bz-btn--block { width: 100%; }

/* ---------- Badges ---------- */
.bz-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--brand-font-detail, 'Clash Display', 'Inter', sans-serif);
    font-size: 0.66rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 6px;
    background: rgba(var(--brand-accent-rgb, 224,193,147), 0.15);
    color: var(--accent-ink, #e0c193);
    border: 1px solid rgba(var(--brand-accent-rgb, 224,193,147), 0.25);
}
.bz-badge--live {
    background: rgba(224, 80, 80, 0.14); color: #f0a0a0; border-color: rgba(224,80,80,0.3);
}
.bz-badge--live::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%; background: #e05050;
    box-shadow: 0 0 6px #e05050;
}
/* Tema claro: o tint 14% de vermelho lava no branco — vira pill vermelho sólido
   com texto branco (contraste AA: branco sobre #cf3f3f = 4,73). */
html[data-theme="light"] .bz-badge--live { background: #cf3f3f; color: #fff; border-color: transparent; }
html[data-theme="light"] .bz-badge--live::before { background: #fff; box-shadow: none; }
.bz-badge--soft { background: rgba(var(--ink-rgb),0.06); color: rgba(var(--ink-rgb),0.6); border-color: transparent; }

/* ---------- Barra de progresso ---------- */
.bz-progress { height: 4px; background: rgba(var(--ink-rgb),0.1); border-radius: 2px; overflow: hidden; }
.bz-progress > span {
    display: block; height: 100%; border-radius: 2px;
    background: var(--brand-accent, #e0c193);
}
.bz-progress-label { display: flex; justify-content: space-between; font-size: 0.78rem; color: rgba(var(--ink-rgb),0.5); margin-bottom: 7px; }
.bz-progress-label b { color: var(--accent-ink, #e0c193); font-weight: 600; }

/* ---------- Stepper "Marcos" (Jornada) ---------- */
.bz-stepper { display: flex; align-items: center; gap: 0; }
.bz-stepper-dot {
    width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0;
    border: 2px solid rgba(var(--ink-rgb),0.22); background: var(--brand-bg, #000);
}
.bz-stepper-dot.is-done { background: var(--brand-accent, #e0c193); border-color: var(--accent-ink, #e0c193); }
.bz-stepper-dot.is-current {
    border-color: var(--accent-ink, #e0c193);
    box-shadow: 0 0 0 4px rgba(var(--brand-accent-rgb, 224,193,147), 0.18);
    background: var(--brand-accent, #e0c193);
}
.bz-stepper-line { flex: 1; height: 2px; background: rgba(var(--ink-rgb),0.14); min-width: 8px; }
.bz-stepper-line.is-done { background: var(--brand-accent, #e0c193); }
.bz-stepper-ends { display: flex; justify-content: space-between; font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(var(--ink-rgb),0.62); margin-top: 8px; }

/* ---------- Date badge (Próxima clase) ---------- */
.bz-date {
    width: 70px; flex-shrink: 0; text-align: center; border-radius: var(--bz-radius-sm);
    border: var(--bz-border-gold); background: rgba(var(--brand-accent-rgb, 224,193,147), 0.06);
    padding: 8px 4px;
}
.bz-date-month { font-family: var(--brand-font-detail, 'Clash Display', 'Inter', sans-serif); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ink, #e0c193); }
.bz-date-day { font-family: var(--brand-font-display, 'Source Serif 4', Georgia, serif); font-size: 1.9rem; line-height: 1.1; color: var(--text-strong); }
.bz-date-dow { font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(var(--ink-rgb),0.65); }

/* ---------- Stats (Tu progreso) ---------- */
.bz-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.bz-stat-label { font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(var(--ink-rgb),0.65); line-height: 1.3; }
.bz-stat-value { font-family: var(--brand-font-display, 'Source Serif 4', Georgia, serif); font-size: 1.7rem; color: var(--text-strong); line-height: 1.1; margin-top: 6px; }
.bz-stat-sub { font-size: 0.7rem; color: rgba(var(--ink-rgb),0.62); margin-top: 4px; }

/* ---------- Card de curso ---------- */
.bz-course {
    display: flex; flex-direction: column; text-decoration: none; overflow: hidden;
    /* mesma superfície dos .bz-card (translúcida neutra) — o fundo sólido
       --brand-bg-2 destoava (petróleo azulado) ao lado dos outros cards no escuro */
    background: rgba(var(--ink-rgb), 0.02); border: var(--bz-border); border-radius: var(--bz-radius);
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.bz-course:hover { transform: translateY(-3px); border-color: rgba(var(--brand-accent-rgb, 224,193,147), 0.35); }
.bz-course-thumb { aspect-ratio: 16/10; background: var(--brand-bg-2, #11111e) center/cover no-repeat; position: relative; }
.bz-course-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bz-course-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.bz-course-title { font-family: var(--brand-font-display, 'Source Serif 4', Georgia, serif); font-size: 1.1rem; color: var(--text-strong); line-height: 1.25; }
.bz-course-meta { font-size: 0.76rem; color: rgba(var(--ink-rgb),0.65); }

/* ---------- Lista de aulas (Continúa aprendiendo) ---------- */
.bz-lessons { display: flex; flex-direction: column; }
.bz-lesson { display: flex; align-items: center; gap: 12px; padding: 11px 6px; border-bottom: 1px solid rgba(var(--ink-rgb),0.05); text-decoration: none; }
.bz-lesson:last-child { border-bottom: none; }
.bz-lesson:hover { background: rgba(var(--ink-rgb),0.02); }
.bz-lesson.is-current { background: rgba(var(--brand-accent-rgb, 224,193,147), 0.07); border-radius: 8px; }
.bz-lesson-no { font-size: 0.8rem; color: rgba(var(--ink-rgb),0.62); width: 26px; flex-shrink: 0; }
.bz-lesson-title { flex: 1; min-width: 0; font-size: 0.9rem; color: rgba(var(--ink-rgb),0.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bz-lesson.is-current .bz-lesson-title { color: var(--accent-ink, #e0c193); }
.bz-lesson-meta { font-size: 0.78rem; color: rgba(var(--ink-rgb),0.62); flex-shrink: 0; }
.bz-lesson-ico { font-size: 18px; flex-shrink: 0; }
.bz-lesson-ico.done { color: var(--accent-ink, #e0c193); }
.bz-lesson-ico.lock { color: rgba(var(--ink-rgb),0.25); }

/* ---------- Hero do curso atual ---------- */
.bz-hero { display: grid; grid-template-columns: 1fr 0.85fr; overflow: hidden; padding: 0; }
.bz-hero-body { padding: 30px; display: flex; flex-direction: column; gap: 14px; }
.bz-hero-media { background: var(--brand-bg-2, #11111e) center/cover no-repeat; min-height: 280px; position: relative; }
.bz-hero-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--brand-bg-2, #11111e) 0%, transparent 35%); }
@media (max-width: 760px) { .bz-hero { grid-template-columns: 1fr; } .bz-hero-media { min-height: 160px; } }

/* ---------- Estado placeholder (features sem backend) ---------- */
.bz-stub-note {
    display: inline-flex; align-items: center; gap: 6px; font-size: 0.66rem; letter-spacing: 0.06em;
    text-transform: uppercase; color: rgba(var(--ink-rgb),0.62);
}
.bz-stub-note .material-icons { font-size: 14px; }
.bz-empty { text-align: center; padding: 26px 10px; color: rgba(var(--ink-rgb),0.5); }
.bz-empty .material-icons { font-size: 34px; color: rgba(var(--brand-accent-rgb, 224,193,147), 0.5); margin-bottom: 8px; }

/* ---------- Página-stub (Próximamente) ---------- */
.bz-coming { max-width: 560px; margin: 8vh auto; text-align: center; }
.bz-coming .bz-coming-ico {
    width: 76px; height: 76px; margin: 0 auto 22px; border-radius: 20px;
    display: flex; align-items: center; justify-content: center;
    background: var(--brand-bg-2, #11111e); border: var(--bz-border-gold);
}
.bz-coming .bz-coming-ico .material-icons { font-size: 36px; color: var(--accent-ink, #e0c193); }
.bz-coming p { color: rgba(var(--ink-rgb),0.6); line-height: 1.6; margin-top: 14px; }

/* ---------- Dashboard: header e grids ---------- */
.bz-dash-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 30px; flex-wrap: wrap; }
.bz-user { display: flex; align-items: center; gap: 14px; }
.bz-iconbtn { width: 42px; height: 42px; border-radius: 12px; border: var(--bz-border); background: var(--brand-bg-2, #11111e); color: rgba(var(--ink-rgb),0.7); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; }
.bz-iconbtn:hover { color: var(--accent-ink, #e0c193); border-color: rgba(var(--brand-accent-rgb,224,193,147),0.35); }
.bz-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(var(--brand-accent-rgb,224,193,147),0.4); }
.bz-avatar--initial { display: flex; align-items: center; justify-content: center; background: var(--brand-bg-2,#11111e); color: var(--accent-ink,#e0c193); font-family: var(--brand-font-display,'Source Serif 4',serif); font-size: 1.2rem; }
.bz-user-meta { line-height: 1.3; }
.bz-user-name { font-weight: 600; color: var(--text-strong); font-size: 0.92rem; }
.bz-user-link { font-size: 0.76rem; color: var(--accent-ink,#e0c193); text-decoration: none; }
.bz-user-link:hover { text-decoration: underline; }
.bz-courses-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 980px) { .bz-courses-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .bz-courses-grid { grid-template-columns: 1fr; } }
.bz-playwrap { position: relative; aspect-ratio: 16/9; background: var(--brand-bg-2, #11111e) center/cover no-repeat; border-radius: var(--bz-radius-sm); overflow: hidden; }
.bz-playwrap img { width: 100%; height: 100%; object-fit: cover; }
.bz-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.bz-play span { width: 60px; height: 60px; border-radius: 50%; background: rgba(var(--brand-accent-rgb,224,193,147),0.85); color: var(--on-accent); display: flex; align-items: center; justify-content: center; }
.bz-play .material-icons { font-size: 32px; }
.bz-continue { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 760px) { .bz-continue { grid-template-columns: 1fr; } }

/* ---------- Skeleton (carregamento) ---------- */
.bz-skeleton { position: relative; overflow: hidden; background: rgba(var(--ink-rgb),0.05); border-radius: 8px; }
.bz-skeleton::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(var(--ink-rgb),0.06), transparent); animation: bz-shimmer 1.3s infinite; }
.bz-skel-line { height: 12px; margin: 9px 0; }
@keyframes bz-shimmer { 100% { transform: translateX(100%); } }

/* ---------- Notificações (sino) ---------- */
.bz-notif { position: relative; }
.bz-iconbtn { position: relative; }
.bz-notif-badge { position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #e05050; color: #fff; font-size: 0.62rem; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; }
.bz-notif-panel { position: absolute; top: calc(100% + 10px); right: 0; width: 360px; max-width: 92vw; max-height: 70vh; overflow-y: auto; background: var(--brand-bg-2, #11111e); border: 1px solid rgba(var(--brand-accent-rgb, 224, 193, 147), 0.16); border-radius: 14px; box-shadow: 0 18px 44px rgba(var(--shadow-rgb),0.55); z-index: 200; display: none; }
.bz-notif-panel.open { display: block; }
/* Mobile: o sino fica na borda esquerda do header empilhado; abre para a direita e nunca passa da viewport */
@media (max-width: 768px) { .bz-notif-panel { left: 0; right: auto; max-width: min(360px, calc(100vw - 48px)); } }
.bz-notif-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid rgba(var(--ink-rgb),0.06); font-weight: 600; color: var(--text-strong); font-size: 0.92rem; position: sticky; top: 0; background: var(--brand-bg-2, #11111e); }
.bz-notif-readall { background: transparent; border: none; cursor: pointer; color: var(--accent-ink, #e0c193); font-size: 0.76rem; font-family: inherit; }
.bz-notif-readall:hover { text-decoration: underline; }
.bz-notif-list { padding: 4px; }
.bz-notif-item { display: flex; gap: 11px; padding: 11px 12px; border-radius: 10px; text-decoration: none; color: var(--text-strong); align-items: flex-start; }
.bz-notif-item:hover { background: rgba(var(--ink-rgb),0.04); }
.bz-notif-item.is-unread { background: rgba(var(--brand-accent-rgb, 224,193,147), 0.07); }
.bz-notif-ico { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(var(--brand-accent-rgb, 224,193,147), 0.14); color: var(--accent-ink, #e0c193); }
.bz-notif-ico .material-icons { font-size: 19px; }
.bz-notif-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.bz-notif-title { display: block; font-size: 0.88rem; font-weight: 600; line-height: 1.3; }
.bz-notif-body { display: block; font-size: 0.8rem; color: rgba(var(--ink-rgb),0.6); line-height: 1.4; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bz-notif-time { display: block; font-size: 0.7rem; color: rgba(var(--ink-rgb),0.35); margin-top: 3px; }
.bz-notif-empty { padding: 26px 16px; text-align: center; color: rgba(var(--ink-rgb),0.62); font-size: 0.86rem; }

/* Tabelas largas (admin): rolagem horizontal no mobile sem estourar o layout */
.bz-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.bz-table-scroll > table { min-width: 640px; }

/* ====================================================================
   Camada visual proprietária BRAZ SCHOOL (skill brazschool-brand)
   Aurora, grain, vignette, reveal, hairline, overline, botões pill,
   inputs dark e focus dourado. Opt-in por classe — só age onde usada.
   ==================================================================== */

/* Foco visível dourado (a11y — regra de ouro da marca) */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--brand-accent, #e0c193);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Overline (eyebrow) — Clash Display, caixa alta, tracking largo */
.overline {
  font-family: var(--brand-font-detail, 'Clash Display', 'Inter', sans-serif);
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--accent-ink, #e0c193);
  text-decoration: none;
}

/* Hairline dourada */
.hair-rule {
  height: 1px; width: 100%; border: none;
  background: linear-gradient(90deg, transparent, rgba(var(--brand-accent-rgb, 224, 193, 147), .4), transparent);
}

/* Botões pill (CTA da marca) */
.btn-gold {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 9999px; border: none; cursor: pointer; text-decoration: none;
  background: var(--brand-accent, #e0c193); color: var(--on-accent);
  padding: 15px 32px;
  font-family: var(--brand-font-detail, 'Clash Display', 'Inter', sans-serif);
  font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: .1em;
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-gold:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 30px -10px rgba(var(--brand-accent-rgb, 224, 193, 147), .6);
}
.btn-outline-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 9999px; cursor: pointer; text-decoration: none;
  border: 1px solid rgba(var(--ink-rgb),.25); background: transparent; color: var(--text-strong);
  padding: 15px 32px;
  font-family: var(--brand-font-detail, 'Clash Display', 'Inter', sans-serif);
  font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: .1em;
  transition: background-color .2s ease;
}
.btn-outline-pill:hover { background: rgba(var(--ink-rgb),.1); }

/* Formulário dark */
.label-field {
  display: block; margin-bottom: 8px;
  font-family: var(--brand-font-detail, 'Clash Display', 'Inter', sans-serif);
  font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(var(--ink-rgb),.6);
}
.input-dark {
  /* border-box: inputs de texto são content-box por padrão — sem isto o
     width:100% + padding estoura o card nas telas de auth (sem reset global). */
  box-sizing: border-box;
  width: 100%; border-radius: 12px;
  border: 1px solid rgba(var(--brand-accent-rgb, 224, 193, 147), .25); background: rgba(var(--ink-rgb),.03);
  padding: 14px 16px; font-size: .95rem; color: var(--text-strong);
  font-family: var(--brand-font-body, 'Inter', sans-serif);
  transition: border-color .2s ease, background-color .2s ease;
}
.input-dark::placeholder { color: rgba(var(--ink-rgb),.3); }
.input-dark:focus {
  border-color: rgba(var(--brand-accent-rgb, 224, 193, 147), .6);
  background: rgba(var(--ink-rgb),.05); outline: none;
}

/* Aurora / mesh gradient sobre preto (assinatura do site) */
.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.aurora::before {
  content: ""; position: absolute; inset: -25%;
  background:
    radial-gradient(38% 48% at 18% 26%, rgba(61,133,234,.30), transparent 62%),
    radial-gradient(34% 44% at 82% 20%, rgba(2,62,115,.46), transparent 62%),
    radial-gradient(42% 42% at 66% 80%, rgba(224,193,147,.13), transparent 60%),
    radial-gradient(46% 56% at 28% 86%, rgba(2,62,115,.22), transparent 64%);
  filter: blur(48px) saturate(115%);
  animation: bz-drift 32s ease-in-out infinite alternate; will-change: transform;
}
.aurora::after {
  content: ""; position: absolute; inset: -25%;
  background: radial-gradient(28% 34% at 50% 8%, rgba(61,133,234,.16), transparent 60%);
  filter: blur(64px); animation: bz-drift2 26s ease-in-out infinite alternate; will-change: transform;
}
@keyframes bz-drift  { from { transform: translate3d(0,0,0) scale(1); }    to { transform: translate3d(2%,-4%,0) scale(1.12); } }
@keyframes bz-drift2 { from { transform: translate3d(0,0,0) scale(1.05); } to { transform: translate3d(-3%,3%,0) scale(1); } }
.aurora.is-paused::before, .aurora.is-paused::after { animation-play-state: paused; }

.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.vignette::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 28%, transparent 52%, rgba(0,0,0,.92) 100%);
}

/* Reveal no scroll (com stagger) */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .aurora::before, .aurora::after { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn-gold:hover { transform: none; }
}

/* Tema claro: a aurora/grão/vinheta são atmosfera do DARK (mesh sobre preto).
   No claro empastam a superfície — desligar p/ um branco limpo e nítido. */
html[data-theme="light"] .aurora,
html[data-theme="light"] .grain::after,
html[data-theme="light"] .vignette::before { display: none; }

/* Tema claro: FACES DE CARD em branco sólido (decisão do dono, 2026-07).
   A receita da casa (ink 2% + borda dourada 16%) é vidro sutil no DARK, mas
   vira cinza chapado sobre o body claro. Cobre as classes de card de todas
   as páginas (braz-ui carrega globalmente via csrf_head); dark intacto. */
html[data-theme="light"] .bz-card,
html[data-theme="light"] .glass-card,
html[data-theme="light"] .profile-hero,
html[data-theme="light"] .pwa-install-card,
html[data-theme="light"] .panel-box,
html[data-theme="light"] .wb-page-card,
html[data-theme="light"] .course-sidebar-card,
html[data-theme="light"] .module-item,
html[data-theme="light"] .lesson-notes {
    background: var(--surface-2, #fff);
    border-color: rgba(var(--ink-rgb), 0.12);
}
/* variantes com borda dourada mantêm o dourado (mais forte p/ ler no claro) */
html[data-theme="light"] .bz-card--gold,
html[data-theme="light"] .pwa-install-card {
    border-color: rgba(var(--brand-accent-rgb, 224, 193, 147), 0.5);
}

/* 2ª leva (feedback do dono): cards com gradiente dourado-tint e containers
   rgba(--surface-rgb, α) — a sonda de cor não os pega (gradiente computa
   backgroundColor transparente; surface translúcida acinzenta sobre o body).
   Face branca; o dourado fica na BORDA. Dark intacto. */
html[data-theme="light"] .my-score-card,
html[data-theme="light"] .leader-list,
html[data-theme="light"] .quest-card,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .course-block,
html[data-theme="light"] .auth-card {
    background: var(--surface-2, #fff);
}
html[data-theme="light"] .my-score-card {
    border-color: rgba(var(--brand-accent-rgb, 224, 193, 147), 0.5);
}

/* Play sobre vídeo: mídia é escura nos 2 temas → mantém o DOURADO cheio
   (com o flip do --brand-accent-rgb p/ bronze no claro, o rgba lavaria). */
html[data-theme="light"] .bz-play span {
    background: var(--brand-accent, #e0c193);
}

/* Logo por tema: dourado sobre escuro, PETRÓLEO sobre claro (asset dedicado).
   Marcar as duas versões com .brand-logo--gold / .brand-logo--dark no HTML.
   !important vence os seletores de img existentes (ex.: .sidebar-header-icon img). */
.brand-logo--dark { display: none !important; }
html[data-theme="light"] .brand-logo--gold { display: none !important; }
html[data-theme="light"] .brand-logo--dark { display: block !important; }

/* ---------- Tabelas na linguagem do card (site: card white/2%, borda white/10;
   header Clash uppercase tracking, linhas com hairline e hover sutil) ---------- */
.bz-table-scroll {
    background: rgba(var(--ink-rgb),0.02);
    border: 1px solid rgba(var(--brand-accent-rgb, 224, 193, 147), 0.16);
    border-radius: 16px;
}
.bz-table-scroll table, table.bz-table {
    width: 100%;
    border-collapse: collapse;
    background: transparent !important;
}
.bz-table-scroll thead th, table.bz-table thead th {
    font-family: var(--brand-font-detail, 'Clash Display', 'Inter', sans-serif) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: rgba(var(--ink-rgb),0.45) !important;
    text-align: left;
    padding: 13px 16px !important;
    border-bottom: 1px solid rgba(var(--ink-rgb),0.1) !important;
    background: transparent !important;
}
.bz-table-scroll tbody td, table.bz-table tbody td {
    padding: 13px 16px !important;
    border-bottom: 1px solid rgba(var(--ink-rgb),0.06) !important;
    color: rgba(var(--ink-rgb),0.82);
    font-size: 0.9rem;
}
.bz-table-scroll tbody tr:last-child td, table.bz-table tbody tr:last-child td { border-bottom: none !important; }
.bz-table-scroll tbody tr:hover, table.bz-table tbody tr:hover { background: rgba(var(--ink-rgb),0.03); }

/* ---------- Cabeçalho padrão de página (overline Clash + título serif + sub)
   — mesmo desenho do shell de auth/site: eyebrow dourada tracking 0.3em,
   H1 Source Serif 400 até 2.6rem, subtítulo white/60. ---------- */
.bz-page-head { margin: 4px 0 30px; }
.bz-page-head .bz-eyebrow { margin-bottom: 12px; }
.bz-page-head h1 {
    margin: 0 0 8px;
    font-family: var(--brand-font-display, 'Source Serif 4', Georgia, serif);
    font-weight: 400;
    font-size: clamp(1.9rem, 3vw, 2.6rem);
    line-height: 1.12;
    color: var(--text-strong);
}
.bz-page-head > p:not(.bz-eyebrow) {
    margin: 0;
    font-size: 1rem;
    line-height: 1.55;
    color: rgba(var(--ink-rgb),0.6);
    max-width: 620px;
}
.bz-page-head > p:not(.bz-eyebrow) a { color: var(--accent-ink, #e0c193); }

/* ===== Sino GLOBAL de notificações (Onda 1.4) — fixo no topo-direito de
   todas as telas autenticadas; o painel reusa os .bz-notif-* acima. ===== */
.bz-notif--global { position: fixed; top: 14px; right: 18px; z-index: 950; }
.bz-notif--global .bz-iconbtn { box-shadow: 0 6px 18px rgba(var(--shadow-rgb, 0,0,0), 0.35); }
.bz-notif--global .bz-notif-panel { right: 0; left: auto; }
@media (max-width: 768px) {
    .bz-notif--global { top: 10px; right: 10px; }
    .bz-notif--global .bz-iconbtn { width: 38px; height: 38px; border-radius: 10px; }
    .bz-notif--global .bz-notif-panel { right: 0; left: auto; max-width: calc(100vw - 20px); }
}
@media print { .bz-notif--global { display: none; } }

/* Link dentro de texto livre do usuário (text_rich/bzLinkify) — dourado sublinhado */
.bz-textlink { color: var(--accent-ink, #e0c193); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
.bz-textlink:hover { opacity: 0.85; }