*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --maroon:#802A2A;--maroon-l:#A03535;--bg:#090C12;--surface:#0F1419;
  --card:#141B24;--card-h:#1A2330;--border:#1E2A38;
  --text:#E2E8F0;--muted:#64748B;--faint:#334155;
  --green:#10B981;--amber:#F59E0B;--red:#FF6B6B;
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
}
*{font-family:var(--font)}
body{background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;min-height:100vh}
.layout{display:flex;min-height:100vh}
.sidebar{width:230px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100vh;overflow-y:auto;z-index:50}
.main{margin-left:230px;flex:1;min-height:100vh}
.page{padding:36px 40px;max-width:1600px}
.card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px 14px}
.lbl{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
input,select{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:9px 12px;color:var(--text);font-size:13px;outline:none;width:100%;cursor:pointer}
input:focus,select:focus{border-color:var(--maroon-l)}
select option{background:var(--surface)}
.btn-p{background:var(--maroon);border:none;border-radius:8px;padding:10px 20px;color:#FFE5E5;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
.btn-p:hover{background:var(--maroon-l)}
.btn-g{background:transparent;border:1px solid var(--border);border-radius:8px;padding:8px 16px;color:var(--muted);font-size:13px;cursor:pointer}
.btn-g:hover{border-color:#2A3848;color:var(--text)}
.btn-d{background:#3A0808;border:1px solid #5A1A1A;border-radius:8px;padding:8px 16px;color:#FF8080;font-size:13px;cursor:pointer}
.btn-m{background:transparent;border:1px solid var(--border);border-radius:8px;padding:8px 14px;color:var(--muted);font-size:12px;cursor:pointer}
.btn-m.on{background:rgba(128,42,42,.25);border-color:var(--maroon);color:#FF9090;font-weight:700}
.nav-btn{display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:8px;border:none;cursor:pointer;font-size:15px;font-weight:600;background:transparent;color:var(--muted);text-align:left;width:100%}
.nav-btn:hover{background:var(--card);color:var(--text)}
.nav-btn.on{background:rgba(128,42,42,.2);color:#FF9090;font-weight:700}
.fl{display:flex}.fl-c{align-items:center}.fl-b{justify-content:space-between}.wrap{flex-wrap:wrap}.gap8{gap:8px}.gap12{gap:12px}
table{width:100%;border-collapse:collapse}
th{padding:12px 16px;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;text-align:left;border-bottom:1px solid var(--border)}
td{padding:14px 16px;border-bottom:1px solid rgba(30,42,56,.5);vertical-align:middle}
tr:last-child td{border-bottom:none}
.ath-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:12px}
.ath-pick{cursor:pointer;display:block;margin-bottom:6px}
.ath-pick:hover .ath-name{color:#FF9090}
.ath-av{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;margin-bottom:7px}
.ath-name{font-size:13px;font-weight:700;color:var(--text);margin-bottom:6px;transition:color .15s;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.set-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;margin-top:4px}
.ex-row{border-radius:8px;padding:6px 10px;margin-bottom:4px;border:1px solid}
.ex-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.wb-bar{display:flex;gap:3px;margin-top:6px}
.wb-btn{flex:1;height:32px;border-radius:6px;border:none;cursor:pointer;font-size:11px;font-weight:700}
.tot-bar{background:#120808;border:1px solid var(--maroon);border-radius:12px;padding:16px 24px;display:flex;align-items:center;gap:40px;margin-top:16px;flex-wrap:wrap}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.78);display:flex;align-items:center;justify-content:center;z-index:200;backdrop-filter:blur(3px)}
.modal{background:#141B24;border:1px solid var(--border);border-radius:16px;padding:30px;width:460px;max-width:92vw;max-height:90vh;overflow-y:auto}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-g{margin-bottom:14px}
.tag{display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700}
.sh{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.sh-t{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
.sh-l{flex:1;height:1px;background:var(--border)}
.spinner{display:inline-block;width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--maroon);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{position:fixed;bottom:24px;right:24px;background:#1A2A1A;border:1px solid #10B981;border-radius:10px;padding:12px 20px;color:#10B981;font-weight:600;font-size:13px;z-index:999;animation:fadein .3s ease}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ══════════════════════════════════════════════════
   PWA MOBILE OPTIMISATION
   Touch targets · Safe area · Responsive grid
══════════════════════════════════════════════════ */

/* Safe area insets for iPhone notch / home bar */
body{padding-bottom:env(safe-area-inset-bottom,0px)}
.sidebar{padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
.page{padding-bottom:calc(80px + env(safe-area-inset-bottom,0px))}

/* Minimum 44×44px touch targets (iOS HIG requirement) */
button,
input[type=button],
input[type=submit],
.btn-p,.btn-g,.btn-d,.btn-m,.nav-btn,
.wb-btn,.ath-pick{
  min-height:44px;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  cursor:pointer;
}
select,input[type=text],input[type=number],input[type=date],textarea{
  min-height:44px;
  font-size:16px !important; /* Prevents iOS auto-zoom on focus */
  touch-action:manipulation;
}

/* Slider: wider thumb for thumb-touch */
input[type=range]{
  height:28px;
  padding:4px 0;
  touch-action:manipulation;
  cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  width:28px !important;
  height:28px !important;
}
input[type=range]::-moz-range-thumb{
  width:28px;
  height:28px;
}

/* Set grid: 4+4 layout on small screens so cells stay legible */
@media(max-width:640px){
  .set-grid{grid-template-columns:repeat(4,1fr) !important;gap:5px}
  .main{margin-left:0 !important}
  .sidebar{
    position:fixed;left:-240px;top:0;bottom:0;z-index:200;
    transition:left .25s;width:220px;
    box-shadow:4px 0 24px rgba(0,0,0,.6);
  }
  .sidebar.open{left:0}
  .page{padding:12px 10px}
  .stats-grid{grid-template-columns:repeat(2,1fr) !important}
  .ath-grid{grid-template-columns:repeat(2,1fr) !important}
  .form-row{flex-direction:column !important}
  .form-g{min-width:unset !important;width:100% !important}
  .modal{max-width:96vw !important;width:96vw !important;margin:8px}
  .ex-top{flex-wrap:wrap !important;gap:6px !important}
  select{padding-right:28px !important;font-size:13px !important}
  table{font-size:12px}
  th,td{padding:6px 8px !important}
  .tot-bar{gap:0 !important}
  /* Info row cards wrap on mobile */
  .info-row{flex-wrap:wrap !important;gap:8px !important}
  .card{min-width:unset !important}
  /* Programme banner stacks */
  .prog-banner{flex-direction:column !important;gap:8px !important}
}

/* Mobile nav toggle button (shown only on small screens) */
.mob-menu-btn{
  display:none;position:fixed;top:12px;left:12px;z-index:300;
  width:44px;height:44px;border-radius:10px;border:1px solid var(--border);
  background:var(--card);color:var(--text);font-size:20px;cursor:pointer;
  align-items:center;justify-content:center;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
@media(max-width:640px){
  .mob-menu-btn{display:flex}
  .main{padding-left:0 !important}
}

/* Side-scroll prevention on mobile */
@media(max-width:640px){
  html,body{overflow-x:hidden;max-width:100vw}
  .app-header{padding-top:env(safe-area-inset-top,0px)}
}

/* Larger set cells on mobile for thumb accuracy */
@media(max-width:640px){
  .set-grid>div{
    padding:9px 3px !important;
    border-radius:8px !important;
  }
  .set-grid .set-kg{font-size:20px !important}
  .set-grid .set-reps{font-size:12px !important}
}

/* Bottom safe area for buttons near home indicator */
.send-email-btn{
  margin-bottom:calc(8px + env(safe-area-inset-bottom,0px));
}