/* ===================== FORJA — Design System (tema claro) ===================== */
:root{
  --bg: #f5f8fc;
  --bg-alt: #eaf1f8;
  --surface: #ffffff;
  --surface-2: #eef3f9;
  --border: #d9e3ee;
  --border-soft: #e6edf5;
  --text: #0b0f19;
  --text-dim: #4b5768;
  --text-mute: #7c8896;
  --accent: #123BA5;
  --accent-2: #52BAF7;
  --accent-soft: rgba(18,59,165,0.08);
  --mint: #6EEED5;
  --sky: #51B8E3;
  --on-accent: #ffffff;
  --danger: #d63a3a;
  --success: #6EEED5;
  --radius: 14px;
  --radius-sm: 9px;
  --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --shadow-lg: 0 20px 50px rgba(18,59,165,0.14);
}

*{ box-sizing: border-box; margin:0; padding:0; }

html,body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  min-height:100vh;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: contain;
  -webkit-tap-highlight-color: transparent;
}

button, .tab-btn, .lib-card, .muscle-chip, .equip-pill, .preset-btn, .level-btn,
.lib-row, .day-tab, .ex-tab, .saved-card, .onb-option-card, .exrow-swap-btn,
.plan-icon-btn, .icon-btn, .exercise-row, .modal-close, .ex-hero-btn{ touch-action: manipulation; }

/* Feedback de toque: como :hover não existe em telas de toque, sem isso nada "responde"
   ao tocar — a causa mais comum de um app parecer travado/duro no celular. */
button, .tab-btn, .lib-card, .lib-row, .muscle-chip, .equip-pill, .preset-btn, .level-btn,
.day-tab, .ex-tab, .saved-card, .onb-option-card, .exrow-swap-btn, .plan-icon-btn,
.icon-btn, .modal-close, .ex-hero-btn, .stat-card, .workout-card,
.recup-row, .history-item .hist-head{
  transition: transform .12s cubic-bezier(.2,0,.4,1), background-color .15s ease, border-color .15s ease, opacity .15s ease;
}
button:active, .tab-btn:active, .lib-card:active, .lib-row:active, .muscle-chip:active,
.equip-pill:active, .preset-btn:active, .level-btn:active, .day-tab:active, .ex-tab:active,
.saved-card:active, .onb-option-card:active, .exrow-swap-btn:active, .plan-icon-btn:active,
.icon-btn:active, .modal-close:active, .ex-hero-btn:active{
  transform: scale(.96);
}
.btn-primary:active, .btn-secondary:active{ transform: scale(.97); }

/* .exercise-row tem transform controlado pelo próprio gesto de swipe (JS liga/desliga
   a transition durante o arraste); aqui só definimos a curva do "snap" ao soltar o dedo. */
.exercise-row{ transition: transform .26s cubic-bezier(.16,1,.3,1), background-color .15s ease; }
.exercise-row:active{ background-color: var(--border-soft); }

/* Scroll com inércia nativa em todo container rolável (listas, modais, tabs horizontais) */
.day-tabs, .modal, .ex-overlay, .ex-tabs, .onb-body{
  -webkit-overflow-scrolling: touch;
}

/* Gradiente decorativo em pseudo-elemento fixed própria (não no body): background-attachment:fixed
   força o navegador a repintar o fundo a cada frame de scroll no mobile, deixando o scroll travado. */
body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(circle at 15% 0%, rgba(18,59,165,0.07), transparent 40%),
    radial-gradient(circle at 90% 20%, rgba(110,238,213,0.10), transparent 35%);
}

