/* ============================================
   ritm — global styles
   Fonts: Montserrat (primary / headline) + Aileron→Inter (secondary / body)
   Palette: Deep Navy + Cyan
============================================ */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Brand wordmark image (ritm logotype). Uses currentColor via SVG. */
/* On dark theme, invert wordmark so the navy text is legible on dark bg */

@font-face {
  font-family: var(--font-primary);
  src: url("../fonts/Gliker-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: var(--font-primary);
  src: url("../fonts/Gliker-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: var(--font-primary);
  src: url("../fonts/Gliker-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/PlusJakartaSans-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============================================
     Brambura palette (brand)
     ============================================ */
  --br-blue-10:   #FAFDFF; --br-blue-25:  #F0FBFF; --br-blue-50:  #E3F7FF;
  --br-blue-100:  #CCF0FF; --br-blue-200: #ADD8F2; --br-blue-300: #8EC1E5;
  --br-blue-400:  #6EA9D9; --br-blue-500: #4F92CC; --br-blue-600: #307ABF;

  --br-brown-10:  #FFFBF7; --br-brown-25: #FFF5ED; --br-brown-50: #FFEEE0;
  --br-brown-100: #FFDEC4; --br-brown-200:#EDBFA5; --br-brown-300:#DCA186;
  --br-brown-400: #CA8266; --br-brown-500:#B86347; --br-brown-600:#954F38;

  --br-green-10:  #F7FFFC; --br-green-25: #EBFFF8; --br-green-50: #DBFFF2;
  --br-green-100: #B3FFE3; --br-green-200:#8FEAC8; --br-green-300:#6BD4AE;
  --br-green-400: #48BF93; --br-green-500:#24A979; --br-green-600:#00945E;

  --br-grena-10:  #FFF9F7; --br-grena-25: #FFF3F0; --br-grena-50: #FFEDE8;
  --br-grena-100: #FFDED4; --br-grena-200:#ECC0B8; --br-grena-300:#DAA29D;
  --br-grena-400: #C78581; --br-grena-500:#B46765; --br-grena-600:#A2494A;

  --br-orange-10: #FFFBF7; --br-orange-25:#FFF4E8; --br-orange-50:#FFEFDE;
  --br-orange-100:#FFE1BF; --br-orange-200:#FAC093;--br-orange-300:#F59F66;
  --br-orange-400:#F07D3A; --br-orange-500:#EB5C0D;--br-orange-600:#BE480D;

  --br-yellow-10: #FFFBED; --br-yellow-25:#FFF9E3; --br-yellow-50:#FFF4C7;
  --br-yellow-100:#FFE991; --br-yellow-200:#FFCC00;--br-yellow-300:#E1B201;
  --br-yellow-400:#C49703; --br-yellow-500:#A67D04;--br-yellow-600:#896305;

  /* Legacy aliases (some code still references these) */
  --lime-300: var(--br-orange-200); --lime-400: var(--br-orange-300);
  --lime-500: var(--br-orange-500); --lime-600: var(--br-orange-600);
  --lime-700: var(--br-orange-600);
  --ink-950: #08090C; --ink-900: #0B0D12; --ink-800: #12151C; --ink-700: #191D27;
  --ink-600: #232833; --ink-500: #2E3441; --ink-400: #3A4152; --ink-300: #6B7285;
  --ink-200: #9CA3B4; --ink-100: #D1D6E0; --ink-50:  #EEF1F6;
  --blue-10: var(--br-blue-10); --blue-25: var(--br-blue-25); --blue-50: var(--br-blue-50);
  --blue-100: var(--br-blue-100); --blue-200: var(--br-blue-200); --blue-300: var(--br-blue-300);
  --blue-400: var(--br-blue-400); --blue-500: var(--br-blue-500); --blue-600: var(--br-blue-600);
  --blue-700: #245B8F; --blue-800: #193B60; --blue-900: #0D1C30; --blue-950: #070F1A;
  --orange-300: var(--br-orange-300);
  --orange-400: var(--br-orange-400);
  --orange-500: var(--br-orange-500);

  /* ============================================
     Brand — Deep Navy + Cyan (dyslove.design palette)
     ============================================ */
  --brand-navy:       #1C1C28;              /* Deep Navy */
  --brand-navy-lift:  #26263A;              /* slightly lifted navy */
  --brand-navy-soft:  #38384E;              /* softer navy */
  --brand-cyan:       #1EC1CB;              /* Cyan (signature) */
  --brand-cyan-dark:  #189AA3;              /* hover */
  --brand-cyan-light: #5DD5DD;              /* light cyan */
  --brand-cyan-soft:  #E4FAFC;              /* very soft cyan tint */

  /* ============================================
     Semantic — LIGHT theme (cool, brand-based)
     ============================================ */
  --bg:            #F5F7F9;                 /* cool light backdrop */
  --surface:       #FFFFFF;
  --surface-alt:   #EEF2F5;                 /* cool subtle */
  --border:        #DDE3E7;
  --border-strong: #C0C9CF;
  --text:          #1C1C28;                 /* Deep Navy */
  --text-muted:    #4B4E5C;
  --text-soft:     #6D7387;
  --primary:       #1EC1CB;                 /* Cyan */
  --primary-hover: #189AA3;
  --primary-fg:    #1C1C28;                 /* navy text on cyan */
  --primary-soft:  rgba(30, 193, 203, 0.12);
  --accent:        #1C1C28;                 /* Deep Navy accent */
  --accent-hover:  #2A2A3A;
  --accent-fg:     #FFFFFF;
  --accent-soft:   rgba(28, 28, 40, 0.06);
  --danger:        #DC5757;                 /* clean red */
  --success:       #22B37D;                 /* fresh green */
  --warning:       #E1B201;                 /* amber */
  --info:          #3B82F6;                 /* clean blue */

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 28px;

  --shadow-sm: 0 1px 2px rgba(28, 28, 40, 0.04), 0 1px 3px rgba(28, 28, 40, 0.06);
  --shadow-md: 0 4px 14px rgba(28, 28, 40, 0.06), 0 2px 4px rgba(28, 28, 40, 0.04);
  --shadow-lg: 0 20px 40px rgba(28, 28, 40, 0.10), 0 8px 16px rgba(28, 28, 40, 0.06);
  --shadow-glow: 0 0 0 4px var(--primary-soft);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --glass-bg: var(--surface);
  --glass-border: rgba(255, 255, 255, 0.5);

  /* Typography — Montserrat (primary, headlines/UI), Aileron→Inter (secondary, body) */
  --font-primary: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-secondary: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ============================================
   DARK THEME
============================================ */
[data-theme="dark"] {
  --bg:            #0E0E17;                 /* deeper than surface */
  --surface:       #1C1C28;                 /* Deep Navy — brand */
  --surface-alt:   #26263A;                 /* lifted navy */
  --border:        #32324A;
  --border-strong: #454568;
  --text:          #F1F4F8;                 /* cool light */
  --text-muted:    #A8B0C4;
  --text-soft:     #7A8299;
  --primary:       #1EC1CB;                 /* Cyan — pops on navy */
  --primary-hover: #5DD5DD;
  --primary-fg:    #0E0E17;
  --primary-soft:  rgba(30, 193, 203, 0.16);
  --accent:        #1EC1CB;
  --accent-hover:  #5DD5DD;
  --accent-fg:     #0E0E17;
  --accent-soft:   rgba(30, 193, 203, 0.12);
  --danger:        #E87878;
  --success:       #4FD4A3;
  --warning:       #FCC53E;
  --info:          #7DB4FF;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 8px 22px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 24px 44px rgba(0, 0, 0, 0.55), 0 8px 18px rgba(0, 0, 0, 0.35);
  --shadow-glow: 0 0 0 4px rgba(30, 193, 203, 0.22);

  --glass-bg: var(--surface);
  --glass-border: rgba(255, 255, 255, 0.06);

  color-scheme: dark;
}

[data-theme="dark"] .form-error { background: rgba(214, 69, 69, 0.15); color: #ff9797; }
[data-theme="dark"] .form-success { background: rgba(78, 203, 142, 0.15); color: #7de3af; }

/* smooth theme swap */
html { transition: background-color 0.25s var(--ease-out); }
body,
.sidebar,
.main,
.card,
.stat-card,
.list-item,
.modal,
.mobile-topbar,
.input,
input,
select,
textarea,
.btn,
.role-card,
.meal-block,
.food-row,
.food-picker,
.macro-summary,
.tdee-box,
.editor-bottom-bar {
  transition:
    background-color 0.25s var(--ease-out),
    border-color 0.25s var(--ease-out),
    color 0.2s var(--ease-out),
    box-shadow 0.25s var(--ease-out);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
}
html { touch-action:manipulation; }

body {
  font-family: var(--font-secondary);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  color: var(--text);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 700;
}

h1 { font-size: 2.5rem; letter-spacing: -0.02em; }
h2 { font-size: 1.75rem; letter-spacing: -0.015em; }
h3 { font-size: 1.2rem; letter-spacing: -0.01em; }
h4 { font-size: 1.05rem; font-weight: 600; }

p { color: var(--text-muted); }

a { color: var(--text); text-decoration: underline; text-decoration-color: var(--primary); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--primary); text-decoration-color: var(--primary); }

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}
input::placeholder, textarea::placeholder { color:var(--text-soft);opacity:1; }
select option { background:var(--surface);color:var(--text); }

/* ============================================
   AUTH PAGES (login / register / role select)
============================================ */

.auth-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--bg);
}

.auth-hero {
  position: relative;
  background: linear-gradient(160deg, #14171E 0%, #0A0B10 100%);
  color: white;
  padding: 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.auth-hero::before {
  content: "";
  position: absolute;
  top: -140px; right: -140px;
  width: 480px; height: 480px;
  background: radial-gradient(circle, color-mix(in srgb, var(--primary) 60%, transparent) 0%, transparent 62%);
  opacity: 0.35;
  border-radius: 50%;
  filter: blur(20px);
}
.auth-hero::after {
  content: "";
  position: absolute;
  bottom: -140px; left: -140px;
  width: 480px; height: 480px;
  background: radial-gradient(circle, color-mix(in srgb, var(--primary) 25%, transparent) 0%, transparent 62%);
  opacity: 0.4;
  border-radius: 50%;
  filter: blur(30px);
}

.auth-hero > * { position: relative; z-index: 1; }

.auth-hero .brand {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 1.4rem;
  color: white;
  display: flex;
  align-items: center;
  gap: 10px;
}

.auth-hero h1 {
  color: white;
  font-size: 2.6rem;
  margin-bottom: 16px;
  max-width: 480px;
}
.auth-hero p {
  color: rgba(255,255,255,0.75);
  font-size: 1.05rem;
  max-width: 460px;
}

.auth-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.auth-card {
  width: 100%;
  max-width: 440px;
}

.auth-mobile-brand {
  display: none;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 1.35rem;
  margin-bottom: 24px;
  align-items: center;
  gap: 10px;
  color: var(--text);
}
@media (max-width: 900px) {
  .auth-mobile-brand { display: flex; }
}

.auth-card h2 {
  font-size: 1.9rem;
  margin-bottom: 8px;
}
.auth-card .sub {
  color: var(--text-muted);
  margin-bottom: 28px;
}

.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}
.input:focus,
input:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-soft);
}
textarea { min-height: 90px; resize: vertical; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  border: none;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 0.15s var(--ease-out), background 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), color 0.2s var(--ease-out);
  text-decoration: none;
  letter-spacing: -0.005em;
}
.btn:active { transform: translateY(1px) scale(0.99); }

.btn-primary {
  background: var(--primary);
  color: var(--primary-fg);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 18%, transparent);
}
.btn-primary:hover {
  background: var(--primary-hover);
  color: var(--primary-fg);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 28%, transparent);
}

.btn-accent {
  background: var(--accent);
  color: var(--accent-fg);
}
.btn-accent:hover { background: var(--accent-hover); color: var(--accent-fg); }

.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1.5px solid var(--border-strong);
}
.btn-ghost:hover { background: var(--surface-alt); border-color: var(--primary); }

.btn-block { width: 100%; }

/* icon-only round button */
.btn-icon {
  width: 44px; height: 44px;
  padding: 0;
  border-radius: 50%;
}
.btn-icon svg {
  width: 18px; height: 18px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.auth-footer {
  margin-top: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.form-error {
  background: #fee7e7;
  color: #9a2b2b;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  margin-bottom: 16px;
  display: none;
}
.form-error.active { display: block; }

.form-success {
  background: #e6f5ec;
  color: #226b45;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  margin-bottom: 16px;
  display: none;
}
.form-success.active { display: block; }

/* ============================================
   ROLE SELECTION
============================================ */

.role-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 64px 24px;
  background: var(--bg);
}
.role-shell .brand {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 1.3rem;
  margin-bottom: 40px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
}

.role-header { text-align: center; max-width: 620px; margin-bottom: 44px; }
.role-header h1 { font-size: 2.3rem; margin-bottom: 12px; }
.role-header p { font-size: 1.05rem; }

.role-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  max-width: 1080px;
  width: 100%;
  margin-bottom: 40px;
}

.role-card {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.role-card:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.role-card {
  position: relative;
}
.role-card.selected {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.role-card.selected::after {
  content: "✓";
  position: absolute;
  top: 12px; right: 12px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.95rem;
  animation: floatIn 0.2s var(--ease-spring);
}
.role-card .icon {
  width: 56px; height: 56px;
  border-radius: 18px;
  background: var(--primary-soft);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-bottom: 18px;
  border: 1.5px solid transparent;
  transition: all 0.2s var(--ease-out);
}
.role-card.selected .icon {
  background: var(--primary);
  color: var(--primary-fg);
  transform: scale(1.05);
}
.role-card h3 { font-size: 1.25rem; margin-bottom: 6px; }
.role-card p { font-size: 0.92rem; }

/* Details step (post role-pick) — client info form + coach code input */
#coach-section { margin-top: 22px; padding-top: 22px; border-top: 1px dashed var(--border); }
#coach-code {
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  font-weight: 600;
}

/* ============================================
   APP SHELL (dashboards)
============================================ */

.app-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
}

.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar .brand {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
}

.sidebar-role-badge {
  padding: 6px 12px;
  background: var(--primary);
  color: var(--primary-fg);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 10px 24px;
  display: inline-block;
  width: fit-content;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out), transform 0.15s var(--ease-out);
  border: none;
  background: transparent;
  text-align: left;
  width: 100%;
  font-size: 0.95rem;
  overflow: hidden;
}
.nav-item:hover { background: var(--surface-alt); color: var(--text); text-decoration: none; }
.nav-item:active { transform: scale(0.98); }
.nav-item.active {
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 600;
}
.nav-item.active::before {
  content: "";
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 3px;
  background: var(--primary);
  border-radius: 0 3px 3px 0;
}
.nav-item .icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nav-item .icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sidebar-footer {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.user-block {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  margin-bottom: 8px;
}
.avatar {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  color: var(--primary-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-family: var(--font-primary);
  flex-shrink: 0;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--primary) 25%, transparent);
}
.avatar.has-status::after {
  content: "";
  position: absolute;
  right: -1px; bottom: -1px;
  width: 11px; height: 11px;
  background: var(--success);
  border: 2px solid var(--surface);
  border-radius: 50%;
  animation: pulseDot 2s infinite;
}
.avatar.sm { width: 32px; height: 32px; font-size: 0.78rem; }
.avatar.lg { width: 52px; height: 52px; font-size: 1.1rem; }
.avatar.xl { width: 96px; height: 96px; font-size: 1.9rem; }

.photo-row {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 12px 0 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.photo-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.photo-actions .btn svg {
  width: 16px; height: 16px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.photo-preview { flex-shrink: 0; }
@media (max-width: 500px) {
  .photo-row { flex-direction: column; align-items: flex-start; }
}
.user-block .info { min-width: 0; }
.user-block .info .name {
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-block .info .email {
  font-size: 0.75rem;
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.main {
  padding: 32px 40px;
  background: var(--bg);
  min-width: 0;
}

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 16px;
}
.page-head h1 { font-size: 1.9rem; }
.page-head .sub { color: var(--text-muted); font-size: 0.95rem; margin-top: 4px; }

/* views */
.view { display: none; }
.view.active {
  display: block;
  animation: viewIn 0.35s var(--ease-out) both;
}
@keyframes viewIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes floatIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulseDot {
  0%,100% { box-shadow: 0 0 0 0 rgba(78, 203, 142, 0.6); }
  50%     { box-shadow: 0 0 0 6px rgba(78, 203, 142, 0); }
}
@keyframes msgIn {
  from { opacity: 0; transform: translateY(4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
}

/* hero card — same premium dark treatment as coach hero (works in both themes) */
.hero-card {
  position: relative;
  color: #FAFCFA;
  border-radius: var(--radius-xl);
  padding: 30px 32px;
  margin-bottom: 22px;
  overflow: hidden;
  background:
    radial-gradient(140% 120% at 88% -10%, color-mix(in srgb, var(--primary) 32%, transparent) 0%, color-mix(in srgb, var(--primary) 8%, transparent) 25%, transparent 60%),
    radial-gradient(90% 100% at 5% 105%, rgba(0, 0, 0, 0.55) 0%, transparent 55%),
    linear-gradient(155deg, #0E3B2E 0%, #0B1A15 55%, #0A2B21 100%);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 24px 60px -18px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: floatIn 0.45s var(--ease-out) both;
}
/* Grain texture */
.hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  background-size: 160px 160px;
  background-repeat: repeat;
  opacity: 0.22;
  mix-blend-mode: soft-light;
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
}
/* Cyan halo top-right */
.hero-card::after {
  content: "";
  position: absolute;
  width: 380px; height: 380px;
  right: -110px; top: -140px;
  background: radial-gradient(circle, color-mix(in srgb, var(--primary) 28%, transparent) 0%, color-mix(in srgb, var(--primary) 8%, transparent) 40%, transparent 72%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.hero-card > * { position: relative; z-index: 1; }
.hero-card .kicker {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--primary);
  margin-bottom: 6px;
}
.hero-card .title {
  font-family: var(--font-primary);
  font-size: clamp(1.65rem, 3vw, 2.15rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 8px;
  color: #FAFCFA;
}
.hero-card .sub {
  color: rgba(241, 244, 248, 0.7);
  font-weight: 500;
  margin-bottom: 18px;
  max-width: 520px;
  line-height: 1.5;
}
.hero-card .cta {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 11px 20px;
  background: var(--primary);
  color: #08241C;
  border-radius: 999px;
  font-weight: 800;
  border: none;
  cursor: pointer;
  transition: transform 0.15s var(--ease-out), background 0.2s, box-shadow 0.2s;
}
.hero-card .cta:hover {
  transform: translateY(-1px);
  background: var(--primary-hover);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 35%, transparent);
}
.hero-card .cta svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.4; }

/* stat cards */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-bottom: 28px;
}
.stat-card {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 22px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition:
    transform 0.25s var(--ease-out),
    box-shadow 0.25s var(--ease-out),
    border-color 0.25s var(--ease-out);
  animation: floatIn 0.4s var(--ease-out) both;
}

/* Client dashboard navigation hub */
.dashboard-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin: 4px 0 12px;
}
.quick-action-card {
  appearance: none;
  width: 100%;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 16px;
  text-align: left;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform .16s var(--ease-out), border-color .16s, box-shadow .16s;
}
.quick-action-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}
.quick-action-card strong, .quick-action-card small { display: block; }
.quick-action-card > span:nth-child(2) { min-width: 0; }
.quick-action-card strong { margin-bottom: 3px; font-size: .95rem; }
.quick-action-card small { color: var(--text-muted); line-height: 1.35; }

@media (max-width: 640px) {
  .dashboard-section-head { align-items:flex-start; gap:10px; flex-direction:column; }
  .quick-action-card { padding: 14px; }
}
.dashboard-focus-card, .dashboard-status-card {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding: 22px;
}
.dashboard-eyebrow { color:var(--text-soft); font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.09em; }
.dashboard-live-dot { color:var(--text-muted); font-size:.75rem; display:flex; align-items:center; gap:6px; }
.dashboard-live-dot i { width:7px; height:7px; border-radius:50%; background:var(--primary); box-shadow:0 0 0 4px color-mix(in srgb, var(--primary) 14%, transparent); }
.dashboard-status-card { display:flex; flex-direction:column; }
.dashboard-status-card h3 { font-size:1.12rem;margin-bottom:7px; }
.dashboard-status-card p { color:var(--text-muted);font-size:.86rem;line-height:1.55;margin-bottom:18px;flex:1; }
.coach-workbench-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:24px; }
.coach-dashboard-hero {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 30px 32px; margin-bottom: 20px;
  border-radius: var(--radius-xl); color: #FAFCFA;
  background:
    radial-gradient(140% 120% at 88% -10%, color-mix(in srgb, var(--primary) 32%, transparent) 0%, color-mix(in srgb, var(--primary) 8%, transparent) 25%, transparent 60%),
    radial-gradient(90% 100% at 5% 105%, rgba(0, 0, 0, 0.55) 0%, transparent 55%),
    linear-gradient(155deg, #0E3B2E 0%, #0B1A15 55%, #0A2B21 100%);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 24px 60px -18px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  position: relative; overflow: hidden;
}

/* Coach overview: compact, plain navigation cards without decorative texture. */
#view-overview .coach-dashboard-hero { padding:22px 24px; margin-bottom:16px; }
#view-overview .coach-dashboard-hero h1 { color:var(--text)!important; text-shadow:none!important; }
#view-overview .coach-dashboard-hero p { color:var(--text-muted)!important; }
#view-overview .coach-dashboard-hero .coach-hero-date { color:var(--primary)!important; }
[data-theme="light"] #view-overview .coach-dashboard-hero { background:#fff!important; border-color:#D5E4DC!important; }
[data-theme="light"] #view-overview .coach-dashboard-hero h1 { color:#0B1A15!important; }
[data-theme="light"] #view-overview .coach-dashboard-hero p { color:#4F6F63!important; }
[data-theme="dark"] #view-overview .coach-dashboard-hero { background:var(--surface)!important; }
#view-overview .coach-dashboard-hero::before,
#view-overview .coach-dashboard-hero::after,
#view-overview .coach-compact-stats .stat-card::before,
#view-overview .coach-compact-stats .stat-card::after { display:none!important; content:none!important; background-image:none!important; }
#view-overview .coach-quick-head { margin:0 0 8px; }
.coach-quick-strip { display:grid; grid-template-columns:1fr; gap:7px; margin-bottom:14px; }
.coach-quick-strip button { appearance:none; display:grid; grid-template-columns:34px minmax(0,1fr) auto auto; align-items:center; gap:10px; width:100%; min-width:0; min-height:50px; padding:8px 12px; border:1px solid var(--border); border-radius:14px; background:var(--surface); color:var(--text); box-shadow:none; font:inherit; text-align:left; cursor:pointer; }
.coach-quick-strip button:hover { border-color:var(--primary); color:var(--primary); }
.coach-quick-strip button span { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:var(--primary-soft); color:var(--primary); }
.coach-quick-strip button svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.9; }
.coach-quick-strip button strong { min-width:0; color:var(--text); font-size:.82rem; line-height:1.25; white-space:normal; }
.coach-quick-strip button i { min-width:25px; padding:3px 8px; border-radius:999px; background:var(--surface-alt); color:var(--text-muted); font-size:.7rem; font-style:normal; font-weight:800; text-align:center; }
.coach-quick-strip button b { color:var(--text-muted); font-size:1rem; font-weight:500; }
[data-theme="light"] .coach-quick-strip button { background:#fff; border-color:#D5E4DC; color:#0B1A15; }
[data-theme="light"] .coach-quick-strip button strong { color:#0B1A15; }
[data-theme="light"] .coach-quick-strip button b { color:#4F6F63; }
#view-overview .coach-compact-stats { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:14px; }
#view-overview .coach-compact-stats .stat-card { min-height:0!important; padding:13px 14px!important; border:1px solid var(--border)!important; border-radius:16px!important; background:var(--surface)!important; background-image:none!important; box-shadow:none!important; color:var(--text)!important; }
#view-overview .coach-compact-stats .stat-card .label { margin:0 0 5px!important; color:var(--text-muted)!important; font-size:.7rem!important; font-weight:700!important; line-height:1.2; text-transform:none!important; letter-spacing:0!important; }
#view-overview .coach-compact-stats .stat-card .value { margin:0!important; color:var(--text)!important; font-family:var(--font-primary)!important; font-size:1.55rem!important; font-weight:750!important; line-height:1!important; text-shadow:none!important; }
#view-overview .coach-compact-stats .stat-card .value.accent { color:var(--primary)!important; }
@media(max-width:640px){
  #view-overview .coach-dashboard-hero { padding:18px; }
  .coach-quick-strip button { min-height:48px; padding:7px 10px; }
  .coach-quick-strip button strong { font-size:.78rem; }
  .coach-quick-strip button span { width:32px; height:32px; }
  #view-overview .coach-compact-stats { grid-template-columns:repeat(3,minmax(0,1fr))!important; }
  #view-overview .coach-compact-stats .stat-card { padding:11px 9px!important; }
  #view-overview .coach-compact-stats .stat-card .label { font-size:.59rem!important; }
  #view-overview .coach-compact-stats .stat-card .value { font-size:1.3rem!important; }
}
.coach-dashboard-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--grain);
  background-size: 160px 160px;
  background-repeat: repeat;
  opacity: 0.22;
  mix-blend-mode: soft-light;
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
}
.coach-dashboard-hero::after {
  content: ""; position: absolute;
  width: 380px; height: 380px; border-radius: 50%;
  right: -110px; top: -140px;
  background: radial-gradient(circle, color-mix(in srgb, var(--primary) 28%, transparent) 0%, color-mix(in srgb, var(--primary) 8%, transparent) 40%, transparent 72%);
  pointer-events: none; z-index: 0;
}
.coach-dashboard-hero > * { position: relative; z-index: 1; }
.coach-hero-copy { position:relative;z-index:1; }
.coach-hero-date { color:var(--primary);font-size:.73rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em; }
.coach-dashboard-hero h1 { font-family:var(--font-primary);font-size:clamp(1.65rem,3vw,2.35rem);margin:5px 0 7px;color:#f5f7fa; }
.coach-dashboard-hero p { color:rgba(245,247,250,.7);max-width:620px;line-height:1.5; }
.coach-hero-primary { background:var(--primary);color:#FFFFFF; }
.coach-hero-primary:hover { background:var(--primary-hover); }
.stat-card-button { appearance:none;width:100%;text-align:left;color:inherit;cursor:pointer;font:inherit; }
.stat-card-button .hint::after { content:"  →";opacity:0;transition:opacity .16s; }
.stat-card-button:hover .hint::after { opacity:1; }
.coach-health-card { display:grid;grid-template-columns:minmax(220px,1fr) minmax(210px,.8fr) minmax(210px,.8fr);align-items:center;gap:24px;padding:22px 24px;margin-bottom:24px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm); }
.coach-health-intro h2 { font-family:var(--font-primary);font-size:1.25rem;margin:3px 0 5px; }
.coach-health-intro p { color:var(--text-muted);font-size:.82rem;line-height:1.45; }
.coach-health-label { display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:.83rem; }
.coach-health-label strong { color:var(--text); }
.coach-health-track { height:8px;border-radius:99px;background:var(--surface-alt);overflow:hidden;margin-bottom:6px; }
.coach-health-track i { display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--primary),var(--accent)); }
.coach-health-metric.nutrition .coach-health-track i { background:linear-gradient(90deg,var(--accent),var(--lime-300)); }
.coach-health-metric small { color:var(--text-soft);font-size:.72rem; }
.stat-grid > *, .coach-workbench-grid > * { min-width:0; }
.coach-command-card { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);padding:22px;box-shadow:var(--shadow-sm); }
.coach-card-heading { display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px; }
.coach-card-heading h2 { font-family:var(--font-primary);font-size:1.35rem;margin-top:3px; }
.coach-priority-list,.coach-client-stack { display:grid;gap:9px; }
.coach-priority-row { appearance:none;display:grid;grid-template-columns:42px minmax(0,1fr);gap:11px;align-items:center;width:100%;padding:12px;border:1px solid var(--border);border-radius:15px;background:var(--bg);color:var(--text);text-align:left;cursor:pointer; }
.coach-priority-row:hover { border-color:var(--primary); }
.priority-count { width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:var(--surface-alt);font-weight:900; }
.coach-priority-row.attention .priority-count { background:var(--accent-soft);color:var(--accent); }
.coach-priority-row.done { opacity:.72; }
.coach-priority-row strong,.coach-priority-row small,.coach-client-row strong,.coach-client-row small { display:block; }
.coach-priority-row small,.coach-client-row small { color:var(--text-muted);margin-top:3px; }
.coach-client-row { display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--border); }
.coach-client-row:last-child { border-bottom:0; }
.coach-client-actions { display:flex;gap:6px; }
.coach-client-actions button { width:34px;height:34px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--border);background:var(--bg);color:var(--text);cursor:pointer; }
.coach-client-actions button:hover { color:var(--primary);border-color:var(--primary); }
.coach-client-actions svg { width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8; }
.coach-zero-state { min-height:190px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--text-muted);gap:7px; }
.coach-zero-state > span { width:48px;height:48px;color:var(--primary); }
.coach-zero-state svg { width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5; }
@media (max-width: 980px) { .coach-workbench-grid { grid-template-columns:1fr; } }
@media (max-width: 980px) { .coach-health-card { grid-template-columns:1fr; } }
@media (max-width: 700px) { .coach-dashboard-hero { align-items:flex-start;flex-direction:column;padding:23px; } }
.stat-card::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--primary-hover));
  opacity: 0;
  transition: opacity 0.25s var(--ease-out);
}
.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}
.stat-card:hover::before { opacity: 1; }
.stat-card .label {
  color: var(--text-soft);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin-bottom: 8px;
}
.stat-card .value {
  font-family: var(--font-primary);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
}
.stat-card .value.accent { color: var(--primary); }
.stat-card .hint { font-size: 0.82rem; color: var(--text-soft); margin-top: 6px; }

/* stat highlight variant — full lime card like the reference */

/* generic cards */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
  animation: floatIn 0.4s var(--ease-out) both;
  transition: box-shadow 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.card:hover { box-shadow: var(--shadow-md); }
.card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.card-head h3 { font-size: 1.15rem; }

/* lists */
.list { display: flex; flex-direction: column; gap: 10px; }
.list-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--surface-alt);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: border-color 0.15s;
}
.list-item:hover { border-color: var(--border-strong); }
.list-item .info { flex: 1; min-width: 0; }
.list-item .info .title { font-weight: 600; color: var(--text); }
.list-item .info .meta { font-size: 0.83rem; color: var(--text-soft); }

.badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.badge-primary { background: var(--primary); color: var(--primary-fg); }
.badge-accent  { background: var(--primary-soft); color: var(--primary); }
.badge-muted   { background: var(--surface-alt); color: var(--text-muted); border: 1px solid var(--border); }

/* empty state */
.empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-soft);
}
.empty .big { font-size: 2rem; margin-bottom: 8px; }

/* two-col */

/* messages */
@keyframes typingBounce {
  0%,60%,100% { transform: translateY(0); opacity: 0.5; }
  30%         { transform: translateY(-4px); opacity: 1; }
}

