/* ============================================================
   ALAS — DESIGN SYSTEM (roxo + branco)
   ============================================================ */

:root {
  /* Cores — superfícies */
  --color-bg-primary:    #FFFEEC;
  --color-bg-secondary:  #F7F5EC;
  --color-surface:       #FFFFFF;
  --color-surface-soft:  #F4F1E1;
  --color-surface-hover: #EAE6D6;

  /* Cores — texto */
  --color-text-primary:   #1F1B3D;
  --color-text-secondary: #6B6585;
  --color-text-tertiary:  #A8A2BD;
  --color-text-on-primary:#FFFFFF;

  /* Cores — marca */
  --color-primary:       #7C3AED; /* roxo principal */
  --color-primary-deep:  #5B21B6; /* hover/sombra */
  --color-primary-light: #A78BFA; /* done states */
  --color-primary-soft:  #EDE9FE; /* fundo suave */

  /* Cores - tema laranja */
  --color-orange:       #C7653A;
  --color-orange-deep:  #A94B2F;
  --color-orange-soft:  #F8D9C8;
  --color-orange-pale:  #FFF4EC;
  --color-orange-ink:   #241819;

  /* Cores — estados */
  --color-success:     #10B981;
  --color-error:       #EF4444;
  --color-celebration: #F59E0B; /* streaks / XP */

  /* Cores — bordas */
  --color-border:       #ECE8F7;
  --color-border-strong:#D8D2EC;

  /* Sombras */
  --shadow-sm:    0 2px 4px rgba(31, 27, 61, 0.03);
  --shadow-card:  0 4px 12px rgba(124, 58, 237, 0.05), 0 1px 3px rgba(31, 27, 61, 0.03);
  --shadow-lift:  0 12px 32px rgba(124, 58, 237, 0.08), 0 4px 8px rgba(31, 27, 61, 0.03);
  --shadow-frame: 0 40px 100px rgba(91, 33, 182, 0.12);

  /* Tipografia */
  --font: 'Outfit', sans-serif;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  /* Espaçamentos */
  --space-4:  4px;
  --space-8:  8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;

  /* Border-radius */
  --radius-btn:       12px;
  --radius-card-sm:   14px;
  --radius-card-main: 20px;
  --radius-app:       36px;
}


/* ============================================================
   RESET
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  height: 100%;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Bloqueia pinch-zoom em iOS/Android — pan-x/pan-y permite scroll mas mata zoom */
  touch-action: pan-x pan-y;
  /* Safety net iOS: se por qualquer bug o body nao fill 100% da tela,
     o html mostra BRANCO (mesma cor do bottom-nav) — invisivel visualmente
     em vez do creme do theme-color/body, eliminando a "faixa creme" */
  background-color: #ffffff;
}

body {
  font-family: var(--font);
  font-weight: var(--weight-regular);
  font-size: 16px;
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  /* native-feel: nada de seleção/long-press/pull-to-refresh */
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  touch-action: manipulation;

  /* Trava body no viewport real. inset:0 (top/right/bottom/left = 0) faz o
     body span do TOPO ao FUNDO absoluto do viewport — inclusive sob o home
     indicator quando viewport-fit=cover. NAO usamos height explicito:
     altura explicita (100vh/100dvh) sobrescreve inset:0 no iOS e cria o gap. */
  width: 100%;
  margin: 0;
  overflow: hidden;
  position: fixed;
  inset: 0;
}

/* permitir seleção apenas onde faz sentido */
input,
textarea,
[contenteditable="true"] {
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* iOS não dá zoom em input com font-size >= 16px */
input,
select,
textarea,
button {
  font-size: 16px;
  font-family: var(--font);
}

/* remove o "azulzinho" do focus default no mobile */
:focus-visible {
  outline: 2px solid rgba(124, 58, 237, 0.55);
  outline-offset: 2px;
}
:focus:not(:focus-visible) {
  outline: none;
}

/* iOS remove o estilo default de botões nativos */
button,
[role="button"] {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: none;
  font-family: var(--font);
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

/* links nativos no PWA: sem highlight, com feedback de toque */
a {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* imagens não arrastam (gesto nativo de app) */
img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}


/* ============================================================
   FRAME DO APP
   ============================================================ */

.app-frame {
  width: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--color-bg-primary);
  position: relative;
}

@media (min-width: 500px) {
  body {
    background:
      radial-gradient(circle at 20% 0%, #EDE9FE 0%, transparent 50%),
      radial-gradient(circle at 80% 100%, #F5F3FF 0%, transparent 50%),
      #FAF8FF;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    height: auto;
    padding: var(--space-24);
    /* no desktop, deixa o body fluir normal (não trava como no mobile) */
    position: static;
    inset: auto;
    overflow: auto;
    user-select: auto;
    -webkit-user-select: auto;
  }

  .app-frame {
    max-width: 390px;
    width: 390px;
    height: 844px;
    border-radius: var(--radius-app);
    box-shadow: var(--shadow-frame);
    overflow: hidden;
  }
}


/* ============================================================
   HEADER (home)
   ============================================================ */

.home-header {
  padding: max(40px, calc(env(safe-area-inset-top) + 16px)) 16px 16px;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  z-index: 10;
}

.greeting {
  display: flex;
  flex-direction: column;
}

.greeting-time {
  font-size: 16px;
  color: var(--color-text-secondary);
  font-weight: 500;
}

.greeting-name {
  font-size: 24px;
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}

.streak-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #FFD166 0%, #FF9F1C 100%);
  color: #1F1B3D;
  padding: 10px 18px;
  border-radius: 100px;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.1), 0 4px 12px rgba(255, 159, 28, 0.3);
}

.flame-icon {
  flex-shrink: 0;
  display: block;
}


/* ============================================================
   CONTEÚDO PRINCIPAL (scroll)
   ============================================================ */

.home-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  -webkit-overflow-scrolling: touch;
  background-color: var(--color-bg-primary);
}

.home-content::-webkit-scrollbar { display: none; }
.home-content { scrollbar-width: none; }


/* ============================================================
   LABEL — texto pequeno em maiúsculas
   ============================================================ */

.label {
  display: block;
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  line-height: 1;
}


/* ============================================================
   BOTÕES
   ============================================================ */

.btn-primary {
  display: block;
  width: 100%;
  padding: 15px var(--space-16);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-deep) 100%);
  color: var(--color-text-on-primary);
  border: none;
  border-radius: var(--radius-btn);
  font-size: 15px;
  font-weight: var(--weight-bold);
  text-align: center;
  text-decoration: none;
  transition: transform 0.1s ease, box-shadow 0.15s ease;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.25);
}

.btn-primary:hover {
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.35);
}

.btn-primary:active {
  transform: scale(0.96);
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);
}

.btn-outline {
  display: block;
  width: 100%;
  padding: 14px var(--space-16);
  background-color: var(--color-surface);
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-btn);
  font-size: 15px;
  font-weight: var(--weight-medium);
  text-align: center;
  transition: background-color 0.15s ease;
}

.btn-outline:hover {
  background-color: var(--color-primary-soft);
}

.btn-outline:active {
  background-color: var(--color-surface-hover);
  transform: scale(0.96);
}

.btn-outline:disabled {
  background-color: var(--color-success);
  border-color: var(--color-success);
  color: #fff;
  opacity: 1;
  cursor: default;
}


/* ============================================================
   BARRA DE PROGRESSO
   ============================================================ */

.trail-progress-section {
  padding: 0 16px;
  margin-top: 20px;
  margin-bottom: 24px;
  position: relative;
  z-index: 10;
}
.trail-bar { margin-bottom: 8px; }
.progress-bar-wrap {
  height: 6px;
  background-color: rgba(124, 58, 237, 0.1);
  border-radius: 100px;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #A78BFA 0%, #7C3AED 100%);
  border-radius: 100px;
  box-shadow: 0 0 8px rgba(124, 58, 237, 0.6);
  transition: width 0.4s ease;
}
.trail-progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
}
.trail-progress-count { color: #1F1B3D; }
.trail-progress-time { color: var(--color-text-tertiary); }
.progress-label {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: -4px;
}




/* ============================================================
   BLOCO: PRA PENSAR
   ============================================================ */

.thought-block {
  border-left: 3px solid var(--color-primary);
  background-color: var(--color-primary-soft);
  border-radius: 0 var(--radius-card-sm) var(--radius-card-sm) 0;
  padding: var(--space-16) var(--space-16) var(--space-16) 18px;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.thought-quote {
  font-size: 15px;
  font-weight: var(--weight-regular);
  font-style: italic;
  color: var(--color-text-primary);
  line-height: 1.55;
}


/* ============================================================
   CARD: DESAFIO DE HOJE
   ============================================================ */

.challenge-card {
  background-color: var(--color-surface);
  border-radius: var(--radius-card-main);
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.challenge-card:active {
  transform: scale(0.98);
}

.challenge-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.challenge-header-row .label {
  margin-bottom: 0;
}

.xp-pill {
  background-color: var(--color-primary-soft);
  color: var(--color-primary-deep);
  padding: 5px 10px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.03em;
  line-height: 1;
}

.challenge-text {
  font-size: 15px;
  font-weight: var(--weight-regular);
  color: var(--color-text-primary);
  line-height: 1.5;
  margin-top: -4px;
}


/* ============================================================
   SEÇÃO: SUAS TRILHAS
   ============================================================ */

.trails-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.section-label {
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}



/* ============================================================
   NAVEGAÇÃO INFERIOR
   ============================================================ */

.bottom-nav {
  flex-shrink: 0;
  display: flex;
  /* Sem space-around: cada item ocupa exatamente 1/N da largura via flex:1 abaixo.
     Distribuição matematicamente simétrica mesmo com 4, 5 ou 6 itens. */
  align-items: stretch;
  padding: var(--space-8) var(--space-8) max(20px, env(safe-area-inset-bottom));
  padding-left: max(var(--space-8), env(safe-area-inset-left));
  padding-right: max(var(--space-8), env(safe-area-inset-right));
  background-color: #ffffff;
  border-top: 1px solid rgba(236, 232, 247, 0.5);
  position: relative;
  z-index: 10;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  /* Cada item ocupa 1/N da largura. min-width:0 evita transbordar com texto longo. */
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding: 0 4px;
  background: none;
  border: none;
  color: var(--color-text-tertiary);
  border-radius: var(--radius-btn);
  transition: color 0.15s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.nav-item > span {
  display: none;
}

.nav-item svg {
  width: 30px;
  height: 30px;
  display: block;
  flex: 0 0 auto;
  overflow: visible;
}

.nav-item svg [stroke] {
  stroke-width: 2.45;
}

.nav-item svg .nav-fill {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.nav-item.active svg [stroke] {
  stroke-width: 2.7;
}

.nav-item.active svg .nav-fill {
  opacity: 0.16;
}

.nav-item:active {
  transform: scale(0.92);
}

.nav-item.active {
  color: #7C3AED;
}

.nav-item:hover {
  color: var(--color-text-secondary);
}

.nav-item.active:hover {
  color: #5B21B6;
}


/* ============================================================
   TELA: DETALHE DA TRILHA
   ============================================================ */

.trail-header {
  flex-shrink: 0;
  padding: max(var(--space-24), calc(env(safe-area-inset-top) + 12px)) var(--space-24) var(--space-8);
  padding-left: max(var(--space-24), env(safe-area-inset-left));
  padding-right: max(var(--space-24), env(safe-area-inset-right));
}

.btn-back {
  background: #F4F1E1;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  color: #1F1B3D;
  cursor: pointer;
  margin-left: -8px;
  transition: all 0.2s ease;
}

.btn-back:hover {
  background-color: var(--color-surface-soft);
}

.btn-back:active {
  background-color: var(--color-surface-hover);
}

.trail-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  -webkit-overflow-scrolling: touch;
  background-color: var(--color-bg-primary);
}

.trail-content::-webkit-scrollbar { display: none; }
.trail-content { scrollbar-width: none; }

.trail-hero-title {
  font-size: 26px;
  font-weight: 800;
  color: #1F1B3D;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.trail-hero-desc {
  font-size: 14px;
  font-weight: 500;
  color: rgba(31, 27, 61, 0.7);
  line-height: 1.5;
  margin-top: 4px;
}

.trail-progress-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.trail-bar {
  height: 8px;
  background-color: var(--color-surface-soft);
}

.trail-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.trail-progress-count {
  font-size: 14px;
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
}

.trail-progress-time {
  font-size: 13px;
  font-weight: var(--weight-regular);
  color: var(--color-text-secondary);
}

.lessons-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.lesson-card {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  background-color: var(--color-surface);
  border-radius: var(--radius-card-sm);
  padding: var(--space-16);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  border: 1px solid var(--color-border);
}

.lesson-card:active {
  transform: scale(0.97);
}

.lesson-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lesson-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.lesson-meta {
  font-size: 12px;
  font-weight: var(--weight-regular);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.lesson-tag {
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.lesson-card-name {
  font-size: 14px;
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  line-height: 1.35;
}

.lesson-done {
  background-color: var(--color-surface);
}

.lesson-current {
  background-color: var(--color-primary-soft);
  border: 2px solid var(--color-primary);
}

.lesson-current:hover { opacity: 0.9; }
.lesson-current:active { opacity: 0.8; }

.lesson-arrow {
  flex-shrink: 0;
  color: var(--color-primary);
}

.lesson-locked {
  background-color: var(--color-surface);
  opacity: 0.55;
}

.lesson-locked .lesson-meta,
.lesson-locked .lesson-card-name {
  color: var(--color-text-tertiary);
}


/* ============================================================
   TELA: AULA
   ============================================================ */

.lesson-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: max(var(--space-16), calc(env(safe-area-inset-top) + 8px)) var(--space-24) var(--space-16);
  padding-left: max(var(--space-24), env(safe-area-inset-left));
  padding-right: max(var(--space-24), env(safe-area-inset-right));
  border-bottom: 1px solid var(--color-border);
}

.lesson-header .btn-back { flex-shrink: 0; }

.lesson-header-category {
  flex: 1;
  text-align: center;
  font-size: 14px;
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
}

.lesson-counter {
  flex-shrink: 0;
  background-color: var(--color-primary-soft);
  color: var(--color-primary-deep);
  padding: 5px 12px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
}

.lesson-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-16) var(--space-24) var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  -webkit-overflow-scrolling: touch;
}

.lesson-content::-webkit-scrollbar { display: none; }
.lesson-content { scrollbar-width: none; }

.lesson-intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.lesson-title {
  font-size: 26px;
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.lesson-meta-info {
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
}

.lesson-body {
  font-size: 15px;
  font-weight: var(--weight-regular);
  color: var(--color-text-primary);
  line-height: 1.65;
}

.lesson-italic {
  font-style: italic;
  color: var(--color-text-secondary);
}

.lesson-callout {
  background-color: var(--color-primary-soft);
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: var(--radius-card-sm);
  padding: var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.lesson-callout-heading {
  font-size: 15px;
  font-weight: var(--weight-bold);
  color: var(--color-primary-deep);
}

.lesson-section-heading {
  font-size: 18px;
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.lesson-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding-left: var(--space-16);
  margin-top: -4px;
}

.lesson-list li {
  font-size: 15px;
  font-weight: var(--weight-regular);
  color: var(--color-text-primary);
  line-height: 1.65;
}

.lesson-list li::marker {
  color: var(--color-primary);
}

.lesson-list li strong {
  font-weight: var(--weight-bold);
  color: var(--color-primary-deep);
}

.lesson-highlight {
  background: linear-gradient(135deg, var(--color-primary-soft) 0%, #DDD6FE 100%);
  border-radius: var(--radius-card-sm);
  padding: var(--space-20) var(--space-24);
  text-align: center;
}

.lesson-highlight p {
  font-size: 15px;
  font-weight: var(--weight-medium);
  color: var(--color-primary-deep);
  line-height: 1.55;
}

.lesson-reflection {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card-sm);
  padding: var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  box-shadow: var(--shadow-sm);
}

.lesson-reflection-label {
  font-size: 14px;
  font-weight: var(--weight-bold);
  color: var(--color-primary);
}

.lesson-reflection-question {
  font-size: 14px;
  font-weight: var(--weight-regular);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.lesson-reflection-input {
  font-family: var(--font);
  font-size: 14px;
  font-weight: var(--weight-regular);
  color: var(--color-text-primary);
  background-color: var(--color-bg-secondary);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-btn);
  padding: var(--space-12) var(--space-16);
  width: 100%;
  resize: none;
  outline: none;
  line-height: 1.5;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.lesson-reflection-input::placeholder {
  color: var(--color-text-tertiary);
}

.lesson-reflection-input:focus {
  border-color: var(--color-primary);
  background-color: #fff;
}

.lesson-footer {
  flex-shrink: 0;
  padding: var(--space-16) var(--space-24) var(--space-24);
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
}


/* ============================================================
   TELA: EXERCÍCIOS
   ============================================================ */

.hidden { display: none !important; }

.ex-header {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-16) var(--space-24) var(--space-12);
}

.ex-header-top {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.ex-progress-bar {
  flex: 1;
  height: 6px;
  background-color: var(--color-surface-soft);
  border-radius: 100px;
  overflow: hidden;
}

.ex-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  border-radius: 100px;
  transition: width 0.4s ease;
}

.ex-close-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  color: var(--color-text-tertiary);
  cursor: pointer;
  border-radius: var(--radius-btn);
  transition: color 0.15s ease;
}

.ex-close-btn:hover { color: var(--color-text-secondary); }

.ex-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-24) var(--space-24) var(--space-8);
  -webkit-overflow-scrolling: touch;
}

.ex-content::-webkit-scrollbar { display: none; }
.ex-content { scrollbar-width: none; }

.ex-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.ex-question {
  font-size: 22px;
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.ex-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-top: var(--space-8);
}

.option-btn {
  width: 100%;
  padding: 18px var(--space-16);
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-card-sm);
  font-family: var(--font);
  font-size: 16px;
  font-weight: var(--weight-medium);
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 0 var(--color-border-strong);
}

.option-btn:hover:not(:disabled) {
  border-color: var(--color-primary-light);
  background-color: var(--color-primary-soft);
}

.option-btn.selected {
  background-color: var(--color-primary-soft);
  border: 2.5px solid var(--color-primary);
  color: var(--color-primary-deep);
  font-weight: var(--weight-bold);
}

.option-btn.confirmed-correct {
  background-color: #D1FAE5;
  border-color: var(--color-success);
  color: #065F46;
  cursor: default;
  font-weight: var(--weight-bold);
}

.option-btn.confirmed-wrong {
  background-color: #FEE2E2;
  border-color: var(--color-error);
  color: #991B1B;
  cursor: default;
  font-weight: var(--weight-bold);
}

.option-btn.disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

.ex-footer { flex-shrink: 0; }

.ex-confirm-wrap {
  padding: var(--space-16) var(--space-24) var(--space-24);
}

.ex-feedback {
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-24);
  min-height: 200px;
}

