:root{
  --bg: #11100d;
  --bg2: #181711;
  --panel: rgba(35, 33, 26, .9);
  --panel2: rgba(43, 40, 31, .86);
  --field: rgba(255, 255, 255, .07);
  --border: rgba(245, 240, 232, .13);
  --borderStrong: rgba(245, 240, 232, .24);
  --text: #f6f1e8;
  --muted: #aaa299;
  --soft: #d4c9ba;
  --accent: #d7f463;
  --accentInk: #15170d;
  --accent2: #e5a75f;
  --good: #9bdb8b;
  --warn: #efc766;
  --bad: #ef9187;
  --shadow: 0 22px 60px rgba(0, 0, 0, .32);
  --shadowSoft: 0 10px 34px rgba(0, 0, 0, .22);
  --radius: 18px;
  --safeBottom: env(safe-area-inset-bottom);
  font-family: Aptos, "SF Pro Text", "Segoe UI", system-ui, -apple-system, sans-serif;
}

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }

html{
  min-height:100%;
  background:
    radial-gradient(circle at 20% -10%, rgba(215, 244, 99, .17), transparent 32rem),
    radial-gradient(circle at 100% 12%, rgba(229, 167, 95, .12), transparent 28rem),
    linear-gradient(180deg, #14130f 0%, var(--bg) 48%, #0c0c0a 100%);
  scroll-behavior:smooth;
}

body{
  min-height:100%;
  margin:0;
  color:var(--text);
  -webkit-font-smoothing: antialiased;
  background:
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 44px 44px;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.42;
  background-image: radial-gradient(circle at 1px 1px, rgba(246,241,232,.18) 1px, transparent 0);
  background-size: 18px 18px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.75), transparent 70%);
}

button, input, select, textarea{ font: inherit; }
button{ cursor:pointer; }
button, input, select, textarea, summary{ -webkit-tap-highlight-color: transparent; }

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

.skipLink{
  position:fixed;
  left:16px;
  top:10px;
  z-index:200;
  transform:translateY(-140%);
  background:var(--accent);
  color:var(--accentInk);
  padding:10px 12px;
  border-radius:10px;
  font-weight:800;
  text-decoration:none;
}
.skipLink:focus{ transform:translateY(0); }

#appShell{
  width:min(100%, 1040px);
  margin:0 auto;
}

.topbar{
  position: sticky;
  top: 0;
  z-index: 20;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding: calc(12px + env(safe-area-inset-top)) 16px 11px;
  background: rgba(17, 16, 13, .82);
  backdrop-filter: blur(20px) saturate(1.2);
  border-bottom: 1px solid rgba(245, 240, 232, .1);
}

.brandBlock{
  display:flex;
  align-items:center;
  min-width:0;
  flex:1 1 auto;
}

.headerActions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex:0 0 auto;
}

.accountAvatar{
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  border-radius:8px;
  color:var(--accentInk);
  background:var(--accent);
  font-size:.72rem;
  font-weight:950;
}

.brandLogo{
  display:block;
  width:min(260px, 54vw);
  height:46px;
  object-fit:contain;
  object-position:left center;
  filter:drop-shadow(0 10px 22px rgba(215, 244, 99, .1));
}

.srOnly{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}

h1, h2, h3, p{ text-wrap:pretty; }
h1{
  margin:0;
  font-size:1.1rem;
  line-height:1.05;
  letter-spacing:0;
  white-space:nowrap;
}

h2{
  margin:0 0 12px;
  font-size:1.18rem;
  line-height:1.12;
  letter-spacing:0;
}

h3{
  margin:0 0 10px;
  font-size:1rem;
  line-height:1.2;
  letter-spacing:0;
}

p{ line-height:1.52; }

.eyebrow{
  color: var(--accent);
  font-size:.72rem;
  margin:0 0 4px;
  letter-spacing:.08em;
  font-weight:800;
  text-transform:uppercase;
}

.app{
  padding:16px 14px calc(102px + var(--safeBottom));
  max-width:980px;
  margin:0 auto;
}

body.authRequired .app{
  display:grid;
  min-height:calc(100dvh - 78px);
  place-items:center;
  padding-bottom:28px;
}

.authGate{
  width:min(100%, 460px);
  padding:24px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:linear-gradient(155deg, rgba(43,40,31,.94), rgba(25,24,19,.94));
  box-shadow:var(--shadow);
}

.authGate h2{
  margin-bottom:8px;
  font-size:1.45rem;
}

.authBrandMark{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  margin-bottom:18px;
  border-radius:14px;
  color:var(--accentInk);
  background:var(--accent);
  box-shadow:0 14px 28px rgba(215,244,99,.18);
  font-size:1.35rem;
  font-weight:950;
  font-style:italic;
}

