/* =========================
   WORKOUT UI (UNIFICADO)
   ========================= */

/* RESET */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  background:#000;
  color:#fff;
}

/* TOKENS */
:root{
  --yellow:#FFD400;
  --bg:#000;

  --white06:rgba(255,255,255,.06);
  --white10:rgba(255,255,255,.10);
  --white12:rgba(255,255,255,.12);
  --white15:rgba(255,255,255,.15);
  --white20:rgba(255,255,255,.20);

  --muted:#bdbdbd;
  --green:#32d74b;
  --red:#ff3b30;
}

/* HEADER */
header{
  width:100%;
  padding:24px 20px 10px;
  text-align:left;
}
header h1{
  margin:0;
  color:var(--yellow);
  letter-spacing:3px;
}
header p{
  margin:4px 0 0;
  font-size:12px;
  color:#aaa;
  text-transform:uppercase;
}
#userBar{
  margin-top:8px;
  font-size:12px;
  color:#cfcfcf;
}

/* LAYOUT */
.container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 20px 220px;
}
@media (min-width: 900px){
  header{padding:28px 56px 10px;}
  .container{padding:0 56px 220px;}
}

/* GRID (por defeito 1 coluna) */
.grid{
  margin-top:14px;
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
/* Se quiseres 2 colunas só em ecrãs muito grandes, ativa:
@media (min-width: 1300px){
  .grid{grid-template-columns:1fr 1fr;}
}
*/

/* HERO / TOP CARD */
.hero{
  margin-top:10px;
  padding:14px;
  border-radius:18px;
  border:1px solid var(--white12);
  background:linear-gradient(180deg, rgba(255,212,0,.08), rgba(255,255,255,.04));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.heroTitle{
  margin:0;
  font-weight:900;
  letter-spacing:1px;
  text-transform:uppercase;
}
.heroSub{
  margin:4px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.3;
}

/* PILL */
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:#ddd;
  font-size:12px;
  user-select:none;
  white-space:nowrap;
}
.pillPrimary{
  border-color: rgba(255,212,0,.35);
  background: rgba(255,212,0,.10);
  color:#fff;
}
.dot{
  width:10px;height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.25);
}
.pillPrimary .dot{background:var(--yellow)}

