/* =========================================================
   styles.css — FINAL
   - Dark mode editorial (padrão) como antes
   - Light mode via variáveis (para páginas logadas)
   - Login/Register/Reset NÃO mudam com tema (sempre o mesmo visual)
   - Remove duplicidades e blocos que conflitavam
   ========================================================= */

:root{
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-ui: var(--font-sans);
  --font-reading: var(--font-sans);

  /* ===== DARK EDITORIAL (default) ===== */
  --bg: #0b0e12;
  --bg2: rgba(12,14,18,.85); /* topbar */
  --fg: #f3f6fb;
  --muted: rgba(243,246,251,.72);
  --muted2: rgba(243,246,251,.58);

  --card: rgba(255,255,255,.03);
  --card-2: rgba(255,255,255,.04); /* pills/stats */
  --card-border: rgba(255,255,255,.10);

  --accent: rgba(90,167,255,.75);
  --accent-strong: rgba(90,167,255,.90);
  --ring: rgba(90,167,255,.14);

  --danger: #a93434;
  --danger-glow: rgba(169, 52, 52, .22);

  --btn-bg: transparent;
  --btn-bg-hover: rgba(255,255,255,.06);
  --btn-border: rgba(255,255,255,.10);

  --divider: rgba(255,255,255,.08);
}

/* ===== LIGHT MODE (somente páginas logadas usam as variáveis) ===== */
html[data-theme="claro"]{
  --bg: #f6f7fb;
  --bg2: #ffffff;
  --fg: rgba(16,19,24,.92);
  --muted: rgba(16,19,24,.70);
  --muted2: rgba(16,19,24,.58);

  --card: rgba(0,0,0,.03);
  --card-2: rgba(0,0,0,.03);
  --card-border: rgba(0,0,0,.12);

  --accent: rgba(16,120,255,.75);
  --accent-strong: rgba(16,120,255,.90);
  --ring: rgba(16,120,255,.16);

  --btn-bg: rgba(0,0,0,.02);
  --btn-bg-hover: rgba(0,0,0,.04);
  --btn-border: rgba(0,0,0,.14);

  --divider: rgba(0,0,0,.10);
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--fg);
}

/* =========================================================
   Base text / prose
   ========================================================= */
.erro{
  color: var(--danger);
  margin-top: 10px;
  min-height: 18px;
}

.prose{
  font-family: var(--font-sans);
  max-width: 80ch;
  line-height: 1.75;
  font-size: 15px;
  color: var(--muted);
}

.prose h1{
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  color: var(--fg);
}

.prose h2{
  font-size: 16px;
  letter-spacing: -0.01em;
  margin: 20px 0 10px;
  color: var(--fg);
}

.prose p{ margin: 0 0 14px; }

.prose ul{
  margin: 8px 0 16px 18px;
  padding: 0;
}

.prose li{
  margin: 6px 0;
  color: var(--muted2);
}

/* =========================================================
   Cards
   ========================================================= */
.home-card{
  border: 1px solid var(--card-border);
  background: var(--card);
  border-radius: 18px;
  padding: 22px 20px;
  max-width: 1320px;
  margin: 0 auto;
}

@media (max-width: 768px){
  .home-card{
    max-width: 100%;
    margin: 0 12px;
  }
}

/* =========================================================
   LOGIN (e também register/reset) — NÃO DEPENDE do tema global
   Mantém o visual exatamente como você definiu (dark editorial + painel claro)
   ========================================================= */
.login-page{
  background: #0b0e12;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.login-page .auth{
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
}

.login-page .auth__brand{
  position: relative;
  overflow: hidden;
  background: #0b0e12;
  background-image: url("../images/login-hero.png");
  background-size: cover;
  background-position: center;
}

.login-page .brand__overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(10,12,16,.85) 0%,
    rgba(10,12,16,.55) 45%,
    rgba(10,12,16,.70) 100%
  );
}

.login-page .brand__content{
  position: relative;
  height: 100%;
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 12px;
  max-width: 680px;
}

.login-page .brand__title{
  margin: 0;
  font-size: 46px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #f3f6fb;
  font-weight: 750;
}

.login-page .brand__subtitle{
  margin: 0;
  font-size: 16px;
  color: rgba(243,246,251,.72);
  max-width: 56ch;
}

.login-page .brand__divider{
  width: 64px;
  height: 2px;
  background: rgba(90,167,255,.75);
  border-radius: 99px;
  margin: 10px 0 4px;
}

.login-page .brand__micro{
  margin: 0;
  font-size: 13px;
  color: rgba(243,246,251,.58);
}

