/* style.css — IronZ Design System */

/* ===== 1. VARIABLES & RESET ===== */

/* ── Theme 3: Stone (default — warm off-white, ink black, editorial) ── */
:root {
  color-scheme: light;
  --color-bg:           #edeae4;
  --color-surface:      #f5f2ee;
  --color-surface-2:    #ffffff;
  --color-border:       rgba(0, 0, 0, 0.1);
  --color-header-bg:    rgba(237, 234, 228, 0.92);
  --color-accent:       #111111;
  --color-accent-dark:  #000000;
  --color-accent-text:  #ffffff;
  --color-accent-glow:  rgba(0, 0, 0, 0.07);
  --color-cyan:         #1d4ed8;
  --color-amber:        #92400e;
  --color-violet:       #6d28d9;
  --color-teal:         #0f766e;
  --color-brand:        #d63031;
  --color-danger:       #b91c1c;
  --color-success:      #15803d;
  --color-text:         #111111;
  --color-text-muted:   #6b7280;

  --color-primary:      var(--color-accent);
  --color-primary-dark: var(--color-accent-dark);
  --color-secondary:    var(--color-text-muted);
  --color-tag-run:      var(--color-amber);
  --color-tag-lift:     var(--color-violet);
  --color-tag-tri:      var(--color-cyan);
  --color-tag-cycle:    var(--color-teal);
  --color-tag-general:  var(--color-text-muted);

  --color-heat-1: rgba(214, 48, 49, 0.2);
  --color-heat-2: rgba(214, 48, 49, 0.5);

  --radius: 12px;
  --shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}

/* ── Theme 1: Blackout (pure black, electric lime, terminal energy) ── */
:root[data-theme="blackout"] {
  color-scheme: dark;
  --color-bg:           #000000;
  --color-surface:      #0d0d0d;
  --color-surface-2:    #181818;
  --color-border:       rgba(255, 255, 255, 0.09);
  --color-header-bg:    rgba(0, 0, 0, 0.97);
  --color-accent:       #e53e3e;
  --color-accent-dark:  #c53030;
  --color-accent-text:  #ffffff;
  --color-accent-glow:  rgba(229, 62, 62, 0.25);
  --color-brand:        #e53e3e;
  --color-cyan:         #39ff14;
  --color-amber:        #c8ff00;
  --color-violet:       #a8ff3e;
  --color-teal:         #39ff14;
  --color-danger:       #ff4545;
  --color-success:      #39ff14;
  --color-text:         #ffffff;
  --color-text-muted:   #555555;

  --color-primary:      var(--color-accent);
  --color-primary-dark: var(--color-accent-dark);
  --color-secondary:    var(--color-text-muted);
  --color-tag-run:      var(--color-amber);
  --color-tag-lift:     var(--color-violet);
  --color-tag-tri:      var(--color-cyan);
  --color-tag-cycle:    var(--color-teal);
  --color-tag-general:  var(--color-text-muted);
  --color-heat-1: rgba(229, 62, 62, 0.25);
  --color-heat-2: rgba(229, 62, 62, 0.55);

  --shadow: 0 4px 24px rgba(0, 0, 0, 0.8);
}

/* ── Theme 2: Iron (deep navy-charcoal, fire orange, structured) ── */
:root[data-theme="iron"] {
  color-scheme: dark;
  --color-bg:           #151925;
  --color-surface:      #1e2535;
  --color-surface-2:    #252d40;
  --color-border:       rgba(255, 255, 255, 0.07);
  --color-header-bg:    rgba(19, 24, 37, 0.94);
  --color-accent:       #e53e3e;
  --color-accent-dark:  #c53030;
  --color-accent-text:  #ffffff;
  --color-accent-glow:  rgba(229, 62, 62, 0.25);
  --color-brand:        #e53e3e;
  --color-cyan:         #38bdf8;
  --color-amber:        #f97316;
  --color-violet:       #a78bfa;
  --color-teal:         #2dd4bf;
  --color-danger:       #f87171;
  --color-success:      #4ade80;
  --color-text:         #e8edf5;
  --color-text-muted:   #64748b;

  --color-primary:      var(--color-accent);
  --color-primary-dark: var(--color-accent-dark);
  --color-secondary:    var(--color-text-muted);
  --color-tag-run:      var(--color-amber);
  --color-tag-lift:     var(--color-violet);
  --color-tag-tri:      var(--color-cyan);
  --color-tag-cycle:    var(--color-teal);
  --color-tag-general:  var(--color-text-muted);
  --color-heat-1: rgba(229, 62, 62, 0.25);
  --color-heat-2: rgba(229, 62, 62, 0.55);

  --shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}


/* ===== 2. LAYOUT ===== */

header {
  background-color: var(--color-header-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  padding: 14px 24px;
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
  padding-left: calc(24px + env(safe-area-inset-left, 0px));
  padding-right: calc(24px + env(safe-area-inset-right, 0px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  transition: opacity 0.15s;
}

.logo:hover { opacity: 0.8; }

.logo-mark {
  font-size: 1.4rem;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
}

/* Stone: light bg — drop gradient trick, use plain color */
:root[data-theme="stone"] .logo-mark {
  filter: none;
  color: var(--color-brand);
}
:root[data-theme="stone"] .logo-text {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #111111 !important;
  color: #111111;
}
:root[data-theme="stone"] .nav-circle.active {
  background: var(--color-brand);
  border-color: var(--color-brand);
}
:root[data-theme="stone"] .sv-open-btn {
  background: var(--color-brand);
}
:root[data-theme="stone"] .sv-open-btn:hover {
  background: #b92626;
}

.logo-text {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.65rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  background: linear-gradient(160deg, #ffffff 0%, #d0d0d0 50%, #909090 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

main {
  max-width: 820px;
  margin: 0 auto;
  padding: 24px 16px 80px;
  padding-left: calc(16px + env(safe-area-inset-left, 0px));
  padding-right: calc(16px + env(safe-area-inset-right, 0px));
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tab-content {
  display: none;
  flex-direction: column;
  gap: 20px;
}

.tab-content.active {
  display: flex;
}


/* ===== 3. NAVIGATION ===== */

nav {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Circle nav buttons */
.nav-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  font-size: 1rem;
}

.nav-circle .icon {
  width: 1.15em;
  height: 1.15em;
}

.nav-circle:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-glow);
}

.nav-circle.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-text);
  box-shadow: 0 0 14px var(--color-accent-glow);
}

/* Profile circle initials */
.nav-profile-circle {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Profile dropdown wrapper */
.nav-profile-wrap {
  position: relative;
}

/* Dropdown panel */
.nav-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 168px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
  z-index: 200;
  flex-direction: column;
}

.nav-dropdown.is-open {
  display: flex;
}

.nav-dropdown button {
  width: 100%;
  text-align: left;
  padding: 11px 16px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.nav-dropdown button:last-child {
  border-bottom: none;
}

.nav-dropdown button:hover {
  background: var(--color-accent-glow);
  color: var(--color-accent);
}

.nav-dropdown-logout {
  color: var(--color-danger, #ef4444) !important;
}

.nav-dropdown-logout:hover {
  background: rgba(239,68,68,0.08) !important;
  color: var(--color-danger, #ef4444) !important;
}

/* Keep old tab-btn for any non-nav uses */
.tab-btn {
  padding: 7px 18px;
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tab-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-glow);
}

.tab-btn.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-text);
  box-shadow: 0 0 16px var(--color-accent-glow);
}

/* Saved workouts modal */
.sw-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  padding: 16px;
}

.sw-modal {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 24px;
  width: 100%;
  max-width: min(480px, 94vw);
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 90vh;
  overflow-y: auto;
}

.sw-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sw-modal-header h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
}

.sw-modal-close {
  background: transparent;
  border: none;
  font-size: 1.4rem;
  color: var(--color-text-muted);
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
}

.sw-modal-close:hover { color: var(--color-text); }


/* ===== 4. CARDS ===== */

.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color 0.2s;
}

.card:hover {
  border-color: rgba(255, 255, 255, 0.12);
}

.card h2 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

/* ── SVG icons ── */

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  flex-shrink: 0;
}

.logo-mark .icon {
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.25em;
}

/* ── Collapsible cards ── */

.collapsible {
  gap: 0;
  padding: 0;
}

.card-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  cursor: pointer;
  user-select: none;
  border-radius: var(--radius);
  transition: background 0.15s;
}

.collapsible.is-collapsed .card-toggle {
  border-radius: var(--radius);
}

.card-toggle:hover {
  background: rgba(255, 255, 255, 0.03);
}

.card-toggle:hover h2 {
  color: var(--color-accent);
}

.card-toggle-end {
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-chevron {
  font-size: 1rem;
  color: var(--color-text-muted);
  transition: transform 0.25s ease;
  flex-shrink: 0;
  line-height: 1;
}

.collapsible.is-collapsed .card-chevron {
  transform: rotate(-90deg);
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 24px 24px;
  overflow: hidden;
  max-height: 9999px;
  opacity: 1;
  transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
}

.collapsible.is-collapsed .card-body {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  pointer-events: none;
}


.hint {
  color: #94a3b8;
  font-size: 0.85rem;
  margin-top: -6px;
}

.optional-tag {
  display: inline;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--color-text-muted);
  opacity: 0.6;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 4px;
}

/* ===== FUELING PLAN ===== */
.fueling-plan-section {
  margin-top: 12px;
  border-top: 1px solid var(--color-border);
  padding-top: 8px;
}
.fueling-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: none;
  border: none;
  color: var(--color-accent);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 6px 0;
}
.fueling-toggle .chevron-why { transition: transform 0.2s; }
.fueling-toggle.is-open .chevron-why { transform: rotate(180deg); }
.fueling-plan-body {
  display: none;
  padding: 8px 0 4px;
  font-size: 0.84rem;
}
.fueling-plan-body.is-open { display: block; }
.fueling-summary {
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 6px;
}
.fueling-note {
  color: var(--color-text-muted);
  margin-bottom: 8px;
  font-size: 0.82rem;
}
.fueling-item {
  padding: 3px 0 3px 12px;
  border-left: 2px solid var(--color-accent);
  margin-bottom: 4px;
  color: var(--color-text);
}
.fueling-sodium {
  border-left-color: var(--color-amber, #f59e0b);
  color: var(--color-amber, #f59e0b);
}

/* ===== TRAINING BLOCKS EXPLAINED ===== */
.tb-info-btn {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-accent);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.tb-info-btn:active { background: var(--color-accent-glow); }

.tb-timeline {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
  border-radius: 8px;
  overflow: hidden;
}
.tb-timeline-block {
  flex: 1;
  padding: 8px 6px;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fff;
}
.tb-timeline-block:nth-child(1) { background: #3b82f6; }
.tb-timeline-block:nth-child(2) { background: #f59e0b; }
.tb-timeline-block:nth-child(3) { background: #ef4444; }
.tb-timeline-block:nth-child(4) { background: #22c55e; }
.tb-timeline-block.tb-current { outline: 2.5px solid #fff; outline-offset: -2px; font-weight: 900; }

.tb-block {
  padding: 12px;
  margin-bottom: 10px;
  background: var(--color-surface-2);
  border-radius: 10px;
  border: 1px solid var(--color-border);
}
.tb-block-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.tb-block-name {
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}
.tb-block-weeks {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.tb-block-focus {
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--color-accent);
  margin-bottom: 6px;
}
.tb-block-desc { font-size: 0.82rem; margin: 4px 0; }
.tb-block-why { font-size: 0.78rem; color: var(--color-text-muted); margin: 4px 0; }
.tb-block-feel { font-size: 0.78rem; color: var(--color-text-muted); margin: 4px 0; font-style: italic; }

/* ===== HYROX BUILDER ===== */
.hyrox-run-options {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.hyrox-dist-btn {
  padding: 8px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface-2);
  color: var(--color-text);
  font-size: 0.85rem;
  cursor: pointer;
}
.hyrox-dist-btn.is-active {
  border-color: var(--color-accent);
  background: var(--color-accent-glow);
  color: var(--color-accent);
  font-weight: 600;
}
.hyrox-custom-input {
  width: 56px;
  padding: 6px 4px;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface-2);
  color: var(--color-text);
  font-size: 0.78rem;
  text-align: center;
}
.hyrox-station-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hyrox-station-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
}
.hyrox-station-name {
  flex: 1;
  font-weight: 600;
}
.hyrox-station-dist,
.hyrox-station-wt {
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.82rem;
  text-align: center;
}
.hyrox-station-unit {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  min-width: 28px;
}


/* ===== 5. FORMS ===== */

.form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-row label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

input[type="text"],
input[type="number"],
input[type="date"],
input[type="email"],
input[type="password"],
select {
  padding: 10px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.95rem;
  color: var(--color-text);
  background: var(--color-surface-2);
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  appearance: none;
}

select {
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23818cf8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-glow);
}

select option {
  background: var(--color-surface-2);
  color: var(--color-text);
}

/* Date input: restore enough appearance for the native picker to work */
input[type="date"] {
  -webkit-appearance: auto;
  appearance: auto;
  /* preserve our custom styling */
  padding: 10px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.95rem;
  color: var(--color-text);
  background: var(--color-surface-2);
  width: 100%;
  cursor: pointer;
}

/* Calendar icon: visible on light themes by default */
input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.6;
  cursor: pointer;
  padding: 2px;
  border-radius: 3px;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* On dark themes, invert the icon so it's visible */
:root[data-theme="blackout"] input[type="date"]::-webkit-calendar-picker-indicator,
:root[data-theme="iron"] input[type="date"]::-webkit-calendar-picker-indicator,
:root[data-theme="midnight"] input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}


/* ===== 6. BUTTONS ===== */

button {
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 8px;
  border: none;
  transition: background-color 0.15s, transform 0.1s, box-shadow 0.15s;
  letter-spacing: 0.01em;
  min-height: 44px;
  touch-action: manipulation;
}

button:active {
  transform: scale(0.97);
}

.btn-primary {
  background: var(--color-accent);
  color: #fff;
  align-self: flex-start;
}

.btn-primary:hover {
  background: var(--color-accent-dark);
  box-shadow: 0 0 20px var(--color-accent-glow);
}

.btn-secondary {
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  border: 1.5px solid var(--color-border);
  align-self: flex-start;
}

.btn-secondary:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn-danger {
  background: transparent;
  color: var(--color-danger);
  border: 1.5px solid var(--color-danger);
  font-size: 0.8rem;
  padding: 8px 14px;
  align-self: flex-start;
}

.btn-danger:hover {
  background: var(--color-danger);
  color: #fff;
}


/* ===== 7. WORKOUT-SPECIFIC ===== */

#generated-plan { margin-top: 4px; }

.plan-day { margin-bottom: 16px; }

.plan-day h3 {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--color-border);
}

.plan-day p {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}

.exercise-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  margin-top: 6px;
}

.exercise-table th {
  text-align: left;
  padding: 6px 8px;
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.exercise-table td {
  padding: 8px;
  border-top: 1px solid var(--color-border);
  color: var(--color-text);
}

/* Superset grouping rows */
.exercise-table .superset-label-row td {
  padding: 5px 10px 4px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-cyan);
  background: rgba(29, 78, 216, 0.12);
  border-top: 2px solid var(--color-cyan);
  border-bottom: 1px solid var(--color-cyan);
  border-left: 3px solid var(--color-cyan);
}
.exercise-table .superset-label-row td:last-child {
  border-right: 3px solid var(--color-cyan);
}
.exercise-table .superset-ex-row td {
  border-top: none;
  background: rgba(29, 78, 216, 0.05);
}
.exercise-table .superset-ex-row + .superset-ex-row td {
  border-top: 1px solid rgba(29, 78, 216, 0.2);
}
.exercise-table .superset-ex-row td:first-child {
  border-left: 3px solid var(--color-cyan);
}
.exercise-table .superset-ex-row td:last-child {
  border-right: 3px solid var(--color-cyan);
}
.exercise-table .superset-end-row td {
  padding: 0;
  height: 0;
  line-height: 0;
  font-size: 0;
  border-top: 2px solid var(--color-cyan);
  border-left: 3px solid var(--color-cyan);
  background: transparent;
}
.exercise-table .superset-end-row td:last-child {
  border-right: 3px solid var(--color-cyan);
}

.exercise-row {
  display: grid;
  grid-template-columns: 28px 2fr 1fr 1fr 1fr auto 28px;
  gap: 6px;
  align-items: center;
  background: var(--color-surface-2);
  border-radius: 6px;
  padding: 6px 10px;
  margin-bottom: 4px;
}
.exercise-row label { display: none; }
.exercise-row .remove-exercise-btn {
  position: static;
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.exercise-row[draggable="true"] { cursor: grab; }
.exercise-row[draggable="true"]:active { cursor: grabbing; }
.drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  min-width: 28px;
  height: 28px;
  font-size: 16px;
  color: var(--color-text-muted);
  cursor: grab;
  touch-action: none;
  user-select: none;
  flex-shrink: 0;
  border-radius: 6px;
}
.drag-handle:active {
  color: var(--color-accent);
  background: var(--color-surface-2);
}

.exercise-row.drag-active,
.qe-manual-row.drag-active,
.edit-exercise-row.drag-active,
.qe-exercise-item.drag-active { opacity: 0.35; }

.exercise-row.drag-insert-above,
.qe-manual-row.drag-insert-above,
.edit-exercise-row.drag-insert-above,
.qe-exercise-item.drag-insert-above { border-top: 2.5px solid var(--color-accent); margin-top: -1px; }

.exercise-row.drag-insert-below,
.qe-manual-row.drag-insert-below,
.edit-exercise-row.drag-insert-below,
.qe-exercise-item.drag-insert-below { border-bottom: 2.5px solid var(--color-accent); margin-bottom: -1px; }

.qe-manual-row.drag-ss-target,
.edit-exercise-row.drag-ss-target,
.qe-exercise-item.drag-ss-target {
  outline: 2.5px solid var(--color-accent);
  outline-offset: -2px;
  background: var(--color-accent-glow);
  transition: outline 0.15s, background 0.15s;
}

/* Edit exercise header — matches edit row grid with drag-handle spacer */
.edit-row-header {
  grid-template-columns: 28px 2fr 1fr 1fr 1fr 28px;
}
.edit-row-header.hiit-row-header {
  grid-template-columns: 28px 2fr 1.5fr 1fr 28px;
}

/* Compact edit exercise rows — no per-row labels, tighter spacing */
.edit-exercise-row {
  grid-template-columns: 28px 2fr 1fr 1fr 1fr 28px;
  padding: 6px 10px;
  margin-bottom: 4px;
  align-items: center;
}
.edit-exercise-row.hiit-row {
  grid-template-columns: 28px 2fr 1.5fr 1fr 28px;
}
.edit-exercise-row label { display: none; }
.edit-exercise-row input {
  padding: 7px 8px;
  font-size: 0.85rem;
}
.edit-exercise-row .remove-exercise-btn {
  position: static;
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Per-set editing in workout editor */
.edit-set-detail-wrap { grid-column: 1 / -1; }
.edit-perset-toggle {
  background: none; border: none; color: var(--color-text-muted);
  font-size: 0.78rem; cursor: pointer; padding: 2px 0; margin-top: 2px;
}
.edit-perset-toggle:hover { color: var(--color-accent); }
.edit-set-header {
  display: grid; grid-template-columns: 70px 1fr 1fr; gap: 8px;
  font-size: 0.72rem; color: var(--color-text-muted); text-transform: uppercase;
  padding: 4px 0 2px;
}
.edit-set-row {
  display: grid; grid-template-columns: 70px 1fr 1fr; gap: 8px;
  align-items: center; padding: 3px 0;
}
.edit-set-label { font-size: 0.8rem; color: var(--color-text-muted); }
.edit-set-row input { width: 100%; }

.exercise-row input {
  padding: 7px 8px;
  font-size: 0.85rem;
}

/* Pyramid per-set detail */
.ex-pyramid-btn {
  background: none; border: 1px solid var(--color-border); border-radius: 6px;
  color: var(--color-text-muted); font-size: 0.8rem; cursor: pointer;
  width: 28px; height: 34px; align-self: end; margin-bottom: 1px;
  transition: color 0.15s, border-color 0.15s;
}
.ex-pyramid-btn:hover { color: var(--color-accent); border-color: var(--color-accent); }
.ex-pyramid-btn.is-active { color: var(--color-accent); border-color: var(--color-accent); background: var(--color-accent-glow); }

.ex-pyramid-detail {
  grid-column: 1 / -1;
  padding: 8px 0 0;
}
.ex-pyr-header {
  display: grid; grid-template-columns: 40px 1fr 1fr; gap: 8px;
  font-size: 0.72rem; font-weight: 600; color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: 0.04em; padding-bottom: 4px;
}
.ex-pyr-row {
  display: grid; grid-template-columns: 40px 1fr 1fr; gap: 8px;
  align-items: center; padding: 3px 0;
}
.ex-pyr-label {
  font-size: 0.82rem; font-weight: 600; color: var(--color-text-muted); text-align: center;
}
.ex-pyr-row input {
  padding: 6px 8px; font-size: 0.85rem; border-radius: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-input-bg, var(--color-bg)); color: var(--color-text);
}

.sw-segment-row {
  grid-template-columns: 2fr 1fr 1fr auto;
}
.sw-segment-row--brick {
  grid-template-columns: auto 2fr 1fr 1fr auto;
}
.seg-discipline-wrap select {
  min-width: 100px;
}
.seg-disc-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.seg-disc-bike { background: var(--color-blue, #3b82f6); color: #fff; }
.seg-disc-run  { background: var(--color-green, #22c55e); color: #fff; }
.seg-disc-transition { background: var(--color-amber, #f59e0b); color: #000; }

.sw-section-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 8px 0 6px;
}

.remove-exercise-btn {
  background: transparent;
  color: var(--color-danger);
  border: none;
  font-size: 1.2rem;
  padding: 4px 8px;
  line-height: 1;
  opacity: 0.6;
  transition: opacity 0.15s;
}

.remove-exercise-btn:hover { opacity: 1; }

.history-entry {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 10px;
  background: var(--color-surface-2);
  transition: border-color 0.2s;
}

.history-entry:hover { border-color: rgba(255,255,255,0.15); }

/* Collapsible saved-workout cards */
.history-entry.collapsible { padding: 0; }
.history-entry.collapsible .history-header.card-toggle {
  padding: 14px;
  margin-bottom: 0;
  border-radius: 10px;
}
.history-entry.collapsible .card-body {
  padding: 0 14px 14px;
}
.history-entry.collapsible.is-collapsed .card-body {
  padding-top: 0;
  padding-bottom: 0;
}

.history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.history-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.workout-tag {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
}

.tag-weightlifting { background-color: var(--color-violet); }
.tag-running       { background-color: var(--color-amber); }
.tag-triathlon     { background-color: var(--color-cyan); }
.tag-cycling       { background-color: var(--color-teal); }
.tag-hyrox         { background-color: var(--color-amber); }
.tag-wellness      { background-color: var(--color-success); }
.tag-general,
.tag-other         { background-color: var(--color-text-muted); }

.history-summary {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}

.history-date {
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.history-notes {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-style: italic;
  margin-bottom: 8px;
}

.delete-btn {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-size: 1rem;
  padding: 2px 6px;
  cursor: pointer;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}

.delete-btn:hover {
  color: var(--color-danger);
  background: rgba(248, 113, 113, 0.1);
}


/* ===== 8. NUTRITION-SPECIFIC ===== */

.macro-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 4px;
}

.macro-box {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 14px 10px;
  text-align: center;
  transition: border-color 0.2s, transform 0.15s;
}

.macro-box:hover {
  border-color: var(--color-accent);
  transform: translateY(-1px);
}

.macro-box .macro-value {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-accent);
}

.macro-box .macro-label {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}

.meal-day-group { margin-bottom: 20px; }

.meal-day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--color-border);
}

.meal-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--color-surface-2);
  margin-bottom: 6px;
  gap: 12px;
  border: 1px solid var(--color-border);
}

.meal-name {
  font-size: 0.9rem;
  font-weight: 600;
  flex: 1;
}

.meal-macros {
  display: flex;
  gap: 10px;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  flex-wrap: wrap;
}

.meal-macros span { white-space: nowrap; }

.day-totals {
  font-size: 0.8rem;
  color: var(--color-accent);
  font-weight: 600;
  margin-top: 4px;
}


/* ===== Home greeting ===== */

.home-greeting {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-text);
  padding: 4px 4px 12px;
  letter-spacing: -0.01em;
}


