:root{
--bg:#f5f5f7;
--surface:rgba(255,255,255,.96);
--surface-solid:#ffffff;
--text:#333333;
--muted:#666666;
--primary:#6c63ff;
--primary-dark:#514acb;
--primary-active:#2f2a91;
--danger:#d93636;
--warning:#f2a900;
--warning-dark:#7a5200;
--video-shadow:rgba(0,0,0,.22);
--panel-shadow:rgba(0,0,0,.25);
--overlay-border:rgba(108,99,255,.25);
--exercise-bg:rgba(255,255,255,.97);
--exercise-text:#2e2e3a;
}

body.theme-dark{
--bg:#11131a;
--surface:rgba(25,28,38,.96);
--surface-solid:#191c26;
--text:#f4f5fb;
--muted:#b7bbca;
--primary:#8f89ff;
--primary-dark:#6f68e8;
--primary-active:#514acb;
--danger:#c93b3b;
--warning:#d8a62a;
--warning-dark:#2c2208;
--video-shadow:rgba(0,0,0,.5);
--panel-shadow:rgba(0,0,0,.55);
--overlay-border:rgba(143,137,255,.35);
--exercise-bg:rgba(25,28,38,.97);
--exercise-text:#f4f5fb;
}

body.theme-calm{
--bg:#eef7fb;
--surface:rgba(255,255,255,.96);
--surface-solid:#ffffff;
--text:#20313f;
--muted:#526a7a;
--primary:#2f80a7;
--primary-dark:#246684;
--primary-active:#17445a;
--danger:#c84d4d;
--warning:#e0a93d;
--warning-dark:#65430d;
--video-shadow:rgba(21,60,78,.22);
--panel-shadow:rgba(21,60,78,.24);
--overlay-border:rgba(47,128,167,.28);
--exercise-bg:rgba(255,255,255,.97);
--exercise-text:#20313f;
}

*{box-sizing:border-box}

body{
margin:0;
font-family:Arial,sans-serif;
background:var(--bg);
color:var(--text);
overflow-x:hidden;
}

body.app-fullscreen{
overflow:hidden;
}

#app{
min-height:100vh;
display:flex;
flex-direction:column;
}

.header{
text-align:center;
padding:14px 16px 12px;
}

.header h1{margin:0}

.tagline{
margin:4px 0 0;
font-size:13px;
color:var(--muted);
}

.main{
flex:1;
position:relative;
display:flex;
align-items:center;
justify-content:center;
padding:76px 0 18px;
}

.video-container{
--zoom:1;
width:94%;
max-width:900px;
height:540px;
position:relative;
z-index:1;
}

.video-viewport{
width:100%;
height:100%;
background:#000;
border-radius:18px;
overflow:hidden;
position:relative;
box-shadow:0 12px 35px var(--video-shadow);
}

.video-container.fullscreen{
position:fixed !important;
inset:0 !important;
width:100vw !important;
height:100vh !important;
max-width:none !important;
z-index:50 !important;
background:#000;
}

.video-container.fullscreen .video-viewport{
border-radius:0;
box-shadow:none;
width:100%;
height:100%;
}

video{
width:100%;
height:100%;
object-fit:cover;
transform-origin:center;
}

#normalVideo{
display:block;
transform:scaleX(-1) scale(var(--zoom));
}

.mode-normal #normalVideo{transform:scaleX(1) scale(var(--zoom))}
.mode-mirror #normalVideo{transform:scaleX(-1) scale(var(--zoom))}

.split-layer{
display:none;
position:absolute;
inset:0;
}

.split-pane{
width:50%;
height:100%;
overflow:hidden;
position:absolute;
top:0;
}

.left-pane{left:0}
.right-pane{right:0}

.split-pane video{
position:absolute;
top:0;
width:200%;
height:100%;
object-fit:cover;
}

.left-pane video{left:0}
.right-pane video{right:0}

.mode-left #normalVideo,
.mode-right #normalVideo{display:none}

.mode-left .split-layer,
.mode-right .split-layer{display:block}

.mode-left .left-pane video{transform:scale(var(--zoom))}
.mode-left .right-pane video{transform:scaleX(-1) scale(var(--zoom))}
.mode-right .left-pane video{transform:scaleX(-1) scale(var(--zoom))}
.mode-right .right-pane video{transform:scale(var(--zoom))}

/* PANEL */
.control-panel{
position:absolute;
top:40px;
left:18px;
width:245px;
background:var(--surface);
border-radius:14px;
overflow:hidden;
box-shadow:0 10px 25px var(--panel-shadow);
z-index:200;
}

.control-panel.mobile-hidden{display:none !important}
.control-panel.collapsed{width:210px}
.control-panel.collapsed #panelContent{display:none !important}

.panel-header{
background:var(--primary);
color:#fff;
font-weight:bold;
padding:8px 10px;
display:flex;
justify-content:space-between;
align-items:center;
cursor:grab;
}

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

.minimise-btn,
.dock-btn{
height:26px;
border:none;
border-radius:6px;
background:#fff;
color:var(--primary);
font-weight:bold;
cursor:pointer;
}

.minimise-btn{width:28px}

.dock-btn{
padding:2px 6px;
font-size:11px;
}

#panelContent{
display:flex;
flex-direction:column;
gap:8px;
padding:8px;
}

.section-tabs{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:6px;
}

.section-tabs button{
padding:7px 6px;
font-size:11px;
background:var(--primary-dark);
}

.section-tabs button.active-tab{
background:var(--primary-active);
}

.control-section{
display:none;
flex-direction:column;
gap:7px;
}

.control-section.active-section{
display:flex;
}

button,
select,
.panel-link-button{
padding:8px;
font-size:12px;
border:none;
border-radius:9px;
background:var(--primary);
color:#fff;
cursor:pointer;
text-decoration:none;
text-align:center;
display:block;
}

select{background:var(--primary-dark)}

label{
font-size:11px;
font-weight:bold;
}

input[type="range"]{width:100%}

/* banners */
.privacy-banner,
.compatibility-banner{
width:100%;
padding:8px;
font-size:13px;
font-weight:bold;
text-align:center;
z-index:100;
}

.privacy-banner{
background:var(--danger);
color:#fff;
}

.compatibility-banner{
background:var(--warning);
color:var(--warning-dark);
}

.compatibility-banner a{
color:var(--warning-dark);
margin-left:8px;
}

.wake-lock-banner{
position:fixed;
left:50%;
top:44px;
transform:translateX(-50%);
z-index:650;
background:rgba(47,42,145,.96);
color:#fff;
padding:8px 14px;
border-radius:999px;
font-size:13px;
font-weight:bold;
}

@media (max-width:900px),(hover:none) and (pointer:coarse){
  .mobile-action-rail{
    justify-content:flex-start;
  }

  .mobile-action-rail button[data-open-section="privacy"]{
    margin-left:auto;
  }
}

@media (min-width:951px){
  body.desktop-docked .mobile-action-rail{
    justify-content:flex-start;
    padding-left:18px;
    padding-right:18px;
  }

  body.desktop-docked .mobile-action-rail button[data-open-section="privacy"]{
    margin-left:auto;
  }
}

/* recording */
.recording-indicator{
position:absolute;
top:14px;
right:14px;
padding:8px 10px;
border-radius:999px;
background:rgba(220,0,0,.92);
color:#fff;
font-weight:bold;
display:flex;
gap:8px;
align-items:center;
z-index:80;
}

#quickStopRecordBtn{
background:#fff;
color:#b00000;
padding:5px 9px;
border-radius:999px;
font-size:12px;
font-weight:bold;
}

/* exercise */
.exercise-overlay{
position:absolute;
left:0;
right:0;
top:-64px;
z-index:90;
background:var(--exercise-bg);
color:var(--exercise-text);
border-radius:14px;
padding:8px 54px 8px 12px;
text-align:center;
box-shadow:0 8px 20px rgba(0,0,0,.18);
border:1px solid var(--overlay-border);
}

.video-container.fullscreen .exercise-overlay{
position:fixed;
top:64px;
left:50%;
right:auto;
width:min(760px,calc(100vw - 32px));
transform:translateX(-50%);
z-index:1000;
}

.exercise-name{display:none}

.exercise-phase{
font-size:13px;
font-weight:bold;
color:var(--primary-dark);
margin-bottom:2px;
}

.exercise-text{
font-size:17px;
font-weight:bold;
line-height:1.2;
}

.exercise-timer{
position:absolute;
right:12px;
top:50%;
transform:translateY(-50%);
font-size:22px;
font-weight:bold;
color:var(--primary);
}

.hidden{display:none !important}

.footer{
text-align:center;
padding:4px 10px 6px;
font-size:13px;
}

.footer a{color:var(--primary)}

.mobile-action-rail{display:none}

/* desktop display sizes */
@media (min-width:951px){

body.display-large .video-container{
max-width:1055px;
height:618px;
}

body.display-large .exercise-text{font-size:19px}
body.display-large .exercise-phase{font-size:14px}

body.display-extra-large .video-container{
max-width:1160px;
height:675px;
}

body.display-extra-large .exercise-text{font-size:21px}
body.display-extra-large .exercise-phase{font-size:15px}

body.display-extra-large .main{
padding-top:34px;
}

}