.authIntro{
  margin:0 0 18px;
  color:var(--soft);
  font-size:.92rem;
}

.authModes{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
  padding:4px;
  margin-bottom:16px;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(0,0,0,.18);
}

.authModeBtn{
  min-height:40px;
  border:0;
  border-radius:9px;
  color:var(--muted);
  background:transparent;
  font-weight:850;
}

.authModeBtn.active{
  color:var(--text);
  background:rgba(255,255,255,.09);
  box-shadow:0 4px 14px rgba(0,0,0,.16);
}

.authForm{
  display:grid;
  gap:12px;
}

.authMessage{
  margin:14px 0 0;
  padding:11px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  color:var(--muted);
  background:rgba(255,255,255,.04);
  font-size:.84rem;
}

.authMessage[data-tone="good"]{
  color:var(--good);
  border-color:rgba(155,219,139,.28);
}

.authMessage[data-tone="bad"]{
  color:#ffd4cf;
  border-color:rgba(239,145,135,.32);
}

.textBtn{
  display:block;
  margin:14px auto 0;
  border:0;
  padding:8px;
  color:var(--soft);
  background:transparent;
  font-weight:800;
}

.textBtn:hover{ color:var(--accent); }

.authFinePrint{
  margin:14px 0 0;
  color:var(--muted);
  font-size:.78rem;
  text-align:center;
}

.card,
.heroCard{
  position:relative;
  overflow:hidden;
  background: linear-gradient(160deg, var(--panel), rgba(27, 26, 21, .82));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding:16px;
  box-shadow: var(--shadowSoft);
  margin-bottom:14px;
}

.heroCard{
  padding:18px;
  background:
    radial-gradient(circle at 82% 6%, rgba(215,244,99,.16), transparent 24rem),
    linear-gradient(145deg, rgba(52, 49, 38, .94), rgba(25, 24, 19, .92));
  border-color:rgba(215,244,99,.16);
  box-shadow: var(--shadow);
}

.heroCard::after{
  content:"";
  position:absolute;
  right:-54px;
  top:-44px;
  width:170px;
  height:170px;
  border:1px solid rgba(215,244,99,.22);
  border-radius:50%;
}

.heroTop,
.between{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
}

.heroTop > div{ min-width:0; }

.heroTitle{
  margin:0;
  font-size:clamp(1.6rem, 5.2vw, 2.9rem);
  line-height:1;
  letter-spacing:0;
  white-space:nowrap;
}

.heroSub{
  max-width:62ch;
  margin:.5rem 0 0;
  color:var(--soft);
  font-size:.82rem;
  line-height:1.4;
}

.heroSub span{ display:block; }

.heroPhase{
  margin-top:0;
  color:var(--muted);
}

.heroPhase strong{
  color:var(--soft);
  font-weight:800;
}

.heroWorkoutSummary{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:start;
  gap:12px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid rgba(245,240,232,.12);
}

.heroWorkoutSummary h3{
  margin:0 0 4px;
  font-size:.94rem;
}

.heroWorkoutSummary p{
  margin:0;
  color:var(--soft);
  font-size:.78rem;
  line-height:1.45;
}

.summaryTags{
  display:flex;
  align-items:center;
  gap:6px;
}

.heroWorkoutSummary .pill,
.heroWorkoutSummary .badgeDay{
  padding:4px 7px;
  font-size:.7rem;
}

.heroCard > .warnBox{
  position:relative;
  z-index:1;
  margin-top:10px;
  font-size:.8rem;
}

.programMark{
  display:grid;
  place-items:center;
  min-width:64px;
  height:64px;
  border-radius:16px;
  color:var(--accentInk);
  background:var(--accent);
  font-size:1.2rem;
  font-weight:950;
  font-variant-numeric: tabular-nums;
  box-shadow:0 16px 34px rgba(215,244,99,.22);
}

.heroMetrics,
.metricGrid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
  margin-top:16px;
}

.metricGrid.two{ grid-template-columns:repeat(2, minmax(0, 1fr)); }

.metricTile,
.subcard{
  background: rgba(255,255,255,.055);
  border:1px solid rgba(245,240,232,.1);
  border-radius:14px;
  padding:12px;
  min-width:0;
}

.metricTile strong,
.bigMetric{
  display:block;
  font-size:1.55rem;
  line-height:1;
  font-weight:900;
  letter-spacing:0;
  font-variant-numeric: tabular-nums;
}

.metricTile span,
.metricLabel{
  display:block;
  color:var(--muted);
  font-size:.72rem;
  margin-top:7px;
  text-transform:uppercase;
  letter-spacing:.07em;
  font-weight:800;
}

.controlsStrip{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
  gap:10px;
  margin-top:16px;
}

.sectionLead{
  margin:0 0 12px;
  color:var(--soft);
}

