/* =============================================================
   GymFlow — Kinetic Performance Design System
   Phases: dark-mode tokens · motion system · tablet layout ·
           nav polish · topbar overhaul · animations & UX
   ============================================================= */

/* ===== Motion Tokens ===== */
:root {
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in:  cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-micro:  120ms;
  --dur-fast:   160ms;
  --dur-base:   220ms;
  --dur-slow:   320ms;
}

/* ===== Light Theme (default) ===== */
:root,
[data-theme="light"] {
  --bg:              #f4f7f5;
  --surface:         #ffffff;
  --surface-strong:  #ebefed;
  --surface-soft:    #f8f8f8;
  --ink:             #121212;
  --ink-soft:        #2d3130;
  --muted:           #6b716e;
  --line:            #e0e3e1;
  --line-soft:       #eceeec;
  --charcoal:        #121212;
  --charcoal-2:      #1c1f1e;
  --primary:         #ccff00;
  --primary-strong:  #b6e600;
  --on-primary:      #121212;
  --teal:            #00c2ff;
  --teal-ink:        #006688;
  --green-ink:       #4d6600;
  --warning:         #8a6d00;
  --warning-bg:      #fff7d6;
  --danger:          #ba1a1a;
  --danger-bg:       #ffdad6;
  --shadow:          0 2px 12px rgba(18,18,18,0.06), 0 1px 3px rgba(18,18,18,0.04);
  --shadow-strong:   0 8px 32px rgba(18,18,18,0.12), 0 2px 8px rgba(18,18,18,0.06);
  --shadow-card:     0 1px 4px rgba(18,18,18,0.05);
  --nm-flat:         6px 6px 12px #d1d9e6, -6px -6px 12px #ffffff;
  --nm-inset:        inset 4px 4px 8px #d1d9e6, inset -4px -4px 8px #ffffff;
  --nm-glow-gold:    4px 4px 12px rgba(255, 179, 0, 0.35), -4px -4px 12px rgba(255, 255, 255, 0.9), inset 2px 2px 4px rgba(255,255,255,0.4);
  --nm-glow-silver:  4px 4px 12px rgba(144, 164, 174, 0.35), -4px -4px 12px rgba(255, 255, 255, 0.9), inset 2px 2px 4px rgba(255,255,255,0.4);
  --nm-glow-bronze:  4px 4px 12px rgba(216, 67, 21, 0.3), -4px -4px 12px rgba(255, 255, 255, 0.9), inset 2px 2px 4px rgba(255,255,255,0.4);
  --topbar-bg:       rgba(244,247,245,0.88);
  --topbar-border:   rgba(224,227,225,0.8);
  --nav-scrim:       rgba(18,18,18,0.52);

  /* Color-theme accent helpers (overridden per [data-color-theme]) */
  --primary-fade:    rgba(204,255,0,0.14);  /* status pill bg, code bg */
  --primary-subtle:  rgba(204,255,0,0.12);  /* nav active bg */
  --primary-glow:    rgba(204,255,0,0.26);  /* button hover shadow */

  /* Semantic ink tokens — always readable on surface (WCAG AA ≥ 4.5:1) */
  --primary-ink:     #4d6600;   /* lime primary adapted for light bg text   */
  --primary-text-bg: rgba(204,255,0,0.15); /* tinted bg pill behind primary text */
  --gold-ink:        #7a5400;   /* #FFD700 gold → dark amber for light bg   */
  --gold-bg:         rgba(255,215,0,0.12);
  --silver-ink:      #4a5568;   /* silver → dark slate for light bg         */
  --silver-bg:       rgba(192,192,192,0.12);
  --bronze-ink:      #7c3a00;   /* bronze → dark brown for light bg         */
  --bronze-bg:       rgba(205,127,50,0.12);
  --teal-text:       var(--teal-ink); /* #006688 — safe on light bg          */

  --r-xs:   6px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-pill: 999px;
  --accent:          var(--teal);
  --text:            var(--ink);
  --text-muted:      var(--muted);
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ===== Dark Theme ===== */
[data-theme="dark"] {
  --bg:              #0e0e0e;
  --surface:         #1a1a1a;
  --surface-strong:  #252525;
  --surface-soft:    #1e1e1e;
  --ink:             #f0eeeb;
  --ink-soft:        #c8c4be;
  --muted:           #878480;
  --line:            #2c2c2c;
  --line-soft:       #222222;
  --teal-ink:        #29c8ff;
  --green-ink:       #a3d400;
  --warning:         #d4a800;
  --warning-bg:      #2a2200;
  --danger:          #ff6b6b;
  --danger-bg:       #3a0a0a;
  --shadow:          0 2px 12px rgba(0,0,0,0.28), 0 1px 3px rgba(0,0,0,0.18);
  --shadow-strong:   0 8px 32px rgba(0,0,0,0.48), 0 2px 8px rgba(0,0,0,0.24);
  --shadow-card:     0 1px 4px rgba(0,0,0,0.2);
  --nm-flat:         6px 6px 12px #070707, -6px -6px 12px #181818;
  --nm-inset:        inset 4px 4px 8px #050505, inset -4px -4px 8px #222222;
  --nm-glow-gold:    4px 4px 12px rgba(255, 179, 0, 0.15), -4px -4px 12px rgba(255, 255, 255, 0.03), inset 2px 2px 4px rgba(255,255,255,0.15);
  --nm-glow-silver:  4px 4px 12px rgba(144, 164, 174, 0.15), -4px -4px 12px rgba(255, 255, 255, 0.03), inset 2px 2px 4px rgba(255,255,255,0.15);
  --nm-glow-bronze:  4px 4px 12px rgba(216, 67, 21, 0.15), -4px -4px 12px rgba(255, 255, 255, 0.03), inset 2px 2px 4px rgba(255,255,255,0.15);
  --topbar-bg:       rgba(14,14,14,0.90);
  --topbar-border:   rgba(44,44,44,0.8);
  --nav-scrim:       rgba(0,0,0,0.72);
  --accent:          var(--teal);
  --text:            var(--ink);
  --text-muted:      var(--muted);
  /* Semantic ink tokens — bright variants for dark surfaces */
  --primary-ink:     #ccff00;   /* lime is vivid enough on dark bg           */
  --primary-text-bg: rgba(204,255,0,0.14);
  --gold-ink:        #FFD700;   /* gold on dark bg — fine                    */
  --gold-bg:         rgba(255,215,0,0.14);
  --silver-ink:      #C0C0C0;
  --silver-bg:       rgba(192,192,192,0.1);
  --bronze-ink:      #CD7F32;
  --bronze-bg:       rgba(205,127,50,0.12);
  --teal-text:       var(--teal-ink); /* #29c8ff on dark — fine               */
  color-scheme: dark;
}

/* ===== Reset & Base ===== */
*,*::before,*::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: var(--teal-ink); text-decoration: none; }
h1, h2, p { margin: 0; }

h1, h2, .brand-mark, .metric strong, .auth-brand h1 {
  font-family: Montserrat, Inter, sans-serif;
}

h1 {
  font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

h2 {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  font-size: 20px;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  user-select: none;
  flex-shrink: 0;
}

/* ===== Shell ===== */
.app-shell {
  min-height: 100svh;
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  background: var(--bg);
}

.boot-screen {
  min-height: 100svh;
  grid-column: 1 / -1;
  display: grid;
  place-content: center;
  gap: 16px;
  text-align: center;
  color: var(--muted);
}

.boot-error {
  max-width: 420px;
  margin: 0 auto;
  color: var(--danger);
  line-height: 1.5;
}

.boot-screen .button-row { justify-content: center; }

.boot-mark, .brand-mark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 800;
  font-size: 1.05rem;
  font-family: Montserrat, sans-serif;
}

.brand-mark.large { width: 64px; height: 64px; font-size: 1.4rem; }