/* ===== DAILY PROGRESS RINGS ===== */

.daily-rings {
  margin-bottom: 12px;
}
.dr-rings-row {
  display: flex;
  justify-content: center;
  gap: 28px;
}
.dr-ring-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.dr-ring-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ===== 9. CALENDAR ===== */

.calendar-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}

.calendar-month-label {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text);
}

.cal-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cal-nav-btn {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.2s, color 0.2s;
}

.cal-nav-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.calendar-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* This Week jump button */
.cal-this-week-btn {
  background: transparent;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  padding: 7px 13px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}

.cal-this-week-btn:hover {
  background: var(--color-accent);
  color: #000;
}

/* Zoom toggle button */
.cal-zoom-btn {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  padding: 7px 13px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color 0.2s, color 0.2s;
}

.cal-zoom-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.cal-help-btn {
  position: absolute;
  top: -1px;
  right: 0px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  line-height: 26px;
  opacity: 0.5;
  z-index: 10;
}
.cal-help-btn:hover { opacity: 0.8; }

.cal-help-tooltip {
  display: none;
  position: absolute;
  right: 8px;
  top: 34px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 0.82rem;
  color: var(--color-text);
  line-height: 1.4;
  box-shadow: var(--shadow);
  z-index: 100;
  max-width: 260px;
}
.cal-help-tooltip.is-visible { display: block; }

.cal-add-header-btn {
  background: var(--color-accent);
  border: none;
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.15s;
}

.cal-add-header-btn:hover {
  background: var(--color-accent-dark);
  transform: scale(1.1);
}

/* Month grid — 7-column */
.calendar-grid {
  display: grid;
  gap: 4px;
}

.calendar-grid--month {
  grid-template-columns: repeat(7, 1fr);
}

/* Week grid — 7 equal columns */
.calendar-grid--week {
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

/* ── Week cells ── */
.week-cell {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-top: 3px solid transparent;
  border-radius: 10px;
  padding: 10px 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 120px;
  min-width: 0;        /* allow grid to enforce 1fr width */
  overflow: hidden;    /* prevent bubble content from busting out */
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.week-cell:hover {
  background: #202030;
  transform: translateY(-2px);
}

/* Discipline top-border accent */
.week-cell--swim         { border-top-color: var(--color-cyan); }
.week-cell--bike         { border-top-color: var(--color-teal); }
.week-cell--run          { border-top-color: var(--color-amber); }
.week-cell--brick        { border-top-color: var(--color-accent); }
.week-cell--race         { border-top-color: var(--color-danger); }
.week-cell--rest         { border-top-color: rgba(255,255,255,0.1); }
.week-cell--weightlifting{ border-top-color: var(--color-violet); }
.week-cell--cycling      { border-top-color: var(--color-teal); }
.week-cell--running      { border-top-color: var(--color-amber); }
.week-cell--triathlon    { border-top-color: var(--color-cyan); }
.week-cell--general      { border-top-color: var(--color-success); }
.week-cell--hiit         { border-top-color: var(--color-accent); }
.week-cell--hyrox        { border-top-color: var(--color-amber); }
.week-cell--wellness     { border-top-color: var(--color-success); }
.week-cell--bodyweight   { border-top-color: var(--color-accent); }
.week-cell--swimming     { border-top-color: var(--color-cyan); }

/* Session bubbles — each session gets its own equal-sized pill */
.week-cell-sessions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;  /* let flex shrink past content size */
}

.session-bubble {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 6px;
  border-radius: 6px;
  background: rgba(255,255,255,0.05);
  border-left: 3px solid var(--color-border);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  min-width: 0;  /* allow truncation to kick in */
}

.session-bubble-icon {
  font-size: 0.9rem;
  flex-shrink: 0;
  line-height: 1;
}

.session-bubble-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text);
}

.session-bubble .zone-badge {
  flex-shrink: 0;
  font-size: 0.6rem;
  padding: 1px 5px;
}

.week-cell--today {
  border-color: transparent;
  background: transparent;
}

.week-cell--selected {
  border-color: var(--color-accent);
  border-width: 2px;
  background: rgba(129,140,248,0.11);
  box-shadow: 0 0 14px var(--color-accent-glow);
}

.week-cell-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.week-cell-dow {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
}

.week-cell--today .week-cell-dow { color: var(--color-accent); }

.week-cell-date {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.week-cell--today .week-cell-date {
  background: var(--color-accent);
  color: #fff;
}

.week-cell-rest-label {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  font-style: italic;
}

.week-cell-dots {
  display: flex;
  gap: 3px;
  margin-top: auto;
}

.week-cell-intensity {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  padding: 4px 0;
  margin: auto -8px -10px;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-radius: 0 0 8px 8px;
}

.week-cell-intensity.intensity-low  { background: rgba(34,  211, 238, 0.12); color: var(--color-cyan);   }
.week-cell-intensity.intensity-med  { background: rgba(245, 158,  11, 0.12); color: var(--color-amber);  }
.week-cell-intensity.intensity-high { background: rgba(248, 113, 113, 0.12); color: var(--color-danger); }
.week-cell-intensity.intensity-long { background: rgba(129, 140, 248, 0.12); color: var(--color-accent); }
.week-cell-intensity.intensity-race { background: rgba(248, 113, 113, 0.18); color: var(--color-danger); }

/* Day-of-week header labels */
.calendar-dow {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 2px;
}

.calendar-cell {
  min-height: 68px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 6px 5px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  position: relative;
}

.calendar-cell:hover {
  border-color: rgba(255,255,255,0.2);
  background: #202030;
  transform: translateY(-1px);
}

.calendar-cell.empty {
  background: transparent;
  border-color: transparent;
  cursor: default;
  pointer-events: none;
}

.calendar-cell.today {
  border-color: var(--color-accent);
  background: rgba(129, 140, 248, 0.08);
  box-shadow: 0 0 0 1px var(--color-accent-glow) inset;
}

.calendar-cell.selected {
  border-color: var(--color-accent);
  background: rgba(129, 140, 248, 0.15);
  box-shadow: 0 0 12px var(--color-accent-glow);
}

.calendar-cell.has-race {
  background: linear-gradient(135deg, rgba(248,113,113,0.12) 0%, rgba(129,140,248,0.08) 100%);
  border-color: rgba(248, 113, 113, 0.4);
}

.cell-day-num {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
  line-height: 1;
}

.calendar-cell.today .cell-day-num {
  color: var(--color-accent);
  font-weight: 800;
}

.cell-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: auto;
}

.cell-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: auto;
  line-height: 1;
}

.cell-session-icon {
  font-size: 0.85rem;
}

.cell-removed-icon {
  font-size: 0.8rem;
  opacity: 0.7;
}

/* Indicator dots */
.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dot-planned { background-color: var(--color-accent); }
.dot-logged  { background-color: var(--color-success); }
.dot-meals   { background-color: var(--color-amber); }
.dot-race    { background-color: var(--color-danger); box-shadow: 0 0 6px var(--color-danger); }


/* ===== 10. DAY DETAIL ===== */

.day-detail-date-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 4px;
}
.day-detail-date {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
}

/* ===== TODAY DASHBOARD ===== */
.today-dashboard {
  margin: 12px 0 8px;
  padding: 14px;
  border-radius: 12px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  display: flex; flex-direction: column; gap: 12px;
}
.td-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 10px; font-size: 0.88rem; font-weight: 600;
}
.td-pill svg { width: 18px; height: 18px; }
.td-pill--active { background: var(--color-accent-glow); color: var(--color-accent); }
.td-pill--done { background: rgba(34,197,94,0.12); color: var(--color-success); }
.td-pill--rest { background: var(--color-surface); color: var(--color-text-muted); }
.td-pill-count {
  margin-left: auto; font-size: 0.78rem; opacity: 0.7;
}
.td-section { display: flex; flex-direction: column; gap: 6px; }
.td-section-header {
  display: flex; justify-content: space-between; align-items: center;
}
.td-section-label {
  font-size: 0.82rem; font-weight: 700; display: flex; align-items: center; gap: 6px;
}
.td-section-label svg { width: 16px; height: 16px; }
.td-section-stat { font-size: 0.78rem; color: var(--color-text-muted); }
.td-progress-row { width: 100%; }
.td-progress-track {
  height: 8px; border-radius: 4px; background: var(--color-border); overflow: hidden;
}
.td-progress-fill {
  height: 100%; border-radius: 4px; background: var(--color-accent); transition: width 0.3s;
}
.td-progress-track--water { background: rgba(59,130,246,0.15); }
.td-progress-fill--water { background: #3b82f6; }
.td-mini-stats { font-size: 0.75rem; color: var(--color-text-muted); }
.td-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.td-action-btn {
  flex: 1; min-width: 0; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--color-border);
  background: var(--color-surface); color: var(--color-text); font-size: 0.78rem; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: background 0.15s;
}
.td-action-btn:hover { background: var(--color-accent-glow); }
.td-action-btn svg { width: 14px; height: 14px; }

/* Session card */
.session-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.2s;
  margin-bottom: 10px;
}

.session-card:hover { border-color: rgba(255,255,255,0.15); }

/* Collapsible session cards */
.session-card.collapsible {
  padding: 0;
  gap: 0;
}

.session-card-toggle {
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
  border-radius: 10px;
  transition: background 0.15s;
}

.session-card-toggle:hover {
  background: rgba(255, 255, 255, 0.04);
}

.session-card.collapsible .card-body {
  padding: 0 16px 14px;
  gap: 10px;
}

.session-card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.session-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.session-meta { flex: 1; }

.session-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text);
}

.session-phase {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.session-details {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  padding-left: 2px;
}

/* ── Session header right group ── */
.session-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.session-duration-badge {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 3px 9px;
  white-space: nowrap;
}

/* ── Intensity badge (Low / Medium / High) ── */
.intensity-badge {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 5px;
  padding: 3px 8px;
  white-space: nowrap;
}

.intensity-low  { background: rgba(34,  211, 238, 0.15); color: var(--color-cyan);    border: 1px solid rgba(34,  211, 238, 0.3); }
.intensity-med  { background: rgba(245, 158,  11, 0.15); color: var(--color-amber);   border: 1px solid rgba(245, 158,  11, 0.3); }
.intensity-high { background: rgba(248, 113, 113, 0.15); color: var(--color-danger);  border: 1px solid rgba(248, 113, 113, 0.3); }
.intensity-long { background: rgba(129, 140, 248, 0.15); color: var(--color-accent);  border: 1px solid rgba(129, 140, 248, 0.3); }
.intensity-race { background: rgba(248, 113, 113, 0.2);  color: var(--color-danger);  border: 1px solid rgba(248, 113, 113, 0.4); }

/* Intensity badge in week-view bubbles */
.session-bubble .intensity-badge {
  font-size: 0.6rem;
  padding: 2px 5px;
}

/* ── Intensity strip ── */
.session-intensity-strip {
  height: 26px;
  display: flex;
  cursor: pointer;
  overflow: visible;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  transition: opacity 0.15s;
  position: relative;
  margin-bottom: 18px;
}
.session-intensity-strip:not(:has(.fuel-tick)) {
  margin-bottom: 0;
}

.fuel-tick {
  position: absolute;
  bottom: -20px;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: auto;
  line-height: 0;
}
.fuel-drop {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
}

.fueling-toggle-icon {
  display: inline-flex;
  vertical-align: middle;
  margin-right: 4px;
  color: var(--color-accent);
}
.fueling-toggle-icon svg { stroke: var(--color-accent); fill: none; }

.fueling-item-icon {
  display: inline-flex;
  vertical-align: middle;
  margin-right: 4px;
  color: var(--color-accent);
}
.fueling-item-icon svg { stroke: var(--color-accent); fill: none; }

.fueling-customize-btn {
  margin-top: 10px;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 0.78rem;
  cursor: pointer;
}
.fueling-customize-btn:active {
  background: var(--color-surface-2);
}

.session-intensity-strip:hover { opacity: 0.8; }

.intensity-seg { height: 100%; flex-shrink: 0; border-right: 1.5px solid rgba(255,255,255,0.35); }
.intensity-seg:last-child { border-right: none; }
.intensity-seg.rw    { background: rgba(156, 163, 175, 0.35); }
.intensity-seg.z1    { background: rgba(34, 211, 238, 0.28); }
.intensity-seg.z2    { background: #22d3ee; }
.intensity-seg.z3    { background: #f59e0b; }
.intensity-seg.z4    { background: #f87171; }
.intensity-seg.z5    { background: #ef4444; }
.intensity-seg.z6    { background: #b91c1c; }
.intensity-seg.z-rest{ background: rgba(255, 255, 255, 0.06); }
.intensity-seg.z-transition { background: #a78bfa; }
.zone-badge.z-transition { background: rgba(167, 139, 250, 0.18); color: #a78bfa; }

/* ── Session steps list ── */
.session-step {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 12px;
  border-radius: 8px;
  border-left: 3px solid transparent;
  background: var(--color-surface);
}

.session-step--rw { border-left-color: rgba(156, 163, 175, 0.5); }
.session-step--z1 { border-left-color: rgba(34, 211, 238, 0.4); }
.session-step--z2 { border-left-color: #22d3ee; }
.session-step--z3 { border-left-color: #f59e0b; }
.session-step--z4 { border-left-color: #f87171; }
.session-step--z5 { border-left-color: #ef4444; }
.session-step--z6 { border-left-color: #b91c1c; }
.session-step--transition { border-left-color: #a78bfa; }

.session-step-meta {
  display: flex;
  align-items: center;
  gap: 7px;
}

.session-step-type {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.session-step-zone {
  font-size: 0.62rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--color-text-muted);
}

.session-step-duration {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-text);
  margin-left: auto;
}

.session-step-label {
  font-size: 0.82rem;
  color: var(--color-text);
  line-height: 1.4;
}

/* Zone badges */
.zone-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  flex-shrink: 0;
  letter-spacing: 0.04em;
}

.zone-1 { background: rgba(100, 116, 139, 0.25); color: #94a3b8; }
.zone-2 { background: rgba(52, 211, 153, 0.2);  color: var(--color-success); }
.zone-3 { background: rgba(245, 158, 11, 0.2);  color: var(--color-amber); }
.zone-4 { background: rgba(248, 113, 113, 0.2); color: var(--color-danger); }
.zone-5 { background: rgba(168, 85, 247, 0.25); color: var(--color-violet); }

/* ── Training Zones (Settings) ────────────────────────────────────── */

.zones-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.zones-tab {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.zones-tab:hover { color: var(--color-text); border-color: var(--color-accent); }
.zones-tab.is-active {
  background: var(--color-accent-glow);
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.zones-ref-line {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-bottom: 16px;
  line-height: 1.5;
}

.zones-table {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}

.zone-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.zone-row-badge {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  min-width: 32px;
  text-align: center;
}

.zone-row-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.zone-row-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
}

.zone-row-desc {
  font-size: 0.73rem;
  color: var(--color-text-muted);
}

.zone-row-pace {
  font-size: 0.82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.zones-update-btn {
  margin-bottom: 16px;
}

/* ── Zone History ─────────────────────────────────────────────────────────── */
.zone-history-section {
  margin-top: 8px;
  border-top: 1px solid var(--color-border);
}
.zone-history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
.zone-history-header .card-chevron {
  transition: transform 0.2s;
}
.zone-history-section.is-expanded .zone-history-header .card-chevron {
  transform: rotate(180deg);
}
.zone-history-list {
  display: none;
}
.zone-history-section.is-expanded .zone-history-list {
  display: block;
}
.zone-history-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.8rem;
}
.zone-history-row:last-child {
  border-bottom: none;
}
.zone-history-date {
  color: var(--color-text-muted);
  flex-shrink: 0;
  margin-right: 12px;
}
.zone-history-detail {
  color: var(--color-text);
  text-align: right;
  flex: 1;
}
.zone-history-delete {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 4px;
  margin-left: 8px;
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity 0.15s, color 0.15s;
}
.zone-history-delete:hover {
  opacity: 1;
  color: var(--color-danger);
}

.strength-ref-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
}

.strength-ref-row:last-of-type {
  border-bottom: none;
}

.strength-ref-label {
  flex: 1;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-text);
}

.zones-form {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.zones-time-inputs {
  display: flex;
  align-items: center;
  gap: 6px;
}

.zones-time-field {
  width: 64px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text);
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
}

.zones-time-field:focus {
  outline: none;
  border-color: var(--color-accent);
}

.zones-time-sep {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text-muted);
}

.zones-form-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

/* Pace badge inside session step zone label */
.session-step-pace {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
}

.race-day-card {
  border-color: rgba(248, 113, 113, 0.4);
  background: linear-gradient(135deg, rgba(248,113,113,0.1) 0%, rgba(129,140,248,0.06) 100%);
}

.rest-day-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* ── Workout completion ── */

.session-complete-section {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

.btn-complete-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.btn-complete-toggle:hover {
  border-color: var(--color-success);
  color: var(--color-success);
  background: rgba(34, 197, 94, 0.06);
}

.completion-form {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.completion-ex-header {
  display: grid;
  grid-template-columns: 1fr 42px 12px 60px 80px;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--color-border);
}

.completion-ex-row {
  display: grid;
  grid-template-columns: 1fr 42px 12px 60px 80px;
  gap: 6px;
  align-items: center;
}

.completion-ex-name {
  font-size: 0.82rem;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Per-set expansion */
.completion-expand-wrap { padding-left: 8px; }
.completion-expand-btn, .completion-collapse-btn {
  background: none;
  border: none;
  color: var(--color-accent);
  font-size: 0.72rem;
  cursor: pointer;
  padding: 2px 0;
}
.completion-expand-btn:hover, .completion-collapse-btn:hover { text-decoration: underline; }
.completion-set-details { margin: 4px 0 8px; }
.completion-set-header {
  display: grid;
  grid-template-columns: 60px 60px 80px;
  gap: 6px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  padding: 0 0 2px 8px;
}
.completion-set-row {
  display: grid;
  grid-template-columns: 60px 60px 80px;
  gap: 6px;
  align-items: center;
  padding: 2px 0 2px 8px;
}
.completion-set-label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

/* Set detail rows in exercise table display */
.set-detail-row td { padding-top: 2px !important; padding-bottom: 2px !important; }
.set-detail-label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  padding-left: 16px !important;
  font-style: italic;
}

.completion-x {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-align: center;
}

.completion-notes {
  width: 100%;
  min-height: 56px;
  font-size: 0.8rem;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  resize: vertical;
  margin-top: 4px;
  box-sizing: border-box;
}

.completion-cardio-fields { display: flex; flex-direction: column; gap: 6px; }

.completion-dur-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.completion-field-label {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.completion-dur-input {
  width: 80px;
  font-size: 0.82rem;
  padding: 5px 8px;
  text-align: center;
}

.btn-complete-save {
  align-self: flex-start;
  background: var(--color-success);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}

.btn-complete-save:hover { opacity: 0.85; }

.session-completed-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 6px 12px;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-success);
}

.undo-complete-btn {
  margin-left: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid rgba(34, 197, 94, 0.4);
  background: transparent;
  color: var(--color-success);
  font-size: 0.72rem;
  cursor: pointer;
  opacity: 0.7;
}
.undo-complete-btn:hover { opacity: 1; }

.session-card--completed {
  background: rgba(34, 197, 94, 0.06);
  border-color: rgba(34, 197, 94, 0.3);
}

.undo-complete-btn-header {
  padding: 3px 8px;
  border-radius: 5px;
  border: 1px solid rgba(34, 197, 94, 0.5);
  background: rgba(34, 197, 94, 0.08);
  color: var(--color-success);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.undo-complete-btn-header:hover {
  background: rgba(34, 197, 94, 0.15);
}

.session-complete-indicator {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  color: var(--color-success);
  vertical-align: middle;
}
.session-complete-indicator .icon {
  width: 13px;
  height: 13px;
  stroke-width: 3;
}

.day-totals-inline {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}
.day-totals-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}
.day-totals-item .icon {
  width: 13px;
  height: 13px;
  color: var(--color-accent);
}

.section-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-border);
}

.nutrition-hint {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: -6px;
}

.nutrition-reset-btn {
  background: transparent;
  border: none;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: none;
  letter-spacing: normal;
  transition: color 0.15s, background 0.15s;
}

.nutrition-reset-btn:hover {
  color: var(--color-accent);
  background: var(--color-accent-glow);
}

/* Interactive macro boxes */
.macro-box--interactive { cursor: pointer; }

.macro-box--interactive:hover {
  border-color: var(--color-accent);
  background: rgba(129,140,248,0.06);
}

/* Slider panel inside macro box */
.macro-slider-wrap {
  display: none;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
}

.macro-slider-wrap.is-open { display: flex; }

.macro-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--color-surface);
  outline: none;
  cursor: pointer;
}

.macro-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-accent);
  cursor: pointer;
  box-shadow: 0 0 8px var(--color-accent-glow);
  transition: transform 0.1s;
}

.macro-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }

.macro-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-accent);
  cursor: pointer;
  border: none;
}

.macro-slider-range {
  display: flex;
  justify-content: space-between;
  font-size: 0.62rem;
  color: var(--color-text-muted);
}

.nutrition-target-section { display: flex; flex-direction: column; gap: 10px; }

.generate-meals-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 4px;
}

/* Meal plan preview */
.meal-plan-preview {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.meal-plan-preview-header {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-accent);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}

.meal-plan-load-note {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  font-style: italic;
  padding: 4px 0 6px;
}

.meal-plan-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.meal-plan-slot {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  min-width: 110px;
}

.meal-plan-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  flex: 1;
}

