/* Favo: tema claro único. Branco suave, tipografia vinho de display, brilho mel, pêssego e lilás. */
:root{
  --page:#ECECEF; --app:#F5F5F7; --card:#FFFFFF; --soft:#EFEFF2;
  --ink:#3F2630; --ink-2:#6B4A57; --muted:#8F8496; --line:#E4E4E9;
  --black:#A84C62; --on-black:#FFFFFF;
  --mel:#F6C23E; --peach:#F3A497; --lilac:#B7A8EC;
  --peach-soft:#FBE3DA; --lilac-soft:#E8E3FA; --mel-soft:#FDF1CF; --mint:#DDEBCF;
  --red:#D63A55; --red-soft:#FCE4E9; --green:#2E9E5B; --blue:#3B7BF6;
  --f:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --shadow:0 1px 2px rgba(13,13,16,.04), 0 8px 24px -12px rgba(13,13,16,.14);
  --grad:linear-gradient(100deg, var(--mel), var(--peach) 50%, var(--lilac));
  --safe-t:env(safe-area-inset-top, 0px); --safe-b:env(safe-area-inset-bottom, 0px);
  color-scheme:light;
}
*{box-sizing:border-box}
html{background:var(--page); -webkit-text-size-adjust:100%}
body{margin:0; background:var(--page); color:var(--ink); font-family:var(--f); font-size:16px; line-height:1.45; letter-spacing:-.01em; -webkit-font-smoothing:antialiased; overscroll-behavior-y:none}
h1,h2,h3{margin:0; font-weight:650; letter-spacing:-.04em; line-height:1.05; text-wrap:balance}
p{margin:0}
button,input,select,textarea{font:inherit; color:inherit; letter-spacing:inherit}
button{cursor:pointer; -webkit-tap-highlight-color:transparent}
a{color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--blue); outline-offset:2px; border-radius:12px}