/* shorter screens */
@media (min-width:951px) and (max-height:850px){
.footer{display:none}
.main{padding-bottom:8px}
.control-panel{top:22px}
}

/* MOBILE */
@media (max-width:900px),(hover:none) and (pointer:coarse){

.header{
padding:12px 10px 8px;
}

.header h1{font-size:22px}

.tagline{font-size:12px}

.main{
padding:72px 0 118px;
}

.video-container{
width:96%;
height:62vh;
max-width:none;
}

.control-panel{
position:fixed !important;
left:10px !important;
right:10px !important;
bottom:72px !important;
top:auto !important;
width:auto !important;
max-height:36vh;
border-radius:18px;
display:flex;
flex-direction:column;
overflow:hidden;
z-index:700;
transform:none !important;
}

.control-panel.collapsed{width:auto}

.panel-header{
padding:12px;
cursor:pointer;
}

#panelContent{
flex:1;
overflow-y:auto;
padding:12px 12px 28px 12px;
}

.section-tabs{display:none}

#panelContent .control-section{display:none}
#panelContent .control-section.active-section{display:flex}

.mobile-action-rail{
position:fixed;
left:0;
right:0;
bottom:0;
display:flex;
gap:8px;
overflow-x:auto;
padding:10px;
background:var(--surface);
box-shadow:0 -8px 25px rgba(0,0,0,.18);
z-index:800;
}

.mobile-action-rail button{
min-width:86px;
padding:11px 14px;
border-radius:999px;
font-size:14px;
white-space:nowrap;
}

.mobile-action-rail button.active-rail{
background:var(--primary-active);
}

.dock-btn{display:none}
}

/* DESKTOP DOCKED = tidy like mobile */
@media (min-width:951px){

body.desktop-docked .main{
padding-bottom:110px;
}

body.desktop-docked .section-tabs{
display:none;
}

body.desktop-docked .mobile-action-rail{
position:fixed;
left:0;
right:0;
bottom:0;
display:flex;
justify-content:center;
gap:8px;
padding:10px;
background:var(--surface);
box-shadow:0 -8px 25px rgba(0,0,0,.18);
z-index:800;
overflow-x:auto;
}

body.desktop-docked .mobile-action-rail button{
min-width:86px;
padding:11px 14px;
border-radius:999px;
font-size:14px;
}

body.desktop-docked .control-panel{
position:fixed !important;
left:50% !important;
transform:translateX(-50%) !important;
right:auto !important;
bottom:62px !important;
top:auto !important;
width:420px !important;
max-width:calc(100vw - 40px);
max-height:42vh !important;
display:flex;
flex-direction:column;
overflow:hidden;
}

body.desktop-docked #panelContent{
overflow-y:auto !important;
overflow-x:hidden !important;
white-space:normal;
padding:12px !important;
}

body.desktop-docked #panelContent .control-section{
display:none;
flex-direction:column !important;
gap:8px;
}

body.desktop-docked #panelContent .control-section.active-section{
display:flex !important;
}

body.desktop-docked button,
body.desktop-docked select,
body.desktop-docked .panel-link-button{
width:100%;
font-size:14px;
padding:10px;
}

body.desktop-docked label{
font-size:12px;
}

}

/* v1.02 Footer Cleanup */
.footer{
  text-align:center;
  font-size:12px;
  color:var(--muted);
  padding:4px 8px 6px;
  opacity:.75;
}

.footer a{
  display:none;
}

@media (max-width:900px),(hover:none) and (pointer:coarse){
  .footer{
    display:none;
  }
}

/* v1.03 Hide App Footer */
.footer{
  display:none !important;
}

/* v1.04 Remove Desktop Scrollbar */

html,body{
  height:100%;
  overflow:hidden;
}

#app{
  height:100vh;
  overflow:hidden;
}

.main{
  flex:1;
  min-height:0;
  padding-top:48px !important;
  padding-bottom:8px !important;
}

@media (min-width:951px){
  .video-container{
    max-height:calc(100vh - 130px);
  }
}

/* v1.05 Raise video above desktop rail */

@media (min-width:951px){
  body.desktop-docked .main{
    align-items:flex-start;
    padding-top:34px !important;
    padding-bottom:120px !important;
  }

  body.desktop-docked .video-container{
    margin-top:0;
  }
}

/* v1.06 Unified desktop alignment */

@media (min-width:951px){

  .main{
    align-items:flex-start;
    padding-top:34px !important;
    padding-bottom:120px !important;
  }

  .video-container{
    margin-top:0;
  }

  body.app-fullscreen .main,
  .video-container.fullscreen{
    padding-top:0 !important;
    padding-bottom:0 !important;
    margin-top:0 !important;
  }

}

/* v1.07 Final Desktop Alignment + True Fullscreen */

@media (min-width:951px){

  /* Normal desktop modes */
  .main{
    align-items:flex-start;
    padding-top:58px !important;
    padding-bottom:120px !important;
  }

  .video-container{
    margin-top:0;
  }

  /* Fullscreen = completely reset layout */
  body.app-fullscreen .main{
    padding:0 !important;
    margin:0 !important;
    align-items:stretch !important;
    justify-content:stretch !important;
  }

  body.app-fullscreen .video-container,
  .video-container.fullscreen{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100vh !important;
    max-width:none !important;
    max-height:none !important;
    margin:0 !important;
    border-radius:0 !important;
  }

  body.app-fullscreen .video-viewport,
  .video-container.fullscreen .video-viewport{
    width:100%;
    height:100%;
    border-radius:0 !important;
  }
}

/* v1.08 Precision lower only */

@media (min-width:951px){
  body:not(.app-fullscreen) .main{
    padding-top:70px !important;
  }
}

/* v1.09 Floating menu scaling for high-res screens */

@media (min-width:951px){

  /* Large — ~26px wider than standard (245px); XL ~33px wider than Large for balanced steps */
  body.display-large:not(.desktop-docked):not(.app-fullscreen) .control-panel{
    width:271px !important;
  }

  body.display-large:not(.desktop-docked):not(.app-fullscreen) button,
  body.display-large:not(.desktop-docked):not(.app-fullscreen) select,
  body.display-large:not(.desktop-docked):not(.app-fullscreen) .panel-link-button{
    font-size:13px;
    padding:10px;
  }

  body.display-extra-large:not(.desktop-docked):not(.app-fullscreen) .control-panel{
    width:304px !important;
  }

  body.display-extra-large:not(.desktop-docked):not(.app-fullscreen) button,
  body.display-extra-large:not(.desktop-docked):not(.app-fullscreen) select,
  body.display-extra-large:not(.app-fullscreen) .panel-link-button{
    font-size:14px;
    padding:11px 12px;
  }

  body.display-extra-large:not(.desktop-docked):not(.app-fullscreen) label{
    font-size:12px;
  }
}

/* v1.10 High-res rail scaling + dock text fix */

@media (min-width:951px){

  /* Dock button alignment */
  .dock-btn,
  .minimise-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:1;
  }

  /* Large rail */
  body.display-large .mobile-action-rail button{
    font-size:15px;
    padding:12px 18px;
    min-height:46px;
  }

  body.display-large .mobile-action-rail{
    gap:10px;
    padding:12px;
  }

  /* Extra large rail */
  body.display-extra-large .mobile-action-rail button{
    font-size:17px;
    padding:14px 22px;
    min-height:54px;
    border-radius:999px;
  }

  body.display-extra-large .mobile-action-rail{
    gap:12px;
    padding:14px;
  }

  /* Docked: wider sheet + controls scale with display mode */
  body.display-large.desktop-docked .control-panel{
    width:440px !important;
    max-width:calc(100vw - 40px);
  }

  body.display-extra-large.desktop-docked .control-panel{
    width:465px !important;
    max-width:calc(100vw - 40px);
  }

  body.display-large.desktop-docked button,
  body.display-large.desktop-docked select,
  body.display-large.desktop-docked .panel-link-button{
    font-size:15px;
    padding:11px;
  }

  body.display-extra-large.desktop-docked button,
  body.display-extra-large.desktop-docked select,
  body.display-extra-large.desktop-docked .panel-link-button{
    font-size:17px;
    padding:13px;
  }

  body.display-large.desktop-docked label{
    font-size:12px;
  }

  body.display-extra-large.desktop-docked label{
    font-size:13px;
  }

  body.display-large.desktop-docked .panel-header{
    padding:9px 11px;
    font-size:14px;
  }

  body.display-extra-large.desktop-docked .panel-header{
    padding:10px 12px;
    font-size:15px;
  }

  body.display-large.desktop-docked .dock-btn{
    font-size:12px;
    padding:3px 7px;
    height:28px;
  }

  body.display-extra-large.desktop-docked .dock-btn{
    font-size:13px;
    padding:3px 8px;
    height:30px;
  }

  body.display-large.desktop-docked .minimise-btn{
    width:30px;
    height:28px;
  }

  body.display-extra-large.desktop-docked .minimise-btn{
    width:32px;
    height:30px;
  }

  body.display-large.desktop-docked #panelContent{
    padding:13px !important;
    gap:9px;
  }

  body.display-extra-large.desktop-docked #panelContent{
    padding:14px !important;
    gap:10px;
  }

}