/* ===== Sidebar ===== */
.sidebar {
  min-height: 100svh;
  padding: 20px 12px 20px 14px;
  background: var(--charcoal);
  color: rgba(255,255,255,0.62);
  position: sticky;
  top: 0;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.sidebar::-webkit-scrollbar { display: none; }

.sidebar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary) 0%, var(--teal) 100%);
  opacity: 0.7;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 8px 22px;
}

.brand strong {
  display: block;
  color: var(--primary);
  font-family: Montserrat, sans-serif;
  font-weight: 800;
  font-size: 0.96rem;
  line-height: 1.2;
}

.brand span {
  display: block;
  color: rgba(255,255,255,0.36);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 2px;
}

.nav-list {
  display: grid;
  gap: 2px;
  flex: 1;
}

.nav-list a {
  position: relative;
  min-height: 44px;
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  color: rgba(255,255,255,0.56);
  font-weight: 600;
  font-size: 0.89rem;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-micro) var(--ease-out);
  overflow: hidden;
}

.nav-list a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.055);
  opacity: 0;
  border-radius: inherit;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.nav-list a:hover { color: #fff; }
.nav-list a:hover::after { opacity: 1; }
.nav-list a:active { transform: scale(0.98); }

.nav-list a.active {
  background: var(--primary-subtle);
  color: #fff;
}

.nav-list a.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 58%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--primary);
  box-shadow: 0 0 8px color-mix(in srgb, var(--primary) 50%, transparent);
}

.nav-icon {
  display: grid;
  place-items: center;
  color: inherit;
  width: 28px;
}

.nav-icon .material-symbols-outlined {
  font-size: 21px;
  transition: font-variation-settings var(--dur-fast) var(--ease-out);
}

.nav-list a.active .nav-icon .material-symbols-outlined {
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

.sidebar-footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.07);
}

.profile-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.05);
  transition: background var(--dur-fast) var(--ease-out);
  cursor: pointer;
}

.profile-chip:hover { background: rgba(255,255,255,0.08); }

.profile-chip strong {
  display: block;
  color: #fff;
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: 0.83rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

.profile-chip span {
  display: block;
  color: rgba(255,255,255,0.42);
  font-size: 0.7rem;
  text-transform: capitalize;
}

.avatar {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 800;
  font-size: 0.76rem;
  font-family: Montserrat, sans-serif;
}

.avatar.small {
  width: 36px;
  height: 36px;
  background: var(--surface-strong);
  color: var(--ink);
  font-size: 0.72rem;
}

.profile-chip .avatar {
  background: #252928;
  color: var(--primary);
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
}

.name-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.name-cell-text { min-width: 0; }
.name-cell-text strong, .name-cell-text small { display: block; overflow-wrap: anywhere; }

/* ===== Topbar ===== */
.workspace { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--topbar-border);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  position: sticky;
  top: 0;
  z-index: 10;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

.topbar-search {
  flex: 1;
  max-width: 400px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  min-height: 40px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--muted);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-base) var(--ease-out);
}

.topbar-search:focus-within {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(0,194,255,0.16);
  background: var(--surface);
}

.topbar-search .material-symbols-outlined {
  font-size: 18px;
  flex-shrink: 0;
  color: var(--muted);
}

.topbar-search input {
  border: 0;
  background: transparent;
  min-height: auto;
  padding: 0;
  box-shadow: none;
  color: var(--ink);
  width: 100%;
  font-size: 0.9rem;
}

.topbar-search input::placeholder { color: var(--muted); }
.topbar-search input:focus { box-shadow: none; border: 0; outline: none; }

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* Theme toggle */
.theme-toggle {
  min-height: 36px;
  min-width: 36px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-micro) var(--ease-spring), color var(--dur-base) var(--ease-out);
}

.theme-toggle:hover {
  background: var(--surface-strong);
  border-color: var(--ink);
}

.theme-toggle:active { transform: scale(0.88) rotate(20deg); }
.theme-toggle .material-symbols-outlined { font-size: 19px; }

.theme-icon-light { display: block; }
.theme-icon-dark  { display: none;  }
[data-theme="dark"] .theme-icon-light { display: none;  }
[data-theme="dark"] .theme-icon-dark  { display: block; }

.topbar-user { text-align: right; }

.topbar-user strong {
  display: block;
  font-size: 0.87rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}

.topbar-user .eyebrow { font-size: 0.7rem; }

.mobile-nav { display: none; }

.pill-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 700;
  font-size: 0.88rem;
  border: 0;
  cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-spring), background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.pill-button:hover {
  transform: scale(1.03);
  background: var(--primary-strong);
  box-shadow: 0 4px 16px var(--primary-glow);
}

.pill-button:active { transform: scale(0.97); }
.pill-button .material-symbols-outlined { font-size: 17px; }

/* ===== Nav scrim (mobile) ===== */
.nav-scrim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 19;
  background: var(--nav-scrim);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: fade-in var(--dur-base) var(--ease-out);
}

/* ===== Content ===== */
.content-panel { padding: 28px 28px 48px; flex: 1; }

#view {
  animation: view-enter var(--dur-base) var(--ease-out);
  will-change: opacity, transform;
}

@keyframes view-enter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.eyebrow, .brand span { color: var(--muted); font-size: 0.78rem; }
small { color: var(--muted); font-size: 0.8rem; }

/* ===== Metric cards ===== */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.metric {
  position: relative;
  min-height: 112px;
  padding: 18px 18px 18px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  transition: box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
  cursor: default;
}

.metric:hover { box-shadow: var(--shadow); transform: translateY(-1px); }

.metric::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--primary);
}

.metric:nth-child(4n+2)::before { background: var(--teal); }
.metric:nth-child(4n+3)::before { background: var(--ink-soft); }
.metric:nth-child(4n)::before   { background: var(--primary); }

