:root{
  --bg:#050505;
  --panel:#0f0f0f;
  --panel-alt:#151515;
  --line:#1f78ff;
  --line-soft:rgba(31,120,255,.24);
  --text:#ffffff;
  --muted:#c6c6c6;
  --accent:#2f86ff;
  --shadow:0 16px 40px rgba(0,0,0,.35);
}

body.timer-scheme-emerald{
  --line:#26c485;
  --line-soft:rgba(38,196,133,.26);
  --accent:#5fe0a2;
}

body.timer-scheme-crimson{
  --line:#ff4d6d;
  --line-soft:rgba(255,77,109,.28);
  --accent:#ff7180;
}

body.timer-scheme-gold{
  --line:#f2b84b;
  --line-soft:rgba(242,184,75,.28);
  --accent:#ffd166;
}

body.timer-scheme-high-contrast{
  --bg:#000000;
  --panel:#050505;
  --panel-alt:#0b0b0b;
  --line:#ffffff;
  --line-soft:rgba(255,255,255,.32);
  --accent:#ffffff;
  --muted:#e5e5e5;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  min-height:100%;
  font-family:'IBM Plex Sans', system-ui, sans-serif;
  background:
    radial-gradient(circle at top left, rgba(31,120,255,.14), transparent 32%),
    radial-gradient(circle at top right, rgba(47,134,255,.10), transparent 26%),
    linear-gradient(180deg, #090909 0%, #040404 100%);
  color:var(--text);
  display:flex;
  flex-direction:column;
  gap:20px;
  padding:20px;
}

body.auth-pending .hero-shell,
body.auth-pending .layout,
body.access-pending > :not(.access-gate){
  display:none;
}

.auth-gate,
.access-gate{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.auth-gate[hidden],
.access-gate[hidden]{
  display:none;
}

.auth-gate > div,
.access-gate > div{
  width:min(100%, 560px);
  padding:30px;
  border:2px solid var(--line-soft);
  border-radius:24px;
  background:linear-gradient(180deg, rgba(18,18,18,.98), rgba(10,10,10,.98));
  box-shadow:var(--shadow);
}

.auth-gate h1,
.access-gate h1{
  margin:0 0 12px;
  font-family:'Barlow Condensed', sans-serif;
  font-size:clamp(2.8rem, 7vw, 5.4rem);
  line-height:.9;
  text-transform:uppercase;
}

.auth-gate p,
.access-gate p{
  margin:0;
  color:var(--muted);
  line-height:1.6;
}

.auth-kicker{
  margin:0 0 12px !important;
  color:var(--accent) !important;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.tier-access-message{
  margin:0 0 16px;
  padding:14px 16px;
  border:1px solid rgba(47,134,255,.42);
  border-radius:16px;
  background:rgba(47,134,255,.10);
  color:#d8e7ff;
  font-weight:700;
  line-height:1.5;
}

.guest-upgrade-message{
  display:grid;
  gap:14px;
  align-items:start;
  justify-items:start;
  margin:0 0 16px;
  padding:16px 18px;
  border:1px solid rgba(47,134,255,.42);
  border-radius:18px;
  background:linear-gradient(135deg, rgba(47,134,255,.14), rgba(255,255,255,.04));
  color:#dbe9ff;
  line-height:1.55;
}

.guest-upgrade-message[hidden]{
  display:none;
}

.guest-upgrade-message p{
  margin:0;
}

.guest-upgrade-message strong{
  color:#fff;
}

.is-tier-locked{
  position:relative;
  opacity:.56;
}

.is-tier-locked .home-accordion-toggle{
  cursor:not-allowed;
}

.tier-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:58px;
  min-height:28px;
  padding:4px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--accent);
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.ad-page{
  justify-content:center;
}

.ad-shell{
  width:min(100%, 760px);
  margin:auto;
}

.ad-card{
  display:grid;
  gap:18px;
  padding:clamp(24px, 5vw, 42px);
  border:2px solid var(--line-soft);
  border-radius:28px;
  background:linear-gradient(180deg, rgba(18,18,18,.98), rgba(6,6,6,.99));
  box-shadow:var(--shadow);
  text-align:center;
}

.ad-logo{
  width:min(100%, 360px);
  margin:0 auto 4px;
}

.custom-brand-logo{
  max-height:170px;
  object-fit:contain;
}

.has-custom-timer-branding header .brand-logo{
  width:min(100%, 340px);
  max-height:170px;
  object-fit:contain;
}

.repit-brand-footer{
  display:grid;
  justify-items:center;
  gap:12px;
  width:100%;
  margin-top:28px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.10);
}

.repit-footer-logo{
  display:block;
  width:min(100%, 240px);
  height:auto;
}

.branding-logo-preview{
  display:grid;
  gap:8px;
  justify-items:start;
  margin-top:14px;
}

.branding-logo-preview img{
  max-width:min(100%, 280px);
  max-height:150px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  background:#050505;
  object-fit:contain;
  padding:12px;
}

.branding-clear-logo{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:14px;
  color:var(--muted);
}

.ad-card h1{
  margin:0;
  font-family:'Barlow Condensed', sans-serif;
  font-size:clamp(3rem, 8vw, 5.4rem);
  line-height:.88;
  text-transform:uppercase;
}

.ad-kicker{
  margin:0 0 8px;
  color:var(--blue-strong);
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.ad-copy,
.ad-promo p{
  margin:0 auto;
  max-width:58ch;
  color:var(--muted);
  line-height:1.65;
}

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

.ad-launch-grid article{
  display:grid;
  gap:6px;
  min-height:96px;
  align-content:center;
  padding:18px;
  border:1px solid rgba(47,134,255,.22);
  border-radius:18px;
  background:rgba(255,255,255,.035);
}

.ad-launch-grid span{
  color:var(--muted);
  font-size:.74rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.ad-launch-grid strong{
  color:var(--text);
  font-family:'Barlow Condensed', sans-serif;
  font-size:clamp(1.55rem, 4vw, 2.35rem);
  line-height:1;
  text-transform:uppercase;
}

.ad-promo{
  display:grid;
  gap:12px;
  padding:18px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  background:rgba(255,255,255,.04);
}

.ad-promo h2{
  margin:0;
  font-family:'Barlow Condensed', sans-serif;
  font-size:clamp(2rem, 5vw, 3rem);
  line-height:.95;
  text-transform:uppercase;
}

.ad-promo .primary,
.ad-actions{
  justify-self:center;
}

.ad-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
}

.ad-promo .primary,
.ad-back,
.ad-continue{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:12px 18px;
  border:2px solid var(--line);
  border-radius:14px;
  color:var(--text);
  font-family:'Barlow Condensed', sans-serif;
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:.08em;
  text-decoration:none;
  text-transform:uppercase;
}

.ad-back{
  border-color:rgba(255,255,255,.22);
  background:rgba(255,255,255,.04);
}

@media (max-width: 620px){
  .ad-launch-grid{
    grid-template-columns:1fr;
  }

  .ad-actions,
  .ad-back,
  .ad-continue{
    width:100%;
  }
}

.home-accordion-toggle .tier-pill{
  justify-self:end;
  margin-right:40px;
  grid-column:2;
  grid-row:1;
}

.home-accordion-toggle .accordion-icon{
  justify-self:end;
  grid-column:2;
  grid-row:1;
}

.is-tier-locked-control{
  opacity:.62;
  cursor:not-allowed;
}

.repit-account-nav{
  position:fixed;
  top:18px;
  right:18px;
  z-index:60;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
}

.repit-account-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:9px 14px;
  border-radius:999px;
  border:2px solid rgba(31,120,255,.45);
  background:rgba(0,0,0,.82);
  color:var(--text);
  text-decoration:none;
  font-family:'Barlow Condensed', sans-serif;
  font-size:.94rem;
  font-weight:800;
  letter-spacing:.1em;
  line-height:1;
  text-transform:uppercase;
  box-shadow:0 12px 28px rgba(0,0,0,.28);
  cursor:pointer;
}

.repit-account-link:hover{
  border-color:#2f86ff;
  background:rgba(31,120,255,.18);
}

.repit-display-home-link{
  position:fixed;
  top:18px;
  left:18px;
  z-index:60;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 18px;
  border-radius:999px;
  border:2px solid rgba(31,120,255,.45);
  background:rgba(0,0,0,.82);
  color:var(--text);
  text-decoration:none;
  font-family:'Barlow Condensed', sans-serif;
  font-size:1rem;
  font-weight:800;
  letter-spacing:.1em;
  line-height:1;
  text-transform:uppercase;
  box-shadow:0 12px 28px rgba(0,0,0,.28);
}

.repit-display-home-link:hover{
  border-color:#2f86ff;
  background:rgba(31,120,255,.18);
}

.repit-display-page #homeBtn{
  display:none;
}