/* v1.11 Reserve space for larger desktop rails */

@media (min-width:951px){

  /* Large mode */
  body.display-large.desktop-docked .main{
    padding-bottom:150px !important;
  }

  body.display-large.desktop-docked .control-panel{
    bottom:78px !important;
  }

  /* Extra large mode */
  body.display-extra-large.desktop-docked .main{
    padding-bottom:180px !important;
  }

  body.display-extra-large.desktop-docked .control-panel{
    bottom:96px !important;
  }

}

/* Standard docked: match Large rail clearance so Mirror zoom isn’t flush on the bottom rail */

@media (min-width:951px){
  body.desktop-docked:not(.display-large):not(.display-extra-large) .control-panel{
    bottom:78px !important;
  }

  body.desktop-docked:not(.display-large):not(.display-extra-large) .main{
    padding-bottom:138px !important;
  }

  body.desktop-docked:not(.display-large):not(.display-extra-large) #panelContent{
    padding-bottom:22px !important;
  }

  body.desktop-docked:not(.display-large):not(.display-extra-large) #panelContent input[type="range"]{
    margin-bottom:6px;
    padding:4px 0;
  }
}

/* v1.12 Mobile landscape fullscreen routine fix */

@media (max-width:900px) and (orientation:landscape){

  body.app-fullscreen .exercise-overlay,
  .video-container.fullscreen .exercise-overlay{
    top:10px !important;
    width:min(72vw,700px);
    padding:6px 44px 6px 10px;
  }

  body.app-fullscreen .exercise-text{
    font-size:15px;
  }

  body.app-fullscreen .exercise-phase{
    font-size:12px;
  }

  body.app-fullscreen .exercise-timer{
    font-size:18px;
    right:10px;
  }

}

/* v1.18 Fullscreen banner + mobile layout fix */

/* Force privacy banner above fullscreen video */
body.app-fullscreen #privacyBanner,
body.app-fullscreen .privacy-banner{
  display:block !important;
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  z-index:999999 !important;
  pointer-events:none;
}

/* Ensure fullscreen video sits below privacy banner if banner visible */
body.app-fullscreen .video-container.fullscreen{
  z-index:1000 !important;
}

/* Mobile portrait: raise video box further */
@media (max-width:900px) and (orientation:portrait){
  body:not(.app-fullscreen) .main{
    padding-top:22px !important;
    padding-bottom:118px !important;
    align-items:flex-start !important;
  }

  body:not(.app-fullscreen) .video-container{
    margin-top:0 !important;
    height:64vh !important;
  }
}

/* Mobile landscape: allow scrolling when not fullscreen */
@media (max-width:950px) and (orientation:landscape){
  html,
  body{
    overflow-y:auto !important;
    overflow-x:hidden !important;
    height:auto !important;
    min-height:100% !important;
  }

  body:not(.app-fullscreen) #app{
    height:auto !important;
    min-height:100vh !important;
    overflow:visible !important;
  }

  body:not(.app-fullscreen) .main{
    height:auto !important;
    min-height:100vh !important;
    overflow:visible !important;
    align-items:flex-start !important;
    padding-top:18px !important;
    padding-bottom:110px !important;
  }

  body:not(.app-fullscreen) .video-container{
    margin-top:0 !important;
    height:72vh !important;
  }

  body.app-fullscreen,
  body.app-fullscreen html{
    overflow:hidden !important;
  }

  body.app-fullscreen #app,
  body.app-fullscreen .main{
    height:100vh !important;
    min-height:100vh !important;
    overflow:hidden !important;
    padding:0 !important;
  }
}

/* v1.19 fullscreen menu + mobile fine tune */

/* Keep controls above fullscreen video, but below privacy/wake banners */
body.app-fullscreen #controlPanel{
  position:fixed !important;
  z-index:6000 !important;
}

body.app-fullscreen .mobile-action-rail{
  z-index:6100 !important;
}

/* Keep privacy and wake banners highest */
body.app-fullscreen #privacyBanner,
body.app-fullscreen .privacy-banner{
  z-index:999999 !important;
}

body.app-fullscreen #wakeLockBanner,
body.app-fullscreen .wake-lock-banner{
  z-index:999999 !important;
}

/* Mobile portrait: undo over-lift slightly */
@media (max-width:900px) and (orientation:portrait){
  body:not(.app-fullscreen) .main{
    padding-top:36px !important;
  }

  body:not(.app-fullscreen) .video-container{
    height:62vh !important;
  }
}

/* Mobile landscape: make routine instructions fully opaque */
@media (max-width:950px) and (orientation:landscape){
  .exercise-overlay{
    background:var(--exercise-bg) !important;
    opacity:1 !important;
    backdrop-filter:none !important;
  }

  body.theme-dark .exercise-overlay{
    background:#191c26 !important;
  }

  body.theme-calm .exercise-overlay{
    background:#ffffff !important;
  }

  body:not(.app-fullscreen) .exercise-overlay{
    z-index:2000 !important;
  }
}

/* v1.20 final fullscreen/privacy/mobile polish */

/* v1.20b restore floating menu position - do not affect fullscreen */
@media (min-width:951px){
  body:not(.desktop-docked):not(.app-fullscreen) #controlPanel{
    top:40px;
    left:18px;
  }
}

/* Privacy banner must hide properly when Privacy Mode is OFF */
body.app-fullscreen #privacyBanner.hidden,
body.app-fullscreen .privacy-banner.hidden{
  display:none !important;
}

body.app-fullscreen #privacyBanner:not(.hidden),
body.app-fullscreen .privacy-banner:not(.hidden){
  display:block !important;
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  z-index:999999 !important;
  pointer-events:none;
}

/* Mobile portrait: bring video slightly lower */
@media (max-width:900px) and (orientation:portrait){
  body:not(.app-fullscreen) .main{
    padding-top:46px !important;
  }
}

/* Mobile landscape: make routine instruction box fully solid */
@media (max-width:950px) and (orientation:landscape){
  .exercise-overlay,
  body:not(.app-fullscreen) .exercise-overlay,
  body.app-fullscreen .exercise-overlay,
  .video-container.fullscreen .exercise-overlay{
    background:#ffffff !important;
    opacity:1 !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  body.theme-dark .exercise-overlay{
    background:#191c26 !important;
  }

  body.theme-calm .exercise-overlay{
    background:#ffffff !important;
  }
}

/* v1.21 Align normal floating menu with fullscreen position */

@media (min-width:951px){
  body:not(.app-fullscreen):not(.desktop-docked) #controlPanel{
    top:56px;
    left:56px;
  }
}

/* v1.22 Correct floating menu alignment + mobile portrait lower */

/* Desktop floating only (not fullscreen / not docked) */
@media (min-width:951px){
  /* no !important on top/left so ui.js drag can override via inline styles */
  body:not(.app-fullscreen):not(.desktop-docked) #controlPanel{
    top:34px;
    left:14px;
  }
}

/* Mobile portrait: move video down a little more */
@media (max-width:900px) and (orientation:portrait){
  body:not(.app-fullscreen) .main{
    padding-top:58px !important;
  }

  body:not(.app-fullscreen) .video-container{
    height:60vh !important;
  }
}

/* v1.23 Mobile landscape fullscreen routine below privacy banner */

@media (max-width:950px) and (orientation:landscape){

  body.app-fullscreen #privacyBanner:not(.hidden) ~ #app .exercise-overlay,
  body.app-fullscreen .privacy-banner:not(.hidden) ~ #app .exercise-overlay{
    top:38px !important;
  }

  body.app-fullscreen #privacyBanner.hidden ~ #app .exercise-overlay,
  body.app-fullscreen .privacy-banner.hidden ~ #app .exercise-overlay{
    top:10px !important;
  }

}

/* v1.30 Overlay Pack */

.overlay-layer{
  position:absolute;
  inset:0;
  z-index:35;
  pointer-events:none;
  overflow:hidden;
}

/* individual overlay elements control their own display */

.overlay-centre-line{
  position:absolute;
  top:8%;
  bottom:8%;
  left:50%;
  width:2px;
  transform:translateX(-50%);
  background:rgba(255,255,255,.55);
  box-shadow:0 0 8px rgba(108,99,255,.65);
}

#overlayLayer .overlay-face-frame{
  position:absolute;
  top:50%;
  left:50%;

  width:5%;
  height:68%;

  transform:translate(-50%, -58%);

.overlay-smile-target{
  position:absolute;
  top:61%;
  width:18px;
  height:18px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.85);
  box-shadow:0 0 12px rgba(108,99,255,.75);
}

