/* ===== view-specific styles ===== */

/* ---- TODAY: muscle chips ---- */
.muscles{display:flex; gap:5px; flex-wrap:wrap; align-items:center;}
.mchip{
  display:inline-flex; align-items:center; gap:5px;
  background:var(--panel2); border:1px solid var(--line); border-radius:8px;
  padding:3px 8px; font-size:11px; font-weight:800; color:var(--muted); white-space:nowrap;
}
.mchip b{color:var(--lime); font-size:11px; font-variant-numeric:tabular-nums;}
.tag.muscle{color:#7fe6c4; border-color:rgba(52,224,161,.35);}
[data-theme="light"] .mchip b{color:#557f00;}
[data-theme="light"] .tag.muscle{color:#0c9b6a;}

/* up-next preview (rest & cardio days) */
.nextcard{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:15px; margin:12px 0;}
.nx-top{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.nx-lbl{font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--faint);}
.nx-t{font-size:17px; font-weight:800; margin-top:2px;}
.nx-d{font-size:12.5px; color:var(--muted); margin-top:1px;}
.nx-go{flex:0 0 auto; color:var(--lime); border-color:rgba(200,250,60,.3);}
[data-theme="light"] .nx-go{color:#557f00;}
.nx-m{margin-top:11px;}

/* ---- TODAY: daily quote ---- */
.quote{
  margin-top:12px; padding:11px 14px; border-radius:13px; font-size:13px; line-height:1.5;
  font-weight:600; font-style:italic; color:var(--muted);
  background:linear-gradient(135deg, rgba(200,250,60,.09), rgba(255,106,43,.07));
  border:1px solid rgba(200,250,60,.18);
}
.quote .qby{display:block; margin-top:3px; font-style:normal; font-weight:800; font-size:11px; color:var(--faint); letter-spacing:.04em;}
/* ticker: rotates quotes; min-height dampens reflow between short/long ones */
.quote{cursor:pointer; min-height:58px; display:flex; align-items:center;}
.quote .qslide{display:block; transition:opacity .26s ease, transform .26s ease;}
.quote .qslide.out{opacity:0; transform:translateY(-8px);}

/* ---- TODAY: day strip + date ---- */
.days{display:flex; gap:6px; overflow-x:auto; padding:12px 0 2px; scrollbar-width:none;}
.days::-webkit-scrollbar{display:none;}
.day{
  flex:0 0 auto; padding:9px 13px; border-radius:12px; background:var(--panel); border:1px solid var(--line);
  color:var(--muted); font-weight:800; font-size:13px; text-align:center; min-width:52px; position:relative; transition:.15s;
}
.day small{display:block; font-size:10px; font-weight:700; opacity:.8; margin-top:1px;}
.day.active{background:var(--grad); color:var(--lime-ink); border-color:transparent;}
.day.today::after{content:""; position:absolute; top:6px; right:7px; width:6px; height:6px; border-radius:50%; background:var(--orange);}
.day.rest{opacity:.7;}

.datebar{display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:10px 13px; margin:12px 0 4px; font-size:13px;}
.datebar input[type=date]{background:none; border:none; color:var(--text); font-weight:800; padding:0;}
.saved-pill{font-weight:800; font-size:12px; color:var(--faint); transition:.2s; display:flex; align-items:center; gap:5px;}
.saved-pill.ok{color:var(--good);}
.saved-pill.flash{animation:savedFlash .6s ease;}
@keyframes savedFlash{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}

/* progress bar (with a subtle shine sweep) */
.prog{display:flex; align-items:center; gap:10px; margin:14px 0 2px; font-size:12.5px; color:var(--muted); font-weight:700;}
.prog .bar{flex:1; height:8px; background:var(--panel2); border-radius:99px; overflow:hidden; border:1px solid var(--line);}
.prog .bar i{display:block; height:100%; width:0; background:var(--grad); transition:width .35s; position:relative; overflow:hidden;}
.prog .bar i::after{content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 25%, rgba(255,255,255,.5) 50%, transparent 75%);
  transform:translateX(-100%); animation:shine 2.6s ease-in-out infinite;}
@keyframes shine{55%,100%{transform:translateX(100%)}}

/* ---- exercise card ---- */
.ex{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); margin:12px 0; overflow:hidden; transition:border-color .2s;
  animation:cardin .34s cubic-bezier(.2,.8,.2,1) backwards;}
@keyframes cardin{from{opacity:0; transform:translateY(12px)}}
.ex.done{border-color:rgba(200,250,60,.5);}
.exhead{display:flex; align-items:flex-start; gap:11px; padding:14px 14px 10px;}
.exhead .idx{flex:0 0 auto; width:28px; height:28px; border-radius:9px; background:var(--panel2); display:grid; place-items:center;
  font-weight:900; font-size:13px; color:var(--muted); border:1px solid var(--line);}
.ex.done .exhead .idx{background:var(--grad); color:var(--lime-ink); border-color:transparent;}
.exmeta{flex:1; min-width:0;}
.exmeta h3{font-size:16px; line-height:1.2;}
.sub{color:var(--faint); font-size:12px; margin-top:5px; display:flex; gap:6px; flex-wrap:wrap;}
.tag{background:var(--panel2); border:1px solid var(--line); padding:3px 8px; border-radius:8px; font-weight:700; color:var(--muted); font-size:11px;}
.tag.rpe{color:#ffce85; border-color:rgba(255,194,75,.3);}
.tag.target{color:var(--lime); border-color:rgba(200,250,60,.3);}
.tag.custom{color:#cdb6ff; border-color:rgba(170,130,255,.35);}
.exright{display:flex; gap:6px; align-items:center; flex:0 0 auto;}
.swapbtn,.excol,.dicebtn{background:var(--panel2); border:1px solid var(--line); color:var(--muted); width:30px; height:28px; border-radius:8px; font-size:14px; padding:0; line-height:1;}
.swapbtn:active,.excol:active,.dicebtn:active{transform:scale(.92);}
.excol{transition:rotate .2s ease;}
.ex.collapsed .excol{rotate:-90deg;}
/* collapsed exercise card: hide the body, show a one-line summary */
.ex.collapsed .last,.ex.collapsed .coach,.ex.collapsed .demobtn,.ex.collapsed .demo,.ex.collapsed .sets,.ex.collapsed .est1rm{display:none;}
.exsum{display:none;}
.ex.collapsed .exsum{display:block; margin:0 14px 13px; font-size:12.5px; color:var(--muted); font-weight:600;}
.ex.collapsed .exsum b{color:var(--text);}
.collapseall{margin-left:auto; background:none; border:none; color:var(--muted); font-weight:800; font-size:11.5px; letter-spacing:.04em;}

.last{margin:0 14px 9px; padding:8px 11px; border-radius:10px; font-size:12px;
  background:rgba(170,130,255,.10); border:1px solid rgba(170,130,255,.22); color:#cdb6ff;}
.last b{color:#e6dcff;}
.last .none{color:var(--faint);}

.coach{margin:0 14px 10px; padding:9px 12px; border-radius:10px; font-size:12.5px;
  background:rgba(200,250,60,.10); border:1px solid rgba(200,250,60,.26); color:#d8f79a;}
.coach b{color:#eaffc0;}
.coach.hold{background:rgba(120,170,255,.10); border-color:rgba(120,170,255,.24); color:#bcd4ff;}
.coach.hold b{color:#e4eeff;}

.demobtn{margin:0 14px 11px; display:inline-flex; align-items:center; gap:6px; background:var(--panel2);
  border:1px solid var(--line); color:var(--lime); padding:8px 13px; border-radius:10px; font-weight:800; font-size:12px;}
.demobtn:active{transform:scale(.97);}
.demo{margin:0 14px 11px; display:none;}
.demo.open{display:block;}
.frames{position:relative; width:100%; max-width:300px; margin:0 auto; aspect-ratio:3/4; background:#fff; border-radius:12px; overflow:hidden; border:1px solid var(--line);}
.frames img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.frames img.f2{animation:flip 1.7s steps(1,end) infinite;}
@keyframes flip{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.frames .pos{position:absolute; left:8px; top:8px; background:rgba(10,11,13,.82); color:#fff; font-size:10.5px; font-weight:800; padding:3px 8px; border-radius:7px;}
.demo .cap{text-align:center; color:var(--faint); font-size:11px; margin-top:6px;}
/* step-by-step positioning */
.steps{margin-top:10px; background:var(--panel2); border:1px solid var(--line); border-radius:11px; padding:11px 13px;}
.steps-t{font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:6px;}
.steps ol{margin:0; padding-left:18px; font-size:12.5px; color:var(--text); line-height:1.55;}
.steps li{margin-bottom:4px;}
.demo .yt{display:flex; align-items:center; justify-content:center; gap:7px; margin-top:9px;
  background:rgba(255,77,87,.13); border:1px solid rgba(255,77,87,.28); color:#ff96a0; padding:10px; border-radius:10px; font-weight:800; font-size:13px;}
.demo .fail{display:none; text-align:center; color:var(--faint); font-size:12px; padding:14px;}
.demo.failed .frames{display:none;}
.demo.failed .fail{display:block;}

.sets{padding:0 12px 12px;}
.sethead,.setrow{display:grid; grid-template-columns:34px 1fr 1fr 1fr 34px; gap:7px; align-items:center;}
.sethead{font-size:10px; color:var(--faint); font-weight:800; text-transform:uppercase; letter-spacing:.08em; padding:2px 2px 7px;}
.sethead span{text-align:center;} .sethead span:first-child{text-align:left;}
.setrow{margin-bottom:7px;}
.setrow .sn{font-weight:900; color:var(--muted); font-size:13px; text-align:center;}
.setrow input{width:100%; min-width:0; text-align:center; font-weight:800; font-size:16px; padding:12px 4px; border-radius:10px;}
.setrow select{width:100%; min-width:0; text-align:center; text-align-last:center; font-weight:800; font-size:16px; padding:12px 2px; border-radius:10px;}
.setrow input.filled,.setrow select.filled{border-color:rgba(52,224,161,.55);}
/* weight / reps stepper: input + vertical +/- spinner */
.stepper{display:flex; align-items:stretch; min-width:0;}
.stepper input{flex:1; min-width:0; border-radius:10px 0 0 10px; border-right:none; padding-left:2px; padding-right:2px;}
.spin{display:flex; flex-direction:column; width:22px; flex:0 0 auto;}
.spin button{flex:1; min-height:0; background:var(--panel2); border:1px solid var(--line); color:var(--muted);
  font-size:13px; font-weight:800; line-height:1; padding:0; display:grid; place-items:center;}
.spin .inc{border-radius:0 10px 0 0; border-bottom:none;}
.spin .dec{border-radius:0 0 10px 0;}
.spin button:active{background:var(--lime); color:var(--lime-ink);}
.rmset{background:none; border:none; color:var(--faint); font-size:18px; padding:0;}
.addset{width:100%; margin-top:2px; background:var(--panel2); border:1px dashed var(--line); color:var(--muted); border-radius:10px; padding:10px; font-weight:800; font-size:13px;}
.addset:active{transform:scale(.99);}
.est1rm{display:none; margin:0 14px 13px; font-size:12px; color:var(--muted); background:var(--panel2);
  border:1px solid var(--line); border-radius:10px; padding:9px 12px;}
.est1rm.show{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.est1rm b{color:var(--lime); font-size:14px; font-variant-numeric:tabular-nums;}
.est1rm small{color:var(--faint);}

.addex{width:100%; margin:6px 0 2px; background:var(--panel2); border:1px dashed var(--line2); color:var(--muted); border-radius:12px; padding:14px; font-weight:800; font-size:14px;}
.addex:active{transform:scale(.99);}
.skipped{margin:12px 2px 0; font-size:12px; color:var(--faint);}
.skipped .schip{display:inline-flex; align-items:center; gap:5px; background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:5px 10px; margin:6px 6px 0 0; color:var(--muted); font-weight:700;}

.notes{width:100%; min-height:74px; border-radius:var(--r); padding:13px; resize:vertical; margin:6px 0 4px;}

/* finish button */
.finish{margin:18px 0 4px;}
.finish .btn{width:100%; font-size:16px; padding:17px;}

/* info blocks (cardio / rest days) */
.info{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:18px; margin:14px 0; line-height:1.55;}
.info .big{font-size:38px; margin-bottom:8px;}
.info h3{margin-bottom:8px; font-size:18px;}
.info ul{margin:8px 0 0; padding-left:18px; color:var(--muted);}
.cardio-row{display:grid; grid-template-columns:1fr 88px 34px; gap:8px; align-items:center; margin-bottom:8px;}
.cardio-row .cm{text-align:center; font-weight:800;}
#cardioRows + .addset{margin-top:2px;}

/* ---- PROGRESS ---- */
.pcard{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:15px; margin-bottom:13px;}
.pcard h3{font-size:15px; margin-bottom:2px;}
.pcard .psub{color:var(--muted); font-size:12.5px; margin-bottom:11px;}
.pcard select{width:100%; margin-bottom:11px; font-weight:700;}
.goalrow{display:flex; gap:8px; align-items:center; margin-bottom:11px;}
.goalrow input{flex:1; text-align:center; font-weight:800;}
.histcount{display:flex; gap:10px; margin-bottom:14px;}
.histcount .c{flex:1; background:var(--panel); border:1px solid var(--line); border-radius:13px; padding:14px; text-align:center;}
.histcount .c b{display:block; font-size:25px; font-weight:900;}
.histcount .c small{color:var(--muted); font-size:12px;}
.hday{background:var(--panel); border:1px solid var(--line); border-radius:13px; padding:13px; margin-bottom:10px;}
.hday .top{display:flex; justify-content:space-between; align-items:center; margin-bottom:7px;}
.hday .top b{font-size:14px;} .hday .top span{color:var(--muted); font-size:12px;}
.hday .ln{font-size:13px; color:var(--muted); padding:4px 0; border-top:1px dashed var(--line);}
.hday .ln b{color:var(--text);}

/* calorie-target hint */
.calhint{display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:10px 13px; margin:10px 0 2px; font-size:12.5px; color:var(--muted); line-height:1.5;}
.calhint b{color:var(--lime); font-variant-numeric:tabular-nums;}
[data-theme="light"] .calhint b{color:#557f00;}
.ch-add{background:var(--panel2); border:1px solid rgba(200,250,60,.35); color:var(--lime);
  border-radius:8px; padding:5px 11px; font-weight:800; font-size:12px;}
[data-theme="light"] .ch-add{color:#557f00;}
.ch-ok{color:var(--good); font-weight:800;}

/* ---- FEED ---- */
.fp-filter{display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--panel2); border:1px solid var(--line); border-radius:12px;
  padding:9px 13px; margin:12px 0 2px; font-size:13px; color:var(--muted);}
.fp-filter b{color:var(--text);}
.fp-who{cursor:pointer;}
.fp-use{margin-left:auto; background:var(--panel2); border:1px solid rgba(200,250,60,.35); color:var(--lime);
  border-radius:999px; padding:7px 14px; font-weight:800; font-size:13px;}
.fp-use:active{transform:scale(.94);}
[data-theme="light"] .fp-use{color:#557f00;}
.fpost{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:14px 15px; margin:12px 0;
  animation:cardin .35s ease backwards;}
.fp-head{display:flex; align-items:center; gap:10px;}
.fp-who{flex:1; min-width:0;}
.fp-who b{display:block; font-size:14.5px;}
.fp-who small{color:var(--faint); font-size:11.5px;}
.fp-head .avatar{width:38px; height:38px;}
.fp-del{background:none; border:none; color:var(--faint); font-size:15px; padding:4px;}
.fp-title{font-size:16.5px; font-weight:800; margin-top:10px;}
.fp-title small{color:var(--muted); font-weight:600; font-size:12.5px;}
.fp-cap{margin-top:6px; font-size:14px; color:var(--text); line-height:1.5;}
.fp-stats{display:flex; gap:6px; flex-wrap:wrap; margin-top:10px;}
.fp-stat{background:var(--panel2); border:1px solid var(--line); border-radius:9px; padding:5px 10px;
  font-size:12px; font-weight:700; color:var(--muted);}
.fp-stat b{color:var(--lime); font-variant-numeric:tabular-nums;}
[data-theme="light"] .fp-stat b{color:#557f00;}
.fp-prs{margin-top:9px;}
/* exercise carousel (instagram-style) */
.car{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:0;
  margin-top:11px; border-radius:13px; border:1px solid var(--line); scrollbar-width:none; overscroll-behavior-x:contain;}
.car::-webkit-scrollbar{display:none;}
.car-item{flex:0 0 100%; scroll-snap-align:center; min-width:0; background:var(--panel2);}
.car-img{position:relative; aspect-ratio:4/3; background:#fff;}
.car-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:8px;}
.car-img img.b{opacity:0; animation:flip 1.7s steps(1,end) infinite;}
.car-img.car-ph{display:grid; place-items:center; font-size:54px; background:var(--panel2);}
.car-cap{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 12px;
  background:var(--panel2); border-top:1px solid var(--line);}
.car-cap b{font-size:13px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.car-cap span{flex:0 0 auto; font-size:12px; font-weight:800; color:var(--lime); font-variant-numeric:tabular-nums;}
[data-theme="light"] .car-cap span{color:#557f00;}
.car-dots{display:flex; justify-content:center; gap:5px; margin-top:8px;}
.car-dots i{width:6px; height:6px; border-radius:50%; background:var(--line2); transition:.2s;}
.car-dots i.on{background:var(--lime); transform:scale(1.25);}
[data-theme="light"] .car-dots i.on{background:#97cf12;}
/* collapsed description */
.fp-cap-peek{display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;}
.fp-more{background:none; border:none; color:var(--faint); font-weight:800; font-size:12px;
  padding:7px 0 0; display:block;}
.fp-pr{font-size:12.5px; font-weight:700; color:#ffb38a; padding:2px 0;}
.fp-foot{display:flex; align-items:center; margin-top:11px; padding-top:10px; border-top:1px solid var(--line);}
.fp-like{background:var(--panel2); border:1px solid var(--line); color:var(--muted);
  border-radius:999px; padding:7px 16px; font-weight:800; font-size:14px; transition:.15s;}
.fp-like b{font-variant-numeric:tabular-nums;}
.fp-like:active{transform:scale(.94);}
.fp-like.liked{background:var(--grad); color:var(--lime-ink); border-color:transparent;}

/* ---- PROGRESS: muscle balance ---- */
.mb-row{display:grid; grid-template-columns:92px 1fr 30px; gap:10px; align-items:center; margin-bottom:9px;}
.mb-name{font-size:12px; font-weight:700; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mb-bar{height:12px; background:var(--panel2); border:1px solid var(--line); border-radius:99px; overflow:hidden;}
.mb-bar i{display:block; height:100%; border-radius:99px; transform-origin:left;
  animation:mbgrow .55s cubic-bezier(.2,.8,.2,1) backwards;}
.mb-bar i.hot{background:var(--grad);}
.mb-bar i.ok{background:rgba(52,224,161,.55);}
.mb-bar i.low{background:rgba(255,194,75,.55);}
.mb-n{font-size:13px; font-weight:800; text-align:right; font-variant-numeric:tabular-nums;}
@keyframes mbgrow{from{transform:scaleX(0);}}
@media (prefers-reduced-motion: reduce){ .mb-bar i{animation:none !important;} }

/* ---- FUEL ---- */
.ftiles{display:flex; gap:10px; margin-bottom:6px;}
.ftile{flex:1; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:16px 10px; text-align:center;}
.ftile b{display:block; font-size:28px; font-weight:900; font-variant-numeric:tabular-nums;}
.ftile.kcal b{color:var(--lime);} .ftile.pro b{color:var(--good);}
.ftile small{color:var(--muted); font-size:11px;}
.fmeta{color:var(--faint); font-size:12px; margin:4px 2px 14px; line-height:1.55;}
.flog .frow{margin-bottom:13px;}
.flog .frow .top{display:flex; justify-content:space-between; font-size:13px; font-weight:800; margin-bottom:6px;}
.flog .frow .top span:last-child{color:var(--muted); font-weight:700;}
.fbar{height:10px; background:var(--panel2); border-radius:99px; overflow:hidden; border:1px solid var(--line);}
.fbar i{display:block; height:100%; width:0; background:var(--grad); transition:width .3s;}
.fbar i.over{background:var(--grad-hot);}
.flog input{width:100%; text-align:center; font-weight:800; margin-top:8px;}
.fgrid{display:grid; grid-template-columns:1fr 1fr; gap:9px;}
.fgrid .fld{display:flex; flex-direction:column; gap:5px; min-width:0;}
.fgrid .fld input,.fgrid .fld select{width:100%; min-width:0;}
.fgrid .fld span{font-size:11px; color:var(--muted); font-weight:800; letter-spacing:.04em;}

/* ---- MORE / settings ---- */
.srow{display:flex; gap:10px; align-items:center; padding:13px 2px; border-bottom:1px solid var(--line);}
.srow .t{flex:1;} .srow .t b{display:block;} .srow .t small{color:var(--muted);}
.bwlog{display:flex; gap:8px; margin-top:8px;}
.bwlog input{flex:1; text-align:center; font-weight:800;}
.cardio-opts{display:flex; gap:10px;}
.cardio-opts label{display:flex; align-items:center; gap:7px; background:var(--panel2); border:1px solid var(--line); padding:10px 13px; border-radius:11px; font-weight:700;}

/* ---- ACCOUNT / cloud ---- */
.account{padding:14px;}
.acc-row{display:flex; align-items:center; gap:12px;}
.acc-row .t{flex:1;} .acc-row .t b{display:block; font-size:15px;} .acc-row .t small{color:var(--muted);}
.acc-row .t small[data-s=synced]{color:var(--good);} .acc-row .t small[data-s=error]{color:var(--hot);}
.avatar{width:42px; height:42px; border-radius:50%; object-fit:cover; flex:0 0 auto; border:1px solid var(--line2);}
.avatar.ph{display:grid; place-items:center; background:var(--grad); color:var(--lime-ink); font-weight:900; font-size:18px;}
.acc-actions{display:flex; gap:8px; margin-top:12px;} .acc-actions .mini{flex:1; text-align:center;}
.acc-err{margin-top:10px; padding:9px 12px; border-radius:10px; font-size:12.5px; line-height:1.5;
  background:rgba(255,77,87,.10); border:1px solid rgba(255,77,87,.3); color:#ff96a0; font-weight:600;}
.account code{background:var(--panel2); border:1px solid var(--line); border-radius:5px; padding:1px 5px; font-size:11px;}
.gbtn{width:100%; margin-top:12px; display:flex; align-items:center; justify-content:center; gap:10px;
  background:#fff; color:#1f1f1f; border:none; border-radius:12px; padding:13px; font-weight:800; font-size:14px;}
.gbtn:active{transform:scale(.98);}
.gbtn .g{display:grid; place-items:center; width:20px; height:20px; border-radius:50%;
  background:conic-gradient(#ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0); color:#fff; font-weight:900; font-size:12px;}

/* ---- PROGRESS PHOTOS ---- */
.photo-add{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px;}
.photo-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:4px;}
.photo{margin:0; background:var(--panel); border:1px solid var(--line); border-radius:13px; overflow:hidden;}
.photo img{width:100%; aspect-ratio:3/4; object-fit:cover; display:block; background:var(--panel2);}
.photo figcaption{display:flex; align-items:center; justify-content:space-between; gap:6px; padding:8px 10px; font-size:11.5px; color:var(--muted);}
.ph-del{background:none; border:none; color:var(--faint); font-size:14px; padding:0 2px;}

/* ---- EXERCISE PICKER ---- */
#pickSheet{height:min(86vh,720px);}
#pickSheet .sbody{display:flex; flex-direction:column; overflow:hidden;}
#pickSearch{width:100%; flex:0 0 auto; margin-bottom:10px; font-size:16px;}
.pick-filters{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; flex:0 0 auto;}
.pick-filters select{width:100%; font-weight:700;}
.pick-list{flex:1; min-height:0; overflow:auto; display:flex; flex-direction:column; gap:8px;}
.pick-item{display:flex; flex-direction:column; align-items:flex-start; gap:3px; text-align:left;
  background:var(--panel); border:1px solid var(--line); border-radius:11px; padding:12px 13px;}
.pick-item:active{transform:scale(.99); border-color:var(--lime);}
.pick-item .pn{font-weight:800; font-size:14px; color:var(--text);}
.pick-item .pmeta{font-size:11.5px; color:var(--muted); text-transform:capitalize;}
.pick-add{background:var(--panel2); border:1px dashed var(--lime); color:var(--text); border-radius:11px;
  padding:13px; font-weight:800; font-size:13px;}
.pick-empty{color:var(--faint); text-align:center; padding:24px 16px; font-size:13px;}
.pick-recent{margin-bottom:4px;}
.pr-lbl{font-size:11px; color:var(--faint); font-weight:800; text-transform:uppercase; letter-spacing:.08em; margin:0 2px 8px;}
.pr-chips{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:6px;}
.pr-chip{background:var(--panel2); border:1px solid var(--line); color:var(--text); border-radius:999px; padding:8px 13px; font-weight:700; font-size:12.5px;}
.pr-chip:active{transform:scale(.97); border-color:var(--lime);}

/* ---- PLATE ---- */
.plate-input{width:100%; font-weight:900; font-size:22px; text-align:center; padding:14px;}
.plate-row{display:flex; gap:8px; flex-wrap:wrap;}
.plate-result{margin-top:6px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px; text-align:center;}
.plate-side{color:var(--muted); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px;}
.plate-vis{display:flex; gap:6px; justify-content:center; align-items:center; flex-wrap:wrap; min-height:48px; margin-bottom:12px;}
.pl{color:#fff; font-weight:800; font-size:12px; padding:8px 11px; border-radius:8px; text-shadow:0 1px 2px rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.18); white-space:nowrap;}
.plate-list{color:var(--text); font-weight:700; font-size:13.5px;} .plate-list b{color:var(--lime);}
.plate-warn{color:var(--warn); font-size:12.5px; margin-top:10px; font-weight:600;}
.plate-empty{color:var(--faint); font-size:13px;}

/* ---- SUMMARY ---- */
.sumhero{text-align:center; padding:8px 0 14px;}
.sumhero .big{font-size:46px;}
.sumhero h3{margin:8px 0 2px; font-size:22px;}
.sumhero p{color:var(--muted); margin:0; font-size:13px;}
.sumstats{display:flex; gap:8px; margin-bottom:14px;}
.sumstats .stat b{font-size:20px;}
.prlist{background:var(--panel); border:1px solid rgba(255,106,43,.32); border-radius:14px; padding:15px; margin-bottom:13px;}
.prlist h4{margin-bottom:9px; font-size:14px; color:#ffb38a;}
.prlist .ln{font-size:13.5px; padding:4px 0; color:var(--text);}
.prlist .ln b{color:#ffb38a;}

/* ===== responsive breakpoints ===== */
/* small phones (iPhone SE / 320–360px) — tighten the dense logging grid */
@media (max-width:360px){
  .topbar h1{font-size:21px;}
  .wrap{padding:0 12px;}
  .sethead,.setrow{grid-template-columns:24px 1fr 1fr 1fr 24px; gap:5px;}
  .sethead{font-size:9px;}
  .setrow input{font-size:16px; padding:11px 2px;}
  .exhead{gap:8px; padding:12px 11px 8px;}
  .exmeta h3{font-size:15px;}
  .day{min-width:48px; padding:8px 10px;}
  .ftile b{font-size:24px;}
  .photo-add{grid-template-columns:1fr;}
  .sumstats{gap:6px;}
}
/* very narrow — let the rest-timer presets wrap to 2 rows instead of squishing */
@media (max-width:330px){
  .rp-presets{grid-template-columns:repeat(3,1fr);}
}
/* landscape phones — shorter sheets so they don't exceed the viewport */
@media (max-height:500px){
  .sheet{max-height:94vh;}
  .frames{max-width:200px;}
}
/* tablet / desktop — the column stays centered; give headings a touch more size */
@media (min-width:720px){
  .topbar h1{font-size:27px;}
  .photo-grid{grid-template-columns:1fr 1fr 1fr;}
}