/* APP DO ALUNO — VISUAL-NOVO-20261011: o design do Bruno (ideis app\nitropulse-premium (5).html + nitropulse-animado (1).html),
   adaptado ao nosso app (plano: docs/ESPEC_APP_DESIGN_2026-10-11.md). Do design: cores, cartões, botões limão, ícones, hero,
   pódio em degraus, círculo, calendário em grade, barra de baixo com ícones, introdução. Nosso: logo oficial, Barlow Condensed
   (títulos/números, caixa alta) + DM Sans (textos), gráficos e recibo. maquete_aprovada.css deixou de ser usado pelo app. */
:root { --lime:#B8EB00; --bg:#070D09; --card1:#142018; --card2:#0E1811; --line:#1B2A20; --muted:#A1AFA5; --white:#F4F7F5; --ink:#172000;
  --fc:'Barlow Condensed','Arial Narrow',sans-serif; --fm:'Inter',system-ui,sans-serif;   /* TEXTO-INTER-20261011 (Bruno: "coerentes com o sistema"): a letra dos textos do sistema é a Inter */
  /* nomes que o app.js/evolucao já usam */
  --acid:var(--lime); --txt2:var(--muted); --grafite:#111B14; --linha:var(--line); --preto:var(--bg); --txt:#E8EBE0; }
* { box-sizing:border-box; }
html, body { margin:0; background:var(--bg); }
body { min-height:100vh; min-height:100dvh; color:var(--white); font:15px/1.5 var(--fm); -webkit-text-size-adjust:100%; }
button, input { font:inherit; color:inherit; }
button { border:0; background:none; padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
h1, h2, h3, p { margin:0; }
.app { width:100%; max-width:430px; margin:0 auto; min-height:100vh; min-height:100dvh; }
.tela { position:relative; padding:18px 19px 28px; min-height:100vh; min-height:100dvh; }
.tela.com-nav { padding-bottom:calc(84px + env(safe-area-inset-bottom)); }   /* FOLGA-DA-BARRA-20261012: barra (67 px) + 17 px; antes 112 sobrava */
.tela[hidden] { display:none; }

/* ---------- peças ---------- */
.marca { display:flex; align-items:center; gap:10px; }
.marca .nome { font-family:var(--fc); font-style:italic; font-weight:900; font-size:26px; line-height:1; letter-spacing:0; color:#fff; }   /* LOGO-NOVA-20261021: Barlow 900 itálica oficial, sem barrinha; o app sem a frase */
.marca .nome span { color:var(--lime); }
.marca .sub { font-family:var(--fm); font-weight:700; font-size:9px; letter-spacing:.24em; color:#c3c8cf; text-transform:uppercase; margin-top:4px; }
.marca.peq .nome { font-size:22px; }
.marca.grande .nome { font-size:40px; }
.head { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; min-height:40px; }
.head h3 { font-family:var(--fc); font-weight:700; font-size:17px; letter-spacing:.1em; color:#fff; }
.avatar { width:38px; height:38px; border-radius:50%; background:#2b392d; border:1px solid #465044; color:var(--lime);
  font-family:var(--fc); font-weight:700; font-size:17px; display:grid; place-items:center; flex:0 0 38px; }
.iconbtn { width:40px; height:40px; display:grid; place-items:center; color:var(--muted); }
.i { display:inline-block; width:18px; height:18px; vertical-align:middle; flex:0 0 auto; }
.i svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; display:block; }
.lime { color:var(--lime); }
.eyebrow { font-family:var(--fc); font-weight:700; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#a3b39f; margin-bottom:6px; }
.tit { font-family:var(--fc); font-weight:800; font-size:28px; line-height:1.05; letter-spacing:.02em; color:#fff; text-transform:uppercase; }
.tit.menor { font-size:24px; }
.sub-p { font-size:13px; color:var(--muted); margin-top:5px; line-height:1.45; }
.card { background:linear-gradient(135deg,var(--card1),var(--card2)); border:1px solid var(--line); border-radius:15px; padding:14px; margin-top:12px; }
.card h3 { font-family:var(--fc); font-weight:700; font-size:16px; letter-spacing:.06em; color:#fff; text-transform:uppercase; }
.card p { color:var(--muted); font-size:13px; line-height:1.5; }
.row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.section { display:flex; justify-content:space-between; align-items:center; margin:18px 0 10px; }
.section h3 { font-family:var(--fc); font-weight:700; font-size:16px; letter-spacing:.08em; color:#fff; text-transform:uppercase; }
.link { color:var(--muted); font-size:12px; }
.link.pill-link { background:#243027; border-radius:16px; padding:5px 12px; color:#d1dbd4; font-size:11px; display:inline-block; margin-top:6px; }
small, .small { font-size:12px; color:var(--muted); }

/* botões: os do design (Bruno 11/10: "prefiro as do modelo") — limão cheio, texto escuro, setinha */
.btn { width:100%; min-height:46px; padding:11px 13px; border-radius:11px; background:var(--lime); color:var(--ink);
  font-family:var(--fc); font-weight:700; font-size:16px; letter-spacing:.1em; text-transform:uppercase;
  display:flex; align-items:center; justify-content:center; gap:8px; margin-top:16px; }
.btn .i { width:18px; height:18px; }
.btn.secondary { background:#27312b; color:#fff; border:1px solid #354239; }
.btn.ghost { background:transparent; color:var(--muted); border:1px solid var(--line); }
.btn:disabled { opacity:.4; cursor:default; }
.btn[hidden] { display:none !important; }
.btnrow { display:flex; gap:9px; margin-top:16px; } .btnrow > * { flex:1; margin-top:0; }

/* ---------- acesso (01-05) ---------- */
.formhead { height:184px; margin:-18px -19px 0; padding:24px 22px 0; position:relative;
  background-image:linear-gradient(0deg,var(--bg),#07100d55),url('fotos/d_funcional.jpg'),url('fotos/d_bike.jpg');
  background-size:100% 100%,50% 100%,50% 100%; background-position:center,right center,left center; background-repeat:no-repeat; }
.formhead .marca, .formhead .eyebrow { position:relative; z-index:1; }
.formhead .eyebrow { margin-top:8px; color:#dbe4d8; }
.formcard { margin-top:-9px; position:relative; padding:16px; }
.formcard .tit { margin-bottom:6px; }
.field { display:block; margin-top:14px; font-family:var(--fc); font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#c4cfc6; }
.field input, .inp, .caixa { display:block; width:100%; border:1px solid #3b4940; background:#0e1511; border-radius:11px; color:#fff; padding:12px;
  margin-top:7px; min-width:0; outline:none; font-family:var(--fm); font-size:15px; -webkit-appearance:none; appearance:none; }
.field input:focus, .inp:focus, .caixa:focus { border-color:#5a6b58; }
input.code, .caixa.code { font-family:var(--fc); font-weight:700; font-size:28px; letter-spacing:6px; text-align:center; padding:9px 12px; }
input.pin { font-family:var(--fc); font-weight:700; font-size:24px; letter-spacing:.4em; text-align:center; padding:9px 12px; }
input::placeholder { color:#3d4a44; letter-spacing:inherit; }
.formgrid, .dois { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.segment, .abas, .pills { display:flex; gap:3px; background:#101b14; padding:3px; border:1px solid #1c2a21; border-radius:11px; margin:14px 0 12px; }
.segment > *, .abas > *, .pills > * { flex:1; background:none; color:#a4b3a8; font-family:var(--fc); font-weight:700; font-size:13px; letter-spacing:.08em;
  text-transform:uppercase; border-radius:8px; padding:9px 4px; text-align:center; cursor:pointer; min-height:40px; display:flex; align-items:center; justify-content:center; }
.segment > .on, .abas > .on, .pills > .on { background:var(--lime); color:var(--ink); }
.abas[hidden] { display:none !important; }
.hint { font-size:12px; color:var(--muted); margin:10px 0 0; }
.notice, .priv { display:flex; gap:10px; align-items:flex-start; font-size:12px; color:#b8c4bb; margin:14px 0 0; line-height:1.5; }
.notice .i, .priv .i { color:#9fb59c; margin-top:1px; }
.warn, .aviso { padding:13px; background:#2d1b1c; border-left:3px solid #ef5362; border-radius:10px; font-size:12px; color:#e7c4c8; margin:16px 0; line-height:1.5; }
.warn b, .aviso b { color:#fff; }
.terms { font-size:13px; line-height:1.7; color:#c4cfc6; }
.terms b { color:#fff; }
.check { width:100%; display:flex; gap:12px; align-items:flex-start; margin:16px 0; font-size:13px; line-height:1.6; color:#c4cfc6; text-align:left; }
.check i { flex:0 0 20px; height:20px; border-radius:5px; border:1.5px solid #4a5a4a; display:grid; place-items:center; font-style:normal; font-weight:900; font-size:14px; color:var(--ink); margin-top:2px; }
.check[aria-pressed="true"] i { background:var(--lime); border-color:var(--lime); }
.check[aria-pressed="true"] i::after { content:'✓'; }
.after { text-align:center; font-size:12px; color:var(--muted); margin:18px 0 0; line-height:1.6; }
.after a, .after b { color:var(--lime); font-weight:600; text-decoration:none; }
.erro { min-height:0; margin-top:10px; font-size:13px; line-height:1.4; color:#fca5a5; text-align:center; }
.erro:empty { display:none; }
.successmark { width:82px; height:82px; border-radius:50%; border:2px solid var(--lime); color:var(--lime); display:grid; place-items:center; margin:12px auto 20px; }
.successmark .i { width:34px; height:34px; }
.center { text-align:center; }
.steps { margin-top:16px; }
.steps .row { padding:14px 0; border-bottom:1px solid var(--line); font-size:13px; }
.steps .row:last-child { border:0; }
.steps .row > span:first-child { display:flex; align-items:center; gap:8px; }
.steps .row .i { color:var(--lime); }
.pill { display:inline-flex; align-items:center; gap:5px; font-family:var(--fc); font-weight:700; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  background:#263620; color:var(--lime); padding:5px 9px; border-radius:20px; }
.pill.cinza { background:#1d2621; color:#aab7ae; }
.strap { font-family:var(--fc); font-weight:700; font-size:34px; letter-spacing:6px; text-align:center; border:1px solid #465743; border-radius:11px; padding:9px; color:var(--lime); background:#0f1712; margin-top:9px; }
.strap.branco { color:#fff; }

/* ---------- início (07) ---------- */
.ola { font-family:var(--fc); font-weight:800; font-size:30px; line-height:1.05; letter-spacing:.02em; color:#fff; text-transform:uppercase; }
.hero { border-radius:15px; overflow:hidden; position:relative; margin-top:14px; background:#101b13; border:1px solid var(--line); }
.hero img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
.herocopy { padding:12px 14px 14px; }
.herocopy small { display:block; font-family:var(--fc); font-weight:700; font-size:12px; letter-spacing:.14em; color:#dce5da; text-transform:uppercase; }
.herocopy h2 { font-family:var(--fc); font-weight:800; font-size:22px; letter-spacing:.03em; color:#fff; text-transform:uppercase; margin:3px 0 10px; }
.herocopy .btn { margin-top:0; }
.weeklystats { display:grid; grid-template-columns:repeat(3,1fr); margin-top:14px; }
.weeklystats .stat { text-align:center; padding:0 4px; }
.weeklystats .stat:not(:last-child) { border-right:1px solid #253228; }
.stat .i { width:17px; height:17px; margin-bottom:5px; color:var(--lime); }
.stat strong { display:block; font-family:var(--fc); font-weight:700; font-size:21px; line-height:1.05; color:#fff; white-space:nowrap; }
.stat small { display:block; font-size:10px; color:var(--muted); margin-top:2px; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px; }
.stats .stat { padding:10px 4px; text-align:center; background:#111c14; border:1px solid #1d2b21; border-radius:12px; }
.stats.duas { grid-template-columns:1fr 1fr; }
.week { display:flex; justify-content:space-between; margin-top:16px; text-align:center; font-size:10px; color:#9baca1; }
.week i { display:block; width:9px; height:9px; border-radius:50%; background:#2a3a30; margin:0 auto 6px; }
.week i.on { background:var(--lime); }
.compactlast { display:flex; align-items:center; gap:12px; padding:12px; }
.compactlast .thumb { width:61px; height:65px; border-radius:12px; object-fit:cover; flex:0 0 61px; }
.compactlast h3 { font-size:19px; margin:2px 0; }
.compactlast small { display:block; }
.sensor-top { display:flex; align-items:center; gap:13px; margin-bottom:4px; }
.sensor-top img { width:49px; height:57px; object-fit:contain; flex:0 0 49px; filter:drop-shadow(0 3px 4px #0004); }
.sensor-top b { display:block; font-family:var(--fc); font-weight:700; font-size:15px; letter-spacing:.08em; color:#e9f1eb; text-transform:uppercase; }
.sensor-top small { font-size:11px; color:#849787; line-height:1.4; }
.teclas, .keypad { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:13px 0 0; }
.teclas button { background:#202a24; color:#e9f1eb; border-radius:11px; min-height:42px; font-family:var(--fc); font-weight:700; font-size:21px; }
.teclas button:active { background:#2b3730; }
.teclas span { display:block; }
#k-num { min-height:58px; display:flex; align-items:center; justify-content:center; }
.ok, .espera-ck, .regra, .connection { margin-top:14px; border-radius:12px; padding:13px; display:flex; gap:12px; align-items:center; font-size:12px; line-height:1.45; }
.ok { background:#1c2b14; border:1px solid #415b29; color:#c6dcaf; }
.ok .pulso { width:38px; height:38px; border-radius:50%; background:var(--lime); color:var(--ink); display:grid; place-items:center; font-weight:900; font-size:20px; flex:0 0 38px; }
.ok b, .espera-ck b { display:block; font-family:var(--fc); font-weight:700; font-size:17px; letter-spacing:.06em; color:#fff; text-transform:uppercase; }
.ok span, .espera-ck span { display:block; }
.espera-ck { background:#12191a; border:1px solid #2c333d; color:#c5cad1; }
.giro { flex:0 0 30px; height:30px; border-radius:50%; border:3px solid #39414c; border-top-color:#c5cad1; animation:giro 1s linear infinite; }
@keyframes giro { to { transform:rotate(360deg); } }
.regra { background:rgba(245,158,11,.10); border:1px solid rgba(245,158,11,.55); color:#fde2b0; font-size:13px; }
.ok[hidden], .espera-ck[hidden], .regra[hidden], .tag[hidden], .card[hidden], .week[hidden] { display:none !important; }

/* ---------- agenda (08) ---------- */
.agenda-photo { position:relative; display:flex; height:132px; border-radius:15px; overflow:hidden; margin-top:14px; }
.agenda-photo img { width:50%; height:100%; object-fit:cover; object-position:65% center; }
.agenda-photo::after { content:''; position:absolute; inset:0; background:linear-gradient(0deg,#071109e8,#07110908); }
.agenda-photo > div { position:absolute; left:14px; bottom:13px; z-index:1; }
.agenda-photo b { display:block; font-family:var(--fc); font-weight:700; font-size:17px; letter-spacing:.06em; color:#fff; text-transform:uppercase; }
.agenda-photo small { display:block; margin-top:3px; font-size:11px; color:#c5d0c9; }
.dias, .dates { display:flex; gap:7px; margin:16px 0 6px; }
.dias > * { flex:1; background:#17201b; color:#aab7ae; padding:9px 2px; border:1px solid #2a352e; border-radius:13px; text-align:center;
  font-family:var(--fc); font-weight:700; font-size:11px; letter-spacing:.1em; cursor:pointer; }
.dias small { display:block; font-size:11px; color:inherit; letter-spacing:.1em; }
.dias strong { display:block; font-size:21px; margin:3px 0 0; font-weight:700; }
.dias > .on { background:var(--lime); color:#142000; border-color:var(--lime); }
.ag { display:flex; gap:13px; align-items:center; padding:13px 14px; }
.ag.foi { opacity:.5; }
.ag .h { font-family:var(--fc); font-weight:700; font-size:22px; width:52px; color:#fff; flex:0 0 52px; }
.ag .sep { width:1px; align-self:stretch; background:#344238; }
.ag .info { flex:1; min-width:0; }
.ag .n { font-family:var(--fc); font-weight:700; font-size:15px; letter-spacing:.06em; color:#fff; text-transform:uppercase; }
.ag .d { font-size:12px; color:var(--muted); margin-top:2px; }
.ag .d.prox-txt { color:#dfe9d8; }
.ag .pill { margin-top:7px; }
.ag .class-photo { width:55px; height:60px; border-radius:10px; object-fit:cover; object-position:68% center; flex:0 0 55px; }
.obs { font-size:12px; color:var(--muted); text-align:center; margin:20px 12px 0; line-height:1.5; }
.obs a { color:var(--lime); text-decoration:none; }

/* ---------- seu treino (09-13 + 29) ---------- */
.tag { display:inline-block; font-family:var(--fc); font-weight:700; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#a3b39f; margin-bottom:6px; }
.resultsheader { display:flex; gap:12px; align-items:center; }
.resultsheader .result-photo { width:48px; height:48px; border-radius:11px; object-fit:cover; object-position:67% center; }
.zones { height:13px; display:flex; overflow:hidden; border-radius:7px; margin:12px 0 10px; }
.zones i { display:block; height:100%; min-width:0; }
/* as 6 zonas como no design (lista em 2 colunas: cor, nome, Zn · min · %) */
.zonelist { display:grid; grid-template-columns:1fr 1fr; gap:11px 9px; }
.zoneitem { display:flex; gap:7px; align-items:flex-start; font-size:11px; color:var(--muted); min-width:0; }
.zoneitem i { display:block; width:9px; height:9px; border-radius:3px; flex-shrink:0; margin-top:4px; }
.zoneitem b { display:block; font-family:var(--fc); font-weight:700; font-size:13px; letter-spacing:.04em; color:#fff; text-transform:uppercase; }
.zoneitem small { display:block; font-size:10px; }
/* pódio em degraus (design): cada coluna continua sendo uma linha .rk (1º · NOME · valor) — a ordem na tela é 2º 1º 3º */
.podium { display:flex; justify-content:center; align-items:flex-end; gap:9px; margin:14px 0 4px; }
.podium .rk { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding:0; border:0; gap:0; }
.podium .rk.o0 { order:2; } .podium .rk.o1 { order:1; } .podium .rk.o2 { order:3; }
.podium .rk::before { content:attr(data-ini); width:44px; height:44px; border-radius:50%; background:#2b392d; border:1px solid #465044; color:#ecdfb4;
  display:grid; place-items:center; font-family:var(--fc); font-weight:700; font-size:18px; margin-bottom:8px; }
.podium .rk.eu::before { border-color:var(--lime); color:var(--lime); }
.podium .rk .p { width:auto; flex:none; font-size:12px; letter-spacing:.1em; }
.podium .rk .n { flex:none; width:100%; text-align:center; font-size:14px; }
.plinth { width:100%; margin-top:9px; border-radius:11px 11px 5px 5px; background:linear-gradient(#8d784333,#8d784310); border:1px solid #78673966; height:85px; padding:11px 5px; color:#e4c976; text-align:center; }
.plinth .i { width:16px; height:16px; }
.plinth.first { height:110px; background:linear-gradient(#a080333e,#a0803311); color:#f8d879; }
.plinth.silver { color:#bfc9d1; background:linear-gradient(#76838c33,#76838c0c); border-color:#72818b55; }
.plinth.bronze { color:#d9a578; background:linear-gradient(#b47a4433,#b47a440c); border-color:#8d643555; }
.plinth .v { display:block; font-size:19px; margin-top:4px; color:#fff; }
.podium .rk.eu .plinth .v { color:var(--lime); }
.rankrow, .rk { display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); font-size:13px; gap:10px; }
.rk:last-of-type { border:0; }
.rk .p { width:26px; color:var(--muted); font-family:var(--fc); font-weight:700; font-size:14px; flex:0 0 26px; }
.rk .n { flex:1; min-width:0; font-family:var(--fc); font-weight:700; font-size:15px; letter-spacing:.04em; color:#fff; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rk .n small { display:block; font-family:var(--fm); font-weight:400; font-size:11px; color:var(--muted); letter-spacing:0; text-transform:none; }
.rk .v { font-family:var(--fc); font-weight:700; font-size:17px; color:#fff; white-space:nowrap; }
.rk .v small { font-size:10px; color:var(--muted); margin-left:3px; letter-spacing:.1em; }
.rk.eu .n, .rk.eu .v, .rk.eu .p { color:var(--lime); }
.personal, .eucard { border:1px solid #546a29; background:#1b2815; text-align:center; }
.eucard .t { font-family:var(--fc); font-weight:800; font-size:19px; letter-spacing:.04em; color:#fff; text-transform:uppercase; }
.eucard .s { font-size:12px; color:var(--muted); margin-top:4px; }
.turma { display:flex; flex-direction:column; align-items:flex-start; gap:2px; font-size:13px; color:var(--muted); margin-top:12px; }
.turma b { color:#fff; }
.med { display:flex; gap:13px; align-items:flex-start; }
.med .ic { background:#26351d; color:var(--lime); border-radius:14px; padding:12px; flex:0 0 auto; display:grid; place-items:center; }
.med .q { font-family:var(--fc); font-weight:700; font-size:11px; letter-spacing:.16em; color:#a3b39f; text-transform:uppercase; }
.med .n { font-family:var(--fc); font-weight:700; font-size:17px; color:#fff; text-transform:uppercase; margin:2px 0; }
.med .d { font-size:12px; color:#c4cfc6; }
.med .oq { display:block; font-size:10px; color:var(--muted); margin-top:6px; }
.semp { text-align:center; padding:26px 16px; }
.semp .successmark { width:65px; height:65px; margin-bottom:14px; }
.semp .successmark .i { width:28px; height:28px; }
.semp .t { font-family:var(--fc); font-weight:800; font-size:24px; color:#fff; letter-spacing:.04em; text-transform:uppercase; }
.semp .d { font-size:13px; color:var(--muted); margin-top:8px; line-height:1.5; }
.meta { margin-top:12px; }
.meta .st { display:flex; justify-content:space-between; font-family:var(--fc); font-weight:700; font-size:13px; letter-spacing:.14em; color:var(--muted); text-transform:uppercase; }
.meta .num { font-family:var(--fc); font-weight:800; font-size:28px; color:#fff; margin-top:4px; }
.meta .num small { font-size:12px; color:var(--muted); margin-left:6px; letter-spacing:.1em; }
.progress, .meta .bar { height:7px; background:#303a2e; border-radius:6px; overflow:hidden; margin:12px 0 6px; }
.progress i, .meta .bar i { display:block; height:100%; background:var(--lime); border-radius:6px; }
.meta .d { font-size:12px; color:var(--muted); margin-top:4px; }
.grande { font-family:var(--fc); font-weight:800; font-size:42px; line-height:1; color:#fff; }
.grande small { font-size:16px; color:var(--muted); margin-left:4px; letter-spacing:.08em; }

/* ---------- recibo / evolução (janelas) ---------- */
.barra-topo { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 0 10px; }
.voltar-topo { background:transparent; border:1px solid #2d3c2e; border-radius:999px; color:#c5cad1; font-family:var(--fc); font-weight:700;
  font-size:12px; letter-spacing:.14em; padding:7px 12px; margin-left:auto; }
#t-recibo, #t-evolucao { padding-bottom:0; }
#r-quadro, #e-quadro { position:fixed; left:50%; transform:translateX(-50%); width:100%; max-width:430px; border:0; display:block;
  top:var(--r-topo, 74px); background:var(--bg);
  height:calc(100vh - var(--r-topo, 74px) - var(--r-base, calc(84px + env(safe-area-inset-bottom)))); height:calc(100dvh - var(--r-topo, 74px) - var(--r-base, calc(84px + env(safe-area-inset-bottom)))); }

/* ---------- barra de baixo ---------- */
.nav { position:fixed; left:50%; transform:translateX(-50%); bottom:0; width:100%; max-width:430px; z-index:20;
  display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #1d2a20; background:#0e1811; padding:11px 8px calc(13px + env(safe-area-inset-bottom)); }
.nav[hidden] { display:none !important; }
.nav button { color:#94a299; font-family:var(--fc); font-weight:700; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:5px; padding:0; }
.nav button .i { width:21px; height:21px; }
.nav button.on { color:var(--lime); }

/* ---------- termo completo ---------- */
.termo { position:fixed; inset:0; z-index:50; background:rgba(0,0,0,.8); display:flex; align-items:center; justify-content:center; padding:20px; }
.termo[hidden] { display:none; }
.termo-box { width:100%; max-width:380px; max-height:86vh; overflow:auto; background:linear-gradient(135deg,var(--card1),var(--card2)); border:1px solid #4a5a42; border-radius:18px; padding:20px; }
.termo-box h2 { font-family:var(--fc); font-weight:800; font-size:22px; letter-spacing:.03em; color:#fff; margin:0 0 10px; text-transform:uppercase; }
.termo-txt p { font-size:13px; line-height:1.55; color:#c4cfc6; margin:0 0 10px; }

/* ---------- MINHA CONTA (painel de baixo) ---------- */
.np-conta-bt { width:44px; height:44px; display:grid; place-items:center; }
.avatar.np-conta-bt { flex:0 0 44px; }   /* BOLINHA-REDONDA-20261101 (Bruno: "não está um círculo perfeito"): 44 x 44 */
.np-fundo { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:60; }
.np-folha { position:fixed; left:0; right:0; bottom:0; z-index:61; max-width:520px; margin:0 auto; background:linear-gradient(135deg,#142018,#0b140e); border-top:1px solid #2a3a2e;
  border-radius:22px 22px 0 0; padding:10px 22px calc(26px + env(safe-area-inset-bottom)); box-shadow:0 -12px 40px rgba(0,0,0,.6); transition:transform .18s ease-out; }
.np-folha .pega { width:42px; height:5px; border-radius:3px; background:#39414c; margin:0 auto 18px; }
.np-folha .t { font-family:var(--fc); font-weight:700; font-size:13px; letter-spacing:.2em; color:#a3b39f; margin-bottom:14px; }
.np-folha .topo { display:flex; gap:14px; align-items:center; margin-bottom:14px; }
.np-folha .av { width:58px; height:58px; flex:0 0 58px; border-radius:50%; background:#2b392d; border:1px solid #465044; color:var(--lime); font-family:var(--fc); font-weight:700; font-size:26px; display:grid; place-items:center; }
.np-folha .n { font-family:var(--fc); font-weight:700; font-size:26px; color:#fff; letter-spacing:.02em; line-height:1.05; text-transform:uppercase; }
.np-folha .a { font-size:14px; color:var(--muted); margin-top:3px; }
/* FOTO-PELO-APP-20261015 */
.np-folha .av img { width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }
.mc-foto { border-top:1px solid #1f2a22; padding:14px 0; }
.mc-foto-t { font-size:14px; color:#fff; font-weight:600; }
.mc-foto-s { font-size:12.5px; color:#8E9AA6; margin-top:3px; line-height:1.4; }
.mc-foto-b { display:flex; gap:8px; margin-top:10px; }
.mc-fbt { flex:1; height:42px; border-radius:11px; border:1px solid #39413c; background:transparent; color:#e8ebe0; font-family:var(--fc); font-weight:700; font-size:15px; letter-spacing:.06em; text-transform:uppercase; }
.mc-fbt.on { background:var(--lime); border-color:var(--lime); color:#0b0e13; }
.mc-prev { width:96px; height:96px; border-radius:50%; margin:0 auto 12px; padding:3px; background:linear-gradient(135deg,#d9f99d,#84cc16 45%,#365314); }
.mc-prev img { width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }
.np-folha .lin { display:flex; justify-content:space-between; padding:13px 0; border-top:1px solid #1f2a22; font-size:14px; color:#c5cad1; }
.np-folha .lin b { color:#fff; font-weight:600; font-family:'NP Numero','Barlow Condensed',sans-serif; }   /* NUMERO-EM-BARLOW-20261020: data e nº de aulas na letra dos números, mesma altura */
.np-folha .obs { font-size:13px; color:#7d848e; margin:14px 0 4px; line-height:1.4; text-align:center; }
.np-folha .sair { width:100%; height:48px; margin-top:14px; border-radius:11px; background:transparent; border:1px solid #39413c; color:#e8ebe0;
  font-family:var(--fc); font-weight:700; font-size:16px; letter-spacing:.1em; }
.np-conf { position:fixed; inset:0; z-index:70; background:rgba(0,0,0,.62); display:flex; align-items:center; justify-content:center; padding:24px; }
.np-conf[hidden], .np-folha[hidden], .np-fundo[hidden] { display:none !important; }
.np-conf .c { width:100%; max-width:340px; background:linear-gradient(135deg,var(--card1),var(--card2)); border:1px solid #4a5a42; border-radius:16px; padding:22px 20px 18px; }
.np-conf h3 { font-family:var(--fc); font-weight:700; font-size:24px; letter-spacing:.03em; color:#fff; margin:0 0 8px; }
.np-conf p { font-size:14px; line-height:1.45; color:#c5cad1; margin:0 0 18px; }
.np-conf .b { display:flex; gap:10px; }
.np-conf .b button { flex:1; height:46px; border-radius:11px; font-family:var(--fc); font-weight:700; font-size:16px; letter-spacing:.08em; }
.np-conf .x { background:transparent; border:1px solid #39413c; color:#e8ebe0; }
.np-conf .s { background:var(--lime); color:var(--ink); }

/* ---------- INTRODUÇÃO — INTRO-ANIMADO3-20261012 (nitropulse-animado (3) do Bruno, com a NOSSA logo) ---------- */
.np-intro { position:fixed; inset:0; z-index:9999; background:#080d0b; display:grid; place-items:center; }
/* SEM-SOBREPOSICAO-20261012: ao sair só a LOGO apaga (o fundo continua opaco); depois a abertura é retirada de uma vez */
.np-intro.saindo .intro-marca { animation:introSai .3s ease forwards; }
@keyframes introSai { from { opacity:1; transform:translateY(-2vh); } to { opacity:0; transform:translateY(-2vh); } }
.intro-marca { width:76vw; max-width:340px; transform:translateY(-2vh); }   /* = animado (3): a logo já aparece pronta (sem entrar apagando) */
.intro-marca .marca { gap:3.6%; align-items:center; justify-content:center; }
.intro-marca .marca .nome { width:100%; text-align:center; font-family:var(--flogo, 'Barlow Condensed'), 'Arial Narrow', sans-serif; font-style:italic; font-weight:900; font-size:min(16.9vw, 76px); line-height:.95; letter-spacing:0; white-space:nowrap; }
.intro-pulse { display:block; width:100%; height:auto; aspect-ratio:360/60; margin:clamp(9px, 2.7vw, 16px) 0 0; color:#B8EB00; overflow:visible; }
.intro-pulse path { fill:none; stroke:currentColor; stroke-width:2.2;   /* LINHA-2-2-20261012: comparada 1,65 × 2,2 × 2,8 em tela fina e Android simples — 2,2 aparece bem nos dois */  stroke-linejoin:round; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:1; }
.np-intro.anda .intro-pulse path { animation:pulseDraw 1.65s .15s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes introEntra { from { opacity:0; transform:translateY(calc(-2vh + 6px)); } to { opacity:1; transform:translateY(-2vh); } }
@keyframes pulseDraw { to { stroke-dashoffset:0; } }
@media (prefers-reduced-motion: reduce) { .np-intro.anda .intro-marca { animation:none; opacity:1; } .np-intro.anda .intro-pulse path { animation:none; stroke-dashoffset:0; } .np-intro { transition:none; } }

/* telas baixas (iPhone SE, 360×640): tudo um pouco mais compacto, nada escondido */
@media (max-height: 700px) {
  .hero img { aspect-ratio:2/1; } .formhead { height:150px; } .tit { font-size:25px; } .ola { font-size:27px; }
}

/* ===== LETRA-A-20261011 (Bruno viu A × B × C e fechou a A: "o que combina de forma profissional com o app e o sistema" — a letra do
   recibo e da TV: Barlow nos títulos/números em caixa alta, DM Sans nos textos). Peças copiadas do modelo dele: cabeçalho das telas
   de acesso com a foto dos dois, hero com a foto dos dois, pódio em degraus com "pts · 1º", cartão "A turma junta", "Top 5 do mês",
   perfil com as duas fotos. ===== */
.formhead { height:auto; margin:-18px -19px 0; padding:22px 22px 0; background:none; }
.formhead .intro-brand { position:relative; z-index:1; }
.formhead .eyebrow { margin:10px 0 0; color:#a3b39f; }
.formhead > img { display:block; width:calc(100% + 44px); margin:14px -22px 0; height:190px; object-fit:cover; object-position:center 30%; }
.formcard { margin-top:-9px; }
.hero img { aspect-ratio:auto; height:150px; }
.herocopy { padding:14px 16px 16px; }
.herocopy small { text-transform:none; letter-spacing:0; font-family:var(--fm); font-weight:400; }
.stat small { text-transform:none; letter-spacing:0; font-family:var(--fm); font-weight:400; }
.podium .rk .p { order:3; width:auto; flex:none; font-family:var(--fm); font-weight:400; font-size:12px; letter-spacing:0; color:inherit; margin-top:2px; }
.podium .rk .n { font-size:14px; }
.podium .plinth .v { font-size:19px; margin-top:4px; }
.card.turma { display:block; margin-top:12px; padding:14px 16px; font-size:13px; color:#fff; }
.card.turma .row > span { display:flex; align-items:center; gap:8px; font-family:var(--fc); font-weight:700; font-size:16px; letter-spacing:.06em; text-transform:uppercase; }
.card.turma .row > span .i { color:var(--lime); }
.card.turma .row > b { font-family:var(--fc); font-weight:800; font-size:22px; }
.card.turma .row > b small { font-size:12px; color:var(--muted); letter-spacing:.08em; }
.card.turma .meta-turma { display:block; margin-top:4px; }
.card.eucard { padding:17px; }
.card.eucard .eyebrow { margin-bottom:8px; }
/* CAIXA-CURTA-20261101 (Bruno: "grande demais essa caixa"): "Seu resultado" do Seu treino numa faixa só — lugar à esquerda, pontos à direita */
.card.eucard.curto { padding:11px 16px; display:flex; align-items:center; justify-content:space-between; gap:10px; text-align:left; }
.card.eucard.curto .eyebrow { display:none; }
.card.eucard.curto .t { font-size:16px; white-space:nowrap; }
.card.eucard.curto .s { margin-top:0; font-family:var(--fc); font-weight:700; font-size:14px; letter-spacing:.04em; text-transform:uppercase; color:#cbd5c8; text-align:right; white-space:nowrap; }
.card.eucard.curto.com-foto .txt { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:2px 10px; flex:1; min-width:0; }
/* CAIXA-CURTA-20261101: se não couber numa linha (com a foto do aluno ou celular estreito), os pontos descem para a linha de baixo — nunca estoura */
.card.eucard.curto { flex-wrap:wrap; row-gap:2px; }
.card.eucard.curto .s { margin-left:auto; }
.card.meta .st { margin-bottom:0; color:#fff; font-size:16px; letter-spacing:.06em; } .card.meta .st span:last-child { color:var(--muted); font-size:13px; }
.card.meta .num { font-family:var(--fm); font-size:13px; font-weight:400; color:var(--muted); margin-top:0; }
.card.meta .num small { font-size:13px; margin-left:4px; letter-spacing:0; }
.card.meta .d { margin-top:12px; font-size:12px; }
.rk .n small { font-size:12px; }
.np-folha .topo { flex-direction:column; text-align:center; gap:6px; margin-bottom:10px; }
.np-folha .av { width:65px; height:65px; flex:0 0 65px; }
.np-folha .a { font-size:12px; margin-top:0; }
.profile-photo { position:relative; display:flex; height:112px; border-radius:15px; overflow:hidden; margin:6px 0 10px; }
.profile-photo img { width:50%; height:100%; object-fit:cover; object-position:65% center; }
.profile-photo::after { content:''; position:absolute; inset:0; background:linear-gradient(0deg,#071109e0,#07110910 70%); }
.profile-photo span { position:absolute; left:14px; bottom:12px; z-index:1; font-family:var(--fc); font-weight:700; font-size:15px; letter-spacing:.06em; color:#fff; text-transform:uppercase; }
@media (max-height: 700px) { .formhead > img { height:150px; } .hero img { height:128px; } }
/* NOME-COMO-NO-SISTEMA-20261011 (Bruno: "olha o sistema" — ALUNOS em Barlow, "Ana"/"Bruno" na letra do texto): nome de aluno no app = letra do texto, negrito, inicial maiúscula */
.rk .n, .podium .rk .n, .np-folha .n, .med .n { font-family:var(--fm); font-weight:700; text-transform:none; letter-spacing:0; }
.rk .n { font-size:14px; } .podium .rk .n { font-size:13px; } .np-folha .n { font-size:22px; } .med .n { font-size:15px; }
/* SEM-VAZIO-EMBAIXO-20261012 (Bruno: "esse espaço no 390x844?"): nas telas altas a foto das telas de acesso cresce e o cartão desce */
/* SE-MOLDA-A-TELA-20261012 (Bruno: "o app tem que se moldar à tela de qualquer celular"): nas telas de acesso a foto estica e ocupa
   o espaço que sobra — sem vazio embaixo em celular alto, sem altura fixa. Mínimo 190 px (150 em celular baixo). */
.tela:not(.com-nav):not([hidden]) { display:flex; flex-direction:column; }
.tela:not(.com-nav) > .formhead { flex:1 0 auto; display:flex; flex-direction:column; }
.tela:not(.com-nav) > .formhead > img { flex:1 1 190px; height:auto; min-height:190px; }
.tela:not(.com-nav) > .obs, .tela:not(.com-nav) > .after { flex:none; }
/* LEGIVEL-20261012 (Bruno: "não dá para entender"): selo do círculo e textos do pódio maiores; modalidade da agenda na linha de baixo */
.podium .plinth .v { font-size:22px; }
.podium .rk .p { font-size:13px; }
.podium .rk .n { font-size:15px; }
.ag .d.mod { margin-top:1px; color:#dfe9d8; }

/* CONTA-TELA-INTEIRA-20261012: Minha conta em tela inteira (Perfil do modelo), com ‹ voltar em cima; nada por cima do Início */
.np-folha { top:0; bottom:0; left:50%; right:auto; transform:translateX(-50%); width:100%; max-width:430px; border-radius:0; border:0; box-shadow:none;
  background:var(--bg); padding:18px 19px calc(28px + env(safe-area-inset-bottom)); overflow-y:auto; transition:none; }
.np-folha .mc-head { margin-bottom:10px; } .np-folha .mc-head .mc-esp { width:40px; }
.np-folha .topo { margin-top:6px; }
.np-folha .profile-photo { height:150px; margin:14px 0 16px; }
.np-fundo { background:var(--bg); }
/* LEGIVEL-20261012 (Bruno: "textos pequenos", "não dá para entender"): nada abaixo de 12 px */
.eyebrow, .tag, .pill { font-size:12px; }
small, .small, .hint, .after, .notice, .priv, .obs, .link, .sub-p, .herocopy small, .compactlast small, .sensor-top small, .ag .d,
.eucard .s, .med .d, .meta .d, .card.meta .num, .card.meta .num small, .steps .row, .np-folha .obs, .card.turma .meta-turma { font-size:14px; }
.stat small, .zoneitem small, .zoneitem, .med .oq, .rk .n small, .week, .terms, .check, .dias small { font-size:13px; }
.zoneitem b { font-size:15px; }
.rk .n { font-size:16px; } .rk .v { font-size:19px; } .rk .p { font-size:14px; flex:0 0 32px; width:32px; }
.podium .rk .n { font-size:15px; }
.podium .plinth .v { font-size:22px; } .podium .plinth .v small { font-size:13px; color:var(--muted); margin-left:4px; letter-spacing:.04em; }
.podium .rk .p { font-size:14px; color:#fff; font-family:var(--fm); }
.np-folha .lin { font-size:16px; } .np-folha .a { font-size:14px; }
.card.turma .row > b small { font-size:14px; }
.nav button { font-size:12px; }
.intro-top { font-size:12px; }
/* agenda: o texto do cartão cabe em 360 sem quebrar */
.ag { gap:11px; } .ag .h { width:46px; flex:0 0 46px; font-size:21px; } .ag .d { font-size:13px; } .ag .class-photo { width:50px; flex:0 0 50px; }
/* pódio: degrau cresce com o texto maior; nome comprido quebra em 2 linhas em vez de cortar */
.plinth { height:102px; padding:10px 4px; } .plinth.first { height:128px; }
.podium .rk .n { white-space:normal; overflow:visible; text-overflow:clip; line-height:1.15; font-size:14px; min-height:2.3em; display:flex; align-items:flex-end; justify-content:center; }
@media (max-height: 700px) { .tela:not(.com-nav) > .formhead > img { flex-basis:150px; min-height:150px; } }
/* SE-MOLDA-A-TELA-20261012: Minha conta também preenche a tela — a foto estica no espaço que sobra */
.np-folha:not([hidden]) { display:flex; flex-direction:column; }
.np-folha .profile-photo { flex:1 1 150px; min-height:150px; max-height:340px; height:auto; }
.np-folha > * { flex-shrink:0; }
/* LINK-DENTRO-DO-CARTAO-20261012 (Bruno: igual ao modelo) */
.formcard .after, .formcard .obs { margin-top:18px; }
/* TEXTO-SEM-PALAVRA-SOZINHA-20261012 */
.obs, .after, .hint, .sub-p, .card p { text-wrap:balance; }
/* REVISAO-20261012: o que a medição achou abaixo de 12 px + sem palavra sozinha na última linha */
p, span, small, div, em, b, label { text-wrap:pretty; }
.marca .sub { font-size:12px; letter-spacing:.14em; }
.link.pill-link { font-size:13px; padding:6px 13px; }
.med .q { font-size:12px; }
.agenda-photo small { font-size:13px; }
.warn b, .aviso b, .notice span, .priv span { text-wrap:balance; }
.field.center .strap { display:block; }
/* AULAS-DO-DIA-20261012 */
#u-dia { margin:10px 0 0; } #u-dia[hidden] { display:none !important; } #u-dia span { font-size:13px; text-transform:none; letter-spacing:0; font-family:var(--fm); font-weight:600; }

/* VERDE-DO-APP-NO-AR-20261012 (Bruno: "quero o mesmo do app que está no ar"): os MESMOS verdes do app aprovado (publicar_app):
   detalhes = #B8EB00 (verde do sistema: logo, linhas, números em destaque); botões e seleção cheios = #8FAE1B (o verde fechado de 10/10) */
.btn, .btn.prim, .segment > .on, .abas > .on, .pills > .on, .dias > .on { background:#8FAE1B; border-color:#8FAE1B; }
.np-conf .s { background:#8FAE1B; }
/* VERDE-DO-APP-NO-AR-20261012 (medido no app publicado): links de texto ("Sou novo · criar conta", "Ler o termo completo") em BRANCO,
   não verde; texto do botão #07090c — igual ao app no ar */
.after a, .after b, .obs a { color:#fff; }
.btn, .btn.prim { color:#07090c; }
/* FOTO-SEM-CORTE-20261012 (Bruno: "foto cortada"): as fotos mostram as pessoas inteiras (cabeça com folga em cima), não o centro da foto */
.hero img { object-position:50% 18%; }
.formhead > img { object-position:50% 16%; }
.compactlast .thumb { object-position:62% 20%; }
.agenda-photo img, .profile-photo img { object-position:62% 20%; }
.ag .class-photo { object-position:66% 18%; }
/* a linha da abertura anima só com o desenho — avisa o celular para preparar (menos engasgo) */
.intro-pulse path { will-change:stroke-dashoffset; }
.med .oq, .med .d { text-wrap:balance; }   /* REVISAO-20261012: "e 4." sozinho na linha (360 px) */
/* PADRAO-PODIO-20261016: pódio da aula = Pódio da TV (iniciais + anel ouro/prata/bronze + medalha 1º/2º/3º no canto) */
.podium .rk::before{display:none}
.av2{position:relative;width:56px;height:56px;border-radius:50%;padding:3px;box-sizing:border-box;margin-bottom:6px}.av2.a0{width:66px;height:66px}
.av2.a0{background:linear-gradient(135deg,#FFF4C2,#F5C542 40%,#B07A12)}.av2.a1{background:linear-gradient(135deg,#FFFFFF,#CBD5E1 40%,#7C8798)}.av2.a2{background:linear-gradient(135deg,#FFD9B8,#D98A4B 40%,#8E4E1E)}
.av2>div{width:100%;height:100%;border-radius:50%;background:#1d232c;display:flex;align-items:center;justify-content:center;font:800 19px Inter,sans-serif;color:#cbd5e1}.av2.a0>div{font-size:22px}
.av2>svg{position:absolute;right:-12px;bottom:-14px}

/* APP-ENXUTO-20261021 (Bruno 20/10): ano e peso por ROLETA (o select abre a roda no iPhone e a lista no Android) — com a mesma cara das caixas */
select.inp.sel { -webkit-appearance:none; appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23B8EB00' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; }
select.inp.sel option { color:#111; }
/* sexo com 3 opções: "Prefiro não informar" pode quebrar em 2 linhas sem estourar */
.segment.tres > * { white-space:normal; line-height:1.15; padding:8px 4px; }

/* CHECKIN-TELA-UNICA-20261021 (Bruno 20/10, prévia checkin_tela_unica_v2.png): a cinta num quadrado BRANCO com a LUZ do check-in
   em cima do sensor (onde fica a luzinha da cinta de verdade). O estado vem de #f-checkin[data-estado]. */
.cinta-cx { position:relative; width:60px; height:60px; border-radius:13px; background:#fff; flex:0 0 60px; display:grid; place-items:center; overflow:hidden; }
.sensor-top .cinta-cx img { width:52px; height:auto; flex:none; filter:none; display:block; }
.cinta-luz { position:absolute; left:12.4px; top:24.2px; width:7px; height:7px; border-radius:50%; background:#6b7480; box-shadow:0 0 6px 3px rgba(107,116,128,.45); }
#f-checkin[data-estado="espera"] .cinta-luz { background:#eab308; box-shadow:0 0 6px 3px rgba(234,179,8,.7); }
#f-checkin[data-estado="ok"] .cinta-luz { background:#22c55e; box-shadow:0 0 6px 3px rgba(34,197,94,.8); }
#f-checkin[data-estado="erro"] .cinta-luz { background:#ef4444; box-shadow:0 0 6px 3px rgba(239,68,68,.8); }
#f-checkin[data-estado="espera"] #k-tit { color:#fde68a; }
#f-checkin[data-estado="ok"] #k-tit { color:#86efac; }
#f-checkin[data-estado="erro"] #k-tit { color:#fca5a5; }
#f-checkin[data-estado="erro"] #k-sub { color:#e5b4b4; }
/* check-in feito: o teclado CONTINUA no lugar, apagado e sem toque (sem buraco na tela) */
#f-checkin[data-estado="ok"] .strap, #f-checkin[data-estado="ok"] .teclas { opacity:.28; filter:grayscale(1); pointer-events:none; }
#f-checkin[data-estado="ok"] #k-bt { background:#1f2823 !important; border-color:#2f5a3b !important; color:#86efac; opacity:1; }
#f-checkin[data-estado="espera"] #k-bt { opacity:.55; }

/* MINHA-CONTA-NOVA-20261021 (Bruno 20/10): seções Segurança · Privacidade · Ajuda; AJUSTAR FOTO; Trocar PIN; Apagar minha conta; Como remover */
.mc-sec { font-family:var(--fc); font-weight:700; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#8E9AA6; margin:18px 0 6px; }
.mc-item { display:flex; align-items:center; justify-content:space-between; width:100%; padding:14px 2px; border:0; border-top:1px solid #1f2a22; background:none; color:#e8ebe0; font-size:15px; text-align:left; cursor:pointer; }
.mc-item .i { color:#5f6b63; } .mc-item.perigo { color:#fca5a5; }
.np-conf .s.perigo { background:#ef4444; border-color:#ef4444; color:#fff; }
.np-conf .field { display:block; margin:10px 0 0; text-align:left; } .np-conf .erro { min-height:18px; margin-top:8px; } .np-conf .erro + .b { margin-top:16px; }
.rm-passo { text-align:left; background:#131b16; border:1px solid #26302a; border-radius:12px; padding:11px 13px; margin:10px 0 0; font-size:13.5px; line-height:1.45; color:#c5cad1; }
.rm-passo > b:first-child { display:block; font-family:var(--fc); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:#fff; margin-bottom:2px; }
.mc-ajuste { position:fixed; inset:0; z-index:300; background:#0b100e; display:flex; flex-direction:column; align-items:center; padding:max(16px, env(safe-area-inset-top)) 18px 24px; box-sizing:border-box; }
.mc-ajuste[hidden] { display:none; }
.aj-topo { align-self:stretch; display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.aj-topo b { font-family:var(--fc); font-weight:800; font-size:18px; letter-spacing:.1em; text-transform:uppercase; color:#fff; } .aj-topo span { width:64px; }
.aj-x { background:none; border:0; color:#c5cad1; font-size:15px; padding:6px 0; width:64px; text-align:left; }
.aj-palco { position:relative; width:min(86vw, 340px); aspect-ratio:1; overflow:hidden; border-radius:16px; background:#000; touch-action:none; cursor:grab; }
.aj-palco img { position:absolute; left:50%; top:50%; transform-origin:center; max-width:none; user-select:none; -webkit-user-drag:none; pointer-events:none; }
.aj-circ { position:absolute; inset:10%; border-radius:50%; box-shadow:0 0 0 999px rgba(0,0,0,.55), 0 0 0 3px #B8EB00 inset; pointer-events:none; }
.aj-dica { color:#9aa3ad; font-size:13.5px; text-align:center; line-height:1.5; margin:16px 0 12px; }
.aj-zoom { display:flex; align-items:center; gap:12px; width:min(80vw, 300px); margin-bottom:22px; color:#9aa3ad; } .aj-zoom input { flex:1; accent-color:#B8EB00; }
#aj-usar { width:min(86vw, 340px); }
/* COMO-INSTALAR-IPHONE-20261021: passos numerados para pôr o app na tela do iPhone (pelo Safari) */
.mc-item[hidden] { display:none; }
.ios-passo { display:flex; gap:11px; align-items:flex-start; text-align:left; background:#131b16; border:1px solid #26302a; border-radius:12px; padding:11px 13px; margin:10px 0 0; font-size:13.5px; line-height:1.45; color:#c5cad1; }
.ios-passo > b { flex:0 0 22px; height:22px; border-radius:50%; background:var(--lime); color:#0b0e13; font-family:var(--fc); font-weight:800; font-size:13px; display:grid; place-items:center; margin-top:1px; }
.ios-passo strong { color:#fff; font-weight:600; }
.ios-ic { display:inline-grid; place-items:center; min-width:26px; height:22px; padding:0 5px; border-radius:7px; background:#26302a; color:#fff; font-style:normal; font-weight:700; font-size:12px; letter-spacing:.05em; vertical-align:-5px; }
.ios-ic svg { width:15px; height:15px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#ios-instalar .b { margin-top:16px; }

/* SEU-TREINO-ENXUTO-20261021 (Bruno): "Seu resultado" com a própria foto quando o aluno não está no pódio; no pódio a foto entra na coluna dele */
#u-rank + #u-resumo { margin-top:14px; }
.av2 > div { overflow:hidden; } .av2 > div img { width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
.eucard.com-foto { display:flex; align-items:center; gap:16px; text-align:left; }
.eucard.com-foto .av2 { width:72px; height:72px; flex:0 0 72px; margin:0; background:#39413c; }
.eucard.com-foto .txt { min-width:0; }
/* FOTO-NO-TOPO-20261021: a foto do aluno no botão do topo (Início/Agenda/Seu treino) recortada no círculo, igual à da Minha conta (achado pela foto do teste) */
.avatar img { width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }
/* LEMBRA-CODIGO-20261023: link discreto embaixo do código lembrado */
.e-outro{display:block;margin:2px 0 14px;font-size:13px;color:var(--txt2,#9aa3ae);text-decoration:underline;text-underline-offset:3px}
.e-outro[hidden]{display:none}