.overlay-smile-target.left{
  left:42%;
}

.overlay-smile-target.right{
  right:42%;
}

.overlay-hold-ring{
  position:absolute;
  right:18px;
  bottom:18px;
  width:64px;
  height:64px;
  border-radius:50%;
  border:4px solid rgba(255,255,255,.35);
  border-top-color:rgba(108,99,255,.95);
  box-shadow:0 0 16px rgba(108,99,255,.5);
  animation:overlaySpin 1.4s linear infinite;
}

@keyframes overlaySpin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

/* Overlay modes */
/* overlay mode rules moved to v2 system below */

/* Theme-aware overlay tint */
body.theme-dark .overlay-centre-line,
body.theme-dark .overlay-face-frame,
body.theme-dark .overlay-smile-target{
  border-color:rgba(143,137,255,.8);
  background:rgba(143,137,255,.55);
}

body.theme-calm .overlay-centre-line{
  background:rgba(47,128,167,.65);
}

body.theme-calm .overlay-face-frame,
body.theme-calm .overlay-smile-target{
  border-color:rgba(47,128,167,.8);
}

/* Mobile tuning */
@media (max-width:900px){
  .overlay-face-frame{
    width:min(56vw,280px);
    height:min(42vh,340px);
    top:18%;
  }

  .overlay-smile-target.left{
    left:38%;
  }

  .overlay-smile-target.right{
    right:38%;
  }

  .overlay-hold-ring{
    width:52px;
    height:52px;
    right:12px;
    bottom:12px;
  }
}

@media (max-width:950px) and (orientation:landscape){
  .overlay-face-frame{
    top:12%;
    width:min(34vw,260px);
    height:min(58vh,260px);
  }

  .overlay-smile-target{
    top:64%;
  }

  .overlay-hold-ring{
    width:46px;
    height:46px;
  }
}

/* v1.32 Mobile landscape overlay aspect fix */

@media (max-width:950px) and (orientation:landscape){

  .overlay-face-frame{
    width:min(28vw,220px) !important;
    aspect-ratio:3 / 4 !important;
    height:auto !important;
    top:10% !important;
  }

  body.app-fullscreen .overlay-face-frame{
    width:min(30vw,240px) !important;
    aspect-ratio:3 / 4 !important;
    height:auto !important;
    top:12% !important;
  }

  .overlay-smile-target{
    width:16px !important;
    height:16px !important;
    top:62% !important;
  }

  .overlay-hold-ring{
    width:42px !important;
    height:42px !important;
  }
}

/* v1.33 Mobile layout: safe areas, in-panel scroll, dynamic viewport height
   (additive only — does not modify rules above) */

@media (max-width:900px),(hover:none) and (pointer:coarse){
  #panelContent{
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }

  .mobile-action-rail{
    scroll-snap-type:x proximity;
    scrollbar-width:thin;
  }

  .mobile-action-rail button{
    scroll-snap-align:start;
    touch-action:manipulation;
  }

  .panel-header,
  .control-panel button,
  .control-panel select,
  .control-panel .panel-link-button{
    touch-action:manipulation;
  }
}

@media (max-width:900px) and (orientation:portrait){
  body:not(.app-fullscreen) .main{
    padding-bottom:calc(118px + env(safe-area-inset-bottom,0px)) !important;
  }
}

@media (max-width:950px) and (orientation:landscape){
  body:not(.app-fullscreen) .main{
    padding-bottom:calc(110px + env(safe-area-inset-bottom,0px)) !important;
  }
}

@supports (padding:max(0px,0px)){
  @media (max-width:900px),(hover:none) and (pointer:coarse){
    .header{
      padding-left:max(10px,env(safe-area-inset-left,0px));
      padding-right:max(10px,env(safe-area-inset-right,0px));
      padding-top:max(8px,env(safe-area-inset-top,0px));
    }

    .privacy-banner,
    .compatibility-banner{
      padding-left:max(8px,env(safe-area-inset-left,0px));
      padding-right:max(8px,env(safe-area-inset-right,0px));
    }

    .mobile-action-rail{
      padding-left:max(10px,env(safe-area-inset-left,0px));
      padding-right:max(10px,env(safe-area-inset-right,0px));
      padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
    }

    .control-panel{
      left:max(10px,env(safe-area-inset-left,0px)) !important;
      right:max(10px,env(safe-area-inset-right,0px)) !important;
      bottom:calc(72px + env(safe-area-inset-bottom,0px)) !important;
    }
  }
}

@supports (height:100dvh){
  @media (max-width:900px) and (orientation:portrait){
    body:not(.app-fullscreen) .video-container{
      max-height:min(60vh,calc(100dvh - 200px));
    }
  }

  @media (max-width:950px) and (orientation:landscape){
    body:not(.app-fullscreen) .video-container{
      max-height:min(72vh,calc(100dvh - 140px));
    }
  }
}

/* v1.34 Low-resolution tuning: 1024×768, 1366×768, 1280×720, small windows */

@media (min-width:951px) and (max-height:900px){
  body:not(.app-fullscreen) .header{
    padding:10px 14px 8px;
  }

  body:not(.app-fullscreen) .header h1{
    font-size:clamp(1.2rem,3.5vw,1.65rem);
  }

  body:not(.app-fullscreen) .tagline{
    font-size:12px;
    margin-top:2px;
  }
}

@media (min-width:951px) and (max-height:820px){
  body:not(.app-fullscreen) .main{
    padding-top:44px !important;
    padding-bottom:92px !important;
  }

  body.desktop-docked:not(.app-fullscreen):not(.display-large):not(.display-extra-large) .main{
    padding-bottom:104px !important;
  }

  body.display-large.desktop-docked:not(.app-fullscreen) .main{
    padding-bottom:122px !important;
  }

  body.display-extra-large.desktop-docked:not(.app-fullscreen) .main{
    padding-bottom:136px !important;
  }

  body:not(.app-fullscreen) .video-container{
    height:auto;
    aspect-ratio:16 / 9;
    width:min(94%,900px);
    max-height:min(540px,calc(100vh - 240px));
  }

  body:not(.app-fullscreen).display-large .video-container{
    width:min(94%,1055px);
    max-height:min(618px,calc(100vh - 240px));
  }

  body:not(.app-fullscreen).display-extra-large .video-container{
    width:min(94%,1160px);
    max-height:min(675px,calc(100vh - 240px));
  }


  /* Docked mode - account for header, banner and bottom rail */
  body.desktop-docked:not(.app-fullscreen) .video-container{
    max-height:min(540px,calc(100vh - 300px)) !important;
  }

  body.desktop-docked:not(.app-fullscreen).display-large .video-container{
    max-height:min(618px,calc(100vh - 300px)) !important;
  }

  body.desktop-docked:not(.app-fullscreen).display-extra-large .video-container{
    max-height:min(675px,calc(100vh - 300px)) !important;
  }

  body:not(.app-fullscreen):not(.desktop-docked) .control-panel:not(.mobile-hidden){
    max-height:min(520px,calc(100vh - 96px));
  }

  body:not(.app-fullscreen) .exercise-overlay{
    top:-56px;
  }
}

@media (min-width:951px) and (max-height:720px){
  body:not(.app-fullscreen) .main{
    padding-top:36px !important;
    padding-bottom:76px !important;
  }

  body.desktop-docked:not(.app-fullscreen):not(.display-large):not(.display-extra-large) .main{
    padding-bottom:88px !important;
  }

  body.display-large.desktop-docked:not(.app-fullscreen) .main{
    padding-bottom:100px !important;
  }

  body.display-extra-large.desktop-docked:not(.app-fullscreen) .main{
    padding-bottom:112px !important;
  }

  body:not(.app-fullscreen) .video-container{
    max-height:min(480px,calc(100vh - 196px));
  }

  body:not(.app-fullscreen).display-large .video-container,
  body:not(.app-fullscreen).display-extra-large .video-container{
    max-height:min(520px,calc(100vh - 196px));
  }

  body:not(.app-fullscreen) .exercise-text{
    font-size:16px;
  }

  body:not(.app-fullscreen) .exercise-phase{
    font-size:12px;
  }

  body:not(.app-fullscreen) .exercise-timer{
    font-size:19px;
  }
}

@media (min-width:951px) and (max-width:1100px){
  body:not(.app-fullscreen):not(.desktop-docked) .video-container{
    max-width:min(900px,calc(100vw - 300px));
  }

  body:not(.app-fullscreen):not(.desktop-docked).display-large .video-container{
    max-width:min(1055px,calc(100vw - 300px));
  }

  body:not(.app-fullscreen):not(.desktop-docked).display-extra-large .video-container{
    max-width:min(1160px,calc(100vw - 300px));
  }
}

@media (max-width:900px) and (orientation:portrait) and (max-height:667px){
  body:not(.app-fullscreen) .header h1{
    font-size:20px;
  }

  body:not(.app-fullscreen) .main{
    padding-top:40px !important;
  }
}

