/* AF Plataforma · Phase Dashboards & LifeOS Visual Layer v2
   Camada aditiva. Não altera estrutura, rotas, handlers ou conteúdo existente.
   Reforça a arquitetura visual das 5 fases e do LifeOS. */

.lifeos-home .lifeos-card {
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(35,26,52,.65), rgba(18,14,28,.75));
  border: 1px solid rgba(212,175,55,.18);
  box-shadow: 0 8px 28px rgba(0,0,0,.12);
  transition: transform .2s ease, box-shadow .2s ease;
}
.lifeos-home .lifeos-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(0,0,0,.18);
  border-color: rgba(212,175,55,.35);
}
.lifeos-home .lifeos-phase {
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  transition: border-color .2s ease, background .2s ease;
}
.lifeos-home .lifeos-phase:hover {
  border-color: rgba(212,175,55,.4);
  background: rgba(212,175,55,.06);
}

/* === FASES — visual por número === */
.view:has(.hero-line) .hero-line {
  font-weight: 600;
  letter-spacing: .18em;
}
.view:has(.hero-line:contains("Fase 1")) {
  --fase-accent: #C4A7FF;
}
.view:has(.hero-line:contains("Fase 2")) {
  --fase-accent: #A78BFA;
}
.view:has(.hero-line:contains("Fase 3")) {
  --fase-accent: #F1D879;
}
.view:has(.hero-line:contains("Fase 4")) {
  --fase-accent: #72D6A1;
}
.view:has(.hero-line:contains("Fase 5")) {
  --fase-accent: #FF6B75;
}

.view:has(.hero-line) .mod-row {
  border-left: 3px solid var(--fase-accent, #D4AF37);
  border-radius: 12px;
  background: linear-gradient(115deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  margin-bottom: 8px;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.view:has(.hero-line) .mod-row:hover {
  background: rgba(255,255,255,.06);
  transform: translateX(2px);
}
.view:has(.hero-line) .mod-num {
  color: var(--fase-accent, #F1D879);
  font-weight: 600;
}

/* Barras de progresso simples (CSS puro) */
.progress-track {
  height: 6px;
  background: rgba(255,255,255,.08);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 8px;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6D28D9, #D4AF37);
  border-radius: 999px;
  width: var(--p, 0%);
}

/* Cards de fase mais elegantes */
.mod-row {
  position: relative;
}
.mod-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  background: linear-gradient(to bottom, #6D28D9, #D4AF37);
  border-radius: 2px;
  opacity: .55;
}

/* Mentor central style hints */
.mentor-overview-card {
  border-radius: 16px;
  border: 1px solid rgba(212,175,55,.2);
  background: linear-gradient(160deg, rgba(28,22,42,.7), rgba(16,12,24,.8));
  padding: 20px;
}

/* Section headers nas fases */
.view:has(.hero-line) .section-h {
  position: relative;
  padding-left: 12px;
}
.view:has(.hero-line) .section-h::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 16px;
  background: var(--fase-accent, #D4AF37);
  border-radius: 2px;
}