/* Painel do lado direito (cinza claro) */
.login-page .auth__panel{
  background: #f4f6f9;
  display: grid;
  place-items: center;
  padding: 40px 22px;
}

.login-page .panel__inner{
  width: 100%;
  max-width: 420px;
  background: transparent;
}

.login-page .panel__header{
  padding-left: 8px;
}

.login-page .panel__kicker{
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(0,0,0,.55);
  font-weight: 650;
}

.login-page .panel__title{
  margin: 6px 0 6px;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: rgba(0,0,0,.78);
}

.login-page .panel__hint{
  margin: 0 0 14px;
  font-size: 14px;
  color: rgba(0,0,0,.62);
}

/* Branco SOMENTE no form (card) */
.login-page .card{
  background: #fff;
  border: 1px solid rgba(16,19,24,.12);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(16,19,24,.14);
  padding: 18px 18px 16px;
  width: 100%;
}

.login-page .field{ margin-bottom: 12px; }

.login-page .label{
  display: block;
  font-size: 13px;
  color: rgba(0,0,0,.72);
  margin: 0 0 6px;
  font-weight: 650;
}

.login-page input{
  width: 100%;
  height: 46px;
  padding: 0 12px;
  border: 1px solid rgba(16,19,24,.14);
  border-radius: 12px;
  font-size: 15px;
  background: #ffffff;
  color: #101318;
  outline: none;
  margin-top: 0;
  display: block;
  box-sizing: border-box;
  max-width: 100%;
}

.login-page input::placeholder{
  color: rgba(16,19,24,.35);
}

.login-page input:focus{
  border-color: rgba(90,167,255,.55);
  box-shadow: 0 0 0 4px rgba(90,167,255,.14);
}

/* Login (e páginas públicas com painel claro): estado inválido via ARIA */
.login-page input[aria-invalid="true"]{
  border-color: var(--danger);
  box-shadow:
    0 0 0 1px var(--danger),
    0 0 0 4px var(--danger-glow);
}

/* Se estiver inválido, o foco mantém o estado de erro (não vira azul) */
.login-page input[aria-invalid="true"]:focus{
  border-color: var(--danger);
  box-shadow:
    0 0 0 1px var(--danger),
    0 0 0 6px var(--danger-glow);
}

.login-page .btn{
  width: 100%;
  height: 46px;
  border: 1px solid rgba(90,167,255,.65);
  border-radius: 12px;
  background: rgba(90,167,255,.12);
  color: #0f141c;
  font-weight: 750;
  font-size: 14px;
  cursor: pointer;
  transition: background .15s ease, transform .05s ease;
  margin-top: 10px;
}

.login-page .btn:hover{
  background: rgba(90,167,255,.18);
}

.login-page .btn:active{
  transform: translateY(1px);
}

.login-page .panel__footer{
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media (max-width: 560px){
  .panel__footer{
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }
}

.login-page .panel__separator{
  margin: 0 8px;
  color: rgba(0,0,0,.35);
  user-select: none;
}

.login-page .link{
  font-size: 13px;
  color: rgba(0,0,0,.72);
  text-decoration: none;
  border-bottom: 1px solid rgba(16,19,24,.18);
  padding-bottom: 2px;
}

.login-page .link:hover{
  border-bottom-color: rgba(90,167,255,.65);
}

@media (max-width: 980px){
  .login-page .auth{ grid-template-columns: 1fr; }
  .login-page .auth__brand{ min-height: 38vh; }
  .login-page .brand__content{ padding: 34px 22px; }
  .login-page .brand__title{ font-size: 34px; }
}

@media (max-width: 420px){
  .login-page .panel__title{ font-size: 24px; }
  .login-page .card{ padding: 16px; }
}

/* Login: toggle de senha */
.password-wrap{
  position: relative;
  display: flex;
  align-items: center;
}

.password-wrap input{
  padding-right: 44px;
}

.password-toggle{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
  border-radius: 10px;
  opacity: .85;
}

.password-toggle:hover{ opacity: 1; }

.password-toggle:focus-visible{
  outline: 2px solid rgba(0,0,0,.18);
  outline-offset: 2px;
}

.icon-eye{ width: 18px; height: 18px; fill: currentColor; }

/* Register/Reset (dark): garantir “olho” claro e foco coerente no dark */
.register-page .password-toggle{
  color: rgba(243,246,251,.82);
  opacity: .85;
}

.register-page .password-toggle:hover{
  opacity: 1;
}

.register-page .password-toggle:focus-visible{
  outline: 2px solid rgba(243,246,251,.22);
  outline-offset: 2px;
}

/* Footer */
.legal{
  margin-top: 18px;
  padding: 0 18px 22px;
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  text-align: center;
  font-size: 12px;
  color: var(--muted2);
}

/* =========================================================
   HOME / APP PAGES (logadas) — seguem variáveis de tema
   ========================================================= */
.home-page{
  --topbar-h: 66px;
}

.home-page .home-topbar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  min-height: var(--topbar-h);
  background: var(--bg2);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--divider);
  font-family: var(--font-ui);
}