.subcard{ margin:10px 0; }

.grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;
}

.grid3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
}

.stack{ margin-top:12px; }
.formActions{ margin-top:12px; }

.row{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:1px solid var(--border);
  border-radius:12px;
  padding:6px 9px;
  color:var(--soft);
  background:rgba(255,255,255,.055);
  font-size:.78rem;
  font-weight:800;
}

.pill.good{ color:var(--good); border-color:rgba(155,219,139,.24); }
.pill.warn{ color:var(--warn); border-color:rgba(239,199,102,.25); }
.pill.bad{ color:var(--bad); border-color:rgba(239,145,135,.25); }

.tiny,
.muted{
  color:var(--muted);
  font-size:.84rem;
  margin:.35rem 0;
}

input, select, textarea{
  width:100%;
  color:var(--text);
  background: var(--field);
  border:1px solid var(--border);
  border-radius: 12px;
  padding:12px 12px;
  outline:none;
  min-height:44px;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

textarea{ resize:vertical; }
input::placeholder, textarea::placeholder{ color:rgba(212,201,186,.48); }

input:focus, select:focus, textarea:focus{
  border-color: var(--accent);
  background:rgba(255,255,255,.09);
  box-shadow:0 0 0 4px rgba(215,244,99,.14);
}

label{
  display:block;
  color:var(--muted);
  font-size:.72rem;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:6px;
}

.primaryBtn,
.ghostBtn,
.dangerBtn,
.iconBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 13px;
  color:var(--text);
  background: rgba(255,255,255,.07);
  font-weight:850;
  text-decoration:none;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}

.primaryBtn{
  color:var(--accentInk);
  background: linear-gradient(135deg, var(--accent), #f1d785);
  border-color:rgba(215,244,99,.45);
  box-shadow:0 14px 26px rgba(215,244,99,.14);
}

.dangerBtn{
  background: rgba(239,145,135,.11);
  color:#ffd4cf;
  border-color:rgba(239,145,135,.3);
}

.ghostBtn,
.iconBtn{ background:rgba(255,255,255,.055); }

.primaryBtn:hover,
.ghostBtn:hover,
.dangerBtn:hover,
.iconBtn:hover{
  transform:translateY(-1px);
  border-color:var(--borderStrong);
}

.primaryBtn:active,
.ghostBtn:active,
.dangerBtn:active,
.iconBtn:active{
  transform:translateY(1px) scale(.99);
}

button:disabled{
  cursor:wait;
  opacity:.62;
  transform:none !important;
}

.full{ width:100%; }

.bottomNav{
  position:fixed;
  left:50%;
  bottom:0;
  z-index:30;
  width:min(100%, 980px);
  transform:translateX(-50%);
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:4px;
  padding:8px 8px calc(8px + var(--safeBottom));
  background: rgba(17,16,13,.88);
  backdrop-filter: blur(20px) saturate(1.25);
  border-top:1px solid var(--border);
}

.navItem{
  display:flex;
  min-width:0;
  min-height:56px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  border:0;
  border-radius:14px;
  padding:7px 3px;
  background:transparent;
  color:var(--muted);
  font-size:.7rem;
  font-weight:850;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}

.navIcon{
  display:grid;
  place-items:center;
  width:20px;
  height:20px;
  border-radius:7px;
  font-size:.68rem;
  font-weight:950;
  color:inherit;
  border:1px solid currentColor;
  opacity:.86;
}

.navItem.active{
  color:var(--accent);
  background:rgba(215,244,99,.1);
}

.navItem:active{ transform:scale(.98); }

.exerciseTitle{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}

.exerciseTitle h3{ margin:0; }
.target{ color:var(--muted); font-size:.85rem; margin-top:5px; }

.setGrid{
  display:grid;
  grid-template-columns: 44px 1fr 1fr 1fr 58px;
  gap:8px;
  align-items:end;
  margin-top:10px;
}

.setGrid .setNumber{
  color:var(--accent);
  font-weight:900;
  padding-bottom:13px;
  font-variant-numeric:tabular-nums;
}

.checkCell{
  display:flex;
  align-items:center;
  justify-content:center;
  padding-bottom:8px;
}

.checkCell input{
  width:28px;
  height:28px;
  min-height:28px;
  accent-color:var(--accent);
}

.statusText,
.advice{
  color:var(--soft);
  font-size:.86rem;
  line-height:1.45;
  margin-top:12px;
}

.accountInitial{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  flex:0 0 auto;
  border-radius:12px;
  color:var(--accentInk);
  background:var(--accent);
  font-size:1rem;
  font-weight:950;
}

.syncStatus{
  margin:12px 0 0;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  color:var(--muted);
  background:rgba(255,255,255,.035);
  font-size:.82rem;
}

.syncStatus[data-tone="good"]{
  color:var(--good);
  border-color:rgba(155,219,139,.24);
}

.syncStatus[data-tone="warn"]{
  color:var(--warn);
  border-color:rgba(239,199,102,.25);
}

.accountActions{ margin-top:12px; }

.advice{
  padding:11px 12px;
  border-radius:12px;
  background:rgba(215,244,99,.07);
  border:1px solid rgba(215,244,99,.13);
}

.tableWrap{
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:14px;
}

table{
  width:100%;
  border-collapse:collapse;
  font-size:.88rem;
  font-variant-numeric:tabular-nums;
}

th, td{
  border-bottom:1px solid var(--border);
  padding:11px 9px;
  text-align:left;
  vertical-align:top;
}

th{
  color:var(--muted);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.06em;
}

canvas{
  width:100%;
  height:220px;
  border-radius:14px;
  background:rgba(255,255,255,.035);
}

.notice,
.warnBox,
.emptyState{
  padding:12px;
  background:rgba(255,255,255,.045);
  border:1px solid var(--border);
  border-left:4px solid var(--accent);
  border-radius:12px;
  color:var(--soft);
}

.warnBox{
  border-left-color:var(--warn);
  background:rgba(239,199,102,.08);
  color:#f8e8bb;
}

.emptyState{
  border-left-color:var(--muted);
  margin:0;
}

.modal{
  position:fixed;
  inset:0;
  z-index:100;
  background:rgba(0,0,0,.66);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
}

.modal.hidden{ display:none; }

.modalCard{
  width:min(480px,100%);
  background:#1d1b15;
  border:1px solid var(--borderStrong);
  border-radius:20px;
  padding:20px;
  box-shadow: var(--shadow);
  position:relative;
}

.closeBtn{
  position:absolute;
  top:10px;
  right:10px;
  width:36px;
  height:36px;
  border-radius:11px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.07);
  color:var(--text);
  font-size:1rem;
  font-weight:900;
}

