/* NEXT Generation Development v91 clean build
One CSS file. Mobile-first. No legacy yellow-green accent. No nested-patch inheritance.
*/
/* ---------- Base ---------- */
:root{
--bg:#050a13;
--bg2:#07101d;
--panel:#091323;
--panel2:#0d1a2d;
--panel3:#101f35;
--text:#f7faff;
--muted:#aebfd3;
--soft:#d8e7f6;
--cyan:#87e6ff;
--blue:#5aa0ff;
--blue2:#7bb8ff;
--line:rgba(128,181,255,.18);
--line2:rgba(135,230,255,.30);
--shadow:0 18px 48px rgba(0,0,0,.30);
--r:24px;
--r2:18px;
--safe-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html{background:#050a13;scroll-behavior:smooth}
body{
margin:0;
min-height:100svh;
font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
color:var(--text);
background:
radial-gradient(900px 700px at 12% -8%, rgba(40,132,255,.16), transparent 60%),
radial-gradient(800px 650px at 94% 18%, rgba(80,210,255,.11), transparent 58%),
linear-gradient(180deg,#040812 0%,#08101d 42%,#050914 100%);
}
button,select,input{font:inherit}
button{cursor:pointer}
a{color:inherit}
.wrap{
width:min(1220px, calc(100vw - 20px));
margin:0 auto;
padding:10px 0 calc(90px + var(--safe-bottom));
}
.screen{display:none}
.screen.active{display:block}
/* iPhone top scrim */
body::before{
content:'';
position:fixed;
inset:0 0 auto 0;
height:106px;
z-index:80;
pointer-events:none;
background:linear-gradient(180deg,rgba(4,8,16,.98),rgba(4,8,16,.82) 66%,rgba(4,8,16,0));
}
/* ---------- Common UI ---------- */
.panel,.hero,.video-card,.info-card,.playlist-card,.day-card,.test-card,.qa-row,.library-detail,.selected-day-focus,.dose-card,.coach-checklist-panel,.overview-insight-card,.flow-card{
border:1px solid var(--line);
background:linear-gradient(180deg,rgba(10,20,36,.94),rgba(6,12,22,.98));
border-radius:var(--r);
box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.035);
}
.panel{overflow:hidden}
.panel-pad{padding:16px}
.meta,.section-title,.kicker,.dash-kicker,.flow-kicker,.exercise-meta,.overview-list-head{
color:var(--cyan);
text-transform:uppercase;
letter-spacing:.14em;
font-size:12px;
font-weight:950;
}
.section-title{margin:0 0 12px}
.title{
margin:6px 0 10px;
font-size:clamp(38px,10vw,58px);
line-height:.92;
letter-spacing:-.065em;
}
.muted,.hint,.small-note,.sub,.panel p{color:var(--muted);line-height:1.38}
.small-note{font-size:13px}
.main-btn,.ghost-btn,.seg-btn,.profile-btn,.day-start,.day-overview,.menu-toggle,.tool-btn,.utility-pill,.next-pass-btn,.app-primary-action{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:48px;
padding:12px 16px;
border-radius:17px;
font-weight:900;
text-decoration:none;
border:1px solid var(--line);
color:var(--text);
background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.035));
}
.main-btn,.next-pass-btn,.day-start,.app-primary-action{
border:0;
color:#07111f;
background:linear-gradient(180deg,var(--blue2),var(--blue));
box-shadow:0 16px 36px rgba(90,160,255,.30), inset 0 1px 0 rgba(255,255,255,.30);
}
.main-btn:disabled,.ghost-btn:disabled{opacity:.45;cursor:not-allowed}
.seg{display:grid;grid-template-columns:1fr;gap:10px}
.seg-btn.active,.profile-btn.active{
border-color:var(--line2);
background:linear-gradient(180deg,rgba(70,142,255,.24),rgba(23,54,104,.24));
}
.tag,.week-day-chips span,.selected-day-tags span,.selected-day-equipment span,.qa-meta-pills span,.library-facts span,.overview-equipment span,.overview-equipment b,.dash-focus-chips span,.week-day-stats span{
display:inline-flex;
align-items:center;
min-height:30px;
padding:7px 11px;
border-radius:999px;
border:1px solid rgba(135,230,255,.20);
background:rgba(13,31,55,.76);
color:#e9f6ff;
font-weight:850;
}
/* ---------- App top bar ---------- */
/* v91.1 emergency mobile nav hotfix */
.v84-rail{display:none!important}
.app-nav-toggle,.app-tab{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 16px;border-radius:17px;font-weight:900;border:1px solid var(--line);color:var(--text);background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.035));}
.app-nav-toggle{min-width:116px;white-space:nowrap;}
.app-primary-action{display:none!important;}
.app-topbar{position:sticky;top:calc(env(safe-area-inset-top,0px) + 8px);z-index:120;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;padding:14px 16px;border-radius:22px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(5,10,19,.98),rgba(6,12,22,.96));backdrop-filter:blur(18px) saturate(120%);box-shadow:0 18px 44px rgba(0,0,0,.36);}
.app-topbar{position:sticky}
.app-tabs{display:none;position:absolute;right:16px;top:calc(100% + 8px);width:min(220px,calc(100vw - 40px));padding:10px;border-radius:18px;border:1px solid var(--line);background:rgba(5,10,19,.98);box-shadow:var(--shadow);gap:8px;}
.app-topbar.nav-open .app-tabs{display:grid;}
.app-tab.active{border-color:var(--line2);background:linear-gradient(180deg,rgba(70,142,255,.24),rgba(23,54,104,.24));}
.app-location{min-width:0}.app-location strong{font-size:18px}.app-location span{font-size:12px}
.app-topbar{
position:sticky;
top:calc(env(safe-area-inset-top,0px) + 8px);
z-index:120;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:12px;
padding:14px 16px;
border-radius:22px;
border:1px solid var(--line);
background:linear-gradient(180deg,rgba(5,10,19,.98),rgba(6,12,22,.96));
backdrop-filter:blur(18px) saturate(120%);
box-shadow:0 18px 44px rgba(0,0,0,.36);
}
.app-location{display:grid;gap:2px}
.app-location span{color:var(--cyan);text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:950}
.app-location strong{font-size:20px}
.app-nav-toggle{min-width:110px}
/* ---------- Home/Dashboard ---------- */
.home-hero{
padding:0;
background:
radial-gradient(circle at 86% 8%,rgba(70,160,255,.12),transparent 36%),
linear-gradient(180deg,rgba(10,20,36,.94),rgba(6,12,22,.98));
}
.home-topbar,.showcase-copy,.showcase-benefits,.showcase-signals{display:none!important}
.showcase-grid{display:block}
.hero-dashboard-panel{border:0;background:transparent;box-shadow:none;border-radius:0}
.hero-dashboard-panel .panel-pad{padding:0}
#progressDashboard{display:grid;gap:12px}
.daily-primary,.daily-secondary{
border:1px solid var(--line);
background:linear-gradient(180deg,rgba(13,24,42,.94),rgba(8,15,27,.98));
border-radius:24px;
padding:16px;
}
.dash-title{
margin-top:10px;
font-size:clamp(38px,10vw,58px);
line-height:.92;
letter-spacing:-.06em;
font-weight:1000;
}
.dash-sub,.dash-context{color:var(--muted);font-size:16px;margin-top:8px}
.daily-time-pill{width:max-content;margin-top:14px}
.dash-focus-card{
margin-top:14px;
padding:14px;
border-radius:18px;
background:rgba(14,24,42,.78);
border:1px solid var(--line);
}
.dash-focus-label{color:var(--cyan);text-transform:uppercase;letter-spacing:.14em;font-weight:950;font-size:12px}
.dash-focus-text{font-size:18px;line-height:1.32;font-weight:850;margin-top:8px}
.dash-focus-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.dash-action-row{display:grid;gap:10px;margin-top:14px}
.next-pass-btn{min-height:64px;font-size:22px;border-radius:20px}
.overview-pass-btn{min-height:54px}
.dash-progress{display:grid;gap:10px}
.dash-row{display:flex;justify-content:space-between;gap:12px;font-weight:900}
.dash-bar{height:10px;border-radius:999px;background:rgba(160,190,230,.15);overflow:hidden}
.dash-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--blue));}
.dash-week-summary{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
.dash-week-title{font-weight:1000;font-size:20px}
.dash-week-count{
border:1px solid var(--line);
border-radius:999px;
padding:8px 12px;
color:#eaf7ff;
font-weight:900;
background:rgba(13,31,55,.68);
}
.dash-grid{
display:grid!important;
grid-auto-flow:column!important;
grid-auto-columns:minmax(116px,1fr)!important;
grid-template-columns:none!important;
gap:10px!important;
overflow-x:auto;
padding:2px 0 6px;
scrollbar-width:none;
}
.dash-grid::-webkit-scrollbar{display:none}
.dash-day{
min-width:116px;
min-height:92px;
border:1px solid var(--line);
background:rgba(255,255,255,.035);
border-radius:18px;
padding:12px;
}
.dash-day-top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.dash-day-top b{font-size:22px}
.dash-day-state{font-size:12px;color:var(--muted);font-weight:900}
.dash-day-icon{font-size:28px;color:var(--cyan);margin-top:8px}
.subtle-skip{display:none}
/* ---------- Profile/program ---------- */
#profileScreen .profile-config-panel{
border:0;
background:transparent;
box-shadow:none;
overflow:visible;
}
#profileScreen .profile-config-panel>.panel-pad{padding:0}
#profileScreen .overview-head{
margin-bottom:10px;
padding:16px;
border:1px solid var(--line);
border-radius:24px;
background:
radial-gradient(circle at 84% 12%,rgba(80,160,255,.12),transparent 34%),
linear-gradient(180deg,rgba(9,17,31,.96),rgba(5,10,19,.98));
}
#profileScreen .overview-head .page-actions{display:none}
#profileScreen .title{max-width:8ch}
#profileScreen .muted{max-width:24ch;font-size:16px}
.profile-config-grid{display:grid;gap:10px}
.profile-config-grid>.panel{background:linear-gradient(180deg,rgba(11,20,36,.94),rgba(7,13,24,.96));}
.profile-row{display:grid;grid-template-columns:1fr;gap:10px}
.profile-btn.add-profile{color:#eaf5ff}
#stageButtons{display:grid!important;grid-template-columns:1fr!important;gap:12px!important}
.stage-choice{
position:relative;
min-height:212px;
display:flex!important;
flex-direction:column;
justify-content:flex-end;
align-items:flex-start;
overflow:hidden;
padding:20px!important;
border-radius:26px!important;
border:1px solid var(--line)!important;
background:#06101d!important;
background-size:cover!important;
background-position:center!important;
text-align:left!important;
}
.stage-choice::before{
content:'';
position:absolute;
inset:0;
background:linear-gradient(90deg,rgba(2,7,14,.86),rgba(2,7,14,.50) 58%,rgba(2,7,14,.16));
z-index:0;
}
.stage-choice[data-stage="Stage 1"]{background-image:url('../img/program/stage1.png')!important}
.stage-choice[data-stage="Stage 2"]{background-image:url('../img/program/stage2.png')!important}
.stage-choice[data-stage="Stage 3"]{background-image:url('../img/program/stage3.png')!important}
.stage-choice b,.stage-choice span{position:relative;z-index:1}
.stage-choice b{font-size:clamp(36px,10vw,58px);line-height:.96;letter-spacing:-.06em;max-width:9ch}
.stage-choice span{margin-top:8px;font-size:16px;line-height:1.25;max-width:22ch;color:#dcecf9}
.developed-cards-grid,.week-plan-grid,.day-grid,.test-grid{display:grid;grid-template-columns:1fr;gap:12px}
.developed-card{padding:16px;border-radius:20px;background:rgba(11,20,36,.86);border:1px solid var(--line)}
.developed-card .big{font-size:28px;font-weight:1000;line-height:1;letter-spacing:-.04em;margin:8px 0}
.week-day-card{
position:relative;
min-height:320px;
overflow:hidden;
border-radius:26px!important;
background:#06101d!important;
}
.week-day-image{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(.95) brightness(.82)}
.week-day-card[data-day-index="1"] .week-day-image{background-image:linear-gradient(90deg,rgba(2,7,14,.88),rgba(2,7,14,.50) 58%,rgba(2,7,14,.20)),url('../img/program/stage1.png')}
.week-day-card[data-day-index="2"] .week-day-image{background-image:linear-gradient(90deg,rgba(2,7,14,.88),rgba(2,7,14,.50) 58%,rgba(2,7,14,.20)),url('../img/program/stage2.png')}
.week-day-card[data-day-index="3"] .week-day-image{background-image:linear-gradient(90deg,rgba(2,7,14,.88),rgba(2,7,14,.50) 58%,rgba(2,7,14,.20)),url('../img/program/stage3.png')}
.week-day-card[data-day-index="4"] .week-day-image{background-image:linear-gradient(90deg,rgba(2,7,14,.88),rgba(2,7,14,.50) 58%,rgba(2,7,14,.20)),url('../img/hero/hero-dashboard.png')}
.week-day-content{position:relative;z-index:2;display:grid;align-content:end;gap:10px;height:100%;padding:18px}
.week-day-top{display:flex;justify-content:space-between;gap:10px}
.week-day-top small{color:var(--cyan);text-transform:uppercase;letter-spacing:.14em;font-weight:950}
.week-day-top strong{font-size:28px}
.week-day-content h3{font-size:42px;line-height:.95;margin:0;letter-spacing:-.055em}
.week-day-content p{margin:0;color:#d1dfef;max-width:24ch}
.week-day-stats,.week-day-chips{display:flex;flex-wrap:wrap;gap:8px}
.week-day-actions{display:grid;grid-template-columns:1fr;gap:10px}
.selected-day-focus{padding:16px}
.selected-day-focus h3{font-size:40px;line-height:.95;letter-spacing:-.055em;margin:8px 0}
.selected-day-stats{font-size:26px;font-weight:1000;margin:10px 0}
.selected-day-tags,.selected-day-equipment{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.selected-day-grid{display:grid;grid-template-columns:1fr;gap:10px}
.selected-day-grid>div{padding:14px;border-radius:18px;background:rgba(8,15,27,.72);border:1px solid var(--line)}
.selected-day-grid .label{display:block;color:var(--cyan);text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:950;margin-bottom:8px}
.selected-day-grid b{display:block;font-size:24px;line-height:1.1}
.selected-day-grid small{display:block;color:var(--muted);margin-top:6px}
.day-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:10px!important;margin-top:12px}
.day-actions button{min-height:54px!important}
/* ---------- Overview ---------- */
.overview-head{display:grid;gap:14px}
.overview-head .page-actions{display:grid;gap:10px}
.overview-equipment{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
#overviewInsights{display:grid;grid-template-columns:1fr;gap:12px}
.overview-insight-card{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;padding:14px}
.overview-insight-icon,.flow-icon{width:48px;height:48px;border-radius:999px;display:grid;place-items:center;background:rgba(13,31,55,.76);border:1px solid var(--line2);color:var(--cyan);font-size:24px}
.overview-insight-card .big{font-size:21px;font-weight:1000;line-height:1.05}
#overviewFlow{display:grid!important;grid-template-columns:1fr;gap:10px!important;margin:12px 0}
.overview-flow-step{display:grid;grid-template-columns:auto auto 1fr;gap:12px;align-items:center;padding:14px;background:rgba(8,15,27,.72);border:1px solid var(--line);border-radius:20px}
.flow-index{color:var(--cyan);font-weight:1000}
.overview-flow-step h3{margin:0;font-size:22px}
.overview-flow-step p{margin:3px 0 0;color:var(--muted)}
.coach-checklist-panel{display:grid;gap:12px;padding:14px}
.coach-checks{display:grid;gap:10px}
.coach-check{padding:12px;border:1px solid var(--line);border-radius:16px;background:rgba(8,15,27,.72)}
.coach-check b{display:block}
.coach-check span{color:var(--muted)}
#overviewList{display:grid;gap:8px;margin-top:12px}
.overview-list-head{display:none}
.ex-row{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:12px;border:1px solid var(--line);border-radius:16px;background:rgba(8,15,27,.72)}
.num{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:rgba(13,31,55,.76);color:var(--cyan);font-weight:1000}
.ex-main b{font-size:17px}
.section,.reps{grid-column:2;color:var(--muted)}
/* ---------- Exercise/pass ---------- */
body.exercise-active .wrap{width:100%;padding:0 0 calc(120px + var(--safe-bottom))}
.sticky-nav{
position:sticky;
top:0;
z-index:130;
padding:8px 10px 10px;
background:linear-gradient(180deg,rgba(5,10,19,.98),rgba(6,12,22,.95));
border-bottom:1px solid var(--line);
backdrop-filter:blur(18px);
}
.nav-row{display:grid;gap:8px}
.nav-actions{display:grid;gap:8px}
.nav-left{display:grid;grid-template-columns:auto auto;gap:8px;align-items:center}
.menu-wrap{position:relative}
.menu-toggle,.exit-pass-btn{width:auto;min-height:42px;border-radius:14px;padding:9px 14px;font-size:15px}
.top-tools{display:none;position:fixed;left:10px;right:10px;top:86px;z-index:200;padding:10px;border-radius:20px;border:1px solid var(--line);background:rgba(5,10,19,.98);box-shadow:var(--shadow)}
.top-tools.open{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tool-btn{font-size:12px;min-height:42px;justify-content:space-between}
.progress-meta{display:grid;gap:6px}
#exerciseMeta{font-size:14px;letter-spacing:.10em;text-transform:uppercase;color:#dff8ff;font-weight:1000}
.progress-shell{height:9px;border-radius:999px;background:rgba(160,190,230,.14);overflow:hidden}
.progress-bar{height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--blue))}
.stage-layout{display:grid;grid-template-columns:1fr;gap:10px}
.video-card{border-radius:0 0 24px 24px;overflow:hidden;border-left:0;border-right:0}
.video-wrap{aspect-ratio:16/9;background:#050a12;position:relative;display:grid;place-items:center}
.video-wrap iframe,.video-wrap video{width:100%;height:100%;border:0;display:block}
.no-video{min-height:220px;display:grid;place-items:center;text-align:center;padding:24px;color:var(--muted)}
.no-video h2{margin:8px 0;color:var(--text)}
.proxy-status,.open-link{display:none!important}
.info-card{margin:0 10px;padding:16px;display:grid;gap:12px}
.exercise-kicker{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.exercise-kicker::-webkit-scrollbar{display:none}
.exercise-kicker .tag{flex:0 0 auto;text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:var(--cyan)}
.exercise-name{font-size:clamp(36px,10vw,58px);line-height:.92;letter-spacing:-.06em;margin:0;text-wrap:balance}
.exercise-reps{min-height:112px;border-radius:22px;background:rgba(255,255,255,.045);border:1px solid var(--line);display:grid;place-items:center;padding:14px}
.rx-line{font-size:clamp(48px,14vw,72px);line-height:.95;font-weight:1000;letter-spacing:-.06em}
.set-note,.coach-cues,.next-preview,.timer-card,.superset-status{padding:14px;border-radius:20px;background:rgba(8,15,27,.72);border:1px solid var(--line)}
.coach-cues small,.next-preview small{display:block;color:var(--cyan);letter-spacing:.14em;text-transform:uppercase;font-weight:950;font-size:12px;margin-bottom:8px}
.coach-cues ul{margin:0;padding-left:20px;color:#dce8f5}
.next-preview b,.next-line{color:#dff8ff;font-weight:950}
.timer-card{display:none}
.timer-card.show{display:grid;gap:10px}
.timer-display{font-size:44px;font-weight:1000;font-variant-numeric:tabular-nums}
.timer-status{color:var(--cyan);font-weight:900}
.timer-controls{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.playlist-card{display:none!important}
.pass-bottom-controls{
position:sticky;
bottom:0;
z-index:110;
display:grid;
grid-template-columns:auto 1fr;
gap:10px;
padding:10px 10px calc(10px + var(--safe-bottom));
background:linear-gradient(180deg,rgba(5,10,19,0),rgba(5,10,19,.94) 25%,rgba(5,10,19,.98));
}
#prevBtn{min-width:106px;max-width:128px;min-height:54px;border-radius:18px;font-size:0;opacity:.80}
#prevBtn::before{content:'← Tillbaka';font-size:15px}
#nextBtn{min-height:58px;border-radius:20px;font-size:19px}
/* Rest */
.rest-stage{position:absolute;inset:0;display:grid;align-content:center;justify-items:start;padding:26px;background-size:cover;background-position:center;color:#fff}
.rest-stage::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,8,16,.68),rgba(3,8,16,.18));z-index:0}
.rest-stage>*{position:relative;z-index:1}
.rest-kicker{color:var(--cyan);letter-spacing:.14em;text-transform:uppercase;font-weight:950}
.rest-title{font-size:44px;font-weight:1000}
.rest-display{font-size:clamp(80px,22vw,160px);font-weight:1000;letter-spacing:-.08em}
.rest-next{font-size:18px;color:#e4f0fb}
/* ---------- Library ---------- */
.library-filters{display:grid;grid-template-columns:1fr;gap:12px;margin:12px 0}
.library-filters input,.library-filters select,.test-card input{
min-height:56px;
border-radius:18px;
border:1px solid var(--line);
background:#071020;
color:var(--text);
padding:0 14px;
width:100%;
}
.library-detail{display:grid!important;grid-template-columns:1fr!important;gap:14px;padding:14px;margin-bottom:14px}
.library-video{aspect-ratio:16/9;min-height:0;height:auto;border-radius:20px;overflow:hidden;background:#050a12}
.library-video iframe,.library-video video,.library-video img{width:100%;height:100%;border:0;display:block;object-fit:cover}
.library-copy{display:grid;gap:12px}
.library-copy h2{font-size:clamp(36px,10vw,58px);line-height:.94;letter-spacing:-.06em;margin:0}
.library-copy p{font-size:16px;margin:0}
.library-facts,.library-dose{display:grid;gap:10px}
.dose-card{padding:14px;border-radius:18px;background:rgba(8,15,27,.72)}
.dose-card .sub{display:flex;flex-wrap:wrap;gap:8px}
.dose-card ul{margin:0;padding-left:20px;color:var(--muted)}
.qa-grid{display:grid;grid-template-columns:1fr;gap:12px}
.qa-row{padding:16px;display:grid;gap:12px}
.qa-top{display:grid;gap:10px}
.qa-top b{font-size:28px;line-height:1;letter-spacing:-.04em}
.qa-status{width:max-content;border-radius:999px;padding:8px 12px;border:1px solid var(--line);background:rgba(13,31,55,.76);font-weight:900}
.qa-meta-pills{display:flex;flex-wrap:wrap;gap:8px}
.qa-open{min-height:50px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);font-weight:900}
/* ---------- Tests ---------- */
.test-card{padding:16px;display:grid;gap:12px}
.test-card label{color:var(--cyan);font-weight:950;font-size:18px}
.test-stats{display:grid;grid-template-columns:1fr;gap:10px}
.test-stat{padding:14px;border-radius:18px;border:1px solid var(--line);background:rgba(8,15,27,.72)}
.test-stat small{display:block;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font-weight:900}
.test-stat b{display:block;font-size:28px;margin-top:6px}
.test-delta,.test-history{color:var(--muted);font-size:14px}
/* ---------- Responsive desktop-ish ---------- */
@media (min-width:760px){
.wrap{padding-top:18px}
.panel-pad{padding:22px}
.home-hero{padding:22px}
.showcase-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(360px,1.05fr);gap:18px}
.app-primary-action{display:inline-flex!important}
.showcase-copy{display:grid!important;align-content:center}
.showcase-eyebrow{display:block!important}
.showcase-copy h1{font-size:clamp(56px,6vw,92px);line-height:.9;letter-spacing:-.07em;margin:0}
.showcase-intro{display:block!important;max-width:44ch}
.showcase-benefits,.showcase-signals{display:flex!important;gap:10px;flex-wrap:wrap}
.benefit{padding:14px;border:1px solid var(--line);border-radius:18px;background:rgba(8,15,27,.72)}
.benefit b,.benefit span{display:block}
.benefit span{color:var(--muted)}
.dash-action-row{grid-template-columns:1.2fr .8fr}
.profile-config-grid{grid-template-columns:repeat(12,minmax(0,1fr))}
.profile-config-grid>.profile-panel{grid-column:span 4}
.profile-config-grid>.selector-panel:nth-of-type(2){grid-column:1/-1}
.profile-config-grid>.selector-panel:nth-of-type(3),
.profile-config-grid>.selector-panel:nth-of-type(4){grid-column:span 6}
.profile-overview-panel,.week-overview-panel,.passday-panel,.data-panel{grid-column:1/-1}
#stageButtons{grid-template-columns:repeat(3,1fr)!important}
.developed-cards-grid{grid-template-columns:repeat(4,1fr)}
.week-plan-grid{grid-template-columns:repeat(3,1fr)}
.selected-day-grid{grid-template-columns:repeat(2,1fr)}
.overview-head{grid-template-columns:1fr auto}
#overviewInsights{grid-template-columns:repeat(4,1fr)}
#overviewFlow{grid-template-columns:repeat(4,1fr)!important}
.stage-layout{grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr)}
body.exercise-active .wrap{width:min(1220px,calc(100vw - 32px));padding-top:0}
.video-card{border-radius:24px;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.info-card{margin:0}
.playlist-card{display:block!important}
.mini-list{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-height:40vh;overflow:auto}
.mini-item{display:grid;grid-template-columns:34px 1fr;gap:8px;align-items:center;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.035);padding:8px}
.mini-item.active{border-color:var(--line2);background:rgba(70,142,255,.16)}
.mini-title{font-weight:850;font-size:13px}.mini-reps{font-size:12px;color:var(--muted)}
.qa-grid{grid-template-columns:repeat(2,1fr)}
.library-detail{grid-template-columns:1fr 1fr!important}
.test-stats{grid-template-columns:repeat(3,1fr)}
}
/* v91.2 structural cleanup
Keeps v91.1 navigation base. Cleans remaining mobile density, box nesting and pass controls.
*/
/* Global: fewer nested visual borders on mobile */
@media (max-width: 760px){
.panel,
.hero,
.daily-primary,
.daily-secondary,
.profile-config-grid > .panel,
.selected-day-focus,
.library-detail,
.qa-row,
.test-card,
.info-card{
box-shadow:0 12px 30px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.03) !important;
}
.panel-pad{
padding:14px !important;
}
}
/* Dashboard: avoid large nested card feeling and make CTA safe around Safari toolbar */
@media (max-width: 760px){
.home-hero{
border-radius:22px !important;
}
.daily-primary{
padding:14px !important;
border-radius:20px !important;
}
.dash-title{
font-size:clamp(34px,10.2vw,50px) !important;
}
.dash-focus-card{
padding:12px !important;
border-radius:16px !important;
}
.dash-focus-text{
font-size:16px !important;
}
.dash-action-row{
gap:8px !important;
}
.next-pass-btn{
min-height:58px !important;
border-radius:18px !important;
font-size:20px !important;
}
.overview-pass-btn{
min-height:48px !important;
border-radius:16px !important;
}
.daily-secondary{
padding:14px !important;
border-radius:20px !important;
}
.dash-grid{
grid-auto-columns:minmax(104px,1fr) !important;
}
.dash-day{
min-width:104px !important;
min-height:84px !important;
padding:10px !important;
}
}
/* Profile: remove "big marketing block" feeling; make it compact control-first */
@media (max-width:760px){
#profileScreen .overview-head{
padding:14px !important;
border-radius:20px !important;
margin-bottom:10px !important;
}
#profileScreen .overview-head .meta{
font-size:11px !important;
letter-spacing:.12em !important;
}
#profileScreen .title{
font-size:clamp(32px,8.8vw,48px) !important;
max-width:none !important;
margin:4px 0 8px !important;
}
#profileScreen .muted{
max-width:28ch !important;
font-size:15px !important;
line-height:1.25 !important;
}
#profileScreen .profile-config-grid{
gap:10px !important;
}
#profileScreen .profile-panel,
#profileScreen .selector-panel,
#profileScreen .profile-overview-panel,
#profileScreen .week-overview-panel,
#profileScreen .passday-panel,
#profileScreen .data-panel{
border-radius:20px !important;
}
#profileScreen .stage-choice{
min-height:188px !important;
border-radius:22px !important;
padding:18px !important;
}
#profileScreen .stage-choice b{
font-size:clamp(32px,9.5vw,50px) !important;
}
#profileScreen .stage-choice span{
font-size:15px !important;
}
.week-day-card{
min-height:278px !important;
border-radius:22px !important;
}
.week-day-content h3{
font-size:clamp(34px,10vw,48px) !important;
}
.selected-day-focus h3{
font-size:clamp(32px,9vw,46px) !important;
}
}
/* Selected pass: fewer boxes inside boxes */
@media(max-width:760px){
.selected-day-grid{
display:none !important;
}
.selected-day-equipment span:nth-child(n+5){
display:none !important;
}
.selected-day-stats{
font-size:22px !important;
}
}
/* Library: video and card sizing more controlled */
#qaScreen .library-video{
aspect-ratio:16 / 9 !important;
width:100% !important;
max-height:42svh !important;
}
#qaScreen .library-video iframe,
#qaScreen .library-video video{
width:100% !important;
height:100% !important;
}
@media(max-width:760px){
.library-detail{
padding:12px !important;
border-radius:22px !important;
}
.library-copy h2{
font-size:clamp(30px,9vw,44px) !important;
line-height:.98 !important;
}
.library-copy p{
font-size:15px !important;
}
.qa-top b{
font-size:clamp(24px,7vw,34px) !important;
}
}
/* Pass mode: previous should be tiny/secondary; hidden when disabled */
body.exercise-active .pass-bottom-controls{
grid-template-columns:1fr !important;
}
body.exercise-active .pass-bottom-controls.has-prev{
grid-template-columns:minmax(82px,.32fr) 1fr !important;
}
body.exercise-active #prevBtn:disabled{
display:none !important;
}
body.exercise-active #prevBtn{
min-width:0 !important;
max-width:none !important;
min-height:48px !important;
padding-inline:10px !important;
opacity:.72 !important;
font-size:0 !important;
}
body.exercise-active #prevBtn::before{
content:'←';
font-size:20px;
}
body.exercise-active .pass-bottom-controls.has-prev #prevBtn::before{
content:'←';
}
body.exercise-active #nextBtn{
min-height:58px !important;
font-size:18px !important;
}
@media(min-width:760px){
body.exercise-active #prevBtn::before{
content:'← Tillbaka';
font-size:15px;
}
}
/* Pass mode: if reps-based exercise, timer should not dominate below */
body.exercise-active .timer-card:not(.show){
display:none !important;
}
body.exercise-active .timer-card{
margin-top:2px !important;
}
/* App menu: ensure dropdown stays clean and never sits as visible pills */
.app-tabs{
overflow:hidden;
}
.app-tab{
width:100%;
}
/* v91.3 – phase/week segment cleanup
The large stacked phase/week controls wasted vertical space on iPhone.
Keep nav base from v91.1 and structural flattening from v91.2.
*/
/* Rename-friendly compact controls */
#profileScreen #phaseButtons,
#profileScreen #weekButtons{
display:grid !important;
gap:10px !important;
}
#profileScreen #phaseButtons{
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
#profileScreen #weekButtons{
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
}
#profileScreen #phaseButtons .seg-btn,
#profileScreen #weekButtons .seg-btn{
min-height:52px !important;
padding:10px 8px !important;
border-radius:16px !important;
font-size:clamp(15px,4vw,19px) !important;
white-space:nowrap !important;
}
/* Similar compact button groups that should not become huge vertical stacks */
#profileScreen .profile-row{
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
#profileScreen .profile-row .profile-btn{
min-height:52px !important;
padding:10px 8px !important;
border-radius:16px !important;
font-size:clamp(15px,4vw,19px) !important;
}
#profileScreen .profile-row .profile-btn.add-profile{
grid-column:auto !important;
}
/* Make these selector panels smaller now that controls are grids */
#profileScreen .selector-panel .panel-pad,
#profileScreen .profile-panel .panel-pad{
padding:14px !important;
}
#profileScreen .selector-panel,
#profileScreen .profile-panel{
border-radius:18px !important;
}
/* When the phone is very narrow, keep phase as 3 columns but week as 2x2 if needed */
@media(max-width:390px){
#profileScreen #weekButtons{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
#profileScreen .profile-row{
grid-template-columns:1fr 1fr !important;
}
#profileScreen .profile-row .profile-btn.add-profile{
grid-column:1 / -1 !important;
}
}
/* Reduce vertical rhythm around these panels */
#profileScreen .profile-config-grid{
gap:9px !important;
}
#profileScreen .section-title{
margin-bottom:10px !important;
}
/* v91.4 – Dashboard/pass cleanup
Fixes real iPhone findings:
- progress stat icons were huge
- pass mode had two top bars
- next/rest button appeared above video
- week rhythm clipped horizontally
*/
/* Dashboard week rhythm: 3 equal cards, no right clipping */
#progressDashboard .dash-grid{
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
grid-auto-flow:row !important;
grid-auto-columns:unset !important;
overflow:visible !important;
gap:10px !important;
width:100% !important;
}
#progressDashboard .dash-day{
min-width:0 !important;
width:100% !important;
min-height:92px !important;
}
#progressDashboard .dash-day-top{
display:grid !important;
grid-template-columns:1fr auto !important;
gap:6px !important;
}
#progressDashboard .dash-day-top b{
font-size:clamp(28px,8vw,42px) !important;
line-height:.95 !important;
}
#progressDashboard .dash-day-state{
font-size:13px !important;
line-height:1.05 !important;
max-width:3.5em;
}
#progressDashboard .dash-week-summary{
display:grid !important;
grid-template-columns:1fr auto !important;
gap:10px !important;
align-items:center !important;
}
#progressDashboard .dash-week-count{
white-space:nowrap !important;
font-size:clamp(16px,5vw,24px) !important;
padding:8px 12px !important;
}
@media(max-width:370px){
#progressDashboard .dash-grid{
grid-template-columns:repeat(3,minmax(92px,1fr)) !important;
overflow-x:auto !important;
}
}
/* Quick stats: no giant icons, compact stat cards */
.quick-stats-grid{
display:grid !important;
grid-template-columns:1fr !important;
gap:12px !important;
}
.progress-stat,
.stat-card.progress-stat{
min-height:0 !important;
padding:16px !important;
border-radius:20px !important;
display:grid !important;
gap:8px !important;
align-content:start !important;
}
.progress-stat .stat-icon,
.stat-icon{
display:none !important;
}
.progress-stat .big{
font-size:clamp(32px,9vw,52px) !important;
line-height:.92 !important;
letter-spacing:-.05em !important;
}
.progress-stat .sub{
font-size:15px !important;
}
.progress-stat .mini-progress{
height:10px !important;
border-radius:999px !important;
overflow:hidden !important;
background:rgba(160,190,230,.14) !important;
}
.progress-stat .mini-progress span{
display:block;
height:100%;
background:linear-gradient(90deg,var(--cyan),var(--blue));
}
.progress-stat .cta{
color:var(--cyan);
font-weight:900;
}
/* Desktop can use grid, mobile remains single-column readable */
@media(min-width:760px){
.quick-stats-grid{
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
}
}
/* Pass mode: hide normal app shell topbar when workout is active */
body.exercise-active .app-topbar{
display:none !important;
}
/* Pass mode: bottom controls are actual bottom controls, never above the video */
body.exercise-active .wrap{
padding-bottom:calc(92px + var(--safe-bottom)) !important;
}
body.exercise-active .pass-bottom-controls{
position:fixed !important;
left:max(10px, calc((100vw - 1220px) / 2)) !important;
right:max(10px, calc((100vw - 1220px) / 2)) !important;
bottom:0 !important;
z-index:500 !important;
display:grid !important;
grid-template-columns:1fr !important;
gap:10px !important;
padding:10px 10px calc(10px + var(--safe-bottom)) !important;
background:linear-gradient(180deg,rgba(5,10,19,0),rgba(5,10,19,.94) 28%,rgba(5,10,19,.99)) !important;
pointer-events:auto !important;
}
body.exercise-active .pass-bottom-controls.has-prev{
grid-template-columns:minmax(52px,64px) 1fr !important;
}
body.exercise-active #prevBtn:disabled{
display:none !important;
}
body.exercise-active #prevBtn{
width:100% !important;
min-width:0 !important;
max-width:64px !important;
min-height:56px !important;
border-radius:18px !important;
padding:0 !important;
opacity:.72 !important;
}
body.exercise-active #prevBtn::before{
content:'←' !important;
font-size:22px !important;
}
body.exercise-active #nextBtn{
width:100% !important;
min-height:60px !important;
border-radius:20px !important;
font-size:clamp(17px,4.8vw,22px) !important;
}
/* Since controls are fixed, video should be first after pass topbar */
body.exercise-active .stage-layout{
margin-top:0 !important;
}
body.exercise-active .sticky-nav{
margin-bottom:0 !important;
}
body.exercise-active .video-card{
margin-top:0 !important;
}
/* Pass video: keep 16:9 and avoid oversized vertical flow */
body.exercise-active .video-wrap{
aspect-ratio:16 / 9 !important;
max-height:42svh !important;
}
body.exercise-active .video-wrap iframe,
body.exercise-active .video-wrap video{
width:100% !important;
height:100% !important;
}
/* Pass info: slightly tighter after moving controls out of flow */
body.exercise-active .info-card{
margin-top:10px !important;
padding-bottom:16px !important;
}
body.exercise-active .exercise-reps{
min-height:96px !important;
}
/* Top pass bar compact after removing app topbar */
body.exercise-active .sticky-nav{
top:0 !important;
padding-top:calc(8px + env(safe-area-inset-top,0px)) !important;
}
body.exercise-active #exerciseMeta{
font-size:clamp(12px,3.4vw,16px) !important;
}
/* v91.5 – restore dashboard nav tiles and create more room in pass mode */
.dashboard-shortcuts-panel{margin-bottom:14px;}
.dashboard-shortcuts-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
.shortcut-btn{min-height:112px;border-radius:28px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(14,23,40,.92),rgba(8,14,27,.96));box-shadow:var(--shadow);color:var(--text);font-weight:900;font-size:clamp(22px,6.2vw,28px);letter-spacing:-.03em;padding:20px 16px;text-align:center;}
.shortcut-btn.active{outline:2px solid rgba(108,225,255,.75); box-shadow:0 16px 36px rgba(0,0,0,.34), inset 0 -4px 0 rgba(108,225,255,.75);}
.shortcut-btn:active{transform:translateY(1px);}
@media(min-width:760px){.dashboard-shortcuts-grid{grid-template-columns:repeat(4,minmax(0,1fr));}}
/* pass mode: remove non-essential duplication to prioritise film + övning + coach-cues */
#nextTopPreview,.next-top-preview,.next-preview,#exerciseSummary{display:none !important;}
body.exercise-active .info-card{display:grid !important;gap:12px !important;align-content:start !important;padding:16px !important;}
body.exercise-active .exercise-kicker{margin-bottom:0 !important;}
body.exercise-active .exercise-name{margin:0 !important;font-size:clamp(30px,8.6vw,54px) !important;line-height:.94 !important;}
body.exercise-active .exercise-reps{margin-top:0 !important;min-height:72px !important;}
body.exercise-active .coach-cues{padding:14px !important;}
body.exercise-active .set-note, body.exercise-active .next-preview{display:none !important;}
body.exercise-active .stage-layout{gap:12px !important;}
body.exercise-active .sticky-nav{padding-bottom:8px !important;}
body.exercise-active .nav-row{gap:8px !important;}
body.exercise-active .progress-meta{gap:8px !important;}
body.exercise-active #exitPassBtn{min-height:48px !important;padding:12px 16px !important;border-radius:16px !important;}
body.exercise-active .menu-toggle{min-height:48px !important;padding:12px 16px !important;border-radius:16px !important;}
/* v91.6 – Pass lite
Goal: active pass should prioritize film, exercise, prescription and coach-cues.
Exit moves into menu. Previous is tiny. Topbar is compact.
*/
/* Active pass: one compact header row */
body.exercise-active .sticky-nav{
padding:calc(6px + env(safe-area-inset-top,0px)) 10px 8px !important;
border-bottom:1px solid rgba(128,181,255,.14) !important;
}
body.exercise-active .nav-row{
display:grid !important;
grid-template-columns:auto 1fr !important;
gap:10px !important;
align-items:center !important;
}
body.exercise-active .nav-actions{
display:block !important;
}
body.exercise-active .nav-left{
display:block !important;
}
body.exercise-active .menu-wrap{
display:block !important;
}
body.exercise-active #menuToggleBtn,
body.exercise-active .menu-toggle{
width:48px !important;
min-width:48px !important;
height:44px !important;
min-height:44px !important;
padding:0 !important;
border-radius:15px !important;
font-size:0 !important;
}
body.exercise-active #menuToggleBtn::before{
content:'☰';
font-size:22px;
line-height:1;
}
/* Exit stays available inside menu, not as a big top button */
body.exercise-active #exitPassBtn{
display:none !important;
}
/* Settings menu in pass becomes the place for secondary actions */
body.exercise-active .top-tools{
top:calc(58px + env(safe-area-inset-top,0px)) !important;
}
/* Progress is compact but visible */
body.exercise-active .progress-meta{
min-width:0 !important;
gap:6px !important;
}
body.exercise-active #exerciseMeta{
font-size:clamp(11px,3vw,14px) !important;
letter-spacing:.08em !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
body.exercise-active .progress-shell{
height:7px !important;
}
/* Film should dominate */
body.exercise-active .stage-layout{
gap:8px !important;
}
body.exercise-active .video-card{
border-radius:0 0 18px 18px !important;
}
body.exercise-active .video-wrap{
aspect-ratio:16 / 9 !important;
max-height:48svh !important;
}
body.exercise-active .video-wrap iframe,
body.exercise-active .video-wrap video{
width:100% !important;
height:100% !important;
}
/* Exercise card: no extra pass-name feeling, fewer chips */
body.exercise-active .info-card{
margin:8px 10px 0 !important;
padding:14px !important;
border-radius:20px !important;
gap:10px !important;
}
body.exercise-active .exercise-kicker{
display:flex !important;
gap:8px !important;
min-height:0 !important;
margin:0 !important;
}
/* Keep only first meaningful category chip; hide group/set duplication */
body.exercise-active #exerciseGroup,
body.exercise-active #exerciseSet{
display:none !important;
}
body.exercise-active #exerciseSection{
min-height:30px !important;
padding:6px 10px !important;
font-size:11px !important;
letter-spacing:.12em !important;
}
body.exercise-active .exercise-name{
font-size:clamp(32px,9vw,52px) !important;
line-height:.92 !important;
margin:0 !important;
letter-spacing:-.06em !important;
}
body.exercise-active .exercise-reps{
min-height:78px !important;
border-radius:18px !important;
padding:10px !important;
}
body.exercise-active .rx-line{
font-size:clamp(42px,12vw,64px) !important;
line-height:.92 !important;
}
/* Coach cues get priority after prescription */
body.exercise-active .coach-cues{
display:grid !important;
padding:12px 14px !important;
border-radius:18px !important;
}
body.exercise-active .coach-cues small{
margin-bottom:6px !important;
font-size:11px !important;
}
body.exercise-active .coach-cues ul{
padding-left:18px !important;
line-height:1.35 !important;
}
/* Remove non-essential active-pass modules */
body.exercise-active .set-note,
body.exercise-active .next-preview,
body.exercise-active #nextPreview,
body.exercise-active #exerciseSummary,
body.exercise-active .superset-status:empty,
body.exercise-active .playlist-card{
display:none !important;
}
/* Timer only when actually active/visible */
body.exercise-active .timer-card:not(.show){
display:none !important;
}
body.exercise-active .timer-card.show{
padding:12px !important;
border-radius:18px !important;
}
body.exercise-active .timer-display{
font-size:34px !important;
}
body.exercise-active .timer-controls{
gap:8px !important;
}
/* Bottom controls: primary next/rest, tiny back */
body.exercise-active .pass-bottom-controls{
position:fixed !important;
left:10px !important;
right:10px !important;
bottom:0 !important;
display:grid !important;
grid-template-columns:1fr !important;
gap:8px !important;
padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px)) !important;
}
body.exercise-active .pass-bottom-controls.has-prev{
grid-template-columns:48px 1fr !important;
}
body.exercise-active #prevBtn{
min-width:48px !important;
width:48px !important;
max-width:48px !important;
height:54px !important;
min-height:54px !important;
border-radius:16px !important;
}
body.exercise-active #prevBtn::before{
content:'←' !important;
font-size:22px !important;
}
body.exercise-active #nextBtn{
min-height:56px !important;
border-radius:18px !important;
font-size:clamp(17px,4.8vw,21px) !important;
}
/* Ensure bottom controls don't hide coach cues too aggressively */
body.exercise-active .wrap{
padding-bottom:calc(84px + env(safe-area-inset-bottom,0px)) !important;
}
/* Very small screens: squeeze further */
@media(max-width:390px){
body.exercise-active .info-card{
margin-left:8px !important;
margin-right:8px !important;
padding:12px !important;
}
body.exercise-active .exercise-name{
font-size:clamp(30px,8.4vw,44px) !important;
}
body.exercise-active .exercise-reps{
min-height:68px !important;
}
}
/* ==========================================================
v92 MOCKUP SYNC
Purpose: return to the original mockup direction:
- premium dark / cyan / electric blue
- image-backed hero cards
- fewer technical boxes
- consistent rounded pill/card system
- pass mode = film + exercise + coach cues, no clutter
========================================================== */
:root{
--mock-bg:#050914;
--mock-panel:#08111f;
--mock-panel2:#101a2d;
--mock-card:#111b2d;
--mock-line:rgba(128,181,255,.19);
--mock-line-strong:rgba(125,222,255,.48);
--mock-cyan:#88e8ff;
--mock-blue:#5da5ff;
--mock-text:#f7fbff;
--mock-muted:#aebfd5;
--mock-glow:rgba(74,160,255,.22);
}
/* Global final mood */
html, body{
background:
radial-gradient(900px 760px at 18% -8%, rgba(32,119,255,.18), transparent 56%),
radial-gradient(760px 680px at 92% 12%, rgba(54,202,255,.12), transparent 54%),
linear-gradient(180deg,#030713 0%,#08101d 48%,#040814 100%) !important;
}
body::before{
height:108px !important;
background:linear-gradient(180deg,rgba(3,7,15,.96),rgba(3,7,15,.76) 64%,rgba(3,7,15,0)) !important;
}
/* Make cards share the same mockup surface */
.panel,.hero,.daily-primary,.daily-secondary,.profile-config-grid > .panel,
.selected-day-focus,.library-detail,.qa-row,.test-card,.info-card,.video-card,
.coach-cues,.exercise-reps,.timer-card,.week-day-card,.stage-choice,.dashboard-shortcuts-panel{
border-color:var(--mock-line) !important;
background:
radial-gradient(circle at 84% 8%, rgba(61,157,255,.10), transparent 34%),
linear-gradient(180deg, rgba(10,19,34,.94), rgba(6,12,23,.98)) !important;
box-shadow:0 18px 48px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.035) !important;
}
.meta,.section-title,.kicker,.dash-kicker,.flow-kicker,.exercise-meta,
.overview-list-head,.dash-focus-label,.app-location span{
color:var(--mock-cyan) !important;
}
/* ----------------------------------------------------------
TOP APP BAR / MENU
---------------------------------------------------------- */
.app-topbar{
border-radius:24px !important;
padding:14px 18px !important;
background:linear-gradient(180deg,rgba(5,10,20,.98),rgba(6,12,23,.96)) !important;
border-color:rgba(128,181,255,.20) !important;
}
.app-nav-toggle{
min-width:132px !important;
min-height:58px !important;
border-radius:22px !important;
border-color:rgba(128,181,255,.22) !important;
background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.035)) !important;
font-size:22px !important;
}
.app-topbar.nav-open .app-tabs{
display:grid !important;
}
.app-tabs{
right:14px !important;
top:calc(100% + 10px) !important;
width:min(330px, calc(100vw - 38px)) !important;
padding:12px !important;
gap:10px !important;
border-radius:24px !important;
background:rgba(6,12,23,.96) !important;
backdrop-filter:blur(18px) saturate(125%) !important;
border:1px solid rgba(128,181,255,.22) !important;
}
.app-tab{
min-height:58px !important;
border-radius:18px !important;
font-size:20px !important;
font-weight:950 !important;
}
.app-tab.active{
border-color:var(--mock-line-strong) !important;
background:linear-gradient(180deg,rgba(35,88,160,.65),rgba(12,34,70,.80)) !important;
}
/* ----------------------------------------------------------
DASHBOARD MOCKUP SHORTCUTS
---------------------------------------------------------- */
.dashboard-shortcuts-panel{
margin-bottom:14px !important;
border-radius:30px !important;
background:
radial-gradient(circle at 88% 10%,rgba(77,178,255,.10),transparent 36%),
linear-gradient(180deg,rgba(7,14,26,.96),rgba(5,10,20,.98)) !important;
}
.dashboard-shortcuts-panel .panel-pad{
padding:18px !important;
}
.dashboard-shortcuts-grid{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:14px !important;
}
.shortcut-btn{
min-height:96px !important;
border-radius:25px !important;
border:1px solid rgba(128,181,255,.18) !important;
background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025)) !important;
color:var(--mock-text) !important;
font-size:clamp(20px,5.6vw,28px) !important;
font-weight:1000 !important;
letter-spacing:-.035em !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.035) !important;
}
.shortcut-btn.active{
background:
radial-gradient(circle at 0% 50%,rgba(0,183,255,.22),transparent 58%),
linear-gradient(180deg,rgba(20,62,115,.82),rgba(7,28,56,.75)) !important;
border-color:rgba(90,180,255,.75) !important;
outline:0 !important;
box-shadow:0 10px 32px rgba(0,158,255,.18), inset 0 -4px 0 rgba(91,222,255,.75) !important;
}
@media(min-width:760px){
.dashboard-shortcuts-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important;}
}
/* Dashboard main card: closer to mockup hero-card, less framed nesting */
.daily-primary{
border-radius:28px !important;
padding:20px !important;
}
.dash-title{
font-size:clamp(46px,11vw,76px) !important;
line-height:.90 !important;
letter-spacing:-.07em !important;
}
.dash-sub,.dash-context{
font-size:clamp(17px,4.2vw,24px) !important;
line-height:1.25 !important;
}
.next-pass-btn{
min-height:72px !important;
border-radius:24px !important;
font-size:clamp(22px,6vw,34px) !important;
}
.overview-pass-btn{
min-height:60px !important;
border-radius:20px !important;
font-size:20px !important;
}
.daily-secondary{
border-radius:26px !important;
}
/* Week rhythm in a clean mockup row */
#progressDashboard .dash-week-title{
font-size:clamp(26px,7vw,38px) !important;
}
#progressDashboard .dash-day{
border-radius:20px !important;
min-height:112px !important;
background:linear-gradient(180deg,rgba(17,28,47,.92),rgba(10,18,31,.96)) !important;
}
#progressDashboard .dash-day-top b{
font-size:clamp(32px,8.8vw,48px) !important;
}
#progressDashboard .dash-day-icon{
font-size:34px !important;
}
/* Compact phase progress cards */
.quick-stats-grid{
gap:12px !important;
}
.progress-stat{
border-radius:24px !important;
background:linear-gradient(180deg,rgba(10,19,34,.94),rgba(6,12,23,.98)) !important;
}
.progress-stat .big{
font-size:clamp(30px,8vw,48px) !important;
}
.progress-stat .stat-icon{
display:none !important;
}
/* ----------------------------------------------------------
PROFILE / PROGRAM
---------------------------------------------------------- */
#profileScreen .overview-head{
border-radius:26px !important;
background:
radial-gradient(circle at 86% 12%,rgba(67,158,255,.14),transparent 35%),
linear-gradient(180deg,rgba(11,22,40,.94),rgba(7,13,24,.98)) !important;
}
#profileScreen .title{
font-size:clamp(38px,9.4vw,64px) !important;
letter-spacing:-.07em !important;
}
#profileScreen .muted{
color:var(--mock-muted) !important;
}
/* Segment buttons should be chips, not form fields */
#profileScreen #phaseButtons,
#profileScreen #weekButtons,
#profileScreen .profile-row{
gap:10px !important;
}
#profileScreen #phaseButtons .seg-btn,
#profileScreen #weekButtons .seg-btn,
#profileScreen .profile-row .profile-btn{
border-radius:18px !important;
background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.028)) !important;
}
/* Image cards should feel like the mockup again */
#profileScreen .stage-choice{
min-height:240px !important;
border-radius:28px !important;
}
#profileScreen .stage-choice b{
font-size:clamp(40px,10vw,68px) !important;
}
/* ----------------------------------------------------------
ACTIVE PASS — PASS PLAYER MODE
---------------------------------------------------------- */
body.exercise-active::before{
display:none !important;
}
body.exercise-active .app-topbar{
display:none !important;
}
body.exercise-active .sticky-nav{
padding:calc(7px + env(safe-area-inset-top,0px)) 10px 8px !important;
background:linear-gradient(180deg,rgba(4,8,16,.98),rgba(5,10,19,.94)) !important;
border-bottom:1px solid rgba(128,181,255,.16) !important;
}
body.exercise-active .nav-row{
grid-template-columns:48px 1fr !important;
gap:10px !important;
}
body.exercise-active #menuToggleBtn,
body.exercise-active .menu-toggle{
width:48px !important;
min-width:48px !important;
height:44px !important;
min-height:44px !important;
border-radius:15px !important;
padding:0 !important;
}
body.exercise-active #menuToggleBtn::before{
content:'☰';
font-size:22px;
}
body.exercise-active #menuToggleBtn{
font-size:0 !important;
}
body.exercise-active #exitPassBtn{
display:none !important;
}
body.exercise-active #exerciseMeta{
font-size:clamp(12px,3.1vw,15px) !important;
letter-spacing:.09em !important;
}
body.exercise-active .progress-shell{
height:7px !important;
}
body.exercise-active .video-card{
border-radius:0 0 22px 22px !important;
border-left:0 !important;
border-right:0 !important;
}
body.exercise-active .video-wrap{
aspect-ratio:16 / 9 !important;
max-height:50svh !important;
}
body.exercise-active .info-card{
margin:8px 10px 0 !important;
padding:14px !important;
border-radius:22px !important;
gap:10px !important;
}
body.exercise-active #exerciseGroup,
body.exercise-active #exerciseSet{
display:none !important;
}
body.exercise-active #exerciseSection{
min-height:30px !important;
border-radius:999px !important;
padding:6px 11px !important;
font-size:11px !important;
}
body.exercise-active .exercise-name{
font-size:clamp(32px,9vw,58px) !important;
line-height:.92 !important;
margin:0 !important;
}
body.exercise-active .exercise-reps{
min-height:76px !important;
border-radius:18px !important;
padding:10px !important;
}
body.exercise-active .rx-line{
font-size:clamp(42px,12vw,70px) !important;
}
body.exercise-active .coach-cues{
border-radius:18px !important;
padding:12px 14px !important;
}
body.exercise-active .coach-cues ul{
margin:0 !important;
line-height:1.35 !important;
}
body.exercise-active .set-note,
body.exercise-active .next-preview,
body.exercise-active #nextPreview,
body.exercise-active #exerciseSummary,
body.exercise-active .playlist-card{
display:none !important;
}
body.exercise-active .pass-bottom-controls{
position:fixed !important;
left:10px !important;
right:10px !important;
bottom:0 !important;
z-index:500 !important;
grid-template-columns:1fr !important;
padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px)) !important;
}
body.exercise-active .pass-bottom-controls.has-prev{
grid-template-columns:48px 1fr !important;
}
body.exercise-active #prevBtn{
min-width:48px !important;
width:48px !important;
max-width:48px !important;
height:54px !important;
min-height:54px !important;
opacity:.72 !important;
border-radius:16px !important;
}
body.exercise-active #prevBtn:disabled{
display:none !important;
}
body.exercise-active #prevBtn::before{
content:'←' !important;
font-size:22px !important;
}
body.exercise-active #nextBtn{
min-height:56px !important;
border-radius:18px !important;
font-size:clamp(17px,4.8vw,22px) !important;
}
body.exercise-active .top-tools{
top:calc(58px + env(safe-area-inset-top,0px)) !important;
left:10px !important;
right:10px !important;
grid-template-columns:1fr 1fr !important;
}
/* Rest screen: keep next exercise in rest, but cleaner */
body.exercise-active .rest-stage{
padding:22px !important;
}
body.exercise-active .rest-title{
font-size:clamp(38px,10vw,58px) !important;
}
body.exercise-active .rest-display{
font-size:clamp(78px,22vw,140px) !important;
}
body.exercise-active .rest-equipment{
color:var(--mock-muted) !important;
}
/* ----------------------------------------------------------
LIBRARY
---------------------------------------------------------- */
.library-detail{
border-radius:24px !important;
}
.library-video{
aspect-ratio:16 / 9 !important;
border-radius:20px !important;
}
/* ----------------------------------------------------------
MOBILE TWEAKS
---------------------------------------------------------- */
@media(max-width:760px){
.wrap{
width:100% !important;
padding-left:10px !important;
padding-right:10px !important;
}
.dashboard-shortcuts-panel{
margin-left:0 !important;
margin-right:0 !important;
}
.dashboard-shortcuts-grid{
gap:12px !important;
}
.shortcut-btn{
min-height:92px !important;
}
#progressDashboard .dash-grid{
gap:10px !important;
}
#progressDashboard .dash-day{
min-height:104px !important;
padding:12px !important;
}
.daily-primary{
padding:18px !important;
}
.dash-title{
font-size:clamp(42px,12vw,66px) !important;
}
#profileScreen .stage-choice{
min-height:220px !important;
}
}
@media(max-width:390px){
.shortcut-btn{
min-height:82px !important;
font-size:18px !important;
}
.dashboard-shortcuts-grid{
gap:10px !important;
}
body.exercise-active .exercise-name{
font-size:clamp(30px,8.5vw,46px) !important;
}
}
/* ==========================================================
v93 VISUAL ASSET SYNC
Asset-backed mockup direction.
========================================================== */
:root{
--asset-dashboard:url("../img/v93/hero/hero-dashboard.webp");
--asset-profile:url("../img/v93/hero/hero-profile.webp");
--asset-library:url("../img/v93/hero/hero-library.webp");
--asset-tests:url("../img/v93/hero/hero-tests.webp");
--asset-stage-ground:url("../img/v93/stage/stage-ground.webp");
--asset-stage-development:url("../img/v93/stage/stage-development.webp");
--asset-stage-advanced:url("../img/v93/stage/stage-advanced.webp");
--asset-rest-goalie:url("../img/v95/rest/rest-goalie-pause.png");
--asset-rest-downhill:url("../img/v95/rest/rest-downhill-pause.png");
--asset-rest-hockey:url("../img/v95/rest/rest-hockey-pause.png");
}
/* Page hero assets */
#startScreen .home-hero,
#startScreen .daily-primary{
background:
linear-gradient(90deg,rgba(5,9,18,.94) 0%,rgba(8,15,29,.84) 48%,rgba(7,14,28,.58) 100%),
var(--asset-dashboard) center right / cover no-repeat !important;
}
#profileScreen .overview-head{
background:
linear-gradient(90deg,rgba(5,9,18,.94) 0%,rgba(8,15,29,.82) 50%,rgba(7,14,28,.58) 100%),
var(--asset-profile) center right / cover no-repeat !important;
}
#qaScreen .overview-head,
#qaScreen .qa-hero{
background:
linear-gradient(90deg,rgba(5,9,18,.94) 0%,rgba(8,15,29,.80) 52%,rgba(7,14,28,.55) 100%),
var(--asset-library) center right / cover no-repeat !important;
}
#testScreen .overview-head,
#testScreen .hero{
background:
linear-gradient(90deg,rgba(5,9,18,.94) 0%,rgba(8,15,29,.80) 52%,rgba(7,14,28,.55) 100%),
var(--asset-tests) center right / cover no-repeat !important;
}
/* Dashboard shortcut icons */
.shortcut-btn{
position:relative !important;
overflow:hidden !important;
}
.shortcut-btn::before{
content:"";
display:inline-block;
width:26px;
height:26px;
margin-right:10px;
vertical-align:-5px;
background:var(--icon-url) center / contain no-repeat;
filter:drop-shadow(0 0 10px rgba(136,232,255,.25));
opacity:.95;
}
.shortcut-btn:nth-child(1){--icon-url:url("../img/v93/icons/dashboard.svg");}
.shortcut-btn:nth-child(2){--icon-url:url("../img/v93/icons/profile.svg");}
.shortcut-btn:nth-child(3){--icon-url:url("../img/v93/icons/library.svg");}
.shortcut-btn:nth-child(4){--icon-url:url("../img/v93/icons/tests.svg");}
/* Stage cards */
#profileScreen .stage-choice{
position:relative !important;
overflow:hidden !important;
background:
linear-gradient(90deg,rgba(5,9,18,.90) 0%,rgba(7,14,28,.74) 48%,rgba(7,14,28,.38) 100%),
var(--stage-asset) center right / cover no-repeat !important;
box-shadow:0 20px 46px rgba(0,0,0,.32), inset 0 0 0 1px rgba(136,232,255,.08) !important;
}
#profileScreen .stage-choice:nth-of-type(1){--stage-asset:var(--asset-stage-ground);}
#profileScreen .stage-choice:nth-of-type(2){--stage-asset:var(--asset-stage-development);}
#profileScreen .stage-choice:nth-of-type(3){--stage-asset:var(--asset-stage-advanced);}
#profileScreen .stage-choice::after{
content:"";
position:absolute;
inset:0;
background:radial-gradient(circle at 78% 16%,rgba(111,205,255,.16),transparent 36%);
pointer-events:none;
}
#profileScreen .stage-choice > *{
position:relative;
z-index:1;
}
/* Week/pass cards */
.week-day-card,
.selected-day-focus{
background:
linear-gradient(90deg,rgba(5,9,18,.92) 0%,rgba(8,15,29,.82) 52%,rgba(7,14,28,.54) 100%),
var(--asset-stage-development) center right / cover no-repeat !important;
}
.week-day-card:nth-child(3n+1){
background:
linear-gradient(90deg,rgba(5,9,18,.92) 0%,rgba(8,15,29,.82) 52%,rgba(7,14,28,.54) 100%),
var(--asset-stage-ground) center right / cover no-repeat !important;
}
.week-day-card:nth-child(3n+2){
background:
linear-gradient(90deg,rgba(5,9,18,.92) 0%,rgba(8,15,29,.82) 52%,rgba(7,14,28,.54) 100%),
var(--asset-stage-development) center right / cover no-repeat !important;
}
.week-day-card:nth-child(3n+3){
background:
linear-gradient(90deg,rgba(5,9,18,.92) 0%,rgba(8,15,29,.82) 52%,rgba(7,14,28,.54) 100%),
var(--asset-stage-advanced) center right / cover no-repeat !important;
}
/* Rest mode image backgrounds */
body.exercise-active .rest-stage{
position:relative !important;
overflow:hidden !important;
border-radius:0 0 24px 24px !important;
background:
linear-gradient(90deg,rgba(5,9,18,.96) 0%,rgba(5,9,18,.82) 44%,rgba(5,9,18,.46) 100%),
var(--rest-asset, var(--asset-rest-goalie)) center right / cover no-repeat !important;
}
body.exercise-active .rest-stage[data-rest-theme="downhill"]{--rest-asset:var(--asset-rest-downhill);}
body.exercise-active .rest-stage[data-rest-theme="hockey"]{--rest-asset:var(--asset-rest-hockey);}
body.exercise-active .rest-stage[data-rest-theme="goalie"]{--rest-asset:var(--asset-rest-goalie);}
body.exercise-active .rest-stage::after{
content:"";
position:absolute;
inset:0;
background:radial-gradient(circle at 78% 26%,rgba(92,165,255,.18),transparent 42%);
pointer-events:none;
}
body.exercise-active .rest-stage > *{
position:relative;
z-index:1;
}
/* Iconized detail language */
.coach-cues small::before,
.timer-card .timer-label::before,
.progress-stat .kicker::before,
.selected-day-equipment::before{
content:"";
display:inline-block;
width:20px;
height:20px;
margin-right:8px;
vertical-align:-4px;
background:var(--info-icon, url("../img/v93/icons/coach.svg")) center / contain no-repeat;
opacity:.95;
filter:drop-shadow(0 0 8px rgba(136,232,255,.25));
}
.coach-cues small{--info-icon:url("../img/v93/icons/coach.svg");}
.timer-card .timer-label{--info-icon:url("../img/v93/icons/timer.svg");}
.progress-stat .kicker{--info-icon:url("../img/v93/icons/progress.svg");}
.selected-day-equipment{--info-icon:url("../img/v93/icons/equipment.svg");}
/* Stronger mockup button accents */
.next-pass-btn,
body.exercise-active #nextBtn,
.primary,
button.primary{
background:linear-gradient(180deg,#80c2ff 0%,#48a0ff 100%) !important;
color:#030713 !important;
box-shadow:0 16px 42px rgba(72,160,255,.28), inset 0 1px 0 rgba(255,255,255,.28) !important;
}
.shortcut-btn.active,
.app-tab.active,
.seg-btn.active,
.profile-btn.active{
box-shadow:0 14px 34px rgba(39,172,255,.22), inset 0 -3px 0 rgba(136,232,255,.62) !important;
}
/* Mobile crop safety */
@media(max-width:760px){
#startScreen .home-hero,
#startScreen .daily-primary,
#profileScreen .overview-head,
#qaScreen .overview-head,
#testScreen .overview-head{
background-position:center right !important;
}
#profileScreen .stage-choice{
min-height:210px !important;
background-position:center right !important;
}
.week-day-card,
.selected-day-focus{
background-position:center right !important;
}
}
@media(max-width:390px){
#profileScreen .stage-choice{
min-height:190px !important;
}
.shortcut-btn::before{
width:22px;
height:22px;
margin-right:7px;
}
}
/* Asset QA preload marker */
body::after{
content:"";
display:none;
background-image:
var(--asset-dashboard),
var(--asset-profile),
var(--asset-library),
var(--asset-tests),
var(--asset-stage-ground),
var(--asset-stage-development),
var(--asset-stage-advanced),
var(--asset-rest-goalie),
var(--asset-rest-downhill),
var(--asset-rest-hockey);
}
/* ==========================================================
v93.1 – Mobile nav + film cleanup
User decision:
- On mobile the 2x2 dashboard shortcuts duplicate the menu.
- Keep dashboard inside menu and hide shortcut panel on mobile.
- Lock a compact menu bar to the top.
- Remove the extra manual "Starta" button overlay for videos.
========================================================== */
.ios-play-btn{
display:none !important;
}
/* Mobile: menu is the navigation; dashboard shortcut grid is redundant */
@media(max-width:760px){
body:not(.exercise-active) .dashboard-shortcuts-panel{
display:none !important;
}
body:not(.exercise-active) .app-topbar{
position:fixed !important;
top:calc(env(safe-area-inset-top,0px) + 8px) !important;
left:10px !important;
right:10px !important;
z-index:900 !important;
margin:0 !important;
padding:10px 12px !important;
border-radius:20px !important;
min-height:62px !important;
background:linear-gradient(180deg,rgba(5,10,20,.98),rgba(6,12,23,.95)) !important;
backdrop-filter:blur(18px) saturate(125%) !important;
box-shadow:0 14px 38px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.035) !important;
}
body:not(.exercise-active) .wrap{
padding-top:calc(78px + env(safe-area-inset-top,0px)) !important;
}
body:not(.exercise-active) .app-location span{
font-size:11px !important;
letter-spacing:.13em !important;
}
body:not(.exercise-active) .app-location strong{
font-size:22px !important;
line-height:1.05 !important;
}
body:not(.exercise-active) .app-nav-toggle{
min-width:112px !important;
min-height:46px !important;
border-radius:17px !important;
padding:8px 12px !important;
font-size:18px !important;
}
body:not(.exercise-active) .app-tabs{
position:fixed !important;
right:10px !important;
left:auto !important;
top:calc(env(safe-area-inset-top,0px) + 78px) !important;
width:min(318px, calc(100vw - 20px)) !important;
max-height:calc(100svh - 104px) !important;
overflow:auto !important;
z-index:920 !important;
}
/* Since shortcuts are gone on mobile, the first dashboard content can breathe but not become oversized */
#startScreen .home-hero{
margin-top:0 !important;
}
#startScreen .daily-primary{
border-radius:26px !important;
}
}
/* Desktop/tablet can still use the visual 2x2/4x1 shortcut board */
@media(min-width:761px){
.dashboard-shortcuts-panel{
display:block !important;
}
}
/* Prevent any video overlay start button variants from reappearing */
.video-wrap .ios-play-btn,
.video-card .ios-play-btn,
.library-video .ios-play-btn,
#iosPlayBtn{
display:none !important;
visibility:hidden !important;
pointer-events:none !important;
}
/* ==========================================================
v94 PIXEL SYNC
No feature rebuild. Polish toward the mockup:
- thinner integrated mobile topbar
- tighter dashboard hierarchy
- cleaner week rhythm
- pass mode feels more like a video player
- fewer heavy nested panels
========================================================== */
:root{
--v94-border:rgba(126,181,255,.16);
--v94-border-strong:rgba(126,224,255,.38);
--v94-soft-shadow:0 14px 36px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.032);
}
/* Shared polish */
.panel,.hero,.daily-primary,.daily-secondary,.profile-config-grid > .panel,
.selected-day-focus,.library-detail,.qa-row,.test-card,.info-card,.video-card,
.coach-cues,.exercise-reps,.timer-card,.week-day-card,.stage-choice{
border-color:var(--v94-border) !important;
box-shadow:var(--v94-soft-shadow) !important;
}
@media(max-width:760px){
.panel-pad{padding:14px !important;}
}
/* Mobile topbar: slimmer, more integrated */
@media(max-width:760px){
body:not(.exercise-active)::before{height:92px !important;}
body:not(.exercise-active) .app-topbar{
top:calc(env(safe-area-inset-top,0px) + 6px) !important;
left:12px !important;
right:12px !important;
min-height:54px !important;
padding:8px 10px !important;
border-radius:18px !important;
background:linear-gradient(180deg,rgba(5,10,20,.92),rgba(5,10,20,.82)) !important;
border-color:rgba(126,181,255,.17) !important;
box-shadow:0 12px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.03) !important;
}
body:not(.exercise-active) .wrap{
padding-top:calc(68px + env(safe-area-inset-top,0px)) !important;
}
body:not(.exercise-active) .app-location span{
font-size:10px !important;
letter-spacing:.14em !important;
}
body:not(.exercise-active) .app-location strong{
font-size:20px !important;
}
body:not(.exercise-active) .app-nav-toggle{
min-width:98px !important;
min-height:42px !important;
padding:7px 10px !important;
border-radius:15px !important;
font-size:17px !important;
}
body:not(.exercise-active) .app-tabs{
top:calc(env(safe-area-inset-top,0px) + 68px) !important;
right:12px !important;
width:min(300px, calc(100vw - 24px)) !important;
padding:10px !important;
gap:8px !important;
border-radius:20px !important;
}
body:not(.exercise-active) .app-tab{
min-height:52px !important;
border-radius:16px !important;
font-size:18px !important;
}
}
/* Dashboard: compact premium card */
@media(max-width:760px){
#startScreen .home-hero{
border-radius:24px !important;
overflow:hidden !important;
}
#startScreen .daily-primary{
padding:16px !important;
border-radius:24px !important;
min-height:0 !important;
}
#startScreen .daily-primary .dash-kicker,
#startScreen .daily-primary .kicker{
font-size:11px !important;
letter-spacing:.16em !important;
}
.dash-title{
font-size:clamp(38px,11vw,58px) !important;
line-height:.90 !important;
margin:8px 0 8px !important;
}
.dash-sub,
.dash-context{
font-size:clamp(15px,4vw,19px) !important;
line-height:1.26 !important;
}
.daily-time-pill{
margin-top:10px !important;
min-height:34px !important;
padding:6px 11px !important;
font-size:14px !important;
}
.dash-focus-card{
margin-top:12px !important;
padding:12px !important;
border-radius:17px !important;
background:rgba(8,15,29,.62) !important;
}
.dash-focus-text{
font-size:clamp(17px,4.8vw,22px) !important;
line-height:1.25 !important;
}
.dash-focus-chips{
gap:7px !important;
margin-top:10px !important;
}
.dash-focus-chips span{
min-height:30px !important;
padding:6px 10px !important;
font-size:13px !important;
}
.next-pass-btn{
min-height:62px !important;
border-radius:20px !important;
font-size:clamp(20px,5.8vw,28px) !important;
}
.overview-pass-btn{
min-height:52px !important;
border-radius:17px !important;
font-size:18px !important;
}
}
/* Week rhythm: clean, no cramped Ej klar collision */
#progressDashboard .dash-week-summary{
align-items:end !important;
margin-top:12px !important;
}
#progressDashboard .dash-week-title{
font-size:clamp(24px,6.6vw,34px) !important;
line-height:1 !important;
}
#progressDashboard .dash-week-count{
min-height:44px !important;
padding:8px 12px !important;
border-radius:16px !important;
font-size:clamp(17px,5vw,23px) !important;
}
#progressDashboard .dash-grid{gap:9px !important;}
#progressDashboard .dash-day{
min-height:94px !important;
padding:11px !important;
border-radius:18px !important;
display:grid !important;
grid-template-rows:auto 1fr !important;
align-content:space-between !important;
position:relative !important;
}
#progressDashboard .dash-day-top{
display:block !important;
position:relative !important;
}
#progressDashboard .dash-day-top b{
display:block !important;
font-size:clamp(28px,8.4vw,40px) !important;
line-height:.92 !important;
letter-spacing:-.055em !important;
}
#progressDashboard .dash-day-state{display:none !important;}
#progressDashboard .dash-day-icon{
margin-top:6px !important;
font-size:30px !important;
line-height:1 !important;
opacity:.95 !important;
}
#progressDashboard .dash-day::after{
content:"Ej klar";
position:absolute;
right:10px;
bottom:10px;
color:rgba(214,230,246,.72);
font-size:11px;
font-weight:900;
letter-spacing:.03em;
}
#progressDashboard .dash-day.done::after{
content:"Klar";
color:var(--mock-cyan, #88e8ff);
}
/* Phase progress: support cards, not hero cards */
.quick-stats-grid{gap:10px !important;}
.progress-stat,
.stat-card.progress-stat{
padding:14px !important;
border-radius:20px !important;
}
.progress-stat .kicker{font-size:11px !important;}
.progress-stat .big{
font-size:clamp(26px,7.4vw,42px) !important;
}
.progress-stat .sub{
font-size:14px !important;
line-height:1.25 !important;
}
/* Profile/program: slight tightening */
@media(max-width:760px){
#profileScreen .overview-head{
padding:14px !important;
border-radius:22px !important;
}
#profileScreen .title{
font-size:clamp(34px,9vw,54px) !important;
margin:4px 0 8px !important;
}
#profileScreen .muted{
font-size:15px !important;
line-height:1.24 !important;
}
#profileScreen .stage-choice{
min-height:198px !important;
border-radius:24px !important;
}
#profileScreen .stage-choice b{
font-size:clamp(34px,9.5vw,54px) !important;
}
}
/* Active pass: player mode polish */
body.exercise-active .sticky-nav{
padding:calc(6px + env(safe-area-inset-top,0px)) 10px 7px !important;
background:linear-gradient(180deg,rgba(4,8,16,.98),rgba(4,8,16,.92)) !important;
box-shadow:0 10px 26px rgba(0,0,0,.24) !important;
}
body.exercise-active .nav-row{
grid-template-columns:44px 1fr !important;
gap:9px !important;
}
body.exercise-active #menuToggleBtn,
body.exercise-active .menu-toggle{
width:44px !important;
min-width:44px !important;
height:42px !important;
min-height:42px !important;
border-radius:14px !important;
}
body.exercise-active #exerciseMeta{
font-size:clamp(11px,3vw,14px) !important;
letter-spacing:.08em !important;
}
body.exercise-active .progress-shell{height:6px !important;}
body.exercise-active .video-card{
border-radius:0 0 18px 18px !important;
box-shadow:none !important;
}
body.exercise-active .video-wrap{
aspect-ratio:16 / 9 !important;
max-height:52svh !important;
}
body.exercise-active .info-card{
margin:7px 9px 0 !important;
padding:12px !important;
border-radius:20px !important;
gap:9px !important;
}
body.exercise-active #exerciseSection{
min-height:28px !important;
padding:5px 10px !important;
font-size:10.5px !important;
}
body.exercise-active .exercise-name{
font-size:clamp(31px,8.8vw,52px) !important;
line-height:.92 !important;
letter-spacing:-.064em !important;
}
body.exercise-active .exercise-reps{
min-height:68px !important;
border-radius:17px !important;
padding:8px !important;
}
body.exercise-active .rx-line{
font-size:clamp(38px,11vw,62px) !important;
}
body.exercise-active .coach-cues{
padding:11px 13px !important;
border-radius:17px !important;
}
body.exercise-active .coach-cues small{
font-size:10.5px !important;
margin-bottom:5px !important;
}
body.exercise-active .coach-cues ul{
font-size:15px !important;
line-height:1.32 !important;
}
body.exercise-active .pass-bottom-controls{
padding:7px 8px calc(7px + env(safe-area-inset-bottom,0px)) !important;
}
body.exercise-active .pass-bottom-controls.has-prev{
grid-template-columns:44px 1fr !important;
}
body.exercise-active #prevBtn{
width:44px !important;
min-width:44px !important;
max-width:44px !important;
height:52px !important;
min-height:52px !important;
border-radius:15px !important;
}
body.exercise-active #nextBtn{
min-height:54px !important;
border-radius:17px !important;
font-size:clamp(16px,4.6vw,20px) !important;
}
body.exercise-active .wrap{
padding-bottom:calc(78px + env(safe-area-inset-bottom,0px)) !important;
}
/* Rest view: dramatic but less wasteful */
body.exercise-active .rest-stage{
min-height:0 !important;
padding:18px 20px !important;
}
body.exercise-active .rest-kicker,
body.exercise-active .rest-stage > div:first-child{
font-size:14px !important;
opacity:.62 !important;
}
body.exercise-active .rest-title{
font-size:clamp(34px,9vw,52px) !important;
line-height:.9 !important;
}
body.exercise-active .rest-display{
font-size:clamp(78px,21vw,128px) !important;
line-height:.88 !important;
}
body.exercise-active .rest-next{
font-size:clamp(16px,4.4vw,21px) !important;
line-height:1.25 !important;
}
@media(max-width:390px){
#progressDashboard .dash-day{
min-height:88px !important;
padding:10px !important;
}
#progressDashboard .dash-day-top b{
font-size:30px !important;
}
body.exercise-active .coach-cues ul{
font-size:14px !important;
}
}
/* ==========================================================
v94.1 – Fixed nav + pass controls + rest image fit
========================================================== */
/* Mobile menu must be locked to viewport top */
@media(max-width:760px){
body:not(.exercise-active) .app-topbar{
position:fixed !important;
top:calc(env(safe-area-inset-top,0px) + 6px) !important;
left:12px !important;
right:12px !important;
width:auto !important;
max-width:none !important;
z-index:5000 !important;
transform:translateZ(0) !important;
will-change:transform !important;
-webkit-backdrop-filter:blur(18px) saturate(125%) !important;
backdrop-filter:blur(18px) saturate(125%) !important;
}
body:not(.exercise-active) .wrap{
padding-top:calc(76px + env(safe-area-inset-top,0px)) !important;
}
body:not(.exercise-active) .app-tabs{
position:fixed !important;
top:calc(68px + env(safe-area-inset-top,0px)) !important;
z-index:5010 !important;
}
}
/* Pass/vila controls: previous + next on same row whenever previous exists */
body.exercise-active .pass-bottom-controls{
position:fixed !important;
left:10px !important;
right:10px !important;
bottom:0 !important;
z-index:5000 !important;
display:grid !important;
grid-template-columns:1fr !important;
align-items:stretch !important;
gap:8px !important;
padding:7px 8px calc(7px + env(safe-area-inset-bottom,0px)) !important;
background:linear-gradient(180deg,rgba(5,10,19,0),rgba(5,10,19,.94) 28%,rgba(5,10,19,.99)) !important;
}
body.exercise-active .pass-bottom-controls.has-prev{
grid-template-columns:52px minmax(0,1fr) !important;
}
body.exercise-active #prevBtn{
position:static !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
min-width:52px !important;
width:52px !important;
max-width:52px !important;
height:auto !important;
min-height:54px !important;
margin:0 !important;
padding:0 !important;
border-radius:17px !important;
font-size:0 !important;
opacity:.82 !important;
}
body.exercise-active #prevBtn:disabled{
display:none !important;
}
body.exercise-active #prevBtn::before{
content:'←' !important;
font-size:23px !important;
line-height:1 !important;
}
body.exercise-active #nextBtn{
width:100% !important;
min-width:0 !important;
min-height:54px !important;
margin:0 !important;
}
body.exercise-active .wrap{
padding-bottom:calc(82px + env(safe-area-inset-bottom,0px)) !important;
}
/* Rest hero image should fill the full rest/movie frame */
body.exercise-active .rest-stage{
width:100% !important;
min-height:clamp(260px, 42svh, 440px) !important;
border-radius:0 0 24px 24px !important;
background-size:cover !important;
background-position:center center !important;
background-repeat:no-repeat !important;
display:grid !important;
align-content:center !important;
overflow:hidden !important;
}
body.exercise-active .rest-stage[data-rest-theme="downhill"],
body.exercise-active .rest-stage[data-rest-theme="hockey"],
body.exercise-active .rest-stage[data-rest-theme="goalie"]{
background-size:cover !important;
background-position:center center !important;
background-repeat:no-repeat !important;
}
body.exercise-active .rest-stage > *{
position:relative !important;
z-index:1 !important;
}
@media(max-width:390px){
body.exercise-active .pass-bottom-controls.has-prev{
grid-template-columns:48px minmax(0,1fr) !important;
}
body.exercise-active #prevBtn{
min-width:48px !important;
width:48px !important;
max-width:48px !important;
}
body.exercise-active .rest-stage{
min-height:clamp(240px, 40svh, 390px) !important;
}
}
/* ==========================================================
v95 FINAL MOCKUP PASS
Final polish layer:
1. Topbar becomes thinner and more integrated.
2. Dashboard week rhythm becomes icon/status based.
3. Active pass becomes closer to a video-player layout.
4. Shared radii, padding and button heights are normalized.
========================================================== */
:root{
--v95-radius-lg:24px;
--v95-radius-md:18px;
--v95-radius-sm:14px;
--v95-line:rgba(129,184,255,.15);
--v95-line-strong:rgba(135,232,255,.34);
--v95-glass:rgba(7,14,27,.78);
}
/* ----------------------------------------------------------
1. Unified spacing / forms
---------------------------------------------------------- */
.panel,.hero,.daily-primary,.daily-secondary,.profile-config-grid > .panel,
.selected-day-focus,.library-detail,.qa-row,.test-card,.info-card,.video-card,
.coach-cues,.exercise-reps,.timer-card,.week-day-card,.stage-choice{
border-radius:var(--v95-radius-lg) !important;
border-color:var(--v95-line) !important;
}
button,.main-btn,.ghost-btn,.seg-btn,.profile-btn,.day-start,.day-overview,
.next-pass-btn,.overview-pass-btn,.app-tab,.app-nav-toggle{
border-radius:var(--v95-radius-md) !important;
}
@media(max-width:760px){
.panel-pad{padding:13px !important;}
}
/* ----------------------------------------------------------
2. Topbar final integration
---------------------------------------------------------- */
@media(max-width:760px){
body:not(.exercise-active)::before{
height:82px !important;
background:linear-gradient(180deg,rgba(3,7,15,.88),rgba(3,7,15,.52) 66%,rgba(3,7,15,0)) !important;
}
body:not(.exercise-active) .app-topbar{
position:fixed !important;
top:calc(env(safe-area-inset-top,0px) + 5px) !important;
left:12px !important;
right:12px !important;
z-index:6000 !important;
min-height:50px !important;
padding:7px 9px !important;
border-radius:17px !important;
background:linear-gradient(180deg,rgba(5,10,20,.86),rgba(5,10,20,.72)) !important;
border-color:rgba(129,184,255,.14) !important;
box-shadow:0 10px 26px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.025) !important;
-webkit-backdrop-filter:blur(18px) saturate(125%) !important;
backdrop-filter:blur(18px) saturate(125%) !important;
}
body:not(.exercise-active) .wrap{
padding-top:calc(66px + env(safe-area-inset-top,0px)) !important;
}
body:not(.exercise-active) .app-location span{
font-size:9.5px !important;
letter-spacing:.14em !important;
opacity:.88 !important;
}
body:not(.exercise-active) .app-location strong{
font-size:18px !important;
line-height:1 !important;
letter-spacing:-.02em !important;
}
body:not(.exercise-active) .app-nav-toggle{
min-width:88px !important;
min-height:38px !important;
padding:6px 10px !important;
border-radius:14px !important;
font-size:16px !important;
background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025)) !important;
}
body:not(.exercise-active) .app-tabs{
position:fixed !important;
top:calc(62px + env(safe-area-inset-top,0px)) !important;
right:12px !important;
width:min(292px, calc(100vw - 24px)) !important;
z-index:6010 !important;
padding:9px !important;
gap:7px !important;
border-radius:18px !important;
background:rgba(5,10,20,.94) !important;
}
body:not(.exercise-active) .app-tab{
min-height:48px !important;
border-radius:14px !important;
font-size:17px !important;
}
}
/* ----------------------------------------------------------
3. Dashboard final density
---------------------------------------------------------- */
@media(max-width:760px){
#startScreen .daily-primary{
padding:15px !important;
border-radius:22px !important;
}
.dash-title{
font-size:clamp(36px,10.5vw,54px) !important;
line-height:.90 !important;
margin:6px 0 7px !important;
}
.dash-sub,.dash-context{
font-size:15px !important;
line-height:1.23 !important;
}
.dash-focus-card{
margin-top:10px !important;
padding:11px !important;
border-radius:16px !important;
}
.dash-focus-text{
font-size:clamp(16px,4.6vw,20px) !important;
}
.next-pass-btn{
min-height:58px !important;
border-radius:18px !important;
font-size:clamp(19px,5.4vw,25px) !important;
}
.overview-pass-btn{
min-height:48px !important;
border-radius:16px !important;
font-size:17px !important;
}
}
/* ----------------------------------------------------------
4. Week rhythm final: icon cards, less text
---------------------------------------------------------- */
#progressDashboard .daily-secondary{
border-radius:22px !important;
padding:13px !important;
}
#progressDashboard .dash-week-summary{
margin-top:10px !important;
margin-bottom:8px !important;
align-items:center !important;
}
#progressDashboard .dash-week-title{
font-size:clamp(22px,6vw,30px) !important;
line-height:1 !important;
}
#progressDashboard .dash-week-count{
min-height:38px !important;
padding:7px 10px !important;
border-radius:14px !important;
font-size:clamp(15px,4.5vw,20px) !important;
}
#progressDashboard .dash-grid{
gap:8px !important;
}
#progressDashboard .dash-day{
min-height:82px !important;
padding:10px !important;
border-radius:16px !important;
display:grid !important;
align-content:center !important;
justify-items:start !important;
position:relative !important;
background:linear-gradient(180deg,rgba(14,25,43,.84),rgba(8,15,28,.92)) !important;
}
#progressDashboard .dash-day-top{
display:block !important;
}
#progressDashboard .dash-day-top b{
font-size:clamp(25px,7.4vw,34px) !important;
line-height:.9 !important;
letter-spacing:-.055em !important;
}
#progressDashboard .dash-day-state,
#progressDashboard .dash-day::after{
display:none !important;
content:none !important;
}
#progressDashboard .dash-day-icon{
position:absolute !important;
right:10px !important;
bottom:9px !important;
margin:0 !important;
font-size:26px !important;
opacity:.92 !important;
}
#progressDashboard .dash-day.todo .dash-day-icon,
#progressDashboard .dash-day:not(.done) .dash-day-icon{
opacity:.62 !important;
filter:grayscale(.15) brightness(.85);
}
#progressDashboard .dash-day.done{
border-color:rgba(135,232,255,.42) !important;
background:linear-gradient(180deg,rgba(23,62,102,.72),rgba(8,24,44,.88)) !important;
}
#progressDashboard .dash-day.done .dash-day-icon{
opacity:1 !important;
filter:drop-shadow(0 0 10px rgba(135,232,255,.28));
}
/* ----------------------------------------------------------
5. Progress cards / secondary panels
---------------------------------------------------------- */
.progress-stat,
.stat-card.progress-stat{
padding:12px !important;
border-radius:18px !important;
}
.progress-stat .big{
font-size:clamp(24px,7vw,36px) !important;
}
.progress-stat .sub{
font-size:13.5px !important;
}
.progress-stat .mini-progress{
height:8px !important;
}
/* ----------------------------------------------------------
6. Active pass: final player-mode polish
---------------------------------------------------------- */
body.exercise-active .sticky-nav{
padding:calc(5px + env(safe-area-inset-top,0px)) 9px 6px !important;
background:linear-gradient(180deg,rgba(4,8,16,.98),rgba(4,8,16,.88)) !important;
}
body.exercise-active .nav-row{
grid-template-columns:42px 1fr !important;
gap:8px !important;
}
body.exercise-active #menuToggleBtn,
body.exercise-active .menu-toggle{
width:42px !important;
min-width:42px !important;
height:40px !important;
min-height:40px !important;
border-radius:13px !important;
}
body.exercise-active #exerciseMeta{
font-size:clamp(10.5px,2.9vw,13.5px) !important;
letter-spacing:.08em !important;
}
body.exercise-active .progress-shell{
height:5px !important;
}
body.exercise-active .stage-layout{
gap:6px !important;
}
body.exercise-active .video-card{
border-radius:0 0 16px 16px !important;
}
body.exercise-active .video-wrap{
aspect-ratio:16 / 9 !important;
max-height:54svh !important;
}
body.exercise-active .info-card{
margin:6px 8px 0 !important;
padding:11px !important;
border-radius:18px !important;
gap:8px !important;
background:linear-gradient(180deg,rgba(8,15,29,.88),rgba(5,10,20,.94)) !important;
}
body.exercise-active #exerciseSection{
min-height:26px !important;
padding:4px 9px !important;
font-size:10px !important;
}
body.exercise-active .exercise-name{
font-size:clamp(30px,8.4vw,48px) !important;
line-height:.91 !important;
}
body.exercise-active .exercise-reps{
min-height:62px !important;
padding:7px !important;
border-radius:15px !important;
}
body.exercise-active .rx-line{
font-size:clamp(34px,10.2vw,56px) !important;
}
body.exercise-active .coach-cues{
padding:10px 12px !important;
border-radius:15px !important;
}
body.exercise-active .coach-cues small{
font-size:10px !important;
margin-bottom:4px !important;
}
body.exercise-active .coach-cues ul{
font-size:14.5px !important;
line-height:1.28 !important;
}
/* Controls always same row when previous exists */
body.exercise-active .pass-bottom-controls{
left:8px !important;
right:8px !important;
padding:6px 7px calc(6px + env(safe-area-inset-bottom,0px)) !important;
gap:7px !important;
}
body.exercise-active .pass-bottom-controls.has-prev{
grid-template-columns:48px minmax(0,1fr) !important;
}
body.exercise-active #prevBtn{
width:48px !important;
min-width:48px !important;
max-width:48px !important;
min-height:52px !important;
border-radius:15px !important;
}
body.exercise-active #nextBtn{
min-height:52px !important;
border-radius:16px !important;
font-size:clamp(16px,4.5vw,20px) !important;
}
body.exercise-active .wrap{
padding-bottom:calc(76px + env(safe-area-inset-bottom,0px)) !important;
}
/* ----------------------------------------------------------
7. Rest image: full-cover movie frame
---------------------------------------------------------- */
body.exercise-active .rest-stage{
min-height:clamp(270px, 44svh, 460px) !important;
width:100% !important;
border-radius:0 0 18px 18px !important;
background-size:cover !important;
background-position:center center !important;
background-repeat:no-repeat !important;
}
body.exercise-active .rest-title{
font-size:clamp(32px,8.8vw,48px) !important;
}
body.exercise-active .rest-display{
font-size:clamp(74px,20vw,118px) !important;
}
body.exercise-active .rest-next{
font-size:clamp(15px,4.2vw,20px) !important;
}
/* ----------------------------------------------------------
8. Library/test/profile consistency
---------------------------------------------------------- */
#qaScreen .library-detail,
#testScreen .test-card,
#profileScreen .selector-panel,
#profileScreen .profile-panel{
border-radius:20px !important;
}
#qaScreen .library-video{
border-radius:17px !important;
}
/* Very narrow safety */
@media(max-width:390px){
body:not(.exercise-active) .wrap{
padding-top:calc(64px + env(safe-area-inset-top,0px)) !important;
}
#progressDashboard .dash-day{
min-height:76px !important;
padding:9px !important;
}
#progressDashboard .dash-day-top b{
font-size:26px !important;
}
body.exercise-active .video-wrap{
max-height:50svh !important;
}
body.exercise-active .coach-cues ul{
font-size:13.5px !important;
}
}
/* ==========================================================
v95.1 FINAL MICRO QA
- Topbar is portaled and truly fixed on mobile.
- Menu opens as compact 2x2 icon grid.
- Recovery frame is locked to 16:9 like video.
- Dashboard progress uses circular rings beside copy.
========================================================== */
/* Topbar portal keeps fixed positioning reliable in iOS Safari */
body.topbar-portal .app-topbar{
width:min(1220px, calc(100vw - 24px)) !important;
margin:0 auto !important;
}
@media(max-width:760px){
body.topbar-portal:not(.exercise-active) .app-topbar,
body:not(.exercise-active) .app-topbar{
position:fixed !important;
top:calc(env(safe-area-inset-top,0px) + 6px) !important;
left:12px !important;
right:12px !important;
width:auto !important;
max-width:none !important;
z-index:9000 !important;
min-height:50px !important;
padding:7px 9px !important;
border-radius:17px !important;
transform:translate3d(0,0,0) !important;
-webkit-transform:translate3d(0,0,0) !important;
will-change:transform !important;
background:linear-gradient(180deg,rgba(5,10,20,.94),rgba(5,10,20,.78)) !important;
border-color:rgba(129,184,255,.16) !important;
-webkit-backdrop-filter:blur(18px) saturate(125%) !important;
backdrop-filter:blur(18px) saturate(125%) !important;
}
body:not(.exercise-active) .wrap{
padding-top:calc(68px + env(safe-area-inset-top,0px)) !important;
}
body:not(.exercise-active) .app-location strong{
font-size:18px !important;
}
body:not(.exercise-active) .app-nav-toggle{
min-width:88px !important;
min-height:38px !important;
font-size:16px !important;
padding:6px 10px !important;
}
/* Compact 2x2 icon menu */
body:not(.exercise-active) .app-tabs{
position:fixed !important;
top:calc(62px + env(safe-area-inset-top,0px)) !important;
right:12px !important;
width:min(310px, calc(100vw - 24px)) !important;
z-index:9010 !important;
display:none !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:8px !important;
padding:10px !important;
border-radius:20px !important;
background:rgba(5,10,20,.96) !important;
border:1px solid rgba(129,184,255,.18) !important;
box-shadow:0 18px 44px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.03) !important;
-webkit-backdrop-filter:blur(18px) saturate(125%) !important;
backdrop-filter:blur(18px) saturate(125%) !important;
}
body:not(.exercise-active) .app-topbar.nav-open .app-tabs{
display:grid !important;
}
body:not(.exercise-active) .app-tab{
min-height:74px !important;
display:grid !important;
grid-template-columns:auto 1fr !important;
align-items:center !important;
justify-items:start !important;
gap:9px !important;
padding:10px 11px !important;
border-radius:17px !important;
font-size:15px !important;
line-height:1.05 !important;
text-align:left !important;
white-space:normal !important;
background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.022)) !important;
}
body:not(.exercise-active) .app-tab::before{
content:"";
width:24px;
height:24px;
display:block;
background:var(--menu-icon) center/contain no-repeat;
filter:drop-shadow(0 0 8px rgba(136,232,255,.24));
}
body:not(.exercise-active) .app-tab[data-target="startScreen"]{--menu-icon:url("../img/v93/icons/dashboard.svg");}
body:not(.exercise-active) .app-tab[data-target="profileScreen"]{--menu-icon:url("../img/v93/icons/profile.svg");}
body:not(.exercise-active) .app-tab[data-target="qaScreen"]{--menu-icon:url("../img/v93/icons/library.svg");}
body:not(.exercise-active) .app-tab[data-target="testScreen"]{--menu-icon:url("../img/v93/icons/tests.svg");}
body:not(.exercise-active) .dashboard-shortcuts-panel{
display:none !important;
}
}
/* Dashboard circular progress cards */
.quick-stats-grid{
display:grid !important;
grid-template-columns:1fr !important;
gap:10px !important;
}
.progress-stat,
.stat-card.progress-stat{
display:grid !important;
grid-template-columns:76px minmax(0,1fr) !important;
align-items:center !important;
gap:12px !important;
min-height:0 !important;
padding:12px !important;
border-radius:20px !important;
}
.ring-progress{
width:68px;
height:68px;
border-radius:50%;
display:grid;
place-items:center;
background:
radial-gradient(circle at 50% 50%, rgba(8,15,29,.94) 0 56%, transparent 57%),
conic-gradient(var(--mock-cyan,#88e8ff) calc(var(--p,0)*1%), rgba(139,173,220,.18) 0);
box-shadow:0 0 0 1px rgba(136,232,255,.16), 0 0 22px rgba(54,202,255,.12);
}
.ring-progress span{
font-weight:1000;
color:var(--mock-cyan,#88e8ff);
font-size:15px;
letter-spacing:-.03em;
}
.test-ring{
background:
radial-gradient(circle at 50% 50%, rgba(8,15,29,.94) 0 56%, transparent 57%),
conic-gradient(rgba(136,232,255,.42) 0 100%);
}
.test-ring span{
font-size:24px;
}
.progress-copy{
min-width:0;
}
.progress-stat .kicker{
font-size:10.5px !important;
letter-spacing:.15em !important;
margin-bottom:2px !important;
}
.progress-stat .big{
font-size:clamp(26px,7vw,40px) !important;
line-height:.95 !important;
letter-spacing:-.055em !important;
}
.progress-stat .sub{
font-size:13.5px !important;
line-height:1.18 !important;
margin-top:3px !important;
}
.progress-stat .mini-progress{
display:none !important;
}
.progress-stat .cta{
margin-top:5px !important;
font-size:14px !important;
color:var(--mock-cyan,#88e8ff) !important;
font-weight:950 !important;
}
@media(min-width:760px){
.quick-stats-grid{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
}
/* Recovery frame: same ratio/family as video, no jumping */
.video-wrap{
position:relative !important;
}
.video-wrap.rest-video-wrap,
.video-wrap:has(.rest-stage){
aspect-ratio:16 / 9 !important;
height:auto !important;
min-height:0 !important;
max-height:54svh !important;
overflow:hidden !important;
border-radius:0 0 18px 18px !important;
background:#030713 !important;
}
.video-wrap.rest-video-wrap .rest-stage,
.video-wrap:has(.rest-stage) .rest-stage{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
min-height:0 !important;
border-radius:inherit !important;
background-size:cover !important;
background-position:center center !important;
background-repeat:no-repeat !important;
align-content:center !important;
padding:clamp(14px,4vw,24px) !important;
}
.video-wrap.rest-video-wrap .rest-card,
.video-wrap:has(.rest-stage) .rest-card{
max-width:64% !important;
}
.video-wrap.rest-video-wrap .rest-title,
.video-wrap:has(.rest-stage) .rest-title{
font-size:clamp(30px,8.8vw,52px) !important;
}
.video-wrap.rest-video-wrap .rest-display,
.video-wrap:has(.rest-stage) .rest-display{
font-size:clamp(64px,18vw,118px) !important;
line-height:.82 !important;
}
.video-wrap.rest-video-wrap .rest-next,
.video-wrap:has(.rest-stage) .rest-next{
font-size:clamp(14px,4vw,19px) !important;
}
.video-wrap.rest-video-wrap .rest-equipment,
.video-wrap:has(.rest-stage) .rest-equipment{
font-size:clamp(12px,3.6vw,15px) !important;
line-height:1.2 !important;
}
@media(max-width:390px){
.progress-stat,
.stat-card.progress-stat{
grid-template-columns:64px minmax(0,1fr) !important;
gap:10px !important;
}
.ring-progress{
width:58px;
height:58px;
}
.ring-progress span{
font-size:13px;
}
body:not(.exercise-active) .app-tab{
min-height:68px !important;
font-size:14px !important;
}
.video-wrap.rest-video-wrap .rest-card,
.video-wrap:has(.rest-stage) .rest-card{
max-width:70% !important;
}
}
/* ==========================================================
v95.2 STRUCTURE CLEANUP
- Remove card-in-card feeling on dashboard.
- Hard fixed topbar fallback for iOS/Safari.
- Preserve compact 2x2 icon menu.
========================================================== */
/* Fixed means fixed: fallback even if JS portal misses for a moment */
@media(max-width:760px){
body.topbar-hard-fixed:not(.exercise-active) .app-topbar,
body.topbar-portal:not(.exercise-active) .app-topbar,
body:not(.exercise-active) .app-topbar{
position:fixed !important;
top:calc(env(safe-area-inset-top,0px) + 6px) !important;
left:12px !important;
right:12px !important;
width:auto !important;
max-width:none !important;
z-index:9000 !important;
margin:0 !important;
transform:translate3d(0,0,0) !important;
-webkit-transform:translate3d(0,0,0) !important;
will-change:transform !important;
contain:none !important;
}
body:not(.exercise-active) .wrap{
padding-top:calc(66px + env(safe-area-inset-top,0px)) !important;
}
body:not(.exercise-active) .app-tabs{
position:fixed !important;
top:calc(62px + env(safe-area-inset-top,0px)) !important;
z-index:9010 !important;
}
}
/* Dashboard: remove extra outer "cell" so content gets the full width */
@media(max-width:760px){
#startScreen{
gap:10px !important;
}
#startScreen .home-hero{
padding:0 !important;
margin:0 !important;
border:none !important;
background:transparent !important;
box-shadow:none !important;
border-radius:0 !important;
overflow:visible !important;
}
#startScreen .daily-primary{
margin:0 !important;
padding:16px !important;
border-radius:24px !important;
border:1px solid rgba(126,181,255,.16) !important;
box-shadow:0 16px 42px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.03) !important;
overflow:hidden !important;
}
/* Focus is content, not a new heavy card */
#startScreen .dash-focus-card,
#startScreen .dash-focus-card.compact{
margin-top:12px !important;
padding:0 !important;
border:none !important;
background:transparent !important;
box-shadow:none !important;
border-radius:0 !important;
}
#startScreen .dash-focus-label{
margin-bottom:5px !important;
}
#startScreen .dash-focus-text{
max-width:100% !important;
font-size:clamp(17px,4.8vw,22px) !important;
line-height:1.22 !important;
}
#startScreen .dash-focus-chips span{
min-height:28px !important;
padding:5px 10px !important;
border-radius:999px !important;
background:rgba(10,32,54,.64) !important;
}
#startScreen .dash-action-row{
margin-top:14px !important;
gap:9px !important;
}
#startScreen .next-pass-btn{
min-height:58px !important;
}
#startScreen .overview-pass-btn{
min-height:48px !important;
}
/* Progress summary: one clean card, no inner-cell squeeze */
#progressDashboard .daily-secondary{
padding:14px !important;
border-radius:24px !important;
overflow:hidden !important;
}
#progressDashboard .dash-progress{
padding:0 !important;
margin:0 0 12px !important;
border:none !important;
background:transparent !important;
box-shadow:none !important;
}
#progressDashboard .dash-row{
gap:8px !important;
align-items:flex-start !important;
}
#progressDashboard .dash-row span:first-child{
font-size:clamp(18px,5.1vw,25px) !important;
line-height:1.08 !important;
}
#progressDashboard .dash-row span:last-child{
font-size:clamp(20px,5.6vw,28px) !important;
line-height:1 !important;
}
#progressDashboard .dash-bar{
margin-top:9px !important;
height:8px !important;
}
#progressDashboard .dash-week-summary{
margin-top:12px !important;
}
#progressDashboard .dash-grid{
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:7px !important;
overflow:visible !important;
}
#progressDashboard .dash-day{
min-width:0 !important;
min-height:78px !important;
padding:9px !important;
border-radius:15px !important;
}
#progressDashboard .dash-day-top b{
font-size:clamp(23px,6.9vw,31px) !important;
}
#progressDashboard .dash-day-icon{
right:9px !important;
bottom:8px !important;
font-size:24px !important;
}
}
/* Quick stats: remove nested-card feel; ring and copy share one row */
.quick-stats-grid{
gap:9px !important;
}
.progress-stat,
.stat-card.progress-stat{
border-radius:18px !important;
padding:11px !important;
background:linear-gradient(180deg,rgba(9,18,33,.78),rgba(5,10,20,.86)) !important;
box-shadow:0 10px 26px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.025) !important;
}
@media(max-width:390px){
#startScreen .daily-primary{
padding:14px !important;
}
#progressDashboard .dash-row span:first-child{
font-size:18px !important;
}
#progressDashboard .dash-day{
min-height:72px !important;
padding:8px !important;
}
#progressDashboard .dash-day-top b{
font-size:24px !important;
}
}
/* ==========================================================
v95.3 BREADTH-MAX CLEANUP
- Move mobile navigation into the fixed top menu.
- Remove duplicated dashboard shortcuts on mobile.
- Let dashboard content use the same width logic as phase progress.
- Reduce card-in-card feeling across mobile screens.
========================================================== */
@media(max-width:760px){
/* Hard lock the topbar on iPhone/Safari */
body:not(.exercise-active) .app-topbar,
body.topbar-hard-fixed:not(.exercise-active) .app-topbar,
body.topbar-portal:not(.exercise-active) .app-topbar{
position:fixed !important;
top:max(6px, env(safe-area-inset-top,0px)) !important;
left:12px !important;
right:12px !important;
z-index:9999 !important;
}
body:not(.exercise-active) .wrap{
padding-top:calc(74px + env(safe-area-inset-top,0px)) !important;
}
/* Navigation lives in the dropdown, not in a duplicated dashboard card */
.dashboard-shortcuts-panel{
display:none !important;
}
.app-tabs{
display:none;
position:fixed !important;
right:12px !important;
top:calc(74px + env(safe-area-inset-top,0px)) !important;
width:min(292px, calc(100vw - 24px)) !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
padding:10px !important;
border-radius:24px !important;
background:rgba(6,12,23,.98) !important;
backdrop-filter:blur(18px) saturate(125%) !important;
box-shadow:0 20px 56px rgba(0,0,0,.42) !important;
}
.app-topbar.nav-open .app-tabs{
display:grid !important;
}
.app-tab{
min-height:84px !important;
padding:12px 14px !important;
display:flex !important;
flex-direction:column !important;
justify-content:center !important;
align-items:flex-start !important;
gap:8px !important;
text-align:left !important;
font-size:16px !important;
line-height:1.05 !important;
}
.app-tab .tab-icon{
display:block;
font-size:22px;
line-height:1;
color:var(--mock-cyan);
opacity:.95;
}
.app-tab span:last-child{
display:block;
font-size:17px;
font-weight:950;
letter-spacing:-.03em;
}
/* Give the core dashboard the full width rhythm from the quick stats section */
#startScreen,
#profileScreen,
#overviewScreen,
#qaScreen,
#testScreen{
gap:12px !important;
}
#startScreen .home-hero,
#profileScreen > .panel,
#overviewScreen > .panel,
#qaScreen > .panel,
#testScreen > .panel{
margin-left:0 !important;
margin-right:0 !important;
}
#startScreen .showcase-grid{
gap:12px !important;
}
#startScreen .showcase-dashboard{
border:none !important;
background:transparent !important;
box-shadow:none !important;
}
#startScreen .showcase-dashboard > .panel-pad{
padding:0 !important;
}
#startScreen .daily-primary,
#startScreen .daily-secondary,
#startScreen .quickstats-panel{
width:100% !important;
margin-left:0 !important;
margin-right:0 !important;
}
#startScreen .daily-primary{
padding:16px !important;
border-radius:26px !important;
}
#startScreen .dash-sub,
#startScreen .dash-context,
#startScreen .daily-time-pill{
margin-top:6px !important;
}
#startScreen .dash-focus-card,
#startScreen .dash-focus-card.compact{
margin-top:14px !important;
padding:0 !important;
background:transparent !important;
border:none !important;
box-shadow:none !important;
}
#startScreen .dash-action-row{
margin-top:14px !important;
gap:10px !important;
}
#startScreen .dash-action-row .next-pass-btn,
#startScreen .dash-action-row .overview-pass-btn{
width:100% !important;
}
#progressDashboard .daily-secondary{
padding:16px !important;
border-radius:26px !important;
}
#progressDashboard .dash-progress{
margin:0 0 14px !important;
padding:0 !important;
border:none !important;
background:transparent !important;
box-shadow:none !important;
}
#progressDashboard .dash-row{
display:grid !important;
grid-template-columns:minmax(0,1fr) auto !important;
gap:8px !important;
align-items:start !important;
}
#progressDashboard .dash-week-summary{
margin-top:0 !important;
margin-bottom:10px !important;
align-items:center !important;
}
#progressDashboard .dash-week-title{
font-size:clamp(24px,8vw,36px) !important;
line-height:.98 !important;
}
#progressDashboard .dash-week-count{
min-height:48px !important;
padding:0 16px !important;
border-radius:999px !important;
}
#progressDashboard .dash-grid{
gap:10px !important;
}
#progressDashboard .dash-day{
min-height:96px !important;
padding:12px !important;
border-radius:20px !important;
}
#progressDashboard .subtle-skip{
width:100% !important;
margin-top:10px !important;
}
/* Progress section: use the card width more efficiently */
.quickstats-panel .panel-pad{
padding:16px !important;
}
.quick-stats-grid{
gap:10px !important;
}
.progress-stat,
.stat-card.progress-stat{
min-height:102px !important;
align-items:center !important;
}
.progress-copy .big{
line-height:.95 !important;
}
/* Breadth-max other screens: reduce over-framing on mobile */
#profileScreen .profile-config-panel > .panel-pad,
#overviewScreen .panel > .panel-pad,
#qaScreen .panel > .panel-pad,
#testScreen .panel > .panel-pad{
padding:0 !important;
}
#profileScreen .overview-head,
#overviewScreen .overview-head,
#qaScreen .overview-head,
#testScreen .overview-head{
padding:16px !important;
margin-bottom:12px !important;
}
#profileScreen .profile-config-grid,
#overviewScreen #overviewInsights,
#overviewScreen #overviewFlow,
#qaScreen #qaList,
#testScreen #testGrid{
gap:12px !important;
}
#profileScreen .selector-panel .panel-pad,
#profileScreen .profile-overview-panel .panel-pad,
#profileScreen .week-overview-panel .panel-pad,
#profileScreen .passday-panel .panel-pad,
#profileScreen .data-panel .panel-pad,
#qaScreen .library-detail,
#testScreen .test-card,
#overviewScreen .selected-day-focus,
#overviewScreen .coach-checklist-panel,
#overviewScreen .flow-card,
#overviewScreen .overview-insight-card{
padding:14px !important;
}
/* Pass mode: keep the player width-maxed */
body.exercise-active .stage-layout,
body.exercise-active .playlist-card,
body.exercise-active .pass-bottom-controls,
body.exercise-active .sticky-nav{
width:100% !important;
}
}
/* ==========================================================
v95.4 QA HOTFIX
Final override after QA review:
- topbar fixed override at absolute end
- menu dropdown compact 2x2 at absolute end
- full-width mobile content shell
- dashboard weekly/progress blocks width aligned
========================================================== */
@media(max-width:760px){
html, body{
overflow-x:hidden !important;
}
.wrap{
width:100% !important;
max-width:100% !important;
padding-left:10px !important;
padding-right:10px !important;
box-sizing:border-box !important;
}
body:not(.exercise-active) .app-topbar{
position:fixed !important;
top:calc(env(safe-area-inset-top,0px) + 6px) !important;
left:10px !important;
right:10px !important;
width:auto !important;
max-width:none !important;
margin:0 !important;
z-index:10000 !important;
transform:translate3d(0,0,0) !important;
-webkit-transform:translate3d(0,0,0) !important;
}
body:not(.exercise-active) .wrap{
padding-top:calc(74px + env(safe-area-inset-top,0px)) !important;
}
body:not(.exercise-active) .app-tabs{
position:fixed !important;
display:none !important;
top:calc(env(safe-area-inset-top,0px) + 68px) !important;
right:10px !important;
left:auto !important;
width:min(300px, calc(100vw - 20px)) !important;
max-width:calc(100vw - 20px) !important;
z-index:10001 !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:8px !important;
padding:10px !important;
border-radius:22px !important;
}
body:not(.exercise-active) .app-topbar.nav-open .app-tabs{
display:grid !important;
}
body:not(.exercise-active) .app-tab{
min-height:74px !important;
padding:10px 11px !important;
border-radius:18px !important;
overflow:hidden !important;
}
body:not(.exercise-active) .app-tab .tab-icon{
font-size:20px !important;
}
body:not(.exercise-active) .app-tab span:last-child{
font-size:15.5px !important;
line-height:1.05 !important;
}
/* Universal width-max pass for standard screens */
#startScreen > *,
#profileScreen > *,
#overviewScreen > *,
#qaScreen > *,
#testScreen > *{
width:100% !important;
max-width:100% !important;
box-sizing:border-box !important;
}
#startScreen .showcase-grid,
#profileScreen .profile-config-grid,
#overviewScreen .developed-cards-grid,
#overviewScreen .overview-flow-grid,
#qaScreen .qa-grid,
#testScreen .test-grid{
width:100% !important;
max-width:100% !important;
box-sizing:border-box !important;
}
#startScreen .daily-primary,
#startScreen .daily-secondary,
#startScreen .quickstats-panel{
width:100% !important;
max-width:100% !important;
box-sizing:border-box !important;
}
#startScreen .daily-primary{
padding:15px !important;
}
#progressDashboard .daily-secondary{
padding:15px !important;
}
#progressDashboard .dash-progress,
#progressDashboard .dash-week-summary,
#progressDashboard .dash-grid{
width:100% !important;
max-width:100% !important;
box-sizing:border-box !important;
}
#progressDashboard .dash-row{
width:100% !important;
grid-template-columns:minmax(0,1fr) auto !important;
}
#progressDashboard .dash-row span:first-child{
min-width:0 !important;
}
#progressDashboard .dash-grid{
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
#progressDashboard .dash-day{
min-width:0 !important;
}
.quickstats-panel .panel-pad{
padding:15px !important;
}
.progress-stat,
.stat-card.progress-stat{
grid-template-columns:66px minmax(0,1fr) !important;
}
.ring-progress{
width:62px !important;
height:62px !important;
}
/* Prevent bottom browser toolbar from covering last progress item too badly */
.home-quickstats{
margin-bottom:24px !important;
}
}
@media(max-width:380px){
body:not(.exercise-active) .app-location strong{
font-size:16px !important;
}
body:not(.exercise-active) .app-nav-toggle{
min-width:82px !important;
font-size:15px !important;
}
#progressDashboard .dash-week-title{
font-size:25px !important;
}
#progressDashboard .dash-week-count{
min-height:42px !important;
padding:0 12px !important;
font-size:16px !important;
}
#progressDashboard .dash-day{
min-height:82px !important;
padding:9px !important;
}
#progressDashboard .dash-day-top b{
font-size:25px !important;
}
}
@media(max-width:760px){
body:not(.exercise-active) .wrap{
padding-top:var(--topbar-space, calc(74px + env(safe-area-inset-top,0px))) !important;
}
}
/* ==========================================================
v95.5 SCROLL-AWAY MENU
Clarification:
The top menu should sit at the top of the page, but scroll away.
It must NOT be fixed/sticky while scrolling.
========================================================== */
@media(max-width:760px){
body:not(.exercise-active)::before{
height:0 !important;
display:none !important;
}
body:not(.exercise-active) .wrap{
padding-top:10px !important;
}
body:not(.exercise-active) .app-topbar,
body.topbar-portal:not(.exercise-active) .app-topbar,
body.topbar-hard-fixed:not(.exercise-active) .app-topbar{
position:relative !important;
top:auto !important;
left:auto !important;
right:auto !important;
width:100% !important;
max-width:100% !important;
margin:0 0 12px 0 !important;
z-index:20 !important;
transform:none !important;
-webkit-transform:none !important;
will-change:auto !important;
contain:layout paint !important;
}
/* Dropdown belongs to the topbar and scrolls away with it */
body:not(.exercise-active) .app-tabs,
body.topbar-portal:not(.exercise-active) .app-tabs,
body.topbar-hard-fixed:not(.exercise-active) .app-tabs{
position:absolute !important;
top:calc(100% + 8px) !important;
right:0 !important;
left:auto !important;
width:min(300px, calc(100vw - 20px)) !important;
max-width:calc(100vw - 20px) !important;
z-index:30 !important;
display:none !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:8px !important;
padding:10px !important;
border-radius:22px !important;
}
body:not(.exercise-active) .app-topbar.nav-open .app-tabs{
display:grid !important;
}
body:not(.exercise-active) .app-tab{
min-height:74px !important;
padding:10px 11px !important;
}
/* Since the menu is in normal flow again, the first content block should start close below it */
#startScreen,
#profileScreen,
#overviewScreen,
#qaScreen,
#testScreen{
padding-top:0 !important;
}
}
/* Desktop can also scroll normally; no accidental fixed nav */
@media(min-width:761px){
body:not(.exercise-active) .app-topbar{
position:relative !important;
top:auto !important;
left:auto !important;
right:auto !important;
z-index:20 !important;
}
body:not(.exercise-active) .app-tabs{
position:absolute !important;
}
}
/* ==========================================================
v95.6 MENU SCROLL-AWAY REALFIX
Remove the remaining fixed/sticky conflict completely.
Topbar is ordinary document flow and scrolls away.
Dropdown is absolute inside the topbar and clickable.
========================================================== */
body.topbar-portal,
body.topbar-hard-fixed{
/* legacy classes may exist briefly, but should not change behavior */
}
.app-topbar{
overflow:visible !important;
pointer-events:auto !important;
}
.app-tabs,
.app-tab,
.app-nav-toggle{
pointer-events:auto !important;
}
@media(max-width:760px){
body:not(.exercise-active)::before{
display:none !important;
height:0 !important;
}
body:not(.exercise-active) .wrap{
padding-top:10px !important;
}
body:not(.exercise-active) .app-topbar,
body.topbar-portal:not(.exercise-active) .app-topbar,
body.topbar-hard-fixed:not(.exercise-active) .app-topbar{
position:relative !important;
inset:auto !important;
top:auto !important;
left:auto !important;
right:auto !important;
bottom:auto !important;
width:100% !important;
max-width:100% !important;
margin:0 0 12px 0 !important;
z-index:40 !important;
transform:none !important;
-webkit-transform:none !important;
will-change:auto !important;
contain:none !important;
overflow:visible !important;
}
body:not(.exercise-active) .app-tabs,
body.topbar-portal:not(.exercise-active) .app-tabs,
body.topbar-hard-fixed:not(.exercise-active) .app-tabs{
position:absolute !important;
top:calc(100% + 8px) !important;
right:0 !important;
left:auto !important;
bottom:auto !important;
width:min(300px, calc(100vw - 20px)) !important;
max-width:calc(100vw - 20px) !important;
z-index:80 !important;
display:none !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:8px !important;
padding:10px !important;
border-radius:22px !important;
pointer-events:auto !important;
}
body:not(.exercise-active) .app-topbar.nav-open .app-tabs{
display:grid !important;
}
body:not(.exercise-active) .app-tab{
min-height:74px !important;
padding:10px 11px !important;
pointer-events:auto !important;
}
/* Normal content starts directly after topbar */
#startScreen,
#profileScreen,
#overviewScreen,
#qaScreen,
#testScreen{
padding-top:0 !important;
}
}
/* Desktop/tablet also scrolls normally */
@media(min-width:761px){
body:not(.exercise-active) .app-topbar{
position:relative !important;
top:auto !important;
z-index:40 !important;
overflow:visible !important;
}
body:not(.exercise-active) .app-tabs{
position:absolute !important;
}
}
/* ==========================================================
v95.9 REST IMAGE + iPAD VIDEO FIX
- Rest images are now forced from inline --rest-asset-url.
- Old rest theme/background rules can no longer win.
- iPad/Safari iframe/video is forced to fill the full 16:9 frame.
========================================================== */
/* Preload current pause images */
body::after{
position:absolute;
width:0;
height:0;
overflow:hidden;
z-index:-1;
content:
url("../img/v95/rest/rest-goalie-pause.png")
url("../img/v95/rest/rest-hockey-pause.png")
url("../img/v95/rest/rest-downhill-pause.png");
}
/* Rest frame: the new inline asset variable wins over all older rules */
body.exercise-active .rest-stage.rest-stage-v959,
body.exercise-active .rest-stage.rest-visual-goalie-pause,
body.exercise-active .rest-stage.rest-visual-hockey-pause,
body.exercise-active .rest-stage.rest-visual-downhill-pause{
background:
linear-gradient(90deg,rgba(5,9,18,.92) 0%,rgba(5,9,18,.78) 42%,rgba(5,9,18,.28) 100%),
var(--rest-asset-url) center center / cover no-repeat !important;
background-size:cover !important;
background-position:center center !important;
background-repeat:no-repeat !important;
}
/* Remove/neutralize older pseudo overlays that made images feel like old variants */
body.exercise-active .rest-stage.rest-stage-v959::after{
background:radial-gradient(circle at 76% 25%,rgba(92,165,255,.12),transparent 38%) !important;
}
/* iPad / Safari video fit fix */
.video-wrap,
body.exercise-active .video-wrap,
body.exercise-active #videoWrap{
position:relative !important;
width:100% !important;
aspect-ratio:16 / 9 !important;
height:auto !important;
min-height:0 !important;
overflow:hidden !important;
background:#030713 !important;
}
.video-wrap iframe,
.video-wrap video,
.video-wrap embed,
.video-wrap object,
#videoWrap iframe,
#videoWrap video,
#videoWrap embed,
#videoWrap object{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
min-width:100% !important;
min-height:100% !important;
max-width:none !important;
max-height:none !important;
display:block !important;
border:0 !important;
object-fit:cover !important;
}
/* YouTube iframe wrapper safety */
.video-wrap .yt-frame,
.video-wrap .youtube-frame,
.video-wrap .iframe-shell,
.video-wrap .video-frame,
#videoWrap .yt-frame,
#videoWrap .youtube-frame,
#videoWrap .iframe-shell,
#videoWrap .video-frame{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
}
/* Rest uses exact same frame sizing as video */
.video-wrap.rest-video-wrap,
#videoWrap.rest-video-wrap{
aspect-ratio:16 / 9 !important;
height:auto !important;
min-height:0 !important;
max-height:min(54svh, 520px) !important;
}
.video-wrap.rest-video-wrap .rest-stage,
#videoWrap.rest-video-wrap .rest-stage{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
min-height:0 !important;
}
/* iPad-ish wide mobile/tablet layout */
@media (min-width:761px) and (max-width:1180px){
body.exercise-active .video-wrap,
body.exercise-active #videoWrap{
aspect-ratio:16 / 9 !important;
width:100% !important;
height:auto !important;
max-height:58vh !important;
}
body.exercise-active .video-card{
width:100% !important;
}
body.exercise-active .stage-layout{
grid-template-columns:minmax(0,1fr) !important;
width:100% !important;
}
}
/* ==========================================================
v95.10 REST IMAGE LAYER FIX
Rest images are now real ![]()
layers, not just background CSS.
This avoids old background/theme timing issues.
========================================================== */
body.exercise-active .rest-stage.rest-stage-v9510{
position:relative !important;
overflow:hidden !important;
background:#030713 !important;
isolation:isolate !important;
}
body.exercise-active .rest-stage.rest-stage-v9510 .rest-bg-img{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
min-width:100% !important;
min-height:100% !important;
object-fit:cover !important;
object-position:center center !important;
display:block !important;
z-index:0 !important;
pointer-events:none !important;
opacity:1 !important;
}
body.exercise-active .rest-stage.rest-stage-v9510 .rest-bg-overlay{
position:absolute !important;
inset:0 !important;
z-index:1 !important;
pointer-events:none !important;
background:
linear-gradient(90deg,rgba(5,9,18,.90) 0%,rgba(5,9,18,.72) 42%,rgba(5,9,18,.22) 100%),
radial-gradient(circle at 76% 25%,rgba(92,165,255,.14),transparent 38%) !important;
}
body.exercise-active .rest-stage.rest-stage-v9510 .rest-card{
position:relative !important;
z-index:2 !important;
}
/* Old pseudo overlays must not cover the actual rest image */
body.exercise-active .rest-stage.rest-stage-v9510::before,
body.exercise-active .rest-stage.rest-stage-v9510::after{
display:none !important;
content:none !important;
}
/* Keep rest frame identical to video frame */
.video-wrap.rest-video-wrap,
#videoWrap.rest-video-wrap{
aspect-ratio:16 / 9 !important;
position:relative !important;
overflow:hidden !important;
background:#030713 !important;
}
.video-wrap.rest-video-wrap .rest-stage.rest-stage-v9510,
#videoWrap.rest-video-wrap .rest-stage.rest-stage-v9510{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
min-height:0 !important;
}
/* iPad: iframe/video full frame, repeated after old rules */
#videoWrap iframe,
#videoWrap video,
.video-wrap iframe,
.video-wrap video{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
display:block !important;
object-fit:cover !important;
border:0 !important;
}
/* ==========================================================
v95.11 ONBOARDING + TABLET/DESKTOP TRAINING LAYOUT
- Onboarding is brought into the same visual system.
- iPad landscape / desktop shows instructions beside the film.
========================================================== */
/* ------------------------------
Onboarding style rescue
------------------------------ */
.onboarding,
#onboarding,
.onboarding-panel,
.start-onboarding,
.profile-start,
.create-profile-card{
width:100% !important;
max-width:100% !important;
box-sizing:border-box !important;
}
.onboarding input,
#onboarding input,
.profile-start input,
.create-profile-card input,
input[type="text"]{
border:1px solid rgba(129,184,255,.22) !important;
background:linear-gradient(180deg,rgba(8,15,29,.88),rgba(5,10,20,.94)) !important;
color:#fff !important;
border-radius:16px !important;
min-height:48px !important;
padding:10px 14px !important;
font-weight:800 !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.035), 0 10px 26px rgba(0,0,0,.16) !important;
}
.onboarding input::placeholder,
#onboarding input::placeholder,
.profile-start input::placeholder,
.create-profile-card input::placeholder{
color:rgba(218,232,255,.62) !important;
}
.onboarding button,
#onboarding button,
.profile-start button,
.create-profile-card button{
border-radius:18px !important;
}
.onboarding .stage-btn,
#onboarding .stage-btn,
.profile-start .stage-btn,
.create-profile-card .stage-btn,
.onboarding .age-btn,
#onboarding .age-btn,
.profile-start .age-btn,
.create-profile-card .age-btn,
.onboarding [data-stage],
#onboarding [data-stage]{
width:100% !important;
min-height:72px !important;
display:grid !important;
grid-template-columns:minmax(0,1fr) !important;
align-content:center !important;
justify-items:start !important;
gap:3px !important;
padding:14px 16px !important;
margin:8px 0 !important;
border-radius:22px !important;
border:1px solid rgba(129,184,255,.20) !important;
background:
linear-gradient(135deg,rgba(14,45,76,.78),rgba(8,15,29,.94)),
radial-gradient(circle at 78% 20%,rgba(135,232,255,.14),transparent 42%) !important;
color:#fff !important;
text-align:left !important;
box-shadow:0 12px 30px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.03) !important;
white-space:normal !important;
}
.onboarding .stage-btn strong,
#onboarding .stage-btn strong,
.profile-start .stage-btn strong,
.create-profile-card .stage-btn strong,
.onboarding .age-btn strong,
#onboarding .age-btn strong,
.profile-start .age-btn strong,
.create-profile-card .age-btn strong{
font-size:clamp(21px,5vw,28px) !important;
line-height:1 !important;
letter-spacing:-.045em !important;
color:#fff !important;
}
.onboarding .stage-btn span,
#onboarding .stage-btn span,
.profile-start .stage-btn span,
.create-profile-card .stage-btn span,
.onboarding .age-btn span,
#onboarding .age-btn span,
.profile-start .age-btn span,
.create-profile-card .age-btn span{
font-size:15px !important;
line-height:1.18 !important;
color:rgba(218,232,255,.78) !important;
}
.onboarding .stage-btn.active,
#onboarding .stage-btn.active,
.profile-start .stage-btn.active,
.create-profile-card .stage-btn.active,
.onboarding .age-btn.active,
#onboarding .age-btn.active,
.profile-start .age-btn.active,
.create-profile-card .age-btn.active,
.onboarding [data-stage].active,
#onboarding [data-stage].active{
border-color:rgba(135,232,255,.58) !important;
box-shadow:0 0 0 1px rgba(135,232,255,.20), 0 18px 42px rgba(29,151,255,.18), inset 0 1px 0 rgba(255,255,255,.05) !important;
background:
linear-gradient(135deg,rgba(20,78,124,.88),rgba(8,20,39,.96)),
radial-gradient(circle at 82% 12%,rgba(135,232,255,.22),transparent 46%) !important;
}
.onboarding .muted-card,
#onboarding .muted-card,
.profile-start .muted-card,
.create-profile-card .muted-card{
border-radius:22px !important;
border:1px solid rgba(129,184,255,.14) !important;
background:linear-gradient(180deg,rgba(12,22,39,.82),rgba(6,12,23,.92)) !important;
color:rgba(234,242,255,.84) !important;
}
/* Known first-run/onboarding text blocks in the app */
#startScreen .onboarding-card,
#startScreen .profile-onboarding,
#startScreen .quick-start-card,
#startScreen .start-profile-card,
#startScreen .create-profile,
#startScreen .start-panel{
border-radius:26px !important;
border:1px solid rgba(129,184,255,.16) !important;
background:
linear-gradient(180deg,rgba(9,18,33,.86),rgba(5,10,20,.94)),
radial-gradient(circle at 80% 10%,rgba(135,232,255,.12),transparent 44%) !important;
box-shadow:0 16px 42px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.03) !important;
padding:16px !important;
overflow:hidden !important;
}
/* Generic fallback for old onboarding buttons that were still white pills */
#startScreen button:not(.app-nav-toggle):not(.app-tab):not(.next-pass-btn):not(.overview-pass-btn){
border:1px solid rgba(129,184,255,.24);
}
/* Remove white-pill look from stage choice buttons even if old classes are missing */
#startScreen .stage-choice,
#startScreen .age-choice,
#startScreen .track-choice{
border-radius:22px !important;
background:
linear-gradient(135deg,rgba(14,45,76,.78),rgba(8,15,29,.94)),
radial-gradient(circle at 78% 20%,rgba(135,232,255,.14),transparent 42%) !important;
color:#fff !important;
border-color:rgba(129,184,255,.20) !important;
padding:14px 16px !important;
min-height:72px !important;
text-align:left !important;
white-space:normal !important;
}
#startScreen .stage-choice *,
#startScreen .age-choice *,
#startScreen .track-choice *{
color:inherit !important;
}
/* ------------------------------
iPad landscape / desktop: media left, instructions right
------------------------------ */
@media (min-width:900px) and (orientation:landscape){
body.exercise-active .stage-layout{
display:grid !important;
grid-template-columns:minmax(0,1.25fr) minmax(340px,.75fr) !important;
gap:18px !important;
align-items:start !important;
width:100% !important;
max-width:min(1360px, calc(100vw - 32px)) !important;
margin:0 auto !important;
}
body.exercise-active .video-card{
grid-column:1 !important;
position:sticky !important;
top:78px !important;
align-self:start !important;
width:100% !important;
}
body.exercise-active .info-card{
grid-column:2 !important;
margin:0 !important;
align-self:start !important;
width:100% !important;
max-height:calc(100vh - 116px) !important;
overflow:auto !important;
padding:18px !important;
}
body.exercise-active .video-wrap,
body.exercise-active #videoWrap{
aspect-ratio:16 / 9 !important;
width:100% !important;
height:auto !important;
max-height:calc(100vh - 150px) !important;
}
body.exercise-active .exercise-name{
font-size:clamp(34px,3.6vw,58px) !important;
}
body.exercise-active .rx-line{
font-size:clamp(38px,5vw,72px) !important;
}
body.exercise-active .coach-cues ul{
font-size:clamp(15px,1.45vw,19px) !important;
}
body.exercise-active .pass-bottom-controls{
max-width:min(1360px, calc(100vw - 32px)) !important;
left:50% !important;
right:auto !important;
transform:translateX(-50%) !important;
}
}
@media (min-width:1024px){
body.exercise-active .stage-layout{
display:grid !important;
grid-template-columns:minmax(0,1.35fr) minmax(360px,.65fr) !important;
gap:20px !important;
align-items:start !important;
max-width:min(1440px, calc(100vw - 40px)) !important;
margin:0 auto !important;
}
body.exercise-active .video-card{
grid-column:1 !important;
}
body.exercise-active .info-card{
grid-column:2 !important;
margin:0 !important;
}
}
/* ==========================================================
v95.12 TABLET/DESKTOP NAV INLINE
- iPad/desktop should not use the toned mobile dropdown menu.
- Navigation buttons live directly in the topbar.
- Start-screen duplicate shortcut panel is hidden on wider screens.
========================================================== */
@media (min-width: 900px){
body:not(.exercise-active) .app-topbar,
body.topbar-portal:not(.exercise-active) .app-topbar,
body.topbar-hard-fixed:not(.exercise-active) .app-topbar{
display:grid !important;
grid-template-columns:minmax(170px,.9fr) auto !important;
grid-template-areas:
"loc primary"
"tabs tabs" !important;
align-items:center !important;
gap:14px !important;
padding:18px !important;
overflow:visible !important;
}
body:not(.exercise-active) .app-location{
grid-area:loc !important;
min-width:0 !important;
}
body:not(.exercise-active) .app-primary-action{
grid-area:primary !important;
justify-self:end !important;
min-height:58px !important;
padding:0 22px !important;
white-space:nowrap !important;
}
body:not(.exercise-active) .app-nav-toggle{
display:none !important;
}
body:not(.exercise-active) .app-tabs,
body.topbar-portal:not(.exercise-active) .app-tabs,
body.topbar-hard-fixed:not(.exercise-active) .app-tabs{
grid-area:tabs !important;
position:static !important;
inset:auto !important;
top:auto !important;
left:auto !important;
right:auto !important;
width:100% !important;
max-width:none !important;
display:grid !important;
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
gap:12px !important;
padding:0 !important;
margin:0 !important;
border:0 !important;
border-radius:0 !important;
background:transparent !important;
box-shadow:none !important;
z-index:auto !important;
}
body:not(.exercise-active) .app-topbar.nav-open .app-tabs{
display:grid !important;
}
body:not(.exercise-active) .app-tab{
min-height:72px !important;
padding:14px 16px !important;
border-radius:22px !important;
border:1px solid rgba(129,184,255,.18) !important;
background:linear-gradient(180deg,rgba(14,23,40,.92),rgba(8,14,27,.96)) !important;
box-shadow:0 14px 34px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.025) !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:10px !important;
text-align:center !important;
font-size:clamp(16px,1.7vw,20px) !important;
font-weight:900 !important;
}
body:not(.exercise-active) .app-tab .tab-icon{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
font-size:20px !important;
opacity:.95 !important;
}
body:not(.exercise-active) .app-tab.active{
border-color:rgba(108,225,255,.52) !important;
box-shadow:0 0 0 1px rgba(108,225,255,.24), 0 16px 36px rgba(0,0,0,.28), inset 0 -3px 0 rgba(108,225,255,.62) !important;
background:linear-gradient(180deg,rgba(40,92,162,.92),rgba(18,34,69,.96)) !important;
}
body:not(.exercise-active) .dashboard-shortcuts-panel{
display:none !important;
}
}
@media (min-width: 900px) and (max-width: 1180px){
body:not(.exercise-active) .app-topbar{
grid-template-columns:minmax(150px,.85fr) auto !important;
gap:12px !important;
padding:16px !important;
}
body:not(.exercise-active) .app-tab{
min-height:66px !important;
padding:12px 12px !important;
font-size:clamp(15px,1.55vw,18px) !important;
}
}
@media (min-width: 1200px){
body:not(.exercise-active) .app-topbar{
gap:16px !important;
}
body:not(.exercise-active) .app-tab{
min-height:76px !important;
}
}
/* ==========================================================
v95.13 PASS MENU CLEANUP
- Pass menu gets the same cleaned component language as the app.
- Less height, clearer grouping, better tap targets.
- Menu no longer feels like a stack of random legacy buttons.
========================================================== */
/* Exercise topbar: calmer and more compact */
body.exercise-active .sticky-nav{
padding:calc(7px + env(safe-area-inset-top,0px)) 10px 8px !important;
background:linear-gradient(180deg,rgba(4,8,16,.98),rgba(4,8,16,.90)) !important;
border-bottom:1px solid rgba(129,184,255,.12) !important;
}
body.exercise-active .nav-row{
display:grid !important;
grid-template-columns:46px minmax(0,1fr) !important;
gap:10px !important;
align-items:center !important;
}
body.exercise-active #menuToggleBtn,
body.exercise-active .menu-toggle{
width:46px !important;
min-width:46px !important;
height:44px !important;
min-height:44px !important;
padding:0 !important;
border-radius:15px !important;
font-size:0 !important;
display:grid !important;
place-items:center !important;
background:linear-gradient(180deg,rgba(17,31,51,.94),rgba(7,13,25,.96)) !important;
border:1px solid rgba(129,184,255,.20) !important;
box-shadow:0 8px 22px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.035) !important;
}
body.exercise-active #menuToggleBtn::before,
body.exercise-active .menu-toggle::before{
content:"☰";
font-size:24px;
line-height:1;
color:#fff;
}
body.exercise-active #exerciseMeta{
min-width:0 !important;
font-size:clamp(11px,3.1vw,15px) !important;
letter-spacing:.10em !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
/* Pass tool/menu panel */
body.exercise-active .tool-panel,
body.exercise-active .pass-menu,
body.exercise-active .session-menu,
body.exercise-active .exercise-menu,
body.exercise-active #toolPanel,
body.exercise-active #passMenu{
margin:8px 10px 8px !important;
padding:10px !important;
border-radius:22px !important;
border:1px solid rgba(129,184,255,.16) !important;
background:rgba(5,10,20,.96) !important;
box-shadow:0 18px 50px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.03) !important;
backdrop-filter:blur(18px) saturate(125%) !important;
}
/* Target common button grids in the pass menu without affecting content cards */
body.exercise-active .tool-panel .tool-grid,
body.exercise-active .tool-panel .settings-grid,
body.exercise-active .tool-panel .menu-grid,
body.exercise-active .pass-menu .tool-grid,
body.exercise-active .pass-menu .settings-grid,
body.exercise-active .pass-menu .menu-grid,
body.exercise-active #toolPanel .tool-grid,
body.exercise-active #passMenu .tool-grid{
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:8px !important;
}
/* Generic pass-menu buttons */
body.exercise-active .tool-panel button,
body.exercise-active .pass-menu button,
body.exercise-active .session-menu button,
body.exercise-active .exercise-menu button,
body.exercise-active #toolPanel button,
body.exercise-active #passMenu button{
min-height:46px !important;
border-radius:15px !important;
padding:9px 10px !important;
font-size:clamp(13px,3.4vw,16px) !important;
line-height:1.05 !important;
font-weight:950 !important;
letter-spacing:-.025em !important;
color:#fff !important;
background:linear-gradient(180deg,rgba(14,23,40,.92),rgba(8,14,27,.96)) !important;
border:1px solid rgba(129,184,255,.17) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.025) !important;
text-align:center !important;
white-space:normal !important;
}
/* Active/on-looking buttons get cyan edge, not huge color blast */
body.exercise-active .tool-panel button.active,
body.exercise-active .pass-menu button.active,
body.exercise-active .session-menu button.active,
body.exercise-active .exercise-menu button.active,
body.exercise-active #toolPanel button.active,
body.exercise-active #passMenu button.active,
body.exercise-active .tool-panel button[aria-pressed="true"],
body.exercise-active .pass-menu button[aria-pressed="true"],
body.exercise-active #toolPanel button[aria-pressed="true"],
body.exercise-active #passMenu button[aria-pressed="true"]{
border-color:rgba(135,232,255,.42) !important;
background:linear-gradient(180deg,rgba(18,60,96,.92),rgba(8,22,41,.96)) !important;
box-shadow:0 0 0 1px rgba(135,232,255,.16), inset 0 1px 0 rgba(255,255,255,.035) !important;
}
/* Destructive exit button should be visible but not dominate */
body.exercise-active .tool-panel button.danger,
body.exercise-active .tool-panel button.danger-btn,
body.exercise-active .pass-menu button.danger,
body.exercise-active .pass-menu button.danger-btn,
body.exercise-active #toolPanel button.danger,
body.exercise-active #toolPanel button.danger-btn,
body.exercise-active #passMenu button.danger,
body.exercise-active #passMenu button.danger-btn{
border-color:rgba(255,129,129,.22) !important;
background:linear-gradient(180deg,rgba(52,20,25,.82),rgba(18,9,14,.94)) !important;
}
/* If the menu is just a plain div with buttons, make the button collection a neat grid */
body.exercise-active .tool-panel,
body.exercise-active #toolPanel{
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:8px !important;
}
body.exercise-active .tool-panel > *,
body.exercise-active #toolPanel > *{
min-width:0 !important;
}
/* Exit/fullscreen can span if marked by old layout width */
body.exercise-active .tool-panel .wide,
body.exercise-active #toolPanel .wide,
body.exercise-active .pass-menu .wide,
body.exercise-active #passMenu .wide{
grid-column:1 / -1 !important;
}
/* On tablet/desktop pass mode: menu should be side-panel compact, not overlay-heavy */
@media(min-width:900px){
body.exercise-active .tool-panel,
body.exercise-active #toolPanel,
body.exercise-active .pass-menu,
body.exercise-active #passMenu{
max-width:520px !important;
margin:10px auto 12px !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
body.exercise-active .tool-panel button,
body.exercise-active #toolPanel button,
body.exercise-active .pass-menu button,
body.exercise-active #passMenu button{
min-height:44px !important;
font-size:14px !important;
}
}
/* Very small phones */
@media(max-width:390px){
body.exercise-active .tool-panel,
body.exercise-active #toolPanel,
body.exercise-active .pass-menu,
body.exercise-active #passMenu{
margin-left:8px !important;
margin-right:8px !important;
padding:8px !important;
gap:7px !important;
}
body.exercise-active .tool-panel button,
body.exercise-active #toolPanel button,
body.exercise-active .pass-menu button,
body.exercise-active #passMenu button{
min-height:42px !important;
font-size:12.5px !important;
padding:8px !important;
}
}
/* ==========================================================
v95.14 NAV-ONLY TOPBAR
Top navigation should only contain the page buttons.
Remove redundant "Dashboard / Start" text and "Starta pass" action.
========================================================== */
body:not(.exercise-active) .app-location,
body:not(.exercise-active) .app-primary-action{
display:none !important;
}
/* Mobile: only a compact menu button remains at top; dropdown contains nav buttons */
@media(max-width:899px){
body:not(.exercise-active) .app-topbar{
display:flex !important;
justify-content:flex-end !important;
align-items:center !important;
min-height:54px !important;
padding:8px 10px !important;
}
body:not(.exercise-active) .app-nav-toggle{
margin-left:auto !important;
}
}
/* iPad / desktop: show only the 4 navigation buttons, no header text or start button */
@media(min-width:900px){
body:not(.exercise-active) .app-topbar,
body.topbar-portal:not(.exercise-active) .app-topbar,
body.topbar-hard-fixed:not(.exercise-active) .app-topbar{
display:block !important;
padding:16px !important;
min-height:0 !important;
}
body:not(.exercise-active) .app-nav-toggle{
display:none !important;
}
body:not(.exercise-active) .app-tabs,
body.topbar-portal:not(.exercise-active) .app-tabs,
body.topbar-hard-fixed:not(.exercise-active) .app-tabs{
position:static !important;
display:grid !important;
width:100% !important;
max-width:none !important;
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
gap:12px !important;
padding:0 !important;
margin:0 !important;
border:0 !important;
background:transparent !important;
box-shadow:none !important;
}
body:not(.exercise-active) .app-tab{
min-height:72px !important;
}
}
/* Wide desktop can stay elegant without becoming huge */
@media(min-width:1200px){
body:not(.exercise-active) .app-topbar{
padding:16px 18px !important;
}
body:not(.exercise-active) .app-tab{
min-height:74px !important;
}
}
/* ==========================================================
v95.15 TOP SHADE FIX
Remove the unintended top shading/vignette above the topbar.
Keep the header clean while preserving the overall dark theme.
========================================================== */
/* Normal app views: no extra top wash / gradient layer */
body:not(.exercise-active)::before,
body.topbar-portal:not(.exercise-active)::before,
body.topbar-hard-fixed:not(.exercise-active)::before{
display:none !important;
content:none !important;
height:0 !important;
background:none !important;
box-shadow:none !important;
}
/* Also remove any decorative top haze layer that can read as a shadow band */
body:not(.exercise-active)::after{
background:none !important;
box-shadow:none !important;
}
/* Make the topbar sit cleaner against the page top */
body:not(.exercise-active) .app-topbar,
body.topbar-portal:not(.exercise-active) .app-topbar,
body.topbar-hard-fixed:not(.exercise-active) .app-topbar{
box-shadow:0 10px 24px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.025) !important;
}
@media(max-width:760px){
body:not(.exercise-active) .wrap{
padding-top:10px !important;
}
}
/* ==========================================================
v95.16 PASS MENU FUNCTION FIX
- Exercise list now targets the real .playlist-card element.
- Old display:none!important is overridden correctly.
- Pass menu buttons get explicit on/off state markup.
- The menu remains compact but the controls are easier to understand.
========================================================== */
body.exercise-active.playlist-visible .playlist-card,
body.exercise-active .playlist-card.open{
display:block !important;
}
body.exercise-active.playlist-hidden .playlist-card,
body.exercise-active .playlist-card[aria-hidden="true"]{
display:none !important;
}
body.exercise-active .playlist-card{
margin:10px 10px calc(90px + var(--safe-bottom)) !important;
padding:10px !important;
border-radius:22px !important;
max-height:min(46svh, 420px) !important;
overflow:auto !important;
}
body.exercise-active #settingsMenu.top-tools{
display:none !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:8px !important;
padding:10px !important;
border-radius:22px !important;
background:rgba(5,10,20,.97) !important;
border:1px solid rgba(129,184,255,.18) !important;
box-shadow:0 18px 50px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.03) !important;
}
body.exercise-active #settingsMenu.top-tools.open{
display:grid !important;
}
body.exercise-active #settingsMenu .tool-btn{
min-height:48px !important;
border-radius:15px !important;
padding:8px 10px !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:8px !important;
font-size:13px !important;
line-height:1 !important;
text-align:left !important;
}
body.exercise-active #settingsMenu .tool-btn span{
min-width:0 !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
body.exercise-active #settingsMenu .tool-btn b{
flex:0 0 auto !important;
font-size:11px !important;
color:var(--cyan) !important;
padding:5px 7px !important;
border-radius:999px !important;
border:1px solid rgba(135,232,255,.22) !important;
background:rgba(7,35,56,.54) !important;
}
body.exercise-active #settingsMenu .tool-btn.off b,
body.exercise-active #settingsMenu .tool-btn[aria-pressed="false"] b{
color:rgba(218,232,255,.58) !important;
border-color:rgba(160,185,225,.14) !important;
background:rgba(255,255,255,.035) !important;
}
body.exercise-active #settingsMenu .danger-tool{
grid-column:1 / -1 !important;
justify-content:center !important;
border-color:rgba(255,129,129,.22) !important;
background:linear-gradient(180deg,rgba(52,20,25,.82),rgba(18,9,14,.94)) !important;
}
body.pseudo-fullscreen.exercise-active{
overflow:hidden !important;
}
body.pseudo-fullscreen.exercise-active #exerciseScreen{
position:fixed !important;
inset:0 !important;
z-index:9999 !important;
overflow:auto !important;
background:#030713 !important;
}
@media(min-width:900px){
body.exercise-active #settingsMenu.top-tools.open{
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
max-width:580px !important;
left:12px !important;
right:auto !important;
}
body.exercise-active .playlist-card{
max-width:min(1360px, calc(100vw - 32px)) !important;
margin-left:auto !important;
margin-right:auto !important;
}
}
/* ==========================================================
v95.17 NEXT BUTTON WIDTH FIX
Bug: when returning to the first exercise, the previous button disappears
and the next/rest button could collapse into a narrow vertical button.
Fix: no-prev state = one full-width action button.
========================================================== */
body.exercise-active .pass-bottom-controls{
width:100% !important;
max-width:100% !important;
}
/* Default: only next/rest button visible -> full width */
body.exercise-active .pass-bottom-controls:not(.has-prev),
body.exercise-active:not(.pass-has-prev) .pass-bottom-controls{
display:grid !important;
grid-template-columns:1fr !important;
}
/* When previous is hidden/disabled, it must not reserve or distort space */
body.exercise-active .pass-bottom-controls:not(.has-prev) #prevBtn,
body.exercise-active:not(.pass-has-prev) #prevBtn{
display:none !important;
}
/* Next/rest action owns the whole row in no-prev state */
body.exercise-active .pass-bottom-controls:not(.has-prev) #nextBtn,
body.exercise-active:not(.pass-has-prev) #nextBtn{
grid-column:1 / -1 !important;
width:100% !important;
max-width:none !important;
min-width:0 !important;
min-height:58px !important;
white-space:nowrap !important;
text-align:center !important;
justify-content:center !important;
align-items:center !important;
flex-direction:row !important;
}
/* With previous available: two-column compact row */
body.exercise-active .pass-bottom-controls.has-prev,
body.exercise-active.pass-has-prev .pass-bottom-controls{
display:grid !important;
grid-template-columns:minmax(96px, 0.34fr) minmax(0, 1fr) !important;
}
body.exercise-active .pass-bottom-controls.has-prev #prevBtn,
body.exercise-active.pass-has-prev .pass-bottom-controls #prevBtn{
display:inline-flex !important;
width:100% !important;
}
body.exercise-active .pass-bottom-controls.has-prev #nextBtn,
body.exercise-active.pass-has-prev .pass-bottom-controls #nextBtn{
width:100% !important;
min-width:0 !important;
white-space:nowrap !important;
}
/* Small phones: preserve row, never let the next button become a tall narrow pill */
@media(max-width:430px){
body.exercise-active .pass-bottom-controls:not(.has-prev),
body.exercise-active:not(.pass-has-prev) .pass-bottom-controls{
grid-template-columns:1fr !important;
}
body.exercise-active .pass-bottom-controls.has-prev,
body.exercise-active.pass-has-prev .pass-bottom-controls{
grid-template-columns:minmax(88px, .34fr) minmax(0, 1fr) !important;
}
body.exercise-active #nextBtn{
font-size:clamp(17px,5.2vw,24px) !important;
line-height:1.05 !important;
}
}
/* ==========================================================
v95.18 DEEP BUGFIX PASS CONTROLS
Findings:
- Bottom button row state was not synced on every render path.
- Pass menu cleanup targeted some legacy/generic selectors instead of the real #settingsMenu.top-tools.
- Fullscreen could be a silent no-op on iOS/Safari.
========================================================== */
body.exercise-active #settingsMenu.top-tools{
position:fixed !important;
left:10px !important;
right:10px !important;
top:calc(64px + env(safe-area-inset-top,0px)) !important;
z-index:650 !important;
display:none !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:8px !important;
padding:10px !important;
border-radius:22px !important;
border:1px solid rgba(129,184,255,.18) !important;
background:rgba(5,10,20,.98) !important;
box-shadow:0 20px 56px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.035) !important;
backdrop-filter:blur(18px) saturate(125%) !important;
}
body.exercise-active #settingsMenu.top-tools.open{
display:grid !important;
}
body.exercise-active #settingsMenu.top-tools .tool-btn{
min-height:46px !important;
border-radius:16px !important;
padding:9px 11px !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:8px !important;
color:#fff !important;
background:linear-gradient(180deg,rgba(14,23,40,.94),rgba(8,14,27,.96)) !important;
border:1px solid rgba(129,184,255,.18) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.025) !important;
font-size:14px !important;
font-weight:950 !important;
line-height:1.05 !important;
}
body.exercise-active #settingsMenu.top-tools .tool-btn span{
min-width:0 !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
body.exercise-active #settingsMenu.top-tools .tool-btn b{
flex:0 0 auto !important;
font-size:12px !important;
color:var(--mock-cyan, #7cecff) !important;
letter-spacing:.02em !important;
}
body.exercise-active #settingsMenu.top-tools .tool-btn.on,
body.exercise-active #settingsMenu.top-tools .tool-btn[aria-pressed="true"]{
border-color:rgba(135,232,255,.46) !important;
background:linear-gradient(180deg,rgba(20,60,98,.94),rgba(9,22,42,.98)) !important;
box-shadow:0 0 0 1px rgba(135,232,255,.14), inset 0 1px 0 rgba(255,255,255,.035) !important;
}
body.exercise-active #settingsMenu.top-tools .danger-tool{
grid-column:1 / -1 !important;
border-color:rgba(255,129,129,.26) !important;
background:linear-gradient(180deg,rgba(56,20,28,.86),rgba(18,9,14,.96)) !important;
}
@media(min-width:900px){
body.exercise-active #settingsMenu.top-tools{
left:50% !important;
right:auto !important;
width:min(560px, calc(100vw - 32px)) !important;
transform:translateX(-50%) !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
top:calc(72px + env(safe-area-inset-top,0px)) !important;
}
}
body.exercise-active .pass-bottom-controls{
display:grid !important;
width:100% !important;
max-width:100% !important;
}
body.exercise-active .pass-bottom-controls:not(.has-prev),
body.exercise-active:not(.pass-has-prev) .pass-bottom-controls{
grid-template-columns:1fr !important;
}
body.exercise-active .pass-bottom-controls:not(.has-prev) #prevBtn,
body.exercise-active:not(.pass-has-prev) .pass-bottom-controls #prevBtn,
body.exercise-active #prevBtn[aria-hidden="true"]{
display:none !important;
width:0 !important;
min-width:0 !important;
padding:0 !important;
margin:0 !important;
border:0 !important;
overflow:hidden !important;
}
body.exercise-active .pass-bottom-controls:not(.has-prev) #nextBtn,
body.exercise-active:not(.pass-has-prev) .pass-bottom-controls #nextBtn{
grid-column:1 / -1 !important;
width:100% !important;
max-width:none !important;
min-width:0 !important;
justify-content:center !important;
white-space:nowrap !important;
}
body.exercise-active .pass-bottom-controls.has-prev,
body.exercise-active.pass-has-prev .pass-bottom-controls{
grid-template-columns:minmax(92px,.34fr) minmax(0,1fr) !important;
}
body.exercise-active .pass-bottom-controls.has-prev #prevBtn,
body.exercise-active.pass-has-prev .pass-bottom-controls #prevBtn{
display:inline-flex !important;
width:100% !important;
min-width:0 !important;
padding:0 12px !important;
border:1px solid var(--line) !important;
}
body.exercise-active.pseudo-fullscreen .sticky-nav{
position:sticky !important;
top:0 !important;
z-index:700 !important;
}
body.exercise-active.pseudo-fullscreen .wrap,
body.exercise-active.pseudo-fullscreen #exerciseScreen{
max-width:none !important;
width:100% !important;
}
body.exercise-active.tv-mode .video-card{
box-shadow:0 18px 58px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
@media(min-width:900px){
body.exercise-active.tv-mode .stage-layout{
grid-template-columns:minmax(0,1.6fr) minmax(320px,.55fr) !important;
}
body.exercise-active.tv-mode .video-wrap,
body.exercise-active.tv-mode #videoWrap{
max-height:68vh !important;
}
}
/* Keep playlist toggle functional even after every older layer */
body.exercise-active.playlist-visible .playlist-card.open,
body.exercise-active.playlist-visible .playlist-card{
display:block !important;
}
body.exercise-active.playlist-hidden .playlist-card:not(.open),
body.exercise-active .playlist-card[aria-hidden="true"]{
display:none !important;
}
/* ==========================================================
v95.19 DEEP BUGFIX PLUS 10
Extra cleanup found by static audit.
========================================================== */
/* Tests page id is singular in HTML: #testScreen */
#testScreen .overview-head,
#testScreen .hero{
background:
linear-gradient(90deg,rgba(5,9,18,.94) 0%,rgba(8,15,29,.80) 52%,rgba(7,14,28,.55) 100%),
var(--asset-tests) center right / cover no-repeat !important;
}
/* Live mode now has an actual, subtle effect: less chrome, more content. */
body.exercise-active.live-mode #exitPassBtn,
body.exercise-active.live-mode #openLink{
display:none !important;
}
body.exercise-active.live-mode .sticky-nav{
box-shadow:0 8px 22px rgba(0,0,0,.18) !important;
}
/* Stage/profile age consistency */
#profileScreen .developed-card .sub{
overflow-wrap:anywhere;
}
/* Strong final guard: if previous is hidden, the main action can never collapse. */
body.exercise-active #prevBtn[aria-hidden="true"] + #nextBtn{
grid-column:1 / -1 !important;
width:100% !important;
min-width:0 !important;
max-width:none !important;
}
/* ==========================================================
v95.20 DEVICE COMPATIBILITY PATCH
Compatibility target:
- phone portrait
- large phone portrait
- iPad portrait
- iPad landscape
- laptop/desktop
========================================================== */
/* General safety: no accidental horizontal scroll from legacy wide panels */
html,
body{
max-width:100% !important;
overflow-x:hidden !important;
}
*,
*::before,
*::after{
box-sizing:border-box;
}
/* Tablet portrait should behave like tablet/desktop navigation, not mobile dropdown */
@media (min-width:768px) and (max-width:899px){
body:not(.exercise-active) .app-topbar,
body.topbar-portal:not(.exercise-active) .app-topbar,
body.topbar-hard-fixed:not(.exercise-active) .app-topbar{
display:block !important;
padding:14px !important;
min-height:0 !important;
overflow:visible !important;
}
body:not(.exercise-active) .app-location,
body:not(.exercise-active) .app-primary-action,
body:not(.exercise-active) .app-nav-toggle{
display:none !important;
}
body:not(.exercise-active) .app-tabs,
body.topbar-portal:not(.exercise-active) .app-tabs,
body.topbar-hard-fixed:not(.exercise-active) .app-tabs{
position:static !important;
inset:auto !important;
width:100% !important;
max-width:none !important;
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
padding:0 !important;
margin:0 !important;
border:0 !important;
border-radius:0 !important;
background:transparent !important;
box-shadow:none !important;
}
body:not(.exercise-active) .app-tab{
min-height:64px !important;
padding:12px 14px !important;
border-radius:20px !important;
font-size:clamp(17px,2.6vw,22px) !important;
}
}
/* Preserve explicit mobile menu on phones only */
@media (max-width:767px){
body:not(.exercise-active) .app-tab,
body:not(.exercise-active) .app-nav-toggle,
body.exercise-active .tool-btn,
body.exercise-active #menuToggleBtn,
body.exercise-active #prevBtn,
body.exercise-active #nextBtn{
min-height:44px !important;
}
}
/* Touch-target cleanup for all common interactive controls */
button,
.profile-btn,
.seg-btn,
.app-tab,
.app-nav-toggle,
.shortcut-btn,
.tool-btn,
.main-btn,
.ghost-btn,
#menuToggleBtn,
#prevBtn,
#nextBtn{
min-height:44px;
}
/* Pass menu should not overflow short landscape screens */
body.exercise-active #settingsMenu.top-tools{
max-height:calc(100svh - 92px) !important;
overflow:auto !important;
overscroll-behavior:contain !important;
-webkit-overflow-scrolling:touch !important;
}
/* iPhone/short landscape: pass menu top must be safer */
@media (max-height:520px) and (orientation:landscape){
body.exercise-active #settingsMenu.top-tools{
top:calc(48px + env(safe-area-inset-top,0px)) !important;
max-height:calc(100svh - 64px) !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
body.exercise-active #settingsMenu.top-tools .tool-btn{
min-height:40px !important;
font-size:12.5px !important;
padding:7px 9px !important;
}
}
/* iPad landscape / desktop training layout guardrails */
@media (min-width:900px) and (orientation:landscape){
body.exercise-active .stage-layout{
min-width:0 !important;
}
body.exercise-active .video-card,
body.exercise-active .info-card{
min-width:0 !important;
}
body.exercise-active .info-card{
scrollbar-gutter:stable both-edges;
}
}
/* iPad portrait active pass should stay clean and stacked */
@media (min-width:768px) and (max-width:899px){
body.exercise-active .stage-layout{
display:grid !important;
grid-template-columns:1fr !important;
gap:14px !important;
max-width:min(760px, calc(100vw - 28px)) !important;
margin:0 auto !important;
}
body.exercise-active .video-wrap,
body.exercise-active #videoWrap{
aspect-ratio:16 / 9 !important;
width:100% !important;
height:auto !important;
}
body.exercise-active .pass-bottom-controls{
max-width:min(760px, calc(100vw - 28px)) !important;
margin:0 auto !important;
}
}
/* Video/iframe guard repeated last for Safari/iPad */
#videoWrap,
.video-wrap{
contain:layout paint;
}
#videoWrap iframe,
#videoWrap video,
.video-wrap iframe,
.video-wrap video{
width:100% !important;
height:100% !important;
max-width:none !important;
max-height:none !important;
}
/* Reduce accidental huge typography on very small phones */
@media (max-width:380px){
body.exercise-active .rx-line{
font-size:clamp(42px,15vw,64px) !important;
}
body.exercise-active .exercise-name{
font-size:clamp(30px,10.5vw,48px) !important;
}
body.exercise-active .rest-display{
font-size:clamp(68px,20vw,116px) !important;
}
}
/* ==========================================================
v95.21 VISUAL POLISH + iPAD PASS MENU FIX
Focus:
- safer pass menu on iPad / desktop / short landscape screens
- a little more mockup-aligned nav/card polish
========================================================== */
/* Pass menu must always stay fully inside viewport */
body.exercise-active #settingsMenu.top-tools{
box-sizing:border-box !important;
max-width:calc(100vw - 20px) !important;
max-height:calc(100svh - 86px - env(safe-area-inset-bottom,0px)) !important;
overflow:auto !important;
overscroll-behavior:contain !important;
-webkit-overflow-scrolling:touch !important;
}
/* iPad portrait: center but never outside */
@media (min-width:768px) and (max-width:899px){
body.exercise-active #settingsMenu.top-tools{
position:fixed !important;
left:14px !important;
right:14px !important;
top:calc(64px + env(safe-area-inset-top,0px)) !important;
width:auto !important;
max-width:none !important;
transform:none !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
max-height:calc(100svh - 92px - env(safe-area-inset-bottom,0px)) !important;
}
}
/* iPad landscape + laptop: use inset positioning instead of transform centering */
@media (min-width:900px) and (max-width:1240px){
body.exercise-active #settingsMenu.top-tools{
position:fixed !important;
left:16px !important;
right:16px !important;
top:calc(66px + env(safe-area-inset-top,0px)) !important;
width:auto !important;
max-width:none !important;
transform:none !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
max-height:calc(100svh - 94px - env(safe-area-inset-bottom,0px)) !important;
}
body.exercise-active #settingsMenu.top-tools .danger-tool{
grid-column:auto !important;
}
}
/* Desktop: centered but still clamped safely */
@media (min-width:1241px){
body.exercise-active #settingsMenu.top-tools{
left:50% !important;
right:auto !important;
width:min(720px, calc(100vw - 48px)) !important;
max-width:calc(100vw - 48px) !important;
transform:translateX(-50%) !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
}
/* Short landscape: force a low-height compact menu */
@media (orientation:landscape) and (max-height:620px){
body.exercise-active #settingsMenu.top-tools{
top:calc(50px + env(safe-area-inset-top,0px)) !important;
left:12px !important;
right:12px !important;
width:auto !important;
transform:none !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
max-height:calc(100svh - 64px - env(safe-area-inset-bottom,0px)) !important;
padding:8px !important;
gap:7px !important;
}
body.exercise-active #settingsMenu.top-tools .tool-btn{
min-height:40px !important;
padding:7px 9px !important;
font-size:12.5px !important;
border-radius:14px !important;
}
}
/* Extra iPad/browser safe fallback if svh behaves oddly */
@supports not (height: 100svh){
body.exercise-active #settingsMenu.top-tools{
max-height:calc(100vh - 96px) !important;
}
}
/* Polish: top nav buttons should feel less heavy and more component-like */
@media (min-width:768px){
body:not(.exercise-active) .app-tab{
box-shadow:0 10px 26px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.025) !important;
}
body:not(.exercise-active) .app-tab.active{
box-shadow:0 0 0 1px rgba(108,225,255,.22), 0 12px 30px rgba(0,0,0,.24), inset 0 -3px 0 rgba(108,225,255,.60) !important;
}
}
/* Polish: reduce accidental "stacked cards" feel a bit more */
#startScreen .daily-primary,
#progressDashboard .daily-secondary,
.quickstats-panel,
#profileScreen .selector-panel,
#overviewScreen .panel,
#qaScreen .panel,
#testScreen .panel{
box-shadow:0 12px 34px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.028) !important;
}
/* Polish: pass menu buttons read like toggles, not generic cards */
body.exercise-active #settingsMenu.top-tools .tool-btn{
min-width:0 !important;
}
body.exercise-active #settingsMenu.top-tools .tool-btn b{
padding:3px 7px !important;
border-radius:999px !important;
background:rgba(124,236,255,.10) !important;
}
body.exercise-active #settingsMenu.top-tools .tool-btn.off b{
color:rgba(218,232,255,.58) !important;
background:rgba(218,232,255,.06) !important;
}
/* Keep bottom controls clear above iPad/browser bottom bars */
body.exercise-active .pass-bottom-controls{
padding-bottom:calc(10px + env(safe-area-inset-bottom,0px)) !important;
}
/* ==========================================================
v95.22 iPAD PORTRAIT TOPBAR DEDUPE
Bug: iPad portrait could show two top menus because legacy mobile
topbar/dropdown rules and tablet inline nav rules both matched.
Fix: 768-899px gets exactly one in-flow topbar with inline 2x2 nav.
========================================================== */
@media (min-width:768px) and (max-width:899px) and (orientation:portrait){
body:not(.exercise-active)::before{
display:none !important;
content:none !important;
height:0 !important;
background:none !important;
}
body:not(.exercise-active) .wrap{
padding-top:12px !important;
}
body:not(.exercise-active) .app-topbar,
body.topbar-portal:not(.exercise-active) .app-topbar,
body.topbar-hard-fixed:not(.exercise-active) .app-topbar{
position:relative !important;
inset:auto !important;
top:auto !important;
left:auto !important;
right:auto !important;
bottom:auto !important;
transform:none !important;
-webkit-transform:none !important;
width:100% !important;
max-width:100% !important;
margin:0 0 14px 0 !important;
padding:14px !important;
display:block !important;
overflow:visible !important;
z-index:40 !important;
}
/* Hide the mobile dropdown trigger and all redundant header/action content */
body:not(.exercise-active) .app-location,
body:not(.exercise-active) .app-primary-action,
body:not(.exercise-active) #appNavToggle,
body:not(.exercise-active) .app-nav-toggle{
display:none !important;
}
/* One single inline nav, not dropdown */
body:not(.exercise-active) #appTabs.app-tabs,
body:not(.exercise-active) .app-tabs,
body.topbar-portal:not(.exercise-active) .app-tabs,
body.topbar-hard-fixed:not(.exercise-active) .app-tabs{
position:static !important;
inset:auto !important;
top:auto !important;
left:auto !important;
right:auto !important;
bottom:auto !important;
display:grid !important;
visibility:visible !important;
opacity:1 !important;
width:100% !important;
max-width:none !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
padding:0 !important;
margin:0 !important;
border:0 !important;
border-radius:0 !important;
background:transparent !important;
box-shadow:none !important;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
z-index:auto !important;
}
body:not(.exercise-active) .app-topbar.nav-open #appTabs.app-tabs,
body:not(.exercise-active) .app-topbar.nav-open .app-tabs{
display:grid !important;
}
body:not(.exercise-active) .app-tab{
display:flex !important;
min-height:64px !important;
padding:12px 14px !important;
border-radius:20px !important;
align-items:center !important;
justify-content:center !important;
gap:9px !important;
text-align:center !important;
white-space:normal !important;
}
}
/* iPad portrait but inside workout: normal pass header only, no app topbar */
@media (min-width:768px) and (max-width:899px) and (orientation:portrait){
body.exercise-active .app-topbar{
display:none !important;
}
body.exercise-active .sticky-nav{
position:sticky !important;
top:0 !important;
z-index:500 !important;
}
}
/* Defensive fallback: tablet inline nav must never be fixed/dropdown */
@media (min-width:768px) and (max-width:899px){
body:not(.exercise-active) .app-tabs{
position:static !important;
}
}
/* ==========================================================
v95.23 PASS OVERVIEW AUTOSCROLL
- Current exercise is always aligned to the top visible row.
- Active/upcoming row gets a 10s fill indicator for test.
========================================================== */
body.exercise-active .playlist-card{
overflow:hidden !important;
}
body.exercise-active .mini-list{
position:relative !important;
scroll-behavior:smooth !important;
overflow:auto !important;
overscroll-behavior:contain !important;
-webkit-overflow-scrolling:touch !important;
scrollbar-gutter:stable both-edges !important;
}
/* Keep enough visible rows without stealing the whole pass screen */
body.exercise-active.playlist-visible .mini-list,
body.exercise-active .playlist-card.open .mini-list{
max-height:min(44svh, 420px) !important;
}
/* On wider screens the list can be taller, but still internally scrollable */
@media(min-width:900px){
body.exercise-active.playlist-visible .mini-list,
body.exercise-active .playlist-card.open .mini-list{
max-height:min(52svh, 520px) !important;
}
}
body.exercise-active .mini-item{
position:relative !important;
overflow:hidden !important;
min-height:58px !important;
isolation:isolate !important;
}
body.exercise-active .mini-item > *:not(.mini-fill){
position:relative !important;
z-index:2 !important;
}
body.exercise-active .mini-fill{
position:absolute !important;
inset:0 auto 0 0 !important;
width:0%;
z-index:1 !important;
pointer-events:none !important;
background:linear-gradient(90deg,rgba(124,236,255,.18),rgba(72,160,255,.08)) !important;
border-radius:inherit !important;
transform-origin:left center !important;
}
body.exercise-active .mini-item.active .mini-fill,
body.exercise-active .mini-item.filling .mini-fill{
animation:miniListFill var(--mini-fill-ms,10000ms) linear forwards;
}
@keyframes miniListFill{
from{width:0%;}
to{width:100%;}
}
/* Active row should read as the anchor/top row */
body.exercise-active .mini-item.active{
border-color:rgba(124,236,255,.58) !important;
box-shadow:0 0 0 1px rgba(124,236,255,.20), inset 3px 0 0 rgba(124,236,255,.82) !important;
}
/* Done rows stay calm so active row is obvious */
body.exercise-active .mini-item.done:not(.active){
opacity:.66 !important;
}
/* If reduced motion is enabled, keep fill visible but don't animate */
@media (prefers-reduced-motion: reduce){
body.exercise-active .mini-list{
scroll-behavior:auto !important;
}
body.exercise-active .mini-item.active .mini-fill,
body.exercise-active .mini-item.filling .mini-fill{
animation:none !important;
width:100% !important;
}
}
/* ==========================================================
v95.24 VIDEO PRELOAD FLOW
- First video loads paused.
- Bottom button starts the pass and unlocks sound.
- Next video preloads during rest in a hidden-but-live layer.
- Preloaded iframe is promoted into the active video slot.
========================================================== */
.video-preload-shell{
position:relative !important;
overflow:hidden !important;
}
.preload-video-wrap{
position:absolute !important;
width:2px !important;
height:2px !important;
left:-9999px !important;
top:-9999px !important;
opacity:.01 !important;
pointer-events:none !important;
overflow:hidden !important;
contain:layout paint !important;
}
.preload-video-wrap iframe{
width:220px !important;
height:124px !important;
border:0 !important;
}
.video-tap-fallback{
position:absolute !important;
left:50% !important;
bottom:16px !important;
transform:translateX(-50%) !important;
z-index:12 !important;
min-height:46px !important;
padding:10px 16px !important;
border-radius:999px !important;
border:1px solid rgba(124,236,255,.42) !important;
background:rgba(5,10,20,.92) !important;
color:#fff !important;
font-weight:950 !important;
box-shadow:0 16px 40px rgba(0,0,0,.36), 0 0 0 1px rgba(124,236,255,.12) !important;
backdrop-filter:blur(16px) saturate(130%) !important;
}
.video-tap-fallback.hide{
display:none !important;
}
body.exercise-active #nextBtn{
transition:transform .16s ease, box-shadow .16s ease, background .16s ease !important;
}
body.exercise-active:not(.pass-has-prev) #nextBtn{
min-height:60px !important;
}
body.exercise-active .video-wrap iframe{
background:#030713 !important;
}
body.exercise-active #videoWrap iframe#videoFrame{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
display:block !important;
}
body.exercise-active .rest-video-wrap + .preload-video-wrap,
body.exercise-active .video-preload-shell .preload-video-wrap{
display:block !important;
}
/* ==========================================================
v95.25 iPAD MEDIA + REST OVERVIEW POLISH
- iPad landscape media fills its frame.
- Remove stray top line / misaligned split view.
- Rest periods become real rows in the exercise overview.
- Rest row fill duration follows the actual rest length.
========================================================== */
/* Media card should be one clean frame with no extra top seam */
body.exercise-active .video-card{
overflow:hidden !important;
border-radius:24px !important;
border:1px solid rgba(129,184,255,.16) !important;
background:#030713 !important;
}
body.exercise-active .video-card::before,
body.exercise-active .video-card::after,
body.exercise-active .video-wrap::before,
body.exercise-active .video-wrap::after{
content:none !important;
display:none !important;
border:0 !important;
background:none !important;
box-shadow:none !important;
}
/* Video/rest media fills the available frame */
body.exercise-active #videoWrap,
body.exercise-active .video-wrap{
width:100% !important;
aspect-ratio:16 / 9 !important;
overflow:hidden !important;
background:#030713 !important;
display:block !important;
place-items:unset !important;
}
body.exercise-active #videoWrap iframe,
body.exercise-active .video-wrap iframe,
body.exercise-active #videoWrap video,
body.exercise-active .video-wrap video,
body.exercise-active #videoWrap img,
body.exercise-active .video-wrap img{
width:100% !important;
height:100% !important;
max-width:none !important;
max-height:none !important;
object-fit:cover !important;
border:0 !important;
display:block !important;
}
/* Rest images also cover the full 16:9 media frame */
body.exercise-active .rest-stage,
body.exercise-active .rest-stage-v9510{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
min-height:0 !important;
border-radius:0 !important;
overflow:hidden !important;
}
body.exercise-active .rest-bg-img{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
object-fit:cover !important;
}
/* iPad landscape / desktop: video and text start on exactly the same row */
@media (min-width:900px) and (orientation:landscape){
body.exercise-active .stage-layout{
align-items:start !important;
gap:18px !important;
}
body.exercise-active .video-card,
body.exercise-active .info-card{
align-self:start !important;
margin-top:0 !important;
}
body.exercise-active .video-card{
top:76px !important;
}
body.exercise-active #videoWrap,
body.exercise-active .video-wrap{
height:auto !important;
min-height:0 !important;
max-height:none !important;
aspect-ratio:16 / 9 !important;
}
body.exercise-active .info-card{
padding-top:18px !important;
}
}
/* iPad portrait keeps clean stacked media */
@media (min-width:768px) and (max-width:899px){
body.exercise-active #videoWrap,
body.exercise-active .video-wrap{
aspect-ratio:16 / 9 !important;
height:auto !important;
}
}
/* Overview list with exercise + rest rows */
body.exercise-active .mini-list{
align-content:start !important;
}
body.exercise-active .mini-item{
cursor:pointer !important;
}
body.exercise-active .mini-item .num{
position:relative !important;
z-index:2 !important;
}
body.exercise-active .mini-item.mini-rest{
border-style:dashed !important;
background:linear-gradient(180deg,rgba(124,236,255,.070),rgba(12,20,34,.82)) !important;
}
body.exercise-active .mini-item.mini-rest .num{
color:#06101c !important;
background:linear-gradient(180deg,#baf6ff,#58c8ff) !important;
border-radius:999px !important;
width:30px !important;
height:30px !important;
display:grid !important;
place-items:center !important;
font-weight:1000 !important;
}
body.exercise-active .mini-item.mini-rest .mini-title{
color:#dffcff !important;
}
body.exercise-active .mini-item.active.mini-rest{
border-color:rgba(124,236,255,.72) !important;
box-shadow:0 0 0 1px rgba(124,236,255,.22), inset 3px 0 0 rgba(124,236,255,.92) !important;
}
/* Rest rows use actual rest-duration progress through data-fill-ms -> --mini-fill-ms */
body.exercise-active .mini-item.mini-rest .mini-fill{
background:linear-gradient(90deg,rgba(124,236,255,.24),rgba(140,255,215,.10)) !important;
}
/* Current row should always be readable at the top of the scrolled list */
body.exercise-active .mini-item.active{
scroll-margin-top:0 !important;
}
/* On iPad/desktop, list remains a vertical running order so rest rows are clear */
@media (min-width:900px){
body.exercise-active .mini-list{
grid-template-columns:1fr !important;
max-height:min(46svh, 520px) !important;
}
body.exercise-active .mini-item{
min-height:54px !important;
}
}
/* On phones, keep list compact but still clearly sequential */
@media (max-width:899px){
body.exercise-active .mini-list{
grid-template-columns:1fr !important;
}
}
/* ==========================================================
v95.26 HARD MEDIA FILL + HARD AUTOSCROLL
The previous version was too polite on iPad. This layer forces:
- iframe/media to cover the entire media card
- active list row to be the top visible row
========================================================== */
/* Hard media/frame fill */
body.exercise-active .video-card,
body.exercise-active .video-preload-shell{
position:relative !important;
padding:0 !important;
overflow:hidden !important;
background:#020713 !important;
line-height:0 !important;
}
body.exercise-active #videoWrap.video-wrap,
body.exercise-active #videoWrap,
body.exercise-active .video-wrap{
position:relative !important;
display:block !important;
width:100% !important;
height:auto !important;
aspect-ratio:16 / 9 !important;
min-height:0 !important;
max-height:none !important;
padding:0 !important;
margin:0 !important;
overflow:hidden !important;
background:#020713 !important;
line-height:0 !important;
}
/* YouTube iframe: crop tiny embed/player edges and fill full 16:9 card */
body.exercise-active #videoWrap > iframe,
body.exercise-active #videoWrap iframe#videoFrame,
body.exercise-active .video-wrap > iframe,
body.exercise-active .video-wrap iframe{
position:absolute !important;
inset:50% auto auto 50% !important;
width:101.8% !important;
height:101.8% !important;
min-width:101.8% !important;
min-height:101.8% !important;
max-width:none !important;
max-height:none !important;
transform:translate(-50%,-50%) !important;
border:0 !important;
display:block !important;
background:#020713 !important;
}
/* Non-iframe media should fill normally */
body.exercise-active #videoWrap > video,
body.exercise-active #videoWrap > img,
body.exercise-active .video-wrap > video,
body.exercise-active .video-wrap > img{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
object-fit:cover !important;
border:0 !important;
display:block !important;
}
/* Rest stage must be full-bleed in the same frame */
body.exercise-active #videoWrap .rest-stage,
body.exercise-active #videoWrap .rest-stage-v9510,
body.exercise-active .video-wrap .rest-stage,
body.exercise-active .video-wrap .rest-stage-v9510{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
min-height:0 !important;
margin:0 !important;
border-radius:0 !important;
overflow:hidden !important;
line-height:normal !important;
}
body.exercise-active #videoWrap .rest-bg-img,
body.exercise-active .video-wrap .rest-bg-img{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
object-fit:cover !important;
}
/* Remove seam/line from surrounding containers */
body.exercise-active .video-card,
body.exercise-active .video-card *,
body.exercise-active #videoWrap,
body.exercise-active #videoWrap *{
box-decoration-break:clone;
}
body.exercise-active .video-card::before,
body.exercise-active .video-card::after,
body.exercise-active #videoWrap::before,
body.exercise-active #videoWrap::after{
display:none !important;
content:none !important;
}
/* iPad landscape alignment: both cards start on the same baseline */
@media (min-width:900px) and (orientation:landscape){
body.exercise-active .stage-layout{
align-items:start !important;
}
body.exercise-active .video-card,
body.exercise-active .info-card{
align-self:start !important;
margin-top:0 !important;
}
}
/* Hard autoscroll support */
body.exercise-active .mini-list{
position:relative !important;
display:grid !important;
grid-auto-flow:row !important;
grid-template-columns:1fr !important;
align-content:start !important;
overflow-y:auto !important;
overflow-x:hidden !important;
scroll-behavior:auto !important;
overscroll-behavior:contain !important;
-webkit-overflow-scrolling:touch !important;
}
body.exercise-active .mini-item{
scroll-margin-top:0 !important;
min-height:56px !important;
}
body.exercise-active .mini-item[data-active="true"],
body.exercise-active .mini-item.active{
order:0 !important;
}
/* Make it obvious which row is currently pinned to top */
body.exercise-active .mini-item[data-active="true"]{
border-color:rgba(124,236,255,.72) !important;
box-shadow:0 0 0 1px rgba(124,236,255,.22), inset 4px 0 0 rgba(124,236,255,.96) !important;
}
/* ==========================================================
v95.27 YOUTUBE COVER FIT
The iframe itself must stay 16:9 and cover the measured media frame.
iPad/Safari was preserving video ratio inside a too-wide iframe,
giving black side area. JS now sets exact pixel size; CSS supports it.
========================================================== */
body.exercise-active #videoWrap{
position:relative !important;
overflow:hidden !important;
background:#020713 !important;
}
/* Let JS pixel sizing win. The iframe is centered and oversizes as needed. */
body.exercise-active #videoWrap > iframe.yt-cover-frame,
body.exercise-active #videoWrap iframe#videoFrame.yt-cover-frame{
position:absolute !important;
left:50% !important;
top:50% !important;
width:var(--yt-cover-w, auto);
height:var(--yt-cover-h, auto);
min-width:100% !important;
min-height:100% !important;
max-width:none !important;
max-height:none !important;
transform:translate(-50%,-50%) !important;
border:0 !important;
display:block !important;
background:#020713 !important;
}
/* Fallback before JS has measured: make it taller, not just wider. */
@media (min-width:900px) and (orientation:landscape){
body.exercise-active #videoWrap > iframe.yt-cover-frame,
body.exercise-active #videoWrap iframe#videoFrame.yt-cover-frame{
width:112% !important;
height:112% !important;
}
}
/* Keep rest images untouched/full bleed */
body.exercise-active #videoWrap .rest-stage,
body.exercise-active #videoWrap .rest-stage-v9510{
inset:0 !important;
width:100% !important;
height:100% !important;
}
/* ==========================================================
v95.28 PASS START HERO
Show a cinematic start image while the first film preloads.
========================================================== */
.video-wrap.start-video-wrap,
#videoWrap.start-video-wrap{
position:relative !important;
overflow:hidden !important;
background:#020713 !important;
}
body.exercise-active .start-stage.start-stage-v9528,
#videoWrap.start-video-wrap .start-stage.start-stage-v9528{
position:absolute !important;
inset:0 !important;
display:grid !important;
align-items:end !important;
justify-items:start !important;
overflow:hidden !important;
border-radius:inherit !important;
background:#020713 !important;
}
body.exercise-active .start-stage.start-stage-v9528 .start-bg-img,
#videoWrap.start-video-wrap .start-stage.start-stage-v9528 .start-bg-img{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
object-fit:cover !important;
object-position:center center !important;
display:block !important;
filter:saturate(1.02) brightness(.90) contrast(1.04) !important;
}
body.exercise-active .start-stage.start-stage-v9528 .start-bg-overlay,
#videoWrap.start-video-wrap .start-stage.start-stage-v9528 .start-bg-overlay{
position:absolute !important;
inset:0 !important;
background:
radial-gradient(circle at 74% 34%, rgba(110,170,255,.18), transparent 30%),
linear-gradient(90deg, rgba(2,8,18,.78) 0%, rgba(2,8,18,.44) 45%, rgba(2,8,18,.12) 100%),
linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.36));
}
body.exercise-active .start-stage.start-stage-v9528 .start-card,
#videoWrap.start-video-wrap .start-stage.start-stage-v9528 .start-card{
position:relative !important;
z-index:2 !important;
margin:24px !important;
max-width:min(540px,72%) !important;
padding:22px 24px !important;
border-radius:30px !important;
border:1px solid rgba(132,180,255,.24) !important;
background:linear-gradient(180deg, rgba(5,12,26,.42), rgba(5,12,26,.18)) !important;
box-shadow:0 16px 44px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.03) !important;
backdrop-filter:blur(4px) !important;
}
.start-badge{
display:inline-flex !important;
align-items:center !important;
gap:8px !important;
padding:8px 14px !important;
border-radius:999px !important;
border:1px solid rgba(150,208,255,.38) !important;
color:#9fe2ff !important;
font-size:12px !important;
font-weight:800 !important;
letter-spacing:.16em !important;
text-transform:uppercase !important;
background:rgba(8,20,42,.36) !important;
}
.start-title{
margin-top:14px !important;
font-size:clamp(40px,7vw,68px) !important;
line-height:.94 !important;
font-weight:900 !important;
color:#fff !important;
}
.start-sub{
margin-top:12px !important;
font-size:clamp(18px,2.4vw,28px) !important;
line-height:1.18 !important;
color:rgba(255,255,255,.96) !important;
}
.start-progress{
margin-top:16px !important;
width:min(320px,80%) !important;
height:10px !important;
border-radius:999px !important;
background:rgba(112,144,190,.24) !important;
overflow:hidden !important;
}
.start-progress-bar{
width:34% !important;
height:100% !important;
border-radius:inherit !important;
background:linear-gradient(90deg,#9fe2ff,#74afff) !important;
box-shadow:0 0 22px rgba(116,175,255,.45) !important;
}
.start-hint,
.start-equipment{
margin-top:12px !important;
font-size:15px !important;
line-height:1.35 !important;
color:rgba(224,235,255,.88) !important;
}
.start-equipment{color:rgba(200,224,255,.84) !important;}
@media (max-width:820px){
body.exercise-active .start-stage.start-stage-v9528 .start-card,
#videoWrap.start-video-wrap .start-stage.start-stage-v9528 .start-card{
max-width:calc(100% - 36px) !important;
margin:18px !important;
padding:18px !important;
border-radius:24px !important;
}
.start-title{font-size:clamp(34px,11vw,54px) !important;}
.start-sub{font-size:clamp(16px,4.5vw,22px) !important;}
.start-hint,
.start-equipment{font-size:14px !important;}
}
/* ==========================================================
v95.29 MEDIA CLIP + START HERO CLEANUP
- Start hero no longer shows descriptive coach text.
- YouTube iframe is clipped inside its own media frame.
- Iframe cannot bleed down over the exercise list.
========================================================== */
/* Hard parent clip: media cannot escape into playlist/list */
body.exercise-active .video-card,
body.exercise-active .video-preload-shell{
position:relative !important;
overflow:hidden !important;
contain:layout paint !important;
isolation:isolate !important;
padding:0 !important;
line-height:0 !important;
background:#020713 !important;
border-radius:24px !important;
clip-path:inset(0 round 24px) !important;
}
/* The actual media frame owns the 16:9 height. Nothing inside may change document flow. */
body.exercise-active #videoWrap,
body.exercise-active #videoWrap.video-wrap,
body.exercise-active .video-wrap{
position:relative !important;
display:block !important;
width:100% !important;
aspect-ratio:16 / 9 !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow:hidden !important;
contain:layout paint !important;
isolation:isolate !important;
padding:0 !important;
margin:0 !important;
line-height:0 !important;
background:#020713 !important;
border-radius:inherit !important;
clip-path:inset(0 round 24px) !important;
}
/* Replace the too-aggressive old iframe cover rules.
It is still cover-sized, but the parent clips it reliably. */
body.exercise-active #videoWrap > iframe,
body.exercise-active #videoWrap iframe#videoFrame,
body.exercise-active #videoWrap > iframe.yt-cover-frame,
body.exercise-active #videoWrap iframe#videoFrame.yt-cover-frame,
body.exercise-active .video-wrap > iframe,
body.exercise-active .video-wrap iframe{
position:absolute !important;
left:50% !important;
top:50% !important;
width:var(--yt-cover-w, 100%) !important;
height:var(--yt-cover-h, 100%) !important;
min-width:100% !important;
min-height:100% !important;
max-width:none !important;
max-height:none !important;
transform:translate(-50%,-50%) !important;
border:0 !important;
display:block !important;
background:#020713 !important;
z-index:1 !important;
}
/* Kill the previous broad 112% fallback on iPad landscape. */
@media (min-width:900px) and (orientation:landscape){
body.exercise-active #videoWrap > iframe.yt-cover-frame,
body.exercise-active #videoWrap iframe#videoFrame.yt-cover-frame{
width:var(--yt-cover-w, 100%) !important;
height:var(--yt-cover-h, 100%) !important;
}
}
/* Keep overlay UI above media but inside the same clipped card. */
body.exercise-active .video-tap-fallback{
z-index:5 !important;
}
/* Playlist/list must always start after the clipped media card. */
body.exercise-active .playlist-card,
body.exercise-active .mini-list{
position:relative !important;
z-index:3 !important;
}
/* Start image: cleaner, less text-heavy */
body.exercise-active .start-stage.start-stage-v9528 .start-card,
#videoWrap.start-video-wrap .start-stage.start-stage-v9528 .start-card{
max-width:min(460px,64%) !important;
padding:20px 22px !important;
}
body.exercise-active .start-hint,
body.exercise-active .start-equipment,
#videoWrap.start-video-wrap .start-hint,
#videoWrap.start-video-wrap .start-equipment{
display:none !important;
}
.start-title{
margin-top:12px !important;
}
.start-sub{
margin-top:10px !important;
}
.start-progress{
margin-top:14px !important;
}
@media (max-width:820px){
body.exercise-active .start-stage.start-stage-v9528 .start-card,
#videoWrap.start-video-wrap .start-stage.start-stage-v9528 .start-card{
max-width:calc(100% - 36px) !important;
}
}
/* ==========================================================
v95.30 PASS VIEW STRUCTURAL FIX
This is a structural correction, not another iframe-only patch.
iPad/desktop pass view becomes a clear grid:
1. top pass header
2. media + info on the same row
3. exercise overview/list below
4. bottom controls below/sticky
========================================================== */
@media (min-width:900px) and (orientation:landscape){
body.exercise-active #exerciseScreen.active{
display:grid !important;
grid-template-areas:
"passnav"
"stage"
"playlist"
"controls" !important;
grid-template-columns:1fr !important;
gap:12px !important;
align-items:start !important;
width:100% !important;
max-width:none !important;
padding:0 14px calc(14px + env(safe-area-inset-bottom,0px)) !important;
overflow-x:hidden !important;
}
body.exercise-active #exerciseScreen.active .sticky-nav{
grid-area:passnav !important;
position:sticky !important;
top:0 !important;
z-index:70 !important;
width:100% !important;
max-width:min(1360px, calc(100vw - 28px)) !important;
margin:0 auto !important;
}
body.exercise-active #exerciseScreen.active .stage-layout{
grid-area:stage !important;
display:grid !important;
grid-template-columns:minmax(0, 1fr) minmax(310px, 420px) !important;
gap:18px !important;
align-items:start !important;
width:100% !important;
max-width:min(1360px, calc(100vw - 28px)) !important;
margin:0 auto !important;
overflow:visible !important;
position:relative !important;
}
/* Critical: no sticky/top on the media card.
Sticky was the source of visual offset and row confusion. */
body.exercise-active #exerciseScreen.active .video-card,
body.exercise-active #exerciseScreen.active .video-preload-shell{
grid-column:1 !important;
grid-row:1 !important;
position:relative !important;
top:auto !important;
left:auto !important;
right:auto !important;
bottom:auto !important;
transform:none !important;
align-self:start !important;
margin:0 !important;
width:100% !important;
height:auto !important;
z-index:1 !important;
overflow:hidden !important;
contain:layout paint !important;
isolation:isolate !important;
border-radius:24px !important;
clip-path:none !important;
}
body.exercise-active #exerciseScreen.active .info-card{
grid-column:2 !important;
grid-row:1 !important;
align-self:start !important;
margin:0 !important;
width:100% !important;
min-width:0 !important;
max-height:none !important;
height:auto !important;
overflow:visible !important;
z-index:1 !important;
padding:18px !important;
}
/* One owned media box. The media box, not the iframe, defines the row height. */
body.exercise-active #exerciseScreen.active #videoWrap,
body.exercise-active #exerciseScreen.active #videoWrap.video-wrap,
body.exercise-active #exerciseScreen.active .video-wrap{
position:relative !important;
display:block !important;
width:100% !important;
aspect-ratio:16 / 9 !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow:hidden !important;
contain:layout paint !important;
isolation:isolate !important;
margin:0 !important;
padding:0 !important;
line-height:0 !important;
background:#020713 !important;
border-radius:24px !important;
clip-path:none !important;
}
/* The iframe can be larger than the media box, but the media box clips it.
No iframe may participate in document flow or overlap the list. */
body.exercise-active #exerciseScreen.active #videoWrap > iframe,
body.exercise-active #exerciseScreen.active #videoWrap iframe#videoFrame,
body.exercise-active #exerciseScreen.active #videoWrap > iframe.yt-cover-frame,
body.exercise-active #exerciseScreen.active #videoWrap iframe#videoFrame.yt-cover-frame{
position:absolute !important;
left:50% !important;
top:50% !important;
width:var(--yt-cover-w, 100%) !important;
height:var(--yt-cover-h, 100%) !important;
min-width:100% !important;
min-height:100% !important;
max-width:none !important;
max-height:none !important;
transform:translate(-50%,-50%) !important;
display:block !important;
border:0 !important;
z-index:1 !important;
background:#020713 !important;
}
body.exercise-active #exerciseScreen.active #videoWrap .rest-stage,
body.exercise-active #exerciseScreen.active #videoWrap .rest-stage-v9510,
body.exercise-active #exerciseScreen.active #videoWrap .start-stage,
body.exercise-active #exerciseScreen.active #videoWrap .start-stage-v9528{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
min-height:0 !important;
overflow:hidden !important;
z-index:2 !important;
border-radius:24px !important;
}
body.exercise-active #exerciseScreen.active .playlist-card{
grid-area:playlist !important;
position:relative !important;
z-index:2 !important;
width:100% !important;
max-width:min(1360px, calc(100vw - 28px)) !important;
margin:0 auto !important;
padding:10px !important;
max-height:min(28svh, 260px) !important;
overflow:auto !important;
contain:layout paint !important;
isolation:isolate !important;
clear:both !important;
}
body.exercise-active.playlist-visible #exerciseScreen.active .playlist-card,
body.exercise-active #exerciseScreen.active .playlist-card.open{
display:block !important;
}
body.exercise-active.playlist-hidden #exerciseScreen.active .playlist-card,
body.exercise-active #exerciseScreen.active .playlist-card[aria-hidden="true"]{
display:none !important;
}
body.exercise-active #exerciseScreen.active .mini-list{
grid-template-columns:1fr !important;
max-height:none !important;
overflow:auto !important;
}
body.exercise-active #exerciseScreen.active .pass-bottom-controls{
grid-area:controls !important;
position:sticky !important;
bottom:0 !important;
z-index:60 !important;
width:100% !important;
max-width:min(1360px, calc(100vw - 28px)) !important;
margin:0 auto !important;
left:auto !important;
right:auto !important;
transform:none !important;
padding:8px 0 calc(8px + env(safe-area-inset-bottom,0px)) !important;
background:linear-gradient(180deg,rgba(5,10,19,0),rgba(5,10,19,.82) 34%,rgba(5,10,19,.98)) !important;
}
/* Top alignment guard: media and info must share the exact same grid row. */
body.exercise-active #exerciseScreen.active .video-card,
body.exercise-active #exerciseScreen.active .info-card{
margin-top:0 !important;
translate:none !important;
}
}
/* iPad portrait and phones keep stacked layout, but also no media leakage. */
@media (max-width:899px){
body.exercise-active .video-card,
body.exercise-active .video-preload-shell,
body.exercise-active #videoWrap,
body.exercise-active .video-wrap{
overflow:hidden !important;
contain:layout paint !important;
isolation:isolate !important;
}
body.exercise-active #videoWrap > iframe,
body.exercise-active #videoWrap iframe#videoFrame{
position:absolute !important;
left:50% !important;
top:50% !important;
transform:translate(-50%,-50%) !important;
}
}
/* Debug killer: old sticky/top rules must lose after this point. */
@media (min-width:900px) and (orientation:landscape){
body.exercise-active .stage-layout > .video-card{
position:relative !important;
top:auto !important;
}
}
/* ==========================================================
v95.31 VIDEO EXACT FIT + AUTOSCROLL CONTAINER FIX
v95.30 fixed the structure. Therefore YouTube no longer needs cover crop.
Exact 16:9 iframe fit prevents the 1 cm left/right visual offset.
Autoscroll now targets the real scroll container.
========================================================== */
@media (min-width:900px) and (orientation:landscape){
/* Make the visible media frame the single source of truth. */
body.exercise-active #exerciseScreen.active #videoWrap,
body.exercise-active #exerciseScreen.active #videoWrap.video-wrap,
body.exercise-active #exerciseScreen.active .video-wrap{
aspect-ratio:16 / 9 !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow:hidden !important;
contain:layout paint !important;
isolation:isolate !important;
background:#020713 !important;
border-radius:24px !important;
}
/* No crop, no center transform, no JS pixel-cover.
If the box is 16:9, iframe should be exact 100%. */
body.exercise-active #exerciseScreen.active #videoWrap > iframe,
body.exercise-active #exerciseScreen.active #videoWrap iframe#videoFrame,
body.exercise-active #exerciseScreen.active #videoWrap > iframe.yt-cover-frame,
body.exercise-active #exerciseScreen.active #videoWrap iframe#videoFrame.yt-cover-frame,
body.exercise-active #exerciseScreen.active #videoWrap iframe.yt-exact-frame{
position:absolute !important;
inset:0 !important;
left:0 !important;
top:0 !important;
width:100% !important;
height:100% !important;
min-width:100% !important;
min-height:100% !important;
max-width:100% !important;
max-height:100% !important;
transform:none !important;
border:0 !important;
display:block !important;
background:#020713 !important;
z-index:1 !important;
}
/* Playlist card is allowed to be the scroll owner.
Keep mini-list content regular so JS can pin active row. */
body.exercise-active #exerciseScreen.active .playlist-card{
overflow:auto !important;
scroll-behavior:auto !important;
overscroll-behavior:contain !important;
-webkit-overflow-scrolling:touch !important;
}
body.exercise-active #exerciseScreen.active .mini-list{
overflow:visible !important;
max-height:none !important;
scroll-behavior:auto !important;
}
body.exercise-active #exerciseScreen.active .mini-item.active,
body.exercise-active #exerciseScreen.active .mini-item[data-active="true"]{
scroll-margin-top:0 !important;
}
}
/* Phones/tablets stacked: exact-fit iframe also safer now that media box owns ratio. */
@media (max-width:899px){
body.exercise-active #videoWrap > iframe,
body.exercise-active #videoWrap iframe#videoFrame,
body.exercise-active #videoWrap iframe.yt-cover-frame,
body.exercise-active #videoWrap iframe.yt-exact-frame{
inset:0 !important;
left:0 !important;
top:0 !important;
width:100% !important;
height:100% !important;
max-width:100% !important;
max-height:100% !important;
transform:none !important;
}
}
/* ==========================================================
v95.32 MEDIA CARD OWNS THE FRAME
The problem left in v95.31 was two "visible frames":
.video-card and #videoWrap. The inner frame could look offset.
Now the outer .video-card owns the exact 16:9 frame and the inner
media layer is absolute inset:0.
========================================================== */
@media (min-width:900px) and (orientation:landscape){
/* Outer visible card owns size, ratio, clipping and border. */
body.exercise-active #exerciseScreen.active .stage-layout > .video-card,
body.exercise-active #exerciseScreen.active .stage-layout > .video-preload-shell{
position:relative !important;
display:block !important;
aspect-ratio:16 / 9 !important;
width:100% !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
padding:0 !important;
margin:0 !important;
overflow:hidden !important;
contain:layout paint !important;
isolation:isolate !important;
border-radius:24px !important;
background:#020713 !important;
line-height:0 !important;
box-sizing:border-box !important;
}
/* Inner media layer no longer creates its own separate visual frame. */
body.exercise-active #exerciseScreen.active .stage-layout > .video-card > #videoWrap,
body.exercise-active #exerciseScreen.active .stage-layout > .video-preload-shell > #videoWrap,
body.exercise-active #exerciseScreen.active .stage-layout > .video-card > #videoWrap.video-wrap,
body.exercise-active #exerciseScreen.active .stage-layout > .video-preload-shell > #videoWrap.video-wrap{
position:absolute !important;
inset:0 !important;
display:block !important;
width:100% !important;
height:100% !important;
min-width:100% !important;
min-height:100% !important;
max-width:100% !important;
max-height:100% !important;
aspect-ratio:auto !important;
padding:0 !important;
margin:0 !important;
overflow:hidden !important;
border-radius:inherit !important;
background:#020713 !important;
line-height:0 !important;
contain:layout paint !important;
isolation:isolate !important;
box-sizing:border-box !important;
}
/* Actual iframe fills the owned card exactly. No transform, no cover-crop, no inherited width. */
body.exercise-active #exerciseScreen.active .stage-layout > .video-card > #videoWrap > iframe,
body.exercise-active #exerciseScreen.active .stage-layout > .video-preload-shell > #videoWrap > iframe,
body.exercise-active #exerciseScreen.active .stage-layout > .video-card > #videoWrap iframe#videoFrame,
body.exercise-active #exerciseScreen.active .stage-layout > .video-preload-shell > #videoWrap iframe#videoFrame,
body.exercise-active #exerciseScreen.active .stage-layout > .video-card > #videoWrap iframe.yt-cover-frame,
body.exercise-active #exerciseScreen.active .stage-layout > .video-preload-shell > #videoWrap iframe.yt-cover-frame,
body.exercise-active #exerciseScreen.active .stage-layout > .video-card > #videoWrap iframe.yt-exact-frame,
body.exercise-active #exerciseScreen.active .stage-layout > .video-preload-shell > #videoWrap iframe.yt-exact-frame{
position:absolute !important;
inset:0 !important;
left:0 !important;
top:0 !important;
right:auto !important;
bottom:auto !important;
width:100% !important;
height:100% !important;
min-width:100% !important;
min-height:100% !important;
max-width:100% !important;
max-height:100% !important;
padding:0 !important;
margin:0 !important;
transform:none !important;
border:0 !important;
display:block !important;
background:#020713 !important;
z-index:1 !important;
box-sizing:border-box !important;
}
/* Start/rest visual overlays also fill the single owned frame. */
body.exercise-active #exerciseScreen.active .stage-layout > .video-card > #videoWrap .start-stage,
body.exercise-active #exerciseScreen.active .stage-layout > .video-preload-shell > #videoWrap .start-stage,
body.exercise-active #exerciseScreen.active .stage-layout > .video-card > #videoWrap .start-stage-v9528,
body.exercise-active #exerciseScreen.active .stage-layout > .video-preload-shell > #videoWrap .start-stage-v9528,
body.exercise-active #exerciseScreen.active .stage-layout > .video-card > #videoWrap .rest-stage,
body.exercise-active #exerciseScreen.active .stage-layout > .video-preload-shell > #videoWrap .rest-stage,
body.exercise-active #exerciseScreen.active .stage-layout > .video-card > #videoWrap .rest-stage-v9510,
body.exercise-active #exerciseScreen.active .stage-layout > .video-preload-shell > #videoWrap .rest-stage-v9510{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
min-width:100% !important;
min-height:100% !important;
max-width:100% !important;
max-height:100% !important;
border-radius:inherit !important;
overflow:hidden !important;
}
/* Autoscroll breathing room: the active row should not touch the exact top edge. */
body.exercise-active #exerciseScreen.active .playlist-card{
scroll-padding-top:8px !important;
}
body.exercise-active #exerciseScreen.active .mini-item.active,
body.exercise-active #exerciseScreen.active .mini-item[data-active="true"]{
scroll-margin-top:8px !important;
}
}
/* Stacked views keep the old behavior; only add the 2mm top breathing room. */
@media (max-width:899px){
body.exercise-active .playlist-card{
scroll-padding-top:8px !important;
}
body.exercise-active .mini-item.active,
body.exercise-active .mini-item[data-active="true"]{
scroll-margin-top:8px !important;
}
}
/* ==========================================================
v95.33 PASS CONTROLS + REAL VIDEO SLOT
Fixes:
- active-row fill does not run before pass start
- controls move to top in iPad/desktop landscape so info height cannot push them out
- media slot is defined by the single outer .video-card, not nested ratio wrappers
- TV and Live modes now have visible effects
========================================================== */
@media (min-width:900px) and (orientation:landscape){
body.exercise-active #exerciseScreen.active{
display:grid !important;
grid-template-areas:
"passnav controls"
"stage stage"
"playlist playlist" !important;
grid-template-columns:1fr minmax(260px, 380px) !important;
grid-template-rows:auto auto minmax(0, auto) !important;
column-gap:14px !important;
row-gap:12px !important;
align-items:start !important;
padding:0 14px calc(14px + env(safe-area-inset-bottom,0px)) !important;
overflow:hidden auto !important;
}
body.exercise-active #exerciseScreen.active .sticky-nav{
grid-area:passnav !important;
position:sticky !important;
top:0 !important;
z-index:80 !important;
width:100% !important;
max-width:none !important;
margin:0 !important;
}
/* Controls are top-right now, never below a tall info panel. */
body.exercise-active #exerciseScreen.active .pass-bottom-controls{
grid-area:controls !important;
position:sticky !important;
top:0 !important;
bottom:auto !important;
z-index:82 !important;
width:100% !important;
max-width:none !important;
margin:0 !important;
padding:8px 0 !important;
display:grid !important;
grid-template-columns:minmax(88px,.45fr) minmax(160px,1fr) !important;
gap:8px !important;
align-items:center !important;
background:linear-gradient(180deg,rgba(5,10,19,.98),rgba(5,10,19,.78),rgba(5,10,19,0)) !important;
transform:none !important;
}
body.exercise-active #exerciseScreen.active .pass-bottom-controls #prevBtn,
body.exercise-active #exerciseScreen.active .pass-bottom-controls #nextBtn{
min-height:52px !important;
height:52px !important;
padding:8px 12px !important;
font-size:clamp(15px,1.6vw,20px) !important;
border-radius:18px !important;
}
body.exercise-active #exerciseScreen.active:not(.pass-has-prev) .pass-bottom-controls{
grid-template-columns:1fr !important;
}
body.exercise-active #exerciseScreen.active:not(.pass-has-prev) .pass-bottom-controls #prevBtn{
display:none !important;
}
body.exercise-active #exerciseScreen.active .stage-layout{
grid-area:stage !important;
display:grid !important;
grid-template-columns:minmax(0, 1fr) minmax(330px, 430px) !important;
grid-template-rows:auto !important;
gap:18px !important;
align-items:start !important;
width:100% !important;
max-width:min(1380px, calc(100vw - 28px)) !important;
margin:0 auto !important;
overflow:visible !important;
}
/* THE media slot. One slot, one ratio, no nested visible frame. */
body.exercise-active #exerciseScreen.active .video-card.video-preload-shell{
grid-column:1 !important;
grid-row:1 !important;
position:relative !important;
display:block !important;
width:100% !important;
aspect-ratio:16 / 9 !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
padding:0 !important;
margin:0 !important;
overflow:hidden !important;
contain:layout paint !important;
isolation:isolate !important;
border-radius:24px !important;
line-height:0 !important;
background:#020713 !important;
}
body.exercise-active #exerciseScreen.active .video-card.video-preload-shell > #videoWrap.video-wrap,
body.exercise-active #exerciseScreen.active .video-card.video-preload-shell > #videoWrap{
position:absolute !important;
inset:0 !important;
display:block !important;
width:auto !important;
height:auto !important;
min-width:0 !important;
min-height:0 !important;
max-width:none !important;
max-height:none !important;
aspect-ratio:auto !important;
margin:0 !important;
padding:0 !important;
border-radius:inherit !important;
overflow:hidden !important;
background:#020713 !important;
line-height:0 !important;
contain:paint !important;
}
/* Hard reset of all old iframe cover/offset rules. */
body.exercise-active #exerciseScreen.active .video-card.video-preload-shell > #videoWrap > iframe,
body.exercise-active #exerciseScreen.active .video-card.video-preload-shell > #videoWrap iframe#videoFrame,
body.exercise-active #exerciseScreen.active .video-card.video-preload-shell > #videoWrap iframe.yt-cover-frame,
body.exercise-active #exerciseScreen.active .video-card.video-preload-shell > #videoWrap iframe.yt-exact-frame{
position:absolute !important;
inset:0 !important;
left:0 !important;
top:0 !important;
right:0 !important;
bottom:0 !important;
width:100% !important;
height:100% !important;
min-width:100% !important;
min-height:100% !important;
max-width:100% !important;
max-height:100% !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
transform:none !important;
translate:none !important;
display:block !important;
object-fit:fill !important;
background:#020713 !important;
z-index:1 !important;
}
body.exercise-active #exerciseScreen.active .info-card{
grid-column:2 !important;
grid-row:1 !important;
align-self:start !important;
margin:0 !important;
width:100% !important;
max-height:calc(100svh - 128px) !important;
overflow:auto !important;
z-index:1 !important;
}
body.exercise-active #exerciseScreen.active .playlist-card{
grid-area:playlist !important;
width:100% !important;
max-width:min(1380px, calc(100vw - 28px)) !important;
margin:0 auto !important;
max-height:min(28svh, 250px) !important;
overflow:auto !important;
}
body.exercise-active #exerciseScreen.active .mini-list{
overflow:visible !important;
max-height:none !important;
}
}
/* TV mode: media-first. Hide list, shrink info, larger media footprint. */
@media (min-width:900px) and (orientation:landscape){
body.exercise-active.tv-mode #exerciseScreen.active{
grid-template-areas:
"passnav controls"
"stage stage" !important;
}
body.exercise-active.tv-mode #exerciseScreen.active .playlist-card{
display:none !important;
}
body.exercise-active.tv-mode #exerciseScreen.active .stage-layout{
grid-template-columns:minmax(0, 1.25fr) minmax(280px, 360px) !important;
}
body.exercise-active.tv-mode #exerciseScreen.active .info-card{
max-height:calc(100svh - 132px) !important;
}
}
/* Live mode: less chrome, more training surface. */
@media (min-width:900px) and (orientation:landscape){
body.exercise-active.live-mode #exerciseScreen.active .info-card{
padding:14px !important;
}
body.exercise-active.live-mode #exerciseScreen.active .exercise-kicker{
margin-bottom:6px !important;
}
body.exercise-active.live-mode #exerciseScreen.active .exercise-name{
font-size:clamp(34px,4.2vw,64px) !important;
}
body.exercise-active.live-mode #exerciseScreen.active .coach-cues{
padding:14px !important;
}
}
/* Start hero, rest hero and fallback cards fill the same single media slot. */
@media (min-width:900px) and (orientation:landscape){
body.exercise-active #exerciseScreen.active #videoWrap .start-stage,
body.exercise-active #exerciseScreen.active #videoWrap .start-stage-v9528,
body.exercise-active #exerciseScreen.active #videoWrap .rest-stage,
body.exercise-active #exerciseScreen.active #videoWrap .rest-stage-v9510,
body.exercise-active #exerciseScreen.active #videoWrap .no-video{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
min-width:100% !important;
min-height:100% !important;
max-width:100% !important;
max-height:100% !important;
overflow:hidden !important;
border-radius:inherit !important;
}
}
/* ==========================================================
v95.34 SELF-QA LAYOUT FIX
Root cause found in visual QA: old localStorage had TV/Live ON by default.
That made the playlist both visible and removed from the TV grid, so it
auto-placed on the right and destroyed the iPad landscape layout.
========================================================== */
/* Guard: if TV mode is on, the playlist is really hidden even if old inline state exists. */
@media (min-width:900px) and (orientation:landscape){
body.exercise-active.tv-mode #exerciseScreen.active .playlist-card{
display:none !important;
}
/* Standard coaching layout: top nav + top controls, then media/info, then list. */
body.exercise-active:not(.tv-mode) #exerciseScreen.active{
grid-template-areas:
"passnav controls"
"stage stage"
"playlist playlist" !important;
}
body.exercise-active:not(.tv-mode) #exerciseScreen.active .playlist-card{
grid-area:playlist !important;
display:block !important;
width:100% !important;
max-width:min(1380px, calc(100vw - 28px)) !important;
margin:0 auto !important;
max-height:min(28svh,250px) !important;
overflow:auto !important;
}
/* Keep the media/info row stable and wide; never let playlist join this row. */
body.exercise-active:not(.tv-mode) #exerciseScreen.active .stage-layout{
grid-area:stage !important;
display:grid !important;
grid-template-columns:minmax(0,1fr) minmax(330px,430px) !important;
gap:18px !important;
align-items:start !important;
max-width:min(1380px, calc(100vw - 28px)) !important;
width:100% !important;
margin:0 auto !important;
}
body.exercise-active:not(.tv-mode) #exerciseScreen.active .video-card.video-preload-shell{
grid-column:1 !important;
grid-row:1 !important;
width:100% !important;
aspect-ratio:16 / 9 !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow:hidden !important;
position:relative !important;
margin:0 !important;
}
body.exercise-active:not(.tv-mode) #exerciseScreen.active .info-card{
grid-column:2 !important;
grid-row:1 !important;
align-self:start !important;
margin:0 !important;
max-height:calc(100svh - 128px) !important;
overflow:auto !important;
}
/* Start image overlay: keep it visual, not text-heavy, so it cannot clip in the media slot. */
body.exercise-active #exerciseScreen.active #videoWrap.start-video-wrap .start-card{
position:absolute !important;
left:18px !important;
bottom:18px !important;
margin:0 !important;
padding:0 !important;
max-width:none !important;
width:auto !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
backdrop-filter:none !important;
}
body.exercise-active #exerciseScreen.active #videoWrap.start-video-wrap .start-title,
body.exercise-active #exerciseScreen.active #videoWrap.start-video-wrap .start-sub,
body.exercise-active #exerciseScreen.active #videoWrap.start-video-wrap .start-progress,
body.exercise-active #exerciseScreen.active #videoWrap.start-video-wrap .start-hint,
body.exercise-active #exerciseScreen.active #videoWrap.start-video-wrap .start-equipment{
display:none !important;
}
body.exercise-active #exerciseScreen.active #videoWrap.start-video-wrap .start-badge{
display:inline-flex !important;
font-size:11px !important;
padding:7px 12px !important;
border-radius:999px !important;
background:rgba(5,14,28,.70) !important;
}
}
/* Live mode should not unexpectedly rearrange layout; it only tightens content. */
@media (min-width:900px) and (orientation:landscape){
body.exercise-active.live-mode:not(.tv-mode) #exerciseScreen.active .playlist-card{
display:block !important;
}
}
/* ==========================================================
v95.35 CONTROLS + START COUNTDOWN + FULLSCREEN FIX
- Back button is small and sits beside Next in the top controls.
- Active list-row fill does not animate before the pass is started.
- Fullscreen uses pseudo-fullscreen only, avoiding browser-native X overlay.
========================================================== */
/* Prevent the first active row from "counting down" before Starta pass is tapped.
Older rule animated .mini-item.active .mini-fill, so JS could not stop it alone. */
body.exercise-active .mini-item.active:not(.filling) .mini-fill,
body.exercise-active .mini-item[data-active="true"]:not(.filling) .mini-fill{
animation:none !important;
width:0% !important;
transform:none !important;
}
/* Once started, filling class owns the animation. */
body.exercise-active .mini-item.filling .mini-fill{
animation:miniListFill var(--mini-fill-ms,10000ms) linear forwards !important;
}
/* iPad/desktop top pass controls: compact back button + large next button. */
@media (min-width:900px) and (orientation:landscape){
body.exercise-active #exerciseScreen.active .pass-bottom-controls,
body.exercise-active.pass-has-prev #exerciseScreen.active .pass-bottom-controls,
body.exercise-active #exerciseScreen.active .pass-bottom-controls.has-prev{
grid-template-columns:54px minmax(160px,1fr) !important;
max-width:420px !important;
justify-self:end !important;
}
body.exercise-active #exerciseScreen.active:not(.pass-has-prev) .pass-bottom-controls,
body.exercise-active:not(.pass-has-prev) #exerciseScreen.active .pass-bottom-controls,
body.exercise-active #exerciseScreen.active .pass-bottom-controls:not(.has-prev){
grid-template-columns:1fr !important;
max-width:420px !important;
justify-self:end !important;
}
body.exercise-active #exerciseScreen.active .pass-bottom-controls #prevBtn.compact-prev,
body.exercise-active.pass-has-prev #exerciseScreen.active .pass-bottom-controls #prevBtn.compact-prev,
body.exercise-active #exerciseScreen.active .pass-bottom-controls.has-prev #prevBtn.compact-prev{
display:inline-grid !important;
place-items:center !important;
width:54px !important;
min-width:54px !important;
max-width:54px !important;
height:52px !important;
min-height:52px !important;
padding:0 !important;
margin:0 !important;
border-radius:18px !important;
font-size:28px !important;
line-height:1 !important;
font-weight:950 !important;
text-align:center !important;
}
body.exercise-active #exerciseScreen.active .pass-bottom-controls #nextBtn{
width:100% !important;
min-width:0 !important;
max-width:none !important;
}
}
/* Mobile/portrait: if back appears, keep it compact too. */
@media (max-width:899px){
body.exercise-active .pass-bottom-controls.has-prev,
body.exercise-active.pass-has-prev .pass-bottom-controls{
grid-template-columns:52px minmax(0,1fr) !important;
}
body.exercise-active .pass-bottom-controls #prevBtn.compact-prev{
width:52px !important;
min-width:52px !important;
max-width:52px !important;
padding:0 !important;
font-size:26px !important;
}
}
/* Pseudo-fullscreen only: no native browser X can cover the pass menu. */
body.exercise-active.pseudo-fullscreen{
overflow:hidden !important;
}
body.exercise-active.pseudo-fullscreen #exerciseScreen.active{
position:fixed !important;
inset:0 !important;
width:100vw !important;
height:100svh !important;
max-width:none !important;
z-index:9990 !important;
overflow:auto !important;
background:#030713 !important;
}
body.exercise-active.pseudo-fullscreen .sticky-nav{
z-index:9992 !important;
}
body.exercise-active.pseudo-fullscreen .pass-bottom-controls{
z-index:9993 !important;
}
/* Make sure the app menu button remains tappable in pseudo fullscreen. */
body.exercise-active.pseudo-fullscreen #menuToggleBtn{
position:relative !important;
z-index:9994 !important;
}
/* ==========================================================
v95.36 REAL FULLSCREEN + CONTROLS SAME ROW
- Fullscreen uses native Fullscreen API first, fallback pseudo.
- Back/prev button is forced onto the same row as Start/Nästa.
- Old floating/stacking previous-button rules are neutralized.
========================================================== */
/* Force pass controls to a single horizontal row in iPad/desktop landscape. */
@media (min-width:900px) and (orientation:landscape){
body.exercise-active #exerciseScreen.active .pass-bottom-controls{
display:grid !important;
grid-template-columns:1fr !important;
grid-auto-flow:column !important;
align-items:center !important;
justify-content:stretch !important;
gap:10px !important;
max-width:520px !important;
width:100% !important;
justify-self:end !important;
}
body.exercise-active.pass-has-prev #exerciseScreen.active .pass-bottom-controls,
body.exercise-active #exerciseScreen.active .pass-bottom-controls.has-prev{
grid-template-columns:58px minmax(220px,1fr) !important;
}
body.exercise-active:not(.pass-has-prev) #exerciseScreen.active .pass-bottom-controls,
body.exercise-active #exerciseScreen.active .pass-bottom-controls:not(.has-prev){
grid-template-columns:minmax(260px,1fr) !important;
}
body.exercise-active #exerciseScreen.active .pass-bottom-controls #prevBtn.compact-prev{
position:static !important;
inset:auto !important;
left:auto !important;
top:auto !important;
right:auto !important;
bottom:auto !important;
transform:none !important;
translate:none !important;
grid-column:1 !important;
grid-row:1 !important;
display:inline-grid !important;
place-items:center !important;
width:58px !important;
min-width:58px !important;
max-width:58px !important;
height:54px !important;
min-height:54px !important;
max-height:54px !important;
padding:0 !important;
margin:0 !important;
border-radius:18px !important;
font-size:28px !important;
line-height:1 !important;
z-index:auto !important;
}
body.exercise-active #exerciseScreen.active .pass-bottom-controls #nextBtn{
position:static !important;
inset:auto !important;
transform:none !important;
translate:none !important;
grid-row:1 !important;
grid-column:1 !important;
width:100% !important;
min-width:0 !important;
max-width:none !important;
height:54px !important;
min-height:54px !important;
padding:8px 16px !important;
margin:0 !important;
}
body.exercise-active.pass-has-prev #exerciseScreen.active .pass-bottom-controls #nextBtn,
body.exercise-active #exerciseScreen.active .pass-bottom-controls.has-prev #nextBtn{
grid-column:2 !important;
}
}
/* In portrait/mobile, same row if previous exists. */
@media (max-width:899px){
body.exercise-active .pass-bottom-controls.has-prev,
body.exercise-active.pass-has-prev .pass-bottom-controls{
display:grid !important;
grid-template-columns:56px minmax(0,1fr) !important;
gap:10px !important;
align-items:center !important;
}
body.exercise-active .pass-bottom-controls #prevBtn.compact-prev{
position:static !important;
inset:auto !important;
transform:none !important;
grid-column:1 !important;
grid-row:1 !important;
width:56px !important;
min-width:56px !important;
max-width:56px !important;
height:54px !important;
padding:0 !important;
margin:0 !important;
}
body.exercise-active .pass-bottom-controls.has-prev #nextBtn,
body.exercise-active.pass-has-prev .pass-bottom-controls #nextBtn{
grid-column:2 !important;
grid-row:1 !important;
}
}
/* Native fullscreen mode: make the fullscreen element own the viewport cleanly. */
body.exercise-active.native-fullscreen-active #exerciseScreen.active,
body.exercise-active.pseudo-fullscreen #exerciseScreen.active{
width:100vw !important;
height:100svh !important;
max-width:none !important;
overflow:auto !important;
background:#030713 !important;
}
/* If native fullscreen is active, keep menu/controls inside the safe top zone. */
body.exercise-active.native-fullscreen-active .sticky-nav,
body.exercise-active.pseudo-fullscreen .sticky-nav{
padding-top:max(8px, env(safe-area-inset-top,0px)) !important;
}
/* Avoid any old floating back button artifacts. */
body.exercise-active #prevBtn.compact-prev::before,
body.exercise-active #prevBtn.compact-prev::after{
content:none !important;
display:none !important;
}
/* Fullscreen button should be honest: browser support decides if address bar disappears.
Pseudo fallback still fills app area when native fullscreen is blocked. */
body.exercise-active.pseudo-fullscreen:not(.native-fullscreen-active) #exerciseScreen.active{
position:fixed !important;
inset:0 !important;
z-index:9990 !important;
}
/* ==========================================================
v95.37 TOP CONTROLS + WAKELOCK
- Move pass menu button visually into the right-side control zone.
- Hide blue back button before workoutPrimed/start.
- Add Wake Lock support in JS; CSS adds tiny status affordance only.
========================================================== */
/* iPad/desktop landscape: one top control row on the right:
Meny | Tillbaka | Starta/Nästa */
@media (min-width:900px) and (orientation:landscape){
body.exercise-active #exerciseScreen.active{
grid-template-areas:
"passnav controls"
"stage stage"
"playlist playlist" !important;
grid-template-columns:1fr minmax(360px, 620px) !important;
}
/* Keep progress/title on the left, but allow menu to be pulled to controls side. */
body.exercise-active #exerciseScreen.active .sticky-nav{
display:grid !important;
grid-template-columns:auto 1fr !important;
align-items:center !important;
overflow:visible !important;
}
body.exercise-active #exerciseScreen.active .sticky-nav #menuToggleBtn,
body.exercise-active #exerciseScreen.active .sticky-nav .menu-btn,
body.exercise-active #exerciseScreen.active .sticky-nav .nav-menu-btn{
position:fixed !important;
top:max(8px, env(safe-area-inset-top,0px)) !important;
right:calc(14px + min(420px, 36vw)) !important;
z-index:9995 !important;
width:58px !important;
min-width:58px !important;
max-width:58px !important;
height:54px !important;
min-height:54px !important;
max-height:54px !important;
padding:0 !important;
border-radius:18px !important;
display:inline-grid !important;
place-items:center !important;
}
body.exercise-active #exerciseScreen.active .pass-bottom-controls{
grid-area:controls !important;
position:sticky !important;
top:0 !important;
justify-self:end !important;
width:100% !important;
max-width:420px !important;
margin:0 !important;
padding:8px 0 !important;
z-index:9993 !important;
}
body.exercise-active.pass-has-prev #exerciseScreen.active .pass-bottom-controls,
body.exercise-active #exerciseScreen.active .pass-bottom-controls.has-prev{
grid-template-columns:58px minmax(220px,1fr) !important;
max-width:420px !important;
}
body.exercise-active:not(.pass-has-prev) #exerciseScreen.active .pass-bottom-controls,
body.exercise-active #exerciseScreen.active .pass-bottom-controls:not(.has-prev){
grid-template-columns:minmax(260px,1fr) !important;
max-width:420px !important;
}
}
/* If no previous action, make absolutely sure it is hidden. */
body.exercise-active:not(.pass-has-prev) #prevBtn.compact-prev,
body.exercise-active .pass-bottom-controls:not(.has-prev) #prevBtn.compact-prev,
body.exercise-active #prevBtn.compact-prev[aria-hidden="true"]{
display:none !important;
visibility:hidden !important;
pointer-events:none !important;
}
/* In native/pseudo fullscreen, keep menu separate from browser UI and controls. */
body.exercise-active.native-fullscreen-active #exerciseScreen.active .sticky-nav #menuToggleBtn,
body.exercise-active.pseudo-fullscreen #exerciseScreen.active .sticky-nav #menuToggleBtn,
body.exercise-active.native-fullscreen-active #exerciseScreen.active .sticky-nav .menu-btn,
body.exercise-active.pseudo-fullscreen #exerciseScreen.active .sticky-nav .menu-btn{
top:max(10px, env(safe-area-inset-top,0px)) !important;
}
/* Wake lock status is intentionally subtle; no visual clutter. */
body.exercise-active.wake-lock-active .sticky-nav::after{
content:'';
width:6px;
height:6px;
border-radius:999px;
background:rgba(127,238,255,.75);
box-shadow:0 0 10px rgba(127,238,255,.5);
margin-left:6px;
}
/* ==========================================================
v95.38 INLINE CAST GUARD MINI
No new UI. YouTube iframe is treated as passive inline media.
Goal: reduce AirPlay/screen-share handoff where YouTube tries to cast
the iframe as separate fullscreen video instead of part of the page.
========================================================== */
body.exercise-active #videoWrap iframe.yt-inline-locked,
body.exercise-active #preloadVideoWrap iframe.yt-inline-locked{
pointer-events:none !important;
-webkit-user-select:none !important;
user-select:none !important;
touch-action:none !important;
}
body.exercise-active #videoWrap iframe.yt-inline-locked{
border:0 !important;
outline:0 !important;
background:#020713 !important;
}
body.exercise-active .video-card.video-preload-shell,
body.exercise-active #videoWrap,
body.exercise-active .video-wrap{
-webkit-user-select:none !important;
user-select:none !important;
}
body.exercise-active video{
-webkit-user-select:none !important;
user-select:none !important;
}
/* ==========================================================
v95.39 MENU / BACK BUTTON SEPARATION FIX
Prevent the fixed menu button from overlapping the compact back button
in the top pass controls on iPad/desktop.
Layout intent: [Menu] [Back] [Next]
========================================================== */
@media (min-width:900px) and (orientation:landscape){
/* The right-side controls occupy max 420px. Place the menu button just
to the LEFT of that control block with a fixed gap. */
body.exercise-active #exerciseScreen.active .sticky-nav #menuToggleBtn,
body.exercise-active #exerciseScreen.active .sticky-nav .menu-btn,
body.exercise-active #exerciseScreen.active .sticky-nav .nav-menu-btn,
body.exercise-active.native-fullscreen-active #exerciseScreen.active .sticky-nav #menuToggleBtn,
body.exercise-active.pseudo-fullscreen #exerciseScreen.active .sticky-nav #menuToggleBtn,
body.exercise-active.native-fullscreen-active #exerciseScreen.active .sticky-nav .menu-btn,
body.exercise-active.pseudo-fullscreen #exerciseScreen.active .sticky-nav .menu-btn{
position:fixed !important;
top:max(10px, env(safe-area-inset-top,0px)) !important;
right:calc(14px + 420px + 10px) !important;
left:auto !important;
margin:0 !important;
z-index:9995 !important;
}
/* Keep the control block tightly right-aligned. */
body.exercise-active #exerciseScreen.active .pass-bottom-controls{
justify-self:end !important;
max-width:420px !important;
}
}
/* On narrower / portrait views, keep the menu clear of top buttons too. */
@media (max-width:899px){
body.exercise-active #exerciseScreen.active .sticky-nav #menuToggleBtn,
body.exercise-active #exerciseScreen.active .sticky-nav .menu-btn,
body.exercise-active #exerciseScreen.active .sticky-nav .nav-menu-btn{
right:14px !important;
left:auto !important;
z-index:9995 !important;
}
}
/* ==========================================================
v95.39 GRAPHICS IMPLEMENTED
New generated graphics are not only packaged; they are actively used.
========================================================== */
/* Homepage: use the new text-led hero image as the actual start visual. */
.home-visual-hero{
position:relative;
width:100%;
margin:0 0 14px;
border-radius:26px;
overflow:hidden;
border:1px solid rgba(124,236,255,.22);
background:#050b16;
box-shadow:0 18px 52px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.045);
}
.home-visual-hero img{
display:block;
width:100%;
height:auto;
aspect-ratio:4 / 3;
object-fit:cover;
object-position:center center;
}
.home-visual-hero::after{
content:'';
position:absolute;
inset:0;
pointer-events:none;
background:
radial-gradient(circle at 86% 10%, rgba(124,236,255,.16), transparent 34%),
linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.06));
}
/* Make the homepage visual feel like the premium top section, not a loose image. */
.home-hero{
padding:12px !important;
overflow:hidden;
}
/* On larger screens, let the image sit as a real hero strip above the dashboard. */
@media(min-width:900px){
.home-visual-hero img{
aspect-ratio:21 / 9;
}
}
/* New start and rest images share the same full-bleed treatment. */
.start-stage-v9528 .start-bg-img,
.rest-stage-v9510 .rest-bg-img{
filter:saturate(1.04) brightness(.90) contrast(1.06) !important;
}
/* Finish screen: full-bleed victory image. */
#finishScreen.finish.finish-visual-active{
position:relative;
min-height:min(720px, calc(100svh - 40px));
display:none;
place-items:end start;
overflow:hidden;
border-radius:28px;
border:1px solid rgba(124,236,255,.22);
background:#030713;
padding:28px;
}
#finishScreen.finish.finish-visual-active.active{
display:grid;
}
#finishScreen.finish.finish-visual-active::before{
content:'';
position:absolute;
inset:0;
background-image:var(--finish-asset-url);
background-size:cover;
background-position:center center;
filter:saturate(1.04) brightness(.88) contrast(1.05);
transform:scale(1.01);
}
#finishScreen.finish.finish-visual-active::after{
content:'';
position:absolute;
inset:0;
background:
radial-gradient(circle at 70% 28%, rgba(124,236,255,.18), transparent 34%),
linear-gradient(90deg, rgba(2,8,18,.82), rgba(2,8,18,.42) 44%, rgba(2,8,18,.12)),
linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.42));
}
#finishScreen.finish.finish-visual-active > div{
position:relative;
z-index:2;
max-width:min(620px, 92vw);
padding:24px;
border-radius:28px;
border:1px solid rgba(124,236,255,.24);
background:linear-gradient(180deg, rgba(5,12,26,.48), rgba(5,12,26,.20));
box-shadow:0 18px 54px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
backdrop-filter:blur(8px) saturate(130%);
}
#finishScreen.finish.finish-visual-active h1{
margin:8px 0 8px;
font-size:clamp(44px, 10vw, 86px);
line-height:.92;
letter-spacing:-.07em;
}
#finishScreen.finish.finish-visual-active .confetti{
font-size:clamp(34px, 8vw, 60px);
}
#finishScreen.finish.finish-visual-active p{
color:rgba(230,240,255,.92);
}
/* ==========================================================
v95.39 TEXT HERO + FINISH IMAGE FIX
- Remove poster-style homepage image from layout.
- Make homepage hero a styled text-led UI component.
- Finish image uses real ![]()
layer, not only CSS variable.
========================================================== */
/* Kill the previous image poster hero completely. */
.home-visual-hero{
display:none !important;
}
/* Restore showcase copy and make it the actual hero instead of hidden. */
.home-hero{
padding:14px !important;
background:
radial-gradient(circle at 88% 10%, rgba(124,236,255,.16), transparent 35%),
radial-gradient(circle at 12% 86%, rgba(72,160,255,.10), transparent 32%),
linear-gradient(180deg, rgba(10,20,36,.96), rgba(5,10,19,.99)) !important;
border-radius:28px !important;
overflow:hidden !important;
}
.home-hero .showcase-grid{
display:grid !important;
grid-template-columns:1fr !important;
gap:14px !important;
position:relative !important;
}
.home-hero .showcase-copy.home-text-hero,
.home-hero .showcase-copy{
display:block !important;
position:relative !important;
padding:22px !important;
border-radius:26px !important;
border:1px solid rgba(124,236,255,.22) !important;
background:
linear-gradient(135deg, rgba(124,236,255,.10), transparent 34%),
linear-gradient(180deg, rgba(12,24,44,.84), rgba(7,14,26,.96)) !important;
box-shadow:0 20px 54px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.045) !important;
overflow:hidden !important;
}
.home-hero .showcase-copy::before{
content:'' !important;
position:absolute !important;
inset:auto -12% -44% 16% !important;
height:190px !important;
border-radius:999px !important;
border:1px solid rgba(124,236,255,.18) !important;
background:radial-gradient(circle, rgba(124,236,255,.12), transparent 68%) !important;
transform:rotate(-8deg) !important;
pointer-events:none !important;
}
.home-hero .showcase-copy::after{
content:'' !important;
position:absolute !important;
inset:0 !important;
background:
linear-gradient(90deg, transparent 0 72%, rgba(124,236,255,.06)),
repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 34px) !important;
opacity:.46 !important;
pointer-events:none !important;
}
.home-hero .showcase-eyebrow{
display:inline-flex !important;
position:relative !important;
z-index:1 !important;
padding:8px 12px !important;
border-radius:999px !important;
border:1px solid rgba(124,236,255,.30) !important;
background:rgba(5,15,28,.56) !important;
color:var(--cyan) !important;
font-weight:1000 !important;
letter-spacing:.16em !important;
text-transform:uppercase !important;
font-size:12px !important;
}
.home-hero .showcase-copy h1{
position:relative !important;
z-index:1 !important;
margin:16px 0 0 !important;
color:#fff !important;
font-size:clamp(42px, 10vw, 92px) !important;
line-height:.88 !important;
letter-spacing:-.075em !important;
font-weight:1000 !important;
}
.home-hero .showcase-copy h1 span{
color:#8fefff !important;
text-shadow:0 0 30px rgba(124,236,255,.20) !important;
}
.home-hero .showcase-intro{
display:block !important;
position:relative !important;
z-index:1 !important;
max-width:740px !important;
margin:14px 0 0 !important;
color:rgba(234,246,255,.90) !important;
font-size:clamp(18px, 3.8vw, 28px) !important;
line-height:1.18 !important;
font-weight:750 !important;
}
.home-hero .showcase-benefits{
display:none !important;
}
.home-hero .showcase-signals{
display:flex !important;
position:relative !important;
z-index:1 !important;
flex-wrap:wrap !important;
gap:8px !important;
margin-top:18px !important;
}
.home-hero .showcase-signals span{
padding:9px 12px !important;
border-radius:999px !important;
border:1px solid rgba(124,236,255,.24) !important;
background:rgba(7,18,32,.62) !important;
color:rgba(226,244,255,.95) !important;
font-weight:900 !important;
font-size:13px !important;
}
@media(min-width:900px){
.home-hero .showcase-grid{
grid-template-columns:minmax(0, .95fr) minmax(380px, .75fr) !important;
align-items:stretch !important;
}
.home-hero .showcase-copy.home-text-hero,
.home-hero .showcase-copy{
min-height:340px !important;
display:flex !important;
flex-direction:column !important;
justify-content:center !important;
}
}
/* Finish image: explicit img layer so it cannot disappear if CSS variable is ignored/overridden. */
#finishScreen.finish.finish-visual-active{
background:#030713 !important;
}
#finishScreen.finish.finish-visual-active .finish-bg-img{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
object-fit:cover !important;
object-position:center center !important;
filter:saturate(1.04) brightness(.88) contrast(1.05) !important;
transform:scale(1.01) !important;
z-index:0 !important;
pointer-events:none !important;
}
#finishScreen.finish.finish-visual-active::before{
background-image:none !important;
}
#finishScreen.finish.finish-visual-active::after{
z-index:1 !important;
}
#finishScreen.finish.finish-visual-active > div{
z-index:2 !important;
}
/* ==========================================================
v95.40 DASHBOARD MOCKUP SYNC
Goal: make dashboard feel like the mockup/product home.
Fewer nested cells, stronger hero, one primary CTA, cleaner metrics.
========================================================== */
#startScreen.dashboard-mockup-sync{
display:none;
}
#startScreen.dashboard-mockup-sync.active{
display:block;
}
#startScreen.dashboard-mockup-sync .dashboard-shortcuts-panel{
margin-bottom:10px !important;
border:0 !important;
background:transparent !important;
box-shadow:none !important;
}
#startScreen.dashboard-mockup-sync .dashboard-shortcuts-panel .panel-pad{
padding:0 !important;
}
#startScreen.dashboard-mockup-sync .dashboard-shortcuts-grid{
display:grid !important;
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
gap:8px !important;
}
#startScreen.dashboard-mockup-sync .shortcut-btn{
min-height:42px !important;
border-radius:999px !important;
border:1px solid rgba(124,236,255,.16) !important;
background:rgba(8,16,30,.58) !important;
color:rgba(226,242,255,.78) !important;
font-weight:900 !important;
padding:8px 10px !important;
}
#startScreen.dashboard-mockup-sync .shortcut-btn.active{
background:linear-gradient(180deg,rgba(124,236,255,.18),rgba(8,18,34,.72)) !important;
color:#fff !important;
border-color:rgba(124,236,255,.34) !important;
}
#startScreen.dashboard-mockup-sync .home-hero{
padding:14px !important;
border-radius:30px !important;
border:1px solid rgba(124,236,255,.18) !important;
background:
radial-gradient(circle at 82% 6%, rgba(124,236,255,.14), transparent 32%),
radial-gradient(circle at 18% 88%, rgba(80,160,255,.12), transparent 30%),
linear-gradient(180deg, rgba(10,20,38,.96), rgba(5,10,19,.99)) !important;
box-shadow:0 24px 70px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.045) !important;
}
#startScreen.dashboard-mockup-sync .home-hero .showcase-grid{
display:grid !important;
grid-template-columns:1fr !important;
gap:14px !important;
}
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy.home-text-hero{
min-height:0 !important;
padding:22px !important;
border-radius:28px !important;
border:1px solid rgba(124,236,255,.20) !important;
background:
linear-gradient(135deg, rgba(124,236,255,.11), transparent 36%),
linear-gradient(180deg, rgba(12,24,44,.82), rgba(7,14,26,.96)) !important;
}
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy h1{
font-size:clamp(42px, 9vw, 88px) !important;
line-height:.88 !important;
letter-spacing:-.075em !important;
margin-top:14px !important;
}
#startScreen.dashboard-mockup-sync .home-hero .showcase-intro{
font-size:clamp(18px, 3.3vw, 26px) !important;
margin-top:12px !important;
max-width:700px !important;
}
#startScreen.dashboard-mockup-sync .hero-dashboard-panel{
border:0 !important;
background:transparent !important;
box-shadow:none !important;
border-radius:0 !important;
}
#startScreen.dashboard-mockup-sync .hero-dashboard-panel .panel-pad{
padding:0 !important;
}
.dash-v9540{
display:grid;
grid-template-columns:1fr;
gap:12px;
}
.dash-v9540-main,
.dash-v9540-side{
position:relative;
overflow:hidden;
border-radius:28px;
border:1px solid rgba(124,236,255,.20);
background:
radial-gradient(circle at 88% 14%, rgba(124,236,255,.12), transparent 34%),
linear-gradient(180deg, rgba(11,22,40,.90), rgba(6,12,23,.98));
box-shadow:0 18px 52px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.04);
}
.dash-v9540-main{
padding:22px;
}
.dash-v9540-side{
padding:18px;
display:grid;
grid-template-columns:auto 1fr;
align-items:center;
gap:12px 16px;
}
.dash-v9540-eyebrow,
.metric-v9540-kicker{
color:var(--cyan);
text-transform:uppercase;
letter-spacing:.16em;
font-size:12px;
font-weight:1000;
}
.dash-v9540-title{
margin-top:10px;
color:#fff;
font-size:clamp(34px, 7vw, 62px);
line-height:.92;
letter-spacing:-.065em;
font-weight:1000;
}
.dash-v9540-meta{
margin-top:9px;
color:rgba(224,240,255,.74);
font-size:15px;
font-weight:850;
}
.dash-v9540-focus{
margin:14px 0 0;
color:rgba(234,246,255,.92);
font-size:clamp(17px, 2.6vw, 22px);
line-height:1.28;
font-weight:760;
}
.dash-v9540-chips,
.dash-v9540-pill-row{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:14px;
}
.dash-v9540-chips span,
.dash-v9540-pill-row span{
padding:8px 11px;
border-radius:999px;
border:1px solid rgba(124,236,255,.22);
background:rgba(7,18,32,.66);
color:rgba(228,244,255,.94);
font-size:12px;
font-weight:900;
}
.dash-v9540-actions{
display:grid;
grid-template-columns:1fr;
gap:10px;
margin-top:18px;
}
.dash-v9540-actions .next-pass-btn{
min-height:62px;
border-radius:22px;
font-size:22px;
}
.dash-v9540-actions .overview-pass-btn{
min-height:52px;
border-radius:19px;
}
.dash-v9540-ring,
.metric-v9540-ring{
--size:92px;
width:var(--size);
height:var(--size);
border-radius:50%;
display:grid;
place-items:center;
background:
radial-gradient(circle at center, #071020 0 58%, transparent 59%),
conic-gradient(var(--cyan) calc(var(--p)*1%), rgba(124,236,255,.10) 0);
box-shadow:0 0 0 1px rgba(124,236,255,.16), 0 0 34px rgba(124,236,255,.10);
}
.dash-v9540-ring span,
.metric-v9540-ring span{
font-weight:1000;
color:#fff;
font-size:20px;
}
.dash-v9540-side-title{
color:var(--cyan);
text-transform:uppercase;
letter-spacing:.14em;
font-size:12px;
font-weight:1000;
}
.dash-v9540-side-big{
grid-column:2;
color:#fff;
font-size:clamp(24px, 4.6vw, 40px);
line-height:1;
letter-spacing:-.045em;
font-weight:1000;
}
.dash-v9540-side-sub{
grid-column:2;
color:rgba(224,240,255,.74);
line-height:1.3;
font-size:14px;
font-weight:760;
}
.dash-v9540-days{
grid-column:1 / -1;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(52px,1fr));
gap:8px;
margin-top:4px;
}
.dash-v9540-day{
min-height:46px;
border-radius:16px;
border:1px solid rgba(124,236,255,.16);
background:rgba(6,16,30,.72);
color:#fff;
display:grid;
place-items:center;
gap:2px;
font-weight:1000;
}
.dash-v9540-day b{
font-size:13px;
}
.dash-v9540-day span{
min-height:16px;
color:var(--cyan);
}
.dash-v9540-day.done{
background:linear-gradient(180deg,rgba(124,236,255,.20),rgba(7,18,32,.72));
border-color:rgba(124,236,255,.40);
}
.dash-v9540-day.skipped{
opacity:.62;
}
.dash-v9540-time{
grid-column:1 / -1;
width:max-content;
padding:9px 12px;
border-radius:999px;
border:1px solid rgba(124,236,255,.20);
background:rgba(8,18,32,.68);
color:rgba(235,248,255,.94);
font-weight:950;
font-size:13px;
}
/* Quick stats becomes a flat metric rail, not another nested panel. */
#startScreen.dashboard-mockup-sync .home-only-grid{
margin-top:14px !important;
}
#startScreen.dashboard-mockup-sync .home-quickstats{
border:0 !important;
background:transparent !important;
box-shadow:none !important;
}
#startScreen.dashboard-mockup-sync .home-quickstats .panel-pad{
padding:0 !important;
}
#startScreen.dashboard-mockup-sync .home-quickstats .section-title{
display:none !important;
}
#startScreen.dashboard-mockup-sync .quick-stats-grid{
display:grid !important;
grid-template-columns:1fr !important;
gap:10px !important;
}
.metric-v9540{
min-height:92px;
border-radius:24px;
border:1px solid rgba(124,236,255,.16);
background:
linear-gradient(180deg, rgba(11,22,40,.86), rgba(6,12,23,.96));
padding:14px;
display:grid;
grid-template-columns:auto 1fr;
gap:12px;
align-items:center;
color:inherit;
text-align:left;
text-decoration:none;
box-shadow:0 14px 38px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.035);
}
.metric-v9540-ring{
--size:58px;
}
.metric-v9540-ring span{
font-size:14px;
}
.metric-v9540-big{
margin-top:3px;
color:#fff;
font-size:clamp(24px, 5.2vw, 34px);
line-height:1;
font-weight:1000;
letter-spacing:-.045em;
}
.metric-v9540-sub{
margin-top:4px;
color:rgba(224,240,255,.70);
font-size:13px;
line-height:1.25;
font-weight:720;
}
.metric-action{
cursor:pointer;
}
.metric-arrow span{
font-size:20px;
}
/* Desktop/tablet: one polished hero region with text + daily card + side progress. */
@media(min-width:900px){
#startScreen.dashboard-mockup-sync .home-hero .showcase-grid{
grid-template-columns:minmax(0, .82fr) minmax(420px, 1fr) !important;
align-items:stretch !important;
}
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy.home-text-hero{
min-height:440px !important;
justify-content:center !important;
}
.dash-v9540{
height:100%;
grid-template-columns:minmax(0, 1fr);
}
.dash-v9540-main{
min-height:274px;
display:flex;
flex-direction:column;
justify-content:center;
}
.dash-v9540-actions{
grid-template-columns:1fr auto;
align-items:center;
}
.dash-v9540-actions .overview-pass-btn{
min-width:136px;
}
#startScreen.dashboard-mockup-sync .quick-stats-grid{
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
}
}
@media(min-width:1180px){
#startScreen.dashboard-mockup-sync .home-hero .showcase-grid{
grid-template-columns:minmax(420px, .72fr) minmax(520px, 1fr) !important;
}
.dash-v9540{
grid-template-columns:minmax(0,1.2fr) minmax(270px,.8fr);
gap:12px;
}
.dash-v9540-main{
min-height:410px;
}
.dash-v9540-side{
grid-template-columns:1fr;
align-content:center;
justify-items:start;
}
.dash-v9540-side-big,
.dash-v9540-side-sub{
grid-column:1;
}
.dash-v9540-days,
.dash-v9540-time{
grid-column:1;
width:100%;
}
.dash-v9540-ring{
--size:124px;
}
}
@media(max-width:620px){
#startScreen.dashboard-mockup-sync .dashboard-shortcuts-grid{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
.dash-v9540-side{
grid-template-columns:1fr;
}
.dash-v9540-side-big,
.dash-v9540-side-sub{
grid-column:1;
}
.dash-v9540-days,
.dash-v9540-time{
grid-column:1;
}
}
/* ==========================================================
v95.41 CLEANUP RELEASE PREP / DESIGN LOCK
No new features. This locks the visual system after v95.40:
- consistent radii and spacing
- fewer accidental nested-card shadows
- stable dashboard/pass hierarchy
========================================================== */
:root{
--next-card-radius:26px;
--next-inner-radius:20px;
--next-card-pad:16px;
--next-card-line:rgba(124,236,255,.18);
--next-glass:linear-gradient(180deg, rgba(11,22,40,.90), rgba(6,12,23,.98));
}
.panel,
.hero,
.video-card,
.info-card,
.playlist-card,
.day-card,
.test-card,
.qa-row,
.library-detail,
.selected-day-focus,
.dose-card,
.coach-checklist-panel,
.overview-insight-card,
.flow-card,
.dash-v9540-main,
.dash-v9540-side,
.metric-v9540{
border-radius:var(--next-card-radius) !important;
}
/* Avoid the old “cell in cell” look where panels are stacked inside panels. */
.panel .panel,
.hero .panel,
.info-card .panel,
.playlist-card .panel{
box-shadow:none !important;
}
/* Dashboard and pass views should own the strongest visual hierarchy. */
#startScreen.dashboard-mockup-sync .dash-v9540-main,
#startScreen.dashboard-mockup-sync .dash-v9540-side,
#startScreen.dashboard-mockup-sync .metric-v9540{
border-color:var(--next-card-line) !important;
}
/* Keep CTAs punchy and uniform. */
.next-pass-btn,
.app-primary-action,
.main-btn{
font-weight:1000 !important;
letter-spacing:-.02em !important;
}
/* Mobile polish: keep the homepage from feeling stacked/heavy. */
@media(max-width:620px){
#startScreen.dashboard-mockup-sync .home-hero{
padding:10px !important;
border-radius:24px !important;
}
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy.home-text-hero,
.dash-v9540-main,
.dash-v9540-side,
.metric-v9540{
border-radius:22px !important;
}
}
/* Final guard: pass controls must remain above media/list in all pass modes. */
body.exercise-active .pass-bottom-controls{
z-index:9993 !important;
}
body.exercise-active #menuToggleBtn{
z-index:9995 !important;
}
/* ==========================================================
v96 RC2 VISUAL SOUL
Feedback: RC1 lost too many graphic images/icons and still showed too many boxes.
Goal: restore visual assets as subtle integrated atmosphere/icons, and reduce
visible card borders / nested boxes on dashboard.
========================================================== */
#startScreen.dashboard-mockup-sync{
--rc2-line-soft:rgba(124,236,255,.105);
--rc2-line-mid:rgba(124,236,255,.16);
--rc2-glass-soft:rgba(8,18,34,.44);
--rc2-glass-mid:rgba(8,18,34,.62);
}
/* Make the outer hero carry the visual identity instead of every child being a box. */
#startScreen.dashboard-mockup-sync .home-hero{
position:relative !important;
overflow:hidden !important;
border-color:rgba(124,236,255,.16) !important;
background:
radial-gradient(circle at 82% 10%, rgba(124,236,255,.18), transparent 34%),
radial-gradient(circle at 18% 88%, rgba(75,145,255,.14), transparent 33%),
linear-gradient(180deg, rgba(8,18,34,.96), rgba(4,9,18,.99)) !important;
}
#startScreen.dashboard-mockup-sync .home-hero::before{
content:'' !important;
position:absolute !important;
inset:-8% -8% -12% 36% !important;
background:
linear-gradient(90deg, rgba(3,8,18,.38), rgba(3,8,18,.06)),
url('../img/v93/hero/hero-dashboard.webp') center / cover no-repeat !important;
opacity:.34 !important;
mix-blend-mode:screen !important;
pointer-events:none !important;
filter:saturate(1.08) contrast(1.05) !important;
}
#startScreen.dashboard-mockup-sync .home-hero::after{
content:'' !important;
position:absolute !important;
inset:0 !important;
pointer-events:none !important;
background:
linear-gradient(90deg, rgba(2,8,18,.46), transparent 38%, rgba(2,8,18,.18)),
radial-gradient(circle at 72% 70%, rgba(124,236,255,.10), transparent 34%),
repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 42px) !important;
opacity:.82 !important;
}
/* Main hero text should feel embedded, not like a separate poster/card. */
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy.home-text-hero,
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy{
position:relative !important;
z-index:1 !important;
border-color:transparent !important;
background:
radial-gradient(circle at 18% 0%, rgba(124,236,255,.10), transparent 36%),
linear-gradient(180deg, rgba(7,16,30,.24), rgba(7,16,30,.08)) !important;
box-shadow:none !important;
backdrop-filter:none !important;
}
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy::after{
opacity:.22 !important;
}
#startScreen.dashboard-mockup-sync .home-hero .showcase-eyebrow{
border-color:rgba(124,236,255,.20) !important;
background:rgba(3,11,22,.42) !important;
}
/* Dashboard cards: fewer harsh outlines, more image-driven atmosphere. */
#startScreen.dashboard-mockup-sync .dash-v9540-main,
#startScreen.dashboard-mockup-sync .dash-v9540-side{
z-index:1 !important;
border-color:var(--rc2-line-soft) !important;
background:
linear-gradient(135deg, rgba(124,236,255,.08), transparent 30%),
linear-gradient(180deg, rgba(10,22,40,.64), rgba(5,11,22,.82)) !important;
box-shadow:
0 18px 46px rgba(0,0,0,.18),
inset 0 1px 0 rgba(255,255,255,.035) !important;
backdrop-filter:blur(2px) saturate(120%) !important;
}
#startScreen.dashboard-mockup-sync .dash-v9540-main::before,
#startScreen.dashboard-mockup-sync .dash-v9540-side::before{
content:'' !important;
position:absolute !important;
inset:0 !important;
pointer-events:none !important;
background:
radial-gradient(circle at 86% 22%, rgba(124,236,255,.18), transparent 26%),
linear-gradient(90deg, transparent, rgba(124,236,255,.05)) !important;
opacity:.82 !important;
}
#startScreen.dashboard-mockup-sync .dash-v9540-main::after{
content:'' !important;
position:absolute !important;
inset:auto -4% -16% 46% !important;
height:210px !important;
pointer-events:none !important;
background:url('../img/v93/hero/hero-dashboard.webp') center / cover no-repeat !important;
opacity:.16 !important;
mix-blend-mode:screen !important;
filter:saturate(1.12) brightness(1.06) !important;
border-radius:28px !important;
}
#startScreen.dashboard-mockup-sync .dash-v9540-main > *,
#startScreen.dashboard-mockup-sync .dash-v9540-side > *{
position:relative !important;
z-index:1 !important;
}
/* Day chips should read as integrated controls, not three boxed panels. */
#startScreen.dashboard-mockup-sync .dash-v9540-day{
border-color:rgba(124,236,255,.13) !important;
background:rgba(4,12,24,.34) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.025) !important;
}
#startScreen.dashboard-mockup-sync .dash-v9540-day.done{
background:linear-gradient(180deg,rgba(124,236,255,.22),rgba(5,15,28,.44)) !important;
box-shadow:0 0 22px rgba(124,236,255,.12), inset 0 1px 0 rgba(255,255,255,.035) !important;
}
/* Shortcuts: bring real icons back, less heavy boxes. */
#startScreen.dashboard-mockup-sync .shortcut-btn{
position:relative !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:8px !important;
border-color:rgba(124,236,255,.12) !important;
background:rgba(5,14,28,.38) !important;
box-shadow:none !important;
}
#startScreen.dashboard-mockup-sync .shortcut-btn::before{
content:'' !important;
width:18px !important;
height:18px !important;
flex:0 0 18px !important;
background:var(--shortcut-icon) center / contain no-repeat !important;
opacity:.95 !important;
filter:drop-shadow(0 0 8px rgba(124,236,255,.22)) !important;
}
#startScreen.dashboard-mockup-sync .shortcut-btn:nth-child(1){--shortcut-icon:url('../img/v93/icons/dashboard.svg');}
#startScreen.dashboard-mockup-sync .shortcut-btn:nth-child(2){--shortcut-icon:url('../img/v93/icons/profile.svg');}
#startScreen.dashboard-mockup-sync .shortcut-btn:nth-child(3){--shortcut-icon:url('../img/v93/icons/library.svg');}
#startScreen.dashboard-mockup-sync .shortcut-btn:nth-child(4){--shortcut-icon:url('../img/v93/icons/tests.svg');}
#startScreen.dashboard-mockup-sync .shortcut-btn.active{
border-color:rgba(124,236,255,.30) !important;
background:linear-gradient(180deg,rgba(59,166,255,.55),rgba(9,28,50,.54)) !important;
box-shadow:0 0 28px rgba(75,180,255,.16), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
/* App top nav should also keep the icon feeling if visible. */
.app-tab{
gap:10px !important;
}
.app-tab .tab-icon{
width:22px !important;
height:22px !important;
font-size:0 !important;
display:inline-block !important;
background:var(--tab-icon) center / contain no-repeat !important;
filter:drop-shadow(0 0 8px rgba(124,236,255,.18)) !important;
}
.app-tab[data-target="startScreen"]{--tab-icon:url('../img/v93/icons/dashboard.svg');}
.app-tab[data-target="profileScreen"]{--tab-icon:url('../img/v93/icons/profile.svg');}
.app-tab[data-target="qaScreen"]{--tab-icon:url('../img/v93/icons/library.svg');}
.app-tab[data-target="testScreen"]{--tab-icon:url('../img/v93/icons/tests.svg');}
/* Metric rail: back to icon-driven graphics, but not four hard boxes. */
#startScreen.dashboard-mockup-sync .metric-v9540{
position:relative !important;
overflow:hidden !important;
border-color:rgba(124,236,255,.105) !important;
background:
linear-gradient(135deg, rgba(124,236,255,.08), transparent 34%),
linear-gradient(180deg, rgba(10,22,40,.54), rgba(5,11,22,.74)) !important;
box-shadow:0 12px 30px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.03) !important;
}
#startScreen.dashboard-mockup-sync .metric-v9540::after{
content:'' !important;
position:absolute !important;
right:12px !important;
top:12px !important;
width:32px !important;
height:32px !important;
opacity:.14 !important;
background:var(--metric-icon) center / contain no-repeat !important;
filter:drop-shadow(0 0 12px rgba(124,236,255,.25)) !important;
pointer-events:none !important;
}
#startScreen.dashboard-mockup-sync .metric-v9540:nth-child(1){--metric-icon:url('../img/icons/pass.svg');}
#startScreen.dashboard-mockup-sync .metric-v9540:nth-child(2){--metric-icon:url('../img/icons/set.svg');}
#startScreen.dashboard-mockup-sync .metric-v9540:nth-child(3){--metric-icon:url('../img/icons/exercise.svg');}
#startScreen.dashboard-mockup-sync .metric-v9540:nth-child(4){--metric-icon:url('../img/icons/test.svg');}
#startScreen.dashboard-mockup-sync .metric-v9540-ring,
#startScreen.dashboard-mockup-sync .dash-v9540-ring{
box-shadow:
0 0 0 1px rgba(124,236,255,.11),
0 0 26px rgba(124,236,255,.12) !important;
}
/* Reduce border noise globally on dashboard only. */
#startScreen.dashboard-mockup-sync .home-hero *,
#startScreen.dashboard-mockup-sync .home-only-grid *{
outline-color:transparent !important;
}
#startScreen.dashboard-mockup-sync .dash-v9540-chips span,
#startScreen.dashboard-mockup-sync .dash-v9540-pill-row span,
#startScreen.dashboard-mockup-sync .dash-v9540-time{
border-color:rgba(124,236,255,.14) !important;
background:rgba(4,12,24,.32) !important;
}
/* Desktop/iPad: make it feel like one composition, not separate boxes. */
@media(min-width:900px){
#startScreen.dashboard-mockup-sync .home-hero .showcase-grid{
gap:18px !important;
}
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy.home-text-hero{
padding:26px !important;
}
#startScreen.dashboard-mockup-sync .dash-v9540{
gap:14px !important;
}
}
/* Smaller screens: keep icons but avoid clutter. */
@media(max-width:620px){
#startScreen.dashboard-mockup-sync .home-hero::before{
inset:34% -20% -18% 16% !important;
opacity:.20 !important;
}
#startScreen.dashboard-mockup-sync .shortcut-btn::before{
width:16px !important;
height:16px !important;
}
}
/* ==========================================================
v96 RC3 TIME BADGE FIX
Time belongs to Dagens pass, not the progress card.
Also supports corrected single-value duration text from JS.
========================================================== */
#startScreen.dashboard-mockup-sync .dash-v9540-main .dash-v9540-time.main-time{
margin-top:12px !important;
width:max-content !important;
max-width:100% !important;
grid-column:auto !important;
display:inline-flex !important;
align-items:center !important;
gap:6px !important;
padding:9px 13px !important;
border-radius:999px !important;
border:1px solid rgba(124,236,255,.16) !important;
background:rgba(4,12,24,.38) !important;
color:rgba(235,248,255,.94) !important;
font-weight:950 !important;
font-size:13px !important;
}
#startScreen.dashboard-mockup-sync .dash-v9540-side > .dash-v9540-time:not(.main-time){
display:none !important;
}
/* ==========================================================
v96 RC4 HERO BACKGROUND RESTORE
Bring back the graphic soul in the left hero panel:
- background image integrated behind text, not a separate poster
- fewer visible boxes
- stronger mockup feel
========================================================== */
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy.home-text-hero,
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy{
position:relative !important;
overflow:hidden !important;
border-color:rgba(124,236,255,.105) !important;
background:
linear-gradient(90deg, rgba(3,8,18,.86) 0%, rgba(3,8,18,.66) 44%, rgba(3,8,18,.30) 100%),
radial-gradient(circle at 22% 18%, rgba(124,236,255,.18), transparent 32%),
url('../img/v93/hero/hero-dashboard.webp') 72% center / cover no-repeat !important;
box-shadow:
0 22px 58px rgba(0,0,0,.22),
inset 0 1px 0 rgba(255,255,255,.035) !important;
}
/* The image should be visible but never fight the text. */
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy.home-text-hero::before,
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy::before{
content:'' !important;
position:absolute !important;
inset:0 !important;
background:
linear-gradient(90deg, rgba(2,8,18,.38), rgba(2,8,18,.12) 46%, rgba(2,8,18,.02)),
radial-gradient(circle at 70% 55%, rgba(124,236,255,.14), transparent 34%) !important;
opacity:.95 !important;
transform:none !important;
border:0 !important;
pointer-events:none !important;
}
/* Replace the previous grid overlay with a softer cinematic sheen. */
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy.home-text-hero::after,
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy::after{
content:'' !important;
position:absolute !important;
inset:0 !important;
background:
linear-gradient(180deg, rgba(255,255,255,.035), transparent 24%, rgba(0,0,0,.14)),
repeating-linear-gradient(90deg, rgba(124,236,255,.020) 0 1px, transparent 1px 54px) !important;
opacity:.72 !important;
pointer-events:none !important;
}
/* Text layer stays crisp above image. */
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy > *{
position:relative !important;
z-index:2 !important;
}
/* Reduce the feeling that every dashboard part is boxed. */
#startScreen.dashboard-mockup-sync .dash-v9540-main,
#startScreen.dashboard-mockup-sync .dash-v9540-side,
#startScreen.dashboard-mockup-sync .metric-v9540{
border-color:rgba(124,236,255,.085) !important;
}
#startScreen.dashboard-mockup-sync .dash-v9540-main,
#startScreen.dashboard-mockup-sync .dash-v9540-side{
background:
linear-gradient(135deg, rgba(124,236,255,.075), transparent 32%),
linear-gradient(180deg, rgba(8,19,36,.54), rgba(4,10,20,.74)) !important;
}
/* Make the outer hero do more work so inner cards can be softer. */
#startScreen.dashboard-mockup-sync .home-hero{
background:
radial-gradient(circle at 82% 10%, rgba(124,236,255,.18), transparent 34%),
radial-gradient(circle at 22% 82%, rgba(75,145,255,.13), transparent 34%),
linear-gradient(180deg, rgba(7,17,33,.97), rgba(3,8,16,.995)) !important;
}
/* On iPad landscape, keep the hero graphic larger and more visible. */
@media(min-width:900px){
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy.home-text-hero,
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy{
background:
linear-gradient(90deg, rgba(3,8,18,.88) 0%, rgba(3,8,18,.64) 42%, rgba(3,8,18,.24) 100%),
radial-gradient(circle at 22% 18%, rgba(124,236,255,.18), transparent 32%),
url('../img/v93/hero/hero-dashboard.webp') 68% center / cover no-repeat !important;
}
}
/* On phone, keep readability first. */
@media(max-width:620px){
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy.home-text-hero,
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy{
background:
linear-gradient(90deg, rgba(3,8,18,.92), rgba(3,8,18,.64)),
radial-gradient(circle at 20% 18%, rgba(124,236,255,.16), transparent 34%),
url('../img/v93/hero/hero-dashboard.webp') 74% center / cover no-repeat !important;
}
}
/* ==========================================================
v96 RC6 GLOBAL DASHBOARD BACKGROUND
Corrected interpretation:
- keep the two-column dashboard layout
- one shared graphic background under the whole dashboard hero area
- remove the left-panel box; text sits directly on the shared background
- right column/cards stay readable but with softer borders
========================================================== */
#startScreen.dashboard-mockup-sync .home-hero{
position:relative !important;
overflow:hidden !important;
padding:14px !important;
border-radius:30px !important;
border:1px solid rgba(124,236,255,.12) !important;
background:
linear-gradient(90deg, rgba(3,8,18,.92) 0%, rgba(3,8,18,.70) 38%, rgba(3,8,18,.42) 68%, rgba(3,8,18,.76) 100%),
radial-gradient(circle at 18% 16%, rgba(124,236,255,.20), transparent 34%),
radial-gradient(circle at 78% 72%, rgba(90,160,255,.14), transparent 34%),
url('../img/v93/hero/hero-dashboard.webp') center center / cover no-repeat !important;
box-shadow:
0 24px 70px rgba(0,0,0,.28),
inset 0 1px 0 rgba(255,255,255,.035) !important;
}
/* Background belongs to the whole dashboard, not to left box only. */
#startScreen.dashboard-mockup-sync .home-hero::before{
content:'' !important;
position:absolute !important;
inset:0 !important;
display:block !important;
pointer-events:none !important;
background:
linear-gradient(90deg, rgba(2,8,18,.34), transparent 42%, rgba(2,8,18,.18)),
radial-gradient(circle at 72% 56%, rgba(124,236,255,.12), transparent 32%),
repeating-linear-gradient(90deg, rgba(124,236,255,.018) 0 1px, transparent 1px 52px) !important;
opacity:.92 !important;
mix-blend-mode:normal !important;
filter:none !important;
}
#startScreen.dashboard-mockup-sync .home-hero::after{
content:'' !important;
position:absolute !important;
inset:0 !important;
display:block !important;
pointer-events:none !important;
background:
linear-gradient(180deg, rgba(255,255,255,.035), transparent 22%, rgba(0,0,0,.20)) !important;
opacity:.80 !important;
}
/* Keep two columns and let both columns sit on the same background. */
#startScreen.dashboard-mockup-sync .home-hero .showcase-grid{
position:relative !important;
z-index:1 !important;
display:grid !important;
grid-template-columns:1fr !important;
gap:14px !important;
}
/* LEFT: no visible box. Text directly over shared background. */
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy.home-text-hero,
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy{
position:relative !important;
z-index:1 !important;
display:block !important;
padding:clamp(22px,4.2vw,42px) !important;
border:0 !important;
border-color:transparent !important;
border-radius:0 !important;
background:transparent !important;
box-shadow:none !important;
backdrop-filter:none !important;
min-height:0 !important;
overflow:visible !important;
}
/* Remove old local-card graphic layers from the left panel. */
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy.home-text-hero::before,
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy.home-text-hero::after,
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy::before,
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy::after{
display:none !important;
content:none !important;
}
/* Make left text feel like premium hero typography over image. */
#startScreen.dashboard-mockup-sync .home-hero .showcase-eyebrow{
position:relative !important;
z-index:2 !important;
width:max-content !important;
border-color:rgba(124,236,255,.22) !important;
background:rgba(3,11,22,.34) !important;
backdrop-filter:blur(4px) saturate(125%) !important;
box-shadow:0 0 24px rgba(124,236,255,.10) !important;
}
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy h1{
position:relative !important;
z-index:2 !important;
margin-top:16px !important;
max-width:760px !important;
color:#fff !important;
text-shadow:0 10px 38px rgba(0,0,0,.42), 0 0 28px rgba(124,236,255,.08) !important;
}
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy h1 span{
color:#9af2ff !important;
text-shadow:0 0 30px rgba(124,236,255,.22) !important;
}
#startScreen.dashboard-mockup-sync .home-hero .showcase-intro{
position:relative !important;
z-index:2 !important;
max-width:620px !important;
color:rgba(238,248,255,.90) !important;
text-shadow:0 8px 28px rgba(0,0,0,.34) !important;
}
#startScreen.dashboard-mockup-sync .home-hero .showcase-signals{
position:relative !important;
z-index:2 !important;
}
#startScreen.dashboard-mockup-sync .home-hero .showcase-signals span{
border-color:rgba(124,236,255,.18) !important;
background:rgba(3,11,22,.34) !important;
backdrop-filter:blur(4px) saturate(125%) !important;
}
/* RIGHT: keep daily/progress structure, but less boxy and clearly on top of the same background. */
#startScreen.dashboard-mockup-sync .hero-dashboard-panel{
position:relative !important;
z-index:2 !important;
border:0 !important;
background:transparent !important;
box-shadow:none !important;
}
#startScreen.dashboard-mockup-sync .hero-dashboard-panel .panel-pad{
padding:0 !important;
}
#startScreen.dashboard-mockup-sync .dash-v9540-main,
#startScreen.dashboard-mockup-sync .dash-v9540-side{
border-color:rgba(124,236,255,.10) !important;
background:
linear-gradient(135deg, rgba(124,236,255,.075), transparent 34%),
linear-gradient(180deg, rgba(7,16,30,.50), rgba(4,10,20,.68)) !important;
box-shadow:
0 18px 48px rgba(0,0,0,.20),
inset 0 1px 0 rgba(255,255,255,.03) !important;
backdrop-filter:blur(7px) saturate(128%) !important;
}
#startScreen.dashboard-mockup-sync .dash-v9540-main::before,
#startScreen.dashboard-mockup-sync .dash-v9540-side::before{
opacity:.62 !important;
}
/* Softer second row stats too; background should still be felt under them. */
#startScreen.dashboard-mockup-sync .home-only-grid{
position:relative !important;
margin-top:14px !important;
}
#startScreen.dashboard-mockup-sync .home-quickstats{
border:0 !important;
background:transparent !important;
box-shadow:none !important;
}
#startScreen.dashboard-mockup-sync .metric-v9540{
border-color:rgba(124,236,255,.09) !important;
background:
linear-gradient(135deg, rgba(124,236,255,.065), transparent 34%),
linear-gradient(180deg, rgba(7,16,30,.46), rgba(4,10,20,.64)) !important;
backdrop-filter:blur(6px) saturate(124%) !important;
}
/* Minimize nested box feeling inside right card. */
#startScreen.dashboard-mockup-sync .dash-v9540-chips span,
#startScreen.dashboard-mockup-sync .dash-v9540-pill-row span,
#startScreen.dashboard-mockup-sync .dash-v9540-time{
border-color:rgba(124,236,255,.12) !important;
background:rgba(3,11,22,.30) !important;
}
/* Desktop/iPad: explicit two-column layout. */
@media(min-width:900px){
#startScreen.dashboard-mockup-sync .home-hero{
padding:18px !important;
}
#startScreen.dashboard-mockup-sync .home-hero .showcase-grid{
display:grid !important;
grid-template-columns:minmax(0,.86fr) minmax(430px,1fr) !important;
gap:18px !important;
align-items:stretch !important;
}
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy.home-text-hero,
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy{
min-height:440px !important;
display:flex !important;
flex-direction:column !important;
justify-content:center !important;
}
}
/* Wider screens: keep two-column premium composition. */
@media(min-width:1180px){
#startScreen.dashboard-mockup-sync .home-hero .showcase-grid{
grid-template-columns:minmax(420px,.72fr) minmax(520px,1fr) !important;
}
}
/* Phone: same background concept, stacked for readability. */
@media(max-width:620px){
#startScreen.dashboard-mockup-sync .home-hero{
padding:10px !important;
border-radius:24px !important;
background:
linear-gradient(90deg, rgba(3,8,18,.94), rgba(3,8,18,.70)),
radial-gradient(circle at 20% 16%, rgba(124,236,255,.18), transparent 34%),
url('../img/v93/hero/hero-dashboard.webp') 68% center / cover no-repeat !important;
}
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy.home-text-hero,
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy{
padding:22px 16px !important;
}
}
/* ==========================================================
v96 RC7 DASHBOARD BACKGROUND SWAP
Swaps dashboard/hero background asset from visual-anchor.webp
to assets/img/v93/hero/hero-dashboard.webp
========================================================== */
/* ==========================================================
v96 RC8 VERIFIED DASHBOARD BACKGROUND
Dashboard background is now a real ![]()
layer, not just CSS background.
========================================================== */
#startScreen.dashboard-mockup-sync .home-hero{
position:relative !important;
overflow:hidden !important;
isolation:isolate !important;
padding:18px !important;
border-radius:30px !important;
border:1px solid rgba(124,236,255,.14) !important;
background:#030a16 !important;
box-shadow:0 24px 70px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.035) !important;
}
#startScreen.dashboard-mockup-sync .home-hero > .dashboard-bg-img{
display:block !important;
position:absolute !important;
inset:0 !important;
z-index:0 !important;
width:100% !important;
height:100% !important;
object-fit:cover !important;
object-position:center right !important;
opacity:.78 !important;
filter:saturate(1.18) brightness(1.18) contrast(1.10) !important;
transform:scale(1.012) !important;
pointer-events:none !important;
user-select:none !important;
}
#startScreen.dashboard-mockup-sync .home-hero::before{
content:'' !important;
position:absolute !important;
inset:0 !important;
z-index:1 !important;
display:block !important;
pointer-events:none !important;
background:
linear-gradient(90deg,
rgba(2,8,18,.80) 0%,
rgba(2,8,18,.66) 34%,
rgba(2,8,18,.26) 66%,
rgba(2,8,18,.48) 100%),
radial-gradient(circle at 72% 58%, rgba(124,236,255,.18), transparent 34%) !important;
opacity:.94 !important;
}
#startScreen.dashboard-mockup-sync .home-hero::after{
content:'' !important;
position:absolute !important;
inset:0 !important;
z-index:2 !important;
display:block !important;
pointer-events:none !important;
background:
linear-gradient(180deg, rgba(255,255,255,.035), transparent 24%, rgba(0,0,0,.16)),
repeating-linear-gradient(90deg, rgba(124,236,255,.018) 0 1px, transparent 1px 56px) !important;
opacity:.70 !important;
}
#startScreen.dashboard-mockup-sync .home-hero .showcase-grid,
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy,
#startScreen.dashboard-mockup-sync .hero-dashboard-panel{
position:relative !important;
z-index:3 !important;
}
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy.home-text-hero,
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy{
border:0 !important;
border-color:transparent !important;
background:transparent !important;
box-shadow:none !important;
backdrop-filter:none !important;
overflow:visible !important;
}
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy.home-text-hero::before,
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy.home-text-hero::after,
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy::before,
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy::after{
display:none !important;
content:none !important;
}
#startScreen.dashboard-mockup-sync .dash-v9540-main,
#startScreen.dashboard-mockup-sync .dash-v9540-side,
#startScreen.dashboard-mockup-sync .metric-v9540{
background:
linear-gradient(135deg, rgba(124,236,255,.070), transparent 34%),
linear-gradient(180deg, rgba(5,14,28,.40), rgba(3,9,18,.55)) !important;
border-color:rgba(124,236,255,.095) !important;
backdrop-filter:blur(7px) saturate(128%) !important;
box-shadow:0 16px 44px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.030) !important;
}
@media(min-width:900px){
#startScreen.dashboard-mockup-sync .home-hero .showcase-grid{
display:grid !important;
grid-template-columns:minmax(0,.86fr) minmax(430px,1fr) !important;
gap:18px !important;
align-items:stretch !important;
}
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy.home-text-hero,
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy{
min-height:440px !important;
display:flex !important;
flex-direction:column !important;
justify-content:center !important;
padding:clamp(22px,4.2vw,42px) !important;
}
}
@media(max-width:620px){
#startScreen.dashboard-mockup-sync .home-hero{
padding:10px !important;
}
#startScreen.dashboard-mockup-sync .home-hero > .dashboard-bg-img{
opacity:.60 !important;
object-position:center center !important;
}
#startScreen.dashboard-mockup-sync .home-hero::before{
background:linear-gradient(90deg, rgba(2,8,18,.90), rgba(2,8,18,.66)) !important;
}
}
/* ==========================================================
v96 RC9 CLEAN BACKGROUND + ONBOARDING LOVE
- Use clean no-text dashboard art as global background.
- Keep two-column layout.
- Make onboarding feel like the same product, not an old form.
========================================================== */
/* Source of truth background: clean graphic without baked-in copy */
#startScreen.dashboard-mockup-sync .home-hero > .dashboard-bg-img{
content:url('../img/v93/hero/hero-dashboard.webp') !important;
opacity:.82 !important;
object-position:center right !important;
filter:saturate(1.24) brightness(1.16) contrast(1.12) !important;
}
/* Ensure old generated text-poster never appears as dashboard background. */
#startScreen.dashboard-mockup-sync .home-hero{
background:#030a16 !important;
}
#startScreen.dashboard-mockup-sync .home-hero::before{
background:
linear-gradient(90deg,
rgba(2,8,18,.82) 0%,
rgba(2,8,18,.68) 34%,
rgba(2,8,18,.28) 66%,
rgba(2,8,18,.48) 100%),
radial-gradient(circle at 74% 52%, rgba(124,236,255,.18), transparent 34%) !important;
}
/* Onboarding card in right column: more product, less form. */
#startScreen.dashboard-mockup-sync .onboarding-v9540{
height:100% !important;
}
#startScreen.dashboard-mockup-sync .onboarding-v9540 .dash-v9540-main{
min-height:440px !important;
}
#startScreen.dashboard-mockup-sync .onboarding-v9540 .dash-v9540-title{
max-width:680px !important;
font-size:clamp(36px,6vw,72px) !important;
}
#startScreen.dashboard-mockup-sync .onboarding-v9540 .dash-v9540-focus{
max-width:680px !important;
color:rgba(238,248,255,.90) !important;
}
#startScreen.dashboard-mockup-sync .onboarding-v9540 .v9540-name{
margin-top:18px !important;
padding:0 !important;
border:0 !important;
background:transparent !important;
}
#startScreen.dashboard-mockup-sync .onboarding-v9540 .onboarding-name-input{
min-height:58px !important;
border-radius:18px !important;
border:1px solid rgba(124,236,255,.18) !important;
background:rgba(3,11,22,.46) !important;
color:#fff !important;
font-weight:850 !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.035) !important;
}
#startScreen.dashboard-mockup-sync .onboarding-v9540 .v9540-programs{
margin-top:12px !important;
display:grid !important;
grid-template-columns:1fr !important;
gap:8px !important;
}
#startScreen.dashboard-mockup-sync .onboarding-v9540 .onboarding-program{
min-height:62px !important;
border-radius:18px !important;
display:grid !important;
grid-template-columns:auto 1fr !important;
gap:6px 12px !important;
align-items:center !important;
text-align:left !important;
padding:12px 14px !important;
border:1px solid rgba(124,236,255,.14) !important;
background:rgba(3,11,22,.34) !important;
color:rgba(235,248,255,.90) !important;
}
#startScreen.dashboard-mockup-sync .onboarding-v9540 .onboarding-program b{
grid-row:1 / span 2 !important;
display:grid !important;
place-items:center !important;
min-width:68px !important;
height:42px !important;
border-radius:999px !important;
background:rgba(124,236,255,.12) !important;
color:var(--cyan) !important;
font-weight:1000 !important;
letter-spacing:-.02em !important;
}
#startScreen.dashboard-mockup-sync .onboarding-v9540 .onboarding-program strong{
color:#fff !important;
font-weight:1000 !important;
font-size:17px !important;
}
#startScreen.dashboard-mockup-sync .onboarding-v9540 .onboarding-program span{
color:rgba(224,240,255,.68) !important;
line-height:1.25 !important;
}
#startScreen.dashboard-mockup-sync .onboarding-v9540 .onboarding-program.active{
border-color:rgba(124,236,255,.38) !important;
background:
radial-gradient(circle at 10% 20%, rgba(124,236,255,.20), transparent 34%),
rgba(4,16,30,.54) !important;
box-shadow:0 0 26px rgba(124,236,255,.10), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
#startScreen.dashboard-mockup-sync .onboarding-v9540 .dash-v9540-side{
align-content:center !important;
}
#startScreen.dashboard-mockup-sync .onboarding-v9540 .dash-v9540-side-title{
margin-top:2px !important;
}
#startScreen.dashboard-mockup-sync .onboarding-v9540 .dash-v9540-side-big{
font-size:clamp(30px,5vw,48px) !important;
}
#startScreen.dashboard-mockup-sync .onboarding-v9540 .dash-v9540-pill-row span{
background:rgba(3,11,22,.36) !important;
}
/* Let onboarding sit better on iPad landscape. */
@media(min-width:1180px){
#startScreen.dashboard-mockup-sync .onboarding-v9540{
grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr) !important;
}
}
/* Phone onboarding: clean but not cramped. */
@media(max-width:620px){
#startScreen.dashboard-mockup-sync .onboarding-v9540 .onboarding-program{
grid-template-columns:1fr !important;
}
#startScreen.dashboard-mockup-sync .onboarding-v9540 .onboarding-program b{
grid-row:auto !important;
min-width:0 !important;
width:max-content !important;
padding:0 14px !important;
}
}
/* ==========================================================
v96 RC9.1 ONBOARDING WIDTH FIX
The onboarding panel sits in the right dashboard column, so it must not
split into another two-column layout inside that already narrow area.
========================================================== */
#startScreen.dashboard-mockup-sync .onboarding-v9540{
grid-template-columns:1fr !important;
gap:12px !important;
}
#startScreen.dashboard-mockup-sync .onboarding-v9540 .dash-v9540-main{
min-height:0 !important;
padding:22px !important;
}
#startScreen.dashboard-mockup-sync .onboarding-v9540 .dash-v9540-title{
font-size:clamp(38px,5.4vw,58px) !important;
line-height:.90 !important;
max-width:100% !important;
overflow:visible !important;
text-wrap:balance !important;
}
#startScreen.dashboard-mockup-sync .onboarding-v9540 .dash-v9540-focus{
font-size:clamp(17px,2.2vw,22px) !important;
max-width:100% !important;
}
#startScreen.dashboard-mockup-sync .onboarding-v9540 .dash-v9540-side{
display:grid !important;
grid-template-columns:auto 1fr !important;
min-height:0 !important;
padding:16px !important;
}
#startScreen.dashboard-mockup-sync .onboarding-v9540 .dash-v9540-side .dash-v9540-ring{
--size:76px !important;
grid-row:1 / span 3 !important;
}
#startScreen.dashboard-mockup-sync .onboarding-v9540 .dash-v9540-side-big,
#startScreen.dashboard-mockup-sync .onboarding-v9540 .dash-v9540-side-sub{
grid-column:2 !important;
}
#startScreen.dashboard-mockup-sync .onboarding-v9540 .dash-v9540-pill-row{
grid-column:1 / -1 !important;
}
/* ==========================================================
v96 RC10 PASS CONTROLS LOCK
One source of truth for pass controls:
menu + progress + prev/next share the sticky top row.
Old sticky-bottom control behavior is explicitly disabled.
========================================================== */
body.exercise-active .wrap{
padding-bottom:calc(26px + var(--safe-bottom)) !important;
}
/* Top bar becomes the only pass control surface. */
body.exercise-active .sticky-nav{
position:sticky !important;
top:0 !important;
z-index:9994 !important;
padding:calc(8px + env(safe-area-inset-top,0px)) 10px 8px !important;
background:
linear-gradient(180deg, rgba(5,10,19,.98), rgba(5,10,19,.88) 72%, rgba(5,10,19,.10)) !important;
border-bottom:1px solid rgba(124,236,255,.12) !important;
backdrop-filter:blur(16px) saturate(126%) !important;
}
body.exercise-active .nav-row{
display:grid !important;
grid-template-columns:48px minmax(120px,1fr) minmax(260px,420px) !important;
gap:10px !important;
align-items:center !important;
}
body.exercise-active .nav-actions,
body.exercise-active .nav-left,
body.exercise-active .menu-wrap{
display:block !important;
min-width:0 !important;
}
/* Menu owns the first cell. */
body.exercise-active #menuToggleBtn,
body.exercise-active .menu-toggle{
display:grid !important;
place-items:center !important;
width:48px !important;
min-width:48px !important;
max-width:48px !important;
height:46px !important;
min-height:46px !important;
padding:0 !important;
margin:0 !important;
border-radius:16px !important;
font-size:0 !important;
line-height:1 !important;
border:1px solid rgba(124,236,255,.16) !important;
background:rgba(5,14,27,.76) !important;
box-shadow:0 10px 30px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.035) !important;
}
body.exercise-active #menuToggleBtn::before{
content:'☰' !important;
font-size:22px !important;
line-height:1 !important;
}
/* Progress stays in the middle and is never allowed to push buttons off screen. */
body.exercise-active .progress-meta{
min-width:0 !important;
display:grid !important;
gap:6px !important;
align-self:center !important;
}
body.exercise-active #exerciseMeta{
min-width:0 !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
font-size:clamp(11px,1.8vw,14px) !important;
letter-spacing:.08em !important;
}
/* The pass buttons now live in the top row. No bottom sticky behavior remains. */
body.exercise-active .pass-bottom-controls{
position:relative !important;
inset:auto !important;
bottom:auto !important;
left:auto !important;
right:auto !important;
top:auto !important;
z-index:1 !important;
display:grid !important;
grid-template-columns:1fr !important;
align-items:center !important;
gap:8px !important;
width:100% !important;
max-width:none !important;
padding:0 !important;
margin:0 !important;
background:transparent !important;
justify-self:stretch !important;
}
body.exercise-active .pass-bottom-controls.has-prev{
grid-template-columns:52px minmax(0,1fr) !important;
}
body.exercise-active .pass-bottom-controls.no-prev,
body.exercise-active:not(.pass-has-prev) .pass-bottom-controls{
grid-template-columns:1fr !important;
}
/* Compact back button: hidden until workout is primed and meaningful. */
body.exercise-active #prevBtn.compact-prev{
display:none !important;
place-items:center !important;
width:52px !important;
min-width:52px !important;
max-width:52px !important;
height:50px !important;
min-height:50px !important;
padding:0 !important;
margin:0 !important;
border-radius:16px !important;
font-size:28px !important;
line-height:1 !important;
font-weight:1000 !important;
}
body.exercise-active.pass-has-prev #prevBtn.compact-prev,
body.exercise-active .pass-bottom-controls.has-prev #prevBtn.compact-prev{
display:grid !important;
}
body.exercise-active #prevBtn.compact-prev::before,
body.exercise-active #prevBtn.compact-prev::after{
content:none !important;
display:none !important;
}
body.exercise-active #nextBtn{
width:100% !important;
min-width:0 !important;
max-width:none !important;
height:50px !important;
min-height:50px !important;
border-radius:17px !important;
font-size:clamp(16px,2.6vw,22px) !important;
line-height:1 !important;
font-weight:1000 !important;
padding:0 16px !important;
white-space:nowrap !important;
}
/* Exit is menu-only while in pass, reducing top-row collisions. */
body.exercise-active #exitPassBtn{
display:none !important;
}
/* Menu dropdown aligns below the top bar and stays away from buttons/fullscreen close areas. */
body.exercise-active .top-tools{
position:fixed !important;
top:calc(62px + env(safe-area-inset-top,0px)) !important;
left:10px !important;
right:10px !important;
z-index:9996 !important;
}
/* Fullscreen/pseudo fullscreen: leave safe top room and avoid browser-close collisions. */
body.exercise-active.native-fullscreen-active .sticky-nav,
body.exercise-active.pseudo-fullscreen .sticky-nav{
padding-top:max(16px, calc(12px + env(safe-area-inset-top,0px))) !important;
}
body.exercise-active.pseudo-fullscreen:not(.native-fullscreen-active) #exerciseScreen.active{
position:fixed !important;
inset:0 !important;
z-index:9990 !important;
overflow:auto !important;
background:#030713 !important;
}
/* iPad landscape priority: keep one row and never let right buttons fall out. */
@media(min-width:900px){
body.exercise-active .nav-row{
grid-template-columns:48px minmax(180px,1fr) minmax(300px,430px) !important;
}
}
/* Phone/portrait: still one top bar, but buttons compress safely. */
@media(max-width:620px){
body.exercise-active .nav-row{
grid-template-columns:46px minmax(86px,1fr) minmax(150px,44vw) !important;
gap:7px !important;
}
body.exercise-active #menuToggleBtn,
body.exercise-active .menu-toggle{
width:46px !important;
min-width:46px !important;
max-width:46px !important;
height:44px !important;
min-height:44px !important;
border-radius:15px !important;
}
body.exercise-active .pass-bottom-controls.has-prev{
grid-template-columns:44px minmax(0,1fr) !important;
}
body.exercise-active #prevBtn.compact-prev{
width:44px !important;
min-width:44px !important;
max-width:44px !important;
height:44px !important;
min-height:44px !important;
border-radius:14px !important;
font-size:24px !important;
}
body.exercise-active #nextBtn{
height:44px !important;
min-height:44px !important;
border-radius:15px !important;
padding:0 10px !important;
font-size:clamp(13px,3.4vw,16px) !important;
}
}
/* Static pass-layout test mode: replace video behavior with deterministic image test. */
body.pass-image-test .video-wrap{
background:#050a12 !important;
}
body.pass-image-test .video-wrap .pass-test-frame{
position:absolute;
inset:0;
display:block;
width:100%;
height:100%;
object-fit:cover;
}
body.pass-image-test .video-wrap::after{
content:'PASSVY TEST · filmruta ersatt med bild';
position:absolute;
left:14px;
bottom:14px;
z-index:3;
padding:8px 11px;
border-radius:999px;
background:rgba(3,11,22,.58);
border:1px solid rgba(124,236,255,.22);
color:#dff8ff;
font-weight:950;
letter-spacing:.10em;
text-transform:uppercase;
font-size:11px;
}
/* ==========================================================
v96 RC11 PASS CONTROLS POLISH
Findings from rendered static QA:
- menu should not be top-left in pass/fullscreen because it can collide with browser close UI
- next/start button text should not be black
Fix:
- progress owns the left/middle space
- menu is moved into the right-side control cluster before back/next
- CTA text is white with subtle glow
========================================================== */
body.exercise-active .nav-row{
grid-template-columns:minmax(160px,1fr) 48px minmax(260px,420px) !important;
}
/* Reorder the existing DOM visually:
1 progress/meta
2 menu
3 pass buttons */
body.exercise-active .progress-meta{
order:1 !important;
grid-column:1 !important;
}
body.exercise-active .nav-actions{
order:2 !important;
grid-column:2 !important;
justify-self:end !important;
width:48px !important;
min-width:48px !important;
}
body.exercise-active .pass-bottom-controls{
order:3 !important;
grid-column:3 !important;
}
/* Menu now belongs to the right control zone, not the fullscreen-close zone. */
body.exercise-active #menuToggleBtn,
body.exercise-active .menu-toggle{
width:48px !important;
min-width:48px !important;
max-width:48px !important;
height:50px !important;
min-height:50px !important;
border-radius:16px !important;
}
/* Keep the dropdown aligned under the moved menu/control cluster. */
body.exercise-active .top-tools{
top:calc(66px + env(safe-area-inset-top,0px)) !important;
left:auto !important;
right:10px !important;
width:min(520px, calc(100vw - 20px)) !important;
}
/* CTA text: no black text on cyan button. */
body.exercise-active #nextBtn,
body.exercise-active .pass-bottom-controls #nextBtn{
color:#f4fbff !important;
text-shadow:0 1px 0 rgba(0,0,0,.30), 0 0 18px rgba(255,255,255,.16) !important;
background:linear-gradient(180deg,#55cfff,#0f8fe8) !important;
box-shadow:
0 14px 34px rgba(59,166,255,.24),
inset 0 1px 0 rgba(255,255,255,.28) !important;
}
body.exercise-active #nextBtn:active{
transform:translateY(1px) !important;
}
/* Back button should visually match but remain secondary. */
body.exercise-active #prevBtn.compact-prev{
color:#f4fbff !important;
background:rgba(5,14,27,.76) !important;
}
/* iPad landscape: reserve a small safety gutter at far left for native fullscreen close UI. */
@media(min-width:900px){
body.exercise-active .nav-row{
grid-template-columns:minmax(190px,1fr) 50px minmax(310px,430px) !important;
padding-left:10px !important;
}
}
/* Phone/portrait: keep progress first, then menu, then compressed CTA. */
@media(max-width:620px){
body.exercise-active .nav-row{
grid-template-columns:minmax(80px,1fr) 44px minmax(150px,44vw) !important;
gap:7px !important;
}
body.exercise-active .nav-actions{
width:44px !important;
min-width:44px !important;
}
body.exercise-active #menuToggleBtn,
body.exercise-active .menu-toggle{
width:44px !important;
min-width:44px !important;
max-width:44px !important;
height:44px !important;
min-height:44px !important;
}
}
/* ==========================================================
v96 RC12 DASHBOARD BACKGROUND VISIBILITY
Finding: on phone the dashboard background image existed but was buried by
image opacity + dark overlay. Make the background visibly present on all
dashboard breakpoints while keeping text readable.
========================================================== */
/* Full dashboard section gets a very subtle background echo, so the image is
not only local to the hero-card area. */
#startScreen.dashboard-mockup-sync{
position:relative !important;
overflow:hidden !important;
}
#startScreen.dashboard-mockup-sync::before{
content:'' !important;
position:absolute !important;
inset:0 !important;
pointer-events:none !important;
z-index:0 !important;
background:
linear-gradient(180deg, rgba(3,8,18,.72), rgba(3,8,18,.90)),
url('../img/v93/hero/hero-dashboard.webp') center center / cover no-repeat !important;
opacity:.18 !important;
filter:saturate(1.18) brightness(1.16) contrast(1.08) !important;
}
#startScreen.dashboard-mockup-sync > *{
position:relative !important;
z-index:1 !important;
}
/* Hero image should be clearly visible behind the two-column dashboard. */
#startScreen.dashboard-mockup-sync .home-hero{
background:
linear-gradient(90deg, rgba(3,8,18,.76), rgba(3,8,18,.34) 66%, rgba(3,8,18,.54)),
url('../img/v93/hero/hero-dashboard.webp') center right / cover no-repeat !important;
}
#startScreen.dashboard-mockup-sync .home-hero > .dashboard-bg-img{
opacity:.94 !important;
filter:saturate(1.32) brightness(1.22) contrast(1.14) !important;
object-position:center right !important;
}
/* Overlay still exists, but no longer buries the image. */
#startScreen.dashboard-mockup-sync .home-hero::before{
background:
linear-gradient(90deg,
rgba(2,8,18,.68) 0%,
rgba(2,8,18,.55) 32%,
rgba(2,8,18,.18) 66%,
rgba(2,8,18,.34) 100%),
radial-gradient(circle at 74% 52%, rgba(124,236,255,.16), transparent 34%) !important;
opacity:.78 !important;
}
#startScreen.dashboard-mockup-sync .home-hero::after{
opacity:.48 !important;
}
/* Phone was the problematic case: make the image visible even when stacked. */
@media(max-width:620px){
#startScreen.dashboard-mockup-sync::before{
opacity:.24 !important;
background:
linear-gradient(180deg, rgba(3,8,18,.58), rgba(3,8,18,.88)),
url('../img/v93/hero/hero-dashboard.webp') 66% center / cover no-repeat !important;
}
#startScreen.dashboard-mockup-sync .home-hero{
background:
linear-gradient(90deg, rgba(3,8,18,.74), rgba(3,8,18,.42)),
url('../img/v93/hero/hero-dashboard.webp') 66% center / cover no-repeat !important;
}
#startScreen.dashboard-mockup-sync .home-hero > .dashboard-bg-img{
opacity:.86 !important;
object-position:66% center !important;
filter:saturate(1.34) brightness(1.24) contrast(1.15) !important;
}
#startScreen.dashboard-mockup-sync .home-hero::before{
background:
linear-gradient(90deg,
rgba(2,8,18,.72) 0%,
rgba(2,8,18,.55) 52%,
rgba(2,8,18,.35) 100%) !important;
opacity:.70 !important;
}
#startScreen.dashboard-mockup-sync .home-hero::after{
opacity:.34 !important;
}
}
/* ==========================================================
v96 RC14 PREVIOUS BACKGROUND MINIMAL FIX
Correction after RC13:
- keep the previous preferred dashboard image
- do NOT redesign dashboard text/buttons/layout
- only add/force a visible background layer using the existing look
========================================================== */
#startScreen.dashboard-mockup-sync{
position:relative !important;
isolation:isolate !important;
overflow:hidden !important;
}
#startScreen.dashboard-mockup-sync > .dashboard-global-bg-img{
display:block !important;
position:absolute !important;
inset:0 !important;
z-index:0 !important;
width:100% !important;
height:100% !important;
object-fit:cover !important;
object-position:center right !important;
opacity:.52 !important;
filter:saturate(1.22) brightness(1.28) contrast(1.12) !important;
pointer-events:none !important;
user-select:none !important;
}
#startScreen.dashboard-mockup-sync > *:not(.dashboard-global-bg-img){
position:relative !important;
z-index:1 !important;
}
/* Keep the same previous image in the hero as well. */
#startScreen.dashboard-mockup-sync .home-hero > .dashboard-bg-img{
content:url('../img/v93/hero/hero-dashboard.webp') !important;
display:block !important;
opacity:.76 !important;
filter:saturate(1.18) brightness(1.22) contrast(1.10) !important;
object-position:center right !important;
}
/* Only lighten the overlay enough that the old image reads on real iPad/phone.
This is intentionally smaller than RC13. */
#startScreen.dashboard-mockup-sync .home-hero::before{
opacity:.56 !important;
}
#startScreen.dashboard-mockup-sync .home-hero::after{
opacity:.30 !important;
}
@media(max-width:899px){
#startScreen.dashboard-mockup-sync > .dashboard-global-bg-img{
opacity:.64 !important;
object-position:58% center !important;
filter:saturate(1.25) brightness(1.34) contrast(1.14) !important;
}
#startScreen.dashboard-mockup-sync .home-hero > .dashboard-bg-img{
opacity:.84 !important;
object-position:58% center !important;
}
#startScreen.dashboard-mockup-sync .home-hero::before{
opacity:.48 !important;
}
#startScreen.dashboard-mockup-sync .home-hero::after{
opacity:.24 !important;
}
}
/* ==========================================================
v96 RC15 UNFRAMED DASHBOARD BACKGROUND – CORRECTED
- keep previous liked image: assets/img/v93/hero/hero-dashboard.webp
- image locked behind everything from the top of dashboard
- remove the outer shared card around left + right columns
- keep text/buttons/layout style from RC14
========================================================== */
#startScreen.dashboard-mockup-sync{
position:relative !important;
isolation:isolate !important;
overflow:hidden !important;
background:transparent !important;
}
#startScreen.dashboard-mockup-sync > .dashboard-global-bg-img{
display:block !important;
position:absolute !important;
inset:0 !important;
z-index:0 !important;
width:100% !important;
height:100% !important;
object-fit:cover !important;
object-position:center right !important;
opacity:.66 !important;
filter:saturate(1.24) brightness(1.18) contrast(1.10) !important;
pointer-events:none !important;
user-select:none !important;
}
#startScreen.dashboard-mockup-sync::before{
content:'' !important;
position:absolute !important;
inset:0 !important;
pointer-events:none !important;
z-index:0 !important;
background:
linear-gradient(180deg, rgba(2,8,18,.56) 0%, rgba(2,8,18,.26) 24%, rgba(2,8,18,.38) 100%),
linear-gradient(90deg, rgba(2,8,18,.50) 0%, rgba(2,8,18,.18) 35%, rgba(2,8,18,.36) 100%),
radial-gradient(circle at 74% 52%, rgba(124,236,255,.12), transparent 34%) !important;
opacity:.86 !important;
}
#startScreen.dashboard-mockup-sync::after{
content:'' !important;
position:absolute !important;
inset:0 !important;
pointer-events:none !important;
z-index:0 !important;
background:
repeating-linear-gradient(90deg, rgba(124,236,255,.018) 0 1px, transparent 1px 56px),
linear-gradient(180deg, rgba(255,255,255,.025), transparent 24%, rgba(0,0,0,.13)) !important;
opacity:.72 !important;
}
#startScreen.dashboard-mockup-sync > *:not(.dashboard-global-bg-img){
position:relative !important;
z-index:1 !important;
}
/* The outer hero card is removed. The two columns now live directly on the page background. */
#startScreen.dashboard-mockup-sync .home-hero{
position:relative !important;
overflow:visible !important;
padding:0 !important;
border:0 !important;
border-radius:0 !important;
background:transparent !important;
box-shadow:none !important;
}
#startScreen.dashboard-mockup-sync .home-hero::before,
#startScreen.dashboard-mockup-sync .home-hero::after{
display:none !important;
content:none !important;
}
/* The old local hero image is hidden because the background now belongs to the whole dashboard. */
#startScreen.dashboard-mockup-sync .home-hero > .dashboard-bg-img{
display:none !important;
}
/* Keep the same two-column logic, but without the wrapper card. */
#startScreen.dashboard-mockup-sync .home-hero .showcase-grid{
position:relative !important;
z-index:1 !important;
display:grid !important;
grid-template-columns:1fr !important;
gap:18px !important;
align-items:stretch !important;
}
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy.home-text-hero,
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy{
position:relative !important;
z-index:1 !important;
padding:clamp(22px,4vw,38px) !important;
border:0 !important;
border-radius:0 !important;
background:transparent !important;
box-shadow:none !important;
backdrop-filter:none !important;
}
/* Remove the shared panel feeling around the right column, but keep its inner information cards. */
#startScreen.dashboard-mockup-sync .hero-dashboard-panel,
#startScreen.dashboard-mockup-sync .hero-dashboard-panel .panel-pad,
#startScreen.dashboard-mockup-sync .home-quickstats{
border:0 !important;
background:transparent !important;
box-shadow:none !important;
}
#startScreen.dashboard-mockup-sync .hero-dashboard-panel .panel-pad{
padding:0 !important;
}
#startScreen.dashboard-mockup-sync .home-only-grid{
margin-top:18px !important;
}
/* Lighten inner cards slightly so the global image reads through, without changing typography/buttons. */
#startScreen.dashboard-mockup-sync .dash-v9540-main,
#startScreen.dashboard-mockup-sync .dash-v9540-side,
#startScreen.dashboard-mockup-sync .metric-v9540{
background:
linear-gradient(135deg, rgba(124,236,255,.075), transparent 34%),
linear-gradient(180deg, rgba(7,16,30,.42), rgba(4,10,20,.58)) !important;
border-color:rgba(124,236,255,.10) !important;
box-shadow:
0 14px 36px rgba(0,0,0,.18),
inset 0 1px 0 rgba(255,255,255,.030) !important;
backdrop-filter:blur(5px) saturate(122%) !important;
}
@media(min-width:900px){
#startScreen.dashboard-mockup-sync .home-hero .showcase-grid{
grid-template-columns:minmax(0,.90fr) minmax(420px,1fr) !important;
gap:20px !important;
}
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy.home-text-hero,
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy{
min-height:440px !important;
display:flex !important;
flex-direction:column !important;
justify-content:center !important;
}
}
@media(max-width:899px){
#startScreen.dashboard-mockup-sync > .dashboard-global-bg-img{
opacity:.72 !important;
object-position:58% center !important;
filter:saturate(1.26) brightness(1.24) contrast(1.12) !important;
}
#startScreen.dashboard-mockup-sync::before{
background:
linear-gradient(180deg, rgba(2,8,18,.50) 0%, rgba(2,8,18,.30) 30%, rgba(2,8,18,.56) 100%),
linear-gradient(90deg, rgba(2,8,18,.48) 0%, rgba(2,8,18,.14) 56%, rgba(2,8,18,.38) 100%) !important;
opacity:.82 !important;
}
}
@media(max-width:620px){
#startScreen.dashboard-mockup-sync > .dashboard-global-bg-img{
opacity:.74 !important;
object-position:54% center !important;
}
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy.home-text-hero,
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy{
padding:20px 14px 14px !important;
}
}
/* ==========================================================
v96 RC16 FULLSCREEN LOCKED DASHBOARD BACKGROUND
Corrects RC15: background must not live in a dashboard cell.
It is now a viewport-level fixed layer from top of screen.
========================================================== */
/* Create a stable stacking context for the app. */
html,
body{
min-height:100% !important;
}
body{
position:relative !important;
background:#030713 !important;
}
/* Viewport-level background source of truth. It is outside #startScreen. */
body > .dashboard-viewport-bg-img{
display:none;
}
/* Only show on dashboard/start, not exercise. Uses :has where supported by Safari/iPad. */
body:has(#startScreen.active):not(.exercise-active) > .dashboard-viewport-bg-img{
display:block !important;
position:fixed !important;
inset:0 !important;
z-index:0 !important;
width:100vw !important;
height:100dvh !important;
min-height:100vh !important;
object-fit:cover !important;
object-position:center right !important;
opacity:.72 !important;
filter:saturate(1.24) brightness(1.18) contrast(1.10) !important;
pointer-events:none !important;
user-select:none !important;
}
/* Dashboard overlay also spans the viewport, not a grid cell. */
body:has(#startScreen.active):not(.exercise-active)::before{
content:'' !important;
position:fixed !important;
inset:0 !important;
z-index:0 !important;
pointer-events:none !important;
background:
linear-gradient(180deg, rgba(2,8,18,.58) 0%, rgba(2,8,18,.24) 28%, rgba(2,8,18,.42) 100%),
linear-gradient(90deg, rgba(2,8,18,.54) 0%, rgba(2,8,18,.18) 35%, rgba(2,8,18,.36) 100%),
radial-gradient(circle at 72% 54%, rgba(124,236,255,.14), transparent 34%) !important;
}
body:has(#startScreen.active):not(.exercise-active)::after{
content:'' !important;
position:fixed !important;
inset:0 !important;
z-index:0 !important;
pointer-events:none !important;
background:
repeating-linear-gradient(90deg, rgba(124,236,255,.018) 0 1px, transparent 1px 56px),
linear-gradient(180deg, rgba(255,255,255,.025), transparent 24%, rgba(0,0,0,.16)) !important;
opacity:.70 !important;
}
/* Make the app content sit above the viewport bg. */
body:has(#startScreen.active):not(.exercise-active) .wrap{
position:relative !important;
z-index:1 !important;
background:transparent !important;
}
/* The start screen itself should not own the image anymore. */
#startScreen.dashboard-mockup-sync{
background:transparent !important;
isolation:auto !important;
overflow:visible !important;
}
#startScreen.dashboard-mockup-sync > .dashboard-global-bg-img,
#startScreen.dashboard-mockup-sync > .dashboard-bg-img,
#startScreen.dashboard-mockup-sync .home-hero > .dashboard-bg-img{
display:none !important;
}
/* Kill startScreen-local overlays from RC14/RC15 so they don't look like a cell. */
#startScreen.dashboard-mockup-sync::before,
#startScreen.dashboard-mockup-sync::after{
display:none !important;
content:none !important;
}
/* Keep outer card removed. */
#startScreen.dashboard-mockup-sync .home-hero{
position:relative !important;
overflow:visible !important;
padding:0 !important;
border:0 !important;
border-radius:0 !important;
background:transparent !important;
box-shadow:none !important;
}
#startScreen.dashboard-mockup-sync .home-hero::before,
#startScreen.dashboard-mockup-sync .home-hero::after{
display:none !important;
content:none !important;
}
#startScreen.dashboard-mockup-sync .hero-dashboard-panel,
#startScreen.dashboard-mockup-sync .hero-dashboard-panel .panel-pad,
#startScreen.dashboard-mockup-sync .home-quickstats{
border:0 !important;
background:transparent !important;
box-shadow:none !important;
}
#startScreen.dashboard-mockup-sync .hero-dashboard-panel .panel-pad{
padding:0 !important;
}
/* Keep cards readable but not boxy. */
#startScreen.dashboard-mockup-sync .dash-v9540-main,
#startScreen.dashboard-mockup-sync .dash-v9540-side,
#startScreen.dashboard-mockup-sync .metric-v9540{
background:
linear-gradient(135deg, rgba(124,236,255,.075), transparent 34%),
linear-gradient(180deg, rgba(7,16,30,.42), rgba(4,10,20,.58)) !important;
border-color:rgba(124,236,255,.10) !important;
box-shadow:
0 14px 36px rgba(0,0,0,.18),
inset 0 1px 0 rgba(255,255,255,.030) !important;
backdrop-filter:blur(5px) saturate(122%) !important;
}
/* iPad/phone: stronger background presence under real-world glare. */
@media(max-width:899px){
body:has(#startScreen.active):not(.exercise-active) > .dashboard-viewport-bg-img{
opacity:.76 !important;
object-position:58% center !important;
filter:saturate(1.26) brightness(1.24) contrast(1.12) !important;
}
body:has(#startScreen.active):not(.exercise-active)::before{
background:
linear-gradient(180deg, rgba(2,8,18,.50) 0%, rgba(2,8,18,.30) 30%, rgba(2,8,18,.58) 100%),
linear-gradient(90deg, rgba(2,8,18,.48) 0%, rgba(2,8,18,.14) 56%, rgba(2,8,18,.38) 100%) !important;
}
}
@media(max-width:620px){
body:has(#startScreen.active):not(.exercise-active) > .dashboard-viewport-bg-img{
opacity:.78 !important;
object-position:54% center !important;
}
}
/* Fallback class for render/test contexts without :has. */
body.dashboard-bg-force > .dashboard-viewport-bg-img{
display:block !important;
position:fixed !important;
inset:0 !important;
z-index:0 !important;
width:100vw !important;
height:100dvh !important;
min-height:100vh !important;
object-fit:cover !important;
object-position:center right !important;
opacity:.72 !important;
filter:saturate(1.24) brightness(1.18) contrast(1.10) !important;
pointer-events:none !important;
user-select:none !important;
}
body.dashboard-bg-force .wrap{
position:relative !important;
z-index:1 !important;
background:transparent !important;
}
/* ==========================================================
v96 RC17 MOBILE DASHBOARD ACTION DOCK
Feedback: phone view felt stacked when Starta pass + Översikt lived in
separate rows. Keep them in one shared action cell, side-by-side.
========================================================== */
@media screen and (max-width: 620px){
#startScreen.dashboard-mockup-sync .dash-v9540-actions{
display:grid !important;
grid-template-columns:minmax(0,1.42fr) minmax(98px,.58fr) !important;
gap:8px !important;
align-items:stretch !important;
margin-top:16px !important;
padding:8px !important;
border:1px solid rgba(124,236,255,.13) !important;
border-radius:22px !important;
background:
linear-gradient(135deg, rgba(124,236,255,.070), transparent 42%),
linear-gradient(180deg, rgba(3,13,27,.50), rgba(2,8,18,.66)) !important;
box-shadow:
0 14px 32px rgba(0,0,0,.20),
inset 0 1px 0 rgba(255,255,255,.035) !important;
}
#startScreen.dashboard-mockup-sync .dash-v9540-actions .next-pass-btn,
#startScreen.dashboard-mockup-sync .dash-v9540-actions .overview-pass-btn{
width:100% !important;
min-width:0 !important;
max-width:none !important;
height:56px !important;
min-height:56px !important;
margin:0 !important;
padding:0 10px !important;
border-radius:16px !important;
white-space:nowrap !important;
line-height:1 !important;
}
#startScreen.dashboard-mockup-sync .dash-v9540-actions .next-pass-btn{
font-size:clamp(18px,5.2vw,21px) !important;
letter-spacing:-.035em !important;
}
#startScreen.dashboard-mockup-sync .dash-v9540-actions .overview-pass-btn{
font-size:clamp(16px,4.4vw,18px) !important;
letter-spacing:-.025em !important;
background:rgba(3,12,24,.56) !important;
}
#startScreen.dashboard-mockup-sync .dash-v9540-actions .next-pass-btn:only-child{
grid-column:1 / -1 !important;
}
}
@media screen and (max-width: 360px){
#startScreen.dashboard-mockup-sync .dash-v9540-actions{
grid-template-columns:minmax(0,1.34fr) minmax(86px,.66fr) !important;
gap:7px !important;
padding:7px !important;
}
#startScreen.dashboard-mockup-sync .dash-v9540-actions .next-pass-btn,
#startScreen.dashboard-mockup-sync .dash-v9540-actions .overview-pass-btn{
height:54px !important;
min-height:54px !important;
padding:0 8px !important;
}
#startScreen.dashboard-mockup-sync .dash-v9540-actions .next-pass-btn{
font-size:17px !important;
}
#startScreen.dashboard-mockup-sync .dash-v9540-actions .overview-pass-btn{
font-size:15px !important;
}
}
/* ==========================================================
v96 RC18 — dashboard mockup implementation
- Hero accent locked to approved cyan second line
- Dagens pass as dedicated card
- Framgångsmätare rebuilt as integrated module
- iPad/desktop: KPI meters to the side of phase progress
- Snabbåtkomst and bottom nav intentionally not introduced in RC18
========================================================== */
#startScreen.dashboard-mockup-sync{
position:relative !important;
isolation:isolate !important;
}
#startScreen.dashboard-mockup-sync .dashboard-global-bg-img,
#startScreen.dashboard-mockup-sync .dashboard-bg-img{
display:none !important;
}
body:not(.exercise-active) .dashboard-shortcuts-panel,
#startScreen.dashboard-mockup-sync .dashboard-shortcuts-panel{
display:none !important;
}
#startScreen.dashboard-mockup-sync .home-hero,
#startScreen.dashboard-mockup-sync .hero.home-hero{
position:relative !important;
padding:clamp(24px,5vw,44px) clamp(18px,4.5vw,48px) 18px !important;
margin:0 !important;
border:0 !important;
border-radius:0 !important;
background:transparent !important;
box-shadow:none !important;
overflow:visible !important;
}
#startScreen.dashboard-mockup-sync .home-hero .showcase-grid{
display:grid !important;
grid-template-columns:1fr !important;
gap:18px !important;
align-items:stretch !important;
position:relative !important;
}
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy.home-text-hero,
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy{
display:block !important;
min-height:0 !important;
padding:0 !important;
border:0 !important;
border-radius:0 !important;
background:transparent !important;
box-shadow:none !important;
overflow:visible !important;
}
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy::before,
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy::after{
display:none !important;
}
#startScreen.dashboard-mockup-sync .home-hero .showcase-eyebrow{
display:inline-flex !important;
align-items:center !important;
min-height:36px !important;
padding:8px 16px !important;
border-radius:999px !important;
border:1px solid rgba(124,236,255,.26) !important;
background:rgba(5,15,30,.42) !important;
color:#9af4ff !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 0 30px rgba(43,175,255,.10) !important;
font-size:clamp(12px,2.7vw,16px) !important;
line-height:1 !important;
font-weight:1000 !important;
letter-spacing:.22em !important;
text-transform:uppercase !important;
}
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy h1{
margin:18px 0 0 !important;
max-width:min(860px, 100%) !important;
color:#fff !important;
font-size:clamp(54px,13vw,106px) !important;
line-height:.88 !important;
letter-spacing:-.086em !important;
font-weight:1000 !important;
text-wrap:balance !important;
text-shadow:0 18px 46px rgba(0,0,0,.34) !important;
}
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy h1 span{
color:#9cf3ff !important;
background:linear-gradient(180deg,#c3fbff 0%,#89ecff 54%,#68d8ff 100%) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
-webkit-text-fill-color:transparent !important;
text-shadow:none !important;
}
#startScreen.dashboard-mockup-sync .home-hero .showcase-intro{
margin:18px 0 0 !important;
max-width:760px !important;
color:rgba(235,246,255,.93) !important;
font-size:clamp(21px,5vw,34px) !important;
line-height:1.16 !important;
font-weight:760 !important;
letter-spacing:-.025em !important;
}
#startScreen.dashboard-mockup-sync .home-hero .showcase-signals{
display:flex !important;
flex-wrap:wrap !important;
gap:10px !important;
margin-top:22px !important;
}
#startScreen.dashboard-mockup-sync .showcase-signals .signal-chip,
#startScreen.dashboard-mockup-sync .showcase-signals span{
display:inline-flex !important;
align-items:center !important;
gap:9px !important;
min-height:42px !important;
padding:10px 14px !important;
border-radius:999px !important;
border:1px solid rgba(124,236,255,.30) !important;
background:rgba(3,13,27,.55) !important;
color:rgba(239,249,255,.96) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 0 26px rgba(64,190,255,.08) !important;
font-size:clamp(14px,3.1vw,17px) !important;
font-weight:900 !important;
letter-spacing:-.018em !important;
}
#startScreen.dashboard-mockup-sync .signal-icon{
width:20px !important;
height:20px !important;
color:#76ecff !important;
flex:0 0 auto !important;
}
#startScreen.dashboard-mockup-sync .signal-icon svg,
#startScreen.dashboard-mockup-sync .rc18-pass-icon svg,
#startScreen.dashboard-mockup-sync .rc18-primary-btn svg,
#startScreen.dashboard-mockup-sync .rc18-secondary-btn svg,
#startScreen.dashboard-mockup-sync .rc18-time-chip svg,
#startScreen.dashboard-mockup-sync .rc18-arrow-icon svg{
width:100% !important;
height:100% !important;
display:block !important;
fill:none !important;
stroke:currentColor !important;
stroke-width:2.2 !important;
stroke-linecap:round !important;
stroke-linejoin:round !important;
}
#startScreen.dashboard-mockup-sync .showcase-dashboard.hero-dashboard-panel,
#startScreen.dashboard-mockup-sync .showcase-dashboard{
border:0 !important;
border-radius:0 !important;
background:transparent !important;
box-shadow:none !important;
overflow:visible !important;
}
#startScreen.dashboard-mockup-sync .showcase-dashboard > .panel-pad{
padding:0 !important;
}
#startScreen.dashboard-mockup-sync .rc18-today-card{
position:relative !important;
display:grid !important;
grid-template-columns:auto minmax(0,1fr) !important;
gap:18px !important;
align-items:start !important;
padding:clamp(22px,4.7vw,34px) !important;
border-radius:clamp(28px,6vw,42px) !important;
border:1px solid rgba(124,236,255,.22) !important;
background:
radial-gradient(circle at 80% 22%, rgba(124,236,255,.14), transparent 36%),
radial-gradient(circle at 58% 120%, rgba(40,150,255,.13), transparent 48%),
linear-gradient(180deg, rgba(6,24,45,.82), rgba(4,13,25,.90)) !important;
box-shadow:0 26px 70px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.045) !important;
backdrop-filter:blur(14px) saturate(130%) !important;
overflow:hidden !important;
}
#startScreen.dashboard-mockup-sync .rc18-today-card::after{
content:'' !important;
position:absolute !important;
inset:auto -10% -42% 8% !important;
height:190px !important;
border-radius:999px !important;
background:radial-gradient(circle, rgba(124,236,255,.12), rgba(34,130,255,.06) 38%, transparent 68%) !important;
opacity:.7 !important;
pointer-events:none !important;
}
#startScreen.dashboard-mockup-sync .rc18-pass-icon{
width:70px !important;
height:70px !important;
display:grid !important;
place-items:center !important;
border-radius:999px !important;
border:1px solid rgba(124,236,255,.26) !important;
background:linear-gradient(180deg, rgba(25,82,132,.58), rgba(4,18,34,.72)) !important;
color:#79ecff !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 18px 42px rgba(0,0,0,.22) !important;
}
#startScreen.dashboard-mockup-sync .rc18-pass-icon svg{width:38px !important;height:38px !important;stroke-width:2.7 !important;}
#startScreen.dashboard-mockup-sync .rc18-today-copy{
position:relative !important;
z-index:1 !important;
min-width:0 !important;
}
#startScreen.dashboard-mockup-sync .rc18-kicker{
color:#86f1ff !important;
text-transform:uppercase !important;
letter-spacing:.22em !important;
font-size:clamp(12px,2.8vw,15px) !important;
line-height:1.1 !important;
font-weight:1000 !important;
}
#startScreen.dashboard-mockup-sync .rc18-today-copy h2{
margin:8px 0 4px !important;
color:#fff !important;
font-size:clamp(34px,8.8vw,56px) !important;
line-height:.94 !important;
letter-spacing:-.065em !important;
font-weight:1000 !important;
}
#startScreen.dashboard-mockup-sync .rc18-today-meta{
color:rgba(221,235,250,.78) !important;
font-size:clamp(18px,4.3vw,25px) !important;
line-height:1.15 !important;
font-weight:820 !important;
letter-spacing:-.03em !important;
}
#startScreen.dashboard-mockup-sync .rc18-today-copy p{
margin:22px 0 0 !important;
max-width:62ch !important;
color:rgba(224,236,250,.80) !important;
font-size:clamp(18px,4.1vw,24px) !important;
line-height:1.30 !important;
font-weight:760 !important;
letter-spacing:-.02em !important;
}
#startScreen.dashboard-mockup-sync .rc18-time-chip{
position:absolute !important;
top:clamp(20px,4.2vw,30px) !important;
right:clamp(20px,4.2vw,30px) !important;
z-index:2 !important;
display:inline-flex !important;
align-items:center !important;
gap:8px !important;
min-height:40px !important;
padding:9px 14px !important;
border-radius:999px !important;
border:1px solid rgba(124,236,255,.24) !important;
background:rgba(3,13,27,.52) !important;
color:rgba(237,248,255,.96) !important;
font-size:clamp(14px,3.4vw,17px) !important;
font-weight:900 !important;
}
#startScreen.dashboard-mockup-sync .rc18-time-chip svg{width:18px !important;height:18px !important;color:#79ecff !important;}
#startScreen.dashboard-mockup-sync .rc18-today-actions{
display:grid !important;
grid-template-columns:minmax(0,1fr) minmax(0,.92fr) !important;
gap:12px !important;
margin-top:26px !important;
position:relative !important;
z-index:1 !important;
}
#startScreen.dashboard-mockup-sync .rc18-primary-btn,
#startScreen.dashboard-mockup-sync .rc18-secondary-btn{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:10px !important;
min-height:60px !important;
padding:0 18px !important;
border-radius:18px !important;
font-weight:1000 !important;
font-size:clamp(17px,4.4vw,22px) !important;
letter-spacing:-.03em !important;
text-decoration:none !important;
}
#startScreen.dashboard-mockup-sync .rc18-primary-btn{
border:0 !important;
color:#071523 !important;
background:linear-gradient(180deg,#6ecbff 0%,#18aefe 56%,#1187ef 100%) !important;
box-shadow:0 20px 44px rgba(36,166,255,.28), inset 0 1px 0 rgba(255,255,255,.38) !important;
}
#startScreen.dashboard-mockup-sync .rc18-secondary-btn{
border:1px solid rgba(168,208,255,.24) !important;
color:rgba(244,249,255,.96) !important;
background:rgba(3,11,23,.48) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.035) !important;
}
#startScreen.dashboard-mockup-sync .rc18-primary-btn svg,
#startScreen.dashboard-mockup-sync .rc18-secondary-btn svg{width:22px !important;height:22px !important;}
#startScreen.dashboard-mockup-sync .rc18-primary-btn svg{fill:currentColor !important;stroke:none !important;}
#startScreen.dashboard-mockup-sync .home-only-grid,
#startScreen.dashboard-mockup-sync .start-grid.home-only-grid{
display:block !important;
margin:0 !important;
padding:0 clamp(18px,4.5vw,48px) clamp(32px,6vw,60px) !important;
}
#startScreen.dashboard-mockup-sync .quickstats-panel.home-quickstats,
#startScreen.dashboard-mockup-sync .quickstats-panel{
border:0 !important;
background:transparent !important;
box-shadow:none !important;
overflow:visible !important;
margin:0 !important;
}
#startScreen.dashboard-mockup-sync .quickstats-panel > .panel-pad{
padding:0 !important;
}
#startScreen.dashboard-mockup-sync .progress-section-title,
#startScreen.dashboard-mockup-sync .quickstats-panel .section-title{
margin:18px 0 14px !important;
color:#86f1ff !important;
font-size:clamp(15px,3.8vw,20px) !important;
letter-spacing:.28em !important;
font-weight:1000 !important;
}
#startScreen.dashboard-mockup-sync .quick-stats-grid,
#startScreen.dashboard-mockup-sync .rc18-progress-grid{
display:block !important;
gap:0 !important;
}
#startScreen.dashboard-mockup-sync .rc18-progress-card{
--edge:rgba(92,185,255,.68);
position:relative !important;
display:grid !important;
grid-template-columns:1fr !important;
gap:0 !important;
padding:clamp(22px,4.7vw,34px) !important;
border-radius:clamp(30px,6.4vw,44px) !important;
border:1px solid rgba(100,197,255,.42) !important;
background:
radial-gradient(circle at 72% 16%, rgba(124,236,255,.11), transparent 36%),
radial-gradient(circle at 18% 104%, rgba(28,119,255,.13), transparent 42%),
linear-gradient(180deg, rgba(5,20,38,.78), rgba(3,10,20,.92)) !important;
box-shadow:0 0 0 1px rgba(46,168,255,.07), 0 28px 72px rgba(0,0,0,.33), inset 0 1px 0 rgba(255,255,255,.045), 0 0 46px rgba(28,137,255,.16) !important;
backdrop-filter:blur(14px) saturate(130%) !important;
overflow:hidden !important;
}
#startScreen.dashboard-mockup-sync .rc18-progress-card::after{
content:'' !important;
position:absolute !important;
inset:auto -8% -1px -8% !important;
height:130px !important;
opacity:.54 !important;
background:
radial-gradient(ellipse at 50% 100%, rgba(24,144,255,.18), transparent 60%),
repeating-radial-gradient(ellipse at 22% 116%, rgba(80,202,255,.32) 0 1px, transparent 1px 15px) !important;
transform:skewY(-3deg) !important;
pointer-events:none !important;
}
#startScreen.dashboard-mockup-sync .rc18-progress-main{
position:relative !important;
z-index:1 !important;
display:grid !important;
grid-template-columns:auto minmax(0,1fr) !important;
gap:clamp(20px,5vw,42px) !important;
align-items:center !important;
padding:0 0 clamp(22px,4.7vw,34px) !important;
}
#startScreen.dashboard-mockup-sync .rc18-progress-copy h2{
margin:10px 0 4px !important;
color:#fff !important;
font-size:clamp(40px,9.4vw,72px) !important;
line-height:.94 !important;
letter-spacing:-.065em !important;
font-weight:1000 !important;
}
#startScreen.dashboard-mockup-sync .rc18-progress-copy p{
margin:0 !important;
color:rgba(222,237,250,.82) !important;
font-size:clamp(17px,4.2vw,26px) !important;
line-height:1.22 !important;
font-weight:760 !important;
letter-spacing:-.02em !important;
}
#startScreen.dashboard-mockup-sync .rc18-day-row{
display:flex !important;
gap:10px !important;
flex-wrap:wrap !important;
margin-top:18px !important;
}
#startScreen.dashboard-mockup-sync .rc18-day-pill{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
min-width:68px !important;
min-height:38px !important;
padding:8px 16px !important;
border-radius:999px !important;
border:1px solid rgba(124,236,255,.25) !important;
background:rgba(3,13,27,.50) !important;
color:rgba(248,252,255,.97) !important;
font-weight:1000 !important;
font-size:16px !important;
}
#startScreen.dashboard-mockup-sync .rc18-kpi-grid{
position:relative !important;
z-index:1 !important;
display:grid !important;
grid-template-columns:1fr 1fr !important;
border-top:1px solid rgba(124,236,255,.16) !important;
}
#startScreen.dashboard-mockup-sync .rc18-kpi-grid::before{
content:'' !important;
position:absolute !important;
top:0 !important;
bottom:0 !important;
left:50% !important;
width:1px !important;
background:linear-gradient(180deg, transparent, rgba(124,236,255,.18) 14%, rgba(124,236,255,.10) 82%, transparent) !important;
}
#startScreen.dashboard-mockup-sync .rc18-kpi-grid::after{
content:'' !important;
position:absolute !important;
left:0 !important;
right:0 !important;
top:50% !important;
height:1px !important;
background:linear-gradient(90deg, transparent, rgba(124,236,255,.16) 16%, rgba(124,236,255,.10) 84%, transparent) !important;
}
#startScreen.dashboard-mockup-sync .rc18-kpi-cell{
position:relative !important;
z-index:1 !important;
min-height:clamp(118px,24vw,170px) !important;
display:grid !important;
grid-template-columns:auto minmax(0,1fr) !important;
align-items:center !important;
gap:clamp(12px,3.2vw,22px) !important;
padding:clamp(18px,4vw,30px) clamp(12px,3.4vw,28px) !important;
border:0 !important;
background:transparent !important;
color:inherit !important;
text-align:left !important;
border-radius:0 !important;
box-shadow:none !important;
}
#startScreen.dashboard-mockup-sync .rc18-kpi-label{
margin:0 0 8px !important;
color:#75efff !important;
text-transform:uppercase !important;
letter-spacing:.22em !important;
font-size:clamp(12px,2.8vw,15px) !important;
line-height:1 !important;
font-weight:1000 !important;
}
#startScreen.dashboard-mockup-sync .rc18-kpi-value{
color:#fff !important;
font-size:clamp(34px,7.2vw,52px) !important;
line-height:.94 !important;
letter-spacing:-.055em !important;
font-weight:1000 !important;
white-space:nowrap !important;
}
#startScreen.dashboard-mockup-sync .rc18-ring{
--size:88px;
--thick:11px;
width:var(--size) !important;
height:var(--size) !important;
display:grid !important;
place-items:center !important;
flex:0 0 auto !important;
position:relative !important;
border-radius:999px !important;
color:#fff !important;
background:
conic-gradient(from -2deg, #78ecff calc(var(--p) * 1%), rgba(8,36,70,.88) 0) !important;
box-shadow:0 16px 38px rgba(0,0,0,.28), 0 0 26px rgba(62,201,255,.16), inset 0 0 0 1px rgba(124,236,255,.18) !important;
}
#startScreen.dashboard-mockup-sync .rc18-ring::before{
content:'' !important;
position:absolute !important;
inset:var(--thick) !important;
border-radius:inherit !important;
background:radial-gradient(circle at 50% 42%, rgba(3,11,22,.98), rgba(2,8,18,.98)) !important;
box-shadow:inset 0 0 0 1px rgba(124,236,255,.06) !important;
}
#startScreen.dashboard-mockup-sync .rc18-ring::after{
content:'' !important;
position:absolute !important;
inset:1px !important;
border-radius:inherit !important;
background:radial-gradient(circle at 68% 22%, rgba(255,255,255,.20), transparent 8%, transparent 100%) !important;
opacity:.46 !important;
pointer-events:none !important;
}
#startScreen.dashboard-mockup-sync .rc18-ring span{
position:relative !important;
z-index:1 !important;
color:#fff !important;
font-size:calc(var(--size) * .28) !important;
font-weight:1000 !important;
letter-spacing:-.05em !important;
text-shadow:0 10px 26px rgba(0,0,0,.34) !important;
}
#startScreen.dashboard-mockup-sync .rc18-ring-xl{--size:clamp(150px,34vw,236px);--thick:clamp(14px,3.2vw,24px);}
#startScreen.dashboard-mockup-sync .rc18-ring-sm{--size:clamp(72px,16vw,98px);--thick:9px;}
#startScreen.dashboard-mockup-sync .rc18-arrow-icon{
width:clamp(72px,16vw,98px) !important;
height:clamp(72px,16vw,98px) !important;
display:grid !important;
place-items:center !important;
border-radius:999px !important;
border:1px solid rgba(124,236,255,.22) !important;
background:radial-gradient(circle at 50% 34%, rgba(124,236,255,.13), rgba(3,12,24,.82) 62%) !important;
color:#76ecff !important;
box-shadow:0 16px 38px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
#startScreen.dashboard-mockup-sync .rc18-arrow-icon svg{width:44% !important;height:44% !important;stroke-width:2.5 !important;}
@media(max-width:520px){
#startScreen.dashboard-mockup-sync .home-hero,
#startScreen.dashboard-mockup-sync .start-grid.home-only-grid{
padding-left:clamp(18px,5.6vw,26px) !important;
padding-right:clamp(18px,5.6vw,26px) !important;
}
#startScreen.dashboard-mockup-sync .rc18-today-card{
grid-template-columns:1fr !important;
padding-top:74px !important;
}
#startScreen.dashboard-mockup-sync .rc18-pass-icon{
position:absolute !important;
top:22px !important;
left:22px !important;
width:58px !important;
height:58px !important;
}
#startScreen.dashboard-mockup-sync .rc18-pass-icon svg{width:32px !important;height:32px !important;}
#startScreen.dashboard-mockup-sync .rc18-time-chip{
top:24px !important;
right:22px !important;
}
#startScreen.dashboard-mockup-sync .rc18-today-actions{
grid-template-columns:1.08fr .92fr !important;
gap:10px !important;
}
#startScreen.dashboard-mockup-sync .rc18-primary-btn,
#startScreen.dashboard-mockup-sync .rc18-secondary-btn{
min-height:58px !important;
padding:0 12px !important;
}
#startScreen.dashboard-mockup-sync .rc18-progress-main{
grid-template-columns:1fr !important;
justify-items:start !important;
}
#startScreen.dashboard-mockup-sync .rc18-progress-ring-wrap{
justify-self:start !important;
}
#startScreen.dashboard-mockup-sync .rc18-kpi-cell{
grid-template-columns:1fr !important;
justify-items:start !important;
align-content:center !important;
}
#startScreen.dashboard-mockup-sync .rc18-kpi-value{
font-size:clamp(30px,8vw,42px) !important;
}
}
@media(min-width:820px){
#startScreen.dashboard-mockup-sync .home-hero .showcase-grid{
grid-template-columns:minmax(0,.94fr) minmax(420px,1.06fr) !important;
gap:20px !important;
}
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy.home-text-hero,
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy{
min-height:310px !important;
display:flex !important;
flex-direction:column !important;
justify-content:center !important;
padding:28px !important;
border:1px solid rgba(124,236,255,.16) !important;
border-radius:30px !important;
background:linear-gradient(180deg, rgba(3,13,27,.42), rgba(3,10,20,.52)) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.035) !important;
}
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy h1{
font-size:clamp(56px,4.5vw,78px) !important;
}
#startScreen.dashboard-mockup-sync .home-hero .showcase-intro{
font-size:clamp(20px,1.75vw,28px) !important;
}
#startScreen.dashboard-mockup-sync .showcase-signals .signal-chip,
#startScreen.dashboard-mockup-sync .showcase-signals span{
font-size:15px !important;
min-height:38px !important;
padding:8px 12px !important;
}
#startScreen.dashboard-mockup-sync .rc18-today-card{
min-height:310px !important;
padding:30px !important;
align-content:center !important;
}
#startScreen.dashboard-mockup-sync .rc18-today-copy h2{
font-size:clamp(34px,3vw,48px) !important;
}
#startScreen.dashboard-mockup-sync .rc18-today-meta{
font-size:18px !important;
}
#startScreen.dashboard-mockup-sync .rc18-today-copy p{
margin-top:18px !important;
font-size:18px !important;
}
#startScreen.dashboard-mockup-sync .rc18-today-actions{
grid-template-columns:1fr .94fr !important;
}
#startScreen.dashboard-mockup-sync .rc18-progress-card{
grid-template-columns:minmax(0,1.18fr) minmax(360px,.82fr) !important;
align-items:center !important;
min-height:360px !important;
padding:clamp(30px,3.5vw,48px) !important;
}
#startScreen.dashboard-mockup-sync .rc18-progress-card::before{
content:'' !important;
position:absolute !important;
top:12% !important;
bottom:12% !important;
left:58.5% !important;
width:1px !important;
background:linear-gradient(180deg, transparent, rgba(124,236,255,.20) 16%, rgba(124,236,255,.08) 84%, transparent) !important;
pointer-events:none !important;
}
#startScreen.dashboard-mockup-sync .rc18-progress-main{
padding:0 !important;
padding-right:clamp(28px,3.5vw,54px) !important;
grid-template-columns:auto minmax(0,1fr) !important;
}
#startScreen.dashboard-mockup-sync .rc18-kpi-grid{
border-top:0 !important;
padding-left:clamp(24px,3.1vw,44px) !important;
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:clamp(22px,3.2vw,40px) clamp(28px,3.6vw,50px) !important;
}
#startScreen.dashboard-mockup-sync .rc18-kpi-grid::before,
#startScreen.dashboard-mockup-sync .rc18-kpi-grid::after{
display:none !important;
}
#startScreen.dashboard-mockup-sync .rc18-kpi-cell{
min-height:auto !important;
display:grid !important;
grid-template-columns:1fr !important;
justify-items:center !important;
gap:10px !important;
padding:0 !important;
text-align:center !important;
}
#startScreen.dashboard-mockup-sync .rc18-kpi-label{
margin:0 0 8px !important;
font-size:13px !important;
}
#startScreen.dashboard-mockup-sync .rc18-kpi-value{
font-size:clamp(25px,2.6vw,38px) !important;
}
#startScreen.dashboard-mockup-sync .rc18-ring-xl{--size:clamp(190px,16vw,272px);--thick:22px;}
#startScreen.dashboard-mockup-sync .rc18-ring-sm{--size:clamp(74px,7.2vw,104px);--thick:9px;}
#startScreen.dashboard-mockup-sync .rc18-arrow-icon{width:clamp(74px,7.2vw,104px) !important;height:clamp(74px,7.2vw,104px) !important;}
}
@media(min-width:1180px){
.wrap{width:min(1340px, calc(100vw - 48px)) !important;}
#startScreen.dashboard-mockup-sync .home-hero,
#startScreen.dashboard-mockup-sync .start-grid.home-only-grid{
padding-left:0 !important;
padding-right:0 !important;
}
}
/* ==========================================================
v96 RC19 — real app visual correction toward approved mockup
- Fix mobile signal icons being styled as empty pills
- Keep progress summary ring + copy side-by-side on mobile
- Compact the Framgångsmätare card so it matches mockup proportions
- Keep iPad/desktop metrics to the side, with unboxed metric modules
========================================================== */
/* Only the chip itself should be pill-styled — never the nested icon span. */
#startScreen.dashboard-mockup-sync .showcase-signals > .signal-chip,
#startScreen.dashboard-mockup-sync .showcase-signals > span{
display:inline-flex !important;
align-items:center !important;
gap:9px !important;
min-height:42px !important;
padding:10px 14px !important;
border-radius:999px !important;
border:1px solid rgba(124,236,255,.30) !important;
background:rgba(3,13,27,.55) !important;
color:rgba(239,249,255,.96) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 0 26px rgba(64,190,255,.08) !important;
}
#startScreen.dashboard-mockup-sync .showcase-signals .signal-icon{
width:20px !important;
height:20px !important;
min-width:20px !important;
min-height:20px !important;
padding:0 !important;
margin:0 !important;
display:inline-grid !important;
place-items:center !important;
flex:0 0 20px !important;
border:0 !important;
border-radius:0 !important;
background:transparent !important;
box-shadow:none !important;
color:#78ecff !important;
}
#startScreen.dashboard-mockup-sync .showcase-signals .signal-icon svg{
width:20px !important;
height:20px !important;
display:block !important;
fill:none !important;
stroke:currentColor !important;
stroke-width:2.35 !important;
stroke-linecap:round !important;
stroke-linejoin:round !important;
}
/* Dagens pass actions must stay on one line on real iPhones. */
#startScreen.dashboard-mockup-sync .rc18-primary-btn,
#startScreen.dashboard-mockup-sync .rc18-secondary-btn{
white-space:nowrap !important;
min-width:0 !important;
}
/* Mobile: keep the approved mockup structure — main ring left, copy right. */
@media(max-width:520px){
#startScreen.dashboard-mockup-sync .home-hero{
padding-top:clamp(22px,5.4vw,30px) !important;
}
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy h1{
font-size:clamp(50px,12.5vw,66px) !important;
line-height:.90 !important;
letter-spacing:-.082em !important;
max-width:96% !important;
}
#startScreen.dashboard-mockup-sync .home-hero .showcase-intro{
font-size:clamp(20px,4.9vw,26px) !important;
line-height:1.16 !important;
max-width:92% !important;
}
#startScreen.dashboard-mockup-sync .showcase-signals{
gap:10px !important;
margin-top:18px !important;
}
#startScreen.dashboard-mockup-sync .showcase-signals > .signal-chip,
#startScreen.dashboard-mockup-sync .showcase-signals > span{
min-height:42px !important;
padding:9px 13px !important;
font-size:clamp(14px,3.55vw,16px) !important;
}
#startScreen.dashboard-mockup-sync .rc18-today-card{
padding:clamp(22px,5.2vw,26px) !important;
padding-top:74px !important;
border-radius:32px !important;
}
#startScreen.dashboard-mockup-sync .rc18-today-copy h2{
font-size:clamp(36px,8.7vw,46px) !important;
line-height:.96 !important;
letter-spacing:-.058em !important;
}
#startScreen.dashboard-mockup-sync .rc18-today-meta{
font-size:clamp(19px,4.35vw,22px) !important;
line-height:1.18 !important;
}
#startScreen.dashboard-mockup-sync .rc18-today-copy p{
margin-top:18px !important;
font-size:clamp(18px,4.1vw,21px) !important;
line-height:1.32 !important;
}
#startScreen.dashboard-mockup-sync .rc18-today-actions{
grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr) !important;
gap:12px !important;
margin-top:22px !important;
}
#startScreen.dashboard-mockup-sync .rc18-primary-btn,
#startScreen.dashboard-mockup-sync .rc18-secondary-btn{
min-height:58px !important;
padding:0 10px !important;
gap:8px !important;
border-radius:18px !important;
font-size:clamp(17px,4.15vw,19px) !important;
}
#startScreen.dashboard-mockup-sync .rc18-primary-btn svg,
#startScreen.dashboard-mockup-sync .rc18-secondary-btn svg{
width:19px !important;
height:19px !important;
}
#startScreen.dashboard-mockup-sync .progress-section-title,
#startScreen.dashboard-mockup-sync .quickstats-panel .section-title{
margin:20px 0 12px !important;
}
#startScreen.dashboard-mockup-sync .rc18-progress-card{
padding:clamp(22px,5.4vw,28px) !important;
border-radius:32px !important;
}
#startScreen.dashboard-mockup-sync .rc18-progress-main{
display:grid !important;
grid-template-columns:minmax(108px, 34%) minmax(0, 1fr) !important;
gap:clamp(18px,4.8vw,24px) !important;
align-items:center !important;
justify-items:stretch !important;
padding:0 0 24px !important;
}
#startScreen.dashboard-mockup-sync .rc18-progress-ring-wrap{
justify-self:start !important;
align-self:center !important;
}
#startScreen.dashboard-mockup-sync .rc18-ring-xl{
--size:clamp(118px,31vw,136px) !important;
--thick:clamp(12px,3vw,15px) !important;
}
#startScreen.dashboard-mockup-sync .rc18-progress-copy{
min-width:0 !important;
}
#startScreen.dashboard-mockup-sync .rc18-progress-copy .rc18-kicker{
font-size:clamp(11px,2.7vw,13px) !important;
letter-spacing:.20em !important;
white-space:nowrap !important;
}
#startScreen.dashboard-mockup-sync .rc18-progress-copy h2{
font-size:clamp(32px,8.4vw,40px) !important;
line-height:.96 !important;
letter-spacing:-.045em !important;
word-spacing:.08em !important;
white-space:nowrap !important;
}
#startScreen.dashboard-mockup-sync .rc18-progress-copy p{
font-size:clamp(14px,3.65vw,17px) !important;
line-height:1.18 !important;
white-space:nowrap !important;
letter-spacing:-.015em !important;
}
#startScreen.dashboard-mockup-sync .rc18-day-row{
margin-top:14px !important;
gap:8px !important;
flex-wrap:nowrap !important;
}
#startScreen.dashboard-mockup-sync .rc18-day-pill{
min-width:52px !important;
min-height:34px !important;
padding:7px 12px !important;
font-size:15px !important;
letter-spacing:.02em !important;
}
#startScreen.dashboard-mockup-sync .rc18-kpi-grid{
border-top:1px solid rgba(124,236,255,.15) !important;
}
#startScreen.dashboard-mockup-sync .rc18-kpi-cell{
grid-template-columns:minmax(58px,auto) minmax(0,1fr) !important;
gap:10px !important;
align-items:center !important;
justify-items:stretch !important;
min-height:118px !important;
padding:16px 10px !important;
text-align:left !important;
}
#startScreen.dashboard-mockup-sync .rc18-ring-sm{
--size:clamp(58px,15vw,68px) !important;
--thick:8px !important;
}
#startScreen.dashboard-mockup-sync .rc18-ring-sm span{
font-size:calc(var(--size) * .30) !important;
}
#startScreen.dashboard-mockup-sync .rc18-kpi-label{
margin:0 0 6px !important;
font-size:clamp(11px,2.75vw,13px) !important;
letter-spacing:.22em !important;
white-space:normal !important;
}
#startScreen.dashboard-mockup-sync .rc18-kpi-value{
font-size:clamp(31px,7.8vw,39px) !important;
line-height:.94 !important;
letter-spacing:-.045em !important;
white-space:nowrap !important;
}
#startScreen.dashboard-mockup-sync .rc18-arrow-icon{
width:clamp(58px,15vw,68px) !important;
height:clamp(58px,15vw,68px) !important;
}
#startScreen.dashboard-mockup-sync .rc18-kpi-test .rc18-kpi-label{
letter-spacing:.20em !important;
}
#startScreen.dashboard-mockup-sync .rc18-kpi-grid::before{
background:linear-gradient(180deg, transparent, rgba(124,236,255,.14) 16%, rgba(124,236,255,.075) 84%, transparent) !important;
}
#startScreen.dashboard-mockup-sync .rc18-kpi-grid::after{
background:linear-gradient(90deg, transparent, rgba(124,236,255,.13) 16%, rgba(124,236,255,.075) 84%, transparent) !important;
}
}
/* Very narrow phones: reduce only the values, never collapse the card into a single column. */
@media(max-width:380px){
#startScreen.dashboard-mockup-sync .rc18-progress-main{
grid-template-columns:106px minmax(0,1fr) !important;
gap:14px !important;
}
#startScreen.dashboard-mockup-sync .rc18-ring-xl{--size:106px !important;--thick:12px !important;}
#startScreen.dashboard-mockup-sync .rc18-progress-copy h2{font-size:30px !important;}
#startScreen.dashboard-mockup-sync .rc18-progress-copy p{font-size:13px !important;}
#startScreen.dashboard-mockup-sync .rc18-kpi-cell{grid-template-columns:54px 1fr !important;gap:8px !important;padding:14px 8px !important;}
#startScreen.dashboard-mockup-sync .rc18-ring-sm{--size:54px !important;--thick:7px !important;}
#startScreen.dashboard-mockup-sync .rc18-arrow-icon{width:54px !important;height:54px !important;}
#startScreen.dashboard-mockup-sync .rc18-kpi-value{font-size:29px !important;}
}
/* iPad/desktop: keep the approved side metrics, but remove small cell outlines completely. */
@media(min-width:820px){
#startScreen.dashboard-mockup-sync .rc18-kpi-cell{
border:0 !important;
background:transparent !important;
box-shadow:none !important;
outline:0 !important;
}
#startScreen.dashboard-mockup-sync .rc18-progress-card::before{
opacity:.82 !important;
}
}
/* ==========================================================
v96 RC20 — final mobile/iPad overflow polish from real device screenshots
- Preserve RC19 visual direction, but remove all mobile clipping in progress card
- More compact mobile KPI grid so 109/324 and 10 sek stay inside card
- Keep iPad/desktop side-metrics clean and unboxed
========================================================== */
html, body{max-width:100%; overflow-x:hidden;}
#startScreen.dashboard-mockup-sync,
#startScreen.dashboard-mockup-sync *{box-sizing:border-box;}
#startScreen.dashboard-mockup-sync .home-only-grid,
#startScreen.dashboard-mockup-sync .quickstats-panel,
#startScreen.dashboard-mockup-sync .quick-stats-grid,
#startScreen.dashboard-mockup-sync .rc18-progress-card,
#startScreen.dashboard-mockup-sync .rc18-progress-main,
#startScreen.dashboard-mockup-sync .rc18-progress-copy,
#startScreen.dashboard-mockup-sync .rc18-kpi-grid,
#startScreen.dashboard-mockup-sync .rc18-kpi-cell{min-width:0 !important; max-width:100% !important;}
#startScreen.dashboard-mockup-sync .rc18-progress-copy h2,
#startScreen.dashboard-mockup-sync .rc18-kpi-value{
letter-spacing:-.036em !important;
word-spacing:.04em !important;
}
@media(max-width:520px){
body:not(.exercise-active) .wrap{
width:100% !important;
max-width:100vw !important;
padding-left:0 !important;
padding-right:0 !important;
}
#startScreen.dashboard-mockup-sync .home-only-grid,
#startScreen.dashboard-mockup-sync .start-grid.home-only-grid{
padding-left:12px !important;
padding-right:12px !important;
}
#startScreen.dashboard-mockup-sync .quickstats-panel > .panel-pad{
padding:0 !important;
}
#startScreen.dashboard-mockup-sync .rc18-progress-card{
width:100% !important;
max-width:100% !important;
padding:18px !important;
border-radius:30px !important;
overflow:hidden !important;
}
#startScreen.dashboard-mockup-sync .rc18-progress-main{
grid-template-columns:112px minmax(0,1fr) !important;
gap:12px !important;
padding:0 0 20px !important;
}
#startScreen.dashboard-mockup-sync .rc18-ring-xl{
--size:112px !important;
--thick:12px !important;
}
#startScreen.dashboard-mockup-sync .rc18-progress-copy .rc18-kicker{
font-size:11px !important;
letter-spacing:.18em !important;
line-height:1.05 !important;
}
#startScreen.dashboard-mockup-sync .rc18-progress-copy h2{
font-size:clamp(27px,7.0vw,32px) !important;
line-height:.98 !important;
letter-spacing:-.034em !important;
word-spacing:.05em !important;
white-space:nowrap !important;
max-width:100% !important;
}
#startScreen.dashboard-mockup-sync .rc18-progress-copy p{
font-size:clamp(12px,3.25vw,15px) !important;
line-height:1.18 !important;
letter-spacing:-.012em !important;
white-space:nowrap !important;
max-width:100% !important;
overflow:hidden !important;
text-overflow:clip !important;
}
#startScreen.dashboard-mockup-sync .rc18-day-row{
gap:7px !important;
margin-top:12px !important;
}
#startScreen.dashboard-mockup-sync .rc18-day-pill{
min-width:48px !important;
min-height:32px !important;
padding:6px 10px !important;
font-size:14px !important;
}
#startScreen.dashboard-mockup-sync .rc18-kpi-grid{
grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
width:100% !important;
border-top:1px solid rgba(124,236,255,.14) !important;
}
#startScreen.dashboard-mockup-sync .rc18-kpi-cell{
min-height:104px !important;
grid-template-columns:48px minmax(0,1fr) !important;
gap:8px !important;
padding:14px 8px !important;
overflow:hidden !important;
}
#startScreen.dashboard-mockup-sync .rc18-ring-sm{
--size:48px !important;
--thick:7px !important;
}
#startScreen.dashboard-mockup-sync .rc18-ring-sm span{
font-size:15px !important;
}
#startScreen.dashboard-mockup-sync .rc18-kpi-label{
font-size:10px !important;
letter-spacing:.18em !important;
margin:0 0 6px !important;
line-height:1.04 !important;
white-space:normal !important;
max-width:100% !important;
}
#startScreen.dashboard-mockup-sync .rc18-kpi-value{
font-size:clamp(23px,6.15vw,28px) !important;
line-height:.98 !important;
letter-spacing:-.032em !important;
white-space:nowrap !important;
max-width:100% !important;
}
#startScreen.dashboard-mockup-sync .rc18-arrow-icon{
width:48px !important;
height:48px !important;
}
#startScreen.dashboard-mockup-sync .rc18-kpi-test .rc18-kpi-label{
letter-spacing:.15em !important;
font-size:9.5px !important;
}
#startScreen.dashboard-mockup-sync .rc18-progress-card::after{
height:96px !important;
opacity:.46 !important;
}
#startScreen.dashboard-mockup-sync .rc18-today-meta{
font-size:clamp(15px,3.6vw,18px) !important;
line-height:1.12 !important;
letter-spacing:-.035em !important;
}
#startScreen.dashboard-mockup-sync .rc18-today-actions{
grid-template-columns:minmax(0,1fr) minmax(0,.92fr) !important;
}
#startScreen.dashboard-mockup-sync .rc18-primary-btn,
#startScreen.dashboard-mockup-sync .rc18-secondary-btn{
font-size:clamp(16px,3.85vw,18px) !important;
min-height:56px !important;
}
}
@media(max-width:380px){
#startScreen.dashboard-mockup-sync .home-only-grid,
#startScreen.dashboard-mockup-sync .start-grid.home-only-grid{
padding-left:10px !important;
padding-right:10px !important;
}
#startScreen.dashboard-mockup-sync .rc18-progress-card{padding:16px !important;}
#startScreen.dashboard-mockup-sync .rc18-progress-main{
grid-template-columns:102px minmax(0,1fr) !important;
gap:10px !important;
}
#startScreen.dashboard-mockup-sync .rc18-ring-xl{--size:102px !important;--thick:11px !important;}
#startScreen.dashboard-mockup-sync .rc18-progress-copy h2{font-size:25px !important;}
#startScreen.dashboard-mockup-sync .rc18-progress-copy p{font-size:12px !important;}
#startScreen.dashboard-mockup-sync .rc18-kpi-cell{
grid-template-columns:44px minmax(0,1fr) !important;
gap:7px !important;
padding:13px 7px !important;
min-height:98px !important;
}
#startScreen.dashboard-mockup-sync .rc18-ring-sm{--size:44px !important;--thick:6px !important;}
#startScreen.dashboard-mockup-sync .rc18-ring-sm span{font-size:13px !important;}
#startScreen.dashboard-mockup-sync .rc18-arrow-icon{width:44px !important;height:44px !important;}
#startScreen.dashboard-mockup-sync .rc18-kpi-label{font-size:9.5px !important;letter-spacing:.15em !important;}
#startScreen.dashboard-mockup-sync .rc18-kpi-value{font-size:21px !important;}
}
@media(min-width:820px){
#startScreen.dashboard-mockup-sync .rc18-progress-copy h2{
letter-spacing:-.035em !important;
word-spacing:.06em !important;
}
#startScreen.dashboard-mockup-sync .rc18-kpi-value{
letter-spacing:-.028em !important;
word-spacing:.04em !important;
}
}
/* RC20 narrow-value guard: long numeric KPIs must never clip on iPhone widths. */
@media(max-width:520px){
#startScreen.dashboard-mockup-sync .rc18-kpi-grid .rc18-kpi-cell:nth-child(2) .rc18-kpi-value,
#startScreen.dashboard-mockup-sync .rc18-kpi-grid .rc18-kpi-cell:nth-child(3) .rc18-kpi-value{
font-size:clamp(21px,5.55vw,25px) !important;
}
#startScreen.dashboard-mockup-sync .rc18-kpi-test .rc18-kpi-value{
font-size:clamp(22px,5.8vw,26px) !important;
}
}
/* ==========================================================
v96 RC21 — precision polish from real iPhone/iPad review
- Single icon source in dashboard menu (no duplicate old glyphs)
- Remove iPad/desktop hero frame/card outline
- Center Dagens pass dumbbell icon and align time pill
- Mobile KPI grid becomes vertical: ring/icon -> label -> value
- Stronger mobile overflow guard for progress module
========================================================== */
/* Menu: use the SVG background on .tab-icon only; kill legacy/pseudo icon layer. */
body:not(.exercise-active) .app-tab::before,
body:not(.exercise-active) .app-tab::after{
content:none !important;
display:none !important;
}
body:not(.exercise-active) .app-tab .tab-icon{
font-size:0 !important;
line-height:0 !important;
display:inline-block !important;
width:24px !important;
height:24px !important;
flex:0 0 24px !important;
background:var(--tab-icon) center / contain no-repeat !important;
opacity:.96 !important;
}
body:not(.exercise-active) .app-tab span:not(.tab-icon){
min-width:0 !important;
}
/* Tablet/desktop hero should be content, not an extra framed card. */
@media(min-width:820px){
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy.home-text-hero,
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy{
border:0 !important;
outline:0 !important;
border-radius:0 !important;
background:transparent !important;
box-shadow:none !important;
padding:clamp(8px,1.5vw,18px) clamp(4px,1vw,10px) !important;
}
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy::before,
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy::after{
display:none !important;
content:none !important;
}
#startScreen.dashboard-mockup-sync .rc18-time-chip{
top:28px !important;
right:28px !important;
transform:none !important;
}
#startScreen.dashboard-mockup-sync .rc18-pass-icon{
align-self:start !important;
justify-self:start !important;
transform:translateY(-2px) !important;
}
}
/* Dagens pass icon: keep the symbol optically centered in the circle. */
#startScreen.dashboard-mockup-sync .rc18-pass-icon{
display:grid !important;
place-items:center !important;
line-height:0 !important;
}
#startScreen.dashboard-mockup-sync .rc18-pass-icon svg{
display:block !important;
margin:0 !important;
transform:translateY(-1px) !important;
}
/* Mobile precision: contain everything and rebuild KPI cells vertically. */
@media(max-width:520px){
#startScreen.dashboard-mockup-sync,
#startScreen.dashboard-mockup-sync .home-only-grid,
#startScreen.dashboard-mockup-sync .quickstats-panel,
#startScreen.dashboard-mockup-sync .quick-stats-grid,
#startScreen.dashboard-mockup-sync .rc18-progress-card{
overflow-x:hidden !important;
}
#startScreen.dashboard-mockup-sync .start-grid.home-only-grid{
display:block !important;
width:100% !important;
max-width:100vw !important;
padding-left:12px !important;
padding-right:12px !important;
margin-left:0 !important;
margin-right:0 !important;
}
#startScreen.dashboard-mockup-sync .quickstats-panel.home-quickstats,
#startScreen.dashboard-mockup-sync .quickstats-panel{
display:block !important;
width:100% !important;
max-width:100% !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
background:transparent !important;
box-shadow:none !important;
}
#startScreen.dashboard-mockup-sync .quickstats-panel > .panel-pad{
width:100% !important;
max-width:100% !important;
padding:0 !important;
margin:0 !important;
}
#startScreen.dashboard-mockup-sync .rc18-progress-card{
width:100% !important;
max-width:100% !important;
margin:0 auto !important;
padding:18px 16px 22px !important;
border-radius:30px !important;
overflow:hidden !important;
}
#startScreen.dashboard-mockup-sync .rc18-progress-main{
display:grid !important;
grid-template-columns:104px minmax(0,1fr) !important;
gap:12px !important;
align-items:center !important;
padding:0 0 18px !important;
}
#startScreen.dashboard-mockup-sync .rc18-ring-xl{
--size:104px !important;
--thick:12px !important;
}
#startScreen.dashboard-mockup-sync .rc18-ring-xl span{
font-size:28px !important;
}
#startScreen.dashboard-mockup-sync .rc18-progress-copy{
min-width:0 !important;
width:100% !important;
overflow:hidden !important;
}
#startScreen.dashboard-mockup-sync .rc18-progress-copy .rc18-kicker{
font-size:10px !important;
line-height:1.05 !important;
letter-spacing:.17em !important;
white-space:nowrap !important;
}
#startScreen.dashboard-mockup-sync .rc18-progress-copy h2{
margin-top:7px !important;
font-size:clamp(23px,6.0vw,28px) !important;
line-height:1 !important;
letter-spacing:-.032em !important;
word-spacing:.04em !important;
white-space:nowrap !important;
max-width:100% !important;
overflow:hidden !important;
text-overflow:clip !important;
}
#startScreen.dashboard-mockup-sync .rc18-progress-copy p{
margin-top:4px !important;
font-size:clamp(11px,3.05vw,13px) !important;
line-height:1.18 !important;
letter-spacing:-.01em !important;
white-space:nowrap !important;
max-width:100% !important;
overflow:hidden !important;
text-overflow:clip !important;
}
#startScreen.dashboard-mockup-sync .rc18-day-row{
display:flex !important;
flex-wrap:nowrap !important;
gap:6px !important;
margin-top:10px !important;
width:100% !important;
}
#startScreen.dashboard-mockup-sync .rc18-day-pill{
min-width:43px !important;
min-height:30px !important;
padding:5px 9px !important;
border-radius:999px !important;
font-size:13px !important;
line-height:1 !important;
letter-spacing:.10em !important;
}
#startScreen.dashboard-mockup-sync .rc18-kpi-grid{
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
width:100% !important;
max-width:100% !important;
padding:0 !important;
margin:0 !important;
border-top:1px solid rgba(124,236,255,.14) !important;
overflow:hidden !important;
}
#startScreen.dashboard-mockup-sync .rc18-kpi-cell,
#startScreen.dashboard-mockup-sync .rc18-kpi-test{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
gap:7px !important;
min-height:122px !important;
padding:12px 4px !important;
overflow:hidden !important;
}
#startScreen.dashboard-mockup-sync .rc18-kpi-cell > div:not(.rc18-ring):not(.rc18-arrow-icon),
#startScreen.dashboard-mockup-sync .rc18-kpi-test > div:not(.rc18-arrow-icon){
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:flex-start !important;
width:100% !important;
min-width:0 !important;
}
#startScreen.dashboard-mockup-sync .rc18-ring-sm{
--size:56px !important;
--thick:7px !important;
flex:0 0 56px !important;
margin:0 auto !important;
}
#startScreen.dashboard-mockup-sync .rc18-ring-sm span{
font-size:14px !important;
}
#startScreen.dashboard-mockup-sync .rc18-arrow-icon{
width:56px !important;
height:56px !important;
flex:0 0 56px !important;
margin:0 auto !important;
}
#startScreen.dashboard-mockup-sync .rc18-kpi-label,
#startScreen.dashboard-mockup-sync .rc18-kpi-test .rc18-kpi-label{
order:1 !important;
margin:1px 0 0 !important;
width:100% !important;
max-width:100% !important;
color:#86f1ff !important;
font-size:9px !important;
line-height:1.05 !important;
letter-spacing:.16em !important;
text-align:center !important;
white-space:normal !important;
overflow:visible !important;
}
#startScreen.dashboard-mockup-sync .rc18-kpi-value,
#startScreen.dashboard-mockup-sync .rc18-kpi-test .rc18-kpi-value{
order:2 !important;
margin-top:1px !important;
width:100% !important;
max-width:100% !important;
font-size:clamp(22px,5.55vw,25px) !important;
line-height:1 !important;
letter-spacing:-.02em !important;
word-spacing:0 !important;
text-align:center !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:clip !important;
}
#startScreen.dashboard-mockup-sync .rc18-kpi-grid .rc18-kpi-cell:nth-child(2) .rc18-kpi-value,
#startScreen.dashboard-mockup-sync .rc18-kpi-grid .rc18-kpi-cell:nth-child(3) .rc18-kpi-value{
font-size:clamp(20px,5.15vw,23px) !important;
}
#startScreen.dashboard-mockup-sync .rc18-kpi-test .rc18-kpi-label{
letter-spacing:.13em !important;
font-size:8.6px !important;
}
#startScreen.dashboard-mockup-sync .rc18-kpi-test .rc18-kpi-value{
font-size:clamp(21px,5.3vw,24px) !important;
}
#startScreen.dashboard-mockup-sync .rc18-kpi-grid::before{
left:50% !important;
top:0 !important;
bottom:0 !important;
}
#startScreen.dashboard-mockup-sync .rc18-kpi-grid::after{
top:50% !important;
left:0 !important;
right:0 !important;
}
#startScreen.dashboard-mockup-sync .rc18-progress-card::after{
height:82px !important;
opacity:.38 !important;
}
}
@media(max-width:380px){
#startScreen.dashboard-mockup-sync .rc18-progress-card{padding:16px 14px 20px !important;}
#startScreen.dashboard-mockup-sync .rc18-progress-main{grid-template-columns:94px minmax(0,1fr) !important;gap:10px !important;}
#startScreen.dashboard-mockup-sync .rc18-ring-xl{--size:94px !important;--thick:11px !important;}
#startScreen.dashboard-mockup-sync .rc18-ring-xl span{font-size:25px !important;}
#startScreen.dashboard-mockup-sync .rc18-progress-copy h2{font-size:22px !important;}
#startScreen.dashboard-mockup-sync .rc18-progress-copy p{font-size:10.5px !important;}
#startScreen.dashboard-mockup-sync .rc18-day-pill{min-width:39px !important;font-size:12px !important;padding:5px 7px !important;}
#startScreen.dashboard-mockup-sync .rc18-kpi-cell,
#startScreen.dashboard-mockup-sync .rc18-kpi-test{min-height:114px !important;padding:10px 3px !important;gap:6px !important;}
#startScreen.dashboard-mockup-sync .rc18-ring-sm{--size:50px !important;--thick:6px !important;flex-basis:50px !important;}
#startScreen.dashboard-mockup-sync .rc18-ring-sm span{font-size:12.5px !important;}
#startScreen.dashboard-mockup-sync .rc18-arrow-icon{width:50px !important;height:50px !important;flex-basis:50px !important;}
#startScreen.dashboard-mockup-sync .rc18-kpi-label{font-size:8px !important;letter-spacing:.13em !important;}
#startScreen.dashboard-mockup-sync .rc18-kpi-value{font-size:20px !important;}
#startScreen.dashboard-mockup-sync .rc18-kpi-grid .rc18-kpi-cell:nth-child(2) .rc18-kpi-value,
#startScreen.dashboard-mockup-sync .rc18-kpi-grid .rc18-kpi-cell:nth-child(3) .rc18-kpi-value,
#startScreen.dashboard-mockup-sync .rc18-kpi-test .rc18-kpi-value{font-size:18.5px !important;}
}
/* ==========================================================
v96 RC22 — final visual polish from real iPhone/iPad review
- Keep KPI meters approved; do not alter their structure
- Prevent hero headline clipping on phone
- Lift Dagens pass content clear of the dumbbell icon on iPhone
- Align time chip on tablet/iPad
- Bring back glass transparency in mobile dashboard cards
========================================================== */
/* Hero: keep approved cyan accent but reduce edge pressure on iPhone. */
@media(max-width:520px){
#startScreen.dashboard-mockup-sync .home-hero{
overflow:visible !important;
}
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy,
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy.home-text-hero{
overflow:visible !important;
max-width:100% !important;
}
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy h1{
font-size:clamp(44px,11.35vw,60px) !important;
line-height:.91 !important;
letter-spacing:-.074em !important;
max-width:94vw !important;
overflow:visible !important;
text-wrap:balance !important;
word-break:normal !important;
}
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy h1 span{
display:inline !important;
}
#startScreen.dashboard-mockup-sync .home-hero .showcase-intro{
max-width:90vw !important;
}
}
/* Mobile glass: lighten the cards so the locked background comes through again. */
@media(max-width:520px){
#startScreen.dashboard-mockup-sync .rc18-today-card{
background:
radial-gradient(circle at 82% 16%, rgba(124,236,255,.11), transparent 38%),
radial-gradient(circle at 54% 118%, rgba(40,150,255,.10), transparent 50%),
linear-gradient(180deg, rgba(6,24,45,.62), rgba(3,12,24,.68)) !important;
border-color:rgba(124,236,255,.20) !important;
box-shadow:0 22px 62px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.05) !important;
backdrop-filter:blur(13px) saturate(128%) !important;
-webkit-backdrop-filter:blur(13px) saturate(128%) !important;
}
#startScreen.dashboard-mockup-sync .rc18-progress-card{
background:
radial-gradient(circle at 72% 16%, rgba(124,236,255,.10), transparent 36%),
radial-gradient(circle at 18% 104%, rgba(28,119,255,.11), transparent 42%),
linear-gradient(180deg, rgba(5,20,38,.60), rgba(3,10,20,.70)) !important;
border-color:rgba(100,197,255,.36) !important;
box-shadow:0 0 0 1px rgba(46,168,255,.06), 0 24px 64px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.045), 0 0 40px rgba(28,137,255,.12) !important;
backdrop-filter:blur(13px) saturate(128%) !important;
-webkit-backdrop-filter:blur(13px) saturate(128%) !important;
}
}
/* iPhone Dagens pass: the dumbbell circle must not overlap the kicker/text. */
@media(max-width:520px){
#startScreen.dashboard-mockup-sync .rc18-today-card{
padding-top:96px !important;
}
#startScreen.dashboard-mockup-sync .rc18-pass-icon{
top:22px !important;
left:24px !important;
width:58px !important;
height:58px !important;
transform:none !important;
}
#startScreen.dashboard-mockup-sync .rc18-pass-icon svg{
width:31px !important;
height:31px !important;
transform:translateY(-1px) !important;
}
#startScreen.dashboard-mockup-sync .rc18-time-chip{
top:28px !important;
right:24px !important;
min-height:40px !important;
}
}
/* Tablet/iPad Dagens pass: keep time chip visually locked in the upper right. */
@media(min-width:820px){
#startScreen.dashboard-mockup-sync .rc18-today-card{
position:relative !important;
padding-top:34px !important;
padding-right:clamp(150px,14vw,210px) !important;
}
#startScreen.dashboard-mockup-sync .rc18-time-chip{
top:26px !important;
right:30px !important;
min-height:36px !important;
padding:7px 12px !important;
font-size:14px !important;
transform:none !important;
}
#startScreen.dashboard-mockup-sync .rc18-time-chip svg{
width:16px !important;
height:16px !important;
}
#startScreen.dashboard-mockup-sync .rc18-today-copy h2,
#startScreen.dashboard-mockup-sync .rc18-today-meta,
#startScreen.dashboard-mockup-sync .rc18-today-copy p{
max-width:100% !important;
}
}
/* Very small phones: one extra notch of hero safety without touching the approved KPI layout. */
@media(max-width:380px){
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy h1{
font-size:clamp(40px,10.9vw,52px) !important;
letter-spacing:-.070em !important;
max-width:92vw !important;
}
#startScreen.dashboard-mockup-sync .rc18-today-card{
padding-top:92px !important;
}
}
/* ==========================================================
v96 RC23 — iPad Dagens pass time-chip alignment
- iPhone dashboard is approved: do not touch mobile KPI or hero structure
- iPad/tablet Dagens pass time chip should belong to the same top row
as the strength icon, not create a separate reserved column/padding block
========================================================== */
@media(min-width:820px){
#startScreen.dashboard-mockup-sync .rc18-today-card{
display:grid !important;
grid-template-columns:auto minmax(0,1fr) max-content !important;
grid-template-rows:auto !important;
gap:clamp(18px,2vw,24px) !important;
align-items:start !important;
align-content:start !important;
padding:clamp(28px,3vw,34px) !important;
padding-right:clamp(28px,3vw,34px) !important;
min-height:310px !important;
}
#startScreen.dashboard-mockup-sync .rc18-today-card .rc18-pass-icon{
grid-column:1 !important;
grid-row:1 !important;
align-self:start !important;
justify-self:start !important;
margin:0 !important;
transform:none !important;
}
#startScreen.dashboard-mockup-sync .rc18-today-card .rc18-today-copy{
grid-column:2 !important;
grid-row:1 !important;
align-self:start !important;
min-width:0 !important;
padding:0 !important;
margin:0 !important;
}
#startScreen.dashboard-mockup-sync .rc18-today-card .rc18-time-chip{
position:static !important;
grid-column:3 !important;
grid-row:1 !important;
align-self:start !important;
justify-self:end !important;
width:max-content !important;
max-width:none !important;
margin:0 !important;
top:auto !important;
right:auto !important;
transform:none !important;
white-space:nowrap !important;
}
#startScreen.dashboard-mockup-sync .rc18-today-card .rc18-today-actions{
max-width:100% !important;
}
}
/* Extra guard for narrower iPad landscape / split view: keep the time chip on the top row,
but allow the copy to breathe rather than squeezing the title into a column. */
@media(min-width:820px) and (max-width:1050px){
#startScreen.dashboard-mockup-sync .rc18-today-card{
grid-template-columns:auto minmax(0,1fr) max-content !important;
gap:16px !important;
}
#startScreen.dashboard-mockup-sync .rc18-today-card .rc18-time-chip{
font-size:13px !important;
padding:7px 10px !important;
}
#startScreen.dashboard-mockup-sync .rc18-today-card .rc18-time-chip svg{
width:15px !important;
height:15px !important;
}
}
/* ==========================================================
v96 RC24 — iPad Dagens pass card hard rebuild
- Do not tweak the old squeezed 3-column card anymore.
- Tablet/desktop Dagens pass is rebuilt as a two-row card:
row 1: strength icon left + duration chip right, top aligned
row 2: copy + actions full width, so title/body never get squeezed
- Phone rules remain untouched because iPhone is approved.
========================================================== */
@media(min-width:820px){
#startScreen.dashboard-mockup-sync .rc18-today-card{
/* Fresh tablet card model: icon/time top row, content below full width. */
display:grid !important;
grid-template-columns:minmax(58px,70px) minmax(0,1fr) max-content !important;
grid-template-rows:auto minmax(0,1fr) !important;
grid-template-areas:
"icon gap time"
"copy copy copy" !important;
column-gap:clamp(16px,2vw,24px) !important;
row-gap:clamp(14px,1.6vw,20px) !important;
align-items:start !important;
align-content:start !important;
justify-items:stretch !important;
padding:clamp(28px,3vw,36px) !important;
padding-right:clamp(28px,3vw,36px) !important;
min-height:0 !important;
height:auto !important;
overflow:hidden !important;
}
#startScreen.dashboard-mockup-sync .rc18-today-card .rc18-pass-icon{
grid-area:icon !important;
position:relative !important;
top:auto !important;
left:auto !important;
right:auto !important;
bottom:auto !important;
width:clamp(58px,5.2vw,70px) !important;
height:clamp(58px,5.2vw,70px) !important;
margin:0 !important;
transform:none !important;
align-self:start !important;
justify-self:start !important;
z-index:2 !important;
}
#startScreen.dashboard-mockup-sync .rc18-today-card .rc18-time-chip{
grid-area:time !important;
position:relative !important;
top:auto !important;
left:auto !important;
right:auto !important;
bottom:auto !important;
width:max-content !important;
max-width:100% !important;
margin:0 !important;
transform:none !important;
align-self:start !important;
justify-self:end !important;
white-space:nowrap !important;
z-index:2 !important;
min-height:clamp(34px,3vw,40px) !important;
padding:clamp(7px,.8vw,9px) clamp(10px,1.1vw,14px) !important;
font-size:clamp(12px,1.18vw,15px) !important;
}
#startScreen.dashboard-mockup-sync .rc18-today-card .rc18-time-chip svg{
width:clamp(14px,1.3vw,17px) !important;
height:clamp(14px,1.3vw,17px) !important;
flex:0 0 auto !important;
}
#startScreen.dashboard-mockup-sync .rc18-today-card .rc18-today-copy{
grid-area:copy !important;
position:relative !important;
z-index:2 !important;
min-width:0 !important;
width:100% !important;
max-width:100% !important;
padding:0 !important;
margin:0 !important;
}
#startScreen.dashboard-mockup-sync .rc18-today-card .rc18-today-copy .rc18-kicker{
display:block !important;
margin:0 0 clamp(6px,.7vw,8px) !important;
white-space:nowrap !important;
}
#startScreen.dashboard-mockup-sync .rc18-today-card .rc18-today-copy h2{
max-width:100% !important;
margin:0 0 clamp(6px,.7vw,8px) !important;
font-size:clamp(31px,3.15vw,48px) !important;
line-height:.96 !important;
letter-spacing:-.060em !important;
white-space:normal !important;
text-wrap:balance !important;
overflow:visible !important;
}
#startScreen.dashboard-mockup-sync .rc18-today-card .rc18-today-meta{
max-width:100% !important;
font-size:clamp(15px,1.55vw,22px) !important;
line-height:1.18 !important;
white-space:normal !important;
overflow:visible !important;
}
#startScreen.dashboard-mockup-sync .rc18-today-card .rc18-today-copy p{
max-width:56ch !important;
margin-top:clamp(14px,1.35vw,22px) !important;
font-size:clamp(14px,1.35vw,20px) !important;
line-height:1.30 !important;
overflow:visible !important;
}
#startScreen.dashboard-mockup-sync .rc18-today-card .rc18-today-actions{
display:grid !important;
grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr) !important;
gap:clamp(10px,1.2vw,14px) !important;
width:100% !important;
max-width:100% !important;
margin-top:clamp(18px,1.8vw,26px) !important;
}
#startScreen.dashboard-mockup-sync .rc18-today-card .rc18-primary-btn,
#startScreen.dashboard-mockup-sync .rc18-today-card .rc18-secondary-btn{
min-width:0 !important;
width:100% !important;
height:clamp(48px,4.4vw,60px) !important;
min-height:clamp(48px,4.4vw,60px) !important;
padding:0 clamp(12px,1.6vw,18px) !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:clip !important;
font-size:clamp(15px,1.45vw,21px) !important;
}
}
/* Narrow iPad landscape / split-view: keep the fresh two-row model, but make
controls and title slightly more compact instead of squeezing the copy column. */
@media(min-width:820px) and (max-width:1050px){
#startScreen.dashboard-mockup-sync .rc18-today-card{
grid-template-columns:58px minmax(0,1fr) max-content !important;
column-gap:14px !important;
row-gap:13px !important;
padding:26px !important;
}
#startScreen.dashboard-mockup-sync .rc18-today-card .rc18-pass-icon{
width:58px !important;
height:58px !important;
}
#startScreen.dashboard-mockup-sync .rc18-today-card .rc18-pass-icon svg{
width:31px !important;
height:31px !important;
}
#startScreen.dashboard-mockup-sync .rc18-today-card .rc18-time-chip{
min-height:34px !important;
padding:7px 10px !important;
font-size:12.5px !important;
}
#startScreen.dashboard-mockup-sync .rc18-today-card .rc18-today-copy h2{
font-size:clamp(29px,3vw,39px) !important;
}
#startScreen.dashboard-mockup-sync .rc18-today-card .rc18-today-meta{
font-size:clamp(14px,1.6vw,18px) !important;
}
#startScreen.dashboard-mockup-sync .rc18-today-card .rc18-today-copy p{
font-size:clamp(13.5px,1.45vw,17px) !important;
max-width:48ch !important;
}
#startScreen.dashboard-mockup-sync .rc18-today-card .rc18-primary-btn,
#startScreen.dashboard-mockup-sync .rc18-today-card .rc18-secondary-btn{
height:48px !important;
min-height:48px !important;
font-size:15px !important;
}
}
/* ==========================================================
v96 RC25 — mockup top header implementation
- One glass top bar: hamburger left, NEXT centered, profile right.
- Remove duplicate NEXT ATHLETE OS chip under hero.
- Hide the old shortcut/navigation card; menu dropdown remains available.
- Do not touch approved Dagens pass / KPI structures beyond spacing from the removed eyebrow.
========================================================== */
body:not(.exercise-active) .dashboard-shortcuts-panel{
display:none !important;
}
body:not(.exercise-active) .app-topbar.rc25-topbar,
body.topbar-portal:not(.exercise-active) .app-topbar.rc25-topbar,
body.topbar-hard-fixed:not(.exercise-active) .app-topbar.rc25-topbar{
display:grid !important;
grid-template-columns:minmax(52px,72px) minmax(0,1fr) minmax(52px,72px) !important;
align-items:center !important;
justify-items:center !important;
gap:12px !important;
position:relative !important;
inset:auto !important;
width:100% !important;
max-width:min(1280px, calc(100vw - 32px)) !important;
margin:0 auto clamp(16px,2vw,24px) !important;
min-height:clamp(72px,7.2vw,94px) !important;
padding:12px clamp(16px,2.2vw,24px) !important;
border-radius:clamp(24px,2.4vw,34px) !important;
border:1px solid rgba(121,190,255,.22) !important;
background:linear-gradient(180deg,rgba(4,10,21,.82),rgba(4,12,24,.58)) !important;
box-shadow:0 18px 44px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.035) !important;
-webkit-backdrop-filter:blur(18px) saturate(128%) !important;
backdrop-filter:blur(18px) saturate(128%) !important;
overflow:visible !important;
z-index:200 !important;
}
body:not(.exercise-active) .app-topbar.rc25-topbar .app-location,
body:not(.exercise-active) .app-topbar.rc25-topbar .app-primary-action{
display:none !important;
}
body:not(.exercise-active) .rc25-brand{
grid-column:2 !important;
grid-row:1 !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
min-width:0 !important;
pointer-events:none !important;
text-align:center !important;
}
body:not(.exercise-active) .rc25-brand .brand-next{
display:block !important;
color:rgba(255,255,255,.96) !important;
font-weight:950 !important;
letter-spacing:.18em !important;
font-size:clamp(26px,4.4vw,46px) !important;
line-height:.82 !important;
text-shadow:0 0 22px rgba(135,226,255,.08) !important;
font-family:var(--font-display, inherit) !important;
}
body:not(.exercise-active) .rc25-brand .brand-sub{
display:block !important;
color:#79efff !important;
margin-top:clamp(6px,.7vw,8px) !important;
font-size:clamp(9px,1.2vw,14px) !important;
line-height:1 !important;
font-weight:900 !important;
letter-spacing:.32em !important;
opacity:.92 !important;
}
body:not(.exercise-active) .app-nav-toggle.rc25-nav-toggle,
body.topbar-portal:not(.exercise-active) .app-nav-toggle.rc25-nav-toggle,
body.topbar-hard-fixed:not(.exercise-active) .app-nav-toggle.rc25-nav-toggle{
grid-column:1 !important;
grid-row:1 !important;
justify-self:start !important;
display:grid !important;
place-items:center !important;
min-width:44px !important;
width:clamp(46px,5vw,58px) !important;
min-height:44px !important;
height:clamp(46px,5vw,58px) !important;
padding:0 !important;
border-radius:999px !important;
border:0 !important;
background:transparent !important;
box-shadow:none !important;
color:#a9f2ff !important;
font-size:0 !important;
line-height:1 !important;
}
body:not(.exercise-active) .app-nav-toggle.rc25-nav-toggle .nav-burger{
display:block !important;
font-size:clamp(30px,3.4vw,42px) !important;
font-weight:500 !important;
line-height:.8 !important;
color:#cfefff !important;
transform:translateY(-1px) !important;
}
body:not(.exercise-active) .app-nav-toggle.rc25-nav-toggle .nav-label{
display:none !important;
}
body:not(.exercise-active) .app-profile-toggle.rc25-profile-toggle{
grid-column:3 !important;
grid-row:1 !important;
justify-self:end !important;
display:grid !important;
place-items:center !important;
min-width:44px !important;
width:clamp(44px,4.8vw,56px) !important;
min-height:44px !important;
height:clamp(44px,4.8vw,56px) !important;
padding:0 !important;
border-radius:999px !important;
border:1px solid rgba(116,224,255,.36) !important;
color:#80edff !important;
background:rgba(6,20,38,.34) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.035), 0 0 20px rgba(0,185,255,.08) !important;
}
body:not(.exercise-active) .app-profile-toggle.rc25-profile-toggle svg{
width:58% !important;
height:58% !important;
fill:none !important;
stroke:currentColor !important;
stroke-width:1.75 !important;
stroke-linecap:round !important;
stroke-linejoin:round !important;
}
body:not(.exercise-active) .app-topbar.rc25-topbar #appTabs.app-tabs,
body:not(.exercise-active) .app-topbar.rc25-topbar .app-tabs,
body.topbar-portal:not(.exercise-active) .app-topbar.rc25-topbar .app-tabs,
body.topbar-hard-fixed:not(.exercise-active) .app-topbar.rc25-topbar .app-tabs{
position:absolute !important;
left:clamp(10px,1.5vw,18px) !important;
right:auto !important;
top:calc(100% + 12px) !important;
display:none !important;
width:min(560px, calc(100vw - 32px)) !important;
max-height:calc(100svh - 130px) !important;
overflow:auto !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
padding:12px !important;
border-radius:24px !important;
border:1px solid rgba(124,236,255,.18) !important;
background:rgba(4,10,20,.88) !important;
box-shadow:0 22px 58px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.035) !important;
-webkit-backdrop-filter:blur(20px) saturate(132%) !important;
backdrop-filter:blur(20px) saturate(132%) !important;
z-index:300 !important;
}
body:not(.exercise-active) .app-topbar.rc25-topbar.nav-open #appTabs.app-tabs,
body:not(.exercise-active) .app-topbar.rc25-topbar.nav-open .app-tabs{
display:grid !important;
}
body:not(.exercise-active) .app-topbar.rc25-topbar .app-tab{
min-height:clamp(70px,8vw,104px) !important;
display:grid !important;
grid-template-columns:auto minmax(0,1fr) !important;
align-items:center !important;
justify-items:start !important;
gap:12px !important;
padding:clamp(12px,1.6vw,18px) !important;
border-radius:20px !important;
font-size:clamp(16px,2vw,24px) !important;
line-height:1.05 !important;
text-align:left !important;
white-space:normal !important;
background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02)) !important;
border:1px solid rgba(124,236,255,.14) !important;
}
body:not(.exercise-active) .app-topbar.rc25-topbar .app-tab.active{
border-color:rgba(132,238,255,.54) !important;
box-shadow:inset 0 0 0 1px rgba(132,238,255,.10), 0 14px 32px rgba(0,168,255,.10) !important;
}
body:not(.exercise-active) .app-topbar.rc25-topbar .app-tab .tab-icon{
width:28px !important;
height:28px !important;
flex:0 0 28px !important;
}
/* Header owns the brand now: no duplicate NEXT ATHLETE OS chip below. */
#startScreen.dashboard-mockup-sync .home-hero .showcase-eyebrow{
display:none !important;
}
#startScreen.dashboard-mockup-sync .home-hero .showcase-copy h1{
margin-top:0 !important;
}
/* Mobile: same header geometry as the mockup, but keep the proven fixed position. */
@media(max-width:760px){
body:not(.exercise-active) .app-topbar.rc25-topbar,
body.topbar-portal:not(.exercise-active) .app-topbar.rc25-topbar,
body.topbar-hard-fixed:not(.exercise-active) .app-topbar.rc25-topbar{
position:fixed !important;
top:calc(env(safe-area-inset-top,0px) + 8px) !important;
left:12px !important;
right:12px !important;
width:auto !important;
max-width:none !important;
min-height:64px !important;
padding:8px 12px !important;
border-radius:24px !important;
z-index:9000 !important;
}
body:not(.exercise-active) .wrap{
padding-top:calc(86px + env(safe-area-inset-top,0px)) !important;
}
body:not(.exercise-active) .rc25-brand .brand-next{
font-size:32px !important;
letter-spacing:.16em !important;
}
body:not(.exercise-active) .rc25-brand .brand-sub{
font-size:9px !important;
letter-spacing:.26em !important;
margin-top:5px !important;
}
body:not(.exercise-active) .app-topbar.rc25-topbar #appTabs.app-tabs,
body:not(.exercise-active) .app-topbar.rc25-topbar .app-tabs{
position:fixed !important;
left:12px !important;
right:12px !important;
top:calc(env(safe-area-inset-top,0px) + 84px) !important;
width:auto !important;
max-height:calc(100svh - 112px) !important;
}
#startScreen.dashboard-mockup-sync .home-hero{
padding-top:clamp(54px,13vw,82px) !important;
}
}
/* Tablet portrait had an old inline-nav special case; RC25 keeps one topbar model. */
@media (min-width:768px) and (max-width:899px) and (orientation:portrait){
body:not(.exercise-active) .app-topbar.rc25-topbar,
body.topbar-portal:not(.exercise-active) .app-topbar.rc25-topbar,
body.topbar-hard-fixed:not(.exercise-active) .app-topbar.rc25-topbar{
display:grid !important;
position:relative !important;
width:100% !important;
max-width:min(1280px, calc(100vw - 32px)) !important;
margin:0 auto 18px !important;
padding:12px 18px !important;
}
body:not(.exercise-active) .app-topbar.rc25-topbar #appNavToggle,
body:not(.exercise-active) .app-topbar.rc25-topbar .app-nav-toggle,
body:not(.exercise-active) .app-topbar.rc25-topbar .app-profile-toggle{
display:grid !important;
}
body:not(.exercise-active) .app-topbar.rc25-topbar .app-tabs{
position:absolute !important;
display:none !important;
}
body:not(.exercise-active) .app-topbar.rc25-topbar.nav-open .app-tabs{
display:grid !important;
}
}
/* ==========================================================
v96 RC26 — real logo in the top header
- Replace text brand with a dedicated SVG logo asset.
- Preserve the approved RC25 topbar structure and all dashboard content.
- Keep mobile/iPad dashboard geometry untouched.
========================================================== */
body:not(.exercise-active) .app-topbar.rc26-topbar .rc26-brand{
display:grid !important;
place-items:center !important;
min-width:0 !important;
width:100% !important;
pointer-events:none !important;
}
body:not(.exercise-active) .app-topbar.rc26-topbar .rc26-brand .brand-fallback,
body:not(.exercise-active) .app-topbar.rc26-topbar .rc26-brand .brand-next,
body:not(.exercise-active) .app-topbar.rc26-topbar .rc26-brand .brand-sub{
display:none !important;
}
body:not(.exercise-active) .app-topbar.rc26-topbar .rc26-brand-logo{
display:block !important;
width:clamp(154px,18vw,218px) !important;
height:auto !important;
max-height:clamp(44px,5.1vw,62px) !important;
object-fit:contain !important;
filter:drop-shadow(0 0 18px rgba(72,215,255,.13)) !important;
transform:translateX(.12em) !important;
user-select:none !important;
-webkit-user-drag:none !important;
}
body:not(.exercise-active) .app-topbar.rc26-topbar{
min-height:clamp(72px,7vw,92px) !important;
}
/* Mobile: logo should feel like a mark, not a second hero title. */
@media(max-width:760px){
body:not(.exercise-active) .app-topbar.rc26-topbar .rc26-brand-logo{
width:154px !important;
max-height:44px !important;
transform:translateX(.08em) !important;
}
body:not(.exercise-active) .app-topbar.rc26-topbar,
body.topbar-portal:not(.exercise-active) .app-topbar.rc26-topbar,
body.topbar-hard-fixed:not(.exercise-active) .app-topbar.rc26-topbar{
min-height:64px !important;
padding-top:8px !important;
padding-bottom:8px !important;
}
}
/* Tablet / desktop: allow the micro ATHLETE OS line inside the logo to breathe. */
@media(min-width:761px){
body:not(.exercise-active) .app-topbar.rc26-topbar .rc26-brand-logo{
width:clamp(190px,18vw,228px) !important;
max-height:60px !important;
}
}
@media(min-width:1100px){
body:not(.exercise-active) .app-topbar.rc26-topbar .rc26-brand-logo{
width:232px !important;
max-height:62px !important;
}
}