:root {
  --noite: #070B18; --noite-2: #0D1326; --painel: #11182B; --borda: #1E2A45;
  --osso: #F4F6FB; --cinza: #8B94AD;
  --violeta: #7C3AED; --glow: #8B5CF6; --lavanda: #A78BFA; --azul: #3558C8;
  --ok: #4ADE80; --alerta: #FF6B6B;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
body {
  margin: 0; color: var(--osso); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  /* céu noturno: gradiente profundo + estrelas discretas (spec §3.1) */
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(244,246,251,.5), transparent),
    radial-gradient(1px 1px at 68% 8%, rgba(167,139,250,.55), transparent),
    radial-gradient(1.5px 1.5px at 84% 30%, rgba(244,246,251,.35), transparent),
    radial-gradient(1px 1px at 34% 44%, rgba(244,246,251,.3), transparent),
    radial-gradient(1px 1px at 55% 70%, rgba(167,139,250,.3), transparent),
    radial-gradient(900px 500px at 80% -10%, rgba(53,88,200,.16), transparent 60%),
    linear-gradient(180deg, #070B18, #0A0F22 60%, #070B18);
  background-attachment: fixed;
}

/* viewport-fit=cover estende a página sob o notch e a barra home do iOS:
   topo e tabbar compensam com as safe areas */
/* header numa linha só, como no conceito: volta · logo · chips · engrenagem.
   Fixo no topo (sticky) e translúcido: a cena pinada passa por baixo do blur. */
.topo {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 10px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 14px 12px;
  background: rgba(7, 11, 24, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.volta {
  flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center;
  color: var(--cinza); text-decoration: none; font-size: 17px; font-weight: 700;
  border-radius: 999px; border: 1px solid var(--borda); background: var(--noite-2);
  transition: color .14s, border-color .14s, transform .12s;
}
.volta:hover { color: var(--osso); border-color: var(--cinza); transform: translateX(-2px); }
.logo { font: 800 11px var(--mono); letter-spacing: .28em; margin: 0; line-height: 1.15; }
.logo span {
  display: block; font-size: 19px; letter-spacing: .12em;
  background: linear-gradient(90deg, var(--lavanda), var(--violeta));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.chips { display: flex; gap: 6px; align-items: center; margin-left: auto; min-width: 0; }
.chip { font: 700 12px var(--mono); border: 1px solid var(--borda); background: var(--painel);
  border-radius: 999px; padding: 6px 10px; color: var(--cinza); white-space: nowrap; }
.chip b { color: var(--osso); }
.chip.vermelho b { color: var(--alerta); }
.chip.verde b { color: var(--ok); }
/* engrenagem no topo: config saiu da tabbar (o slot virou Insígnias) */
.engrenagem {
  flex: 0 0 auto; align-self: center; width: 40px; height: 40px;
  background: var(--noite-2); border: 1px solid var(--borda); color: var(--cinza);
  border-radius: 999px; display: grid; place-items: center; cursor: pointer;
  transition: color .14s, border-color .14s;
}
.engrenagem svg { width: 20px; height: 20px; }
.engrenagem:hover { color: var(--osso); border-color: var(--cinza); }
.engrenagem.ativa { color: var(--lavanda); border-color: var(--violeta); }
main { max-width: 1080px; margin: 0 auto; padding: 24px clamp(16px, 4vw, 40px) calc(110px + env(safe-area-inset-bottom)); }

/* ---- Tabbar inferior: 4 abas + lua central elevada (mesma filosofia do PUMP) ---- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: stretch; justify-content: space-around;
  background: rgba(7, 11, 24, .86); backdrop-filter: blur(12px);
  border-top: 1px solid var(--borda);
  padding: 6px 8px calc(14px + env(safe-area-inset-bottom, 0px));
}
.tabbar button {
  background: none; border: none; color: var(--cinza); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1;
  font-size: 10.5px; letter-spacing: .04em; padding: 4px 0;
  transition: color .14s;
}
.tabbar button svg { width: 22px; height: 22px; }
.tabbar button.ativa { color: var(--lavanda); }
.tabbar button.ativa svg { filter: drop-shadow(0 0 6px rgba(139, 92, 246, .6)); }
/* FAB-lua central: filosofia do botão-gota do PUMP (spec §21.1) */
.lua-fab {
  flex: 0 0 auto !important; width: 64px; height: 64px; margin-top: -28px;
  border-radius: 50%; border: 3px solid var(--noite) !important;
  background: radial-gradient(circle at 30% 25%, var(--glow), var(--violeta)) !important;
  color: #fff !important; display: grid !important; place-items: center;
  box-shadow: 0 0 26px rgba(139, 92, 246, .5), 0 6px 18px rgba(0, 0, 0, .55);
  animation: luaRespira 4s ease-in-out infinite;
  transition: transform .12s;
}
@keyframes luaRespira {
  0%, 100% { box-shadow: 0 0 18px rgba(139, 92, 246, .35), 0 6px 18px rgba(0,0,0,.55); }
  50% { box-shadow: 0 0 30px rgba(139, 92, 246, .6), 0 6px 18px rgba(0,0,0,.55); }
}
.lua-fab svg { width: 26px !important; height: 26px !important; }
.lua-fab:active { transform: scale(.94); }

/* badge/painel do sync (sync.js injeta fixo em bottom:12px): sobe acima da tabbar */
.ds-badge { bottom: calc(84px + env(safe-area-inset-bottom)) !important; }
.ds-panel { bottom: calc(124px + env(safe-area-inset-bottom)) !important; }

/* ---- Folha de registro: sobe da tabbar com os quick-adds ---- */
.sheet-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(7, 11, 24, .62); backdrop-filter: blur(2px);
  animation: fadeIn .15s ease;
}
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 61;
  background: var(--painel); border: 1px solid var(--borda); border-bottom: none;
  border-radius: 20px 20px 0 0; max-width: 560px; margin: 0 auto;
  padding: 10px 18px calc(24px + env(safe-area-inset-bottom));
  animation: sheetIn .22s cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes sheetIn { from { transform: translateY(100%); } }
.sheet-alca { width: 40px; height: 4px; border-radius: 999px; background: var(--borda); margin: 0 auto 12px; }

/* ---- Registro segmentado (concept 2026-08-29): um card por tipo de sono ---- */
.seg-sono { border: 1px solid var(--borda); border-radius: 14px; background: var(--noite-2); margin: 8px 0; overflow: hidden; }
.seg-sono.aberto { border-color: rgba(139, 92, 246, .5); }
.seg-cab {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px;
  background: none; border: none; color: var(--osso); cursor: pointer; text-align: left; font: inherit;
}
.seg-check {
  flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--borda); display: grid; place-items: center; font-size: 13px; color: #fff;
}
.seg-sono.feito .seg-check { background: radial-gradient(circle at 30% 25%, var(--glow), var(--violeta)); border-color: var(--violeta); }
.seg-tit { display: flex; flex-direction: column; min-width: 0; }
.seg-tit strong { font-size: 14.5px; }
.seg-tit em { font-style: normal; font-weight: 400; font-size: 12px; }
.seg-tit > .muted { font-size: 11.5px; }
.seg-valor { margin-left: auto; flex: 0 0 auto; font-weight: 800; font-size: 16px; color: var(--lavanda); }
/* segmento vazio: o valor vira o "+" redondo de adicionar do concept */
.seg-sono:not(.feito) .seg-valor {
  width: 30px; height: 30px; border: 1px solid var(--borda); border-radius: 50%;
  display: grid; place-items: center; color: var(--osso); font-size: 18px; font-weight: 400;
}
.seg-corpo { padding: 0 12px 12px; }

/* ---- Rolo de horas/minutos estilo alarme do iPhone (scroll-snap, sem lib) ---- */
.rolos { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; margin: 4px 0 12px; }
/* faixa central: marca a linha do valor selecionado atravessando os dois rolos */
.rolos::before {
  content: ""; position: absolute; left: 8%; right: 8%; top: 50%; height: 36px;
  transform: translateY(calc(-50% - 10px)); /* -10px compensa o rótulo h/min abaixo dos rolos */
  border-radius: 10px; background: rgba(139, 92, 246, .08);
  border: 1px solid rgba(139, 92, 246, .3); pointer-events: none;
}
.rolo-col { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rolo {
  height: 180px; width: 84px; overflow-y: auto; padding: 72px 0; /* 72 = (180 − 36) / 2: centraliza o 1º e o último item */
  scroll-snap-type: y mandatory; scrollbar-width: none; border-radius: 12px;
  -webkit-mask-image: linear-gradient(transparent, #000 28%, #000 72%, transparent);
  mask-image: linear-gradient(transparent, #000 28%, #000 72%, transparent);
}
.rolo::-webkit-scrollbar { display: none; }
.rolo-item {
  height: 36px; display: grid; place-items: center; scroll-snap-align: center; cursor: pointer;
  font: 700 21px var(--mono); color: var(--cinza); opacity: .4;
  transition: opacity .12s, color .12s, font-size .12s;
}
.rolo-item.sel { color: var(--lavanda); opacity: 1; font-size: 30px; font-weight: 800; }
.rolo-sep { font-size: 28px; font-weight: 800; color: var(--osso); margin-bottom: 20px; }
.rolo-rotulo { font-size: 11px; letter-spacing: .08em; }

/* cards translúcidos (conceito): o avatar pinado aparece através deles no scroll */
.card { background: rgba(17, 24, 43, .72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--borda); border-radius: 14px; padding: 16px; margin: 10px 0; }
h2.secao { font: 700 13px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--cinza); margin: 26px 0 8px; }
button.acao { background: var(--noite-2); border: 1px solid var(--borda); color: var(--osso); padding: 8px 14px; border-radius: 10px; cursor: pointer; }
button.acao.primaria { border-color: var(--violeta); color: var(--lavanda); }
button.acao:hover { border-color: var(--cinza); }
input, select, textarea { background: var(--noite-2); border: 1px solid var(--borda); color: var(--osso); padding: 8px 10px; border-radius: 10px; font: inherit; }
textarea { width: 100%; min-height: 70px; resize: vertical; }
label.campo { display: block; font-size: 12px; color: var(--cinza); margin: 8px 0 2px; letter-spacing: .06em; text-transform: uppercase; }
.mono { font-family: var(--mono); }
.muted { color: var(--cinza); }

.vazio { text-align: center; padding: 60px 0; }
.vazio h2 { font: 700 28px var(--mono); letter-spacing: .1em; }

/* ---- Modal ---- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(7, 11, 24, .7); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: fadeIn .18s ease;
}
.modal {
  background: var(--painel); border: 1px solid var(--borda); border-radius: 16px;
  padding: 22px; width: 100%; max-width: 480px; max-height: 85vh; overflow-y: auto;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
  animation: modalIn .22s cubic-bezier(.2, .8, .3, 1.15) both;
}
.modal input[type="date"], .modal input[type="number"] { margin: 2px 0 6px; }

/* ---- Animações ---- */
@keyframes fadeIn { from { opacity: 0; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } }

#view > * { animation: fadeUp .3s ease both; }
#view > *:nth-child(2) { animation-delay: .04s; }
#view > *:nth-child(3) { animation-delay: .08s; }
#view > *:nth-child(4) { animation-delay: .12s; }

button.acao { transition: border-color .14s, color .14s, transform .12s, background .14s; }
button.acao:active { transform: scale(.96); }

.entrada { display: flex; gap: 12px; align-items: center; padding: 6px 0; }
.entrada .ml { margin-left: auto; }
.acao.mini { padding: 4px 10px; font-size: 12px; }

/* ---- Celebração: burst de estrelas no lugar das gotas do PUMP (reaproveita estrelaBurst) ---- */
.celebra {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: rgba(7, 11, 24, .86); z-index: 50; text-align: center;
  animation: fadeIn .2s ease;
}
.celebra h2 { font: 900 34px var(--mono); color: var(--lavanda); letter-spacing: .1em; margin: 0 0 8px; }
.celebra p { color: var(--cinza); }
.celebra .estrela {
  position: absolute; font-size: 22px; animation: estrelaBurst .9s ease-out both;
}
.celebra-ins h2 { font-size: 26px; }
.celebra-ins p { max-width: 320px; margin: 4px auto 0; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
body.reduz * { transition: none !important; animation: none !important; }

/* ---- Config: checkboxes nativos (a regra genérica de input é pra text/number/select) ---- */
input[type="checkbox"] { appearance: auto; background: none; border: none; padding: 0; border-radius: 0; width: 16px; height: 16px; accent-color: var(--violeta); }

/* ---- Calendário: grade mensal com badges ---- */
.cal-topo { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 12px; }
.cal-dia { aspect-ratio: 1; background: var(--noite-2); border: 1px solid var(--borda); border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; color: var(--osso); }
.cal-dia.atual { border-color: var(--violeta); }
.cal-dia.futuro { opacity: .35; cursor: default; }
.cal-dia .num { font: 11px var(--mono); color: var(--cinza); }
.cal-dia .ico { font-size: 16px; }

/* ---- Calendário do Histórico (Task 9): halo por estado da noite + RP/✓ discretos ---- */
.cal-dia .rp { font-size: 9px; color: var(--cinza); }
.cal-dia .check { font-size: 9px; color: var(--ok); }
.cal-dia.sem-registro { opacity: .5; }
.cal-dia.estado-recuperacao_maxima, .cal-dia.estado-monstro { box-shadow: inset 0 0 0 2px rgba(139, 92, 246, .85); }
.cal-dia.estado-anabolico { box-shadow: inset 0 0 0 2px rgba(124, 58, 237, .55); }
.cal-dia.estado-recuperando { box-shadow: inset 0 0 0 2px rgba(53, 88, 200, .6); }
.cal-dia.estado-frango_cansado { box-shadow: inset 0 0 0 2px rgba(255, 179, 71, .6); }
.cal-dia.estado-catabolizando { box-shadow: inset 0 0 0 2px rgba(255, 107, 107, .6); }

/* ---- Insígnias: coleção agrupada com progresso ---- */
.ins-topo { display: flex; justify-content: space-between; align-items: baseline; }
.ins-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ins { border: 1px solid var(--borda); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 4px; opacity: .55; }
.ins strong { font-size: 14px; }
.ins p { margin: 0; font-size: 11.5px; line-height: 1.35; }
.ins-emoji { font-size: 26px; }
.ins.aberta { opacity: 1; border-color: rgba(139, 92, 246, .45); background: rgba(139, 92, 246, .05); }
.ins-desde { font-size: 11px; color: var(--lavanda); }
.ins-barra { height: 5px; border-radius: 999px; background: var(--noite-2); overflow: hidden; margin-top: auto; }
.ins-barra > div { height: 100%; background: linear-gradient(90deg, var(--violeta), var(--glow)); }
.ins-prog { font-size: 11px; color: var(--cinza); }

/* ---- Progresso: resumo mensal em grid de stats ---- */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.stat { display: flex; flex-direction: column; }
.stat .link { cursor: pointer; color: var(--lavanda); }

/* ---- Blocos próprios do Sleep (usados a partir da Task 6) ---- */
/* cena da cama: a imagem É a barra de progresso física (spec §4.1).
   Full-bleed como no conceito: escapa do padding do main (margens negativas)
   e tem altura contida — o render 1122×1402 é mais alto que o herói do
   conceito, então object-fit:cover corta um pouco de cabeceira/tapete. */
.cena {
  /* herói pinado: sticky segura a cena EXATAMENTE onde ela nasce (logo sob o
     header fixo — altura medida pelo app.js em --topo-h) e os cards (z-index
     acima) sobem por cima dela ao rolar, como no conceito. top:0 faria a
     imagem subir a altura do header antes de travar. */
  position: sticky; top: var(--topo-h, 64px); z-index: 0;
  overflow: hidden; border: none; border-radius: 0;
  margin: -24px calc(-1 * clamp(16px, 4vw, 40px)) -28px;
  height: min(56vh, 560px);
}
.cena img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
/* transição suave cena→conteúdo: fade escuro no rodapé em vez de divisória */
.cena::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 130px;
  background: linear-gradient(180deg, transparent, rgba(7, 11, 24, .92));
  pointer-events: none;
}
/* tudo que vem depois do herói desliza POR CIMA dele */
#view > .cena ~ * { position: relative; z-index: 1; }

/* ---- Desktop (como o PUMP na web): cama emoldurada à esquerda, cards à direita ----
   Só a Home tem .cena, então o grid liga por :has() e as demais views ficam intactas.
   No desktop tem espaço de sobra: a cena vira um quadro pinado na coluna esquerda e
   os cards rolam na direita — sem full-bleed nem sobreposição. */
@media (min-width: 960px) {
  #view:has(> .cena) { display: grid; grid-template-columns: 480px 1fr; gap: 0 24px; align-items: start; }
  #view:has(> .cena) > * { grid-column: 2; min-width: 0; }
  #view > .cena {
    grid-column: 1; grid-row: 1 / 99; /* atravessa todas as linhas da direita */
    position: sticky; top: calc(var(--topo-h, 64px) + 24px);
    margin: 0; height: min(76vh, 720px);
    border-radius: 16px; border: 1px solid var(--borda);
  }
  #view > .cena .sobre { bottom: 16px; }
}
/* respiração lenta e pesada da cena (spec §24.1) — sutil de propósito */
.cena img { animation: respira 6s ease-in-out infinite; transform-origin: 50% 60%; }
@keyframes respira { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.015); } }
.cena .sobre { position: absolute; left: 14px; bottom: 46px; display: flex; gap: 8px; flex-wrap: wrap; }
.pill { font: 700 12px var(--mono); background: rgba(7, 11, 24, .72); backdrop-filter: blur(6px);
  border: 1px solid rgba(139, 92, 246, .35); border-radius: 999px; padding: 5px 11px; }
/* grade 2 colunas dos cards da Home (conceito: shape|estado, última|banco) */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; }
.duo .card { margin: 0; min-width: 0; }
/* rótulos 0% — 100% sob a barra segmentada (conceito) */
.seg-rotulos { display: flex; justify-content: space-between; font: 700 10px var(--mono); color: var(--cinza); }
/* barra segmentada do shape (10 blocos, como no conceito) */
.seg { display: flex; gap: 3px; margin: 10px 0 4px; }
.seg i { flex: 1; height: 9px; border-radius: 3px; background: var(--noite-2); }
.seg i.on { background: linear-gradient(90deg, var(--violeta), var(--glow));
  box-shadow: 0 0 8px rgba(139, 92, 246, .5); }