#app{position:relative; max-width:480px; min-height:100dvh; margin:0 auto; background:var(--app); display:flex; flex-direction:column; overflow-x:clip}
@media (min-width:520px){
  body{background:radial-gradient(900px 500px at 20% 0%, #fbe9c0 0, transparent 60%), radial-gradient(900px 600px at 90% 30%, #e6defb 0, transparent 60%), var(--page)}
  #app{box-shadow:0 30px 80px -30px rgba(13,13,16,.3)}
}
#view{flex:1; display:flex; flex-direction:column; gap:14px; padding:calc(18px + var(--safe-t)) 16px calc(120px + var(--safe-b)); min-width:0}
#view.plain{padding-bottom:calc(32px + var(--safe-b))}
#view > *{min-width:0}

/* Barra de abas */
#tabs{position:fixed; left:50%; transform:translateX(-50%); bottom:0; width:100%; max-width:480px; z-index:20; padding:10px 12px calc(10px + var(--safe-b)); pointer-events:none}
#tabs::before{content:""; position:absolute; inset:-30px 0 0; background:linear-gradient(to top, var(--app) 55%, transparent); z-index:-1}
#tabs .tabbar{pointer-events:auto; display:grid; grid-template-columns:repeat(5,1fr); background:var(--black); border-radius:26px; padding:6px; box-shadow:0 12px 30px -10px rgba(168,76,98,.45)}
#tabs button{border:0; background:transparent; color:rgba(255,255,255,.62); border-radius:20px; padding:8px 2px 6px; display:grid; justify-items:center; gap:2px; font-size:11px; font-weight:600; min-width:0}
#tabs button svg{width:22px; height:22px}
#tabs button[aria-current="page"]{background:var(--on-black); color:var(--black)}

/* Blocos comuns */
.top{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:6px 4px 2px}
.title{font-size:38px}
.title .grey{display:block; color:var(--muted)}
.sub{color:var(--muted); font-size:14px}
.avatar{width:44px; height:44px; flex:none; border-radius:50%; border:0; background:var(--grad); color:var(--ink); font-weight:700; font-size:17px; display:grid; place-items:center; box-shadow:var(--shadow)}
.card{background:var(--card); border-radius:26px; padding:18px; box-shadow:var(--shadow); display:grid; gap:12px; min-width:0}
.card.tint-peach{background:linear-gradient(160deg, var(--peach-soft), #fff 75%)}
.card.tint-lilac{background:linear-gradient(160deg, var(--lilac-soft), #fff 75%)}
.card.tint-mel{background:linear-gradient(160deg, var(--mel-soft), #fff 75%)}
.card.dark{background:var(--black); color:var(--on-black)}
.card.dark .label{color:rgba(255,255,255,.6)}
.label{font-size:13px; color:var(--muted); font-weight:500; white-space:nowrap}
.title .tag{display:block; color:var(--muted); font-size:20px; letter-spacing:-.02em; margin-top:6px; font-weight:600}
.h{font-size:24px}
.h-sm{font-size:19px; letter-spacing:-.03em; font-weight:650; line-height:1.15}
.row{display:flex; justify-content:space-between; align-items:center; gap:10px; min-width:0}
.row > *{min-width:0}
.stack{display:grid; gap:10px; min-width:0}
.wrap{display:flex; flex-wrap:wrap; gap:8px}
.grow{flex:1}
.center{text-align:center}
.small{font-size:13px; color:var(--muted)}
.disc{font-size:12px; color:var(--muted); text-align:center; padding:4px 10px}

.btn{border:0; border-radius:999px; padding:14px 22px; font-weight:650; font-size:16px; background:var(--black); color:var(--on-black); display:inline-flex; justify-content:center; align-items:center; gap:8px; min-height:50px; text-decoration:none; transition:transform .12s, opacity .2s}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.45; pointer-events:none}
.btn.block{width:100%}
.btn.soft{background:var(--soft); color:var(--ink)}
.btn.ghost{background:transparent; color:var(--ink)}
.btn.danger{background:var(--red); color:#fff}
.btn.sm{padding:9px 16px; font-size:14px; min-height:38px}
.link{border:0; background:none; padding:6px 2px; color:var(--ink-2); text-decoration:underline; text-underline-offset:3px; font-size:14px}
.iconbtn{width:40px; height:40px; flex:none; border-radius:50%; border:0; background:var(--soft); display:grid; place-items:center}
.iconbtn svg{width:20px; height:20px}
.chip{border:1.5px solid var(--line); background:var(--card); border-radius:999px; padding:9px 14px; font-size:14px; font-weight:550; display:inline-flex; align-items:center; gap:6px; white-space:nowrap}
.chip[aria-pressed="true"], .chip[aria-selected="true"]{background:var(--black); color:var(--on-black); border-color:var(--black)}
.chips-scroll{display:flex; gap:8px; overflow-x:auto; padding:2px 16px; margin:0 -16px; scrollbar-width:none}
.chips-scroll::-webkit-scrollbar{display:none}
.badge{display:inline-flex; align-items:center; gap:6px; background:var(--soft); border-radius:999px; padding:5px 11px; font-size:12px; font-weight:650}
.badge.mel{background:var(--mel-soft)} .badge.lilac{background:var(--lilac-soft)} .badge.peach{background:var(--peach-soft)} .badge.red{background:var(--red-soft); color:#9c1f37}
.alert{border-radius:18px; padding:12px 14px; font-size:14px; background:var(--mel-soft); display:grid; gap:4px}
.alert.important{background:var(--red-soft); color:#7d1830}
.empty{text-align:center; color:var(--muted); padding:28px 16px; display:grid; gap:8px; justify-items:center}
.empty .big{font-size:40px}
.skeleton{height:120px; border-radius:26px; background:linear-gradient(90deg, #ececf0, #f6f6f8, #ececf0); background-size:200% 100%; animation:sk 1.2s infinite linear}
@keyframes sk{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* Formulários */
.field{display:grid; gap:6px}
.field label{font-size:14px; font-weight:600}
.input, .field input[type], .field select, .field textarea{width:100%; border:1.5px solid var(--line); background:var(--card); border-radius:16px; padding:14px 14px; font-size:16px; min-height:52px; appearance:none; -webkit-appearance:none}
.field textarea{min-height:120px; resize:vertical; line-height:1.4}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--ink)}
.field .hint{font-size:12px; color:var(--muted)}
.field .err, .form-err{font-size:13px; color:var(--red); font-weight:550}
.field.invalid input{border-color:var(--red)}
.check{display:grid; grid-template-columns:26px 1fr; gap:10px; align-items:start; font-size:14px; color:var(--ink-2)}
.check input{width:24px; height:24px; margin:0; accent-color:var(--black)}
.switch{position:relative; width:52px; height:32px; flex:none}
.switch input{position:absolute; inset:0; opacity:0; margin:0; width:100%; height:100%; cursor:pointer}
.switch span{position:absolute; inset:0; border-radius:999px; background:#d4d4da; transition:background .2s; pointer-events:none}
.switch span::after{content:""; position:absolute; top:3px; left:3px; width:26px; height:26px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s}
.switch input:checked + span{background:var(--black)}
.switch input:checked + span::after{transform:translateX(20px)}
.seg{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; background:var(--soft); border-radius:14px; padding:4px; gap:4px}
.seg button{border:0; background:transparent; border-radius:11px; padding:9px 6px; font-size:14px; font-weight:600; color:var(--ink-2)}
.seg button[aria-pressed="true"]{background:var(--card); color:var(--ink); box-shadow:var(--shadow)}

/* Entrada (boas-vindas, login, cadastro) */
.hero{flex:1; display:flex; flex-direction:column; justify-content:flex-end; gap:22px; padding-top:40px; position:relative}
.hero::before{content:""; position:absolute; inset:-60px -40px auto; height:420px; background:radial-gradient(closest-side at 30% 40%, rgba(246,194,62,.55), transparent), radial-gradient(closest-side at 70% 45%, rgba(243,164,151,.6), transparent), radial-gradient(closest-side at 50% 80%, rgba(183,168,236,.6), transparent); filter:blur(30px); z-index:0; pointer-events:none}
.hero > *{position:relative; z-index:1}
.hero .logo{width:96px; height:96px}
.hero h1{font-size:46px}
.hero h1 span{color:var(--muted)}
.back{align-self:flex-start}
.auth-head{display:grid; gap:8px; padding:4px 4px 6px}
.auth-head h1{font-size:34px}

/* Primeiros passos e quiz */
.steps{display:flex; gap:6px}
.steps i{flex:1; height:5px; border-radius:3px; background:var(--line)}
.steps i.on{background:var(--black)}
.opt{width:100%; text-align:left; border:1.5px solid var(--line); background:var(--card); border-radius:20px; padding:14px 16px; display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center; font-weight:600; font-size:16px}
.opt .em{font-size:26px; line-height:1}
.opt small{display:block; font-weight:450; color:var(--muted); font-size:13px}
.opt[aria-pressed="true"]{border-color:var(--black); background:var(--mel-soft)}
.emoji-row{display:grid; grid-template-columns:repeat(5,1fr); gap:8px}
.emoji-row button{border:1.5px solid var(--line); background:var(--card); border-radius:18px; padding:12px 2px 8px; display:grid; gap:4px; justify-items:center; font-size:11px; font-weight:600; color:var(--ink-2); min-width:0}
.emoji-row button .em{font-size:30px; line-height:1.1}
.emoji-row button[aria-pressed="true"]{border-color:var(--black); background:var(--mel-soft); color:var(--ink)}

/* Folha (modal de baixo) */
#sheet-root{position:fixed; inset:0; z-index:50; pointer-events:none}
.sheet-wrap{position:absolute; inset:0; display:flex; justify-content:center; align-items:flex-end; pointer-events:auto}
.sheet-back{position:absolute; inset:0; background:rgba(13,13,16,.45); animation:fade .2s}
.sheet{position:relative; width:100%; max-width:480px; max-height:92dvh; overflow-y:auto; background:var(--app); border-radius:28px 28px 0 0; padding:10px 16px calc(22px + var(--safe-b)); display:grid; gap:14px; animation:up .25s cubic-bezier(.2,.8,.2,1)}
.sheet::before{content:""; width:40px; height:5px; border-radius:3px; background:var(--line); justify-self:center}
.sheet-head{display:flex; justify-content:space-between; align-items:center; gap:10px}
.sheet-head h2{font-size:24px}
@keyframes fade{from{opacity:0}}
@keyframes up{from{transform:translateY(40px); opacity:0}}
#toast{position:fixed; left:50%; bottom:calc(110px + var(--safe-b)); transform:translateX(-50%) translateY(20px); background:var(--black); color:#fff; padding:12px 18px; border-radius:999px; font-size:14px; font-weight:600; opacity:0; transition:all .25s; z-index:80; pointer-events:none; max-width:min(90vw,420px); text-align:center}
#toast.on{opacity:1; transform:translateX(-50%)}

/* Hoje */
.streak-days{display:grid; grid-template-columns:repeat(7,1fr); gap:6px}
.streak-days div{display:grid; gap:4px; justify-items:center; font-size:11px; color:var(--muted)}
.streak-days i{width:100%; aspect-ratio:1; max-width:36px; border-radius:50%; background:var(--soft); display:grid; place-items:center; font-style:normal; font-size:14px}
.streak-days i.on{background:var(--grad)}
.streak-days i.today{box-shadow:0 0 0 2px var(--black)}
.metrics{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.metric{background:var(--soft); border-radius:16px; padding:10px 4px; text-align:center; display:grid; gap:2px}
.metric .em{font-size:24px}
.metric small{font-size:11px; color:var(--muted)}
.bar{height:10px; border-radius:6px; background:var(--soft); overflow:hidden}
.bar i{display:block; height:100%; border-radius:6px; background:var(--grad)}
.lock{display:grid; grid-template-columns:44px 1fr auto; gap:12px; align-items:center}
.lock .ic{width:44px; height:44px; border-radius:14px; background:var(--soft); display:grid; place-items:center; font-size:22px}
.lock b{display:block; font-size:15px}
.lock small{color:var(--muted); font-size:13px}

/* Ciclo */
.cal-head{display:flex; align-items:center; justify-content:space-between}
.cal-head b{font-size:17px}
.cal{display:grid; grid-template-columns:repeat(7,1fr); gap:4px}
.cal .wd{font-size:11px; color:var(--muted); text-align:center; padding:4px 0}
.cal button{aspect-ratio:1; border:0; background:transparent; border-radius:50%; font-size:14px; font-weight:550; display:grid; place-items:center; padding:0; color:var(--ink)}
.cal button.out{visibility:hidden}
.cal button.future{color:#c2c2c9}
.cal button.period{background:var(--red); color:#fff}
.cal button.predicted{box-shadow:inset 0 0 0 2px var(--peach); color:var(--ink)}
.cal button.today{box-shadow:inset 0 0 0 2px var(--black)}
.cal button.period.today{box-shadow:inset 0 0 0 2px var(--black)}
.legend{display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--muted)}
.legend span{display:inline-flex; align-items:center; gap:6px}
.legend i{width:12px; height:12px; border-radius:50%; display:inline-block}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.stat{background:var(--soft); border-radius:18px; padding:12px 8px; text-align:center}
.stat b{display:block; font-size:22px; letter-spacing:-.03em}
.stat small{font-size:11px; color:var(--muted)}
.list{display:grid}
.list > *{border-top:1px solid var(--line)}
.list > *:first-child{border-top:0}
.item{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 2px; width:100%; background:none; border-left:0; border-right:0; border-bottom:0; text-align:left; font-size:15px}
.item b{display:block; font-weight:600}
.item small{color:var(--muted); font-size:13px}
.item .chev{color:var(--muted); flex:none}

/* Evolução */
.chart svg{width:100%; height:auto; display:block; overflow:visible}
.kpis{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
.kpi{background:var(--card); border-radius:22px; padding:14px; box-shadow:var(--shadow); display:grid; gap:4px}
.kpi b{font-size:28px; letter-spacing:-.04em; line-height:1}
.kpi b small{font-size:14px; color:var(--muted); font-weight:500}
.trend{font-size:12px; font-weight:650}
.trend.up{color:var(--green)} .trend.down{color:var(--red)} .trend.flat{color:var(--muted)}
.hbar{display:grid; grid-template-columns:minmax(0,1fr) 34px; gap:8px; align-items:center; font-size:14px}
.hbar .track{grid-column:1/-1; height:8px; border-radius:5px; background:var(--soft); overflow:hidden}
.hbar .track i{display:block; height:100%; background:var(--lilac); border-radius:5px}

/* Colmeia */
.post{background:var(--card); border-radius:24px; padding:16px; box-shadow:var(--shadow); display:grid; gap:10px; min-width:0}
.post-head{display:flex; align-items:center; gap:10px; min-width:0}
.hexav{width:38px; height:38px; flex:none; display:grid; place-items:center; background:var(--grad); clip-path:polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); font-size:17px}
.post-head b{font-size:15px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.post-head small{font-size:12px; color:var(--muted)}
.post-body{font-size:16px; white-space:pre-wrap; overflow-wrap:anywhere}
.reacts{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.react{border:1.5px solid var(--line); background:var(--card); border-radius:999px; padding:6px 11px; font-size:14px; font-weight:600; display:inline-flex; gap:5px; align-items:center}
.react[aria-pressed="true"]{background:var(--mel-soft); border-color:var(--mel)}
.comment{display:grid; gap:2px; padding:10px 0; border-top:1px solid var(--line)}
.comment:first-child{border-top:0}
.comment b{font-size:13px}
.comment p{font-size:15px; white-space:pre-wrap; overflow-wrap:anywhere}
.composer{display:grid; grid-template-columns:1fr auto; gap:8px; align-items:end}
.fab{position:fixed; right:max(16px, calc(50% - 224px)); bottom:calc(96px + var(--safe-b)); z-index:15; width:58px; height:58px; border-radius:50%; border:0; background:var(--grad); box-shadow:0 12px 26px -8px rgba(13,13,16,.45); display:grid; place-items:center}
.fab svg{width:26px; height:26px}

/* Dicas */
.tip{width:100%; text-align:left; border:0; background:var(--card); border-radius:22px; padding:16px; box-shadow:var(--shadow); display:grid; grid-template-columns:44px 1fr auto; gap:12px; align-items:center}
.tip .ic{width:44px; height:44px; border-radius:14px; background:var(--soft); display:grid; place-items:center; font-size:22px}
.tip b{display:block; font-size:16px; line-height:1.2}
.tip small{color:var(--muted); font-size:12px}
.prose{display:grid; gap:12px; font-size:17px; line-height:1.5}

/* Relatório para impressão */
.report{background:#fff; border-radius:22px; padding:20px; display:grid; gap:16px; box-shadow:var(--shadow)}
.report h2{font-size:22px}
.report table{width:100%; border-collapse:collapse; font-size:14px}
.report th, .report td{text-align:left; padding:7px 4px; border-bottom:1px solid var(--line)}
.report th{font-weight:600; color:var(--muted); font-size:12px}
@media print{
  body, html, #app{background:#fff!important}
  #tabs, .no-print, #toast{display:none!important}
  #app{max-width:none; box-shadow:none}
  #view{padding:0}
  .report{box-shadow:none; padding:0}
}