/* App do aluno */
body.app { padding-bottom: calc(var(--nav-h) + 16px + env(safe-area-inset-bottom)); }
#view { width: min(100%, var(--maxw)); margin: 0 auto; padding: max(1rem, env(safe-area-inset-top)) 1rem 1.5rem; display: grid; gap: .9rem; align-content: start; }
#view > h2 { margin-top: .4rem; }
#view > .muted { margin-top: -.6rem; }

/* Navegação inferior */
#nav { position: fixed; z-index: 50; left: 50%; transform: translateX(-50%); bottom: calc(10px + env(safe-area-inset-bottom)); width: min(calc(100% - 20px), 520px); height: var(--nav-h); display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px; border-radius: 22px; background: rgba(14,16,12,.82); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border: 1px solid var(--line-strong); box-shadow: 0 20px 50px -15px rgba(0,0,0,.9); }
#nav a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); font-size: .68rem; font-weight: 600; letter-spacing: .03em; border-radius: 16px; transition: color .2s, background .25s var(--ease); }
#nav a i { font-size: 1.15rem; transition: transform .3s var(--ease); }
#nav a:hover { color: var(--white); }
#nav a[aria-current="page"] { color: var(--ink); background: var(--neon); box-shadow: 0 8px 22px -8px rgba(198,244,50,.9); }
#nav a[aria-current="page"] i { transform: translateY(-1px) scale(1.08); }

/* Hero */
.hero { display: flex; align-items: center; gap: .9rem; padding: .4rem 0; min-width: 0; }
.hero > div, .hero > span { min-width: 0; }
.hero h1, .hero h2 { margin: 0; font-size: clamp(1.5rem, 5vw, 2rem); overflow: hidden; text-overflow: ellipsis; }
.hero p { margin: 0; }

/* Estatísticas */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: .6rem; }
.stat { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; padding: .9rem; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); position: relative; overflow: hidden; }
.stat::after { content: ""; position: absolute; right: -20px; top: -20px; width: 70px; height: 70px; border-radius: 50%; background: var(--neon-soft); }
.stat i { color: var(--neon); font-size: 1rem; }
.stat strong { font-family: var(--font-display); font-weight: 400; font-size: 2rem; line-height: 1.1; color: var(--white); }
.stat span { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.stats-home .stat { min-height: 8rem; gap: .38rem; padding: .85rem .75rem; background: linear-gradient(145deg, rgba(198,244,50,.09), var(--surface) 68%); border-color: rgba(198,244,50,.18); box-shadow: inset 0 1px rgba(255,255,255,.04), 0 8px 22px rgba(0,0,0,.14); }
.stats-home .stat > * { position: relative; z-index: 1; }
.stats-home .stat::after { top: -1.35rem; right: -1.35rem; width: 5.5rem; height: 5.5rem; background: radial-gradient(circle, rgba(198,244,50,.2), transparent 70%); pointer-events: none; }
.stats-home .stat i { display: grid; place-items: center; width: 2.65rem; height: 2.65rem; margin-bottom: .15rem; border: 1px solid rgba(198,244,50,.24); border-radius: .85rem; background: linear-gradient(145deg, rgba(198,244,50,.2), rgba(198,244,50,.06)); box-shadow: 0 4px 14px rgba(198,244,50,.12); font-size: 1.35rem; }
.stats-home .stat strong { font-size: clamp(1.75rem, 8vw, 2.15rem); }
.stats-home .stat span { font-size: .68rem; letter-spacing: .07em; }

/* XP */
.lvl-row { display: flex; align-items: baseline; justify-content: space-between; }
.lvl-row strong { font-family: var(--font-display); font-weight: 400; font-size: 2.4rem; color: var(--neon); line-height: 1; }
.xp-track { height: 10px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; margin: .6rem 0 .4rem; }
.xp-fill { height: 100%; width: 0; border-radius: inherit; background: var(--gradient-neon); box-shadow: 0 0 14px rgba(198,244,50,.6); }

/* Trono */
.king { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: center; background: linear-gradient(120deg, rgba(255,194,61,.12), rgba(198,244,50,.06)); border-color: rgba(255,194,61,.3); }
.king > i { grid-row: span 3; font-size: 2rem; color: var(--warn); filter: drop-shadow(0 0 12px rgba(255,194,61,.6)); }
.king p { margin: 0; text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; }
.king strong { font-family: var(--font-head); font-size: 1.4rem; text-transform: uppercase; }
.king-ranking-spotlight { position: relative; isolation: isolate; overflow: hidden; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: .55rem; padding: 1.6rem 1rem; text-align: center; }
.king-ranking-spotlight::before { content: ""; position: absolute; z-index: -1; top: -5rem; left: 50%; width: 18rem; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(255,194,61,.24), rgba(255,194,61,.08) 42%, transparent 70%); pointer-events: none; }
.king-ranking-spotlight > i { grid-row: auto; position: relative; display: grid; place-items: center; width: 4.6rem; height: 4.6rem; margin: .15rem auto .4rem; border-radius: 50%; background: radial-gradient(circle, rgba(255,220,120,.2), rgba(255,194,61,.06) 58%, transparent 72%); font-size: 2.7rem; filter: drop-shadow(0 0 10px rgba(255,194,61,.85)); animation: throne-crown-float 2.8s ease-in-out infinite; }
.king-ranking-spotlight > i::after { content: ""; position: absolute; inset: -.45rem; border: 1px solid rgba(255,220,120,.62); border-radius: 50%; box-shadow: 0 0 16px rgba(255,194,61,.35), inset 0 0 14px rgba(255,194,61,.14); animation: throne-crown-ring 2.4s ease-out infinite; pointer-events: none; }
.king-ranking-spotlight > img { width: 5.5rem; height: 5.5rem; margin: .1rem auto; border: 2px solid rgba(255,220,120,.65); border-radius: 50%; object-fit: cover; box-shadow: 0 0 22px rgba(255,194,61,.24); }
@keyframes throne-crown-float { 50% { transform: translateY(-4px); } }
@keyframes throne-crown-ring { 0% { transform: scale(.82); opacity: .95; } 80%, 100% { transform: scale(1.22); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .king-ranking-spotlight > i, .king-ranking-spotlight > i::after { animation: none; } }

/* Ranking */
.rk { list-style: none; display: grid; grid-template-columns: 34px 38px minmax(0, 1fr) auto; align-items: center; gap: .7rem; padding: .7rem .6rem; border-radius: var(--r); transition: background .2s; }
.rk + .rk { margin-top: .2rem; }
.rk:hover { background: rgba(255,255,255,.03); }
.rk.me { background: var(--neon-soft); border: 1px solid rgba(198,244,50,.3); }
.rk > span:nth-child(3) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk small { display: block; color: var(--muted); }
.pos { font-family: var(--font-display); font-size: 1.2rem; text-align: center; color: var(--muted); }
.pos .fa-crown { color: var(--warn); filter: drop-shadow(0 0 8px rgba(255,194,61,.7)); }
.rk:nth-child(-n+3) .pos { color: var(--white); }
.rk .xp { font-family: var(--font-head); font-weight: 700; color: var(--neon); text-align: right; white-space: nowrap; }
.rk .xp small { color: var(--muted); font-weight: 500; }

/* Semana / dias / barra */
.weeknav { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.weeknav h2 { margin: 0; font-size: 1.25rem; text-align: center; }
.weeknav a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); color: var(--white); transition: background .2s, color .2s; }
.weeknav a:hover { background: var(--neon); color: var(--ink); }
.day { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: 1rem 1.1rem; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); color: var(--white); font-weight: 600; transition: border-color .2s, transform .2s var(--ease), background .2s; }
.day:hover { color: var(--white); border-color: rgba(198,244,50,.4); transform: translateX(3px); background: var(--surface-2); }
.day > i { color: var(--muted); transition: transform .2s, color .2s; }
.day:hover > i { color: var(--neon); transform: translateX(3px); }
.bar { display: flex; align-items: center; gap: .8rem; }
.bar h2 { margin: 0; font-size: 1.3rem; }
.back { display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); color: var(--white); }
.back:hover { background: var(--neon); color: var(--ink); }
.meta { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0; }