.meal-plan-macros {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}


/* ===== 11. RACE CARDS ===== */

.race-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.2s, transform 0.15s;
}

.race-card {
  cursor: pointer;
}

.race-card:hover {
  border-color: rgba(255,255,255,0.2);
  transform: translateY(-1px);
  background: var(--color-surface-2);
}

.race-card.race-past { opacity: 0.55; }

.race-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.race-card-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
}

.race-card-meta {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: 3px;
}
.race-card-detail {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}
.race-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.race-tag {
  font-size: 0.72rem;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

.race-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.race-date-badge {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 3px 8px;
}

.race-countdown {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-accent);
}

.race-countdown.past { color: var(--color-text-muted); }

.race-priority-badge {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 5px;
  padding: 3px 8px;
  white-space: nowrap;
  align-self: flex-start;
}
.race-priority-badge.priority-a {
  background: var(--color-accent-glow);
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
}
.race-priority-badge.priority-b {
  background: var(--color-surface);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}


/* ===== 11b. ACTIVE TRAINING INPUTS CARDS ===== */

.ti-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.ti-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ti-card--schedule { border-left: 3px solid var(--color-accent); }
.ti-card--note     { border-left: 3px solid #64748b; }

.ti-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ti-card-badge {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 5px;
  padding: 3px 8px;
  white-space: nowrap;
}

.ti-card-badge--schedule {
  background: var(--color-accent-glow);
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
}

.ti-card-badge--note {
  background: var(--color-surface);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

.ti-card-badge--imported {
  background: rgba(139, 92, 246, 0.12);
  color: #a78bfa;
  border: 1px solid #a78bfa;
}

.ti-card--imported { padding: 10px 14px; gap: 2px; }
.ti-card--imported .race-card-top { margin-bottom: 2px; }
.ti-card--imported .race-card-name { font-size: 0.95rem; }
.ti-card--imported .race-card-meta { margin-top: 0; }
.ti-card--imported .race-card-footer { margin-top: 2px; }
.ti-card--imported .import-week-group { margin-bottom: 12px; }
.ti-card--imported .import-week-group h4 { font-size: 0.8rem; color: var(--color-text-muted); margin: 8px 0 4px; }
.ti-card--imported .import-detail-cell { color: var(--color-text-muted); font-size: 0.8rem; }
/* ── Imported plan editor modal ── */
.edit-import-modal {
  max-width: 500px;
  padding: 20px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}
.edit-import-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.edit-import-fields {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}
.edit-import-fields .form-label { flex: 1; }
.edit-import-sessions {
  flex: 1;
  overflow-y: auto;
  border-top: 1px solid var(--color-border);
  padding-top: 10px;
}
.edit-import-session-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.edit-import-week { margin-bottom: 10px; }
.edit-import-week-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}
.edit-import-session-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--color-surface);
  margin-bottom: 4px;
}
.edit-import-session-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.edit-import-session-top {
  display: flex;
  align-items: center;
  gap: 6px;
}
.edit-import-session-day {
  font-size: 0.8rem;
  font-weight: 600;
  min-width: 30px;
}
.edit-import-session-name {
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.edit-import-session-detail {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  padding-left: 36px;
}
.edit-import-session-detail:empty { display: none; }
.edit-import-session-row .workout-tag {
  font-size: 0.6rem;
  padding: 2px 7px;
  white-space: nowrap;
}
.edit-import-session-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.edit-import-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

.imported-card-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.imported-card-dates {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
}

.ti-edit-btn {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-accent);
  background: transparent;
  border: 1px solid var(--color-accent);
  border-radius: 5px;
  padding: 2px 8px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.ti-edit-btn:hover {
  background: var(--color-accent);
  color: #fff;
}

.ti-edit-input {
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-accent);
  border-radius: 6px;
  color: var(--color-text);
  font-size: 1rem;
  font-weight: 700;
  padding: 4px 8px;
}

.ti-add-row {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.ti-note-input {
  flex: 1;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text);
  font-size: 0.875rem;
  padding: 8px 12px;
}

.ti-add-btn {
  padding: 8px 14px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.ti-add-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}


/* ── Training Preferences ── */
.pref-section-label {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin: 0 0 10px;
}

.pref-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  min-height: 24px;
}

.pref-empty {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  font-style: italic;
}

.pref-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  font-size: 0.8rem;
  color: var(--color-text);
}

.pref-tag-remove {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 0.75rem;
  padding: 0;
  line-height: 1;
}
.pref-tag-remove:hover { color: var(--color-danger); }

.pref-add-row {
  display: flex;
  gap: 8px;
}

.pref-input {
  flex: 1;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text);
  font-size: 0.875rem;
  padding: 8px 12px;
}
.pref-input:focus { outline: none; border-color: var(--color-accent); }

/* ===== 12. NUTRITION PROGRESS BARS ===== */

.nutrition-progress {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-bottom: 8px;
}

.nutrition-progress-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.nutrition-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.nutrition-progress-name {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.nutrition-progress-values {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-text);
}

.nutrition-progress-sep {
  color: var(--color-text-muted);
  font-weight: 400;
}

.nutrition-progress-track {
  height: 7px;
  background: var(--color-surface);
  border-radius: 99px;
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.nutrition-progress-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.4s ease;
}

.nutrition-meal-list {
  border-top: 1px solid var(--color-border);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.nutrition-meal-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.nutrition-meal-name {
  font-size: 0.8rem;
  color: var(--color-text);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nutrition-meal-cals {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}


/* ===== 13. CALENDAR + BUTTON ===== */

.cal-add-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.cal-add-btn:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: var(--color-accent-glow);
}

/* Month view — positioned top-right, shown on hover */
.cal-add-btn--month {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 16px;
  height: 16px;
  font-size: 0.72rem;
  opacity: 0;
}

.calendar-cell:hover .cal-add-btn--month { opacity: 1; }

.dot-restriction { background: var(--color-amber); }


/* ===== 14. QUICK ENTRY MODAL — WIZARD ===== */

.quick-entry-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.quick-entry-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}

.quick-entry-modal {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 22px 20px 20px;
  width: min(440px, 94vw);
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-shadow: var(--shadow);
  transform: translateY(12px);
  transition: transform 0.2s;
}

.quick-entry-overlay.is-open .quick-entry-modal { transform: translateY(0); }

.quick-entry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.qe-date-label {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text);
}

.qe-close-btn {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-size: 1rem;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color 0.15s;
}

.qe-close-btn:hover { color: var(--color-danger); }

.qe-back-btn {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s;
}

.qe-back-btn:hover { color: var(--color-text); }

/* Step dots */
.qe-step-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin: 12px 0 20px;
}

.qe-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-border);
  transition: background 0.2s, transform 0.2s;
}

.qe-dot.active {
  background: var(--color-accent);
  transform: scale(1.3);
}

/* Section label */
.qe-section-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 12px;
}

/* Type grid */
.qe-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.qe-more-types-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin: 12px 0 4px;
  padding: 8px;
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  transition: color 0.15s;
}
.qe-more-types-toggle:hover { color: var(--color-accent); }
.qe-more-arrow { transition: transform 0.2s; font-size: 0.7rem; }
.qe-more-types { padding-top: 4px; }

.qe-type-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  background: var(--color-surface-2);
  border: 1.5px solid var(--color-border);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  color: var(--color-text);
}

.qe-type-card:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-glow);
  transform: translateY(-2px);
}

.qe-type-card--restriction {
  grid-column: 1 / -1;
  flex-direction: row;
  justify-content: center;
  gap: 10px;
  border-color: rgba(185, 28, 28, 0.3);
  color: var(--color-danger);
}

.qe-type-card--restriction:hover {
  border-color: var(--color-danger);
  background: rgba(185, 28, 28, 0.06);
  transform: none;
}

.qe-type-card--equipment {
  grid-column: 1 / -1;
  flex-direction: row;
  justify-content: center;
  gap: 10px;
  border-color: rgba(99, 102, 241, 0.3);
  color: var(--color-violet, #818cf8);
}

.qe-type-card--equipment:hover {
  border-color: var(--color-violet, #818cf8);
  background: rgba(99, 102, 241, 0.06);
  transform: none;
}

.qe-type-card--ask-ironz {
  width: 100%;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 16px;
  border-color: var(--color-accent);
  color: var(--color-accent-text);
  background: var(--color-accent);
  font-size: 1rem;
  font-weight: 600;
  box-shadow: 0 0 12px var(--color-accent-glow);
}

.qe-type-card--ask-ironz:hover {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  box-shadow: 0 0 20px var(--color-accent-glow);
  transform: translateY(-1px);
}

.qe-ask-ironz-input {
  width: 100%;
  min-height: 72px;
  padding: 10px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.9rem;
  resize: none;
  box-sizing: border-box;
}

.qe-ask-ironz-input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.qe-type-icon  { font-size: 1.5rem; line-height: 1; }
.qe-type-label { font-size: 0.78rem; font-weight: 700; text-align: center; }

/* Muscle buttons */
.qe-muscle-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.qe-muscle-btn {
  padding: 7px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.qe-muscle-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.qe-muscle-btn.selected {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-text);
  box-shadow: 0 0 10px var(--color-accent-glow);
}

/* Manual exercise rows */
.qe-manual-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr auto auto;
  gap: 6px;
  align-items: end;
  background: var(--color-surface-2);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 8px;
}
.qe-manual-row.hiit-row {
  grid-template-columns: 2fr 1.5fr 1fr auto;
}
.exercise-row.hiit-row {
  grid-template-columns: 28px 2fr 1.5fr 1fr auto 28px;
}

/* ── Compact exercise rows (no per-row labels, shared header) ── */

.exercise-row-header {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 28px;
  gap: 6px;
  padding: 0 10px 4px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.exercise-row-header.hiit-row-header {
  grid-template-columns: 2fr 1.5fr 1fr 28px;
}
.log-row-header {
  grid-template-columns: 28px 2fr 1fr 1fr 1fr auto 28px;
}

.exercise-row--compact {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 28px;
  gap: 8px;
  background: var(--color-surface-2);
  border-radius: 6px;
  padding: 6px 10px;
  margin-bottom: 4px;
  align-items: center;
}
.exercise-row--compact.hiit-row {
  grid-template-columns: 2fr 1.5fr 1fr 28px;
}
.exercise-row--compact label { display: none; }
.exercise-row--compact > div { display: contents; }
.exercise-row--compact input {
  padding: 7px 8px;
  font-size: 0.85rem;
}
.exercise-row--compact .remove-exercise-btn {
  position: static;
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Cardio header row (used by quick-entry cardio, not edit modal) */
.cardio-row-header {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 0.8fr 1.5fr 28px;
  gap: 6px;
  padding: 0 10px 4px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Cardio row (quick-entry) */
.qe-cardio-row {
  grid-template-columns: 1.2fr 1.2fr 0.8fr 1.5fr auto;
  align-items: center;
  padding: 6px 10px;
  margin-bottom: 4px;
}
.qe-cardio-row label { display: none; }

/* ── Edit interval card (two-line layout) ── */
.edit-interval-card {
  background: var(--color-surface-2);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
}
.eiv-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.eiv-phase-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.eiv-phase-input {
  flex: 1;
  padding: 5px 8px;
  font-size: 0.85rem;
  font-weight: 600;
}
.eiv-header .remove-exercise-btn {
  position: static;
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.eiv-fields {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.eiv-field {
  display: flex;
  align-items: center;
  gap: 4px;
}
.eiv-field input[type="number"] {
  width: 55px;
  padding: 5px 6px;
  font-size: 0.85rem;
}
.eiv-field select {
  padding: 5px 28px 5px 8px;
  font-size: 0.85rem;
}
.eiv-details {
  margin-top: 4px;
}
.eiv-details input {
  width: 100%;
  padding: 5px 8px;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.qe-dur-col { display: flex; flex-direction: column; gap: 3px; }

.qe-dur-toggle {
  display: flex;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  overflow: hidden;
  width: fit-content;
}
.qe-dur-mode-btn {
  padding: 2px 8px;
  font-size: 0.65rem;
  font-weight: 600;
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.qe-dur-mode-btn.active {
  background: var(--color-accent);
  color: var(--color-accent-text);
}
.qe-dur-mode-btn:not(.active):hover { background: var(--color-surface); }

.qe-unit-label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  align-self: center;
  margin-left: 4px;
}

/* Inline distance/time input row */
#qe-dist-wrap-1, #qe-time-wrap-1,
[id^="qe-dist-wrap-"], [id^="qe-time-wrap-"],
[id^="edit-dist-wrap-"], [id^="edit-time-wrap-"] {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Compact inputs in cardio rows */
.qe-cardio-row input,
.qe-cardio-row select {
  padding: 7px 8px;
  font-size: 0.85rem;
}
.qe-cardio-row select {
  padding-right: 28px;
}
.qe-cardio-row .remove-exercise-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qe-manual-row label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 3px;
  display: block;
}

.remove-exercise-btn {
  background: transparent;
  color: var(--color-danger);
  border: none;
  font-size: 1rem;
  padding: 4px 6px;
  line-height: 1;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.15s;
}

.remove-exercise-btn:hover { opacity: 1; }

/* AI generated workout */
.qe-spinner {
  width: 56px;
  height: 56px;
  margin: 0 auto;
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.qe-spinner svg {
  width: 48px;
  height: 48px;
  animation: qe-bounce 0.6s ease-in-out infinite alternate;
}

@keyframes qe-bounce {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-8px) scale(1.05); }
}


.qe-generated-workout {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 4px;
}

.qe-generated-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: 12px;
}

.qe-exercise-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
  gap: 8px;
}

.qe-exercise-item:last-child { border-bottom: none; }

.qe-exercise-header {
  display: grid;
  grid-template-columns: 1fr auto 90px 72px;
  gap: 8px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 2px;
}

.qe-exercise-item {
  display: grid;
  grid-template-columns: 1fr auto 90px 72px;
  align-items: center;
  gap: 8px;
}

.qe-exercise-actions {
  display: flex;
  gap: 2px;
  justify-content: flex-end;
}

.qe-ex-btn {
  background: none;
  border: none;
  padding: 5px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--color-text-muted);
  line-height: 0;
  transition: color 0.15s, background 0.15s;
}
.qe-ex-btn:hover { background: rgba(255,255,255,0.06); color: var(--color-text); }
.qe-ex-btn.regen:hover  { color: var(--color-accent); }
.qe-ex-btn.remove:hover { color: var(--color-danger); }

.qe-edit-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 100px 90px auto;
  gap: 6px;
  align-items: center;
  padding: 4px 0;
}

.qe-edit-name {
  font-size: 0.82rem;
  padding: 5px 8px;
}

.qe-edit-detail {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
}

.qe-edit-sets, .qe-edit-reps {
  font-size: 0.82rem;
  padding: 5px 6px;
  text-align: center;
}
.qe-edit-sets { width: 42px; }
.qe-edit-reps { width: 52px; }

.qe-edit-confirm {
  background: var(--color-accent);
  color: var(--color-bg);
  border: none;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.qe-exercise-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-text);
}

.qe-exercise-sub {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  margin-top: 1px;
}

.qe-exercise-detail {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  text-align: center;
}

.qe-weight-input {
  width: 100%;
  max-width: 90px;
  font-size: 0.8rem;
  padding: 5px 8px;
  text-align: center;
  box-sizing: border-box;
}

.qe-ai-error {
  background: rgba(185, 28, 28, 0.08);
  border: 1px solid rgba(185, 28, 28, 0.25);
  border-radius: 10px;
  padding: 14px;
  color: var(--color-danger);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Restriction warning */
.qe-restriction-warning {
  font-size: 0.8rem;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(185, 28, 28, 0.08);
  border: 1px solid rgba(185, 28, 28, 0.25);
  color: var(--color-danger);
  line-height: 1.4;
  margin-bottom: 8px;
}


/* ===== 15. RESTRICTION BANNER ===== */

.restriction-banner {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.restriction-banner--rest {
  background: rgba(248, 113, 113, 0.08);
  border-color: rgba(248, 113, 113, 0.3);
}

.restriction-banner-content {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.restriction-icon { font-size: 1.15rem; flex-shrink: 0; }

.restriction-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-amber);
}

.restriction-banner--rest .restriction-label { color: var(--color-danger); }

.restriction-note {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.restriction-remove-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: var(--color-text-muted);
  font-size: 0.72rem;
  padding: 4px 8px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s;
}

.restriction-remove-btn:hover {
  color: var(--color-danger);
  border-color: var(--color-danger);
}

.equip-remove-choice {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.equip-remove-series {
  color: var(--color-danger) !important;
  border-color: var(--color-danger) !important;
}

/* ── Equipment banner ── */
.equipment-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
}

.equipment-banner .restriction-label {
  color: var(--color-violet, #818cf8);
}

/* ── Equipment checkbox list (quick entry step) ── */
.equipment-check-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.equipment-check-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: border-color 0.15s, background 0.15s;
}

.equipment-check-option:hover {
  border-color: var(--color-violet, #818cf8);
  background: rgba(99, 102, 241, 0.06);
}

.equipment-check-option input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-violet, #818cf8);
  flex-shrink: 0;
}

.equip-specify-btn {
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-violet, #818cf8);
  font-size: 0.75rem;
  padding: 3px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.equip-specify-btn:hover {
  background: rgba(99, 102, 241, 0.08);
  border-color: var(--color-violet, #818cf8);
}

.cables-detail-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 4px 24px;
  padding: 0;
}
.cables-detail-list label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  padding: 4px 10px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.cables-detail-list label:hover {
  border-color: var(--color-violet, #818cf8);
  background: rgba(99, 102, 241, 0.06);
}
.cables-detail-list input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--color-violet, #818cf8);
}

.restriction-session-note {
  font-size: 0.78rem;
  color: var(--color-amber);
  background: rgba(245, 158, 11, 0.08);
  border-left: 2px solid var(--color-amber);
  padding: 8px 12px;
  border-radius: 0 6px 6px 0;
  margin-top: -4px;
}

.restriction-removed-notice {
  background: rgba(248, 113, 113, 0.08);
  border: 1px solid rgba(248, 113, 113, 0.3);
  border-radius: 10px;
  padding: 12px 16px;
  color: var(--color-danger);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
}

/* Red cell tint when session is removed by restriction */
.week-cell--restricted-out {
  background: rgba(248, 113, 113, 0.06) !important;
}
.week-cell--restricted-out .week-cell-header { opacity: 0.8; }

.calendar-cell.day-restricted-out {
  background: rgba(248, 113, 113, 0.06);
}

/* Green tint when at least one session is completed */
.week-cell--completed {
  background: rgba(34, 197, 94, 0.07) !important;
}
.calendar-cell.day-completed {
  background: rgba(34, 197, 94, 0.07);
}

/* ── Weekly overview bar ── */
.week-overview-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  margin-top: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.75rem;
}
.week-overview-label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.68rem;
  color: var(--color-text-muted);
}
.week-overview-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.week-overview-time {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  color: var(--color-text);
}
.week-overview-time .icon {
  width: 13px; height: 13px;
  color: var(--color-accent);
}
.week-overview-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 600;
  opacity: 0.85;
}
.week-overview-pill .icon { width: 12px; height: 12px; }

/* Restriction action radios in modal */
.restriction-action-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
}

.restriction-action-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.restriction-action-option:has(input:checked) {
  border-color: var(--color-accent);
  background: var(--color-accent-glow);
}

.restriction-action-option input[type="radio"] {
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--color-accent);
}

.restriction-action-label { font-size: 0.85rem; font-weight: 600; color: var(--color-text); }
.restriction-action-desc  { font-size: 0.75rem; color: var(--color-text-muted); margin-top: 1px; }

/* Generate workout checkbox in log form */
.log-generate-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(129, 140, 248, 0.06);
  border: 1px solid rgba(129, 140, 248, 0.2);
  border-radius: 10px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
}

.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--color-accent);
  cursor: pointer;
}

/* ===== 16. TRAINING CONFLICT BANNER ===== */

#training-conflict-banner {
  margin-bottom: 16px;
}

.conflict-banner {
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.4);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
}

.conflict-banner-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.conflict-banner-icon { font-size: 1.1rem; }

.conflict-banner-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-danger);
  flex: 1;
}

.conflict-banner-body {
  font-size: 0.8rem;
  color: #f8a4a4;
  line-height: 1.5;
  margin-bottom: 10px;
}

.conflict-banner-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.conflict-resolve-btn {
  font-size: 0.75rem;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid rgba(248, 113, 113, 0.4);
  background: rgba(248, 113, 113, 0.12);
  color: var(--color-danger);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.conflict-resolve-btn:hover {
  background: rgba(248, 113, 113, 0.22);
  border-color: var(--color-danger);
}

/* ===== 17. MISC ===== */

.save-msg {
  font-size: 0.875rem;
  color: var(--color-success);
  font-weight: 600;
  min-height: 1.2em;
}

.empty-msg {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  font-style: italic;
}


/* ===== 13. FOOD PREFERENCES ===== */

.pref-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}

.pref-section-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pref-section-label--like    { color: var(--color-success); }
.pref-section-label--dislike { color: var(--color-danger); }

.pref-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-height: 28px;
}

.pref-empty {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  font-style: italic;
  align-self: center;
}

.pref-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid transparent;
  transition: opacity 0.15s;
}

.pref-chip--like {
  background: rgba(52, 211, 153, 0.15);
  border-color: rgba(52, 211, 153, 0.35);
  color: var(--color-success);
}

.pref-chip--dislike {
  background: rgba(248, 113, 113, 0.15);
  border-color: rgba(248, 113, 113, 0.35);
  color: var(--color-danger);
}

.pref-chip--allergy {
  background: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.6);
  color: #ef4444;
  font-weight: 600;
}

.allergy-badge {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  background: #ef4444;
  color: #fff;
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: 4px;
  vertical-align: middle;
}

.allergy-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  cursor: pointer;
}
.allergy-toggle input[type="checkbox"] { margin: 0; }

.allergy-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 10px;
}
.allergy-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 6px;
  background: #ef4444;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
}

.pref-chip-remove {
  background: transparent;
  border: none;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.55;
  color: inherit;
  transition: opacity 0.15s;
}

.pref-chip-remove:hover { opacity: 1; }

.pref-input-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.pref-input-row input {
  flex: 1;
  /* Override the default block width from global input styles */
  width: auto;
}