@media (max-width:900px) and (max-height:600px){
  body:not(.app-fullscreen) .video-container{
    height:min(48vh,280px) !important;
  }

  body:not(.app-fullscreen) .main{
    padding-top:32px !important;
    padding-bottom:calc(100px + env(safe-area-inset-bottom,0px)) !important;
  }
}

/* v1.35 Large / high-resolution viewports (wide QHD, 1440p, 4K): bigger mirror + UI */

@media (min-width:1800px) and (min-height:720px){
  body:not(.app-fullscreen) .header h1{
    font-size:2rem;
  }

  body:not(.app-fullscreen) .tagline{
    font-size:15px;
  }

  .privacy-banner,
  .compatibility-banner{
    font-size:15px;
    padding:10px 12px;
  }

  .wake-lock-banner{
    font-size:15px;
    padding:10px 18px;
  }

  .recording-indicator{
    padding:10px 14px;
    font-size:15px;
  }

  #quickStopRecordBtn{
    font-size:14px;
    padding:7px 12px;
  }

  body:not(.app-fullscreen) .exercise-text{
    font-size:20px;
  }

  body:not(.app-fullscreen) .exercise-phase{
    font-size:15px;
  }

  body:not(.app-fullscreen) .exercise-timer{
    font-size:26px;
  }
}

@media (min-width:2200px) and (min-height:720px){
  body:not(.app-fullscreen) .header h1{
    font-size:2.25rem;
  }

  body:not(.app-fullscreen) .tagline{
    font-size:16px;
  }

  .privacy-banner,
  .compatibility-banner{
    font-size:16px;
    padding:11px 14px;
  }

  .recording-indicator{
    font-size:16px;
  }

  body:not(.app-fullscreen) .exercise-text{
    font-size:22px;
  }

  body:not(.app-fullscreen) .exercise-phase{
    font-size:16px;
  }

  body:not(.app-fullscreen) .exercise-timer{
    font-size:30px;
  }
}

@media (min-width:2500px) and (min-height:720px){
  body:not(.app-fullscreen) .header h1{
    font-size:2.5rem;
  }

  body:not(.app-fullscreen) .tagline{
    font-size:17px;
  }

  .privacy-banner,
  .compatibility-banner{
    font-size:17px;
  }

  body:not(.app-fullscreen) .exercise-text{
    font-size:24px;
  }

  body:not(.app-fullscreen) .exercise-phase{
    font-size:17px;
  }

  body:not(.app-fullscreen) .exercise-timer{
    font-size:34px;
  }
}

@media (min-width:1800px){
  body.desktop-docked:not(.display-large):not(.display-extra-large) .mobile-action-rail button{
    font-size:15px;
    padding:12px 18px;
    min-height:48px;
    min-width:92px;
  }

  body.display-large.desktop-docked .mobile-action-rail button{
    font-size:16px;
    padding:12px 19px;
    min-height:50px;
    min-width:96px;
  }

  body.display-extra-large.desktop-docked .mobile-action-rail button{
    font-size:17px;
    padding:13px 20px;
    min-height:52px;
    min-width:100px;
  }

  body.desktop-docked:not(.display-large):not(.display-extra-large) .mobile-action-rail{
    gap:10px;
    padding:12px;
  }

  body.display-large.desktop-docked .mobile-action-rail{
    gap:11px;
    padding:13px;
  }

  body.display-extra-large.desktop-docked .mobile-action-rail{
    gap:12px;
    padding:14px;
  }

  body.desktop-docked:not(.display-large):not(.display-extra-large) .control-panel{
    width:440px !important;
  }

  body.display-large.desktop-docked .control-panel{
    width:470px !important;
  }

  body.display-extra-large.desktop-docked .control-panel{
    width:510px !important;
  }
}

@media (min-width:1800px) and (min-height:640px){

  /* Docked mode - account for header, banner and bottom rail */
  body.desktop-docked:not(.app-fullscreen) .video-container{
    max-height:min(540px,calc(100vh - 300px)) !important;
  }

  body.desktop-docked:not(.app-fullscreen).display-large .video-container{
    max-height:min(618px,calc(100vh - 300px)) !important;
  }

  body.desktop-docked:not(.app-fullscreen).display-extra-large .video-container{
    max-height:min(675px,calc(100vh - 300px)) !important;
  }

  body:not(.app-fullscreen):not(.desktop-docked) .control-panel:not(.mobile-hidden){
    width:278px;
  }

  body:not(.app-fullscreen):not(.desktop-docked) .control-panel.collapsed{
    width:236px;
  }

  body:not(.app-fullscreen):not(.desktop-docked) .panel-header{
    padding:10px 12px;
    font-size:15px;
  }

  body:not(.app-fullscreen):not(.desktop-docked) #panelContent{
    padding:10px;
    gap:10px;
  }

  body:not(.app-fullscreen):not(.desktop-docked) button,
  body:not(.app-fullscreen):not(.desktop-docked) select,
  body:not(.app-fullscreen):not(.desktop-docked) .panel-link-button{
    font-size:14px;
    padding:11px 12px;
    border-radius:11px;
  }

  body:not(.app-fullscreen):not(.desktop-docked) label{
    font-size:13px;
  }

  body:not(.app-fullscreen):not(.desktop-docked) .section-tabs{
    gap:8px;
  }

  body:not(.app-fullscreen):not(.desktop-docked) .section-tabs button{
    font-size:12px;
    padding:9px 8px;
  }

  body:not(.app-fullscreen):not(.desktop-docked) .dock-btn,
  body:not(.app-fullscreen):not(.desktop-docked) .minimise-btn{
    height:30px;
  }

  body:not(.app-fullscreen):not(.desktop-docked) .minimise-btn{
    width:32px;
  }

  body:not(.app-fullscreen):not(.desktop-docked) .dock-btn{
    font-size:12px;
    padding:3px 8px;
  }

  body.display-large:not(.desktop-docked):not(.app-fullscreen) .control-panel:not(.mobile-hidden){
    width:308px !important;
  }

  body.display-large:not(.desktop-docked):not(.app-fullscreen) button,
  body.display-large:not(.desktop-docked):not(.app-fullscreen) select,
  body.display-large:not(.desktop-docked):not(.app-fullscreen) .panel-link-button{
    font-size:15px !important;
    padding:12px 14px !important;
  }

  body.display-large:not(.desktop-docked):not(.app-fullscreen) label{
    font-size:14px !important;
  }

  body.display-large:not(.desktop-docked):not(.app-fullscreen) .section-tabs button{
    font-size:13px !important;
    padding:10px 9px !important;
  }

  body.display-extra-large:not(.desktop-docked):not(.app-fullscreen) .control-panel:not(.mobile-hidden){
    width:342px !important;
  }

  body.display-extra-large:not(.desktop-docked):not(.app-fullscreen) button,
  body.display-extra-large:not(.desktop-docked):not(.app-fullscreen) select,
  body.display-extra-large:not(.desktop-docked):not(.app-fullscreen) .panel-link-button{
    font-size:16px !important;
    padding:13px 15px !important;
  }

  body.display-extra-large:not(.desktop-docked):not(.app-fullscreen) label{
    font-size:14px !important;
  }

  body.display-extra-large:not(.desktop-docked):not(.app-fullscreen) .section-tabs button{
    font-size:13px !important;
    padding:10px 9px !important;
  }
}

@media (min-width:2200px){
  body.desktop-docked:not(.display-large):not(.display-extra-large) .mobile-action-rail button{
    font-size:16px;
    padding:13px 20px;
    min-height:52px;
    min-width:98px;
  }

  body.display-large.desktop-docked .mobile-action-rail button{
    font-size:17px;
    padding:14px 21px;
    min-height:54px;
    min-width:102px;
  }

  body.display-extra-large.desktop-docked .mobile-action-rail button{
    font-size:18px;
    padding:14px 22px;
    min-height:56px;
    min-width:106px;
  }

  body.desktop-docked:not(.display-large):not(.display-extra-large) .mobile-action-rail{
    gap:12px;
    padding:13px;
  }

  body.display-large.desktop-docked .mobile-action-rail{
    gap:12px;
    padding:14px;
  }

  body.display-extra-large.desktop-docked .mobile-action-rail{
    gap:13px;
    padding:15px;
  }

  body.desktop-docked:not(.display-large):not(.display-extra-large) .control-panel{
    width:480px !important;
  }

  body.display-large.desktop-docked .control-panel{
    width:520px !important;
    max-width:calc(100vw - 48px);
  }

  body.display-extra-large.desktop-docked .control-panel{
    width:565px !important;
    max-width:calc(100vw - 48px);
  }
}