.metric span {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.metric strong {
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* ===== Panels ===== */
.split-grid, .work-grid { display: grid; gap: 18px; }
.split-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.work-grid { grid-template-columns: minmax(320px, 0.8fr) minmax(0, 1.4fr); align-items: start; }

.panel, .item-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.panel { padding: 20px; min-width: 0; }

.panel-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.panel-heading span { color: var(--muted); font-size: 0.82rem; }
.stack { display: grid; gap: 12px; }

/* ===== Forms ===== */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

/* Autocomplete dropdown */
.ac-wrap { position: relative; }
.ac-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 300;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  max-height: 220px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ac-item {
  padding: 9px 14px;
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-out);
}
.ac-item:hover { background: var(--primary-fade); color: var(--ink); }

label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

label.wide,
.form-grid > .wide {
  grid-column: 1 / -1;
}
.form-section-heading { grid-column: 1 / -1; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); padding-top: 8px; border-top: 1px solid var(--border); margin-top: 4px; }
.optional-tag { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: 0.7; }
/* ── BMI Meter ─────────────────────────────────────────────────────── */
.bmi-meter-wrapper { display: flex; flex-direction: column; gap: 6px; padding: 10px 0 4px; }
.bmi-meter-header  { display: flex; align-items: baseline; gap: 6px; }
.bmi-meter-value   { font-size: 1.6rem; font-weight: 700; line-height: 1; transition: color 0.3s; }
.bmi-unit          { font-size: 0.82rem; font-weight: 500; opacity: 0.55; }
.bmi-meter-category { font-size: 0.78rem; font-weight: 600; margin-left: auto; transition: color 0.3s; }
.bmi-meter-bar {
  position: relative;
  display: flex;
  height: 12px;
  border-radius: 8px;
  overflow: visible;
}
.bmi-zone--uw  { flex: 8.5; background: #60a5fa; border-radius: 8px 0 0 8px; }
.bmi-zone--ok  { flex: 4.4; background: #22c55e; }
.bmi-zone--ow  { flex: 2.1; background: #facc15; }
.bmi-zone--ob1 { flex: 5;   background: #f97316; }
.bmi-zone--ob2 { flex: 5;   background: #ef4444; }
.bmi-zone--ob3 { flex: 5;   background: #7f1d1d; border-radius: 0 8px 8px 0; }
.bmi-cursor {
  position: absolute;
  top: -4px;
  width: 4px;
  height: 20px;
  background: var(--surface, #fff);
  border: 2px solid var(--ink, #1f2937);
  border-radius: 3px;
  transform: translateX(-50%);
  transition: left 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}
/* ── end BMI Meter ─────────────────────────────────────────────────── */
/* Health & Medical collapsible */
.form-section-details { grid-column: 1 / -1; margin-top: 4px; }
.form-section-details > summary { display: block; padding: 8px 0; border-top: 1px solid var(--border); }
.form-section-details > summary::-webkit-details-marker,
.form-section-details > summary::marker { display: none; content: ""; }
/* Duplicate detection warning */
.dup-warn {
  display: block;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--warning-ink, #92400e);
  background: var(--warning-bg, #fef3c7);
  border: 1px solid var(--warning-border, #fcd34d);
  border-radius: var(--r-sm, 4px);
  padding: 4px 8px;
  margin-top: 4px;
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.4;
}
.dup-warn:hover { text-decoration: underline; }
/* WhatsApp opt-in checkbox row */
.checkbox-label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
  color: var(--ink);
  padding: 2px 0 8px;
}
.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: unset;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--primary);
}
input[readonly] { background: var(--surface-alt, var(--surface)); cursor: default; }

input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-soft);
  color: var(--ink);
  padding: 10px 12px;
  min-height: 44px;
  outline: none;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

textarea { resize: vertical; min-height: 80px; }

input:focus, select:focus, textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(0,194,255,0.16);
  background: var(--surface);
}

/* ===== Buttons ===== */
.primary-button, .ghost-button, .link-button, .icon-button, .file-button {
  min-height: 40px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  padding: 8px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  font-weight: 700;
  white-space: nowrap;
  transition: transform var(--dur-micro) var(--ease-spring), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), color var(--dur-base) var(--ease-out);
}

.primary-button { background: var(--primary); color: var(--on-primary); }
.primary-button:hover { transform: scale(1.02); background: var(--primary-strong); box-shadow: 0 4px 14px var(--primary-glow); }
.primary-button:active { transform: scale(0.97); box-shadow: none; }

.ghost-button, .file-button { background: transparent; border-color: var(--line); color: var(--ink); }
.ghost-button:hover, .file-button:hover { background: var(--surface-strong); border-color: var(--ink); }
.ghost-button:active, .file-button:active { transform: scale(0.97); }

.icon-button { background: var(--surface); border-color: var(--line); color: var(--muted); padding: 8px 10px; min-height: 36px; }
.icon-button:hover { border-color: var(--ink); color: var(--ink); background: var(--surface-strong); }
.icon-button:active { transform: scale(0.93); }
.icon-button .material-symbols-outlined, .mobile-nav .material-symbols-outlined { font-size: 20px; }

.link-button { background: transparent; color: var(--teal-ink); border: 0; padding: 8px; }
.link-button:hover { opacity: 0.75; }

.danger, .icon-button.danger { color: var(--danger); }
.icon-button.danger:hover { border-color: var(--danger); background: var(--danger-bg); }

/* Compact icon-only square button for table row actions */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-micro) var(--ease-spring);
}
.icon-btn:hover { background: var(--surface-strong); border-color: var(--ink); color: var(--ink); }
.icon-btn:active { transform: scale(0.9); }
.icon-btn .material-symbols-outlined { font-size: 18px; line-height: 1; }

/* Compact secondary meta text inside table cells */
.row-meta { display: block; font-size: 0.72rem; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.button-row, .row-actions, .page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.table-row .row-actions { flex-wrap: nowrap; gap: 4px; justify-content: flex-end; }

/* Days-remaining urgency chips inside Expiry cell */
.days-chip { display: inline-block; font-size: 0.68rem; font-weight: 600; padding: 1px 6px; border-radius: 20px; letter-spacing: 0.02em; margin-top: 3px; }
.days-danger { background: rgba(239,68,68,0.12); color: var(--danger, #ef4444); }
.days-warn   { background: rgba(234,179,8,0.12);  color: #b45309; }
.days-ok     { background: rgba(34,197,94,0.10);  color: #15803d; }

/* ===== Tables ===== */
.data-table, .list-table { display: grid; gap: 6px; overflow-x: hidden; }

.table-head, .table-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 0.8fr 0.8fr auto;
  gap: 12px;
  align-items: center;
}

.table-head {
  padding: 0 14px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.table-row {
  min-height: 58px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-base) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

.table-row:hover {
  border-color: rgba(0,194,255,0.4);
  box-shadow: 0 0 0 1px rgba(0,194,255,0.08), var(--shadow);
  transform: translateX(1px);
}

.table-row > span { min-width: 0; }
.table-row strong, .table-row small { display: block; overflow-wrap: anywhere; }
.table-note { grid-column: 1 / -1; color: var(--muted); }
.members-table .table-head,
.members-table .table-row {
  grid-template-columns: 1.25fr 0.85fr 0.8fr 0.7fr 0.7fr 0.6fr 100px;
}
.reminder-table .table-head,
.reminder-table .table-row {
  grid-template-columns: 1.4fr 1fr 0.8fr 116px;
}
.compact .table-row { grid-template-columns: 1fr auto; }

.payments-table .table-head,
.payments-table .table-row {
  grid-template-columns: 1.8fr 1.2fr 0.8fr 0.8fr 88px;
}

.checkins-table .table-head,
.checkins-table .table-row {
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
}

.inactive-table .table-head,
.inactive-table .table-row {
  grid-template-columns: 1.5fr 1fr 1fr;
}

.renewals-table .table-head,
.renewals-table .table-row {
  grid-template-columns: 1.4fr 1.1fr 1.1fr 0.8fr 180px;
}

.trainer-assignments-table .table-head,
.trainer-assignments-table .table-row {
  grid-template-columns: 1.2fr 1.2fr 1.5fr 1.2fr;
}

.progress-history-table .table-head,
.progress-history-table .table-row {
  grid-template-columns: 1.5fr 1fr 1fr 0.8fr 2fr;
}

.member-progress-history-table .table-head,
.member-progress-history-table .table-row {
  grid-template-columns: 1fr 0.8fr 0.8fr 1.5fr;
}

.member-payments-table .table-head,
.member-payments-table .table-row {
  grid-template-columns: 1.2fr 1fr 0.8fr 0.8fr;
}

.two-col-table .table-head,
.two-col-table .table-row {
  grid-template-columns: 1fr 1fr;
}

/* Reports Specific Tables */
.reports-plans-table .table-head,
.reports-plans-table .table-row {
  grid-template-columns: 1.8fr 1fr 1fr;
}

.reports-renewals-table .table-head,
.reports-renewals-table .table-row {
  grid-template-columns: 1.8fr 1fr 1.2fr;
}

.reports-inactive-table .table-head,
.reports-inactive-table .table-row {
  grid-template-columns: 1.8fr 1.2fr 120px;
}

.reports-pending-table .table-head,
.reports-pending-table .table-row {
  grid-template-columns: 1.8fr 1fr 120px;
}

.reports-points-table .table-head,
.reports-points-table .table-row {
  grid-template-columns: 0.6fr 1.4fr 1.2fr 100px;
}

/* Heatmap cell level styling */
.heatmap-cell {
  background: var(--surface-soft);
  color: var(--muted);
  opacity: 0.4;
  border-radius: var(--r-sm);
  padding: 10px 6px;
  min-width: 80px;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.heatmap-cell.level-1 {
  opacity: 1;
  background: rgba(16, 185, 129, 0.25);
  color: var(--teal-ink);
  font-weight: 700;
}
.heatmap-cell.level-2 {
  opacity: 1;
  background: rgba(16, 185, 129, 0.5);
  color: var(--teal-ink);
  font-weight: 700;
}
.heatmap-cell.level-3 {
  opacity: 1;
  background: rgba(16, 185, 129, 0.75);
  color: #ffffff;
  font-weight: 700;
  text-shadow: 0 1px 1px rgba(0,0,0,0.25);
}
.heatmap-cell.level-4 {
  opacity: 1;
  background: rgba(16, 185, 129, 1);
  color: #ffffff;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

/* Dark mode adjustments for heatmap */
[data-theme="dark"] .heatmap-cell.level-1 {
  background: rgba(16, 185, 129, 0.2);
  color: #a7f3d0;
}
[data-theme="dark"] .heatmap-cell.level-2 {
  background: rgba(16, 185, 129, 0.45);
  color: #ecfdf5;
}
[data-theme="dark"] .heatmap-cell.level-3 {
  background: rgba(16, 185, 129, 0.7);
  color: #ffffff;
}
[data-theme="dark"] .heatmap-cell.level-4 {
  background: rgba(16, 185, 129, 0.95);
  color: #ffffff;
}

/* WhatsApp button hover transition */
.reports-inactive-table .table-row a.icon-button {
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-micro) var(--ease-out) !important;
}
.reports-inactive-table .table-row a.icon-button:hover {
  background-color: #20ba5a !important;
  border-color: #20ba5a !important;
  transform: translateY(-1px) !important;
}

/* ===== Status pills ===== */
.status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: var(--r-pill);
  padding: 3px 10px;
  font-size: 0.69rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--primary-fade);
  color: var(--green-ink);
}

.status.expiring-soon, .status.pending, .status.partial { background: var(--warning-bg); color: var(--warning); }
.status.expired, .status.suspended, .status.refunded { background: var(--danger-bg); color: var(--danger); }
.status.paid, .status.active, .status.sent { background: var(--primary-fade); color: var(--green-ink); }

/* ===== Cards ===== */
.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.item-card {
  min-height: 148px;
  padding: 18px;
  display: grid;
  gap: 10px;
  transition: box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

.item-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-strong); }

.item-card div:first-child, .card-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.item-card span, .item-card small, .item-card p { color: var(--muted); overflow-wrap: anywhere; }
.item-card pre { white-space: pre-wrap; margin: 0; font-family: inherit; color: var(--ink); }

.client-check-list {
  display: grid;
  gap: 8px;
  max-height: 220px;
  overflow: auto;
  padding-right: 4px;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-soft);
  color: var(--ink);
  font-weight: 750;
}

.check-row input {
  width: auto;
  min-height: 0;
}

.module-preview {
  min-width: 0;
}

.preview-box {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-soft);
}

.preview-box pre {
  margin: 0;
  white-space: pre-wrap;
  font-family: inherit;
  color: var(--ink);
}

.structured-builder {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-soft);
}

.compact-heading {
  margin-bottom: 0;
  align-items: center;
}

.exercise-rows {
  display: grid;
  gap: 8px;
}

.exercise-row {
  display: grid;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
}

.exercise-row-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.exercise-row input {
  min-height: 38px;
  min-width: 0;
}

.exercise-row-actions {
  display: flex;
  justify-content: flex-end;
}

.exercise-remove {
  min-height: 38px;
  padding-inline: 10px;
  color: var(--danger);
  background: transparent;
  border-color: transparent;
}

.structured-exercise-list {
  display: grid;
  gap: 8px;
}

.structured-exercise-item {
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-soft);
}

.structured-exercise-item span,
.structured-exercise-item small {
  color: var(--muted);
}

/* ===== Bar chart ===== */
.bar-chart {
  min-height: 220px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
}

.bar-item { display: grid; gap: 8px; text-align: center; min-width: 0; }

.bar-track {
  height: 144px;
  display: flex;
  align-items: end;
  border-radius: var(--r-sm);
  background: var(--surface-strong);
  overflow: hidden;
  transition: background var(--dur-base) var(--ease-out);
}

.bar-track span {
  width: 100%;
  background: linear-gradient(180deg, var(--teal), var(--primary));
  border-radius: inherit;
  transition: height var(--dur-slow) var(--ease-out);
}

.bar-item strong { font-family: Montserrat, sans-serif; font-size: 0.82rem; color: var(--ink); }

/* ===== Empty states ===== */
.empty-state, .table-empty {
  min-height: 152px;
  display: grid;
  place-content: center;
  gap: 8px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  padding: 28px;
  transition: border-color var(--dur-base) var(--ease-out);
}

.empty-state strong { color: var(--ink); font-size: 0.95rem; }
.panel-hint { margin: 0; color: var(--muted); font-size: 0.88rem; line-height: 1.55; }

.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.detail-grid > div { display: grid; gap: 4px; }
.detail-grid span { color: var(--muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; }

.file-button input { display: none; }
.code-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.gym-code {
  font-family: Montserrat, monospace;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  background: var(--primary-fade);
  color: var(--green-ink);
}

/* ===== Toast ===== */
.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  max-width: min(360px, calc(100vw - 40px));
  padding: 12px 18px;
  border-radius: var(--r-md);
  background: var(--charcoal);
  color: #fff;
  box-shadow: var(--shadow-strong);
  transform: translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--dur-base) var(--ease-spring), opacity var(--dur-base) var(--ease-out);
  z-index: 1000;
  font-size: 0.9rem;
  font-weight: 500;
}

