/* NEW LOOK: flat, bordered, compact (loaded after app.css). Remove the <link> in index.html to go back. */
:root{
  --display:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r-sm:6px; --r:8px; --r-lg:10px; --r-xl:14px;
  --t-page:clamp(24px,1.4vw + 14px,30px); --t-section:16px; --t-card:15px; --t-body:14px; --t-small:13px; --t-label:12.5px; --t-metric:clamp(26px,1.2vw + 14px,32px);
  --sidebar:248px; --topbar:56px; --card-pad:20px;
  --noise:0; --glow-1:transparent; --glow-2:transparent;
}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#FAFAFA; --inset:#F4F4F5;
  --line:#E7E7E9; --line-2:#E4E4E7; --line-3:#D4D4D8;
  --shadow-1:0 1px 2px rgba(0,0,0,.04); --topbar-bg:rgba(255,255,255,.9);
  --side-bg:#FAFAFA; --side-text:#18181B; --side-text-2:#52525B; --side-line:#E7E7E9; --side-hover:#F0F0F1; --side-active:#EDEDEF; --side-accent:#0A0A0A;
}}
:root[data-theme="light"]{
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#FAFAFA; --inset:#F4F4F5;
  --line:#E7E7E9; --line-2:#E4E4E7; --line-3:#D4D4D8;
  --shadow-1:0 1px 2px rgba(0,0,0,.04); --topbar-bg:rgba(255,255,255,.9);
  --side-bg:#FAFAFA; --side-text:#18181B; --side-text-2:#52525B; --side-line:#E7E7E9; --side-hover:#F0F0F1; --side-active:#EDEDEF; --side-accent:#0A0A0A;
}
:root[data-theme="dark"]{--bg:#0A0A0B;--surface:#0F0F10;--surface-2:#141415;--side-bg:#0C0C0D;--shadow-1:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0A0A0B;--surface:#0F0F10;--surface-2:#141415;--side-bg:#0C0C0D;--shadow-1:none}}

/* type: one clean sans everywhere */
.h-page,.h-section,.t-metric,.brand b{font-family:var(--ui)}
.h-page{font-weight:650;letter-spacing:-.025em}
.h-section{font-weight:600;letter-spacing:-.012em}
.t-label{text-transform:none;letter-spacing:0;font-weight:500;font-size:var(--t-label);color:var(--text-2)}
.t-metric{font-weight:650;letter-spacing:-.03em}
.eyebrow{display:none}

/* shell */
.side{padding:var(--s4) var(--s3);gap:2px}
.brand{padding:4px 8px 16px}
.nav-title{letter-spacing:0;text-transform:none;font-weight:500;font-size:12px;color:var(--side-text-2);opacity:.85;padding:14px 10px 6px;display:block}
.nav-link{padding:7px 10px;font-size:14px;border-radius:var(--r-sm);gap:10px}
.nav-link[aria-current="page"]{font-weight:600}
.nav-link[aria-current="page"]::before{display:none}
.nav-link[aria-current="page"] .icon{color:var(--side-text)}
.nav-link .count{background:var(--primary);color:var(--on-primary);padding:3px 7px}
.topbar{border-bottom:1px solid var(--line)}
.side-foot{border-top:1px solid var(--side-line)}

/* cards */
.card{border-radius:var(--r-lg);border-color:var(--line-2);box-shadow:var(--shadow-1)}
.card.link:hover{transform:none;border-color:var(--line-3);background:var(--surface-2)}
.card.glow{background:var(--surface);border-color:var(--line-3);box-shadow:inset 3px 0 0 var(--yellow)}
.card-head{margin-bottom:var(--s4)}
.metric{gap:6px}
.metric .mh{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--text-2)}
.metric .mh .icon{width:16px;height:16px;opacity:.7}
.metric .foot{font-size:12.5px}
.delta{display:inline-flex;align-items:center;gap:3px;padding:1px 7px;border-radius:99px;font-weight:600;font-size:12px;background:var(--inset)}
.delta.good{color:var(--success);background:var(--success-soft)} .delta.bad{color:var(--error);background:var(--error-soft)}

/* controls */
.btn{height:36px;padding:0 14px;border-radius:var(--r);font-size:14px;font-weight:550;background:var(--surface);box-shadow:var(--shadow-1)}
.btn:hover{background:var(--hover-2)}
.btn.primary{background:var(--primary);box-shadow:none}
.btn.primary:hover{background:var(--primary-hover);filter:none}
.btn.quiet{background:transparent;box-shadow:none;border-color:transparent}
.btn.sm{height:30px;padding:0 10px;font-size:13px}
.tabs,.seg{border-radius:var(--r);background:var(--inset);border-color:transparent;padding:3px}
.tabs a{height:30px;border-radius:var(--r-sm);font-size:13.5px}
.tabs a[aria-selected="true"],.seg label:has(input:checked),.seg button[aria-pressed="true"]{background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.08);border:0}
.seg label,.seg button{padding:5px 12px;border-radius:var(--r-sm);font-size:13.5px}
input:not([type=checkbox]):not([type=radio]),select,textarea{border-radius:var(--r)}
.badge{height:22px;font-size:12px}
.alert{border-radius:var(--r);font-size:13.5px;padding:12px 14px}
.list-item:hover{background:var(--surface-2)}
@media (max-width:900px){:root{--card-pad:16px}}

