/* App da cliente: mobile-first, coluna central. */
.app { max-width: 560px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
.topo { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem 1rem; padding-top: max(.6rem, env(safe-area-inset-top)); background: var(--bg); border-bottom: 1px solid var(--linha); }
.topo .logo { font-weight: 800; letter-spacing: .02em; }
.topo .logo small { display: block; font-weight: 500; font-size: .7rem; color: var(--muda); letter-spacing: .08em; text-transform: uppercase; }
.topo .voltar { min-width: 44px; min-height: 44px; border: 0; background: none; font-size: 1.4rem; cursor: pointer; }
#content { flex: 1; padding: 1rem 1rem 6.5rem; }
body[data-tela="auth"] .topo, body[data-tela="auth"] .nav-inf, body[data-tela="player"] .nav-inf, body[data-tela="player"] .topo { display: none; }
body[data-tela="auth"] #content { padding-bottom: 2rem; }
body[data-tela="player"] #content { padding-bottom: 1.5rem; }

.nav-inf { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--card); border-top: 1px solid var(--linha); padding-bottom: env(safe-area-inset-bottom); }
.nav-inf .in { max-width: 560px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); }
.nav-inf a { display: grid; justify-items: center; gap: .1rem; padding: .5rem 0 .45rem; min-height: 56px; text-decoration: none; color: var(--muda); font-size: .75rem; font-weight: 600; }
.nav-inf a span.ic { font-size: 1.3rem; line-height: 1.2; }
.nav-inf a[aria-current="page"] { color: var(--marca); }

/* Autenticação. */
.auth { max-width: 420px; margin: 0 auto; padding-top: 8vh; }
.auth .marca { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: var(--marca); color: var(--marca-fg); font-size: 1.8rem; font-weight: 800; margin-bottom: 1rem; }
.codigo { text-align: center; letter-spacing: .5em; font-size: 1.8rem; font-weight: 700; }
.passos { display: flex; gap: .4rem; margin-bottom: 1rem; }
.passos i { flex: 1; height: 6px; border-radius: 99px; background: var(--linha); }
.passos i.on { background: var(--marca); }
.opcoes { display: grid; gap: .6rem; }
.opcao { display: flex; gap: .8rem; align-items: center; padding: .8rem 1rem; border: 1.5px solid var(--linha); border-radius: var(--raio-p); background: var(--card); cursor: pointer; text-align: left; width: 100%; }
.opcao[aria-pressed="true"] { border-color: var(--marca); background: var(--marca-suave); }
.opcao strong { display: block; }
.abas { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; background: var(--linha); padding: .25rem; border-radius: var(--raio-p); }
.abas button { min-height: 40px; border: 0; border-radius: 8px; background: transparent; font-weight: 600; cursor: pointer; }
.abas button[aria-selected="true"] { background: var(--card); box-shadow: var(--sombra); }

/* Início. */
.hero { background: linear-gradient(160deg, var(--marca), color-mix(in srgb, var(--marca) 70%, #000)); color: var(--marca-fg); border: 0; }
.hero .rotulo { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; opacity: .9; font-weight: 700; }
.hero h2 { font-size: 1.5rem; margin: .2rem 0; }
.hero .btn { background: var(--marca-fg); color: var(--marca); }
.hero .btn:disabled { opacity: .6; }
.semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem; text-align: center; }
.semana .dia { padding: .4rem 0; border-radius: 10px; background: var(--linha); font-size: .8rem; color: var(--muda); }
.semana .dia strong { display: block; font-size: 1rem; color: var(--texto); }
.semana .dia.feito { background: var(--marca); color: var(--marca-fg); }
.semana .dia.feito strong { color: var(--marca-fg); }
.semana .dia.hoje { outline: 2px solid var(--marca); outline-offset: 1px; }
.numero { font-size: 1.8rem; font-weight: 800; line-height: 1.1; }

/* Listas de treino/exercício. */
.item { display: flex; gap: .8rem; align-items: center; padding: .75rem; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--card); text-decoration: none; color: inherit; width: 100%; text-align: left; cursor: pointer; }
.item .corpo { flex: 1; min-width: 0; }
.item .corpo strong { display: block; }
.item .seta { color: var(--muda); font-size: 1.3rem; }
.lista { display: grid; gap: .6rem; }
.ordem { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--marca-suave); color: var(--marca); font-weight: 800; font-size: .85rem; flex: none; }

/* Player. */
.player { display: grid; gap: .9rem; }
.player .cab { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.player .fase { text-align: center; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--marca); }
.player h1 { text-align: center; margin: 0; }
.anel { position: relative; width: 170px; height: 170px; margin: 0 auto; }
.anel svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anel .trilha { stroke: var(--linha); }
.anel .prog { stroke: var(--marca); transition: stroke-dashoffset .25s linear; }
.anel .tempo { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.player .controles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.player .controles .btn { min-height: 56px; flex-direction: column; gap: 0; font-size: .85rem; }
.contagem { display: grid; place-items: center; min-height: 50vh; font-size: 6rem; font-weight: 800; color: var(--marca); }

/* Evolução. */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.stat { padding: .9rem; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--card); }
.stat small { color: var(--muda); display: block; }
.grafico { width: 100%; height: auto; }
.grafico .eixo { stroke: var(--linha); }
.grafico .serie { stroke: var(--marca); fill: none; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.grafico .pt { fill: var(--marca); }
.grafico text { fill: var(--muda); font-size: 11px; }
.grupo-data { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muda); margin: 1rem 0 .4rem; }
.esforco { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; }
.esforco button { min-height: 52px; border-radius: var(--raio-p); border: 1.5px solid var(--linha); background: var(--card); cursor: pointer; font-weight: 700; }
.esforco button[aria-pressed="true"] { border-color: var(--marca); background: var(--marca-suave); color: var(--marca); }

/* Conteúdo e perfil. */
details.faq { border: 1px solid var(--linha); border-radius: var(--raio-p); background: var(--card); padding: .2rem 1rem; }
details.faq summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
details.faq p { color: var(--muda); }
.avatar { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--marca); color: var(--marca-fg); font-weight: 800; font-size: 1.3rem; flex: none; }
.lista-simples { list-style: none; margin: 0; padding: 0; }
.lista-simples li { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--linha); }
.lista-simples li:last-child { border-bottom: 0; }
.estado-tela { text-align: center; padding: 3rem 1rem; }
.estado-tela .icone { font-size: 3.5rem; }