/* Conquistas */
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: .7rem; }
.ach { display: flex; gap: .9rem; padding: 1rem; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); opacity: .7; filter: grayscale(.6); transition: opacity .2s, filter .2s, border-color .2s; }
.ach.on { opacity: 1; filter: none; border-color: rgba(198,244,50,.3); }
.ach > i { flex-shrink: 0; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--surface-3); color: var(--muted); font-size: 1.3rem; }
.ach.on > i { background: var(--neon-soft); color: var(--neon); box-shadow: inset 0 0 0 1px rgba(198,244,50,.3); }
.ach > div { min-width: 0; flex: 1; }
.ach small { display: block; color: var(--muted); margin-top: .15rem; }

/* Loja */
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: .8rem; }
.prod { display: flex; flex-direction: column; gap: .4rem; }
.prod .badge { align-self: flex-start; }
.prod .btn { margin-top: auto; }
.prod strong.ok { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; }

/* Desktop: navegação vira barra lateral */
@media (min-width: 900px) {
  body.app { padding-bottom: 2rem; padding-left: 104px; }
  #nav { left: 16px; top: 50%; bottom: auto; transform: translateY(-50%); width: 80px; height: auto; grid-template-columns: 1fr; grid-auto-rows: 72px; gap: 4px; padding: 8px; }
  #nav a { font-size: .72rem; }
  #view { padding-top: 2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  #view > * { grid-column: 1 / -1; }
  #view > section.card:not(:has(.rows)):not(:has(form)):not(:has(#rk)) { grid-column: auto; }
  #toasts { bottom: 24px !important; }
}