.hero-shell{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:14px;
  text-align:center;
}

.brand-logo{
  display:block;
  width:min(100%, 360px);
  height:auto;
}

.motto-strip{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(10px, 2vw, 24px);
  flex-wrap:wrap;
  color:var(--accent);
  font-size:clamp(.68rem, 1.2vw, .9rem);
  font-weight:800;
  letter-spacing:.32em;
  line-height:1.2;
  text-align:center;
  text-transform:uppercase;
}

.motto-muted{
  color:#798292;
}

.motto-dot{
  width:5px;
  height:5px;
  border-radius:999px;
  background:var(--accent);
  box-shadow:0 0 12px rgba(47,134,255,.7);
}

.eastern-clock{
  color:var(--text);
  font-weight:700;
  font-variant-numeric:tabular-nums;
  padding:8px 14px;
  border-radius:999px;
  border:2px solid var(--line);
  background:rgba(0,0,0,.7);
  font-size:1rem;
  box-shadow:var(--shadow);
}

.layout{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.card{
  background:linear-gradient(180deg, rgba(18,18,18,.98), rgba(10,10,10,.98));
  border:2px solid var(--line-soft);
  border-radius:24px;
  box-shadow:var(--shadow);
}

.hero{
  display:flex;
  justify-content:flex-start;
  align-items:flex-start;
  padding:22px 28px;
}

.hero-stat{
  background:linear-gradient(180deg, rgba(31,120,255,.12), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.07);
  border-radius:20px;
  padding:18px;
}

.hero-stat-inline{
  min-width:min(100%, 320px);
}

.hero-label{
  display:block;
  margin-bottom:10px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.78rem;
}

.main-clock{
  color:var(--text);
  font-weight:800;
  font-variant-numeric:tabular-nums;
  padding:10px 14px;
  border-radius:16px;
  border:2px solid var(--line);
  background:#000;
  font-size:2.2rem;
  text-align:center;
}

.tabs-shell{
  padding:20px;
}

.tab-list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:20px;
}