.home-page .home-topbar__right{
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  background: var(--card-2);
  font-size: 13px;
  max-width: none;
  white-space: nowrap;
  color: var(--fg);
}

.user-pill__label{ color: var(--muted); }
.user-pill__name{ font-weight: 700; white-space: nowrap; }

.user-pill__link{
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.user-pill__link:hover{ opacity: .9; }
.user-pill__link:focus-visible{
  outline: 2px solid var(--ring);
  outline-offset: 3px;
  border-radius: 10px;
}

.btn-ghost{
  height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--fg);
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

.btn-ghost:hover{ background: var(--btn-bg-hover); }

.btn-ghost.btn-logout{
  border-color: rgba(90,167,255,.55);
  background: rgba(90,167,255,.12);
  color: var(--fg);
  font-weight: 800;
}
.btn-ghost.btn-logout:hover{
  background: rgba(90,167,255,.20);
  border-color: rgba(90,167,255,.75);
}

.btn-save:hover{ opacity: .95; }

.home-page .home-shell{
  max-width: 1100px;
  margin: 0 auto;
  padding: calc(26px + var(--topbar-h)) 18px 56px;
}

.home-page .home-header{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  margin-bottom: 18px;
}

.home-page .home-title{
  margin: 0 0 6px;
  font-size: 32px;
  letter-spacing: -0.03em;
  color: var(--fg);
}

.home-page .home-subtitle{
  margin: 0;
  color: var(--muted);
  max-width: 62ch;
  line-height: 1.5;
}

.home-page .stats{
  display: flex;
  gap: 10px;
}

.home-page .stat{
  text-align: right;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--card-border);
  background: var(--card-2);
  min-width: 140px;
}

.home-page .stat__value{
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--fg);
}

.home-page .stat__label{
  font-size: 12px;
  color: var(--muted2);
}

.home-page .course-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.home-page .course-card{
  display: grid;
  grid-template-columns: 1fr;
  text-decoration: none;
  color: inherit;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--card-border);
  background: var(--card);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.home-page .course-card:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.05);
  border-color: rgba(90,167,255,.35);
}

html[data-theme="claro"] .home-page .course-card:hover{
  background: rgba(0,0,0,.03);
}

.home-page .course-card__media{
  aspect-ratio: 4 / 5;
  background: rgba(0,0,0,.25);
}

.home-page .course-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-page .course-card__body{ padding: 14px 14px 16px; }

.home-page .course-card__badge{
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 750;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(90,167,255,.35);
  background: rgba(90,167,255,.10);
  color: var(--fg);
  margin-bottom: 10px;
}

.home-page .course-card__title{
  margin: 0 0 10px;
  font-size: 16px;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--fg);
}

.home-page .course-card__desc{
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.55;
  font-size: 14px;
}

.home-page .course-card__cta{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 800;
  font-size: 13px;
  color: var(--fg);
  padding-top: 12px;
  border-top: 1px solid var(--divider);
}

.home-page .course-card__arrow{
  color: var(--accent-strong);
  font-size: 16px;
}

@media (max-width: 980px){
  .home-page .home-header{ flex-direction: column; align-items: flex-start; }
  .home-page .stat{ text-align: left; }
  .home-page .course-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px){
  .home-page .course-grid{ grid-template-columns: 1fr; }
  .home-page .course-card__media{ aspect-ratio: 16 / 9; }
}

.back-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--card-border);
  background: rgba(255,255,255,.02);
  text-decoration: none;
  color: var(--fg);
  font-weight: 750;
  font-size: 13px;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}

.back-link:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(90,167,255,.35);
}

html[data-theme="claro"] .back-link{ background: rgba(0,0,0,.02); }
html[data-theme="claro"] .back-link:hover{ background: rgba(0,0,0,.04); }

.home-topbar__left{
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.home-topbar__brand{ min-width: 0; }
.home-topbar__title{ display: block; max-width: 62ch; }

@media (max-width: 560px){
  .home-topbar__left{ gap: 10px; }
  .home-topbar__title{ max-width: 42ch; line-height: 1.25; }
}

.home-actions{
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--divider);
  display: flex;
  justify-content: flex-end;
}