.toast{
  position:fixed;
  left:50%;
  bottom:calc(88px + var(--safeBottom));
  z-index:120;
  transform:translateX(-50%);
  width:min(calc(100% - 28px), 440px);
  padding:12px 14px;
  border-radius:14px;
  color:var(--text);
  background:rgba(31, 29, 22, .94);
  border:1px solid var(--borderStrong);
  box-shadow:var(--shadow);
  font-weight:800;
  text-align:center;
}

.toast.hidden{ display:none; }
.toast.good{ border-color:rgba(155,219,139,.35); }
.toast.bad{ border-color:rgba(239,145,135,.4); color:#ffd4cf; }

details{
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  background:rgba(255,255,255,.035);
  margin-bottom:10px;
}

summary{
  font-weight:850;
  cursor:pointer;
}

.exerciseNotes{
  margin:12px 0 0;
  padding:0;
  overflow:hidden;
}

.exerciseNotes summary{
  padding:11px 12px;
  color:var(--soft);
  font-size:.76rem;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.exerciseNotes[open] summary{
  border-bottom:1px solid var(--border);
}

.exerciseNotesField{ padding:12px; }

.phaseList{ padding-left:18px; }
.phaseList li{ margin:8px 0; }
hr{ border:0; border-top:1px solid var(--border); margin:14px 0; }

.badgeDay{
  color:var(--accentInk);
  background:var(--accent);
  border-radius:11px;
  padding:5px 8px;
  font-size:.78rem;
  font-weight:950;
}

.footerSpace{ height:12px; }

@media (min-width:760px){
  .topbar{ border-inline:1px solid rgba(245,240,232,.06); }
  .app{ padding-inline:20px; }
}

@media (max-width:700px){
  .heroMetrics,
  .metricGrid,
  .metricGrid.two,
  .grid,
  .grid3,
  .controlsStrip{
    grid-template-columns:1fr;
  }
}

@media (max-width:520px){
  .app{ padding-inline:12px; }
  .heroCard{ padding:16px; }
  .brandLogo{
    width:min(190px, 48vw);
    height:40px;
  }
  .programMark{
    min-width:54px;
    height:54px;
    border-radius:14px;
  }
  .heroWorkoutSummary{
    grid-template-columns:1fr;
    gap:8px;
  }
  .summaryTags{ justify-content:flex-start; }
  .setGrid{
    grid-template-columns: 38px 1fr 1fr;
  }
  .setGrid .rpeCell{ grid-column:2; }
  .setGrid .checkCell{
    grid-column:3;
    justify-content:flex-start;
  }
  .navItem{ font-size:.66rem; }
  .btnLabel,
  .accountLabel{ display:none; }
  .headerActions .iconBtn{
    width:44px;
    padding-inline:8px;
  }
  .authGate{ padding:20px; }
}

@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
  }
}