.toast.show { transform: translateY(0); opacity: 1; }

/* ===== Auth ===== */
.auth-layout {
  grid-column: 1 / -1;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
}

.auth-visual {
  min-height: 100svh;
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(rgba(18,18,18,0.78), rgba(18,18,18,0.58)),
    url("https://images.unsplash.com/photo-1534438327276-14e5300c3a48?auto=format&fit=crop&w=1400&q=80") center / cover;
  color: #fff;
}

.auth-brand { max-width: 580px; display: grid; gap: 18px; }
.auth-brand .brand-mark.large { background: var(--primary); color: var(--on-primary); }
.auth-brand h1 { font-size: clamp(2.8rem, 7vw, 6rem); font-weight: 800; letter-spacing: -0.03em; }
.auth-brand p { max-width: 520px; font-size: 1.05rem; line-height: 1.65; color: rgba(255,255,255,0.8); }

.auth-panel {
  align-self: center;
  margin: 24px;
  padding: 26px;
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-strong);
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  padding: 5px;
  border-radius: var(--r-md);
  background: var(--surface-strong);
  margin-bottom: 18px;
  transition: background var(--dur-base) var(--ease-out);
}

.auth-tabs button {
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  min-height: 38px;
  font-weight: 700;
  cursor: pointer;
  color: var(--muted);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.auth-tabs button.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.auth-tabs.sub { margin-bottom: 14px; background: var(--surface-soft); }
.auth-tabs.sub button { min-height: 34px; font-size: 0.85rem; }
.auth-form .primary-button { margin-top: 4px; }
.auth-note { margin-top: 14px; color: var(--muted); font-size: 0.88rem; }

/* Inline auth feedback (login/register success + error). */
.auth-msg {
  margin: 0 0 4px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.4;
}
.auth-msg.error {
  background: var(--danger-bg);
  color: var(--danger);
}
.auth-msg.success {
  background: var(--primary-fade, rgba(204, 255, 0, 0.18));
  color: var(--green-ink);
}

.hidden { display: none !important; }

/* ===== Modal ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(18,18,18,0.48);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fade-in var(--dur-fast) var(--ease-out);
}

.modal {
  width: min(440px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-strong);
  padding: 26px;
  display: grid;
  gap: 14px;
  animation: pop-in var(--dur-base) var(--ease-spring);
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

.modal p { color: var(--muted); line-height: 1.55; }
.modal-actions { justify-content: flex-end; margin-top: 6px; }

.danger-button {
  min-height: 40px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  padding: 8px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  font-weight: 700;
  background: var(--danger);
  color: #fff;
  transition: transform var(--dur-micro) var(--ease-spring), box-shadow var(--dur-fast) var(--ease-out);
}

.danger-button:hover { transform: scale(1.02); box-shadow: 0 4px 16px rgba(186,26,26,0.3); }
.danger-button:active { transform: scale(0.97); }

/* ===== Keyframes ===== */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes pop-in {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

/* ===== Spinner ===== */
.spinner {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  display: inline-block;
  animation: spin 600ms linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

button[data-loading] { opacity: 0.8; cursor: progress; pointer-events: none; }

/* ===== Trend chart ===== */
.trend-chart { display: grid; gap: 6px; }
.trend-chart svg { width: 100%; height: 156px; }
.trend-labels, .trend-range { display: flex; justify-content: space-between; color: var(--muted); font-size: 0.76rem; }

/* ===== Filter bar ===== */
.filter-bar {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}

.filter-bar label { text-transform: none; letter-spacing: normal; font-size: 0.72rem; }

.search-field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-soft);
  color: var(--muted);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-base) var(--ease-out);
}