/* Refinamento do painel do aluno — desktop apenas */
@media (min-width: 900px) {
  body.app { padding-left: 112px; }

  #view {
    width: min(100%, 1480px);
    margin-inline: auto;
    padding: 2.25rem clamp(1.5rem, 3vw, 3.5rem) 3rem;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 1.25rem;
    row-gap: 1.1rem;
  }

  #view > * { grid-column: 1 / -1; min-width: 0; }
  #view > section.card:not(:has(.rows)):not(:has(form)):not(:has(#rk)) { grid-column: span 6; }
  #view > .stats { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  #view > .stats .stat { min-height: 7.5rem; padding: 1.1rem 1.25rem; }
  #view > .hero { padding-block: .5rem; }
  #view > .hero h1 { font-size: clamp(2.4rem, 3vw, 3.4rem); }
  #view > .seg { grid-column: 1 / -1; width: min(100%, 680px); justify-self: center; margin-bottom: .2rem; }

  /* Início: destaques em linha e cartões de conteúdo balanceados. */
  #view > .stats-home { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #view > .stats-home .stat { min-height: 9rem; padding: 1.1rem 1.3rem; }
  #view > .stats-home .stat strong { font-size: clamp(2rem, 2.5vw, 2.7rem); }
  #view > .card.king { grid-column: span 6; }
  #view > section.card:has(#checkin) { grid-column: span 5; }
  #view > section.card:has(.btn[href^="#treino/"]) { grid-column: span 7; }
  #view > section.card:has(.rows) { grid-column: span 6; }

  /* Perfil: formulário compacto ao lado do resumo de XP. */
  #view > section.card[style*="text-align:center"] { grid-column: span 5; align-self: start; }
  #view > section.card[style*="text-align:center"] form { max-width: 38rem; margin-inline: auto; }
  #view > section.card:has(.xp-track) { grid-column: span 7; align-self: start; }
  #view > section.stats { grid-column: 1 / -1; }

  /* Presença: indicadores em destaque e histórico ao lado do check-in. */
  #view > section.card:has(#checkin) { grid-column: span 5; }
  #view > section.card:has(.rows) { grid-column: span 7; }

  /* Frequência/XP preservam legibilidade da lista; O Trono usa melhor a largura. */
  #view > section.card:has(#rk),
  #view > section.card:has(> ul[style]) { grid-column: 1 / -1; }
  #view > section.card.king-ranking-spotlight { grid-column: span 6; align-self: stretch; }
  #view > section.card.king-ranking-spotlight ~ section.card { grid-column: span 6; }

  /* Treino: blocos textuais em duas colunas com largura confortável. */
  #view > header.bar { grid-column: 1 / -1; }
  #view > section.card:has(.rows) { grid-column: span 6; }
  #view > section.card:has(textarea),
  #view > section.card:has(#start) { grid-column: 1 / -1; }
}

/* Seletor de foto do Perfil — responsivo em todos os tamanhos */
.photo-label { display: block; margin: .9rem 0 .35rem; color: var(--muted); font: 600 .85rem var(--font-head); letter-spacing: .06em; text-transform: uppercase; }
.photo-picker { position: relative; display: flex; align-items: center; gap: 1rem; min-width: 0; padding: 1rem; border: 1px solid var(--line-strong); border-radius: var(--r); background: linear-gradient(135deg, rgba(198,244,50,.075), var(--surface-2) 58%); overflow: hidden; }
.photo-preview { position: relative; flex: 0 0 76px; width: 76px; height: 76px; }
.photo-preview img { display: block; width: 100%; height: 100%; object-fit: cover; border: 2px solid rgba(198,244,50,.62); border-radius: 50%; background: var(--surface-3); box-shadow: 0 0 0 4px rgba(198,244,50,.1), 0 8px 22px rgba(0,0,0,.28); }
.photo-preview > span { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid var(--surface); border-radius: 50%; background: var(--neon); color: var(--ink); font-size: .75rem; }
.photo-picker-copy { display: flex; flex: 1; flex-direction: column; align-items: flex-start; min-width: 0; gap: .25rem; }
.photo-picker-copy > strong { color: var(--white); font-size: .98rem; }
.photo-picker-copy > small { color: var(--muted); line-height: 1.4; }
.photo-select { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 40px; margin: .45rem 0 0; padding: .45rem .85rem; border: 1px solid rgba(198,244,50,.38); border-radius: var(--r-sm); background: var(--neon-soft); color: var(--neon); font: 700 .9rem var(--font-head); letter-spacing: .03em; cursor: pointer; transition: background .2s, border-color .2s, transform .2s; }
.photo-select:hover { border-color: var(--neon); background: rgba(198,244,50,.2); color: var(--white); }
.photo-select:active { transform: scale(.98); }
.photo-filename { max-width: 100%; overflow: hidden; color: var(--muted); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.photo-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; clip-path: inset(50%); }
.photo-input:focus-visible + .photo-picker-copy .photo-select { outline: 2px solid var(--neon); outline-offset: 3px; }
@media (max-width: 480px) {
  .photo-picker { align-items: flex-start; gap: .8rem; padding: .9rem .8rem; }
  .photo-preview { flex-basis: 64px; width: 64px; height: 64px; }
  .photo-picker-copy > small { font-size: .76rem; }
  .photo-select { min-height: 38px; }
}
.photo-picker:focus-within .photo-select { outline: 2px solid var(--neon); outline-offset: 3px; }