img{ max-width:100%; display:block; }
img[hidden]{ display:none; }
button{ font-family: inherit; cursor:pointer; border:none; background:none; color:inherit; }
input, select{ font-family: inherit; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background: var(--bg-alt); }
::-webkit-scrollbar-thumb{ background: var(--border); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover{ background: var(--accent); }

/* Animação de entrada (fade + slide) usada em listas de cards/linhas conforme entram na tela */
.reveal-up{
  opacity:0; transform: translateY(18px);
  transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
.reveal-up.in-view{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal-up{ opacity:1; transform:none; transition:none; }
}

/* ===================== LAYOUT ===================== */
.app-shell{ max-width: 1240px; margin: 0 auto; padding: 0 24px 80px; padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }

.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: 22px 0;
  padding-top: max(22px, env(safe-area-inset-top));
  position: sticky; top:0; z-index: 50;
  background: rgba(255,255,255,0);
  transition: background-color .35s cubic-bezier(.16,1,.3,1), backdrop-filter .35s cubic-bezier(.16,1,.3,1);
}
.topbar.scrolled{
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin: 0 -24px; padding-left: 24px; padding-right: 24px;
}

.install-btn{
  background: var(--surface-2); border:1px solid var(--accent); color: var(--accent);
  font-weight:700; font-size:12.5px; padding: 9px 16px; border-radius: 999px; white-space:nowrap;
}
.install-btn:hover{ background: var(--accent-soft); }

.brand{ display:flex; align-items:center; gap:10px; }
.brand-icon{ width:32px; height:auto; flex-shrink:0; }
.brand-name{
  font-family: var(--font-display);
  font-size: 26px; letter-spacing: 2px;
}

.tabs{ display:flex; gap:6px; background: var(--surface); padding:5px; border-radius: 999px; border:1px solid var(--border); }
.tab-btn{
  display:flex; align-items:center; gap:7px;
  padding: 9px 18px; border-radius: 999px; font-weight:600; font-size: 13.5px;
  color: var(--text-dim); transition: all .18s ease;
}
.tab-btn:hover{ color: var(--text); }
.nav-icon{ width:17px; height:17px; flex-shrink:0; }
.tab-btn.active{
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  color: var(--on-accent);
}

.tabs-mobile{ display:none; }

.streak-chip{
  display:flex; align-items:center; gap:6px;
  background: var(--surface); border:1px solid var(--border);
  padding: 8px 14px; border-radius: 999px; font-weight:700; font-size:15px;
}
.flame{ width:17px; height:17px; color: var(--accent); flex-shrink:0; }

.topbar-auth{ position:relative; flex-shrink:0; }
.topbar-auth-btn{
  width:36px; height:36px; border-radius:50%; overflow:hidden; flex-shrink:0;
  background: var(--accent-soft); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
}
.topbar-auth-btn img{ width:100%; height:100%; object-fit:cover; }
.topbar-auth-initial{ font-weight:700; font-size:14px; color: var(--accent); }
.topbar-auth.mais-opcoes-menu .exrow-menu-list{ top:44px; min-width:120px; }

/* Tablet: a navbar de 5 abas + marca + streak fica apertada nessa faixa — compacta um pouco. */
@media (max-width: 1024px) and (min-width: 721px){
  .topbar{ gap:8px; }
  .brand-name{ font-size:20px; }
  .tabs{ gap:2px; padding:4px; }
  .tab-btn{ padding: 8px 11px; font-size:12px; gap:5px; }
  .nav-icon{ width:15px; height:15px; }
  .streak-chip{ padding:7px 11px; font-size:13px; }
}

.content{ padding-top: 8px; }

.view{ display:none; animation: fadeIn .25s ease; }
.view.active{ display:block; }
@keyframes fadeIn{ from{ opacity:0; transform: translateY(6px);} to{opacity:1; transform:translateY(0);} }

.view-header{ margin: 18px 0 28px; }
.view-header h1{
  font-family: var(--font-display);
  font-size: 44px; letter-spacing: 1px; line-height:1;
  background: linear-gradient(120deg, var(--text), var(--accent) 130%);
  -webkit-background-clip: text; background-clip:text; color:transparent;
}
.subtitle{ color: var(--text-dim); margin-top:8px; font-size:15px; max-width: 640px; }

/* ===================== CARDS / PANELS ===================== */
.card{
  background: linear-gradient(180deg, var(--surface), var(--bg-alt));
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.panel{ padding: 22px; }
.panel-title{
  font-family: var(--font-display);
  font-size: 20px; letter-spacing: 1px; color: var(--accent);
  margin-bottom: 14px;
}

.field-label{ display:block; font-size:13px; color: var(--text-dim); font-weight:600; margin-bottom:8px; }

.btn-primary{
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  color: var(--on-accent); font-weight:800; border-radius: 999px; padding: 12px 26px;
  font-size: 14px; letter-spacing:.5px;
  box-shadow: 0 10px 28px rgba(18,59,165,0.28);
  transition: transform .15s;
}
.btn-primary:hover{ transform: translateY(-2px); }
.btn-lg{ padding: 16px 46px; font-size:16px; font-family: var(--font-display); letter-spacing:2px; }

.btn-secondary{
  background: var(--surface-2); border:1px solid var(--border); color: var(--text);
  font-weight:700; border-radius: 999px; padding: 10px 20px; font-size:13px;
}
.btn-secondary:hover{ border-color: var(--accent); }

.btn-danger{ color: var(--danger); }

/* ===================== RESULTADO / WORKOUT ===================== */
#resultadoTreino{ margin-top: 10px; padding-bottom: 100px; }
.workout-card{
  background: linear-gradient(180deg, var(--surface), var(--bg-alt));
  border: 1px solid var(--border); border-radius: var(--radius); padding: 22px;
  animation: fadeIn .3s ease;
}

/* Barra de utilidades no topo do plano */
.plan-toolbar{ display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.plan-pill{
  flex:1; display:flex; align-items:center; gap:8px; min-width:0;
  padding: 11px 18px; border-radius:999px; background: var(--surface-2); border:1px solid var(--border);
  font-weight:700; font-size:14px; color: var(--text);
}
.plan-icon-btn{
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  background: var(--surface-2); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:16px; color: var(--text-dim);
}
.plan-icon-btn:hover{ border-color: var(--accent); color: var(--text); }
.plan-avatar{ background: linear-gradient(140deg, var(--accent), var(--accent-2)); color: var(--on-accent); border-color: transparent; }

/* Linha "SPLIT | CONFIGURAÇÕES DO TREINO ... Mais opções" */
.plan-split-row{ display:flex; align-items:center; gap:8px; margin-bottom:14px; flex-wrap:nowrap; }
.plan-split-label{ font-weight:800; font-size:11.5px; letter-spacing:.4px; color: var(--text); white-space:nowrap; flex-shrink:0; }
.plan-split-sep{ color: var(--border); flex-shrink:0; }
.plan-split-config{
  font-weight:700; font-size:11px; letter-spacing:.3px; color: var(--text-mute); text-transform:uppercase;
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mais-opcoes-menu{ position:relative; flex-shrink:0; }
.plan-mais-opcoes{ font-size:11.5px; font-weight:700; color: var(--text-mute); white-space:nowrap; }
.plan-mais-opcoes:hover{ color: var(--accent); }
.mais-opcoes-menu .exrow-menu-list{ top:26px; }

/* Pills de configuração (academia / duração / frequência) */
.config-pill{
  display:flex; align-items:center; gap:8px;
  padding: 9px 16px; border-radius:999px; background: var(--surface-2); border:1px solid var(--border);
  font-size:13px; font-weight:600; color: var(--text-dim);
}
.config-pill:has(.config-pill-avatar){ padding-left:8px; }
.config-pill-avatar{
  width:22px; height:22px; border-radius:50%; flex-shrink:0;
  background: var(--accent-soft); color: var(--accent);
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800;
}

.exercicios-heading-row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }

/* Barra fixa "Iniciar treino" */
.plan-start-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex; justify-content:center;
  padding: 16px 24px; padding-bottom: max(16px, env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 60%, transparent);
  pointer-events:none;
}
.plan-start-bar .btn-primary{ width:100%; max-width:480px; pointer-events:auto; }
@media (max-width:720px){
  .plan-start-bar{ bottom: calc(60px + env(safe-area-inset-bottom)); padding-bottom:10px; }
}

.tag{ font-size:11px; padding: 3px 8px; border-radius:999px; background: var(--bg-alt); color: var(--text-mute); border:1px solid var(--border); }
.icon-btn{
  width:32px; height:32px; border-radius:8px; background: var(--bg-alt); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:14px; color: var(--text-dim);
}
.icon-btn:hover{ border-color: var(--accent); color: var(--text); }

.empty-state{ text-align:center; padding: 60px 20px; color: var(--text-mute); }
.empty-state .emoji{ font-size:44px; margin-bottom:14px; }

/* Abas de dia (DIA 1, DIA 2...) */
.day-tabs{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin-bottom:18px; }
.day-tab{
  flex-shrink:0; padding: 10px 20px; border-radius: 999px; font-weight:700; font-size:13px;
  background: var(--surface-2); border:1px solid var(--border); color: var(--text-dim);
}
.day-tab.active{ background: linear-gradient(140deg, var(--accent), var(--accent-2)); color: var(--on-accent); border-color:transparent; }

.config-pills{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }

.musculos-section{ margin-bottom: 22px; }
.section-label{
  font-size:12.5px; text-transform:uppercase; letter-spacing:.6px; color: var(--text-mute); font-weight:700;
  margin-bottom:10px;
}
.musculos-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(84px,1fr)); gap:10px; }
.musculo-tile{
  display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
  padding: 10px 6px; border-radius: var(--radius-sm); background: var(--surface-2); border:1px solid var(--border-soft);
}
.musculo-tile img{ width:28px; height:28px; object-fit:contain; }
.musculo-tile span{ font-size:11px; font-weight:600; color: var(--text-dim); }