/* no carrossel da Home a insígnia travada não fica "apagada" como na coleção —
   o conceito mostra as próximas em destaque total */
#ins-carrossel .ins { opacity: 1; }
/* glow violeta "respirando" nos cards de destaque (spec §24.1) */
.card.destaque { border-color: rgba(139, 92, 246, .4); animation: glowCard 5s ease-in-out infinite; }
@keyframes glowCard {
  0%, 100% { box-shadow: 0 0 0 rgba(139, 92, 246, 0); }
  50% { box-shadow: 0 0 22px -6px rgba(139, 92, 246, .45); }
}
/* raridades das insígnias */
.ins.raridade-rare.aberta { border-color: rgba(53, 88, 200, .6); }
.ins.raridade-epic.aberta { border-color: rgba(139, 92, 246, .7); }
.ins.raridade-legendary.aberta { border-color: rgba(250, 204, 21, .6); background: rgba(250, 204, 21, .04); }
/* Recovery Report */
.report { position: fixed; inset: 0; z-index: 55; display: grid; place-items: center;
  background: rgba(7, 11, 24, .9); backdrop-filter: blur(4px); animation: fadeIn .2s ease; }
.report .box { text-align: center; padding: 24px; max-width: 420px; width: 100%; }
.report h2 { font: 900 22px var(--mono); letter-spacing: .22em; color: var(--lavanda); margin: 0 0 14px; }
.report .linha { font: 700 17px var(--mono); margin: 8px 0; opacity: 0; animation: fadeUp .4s ease forwards; }
.report .frase { color: var(--cinza); font-style: italic; margin-top: 16px; opacity: 0; animation: fadeUp .4s ease forwards; }
/* evolução de nível (spec §24.3) */
.evolucao { position: fixed; inset: 0; z-index: 56; display: grid; place-items: center;
  background: rgba(7, 11, 24, .92); animation: fadeIn .2s ease; text-align: center; }
.evolucao h2 { font: 900 34px var(--mono); letter-spacing: .14em; margin: 12px 0 4px;
  background: linear-gradient(90deg, var(--lavanda), var(--glow));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.evolucao img { width: min(70vw, 340px); border-radius: 16px;
  animation: nivelUp .8s ease; box-shadow: 0 0 60px -10px rgba(139, 92, 246, .8); }
@keyframes nivelUp { 0% { transform: scale(.92); filter: brightness(2); } 100% { transform: scale(1); filter: none; } }
.evolucao .estrela { position: absolute; font-size: 20px; animation: estrelaBurst 1s ease-out both; }
@keyframes estrelaBurst { 0% { transform: translateY(0) scale(.4); opacity: 1; } 100% { transform: translateY(-80px) scale(1.1); opacity: 0; } }