/* ============================================
   SETTINGS
============================================ */
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.settings-row:last-child { border-bottom: none; }
.settings-row .label { font-weight: 600; color: var(--text); }
.settings-row .hint { font-size: 0.82rem; color: var(--text-soft); margin-top: 2px; }
.settings-row .control { flex-shrink: 0; }

/* iOS-style switch */
.switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 26px;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--border-strong);
  border-radius: 999px;
  transition: background 0.25s var(--ease-out);
}
.switch .slider::before {
  content: "";
  position: absolute;
  width: 20px; height: 20px;
  left: 3px; top: 3px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: transform 0.25s var(--ease-spring);
}
.switch input:checked + .slider { background: var(--primary); }
.switch input:checked + .slider::before { transform: translateX(20px); }
.switch:focus-within .slider { box-shadow: var(--shadow-glow); }

/* role toggles */
.roles-toggle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.role-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
}
.role-toggle:hover { border-color: var(--border-strong); }
.role-toggle:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.role-toggle input { accent-color: var(--primary); margin-top: 3px; }
.role-toggle-body { flex: 1; min-width: 0; }
.role-toggle-name { font-weight: 700; color: var(--text); margin-bottom: 2px; }
.role-toggle-desc { font-size: 0.78rem; color: var(--text-soft); }

/* theme quick chips */
.theme-chips { display: flex; gap: 8px; }
.theme-chip {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s var(--ease-out);
}
.theme-chip:hover { border-color: var(--primary); color: var(--text); }
.theme-chip.active {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: var(--primary);
}
.theme-chip svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ============================================
   WORKOUT PLAN — exercise display
============================================ */
.ex-list { display: flex; flex-direction: column; gap: 10px; }

.ex-item {
  display: flex;
  gap: 14px;
  padding: 14px;
  background: var(--surface-alt);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: border-color 0.2s var(--ease-out), transform 0.15s var(--ease-out);
}
.ex-item:hover { border-color: var(--border); }
.ex-icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--primary-soft);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.ex-icon svg {
  width: 22px; height: 22px;
  stroke-linecap: round; stroke-linejoin: round;
}
.ex-body { flex: 1; min-width: 0; }
.ex-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.ex-name { font-weight: 700; color: var(--text); font-size: 1rem; }
.ex-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ex-badge svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }
.ex-badge.timed { background: rgba(90, 180, 255, 0.15); color: #7ecbff; }
.ex-badge.drop  { background: rgba(255, 157, 187, 0.15); color: #ff9dbb; }
.ex-badge.tech  { background: var(--primary); color: var(--primary-fg); }

.tech-note-inline {
  margin-top: 8px;
  padding: 6px 10px;
  background: var(--primary-soft);
  color: var(--primary);
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tech-note-inline svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }

.ex-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.stat-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.82rem;
  color: var(--text);
  font-weight: 500;
}
.stat-chip b { font-weight: 700; }
.stat-chip svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }
.stat-chip.muted { background: transparent; color: var(--text-soft); }

.ex-drops { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.drop-chip {
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 157, 187, 0.12);
  color: #ff9dbb;
  font-size: 0.75rem;
  font-weight: 600;
}
.ex-notes {
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--surface);
  border-left: 3px solid var(--primary);
  border-radius: 4px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.ex-superset {
  position: relative;
  padding: 8px 8px 8px 24px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--primary) 6%, transparent);
  border: 1px solid var(--primary-soft);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ex-superset::before {
  content: "";
  position: absolute;
  left: 10px; top: 34px; bottom: 12px;
  width: 3px;
  background: var(--primary);
  border-radius: 3px;
}
.ex-superset-label {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-fg);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  align-self: flex-start;
}
.ex-superset-label svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ============================================
   PLAN EDITOR MODAL
============================================ */
.modal.modal-lg {
  max-width: 780px;
  padding: 0;
  display: flex;
  flex-direction: column;
  max-height: 92vh;
}
.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 600px) {
  .form-row-2 { grid-template-columns: 1fr; }
}

/* range input (min - max) */

/* tempo input (3 tiny numbers) */

/* technique row */
.drop-row {
  display: grid;
  grid-template-columns: 60px 1fr auto 1fr auto auto;
  gap: 6px;
  align-items: center;
  padding: 6px 8px;
  background: var(--surface-alt);
  border-radius: 8px;
}
.drop-row input {
  padding: 6px 8px;
  text-align: right;
  font-weight: 600;
}
.check-pair {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  align-self: flex-start;
  transition: all 0.2s var(--ease-out);
}
.check-pair:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}
.check-pair input { accent-color: var(--primary); }
.check-pair svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }

/* On very narrow screens, collapse the exercise header */

/* spinner */
.spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
}

/* modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 36, 28, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:none;
}
.modal-backdrop.active { display: flex; }
.modal-page-locked {
  position:fixed;
  left:0;
  right:0;
  width:100%;
  overflow:hidden;
}
.modal-backdrop.active { overscroll-behavior:contain; }
.modal {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 28px;
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
}
.modal-backdrop.active > .modal { touch-action:pan-y; }
.modal h3 { margin-bottom: 6px; font-size: 1.4rem; }
.modal .sub { color: var(--text-muted); margin-bottom: 20px; font-size: 0.9rem; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

/* utils */
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }
.spacer { height: 20px; }
.hidden { display: none !important; }
.text-muted { color: var(--text-muted); }
.text-small { font-size: 0.85rem; }
.mb-8  { margin-bottom: 8px; }

/* exercise/meal row inside plan editor */

/* ============================================
   NUTRITION PLAN EDITOR (MacroFactor-style)
============================================ */

.section-title {
  font-family: var(--font-primary);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-soft);
  margin-bottom: 10px;
}

/* TDEE box */
.tdee-box {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  background: linear-gradient(135deg, var(--primary-soft), var(--accent-soft));
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}
.tdee-box .tdee-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 600;
}
.tdee-box .tdee-val {
  font-family: var(--font-primary);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
}
.tdee-box .tdee-val.accent { color: var(--accent); }
@media (max-width: 640px) {
  .tdee-box { grid-template-columns: 1fr 1fr; }
  .tdee-box .btn { grid-column: 1 / -1; }
}

/* sticky bottom bar (editor) */
.editor-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 260px;   /* offset for sidebar on desktop */
  right: 0;
  z-index: 30;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 24px rgba(8, 36, 28, 0.08);
  padding: 12px 20px;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr 0.8fr;
  gap: 20px;
  align-items: center;
}
.editor-bottom-bar .ebb-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.editor-bottom-bar .ebb-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-soft);
  font-weight: 600;
}
.editor-bottom-bar .ebb-val {
  font-family: var(--font-primary);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.editor-bottom-bar .ebb-val .of {
  color: var(--text-soft);
  font-weight: 400;
  font-size: 0.85rem;
}
.editor-bottom-bar .ebb-track {
  height: 6px;
  background: var(--surface-alt);
  border-radius: 999px;
  overflow: hidden;
}
.editor-bottom-bar .ebb-track .fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.25s;
}
.editor-bottom-bar .ebb-track .fill.p    { background: var(--primary); }
.editor-bottom-bar .ebb-track .fill.c    { background: var(--orange-400); }
.editor-bottom-bar .ebb-track .fill.f    { background: var(--orange-500); }
.editor-bottom-bar .ebb-track .fill.over { background: var(--danger); }

@media (max-width: 900px) {
  .editor-bottom-bar {
    left: 0;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    padding: 10px 12px;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
  }
  .editor-bottom-bar .ebb-item:nth-child(4),
  .editor-bottom-bar .ebb-item:nth-child(5) { display: none; }
}
@media (max-width: 640px) {
  .editor-bottom-bar { grid-template-columns: 1fr 1fr; }
  .editor-bottom-bar .ebb-item:nth-child(3) { display: none; }
}

/* ============================================
   CLIENT — PROFESSIONAL CARDS ON OVERVIEW
============================================ */

/* current pro strip inside browse view */

/* pill tabs (used in browse view) */

/* pro list (browse view) */

/* ============================================
   FOODS LIBRARY (nutritionist)
============================================ */
.food-picker-custom-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
#view-client-detail .weight-chart { min-height:220px; }

/* Meal plan editor: clear hierarchy and linked nutrition targets. */
.meal-editor-main-actions { display:grid!important; grid-template-columns:1fr 1fr; gap:10px!important; width:100%; }
.meal-editor-main-actions .btn { width:100%; min-height:48px; justify-content:center; }
.mp-client-row { grid-template-columns:34px auto minmax(0,1fr)!important; }
.mp-client-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:var(--primary-soft); color:var(--primary); }
.mp-client-icon svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9; }
.meal-target-line { display:grid; grid-template-columns:1.25fr repeat(3,1fr); gap:8px; margin:0 0 18px; padding:10px; border:1px solid var(--border); border-radius:17px; background:var(--surface); }
.meal-target-line label { display:flex; align-items:center; gap:6px; min-width:0; min-height:48px; padding:7px 10px; border-radius:12px; background:var(--surface-alt); }
.meal-target-line label:first-child { background:var(--primary-soft); }
.meal-target-line span { color:var(--text-muted); font-size:.66rem; font-weight:800; }
.meal-target-line input { min-width:0; width:100%; padding:0; border:0; background:transparent; color:var(--text); font-size:1rem; font-weight:850; text-align:right; }
.meal-target-line b { color:var(--text-muted); font-size:.6rem; }
.meal-builder-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:-7px 0 16px; }
.meal-builder-actions .btn { min-height:48px; }
.empty-meals-cta { display:flex; width:100%; min-height:150px; align-items:center; justify-content:center; flex-direction:column; gap:6px; margin-bottom:18px; border:1px dashed var(--border-strong); border-radius:18px; background:var(--surface); color:var(--text); font:inherit; cursor:pointer; }
.empty-meals-cta>span { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:var(--primary-soft); color:var(--primary); font-size:1.3rem; }
.empty-meals-cta small { color:var(--text-muted); font-size:.68rem; }
.plan-summary-card { border-color:color-mix(in srgb,var(--primary) 22%,var(--border))!important; box-shadow:none!important; }
.plan-summary-card .macro-summary { border:0; padding:0; background:transparent; }
.new-meal-back { display:inline-flex; align-items:center; gap:5px; min-height:40px; margin:0 0 8px; padding:4px 10px 4px 4px; border:0; border-radius:11px; background:transparent; color:var(--text); font:750 .72rem var(--font-primary); cursor:pointer; }
.new-meal-back svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.new-meal-back:hover { background:var(--surface-alt); }
.meal-builder-page { width:min(920px,100%); margin:0 auto; padding-bottom:40px; }
.meal-builder-page-head { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px; margin-bottom:18px; padding:12px 0 16px; border-bottom:1px solid var(--border); }
.meal-builder-page-head .new-meal-back { margin:0; }
.meal-builder-page-head h1 { margin:2px 0 0; font-size:1.45rem; }
.meal-builder-page-head p { margin:3px 0 0; color:var(--text-muted); font-size:.7rem; }
.meal-builder-mobile-save { display:none; }
.nm-food-results { display:grid; gap:5px; margin-top:7px; }
.nm-food-results button { display:grid; grid-template-columns:minmax(0,1fr) auto 24px; align-items:center; gap:8px; width:100%; padding:9px 10px; border:1px solid var(--border); border-radius:11px; background:var(--surface-alt); color:var(--text); text-align:left; cursor:pointer; }
.nm-food-results small { color:var(--text-muted); font-size:.62rem; }
.nm-food-results b { color:var(--primary); font-size:1rem; text-align:center; }
.nm-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:12px; padding:9px; border-radius:13px; background:var(--primary-soft); }
.nm-summary span { color:var(--text-muted); font-size:.64rem; text-align:center; }
.nm-summary b { color:var(--text); }
@media(max-width:480px){.mp-client-row{grid-template-columns:32px 1fr!important}.mp-client-label{display:none}.mp-client-select{min-width:0;width:100%}.meal-target-line{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:6px}.meal-target-line label{display:grid;gap:2px;min-height:52px;padding:6px}.meal-target-line input{text-align:left;font-size:.9rem}.meal-target-line b{display:none}}
@media(max-width:640px){
  .meal-builder-page { padding-bottom:84px; }
  .meal-builder-page-head { position:sticky; top:0; z-index:10; grid-template-columns:auto minmax(0,1fr); margin:0 -4px 12px; padding:8px 4px 10px; background:color-mix(in srgb,var(--bg) 96%,transparent); backdrop-filter:none; }
  .meal-builder-page-head>div p,.meal-builder-page-head>div>.dashboard-eyebrow { display:none; }
  .meal-builder-page-head h1 { margin:0; font-size:1.12rem; }
  .meal-builder-page-head>.btn { display:none; }
  .meal-builder-mobile-save { position:fixed; z-index:20; left:12px; right:12px; bottom:max(10px,env(safe-area-inset-bottom)); display:block; }
  .meal-builder-mobile-save .btn { width:100%; min-height:52px; box-shadow:0 10px 28px rgba(0,0,0,.22); }
  .nm-food-results button{grid-template-columns:minmax(0,1fr) auto 24px;padding:10px;}
  .nm-summary{gap:3px;padding:8px 4px;}
}

/* ============================================
   SUPPLEMENTS
============================================ */

.supp-row {
  display: grid;
  grid-template-columns: 28px 1.5fr 1fr 1.2fr 1.5fr auto;
  gap: 6px;
  align-items: center;
  padding: 8px 10px;
  background: var(--surface-alt);
  border-radius: var(--radius-md);
  margin-bottom: 6px;
}
.nutrition-image-editor {
  grid-column: 2 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding-top: 2px;
}
.nutrition-image-editor img,
.nutrition-image-empty {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  object-fit: cover;
}
.nutrition-image-empty {
  display: grid;
  place-items: center;
  padding: 5px;
  color: var(--text-soft);
  font-size: .62rem;
  line-height: 1.1;
  text-align: center;
}
.nutrition-image-add,
.nutrition-image-remove {
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: .76rem;
  font-weight: 750;
  cursor: pointer;
}
.nutrition-image-add:hover { border-color: var(--primary); color: var(--primary); }
.nutrition-image-remove { color: var(--danger); }
.meal-image-editor {
  grid-column: auto;
  margin: -3px 0 12px;
  padding: 10px;
  border: 1px dashed var(--border);
  border-radius: 13px;
  background: var(--surface-alt);
}
.supp-num {
  width: 24px; height: 24px;
  background: var(--primary);
  color: var(--primary-fg);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 0.72rem;
}
.supp-row input {
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 0.85rem;
}
.supp-del {
  width: 28px; height: 28px;
  border: none;
  background: transparent;
  color: var(--danger);
  cursor: pointer;
  border-radius: 6px;
  font-size: 1rem;
}
.supp-del:hover { background: rgba(214, 69, 69, 0.15); }
@media (max-width: 720px) {
  .supp-row {
    grid-template-columns: 28px 1fr auto;
    grid-template-areas:
      "num name del"
      ".   dose dose"
      ".   time time"
      ".   notes notes";
    gap: 4px;
  }
  .supp-num  { grid-area: num; }
  .supp-name { grid-area: name; }
  .supp-dose { grid-area: dose; }
  .supp-timing { grid-area: time; }
  .supp-notes { grid-area: notes; }
  .supp-del  { grid-area: del; }
  .supp-image-editor { grid-column: 2 / -1; }
}

/* client view supplements */

/* meal block */
.meal-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}
.meal-head {
  display: grid;
  grid-template-columns: 2fr 1fr auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}
.meal-head input {
  padding: 10px 12px;
  font-weight: 600;
}
.meal-remove {
  background: transparent;
  border: none;
  color: var(--danger);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
}
.meal-remove:hover { background: #fee7e7; }

[data-theme="dark"] .meal-remove:hover { background:rgba(255,107,107,.15);color:var(--danger); }

.food-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.food-row {
  display: grid;
  grid-template-columns: 1.6fr 90px auto auto auto auto auto;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  background: var(--surface-alt);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
}
.food-row .food-name { font-weight: 600; color: var(--text); }
.food-row .food-macro {
  font-size: 0.78rem;
  color: var(--text-soft);
  font-family: var(--font-mono);
  white-space: nowrap;
  text-align: right;
}
.food-row .food-macro strong { color: var(--text); font-weight: 700; }
.food-row input[type="number"] {
  padding: 6px 8px;
  text-align: right;
  font-weight: 600;
}
.food-row .food-remove {
  background: transparent;
  border: none;
  color: var(--danger);
  font-size: 1rem;
  cursor: pointer;
  padding: 4px 6px;
}

.food-picker {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 10px;
  background: var(--primary-soft);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-md);
}
.food-picker input {
  padding: 10px 12px;
}
.food-picker .picker-hint {
  grid-column: 1 / -1;
  font-size: 0.78rem;
  color: var(--text-muted);
  padding: 0 4px;
}
.food-picker.custom {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr auto;
}

.meal-totals {
  display: flex;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  margin-top: 6px;
  flex-wrap: wrap;
}
.meal-totals .chip {
  padding: 4px 10px;
  background: var(--surface-alt);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}
.meal-totals .chip.kcal {
  background: var(--accent-soft);
  color: var(--accent-hover);
}

/* macro progress bars (client + editor summary) */
.macro-summary {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.macro-summary .macro-total {
  font-family: var(--font-primary);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
  letter-spacing: -0.02em;
}
.macro-summary .macro-total-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 18px;
}
.macro-summary .macro-total .of {
  color: var(--text-soft);
  font-size: 1rem;
  font-weight: 500;
}

.macro-bars {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
}
.macro-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.macro-bar .head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.85rem;
}
.macro-bar .head .label {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.72rem;
  color: var(--text-soft);
}
.macro-bar .head .val {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
}
.macro-bar .head .val .of {
  color: var(--text-soft);
  font-weight: 400;
  font-size: 0.82rem;
}
.macro-bar .track {
  height: 8px;
  background: var(--surface-alt);
  border-radius: 999px;
  overflow: hidden;
}
.macro-bar .fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.3s;
  background: var(--primary);
}
.macro-bar.p .fill { background: linear-gradient(90deg, var(--primary), var(--primary-hover)); }
.macro-bar.c .fill { background: linear-gradient(90deg, #FFD94B, #F0AD00); }
.macro-bar.f .fill { background: linear-gradient(90deg, #FF9DBB, #E7548A); }
.macro-bar .fill.over { background: linear-gradient(90deg, #A2494A, #9a2b2b); }

/* mobile tweaks */
@media (max-width: 640px) {
  .meal-head { grid-template-columns: 1fr auto; }
  .meal-head input:nth-child(2) { grid-column: 1; }
  .food-row {
    grid-template-columns: 1fr auto;
    gap: 6px 10px;
  }
  .food-row .food-name { grid-column: 1 / -1; }
  .food-row .food-macro { grid-column: 1 / -1; text-align: left; }
  .food-picker { grid-template-columns: 1fr 90px; }
  .food-picker.custom { grid-template-columns: 1fr 1fr; }
  .macro-bars { grid-template-columns: 1fr; }
}

/* ============================================
   MOBILE TOP BAR (visible only < 900px)
============================================ */

.mobile-topbar {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 56px;
  background: var(--glass-bg);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-bottom: 1px solid var(--border);
  padding: 0 16px;
  z-index: 40;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 8px rgba(8, 36, 28, 0.04);
}
.mobile-topbar .brand {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
}
.mobile-topbar .icon-btn {
  background: var(--surface-alt);
  border: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile-topbar .icon-btn:hover { background: var(--primary-soft); color: var(--primary); }
.mobile-topbar .icon-btn svg {
  width: 18px; height: 18px;
  stroke: currentColor; fill: none;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}

.sidebar-footer .btn svg {
  stroke: currentColor; fill: none;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
  width: 16px; height: 16px;
}

/* ============================================
   TABLET (<= 900px)
============================================ */
@media (max-width: 900px) {
  /* auth pages */
  .auth-shell { grid-template-columns: 1fr; }
  .auth-hero { display: none; }
  .auth-panel { padding: 24px 20px 40px; }

  /* Mobile: sidebar is hidden; navigation is a draggable FAB (#nav-fab). */
  .app-shell {
    grid-template-columns: 1fr;
    padding-top: 56px;    /* top bar */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    min-height: 100vh;
    min-height: 100dvh;
  }
  .mobile-topbar { display: flex; }

  .sidebar { display: none !important; }
  .sidebar .brand,
  .sidebar-role-badge,
  .sidebar-footer { display: none; }

  /* content */
  .main { padding: 16px 16px 24px; }
  .page-head { margin-bottom: 20px; }
  .page-head h1 { font-size: 1.5rem; }
  .page-head .sub { font-size: 0.88rem; }

  /* grids */
  .role-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 12px; }

  /* chat: stack list & main */
}

/* ============================================
   PHONE (<= 640px)
============================================ */
@media (max-width: 640px) {
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.3rem; }
  h3 { font-size: 1.05rem; }

  /* prevent iOS zoom on inputs */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  select,
  textarea {
    font-size: 16px;
  }

  /* auth cards */
  .auth-panel { padding: 20px 16px 32px; }
  .auth-card h2 { font-size: 1.55rem; }
  .auth-card .sub { margin-bottom: 20px; font-size: 0.92rem; }

  /* role selection */
  .role-shell { padding: 32px 16px 48px; }
  .role-header { margin-bottom: 24px; }
  .role-header h1 { font-size: 1.7rem; }
  .role-header p { font-size: 0.95rem; }
  .role-card { padding: 22px 20px; }
  .role-card .icon {
    width: 48px; height: 48px;
    font-size: 22px;
    margin-bottom: 12px;
  }
  .role-card h3 { font-size: 1.1rem; }

  /* stats: single column on very small */
  .stat-grid { grid-template-columns: 1fr; }
  .stat-card { padding: 18px; }
  .stat-card .value { font-size: 1.7rem; }

  /* cards */
  .card { padding: 18px; border-radius: 18px; }
  .card-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .card-head .row,
  .card-head .btn { width: 100%; }
  .card-head > .btn { justify-content: center; }

  /* list items */
  .list-item {
    flex-wrap: wrap;
    padding: 12px;
    gap: 10px;
  }
  .list-item .info { flex: 1 1 100%; order: -1; }
  .list-item .avatar { flex-shrink: 0; }
  .list-item .btn { flex: 1; min-width: 100px; }

  /* page head buttons stack */
  .page-head {
    flex-direction: column;
    align-items: stretch;
  }
  .page-head .btn { width: 100%; justify-content: center; }

  /* modal fills screen */
  .modal-backdrop { padding: 0; align-items: flex-end; }
  .modal {
    max-width: 100%;
    max-height: 92vh;
    border-radius: 22px 22px 0 0;
    padding: 22px 18px 28px;
  }
  .modal h3 { font-size: 1.2rem; }
  .modal-actions { flex-direction: column-reverse; gap: 8px; }
  .modal-actions .btn { width: 100%; }

  /* plan row (exercise/meal editor): stack nicely */

  /* chat: use remaining viewport height */

  /* main padding tighter */
  .main { padding: 14px 12px 20px; }

  /* buttons touch target */
  .btn { min-height: 44px; }
  #view-meal-plan-editor { padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================
   MOBILE NAV — bigger + cleaner, max 5 tabs
============================================ */
.lbl-mobile { display: none; }

@media (max-width: 900px) {
  /* No bottom bar on mobile; content is full-screen. */
  .app-shell {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* Swap in the short label when a mobileLabel was provided (for FAB menu). */
  .nav-item:has(.lbl-mobile) .lbl-full { display: none; }
  .nav-item .lbl-mobile { display: inline; }

  .nav {
    flex-direction: row;
    justify-content: space-around;
    align-items: stretch;
    flex: 1;
    width: 100%;
    gap: 0;
    padding: 0;
  }

  .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    padding: 0;
    font-size: 0.66rem;
    font-weight: 600;
    gap: 3px;
    letter-spacing: 0;
    border-radius: 999px;
    color: var(--text-muted);
    background: transparent;
    transition: color 0.18s var(--ease-out), transform 0.12s var(--ease-out);
  }
  .nav-item:hover { background: transparent; }
  .nav-item:active { transform: scale(0.94); }

  .nav-item .icon {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 999px;
    transition: background 0.2s var(--ease-out);
  }
  .nav-item .icon svg {
    width: 20px; height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .nav-item .lbl {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1;
  }

  /* Active tab: circular soft-blue highlight behind the icon, brand color text. */
  .nav-item.active {
    background: transparent;
    color: var(--primary);
  }
  .nav-item.active .icon {
    background: var(--primary-soft);
  }
  .nav-item.active::before { display: none; }
}

/* ============================================
   FLOATING NAV FAB (mobile) — draggable button
   that opens a dynamic tab menu.
============================================ */
#nav-fab {
  display: none;
}
@media (max-width: 900px) {
  #nav-fab {
    position: fixed;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: var(--primary);
    color: var(--primary-fg);
    box-shadow:
      0 12px 28px color-mix(in srgb, var(--primary) 40%, transparent),
      0 4px 10px rgba(0, 0, 0, 0.15);
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s var(--ease-out), box-shadow 0.2s var(--ease-out);
  }
  #nav-fab:active { transform: scale(0.94); cursor: grabbing; }
  #nav-fab svg {
    width: 24px; height: 24px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  #nav-fab-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: transparent;
  }
  #nav-fab-menu {
    position: fixed;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    min-width: 200px;
    max-width: calc(100vw - 24px);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    animation: navFabIn 0.16s var(--ease-out);
    transform-origin: bottom center;
  }
  @keyframes navFabIn {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
  }
}

/* ============================================
   COACH — workout plans list on mobile
   (better card framing + action-button layout)
============================================ */
@media (max-width: 640px) {
  /* When the header holds a .row of buttons, split them evenly across the
     card instead of stacking each one full-width. */
  .card-head > .row {
    width: 100%;
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
  }
  .card-head > .row > .btn {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    padding-left: 8px;
    padding-right: 8px;
  }

  /* Tighter workout-plan cards. */
  #workout-plans-list .card,
  #meal-plans-list .card {
    padding: 16px 14px;
    border-radius: 16px;
  }
  #workout-plans-list .card-head h3,
  #meal-plans-list .card-head h3 {
    font-size: 1.05rem;
    line-height: 1.25;
  }

  /* Exercise items: smaller icon, snugger padding — no more wide white space. */
  .ex-item {
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
  }
  .ex-icon { width: 36px; height: 36px; border-radius: 10px; }
  .ex-icon svg { width: 18px; height: 18px; }
  .ex-name { font-size: 0.95rem; }
  .stat-chip { font-size: 0.75rem; padding: 3px 8px; }
  .ex-badge { font-size: 0.63rem; padding: 2px 7px; }
  .ex-title { gap: 6px; margin-bottom: 4px; }

  /* Superset frame — pull the padding in so nested items fit. */
  .ex-superset { padding: 6px 6px 6px 18px; }
  .ex-superset::before { left: 8px; top: 30px; bottom: 10px; }

  /* Clients list on coach: keep the two action buttons on one row. */
  #clients-list .list-item {
    align-items: center;
  }
  #clients-list .list-item > .row {
    flex: 1 1 100%;
    display: flex;
    gap: 8px;
  }
  #clients-list .list-item > .row > .btn {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 0.85rem;
  }
}


/* ============================================
   SKELETON LOADERS — subtle shimmer while first
   Firestore snapshot is still in flight. Content
   swaps in as soon as the subscription fires.
============================================ */
.sk {
  display: block;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--surface-alt) 92%, transparent) 0%,
    color-mix(in srgb, var(--border) 60%, transparent) 50%,
    color-mix(in srgb, var(--surface-alt) 92%, transparent) 100%);
  background-size: 220% 100%;
  border-radius: 10px;
  animation: skShimmer 1.15s ease-in-out infinite;
}
.sk-line   { height: 12px; margin: 6px 0; }
.sk-line.sm{ height: 8px;  width: 60%; }
.sk-line.lg{ height: 18px; width: 45%; }
.sk-circle { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }
.sk-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 4px;
}
.sk-row .sk-cluster { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sk-row .sk-pill    { width: 74px; height: 30px; border-radius: 999px; }
.sk-list .sk-row + .sk-row { border-top: 1px solid var(--border); }
@keyframes skShimmer {
  0%   { background-position: 220% 0; }
  100% { background-position: -20% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sk { animation-duration: 3s; }
}

/* ============================================
   ritm — splash + loader (clean, single mark)
============================================ */
.app-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  background: #FFFFFF;
  color: #08241C;
  transition: opacity 0.32s var(--ease-out, ease-out);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.app-loader.hide { opacity: 0; pointer-events: none; }

@keyframes aveDot {
  0%, 100% { transform: scale(0.6); opacity: 0.55; }
  50%      { transform: scale(1.15); opacity: 1;    }
}
@keyframes aveMarkFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}

.app-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  transition: opacity 0.32s var(--ease-out, ease-out);
  pointer-events: none;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.app-splash.hide { opacity: 0; }

/* ============================================
   WORKOUT PLAN EDITOR — mobile-first redesign
============================================ */
.editor-topbar-close {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  border: none;
  background: var(--surface-alt);
  color: var(--text-muted);
  font-size: 1.05rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.18s var(--ease-out, ease-out), color 0.18s var(--ease-out, ease-out), transform 0.12s var(--ease-out, ease-out);
}
.editor-topbar-close:hover { background: var(--border); color: var(--text); }
.editor-topbar-close:active { transform: scale(0.94); }

/* Exercise card — redesigned */

/* Card header: number top-left, delete top-right, name centered on its own
   full-width row underneath so the input reads perfectly centered. */

/* Category chips (horizontal scroll) */

/* Kind toggle (Reps / Timp) — big & full width, segmented control */

/* Primary fields — 3 columns on desktop, stack smart on mobile */
.lbl-hint {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-soft);
  opacity: 0.7;
}

/* Superset toggle — cleaner pill */

/* Advanced accordion */

/* Reorder buttons — small, subtle, at bottom */

/* "Add exercise" big primary button */

/* Mobile tweaks for the redesigned editor */

/* ============================================
   WORKOUT EDITOR — pro polish pass
============================================ */

/* Section head above the exercises list — more editorial */

/* Plan info card — subtle depth, cleaner label positioning */

/* Ex card — subtle gradient bg + softer shadow on focus */

/* Exercise number badge — subtle inner shine */

/* Category chip: nicer active state with tiny inner ring */

/* Kind toggle — smoother spring on active */

/* Primary field inputs — nicer focus ring */

/* Advanced accordion — cleaner divider, smoother reveal */
@keyframes advReveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Reorder pills — nicer disabled state */

/* ============================================
   TOAST NOTIFICATIONS
============================================ */

.toast {
  pointer-events: auto;
  display: grid;
  grid-template-columns: 44px 1fr 32px;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 14px 14px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(8, 36, 28, 0.16), 0 2px 8px rgba(8, 36, 28, 0.06);
  color: var(--text);
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  transition: opacity 0.25s var(--ease-out, ease-out), transform 0.25s var(--ease-out, ease-out);
  min-width: 280px;
}
.toast.show { opacity: 1; transform: translateY(0) scale(1); }
.toast.leave { opacity: 0; transform: translateY(-6px) scale(0.98); }

/* Kind variants — left border color + icon tint */