.btn-pref-add {
  padding: 9px 14px;
  border-radius: 8px;
  border: 1.5px solid transparent;
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}

.btn-pref-add--like {
  background: rgba(52, 211, 153, 0.15);
  border-color: rgba(52, 211, 153, 0.4);
  color: var(--color-success);
}

.btn-pref-add--like:hover {
  background: rgba(52, 211, 153, 0.28);
}

.btn-pref-add--dislike {
  background: rgba(248, 113, 113, 0.15);
  border-color: rgba(248, 113, 113, 0.4);
  color: var(--color-danger);
}

.btn-pref-add--dislike:hover {
  background: rgba(248, 113, 113, 0.28);
}


/* ===== 15. SETTINGS ===== */

/* ── Preference rows ── */

.pref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0;
}

.pref-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-text);
}

.pref-desc {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* ── Toggle switch ── */

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--color-border);
  border-radius: 24px;
  transition: background 0.2s;
}

.toggle-slider::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}

.toggle-switch input:checked + .toggle-slider {
  background: var(--color-accent);
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(20px);
}

.settings-danger-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.settings-danger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
}

.settings-danger-row:last-child { border-bottom: none; }

.settings-danger-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
  border-bottom: 1px solid var(--color-border);
}
.settings-danger-pair .settings-danger-row {
  border-bottom: none;
}
@media (max-width: 500px) {
  .settings-danger-pair {
    grid-template-columns: 1fr;
  }
}

.settings-danger-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
}

.settings-danger-desc {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.about-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.about-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
}

.about-row:last-child { border-bottom: none; }

.about-label { color: var(--color-text-muted); }

.about-value {
  color: var(--color-text);
  font-weight: 600;
}


/* ===== 16. SURVEY ===== */

/* Race Events header layout */
.race-events-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.sv-open-btn {
  flex-shrink: 0;
  padding: 10px 18px;
  background: var(--color-accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 0 0 0 var(--color-accent-glow);
}

.sv-open-btn:hover {
  background: var(--color-accent-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px var(--color-accent-glow);
}

/* Overlay backdrop */
.survey-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}

.survey-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}

/* Modal shell — slides up from bottom on mobile, centered on desktop */
.survey-modal {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - env(safe-area-inset-top, 20px));
  max-height: calc(100dvh - env(safe-area-inset-top, 20px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -4px 40px rgba(0, 0, 0, 0.4);
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.survey-overlay.is-open .survey-modal {
  transform: translateY(0);
}

/* Desktop: center the modal */
@media (min-width: 601px) {
  .survey-overlay {
    align-items: center;
    padding: 16px;
  }
  .survey-modal {
    border-radius: 20px;
    max-height: 90vh;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
    transform: translateY(12px) scale(0.98);
    transition: transform 0.25s;
  }
  .survey-overlay.is-open .survey-modal {
    transform: translateY(0) scale(1);
  }
}

/* Progress bar */
.sv-progress-bar {
  height: 3px;
  background: var(--color-border);
  border-radius: 3px 3px 0 0;
  overflow: hidden;
}

.sv-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-accent), var(--color-cyan));
  border-radius: 3px;
  transition: width 0.4s ease;
  width: 0%;
}

/* Modal nav (back + close) */
.sv-modal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 0;
}

.sv-back-btn {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.15s;
}

.sv-back-btn:hover { color: var(--color-text); }

.sv-close-btn {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, border-color 0.15s;
}

.sv-close-btn:hover { color: var(--color-text); border-color: rgba(255,255,255,0.2); }

/* Step content area */
.sv-step-content {
  padding: 24px 28px 8px;
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Modal footer — sticky at bottom */
.sv-modal-footer {
  padding: 12px 28px calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}

.sv-val-msg {
  font-size: 0.8rem;
  color: var(--color-danger);
  font-weight: 600;
  min-height: 1.2em;
  text-align: center;
}

.sv-next-btn {
  width: 100%;
  padding: 14px;
  background: var(--color-accent);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}

.sv-next-btn:hover {
  background: var(--color-accent-dark);
  transform: translateY(-1px);
}

/* ── Welcome step ── */
.sv-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 8px 0 16px;
}

.sv-welcome-icon {
  font-size: 3rem;
  line-height: 1;
  filter: drop-shadow(0 0 20px var(--color-accent-glow));
}

.sv-welcome-title {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.15;
  background: linear-gradient(135deg, var(--color-text) 60%, var(--color-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.sv-welcome-sub {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  max-width: 380px;
  line-height: 1.6;
}

.sv-welcome-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.sv-pill {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 12px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text-muted);
}

.sv-cta {
  margin-top: 8px;
  padding: 14px 40px;
  background: var(--color-accent);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 4px 20px var(--color-accent-glow);
}

.sv-cta:hover {
  background: var(--color-accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px var(--color-accent-glow);
}

/* ── IronZ Week Builder ──────────────────────────────────────────────── */
.ironz-day-card {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  background: var(--color-surface);
}
.ironz-day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.ironz-day-name {
  font-size: 0.95rem;
}
.ironz-day-actions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.ironz-action-btn {
  font-size: 0.72rem;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
  white-space: nowrap;
}
.ironz-action-btn:hover {
  background: var(--color-border);
}
.ironz-day-empty {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  font-style: italic;
  margin-top: 6px;
}
.ironz-day-session {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 0.85rem;
}
.ironz-day-session-name {
  font-weight: 500;
}
.ironz-day-ex-count {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.ironz-day-rest-label {
  color: var(--color-text-muted);
  font-style: italic;
}
.ironz-saved-picker,
.ironz-manual-entry,
.ironz-ai-prompt {
  margin-top: 8px;
}

.sv-welcome-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 12px;
  width: 100%;
  max-width: 320px;
  color: var(--color-text-muted);
  font-size: 0.8rem;
}
.sv-welcome-divider::before,
.sv-welcome-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}
.sv-ask-ironz-bar {
  width: 100%;
  max-width: 380px;
}
.sv-ask-ironz-bar .nl-input-wrap {
  width: 100%;
}
.sv-skip-link {
  display: block;
  margin-top: 16px;
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sv-skip-link:hover { color: var(--color-text); }

/* ── Question steps ── */
.sv-question-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sv-question {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.3;
}

.sv-hint {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-top: -8px;
}

/* Race type grid */
.sv-race-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.sv-race-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px 16px;
  background: var(--color-surface-2);
  border: 1.5px solid var(--color-border);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}

.sv-race-card:hover {
  border-color: rgba(255,255,255,0.18);
  transform: translateY(-1px);
}

.sv-race-card.is-selected {
  border-color: var(--color-accent);
  background: rgba(129, 140, 248, 0.1);
}

.sv-race-icon {
  font-size: 1.4rem;
  line-height: 1;
  margin-bottom: 2px;
}

.sv-race-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-text);
}

.sv-race-desc {
  font-size: 0.72rem;
  color: var(--color-text-muted);
}

/* Activity grid (just-training multi-select) */
.sv-activity-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.sv-activity-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 18px 12px;
  background: var(--color-surface-2);
  border: 1.5px solid var(--color-border);
  border-radius: 12px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}

.sv-activity-card:hover {
  border-color: rgba(255,255,255,0.18);
  transform: translateY(-1px);
}

.sv-activity-card.is-selected {
  border-color: var(--color-accent);
  background: rgba(129, 140, 248, 0.1);
}

.sv-activity-icon {
  font-size: 1.6rem;
  line-height: 1;
}

.sv-activity-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text);
}

.sv-activity-check {
  position: absolute;
  top: 7px;
  right: 9px;
  font-size: 0.7rem;
  color: var(--color-accent);
  font-weight: 700;
}

/* Option list (fitness level, days) */
.sv-option-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sv-option-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--color-surface-2);
  border: 1.5px solid var(--color-border);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
  width: 100%;
}

.sv-option-card:hover {
  border-color: rgba(255,255,255,0.18);
  transform: translateX(2px);
}

.sv-option-card.is-selected {
  border-color: var(--color-accent);
  background: rgba(129, 140, 248, 0.1);
}

.sv-option-icon {
  font-size: 1.6rem;
  line-height: 1;
  flex-shrink: 0;
}

.sv-days-num {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-accent);
  min-width: 28px;
  text-align: center;
  position: relative;
}
.sv-rec-badge {
  display: none;
}
.sv-recommended {
  border-color: var(--color-accent);
}
.sv-recommended .sv-check::before {
  content: "Rec";
  font-size: 0.6rem;
  font-weight: 700;
  background: var(--color-accent);
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 6px;
  letter-spacing: 0.03em;
}

.sv-option-text { flex: 1; }

/* Running days slider */
.sv-slider-wrap {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sv-slider-value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-accent);
  text-align: center;
  letter-spacing: -0.01em;
}

.sv-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  outline: none;
  cursor: pointer;
}

.sv-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-accent);
  cursor: pointer;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.25);
  transition: box-shadow 0.15s;
}

.sv-slider::-webkit-slider-thumb:hover {
  box-shadow: 0 0 0 6px rgba(99, 102, 241, 0.35);
}

.sv-slider::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-accent);
  cursor: pointer;
  border: none;
}

.sv-slider-marks {
  display: flex;
  justify-content: space-between;
  padding: 0 4px;
}

.sv-slider-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  min-width: 32px;
  text-align: center;
}

.sv-slider-mark--rec {
  color: var(--color-accent);
}

.sv-slider-rec-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: rgba(99, 102, 241, 0.15);
  padding: 1px 5px;
  border-radius: 4px;
}

.sv-day-picker-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin: 18px 0 8px;
}

.sv-day-picker {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.sv-day-btn {
  flex: 1;
  min-width: 38px;
  padding: 8px 4px;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.sv-day-btn.is-selected {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.sv-day-btn.is-muted {
  opacity: 0.35;
}

.sv-day-btn.is-locked {
  cursor: default;
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.sv-act-day-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
}

.sv-act-day-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sv-act-day-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-text);
}

.sv-option-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-text);
}

.sv-option-desc {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.sv-check {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--color-accent);
  opacity: 0;
  transition: opacity 0.15s;
}

.sv-option-card.is-selected .sv-check { opacity: 1; }

/* Date input */
.sv-date-input {
  width: 100%;
  padding: 12px 14px;
  background: var(--color-surface-2);
  border: 1.5px solid var(--color-border);
  border-radius: 12px;
  color: var(--color-text);
  font-size: 1rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
  -webkit-appearance: none;
}

.sv-date-input:focus { border-color: var(--color-accent); }

/* Weeks display */
.sv-weeks-display {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 28px;
  flex-wrap: wrap;
}

.sv-weeks-badge {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-accent);
  background: rgba(129, 140, 248, 0.12);
  border: 1px solid rgba(129, 140, 248, 0.3);
  border-radius: 999px;
  padding: 3px 10px;
}

.sv-weeks-note {
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

/* Optional text + field group */
.sv-optional {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-left: 6px;
}

.sv-field-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sv-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.sv-text-input {
  width: 100%;
  padding: 12px 14px;
  background: var(--color-surface-2);
  border: 1.5px solid var(--color-border);
  border-radius: 12px;
  color: var(--color-text);
  font-size: 1rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
}

.sv-text-input:focus { border-color: var(--color-accent); }

.sv-name-input {
  font-size: 1.3rem;
  padding: 16px;
}

.sv-skip-btn {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
  align-self: flex-start;
  transition: color 0.15s;
}

.sv-skip-btn:hover { color: var(--color-text); }

/* Summary card */
.sv-summary-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
}

.sv-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--color-border);
}

.sv-summary-row:last-child { border-bottom: none; }

.sv-summary-label {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

.sv-summary-value {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-text);
  text-align: right;
}

/* Generate button */
.sv-generate-btn {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, var(--color-accent), var(--color-cyan));
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 1.05rem;
  font-weight: 800;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 4px 20px var(--color-accent-glow);
  letter-spacing: 0.02em;
}

.sv-generate-btn:hover {
  opacity: 0.9;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px var(--color-accent-glow);
}

.sv-gen-msg {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-success);
  text-align: center;
  min-height: 1.4em;
}

/* ===== SURVEY — ZONES STEP ===== */

.sv-zone-section {
  background: var(--color-card-bg);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 14px;
  border: 1px solid var(--color-border);
}
.sv-zone-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 4px;
}
.sv-zone-section .sv-hint {
  margin-bottom: 12px;
}
.sv-zone-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.sv-zone-row:last-child { margin-bottom: 0; }
.sv-zone-label {
  font-size: 0.85rem;
  font-weight: 600;
  min-width: 70px;
  color: var(--color-text-muted);
}
.sv-zone-time {
  display: flex;
  align-items: center;
  gap: 4px;
}
.sv-zone-time-field {
  width: 56px;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-input-bg, var(--color-bg));
  color: var(--color-text);
  font-size: 0.9rem;
  text-align: center;
}
.sv-zone-time-h { width: 44px; }
.sv-zone-sep {
  font-weight: 700;
  color: var(--color-text-muted);
}
.sv-zone-input {
  padding: 8px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-input-bg, var(--color-bg));
  color: var(--color-text);
  font-size: 0.9rem;
}
.sv-zone-lift-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.sv-zone-lift-row:last-child { margin-bottom: 0; }
.sv-zone-lift-label {
  font-size: 0.85rem;
  font-weight: 600;
  min-width: 120px;
  color: var(--color-text);
}
.sv-zone-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}
.sv-skip-btn {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 10px;
  text-decoration: underline;
}
.sv-skip-btn:hover {
  color: var(--color-text);
}

/* ===== CONNECTED APPS ===== */

.connected-apps-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.app-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
}

.app-row:last-child {
  border-bottom: none;
}

.app-logo {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 900;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}

.app-logo--strava  { background: #fc4c02; }
.app-logo--garmin  { background: #007cc3; }
.app-logo--apple   { background: #ff3b30; font-size: 1.1rem; }
.app-logo--google  { background: #4285f4; }
.app-logo--wahoo   { background: #e8002d; }
.app-logo--whoop   { background: #000; border: 1px solid rgba(255,255,255,0.15); }

.app-info {
  flex: 1;
  min-width: 0;
}

.app-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-text);
}

.app-desc {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 2px;
  line-height: 1.4;
}

.app-status {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}

.app-status--soon {
  background: rgba(129, 140, 248, 0.15);
  color: var(--color-accent);
  border: 1px solid rgba(129, 140, 248, 0.3);
}

.app-status--unavailable {
  background: rgba(100, 116, 139, 0.12);
  color: var(--color-text-muted);
  border: 1px solid rgba(100, 116, 139, 0.2);
}

.app-status--connected {
  background: rgba(52, 211, 153, 0.15);
  color: var(--color-success);
  border: 1px solid rgba(52, 211, 153, 0.3);
}

.btn-app-connect {
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: not-allowed;
  flex-shrink: 0;
  white-space: nowrap;
  opacity: 0.5;
}

@media (max-width: 520px) {
  .app-row { flex-wrap: wrap; gap: 10px; }
  .app-status { order: 3; }
  .btn-app-connect { order: 4; }
}


/* ===== DRAG AND DROP ===== */

.session-bubble[draggable="true"] {
  cursor: grab;
}

.session-bubble[draggable="true"]:active {
  cursor: grabbing;
}

.session-bubble.dragging {
  opacity: 0.35;
}

.week-cell.drag-over {
  background: rgba(129, 140, 248, 0.14);
  border-color: var(--color-accent);
  border-top-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-glow);
}


/* ===== PLAN GOAL & SPLIT ===== */

.plan-goal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 6px;
}
.plan-goal-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}
.plan-goal-btn strong { font-size: 0.85rem; color: var(--color-text); }
.plan-goal-desc { font-size: 0.7rem; color: var(--color-text-muted); margin-top: 2px; }
.plan-goal-btn:hover { border-color: var(--color-accent); }
.plan-goal-btn.is-active {
  border-color: var(--color-accent);
  background: var(--color-accent-glow);
}
.plan-goal-btn.is-active strong { color: var(--color-accent); }

.plan-split-preview {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.plan-split-day {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.82rem;
}
.plan-split-day-label {
  font-weight: 700;
  min-width: 36px;
  color: var(--color-text-muted);
  font-size: 0.75rem;
}
.plan-split-day-muscles {
  flex: 1;
  color: var(--color-text);
}
.plan-split-name-input {
  font-size: 0.9rem;
  font-weight: 700;
  padding: 4px 8px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface-2);
  color: var(--color-text);
  width: 120px;
}
.plan-split-day-edit {
  background: none;
  border: none;
  color: var(--color-accent);
  font-size: 0.72rem;
  cursor: pointer;
  padding: 2px 4px;
}
.plan-split-day-edit:hover { text-decoration: underline; }

.plan-muscle-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.plan-muscle-chip {
  font-size: 0.72rem;
  padding: 3px 8px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  cursor: pointer;
  transition: all 0.15s;
  color: var(--color-text);
}
.plan-muscle-chip.is-active {
  background: var(--color-accent);
  color: var(--color-accent-text, #fff);
  border-color: var(--color-accent);
}

.sv-split-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.sv-split-btn {
  display: block;
  width: 100%;
  padding: 10px 14px;
  text-align: left;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  transition: all 0.15s;
}
.sv-split-btn:hover { border-color: var(--color-accent); }
.sv-split-btn.is-active {
  border-color: var(--color-accent);
  background: var(--color-accent-glow);
  color: var(--color-accent);
}

/* ===== ONBOARDING ===== */

.ob-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 16px 0;
}

.ob-logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 3rem;
  letter-spacing: 4px;
  background: linear-gradient(135deg, var(--color-accent), var(--color-cyan, #22d3ee));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ob-title {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.2;
  margin: 0;
}

.ob-subtitle {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  max-width: 380px;
  line-height: 1.6;
}

.ob-step-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 4px;
}
.ob-units-toggle {
  display: flex;
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  margin-top: 4px;
}
.ob-units-btn {
  flex: 1;
  padding: 8px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  border: none;
  background: var(--color-bg);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ob-units-btn.is-active {
  background: var(--color-accent);
  color: #fff;
}
.ob-units-btn:not(.is-active):hover {
  background: var(--color-surface-2);
}

.ob-step-desc {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0 0 16px;
  line-height: 1.5;
}

/* Goal cards */
.ob-goal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.ob-goal-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 10px;
  border: 1.5px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface-2);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  text-align: center;
}

.ob-goal-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-1px);
}

.ob-goal-card.selected {
  border-color: var(--color-accent);
  background: var(--color-accent-glow);
}

.ob-goal-icon { font-size: 1.1rem; }
.ob-goal-icon svg { width: 24px; height: 24px; }

.ob-goal-label {
  font-weight: 700;
  font-size: 0.9rem;
}

.ob-goal-desc {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  line-height: 1.3;
}

/* Experience level cards */
.ob-level-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ob-level-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border: 1.5px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface-2);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: left;
}

.ob-level-card:hover { border-color: var(--color-accent); }

.ob-level-card.selected {
  border-color: var(--color-accent);
  background: var(--color-accent-glow);
}

.ob-level-label {
  font-weight: 700;
  font-size: 0.95rem;
}

.ob-level-desc {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* Equipment / dietary chip grid */
.ob-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ob-chip {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.ob-chip input[type="checkbox"] { display: none; }

.ob-chip-label {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: 20px;
  background: var(--color-surface-2);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-muted);
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  user-select: none;
}

.ob-chip input:checked + .ob-chip-label {
  border-color: var(--color-accent);
  background: var(--color-accent-glow);
  color: var(--color-accent);
}

/* Feature toggles */
.ob-feature-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ob-feature-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
}

.ob-feature-row:last-child { border-bottom: none; }

.ob-feature-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ob-feature-name {
  font-weight: 700;
  font-size: 0.92rem;
}

.ob-feature-desc {
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

/* Summary card */
.ob-summary-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
  margin-top: 12px;
}

.ob-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.85rem;
}

.ob-summary-row:last-child { border-bottom: none; }

.ob-summary-label {
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 0.8rem;
}

/* Workout interest cards */
.ob-interest-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.ob-interest-card {
  cursor: pointer;
}

.ob-interest-card input[type="checkbox"] { display: none; }

.ob-interest-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 8px;
  border: 1.5px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface-2);
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  text-align: center;
}

.ob-interest-card input:checked + .ob-interest-inner {
  border-color: var(--color-accent);
  background: var(--color-accent-glow);
}

.ob-interest-inner:hover {
  border-color: var(--color-accent);
  transform: translateY(-1px);
}

.ob-interest-icon svg { width: 24px; height: 24px; }

.ob-interest-label {
  font-weight: 700;
  font-size: 0.82rem;
}

/* Availability step */
.ob-day-picker, .ob-session-picker {
  display: flex; gap: 8px; margin-top: 8px;
}
.ob-day-btn, .ob-session-btn {
  flex: 1; padding: 12px 8px; border-radius: 10px; border: 2px solid var(--color-border);
  background: var(--color-surface); color: var(--color-text); font-weight: 700;
  font-size: 1rem; cursor: pointer; transition: all 0.15s;
}
.ob-day-btn:hover, .ob-session-btn:hover { border-color: var(--color-accent); }
.ob-day-btn.selected, .ob-session-btn.selected {
  border-color: var(--color-accent); background: var(--color-accent-glow); color: var(--color-accent);
}

/* Hydration habit radios */
.ob-radio-group { display: flex; flex-direction: column; gap: 8px; }
.ob-radio-card { cursor: pointer; }
.ob-radio-card input[type="radio"] { display: none; }
.ob-radio-inner {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: 10px;
  border: 2px solid var(--color-border); transition: all 0.15s;
}
.ob-radio-card input:checked + .ob-radio-inner {
  border-color: var(--color-accent); background: var(--color-accent-glow);
}
.ob-radio-inner:hover { border-color: var(--color-accent); }
.ob-radio-label { font-weight: 700; font-size: 0.9rem; }
.ob-radio-desc { font-size: 0.78rem; color: var(--color-text-muted); }