/* CARDS */
.card{
  position:relative;
  border-radius:22px;
  border:1px solid var(--white12);
  background:rgba(255,255,255,.06);
  overflow:hidden;
  padding:16px;
}
.card:before{
  content:"";
  position:absolute;
  inset:-2px;
  background:radial-gradient(800px 300px at 20% 10%, rgba(255,212,0,.12), transparent 60%);
  pointer-events:none;
}
.cardTop{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.cardTitle{
  position:relative;
  margin:0;
  font-size:18px;
  font-weight:900;
  letter-spacing:1px;
  text-transform:uppercase;
}
.cardDesc{
  position:relative;
  margin:8px 0 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.35;
  max-width:62ch;
}

/* STRIP DECOR */
.strip{
  position:relative;
  margin-top:14px;
  border-radius:16px;
  height:74px;
  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(90deg, rgba(255,212,0,.18), rgba(255,255,255,.04)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0px, rgba(255,255,255,.10) 2px, transparent 2px, transparent 18px);
  overflow:hidden;
}
.stripTag{
  position:absolute;
  left:12px;
  bottom:10px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.5px;
  text-transform:uppercase;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
}

/* BOTÕES */
.actions{
  position:relative;
  margin-top:14px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.btn{
  flex:1;
  min-width: 180px;
  height:56px;
  border:0;
  border-radius:16px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.5px;
  cursor:pointer;
}
.btnPrimary{background:var(--yellow);color:#000}
.btnGhost{background:transparent;color:#fff;border:1px solid var(--white20)}
.btnDanger{background:var(--red);color:#fff}
.btn:active{transform:scale(.99)}
.btn:disabled{opacity:.55;cursor:not-allowed}

/* FORM */
label{display:block;font-size:12px;color:#bbb;margin:0 0 6px}
input,select,textarea{
  width:100%;
  padding:12px;
  border-radius:12px;
  border:1px solid var(--white15);
  background:var(--white06);
  color:#fff;
  outline:none;
}
input:focus,select:focus,textarea:focus{border-color:rgba(255,212,0,.35)}
small{color:#888}

/* dropdown legível */
select{background:var(--white06) !important;color:#fff !important;}
select option{background:#111 !important;color:#fff !important;}

/* BADGES */
#badgeToday{
  display:none;
  margin-left:6px;
  font-weight:900;

  color:#FFD400;
}
.badge{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--white15);
  background:var(--white06);
  font-size:11px;
  color:#ddd;
}
.badge.planned{border-color:rgba(255,212,0,.35); background:rgba(255,212,0,.12); color:#fff}
.badge.completed{border-color:rgba(50,215,75,.35); background:rgba(50,215,75,.10); color:#d9ffe1}
.badge.skipped{border-color:rgba(255,59,48,.35); background:rgba(255,59,48,.10); color:#ffd6d3}

/* DETAILS */
.details{
  white-space:pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  font-size:12px;
  line-height:1.35;
  color:#ddd;
  max-height:420px;
  overflow:auto;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.35);
}

/* FOOTER NAV (6 itens) */
footer{
  position:fixed;
  bottom:0;left:0;right:0;
  background:#000;
  border-top:1px solid #222;
  z-index:998;
}
footer nav{
  width:min(720px, calc(100% - 24px));
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(6,1fr);
}
footer a{
  padding:12px 0;
  text-align:center;
  font-size:11px;
  color:#888;
  text-decoration:none;
  position:relative;
}
footer a.active{color:var(--yellow)}

/* badges no menu */
.navDot{
  position:absolute;
  top:8px; right:18px;
  width:8px;height:8px;border-radius:999px;
  background:var(--yellow);
  display:none;
}
.navBadge{
  position:absolute;
  top:6px; right:12px;
  font-size:10px;
  padding:2px 6px;
  border-radius:999px;
  background:var(--yellow);
  color:#000;
  font-weight:900;
  display:none;
}


/* =========================
   GENERATOR (SCOPED)
   Usa: <body class="page-generator">
   ========================= */

.page-generator .gen{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 20px 220px;
}
@media (min-width: 900px){
  .page-generator .gen{padding:0 56px 220px;}
}

/* progress */
.page-generator .genProgress{
  margin-top:10px;
}
.page-generator .genProgressBar{
  height:4px;
  background:#222;
  border-radius:4px;
  overflow:hidden;
  margin-bottom:8px;
}
.page-generator .genProgressFill{
  height:100%;
  background:var(--yellow);
  width:0%;
  transition:width .25s ease;
}
.page-generator .genProgressText{
  font-size:12px;
  color:#aaa;
}

/* steps */
.page-generator .genStep{display:none;}
.page-generator .genStep.active{display:block;}
.page-generator .genTitle{
  text-align:left;
  margin:18px 0 14px;
  font-size:28px;
  font-weight:900;
  letter-spacing:1px;
  text-transform:uppercase;
}
.page-generator .genSubtitle{
  margin:0 0 10px;
  color:#bbb;
  font-size:13px;
}

/* grids */
.page-generator .genGrid2{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}
.page-generator .genGrid3{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}
.page-generator .genGrid4{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
}
.page-generator .genGrid5{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:12px;
}
@media (max-width: 900px){
  .page-generator .genGrid4{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .page-generator .genGrid5{grid-template-columns:repeat(3, minmax(0, 1fr));}
}
@media (max-width: 560px){
  .page-generator .genGrid2{grid-template-columns:1fr;}
  .page-generator .genGrid3{grid-template-columns:1fr;}
  .page-generator .genGrid5{grid-template-columns:repeat(2, minmax(0, 1fr));}
}

/* generator buttons (não usa .btn!) */
.page-generator .genBtn{
  height:76px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  border-radius:22px;
  font-size:18px;
  font-weight:900;
  color:#fff;
  cursor:pointer;
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}
.page-generator .genBtn:hover{background:rgba(255,255,255,.14);}
.page-generator .genBtn.active{
  background:var(--yellow);
  border-color:rgba(255,212,0,.35);
  color:#000;
  transform:scale(1.02);
}

/* checkbox row */
.page-generator .genCheck{
  margin-top:18px;
  display:flex;
  align-items:center;
  gap:10px;
  color:#bbb;
  font-size:13px;
}
.page-generator .genCheck input{
  transform:scale(1.2);
}

/* nav bottom inside generator */
.page-generator .genNav{
  margin-top:18px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
}
.page-generator .genBack{
  color:#aaa;
  cursor:pointer;
  user-select:none;
}
.page-generator .genBack:hover{text-decoration:underline;}

/* “continuar” / ação final do gerador (se tiveres) */
.page-generator .genAction{
  height:56px;
  border:0;
  border-radius:16px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.5px;
  cursor:pointer;
  padding:0 16px;
}
.page-generator .genAction.primary{background:var(--yellow);color:#000;}
.page-generator .genAction.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.20);}

.page-generator .genCard{
  margin-top:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  border-radius:22px;
  padding:16px;
}
/* alinhar checkbox no step 4 (debaixo dos botões, à esquerda) */
.page-generator .step[data-step="4"] .checkbox{
  margin-top:14px;
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:flex-start;
  width:100%;
  max-width:720px;        /* opcional: igual à área dos botões */
}

.page-generator .step[data-step="4"] .checkbox label{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  cursor:pointer;
}

.page-generator .step[data-step="4"] .checkbox input{
  margin:0;
  transform:scale(1.15);
}

/* STEP 4 — helper block (checkbox + hint) */
.page-generator .stepHelp{
  margin-top:16px;
  width:100%;
  max-width:720px;             /* igual à zona dos botões */
  display:flex;
  flex-direction:column;
  gap:10px;
}

.page-generator .painRow{
  display:flex;
  align-items:center;
  gap:12px;
  width:fit-content;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#ddd;
  cursor:pointer;
}

.page-generator .painRow input{
  margin:0;
  width:18px;
  height:18px;
  accent-color: var(--yellow);
}

.page-generator .helpHint{
  font-size:12px;
  color:rgba(255,255,255,.65);
  letter-spacing:.2px;
}

/* “Voltar atrás” com estilo de link/botão suave */
.page-generator .back{
  margin-top:18px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.75);
  width:fit-content;
}

.page-generator .back:before{
  content:"←";
  opacity:.9;
  font-weight:900;
}

.page-generator .back:hover{
  background:rgba(255,255,255,.08);
  color:#fff;
}

/* =========================
   GENERATOR COMPAT (HTML ATUAL)
   mantém HTML/JS como tens (.step/.btn/.grid-2/.grid-5/.progress)
   ========================= */

.page-generator .container{ /* usa o layout "gen" */
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 20px 220px;
}
@media (min-width: 900px){
  .page-generator .container{padding:0 56px 220px;}
}

/* progress */
.page-generator .progress{ margin-top:10px; }
.page-generator .progress{
  height:4px;
  background:#222;
  border-radius:4px;
  overflow:hidden;
  margin-bottom:8px;
}
.page-generator .progress-bar{
  height:100%;
  background:var(--yellow);
  width:0%;
  transition:width .25s ease;
}
.page-generator .progress-text{
  font-size:12px;
  color:#aaa;
}

/* steps */
.page-generator .step{display:none;}
.page-generator .step.active{display:block;}
.page-generator .step h2{
  text-align:left;
  margin:18px 0 14px;
  font-size:28px;
  font-weight:900;
  letter-spacing:1px;
  text-transform:uppercase;
}

/* grids (HTML atual) */
.page-generator .grid-2{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}
.page-generator .grid-5{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:12px;
}
@media (max-width: 900px){
  .page-generator .grid-5{grid-template-columns:repeat(3, minmax(0, 1fr));}
}
@media (max-width: 560px){
  .page-generator .grid-2{grid-template-columns:1fr;}
  .page-generator .grid-5{grid-template-columns:repeat(2, minmax(0, 1fr));}
}

/* ✅ IMPORTANTE: não rebentar o botão "GERAR TREINO" do step 6
   (o teu JS usa .btn para os botões de escolha, mas o submit também tem .btn)
*/
.page-generator .btn{
  height:76px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  border-radius:22px;
  font-size:18px;
  font-weight:900;
  color:#fff;
  cursor:pointer;
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}
.page-generator .btn:hover{background:rgba(255,255,255,.14);}
.page-generator .btn.active{
  background:var(--yellow);
  border-color:rgba(255,212,0,.35);
  color:#000;
  transform:scale(1.02);
}

/* ✅ Submit do step 6 fica amarelo e “maior”, sem depender de inline style */
.page-generator .step[data-step="6"] .btn{
  width:100%;
  height:72px;
  background:var(--yellow);
  color:#000;
  border:0;
}

/* helper do step 4 */
.page-generator .stepHelp{
  margin-top:16px;
  width:100%;
  max-width:720px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.page-generator .painRow{
  display:flex;
  align-items:center;
  gap:12px;
  width:fit-content;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#ddd;
  cursor:pointer;
}
.page-generator .painRow input{
  margin:0;
  width:18px;
  height:18px;
  accent-color: var(--yellow);
}
.page-generator .helpHint{
  font-size:12px;
  color:rgba(255,255,255,.65);
  letter-spacing:.2px;
}

/* voltar atrás — deixa de ser “texto solto” */
.page-generator .back{
  margin-top:18px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.75);
  width:fit-content;
  cursor:pointer;
}
.page-generator .back:before{content:"←";font-weight:900;opacity:.9;}
.page-generator .back:hover{background:rgba(255,255,255,.08);color:#fff;}
/* =========================
   GERADOR — VOLTAR ATRÁS
   ========================= */

.page-generator #backBtn{
  margin-top:20px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.75);
  font-size:13px;
  cursor:pointer;
  user-select:none;
  width:fit-content;
}

.page-generator #backBtn::before{
  content:"←";
  font-weight:900;
  opacity:.9;
}

.page-generator #backBtn:hover{
  background:rgba(255,255,255,.10);
  color:#fff;
}

/* garante que fica sempre abaixo do conteúdo do step */
.page-generator .step + #backBtn,
.page-generator #workoutForm + #backBtn{
  display:inline-flex;
}


/* =========================
   PROFILE PAGE (SCOPED)
   Usa: <body class="page-profile">
   ========================= */

.page-profile main{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 20px 220px;
}

.page-profile section{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  border-radius:24px;
}
/* =========================
   PLANS PAGE (SCOPED)
   Usa: <body class="page-plans">
   ========================= */

.page-plans .bgHero{
  position:fixed;
  inset:0;
  z-index:-10;
}

.page-plans .bgHero img{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.20;
}

.page-plans .bgHero:after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.75);
}

/* título + texto */
.page-plans .plansIntro{
  margin-top:40px;
  text-align:center;
}
.page-plans .plansIntro h2{
  margin:0;
  font-size:32px;
  font-weight:900;
  text-transform:uppercase;
  line-height:1.1;
}
.page-plans .plansIntro p{
  margin:12px auto 0;
  max-width:60ch;
  color:rgba(255,255,255,.75);
  font-size:13px;
  line-height:1.4;
}

/* cards: reaproveita look base */
.page-plans .planCard{
  border-radius:24px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  padding:18px;
}
.page-plans .planCard.featured{
  border-color:rgba(255,212,0,.35);
  background:rgba(255,212,0,.10);
}

.page-plans .planPrice{
  color:var(--yellow);
  font-weight:900;
  font-size:18px;
}

.page-plans .leadModal{
  position:fixed;
  inset:0;
  display:none;
  align-items:flex-end;
  justify-content:center;
  background:rgba(0,0,0,.70);
  padding:16px;
  z-index:999;
}
.page-plans .leadModal.isOpen{display:flex;}

.page-plans .leadSheet{
  width:100%;
  max-width:520px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.90);
  padding:18px;
}


/* =========================
   HISTORY (SCOPED)
   Usa: <body class="page-history">
   ========================= */

.page-history .historyWrap{
  margin-top:14px;
}

.page-history .historyCard{
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  overflow:hidden;
}

.page-history .historyHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,212,0,.08), rgba(255,255,255,.02));
}