@media (max-width: 640px) {
  .toast { min-width: 0; }
}

/* ============================================
   COACH REQUEST CARDS (on coach + client views)
============================================ */

/* Client browse — coach card status pills */
.pro-list-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}
.pro-list-status.pending { background: rgba(245, 196, 108, 0.16); color: #d19a3a; }
.pro-list-status.accepted { background: var(--primary-soft); color: var(--primary); }
.pro-list-status.rejected { background: rgba(239, 68, 68, 0.1); color: var(--danger); }

/* ============================================
   COACH — Clients tab (pro grid + search)
============================================ */

/* Count badge next to page-head H1 */

/* Toolbar under the header */
.search-field {
  position: relative;
  flex: 1;
  min-width: 220px;
  max-width: 380px;
}
.search-field .search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  stroke: var(--text-soft);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.search-field input {
  width: 100%;
  padding: 12px 14px 12px 42px;
  border-radius: 14px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
  transition: border-color 0.15s var(--ease-out, ease-out), box-shadow 0.15s var(--ease-out, ease-out);
}
.search-field input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-field input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}

/* The grid itself */

.client-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(8, 36, 28, 0.03);
  transition: transform 0.2s var(--ease-out, ease-out), box-shadow 0.2s var(--ease-out, ease-out), border-color 0.2s var(--ease-out, ease-out);
}
.client-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary-soft);
  box-shadow: 0 10px 32px rgba(8, 36, 28, 0.08);
}

/* Prettier empty state (reused across tabs) */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 56px 24px;
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 20px;
  color: var(--text-muted);
}
.empty-state.small { padding: 36px 20px; }
.empty-state-icon {
  width: 72px; height: 72px;
  border-radius: 22px;
  background: var(--primary-soft);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 22px color-mix(in srgb, var(--primary) 14%, transparent);
}
.empty-state-icon.subtle {
  background: var(--surface-alt);
  color: var(--text-soft);
  box-shadow: none;
  width: 56px; height: 56px;
}
.empty-state-icon svg { width: 34px; height: 34px; }
.empty-state.small .empty-state-icon svg { width: 26px; height: 26px; }
.empty-state h3 {
  font-size: 1.15rem;
  color: var(--text);
  margin: 4px 0 0;
  letter-spacing: -0.01em;
}
.empty-state p {
  font-size: 0.9rem;
  max-width: 380px;
  line-height: 1.45;
  margin: 0;
}

/* Mobile: single column, actions still split */
@media (max-width: 640px) {
  .search-field { max-width: none; width: 100%; }
  .client-card { padding: 16px; border-radius: 18px; }
  .empty-state { padding: 44px 20px; }
  .empty-state-icon { width: 64px; height: 64px; }
  .empty-state-icon svg { width: 30px; height: 30px; }
}

/* ============================================
   WEIGHT TRACKING — chart, input, summary, history
============================================ */

/* SVG chart */
.weight-chart {
  width: 100%;
  height: 220px;
  display: block;
  overflow: visible;
}
.weight-page { animation: weight-page-in .42s ease-out both; }
@keyframes weight-page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.weight-panel-kicker { display:block; margin-bottom:5px; color:var(--primary); font-size:.66rem; font-weight:800; letter-spacing:.13em; }
.chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-soft);
  font-size: 0.9rem;
  height: 220px;
  border: 1px dashed var(--border);
  border-radius: 14px;
  background: var(--surface-alt);
}
.chart-grid   { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.55; }
.chart-line   { stroke: var(--primary); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.chart-line { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: weight-line-draw 1.2s .18s ease-out forwards; vector-effect: non-scaling-stroke; }
.chart-area { opacity:0; animation: weight-area-in .7s .55s ease-out forwards; }
.chart-dot { opacity:0; animation: weight-dot-in .3s .9s ease-out forwards; transform-box:fill-box; transform-origin:center; }
@keyframes weight-line-draw { to { stroke-dashoffset:0; } }
@keyframes weight-area-in { to { opacity:1; } }
@keyframes weight-dot-in { from { opacity:0; transform:scale(0); } to { opacity:1; transform:scale(1); } }
.chart-dot    { fill: var(--primary); stroke: var(--surface); stroke-width: 2; transition: r 0.15s; }
.chart-dot:hover { r: 5; }
.chart-y-label {
  fill: var(--text-soft);
  font-size: 9.5px;
  font-weight: 600;
  text-anchor: end;
}
.chart-x-label {
  fill: var(--text-soft);
  font-size: 10px;
  font-weight: 500;
  text-anchor: middle;
}

/* Input card */
.weight-input-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 18px;
  margin-bottom: 18px;
  box-shadow: 0 2px 8px rgba(8, 36, 28, 0.03);
}
.weight-input-card { border:0; box-shadow:0 10px 30px rgba(8, 36, 28,.07); }

/* Summary tiles */
.weight-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(8, 36, 28, 0.03);
}
.weight-stat { position:relative; overflow:hidden; padding:18px; animation:weight-stat-in .4s var(--delay) ease-out both; }
.weight-stat::after { content:""; position:absolute; width:70px; height:70px; right:-30px; bottom:-38px; border-radius:50%; background:var(--primary-soft); }
@keyframes weight-stat-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.weight-panel { margin:0; border-radius:20px; }
.weight-panel .card-head { margin-bottom:10px; }
.weight-panel .card-head h3 { margin:0; }
@keyframes weight-pulse { 70% { box-shadow:0 0 0 7px color-mix(in srgb, var(--primary) 0%, transparent); } 100% { box-shadow:0 0 0 0 color-mix(in srgb, var(--primary) 0%, transparent); } }
.weight-stat .lbl {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-soft);
  font-weight: 700;
}
.weight-stat .val {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}
.weight-stat .val.down  { color: #58c98a; }
.weight-stat .val.up    { color: #f5a04a; }
.weight-stat .val.flat  { color: var(--text-muted); }
.weight-stat .sub {
  font-size: 0.78rem;
  color: var(--text-soft);
}

/* History list */

/* Settings coach strip */

/* Client detail — daily chart + weekly averages must fit any viewport
   without horizontal scroll or clipping. Scoped to #view-client-detail so
   they don't clash with the client-side weight page rules. */
#view-client-detail { min-width: 0; }
#view-client-detail .card { min-width: 0; overflow: hidden; }
#view-client-detail .weight-chart { width: 100%; height: 220px; max-width: 100%; display: block; }
#view-client-detail .weekly-bars { width: 100%; height: 160px; max-width: 100%; display: block; }

/* Side-by-side charts on wide screens keep each panel compact so a chart
   with few data points does not stretch across the whole page. */

@media (max-width: 960px) {
  #view-client-detail .weight-chart { height: 200px; }
  #view-client-detail .weekly-bars  { height: 150px; }
}
@media (max-width: 480px) {
  #view-client-detail .weight-chart { height: 180px; }
  #view-client-detail .weekly-bars  { height: 130px; }
  #view-client-detail .weight-stat .val { font-size: 1.3rem; }
}

/* Elimina clientul button is now inside the detail hero — stretch full width
   on mobile, tuck to the right on desktop next to the other actions. */

/* Client-card top row is now the "open detail" affordance */

/* Client detail view */

/* Client profile card — coach view. Renders the info the client filled in
   at role-selection (age/height/weight/level/goal + medical notes). */

/* Mobile responsive */
@media (max-width: 640px) {
  .weight-stat .val { font-size: 1.35rem; }
  .weight-chart { height: 200px; }
  .chart-empty  { height: 200px; }
  .weight-panel { padding:15px; border-radius:18px; }
}

@media (prefers-reduced-motion: reduce) {
  .weight-page,.weight-stat,.chart-line,.chart-area,.chart-dot { animation:none !important; opacity:1; stroke-dashoffset:0; }
}

/* Weight dashboard: strict phone layout — every block stays inside viewport. */
@media (max-width:640px) {
  #view-weight,
  #view-weight .weight-page,
  #view-weight .weight-page > *,
  #view-weight .weight-panel { width:100%; max-width:100%; min-width:0; box-sizing:border-box; }
  #view-weight { overflow-x:hidden; }
  #view-weight .weight-page { padding-bottom:8px; }
  #view-weight .weight-input-card { padding:16px 14px; border-radius:17px; }
  #view-weight #weight-date { width:100%; }
  #view-weight .weight-stat { min-height:112px; padding:15px 16px; }
  #view-weight .weight-stat .val { font-size:1.5rem; padding-right:44px; }
  #view-weight .weight-panel { overflow:hidden; padding:14px 12px; }
  #view-weight .weight-panel .card-head { width:100%; flex-direction:row; align-items:center; justify-content:space-between; }
  #view-weight .weight-chart { width:100%; height:185px; max-width:100%; overflow:hidden; }
  #view-weight .weekly-bars { width:100%; max-width:100%; height:135px; overflow:hidden; }
  #view-weight .weekly-row { padding:10px 6px; }
}

/* ============================================
   MONTHLY WORKOUT CALENDAR
============================================ */
.coach-schedule-launcher { width:100%;display:grid;grid-template-columns:48px minmax(0,1fr) 28px;align-items:center;gap:14px;margin:14px 0 18px;padding:16px 18px;border:1px solid var(--border);border-radius:18px;background:var(--surface);color:var(--text);font:inherit;text-align:left;box-shadow:var(--shadow-sm);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }.coach-schedule-launcher:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--primary) 35%,var(--border));box-shadow:var(--shadow-md)}.coach-schedule-launcher .grow{min-width:0;display:flex;flex-direction:column;gap:2px}.coach-schedule-launcher small{color:var(--primary);font-size:.62rem;font-weight:800;letter-spacing:.12em}.coach-schedule-launcher strong{overflow:hidden;font-size:.95rem;white-space:nowrap;text-overflow:ellipsis}.coach-schedule-launcher em{color:var(--text-muted);font-size:.73rem;font-style:normal}

/* Cells become positioned containers with a visible half-hour dashed line. */

/* Session cards — base visual style (used in week grid AND day timeline) */
/* Week grid: absolute positioning so duration overflows past the starting hour cell */
/* Overlap resolver: multiple sessions in the same starting hour split
   the cell horizontally instead of stacking on top of each other. */.client-session-time{display:flex;align-items:center;gap:8px;margin:12px 0 0;padding:9px 11px;border-radius:10px;background:var(--primary-soft);color:var(--text);font-size:.76rem}.client-session-time svg{width:17px;height:17px;color:var(--primary)}
@media(max-width:640px){.coach-schedule-launcher{grid-template-columns:42px minmax(0,1fr) 22px;padding:13px}.coach-schedule-launcher strong{white-space:normal;line-height:1.25}}
.workout-calendar { margin:0 0 20px; animation:wc-in .28s ease-out both; }
@keyframes wc-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.wc-stats { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:9px; margin-bottom:12px; }
.wc-stats > div { min-width:0; padding:13px 14px; border:1px solid var(--border); border-radius:15px; background:var(--surface); }
.wc-stats span { display:block; overflow:hidden; color:var(--text-muted); font-size:.68rem; font-weight:700; white-space:nowrap; text-overflow:ellipsis; }
.wc-stats strong { display:block; margin-top:4px; color:var(--text); font-size:1.35rem; letter-spacing:-.04em; }
.wc-card { padding:18px; border:1px solid var(--border); border-radius:20px; background:var(--surface); box-shadow:var(--shadow-sm); }
.wc-card > header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; }
.wc-card h2 { margin:0; font-size:1.35rem; text-transform:capitalize; }
.wc-eyebrow,.wc-modal-date { color:var(--text-muted); font-size:.65rem; font-weight:800; letter-spacing:.11em; }
.wc-controls { display:flex; align-items:center; gap:5px; padding:4px; border:1px solid var(--border); border-radius:12px; background:var(--surface-alt); }
.wc-controls button { min-width:34px; height:34px; padding:0 10px; border:0; border-radius:9px; background:transparent; color:var(--text); font:inherit; font-size:.78rem; font-weight:700; cursor:pointer; }
.wc-controls button:first-child,.wc-controls button:last-child { font-size:1.35rem; }
.wc-controls button:hover { background:var(--surface); }
.wc-legend { display:flex; flex-wrap:wrap; gap:10px 15px; margin:8px 0 14px; }
.wc-legend span { display:inline-flex; align-items:center; gap:6px; color:var(--text-muted); font-size:.7rem; font-weight:600; }
.wc-legend span::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--border); }
.wc-legend .completed::before { background:#24A979; }.wc-legend .partial::before { background:#C49703; }.wc-legend .missed::before { background:#A2494A; }.wc-legend .planned::before { background:#8EC1E5; }
.wc-weekdays,.wc-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; }
.wc-weekdays { margin-bottom:6px; }
.wc-weekdays span { padding:4px; color:var(--text-soft); font-size:.67rem; font-weight:800; text-align:center; text-transform:uppercase; }
.wc-day { position:relative; min-width:0; aspect-ratio:1.18; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; padding:8px; border:1px solid transparent; border-radius:12px; background:var(--surface-alt); color:var(--text); font:inherit; cursor:pointer; transition:transform .15s ease,border-color .15s ease,background .15s ease; }
.wc-day:hover { transform:translateY(-2px); border-color:var(--border); }.wc-day:active { transform:scale(.97); }
.wc-day.wc-blank { visibility:hidden; pointer-events:none; }
.wc-num { font-size:.76rem; font-weight:800; }.wc-mark { align-self:center; font-size:1.05rem; font-weight:900; line-height:1; }
.wc-day-label { max-width:100%; overflow:hidden; font-size:.58rem; font-weight:700; white-space:nowrap; text-overflow:ellipsis; }
.wc-day.completed { background:rgba(36,169,121,.13); color:#00945E; }.wc-day.missed { background:rgba(162,73,74,.12); color:#A2494A; }
.wc-day.partial,.wc-day.in_progress { background:rgba(196,151,3,.14); color:#A67D04; }.wc-day.planned { background:color-mix(in srgb,#8EC1E5 10%,var(--surface)); }
.wc-day.cancelled,.wc-day.rest { color:var(--text-soft); }.wc-day.today { border-color:var(--primary); box-shadow:inset 0 0 0 1px var(--primary); }
.wc-multi { position:absolute; top:6px; right:6px; min-width:16px; height:16px; display:grid; place-items:center; border-radius:50%; background:var(--text); color:var(--surface); font-size:.55rem; font-weight:800; }
.wc-modal-head { display:flex; justify-content:space-between; gap:16px; margin-bottom:18px; padding-left:18px; padding-right:10px; }.wc-modal-head h2 { margin:3px 0 0; }
.wc-modal-head .editor-topbar-close {
  background:transparent;
  border:0;
  color:var(--text);
  font-size:1.3rem;
  font-weight:900;
  box-shadow:none;
  outline:none;
  -webkit-tap-highlight-color:transparent;
}
.wc-modal-head .editor-topbar-close:hover,
.wc-modal-head .editor-topbar-close:active,
.wc-modal-head .editor-topbar-close:focus,
.wc-modal-head .editor-topbar-close:focus-visible {
  background:transparent !important;
  color:var(--text);
  border:0;
  outline:none;
  box-shadow:none;
}
.wc-day-modal {
  width:min(760px,100%);
  overflow-x:hidden;
  overflow-y:auto;
}
.wc-day-modal,
.wc-day-modal * { box-sizing:border-box; }
.wc-day-modal > * { max-width:100%; }
.wc-workout-detail {
  width:100%;
  min-width:0;
  padding:16px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface-alt);
  overflow:hidden;
}
.wc-workout-detail + .wc-workout-detail { margin-top:12px; }
.wc-workout-title { display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:10px; }.wc-workout-title > span:first-child { width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--primary-soft);font-size:1.2rem; }
.wc-workout-title h3,.wc-workout-title p { margin:0; }.wc-workout-title p { margin-top:2px;color:var(--text-muted);font-size:.75rem; }
.wc-status { padding:5px 8px;border-radius:999px;background:var(--surface);font-size:.65rem;font-weight:800; }.wc-status.completed{color:#2d8f59}.wc-status.missed{color:#c44c4c}.wc-status.partial,.wc-status.in_progress{color:#a87513}
.wc-detail-stats,.wc-coach-log { width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:13px 0; }.wc-detail-stats span,.wc-coach-log span { min-width:0;padding:9px;border:1px solid color-mix(in srgb,var(--border) 70%,transparent);border-radius:10px;background:var(--surface);color:var(--text-muted);font-size:.7rem;text-align:center;overflow:hidden; }.wc-detail-stats b,.wc-coach-log b { display:block;color:var(--text);font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.wc-exercise-list { width:100%;display:flex;flex-direction:column;gap:6px; }.wc-exercise-list > div { width:100%;min-width:0;display:grid;grid-template-columns:26px minmax(0,1fr);align-items:center;gap:9px;padding:9px 10px;border:1px solid color-mix(in srgb,var(--border) 65%,transparent);border-radius:10px;background:var(--surface); }.wc-exercise-list > div > span { width:24px;height:24px;display:grid;place-items:center;border-radius:8px;background:var(--surface-alt);font-size:.65rem;font-weight:800; }.wc-exercise-list p { width:100%;margin:0;min-width:0; }.wc-exercise-list b,.wc-exercise-list small { display:block;max-width:100%; }.wc-exercise-list b { overflow:hidden;font-size:.78rem;white-space:nowrap;text-overflow:ellipsis; }.wc-exercise-list small { margin-top:2px;color:var(--text-muted);font-size:.67rem;white-space:normal;overflow-wrap:anywhere; }
.wc-action { margin-top:14px;min-height:50px; }.wc-feedback { margin-top:12px;padding:10px 12px;border-radius:10px;background:var(--surface);color:var(--text-muted);font-size:.76rem;line-height:1.5; }
.wc-assign-workout { width:100%;margin-top:14px;padding:15px;border:1px solid var(--border);border-radius:15px;background:var(--surface); }
.wc-assign-workout.is-empty-day { margin-top:0; }
.wc-assign-head { display:flex;align-items:flex-start;justify-content:space-between;gap:12px; }.wc-assign-head h3 { margin:2px 0 0;font-size:1rem; }.wc-assign-head > span { padding:4px 8px;border-radius:999px;background:var(--surface-alt);color:var(--text-muted);font-size:.65rem;font-weight:700; }
.wc-assign-workout > p { margin:9px 0 12px;color:var(--text-muted);font-size:.76rem;line-height:1.45; }.wc-assign-workout > small { display:block;margin-top:8px;color:var(--text-soft);font-size:.66rem; }
.wc-assign-row { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px; }.wc-assign-row select { width:100%;min-width:0; }.wc-assign-row .btn { min-height:44px; }

@media(max-width:640px){
  .wc-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }.wc-stats > div:last-child { grid-column:1/-1; }.wc-card { padding:13px 9px;border-radius:17px; }.wc-card > header { align-items:flex-start;flex-direction:column; }.wc-controls { width:100%;justify-content:space-between; }.wc-legend { gap:7px 10px; }.wc-weekdays,.wc-grid { gap:3px; }.wc-day { aspect-ratio:.82;padding:5px 4px;border-radius:9px; }.wc-mark { font-size:.9rem; }.wc-day-label { display:none; }.wc-workout-title { grid-template-columns:38px minmax(0,1fr);align-items:start; }.wc-workout-title .wc-status { grid-column:1/-1;justify-self:stretch;text-align:center; }.wc-detail-stats,.wc-coach-log { grid-template-columns:1fr; }.wc-day-modal { width:100%;padding:18px 14px calc(22px + env(safe-area-inset-bottom,0px));border-radius:20px 20px 0 0; }.wc-workout-detail { padding:12px;border-radius:14px; }.wc-stats strong { font-size:1.2rem; }.wc-modal-head { align-items:flex-start;padding-left:18px; }.wc-modal-head .editor-topbar-close { flex:0 0 auto; }.wc-feedback { width:100%;overflow-wrap:anywhere; }
}
@media(max-width:640px){.wc-assign-workout{padding:12px}.wc-assign-row{grid-template-columns:1fr}.wc-assign-row .btn{width:100%}}

/* Nutrition adherence calendar */.nc-meals{display:flex;flex-direction:column;gap:10px}.nc-meal-row{width:100%;padding:13px;border:1px solid var(--border);border-radius:14px;background:var(--surface-alt)}.nc-meal-head{display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;gap:9px}.nc-meal-head>span{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:var(--surface);font-size:.7rem;font-weight:800}.nc-meal-head h3{margin:0;font-size:.9rem}.nc-meal-head small{display:block;margin-top:3px;overflow:hidden;color:var(--text-muted);font-size:.68rem;white-space:nowrap;text-overflow:ellipsis}.nc-meal-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:11px}.nc-meal-actions button{min-width:0;padding:9px 5px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text-muted);font:inherit;font-size:.68rem;font-weight:700;cursor:pointer}.nc-meal-actions button.active{border-color:var(--primary);background:var(--primary-soft);color:var(--primary)}.nc-meal-actions button[data-meal-status="skipped"].active{border-color:#A2494A;background:rgba(162,73,74,.12);color:#A2494A}.nc-substitute{display:none;margin-top:10px}.nc-substitute.active{display:block}.nc-substitute label{display:block;margin-bottom:5px;color:var(--text-muted);font-size:.7rem;font-weight:700}.nc-substitute textarea{width:100%;min-height:70px}.nc-save-day{margin-top:14px}.nc-future-note{margin-bottom:12px;padding:10px;border-radius:10px;background:var(--surface-alt);color:var(--text-muted);font-size:.75rem}
@media(max-width:640px){.nc-meal-row{padding:11px}.nc-meal-actions{grid-template-columns:1fr}.nc-meal-actions button{min-height:40px}.nc-meal-head small{white-space:normal}.nc-day-modal{padding-left:14px;padding-right:14px}}.nc-substitute-macros{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.nc-substitute-macros{margin-top:8px}.nc-substitute-macros input{min-width:0;padding:9px 6px;font-size:16px}.macro-info-hero.maintenance{background:#e7edf5;color:#314c69}
.nutrition-macro-modal{width:min(480px,100%)}.macro-info-hero{display:flex;align-items:center;gap:13px;padding:15px;border-radius:14px}.macro-info-hero>i{width:46px;height:46px;display:grid;place-items:center;border-radius:13px;background:rgba(255,255,255,.65);font-size:1rem;font-style:normal;font-weight:900}.macro-info-hero strong,.macro-info-hero span{display:block}.macro-info-hero strong{font-size:1.65rem;line-height:1}.macro-info-hero span{margin-top:3px;font-size:.7rem}.macro-info-hero.kcal{background:#FFF4C7;color:#A67D04}.macro-info-hero.protein{background:#DBFFF2;color:#00945E}.macro-info-hero.carbs{background:#E3F7FF;color:#307ABF}.macro-info-hero.fats{background:#FFEEE0;color:#954F38}.macro-info-text{margin:15px 0;color:var(--text-muted);font-size:.83rem;line-height:1.6}.macro-info-sources{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:12px;background:var(--surface-alt)}.macro-info-sources>span{margin-bottom:2px;color:var(--text);font-size:.72rem;font-weight:800}.macro-info-sources>div{color:var(--text-muted);font-size:.75rem}.macro-info-note{display:block;margin-top:12px;color:var(--text-soft);font-size:.65rem;line-height:1.45}
@media(max-width:640px){.nutrition-macro-modal{width:100%}}.macro-info-hero{justify-content:center;text-align:center}.macro-info-hero>div{width:100%}
@media (max-width: 640px) {
  .nutrition-image-editor { flex-wrap: wrap; }
  .nutrition-image-add,
  .nutrition-image-remove { min-height: 38px; }
}

/* Keyboard-safe nutrition journal and unambiguous meal selections. */
.nc-meal-actions button[data-meal-status="eaten"].active{border-color:#24A979;background:rgba(36,169,121,.14);color:#00945E}
.nc-meal-actions button[data-meal-status="substituted"].active{border-color:#C49703;background:rgba(196,151,3,.14);color:#A67D04}
.nc-meal-actions button[data-meal-status="skipped"].active{border-color:#A2494A;background:rgba(162,73,74,.12);color:#A2494A}
.nc-day-modal{max-height:min(90dvh,760px);scroll-padding-bottom:160px}
.nc-day-modal textarea,.nc-day-modal input{font-size:16px}.nc-day-result{margin-bottom:12px;padding:12px;border:1px solid var(--border);border-radius:14px;background:var(--surface-alt)}.nc-day-result.good{border-color:rgba(36,169,121,.48);background:rgba(36,169,121,.1)}.nc-day-result.missed{border-color:rgba(162,73,74,.46);background:rgba(162,73,74,.09)}.nc-day-result-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.nc-day-result-head span{font-size:.78rem;font-weight:850}.nc-day-result.good .nc-day-result-head span{color:#00945E}.nc-day-result.missed .nc-day-result-head span{color:#A2494A}.nc-day-result-head small{color:var(--text-muted);font-size:.6rem}.nc-day-macros{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.nc-day-macros>div{min-width:0;padding:8px 5px;border-radius:10px;background:var(--surface);text-align:center}.nc-day-macros span,.nc-day-macros small{display:block;color:var(--text-muted);font-size:.55rem}.nc-day-macros strong{display:block;margin:2px 0;color:var(--text);font-size:.76rem}
@media(max-width:640px){.nc-substitute-macros{grid-template-columns:repeat(2,minmax(0,1fr))}.nc-day-result-head{align-items:flex-start;flex-direction:column;gap:3px}.nc-day-macros{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Client nutrition — modern iOS-style surface */
@keyframes clientMealEnter{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@media(max-width:640px){
  .nc-day-modal{height:auto;max-height:calc(100dvh - 12px);padding-left:14px;padding-right:14px;overscroll-behavior:contain}
  .nc-meal-actions button{min-height:42px}
  .nc-save-day{position:sticky;bottom:0;z-index:2;box-shadow:0 -8px 18px var(--surface)}
}

/* On-screen keyboard: let the full overlay scroll. This avoids the iOS
   nested-scroll freeze caused by a fixed body + internally scrolling modal. */
.modal-backdrop.active:has(.nc-day-modal){
  align-items:flex-start;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  touch-action:pan-y;
  -webkit-overflow-scrolling:touch;
}
.modal-backdrop.active:has(.nc-day-modal)>.nc-day-modal{
  flex:0 0 auto;
  max-height:none;
  overflow:visible;
  touch-action:pan-y;
}
@media(max-width:640px){
  .modal-backdrop.active:has(.nc-day-modal){padding:8px 0 0;}
  .modal-backdrop.active:has(.nc-day-modal)>.nc-day-modal{
    min-height:calc(100dvh - 8px);
    margin:0;
    padding:18px 14px calc(26px + env(safe-area-inset-bottom,0px));
  }
  .nc-meals{gap:8px}
  .nc-meal-row{padding:10px;border-radius:12px}
  .nc-meal-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
  .nc-meal-actions button{min-height:42px;padding:7px 3px;font-size:.61rem;line-height:1.2}
  .nc-substitute textarea{min-height:82px;resize:vertical}
  .nc-save-day{bottom:calc(8px + env(safe-area-inset-bottom,0px));margin-top:12px}
}
@media(max-width:350px){
  .nc-meal-actions{grid-template-columns:1fr}
  .nc-meal-actions button{font-size:.7rem}
}

/* ============================================
   WEEKLY AVERAGES — bar chart + list
============================================ */
.weekly-bars {
  width: 100%;
  height: 160px;
  display: block;
  margin-bottom: 12px;
}
.wa-bar {
  fill: var(--surface-alt);
  stroke: var(--border);
  stroke-width: 1;
  transition: fill 0.15s;
}
.wa-bar-group:hover .wa-bar { fill: color-mix(in srgb, var(--primary) 25%, var(--surface-alt)); }
.wa-bar.current {
  fill: var(--primary);
  stroke: var(--primary);
}
.wa-bar-val {
  fill: var(--text);
  font-size: 10px;
  font-weight: 700;
  text-anchor: middle;
  letter-spacing: -0.02em;
}
.wa-bar-lbl {
  fill: var(--text-soft);
  font-size: 10px;
  font-weight: 500;
  text-anchor: middle;
}

.weekly-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 10px;
}
.weekly-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  transition: background 0.15s;
}
.weekly-row:hover { background: var(--surface-alt); }
.wk-range {
  font-size: 0.88rem;
  color: var(--text);
  font-weight: 600;
}
.wk-avg {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.wk-count {
  font-size: 0.75rem;
  color: var(--text-soft);
}
.wk-delta {
  font-size: 0.82rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--text-muted);
}
.wk-delta.down { background: rgba(88, 201, 138, 0.14); color: #58c98a; }
.wk-delta.up   { background: rgba(245, 160, 74, 0.14); color: #f5a04a; }
.wk-delta.flat { background: var(--surface-alt); color: var(--text-muted); }

@media (max-width: 640px) {
  .weekly-bars { height: 140px; }
  .weekly-row {
    grid-template-columns: 1fr auto;
    gap: 6px 10px;
  }
  .wk-count { display: none; }
  .wk-delta { grid-column: 2; }
  .wk-avg { grid-row: 2; grid-column: 1 / -1; font-size: 1.05rem; }
}

/* ============================================
   SETTINGS — nav pills + layout
============================================ */
.settings-nav {
  display: flex;
  gap: 6px;
  padding: 6px;
  margin-bottom: 20px;
  border-radius: 999px;
  background: var(--surface-alt);
  overflow-x: auto;
  scrollbar-width: none;
  position: sticky;
  top: 10px;
  z-index: 5;
  border: 1px solid var(--border);
}
.settings-nav::-webkit-scrollbar { display: none; }
.settings-nav-item {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.15s var(--ease-out, ease-out);
  border: 0;
  font-family: inherit;
  cursor: pointer;
}
.settings-nav-item:hover { color: var(--text); background: var(--surface); }
.settings-nav-item.active {
  background: var(--primary);
  color: var(--primary-fg);
}

.settings-body { display: flex; flex-direction: column; gap: 16px; }
.settings-body > .card { scroll-margin-top: 80px; }
.settings-body [hidden] { display: none !important; }
.settings-tab-panel { animation: settings-tab-in 0.2s ease-out; }
@keyframes settings-tab-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Client workout plans — compact list with one expandable plan at a time. */

/* Muscle-group picker used in the exercise editor. Parent groups get a
   labeled card with their sub-chips underneath; standalone groups
   (cardio / mobility / other) live on their own row at the bottom. */
.ex-muscle-picker { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 14px; }
.ex-muscle-picker .mp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.mp-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.mp-group-head { display: flex; align-items: center; gap: 8px; }
.mp-group-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--primary) 14%, var(--surface-alt));
  color: var(--primary);
}
.mp-group-ico svg { width: 20px; height: 20px; }
.mp-group-name {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text);
}
.mp-subs { display: flex; flex-wrap: wrap; gap: 6px; }
.mp-sub, .mp-simple {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text-soft);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s ease;
}
.mp-sub:hover, .mp-simple:hover { color: var(--text); border-color: var(--text-soft); }
.mp-sub.active, .mp-simple.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #0d1622;
  font-weight: 800;
}
.mp-simple-row { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; border-top: 1px dashed var(--border); }
.mp-simple { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; }
.mp-simple-ico { display: inline-flex; }
.mp-simple-ico svg { width: 16px; height: 16px; }

/* Two-step muscle picker (new): main groups grid + expanding sub row */
.ex-muscle-picker.two-step .mp-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
}
.mp-group-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 10px 10px;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .18s ease;
}
.mp-group-tile:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.mp-group-tile.expanded {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.mp-group-tile.active {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-fg);
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--primary) 55%, transparent);
}
.mp-group-tile-ico {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--primary) 14%, var(--surface-alt));
  color: var(--primary);
  transition: background .15s ease, color .15s ease;
}
.mp-group-tile.active .mp-group-tile-ico {
  background: color-mix(in srgb, var(--primary-fg) 20%, transparent);
  color: var(--primary-fg);
}
.mp-group-tile-ico svg { width: 24px; height: 24px; }
.mp-group-tile-name {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.mp-group-tile-mark {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-fg);
  box-shadow: 0 0 0 3px var(--surface);
}
.mp-group-tile-mark svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.mp-subs-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  border: 1px dashed color-mix(in srgb, var(--primary) 35%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--primary) 5%, var(--surface));
  animation: mpSubsIn .22s cubic-bezier(.2,.75,.25,1) both;
}
@keyframes mpSubsIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.mp-subs-label {
  color: var(--text-muted);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-right: 4px;
}
.mp-sub.mp-sub-all { border-style: dashed; font-weight: 800; }
.mp-sub.mp-sub-all.active { border-style: solid; }

