/* Identidade: verde floresta + sálvia, creme quente, terracota como destaque */
:root{
  --bg:#f5f1e8; --bg-2:#ece5d6; --card:#fffdf8; --text:#1c2922; --muted:#5c675e; --accent-text:#9c5226; --line:#e7e0d1;
  --primary:#2d5a43; --primary-2:#6a9a7d; --on-primary:#fbf8f1; --deep:#14312a;
  --accent:#c7733f; --good:#3b8256; --danger:#b3432d;
  --radius:22px;
  --shadow:0 1px 0 rgba(255,255,255,.8) inset,0 12px 32px -16px rgba(34,58,45,.28);
  --serif:ui-serif,"New York","Iowan Old Style","Palatino Linotype",Georgia,serif;
}
@media (prefers-color-scheme: dark){
  :root{--bg:#0d1713; --bg-2:#14211b; --card:#15231d; --text:#eceee5; --muted:#8fa196; --line:#243429;
    --primary:#8dbd9f; --primary-2:#5e8f72; --on-primary:#0d1713; --accent:#e29161; --accent-text:#e29161; --good:#6fc08a; --danger:#e8795f;
    --shadow:0 0 0 1px rgba(255,255,255,.03) inset}
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
main{max-width:520px;margin:0 auto;padding:max(18px,env(safe-area-inset-top)) 18px calc(104px + env(safe-area-inset-bottom))}
h1{font:600 2rem/1.15 var(--serif);letter-spacing:-.015em;margin:.5rem 0 .2rem}
h2{font:600 .72rem/1 -apple-system,BlinkMacSystemFont,sans-serif;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:1.7rem 2px .7rem}
h2 .muted{text-transform:none;letter-spacing:0;font-weight:500}
p{margin:.3rem 0}
.muted{color:var(--muted);font-size:.9rem}

/* topo / marca */
.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.brand{display:flex;align-items:center;gap:9px;font:600 1.02rem var(--serif);letter-spacing:.01em}
.brand svg{width:30px;height:30px}
.pill{font-size:.75rem;font-weight:600;padding:5px 11px;border-radius:99px;background:var(--bg-2);color:var(--primary)}

/* cartões */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);margin-bottom:14px}
.hero{position:relative;overflow:hidden;border:0;color:#f6f1e6;
  background:radial-gradient(120% 90% at 100% 0%,rgba(143,190,160,.35),transparent 55%),linear-gradient(155deg,#14312a 0%,#24523d 100%)}
.hero:after{content:"";position:absolute;right:-60px;bottom:-70px;width:200px;height:200px;border-radius:50%;border:1px solid rgba(255,255,255,.08);box-shadow:0 0 0 34px rgba(255,255,255,.03)}
.hero .muted{color:rgba(246,241,230,.72)}
.hero .row{justify-content:space-between;align-items:flex-end;position:relative;z-index:1}
.eyebrow{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;opacity:.75}
.big{font:600 3.3rem/1 var(--serif);letter-spacing:-.02em;margin:6px 0 8px}
.big small{font-size:1.2rem;font-weight:500;opacity:.75;margin-left:4px}
.ring{width:84px;height:84px;flex:none}
.ring text{fill:#fff;font:600 15px var(--serif)}
.sub{position:relative;z-index:1;margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.14);display:flex;justify-content:space-between;font-size:.85rem;color:rgba(246,241,230,.8)}
.row{display:flex;gap:10px;align-items:center}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:13px 12px;box-shadow:var(--shadow)}
.stat .muted{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.09em}
.stat b{display:block;font:600 1.3rem var(--serif);margin-top:4px}
.stat small{font-weight:600}
.good{color:var(--good)} .bad{color:var(--danger)}
.tip{border-left:3px solid var(--accent);background:var(--bg-2);border-radius:4px 14px 14px 4px;padding:12px 14px;font-size:.85rem;color:var(--muted);margin-top:16px}

/* botões e formulários */
button,.btn{font:600 .98rem inherit;font-family:inherit;border:0;border-radius:99px;padding:14px 22px;background:var(--primary);color:var(--on-primary);cursor:pointer;transition:transform .12s,opacity .12s;letter-spacing:.01em}
button:active{transform:scale(.97)}
button.ghost{background:transparent;color:var(--primary);border:1.5px solid var(--line)}
button.danger{background:transparent;color:var(--danger);border:1.5px solid var(--line)}
button.block{width:100%}
button.small{padding:7px 14px;font-size:.82rem}
label{display:block;font-size:.78rem;font-weight:600;margin:0 0 5px 2px;color:var(--muted)}
input,select,textarea{width:100%;font:inherit;color:var(--text);background:var(--bg);border:1.5px solid var(--line);border-radius:14px;padding:13px 14px;appearance:none;-webkit-appearance:none}
select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--primary-2);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary-2) 22%,transparent)}
.field{margin-bottom:12px}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;padding:8px 16px;border-radius:99px;border:1.5px solid var(--line);background:transparent;color:var(--muted);font-weight:600;font-size:.88rem}
.chip.on{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}

