/* ============================================================
   Forja — sistema visual Liquid Glass (iOS 26/27) para web
   ------------------------------------------------------------
   Regras que este arquivo respeita, por causa dos bugs do Safari 26:
   - elemento fixed = pai transparente + filho absoluto com o vidro
   - blur maximo 16px, no maximo 3 passes de filtro
   - html/body sempre com background-color explicito
   - cantos concentricos: raio interno = max(0, externo - padding)
   - backdrop-filter nunca animado; anima-se opacity/transform
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  /* intensidade do vidro: 0 = clear (iOS "Clear"), 1 = tinted (iOS "Tinted").
     Espelha o slider Liquid Glass do iOS 27, que nao e exposto a web. */
  --gi: .5;

  --glass-a:  calc(.06 + .30 * var(--gi));
  --glass-a2: calc(.10 + .38 * var(--gi));
  --blur:     clamp(6px, calc((1 - var(--gi)) * 8px + 8px), 16px);
  --sat: 175%;

  --r-lg: 26px;
  --r-md: 20px;
  --r-sm: 14px;
  --pad:  14px;

  --accent:  #4F8CFF;
  --accent2: #7A5CFF;
  --ok:      #32D74B;
  --warn:    #FF9F0A;
  --bad:     #FF453A;
  --cardio:  #FF375F;

  --txt:   #fff;
  --txt-2: rgba(255,255,255,.66);
  --txt-3: rgba(255,255,255,.40);
  --line:  rgba(255,255,255,.13);
  --page:  #060608;

  /* superfícies sólidas, estilo Ajustes do iOS: o vidro fica para botões,
     folhas sobrepostas e a barra de abas — não para os cartões de conteúdo */
  --surface: #1C1C1F;
  --fill:  rgba(120,120,128,.16);
  --fill2: rgba(120,120,128,.26);
  --sep:   rgba(255,255,255,.09);

  --ease: cubic-bezier(.32,.72,0,1);
  --dur: .34s;

  --top: calc(env(safe-area-inset-top, 0px) + 52px);
  --bot: calc(max(env(safe-area-inset-bottom, 0px), 16px) + 80px);

  --g-peito:#FF6B6B; --g-costas:#4F8CFF; --g-ombro:#FFB020; --g-biceps:#7A5CFF;
  --g-triceps:#FF7AC6; --g-quadriceps:#32D74B; --g-posterior:#00C8B4; --g-gluteos:#FF9F0A;
  --g-panturrilha:#8E97A8; --g-abdomen:#FFD426; --g-trapezio:#5AC8FA; --g-lombar:#C08457;
  --g-antebraco:#9AA0A6; --g-cardio:#FF375F;
}