@media (min-width:2200px) and (min-height:640px){

  /* Docked mode - account for header, banner and bottom rail */
  body.desktop-docked:not(.app-fullscreen) .video-container{
    max-height:min(540px,calc(100vh - 300px)) !important;
  }

  body.desktop-docked:not(.app-fullscreen).display-large .video-container{
    max-height:min(618px,calc(100vh - 300px)) !important;
  }

  body.desktop-docked:not(.app-fullscreen).display-extra-large .video-container{
    max-height:min(675px,calc(100vh - 300px)) !important;
  }

  body:not(.app-fullscreen):not(.desktop-docked) .control-panel:not(.mobile-hidden){
    width:300px;
  }

  body:not(.app-fullscreen):not(.desktop-docked) .panel-header{
    font-size:16px;
    padding:11px 14px;
  }

  body:not(.app-fullscreen):not(.desktop-docked) button,
  body:not(.app-fullscreen):not(.desktop-docked) select,
  body:not(.app-fullscreen):not(.desktop-docked) .panel-link-button{
    font-size:15px;
    padding:12px 14px;
  }

  body:not(.app-fullscreen):not(.desktop-docked) label{
    font-size:14px;
  }

  body:not(.app-fullscreen):not(.desktop-docked) .section-tabs button{
    font-size:13px;
    padding:10px 9px;
  }

  body.display-large:not(.desktop-docked):not(.app-fullscreen) .control-panel:not(.mobile-hidden){
    width:334px !important;
  }

  body.display-large:not(.desktop-docked):not(.app-fullscreen) button,
  body.display-large:not(.desktop-docked):not(.app-fullscreen) select,
  body.display-large:not(.desktop-docked):not(.app-fullscreen) .panel-link-button{
    font-size:16px !important;
    padding:13px 15px !important;
  }

  body.display-extra-large:not(.desktop-docked):not(.app-fullscreen) .control-panel:not(.mobile-hidden){
    width:372px !important;
  }

  body.display-extra-large:not(.desktop-docked):not(.app-fullscreen) button,
  body.display-extra-large:not(.desktop-docked):not(.app-fullscreen) select,
  body.display-extra-large:not(.desktop-docked):not(.app-fullscreen) .panel-link-button{
    font-size:17px !important;
    padding:14px 16px !important;
  }
}

@media (min-width:2500px){
  body.desktop-docked:not(.display-large):not(.display-extra-large) .mobile-action-rail button{
    font-size:18px;
    padding:15px 24px;
    min-height:58px;
    min-width:108px;
  }

  body.display-large.desktop-docked .mobile-action-rail button{
    font-size:19px;
    padding:16px 26px;
    min-height:60px;
    min-width:114px;
  }

  body.display-extra-large.desktop-docked .mobile-action-rail button{
    font-size:20px;
    padding:17px 28px;
    min-height:62px;
    min-width:118px;
  }

  body.desktop-docked:not(.display-large):not(.display-extra-large) .mobile-action-rail{
    gap:14px;
    padding:15px;
  }

  body.display-large.desktop-docked .mobile-action-rail{
    gap:14px;
    padding:16px;
  }

  body.display-extra-large.desktop-docked .mobile-action-rail{
    gap:15px;
    padding:17px;
  }

  body.desktop-docked:not(.display-large):not(.display-extra-large) .control-panel{
    width:520px !important;
  }

  body.display-large.desktop-docked .control-panel{
    width:570px !important;
  }

  body.display-extra-large.desktop-docked .control-panel{
    width:620px !important;
  }
}

@media (min-width:2500px) and (min-height:640px){

  /* Docked mode - account for header, banner and bottom rail */
  body.desktop-docked:not(.app-fullscreen) .video-container{
    max-height:min(540px,calc(100vh - 300px)) !important;
  }

  body.desktop-docked:not(.app-fullscreen).display-large .video-container{
    max-height:min(618px,calc(100vh - 300px)) !important;
  }

  body.desktop-docked:not(.app-fullscreen).display-extra-large .video-container{
    max-height:min(675px,calc(100vh - 300px)) !important;
  }

  body:not(.app-fullscreen):not(.desktop-docked) .control-panel:not(.mobile-hidden){
    width:340px;
  }

  body:not(.app-fullscreen):not(.desktop-docked) button,
  body:not(.app-fullscreen):not(.desktop-docked) select,
  body:not(.app-fullscreen):not(.desktop-docked) .panel-link-button{
    font-size:17px;
    padding:14px 16px;
    border-radius:12px;
  }

  body:not(.app-fullscreen):not(.desktop-docked) label{
    font-size:15px;
  }

  body:not(.app-fullscreen):not(.desktop-docked) .section-tabs button{
    font-size:14px;
    padding:11px 10px;
  }

  body.display-large:not(.desktop-docked):not(.app-fullscreen) .control-panel:not(.mobile-hidden){
    width:372px !important;
  }

  body.display-large:not(.desktop-docked):not(.app-fullscreen) button,
  body.display-large:not(.desktop-docked):not(.app-fullscreen) select,
  body.display-large:not(.desktop-docked):not(.app-fullscreen) .panel-link-button{
    font-size:18px !important;
    padding:15px 17px !important;
  }

  body.display-extra-large:not(.desktop-docked):not(.app-fullscreen) .control-panel:not(.mobile-hidden){
    width:418px !important;
  }

  body.display-extra-large:not(.desktop-docked):not(.app-fullscreen) button,
  body.display-extra-large:not(.desktop-docked):not(.app-fullscreen) select,
  body.display-extra-large:not(.desktop-docked):not(.app-fullscreen) .panel-link-button{
    font-size:19px !important;
    padding:15px 17px !important;
  }
}

@media (min-width:1800px) and (min-height:840px){
  body:not(.app-fullscreen) .video-container{
    max-width:1080px;
    height:608px;
  }

  body:not(.app-fullscreen).display-large .video-container{
    max-width:1215px;
    height:683px;
  }

  body:not(.app-fullscreen).display-extra-large .video-container{
    max-width:1320px;
    height:742px;
  }
}

@media (min-width:2200px) and (min-height:880px){
  body:not(.app-fullscreen) .video-container{
    max-width:1220px;
    height:686px;
  }

  body:not(.app-fullscreen).display-large .video-container{
    max-width:1375px;
    height:773px;
  }

  body:not(.app-fullscreen).display-extra-large .video-container{
    max-width:1480px;
    height:832px;
  }
}

@media (min-width:2500px) and (min-height:920px){
  body:not(.app-fullscreen) .video-container{
    max-width:1380px;
    height:776px;
  }

  body:not(.app-fullscreen).display-large .video-container{
    max-width:1555px;
    height:875px;
  }

  body:not(.app-fullscreen).display-extra-large .video-container{
    max-width:1680px;
    height:945px;
  }

  body:not(.app-fullscreen) .video-viewport{
    border-radius:22px;
    box-shadow:0 16px 44px var(--video-shadow);
  }
}

@media (min-width:1800px) and (hover:none) and (pointer:coarse){
  .mobile-action-rail button{
    min-width:94px;
    font-size:16px;
    padding:13px 17px;
  }
}

@media (min-width:2200px) and (hover:none) and (pointer:coarse){
  .mobile-action-rail button{
    min-width:102px;
    font-size:17px;
    padding:14px 19px;
  }
}

@media (min-width:2500px) and (hover:none) and (pointer:coarse){
  .mobile-action-rail button{
    min-width:110px;
    font-size:18px;
    padding:15px 21px;
  }
}

/* v1.37 Docked sheet typography steps with viewport + display mode (Large / Extra-Large) */

@media (min-width:1800px) and (min-height:640px){
  body.display-large.desktop-docked button,
  body.display-large.desktop-docked select,
  body.display-large.desktop-docked .panel-link-button{
    font-size:16px !important;
    padding:12px !important;
  }

  body.display-extra-large.desktop-docked button,
  body.display-extra-large.desktop-docked select,
  body.display-extra-large.desktop-docked .panel-link-button{
    font-size:18px !important;
    padding:14px !important;
  }

  body.display-large.desktop-docked label{
    font-size:13px !important;
  }

  body.display-extra-large.desktop-docked label{
    font-size:14px !important;
  }

  body.display-large.desktop-docked .panel-header{
    font-size:15px !important;
  }

  body.display-extra-large.desktop-docked .panel-header{
    font-size:16px !important;
  }

  body.display-large.desktop-docked .dock-btn{
    font-size:13px !important;
    height:30px !important;
  }

  body.display-extra-large.desktop-docked .dock-btn{
    font-size:14px !important;
    height:32px !important;
  }
}

@media (min-width:2200px) and (min-height:640px){
  body.display-large.desktop-docked button,
  body.display-large.desktop-docked select,
  body.display-large.desktop-docked .panel-link-button{
    font-size:17px !important;
    padding:13px !important;
  }

  body.display-extra-large.desktop-docked button,
  body.display-extra-large.desktop-docked select,
  body.display-extra-large.desktop-docked .panel-link-button{
    font-size:19px !important;
    padding:15px !important;
  }

  body.display-large.desktop-docked label{
    font-size:14px !important;
  }

  body.display-extra-large.desktop-docked label{
    font-size:15px !important;
  }

  body.display-large.desktop-docked .panel-header{
    font-size:16px !important;
  }

  body.display-extra-large.desktop-docked .panel-header{
    font-size:17px !important;
  }
}