@media (max-width: 640px) {
  .ex-muscle-picker.two-step .mp-group-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mp-group-tile { padding: 10px 6px 8px; }
  .mp-group-tile-ico { width: 38px; height: 38px; }
  .mp-group-tile-ico svg { width: 21px; height: 21px; }
  .mp-group-tile-name { font-size: .62rem; }
}

/* ============================================
   Client settings — Apple-style master/detail
   ============================================ */
.cs-master { max-width: 640px; margin: 0 auto; }
.cs-master-head { margin: 4px 4px 16px; }
.cs-master-kicker { display: block; color: var(--primary); font-size: .6rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.cs-master-head h1 { margin: 4px 0 0; font-size: 1.85rem; letter-spacing: -.03em; color: var(--text); }

.cs-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 18px;
}
.cs-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 0;
  border-top: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease;
  width: 100%;
}
.cs-row:first-child { border-top: 0; }
.cs-row:hover { background: var(--surface-alt); }
.cs-row-icon {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-alt));
  color: var(--primary);
}
.cs-row-icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cs-row-body { flex: 1; min-width: 0; }
.cs-row-body strong { display: block; color: var(--text); font-size: .95rem; letter-spacing: -.01em; }
.cs-row-body small { display: block; margin-top: 2px; color: var(--text-muted); font-size: .74rem; }
.cs-row-arrow {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  color: var(--text-muted);
  transform: rotate(-90deg);
}
.cs-row-arrow svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.cs-logout {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--danger);
  font: inherit;
  font-weight: 700;
  font-size: .88rem;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.cs-logout:hover { background: color-mix(in srgb, var(--danger) 10%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }
.cs-logout svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }

/* Detail header (back button + title) */
.cs-back {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface-alt);
  color: var(--text);
  cursor: pointer;
  transition: background .15s ease;
}
.cs-back:hover { background: var(--surface); }
.cs-back svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.cs-detail-card {
  max-width: 640px;
  margin: 0 auto;
  padding: 22px 24px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.cs-detail-card .form-group + .form-group { margin-top: 14px; }
.cs-detail-card .cs-row { border-radius: 12px; border: 1px solid var(--border); margin-top: 14px; }
.cs-msg-slot:empty { display: none; }
.cs-hint { display: block; margin-top: 6px; color: var(--text-muted); font-size: .72rem; }
.cs-section-intro { margin: 0 0 18px; color: var(--text-muted); font-size: .84rem; line-height: 1.55; }
.cs-data-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.cs-data-grid .form-group + .form-group { margin-top: 0; }
.cs-data-wide { grid-column: 1 / -1; }

.cs-avatar-block {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.cs-avatar-preview .avatar { width: 72px; height: 72px; font-size: 1.6rem; font-weight: 800; font-family: var(--font-primary); }
.cs-avatar-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.cs-avatar-actions .btn { padding: 8px 14px; font-size: .82rem; }

@media (max-width: 560px) {
  .cs-detail-card { padding: 18px 16px; }
  .cs-data-grid { grid-template-columns: 1fr; }
  .cs-data-wide { grid-column: auto; }
}

.cs-theme-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.cs-theme-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
  text-align: left;
}
.cs-theme-card:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.cs-theme-card.active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.cs-theme-preview {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
}
.cs-theme-preview.light { background: #FAFCFA; color: #0B1A15; }
.cs-theme-preview.dark { background: #0B1A15; color: #FAFCFA; }
.cs-theme-preview svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cs-theme-card strong { font-size: .95rem; letter-spacing: -.01em; }
.cs-theme-card small { color: var(--text-muted); font-size: .72rem; }

/* Coach info cell → action button variant on Profile page */

@media (max-width: 640px) {
  .cs-master-head h1 { font-size: 1.55rem; }
  .cs-detail-card { padding: 18px 16px; border-radius: 18px; }
  .cs-theme-cards { grid-template-columns: 1fr; }
  .cs-avatar-preview .avatar { width: 62px; height: 62px; }
}

/* ============================================
   Client workout sessions — simple list
   ============================================ */
.workout-subview { animation: workout-subview-in .22s ease-out both; }
@keyframes workout-subview-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.modal-backdrop.active:has(.client-session-plan-modal) { align-items:center!important; justify-content:center!important; padding:16px!important; }
.modal-backdrop.active>.client-session-plan-modal { width:min(640px,calc(100vw - 32px))!important; max-height:min(82dvh,760px)!important; margin:auto!important; padding:18px!important; border-radius:24px!important; overflow-y:auto!important; overscroll-behavior:contain; box-shadow:0 28px 80px rgba(0,0,0,.32)!important; animation:coach-dialog-in .2s cubic-bezier(.2,.8,.2,1) both!important; }

.wss-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.wss-row:hover { transform: translateY(-1px); border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.wss-row.today { border-color: color-mix(in srgb, var(--primary) 50%, var(--border)); background: color-mix(in srgb, var(--primary-soft) 45%, var(--surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent); }

@media (max-width: 640px) {
  .modal-backdrop.active>.client-session-plan-modal { width:calc(100vw - 24px)!important; max-height:80dvh!important; padding:15px 12px!important; border-radius:22px!important; }
  .wss-row { grid-template-columns: auto 1fr; gap: 10px; padding: 12px 14px; }
}

/* SVG plan icon wrapper — used inside cards and list rows. Fixed 24px so
   it lands cleanly inside .coach-plan-emoji / .client-plan-icon boxes. */
.plan-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--primary); }
.plan-icon.svg svg { width: 24px; height: 24px; }
.plan-icon.emoji { font-size: 1.2rem; color: inherit; }

/* Meal plan expanded content extras */
.client-plan-icon .plan-icon.svg svg { width: 22px; height: 22px; }

/* Illustrated 3D muscle figures (grupe.png cutouts on transparent bg via
   rembg). Containers keep their accent tint background; the figure sits
   inside as a normal PNG. */
.plan-icon.img { width: 100%; height: 100%; padding: 4%; box-sizing: border-box; }

@media (max-width: 640px) {
  .ex-muscle-picker .mp-grid { grid-template-columns: 1fr; }
}
.client-plans-list { display: flex; flex-direction: column; gap: 10px; }
.client-plan-accordion {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius, 16px);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.client-plan-accordion:hover { transform: translateY(-1px); box-shadow: var(--shadow-md, 0 10px 28px rgba(0,0,0,.09)); }
.client-plan-summary {
  width: 100%;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto 28px;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.client-plan-summary:hover { background: var(--surface-alt); }
.client-plan-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 1.25rem;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 16%, transparent);
}
.client-plan-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.client-plan-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-plan-main span { color: var(--text-muted); font-size: 0.8rem; }
.client-plan-count {
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
}
.client-plan-details {
  padding: 0 16px 16px 70px;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-alt) 45%, transparent), transparent 90px);
}
.client-plan-notes { margin: 14px 0; color: var(--text-muted); line-height: 1.55; }

@media (max-width: 640px) {
  .client-plan-summary { grid-template-columns: 38px minmax(0, 1fr) 24px; gap: 10px; padding: 12px; }
  .client-plan-icon { width: 38px; height: 38px; }
  .client-plan-count { grid-column: 2; justify-self: start; }
  .client-plan-details { padding: 0 12px 14px; }
}

/* Card head — allow trailing badge / status */
.settings-body .card-head { justify-content: space-between; align-items: center; }
.settings-body .card-head .pill,
.settings-body .card-head .btn { flex-shrink: 0; }

/* Generic on/off pill */
.pill {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.pill.on  { background: var(--primary-soft); color: var(--primary); }
.pill.off { background: var(--surface-alt); color: var(--text-soft); }

/* Chip picker for specialties / languages */
.chip-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip-pick {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s var(--ease-out, ease-out);
}
.chip-pick:hover { color: var(--text); border-color: var(--text-soft); }
.chip-pick.on {
  background: var(--primary);
  color: var(--primary-fg);
  border-color: var(--primary);
}
.chip-picker.readonly .chip-pick { cursor: default; }

/* Dynamic list rows (certifications, packages, etc.) */
.dynamic-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.dynamic-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.dynamic-row input {
  flex: 1;
  padding: 10px 12px;
  border-radius: 10px;
}
.dynamic-row .btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  min-height: 36px;
  color: var(--text-soft);
}
.dynamic-row .btn-icon:hover { color: var(--danger); }

.package-row {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr 1.8fr 36px;
  gap: 8px;
}
.package-row input { width: 100%; }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

@media (max-width: 640px) {
  .pricing-grid { grid-template-columns: 1fr 1fr; }
  .pricing-grid .form-group:nth-child(3) { grid-column: 1 / -1; }
  .package-row {
    grid-template-columns: 1fr 90px 36px;
    grid-template-areas: "name price del" "desc desc desc";
  }
  .pkg-name  { grid-area: name; }
  .pkg-price { grid-area: price; }
  .pkg-desc  { grid-area: desc; }
  .package-row .btn-icon { grid-area: del; }
}

/* ============================================
   CLIENT — coach preview modal
============================================ */

/* Price table */

/* Contact links */

/* Clean list (certifications) */

/* Workout editor — mobile tap targets (min 44px per Apple HIG). Bumps the
   most-tapped controls: icon picker, muscle chips, kind toggle, delete,
   number inputs — so fingers hit reliably on phones. */
@media (max-width: 640px) {

  .mp-sub, .mp-simple {
    padding: 12px 16px;
    min-height: 44px;
    font-size: 0.9rem;
  }
  .mp-simple { padding: 12px 18px; }
  .mp-group { padding: 14px; }
  .mp-group-ico { width: 36px; height: 36px; border-radius: 11px; }

  .editor-topbar-close { min-width: 44px; min-height: 44px; }
}

/* ============================================
   Client nutrition — refined toolbar + PIP
   ============================================ */

@keyframes nutritionToolbarIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Supplements — collapsible & prominent */
@keyframes suppItemIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Meals — bigger title + inline macros row (no bottom totals) */
/* Hide the old meal totals if any card still renders them */

/* Food chips — collapsed view with click to reveal macros */
.food-list.compact { display: flex; flex-direction: column; gap: 6px; }

/* Food PIP modal */
.food-macro-pip {
  width: min(420px, 100%);
  padding: 18px;
  border-radius: 22px;
  animation: foodPipIn .28s cubic-bezier(.2,.85,.3,1) both;
}
@keyframes foodPipIn { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
.food-pip-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.food-pip-title { min-width: 0; }
.food-pip-kicker { display: block; color: var(--primary); font-size: .58rem; font-weight: 800; letter-spacing: .16em; }
.food-pip-title h2 { margin: 3px 0 0; font-size: 1.2rem; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; }
.food-pip-title small { display: block; margin-top: 2px; color: var(--text-muted); font-size: .72rem; }
.food-pip-portion {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 13px;
  border-radius: 13px;
  background: color-mix(in srgb, #FFE991 30%, var(--surface));
  color: #A67D04;
  margin-bottom: 12px;
}
.food-pip-portion span { font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.food-pip-portion strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.food-pip-macros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.food-pip-macro {
  min-width: 0;
  padding: 12px 6px;
  border-radius: 14px;
  text-align: center;
  animation: pipMacroIn .35s cubic-bezier(.2,.75,.25,1) both;
}
.food-pip-macro:nth-child(1) { animation-delay: 40ms; }
.food-pip-macro:nth-child(2) { animation-delay: 90ms; }
.food-pip-macro:nth-child(3) { animation-delay: 140ms; }
.food-pip-macro:nth-child(4) { animation-delay: 190ms; }
@keyframes pipMacroIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.food-pip-macro span { display: block; font-size: .58rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .78; }
.food-pip-macro strong { display: block; margin: 4px 0 1px; font-size: 1.15rem; font-weight: 900; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.food-pip-macro small { font-size: .58rem; opacity: .78; }
.food-pip-macro.kcal { background: #FFF4C7; color: #A67D04; }
.food-pip-macro.protein { background: #DBFFF2; color: #00945E; }
.food-pip-macro.carbs { background: #E3F7FF; color: #307ABF; }
.food-pip-macro.fats { background: #FFEEE0; color: #954F38; }
.food-pip-per100 {
  padding: 11px 13px;
  border-radius: 13px;
  background: var(--surface-alt);
}
.food-pip-per100 > span { display: block; margin-bottom: 6px; color: var(--text-muted); font-size: .6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.food-pip-per100 > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; color: var(--text-muted); font-size: .68rem; text-align: center; }
.food-pip-per100 > div b { display: block; color: var(--text); font-size: .84rem; font-variant-numeric: tabular-nums; }

/* Meal plan info modal */
.meal-plan-info-modal { width: min(520px, 100%); padding: 20px; border-radius: 22px; animation: foodPipIn .28s cubic-bezier(.2,.85,.3,1) both; }
.meal-plan-info-notes {
  padding: 12px 14px;
  margin-bottom: 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--primary-soft) 45%, var(--surface-alt));
  border-left: 3px solid var(--primary);
}
.meal-plan-info-notes strong { display: block; margin-bottom: 4px; color: var(--text); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }
.meal-plan-info-notes p { margin: 0; color: var(--text-muted); font-size: .82rem; line-height: 1.55; }
.meal-plan-info-summary { margin-bottom: 14px; }
.meal-plan-info-summary .macro-summary { margin: 0; }
.meal-plan-info-extra { display: flex; flex-direction: column; gap: 8px; }
.meal-plan-info-note {
  padding: 12px 14px;
  border-radius: 13px;
  background: var(--surface-alt);
  border-left: 3px solid var(--primary);
}
.meal-plan-info-note.refeed { border-left-color: #22B37D; }
.meal-plan-info-note.diet-break { border-left-color: #E1B201; }
.meal-plan-info-note span { display: block; margin-bottom: 3px; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.meal-plan-info-note p { margin: 0; color: var(--text-muted); font-size: .8rem; line-height: 1.5; }

@media (max-width: 640px) {
  .food-pip-macros { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .food-pip-per100 > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .food-macro-pip { border-radius: 20px; padding: 16px; }
  .meal-plan-info-modal { padding: 16px; border-radius: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .food-macro-pip,
  .food-pip-macro,
  .meal-plan-info-modal { animation: none !important; }
}

/* Meal description — prominent */

/* Meal status — icon-only pill buttons */

/* Fix food-pip Porție for dark mode */
.food-pip-portion {
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-alt));
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border));
}
.food-pip-portion span { color: var(--text-muted); }
.food-pip-portion strong { color: var(--text); }

/* Nutrition plans list — sophisticated cards */
.nutrition-plan-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 22px 22px 22px 24px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background:
    radial-gradient(120% 130% at 0% 0%, color-mix(in srgb, var(--primary-soft) 55%, transparent) 0%, transparent 55%),
    linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface-alt) 45%, var(--surface)) 100%);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(8, 36, 28, .05), 0 12px 30px -12px rgba(8, 36, 28, .12);
  animation: planCardIn .38s cubic-bezier(.2,.75,.25,1) both;
  animation-delay: var(--card-delay, 0ms);
  transition: transform .22s cubic-bezier(.2,.75,.25,1), border-color .22s ease, box-shadow .22s ease;
}
[data-theme="dark"] .nutrition-plan-card {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 14px 34px -14px rgba(0, 0, 0, .55);
}
.nutrition-plan-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  box-shadow: 0 2px 4px rgba(8, 36, 28, .06), 0 22px 44px -18px color-mix(in srgb, var(--primary) 25%, rgba(8, 36, 28, .18));
}
.nutrition-plan-card:active { transform: scale(.99); }
@keyframes planCardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Detail toolbar variant with back button */

@media (max-width: 640px) {
  .nutrition-plan-card { padding: 18px 18px 18px 20px; border-radius: 20px; gap: 12px; }
}

/* ============================================================
   NUTRITION TAB — modern client redesign (list + detail hero)
   ============================================================ */

/* Hero header (list view) */
.nutri-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin: 4px 2px 22px;
  padding: 4px 0;
}
.nutri-hero-copy { min-width: 0; flex: 1; }
.nutri-hero-kicker {
  display: inline-block;
  color: var(--primary);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  margin-bottom: 12px;
}
.nutri-hero-title {
  margin: 0;
  font-family: var(--font-primary);
  font-size: 2.15rem;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.05;
  color: var(--text);
}
.nutri-hero-sub {
  margin: 10px 0 0;
  font-size: .92rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.nutri-hero-badge {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 78%, var(--primary-hover)) 100%);
  color: #fff;
  box-shadow: 0 10px 30px -14px color-mix(in srgb, var(--primary) 60%, transparent);
}
.nutri-hero-badge .num { font-family: var(--font-primary); font-size: 2rem; font-weight: 800; line-height: 1; }
.nutri-hero-badge .lbl { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; margin-top: 4px; opacity: .9; }

/* Plan card grid (list view) */
.nutri-plan-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.nutri-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 24px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface-alt) 25%, var(--surface)) 100%);
  box-shadow: 0 1px 2px rgba(8, 36, 28, .04), 0 20px 40px -28px rgba(8, 36, 28, .18);
  text-align: left;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.2,.75,.25,1), box-shadow .25s ease, border-color .2s ease;
  animation: nutriCardEnter .45s cubic-bezier(.2,.75,.25,1) both;
  animation-delay: var(--card-delay, 0ms);
}
[data-theme="dark"] .nutri-card {
  box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 24px 48px -28px rgba(0,0,0,.55);
  background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 92%, #000) 100%);
}
.nutri-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  box-shadow: 0 2px 4px rgba(8, 36, 28, .06), 0 28px 60px -28px color-mix(in srgb, var(--primary) 40%, rgba(8, 36, 28, .3));
}
.nutri-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

@keyframes nutriCardEnter {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Card head: coach chip + meal count */
.nutri-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.nutri-card-coach {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.nutri-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 70%, #0f767c) 100%);
  color: #fff;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
  box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--primary) 60%, transparent);
}
.nutri-avatar.sm { width: 28px; height: 28px; border-radius: 9px; font-size: .78rem; }
.nutri-coach-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.nutri-coach-meta small { color: var(--text-muted); font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.nutri-coach-meta strong { color: var(--text); font-size: .88rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.nutri-meal-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: color-mix(in srgb, var(--primary) 85%, var(--text));
  font-size: .72rem;
  font-weight: 600;
}
.nutri-meal-badge b { font-family: var(--font-primary); font-size: .95rem; font-weight: 800; }

/* Title */
.nutri-card-title {
  margin: 0;
  font-family: var(--font-primary);
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Macros row: big kcal + 3 pills */
.nutri-macros {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-alt) 60%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.nutri-kcal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 15%, transparent) 0%, color-mix(in srgb, var(--primary) 4%, transparent) 100%);
  border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
  min-width: 92px;
}
.nutri-kcal .val {
  font-family: var(--font-primary);
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
  letter-spacing: -.02em;
}
.nutri-kcal .lbl {
  margin-top: 4px;
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
}
.nutri-pills {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.nutri-pill {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  min-width: 0;
}
.nutri-pill b {
  font-family: var(--font-primary);
  font-size: .98rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}
.nutri-pill b i { font-style: normal; font-size: .72em; margin-left: 1px; color: var(--text-muted); font-weight: 600; }
.nutri-pill small {
  font-size: .58rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}
.nutri-pill.p { border-top: 3px solid #22B37D; }
.nutri-pill.c { border-top: 3px solid #E9A825; }
.nutri-pill.f { border-top: 3px solid #E36A6A; }

/* Notes preview */
.nutri-card-notes {
  margin: 0;
  padding: 10px 14px;
  border-left: 3px solid color-mix(in srgb, var(--primary) 45%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-alt) 40%, transparent);
  font-size: .82rem;
  line-height: 1.5;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Footer: supp chip + CTA */
.nutri-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 2px;
}
.nutri-supp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, #E9A825 15%, transparent);
  color: color-mix(in srgb, #A67D04 85%, var(--text));
  font-size: .72rem;
  font-weight: 600;
}
.nutri-supp-chip svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.nutri-open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--primary);
  font-weight: 700;
  font-size: .84rem;
  letter-spacing: .01em;
  transition: gap .2s ease;
}
.nutri-open i {
  font-style: normal;
  font-size: 1.1em;
  transition: transform .25s cubic-bezier(.2,.75,.25,1);
}
.nutri-card:hover .nutri-open i { transform: translateX(4px); }

/* ---------- Detail view hero ---------- */

/* Macros strip in detail */

/* Hide the older toolbar styles when new hero is present (no conflict — new hero uses different classes) */

/* Responsive */
@media (max-width: 720px) {
  .nutri-hero { flex-direction: row; align-items: center; gap: 16px; margin-bottom: 18px; }
  .nutri-hero-title { font-size: 1.7rem; }
  .nutri-hero-sub { font-size: .82rem; }
  .nutri-hero-badge { width: 68px; height: 68px; border-radius: 20px; }
  .nutri-hero-badge .num { font-size: 1.55rem; }

  .nutri-card { padding: 18px 18px; border-radius: 22px; gap: 14px; }
  .nutri-card-title { font-size: 1.2rem; }
  .nutri-macros { grid-template-columns: 1fr; gap: 12px; padding: 12px; }
  .nutri-kcal { flex-direction: row; align-items: baseline; justify-content: center; gap: 10px; padding: 10px 14px; min-width: 0; }
  .nutri-kcal .val { font-size: 1.5rem; }
  .nutri-kcal .lbl { margin-top: 0; }
  .nutri-pills { gap: 6px; }
  .nutri-pill { padding: 7px 8px; }
  .nutri-pill b { font-size: .9rem; }
  .nutri-coach-meta strong { max-width: 130px; font-size: .82rem; }
}

@media (prefers-reduced-motion: reduce) {
  .nutri-card, .nutri-card:hover { transition: none; animation: none; transform: none; }
}

/* ============================================================
   WORKOUTS TAB — modern client redesign (Fitness & progres)
   ============================================================ */

/* Tab switcher (Calendar / Planuri) */
.fit-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  margin: 0 2px 20px;
  border-radius: 14px;
  background: var(--surface-alt);
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.fit-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-weight: 600;
  font-size: .88rem;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.fit-tab svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fit-tab b { font-weight: 800; color: var(--primary); }
.fit-tab:hover { color: var(--text); }
.fit-tab.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(8, 36, 28, .05), 0 6px 14px -8px rgba(8, 36, 28, .12);
}
.fit-tab.active b { color: var(--primary); }

/* Progress card (calendar view) */

/* KPI grid: 3 tiles with icon + number + label */

/* Next-level progress */

/* Sessions / plans panel */
.fit-panel {
  margin-bottom: 18px;
  padding: 22px 24px;
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(8, 36, 28, .04);
}

/* Empty state */
.fit-empty {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 20px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-alt) 50%, transparent);
  border: 1px dashed color-mix(in srgb, var(--border) 80%, transparent);
}
.fit-empty-icon {
  flex: 0 0 auto;
  width: 48px; height: 48px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
}
.fit-empty-icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fit-empty strong { display: block; margin-bottom: 4px; font-size: 1rem; color: var(--text); font-weight: 700; }
.fit-empty p { margin: 0; color: var(--text-muted); font-size: .86rem; line-height: 1.5; }

@media (max-width: 720px) {
  .fit-tabs { width: 100%; }
  .fit-tab { flex: 1; justify-content: center; padding: 10px 8px; font-size: .82rem; }
  .fit-tab svg { width: 15px; height: 15px; }
  .fit-panel { padding: 16px 14px; border-radius: 18px; }
  .fit-empty { padding: 16px 14px; gap: 12px; }
  .fit-empty-icon { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .fit-tab { transition: none; }
}

/* Cleaner nutrition calendar */

/* ============================================
   Client Profile page
   ============================================ */

.profile-section {
  padding: 22px 24px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface-alt) 35%, var(--surface)) 100%);
  box-shadow: 0 1px 2px rgba(11, 26, 21, .04), 0 10px 26px -16px rgba(11, 26, 21, .1);
  animation: planCardIn .35s cubic-bezier(.2,.75,.25,1) both;
}
[data-theme="dark"] .profile-section {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -18px rgba(0, 0, 0, .5);
}
.profile-section-kicker {
  display: block;
  color: var(--primary);
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .profile-section { padding: 18px 16px; border-radius: 20px; }
}

/* ============================================
   Grain texture on colored cards (subtle noise)
   ============================================ */
:root {
  --grain: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch' seed='4'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.nutrition-plan-card,
.food-macro-pip,
.meal-plan-info-modal,
.food-pip-macro,
.food-pip-portion,
.card,
.stat-card,
.quick-action-card {
  position: relative;
}

.nutrition-plan-card::after,
.food-macro-pip::after,
.meal-plan-info-modal::after,
.food-pip-macro::after,
.food-pip-portion::after,
.stat-card::after,
.quick-action-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  background-size: 160px 160px;
  background-repeat: repeat;
  opacity: 0.22;
  mix-blend-mode: multiply;
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
}

/* Push actual content above grain layer */
.nutrition-plan-card > *,
.food-macro-pip > *,
.meal-plan-info-modal > *,
.food-pip-macro > *,
.food-pip-portion > *,
.stat-card > *,
.quick-action-card > * {
  position: relative;
  z-index: 1;
}

/* Colored macro chips get slightly more grain for texture */
.food-pip-macro::after { opacity: 0.28; }

/* Dark mode: switch blend so grain lifts instead of darkens */
[data-theme="dark"] .nutrition-plan-card::after,
[data-theme="dark"] .food-macro-pip::after,
[data-theme="dark"] .meal-plan-info-modal::after,
[data-theme="dark"] .food-pip-portion::after,
[data-theme="dark"] .stat-card::after,
[data-theme="dark"] .quick-action-card::after {
  opacity: 0.16;
  mix-blend-mode: screen;
}
[data-theme="dark"] .food-pip-macro::after { opacity: 0.22; mix-blend-mode: soft-light; }

/* Reduced motion / low bandwidth users: keep grain but skip on print */
@media print {
  .nutrition-plan-card::after,
  .food-macro-pip::after,
  .meal-plan-info-modal::after,
  .food-pip-macro::after,
  .food-pip-portion::after,
  .stat-card::after { display: none; }
}

/* ============================================
   Meal plan editor — modernized target section
   ============================================ */
