/* Liquid Glass v2 — runtime-safe visual layer on top of the restored functional shell.
   Visual only: no board/menu/data/training logic is changed. */
:root{
  --lg-runtime:2;
  --lg-red:#d9132a;
  --lg-red-hot:#f12a42;
  --lg-red-deep:#9b071b;
  --lg-ink:#181315;
  --lg-muted:#70666a;
  --lg-edge:rgba(255,255,255,.92);
  --lg-edge-soft:rgba(255,255,255,.58);
  --lg-glass-a:rgba(255,255,255,.30);
  --lg-glass-b:rgba(255,255,255,.10);
  --lg-shadow:0 26px 64px rgba(52,13,27,.22),0 8px 22px rgba(83,19,39,.12);
  --lg-inset:inset 0 1.4px 0 rgba(255,255,255,.98),inset 0 -1px 0 rgba(255,255,255,.28),inset 1px 0 0 rgba(255,255,255,.38),inset -1px 0 0 rgba(255,255,255,.15);
  --red:var(--lg-red);--redDeep:var(--lg-red-deep);--ink:var(--lg-ink);--muted:var(--lg-muted);
  --surface:rgba(255,255,255,.20);--line:rgba(255,255,255,.46);--bg:#eee5e7;
  color-scheme:light;
}
html[data-ui="liquid-glass-v2"]{min-height:100%;background:#d5c9cd!important}
html[data-ui="liquid-glass-v2"] body{
  position:relative;
  min-height:100vh;
  overflow-x:hidden;
  background:linear-gradient(180deg,#f5eff1 0%,#eee5e8 24%,#d9c8ce 54%,#8d1730 82%,#4b0d1b 100%)!important;
  color:var(--lg-ink);
}
/* Real DOM backdrop instead of negative-z pseudo elements. This is intentionally
   inside the same visual stack as the glass cards so Safari/iOS can blur it. */
.app-atmosphere{
  position:fixed;z-index:0;inset:0;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(ellipse at 7% 9%,rgba(255,255,255,.98) 0 1.2%,rgba(255,255,255,.58) 2%,transparent 8%),
    radial-gradient(ellipse at 27% 7%,rgba(255,255,255,.95) 0 1%,rgba(255,255,255,.48) 1.9%,transparent 7%),
    radial-gradient(ellipse at 70% 8%,rgba(255,255,255,.98) 0 1.2%,rgba(255,255,255,.55) 2%,transparent 8%),
    radial-gradient(ellipse at 92% 12%,rgba(255,255,255,.98) 0 1.1%,rgba(255,255,255,.48) 1.9%,transparent 8%),
    repeating-linear-gradient(166deg,transparent 0 46px,rgba(255,255,255,.18) 47px 49px,transparent 50px 94px),
    linear-gradient(160deg,rgba(255,255,255,.75) 0%,rgba(255,255,255,.30) 30%,rgba(193,22,50,.18) 61%,rgba(94,3,24,.48) 100%);
}
.app-atmosphere::before{
  content:"";position:absolute;inset:-18% -24% -20% 12%;
  background:url("./hero-fina-11.svg") 88% 19%/auto 124% no-repeat;
  filter:blur(26px) saturate(1.28) contrast(1.04);
  opacity:.23;transform:scale(1.16);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.86) 55%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.86) 55%,transparent 100%);
}
.app-atmosphere::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 84% 24%,rgba(255,255,255,.90),transparent 10%),
    radial-gradient(circle at 78% 47%,rgba(255,42,70,.38),transparent 21%),
    radial-gradient(circle at 20% 62%,rgba(255,255,255,.32),transparent 28%),
    linear-gradient(112deg,rgba(255,255,255,.48),transparent 31% 62%,rgba(202,13,43,.23));
  mix-blend-mode:screen;opacity:.88;
}
.screen{position:relative;z-index:1;background:transparent!important;padding-bottom:116px}
.mockup-brand,.brand-mark{display:none!important}
.mockup-topbar{justify-content:flex-end!important;min-height:58px!important;padding:calc(11px + env(safe-area-inset-top)) 17px 0!important}
.top-actions{margin-left:auto!important;display:flex;gap:10px;align-items:center}
.greeting{padding:15px 4px 15px!important}
.greeting h1{font-size:clamp(32px,8vw,39px)!important;letter-spacing:-.038em;color:#171214!important}
.greeting p{color:#62595d!important;font-size:16px!important}

/* Shared high-gloss glass material. */
/* .exercise-dialog-card, .stopwatch-card, .exercise-stopwatch-panel and
   .stopwatch-mini are intentionally excluded from this group: their
   translucent glass background made dark text unreadable against the dark
   stadium backdrop, so they keep the solid, opaque backgrounds defined in
   exercise-popups.css/stopwatch.css instead. */
.week-card,.phase-card,.card,.day-exercise,.rest-detail,.training-flow-step,.training-actuals-card,
.an-card,.prompt,.flow-switch,.subnav,.bottom,.streak,.refresh-plan,.mini-back,
.actual-toggle,.actuals-toggle,.actual-checkin-edit,.hero.test{
  border:1px solid var(--lg-edge)!important;
  background:
    radial-gradient(circle at 16% -18%,rgba(255,255,255,.95),rgba(255,255,255,.38) 24%,transparent 48%),
    linear-gradient(137deg,rgba(255,255,255,.48) 0%,rgba(255,255,255,.18) 37%,rgba(255,255,255,.07) 66%,rgba(255,255,255,.20) 100%)!important;
  box-shadow:var(--lg-shadow),0 0 0 .5px rgba(255,255,255,.30),var(--lg-inset)!important;
  backdrop-filter:blur(34px) saturate(1.48) brightness(1.07)!important;
  -webkit-backdrop-filter:blur(34px) saturate(1.48) brightness(1.07)!important;
}
/* Cards need position:relative as an anchor for their ::before shine overlay.
   .actual-toggle/.actuals-toggle must stay position:absolute (set in
   training-actuals.css) to sit in a fixed card corner, and .stopwatch-mini
   must stay position:fixed (set in stopwatch.css) to float above the app —
   folding them into the shared position:relative above silently broke both. */
.week-card,.phase-card,.card,.day-exercise,.rest-detail,.training-flow-step,.training-actuals-card,
.stopwatch-card,.an-card,.exercise-dialog-card,.prompt,.flow-switch,.subnav,.bottom,.streak,.refresh-plan,.mini-back,
.actual-checkin-edit,.exercise-stopwatch-panel,.hero.test{
  position:relative;
}
.week-card,.phase-card{border-radius:31px!important}
.card,.day-exercise,.rest-detail,.training-flow-step,.training-actuals-card,.an-card,.prompt,.hero.test{border-radius:28px!important}
.stopwatch-card,.exercise-dialog-card{border-radius:32px!important}
.week-card,.phase-card,.card,.day-exercise,.training-flow-step,.training-actuals-card,.stopwatch-card,.an-card,.prompt,.hero.test{overflow:hidden}
.week-card::before,.phase-card::before,.card::before,.day-exercise::before,.training-flow-step::before,.training-actuals-card::before,.stopwatch-card::before,.an-card::before,.prompt::before,.hero.test::before{
  content:"";position:absolute;pointer-events:none;z-index:0;
  left:-20%;top:-34%;width:78%;height:88%;transform:rotate(-14deg);
  background:linear-gradient(112deg,transparent 8%,rgba(255,255,255,.10) 20%,rgba(255,255,255,.88) 37%,rgba(255,255,255,.22) 53%,transparent 76%);
  filter:blur(3px);opacity:.83;mix-blend-mode:screen;
}
.week-card>* ,.phase-card>* ,.card>* ,.day-exercise>*:not(.actual-toggle) ,.training-flow-step>* ,.training-actuals-card>* ,.stopwatch-card>* ,.an-card>* ,.prompt>* ,.hero.test>*{position:relative;z-index:1}
/* .actual-toggle is a direct child of .day-exercise too (prepended by
   training-actuals.js), but it must keep its own position:absolute corner
   placement instead of joining its siblings' position:relative stacking. */
.day-exercise>.actual-toggle{z-index:1}

.streak,.refresh-plan,.mini-back{
  border-radius:22px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.56),rgba(255,255,255,.16))!important;
  box-shadow:0 14px 34px rgba(47,14,25,.14),0 0 0 .5px rgba(255,255,255,.32),var(--lg-inset)!important;
}
.streak{min-height:42px!important;padding:8px 15px!important;color:var(--lg-red)!important}
.streak::after{color:#645a5f!important}
.refresh-plan{width:42px!important;height:42px!important;color:#40383c!important}

/* Hero: single transparent tile, same stadium behind it, player pinned to right edge. */
.next-card{
  position:relative;overflow:hidden;min-height:374px!important;padding:21px 18px 76px!important;border-radius:32px!important;
  border:1px solid rgba(255,255,255,.98)!important;
  background:
    radial-gradient(circle at 14% -12%,rgba(255,255,255,.98),rgba(255,255,255,.52) 22%,transparent 44%),
    linear-gradient(126deg,rgba(255,255,255,.49) 0%,rgba(255,255,255,.25) 38%,rgba(255,255,255,.07) 71%,rgba(255,255,255,.10) 100%)!important;
  box-shadow:0 30px 70px rgba(55,13,29,.24),0 8px 20px rgba(106,16,42,.12),0 0 0 1px rgba(255,255,255,.22),inset 0 1.5px 0 #fff,inset 0 -1px 0 rgba(255,255,255,.34),inset 18px 0 40px rgba(255,255,255,.14)!important;
  backdrop-filter:blur(29px) saturate(1.50) brightness(1.06)!important;
  -webkit-backdrop-filter:blur(29px) saturate(1.50) brightness(1.06)!important;
}
.next-card::before{
  content:"";position:absolute;z-index:0;inset:0;pointer-events:none;
  background:
    linear-gradient(108deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.62) 18%,rgba(255,255,255,.20) 42%,transparent 63%),
    linear-gradient(165deg,transparent 0 38%,rgba(255,255,255,.36) 39%,rgba(255,255,255,.08) 45%,transparent 54%),
    radial-gradient(circle at 86% 10%,rgba(255,255,255,.98),transparent 8%),
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(182,12,42,.10));
  mix-blend-mode:screen;
}
.next-card::after{
  content:"";position:absolute;z-index:1;top:-6%;bottom:-6%;right:-38px;width:55%;pointer-events:none;
  background:url("./hero-fina-11.svg") right center/auto 116% no-repeat;
  filter:drop-shadow(-15px 14px 22px rgba(48,11,24,.18));opacity:1;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 15%,rgba(0,0,0,.64) 34%,#000 50%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 15%,rgba(0,0,0,.64) 34%,#000 50%);
}
.next-card>*{position:relative;z-index:3}
.next-card .next-label{color:var(--lg-red)!important;text-shadow:0 1px 0 rgba(255,255,255,.62)}
.next-date-nav,.session-title,.next-meta{width:min(65%,294px)!important}
.session-title{color:var(--lg-red)!important;font-size:clamp(23px,5.9vw,28px)!important;text-shadow:0 1px 0 rgba(255,255,255,.52)}
.next-meta{color:#5b5156!important;border-top-color:rgba(255,255,255,.62)!important}
.next-date-button,.next-arrow{color:#2d2529!important}
.next-arrow{border-color:rgba(255,255,255,.72)!important;background:rgba(255,255,255,.16)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.74)!important}
.hero-view,.hero-start,.hero-complete{width:min(70%,322px)!important}
.hero-start{
  min-height:56px!important;border-radius:26px!important;border:1px solid rgba(255,255,255,.76)!important;
  background:linear-gradient(145deg,#f32942 0%,#d20e29 65%,#ae071d 100%)!important;color:#fff!important;
  box-shadow:0 16px 32px rgba(181,4,27,.29),inset 0 1px 0 rgba(255,255,255,.62),inset 0 -1px 0 rgba(92,0,14,.24)!important;
}
.hero-view{color:#292125!important;background:rgba(255,255,255,.20)!important;border-color:rgba(255,255,255,.74)!important;backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important}
.mockup-section-head .text-link{
  border:1px solid rgba(255,255,255,.91)!important;border-radius:24px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.52),rgba(255,255,255,.14))!important;
  box-shadow:0 15px 34px rgba(50,14,27,.14),0 0 0 .5px rgba(255,255,255,.28),var(--lg-inset)!important;
  backdrop-filter:blur(29px) saturate(1.42)!important;-webkit-backdrop-filter:blur(29px) saturate(1.42)!important;
}

.week-strip{border-radius:23px!important;background:rgba(255,255,255,.08)!important;padding:6px 3px 11px!important}
.week-day{border-radius:18px!important}
.week-day.selected,.week-day.today{background:rgba(255,255,255,.14)!important}
.week-day.today span,.week-day.selected span{background:var(--lg-red)!important;color:#fff!important;box-shadow:0 9px 20px rgba(217,19,42,.30),inset 0 1px 0 rgba(255,255,255,.38)!important}
.week-legend{opacity:.82}
.metrics{border-top:1px solid rgba(255,255,255,.61)!important}
.metrics>div{border-right:1px solid rgba(255,255,255,.56)!important}
.phase-pill,.phase-ring{background:rgba(255,255,255,.19)!important;border-color:rgba(255,255,255,.68)!important;color:var(--lg-red)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.72)!important}

.flow-switch,.subnav{border-radius:25px!important;padding:5px!important}
.flow-tab.active,.subnav-tab.active{background:rgba(255,255,255,.52)!important;color:var(--lg-red)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.90),0 7px 16px rgba(55,18,30,.11)!important}
.choice2 button,.choice3 button,.choice4 button,.grid5 button,.rpe button,.input,.training-actuals-card select,.training-actuals-card textarea,.stopwatch-controls button{
  border:1px solid rgba(255,255,255,.78)!important;background:rgba(255,255,255,.25)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.62)!important;backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px)!important;
}
.choice2 button.sel,.choice3 button.sel,.choice4 button.sel,.grid5 button.sel,.rpe button.sel{background:rgba(217,19,42,.15)!important;border-color:rgba(217,19,42,.36)!important;color:var(--lg-red-deep)!important}
.button,.stopwatch-controls .stopwatch-primary,.training-flow-step button{background:linear-gradient(145deg,#f12740,#c90a24)!important;border:1px solid rgba(255,255,255,.62)!important;box-shadow:0 14px 28px rgba(182,4,28,.24),inset 0 1px 0 rgba(255,255,255,.48)!important;color:#fff!important}
.hero.test{color:var(--lg-ink)!important}
.hero.test .badge{background:rgba(255,255,255,.58)!important;color:var(--lg-red)!important;border:1px solid rgba(255,255,255,.76)!important}

.bottom{
  z-index:100!important;left:50%!important;bottom:max(10px,env(safe-area-inset-bottom))!important;width:min(544px,calc(100% - 18px))!important;padding:9px 7px 10px!important;border-radius:32px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.52),rgba(255,255,255,.16))!important;
  box-shadow:0 24px 54px rgba(44,12,24,.24),0 0 0 .5px rgba(255,255,255,.34),inset 0 1.5px 0 rgba(255,255,255,.98),inset 0 -1px 0 rgba(255,255,255,.20)!important;
  backdrop-filter:blur(34px) saturate(1.5)!important;-webkit-backdrop-filter:blur(34px) saturate(1.5)!important;
}
.nav{color:#5d5458!important}.nav.active{color:var(--lg-red)!important}.nav.active::after{background:var(--lg-red)!important}

@media(max-width:430px){
  .mockup-home{padding:0 14px!important}
  .next-card{min-height:366px!important}
  .next-card::after{width:56%;right:-44px;background-size:auto 116%!important}
  .next-date-nav,.session-title,.next-meta{width:64%!important}
  .hero-view,.hero-start,.hero-complete{width:69%!important}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .week-card,.phase-card,.card,.day-exercise,.rest-detail,.training-flow-step,.training-actuals-card,.stopwatch-card,.an-card,.exercise-dialog-card,.prompt,.flow-switch,.subnav,.bottom,.streak,.refresh-plan,.mini-back,.hero.test{background:rgba(255,255,255,.86)!important}
}