.ex-feedback:not(.hidden) { display: flex; }

.ex-feedback.correct {
  background-color: #ECFDF5;
  border-top: 2px solid var(--color-success);
}

.ex-feedback.wrong {
  background-color: #FEF2F2;
  border-top: 2px solid var(--color-error);
}

.feedback-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.feedback-title {
  font-size: 20px;
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.ex-feedback.correct .feedback-title { color: #065F46; }
.ex-feedback.wrong .feedback-title   { color: #991B1B; }

.feedback-explanation {
  font-size: 14px;
  font-weight: var(--weight-regular);
  color: var(--color-text-primary);
  line-height: 1.55;
}

.feedback-btn { flex-shrink: 0; }


/* ============================================================
   CARD 3: CLASSIFICAR
   ============================================================ */

.classify-source {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.classify-chip {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-16);
  background-color: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-card-sm);
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 13px;
  font-weight: var(--weight-regular);
  color: var(--color-text-primary);
  line-height: 1.45;
  box-shadow: var(--shadow-sm);
}

.classify-chip:hover {
  border-color: var(--color-primary-light);
  background-color: var(--color-primary-soft);
}

.classify-chip.selected {
  background-color: var(--color-primary-soft);
  border: 2px solid var(--color-primary);
}

.classify-chip.placed {
  display: none;
}

.drag-handle {
  flex-shrink: 0;
  color: var(--color-text-tertiary);
  margin-top: 3px;
}

.classify-zones {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.classify-zone {
  border: 1.5px dashed var(--color-border-strong);
  border-radius: var(--radius-card-sm);
  padding: var(--space-12) var(--space-16);
  min-height: 56px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  background-color: var(--color-bg-secondary);
}

.classify-zone.droppable {
  border-color: var(--color-primary);
  background-color: var(--color-primary-soft);
}

.classify-zone.filled {
  background-color: var(--color-primary-soft);
  border: 1.5px solid var(--color-primary-light);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  cursor: default;
}

.zone-label {
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.zone-profile-text {
  font-size: 13px;
  font-weight: var(--weight-regular);
  color: var(--color-text-primary);
  line-height: 1.4;
}

.zone-confirmed-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  width: 100%;
}

.zone-result-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: var(--weight-bold);
}

.zone-result-icon.correct {
  background-color: var(--color-success);
  color: #fff;
}

.zone-result-icon.wrong {
  background-color: var(--color-error);
  color: #fff;
}

.zone-result-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.zone-result-label {
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.zone-result-profile {
  font-size: 13px;
  color: var(--color-text-primary);
  line-height: 1.4;
}


/* ============================================================
   CARD 4: RECOMPENSA
   ============================================================ */

.app-frame.card-4-active {
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-deep) 100%);
}

.app-frame.card-4-active .ex-header,
.app-frame.card-4-active .ex-footer {
  display: none;
}

#card-4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-24);
  flex: 1;
  min-height: 100%;
  padding: var(--space-32) var(--space-24);
}

.reward-label {
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.12em;
}

.reward-xp {
  background-color: #fff;
  color: var(--color-primary-deep);
  padding: 14px 40px;
  border-radius: var(--radius-btn);
  font-size: 22px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.reward-unlocked {
  font-size: 15px;
  font-weight: var(--weight-regular);
  color: rgba(255, 255, 255, 0.85);
}

.reward-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
}

.reward-badge-icon {
  width: 88px;
  height: 88px;
  background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.4);
}

.reward-badge-icon svg path { fill: #1F1B3D; }

.reward-badge-name {
  font-size: 14px;
  font-weight: var(--weight-bold);
  color: #fff;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.reward-message {
  font-size: 17px;
  font-weight: var(--weight-medium);
  color: #fff;
  line-height: 1.4;
  max-width: 280px;
}

.reward-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  width: 100%;
  margin-top: var(--space-8);
}

.reward-btn {
  display: block;
  width: 100%;
  padding: 15px var(--space-16);
  background-color: #fff;
  color: var(--color-primary-deep);
  border: none;
  border-radius: var(--radius-btn);
  font-family: var(--font);
  font-size: 15px;
  font-weight: var(--weight-bold);
  text-align: center;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.reward-link {
  font-size: 14px;
  font-weight: var(--weight-medium);
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}


/* ============================================================
   MODAL DE PAUSA
   ============================================================ */

.pause-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(31, 27, 61, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-32) var(--space-24);
  z-index: 200;
}

@media (min-width: 500px) {
  .pause-overlay {
    border-radius: var(--radius-app);
  }
}

.pause-card {
  background-color: var(--color-surface);
  border-radius: var(--radius-card-main);
  padding: var(--space-24);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  box-shadow: var(--shadow-lift);
}

.pause-title {
  font-size: 22px;
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.pause-subtitle {
  font-size: 14px;
  font-weight: var(--weight-regular);
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-top: -8px;
}

.pause-exit {
  background: none;
  border: none;
  font-family: var(--font);
  font-size: 14px;
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  text-align: center;
  padding: var(--space-8) 0;
  transition: color 0.15s ease;
}

.pause-exit:hover {
  color: var(--color-text-primary);
}


/* Confetti */
.confetti-particle {
  position: fixed;
  width: 8px;
  height: 16px;
  z-index: 9999;
  pointer-events: none;
  border-radius: 2px;
}


/* ============================================================
   DASHBOARD (HOME)
   ============================================================ */

/* Continue Card */
.continue-card {
  background:
    linear-gradient(180deg, rgba(31, 27, 61, 0.1) 0%, rgba(31, 27, 61, 0.38) 46%, rgba(31, 27, 61, 0.82) 100%),
    linear-gradient(135deg, rgba(199, 101, 58, 0.38), rgba(124, 58, 237, 0.28)),
    url("assets/home-aprender-bg.webp");
  background-size: cover;
  background-position: center 42%;
  border-radius: 16px;
  padding: 24px;
  color: #fff;
  box-shadow: 0 12px 28px rgba(31, 27, 61, 0.18);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 224px;
  justify-content: flex-end;
  overflow: hidden;
}

.continue-card .label {
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 4px;
}

.card-breadcrumb {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.82);
}

.card-title {
  font-size: 22px;
  font-weight: 800;
  margin-top: 4px;
  margin-bottom: 12px;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 2px 14px rgba(31, 27, 61, 0.34);
  overflow-wrap: anywhere;
}

.continue-card .card-breadcrumb,
.continue-card .card-title,
.continue-card .progress-label {
  max-width: 292px;
}

.continue-card .card-title {
  white-space: normal;
}

.continue-card .progress-bar-wrap {
  background: rgba(255, 255, 255, 0.24);
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 8px;
}

.continue-card .progress-bar-fill {
  background: #fff;
  height: 100%;
  border-radius: 3px;
}

.progress-label {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 16px;
}

.continue-card .btn-primary {
  background: rgba(36, 36, 36, 0.92);
  color: #FFF;
  box-shadow: none;
  border-radius: 10px;
  padding: 12px;
  font-size: 14px;
}

/* Thought Block */
.thought-block {
  background: #FDF9E3;
  border-left: 5px solid #D9CB30;
  padding: 16px 20px;
  border-radius: 0 12px 12px 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.thought-quote {
  font-size: 14px;
  font-style: italic;
  color: #4A4A4A;
  margin-top: 8px;
  line-height: 1.4;
}

/* Challenge Card */
.challenge-card {
  background: #F7F5EC;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}

.challenge-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.xp-pill {
  background: #242424;
  color: #D9CB30;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 12px;
}

.challenge-text {
  font-size: 15px;
  font-weight: 700;
  color: #1F1B3D;
  margin-bottom: 16px;
  line-height: 1.3;
}

.btn-outline {
  background: #FFF;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  padding: 12px;
  width: 100%;
  font-weight: 700;
  color: #1F1B3D;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

/* Trails Section */
.trails-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Dashboard Header adjustments */
.home-header {
  padding: 16px 20px;
}

.home-header .streak-pill {
  background: #242424;
  color: #CAC426;
  box-shadow: none;
  font-weight: 600;
}


/* ============================================================
   TELAS: TRILHAS / DESAFIOS / PERFIL — header de página
   ============================================================ */

.page-header {
  padding: max(32px, calc(env(safe-area-inset-top) + 16px)) 20px 8px;
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.page-header .label {
  margin-bottom: 4px;
}

.page-title {
  font-size: 28px;
  font-weight: 800;
  color: #1F1B3D;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.page-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  -webkit-overflow-scrolling: touch;
  background-color: var(--color-bg-primary);
}
/* Override flex display quando o atributo hidden esta presente
   (necessario pra tabs como Desafios > Pratica/Planner) */
.page-content[hidden] { display: none !important; }
.page-content::-webkit-scrollbar { display: none; }
.page-content { scrollbar-width: none; }


/* ============================================================
   TELA: DESAFIOS — tabs (Prática + Planner)
   ============================================================ */

.desafios-tabs {
  display: flex;
  gap: 6px;
  margin: 0 16px 12px;
  padding: 4px;
  background: rgba(31, 27, 61, 0.05);
  border-radius: 14px;
}
.desafios-tab {
  flex: 1 1 0;
  border: 0;
  background: transparent;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text-secondary);
  border-radius: 10px;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.desafios-tab.active {
  background: #FFF;
  color: var(--color-text-primary);
  box-shadow: 0 1px 2px rgba(31, 27, 61, 0.06);
}
.desafios-tab:active { transform: scale(0.98); }

/* Planner */
.planner-pane { padding-top: 4px; }
.planner-card {
  background: #FFF;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 320px;
}
.planner-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.planner-head .label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.planner-status {
  font-size: 11px;
  color: var(--color-primary-deep);
  background: var(--color-primary-soft);
  padding: 3px 9px;
  border-radius: 100px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.planner-textarea {
  width: 100%;
  flex: 1 1 auto;
  min-height: 280px;
  resize: vertical;
  border: 1px solid rgba(31, 27, 61, 0.08);
  border-radius: 12px;
  background: var(--color-bg-primary);
  padding: 14px;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text-primary);
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
  -webkit-user-select: text;
  user-select: text;
}
.planner-textarea:focus {
  border-color: var(--color-primary-light);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.10);
}
.planner-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.planner-counter {
  font-size: 11px;
  color: var(--color-text-tertiary);
}
.planner-clear {
  background: transparent;
  border: 0;
  color: var(--color-error);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
}
.planner-clear:active { background: rgba(239, 68, 68, 0.08); }

/* ============================================================
   TELA: DESAFIOS
   ============================================================ */

.desafio-card {
  background: #FFF;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.desafio-card .desafio-top {
  display: flex;
  justify-content: flex-end;
}

.desafio-card .xp-pill {
  background: #242424;
  color: #D9CB30;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 100px;
}

.desafio-text {
  font-size: 19px;
  font-weight: 700;
  color: #1F1B3D;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.desafio-link-trilha {
  font-size: 13px;
  color: rgba(31, 27, 61, 0.55);
  line-height: 1.4;
  margin-bottom: 4px;
}

.btn-dark {
  display: block;
  width: 100%;
  padding: 14px 16px;
  background: #242424;
  color: #FFF;
  border: none;
  border-radius: 10px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s ease;
}
.btn-dark:hover:not(:disabled) { background: #000; }

.section-heading {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(31, 27, 61, 0.5);
  margin-top: 8px;
  margin-bottom: -8px;
}

.desafio-done-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.desafio-done-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #F3F0E2;
  border-radius: 12px;
  padding: 14px 16px;
}

.desafio-check {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #D9CB30;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1F1B3D;
}

.desafio-done-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.desafio-done-when {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(31, 27, 61, 0.5);
}

.desafio-done-text {
  font-size: 14px;
  font-weight: 500;
  color: #1F1B3D;
  line-height: 1.3;
}


/* ============================================================
   TELA: TRILHAS — deck de cards sobrepostos
   Modelo: todos os cards têm o mesmo tamanho real e ocupam a
   mesma posição. O que muda é translateY + scale + z-index
   + sombra conforme a posição na pilha (--pos: 0 = frente).
   Cards atrás aparecem só pela tira inferior (peek).
   ============================================================ */

.trilhas-page {
  padding-top: 8px;
  padding-bottom: 0;
  gap: 14px;
  overflow: hidden;
}

/* Pilares (Teoria / Performance interna) — visual da referência:
   sem container de fundo, cada um é um pill independente */
/* Segmented control estilo iOS — pill dentro de uma trilha cinza,
   com indicador deslizante animado */
.trilhas-pillars {
  position: relative;
  display: flex;
  align-self: stretch;
  flex-shrink: 0;
  padding: 4px;
  margin: 0 2px;
  background: rgba(31, 27, 61, 0.06);
  border-radius: 100px;
  isolation: isolate;
}

/* Indicador animado (pill branco que desliza) */
.trilhas-pillars::before {
  content: '';
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  background: #fff;
  border-radius: 100px;
  box-shadow: 0 2px 8px rgba(31, 27, 61, 0.08);
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  z-index: 0;
}
.trilhas-pillars[data-active="performance"]::before {
  transform: translateX(100%);
}

.trilhas-pillar {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 44px;                 /* Apple HIG: alvo de toque ≥ 44px */
  border: none;
  background: transparent;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(31, 27, 61, 0.5);
  padding: 0 12px;                  /* altura dada pelo min-height, padding horizontal só */
  border-radius: 100px;
  cursor: pointer;
  transition: color 0.2s ease;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.trilhas-pillar.active {
  color: var(--color-primary-deep);
}

.trilhas-pillar:not(.active):active {
  color: var(--color-text-secondary);
}

/* ─── Container do deck ─── */
.trilhas-deck-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
}

/* NOVA ARQUITETURA — hero em destaque + strip horizontal de cards pequenos.
   O hero ocupa ~58% da altura disponível, a strip ~38%. Gap de 12px entre eles.
   A strip rola horizontalmente quando há mais cards que cabem na tela. */
.trilhas-deck {
  position: absolute;
  inset: 0 0 16px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  touch-action: pan-y;
}

.trilhas-hero {
  position: relative;
  flex: 0 0 58%;
  min-height: 0;
  touch-action: none;          /* drag físico controlado pelo JS */
}

.trilhas-strip {
  position: relative;
  flex: 0 0 auto;
  height: 34%;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 2px 6px;        /* respiro pra sombra */
}
.trilhas-strip::-webkit-scrollbar { display: none; }

/* ─── Card base ─── */
.trilha-card {
  position: relative;
  display: block;
  background-color: var(--color-surface-soft);
  color: var(--color-text-primary);
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  will-change: transform, opacity;
  -webkit-tap-highlight-color: transparent;

  box-shadow:
    0 6px 14px rgba(31, 27, 61, 0.05),
    0 1px 3px rgba(31, 27, 61, 0.03);

  transition:
    box-shadow 0.42s cubic-bezier(0.32, 0.72, 0, 1),
    transform 0.18s cubic-bezier(0.32, 0.72, 0, 1);
}

/* ─── Card no slot HERO ─── */
.trilhas-hero .trilha-card {
  position: absolute;
  inset: 0;
  box-shadow:
    0 22px 36px rgba(124, 58, 237, 0.18),
    0 4px 10px rgba(31, 27, 61, 0.05);
}
.trilhas-hero .trilha-card.locked {
  box-shadow:
    0 18px 30px rgba(31, 27, 61, 0.10),
    0 4px 10px rgba(31, 27, 61, 0.04);
}

/* ─── Card no slot STRIP (pequeno) ─── */
.trilhas-strip .trilha-card {
  flex: 0 0 calc((100% - 20px) / 3);  /* 3 cards visíveis com 2 gaps de 10px */
  height: 100%;
  scroll-snap-align: start;
  border-radius: 16px;
}
.trilhas-strip .trilha-card:active {
  transform: scale(0.97);
}
/* Quando há apenas 1 ou 2 cards na strip, eles esticam pra preencher */
.trilhas-strip:has(.trilha-card:nth-child(2):last-child) .trilha-card {
  flex: 1 1 0;        /* 2 cards → metade cada */
}
.trilhas-strip:has(.trilha-card:only-child) .trilha-card {
  flex: 1 1 100%;     /* 1 card → preenche tudo */
}

/* ─── Estado durante o swap (FLIP animation) ─── */
.trilha-card.is-swapping {
  z-index: 50;
  transition:
    transform 0.48s cubic-bezier(0.32, 0.72, 0, 1),
    border-radius 0.48s cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow 0.48s cubic-bezier(0.32, 0.72, 0, 1);
}

/* ─── DRAG (gesto físico no hero) ─── */
.trilhas-hero.is-dragging .trilha-card {
  transition: none;            /* drag é 1:1 com o dedo, sem easing */
}
.trilhas-hero.is-snapping .trilha-card {
  transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1),
              opacity 0.32s ease;
}

/* ─── LOCKED — versão grayscale + opacity ─── */
.trilha-card.locked .trilha-card-photo {
  filter: grayscale(1) brightness(0.85);
  opacity: 0.78;
}
.trilha-card.locked {
  opacity: 0.92;
}
.trilhas-hero .trilha-card.locked .trilha-card-photo::after {
  background:
    linear-gradient(180deg, rgba(31, 27, 61, 0.18) 0%, rgba(31, 27, 61, 0.32) 42%, rgba(31, 27, 61, 0.75) 100%),
    linear-gradient(135deg, rgba(31, 27, 61, 0.15), rgba(31, 27, 61, 0.1));
}

.trilha-card-photo {
  position: absolute;
  inset: 0;
  background-image: var(--trilha-card-image);
  background-position: center;
  background-size: cover;
  transform: scale(1.02);
  transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1);
}

.trilha-card-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(31, 27, 61, 0.08) 0%, rgba(31, 27, 61, 0.22) 42%, rgba(31, 27, 61, 0.7) 100%),
    linear-gradient(135deg, rgba(124, 58, 237, 0.34), rgba(245, 158, 11, 0.2));
}

.trilhas-hero .trilha-card-photo {
  transform: scale(1);
}

/* ─── HERO (conteúdo do card no slot grande) ─── */
.trilha-card-hero {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 28px;
  gap: 22px;
  opacity: 0;
  transition: opacity 0.32s ease;
  pointer-events: none;
}

.trilhas-hero .trilha-card .trilha-card-hero {
  opacity: 1;
  transition-delay: 0.08s;
}

.trilha-card-icon {
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  color: var(--color-primary-deep);
}

.trilha-card.has-photo .trilha-card-icon {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.trilha-card-icon svg {
  width: 38px;
  height: 38px;
}

.trilha-card.is-front.locked .trilha-card-icon {
  background: rgba(31, 27, 61, 0.06);
  color: rgba(31, 27, 61, 0.55);
}

.trilha-card.has-photo.is-front.locked .trilha-card-icon {
  background: rgba(31, 27, 61, 0.2);
  color: rgba(255, 255, 255, 0.88);
}

.trilha-card-label {
  max-width: 86%;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-primary-deep);
  line-height: 1.08;
  text-align: center;
  overflow-wrap: anywhere;
}