.search-field input { border: 0; background: transparent; min-height: auto; padding: 0; color: var(--ink); }
.search-field:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,194,255,0.16); background: var(--surface); }
.search-field input:focus { box-shadow: none; outline: none; }

code { padding: 2px 6px; border-radius: 5px; background: var(--surface-strong); font-size: 0.87em; transition: background var(--dur-base) var(--ease-out); }

/* ===== Skeleton ===== */
.skeleton {
  background: linear-gradient(90deg, var(--surface-strong) 25%, var(--surface-soft) 50%, var(--surface-strong) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--r-sm);
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ===== Focus rings ===== */
:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== Scrollbar ===== */
@supports (scrollbar-width: thin) {
  * { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
}

/* ===================================================================
   COLOR THEMES  (set via gym.config.js → data-color-theme on <html>)

   Each theme overrides only accent tokens; light/dark surfaces are
   controlled separately by data-theme="dark" (user-toggled).

   Themes:
     neon-lime      — default, already in :root
     electric-blue  — Azure blue + Emerald  (energetic, modern)
     fire-orange    — Blaze orange + Gold   (high-intensity)
     crimson-force  — Power red + Amber     (aggressive)
     ultra-violet   — Purple + Indigo       (premium/tech)
     arctic-cyan    — Cyan + Mint           (cool, ice)
     solar-gold     — Champion gold + Orange (achievement)
     plasma-pink    — Hot pink + Purple     (vibrant/bold)
     matrix-green   — Terminal green + Teal (hacker/tech)
     midnight-teal  — Deep teal + Indigo    (calm/focus)
   =================================================================== */

/* ── electric-blue ─────────────────────────────────────────────── */
[data-color-theme="electric-blue"] {
  --primary:        #0a84ff;
  --primary-strong: #0070d8;
  --on-primary:     #ffffff;
  --primary-fade:   rgba(10,132,255,0.14);
  --primary-subtle: rgba(10,132,255,0.11);
  --primary-glow:   rgba(10,132,255,0.26);
  --teal:           #34c759;
  --teal-ink:       #006b28;
  --green-ink:      #004494;
}
[data-theme="dark"][data-color-theme="electric-blue"] {
  --teal-ink:  #4da6ff;
  --green-ink: #4da6ff;
}

/* ── fire-orange ───────────────────────────────────────────────── */
[data-color-theme="fire-orange"] {
  --primary:        #ff6b00;
  --primary-strong: #e05f00;
  --on-primary:     #ffffff;
  --primary-fade:   rgba(255,107,0,0.14);
  --primary-subtle: rgba(255,107,0,0.11);
  --primary-glow:   rgba(255,107,0,0.26);
  --teal:           #ffd60a;
  --teal-ink:       #7a5c00;
  --green-ink:      #7a3300;
}
[data-theme="dark"][data-color-theme="fire-orange"] {
  --teal-ink:  #ffb340;
  --green-ink: #ff8f3a;
}

/* ── crimson-force ─────────────────────────────────────────────── */
[data-color-theme="crimson-force"] {
  --primary:        #ff2d55;
  --primary-strong: #e0163f;
  --on-primary:     #ffffff;
  --primary-fade:   rgba(255,45,85,0.14);
  --primary-subtle: rgba(255,45,85,0.11);
  --primary-glow:   rgba(255,45,85,0.26);
  --teal:           #ff9f0a;
  --teal-ink:       #7a4500;
  --green-ink:      #8a0022;
}
[data-theme="dark"][data-color-theme="crimson-force"] {
  --teal-ink:  #ffa040;
  --green-ink: #ff6b85;
}

/* ── ultra-violet ──────────────────────────────────────────────── */
[data-color-theme="ultra-violet"] {
  --primary:        #bf5af2;
  --primary-strong: #a84de0;
  --on-primary:     #ffffff;
  --primary-fade:   rgba(191,90,242,0.14);
  --primary-subtle: rgba(191,90,242,0.11);
  --primary-glow:   rgba(191,90,242,0.26);
  --teal:           #5e5ce6;
  --teal-ink:       #2c2ab8;
  --green-ink:      #5a0090;
}
[data-theme="dark"][data-color-theme="ultra-violet"] {
  --teal-ink:  #a389f5;
  --green-ink: #d68ef7;
}

/* ── arctic-cyan ───────────────────────────────────────────────── */
[data-color-theme="arctic-cyan"] {
  --primary:        #00d4ff;
  --primary-strong: #00b8e0;
  --on-primary:     #121212;
  --primary-fade:   rgba(0,212,255,0.14);
  --primary-subtle: rgba(0,212,255,0.11);
  --primary-glow:   rgba(0,212,255,0.26);
  --teal:           #00ff88;
  --teal-ink:       #006b44;
  --green-ink:      #006688;
}
[data-theme="dark"][data-color-theme="arctic-cyan"] {
  --teal-ink:  #40e0ff;
  --green-ink: #40e0ff;
}

/* ── solar-gold ────────────────────────────────────────────────── */
[data-color-theme="solar-gold"] {
  --primary:        #ffd60a;
  --primary-strong: #e0bb00;
  --on-primary:     #121212;
  --primary-fade:   rgba(255,214,10,0.14);
  --primary-subtle: rgba(255,214,10,0.11);
  --primary-glow:   rgba(255,214,10,0.26);
  --teal:           #ff6b00;
  --teal-ink:       #7a3300;
  --green-ink:      #7a6200;
}
[data-theme="dark"][data-color-theme="solar-gold"] {
  --teal-ink:  #ffb340;
  --green-ink: #ffe040;
}

/* ── plasma-pink ───────────────────────────────────────────────── */
[data-color-theme="plasma-pink"] {
  --primary:        #ff375f;
  --primary-strong: #e0204a;
  --on-primary:     #ffffff;
  --primary-fade:   rgba(255,55,95,0.14);
  --primary-subtle: rgba(255,55,95,0.11);
  --primary-glow:   rgba(255,55,95,0.26);
  --teal:           #bf5af2;
  --teal-ink:       #6a1a9a;
  --green-ink:      #8a0032;
}
[data-theme="dark"][data-color-theme="plasma-pink"] {
  --teal-ink:  #d68ef7;
  --green-ink: #ff7a95;
}

/* ── matrix-green ──────────────────────────────────────────────── */
[data-color-theme="matrix-green"] {
  --primary:        #00ff41;
  --primary-strong: #00e038;
  --on-primary:     #121212;
  --primary-fade:   rgba(0,255,65,0.14);
  --primary-subtle: rgba(0,255,65,0.11);
  --primary-glow:   rgba(0,255,65,0.26);
  --teal:           #00c7be;
  --teal-ink:       #006660;
  --green-ink:      #007a1f;
}
[data-theme="dark"][data-color-theme="matrix-green"] {
  --teal-ink:  #26e0d7;
  --green-ink: #40ff60;
}

/* ── midnight-teal ─────────────────────────────────────────────── */
[data-color-theme="midnight-teal"] {
  --primary:        #00c7be;
  --primary-strong: #00afa7;
  --on-primary:     #121212;
  --primary-fade:   rgba(0,199,190,0.14);
  --primary-subtle: rgba(0,199,190,0.11);
  --primary-glow:   rgba(0,199,190,0.26);
  --teal:           #5e5ce6;
  --teal-ink:       #2c2ab8;
  --green-ink:      #005555;
}
[data-theme="dark"][data-color-theme="midnight-teal"] {
  --teal-ink:  #a389f5;
  --green-ink: #26e0d7;
}

/* ===================================================================
   RESPONSIVE — Tablet (768px – 1023px)
   =================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  .app-shell { grid-template-columns: 68px minmax(0, 1fr); }

  .sidebar {
    padding: 16px 8px;
    align-items: center;
    overflow: visible;
  }

  .brand { padding: 4px 0 16px; justify-content: center; flex-direction: column; gap: 0; }
  .brand > div { display: none; }

  .nav-list a {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 11px 8px;
    min-height: 48px;
    border-radius: var(--r-sm);
  }

  .nav-list a > span:last-child { display: none; }
  .nav-icon { width: auto; }

  .profile-chip strong, .profile-chip span { display: none; }
  .profile-chip { justify-content: center; padding: 8px; }
  .sidebar-footer { width: 100%; }
  .sidebar-attribution { display: none; }

  .topbar { padding: 0 20px; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-grid, .work-grid { grid-template-columns: 1fr; }
}

/* ===================================================================
   RESPONSIVE — Medium desktop (1024px – 1279px)
   =================================================================== */
@media (min-width: 1024px) and (max-width: 1279px) {
  .metric-grid, .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-grid, .work-grid { grid-template-columns: 1fr; }
}

/* ===================================================================
   RESPONSIVE — Mobile (< 768px)
   =================================================================== */
@media (max-width: 767px) {
  .app-shell { grid-template-columns: 1fr; }

  .sidebar {
    position: fixed;
    z-index: 20;
    inset: 0 auto 0 0;
    width: min(290px, 84vw);
    transform: translateX(-105%);
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
    box-shadow: none;
  }

  .nav-open .sidebar { transform: translateX(0); box-shadow: var(--shadow-strong); }
  .nav-open .nav-scrim { display: block; }

  .mobile-nav { display: inline-flex; flex-shrink: 0; }

  .topbar { padding: 0 16px; gap: 10px; min-height: 58px; }
  .topbar-search { max-width: none; flex: 1; }
  .topbar-user { display: none; }

  .content-panel { padding: 16px 16px 32px; }
  .page-header { align-items: flex-start; flex-direction: column; gap: 12px; }
  .form-grid, .metric-grid, .card-grid { grid-template-columns: 1fr; }
  .table-head { display: none; }

  .table-row, .members-table .table-row, .reminder-table .table-row, .compact .table-row {
    grid-template-columns: 1fr !important;
    gap: 10px;
    padding: 14px;
    border-left: 4px solid var(--primary);
  }

  .exercise-row {
    padding: 10px;
  }

  .exercise-row-metrics {
    grid-template-columns: 1fr;
  }

  .exercise-row-actions {
    justify-content: stretch;
  }

  .exercise-remove {
    width: 100%;
  }

  .row-actions { justify-content: flex-start; }
  .auth-layout { grid-template-columns: 1fr; }
  .auth-visual { min-height: 38vh; padding: 28px 20px; }
  .auth-panel { margin: 16px; padding: 20px; }
  .filter-bar { grid-template-columns: 1fr; }
  .split-grid, .work-grid { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
}

/* ===================================================================
   RESPONSIVE — Small mobile (< 520px)
   =================================================================== */
@media (max-width: 520px) {
  .content-panel { padding: 12px 12px 24px; }
  .panel { padding: 14px; }
  .metric { min-height: 94px; }
  .metric strong { font-size: 1.6rem; }
  .pill-button span:not(.material-symbols-outlined) { display: none; }
  .pill-button { min-height: 38px; padding: 8px 12px; }
  .bar-chart { gap: 6px; }
  .bar-item strong { display: none; }
  .primary-button, .ghost-button, .link-button, .file-button { width: 100%; justify-content: center; }
}

/* ===================================================================
   PHASE 11 — Member Workout Logging & Exercise Library
   =================================================================== */

.tabs-header {
  display: flex;
  gap: 8px;
  border-bottom: 2px solid var(--line);
  margin-bottom: 20px;
  padding-bottom: 4px;
}

.tabs-header .tab-btn {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-weight: 600;
  font-size: 1rem;
  padding: 8px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: -6px;
  transition: all var(--dur-micro) var(--ease-out);
}

.tabs-header .tab-btn:hover {
  color: var(--ink);
}

.tabs-header .tab-btn.active {
  color: var(--accent, var(--primary-strong));
  border-bottom-color: var(--accent, var(--primary-strong));
}

.schedule-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.schedule-day-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.schedule-day-row .day-name {
  font-weight: 700;
  width: 90px;
}

.schedule-day-row .routine-name {
  flex: 1;
  font-size: 0.95rem;
  padding-left: 10px;
}

.schedule-day-row .routine-name.rest-day {
  color: var(--muted);
  font-style: italic;
}

.schedule-day-row .routine-name.has-routine {
  color: var(--accent, var(--primary-strong));
  font-weight: 600;
}

.active-workout-header {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 15px 20px;
  margin-bottom: 10px;
  box-shadow: var(--shadow);
}

.active-timer {
  font-family: monospace;
  font-size: 1.5rem;
  letter-spacing: 0.5px;
}

.active-set-row {
  transition: background var(--dur-micro) var(--ease-out);
}

.active-set-row.set-done {
  background: rgba(22, 163, 74, 0.1) !important;
}

.active-set-row input, .active-set-row select {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  color: var(--ink);
}

.active-set-row.set-done input, .active-set-row.set-done select {
  border-color: rgba(22, 163, 74, 0.4);
}

.feed-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.feed-item {
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-micro) var(--ease-out);
}

.feed-item:hover {
  transform: translateY(-1px);
}

.avatar-circle {
  font-family: Inter, sans-serif;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.badge {
  display: inline-block;
  padding: 2px 6px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--r-xs);
  text-transform: uppercase;
}

.badge.private {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid var(--danger);
}

.badge.public {
  background: var(--primary-fade);
  color: var(--ink);
  border: 1px solid var(--line);
}

.modal-tabs {
  border-bottom: 1px solid var(--line);
}

.modal-tabs .tab-btn {
  font-size: 0.9rem;
  padding: 6px 12px;
}

@media (max-width: 768px) {
  .schedule-day-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  
  .schedule-day-row .routine-name {
    padding-left: 0;
  }
  
  .schedule-day-row button {
    width: 100%;
  }
}

/* Password visibility container & toggle styles */
.password-container {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.password-container input {
  padding-right: 42px !important;
  width: 100%;
}
.toggle-password-btn {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: color var(--dur-fast) var(--ease-out);
}
.toggle-password-btn:hover {
  color: var(--ink);
}
.toggle-password-btn .material-symbols-outlined {
  font-size: 20px;
}

.mobile-only-btn {
  display: none !important;
}

@media (max-width: 1279px) {
  .work-grid {
    display: flex !important;
    flex-direction: column !important;
  }
  .work-grid > section {
    order: 1 !important;
  }
  .work-grid > form {
    order: 2 !important;
  }
  .mobile-only-btn {
    display: inline-flex !important;
  }
}

/* Weekly Schedule horizontal pills */
.weekly-schedule-container {
  display: flex;
  gap: 8px;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
  scrollbar-width: none;
}
.weekly-schedule-container::-webkit-scrollbar {
  display: none;
}

.schedule-pill {
  flex: 1;
  min-width: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 5px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.schedule-pill:hover {
  border-color: var(--accent);
  background: var(--surface-light, rgba(255,255,255,0.03));
}

.schedule-pill.active {
  border-color: var(--accent) !important;
  background: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.15);
}

.schedule-pill .day-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
  margin-top: 6px;
  transition: background 0.2s ease;
}

.schedule-pill.has-routine .day-dot {
  background: var(--accent);
}

.schedule-pill.active.has-routine .day-dot {
  background: #fff !important;
}

/* Collapse forms by default on mobile in work-grid */
@media (max-width: 1279px) {
  .work-grid > form.panel {
    display: none !important;
  }
  .work-grid > form.panel.active {
    display: flex !important;
    flex-direction: column !important;
    animation: slideDown 0.25s ease-out;
  }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Active Workout Logger sets table rules */
.logger-table-head {
  display: grid;
  gap: 12px;
  align-items: center;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.logger-set-row {
  display: grid;
  gap: 12px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px dashed var(--line-soft);
  transition: background 0.15s ease;
}

.logger-set-row.set-done {
  background: var(--primary-subtle);
  border-radius: var(--r-xs);
}

/* ===================================================================
   MOBILE OVERRIDES & PARADIGMS FOR PREMIUM UX
   =================================================================== */

/* Font Family styling fallback to Barlow Condensed / Barlow as per design system */
h1, h2, .brand-mark, .metric strong, .auth-brand h1 {
  font-family: 'Barlow Condensed', Montserrat, Inter, sans-serif !important;
}

body, button, input, select, textarea, .profile-chip strong {
  font-family: 'Barlow', Inter, sans-serif;
}

/* Compact Metrics Grid on Mobile */
@media (max-width: 767px) {
  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
  }
  .metric {
    min-height: 72px !important;
    padding: 10px 10px 10px 14px !important;
    gap: 4px !important;
    border-radius: var(--r-md) !important;
  }
  .metric span {
    font-size: 0.65rem !important;
    letter-spacing: 0.05em !important;
  }
  .metric strong {
    font-size: 1.35rem !important;
  }
}

@media (max-width: 400px) {
  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  .metric {
    min-height: 64px !important;
    padding: 8px 8px 8px 10px !important;
  }
  .metric strong {
    font-size: 1.15rem !important;
  }
}

/* 2-Column Filters on Mobile */
@media (max-width: 767px) {
  .filter-bar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 10px !important;
    border-radius: var(--r-md) !important;
  }
  .filter-bar > label {
    font-size: 0.72rem !important;
  }
  .filter-bar > label.wide,
  .filter-bar > label:first-child {
    grid-column: span 2 !important;
  }
}

/* Responsive Tables & Lists with Data Labels on Mobile */
@media (max-width: 767px) {
  .data-table .table-row, 
  .members-table .table-row, 
  .reminder-table .table-row, 
  .compact .table-row,
  .reports-plans-table .table-row,
  .reports-renewals-table .table-row,
  .reports-inactive-table .table-row,
  .reports-pending-table .table-row,
  .reports-points-table .table-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 12px 14px !important;
    border-left: 4px solid var(--primary) !important;
    border-radius: var(--r-md) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-card) !important;
    margin-bottom: 8px !important;
  }

  .data-table .table-row > span[data-label],
  .members-table .table-row > span[data-label],
  .reminder-table .table-row > span[data-label],
  .compact .table-row > span[data-label],
  .reports-plans-table .table-row > span[data-label],
  .reports-renewals-table .table-row > span[data-label],
  .reports-inactive-table .table-row > span[data-label],
  .reports-pending-table .table-row > span[data-label],
  .reports-points-table .table-row > span[data-label] {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    text-align: right !important;
    font-size: 0.85rem !important;
    padding: 4px 0 !important;
    border-bottom: 1px dashed var(--line-soft) !important;
  }

  .data-table .table-row > span[data-label]::before,
  .members-table .table-row > span[data-label]::before,
  .reminder-table .table-row > span[data-label]::before,
  .compact .table-row > span[data-label]::before,
  .reports-plans-table .table-row > span[data-label]::before,
  .reports-renewals-table .table-row > span[data-label]::before,
  .reports-inactive-table .table-row > span[data-label]::before,
  .reports-pending-table .table-row > span[data-label]::before,
  .reports-points-table .table-row > span[data-label]::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--muted);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: left !important;
    flex-shrink: 0;
    margin-right: 12px;
  }

  .data-table .table-row > .row-actions,
  .members-table .table-row > .row-actions,
  .reminder-table .table-row > .row-actions,
  .compact .table-row > .row-actions,
  .reports-plans-table .table-row > .row-actions,
  .reports-renewals-table .table-row > .row-actions,
  .reports-inactive-table .table-row > .row-actions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    border-bottom: none !important;
    padding-top: 6px !important;
    margin-top: 2px !important;
  }

  .table-row > .table-note {
    display: block !important;
    color: var(--muted) !important;
    font-size: 0.76rem !important;
    margin-top: 2px !important;
    opacity: 0.8 !important;
  }
}