.page-history .historyHeader h2{
  margin:0;
  font-size:16px;
  font-weight:900;
  letter-spacing:.8px;
  text-transform:uppercase;
}

.page-history .historySub{
  margin:2px 0 0;
  font-size:12px;
  color:rgba(255,255,255,.65);
}

.page-history .historyList{
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* item */
.page-history .hItem{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.22);
  padding:12px 12px 10px;
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.page-history .hMain{flex:1; min-width:0;}
.page-history .hRight{
  width:72px;
  text-align:right;
  font-weight:900;
  color:rgba(255,255,255,.85);
  font-variant-numeric: tabular-nums;
}

/* linha 1 */
.page-history .hTop{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.page-history .hType{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  font-size:12px;
  font-weight:900;
  letter-spacing:.6px;
  text-transform:uppercase;
}

.page-history .hType.amrap{
  border-color: rgba(255,212,0,.35);
  background: rgba(255,212,0,.10);
}

.page-history .hType.circuit{
  border-color: rgba(255,255,255,.18);
}

.page-history .hDate{
  font-size:12px;
  color:rgba(255,255,255,.65);
  white-space:nowrap;
}

/* linha 2 */
.page-history .hMeta{
  margin-top:8px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  font-size:12px;
  color:rgba(255,255,255,.78);
}

.page-history .hChip{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.80);
}

.page-history .hChip strong{
  color:#fff;
  margin-left:6px;
}

.page-history .hFeeling{
  opacity:.9;
}

/* empty */
.page-history .hEmpty{
  padding:18px;
  color:rgba(255,255,255,.65);
  font-size:13px;
}
/* =========================
   DETAILS (NICE) — FORCE STYLE
   ========================= */
.detailsNice{
  display:block;
  width:100%;
  color:#fff;
  font-size:13px;
  line-height:1.35;
}

.detailsNice .kv{
  color:#ddd;
  font-size:13px;
  line-height:1.4;
}
.detailsNice .kv strong{ color:#fff; }

.detailsNice .hr{
  height:1px;
  background:rgba(255,255,255,.08);
  margin:12px 0;
  border-radius:999px;
}

.detailsNice .sectionTitle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:10px 0 8px 0;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-size:11px;
  color:#cfcfcf;
}

/* linha "bonita" (nome + sub à esquerda, métrica à direita) */
.detailsNice .line{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:10px 10px;
  margin:8px 0;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
}

.detailsNice .leftCol{
  flex:1;
  min-width:0;
}

.detailsNice .rightCol{
  flex:0 0 auto;
  font-weight:900;
  color:#fff;
  opacity:.95;
  white-space:nowrap;
}

.detailsNice .mainName{
  font-weight:900;
  color:#fff;
  font-size:14px;
  line-height:1.2;
}

.detailsNice .subName{
  margin-top:4px;
  color:#bdbdbd;
  font-size:12px;
  line-height:1.25;
}

/* tags */
.detailsNice .tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:2px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.02em;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  margin-right:6px;
}