.tab-button{
  border:2px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:var(--muted);
  padding:12px 16px;
  border-radius:999px;
  font-family:'Barlow Condensed', sans-serif;
  font-size:1.1rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease, transform .18s ease, color .18s ease;
}

.tab-button:hover{
  transform:translateY(-1px);
  border-color:rgba(31,120,255,.45);
  color:var(--text);
}

.tab-button.is-active{
  color:var(--text);
  background:linear-gradient(135deg, rgba(31,120,255,.92), rgba(11,78,214,.92));
  border-color:rgba(31,120,255,.92);
}

.tab-panels{
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:20px;
}

.tab-panel{
  display:none;
}

.tab-panel.is-active{
  display:block;
}

.panel-header{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(260px, .85fr);
  gap:20px;
  align-items:end;
  margin-bottom:22px;
}

.panel-kicker{
  margin:0 0 6px;
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.76rem;
  font-weight:700;
}

.panel-header h2{
  margin:0;
  font-family:'Barlow Condensed', sans-serif;
  font-size:clamp(2rem, 4vw, 3rem);
  text-transform:uppercase;
  letter-spacing:.04em;
}

.panel-text{
  margin:0;
  color:var(--muted);
  font-size:1rem;
  line-height:1.6;
}

.quick-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
}

.home-accordions{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.home-accordion{
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01));
  overflow:hidden;
}

.home-accordion[open]{
  border-color:rgba(31,120,255,.28);
  box-shadow:0 12px 28px rgba(0,0,0,.22);
}

.home-accordion-toggle{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  gap:18px;
  cursor:pointer;
  list-style:none;
  padding:20px 22px;
}

.home-accordion-toggle > div{
  min-width:0;
}

.home-accordion-toggle::-webkit-details-marker{
  display:none;
}

.home-accordion-toggle h2{
  margin:0;
  font-family:'Barlow Condensed', sans-serif;
  font-size:clamp(1.8rem, 3.4vw, 2.7rem);
  text-transform:uppercase;
  letter-spacing:.04em;
}

.accordion-icon{
  position:relative;
  width:18px;
  height:18px;
  flex:0 0 auto;
}