/* Active Workout Logger sets table rules on mobile */
@media (max-width: 520px) {
  .logger-table-head, .logger-set-row, .active-set-row {
    grid-template-columns: 32px 1fr 1fr 1fr 1fr 40px !important;
    gap: 4px !important;
  }
  .logger-table-head span {
    font-size: 0.7rem !important;
  }
  .active-set-row input, .active-set-row select {
    padding: 4px 2px !important;
    font-size: 0.8rem !important;
    min-height: 32px !important;
    border-radius: var(--r-xs) !important;
  }
  .prev-best-label {
    font-size: 0.7rem !important;
  }
}

/* Modal optimizations on Mobile */
@media (max-width: 767px) {
  .modal {
    padding: 16px !important;
    max-height: 90vh !important;
    border-radius: var(--r-md) !important;
  }
  .modal-tabs .tab-btn {
    padding: 6px 8px !important;
    font-size: 0.8rem !important;
    gap: 4px !important;
  }
  .panel-heading h2 {
    font-size: 1.1rem !important;
  }
}

/* ===== Neumorphic Progress Bars ===== */
.nm-progress-track {
  width: 100%;
  height: 6px;
  background: var(--bg);
  box-shadow: var(--nm-inset);
  border-radius: 3px;
  overflow: hidden;
}