@media (min-width:2500px) and (min-height:640px){
  body.display-large.desktop-docked button,
  body.display-large.desktop-docked select,
  body.display-large.desktop-docked .panel-link-button{
    font-size:18px !important;
    padding:14px !important;
  }

  body.display-extra-large.desktop-docked button,
  body.display-extra-large.desktop-docked select,
  body.display-extra-large.desktop-docked .panel-link-button{
    font-size:20px !important;
    padding:16px !important;
  }

  body.display-large.desktop-docked label{
    font-size:15px !important;
  }

  body.display-extra-large.desktop-docked label{
    font-size:16px !important;
  }

  body.display-large.desktop-docked .panel-header{
    font-size:17px !important;
  }

  body.display-extra-large.desktop-docked .panel-header{
    font-size:18px !important;
  }
}

/* v1.39 Floating mirror: always Standard < Large < XL; docked XL sheet same width as Large */

@media (min-width:951px) and (max-width:2199px){
  /* % of vw keeps ordering on all widths; caps match design maxima; floors keep thin windows usable */
  body:not(.desktop-docked):not(.app-fullscreen):not(.display-large):not(.display-extra-large) .video-container{
    max-width:min(900px, max(520px, calc(100vw * 0.469))) !important;
    height:auto !important;
    aspect-ratio:16 / 9;
  }

  body:not(.desktop-docked):not(.app-fullscreen).display-large .video-container{
    max-width:min(1055px, max(565px, calc(100vw * 0.548))) !important;
    height:auto !important;
    aspect-ratio:16 / 9;
  }

  body:not(.desktop-docked):not(.app-fullscreen).display-extra-large .video-container{
    max-width:min(1160px, max(620px, calc(100vw * 0.604))) !important;
    height:auto !important;
    aspect-ratio:16 / 9;
  }
}

@media (min-width:951px) and (max-width:1799px){
  body.display-extra-large.desktop-docked .control-panel{
    width:440px !important;
    max-width:calc(100vw - 40px) !important;
  }
}

@media (min-width:1800px) and (max-width:2199px){
  body.display-extra-large.desktop-docked .control-panel{
    width:470px !important;
    max-width:calc(100vw - 40px) !important;
  }
}

@media (min-width:2200px) and (max-width:2499px){
  body.display-extra-large.desktop-docked .control-panel{
    width:520px !important;
    max-width:calc(100vw - 48px) !important;
  }
}

/* v1.40 Docked Extra large: frame camera slightly higher (cover crop) when mirror meets rail UI */

@media (min-width:951px){
  body.display-extra-large.desktop-docked:not(.app-fullscreen) #normalVideo,
  body.display-extra-large.desktop-docked:not(.app-fullscreen) .split-pane video{
    object-position:center 85%;
  }
}


/* Webcam image position - consistent across all views */
video#normalVideo,
.split-pane video {
  object-position: center 85%;
}

/* Extra large docked already set above - this covers everything else */
body:not(.display-extra-large):not(.desktop-docked) video#normalVideo,
body:not(.display-extra-large):not(.desktop-docked) .split-pane video {
  object-position: center 85%;
}

body.display-large:not(.desktop-docked) video#normalVideo,
body.display-large:not(.desktop-docked) .split-pane video {
  object-position: center 85%;
}

body.display-extra-large:not(.desktop-docked) video#normalVideo,
body.display-extra-large:not(.desktop-docked) .split-pane video {
  object-position: center 85%;
}

body.desktop-docked:not(.display-extra-large) video#normalVideo,
body.desktop-docked:not(.display-extra-large) .split-pane video {
  object-position: center 85%;
}

/* ============================================================
   OVERLAY SYSTEM v2.0 — Group-based, aspect-ratio locked
   All face elements move and scale as one unit
   ============================================================ */

/* Face group: absolutely fills the overlay layer
   JS moves it via --ov-x/--ov-y CSS vars on the layer,
   and scales via --ov-scale. The group itself is full-size
   so percentage translations work correctly. */
.overlay-face-group {
  position: absolute;
  inset: 0;
  transform-origin: center center;
  pointer-events: none;
}

/* Centre line: vertical midline of the viewport */
.overlay-face-group .overlay-centre-line {
  position: absolute;
  top: 5%;
  bottom: 5%;
  left: calc(50% + var(--ov-x, 0px));
  width: 2px;
  transform: translateX(-50%);
  background: rgba(255,255,255,.55);
  box-shadow: 0 0 8px rgba(108,99,255,.65);
  display: none;
}

/* Face frame: oval, sized relative to viewport, aspect-ratio locked */
.overlay-face-group .overlay-face-frame {
  position: absolute;
  /* Use viewport-relative sizing: ~36% wide, ~58% tall = good portrait oval */
  width: calc(36% * var(--ov-scale, 1));
  height: calc(58% * var(--ov-scale, 1));
  top: calc(50% + var(--ov-y, 0px));
  left: calc(50% + var(--ov-x, 0px));
  transform: translate(-50%, -58%);
  border: 2px solid rgba(255,255,255,.55);
  border-radius: 46% 46% 42% 42%;
  box-shadow: 0 0 18px rgba(108,99,255,.42);
  display: none;
}

/* Smile targets: where mouth corners should be when smiling
   Positioned at ~68% down the face oval, symmetrically either side */
.overlay-face-group .overlay-smile-target {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.85);
  box-shadow: 0 0 12px rgba(108,99,255,.75);
  display: none;
}

.overlay-face-group .overlay-smile-target.left {
  /* left corner: 50% + ov-x - (face_width/2 * 0.3) */
  left: calc(50% + var(--ov-x, 0px) - calc(36% * var(--ov-scale, 1) * 0.28));
  top: calc(50% + var(--ov-y, 0px) + calc(58% * var(--ov-scale, 1) * 0.12));
  transform: translate(-50%, -50%);
}

.overlay-face-group .overlay-smile-target.right {
  left: calc(50% + var(--ov-x, 0px) + calc(36% * var(--ov-scale, 1) * 0.28));
  top: calc(50% + var(--ov-y, 0px) + calc(58% * var(--ov-scale, 1) * 0.12));
  transform: translate(-50%, -50%);
}

/* Hold ring: fixed corner, NOT in face group */
.overlay-hold-ring {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,.35);
  border-top-color: rgba(108,99,255,.95);
  box-shadow: 0 0 16px rgba(108,99,255,.5);
  animation: overlaySpin 1.4s linear infinite;
  display: none;
}

/* Grid lines: fill viewport, centred independently */
.overlay-grid-h1,
.overlay-grid-h2 {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255,255,255,.25);
  display: none;
}
.overlay-grid-h1 { top: 33.3%; }
.overlay-grid-h2 { top: 66.6%; }

.overlay-grid-v1,
.overlay-grid-v2 {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255,255,255,.25);
  display: none;
}
.overlay-grid-v1 { left: 33.3%; }
.overlay-grid-v2 { left: 66.6%; }

/* Zone anatomical lines */
.overlay-eyeline {
  position: absolute;
  top: 38%;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(108,255,180,.55);
  box-shadow: 0 0 6px rgba(108,255,180,.4);
  display: none;
}

.overlay-mouthline {
  position: absolute;
  top: 65%;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255,200,108,.55);
  box-shadow: 0 0 6px rgba(255,200,108,.4);
  display: none;
}

/* ── Overlay mode visibility ── */

/* Basic: centre line only */
.overlay-layer.overlay-basic .overlay-face-group .overlay-centre-line { display: block; }

/* Rehab: face frame + centre line */
.overlay-layer.overlay-rehab .overlay-face-group .overlay-centre-line,
.overlay-layer.overlay-rehab .overlay-face-group .overlay-face-frame { display: block; }

/* Full: everything in face group + hold ring */
.overlay-layer.overlay-full .overlay-face-group .overlay-centre-line,
.overlay-layer.overlay-full .overlay-face-group .overlay-face-frame,
.overlay-layer.overlay-full .overlay-face-group .overlay-smile-target,
.overlay-layer.overlay-full .overlay-hold-ring { display: block; }

/* Grid: rule of thirds + face frame + centre line */
.overlay-layer.overlay-grid .overlay-grid-h1,
.overlay-layer.overlay-grid .overlay-grid-h2,
.overlay-layer.overlay-grid .overlay-grid-v1,
.overlay-layer.overlay-grid .overlay-grid-v2,
.overlay-layer.overlay-grid .overlay-face-group .overlay-centre-line,
.overlay-layer.overlay-grid .overlay-face-group .overlay-face-frame { display: block; }

/* Zones: anatomical reference lines + face frame */
.overlay-layer.overlay-zones .overlay-eyeline,
.overlay-layer.overlay-zones .overlay-mouthline,
.overlay-layer.overlay-zones .overlay-face-group .overlay-centre-line,
.overlay-layer.overlay-zones .overlay-face-group .overlay-face-frame { display: block; }

