:root{
    --bg:#07111f;
    --panel:#0f172a;
    --panel-2:#111827;
    --panel-3:#152235;
    --line:#243247;
    --text:#e5eefc;
    --muted:#9aa8bd;
    --green:#22c55e;
    --blue:#38bdf8;
    --violet:#a78bfa;
    --amber:#f59e0b;
    --red:#ef4444;
    --radius:24px;
    --shadow:0 24px 60px rgba(0,0,0,.32);
    --max:1240px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at top right, rgba(56,189,248,.18), transparent 28%),
        radial-gradient(circle at top left, rgba(167,139,250,.12), transparent 22%),
        linear-gradient(180deg, #020617 0%, #07111f 100%);
    color:var(--text);
    min-height:100vh;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.page-shell{width:min(100%, var(--max));margin:0 auto;padding:20px}
.topbar{
    display:flex;align-items:center;justify-content:space-between;gap:20px;
    padding:14px 18px;border:1px solid rgba(255,255,255,.05);
    background:rgba(11,18,32,.75);backdrop-filter:blur(20px);
    border-radius:24px;box-shadow:var(--shadow);position:sticky;top:14px;z-index:50;
}
.brand-kicker{color:var(--muted);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}
.brand-title{font-size:1.2rem;font-weight:800;letter-spacing:.02em}
.nav{display:flex;gap:10px;flex-wrap:wrap}
.nav a{
    padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.04);color:#dbe8fb;font-size:.95rem
}
.nav a:hover{background:rgba(255,255,255,.08)}
.main{padding:26px 0 48px}
.alert{
    padding:16px 18px;border-radius:18px;margin-bottom:18px;border:1px solid transparent;
}
.alert.success{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.25);color:#d5ffe2}
.alert.error{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.25);color:#ffdfe0}