.nm-progress-bar {
  height: 100%;
  border-radius: 3px;
  background: var(--muted);
  box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
  transition: width 0.3s ease;
}

/* ===== Premium Gamification (Awards & PRs) Style System ===== */
@keyframes shiny-shine {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes pulse-glow-gold {
  0% { box-shadow: 0 0 5px rgba(255, 179, 0, 0.25), var(--nm-glow-gold); }
  50% { box-shadow: 0 0 20px rgba(255, 179, 0, 0.65), var(--nm-glow-gold); }
  100% { box-shadow: 0 0 5px rgba(255, 179, 0, 0.25), var(--nm-glow-gold); }
}
@keyframes pulse-glow-silver {
  0% { box-shadow: 0 0 5px rgba(144, 164, 174, 0.25), var(--nm-glow-silver); }
  50% { box-shadow: 0 0 20px rgba(144, 164, 174, 0.65), var(--nm-glow-silver); }
  100% { box-shadow: 0 0 5px rgba(144, 164, 174, 0.25), var(--nm-glow-silver); }
}
@keyframes pulse-glow-bronze {
  0% { box-shadow: 0 0 5px rgba(216, 67, 21, 0.2), var(--nm-glow-bronze); }
  50% { box-shadow: 0 0 15px rgba(216, 67, 21, 0.55), var(--nm-glow-bronze); }
  100% { box-shadow: 0 0 5px rgba(216, 67, 21, 0.2), var(--nm-glow-bronze); }
}

/* Tier level header */
.tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}
.tier-badge.tier-bronze {
  background: linear-gradient(135deg, #FFE0B2 0%, #FFB74D 100%);
  color: #5D4037;
  border-color: #FFCC80;
}
.tier-badge.tier-silver {
  background: linear-gradient(135deg, #ECEFF1 0%, #B0BEC5 100%);
  color: #37474F;
  border-color: #CFD8DC;
}
.tier-badge.tier-gold {
  background: linear-gradient(135deg, #FFF9C4 0%, #FBC02D 100%);
  color: #5D4037;
  border-color: #FFEE58;
}
.tier-badge.tier-platinum {
  background: linear-gradient(135deg, #E0F7FA 0%, #00E5FF 100%);
  color: #006064;
  border-color: #B2EBF2;
  animation: pulse-soft 2s infinite alternate;
}

/* Premium Badge Cards */
.badge-card-premium {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 16px;
  border-radius: var(--r-lg);
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out), opacity var(--dur-base);
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid transparent;
}
.badge-card-premium:hover {
  transform: translateY(-4px);
}

.badge-card-premium.badge-locked {
  background: var(--surface-soft);
  box-shadow: var(--nm-inset);
  border-color: var(--line-soft);
  opacity: 0.65;
  color: var(--muted);
}
.badge-card-premium.badge-locked:hover {
  opacity: 0.95;
  border-color: var(--line);
}

.badge-card-premium.badge-unlocked {
  background-size: 200% auto;
  border-color: rgba(255, 255, 255, 0.4);
}
.badge-card-premium.badge-unlocked::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(115deg, transparent 0%, transparent 40%, rgba(255,255,255,0.3) 50%, transparent 60%, transparent 100%);
  background-size: 200% 100%;
  animation: shiny-shine 5s infinite linear;
  pointer-events: none;
  opacity: 0.6;
}

.badge-card-premium.badge-gold {
  background: linear-gradient(135deg, #FFFDE7 0%, #FFF59D 30%, #FBC02D 70%, #F57F17 100%);
  color: #3E2723;
  animation: pulse-glow-gold 3s infinite;
}
.badge-card-premium.badge-silver {
  background: linear-gradient(135deg, #ECEFF1 0%, #CFD8DC 30%, #90A4AE 70%, #546E7A 100%);
  color: #263238;
  animation: pulse-glow-silver 3s infinite;
}
.badge-card-premium.badge-bronze {
  background: linear-gradient(135deg, #FFE0B2 0%, #FFB74D 30%, #E65100 70%, #BF360C 100%);
  color: #3E2723;
  animation: pulse-glow-bronze 3s infinite;
}

/* Glowing Neumorphic Progress for Badges */
.badge-card-premium .nm-progress-track {
  background: rgba(0, 0, 0, 0.08);
  box-shadow: inset 1px 1px 3px rgba(0,0,0,0.15);
  height: 6px;
}
.badge-card-premium .nm-progress-bar {
  background: var(--teal);
  box-shadow: 0 0 6px rgba(0, 194, 255, 0.6);
}

/* Celebration Backdrop */
.modal-overlay.celebration-overlay {
  backdrop-filter: blur(12px) saturate(180%);
  background: rgba(14, 14, 14, 0.85);
}
.modal-card.celebration-card {
  background: var(--surface) !important;
  border: 3px solid var(--primary) !important;
  box-shadow: 0 20px 50px rgba(204, 255, 0, 0.3) !important;
  position: relative;
  overflow: hidden;
}
.modal-card.celebration-card::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%; width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(204, 255, 0, 0.12) 0%, transparent 60%);
  animation: pulse-soft 4s infinite alternate;
  pointer-events: none;
}

/* ===== Billing Alerts Widget ===== */
.billing-status-widget {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: var(--shadow);
  border-left: 5px solid var(--muted);
  transition: all 0.3s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}
.billing-status-widget.status-active {
  border-left-color: var(--teal);
  box-shadow: 0 4px 15px rgba(0, 194, 255, 0.08), var(--shadow);
}
.billing-status-widget.status-due {
  border-left-color: var(--warning);
  box-shadow: 0 4px 15px rgba(212, 168, 0, 0.12), var(--shadow);
}
.billing-status-widget.status-overdue {
  border-left-color: var(--danger);
  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.14), var(--shadow);
}

/* ===== SVG Charts Styling ===== */
.gymflow-chart {
  width: 100%;
  height: auto;
  font-family: inherit;
}
.gymflow-chart text {
  fill: var(--muted);
  font-size: 10px;
  font-weight: 600;
}
.gymflow-chart .grid-line {
  stroke: var(--line-soft);
  stroke-width: 1px;
  stroke-dasharray: 2 2;
}
.gymflow-chart .axis-line {
  stroke: var(--line);
  stroke-width: 1.5px;
}
.gymflow-chart .chart-line-path {
  fill: none;
  stroke: var(--teal);
  stroke-width: 3.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0px 3px 6px rgba(0, 194, 255, 0.35));
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw-chart-line 1.8s var(--ease-out) forwards;
}
.gymflow-chart .chart-bar-rect {
  fill: var(--primary);
  rx: var(--r-xs);
  ry: var(--r-xs);
  filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.1));
  transition: fill var(--dur-fast) var(--ease-out);
  animation: grow-chart-bar 1.2s var(--ease-spring) forwards;
}
.gymflow-chart .chart-bar-rect:hover {
  fill: var(--primary-strong);
}
.gymflow-chart .chart-donut-slice {
  stroke-linecap: round;
  transition: stroke-width var(--dur-fast) var(--ease-out), opacity var(--dur-fast);
}
.gymflow-chart .chart-donut-slice:hover {
  stroke-width: 24;
  opacity: 0.95;
}