.trilha-card.has-photo .trilha-card-label {
  color: #fff;
  text-shadow: 0 2px 14px rgba(31, 27, 61, 0.35);
}

.trilha-card.is-front.locked .trilha-card-label {
  color: rgba(31, 27, 61, 0.62);
}

.trilha-card.has-photo.is-front.locked .trilha-card-label {
  color: #fff;
}

/* Divisor/progresso minimalista logo abaixo do label */
.trilha-card-divider {
  width: 56px;
  height: 5px;
  border-radius: 100px;
  background: rgba(31, 27, 61, 0.12);
  overflow: hidden;
}

.trilha-card.has-photo .trilha-card-divider {
  background: rgba(255, 255, 255, 0.24);
}

.trilha-card-divider > span {
  display: block;
  height: 100%;
  background: var(--color-primary-deep);
  border-radius: 100px;
}

.trilha-card.has-photo .trilha-card-divider > span {
  background: #fff;
}

.trilha-card.is-front.locked .trilha-card-divider > span {
  background: rgba(31, 27, 61, 0.5);
}

.trilha-card.has-photo.is-front.locked .trilha-card-divider > span {
  background: rgba(255, 255, 255, 0.72);
}

/* ─── PEEK (conteúdo dos cards da STRIP — versão compacta).
   Aparece apenas em cards dentro de .trilhas-strip. */
.trilha-card-peek {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 12px 12px 14px;
  opacity: 0;
  transition: opacity 0.28s ease;
  pointer-events: none;
}

.trilhas-strip .trilha-card .trilha-card-peek {
  opacity: 1;
}
.trilhas-hero .trilha-card .trilha-card-peek {
  opacity: 0;
}

.trilha-card-peek-label {
  max-width: 100%;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(31, 27, 61, 0.62);
  line-height: 1.18;
  text-align: center;
  overflow-wrap: anywhere;
}

.trilha-card.has-photo .trilha-card-peek-label {
  color: #fff;
  text-shadow: 0 1px 10px rgba(31, 27, 61, 0.45);
}

.trilha-card-peek-lock {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(31, 27, 61, 0.08);
  color: rgba(31, 27, 61, 0.55);
}

.trilha-card.has-photo .trilha-card-peek-lock {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.trilha-card-peek-lock svg { width: 11px; height: 11px; }

/* Tag editorial (NOVO, EM BREVE) no canto superior esquerdo dos cards pequenos */
.trilha-card-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 8px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(124, 58, 237, 0.95);
  border-radius: 100px;
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.3);
}
.trilha-card-tag.is-soon {
  background: rgba(31, 27, 61, 0.55);
  box-shadow: none;
}
.trilhas-hero .trilha-card .trilha-card-tag {
  top: 14px;
  left: 14px;
  padding: 5px 12px;
  font-size: 11px;
}


/* ============================================================
   TELA: PERFIL
   ============================================================ */

.perfil-card {
  background: #FFF;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}

.perfil-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #C4B5FD 0%, #7C3AED 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  box-shadow: 0 6px 16px rgba(124,58,237,0.25);
}

.perfil-name {
  font-size: 22px;
  font-weight: 800;
  color: #1F1B3D;
  letter-spacing: -0.01em;
}

.perfil-sub {
  font-size: 13px;
  color: rgba(31, 27, 61, 0.6);
}

.perfil-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.perfil-stat {
  background: #F3F0E2;
  border-radius: 14px;
  padding: 14px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.perfil-stat-val {
  font-size: 20px;
  font-weight: 800;
  color: #1F1B3D;
  letter-spacing: -0.01em;
}

.perfil-stat-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(31, 27, 61, 0.55);
}

.perfil-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.perfil-item {
  background: #FFF;
  border: 1px solid #E8E4D0;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: background 0.15s ease;
  font-family: var(--font);
  width: 100%;
  text-align: left;
}

.perfil-item:hover { background: #F7F5EC; }

.perfil-item-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #F3F0E2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1F1B3D;
  flex-shrink: 0;
}

.perfil-item-text {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: #1F1B3D;
}

.perfil-item-arrow {
  color: rgba(31, 27, 61, 0.4);
  flex-shrink: 0;
}

/* ============================================================
   CALENDÁRIO STREAK (HOME)
   ============================================================ */

.daily-streak-calendar {
  background-color: var(--color-surface);
  border-radius: var(--radius-card-main);
  padding: 20px 16px;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-8);
}

.calendar-days {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cal-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.cal-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-tertiary);
}

.cal-bubble {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--color-bg-secondary);
  border: 2px solid var(--color-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  font-size: 13px;
  font-weight: 800;
  color: var(--color-text-tertiary);
}

.cal-day.done .cal-name { 
  color: var(--color-primary); 
}

.cal-day.done .cal-bubble {
  background-color: var(--color-primary-soft);
  border-color: var(--color-primary);
  color: var(--color-primary);
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/200.0%2Fsvg'%3E%3Cpath d='M4 8.5L6.5 11L12 5' stroke='%237C3AED' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.cal-day.active .cal-name { 
  color: var(--color-text-primary); 
}

/* ============================================================
   TELA DE RECOMPENSA (AUTORAL)
   ============================================================ */
.reward-overlay {
  position: absolute;
  inset: 0;
  background-color: var(--color-bg-primary);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 60px 24px 32px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.reward-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.reward-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 24px;
  animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.reward-icon-wrap {
  width: 96px;
  height: 96px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-deep) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lift);
  animation: pulse-glow 2s infinite;
}

.reward-icon-wrap svg {
  color: #fff;
  width: 48px;
  height: 48px;
}

.reward-title {
  font-size: 32px;
  font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
}

.reward-xp {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-celebration);
  background: rgba(245, 158, 11, 0.1);
  padding: 8px 16px;
  border-radius: 100px;
}

/* Bia no reward — 3 linhas: o que aprendeu, o que aplicar, o que vem. */
.reward-bia-msg {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 340px;
  margin: 14px auto 0;
  padding: 12px 14px;
  background: rgba(124, 58, 237, 0.07);
  border: 1px solid rgba(124, 58, 237, 0.14);
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-text-secondary);
  text-align: left;
}
.reward-bia-msg.hidden { display: none; }
.reward-bia-line {
  display: block;
}
.reward-bia-line:first-child {
  color: var(--color-text-primary);
  font-weight: 600;
}

.reward-bottom {
  width: 100%;
}

@keyframes slideUp {
  0% { transform: translateY(40px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes pulse-glow {
  0% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.4); }
  70% { box-shadow: 0 0 0 20px rgba(124, 58, 237, 0); }
  100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); }
}

/* Animação proprietária Bia */
@keyframes alas-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.02); }
}

.alas-anim {
  animation: alas-float 3.5s ease-in-out infinite;
  display: inline-block;
}


/* ============================================================
   BIA — bloco contextual (aula, exercícios, perfil)
   ============================================================ */

.bia-note {
  background: var(--color-primary-soft);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-left: 3px solid var(--color-primary);
}

.bia-note > span {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary-deep);
}

.bia-note > p {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  line-height: 1.5;
}

/* Variação compacta usada na home */
.bia-note.bia-home {
  background: var(--color-primary-soft);
  border-left-color: var(--color-primary);
}

/* Bia no perfil — destaque mais forte */
.bia-summary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-deep) 100%);
  color: #FFF;
  border-radius: 16px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 6px 18px rgba(124,58,237,0.18);
}

.bia-summary > span {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.7);
}

.bia-summary > p {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  color: #FFF;
}

/* ============================================================
   BADGES (perfil)
   ============================================================ */

.badge-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.badge {
  background: #FFF;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  transition: opacity 0.2s ease;
}

.badge-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}

.badge.unlocked .badge-icon {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-deep) 100%);
  color: #FFF;
  box-shadow: 0 4px 10px rgba(124,58,237,0.25);
}

.badge.locked {
  opacity: 0.55;
}

.badge.locked .badge-icon {
  background: var(--color-bg-secondary);
  color: var(--color-text-tertiary);
}

.badge-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.2;
}

.badge-desc {
  font-size: 11px;
  color: var(--color-text-secondary);
  line-height: 1.3;
}


/* ============================================================
   INSIGHT INPUT (desafio)
   ============================================================ */

.insight-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.insight-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.insight-hint {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: -2px;
}

.insight-input {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-primary);
  background: #FFF;
  border: 1.5px solid var(--color-border);
  border-radius: 12px;
  padding: 12px 14px;
  width: 100%;
  resize: none;
  outline: none;
  line-height: 1.5;
  transition: border-color 0.15s ease;
}

.insight-input::placeholder {
  color: var(--color-text-tertiary);
}

.insight-input:focus {
  border-color: var(--color-primary);
}

.insight-counter {
  font-size: 11px;
  color: var(--color-text-tertiary);
  text-align: right;
  font-weight: 500;
}

.insight-counter.valid {
  color: var(--color-success);
}

/* Insight no histórico */
.desafio-done-insight {
  background: rgba(255,255,255,0.6);
  border-radius: 8px;
  padding: 8px 10px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.4;
  font-style: italic;
}


/* ============================================================
   ESTADO VAZIO
   ============================================================ */

.empty-state {
  background: #FFF;
  border: 1px dashed var(--color-border-strong);
  border-radius: 14px;
  padding: 24px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.empty-state-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.empty-state-text {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}


/* ============================================================
   PERFIL — últimos insights (lista)
   ============================================================ */

.insight-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.insight-item {
  background: #FFF;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.insight-item-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.insight-item-when {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.insight-item-tag {
  font-size: 10px;
  color: var(--color-text-tertiary);
  font-weight: 500;
}

.insight-item-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
  line-height: 1.4;
}

.insight-item-quote {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.4;
  font-style: italic;
  border-left: 2px solid var(--color-primary-soft);
  padding-left: 10px;
  margin-top: 4px;
}


/* ============================================================
   TRILHA-COMPLETA banner
   ============================================================ */

.trilha-completa {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-deep) 100%);
  color: #FFF;
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(124,58,237,0.2);
  margin-top: 8px;
}

.trilha-completa h3 {
  font-size: 18px;
  font-weight: 800;
}

.trilha-completa p {
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  line-height: 1.5;
}


/* ============================================================
   XP TOAST
   ============================================================ */

.xp-toast {
  position: fixed;
  bottom: 88px;
  left: 50%;
  transform: translate(-50%, 16px);
  background: #242424;
  color: #D9CB30;
  font-weight: 700;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.25s ease;
  pointer-events: none;
}

@media (min-width: 500px) {
  /* Frame centrado: ancorar dentro do app-frame em vez do viewport */
  .xp-toast { bottom: calc(50% - 422px + 88px); }
}

.xp-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
  animation: xp-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes xp-pop {
  0% { transform: translate(-50%, 16px) scale(0.85); }
  60% { transform: translate(-50%, -2px) scale(1.05); }
  100% { transform: translate(-50%, 0) scale(1); }
}

.xp-toast-icon {
  display: inline-block;
}


/* ============================================================
   POS-AÇÃO: card que aparece após concluir desafio/aula
   ============================================================ */

.pos-acao {
  background: var(--color-primary-soft);
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: card-enter 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.pos-acao-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  line-height: 1.5;
}

.pos-acao-cta {
  display: block;
  text-align: center;
  text-decoration: none;
  background: var(--color-primary);
  color: #FFF;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 16px;
  border-radius: 10px;
  transition: background 0.15s ease, transform 0.08s ease;
}
.pos-acao-cta:hover { background: var(--color-primary-deep); }
.pos-acao-cta:active { transform: translateY(1px); }


/* ============================================================
   MICROINTERAÇÕES
   ============================================================ */

@keyframes card-enter {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

.continue-card,
.challenge-card,
.desafio-card,
.thought-block,
.bia-note,
.pos-acao,
.bia-summary {
  animation: card-enter 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Press feedback nos botões principais */
.btn-primary:active:not(:disabled),
.btn-outline:active:not(:disabled) {
  transform: translateY(1px);
}

/* Press visível em cards clicáveis */
.trilha-row:active:not(.locked),
.lesson-card:active,
.perfil-item:active {
  transform: scale(0.99);
}

/* Progresso animado quando muda */
.progress-bar-fill,
.trilha-row-progress > span {
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}


/* ============================================================
   BADGES — separação clara desbloqueadas / próximas
   ============================================================ */

.badge-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-secondary);
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  margin-top: 4px;
}

.badge.locked {
  opacity: 0.85; /* não tão apagado, mas claramente diferente */
  background: var(--color-bg-secondary);
  border-style: dashed;
}

.badge-progress {
  width: 100%;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.badge-progress-bar {
  height: 4px;
  background: var(--color-border);
  border-radius: 100px;
  overflow: hidden;
}
.badge-progress-bar > span {
  display: block;
  height: 100%;
  background: var(--color-primary-light);
  border-radius: 100px;
  transition: width 0.5s ease;
}

.badge-progress-text {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-primary-deep);
  text-transform: uppercase;
}


/* ============================================================
   TRILHAS — badge "Trilha atual" + descrição "Em breve"
   ============================================================ */

.trilha-atual-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary-deep);
  background: rgba(255,255,255,0.6);
  padding: 3px 8px;
  border-radius: 100px;
  margin-bottom: 6px;
  align-self: flex-start;
}

.trilha-row.active .trilha-row-meta-next {
  font-size: 12px;
  color: rgba(31, 27, 61, 0.8);
  font-weight: 600;
  margin-top: 2px;
}

.trilha-row.locked .trilha-row-meta {
  font-size: 12px;
  color: rgba(31, 27, 61, 0.45);
  line-height: 1.4;
}


/* ============================================================
   TRILHA-DETALHE — próxima aula com mais peso
   ============================================================ */

.lesson-current {
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.18);
}

.lesson-current .lesson-tag,
.lesson-current .lesson-card-name {
  color: #FFF;
}
.lesson-current .lesson-arrow {
  color: #FFF;
}

.lesson-locked {
  background: var(--color-surface);
  border-style: dashed;
  opacity: 0.75;
}

.lesson-locked .lesson-tag {
  color: var(--color-text-tertiary);
}
.lesson-locked .lesson-card-name {
  color: var(--color-text-secondary);
}


/* ============================================================
   PERFIL — config menos destacado
   ============================================================ */

.config-list .perfil-item {
  background: transparent;
  border: 1px solid var(--color-border);
}
.config-list .perfil-item-text {
  color: var(--color-text-secondary);
  font-weight: 500;
}
.config-list .perfil-item-icon {
  background: transparent;
  color: var(--color-text-tertiary);
}


/* ============================================================
   ONBOARDING — avatar simples da Bia
   ============================================================ */

.bia-avatar {
  width: 96px;
  height: 96px;
  margin-bottom: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-deep) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.02em;
  box-shadow: 0 12px 28px rgba(124, 58, 237, 0.28);
  position: relative;
}
.bia-avatar::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--color-success);
  border: 2.5px solid var(--color-bg-primary);
  border-radius: 50%;
  bottom: 4px;
  right: 4px;
}


/* ============================================================
   EXERCÍCIOS — microestado "1 de 3"
   ============================================================ */

.ex-step {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.option-btn {
  transition: all 0.15s ease, transform 0.08s ease;
}
.option-btn:active:not(:disabled) {
  transform: scale(0.98);
}

/* Bia explicando dentro do feedback de exercício */
.ex-feedback .bia-note {
  margin-top: 4px;
  background: rgba(255,255,255,0.5);
  border-left-color: var(--color-primary-deep);
}


/* ============================================================
   HOME — card secundário (quando o foco do dia é outro)
   ============================================================ */

.continue-card.secundario,
.challenge-card.secundario {
  background: var(--color-surface);
  box-shadow: none;
  border: 1px solid var(--color-border);
  opacity: 0.78;
}

.continue-card.secundario {
  background:
    linear-gradient(180deg, rgba(31, 27, 61, 0.18) 0%, rgba(31, 27, 61, 0.48) 48%, rgba(31, 27, 61, 0.86) 100%),
    linear-gradient(135deg, rgba(199, 101, 58, 0.28), rgba(124, 58, 237, 0.18)),
    url("assets/home-aprender-bg.webp");
  background-size: cover;
  background-position: center 42%;
  border-color: rgba(255, 255, 255, 0.26);
  opacity: 0.9;
}

.continue-card.secundario h2.card-title,
.continue-card.secundario .label,
.continue-card.secundario .card-breadcrumb,
.continue-card.secundario .progress-label {
  color: rgba(255, 255, 255, 0.86);
}

.continue-card.secundario .progress-bar-fill {
  background: rgba(255, 255, 255, 0.9);
}

.continue-card.secundario .btn-primary {
  background: rgba(255, 255, 255, 0.9);
  color: #1F1B3D;
  border: none;
  box-shadow: none;
  font-weight: 600;
}

.challenge-card.secundario .xp-pill {
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
}
.challenge-card.secundario .btn-outline {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text-secondary);
  font-weight: 600;
}

/* Estado completed inline (concluído visualmente no card) */
.challenge-card.feito .btn-outline {
  background: var(--color-success);
  color: #FFF;
  border-color: var(--color-success);
}


/* ============================================================
   AULA — blocos práticos (aplique-agora, checklist, resumo-bia)
   ============================================================ */

.aplique-agora {
  background: linear-gradient(135deg, #FDF9E3 0%, #F5EFC9 100%);
  border-left: 4px solid #D9CB30;
  border-radius: 0 14px 14px 0;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.aplique-agora-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6B5E00;
}

.aplique-agora p {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  line-height: 1.5;
}

/* Checklist — itens marcáveis dentro da aula */
.lesson-checklist {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lesson-checklist-title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-secondary);
  margin-bottom: 2px;
}

.checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  padding: 4px 0;
}

.checklist-item input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.checklist-box {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid var(--color-border-strong);
  background: #FFF;
  position: relative;
  margin-top: 1px;
  transition: all 0.15s ease;
}

.checklist-item input:checked + .checklist-box {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.checklist-item input:checked + .checklist-box::after {
  content: '';
  position: absolute;
  left: 4px; top: 1px;
  width: 6px; height: 11px;
  border: solid #FFF;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.checklist-text {
  flex: 1;
  font-size: 14px;
  color: var(--color-text-primary);
  line-height: 1.45;
  transition: color 0.15s ease, opacity 0.15s ease;
}

.checklist-item input:checked ~ .checklist-text {
  color: var(--color-text-secondary);
  text-decoration: line-through;
  opacity: 0.7;
}

/* Resumo da Bia (final da aula) */
.resumo-bia {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-deep) 100%);
  color: #FFF;
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.18);
}