.mbd-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.mbd-total-num strong {
  display: block;
  font-family: var(--font-primary);
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  color: #FAFCFA;
}
.mbd-total-num span {
  display: block;
  margin-top: 4px;
  color: rgba(241, 244, 248, .65);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.mbd-total-num span em { color: rgba(241, 244, 248, .5); font-style: italic; font-weight: 500; text-transform: none; letter-spacing: 0; }
.mbd-diff {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .02em;
}
.mbd-diff.surplus { background: rgba(255, 204, 0, 0.18); color: #FFCC00; }
.mbd-diff.deficit { background: color-mix(in srgb, var(--primary) 20%, transparent); color: var(--primary-hover); }
.mbd-bar {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, .08);
  margin-bottom: 10px;
}
.mbd-seg { display: block; height: 100%; }
.mbd-seg.protein { background: #24A979; }
.mbd-seg.carbs   { background: #307ABF; }
.mbd-seg.fats    { background: #954F38; }
.mbd-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  color: rgba(241, 244, 248, .8);
  font-size: .72rem;
  font-weight: 600;
}
.mbd-legend span { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.mbd-legend i {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 2px;
}
.mbd-legend .protein i { background: #24A979; }
.mbd-legend .carbs i   { background: #307ABF; }
.mbd-legend .fats i    { background: #954F38; }
.mbd-legend b { color: #FFFFFF; font-weight: 800; }
.mbd-legend em { color: rgba(241, 244, 248, .55); font-style: normal; font-size: .66rem; }

@media (max-width: 640px) {
  .mbd-total-num strong { font-size: 1.85rem; }
  .mbd-legend { gap: 6px 12px; font-size: .68rem; }
}

/* ============================================
   Weight page — expandable weekly list
   ============================================ */
.weight-weekly-list-panel { padding: 20px 22px; }
.weight-weeks { display: flex; flex-direction: column; gap: 8px; }
.wwk {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.wwk:has(.wwk-head.open) {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  box-shadow: 0 8px 22px -14px rgba(11, 26, 21, .18);
}
[data-theme="dark"] .wwk:has(.wwk-head.open) { box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .5); }
.wwk-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .16s ease;
}
.wwk-head:hover { background: var(--surface-alt); }
.wwk-head.current { background: color-mix(in srgb, var(--primary-soft) 45%, var(--surface)); }
.wwk-head.current:hover { background: color-mix(in srgb, var(--primary-soft) 60%, var(--surface)); }

.wwk-left { min-width: 0; }
.wwk-num {
  display: block;
  color: var(--text);
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: -.015em;
}
.wwk-num em {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-fg);
  font-size: .58rem;
  font-weight: 800;
  font-style: normal;
  letter-spacing: .1em;
  text-transform: uppercase;
  vertical-align: middle;
}
.wwk-dates {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: .72rem;
  font-weight: 600;
}

.wwk-mid { min-width: 0; text-align: center; }
.wwk-avg {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  color: var(--text);
  font-family: var(--font-primary);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.wwk-avg em {
  color: var(--text-muted);
  font-size: .78rem;
  font-weight: 600;
  font-style: normal;
}
.wwk-count {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: .65rem;
  font-weight: 600;
}

.wwk-right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.wwk-delta {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: var(--surface-alt);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.wwk-delta.up      { background: color-mix(in srgb, var(--danger) 15%, var(--surface)); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, var(--border)); }
.wwk-delta.down    { background: color-mix(in srgb, var(--success) 15%, var(--surface)); color: var(--success); border-color: color-mix(in srgb, var(--success) 30%, var(--border)); }
.wwk-delta.flat    { background: color-mix(in srgb, var(--warning) 15%, var(--surface)); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 30%, var(--border)); }
.wwk-delta.start   { background: color-mix(in srgb, var(--primary) 12%, var(--surface)); color: var(--primary); border-color: color-mix(in srgb, var(--primary) 32%, var(--border)); }
.wwk-chevron {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: var(--surface-alt);
  color: var(--text-muted);
  transition: transform .25s ease, background .16s ease, color .16s ease;
}
.wwk-chevron svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.wwk-head.open .wwk-chevron { transform: rotate(180deg); background: var(--primary); color: var(--primary-fg); }

.wwk-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s cubic-bezier(.2,.75,.25,1);
}
.wwk-body-inner {
  min-height: 0;
  overflow: hidden;
  padding: 0 16px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .2s ease, transform .25s ease, padding .25s ease;
}
.wwk-body.open { grid-template-rows: 1fr; }
.wwk-body.open .wwk-body-inner {
  padding: 4px 16px 14px;
  opacity: 1;
  transform: none;
  border-top: 1px solid var(--border);
}

.wwk-day {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin-top: 8px;
  border-radius: 10px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
}
.wwk-day-date {
  color: var(--text-muted);
  font-size: .78rem;
  font-weight: 700;
  text-transform: capitalize;
}
.wwk-day-weight {
  color: var(--text);
  font-size: 1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.wwk-day-weight em {
  color: var(--text-muted);
  font-size: .72rem;
  font-weight: 600;
  font-style: normal;
  margin-left: 2px;
}
.wwk-day-del {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
.wwk-day-del:hover { background: color-mix(in srgb, var(--danger) 15%, var(--surface)); color: var(--danger); }

@media (max-width: 640px) {
  .weight-weekly-list-panel { padding: 16px 14px; }
  .wwk-head { grid-template-columns: 1fr auto; padding: 12px 13px; gap: 10px; }
  .wwk-mid { grid-column: 1 / -1; text-align: left; }
  .wwk-avg { font-size: 1.35rem; }
  .wwk-right { justify-self: end; grid-row: 1; }
  .wwk-body-inner { padding: 0 12px; }
  .wwk-body.open .wwk-body-inner { padding: 4px 12px 12px; }
}

/* ============================================
   Goal kcal cell (deficit / surplus custom amount)
   ============================================ */
.goal-kcal-cell {
  display: none !important;
  grid-column: span 1;
  animation: goalKcalIn .28s cubic-bezier(.2,.75,.25,1) both;
}
.goal-kcal-cell.visible { display: flex !important; flex-direction: column; gap: 4px; }
@keyframes goalKcalIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.goal-kcal-input-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
  margin-top: 4px;
}
.goal-kcal-sign {
  display: grid;
  place-items: center;
  min-width: 34px;
  padding: 0 8px;
  border-radius: 10px;
  background: var(--primary);
  color: var(--primary-fg);
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.goal-kcal-input-row input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
}
.goal-kcal-input-row input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.goal-kcal-unit {
  display: grid;
  place-items: center;
  color: var(--text-muted);
  font-size: .7rem;
  font-weight: 700;
  padding: 0 6px;
}
.goal-kcal-presets {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.goal-kcal-preset {
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--text-muted);
  font: inherit;
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.goal-kcal-preset:hover { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.goal-kcal-preset.active {
  background: var(--primary);
  color: var(--primary-fg);
  border-color: var(--primary);
}

.tdee-adjust {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: .7rem;
  font-weight: 700;
}

/* ============================================
   Meal plan editor — minimal toolbar + hero details
   ============================================ */

.meal-plan-detalii {
  padding: 28px 32px 24px !important;
  text-align: center;
  border-radius: 22px !important;
  background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface-alt) 30%, var(--surface)) 100%);
}
.mp-client-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding: 6px 10px 6px 14px;
  border-radius: 999px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
}
.mp-client-label {
  color: var(--text-muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.mp-client-select {
  padding: 6px 14px 6px 10px !important;
  min-height: 32px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  font-weight: 700 !important;
  font-size: .85rem !important;
  cursor: pointer;
}

.mp-title-input {
  display: block;
  width: 100%;
  padding: 12px 8px !important;
  margin: 0 auto 16px !important;
  font-family: var(--font-primary);
  font-size: clamp(1.6rem, 4vw, 2.3rem) !important;
  font-weight: 700 !important;
  letter-spacing: -.03em;
  color: var(--text);
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: none;
  text-align: center;
  line-height: 1.15;
}
.mp-title-input::placeholder {
  color: color-mix(in srgb, var(--text-muted) 60%, transparent);
  font-weight: 600;
}
.mp-title-input:focus {
  background: color-mix(in srgb, var(--primary-soft) 40%, transparent) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

.mp-notes-input {
  display: block;
  width: 100%;
  max-width: 640px;
  margin: 0 auto !important;
  padding: 14px 18px !important;
  min-height: 76px !important;
  font-size: .95rem !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
  color: var(--text);
  background: var(--surface-alt) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  resize: vertical;
  text-align: center;
}
.mp-notes-input:focus {
  outline: none;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-soft) !important;
}
.mp-notes-input::placeholder {
  color: color-mix(in srgb, var(--text-muted) 75%, transparent);
  font-weight: 500;
}

@media (max-width: 640px) {
  .meal-plan-detalii { padding: 22px 18px 20px !important; }
  .mp-client-row { margin-bottom: 16px; padding: 5px 8px 5px 12px; }
  .mp-title-input { font-size: 1.55rem !important; padding: 8px 4px !important; }
  .mp-notes-input { padding: 12px 14px !important; font-size: .88rem !important; }
}

/* ============================================
   Meal plan editor — aesthetic meal cards
   ============================================ */

/* ============================================
   Coach Profile — body stats form + self plans
   ============================================ */
.coach-profile-stats-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 4px 0 14px;
}
.cpsf-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cpsf-cell label {
  color: var(--text-muted);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.cpsf-cell input,
.cpsf-cell select {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
}
.cpsf-cell input:focus,
.cpsf-cell select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.cpsf-goal-kcal { display: none !important; }
.cpsf-goal-kcal.visible { display: flex !important; }
.coach-profile-save-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}
.coach-profile-save-msg {
  font-size: .82rem;
  font-weight: 700;
  color: var(--text-muted);
}
.coach-profile-save-msg.ok { color: var(--success); }
.coach-profile-save-msg.err { color: var(--danger); }

.coach-self-plans-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.csp-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface-alt) 30%, var(--surface)) 100%);
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.csp-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); box-shadow: var(--shadow-md); }
.csp-icon {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--surface-alt);
  color: var(--primary);
}
.csp-icon.workout { background: color-mix(in srgb, #307ABF 14%, var(--surface-alt)); color: #307ABF; }
.csp-icon.meal    { background: color-mix(in srgb, #24A979 14%, var(--surface-alt)); color: #24A979; }
[data-theme="dark"] .csp-icon.workout { color: #8EC1E5; }
[data-theme="dark"] .csp-icon.meal { color: #6BD4AE; }
.csp-icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; }
.csp-body { flex: 1; min-width: 0; }
.csp-label {
  display: block;
  color: var(--text-muted);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.csp-body strong {
  display: block;
  margin: 3px 0 2px;
  color: var(--text);
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: -.015em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.csp-body strong.csp-empty { color: var(--text-muted); font-weight: 700; }
.csp-body small { color: var(--text-muted); font-size: .74rem; }
.csp-cta {
  flex: 0 0 auto;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-fg);
  font: inherit;
  font-weight: 800;
  font-size: .78rem;
  cursor: pointer;
  transition: background .16s ease, transform .16s ease;
}
.csp-cta:hover { background: var(--primary-hover); transform: translateY(-1px); }

@media (max-width: 640px) {
  .coach-profile-stats-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coach-self-plans-grid { grid-template-columns: 1fr; }
  .csp-card { padding: 14px 14px; }
}

/* ============================================
   NATIVE iOS SHELL — applied only when running inside Capacitor.
   The body.ios-shell class is added by assets/js/ios-bootstrap.js.
   These rules override desktop/mobile web styles to make the app
   look and behave like a native iOS app.
   ============================================ */

/* Force mobile layout at all widths inside the native shell */
body.ios-shell { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; font-family: var(--font-secondary); }
body.ios-shell input, body.ios-shell textarea, body.ios-shell [contenteditable] { -webkit-user-select: text; user-select: text; }

/* Full-height app shell + hide web sidebar rules */
body.ios-shell .app-shell {
  display: block !important;
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: 0 !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  background: var(--bg);
}

/* Hide the web mobile top bar — iOS gets its own nav bar area from safe-area */
body.ios-shell #mobile-topbar { display: none !important; }

/* --- iOS Nav Bar (top area under status bar) --- */
body.ios-shell .main {
  padding-top: calc(env(safe-area-inset-top, 0px) + 6px);
  padding-bottom: 0;
  min-height: auto;
}

/* --- iOS-style Big Titles for page-head across all tabs --- */
body.ios-shell .view .page-head {
  padding: 4px 20px 12px;
  margin-bottom: 8px;
  border: 0;
  background: transparent;
  display: block;
}
body.ios-shell .view .page-head h1 {
  font-family: var(--font-primary);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0;
  color: var(--text);
}
body.ios-shell .view .page-head .sub {
  margin-top: 4px;
  font-size: 15px;
  color: var(--text-muted);
}

/* --- Inset content padding like iOS --- */
body.ios-shell .view.active {
  padding: 0 14px 14px;
  animation: iosViewIn .28s cubic-bezier(.2,.75,.25,1) both;
}
@keyframes iosViewIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Tab bar is defined in the FINAL HARD OVERRIDE block at end-of-file. */

/* Force short mobile label always */
body.ios-shell .lbl-full { display: none !important; }
body.ios-shell .lbl-mobile { display: inline !important; }
body.ios-shell .nav-item:has(.lbl-mobile) .lbl-full { display: none !important; }

/* --- iOS-style Cards: grouped list look --- */
body.ios-shell .card {
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: none;
  border: 0.5px solid color-mix(in srgb, var(--text) 8%, transparent);
  background: var(--surface);
}

/* --- iOS Buttons: pill primary + link-style secondary --- */
body.ios-shell .btn {
  border-radius: 12px;
  min-height: 46px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: transform .12s ease, opacity .12s ease;
}
body.ios-shell .btn:active { transform: scale(0.97); opacity: 0.85; }
body.ios-shell .btn-primary { box-shadow: none; }
body.ios-shell .btn-block { min-height: 50px; }

/* --- iOS Inputs — bigger touch targets --- */
body.ios-shell input, body.ios-shell textarea, body.ios-shell select {
  font-size: 16px !important;
  border-radius: 12px;
  min-height: 44px;
}

/* --- Modals: iOS bottom-sheet style --- */
body.ios-shell .modal-backdrop.active {
  align-items: flex-end;
  background: rgba(0,0,0,0.35);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
body.ios-shell .modal-backdrop.active > .modal {
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 18px 18px 0 0 !important;
  padding: 12px 18px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  max-height: 92dvh;
  overflow-y: auto;
  position: relative;
  animation: iosSheetIn .32s cubic-bezier(.2,.85,.3,1) both;
}
body.ios-shell .modal-backdrop.active > .modal::before {
  content: "";
  display: block;
  width: 40px; height: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-muted) 45%, transparent);
  margin: 4px auto 12px;
}
@keyframes iosSheetIn { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* --- Hero cards: preserve premium look, tighten padding --- */
body.ios-shell .hero-card { padding: 22px 22px; border-radius: 20px; margin-bottom: 14px; }
body.ios-shell .hero-card .title { font-size: 26px; }
body.ios-shell .hero-card .sub { font-size: 14.5px; }
body.ios-shell .hero-card .cta { min-height: 44px; padding: 10px 18px; }

/* --- iOS list rows for settings/profile: grouped list look --- */
body.ios-shell .cs-master { padding: 0 6px; }
body.ios-shell .cs-rows { border-radius: 14px; box-shadow: none; border: 0.5px solid color-mix(in srgb, var(--text) 10%, transparent); }
body.ios-shell .cs-row { min-height: 52px; padding: 12px 16px; }
body.ios-shell .cs-row-body strong { font-size: 16px; }

/* --- Weight/nutrition/workout panels: cleaner card look --- */
body.ios-shell .nutrition-plan-card,
body.ios-shell .profile-section {
  border-radius: 14px;
  box-shadow: none;
  border: 0.5px solid color-mix(in srgb, var(--text) 10%, transparent);
}

/* --- Weekly weight list — iOS look --- */
body.ios-shell .wwk { border-radius: 12px; box-shadow: none; border: 0.5px solid color-mix(in srgb, var(--text) 10%, transparent); }

/* --- Toolbar (nutrition top toolbar, meal plan detalii, editor toolbars) --- */
body.ios-shell .meal-plan-detalii {
  border-radius: 16px;
  box-shadow: none;
  border: 0.5px solid color-mix(in srgb, var(--text) 10%, transparent);
}

/* --- Meal editor cards --- */

/* --- Coach schedule cell + gym session card — keep functional look --- */

/* --- Details / accordion / details tag — iOS friendly --- */
body.ios-shell details { border-radius: 12px; }
body.ios-shell details summary { min-height: 46px; }

/* --- Toast: iOS banner-style --- */
body.ios-shell .toast {
  border-radius: 14px;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

/* Dark theme tweak: darker translucent tab bar */
body.ios-shell[data-theme="dark"] .sidebar,
[data-theme="dark"] body.ios-shell .sidebar {
  background: color-mix(in srgb, var(--surface) 82%, transparent) !important;
  border-color: color-mix(in srgb, var(--text) 12%, transparent) !important;
}

/* Extra breathing room at bottom for scrollable pages */
body.ios-shell .view > *:last-child { margin-bottom: 12px; }

/* Prevent momentum-scroll odd overflow of html on iOS */
html { overscroll-behavior: none; }
body.ios-shell { min-height: 100dvh; background: var(--bg); }

/* Hide any leftover desktop-only chrome */
body.ios-shell .coach-dashboard-hero > *:not(.coach-hero-copy):not(.coach-hero-actions) { display: none; }

/* Keep scroll performance decent on long lists */
body.ios-shell .main, body.ios-shell .view {
  -webkit-overflow-scrolling: touch;
}

/* Hide diagnostic overlay by default when everything works quickly */
body.ios-shell #ios-shell-dbg { opacity: 0.85; }

/* ============================================================
   RONDESIGN-INSPIRED PREMIUM iOS AESTHETIC
   Glass surfaces + gradient-blur backgrounds + grain + LCD numbers.
   Applied ONLY inside the iOS shell (body.ios-shell). Web is untouched.
   ============================================================ */

/* Softer, brighter body ambient */
body.ios-shell {
  background:
    radial-gradient(80% 60% at 100% 0%, color-mix(in srgb, #FF9DBB 22%, transparent) 0%, transparent 55%),
    radial-gradient(70% 50% at 0% 25%, color-mix(in srgb, var(--primary) 18%, transparent) 0%, transparent 60%),
    radial-gradient(90% 60% at 100% 100%, color-mix(in srgb, #FCC53E 16%, transparent) 0%, transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
[data-theme="dark"] body.ios-shell,
body.ios-shell[data-theme="dark"] {
  background:
    radial-gradient(70% 55% at 100% 0%, color-mix(in srgb, var(--primary) 22%, transparent) 0%, transparent 55%),
    radial-gradient(80% 60% at 0% 100%, color-mix(in srgb, #6B4EDB 24%, transparent) 0%, transparent 60%),
    #0B0B14;
  background-attachment: fixed;
}

/* --- iOS-style top toolbar helpers reused per page --- */
body.ios-shell .view .page-head {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  padding: 4px 4px 14px !important;
  margin-bottom: 6px;
}
body.ios-shell .view .page-head > div:first-child {
  grid-column: 2;
  text-align: center;
}
body.ios-shell .view .page-head h1 {
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: var(--text);
  font-family: var(--font-primary) !important;
}
body.ios-shell .view .page-head .sub { display: none; }

/* Glass card base — reused by many components inside the shell */
body.ios-shell .card,
body.ios-shell .nutrition-plan-card,
body.ios-shell .profile-section,
body.ios-shell .wwk,
body.ios-shell .cs-rows,
body.ios-shell .cs-detail-card {
  position: relative;
  border-radius: 28px !important;
  border: 0.5px solid rgba(255,255,255,0.55) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.45) 100%) !important;
  box-shadow:
    0 1px 2px rgba(11, 26, 21,.05),
    0 8px 24px -12px rgba(11, 26, 21,.14),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  overflow: hidden;
}
[data-theme="dark"] body.ios-shell .card,
[data-theme="dark"] body.ios-shell .nutrition-plan-card,
[data-theme="dark"] body.ios-shell .profile-section,
[data-theme="dark"] body.ios-shell .wwk,
[data-theme="dark"] body.ios-shell .cs-rows,
[data-theme="dark"] body.ios-shell .cs-detail-card {
  border-color: rgba(255,255,255,0.08) !important;
  background:
    linear-gradient(180deg, rgba(30,30,45,0.72) 0%, rgba(20,20,32,0.55) 100%) !important;
  box-shadow:
    0 1px 2px rgba(0,0,0,.4),
    0 10px 26px -12px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* Grain overlay on premium surfaces */
body.ios-shell .card::after,
body.ios-shell .nutrition-plan-card::after,
body.ios-shell .profile-section::after,
body.ios-shell .stat-card::after,
body.ios-shell .quick-action-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  background-size: 160px 160px;
  opacity: 0.24;
  mix-blend-mode: overlay;
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
}

/* --- BIG LCD-style stat numbers used on hero cards --- */

/* --- Segmented control (pill selector like the reference) --- */

/* --- Icon-round pill buttons (back / info / close) --- */

/* --- Auto-wrap page-head with round back button on iOS shell if desired
   (dev opt-in via <div class="page-head has-back">). --- */

/* --- Rondesign-style pill stat cards for stat-grid on Panou --- */
body.ios-shell .stat-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
body.ios-shell .stat-card {
  position: relative;
  min-height: 128px;
  padding: 18px 20px 16px;
  border-radius: 34px !important;
  overflow: hidden;
  border: 0.5px solid rgba(255,255,255,.5) !important;
  background:
    radial-gradient(120% 100% at 30% 100%, #FF7EB8 0%, transparent 55%),
    radial-gradient(140% 100% at 100% 0%, #FCC53E 0%, transparent 55%),
    radial-gradient(120% 100% at 0% 0%, var(--primary-hover) 0%, transparent 55%),
    #E9D5F5 !important;
  box-shadow:
    0 1px 2px rgba(11, 26, 21,.06),
    0 12px 30px -14px rgba(11, 26, 21,.22),
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -30px 60px -20px rgba(11, 26, 21,.15) !important;
  color: #FFFFFF;
  isolation: isolate;
}
body.ios-shell .stat-card:nth-child(4n+1) {
  background:
    radial-gradient(120% 100% at 30% 100%, #FF7EB8 0%, transparent 60%),
    radial-gradient(140% 100% at 100% 0%, #FCC53E 0%, transparent 55%),
    #F3D5CC !important;
}
body.ios-shell .stat-card:nth-child(4n+2) {
  background:
    radial-gradient(140% 100% at 100% 0%, var(--primary-hover) 0%, transparent 55%),
    radial-gradient(120% 100% at 0% 100%, #6B4EDB 0%, transparent 60%),
    #C4C1EE !important;
}
body.ios-shell .stat-card:nth-child(4n+3) {
  background:
    radial-gradient(120% 100% at 30% 100%, #FF5B3B 0%, transparent 60%),
    radial-gradient(140% 100% at 100% 0%, #FCC53E 0%, transparent 55%),
    #FBC9A6 !important;
}
body.ios-shell .stat-card:nth-child(4n+4) {
  background:
    radial-gradient(120% 100% at 30% 100%, #22B37D 0%, transparent 55%),
    radial-gradient(140% 100% at 100% 0%, var(--primary-hover) 0%, transparent 55%),
    #BFE7DA !important;
}
body.ios-shell .stat-card::after {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--grain);
  background-size: 160px 160px;
  opacity: 0.5;
  mix-blend-mode: overlay;
  pointer-events: none;
  border-radius: inherit;
}
body.ios-shell .stat-card > * { position: relative; z-index: 1; }
body.ios-shell .stat-card .label {
  color: rgba(255,255,255,.85) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin-bottom: 6px !important;
}
body.ios-shell .stat-card .value {
  font-family: var(--font-mono) !important;
  font-size: 44px !important;
  font-weight: 200 !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
  color: #FFFFFF !important;
  text-shadow:
    0 0 10px rgba(255,255,255,.55),
    0 0 26px rgba(255,255,255,.35) !important;
  margin: 4px 0 6px !important;
}
body.ios-shell .stat-card .hint {
  color: rgba(255,255,255,.75) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}

/* Small delta chip on stat cards (opt-in via .stat-card .stat-chip) */
body.ios-shell .stat-card .stat-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.28);
  border: 0.5px solid rgba(255,255,255,.5);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

/* --- Chart wrap = glass canvas with gradient behind (used for weight chart etc) --- */

/* --- Hero (Salut Ionut) — keep dark but softer + rounded --- */
body.ios-shell .hero-card {
  border-radius: 32px !important;
  padding: 20px 22px !important;
}
body.ios-shell .hero-card .title {
  font-family: var(--font-primary) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
}

/* --- Nutrition macro fixed row: pill segmented cards --- */

/* --- Meal card: glass pill --- */

/* --- Cs-rows (Settings list) — no dividers, cleaner --- */
body.ios-shell .cs-row {
  border-top: 0.5px solid rgba(255,255,255,.4) !important;
}
body.ios-shell .cs-row:first-child { border-top: 0 !important; }
[data-theme="dark"] body.ios-shell .cs-row { border-top-color: rgba(255,255,255,.06) !important; }
body.ios-shell .cs-row-icon {
  background: rgba(255,255,255,.5) !important;
  border: 0.5px solid rgba(255,255,255,.55);
}

/* --- Modal (bottom sheet) — glassy translucent --- */
body.ios-shell .modal-backdrop.active > .modal {
  border-radius: 28px 28px 0 0 !important;
  border-top: 0.5px solid rgba(255,255,255,.5);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.7) 100%) !important;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
[data-theme="dark"] body.ios-shell .modal-backdrop.active > .modal {
  background:
    linear-gradient(180deg, rgba(28,28,42,0.85) 0%, rgba(18,18,28,0.75) 100%) !important;
  border-top-color: rgba(255,255,255,.06);
}

/* Tab bar styling is handled by the floating pill block above (line ~9868). */

/* --- Primary buttons: pill + soft shadow --- */
body.ios-shell .btn-primary {
  border-radius: 999px !important;
  padding: 12px 24px !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 100%, transparent), color-mix(in srgb, var(--primary) 85%, transparent)) !important;
  box-shadow:
    0 6px 18px -6px color-mix(in srgb, var(--primary) 55%, transparent),
    inset 0 1px 0 rgba(255,255,255,.35) !important;
}
body.ios-shell .btn-ghost {
  border-radius: 999px !important;
  background: rgba(255,255,255,.5) !important;
  border: 0.5px solid rgba(255,255,255,.6) !important;
}

/* --- Inputs — glass pill --- */
body.ios-shell input, body.ios-shell textarea, body.ios-shell select {
  border-radius: 16px !important;
  background: rgba(255,255,255,.55) !important;
  border: 0.5px solid rgba(255,255,255,.5) !important;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
[data-theme="dark"] body.ios-shell input, [data-theme="dark"] body.ios-shell textarea, [data-theme="dark"] body.ios-shell select {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.1) !important;
}

/* --- Weekly weight rows: bigger radius + LCD number --- */
body.ios-shell .wwk-avg {
  font-family: var(--font-mono) !important;
  font-weight: 200 !important;
  letter-spacing: -0.04em !important;
}
body.ios-shell .wwk-day-weight {
  font-family: var(--font-mono) !important;
  font-weight: 300 !important;
}

/* --- Profile hero title — display-face LCD look --- */

/* --- Big rounded macro numbers in the meal plan info modal --- */
body.ios-shell .macro-total {
  font-family: var(--font-mono) !important;
  font-weight: 200 !important;
  letter-spacing: -0.04em !important;
}

/* --- Small helper: date/period selector row (like Jun 6 – Jun 12 in the ref) --- */

/* Ensure toast doesn't clash with tab bar */
body.ios-shell .toast {
  bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ============================================================
   MOBILE SAFE-AREA + RESPONSIVE POLISH
   Uses CSS vars so every measurement stays coherent. The tab bar
   grows to fit the home indicator; content shell reserves the exact
   same amount so nothing overlaps.
   ============================================================ */
:root {
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
  --topbar-h:    56px;
  --tabbar-h:    72px;   /* base content height inside the bar (icons + labels) */
}

@media (max-width: 900px) {
  /* Top bar: content area 56px + notch inset on top. */
  .mobile-topbar {
    top: 0 !important;
    height: auto !important;
    min-height: calc(var(--topbar-h) + var(--safe-top)) !important;
    padding-top: var(--safe-top) !important;
    padding-left: max(16px, var(--safe-left)) !important;
    padding-right: max(16px, var(--safe-right)) !important;
    box-sizing: border-box;
  }

  /* Reserve top+bottom space equal to bar heights (with safe-area). */
  .app-shell {
    padding-top: calc(var(--topbar-h) + var(--safe-top)) !important;
    padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 8px) !important;
    padding-left: var(--safe-left) !important;
    padding-right: var(--safe-right) !important;
    min-height: 100dvh;
  }

  /* Bottom nav — flush to the very bottom of the viewport. No safe-area
     padding: bar hugs the screen edge exactly. */
  .sidebar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    height: auto !important;
    min-height: 56px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: max(4px, var(--safe-left)) !important;
    padding-right: max(4px, var(--safe-right)) !important;
    box-sizing: border-box !important;
    background: var(--surface) !important;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    border-top: 1px solid var(--border) !important;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.12) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  [data-theme="dark"] .sidebar {
    background: color-mix(in srgb, var(--surface) 96%, transparent) !important;
    border-top-color: rgba(255,255,255,0.06) !important;
  }

  /* The nav row fills the remaining height (above safe-area). */
  .sidebar .nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-around !important;
    height: 56px;
    min-height: 56px;
    padding: 0 2px;
    gap: 0;
    width: 100%;
  }
  .sidebar .nav-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 2px 3px !important;
    height: 100%;
    overflow: hidden;
  }
  .sidebar .nav-item .icon { width: 24px; height: 24px; }
  .sidebar .nav-item .icon svg { width: 24px; height: 24px; stroke-width: 1.6; }
  .sidebar .nav-item.active .icon svg { stroke-width: 2.1; }
  .sidebar .nav-item .lbl-mobile,
  .sidebar .nav-item .lbl-full {
    font-size: 10px;
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  /* Reserve app-shell bottom = full tab bar height (60 content + safe-area). */
  .app-shell {
    padding-bottom: calc(60px + var(--safe-bottom) + 8px) !important;
  }

  /* Any content view respects horizontal safe-area on landscape. */
  .main {
    padding-left: max(16px, var(--safe-left)) !important;
    padding-right: max(16px, var(--safe-right)) !important;
  }

  /* Fixed elements (toasts, floating buttons) live above the home indicator. */
  .toast {
    bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 12px) !important;
  }

  /* Modals: honor bottom safe-area so nothing hides under home indicator. */
  .modal-backdrop.active > .modal {
    padding-bottom: calc(20px + var(--safe-bottom));
  }
}

/* Very small phones (iPhone SE 1st gen, mini in landscape width < 380) */
@media (max-width: 380px) {
  .page-head h1 { font-size: 1.35rem; }
  .stat-grid { grid-template-columns: 1fr !important; }
  .btn { min-height: 42px; padding: 10px 14px; font-size: 0.9rem; }
  .mobile-topbar .brand { font-size: 1rem; }
  .mobile-topbar .icon-btn { width: 36px; height: 36px; }
}

/* Small phones (iPhone SE 2/3, 12/13 mini) — 375px width */
@media (min-width: 381px) and (max-width: 400px) {
  .stat-grid { grid-template-columns: 1fr 1fr !important; }
}

/* Standard iPhones (12/13/14, 15) — 390-393px */
@media (min-width: 401px) and (max-width: 430px) {
  .stat-grid { grid-template-columns: 1fr 1fr; }
}

/* Plus/Pro Max — 430px+ but still handheld */
@media (min-width: 431px) and (max-width: 500px) {
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .page-head h1 { font-size: 1.6rem; }
}

/* Landscape orientation — flatter safe-area, no bottom nav padding needed
   as much, but preserve horizontal notch cutout on iPhones. */
@media (max-width: 900px) and (orientation: landscape) {
  .app-shell {
    padding-top: max(env(safe-area-inset-top, 0px), 12px) !important;
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .mobile-topbar { display: none !important; }  /* land users get more screen */
  .sidebar { height: calc(56px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* Any modal / sheet that opens keyboard — allow scroll to input on keyboard-focus */
@media (max-width: 900px) {
  .modal-backdrop.active { overscroll-behavior: contain; }
  input:focus, textarea:focus { scroll-margin-block: 100px; }
}

/* Prevent horizontal scroll on any page from wide elements */
html, body { overflow-x: hidden; }
.view, .main, .app-shell, .card, section { max-width: 100%; box-sizing: border-box; }

/* Frosted safe-area cap: content can scroll underneath, never over the iOS status bar. */
body.ios-shell::before {
  content:none;
  position:fixed;
  z-index:9998;
  top:0;
  left:0;
  right:0;
  height:calc(max(env(safe-area-inset-top,0px),24px) + 38px);
  background:var(--bg);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  -webkit-mask-image:none;
  mask-image:none;
  pointer-events:none;
}
@media(display-mode:standalone){
  body:not(.admin-clean-page)::before {
    content:none;
    position:fixed;
    z-index:9998;
    top:0;
    left:0;
    right:0;
    height:calc(max(env(safe-area-inset-top,0px),24px) + 38px);
    background:var(--bg);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    -webkit-mask-image:none;
    mask-image:none;
    pointer-events:none;
  }
}

/* .nutrition-sticky-summary is no longer rendered in the current client
   view (the sticky macro card was removed), so no mobile safe-area shim
   needed here. Kept as a comment for future re-introduction. */

/* ============================================================
   NATIVE-LIKE MOBILE APP CHROME
   Applies to any mobile-width viewport (browser, PWA, iOS shell).
   Makes the dashboard feel like a native Apple app: precise safe-area,
   blur bars, SF Pro fallback typography, iOS momentum, tap feedback.
   ============================================================ */
@media (max-width: 900px) {
  html, body {
    height: 100%;
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    text-rendering: optimizeLegibility;
    font-family: var(--font-primary);
  }
  /* Only inputs / editable content should be selectable */
  body { -webkit-user-select: none; user-select: none; }
  input, textarea, [contenteditable], .cs-detail-card, .card p, .card small, .card em, .modal p, .modal small {
    -webkit-user-select: text; user-select: text;
  }

  /* Full-viewport shell that respects notch/home indicator on every phone. */
  .app-shell {
    display: block !important;
    min-height: 100dvh;
    background: var(--bg);
  }
  .main {
    min-height: calc(100dvh - var(--safe-top) - var(--safe-bottom));
    -webkit-overflow-scrolling: touch;
  }

  /* --- Native iOS-style top nav bar ---
     Slim (44pt content + notch inset), translucent blur, no floating logo.
     The mobile-topbar element is populated from renderMobileTopbar(): brand +
     theme/settings/logout icons. */
  .mobile-topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 50 !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    height: auto !important;
    min-height: calc(44px + var(--safe-top)) !important;
    padding: var(--safe-top) max(16px, var(--safe-right)) 0 max(16px, var(--safe-left)) !important;
    background: color-mix(in srgb, var(--surface) 82%, transparent) !important;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    border-bottom: 0.5px solid color-mix(in srgb, var(--text) 12%, transparent) !important;
    box-shadow: none !important;
  }
  .mobile-topbar > * { position: relative; }
  .mobile-topbar .brand {
    font-family: var(--font-primary);
    font-size: 17px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
    color: var(--text);
    gap: 8px !important;
  }
  .mobile-topbar .icon-btn {
    width: 34px !important; height: 34px !important;
    background: transparent !important;
    color: var(--primary) !important;
    border: 0 !important;
  }
  .mobile-topbar .icon-btn svg { width: 22px !important; height: 22px !important; stroke-width: 1.7 !important; }
  .mobile-topbar .icon-btn:hover { background: color-mix(in srgb, var(--primary) 12%, transparent) !important; }

  /* --- Page content sits below topbar, above tab bar --- */
  .app-shell {
    padding-top: calc(44px + var(--safe-top)) !important;
    padding-bottom: calc(60px + var(--safe-bottom)) !important;
    padding-left: var(--safe-left) !important;
    padding-right: var(--safe-right) !important;
  }
  .main {
    padding: 16px max(16px, var(--safe-left)) 16px max(16px, var(--safe-right)) !important;
  }

  /* --- iOS Large Title style for page-head h1 ---
     Renders as a big 34pt title at the top of each view — like Apple’s
     Settings, Music, Mail. Sub becomes a subtle 15pt caption below. */
  .view.active .page-head { padding: 4px 4px 12px !important; margin-bottom: 8px !important; border: 0 !important; background: transparent !important; }
  .view.active .page-head h1 {
    font-family: var(--font-primary) !important;
    font-size: 34px !important;
    font-weight: 700 !important;
    letter-spacing: -0.032em !important;
    line-height: 1.08 !important;
    color: var(--text);
    margin: 0 !important;
  }
  .view.active .page-head .sub {
    font-size: 15px !important;
    color: var(--text-muted) !important;
    margin-top: 4px !important;
    letter-spacing: -0.01em;
  }

  /* --- Native tab bar (bottom nav) — flush to the very bottom.
     Zero padding-bottom so labels hug the screen edge exactly. Home
     indicator overlap accepted per user request. */
  .sidebar {
    position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    z-index: 60 !important;
    height: auto !important;
    min-height: 50px !important;
    padding: 0 max(4px, var(--safe-left)) 0 max(4px, var(--safe-right)) !important;
    box-sizing: border-box !important;
    background: color-mix(in srgb, var(--surface) 80%, transparent) !important;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    border-top: 0.5px solid color-mix(in srgb, var(--text) 12%, transparent) !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: stretch !important;
  }
  [data-theme="dark"] .sidebar {
    background: color-mix(in srgb, var(--surface) 78%, transparent) !important;
    border-top-color: rgba(255, 255, 255, 0.08) !important;
  }
  .sidebar .brand, .sidebar-role-badge, .sidebar-footer { display: none !important; }
  .sidebar .nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-around !important;
    width: 100%;
    height: 46px !important;
    padding: 0 !important;
    gap: 0;
  }
  .sidebar .nav-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px !important;
    padding: 3px 4px !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--text-muted) !important;
    transition: opacity 0.12s ease !important;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
  }
  .sidebar .nav-item::before { display: none !important; }
  .sidebar .nav-item:hover { background: transparent !important; }
  .sidebar .nav-item:active { opacity: 0.55; transform: none !important; }
  .sidebar .nav-item.active {
    background: transparent !important;
    color: var(--primary) !important;
    font-weight: 600 !important;
  }
  .sidebar .nav-item .icon { width: 26px !important; height: 26px !important; }
  .sidebar .nav-item .icon svg {
    width: 26px !important; height: 26px !important;
    stroke-width: 1.6 !important;
    transition: stroke-width 0.15s ease, filter 0.15s ease;
  }
  .sidebar .nav-item.active .icon svg {
    stroke-width: 2.2 !important;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--primary) 45%, transparent));
  }
  .sidebar .nav-item .lbl-full,
  .sidebar .nav-item .lbl-mobile {
    font-size: 10px !important;
    line-height: 1.05 !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .sidebar .nav-item.active .lbl-full,
  .sidebar .nav-item.active .lbl-mobile { font-weight: 600 !important; }

  /* --- Cards: iOS grouped-list feel — inset from edges, 14pt radius --- */
  .card, .profile-section, .wwk, .wss-row, .nutrition-plan-card, .cs-detail-card, .cs-rows, .meal-plan-detalii {
    border-radius: 14px !important;
    box-shadow: none !important;
    border: 0.5px solid color-mix(in srgb, var(--text) 10%, transparent) !important;
  }
  [data-theme="dark"] .card, [data-theme="dark"] .profile-section, [data-theme="dark"] .wwk, [data-theme="dark"] .wss-row, [data-theme="dark"] .nutrition-plan-card, [data-theme="dark"] .cs-detail-card, [data-theme="dark"] .cs-rows, [data-theme="dark"] .meal-plan-detalii {
    border-color: rgba(255, 255, 255, 0.08) !important;
  }

  /* --- Buttons: iOS pill with proper touch feedback --- */
  .btn { min-height: 44px !important; border-radius: 12px !important; font-size: 16px !important; font-weight: 600 !important; letter-spacing: -0.01em !important; transition: opacity 0.12s ease, transform 0.12s ease !important; }
  .btn:active { opacity: 0.75; transform: scale(0.98); }
  .btn-primary { box-shadow: none !important; }
  .btn-block { min-height: 50px !important; }

  /* --- Inputs: 16px font prevents automatic zoom on iOS focus --- */
  input, textarea, select { font-size: 16px !important; min-height: 44px !important; border-radius: 12px !important; }
  select { -webkit-appearance: none; appearance: none; }

  /* --- Modal: iOS bottom sheet with grip handle + safe-area --- */
  .modal-backdrop.active { align-items: flex-end !important; background: rgba(0, 0, 0, 0.32) !important; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .modal-backdrop.active > .modal {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 12px 20px calc(24px + var(--safe-bottom)) !important;
    max-height: 92dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
    animation: iosSheetSlide 0.32s cubic-bezier(0.2, 0.9, 0.3, 1) both;
  }
  .modal-backdrop.active > .modal::before {
    content: "";
    display: block;
    width: 36px; height: 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-muted) 40%, transparent);
    margin: 0 auto 12px;
  }
  @keyframes iosSheetSlide { from { transform: translateY(100%); } to { transform: translateY(0); } }

  /* --- Smooth view transitions when switching tabs --- */
  .view.active { animation: iosViewFade 0.26s cubic-bezier(0.25, 0.9, 0.3, 1) both; }
  @keyframes iosViewFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

  /* --- Toast: banner style above the tab bar --- */
  .toast {
    bottom: calc(60px + var(--safe-bottom) + 12px) !important;
    left: 12px !important; right: 12px !important;
    border-radius: 14px !important;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }

  /* --- Hero (Bine ai revenit) — tighter iOS card --- */
  .hero-card { border-radius: 20px !important; padding: 22px 20px !important; margin-bottom: 14px !important; }
  .hero-card .title { font-family: var(--font-primary) !important; font-size: 26px !important; letter-spacing: -0.03em !important; }
  .hero-card .sub { font-size: 15px !important; }
  .hero-card .cta { min-height: 44px !important; padding: 10px 20px !important; border-radius: 999px !important; }

  /* --- Segmented-like items get iOS treatment (nutrition, workout row, etc) --- */

  /* --- Prevent double-tap zoom on interactive elements --- */
  button, .btn, .nav-item, .cs-row, .wss-row, .card, .wwk-head, [role="button"] { touch-action: manipulation; }

  /* --- Landscape: hide topbar for more real-estate; tab bar keeps safe-area --- */
  @media (orientation: landscape) {
    .mobile-topbar { display: none !important; }
    .app-shell { padding-top: max(12px, var(--safe-top)) !important; }
  }
}

/* Small phones (SE 1st gen, mini landscape) — tighter typography */
@media (max-width: 380px) {
  .view.active .page-head h1 { font-size: 28px !important; }
  .hero-card .title { font-size: 22px !important; }
  .stat-grid { grid-template-columns: 1fr !important; }
}

/* Coach plan editor: client profile prefill card */
.editor-client-profile {
  margin: 4px 0 16px;
  padding: 16px 18px;
  border-radius: 16px;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--primary) 10%, var(--surface)) 0%,
    var(--surface) 100%);
  border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border));
}
[data-theme="dark"] .editor-client-profile {
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--primary) 14%, var(--surface)) 0%,
    var(--surface) 100%);
}
.editor-client-profile.empty {
  padding: 14px 18px;
  border-style: dashed;
  color: var(--text-muted);
  font-size: .88rem;
  font-style: italic;
}
.editor-client-profile .ecp-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.editor-client-profile .ecp-head h4 {
  margin: 0;
  font-family: var(--font-primary);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.01em;
}
.editor-client-profile .ecp-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.editor-client-profile .ecp-item {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.editor-client-profile .ecp-item.wide { grid-column: span 3; }
.editor-client-profile .ecp-item span {
  color: var(--text-muted);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
}
.editor-client-profile .ecp-item b {
  font-family: var(--font-primary);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.01em;
  line-height: 1;
}
.editor-client-profile .ecp-item b i {
  font-style: normal;
  font-size: .72em;
  color: var(--text-muted);
  font-weight: 600;
  margin-left: 1px;
}
.editor-client-profile .ecp-medical {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, #E36A6A 10%, var(--surface));
  border-left: 3px solid #C43C3C;
}
.editor-client-profile .ecp-medical span {
  display: block;
  color: #C43C3C;
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 4px;
}
[data-theme="dark"] .editor-client-profile .ecp-medical span { color: #FFB4B4; }
.editor-client-profile .ecp-medical p {
  margin: 0;
  color: var(--text);
  font-size: .85rem;
  line-height: 1.45;
}
@media (max-width: 640px) {
  .editor-client-profile .ecp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .editor-client-profile .ecp-item.wide { grid-column: span 2; }
}

/* ============================================================
   ONBOARDING WIZARD — step-by-step profile setup
   ============================================================ */

.wiz-wrap {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}
.wiz-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 200px);
  padding: 0 4px;
}

/* Topbar: back + progress ring */
.wiz-topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  min-height: 60px;
}
.wiz-back {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 0;
  background: color-mix(in srgb, var(--surface-alt) 60%, var(--surface));
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease;
  opacity: 0;
  pointer-events: none;
}
.wiz-back.is-visible { opacity: 1; pointer-events: auto; }
.wiz-back:hover { background: var(--surface-alt); transform: translateX(-2px); }
.wiz-back svg { width: 20px; height: 20px; }