.accordion-icon::before,
.accordion-icon::after{
  content:"";
  position:absolute;
  top:50%;
  left:0;
  width:18px;
  height:2px;
  background:var(--accent);
  border-radius:999px;
  transform:translateY(-50%);
  transition:transform .18s ease, opacity .18s ease;
}

.accordion-icon::after{
  transform:translateY(-50%) rotate(90deg);
}

.home-accordion[open] .accordion-icon::after{
  opacity:0;
  transform:translateY(-50%) rotate(90deg) scaleX(.2);
}

.home-accordion-body{
  padding:0 22px 22px;
  border-top:1px solid rgba(255,255,255,.08);
}

.home-accordion-body > .panel-text,
.home-accordion-body .library-intro{
  margin:16px 0 0;
}

.home-accordion-body .quick-grid,
.home-accordion-body .library-shell{
  margin-top:18px;
}

.saved-class-section{
  margin-top:22px;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.saved-class-heading{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(280px, .95fr);
  gap:20px;
  align-items:end;
}

.saved-class-heading h3{
  margin:0;
  font-family:'Barlow Condensed', sans-serif;
  font-size:clamp(1.6rem, 3vw, 2.3rem);
  text-transform:uppercase;
  letter-spacing:.04em;
}

.saved-class-grid{
  display:grid;
  grid-template-columns:repeat(7, minmax(0, 1fr));
  gap:12px;
}

.saved-class-slot{
  min-width:0;
  min-height:170px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:10px;
  padding:16px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(47,134,255,.08), rgba(255,255,255,.02));
  text-align:left;
  box-shadow:none;
}

.saved-class-slot:hover{
  box-shadow:0 10px 24px rgba(0,0,0,.24);
}

.saved-class-slot.is-empty{
  background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01));
  border-style:dashed;
  color:var(--text);
  cursor:default;
}

.saved-class-slot.is-empty:hover{
  transform:none;
  box-shadow:none;
}

.saved-class-slot-number{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.14);
  color:var(--muted);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.saved-class-slot h4{
  margin:0;
  font-family:'Barlow Condensed', sans-serif;
  font-size:1.5rem;
  line-height:1;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.saved-class-slot p{
  margin:0;
  color:var(--muted);
  line-height:1.5;
}

.section-heading{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(280px, .95fr);
  gap:20px;
  align-items:end;
  margin-bottom:18px;
}

.quick-card,
.feature-card,
.preset-card,
.open-preset-card{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  padding:18px;
}

.quick-card.accent-clock{
  background:linear-gradient(180deg, rgba(47,134,255,.10), rgba(255,255,255,.02));
}

.quick-label{
  display:inline-flex;
  margin-bottom:10px;
  color:var(--accent);
  font-size:.75rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.18em;
}

.quick-card h3,
.feature-card h3,
.preset-card h4,
.open-year-header h3{
  margin:0 0 10px;
  font-family:'Barlow Condensed', sans-serif;
  font-size:1.55rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.quick-card p,
.feature-card p,
.preset-card p,
.open-preset-card p{
  margin:0;
  color:var(--muted);
  line-height:1.6;
}

.quick-actions,
.panel-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:18px;
}

.feature-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
}

.preset-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:16px;
}

.library-shell{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.library-intro{
  margin:0;
  color:var(--muted);
  font-size:1rem;
  line-height:1.7;
}

.library-controls{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
  align-items:end;
}

.filter-field{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.filter-field span{
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.76rem;
  font-weight:700;
}

.filter-field select,
.filter-field input{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.72);
  color:var(--text);
  padding:12px 14px;
  font:inherit;
}

.filter-field input::placeholder{
  color:#8c8c8c;
}

.results-count{
  margin:0;
  color:var(--muted);
  justify-self:end;
  align-self:center;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.76rem;
  font-weight:700;
}

.workout-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
}