.detailsNice .tag.run{
  border-color:rgba(255,212,0,.35);
  background:rgba(255,212,0,.12);
  color:#ffd400;
}

/* pill (contadores) */
.detailsNice .pill,
.sectionTitle .pill{
  display:inline-flex;
  align-items:center;
  height:26px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  color:#fff;
}


/* =========================
   WORKOUT PAGE (SCOPED)
   Usa: <body class="page-workout">
   ========================= */

.page-workout .container{
  width:100%;
  max-width:1400px;
  margin:0 auto;
  padding:0 56px 240px;
}

.page-workout .title{
  font-size:18px;
  font-weight:800;
  letter-spacing:1px;
  text-transform:uppercase;
  margin:0 0 10px;
}

.page-workout .topRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

/* pills específicos do treino */
.page-workout .pillBtn{ cursor:pointer; color:#bbb; transition:.15s; }
.page-workout .pillBtn:hover{ color:#fff; }
.page-workout .pillOn{
  border-color: rgba(255,212,0,.35);
  background: rgba(255,212,0,.10);
  color:#fff;
}
.page-workout .pillOn .dot{ background:var(--yellow); }

.page-workout .timerTop{
  text-align:center;
  font-size:28px;
  font-weight:900;
  padding:14px 10px;
  border-radius:18px;
  background:rgba(255,212,0,.10);
  border:1px solid rgba(255,212,0,.25);
  margin-bottom:14px;
}

/* lista de blocos */
.page-workout .item{
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  margin-bottom:10px;
  cursor:pointer;
  position:relative;
}
.page-workout .item.run{ border-left:4px solid var(--yellow); }
.page-workout .item.active{
  background:rgba(255,212,0,.14);
  border-color:rgba(255,212,0,.35);
}
.page-workout .item.done{
  border-color:rgba(50,215,75,.35);
  background:rgba(50,215,75,.08);
}
.page-workout .item.done:after{
  content:"✓";
  position:absolute;
  right:12px;
  top:12px;
  width:22px;height:22px;
  border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(50,215,75,.18);
  border:1px solid rgba(50,215,75,.35);
  color:var(--green);
  font-weight:900;
}

.page-workout .itemHead{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-weight:800;
  padding-right:28px;
}
.page-workout .itemSub{ margin-top:6px; font-size:12px; color:#bbb; }
.page-workout .videoSlot{ margin-top:10px; display:none; }

/* vimeo */
.page-workout .vimeoWrap{
  position:relative;
  width:100%;
  padding-top:56.25%;
  border-radius:14px;
  overflow:hidden;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
}
.page-workout .vimeoWrap iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* barra fixa do treino */
.page-workout .workoutBar{
  position:fixed;
  left:0; right:0;
  bottom:62px;
  padding:10px 12px;
  z-index:999;
}
.page-workout .workoutBarInner{
  width:min(720px, calc(100% - 24px));
  margin:0 auto;
  display:flex;
  gap:12px;
  background:rgba(0,0,0,.65);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  padding:10px;
  backdrop-filter: blur(10px);
}

/* banner retomar */
.page-workout .resumeBanner{
  position:fixed;
  left:0; right:0;
  top:0;
  z-index:1000;
  padding:12px 12px;
  background:rgba(0,0,0,.78);
  border-bottom:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
}
.page-workout .resumeInner{
  width:min(720px, calc(100% - 24px));
  margin:0 auto;
}
.page-workout .resumeInner p{
  margin:0;
  color:#ddd;
  font-size:12px;
  line-height:1.2;
}
.page-workout .resumeActions{
  display:flex;
  gap:10px;
}
.page-workout .resumeActions button{
  height:36px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#fff;
  font-weight:800;
  cursor:pointer;
}
.page-workout .resumeActions .primary{
  background:var(--yellow);
  color:#000;
  border-color:rgba(255,212,0,.35);
}

/* util */
.page-workout .hidden{ display:none; }
/* =========================
   DETAIL ACTIONS (CLEAN)
   ========================= */

.detailActions{
  margin-top:18px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* botão principal */
.detailActions .btnPrimary{
  height:60px;
  border-radius:18px;
  font-size:15px;
  font-weight:900;
}

/* linha inferior */
.detailActionsRow{
  display:flex;
  gap:12px;
}

/* secundário (outline elegante) */
.btnSecondary{
  flex:1;
  height:52px;
  border-radius:16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.4px;
}
.btnSecondary:hover{
  background:rgba(255,255,255,.08);
}

/* link-style (voltar) */
.btnLink{
  flex:0 0 auto;
  height:52px;
  padding:0 18px;
  border-radius:16px;
  background:transparent;
  border:0;
  color:rgba(255,255,255,.65);
  font-weight:800;
  text-transform:uppercase;
}
.btnLink:hover{
  color:#fff;
  background:rgba(255,255,255,.06);
}


/* =========================
   HOME-LIKE BUTTONS
   ========================= */

.homeActions{
  margin-top:18px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* base */
.homeBtn{
  width:100%;
  height:66px;
  border-radius:18px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.8px;
  font-size:15px;
  cursor:pointer;
  border:0;
  transition:transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}
.homeBtn:active{ transform:scale(.99); }

/* amarelo cheio */
.homePrimary{
  background:var(--yellow);
  color:#000;
  box-shadow: 0 10px 30px rgba(255,212,0,.12);
}

/* outline amarelo */
.homeOutline{
  background:transparent;
  color:var(--yellow);
  border:2px solid rgba(255,212,0,.75);
  box-shadow: 0 10px 30px rgba(255,212,0,.06);
}
.homeOutline:hover{
  border-color: rgba(255,212,0,1);
  background: rgba(255,212,0,.06);
}

/* pill escuro (perfil/a tua conta) */
.homeSoft{
  height:58px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.80);
}
.homeSoft:hover{
  background:rgba(255,255,255,.09);
  color:#fff;
}