/* Week preview on summary */
.ob-week-preview { margin-bottom: 8px; }
.ob-week-days {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
}
.ob-week-day {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 4px; border-radius: 10px; border: 1px solid var(--color-border);
  background: var(--color-surface); text-align: center;
}
.ob-week-day--active {
  border-color: var(--color-accent); background: var(--color-accent-glow);
}
.ob-week-day--rest { opacity: 0.5; }
.ob-week-day-name { font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.ob-week-day-icon { font-size: 1rem; }
.ob-week-day-icon svg { width: 18px; height: 18px; }
.ob-week-day-label { font-size: 0.68rem; color: var(--color-text-muted); line-height: 1.2; }
.ob-week-extras { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.ob-week-extra {
  font-size: 0.82rem; color: var(--color-text-muted); padding: 8px 12px;
  border-radius: 8px; background: var(--color-surface); border: 1px solid var(--color-border);
}

/* ===== ADHERENCE ENGINE ===== */
.adherence-prompt {
  margin: 10px 0; padding: 16px; border-radius: 12px;
  border: 1px solid var(--color-border); background: var(--color-surface-2);
}
.adherence-welcome-back { border-color: var(--color-accent); background: var(--color-accent-glow); }
.adherence-reschedule { border-color: #f59e0b; background: rgba(245,158,11,0.06); }
.adherence-header { display: flex; align-items: flex-start; gap: 10px; }
.adherence-icon svg { width: 22px; height: 22px; flex-shrink: 0; }
.adherence-text { flex: 1; }
.adherence-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 4px; }
.adherence-message { font-size: 0.84rem; color: var(--color-text-muted); line-height: 1.4; }
.adherence-dismiss {
  background: none; border: none; color: var(--color-text-muted); font-size: 1.2rem;
  cursor: pointer; padding: 0 4px; line-height: 1;
}
.adherence-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.adherence-action-btn {
  flex: 1; min-width: 0; padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text); font-size: 0.82rem; font-weight: 600;
  cursor: pointer; transition: all 0.15s; text-align: center;
}
.adherence-action-btn:first-child {
  background: var(--color-accent); color: #fff; border-color: var(--color-accent);
}
.adherence-action-btn:hover { opacity: 0.85; }
.consistency-badge {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: 10px; padding: 3px 10px; border-radius: 20px;
  font-size: 0.75rem; font-weight: 700;
  background: var(--color-accent-glow); color: var(--color-accent);
  vertical-align: middle;
}
.consistency-badge svg { width: 14px; height: 14px; }

/* ===== ADAPTIVE COACHING ===== */
.coaching-insights { margin: 10px 0; }
.coaching-header {
  font-weight: 700; font-size: 0.88rem; display: flex; align-items: center; gap: 6px;
  margin-bottom: 10px;
}
.coaching-header svg { width: 18px; height: 18px; color: var(--color-accent); }
.coaching-insight {
  display: flex; gap: 10px; padding: 12px; margin-bottom: 8px;
  border-radius: 10px; border: 1px solid var(--color-border); background: var(--color-surface-2);
  position: relative;
}
.coaching-dismiss-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 4px;
  opacity: 0.5;
  line-height: 0;
}
.coaching-dismiss-btn:hover { opacity: 1; }
.coaching-icon svg { width: 18px; height: 18px; flex-shrink: 0; }
.coaching-body { flex: 1; }
.coaching-title { font-weight: 700; font-size: 0.86rem; margin-bottom: 3px; }
.coaching-message { font-size: 0.8rem; color: var(--color-text-muted); line-height: 1.4; margin-bottom: 8px; }
.coaching-action-btn {
  padding: 6px 14px; border-radius: 6px; border: 1px solid var(--color-accent);
  background: var(--color-accent-glow); color: var(--color-accent);
  font-size: 0.78rem; font-weight: 600; cursor: pointer;
}
.coaching-action-btn:hover { background: var(--color-accent); color: #fff; }

/* ===== STRAVA INTEGRATION ===== */
.strava-connected { padding: 10px 0; }
.strava-user { font-size: 0.88rem; margin-bottom: 4px; }
.strava-sync-info { font-size: 0.78rem; color: var(--color-text-muted); margin-bottom: 10px; }
.strava-actions { display: flex; gap: 8px; }
.strava-connect-prompt .hint { margin-bottom: 10px; }
.btn-strava {
  padding: 10px 20px; border-radius: 8px; border: none;
  background: #fc4c02; color: #fff; font-weight: 700; font-size: 0.88rem;
  cursor: pointer; transition: opacity 0.15s;
}
.btn-strava:hover { opacity: 0.85; }

/* ===== SUBSCRIPTION & PAYWALL ===== */
.pw-header { text-align: center; margin-bottom: 16px; }
.pw-logo {
  font-size: 1.3rem; font-weight: 700; display: flex; align-items: center;
  justify-content: center; gap: 8px; margin-bottom: 6px;
}
.pw-logo svg { width: 24px; height: 24px; color: var(--color-accent); }
.pw-context { font-size: 0.88rem; color: var(--color-text-muted); margin: 0; }
.pw-features { margin-bottom: 20px; }
.pw-feature {
  display: flex; align-items: center; gap: 8px; padding: 6px 0;
  font-size: 0.84rem;
}
.pw-feature svg { width: 16px; height: 16px; color: var(--color-success); flex-shrink: 0; }
.pw-pricing { display: flex; gap: 10px; margin-bottom: 16px; }
.pw-plan {
  flex: 1; padding: 16px 12px; border-radius: 12px; border: 2px solid var(--color-border);
  background: var(--color-surface); cursor: pointer; text-align: center;
  transition: all 0.15s; position: relative;
}
.pw-plan:hover { border-color: var(--color-accent); }
.pw-plan--annual { border-color: var(--color-accent); background: var(--color-accent-glow); }
.pw-plan-badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--color-accent); color: #fff; font-size: 0.68rem; font-weight: 700;
  padding: 2px 10px; border-radius: 10px; text-transform: uppercase;
}
.pw-plan-name { font-weight: 700; font-size: 0.88rem; margin-bottom: 4px; }
.pw-plan-price { font-size: 1.4rem; font-weight: 700; }
.pw-plan-price span { font-size: 0.78rem; font-weight: 400; color: var(--color-text-muted); }
.pw-plan-total { font-size: 0.72rem; color: var(--color-text-muted); margin-top: 4px; }
.pw-trial-btn { width: 100%; margin-bottom: 8px; }
.pw-trial-note { text-align: center; font-size: 0.75rem; color: var(--color-text-muted); margin: 0 0 12px; }
.pw-skip-btn {
  width: 100%; padding: 10px; background: none; border: none; color: var(--color-text-muted);
  font-size: 0.82rem; cursor: pointer; text-decoration: underline;
}
.sub-status { padding: 12px 0; }
.sub-status-badge {
  font-weight: 700; font-size: 0.95rem; display: flex; align-items: center; gap: 6px;
  margin-bottom: 6px;
}
.sub-status-badge svg { width: 18px; height: 18px; }
.sub-status--premium .sub-status-badge { color: var(--color-accent); }
.sub-status--trial .sub-status-badge { color: #f59e0b; }
.sub-status-detail { font-size: 0.84rem; color: var(--color-text-muted); margin: 0 0 10px; }

/* ===== TRUST CENTER ===== */
.tc-section { margin-bottom: 24px; }
.tc-section:last-child { margin-bottom: 0; }
.tc-section-title { font-size: 1rem; font-weight: 700; margin: 0 0 6px; }
.tc-section-desc { font-size: 0.84rem; color: var(--color-text-muted); margin: 0 0 12px; line-height: 1.5; }
.tc-list { font-size: 0.84rem; color: var(--color-text-muted); margin: 0 0 12px; padding-left: 20px; line-height: 1.6; }
.tc-inventory { display: flex; flex-direction: column; gap: 8px; }
.tc-inventory-item {
  padding: 12px; border-radius: 8px; border: 1px solid var(--color-border);
  background: var(--color-surface);
}
.tc-inv-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.tc-inv-category { font-weight: 700; font-size: 0.88rem; }
.tc-inv-status { font-size: 0.72rem; padding: 2px 8px; border-radius: 10px; font-weight: 600; }
.tc-inv--active { background: rgba(34,197,94,0.12); color: var(--color-success); }
.tc-inv--empty { background: var(--color-surface-2); color: var(--color-text-muted); }
.tc-inv-fields { font-size: 0.78rem; color: var(--color-text-muted); margin-bottom: 2px; }
.tc-inv-purpose { font-size: 0.78rem; color: var(--color-text-muted); font-style: italic; }
.tc-export-btns { display: flex; gap: 8px; }
.tc-delete-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.tc-delete-btn {
  padding: 10px 12px; border-radius: 8px; border: 1px solid var(--color-border);
  background: var(--color-surface); color: var(--color-text); font-size: 0.82rem;
  font-weight: 600; cursor: pointer; transition: all 0.15s;
}
.tc-delete-btn:hover { border-color: var(--color-danger); color: var(--color-danger); }
.tc-danger-zone {
  padding-top: 20px; border-top: 1px solid var(--color-danger);
}
.btn-danger {
  padding: 10px 20px; border-radius: 8px; border: 1px solid var(--color-danger);
  background: rgba(239,68,68,0.1); color: var(--color-danger);
  font-weight: 600; cursor: pointer; font-size: 0.88rem;
}
.btn-danger:hover { background: var(--color-danger); color: #fff; }

/* ===== NOTIFICATION SETTINGS ===== */
.notif-setting-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; border-bottom: 1px solid var(--color-border);
}
.notif-setting-row:last-child { border-bottom: none; }
.notif-setting-info { display: flex; flex-direction: column; gap: 2px; }
.notif-setting-name {
  font-weight: 600; font-size: 0.88rem; display: flex; align-items: center; gap: 6px;
}
.notif-setting-name svg { width: 16px; height: 16px; }
.notif-setting-desc { font-size: 0.78rem; color: var(--color-text-muted); }
.notif-time-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 0 12px;
  flex-wrap: wrap; border-bottom: 1px solid var(--color-border);
}
.notif-time-row label {
  font-size: 0.8rem; color: var(--color-text-muted); font-weight: 500;
}
.notif-time-row input[type="time"] {
  padding: 4px 8px; border-radius: 8px; border: 1px solid var(--color-border);
  background: var(--color-surface-2); color: var(--color-text); font-size: 0.85rem;
}

/* ===== SAFETY GUARDRAILS ===== */
.safety-warning {
  display: flex; gap: 12px; padding: 14px; margin: 10px 0;
  border-radius: 10px; border: 1px solid #f59e0b;
  background: rgba(245, 158, 11, 0.08);
}
.safety-warning-icon svg { width: 22px; height: 22px; color: #f59e0b; flex-shrink: 0; }
.safety-warning-text { font-size: 0.85rem; line-height: 1.5; margin-bottom: 10px; }
.safety-warning-resources { font-size: 0.8rem; color: var(--color-text-muted); }
.safety-warning-resources p { margin: 2px 0; }
.safety-warning-resources a {
  color: var(--color-accent); font-weight: 600; text-decoration: underline;
}
.safety-floor-warning {
  margin-top: 6px; padding: 8px 10px; border-radius: 8px; font-size: 0.78rem;
  background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.3);
  color: #f59e0b; display: flex; align-items: flex-start; gap: 6px; line-height: 1.4;
}
.safety-floor-warning svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }
.ai-disclaimer {
  font-size: 0.72rem; color: var(--color-text-muted); font-style: italic;
  margin: 10px 0 0; padding: 8px 0; border-top: 1px solid var(--color-border);
  line-height: 1.4;
}

/* ===== WEEKLY CHECK-IN ===== */
.wc-title { font-size: 1.2rem; font-weight: 700; margin: 0 0 6px; }
.wc-message { font-size: 0.88rem; color: var(--color-text-muted); margin: 0 0 16px; line-height: 1.4; }
.wc-stats { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.wc-stat-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.wc-stat-icon svg { width: 18px; height: 18px; }
.wc-stat-label { font-size: 0.82rem; font-weight: 600; flex: 1; }
.wc-stat-value { font-size: 0.82rem; color: var(--color-text-muted); font-weight: 600; }
.wc-stat-bar {
  height: 8px; border-radius: 4px; background: var(--color-border); overflow: hidden;
}
.wc-stat-fill {
  height: 100%; border-radius: 4px; transition: width 0.4s ease;
}
.wc-feedback { margin-bottom: 20px; }
.wc-feedback-label { display: block; font-size: 0.88rem; font-weight: 600; margin-bottom: 10px; }
.wc-feedback-options { display: flex; gap: 8px; }
.wc-feedback-btn {
  flex: 1; padding: 10px 8px; border-radius: 10px; border: 2px solid var(--color-border);
  background: var(--color-surface); color: var(--color-text); font-weight: 600;
  font-size: 0.82rem; cursor: pointer; transition: all 0.15s;
}
.wc-feedback-btn:hover { border-color: var(--color-accent); }
.wc-feedback-btn.selected {
  border-color: var(--color-accent); background: var(--color-accent-glow); color: var(--color-accent);
}
.wc-submit-btn { width: 100%; margin-bottom: 8px; }
.wc-skip-btn { width: 100%; }

/* Check-in trend chart (Stats tab) */
.wc-trend { margin-top: 16px; }
.wc-trend-title { font-size: 0.92rem; font-weight: 700; margin: 0 0 12px; }
.wc-trend-chart {
  display: flex; align-items: flex-end; gap: 6px; height: 80px;
  padding: 0 4px;
}
.wc-trend-bar-wrap {
  flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%;
  justify-content: flex-end;
}
.wc-trend-bar {
  width: 100%; max-width: 24px; border-radius: 4px 4px 0 0;
  background: var(--color-accent); min-height: 3px; transition: height 0.3s;
}
.wc-trend-label { font-size: 0.65rem; color: var(--color-text-muted); margin-top: 4px; }

/* ===== TRANSPARENCY / WHY THIS ===== */
.transparency-toggle {
  display: flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  color: var(--color-text-muted); font-size: 0.78rem; font-weight: 600;
  padding: 6px 0 2px; margin-top: 4px;
  transition: color 0.15s;
}
.transparency-toggle:hover { color: var(--color-text); }
.transparency-toggle .icon { width: 14px; height: 14px; flex-shrink: 0; }
.transparency-toggle .chevron-why {
  display: inline-block; transition: transform 0.2s; font-size: 0.7rem; margin-left: 2px;
}
.transparency-toggle.is-open .chevron-why { transform: rotate(180deg); }
.transparency-section {
  display: none; font-size: 0.8rem; line-height: 1.5;
  color: var(--color-text-muted); padding: 6px 0 2px;
  border-top: 1px solid var(--color-border); margin-top: 4px;
}
.transparency-section.is-open { display: block; }
.transparency-section p { margin: 0 0 4px; }
.transparency-section ul { margin: 2px 0 0; padding-left: 18px; }
.transparency-section ul li { margin-bottom: 2px; }
.meal-transparency-note {
  font-size: 0.78rem; color: var(--color-text-muted); line-height: 1.45;
  padding: 6px 0 4px; margin-bottom: 2px;
}
.meal-transparency-note .icon { width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; }
.hydration-transparency-note {
  font-size: 0.78rem; color: var(--color-text-muted); line-height: 1.45;
  padding: 4px 0 2px;
}
.hydration-transparency-note .icon { width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; }

/* ===== BARCODE SCANNER ===== */

.macro-grid-barcode {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px;
}
.macro-grid-barcode .macro-item { display: flex; flex-direction: column; gap: 4px; }
.macro-grid-barcode .macro-label { font-size: 0.82rem; color: var(--color-text-muted); }
.macro-grid-barcode input[type="number"] {
  width: 100%; padding: 8px; border: 1px solid var(--color-border);
  border-radius: 8px; background: var(--color-surface); color: var(--color-text);
  font-size: 1rem;
}

#barcode-reader video { border-radius: 8px; }
#barcode-reader { background: #000; border-radius: 8px; min-height: 200px; }

.recent-scan-item {
  padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 8px;
  margin-bottom: 6px; cursor: pointer; transition: background 0.15s;
}
.recent-scan-item:hover { background: var(--color-surface-2); }
.recent-scan-name { font-weight: 600; font-size: 0.92rem; margin-bottom: 2px; }
.recent-scan-macros { font-size: 0.8rem; color: var(--color-text-muted); }

/* ===== CHALLENGES ===== */

.ch-section-title {
  font-size: 0.95rem; font-weight: 700; margin: 16px 0 8px;
  text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--color-text-muted);
}
.ch-section-title:first-child { margin-top: 0; }

.ch-card {
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 14px; margin-bottom: 10px;
}
.ch-card--active { border-left: 3px solid var(--color-accent); }
.ch-card--completed { opacity: 0.75; }
.ch-card--available { display: flex; justify-content: space-between; align-items: center; }

.ch-card-header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.ch-card--available .ch-card-header { margin-bottom: 0; flex: 1; }
.ch-card-icon { flex-shrink: 0; width: 28px; height: 28px; color: var(--color-accent); }
.ch-card-icon .icon { width: 28px; height: 28px; }
.ch-card-info { display: flex; flex-direction: column; gap: 2px; }
.ch-card-info strong { font-size: 0.95rem; }
.ch-card-goal { font-size: 0.82rem; color: var(--color-text-muted); }
.ch-card-duration { font-size: 0.78rem; color: var(--color-text-muted); }

.ch-progress { margin-bottom: 10px; }
.ch-progress-bar {
  height: 6px; background: var(--color-border); border-radius: 3px; overflow: hidden;
}
.ch-progress-fill {
  height: 100%; background: var(--color-accent); border-radius: 3px;
  transition: width 0.3s ease;
}
.ch-progress-text { font-size: 0.78rem; color: var(--color-text-muted); margin-top: 4px; display: block; }