.resumo-bia-tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}

.resumo-bia p {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: #FFF;
}


/* ============================================================
   EXERCÍCIO — animações de acerto/erro
   ============================================================ */

@keyframes ex-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

@keyframes ex-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.015); }
  100% { transform: scale(1); }
}

.ex-card.shake {
  animation: ex-shake 0.4s ease;
}

.ex-card.pulse-correct {
  animation: ex-pulse 0.4s ease;
}


/* ============================================================
   PERFIL — faixa compacta no topo
   ============================================================ */

.perfil-strip {
  background: #FFF;
  border-radius: 16px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 10px rgba(31, 27, 61, 0.05);
}

.perfil-strip-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #C4B5FD 0%, #7C3AED 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.perfil-strip-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.perfil-strip-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.perfil-strip-sub {
  font-size: 11px;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   TRILHAS — linha "mais trilhas em breve"
   ============================================================ */

.trilhas-em-breve {
  font-size: 12px;
  color: var(--color-text-tertiary);
  text-align: center;
  padding: 14px 12px;
  border-top: 1px dashed var(--color-border);
  margin-top: 6px;
  line-height: 1.5;
  font-style: italic;
}


/* ============================================================
   AJUSTES DE HIERARQUIA / CONSISTÊNCIA
   ============================================================ */

/* Bloco de pensamento da Bia (home) — usar identidade lavanda em vez de amarelo */
.thought-block.bia-home {
  background: var(--color-primary-soft);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 12px 12px 0;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.thought-block.bia-home .label {
  color: var(--color-primary-deep);
  margin-bottom: 0;
}

.thought-block.bia-home .thought-quote {
  font-size: 14px;
  color: var(--color-text-primary);
  font-style: normal;
  font-weight: 500;
  margin-top: 0;
  line-height: 1.5;
}

/* Lembrança = segunda voz da Bia, abaixo do insight principal.
   Visualmente discreta — é memória, não recomendação. */
.thought-block.bia-home .thought-recall {
  margin: 6px 0 0;
  padding-top: 8px;
  border-top: 1px dashed rgba(124, 58, 237, 0.18);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--color-text-secondary);
  font-style: italic;
}


/* Botões com mais consistência */
.btn-dark {
  transition: background 0.15s ease, transform 0.08s ease, color 0.15s ease;
}
.btn-dark:active:not(:disabled) { transform: translateY(1px); }

/* Estado inativo: cinza/lavanda apagado, sem cara de CTA */
.btn-dark:disabled {
  background: var(--color-bg-secondary);
  color: var(--color-text-tertiary);
  cursor: not-allowed;
  opacity: 1;
  border: 1px solid var(--color-border);
}

/* Estado pós-ação: verde (sucesso real) */
.btn-dark.completed {
  background: var(--color-success);
  color: #FFF;
  border: none;
  cursor: default;
}
.btn-dark.completed:disabled {
  background: var(--color-success);
  color: #FFF;
  border: none;
}

/* Sombra sutil consistente em todos os cards de conteúdo */
.continue-card,
.challenge-card,
.desafio-card,
.perfil-card,
.lesson-card {
  box-shadow: 0 2px 10px rgba(31, 27, 61, 0.05);
}


/* ============================================================
   EXERCÍCIOS — novos tipos de joguinho
   ============================================================ */

.ex-hint {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 4px;
  line-height: 1.4;
}

/* ── ORDENAR ─────────────────────────────────────────────── */
.order-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.order-item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-card-sm);
  box-shadow: var(--shadow-sm);
  font-size: 14px;
  color: var(--color-text-primary);
  line-height: 1.4;
}

.order-handle {
  color: var(--color-text-tertiary);
  font-size: 18px;
  font-weight: var(--weight-bold);
  flex-shrink: 0;
}

.order-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary-deep);
  font-size: 13px;
  font-weight: var(--weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
}

.order-text {
  flex: 1;
}

.order-arrows {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}

.order-arrow {
  width: 28px;
  height: 22px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text-secondary);
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.order-arrow:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary-deep);
  border-color: var(--color-primary-light);
}

.order-item.confirmed {
  cursor: default;
}

.order-item.confirmed.correct {
  background: #ECFDF5;
  border-color: var(--color-success);
}

.order-item.confirmed.wrong {
  background: #FEF2F2;
  border-color: var(--color-error);
}

.order-result {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: var(--weight-bold);
  color: #fff;
}

.order-item.confirmed.correct .order-result { background: var(--color-success); }
.order-item.confirmed.wrong .order-result   { background: var(--color-error); }


/* ── CONECTAR ────────────────────────────────────────────── */
.connect-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
}

.connect-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.connect-item {
  padding: var(--space-12);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-card-sm);
  color: var(--color-text-primary);
  font-size: 13px;
  font-weight: var(--weight-medium);
  text-align: left;
  line-height: 1.4;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: var(--shadow-sm);
  position: relative;
}

.connect-item:hover:not(.linked) {
  border-color: var(--color-primary-light);
  background: var(--color-primary-soft);
}

.connect-item.active {
  background: var(--color-primary-soft);
  border: 2px solid var(--color-primary);
}

.connect-item.linked {
  border-color: var(--connect-color, var(--color-primary));
  border-width: 2px;
  background: #fff;
  color: var(--color-text-primary);
  font-weight: var(--weight-bold);
}

.connect-item.linked::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--connect-color, var(--color-primary));
  transform: translateY(-50%);
}

.connect-left.linked::after  { right: -5px; }
.connect-right.linked::after { left: -5px; }

.connect-results {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  grid-column: 1 / -1;
}

.connect-result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-12);
  border-radius: var(--radius-card-sm);
  border: 1.5px solid;
}

.connect-result-row.correct {
  background: #ECFDF5;
  border-color: var(--color-success);
}

.connect-result-row.wrong {
  background: #FEF2F2;
  border-color: var(--color-error);
}

.connect-result-pair {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: 13px;
  flex: 1;
  line-height: 1.4;
}

.connect-result-arrow {
  color: var(--color-text-tertiary);
  font-weight: var(--weight-bold);
}

.connect-result-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: var(--weight-bold);
  color: #fff;
}

.connect-result-row.correct .connect-result-icon { background: var(--color-success); }
.connect-result-row.wrong   .connect-result-icon { background: var(--color-error); }


/* ── COMPLETAR (fill in the blank) ───────────────────────── */
.fill-sentence {
  padding: var(--space-16);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-card-sm);
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text-primary);
  font-weight: var(--weight-medium);
}

.fill-static {
  /* texto fixo da frase */
}

.fill-slot {
  display: inline-block;
  min-width: 70px;
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--color-bg-secondary);
  border: 1.5px dashed var(--color-border-strong);
  color: var(--color-text-tertiary);
  font-weight: var(--weight-medium);
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
}

.fill-slot:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.fill-slot.active {
  border-color: var(--color-primary);
  border-style: solid;
  background: var(--color-primary-soft);
}

.fill-slot.filled {
  background: var(--color-primary-soft);
  border-style: solid;
  border-color: var(--color-primary-light);
  color: var(--color-primary-deep);
  font-weight: var(--weight-bold);
}

.fill-slot.confirmed.correct {
  background: #D1FAE5;
  border-color: var(--color-success);
  color: #065F46;
}

.fill-slot.confirmed.wrong {
  background: #FEE2E2;
  border-color: var(--color-error);
  color: #991B1B;
}

.fill-bank {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.fill-bank.hidden { display: none; }

.fill-chip {
  padding: 10px 14px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-btn);
  color: var(--color-text-primary);
  font-family: var(--font);
  font-size: 13px;
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: var(--shadow-sm);
}

.fill-chip:hover:not(.usada) {
  border-color: var(--color-primary-light);
  background: var(--color-primary-soft);
}

.fill-chip.usada {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}


/* ── Recompensa: ativa o fundo roxo no novo id ─────────────── */
.app-frame.card-4-active #card-reward {
  display: flex;
}


/* ============================================================
   SCORE / DESEMPENHO
   ============================================================ */

/* Bloco de score dentro do card de recompensa */
.reward-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 8px 0 16px;
  padding: 18px 24px;
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-card-sm);
  color: #fff;
  width: 100%;
  max-width: 320px;
}

.reward-score.hidden { display: none; }

.reward-score-pct {
  font-size: 36px;
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  line-height: 1;
}

.reward-score-fraction {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: 0.02em;
}

.reward-score-msg {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  margin-top: 6px;
  line-height: 1.4;
}

/* Selo de performance (Perfeito/Excelente/Mediano/Treinar) — dentro do card escuro */
.reward-badge-perf {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Tons do selo (também usados fora do card de recompensa) */
.perf-perfeito  { background: #FBBF24; color: #78350F; }
.perf-excelente { background: #10B981; color: #fff; }
.perf-mediano   { background: #FBBF24; color: #78350F; }
.perf-treinar   { background: #FCA5A5; color: #7F1D1D; }

/* Card de desempenho agregado no topo da trilha */
.trail-score-card {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-card-sm);
  padding: var(--space-16);
  margin: var(--space-16) 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow-sm);
}

.trail-score-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.trail-score-pct {
  font-size: 22px;
  font-weight: var(--weight-bold);
  color: var(--color-primary-deep);
  letter-spacing: -0.01em;
}

.trail-score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.trail-score-fraction {
  font-size: 13px;
  color: var(--color-text-secondary);
}

.trail-score-msg {
  font-size: 13px;
  color: var(--color-text-primary);
  line-height: 1.4;
}

/* Badge de score em cada aula concluída */
.lesson-score-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.lesson-score-pct {
  font-size: 12px;
  font-weight: var(--weight-bold);
  color: var(--color-primary-deep);
}

.lesson-score-frac {
  font-size: 11px;
  color: var(--color-text-tertiary);
}

.lesson-score-badge {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Botão "Refazer exercícios" em aulas concluídas */
.lesson-refazer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary-deep);
  text-decoration: none;
  font-size: 16px;
  font-weight: var(--weight-bold);
  border: 1px solid transparent;
  transition: all 0.15s ease;
  flex-shrink: 0;
  margin-left: 4px;
}

.lesson-refazer:hover {
  background: var(--color-primary);
  color: #fff;
  transform: rotate(180deg);
}


/* ============================================================
   ACENTOS LARANJA - inicio, desafios e perfil
   Mantem o roxo como base e usa laranja so em detalhes.
   ============================================================ */

body.app-home .streak-pill {
  background: linear-gradient(135deg, var(--color-orange) 0%, var(--color-orange-deep) 100%);
  color: #FFF;
  box-shadow: 0 6px 16px rgba(199, 101, 58, 0.18);
}

body.app-home .streak-pill .flame-icon path:first-child {
  fill: #FFF;
}

body.app-home .thought-block.bia-home {
  background: linear-gradient(90deg, #FFF4EC 0%, var(--color-primary-soft) 100%);
  border-left-color: var(--color-orange);
}

body.app-home .thought-block.bia-home .label,
body.app-home .cal-day.done .cal-name {
  color: var(--color-orange-deep);
}

body.app-home .challenge-card:not(.secundario):not(.feito) {
  border: 1px solid rgba(199, 101, 58, 0.18);
}

body.app-home .challenge-card:not(.secundario):not(.feito) .xp-pill {
  background: #FFF0E7;
  color: var(--color-orange-deep);
}

body.app-home .btn-outline {
  border-color: rgba(199, 101, 58, 0.26);
  color: var(--color-orange-deep);
}

body.app-desafios .bia-note,
body.app-desafios .pos-acao {
  background: #FFF4EC;
  border-left-color: var(--color-orange);
}

body.app-desafios .bia-note > span,
body.app-desafios .section-heading,
body.app-desafios .desafio-card .xp-pill {
  color: var(--color-orange-deep);
}

body.app-desafios .desafio-card .xp-pill {
  background: #FFF0E7;
}

body.app-desafios .desafio-card {
  background:
    linear-gradient(180deg, rgba(31, 27, 61, 0.06) 0%, rgba(31, 27, 61, 0.42) 38%, rgba(31, 27, 61, 0.88) 100%),
    linear-gradient(135deg, rgba(199, 101, 58, 0.28), rgba(31, 27, 61, 0.18)),
    url("assets/desafio-card-bg.webp");
  background-size: cover;
  background-position: center 24%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 16px 32px rgba(31, 27, 61, 0.18);
  color: #fff;
  overflow: hidden;
}

body.app-desafios .desafio-card .desafio-text {
  color: #fff;
  text-shadow: 0 2px 14px rgba(31, 27, 61, 0.36);
}

body.app-desafios .desafio-card .desafio-top {
  justify-content: flex-start;
}

body.app-desafios .desafio-card .desafio-link-trilha {
  color: rgba(255, 255, 255, 0.82);
}

body.app-desafios .desafio-card .xp-pill {
  background: rgba(255, 255, 255, 0.88);
  color: var(--color-orange-deep);
  box-shadow: 0 6px 14px rgba(31, 27, 61, 0.14);
}

body.app-desafios .desafio-card .insight-block {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 10px 22px rgba(31, 27, 61, 0.1);
  min-width: 0;
  max-width: 100%;
}

body.app-desafios .desafio-card .insight-label {
  color: var(--color-text-primary);
}

body.app-desafios .desafio-card .insight-hint,
body.app-desafios .desafio-card .insight-counter {
  color: var(--color-text-secondary);
}

body.app-desafios .desafio-card .insight-input {
  min-width: 0;
  max-width: 100%;
}

body.app-desafios .insight-input:focus {
  border-color: var(--color-orange);
}

body.app-desafios .pos-acao-cta {
  background: var(--color-orange-deep);
}

body.app-perfil .perfil-strip-avatar,
body.app-perfil .badge.unlocked .badge-icon {
  background: linear-gradient(135deg, var(--color-orange) 0%, var(--color-primary) 100%);
  box-shadow: 0 4px 10px rgba(199, 101, 58, 0.18);
}

body.app-perfil .badge-section-title {
  color: var(--color-orange-deep);
}

body.app-perfil .badge-progress-bar > span {
  background: linear-gradient(90deg, var(--color-orange) 0%, var(--color-primary) 100%);
}

body.app-perfil .bia-summary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-orange-deep) 100%);
}

body.app-perfil .perfil-stat {
  border: 1px solid rgba(199, 101, 58, 0.12);
}


/* ============================================================
   MOBILE PWA SHELL
   Mantem a navegacao fixa na viewport instalada e rola so o conteudo.
   ============================================================ */

@media (max-width: 499px), (display-mode: standalone) and (hover: none) {
  html {
    width: 100%;
    height: 100%;
  }

  body.app-home,
  body.app-trilhas,
  body.app-desafios,
  body.app-comunidade,
  body.app-perfil {
    width: 100%;
    background-color: #ffffff;
    overflow: hidden;
    overscroll-behavior: none;
  }

  body.app-home .app-frame,
  body.app-trilhas .app-frame,
  body.app-desafios .app-frame,
  body.app-comunidade .app-frame,
  body.app-perfil .app-frame {
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 0;
    /* Reserva espaco pro nav fixo (52px de altura aprox) — conteudo nao
       fica escondido atras do nav, mas nao tem gap visual depois dele. */
    padding-bottom: 52px;
  }

  .home-header {
    flex-shrink: 0;
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
  }

  .page-header {
    flex-shrink: 0;
    padding-top: calc(32px + env(safe-area-inset-top, 0px));
  }

  .trail-header {
    padding-top: calc(var(--space-24) + env(safe-area-inset-top, 0px));
  }

  .lesson-header,
  .ex-header {
    padding-top: calc(var(--space-16) + env(safe-area-inset-top, 0px));
  }

  .home-content,
  .page-content,
  .trail-content,
  .lesson-content,
  .ex-content {
    min-height: 0;
    overscroll-behavior-y: contain;
  }

  body.app-home .home-content,
  body.app-trilhas .page-content,
  body.app-desafios .page-content,
  body.app-comunidade .page-content,
  body.app-perfil .page-content {
    /* Padding pequeno — .app-frame ja reserva 52px no padding-bottom dele
       pro nav fixo. Aqui so um respiro extra pro conteudo nao colar no nav. */
    padding-bottom: 16px;
  }

  body.app-home .bottom-nav,
  body.app-trilhas .bottom-nav,
  body.app-desafios .bottom-nav,
  body.app-comunidade .bottom-nav,
  body.app-perfil .bottom-nav {
    /* Nav fixo no fundo absoluto. SEM env(safe-area-inset-bottom) — o
       usuario quer os icones o mais embaixo possivel no iPhone, ignorando
       a convencao Apple de reservar espaco pro home indicator. */
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
    width: 100%;
    align-items: center !important;
    background: #ffffff !important;
    z-index: 999 !important;
    /* Padding pequeno fixo. Itens ficam praticamente colados na borda inferior do
       viewport, mesmo no iPhone com home indicator. */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: max(8px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(8px, env(safe-area-inset-right, 0px)) !important;
    box-shadow: 0 -1px 0 rgba(31, 27, 61, 0.06);
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
  }

  .nav-item {
    min-height: 0;
    height: 52px;
    padding: 0 4px;
    gap: 0;
    justify-content: center;
    position: static;
    top: auto;
  }

  .nav-item > span {
    display: none;
  }

  .nav-item svg {
    width: 30px;
    height: 30px;
  }
}




/* Desafios: mobile/input resilience. The card must not clip the textarea when the keyboard opens. */
body.app-desafios .page-content {
  padding-bottom: max(112px, calc(env(safe-area-inset-bottom, 0px) + 112px));
  scroll-padding-bottom: 150px;
}

body.app-desafios .desafio-card {
  overflow: visible;
}

body.app-desafios .desafio-card .desafio-text {
  overflow-wrap: anywhere;
}

body.app-desafios .desafio-card .insight-block {
  scroll-margin-bottom: 160px;
}

body.app-desafios .desafio-card .insight-input {
  min-height: 118px;
  font-size: 16px;
  line-height: 1.45;
  resize: vertical;
  -webkit-user-select: text;
  user-select: text;
}

body.app-desafios .desafio-card:focus-within {
  scroll-margin-bottom: 180px;
}

@media (max-width: 390px) {
  body.app-desafios .page-content {
    gap: 10px;
    padding-left: 16px;
    padding-right: 16px;
  }

  body.app-desafios .bia-note > p {
    font-size: 12.5px;
  }

  body.app-desafios .desafio-ritual div {
    padding: 9px 10px;
  }

  body.app-desafios .desafio-card {
    padding: 14px;
    gap: 10px;
  }

  body.app-desafios .desafio-card .desafio-text {
    font-size: 18px;
    line-height: 1.18;
  }
}
/* Android: keep the Instagram-style icons, but lift the touch area above the system gesture bar. */
html.is-android body.app-home .app-frame,
html.is-android body.app-trilhas .app-frame,
html.is-android body.app-desafios .app-frame,
html.is-android body.app-comunidade .app-frame,
html.is-android body.app-perfil .app-frame {
  padding-bottom: 64px;
}

html.is-android body.app-home .bottom-nav,
html.is-android body.app-trilhas .bottom-nav,
html.is-android body.app-desafios .bottom-nav,
html.is-android body.app-comunidade .bottom-nav,
html.is-android body.app-perfil .bottom-nav {
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  padding-top: 0 !important;
  padding-bottom: 8px !important;
  align-items: center !important;
}

html.is-android body.app-home .bottom-nav .nav-item,
html.is-android body.app-trilhas .bottom-nav .nav-item,
html.is-android body.app-desafios .bottom-nav .nav-item,
html.is-android body.app-comunidade .bottom-nav .nav-item,
html.is-android body.app-perfil .bottom-nav .nav-item {
  height: 56px;
  min-height: 56px;
}
/* ============================================================
   UI utilities — toast, modal, skeleton, view transitions
   ============================================================ */

/* Toast */
.ui-toast-host {
  position: fixed;
  left: 50%;
  bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 76px));
  transform: translateX(-50%);
  z-index: 9999;
  pointer-events: none;
  max-width: calc(100vw - 24px);
  width: max-content;
}