/* fotos */
.photo-pick{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;border:1.5px dashed var(--primary-2);background:var(--card);border-radius:var(--radius);min-height:160px;text-align:center;color:var(--muted);cursor:pointer;overflow:hidden}
.photo-pick svg{width:30px;height:30px;color:var(--primary)}
.photo-pick img{width:100%;max-height:360px;object-fit:cover;display:block}
.photo-pick input{display:none}
.photos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.photos figure{margin:0;position:relative;aspect-ratio:3/4;border-radius:16px;overflow:hidden;background:var(--bg-2);cursor:pointer}
.photos img{width:100%;height:100%;object-fit:cover}
.photos figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px 8px 7px;font-size:.72rem;font-weight:600;color:#fff;background:linear-gradient(transparent,rgba(10,25,18,.75))}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.compare div{aspect-ratio:3/4;background:var(--bg-2);border-radius:20px;overflow:hidden;position:relative}
.compare img{width:100%;height:100%;object-fit:cover}
.compare span{position:absolute;left:8px;bottom:8px;background:rgba(10,25,18,.65);backdrop-filter:blur(8px);color:#fff;border-radius:99px;padding:4px 11px;font-size:.74rem;font-weight:600}

/* histórico */
.entry{display:flex;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.entry:last-child{border:0}
.entry .thumb{width:54px;height:70px;border-radius:14px;background:var(--bg-2);object-fit:cover;flex:none}
.entry .info{flex:1;min-width:0;line-height:1.4}
.entry .info b{font:600 1.15rem var(--serif)}
.entry .info small{color:var(--muted)}
.badge{display:inline-block;background:color-mix(in srgb,var(--accent) 16%,transparent);border-radius:99px;padding:1px 9px;font-size:.72rem;font-weight:700;color:var(--accent-text);margin-left:6px}
svg.chart{width:100%;height:auto;display:block}
svg.chart text{fill:var(--muted);font-size:10px}
.empty{text-align:center;padding:34px 10px;color:var(--muted)}

/* navegação flutuante */
nav{position:fixed;left:0;right:0;bottom:0;margin:0;display:flex;align-items:center;justify-content:space-around;
  /* fundo opaco (sem transparência) e colado no fundo: nada de fresta clara por baixo */
  background:var(--card);border:0;border-top:1px solid var(--line);border-radius:0;
  padding:5px max(6px, calc((100% - 520px) / 2)) max(4px, calc(env(safe-area-inset-bottom) - 14px));
  box-shadow:0 -6px 24px -14px rgba(20,45,34,.28)}
/* estende a cor da barra para além da borda da tela (cobre arredondamentos de subpixel e a rolagem elástica do iOS) */
nav::after{content:"";position:absolute;left:0;right:0;top:100%;height:60px;background:var(--card)}
nav button{background:none;color:var(--muted);font:600 .66rem inherit;font-family:inherit;padding:4px 4px;border-radius:16px;display:flex;flex-direction:column;align-items:center;gap:3px;flex:1;letter-spacing:.02em}
nav button svg{width:23px;height:23px}
nav button.on{color:var(--primary)}
nav button.on:not(.fab):before{content:"";width:4px;height:4px;border-radius:50%;background:var(--accent);position:absolute;margin-top:-6px}
nav button.fab{position:relative}
nav button.fab .plus{width:50px;height:50px;border-radius:50%;background:linear-gradient(145deg,var(--primary-2),var(--primary));color:var(--on-primary);display:flex;align-items:center;justify-content:center;margin-top:-24px;box-shadow:0 10px 22px -6px rgba(45,90,67,.6);border:3px solid var(--card)}
nav button.fab .plus svg{width:24px;height:24px}

/* modal e toast */
#modal{position:fixed;inset:0;background:rgba(8,20,14,.82);backdrop-filter:blur(6px);z-index:10;display:flex;align-items:center;justify-content:center;padding:16px}
#modal[hidden],#nav[hidden],#toast[hidden]{display:none}
#modal .sheet{background:var(--card);border-radius:26px;max-width:480px;width:100%;max-height:92vh;overflow:auto;padding:14px}
#modal .sheet img{width:100%;border-radius:18px;display:block;margin-bottom:12px}
#toast{position:fixed;left:50%;bottom:110px;transform:translateX(-50%);background:var(--deep);color:#f6f1e6;padding:11px 20px;border-radius:99px;font-weight:600;font-size:.9rem;z-index:20;box-shadow:0 10px 24px -8px rgba(0,0,0,.4)}

/* boas-vindas */
.welcome{text-align:center;padding:34px 6px 18px}
.welcome svg{width:68px;height:68px;margin-bottom:10px}

/* avisos, hábitos, caneta, conquistas */
.banner{display:flex;gap:12px;align-items:center;justify-content:space-between;background:color-mix(in srgb,var(--accent) 14%,var(--card));border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:18px;padding:12px 14px;margin:14px 0}
.banner.soft{background:var(--bg-2);border-color:var(--line);margin:14px 0 0}
.banner div{display:flex;flex-direction:column;font-size:.85rem;min-width:0}
.banner b{font-size:.95rem}
.banner span{color:var(--muted)}
.banner button{flex:none}
.insight{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 14px;padding:14px 16px}
.insight .muted{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.09em}
.insight b{font:600 1.15rem var(--serif);display:block;margin-top:3px}
.insight b::first-letter{text-transform:uppercase}
.pen{display:flex;justify-content:space-between;align-items:center;padding:14px 16px}
.pen .muted{font-size:.68rem;text-transform:uppercase;letter-spacing:.09em}
.dots{display:flex;gap:7px;margin-top:8px}
.dots i{width:18px;height:18px;border-radius:50%;border:2px solid var(--primary-2);display:block}
.dots i.on{background:var(--primary-2)}
.logrow{margin-bottom:18px}
.logrow:last-child{margin-bottom:0}
.logtop{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.logtop small{color:var(--muted);font-weight:500}
.meter{height:8px;background:var(--bg-2);border-radius:99px;overflow:hidden}
.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--primary-2),var(--primary));border-radius:99px;transition:width .3s}
.meter.sym i{background:linear-gradient(90deg,#d9b36c,var(--accent))}
.logbtn{display:flex;gap:8px;margin-top:10px}
.logbtn button{flex:1}
.medals{display:flex;flex-wrap:wrap;gap:8px}
.medal{padding:6px 13px;border-radius:99px;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent-text);font-size:.8rem;font-weight:700}
.seg{flex-wrap:wrap;overflow:visible}
.seg .chip{padding:7px 13px;font-size:.82rem}

/* comparação com slider */
.slider{position:relative;aspect-ratio:3/4;border-radius:22px;overflow:hidden;background:var(--bg-2)}
.slider img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slider .over{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.slider .handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.slider .tag{position:absolute;bottom:10px;background:rgba(10,25,18,.65);backdrop-filter:blur(8px);color:#fff;border-radius:99px;padding:4px 11px;font-size:.74rem;font-weight:600}
.slider .tag.l{left:10px}.slider .tag.r{right:10px}
input[type=range]{padding:0;border:0;background:none;height:36px;accent-color:var(--primary)}

/* bloqueio, relatório e impressão */
table{border-collapse:collapse;width:100%;font-size:.85rem}
table.kv td{padding:7px 0;border-bottom:1px solid var(--line)}
table.kv td:last-child{text-align:right;font-weight:600}
table.kv tr:last-child td{border:0}
table.log th{text-align:left;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:6px 8px 6px 0;white-space:nowrap}
table.log td{padding:8px 8px 8px 0;border-top:1px solid var(--line);vertical-align:top}
@media print{
  :root{--bg:#fff;--card:#fff;--text:#111;--muted:#555;--line:#ddd;--primary:#2d5a43;--primary-2:#6a9a7d;--accent:#c7733f}
  nav,#toast,#modal,.noprint{display:none!important}
  html,body{background:#fff;color:#111}
  main{max-width:none;padding:0}
  .card{box-shadow:none;break-inside:avoid}
}
[hidden]{display:none!important}
.check{display:flex;gap:10px;align-items:flex-start;margin:4px 0 8px;font-size:.88rem;font-weight:500;color:var(--text);line-height:1.4}
.check input{width:22px;height:22px;flex:none;margin:1px 0 0;padding:0;accent-color:var(--primary)}
.legal h3{font:600 1rem var(--serif);margin:16px 0 4px}
.legal p{font-size:.88rem;color:var(--text);margin:0 0 6px}
/* caixa de aceite: desenhada à mão (o reset global dos campos escondia o visto) */
.check input[type=checkbox]{-webkit-appearance:none;appearance:none;width:24px;height:24px;border:2px solid var(--primary-2);border-radius:8px;background:var(--bg) center/16px no-repeat;display:grid;place-content:center;cursor:pointer;transition:background-color .12s,border-color .12s}
.check input[type=checkbox]:checked{background-color:var(--primary);border-color:var(--primary);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8'/%3E%3C/svg%3E")}
.check input[type=checkbox]:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--primary-2) 28%,transparent);outline:0}
/* telas de entrada (login, código, PIN, aceite): conteúdo centralizado na vertical */
/* centro real da tela: desconta só o respiro do topo (sem o espaço do menu, que não aparece aqui) */
.center-screen{min-height:calc(100vh - 2 * max(18px, env(safe-area-inset-top)));min-height:calc(100dvh - 2 * max(18px, env(safe-area-inset-top)));display:flex;flex-direction:column;justify-content:center}
.center-screen .welcome{padding-top:0;padding-bottom:12px}
main:has(.center-screen){padding-bottom:max(18px, env(safe-area-inset-bottom))}

/* desafio em grupo */
.codebox{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--bg-2);border-radius:16px;padding:12px 14px;margin:12px 0 4px}
.codebox span{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em}
.codebox b{font:600 1.5rem var(--serif);letter-spacing:.16em;color:var(--text)}
.rank{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.rank:first-of-type{border-top:0}
.rank .pos{width:30px;height:30px;border-radius:50%;background:var(--bg-2);display:grid;place-content:center;font:700 .9rem var(--serif);flex:none}
.rank:first-of-type .pos{background:var(--accent);color:#fff}
.rank.me .pos{outline:2px solid var(--primary-2)}
.rank .who{flex:1;min-width:0}
.rank .who .logtop span{font-weight:700;color:var(--primary)}
.codebox{flex-wrap:wrap}
.codebox b{white-space:nowrap;font-size:1.35rem;letter-spacing:.12em}

/* mural, vencedor, juntos, desafio */
.crown{display:flex;gap:12px;align-items:center;background:color-mix(in srgb,var(--accent) 14%,var(--card));border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:16px;padding:10px 14px;margin:12px 0 0;font-size:.9rem}
.crown span{width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-content:center;font-size:1.1rem;flex:none}
.together,.challenge{background:var(--bg-2);border-radius:16px;padding:12px 14px;margin-top:12px}
.together b{font:600 1.25rem var(--serif);color:var(--primary)}
.challenge .pill{background:var(--card)}
.evo{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.evo .pos{width:26px;height:26px;border-radius:50%;background:var(--bg-2);display:grid;place-content:center;font:700 .8rem var(--serif);flex:none}
.evo b{flex:1;min-width:0}
.evo span:last-child{font-weight:700;color:var(--primary);white-space:nowrap}
.post-form{display:flex;gap:8px;margin:0 0 10px}
.post-form input{flex:1;min-width:0;padding:11px 14px}
.post{padding:10px 0;border-top:1px solid var(--line)}
.post p{margin:4px 0 8px;word-break:break-word}
.reacts{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.reacts .chip{padding:5px 11px;font-size:.78rem}

/* comportamento de aplicativo: sem zoom por toque duplo, sem ampliação automática de texto */
html{touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overscroll-behavior-y:none}
input,select,textarea{font-size:max(16px,1em)}   /* o iOS amplia a tela ao focar campos menores que 16px */

/* registro passo a passo */
.stepper{margin:10px 0 4px}
.stepper .bars{display:flex;gap:6px}
.stepper .bars i{flex:1;height:6px;border-radius:99px;background:var(--bg-2);transition:background .2s}
.stepper .bars i.on{background:var(--primary)}
.stepper p{margin:8px 2px 0;font-weight:600;color:var(--text)}
.wizard-nav{display:flex;gap:10px;margin-top:14px}
.wizard-nav button{flex:1}
.wizard-nav #btn-back{flex:0 0 36%}
.sumrow{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid var(--line)}
.sumrow:first-child{border-top:0}
.sumrow b{text-align:right;font-weight:600;max-width:62%}