.ch-days { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.ch-day {
  width: 26px; height: 26px; border-radius: 6px; display: flex; align-items: center;
  justify-content: center; font-size: 0.7rem; font-weight: 600;
  border: 1px solid var(--color-border); color: var(--color-text-muted);
  background: var(--color-surface);
}
.ch-day--done { background: var(--color-success); color: #fff; border-color: var(--color-success); }
.ch-day--miss { background: var(--color-danger); color: #fff; border-color: var(--color-danger); opacity: 0.6; }
.ch-day--future { opacity: 0.4; }

.ch-leaderboard { margin-bottom: 10px; }
.ch-lb-title { font-size: 0.82rem; font-weight: 700; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.03em; }
.ch-lb-row {
  display: flex; align-items: center; gap: 8px; padding: 4px 6px;
  font-size: 0.82rem; border-radius: 6px;
}
.ch-lb-row--user { background: var(--color-accent-glow); font-weight: 700; }
.ch-lb-row--sep { margin-top: 4px; border-top: 1px dashed var(--color-border); padding-top: 6px; }
.ch-lb-rank { width: 28px; text-align: right; color: var(--color-text-muted); font-size: 0.78rem; }
.ch-lb-name { flex: 1; }
.ch-lb-pct { font-weight: 600; }

.ch-badge-done {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.82rem; font-weight: 600; color: var(--color-success);
}
.ch-badge-done .icon { width: 16px; height: 16px; }

.ch-abandon-btn {
  background: none; border: 1px solid var(--color-border); color: var(--color-text-muted);
  font-size: 0.78rem; padding: 4px 10px; border-radius: 6px; cursor: pointer;
}
.ch-abandon-btn:hover { border-color: var(--color-danger); color: var(--color-danger); }

/* ===== WEEK MEAL PLANNER ===== */

.mp-controls { margin-bottom: 12px; }
.mp-household-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mp-label { font-size: 0.88rem; font-weight: 600; }
.mp-select {
  padding: 6px 32px 6px 10px; border-radius: 8px; border: 1px solid var(--color-border);
  background: var(--color-surface-2); color: var(--color-text); font-size: 0.88rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%236b7280' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; -webkit-appearance: none; appearance: none;
}
.mp-btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

.mp-day-tabs {
  display: flex; gap: 4px; margin-bottom: 12px; overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.mp-day-tab {
  flex: 1; min-width: 40px; padding: 8px 4px; border: 1px solid var(--color-border);
  border-radius: 8px; background: var(--color-surface); color: var(--color-text);
  font-size: 0.82rem; font-weight: 600; text-align: center; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.mp-day-tab:hover { background: var(--color-surface-2); }
.mp-day-tab--active {
  background: var(--color-accent); color: var(--color-accent-text);
  border-color: var(--color-accent);
}

.mp-day-summary {
  font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 10px;
  padding: 8px 10px; background: var(--color-surface); border-radius: 8px;
}

.mp-meal-card {
  padding: 12px; border: 1px solid var(--color-border); border-radius: var(--radius);
  background: var(--color-surface-2); margin-bottom: 8px;
}
.mp-meal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.mp-meal-slot {
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--color-text-muted);
}
.mp-swap-btn {
  background: none; border: 1px solid var(--color-border); border-radius: 6px;
  padding: 2px 8px; cursor: pointer; font-size: 0.9rem; color: var(--color-text-muted);
  transition: background 0.15s, color 0.15s;
}
.mp-swap-btn:hover { background: var(--color-surface); color: var(--color-text); }
.mp-meal-name { font-weight: 600; font-size: 0.95rem; margin-bottom: 4px; }
.mp-meal-macros { font-size: 0.82rem; color: var(--color-text-muted); margin-bottom: 4px; }
.mp-meal-ingredients { font-size: 0.78rem; color: var(--color-text-muted); line-height: 1.4; }

.mp-day-tab--grocery { font-size: 1.1rem; padding: 6px 10px; }

.mp-load-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.mp-load-tag--rest           { background: var(--color-bg); color: var(--color-text-muted); }
.mp-load-tag--light          { background: #e8f5e9; color: #2e7d32; }
.mp-load-tag--strength       { background: #e3f2fd; color: #1565c0; }
.mp-load-tag--endurance-easy { background: #fff3e0; color: #e65100; }
.mp-load-tag--endurance-hard { background: #fce4ec; color: #c62828; }

.mp-grocery-list { margin-bottom: 12px; }
.mp-grocery-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.mp-grocery-heading {
  font-size: 0.95rem; font-weight: 700; margin: 0;
}
.mp-grocery-days-select {
  padding: 4px 8px; border-radius: 8px; font-size: 0.82rem;
  border: 1px solid var(--color-border);
  background: var(--color-input-bg, var(--color-bg));
  color: var(--color-text);
}
.mp-grocery-cat { margin-bottom: 10px; }
.mp-grocery-cat-name {
  font-size: 0.82rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--color-text-muted); margin-bottom: 4px;
}
.mp-grocery-item {
  display: flex; align-items: center; gap: 8px; padding: 5px 0;
  font-size: 0.88rem; cursor: pointer;
}
.mp-grocery-item input[type="checkbox"] { flex-shrink: 0; }
.mp-grocery-item input:checked + span { text-decoration: line-through; color: var(--color-text-muted); }

.mp-saved-section { margin-top: 12px; }
.mp-saved-toggle { width: 100%; margin-bottom: 8px; }
.mp-saved-list { display: flex; flex-direction: column; gap: 6px; }
.mp-saved-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 8px;
  background: var(--color-surface);
}
.mp-saved-info { display: flex; flex-direction: column; gap: 2px; }
.mp-saved-name { font-weight: 600; font-size: 0.9rem; }
.mp-saved-date { font-size: 0.78rem; color: var(--color-text-muted); }
.mp-saved-actions { display: flex; gap: 6px; }
.mp-delete-btn { color: var(--color-danger) !important; border-color: var(--color-danger) !important; }
.mp-delete-btn:hover { background: var(--color-danger) !important; color: #fff !important; }

/* ===== EXERCISE LIBRARY & STRETCHING ===== */

.ex-name-link {
  color: var(--color-accent); cursor: pointer; text-decoration: none;
  border-bottom: 1px dotted var(--color-accent);
}
.ex-name-link:hover { opacity: 0.8; }

.ex-info-section { margin-bottom: 14px; }
.ex-info-label { font-weight: 700; font-size: 0.8rem; color: var(--color-text-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em; }
.ex-info-muscles { display: flex; flex-wrap: wrap; gap: 6px; }
.ex-muscle-tag {
  display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: 0.78rem;
  font-weight: 600; text-transform: capitalize;
  background: var(--color-accent-glow); color: var(--color-accent); border: 1px solid var(--color-accent);
}
.ex-info-cues { font-size: 0.88rem; line-height: 1.5; color: var(--color-text-muted); margin: 0; }

/* Stretch suggestion card */
.stretch-suggestion {
  margin-top: 12px; border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden;
  background: var(--color-surface, #fff);
}
.stretch-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; background: var(--color-surface-alt, var(--color-surface-2));
}
.stretch-dismiss-btn {
  background: transparent; border: none; font-size: 1.1rem; cursor: pointer;
  color: var(--color-text-muted); padding: 2px 6px; margin-left: 8px;
}
.stretch-dismiss-btn:hover { color: var(--color-text); }
.stretch-title { font-weight: 700; font-size: 0.9rem; }
.stretch-time { font-size: 0.78rem; color: var(--color-text-muted); }
.stretch-list { padding: 4px 0; }
.stretch-item { padding: 8px 14px; border-top: 1px solid var(--color-border); }
.stretch-item:first-child { border-top: none; }
.stretch-item-name { font-weight: 700; font-size: 0.85rem; }
.stretch-item-detail { font-size: 0.78rem; color: var(--color-text-muted); margin-top: 2px; }

/* ===== LIFE TRAINING PREVIEW ===== */

.life-week-preview { margin-top: 12px; border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden; }
.life-week-header { padding: 10px 12px; background: var(--color-surface-alt, var(--color-surface-2)); font-weight: 700; font-size: 0.85rem; }
.life-session-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border-top: 1px solid var(--color-border); font-size: 0.82rem;
}
.life-session-day { font-weight: 700; min-width: 32px; }
.life-session-title { flex: 1; }
.life-session-type {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  padding: 2px 8px; border-radius: 6px;
}
.life-session-type--easy { color: #22c55e; background: rgba(34,197,94,0.1); }
.life-session-type--recovery { color: #22c55e; background: rgba(34,197,94,0.1); }
.life-session-type--tempo, .life-session-type--threshold { color: #f59e0b; background: rgba(245,158,11,0.1); }
.life-session-type--interval, .life-session-type--speed { color: #ef4444; background: rgba(239,68,68,0.1); }
.life-session-type--long { color: #6366f1; background: rgba(99,102,241,0.1); }
.life-session-dur { color: var(--color-text-muted); font-size: 0.78rem; min-width: 50px; text-align: right; }

/* ===== HYDRATION ===== */

.hydration-tracker { display: flex; align-items: center; gap: 20px; }
.hydration-visual { flex-shrink: 0; }
.hydration-info { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.hydration-count { font-size: 1.2rem; font-weight: 700; }
.hydration-oz { font-size: 0.85rem; color: var(--color-text-muted); }
.hydration-btn-row { display: flex; gap: 8px; align-items: center; }
.hydration-log-btn { padding: 10px 16px; font-size: 0.9rem; }
.hydration-undo-btn { padding: 8px 12px; font-size: 0.8rem; }
.hydration-tip {
  background: var(--color-surface-alt, var(--color-surface-2));
  border-radius: 8px; padding: 10px 12px;
  border-left: 3px solid var(--color-accent);
}

.hydration-context {
  font-size: 0.78rem; color: var(--color-text-muted);
  margin: 2px 0 4px; line-height: 1.3;
}

.hydration-beverage-picker {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px;
}
.hydration-bev-btn {
  flex: 1 1 auto; min-width: 70px; padding: 8px 6px; font-size: 0.78rem;
  border: 1px solid var(--color-border); border-radius: 8px;
  background: var(--color-surface); color: var(--color-text);
  cursor: pointer; text-align: center; white-space: nowrap;
  transition: border-color 0.15s, background 0.15s;
}
.hydration-bev-btn:hover {
  border-color: var(--color-accent);
}
.hydration-bev-btn.active {
  border-color: var(--color-accent);
  background: var(--color-accent-glow, rgba(99,102,241,0.15));
  font-weight: 600;
}

.hydration-timing-tip {
  font-size: 0.8rem; color: var(--color-text-muted);
  margin-top: 8px; line-height: 1.3;
}

.hydration-burst-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: hydration-burst 0.7s ease-out forwards;
}
@keyframes hydration-burst {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--x), var(--y)) scale(0); opacity: 0; }
}

/* ===== LEVELING & ACHIEVEMENTS ===== */

.level-badge {
  display: flex; align-items: center; gap: 6px;
  background: var(--color-accent-glow); border: 1px solid var(--color-accent);
  border-radius: 20px; padding: 6px 14px;
}

.level-badge-icon { font-size: 0.9rem; }
.level-badge-text { font-weight: 700; font-size: 0.85rem; color: var(--color-accent); }

.level-progress-label {
  display: flex; justify-content: space-between; font-size: 0.8rem;
  color: var(--color-text-muted); margin-bottom: 6px;
}

.achievements-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}

.achievement-badge {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 6px; border: 1px solid var(--color-border); border-radius: 10px;
  background: var(--color-surface-alt, var(--color-surface-2)); text-align: center;
  transition: border-color 0.2s, opacity 0.2s;
}

.achievement-badge.locked { opacity: 0.4; }

.achievement-badge.earned {
  border-color: var(--color-accent);
  background: var(--color-accent-glow);
  opacity: 1;
}

.achievement-icon { font-size: 1.2rem; }
.achievement-name { font-weight: 700; font-size: 0.75rem; }
.achievement-desc { font-size: 0.65rem; color: var(--color-text-muted); line-height: 1.2; }

.level-up-celebration {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 32px 24px;
}

.level-up-stars { font-size: 2.5rem; margin-bottom: 12px; }

.level-up-title {
  font-size: 1.8rem; font-weight: 800; margin: 0 0 8px;
  background: linear-gradient(135deg, var(--color-accent), var(--color-cyan, #22d3ee));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.level-up-text { font-size: 1rem; margin: 0 0 4px; }
.level-up-sub { font-size: 0.85rem; color: var(--color-text-muted); margin: 0; }

/* ===== BUILD A PLAN — SUB-TABS ===== */

.build-plan-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 16px;
}
.build-plan-tab {
  padding: 12px 8px;
  font-size: 0.85rem;
  font-weight: 600;
  border: none;
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.build-plan-tab + .build-plan-tab {
  border-left: 1px solid var(--color-border);
}
.build-plan-tab--active {
  background: var(--color-text);
  color: var(--color-bg);
}
.build-plan-tab:hover:not(.build-plan-tab--active) {
  background: var(--color-surface);
}

/* ===== CUSTOM PLAN BUILDER ===== */

.cp-mode-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 12px;
}
.cp-mode-btn {
  padding: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  border: none;
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.cp-mode-btn:first-child { border-right: 1px solid var(--color-border); }
.cp-mode-btn--active {
  background: var(--color-text);
  color: var(--color-bg);
}
.cp-mode-btn:hover:not(.cp-mode-btn--active) {
  background: var(--color-surface);
}
.custom-plan-week { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }

.custom-plan-day { border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden; }

.custom-day-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; background: var(--color-surface-alt, var(--color-surface-2));
  flex-wrap: wrap; gap: 6px;
}

.custom-day-label { font-weight: 700; font-size: 0.9rem; min-width: 80px; }

.custom-day-actions { display: flex; gap: 4px; flex-wrap: wrap; }

.btn-sm { font-size: 0.72rem; padding: 5px 10px; border-radius: 8px; }

.custom-day-content { padding: 10px 12px; min-height: 40px; }

/* Day entry cards inside builder */
.cp-day-entry {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 8px;
}

.cp-day-rest { color: var(--color-text-muted); font-style: italic; }

.cp-day-entry-info { display: flex; flex-direction: column; gap: 2px; }

.cp-day-entry-type {
  font-size: 0.7rem; font-weight: 700; text-transform: capitalize;
  color: var(--color-accent);
}

.cp-day-entry-title { font-size: 0.85rem; font-weight: 600; }
.cp-day-entry-detail { font-size: 0.75rem; color: var(--color-text-muted); }

.cp-remove-btn {
  background: none; border: none; color: var(--color-text-muted); font-size: 1.2rem;
  cursor: pointer; padding: 2px 6px; border-radius: 4px; transition: color 0.15s;
}
.cp-remove-btn:hover { color: var(--color-danger, #ef4444); }

/* AI type picker and saved picker buttons */
.cp-type-btn, .cp-saved-item {
  display: flex; align-items: center; justify-content: center; width: 100%;
  padding: 12px; border: 1px solid var(--color-border); border-radius: 10px;
  background: var(--color-surface); cursor: pointer; font-size: 0.9rem;
  font-weight: 600; color: var(--color-text); transition: border-color 0.15s;
  text-align: left;
}
.cp-type-btn:hover, .cp-saved-item:hover { border-color: var(--color-accent); }

.cp-saved-item {
  justify-content: space-between;
}
.cp-saved-name { font-weight: 700; }
.cp-saved-type { font-size: 0.75rem; color: var(--color-text-muted); text-transform: capitalize; }

.cp-detail-label { font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-muted); margin-bottom: 10px; }
.cp-muscle-grid { display: flex; flex-wrap: wrap; gap: 8px; }

/* ===== NUTRITION V2 — Dashboard, Photo Log, Suggestions, Grocery ===== */

.nutrition-dashboard { display: flex; flex-direction: column; gap: 16px; }

.nutri-budget-bar {}
.nutri-budget-label { font-size: 0.95rem; font-weight: 600; margin-bottom: 6px; text-align: center; }
.nutri-progress-track { height: 12px; background: var(--color-surface-alt, var(--color-surface-2)); border-radius: 6px; overflow: hidden; }
.nutri-progress-fill { height: 100%; background: linear-gradient(90deg, var(--color-accent), var(--color-cyan, #22d3ee)); border-radius: 6px; transition: width 0.3s; }

.nutri-macro-rings { display: flex; justify-content: space-around; text-align: center; }
.nutri-ring-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.nutri-ring-label { font-size: 0.75rem; color: var(--color-text-muted); }
.nutri-ring-value { font-weight: 700; font-size: 0.85rem; }

.nutri-training-context { background: var(--color-surface-alt, var(--color-surface-2)); border-radius: 8px; padding: 12px; border-left: 3px solid var(--color-accent); }

/* Quick log buttons */
.nutri-log-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.nutri-log-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 16px 8px; border: 1px solid var(--color-border); border-radius: 12px;
  background: var(--color-surface); cursor: pointer; transition: all 0.15s;
  color: var(--color-text); font-size: 0.85rem; font-weight: 600;
}
.nutri-log-btn:hover { border-color: var(--color-accent); background: var(--color-surface-alt, var(--color-surface-2)); }
.nutri-log-icon { display: flex; align-items: center; justify-content: center; }
.nutri-log-icon svg { width: 24px; height: 24px; }
.nutri-log-desc { font-size: 0.7rem; color: var(--color-text-muted); font-weight: 400; }

/* Photo detected foods */
.photo-food-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0; border-bottom: 1px solid var(--color-border); font-size: 0.85rem;
}
.photo-food-item:last-child { border-bottom: none; }
.photo-food-cals { color: var(--color-text-muted); font-size: 0.8rem; }

/* Meal suggestion cards */
.meal-suggestion-card {
  background: var(--color-surface-alt, var(--color-surface-2)); border: 1px solid var(--color-border);
  border-radius: 12px; padding: 14px; margin-bottom: 10px;
}
.meal-suggestion-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;
}
.meal-suggestion-type {
  text-transform: capitalize; font-size: 0.72rem; font-weight: 700;
  color: var(--color-accent); background: var(--color-accent-glow); padding: 2px 8px; border-radius: 6px;
}
.meal-suggestion-time { font-size: 0.72rem; color: var(--color-text-muted); }
.meal-suggestion-name { font-weight: 700; font-size: 0.95rem; margin-bottom: 4px; }
.meal-suggestion-ingredients { font-size: 0.8rem; color: var(--color-text-muted); margin-bottom: 8px; line-height: 1.4; }
.meal-suggestion-macros { font-size: 0.8rem; color: var(--color-text-muted); margin-bottom: 10px; }

/* Quick add meal items */
.quick-add-meal-item {
  display: flex; flex-direction: column; gap: 2px; width: 100%;
  padding: 12px; margin-bottom: 6px; border: 1px solid var(--color-border);
  border-radius: 10px; background: var(--color-surface); cursor: pointer;
  transition: border-color 0.15s; text-align: left; color: var(--color-text);
}
.quick-add-meal-item:hover { border-color: var(--color-accent); }
.quick-add-meal-name { font-weight: 700; font-size: 0.9rem; }
.quick-add-meal-macros { font-size: 0.78rem; color: var(--color-text-muted); }

/* Grocery list */
.grocery-category { margin-bottom: 14px; }
.grocery-category-name { font-weight: 700; font-size: 0.9rem; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--color-border); }
.grocery-items { display: flex; flex-direction: column; gap: 4px; }
.grocery-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 0.85rem; cursor: pointer;
}
.grocery-item input[type="checkbox"] { accent-color: var(--color-accent); }
.grocery-item input:checked + span { text-decoration: line-through; color: var(--color-text-muted); }

/* ===== DAY PICKER ===== */

.day-picker {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin-top: 6px;
}

.day-picker input[type="checkbox"] {
  display: none;
}

.day-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.day-picker input[type="checkbox"]:checked + .day-chip {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.day-chip:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.day-picker input[type="checkbox"]:checked + .day-chip:hover {
  opacity: 0.85;
  color: #fff;
}


/* ===== EDIT BUTTON (race cards) ===== */

.edit-btn {
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  margin-right: 4px;
}

.edit-btn:hover {
  background: rgba(129, 140, 248, 0.12);
  border-color: var(--color-accent);
  color: var(--color-accent);
}


/* ===== STATS TAB ===== */

/* Overview hero row */
.stats-overview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

@media (max-width: 600px) {
  .stats-overview { grid-template-columns: repeat(2, 1fr); }
}

.stat-hero {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 18px 14px;
  text-align: center;
}
.stat-hero--link { cursor: pointer; transition: border-color 0.15s; }
.stat-hero--link:hover { border-color: var(--color-accent); }

#stats-view-stats { display: flex; flex-direction: column; gap: 16px; }
#stats-content { display: flex; flex-direction: column; gap: 12px; }

/* Totals section */
.totals-toggle { display: flex; gap: 4px; }
.totals-toggle-btn {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.totals-toggle-btn.is-active {
  background: var(--color-accent);
  color: var(--color-accent-text, #fff);
  border-color: var(--color-accent);
}
.totals-grid { display: flex; flex-direction: column; gap: 2px; }
.totals-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--color-border);
}
.totals-row:last-child { border-bottom: none; }
.totals-icon { width: 20px; display: flex; justify-content: center; color: var(--color-text-muted); }
.totals-icon svg { width: 16px; height: 16px; }
.totals-label { flex: 1; font-size: 0.85rem; color: var(--color-text); }
.totals-value { font-size: 0.9rem; font-weight: 700; color: var(--color-text); text-align: right; min-width: 70px; }
.totals-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 4px 0;
  margin-top: 4px;
  border-top: 2px solid var(--color-border);
}
.totals-total-label { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); }
.totals-total-value { font-size: 1.1rem; font-weight: 800; color: var(--color-text); }

.stat-hero-value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-accent);
  line-height: 1.1;
}

.stat-hero-label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Workout breakdown bars */
.breakdown-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.breakdown-label {
  min-width: 140px;
  font-size: 0.875rem;
  font-weight: 600;
}

.breakdown-bar-wrap {
  flex: 1;
  height: 10px;
  background: var(--color-surface-2);
  border-radius: 999px;
  overflow: hidden;
}

.breakdown-bar {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
}

.breakdown-count {
  min-width: 48px;
  text-align: right;
  font-size: 0.875rem;
  font-weight: 700;
}

/* ── Plan Consistency ──────────────────────────────────────────────────── */
.consistency-overall {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 10px;
  margin-bottom: 16px;
}
.consistency-overall-pct {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
}
.consistency-overall-label {
  font-weight: 700;
  font-size: 0.95rem;
}
.consistency-overall-desc {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}
.consistency-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}
.consistency-icon { font-size: 1rem; flex-shrink: 0; width: 20px; text-align: center; }
.consistency-label { font-size: 0.85rem; font-weight: 600; min-width: 70px; }
.consistency-bar-wrap {
  flex: 1;
  height: 8px;
  background: var(--color-surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.consistency-bar {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
}
.consistency-pct { font-size: 0.85rem; font-weight: 700; min-width: 36px; text-align: right; }
.consistency-count { font-size: 0.75rem; color: var(--color-text-muted); min-width: 42px; text-align: right; }

.breakdown-pct {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

/* Activity heatmap */
.heatmap-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.heatmap-wrap {
  display: flex;
  gap: 6px;
  min-width: max-content;
}

.heatmap-dlabels {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 22px;
}

.heatmap-dlabel {
  font-size: 0.68rem;
  color: var(--color-text-muted);
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.heatmap-right {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.heatmap-mrow {
  display: flex;
  gap: 3px;
}

.heatmap-mlabel {
  width: 14px;
  font-size: 0.68rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: visible;
}

.heatmap-grid {
  display: grid;
  grid-template-rows: repeat(7, 14px);
  grid-auto-flow: column;
  gap: 3px;
}

.heatmap-cell {
  width: 14px;
  height: 14px;
  border-radius: 3px;
}

.heat-0 { background: var(--color-surface-2); }
.heat-1 { background: var(--color-heat-1, rgba(214, 48, 49, 0.2)); }
.heat-2 { background: var(--color-heat-2, rgba(214, 48, 49, 0.5)); }
.heat-3 { background: var(--color-accent); }
.heat-today { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.heat-empty { visibility: hidden; }

.heatmap-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  justify-content: flex-end;
}

.heatmap-legend-text {
  font-size: 0.72rem;
  color: var(--color-text-muted);
}

.heatmap-streaks {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.heatmap-streak-pill {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}
.heatmap-streak-best {
  color: var(--color-text-muted);
}

/* Weekly bar chart */
.weekly-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  position: relative;
}

.weekly-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  gap: 4px;
}

.weekly-count {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  font-weight: 700;
  min-height: 16px;
}

.weekly-track {
  width: 100%;
  height: 72px;
  background: var(--color-surface-2);
  border-radius: 4px 4px 0 0;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.weekly-fill {
  width: 100%;
  background: rgba(129, 140, 248, 0.5);
  border-radius: 4px 4px 0 0;
  transition: height 0.4s ease;
}

.weekly-fill--now {
  background: var(--color-accent);
}

.weekly-label {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  text-align: center;
}

/* Streaks */
.streak-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

@media (max-width: 600px) {
  .streak-grid { grid-template-columns: repeat(2, 1fr); }
}

.streak-box {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px 12px;
  text-align: center;
}

.streak-val {
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-amber);
  line-height: 1.1;
}

.streak-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-text);
  margin-top: 6px;
}

.streak-sub {
  font-size: 0.7rem;
  color: var(--color-text-muted);
}

/* Day-of-week bar chart */
.section-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 16px 0 10px;
}

.dow-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.dow-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  gap: 3px;
}

.dow-count {
  font-size: 0.68rem;
  color: var(--color-text-muted);
  font-weight: 700;
  min-height: 14px;
}

.dow-track {
  width: 100%;
  height: 46px;
  background: var(--color-surface-2);
  border-radius: 3px 3px 0 0;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.dow-fill {
  width: 100%;
  background: var(--color-teal);
  border-radius: 3px 3px 0 0;
  transition: height 0.4s ease;
}

.dow-label {
  font-size: 0.68rem;
  color: var(--color-text-muted);
}

/* Personal Records */
.pr-entry-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.pr-entry-row select,
.pr-entry-row input {
  flex: 1;
  min-width: 100px;
}

.pr-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
}

.pr-row:last-child { border-bottom: none; }

.pr-distance {
  font-weight: 700;
  min-width: 130px;
  font-size: 0.9rem;
}

.pr-time {
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-accent);
  flex: 1;
}

.pr-date {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  min-width: 90px;
  text-align: right;
}

/* Next Race */
.next-race-hero {
  background: linear-gradient(135deg, rgba(129,140,248,0.12), rgba(34,211,238,0.08));
  border: 1px solid rgba(129,140,248,0.25);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
}

.next-race-name {
  font-size: 1.15rem;
  font-weight: 800;
}

.next-race-meta {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin-top: 4px;
}

.next-race-countdown {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-accent);
  margin-top: 10px;
}

.upcoming-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.875rem;
}

.upcoming-row:last-child { border-bottom: none; }

.upcoming-days {
  font-weight: 700;
  color: var(--color-text-muted);
}

/* Nutrition averages (reuse existing .macro-summary/.macro-box if defined; define here as fallback) */
.macro-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

@media (max-width: 520px) {
  .macro-summary { grid-template-columns: repeat(2, 1fr); }
}

.macro-box {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 14px 10px;
  text-align: center;
}

.macro-value {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--color-text);
}

.macro-label {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
}

/* ===== GYM / STRENGTH TOGGLE ===== */

.gym-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

.gym-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.gym-toggle-track {
  display: block;
  width: 40px;
  height: 22px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 11px;
  position: relative;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.gym-toggle-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-text-muted);
  transition: transform 0.2s ease, background 0.2s ease;
}

.gym-toggle input:checked + .gym-toggle-track {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.gym-toggle input:checked + .gym-toggle-track::after {
  transform: translateX(18px);
  background: #fff;
}

#section-generate-plan.gym-disabled {
  opacity: 1;
  pointer-events: auto;
  user-select: auto;
}
#section-generate-plan.gym-disabled .gym-toggle {
  opacity: 1;
  pointer-events: auto;
}

/* ===== RACE FORM (MULTI-STEP) ===== */