.ui-toast {
  background: rgba(31, 27, 61, 0.96);
  color: #fff;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  padding: 12px 16px;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(31, 27, 61, 0.25);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  user-select: none;
  -webkit-user-select: none;
}

.ui-toast.visible {
  opacity: 1;
  transform: translateY(0);
}

.ui-toast-action {
  padding: 8px 8px 8px 16px;
}

.ui-toast-btn {
  background: rgba(167, 139, 250, 0.22);
  color: #E0D7FB;
  border: none;
  border-radius: 10px;
  padding: 8px 14px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}
.ui-toast-btn:active { background: rgba(167, 139, 250, 0.4); }

@media (prefers-reduced-motion: reduce) {
  .ui-toast { transition: opacity 0.1s linear; transform: none; }
  .ui-toast.visible { transform: none; }
}

/* Modal overlay */
.ui-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
  background: rgba(15, 12, 30, 0);
  transition: background 0.22s ease;
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
}
.ui-modal-overlay.visible {
  background: rgba(15, 12, 30, 0.4);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.ui-modal {
  background: #fff;
  border-radius: 22px;
  padding: 22px 22px 16px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 24px 64px rgba(20, 14, 50, 0.32);
  transform: translateY(24px);
  opacity: 0;
  transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.22s ease;
}
.ui-modal-overlay.visible .ui-modal {
  transform: translateY(0);
  opacity: 1;
}

@media (min-width: 500px) {
  .ui-modal-overlay { align-items: center; }
  .ui-modal { transform: scale(0.96); }
  .ui-modal-overlay.visible .ui-modal { transform: scale(1); }
}

.ui-modal-title {
  font-family: var(--font);
  font-size: 18px;
  font-weight: 800;
  color: var(--color-text-primary);
  margin-bottom: 6px;
}
.ui-modal-msg {
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-text-secondary);
  margin-bottom: 18px;
}

.ui-modal-actions {
  display: flex;
  gap: 10px;
}

.ui-modal-btn {
  flex: 1;
  min-height: 46px;
  border-radius: 12px;
  border: none;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
  -webkit-appearance: none;
  appearance: none;
}
.ui-modal-cancel {
  background: #F4F1E1;
  color: var(--color-text-primary);
}
.ui-modal-cancel:active { background: #EAE6D6; transform: scale(0.97); }
.ui-modal-ok {
  background: var(--color-primary);
  color: #fff;
}
.ui-modal-ok:active { background: var(--color-primary-deep); transform: scale(0.97); }
.ui-modal-ok.destrutivo {
  background: var(--color-error);
}
.ui-modal-ok.destrutivo:active { background: #B91C1C; }

@media (prefers-reduced-motion: reduce) {
  .ui-modal { transition: opacity 0.15s linear; transform: none !important; }
  .ui-modal-overlay { transition: none; }
}

/* Skeleton shimmer base */
.skeleton {
  position: relative;
  overflow: hidden;
  background: rgba(124, 58, 237, 0.06);
  border-radius: 12px;
  color: transparent !important;
}
.skeleton::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(124, 58, 237, 0) 0%,
    rgba(124, 58, 237, 0.10) 50%,
    rgba(124, 58, 237, 0) 100%);
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton::before { animation: none; opacity: 0.6; }
}

/* ─── SKELETON CARDS pro tela de Trilhas (hero + strip) ─── */
.trilha-card-skeleton {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(245, 158, 11, 0.06));
  border-radius: 22px;
  box-shadow:
    0 22px 36px rgba(124, 58, 237, 0.08),
    0 4px 10px rgba(31, 27, 61, 0.03);
}
.trilha-card-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg,
    transparent 30%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 70%);
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
  background-size: 200% 100%;
}
.trilhas-hero .trilha-card-skeleton {
  position: absolute;
  inset: 0;
}
.trilhas-strip .trilha-card-skeleton {
  flex: 0 0 calc((100% - 20px) / 3);
  height: 100%;
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(31, 27, 61, 0.04);
}
/* Conteúdo placeholder dentro do hero skeleton (ícone + label + barra) */
.trilha-card-skeleton-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 0 28px;
  z-index: 1;
}
.trilha-card-skeleton-icon {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: rgba(31, 27, 61, 0.08);
}
.trilha-card-skeleton-line {
  height: 18px;
  border-radius: 6px;
  background: rgba(31, 27, 61, 0.08);
}
.trilha-card-skeleton-line.is-wide  { width: 60%; }
.trilha-card-skeleton-line.is-thin  { height: 6px; width: 30%; }

/* ─── SKELETONS pro perfil (avatar + nome + stats) ─── */
.perfil-skeleton-block {
  position: relative;
  overflow: hidden;
  background: rgba(124, 58, 237, 0.06);
  border-radius: 14px;
}
.perfil-skeleton-block::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(124, 58, 237, 0) 0%,
    rgba(124, 58, 237, 0.12) 50%,
    rgba(124, 58, 237, 0) 100%);
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

/* Helper: esconde skeleton quando dado chega */
[data-loaded="true"] .skeleton-hide-on-load { display: none !important; }

/* ============================================================
   VIEW TRANSITIONS — sensação de app nativo entre telas
   Cross-document: Chrome 126+, Safari 18.2+. Browsers sem suporte:
   navegação normal (sem transição, sem regressão).
   ============================================================ */

/* OPT-IN cross-document: o navegador faz screenshot da página antiga,
   segura ela enquanto a nova carrega, e crossfade. ZERO flash branco. */
@view-transition {
  navigation: auto;
}

/* A bottom nav fica PARADA durante a transição (não pisca).
   Como o elemento tem o mesmo view-transition-name nas duas páginas,
   o browser detecta que é o "mesmo" item e mantém a posição. */
.bottom-nav {
  view-transition-name: bottom-nav;
}

/* Mesma coisa pro header de página — fica estável visualmente */
.page-header,
.home-header {
  view-transition-name: app-header;
}

/* Conteúdo principal: crossfade rápido e suave */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: vt-fade-out 0.22s cubic-bezier(0.32, 0.72, 0, 1) both;
  }
  ::view-transition-new(root) {
    animation: vt-fade-in 0.28s cubic-bezier(0.32, 0.72, 0, 1) both;
  }
  /* Nav e header não fazem fade — ficam imóveis */
  ::view-transition-group(bottom-nav),
  ::view-transition-group(app-header) {
    animation-duration: 0.22s;
  }
  ::view-transition-old(bottom-nav),
  ::view-transition-new(bottom-nav),
  ::view-transition-old(app-header),
  ::view-transition-new(app-header) {
    animation: none;
    /* O browser usa morph automático — se posição/tamanho não muda, não move */
  }
}

@keyframes vt-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes vt-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ─────────────────────────────────────────────────────────────
   Polish app-nativo: feedback de toque + GPU compositing
   ───────────────────────────────────────────────────────────── */

/* Elimina delay de 300ms em mobile e contorno azul de tap */
button, a, [role="button"], [data-nav], .perfil-item,
.onb-option, .nav-item, .trilha-card, .trilhas-pillar {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Micro-scale universal no :active dos botões primários — sensação nativa */
@media (prefers-reduced-motion: no-preference) {
  .btn-primary:not(:disabled):active,
  .btn-outline:not(:disabled):active,
  .btn-dark:not(:disabled):active {
    transform: scale(0.97);
    transition: transform 80ms cubic-bezier(0.32, 0.72, 0, 1);
  }
}

/* GPU compositing nos elementos que animam frequentemente:
   evita repaint custoso e remove jitter em mobile baixo-end. */
.continue-card,
.challenge-card,
.trilha-card,
.path-orb,
.btn-primary,
.btn-outline,
.btn-dark,
.bottom-nav,
.thought-block {
  transform: translateZ(0);
  backface-visibility: hidden;
}



/* Pílula de freeze (escudo azul ao lado do streak) */
.freeze-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
  color: #1E40AF;
  padding: 6px 12px;
  border-radius: 100px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  margin-right: 8px;
  box-shadow: inset 0 -2px 0 rgba(30, 64, 175, 0.10), 0 2px 8px rgba(96, 165, 250, 0.18);
  user-select: none;
  -webkit-user-select: none;
}
.home-header { gap: 0; }
.home-header .greeting { flex: 1; min-width: 0; }



/* Status row no card da frente (progresso + CTA) */
.trilha-card-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  margin-top: 8px;
  padding: 0 4px;
}
.trilha-card-status-meta {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(31, 27, 61, 0.55);
}
.trilha-card-status-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 100px;
  background: var(--color-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.16), 0 4px 10px rgba(124, 58, 237, 0.32);
}
.trilha-card-status-cta.locked {
  background: rgba(31, 27, 61, 0.22);
  color: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.16);
}

/* Quando o card tem foto/gradiente, o meta vira branco translucent */
.trilha-card.has-photo .trilha-card-status-meta {
  color: rgba(255, 255, 255, 0.78);
}
.trilha-card.has-photo .trilha-card-status-cta {
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-primary-deep);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.08), 0 4px 10px rgba(0, 0, 0, 0.20);
}
.trilha-card.has-photo.locked .trilha-card-status-cta {
  background: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.9);
}

/* ─────────────────────────────────────────────────────────────
   Transparência no perfil: "O que a Bia sabe sobre você"
   ───────────────────────────────────────────────────────────── */
.perfil-data {
  margin-top: 18px;
}

.perfil-data-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  background: var(--color-surface-soft);
  border: 1px solid rgba(31, 27, 61, 0.06);
  border-radius: 14px;
  cursor: pointer;
  color: var(--color-text-primary);
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.perfil-data-toggle-icon {
  flex: 0 0 24px;
  font-size: 18px;
  line-height: 1;
}
.perfil-data-toggle-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.perfil-data-toggle-title {
  font-size: 14px;
  font-weight: 700;
}
.perfil-data-toggle-sub {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.perfil-data-toggle-chevron {
  flex: 0 0 16px;
  color: var(--color-text-tertiary);
  transition: transform 220ms ease;
}
.perfil-data-toggle.open .perfil-data-toggle-chevron {
  transform: rotate(180deg);
}

.perfil-data-body {
  margin-top: 10px;
  padding: 14px 16px 16px;
  background: rgba(124, 58, 237, 0.04);
  border: 1px solid rgba(124, 58, 237, 0.1);
  border-radius: 14px;
}
.perfil-data-body[hidden] { display: none; }

.perfil-data-intro {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.perfil-data-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.perfil-data-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(31, 27, 61, 0.08);
}
.perfil-data-item:last-child { border-bottom: 0; }

.perfil-data-key {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-tertiary);
  letter-spacing: 0.02em;
}
.perfil-data-val {
  font-size: 13px;
  color: var(--color-text-primary);
  text-align: right;
  word-break: break-word;
  max-width: 60%;
}

.perfil-data-actions {
  display: flex;
  gap: 8px;
}
.perfil-data-actions .btn-outline {
  flex: 1;
}

/* ─────────────────────────────────────────────────────────────
   COMUNIDADE — feed social, composer e posts.
   Paleta: mesma do resto do app (roxo --color-primary, fontes Outfit,
   cards sobre --color-surface, sombras suaves).
   ───────────────────────────────────────────────────────────── */

.app-comunidade .page-content {
  /* Bottom-nav agora ocupa espaco proprio (flex child), nao precisa compensar. */
  padding-bottom: 16px;
}

/* Composer */
.composer {
  margin: 14px 0 12px;
  padding: 14px 14px 12px;
  background: var(--color-surface);
  border: 1px solid rgba(31, 27, 61, 0.06);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(31, 27, 61, 0.04);
}
.composer-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.composer-avatar {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-deep) 100%);
  box-shadow: 0 4px 10px rgba(124, 58, 237, 0.22);
  user-select: none;
}
.composer-input-wrap {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.composer-input {
  width: 100%;
  min-height: 60px;
  padding: 10px 12px;
  border: 1px solid rgba(31, 27, 61, 0.08);
  border-radius: 12px;
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  font-family: var(--font);
  /* 16px previne zoom no iOS quando user dá foco */
  font-size: 16px;
  line-height: 1.4;
  resize: none;
  outline: none;
  transition: border-color 0.18s ease, background 0.18s ease;
  -webkit-appearance: none;
  appearance: none;
}
.composer-input::placeholder {
  color: var(--color-text-tertiary);
}
.composer-input:focus {
  border-color: var(--color-primary-light);
  background: var(--color-surface);
}
.composer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.composer-counter {
  font-size: 11px;
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.composer-counter.valid { color: var(--color-text-secondary); }
.composer-counter.warn  { color: var(--color-celebration); }
.composer-publish {
  min-height: 34px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 100px;
}
.composer-publish:disabled {
  opacity: 0.45;
}

/* Tabs do feed */
.feed-tabs {
  display: flex;
  gap: 4px;
  margin: 14px 0 10px;
  padding: 4px;
  background: var(--color-surface-soft);
  border-radius: 100px;
  width: fit-content;
}
.feed-tab {
  padding: 6px 14px;
  border: 0;
  background: transparent;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-text-secondary);
  border-radius: 100px;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.18s ease, color 0.18s ease;
}
.feed-tab.active {
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: 0 2px 6px rgba(31, 27, 61, 0.06);
}

.com-people-strip {
  margin: 0 0 12px;
}
.com-people-strip[hidden] {
  display: none;
}
.com-strip-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 8px;
}
.com-strip-head strong {
  color: var(--color-text-primary);
  font-size: 13px;
  font-weight: 800;
}
.com-strip-head span {
  color: var(--color-text-tertiary);
  font-size: 11px;
  font-weight: 700;
}
.com-person-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding: 0 2px 2px;
  scrollbar-width: none;
}
.com-person-row::-webkit-scrollbar {
  display: none;
}
.com-person-card {
  flex: 0 0 224px;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background: var(--color-surface);
  border: 1px solid rgba(31, 27, 61, 0.06);
  border-radius: 16px;
}
.com-person-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
}
.com-person-avatar {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 800;
}
.com-person-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.com-person-text strong {
  color: var(--color-text-primary);
  font-size: 13px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.com-person-text small {
  color: var(--color-text-tertiary);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.com-person-follow {
  min-height: 34px;
  padding: 7px 10px;
  background: var(--color-text-primary);
  border: 1px solid var(--color-text-primary);
  border-radius: 999px;
  color: #FFFFFF;
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 80ms cubic-bezier(0.32, 0.72, 0, 1), background 0.16s ease;
}
.com-person-follow.is-following {
  background: var(--color-surface-soft);
  border-color: rgba(31, 27, 61, 0.08);
  color: var(--color-text-secondary);
}
.com-person-follow:active {
  transform: scale(0.96);
}

/* Feed */
.feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.post {
  padding: 14px 14px 10px;
  background: var(--color-surface);
  border: 1px solid rgba(31, 27, 61, 0.05);
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(31, 27, 61, 0.04);
}

.post-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.post-avatar {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-deep) 100%);
  user-select: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.composer-avatar img,
.post-avatar img,
.com-comment-avatar img,
.com-msg-avatar img,
.com-chat-avatar img,
.com-person-avatar img,
.com-profile-avatar img,
.com-sheet-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: inherit;
}

.post-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1 1 auto;
  min-width: 0;
}
.post-line {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  line-height: 1.2;
}
.post-author {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
}
.post-badge-self {
  padding: 2px 7px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--color-primary-soft);
  color: var(--color-primary-deep);
  border-radius: 100px;
}
.post-tag {
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-text-secondary);
  background: var(--color-surface-soft);
  border-radius: 100px;
}
.post-time {
  font-size: 11px;
  color: var(--color-text-tertiary);
  letter-spacing: 0.02em;
}

.post-text {
  margin: 10px 0 12px;
  padding-left: 50px; /* alinhado depois do avatar */
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--color-text-primary);
  word-break: break-word;
}

.post-foot {
  display: flex;
  gap: 18px;
  padding-left: 50px;
}
.post-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 4px 2px;
  color: var(--color-text-tertiary);
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.16s ease, transform 80ms cubic-bezier(0.32, 0.72, 0, 1);
}
.post-action:active { transform: scale(0.94); }
.post-action:hover  { color: var(--color-text-secondary); }
.post-action.like.is-liked {
  color: #EC4899;
}
.post-action.like.is-liked:hover { color: #DB2777; }
.post-action.save.is-saved {
  color: var(--color-primary);
}
.post-action.save.is-saved:hover { color: var(--color-primary-deep); }
.post-action span { font-variant-numeric: tabular-nums; }

.feed-end {
  margin: 18px 0 6px;
  text-align: center;
  font-size: 12px;
  color: var(--color-text-tertiary);
  letter-spacing: 0.02em;
}

/* ─────────────────────────────────────────────────────────────
   COMUNIDADE — header com botão de mensagens, overlays internos,
   thread de comentários, chat 1:1 e bottom sheet do autor.
   ───────────────────────────────────────────────────────────── */

.com-header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.com-header-text {
  flex: 1 1 auto;
  min-width: 0;
}
.com-msg-btn {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  color: var(--color-text-primary);
  border: 1px solid rgba(31, 27, 61, 0.06);
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(31, 27, 61, 0.04);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform 80ms cubic-bezier(0.32, 0.72, 0, 1);
}
.com-msg-btn:active { transform: scale(0.94); }
.com-msg-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #EC4899;
  color: #FFFFFF;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 6px rgba(236, 72, 153, 0.4);
}
.com-msg-badge[hidden] {
  display: none !important;
}