.exercicios-heading{
  font-family: var(--font-display); letter-spacing:1px; font-size:16px; color: var(--text-mute);
  margin-bottom: 10px; text-transform:uppercase;
}
.exercicios-hint{ font-size:11.5px; color: var(--text-mute); }

/* Linha de exercício: toque abre o detalhe, arraste pra esquerda revela remover */
.exercise-row-wrap{
  position:relative; margin-bottom:10px; border-radius: var(--radius-sm);
  /* clip-path recorta os cantos de forma confiável (overflow:hidden + border-radius vaza no Safari/iOS) */
  clip-path: inset(0 round var(--radius-sm));
}
.exercise-row-delete-bg{
  position:absolute; inset:0; background: var(--danger); color:#fff; border:none;
  display:flex; align-items:center; justify-content:flex-end; padding-right:26px;
  -webkit-appearance:none; appearance:none;
}
.exercise-row-delete-bg svg{ width:20px; height:20px; }
.exercise-row{
  display:flex; gap:14px; width:100%; box-sizing:border-box; padding: 14px;
  /* sem border-radius própria: o arredondamento vem só do clip-path do wrap,
     evitando duas curvas anti-aliased distintas que deixavam um fio vermelho visível no canto */
  background: var(--surface-2); border:1px solid var(--border-soft);
  align-items:center; position:relative; z-index:1;
  touch-action: pan-y; cursor:pointer; user-select:none;
}
.thumb-badge-wrap{ position:relative; flex-shrink:0; }
.exercise-row .thumb{
  width:64px; height:64px; border-radius:10px; object-fit:cover; background: #000;
  border:1px solid var(--border); pointer-events:none;
}
.thumb-badge{
  position:absolute; bottom:-6px; left:-6px; width:26px; height:26px; border-radius:8px;
  background: var(--bg); border:2px solid var(--surface-2); object-fit:contain; padding:2px;
  pointer-events:none;
}
.exercise-row .info{ flex:1; min-width:0; pointer-events:none; }
.exercise-row .info h4{ font-size:15px; font-weight:700; margin-bottom:3px; }
.sets-reps-line{ font-size:12.5px; color: var(--accent); font-weight:700; }

.exrow-swap-btn{
  width:36px; height:36px; border-radius:50%; background: var(--bg-alt); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; color: var(--text-dim); flex-shrink:0;
}
.exrow-swap-btn svg{ width:17px; height:17px; }
.exrow-swap-btn:hover{ border-color: var(--accent); color: var(--accent); }

.exrow-menu-list{
  display:none; position:absolute; right:0; top:38px; z-index:150; min-width:170px;
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); overflow:hidden; padding:4px;
}
.mais-opcoes-menu.open .exrow-menu-list{ display:block; }
.exrow-menu-list button{
  display:block; width:100%; text-align:left; padding: 10px 12px; font-size:13.5px; font-weight:600;
  color: var(--text); border-radius:6px;
}
.exrow-menu-list button:hover{ background: var(--surface-2); }
.exrow-menu-list button.danger{ color: var(--danger); }

/* ===================== EXERCÍCIOS (biblioteca) ===================== */
.lib-header-row{ display:flex; justify-content:space-between; align-items:center; margin: 18px 0 16px; }
.lib-header-row h1{
  font-family: var(--font-display); font-size:38px; letter-spacing:1px;
  background: linear-gradient(120deg, var(--text), var(--accent) 130%);
  -webkit-background-clip: text; background-clip:text; color:transparent;
}
.lib-search-btn{
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  background: var(--surface-2); border:1px solid var(--border); font-size:16px; color: var(--text-dim);
  display:flex; align-items:center; justify-content:center;
}
.lib-search-btn:hover{ border-color: var(--accent); color: var(--text); }
.lib-search-row{ margin-bottom:14px; }
.lib-search-row input[type=search]{
  width:100%; background: var(--surface-2); border:1px solid var(--border); color: var(--text);
  padding: 12px 18px; border-radius: 999px; font-size:14px;
}

.lib-subtabs{
  display:flex; gap:6px; background: var(--surface); padding:5px; border-radius: 999px; border:1px solid var(--border);
  margin-bottom:20px; overflow-x:auto;
}
.lib-subtab{
  flex:1; flex-shrink:0; padding: 10px 14px; border-radius: 999px; font-weight:700; font-size:12.5px;
  color: var(--text-dim); white-space:nowrap; text-transform:uppercase; letter-spacing:.3px;
}
.lib-subtab.active{ background: linear-gradient(140deg, var(--accent), var(--accent-2)); color: var(--on-accent); }

.lib-back{
  display:flex; align-items:center; gap:6px; font-weight:700; font-size:14px; color: var(--accent);
  margin-bottom:14px; padding:8px 4px;
}
.lib-group-label{
  font-size:12px; text-transform:uppercase; letter-spacing:.5px; color: var(--text-mute); font-weight:800;
  margin: 18px 0 8px;
}
.lib-group-label:first-child{ margin-top:0; }