/* Resumo visual de Presença e Perfil */
.stats-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.stats-summary .stat {
  min-height: 9rem;
  gap: .42rem;
  padding: 1rem;
  background: linear-gradient(145deg, rgba(198,244,50,.105), var(--surface) 62%);
  border-color: rgba(198,244,50,.2);
  box-shadow: inset 0 1px rgba(255,255,255,.045), 0 10px 26px rgba(0,0,0,.2);
  transition: transform .22s var(--ease), border-color .22s, box-shadow .22s;
}
.stats-summary .stat:hover { transform: translateY(-3px); border-color: rgba(198,244,50,.48); box-shadow: inset 0 1px rgba(255,255,255,.06), 0 14px 30px rgba(0,0,0,.27); }
.stats-summary .stat::after { top: -1.5rem; right: -1.45rem; width: 6.5rem; height: 6.5rem; background: radial-gradient(circle, rgba(198,244,50,.22), transparent 70%); pointer-events: none; }
.stats-summary .stat > * { position: relative; z-index: 1; }
.stats-summary .stat i {
  display: grid;
  place-items: center;
  width: 3.15rem;
  height: 3.15rem;
  margin-bottom: .12rem;
  border: 1px solid rgba(198,244,50,.3);
  border-radius: 1rem;
  background: linear-gradient(145deg, rgba(198,244,50,.22), rgba(198,244,50,.055));
  box-shadow: 0 5px 18px rgba(198,244,50,.16), inset 0 1px rgba(255,255,255,.12);
  color: var(--neon);
  font-size: 1.55rem;
  filter: drop-shadow(0 0 7px rgba(198,244,50,.3));
}
.stats-summary .stat:nth-child(2) i { color: #d9f46b; }
.stats-summary .stat:nth-child(3) i { color: #ffbd55; border-color: rgba(255,189,85,.32); background: linear-gradient(145deg, rgba(255,189,85,.2), rgba(255,189,85,.045)); box-shadow: 0 5px 18px rgba(255,189,85,.13); filter: drop-shadow(0 0 7px rgba(255,189,85,.3)); }
.stats-summary .stat strong { font-size: clamp(1.8rem, 7vw, 2.25rem); line-height: 1; }
.stats-summary .stat span { font-size: .7rem; font-weight: 700; letter-spacing: .09em; }
@media (min-width: 900px) {
  #view > .stats-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  #view > .stats-summary .stat { min-height: 9.5rem; padding: 1.15rem 1.3rem; }
  #view > .stats-summary .stat i { width: 3.4rem; height: 3.4rem; font-size: 1.7rem; }
}
@media (max-width: 360px) {
  .stats-summary { gap: .45rem; }
  .stats-summary .stat { min-height: 8rem; padding: .75rem .65rem; }
  .stats-summary .stat i { width: 2.55rem; height: 2.55rem; border-radius: .8rem; font-size: 1.25rem; }
  .stats-summary .stat span { font-size: .61rem; }
}

/* Superfícies minimalistas para os indicadores nas três áreas */
.stats-home .stat,
.stats-summary .stat {
  background: linear-gradient(155deg, rgba(255,255,255,.045), rgba(255,255,255,.012) 58%), var(--surface);
  border: 1px solid rgba(255,255,255,.085);
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 8px 22px rgba(0,0,0,.18);
}
.stats-home .stat:hover,
.stats-summary .stat:hover {
  background: linear-gradient(155deg, rgba(255,255,255,.065), rgba(255,255,255,.02) 58%), var(--surface-2);
  border-color: rgba(198,244,50,.28);
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 12px 28px rgba(0,0,0,.24);
}
.stats-home .stat::after,
.stats-summary .stat::after { display: none; }
.stats-home .stat i,
.stats-summary .stat i {
  border-color: rgba(198,244,50,.18);
  border-radius: .85rem;
  background: rgba(198,244,50,.075);
  box-shadow: none;
  filter: none;
}
.stats-home .stat:nth-child(2) i,
.stats-summary .stat:nth-child(2) i { color: var(--neon); }
.stats-home .stat:nth-child(3) i,
.stats-summary .stat:nth-child(3) i {
  color: #ffd07a;
  border-color: rgba(255,208,122,.2);
  background: rgba(255,208,122,.075);
  box-shadow: none;
  filter: none;
}
@media (prefers-reduced-motion: reduce) {
  .stats-home .stat, .stats-summary .stat { transition: none; }
}

/* Cards de métricas: assinatura visual premium do BOX */
.stats-home .stat,
.stats-summary .stat {
  isolation: isolate;
  position: relative;
  overflow: hidden;
  gap: .5rem;
  padding: 1rem;
  border: 1px solid rgba(220,239,172,.16);
  border-radius: calc(var(--r) + 3px);
  background:
    radial-gradient(ellipse at 100% 0%, rgba(198,244,50,.12), transparent 52%),
    linear-gradient(145deg, rgba(255,255,255,.055), transparent 48%),
    linear-gradient(155deg, #20251b, #11140f 72%);
  box-shadow: inset 0 1px rgba(255,255,255,.09), inset 0 -1px rgba(0,0,0,.32), 0 12px 26px rgba(0,0,0,.28);
  transition: transform .26s var(--ease), border-color .26s, box-shadow .26s, background-color .26s;
}
.stats-home .stat::before,
.stats-summary .stat::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 0;
  width: 2px;
  background: linear-gradient(180deg, transparent 4%, rgba(198,244,50,.8) 35%, rgba(198,244,50,.18) 78%, transparent);
  opacity: .8;
}
.stats-home .stat::after,
.stats-summary .stat::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -2.8rem;
  right: -2.5rem;
  width: 7.5rem;
  height: 7.5rem;
  border: 1px solid rgba(198,244,50,.13);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(198,244,50,.1), rgba(198,244,50,.025) 48%, transparent 70%);
  box-shadow: 0 0 0 9px rgba(198,244,50,.018), 0 0 0 19px rgba(198,244,50,.012);
  pointer-events: none;
  transition: transform .4s var(--ease), opacity .3s;
}
.stats-home .stat > *,
.stats-summary .stat > * { position: relative; z-index: 1; }
.stats-home .stat i,
.stats-summary .stat i {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: .2rem;
  border: 1px solid rgba(198,244,50,.28);
  border-radius: .95rem;
  background: linear-gradient(145deg, rgba(198,244,50,.17), rgba(198,244,50,.045));
  color: #d6f56b;
  font-size: 1.4rem;
  box-shadow: inset 0 1px rgba(255,255,255,.09), 0 5px 14px rgba(0,0,0,.22);
}
.stats-home .stat strong,
.stats-summary .stat strong {
  color: #f7f8f3;
  font-size: clamp(1.9rem, 7vw, 2.4rem);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.035em;
  text-shadow: 0 2px 16px rgba(255,255,255,.08);
}
.stats-home .stat span,
.stats-summary .stat span {
  color: #b6bca9;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
}
.stats-home .stat:nth-child(2),
.stats-summary .stat:nth-child(2) {
  background:
    radial-gradient(ellipse at 100% 0%, rgba(168,207,94,.13), transparent 52%),
    linear-gradient(145deg, rgba(255,255,255,.055), transparent 48%),
    linear-gradient(155deg, #20251b, #11140f 72%);
}
.stats-home .stat:nth-child(3),
.stats-summary .stat:nth-child(3) {
  border-color: rgba(255,193,92,.2);
  background:
    radial-gradient(ellipse at 100% 0%, rgba(255,177,69,.15), transparent 52%),
    linear-gradient(145deg, rgba(255,255,255,.055), transparent 48%),
    linear-gradient(155deg, #252117, #14120e 72%);
}
.stats-home .stat:nth-child(3)::before,
.stats-summary .stat:nth-child(3)::before { background: linear-gradient(180deg, transparent 4%, rgba(255,190,89,.85) 35%, rgba(255,190,89,.16) 78%, transparent); }
.stats-home .stat:nth-child(3)::after,
.stats-summary .stat:nth-child(3)::after { border-color: rgba(255,190,89,.15); background: radial-gradient(circle, rgba(255,190,89,.11), rgba(255,190,89,.025) 48%, transparent 70%); box-shadow: 0 0 0 9px rgba(255,190,89,.02), 0 0 0 19px rgba(255,190,89,.012); }
.stats-home .stat:nth-child(3) i,
.stats-summary .stat:nth-child(3) i { color: #ffd08a; border-color: rgba(255,190,89,.3); background: linear-gradient(145deg, rgba(255,190,89,.17), rgba(255,190,89,.045)); }
.stats-home .stat:hover,
.stats-summary .stat:hover {
  transform: translateY(-4px);
  border-color: rgba(198,244,50,.42);
  box-shadow: inset 0 1px rgba(255,255,255,.11), inset 0 -1px rgba(0,0,0,.32), 0 18px 34px rgba(0,0,0,.36), 0 0 22px rgba(198,244,50,.055);
}
.stats-home .stat:nth-child(3):hover,
.stats-summary .stat:nth-child(3):hover { border-color: rgba(255,193,92,.45); box-shadow: inset 0 1px rgba(255,255,255,.11), 0 18px 34px rgba(0,0,0,.36), 0 0 22px rgba(255,177,69,.07); }
.stats-home .stat:hover::after,
.stats-summary .stat:hover::after { transform: scale(1.12) translate(-3px, 3px); opacity: .9; }
@media (min-width: 900px) {
  #view > .stats-home .stat,
  #view > .stats-summary .stat { padding: 1.2rem 1.35rem; }
  #view > .stats-home .stat i,
  #view > .stats-summary .stat i { width: 3.2rem; height: 3.2rem; font-size: 1.5rem; }
}
@media (max-width: 360px) {
  .stats-home .stat, .stats-summary .stat { gap: .38rem; padding: .72rem .58rem; }
  .stats-home .stat i, .stats-summary .stat i { width: 2.55rem; height: 2.55rem; border-radius: .8rem; font-size: 1.2rem; }
  .stats-home .stat span, .stats-summary .stat span { font-size: .6rem; letter-spacing: .08em; }
}
@media (prefers-reduced-motion: reduce) {
  .stats-home .stat, .stats-summary .stat,
  .stats-home .stat::after, .stats-summary .stat::after { transition: none; }
}

/* Card de XP e nível — componente compartilhado entre Início e Perfil */
.xp-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: 1.05rem;
  padding: 1.15rem;
  border: 1px solid rgba(198,244,50,.19);
  background:
    radial-gradient(ellipse at 100% 0%, rgba(198,244,50,.115), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.045), transparent 52%),
    linear-gradient(150deg, #191d14, #10120e 76%);
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 14px 34px rgba(0,0,0,.3);
}
.xp-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -4.2rem;
  right: -3.5rem;
  width: 11rem;
  aspect-ratio: 1;
  border: 1px solid rgba(198,244,50,.1);
  border-radius: 50%;
  box-shadow: 0 0 0 12px rgba(198,244,50,.018), 0 0 0 26px rgba(198,244,50,.012);
  pointer-events: none;
}
.xp-card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.xp-level-copy { display: grid; gap: .18rem; }
.xp-eyebrow { color: var(--neon); font: 700 .68rem var(--font-head); letter-spacing: .16em; text-transform: uppercase; }
.xp-level-label { color: var(--muted); font-size: .82rem; }
.xp-level-badge { display: flex; align-items: center; gap: .45rem; min-width: 4.2rem; justify-content: center; padding: .45rem .7rem; border: 1px solid rgba(198,244,50,.3); border-radius: 14px; background: linear-gradient(145deg, rgba(198,244,50,.15), rgba(198,244,50,.045)); box-shadow: inset 0 1px rgba(255,255,255,.08), 0 5px 16px rgba(0,0,0,.2); color: var(--neon); }
.xp-level-badge i { font-size: .78rem; }
.xp-level-badge strong { font: 400 1.7rem/1 var(--font-display); }
.xp-progress-block { display: grid; gap: .45rem; }
.xp-progress-heading { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; color: var(--muted); font: 600 .77rem var(--font-head); letter-spacing: .07em; text-transform: uppercase; }
.xp-progress-heading strong { color: var(--white); font: 700 .9rem var(--font-body); letter-spacing: 0; }
.xp-card .xp-track { position: relative; height: 12px; margin: 0; overflow: visible; border: 1px solid rgba(255,255,255,.075); border-radius: var(--r-pill); background: #090b08; box-shadow: inset 0 2px 5px rgba(0,0,0,.68), 0 1px rgba(255,255,255,.035); }
.xp-card .xp-fill { position: relative; overflow: hidden; min-width: 0; border-radius: inherit; background: linear-gradient(90deg, #8dbd14, #c6f432 72%, #e5ff83); box-shadow: 0 0 12px rgba(198,244,50,.32), inset 0 1px rgba(255,255,255,.3); }
.xp-card .xp-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.3) 48%, transparent 70%); opacity: .55; }
.xp-card-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .85rem; padding-top: .85rem; border-top: 1px solid rgba(255,255,255,.075); }
.xp-total { display: grid; gap: .25rem; min-width: 0; }
.xp-total > strong { color: var(--white); font: 400 clamp(1.65rem, 5vw, 2rem)/1 var(--font-display); letter-spacing: .015em; }
.xp-total > strong span { color: var(--neon); font: 700 .72rem var(--font-head); letter-spacing: .1em; }
.xp-total > small { color: var(--muted); font-size: .74rem; line-height: 1.35; }
.xp-social { display: grid; justify-items: end; gap: .5rem; min-width: 0; text-align: right; }
.xp-rank { margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.35; }
.xp-rank strong { color: var(--white); }
.xp-achievements { display: grid; justify-items: end; gap: .32rem; }
.xp-achievements > span { color: var(--muted); font: 700 .62rem var(--font-head); letter-spacing: .1em; text-transform: uppercase; }
.xp-achievements > div { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .35rem; }
.xp-achievements i { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border: 1px solid rgba(198,244,50,.2); border-radius: 50%; background: rgba(198,244,50,.085); color: var(--neon); font-size: .78rem; box-shadow: inset 0 1px rgba(255,255,255,.06); }
.xp-card:hover { border-color: rgba(198,244,50,.32); box-shadow: inset 0 1px rgba(255,255,255,.1), 0 18px 38px rgba(0,0,0,.36), 0 0 24px rgba(198,244,50,.045); }
@media (min-width: 900px) {
  #view > section.xp-card { padding: 1.35rem 1.5rem; gap: 1.15rem; }
  .xp-card-foot { gap: 1.2rem; }
  .xp-total > strong { font-size: 2.15rem; }
}
@media (max-width: 420px) {
  .xp-card { padding: 1rem; gap: .9rem; }
  .xp-card-foot { grid-template-columns: 1fr; align-items: start; gap: .7rem; }
  .xp-social { justify-items: start; text-align: left; }
  .xp-achievements { justify-items: start; }
  .xp-achievements > div { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .xp-card { transition: none; } }

/* Identidade cromática dos cards de conquista por raridade */
.ach.rar-common { --ach-color: 198,244,50; --ach-solid: #c6f432; }
.ach.rar-rare { --ach-color: 92,200,255; --ach-solid: #5cc8ff; }
.ach.rar-epic { --ach-color: 196,139,255; --ach-solid: #c48bff; }
.ach.rar-legendary { --ach-color: 255,174,76; --ach-solid: #ffae4c; }
.ach[class*="rar-"] {
  border-color: rgba(var(--ach-color),.32);
  background: linear-gradient(135deg, rgba(var(--ach-color),.105), rgba(var(--ach-color),.025) 55%), var(--surface);
  filter: none;
  transition: opacity .2s, transform .22s var(--ease), border-color .22s, box-shadow .22s;
}
.ach[class*="rar-"]:not(.on) { opacity: .78; }
.ach[class*="rar-"] > i {
  color: var(--ach-solid);
  border: 1px solid rgba(var(--ach-color),.35);
  background: linear-gradient(145deg, rgba(var(--ach-color),.2), rgba(var(--ach-color),.07));
  box-shadow: inset 0 1px rgba(255,255,255,.09), 0 4px 12px rgba(var(--ach-color),.08);
}
.ach[class*="rar-"].on {
  border-color: rgba(var(--ach-color),.52);
  box-shadow: inset 0 1px rgba(255,255,255,.045), 0 8px 22px rgba(0,0,0,.18), 0 0 18px rgba(var(--ach-color),.045);
}
.ach[class*="rar-"]:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--ach-color),.68);
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 12px 24px rgba(0,0,0,.22), 0 0 20px rgba(var(--ach-color),.08);
}

/* Estados das conquistas: bloqueada versus recompensa desbloqueada */
.ach[class*="rar-"] > .ach-icon {
  position: relative;
  flex: 0 0 48px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(var(--ach-color),.35);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(var(--ach-color),.2), rgba(var(--ach-color),.07));
  color: var(--ach-solid);
  box-shadow: inset 0 1px rgba(255,255,255,.09), 0 4px 12px rgba(var(--ach-color),.08);
}
.ach-icon > i:first-child { font-size: 1.3rem; }
.ach-lock { position: absolute; right: -5px; bottom: -5px; display: grid; place-items: center; width: 20px; height: 20px; border: 2px solid var(--surface); border-radius: 50%; background: #34382f; color: #d1d5c9; font-size: .58rem; box-shadow: 0 2px 5px rgba(0,0,0,.35); }
.ach.is-locked { opacity: .58; border-color: rgba(var(--ach-color),.23); background: linear-gradient(135deg, rgba(var(--ach-color),.055), rgba(255,255,255,.012) 58%), var(--surface); }
.ach.is-locked > .ach-icon { background: linear-gradient(145deg, rgba(var(--ach-color),.105), rgba(var(--ach-color),.035)); border-color: rgba(var(--ach-color),.24); box-shadow: none; }
.ach.is-locked .ach-icon > i:first-child { opacity: .62; }
.ach.is-unlocked { opacity: 1; border-color: rgba(var(--ach-color),.58); background: linear-gradient(135deg, rgba(var(--ach-color),.14), rgba(var(--ach-color),.035) 58%), var(--surface); box-shadow: inset 0 1px rgba(255,255,255,.055), 0 8px 22px rgba(0,0,0,.2), 0 0 17px rgba(var(--ach-color),.055); }
.ach.is-unlocked > .ach-icon { border-color: rgba(var(--ach-color),.55); box-shadow: inset 0 1px rgba(255,255,255,.13), 0 5px 14px rgba(var(--ach-color),.12); }
.ach-status { color: var(--ach-solid) !important; font-weight: 600; }
.ach-status i { margin-right: .2rem; }

/* Cards ainda bloqueados voltam ao tratamento neutro original */
.ach.is-locked {
  opacity: .7;
  filter: grayscale(.6);
  border-color: var(--line);
  background: var(--surface);
  box-shadow: none;
}
.ach.is-locked > .ach-icon {
  border-color: transparent;
  background: var(--surface-3);
  color: var(--muted);
  box-shadow: none;
}
.ach.is-locked .ach-icon > i:first-child { opacity: 1; }
.ach.is-locked .ach-lock { display: none; }
.ach.is-locked:hover { border-color: var(--line-strong); box-shadow: none; }

/* Cards desbloqueados sem preenchimento de fundo */
.ach.is-unlocked { background: transparent; }

/* Identidade do Perfil e acesso às configurações */
.profile-identity { display: grid; justify-items: center; align-content: start; gap: .15rem; padding-block: 1.5rem; }
.profile-avatar-wrap { position: relative; display: inline-grid; margin-bottom: .45rem; }
.profile-avatar-wrap .avatar { display: block; margin: 0; }
.profile-settings-button { position: absolute; right: -5px; bottom: -3px; display: grid; place-items: center; width: 38px; height: 38px; border: 3px solid var(--surface); border-radius: 50%; background: var(--neon); color: var(--ink); font-size: 1rem; box-shadow: 0 5px 16px rgba(0,0,0,.4), 0 0 0 1px rgba(198,244,50,.42); transition: transform .2s var(--ease), box-shadow .2s, background .2s; }
.profile-settings-button:hover { transform: rotate(24deg) scale(1.08); color: var(--ink); background: #d8ff4c; box-shadow: 0 7px 20px rgba(0,0,0,.45), 0 0 0 3px rgba(198,244,50,.15); }
.profile-settings-button:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }
.profile-display-name { margin: .3rem 0 .05rem; color: var(--white); font: 700 1.35rem/1.2 var(--font-head); letter-spacing: .025em; overflow-wrap: anywhere; }
.profile-joined { margin: 0; font-size: .82rem; }
.settings-card { display: grid; gap: 1.1rem; }
.settings-card form { min-width: 0; }
.settings-logout { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .25rem; border-top: 0; }
.settings-logout > div { display: grid; gap: .2rem; }
.settings-logout > div strong { color: var(--white); }
.settings-logout > div small { color: var(--muted); line-height: 1.35; }
.settings-logout .btn { width: auto; min-height: 42px; margin: 0; padding: .5rem .9rem; border-color: rgba(255,90,78,.3); color: #ff8a80; }
.settings-logout .btn:hover { border-color: rgba(255,90,78,.6); background: rgba(255,90,78,.1); color: #ffb0a8; }
@media (max-width: 480px) {
  .profile-identity { padding-block: 1.25rem; }
  .settings-logout { align-items: flex-start; }
  .settings-logout .btn { flex-shrink: 0; }
}
@media (prefers-reduced-motion: reduce) { .profile-settings-button { transition: none; } }

/* Destaques visuais de eventos e produtos na tela Início */
.home-feature-section { display: grid; align-content: start; gap: .9rem; padding: 1rem; }
.home-feature-heading { display: flex; align-items: end; justify-content: space-between; gap: .75rem; }
.home-feature-heading > div { min-width: 0; }
.home-feature-kicker { display: block; margin-bottom: .15rem; color: var(--neon); font: 700 .64rem var(--font-head); letter-spacing: .13em; text-transform: uppercase; }
.home-feature-heading h3 { margin: 0; font-size: 1.08rem; }
.home-feature-heading h3 > i { margin-right: .25rem; color: var(--neon); font-size: .9em; }
.home-feature-heading > a { display: inline-flex; align-items: center; gap: .35rem; flex-shrink: 0; color: var(--muted); font: 700 .76rem var(--font-head); letter-spacing: .035em; white-space: nowrap; }
.home-feature-heading > a:hover { color: var(--neon); }
.home-feature-heading > a i { font-size: .72rem; transition: transform .2s var(--ease); }
.home-feature-heading > a:hover i { transform: translateX(3px); }
.home-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 175px), 1fr)); gap: .65rem; min-width: 0; }
.home-feature-card { display: grid; grid-template-rows: auto 1fr; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: linear-gradient(145deg, rgba(255,255,255,.035), transparent 60%), var(--surface-2); color: var(--white); text-decoration: none; box-shadow: inset 0 1px rgba(255,255,255,.035), 0 6px 16px rgba(0,0,0,.16); transition: transform .22s var(--ease), border-color .22s, box-shadow .22s, background .22s; }
.home-feature-card:hover { transform: translateY(-3px); border-color: rgba(198,244,50,.32); background: linear-gradient(145deg, rgba(198,244,50,.045), transparent 62%), var(--surface-2); color: var(--white); box-shadow: inset 0 1px rgba(255,255,255,.07), 0 12px 24px rgba(0,0,0,.26); }
.feature-media { position: relative; display: block; overflow: hidden; aspect-ratio: 16/9; background: radial-gradient(ellipse at 75% 20%, rgba(198,244,50,.12), transparent 48%), linear-gradient(135deg, #262b20, #11140f); }
.feature-media > img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease), filter .3s; }
.home-feature-card:hover .feature-media > img { transform: scale(1.045); filter: saturate(1.08); }
.feature-media-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.08), transparent 42%, rgba(0,0,0,.48)); pointer-events: none; }
.feature-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(198,244,50,.72); font-size: 2.25rem; }
.product-fallback { background: radial-gradient(circle at 50% 45%, rgba(198,244,50,.17), transparent 38%); }
.event-fallback { color: rgba(198,244,50,.76); }
.feature-type { position: absolute; left: .55rem; bottom: .5rem; display: inline-flex; align-items: center; gap: .3rem; padding: .24rem .5rem; border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-pill); background: rgba(8,10,7,.72); color: #f4f6ef; font: 700 .62rem var(--font-head); letter-spacing: .055em; text-transform: uppercase; backdrop-filter: blur(8px); }
.feature-type i { color: var(--neon); font-size: .62rem; }
.feature-copy { display: grid; align-content: start; gap: .38rem; min-width: 0; padding: .7rem .75rem .8rem; }
.feature-copy > strong { display: -webkit-box; overflow: hidden; color: var(--white); font: 700 .98rem/1.2 var(--font-head); letter-spacing: .015em; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.feature-meta { display: flex; align-items: flex-start; gap: .38rem; min-width: 0; color: var(--muted); font-size: .7rem; line-height: 1.3; }
.feature-meta i { flex: 0 0 auto; margin-top: .08rem; color: rgba(198,244,50,.78); font-size: .68rem; }
.feature-price { color: var(--neon); font: 400 1.2rem/1 var(--font-display); letter-spacing: .025em; }
@media (max-width: 520px) {
  .home-feature-section { padding: .9rem; gap: .75rem; }
  .home-feature-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 145px), 1fr)); gap: .5rem; }
  .feature-copy { padding: .62rem .65rem .7rem; }
  .feature-copy > strong { font-size: .92rem; }
}
@media (prefers-reduced-motion: reduce) {
  .home-feature-card, .feature-media > img, .home-feature-heading > a i { transition: none; }
}