/* Avatar e nome do autor viram botões (pra abrir sheet) — visual igual ao texto */
.post-author-trigger {
  background: inherit;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.post-author-trigger.post-author { color: var(--color-text-primary); }

/* Post inteiro clicável */
.post {
  cursor: pointer;
  transition: background 0.16s ease;
}
.post:hover  { background: rgba(124, 58, 237, 0.02); }
.post:active { background: rgba(124, 58, 237, 0.04); }
.post .post-action,
.post .post-author-trigger { cursor: pointer; }
.post.is-expanded { cursor: default; }
.post.is-expanded:hover { background: transparent; }

/* ─── Overlay (tela cheia, slide da direita) ─── */
.com-overlay {
  position: fixed;
  inset: 0;
  /* dvh segue o teclado iOS — quando abre, o overlay encolhe junto */
  height: 100dvh;
  max-height: 100dvh;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-primary);
  transform: translateX(100%);
  transition: transform 0.26s cubic-bezier(0.32, 0.72, 0, 1);
  padding-top: env(safe-area-inset-top);
  /* GPU compositing — slide fica buttery sem repaint */
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}
.com-overlay[hidden] { display: none; }
.com-overlay.is-open { transform: translateX(0); }

/* prefers-reduced-motion: respeita usuário que desativou animação */
@media (prefers-reduced-motion: reduce) {
  .com-overlay {
    transition: none;
  }
}

/* Quando overlay/sheet abre, trava scroll do body por baixo */
body.com-locked {
  overflow: hidden;
  position: fixed;
  inset: 0;
  width: 100%;
}

.com-overlay-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 12px;
  background: var(--color-bg-primary);
  border-bottom: 1px solid rgba(31, 27, 61, 0.06);
  /* iOS: garante que o header fica fixo no topo mesmo se o teclado
     fizer o browser empurrar layout pra cima quando input recebe foco. */
  position: sticky;
  top: 0;
  z-index: 5;
}
.com-overlay-back {
  /* Touch target ≥44 (Apple HIG) — usa padding negativo pra manter visual de 36px */
  min-width: 44px;
  min-height: 44px;
  margin-left: -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--color-text-primary);
  border-radius: 10px;
  cursor: pointer;
  transition: transform 80ms cubic-bezier(0.32, 0.72, 0, 1);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.com-overlay-back:active { transform: scale(0.94); background: var(--color-surface-soft); }
.com-overlay-title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}

.com-overlay-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Não deixa o scroll "vazar" pro fundo quando chega no fim/início */
  overscroll-behavior: contain;
  padding: 14px 16px 16px;
}

.com-overlay-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px max(14px, env(safe-area-inset-bottom));
  background: var(--color-surface);
  border-top: 1px solid rgba(31, 27, 61, 0.06);
}
.com-foot-avatar {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  font-size: 14px;
}
.com-foot-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 11px 16px;
  border: 1px solid rgba(31, 27, 61, 0.08);
  border-radius: 100px;
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  font-family: var(--font);
  /* 16px é o limiar mínimo do iOS pra não dar zoom no foco */
  font-size: 16px;
  outline: none;
  transition: border-color 0.16s ease, background 0.16s ease;
  -webkit-appearance: none;
  appearance: none;
}
.com-foot-input:focus {
  border-color: var(--color-primary-light);
  background: var(--color-surface);
}
.com-foot-send {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: #FFFFFF;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.16s ease, transform 80ms cubic-bezier(0.32, 0.72, 0, 1);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.com-foot-send:hover:not(:disabled)  { background: var(--color-primary-deep); }
.com-foot-send:active:not(:disabled) { transform: scale(0.92); }
.com-foot-send:disabled { background: rgba(31, 27, 61, 0.18); cursor: not-allowed; }

.com-section-label {
  margin: 18px 0 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

/* ─── Comentários ─── */
.com-comments {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.com-comment {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  background: var(--color-surface);
  border: 1px solid rgba(31, 27, 61, 0.05);
  border-radius: 12px;
}
.com-comment.is-mine {
  background: var(--color-primary-soft);
  border-color: rgba(124, 58, 237, 0.12);
}
.com-comment-avatar {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  color: #FFFFFF;
}
.com-comment-body {
  flex: 1 1 auto;
  min-width: 0;
}
.com-comment-line {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 2px;
}
.com-comment-line strong,
.com-comment-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-primary);
}
.com-comment-name {
  font-family: var(--font);
  line-height: 1.2;
}
.com-comment-time {
  font-size: 10.5px;
  color: var(--color-text-tertiary);
  letter-spacing: 0.02em;
}
.com-comment-body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-text-primary);
  word-break: break-word;
}

.com-empty {
  margin: 8px 0;
  padding: 14px;
  text-align: center;
  font-size: 13px;
  color: var(--color-text-tertiary);
  background: var(--color-surface-soft);
  border-radius: 12px;
}

/* ─── Lista de mensagens ─── */
.com-msg-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.com-msg-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  /* Garante ≥48px de altura tocável */
  min-height: 56px;
  padding: 10px 12px;
  background: var(--color-surface);
  border: 1px solid rgba(31, 27, 61, 0.05);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font);
  transition: transform 80ms cubic-bezier(0.32, 0.72, 0, 1), background 0.12s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.com-msg-item:active { transform: scale(0.99); background: var(--color-bg-secondary); }
.com-msg-avatar {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF;
}
.com-msg-text {
  flex: 1 1 auto;
  min-width: 0;
}
.com-msg-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.com-msg-top strong {
  font-size: 14px;
  color: var(--color-text-primary);
}
.com-msg-time {
  font-size: 11px;
  color: var(--color-text-tertiary);
  white-space: nowrap;
}
.com-msg-prev {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--color-text-secondary);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.com-msg-unread {
  flex: 0 0 auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: #FFFFFF;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 800;
}

.com-contact-suggest {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.com-contact-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
}
.com-contact-search-field {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(31, 27, 61, 0.10);
  border-radius: 12px;
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  font-weight: 800;
}
.com-contact-search-field input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  font-weight: 600;
}
.com-contact-search-result {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.com-suggest-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--color-bg-secondary);
  border-radius: 14px;
}
.com-suggest-cta {
  flex: 0 0 auto;
  /* Altura tocável adequada (44px sem inflar visual) */
  min-height: 36px;
  padding: 8px 14px;
  background: var(--color-primary);
  color: #FFFFFF;
  border: 0;
  border-radius: 100px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.16s ease, transform 80ms cubic-bezier(0.32, 0.72, 0, 1);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.com-suggest-cta:hover:not(:disabled)  { background: var(--color-primary-deep); }
.com-suggest-cta:active:not(:disabled) { transform: scale(0.96); }
.com-suggest-cta:disabled { background: rgba(31, 27, 61, 0.18); cursor: not-allowed; }
.com-suggest-cta.subtle {
  background: rgba(124, 58, 237, 0.10);
  color: var(--color-primary-deep);
}
.com-suggest-cta.subtle:hover:not(:disabled) {
  background: rgba(124, 58, 237, 0.16);
}

/* ─── Chat 1:1 ─── */
.com-overlay-chat .com-overlay-body { padding: 0; }
.com-chat-head { padding: 10px 14px; }
.com-chat-peer {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}
.com-chat-avatar {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
}
.com-chat-meta { display: flex; flex-direction: column; min-width: 0; }
.com-chat-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.com-chat-status {
  font-size: 11px;
  color: var(--color-text-tertiary);
  letter-spacing: 0.02em;
}

.com-chat-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  background: var(--color-bg-primary);
}
.com-chat-empty {
  margin: auto;
  padding: 18px;
  text-align: center;
  color: var(--color-text-tertiary);
}
.com-chat-empty strong { color: var(--color-text-secondary); }
.com-chat-empty-hint { margin-top: 6px; font-size: 13px; }

.com-msg-bubble {
  max-width: 78%;
  padding: 8px 12px;
  background: var(--color-surface);
  border: 1px solid rgba(31, 27, 61, 0.05);
  border-radius: 14px 14px 14px 4px;
  align-self: flex-start;
}
.com-msg-bubble.is-mine {
  align-self: flex-end;
  background: var(--color-primary);
  color: #FFFFFF;
  border-color: var(--color-primary);
  border-radius: 14px 14px 4px 14px;
}
.com-msg-bubble p {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  word-break: break-word;
}
.com-msg-bubble-time {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--color-text-tertiary);
  opacity: 0.8;
}
.com-msg-bubble.is-mine .com-msg-bubble-time {
  color: rgba(255, 255, 255, 0.75);
}

/* ─── Bottom sheet (menu do autor) ─── */
/* Perfil publico dentro da comunidade */
.com-profile-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 16px 18px;
  background: var(--color-surface);
  border: 1px solid rgba(31, 27, 61, 0.06);
  border-radius: 16px;
  text-align: center;
}
.com-profile-cover {
  width: calc(100% + 32px);
  height: 104px;
  margin: 0 -16px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 14px 16px;
  color: #FFFFFF;
}
.com-profile-cover span {
  max-width: 100%;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.com-profile-avatar {
  width: 76px;
  height: 76px;
  margin-top: -38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 4px solid var(--color-surface);
  color: #FFFFFF;
  font-size: 28px;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(31, 27, 61, 0.14);
}
.com-profile-name {
  margin: 4px 0 0;
  color: var(--color-text-primary);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0;
}
.com-profile-meta,
.com-profile-bio {
  margin: 0;
  max-width: 30rem;
}
.com-profile-meta {
  color: var(--color-text-tertiary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}
.com-profile-bio {
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.com-profile-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 2px;
}
.com-profile-link {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  background: var(--color-surface-soft);
  border: 1px solid rgba(31, 27, 61, 0.06);
  border-radius: 999px;
  color: var(--color-primary-deep);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.com-profile-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  margin-top: 6px;
}
.com-profile-action {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  background: var(--color-surface-soft);
  border: 1px solid rgba(31, 27, 61, 0.08);
  border-radius: 12px;
  color: var(--color-text-primary);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 80ms cubic-bezier(0.32, 0.72, 0, 1), background 0.16s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.com-profile-action.primary {
  background: var(--color-text-primary);
  border-color: var(--color-text-primary);
  color: #FFFFFF;
}
.com-profile-action:active {
  transform: scale(0.97);
}
.com-profile-action:only-child {
  grid-column: 1 / -1;
}
.com-profile-social {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 4px;
}
.com-profile-social div {
  min-width: 0;
  padding: 12px 8px;
  background: var(--color-surface);
  border: 1px solid rgba(31, 27, 61, 0.06);
  border-radius: 14px;
  text-align: center;
}
.com-profile-social strong {
  display: block;
  color: var(--color-text-primary);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}
.com-profile-social span {
  display: block;
  margin-top: 5px;
  color: var(--color-text-tertiary);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.2;
}
.com-profile-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin: 10px 0 2px;
  padding: 4px;
  background: var(--color-surface-soft);
  border-radius: 999px;
}
.com-profile-tabs button {
  min-height: 34px;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--color-text-secondary);
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}
.com-profile-tabs button.active {
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: 0 2px 6px rgba(31, 27, 61, 0.05);
}
.com-profile-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 4px;
}
.com-profile-stats div {
  min-width: 0;
  padding: 12px 8px;
  background: var(--color-surface);
  border: 1px solid rgba(31, 27, 61, 0.06);
  border-radius: 14px;
  text-align: center;
}
.com-profile-stats strong {
  display: block;
  color: var(--color-text-primary);
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
}
.com-profile-stats span {
  display: block;
  margin-top: 5px;
  color: var(--color-text-tertiary);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.2;
}
.com-profile-section {
  margin-top: 14px;
}
.com-profile-story {
  margin: 0;
  padding: 14px;
  background: var(--color-surface);
  border: 1px solid rgba(31, 27, 61, 0.06);
  border-radius: 14px;
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.com-profile-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.com-profile-badges span {
  padding: 7px 10px;
  background: var(--color-surface);
  border: 1px solid rgba(31, 27, 61, 0.06);
  border-radius: 999px;
  color: var(--color-text-secondary);
  font-size: 11px;
  font-weight: 800;
}
.com-profile-post {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 13px 14px;
  background: var(--color-surface);
  border: 1px solid rgba(31, 27, 61, 0.06);
  border-radius: 14px;
  color: inherit;
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.com-profile-post:active {
  transform: scale(0.99);
}
.com-profile-post-text {
  display: block;
  color: var(--color-text-primary);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.42;
  overflow-wrap: anywhere;
}
.com-profile-post-meta {
  display: block;
  margin-top: 7px;
  color: var(--color-text-tertiary);
  font-size: 11px;
  font-weight: 700;
}

/* Bottom sheet do autor */
.com-sheet {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: flex;
  align-items: flex-end;
}
.com-sheet[hidden] { display: none; }
.com-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 14, 35, 0.4);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.com-sheet.is-open .com-sheet-backdrop { opacity: 1; }

.com-sheet-content {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  background: var(--color-surface);
  border-radius: 18px 18px 0 0;
  padding: 8px 16px max(20px, env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 0.26s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
  /* Não deixa scroll do sheet vazar pro fundo */
  overscroll-behavior: contain;
  -webkit-tap-highlight-color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .com-sheet-content,
  .com-sheet-backdrop { transition: none; }
}
.com-sheet.is-open .com-sheet-content { transform: translateY(0); }

.com-sheet-handle {
  width: 44px;
  height: 4px;
  margin: 6px auto 14px;
  background: rgba(31, 27, 61, 0.18);
  border-radius: 100px;
}
.com-sheet-peer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 4px 14px;
  border-bottom: 1px solid rgba(31, 27, 61, 0.06);
  margin-bottom: 6px;
}
.com-sheet-avatar {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #FFFFFF;
  font-size: 17px;
  font-weight: 700;
}
.com-sheet-peer-info { display: flex; flex-direction: column; gap: 4px; }
.com-sheet-peer-info strong {
  font-size: 16px;
  color: var(--color-text-primary);
}
.com-sheet-action {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  /* 52px é confortável pra polegar */
  min-height: 52px;
  padding: 14px 8px;
  background: transparent;
  border: 0;
  color: var(--color-text-primary);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  border-bottom: 1px solid rgba(31, 27, 61, 0.04);
  transition: background 0.12s ease, transform 80ms cubic-bezier(0.32, 0.72, 0, 1);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.com-sheet-action:hover  { background: var(--color-surface-soft); }
.com-sheet-action:active { transform: scale(0.99); }
.com-sheet-action:disabled {
  color: var(--color-text-tertiary);
  cursor: default;
}
.com-sheet-action svg { color: var(--color-primary); flex: 0 0 18px; }
.com-sheet-cancel {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  background: var(--color-surface-soft);
  border: 0;
  border-radius: 12px;
  color: var(--color-text-secondary);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.com-sheet-cancel:active { transform: scale(0.98); }

/* ─────────────────────────────────────────────────────────────
   Card de Pontos na home — total acumulado + dica de recompensas.
   Visual: card com gradient sutil, ícone destaque, "Em breve" pill.
   ───────────────────────────────────────────────────────────── */
.pontos-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 18px 0 4px;
  padding: 14px 16px;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(217, 203, 48, 0.18) 0%, rgba(217, 203, 48, 0) 60%),
    linear-gradient(135deg, #1F1B3D 0%, #4C1D95 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  color: #FFFFFF;
  box-shadow: 0 12px 28px rgba(31, 27, 61, 0.18);
}

.pontos-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pontos-card-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #D9CB30 0%, #F5C518 100%);
  color: #1F1B3D;
  border-radius: 12px;
  font-size: 20px;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(217, 203, 48, 0.35);
}

.pontos-card-text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}
.pontos-card-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.pontos-card-num {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
  color: #FFFFFF;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.pontos-card-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pontos-card-badge {
  flex: 0 0 auto;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1F1B3D;
  background: rgba(217, 203, 48, 0.92);
  border-radius: 100px;
}
.pontos-card-hint {
  font-size: 12.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.82);
}

/* ─────────────────────────────────────────────────────────────
   Sinal social — número discreto que mostra movimento sem ser ruído.
   Aparece embaixo da ação do dia e como linha solta na home.
   ───────────────────────────────────────────────────────────── */
.social-signal {
  margin: 4px 0 8px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--color-text-tertiary);
  letter-spacing: 0.01em;
}
.social-signal[hidden] { display: none; }
.social-signal::before {
  content: '●';
  display: inline-block;
  margin-right: 6px;
  font-size: 8px;
  vertical-align: middle;
  color: #10B981;
  animation: social-pulse 2.4s ease-in-out infinite;
}
.social-signal-row {
  margin: 0 0 14px;
  padding: 8px 12px;
  background: var(--color-surface-soft);
  border-radius: 10px;
}
@keyframes social-pulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

/* ─────────────────────────────────────────────────────────────
   Cards bloqueados: foto/cor saturada → preto-e-branco
   + reforço visual de "cadeado". A regra .trilha-card.locked
   existente já cuida do meta/CTA — aqui só dessaturo a arte.
   ───────────────────────────────────────────────────────────── */
.trilha-card.locked .trilha-card-photo {
  filter: grayscale(1) brightness(0.78) contrast(0.95);
}
.trilha-card.locked .trilha-card-icon {
  filter: grayscale(1);
  opacity: 0.85;
}
/* Cadeado da peek/tag mais presente nas bloqueadas */
.trilha-card.locked .trilha-card-peek-lock {
  opacity: 1;
  color: rgba(255, 255, 255, 0.9);
}
.trilha-card.locked .trilha-card-tag.is-soon {
  background: rgba(0, 0, 0, 0.55);
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: 0.06em;
}

/* ============================================================
   HOME CLEAN
   ============================================================ */

body.app-home .home-header {
  padding-bottom: 14px;
}

body.app-home .streak-pill {
  gap: 6px;
  min-height: 34px;
  padding: 8px 11px;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(199, 101, 58, 0.14);
  border-radius: 999px;
  color: var(--color-orange-deep);
  box-shadow: none;
}

body.app-home .streak-pill .flame-icon {
  width: 12px;
  height: 15px;
}

body.app-home .streak-pill .flame-icon path:first-child {
  fill: var(--color-orange);
}

body.app-home .streak-pill .flame-icon path:last-child {
  fill: rgba(199, 101, 58, 0.28);
}