.lib-row{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  padding: 12px; border-radius: var(--radius-sm); background: var(--surface); border:1px solid var(--border-soft);
  margin-bottom:8px; transition: border-color .15s;
}
.lib-row:hover{ border-color: var(--accent); }
.lib-row-thumb{
  width:56px; height:56px; border-radius:10px; object-fit:cover; background: #000; flex-shrink:0;
  border:1px solid var(--border);
}
.lib-row-rank{
  width:26px; flex-shrink:0; text-align:center; font-family: var(--font-display); font-size:18px; color: var(--text-mute);
}
.lib-row-info{ flex:1; min-width:0; }
.lib-row-info h4{ font-size:14.5px; font-weight:700; margin-bottom:2px; }
.lib-row-info span{ font-size:12.5px; color: var(--text-mute); }
.lib-row-chev{ font-size:20px; color: var(--text-mute); flex-shrink:0; }

/* ===================== MODAL ===================== */
.modal-backdrop{
  display:flex; position:fixed; inset:0; background: rgba(0,0,0,0.72);
  z-index: 100; align-items:center; justify-content:center; padding: 20px;
  backdrop-filter: blur(3px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .25s cubic-bezier(.16,1,.3,1), visibility .25s;
}
.modal-backdrop.open{ opacity:1; visibility:visible; pointer-events:auto; }
.modal{
  background: var(--bg-alt); border:1px solid var(--border); border-radius: var(--radius);
  max-width: 640px; width:100%; max-height: 88vh; overflow-y:auto; padding: 26px;
  position:relative; box-shadow: var(--shadow-lg);
  transform: scale(.95) translateY(10px);
  transition: transform .28s cubic-bezier(.16,1,.3,1);
}
.modal-backdrop.open .modal{ transform: scale(1) translateY(0); }
.modal-sm{ max-width: 420px; }
.modal-lg{ max-width: 720px; }
.modal-close{
  position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%;
  background: var(--surface-2); color:var(--text-dim); z-index:2;
  display:flex; align-items:center; justify-content:center;
}
.modal-close:hover{ color: var(--text); }

.modal h2{ font-family: var(--font-display); font-size:26px; letter-spacing:1px; margin-bottom:10px; padding-right:30px; }
.modal .tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }

.modal input[type=text]{
  width:100%; background: var(--surface-2); border:1px solid var(--border); color:var(--text);
  padding: 12px 14px; border-radius: var(--radius-sm); font-size:14px;
}

/* ===================== EXERCÍCIO: DETALHE FULL-SCREEN ===================== */
.ex-overlay{
  display:flex; position:fixed; inset:0; z-index: 250; background: var(--bg);
  flex-direction:column; overflow-y:auto;
  opacity:0; visibility:hidden; pointer-events:none; transform: translateY(18px);
  transition: opacity .3s cubic-bezier(.16,1,.3,1), transform .3s cubic-bezier(.16,1,.3,1), visibility .3s;
}
.ex-overlay.open{ opacity:1; visibility:visible; pointer-events:auto; transform:none; }

.ex-hero{
  position:relative; background:#ffffff; min-height:300px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; padding-top: env(safe-area-inset-top);
}
.ex-hero-btn{
  position:absolute; top: calc(20px + env(safe-area-inset-top)); width:42px; height:42px; border-radius:50%;
  background: rgba(11,15,25,0.55); color:#fff; border:none; z-index:2; backdrop-filter: blur(4px);
  display:flex; align-items:center; justify-content:center; font-size:17px;
}
#exClose{ left:20px; }
.ex-fav-btn{ right:20px; }
.ex-fav-btn.active{ background: linear-gradient(140deg, var(--accent), var(--accent-2)); }
.ex-fav-btn.active svg{ fill: currentColor; }
#exHeroMedia{ width:100%; }
#exHeroMedia img, #exHeroMedia video{ width:100%; max-height:420px; object-fit:contain; display:block; }
#exHeroMedia video.gif-video{ pointer-events:none; }
#exHeroMedia video.gif-video::-webkit-media-controls{ display:none !important; }

.ex-sheet{
  background: var(--surface); border-radius: 28px 28px 0 0; margin-top:-24px; position:relative; z-index:1;
  padding: 26px 22px calc(40px + env(safe-area-inset-bottom)); flex:1;
}
.ex-sheet > *{ max-width: 720px; margin-left:auto; margin-right:auto; }
#exHeroMedia{ max-width: 720px; margin: 0 auto; }
.ex-tags{ display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.ex-tag{
  padding: 6px 14px; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:.4px;
  text-transform:uppercase; background: var(--surface-2); color: var(--text-dim);
}
.ex-tag.popular{ background: var(--accent-soft); color: var(--accent); }
.ex-sheet h2{ font-family: var(--font-display); font-size:30px; letter-spacing:.5px; line-height:1.05; margin-bottom:22px; }

.ex-tabs{
  display:flex; gap:6px; background: var(--surface-2); padding:4px; border-radius:999px; margin-bottom:22px;
  overflow-x:auto;
}
.ex-tab{
  flex:1; flex-shrink:0; padding: 10px 12px; border-radius:999px; font-size:12px; font-weight:700;
  color: var(--text-dim); white-space:nowrap;
}
.ex-tab.active{ background: linear-gradient(140deg, var(--accent), var(--accent-2)); color: var(--on-accent); }

.ex-panel-section{ margin-bottom:22px; }
.ex-panel-label{ font-size:11.5px; text-transform:uppercase; letter-spacing:.5px; color: var(--text-mute); font-weight:800; margin-bottom:8px; }
.ex-muscle-row{ display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--border-soft); }
.ex-muscle-row:last-child{ border-bottom:none; }
.ex-muscle-row img{ width:48px; height:48px; border-radius:10px; background: var(--surface-2); object-fit:contain; padding:6px; flex-shrink:0; }
.ex-muscle-row span{ font-weight:600; font-size:14.5px; }
.ex-desc-text{ color: var(--text-dim); line-height:1.7; font-size:14.5px; }