html[data-tema="claro"]{
  --txt:#0A0A0C; --txt-2:rgba(10,10,12,.62); --txt-3:rgba(10,10,12,.40);
  --line:rgba(10,10,12,.13); --page:#F2F2F7;
  --surface:#FFFFFF;
  --fill:  rgba(120,120,128,.12);
  --fill2: rgba(120,120,128,.20);
  --sep:   rgba(60,60,67,.29);
  --glass-a:  calc(.40 + .38 * var(--gi));
  --glass-a2: calc(.50 + .38 * var(--gi));
  --accent:#2F6FE4; --accent2:#6B45F0;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* nada de seleção de texto na interface — só nos campos de escrita */
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea{-webkit-user-select:text;user-select:text}
/* a cor fica no html (propaga para o canvas) e o body segue transparente,
   senao o fundo do body cobriria a camada .bg em z-index:-1 */
html{background-color:var(--page);-webkit-text-size-adjust:100%}
/* Quem rola é o PRÓPRIO DOCUMENTO (modelo do Ecoprima) — não um contêiner
   travado. Travar o documento (body overflow:hidden) fazia o Safari do iOS,
   no app instalado, entregar uma "janela" mais curta que a tela, e tudo que
   se ancora no rodapé flutuava. Deixando o documento rolar, o viewport se
   comporta e `bottom:0` bate na base real. As barras fixas continuam sendo
   filhas diretas do body (nunca dentro de um contêiner rolável). */
body{
  background-color:transparent;
  /* 100vh, não 100dvh — é o que o Ecoprima usa. O vh é a viewport GRANDE e
     estável; o dvh encolhe e cresce junto com a interface do sistema, e numa
     abertura fria resolve contra uma janela provisória. Com vh o documento
     sempre tem pelo menos a altura cheia, sempre dá para rolar um fio, e é
     isso que faz o iOS assentar a janela — a causa-raiz achada na v2.3. */
  margin:0; min-height:100vh; overflow-x:hidden; color:var(--txt);
  overscroll-behavior-y:none;
  font:400 17px/1.4 -apple-system,"SF Pro Text",system-ui,"Segoe UI",Roboto,sans-serif;
  letter-spacing:-.01em;
}
.scroll{position:relative;z-index:1}
button,input,select,textarea{font:inherit;color:inherit}
button{border:0;background:none;padding:0;cursor:pointer}
h1,h2,h3,h4,p{margin:0}
svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- fundo ----------
   Fundo liso, como o app de Ajustes do iOS. Os blobs ficam quase imperceptíveis,
   só para a barra de abas de vidro ter o que refratar ao rolar. */
/* Estende-se ALÉM da janela de layout: quando o WebKit do iPhone encolhe a
   janela (ver módulo Viewport no app.js), a área que sobra embaixo era pintada
   pelo fundo cru do html e aparecia como uma faixa preta (ou branca no tema
   claro) sob a barra de abas. Assim não sobra faixa nenhuma, mesmo no instante
   anterior à cura. Elemento fixo não gera rolagem, então esticar é de graça. */
.bg{position:fixed;top:-2px;left:0;right:0;bottom:-240px;z-index:-1;overflow:hidden;background:var(--page)}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.10}
html[data-tema="claro"] .blob{opacity:.18}
.grain{display:none}
.b1{width:64vw;height:64vw;left:-18vw;top:-12vh;background:radial-gradient(circle,#3A6BFF,transparent 70%)}
.b2{width:70vw;height:70vw;right:-24vw;top:26vh;background:radial-gradient(circle,#7A5CFF,transparent 70%)}
.b3{width:78vw;height:78vw;left:-10vw;bottom:-24vh;background:radial-gradient(circle,#00C8B4,transparent 70%);opacity:.07}

/* ============================================================
   VIDRO — base reutilizavel
   ============================================================ */
.glass{
  position:relative; isolation:isolate;
  border-radius:var(--r-lg);
  background:rgba(255,255,255,var(--glass-a));
  -webkit-backdrop-filter:blur(var(--blur)) saturate(var(--sat));
          backdrop-filter:blur(var(--blur)) saturate(var(--sat));
  box-shadow:
    0 10px 34px rgba(0,0,0,.26),
    0 1px 2px rgba(0,0,0,.14),
    inset 0 1px 1px rgba(255,255,255,.52),
    inset 0 -1px 1px rgba(0,0,0,.10);
}
html[data-tema="claro"] .glass{
  box-shadow:0 8px 26px rgba(20,24,40,.13),inset 0 1px 1px rgba(255,255,255,.9),inset 0 -1px 1px rgba(0,0,0,.05);
}
/* brilho especular */
.glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:linear-gradient(140deg,
    rgba(255,255,255,.42) 0%, rgba(255,255,255,.08) 20%,
    rgba(255,255,255,0) 44%, rgba(255,255,255,0) 74%, rgba(255,255,255,.14) 100%);
  mix-blend-mode:screen; opacity:calc(1 - var(--gi) * .35);
}
/* borda refratada */
.glass::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:0;
  background:conic-gradient(from 205deg,
    rgba(255,255,255,.04), rgba(255,255,255,.62), rgba(255,255,255,.06),
    rgba(255,255,255,.40), rgba(255,255,255,.04));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.glass > *{position:relative;z-index:1}

/* ---------- barra superior ---------- */
.topbar{position:fixed;inset:0 0 auto 0;height:var(--top);z-index:60;background-color:transparent;pointer-events:none}
.topbar__glass{
  position:absolute;inset:0;pointer-events:none;
  -webkit-backdrop-filter:blur(18px) saturate(180%);
          backdrop-filter:blur(18px) saturate(180%);
  background:rgba(16,16,19,.72);
  box-shadow:0 .5px 0 var(--sep);
  opacity:0;transition:opacity .25s linear;
}
html[data-tema="claro"] .topbar__glass{background:rgba(242,242,247,.78)}
.topbar.is-solid .topbar__glass{opacity:1}
.topbar__row{position:absolute;left:0;right:0;bottom:0;height:52px;display:flex;align-items:center;gap:8px;padding:0 12px;pointer-events:auto}
/* título fica centralizado de verdade, independente de quantos botões há à direita */
.topbar__title{position:absolute;left:50%;transform:translateX(-50%);max-width:calc(100% - 196px);
  font-size:17px;font-weight:650;text-align:center;letter-spacing:-.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.topbar__grow{flex:1}
.topbar__acts{display:flex;align-items:center;gap:7px}
.icobtn{width:38px;height:38px;display:grid;place-items:center;border-radius:999px;flex:0 0 38px;
  background:rgba(255,255,255,calc(var(--glass-a) * .9));
  -webkit-backdrop-filter:blur(10px) saturate(150%);backdrop-filter:blur(10px) saturate(150%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.4),inset 0 0 0 1px var(--line);
  transition:transform .16s var(--ease)}
.icobtn:active{transform:scale(.9)}
.icobtn--forte{background:linear-gradient(160deg,var(--accent),var(--accent2));color:#fff;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.35),0 4px 14px rgba(79,140,255,.34)}
.icobtn--forte svg{stroke-width:2.4}
html[data-tema="claro"] .icobtn{background:rgba(255,255,255,.8);box-shadow:inset 0 1px 1px rgba(255,255,255,.9),inset 0 0 0 1px var(--line),0 1px 4px rgba(20,24,40,.1)}
.icobtn svg{width:20px;height:20px}
.icobtn[hidden]{visibility:hidden;display:grid}

/* ---------- avatar do perfil (canto superior direito) ---------- */
.avatar{width:36px;height:36px;border-radius:50%;flex:0 0 36px;overflow:hidden;position:relative;
  display:grid;place-items:center;background:linear-gradient(160deg,var(--accent),var(--accent2));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.4),0 2px 8px rgba(0,0,0,.25);
  transition:transform .16s var(--ease)}
.avatar:active{transform:scale(.9)}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.avatar span{font-size:16px;font-weight:700;color:#fff;text-transform:uppercase}
.avatar[hidden]{display:none}
.avatar--big{width:96px;height:96px;flex:0 0 96px;margin:0 auto;display:grid}
.avatar--big span{font-size:40px}

/* ---------- conteudo ---------- */
.view{padding:calc(var(--top) + 6px) 14px calc(var(--bot) + 26px);
  padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right));
  max-width:640px;margin:0 auto}
.view--full{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 120px)}
body.no-tabs .tabbar{display:none}

/* ---------- abas: barra do Ecoprima (reproduzida no Forja) ----------
   Estrutura robusta e à prova de erro: container fixo em bottom:0 que só
   empurra a cápsula para cima com padding-bottom max(safe-area, 16px); a
   cápsula é um FILHO FLEX centralizado. Sem calibragem de viewport.
   O indicador é uma cápsula menor que DESLIZA (left/width) até a aba ativa,
   com o "pop" e a franja cromática (aberração) do Ecoprima. */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:max(env(safe-area-inset-bottom,0px),16px);
  padding-left:16px;padding-right:16px;
  pointer-events:none;background:transparent}
.tabbar__glass{display:none}
.tabbar__row{position:relative;isolation:isolate;overflow:visible;
  display:flex;align-items:center;justify-content:space-around;gap:0;padding:0 8px;
  height:62px;border-radius:999px;pointer-events:auto;width:100%;max-width:420px;
  /* padrão = tema ESCURO do Forja (= dark do Ecoprima) */
  background:rgba(28,26,24,.58);
  -webkit-backdrop-filter:blur(10px) saturate(1.6);backdrop-filter:blur(10px) saturate(1.6);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 4px 28px rgba(0,0,0,.50),
    inset 0 1.5px 1px rgba(255,255,255,.14),inset 0 -1px 1px rgba(0,0,0,.30),
    inset 1px 0 1px rgba(255,255,255,.06),inset -1px 0 1px rgba(0,0,0,.20)}
html[data-tema="claro"] .tabbar__row{
  background:rgba(255,255,255,.30);border-color:rgba(255,255,255,.50);
  box-shadow:0 4px 28px rgba(0,0,0,.12),
    inset 0 1.5px 1px rgba(255,255,255,.90),inset 0 -1px 1px rgba(0,0,0,.06),
    inset 1px 0 1px rgba(255,255,255,.35),inset -1px 0 1px rgba(0,0,0,.04)}

/* indicador que desliza (nome interno .tabbar__lens mantido para o JS) */
.tabbar__lens{position:absolute;top:6px;bottom:6px;left:0;width:0;border-radius:999px;
  transform-origin:center center;z-index:0;pointer-events:none;opacity:0;overflow:visible;
  /* padrão = escuro */
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);
  box-shadow:inset 0 1.5px 1px rgba(255,255,255,.22),inset 0 -1px 1px rgba(0,0,0,.30),
    inset 1px 0 1px rgba(255,255,255,.10),inset -1px 0 1px rgba(0,0,0,.18),0 1px 6px rgba(0,0,0,.30);
  transition:left .38s cubic-bezier(.25,.1,.25,1),width .38s cubic-bezier(.25,.1,.25,1),opacity .2s}
html[data-tema="claro"] .tabbar__lens{
  background:rgba(255,255,255,.38);border-color:rgba(255,255,255,.70);
  box-shadow:inset 0 1.5px 1px rgba(255,255,255,.95),inset 0 -1px 1px rgba(0,0,0,.06),
    inset 1px 0 1px rgba(255,255,255,.50),inset -1px 0 1px rgba(0,0,0,.04),0 1px 6px rgba(0,0,0,.08)}

.tab{flex:1;min-width:0;position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:6px 4px;color:var(--txt-3);font-size:10.5px;font-weight:560;border-radius:999px;
  transition:color .15s,transform .12s cubic-bezier(.25,.1,.25,1)}
.tab svg{flex-shrink:0;width:23px;height:23px}
.tab span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;text-align:center}
.tab.is-on{color:var(--accent)}
.tab:active{transform:scale(.92)}

/* pop do indicador + aberração cromática (idêntico ao Ecoprima) */
@keyframes indicator-pop{
  0%{transform:scale(1,1);filter:none}
  35%{transform:scale(1.14,1.24);filter:drop-shadow(-2.5px 0 0 rgba(255,60,60,.50)) drop-shadow(2.5px 0 0 rgba(60,160,255,.50))}
  65%{transform:scale(1.02,1.04);filter:drop-shadow(-.6px 0 0 rgba(255,60,60,.12)) drop-shadow(.6px 0 0 rgba(60,160,255,.12))}
  100%{transform:scale(1,1);filter:none}
}
@keyframes indicator-pop-light{
  0%{transform:scale(1,1);filter:none}
  35%{transform:scale(1.14,1.24);filter:drop-shadow(-2px 0 0 rgba(255,30,30,.22)) drop-shadow(2px 0 0 rgba(30,140,255,.22))}
  65%{transform:scale(1.02,1.04);filter:drop-shadow(-.5px 0 0 rgba(255,30,30,.06)) drop-shadow(.5px 0 0 rgba(30,140,255,.06))}
  100%{transform:scale(1,1);filter:none}
}
.tabbar__lens.activating{animation:indicator-pop .38s cubic-bezier(.16,1,.3,1)}
html[data-tema="claro"] .tabbar__lens.activating{animation:indicator-pop-light .38s cubic-bezier(.16,1,.3,1)}

/* ---------- cartoes ----------
   Sólidos e discretos, como os grupos do app de Ajustes do iOS.
   Nada de blur nem brilho aqui: o vidro vive nos botões, folhas e na tabbar. */
.card{--r:var(--r-lg);--p:var(--pad);
  border-radius:var(--r);padding:var(--p);margin-bottom:10px;
  position:relative;isolation:isolate;
  background:var(--surface);
}
html[data-tema="claro"] .card{box-shadow:0 1px 3px rgba(20,24,40,.07)}
.card > *{position:relative;z-index:1}
/* cantos concentricos: filho herda raio - padding */
.card > .inner,.card > .rowlist > *{border-radius:max(0px,calc(var(--r) - var(--p)))}

.card--flat{background:var(--fill);box-shadow:none}
.card--tap{transition:transform .18s var(--ease)}
.card--tap:active{transform:scale(.985)}

.sechead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:18px 4px 8px}
.sechead h2{font-size:13px;font-weight:640;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3)}
.sechead button{font-size:14px;color:var(--accent);font-weight:560}

