@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Poppins:wght@800&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600&display=swap');

  :root {
    /* ===== Brand palette — single source of truth =====
       Change brandColor / attentionColor here and the whole app follows.
       Everything (CSS + JS inline styles) references these var()s, never raw hex. */
    --primary: #16B364;            /* brand green (LogMySession "session" green) */
    --primary-dark: #0E8F4E;       /* deep green — pressed/active accents */
    --primary-light: #2CC678;
    --primary-lighter: #D7F0E2;    /* the one green tint background (kit mint) */
    --primary-border: #ABE3C8;     /* the one green tint border */
    --primary-rgb: 22,179,100;     /* for rgba() glows/shadows */
    --attention: #C2410C;          /* renewal / payment-due / low / warning */
    --attention-dark: #9A3412;
    --attention-light: #FBEAE2;
    --attention-border: #F0C2A8;
    --attention-rgb: 194,65,12;
    --accent: var(--attention);
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;
    /* success / paid / bonus all map to brand green */
    --success: var(--primary);
    --success-light: var(--primary-lighter);
    --success-dark: var(--primary-dark);
    /* warning maps to attention rust */
    --warning: var(--attention);
    --warning-light: var(--attention-light);
    --warning-dark: var(--attention-dark);
    /* danger = destructive (delete/remove) ONLY — stays red */
    --danger: #DC2626;
    --danger-light: #FEF2F2;
    --danger-dark: #B91C1C;
    /* muscle-group tag tints (exercise picker) — soft bg + readable fg */
    --cat-chest-bg: #FEE2E2;     --cat-chest-fg: #B91C1C;
    --cat-back-bg: #DBEAFE;      --cat-back-fg: #1D4ED8;
    --cat-shoulders-bg: #EDE9FE; --cat-shoulders-fg: #6D28D9;
    --cat-arms-bg: #FFEDD5;      --cat-arms-fg: #C2410C;
    --cat-legs-bg: #DCFCE7;      --cat-legs-fg: #15803D;
    --cat-core-bg: #FEF3C7;      --cat-core-fg: #B45309;
    --cat-cardio-bg: #E0F2FE;    --cat-cardio-fg: #0369A1;
    --cat-custom-bg: #F1F5F9;    --cat-custom-fg: #475569;
    /* semantic aliases (read clearly at call sites, stay centralized) */
    --paid: var(--primary);
    --paid-bg: var(--primary-lighter);
    --pending: var(--attention);
    --pending-bg: var(--attention-light);
    --bonus-bg: var(--primary-lighter);
    --bg: #f8fafc;
    --card-bg: #ffffff;
    --card-border: #e2e8f0;
    --text: #0f172a;
    --text-secondary: #64748b;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07),0 2px 4px -1px rgba(0,0,0,0.04);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08),0 4px 6px -2px rgba(0,0,0,0.04);
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --transition: 200ms cubic-bezier(0.4,0,0.2,1);
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; background: var(--bg); }

  body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg); color: var(--text); min-height: 100vh;
    display: flex; justify-content: center;
    /* env() insets are 0 outside notched native/PWA contexts, so this renders
       identically on web; in the Capacitor app it keeps content clear of the
       notch and home indicator (viewport-fit=cover in index.html). */
    padding: calc(0.6rem + env(safe-area-inset-top))
             calc(0.75rem + env(safe-area-inset-right))
             calc(0.6rem + env(safe-area-inset-bottom))
             calc(0.75rem + env(safe-area-inset-left));
    line-height: 1.6; -webkit-font-smoothing: antialiased;
  }

  .container { width: 100%; max-width: 520px; }

  .brand { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; padding: 0 0.1rem; }
  .brand-icon { width: 28px; height: 28px; background: linear-gradient(135deg, var(--primary), var(--primary-light)); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 5px rgba(var(--primary-rgb),0.25); }
  .brand-icon span { font-size: 0.85rem; font-weight: 800; color: #fff; }
  .brand-name { font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; background: linear-gradient(135deg, var(--primary), var(--primary-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; }
  .brand-bar { display: none; }
  h1 { font-size: 1.2rem; font-weight: 700; margin-bottom: 0.75rem; text-align: center; letter-spacing: -0.01em; }
  h2 { font-size: 1rem; font-weight: 600; margin-bottom: 0.75rem; letter-spacing: -0.01em; color: var(--gray-800); }

  .text-secondary { color: var(--text-secondary); font-size: 0.875rem; }
  .text-center { text-align: center; }
  .flex-row { display: flex; align-items: center; gap: 0.75rem; }

  /* Cards */
  .card {
    background: var(--card-bg); border-radius: var(--radius-lg); padding: 1rem;
    margin-bottom: 0.75rem; border: 1px solid var(--card-border);
    box-shadow: var(--shadow-sm); transition: box-shadow var(--transition), transform var(--transition);
  }
  .card:hover { box-shadow: var(--shadow-md); }

  /* Profile header — clean white header, brand color used only on the avatar */
  .profile-card {
    background: #fff; color: var(--gray-800); border: 1px solid var(--card-border);
    padding: 0; overflow: hidden;
    margin-bottom: 0; border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }
  .profile-header {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 1rem 1.1rem;
  }
  .profile-info { flex: 1; min-width: 0; }
  .profile-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.1rem; color: #fff; flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(var(--primary-rgb),0.28);
  }
  .profile-name { font-weight: 800; font-size: 1.05rem; letter-spacing: -0.02em; line-height: 1.2; color: var(--gray-900); }
  .profile-subtitle { font-size: 0.75rem; color: var(--gray-500); margin-top: 2px; line-height: 1.2; }
  /* Subtle ghost-pill affordance for header actions (Sign out / Not you?) */
  .profile-action {
    font-size: 0.7rem; font-weight: 600; color: var(--gray-500); white-space: nowrap;
    background: var(--gray-50); border: 1px solid var(--gray-200);
    padding: 0.3rem 0.65rem; border-radius: 100px; cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
  }
  .profile-action:hover { background: var(--gray-100); color: var(--gray-700); border-color: var(--gray-300); }
  .profile-actions { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }

  /* Session ring */
  /* Session ring — styled via .count-circle because JS sets className = 'count-circle' */
  .count-circle {
    display: grid; place-items: center;
    width: 120px; height: 120px;
    margin: 0 auto 0.75rem;
  }
  .session-ring-svg { grid-area: 1/1; width: 120px; height: 120px; }
  .ring-bg { fill: none; stroke: var(--gray-100); stroke-width: 8; }
  .ring-fill {
    fill: none; stroke: var(--primary); stroke-width: 8; stroke-linecap: round;
    transition: stroke-dashoffset 1s cubic-bezier(0.4,0,0.2,1), stroke 0.3s ease;
  }
  .session-ring-text { grid-area: 1/1; text-align: center; }
  .session-ring-number { display: block; font-size: 1.4rem; font-weight: 700; color: var(--text); line-height: 1; letter-spacing: -0.02em; }
  .session-ring-label { display: block; font-size: 0.8rem; color: var(--text-secondary); margin-top: 4px; font-weight: 600; }

  /* Session ring states (JS uses .count-circle + .warning/.done/.exhausted) */
  .count-circle.warning .ring-fill { stroke: var(--warning); }
  .count-circle.warning .session-ring-number { color: var(--warning); }
  .count-circle.done .ring-fill { stroke: var(--success); }
  .count-circle.done .session-ring-number { color: var(--success); }
  .count-circle.exhausted .ring-fill { stroke: var(--danger); }
  .count-circle.exhausted .session-ring-number { color: var(--danger); }

  
  /* Stats grid */
  .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 0.75rem; }
  .stat-item {
    padding: 0.55rem 0.75rem; border-radius: var(--radius-sm); background: var(--gray-50);
    text-align: center; border: 1px solid var(--gray-100);
    transition: border-color var(--transition), box-shadow var(--transition);
  }
  .stat-item:hover { border-color: var(--gray-200); box-shadow: var(--shadow-sm); }
  .stat-item .val { font-size: 1.1rem; font-weight: 700; color: var(--text); line-height: 1.2; }
  .stat-item .lbl { font-size: 0.7rem; color: var(--text-secondary); margin-top: 3px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }

  /* Buttons */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.7rem 1.25rem; border: none; border-radius: var(--radius-sm);
    font-size: 0.925rem; font-weight: 600; cursor: pointer;
    transition: all var(--transition); text-decoration: none; line-height: 1.4;
  }
  .btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
  .btn:active { transform: translateY(0) scale(0.98); }
  .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
  .btn-primary { background: var(--primary); color: #fff; width: 100%; }
  .btn-primary:hover { background: var(--primary-dark); box-shadow: 0 4px 12px rgba(var(--primary-rgb),0.35); }
  .btn-secondary { background: var(--gray-100); color: var(--gray-700); border: 1px solid var(--gray-200); }
  .btn-secondary:hover { background: var(--gray-200); border-color: var(--gray-300); }
  .btn-danger { background: var(--danger-light); color: var(--danger-dark); }
  .btn-danger:hover { background: #fecaca; box-shadow: 0 4px 12px rgba(239,68,68,0.2); }
  .btn-success { background: var(--success); color: #fff; }
  .btn-success:hover { background: var(--success-dark); box-shadow: 0 4px 12px rgba(var(--primary-rgb),0.35); }
  .btn-sm { padding: 0.4rem 0.8rem; font-size: 0.8rem; border-radius: 6px; }
  .btn-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.75rem; }

  /* Navigation (segmented control) */
  .nav {
    display: flex; gap: 0.25rem; margin-bottom: 1rem; justify-content: center;
    background: var(--gray-100); border-radius: var(--radius); padding: 0.25rem;
  }
  .nav a {
    padding: 0.5rem 1rem; border-radius: var(--radius-sm); font-size: 0.85rem;
    font-weight: 500; color: var(--text-secondary); text-decoration: none;
    transition: all var(--transition); flex: 1; text-align: center;
  }
  .nav a:hover { color: var(--primary); background: rgba(var(--primary-rgb),0.08); }
  .nav a.active { background: #fff; color: var(--primary); font-weight: 600; box-shadow: var(--shadow-sm); }

  /* Trainer sub-nav tabs */
  .trainer-subnav {
    display: flex; gap: 0.25rem; margin-bottom: 0.75rem;
    background: var(--gray-100); border-radius: var(--radius-sm); padding: 0.2rem;
  }
  .trainer-subnav button {
    padding: 0.45rem 0.75rem; border-radius: 6px; font-size: 0.8rem;
    font-weight: 500; color: var(--text-secondary); background: none; border: none;
    cursor: pointer; transition: all var(--transition); flex: 1; text-align: center;
    font-family: inherit;
  }
  .trainer-subnav button:hover { color: var(--primary); background: rgba(var(--primary-rgb),0.08); }
  .trainer-subnav button.active { background: #fff; color: var(--primary); font-weight: 600; box-shadow: var(--shadow-sm); }

  .tab-panel { }

  /* In-card client-detail tabs (Packages / Progress / Manage) — distinct from
     .trainer-subnav so the page-level switchTrainerTab never touches these. */
  .cd-subnav {
    display: flex; gap: 0.25rem; margin: 0.5rem 0 0.6rem;
    background: var(--gray-100); border-radius: var(--radius-sm); padding: 0.2rem;
  }
  .cd-subnav button {
    padding: 0.5rem 0.5rem; border-radius: 6px; font-size: 0.78rem;
    font-weight: 500; color: var(--text-secondary); background: none; border: none;
    cursor: pointer; transition: all var(--transition); flex: 1; text-align: center;
    font-family: inherit;
  }
  .cd-subnav button:hover { color: var(--primary); }
  .cd-subnav button.active { background: #fff; color: var(--primary); font-weight: 600; box-shadow: var(--shadow-sm); }
  .cd-panel { }

  /* Hidden */
  .hidden { display: none !important; }

  /* Form */
  .form-group { margin-bottom: 0.875rem; }
  .form-group label {
    display: block; font-size: 0.8rem; font-weight: 600; color: var(--gray-600);
    margin-bottom: 4px; letter-spacing: 0.01em;
  }
  .form-group input, .form-group select {
    width: 100%; padding: 0.65rem 0.875rem; border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-sm); font-size: 0.925rem; color: var(--text);
    background: #fff; transition: border-color var(--transition), box-shadow var(--transition);
    font-family: inherit;
  }
  .form-group input::placeholder { color: var(--gray-400); }
  .form-group input:hover { border-color: var(--gray-300); }
  .form-group input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb),0.12); }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }

  /* Table */
  .table-wrap { overflow-x: auto; border-radius: var(--radius-sm); border: 1px solid var(--card-border); }
  table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
  th, td { padding: 0.625rem 0.75rem; text-align: left; border-bottom: 1px solid var(--gray-100); }
  th {
    font-size: 0.7rem; color: var(--text-secondary); text-transform: uppercase;
    letter-spacing: 0.05em; font-weight: 600; background: var(--gray-50);
  }
  tr:last-child td { border-bottom: none; }
  tr:hover td { background: var(--gray-50); }
  .empty-msg { text-align: center; color: var(--gray-400); padding: 2.5rem 0; font-size: 0.9rem; }

  /* Weight tracking */
  .weight-range-select {
    padding: 0.3rem 0.5rem; border: 1.5px solid var(--gray-200); border-radius: 6px;
    font-size: 0.78rem; font-weight: 500; color: var(--gray-700); background: #fff;
    font-family: inherit; cursor: pointer; outline: none;
  }
  .weight-range-select:focus { border-color: var(--primary); }
  .weight-stats {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 0.75rem;
  }
  .weight-stats .wu { font-size: 0.75rem; color: var(--text-secondary); font-weight: 600; }
  .weight-chart { position: relative; }
  .weight-chart-svg { width: 100%; height: auto; display: block; }
  .weight-chart .wpt { cursor: pointer; transition: r var(--transition); }
  .weight-chart .wpt:hover { r: 5; }
  .weight-tooltip {
    position: absolute; transform: translate(-50%, calc(-100% - 8px));
    background: var(--gray-900); color: #fff; border-radius: 8px;
    padding: 0.35rem 0.55rem; font-size: 0.72rem; line-height: 1.25; text-align: center;
    pointer-events: none; white-space: nowrap; box-shadow: var(--shadow-md); z-index: 5;
  }
  .weight-tooltip strong { display: block; font-size: 0.8rem; font-weight: 700; }
  .weight-tooltip span { display: block; opacity: 0.75; }

  /* Client card in trainer view */
  .client-card {
    padding: 1rem 1.1rem; border: 1px solid var(--card-border); border-radius: var(--radius-lg);
    margin-bottom: 0.7rem; background: var(--card-bg);
    transition: border-color var(--transition), box-shadow var(--transition);
  }
  .client-card:hover { border-color: var(--gray-300); box-shadow: var(--shadow-sm); }
  .client-card .header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.2rem; gap: 0.75rem; }
  .client-card .name { font-weight: 700; font-size: 0.95rem; color: var(--gray-900); letter-spacing: -0.015em; line-height: 1.2; }
  .client-card .client-meta { font-size: 0.72rem; color: var(--gray-500); margin-top: 0.1rem; font-weight: 500; }
  /* Redesigned card layout */
  .cc-top { display: flex; align-items: center; gap: 0.7rem; cursor: pointer; }
  .cc-readout { text-align: right; flex-shrink: 0; }
  .cc-divider { height: 1px; background: var(--gray-100); margin: 0.8rem 0; }
  .cc-bottom { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
  .cc-chips { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; min-width: 0; }
  .cc-actions { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; margin-left: auto; }
  .cc-actions .btn { white-space: nowrap; }
  .client-card .client-status { display: flex; align-items: center; gap: 0.35rem; flex-shrink: 0; margin-top: 0.14rem; }
  .client-card .client-count { font-size: 0.75rem; color: var(--gray-500); white-space: nowrap; }
  .status-badge { display: inline-block; padding: 0.1rem 0.45rem; border-radius: 100px; font-size: 0.65rem; font-weight: 600; background: var(--primary-lighter); color: var(--primary-dark); border: none; }
  .status-badge.ok { background: var(--primary-lighter); color: var(--primary-dark); }
  .status-badge.danger { background: #f1f5f9; color: #475569; }
  .status-badge.not-started { background: #f1f5f9; color: #94a3b8; }
  .status-badge.payment-due { background: var(--attention-light); color: var(--attention-dark); }
  .pkg-chevron { display: inline-block; font-size: 0.55rem; color: var(--gray-400); margin-top: 0.22rem; transition: transform 0.15s; flex-shrink: 0; }
  details[open] > summary .pkg-chevron { transform: rotate(90deg); }
  .client-card .pin-tag { display: inline-block; font-size: 0.85rem; font-weight: 500; color: var(--gray-500); background: var(--gray-100); padding: 0.15rem 0.5rem; border-radius: 4px; font-family: monospace; margin-left: 0.4rem; vertical-align: middle; letter-spacing: 0.05em; }
  .pin-toggle { cursor: pointer; display: inline-flex; align-items: center; vertical-align: middle; opacity: 0.6; transition: opacity 0.15s; }
  .pin-toggle:hover { opacity: 1; }
  .pin-toggle svg { display: block; }
  .client-card .count { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }
  .client-card .count .count-badge { display: inline-flex; align-items: baseline; gap: 0.1rem; padding: 0.15rem 0.5rem; border-radius: 100px; background: var(--primary-lighter); font-size: 0.75rem; font-weight: 500; color: var(--gray-500); }
  .client-card .count .count-badge .num-used { font-size: 0.75rem; font-weight: 700; color: var(--primary); }
  .client-card .count .count-badge .sep { color: var(--primary-light); font-size: 0.7rem; font-weight: 500; }
  .client-card .count .count-badge .used-label { font-size: 0.65rem; color: var(--gray-400); }
  .client-card .count .count-badge .sep-dash { color: var(--gray-300); font-size: 0.7rem; }
  .client-card .count .count-badge .num-remaining { font-size: 0.75rem; font-weight: 700; color: var(--primary); }
  .client-card .count .count-badge .remaining-label { font-size: 0.65rem; color: var(--gray-400); }
  .client-card .count .status-badge { display: inline-block; padding: 0.15rem 0.45rem; border-radius: 100px; font-size: 0.7rem; font-weight: 500; background: var(--gray-100); color: var(--gray-500); }
  .client-card .count .status-badge.ok { background: var(--success-light); color: var(--success-dark); }
  .client-card .count .status-badge.danger { background: var(--danger-light); color: var(--danger-dark); }
  .client-card .actions { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.5rem; justify-content: flex-start; }

	  /* Tooltip for disabled buttons */
	  .tooltip-wrap { position: relative; display: inline-block; cursor: not-allowed; }
	  .tooltip-wrap .tooltip-text {
	    visibility: hidden; opacity: 0;
	    position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
	    background: #1e293b; color: #fff; font-size: 0.7rem; font-weight: 500;
	    padding: 0.35rem 0.6rem; border-radius: 6px; white-space: nowrap;
	    pointer-events: none; z-index: 10;
	    transition: opacity 0.15s ease;
	  }
	  .tooltip-wrap .tooltip-text::after {
	    content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
	    border: 4px solid transparent; border-top-color: #1e293b;
	  }
	  .tooltip-wrap:hover .tooltip-text { visibility: visible; opacity: 1; }

  .client-details { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--card-border); }
  .client-details .session-row { display: flex; justify-content: space-between; padding: 0.3rem 0; font-size: 0.8rem; color: var(--gray-600); }
  .client-details .session-row + .session-row { border-top: 1px solid var(--gray-100); }
  .chevron { display: inline-block; font-size: 0.6rem; margin-left: 0.3rem; transition: transform 0.2s; }
  .chevron.open { transform: rotate(180deg); }

  /* Upgrade out-of-sessions client card from JS inline style */
  .client-card[style*="border-left"] {
    border-left: 4px solid var(--danger) !important;
    background: var(--danger-light) !important;
    border-radius: var(--radius);
  }

  /* PIN input */
  .pin-input {
    width: 200px !important; padding: 0.75rem !important; font-size: 1.5rem !important;
    text-align: center !important; border: 2px solid var(--gray-200) !important;
    border-radius: var(--radius) !important; letter-spacing: 0.5rem !important;
    text-transform: uppercase !important; font-family: 'Inter', monospace !important;
  }
  .pin-input::placeholder {
    letter-spacing: 0.05rem !important; font-size: 0.85rem !important;
    text-transform: none !important; opacity: 0.5;
  }
  .pin-error { color: var(--danger) !important; font-size: 0.85rem !important; margin-top: 0.5rem !important; }
  .pin-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
  .pin-btn { margin-top: 0.5rem; max-width: 200px; }
  .code-display { font-size: 1.2rem; font-weight: 700; font-family: 'Inter', monospace; color: var(--text); }

  /* Bonus badge */
  .bonus-badge {
    display: inline-flex; align-items: center; gap: 0.375rem;
    padding: 0.3rem 0.7rem; border-radius: 100px; font-size: 0.8rem; font-weight: 600; line-height: 1.4;
  }
  .bonus-badge.active { background: var(--success-light); color: var(--success-dark); }
  .bonus-badge.earned { background: var(--warning-light); color: var(--warning-dark); }
  .bonus-badge.missed { background: var(--gray-100); color: var(--gray-400); }

  #bonusInfo { text-align: center; }

/* Renewal message */
  .renewal-msg {
    text-align: center; margin-bottom: 0.75rem; padding: 0.75rem 1rem;
    background: var(--danger-light); border: 1px solid #fecaca; border-radius: var(--radius);
    color: var(--danger-dark); font-weight: 600; font-size: 0.875rem;
  }

  /* Toast */
  .toast {
    position: fixed; top: calc(1rem + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%) translateY(0);
    background: var(--gray-900); color: #fff; padding: 0.875rem 1.25rem;
    border-radius: var(--radius); font-weight: 500; font-size: 0.925rem; z-index: 100;
    display: flex; align-items: center; gap: 1rem;
    box-shadow: var(--shadow-lg);
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.35s ease;
    max-width: calc(100% - 2rem);
  }
  .toast.hidden {
    transform: translateX(-50%) translateY(-120%);
    opacity: 0; pointer-events: none;
  }
  .toast .undo-btn {
    background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.2);
    padding: 0.35rem 0.75rem; border-radius: 6px; font-weight: 600; font-size: 0.8rem;
    cursor: pointer; transition: background var(--transition); flex-shrink: 0;
  }
  .toast .undo-btn:hover { background: rgba(255,255,255,0.25); }

  /* Update banner */
  .update-banner {
    position: fixed; bottom: calc(1rem + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%) translateY(0);
    background: var(--gray-900); color: #fff; padding: 0.875rem 1.25rem;
    border-radius: var(--radius); font-weight: 500; font-size: 0.925rem; z-index: 100;
    display: flex; align-items: center; gap: 1rem;
    box-shadow: var(--shadow-lg);
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.35s ease;
    max-width: calc(100% - 2rem);
  }
  .update-banner.hidden {
    transform: translateX(-50%) translateY(120%);
    opacity: 0; pointer-events: none;
  }
  .update-banner button {
    border: 1px solid rgba(255,255,255,0.2);
    padding: 0.35rem 0.75rem; border-radius: 6px; font-weight: 600; font-size: 0.8rem;
    cursor: pointer; transition: background var(--transition); flex-shrink: 0;
  }
  .update-banner .refresh-btn { background: var(--primary); color: #fff; border-color: var(--primary); }
  .update-banner .refresh-btn:hover { background: var(--primary-dark); }
  .update-banner .dismiss-btn { background: transparent; color: #fff; }
  .update-banner .dismiss-btn:hover { background: rgba(255,255,255,0.1); }

  /* Subscription reminder banner — escalates gray (info) -> amber (warning) -> red (urgent) */
  .sub-banner {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.7rem 0.9rem; margin-bottom: 0.4rem;
    border-radius: var(--radius-sm); border: 1px solid transparent;
    font-size: 0.85rem; font-weight: 500; line-height: 1.4;
  }
  .sub-banner.hidden { display: none; }
  .sub-banner svg { flex-shrink: 0; }
  .sub-banner.info    { background: var(--gray-50);        color: var(--gray-700);      border-color: var(--gray-200); }
  .sub-banner.warning { background: var(--attention-light); color: var(--attention-dark); border-color: var(--attention-border); }
  .sub-banner.urgent  { background: var(--danger-light);    color: var(--danger-dark);    border-color: #F5C2C2; }
  /* Inline "Renew" button on the countdown banner — inherits the banner's severity color */
  .sub-banner-btn {
    margin-left: auto; flex-shrink: 0;
    padding: 0.3rem 0.7rem; border-radius: 6px;
    border: 1.5px solid currentColor; background: transparent; color: inherit;
    font-size: 0.8rem; font-weight: 600; cursor: pointer; font-family: inherit;
    transition: background 0.15s;
  }
  .sub-banner-btn:hover { background: rgba(0,0,0,0.06); }

  /* Selectable plan rows in the renewal-request modal */
  .sub-plan {
    display: flex; justify-content: space-between; align-items: center; width: 100%;
    padding: 0.7rem 0.85rem; border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm);
    background: #fff; font-size: 0.9rem; font-weight: 500; color: var(--gray-800);
    cursor: pointer; font-family: inherit; transition: border-color 0.15s, background 0.15s;
  }
  .sub-plan:hover { border-color: var(--primary-border); }
  .sub-plan.selected { border-color: var(--primary); background: var(--primary-lighter); }
  .sub-plan .price { font-weight: 700; color: var(--gray-900); }

  /* Admin → Trainers: trainer cards */
  .admin-trainer-card {
    background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius);
    padding: 0.85rem 0.95rem; margin-bottom: 0.6rem;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .admin-trainer-card:hover { border-color: var(--gray-300); box-shadow: var(--shadow-sm); }
  .atc-top { display: flex; align-items: center; gap: 0.7rem; }
  .atc-avatar {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    background: var(--primary-lighter); color: var(--primary-dark);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1rem;
  }
  .atc-id { min-width: 0; flex: 1; }
  .atc-name {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
    font-weight: 700; font-size: 0.95rem; color: var(--gray-900); letter-spacing: -0.015em; line-height: 1.2;
  }
  .atc-email {
    font-size: 0.8rem; color: var(--gray-500); margin-top: 0.15rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .atc-meta { font-size: 0.75rem; color: var(--gray-400); margin-top: 0.15rem; }
  .atc-actions {
    display: flex; align-items: center; gap: 0.4rem;
    margin-top: 0.75rem; padding-top: 0.7rem; border-top: 1px solid var(--gray-100);
  }
  .atc-remove {
    margin-left: auto; background: transparent; border: none; color: var(--gray-400);
    font-size: 0.8rem; font-weight: 500; cursor: pointer; font-family: inherit;
    padding: 0.4rem 0.5rem; border-radius: 6px; transition: color 0.15s, background 0.15s;
  }
  .atc-remove:hover { color: var(--danger); background: var(--danger-light); }

  /* Trainer picker — one row per enrollment (login with multiple trainers) */
  .trainer-pick {
    display: flex; align-items: center; gap: 0.75rem; width: 100%;
    padding: 0.8rem 0.9rem; margin-bottom: 0.6rem;
    background: #fff; border: 1.5px solid var(--gray-200); border-radius: var(--radius);
    cursor: pointer; font-family: inherit; text-align: left;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.05s;
  }
  .trainer-pick:hover { border-color: var(--primary-border); box-shadow: var(--shadow-sm); }
  .trainer-pick:active { transform: scale(0.99); }
  .tp-avatar {
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, var(--primary), var(--primary-light)); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.15rem;
    box-shadow: 0 2px 6px rgba(var(--primary-rgb),0.28);
  }
  .tp-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
  .tp-name { font-weight: 700; font-size: 0.95rem; color: var(--gray-900); letter-spacing: -0.015em; }
  .tp-sub { font-size: 0.78rem; color: var(--gray-500); margin-top: 0.1rem; }
  .tp-chevron { color: var(--gray-300); flex-shrink: 0; }

  /* Entrance animations */
  .card { animation: cardFadeIn 0.4s cubic-bezier(0.4,0,0.2,1) both; }
  #clientDashboard > .card:nth-child(2) { animation-delay: 0.05s; }
  #clientDashboard > .card:nth-child(3) { animation-delay: 0.1s; }

  @keyframes cardFadeIn {
    0% { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
  }

  .stat-item { animation: statFadeIn 0.5s cubic-bezier(0.4,0,0.2,1) both; }
  .stat-item:nth-child(1) { animation-delay: 0.2s; }
  .stat-item:nth-child(2) { animation-delay: 0.3s; }

  @keyframes statFadeIn {
    0% { opacity: 0; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
  }

  @keyframes btnPulse {
    0%, 100% { box-shadow: 0 4px 12px rgba(var(--primary-rgb),0.3); }
    50% { box-shadow: 0 4px 20px rgba(var(--primary-rgb),0.5); }
  }
  #logTodayBtn:not(:disabled) { animation: btnPulse 2s ease-in-out infinite; }

  @media (max-width: 480px) {
    /* iOS Safari zooms in on any focused input with font-size < 16px and doesn't
       reliably zoom back out — which is what leaves the page zoomed after sign-in.
       Force 16px on mobile (!important to beat inline font-sizes). */
    input, select, textarea { font-size: 16px !important; }
    .container { max-width: 100%; }
    .count-circle, .session-ring-svg { width: 120px; height: 120px; }
    .session-ring-number { font-size: 1.4rem; }
    .profile-header { padding: 1rem 1.25rem; }
    .profile-avatar { width: 40px; height: 40px; font-size: 1.1rem; }
    .form-row { grid-template-columns: 1fr; }
    .card { border-radius: var(--radius); }
    h1 { font-size: 1.2rem; }
    .client-details-grid { grid-template-columns: 1fr !important; }
  }

  /* Toggle switch */
  .toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; }
  .toggle-switch input { opacity: 0; width: 0; height: 0; }
  .toggle-slider {
    position: absolute; cursor: pointer; inset: 0;
    background: var(--gray-200); border-radius: 24px;
    transition: background var(--transition);
  }
  .toggle-slider::before {
    content: ''; position: absolute;
    width: 18px; height: 18px; left: 3px; top: 3px;
    background: #fff; border-radius: 50%;
    transition: transform var(--transition);
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  }
  .toggle-switch input:checked + .toggle-slider { background: var(--primary); }
  .toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }

  /* Activity Feed */
  .trainer-filter-chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    border-radius: 100px; padding: 0.42rem 0.85rem;
    font-size: 0.8rem; font-weight: 600; cursor: pointer;
    border: 1px solid var(--gray-200); background: #fff; color: var(--gray-600);
    font-family: inherit; white-space: nowrap;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
    user-select: none; -webkit-tap-highlight-color: transparent;
  }
  .trainer-filter-chip:hover { border-color: var(--gray-300); }
  .trainer-filter-chip:active { transform: scale(0.97); }
  .trainer-filter-chip.tfc-selected { background: var(--gray-900); color: #fff; border-color: var(--gray-900); }
  .trainer-filter-chip .tfc-count {
    font-size: 0.72rem; font-weight: 700; line-height: 1;
    background: var(--gray-100); color: var(--gray-500);
    border-radius: 100px; padding: 0.12rem 0.4rem; min-width: 1.05rem; text-align: center;
  }
  .trainer-filter-chip.tfc-selected .tfc-count { background: rgba(255,255,255,0.22); color: #fff; }
  .activity-filter-chip {
    padding: 0.22rem 0.65rem; border-radius: 100px; font-size: 0.7rem; font-weight: 500;
    border: 1px solid var(--gray-200); background: white; color: var(--gray-500); cursor: pointer;
    transition: all 0.15s; font-family: inherit;
  }
  .activity-filter-chip.active { background: var(--primary-lighter); color: var(--primary); border-color: var(--primary); }
  .activity-filter-chip:hover:not(.active) { border-color: var(--gray-300); color: var(--gray-700); }
  .activity-item { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.55rem 0; border-bottom: 1px solid var(--gray-100); }
  .activity-item:last-child { border-bottom: none; }
  .actor-badge {
    font-size: 0.6rem; font-weight: 600; padding: 0.15rem 0.45rem; border-radius: 100px;
    white-space: nowrap; flex-shrink: 0; margin-top: 1px; text-transform: uppercase; letter-spacing: 0.04em;
  }
  .actor-badge.trainer { background: #eff6ff; color: #1d4ed8; }
  .actor-badge.client { background: var(--primary-lighter); color: var(--primary-dark); }
  .actor-badge.admin { background: #faf5ff; color: #7e22ce; }
  .actor-badge.system { background: var(--gray-100); color: var(--gray-500); }
  .activity-text { font-size: 0.8rem; color: var(--gray-700); flex: 1; line-height: 1.4; }
  .activity-time { font-size: 0.68rem; color: var(--gray-400); white-space: nowrap; flex-shrink: 0; margin-top: 2px; }

  /* ===================== LANDING PAGE ===================== */
  /* Full-bleed marketing page. Greens use the brand --primary tokens so they
     match the inlined logo wordmark; neutrals/peach/amber are landing-specific
     literals from the design handoff. Body font = Manrope, eyebrows = JetBrains Mono. */
  body.landing-mode { padding: 0; background: #F6F7F9; }
  body.landing-mode .container { max-width: none; padding: 0; }
  body.landing-mode .brand { display: none; }

  #landing { color: #1B2230; background: #F6F7F9; font-family: 'Manrope', 'Inter', sans-serif; --lp-grad: linear-gradient(150deg, #22C55E, var(--primary)); }
  #landing h1, #landing h2, #landing h3 { font-family: inherit; }

  .lp-wrap { max-width: 1180px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
  .lp-wrap--mid { max-width: 1040px; }
  .lp-wrap--wide { max-width: 1100px; }
  .lp-wrap--price { max-width: 980px; }
  .lp-wrap--quote { max-width: 820px; }
  .lp-wrap--faq { max-width: 740px; }
  .lp-sec { padding-top: 56px; padding-bottom: 56px; }
  .lp-band { background: #fff; border-top: 1px solid #EAECEF; border-bottom: 1px solid #EAECEF; }

  /* Shared bits */
  .lp-green { color: var(--primary); }
  .lp-check { color: var(--primary); flex-shrink: 0; }
  .lp-btn { display: inline-block; background: var(--lp-grad); color: #fff; text-decoration: none; font-size: 14px; font-weight: 700; padding: 10px 18px; border-radius: 10px; box-shadow: 0 6px 16px rgba(var(--primary-rgb),0.34); transition: filter 0.18s, transform 0.18s; }
  .lp-btn:hover { filter: brightness(1.04); }
  .lp-btn:active { transform: translateY(1px); }
  .lp-btn--lg { font-size: 16px; font-weight: 700; padding: 15px 28px; border-radius: 12px; box-shadow: 0 12px 26px rgba(var(--primary-rgb),0.4); }
  .lp-textlink { color: #1B2230; text-decoration: none; font-size: 15px; font-weight: 600; padding: 15px 8px; cursor: pointer; }
  .lp-textlink:hover { color: var(--primary); }
  .lp-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary); }
  .lp-sec-head { text-align: center; margin-bottom: 40px; }
  .lp-h2 { font-weight: 800; font-size: 38px; letter-spacing: -0.025em; margin-top: 12px; text-wrap: balance; }
  .lp-h2--sm { font-size: 32px; text-align: center; margin-bottom: 38px; }
  .lp-h2--left { text-align: left; }

  /* Nav */
  .lp-nav-bar { background: #fff; border-bottom: 1px solid #EAECEF; }
  /* Roomy header (~100px) so the full illustrated logo leads; container-type powers the narrow-screen mark swap. */
  .lp-nav { display: flex; align-items: center; justify-content: space-between; padding-top: 19px; padding-bottom: 19px; container-type: inline-size; }
  .lp-logo { display: inline-flex; align-items: center; text-decoration: none; line-height: 0; }
  /* Size by height only (width:auto keeps ratio). Single-class selectors so the swap rules below win cleanly. */
  .lp-logo-full { display: block; width: auto; height: 62px; }                 /* full illustrated lockup */
  .lp-logo-mark { display: none; width: auto; height: 62px; aspect-ratio: 1 / 1; }  /* shown only when header is too narrow */
  .lp-logo-full--footer { height: 46px; }
  /* Nav recedes so the logo clearly outranks it (grey, regular weight); the green CTA is the only accent. */
  .lp-nav-actions { display: flex; align-items: center; gap: 8px; }
  .lp-link { color: #6B7280; text-decoration: none; font-size: 14px; font-weight: 500; padding: 9px 14px; border-radius: 8px; transition: color 0.18s, background 0.18s; }
  .lp-link:hover { color: var(--primary); background: #ECFDF3; }
  /* Below ~360px of header width, the wordmark can't stay legible → swap to the square mark. */
  @container (max-width: 360px) {
    .lp-logo-full { display: none; }
    .lp-logo-mark { display: block; }
  }
  @supports not (container-type: inline-size) {
    @media (max-width: 380px) {
      .lp-nav .lp-logo-full { display: none; }
      .lp-nav .lp-logo-mark { display: block; }
    }
  }

  /* Hero */
  .lp-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; padding-top: 60px; padding-bottom: 44px; }
  .lp-eyebrow-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 999px; background: #ECFDF3; border: 1px solid #C7F0D6; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--primary-dark); }
  .lp-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
  .lp-h1 { font-weight: 800; font-size: 54px; line-height: 1.05; letter-spacing: -0.03em; margin: 22px 0 0; text-wrap: balance; }
  .lp-sub { font-size: 18px; line-height: 1.6; color: #5A6472; margin: 20px 0 0; max-width: 480px; }
  .lp-sub--center { margin-left: auto; margin-right: auto; }
  .lp-hero-cta { display: flex; align-items: center; gap: 14px; margin: 30px 0 0; flex-wrap: wrap; }
  .lp-promises { display: flex; gap: 22px; margin: 26px 0 0; flex-wrap: wrap; }
  .lp-promise { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #6B7280; font-weight: 600; }
  .lp-promise .lp-check { font-size: 15px; }

  /* Disciplines strip */
  .lp-disc { text-align: center; padding-top: 6px; padding-bottom: 18px; }
  .lp-disc-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #9CA3AF; }
  .lp-disc-tags { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }
  .lp-disc-tag { font-size: 14px; font-weight: 600; color: #374151; background: #fff; border: 1px solid #EAECEF; padding: 9px 16px; border-radius: 999px; }

  /* Trainer dashboard mockup */
  .lp-hero-art { display: flex; justify-content: flex-end; }
  .lp-dash { width: 430px; max-width: 100%; background: #fff; border: 1px solid #EAECEF; border-radius: 18px; box-shadow: 0 26px 56px rgba(20,30,50,0.14); overflow: hidden; }
  .lp-dash-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid #F1F2F4; }
  .lp-dash-av { width: 38px; height: 38px; border-radius: 12px; background: var(--lp-grad); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 16px; flex-shrink: 0; }
  .lp-dash-id { flex: 1; min-width: 0; }
  .lp-dash-name { font-weight: 700; font-size: 15px; }
  .lp-dash-role { font-size: 12px; color: #9CA3AF; }
  .lp-dash-filters { display: flex; gap: 6px; }
  .lp-pill { font-size: 11px; font-weight: 700; padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
  .lp-pill--dark { background: #1B2230; color: #fff; }
  .lp-pill--grey { background: #F3F4F6; color: #6B7280; }
  .lp-pill-n { opacity: 0.65; }
  .lp-dash-rows { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
  .lp-drow { display: flex; align-items: center; gap: 12px; padding: 12px; background: #FAFBFC; border: 1px solid #EEF0F2; border-radius: 13px; }
  .lp-drow-av { width: 36px; height: 36px; border-radius: 11px; background: #ECFDF3; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: var(--primary); flex-shrink: 0; }
  .lp-drow-main { flex: 1; min-width: 0; }
  .lp-drow-name { font-weight: 700; font-size: 14px; }
  .lp-drow-bar { height: 5px; border-radius: 999px; background: #EAECEF; margin-top: 6px; overflow: hidden; }
  .lp-drow-bar span { display: block; height: 100%; background: var(--lp-grad); }
  .lp-drow-meta { text-align: right; flex-shrink: 0; }
  .lp-drow-count { font-weight: 700; font-size: 14px; }
  .lp-drow-total { color: #9CA3AF; font-weight: 600; font-size: 12px; }
  .lp-badge { display: inline-block; margin-top: 4px; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
  .lp-badge--paid { background: #ECFDF3; color: var(--primary-dark); }
  .lp-badge--due { background: #FEEAD9; color: #C2410C; }
  .lp-drow-btn { background: var(--lp-grad); color: #fff; font-size: 12px; font-weight: 700; padding: 8px 13px; border-radius: 10px; flex-shrink: 0; box-shadow: 0 4px 11px rgba(var(--primary-rgb),0.3); }

  /* Comparison */
  .lp-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .lp-cmp-card { background: #fff; border-radius: 18px; padding: 28px; }
  .lp-cmp-card--bad { border: 1px solid #EFE3DB; }
  .lp-cmp-card--good { border: 1px solid #C7F0D6; box-shadow: 0 16px 40px rgba(var(--primary-rgb),0.1); }
  .lp-cmp-title { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
  .lp-cmp-tile { width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; flex-shrink: 0; }
  .lp-cmp-tile--bad { background: #FEEAD9; color: #C2410C; }
  .lp-cmp-tile--good { background: var(--primary); }
  .lp-cmp-title-bad { font-size: 18px; font-weight: 700; color: #9A4A22; }
  .lp-cmp-title-good { font-size: 18px; font-weight: 700; color: var(--primary-dark); }
  .lp-cmp-list { display: flex; flex-direction: column; gap: 13px; }
  .lp-cmp-item { display: flex; gap: 11px; font-size: 15px; line-height: 1.45; }
  .lp-cmp-item--bad { color: #8A8078; }
  .lp-cmp-item--good { color: #374151; font-weight: 500; }
  .lp-cmp-dash { color: #D08A5A; margin-top: 1px; flex-shrink: 0; }

  /* Steps + grid of 3 */
  .lp-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .lp-step { background: #fff; border: 1px solid #EAECEF; border-radius: 16px; padding: 26px; }
  .lp-step-no { width: 38px; height: 38px; border-radius: 11px; background: #ECFDF3; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; color: var(--primary); }
  .lp-step-title { font-size: 20px; font-weight: 700; margin: 16px 0 10px; letter-spacing: -0.01em; }
  .lp-step-body { font-size: 14.5px; line-height: 1.6; color: #6B7280; }

  /* Client app section */
  .lp-clientapp { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; padding-top: 64px; padding-bottom: 64px; }
  .lp-lead { font-size: 17px; line-height: 1.6; color: #5A6472; margin-top: 16px; max-width: 460px; }
  .lp-feat-list { display: flex; flex-direction: column; gap: 18px; margin-top: 28px; }
  .lp-feat { display: flex; gap: 14px; align-items: flex-start; }
  .lp-feat-ic { width: 40px; height: 40px; border-radius: 11px; background: #ECFDF3; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
  .lp-feat-title { font-weight: 700; font-size: 16px; }
  .lp-feat-body { font-size: 14.5px; color: #6B7280; line-height: 1.5; margin-top: 2px; }

  /* Client phone mockup */
  .lp-phone-wrap { display: flex; justify-content: center; }
  .lp-phone { width: 274px; max-width: 100%; background: #fff; border: 7px solid #1B2230; border-radius: 38px; box-shadow: 0 30px 64px rgba(20,30,50,0.22); overflow: hidden; }
  .lp-phone-notch { height: 24px; background: #1B2230; display: flex; align-items: center; justify-content: center; }
  .lp-phone-notch span { width: 80px; height: 6px; border-radius: 4px; background: #3A4254; }
  .lp-phone-screen { padding: 14px 14px 20px; background: #F6F7F9; }
  .lp-ph-head { background: #fff; border: 1px solid #EAECEF; border-radius: 14px; padding: 12px; display: flex; align-items: center; gap: 10px; }
  .lp-ph-av { width: 38px; height: 38px; border-radius: 50%; background: var(--lp-grad); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 15px; flex-shrink: 0; }
  .lp-ph-id { flex: 1; min-width: 0; }
  .lp-ph-name { font-weight: 800; font-size: 14px; }
  .lp-ph-sub { font-size: 10.5px; color: #9CA3AF; }
  .lp-ph-trainer { display: flex; align-items: center; gap: 5px; margin-top: 3px; }
  .lp-ph-trainer-l { font-size: 9.5px; color: #9CA3AF; }
  .lp-ph-chip { font-size: 9.5px; font-weight: 700; color: var(--primary-dark); background: #ECFDF3; padding: 2px 7px; border-radius: 999px; }
  .lp-ph-tabs { display: flex; gap: 4px; margin-top: 11px; background: #EEF0F2; border-radius: 12px; padding: 4px; }
  .lp-ph-tab { flex: 1; text-align: center; font-size: 12px; font-weight: 700; padding: 8px; border-radius: 9px; color: #9CA3AF; }
  .lp-ph-tab--on { background: #fff; color: var(--primary); box-shadow: 0 2px 6px rgba(20,30,50,0.06); }
  .lp-ph-card { margin-top: 11px; background: #fff; border: 1px solid #EAECEF; border-radius: 16px; padding: 18px 16px; }
  .lp-ring-wrap { display: flex; justify-content: center; }
  .lp-ring { width: 104px; height: 104px; border-radius: 50%; background: conic-gradient(var(--primary) 0% 25%, #E9EBEE 25% 100%); display: flex; align-items: center; justify-content: center; }
  .lp-ring-hole { width: 80px; height: 80px; border-radius: 50%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .lp-ring-n { font-weight: 800; font-size: 26px; line-height: 1; }
  .lp-ring-l { font-size: 9px; color: #9CA3AF; font-weight: 600; }
  .lp-ph-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
  .lp-ph-stat { background: #FAFBFC; border: 1px solid #EEF0F2; border-radius: 11px; padding: 9px; text-align: center; }
  .lp-ph-stat-n { font-weight: 800; font-size: 18px; }
  .lp-ph-stat-l { font-size: 9px; color: #9CA3AF; font-weight: 700; letter-spacing: 0.05em; }
  .lp-ph-bonus { margin-top: 10px; background: linear-gradient(150deg, #FEF1E6, #FDE8DA); border: 1px solid #F8D3BC; border-radius: 13px; padding: 11px; display: flex; gap: 9px; align-items: flex-start; }
  .lp-ph-bonus-ic { width: 26px; height: 26px; border-radius: 8px; background: #EA580C; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 13px; }
  .lp-ph-bonus-t { font-size: 11px; font-weight: 700; color: #9A3412; }
  .lp-ph-bonus-s { font-size: 9.5px; color: #B45309; margin-top: 1px; }
  .lp-ph-btn { margin-top: 11px; background: var(--primary); color: #fff; text-align: center; font-size: 13px; font-weight: 700; padding: 12px; border-radius: 13px; }
  .lp-ph-btn--ghost { margin-top: 8px; background: #fff; border: 1px solid #EAECEF; color: #5A6472; font-size: 12px; font-weight: 600; padding: 10px; }

  /* Benefits */
  .lp-benefit { padding: 6px; }
  .lp-benefit-ic { width: 44px; height: 44px; border-radius: 12px; background: #ECFDF3; display: flex; align-items: center; justify-content: center; font-size: 20px; }
  .lp-benefit-title { font-size: 18px; font-weight: 700; margin: 16px 0 9px; }
  .lp-benefit-body { font-size: 14.5px; line-height: 1.6; color: #6B7280; }

  /* Testimonial */
  .lp-quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; }
  .lp-quote { background: #fff; border: 1px solid #EAECEF; border-radius: 20px; padding: 30px 30px 26px; box-shadow: 0 16px 44px rgba(20,30,50,0.07); display: flex; flex-direction: column; }
  .lp-quote-text { font-size: 18px; line-height: 1.55; font-weight: 600; color: #1B2230; letter-spacing: -0.01em; flex: 1; }
  .lp-quote-by { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
  .lp-quote-av { width: 46px; height: 46px; border-radius: 50%; background: var(--lp-grad); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 18px; }
  .lp-quote-attr { text-align: left; }
  .lp-quote-name { font-weight: 700; font-size: 15px; }
  .lp-quote-role { font-size: 13px; color: #9CA3AF; }

  /* Pricing */
  .lp-founding { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 8px 16px; border-radius: 999px; background: #FEF3E2; border: 1px solid #F8D9A8; color: #B45309; font-size: 13px; font-weight: 700; }
  .lp-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 720px; margin: 34px auto 0; align-items: stretch; }
  .lp-plan { background: #FAFBFC; border: 1px solid #EAECEF; border-radius: 20px; padding: 30px; }
  .lp-plan--featured { background: #fff; border: 2px solid var(--primary); box-shadow: 0 18px 44px rgba(var(--primary-rgb),0.16); position: relative; }
  .lp-plan-ribbon { position: absolute; top: -12px; right: 22px; background: var(--primary); color: #fff; font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 999px; }
  .lp-plan-name { font-weight: 700; font-size: 16px; color: #374151; }
  .lp-plan-name--green { color: var(--primary-dark); }
  .lp-plan-price { margin-top: 12px; display: flex; align-items: baseline; gap: 4px; }
  .lp-plan-amt { font-weight: 800; font-size: 42px; letter-spacing: -0.03em; }
  .lp-plan-per { font-size: 15px; color: #9CA3AF; font-weight: 600; }
  .lp-plan-note { font-size: 13px; color: #9CA3AF; margin-top: 4px; }
  .lp-plan-note--green { color: var(--primary); font-weight: 600; }
  .lp-plan-cta { display: block; text-align: center; margin-top: 22px; text-decoration: none; font-size: 15px; font-weight: 700; padding: 13px; border-radius: 12px; }
  .lp-plan-cta--soft { color: var(--primary); background: #ECFDF3; }
  .lp-includes { max-width: 720px; margin: 22px auto 0; background: #FAFBFC; border: 1px solid #EEF0F2; border-radius: 16px; padding: 20px 24px; }
  .lp-includes-h { font-size: 12px; font-weight: 700; color: #9CA3AF; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 14px; }
  .lp-includes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
  .lp-inc { display: flex; gap: 9px; align-items: center; font-size: 14px; color: #374151; font-weight: 500; }

  /* FAQ */
  .lp-faq-list { display: flex; flex-direction: column; gap: 11px; }
  .lp-faq-item { background: #fff; border: 1px solid #EAECEF; border-radius: 14px; padding: 18px 20px; }
  .lp-faq-q { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 16px; font-weight: 700; color: #1B2230; }
  .lp-faq-q::-webkit-details-marker { display: none; }
  .lp-faq-q::after { content: '+'; font-size: 20px; color: var(--primary); line-height: 1; flex-shrink: 0; transition: transform 0.2s; }
  .lp-faq-item[open] .lp-faq-q::after { transform: rotate(45deg); }
  .lp-faq-item p { font-size: 14.5px; line-height: 1.6; color: #6B7280; margin-top: 12px; max-width: 600px; }

  /* Final CTA */
  .lp-final { background: linear-gradient(150deg, #22C55E, var(--primary-dark)); border-radius: 24px; padding: 56px 40px; text-align: center; box-shadow: 0 26px 60px rgba(var(--primary-rgb),0.4); }
  .lp-final-title { font-weight: 800; font-size: 40px; letter-spacing: -0.03em; text-wrap: balance; max-width: 640px; margin: 0 auto; color: #fff; }
  .lp-final-sub { font-size: 17px; color: rgba(255,255,255,0.87); margin: 18px auto 0; max-width: 470px; }
  .lp-final-cta { display: inline-block; margin-top: 28px; color: var(--primary-dark); background: #fff; text-decoration: none; font-size: 16px; font-weight: 700; padding: 16px 36px; border-radius: 12px; box-shadow: 0 12px 28px rgba(0,0,0,0.18); }
  .lp-final-note { font-size: 13px; color: rgba(255,255,255,0.8); margin-top: 16px; }

  /* Footer */
  .lp-footer-bar { background: #fff; border-top: 1px solid #EAECEF; }
  .lp-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-top: 30px; padding-bottom: 30px; }
  .lp-footer-brand { display: flex; align-items: center; gap: 10px; }
  .lp-footer-tag { font-size: 13px; color: #9CA3AF; margin-left: 6px; }
  .lp-footer-links { display: flex; gap: 22px; font-size: 13.5px; }
  .lp-footer-links a { color: #6B7280; text-decoration: none; }
  .lp-footer-links a:hover { color: var(--primary); }

  /* Responsive */
  @media (max-width: 980px) {
    .lp-h1 { font-size: 44px; }
    .lp-h2 { font-size: 32px; }
    .lp-final-title { font-size: 32px; }
  }
  @media (max-width: 860px) {
    .lp-hero, .lp-clientapp { grid-template-columns: 1fr; gap: 36px; }
    .lp-hero-art { justify-content: center; }
    .lp-cmp, .lp-grid3, .lp-plans, .lp-includes-grid, .lp-quotes { grid-template-columns: 1fr; }
    .lp-wrap { padding-left: 20px; padding-right: 20px; }
    .lp-h1 { font-size: 38px; }
    .lp-quote { padding: 28px 24px 24px; }
    .lp-quote-text { font-size: 17px; }
    .lp-final { padding: 40px 24px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .lp-btn, .lp-faq-q::after { transition: none; }
  }

/* ===== Modals =====
   Centralized overlay so every dialog behaves on mobile. The overlay itself
   scrolls (overflow-y:auto), so a modal taller than the screen can be scrolled
   to its buttons instead of being cut off — and the page body behind it no
   longer scrolls in its place. Three variants: default (top-anchored),
   --center (vertically centered when it fits), --sheet (bottom sheet). */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(6vh + env(safe-area-inset-top)) 1rem calc(2rem + env(safe-area-inset-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* The card is the overlay's direct child; never let it squish vertically. */
.modal-overlay > * {
  flex-shrink: 0;
}
/* Center vertically when there's room; margin:auto is overflow-safe (unlike
   justify-content:center, which clips the top of a too-tall card). */
.modal-overlay--center {
  padding: 2rem 1rem;
}
.modal-overlay--center > * {
  margin: auto 0;
}
/* Bottom sheet: card pinned to the bottom edge; scrolls internally if tall. */
.modal-overlay--sheet {
  padding: 0;
}
.modal-overlay--sheet > * {
  margin-top: auto;
  max-height: 92vh;
  overflow-y: auto;
}

/* Quick-log sheet: tapping "Log" on a Progress row slides the shared editor up
   over the list with the exercise already chosen and last session's sets already
   filled in. The list keeps its scroll position — the point is that logging the
   lift you're looking at costs no navigation and no re-typing. */
.wq-sheet {
  background: var(--card-bg);
  border-radius: 18px 18px 0 0;
  padding: 1rem 1.15rem 1.4rem;
  width: 100%;
  max-width: 480px;
  box-shadow: var(--shadow-lg);
}
.wq-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.wq-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wq-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gray-400);
  cursor: pointer;
  padding: 0 0.15rem;
  flex: none;
}
/* Says where the pre-filled numbers came from — a form that fills itself in
   must explain itself, or the first save is a surprise. */
.wq-note {
  margin: 0.3rem 0 0.7rem;
  font-size: 0.76rem;
  color: var(--gray-500);
}
.wq-note:empty {
  display: none;
}
/* "repeat that session" — an inline action inside the sentence that explains the
   placeholders, so the one-tap repeat sits exactly where the question arises.
   Goes flat once used: the fields now hold those numbers. */
.wq-repeat {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--primary-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.wq-repeat:disabled {
  color: var(--gray-400);
  text-decoration: none;
  cursor: default;
}
/* Previous session's numbers as placeholders: visibly a hint, not an entry —
   the row also stays untinted until real reps are typed. */
.wf-reps::placeholder,
.wf-weight::placeholder {
  color: var(--gray-300);
  font-weight: 500;
}

/* ===== Workout tracking =====
   Shared editor (js/ui/workoutForm.js) + grouped history. Used by the client
   Workouts tab and the trainer's per-client Progress section / log sheet. */

/* Exercise list — IN FLOW under the input, not a floating dropdown. Every editor
   instance now lives in a bottom sheet, and the sheet's own overflow:auto clips
   an absolutely positioned list in both directions (below the screen edge, or
   above the sheet's top). In flow it pushes the set table down and the sheet
   scrolls, which is also a truer reading of the step you're on: pick the
   exercise, then fill the sets. */
.ex-picker-list {
  background: var(--card-bg);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  max-height: 42vh;
  overflow-y: auto;
  margin-top: 0.35rem;
}
.ex-picker-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.85rem;
  color: var(--gray-800);
  cursor: pointer;
}
.ex-picker-item:hover {
  background: var(--gray-50);
}
/* Magnifier inside the exercise search input. */
.wf-ex-ico {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.9rem;
  height: 0.9rem;
  color: var(--gray-400);
  pointer-events: none;
}
.wf-ex-group .wf-ex-input { padding-left: 2.2rem; }

/* Muscle-group tag: soft tinted pill per category (tokens in :root). */
.ex-picker-cat {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  background: var(--cat-custom-bg);
  color: var(--cat-custom-fg);
  flex-shrink: 0;
}
.ex-picker-cat.cat-chest { background: var(--cat-chest-bg); color: var(--cat-chest-fg); }
.ex-picker-cat.cat-back { background: var(--cat-back-bg); color: var(--cat-back-fg); }
.ex-picker-cat.cat-shoulders { background: var(--cat-shoulders-bg); color: var(--cat-shoulders-fg); }
.ex-picker-cat.cat-arms { background: var(--cat-arms-bg); color: var(--cat-arms-fg); }
.ex-picker-cat.cat-legs { background: var(--cat-legs-bg); color: var(--cat-legs-fg); }
.ex-picker-cat.cat-core { background: var(--cat-core-bg); color: var(--cat-core-fg); }
.ex-picker-cat.cat-cardio { background: var(--cat-cardio-bg); color: var(--cat-cardio-fg); }
/* Group headers: "Your exercises" above the ones this client has trained,
   "All exercises" above the rest of the catalog. Sticky so the boundary is still
   visible after scrolling into the 122-item half. */
.ex-picker-group {
  position: sticky;
  top: 0;
  background: var(--gray-50);
  padding: 0.3rem 0.75rem;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--gray-500);
}
/* When you last did it — the answer to "have I trained this?", in the place the
   catalog would otherwise show a category tag. */
.ex-picker-last {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--gray-400);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.ex-picker-add {
  color: var(--primary);
  font-weight: 600;
  border-top: 1px solid var(--gray-100);
}
.ex-picker-empty {
  padding: 0.55rem 0.75rem;
  font-size: 0.8rem;
  color: var(--gray-400);
}

/* Set table: Set · Reps · Weight · remove — light, table-like. Cells are
   borderless boxes on a faint tint; the header row carries the column labels
   and the divider line. */
.set-row {
  display: grid;
  grid-template-columns: 2rem 1fr 1fr 2rem;
  gap: 0.4rem;
  align-items: center;
  margin-bottom: 0.35rem;
  padding: 2px 2px 2px 0;
  border-radius: 8px;
  transition: background var(--transition);
}
.set-num {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray-400);
  text-align: center;
}
.set-row input {
  width: 100%;
  padding: 0.5rem 0.25rem;
  border: none;
  border-radius: 6px;
  background: var(--gray-50);
  font-size: 0.9rem;
  font-family: inherit;
  text-align: center;
  outline: none;
}
.set-row input:focus {
  background: #fff;
  box-shadow: 0 0 0 1.5px var(--primary);
}
.set-row input::placeholder {
  font-size: 0.72rem;
  color: var(--gray-300);
}
/* No spinner arrows — they break the clean table-cell look on desktop. */
.set-row input::-webkit-outer-spin-button,
.set-row input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.set-row input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
/* Breathing room between the set table and the save button. */
.wf-save {
  margin-top: 0.75rem;
}
.wf-remove-set {
  background: none;
  border: none;
  color: var(--gray-400);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem;
}
.wf-remove-set:hover {
  color: var(--danger);
}

/* A set row tints green once it holds a real (reps-bearing) set — automatic,
   driven by the input value (js/ui/workoutForm.js markFilled). The logged sets
   read as done at a glance; the trailing empty row stays plain. Inputs stay
   fully editable — this is a status tint, not a lock. */
.set-row.filled {
  background: rgba(var(--primary-rgb), 0.06);
}
.set-row.filled input {
  background: rgba(var(--primary-rgb), 0.10);
}
.set-row.filled input:focus {
  background: #fff;
}

/* History: one swipeable card per training day (scroll-snap carousel, newest
   leftmost — the next card peeks in to invite the swipe) + a dot pager.
   Rendered by renderWorkoutGroups / wired by wireDayCarousel (workoutForm.js). */
.wd-carousel {
  display: flex;
  align-items: flex-start; /* cards hug their day's content, not the tallest sibling */
  gap: 0.6rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 0.2rem;
}
.wd-carousel::-webkit-scrollbar {
  display: none;
}
.wd-card {
  flex: 0 0 calc(100% - 2.25rem);
  min-width: 0;
  scroll-snap-align: start;
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-radius: 12px;
  padding: 0.65rem 0.85rem 0.35rem;
}
.wd-card:only-child {
  flex-basis: 100%;
}
.wd-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
.wd-date {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.01em;
}
.wd-count {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--gray-400);
  flex-shrink: 0;
}
/* Session summary strip: the day's worth (exercises · sets · kg lifted) as
   small labeled stats — read before any scanning of the log below. */
.wd-stats {
  display: flex;
  gap: 1.5rem;
  padding: 0.45rem 0 0.55rem;
  border-bottom: 1px solid var(--gray-100);
}
.wd-stat {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.wd-stat-val {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--gray-800);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.wd-stat-label {
  font-size: 0.55rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--gray-400);
}
.wd-dots {
  display: flex;
  justify-content: center;
  padding-top: 0.4rem;
}
/* 20px tap target, 6px visible dot (background-clip keeps the padding clear). */
.wd-dot {
  width: 20px;
  height: 20px;
  padding: 7px;
  border: none;
  border-radius: 50%;
  background: var(--gray-200);
  background-clip: content-box;
  cursor: pointer;
  transition: background-color var(--transition), transform var(--transition);
}
.wd-dot.active {
  background-color: var(--primary);
  transform: scale(1.2);
}
.workout-entry {
  padding: 0.45rem 0 0.5rem;
  border-bottom: 1px solid var(--gray-100);
}
.workout-entry:last-child {
  border-bottom: none;
}
.we-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.we-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gray-800);
  flex: 1;
  min-width: 0;
}
.we-by {
  font-size: 0.62rem;
  font-weight: 600;
  padding: 0.1rem 0.4rem;
  border-radius: 100px;
  background: var(--gray-100);
  color: var(--gray-500);
  flex-shrink: 0;
}
.we-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}
.we-btn {
  background: none;
  border: none;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  padding: 0.15rem 0.3rem;
  font-family: inherit;
}
.we-btn-del {
  font-size: 1.05rem;
  line-height: 1;
  color: var(--gray-400);
}
.we-btn-del:hover {
  color: var(--danger);
}
/* Set log rows, Strong/Hevy-style: muted index column, then reps × weight in
   tabular figures on a shared grid so the numbers align down the card —
   alignment carries the structure, not chips or color. */
.we-sets-tbl {
  margin-top: 0.25rem;
  display: grid;
  row-gap: 0.16rem;
}
.we-set {
  display: grid;
  grid-template-columns: 1.4rem 2.1rem 1.1rem auto;
  align-items: baseline;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gray-800);
  font-variant-numeric: tabular-nums;
}
.we-set-n {
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--gray-400);
}
.we-set-reps {
  text-align: right;
}
.we-set-x {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--gray-300);
}
.we-bw {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--gray-500);
}

/* ===== Workout progress grid =====
   One collapsed row per exercise (latest top set + delta + sparkline); tap to
   expand the recent-sessions log (.wp-sess-*) and the trend chart. Rendered by
   js/ui/workoutProgress.js for both the client Workouts tab and the trainer's
   per-client Workouts section. */
.wp-exercise {
  border-bottom: 1px solid var(--gray-100);
  padding: 0.3rem 0 0.4rem;
  /* The opened row is scrolled to the top of the viewport — leave a little air
     above it (see handleProgressAction). */
  scroll-margin-top: 0.6rem;
  transition: opacity 0.18s ease;
}
.wp-exercise:last-child {
  border-bottom: none;
}
/* The open row is BRACKETED instead of the others being dimmed: a rule above and
   below marks where the exercise you opened starts and ends, and everything
   outside stays at full contrast. Dimming the rest was worse than leaving it
   alone — half-faded numbers down the whole list read as visual mush, and mush
   still pulls the eye. The negative top margin lays this rule over the previous
   row's hairline so the two don't stack into a double line. */
.wp-exercise.wp-open {
  border-top: 1px solid var(--gray-300);
  border-bottom: 1px solid var(--gray-300);
  margin-top: -1px;
  padding: 0.8rem 0 0.9rem;
}
/* Whole-card expand target (head + sets grid): on a phone nobody can hit a
   lone chevron, so the entire block toggles the chart. :active tint = tap
   feedback; hover only where hover exists. */
.wp-tap {
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  margin: 0 -0.4rem;
  padding: 0 0.4rem 0.3rem;
  border-radius: 10px;
  transition: background var(--transition);
}
.wp-tap:active {
  background: var(--gray-100);
}
@media (hover: hover) {
  .wp-tap:hover {
    background: var(--gray-50);
  }
}
.wp-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
}
.wp-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-800);
  flex: 1;
  min-width: 0;
}
/* PR / target as quiet inline text in the trend row (no pill). Green "New PR"
   celebrates a record this session; muted "best 85 kg" is the ceiling you're
   chasing when below it — green stays reserved for the win. */
.wp-pr {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary-dark);
  white-space: nowrap;
}
.wp-best {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--gray-400);
  white-space: nowrap;
}
.wp-log-btn {
  background: var(--primary-lighter);
  color: var(--primary-dark);
  border: none;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.4rem 0.95rem;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  touch-action: manipulation;
  position: relative;
}
/* Invisible hit-area extension: the pill stays visually small but taps land
   from ~44px around it (it wins over the card toggle via closest()). */
.wp-log-btn::after {
  content: '';
  position: absolute;
  inset: -8px -6px;
}
.wp-log-btn:active {
  filter: brightness(0.92);
}
.wp-chevron {
  color: var(--gray-400);
  font-size: 0.85rem;
  flex-shrink: 0;
  transition: transform 0.15s;
}
.wp-open .wp-chevron {
  transform: rotate(90deg);
}
/* Trend summary row: latest top-set + delta-vs-last on the left, an inline
   sparkline of recent sessions on the right — the at-a-glance "am I
   progressing?" read. Per-session detail lives in History. */
.wp-trend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.1rem;
}
.wp-trend-fig {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.1rem 0.55rem;
  min-width: 0;
}
.wp-trend-label {
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--gray-400);
  flex-basis: 100%;
}
.wp-trend-val {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gray-900);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.wp-delta {
  font-size: 0.72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.wp-delta.up { color: var(--primary-dark); }
.wp-delta.down { color: var(--attention-dark); }
.wp-delta.flat { color: var(--gray-400); font-weight: 500; }
.wp-spark-wrap {
  flex-shrink: 0;
}
.wp-spark {
  display: block;
  width: 92px;
  height: 26px;
}
/* Open row: the chart at the bottom of the panel draws this exact series at full
   size, so the sparkline would be the same graph twice on one screen. */
.wp-open .wp-spark-wrap {
  display: none;
}
/* Workouts tab: Progress | History segmented control (mutually-exclusive
   views, so History is never buried under the exercise list). Larger than the
   metric switch — this is a primary navigation control (~44px tall). */
.wk-seg {
  display: flex;
  gap: 2px;
  margin: 0 0 0.85rem;
  background: var(--gray-100);
  border-radius: 11px;
  padding: 3px;
}
.wk-seg button {
  flex: 1;
  background: transparent;
  color: var(--gray-500);
  border: none;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.62rem 0.5rem;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--transition), color var(--transition);
}
.wk-seg button.active {
  background: #fff;
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}

/* The search's escape hatch: everything above it is an exercise you've logged,
   this is the way to one you haven't. Shaped as an action (full width, accent
   text, no numbers) so it never reads as another result row. */
.wp-add-row {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-top: 1px solid var(--gray-100);
  padding: 0.75rem 0.1rem 0.3rem;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--primary-dark);
  cursor: pointer;
}
/* Log workout: for a lift that isn't in the list — and the only way in for a
   client whose list is still empty. Full width (btn-secondary isn't by default)
   and quiet: the green Log pill on each row is the common action, this is the
   fallback. */
.wk-log-btn {
  width: 100%;
  margin-top: 0.85rem;
}

/* Search above the Progress|History switch — filters your exercises, and is the
   entry point for adding one you've never logged. */
.wp-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  /* Sits on the page ground now, not inside the Progress card — so it carries a
     card's own surface. The old gray-100 fill would all but vanish against the
     page background. */
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  padding: 0 0.75rem;
  margin-bottom: 0.7rem;
}
.wp-search svg {
  flex: none;
  color: var(--gray-400);
}
.wp-search input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  font-family: inherit;
  font-size: 1rem; /* >=16px: iOS won't zoom the viewport on focus */
  color: var(--gray-900);
  padding: 0.62rem 0;
}
.wp-search input::placeholder { color: var(--gray-400); }
/* Hide the native search "clear" X — the field is short and cleared by hand. */
.wp-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

.wp-chart-slot {
  margin-top: 0.6rem;
}
/* Recent-sessions log at the top of an expanded exercise — the thing a trend
   chart can't answer: what was actually done, set by set. It is a MATRIX: set
   number down the pinned left column, one column per session (newest first).
   Same set index lines up across sessions, so comparison is alignment rather
   than reading; a dot-separated run of numbers per session gave neither. Cells
   are 13px (a wrapped 11px run was unreadable on a phone) with the day's
   heaviest set as the only emphasized number. */
.wp-sess {
  margin-bottom: 0.85rem;
}
.wp-sess-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.wp-sess-title,
.wp-sess-axis {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--gray-500);
}
.wp-sess-axis {
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--gray-400);
}
/* Horizontal scroll only kicks in past ~4 sessions (Show earlier); the index
   column stays pinned so a row never loses its set number. */
.wp-grid-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 -0.15rem;
  padding: 0 0.15rem;
}
.wp-grid-scroll::-webkit-scrollbar {
  display: none;
}
/* Columns stretch to fill the width, but only up to ~5.6rem each: with one or
   two sessions logged an unbounded 1fr would blow a single cell out to full
   width, stranding "10 × 20" an inch from its set number. The cap keeps a
   1-session log looking like a small table instead of a broken row. Past 4
   sessions the 4.15rem minimum forces the tracks past the container and the
   wrapper scrolls. */
.wp-grid {
  display: grid;
  grid-template-columns: 2.05rem repeat(var(--wp-cols), minmax(4.15rem, 1fr));
  width: 100%;
  max-width: calc(2.05rem + var(--wp-cols) * 5.6rem);
  align-items: stretch;
}
.wp-gh {
  padding: 0 0.3rem 0.35rem;
  text-align: right;
}
.wp-gh-day {
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--gray-800);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.wp-gh-date {
  display: block;
  font-size: 0.62rem;
  font-weight: 500;
  color: var(--gray-400);
  font-variant-numeric: tabular-nums;
}
/* Set number: pinned, so it survives the sideways scroll. */
.wp-gi,
.wp-gh-idx {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #fff;
}
.wp-gi {
  display: flex;
  align-items: center;
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--gray-300);
  font-variant-numeric: tabular-nums;
  border-top: 1px solid var(--gray-100);
}
.wp-gc {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0.34rem 0.3rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gray-600);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  border-top: 1px solid var(--gray-100);
}
/* The most recent session — the column you opened this for. */
.wp-gh.is-latest,
.wp-gc.is-latest {
  background: var(--gray-50);
}
.wp-gh.is-latest {
  border-radius: 8px 8px 0 0;
}
.wp-gc.is-latest.is-lastrow {
  border-radius: 0 0 8px 8px;
}
.wp-gh.is-latest .wp-gh-day {
  color: var(--gray-900);
}
/* Heaviest set of that session: the one number per column worth finding fast. */
.wp-gc-v.is-top {
  color: var(--gray-900);
  font-weight: 700;
}
.wp-gc-r {
  font-weight: 500;
  color: var(--gray-500);
}
.wp-gc-v.is-top .wp-gc-r {
  color: var(--gray-600);
}
.wp-gc-x {
  font-weight: 400;
  color: var(--gray-300);
  margin: 0 0.18em;
}
.wp-gc-u {
  font-size: 0.72em;
  font-weight: 500;
  color: var(--gray-400);
  margin-left: 0.2em;
}
/* A set that session didn't have. */
.wp-gc-none {
  color: var(--gray-300);
  font-weight: 500;
}
.wp-sess-more {
  background: none;
  border: none;
  padding: 0.4rem 0 0.1rem;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--primary-dark);
  cursor: pointer;
  touch-action: manipulation;
}
/* Per-session total weight, the bottom row of the matrix (this replaced a whole
   second chart behind a "Total Weight" toggle). Heavier rule above it so it
   reads as a sum, not another set. */
.wp-gc-tot {
  border-top: 1px solid var(--gray-200);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--gray-500);
  padding-top: 0.3rem;
  padding-bottom: 0.1rem;
}
/* The row's label — without it a bottom row of "1,985 kg" could read as one
   more set. Fits because the set-number column is sized for this word. */
.wp-gi-tot {
  border-top: 1px solid var(--gray-200);
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-400);
}
/* Names the chart now that the segmented control isn't there to do it. */
.wp-chart-head {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--gray-400);
  margin: 0.15rem 0 0.35rem;
}

/* Only one session logged: no chart, just why. */
.wp-onepoint {
  margin: 0.55rem 0 0.1rem;
  font-size: 0.72rem;
  color: var(--gray-400);
}
/* Editor top row: just the date pill now, pushed right. The quick-pick chip
   strip is gone — the exercise picker below lists your own exercises first, with
   when you last did each, which is the same shortcut with the answer attached. */
.wf-top {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.wf-top .wf-date-wrap {
  margin-left: auto;
}

/* Date pill: reads "Today ▾" (or the chosen date). The real date input sits
   invisibly on top so taps open the native picker; showPicker() covers
   desktop (see workoutForm.js). */
.wf-date-wrap {
  position: relative;
  flex-shrink: 0;
}
.wf-date-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: #fff;
  border: 1px solid var(--gray-300);
  border-radius: 100px;
  padding: 0.3rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gray-900);
  white-space: nowrap;
}
.wf-date-ico {
  width: 0.8rem;
  height: 0.8rem;
  color: var(--gray-500);
}
.wf-date-caret {
  font-size: 0.65rem;
  color: var(--gray-400);
}
.wf-date-wrap .wf-date {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* Mode banner: makes log-vs-edit explicit. Hidden in log mode (a fresh form
   always saves a NEW session); in edit mode it names the entry being changed.
   Deliberately CALM (neutral grays) — editing is a normal activity, not a
   warning. Only the "moving to another date" fragment gets the attention
   color, because that save relocates the entry. */
.wf-mode {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  color: var(--gray-600);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.6rem;
  margin-bottom: 0.6rem;
  font-size: 0.72rem;
  font-weight: 500;
}
.wf-mode strong {
  font-weight: 700;
  color: var(--gray-800);
}
.wf-mode-move {
  font-weight: 700;
  color: var(--attention-dark);
}
.wf-mode-text {
  flex: 1;
  min-width: 0;
}
.wf-mode-cancel {
  background: none;
  border: 1px solid var(--gray-300);
  color: var(--gray-600);
  border-radius: 100px;
  padding: 0.15rem 0.6rem;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}
.wf-mode-cancel:hover {
  background: var(--gray-200);
}

/* Table header row (Set · Reps · Weight) with its divider line. */
.set-head {
  margin-bottom: 0.35rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--gray-200);
}
.set-head .set-num,
.set-head-lbl {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray-400);
  text-align: center;
}

/* Tiny unit labels — "12 × 35 kg", "50 kg" — recede next to the number. */
.we-set .su,
.wp-trend-val .su {
  font-size: 0.7em;
  font-weight: 500;
  opacity: 0.65;
  margin-left: 0.08em;
}