/* ===================== SAVED WORKOUTS ===================== */
.saved-list{ display:flex; flex-direction:column; gap:14px; }
.saved-card{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding: 18px 22px;
}
.saved-card h3{ font-size:17px; font-weight:700; }
.saved-card .saved-meta{ color: var(--text-mute); font-size:13px; margin-top:4px; }
.saved-card .actions{ display:flex; gap:10px; }

/* ===================== EVOLUCAO / PROGRESSO ===================== */
.prog-header-row{ display:flex; justify-content:space-between; align-items:flex-start; margin: 18px 0 20px; }
.prog-header-row h1{
  font-family: var(--font-display); font-size:38px; letter-spacing:1px;
  background: linear-gradient(120deg, var(--text), var(--accent) 130%);
  -webkit-background-clip: text; background-clip:text; color:transparent;
}
.prog-date-range{ color: var(--text-dim); font-size:13.5px; margin-top:4px; }
.prog-header-actions{ display:flex; gap:8px; flex-shrink:0; }

.prog-calendar{ display:grid; grid-template-columns: repeat(7,1fr); gap:6px; margin-bottom:22px; }
.prog-day{
  display:flex; flex-direction:column; align-items:center; gap:8px; padding: 10px 4px; border-radius: var(--radius-sm);
  background: var(--surface); border:1px solid var(--border-soft);
}
.prog-day-label{ font-size:10px; font-weight:700; color: var(--text-mute); letter-spacing:.3px; }
.prog-day-num{ font-size:15px; font-weight:700; color: var(--text); width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.prog-day.has-session .prog-day-num{ background: var(--accent-soft); color: var(--accent); }
.prog-day.today{ border-color: var(--accent); }
.prog-day.today .prog-day-num{ background: linear-gradient(140deg, var(--accent), var(--accent-2)); color: var(--on-accent); }

.recup-resumo{ display:flex; gap:24px; margin-bottom:18px; flex-wrap:wrap; }
.recup-resumo-item{ display:flex; flex-direction:column; }
.recup-resumo-item strong{ font-family: var(--font-display); font-size:26px; color: var(--accent); letter-spacing:.5px; }
.recup-resumo-item span{ font-size:12px; color: var(--text-mute); text-transform:uppercase; letter-spacing:.3px; }
.recup-lista{ display:flex; flex-direction:column; }
.recup-row{ display:flex; align-items:center; gap:12px; padding: 11px 0; border-bottom:1px solid var(--border-soft); }
.recup-row:last-child{ border-bottom:none; }
.recup-row img{ width:34px; height:34px; border-radius:8px; background: var(--surface-2); object-fit:contain; padding:4px; flex-shrink:0; }
.recup-nome{ flex:1; font-weight:600; font-size:14px; }
.recup-dias{ font-size:12px; color: var(--text-mute); }
.recup-pill{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.3px; padding: 4px 10px; border-radius:999px; }
.recup-pill.pronto{ background: rgba(110,238,213,0.18); color: #0c8f72; }
.recup-pill.recuperando{ background: rgba(255,183,3,0.16); color: #a06600; }
.recup-pill.fadigado{ background: rgba(214,58,58,0.12); color: var(--danger); }

.stats-row{ display:grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap:14px; margin-bottom:22px; }
.stat-card{
  background: linear-gradient(180deg, var(--surface), var(--bg-alt)); border:1px solid var(--border);
  border-radius: var(--radius); padding: 18px;
}
.stat-card .stat-value{ font-family: var(--font-display); font-size: 34px; color: var(--accent); letter-spacing:1px; display:flex; align-items:center; gap:6px; }
.stat-icon{ width:24px; height:24px; flex-shrink:0; }
.stat-card .stat-label{ font-size:12.5px; color: var(--text-mute); margin-top:4px; text-transform:uppercase; letter-spacing:.5px; }

#evoExercicioSelect{
  width:100%; background: var(--surface-2); border:1px solid var(--border); color:var(--text);
  padding: 11px 16px; border-radius: 999px; font-size:14px; margin-bottom: 16px;
}
#evoChartWrap{ min-height: 60px; }
.chart-empty{ color: var(--text-mute); font-size:14px; padding: 20px 0; text-align:center; }

.history-list{ display:flex; flex-direction:column; gap:10px; }
.history-item{
  background: var(--surface-2); border:1px solid var(--border-soft); border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.history-item .hist-head{ display:flex; justify-content:space-between; align-items:center; cursor:pointer; }
.history-item h4{ font-size:14px; font-weight:700; }
.history-item .hist-date{ font-size:12px; color: var(--text-mute); }
.history-item .hist-chev{ color: var(--text-mute); display:flex; transition: transform .2s ease; }
.history-item.open .hist-chev{ transform: rotate(180deg); }
.history-item .hist-details{ display:none; margin-top: 12px; padding-top:12px; border-top:1px solid var(--border-soft); font-size:13px; color: var(--text-dim); }
.history-item.open .hist-details{ display:block; }
.history-row{ display:flex; justify-content:space-between; padding: 4px 0; }

/* ===================== EXECUTAR TREINO ===================== */
.exec-exercise{ background: var(--surface-2); border:1px solid var(--border-soft); border-radius: var(--radius-sm); padding:16px; margin-bottom:12px; }
.exec-exercise h4{ font-size:15px; margin-bottom:10px; }
.set-row{ display:grid; grid-template-columns: 30px 1fr 1fr 36px; gap:8px; align-items:center; margin-bottom:8px; }
.set-row span{ font-size:12px; color: var(--text-mute); font-weight:700; }
.set-row input{
  background: var(--bg-alt); border:1px solid var(--border); color: var(--text);
  padding: 8px 10px; border-radius: 8px; font-size:13px; width:100%;
}
.set-row .chk{ width:26px; height:26px; border-radius:50%; background: var(--bg-alt); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; }
.set-row .chk.done{ background: var(--success); border-color: var(--success); color:#0b0b0d; }
.add-set-btn{ font-size:12px; color: var(--accent); font-weight:700; margin-top:4px; }
.exec-footer{ display:flex; justify-content:flex-end; gap:10px; margin-top:18px; position:sticky; bottom:0; background:var(--bg-alt); padding-top:10px; }

/* ===================== TOAST ===================== */
.toast{
  position:fixed; bottom: max(24px, calc(env(safe-area-inset-bottom) + 12px)); left:50%; transform: translateX(-50%) translateY(20px);
  background: var(--surface); border:1px solid var(--accent); color: var(--text);
  padding: 12px 22px; border-radius: 999px; font-size:14px; font-weight:600;
  opacity:0; pointer-events:none; transition: all .25s ease; z-index: 200;
  box-shadow: var(--shadow-lg);
  max-width: calc(100vw - 40px); text-align:center;
}
.toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 720px){
  .topbar .tabs{ display:none; }
  .install-btn{ font-size:11.5px; padding:8px 12px; }
  .brand-name{ font-size:22px; }
  .tabs-mobile{
    display:flex; justify-content:space-around; position:fixed; bottom:0; left:0; right:0;
    background: var(--bg-alt); border-top:1px solid var(--border);
    padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
    z-index:60;
  }
  .tabs-mobile .tab-btn{ display:flex; flex-direction:column; align-items:center; gap:3px; font-size:10.5px; padding:6px 6px; border-radius:10px; min-width:56px; }
  .tabs-mobile .tab-btn .nav-icon{ width:20px; height:20px; }
  .tabs-mobile .tab-btn.active{ background: var(--accent-soft); color: var(--accent); }
  .app-shell{ padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
  .view-header h1{ font-size: 32px; }
  .exercise-row .thumb{ width:52px; height:52px; }
  .exercise-row .info h4{ font-size:14px; }
  .day-tabs{ margin-left:-4px; padding-left:4px; }

  /* Evita zoom automático do iOS Safari ao focar inputs com fonte < 16px */
  input, select, textarea{ font-size: 16px !important; }
  .range-value, .field-label{ font-size:13px; }
  .set-row{ grid-template-columns: 26px 1fr 1fr 34px; }
  .modal{ padding: 22px 18px; max-height: 92vh; }
  .exec-footer{ padding-bottom: env(safe-area-inset-bottom); }
}

/* ===================== GERAR TREINO: HOME (IA) ===================== */
.gerar-home-empty{
  text-align:center; padding: 60px 24px; border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface), var(--bg-alt)); border:1px solid var(--border);
}
.gerar-home-empty .emoji{ font-size:52px; margin-bottom:16px; }
.gerar-home-empty h2{ font-family: var(--font-display); font-size:28px; letter-spacing:1px; margin-bottom:10px; }
.gerar-home-empty p{ color: var(--text-dim); max-width:440px; margin: 0 auto 22px; }

.perfil-card{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  background: linear-gradient(180deg, var(--surface), var(--bg-alt)); border:1px solid var(--border);
  border-radius: var(--radius); padding: 20px 24px; margin-bottom:20px;
}
.perfil-card .perfil-info h3{ font-family: var(--font-display); font-size:22px; letter-spacing:1px; }
.perfil-card .perfil-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }

.auth-box{ margin-bottom:20px; }
.auth-logged, .auth-logged-out{
  display:flex; align-items:center; gap:12px; background: var(--surface); border:1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px 16px;
}
.auth-avatar{ width:38px; height:38px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.auth-info{ display:flex; flex-direction:column; flex:1; min-width:0; }
.auth-info span{ font-size:12.5px; color: var(--text-mute); }
.auth-logged .btn-secondary{ flex-shrink:0; }
.auth-logged-out .btn-secondary{ display:flex; align-items:center; gap:10px; padding:11px 18px; }
.auth-warn{ background: var(--accent-soft); border:1px solid var(--border); border-radius: var(--radius-sm); padding:12px 16px; font-size:13px; color: var(--text-dim); }

/* ===================== TELA DE LOGIN (gate) ===================== */
.login-screen{
  display:flex; align-items:center; justify-content:center; position:fixed; inset:0; z-index: 400;
  background: var(--bg); padding: 24px;
  background-image:
    radial-gradient(circle at 15% 0%, rgba(18,59,165,0.08), transparent 40%),
    radial-gradient(circle at 90% 15%, rgba(110,238,213,0.12), transparent 35%);
  opacity:1; visibility:visible; pointer-events:auto;
  transition: opacity .3s cubic-bezier(.16,1,.3,1), visibility .3s;
}
.login-screen:not(.open){ opacity:0; visibility:hidden; pointer-events:none; }
.login-card{
  width:100%; max-width:380px; text-align:center; background: var(--surface);
  border:1px solid var(--border); border-radius: var(--radius); padding: 40px 30px;
  box-shadow: var(--shadow-lg);
}
.login-logo{ width:56px; height:auto; margin:0 auto 14px; }
.login-brand{ display:block; font-family: var(--font-display); font-size:32px; letter-spacing:3px; margin-bottom:14px; }
.login-subtitle{ color: var(--text-dim); font-size:14px; line-height:1.5; margin-bottom:28px; }
.btn-google-login{
  width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-sm);
  padding:13px 20px; font-weight:700; font-size:14.5px; color: var(--text);
  position:relative;
}
.btn-google-login:hover{ border-color: var(--accent); }

.login-divider{
  display:flex; align-items:center; gap:12px; margin:22px 0; color: var(--text-mute); font-size:12.5px;
}
.login-divider::before, .login-divider::after{ content:''; flex:1; height:1px; background: var(--border); }

.login-email-form{ display:flex; flex-direction:column; gap:10px; text-align:left; }
.login-email-form input{
  width:100%; background: var(--surface-2); border:1px solid var(--border); color:var(--text);
  padding: 12px 14px; border-radius: var(--radius-sm); font-size:14px;
}
.login-email-form .btn-primary{ margin-top:4px; width:100%; position:relative; }

/* Confirmar senha entra/sai com uma transição de altura em vez de aparecer/sumir seco */
.login-confirm-wrap{
  max-height:0; opacity:0; overflow:hidden;
  transition: max-height .3s cubic-bezier(.16,1,.3,1), opacity .25s ease;
}
.login-confirm-wrap.show{ max-height:52px; opacity:1; }
.login-confirm-wrap input{ width:100%; }

.login-toggle{ margin-top:18px; font-size:13px; color: var(--text-dim); }
.login-toggle button{ font-weight:700; color: var(--accent); margin-left:4px; }

.login-error{ margin-top:16px; font-size:12.5px; color: var(--danger); }
.login-error.shake{ animation: loginShake .4s ease; }

/* Entrada em cascata dos elementos do card de login/criar conta */
.login-anim{
  opacity:0; transform: translateY(14px);
  animation: loginFadeUp .55s cubic-bezier(.16,1,.3,1) both;
  animation-delay: var(--d, 0ms);
}
@keyframes loginFadeUp{ to{ opacity:1; transform:none; } }
@keyframes loginShake{
  20%, 80%{ transform: translateX(2px); }
  30%, 50%, 70%{ transform: translateX(-4px); }
  40%, 60%{ transform: translateX(4px); }
}
.shake{ animation: loginShake .4s ease; }

/* Loading com o favicon: pulso suave, usado no boot inicial e nos botões durante o envio */
.favicon-loader{ animation: faviconPulse 1.1s ease-in-out infinite; }
@keyframes faviconPulse{
  0%, 100%{ transform: scale(1); opacity:1; }
  50%{ transform: scale(1.18); opacity:.55; }
}
.boot-loader{
  position:fixed; inset:0; z-index:500; display:flex; align-items:center; justify-content:center;
  background: var(--bg); transition: opacity .3s ease, visibility .3s ease;
}
.boot-loader img{ width:52px; height:auto; }
.boot-loader.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.btn-loader{
  position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); width:22px; height:auto;
}
button:has(.btn-loader:not([hidden])) > *:not(.btn-loader){ visibility:hidden; }

