
.v21-new-profile{width:100%;min-height:54px;margin:16px 0 28px;font-size:16px}
#newProfileScreen.hidden{display:none!important}
#onboardingProfile .screen{padding-bottom:48px}
.drag-list .drag-item{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:pan-y}
.drag-list .drag-source{outline:2px dashed #b4f636!important}
.drag-ghost-v21{background:#1e282a!important;border:2px solid #a8f734!important;border-radius:20px!important;box-shadow:0 18px 55px rgba(0,0,0,.6);opacity:.98;overflow:hidden;box-sizing:border-box}
.drag-list .drag-target{outline:2px solid rgba(177,248,52,.75);box-shadow:inset 0 0 15px rgba(177,248,52,.14)}
.home-actions button.secondary{background:#29343b!important;color:#f5f7f7!important;border-color:#46535c!important}
.v21-exercise-timer{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;margin:clamp(14px,3vh,24px) auto 0;width:100%}
.v21-clock{height:clamp(176px,25vh,226px);width:clamp(176px,25vh,226px);aspect-ratio:1;border-radius:50%;border:2px solid rgba(255,255,255,.37);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;color:#091008!important;font-weight:800;cursor:pointer;flex-shrink:0;box-shadow:inset 0 5px 13px rgba(255,255,255,.48),inset 0 -13px 22px rgba(0,0,0,.24),0 10px 25px rgba(0,0,0,.43);text-shadow:0 1px 0 rgba(255,255,255,.14);transition:background .25s,box-shadow .25s,transform .18s}
.v21-clock:active{transform:scale(.975)}
.v21-clock.is-off{background:radial-gradient(circle at 35% 22%,#d1ff75 0%,#aafa25 35%,#70d00e 80%,#42880b 100%);box-shadow:inset 0 6px 14px rgba(255,255,255,.48),inset 0 -12px 20px rgba(0,0,0,.18),0 0 28px rgba(156,240,40,.19),0 13px 25px rgba(0,0,0,.36)}
.v21-clock.is-on{background:radial-gradient(circle at 35% 22%,#ff9c91 0%,#ff5b51 35%,#db2926 80%,#91191c 100%);color:#fff!important;box-shadow:inset 0 5px 13px rgba(255,255,255,.39),inset 0 -13px 20px rgba(0,0,0,.18),0 0 25px rgba(242,55,55,.14),0 13px 25px rgba(0,0,0,.36)}
.v21-clock-label{font-size:clamp(17px,4.7vw,21px);font-weight:850;line-height:1.12}
.v21-clock strong{font-size:clamp(48px,13vw,68px);font-variant-numeric:tabular-nums;letter-spacing:-2px;line-height:1}
.v21-set-action{width:min(93%,360px);min-height:46px;border-radius:15px;background:#26383f;color:#f5fcfa;border:1px solid #50656a;font-weight:800;font-size:16px}
.v21-stop-set{background:#58312f;border-color:#ae5a58}
.v21-rest-line{text-align:center;font-size:13px;color:#b6c9cb;min-height:24px}
.v21-rest-line b{color:#b4ff40}
@media(max-height:740px){.v21-clock{width:166px;height:166px;gap:8px}.v21-clock strong{font-size:49px}.v21-clock-label{font-size:17px}.v21-exercise-timer{margin-top:8px}.v21-set-action{min-height:42px}}

/* Profile chooser: two compact pages with native horizontal swipe. */
body.iron-profile-open{height:100dvh;overflow:hidden!important}
body.iron-profile-open .app{height:100dvh;min-height:0;overflow:hidden}
body.iron-profile-open #appShell.hidden{display:none!important}
body.iron-profile-open #appShell>.nav{display:none!important}
body.iron-profile-open #onboardingProfile:not(.hidden){
 display:flex;flex-direction:column;height:100dvh;min-height:0;overflow:hidden;
 box-sizing:border-box;padding-bottom:env(safe-area-inset-bottom,0px);
}
#onboardingProfile>.header{flex:0 0 auto;padding:8px 12px}
#onboardingProfile>.header .mark{width:36px;height:36px;border-radius:12px}
#onboardingProfile>.header .logo{font-size:19px}
#onboardingProfile .screen.profile-carousel{
 display:flex;flex:1 1 auto;min-height:0;width:100%;padding:0!important;
 overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
 scrollbar-width:none;overscroll-behavior-x:contain;
}
#profileCarousel::-webkit-scrollbar{display:none}
#profileCarousel>.profile-page{
 flex:0 0 100%;width:100%;min-width:0;min-height:0;box-sizing:border-box;
 padding:8px 13px;scroll-snap-align:start;scroll-snap-stop:always;
 display:flex;flex-direction:column;gap:10px;overflow-y:auto;
}
#profileListPage>.hero{
 flex:0 0 auto;padding:14px 17px!important;margin:0!important;border-radius:22px!important;
}
#profileListPage>.hero .h1{font-size:clamp(23px,5.7vw,29px);margin:6px 0}
#profileListPage>.hero .eyebrow{font-size:10px}
#profileListPage>.hero .subtle{font-size:14px;line-height:1.35;margin:6px 0 0}
#profileGrid{
 display:flex;flex-direction:column;gap:10px;min-height:0;flex:1 1 auto;
 overflow-y:auto;overscroll-behavior-y:contain;
}
#profileGrid>.profile-card{
 flex:1 0 auto;box-sizing:border-box;min-height:140px;
 max-height:190px;padding:14px 16px!important;border-radius:22px!important;
 display:flex;flex-direction:column;justify-content:space-between;
}
#profileGrid .avatar{width:46px;height:46px;min-width:46px;font-size:24px;border-radius:15px}
#profileGrid .h3{font-size:18px}
#profileGrid .smalltxt{font-size:12px;line-height:1.3}
#profileGrid .badge{font-size:11px;padding:5px 9px}
#profileGrid button{min-height:42px;padding:8px 13px!important;font-size:14px}
#profileListPage>.v21-new-profile{display:none!important}
#newProfileScreen{width:100%;box-sizing:border-box;margin:0;padding:18px!important}
#onboardingProfile .profile-carousel-nav{
 display:flex;align-items:center;justify-content:center;gap:12px;
 flex:0 0 auto;padding:6px 12px 10px;color:#aab5ad;font-size:13px;
}
.profile-carousel-nav button{background:transparent;color:inherit;padding:8px;min-height:36px;font-size:13px}
@media(max-height:650px){
 #onboardingProfile>.header{padding:5px 12px}
 #profileCarousel>.profile-page{gap:7px;padding:6px 12px}
 #profileListPage>.hero{padding:10px 14px!important}
 #profileListPage>.hero .h1{font-size:23px}
 #profileListPage>.hero .subtle{font-size:12px}
 #profileGrid>.profile-card{min-height:128px;max-height:160px;padding:11px 13px!important}
 #profileGrid>.profile-card>.row{margin-top:5px!important}
 #profileGrid .badge{padding:3px 7px}
 #onboardingProfile .profile-carousel-nav{padding:2px 10px 4px}
}