/* =========================================================
   COURSE HERO + info grids (mantém fonte consistente)
   ========================================================= */
.course-hero{ display: flex; align-items: center; gap: 32px; }
.course-hero__text{ flex: 1; }
.course-hero__media{ flex: 0 0 360px; }
.course-hero__media img{ width: 100%; height: auto; display: block; border-radius: 12px; }

@media (max-width: 768px){
  .course-hero{ flex-direction: column; align-items: stretch; }
  .course-hero__media{ order: -1; flex: none; }
}

@media (min-width: 769px){
  .course-hero{ display: block; }
  .course-hero__media{
    float: right;
    width: 360px;
    margin: 0 0 16px 24px;
  }
  .course-hero::after{ content: ""; display: block; clear: both; }
}

@media (max-width: 768px){
  .course-hero__media{ float: none; width: 100%; margin: 0 0 16px 0; }
}

.course-info-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
  margin: 24px 0;
}
.course-info-grid > .home-card{ width: 100%; height: auto; margin: 0; }

@media (max-width: 768px){
  .course-info-grid{ grid-template-columns: 1fr; }
}

/* Ajustes de tipografia para details/summary */
.prose details summary{
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 15px;
  color: var(--fg);
}
.prose details summary em{ font-style: normal; color: var(--muted); }
.prose details summary, .prose details summary *{
  font-family: var(--font-sans) !important;
  font-style: normal !important;
}

/* =========================================================
   REGISTER PAGE styles (mantém dark editorial e não depende do tema claro)
   ========================================================= */
.register-page .register-form{ margin-top: 14px; }
.register-page .register-field{ margin: 0 0 12px; }

.register-page .register-label{
  display: block;
  font-size: 13px;
  color: rgba(243,246,251,.85);
  margin: 0 0 6px;
  font-weight: 650;
}

.register-page .register-input{
  width: 100%;
  height: 46px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: rgba(243,246,251,.92);
  outline: none;
}

/* Register/Reset (dark): ícone do seletor de data visível */
.register-page input[type="date"]::-webkit-calendar-picker-indicator{
  filter: invert(1);
  opacity: .85;
  cursor: pointer;
}

.register-page input[type="date"]::-webkit-calendar-picker-indicator:hover{
  opacity: 1;
}

/* Profile: ícone do seletor de data visível no modo escuro */
html[data-theme="escuro"] .profile-form input[type="date"]::-webkit-calendar-picker-indicator{
  filter: invert(1);
  opacity: .85;
  cursor: pointer;
}

html[data-theme="escuro"] .profile-form input[type="date"]::-webkit-calendar-picker-indicator:hover{
  opacity: 1;
}

.register-page .register-input::placeholder{ color: rgba(243,246,251,.45); }

.register-page .register-input:focus{
  border-color: rgba(90,167,255,.55);
  box-shadow: 0 0 0 6px rgba(90,167,255,.14);
}

/* Register/Reset (dark editorial): estado inválido via ARIA */
.register-page .register-input[aria-invalid="true"]{
  border-color: var(--danger);
  box-shadow:
    0 0 0 1px var(--danger),
    0 0 0 6px var(--danger-glow);
}

/* Se estiver inválido, o foco mantém o estado de erro (não vira azul) */
.register-page .register-input[aria-invalid="true"]:focus{
  border-color: var(--danger);
  box-shadow:
    0 0 0 1px var(--danger),
    0 0 0 8px var(--danger-glow);
}

.register-page .register-hint{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(243,246,251,.58);
}

.register-page .register-error{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,120,120,.90);
  min-height: 16px;
}

.register-page .register-msg{
  margin-top: 10px;
  font-size: 13px;
  color: rgba(243,246,251,.85);
  min-height: 18px;
}

.register-page .register-msg.success{
  color: var(--accent-strong);
}

/* =========================================================
   PROFILE (mantém padrão do app; usa variáveis)
   ========================================================= */
.profile-form input[type="text"],
.profile-form input[type="date"]{
  width: 100%;
  margin-top: 6px;
  background: var(--bg2);
  border: 1px solid var(--card-border);
  color: var(--fg);
  border-radius: 12px;
  height: 46px;
  padding: 0 12px;
  outline: none;
}

.profile-form input[type="text"]:focus,
.profile-form input[type="date"]:focus{
  border-color: rgba(90,167,255,.55);
  box-shadow: 0 0 0 6px var(--ring);
}