@keyframes draw-chart-line {
  to { stroke-dashoffset: 0; }
}
@keyframes grow-chart-bar {
  from { transform: scaleY(0); transform-origin: bottom; }
  to { transform: scaleY(1); transform-origin: bottom; }
}

/* ===== Invoice / Receipt Layout ===== */
.invoice-modal {
  padding: 24px;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-strong);
  border: 1px solid var(--line-soft);
}
.invoice-header {
  border-bottom: 2px dashed var(--line);
  padding-bottom: 16px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.invoice-meta {
  text-align: right;
  font-size: 0.8rem;
  color: var(--muted);
}
.invoice-table {
  width: 100%;
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.invoice-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.9rem;
}
.invoice-row.total-row {
  border-top: 2px solid var(--line);
  border-bottom: none;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--accent);
  padding-top: 12px;
}

/* ===== Invoice Print View Rules ===== */
@media print {
  body > :not(.modal-overlay.invoice-print-overlay) {
    display: none !important;
  }
  .modal-overlay.invoice-print-overlay {
    background: none !important;
    backdrop-filter: none !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: auto !important;
    padding: 0 !important;
    box-shadow: none !important;
    display: block !important;
  }
  .invoice-modal {
    box-shadow: none !important;
    border: none !important;
    background: #fff !important;
    color: #000 !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
  }
  .modal-close, .invoice-actions-btn {
    display: none !important;
  }
}

/* Mobile responsive compact styling for community feed */
@media (max-width: 480px) {
  .feed-item {
    padding: 8px !important;
  }
  .feed-item .avatar-circle {
    width: 30px !important;
    height: 30px !important;
    font-size: 0.8rem !important;
  }
  .feed-item > div {
    padding-left: 0 !important;
  }
  .feed-item h4 {
    font-size: 0.9rem !important;
  }
}