/* ===================== ONBOARDING WIZARD ===================== */
.onb-overlay{
  display:flex; position:fixed; inset:0; z-index: 300; background: var(--bg);
  flex-direction:column;
  background-image:
    radial-gradient(circle at 15% 0%, rgba(18,59,165,0.08), transparent 40%),
    radial-gradient(circle at 90% 15%, rgba(110,238,213,0.12), transparent 35%);
  opacity:0; visibility:hidden; pointer-events:none; transform: translateY(18px);
  transition: opacity .3s cubic-bezier(.16,1,.3,1), transform .3s cubic-bezier(.16,1,.3,1), visibility .3s;
}
.onb-overlay.open{ opacity:1; visibility:visible; pointer-events:auto; transform:none; }

.onb-header{
  display:flex; align-items:center; gap:14px; padding: 16px 20px;
  padding-top: max(16px, env(safe-area-inset-top));
}
.onb-back{
  width:38px; height:38px; border-radius:50%; background: var(--surface-2); border:1px solid var(--border);
  color: var(--text); font-size:18px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
}
.onb-progress{ flex:1; display:flex; gap:6px; }
.onb-progress .seg{ flex:1; height:5px; border-radius:999px; background: var(--border); overflow:hidden; }
.onb-progress .seg.filled{ background: linear-gradient(90deg, var(--accent), var(--accent-2)); }