body.app-home .streak-pill span {
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

body.app-home .freeze-pill {
  display: none !important;
}

.home-clean {
  gap: 12px;
  padding-top: 0;
}

.home-clean > .section-label {
  margin: 0 4px -6px;
  color: rgba(31, 27, 61, 0.44);
  letter-spacing: 0.12em;
  font-size: 10.5px;
}

.home-clean .continue-card,
.home-clean .continue-card.secundario {
  min-height: 268px;
  padding: 21px;
  border-radius: 21px;
  background:
    linear-gradient(180deg, rgba(31, 27, 61, 0.04) 0%, rgba(31, 27, 61, 0.3) 46%, rgba(31, 27, 61, 0.86) 100%),
    linear-gradient(135deg, rgba(199, 101, 58, 0.24), rgba(124, 58, 237, 0.18)),
    url("assets/home-aprender-bg.webp");
  background-size: cover;
  background-position: center 41%;
  border: 0;
  box-shadow: 0 14px 28px rgba(31, 27, 61, 0.1);
  opacity: 1;
}

.home-clean .continue-card .label {
  color: rgba(255, 255, 255, 0.76);
  letter-spacing: 0.12em;
  font-size: 10.5px;
}

.home-clean .continue-card .card-breadcrumb {
  color: rgba(255, 255, 255, 0.84);
  font-weight: 600;
  font-size: 12.5px;
}

.home-clean .continue-card .card-title {
  max-width: 276px;
  margin-bottom: 12px;
  font-size: 22px;
  line-height: 1.08;
  letter-spacing: 0;
}

.home-clean .continue-card .progress-bar-wrap {
  width: 68px;
  height: 4px;
  margin-top: 2px;
  background: rgba(255, 255, 255, 0.28);
}

.home-clean .continue-card .progress-label {
  margin: 0 0 13px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  font-weight: 700;
}

.home-clean .continue-card .btn-primary {
  width: auto;
  min-width: 96px;
  align-self: flex-start;
  border-radius: 999px;
  padding: 9px 15px;
  background: rgba(255, 255, 255, 0.94);
  color: #1F1B3D;
  font-size: 13px;
  box-shadow: 0 8px 18px rgba(31, 27, 61, 0.14);
}

.home-clean .thought-block,
body.app-home .home-clean .thought-block.bia-home {
  background: transparent;
  border: 0;
  border-left: 2px solid rgba(199, 101, 58, 0.5);
  border-radius: 0;
  box-shadow: none;
  padding: 2px 4px 2px 13px;
  gap: 5px;
}

.home-clean .thought-block .label,
body.app-home .home-clean .thought-block.bia-home .label {
  color: var(--color-orange-deep);
  font-size: 10.5px;
  letter-spacing: 0.12em;
}

.home-clean .thought-quote {
  margin: 0;
  color: #1F1B3D;
  font-size: 13.25px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.38;
}

.home-clean .thought-recall {
  display: none;
}

.home-clean .challenge-card {
  padding: 12px 13px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(199, 101, 58, 0.12);
  box-shadow: none;
  gap: 8px;
}

.home-clean .challenge-header-row {
  margin-bottom: 0;
}

.home-clean .challenge-text {
  margin: 0;
  color: #1F1B3D;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.home-clean .challenge-card .xp-pill {
  display: none;
}

.home-clean .challenge-card .btn-outline {
  width: auto;
  align-self: flex-start;
  padding: 7px 12px;
  border-radius: 999px;
  background: #fff;
  border-color: rgba(199, 101, 58, 0.2);
  color: var(--color-orange-deep);
  font-size: 12px;
  font-weight: 700;
}

.home-clean .challenge-card.secundario {
  opacity: 0.78;
}

.home-clean .home-community-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.54);
  border: 1px solid rgba(31, 27, 61, 0.07);
  color: #1F1B3D;
  text-decoration: none;
  box-shadow: none;
  min-height: 76px;
}

.home-clean .home-community-card:active {
  transform: scale(0.985);
}

.home-clean .home-community-copy {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.home-clean .home-community-copy .label {
  color: var(--color-orange-deep);
  font-size: 10.5px;
  letter-spacing: 0.12em;
}

.home-clean .home-community-copy strong {
  max-width: 230px;
  color: #1F1B3D;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.24;
}

.home-clean .home-community-avatars {
  display: flex;
  flex-shrink: 0;
  padding-right: 10px;
}

.home-clean .home-community-avatars span {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  margin-right: -10px;
  border: 2px solid #FFFEEC;
  border-radius: 50%;
  background: #241D44;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  box-shadow: none;
}

.home-clean .home-community-avatars span:nth-child(2) {
  background: var(--color-orange);
}

.home-clean .home-community-avatars span:nth-child(3) {
  background: #C8BE32;
  color: #1F1B3D;
}

.home-clean .daily-streak-calendar {
  margin: 0;
  padding: 9px 2px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.home-clean .cal-day {
  gap: 6px;
}

.home-clean .cal-bubble {
  width: 24px;
  height: 24px;
  border-width: 1.5px;
  background: rgba(255, 255, 255, 0.5);
}

.home-clean .cal-name {
  font-size: 10px;
  color: rgba(31, 27, 61, 0.38);
}

.home-clean #social-signal-acao,
.home-clean #social-signal-trilha {
  display: none !important;
}

/* ============================================================
   DESAFIOS + PERFIL CLEAN
   ============================================================ */

body.app-desafios .page-header,
body.app-perfil .page-header {
  padding-bottom: 10px;
  gap: 2px;
}

body.app-desafios .page-header .label,
body.app-perfil .page-header .label {
  color: rgba(31, 27, 61, 0.48);
  letter-spacing: 0.12em;
}

body.app-desafios .page-title,
body.app-perfil .page-title {
  font-size: 28px;
  letter-spacing: 0;
}

body.app-desafios .page-content,
body.app-perfil .page-content {
  gap: 14px;
  overflow-x: hidden;
}

body.app-desafios .bia-note,
body.app-desafios .pos-acao,
body.app-perfil .bia-summary {
  background: transparent;
  border: 0;
  border-left: 2px solid rgba(199, 101, 58, 0.5);
  border-radius: 0;
  box-shadow: none;
  padding: 2px 4px 2px 13px;
}

body.app-desafios .bia-note > span,
body.app-perfil .bia-summary > span {
  color: var(--color-orange-deep);
  font-size: 10.5px;
  letter-spacing: 0.12em;
}

body.app-desafios .bia-note > p,
body.app-perfil .bia-summary > p {
  color: #1F1B3D;
  font-size: 13.25px;
  font-weight: 600;
  line-height: 1.38;
}

body.app-desafios .desafio-ritual {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

body.app-desafios .desafio-ritual div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid rgba(31, 27, 61, 0.07);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: none;
}

body.app-desafios .desafio-ritual strong {
  color: #1F1B3D;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

body.app-desafios .desafio-ritual span {
  color: rgba(31, 27, 61, 0.44);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

body.app-desafios .desafio-card {
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(199, 101, 58, 0.12);
  border-radius: 18px;
  box-shadow: none;
  color: var(--color-text-primary);
  gap: 12px;
  padding: 16px;
  overflow: hidden;
}

body.app-desafios .desafio-card .desafio-top {
  justify-content: flex-start;
  order: 2;
}

body.app-desafios .desafio-card .xp-pill {
  background: #FFF0E7;
  box-shadow: none;
  color: var(--color-orange-deep);
  font-size: 11px;
  padding: 5px 10px;
}

body.app-desafios .desafio-card .desafio-text {
  color: #1F1B3D;
  font-size: 20px;
  line-height: 1.14;
  letter-spacing: 0;
  text-shadow: none;
  order: 1;
}

body.app-desafios .desafio-card .desafio-link-trilha {
  color: rgba(31, 27, 61, 0.58);
  font-size: 12.5px;
  margin: -4px 0 2px;
  order: 3;
}

body.app-desafios .desafio-card .insight-block {
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(31, 27, 61, 0.08);
  border-radius: 0;
  box-shadow: none;
  max-width: 100%;
  min-width: 0;
  padding: 13px 0 0;
  order: 4;
}

body.app-desafios .desafio-card .insight-label {
  color: #1F1B3D;
  font-size: 13px;
}

body.app-desafios .desafio-card .insight-hint {
  color: rgba(31, 27, 61, 0.56);
  font-size: 12px;
}

body.app-desafios .desafio-card .insight-input {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(236, 232, 247, 0.95);
  border-radius: 14px;
  max-width: 100%;
  min-width: 0;
}

body.app-desafios .desafio-card .btn-dark {
  background: #242424;
  border-radius: 999px;
  font-size: 13px;
  margin-top: 2px;
  padding: 11px 15px;
  order: 5;
}

body.app-desafios .btn-dark:disabled {
  background: rgba(255, 255, 255, 0.66);
  color: rgba(31, 27, 61, 0.35);
}

body.app-desafios .section-heading {
  color: rgba(31, 27, 61, 0.46);
  letter-spacing: 0.12em;
  margin: 3px 4px -4px;
}

body.app-desafios .desafio-done-item {
  background: rgba(255, 255, 255, 0.52);
  border: 1px solid rgba(31, 27, 61, 0.06);
  border-radius: 14px;
  padding: 12px 13px;
}

body.app-desafios .desafio-check {
  background: #FFF0E7;
  color: var(--color-orange-deep);
}

body.app-desafios .desafio-done-insight {
  background: rgba(255, 255, 255, 0.7);
  border-top-color: rgba(199, 101, 58, 0.16);
}

body.app-perfil .perfil-strip {
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(31, 27, 61, 0.06);
  box-shadow: none;
}

body.app-perfil .perfil-strip {
  border-radius: 18px;
  padding: 12px 13px;
}

body.app-perfil .perfil-strip-avatar {
  box-shadow: none;
}

body.app-perfil .perfil-stats {
  gap: 8px;
}

body.app-perfil .perfil-stat {
  background: transparent;
  border: 1px solid rgba(199, 101, 58, 0.12);
  border-radius: 14px;
  padding: 12px 6px;
}

body.app-perfil .perfil-stat-val {
  font-size: 19px;
}

body.app-perfil .perfil-stat-label,
body.app-perfil .section-heading,
body.app-perfil .badge-section-title {
  color: rgba(31, 27, 61, 0.46);
  letter-spacing: 0.12em;
}

body.app-perfil .badge-grid {
  gap: 8px;
}

body.app-perfil .badge {
  background: rgba(255, 255, 255, 0.52);
  border: 1px solid rgba(31, 27, 61, 0.07);
  border-radius: 14px;
  gap: 5px;
  padding: 12px 10px;
}

body.app-perfil .badge-icon {
  width: 34px;
  height: 34px;
}

body.app-perfil .badge.unlocked .badge-icon {
  box-shadow: none;
}

body.app-perfil .badge-name {
  font-size: 11.5px;
}

body.app-perfil .badge-desc {
  font-size: 10.5px;
}

body.app-perfil .perfil-data {
  margin-top: 6px;
}

body.app-perfil .perfil-data-toggle,
body.app-perfil .perfil-item {
  background: transparent;
  border: 1px solid rgba(31, 27, 61, 0.07);
  box-shadow: none;
}

body.app-perfil .perfil-data-toggle {
  padding: 12px 13px;
}

body.app-perfil .config-list .perfil-item {
  padding: 12px 13px;
}

/* ============================================================
   COMUNIDADE + PONTOS CLEAN
   ============================================================ */

body.app-comunidade .page-header {
  padding-bottom: 10px;
  gap: 2px;
}

body.app-comunidade .page-header .label {
  color: rgba(31, 27, 61, 0.48);
  letter-spacing: 0.12em;
}

body.app-comunidade .page-title {
  font-size: 28px;
  letter-spacing: 0;
}

body.app-comunidade .page-content {
  gap: 14px;
  overflow-x: hidden;
  padding-right: 28px;
  /* Bottom-nav agora ocupa espaco proprio (flex child), nao precisa compensar. */
  padding-bottom: 16px;
}

body.app-comunidade .bia-note {
  background: transparent;
  border: 0;
  border-left: 2px solid rgba(199, 101, 58, 0.5);
  border-radius: 0;
  box-shadow: none;
  padding: 2px 4px 2px 13px;
}

body.app-comunidade .bia-note > span {
  color: var(--color-orange-deep);
  font-size: 10.5px;
  letter-spacing: 0.12em;
}

body.app-comunidade .bia-note > p {
  color: #1F1B3D;
  font-size: 13.25px;
  font-weight: 600;
  line-height: 1.38;
  overflow-wrap: anywhere;
}

body.app-comunidade .composer {
  margin: 0;
  padding: 14px;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(31, 27, 61, 0.06);
  border-radius: 18px;
  box-shadow: none;
  max-width: 100%;
  min-width: 0;
}

body.app-comunidade .composer-input-wrap,
body.app-comunidade .composer-foot {
  max-width: 100%;
  min-width: 0;
}

body.app-comunidade .composer-row {
  gap: 11px;
}

body.app-comunidade .composer-avatar,
body.app-comunidade .post-avatar {
  background: rgba(124, 58, 237, 0.1) !important;
  border: 1px solid rgba(124, 58, 237, 0.12);
  color: #5B21B6;
  box-shadow: none;
}

body.app-comunidade .composer-avatar {
  flex-basis: 36px;
  width: 36px;
  height: 36px;
  font-size: 14px;
}

body.app-comunidade .composer-input {
  min-height: 64px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: #1F1B3D;
  font-size: 14px;
  line-height: 1.45;
}

body.app-comunidade .composer-input:focus {
  background: transparent;
  border-color: transparent;
}

body.app-comunidade .composer-foot {
  padding-top: 9px;
  border-top: 1px solid rgba(31, 27, 61, 0.07);
}

body.app-comunidade .composer-counter {
  color: rgba(31, 27, 61, 0.42);
  letter-spacing: 0;
}

body.app-comunidade .composer-publish {
  min-height: 32px;
  padding: 7px 13px;
  background: #241D44;
  border-radius: 999px;
  box-shadow: none;
  font-size: 12.5px;
}

body.app-comunidade .composer-publish:disabled {
  background: rgba(31, 27, 61, 0.08);
  color: rgba(31, 27, 61, 0.34);
  opacity: 1;
}

body.app-comunidade .feed-tabs {
  width: 100%;
  margin: 0;
  padding: 3px;
  background: rgba(31, 27, 61, 0.06);
  border-radius: 999px;
}

body.app-comunidade .feed-tab {
  flex: 1;
  padding: 7px 12px;
  color: rgba(31, 27, 61, 0.52);
  font-size: 12px;
  letter-spacing: 0;
}

body.app-comunidade .feed-tab.active {
  background: rgba(255, 255, 255, 0.78);
  color: #1F1B3D;
  box-shadow: none;
}

body.app-comunidade .feed {
  gap: 9px;
}

body.app-comunidade .com-people-strip {
  margin-bottom: 11px;
}

body.app-comunidade .com-strip-head {
  margin-bottom: 7px;
}

body.app-comunidade .com-person-card {
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(31, 27, 61, 0.06);
  box-shadow: none;
}

body.app-comunidade .com-person-follow {
  background: #241D44;
  border-color: #241D44;
  box-shadow: none;
}

body.app-comunidade .com-person-follow.is-following {
  background: rgba(31, 27, 61, 0.05);
  border-color: rgba(31, 27, 61, 0.07);
  color: rgba(31, 27, 61, 0.62);
}

body.app-comunidade .post {
  padding: 13px 13px 11px;
  background: rgba(255, 255, 255, 0.56);
  border: 1px solid rgba(31, 27, 61, 0.06);
  border-radius: 18px;
  box-shadow: none;
  max-width: 100%;
  min-width: 0;
}

body.app-comunidade .post-head {
  gap: 10px;
}

body.app-comunidade .post-avatar {
  flex-basis: 34px;
  width: 34px;
  height: 34px;
  font-size: 13px;
}

body.app-comunidade .post-author {
  font-size: 13.5px;
}

body.app-comunidade .post-badge-self,
body.app-comunidade .post-tag {
  padding: 2px 7px;
  background: rgba(31, 27, 61, 0.05);
  color: rgba(31, 27, 61, 0.58);
  font-size: 10px;
  letter-spacing: 0;
  text-transform: none;
}

body.app-comunidade .post-time {
  color: rgba(31, 27, 61, 0.42);
  letter-spacing: 0;
}

body.app-comunidade .post-text {
  margin: 10px 0 11px;
  padding-left: 44px;
  color: #1F1B3D;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.42;
  overflow-wrap: anywhere;
}

body.app-comunidade .post-foot {
  gap: 16px;
  padding-left: 44px;
}

body.app-comunidade .post-action {
  padding: 3px 0;
  color: rgba(31, 27, 61, 0.42);
  font-size: 12px;
  font-weight: 700;
}

body.app-comunidade .post-action.like.is-liked {
  color: #7C3AED;
}

body.app-comunidade .feed-end {
  margin: 12px 0 0;
  color: rgba(31, 27, 61, 0.36);
  font-size: 11.5px;
  letter-spacing: 0;
}

.home-clean .pontos-card {
  margin: 0;
  padding: 13px;
  gap: 9px;
  background: rgba(255, 255, 255, 0.56);
  border: 1px solid rgba(31, 27, 61, 0.06);
  border-radius: 16px;
  color: #1F1B3D;
  box-shadow: none;
}

.home-clean .pontos-card-top {
  gap: 10px;
}

.home-clean .pontos-card-icon {
  flex-basis: 34px;
  width: 34px;
  height: 34px;
  background: rgba(124, 58, 237, 0.1);
  color: #5B21B6;
  border: 1px solid rgba(124, 58, 237, 0.12);
  border-radius: 12px;
  box-shadow: none;
  font-size: 0;
}

.home-clean .pontos-card-icon::before {
  content: 'P';
  font-size: 14px;
  font-weight: 800;
}

.home-clean .pontos-card-label {
  color: rgba(31, 27, 61, 0.48);
  font-size: 10.5px;
  letter-spacing: 0.08em;
}

.home-clean .pontos-card-num {
  color: #1F1B3D;
  font-size: 24px;
  line-height: 1;
}

.home-clean .pontos-card-foot {
  gap: 8px;
  padding-top: 9px;
  border-top: 1px solid rgba(31, 27, 61, 0.07);
}

.home-clean .pontos-card-badge {
  padding: 4px 8px;
  background: rgba(199, 101, 58, 0.1);
  color: var(--color-orange-deep);
  font-size: 10px;
  letter-spacing: 0;
  text-transform: none;
}

.home-clean .pontos-card-hint {
  color: rgba(31, 27, 61, 0.54);
  font-size: 12px;
}

/* ============================================================
   COMUNIDADE MOBILE CLEAN
   ============================================================ */

body.app-comunidade {
  background: #FAF8FF;
}

body.app-comunidade.com-locked {
  position: static;
  inset: auto;
  width: 100%;
}

body.app-comunidade .app-frame {
  position: relative;
  isolation: isolate;
}

body.app-comunidade .com-header {
  align-items: center;
  padding-bottom: 12px;
}

body.app-comunidade .com-msg-btn {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(31, 27, 61, 0.07);
  border-radius: 14px;
  color: #5B21B6;
  box-shadow: none;
}

body.app-comunidade .com-msg-btn:active {
  transform: scale(0.96);
  background: rgba(255, 255, 255, 0.82);
}

body.app-comunidade .com-msg-badge,
body.app-comunidade .com-msg-unread {
  background: #7C3AED;
  box-shadow: none;
}

body.app-comunidade .com-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  z-index: 1100;
  padding-top: 0;
  background: #FFFEEC;
}

body.app-comunidade .com-overlay-head {
  min-height: 62px;
  padding: 12px 14px;
  background: rgba(255, 254, 236, 0.94);
  border-bottom: 1px solid rgba(31, 27, 61, 0.06);
}

body.app-comunidade .com-overlay-back {
  min-width: 40px;
  min-height: 40px;
  margin-left: 0;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(31, 27, 61, 0.07);
  border-radius: 14px;
  color: #1F1B3D;
}

body.app-comunidade .com-overlay-back:active {
  background: rgba(255, 255, 255, 0.82);
}

body.app-comunidade .com-overlay-title {
  font-size: 16px;
  letter-spacing: 0;
}

body.app-comunidade .com-overlay-body {
  overflow-x: hidden;
  padding: 14px;
  background: #FFFEEC;
}

body.app-comunidade .com-overlay-foot {
  padding: 10px 14px max(14px, env(safe-area-inset-bottom, 0px));
  background: rgba(255, 254, 236, 0.96);
  border-top: 1px solid rgba(31, 27, 61, 0.06);
}

body.app-comunidade .com-foot-input {
  min-height: 42px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(31, 27, 61, 0.08);
  box-shadow: none;
  font-size: 16px;
}

body.app-comunidade .com-foot-send {
  flex-basis: 42px;
  width: 42px;
  height: 42px;
  background: #241D44;
  box-shadow: none;
}

body.app-comunidade .com-section-label {
  color: rgba(31, 27, 61, 0.42);
  letter-spacing: 0.08em;
}

body.app-comunidade .com-comment,
body.app-comunidade .com-msg-item,
body.app-comunidade .com-suggest-item,
body.app-comunidade .com-profile-card,
body.app-comunidade .com-profile-social div,
body.app-comunidade .com-profile-stats div,
body.app-comunidade .com-profile-story,
body.app-comunidade .com-profile-post,
body.app-comunidade .com-profile-badges span {
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(31, 27, 61, 0.06);
  border-radius: 16px;
  box-shadow: none;
}

body.app-comunidade .com-comment.is-mine {
  background: rgba(124, 58, 237, 0.08);
  border-color: rgba(124, 58, 237, 0.12);
}

body.app-comunidade .com-comment-avatar,
body.app-comunidade .com-msg-avatar,
body.app-comunidade .com-chat-avatar,
body.app-comunidade .com-person-avatar,
body.app-comunidade .com-sheet-avatar {
  background: rgba(124, 58, 237, 0.1) !important;
  border: 1px solid rgba(124, 58, 237, 0.12);
  color: #5B21B6;
  box-shadow: none;
}

body.app-comunidade .has-photo {
  background: transparent !important;
  color: transparent;
}

body.app-comunidade .com-profile-avatar.has-photo {
  border-color: rgba(255, 255, 255, 0.86);
}

body.app-comunidade .com-profile-cover {
  box-shadow: inset 0 -26px 44px rgba(31, 27, 61, 0.1);
}

body.app-comunidade .com-profile-tabs {
  background: rgba(31, 27, 61, 0.05);
}

body.app-comunidade .com-profile-tabs button.active {
  background: rgba(255, 255, 255, 0.78);
  box-shadow: none;
}

body.app-comunidade .com-empty {
  background: rgba(255, 255, 255, 0.48);
  border: 1px solid rgba(31, 27, 61, 0.05);
  color: rgba(31, 27, 61, 0.48);
}

body.app-comunidade .com-suggest-cta {
  background: #241D44;
  box-shadow: none;
}

body.app-comunidade .com-chat-head {
  padding: 10px 14px;
}

body.app-comunidade .com-overlay-chat {
  overflow: hidden;
}

body.app-comunidade .com-overlay-chat .com-chat-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

body.app-comunidade .com-overlay-chat .com-overlay-foot {
  flex: 0 0 auto;
}

body.app-comunidade .com-chat-body {
  background: #FFFEEC;
  padding: 14px;
}

body.app-comunidade .com-chat-empty {
  color: rgba(31, 27, 61, 0.48);
}

body.app-comunidade .com-chat-empty strong {
  color: #1F1B3D;
}

body.app-comunidade .com-msg-bubble {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(31, 27, 61, 0.06);
  box-shadow: none;
}

body.app-comunidade .com-msg-bubble.is-mine {
  background: #7C3AED;
  border-color: #7C3AED;
}

body.app-comunidade .com-sheet {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1300;
}

body.app-comunidade .com-sheet-backdrop {
  background: rgba(31, 27, 61, 0.28);
}

body.app-comunidade .com-sheet-content {
  width: 100%;
  max-width: 100%;
  background: #FFFEEC;
  border: 1px solid rgba(31, 27, 61, 0.06);
  border-bottom: 0;
  box-shadow: 0 -14px 30px rgba(31, 27, 61, 0.12);
}

body.app-comunidade .com-sheet-action {
  border-bottom-color: rgba(31, 27, 61, 0.05);
}

body.app-comunidade .com-sheet-action:hover,
body.app-comunidade .com-sheet-cancel {
  background: rgba(31, 27, 61, 0.05);
}

body.app-comunidade .com-msg-prev,
body.app-comunidade .com-chat-name,
body.app-comunidade .com-empty,
body.app-comunidade .com-comment-body p,
body.app-comunidade .com-msg-bubble p,
body.app-comunidade .com-sheet-peer-info strong,
body.app-comunidade .com-profile-bio,
body.app-comunidade .com-profile-story,
body.app-comunidade .com-profile-post-text,
body.app-comunidade .com-person-text small {
  overflow-wrap: anywhere;
}

@media (min-width: 500px) {
  body.app-comunidade {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    height: auto;
    padding: var(--space-24);
    position: static;
    inset: auto;
    overflow: auto;
  }

  body.app-comunidade.com-locked {
    overflow: auto;
  }

  body.app-comunidade .app-frame {
    width: 390px;
    max-width: 390px;
    height: 844px;
    max-height: 844px;
    border-radius: var(--radius-app);
    box-shadow: var(--shadow-frame);
    overflow: hidden;
  }

  body.app-comunidade .bottom-nav {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
  }
}

@media (max-width: 499px), (display-mode: standalone) and (hover: none) {
  body.app-comunidade.com-locked {
    position: fixed;
    inset: 0;
    width: 100%;
    overflow: hidden;
  }
}


/* ============================================================
   LOW-END DEVICE OPTIMIZATIONS
   Aplicado quando ui.js detecta deviceMemory<4, hardwareConcurrency<4,
   saveData ou connection 2g/3g. Desliga efeitos caros pra GPU/CPU.
   ============================================================ */

html.lowend .pause-overlay,
html.lowend .ui-modal-overlay,
html.lowend .trilha-card.has-photo .trilha-card-icon,
html.lowend .trilha-card.has-photo .trilha-card-peek-lock {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Cancela view-transition-name pra browser não montar a captura cara */
html.lowend .bottom-nav,
html.lowend .page-header,
html.lowend .home-header {
  view-transition-name: none;
}

/* Remove compositing GPU desnecessário em elementos não animados */
html.lowend .continue-card,
html.lowend .challenge-card,
html.lowend .trilha-card,
html.lowend .thought-block {
  transform: none;
  backface-visibility: visible;
  will-change: auto;
}

/* Anima transições com menos frames em devices fracos */
html.lowend * {
  animation-duration: 0.001ms !important;
  transition-duration: 80ms !important;
}

/* Mas mantém o feedback de toque (scale) — é instantâneo, vale a pena */
html.lowend .btn-primary:active,
html.lowend .btn-outline:active,
html.lowend .btn-dark:active,
html.lowend .nav-item:active {
  transition-duration: 50ms !important;
}


/* ============================================================
   MICROINTERAÇÕES
   Press feedback em cards, streak pulse, contador animado,
   edge-swipe back, drag-dismiss em modais.
   ============================================================ */

/* Press feedback — scale-down quando .is-pressing é adicionado via JS.
   Spring easing dá sensação de mola na soltura. */
.continue-card,
.challenge-card,
.pontos-card,
.thought-block,
.perfil-item,
.trilhas-pillar,
.mission-modal-btn-primary,
.mission-modal-btn-secondary,
.cal-bubble,
.day,
.desafio-feito-stat {
  transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 240ms ease,
              opacity 200ms ease;
}

.continue-card.is-pressing,
.challenge-card.is-pressing,
.pontos-card.is-pressing,
.thought-block.is-pressing,
.perfil-item.is-pressing,
.trilhas-pillar.is-pressing,
.mission-modal-btn-primary.is-pressing,
.mission-modal-btn-secondary.is-pressing,
.cal-bubble.is-pressing,
.day.is-pressing,
.desafio-feito-stat.is-pressing,
.nav-item.is-pressing {
  transform: scale(0.97);
  transition-duration: 100ms;
  transition-timing-function: ease-out;
}

/* Botões já têm :active próprio em alguns lugares, mas a classe is-pressing
   garante consistência cross-browser (Android tem :active inconsistente). */
.btn-primary.is-pressing,
.btn-outline.is-pressing,
.btn-dark.is-pressing {
  transform: scale(0.97);
  transition-duration: 100ms;
}

/* ── Streak pulse — animação de chama crescendo quando o número muda ── */
@keyframes streakPulseBig {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.18); }
  70%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}
@keyframes streakFlameGlow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(202, 196, 38, 0)); }
  50%      { filter: drop-shadow(0 0 6px rgba(202, 196, 38, 0.85)); }
}