.hero{
    display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center;
    background:linear-gradient(180deg, rgba(15,23,42,.85), rgba(15,23,42,.65));
    border:1px solid rgba(255,255,255,.06);border-radius:32px;padding:30px;
    box-shadow:var(--shadow);margin-bottom:24px;overflow:hidden;
}
.hero h1{font-size:clamp(2rem,4vw,3.45rem);line-height:1.03;margin:10px 0 14px}
.hero p{font-size:1.05rem;line-height:1.7;color:#c8d5ea;max-width:62ch;margin:0}
.hero-media img{border-radius:26px;border:1px solid rgba(255,255,255,.07)}
.eyebrow{display:inline-flex;padding:8px 12px;border-radius:999px;background:rgba(34,197,94,.14);color:#b7f8cb;font-weight:700;font-size:.8rem}
.hero-copy .btn{margin-top:18px}

.card,.exercise-card,.metric-card{
    background:linear-gradient(180deg, rgba(12,20,35,.95), rgba(12,20,35,.88));
    border:1px solid rgba(255,255,255,.07);border-radius:var(--radius);
    box-shadow:var(--shadow);
}
.card{padding:24px}
.card-dark{background:linear-gradient(180deg, rgba(18,26,43,.95), rgba(7,17,31,.94))}
.card-large{padding:28px}
.stack,.stack-lg{display:flex;flex-direction:column;gap:18px}
.login-grid,.split-grid,.dashboard-grid,.program-layout,.metrics-grid,.exercise-grid{display:grid;gap:20px}
.login-grid{grid-template-columns:1fr 1fr}
.split-grid{grid-template-columns:1.2fr .8fr}
.dashboard-grid{grid-template-columns:1.4fr .8fr}
.program-layout{grid-template-columns:minmax(0,1.3fr) 360px;align-items:start}
.metrics-grid{grid-template-columns:repeat(4,1fr);margin-bottom:20px}
.exercise-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.metric-card{padding:20px;display:flex;flex-direction:column;gap:8px}
.metric-label{font-size:.86rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.metric-value{font-size:1.8rem}
.metric-sub{color:#bfd0e8}
.tone-success{background:linear-gradient(180deg, rgba(34,197,94,.14), rgba(15,23,42,.98))}
.tone-warning{background:linear-gradient(180deg, rgba(245,158,11,.12), rgba(15,23,42,.98))}
.tone-accent{background:linear-gradient(180deg, rgba(56,189,248,.12), rgba(15,23,42,.98))}
.section-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:18px}
.section-head h2,.card h2{margin:0 0 6px;font-size:1.35rem}
.card p{color:#c5d2e7;line-height:1.7}
.feature-list{margin:0;padding-left:20px;display:grid;gap:10px;color:#d3def1}
.feature-list.compact{gap:8px}
.mini-stats{display:flex;gap:10px;flex-wrap:wrap;color:#c2d3ea;font-size:.95rem}
.pill,.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    border-radius:999px;padding:10px 14px;font-weight:700;font-size:.92rem
}
.pill{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:#d4e0f3}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.btn{border:none;cursor:pointer;transition:transform .14s ease, box-shadow .14s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(90deg, var(--green), var(--blue));color:#04111f;box-shadow:0 16px 30px rgba(34,197,94,.18)}
.btn-secondary{background:rgba(255,255,255,.07);color:#edf6ff;border:1px solid rgba(255,255,255,.09)}
.form-grid{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px
}
.form-grid label,.stack label{display:flex;flex-direction:column;gap:8px;color:#d9e5f6;font-weight:600}
.full-width{grid-column:1 / -1}
input,select,textarea{
    width:100%;border:1px solid rgba(255,255,255,.08);background:#08111f;color:#ecf5ff;
    border-radius:16px;padding:14px 16px;font:inherit;outline:none
}
input:focus,select:focus,textarea:focus{border-color:rgba(56,189,248,.55);box-shadow:0 0 0 3px rgba(56,189,248,.14)}
.form-actions{grid-column:1 / -1;display:flex;justify-content:flex-start}
.big-number{font-size:2rem;font-weight:800;margin:0 0 10px}
.goal-steps{display:grid;gap:12px;margin-top:18px}
.goal-steps div{padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.05)}
.goal-steps span{display:block;color:var(--muted);margin-top:5px}
.check-grid{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.check-grid li{
    display:flex;justify-content:space-between;gap:16px;align-items:center;
    padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.04)
}
#weightChart{
    width:100%;height:320px;background:#07111f;border-radius:22px;border:1px solid rgba(255,255,255,.05);padding:12px
}
.progress-ring{
    width:100%;height:18px;border-radius:999px;background:#09111f;border:1px solid rgba(255,255,255,.06);
    overflow:hidden;margin-bottom:10px
}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--green),var(--blue))}
.daily-callouts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.callout{
    padding:16px;border-radius:20px;background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.05)
}
.callout strong{display:block;margin-bottom:8px}
.exercise-card{overflow:hidden}
.exercise-card img{aspect-ratio:4 / 3;object-fit:cover;background:#0b1220}
.exercise-copy{padding:18px}
.exercise-copy h3{margin:10px 0 8px}
.checkbox-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.checkbox-card{
    display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:18px;
    background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.05)
}
.checkbox-card input{width:20px;height:20px;margin-top:2px}
.timeline-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.timeline-list li a{
    display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:16px;
    background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.05)
}
.timeline-list li.active a{border-color:rgba(56,189,248,.35);background:rgba(56,189,248,.1)}
.week-nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.week-block{margin-bottom:18px}
.sticky-card{position:sticky;top:96px}
.table-wrap{overflow:auto}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.06);text-align:left}
.inline-form{margin-top:16px}
.timeline-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.timeline-photo{
    overflow:hidden;border-radius:28px;background:rgba(12,20,35,.95);border:1px solid rgba(255,255,255,.06);box-shadow:var(--shadow)
}
.timeline-photo img{width:100%;aspect-ratio:4 / 5;object-fit:cover}
.timeline-meta{padding:16px}
.week-block h3{margin:0 0 10px}
canvas{display:block}
@media (max-width: 1120px){
    .metrics-grid{grid-template-columns:repeat(2,1fr)}
    .program-layout,.dashboard-grid,.split-grid,.hero{grid-template-columns:1fr}
    .sticky-card{position:static}
    .timeline-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 780px){
    .page-shell{padding:14px}
    .topbar{flex-direction:column;align-items:flex-start}
    .nav{width:100%}
    .nav a{flex:1;text-align:center}
    .login-grid,.exercise-grid,.form-grid,.checkbox-grid,.daily-callouts,.metrics-grid,.timeline-gallery{grid-template-columns:1fr}
    .hero{padding:20px}
    .hero h1{font-size:2.2rem}
    .card,.card-large{padding:18px}
}