/* Alerta de validação: banner fixo no topo do wizard, bem mais visível que um toast no rodapé */
.onb-alert{
  display:flex; align-items:center; gap:10px; margin: 0 20px; max-width: 640px; width:calc(100% - 40px);
  margin-left:auto; margin-right:auto;
  background: rgba(214,58,58,0.1); border:1px solid rgba(214,58,58,0.35); color: var(--danger);
  border-radius: var(--radius-sm); font-size:13.5px; font-weight:700; line-height:1.4;
  padding: 0 16px; max-height:0; opacity:0; transform: translateY(-14px); overflow:hidden;
  transition: opacity .3s cubic-bezier(.16,1,.3,1), transform .3s cubic-bezier(.16,1,.3,1),
    max-height .3s cubic-bezier(.16,1,.3,1), padding .3s ease, margin-bottom .3s ease;
}
.onb-alert svg{ flex-shrink:0; }
.onb-alert.show{ opacity:1; transform:none; max-height:100px; padding:13px 16px; margin-bottom:14px; }

.onb-body{
  flex:1; overflow-y:auto; padding: 8px 24px 24px;
  max-width: 640px; width:100%; margin:0 auto;
}
.onb-body h1{ font-family: var(--font-display); font-size:34px; letter-spacing:1px; margin: 10px 0 8px; }
.onb-body .onb-sub{ color: var(--text-dim); font-size:14.5px; margin-bottom:26px; max-width:480px; }

.onb-footer{
  padding: 14px 24px; padding-bottom: max(14px, env(safe-area-inset-bottom));
  max-width:640px; width:100%; margin:0 auto; box-sizing:border-box;
}

.onb-option-card{
  display:flex; align-items:center; gap:16px; width:100%; text-align:left;
  padding: 18px 20px; border-radius: var(--radius); margin-bottom:12px;
  background: var(--surface); border:1px solid var(--border); transition: all .15s;
}
.onb-option-card:hover{ border-color: var(--accent); }
.onb-option-card.selected{ border-color: var(--accent); background: var(--accent-soft); }
.onb-option-card .onb-icon{ font-size:28px; width:44px; text-align:center; flex-shrink:0; }
.onb-option-card h4{ font-size:15.5px; font-weight:700; margin-bottom:4px; }
.onb-option-card p{ font-size:13px; color: var(--text-dim); line-height:1.4; }

.onb-foco-icon{
  width:48px; height:48px; display:flex; align-items:center; justify-content:center;
  background: var(--surface-2); border-radius:10px; padding:0;
}
.onb-foco-icon img{ width:100%; height:100%; object-fit:contain; padding:5px; }
.onb-foco-icon svg{ width:26px; height:26px; color: var(--accent); }
.onb-foco-card.selected .onb-foco-icon{ background: rgba(255,255,255,0.5); }