.rf-step {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.rf-back-btn {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0;
  margin-bottom: 12px;
  text-align: left;
  transition: color 0.15s ease;
}

.rf-back-btn:hover {
  color: var(--color-text);
}

.rf-val-msg {
  font-size: 0.82rem;
  color: var(--color-danger);
  min-height: 1.2em;
  margin-top: 8px;
  margin-bottom: 0;
}

@media (max-width: 520px) {
  header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  nav { flex-wrap: wrap; }

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

  .macro-summary {
    grid-template-columns: repeat(2, 1fr);
  }

  .calendar-cell {
    min-height: 52px;
    padding: 4px 3px;
  }

  .cell-day-num { font-size: 0.72rem; }

  .dot { width: 5px; height: 5px; }

  .form-grid { grid-template-columns: 1fr; }

  .meal-plan-row { flex-direction: column; gap: 2px; }

  .meal-plan-slot { min-width: auto; }

  .session-card-header { flex-wrap: wrap; }

  /* Week view on mobile: scroll horizontally */
  .calendar-grid--week {
    grid-template-columns: repeat(7, minmax(80px, 1fr));
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .week-cell { min-height: 100px; padding: 8px 6px; }

  .week-cell-date { font-size: 0.9rem; }

  /* Calendar controls: tighter on mobile */
  .cal-controls { gap: 6px; }
  .cal-nav-btn { padding: 7px 12px; }
  .cal-this-week-btn { padding: 6px 10px; }
  .cal-zoom-btn { padding: 6px 10px; }
}


/* =============================================================================
   STAR BUTTON
   ============================================================================= */

/* ── PR Estimator info box ── */
.pre-info-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  border-radius: 8px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  font-size: 0.82rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}
.pre-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-accent-text);
  font-size: 0.72rem;
  font-weight: 700;
}

.star-btn {
  background: transparent;
  border: none;
  font-size: 1.1rem;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
  transition: color 0.15s, transform 0.15s;
  flex-shrink: 0;
}