.streak-pill.is-pulsing {
  animation: streakPulseBig 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.streak-pill.is-pulsing .flame-icon {
  animation: streakFlameGlow 600ms ease;
}

/* ── Pontos card pulse — leve "pop" quando ganha XP ── */
@keyframes pontosCardPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.025); box-shadow: 0 14px 32px rgba(124, 58, 237, 0.18); }
  100% { transform: scale(1); }
}
.pontos-card.is-pulsing {
  animation: pontosCardPop 580ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Edge-swipe back — desloca a página levemente com o dedo ──
   Aplicado SÓ enquanto html.is-swiping-back está presente. Fora desse momento,
   .app-frame fica sem transform pra não criar containing block pra fixed. */
html.is-swiping-back .app-frame {
  transform: translateX(var(--edge-swipe-x, 0));
  transition: none;
  pointer-events: none;
}
/* Após soltar, volta com animação suave */
html.is-swiping-back-release .app-frame {
  transform: translateX(0);
  transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ── Parallax sutil — backgrounds "respiram" com o scroll ──────────────────
   JS define --scroll-y em <html>. Preservamos a position-y original (42%)
   adicionando offset bem pequeno. Em 500px de scroll o BG move ~10px. */
.continue-card {
  background-position-y: calc(42% + (var(--scroll-y, 0px) * 0.02));
}
.challenge-card {
  background-position-y: calc(50% + (var(--scroll-y, 0px) * 0.02));
}

/* ── Drag-dismiss modais — durante drag o JS aplica transform inline ── */
/* Opt-in: só painéis com [data-drag-dismiss] ganham o gesto + indicador */
[data-drag-dismiss] {
  position: relative;
  touch-action: pan-y;
  will-change: transform;
  padding-top: 26px !important;
}

/* Indicador (bolinha alongada) no topo — dica visual de "arraste pra baixo" */
[data-drag-dismiss]::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 38px;
  height: 4px;
  background: rgba(31, 27, 61, 0.18);
  border-radius: 2px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 1;
}

/* Em low-end / reduced-motion, sem animação spring */
html.lowend .continue-card,
html.lowend .challenge-card,
html.lowend .pontos-card,
html.lowend .thought-block,
html.lowend .perfil-item {
  transition-duration: 100ms !important;
  transition-timing-function: ease-out !important;
}
html.lowend .streak-pill.is-pulsing,
html.lowend .pontos-card.is-pulsing {
  animation: none;
}
html.lowend .has-parallax,
html.lowend .continue-card,
html.lowend .challenge-card {
  background-position-y: 50%;
}

@media (prefers-reduced-motion: reduce) {
  .continue-card,
  .challenge-card,
  .pontos-card,
  .thought-block,
  .perfil-item,
  .trilhas-pillar,
  .cal-bubble,
  .day {
    transition: none !important;
  }
  .streak-pill.is-pulsing,
  .pontos-card.is-pulsing {
    animation: none;
  }
}

/* ============================================================
   AULA + EXERCICIOS CLEAN
   ============================================================ */

body.app-aula,
body.app-exercicios {
  background: #FFFEEC;
}

body.app-aula .app-frame,
body.app-exercicios .app-frame {
  background:
    radial-gradient(circle at 18% 0%, rgba(199, 101, 58, 0.08), transparent 30%),
    #FFFEEC;
}

body.app-aula .lesson-header,
body.app-exercicios .ex-header {
  background: rgba(255, 254, 236, 0.96);
  border-bottom: 1px solid rgba(31, 27, 61, 0.07);
}

body.app-aula .lesson-header {
  gap: 12px;
  padding-bottom: 13px;
}

body.app-aula .lesson-header-category,
body.app-exercicios .ex-header .label {
  color: rgba(31, 27, 61, 0.5);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body.app-aula .lesson-counter,
body.app-exercicios .ex-step {
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(199, 101, 58, 0.12);
  border-radius: 999px;
  color: var(--color-orange-deep);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  padding: 6px 10px;
}

body.app-aula .lesson-content {
  gap: 18px;
  padding: 18px 22px 108px;
}

body.app-aula .lesson-intro {
  gap: 7px;
}

body.app-aula .lesson-title {
  color: #1F1B3D;
  font-size: 27px;
  line-height: 1.1;
  letter-spacing: 0;
}

body.app-aula .lesson-meta-info {
  color: rgba(31, 27, 61, 0.48);
  font-size: 12.5px;
  font-weight: 700;
}

body.app-aula .lesson-body,
body.app-aula .lesson-list li {
  color: rgba(31, 27, 61, 0.86);
  font-size: 15.25px;
  line-height: 1.66;
}

body.app-aula .lesson-section-heading {
  color: #1F1B3D;
  font-size: 18px;
  letter-spacing: 0;
}

body.app-aula .lesson-callout,
body.app-aula .lesson-highlight,
body.app-aula .lesson-reflection {
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(31, 27, 61, 0.07);
  border-radius: 17px;
  box-shadow: none;
}

body.app-aula .bia-note {
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(31, 27, 61, 0.07);
  border-left: 3px solid rgba(199, 101, 58, 0.72);
  border-radius: 17px;
  box-shadow: none;
}

body.app-aula .bia-note > span {
  color: var(--color-orange-deep);
}

body.app-aula .bia-note > p {
  color: #1F1B3D;
  font-size: 15px;
  line-height: 1.5;
}

body.app-aula .lesson-callout-heading,
body.app-aula .lesson-reflection-label,
body.app-aula .lesson-list li strong {
  color: var(--color-orange-deep);
}

body.app-aula .lesson-highlight {
  padding: 17px 18px;
  text-align: left;
}

body.app-aula .lesson-highlight p {
  color: #1F1B3D;
  font-size: 14.5px;
  line-height: 1.5;
}

body.app-aula .lesson-reflection-input {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(31, 27, 61, 0.09);
  border-radius: 14px;
  font-size: 16px;
}

body.app-aula .lesson-footer,
body.app-exercicios .ex-footer {
  background: rgba(255, 254, 236, 0.96);
  border-top: 1px solid rgba(31, 27, 61, 0.07);
  box-shadow: 0 -10px 22px rgba(255, 254, 236, 0.78);
}

body.app-aula .lesson-footer .btn-primary,
body.app-exercicios .ex-confirm-wrap .btn-primary,
body.app-exercicios .feedback-btn,
body.app-exercicios .reward-bottom .btn-primary {
  border-radius: 999px;
  background: #241D44;
  box-shadow: none;
}

body.app-exercicios .ex-header {
  padding-top: max(var(--space-16), calc(env(safe-area-inset-top) + 8px));
}

body.app-exercicios .ex-header-top {
  gap: 12px;
}

body.app-exercicios .ex-meta-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

body.app-exercicios .ex-progress-bar {
  height: 5px;
  background: rgba(31, 27, 61, 0.08);
}

body.app-exercicios .ex-progress-fill {
  background: #241D44;
  box-shadow: none;
}

body.app-exercicios .ex-content {
  padding: 20px 22px 12px;
}

body.app-exercicios .ex-card {
  gap: 14px;
}

body.app-exercicios .ex-question {
  color: #1F1B3D;
  font-size: 23px;
  line-height: 1.16;
  letter-spacing: 0;
}

body.app-exercicios .option-btn,
body.app-exercicios .classify-chip,
body.app-exercicios .classify-zone,
body.app-exercicios .order-item {
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(31, 27, 61, 0.08);
  border-radius: 16px;
  box-shadow: none;
  color: #1F1B3D;
}

body.app-exercicios .option-btn {
  min-height: 54px;
  padding: 15px 14px;
  font-size: 15px;
  line-height: 1.28;
}

body.app-exercicios .option-btn.selected,
body.app-exercicios .classify-chip.selected,
body.app-exercicios .classify-zone.droppable {
  background: #FFF0E7;
  border-color: rgba(199, 101, 58, 0.34);
  color: var(--color-orange-deep);
}

body.app-exercicios .option-btn.confirmed-correct,
body.app-exercicios .order-item.confirmed.correct {
  background: #E8F7EF;
  border-color: rgba(16, 185, 129, 0.32);
  color: #065F46;
}

body.app-exercicios .option-btn.confirmed-wrong,
body.app-exercicios .order-item.confirmed.wrong {
  background: #FFF0F0;
  border-color: rgba(239, 68, 68, 0.28);
  color: #991B1B;
}

body.app-exercicios .ex-feedback {
  min-height: 188px;
  background: rgba(255, 255, 255, 0.72);
  border-top: 1px solid rgba(31, 27, 61, 0.07);
}

body.app-exercicios .ex-feedback.correct,
body.app-exercicios .ex-feedback.wrong {
  border-top-width: 1px;
}

body.app-exercicios .feedback-title {
  letter-spacing: 0;
}

body.app-exercicios .reward-overlay {
  background:
    radial-gradient(circle at 50% 14%, rgba(199, 101, 58, 0.12), transparent 36%),
    #FFFEEC;
}

body.app-exercicios .reward-icon-wrap {
  background: #241D44;
  box-shadow: none;
  animation: none;
}

body.app-exercicios .reward-title {
  color: #1F1B3D;
  letter-spacing: 0;
}

body.app-exercicios .reward-xp,
body.app-exercicios .reward-bia-msg {
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(31, 27, 61, 0.07);
  color: #1F1B3D;
}

body.app-exercicios .pause-card {
  border-radius: 21px 21px 0 0;
  box-shadow: none;
}