.onb-field{ margin-bottom:22px; }
.onb-field label{ display:block; font-size:13px; color:var(--text-dim); font-weight:700; margin-bottom:8px; text-transform:uppercase; letter-spacing:.4px; }
.onb-field input[type=text], .onb-field input[type=number]{
  width:100%; background: var(--surface-2); border:1px solid var(--border); color:var(--text);
  padding: 16px 18px; border-radius: var(--radius-sm); font-size:20px; font-weight:700;
}
.onb-field input:focus{ outline:none; border-color: var(--accent); }
.onb-field .onb-unit{ font-size:13px; color:var(--text-mute); margin-top:6px; }

.onb-pref-list{ display:flex; flex-direction:column; gap:10px; margin-top:8px; }
.onb-pref-row{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-sm);
  padding:14px 16px; font-size:14px;
}
.onb-pref-row span{ color: var(--text-dim); font-weight:600; }
.onb-pref-row strong{ font-weight:700; text-align:right; }

.onb-chip-grid{ display:flex; flex-wrap:wrap; gap:10px; }
.onb-chip{
  padding: 13px 20px; border-radius: 999px; font-weight:700; font-size:14px;
  background: var(--surface-2); border:1px solid var(--border); color: var(--text-dim);
}
.onb-chip.selected{ background: linear-gradient(140deg, var(--accent), var(--accent-2)); color: var(--on-accent); border-color:transparent; }
.onb-chip-lg{ padding: 15px 22px; font-size:15px; }

.onb-badge{
  display:inline-block; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.3px;
  background: var(--surface-2); color: var(--text-mute); border-radius:999px; padding: 3px 9px; margin-left:4px; vertical-align:middle;
}
.onb-badge-reco{ background: var(--accent-soft); color: var(--accent); }

.onb-stepper{ display:flex; align-items:center; justify-content:center; gap:28px; padding: 20px 0; }
.onb-stepper-btn{
  width:52px; height:52px; border-radius:50%; background: var(--surface-2); border:1px solid var(--border);
  font-size:24px; font-weight:700; color: var(--text); display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.onb-stepper-btn:hover{ border-color: var(--accent); color: var(--accent); }
.onb-stepper-value{ text-align:center; min-width:120px; }
.onb-stepper-value span{ font-family: var(--font-display); font-size:56px; letter-spacing:1px; line-height:1; display:block; }
.onb-stepper-value small{ font-size:12.5px; color: var(--text-mute); text-transform:uppercase; letter-spacing:.4px; }

.onb-info-box{
  display:flex; align-items:flex-start; gap:12px; background: var(--surface-2); border:1px solid var(--border-soft);
  border-radius: var(--radius-sm); padding: 14px 16px; margin-top:6px;
}
.onb-info-box:empty{ display:none; }
.onb-info-emoji{ font-size:20px; flex-shrink:0; }
.onb-info-box p{ font-size:13.5px; color: var(--text-dim); line-height:1.5; }
.onb-info-box strong{ color: var(--accent); }

.onb-equip-search{
  width:100%; background: var(--surface-2); border:1px solid var(--border); color:var(--text);
  padding: 13px 16px; border-radius: 999px; font-size:15px; margin-bottom:16px;
}
.onb-equip-group{ margin-bottom:20px; }
.onb-equip-group-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.onb-equip-group-head h4{ font-size:12.5px; text-transform:uppercase; letter-spacing:.6px; color: var(--text-mute); display:flex; align-items:center; gap:8px; }
.onb-equip-group-head h4 .count{ background: var(--surface-2); border-radius:999px; padding:1px 8px; font-size:11px; color:var(--text-dim); }
.onb-equip-group-head button{ font-size:12px; color: var(--accent); font-weight:700; }

.onb-equip-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding: 10px 14px; border-radius: var(--radius-sm); background: var(--surface); border:1px solid var(--border-soft);
  margin-bottom:8px;
}
.onb-equip-row-info{ display:flex; align-items:center; gap:12px; min-width:0; }
.onb-equip-row-info img{
  width:40px; height:40px; object-fit:contain; border-radius:8px; background: var(--surface-2);
  border:1px solid var(--border-soft); flex-shrink:0; padding:4px;
}
.onb-equip-row span{ font-size:14px; font-weight:600; }

.onb-toggle{ position:relative; width:46px; height:27px; flex-shrink:0; }
.onb-toggle input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.onb-toggle .track{
  position:absolute; inset:0; background: #c3cfdc; border-radius:999px; transition: background .15s;
}
.onb-toggle .thumb{
  position:absolute; top:3px; left:3px; width:21px; height:21px; border-radius:50%; background:#fff;
  transition: transform .15s; box-shadow: 0 2px 4px rgba(11,15,25,0.25);
}
.onb-toggle input:checked + .track{ background: var(--accent); }
.onb-toggle input:checked + .track .thumb{ transform: translateX(19px); }

.onb-loading{ text-align:center; padding: 60px 20px; }
.onb-loading .spinner{
  width:52px; height:52px; border-radius:50%; margin: 0 auto 24px;
  border: 4px solid var(--border); border-top-color: var(--accent);
  animation: spin 0.9s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }
.onb-loading h3{ font-family: var(--font-display); font-size:22px; letter-spacing:1px; margin-bottom:8px; }
.onb-loading p{ color: var(--text-dim); font-size:14px; }
.onb-loading .erro{ color: var(--danger); margin-top:16px; }

.onb-resumo{ text-align:center; padding-top: 40px; }
.onb-resumo h1{ font-family: var(--font-display); font-size:34px; letter-spacing:.5px; margin-bottom:32px; line-height:1.15; }
.onb-resumo-destaque{ color: var(--accent); }
.onb-resumo-stats{ display:flex; justify-content:center; gap:36px; margin-bottom:44px; flex-wrap:wrap; }
.onb-resumo-stats strong{ display:block; font-family: var(--font-display); font-size:30px; letter-spacing:.5px; color: var(--text); }
.onb-resumo-stats span{ font-size:12.5px; color: var(--text-mute); text-transform:uppercase; letter-spacing:.3px; }

@media (max-width: 720px){
  .onb-body h1{ font-size:28px; }
  .onb-option-card{ padding:16px; }
  .onb-equip-row-info img{ width:52px; height:52px; }
  .onb-equip-row{ padding: 12px 14px; }
}