/* Profile: estado inválido via ARIA (borda + glow sutil) */
.profile-form input[type="text"][aria-invalid="true"],
.profile-form input[type="date"][aria-invalid="true"]{
  border-color: var(--danger);
  box-shadow:
    0 0 0 1px var(--danger),
    0 0 0 6px var(--danger-glow);
}

/* Se estiver inválido, o foco mantém o estado de erro */
.profile-form input[type="text"][aria-invalid="true"]:focus,
.profile-form input[type="date"][aria-invalid="true"]:focus{
  border-color: var(--danger);
  box-shadow:
    0 0 0 1px var(--danger),
    0 0 0 8px var(--danger-glow);
}

.profile-field label{ display:block; }

.profile-readonly{
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background: var(--card-2);
  color: var(--fg);
}

.profile-actions{
  margin-top: 14px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}

.profile-msg{
  margin-top: 10px; opacity: .9;
}

/* Profile: sucesso visual (nível produto) */
.profile-msg.success{
  color: var(--accent-strong);
}

/* Profile: erro visual (opcional, mas consistente) */
.profile-msg.error{
  color: var(--danger);
}

.muted{ opacity: .75; color: var(--muted); }

.profile-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 900px){
  .profile-grid{ grid-template-columns: 1fr 1fr; }
}

.profile-card{ padding: 18px; }

/* =========================================================
   Tables (app)
   ========================================================= */
.table{
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}
.table th, .table td{
  padding: 10px 8px;
  border-bottom: 1px solid var(--divider);
  vertical-align: top;
  color: var(--fg);
}
.table th{
  text-align: left;
  opacity: .9;
  font-weight: 700;
}

/* Suaviza a troca de estados (focus/erro) sem “pulo” visual */
.login-page input,
.register-page .register-input,
.profile-form input[type="text"],
.profile-form input[type="date"]{
  transition: border-color .15s ease, box-shadow .15s ease;
}

/* =========================================================
   Autofill (Chrome/Edge) — manter visual premium (sem “amarelar”)
   ========================================================= */

/* Register/Reset (dark) */
.register-page .register-input:-webkit-autofill,
.register-page .register-input:-webkit-autofill:hover,
.register-page .register-input:-webkit-autofill:focus,
.register-page .register-input:-webkit-autofill:active{
  -webkit-text-fill-color: rgba(243,246,251,.92);
  caret-color: rgba(243,246,251,.92);

  /* mantém o “fundo” do input igual ao normal */
  box-shadow: 0 0 0 1000px rgba(255,255,255,.03) inset;
  -webkit-box-shadow: 0 0 0 1000px rgba(255,255,255,.03) inset;

  /* evita o flash de cor do navegador */
  transition: background-color 9999s ease-out 0s;
}

/* Profile (usa variáveis de tema) */
.profile-form input[type="text"]:-webkit-autofill,
.profile-form input[type="text"]:-webkit-autofill:hover,
.profile-form input[type="text"]:-webkit-autofill:focus,
.profile-form input[type="text"]:-webkit-autofill:active,
.profile-form input[type="date"]:-webkit-autofill,
.profile-form input[type="date"]:-webkit-autofill:hover,
.profile-form input[type="date"]:-webkit-autofill:focus,
.profile-form input[type="date"]:-webkit-autofill:active{
  -webkit-text-fill-color: var(--fg);
  caret-color: var(--fg);

  /* mantém o fundo do input igual ao normal */
  box-shadow: 0 0 0 1000px var(--bg2) inset;
  -webkit-box-shadow: 0 0 0 1000px var(--bg2) inset;

  transition: background-color 9999s ease-out 0s;
}

/* Login (painel claro) */
.login-page input:-webkit-autofill,
.login-page input:-webkit-autofill:hover,
.login-page input:-webkit-autofill:focus,
.login-page input:-webkit-autofill:active{
  -webkit-text-fill-color: #101318;
  caret-color: #101318;
  box-shadow: 0 0 0 1000px #ffffff inset;
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
  transition: background-color 9999s ease-out 0s;
}

/* =========================================================
   Course Reader: header não deve sobrepor conteúdo
   (mantém outras páginas com header fixo)
   ========================================================= */
.home-page.course-reader-page .home-topbar{
  position: sticky;  /* override do fixed do .home-page */
  top: 0;
}

/* =========================================================
   FORM FIELDS — força Segoe UI (override final)
   ========================================================= */
input,
select,
textarea,
button {
  font-family: "Segoe UI", "Segoe UI Variable", system-ui,
               -apple-system, BlinkMacSystemFont,
               "Helvetica Neue", Arial, sans-serif !important;
}