.wiz-progress-ring {
  position: relative;
  width: 56px; height: 56px;
  flex-shrink: 0;
  margin-left: auto;
  margin-right: auto;
  transform: translateX(-24px); /* centre optically vs. back button */
}
.wiz-progress-ring svg {
  width: 100%; height: 100%;
  transform: rotate(-90deg);
}
.wiz-progress-ring .ring-bg {
  fill: none;
  stroke: color-mix(in srgb, var(--border) 70%, transparent);
  stroke-width: 4;
}
.wiz-progress-ring .ring-fg {
  fill: none;
  stroke: var(--primary);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 0 100;
  transition: stroke-dasharray .45s cubic-bezier(.2,.75,.25,1);
}
.wiz-step-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
}
.wiz-count-lbl {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  visibility: hidden; /* hidden by default — ring shows the info */
}

/* Title */
.wiz-title-block {
  margin-bottom: 32px;
}
.wiz-title {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: clamp(2rem, 6vw, 2.75rem);
  letter-spacing: -.035em;
  line-height: 1.05;
  color: var(--text);
  text-transform: uppercase;
}
.wiz-title em {
  font-style: normal;
  color: var(--primary);
}
.wiz-sub {
  margin: 12px 0 0;
  color: var(--text-muted);
  font-size: .95rem;
  line-height: 1.5;
}

/* Body area (flexible) */
.wiz-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: 8px 0;
  animation: wizStepIn .35s cubic-bezier(.2,.75,.25,1) both;
}
@keyframes wizStepIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Number step (age/height/weight) */
.wiz-number {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.wiz-num-display {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  padding: 32px 24px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface-alt) 55%, var(--surface));
  border: 1.5px solid color-mix(in srgb, var(--primary) 45%, var(--border));
  box-shadow: 0 12px 40px -18px color-mix(in srgb, var(--primary) 50%, transparent);
}
.wiz-num-val {
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: clamp(3.5rem, 12vw, 5rem);
  color: var(--primary);
  line-height: 1;
  letter-spacing: -.03em;
}
.wiz-num-unit {
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  color: var(--primary);
  letter-spacing: -.02em;
}
.wiz-num-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.wiz-num-btn {
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: 1.1rem;
  cursor: pointer;
  transition: transform .12s ease, background .18s ease, border-color .18s ease;
}
.wiz-num-btn:hover { background: var(--surface-alt); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.wiz-num-btn:active { transform: scale(.97); }

.wiz-num-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 65%, transparent);
  outline: none;
  cursor: pointer;
}
.wiz-num-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--primary);
  border: 3px solid var(--surface);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 40%, transparent);
  cursor: grab;
}
.wiz-num-slider::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--primary);
  border: 3px solid var(--surface);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 40%, transparent);
  cursor: grab;
}

.wiz-num-scale {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 28px;
  padding: 0 6px;
  gap: 2px;
}
.wiz-num-scale i {
  flex: 1;
  height: 8px;
  background: color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 1px;
  display: block;
}
.wiz-num-scale i.major {
  height: 18px;
  background: color-mix(in srgb, var(--text-muted) 45%, transparent);
}

/* Choice cards (sex/level/goal/activity) */
.wiz-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.wiz-choices.one-col { grid-template-columns: 1fr; }
.wiz-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1.5px solid var(--border);
  background: color-mix(in srgb, var(--surface-alt) 40%, var(--surface));
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: transform .16s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
  min-height: 60px;
  justify-content: center;
}
.wiz-choices:not(.one-col) .wiz-choice { align-items: center; text-align: center; }
.wiz-choice:hover {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  transform: translateY(-1px);
}
.wiz-choice.selected {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  box-shadow: 0 12px 32px -18px color-mix(in srgb, var(--primary) 60%, transparent);
}
.wiz-choice-label {
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -.01em;
}
.wiz-choice.selected .wiz-choice-label { color: var(--primary); }
.wiz-choice-sub {
  font-size: .82rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* Text / code inputs */
.wiz-text { padding: 8px 0; }
.wiz-textarea {
  width: 100%;
  min-height: 120px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1.5px solid var(--border);
  background: color-mix(in srgb, var(--surface-alt) 40%, var(--surface));
  color: var(--text);
  font-family: inherit;
  font-size: .95rem;
  line-height: 1.5;
  resize: vertical;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.wiz-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 15%, transparent);
}
.wiz-code-input {
  width: 100%;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1.5px solid var(--border);
  background: color-mix(in srgb, var(--surface-alt) 40%, var(--surface));
  color: var(--text);
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .05em;
  text-align: center;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.wiz-code-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 15%, transparent);
}

/* Help / error */
.wiz-help {
  margin: 14px 0 0;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--text-muted);
  text-align: center;
}
.wiz-err { margin: 12px 0 0; text-align: center; }

/* Footer */
.wiz-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 0 0;
  margin-top: auto;
}
.wiz-next {
  padding: 18px 24px;
  border-radius: 16px;
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .01em;
  background: var(--primary);
  color: #fff;
  border: 0;
  cursor: pointer;
  transition: transform .12s ease, background .18s ease, box-shadow .18s ease;
  box-shadow: 0 14px 32px -14px color-mix(in srgb, var(--primary) 60%, transparent);
}
.wiz-next:hover:not(:disabled) {
  background: color-mix(in srgb, var(--primary) 90%, #000);
  transform: translateY(-1px);
  box-shadow: 0 18px 40px -14px color-mix(in srgb, var(--primary) 70%, transparent);
}
.wiz-next:active:not(:disabled) { transform: translateY(0); }
.wiz-next:disabled { opacity: .6; cursor: not-allowed; }

.wiz-skip {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: .92rem;
  font-weight: 600;
  padding: 12px;
  cursor: pointer;
  text-align: center;
  border-radius: 12px;
  transition: color .18s ease, background .18s ease;
}
.wiz-skip:hover { color: var(--text); background: color-mix(in srgb, var(--surface-alt) 40%, transparent); }

/* Hide the role-shell brand once we're in the wizard to save space */
.role-shell:has(#step-details:not([style*="display: none"])) .brand { display: none; }

@media (max-width: 480px) {
  .wiz-shell { min-height: calc(100vh - 120px); }
  .wiz-topbar { margin-bottom: 20px; min-height: 52px; }
  .wiz-back { width: 42px; height: 42px; }
  .wiz-progress-ring { width: 50px; height: 50px; transform: translateX(-21px); }
  .wiz-step-num { font-size: .92rem; }
  .wiz-title-block { margin-bottom: 22px; }
  .wiz-title { font-size: clamp(1.7rem, 8vw, 2.2rem); }
  .wiz-num-display { padding: 26px 18px; border-radius: 20px; }
  .wiz-num-btn { padding: 13px 14px; font-size: 1rem; }
  .wiz-choice { padding: 16px 18px; min-height: 54px; }
  .wiz-choice-label { font-size: 1rem; }
  .wiz-next { padding: 16px 20px; font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .wiz-body { animation: none; }
  .wiz-progress-ring .ring-fg { transition: none; }
  .wiz-choice, .wiz-num-btn, .wiz-next { transition: none; }
}

/* ============================================================
   Mobile viewport min-height — dvh + JS-provided --app-h fallback.
   Kept minimal; tab bar styling lives in the mobile block above.
   ============================================================ */
@media (max-width: 900px) {
  html, body {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--bg);
  }
  .app-shell {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--bg);
  }
}

/* ============================================================
   FINAL HARD OVERRIDE — mobile bottom tab bar (Brambura pattern).
   Classic edge-to-edge fixed nav: white/dark blurred bg, thin
   border-top, safe-area padding for home-indicator, icon on top +
   short label below. Active tab uses brand primary color.
   ============================================================ */
@media (max-width: 900px) {
  html, body,
  html.ios-shell, body.ios-shell {
    background: var(--bg) !important;
  }

  /* Kill the floating FAB — we are back to a classic bottom bar. */
  #nav-fab,
  #nav-fab-menu,
  #nav-fab-backdrop { display: none !important; }

  /* The tab bar itself — pinned to viewport bottom (bottom: 0) with
     internal padding-bottom = safe-area so the labels sit above the
     home indicator while the bar bg extends to the physical edge. */
  .sidebar,
  aside.sidebar,
  body.ios-shell .sidebar,
  body.ios-shell aside.sidebar {
    display: flex !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    z-index: 40;
    flex-direction: row !important;
    padding: 0 0 env(safe-area-inset-bottom, 0px) 0 !important;
    margin: 0 !important;
    border: none !important;
    border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent) !important;
    border-radius: 0 !important;
    background: var(--surface) !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    box-shadow: none !important;
    min-height: 0 !important;
    height: auto !important;
    align-items: stretch !important;
    overflow: visible;
  }

  .sidebar .brand,
  .sidebar-role-badge,
  .sidebar-footer { display: none !important; }

  .sidebar .nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: space-around !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  .sidebar .nav-item {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 8px 4px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: var(--text-muted) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0;
    transition: color 0.15s ease !important;
    cursor: pointer;
    text-align: center;
  }
  .sidebar .nav-item:hover { background: transparent !important; }
  .sidebar .nav-item:active { transform: scale(0.96); }
  .sidebar .nav-item::before { display: none !important; }

  .sidebar .nav-item .icon {
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }
  .sidebar .nav-item .icon svg {
    width: 24px !important;
    height: 24px !important;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .sidebar .nav-item.active {
    color: var(--primary) !important;
    background: transparent !important;
  }
  .sidebar .nav-item.active .icon { background: transparent !important; }
  .sidebar .nav-item.active .icon svg { stroke-width: 2.2 !important; }

  /* Force short mobile label */
  .sidebar .lbl-full { display: none !important; }
  .sidebar .lbl-mobile { display: inline !important; }
  .sidebar .lbl {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.1;
  }

  /* Reserve room for the fixed bar (bar height ~54 + safe-area). */
  .app-shell,
  body.ios-shell .app-shell {
    padding-bottom: calc(54px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .main,
  body.ios-shell .main {
    padding-bottom: 0 !important;
  }
  .view,
  body.ios-shell .view,
  body.ios-shell .view.active {
    padding-bottom: 0 !important;
  }
}

/* ============================================
   ritm — bottom tabbar (mobile) + immersive shell
============================================ */

/* Immersive full-screen on mobile: content extends under the status bar
   and the tabbar respects the home indicator safe area. */
@media (max-width: 1024px) {
  html, body {
    background: #08241C;
    min-height: 100vh;
    min-height: 100dvh;
  }
  html[data-theme] body {
    background: var(--bg);
  }
  .app-shell {
    min-height: 100vh;
    min-height: 100dvh;
  }
  .main {
    padding-top: max(env(safe-area-inset-top), 44px);
  }
  /* Content must clear the floating tabbar (height + safe area). */
  .view,
  .view.active {
    padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
  }
  /* Hide the legacy topbar on mobile — brand + settings live inside each view. */
  .mobile-topbar {
    background: transparent;
    border: 0;
    padding-top: max(env(safe-area-inset-top), 12px);
  }
}

/* Tabbar container: floating rounded pill anchored to the bottom */
.tabbar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  display: none;
  align-items: center;
  justify-content: space-around;
  gap: 4px;
  height: 68px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-radius: 999px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 10px 30px rgba(10, 10, 20, 0.18),
    0 4px 12px rgba(10, 10, 20, 0.12);
  z-index: 9990;
}
[data-theme="dark"] .tabbar {
  background: rgba(11, 26, 21, 0.86);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 12px 32px rgba(0, 0, 0, 0.55),
    0 4px 10px rgba(0, 0, 0, 0.35);
}

.tabbar-item {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 4px 4px;
  background: transparent;
  border: 0;
  border-radius: 18px;
  color: #8A8F9C;
  font-family: var(--font-primary);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: color 0.18s var(--ease-out), transform 0.18s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
[data-theme="dark"] .tabbar-item { color: #7C818F; }

.tabbar-icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
}
.tabbar-icon svg { width: 100%; height: 100%; }

.tabbar-item.active {
  color: #0B1A15;
  font-weight: 700;
}
[data-theme="dark"] .tabbar-item.active { color: #FAFCFA; }

.tabbar-item:active { transform: scale(0.94); }
.tabbar-item:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Center Play CTA — dark filled circle, elevated above the pill */
.tabbar-cta {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: #0B1A15;
  color: #FFFFFF;
  margin: 0 4px;
  transform: translateY(-2px);
  box-shadow:
    0 10px 24px rgba(11, 26, 21, 0.32),
    0 4px 10px rgba(11, 26, 21, 0.24);
  padding: 0;
}
.tabbar-cta .tabbar-icon {
  width: 22px;
  height: 22px;
  margin-left: 2px; /* optical alignment for the play triangle */
}
.tabbar-cta:active { transform: translateY(-2px) scale(0.94); }
[data-theme="dark"] .tabbar-cta {
  background: var(--primary);
  color: #08241C;
  box-shadow:
    0 10px 24px color-mix(in srgb, var(--primary) 40%, transparent),
    0 4px 10px color-mix(in srgb, var(--primary) 28%, transparent);
}

/* Only show tabbar on tablet / phone — desktop keeps the sidebar. */
@media (max-width: 1024px) {
  .tabbar { display: flex; }
}
@media (min-width: 1025px) {
  .tabbar { display: none !important; }
}

/* ============================================================
   MOBILE SHELL — single, edge-to-edge navigation and robust media.
   This is intentionally the final cascade layer: older experiments above
   defined both a sidebar-nav and a floating tabbar at the same breakpoint.
   ============================================================ */
img,
video,
canvas,
svg {
  max-width: 100%;
}

.avatar img,
.photo-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 900px) {
  html,
  body {
    width: 100%;
    min-height: 100%;
    min-height: 100dvh;
    overflow-x: clip;
  }

  body {
    font-family: var(--font-secondary) !important;
  }

  .app-shell,
  body.ios-shell .app-shell {
    display: block !important;
    width: 100%;
    min-height: 100dvh;
    padding: 0 0 calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .main,
  body.ios-shell .main {
    width: 100%;
    min-height: calc(100dvh - 64px - env(safe-area-inset-bottom, 0px));
    padding: max(16px, env(safe-area-inset-top, 0px)) 14px 20px !important;
    overflow-x: clip;
  }

  .mobile-topbar,
  body.ios-shell .mobile-topbar,
  .sidebar,
  aside.sidebar,
  body.ios-shell .sidebar {
    display: none !important;
  }

  .view,
  .view.active,
  body.ios-shell .view,
  body.ios-shell .view.active {
    width: 100%;
    min-width: 0;
    padding-bottom: 20px !important;
  }

  .tabbar,
  body.ios-shell .tabbar {
    display: flex !important;
    position: fixed !important;
    inset: auto 14px calc(10px + env(safe-area-inset-bottom, 0px)) 14px !important;
    width: auto;
    height: 68px;
    padding: 6px 10px !important;
    gap: 2px;
    border: 1px solid color-mix(in srgb, #fff 62%, transparent);
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--surface) 84%, transparent) !important;
    box-shadow: 0 18px 46px rgba(10, 10, 20, .22), 0 4px 14px rgba(10, 10, 20, .12), inset 0 1px 0 rgba(255,255,255,.58) !important;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    transform: translateY(0);
    opacity: 1;
    transition: background .2s ease, box-shadow .2s ease, transform .2s var(--ease-out);
    will-change: transform;
  }

  [data-theme="dark"] .tabbar,
  [data-theme="dark"] body.ios-shell .tabbar {
    border-color: rgba(255,255,255,.09);
    background: rgba(11, 26, 21,.78) !important;
    box-shadow: 0 18px 46px rgba(0,0,0,.46), 0 4px 14px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08) !important;
  }

  .tabbar.tabbar-scrolled,
  body.ios-shell .tabbar.tabbar-scrolled {
    transform: translateY(-2px);
    background: color-mix(in srgb, var(--surface) 74%, transparent) !important;
    box-shadow: 0 22px 54px rgba(10,10,20,.28), 0 5px 18px rgba(10,10,20,.16), inset 0 1px 0 rgba(255,255,255,.58) !important;
  }

  body::after {
    content: none;
    position: fixed;
    z-index: 9980;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(112px + env(safe-area-inset-bottom, 0px));
    pointer-events: none;
    opacity: 0;
    background: none;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 48%, #000 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 48%, #000 100%);
    transition: opacity .22s ease;
  }

  body.tabbar-page-scrolled::after {
    opacity: 1;
  }

  .tabbar-item {
    min-height: 52px;
    padding: 5px 2px 4px;
    border-radius: 12px;
    font-family: var(--font-primary);
    font-size: clamp(8.5px, 2.55vw, 10px);
    line-height: 1;
  }

  .tabbar-item.active {
    color: var(--primary) !important;
  }

  .tabbar-lbl {
    display: block;
    width: 100%;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tabbar-cta {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    min-height: 56px;
    margin: -4px 7px;
    border-radius: 50%;
    background: var(--text) !important;
    color: var(--surface) !important;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--text) 30%, transparent) !important;
    transform: translateY(-1px);
  }

  .tabbar-cta:active {
    transform: translateY(-1px) scale(.94);
  }

  .card,
  .stat-card,
  .hero-card,
  .list-item {
    max-width: 100%;
    min-width: 0;
  }

  .row {
    min-width: 0;
  }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .tabbar,
  body.ios-shell .tabbar {
    transition: none;
  }
}

@media (min-width: 901px) {
  .tabbar { display: none !important; }
}

/* 2026 UI refinement — stable logo, polished auth/roles, compacting tabs */
.auth-eyebrow { display:block;margin-bottom:10px;color:var(--primary);font-size:.68rem;font-weight:850;letter-spacing:.16em; }
.auth-panel { position:relative;background:radial-gradient(circle at 85% 12%,color-mix(in srgb,var(--primary) 10%,transparent),transparent 34%),var(--bg); }
.auth-card { max-width:480px;padding:34px;border:1px solid var(--border);border-radius:28px;background:color-mix(in srgb,var(--surface) 94%,transparent);box-shadow:0 24px 70px rgba(15,20,35,.10); }
.auth-card input { min-height:52px;padding-inline:16px;border-width:1px;border-radius:15px;background:var(--surface-alt); }
.auth-card .btn-block { min-height:52px;border-radius:15px; }
.role-shell { justify-content:center;background:radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--primary) 12%,transparent),transparent 36%),var(--bg); }
#step-role { width:min(100%,920px); }
.role-grid { grid-template-columns:repeat(2,minmax(0,1fr));max-width:860px;gap:18px; }
.role-card { min-height:250px;padding:30px;border-width:1px;border-radius:26px;box-shadow:var(--shadow-sm); }
.role-card .icon { width:64px;height:64px;border-radius:20px; }
.role-card .icon svg { width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
.role-card h3 { font-size:1.45rem; }
.role-card p { max-width:36ch;line-height:1.65; }

@media (max-width:900px) {
  .app-shell,body.ios-shell .app-shell { padding-bottom:calc(94px + env(safe-area-inset-bottom,0px)) !important; }
  body::after,body.tabbar-page-scrolled::after { display:none !important; }
  .tabbar,body.ios-shell .tabbar {
    inset:auto 14px calc(10px + env(safe-area-inset-bottom,0px)) 14px !important;
    height:68px;padding:7px 8px !important;border:1px solid rgba(255,255,255,.46);
    border-radius:24px !important;background:rgba(255,255,255,.88) !important;
    box-shadow:0 14px 38px rgba(15,20,35,.18),inset 0 1px rgba(255,255,255,.72) !important;
    -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
    transition:inset .24s var(--ease-out),height .24s var(--ease-out),border-radius .24s var(--ease-out),background .2s ease,box-shadow .2s ease !important;
  }
  [data-theme="dark"] .tabbar,[data-theme="dark"] body.ios-shell .tabbar {
    border-color:rgba(255,255,255,.09);background:rgba(11, 26, 21,.90) !important;
    box-shadow:0 14px 38px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.06) !important;
  }
  .tabbar.tabbar-scrolled,body.ios-shell .tabbar.tabbar-scrolled {
    inset:auto 30px calc(6px + env(safe-area-inset-bottom,0px)) 30px !important;
    height:54px;padding:4px 7px !important;border-radius:19px !important;transform:none;
    background:rgba(255,255,255,.82) !important;box-shadow:0 9px 26px rgba(15,20,35,.16) !important;
  }
  [data-theme="dark"] .tabbar.tabbar-scrolled { background:rgba(11, 26, 21,.86) !important; }
  .tabbar-item { min-height:50px;gap:3px;font-size:clamp(8px,2.3vw,9.5px);transition:min-height .24s var(--ease-out),gap .24s var(--ease-out),font-size .24s var(--ease-out),color .16s ease !important; }
  .tabbar-icon { width:22px;height:22px;transition:width .24s var(--ease-out),height .24s var(--ease-out); }
  .tabbar-scrolled .tabbar-item { min-height:42px;gap:1px;font-size:8px; }
  .tabbar-scrolled .tabbar-icon { width:19px;height:19px; }
  .auth-panel { min-height:100dvh;padding:max(24px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom)); }
  .auth-card { padding:26px 20px;border-radius:24px; }
  .auth-mobile-brand { margin-bottom:34px; }
  .role-shell { justify-content:flex-start;padding:max(28px,env(safe-area-inset-top)) 16px 34px; }
  .role-grid { grid-template-columns:1fr; }
  .role-card { min-height:0;padding:22px; }
}