.workout-card{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  padding:18px;
  min-height:100%;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.workout-card:hover,
.workout-card:focus-visible{
  outline:none;
  transform:translateY(-1px);
  border-color:rgba(31,120,255,.45);
  box-shadow:0 10px 24px rgba(0,0,0,.24);
}

.workout-card.is-selected{
  border-color:rgba(31,120,255,.72);
  box-shadow:0 0 0 1px rgba(31,120,255,.24), 0 14px 30px rgba(0,0,0,.26);
}

.workout-card h4{
  margin:0 0 10px;
  font-family:'Barlow Condensed', sans-serif;
  font-size:1.5rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.workout-detail{
  background:linear-gradient(180deg, rgba(31,120,255,.09), rgba(255,255,255,.02));
  border:1px solid rgba(31,120,255,.24);
  border-radius:22px;
  padding:22px;
}

.workout-detail.is-empty{
  border-style:dashed;
  color:var(--muted);
}

.detail-header{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
  margin-bottom:14px;
  flex-wrap:wrap;
}

.detail-header h3{
  margin:0;
  font-family:'Barlow Condensed', sans-serif;
  font-size:2rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.detail-badges,
.detail-meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.detail-copy{
  margin:0 0 14px;
  color:var(--muted);
  line-height:1.7;
}

.detail-prescription{
  margin:14px 0 0;
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.38);
  color:var(--text);
  font:inherit;
  white-space:pre-wrap;
  line-height:1.7;
}

.ghost-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:12px 16px;
  border-radius:14px;
  border:2px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.02);
  color:var(--text);
  text-decoration:none;
  font-family:'Barlow Condensed', sans-serif;
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.ghost-link:hover{
  transform:translateY(-1px);
  border-color:rgba(31,120,255,.45);
}

.preset-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
  flex-wrap:wrap;
}

.open-toolbar{
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:18px;
}

.open-caption{
  margin:0;
  color:var(--muted);
  max-width:58ch;
}

.open-legend{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.legend-pill,
.preset-code{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:6px 10px;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.legend-pill{
  border:1px solid rgba(255,255,255,.14);
  color:var(--muted);
}

.legend-official{
  border-color:rgba(47,134,255,.42);
  color:var(--accent);
}

.legend-best-fit{
  border-color:rgba(31,120,255,.45);
  color:#86b8ff;
}

.preset-code{
  background:rgba(255,255,255,.05);
  color:var(--text);
}

.open-years{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
}

.open-year{
  padding:18px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.08);
}

.open-year-header{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}

.open-year-header h3{
  margin:0;
}

.open-year-header p{
  margin:0;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.76rem;
}

.open-preset-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}

.preset-summary{
  font-weight:700;
  color:var(--text) !important;
  margin-bottom:8px !important;
}

.preset-note{
  font-size:.92rem;
}

button{
  cursor:pointer;
  border:2px solid var(--line);
  background:#000;
  color:var(--text);
  border-radius:14px;
  padding:12px 16px;
  font-family:'Barlow Condensed', sans-serif;
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}

button:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(31,120,255,.22);
}

.primary{
  background:linear-gradient(135deg, #1f78ff, #0b4ed6);
}

.ghost{
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.02);
}

.danger{
  border-color:rgba(255,95,95,.45);
  background:rgba(255,95,95,.12);
  color:#ffd2d1;
}

.saved-timer-empty{
  grid-column:1 / -1;
}

.saved-timer-card h3{
  word-break:break-word;
}

footer{
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:.94rem;
}

.theme-links{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.theme-links a,
.theme-current{
  color:var(--text);
  text-decoration:none;
  border-bottom:1px solid transparent;
}

.theme-links a:hover{
  border-color:var(--line);
}

.theme-current{
  color:var(--accent);
}

@media (max-width: 980px){
  .library-controls,
  .panel-header,
  .section-heading,
  .saved-class-heading,
  .quick-grid,
  .feature-grid,
  .preset-grid,
  .workout-grid,
  .open-years,
  .open-preset-grid{
    grid-template-columns:1fr;
  }

  .saved-class-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .results-count{
    justify-self:start;
  }
}

@media (max-width: 640px){
  body{
    padding:14px;
    gap:16px;
  }

  .hero,
  .tabs-shell{
    padding:16px;
    border-radius:18px;
  }

  .home-accordion-toggle,
  .home-accordion-body{
    padding-left:16px;
    padding-right:16px;
  }

  .tab-list{
    gap:8px;
  }

  .tab-button{
    font-size:.98rem;
    padding:10px 14px;
  }

  .main-clock{
    font-size:1.75rem;
  }

  .detail-header h3{
    font-size:1.7rem;
  }

  .workout-detail{
    padding:18px;
  }

  .saved-class-grid{
    grid-template-columns:1fr;
  }
}