.hero{font-size:28px;font-weight:700;letter-spacing:-.03em;line-height:1.1;margin:2px 4px 4px}
.sub{color:var(--txt-2);font-size:14.5px;line-height:1.4;margin:0 4px 12px}

/* ---------- chips e pills ---------- */
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:999px;font-size:12.5px;font-weight:560;
  background:var(--fill);color:var(--txt-2);white-space:nowrap}
.chip i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 7px}
.chip--on{color:#fff;background:rgba(79,140,255,.28);box-shadow:inset 0 0 0 1px rgba(79,140,255,.55)}
.chip--sel{transition:transform .15s var(--ease)}
.chip--sel:active{transform:scale(.94)}

.pill{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:46px;padding:0 15px;border-radius:999px;
  white-space:nowrap;font-size:15.5px;font-weight:600;background:rgba(255,255,255,calc(var(--glass-a) + .08));
  -webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.45),inset 0 0 0 1px var(--line),0 4px 14px rgba(0,0,0,.18);
  transition:transform .16s var(--ease),filter .16s}
.pill:active{transform:scale(.955);filter:brightness(1.15)}
.pill--sm{height:34px;padding:0 13px;font-size:13.5px;font-weight:600}
.pill--accent{background:linear-gradient(160deg,var(--accent),var(--accent2));color:#fff;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.4),0 6px 20px rgba(79,140,255,.4)}
.pill--cardio{background:linear-gradient(160deg,#FF375F,#FF7A45);color:#fff;box-shadow:inset 0 1px 1px rgba(255,255,255,.35),0 6px 20px rgba(255,55,95,.36)}
.pill--ok{background:linear-gradient(160deg,#32D74B,#12A150);color:#fff}
.pill--ghost{background:var(--fill);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 0 0 1px var(--line)}
.pill--wide{width:100%}
.pill--danger{color:var(--bad)}
.pill svg{width:19px;height:19px}
.btnrow{display:flex;gap:9px}
.btnrow > *{flex:1}

/* ---------- listas: linhas com separador fino, como no iOS ---------- */
.rowlist{display:flex;flex-direction:column;gap:0}
.rowlist > * + *{box-shadow:0 -.5px 0 var(--sep)}
.row{display:flex;align-items:center;gap:12px;padding:11px 12px;min-height:50px;text-align:left;
  background:transparent;transition:background .15s}
.row:active{background:var(--fill)}
.row__main{flex:1;min-width:0}
.row__t{font-size:16px;font-weight:540;letter-spacing:-.015em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row__s{font-size:13px;color:var(--txt-2);margin-top:2px}
.row__v{font-size:15px;color:var(--txt-2);font-variant-numeric:tabular-nums}
.row .chev{width:18px;height:18px;color:var(--txt-3);flex:0 0 18px}
.row--first{border-radius:var(--r-md) var(--r-md) 0 0}
.row--last{border-radius:0 0 var(--r-md) var(--r-md)}
.row--only{border-radius:var(--r-md)}

/* ---------- formulario ---------- */
.field{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;background:transparent}
.field label{font-size:16px;font-weight:520}
.field small{display:block;color:var(--txt-2);font-size:12.5px;line-height:1.35;font-weight:400;margin-top:1px}
.inp{background:var(--fill2);border:0;border-radius:12px;padding:9px 12px;font-size:16px;font-weight:560;
  color:var(--txt);text-align:right;width:96px;box-shadow:inset 0 0 0 1px var(--line);font-variant-numeric:tabular-nums}
html[data-tema="claro"] .inp{background:var(--fill)}
.inp--wide{width:100%;text-align:left}
select.inp{text-align:left;-webkit-appearance:none;appearance:none;padding-right:26px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 7px center;background-size:15px}
textarea.inp{width:100%;text-align:left;resize:vertical;min-height:64px;font-size:15px;font-weight:400}

.switch{position:relative;width:51px;height:31px;border-radius:999px;background:var(--fill2);
  transition:background .22s var(--ease);flex:0 0 51px}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.3);transition:transform .26s var(--ease)}
.switch[aria-checked="true"]{background:var(--ok)}
.switch[aria-checked="true"]::after{transform:translateX(20px)}

.slider{-webkit-appearance:none;appearance:none;width:100%;height:30px;background:transparent;margin:0}
.slider::-webkit-slider-runnable-track{height:8px;border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));box-shadow:inset 0 0 0 1px var(--line)}
.slider::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;
  margin-top:-9px;box-shadow:0 2px 8px rgba(0,0,0,.35)}

.seg{display:flex;gap:3px;padding:3px;border-radius:999px;background:var(--fill2);box-shadow:none}
html[data-tema="claro"] .seg{background:var(--fill)}
.seg button{flex:1;height:32px;border-radius:999px;font-size:13.5px;font-weight:560;color:var(--txt-2);transition:.18s var(--ease)}
.seg button.is-on{background:#636369;color:#fff;box-shadow:inset 0 1px 1px rgba(255,255,255,.25),0 1px 3px rgba(0,0,0,.25)}
html[data-tema="claro"] .seg button.is-on{background:#fff;color:var(--txt);box-shadow:0 1px 4px rgba(20,24,40,.16)}

/* ---------- exercicio na sessao ---------- */
.exq{--r:var(--r-lg);--p:12px}
.exq__head{display:flex;gap:12px;align-items:center;padding:2px 2px 10px}
.exq__thumb{width:64px;height:52px;border-radius:12px;overflow:hidden;flex:0 0 64px;background:#fff;position:relative}
.exq__thumb img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0;opacity:0;transition:opacity .3s}
.exq__thumb img.on{opacity:1}
.exq__n{font-size:16.5px;font-weight:600;letter-spacing:-.02em}
.exq__m{font-size:12.5px;color:var(--txt-2);margin-top:3px}
.exq__done{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--ok);color:#000}
.exq__done svg{width:15px;height:15px;stroke-width:2.6}

/* --- bi-set e técnicas --- */
/* Os dois exercícios de um bi-set dividem a MESMA cor (a cor é do par, não do
   grupo muscular) e ficam colados, para serem lidos como um bloco só. */
.exq--par{box-shadow:inset 3px 0 0 var(--par,var(--accent))}
.exq--par[data-parpos="0"]{margin-bottom:5px;border-bottom-left-radius:10px;border-bottom-right-radius:10px}
.exq--par[data-parpos="1"]{border-top-left-radius:10px;border-top-right-radius:10px;position:relative}
/* elo entre os dois cartões, na cor do par */
.exq--par[data-parpos="1"]::before{content:"";position:absolute;left:0;top:-5px;width:3px;height:5px;
  background:var(--par,var(--accent))}
.parTag__pt{width:8px;height:8px;border-radius:50%;flex:0 0 8px;display:inline-block;
  background:var(--par,var(--accent));box-shadow:0 0 0 2px var(--surface)}
.parTag{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:-2px 2px 8px}
.parTag b{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--par,var(--accent));
  background:var(--fill);padding:3px 8px;border-radius:99px}
.parTag span{font-size:12px;color:var(--txt-3);flex:1;min-width:120px;align-self:center}
/* Myo-reps NÃO é um par: fica em tom neutro para a cor continuar significando
   uma coisa só — "estes dois exercícios são um bi-set". O âmbar de aviso ainda
   por cima colidia com a cor do par B. */
.parTag--myo b{color:var(--txt-2);background:var(--fill2);box-shadow:none}
.parTag--myo .parTag__pt{display:none}

/* --- linha de série com steppers --- */
.setgrid{display:grid;grid-template-columns:26px 1fr 1fr 42px;gap:5px;align-items:center;margin-bottom:5px}
/* sustentação (prancha e afins): uma coluna só, em segundos */
.setgrid--tempo{grid-template-columns:26px 1fr 42px}
.setgrid--h{font-size:11px;color:var(--txt-3);text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-bottom:3px}
.setgrid--h > *{text-align:center}
.setn{text-align:center;font-size:14px;color:var(--txt-2);font-variant-numeric:tabular-nums}
.stp{display:flex;align-items:center;height:44px;border-radius:12px;background:var(--fill2);overflow:hidden}
html[data-tema="claro"] .stp{background:var(--fill)}
.stp__b{width:32px;flex:0 0 32px;height:100%;font-size:20px;font-weight:600;color:var(--txt-2);
  display:grid;place-items:center;touch-action:none;user-select:none;-webkit-user-select:none;transition:background .12s}
.stp__b:active{background:rgba(255,255,255,.14);color:var(--txt)}
.setinp{background:transparent;border:0;border-radius:0;height:100%;width:100%;min-width:0;flex:1;text-align:center;
  font-size:17px;font-weight:600;color:var(--txt);box-shadow:none;font-variant-numeric:tabular-nums;padding:0;
  -moz-appearance:textfield}
.setinp::-webkit-outer-spin-button,.setinp::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.setinp::placeholder{color:var(--txt-3);font-weight:400;font-size:15px}
.setok{height:44px;border-radius:12px;display:grid;place-items:center;background:var(--fill);transition:.18s var(--ease)}
.setok svg{width:19px;height:19px;color:var(--txt-3)}
.setok.is-on{background:var(--ok);box-shadow:none}
.setok.is-on svg{color:#04210B;stroke-width:2.8}
.setok:active{transform:scale(.92)}
.setrow.is-done .setinp{opacity:.55}

.hint{display:flex;gap:8px;padding:9px 11px;border-radius:13px;background:rgba(255,159,10,.12);
  box-shadow:inset 0 0 0 1px rgba(255,159,10,.24);font-size:13px;color:#FFCF7A;line-height:1.35;margin-top:9px}
.hint--info{background:rgba(79,140,255,.13);box-shadow:inset 0 0 0 1px rgba(79,140,255,.26);color:#B6D0FF}
.hint--ok{background:rgba(50,215,75,.12);box-shadow:inset 0 0 0 1px rgba(50,215,75,.24);color:#A8F0B4}
html[data-tema="claro"] .hint{background:rgba(180,110,0,.12);box-shadow:inset 0 0 0 1px rgba(180,110,0,.28);color:#7A4B00}
html[data-tema="claro"] .hint--info{background:rgba(47,111,228,.11);box-shadow:inset 0 0 0 1px rgba(47,111,228,.28);color:#134099}
html[data-tema="claro"] .hint--ok{background:rgba(18,140,60,.12);box-shadow:inset 0 0 0 1px rgba(18,140,60,.26);color:#0A5B26}
.hint svg{width:15px;height:15px;flex:0 0 15px;margin-top:2px}
.hint--linha{align-items:center;margin:0 0 10px;padding:8px 8px 8px 11px}
.hint--linha > span:nth-child(2){flex:1;min-width:0}
.hint--linha svg{margin-top:0}
.hint--linha .vazio{display:none}
.ajlin .infob{margin:-4px -4px -4px 2px}
.hint .infob{background:transparent;color:inherit;opacity:.75;width:26px;height:26px;flex:0 0 26px}
.hint .infob svg{width:16px;height:16px;margin-top:0}
.ajrodape{display:flex;align-items:center;gap:7px;margin:8px 4px 0;font-size:12.5px;color:var(--txt-3)}

/* ---------- comparação entre os modos de treino ---------- */
.modo__t{display:flex;align-items:center;justify-content:space-between;gap:8px}
.modo__t b{font-size:15.5px;font-weight:620;letter-spacing:-.015em}
.modo__cmp{margin-top:10px;border-radius:12px;overflow:hidden;background:var(--fill)}
.modo__linha{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:8px 10px;font-size:12.5px;color:var(--txt-3);white-space:nowrap}
.modo__linha span{flex:0 0 auto}
.modo__linha + .modo__linha{box-shadow:0 -.5px 0 var(--sep)}
.modo__linha b{font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.modo__linha.is-on{color:var(--txt-2)}
.modo__linha.is-on b{color:var(--txt)}

.lastinfo{font-size:12.5px;color:var(--txt-3);margin:0 0 8px 2px;font-variant-numeric:tabular-nums}

/* ---------- ajustes: cabeçalho, (i) e linhas compactas ---------- */
.ajcab{display:flex;align-items:flex-start;gap:10px}
.infob{width:28px;height:28px;flex:0 0 28px;border-radius:999px;display:grid;place-items:center;
  color:var(--txt-3);background:var(--fill);transition:transform .16s var(--ease)}
.infob svg{width:17px;height:17px}
.infob:active{transform:scale(.88);color:var(--accent)}
.ajlin{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:14px 2px 7px;font-size:14px;color:var(--txt-2)}
.ajlin b{font-size:12.5px;font-weight:600;color:var(--txt-3);font-variant-numeric:tabular-nums;text-align:right}
.ajdiag{display:flex;flex-direction:column;gap:3px;margin-top:8px;font-size:13px;color:var(--txt-2);line-height:1.4}
.txtlong{font-size:15px;line-height:1.5;color:var(--txt-2);margin:0 4px 12px}

/* ---------- cronometro ---------- */
.resttimer{position:fixed;left:0;right:0;bottom:calc(max(env(safe-area-inset-bottom,0px),16px) + 76px);z-index:70;
  background-color:transparent;pointer-events:none;padding:0 12px}
.resttimer__glass{position:absolute;inset:0 12px;border-radius:999px;
  background:rgba(255,255,255,calc(var(--glass-a) + .16));
  -webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);
  box-shadow:0 12px 34px rgba(0,0,0,.4),inset 0 1px 1px rgba(255,255,255,.5),inset 0 0 0 1px var(--line)}
.resttimer__row{position:relative;display:flex;align-items:center;gap:8px;height:60px;padding:0 12px;pointer-events:auto}
.resttimer__txt{flex:1;min-width:0;line-height:1.15;overflow:hidden}
.resttimer__txt b{display:block;font-size:21px;font-weight:680;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.resttimer__txt small{display:block;font-size:11.5px;color:var(--txt-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.no-tabs .resttimer{bottom:calc(max(env(safe-area-inset-bottom,0px),16px) + 12px)}
.ring{width:38px;height:38px;flex:0 0 38px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:4}
.ring__bg{stroke:rgba(255,255,255,.16)}
.ring__fg{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:119.4;transition:stroke-dashoffset .95s linear}
.resttimer.is-over .ring__fg{stroke:var(--ok)}

/* ---------- folha modal ---------- */
.sheet{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-end;justify-content:center}
.sheet__bd{position:absolute;inset:0;background:rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:fade .28s var(--ease)}
.sheet__pn{position:relative;width:100%;max-width:640px;max-height:86svh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  border-radius:30px 30px 0 0;padding:8px 14px calc(env(safe-area-inset-bottom,0px) + 20px);
  background:rgba(28,28,34,calc(.62 + var(--gi) * .3));
  -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  box-shadow:0 -12px 44px rgba(0,0,0,.5),inset 0 1px 1px rgba(255,255,255,.24);
  animation:up .38s var(--ease)}
html[data-tema="claro"] .sheet__pn{background:rgba(246,247,251,calc(.7 + var(--gi) * .26))}
.sheet__grab{width:38px;height:5px;border-radius:99px;background:rgba(255,255,255,.3);margin:4px auto 12px}
.sheet__x{position:absolute;top:12px;right:14px;width:32px;height:32px;border-radius:999px;display:grid;place-items:center;
  background:rgba(255,255,255,.12);color:var(--txt-2);z-index:5;box-shadow:inset 0 0 0 1px var(--line)}
.sheet__x svg{width:16px;height:16px;stroke-width:2.2}
.sheet__x:active{transform:scale(.9)}
.sheet h3{font-size:20px;font-weight:680;letter-spacing:-.025em;margin:0 42px 4px 4px}
.sheet .sub{margin-left:4px}
@keyframes up{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---------- onboarding ---------- */
.ob{position:fixed;inset:0;z-index:100;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--page)}
.ob__in{min-height:100svh;display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top,0px) + 26px) 18px calc(env(safe-area-inset-bottom,0px) + 22px);max-width:640px;margin:0 auto}
.ob__body{flex:1}
/* boas-vindas: a primeira tela do app, centrada, antes de qualquer ajuste */
.ob__centro{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:2px;padding:24px 0}
.ob__logo{width:96px;height:96px;border-radius:22px;margin-bottom:18px;
  box-shadow:0 12px 34px rgba(0,0,0,.34),inset 0 0 0 1px var(--line)}
.ob__centro .hero{margin:0}
.ob__dots{display:flex;gap:6px;justify-content:center;margin-bottom:18px}
.ob__dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.22);transition:.3s var(--ease)}
.ob__dots i.on{width:20px;background:var(--accent)}
.opt{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:18px;margin-bottom:7px;text-align:left;width:100%;
  background:var(--surface);transition:.18s var(--ease)}
.opt:active{transform:scale(.985)}
.opt.on{background:rgba(79,140,255,.2);box-shadow:inset 0 0 0 1.5px rgba(79,140,255,.7)}
.opt b{display:block;font-size:16.5px;font-weight:600;letter-spacing:-.02em}
.opt small{display:block;font-size:13.5px;color:var(--txt-2);margin-top:2px;line-height:1.35}
.opt__mk{width:24px;height:24px;border-radius:50%;flex:0 0 24px;box-shadow:inset 0 0 0 1.6px var(--txt-3);display:grid;place-items:center}
.opt.on .opt__mk{background:var(--accent);box-shadow:none}
.opt.on .opt__mk::after{content:"";width:9px;height:9px;border-radius:50%;background:#fff}
.numgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.numgrid button{height:64px;border-radius:18px;font-size:22px;font-weight:680;
  background:var(--surface);transition:.16s var(--ease)}
.numgrid button small{display:block;font-size:11px;font-weight:500;color:var(--txt-2);margin-top:1px}
.numgrid button.on{background:linear-gradient(160deg,var(--accent),var(--accent2));box-shadow:0 6px 18px rgba(79,140,255,.36)}
.numgrid button.on small{color:rgba(255,255,255,.8)}

/* ---------- graficos ---------- */
.bars{display:flex;flex-direction:column;gap:9px;margin-top:4px}
.bar{display:grid;grid-template-columns:98px 1fr 34px;align-items:center;gap:9px;font-size:12.5px}
.bar__t{color:var(--txt-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar__tr{position:relative;height:10px;border-radius:99px;background:var(--fill);overflow:hidden}
.bar__tr > *{position:absolute;top:0;bottom:0;left:0}
.bar__f{height:100%;border-radius:99px;background:var(--accent);transition:width .5s var(--ease)}
.bars .bar__f{box-shadow:0 0 0 2px var(--surface)}
.bar__v{text-align:right;color:var(--txt-2);font-variant-numeric:tabular-nums}
/* ---------- gráfico de linha ----------
   Grade sólida e recessiva (nada de tracejado, que lê como projeção), rótulo
   direto só nos extremos e no ponto selecionado, e alvo de toque largo. */
.graf svg{width:100%;height:auto;display:block;overflow:visible}
.graf .ln{stroke:var(--accent);stroke-width:2;fill:none;stroke-linejoin:round}
.graf .ar{fill:url(#gArea);stroke:none}
.graf .dt{fill:var(--accent);stroke:var(--surface);stroke-width:2}
.graf .dt--ult{stroke-width:2.4}
.graf .sel{fill:none;stroke:var(--accent);stroke-width:2.4}
.graf .gr{stroke:var(--sep);stroke-width:1;fill:none}
.graf .tk{font-size:9.5px;fill:var(--txt-3);stroke:none;font-variant-numeric:tabular-nums}
.graf .hit{cursor:pointer;stroke:none;fill:transparent}
.graf__leg{font-size:12px;color:var(--txt-3);line-height:1.4;margin-top:4px}

/* ---------- barras de treinos por semana ---------- */
.wk{display:flex;align-items:flex-end;gap:5px;height:84px;margin-top:12px}
.wk__c{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px;height:100%}
.wk__tr{flex:1;width:100%;display:flex;align-items:flex-end}
.wk__f{width:100%;border-radius:5px 5px 3px 3px;background:linear-gradient(180deg,var(--accent),var(--accent2));min-height:3px}
.wk__f.is-zero{background:var(--fill2)}
.wk__c span{font-size:10px;color:var(--txt-3);white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------- calendário do mês ---------- */
.calhead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.calhead b{font-size:15px;font-weight:600;letter-spacing:-.01em}
.calnav{width:32px;height:32px;flex:0 0 32px;border-radius:999px;display:grid;place-items:center;
  background:var(--fill);color:var(--txt-2);transition:transform .16s var(--ease)}
.calnav svg{width:17px;height:17px}
.calnav:active{transform:scale(.88)}
.calnav.is-off{opacity:.3;pointer-events:none}

/* ---------- faixa recomendada atrás da barra ---------- */
.bar__alvo{position:absolute;top:0;bottom:0;background:var(--fill2);border-radius:2px;
  box-shadow:inset 1px 0 0 var(--line),inset -1px 0 0 var(--line)}
html:not([data-tema="claro"]) .bar__alvo{background:rgba(255,255,255,.13)}

/* ---------- seletores ---------- */
.seg--filtro{margin-bottom:12px}
.seg--filtro button{height:34px;font-size:13px}
.seg--mini button{height:30px;font-size:12.5px}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.stats--4{grid-template-columns:repeat(4,1fr);gap:7px}
.stats--4 .stat{padding:11px 6px}
.stats--4 .stat b{font-size:19px}
.stats--4 .stat small{font-size:11px}
.stat__d{display:block;font-style:normal;font-size:11px;font-weight:640;margin-top:3px;font-variant-numeric:tabular-nums}
.stat__d.up{color:var(--ok)}
.stat__d.down{color:var(--txt-3)}
.stat{padding:12px 10px;border-radius:18px;background:var(--surface);text-align:center}
.stat b{display:block;font-size:24px;font-weight:700;letter-spacing:-.03em}
.stat small{display:block;font-size:11.5px;color:var(--txt-2);margin-top:2px}

/* cabeçalho da faixa da semana: readaptação à esquerda, ajuste de treinos à direita */
.wkcab{display:flex;align-items:center;gap:8px;margin:0 0 10px}
.wkcab > .hint{flex:1;min-width:0;margin:0}
.wkcab__gap{flex:1}
.wkbtn{flex:0 0 auto;gap:5px;padding:0 12px;font-variant-numeric:tabular-nums}
.wkbtn svg{width:16px;height:16px;opacity:.85}
.wkbtn.is-aj{color:var(--accent);background:rgba(79,140,255,.14);box-shadow:inset 0 0 0 1px rgba(79,140,255,.5)}
.wkbtn.is-aj svg{opacity:1}

.week{display:flex;gap:6px}
.wday{flex:1;min-width:0;aspect-ratio:1/1.35;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:0 2px;
  background:var(--fill);font-size:10px;color:var(--txt-3);transition:.2s}
.wday:active{transform:scale(.93)}
.wday span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.01em}
.wday b{font-size:15px;font-weight:640;color:var(--txt-2)}
.wday.is-today{box-shadow:inset 0 0 0 1.6px var(--accent)}
.wday.is-done{background:rgba(50,215,75,.2);color:#A8F0B4}
.wday.is-done b{color:#CFF7D6}
.wday.is-rest{opacity:.5}
/* arrasto do treino entre os dias */
.wday{position:relative}
.wday.is-lift{z-index:6;transition:none;box-shadow:0 10px 26px rgba(0,0,0,.45),inset 0 0 0 1.6px var(--accent);opacity:1}
.wday.is-target{box-shadow:inset 0 0 0 2px var(--accent);background:rgba(79,140,255,.20);opacity:1}
.wday.is-target b,.wday.is-target span{color:var(--accent)}

/* ---------- diversos ---------- */
.toasthost{position:fixed;left:0;right:0;bottom:calc(max(env(safe-area-inset-bottom,0px),16px) + 88px);z-index:120;
  display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;padding:0 16px}
.toast{padding:11px 17px;border-radius:999px;font-size:14.5px;font-weight:560;max-width:100%;
  background:rgba(30,30,36,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 8px 26px rgba(0,0,0,.42),inset 0 1px 1px rgba(255,255,255,.2);animation:up .3s var(--ease)}
.empty{text-align:center;padding:46px 20px;color:var(--txt-3)}
.empty svg{width:44px;height:44px;margin-bottom:12px;opacity:.5}
.empty p{font-size:15px;line-height:1.45}
.dim{color:var(--txt-2)}
.tiny{font-size:12.5px}
.mt{margin-top:10px}
.center{text-align:center}
.exlist{display:flex;flex-direction:column;gap:8px}
.exitem{display:flex;gap:11px;align-items:center;padding:9px;border-radius:16px;background:var(--fill);
  text-align:left;width:100%;transition:.16s var(--ease)}
.exitem:active{transform:scale(.985)}
.exitem img{width:56px;height:46px;border-radius:11px;object-fit:cover;flex:0 0 56px;background:#fff}
.exitem__n{font-size:15px;font-weight:550;letter-spacing:-.015em}
.exitem__m{font-size:12px;color:var(--txt-2);margin-top:2px}
.exitem.on{background:rgba(79,140,255,.2);box-shadow:inset 0 0 0 1.5px rgba(79,140,255,.6)}
/* reordenação (v4.2): puxador de arrasto e alvo do drop */
.reord-grip{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;color:var(--txt-3);
  border-radius:10px;touch-action:none;cursor:grab}
.reord-grip svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.exitem.is-target{box-shadow:inset 0 0 0 2px var(--accent);background:rgba(79,140,255,.14)}
.bigimg{width:100%;aspect-ratio:3/2;border-radius:18px;overflow:hidden;position:relative;background:#fff;margin-bottom:12px}
.bigimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s}
.bigimg img.on{opacity:1}
.bigimg__tag{position:absolute;left:9px;bottom:9px;padding:4px 10px;border-radius:99px;font-size:11px;font-weight:600;
  background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
ol.steps{margin:0;padding-left:20px;font-size:14.5px;line-height:1.5;color:var(--txt-2)}
ol.steps li{margin-bottom:7px}
ol.steps li::marker{color:var(--accent);font-weight:700}

.cardio-hero{display:flex;gap:14px;align-items:center}
.cardio-ico{width:46px;height:46px;border-radius:14px;flex:0 0 46px;display:grid;place-items:center;
  background:linear-gradient(160deg,#FF375F,#FF7A45);box-shadow:0 6px 18px rgba(255,55,95,.34)}
.cardio-ico svg{width:24px;height:24px;color:#fff;stroke-width:2}
.kv{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.kv div{padding:10px 8px;border-radius:14px;background:var(--fill);text-align:center}
.kv b{display:block;font-size:17px;font-weight:660;font-variant-numeric:tabular-nums}
.kv small{display:block;font-size:10.5px;color:var(--txt-2);margin-top:1px;text-transform:uppercase;letter-spacing:.05em}

.drag{touch-action:none}
.exq.is-drag{opacity:.6;transform:scale(.98)}

/* ---------- tipos de série (toque no número: normal → A → F) ---------- */
button.setn{height:44px;border-radius:12px;transition:background .12s;user-select:none;-webkit-user-select:none}
button.setn:active{background:rgba(255,255,255,.12)}
.setn--w{color:var(--warn);font-weight:700}
.setn--f{color:var(--bad);font-weight:700}

/* ---------- toast de recorde ---------- */
.toast--pr{background:rgba(58,45,6,.94);color:#FFD60A;font-weight:640;
  box-shadow:0 8px 26px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,214,10,.45),inset 0 1px 1px rgba(255,255,255,.18)}
html[data-tema="claro"] .toast--pr{background:rgba(255,244,200,.97);color:#7A5A00;box-shadow:0 8px 26px rgba(120,90,0,.25),inset 0 0 0 1px rgba(180,140,0,.4)}

/* ---------- anotação do exercício ---------- */
.exq__obs{font-size:13px;color:#FFCF7A;background:rgba(255,159,10,.09);padding:7px 10px;border-radius:11px;
  margin:0 0 9px;line-height:1.35;box-shadow:inset 0 0 0 1px rgba(255,159,10,.18)}
html[data-tema="claro"] .exq__obs{color:#7A4B00;background:rgba(180,110,0,.1);box-shadow:inset 0 0 0 1px rgba(180,110,0,.22)}

/* ---------- calculadora de anilhas ---------- */
.plates{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin:2px 0 4px}
.plate{padding:7px 10px;border-radius:9px;background:rgba(79,140,255,.2);box-shadow:inset 0 0 0 1px rgba(79,140,255,.45);
  font-size:13.5px;font-weight:660;font-variant-numeric:tabular-nums}

/* ---------- calendário de treinos ---------- */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal__h{font-size:10px;color:var(--txt-3);text-align:center;font-weight:640;letter-spacing:.04em;margin-bottom:1px}
.cal__d{aspect-ratio:1;border-radius:9px;background:var(--fill);display:grid;place-items:center;
  font-size:12.5px;font-weight:560;color:var(--txt-2);font-variant-numeric:tabular-nums;
  transition:transform .14s var(--ease)}
.cal__d:active{transform:scale(.9)}
html[data-tema="claro"] .cal__d{background:var(--fill)}
.cal__d.on{background:linear-gradient(160deg,var(--accent),var(--accent2));box-shadow:none;color:#fff;font-weight:660}
.cal__d.today{box-shadow:inset 0 0 0 1.8px var(--accent)}
.cal__d.on.today{box-shadow:inset 0 0 0 1.8px rgba(255,255,255,.85)}
.cal__d.fut{opacity:.22;pointer-events:none}

/* ============================================================
   Acessibilidade / preferencias do sistema
   ============================================================ */
@media (prefers-contrast:more),(prefers-reduced-transparency:reduce){
  :root{--glass-a:.9;--glass-a2:.95;--blur:0px;--line:rgba(255,255,255,.34)}
  html[data-tema="claro"]{--glass-a:.96;--glass-a2:.99;--line:rgba(0,0,0,.3)}
  .card,.glass{background:rgba(24,24,29,.94);-webkit-backdrop-filter:none;backdrop-filter:none;
    box-shadow:0 2px 10px rgba(0,0,0,.5),inset 0 0 0 1px var(--line)}
  html[data-tema="claro"] .card,html[data-tema="claro"] .glass{background:rgba(255,255,255,.97)}
  .card::before,.card::after,.glass::before,.glass::after{display:none}
  .topbar__glass{background:rgba(18,18,22,.96);-webkit-backdrop-filter:none;backdrop-filter:none;opacity:1}
  html[data-tema="claro"] .topbar__glass{background:rgba(250,250,252,.97)}
  .tabbar__row{background:rgba(24,24,28,.97);-webkit-backdrop-filter:none;backdrop-filter:none}
  html[data-tema="claro"] .tabbar__row{background:rgba(252,252,254,.98)}
  .tabbar__lens{background:rgba(255,255,255,.18)}
  html[data-tema="claro"] .tabbar__lens{background:rgba(0,0,0,.08)}
  .blob{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
html[data-mov="off"] *{animation-duration:.01ms !important;transition-duration:.01ms !important}

/* iPhone estreito */
@media (max-width:360px){
  :root{--r-lg:22px;--pad:12px}
  .hero{font-size:28px}
  .setgrid{grid-template-columns:22px 1fr 1fr 38px;gap:4px}
  .setgrid--tempo{grid-template-columns:22px 1fr 38px}
  .stp__b{width:28px;flex:0 0 28px}
}