:root {
  --bg: #090a0c; --s1: #111317; --s2: #171a1f; --s3: #1e2229; --line: #23272e; --line2: #2d323b;
  --tx: #f4f5f7; --mu: #8d939e; --dim: #5a606b;
  --ac: #ffffff; --ac-tx: #0a0b0d; --ok: #5ccb8b; --warn: #f0b455; --bad: #f07575;
  --c-sono: #8795e8; --c-higiene: #6cc4d6; --c-pet: #c9a27a; --c-trabalho: #5a606b; --c-estudo: #e3b55f;
  --c-treino: #f27d5c; --c-nutri: #7fcf7c; --c-social: #c78fe3; --c-corpo: #e6e4de; --c-mente: #9eabb9;
  --r: 16px; --r2: 12px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable", "Segoe UI", Inter, Roboto, system-ui, sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--tx); font-family: var(--font); font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
body { min-height: 100dvh; overscroll-behavior-y: none; }
button { font: inherit; color: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
.num { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.mu { color: var(--mu); } .dim { color: var(--dim); }
.small { font-size: 13px; } .tiny { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); font-weight: 600; }
.h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.h2 { font-size: 20px; font-weight: 650; letter-spacing: -0.02em; }
.h3 { font-size: 16px; font-weight: 600; }
.hide { display: none !important; }

/* layout */
#app { max-width: 640px; margin: 0 auto; padding: calc(18px + var(--safe-t)) 18px calc(104px + var(--safe-b)); min-height: 100dvh; }
.view { animation: rise .28s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.stack { display: flex; flex-direction: column; gap: 14px; }
.row { display: flex; align-items: center; gap: 12px; }
.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.wrap { flex-wrap: wrap; }
.gap8 { gap: 8px; } .gap6 { gap: 6px; }
.mt8 { margin-top: 8px; } .mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; }

nav#nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: center; padding: 8px 12px calc(8px + var(--safe-b)); background: linear-gradient(to top, var(--bg) 62%, rgba(9,10,12,0)); pointer-events: none; }
nav#nav .bar { pointer-events: auto; display: flex; gap: 2px; background: rgba(23,26,31,.86); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--line); border-radius: 22px; padding: 6px; width: min(100%, 460px); }
nav#nav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; border-radius: 16px; text-decoration: none; color: var(--mu); font-size: 11px; font-weight: 600; letter-spacing: .02em; transition: .15s; }
nav#nav a svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
nav#nav a.on { color: var(--ac-tx); background: var(--ac); }
@media (min-width: 980px) {
  #app { margin-left: 260px; margin-right: auto; max-width: 720px; padding-bottom: 60px; }
  nav#nav { top: 0; bottom: auto; right: auto; width: 230px; height: 100dvh; padding: 28px 16px; background: none; align-items: flex-start; }
  nav#nav .bar { flex-direction: column; width: 100%; gap: 4px; background: transparent; border: none; backdrop-filter: none; padding: 0; }
  nav#nav a { flex-direction: row; gap: 12px; padding: 12px 14px; font-size: 14.5px; }
  nav#nav .brand { display: block; }
}
nav#nav .brand { display: none; font-weight: 800; letter-spacing: .28em; font-size: 15px; padding: 4px 14px 22px; }

/* surfaces */
.card { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
.card.hl { background: linear-gradient(160deg, var(--s2), var(--s1)); border-color: var(--line2); }
.card h3 + .mu, .card .h3 + .mu { margin-top: 2px; }
.sep { height: 1px; background: var(--line); margin: 12px 0; border: 0; }

/* controls */
.btn { appearance: none; border: 1px solid var(--line2); background: var(--s2); color: var(--tx); border-radius: 14px; padding: 13px 18px; font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform .1s, background .15s; }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--ac); color: var(--ac-tx); border-color: var(--ac); }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--bad); }
.btn.sm { padding: 8px 12px; font-size: 13px; border-radius: 11px; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.input { width: 100%; background: var(--s2); border: 1px solid var(--line2); border-radius: 14px; padding: 14px 16px; outline: none; font-size: 17px; transition: border-color .15s; }
.input:focus { border-color: var(--mu); }
textarea.input { min-height: 110px; resize: vertical; line-height: 1.45; }
label.fl { display: block; font-size: 12px; color: var(--mu); margin: 0 0 6px 2px; font-weight: 600; }
.chip { border: 1px solid var(--line2); background: transparent; color: var(--mu); border-radius: 999px; padding: 8px 14px; font-size: 14px; font-weight: 600; transition: .15s; white-space: nowrap; }
.chip.on { background: var(--ac); border-color: var(--ac); color: var(--ac-tx); }
.seg { display: flex; background: var(--s1); border: 1px solid var(--line); border-radius: 14px; padding: 4px; gap: 2px; }
.seg button { flex: 1; border: 0; background: transparent; color: var(--mu); padding: 9px 6px; border-radius: 10px; font-weight: 600; font-size: 14px; }
.seg button.on { background: var(--s3); color: var(--tx); }
.bar-p { height: 8px; border-radius: 99px; background: var(--s3); overflow: hidden; }
.bar-p > i { display: block; height: 100%; border-radius: 99px; background: var(--ac); transition: width .5s cubic-bezier(.2,.8,.2,1); }
.bar-p.ok > i { background: var(--ok); } .bar-p.warn > i { background: var(--warn); } .bar-p.bad > i { background: var(--bad); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.pill { font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 99px; background: var(--s3); color: var(--mu); letter-spacing: .03em; }
.pill.sagrado { background: rgba(199,143,227,.14); color: var(--c-social); }
.badge-ok { color: var(--ok); }

/* timeline */
.tl { display: flex; flex-direction: column; }
.blk { display: grid; grid-template-columns: 52px 4px 1fr auto; gap: 12px; align-items: stretch; padding: 4px 0; }
.blk .t { font-size: 13px; color: var(--mu); padding-top: 14px; text-align: right; }
.blk .bar { border-radius: 4px; background: var(--c); opacity: .85; margin: 4px 0; }
.blk .body { padding: 10px 0; min-width: 0; cursor: pointer; }
.blk .ttl { font-weight: 600; font-size: 16px; }
.blk.done .ttl { color: var(--mu); text-decoration: line-through; text-decoration-color: var(--dim); }
.blk.past:not(.done) .ttl { color: var(--mu); }
.blk.now { background: var(--s1); border-radius: 14px; margin: 2px -10px; padding: 4px 10px; box-shadow: inset 0 0 0 1px var(--line2); }
.blk.work .ttl { color: var(--mu); font-weight: 500; }
.blk.work .bar { opacity: .35; }
.blk .ck { align-self: center; }
.check { width: 28px; height: 28px; border-radius: 50%; border: 1.7px solid var(--line2); background: transparent; display: grid; place-items: center; padding: 0; transition: .15s; }
.check svg { width: 15px; height: 15px; stroke: var(--ac-tx); stroke-width: 3; fill: none; opacity: 0; stroke-linecap: round; stroke-linejoin: round; }
.check.on { background: var(--ok); border-color: var(--ok); } .check.on svg { opacity: 1; }
.detail { padding: 2px 0 10px; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; color: var(--mu); }
.li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--tx); padding: 3px 0; cursor: pointer; }
.li .check { width: 22px; height: 22px; margin-top: 1px; flex: none; } .li .check svg { width: 12px; height: 12px; }
.li.done span { color: var(--mu); text-decoration: line-through; }

