*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --orange:#ff6b35;--orange-dark:#e85520;--black:#0a0a0a;--dark:#111;--dark2:#1a1a1a;
  --border:#2a2a2a;--text:#f5f5f5;--muted:#888;--white:#fff;--green:#22c55e;--radius:12px;--max:1100px;
}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;background:var(--black);color:var(--text);line-height:1.6}
img{max-width:100%}
a{color:var(--orange);text-decoration:none}
.container{max-width:var(--max);margin:0 auto;padding:0 1.25rem}

/* ─── Header ─────────────────────────────────────────────────── */
.site-header{background:rgba(10,10,10,0.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:0.75rem 1.25rem}
.logo{display:flex;align-items:center;gap:0.6rem;text-decoration:none}
.logo-img{height:75px;width:auto;display:block}
.logo-wordmark{font-family:'Bebas Neue',sans-serif;font-size:1.4rem;color:var(--white);letter-spacing:0.08em;line-height:1}
.logo-wordmark span{color:var(--orange)}
.main-nav{display:flex;align-items:center;gap:2rem}
.main-nav a{font-size:0.9rem;color:var(--muted);font-weight:500;transition:color 0.2s}
.main-nav a:hover{color:var(--text)}
.btn-nav{background:var(--orange)!important;color:var(--white)!important;padding:0.5rem 1.25rem;border-radius:8px;font-weight:700}
.nav-toggle{display:none;background:none;border:none;color:var(--text);font-size:1.4rem;cursor:pointer}

/* ─── Hero ──────────────────────────────────────────────────── */
.hero{background:radial-gradient(ellipse at 70% 50%,#1a0800 0%,var(--black) 60%);padding:5rem 0;overflow:hidden}
.hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.hero-badge{display:inline-block;background:rgba(255,107,53,0.15);border:1px solid var(--orange);color:var(--orange);padding:0.4rem 1rem;border-radius:999px;font-size:0.8rem;font-weight:600;margin-bottom:1.5rem}
.hero h1{font-family:'Bebas Neue',sans-serif;font-size:clamp(3rem,7vw,5rem);line-height:1;margin-bottom:1.5rem;letter-spacing:0.02em}
.highlight{color:var(--orange)}
.hero-sub{font-size:1.05rem;color:var(--muted);margin-bottom:2rem;line-height:1.7}
.hero-cta{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:2.5rem}
.hero-stats{display:flex;gap:2rem}
.hero-stat{text-align:center}
.hero-stat span{display:block;font-family:'Bebas Neue',sans-serif;font-size:2rem;color:var(--orange)}
.hero-stat small{font-size:0.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.05em}

/* ─── Timer Ring ─────────────────────────────────────────────── */
.hero-timer-demo{display:flex;justify-content:center;cursor:pointer}
.timer-ring{position:relative;width:240px;height:240px}
.timer-svg{width:100%;height:100%;transform:rotate(-90deg)}
.timer-bg{fill:none;stroke:var(--dark2);stroke-width:12}
.timer-progress{fill:none;stroke:var(--orange);stroke-width:12;stroke-linecap:round;stroke-dashoffset:0;transition:stroke-dashoffset 1s linear}
.timer-display{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.timer-num{font-family:'Bebas Neue',sans-serif;font-size:4rem;color:var(--white);line-height:1}
.timer-label{font-size:0.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.1em}

/* ─── Sections ──────────────────────────────────────────────── */
.section{padding:5rem 0}
.section-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(2rem,5vw,3rem);letter-spacing:0.05em;text-align:center;margin-bottom:2.5rem}
.section-sub{text-align:center;color:var(--muted);margin-bottom:2rem;font-size:1rem}
.page-hero{background:linear-gradient(180deg,#1a0800 0%,var(--black) 100%);padding:3.5rem 0;text-align:center}
.page-hero h1{font-family:'Bebas Neue',sans-serif;font-size:3rem;color:var(--white);margin-bottom:0.5rem}
.page-hero p{color:var(--muted)}

/* ─── Exercises Grid ────────────────────────────────────────── */
.exercises-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem}
.exercise-card{background:var(--dark);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem 1rem;text-align:center;cursor:pointer;transition:all 0.2s;text-decoration:none;color:var(--text);display:block}
.exercise-card:hover{border-color:var(--orange);transform:translateY(-3px);background:#1a0f08}
.ex-emoji{font-size:2rem;margin-bottom:0.5rem}
.ex-img{height:80px;object-fit:contain;border-radius:8px;margin-bottom:0.5rem}
.ex-img-xs{width:20px;height:20px;object-fit:contain;border-radius:4px;vertical-align:middle}
.ex-img-sm{width:32px;height:32px;object-fit:contain;border-radius:6px;vertical-align:middle}
.ex-img-md{width:80px;height:80px;object-fit:contain;border-radius:12px}
.ex-name{font-weight:700;font-size:0.9rem;margin-bottom:0.25rem}
.ex-muscle{font-size:0.75rem;color:var(--muted);margin-bottom:0.25rem}
.ex-desc{font-size:0.72rem;color:var(--muted);line-height:1.4;margin-bottom:0.5rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ex-cta{font-size:0.75rem;color:var(--orange);font-weight:600}

/* ─── How Section ────────────────────────────────────────────── */
.how-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem}
.how-card{background:var(--dark);border:1px solid var(--border);border-radius:var(--radius);padding:2rem}
.how-num{font-family:'Bebas Neue',sans-serif;font-size:3rem;color:var(--orange);opacity:0.4;line-height:1;margin-bottom:0.75rem}
.how-card h3{font-weight:700;margin-bottom:0.5rem}
.how-card p{color:var(--muted);font-size:0.9rem}

/* ─── Leaderboard Preview ────────────────────────────────────── */
.leaderboard-preview{background:var(--dark);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.lb-table{width:100%}
.lb-row{display:grid;grid-template-columns:50px 1fr 1fr 100px;padding:1rem 1.5rem;border-bottom:1px solid var(--border);align-items:center}
.lb-row:last-child{border-bottom:none}
.lb-rank{font-family:'Bebas Neue',sans-serif;font-size:1.2rem}
.lb-name{font-weight:600}.lb-name a{color:var(--orange);text-decoration:none}.lb-name a:hover{text-decoration:underline}
.lb-exercise{color:var(--muted);font-size:0.85rem}
.lb-reps{font-family:'Bebas Neue',sans-serif;font-size:1.2rem;color:var(--orange);text-align:right}

/* ─── Instagram Section ──────────────────────────────────────── */
.instagram-section{background:var(--dark)}
.instagram-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:0.75rem;margin:2rem 0}
.ig-placeholder{background:var(--dark2);border:1px solid var(--border);border-radius:8px;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.5rem}
.ig-icon{font-size:2rem}
.ig-placeholder span{font-size:0.75rem;color:var(--muted)}
.btn-instagram{background:linear-gradient(45deg,#405de6,#5851db,#833ab4,#c13584,#e1306c,#fd1d1d);color:var(--white);font-weight:700}
.btn-instagram:hover{opacity:0.9;color:var(--white)}

/* ─── CTA Section ────────────────────────────────────────────── */
.cta-section{background:linear-gradient(135deg,#1a0800 0%,#2a1000 100%);border-top:1px solid var(--border);padding:5rem 0;text-align:center}
.cta-section h2{font-family:'Bebas Neue',sans-serif;font-size:3rem;margin-bottom:1rem}
.cta-section p{color:var(--muted);margin-bottom:2rem;font-size:1.05rem}

/* ─── Buttons ────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:0.75rem 1.75rem;border-radius:8px;font-weight:700;font-size:0.9rem;cursor:pointer;border:none;transition:all 0.2s;text-decoration:none;gap:0.4rem}
.btn-primary{background:var(--orange);color:var(--white)}
.btn-primary:hover{background:var(--orange-dark);color:var(--white);transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--text);border:2px solid var(--border)}
.btn-outline:hover{border-color:var(--orange);color:var(--orange)}
.btn-ghost{background:transparent;color:var(--muted);border:none}
.btn-ghost:hover{color:var(--text)}
.btn-lg{padding:1rem 2.25rem;font-size:1rem}
.btn-full{width:100%}

/* ─── Challenge Page ─────────────────────────────────────────── */
.challenge-section{padding:3rem 0;min-height:80vh}
.challenge-step{display:none}
.challenge-step.active{display:block}
.challenge-step h1{font-family:'Bebas Neue',sans-serif;font-size:2.5rem;margin-bottom:0.5rem}
.step-sub{color:var(--muted);margin-bottom:2rem}

/* ─── Timer Page ─────────────────────────────────────────────── */
.timer-page{max-width:500px;margin:0 auto;text-align:center;padding:2rem 0}
.timer-exercise-name{font-family:'Bebas Neue',sans-serif;font-size:2rem;color:var(--orange);margin-bottom:2rem}
.timer-ring-wrap{position:relative;width:300px;height:300px;margin:0 auto 2rem}
.timer-svg-large{width:100%;height:100%;transform:rotate(-90deg)}
.timer-display-large{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.timer-num-large{font-family:'Bebas Neue',sans-serif;font-size:6rem;color:var(--white);line-height:1;transition:color 0.3s}
.timer-label-large{font-size:0.85rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.1em}
.timer-controls{display:flex;gap:1rem;justify-content:center;margin-bottom:1.5rem}
.timer-tip{color:var(--muted);font-size:0.85rem}

/* ─── Log Result ─────────────────────────────────────────────── */
.log-result{max-width:440px;margin:0 auto;padding:2rem 0}
.result-header{text-align:center;margin-bottom:2rem}
.result-emoji{font-size:3rem;margin-bottom:0.5rem;display:flex;justify-content:center}
.result-header h2{font-family:'Bebas Neue',sans-serif;font-size:2rem;margin-bottom:0.5rem}
.result-header p{color:var(--muted)}
.reps-input-wrap{display:flex;align-items:center;justify-content:center;gap:1.5rem;margin-bottom:1rem}
.reps-btn{width:56px;height:56px;border-radius:50%;background:var(--dark2);border:2px solid var(--border);color:var(--text);font-size:1.5rem;cursor:pointer;font-weight:700;transition:all 0.2s}
.reps-btn:hover{border-color:var(--orange);color:var(--orange)}
.reps-input{width:120px;text-align:center;font-family:'Bebas Neue',sans-serif;font-size:3rem;background:transparent;border:none;color:var(--orange);outline:none}
.form-group{margin-bottom:1.25rem}
.form-group label{display:block;font-size:0.8rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:0.4rem}
.form-input{width:100%;padding:0.75rem 1rem;background:var(--dark);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:1rem;font-family:inherit}
.form-input:focus{outline:none;border-color:var(--orange)}

/* ─── Share Page ─────────────────────────────────────────────── */
.share-page{max-width:500px;margin:0 auto;padding:2rem 0}
.share-trophy{font-size:4rem;margin-bottom:1rem}
.share-page h2{font-family:'Bebas Neue',sans-serif;font-size:2.5rem;margin-bottom:2rem}
.result-stat-card{background:var(--dark);border:2px solid var(--orange);border-radius:var(--radius);padding:2rem;margin-bottom:1.5rem}
.rs-exercise{font-size:1.2rem;font-weight:700;margin-bottom:0.5rem}
.rs-reps{font-family:'Bebas Neue',sans-serif;font-size:5rem;color:var(--orange);line-height:1}
.rs-label{color:var(--muted);margin-bottom:0.5rem}
.rs-pr{color:var(--green);font-weight:700;margin:0.5rem 0}
.rs-rank{color:var(--muted);font-size:0.9rem}
.rs-username{color:var(--orange);font-weight:600;margin-top:0.5rem}
.share-actions{display:flex;flex-direction:column;gap:0.75rem}

/* ─── Leaderboard Full ───────────────────────────────────────── */
.lb-filters{display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:2rem}
.lb-filter-btn{background:var(--dark);border:1px solid var(--border);color:var(--muted);padding:0.5rem 1rem;border-radius:999px;cursor:pointer;font-size:0.85rem;font-weight:500;transition:all 0.2s}
.lb-filter-btn.active,.lb-filter-btn:hover{border-color:var(--orange);color:var(--orange);background:#1a0f08}
.lb-table-full{width:100%;border-collapse:collapse;background:var(--dark);border-radius:var(--radius);overflow:hidden}
.lb-table-full th{background:var(--dark2);padding:0.75rem 1rem;text-align:left;font-size:0.78rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--muted)}
.lb-table-full td{padding:1rem;border-bottom:1px solid var(--border);font-size:0.95rem}
.lb-table-full tr.top-1 td{background:rgba(255,215,0,0.05)}
.lb-table-full tr.top-2 td{background:rgba(192,192,192,0.05)}
.lb-table-full tr.top-3 td{background:rgba(205,127,50,0.05)}
.lb-table-full a{color:var(--orange)}

/* ─── Dashboard ──────────────────────────────────────────────── */
.dash-username-form{max-width:500px;margin:0 auto;text-align:center;padding:2rem 0}
.dash-username-form h2{font-family:'Bebas Neue',sans-serif;font-size:2rem;margin-bottom:1.5rem}
.input-row{display:flex;gap:0.75rem}
.dash-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-bottom:2rem}
.dash-stat{background:var(--dark);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;text-align:center}
.ds-val{font-family:'Bebas Neue',sans-serif;font-size:2.5rem;color:var(--orange)}
.ds-lbl{color:var(--muted);font-size:0.8rem;text-transform:uppercase;letter-spacing:0.05em}
.recent-row{display:grid;grid-template-columns:1fr auto auto;gap:1rem;padding:0.875rem 0;border-bottom:1px solid var(--border);font-size:0.9rem}
.recent-row strong{color:var(--orange)}
.ex-stat-card{background:var(--dark);border:1px solid var(--border);border-radius:8px;padding:1.25rem;margin-bottom:0.75rem}
.es-name{font-weight:700;text-transform:capitalize;margin-bottom:0.5rem}
.es-best{color:var(--orange);font-weight:700}
.es-avg,.es-count{color:var(--muted);font-size:0.85rem}
.es-bar{background:var(--dark2);border-radius:999px;height:6px;margin-top:0.75rem}
.es-bar-fill{background:var(--orange);height:100%;border-radius:999px}

/* ─── Utils ──────────────────────────────────────────────────── */
.text-center{text-align:center}
.loading-pulse{padding:3rem;text-align:center;color:var(--muted)}
.empty{text-align:center;color:var(--muted);padding:3rem}

/* ─── Footer ─────────────────────────────────────────────────── */
.site-footer{background:var(--dark);border-top:1px solid var(--border);padding:2.5rem 0}
.footer-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem}
.footer-logo{display:flex;align-items:center;gap:0.5rem}
.footer-logo-img{height:96px;width:auto;display:block;opacity:0.7}
.footer-logo-wordmark{font-family:'Bebas Neue',sans-serif;font-size:1.1rem;color:var(--muted);letter-spacing:0.08em}
.site-footer p{color:var(--muted);font-size:0.85rem}
.footer-social{display:flex;gap:1.5rem}
.footer-social a{color:var(--muted);font-size:0.85rem}
.footer-social a:hover{color:var(--orange)}
.footer-bottom{border-top:1px solid var(--border);padding-top:1.5rem;text-align:center}

/* ─── Responsive ─────────────────────────────────────────────── */
@media(max-width:768px){
  .hero-inner{grid-template-columns:1fr;text-align:center}
  .hero-timer-demo{display:none}
  .hero-cta{justify-content:center}
  .hero-stats{justify-content:center}
  .main-nav{display:none}
  .nav-toggle{display:block}
  .main-nav.open{display:flex;flex-direction:column;position:fixed;top:62px;left:0;right:0;background:var(--dark);padding:1.5rem;border-bottom:1px solid var(--border);gap:1rem;z-index:99}
  .exercises-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .share-actions{flex-direction:column}
  .input-row{flex-direction:column}
  .footer-inner{flex-direction:column;text-align:center}
}