/* ===== GymLog theme — energetic gym aesthetic ===== */
:root{
  /* surfaces */
  --bg:#0a0b0d; --bg2:#0f1115; --panel:#15181e; --panel2:#1d212a; --elev:#242a35;
  --line:#2a313d; --line2:#39414f;
  /* ink */
  --text:#f3f6fa; --muted:#98a2b2; --faint:#67707e;
  /* brand — electric lime + orange energy */
  --lime:#c8fa3c; --lime-d:#a6e016; --lime-ink:#16230a;
  --orange:#ff6a2b; --good:#34e0a1; --warn:#ffc24b; --hot:#ff4d57;
  /* aliases used across ported components */
  --accent:var(--lime); --accent2:var(--orange);
  --grad:linear-gradient(135deg,#d3ff4e,#a6e016);
  --grad-hot:linear-gradient(135deg,#ff8a3d,#ff5530);
  /* form focus */
  --focus-bg:#222838;
  /* metrics */
  --r:16px; --r-sm:11px; --tabbar-h:64px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0;}
html{overflow-x:hidden;}
img,svg,video{max-width:100%;}
/* min-width:0 lets controls shrink inside flex/grid tracks instead of overflowing */
input,select,textarea{max-width:100%; min-width:0;}

/* native-app feel: no double-tap zoom, no text-selection/callouts on UI chrome */
*{touch-action:manipulation;}
body{user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;}
input,textarea{user-select:text; -webkit-user-select:text;}
img{-webkit-user-drag:none;}
body{
  background:radial-gradient(120% 80% at 50% -10%, #12151b 0%, var(--bg) 60%) fixed;
  color:var(--text);
  font:15px/1.5 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:contain;
  min-height:100vh;
}
input,button,select,textarea{font:inherit;}
button{cursor:pointer;}
a{color:var(--lime); text-decoration:none;}

/* typography helpers */
h1,h2,h3,h4{margin:0; font-weight:800; letter-spacing:-.02em;}
.eyebrow{font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--faint);}
.num{font-variant-numeric:tabular-nums;}

/* layout — content column, centered on wide screens */
.wrap{width:100%; max-width:680px; margin:0 auto; padding:0 16px;}
.view{display:none;}
.view.active{display:block; animation:viewIn .26s cubic-bezier(.2,.8,.2,1);}
@keyframes viewIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}

/* scroll region: leave room for the tab bar + safe area */
#root{ padding-bottom:calc(var(--tabbar-h) + var(--safe-b) + 16px); }

/* buttons */
.btn{
  border:none; border-radius:13px; padding:15px 18px; font-weight:800; font-size:15px;
  letter-spacing:.01em; transition:transform .12s ease, filter .12s ease; color:var(--text);
  background:var(--panel2); border:1px solid var(--line);
}
.btn:active{transform:scale(.97);}
.btn.primary{background:var(--grad); color:var(--lime-ink); border:none; box-shadow:0 8px 22px -8px rgba(200,250,60,.5);}
.btn.primary:active{filter:brightness(.96);}
.btn.block{width:100%; display:flex; align-items:center; justify-content:center; gap:8px;}
.btn.lg{padding:17px; font-size:16px;}
.mini{background:var(--panel2); border:1px solid var(--line); color:var(--text); border-radius:10px; padding:10px 14px; font-weight:700;}
.mini:active{transform:scale(.96);}
.mini.danger{color:var(--hot); border-color:rgba(255,77,87,.32);}

.iconbtn{
  background:var(--panel2); border:1px solid var(--line); color:var(--text);
  width:40px; height:40px; border-radius:12px; font-size:18px; display:grid; place-items:center;
  transition:transform .12s;
}
.iconbtn:active{transform:scale(.9);}
.iconbtn.sm{width:34px; height:34px; border-radius:10px; font-size:15px; flex:0 0 auto;}

/* inputs — 16px floor so iOS Safari never auto-zooms on focus */
input,textarea,select{
  background:var(--panel2); border:1px solid var(--line); color:var(--text);
  border-radius:11px; padding:12px; outline:none; transition:border-color .12s, background .12s;
  font-size:16px;
}
input:focus,textarea:focus,select:focus{border-color:var(--lime); background:var(--focus-bg);}
input::placeholder,textarea::placeholder{color:#566; }
input[type=number]{-moz-appearance:textfield;}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}

.label{font-size:11px; color:var(--muted); font-weight:800; letter-spacing:.1em; text-transform:uppercase; margin:18px 2px 8px;}
.tipbox{font-size:12.5px; color:var(--faint); margin:10px 2px 2px; line-height:1.55;}
.empty{text-align:center; color:var(--faint); padding:42px 20px;}

/* utility */
.row{display:flex;} .gap8{gap:8px;} .between{justify-content:space-between;} .center{align-items:center;}

/* ===== LIGHT THEME ===== */
[data-theme="light"]{
  --bg:#f5f7f9; --bg2:#eef1f5; --panel:#ffffff; --panel2:#f1f4f8; --elev:#e8edf2;
  --line:#e3e8ee; --line2:#cdd5df;
  --text:#101620; --muted:#566173; --faint:#8a94a1;
  --lime:#bef03a; --lime-d:#97cf12; --lime-ink:#1a2b05;
  --grad:linear-gradient(135deg,#c6f24c,#97cf12);
  --focus-bg:#ffffff;
}
[data-theme="light"] body{ background:radial-gradient(120% 80% at 50% -10%, #ffffff 0%, var(--bg) 60%) fixed; }
[data-theme="light"] .tabbar{ background:#ffffff; }
[data-theme="light"] .frames{ background:#eef0f3; }
/* accent-as-text needs darker shades to stay readable on light surfaces */
[data-theme="light"] .tag.target,[data-theme="light"] .demobtn,[data-theme="light"] .est1rm b,
[data-theme="light"] .plate-list b,[data-theme="light"] .chip.sel,[data-theme="light"] .rph span,
[data-theme="light"] .rp-presets button.sel,[data-theme="light"] .tabbar button.active,
[data-theme="light"] .ftile.kcal b,[data-theme="light"] .chart text.lastval{ color:#557f00; fill:#557f00; }
[data-theme="light"] .pill.lift{ color:#456800; }
[data-theme="light"] .ftile.pro b{ color:#0c9b6a; }
[data-theme="light"] .ontrack.good{ color:#0a7a52; }
[data-theme="light"] .ontrack.warn{ color:#946200; }
[data-theme="light"] .coach{ color:#3f6500; } [data-theme="light"] .coach b{ color:#2c4a00; }
[data-theme="light"] .coach.hold{ color:#2b5599; } [data-theme="light"] .coach.hold b{ color:#1f3f77; }
[data-theme="light"] .last{ color:#6a51ad; } [data-theme="light"] .last b{ color:#48318c; }