/* ================= GLASS BUTTONS (plain CSS, every button) ================= */
.btn,.logfinish{position:relative;isolation:isolate;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s}
.btn::after,.logfinish::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.34) 48%,transparent 62%);transform:translateX(-60%);transition:transform .6s var(--ease)}
.btn:hover::after,.logfinish:hover::after{transform:translateX(60%)}
.btn:active{transform:scale(.97)}
/* light: frosted white / black glass */
:root:not([data-theme="dark"]) .btn{background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(244,244,245,.7));border-color:rgba(10,10,10,.14);
  box-shadow:inset 0 1px 1px #fff,inset 0 -2px 3px rgba(10,10,10,.06),0 6px 14px -8px rgba(10,10,10,.28)}
:root:not([data-theme="dark"]) .btn.primary{background:linear-gradient(180deg,#3a3a3d,#0A0A0A);color:#fff;border-color:#0A0A0A;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.35),inset 0 -2px 3px rgba(0,0,0,.4),0 10px 20px -10px rgba(10,10,10,.65)}
:root:not([data-theme="dark"]) .btn.primary .icon{color:var(--yellow)}
/* dark: translucent glass, yellow primary */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border-color:rgba(255,255,255,.18);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.28),inset 0 -2px 3px rgba(0,0,0,.35),0 8px 18px -12px #000;backdrop-filter:blur(6px)}
:root:not([data-theme="light"]) .btn.primary{background:linear-gradient(180deg,rgba(248,248,16,.5),rgba(248,248,16,.2));color:#fff;border-color:rgba(248,248,16,.55);text-shadow:0 1px 2px rgba(0,0,0,.5);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.5),inset 0 -2px 3px rgba(0,0,0,.3),0 10px 24px -10px rgba(248,248,16,.55)}}
:root[data-theme="dark"] .btn{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border-color:rgba(255,255,255,.18);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.28),inset 0 -2px 3px rgba(0,0,0,.35),0 8px 18px -12px #000;backdrop-filter:blur(6px)}
:root[data-theme="dark"] .btn.primary{background:linear-gradient(180deg,rgba(248,248,16,.5),rgba(248,248,16,.2));color:#fff;border-color:rgba(248,248,16,.55);text-shadow:0 1px 2px rgba(0,0,0,.5);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.5),inset 0 -2px 3px rgba(0,0,0,.3),0 10px 24px -10px rgba(248,248,16,.55)}
.btn.quiet,.btn.icon-only.quiet{background:transparent!important;box-shadow:none!important;border-color:transparent!important;backdrop-filter:none!important}
.btn.quiet::after{display:none}
.side .btn.primary,.side-foot .btn{height:40px}

/* ================= SESSION SCREEN: one exercise per card, big set rows ================= */
.logprog{height:4px;background:var(--line-2)}
.logprog i{background:var(--yellow);border-radius:0 4px 4px 0}
.logtop{background:var(--bg)}
.logfinish{min-height:38px;padding:0 18px;border-radius:99px;color:#fff;font-weight:650;border:1px solid rgba(248,248,16,.5);
  background:linear-gradient(180deg,rgba(248,248,16,.5),rgba(248,248,16,.2));text-shadow:0 1px 2px rgba(0,0,0,.45);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.5),0 8px 18px -10px rgba(248,248,16,.6)}
:root:not([data-theme="dark"]) .logfinish{color:#fff;border-color:#0A0A0A;background:linear-gradient(180deg,#3a3a3d,#0A0A0A);box-shadow:inset 0 1px 1px rgba(255,255,255,.3),0 8px 16px -10px rgba(10,10,10,.6)}
:root[data-theme="dark"] .logfinish{color:#fff}
.exlog{padding:16px;border-radius:var(--r-xl);border-color:var(--line-2);gap:12px}
.exlog .exname-t,.exlog h3{font-size:20px;font-weight:700;letter-spacing:-.02em}
.exlog .num-badge{border-radius:99px;background:var(--yellow);color:#000;width:28px;height:28px;font:700 13px/1 var(--ui)}
.setrow{grid-template-columns:30px minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr) 50px;gap:8px;padding:8px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line)}
.setrow.head{background:none;border:0;padding:0 8px}
.setrow .i{width:28px;height:28px;border-radius:99px;display:grid;place-items:center;background:var(--hover-2);font:650 13px/1 var(--ui);color:var(--text)}
.setrow input{height:46px;border-radius:12px;font:700 18px/1 var(--ui)}
.setrow.done{background:var(--success-soft);border-color:color-mix(in srgb,var(--success) 40%,transparent)}
.setrow.done .i{background:color-mix(in srgb,var(--success) 30%,transparent)}
.tick{width:50px;height:46px;border-radius:12px}
.tick[aria-pressed="true"]{background:linear-gradient(180deg,color-mix(in srgb,var(--success) 85%,#fff),var(--success));box-shadow:inset 0 1px 1px rgba(255,255,255,.5)}
.setbtns .btn{height:36px}
@media (max-width:520px){.exlog{padding:14px}.setrow{grid-template-columns:28px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 46px;gap:6px;padding:6px}}
/* the rest timer pill is always dark: keep its buttons readable in both themes */
.rest .btn,:root:not([data-theme="dark"]) .rest .btn{background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.07));color:#fff;border-color:rgba(255,255,255,.28);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.3),inset 0 -2px 3px rgba(0,0,0,.35)}

/* ================= NO YELLOW: black / white only ================= */
:root{--yellow:#E8E8E4;--primary-hover:#FFFFFF}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){--yellow:#D4D4D8;--accent-soft:#EDEDEF;--accent-line:rgba(10,10,10,.2);--chart-fill:rgba(10,10,10,.12);--chart-2:#71717A}}
:root[data-theme="light"]{--yellow:#D4D4D8;--accent-soft:#EDEDEF;--accent-line:rgba(10,10,10,.2);--chart-fill:rgba(10,10,10,.12);--chart-2:#71717A}
:root[data-theme="dark"]{--accent:#F2F2EE;--primary:#F2F2EE;--on-primary:#0A0A0A;--accent-soft:rgba(242,242,238,.1);--accent-line:rgba(242,242,238,.3);--chart:#F2F2EE;--chart-fill:rgba(242,242,238,.16);--side-accent:#F2F2EE}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--accent:#F2F2EE;--primary:#F2F2EE;--on-primary:#0A0A0A;--accent-soft:rgba(242,242,238,.1);--accent-line:rgba(242,242,238,.3);--chart:#F2F2EE;--chart-fill:rgba(242,242,238,.16);--side-accent:#F2F2EE}}
/* dark primary glass = frosted white */
:root[data-theme="dark"] .btn.primary,:root[data-theme="dark"] .logfinish{background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.7));color:#0A0A0A;border-color:rgba(255,255,255,.85);text-shadow:none;
  box-shadow:inset 0 1px 1px #fff,inset 0 -2px 3px rgba(0,0,0,.18),0 10px 22px -12px rgba(255,255,255,.35)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn.primary,:root:not([data-theme="light"]) .logfinish{background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.7));color:#0A0A0A;border-color:rgba(255,255,255,.85);text-shadow:none;
  box-shadow:inset 0 1px 1px #fff,inset 0 -2px 3px rgba(0,0,0,.18),0 10px 22px -12px rgba(255,255,255,.35)}}
:root[data-theme="dark"] .btn.primary .icon{color:#0A0A0A}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn.primary .icon{color:#0A0A0A}}
.side .btn.primary,.tabbar .fab{background:linear-gradient(180deg,#3a3a3d,#0A0A0A);color:#fff;border:1px solid #0A0A0A}
:root[data-theme="dark"] .side .btn.primary,:root[data-theme="dark"] .tabbar .fab{background:linear-gradient(180deg,#fff,#cfcfcf);color:#0A0A0A;border-color:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .side .btn.primary,:root:not([data-theme="light"]) .tabbar .fab{background:linear-gradient(180deg,#fff,#cfcfcf);color:#0A0A0A;border-color:#fff}}
.card.glow{box-shadow:inset 3px 0 0 var(--text)}
.nav-link .count{background:var(--text);color:var(--bg)}
.setrow input{background:var(--surface)}
.setrow.done input{background:transparent}
.tick[aria-pressed="true"]{color:#04130c}
.restline[class*="on"],.restline.on{color:var(--text)}
.rest{border-color:rgba(255,255,255,.22)!important}
.rest .num,.rest b{color:#fff}

/* warm-up card = orange; "Synimi" (target) = easy to see */
:root{--warm:#FF9F43;--warm-soft:rgba(255,159,67,.13);--warm-line:rgba(255,159,67,.45)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){--warm:#C2570C;--warm-soft:rgba(234,120,20,.12);--warm-line:rgba(194,87,12,.45)}}
:root[data-theme="light"]{--warm:#C2570C;--warm-soft:rgba(234,120,20,.12);--warm-line:rgba(194,87,12,.45)}
.wu-k-wu{border-color:var(--warm-line);background:linear-gradient(180deg,var(--warm-soft),transparent 140%),var(--surface)}
.wu-k-wu .wu-h,.wu-k-wu .wu-h b,.wu-k-wu .wu-h svg{color:var(--warm)}
.wu-k-wu .wu-h b{font-weight:700}
.wu-k-wu .wu-row{border-top-color:var(--warm-line)}
.wu-k-wu .tick[aria-pressed="true"]{background:var(--warm);border-color:var(--warm);color:#1a0c00}
.extarget{display:block;padding:5px 9px;border-radius:2px!important;font-size:12.5px;font-weight:650;line-height:1.35;color:var(--text);background:var(--inset);border:1px solid var(--line-3)}

/* warm-up sets (N1, N2…) = orange, same family as the warm-up card */
.setrow.warm{background:var(--warm-soft);border-color:var(--warm-line)}
.setrow.warm .i{background:var(--warm);color:#1a0c00}
.setrow.warm.done{background:var(--warm-soft);border-color:var(--warm)}
.setrow.warm.done .i{background:var(--warm)}
.setrow.warm input{background:transparent}
.setrow.warm .tick[aria-pressed="true"]{background:var(--warm);border-color:var(--warm);color:#1a0c00}
.warmnote{color:var(--warm)!important;opacity:.9}
/* cool-down card = calm blue */
:root{--cool:#5AB0FF;--cool-soft:rgba(90,176,255,.12);--cool-line:rgba(90,176,255,.42)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){--cool:#1F6FBF;--cool-soft:rgba(31,111,191,.10);--cool-line:rgba(31,111,191,.40)}}
:root[data-theme="light"]{--cool:#1F6FBF;--cool-soft:rgba(31,111,191,.10);--cool-line:rgba(31,111,191,.40)}
.wu-k-cd{border-color:var(--cool-line);background:linear-gradient(180deg,var(--cool-soft),transparent 140%),var(--surface)}
.wu-k-cd .wu-h,.wu-k-cd .wu-h b,.wu-k-cd .wu-h svg{color:var(--cool)}
.wu-k-cd .wu-row{border-top-color:var(--cool-line)}
.wu-k-cd .tick[aria-pressed="true"]{background:var(--cool);border-color:var(--cool);color:#001326}
/* start-timer buttons inside the tinted cards */
.wu-k-cd .cg-go{background:var(--cool)!important;border-color:var(--cool)!important;color:#001326!important;background-image:none!important}
.wu-k-cd .cg-go .faint{color:#001326!important;opacity:.7}
.cg-go{flex-wrap:nowrap;gap:10px}
.cg-go>span:first-of-type{flex:1;text-align:left}
.cg-go .faint{white-space:nowrap;font-size:13px}
/* session details (date, program day) sit at the bottom, above "Cancel" */
.logdayrow{display:flex;align-items:center;gap:8px}
.logdayrow .logday{margin:0}
.logmeta>summary{display:none}
.logmeta:not([open]){display:none}
.logmeta[open]{padding-top:14px}

/* light mode: soft grey page, white cards with a light shadow so they do not look blank */
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) #logScreen{background:#F1F1F3}
:root:not([data-theme="dark"]) .exlog{background:#fff;border-color:rgba(10,10,10,.10);box-shadow:0 1px 2px rgba(0,0,0,.06),0 6px 18px rgba(0,0,0,.06)}}
:root[data-theme="light"] #logScreen{background:#F1F1F3}
:root[data-theme="light"] .exlog{background:#fff;border-color:rgba(10,10,10,.10);box-shadow:0 1px 2px rgba(0,0,0,.06),0 6px 18px rgba(0,0,0,.06)}

/* danger buttons stay solid red with white text (also inside confirm dialogs) */
:root .btn.danger,:root[data-theme] .btn.danger{background:#D92D20!important;background-image:none!important;border-color:#D92D20!important;color:#fff!important;text-shadow:none!important;box-shadow:0 1px 2px rgba(0,0,0,.25)!important}
:root .btn.danger:hover{background:#E5392B!important}

/* light mode: keep the orange warm-up and blue cool-down tint on the cards (the white-card rule above would hide it) */
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .exlog.wu-k-wu{background:linear-gradient(180deg,var(--warm-soft),transparent 140%),#fff;border-color:var(--warm-line)}
:root:not([data-theme="dark"]) .exlog.wu-k-cd{background:linear-gradient(180deg,var(--cool-soft),transparent 140%),#fff;border-color:var(--cool-line)}}
:root[data-theme="light"] .exlog.wu-k-wu{background:linear-gradient(180deg,var(--warm-soft),transparent 140%),#fff;border-color:var(--warm-line)}
:root[data-theme="light"] .exlog.wu-k-cd{background:linear-gradient(180deg,var(--cool-soft),transparent 140%),#fff;border-color:var(--cool-line)}

/* light mode: solid tint so the colour always shows */
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .exlog.wu-k-wu{background:#FFF1E2!important}
:root:not([data-theme="dark"]) .exlog.wu-k-cd{background:#E8F2FD!important}}
:root[data-theme="light"] .exlog.wu-k-wu{background:#FFF1E2!important}
:root[data-theme="light"] .exlog.wu-k-cd{background:#E8F2FD!important}

/* ===== transparent "light-edge" main buttons: see-through inside, a bright edge runs round the border ===== */
@property --le-a{syntax:"<angle>";initial-value:0deg;inherits:false}
@property --le-p{syntax:"<percentage>";initial-value:5%;inherits:false}
:root{--le-acc:#F2E91B;--le-soft:#FFF48A;--le-text:#fff;--le-line:rgba(255,255,255,.22);--le-glow:rgba(242,233,27,.20)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){--le-acc:#0A0A0A;--le-soft:#52525B;--le-text:#0A0A0A;--le-line:rgba(10,10,10,.20);--le-glow:rgba(10,10,10,.07)}}
:root[data-theme="light"]{--le-acc:#0A0A0A;--le-soft:#52525B;--le-text:#0A0A0A;--le-line:rgba(10,10,10,.20);--le-glow:rgba(10,10,10,.07)}
:root[data-theme="dark"]{--le-acc:#F2E91B;--le-soft:#FFF48A;--le-text:#fff;--le-line:rgba(255,255,255,.22);--le-glow:rgba(242,233,27,.20)}
:root .btn.primary,:root .logfinish,:root .btn[data-lg="addEx"],:root .side .btn.primary,:root .tabbar .fab{
  background:transparent!important;background-image:none!important;border:0!important;box-shadow:none!important;text-shadow:none!important;color:var(--le-text)!important;
  backdrop-filter:none!important;position:relative;isolation:isolate;overflow:hidden;
  animation:le-spin 3.4s linear infinite;transition:--le-p .6s}
:root .btn.primary .icon,:root .logfinish .icon,:root .btn[data-lg="addEx"] .icon,:root .side .btn.primary .icon,:root .tabbar .fab .icon{color:currentColor!important}
:root .btn.primary::before,:root .logfinish::before,:root .btn[data-lg="addEx"]::before,:root .side .btn.primary::before,:root .tabbar .fab::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;z-index:-1;pointer-events:none;
  background:conic-gradient(from var(--le-a),transparent,var(--le-acc) var(--le-p),var(--le-soft) calc(var(--le-p)*2),var(--le-acc) calc(var(--le-p)*3),transparent calc(var(--le-p)*4)),linear-gradient(var(--le-line),var(--le-line));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;transform:none}
:root .btn.primary::after,:root .logfinish::after,:root .btn[data-lg="addEx"]::after,:root .side .btn.primary::after,:root .tabbar .fab::after{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-2;pointer-events:none;transform:none!important;
  background:radial-gradient(120% 140% at 0% 0%,var(--le-glow),transparent 60%)}
:root .btn.primary:hover,:root .logfinish:hover,:root .btn[data-lg="addEx"]:hover{--le-p:20%;background:transparent!important;filter:none}
@keyframes le-spin{to{--le-a:360deg}}
@media (prefers-reduced-motion:reduce){:root .btn.primary,:root .logfinish,:root .btn[data-lg="addEx"],:root .side .btn.primary,:root .tabbar .fab{animation:none}}
/* MBARO = plain text like the FINISH example, no button */
:root .logfinish{background:none!important;border:0!important;box-shadow:none!important;animation:none!important;padding:0 8px!important;min-height:40px;border-radius:0!important;overflow:visible;color:#0A0A0A!important}
:root .logfinish::before,:root .logfinish::after{display:none!important}
:root .logfinish:hover{opacity:.7}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logfinish{color:#F2E91B!important}}
:root[data-theme="dark"] .logfinish{color:#F2E91B!important}
/* main buttons: transparent, static thin border, no animation, no glow */
:root .btn.primary,:root .btn[data-lg="addEx"],:root .side .btn.primary,:root .tabbar .fab{animation:none!important}
:root .btn.primary::before,:root .btn[data-lg="addEx"]::before,:root .side .btn.primary::before,:root .tabbar .fab::before{background:linear-gradient(var(--le-acc),var(--le-acc))!important;opacity:.55}
:root .btn.primary::after,:root .btn[data-lg="addEx"]::after,:root .side .btn.primary::after,:root .tabbar .fab::after{display:none!important}
/* main buttons: Apple-style clear glass */
:root{--gl-fill:rgba(255,255,255,.10);--gl-fill2:rgba(255,255,255,.03);--gl-edge:rgba(255,255,255,.28);--gl-hi:rgba(255,255,255,.55);--gl-sh:rgba(0,0,0,.35)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){--gl-fill:rgba(255,255,255,.55);--gl-fill2:rgba(255,255,255,.18);--gl-edge:rgba(255,255,255,.9);--gl-hi:rgba(255,255,255,1);--gl-sh:rgba(10,10,10,.16)}}
:root[data-theme="light"]{--gl-fill:rgba(255,255,255,.55);--gl-fill2:rgba(255,255,255,.18);--gl-edge:rgba(255,255,255,.9);--gl-hi:rgba(255,255,255,1);--gl-sh:rgba(10,10,10,.16)}
:root[data-theme="dark"]{--gl-fill:rgba(255,255,255,.10);--gl-fill2:rgba(255,255,255,.03);--gl-edge:rgba(255,255,255,.28);--gl-hi:rgba(255,255,255,.55);--gl-sh:rgba(0,0,0,.35)}
:root .btn.primary,:root .btn[data-lg="addEx"],:root .side .btn.primary,:root .tabbar .fab{
  background:linear-gradient(180deg,var(--gl-fill),var(--gl-fill2))!important;
  -webkit-backdrop-filter:blur(18px) saturate(180%)!important;backdrop-filter:blur(18px) saturate(180%)!important;
  box-shadow:inset 0 1px 0 var(--gl-hi),inset 0 0 0 1px var(--gl-edge),0 8px 24px -8px var(--gl-sh)!important;
  overflow:hidden}
:root .btn.primary::before,:root .btn[data-lg="addEx"]::before,:root .side .btn.primary::before,:root .tabbar .fab::before{display:none!important}
:root .btn.primary:hover,:root .btn[data-lg="addEx"]:hover{background:linear-gradient(180deg,var(--gl-fill),var(--gl-fill2))!important;filter:brightness(1.12)}

/* ---- login page polish (20 Oct 2026): the form sits on a soft card, a gentle glow behind it, room for the top buttons on phones ---- */
.auth-form{background:radial-gradient(760px 380px at 75% -5%,var(--accent-soft),transparent 70%)}
.auth-form .box{padding:34px 30px 30px;border:1px solid var(--line);border-radius:22px;background:var(--surface);box-shadow:0 30px 70px -40px rgba(0,0,0,.45)}
.auth-form .box h1,.auth-form .box h2{letter-spacing:-.01em}
.auth-form .box .btn.primary{min-height:48px}
@media (max-width:520px){
  .auth-form{padding-top:76px}
  .auth-form .box{padding:24px 18px 22px;border-radius:18px;box-shadow:none}
}

/* ===== polish: workout screen + questionnaire (v11) ===== */
.setrow input::placeholder{color:var(--text-2);opacity:.55;font-weight:600}
.setrow input:not(:placeholder-shown){color:var(--text)}
.exlog{gap:10px}
.exlog .rir-det{margin-top:2px;padding-top:2px}
.exlog .rir-det summary{min-height:40px;font-size:13.5px}
.exlog .setbtns{gap:8px;margin-top:2px;padding-top:12px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr}
.exlog .setbtns .btn.quiet,.exlog .setbtns .btn.quiet:hover{height:42px;min-height:42px;justify-content:center;border:1px solid var(--line-2)!important;border-radius:12px;color:var(--text);font-weight:600;background:var(--surface-2)!important;padding:0 10px;font-size:13.5px}
.kv-row:not(.long)>b{white-space:normal;min-width:0;flex:1 1 45%;overflow-wrap:anywhere}
.kv-row>span{flex:1 1 40%;min-width:0}
/* warm-up / cardio / stretch rows: the "done" tick on the right */
.wu-row{grid-template-columns:minmax(0,1fr) auto auto}
.wu-row>.tick{grid-column:3;grid-row:1}
.wu-row>.wu-tx{grid-column:1;grid-row:1}
.wu-row>.wu-time{grid-column:2;grid-row:1}
.wu-row>.wu-how{grid-column:1/-1;grid-row:2}
/* progress page: folded medals + assessment details */
.bdg-more{margin-top:2px}
.bdg-more>summary{list-style:none;cursor:pointer;min-height:44px;display:flex;align-items:center;justify-content:center;font-weight:650;font-size:14px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface-2)}
.bdg-more>summary::-webkit-details-marker{display:none}
.bdg-more[open]>summary{display:none}
.bdg-more>.bdg-grid{margin-top:0}
.p-more>summary{min-height:40px;display:flex;align-items:center}
/* progress: calendar edge not clipped, short empty chart */
.p-cal{padding:3px 4px 3px 0}
.chart.chart-empty{height:72px}

/* Forca: muscle map next to each exercise */
.str-lead{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.str-th{width:52px;height:52px;border-radius:12px}

/* End-of-workout summary (peak-end) */
.sv{display:grid;gap:14px;justify-items:center;text-align:center;padding:6px 0 2px}
.sv-ic{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--inset);color:var(--accent);border:1px solid var(--line-2);animation:sv-pop .45s cubic-bezier(.2,.9,.3,1.3) both}
.sv-ic.pr{background:rgba(248,248,16,.14);border-color:rgba(248,248,16,.45)}
.sv-ic svg{width:30px;height:30px}
.sv-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.sv-stat{background:var(--inset);border:1px solid var(--line);border-radius:14px;padding:12px 8px;display:grid;gap:2px}
.sv-stat b{font:700 26px/1.1 var(--display)}
.sv-stat em{font-size:13px;font-style:normal;color:var(--text-2);font-weight:500}
.sv-stat span{font-size:11.5px;color:var(--text-2);text-transform:uppercase;letter-spacing:.06em}
.sv-prs{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center}
@keyframes sv-pop{from{transform:scale(.5);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.sv-ic{animation:none}}
/* Touch: comfortable 44px targets in the client app and the workout screen */
@media (pointer:coarse){
  :root .logfinish{min-height:44px!important;min-width:44px}
  .logscreen .btn.sm.icon-only,.p-content .btn.sm.icon-only{min-width:44px;min-height:44px}
  .logscreen .btn.sm:not(.icon-only),.p-content .btn.sm:not(.icon-only){min-height:44px}
}

/* summary: week banner, muscle maps, comparison, next session, buttons */
.sv-week{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:8px 14px;border-radius:99px;background:rgba(248,248,16,.12);border:1px solid rgba(248,248,16,.4);color:var(--accent)}
.sv-week span{color:var(--text-2);font-size:13px}
.sv-maps{display:flex;gap:14px;justify-content:center;background:#fff;border-radius:14px;padding:8px 18px}
.sv-maps .musclemap{height:120px;width:auto;display:block}
.sv-cmp{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:14px;color:var(--text-2)}
.sv-cmp b{color:var(--text)}
.sv-next{display:flex;gap:8px;align-items:baseline;justify-content:center;flex-wrap:wrap;font-size:14px;color:var(--text-2)}
.sv-next b{color:var(--text);font-size:15px}
.sv-btns{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;width:100%;margin-top:4px}
.sv-modal .sv-btns{position:sticky;bottom:-1px;background:var(--elevated);padding:10px 0 2px;box-shadow:0 -10px 14px -6px var(--elevated)}
/* Touch: text links in card headers and the small "how to" buttons get a 44px hit area (look unchanged) */
@media (pointer:coarse){
  .p-content .spread>a.t-small,.p-content .card-head>a.t-small{padding:12px 8px;margin:-12px -8px}
  .p-content .ex-btn{min-width:44px;min-height:44px}
}

/* ===== Summary, richer look ===== */
.modal.sv-modal{--accent:#F8F810;--accent-soft:rgba(248,248,16,.12);--accent-line:rgba(248,248,16,.34);--hi-grad:linear-gradient(145deg,#FBFB4A,#D9D900);--hi-ink:#111;--hi-glow:rgba(248,248,16,.32);width:min(460px,100%);background:radial-gradient(130% 55% at 50% 0%,var(--accent-soft),transparent 62%),var(--elevated);padding:var(--s6) var(--s6) var(--s5)}
.sv{gap:16px;padding:0}
.sv>*{animation:sv-up .5s cubic-bezier(.2,.8,.2,1) both}
.sv>:nth-child(1){animation-delay:0s}.sv>:nth-child(2){animation-delay:.06s}.sv>:nth-child(3){animation-delay:.12s}.sv>:nth-child(4){animation-delay:.18s}.sv>:nth-child(5){animation-delay:.24s}.sv>:nth-child(6){animation-delay:.30s}.sv>:nth-child(7){animation-delay:.36s}.sv>:nth-child(8){animation-delay:.42s}.sv>:nth-child(9){animation-delay:.48s}.sv>:nth-child(10){animation-delay:.54s}
@keyframes sv-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.sv-hero{position:relative;display:grid;place-items:center;padding-top:4px}
.sv-ic{width:84px;height:84px;border-radius:50%;background:var(--inset);color:var(--accent);border:1px solid var(--accent-line);box-shadow:0 0 0 8px rgba(248,248,16,.05);animation:sv-pop .55s cubic-bezier(.2,.9,.3,1.35) both}
.sv-ic.pr{background:var(--hi-grad);color:var(--hi-ink);border-color:transparent;box-shadow:0 0 0 8px var(--accent-soft),0 12px 44px var(--hi-glow)}
.sv-ic svg{width:38px;height:38px;stroke-width:2.2}
.sv-head{display:grid;gap:4px;text-align:center}
.sv-kick{font:700 12px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.sv-title{margin:0;font:800 28px/1.1 var(--display);letter-spacing:-.01em}
.sv-week{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;justify-self:center;padding:8px 16px;border-radius:99px;background:linear-gradient(90deg,rgba(248,248,16,.16),rgba(248,248,16,.07));border:1px solid var(--accent-line);color:var(--accent)}
.sv-week span{color:var(--text-2);font-size:13px}
.sv-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}
.sv-stats.n1{grid-template-columns:1fr}.sv-stats.n2{grid-template-columns:1fr 1fr}
.sv-stat{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border:1px solid var(--line-2);border-radius:16px;padding:14px 8px 12px;display:grid;gap:2px;justify-items:center}
.sv-sic{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);margin-bottom:4px}
.sv-stat b{font:800 28px/1.1 var(--display);font-variant-numeric:tabular-nums}
.sv-stat b i{font-style:normal}
.sv-stat em{font-size:13px;font-style:normal;color:var(--text-2);font-weight:600}
.sv-stat>span:last-child{font-size:11px;color:var(--text-2);text-transform:uppercase;letter-spacing:.08em}
.sv-wk{display:grid;gap:10px;padding:14px;border-radius:16px;background:var(--inset);border:1px solid var(--line)}
.sv-wk-top{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.sv-wk-top b{font:800 20px/1 var(--display);color:var(--text);letter-spacing:0;text-transform:none}
.sv-wk-top em{font-style:normal;color:var(--text-2);font-size:14px;font-weight:600}
.sv-segs{display:flex;gap:6px}
.sv-segs i{flex:1;height:10px;border-radius:99px;background:var(--hover-2)}
.sv-segs i.on{background:var(--hi-grad);box-shadow:0 0 14px var(--hi-glow);transform-origin:left;animation:sv-fill .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.5s + var(--d,0ms))}
@keyframes sv-fill{from{transform:scaleX(0);opacity:.2}to{transform:none;opacity:1}}
.sv-lab{font:700 11px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)}
.sv-prs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;padding:12px;border-radius:16px;background:var(--accent-soft);border:1px solid var(--accent-line)}
.sv-prs .sv-lab{color:var(--accent);width:100%;text-align:center}
.sv-cmp{list-style:none;margin:0;padding:0!important;display:grid;gap:8px}
.sv-cmp li{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--success-soft);border:1px solid rgba(94,214,160,.25);font-size:14px;color:var(--text);text-align:left}
.sv-cmp b{color:var(--text)}
.sv-up{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--success);color:#06210f;font-size:10px}
.sv-mapbox{display:grid;gap:10px;justify-items:center}
.sv-maps{display:flex;gap:18px;justify-content:center;background:linear-gradient(180deg,#fff,#EEF0F4);border-radius:18px;padding:12px 28px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.sv-maps .musclemap{height:132px;width:auto;display:block}
.sv-next{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:var(--inset);border:1px solid var(--line)}
.sv-nic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);flex:none}
.sv-nt{display:grid;gap:2px;text-align:left}.sv-nt span{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-2)}.sv-nt b{font:700 17px/1.2 var(--display)}
.sv-btns{grid-template-columns:1fr 1.5fr}
.sv-conf{position:absolute;inset:0;pointer-events:none;display:grid;place-items:center}
.sv-conf i{position:absolute;left:50%;top:50%;width:var(--w,7px);height:calc(var(--w,7px)*1.7);background:var(--c);border-radius:2px;opacity:0;animation:sv-conf 1.3s cubic-bezier(.15,.7,.3,1) forwards}
@keyframes sv-conf{0%{opacity:1;transform:translate(-50%,-50%) rotate(0)}70%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y) + 60px)) rotate(var(--r))}}
@media (prefers-reduced-motion:reduce){.sv>*,.sv-segs i.on{animation:none}.sv-conf{display:none}}
@media (max-width:380px){.sv-stat b{font-size:24px}.sv-title{font-size:25px}}
.sv{justify-items:stretch}
.sv>.sv-week{justify-self:center}
.sv-stat .sv-sic{color:var(--accent);background:var(--accent-soft);font-size:0;text-transform:none}
.sv-stat>b{display:block}
.sv-nt{flex:1}
.modal.sv-modal{padding-bottom:0}
.sv-modal .sv-btns{bottom:0;padding:12px 0 var(--s5)}
.sv-sic,.sv-sic svg,.sv-nic,.sv-nic svg{color:var(--accent)!important;stroke:var(--accent)!important}
.sv-ic.pr,.sv-ic.pr svg{color:var(--hi-ink)!important;stroke:var(--hi-ink)!important}
.sv-ic:not(.pr),.sv-ic:not(.pr) svg{color:var(--accent)!important;stroke:var(--accent)!important}

:root[data-theme="light"] .modal.sv-modal{--accent:#0A0A0A;--accent-soft:#EDEDEF;--accent-line:rgba(10,10,10,.2);--hi-grad:linear-gradient(145deg,#2c2c30,#0A0A0A);--hi-ink:#fff;--hi-glow:rgba(0,0,0,.22)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .modal.sv-modal{--accent:#0A0A0A;--accent-soft:#EDEDEF;--accent-line:rgba(10,10,10,.2);--hi-grad:linear-gradient(145deg,#2c2c30,#0A0A0A);--hi-ink:#fff;--hi-glow:rgba(0,0,0,.22)}}

.sv-btns{grid-template-columns:1fr}
/* Progress > Forca: detailed front+back muscle map */
.exthumb.str-th.duo{width:84px;height:66px;border-radius:12px;background:#fff}
.exthumb.str-th.duo .musclemap{width:100%;height:100%;padding:4px}
.str-mm{display:flex;flex-direction:column;align-items:center;gap:10px;padding:4px 0 14px;text-align:center}
.str-mm-pic{flex:none;width:min(100%,260px);aspect-ratio:208/200;border-radius:14px;background:#fff;border:1px solid var(--line);overflow:hidden;display:block}
.str-mm-pic .musclemap{width:100%;height:100%;padding:8px;display:block}
.str-mm .stack-sm{min-width:0}
/* end-of-program report card */
.report-card{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;border-color:rgba(212,212,0,.55);background:linear-gradient(135deg,rgba(248,248,16,.14),transparent 70%)}
.report-card .btn,.report-card .btn.primary{grid-column:1/-1;justify-content:center;min-height:48px;background:#111!important;color:#F8F810!important;border-color:#111!important}
.report-ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:#F8F810;color:#111}
.report-ic .icon{width:24px;height:24px}
/* program editor: − / + on sets, reps, seconds and the weight / no weight / time switch */
.pex-n>label{display:grid;gap:4px;align-content:start;min-width:0}
.pex-n>label>span{font:600 11px/1.15 var(--ui);letter-spacing:0;color:var(--text-3);overflow-wrap:break-word;hyphens:auto}
.pex-n>label b{font:800 18px/1.1 var(--display);color:var(--text);overflow-wrap:anywhere}
.pex-n{gap:6px}
.pex-pm{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.pex-pm .btn{min-height:40px;padding:0;justify-content:center;font:700 20px/1 var(--ui)}
.pex-seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;width:100%;max-width:260px;gap:2px;padding:2px;border-radius:12px;background:var(--inset);border:1px solid var(--line)}
.pex-seg button{min-height:40px;padding:0 4px;white-space:nowrap;border:0;border-radius:10px;background:transparent;color:var(--text);font:600 12.5px var(--ui);cursor:pointer}
.pex-seg button[aria-pressed=true]{background:#F8F810;color:#111}

.p-go.p-go-sm{font-size:clamp(14px,4.2vw,17px);letter-spacing:.04em}
.p-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.p-steps li{display:flex;gap:12px;align-items:flex-start;font:500 15px/1.4 var(--ui)}
.p-steps b{flex:none;width:28px;height:28px;border-radius:50%;background:var(--yellow);color:#000;display:grid;place-items:center;font:800 14px var(--ui)}

.p-exl{list-style:none;margin:0;padding:0;display:grid}
.p-exl li+li{border-top:1px solid var(--line)}
.p-exl summary,.p-exrow{display:flex;align-items:center;gap:13px;padding:9px 2px;cursor:pointer;list-style:none;min-height:60px}
.p-exl summary::-webkit-details-marker{display:none}
.p-exl summary>.icon{margin-left:auto;color:var(--text-3);flex:none;transition:transform .2s}
.p-exd[open] summary>.icon{transform:rotate(90deg)}
.p-exl .p-tx{display:grid;gap:2px;min-width:0}.p-exl .p-tx b{font-size:15px;font-weight:650;line-height:1.25}.p-exl .p-tx small{font-size:12.5px;color:var(--text-2);line-height:1.35}
.p-exbody{padding:2px 4px 14px 67px;display:grid;gap:8px}
.p-exbody p{margin:0;font:500 13.5px/1.5 var(--ui);color:var(--text-2)}.p-exbody p.faint{color:var(--text-3)}
.p-exlink{display:inline-flex;align-items:center;gap:4px;font:700 14px var(--ui);color:inherit;min-height:40px}
@media (max-width:560px){.weeks{grid-template-columns:1fr}.weeks .week{padding:12px 14px}}

.p-sect{border:1px solid var(--line);border-radius:var(--r-card,18px);background:var(--surface)}
.p-sect>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;min-height:56px;padding:0 var(--card-pad,18px)}
.p-sect>summary::-webkit-details-marker{display:none}
.p-sect>summary b{font:700 16px var(--ui);flex:1}
.p-sect>summary>.icon{color:var(--text-3);transition:transform .2s;flex:none}
.p-sect[open]>summary>.icon{transform:rotate(90deg)}
.p-sect-body{display:grid;gap:12px;padding:0 10px 12px}
.p-sect-body>.card,.p-sect-body>section{border:0;box-shadow:none;background:transparent;padding-left:6px;padding-right:6px}
.p-sect.hide1 .p-sect-body>section>:first-child{display:none}
.p-sect-body .card-head{padding-left:6px}