/* Liquid-glass icon-only tab bar */
@media (max-width:900px) {
  .app-shell,body.ios-shell .app-shell { padding-bottom:calc(108px + env(safe-area-inset-bottom,0px)) !important; }

  .tabbar,body.ios-shell .tabbar {
    inset:auto 12px calc(12px + env(safe-area-inset-bottom,0px)) 12px !important;
    height:78px;
    padding:9px 12px !important;
    gap:4px;
    overflow:hidden;
    isolation:isolate;
    border:1px solid rgba(255,255,255,.62);
    border-radius:999px !important;
    background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(255,255,255,.46)) !important;
    box-shadow:0 20px 50px rgba(12,18,32,.22),0 6px 18px rgba(12,18,32,.12),inset 0 1px 1px rgba(255,255,255,.9),inset 0 -1px rgba(255,255,255,.25) !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    transition:left .42s cubic-bezier(.22,1,.36,1),right .42s cubic-bezier(.22,1,.36,1),bottom .42s cubic-bezier(.22,1,.36,1),height .42s cubic-bezier(.22,1,.36,1),border-radius .42s cubic-bezier(.22,1,.36,1),box-shadow .35s ease !important;
  }

  .tabbar::before {
    content:"";
    position:absolute;
    z-index:-1;
    inset:1px 10% auto;
    height:46%;
    border-radius:999px;
    background:linear-gradient(180deg,rgba(255,255,255,.58),transparent);
    opacity:.72;
    pointer-events:none;
  }

  [data-theme="dark"] .tabbar,[data-theme="dark"] body.ios-shell .tabbar {
    border-color:rgba(255,255,255,.14);
    background:linear-gradient(145deg,rgba(52,52,72,.78),rgba(24,24,38,.66)) !important;
    box-shadow:0 22px 54px rgba(0,0,0,.46),0 7px 18px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.16),inset 0 -1px rgba(255,255,255,.04) !important;
  }

  [data-theme="dark"] .tabbar::before { opacity:.22; }

  .tabbar.tabbar-scrolled,body.ios-shell .tabbar.tabbar-scrolled {
    inset:auto 38px calc(7px + env(safe-area-inset-bottom,0px)) 38px !important;
    height:58px;
    padding:5px 9px !important;
    border-radius:999px !important;
    background:linear-gradient(145deg,rgba(255,255,255,.68),rgba(255,255,255,.42)) !important;
    box-shadow:0 13px 34px rgba(12,18,32,.2),inset 0 1px rgba(255,255,255,.78) !important;
  }

  [data-theme="dark"] .tabbar.tabbar-scrolled { background:linear-gradient(145deg,rgba(48,48,68,.75),rgba(22,22,35,.68)) !important; }

  .tabbar-lbl { display:none !important; }

  .tabbar-item {
    min-height:56px;
    padding:0 !important;
    gap:0;
    border-radius:50% !important;
    overflow:visible;
    transition:color .24s ease,transform .32s cubic-bezier(.34,1.56,.64,1),min-height .42s cubic-bezier(.22,1,.36,1) !important;
  }

  .tabbar-item:active { transform:scale(.82) !important; }
  .tabbar-icon {
    width:26px;
    height:26px;
    padding:0;
    border-radius:50%;
    transition:width .42s cubic-bezier(.22,1,.36,1),height .42s cubic-bezier(.22,1,.36,1),padding .3s ease,background .3s ease,box-shadow .3s ease,transform .36s cubic-bezier(.34,1.56,.64,1) !important;
  }

  .tabbar-item.active .tabbar-icon {
    width:46px;
    height:46px;
    padding:10px;
    background:color-mix(in srgb,var(--primary) 18%,rgba(255,255,255,.5));
    box-shadow:inset 0 1px rgba(255,255,255,.65),0 7px 18px color-mix(in srgb,var(--primary) 22%,transparent);
    transform:translateY(-1px);
  }

  .tabbar-scrolled .tabbar-item { min-height:46px; }
  .tabbar-scrolled .tabbar-icon { width:21px;height:21px; }
  .tabbar-scrolled .tabbar-item.active .tabbar-icon { width:39px;height:39px;padding:9px; }
}

@media (max-width:900px) and (prefers-reduced-motion:reduce) {
  .tabbar,.tabbar-item,.tabbar-icon { transition:none !important; }
}

/* Public role choice */
.public-role-page,.validation-page{min-height:100dvh;background:var(--bg)}
.public-role-shell{width:min(100%,980px);min-height:100dvh;margin:auto;display:flex;flex-direction:column;justify-content:center;padding:44px 24px}.public-brand{display:flex;align-items:center;gap:10px;margin-bottom:clamp(42px,8vh,84px);color:var(--text);text-decoration:none}.public-role-copy{text-align:center;margin-bottom:30px}.public-role-copy h1{margin:6px 0 10px;font-size:clamp(2rem,5vw,3.6rem)}.public-role-copy p{font-size:1rem}.public-role-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.public-role-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;min-height:180px;padding:26px;border:1px solid var(--border);border-radius:26px;background:var(--surface);box-shadow:var(--shadow-sm);color:var(--text);text-decoration:none;transition:transform .25s var(--ease-out),border-color .2s,box-shadow .25s}.public-role-card:hover{transform:translateY(-4px);border-color:var(--primary);box-shadow:var(--shadow-lg)}.public-role-icon{width:62px;height:62px;display:grid;place-items:center;border-radius:20px;background:var(--primary-soft);color:var(--primary)}.public-role-icon svg,.validation-icon svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.public-role-card small,.public-role-card strong,.public-role-card p{display:block}.public-role-card small{margin-bottom:5px;color:var(--primary);font-size:.62rem;font-weight:850;letter-spacing:.12em}.public-role-card strong{font-size:1.35rem}.public-role-card p{margin-top:4px;font-size:.82rem;line-height:1.5}.public-role-card>b{font-size:1.4rem;color:var(--primary)}.public-role-login{margin-top:28px;text-align:center;font-size:.86rem}
/* Coach validation */
.validation-page{display:grid;place-items:center;padding:24px}.validation-shell{width:min(100%,480px);padding:34px;border:1px solid var(--border);border-radius:28px;background:var(--surface);box-shadow:var(--shadow-lg)}.validation-shell>.brand{display:flex;align-items:center;gap:10px;margin-bottom:36px}.validation-icon{width:64px;height:64px;display:grid;place-items:center;margin-bottom:22px;border-radius:21px;background:var(--primary-soft);color:var(--primary)}.validation-shell h1{margin:7px 0 12px;font-size:2rem}.validation-shell>p{margin-bottom:22px}.validation-shell form label{display:block;margin-bottom:7px;color:var(--text-muted);font-size:.78rem;font-weight:750}.validation-shell input{text-align:center;font-size:1.15rem!important;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.validation-shell form .btn{margin:12px 0 10px}
/* Admin */
@media(max-width:700px){.public-role-shell{justify-content:flex-start;padding:28px 16px}.public-brand{margin-bottom:46px}.public-role-grid{grid-template-columns:1fr}.public-role-card{min-height:140px;padding:20px}.validation-shell{padding:26px 20px}}

/* ritm Control Centre */

/* Minimal admin requests screen */
.admin-clean-page{min-height:100dvh;background:#08241C;color:#f2f6f7}

/* Move the public role choice into a calmer vertical position */
@media(min-width:701px){.public-role-shell{padding-top:clamp(72px,10vh,120px)}.public-brand{margin-bottom:clamp(62px,9vh,100px)}}
@media(max-width:700px){.public-role-shell{padding-top:max(46px,env(safe-area-inset-top))}.public-brand{margin-bottom:62px}}

/* Simple, flat mobile navigation */
@media(max-width:900px){
  .app-shell,body.ios-shell .app-shell{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px)) !important}
  .tabbar,body.ios-shell .tabbar,.tabbar.tabbar-scrolled,body.ios-shell .tabbar.tabbar-scrolled{
    inset:auto 14px calc(10px + env(safe-area-inset-bottom,0px)) 14px !important;
    height:64px !important;
    padding:7px 9px !important;
    gap:2px !important;
    overflow:visible !important;
    border:1px solid var(--border) !important;
    border-radius:20px !important;
    background:rgba(255,255,255,.96) !important;
    background-image:none !important;
    box-shadow:0 8px 24px rgba(20,27,38,.12) !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    transform:none !important;
    transition:none !important;
  }
  [data-theme="dark"] .tabbar,[data-theme="dark"] body.ios-shell .tabbar,
  [data-theme="dark"] .tabbar.tabbar-scrolled,[data-theme="dark"] body.ios-shell .tabbar.tabbar-scrolled{
    border-color:rgba(255,255,255,.1) !important;
    background:#191923 !important;
    background-image:none !important;
    box-shadow:0 8px 24px rgba(0,0,0,.32) !important;
  }
  .tabbar::before,.tabbar::after{display:none !important;content:none !important}
  .tabbar-item,.tabbar-scrolled .tabbar-item{
    min-height:48px !important;
    padding:0 !important;
    border-radius:14px !important;
    background:transparent !important;
    color:var(--text-muted) !important;
    transform:none !important;
    transition:background-color .16s ease,color .16s ease !important;
  }
  .tabbar-item:active{transform:scale(.94) !important}
  .tabbar-icon,.tabbar-scrolled .tabbar-icon,
  .tabbar-item.active .tabbar-icon,.tabbar-scrolled .tabbar-item.active .tabbar-icon{
    width:24px !important;height:24px !important;padding:0 !important;
    border-radius:0 !important;background:transparent !important;
    box-shadow:none !important;transform:none !important;
  }
  .tabbar-item.active{color:var(--primary) !important;background:var(--primary-soft) !important}
  .tabbar-icon svg{stroke-width:1.8 !important}
  .tabbar-item.active .tabbar-icon svg{stroke-width:2.2 !important}
  .tabbar-lbl{display:none !important}
}

@media(max-width:900px){
  .tabbar,body.ios-shell .tabbar,.tabbar.tabbar-scrolled,body.ios-shell .tabbar.tabbar-scrolled{
    border-radius:32px !important;
    padding-inline:8px !important;
  }
  .tabbar-item,.tabbar-scrolled .tabbar-item{border-radius:24px !important}
  .tabbar-item.active{border-radius:24px !important}
}

/* Admin coach directory */