.ring { position: relative; display: grid; place-items: center; }
.ring svg { transform: rotate(-90deg); }
.ring .v { position: absolute; font-weight: 700; letter-spacing: -.02em; }

/* sheets & toast */
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 50; display: flex; align-items: flex-end; justify-content: center; animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.sheet { background: var(--s1); border: 1px solid var(--line2); border-radius: 24px 24px 0 0; width: min(100%, 640px); max-height: 92dvh; overflow: auto; padding: 18px 18px calc(22px + var(--safe-b)); animation: up .28s cubic-bezier(.2,.8,.2,1); }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
.sheet .grab { width: 40px; height: 4px; border-radius: 4px; background: var(--line2); margin: -6px auto 14px; }
@media (min-width: 700px) { .scrim { align-items: center; } .sheet { border-radius: 24px; } }
#toast { position: fixed; left: 50%; bottom: calc(96px + var(--safe-b)); transform: translateX(-50%) translateY(20px); background: var(--tx); color: var(--bg); padding: 11px 18px; border-radius: 14px; font-weight: 600; font-size: 14.5px; opacity: 0; transition: .25s; z-index: 80; pointer-events: none; max-width: 90vw; text-align: center; }
#toast.on { opacity: 1; transform: translateX(-50%); }

/* interview */
.iv { min-height: calc(100dvh - 40px); display: flex; flex-direction: column; }
.iv .top { display: flex; align-items: center; gap: 12px; padding-bottom: 8px; }
.iv .prog { height: 3px; background: var(--s3); border-radius: 3px; flex: 1; overflow: hidden; } .iv .prog i { display: block; height: 100%; background: var(--ac); transition: width .35s; }
.iv .q { margin-top: 28px; font-size: 27px; font-weight: 700; letter-spacing: -.025em; line-height: 1.18; }
.iv .sec { color: var(--mu); margin-top: 6px; font-size: 14px; }
.iv .opts { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.opt { text-align: left; background: var(--s1); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; font-size: 16.5px; font-weight: 550; display: flex; align-items: center; gap: 12px; transition: .12s; }
.opt .mk { width: 22px; height: 22px; border-radius: 50%; border: 1.7px solid var(--line2); flex: none; display: grid; place-items: center; }
.opt.multi .mk { border-radius: 7px; }
.opt.on { border-color: var(--ac); background: var(--s2); }
.opt.on .mk { background: var(--ac); border-color: var(--ac); } .opt.on .mk::after { content: ""; width: 9px; height: 5px; border-left: 2.4px solid var(--ac-tx); border-bottom: 2.4px solid var(--ac-tx); transform: rotate(-45deg) translate(1px, -1px); }
.iv .foot { margin-top: auto; padding-top: 24px; display: flex; gap: 10px; position: sticky; bottom: 0; background: linear-gradient(to top, var(--bg) 70%, transparent); padding-bottom: calc(14px + var(--safe-b)); }
.iv .foot .btn.primary { flex: 1; }
.scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 24px; }
.scale button { border: 1px solid var(--line); background: var(--s1); border-radius: 16px; padding: 18px 0; font-size: 22px; font-weight: 700; }
.scale button.on { background: var(--ac); color: var(--ac-tx); border-color: var(--ac); }
.numrow { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.numrow .input { font-size: 38px; font-weight: 700; text-align: center; padding: 14px; }
.stepbtn { width: 56px; height: 56px; border-radius: 50%; font-size: 26px; padding: 0; flex: none; }
.unit { color: var(--mu); font-weight: 600; margin-top: 8px; text-align: center; }

/* workout */
.set { display: grid; grid-template-columns: 34px 1fr 1fr 52px; gap: 8px; align-items: center; padding: 6px 0; }
.set .sn { color: var(--mu); font-weight: 700; text-align: center; }
.set input { background: var(--s2); border: 1px solid var(--line2); border-radius: 12px; padding: 12px 4px; text-align: center; font-size: 19px; font-weight: 700; width: 100%; outline: none; }
.set input:focus { border-color: var(--mu); }
.set.done input { opacity: .55; }
.set .check { width: 48px; height: 48px; border-radius: 14px; }
.set .check svg { width: 22px; height: 22px; }
.ex { border: 1px solid var(--line); border-radius: var(--r); background: var(--s1); }
.ex.cur { border-color: var(--line2); background: linear-gradient(170deg, var(--s2), var(--s1)); }
.ex .head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; }
.ex .bodyx { padding: 0 16px 16px; }
.cue { background: var(--s2); border-radius: 12px; padding: 12px 14px; font-size: 14px; color: var(--mu); line-height: 1.5; }
.rest { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; justify-content: center; padding: 12px; padding-bottom: calc(12px + var(--safe-b)); }
.rest .in { background: var(--tx); color: var(--bg); border-radius: 22px; padding: 14px 18px; display: flex; align-items: center; gap: 16px; width: min(100%, 460px); box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.rest .tm { font-size: 40px; font-weight: 800; letter-spacing: -.03em; }
.rest .btn { background: rgba(0,0,0,.08); border: 0; color: var(--bg); padding: 10px 14px; }
.rest.zero .in { background: var(--ok); }

/* misc */
.md h2 { font-size: 16px; margin: 16px 0 6px; font-weight: 700; } .md h2:first-child { margin-top: 0; }
.md p { margin: 6px 0; color: #d3d6dc; } .md ul { margin: 6px 0; padding-left: 20px; color: #d3d6dc; } .md li { margin: 3px 0; } .md strong { color: var(--tx); }
.thumb { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 12px; background: var(--s2); display: block; }
.slot { border: 1.5px dashed var(--line2); border-radius: 14px; aspect-ratio: 3/4; display: grid; place-items: center; color: var(--mu); font-size: 13px; text-align: center; padding: 8px; cursor: pointer; overflow: hidden; position: relative; background: var(--s1); }
.slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.stat { background: var(--s2); border-radius: 14px; padding: 12px 14px; } .stat .v { font-size: 22px; font-weight: 700; letter-spacing: -.02em; } .stat .l { font-size: 12px; color: var(--mu); margin-top: 2px; }
.menu-item { display: flex; align-items: center; gap: 14px; padding: 15px 16px; text-decoration: none; border-bottom: 1px solid var(--line); }
.menu-item:last-child { border-bottom: 0; } .menu-item .ic { width: 38px; height: 38px; border-radius: 12px; background: var(--s3); display: grid; place-items: center; }
.menu-item svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.daystrip { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 4px; scrollbar-width: none; } .daystrip::-webkit-scrollbar { display: none; }
.daystrip button { flex: 1; min-width: 44px; border: 1px solid var(--line); background: var(--s1); border-radius: 14px; padding: 8px 0; color: var(--mu); font-weight: 600; font-size: 12px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.daystrip button b { font-size: 17px; color: var(--tx); font-variant-numeric: tabular-nums; } .daystrip button.on { background: var(--ac); border-color: var(--ac); color: var(--ac-tx); } .daystrip button.on b { color: var(--ac-tx); }
.spinner { width: 22px; height: 22px; border: 2.5px solid var(--line2); border-top-color: var(--tx); border-radius: 50%; animation: sp .8s linear infinite; display: inline-block; } @keyframes sp { to { transform: rotate(360deg); } }
.wm { font-weight: 800; letter-spacing: .32em; }
.center { text-align: center; }
.authbox { max-width: 400px; margin: 10vh auto 0; }
.bars { display: flex; align-items: flex-end; gap: 8px; height: 90px; } .bars .b { flex: 1; background: var(--s3); border-radius: 8px 8px 4px 4px; min-height: 4px; position: relative; } .bars .b i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--ac); border-radius: inherit; }
.bars .b.future { opacity: .35; }