/* ── Theme colours ── */
body.theme-dark .overlay-face-group .overlay-centre-line { background: rgba(143,137,255,.8); }
body.theme-dark .overlay-face-group .overlay-face-frame { border-color: rgba(143,137,255,.8); }
body.theme-dark .overlay-face-group .overlay-smile-target { border-color: rgba(143,137,255,.8); }
body.theme-dark .overlay-grid-h1,
body.theme-dark .overlay-grid-h2,
body.theme-dark .overlay-grid-v1,
body.theme-dark .overlay-grid-v2 { background: rgba(143,137,255,.3); }

body.theme-calm .overlay-face-group .overlay-centre-line { background: rgba(47,128,167,.65); }
body.theme-calm .overlay-face-group .overlay-face-frame { border-color: rgba(47,128,167,.8); }
body.theme-calm .overlay-eyeline { background: rgba(47,128,167,.6); }
body.theme-calm .overlay-mouthline { background: rgba(47,167,128,.6); }

/* ── Adjust controls widget ── */
.overlay-adjust-controls {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 100;
  display: flex;
  gap: 8px;
  align-items: center;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  border-radius: 12px;
  padding: 8px 10px;
  pointer-events: all;
  user-select: none;
  touch-action: manipulation;
}

.ov-adj-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.ov-adj-row {
  display: flex;
  gap: 3px;
  align-items: center;
}

.ov-adj-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
  padding: 0;
  line-height: 1;
}

.ov-adj-btn:hover,
.ov-adj-btn:active { background: rgba(108,99,255,.55); }

.ov-adj-reset { font-size: 12px; }

.ov-adj-label {
  color: rgba(255,255,255,.8);
  font-size: 11px;
  font-family: monospace;
  text-align: center;
  min-width: 34px;
}

@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .overlay-adjust-controls { bottom: 8px; left: 8px; padding: 6px 8px; }
  .ov-adj-btn { width: 36px; height: 36px; }
  .ov-auto-btn{
  font-size:18px !important;
  font-weight:800 !important;
  background:rgba(108,99,255,.35) !important;
}
  .overlay-face-group .overlay-face-frame { width: 160px; height: 210px; }
}

/* ============================================================
   v1.37 Overlay face-shape + fullscreen control clearance tune
   Safe append-only override. Does not alter base layout/menu/footer.
   ============================================================ */

/* Make the face frame narrower and more face-shaped on desktop/tablet. */
.overlay-face-group .overlay-face-frame{
  width:calc(28% * var(--ov-scale, 1)) !important;
  height:calc(60% * var(--ov-scale, 1)) !important;
  transform:translate(-50%, -58%) !important;
  border-radius:48% 48% 43% 43% !important;
}

/* Keep smile targets relative to the narrower face frame. */
.overlay-face-group .overlay-smile-target.left{
  left:calc(50% + var(--ov-x, 0px) - calc(28% * var(--ov-scale, 1) * 0.30)) !important;
  top:calc(50% + var(--ov-y, 0px) + calc(60% * var(--ov-scale, 1) * 0.12)) !important;
}

.overlay-face-group .overlay-smile-target.right{
  left:calc(50% + var(--ov-x, 0px) + calc(28% * var(--ov-scale, 1) * 0.30)) !important;
  top:calc(50% + var(--ov-y, 0px) + calc(60% * var(--ov-scale, 1) * 0.12)) !important;
}

/* Raise overlay adjustment controls so they clear the fullscreen docked rail. */
body.app-fullscreen.desktop-docked #overlayAdjustControls,
body.app-fullscreen .video-container.fullscreen #overlayAdjustControls{
  bottom:108px !important;
  z-index:7000 !important;
}

/* Mobile landscape keeps the face-frame aspect sensible and clears the rail. */
@media (max-width:950px) and (orientation:landscape){
  .overlay-face-group .overlay-face-frame{
    width:calc(24% * var(--ov-scale, 1)) !important;
    height:calc(68% * var(--ov-scale, 1)) !important;
  }

  .overlay-face-group .overlay-smile-target.left{
    left:calc(50% + var(--ov-x, 0px) - calc(24% * var(--ov-scale, 1) * 0.30)) !important;
    top:calc(50% + var(--ov-y, 0px) + calc(68% * var(--ov-scale, 1) * 0.12)) !important;
  }

  .overlay-face-group .overlay-smile-target.right{
    left:calc(50% + var(--ov-x, 0px) + calc(24% * var(--ov-scale, 1) * 0.30)) !important;
    top:calc(50% + var(--ov-y, 0px) + calc(68% * var(--ov-scale, 1) * 0.12)) !important;
  }

  body.app-fullscreen #overlayAdjustControls{
    bottom:88px !important;
    transform:scale(.82) !important;
    transform-origin:left bottom !important;
  }
}

/* Mobile portrait: preserve the known-good sizing but make the oval less wide. */
@media (max-width:900px) and (orientation:portrait){
  .overlay-face-group .overlay-face-frame{
    width:140px !important;
    height:215px !important;
  }

  .overlay-face-group .overlay-smile-target.left{
    left:calc(50% + var(--ov-x, 0px) - 42px) !important;
    top:calc(50% + var(--ov-y, 0px) + 28px) !important;
  }

  .overlay-face-group .overlay-smile-target.right{
    left:calc(50% + var(--ov-x, 0px) + 42px) !important;
    top:calc(50% + var(--ov-y, 0px) + 28px) !important;
  }

  body.app-fullscreen #overlayAdjustControls{
    bottom:104px !important;
    transform:scale(.9) !important;
    transform-origin:left bottom !important;
  }
}

.routine-info-card{
margin-top:12px;
padding:14px;
border-radius:16px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.12);
backdrop-filter:blur(10px);
}

.routine-category{
font-size:12px;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
opacity:.72;
margin-bottom:6px;
}

.routine-info-card h3{
margin:0 0 8px;
font-size:20px;
}

.routine-meta{
display:flex;
gap:10px;
font-size:13px;
opacity:.8;
margin-bottom:10px;
}

.routine-description{
line-height:1.5;
opacity:.92;
}

.routine-encouragement{
margin-top:10px;
padding:10px;
border-radius:12px;
background:rgba(108,99,255,.12);
font-size:14px;
line-height:1.5;
}

/* v1.61 restore routine instruction overlay readability */

.exercise-overlay{
  min-width:min(88vw,680px) !important;
  max-width:min(92vw,760px) !important;
  padding:18px 76px 18px 20px !important;
  border-radius:18px !important;
}

.exercise-phase{
  font-size:15px !important;
  letter-spacing:.08em;
}

.exercise-text{
  font-size:22px !important;
  line-height:1.35 !important;
}

.exercise-timer{
  font-size:30px !important;
  min-width:54px;
}

@media(max-width:900px){
  .exercise-overlay{
    min-width:min(92vw,620px) !important;
    padding:14px 58px 14px 16px !important;
  }

  .exercise-text{
    font-size:18px !important;
  }

  .exercise-timer{
    font-size:24px !important;
  }
}

@media(max-width:950px) and (orientation:landscape){
  .exercise-overlay{
    min-width:min(76vw,620px) !important;
    max-width:min(82vw,660px) !important;
    padding:8px 52px 8px 12px !important;
  }

  .exercise-phase{
    font-size:12px !important;
  }

  .exercise-text{
    font-size:16px !important;
    line-height:1.25 !important;
  }

  .exercise-timer{
    font-size:22px !important;
  }
}

/* v1.72 restore mobile overlay controls above bottom rail */

@media (max-width:900px),(hover:none) and (pointer:coarse){
  #overlayAdjustControls{
    bottom:104px !important;
    z-index:9000 !important;
  }

  body.app-fullscreen #overlayAdjustControls{
    bottom:116px !important;
    z-index:9000 !important;
  }
}

@media (max-width:950px) and (orientation:landscape){
  #overlayAdjustControls{
    bottom:96px !important;
    z-index:9000 !important;
  }

  body.app-fullscreen #overlayAdjustControls{
    bottom:104px !important;
    z-index:9000 !important;
  }
}

/* v1.73 Manual Mobile Rail Minimise */

.rail-restore-tab{
  display:none;
}

@media (max-width:900px),(hover:none) and (pointer:coarse){

  .rail-hide-btn{
    min-width:112px !important;
    background:var(--primary-dark) !important;
  }

  body.mobile-rail-hidden .mobile-action-rail{
    transform:translateY(120%) !important;
    opacity:0 !important;
    pointer-events:none !important;
  }

  .mobile-action-rail{
    transition:transform .22s ease, opacity .22s ease;
  }

  .rail-restore-tab{
    position:fixed;
    left:50%;
    bottom:calc(12px + env(safe-area-inset-bottom,0px));
    transform:translateX(-50%);
    z-index:9200;
    display:none;
    border:none;
    border-radius:999px;
    padding:10px 16px;
    background:var(--primary);
    color:#fff;
    font-weight:bold;
    font-size:14px;
    box-shadow:0 8px 22px rgba(0,0,0,.25);
  }

  body.mobile-rail-hidden .rail-restore-tab{
    display:block;
  }

  body.mobile-rail-hidden #controlPanel{
    display:none !important;
  }
}