/* iOS-style directional collapse: pill -> blue circle on scroll down */
@media(max-width:900px){
  .tabbar,body.ios-shell .tabbar{
    width:calc(100% - 28px) !important;
    transition:width .28s cubic-bezier(.32,.72,0,1),height .28s cubic-bezier(.32,.72,0,1),border-radius .28s cubic-bezier(.32,.72,0,1),background-color .2s ease,box-shadow .2s ease,right .28s cubic-bezier(.32,.72,0,1),padding .28s cubic-bezier(.32,.72,0,1) !important;
  }
  .tabbar-item{
    transition:flex-basis .24s cubic-bezier(.32,.72,0,1),width .24s cubic-bezier(.32,.72,0,1),opacity .14s ease,transform .24s cubic-bezier(.32,.72,0,1),color .16s ease !important;
  }
  .tabbar.tabbar-collapsed,body.ios-shell .tabbar.tabbar-collapsed{
    left:auto !important;right:14px !important;
    width:58px !important;height:58px !important;
    padding:5px !important;border:0 !important;border-radius:50% !important;
    background:var(--primary) !important;background-image:none !important;
    box-shadow:0 10px 26px color-mix(in srgb,var(--primary) 38%,transparent) !important;
  }
  .tabbar-collapsed .tabbar-item:not(.active){
    flex:0 0 0 !important;width:0 !important;min-width:0 !important;
    opacity:0 !important;overflow:hidden !important;pointer-events:none !important;
    transform:scale(.55) !important;
  }
  .tabbar-collapsed .tabbar-item.active{
    flex:1 1 48px !important;width:48px !important;min-width:48px !important;min-height:48px !important;
    border-radius:50% !important;background:transparent !important;color:#fff !important;
  }
  .tabbar-collapsed .tabbar-item.active .tabbar-icon{width:25px !important;height:25px !important;color:#fff !important}
}
@media(max-width:900px) and (prefers-reduced-motion:reduce){.tabbar,.tabbar-item{transition:none !important}}

/* Crisp tap feedback inspired by native social-app tabs */
@media(max-width:900px){
  .tabbar-item{transition:color .16s ease,background-color .2s ease !important}
  .tabbar-item .tabbar-icon svg{transform-origin:center;will-change:transform}
  .tabbar-item.tabbar-tapped .tabbar-icon svg{animation:ritm-tab-pop .3s cubic-bezier(.2,.8,.2,1)}
  .tabbar-item.tabbar-tapped{animation:ritm-tab-surface .3s ease}
}
@keyframes ritm-tab-pop{
  0%{transform:scale(1)}
  30%{transform:scale(.72)}
  68%{transform:scale(1.13)}
  100%{transform:scale(1)}
}
@keyframes ritm-tab-surface{
  0%{filter:brightness(1)}
  45%{filter:brightness(.94)}
  100%{filter:brightness(1)}
}
@media(max-width:900px) and (prefers-reduced-motion:reduce){.tabbar-item.tabbar-tapped,.tabbar-item.tabbar-tapped .tabbar-icon svg{animation:none !important}}

/* Compact verified-coach picker */

/* Coach finder is a centered dialog, never a bottom sheet */
@keyframes coach-dialog-in{from{opacity:0;transform:scale(.94) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}

/* Role selection with an intentional confirmation step */
.role-flow .public-role-card{position:relative;width:100%;font:inherit;text-align:left;cursor:pointer;appearance:none;transition:border-color .22s ease,background-color .22s ease,transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease}
.role-flow .public-role-card:hover{transform:translateY(-2px)}
.role-flow .public-role-card.selected{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 8%,var(--surface));box-shadow:0 12px 34px color-mix(in srgb,var(--primary) 12%,transparent);transform:translateY(-2px)}
.role-check{position:absolute;top:14px;right:14px;display:grid;width:24px;height:24px;place-items:center;border-radius:50%;background:var(--primary);color:#fff;font-size:.7rem;opacity:0;transform:scale(.65);transition:opacity .18s ease,transform .28s cubic-bezier(.2,1.4,.35,1)}
.public-role-card.selected .role-check{opacity:1;transform:scale(1)}
.role-continue-wrap{max-height:0;margin-top:0;overflow:hidden;opacity:0;transform:translateY(10px);transition:max-height .32s ease,margin .32s ease,opacity .24s ease,transform .32s cubic-bezier(.2,.8,.2,1)}
.role-continue-wrap.visible{max-height:70px;margin-top:18px;opacity:1;transform:none}
.role-continue{display:flex;width:100%;min-height:56px;align-items:center;justify-content:center;gap:12px;border:0;border-radius:18px;background:var(--primary);color:#fff;font:800 .75rem/1 Montserrat,sans-serif;cursor:pointer;box-shadow:0 14px 32px color-mix(in srgb,var(--primary) 28%,transparent);transition:transform .18s ease,filter .18s ease}.role-continue:active{transform:scale(.975)}
.page-leaving .public-role-shell{animation:role-flow-out .3s cubic-bezier(.4,0,1,1) both}@keyframes role-flow-out{to{opacity:0;transform:translateX(-22px) scale(.985)}}

/* Client profile onboarding */
.onboarding-page{min-height:100dvh;margin:0;overflow-x:hidden;background:#090d10;color:#EEF5F1;font-family:var(--font-primary)}.onboarding-page::before{content:"";position:fixed;inset:-25%;pointer-events:none;background:radial-gradient(circle at 75% 5%,rgba(65,190,204,.13),transparent 31%),radial-gradient(circle at 0 100%,rgba(65,190,204,.07),transparent 30%)}
.onboarding-shell{position:relative;display:flex;width:min(100%,920px);min-height:100dvh;margin:auto;padding:max(24px,env(safe-area-inset-top)) clamp(20px,5vw,54px) max(18px,env(safe-area-inset-bottom));flex-direction:column}
.onboarding-head{display:flex;align-items:center;justify-content:space-between}.onboarding-brand{display:flex;align-items:center;gap:10px;font-size:.78rem;font-weight:900;letter-spacing:.13em}.onboarding-brand img{width:27px;height:27px}.onboarding-progress{position:relative;display:grid;width:54px;height:54px;place-items:center}.onboarding-progress svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}.onboarding-progress circle{fill:none;stroke:rgba(255,255,255,.09);stroke-width:3}.onboarding-progress circle+circle{stroke:#59c8d3;stroke-linecap:round;transition:stroke-dashoffset .45s cubic-bezier(.2,.8,.2,1)}.onboarding-progress strong{font-size:.58rem;letter-spacing:-.02em}
.onboarding-stage{display:flex;min-height:0;flex:1;align-items:center;justify-content:center;padding:32px 0 24px}.onboarding-step{display:none;width:min(100%,650px);margin:auto}.onboarding-step.active{display:block;animation:onboarding-in .42s cubic-bezier(.16,1,.3,1) both}@keyframes onboarding-in{from{opacity:0;transform:translateX(calc(var(--direction,1)*34px)) scale(.985)}to{opacity:1;transform:none}}
.onboarding-kicker{display:block;margin-bottom:10px;color:#62ccd6;font-size:.6rem;font-weight:850;letter-spacing:.2em}.onboarding-step h1{max-width:620px;margin:0;color:#f6f8f9;font-size:clamp(2rem,6vw,3.65rem);line-height:.98;letter-spacing:-.055em}.onboarding-step>p{max-width:520px;margin:15px 0 30px;color:#839096;font-size:.77rem;line-height:1.65}.onboarding-step label{display:block;color:#9da8ac;font-size:.61rem;font-weight:750;letter-spacing:.03em}.onboarding-step label>span{float:right;color:#5d696e;font-weight:600}
.onboarding-step input,.onboarding-step select,.onboarding-step textarea{display:block;width:100%;margin-top:9px;border:1px solid rgba(255,255,255,.1);border-radius:16px;outline:0;background:#0B1A15;color:#EEF5F1;font:650 .87rem Montserrat,sans-serif;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}.onboarding-step input,.onboarding-step select{height:56px;padding:0 17px}.onboarding-step textarea{min-height:96px;padding:16px;resize:vertical}.onboarding-step input:focus,.onboarding-step select:focus,.onboarding-step textarea:focus{border-color:#54c7d2;background:#131d21;box-shadow:0 0 0 4px rgba(84,199,210,.09)}
.onboarding-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.onboarding-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}.onboarding-options{display:grid;gap:9px}.onboarding-options.two{grid-template-columns:1fr 1fr;margin-bottom:18px}.onboarding-choice-grid button,.onboarding-options button{min-height:58px;padding:12px 15px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:#0B1A15;color:#dce2e4;font:700 .72rem Montserrat,sans-serif;text-align:left;cursor:pointer;transition:transform .18s ease,border-color .18s ease,background-color .18s ease,color .18s ease}.onboarding-choice-grid button{text-align:center}.onboarding-options button strong,.onboarding-options button small{display:block}.onboarding-options button small{margin-top:4px;color:#637178;font-size:.56rem}.onboarding-choice-grid button.selected,.onboarding-options button.selected{border-color:#58c9d4;background:rgba(88,201,212,.12);color:#6bd4de;transform:scale(.99)}
.onboarding-actions{display:flex;min-height:58px;align-items:center;justify-content:space-between;gap:12px}.onboarding-actions button{height:48px;padding:0 18px;border:0;border-radius:15px;font:800 .66rem Montserrat,sans-serif;cursor:pointer}.onboarding-actions #ob-back{background:transparent;color:#7e8b90}.onboarding-actions #ob-next{min-width:132px;background:#EEF5F1;color:#0b1013}.onboarding-actions #ob-next b{margin-left:8px;font-size:.9rem}.onboarding-actions #ob-next:disabled{opacity:.55}.onboarding-actions #save-state{color:#566369;font-size:.54rem}
.onboarding-result{text-align:center}.onboarding-result>img{width:52px;height:52px;margin-bottom:22px}.onboarding-result .onboarding-kicker{margin-bottom:12px}.onboarding-result h1{margin:auto}.onboarding-result>p{margin:14px auto 24px}.onboarding-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px}.onboarding-metrics>div{padding:20px 12px;border:1px solid rgba(255,255,255,.09);border-radius:20px;background:#0B1A15}.onboarding-metrics span,.onboarding-metrics small{display:block;color:#4F6F63;font-size:.56rem}.onboarding-metrics strong{display:block;margin:6px 0 3px;color:#6bd2dc;font-size:1.7rem}.onboarding-result>button{width:100%;height:56px;margin-top:14px;border:0;border-radius:17px;background:#5bcad5;color:#071012;font:850 .7rem Montserrat,sans-serif;cursor:pointer}.onboarding-result>button span{margin-left:8px}.onboarding-step.shake{animation:onboarding-shake .32s ease}@keyframes onboarding-shake{25%{transform:translateX(-7px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}}.onboarding-exit .onboarding-shell{animation:onboarding-exit .3s ease-in both}@keyframes onboarding-exit{to{opacity:0;transform:scale(.98)}}
@media(max-width:600px){.onboarding-shell{padding-left:18px;padding-right:18px}.onboarding-stage{align-items:flex-start;padding-top:clamp(45px,12vh,92px)}.onboarding-step h1{font-size:clamp(2rem,10vw,2.8rem)}.onboarding-step>p{margin:12px 0 23px;font-size:.69rem}.onboarding-actions #save-state{display:none}.onboarding-fields{gap:8px}.onboarding-options button{min-height:54px}.onboarding-metrics strong{font-size:1.45rem}}
@media(max-height:690px){.onboarding-stage{padding-top:24px;align-items:flex-start}.onboarding-step h1{font-size:2rem}.onboarding-step>p{margin:9px 0 17px}.onboarding-options{gap:6px}.onboarding-options button{min-height:48px;padding:8px 13px}.onboarding-step input,.onboarding-step select{height:50px}}
@media(prefers-reduced-motion:reduce){.onboarding-step.active,.onboarding-exit .onboarding-shell,.page-leaving .public-role-shell{animation:none}.onboarding-progress circle+circle{transition:none}}

/* Unified client profile */
.profile-panel-content[hidden]{display:none!important}.profile-panel-content{animation:profile-panel-in .28s cubic-bezier(.2,.8,.2,1) both}@keyframes profile-panel-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* Clear post-request state */
.coach-request-sent,.coach-request-sent:disabled{border:1px solid color-mix(in srgb,var(--success) 35%,var(--border))!important;background:color-mix(in srgb,var(--success) 12%,var(--surface))!important;color:var(--success)!important;opacity:1!important;cursor:default!important}

/* Modern coach details sheet */
@keyframes coach-profile-in{from{opacity:0;transform:translateY(12px) scale(.965)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.profile-panel-content{animation:none}}

/* Supplied monochrome ritm mark: preserve it and keep it legible on dark surfaces. */

/* User-selectable ritm accent palette */
[data-accent="blue"]{--primary:#3478F6;--primary-hover:#2365db;--primary-fg:#fff;--primary-soft:rgba(52,120,246,.14)}
[data-accent="violet"]{--primary:#8257E6;--primary-hover:#7042d5;--primary-fg:#fff;--primary-soft:rgba(130,87,230,.14)}
[data-accent="rose"]{--primary:#E84D8A;--primary-hover:#cf3976;--primary-fg:#fff;--primary-soft:rgba(232,77,138,.14)}
[data-accent="orange"]{--primary:#F28C35;--primary-hover:#da7420;--primary-fg:#17110b;--primary-soft:rgba(242,140,53,.15)}
[data-accent="green"]{--primary:#24A979;--primary-hover:#168e63;--primary-fg:#fff;--primary-soft:rgba(36,169,121,.14)}
[data-accent="turquoise"]{--primary:#1EC1CB;--primary-hover:#189AA3;--primary-fg:#10111a;--primary-soft:rgba(30,193,203,.14)}
[data-theme="dark"][data-accent="turquoise"]{--primary-hover:#5DD5DD;--primary-fg:#0e0e17;--primary-soft:rgba(30,193,203,.16)}

.profile-personalize{margin-bottom:18px;padding:18px;border:1px solid var(--border);border-radius:20px;background:var(--surface);box-shadow:var(--shadow-sm)}.profile-personalize header strong{display:block;margin-top:3px;font-size:.92rem}.profile-personalize header p{margin:5px 0 15px;color:var(--text-soft);font-size:.64rem}
.profile-preference-list{margin-top:16px;border-top:1px solid var(--border)}.profile-preference-list label{display:flex;min-height:58px;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--border);cursor:pointer}.profile-preference-list label>span strong,.profile-preference-list label>span small{display:block}.profile-preference-list label>span strong{font-size:.7rem}.profile-preference-list label>span small{margin-top:3px;color:var(--text-soft);font-size:.55rem}.profile-preference-list input{position:absolute;opacity:0;pointer-events:none}.profile-preference-list label>i{position:relative;width:42px;height:24px;flex:0 0 42px;border-radius:99px;background:var(--border-strong);transition:.2s ease}.profile-preference-list label>i::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.16);transition:.22s cubic-bezier(.2,.8,.2,1)}.profile-preference-list input:checked+i{background:var(--primary)}.profile-preference-list input:checked+i::after{transform:translateX(18px)}.cs-master{position:relative}.cs-master-back{margin-bottom:14px}
[data-text-size="large"]{font-size:106.25%}[data-density="compact"] .main{--section-gap:14px}[data-density="compact"] .card,[data-density="compact"] .profile-section{padding-top:14px;padding-bottom:14px}[data-density="compact"] .list-item{padding-top:9px;padding-bottom:9px}[data-motion="reduced"] *,[data-motion="reduced"] *::before,[data-motion="reduced"] *::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
@media(max-width:520px){.profile-personalize{padding:16px 14px}}

/* Stable mobile meal editor: header, scroll area and footer never overlap. */

/* Flat cards and a single, truly global accent source */
[data-accent]{--accent:var(--primary);--accent-hover:var(--primary-hover);--accent-soft:var(--primary-soft);--brand-cyan:var(--primary);--brand-cyan-light:var(--primary-hover);--shadow-glow:0 0 0 4px var(--primary-soft);--grain:none}
.hero-card,.coach-dashboard-hero,body.ios-shell .card,body.ios-shell .nutrition-plan-card,body.ios-shell .profile-section,body.ios-shell .wwk,body.ios-shell .cs-rows,body.ios-shell .cs-detail-card,body.ios-shell .stat-card{background:var(--surface)!important;background-image:none!important;border-color:var(--border)!important;box-shadow:var(--shadow-sm)!important}
[data-theme="dark"] .hero-card,[data-theme="dark"] .coach-dashboard-hero,[data-theme="dark"] body.ios-shell .card,[data-theme="dark"] body.ios-shell .nutrition-plan-card,[data-theme="dark"] body.ios-shell .profile-section,[data-theme="dark"] body.ios-shell .stat-card{background:var(--surface)!important;background-image:none!important}
.hero-card::before,.coach-dashboard-hero::before,.nutrition-plan-card::after,.food-macro-pip::after,.meal-plan-info-modal::after,.food-pip-macro::after,.food-pip-portion::after,.stat-card::after,.quick-action-card::after,body.ios-shell .card::after,body.ios-shell .profile-section::after{display:none!important;background-image:none!important;content:none!important}
.hero-card::after,.coach-dashboard-hero::after{display:none!important;content:none!important}
.hero-card,.hero-card .title,.hero-card .sub,.coach-dashboard-hero,body.ios-shell .stat-card{color:var(--text)!important}.hero-card .sub{color:var(--text-soft)!important}
.hero-card .kicker,.coach-hero-date{color:var(--primary)!important}.hero-card .cta,.coach-hero-primary{background:var(--primary)!important;color:var(--primary-fg)!important}.hero-card .cta:hover,.coach-hero-primary:hover{background:var(--primary-hover)!important}.macro-bar.p .fill{background:var(--primary)!important}.chart-line{stroke:var(--primary)!important}.chart-dot{fill:var(--primary)!important}
body.ios-shell{background:var(--bg)!important;background-image:none!important}

/* Dashboard accent consistency — no legacy turquoise remains. */
[data-accent]{--accent-fg:var(--primary-fg)}
body.ios-shell .hero-card,.hero-card{background:color-mix(in srgb,var(--primary) 11%,var(--surface))!important;background-image:none!important;border:1px solid color-mix(in srgb,var(--primary) 24%,var(--border))!important;box-shadow:var(--shadow-sm)!important}
body.ios-shell .hero-card::before,body.ios-shell .hero-card::after{display:none!important;content:none!important;background:none!important}
body.ios-shell .hero-card .kicker,body.ios-shell .hero-card .cta{color:var(--primary)!important}body.ios-shell .hero-card .cta{background:var(--primary)!important;color:var(--primary-fg)!important}.stat-card .value.accent{color:var(--primary)!important}
.dashboard-eyebrow,.dashboard-live-dot,.dashboard-live-dot i{color:var(--primary)!important}.dashboard-live-dot i{background:var(--primary)!important}

/* Theme contrast pass: every important surface follows the active theme. */
#view-weight .weight-input-card,#view-weight .weight-stat,#view-weight .weight-panel{background:var(--surface)!important;background-image:none!important;border:1px solid var(--border)!important;box-shadow:var(--shadow-sm)!important}
body.ios-shell .stat-card:not(.hilite) .label,body.ios-shell .stat-card:not(.hilite) .value,body.ios-shell .stat-card:not(.hilite) .hint{color:var(--text)!important;text-shadow:none!important}.stat-card:not(.hilite) .label,.stat-card:not(.hilite) .hint{opacity:.68}
.card,.stat-card,.quick-action-card,.dashboard-focus-card,.dashboard-status-card,.profile-section,.profile-personalize,.cs-rows,.cs-detail-card,.modal,.list-item,.client-plan-accordion,.weight-input-card,.weight-stat,.weight-panel{color:var(--text)}
input,select,textarea{background-color:var(--surface-alt);color:var(--text);border-color:var(--border)}input::placeholder,textarea::placeholder{color:var(--text-soft)}
[data-theme="light"] .tabbar,[data-theme="light"] body.ios-shell .tabbar{background:rgba(255,255,255,.94)!important;border-color:rgba(8, 36, 28,.12)!important;box-shadow:0 12px 32px rgba(8, 36, 28,.14)!important}[data-theme="dark"] .tabbar,[data-theme="dark"] body.ios-shell .tabbar{background:rgba(11, 26, 21,.94)!important;border-color:rgba(255,255,255,.09)!important}
[data-theme="light"] .modal-backdrop{background:rgba(8, 36, 28,.32)}[data-theme="dark"] .modal-backdrop{background:rgba(0,0,0,.62)}

/* Weight page: explicit per-theme colors to prevent inherited iOS glass styles. */
[data-theme="light"] #view-weight .weight-input-card,[data-theme="light"] #view-weight .weight-stat,[data-theme="light"] #view-weight .weight-panel,[data-theme="light"] #view-weight .wwk{background:#fff!important;background-image:none!important;border-color:#D5E4DC!important;color:#0B1A15!important;box-shadow:0 8px 24px rgba(8, 36, 28,.07)!important}
[data-theme="light"] #view-weight .weight-stat .lbl,[data-theme="light"] #view-weight .weight-stat .val,[data-theme="light"] #view-weight .weight-stat .sub,[data-theme="light"] #view-weight .card-head h3,[data-theme="light"] #view-weight .wwk-head,[data-theme="light"] #view-weight .wwk-num,[data-theme="light"] #view-weight .wwk-avg{color:#0B1A15!important;text-shadow:none!important;-webkit-text-fill-color:currentColor}
[data-theme="light"] #view-weight .weight-stat .lbl,[data-theme="light"] #view-weight .weight-stat .sub,[data-theme="light"] #view-weight .wwk-dates,[data-theme="light"] #view-weight .wwk-count{color:#4F6F63!important;opacity:1}[data-theme="light"] #view-weight input{background:#fff!important;color:#0B1A15!important;-webkit-text-fill-color:#0B1A15!important;color-scheme:light}[data-theme="light"] #view-weight .chart-grid{stroke:#D5E4DC!important}[data-theme="light"] #view-weight .chart-y-label,[data-theme="light"] #view-weight .chart-x-label{fill:#4F6F63!important}
[data-theme="dark"] #view-weight .weight-input-card,[data-theme="dark"] #view-weight .weight-stat,[data-theme="dark"] #view-weight .weight-panel,[data-theme="dark"] #view-weight .wwk{background:var(--surface)!important;background-image:none!important;border-color:var(--border)!important;color:var(--text)!important}[data-theme="dark"] #view-weight input{color-scheme:dark}

/* ============================================================
   2026-09 unified application chrome
   One top rhythm for every client/coach tab, one full-screen mobile
   workspace for every dialog, and the same safe-area treatment in admin.
   Kept last on purpose: it replaces the older sheet/top experiments.
   ============================================================ */
:root{
  --ritm-status-cap:max(env(safe-area-inset-top,0px),24px);
  --ritm-top-fade:calc(var(--ritm-status-cap) + 38px);
  --ritm-page-top:calc(var(--ritm-status-cap) + 44px);
}
/* iPhone: the notch / Dynamic Island area is already tall; just a small gap under it. */
html.is-ios{--ritm-page-top:calc(var(--ritm-status-cap) + 14px)}

.modal-page-back{display:none}

@media(max-width:900px){
  /* The fade belongs to the application shell, not to individual cards. */
  body:has(.app-shell)::before,
  body.admin-clean-page::before{
    content:none!important;
    position:fixed!important;
    z-index:9998!important;
    inset:0 0 auto!important;
    height:var(--ritm-top-fade)!important;
    border:0!important;
    background:var(--bg)!important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
    pointer-events:none!important;
  }

  /* Every primary tab starts on exactly the same baseline, below the fade. */
  .app-shell,
  body.ios-shell .app-shell{padding-top:0!important}
  .main,
  body.ios-shell .main{
    padding:var(--ritm-page-top) max(14px,var(--safe-left,0px)) 20px max(14px,var(--safe-right,0px))!important;
  }
  .view.active,
  body.ios-shell .view.active{
    margin:0!important;
    padding-top:0!important;
    padding-bottom:calc(112px + env(safe-area-inset-bottom,0px))!important;
  }
  .view.active>.page-head:first-child,
  body.ios-shell .view.active>.page-head:first-child{
    min-height:58px!important;
    margin:0 0 14px!important;
    padding:0 2px 12px!important;
    align-items:flex-end!important;
  }
  .view.active>.page-head:first-child h1,
  body.ios-shell .view.active>.page-head:first-child h1{
    font-family:var(--font-primary)!important;
    font-size:clamp(1.75rem,8vw,2.15rem)!important;
    font-weight:800!important;
    line-height:1.05!important;
    letter-spacing:-.035em!important;
  }

  /* Dialogs are pages on phones: no small window inside the active page. */
  .modal-backdrop.active,
  body.ios-shell .modal-backdrop.active,
  .modal-backdrop.active:has(.nc-day-modal){
    display:block!important;
    padding:0!important;
    overflow:hidden!important;
    background:var(--bg)!important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    touch-action:auto!important;
  }
  .modal-backdrop.active>.modal,
  body.ios-shell .modal-backdrop.active>.modal,
  .modal-backdrop.active>.modal.modal-lg,
  .modal-backdrop.active>.client-session-plan-modal,
  .modal-backdrop.active:has(.nc-day-modal)>.nc-day-modal{
    position:fixed!important;
    inset:0!important;
    display:block!important;
    width:100vw!important;
    max-width:none!important;
    height:100dvh!important;
    max-height:none!important;
    margin:0!important;
    padding:var(--ritm-page-top) 16px calc(24px + env(safe-area-inset-bottom,0px))!important;
    border:0!important;
    border-radius:0!important;
    background:var(--bg)!important;
    background-image:none!important;
    box-shadow:none!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    touch-action:pan-y!important;
    transform:none!important;
    animation:ritmPageIn .22s cubic-bezier(.2,.8,.2,1) both!important;
  }
  .modal-backdrop.active>.modal::before,
  body.ios-shell .modal-backdrop.active>.modal::before{display:none!important;content:none!important}
  @keyframes ritmPageIn{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}

  .modal-page-back{
    display:inline-flex!important;
    min-height:38px;
    margin:0 0 14px -7px;
    padding:5px 8px;
    align-items:center;
    gap:2px;
    border:0;
    border-radius:10px;
    background:transparent;
    color:var(--primary);
    font:700 .9rem var(--font-primary);
  }
  .modal-page-back svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .modal>.wc-modal-head{
    position:relative!important;
    top:auto!important;
    margin:0 0 16px!important;
    padding:0 0 14px!important;
    border-bottom:1px solid var(--border)!important;
    background:transparent!important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }
  .modal .editor-topbar-close{
    position:absolute!important;
    top:calc(var(--ritm-page-top) - 2px)!important;
    right:14px!important;
    z-index:2!important;
    width:40px!important;
    height:40px!important;
    border-radius:50%!important;
    background:var(--surface-alt)!important;
    color:var(--text)!important;
  }
  .modal .modal-actions{
    position:sticky!important;
    z-index:4!important;
    bottom:calc(-24px - env(safe-area-inset-bottom,0px))!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    margin:24px -16px calc(-24px - env(safe-area-inset-bottom,0px))!important;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))!important;
    border-top:1px solid var(--border)!important;
    background:var(--bg)!important;
  }
  .modal .modal-actions .btn{width:100%!important;margin:0!important}

  /* Stable viewport after closing the keyboard. */
  .modal input,.modal textarea,.modal select{scroll-margin-top:calc(var(--ritm-page-top) + 60px);scroll-margin-bottom:120px}
}

/* Admin uses the same safe top, but remains a focused Control Centre. */
@media(max-width:640px){
  .admin-clean-page{--bg:#08241C;overflow-x:hidden}
}

@media(prefers-reduced-motion:reduce){
  .modal-backdrop.active>.modal,
  body.ios-shell .modal-backdrop.active>.modal{animation:none!important}
}

/* Friendly coach dashboard: generous touch cards and purposeful contrast. */
#view-overview .coach-dashboard-hero{
  padding:28px!important;
  border-radius:24px!important;
  background:color-mix(in srgb,var(--primary) 10%,var(--surface))!important;
  border-color:color-mix(in srgb,var(--primary) 28%,var(--border))!important;
}
#view-overview .coach-dashboard-hero h1{font-size:clamp(1.8rem,4vw,2.45rem)!important}
#view-overview .coach-dashboard-hero p{max-width:54ch;font-size:.9rem;line-height:1.6}
#view-overview .coach-quick-head{margin:22px 2px 11px!important}
#view-overview .coach-quick-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:18px}
#view-overview .coach-quick-strip button{
  grid-template-columns:48px minmax(0,1fr) auto;
  min-height:78px;
  padding:14px 16px;
  border-radius:19px;
  border-color:color-mix(in srgb,var(--primary) 20%,var(--border));
  background:var(--surface);
  transition:transform .18s ease,border-color .18s ease,background-color .18s ease;
}
#view-overview .coach-quick-strip button:hover{transform:translateY(-2px);background:var(--primary-soft)}
#view-overview .coach-quick-strip button span{width:48px;height:48px;border-radius:15px;background:var(--primary-soft)}
#view-overview .coach-quick-strip button svg{width:23px;height:23px}
#view-overview .coach-quick-strip button strong{font-size:.9rem}
#view-overview .coach-quick-strip button b{display:none}
#view-overview .coach-quick-strip button i{font-size:.75rem}
#view-overview .coach-quick-strip button:nth-child(n){border-color:var(--border);background:var(--surface)}
#view-overview .coach-quick-strip button:nth-child(n) span{background:var(--surface-alt);color:var(--primary)}
#view-overview .coach-schedule-launcher{
  min-height:86px;
  margin:0 0 18px;
  padding:16px 18px;
  border-radius:20px;
  border-color:color-mix(in srgb,var(--primary) 30%,var(--border));
  background:color-mix(in srgb,var(--primary) 8%,var(--surface));
  box-shadow:none;
}
#view-overview .coach-compact-stats{gap:12px;margin-bottom:4px}
#view-overview .coach-compact-stats .stat-card{
  min-height:104px!important;
  padding:18px!important;
  border-radius:20px!important;
}
#view-overview .coach-compact-stats .stat-card:nth-child(n){background:var(--surface)!important;border-color:var(--border)!important}
#view-overview .coach-compact-stats .stat-card:nth-child(n)::before{content:""!important;display:block!important;position:absolute!important;inset:0 auto 0 0!important;width:3px!important;height:auto!important;border-radius:20px 0 0 20px!important;background:var(--primary)!important;opacity:.72!important}
#view-overview .coach-compact-stats .stat-card .label{font-size:.72rem!important}
#view-overview .coach-compact-stats .stat-card .value{font-size:1.8rem!important}

/* Professional monochrome hierarchy: the selected brand accent is the only hue. */
#view-overview .coach-dashboard-hero{background:var(--surface)!important;border-color:var(--border)!important}
#view-overview .coach-dashboard-hero .coach-hero-date{color:var(--primary)!important}
#view-overview .coach-quick-strip button:hover{border-color:color-mix(in srgb,var(--primary) 42%,var(--border));background:var(--surface-alt)}
#view-overview .coach-schedule-launcher{background:var(--surface)!important;border-color:var(--border)!important}
#view-overview .coach-schedule-launcher:hover{border-color:color-mix(in srgb,var(--primary) 42%,var(--border))!important}
[data-theme="light"] #view-overview .coach-quick-strip button:nth-child(n),
[data-theme="light"] #view-overview .coach-dashboard-hero,
[data-theme="light"] #view-overview .coach-schedule-launcher,
[data-theme="light"] #view-overview .coach-compact-stats .stat-card:nth-child(n){background:#fff!important;border-color:#dfe4e8!important}

@media(max-width:640px){
  #view-overview .coach-dashboard-hero{padding:22px 20px!important;border-radius:21px!important}
  #view-overview .coach-dashboard-hero h1{font-size:1.8rem!important}
  #view-overview .coach-quick-strip{grid-template-columns:1fr;gap:10px}
  #view-overview .coach-quick-strip button{min-height:72px;padding:11px 14px}
  #view-overview .coach-quick-strip button span{width:46px;height:46px}
  #view-overview .coach-schedule-launcher{min-height:80px;padding:14px}
  #view-overview .coach-compact-stats{gap:9px!important}
  #view-overview .coach-compact-stats .stat-card{min-height:96px!important;padding:14px 11px!important}
  #view-overview .coach-compact-stats .stat-card .label{font-size:.62rem!important}
  #view-overview .coach-compact-stats .stat-card .value{font-size:1.55rem!important}
}

/* Onboarding theme parity — the original flow was authored only in dark colors. */
[data-theme="light"] .onboarding-page{
  background:#f5f7f8!important;
  color:#0B1A15!important;
}
[data-theme="light"] .onboarding-page::before{
  background:radial-gradient(circle at 75% 5%,color-mix(in srgb,var(--primary) 10%,transparent),transparent 32%),radial-gradient(circle at 0 100%,color-mix(in srgb,var(--primary) 5%,transparent),transparent 30%)!important;
}
[data-theme="light"] .onboarding-brand{color:#0B1A15!important}
[data-theme="light"] .onboarding-progress circle{stroke:#D5E4DC!important}
[data-theme="light"] .onboarding-progress circle+circle{stroke:var(--primary)!important}
[data-theme="light"] .onboarding-progress strong{color:#0B1A15!important}
[data-theme="light"] .onboarding-kicker{color:var(--primary)!important}
[data-theme="light"] .onboarding-step h1{color:#111820!important}
[data-theme="light"] .onboarding-step>p{color:#63717a!important}
[data-theme="light"] .onboarding-step label{color:#38464f!important}
[data-theme="light"] .onboarding-step label>span{color:#74818a!important}
[data-theme="light"] .onboarding-step input,
[data-theme="light"] .onboarding-step select,
[data-theme="light"] .onboarding-step textarea{
  border-color:#d7e0e4!important;
  background:#fff!important;
  color:#0B1A15!important;
  -webkit-text-fill-color:#0B1A15!important;
  box-shadow:0 5px 18px rgba(24,38,48,.04)!important;
  color-scheme:light;
}
[data-theme="light"] .onboarding-step input::placeholder,
[data-theme="light"] .onboarding-step textarea::placeholder{color:#8DA198!important;-webkit-text-fill-color:#8DA198!important}
[data-theme="light"] .onboarding-step input:focus,
[data-theme="light"] .onboarding-step select:focus,
[data-theme="light"] .onboarding-step textarea:focus{
  border-color:var(--primary)!important;
  background:#fff!important;
  box-shadow:0 0 0 4px var(--primary-soft)!important;
}
[data-theme="light"] .onboarding-choice-grid button,
[data-theme="light"] .onboarding-options button{
  border-color:#D5E4DC!important;
  background:#fff!important;
  color:#25323a!important;
  box-shadow:0 5px 18px rgba(24,38,48,.04)!important;
}
[data-theme="light"] .onboarding-options button small{color:#728089!important}
[data-theme="light"] .onboarding-choice-grid button.selected,
[data-theme="light"] .onboarding-options button.selected{
  border-color:var(--primary)!important;
  background:var(--primary-soft)!important;
  color:var(--primary)!important;
  box-shadow:0 0 0 1px var(--primary)!important;
}
[data-theme="light"] .onboarding-actions #ob-back{color:#52616a!important}
[data-theme="light"] .onboarding-actions #ob-next{background:#0B1A15!important;color:#fff!important}
[data-theme="light"] .onboarding-actions #save-state{color:#77848c!important}
[data-theme="light"] .onboarding-metrics>div{border-color:#D5E4DC!important;background:#fff!important;box-shadow:0 7px 22px rgba(24,38,48,.05)}
[data-theme="light"] .onboarding-metrics span,
[data-theme="light"] .onboarding-metrics small{color:#6d7b84!important}
[data-theme="light"] .onboarding-metrics strong{color:var(--primary)!important}
[data-theme="light"] .onboarding-result>button{background:var(--primary)!important;color:var(--primary-fg)!important}

/* Role selection: correct logo contrast and a calmer vertical position. */
.role-flow .public-brand{align-self:flex-start}
@media(max-width:700px){
  .public-role-shell.role-flow{
    justify-content:flex-start!important;
    padding-top:calc(max(env(safe-area-inset-top,0px),24px) + 64px)!important;
  }
  .role-flow .public-brand{margin-bottom:42px!important}
}
@media(min-width:701px){
  .public-role-shell.role-flow{padding-top:clamp(96px,13vh,150px)!important}
  .role-flow .public-brand{margin-bottom:54px!important}
}

/* Onboarding logo sits comfortably below the browser/notch area. */
.onboarding-shell{padding-top:max(42px,calc(env(safe-area-inset-top,0px) + 22px))!important}
@media(max-width:600px){.onboarding-shell{padding-top:max(50px,calc(env(safe-area-inset-top,0px) + 26px))!important}}

/* Coach picker uses a page-style back control, never a floating X. */
.coach-browse-back{display:inline-flex;width:max-content;min-height:40px;margin-left:-7px;padding:6px 9px 6px 5px;align-items:center;gap:2px;border:0;border-radius:11px;background:transparent;color:var(--primary);font:750 .82rem var(--font-primary);cursor:pointer}
.coach-browse-back svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.coach-browse-back:hover{background:var(--primary-soft)}
@media(max-width:900px){.coach-browse-back{min-height:42px;margin-bottom:2px}}

/* One navigation language for every dynamically-created workspace. */
.modal-page-back{
  display:inline-flex;
  width:max-content;
  min-height:40px;
  margin:0 0 14px -7px;
  padding:6px 9px 6px 5px;
  align-items:center;
  gap:2px;
  border:0;
  border-radius:11px;
  background:transparent;
  color:var(--primary);
  font:750 .82rem var(--font-primary);
  cursor:pointer;
}
.modal-page-back svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.modal-page-back:hover{background:var(--primary-soft)}
.modal.has-page-back .editor-topbar-close{display:none!important}

/* Stable content axis across every main tab and screen size. */
.main>.view{width:100%;max-width:1280px;margin-left:auto;margin-right:auto}
@media(max-width:900px){
  .main>.view.active,
  body.ios-shell .main>.view.active{margin-left:auto!important;margin-right:auto!important}
  .modal-backdrop.active>.modal>*,
  body.ios-shell .modal-backdrop.active>.modal>*{max-width:780px;margin-left:auto;margin-right:auto}
  .modal-backdrop.active>.modal>.modal-actions,
  body.ios-shell .modal-backdrop.active>.modal>.modal-actions{max-width:none}
}

/* ============================================================
   Workout plan editor — a real tab, framed like the nutrition
   editor: actions scroll away with the page, no sticky bar and
   no extra dead space above the first card.
   ============================================================ */

/* ============================================================
   Coach browse — tab propriu (fara popup, fara efect de sticla).
   ============================================================ */

/* ============================================================
   FARA EFECT DE STICLA — niciun blur in aplicatie. Suprafetele
   care se sprijineau pe blur (tabbar, topbar, sheet-uri, campuri
   iOS) devin opace, ca sa nu se vada continutul prin ele.
   ============================================================ */
*,
*::before,
*::after{
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}

/* Chrome asezat peste fundalul paginii */
.meal-builder-page-head{
  background:var(--bg)!important;
}

/* Chrome asezat peste carduri / plutitor */
.tabbar,
body.ios-shell .tabbar,
.mobile-topbar,
.sidebar,
body.ios-shell .sidebar,
#nav-fab-menu,
.toast,
body.ios-shell .toast{
  background:var(--surface)!important;
  background-image:none!important;
}
.tabbar,
body.ios-shell .tabbar{
  border-color:var(--border)!important;
}

/* Elementele "glass" din shell-ul iOS */
body.ios-shell .cs-detail-card,
body.ios-shell .modal-backdrop.active>.modal,
[data-theme="dark"] body.ios-shell .modal-backdrop.active>.modal{
  background:var(--surface)!important;
  background-image:none!important;
}
body.ios-shell .stat-card .stat-chip,
body.ios-shell input,
body.ios-shell textarea,
body.ios-shell select{
  background:var(--surface-alt)!important;
  background-image:none!important;
}

/* Aceleasi suprafete, dar pe tema intunecata si in starile de scroll —
   selectori mai specifici, ca sa bata variantele translucide de mai sus. */
.tabbar.tabbar-scrolled,
body.ios-shell .tabbar.tabbar-scrolled,
[data-theme="dark"] .tabbar,
[data-theme="dark"] body.ios-shell .tabbar,
[data-theme="dark"] .tabbar.tabbar-scrolled,
[data-theme="dark"] body.ios-shell .tabbar.tabbar-scrolled{
  background:var(--surface)!important;
  background-image:none!important;
  border-color:var(--border)!important;
}
.tabbar::before,
.tabbar::after{display:none!important;content:none!important}

[data-theme="dark"] .sidebar,
[data-theme="dark"] body.ios-shell .sidebar,
body.ios-shell[data-theme="dark"] .sidebar,
[data-theme="dark"] .mobile-topbar,
[data-theme="dark"] .toast,
[data-theme="dark"] body.ios-shell .toast,
[data-theme="dark"] body.ios-shell .cs-detail-card,
[data-theme="dark"] body.ios-shell .modal-backdrop.active>.modal{
  background:var(--surface)!important;
  background-image:none!important;
}
[data-theme="dark"] body.ios-shell .stat-card .stat-chip,
[data-theme="dark"] body.ios-shell input,
[data-theme="dark"] body.ios-shell textarea,
[data-theme="dark"] body.ios-shell select{
  background:var(--surface-alt)!important;
  background-image:none!important;
}

/* Nicio banda fixa peste pagina: sus ramane doar fundalul aplicatiei. */
body::before,
body.ios-shell::before,
body:has(.app-shell)::before,
body.admin-clean-page::before,
body:not(.admin-clean-page)::before{
  content:none!important;
  display:none!important;
  background:none!important;
}


/* ============================================================
   COACH — panoul de start.
   Un singur bloc de cerneala poarta contrastul; sub el, pastile
   rotunjite, fara linii de separare. Regula de culoare:
   cerneala = structura, cyan = date live, alb = suprafata.
   Miscarea: o singura secventa la intrarea in tab + raspuns
   la apasare. Nimic altceva nu se misca singur.
   ============================================================ */
#view-overview{
  --cp-ink:#14141F;
  --cp-tile:rgba(255,255,255,.08);
  --cp-tile-hi:rgba(255,255,255,.14);
  --cp-cyan:#1EC1CB;
  --cp-rule:#D6DEE4;
  --cp-spring:cubic-bezier(.2,.9,.25,1);
}
[data-theme="dark"] #view-overview{
  --cp-ink:#262636;
  --cp-tile:rgba(255,255,255,.07);
  --cp-tile-hi:rgba(255,255,255,.13);
  --cp-rule:#32324A;
}

@keyframes cpRise{
  from{opacity:0;transform:translateY(14px) scale(.985)}
  to{opacity:1;transform:none}
}

.coach-panel-slab{
  margin:0 0 14px;
  padding:0 0 12px;
  border-radius:30px;
  background:var(--cp-ink);
  animation:cpRise .44s var(--cp-spring) both;
}
#view-overview #coach-schedule-launcher{animation:cpRise .44s var(--cp-spring) .07s both}
#view-overview #coach-quick-actions{animation:cpRise .44s var(--cp-spring) .13s both}

/* --- salutul --- */
#view-overview .coach-panel-slab .coach-dashboard-hero,
[data-theme="light"] #view-overview .coach-panel-slab .coach-dashboard-hero,
[data-theme="dark"] #view-overview .coach-panel-slab .coach-dashboard-hero{
  margin:0!important;
  padding:26px 22px 20px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
}
#view-overview .coach-panel-slab .coach-hero-date{
  display:block;
  margin:0 0 11px;
  color:var(--cp-cyan)!important;
  font-size:.76rem!important;
  font-weight:700!important;
  letter-spacing:0!important;
  text-transform:none!important;
}
#view-overview .coach-panel-slab .coach-dashboard-hero h1,
[data-theme="light"] #view-overview .coach-panel-slab .coach-dashboard-hero h1{
  margin:0!important;
  max-width:16ch;
  color:#FFFFFF!important;
  font-size:clamp(1.7rem,6.8vw,2.1rem)!important;
  font-weight:800!important;
  letter-spacing:-.035em!important;
  line-height:1.08!important;
  text-shadow:none!important;
}
#view-overview .coach-panel-slab .coach-dashboard-hero p,
[data-theme="light"] #view-overview .coach-panel-slab .coach-dashboard-hero p{
  margin:11px 0 0!important;
  max-width:36ch!important;
  color:rgba(255,255,255,.68)!important;
  font-size:.85rem!important;
  line-height:1.5!important;
}

/* --- cifrele: trei pastile in interiorul blocului, fara linii --- */
#view-overview .coach-panel-slab .coach-compact-stats{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
  margin:0!important;
  padding:0 12px!important;
}
#view-overview .coach-panel-slab .coach-compact-stats .stat-card,
#view-overview .coach-panel-slab .coach-compact-stats .stat-card:nth-child(n),
[data-theme="light"] #view-overview .coach-panel-slab .coach-compact-stats .stat-card:nth-child(n){
  display:flex!important;
  flex-direction:column-reverse!important;
  align-items:flex-start!important;
  justify-content:flex-end!important;
  min-height:0!important;
  padding:13px 13px 14px!important;
  border:0!important;
  border-radius:18px!important;
  background:var(--cp-tile)!important;
  background-image:none!important;
  box-shadow:none!important;
  text-align:left!important;
  transform:none!important;
  transition:background-color .18s ease,transform .18s var(--cp-spring);
}
#view-overview .coach-panel-slab .coach-compact-stats .stat-card:hover{
  transform:none!important;box-shadow:none!important;background:var(--cp-tile-hi)!important;
}
#view-overview .coach-panel-slab .coach-compact-stats .stat-card:active{
  transform:scale(.955)!important;background:var(--cp-tile-hi)!important;
}
#view-overview .coach-panel-slab .coach-compact-stats .stat-card::before,
#view-overview .coach-panel-slab .coach-compact-stats .stat-card:nth-child(n)::before,
#view-overview .coach-panel-slab .coach-compact-stats .stat-card::after{display:none!important;content:none!important}
#view-overview .coach-panel-slab .coach-compact-stats .value,
#view-overview .coach-panel-slab .coach-compact-stats .value.accent{
  margin:0!important;
  color:#FFFFFF!important;
  font-size:1.7rem!important;
  font-weight:750!important;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.035em!important;
  line-height:1!important;
}
#view-overview .coach-panel-slab .coach-compact-stats .value.accent{color:var(--cp-cyan)!important}
#view-overview .coach-panel-slab .coach-compact-stats .label{
  margin:6px 0 0!important;
  color:rgba(255,255,255,.56)!important;
  font-size:.68rem!important;
  font-weight:600!important;
}

/* --- ziua de azi --- */
#view-overview .coach-schedule-launcher,
[data-theme="light"] #view-overview .coach-schedule-launcher,
[data-theme="dark"] #view-overview .coach-schedule-launcher{
  grid-template-columns:48px minmax(0,1fr)!important;
  gap:14px!important;
  min-height:0!important;
  margin:0 0 20px!important;
  padding:15px 17px!important;
  border:1px solid var(--cp-rule)!important;
  border-radius:24px!important;
  background:var(--surface)!important;
  box-shadow:none!important;
  transform:none!important;
  transition:transform .2s var(--cp-spring),background-color .18s ease;
}
#view-overview .coach-schedule-launcher:active{transform:scale(.975)!important;background:var(--surface-alt)!important}
#view-overview .coach-schedule-launcher small{
  color:var(--text-soft)!important;
  font-size:.7rem!important;
  font-weight:600!important;
  letter-spacing:0!important;
  text-transform:none!important;
}
#view-overview .coach-schedule-launcher strong{margin-top:1px;font-size:.92rem!important;letter-spacing:-.015em}
#view-overview .coach-schedule-launcher em{margin-top:3px;color:var(--text-muted)!important;font-size:.76rem!important}
#view-overview .coach-schedule-launcher em b{color:var(--primary-hover);font-variant-numeric:tabular-nums}

/* --- acces rapid: patru pastile, nu o scara de linii --- */
#view-overview .coach-quick-head{margin:0 2px 11px!important}
#view-overview .coach-quick-head .section-title{
  color:var(--text)!important;
  font-size:.78rem!important;
  font-weight:750!important;
  letter-spacing:0!important;
  text-transform:none!important;
}
#view-overview .coach-quick-strip,
[data-theme="light"] #view-overview .coach-quick-strip{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
  margin:0 0 4px!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  overflow:visible!important;
}
#view-overview .coach-quick-strip button,
#view-overview .coach-quick-strip button:nth-child(n),
[data-theme="light"] #view-overview .coach-quick-strip button:nth-child(n){
  position:relative;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-end!important;
  gap:12px!important;
  min-height:112px!important;
  padding:15px 15px 16px!important;
  border:1px solid var(--cp-rule)!important;
  border-radius:24px!important;
  background:var(--surface)!important;
  transform:none!important;
  transition:transform .2s var(--cp-spring),background-color .18s ease;
}
#view-overview .coach-quick-strip button:active,
#view-overview .coach-quick-strip button:nth-child(n):active{
  transform:scale(.96)!important;background:var(--surface-alt)!important;
}
#view-overview .coach-quick-strip button span,
#view-overview .coach-quick-strip button:nth-child(n) span{
  width:44px!important;height:44px!important;
  border-radius:15px!important;
  background:var(--cp-ink)!important;
  color:#FFFFFF!important;
}
#view-overview .coach-quick-strip button svg{width:21px!important;height:21px!important}
#view-overview .coach-quick-strip button strong{
  font-size:.86rem!important;font-weight:650!important;
  letter-spacing:-.015em;line-height:1.25;
}
#view-overview .coach-quick-strip button i{
  position:absolute;top:15px;right:16px;
  padding:0!important;
  background:none!important;
  color:var(--text-soft)!important;
  font-size:.88rem!important;
  font-weight:750!important;
  font-variant-numeric:tabular-nums;
}

/* Pe tema intunecata pastilele se inverseaza: aceeasi cerneala
   s-ar topi in cardul de sub ele. */
[data-theme="dark"] #view-overview .coach-quick-strip button span,
[data-theme="dark"] #view-overview .coach-quick-strip button:nth-child(n) span{
  background:var(--text)!important;
  color:var(--surface)!important;
}

@media(max-width:380px){
  #view-overview .coach-panel-slab .coach-dashboard-hero{padding:22px 18px 17px!important}
  #view-overview .coach-panel-slab .coach-compact-stats{padding:0 10px!important;gap:7px!important}
  #view-overview .coach-panel-slab .coach-compact-stats .stat-card{padding:11px 10px 12px!important}
  #view-overview .coach-panel-slab .coach-compact-stats .value,
  #view-overview .coach-panel-slab .coach-compact-stats .value.accent{font-size:1.45rem!important}
  #view-overview .coach-panel-slab .coach-compact-stats .label{font-size:.62rem!important}
  #view-overview .coach-quick-strip button{min-height:104px!important}
}
@media(prefers-reduced-motion:reduce){
  .coach-panel-slab,
  #view-overview #coach-schedule-launcher,
  #view-overview #coach-quick-actions{animation:none!important}
  #view-overview .coach-quick-strip button,
  #view-overview .coach-schedule-launcher,
  #view-overview .coach-panel-slab .coach-compact-stats .stat-card{transition:none!important}
}