/* Copyright (c) A Raphael Solutions. All rights reserved. */
:root{
  --bg:#0a0c0a; --card:#131613; --card2:#1b1f1b; --line:#272c27; --txt:#f1f4ef; --mut:#9aa59a;
  --acc:#8fdc3c; --acc2:#c5ec5a; --acc-rgb:143,220,60; --acc-d:#4d8a14; --ok:#35c46a; --bad:#ff5d5d; --r:20px;
  --top:rgba(10,12,10,.92); --surf:#0e100e; --inset:#0d100d; --track:#242a24; --dash:#3a3f3a; --last:#6f796f;
  --glow:rgba(var(--acc-rgb),.2); --hero1:color-mix(in srgb,var(--acc) 26%,#0a0c0a); --hero2:color-mix(in srgb,var(--acc) 9%,#0a0c0a);
}
[data-accent=blue]{--acc:#3da5ff;--acc2:#8ccbff;--acc-rgb:61,165,255;--acc-d:#1f78c8}
[data-accent=orange]{--acc:#ff8a1f;--acc2:#ffb067;--acc-rgb:255,138,31;--acc-d:#c85f06}
[data-accent=violet]{--acc:#a78bfa;--acc2:#cbb8ff;--acc-rgb:167,139,250;--acc-d:#6d4fd6}
[data-accent=rose]{--acc:#ff5d8f;--acc2:#ff9db9;--acc-rgb:255,93,143;--acc-d:#d6336c}
[data-mode=light]{--bg:#f3f5f0;--card:#fff;--card2:#edf0e8;--line:#dce1d5;--txt:#141814;--mut:#5b675b;--acc2:var(--acc-d);
  --top:rgba(243,245,240,.92);--surf:#fff;--inset:#eef1e9;--track:#e2e7db;--dash:#b9c1b0;--last:#7a867a;--glow:rgba(var(--acc-rgb),.2)}
[data-mode=light] .dn{color:#d2481f}
[data-mode=light] .btn.ghost{background:var(--card2)}
[data-mode=light] .card{box-shadow:0 1px 2px rgba(20,30,10,.05)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--txt);font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
body{padding-bottom:150px}
a{color:var(--acc2)}
h1,h2,h3{margin:0 0 8px}
h2{font-size:1.15rem}
h3{font-size:1rem}
.wrap{max-width:820px;margin:0 auto;padding:12px}
.top{position:sticky;top:0;z-index:20;background:var(--top);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:12px;padding:10px 12px 4px;max-width:1240px;margin:0 auto}
.brand{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.brand b{font-size:1.1rem;letter-spacing:.5px}
.brand b span{color:var(--acc)}
.logo{width:28px;height:28px;color:var(--acc)}
.greet{flex:1;min-width:0;text-align:center}
.greet h1{font-size:1rem;margin:0;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.greet p{margin:0;font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px 12px 4px 4px;color:var(--txt);cursor:pointer;flex:0 0 auto}
.me .who{display:flex;flex-direction:column;text-align:left;line-height:1.15}
.me .who b{font-size:.85rem}.me .who small{color:var(--mut);font-size:.7rem}
.ava{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--acc),color-mix(in srgb,var(--acc) 60%,#000)) center/cover no-repeat;color:#0b0d0b;font-weight:800;display:flex;align-items:center;justify-content:center;flex:0 0 auto;overflow:hidden}
nav{display:flex;gap:4px;overflow-x:auto;padding:4px 8px 8px;max-width:1240px;margin:0 auto;scrollbar-width:none}
nav::-webkit-scrollbar{display:none}
nav button{flex:1 0 auto;background:transparent;border:1px solid transparent;color:var(--mut);padding:8px 12px;border-radius:999px;font-size:.92rem;cursor:pointer}
nav button svg{display:none}
nav button.on{background:var(--acc);color:#0b0d0b;font-weight:700}
@media(max-width:560px){.me .who{display:none}.me{padding:3px}.greet h1{font-size:.9rem}}
@media(min-width:1000px){
  nav{position:fixed;left:14px;top:92px;bottom:auto;flex-direction:column;gap:10px;padding:0;overflow:visible;max-width:none;margin:0;z-index:25}
  nav button{flex:none;width:68px;height:68px;border-radius:20px;background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;font-size:.68rem}
  nav button svg{display:block;width:22px;height:22px}
  nav button.on{background:var(--acc);border-color:var(--acc)}
  .wrap{margin-left:100px!important;max-width:1180px!important}
  .greet h1{font-size:1.5rem}.greet p{font-size:.9rem}
  .top-in{padding:14px 18px 12px}
}
.wrap{max-width:820px;margin:0 auto;padding:12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;margin:12px 0}
.card.hero{background:linear-gradient(135deg,var(--hero2),var(--card) 60%);border-color:var(--hero1)}
.mut{color:var(--mut);font-size:.9rem}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sp{flex:1}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.grid3>label{min-width:0}
.grid3 input,.grid3 select{width:100%;min-width:0;max-width:100%;box-sizing:border-box;-webkit-appearance:none;appearance:none}
@media (max-width:560px){.grid3{grid-template-columns:1fr 1fr}.grid3>label:first-child{grid-column:1/-1}}
.stat{background:var(--card2);border-radius:12px;padding:10px;text-align:center}
.stat b{display:block;font-size:1.5rem;color:var(--acc2)}
.stat span{font-size:.78rem;color:var(--mut)}
button,select,input{font:inherit}
.btn{background:var(--acc);color:#0b0d0b;border:0;border-radius:10px;padding:10px 14px;font-weight:700;cursor:pointer}
.btn.ghost{background:var(--card2);color:var(--txt);border:1px solid var(--line);font-weight:600}
.btn.ok{background:var(--ok)}
.btn.bad{background:var(--bad);color:#fff}
.btn.sm{padding:6px 10px;font-size:.85rem;border-radius:8px}
.btn:disabled{opacity:.5}
input[type=text],input[type=number],input[type=password],input[type=time],input[type=date],select{
  background:var(--card2);color:var(--txt);border:1px solid var(--line);border-radius:10px;padding:9px 10px;min-width:0;width:100%}
input[type=number]{-moz-appearance:textfield}
label.chk{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
label.chk input{width:20px;height:20px;accent-color:var(--acc)}
.ex{border-top:1px solid var(--line);padding:12px 0}
.ex:first-of-type{border-top:0}
.ex h3{display:flex;align-items:center;gap:8px}
.q{width:26px;height:26px;border-radius:50%;border:1px solid var(--acc);background:transparent;color:var(--acc);font-weight:800;cursor:pointer;flex:0 0 auto;line-height:1}
.tag{font-size:.75rem;background:var(--card2);border:1px solid var(--line);padding:2px 8px;border-radius:999px;color:var(--mut)}
.tag.hint{border-color:var(--acc);color:var(--acc2)}
.setrow{display:flex;gap:6px;align-items:center;margin-top:8px}
.setrow .n{width:28px;text-align:center;color:var(--mut)}
.setrow input{flex:1}
.logged{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.pill{background:var(--card2);border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:.85rem}
.pill button{background:none;border:0;color:var(--bad);cursor:pointer;margin-left:4px}
.done-badge{color:var(--ok);font-weight:800}
.msg{font-size:1.02rem}
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:90px;background:var(--surf);border:1px solid var(--acc);color:var(--txt);padding:10px 16px;border-radius:12px;z-index:60;max-width:90%;display:none;backdrop-filter:blur(6px)}
#restbar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--surf);border-top:2px solid var(--acc);padding:10px 14px;display:none}
#restbar .t{font-size:1.8rem;font-weight:800;color:var(--acc2);min-width:90px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:80;display:none;align-items:flex-end;justify-content:center}
.modal.on{display:flex}
.sheet{background:var(--card);border:1px solid var(--line);border-radius:18px 18px 0 0;max-width:640px;width:100%;max-height:85vh;overflow:auto;padding:18px}
@media(min-width:700px){.modal{align-items:center}.sheet{border-radius:18px}}
.sheet ol{padding-left:20px}
.sheet li{margin:6px 0}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal .h{text-align:center;color:var(--mut);font-size:.75rem;padding:4px 0}
.cal .d{background:var(--card2);border:1px solid var(--line);border-radius:8px;min-height:56px;padding:4px;font-size:.78rem;cursor:pointer;position:relative}
.cal .d.today{border-color:var(--acc)}
.cal .d.blank{background:transparent;border:0;cursor:default}
.cal .d.done{background:color-mix(in srgb,var(--ok) 16%,var(--card));border-color:var(--ok)}
.cal .d .ty{color:var(--acc2);font-size:.7rem;display:block}
.cal .d .ck{position:absolute;right:4px;top:2px;color:var(--ok)}
.big{font-size:3.4rem;font-weight:800;text-align:center;letter-spacing:1px;color:var(--acc2)}
.phase{text-align:center;font-size:1.4rem;font-weight:800;text-transform:uppercase}
.phase.work{color:var(--acc)} .phase.rest{color:var(--ok)} .phase.warm{color:var(--acc2)}
canvas{max-width:100%}
.login{position:fixed;inset:0;background:var(--bg);z-index:100;display:none;align-items:center;justify-content:center;padding:20px}
.login .box{max-width:340px;width:100%}
.err{color:var(--bad);min-height:1.2em}
code{background:var(--card2);padding:2px 6px;border-radius:6px;word-break:break-all}

.bar{height:12px;background:var(--card2);border-radius:999px;overflow:hidden;margin:8px 0}
.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--acc2));border-radius:999px}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}
.pgrid figure{margin:0;position:relative;cursor:pointer}
.pgrid img,.cmp img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:8px;background:var(--card2);display:block}
.pgrid figcaption,.cmp figcaption{font-size:.72rem;color:var(--mut);text-align:center;margin-top:2px}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.cmp figure{margin:0}
.filebtn{display:inline-block;cursor:pointer}
.filebtn input{display:none}

.bar.over>i{background:var(--bad)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.chip{background:var(--card2);border:1px solid var(--line);color:var(--txt);border-radius:999px;padding:6px 12px;font-size:.85rem;cursor:pointer}
.seg{display:flex;gap:4px;margin:10px 0}
.seg button{flex:1;background:var(--card2);border:1px solid var(--line);color:var(--mut);padding:8px;border-radius:10px;cursor:pointer}
.seg button.on{background:var(--acc);color:#0b0d0b;font-weight:700;border-color:var(--acc)}
.frow{display:flex;gap:8px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.frow .sp{min-width:0}
.frow input{width:70px;flex:0 0 70px}

/* ---------- dashboard ---------- */
.dash{display:grid;gap:12px;grid-template-columns:1fr}
.dash>.card{margin:0}
@media(min-width:1000px){
  .dash{grid-template-columns:repeat(12,1fr)}
  .d-hero{grid-column:span 8}.d-tiles{grid-column:span 4}
  .d-week{grid-column:span 4}.d-prot{grid-column:span 4}.d-list{grid-column:span 4}
}
.d-hero{position:relative;overflow:hidden;min-height:340px;padding:0;display:flex;flex-direction:column;justify-content:flex-end;background:#0e120d center/cover no-repeat;color:#f1f4ef}
.d-hero.noimg{background:radial-gradient(120% 120% at 70% 0,var(--hero1) 0,#10150e 60%)}
.d-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,12,10,.05) 25%,rgba(10,12,10,.88) 100%)}
.d-hero .ph{position:relative;flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;color:#9aa59a;padding:24px 16px 4px;text-align:center}
.d-hero .ph .ava{width:96px;height:96px;font-size:2.2rem}
.d-hero .over{position:relative;padding:16px;display:flex;flex-direction:column;gap:10px}
.d-hero .hrow{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.d-hero .ttl{font-weight:700}
.d-hero .pct{color:var(--acc)}
.segbar{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;margin-top:6px}
.segbar i{height:8px;border-radius:4px;background:rgba(255,255,255,.14)}
.glass{background:rgba(20,24,20,.55);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px);color:#f1f4ef;border-radius:14px;padding:9px 14px;font-weight:700;cursor:pointer}
.glass.go{background:var(--acc);color:#0b0d0b;border-color:var(--acc)}
.d-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0!important;padding:0!important;background:none!important;border:0!important}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px;display:flex;flex-direction:column;justify-content:space-between;min-height:150px;overflow:hidden}
.tile .tl{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--mut)}
.tile .tl svg{width:16px;height:16px;flex:0 0 auto}
.tile b{font-size:1.7rem;line-height:1.1;display:block}
.tile small{color:var(--mut);font-size:.74rem}
.tile svg.sp{width:100%;height:46px;display:block;margin:4px 0}
.up{color:var(--acc2)}.dn{color:#ff9a7a}
.wbars{display:flex;align-items:flex-end;gap:6px;height:170px;margin-top:8px}
.wbars .c{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;font-size:.7rem;color:var(--mut);gap:3px}
.wbars .c i{display:block;width:100%;max-width:34px;border-radius:8px;background:linear-gradient(180deg,var(--acc),color-mix(in srgb,var(--acc) 40%,#000))}
.wbars .c i.rest{background:var(--card2);min-height:60px;height:60px;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:.6rem;color:var(--mut);text-align:center}
.wbars .c.today span{color:var(--acc2);font-weight:700}
.gauge{display:flex;flex-direction:column;align-items:center;margin-top:4px}
.gauge svg{width:100%;max-width:240px}
.gauge .gv{margin-top:-62px;text-align:center;line-height:1.2}
.gauge .gv b{font-size:1.7rem;display:block}
.glist{margin-top:6px}
.grow{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line);cursor:pointer}
.grow:first-child{border-top:0}
.grow .ic{width:38px;height:38px;border-radius:50%;background:var(--card2);display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--acc2);font-weight:800;font-size:.8rem}
.grow .ic.ok{background:var(--ok);color:#0b0d0b}
.grow .sp{min-width:0}
.grow .sp b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grow .ch{color:var(--mut)}
.underdash{margin-top:12px}
/* profile + users */
.prow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.prow .ava{width:72px;height:72px;font-size:1.6rem}
.urow{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.urow .ava{width:36px;height:36px;font-size:.9rem}
.urow .sp{min-width:140px}
.login .box input{width:100%}

@media(max-width:560px){
  .d-hero{min-height:360px}
  .d-hero .hrow .sp{flex:1 1 100%}
  .d-hero .hrow .row{flex-wrap:nowrap;white-space:nowrap;font-size:.9rem}
  .d-hero .hrow{align-items:center}
}

/* ---------- workout screen ---------- */
:root{--cond:"Barlow Condensed","Oswald","Arial Narrow","Roboto Condensed",Impact,sans-serif}
#nav-more{display:none}
.wk{max-width:640px;margin:0 auto}
.wk-hero{position:relative;overflow:hidden;border-radius:30px;min-height:470px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(180deg,var(--hero1) 0,var(--hero2) 55%,#0e110e 100%);border:1px solid color-mix(in srgb,var(--acc) 18%,var(--line));color:#f1f4ef}
.wk-bg{position:absolute;inset:0;background:center/cover no-repeat;filter:grayscale(1) contrast(1.05) brightness(.95)}
.wk-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,12,10,.08) 0,rgba(10,12,10,.45) 45%,color-mix(in srgb,var(--acc) 9%,#0a0c0a) 90%)}
.wk-hero.noimg::after{background:radial-gradient(90% 60% at 80% 0,rgba(var(--acc-rgb),.22),transparent)}
.wk-in{position:relative;z-index:1;padding:20px 18px 18px}
.wk-title{font-family:var(--cond);font-weight:800;text-transform:uppercase;font-size:3.4rem;line-height:.95;margin:0 0 4px;letter-spacing:.5px}
.wk-sub{color:#cfdcc4;margin-bottom:14px;font-size:.95rem}
.wk-stats{display:grid;grid-template-columns:repeat(3,1fr);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:22px;padding:14px 8px;margin:10px 0 14px;text-align:center;backdrop-filter:blur(8px)}
.wk-stats b{display:block;font-family:var(--cond);font-size:1.7rem;font-weight:700;line-height:1}
.wk-stats span{font-size:.75rem;color:#c3d1b9}
.wk-btn{width:100%;border:0;border-radius:999px;background:#fff;color:#0b0d0b;font-family:var(--cond);font-weight:800;font-size:1.25rem;letter-spacing:.8px;padding:15px;cursor:pointer;text-transform:uppercase}
.wk-btn.go{background:var(--acc)}
.wk-btn.done{background:rgba(255,255,255,.14);color:#fff;font-size:1rem}
.wk-time{text-align:center;margin-top:8px;color:#dfe8d8;font-variant-numeric:tabular-nums}
.wk-eh{display:flex;align-items:center;gap:10px;margin:22px 4px 8px}
.wk-eh h2{margin:0;font-family:var(--cond);text-transform:uppercase;font-size:1.3rem;letter-spacing:.5px}
.wk-eh select{width:auto;padding:5px 8px;font-size:.85rem}
.xc{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:14px 14px 8px;margin:0 0 12px}
.xc.full{border-color:color-mix(in srgb,var(--acc) 50%,var(--line))}
.xh{display:flex;align-items:center;gap:12px}
.xt{width:54px;height:54px;border-radius:14px;background:var(--inset);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--acc);flex:0 0 auto}
.xt svg{width:26px;height:26px}
.xn{font-family:var(--cond);font-weight:700;text-transform:uppercase;font-size:1.35rem;line-height:1.05;letter-spacing:.3px}
.xs{color:var(--mut);font-size:.82rem;margin-top:2px}
.xh .sw{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--mut);cursor:pointer;flex:0 0 auto}
.xhint{margin-top:8px;font-size:.8rem;color:var(--acc2)}
.xr{display:flex;align-items:center;gap:8px;color:var(--acc2);font-weight:600;margin:12px 0 4px;font-size:.95rem}
.xr svg{width:20px;height:20px}
.srow{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line)}
.ck{width:26px;height:26px;border-radius:7px;border:2px solid var(--dash);background:var(--card2);color:#0b0d0b;font-weight:900;font-size:.95rem;cursor:pointer;flex:0 0 auto;display:flex;align-items:center;justify-content:center;padding:0}
.ck.on{background:var(--acc);border-color:var(--acc)}
.sv{display:flex;align-items:baseline;gap:6px;font-family:var(--cond);font-weight:700;font-size:1.35rem;text-transform:uppercase;letter-spacing:.3px;flex:1;min-width:0}
.sv input{background:transparent;border:0;border-bottom:1px dashed var(--dash);border-radius:0;color:var(--txt);font:inherit;width:3.3ch;min-width:0;text-align:center;padding:0 0 1px}
.sv input.ld{width:3.2ch}
.sv input:focus{outline:0;border-bottom-color:var(--acc)}
.sv em{font-style:normal;font-size:.8rem;color:var(--mut)}
.sv i{font-style:normal;color:var(--mut);font-size:1.05rem}
.last{color:var(--last);font-size:.85rem;white-space:nowrap}
.xadd{display:block;width:100%;background:none;border:0;border-top:1px solid var(--line);color:var(--mut);text-align:left;padding:13px 0 8px;font-size:1rem;cursor:pointer}
.segp{display:flex;background:var(--inset);border:1px solid var(--line);border-radius:999px;padding:4px;margin:12px 0}
.segp button{flex:1;background:none;border:0;border-radius:999px;color:var(--mut);font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.5px;font-size:.95rem;padding:9px;cursor:pointer}
.segp button.on{background:#050605;color:#fff}

/* ---------- phone layout: floating tab bar, green gradient, condensed headings ---------- */
@media(max-width:699px){
  :root:not([data-mode=light]){--bg:#151715;--card:#1c1f1c;--card2:#262a26;--line:#2b302b}
  body{background-image:linear-gradient(180deg,var(--glow) 0,transparent 440px);background-repeat:no-repeat;padding-bottom:130px}
  .top{position:static;background:transparent;border:0;backdrop-filter:none}
  .top-in{padding:12px 14px 4px}
  .greet h1{font-family:var(--cond);text-transform:uppercase;font-size:1.15rem;letter-spacing:.5px}
  nav{position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:50;background:var(--surf);border:1px solid var(--line);border-radius:30px;padding:7px;gap:2px;box-shadow:0 8px 30px rgba(0,0,0,.55);max-width:none;overflow:visible;margin:0;justify-content:space-between}
  nav button{display:none;flex:1;flex-direction:column;align-items:center;gap:2px;padding:8px 2px;border-radius:22px;font-size:.7rem;color:var(--mut);background:transparent;border:0}
  nav button[data-pri],nav #nav-more{display:flex}
  nav button svg{display:block;width:22px;height:22px}
  nav button.on{background:var(--card2);color:var(--txt);font-weight:600}
  nav button.on svg{color:var(--acc)}
  h2,.d-hero .ttl{font-family:var(--cond);text-transform:uppercase;letter-spacing:.4px;font-size:1.3rem}
  .tile b,.d-hero .pct{font-family:var(--cond)}
  .tile b{font-size:2rem;font-weight:700}
  #restbar{bottom:86px;left:12px;right:12px;border:1px solid var(--acc);border-radius:22px}
  #toast{bottom:150px}
  .wrap{padding:8px 12px}
  .wk-title{font-size:3rem}
}
@media(min-width:1000px){nav{max-height:calc(100vh - 100px);overflow:auto;scrollbar-width:none}}

/* footer / credit */
.foot{text-align:center;color:var(--mut);font-size:.78rem;padding:18px 12px 6px}
.foot a{color:inherit}
.login .credit{margin:14px 0 0;text-align:center;font-size:.75rem}
.swatches{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.swatch{width:46px;height:46px;border-radius:50%;border:3px solid transparent;background:var(--sw);cursor:pointer;position:relative;padding:0;box-shadow:inset 0 0 0 2px var(--card)}
.swatch.on{border-color:var(--txt)}
.swlab{font-size:.7rem;color:var(--mut);text-align:center;margin-top:4px;display:block}
.swcol{display:flex;flex-direction:column;align-items:center}
@media(min-width:1000px){.foot{margin-left:100px}}

/* v2.3: past-day picker, set notes/effort, offline pill */
.wk-date{display:flex;align-items:center;gap:8px;margin:0 0 12px;flex-wrap:wrap}
.wk-date>button:not(.btn){width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--txt);font-size:1.5rem;line-height:1;cursor:pointer;padding:0}
.wk-date>button:disabled{opacity:.35;cursor:default}
.wd-mid{position:relative;flex:1;min-width:120px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--card);display:flex;align-items:center;justify-content:center;font-family:var(--cond);font-weight:700;font-size:1.1rem;letter-spacing:.4px;text-transform:uppercase;overflow:hidden}
.wd-mid input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;border:0}
button.sv.ed{background:none;border:0;color:inherit;text-align:left;cursor:pointer;padding:0;font-family:var(--cond);font-weight:700;font-size:1.35rem;text-transform:uppercase;letter-spacing:.3px;flex:1;min-width:0}
button.sv.ed::after{content:" \270E";font-size:.8rem;color:var(--mut)}
.chip{font-size:.72rem;font-weight:700;color:var(--acc2);background:var(--inset);border:1px solid var(--line);border-radius:999px;padding:2px 8px;white-space:nowrap}
.mr{background:none;border:1px solid var(--line);color:var(--mut);border-radius:8px;width:30px;height:30px;cursor:pointer;flex:0 0 auto;padding:0}
.srow-more{display:flex;gap:8px;padding:0 0 10px 38px}
.srow-more[hidden]{display:none}
.srow-more input{background:var(--card2);color:var(--txt);border:1px solid var(--line);border-radius:10px;padding:8px;min-width:0;font-size:.95rem}
.srow-more .rpe{width:7.5ch;flex:0 0 auto}
.srow-more .nt{flex:1}
.sync{border:1px solid var(--line);background:var(--card);color:var(--acc2);border-radius:999px;padding:5px 10px;font-size:.78rem;font-weight:700;cursor:pointer;white-space:nowrap}
.sync[hidden]{display:none}
.sync.off{color:#ffb020;border-color:#ffb020}
.srow-more .rpe{-moz-appearance:textfield;appearance:textfield}
.srow-more .rpe::-webkit-outer-spin-button,.srow-more .rpe::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* v2.4: plans and login extras */
.lockcard{border-style:dashed}
.lockbar{font-weight:700;color:var(--acc2);margin:0 0 8px;font-size:.9rem}
.card.locked{opacity:.78}
.swatch.lk{opacity:.35;cursor:not-allowed}
.plansel{width:auto;min-width:0;padding:6px 8px;font-size:.85rem}
.login{flex-direction:column;gap:12px;align-items:center;justify-content:center}
.login .box{margin:0}
#login a{color:var(--acc2)}

/* v2.4.2: wordmark logo (the PNG is only used as a mask, so it follows the theme colour in light and dark mode) */
.wm{display:block;aspect-ratio:720/315;-webkit-mask:url(logo-wordmark.png) center/contain no-repeat;mask:url(logo-wordmark.png) center/contain no-repeat;background:var(--txt)}
.brand .wm{height:30px}
.wm-lg{width:190px;margin:0 0 10px;background:var(--acc)}
@media(max-width:560px){.brand .wm{height:24px}}