.star-btn:hover { color: #f59e0b; transform: scale(1.15); }
.star-btn.is-starred { color: #f59e0b; }

/* Workout name inline in history */
.history-workout-name {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--color-text);
  margin-left: 6px;
}


/* =============================================================================
   STATS TAB VIEW SWITCHER
   ============================================================================= */

.stats-view-seg-wrap {
  display: flex;
  justify-content: center;
  padding: 4px 0 2px;
}

.stats-view-seg {
  display: flex;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}

.stats-view-btn {
  padding: 7px 22px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}

.stats-view-btn.is-active {
  background: var(--color-accent);
  color: var(--color-accent-text);
  box-shadow: 0 1px 8px var(--color-accent-glow);
}

.stats-view-btn:not(.is-active):hover {
  color: var(--color-text);
}


/* =============================================================================
   SAVED WORKOUTS SEARCH
   ============================================================================= */

.sw-counter {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 2px 8px;
  vertical-align: middle;
  margin-left: 4px;
}

.import-week-group { margin-top: 12px; }
.import-week-group h4 { margin: 0 0 4px; font-size: 0.85rem; color: var(--color-text-muted); }
.import-detail-cell { font-size: 0.8rem; color: var(--color-text-muted); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#import-plan-text {
  font-family: inherit;
  font-size: 0.9rem;
  padding: 10px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color 0.15s;
}
#import-plan-text:focus { outline: none; border-color: var(--color-accent); }

.qe-hiit-summary {
  background: var(--color-accent-glow);
  border: 1px solid var(--color-accent);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 0.85rem;
  color: var(--color-text);
}

.sw-search-wrap {
  position: relative;
}

.sw-search-input {
  width: 100%;
  padding: 10px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.9rem;
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.sw-search-input:focus {
  outline: none;
  border-color: var(--color-accent);
}


/* =============================================================================
   SUPERSET DRAG-AND-DROP
   ============================================================================= */

.qe-exercise-item[draggable="true"] { cursor: grab; }
.qe-exercise-item[draggable="true"]:active { cursor: grabbing; }

.qe-exercise-item.qe-drag-over {
  border: 1.5px dashed var(--color-accent);
  background: var(--color-accent-glow);
}

.qe-superset-group {
  border: 1.5px solid var(--color-accent);
  border-radius: 10px;
  margin-bottom: 6px;
  overflow: hidden;
}

.qe-superset-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: var(--color-accent-glow);
  border-bottom: 1px solid var(--color-accent);
}

.qe-ss-sets-input {
  width: 44px;
  text-align: center;
  background: transparent;
  border: 1px solid var(--color-accent);
  border-radius: 4px;
  color: var(--color-accent);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 1px 4px;
  margin: 0 4px;
  -moz-appearance: textfield;
}
.qe-ss-sets-input::-webkit-inner-spin-button,
.qe-ss-sets-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.qe-ss-sets-wrap {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  margin-right: 8px;
  text-transform: none;
  font-weight: 500;
  font-size: 0.7rem;
}

.qe-unsuperset-btn {
  background: transparent;
  border: 1px solid var(--color-accent);
  border-radius: 4px;
  color: var(--color-accent);
  font-size: 0.7rem;
  padding: 1px 6px;
  cursor: pointer;
  text-transform: none;
  font-weight: 500;
}

.qe-unsuperset-btn:hover {
  background: var(--color-accent);
  color: var(--color-accent-text);
}

.qe-superset-group .qe-exercise-item {
  border-radius: 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0;
}

.qe-superset-group .qe-exercise-item:last-child { border-bottom: none; }

.qe-manual-ss-btn {
  padding: 2px 6px;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 4px;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  align-self: center;
  flex-shrink: 0;
}
.qe-manual-ss-btn:hover { background: var(--color-accent); color: var(--color-accent-text); }
.qe-ss-source { outline: 2px solid var(--color-accent); outline-offset: -2px; }


/* =============================================================================
   AUTH SCREEN
   ============================================================================= */

.auth-screen {
  position: fixed;
  inset: 0;
  background: var(--color-bg, #0f0f0f);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
}

.auth-card {
  background: var(--color-surface, #1a1a1a);
  border: 1px solid var(--color-border, #2a2a2a);
  border-radius: 16px;
  padding: 36px 32px 32px;
  width: 100%;
  max-width: 400px;
}

.auth-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
  justify-content: center;
}

.auth-logo .logo-mark {
  font-size: 1.6rem;
}

.auth-logo .logo-text {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2rem;
  letter-spacing: 0.05em;
  color: var(--color-text, #f0f0f0);
}

.auth-tabs {
  display: flex;
  gap: 0;
  border: 1px solid var(--color-border, #2a2a2a);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 24px;
}

.auth-tab {
  flex: 1;
  background: transparent;
  border: none;
  padding: 10px 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text-muted, #888);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.auth-tab.active {
  background: var(--color-accent);
  color: var(--color-accent-text);
}

.auth-submit-btn {
  width: 100%;
  margin-top: 8px;
}

.auth-terms-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 12px 0 4px;
  cursor: pointer;
}
.auth-terms-label input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
}
.auth-terms-label a {
  color: var(--color-primary, #818cf8);
  text-decoration: underline;
}

.auth-msg {
  margin-top: 10px;
  font-size: 0.85rem;
  min-height: 1.2em;
  text-align: center;
}

.auth-forgot-link {
  margin-top: 10px;
  text-align: center;
  font-size: 0.85rem;
}

.auth-forgot-link a {
  color: var(--color-accent, #3498db);
  text-decoration: none;
}

.auth-forgot-link a:hover {
  text-decoration: underline;
}

.auth-reset-info {
  font-size: 0.9rem;
  color: var(--color-text-muted, #aaa);
  text-align: center;
  margin-bottom: 12px;
}

/* Home icon tab in nav */
.tab-btn--home {
  font-size: 1.1rem;
  padding-left: 10px;
  padding-right: 10px;
}

/* Logout button in header nav */
.btn-logout {
  background: transparent;
  border: 1px solid var(--color-border, #2a2a2a);
  color: var(--color-text-muted, #888);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.btn-logout:hover {
  border-color: var(--color-danger);
  color: var(--color-danger);
}


/* =============================================================================
   THEME PICKER
   ============================================================================= */

.theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 4px;
}

.theme-card {
  border: 2px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s;
  position: relative;
}

.theme-card:hover {
  transform: translateY(-2px);
}

.theme-card.is-active {
  border-color: var(--color-accent);
}

.theme-card__preview {
  height: 72px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
}

.theme-card__bar {
  border-radius: 3px;
  height: 10px;
}

.theme-card__bar--accent { width: 60%; }
.theme-card__bar--muted  { width: 40%; opacity: 0.4; }
.theme-card__bar--full   { width: 90%; opacity: 0.25; }

.theme-card__label {
  padding: 8px 10px;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}

.theme-card__name {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.02em;
}

.theme-card__sub {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-top: 1px;
}

.theme-card__check {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-accent-text);
  font-size: 10px;
  display: none;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.theme-card.is-active .theme-card__check {
  display: flex;
}

@media (max-width: 480px) {
  .theme-grid { grid-template-columns: 1fr; }
}

/* ── Edit workout button ─────────────────────────────────────────────────────── */

.edit-workout-btn {
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s;
}

.edit-workout-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.history-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Swap picker ─────────────────────────────────────────────────────────────── */

.swap-picker {
  margin-top: 8px;
  padding: 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.swap-picker-label {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

.swap-option {
  display: block;
  width: 100%;
  padding: 8px 10px;
  margin-bottom: 6px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  font-size: 0.875rem;
  transition: border-color 0.15s, background 0.15s;
}

.swap-option:hover {
  border-color: var(--color-accent);
  background: var(--color-surface);
}

.swap-cancel {
  padding: 6px 0;
  border: none;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 0.8rem;
}

.swap-cancel:hover { color: var(--color-text); }

/* ── Cardio interval display ─────────────────────────────────────────────────── */

.qe-cardio-interval {
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
}

.qe-cardio-interval:last-child { border-bottom: none; }

.qe-cardio-interval-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
}

.qe-cardio-phase {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-text);
}

.qe-brick-sport {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 4px;
  margin-right: 4px;
  vertical-align: middle;
}
.qe-brick-bike { background: var(--color-info); color: #fff; }
.qe-brick-run  { background: var(--color-accent); color: #fff; }

.qe-cardio-meta {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.qe-cardio-details {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  line-height: 1.45;
}

.zone-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #fff;
}
.zone-badge.rw { background: rgba(156,163,175,0.4); color: #374151; }
.zone-badge.z1 { background: rgba(34,211,238,0.45); color: #0e7490; }
.zone-badge.z2 { background: #22d3ee; color: #0e7490; }
.zone-badge.z3 { background: #f59e0b; color: #78350f; }
.zone-badge.z4 { background: #f87171; color: #7f1d1d; }
.zone-badge.z5 { background: #ef4444; color: #fff; }
.zone-badge.z6 { background: #b91c1c; color: #fff; }

/* ── Move / Duplicate session panel ─────────────────────────────────────────── */
.session-move-panel {
  display: none;
  margin-top: 12px;
  padding: 12px;
  background: var(--color-surface);
  border-radius: 8px;
  border: 1px solid var(--color-border);
}
.session-move-panel.is-open { display: block; }
.session-move-panel label { font-size: 0.8rem; color: var(--color-text-muted); display: block; margin-bottom: 4px; }
.session-move-panel input[type="date"] { width: 100%; margin-bottom: 10px; }
.session-move-actions { display: flex; gap: 8px; }
.session-move-actions button { flex: 1; }
.btn-move-session { background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); padding: 3px 10px; border-radius: 6px; font-size: 0.78rem; cursor: pointer; }
.btn-move-session:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* ── Saved workout assign panel ───────────────────────────────────────────────── */
.sw-assign-panel {
  padding: 12px;
  margin-bottom: 10px;
  background: var(--color-surface);
  border-radius: 8px;
  border: 1px solid var(--color-border);
}
.sw-assign-panel label { font-size: 0.8rem; color: var(--color-text-muted); display: block; margin-bottom: 4px; }
.sw-assign-panel input[type="date"] { width: 100%; }
.sw-assign-msg { font-size: 0.8rem; margin-top: 6px; }

/* ── Cardio step-1 action buttons ────────────────────────────────────────────── */

.qe-cardio-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.qe-cardio-actions .btn-primary,
.qe-cardio-actions .btn-secondary {
  flex: 1;
}

/* ── Cardio manual row ───────────────────────────────────────────────────────── */

.qe-cardio-row {
  grid-template-columns: 1.5fr 1.2fr 1.4fr 2fr auto;
}

/* =====================================================================
   COMMUNITY TAB
   ===================================================================== */

.comm-filter-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.comm-filter-btn {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.comm-filter-btn:hover { background: var(--color-surface-2); }
.comm-filter-btn.active {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

.comm-group { margin-bottom: 8px; }
.comm-group-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 16px 0 8px;
  color: var(--color-text);
}

.comm-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  margin-bottom: 8px;
  overflow: hidden;
}

.comm-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  gap: 12px;
}
.comm-card-header:hover { background: var(--color-surface-2); }

.comm-card-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.comm-card-name { font-weight: 600; font-size: 0.95rem; }
.comm-card-meta { font-size: 0.78rem; color: var(--color-text-muted); }

.comm-diff {
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.diff-beg { color: #22c55e; }
.diff-int { color: #f59e0b; }
.diff-adv { color: #ef4444; }

.comm-card-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.comm-card.expanded .comm-card-detail {
  max-height: 600px;
}

.comm-ex-table { margin: 0 16px 14px; width: calc(100% - 32px); }

.comm-save-btn {
  font-size: 0.78rem;
  padding: 5px 14px;
  white-space: nowrap;
}
.comm-save-btn.comm-saved {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

.comm-del-btn {
  font-size: 0.72rem;
  padding: 4px 10px;
  color: #ef4444;
  border-color: #ef4444;
}
.comm-del-btn:hover { background: rgba(239,68,68,0.1); }

.comm-hide-btn {
  font-size: 0.85rem;
  padding: 3px 8px;
  color: var(--color-text-muted);
  border-color: var(--color-border);
  line-height: 1;
}
.comm-hide-btn:hover { color: #ef4444; border-color: #ef4444; }

.comm-admin-form {
  border: 1.5px solid var(--color-accent);
  margin-bottom: 16px;
}
.comm-admin-form label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-text-muted);
  display: block;
  margin-bottom: 3px;
}
.comm-admin-form select {
  width: 100%;
}

/* =====================================================================
   MOBILE POLISH (≤ 430px — phones)
   ===================================================================== */

@media (max-width: 430px) {

  main { padding: 16px 10px 80px; }

  /* ── Exercise / segment rows: stack on mobile ── */
  .exercise-row,
  .qe-manual-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    position: relative;
    padding-right: 36px;
  }
  .exercise-row .drag-handle,
  .qe-manual-row .drag-handle {
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
  }
  .exercise-row > div,
  .qe-manual-row > div {
    flex: 1 1 calc(50% - 6px);
    min-width: calc(50% - 6px);
  }
  /* Exercise name spans full width */
  .exercise-row > div:first-of-type,
  .qe-manual-row > div:first-of-type {
    flex: 1 1 100%;
    min-width: 100%;
    padding-left: 24px;
  }
  .exercise-row .ex-pyramid-btn,
  .qe-manual-row .ex-pyramid-btn {
    display: none;
  }
  .exercise-row .ex-pyramid-detail,
  .qe-manual-row .ex-pyramid-detail {
    flex: 1 1 100%;
  }
  .remove-exercise-btn {
    position: absolute;
    top: 8px;
    right: 6px;
    padding: 6px 10px;
    font-size: 1rem;
  }
  .cardio-row-header,
  .edit-row-header,
  .log-row-header { display: none; }
  .edit-exercise-row label,
  .exercise-row label { display: block; }
  .qe-cardio-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    position: relative;
    padding-right: 36px;
  }
  .qe-cardio-row label { display: block; }
  .qe-cardio-row > div {
    flex: 1 1 calc(50% - 6px);
    min-width: calc(50% - 6px);
  }
  .qe-cardio-row > div:first-of-type {
    flex: 1 1 100%;
  }
  .sw-segment-row,
  .sw-segment-row--brick {
    grid-template-columns: 1fr 1fr;
  }
  .sw-segment-row > div:first-child,
  .sw-segment-row--brick > .seg-discipline-wrap {
    grid-column: 1 / -1;
  }

  /* ── Touch targets: minimum 44px ── */
  .nav-circle { width: 42px; height: 42px; }
  .sv-close-btn,
  .qe-close-btn { width: 44px; height: 44px; font-size: 1.2rem; }
  .edit-workout-btn,
  .delete-btn { padding: 6px 10px; font-size: 0.78rem; }
  .btn-primary,
  .btn-secondary { padding: 10px 16px; font-size: 0.88rem; }

  /* ── Stats breakdown: reduce min-widths ── */
  .breakdown-label { min-width: 90px; font-size: 0.78rem; }
  .breakdown-count { min-width: 36px; font-size: 0.78rem; }

  /* ── Modals: tighter padding ── */
  .quick-entry-modal { padding: 16px 14px 14px; }
  .sw-modal { padding: 18px 14px; }
  .survey-modal { padding: 0; /* content areas handle their own padding */ }

  /* ── Calendar cells ── */
  .calendar-cell { min-height: 48px; padding: 3px 2px; }
  .cell-day-num { font-size: 0.7rem; }
  .dot { width: 4px; height: 4px; }

  /* ── Week view: narrower cells, still scrollable ── */
  .calendar-grid--week {
    grid-template-columns: repeat(7, minmax(58px, 1fr));
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .week-cell { min-height: 80px; padding: 6px 4px; }
  .week-cell-date { font-size: 0.82rem; }
  .week-cell-dow { font-size: 0.68rem; }

  /* ── Heatmap: smaller cells ── */
  .heatmap-cell { width: 11px; height: 11px; border-radius: 2px; }
  .heatmap-grid { gap: 2px; grid-template-rows: repeat(7, 11px); }

  /* ── Session cards ── */
  .session-card-header { gap: 8px; }
  .session-duration-badge { font-size: 0.72rem; padding: 3px 8px; }
  .session-name { font-size: 0.88rem; }
  .session-phase { font-size: 0.72rem; }

  /* ── Stats overview: 2×2 grid ── */
  .stats-overview { grid-template-columns: 1fr 1fr; }

  /* ── Streak pills: wrap tighter ── */
  .heatmap-streaks { gap: 6px; }
  .heatmap-streak-pill { font-size: 0.72rem; padding: 3px 10px; }

  /* ── Community cards ── */
  .comm-card-header { padding: 10px 12px; }
  .comm-card-name { font-size: 0.88rem; }
  .comm-ex-table { margin: 0 10px 12px; width: calc(100% - 20px); }

  /* ── Type grid in quick entry ── */
  .qe-type-grid { gap: 8px; }
  .qe-type-card { padding: 12px 8px; }

  /* ── Profile dropdown ── */
  .nav-dropdown { min-width: 150px; }

  /* ── Completion exercise rows ── */
  .completion-ex-row { flex-wrap: wrap; gap: 4px; }
  .qe-edit-sets, .qe-edit-reps { width: 48px; }

  /* ── Community filter pills ── */
  .comm-filter-btn { padding: 5px 10px; font-size: 0.75rem; }

  /* ── Form admin grid ── */
  .comm-admin-form .form-row[style*="grid-template-columns"] {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
  }

  /* ── Nutrition log options: 1-col on small screens ── */
  .nutri-log-options { grid-template-columns: 1fr; }

  /* interest grid already 2-col by default */

  /* ── Achievements grid: 1-col on small screens ── */
  .achievements-grid { grid-template-columns: 1fr; }

  /* ── Custom plan day actions: full width ── */
  .custom-day-header { flex-direction: column; align-items: flex-start; }
  .custom-day-actions { width: 100%; }

  /* ── Drag handle adjustments on small screens ── */
  .drag-handle { width: 24px; min-width: 24px; font-size: 16px; }

  /* ── Sticky save button for workout editor ── */
  .edit-workout-actions {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background: var(--color-surface);
    padding: 12px 0;
    border-top: 1px solid var(--color-border);
    margin-top: auto;
  }
}


/* ===== MOBILE UX GLOBAL FIXES ===== */

/* Prevent iOS zoom on input focus — ensure 16px minimum */
@media (max-width: 600px) {
  input[type="text"],
  input[type="number"],
  input[type="date"],
  input[type="email"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px;
  }

  /* Cards: prevent horizontal overflow */
  .card {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Nav bar: even distribution for touch targets */
  nav {
    justify-content: space-around;
    width: 100%;
    gap: 4px;
  }
  .nav-circle {
    min-width: 44px;
    min-height: 44px;
  }

  /* Modals: ensure scrollable on mobile */
  .quick-entry-modal,
  .sw-modal,
  .rating-modal {
    max-height: 88vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Survey modal handled separately — slides up as bottom sheet */

  /* Calendar day cells: uniform size, no text overflow */
  .calendar-cell {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Week cells: prevent text overflow */
  .week-cell {
    overflow: hidden;
  }
  .session-bubble {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  /* Tables: scrollable on narrow screens */
  .exercise-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Live tracker: full width on mobile */
  .live-tracker {
    max-width: 100vw;
  }
}

/* ===== WORKOUT RATING MODAL ===== */

.rating-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.2s ease;
  padding: 16px;
}
.rating-modal-overlay.visible { opacity: 1; }

.rating-modal {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 24px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  transform: translateY(20px);
  transition: transform 0.2s ease;
}
.rating-modal-overlay.visible .rating-modal { transform: translateY(0); }

.rating-modal-title {
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 16px;
  color: var(--color-text);
}

.rating-scale {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 14px;
}

.rating-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 8px;
  border: 2px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface-2);
  cursor: pointer;
  flex: 1;
  transition: all 0.15s ease;
  color: var(--color-text);
}
.rating-btn:hover { border-color: var(--color-accent); }
.rating-btn.selected {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-text);
}

.rating-emoji { font-size: 1.4rem; line-height: 1; }
.rating-label { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }

.rating-note {
  width: 100%;
  min-height: 50px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface-2);
  color: var(--color-text);
  font-size: 0.85rem;
  resize: vertical;
  margin-bottom: 14px;
  font-family: inherit;
}
.rating-note::placeholder { color: var(--color-text-muted); }

.rating-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.rating-skip-btn {
  padding: 8px 18px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
}
.rating-skip-btn:hover { color: var(--color-text); }

.rating-save-btn {
  padding: 8px 24px;
  border: none;
  border-radius: 8px;
  background: var(--color-accent);
  color: var(--color-accent-text);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  transition: opacity 0.15s;
}
.rating-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.rating-save-btn:not(:disabled):hover { opacity: 0.85; }

/* ── Rating display on completed badges ── */

.rating-display {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-left: 6px;
}
.rating-display-note {
  font-style: italic;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rating-display-note::before { content: " \2014 "; }

/* ── Rating stats section ── */

.rating-stats-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.rating-avg {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.rating-avg-number {
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1;
}
.rating-avg-label {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.rating-total-count {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.rating-dist-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.rating-dist-emoji { font-size: 1rem; width: 24px; text-align: center; }
.rating-dist-bar-track {
  flex: 1;
  height: 8px;
  background: var(--color-border);
  border-radius: 4px;
  overflow: hidden;
}
.rating-dist-bar-fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: 4px;
  transition: width 0.3s ease;
}
.rating-dist-count {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  width: 24px;
  text-align: right;
}

.rating-trend-chart {
  margin-top: 14px;
  display: flex;
  gap: 6px;
}
.rating-trend-svg {
  flex: 1;
  height: 60px;
}
.rating-trend-labels {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 0.6rem;
  color: var(--color-text-muted);
  text-align: right;
  padding: 2px 0;
}

.rating-smart-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  margin-bottom: 12px;
  line-height: 1.35;
}
.rating-smart-alert .icon { width: 16px; height: 16px; flex-shrink: 0; }
.rating-alert-easy {
  background: rgba(34, 197, 94, 0.12);
  color: var(--color-success);
  border: 1px solid rgba(34, 197, 94, 0.25);
}
.rating-alert-hard {
  background: rgba(239, 68, 68, 0.12);
  color: var(--color-danger);
  border: 1px solid rgba(239, 68, 68, 0.25);
}

/* ── Mobile adjustments for rating modal ── */
@media (max-width: 480px) {
  .rating-modal { padding: 18px 14px; }
  .rating-btn { padding: 8px 4px; }
  .rating-emoji { font-size: 1.2rem; }
  .rating-label { font-size: 0.58rem; }
  .rating-display-note { max-width: 80px; }
}

/* ===== REST DAY INTELLIGENCE ===== */

.rest-intel-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius);
  margin-bottom: 10px;
  font-size: 0.82rem;
  line-height: 1.4;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.2);
  color: var(--color-text);
}
.rest-intel-icon {
  flex-shrink: 0;
  margin-top: 1px;
}
.rest-intel-icon .icon { width: 16px; height: 16px; }
.rest-intel-msg { flex: 1; }

.rest-intel-streak {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.25);
}
.rest-intel-streak .rest-intel-icon { color: #f59e0b; }

.rest-intel-overlap {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.2);
}
.rest-intel-overlap .rest-intel-icon { color: var(--color-danger); }

.rest-intel-fatigue {
  background: rgba(168, 85, 247, 0.08);
  border-color: rgba(168, 85, 247, 0.2);
}
.rest-intel-fatigue .rest-intel-icon { color: #a855f7; }

.rest-intel-upcoming {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.2);
}
.rest-intel-upcoming .rest-intel-icon { color: #3b82f6; }

/* ===== LIVE WORKOUT TRACKER ===== */

.session-complete-btns {
  display: flex;
  gap: 8px;
}
.session-complete-btns .btn-complete-toggle { flex: 1; }

.btn-live-start {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  background: var(--color-accent);
  color: var(--color-accent-text);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
  white-space: nowrap;
}
.btn-live-start .icon { width: 14px; height: 14px; }
.btn-live-start:hover { opacity: 0.85; }

/* ── Full-screen overlay ── */

.live-tracker-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.2s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.live-tracker-overlay.visible { opacity: 1; }

.live-tracker {
  max-width: 500px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ── Header ── */

.live-tracker-header {
  position: sticky;
  top: 0;
  background: var(--color-surface);
  padding: 16px 16px 8px;
  z-index: 2;
  border-bottom: 1px solid var(--color-border);
}

.live-exit-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.live-exit-btn:active {
  background: var(--color-danger, #ef4444);
  color: #fff;
  border-color: transparent;
}

.live-swap-btn {
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-accent);
  font-size: 14px;
  padding: 4px 8px;
  cursor: pointer;
  margin-left: auto;
  flex-shrink: 0;
}
.live-swap-btn:active {
  background: var(--color-accent-glow);
}

.swap-alt-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 6px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  color: var(--color-text);
  transition: border-color 0.15s;
}
.swap-alt-btn:active {
  border-color: var(--color-accent);
  background: var(--color-accent-glow);
}
.swap-alt-name {
  font-weight: 600;
  font-size: 0.9rem;
}
.swap-alt-muscles {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.swap-custom-row {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.swap-custom-input {
  flex: 1;
  padding: 10px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface-2);
  color: var(--color-text);
  font-size: 0.85rem;
}
.swap-custom-btn {
  padding: 10px 16px;
  white-space: nowrap;
}

.live-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.live-timer {
  font-size: 2rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.live-header-btns {
  display: flex;
  gap: 8px;
}

.live-btn-pause,
.live-btn-finish {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
}
.live-btn-pause {
  background: var(--color-surface-2);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.live-btn-finish {
  background: var(--color-accent);
  color: var(--color-accent-text);
}
.live-btn-settings {
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 1rem;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  cursor: pointer;
  line-height: 1;
}
.live-settings-panel {
  padding: 8px 12px;
  background: var(--color-surface-2);
  border-radius: 8px;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.live-settings-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  cursor: pointer;
}
.live-settings-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-accent);
}

.live-progress-bar {
  height: 4px;
  background: var(--color-border);
  border-radius: 2px;
  overflow: hidden;
}
.live-progress-fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: 2px;
  transition: width 0.5s ease;
}

.live-rest-timer {
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-success);
  padding: 8px 0 2px;
  animation: live-rest-pulse 1s ease-in-out infinite;
}
@keyframes live-rest-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ── Tracker body ── */

.live-tracker-body {
  flex: 1;
  padding: 16px;
}

/* ── Strength view ── */

.live-exercise {
  background: var(--color-surface);
  border-radius: var(--radius);
  margin-bottom: 10px;
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.live-exercise--active { border-color: var(--color-accent); }
.live-exercise--done { opacity: 0.6; }

.live-exercise-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  cursor: pointer;
  gap: 8px;
}
.live-exercise-name {
  font-weight: 700;
  font-size: 0.9rem;
  flex: 1;
}
.live-exercise-target {
  font-size: 0.78rem;
  color: var(--color-text-muted);
}
.live-done-check {
  color: var(--color-success);
  font-weight: 700;
}

.live-sets-grid {
  padding: 0 14px 12px;
}
.live-sets-header {
  display: grid;
  grid-template-columns: 36px 1fr 1fr 60px;
  gap: 8px;
  font-size: 0.7rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 6px;
}

.live-set-row {
  display: grid;
  grid-template-columns: 36px 1fr 1fr 60px;
  gap: 8px;
  align-items: center;
  padding: 4px 0;
}
.live-set--done { opacity: 0.5; }
.live-set--done .live-set-input { text-decoration: line-through; }

.live-set-num {
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  text-align: center;
}
.live-set-input {
  padding: 6px 8px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface-2);
  color: var(--color-text);
  font-size: 0.85rem;
  text-align: center;
  width: 100%;
}
.live-set-input:disabled { opacity: 0.5; }

.live-set-btn {
  padding: 6px 10px;
  border: none;
  border-radius: 6px;
  background: var(--color-accent);
  color: var(--color-accent-text);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}
.live-set-btn--done {
  background: var(--color-success);
  color: #fff;
}

/* ── Endurance view ── */

.live-endurance-step {
  text-align: center;
  padding: 20px 16px;
}
.live-step-counter {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.live-step-type {
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
  padding: 4px 12px;
  border-radius: 6px;
  display: inline-block;
}
.live-step-type--z1 { background: rgba(34, 197, 94, 0.15); color: var(--color-success); }
.live-step-type--z2 { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.live-step-type--z3 { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.live-step-type--z4 { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.live-step-type--z5 { background: rgba(168, 85, 247, 0.15); color: #a855f7; }

.live-step-zone {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 8px 0;
}
.live-step-duration-target {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: 10px;
}
.live-step-label {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--color-text);
  max-width: 360px;
  margin: 0 auto 16px;
}
.live-step-timer {
  font-size: 2.5rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  margin-bottom: 20px;
}

.live-step-nav {
  display: flex;
  gap: 12px;
  justify-content: center;
}
.live-btn-step {
  padding: 10px 24px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text);
}
.live-btn-step--next {
  background: var(--color-accent);
  color: var(--color-accent-text);
  border: none;
}

/* ── Step list (mini sidebar in endurance mode) ── */

.live-step-list {
  margin-top: 20px;
  border-top: 1px solid var(--color-border);
  padding-top: 12px;
}
.live-step-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 4px;
  transition: background 0.15s;
}
.live-step-item:hover { background: var(--color-surface); }
.live-step-item--active {
  background: var(--color-accent);
  color: var(--color-accent-text);
}
.live-step-item--done { opacity: 0.5; text-decoration: line-through; }
.live-step-item-num {
  font-weight: 700;
  font-size: 0.75rem;
  width: 22px;
  text-align: center;
}
.live-step-item-label {
  flex: 1;
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-step-item-dur {
  font-size: 0.72rem;
  color: var(--color-text-muted);
}
.live-step-item--active .live-step-item-dur { color: inherit; opacity: 0.7; }

/* ── Hyrox live tracker ── */

.live-hyrox-step {
  text-align: center;
  padding: 20px 16px;
}
.live-hyrox-station-type {
  display: inline-block;
  padding: 4px 16px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.live-hyrox-run {
  background: rgba(59, 130, 246, 0.15);
  color: var(--color-accent);
}
.live-hyrox-station {
  background: rgba(245, 158, 11, 0.15);
  color: var(--color-amber);
}
.live-hyrox-station-name {
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 4px;
}
.live-hyrox-station-detail {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: 16px;
}
.live-hyrox-station-timer {
  font-size: 2.8rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  margin-bottom: 20px;
}

/* Hyrox result rows in history */
.hyrox-result-run td:first-child { color: var(--color-accent); }
.hyrox-result-station td:first-child { color: var(--color-amber); font-weight: 600; }

/* In Hyrox mode, done items show time instead of strikethrough */
.live-hyrox-step ~ .live-step-list .live-step-item--done {
  opacity: 0.7;
  text-decoration: none;
}
.live-hyrox-step ~ .live-step-list .live-step-item--done .live-step-item-dur {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--color-success);
}

.live-complete-msg {
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  padding: 40px 0;
  color: var(--color-success);
}

/* ===== PROGRESSIVE OVERLOAD TRACKING ===== */

.overload-section { margin-bottom: 16px; }
.overload-section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 8px;
}
.overload-section-title .icon { width: 16px; height: 16px; }

.overload-pr-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.82rem;
}
.overload-exercise { font-weight: 600; flex: 1; }
.overload-pr-value { color: var(--color-success); font-weight: 700; }
.overload-pr-date { color: var(--color-text-muted); font-size: 0.75rem; }

.overload-plateau-row {
  padding: 8px 12px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 8px;
  margin-bottom: 6px;
  font-size: 0.82rem;
}
.overload-plateau-detail { color: var(--color-text-muted); font-size: 0.78rem; margin: 2px 0; }
.overload-suggestion { color: var(--color-success); font-weight: 600; font-size: 0.78rem; }

.overload-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.overload-chart-card {
  background: var(--color-surface-2);
  border-radius: 8px;
  padding: 12px;
  border: 1px solid var(--color-border);
}
.overload-chart-title { font-size: 0.78rem; font-weight: 700; margin-bottom: 2px; }
.overload-chart-value { font-size: 0.72rem; color: var(--color-text-muted); margin-bottom: 6px; }
.overload-chart-svg { width: 100%; height: 50px; }

/* ===== NATURAL LANGUAGE TRAINING INPUT ===== */

.nl-input-bar {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: var(--shadow);
}
.nl-input-wrap {
  display: flex;
  gap: 8px;
  align-items: center;
}
.nl-input-field {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface-2);
  color: var(--color-text);
  font-size: 0.85rem;
  font-family: inherit;
}
.nl-input-field::placeholder { color: var(--color-text-muted); }
.nl-input-field:focus { outline: none; border-color: var(--color-accent); }

.nl-submit-btn {
  padding: 8px 14px;
  border: none;
  border-radius: 8px;
  background: var(--color-accent);
  color: var(--color-accent-text);
  cursor: pointer;
  font-weight: 700;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.nl-submit-btn .icon { width: 16px; height: 16px; }
.nl-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.nl-response {
  margin-top: 10px;
}

.nl-loading {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  font-style: italic;
  padding: 8px 0;
}

.nl-error {
  font-size: 0.82rem;
  color: var(--color-danger);
  padding: 8px 0;
}

.nl-result {
  background: var(--color-surface-2);
  border-radius: 8px;
  padding: 12px;
  border: 1px solid var(--color-border);
}

.nl-summary {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.nl-actions-preview {
  margin-bottom: 10px;
}
.nl-action-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 6px;
  font-size: 0.78rem;
  margin-bottom: 4px;
}
.nl-action-date { font-weight: 700; }
.nl-action-type { color: var(--color-text-muted); text-transform: capitalize; }
.nl-action-effect { margin-left: auto; font-weight: 600; }

.nl-confirm-btns {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.nl-apply-btn {
  padding: 8px 18px;
  border: none;
  border-radius: 8px;
  background: var(--color-accent);
  color: var(--color-accent-text);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}
.nl-dismiss-btn {
  padding: 8px 18px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 0.82rem;
  cursor: pointer;
}

.nl-coach-msg {
  font-size: 0.82rem;
  color: var(--color-text);
  line-height: 1.5;
  padding: 6px 0;
  border-top: 1px solid var(--color-border);
  margin-top: 6px;
}

.nl-applied {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--color-success);
  font-weight: 600;
  padding: 8px 0;
}
.nl-applied .icon { width: 16px; height: 16px; }

/* ===== GOAL SETTING SYSTEM ===== */

.goal-card {
  background: var(--color-surface-2);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 10px;
  border: 1px solid var(--color-border);
}
.goal-card--complete { border-color: var(--color-success); }
.goal-card--archived { opacity: 0.6; }
.goals-empty {
  text-align: center;
  padding: 0;
  margin: -8px 0 -12px;
}
.goals-empty .empty-msg {
  font-size: 0.85rem;
}
.goals-empty .btn-primary {
  padding: 8px 16px;
  font-size: 0.85rem;
}

.goal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.goal-icon { flex-shrink: 0; }
.goal-icon .icon { width: 18px; height: 18px; }
.goal-info { flex: 1; }
.goal-name { font-weight: 700; font-size: 0.9rem; }
.goal-meta { font-size: 0.75rem; color: var(--color-text-muted); margin-top: 2px; }
.goal-actions { display: flex; gap: 6px; }
.goal-edit-btn, .goal-archive-btn {
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 0.72rem;
  cursor: pointer;
}
.goal-archive-btn { color: var(--color-success); border-color: var(--color-success); }

.goal-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.goal-progress-track {
  flex: 1;
  height: 8px;
  background: var(--color-border);
  border-radius: 4px;
  overflow: hidden;
}
.goal-progress-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}
.goal-progress-pct { font-size: 0.78rem; font-weight: 700; min-width: 36px; text-align: right; }
.goal-progress-detail { font-size: 0.75rem; color: var(--color-text-muted); margin-bottom: 8px; }

.goal-update-row { display: flex; gap: 8px; align-items: center; }
.goal-update-input {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.82rem;
}
.goal-update-btn {
  padding: 6px 14px;
  border: none;
  border-radius: 6px;
  background: var(--color-accent);
  color: var(--color-accent-text);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.goals-archived-section { margin-top: 12px; }
.goals-archived-toggle {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  text-decoration: underline;
}

.home-goal-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--color-surface);
  border-radius: var(--radius);
  margin-bottom: 10px;
  box-shadow: var(--shadow);
}
.home-goal-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  flex-shrink: 0;
}
.home-goal-label .icon { width: 14px; height: 14px; }
.home-goal-bar {
  flex: 1;
  height: 6px;
  background: var(--color-border);
  border-radius: 3px;
  overflow: hidden;
}
.home-goal-fill { height: 100%; background: var(--color-accent); border-radius: 3px; }
.home-goal-pct { font-size: 0.75rem; font-weight: 700; min-width: 30px; text-align: right; }

/* ===== UX BY SKILL LEVEL ===== */

.ux-guidance {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  padding: 8px 12px;
  background: rgba(59, 130, 246, 0.06);
  border-radius: 8px;
  margin-bottom: 8px;
  line-height: 1.4;
}
.ux-guidance .icon { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }

/* Beginner: hide advanced features */
[data-ux-level="beginner"] .ux-advanced,
[data-ux-level="beginner"] .ux-intermediate { display: none !important; }

/* Intermediate: show most, hide advanced-only */
[data-ux-level="intermediate"] .ux-advanced { display: none !important; }

/* Advanced: show everything */
[data-ux-level="advanced"] .ux-guidance { display: none !important; }

/* Beginner: simplify some UI elements */
[data-ux-level="beginner"] .completion-expand-btn { display: none; }
/* Zone strips and labels always visible — useful context at all levels */

/* Advanced: show extra metrics */
[data-ux-level="advanced"] .session-step-pace { display: inline; }

/* Beginner guidance text injected by JS */
[data-ux-level="beginner"] .btn-complete-toggle::after {
  content: " (tap when done)";
  font-weight: 400;
  font-size: 0.72rem;
  opacity: 0.7;
}

/* ===== EXPORT / SHARE WORKOUTS ===== */

.btn-share-workout {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 0.72rem;
  cursor: pointer;
  margin-left: 4px;
}
.btn-share-workout .icon { width: 12px; height: 12px; }
.btn-share-workout:hover { color: var(--color-text); border-color: var(--color-accent); }

.share-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.2s;
  padding: 16px;
}
.share-modal-overlay.visible { opacity: 1; }

.share-modal {
  background: var(--color-surface);
  border-radius: var(--radius);
  max-width: 400px;
  width: 100%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.share-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  font-weight: 700;
  border-bottom: 1px solid var(--color-border);
}

/* ── Share card preview (styled like a story card) ── */

.share-card {
  background: var(--color-accent);
  color: var(--color-accent-text);
  padding: 24px 20px;
  margin: 16px;
  border-radius: 12px;
  text-align: center;
}
.share-card-brand {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 8px;
}
.share-card-date {
  font-size: 0.75rem;
  opacity: 0.7;
  margin-bottom: 4px;
}
.share-card-name {
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 14px;
}
.share-card-stats {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 10px;
}
.share-card-stat { text-align: center; }
.share-stat-val { display: block; font-size: 1.4rem; font-weight: 800; }
.share-stat-label { font-size: 0.65rem; text-transform: uppercase; opacity: 0.6; letter-spacing: 0.5px; }

.share-card-rating {
  font-size: 1rem;
  margin: 8px 0;
}

.share-card-exercises {
  margin-top: 10px;
  text-align: left;
  font-size: 0.72rem;
  opacity: 0.8;
}
.share-ex-line {
  padding: 2px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.share-actions {
  display: flex;
  gap: 10px;
  padding: 12px 16px 16px;
}
.share-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface-2);
  color: var(--color-text);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.share-action-btn .icon { width: 16px; height: 16px; }
.share-action-btn:hover { border-color: var(--color-accent); }

/* ===== CALENDAR SYNC ===== */

.app-row--featured {
  border: 1px solid var(--color-accent);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
}
.app-logo--outlook { background: #0078d4; color: white; }

.cal-sync-connected, .cal-sync-disconnected { padding: 8px 0; }
.cal-sync-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-success);
  margin-bottom: 10px;
}
.cal-sync-badge .icon { width: 14px; height: 14px; }
.cal-sync-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cal-sync-status-msg { font-size: 0.78rem; color: var(--color-text-muted); margin-top: 8px; min-height: 20px; }

/* ===== ADMIN PANEL ===== */

.admin-subtabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 12px;
}
.admin-subtab {
  padding: 8px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius, 12px);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.9em;
  cursor: pointer;
  white-space: nowrap;
}
.admin-subtab.active {
  background: var(--color-primary, #818cf8);
  color: #fff;
  border-color: var(--color-primary, #818cf8);
}

.admin-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 12px;
}

.admin-stat-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius, 12px);
  padding: 18px 12px;
  text-align: center;
}

.admin-stat-value {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1.1;
}

.admin-stat-label {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: 4px;
}

/* ── Signup chart ── */

.admin-chart-header {
  margin-bottom: 12px;
}

.admin-chart-title {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-text);
}

.admin-chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 100px;
}

.admin-chart-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
  height: 100%;
}

.admin-chart-bar {
  width: 100%;
  min-height: 2px;
  background: var(--color-accent);
  border-radius: 3px 3px 0 0;
  transition: height 0.3s;
}

.admin-chart-date {
  font-size: 0.55rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* ── User table ── */

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.admin-table th {
  text-align: left;
  padding: 10px 8px;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  border-bottom: 2px solid var(--color-border);
}

.admin-table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.admin-table tr:last-child td { border-bottom: none; }

.admin-td-name { font-weight: 600; white-space: nowrap; }
.admin-td-email { color: var(--color-text-muted); }

.admin-td-actions {
  display: flex;
  gap: 6px;
}

.admin-action-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, color 0.15s;
}
.admin-action-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.admin-action-btn svg { width: 16px; height: 16px; }

/* ── Badges ── */

.admin-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.admin-badge-admin {
  background: rgba(99, 102, 241, 0.15);
  color: var(--color-accent);
}

.admin-badge-user {
  background: rgba(148, 163, 184, 0.15);
  color: var(--color-text-muted);
}

.admin-badge-premium {
  background: rgba(245, 158, 11, 0.15);
  color: var(--color-amber, #f59e0b);
}

.admin-badge-free {
  background: rgba(148, 163, 184, 0.15);
  color: var(--color-text-muted);
}

/* ── Responsive ── */

@media (max-width: 520px) {
  .admin-stats-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .admin-table { font-size: 0.78rem; }
  .admin-table th, .admin-table td { padding: 8px 5px; }
  .admin-td-email { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
}

/* ===== PHILOSOPHY ENGINE UI ===== */

.plan-outdated-banner {
  background: var(--color-warning-bg, #fff3cd);
  border: 1px solid var(--color-warning-border, #ffc107);
  border-radius: 8px;
  padding: 12px 16px;
  margin: 12px 0;
  font-size: 0.88rem;
}
.plan-outdated-banner p { margin: 0; }
.plan-outdated-banner .btn-link {
  background: none;
  border: none;
  color: var(--color-accent);
  text-decoration: underline;
  cursor: pointer;
  font-size: inherit;
  padding: 0;
}

.plan-rationale-details {
  margin: 16px 0;
  padding: 12px 16px;
  background: var(--color-surface);
  border-radius: 8px;
  border: 1px solid var(--color-border);
}
.plan-rationale-details summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-text);
}
.plan-rationale-details p {
  margin: 8px 0 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--color-text-secondary, var(--color-text));
}
.plan-rationale-details .hint {
  font-size: 0.8rem;
  opacity: 0.7;
}

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  padding: 10px 18px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  transition: background 0.15s;
}
.btn-secondary:hover { background: var(--color-surface-2); }