:root {
  --cf-sidebar: 232px;
  --cf-sidebar-collapsed: 64px;
  --cf-header: 72px;
  --cf-page-max: 1320px;
}

body[data-theme="light"] {
  --wow-bg: #f8f7f3;
  --wow-bg-gradient:
    radial-gradient(circle at 14% 0%, rgba(244, 63, 70, 0.09), transparent 36%),
    radial-gradient(circle at 100% 10%, rgba(14, 165, 233, 0.06), transparent 32%),
    linear-gradient(145deg, #fffaf8 0%, #f8f7f3 48%, #eef4f4 100%);
  --wow-bg-elevated: #ffffff;
  --wow-surface: #ffffff;
  --wow-surface-hover: #f2f0ea;
  --wow-bg-subtle: #f1eee8;
  --wow-border: #ddd7cf;
  --wow-border-strong: #bdb4aa;
  --wow-text: #303842;
  --wow-text-muted: #68707a;
  --wow-text-subtle: #8a929c;
  --wow-text-strong: #070b12;
  --wow-text-inverse: #ffffff;
  --wow-accent: #f43f46;
  --wow-accent-hover: #e11d2e;
  --wow-accent-active: #be1230;
  --wow-accent-soft: rgba(244, 63, 70, 0.1);
  --wow-accent-ring: rgba(244, 63, 70, 0.28);
  --wow-danger: #dc2626;
  --wow-danger-soft: rgba(220, 38, 38, 0.1);
  --wow-info: #111827;
  --wow-info-soft: rgba(17, 24, 39, 0.08);
  --wow-shadow-lg: 0 18px 40px rgba(7, 11, 18, 0.1);
  --wow-shadow-xl: 0 24px 70px rgba(7, 11, 18, 0.14);
}

body[data-theme="dark"] {
  --wow-bg: #090b10;
  --wow-bg-gradient:
    radial-gradient(circle at 15% 0%, rgba(255, 74, 82, 0.13), transparent 36%),
    radial-gradient(circle at 100% 10%, rgba(56, 189, 248, 0.08), transparent 32%),
    linear-gradient(145deg, #070910 0%, #0e121a 50%, #131821 100%);
  --wow-bg-elevated: #10131a;
  --wow-surface: #151922;
  --wow-surface-hover: #202530;
  --wow-bg-subtle: #171b24;
  --wow-border: #2a303b;
  --wow-border-strong: #3d4553;
  --wow-text: #e6e7ea;
  --wow-text-muted: #a0a5ae;
  --wow-text-subtle: #727985;
  --wow-text-strong: #ffffff;
  --wow-text-inverse: #ffffff;
  --wow-accent: #ff4a52;
  --wow-accent-hover: #f43f46;
  --wow-accent-active: #dc2626;
  --wow-accent-soft: rgba(255, 74, 82, 0.14);
  --wow-accent-ring: rgba(255, 74, 82, 0.36);
  --wow-danger: #ff4a52;
  --wow-danger-soft: rgba(255, 74, 82, 0.14);
  --wow-info: #f43f46;
  --wow-info-soft: rgba(244, 63, 70, 0.12);
  --wow-shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.28);
  --wow-shadow-xl: 0 24px 70px rgba(0, 0, 0, 0.36);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
  overflow-x: clip;
  background: var(--wow-bg-gradient, var(--wow-bg, #0b0f1a));
  color: var(--wow-text, #d1d5db);
  font-family: var(--wow-font-sans, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

button,
input,
select,
textarea {
  max-width: 100%;
  min-width: 0;
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

img,
video,
canvas {
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

/* Auth */
.auth-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--wow-space-5, 20px);
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--wow-accent, #f43f46) 10%, transparent), transparent 36%),
    var(--wow-bg-gradient, var(--wow-bg, #0b0f1a));
}

.auth-card {
  width: min(440px, 100%);
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-lg, 12px);
  background: var(--wow-surface, #111827);
  box-shadow: var(--wow-shadow-xl, 0 24px 70px rgba(0, 0, 0, 0.35));
  padding: var(--wow-space-6, 24px);
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wow-space-2, 8px);
  margin: var(--wow-space-5, 20px) 0 var(--wow-space-4, 16px);
}

.auth-register-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wow-space-3, 12px);
}

.auth-register-fields label:last-child {
  grid-column: 1 / -1;
}

.auth-message {
  min-height: 20px;
  margin: 0;
  color: var(--wow-danger, #ef4444);
  font-size: var(--wow-text-sm, 0.875rem);
}

/* Shell */
.app-shell {
  min-height: 100vh;
  background: var(--wow-bg-gradient, var(--wow-bg, #0b0f1a));
  padding: calc(var(--cf-header) + var(--wow-space-5, 20px)) var(--wow-space-6, 24px) var(--wow-space-6, 24px)
    calc(var(--cf-sidebar) + var(--wow-space-6, 24px));
  transition: padding-left var(--wow-transition-base, 180ms ease);
}

.app-shell.sidebar-collapsed {
  padding-left: calc(var(--cf-sidebar-collapsed) + var(--wow-space-6, 24px));
}

.workspace {
  width: min(var(--cf-page-max), 100%);
  margin: 0 auto;
  min-width: 0;
}

.mobile-menu-button,
.mobile-menu-backdrop {
  display: none;
}

/* Sidebar */
.intro-panel.wow-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 80;
  width: var(--cf-sidebar);
  height: 100vh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: 0;
  border-right: 1px solid var(--wow-border, #253043);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--wow-accent, #f43f46) 4%, transparent), transparent 46%),
    var(--wow-bg-elevated, #0f172a);
  overflow: hidden;
}

.app-shell.sidebar-collapsed .intro-panel.wow-sidebar {
  width: var(--cf-sidebar-collapsed);
}

.intro-panel::before,
.intro-copy,
.intro-panel .summary-grid {
  display: none;
}

.brand-row.wow-sidebar__brand {
  height: var(--cf-header);
  padding: 0 var(--wow-space-3, 12px);
  border-bottom: 1px solid var(--wow-border, #253043);
}

.brand-mark.wow-sidebar__brand-logo {
  width: 32px;
  height: 32px;
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-accent, #22d3ee);
  color: var(--wow-text-inverse, #ffffff);
  font-weight: var(--wow-weight-bold, 700);
  box-shadow: none;
}

.brand-mark {
  overflow: hidden;
}

.brand-mark--image {
  background: var(--wow-bg-elevated, #ffffff) !important;
  color: transparent;
}

.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-row .eyebrow {
  margin: 0 0 3px;
  color: var(--wow-text-muted, #9ca3af);
  font-size: var(--wow-text-xs, 0.75rem);
  font-weight: var(--wow-weight-medium, 500);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.wow-sidebar__brand-name {
  display: block;
  margin: 0;
  overflow: hidden;
  color: var(--wow-text-strong, #f9fafb);
  font-size: var(--wow-text-sm, 0.875rem);
  font-weight: var(--wow-weight-semibold, 600);
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  color: var(--wow-text-strong, #0b1220);
  font-weight: var(--wow-weight-black, 900);
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.brand-wordmark__accent {
  color: #f43f46;
}

.wow-sidebar__brand-name .brand-wordmark {
  font-size: 0.95rem;
}

.auth-card .brand-wordmark {
  font-size: inherit;
}

.brand-tagline {
  max-width: 210px;
  margin: 3px 0 0;
  overflow: hidden;
  color: var(--wow-text-muted, #64748b);
  font-size: var(--wow-text-xs, 0.75rem);
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-card .brand-tagline {
  max-width: none;
  color: var(--wow-text-muted, #94a3b8);
}

.user-chip {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wow-space-3, 12px);
  padding: var(--wow-space-2, 8px);
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-surface, #111827);
  transition: background var(--wow-transition-fast, 120ms ease);
}

.user-chip:hover {
  background: var(--wow-surface-hover, #1f2937);
}

.user-chip[hidden] {
  display: none !important;
}

.profile-name-button {
  min-width: 0;
  height: 28px;
  flex: 1 1 auto;
  justify-content: flex-start;
  gap: 7px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

#logoutButton {
  position: relative;
  z-index: 1;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  justify-content: center;
  padding: 0;
  border-color: var(--wow-border, #253043);
  color: var(--wow-text-strong, #f9fafb);
}

#logoutButton .logout-text {
  display: none;
}

.profile-name-button svg {
  flex: 0 0 auto;
  color: var(--wow-text-muted, #9ca3af);
}

.profile-name-button:hover svg,
.profile-name-button:hover span {
  color: var(--wow-accent, #22d3ee);
}

.profile-name-button span,
.user-chip > span {
  overflow: hidden;
  color: var(--wow-text-strong, #f9fafb);
  font-size: var(--wow-text-sm, 0.875rem);
  font-weight: var(--wow-weight-semibold, 600);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-chip button {
  height: 28px;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  font-size: var(--wow-text-xs, 0.75rem);
}

.user-chip button svg {
  width: 15px;
  height: 15px;
}

.wow-sidebar__nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: var(--wow-space-3, 12px) 6px;
}

.sidebar-footer {
  display: grid;
  gap: var(--wow-space-2, 8px);
  flex: 0 0 auto;
  padding: var(--wow-space-2, 8px);
  border-top: 1px solid var(--wow-border, #253043);
  background: var(--wow-bg-elevated, #0f172a);
}

.sidebar-footer-actions {
  display: flex;
  align-items: center;
  gap: var(--wow-space-2, 8px);
  justify-content: flex-start;
  min-width: 0;
}

.sidebar-theme-toggle,
.sidebar-collapse-button {
  width: 32px;
  height: 32px;
  justify-content: center;
  padding: 0;
  border-radius: var(--wow-radius-md, 8px);
  color: var(--wow-text-muted, #9ca3af);
}

.sidebar-theme-toggle svg,
.sidebar-collapse-button svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.sidebar-install-button,
.sidebar-donation-button {
  width: 40px;
  height: 40px;
  min-height: 40px;
  flex: 0 0 40px;
  justify-content: center;
  padding: 0;
  border-radius: var(--wow-radius-md, 8px);
  gap: 0;
}

.sidebar-install-button {
  border-color: color-mix(in srgb, var(--wow-info, #0ea5e9) 38%, var(--wow-border, #253043));
  background: color-mix(in srgb, var(--wow-info, #0ea5e9) 10%, transparent);
  color: var(--wow-info, #0ea5e9);
}

.sidebar-install-button[hidden] {
  display: none;
}

.sidebar-donation-button {
  border-color: var(--wow-accent, #f43f46);
  background: var(--wow-accent-soft, rgba(244, 63, 70, 0.1));
  color: var(--wow-accent, #f43f46);
  width: 100%;
  height: 40px;
  flex: 1 1 auto;
  justify-content: center;
  padding: 0 var(--wow-space-3, 12px);
  gap: var(--wow-space-2, 8px);
}

.sidebar-install-button svg,
.sidebar-donation-button svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.install-button__text,
.donation-button__text {
  display: none;
}

.donation-button__text {
  display: inline;
  min-width: 0;
  overflow: hidden;
  font-size: var(--wow-text-sm, 0.875rem);
  font-weight: var(--wow-weight-semibold, 600);
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tab-button.wow-sidebar__item {
  width: 100%;
  gap: var(--wow-space-2, 8px);
  padding-inline: 10px;
}

.tab-button.wow-sidebar__item.active,
.tab-button.wow-sidebar__item.wow-sidebar__item--active {
  background: var(--wow-accent-soft, rgba(244, 63, 70, 0.1));
  color: var(--wow-accent, #f43f46);
}

.tab-button.wow-sidebar__item::before {
  display: none;
}

.tab-button.wow-sidebar__item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.nav-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-shell.sidebar-collapsed .brand-row.wow-sidebar__brand {
  height: auto;
  justify-content: center;
  flex-direction: row;
  padding: var(--wow-space-3, 12px) 0;
}

.app-shell.sidebar-collapsed .intro-panel.wow-sidebar,
.app-shell.sidebar-collapsed .wow-sidebar__nav,
.app-shell.sidebar-collapsed .wow-sidebar__group,
.app-shell.sidebar-collapsed .wow-sidebar__group-items,
.app-shell.sidebar-collapsed .sidebar-footer,
.app-shell.sidebar-collapsed .user-chip {
  overflow: visible;
}

.app-shell.sidebar-collapsed .brand-row > div:nth-child(2),
.app-shell.sidebar-collapsed .nav-text {
  display: none;
}

.app-shell.sidebar-collapsed .user-chip {
  min-height: auto;
  display: grid;
  gap: var(--wow-space-2, 8px);
  justify-content: center;
  padding: var(--wow-space-1, 4px);
  border: 0;
  background: transparent;
}

.app-shell.sidebar-collapsed .user-chip[hidden] {
  display: none !important;
}

.app-shell.sidebar-collapsed .user-chip span,
.app-shell.sidebar-collapsed .logout-text {
  display: none;
}

.app-shell.sidebar-collapsed .user-chip button {
  width: 40px;
  height: 40px;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-surface, #111827);
}

.app-shell.sidebar-collapsed .sidebar-footer {
  padding: var(--wow-space-2, 8px);
  gap: var(--wow-space-2, 8px);
}

.app-shell.sidebar-collapsed .sidebar-footer-actions {
  display: grid;
  grid-template-columns: 40px;
  justify-content: center;
}

.app-shell.sidebar-collapsed .sidebar-theme-toggle,
.app-shell.sidebar-collapsed .sidebar-collapse-button,
.app-shell.sidebar-collapsed .sidebar-install-button,
.app-shell.sidebar-collapsed .sidebar-donation-button {
  width: 40px;
  height: 40px;
  justify-content: center;
  margin: 0 auto;
  padding: 0;
}

.app-shell.sidebar-collapsed .sidebar-install-button .install-button__text,
.app-shell.sidebar-collapsed .sidebar-donation-button .donation-button__text {
  display: none;
}

.app-shell.sidebar-collapsed .wow-sidebar__nav {
  padding: var(--wow-space-2, 8px);
}

.app-shell.sidebar-collapsed .tab-button.wow-sidebar__item {
  position: relative;
  width: 40px;
  height: 40px;
  justify-content: center;
  margin: 0 auto;
  padding: 0;
}

.app-shell.sidebar-collapsed .intro-panel [data-tooltip] {
  position: relative;
}

.app-shell.sidebar-collapsed .intro-panel [data-tooltip]::after {
  position: absolute;
  z-index: 200;
  top: 50%;
  left: calc(100% + 12px);
  width: max-content;
  max-width: 220px;
  padding: 8px 10px;
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-bg-elevated, #0f172a);
  color: var(--wow-text-strong, #f9fafb);
  box-shadow: var(--wow-shadow-lg, 0 16px 32px rgba(0, 0, 0, 0.22));
  content: attr(data-tooltip);
  font-size: var(--wow-text-xs, 0.75rem);
  font-weight: var(--wow-weight-semibold, 600);
  line-height: 1.1;
  opacity: 0;
  pointer-events: none;
  text-align: left;
  transform: translateY(-50%) translateX(-4px);
  transition:
    opacity var(--wow-transition-fast, 120ms ease),
    transform var(--wow-transition-fast, 120ms ease),
    visibility var(--wow-transition-fast, 120ms ease);
  visibility: hidden;
  white-space: nowrap;
}

.app-shell.sidebar-collapsed .intro-panel [data-tooltip]::before {
  position: absolute;
  z-index: 201;
  top: 50%;
  left: calc(100% + 7px);
  width: 10px;
  height: 10px;
  border-left: 1px solid var(--wow-border, #253043);
  border-bottom: 1px solid var(--wow-border, #253043);
  background: var(--wow-bg-elevated, #0f172a);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) rotate(45deg);
  transition: opacity var(--wow-transition-fast, 120ms ease);
  visibility: hidden;
}

.app-shell.sidebar-collapsed .intro-panel [data-tooltip]:hover::after,
.app-shell.sidebar-collapsed .intro-panel [data-tooltip]:focus-visible::after,
.app-shell.sidebar-collapsed .intro-panel [data-tooltip]:hover::before,
.app-shell.sidebar-collapsed .intro-panel [data-tooltip]:focus-visible::before {
  opacity: 1;
  visibility: visible;
}

.app-shell.sidebar-collapsed .intro-panel [data-tooltip]:hover::after,
.app-shell.sidebar-collapsed .intro-panel [data-tooltip]:focus-visible::after {
  transform: translateY(-50%) translateX(0);
}

/* Header */
.app-header.wow-appbar {
  position: fixed;
  z-index: 70;
  top: 0;
  right: 0;
  left: var(--cf-sidebar);
  height: var(--cf-header);
  min-height: var(--cf-header);
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(640px, 1.2fr);
  gap: var(--wow-space-6, 24px);
  align-items: center;
  border-bottom: 1px solid color-mix(in srgb, var(--wow-border, #253043) 84%, transparent);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--wow-accent, #f43f46) 3%, transparent), transparent 46%),
    color-mix(in srgb, var(--wow-bg-elevated, #0f172a) 96%, transparent);
  box-shadow: 0 10px 24px rgba(7, 11, 18, 0.05);
  backdrop-filter: blur(14px);
  transition: left var(--wow-transition-base, 180ms ease);
  padding: 0 var(--wow-space-6, 24px);
}

.app-shell.sidebar-collapsed .app-header.wow-appbar {
  left: var(--cf-sidebar-collapsed);
}

.app-header .eyebrow {
  margin: 0;
  color: var(--wow-text-muted, #9ca3af);
  font-size: 0.7rem;
  font-weight: var(--wow-weight-bold, 700);
  letter-spacing: 0;
  text-transform: uppercase;
}

.app-header .wow-appbar__title {
  overflow: hidden;
  color: var(--wow-text-strong, #f9fafb);
  font-size: clamp(1.25rem, 1.5vw, 1.55rem);
  font-weight: var(--wow-weight-bold, 700);
  letter-spacing: 0;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-metrics {
  display: grid;
  grid-template-columns: minmax(110px, 0.8fr) minmax(132px, 0.85fr) minmax(190px, 1.35fr) minmax(132px, 0.9fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  justify-self: end;
}

.header-metrics article {
  min-width: 0;
  min-height: 46px;
  display: grid;
  align-content: center;
  border: 1px solid color-mix(in srgb, var(--wow-border, #253043) 92%, transparent);
  border-radius: var(--wow-radius-md, 8px);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--wow-accent, #f43f46) 3%, transparent), transparent 72%),
    var(--wow-surface, #111827);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--wow-text-inverse, #fff) 8%, transparent);
  padding: 7px 12px;
}

.header-metrics span {
  display: block;
  color: var(--wow-text-muted, #9ca3af);
  font-size: 0.68rem;
  font-weight: var(--wow-weight-bold, 700);
  text-transform: uppercase;
  letter-spacing: 0;
}

.header-metrics strong {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--wow-text-strong, #f9fafb);
  font-size: 0.82rem;
  font-weight: var(--wow-weight-bold, 700);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-metrics article:nth-child(3) strong {
  max-width: 270px;
}

.header-tools {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px;
  gap: var(--wow-space-3, 12px);
  align-items: center;
}

.header-reward-badge {
  --reward-badge-color: #f59e0b;
  min-width: 110px;
  height: 46px;
  align-self: center;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  column-gap: var(--wow-space-2, 8px);
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--reward-badge-color) 38%, var(--wow-border, #253043));
  border-radius: var(--wow-radius-md, 8px);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reward-badge-color) 12%, transparent), transparent 58%),
    var(--wow-surface, #111827);
  color: var(--wow-text-strong, #f9fafb);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--reward-badge-color) 18%, transparent);
  padding: 6px 9px;
  text-align: left;
  cursor: pointer;
}

.header-reward-badge > span {
  grid-row: 1 / 3;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--wow-radius-sm, 6px);
  background: color-mix(in srgb, var(--reward-badge-color) 18%, transparent);
  color: var(--reward-badge-color);
}

.header-reward-badge svg {
  width: 17px;
  height: 17px;
}

.header-reward-badge strong,
.header-reward-badge small {
  min-width: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-reward-badge strong {
  align-self: end;
  font-size: 0.76rem;
  font-weight: var(--wow-weight-bold, 700);
}

.header-reward-badge small {
  align-self: start;
  color: var(--wow-text-muted, #9ca3af);
  font-size: 0.68rem;
}

.header-reward-badge--start {
  --reward-badge-color: #8a6a45;
}

.header-reward-badge--steady {
  --reward-badge-color: #16a34a;
}

.header-reward-badge--progress {
  --reward-badge-color: #0b63ce;
}

.header-reward-badge--disciplined {
  --reward-badge-color: #d97706;
}

.header-reward-badge--advanced {
  --reward-badge-color: #6d28d9;
}

.header-reward-badge--unstoppable {
  --reward-badge-color: #b91c1c;
}

.header-notifications {
  position: relative;
  z-index: 90;
  display: grid;
  align-items: center;
}

.header-notification-button {
  position: relative;
  width: 46px;
  height: 46px;
  min-height: 46px;
  padding: 0;
  border-radius: var(--wow-radius-md, 8px);
}

.header-notification-button.has-alerts {
  border-color: color-mix(in srgb, var(--wow-accent, #f43f46) 52%, var(--wow-border, #253043));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--wow-accent, #f43f46) 14%, transparent), transparent 70%),
    var(--wow-surface, #111827);
  color: var(--wow-accent, #f43f46);
}

.header-notification-button svg {
  width: 18px;
  height: 18px;
}

.header-notification-badge {
  position: absolute;
  top: -6px;
  right: -5px;
  min-width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border: 2px solid var(--wow-bg-elevated, #0f172a);
  border-radius: 999px;
  background: var(--wow-accent, #f43f46);
  color: #fff;
  font-size: 0.68rem;
  font-weight: var(--wow-weight-bold, 700);
  line-height: 1;
  padding: 0 5px;
}

.header-notification-panel {
  position: absolute;
  z-index: 180;
  top: calc(100% + 12px);
  right: 0;
  width: min(460px, calc(100vw - 32px));
  max-height: min(620px, calc(100vh - 96px));
  overflow: auto;
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-xl, 16px);
  background: var(--wow-bg-elevated, #0f172a);
  box-shadow: var(--wow-shadow-xl, 0 24px 70px rgba(0, 0, 0, 0.35));
  padding: var(--wow-space-4, 16px);
}

.header-notification-panel[hidden] {
  display: none;
}

.header-notification-head {
  display: flex;
  justify-content: space-between;
  gap: var(--wow-space-3, 12px);
  align-items: flex-start;
  padding-bottom: var(--wow-space-3, 12px);
  border-bottom: 1px solid var(--wow-border, #253043);
}

.header-notification-head strong {
  display: block;
  color: var(--wow-text-strong, #f9fafb);
}

.header-notification-head small,
.header-notification-footnote {
  color: var(--wow-text-muted, #9ca3af);
  line-height: 1.45;
}

.header-notification-close {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-surface, #111827);
  color: var(--wow-text-muted, #9ca3af);
  cursor: pointer;
}

.header-notification-close svg {
  width: 16px;
  height: 16px;
}

.header-notification-list {
  display: grid;
  gap: var(--wow-space-3, 12px);
  padding: var(--wow-space-3, 12px) 0;
}

.header-notification-group-label {
  color: var(--wow-text-muted, #64748b);
  font-size: var(--wow-text-xs, 0.75rem);
  font-weight: var(--wow-weight-bold, 700);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.header-notification-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: var(--wow-space-3, 12px);
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-lg, 12px);
  background: var(--wow-surface, #111827);
  padding: var(--wow-space-3, 12px);
}

.header-notification-item > span,
.header-notification-empty > i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-accent-soft, rgba(34, 211, 238, 0.12));
  color: var(--wow-accent, #22d3ee);
}

.header-notification-item svg {
  width: 17px;
  height: 17px;
}

.header-notification-item strong {
  color: var(--wow-text-strong, #f9fafb);
  line-height: 1.25;
}

.header-notification-source {
  display: block;
  margin-top: 2px;
  color: var(--wow-text-muted, #9ca3af);
  font-size: var(--wow-text-xs, 0.75rem);
}

.header-notification-item p {
  margin: 4px 0 var(--wow-space-2, 8px);
  color: var(--wow-text-muted, #9ca3af);
  line-height: 1.4;
}

.header-notification-item--info {
  border-color: rgba(8, 145, 178, 0.32);
  background: rgba(8, 145, 178, 0.08);
}

.header-notification-item--info > span {
  background: rgba(8, 145, 178, 0.14);
  color: #0891b2;
}

.header-notification-item--success {
  border-color: rgba(34, 197, 94, 0.32);
  background: rgba(34, 197, 94, 0.08);
}

.header-notification-item--success > span {
  background: rgba(34, 197, 94, 0.14);
  color: #16a34a;
}

.header-notification-item--danger {
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.08);
}

.header-notification-item--danger > span {
  background: rgba(239, 68, 68, 0.14);
  color: #ef4444;
}

.header-notification-item--warn {
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.08);
}

.header-notification-item--warn > span {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
}

.header-notification-empty {
  display: grid;
  justify-items: center;
  gap: var(--wow-space-2, 8px);
  padding: var(--wow-space-5, 20px);
  color: var(--wow-text-muted, #9ca3af);
  text-align: center;
}

.header-notification-empty strong {
  color: var(--wow-text-strong, #f9fafb);
}

.header-notification-empty p,
.header-notification-footnote {
  margin: 0;
}

.header-notification-footnote {
  padding-top: var(--wow-space-3, 12px);
  border-top: 1px solid var(--wow-border, #253043);
  font-size: var(--wow-text-sm, 0.875rem);
}

.global-notification-modal {
  position: fixed;
  inset: 0;
  z-index: 520;
  display: grid;
  place-items: center;
  padding: var(--wow-space-5, 20px);
  background: rgba(15, 23, 42, 0.58);
  backdrop-filter: blur(5px);
}

.global-notification-modal[hidden] {
  display: none;
}

.global-notification-dialog {
  --global-notification-tone: var(--wow-accent, #f43f46);
  position: relative;
  width: min(560px, 100%);
  max-height: min(820px, calc(100vh - 32px));
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--global-notification-tone) 28%, var(--wow-border, #d6e2ef));
  border-top: 4px solid var(--global-notification-tone);
  border-radius: var(--wow-radius-xl, 16px);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--global-notification-tone) 10%, transparent), transparent 46%),
    var(--wow-bg-elevated, #ffffff);
  color: var(--wow-text, #334155);
  box-shadow: var(--wow-shadow-xl, 0 24px 70px rgba(15, 23, 42, 0.22));
  padding: var(--wow-space-6, 24px);
}

.global-notification-close {
  position: absolute;
  top: var(--wow-space-4, 16px);
  right: var(--wow-space-4, 16px);
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--wow-border, #d6e2ef);
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-surface, #ffffff);
  color: var(--wow-text-muted, #64748b);
  cursor: pointer;
}

.global-notification-hero {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--wow-space-4, 16px);
  align-items: center;
  padding-right: 48px;
}

.global-notification-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--wow-radius-lg, 12px);
  background: color-mix(in srgb, var(--global-notification-tone) 15%, var(--wow-surface, #ffffff));
  color: var(--global-notification-tone);
}

.global-notification-media {
  display: grid;
  gap: var(--wow-space-3, 12px);
  margin-top: var(--wow-space-5, 20px);
}

.global-notification-image {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--wow-border, #d6e2ef);
  border-radius: var(--wow-radius-lg, 12px);
  background: var(--wow-surface-muted, #f8fafc);
}

.global-notification-image img {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: cover;
}

.global-notification-media .video-embed {
  border-color: color-mix(in srgb, var(--global-notification-tone) 26%, var(--wow-border, #d6e2ef));
}

.global-notification-dialog h2 {
  margin: 2px 0 0;
  color: var(--wow-text-strong, #0f172a);
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  line-height: 1.15;
}

.global-notification-message {
  margin: var(--wow-space-5, 20px) 0 0;
  color: var(--wow-text-muted, #64748b);
  font-size: var(--wow-text-base, 1rem);
  line-height: 1.6;
}

.global-notification-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--wow-space-3, 12px);
  margin-top: var(--wow-space-6, 24px);
  flex-wrap: wrap;
}

.global-notification-modal--success .global-notification-dialog {
  --global-notification-tone: #16a34a;
}

.global-notification-modal--warn .global-notification-dialog {
  --global-notification-tone: #f59e0b;
}

.global-notification-modal--danger .global-notification-dialog {
  --global-notification-tone: #ef4444;
}

.admin-notification-media-field {
  align-content: start;
}

.admin-notification-image-preview {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--wow-space-2, 8px);
  align-items: center;
  margin-top: var(--wow-space-2, 8px);
  color: var(--wow-text-muted, #64748b);
  font-size: var(--wow-text-sm, 0.875rem);
}

.admin-notification-image-preview img {
  width: 56px;
  height: 56px;
  border: 1px solid var(--wow-border, #d6e2ef);
  border-radius: var(--wow-radius-md, 8px);
  object-fit: cover;
}

@media (max-width: 560px) {
  .global-notification-modal {
    padding: var(--wow-space-4, 16px);
  }

  .global-notification-dialog {
    padding: var(--wow-space-5, 20px);
  }

  .global-notification-hero {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: var(--wow-space-3, 12px);
    padding-right: 40px;
  }

  .global-notification-icon {
    width: 42px;
    height: 42px;
  }

  .global-notification-actions {
    display: grid;
  }

  .global-notification-actions .wow-btn {
    width: 100%;
  }
}

/* Main content */
.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
  min-width: 0;
}

.section-heading {
  display: none;
}

.daily-dashboard,
.plan-grid,
.mini-summary,
.recipe-grid,
.routine-grid,
.quick-grid,
.tool-grid,
.module-grid,
.meals-layout,
.meals-workspace,
.meal-tools-grid,
.tracker-layout,
.tracker-layout.adjusted,
.form-grid,
.tracker-form,
.stack-form,
.nutrition-fields,
.exercise-image-grid {
  display: grid;
  gap: var(--wow-space-4, 16px);
}

.daily-dashboard,
.plan-grid,
.mini-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: var(--wow-space-5, 20px);
}

.plan-metrics {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.plan-grid.training-metrics-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.plan-overview {
  display: grid;
  gap: var(--wow-space-5, 20px);
  margin-bottom: var(--wow-space-6, 24px);
}

.progress-overview,
.training-overview {
  display: grid;
  gap: var(--wow-space-4, 16px);
  margin-bottom: var(--wow-space-5, 20px);
}

.diagnosis-form {
  display: grid;
  gap: var(--wow-space-4, 16px);
}

.diagnosis-card {
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-lg, 12px);
  background: var(--wow-bg-elevated, #0f172a);
  box-shadow: var(--wow-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.08));
}

.diagnosis-section {
  display: grid;
  gap: var(--wow-space-4, 16px);
  padding: var(--wow-space-5, 20px);
}

.diagnosis-section-heading {
  display: flex;
  gap: var(--wow-space-3, 12px);
  align-items: flex-start;
  padding-bottom: var(--wow-space-4, 16px);
  border-bottom: 1px solid var(--wow-border, #253043);
}

.diagnosis-section-heading > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-accent-soft, rgba(34, 211, 238, 0.12));
  color: var(--wow-accent, #22d3ee);
}

.diagnosis-section-heading svg {
  width: 18px;
  height: 18px;
}

.diagnosis-section-heading h3 {
  margin: 0;
  color: var(--wow-text-strong, #f9fafb);
  font-size: var(--wow-text-base, 1rem);
}

.diagnosis-section-heading p {
  margin: 4px 0 0;
  color: var(--wow-text-muted, #9ca3af);
  font-size: var(--wow-text-sm, 0.875rem);
  line-height: 1.45;
}

.diagnosis-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wow-space-4, 16px);
}

.diagnosis-grid--base {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.diagnosis-grid--measurements {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

input[readonly] {
  cursor: default;
  background: var(--wow-bg-elevated, #0f172a);
  color: var(--wow-text-muted, #9ca3af);
}

.multi-select-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wow-space-4, 16px);
  align-items: start;
}

.multi-choice-select {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wow-space-2, 8px);
  min-height: 44px;
  padding: var(--wow-space-2, 8px);
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-surface, #111827);
}

.multi-choice-select button {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--wow-border, #253043);
  border-radius: 999px;
  background: var(--wow-bg-elevated, #0f172a);
  color: var(--wow-text, #d1d5db);
  cursor: pointer;
  padding: 0 var(--wow-space-3, 12px);
  font-size: var(--wow-text-sm, 0.875rem);
}

.multi-choice-select button::before {
  content: "";
  width: 14px;
  height: 14px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--wow-border-strong, #374151);
  border-radius: 4px;
}

.multi-choice-select button.selected {
  border-color: var(--wow-accent, #22d3ee);
  background: var(--wow-accent-soft, rgba(34, 211, 238, 0.12));
  color: var(--wow-accent, #22d3ee);
}

.multi-choice-select button.selected::before {
  content: "✓";
  border-color: var(--wow-accent, #22d3ee);
  background: var(--wow-accent, #22d3ee);
  color: var(--wow-text-inverse, #031318);
  font-size: 10px;
  font-weight: var(--wow-weight-bold, 700);
}

.diagnosis-actions {
  display: flex;
  justify-content: flex-end;
  padding: 0 var(--wow-space-1, 4px);
}

.diagnosis-actions .primary-action {
  min-width: 220px;
}

.plan-metrics {
  margin-bottom: 0;
}

.plan-metrics .metric-card {
  min-height: 132px;
  padding: var(--wow-space-4, 16px);
}

.plan-metrics .metric-card .wow-stat__label {
  font-size: 0.68rem;
}

.plan-metrics .metric-card .wow-stat__value {
  font-size: clamp(1.25rem, 1.6vw, 1.65rem);
}

.plan-summary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.75fr);
  gap: var(--wow-space-4, 16px);
}

.plan-mode-shell,
.custom-plan-overview,
.custom-plan-card {
  display: grid;
  gap: var(--wow-space-3, 12px);
  padding: var(--wow-space-4, 16px);
}

.plan-mode-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wow-space-4, 16px);
}

.plan-mode-option {
  min-width: 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--wow-space-3, 12px);
  align-items: start;
  text-align: left;
  border: 1px solid var(--wow-border, #d6e2ef);
  border-radius: var(--wow-radius-lg, 12px);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--wow-accent, #0891b2) 7%, transparent), transparent 68%),
    var(--wow-bg-elevated, #fff);
  color: var(--wow-text, #334155);
  cursor: pointer;
  padding: var(--wow-space-5, 20px);
}

.plan-mode-option:hover {
  border-color: var(--wow-accent, #0891b2);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--wow-accent, #0891b2) 12%, transparent);
}

.plan-mode-option > span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-accent-soft, rgba(34, 211, 238, 0.12));
  color: var(--wow-accent, #0891b2);
}

.plan-mode-option strong,
.custom-plan-item strong {
  display: block;
  color: var(--wow-text-strong, #0f172a);
  font-size: var(--wow-text-base, 1rem);
}

.plan-mode-option small,
.plan-mode-hint,
.plan-mode-bar p,
.custom-plan-note,
.custom-plan-item span,
.custom-plan-item small,
.custom-plan-item p {
  color: var(--wow-text-muted, #64748b);
  line-height: 1.45;
}

.plan-mode-option small {
  grid-column: 2;
}

.plan-mode-hint,
.custom-plan-note {
  display: flex;
  gap: var(--wow-space-2, 8px);
  align-items: flex-start;
  margin: 0;
  border: 1px solid var(--wow-border, #d6e2ef);
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-surface, #f8fafc);
  padding: var(--wow-space-3, 12px);
}

.plan-mode-hint p,
.custom-plan-note p,
.custom-plan-item p {
  margin: 0;
}

.plan-mode-metrics,
.custom-plan-summary {
  margin-bottom: 0;
}

.plan-mode-bar {
  display: flex;
  justify-content: space-between;
  gap: var(--wow-space-4, 16px);
  align-items: center;
  margin-bottom: var(--wow-space-4, 16px);
  border: 1px solid var(--wow-border, #d6e2ef);
  border-radius: var(--wow-radius-lg, 12px);
  background: var(--wow-bg-elevated, #fff);
  padding: var(--wow-space-4, 16px);
}

.plan-mode-bar p {
  margin: var(--wow-space-2, 8px) 0 0;
}

.plan-mode-bar__actions {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--wow-space-2, 8px);
  justify-content: flex-end;
}

.plan-mode-bar__actions .wow-btn.is-active {
  border-color: var(--wow-accent, #0891b2);
  background: var(--wow-accent-soft, #e0f2fe);
  color: var(--wow-accent, #0891b2);
}

.custom-plan-shell {
  display: grid;
  gap: var(--wow-space-4, 16px);
}

.custom-plan-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wow-space-4, 16px);
}

.custom-plan-meta,
.custom-plan-form {
  display: grid;
  gap: var(--wow-space-3, 12px);
}

.custom-plan-meta {
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
}

.custom-plan-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.custom-plan-wide {
  grid-column: 1 / -1;
}

.custom-meal-card,
.custom-workout-card {
  align-content: start;
}

.custom-meal-form,
.custom-workout-form {
  grid-template-columns: 1fr;
  gap: var(--wow-space-2, 8px);
  align-content: start;
}

.custom-plan-section {
  display: grid;
  gap: var(--wow-space-2, 8px);
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--wow-accent, #0891b2) 12%, var(--wow-border, #d6e2ef));
  border-radius: var(--wow-radius-md, 8px);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--wow-accent, #0891b2) 5%, transparent), transparent 70%),
    var(--wow-bg-elevated, #fff);
  padding: var(--wow-space-2, 8px);
}

.custom-plan-section--schedule,
.custom-workout-section--schedule {
  grid-template-columns: minmax(120px, 0.8fr) minmax(130px, 0.8fr) minmax(0, 1fr);
}

.custom-workout-section--exercise {
  grid-template-columns: minmax(150px, 0.8fr) minmax(0, 1.2fr);
}

.custom-meal-section--source {
  grid-template-columns: minmax(140px, 0.8fr) minmax(0, 1.2fr);
}

.custom-meal-section--amount {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.custom-workout-section--metrics {
  grid-template-columns: repeat(5, minmax(86px, 1fr));
}

.custom-meal-form label,
.custom-workout-form label {
  gap: 5px;
}

.custom-meal-form input,
.custom-meal-form select,
.custom-workout-form input,
.custom-workout-form select {
  min-height: 36px;
  padding-inline: var(--wow-space-2, 8px);
}

.custom-meal-form small,
.custom-workout-form small {
  color: var(--wow-text-muted, #64748b);
  font-size: var(--wow-text-xs, 0.75rem);
  line-height: 1.35;
}

.custom-plan-note-field,
.custom-plan-submit,
.custom-workout-note,
.custom-workout-submit {
  width: 100%;
}

.custom-plan-submit,
.custom-workout-submit {
  min-height: 38px;
  margin-top: var(--wow-space-1, 4px);
}

.custom-plan-form textarea {
  min-height: 92px;
  resize: vertical;
}

.custom-plan-list {
  display: grid;
  gap: var(--wow-space-3, 12px);
}

.custom-plan-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--wow-space-3, 12px);
  align-items: start;
  border: 1px solid var(--wow-border, #d6e2ef);
  border-radius: var(--wow-radius-lg, 12px);
  background: var(--wow-surface, #fff);
  padding: var(--wow-space-4, 16px);
}

.custom-plan-item p {
  margin-top: var(--wow-space-2, 8px);
  color: var(--wow-text, #334155);
}

.custom-plan-item .muted {
  color: var(--wow-text-muted, #64748b);
}

.plan-mode-modal-content {
  display: grid;
  gap: var(--wow-space-4, 16px);
}

.plan-mode-modal-content > p {
  display: flex;
  gap: var(--wow-space-2, 8px);
  align-items: flex-start;
  margin: 0;
  color: var(--wow-text-muted, #64748b);
}

.weekly-review-panel,
.adherence-panel,
.registration-alerts-panel,
.plan-stage-panel,
.plan-level-panel,
.photo-compare-panel {
  display: grid;
  gap: var(--wow-space-4, 16px);
  padding: var(--wow-space-5, 20px);
  margin-bottom: var(--wow-space-4, 16px);
}

.weekly-review-grid,
.level-grid,
.plan-stage-grid,
.photo-compare-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wow-space-3, 12px);
}

.plan-stage-grid article,
.photo-compare-grid article {
  min-width: 0;
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-bg-elevated, #0f172a);
  padding: var(--wow-space-4, 16px);
}

.plan-stage-grid article > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  margin-bottom: var(--wow-space-3, 12px);
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-accent-soft, rgba(34, 211, 238, 0.12));
  color: var(--wow-accent, #22d3ee);
  font-weight: var(--wow-weight-bold, 700);
}

.plan-stage-grid strong,
.photo-compare-grid strong {
  color: var(--wow-text-strong, #f9fafb);
}

.plan-stage-grid p,
.photo-compare-grid span,
.review-list,
.adherence-panel > p {
  color: var(--wow-text-muted, #9ca3af);
  line-height: 1.5;
}

.review-list {
  display: grid;
  gap: var(--wow-space-2, 8px);
  margin: 0;
  padding-left: var(--wow-space-5, 20px);
}

.adherence-score {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--wow-space-3, 12px);
  align-items: center;
}

.adherence-score strong {
  color: var(--wow-text-strong, #f9fafb);
  font-size: var(--wow-text-2xl, 1.5rem);
}

.adherence-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--wow-space-2, 8px);
}

.adherence-days span {
  min-height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-bg-elevated, #0f172a);
  color: var(--wow-text-muted, #9ca3af);
  font-size: var(--wow-text-xs, 0.75rem);
  font-weight: var(--wow-weight-semibold, 600);
  text-transform: capitalize;
}

.adherence-days .is-low {
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
}

.adherence-days .is-partial {
  border-color: rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.1);
  color: #b45309;
}

.adherence-days .is-complete {
  border-color: rgba(34, 197, 94, 0.4);
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}

.photo-compare-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.photo-compare-grid header {
  display: flex;
  justify-content: space-between;
  gap: var(--wow-space-3, 12px);
  margin-bottom: var(--wow-space-3, 12px);
}

.registration-alerts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--wow-space-3, 12px);
}

.registration-alert {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--wow-space-3, 12px);
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-bg-elevated, #0f172a);
  padding: var(--wow-space-4, 16px);
}

.registration-alert > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-accent-soft, rgba(34, 211, 238, 0.12));
  color: var(--wow-accent, #22d3ee);
}

.registration-alert strong {
  color: var(--wow-text-strong, #f9fafb);
}

.registration-alert p,
.registration-alerts-footnote {
  color: var(--wow-text-muted, #9ca3af);
  line-height: 1.45;
}

.registration-alert--danger {
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.08);
}

.registration-alert--danger > span {
  background: rgba(239, 68, 68, 0.14);
  color: #ef4444;
}

.registration-alert--warn {
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.08);
}

.registration-alert--warn > span {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
}

.registration-alerts-footnote {
  margin: 0;
  font-size: var(--wow-text-sm, 0.875rem);
}

.target-measures-panel {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--wow-space-4, 16px);
  padding: var(--wow-space-5, 20px);
}

.target-measures-panel .card-heading {
  align-items: center;
  padding-bottom: var(--wow-space-4, 16px);
  border-bottom: 1px solid var(--wow-border, #253043);
}

.target-measures-panel .card-heading p {
  max-width: 920px;
}

.target-measure-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--wow-space-3, 12px);
}

.target-measure-card {
  --measure-tone: var(--wow-accent, #22d3ee);
  display: grid;
  gap: var(--wow-space-3, 12px);
  align-content: start;
  min-height: 178px;
  border: 1px solid var(--wow-border, #253043);
  border-top: 4px solid var(--measure-tone);
  border-radius: var(--wow-radius-lg, 12px);
  background: var(--wow-bg-elevated, #0f172a);
  padding: var(--wow-space-4, 16px);
}

.target-measure-card--good {
  --measure-tone: var(--wow-success, #16a34a);
}

.target-measure-card--warn {
  --measure-tone: var(--wow-warning, #f59e0b);
}

.target-measure-card--info {
  --measure-tone: var(--wow-accent, #22d3ee);
}

.target-measure-card__top {
  display: flex;
  justify-content: space-between;
  gap: var(--wow-space-3, 12px);
  align-items: flex-start;
}

.target-measure-card__top .metric-note {
  flex: 0 0 auto;
}

.target-measure-card strong,
.target-measure-card b {
  display: block;
  color: var(--wow-text-strong, #f9fafb);
}

.target-measure-card strong {
  font-size: var(--wow-text-base, 1rem);
}

.target-measure-card b {
  font-size: var(--wow-text-lg, 1.125rem);
}

.target-measure-values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wow-space-3, 12px);
}

.target-measure-values > div {
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-surface, #111827);
  padding: var(--wow-space-3, 12px);
}

.target-measure-card span:not(.metric-note),
.target-measure-card small,
.target-measure-card p {
  display: block;
  color: var(--wow-text-muted, #9ca3af);
  font-size: var(--wow-text-xs, 0.75rem);
  line-height: 1.4;
}

.target-measure-card p {
  margin: 0;
}

.target-measure-rail {
  height: 8px;
  overflow: hidden;
  border-radius: var(--wow-radius-full, 999px);
  background: color-mix(in srgb, var(--measure-tone) 12%, var(--wow-bg, #0b0f1a));
}

.target-measure-rail span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--measure-tone);
}

.target-measures-footnote {
  margin: 0;
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-surface, #111827);
  color: var(--wow-text-muted, #9ca3af);
  font-size: var(--wow-text-sm, 0.875rem);
  line-height: 1.5;
  padding: var(--wow-space-3, 12px);
}

.goal-projection-panel {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--wow-space-4, 16px);
  margin-bottom: var(--wow-space-5, 20px);
  padding: var(--wow-space-5, 20px);
}

.goal-projection-panel .card-heading {
  align-items: center;
  padding-bottom: var(--wow-space-4, 16px);
  border-bottom: 1px solid var(--wow-border, #253043);
}

.goal-projection-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wow-space-3, 12px);
}

.goal-projection-highlight {
  --projection-color: var(--wow-accent, #0891b2);
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--projection-color) 22%, var(--wow-border, #d6e2ef));
  border-radius: var(--wow-radius-lg, 12px);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--projection-color) 9%, transparent), transparent 68%),
    var(--wow-bg-elevated, #fff);
  padding: var(--wow-space-4, 16px);
}

.goal-projection-highlight--good {
  --projection-color: var(--wow-success, #16a34a);
}

.goal-projection-highlight--warn {
  --projection-color: var(--wow-warning, #f59e0b);
}

.goal-projection-highlight--info,
.goal-projection-highlight--accent {
  --projection-color: var(--wow-accent, #0891b2);
}

.goal-projection-highlight span,
.goal-projection-card dt {
  display: block;
  color: var(--wow-text-muted, #64748b);
  font-size: var(--wow-text-xs, 0.75rem);
  font-weight: var(--wow-weight-semibold, 600);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.goal-projection-highlight strong {
  display: block;
  margin-top: var(--wow-space-2, 8px);
  color: var(--wow-text-strong, #0f172a);
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  line-height: 1.1;
}

.goal-projection-highlight small,
.goal-projection-card p,
.goal-projection-note {
  color: var(--wow-text-muted, #64748b);
  line-height: 1.45;
}

.goal-projection-highlight small {
  display: block;
  margin-top: var(--wow-space-2, 8px);
}

.goal-projection-timeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wow-space-3, 12px);
}

.goal-projection-card {
  --projection-color: var(--wow-accent, #0891b2);
  min-width: 0;
  display: grid;
  gap: var(--wow-space-3, 12px);
  align-content: start;
  border: 1px solid var(--wow-border, #d6e2ef);
  border-top: 4px solid var(--projection-color);
  border-radius: var(--wow-radius-lg, 12px);
  background: var(--wow-bg-elevated, #fff);
  padding: var(--wow-space-4, 16px);
}

.goal-projection-card--start {
  --projection-color: #0ea5e9;
}

.goal-projection-card--base {
  --projection-color: #14b8a6;
}

.goal-projection-card--trend {
  --projection-color: #8b5cf6;
}

.goal-projection-card--visible {
  --projection-color: #f59e0b;
}

.goal-projection-card--strong {
  --projection-color: #16a34a;
}

.goal-projection-card header {
  display: flex;
  justify-content: space-between;
  gap: var(--wow-space-3, 12px);
  align-items: center;
}

.goal-projection-card header strong {
  color: var(--wow-text-strong, #0f172a);
  font-size: var(--wow-text-lg, 1.125rem);
}

.goal-projection-card header span {
  flex: 0 0 auto;
  border-radius: var(--wow-radius-full, 999px);
  background: color-mix(in srgb, var(--projection-color) 14%, transparent);
  color: var(--projection-color);
  font-size: var(--wow-text-xs, 0.75rem);
  font-weight: var(--wow-weight-semibold, 600);
  padding: 4px 8px;
}

.goal-projection-card dl {
  display: grid;
  gap: var(--wow-space-2, 8px);
  margin: 0;
}

.goal-projection-card dl > div {
  min-width: 0;
  border: 1px solid var(--wow-border, #d6e2ef);
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-surface, #f8fafc);
  padding: var(--wow-space-3, 12px);
}

.goal-projection-card dd {
  margin: 4px 0 0;
  color: var(--wow-text-strong, #0f172a);
  font-weight: var(--wow-weight-bold, 700);
}

.goal-projection-card p,
.goal-projection-note {
  margin: 0;
}

.goal-projection-guide {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--wow-space-2, 8px);
  align-items: flex-start;
  border: 1px solid color-mix(in srgb, var(--projection-color) 18%, var(--wow-border, #d6e2ef));
  border-radius: var(--wow-radius-md, 8px);
  background: color-mix(in srgb, var(--projection-color) 8%, var(--wow-surface, #ffffff));
  color: var(--wow-text, #334155);
  font-size: var(--wow-text-sm, 0.875rem);
  line-height: 1.4;
  padding: var(--wow-space-2, 8px);
}

.goal-projection-guide svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--projection-color);
}

.goal-projection-guide span {
  min-width: 0;
  font-weight: var(--wow-weight-semibold, 600);
}

.goal-projection-guide small {
  grid-column: 2;
  display: block;
  color: var(--wow-text-muted, #64748b);
  font-size: var(--wow-text-xs, 0.75rem);
}

.goal-projection-note {
  border: 1px solid var(--wow-border, #d6e2ef);
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-surface, #f8fafc);
  padding: var(--wow-space-3, 12px);
  font-size: var(--wow-text-sm, 0.875rem);
}

.target-date-panel {
  --target-date-color: var(--wow-accent, #f43f46);
  display: grid;
  gap: var(--wow-space-4, 16px);
  border-color: color-mix(in srgb, var(--target-date-color) 28%, var(--wow-border, #d6e2ef));
  border-left: 4px solid var(--target-date-color);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--target-date-color) 8%, transparent), transparent 58%),
    var(--wow-surface, #ffffff);
  padding: var(--wow-space-4, 16px);
}

.target-date-panel--good {
  --target-date-color: #16a34a;
}

.target-date-panel--warn {
  --target-date-color: #f59e0b;
}

.target-date-panel--danger {
  --target-date-color: #ef4444;
}

.target-date-panel .card-heading {
  align-items: center;
}

.target-date-panel .card-heading > span {
  background: color-mix(in srgb, var(--target-date-color) 14%, transparent);
  color: var(--target-date-color);
}

.target-date-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--wow-space-3, 12px);
}

.target-date-grid > div {
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--target-date-color) 18%, var(--wow-border, #d6e2ef));
  border-radius: var(--wow-radius-md, 8px);
  background: color-mix(in srgb, var(--target-date-color) 5%, var(--wow-bg-elevated, #ffffff));
  padding: var(--wow-space-3, 12px);
}

.target-date-grid span {
  display: block;
  color: var(--wow-text-muted, #64748b);
  font-size: var(--wow-text-xs, 0.75rem);
  font-weight: var(--wow-weight-semibold, 600);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.target-date-grid strong {
  display: block;
  margin-top: var(--wow-space-1, 4px);
  color: var(--wow-text-strong, #0f172a);
  font-size: var(--wow-text-lg, 1.125rem);
  line-height: 1.2;
}

.target-date-grid small {
  display: block;
  margin-top: var(--wow-space-2, 8px);
  color: var(--wow-text-muted, #64748b);
  line-height: 1.4;
}

.monthly-progression-card {
  --progression-tone: var(--wow-accent, #22d3ee);
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(220px, 0.7fr);
  gap: var(--wow-space-4, 16px);
  border-top: 4px solid var(--progression-tone);
  padding: var(--wow-space-5, 20px);
}

.monthly-progression-card--good {
  --progression-tone: var(--wow-success, #16a34a);
}

.monthly-progression-card--warn {
  --progression-tone: var(--wow-warning, #f59e0b);
}

.monthly-progression-card--info {
  --progression-tone: var(--wow-accent, #22d3ee);
}

.monthly-progression-main {
  display: grid;
  gap: var(--wow-space-3, 12px);
}

.monthly-progression-card .card-heading {
  margin-bottom: 0;
}

.monthly-progression-card .card-heading > span {
  background: color-mix(in srgb, var(--progression-tone) 14%, transparent);
  color: var(--progression-tone);
}

.monthly-progression-card h4 {
  margin: 0;
  color: var(--wow-text-strong, #f9fafb);
  font-size: var(--wow-text-lg, 1.125rem);
}

.monthly-progression-card ul {
  display: grid;
  gap: var(--wow-space-2, 8px);
  margin: 0;
  padding-left: 18px;
  color: var(--wow-text, #d1d5db);
  line-height: 1.5;
}

.monthly-progression-nutrition {
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--progression-tone) 24%, var(--wow-border, #253043));
  border-radius: var(--wow-radius-md, 8px);
  background: color-mix(in srgb, var(--progression-tone) 8%, var(--wow-surface, #111827));
  color: var(--wow-text, #d1d5db);
  padding: var(--wow-space-3, 12px);
  line-height: 1.45;
}

.monthly-progression-meter {
  height: 8px;
  overflow: hidden;
  border-radius: var(--wow-radius-full, 999px);
  background: color-mix(in srgb, var(--progression-tone) 12%, var(--wow-bg, #0b0f1a));
}

.monthly-progression-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--progression-tone);
}

.monthly-progression-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wow-space-3, 12px);
  align-content: start;
}

.monthly-progression-stats div {
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-surface, #111827);
  padding: var(--wow-space-3, 12px);
}

.monthly-progression-stats span {
  display: block;
  color: var(--wow-text-muted, #9ca3af);
  font-size: var(--wow-text-xs, 0.75rem);
  font-weight: var(--wow-weight-semibold, 600);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.monthly-progression-stats strong {
  display: block;
  margin-top: 5px;
  color: var(--wow-text-strong, #f9fafb);
  font-size: var(--wow-text-xl, 1.25rem);
}

.training-time-card {
  --training-time-tone: var(--wow-accent, #22d3ee);
  display: grid;
  gap: var(--wow-space-4, 16px);
  border-left: 4px solid var(--training-time-tone);
  padding: var(--wow-space-5, 20px);
}

.training-time-card--good {
  --training-time-tone: var(--wow-success, #16a34a);
}

.training-time-card--warn {
  --training-time-tone: var(--wow-warning, #f59e0b);
}

.training-time-card--info {
  --training-time-tone: var(--wow-accent, #22d3ee);
}

.training-time-card .card-heading {
  margin-bottom: 0;
}

.training-time-card .card-heading > span {
  background: color-mix(in srgb, var(--training-time-tone) 14%, transparent);
  color: var(--training-time-tone);
}

.training-time-body {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
  gap: var(--wow-space-4, 16px);
  align-items: stretch;
}

.training-time-window {
  display: grid;
  align-content: center;
  gap: var(--wow-space-2, 8px);
  border: 1px solid color-mix(in srgb, var(--training-time-tone) 28%, var(--wow-border, #253043));
  border-radius: var(--wow-radius-lg, 12px);
  background: color-mix(in srgb, var(--training-time-tone) 8%, var(--wow-surface, #111827));
  padding: var(--wow-space-4, 16px);
}

.training-time-window span {
  color: var(--wow-text-muted, #9ca3af);
  font-size: var(--wow-text-xs, 0.75rem);
  font-weight: var(--wow-weight-semibold, 600);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.training-time-window strong {
  color: var(--wow-text-strong, #f9fafb);
  font-size: var(--wow-text-xl, 1.25rem);
  line-height: 1.2;
}

.training-time-body h4 {
  margin: 0 0 var(--wow-space-2, 8px);
  color: var(--wow-text-strong, #f9fafb);
  font-size: var(--wow-text-base, 1rem);
}

.training-time-body ul {
  display: grid;
  gap: var(--wow-space-2, 8px);
  margin: 0;
  padding-left: 18px;
  color: var(--wow-text, #d1d5db);
  line-height: 1.5;
}

.training-time-footer {
  margin: 0;
  border-top: 1px solid var(--wow-border, #253043);
  color: var(--wow-text-muted, #9ca3af);
  font-size: var(--wow-text-sm, 0.875rem);
  line-height: 1.5;
  padding-top: var(--wow-space-3, 12px);
}

.progress-chart-card,
.progress-recommendation {
  margin-bottom: var(--wow-space-5, 20px);
}

.progress-empty-banner {
  margin-bottom: var(--wow-space-4, 16px);
}

.progress-daily-grid {
  margin-bottom: var(--wow-space-6, 24px);
}

.ranking-privacy-card {
  display: grid;
  gap: var(--wow-space-4, 16px);
  margin-bottom: var(--wow-space-5, 20px);
  padding: var(--wow-space-5, 20px);
}

.ranking-privacy-card .card-heading {
  margin-bottom: 0;
}

.ranking-privacy-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wow-space-3, 12px);
}

.ranking-privacy-options button {
  display: flex;
  align-items: center;
  gap: var(--wow-space-3, 12px);
  border: 1px solid var(--wow-border, #d6e2ef);
  border-radius: var(--wow-radius-lg, 12px);
  background: var(--wow-bg-elevated, #f8fbff);
  color: var(--wow-text, #334155);
  cursor: pointer;
  min-height: 78px;
  padding: var(--wow-space-4, 16px);
  text-align: left;
  transition:
    border-color var(--wow-transition-base, 180ms ease),
    background var(--wow-transition-base, 180ms ease),
    box-shadow var(--wow-transition-base, 180ms ease);
}

.ranking-privacy-options button > svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  color: var(--wow-accent, #f43f46);
}

.ranking-privacy-options strong {
  display: block;
  color: var(--wow-text-strong, #0f172a);
}

.ranking-privacy-options button > span {
  display: grid;
  gap: 3px;
}

.ranking-privacy-options small,
.ranking-privacy-status {
  color: var(--wow-text-muted, #64748b);
  line-height: 1.45;
}

.ranking-privacy-options button.is-active {
  border-color: var(--wow-accent, #f43f46);
  background: color-mix(in srgb, var(--wow-accent, #f43f46) 8%, var(--wow-surface, #ffffff));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wow-accent, #f43f46) 12%, transparent);
}

.ranking-privacy-status {
  margin: 0;
  font-size: var(--wow-text-sm, 0.875rem);
}

@media (max-width: 700px) {
  .ranking-privacy-options {
    grid-template-columns: 1fr;
  }
}

.progress-empty-banner .rich-empty {
  min-height: 118px;
  padding: var(--wow-space-5, 20px);
}

.progress-empty-banner .rich-empty span {
  width: 34px;
  height: 34px;
}

.progress-empty-banner .rich-empty svg {
  width: 18px;
  height: 18px;
}

.progress-measures-grid {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.82fr);
  align-items: start;
}

.progress-recommendation {
  display: grid;
  gap: var(--wow-space-3, 12px);
  padding: var(--wow-space-5, 20px);
}

.progress-recommendation p {
  margin: 0;
  color: var(--wow-text, #d1d5db);
  line-height: 1.55;
}

.progress-status-panel {
  --progress-status-tone: var(--wow-accent, #0891b2);
  display: grid;
  gap: var(--wow-space-4, 16px);
  margin-bottom: var(--wow-space-5, 20px);
  padding: var(--wow-space-5, 20px);
  border-top: 4px solid var(--progress-status-tone);
}

.progress-status-panel--good,
.progress-status-card--good,
.progress-trend-badge--good,
.body-log-item--good {
  --progress-status-tone: #16a34a;
}

.progress-status-panel--stable,
.progress-status-card--stable,
.progress-trend-badge--stable,
.body-log-item--stable {
  --progress-status-tone: #0ea5e9;
}

.progress-status-panel--danger,
.progress-status-card--danger,
.progress-trend-badge--danger,
.body-log-item--danger {
  --progress-status-tone: #ef4444;
}

.progress-status-panel--info,
.progress-status-card--info,
.progress-trend-badge--info,
.body-log-item--info {
  --progress-status-tone: var(--wow-text-muted, #64748b);
}

.progress-status-panel .card-heading {
  margin-bottom: 0;
}

.progress-status-panel .card-heading > span {
  background: color-mix(in srgb, var(--progress-status-tone) 14%, transparent);
  color: var(--progress-status-tone);
}

.progress-status-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wow-space-2, 8px);
}

.progress-status-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--wow-space-3, 12px);
}

.progress-status-card {
  --progress-status-tone: var(--wow-accent, #0891b2);
  display: grid;
  gap: var(--wow-space-3, 12px);
  align-content: start;
  min-height: 190px;
  padding: var(--wow-space-4, 16px);
  border: 1px solid color-mix(in srgb, var(--progress-status-tone) 28%, var(--wow-border, #d6e2ef));
  border-left: 4px solid var(--progress-status-tone);
  border-radius: var(--wow-radius-lg, 12px);
  background: color-mix(in srgb, var(--progress-status-tone) 7%, var(--wow-surface, #ffffff));
}

.progress-status-card header,
.body-log-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--wow-space-3, 12px);
}

.progress-status-card header > div {
  min-width: 0;
}

.progress-status-card strong,
.progress-status-card b {
  color: var(--wow-text-strong, #0f172a);
}

.progress-status-card small,
.progress-status-card span,
.progress-status-card p {
  color: var(--wow-text-muted, #64748b);
}

.progress-status-card p {
  margin: 0;
  line-height: 1.45;
}

.progress-share-card {
  display: grid;
  gap: var(--wow-space-4, 16px);
  margin-bottom: var(--wow-space-5, 20px);
  padding: var(--wow-space-5, 20px);
}

.progress-share-card .card-heading {
  margin-bottom: 0;
}

.progress-share-preview {
  border: 1px solid color-mix(in srgb, var(--wow-accent, #0891b2) 24%, var(--wow-border, #d6e2ef));
  border-radius: var(--wow-radius-lg, 12px);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--wow-accent, #0891b2) 10%, transparent), transparent 56%),
    var(--wow-bg-elevated, #0f172a);
  padding: var(--wow-space-4, 16px);
}

.progress-share-preview strong {
  display: block;
  margin-bottom: 4px;
  color: var(--wow-text-strong, #f9fafb);
}

.progress-share-preview p,
.progress-share-status {
  margin: 0;
  color: var(--wow-text-muted, #9ca3af);
  line-height: 1.45;
}

.progress-share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wow-space-3, 12px);
}

.progress-share-actions .wow-btn {
  min-width: 160px;
}

.progress-share-modal-content {
  display: grid;
  gap: var(--wow-space-4, 16px);
}

.progress-share-modal-hero {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: var(--wow-space-3, 12px);
  align-items: start;
  border: 1px solid color-mix(in srgb, var(--wow-accent, #0891b2) 22%, var(--wow-border, #d6e2ef));
  border-radius: var(--wow-radius-lg, 12px);
  background: color-mix(in srgb, var(--wow-accent, #0891b2) 7%, var(--wow-surface, #ffffff));
  padding: var(--wow-space-4, 16px);
}

.progress-share-modal-hero > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--wow-radius-md, 8px);
  background: color-mix(in srgb, var(--wow-accent, #0891b2) 14%, transparent);
  color: var(--wow-accent, #0891b2);
}

.progress-share-modal-hero strong,
.progress-share-modal-preview strong {
  display: block;
  color: var(--wow-text-strong, #0f172a);
  line-height: 1.3;
}

.progress-share-modal-hero p,
.progress-share-modal-preview p,
.progress-share-modal-note {
  margin: 4px 0 0;
  color: var(--wow-text-muted, #64748b);
  line-height: 1.45;
}

.progress-share-modal-preview {
  border: 1px solid var(--wow-border, #d6e2ef);
  border-radius: var(--wow-radius-md, 8px);
  padding: var(--wow-space-3, 12px);
}

.progress-share-photo-toggle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--wow-space-3, 12px);
  align-items: start;
  border: 1px solid color-mix(in srgb, #8b5cf6 24%, var(--wow-border, #d6e2ef));
  border-radius: var(--wow-radius-md, 8px);
  background: color-mix(in srgb, #8b5cf6 6%, var(--wow-surface, #ffffff));
  padding: var(--wow-space-3, 12px);
  cursor: pointer;
}

.progress-share-photo-toggle input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: #8b5cf6;
}

.progress-share-photo-toggle strong,
.progress-share-photo-toggle small {
  display: block;
}

.progress-share-photo-toggle small {
  margin-top: 3px;
  color: var(--wow-text-muted, #64748b);
  line-height: 1.4;
}

.progress-share-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wow-space-3, 12px);
}

.progress-share-photo-grid figure {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--wow-border, #d6e2ef);
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-surface, #ffffff);
  margin: 0;
}

.progress-share-photo-grid img {
  width: 100%;
  aspect-ratio: 4 / 5;
  display: block;
  object-fit: cover;
  background: var(--wow-bg-subtle, #eff6fb);
}

.progress-share-photo-grid figcaption {
  padding: var(--wow-space-2, 8px);
  color: var(--wow-text-muted, #64748b);
  font-size: var(--wow-text-xs, 0.75rem);
  line-height: 1.3;
}

.progress-share-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wow-space-3, 12px);
}

.progress-share-network-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wow-space-3, 12px);
}

.progress-share-network {
  --share-network-color: var(--wow-accent, #0891b2);
  min-height: 96px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: var(--wow-space-3, 12px);
  align-items: start;
  border: 1px solid color-mix(in srgb, var(--share-network-color) 26%, var(--wow-border, #d6e2ef));
  border-radius: var(--wow-radius-lg, 12px);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--share-network-color) 10%, transparent), transparent 62%),
    var(--wow-surface, #ffffff);
  color: var(--wow-text-strong, #0f172a);
  padding: var(--wow-space-3, 12px);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition:
    border-color var(--wow-transition-fast, 120ms ease),
    transform var(--wow-transition-fast, 120ms ease),
    background var(--wow-transition-fast, 120ms ease);
}

.progress-share-network:hover,
.progress-share-network:focus-visible {
  border-color: var(--share-network-color);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--share-network-color) 16%, transparent), transparent 62%),
    var(--wow-surface, #ffffff);
  outline: none;
  transform: translateY(-1px);
}

.progress-share-network > span {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--wow-radius-md, 8px);
  background: color-mix(in srgb, var(--share-network-color) 14%, transparent);
  color: var(--share-network-color);
}

.progress-share-network strong,
.progress-share-network small {
  display: block;
  min-width: 0;
}

.progress-share-network small {
  margin-top: 4px;
  color: var(--wow-text-muted, #64748b);
  font-size: var(--wow-text-xs, 0.75rem);
  line-height: 1.4;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.progress-share-network--facebook {
  --share-network-color: #1877f2;
}

.progress-share-network--instagram {
  --share-network-color: #c026d3;
}

.progress-share-network--whatsapp {
  --share-network-color: #16a34a;
}

.progress-share-network--native {
  --share-network-color: #0891b2;
}

.dashboard-rewards-card,
.rewards-hero,
.reward-mission-card,
.reward-achievements-section {
  display: grid;
  gap: var(--wow-space-4, 16px);
  padding: var(--wow-space-5, 20px);
}

.dashboard-rewards-card {
  border-color: color-mix(in srgb, #f59e0b 28%, var(--wow-border, #d6e2ef));
  background:
    linear-gradient(135deg, color-mix(in srgb, #f59e0b 8%, transparent), transparent 55%),
    var(--wow-surface, #ffffff);
}

.reward-dashboard-actions,
.rewards-module,
.reward-missions-grid,
.reward-achievements-grid {
  display: grid;
  gap: var(--wow-space-4, 16px);
}

.reward-dashboard-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wow-space-3, 12px);
}

.rewards-hero {
  border-color: color-mix(in srgb, #f59e0b 34%, var(--wow-border, #d6e2ef));
  background:
    linear-gradient(135deg, color-mix(in srgb, #f59e0b 11%, transparent), transparent 58%),
    var(--wow-surface, #ffffff);
}

.rewards-hero-main {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: var(--wow-space-4, 16px);
  align-items: center;
}

.rewards-hero-main > span {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: var(--wow-radius-lg, 12px);
  background: color-mix(in srgb, #f59e0b 18%, transparent);
  color: #d97706;
}

.rewards-hero-main svg {
  width: 28px;
  height: 28px;
}

.rewards-hero-main h3 {
  margin: 0;
  color: var(--wow-text-strong, #0f172a);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
}

.rewards-hero-main p {
  margin: 4px 0 0;
  color: var(--wow-text-muted, #52677c);
}

.rewards-hero-main small {
  display: block;
  margin-top: 4px;
  color: var(--wow-text-muted, #52677c);
  line-height: 1.45;
}

.reward-level-meter {
  display: grid;
  gap: var(--wow-space-2, 8px);
}

.reward-level-meter > span {
  color: var(--wow-text-muted, #52677c);
  font-size: var(--wow-text-sm, 0.875rem);
}

.reward-level-meter .meter div {
  background: linear-gradient(90deg, #14b8a6, #f59e0b);
}

.reward-missions-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.reward-levels-section {
  display: grid;
  gap: var(--wow-space-4, 16px);
  padding: var(--wow-space-5, 20px);
}

.reward-maintenance-card {
  --maintenance-color: #16a34a;
  display: grid;
  gap: var(--wow-space-4, 16px);
  border-color: color-mix(in srgb, var(--maintenance-color) 28%, var(--wow-border, #d6e2ef));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--maintenance-color) 8%, transparent), transparent 58%),
    var(--wow-surface, #ffffff);
  padding: var(--wow-space-5, 20px);
}

.reward-maintenance-card--warn {
  --maintenance-color: #f59e0b;
}

.reward-maintenance-card--danger {
  --maintenance-color: #ef4444;
}

.reward-maintenance-card--info {
  --maintenance-color: #0891b2;
}

.reward-maintenance-card .card-heading > span {
  background: color-mix(in srgb, var(--maintenance-color) 14%, transparent);
  color: var(--maintenance-color);
}

.reward-maintenance-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--wow-space-2, 8px);
}

.reward-maintenance-list span {
  min-width: 0;
  display: flex;
  gap: var(--wow-space-2, 8px);
  align-items: flex-start;
  border: 1px solid color-mix(in srgb, var(--maintenance-color) 20%, var(--wow-border, #d6e2ef));
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-bg-elevated, #ffffff);
  color: var(--wow-text-muted, #52677c);
  line-height: 1.45;
  padding: var(--wow-space-3, 12px);
}

.reward-maintenance-list svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--maintenance-color);
}

.reward-levels-track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--wow-space-3, 12px);
}

.reward-level-card {
  --level-color: #0891b2;
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-areas:
    "icon title"
    "description description"
    "range range"
    "status status";
  gap: var(--wow-space-3, 12px);
  align-content: start;
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--level-color) 30%, var(--wow-border, #d6e2ef));
  border-radius: var(--wow-radius-lg, 12px);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--level-color) 11%, transparent), transparent 64%),
    var(--wow-surface, #ffffff);
  padding: var(--wow-space-4, 16px);
}

.reward-level-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--level-color);
  opacity: 0.95;
}

.reward-level-card > span {
  grid-area: icon;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--wow-radius-md, 8px);
  background: color-mix(in srgb, var(--level-color) 18%, white);
  color: var(--level-color);
}

.reward-level-card-title,
.reward-level-card strong,
.reward-level-card small,
.reward-level-card p {
  min-width: 0;
}

.reward-level-card-title {
  grid-area: title;
  display: grid;
  align-content: center;
  gap: 3px;
}

.reward-level-card small {
  display: block;
  color: var(--level-color);
  font-size: var(--wow-text-xs, 0.75rem);
  font-weight: var(--wow-weight-bold, 700);
  text-transform: uppercase;
}

.reward-level-card strong {
  display: block;
  margin-top: 2px;
  color: var(--wow-text-strong, #0f172a);
  font-size: var(--wow-text-lg, 1.125rem);
}

.reward-level-card p {
  grid-area: description;
  margin: var(--wow-space-2, 8px) 0 0;
  color: var(--wow-text-muted, #52677c);
  line-height: 1.45;
}

.reward-level-card em,
.reward-level-card b {
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--wow-radius-full, 999px);
  font-size: var(--wow-text-xs, 0.75rem);
  font-style: normal;
  line-height: 1.2;
  padding: 5px 9px;
}

.reward-level-card em {
  grid-area: range;
  background: color-mix(in srgb, var(--level-color) 7%, var(--wow-bg-subtle, #eff6fb));
  color: var(--wow-text-muted, #52677c);
}

.reward-level-card b {
  grid-area: status;
  background: color-mix(in srgb, var(--level-color) 14%, white);
  color: var(--level-color);
}

.reward-level-card.is-current {
  box-shadow: 0 14px 34px color-mix(in srgb, var(--level-color) 18%, transparent);
}

.reward-level-card.is-held-back {
  border-style: dashed;
  opacity: 0.86;
}

.reward-level-card.is-held-back b {
  background: color-mix(in srgb, #f59e0b 13%, transparent);
  color: #b45309;
}

.reward-level-card.is-locked {
  opacity: 0.72;
}

.reward-level-card--start {
  --level-color: #8a6a45;
}

.reward-level-card--steady {
  --level-color: #16a34a;
}

.reward-level-card--progress {
  --level-color: #0b63ce;
}

.reward-level-card--disciplined {
  --level-color: #d97706;
}

.reward-level-card--advanced {
  --level-color: #6d28d9;
}

.reward-level-card--unstoppable {
  --level-color: #b91c1c;
}

.reward-ranking-card {
  display: grid;
  gap: var(--wow-space-4, 16px);
  padding: var(--wow-space-5, 20px);
  border-color: color-mix(in srgb, #0891b2 28%, var(--wow-border, #d6e2ef));
  background:
    linear-gradient(135deg, color-mix(in srgb, #0891b2 8%, transparent), transparent 62%),
    var(--wow-surface, #ffffff);
}

.ranking-list {
  display: grid;
  gap: var(--wow-space-2, 8px);
}

.ranking-row {
  --ranking-level-color: #0891b2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px 70px;
  align-items: center;
  gap: var(--wow-space-3, 12px);
  border: 1px solid color-mix(in srgb, var(--ranking-level-color) 28%, var(--wow-border, #d6e2ef));
  border-radius: var(--wow-radius-lg, 12px);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--ranking-level-color) 10%, transparent), transparent 72%),
    var(--wow-bg-elevated, #ffffff);
  min-height: 58px;
  padding: 8px var(--wow-space-3, 12px);
}

.ranking-row--top-1 {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--ranking-level-color) 88%, transparent);
}

.ranking-row--top-2 {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--ranking-level-color) 58%, transparent);
}

.ranking-row--top-3 {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--ranking-level-color) 42%, transparent);
}

.ranking-row--level-start {
  --ranking-level-color: #8a6a45;
}

.ranking-row--level-steady {
  --ranking-level-color: #16a34a;
}

.ranking-row--level-progress {
  --ranking-level-color: #0b63ce;
}

.ranking-row--level-disciplined {
  --ranking-level-color: #d97706;
}

.ranking-row--level-advanced {
  --ranking-level-color: #6d28d9;
}

.ranking-row--level-unstoppable {
  --ranking-level-color: #b91c1c;
}

.ranking-position {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--wow-radius-md, 8px);
  background: color-mix(in srgb, var(--ranking-level-color) 14%, transparent);
  color: var(--ranking-level-color);
  font-weight: var(--wow-weight-bold, 700);
}

.ranking-main {
  min-width: 0;
  display: grid;
  grid-template-columns: 40px 36px minmax(0, 1fr);
  align-items: center;
  gap: var(--wow-space-3, 12px);
}

.ranking-level-emblem {
  --ranking-level-color: #0891b2;
  min-width: 0;
  display: block;
}

.ranking-level-emblem > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--wow-radius-md, 8px);
  background: color-mix(in srgb, var(--ranking-level-color) 15%, transparent);
  color: var(--ranking-level-color);
}

.ranking-level-emblem svg {
  width: 17px;
  height: 17px;
}

.ranking-level-emblem--start {
  --ranking-level-color: #8a6a45;
}

.ranking-main--start {
  --ranking-level-color: #8a6a45;
}

.ranking-level-emblem--steady {
  --ranking-level-color: #16a34a;
}

.ranking-main--steady {
  --ranking-level-color: #16a34a;
}

.ranking-level-emblem--progress {
  --ranking-level-color: #0b63ce;
}

.ranking-main--progress {
  --ranking-level-color: #0b63ce;
}

.ranking-level-emblem--disciplined {
  --ranking-level-color: #d97706;
}

.ranking-main--disciplined {
  --ranking-level-color: #d97706;
}

.ranking-level-emblem--advanced {
  --ranking-level-color: #6d28d9;
}

.ranking-main--advanced {
  --ranking-level-color: #6d28d9;
}

.ranking-level-emblem--unstoppable {
  --ranking-level-color: #b91c1c;
}

.ranking-main--unstoppable {
  --ranking-level-color: #b91c1c;
}

.ranking-main > div:last-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.ranking-main > div:last-child strong,
.ranking-main > div:last-child span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-main > div:last-child strong {
  color: var(--wow-text-strong, #0f172a);
}

.ranking-main > div:last-child span,
.ranking-achievements {
  color: var(--wow-text-muted, #52677c);
  font-size: var(--wow-text-xs, 0.75rem);
}

.ranking-main > div:last-child span {
  color: var(--ranking-level-color, var(--wow-text-muted, #52677c));
  font-weight: var(--wow-weight-bold, 700);
  text-transform: uppercase;
}

.ranking-achievements {
  min-width: 84px;
  text-align: center;
}

.ranking-points {
  display: grid;
  justify-items: end;
  color: var(--wow-accent, #0891b2);
}

.ranking-points strong {
  color: var(--wow-text-strong, #0f172a);
  font-size: var(--wow-text-lg, 1.125rem);
  line-height: 1;
}

.ranking-points span {
  color: var(--wow-text-muted, #52677c);
  font-size: var(--wow-text-xs, 0.75rem);
  text-transform: uppercase;
}

.reward-mission-card {
  align-content: start;
}

.reward-mission-count {
  width: fit-content;
  border-radius: 999px;
  background: var(--wow-accent-soft, #e0f2fe);
  color: var(--wow-accent, #0891b2);
  font-size: var(--wow-text-sm, 0.875rem);
  font-weight: var(--wow-weight-bold, 700);
  padding: 5px 10px;
}

.reward-mission-list {
  display: grid;
  gap: var(--wow-space-2, 8px);
}

.reward-mission-item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: var(--wow-space-2, 8px);
  align-items: center;
  border: 1px solid var(--wow-border, #d6e2ef);
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-bg-elevated, #ffffff);
  color: var(--wow-text-muted, #52677c);
  padding: var(--wow-space-2, 8px);
}

.reward-mission-item.is-done {
  border-color: color-mix(in srgb, #16a34a 34%, var(--wow-border, #d6e2ef));
  background: color-mix(in srgb, #16a34a 7%, var(--wow-surface, #ffffff));
  color: var(--wow-text-strong, #0f172a);
}

.reward-mission-item svg {
  width: 18px;
  height: 18px;
}

.reward-mission-item.is-done svg,
.reward-mission-item.is-done strong {
  color: #16a34a;
}

.reward-achievements-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.reward-category-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--wow-space-3, 12px);
}

.reward-category-pill {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: var(--wow-space-3, 12px);
  align-items: center;
  border: 1px solid var(--wow-border, #d6e2ef);
  border-radius: var(--wow-radius-lg, 12px);
  background: var(--wow-surface, #ffffff);
  padding: var(--wow-space-3, 12px);
}

.reward-category-pill > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--wow-radius-md, 8px);
  background: color-mix(in srgb, #0891b2 13%, transparent);
  color: var(--wow-accent, #0891b2);
}

.reward-category-pill strong,
.reward-category-pill small {
  min-width: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reward-category-pill strong {
  color: var(--wow-text-strong, #0f172a);
}

.reward-category-pill small {
  margin-top: 2px;
  color: var(--wow-text-muted, #52677c);
  font-size: var(--wow-text-xs, 0.75rem);
}

.reward-category-pill .meter {
  height: 6px;
  margin-top: var(--wow-space-2, 8px);
}

.reward-category-pill .meter div {
  background: linear-gradient(90deg, #0891b2, #14b8a6);
}

.reward-category-section {
  display: grid;
  gap: var(--wow-space-3, 12px);
  border-top: 1px solid var(--wow-border, #d6e2ef);
  padding-top: var(--wow-space-4, 16px);
}

.reward-category-section > header {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: var(--wow-space-3, 12px);
  align-items: center;
}

.reward-category-section > header > span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--wow-radius-md, 8px);
  background: color-mix(in srgb, #0891b2 13%, transparent);
  color: var(--wow-accent, #0891b2);
}

.reward-category-section h4,
.reward-category-section p {
  margin: 0;
}

.reward-category-section h4 {
  color: var(--wow-text-strong, #0f172a);
  font-size: var(--wow-text-lg, 1.125rem);
}

.reward-category-section p {
  color: var(--wow-text-muted, #52677c);
  line-height: 1.45;
}

.reward-achievement-card {
  min-width: 0;
  display: grid;
  gap: var(--wow-space-3, 12px);
  align-content: start;
  border: 1px solid var(--wow-border, #d6e2ef);
  border-radius: var(--wow-radius-lg, 12px);
  background: var(--wow-surface, #ffffff);
  padding: var(--wow-space-4, 16px);
}

.reward-achievement-card.is-earned {
  border-color: color-mix(in srgb, #f59e0b 36%, var(--wow-border, #d6e2ef));
  background:
    linear-gradient(135deg, color-mix(in srgb, #f59e0b 9%, transparent), transparent 60%),
    var(--wow-surface, #ffffff);
}

.reward-achievement-card.is-locked {
  opacity: 0.72;
}

.reward-achievement-card header {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: var(--wow-space-3, 12px);
  align-items: center;
}

.reward-achievement-card header > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--wow-radius-md, 8px);
  background: color-mix(in srgb, #f59e0b 16%, transparent);
  color: #d97706;
}

.reward-achievement-card.is-locked header > span {
  background: var(--wow-bg-subtle, #eff6fb);
  color: var(--wow-text-muted, #64748b);
}

.reward-achievement-card strong,
.reward-achievement-card small,
.reward-achievement-card p {
  min-width: 0;
  overflow-wrap: anywhere;
}

.reward-achievement-card strong {
  display: block;
  color: var(--wow-text-strong, #0f172a);
}

.reward-achievement-card small,
.reward-achievement-card p {
  margin: 0;
  color: var(--wow-text-muted, #52677c);
  line-height: 1.45;
}

.progress-status-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wow-space-2, 8px);
}

.progress-status-values > div {
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--progress-status-tone) 16%, var(--wow-border, #d6e2ef));
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-surface, #ffffff);
  padding: var(--wow-space-2, 8px);
}

.progress-status-values span {
  display: block;
  margin-bottom: 3px;
  font-size: var(--wow-text-xs, 0.75rem);
}

.progress-status-values b {
  display: block;
  overflow-wrap: anywhere;
}

.progress-trend-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid color-mix(in srgb, var(--progress-status-tone) 32%, var(--wow-border, #d6e2ef));
  border-radius: var(--wow-radius-full, 999px);
  background: color-mix(in srgb, var(--progress-status-tone) 11%, var(--wow-surface, #ffffff));
  color: var(--progress-status-tone);
  font-size: var(--wow-text-xs, 0.75rem);
  font-weight: var(--wow-weight-semibold, 600);
  white-space: nowrap;
}

.progress-trend-badge svg {
  width: 14px;
  height: 14px;
}

.body-log-item {
  border-left: 4px solid var(--progress-status-tone);
}

.body-log-header {
  margin-bottom: 2px;
}

.training-routines-section {
  margin-top: 0;
  margin-bottom: var(--wow-space-5, 20px);
}

.training-note {
  margin-bottom: var(--wow-space-4, 16px);
}

.meal-guide-card {
  display: grid;
  gap: var(--wow-space-4, 16px);
  margin-bottom: var(--wow-space-4, 16px);
  padding: var(--wow-space-5, 20px);
}

.meal-guide-card .card-heading {
  margin-bottom: 0;
}

.meal-guide-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--wow-space-3, 12px);
}

.meal-guide-steps article {
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-bg-elevated, #0f172a);
  padding: var(--wow-space-3, 12px);
}

.meal-guide-steps strong {
  display: block;
  color: var(--wow-text-strong, #f9fafb);
  font-size: var(--wow-text-sm, 0.875rem);
}

.meal-guide-steps span,
.meal-guide-note {
  color: var(--wow-text-muted, #9ca3af);
  font-size: var(--wow-text-sm, 0.875rem);
  line-height: 1.45;
}

.meal-guide-note {
  margin: 0;
}

.meals-workspace {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  margin-bottom: var(--wow-space-4, 16px);
}

.meal-entry-card,
.meal-summary-card {
  min-height: 100%;
}

.meal-entry-card {
  overflow: visible;
}

.meal-summary-card .builder-output {
  display: grid;
  gap: var(--wow-space-4, 16px);
}

.meal-summary-card {
  padding: var(--wow-space-4, 16px);
}

.meal-summary-card .card-heading {
  margin-bottom: var(--wow-space-3, 12px);
}

.meal-summary-card .card-heading > span {
  width: 30px;
  height: 30px;
  font-size: var(--wow-text-sm, 0.875rem);
}

.meal-summary-card .card-heading h3 {
  font-size: var(--wow-text-base, 1rem);
  line-height: 1.25;
}

.meal-summary-card .card-heading p {
  font-size: var(--wow-text-sm, 0.875rem);
  line-height: 1.35;
}

.meal-today-summary {
  gap: var(--wow-space-2, 8px);
  margin-bottom: var(--wow-space-3, 12px);
}

.meal-today-summary .metric-card {
  min-height: 82px;
  padding: var(--wow-space-3, 12px);
}

.meal-today-summary .metric-card .eyebrow,
.meal-today-summary .metric-card > span:first-child {
  font-size: 0.68rem;
  line-height: 1.2;
}

.meal-today-summary .metric-card strong,
.meal-today-summary .metric-card b {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  line-height: 1.1;
}

.meal-today-list .empty-state,
.meal-today-list .rich-empty {
  min-height: 136px;
  padding: var(--wow-space-5, 20px);
}

.meal-today-list .empty-state span,
.meal-today-list .rich-empty span {
  width: 34px;
  height: 34px;
}

.meal-today-list .empty-state svg,
.meal-today-list .rich-empty svg {
  width: 18px;
  height: 18px;
}

.meal-today-list .empty-state strong,
.meal-today-list .rich-empty strong {
  font-size: var(--wow-text-sm, 0.875rem);
}

.meal-today-list .empty-state p,
.meal-today-list .rich-empty p {
  max-width: 320px;
  font-size: var(--wow-text-sm, 0.875rem);
  line-height: 1.45;
}

.meal-food-rows {
  display: grid;
  gap: var(--wow-space-2, 8px);
}

.meal-food-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px 128px 36px;
  gap: var(--wow-space-2, 8px);
  align-items: end;
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-bg-elevated, #0f172a);
  padding: var(--wow-space-2, 8px);
}

.meal-food-row label {
  gap: 6px;
}

.meal-row-help {
  margin: calc(var(--wow-space-2, 8px) * -0.25) 0 0;
  color: var(--wow-text-muted, #9ca3af);
  font-size: var(--wow-text-xs, 0.75rem);
  line-height: 1.4;
}

.meal-recipe-picker {
  position: relative;
  display: grid;
  gap: var(--wow-space-3, 12px);
  margin-top: var(--wow-space-4, 16px);
  border-top: 1px solid var(--wow-border, #253043);
  overflow: visible;
  padding-top: var(--wow-space-4, 16px);
  z-index: 4;
}

.meal-recipe-heading {
  display: grid;
  gap: 3px;
}

.meal-recipe-heading strong {
  color: var(--wow-text-strong, #f9fafb);
  font-size: var(--wow-text-sm, 0.875rem);
}

.meal-recipe-heading small,
.meal-recipe-preview {
  color: var(--wow-text-muted, #9ca3af);
  font-size: var(--wow-text-xs, 0.75rem);
  line-height: 1.4;
}

.recipe-meal-form {
  display: grid;
  grid-template-columns: minmax(124px, 0.85fr) minmax(136px, 0.95fr) minmax(0, 1.35fr) 92px;
  gap: var(--wow-space-2, 8px);
  align-items: end;
  overflow: visible;
}

.recipe-meal-form label {
  position: relative;
  overflow: visible;
}

.recipe-meal-form button {
  grid-column: 1 / -1;
}

.meal-recipe-picker .searchable-select .select-combobox {
  min-height: 44px;
  padding-left: var(--wow-space-4, 16px);
  padding-right: 42px;
  border-color: var(--wow-border-strong, #b9c9dc);
  background: var(--wow-surface, #ffffff);
  color: var(--wow-text-strong, #0f172a);
  font-weight: var(--wow-weight-medium, 500);
}

.meal-recipe-picker .searchable-select.open {
  z-index: 260;
}

.meal-recipe-picker .searchable-select::after {
  top: 17px;
  right: 16px;
}

.meal-recipe-picker .select-options {
  z-index: 270;
  min-width: 220px;
  max-height: min(320px, 52vh);
  padding: var(--wow-space-2, 8px);
  border-color: var(--wow-border-strong, #b9c9dc);
  background: var(--wow-surface, #ffffff);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
}

.meal-recipe-picker .select-option {
  min-height: 42px;
  padding: 10px 12px;
  color: var(--wow-text-strong, #0f172a);
  font-weight: var(--wow-weight-medium, 500);
}

.meal-recipe-picker .select-option:hover,
.meal-recipe-picker .select-option.active {
  background: var(--wow-accent-soft, rgba(8, 145, 178, 0.12));
  color: var(--wow-accent, #0891b2);
}

.meal-recipe-preview {
  margin: 0;
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-bg-elevated, #0f172a);
  padding: var(--wow-space-2, 8px) var(--wow-space-3, 12px);
}

.meal-row-remove {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  align-self: end;
  border: 1px solid var(--wow-danger, #ef4444);
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-danger-soft, rgba(239, 68, 68, 0.12));
  color: var(--wow-danger, #ef4444);
  cursor: pointer;
}

.meal-row-remove svg {
  width: 16px;
  height: 16px;
}

.meal-final-action {
  display: flex;
  justify-content: space-between;
  gap: var(--wow-space-3, 12px);
  align-items: center;
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-bg-elevated, #0f172a);
  padding: var(--wow-space-3, 12px);
}

.meal-final-action p {
  margin: 0;
  color: var(--wow-text-muted, #9ca3af);
  font-size: var(--wow-text-sm, 0.875rem);
  line-height: 1.4;
}

.meal-action-notice {
  display: flex;
  gap: var(--wow-space-2, 8px);
  align-items: center;
  border: 1px solid rgba(34, 197, 94, 0.35);
  border-radius: var(--wow-radius-md, 8px);
  background: rgba(34, 197, 94, 0.1);
  color: var(--wow-text-strong, #f9fafb);
  padding: var(--wow-space-3, 12px);
  font-size: var(--wow-text-sm, 0.875rem);
  font-weight: var(--wow-weight-medium, 500);
}

.meal-action-notice svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  color: #22c55e;
}

.meal-tools-panel {
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-lg, 12px);
  background: var(--wow-surface, #111827);
  overflow: visible;
}

.meal-tools-panel > summary,
.meal-tools-header {
  display: flex;
  gap: var(--wow-space-3, 12px);
  align-items: center;
  list-style: none;
  padding: var(--wow-space-4, 16px);
}

.meal-tools-panel > summary {
  cursor: pointer;
}

.meal-tools-panel > summary::-webkit-details-marker {
  display: none;
}

.meal-tools-panel > summary > span,
.meal-tools-header > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-accent-soft, rgba(34, 211, 238, 0.12));
  color: var(--wow-accent, #22d3ee);
}

.meal-tools-panel > summary svg,
.meal-tools-header svg {
  width: 17px;
  height: 17px;
}

.meal-tools-panel > summary strong,
.meal-tools-header strong {
  display: block;
  color: var(--wow-text-strong, #f9fafb);
}

.meal-tools-panel > summary small,
.meal-tools-header small {
  display: block;
  margin-top: 3px;
  color: var(--wow-text-muted, #9ca3af);
  line-height: 1.4;
}

.meal-tools-grid {
  grid-template-columns: 1fr;
  align-items: start;
  border-top: 1px solid var(--wow-border, #253043);
  padding: var(--wow-space-4, 16px);
}

.nutrition-scan-card {
  min-width: 0;
  padding: var(--wow-space-5, 20px);
}

.nutrition-scan-card .stack-form {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(340px, 1.1fr);
  gap: var(--wow-space-4, 16px);
  align-items: start;
}

.nutrition-scan-card .file-upload-field,
.nutrition-scan-card .nutrition-preview,
.nutrition-scan-card .ocr-status,
.nutrition-scan-card .nutrition-insight,
.nutrition-scan-card label:has(textarea) {
  grid-column: 1;
}

.nutrition-scan-card .nutrition-fields {
  grid-column: 2;
  grid-row: 1 / span 5;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-lg, 12px);
  background: var(--wow-bg-elevated, #0f172a);
  padding: var(--wow-space-4, 16px);
}

.nutrition-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wow-space-3, 12px);
  align-items: center;
}

.nutrition-actions .wow-btn {
  width: 100%;
  min-height: 44px;
}

.nutrition-scan-card textarea {
  min-height: 136px;
}

.nutrition-insight {
  --nutrition-tone: var(--wow-info, #0891b2);
  display: grid;
  gap: var(--wow-space-3, 12px);
  border: 1px solid color-mix(in srgb, var(--nutrition-tone) 28%, var(--wow-border, #d8e2ef));
  border-radius: var(--wow-radius-lg, 12px);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--nutrition-tone) 10%, transparent), transparent 60%),
    var(--wow-bg-elevated, #ffffff);
  padding: var(--wow-space-4, 16px);
}

.nutrition-insight[hidden] {
  display: none;
}

.nutrition-insight--good {
  --nutrition-tone: var(--wow-success, #16a34a);
}

.nutrition-insight--warn {
  --nutrition-tone: var(--wow-warning, #f59e0b);
}

.nutrition-insight--danger {
  --nutrition-tone: var(--wow-danger, #ef4444);
}

.nutrition-insight--info {
  --nutrition-tone: var(--wow-accent, #0891b2);
}

.nutrition-insight strong {
  color: var(--wow-text-strong, #0f172a);
  font-size: 0.98rem;
}

.nutrition-insight p {
  margin: 4px 0 0;
  color: var(--wow-text-muted, #52657a);
  line-height: 1.45;
}

.nutrition-insight-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wow-space-2, 8px);
}

.nutrition-tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 0.68rem;
  font-weight: var(--wow-weight-black, 800);
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.nutrition-tag--good {
  background: color-mix(in srgb, var(--wow-success, #16a34a) 14%, transparent);
  color: var(--wow-success, #16a34a);
}

.nutrition-tag--warn {
  background: color-mix(in srgb, var(--wow-warning, #f59e0b) 16%, transparent);
  color: #b45309;
}

.nutrition-tag--danger {
  background: color-mix(in srgb, var(--wow-danger, #ef4444) 14%, transparent);
  color: var(--wow-danger, #ef4444);
}

.nutrition-tag--info {
  background: color-mix(in srgb, var(--wow-accent, #0891b2) 12%, transparent);
  color: var(--wow-accent, #0891b2);
}

#eatingOutList.quick-grid {
  grid-template-columns: 1fr;
  align-content: start;
}

.eating-out-toolbar {
  display: grid;
  gap: var(--wow-space-2, 8px);
  margin-bottom: var(--wow-space-3, 12px);
}

.eating-out-toolbar label {
  display: grid;
  gap: 6px;
}

.eating-out-toolbar p {
  margin: 0;
  color: var(--wow-text-muted, #9ca3af);
  font-size: var(--wow-text-sm, 0.875rem);
  line-height: 1.45;
}

.eating-out-grid {
  grid-template-columns: repeat(2, minmax(190px, 1fr));
  max-height: 520px;
  overflow: auto;
  padding-right: 4px;
}

.eating-out-card {
  display: grid;
  align-content: start;
  gap: var(--wow-space-2, 8px);
  min-height: 148px;
  height: 100%;
  padding: var(--wow-space-4, 16px);
  text-align: left;
  overflow-wrap: anywhere;
  white-space: normal;
}

.eating-out-card .wow-badge {
  width: fit-content;
  margin-bottom: 2px;
}

.eating-out-card strong {
  display: block;
  min-width: 0;
  color: var(--wow-text-strong, #f9fafb);
  font-size: var(--wow-text-base, 1rem);
  line-height: 1.25;
}

.eating-out-card b {
  color: var(--wow-accent, #0891b2);
  font-size: var(--wow-text-sm, 0.875rem);
  line-height: 1.3;
}

.eating-out-card small {
  color: var(--wow-text-muted, #9ca3af);
  line-height: 1.35;
}

.light-recipes-panel {
  display: grid;
  gap: var(--wow-space-4, 16px);
  padding: var(--wow-space-4, 16px);
}

.light-recipes-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 360px);
  gap: var(--wow-space-4, 16px);
  align-items: start;
}

.light-recipe-search {
  display: grid;
  gap: 6px;
}

.light-recipe-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--wow-space-2, 8px);
}

.light-recipe-tabs button {
  display: grid;
  gap: 4px;
  min-height: 70px;
  padding: var(--wow-space-3, 12px);
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-bg-elevated, #0f172a);
  color: var(--wow-text, #d1d5db);
  cursor: pointer;
  text-align: left;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}

.light-recipe-tabs button:hover {
  border-color: var(--wow-border-strong, #374151);
  background: var(--wow-surface-hover, #1f2937);
  transform: translateY(-1px);
}

.light-recipe-tabs button.is-active {
  border-color: var(--wow-accent, #22d3ee);
  background: var(--wow-accent-soft, rgba(34, 211, 238, 0.12));
}

.light-recipe-tabs strong {
  color: var(--wow-text-strong, #f9fafb);
  font-size: var(--wow-text-sm, 0.875rem);
  line-height: 1.25;
}

.light-recipe-tabs span {
  color: var(--wow-text-muted, #9ca3af);
  font-size: var(--wow-text-xs, 0.75rem);
}

.light-recipe-tabs button.is-active span {
  color: var(--wow-accent, #22d3ee);
}

.light-recipes-note {
  display: flex;
  gap: var(--wow-space-2, 8px);
  align-items: center;
  padding: var(--wow-space-3, 12px);
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-bg-elevated, #0f172a);
  color: var(--wow-text-muted, #9ca3af);
  line-height: 1.4;
}

.light-recipes-note strong {
  color: var(--wow-text-strong, #f9fafb);
  white-space: nowrap;
}

.light-recipes-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wow-space-3, 12px);
}

.light-recipe-card {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--wow-space-3, 12px);
  min-height: 300px;
  padding: var(--wow-space-4, 16px);
  cursor: pointer;
}

.light-recipe-card .recipe-image-frame,
.light-recipe-image-frame {
  height: 132px;
  min-height: 132px;
  margin: calc(var(--wow-space-4, 16px) * -1) calc(var(--wow-space-4, 16px) * -1) 0;
}

.light-recipe-card .recipe-image-placeholder {
  padding-bottom: 0;
}

.light-recipe-card strong {
  display: block;
  margin-top: var(--wow-space-2, 8px);
  color: var(--wow-text-strong, #f9fafb);
  line-height: 1.25;
}

.light-recipe-card .recipe-tags {
  margin-top: var(--wow-space-2, 8px);
}

.recipe-rating-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: var(--wow-space-2, 8px);
  color: var(--wow-text-muted, #9ca3af);
  font-size: var(--wow-text-xs, 0.75rem);
}

.recipe-rating-summary strong {
  margin: 0;
  color: var(--wow-text-strong, #f9fafb);
  font-size: var(--wow-text-sm, 0.875rem);
}

.recipe-rating-summary--empty {
  color: var(--wow-text-soft, #94a3b8);
}

.recipe-rating-stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  color: color-mix(in srgb, var(--wow-text-muted, #94a3b8) 45%, transparent);
  line-height: 1;
}

.recipe-rating-stars .is-filled {
  color: #f59e0b;
}

.recipe-rating-stars--large {
  font-size: 1.05rem;
}

.recipe-rating-badge {
  position: absolute;
  top: var(--wow-space-2, 8px);
  right: var(--wow-space-2, 8px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb, #f59e0b 42%, var(--wow-border, #d8e2ef));
  border-radius: 999px;
  background: color-mix(in srgb, var(--wow-bg-elevated, #ffffff) 88%, transparent);
  color: var(--wow-text-strong, #0f172a);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.14);
  font-size: var(--wow-text-xs, 0.75rem);
  line-height: 1;
  backdrop-filter: blur(10px);
}

.recipe-rating-badge__star {
  color: #f59e0b;
  font-size: 0.95rem;
}

.recipe-rating-badge strong {
  margin: 0;
  color: inherit;
  font-size: var(--wow-text-sm, 0.875rem);
  font-weight: 900;
}

.recipe-rating-badge small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: color-mix(in srgb, #f59e0b 18%, transparent);
  color: #92400e;
  font-size: 0.68rem;
  font-weight: 800;
}

.recipe-rating-badge--empty {
  border-color: color-mix(in srgb, var(--wow-text-muted, #64748b) 28%, var(--wow-border, #d8e2ef));
  color: var(--wow-text-muted, #64748b);
}

.light-recipe-card p {
  margin: var(--wow-space-2, 8px) 0 0;
  color: var(--wow-text-muted, #9ca3af);
  font-size: var(--wow-text-sm, 0.875rem);
  line-height: 1.4;
}

.light-recipe-macros {
  display: grid;
  gap: 2px;
  padding: var(--wow-space-3, 12px);
  border: 1px solid color-mix(in srgb, var(--wow-accent, #22d3ee) 25%, var(--wow-border, #253043));
  border-radius: var(--wow-radius-md, 8px);
  background: color-mix(in srgb, var(--wow-accent, #22d3ee) 8%, var(--wow-bg-elevated, #0f172a));
}

.light-recipe-macros span {
  color: var(--wow-accent, #0891b2);
  font-weight: var(--wow-weight-bold, 700);
}

.light-recipe-macros small {
  color: var(--wow-text-muted, #9ca3af);
}

.light-recipe-card ul {
  margin: 0;
  padding-left: 18px;
  color: var(--wow-text-muted, #9ca3af);
  line-height: 1.45;
}

.light-recipe-card .wow-btn {
  width: 100%;
  justify-content: center;
}

.admin-recipe-image-field {
  gap: var(--wow-space-2, 8px);
}

.admin-recipe-image-preview {
  display: grid;
  place-items: center;
  min-height: 120px;
  overflow: hidden;
  border: 1px dashed color-mix(in srgb, var(--wow-accent, #22d3ee) 45%, var(--wow-border, #253043));
  border-radius: var(--wow-radius-md, 8px);
  background: color-mix(in srgb, var(--wow-accent, #22d3ee) 7%, var(--wow-bg-elevated, #0f172a));
  color: var(--wow-text-muted, #9ca3af);
}

.admin-recipe-image-preview img {
  width: 100%;
  max-height: 180px;
  object-fit: cover;
}

.admin-recipe-image-preview span {
  display: inline-flex;
  align-items: center;
  gap: var(--wow-space-2, 8px);
}

.admin-recipe-image-field input[type="file"] {
  width: 100%;
  padding: var(--wow-space-3, 12px);
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-bg-elevated, #0f172a);
  color: var(--wow-text, #e5e7eb);
}

.admin-recipe-image-field input[type="file"]::file-selector-button {
  margin-right: var(--wow-space-3, 12px);
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--wow-accent, #22d3ee) 42%, var(--wow-border, #253043));
  border-radius: var(--wow-radius-sm, 6px);
  background: color-mix(in srgb, var(--wow-accent, #22d3ee) 12%, var(--wow-bg-elevated, #0f172a));
  color: var(--wow-accent, #0891b2);
  font-weight: var(--wow-weight-semibold, 600);
  cursor: pointer;
}

.form-grid,
.tool-grid,
.module-grid,
.meals-layout,
.tracker-layout.adjusted {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tracker-form.adjusted,
.tracker-form,
.nutrition-fields {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.recipe-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.routine-grid,
.quick-grid,
.exercise-image-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.full {
  grid-column: 1 / -1;
}

.dashboard-shell {
  display: grid;
  gap: var(--wow-space-4, 16px);
}

.dashboard-home {
  display: grid;
  gap: var(--wow-space-4, 16px);
  max-width: 1180px;
}

.dashboard-hero {
  display: flex;
  justify-content: space-between;
  gap: var(--wow-space-4, 16px);
  align-items: center;
  padding: var(--wow-space-6, 24px);
}

.dashboard-hero--simple {
  min-height: 148px;
}

.dashboard-hero--simple .primary-action {
  min-width: 180px;
}

.dashboard-hero h3 {
  margin: var(--wow-space-3, 12px) 0 var(--wow-space-2, 8px);
  color: var(--wow-text-strong, #f9fafb);
  font-size: var(--wow-text-2xl, 1.5rem);
}

.dashboard-hero p {
  max-width: 760px;
  margin: 0;
  color: var(--wow-text-muted, #9ca3af);
  line-height: 1.55;
}

.dashboard-summary-grid,
.dashboard-module-grid,
.dashboard-support-grid {
  display: grid;
  gap: var(--wow-space-4, 16px);
}

.dashboard-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.dashboard-summary-grid--clean {
  gap: var(--wow-space-3, 12px);
}

.dashboard-clean-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(260px, 0.75fr) minmax(260px, 0.75fr);
  gap: var(--wow-space-4, 16px);
  align-items: start;
}

.dashboard-clean-grid--simple {
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
}

.dashboard-side {
  display: contents;
}

.dashboard-panel,
.dashboard-recent {
  display: grid;
  gap: var(--wow-space-4, 16px);
  padding: var(--wow-space-5, 20px);
}

.dashboard-quick-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wow-space-3, 12px);
}

.dashboard-quick-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 3px var(--wow-space-3, 12px);
  align-items: start;
  min-height: 112px;
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-lg, 12px);
  background: var(--wow-bg-elevated, #0f172a);
  color: var(--wow-text, #d1d5db);
  cursor: pointer;
  padding: var(--wow-space-4, 16px);
  text-align: left;
  transition:
    border-color var(--wow-transition-fast, 120ms ease),
    background var(--wow-transition-fast, 120ms ease),
    transform var(--wow-transition-fast, 120ms ease);
}

.dashboard-quick-card:hover {
  border-color: var(--wow-accent, #22d3ee);
  background: var(--wow-accent-soft, rgba(34, 211, 238, 0.12));
  transform: translateY(-1px);
}

.dashboard-quick-card > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  grid-row: span 2;
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-accent-soft, rgba(34, 211, 238, 0.12));
  color: var(--wow-accent, #22d3ee);
}

.dashboard-quick-card svg {
  width: 17px;
  height: 17px;
}

.dashboard-quick-card strong {
  min-width: 0;
  color: var(--wow-text-strong, #f9fafb);
  line-height: 1.25;
}

.dashboard-quick-card small {
  grid-column: 2;
  min-width: 0;
  color: var(--wow-text-muted, #9ca3af);
  font-size: var(--wow-text-xs, 0.75rem);
  line-height: 1.45;
}

.dashboard-orientation-list {
  display: grid;
  gap: var(--wow-space-3, 12px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dashboard-orientation-list li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: var(--wow-space-3, 12px);
  align-items: start;
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-bg-elevated, #0f172a);
  padding: var(--wow-space-3, 12px);
}

.dashboard-orientation-list svg {
  width: 17px;
  height: 17px;
  color: var(--wow-accent, #22d3ee);
  margin-top: 2px;
}

.dashboard-orientation-list span {
  min-width: 0;
  color: var(--wow-text-muted, #9ca3af);
  font-size: var(--wow-text-sm, 0.875rem);
  line-height: 1.45;
}

.dashboard-orientation-list strong {
  color: var(--wow-text-strong, #f9fafb);
}

.progress-pillars-panel {
  display: grid;
  gap: var(--wow-space-4, 16px);
  padding: var(--wow-space-5, 20px);
}

.progress-pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wow-space-3, 12px);
}

.progress-pillar-card {
  --pillar-color: var(--wow-accent, #0891b2);
  min-width: 0;
  display: grid;
  gap: var(--wow-space-3, 12px);
  padding: var(--wow-space-4, 16px);
  border: 1px solid color-mix(in srgb, var(--pillar-color) 28%, var(--wow-border, #d6e2ef));
  border-radius: var(--wow-radius-lg, 12px);
  background: color-mix(in srgb, var(--pillar-color) 7%, var(--wow-surface, #ffffff));
}

.progress-pillar-card--food {
  --pillar-color: #14b8a6;
}

.progress-pillar-card--rest {
  --pillar-color: #6366f1;
}

.progress-pillar-card--training {
  --pillar-color: #f59e0b;
}

.progress-pillar-card__top {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--wow-space-3, 12px);
}

.progress-pillar-card__top span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--wow-radius-md, 8px);
  background: color-mix(in srgb, var(--pillar-color) 16%, transparent);
  color: var(--pillar-color);
}

.progress-pillar-card__top svg {
  width: 17px;
  height: 17px;
}

.progress-pillar-card__top strong {
  min-width: 0;
  color: var(--wow-text-strong, #0f172a);
  overflow-wrap: anywhere;
}

.progress-pillar-card__top b {
  color: var(--pillar-color);
  font-size: var(--wow-text-xl, 1.25rem);
}

.progress-pillar-bar {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pillar-color) 12%, var(--wow-bg-subtle, #eef5fb));
}

.progress-pillar-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--pillar-color);
}

.progress-pillar-card p,
.progress-pillars-note {
  margin: 0;
  color: var(--wow-text-muted, #64748b);
  line-height: 1.5;
}

.progress-pillars-note {
  font-size: var(--wow-text-sm, 0.875rem);
}

.dashboard-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  gap: var(--wow-space-4, 16px);
  align-items: stretch;
}

.dashboard-module-grid,
.dashboard-support-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wow-space-4, 16px);
}

.dashboard-card {
  display: grid;
  align-content: start;
  gap: var(--wow-space-3, 12px);
  padding: var(--wow-space-5, 20px);
}

.dashboard-card--wide,
.dashboard-card--actions {
  grid-column: span 2;
}

.dashboard-card > strong {
  overflow: hidden;
  color: var(--wow-text-strong, #f9fafb);
  font-size: var(--wow-text-xl, 1.25rem);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-card > span {
  color: var(--wow-text-muted, #9ca3af);
}

.dashboard-card--today {
  grid-row: span 2;
}

.dashboard-card--insights {
  grid-column: 2;
}

.dashboard-summary-card {
  display: grid;
  gap: var(--wow-space-2, 8px);
  min-height: 112px;
  padding: var(--wow-space-3, 12px);
}

.dashboard-summary-card > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wow-space-2, 8px);
}

.dashboard-summary-card span {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-accent-soft, rgba(34, 211, 238, 0.12));
  color: var(--wow-accent, #22d3ee);
}

.dashboard-summary-card svg {
  width: 17px;
  height: 17px;
}

.dashboard-summary-card small {
  color: var(--wow-text-muted, #9ca3af);
  font-size: var(--wow-text-xs, 0.75rem);
  font-weight: var(--wow-weight-semibold, 600);
  text-transform: uppercase;
}

.dashboard-summary-card strong {
  color: var(--wow-text-strong, #f9fafb);
  font-size: var(--wow-text-lg, 1.125rem);
}

.dashboard-summary-card p {
  margin: 0;
  color: var(--wow-text-muted, #9ca3af);
  font-size: var(--wow-text-sm, 0.875rem);
}

.dashboard-summary-card .meter div {
  background: var(--wow-accent, #22d3ee);
}

.dashboard-meters {
  display: grid;
  gap: var(--wow-space-3, 12px);
}

.dashboard-meter {
  display: grid;
  gap: var(--wow-space-2, 8px);
}

.dashboard-meter > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: var(--wow-space-3, 12px);
  color: var(--wow-text, #d1d5db);
}

.dashboard-meter span {
  color: var(--wow-text-muted, #9ca3af);
}

.dashboard-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wow-space-3, 12px);
}

.dashboard-mini-grid--clean {
  margin-top: var(--wow-space-2, 8px);
}

.dashboard-mini-grid div {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: var(--wow-space-3, 12px);
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-bg-elevated, #0f172a);
}

.dashboard-mini-grid strong {
  overflow: hidden;
  color: var(--wow-text-strong, #f9fafb);
  font-size: var(--wow-text-lg, 1.125rem);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-mini-grid span {
  color: var(--wow-text-muted, #9ca3af);
  font-size: var(--wow-text-xs, 0.75rem);
}

.dashboard-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wow-space-3, 12px);
}

.dashboard-actions--clean {
  gap: var(--wow-space-2, 8px);
}

.dashboard-actions button {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: var(--wow-space-2, 8px);
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-bg-elevated, #0f172a);
  color: var(--wow-text, #d1d5db);
  cursor: pointer;
  padding: 0 var(--wow-space-3, 12px);
  text-align: left;
}

.dashboard-actions--clean button {
  justify-content: flex-start;
}

.dashboard-actions button:hover {
  border-color: var(--wow-accent, #22d3ee);
  background: var(--wow-accent-soft, rgba(34, 211, 238, 0.12));
  color: var(--wow-accent, #22d3ee);
}

.dashboard-actions svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.dashboard-donation-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--wow-space-3, 12px);
  align-items: center;
  margin-bottom: var(--wow-space-4, 16px);
  padding: var(--wow-space-4, 16px);
  border-color: color-mix(in srgb, var(--wow-accent, #22d3ee) 38%, var(--wow-border, #253043));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--wow-accent, #22d3ee) 10%, transparent), transparent 58%),
    var(--wow-bg-elevated, #0f172a);
}

.dashboard-donation-card .card-heading {
  margin: 0;
}

.donation-modal-content {
  display: grid;
  gap: var(--wow-space-4, 16px);
}

.donation-modal-hero {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: var(--wow-space-3, 12px);
  align-items: start;
}

.donation-modal-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--wow-radius-lg, 12px);
  background: var(--wow-accent-soft, rgba(34, 211, 238, 0.12));
  color: var(--wow-accent, #22d3ee);
}

.donation-modal-icon svg {
  width: 24px;
  height: 24px;
}

.donation-modal-hero strong {
  display: block;
  color: var(--wow-text-strong, #f9fafb);
  font-size: var(--wow-text-base, 1rem);
  line-height: 1.25;
}

.donation-modal-hero p {
  margin: 6px 0 0;
  color: var(--wow-text, #d1d5db);
  line-height: 1.55;
}

.install-modal {
  max-width: 560px;
}

.install-modal-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: var(--wow-space-3, 12px);
  align-items: start;
  padding: var(--wow-space-4, 16px);
  border: 1px solid color-mix(in srgb, var(--wow-info, #0ea5e9) 32%, var(--wow-border, #253043));
  border-radius: var(--wow-radius-lg, 12px);
  background: color-mix(in srgb, var(--wow-info, #0ea5e9) 8%, var(--wow-surface, #ffffff));
}

.install-modal-card > span {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--wow-radius-lg, 12px);
  background: color-mix(in srgb, var(--wow-info, #0ea5e9) 14%, transparent);
  color: var(--wow-info, #0ea5e9);
}

.install-modal-card h3,
.install-modal-card p {
  margin: 0;
}

.install-modal-card h3 {
  color: var(--wow-text-strong, #0f172a);
}

.install-modal-card p {
  margin-top: var(--wow-space-2, 8px);
  color: var(--wow-text-muted, #64748b);
  line-height: 1.55;
}

.donation-primary-link {
  width: 100%;
  justify-content: center;
  text-decoration: none;
}

.donation-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wow-space-3, 12px);
}

.donation-option {
  --donation-color: var(--wow-accent, #22d3ee);
  --donation-soft: var(--wow-accent-soft, rgba(34, 211, 238, 0.12));
  min-height: 92px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: var(--wow-space-3, 12px);
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--donation-color) 28%, var(--wow-border, #253043));
  border-radius: var(--wow-radius-md, 8px);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--donation-color) 10%, transparent), transparent 58%),
    var(--wow-bg-elevated, #0f172a);
    color: var(--wow-text-strong, #f9fafb);
    cursor: pointer;
    font: inherit;
    padding: var(--wow-space-3, 12px);
    text-align: left;
    text-decoration: none;
  transition:
    border-color var(--wow-transition-fast, 120ms ease),
    background var(--wow-transition-fast, 120ms ease),
      transform var(--wow-transition-fast, 120ms ease);
  }

  .donation-option:disabled {
    cursor: wait;
    opacity: 0.72;
    transform: none;
  }

.donation-option:hover,
.donation-option:focus-visible {
  border-color: var(--donation-color);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--donation-color) 18%, transparent), transparent 60%),
    var(--wow-bg-elevated, #0f172a);
  outline: none;
  transform: translateY(-1px);
}

.donation-option__icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--wow-radius-md, 8px);
  background: color-mix(in srgb, var(--donation-color) 16%, transparent);
  color: var(--donation-color);
}

.donation-option__icon svg {
  width: 20px;
  height: 20px;
}

.donation-option__copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.donation-option__copy strong {
  font-size: var(--wow-text-sm, 0.875rem);
  line-height: 1.25;
}

.donation-option__copy small {
  color: var(--wow-text-muted, #9ca3af);
  font-size: var(--wow-text-xs, 0.75rem);
  line-height: 1.35;
}

.donation-option__amount {
  min-width: 62px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--donation-color) 16%, transparent);
  color: var(--donation-color);
  font-size: var(--wow-text-xs, 0.75rem);
  font-weight: var(--wow-weight-semibold, 600);
  padding: 6px 9px;
  text-align: center;
  white-space: nowrap;
}

.donation-option--cyan {
  --donation-color: #0ea5e9;
}

.donation-option--blue {
  --donation-color: #2563eb;
}

.donation-option--green {
  --donation-color: #16a34a;
}

  .donation-option--purple {
    --donation-color: #7c3aed;
  }

  .donation-status {
    min-height: 22px;
    color: var(--wow-text-muted, #9ca3af);
    font-size: var(--wow-text-sm, 0.875rem);
    line-height: 1.45;
  }

  .donation-status[data-type="error"] {
    color: var(--wow-danger, #ef4444);
  }

  .donation-status[data-type="info"] {
    color: var(--wow-accent, #22d3ee);
  }

.donation-modal-content small {
  color: var(--wow-text-muted, #9ca3af);
  line-height: 1.45;
}

.donation-admin-card {
  margin-bottom: var(--wow-space-4, 16px);
}

.toggle-line {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: var(--wow-space-2, 8px);
}

.toggle-line input {
  width: 18px;
  height: 18px;
}

.admin-web-visibility-card {
  margin-bottom: var(--wow-space-4, 16px);
}

.admin-platform-modules-card {
  margin-bottom: var(--wow-space-4, 16px);
}

.platform-module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 240px));
  gap: var(--wow-space-3, 12px);
}

.platform-module-item {
  min-height: 126px;
}

.public-visibility-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--wow-space-3, 12px);
}

.public-visibility-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--wow-space-2, 8px);
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-bg-elevated, #0f172a);
  padding: var(--wow-space-3, 12px);
}

.public-visibility-item.is-visible {
  border-color: color-mix(in srgb, var(--brand-primary, #1498bd) 45%, var(--wow-border, #253043));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand-primary, #1498bd) 10%, transparent), transparent 70%),
    var(--wow-bg-elevated, #0f172a);
}

.public-visibility-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--wow-radius-md, 8px);
  background: color-mix(in srgb, var(--brand-primary, #1498bd) 12%, transparent);
  color: var(--brand-primary, #1498bd);
}

.public-visibility-item strong,
.public-visibility-item small {
  display: block;
}

.public-visibility-item strong {
  color: var(--wow-text-strong, #f9fafb);
  font-size: var(--wow-text-sm, 0.875rem);
}

.public-visibility-item small {
  color: var(--wow-text-muted, #9ca3af);
  font-size: var(--wow-text-xs, 0.75rem);
}

.public-visibility-switch {
  position: relative;
  width: 44px;
  height: 24px;
}

.public-visibility-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.public-visibility-switch span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--wow-bg-subtle, #111827);
  border: 1px solid var(--wow-border, #253043);
  transition: background var(--wow-transition-fast, 120ms ease), border-color var(--wow-transition-fast, 120ms ease);
}

.public-visibility-switch span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--wow-text-muted, #9ca3af);
  transition: transform var(--wow-transition-fast, 120ms ease), background var(--wow-transition-fast, 120ms ease);
}

.public-visibility-switch input:checked + span {
  border-color: var(--brand-primary, #1498bd);
  background: color-mix(in srgb, var(--brand-primary, #1498bd) 22%, transparent);
}

.public-visibility-switch input:checked + span::after {
  transform: translateX(20px);
  background: var(--brand-primary, #1498bd);
}

.public-visibility-item .wow-btn {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 32px;
}

.insight-list,
.onboarding-steps {
  display: grid;
  gap: var(--wow-space-2, 8px);
}

.insight-list--clean .insight-item {
  min-height: 38px;
  padding: var(--wow-space-2, 8px);
}

.insight-item,
.onboarding-steps button {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: var(--wow-space-2, 8px);
  padding: var(--wow-space-2, 8px) var(--wow-space-3, 12px);
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-bg-elevated, #0f172a);
  color: var(--wow-text, #d1d5db);
  text-align: left;
}

.insight-item svg,
.onboarding-steps svg {
  width: 17px;
  height: 17px;
  color: var(--wow-accent, #22d3ee);
  flex: 0 0 auto;
}

.insight-item--good svg,
.onboarding-steps .is-done svg {
  color: #22c55e;
}

.insight-item--warn svg {
  color: var(--wow-danger, #ef4444);
}

.onboarding-steps button {
  cursor: pointer;
}

.onboarding-steps button:hover {
  border-color: var(--wow-accent, #22d3ee);
  background: var(--wow-accent-soft, rgba(34, 211, 238, 0.12));
  color: var(--wow-accent, #22d3ee);
}

.dashboard-recent-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--wow-space-3, 12px);
}

.dashboard-recent-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 16px;
  align-items: center;
  gap: var(--wow-space-2, 8px);
  min-height: 70px;
  padding: var(--wow-space-3, 12px);
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-bg-elevated, #0f172a);
  color: var(--wow-text, #d1d5db);
  cursor: pointer;
  text-align: left;
}

.dashboard-recent-item:hover {
  border-color: var(--wow-accent, #22d3ee);
  background: var(--wow-accent-soft, rgba(34, 211, 238, 0.12));
}

.dashboard-recent-item > svg:first-child {
  width: 18px;
  height: 18px;
  color: var(--wow-accent, #22d3ee);
}

.dashboard-recent-item > svg:last-child {
  width: 16px;
  height: 16px;
  color: var(--wow-text-muted, #9ca3af);
}

.dashboard-recent-item span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.dashboard-recent-item strong,
.dashboard-recent-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-recent-item strong {
  color: var(--wow-text-strong, #f9fafb);
  font-size: var(--wow-text-sm, 0.875rem);
}

.dashboard-recent-item small {
  color: var(--wow-text-muted, #9ca3af);
  overflow-wrap: anywhere;
  white-space: normal;
}

.reminder-list {
  display: grid;
  gap: var(--wow-space-2, 8px);
}

.reminder-toggle {
  display: flex;
  align-items: center;
  gap: var(--wow-space-2, 8px);
  min-height: 40px;
  padding: var(--wow-space-2, 8px) var(--wow-space-3, 12px);
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-bg-elevated, #0f172a);
  color: var(--wow-text, #d1d5db);
}

.reminder-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--wow-accent, #22d3ee);
}

.account-preferences {
  display: grid;
  gap: var(--wow-space-3, 12px);
}

.language-preference {
  display: grid;
  gap: var(--wow-space-3, 12px);
  padding: var(--wow-space-3, 12px);
  border: 1px solid var(--wow-border, #d8e2ef);
  border-radius: var(--wow-radius-md, 8px);
  background: color-mix(in srgb, var(--wow-bg-elevated, #ffffff) 88%, var(--wow-accent, #f43f46) 4%);
}

.language-preference__head {
  display: grid;
  gap: 2px;
}

.language-preference__head strong {
  color: var(--wow-text-strong, #111827);
  font-size: var(--wow-text-sm, 0.875rem);
}

.language-preference__head small,
.preference-message {
  color: var(--wow-text-muted, #64748b);
  font-size: var(--wow-text-xs, 0.75rem);
}

.language-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wow-space-2, 8px);
}

.language-switch button {
  display: flex;
  align-items: center;
  gap: var(--wow-space-2, 8px);
  min-height: 46px;
  padding: 8px 10px;
  border: 1px solid var(--wow-border, #d8e2ef);
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-bg-elevated, #ffffff);
  color: var(--wow-text, #1f2937);
  cursor: pointer;
  text-align: left;
}

.language-switch button span {
  display: inline-grid;
  width: 32px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  background: var(--wow-bg-subtle, #eef6fb);
  color: var(--wow-text-muted, #64748b);
  font-size: var(--wow-text-xs, 0.75rem);
  font-weight: var(--wow-weight-black, 800);
}

.language-switch button strong {
  min-width: 0;
  color: var(--wow-text-strong, #111827);
  font-size: var(--wow-text-sm, 0.875rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.language-switch button.is-selected {
  border-color: var(--wow-accent, #f43f46);
  background: var(--wow-accent-soft, rgba(244, 63, 70, 0.1));
  box-shadow: 0 0 0 3px var(--wow-accent-ring, rgba(244, 63, 70, 0.2));
}

.language-switch button.is-selected span {
  background: var(--wow-accent, #f43f46);
  color: var(--wow-text-inverse, #ffffff);
}

.preference-message {
  min-height: 16px;
  margin: 0;
}

.preference-message[data-tone="success"] {
  color: var(--wow-accent, #f43f46);
  font-weight: var(--wow-weight-semibold, 600);
}

.account-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
  gap: var(--wow-space-5, 20px);
  align-items: center;
  margin-bottom: var(--wow-space-5, 20px);
  padding: var(--wow-space-5, 20px);
}

.account-hero-main {
  display: flex;
  align-items: center;
  gap: var(--wow-space-4, 16px);
  min-width: 0;
}

.account-avatar {
  display: inline-grid;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--wow-accent, #f43f46), var(--wow-accent-strong, #111827));
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: var(--wow-weight-black, 800);
  letter-spacing: 0;
  box-shadow: 0 14px 30px color-mix(in srgb, var(--wow-accent, #f43f46) 22%, transparent);
}

.account-hero-main h3 {
  margin: 2px 0 4px;
  color: var(--wow-text-strong, #111827);
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  line-height: 1.15;
}

.account-hero-main p:not(.eyebrow) {
  margin: 0;
  color: var(--wow-text-muted, #64748b);
  overflow-wrap: anywhere;
}

.account-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wow-space-3, 12px);
}

.account-hero-stats article {
  min-width: 0;
  padding: var(--wow-space-3, 12px);
  border: 1px solid var(--wow-border, #d8e2ef);
  border-radius: var(--wow-radius-md, 8px);
  background: color-mix(in srgb, var(--wow-bg-elevated, #ffffff) 82%, var(--wow-accent, #f43f46) 4%);
}

.account-hero-stats span,
.account-export-grid small {
  color: var(--wow-text-muted, #64748b);
  font-size: var(--wow-text-xs, 0.75rem);
}

.account-hero-stats span {
  display: block;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.account-hero-stats strong {
  display: block;
  overflow: hidden;
  color: var(--wow-text-strong, #111827);
  font-size: var(--wow-text-sm, 0.875rem);
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-layout {
  align-items: start;
}

.account-column {
  display: grid;
  gap: var(--wow-space-4, 16px);
  min-width: 0;
}

.account-card {
  align-content: start;
}

.account-card .card-heading {
  margin-bottom: var(--wow-space-4, 16px);
}

.account-export-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wow-space-3, 12px);
}

.account-export-grid button,
.account-export-secondary button {
  display: grid;
  align-items: center;
  gap: 4px 10px;
  min-width: 0;
  border: 1px solid var(--wow-border, #d8e2ef);
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-bg-elevated, #ffffff);
  color: var(--wow-text, #1f2937);
  cursor: pointer;
}

.account-export-grid button {
  grid-template-columns: 42px minmax(0, 1fr);
  padding: var(--wow-space-4, 16px);
  text-align: left;
}

.account-export-grid button:hover,
.account-export-secondary button:hover {
  border-color: color-mix(in srgb, var(--wow-accent, #f43f46) 42%, var(--wow-border, #d8e2ef));
  background: color-mix(in srgb, var(--wow-accent, #f43f46) 7%, var(--wow-bg-elevated, #ffffff));
}

.account-export-grid svg {
  grid-row: 1 / span 2;
  width: 40px;
  height: 40px;
  padding: 10px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--wow-accent, #f43f46) 12%, transparent);
  color: var(--wow-accent, #f43f46);
}

.account-export-grid span {
  color: var(--wow-text-strong, #111827);
  font-weight: var(--wow-weight-bold, 700);
}

.account-export-grid small {
  display: block;
  line-height: 1.35;
}

.account-export-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wow-space-2, 8px);
  margin-top: var(--wow-space-3, 12px);
}

.account-export-secondary button {
  grid-auto-flow: column;
  justify-content: center;
  min-height: 38px;
  padding: 8px 14px;
}

.account-export-secondary svg {
  width: 16px;
  height: 16px;
}

.preference-action {
  width: 100%;
  min-height: 44px;
  justify-content: flex-start;
}

.preference-action svg {
  width: 17px;
  height: 17px;
}

.agenda-layout,
.calendar-shell {
  display: grid;
  gap: var(--wow-space-4, 16px);
}

.agenda-layout {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.agenda-hero,
.agenda-month {
  grid-column: 1 / -1;
}

.agenda-hero,
.calendar-shell {
  padding: var(--wow-space-5, 20px);
  overflow: hidden;
}

.agenda-month-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--wow-space-4, 16px);
  padding-bottom: var(--wow-space-4, 16px);
  border-bottom: 1px solid var(--wow-border, #253043);
}

.agenda-month-header .card-heading {
  margin-bottom: 0;
}

.agenda-month-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--wow-space-2, 8px);
  flex: 0 0 auto;
}

.agenda-month-controls strong {
  min-width: 150px;
  color: var(--wow-text-strong, #f9fafb);
  font-size: var(--wow-text-base, 1rem);
  text-align: center;
  text-transform: capitalize;
}

.agenda-month-controls button[disabled] {
  cursor: not-allowed;
  opacity: 0.45;
}

.agenda-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--wow-space-3, 12px);
}

.agenda-actions {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.agenda-week {
  display: grid;
  gap: var(--wow-space-2, 8px);
}

.agenda-week-day {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wow-space-3, 12px);
  width: 100%;
  padding: var(--wow-space-3, 12px);
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-bg-elevated, #0f172a);
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.agenda-week-day strong {
  color: var(--wow-text-strong, #f9fafb);
  text-transform: capitalize;
}

.agenda-checks {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.agenda-checks span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid var(--wow-border, #253043);
  border-radius: 999px;
  color: var(--wow-text-muted, #9ca3af);
  font-size: var(--wow-text-xs, 0.75rem);
}

.agenda-checks .is-done {
  border-color: rgba(34, 197, 94, 0.45);
  background: rgba(34, 197, 94, 0.1);
  color: var(--wow-text-strong, #f9fafb);
}

.agenda-checks svg {
  width: 13px;
  height: 13px;
}

.agenda-status-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wow-space-2, 8px);
  margin-top: var(--wow-space-3, 12px);
}

.agenda-status-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 4px 9px;
  border: 1px solid var(--wow-border, #253043);
  border-radius: 999px;
  color: var(--wow-text-muted, #9ca3af);
  font-size: var(--wow-text-xs, 0.75rem);
  font-weight: var(--wow-weight-semibold, 600);
  white-space: nowrap;
}

.agenda-status-legend i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
}

.agenda-status-legend .is-empty i {
  background: #ef4444;
}

.agenda-status-legend .is-before-start i {
  border: 1px solid var(--wow-border-strong, #aebdcc);
  background: #ffffff;
}

.agenda-status-legend .is-start i {
  background: #0ea5e9;
}

.agenda-status-legend .is-partial i {
  background: #f59e0b;
}

.agenda-status-legend .is-complete i {
  background: #22c55e;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--wow-space-2, 8px);
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--wow-space-2, 8px);
  margin: var(--wow-space-4, 16px) 0 var(--wow-space-2, 8px);
}

.calendar-weekdays span {
  color: var(--wow-text-muted, #9ca3af);
  font-size: var(--wow-text-xs, 0.75rem);
  font-weight: var(--wow-weight-semibold, 600);
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}

.calendar-day {
  min-height: 118px;
  width: 100%;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: var(--wow-space-3, 12px);
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-bg-elevated, #0f172a);
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition:
    border-color var(--wow-transition-fast, 120ms ease),
    transform var(--wow-transition-fast, 120ms ease),
    background var(--wow-transition-fast, 120ms ease);
}

.calendar-day:not(.is-outside-month):not(.is-before-start):hover,
.agenda-week-day:hover {
  border-color: var(--wow-accent, #22d3ee);
  background: var(--wow-surface-hover, #1f2937);
  transform: translateY(-1px);
}

.calendar-day.is-before-start:hover {
  border-color: var(--wow-accent, #22d3ee);
  background: #ffffff;
  transform: translateY(-1px);
}

.calendar-day:focus-visible,
.agenda-week-day:focus-visible {
  border-color: var(--wow-accent, #22d3ee);
  outline: 3px solid var(--wow-accent-soft, rgba(34, 211, 238, 0.12));
  outline-offset: 2px;
}

.calendar-day.is-today {
  border-color: var(--wow-accent, #22d3ee);
  box-shadow: inset 3px 0 0 var(--wow-accent, #22d3ee);
}

.calendar-day.is-start,
.agenda-week-day.is-start {
  border-color: rgba(14, 165, 233, 0.72);
  background:
    linear-gradient(180deg, rgba(14, 165, 233, 0.14), transparent 72%),
    var(--wow-bg-elevated, #0f172a);
}

.calendar-day.is-start {
  box-shadow: inset 0 -4px 0 rgba(14, 165, 233, 0.78);
}

.calendar-day.is-complete,
.agenda-week-day.is-complete {
  border-color: rgba(34, 197, 94, 0.62);
  background:
    linear-gradient(180deg, rgba(34, 197, 94, 0.12), transparent 72%),
    var(--wow-bg-elevated, #0f172a);
}

.calendar-day.is-complete {
  box-shadow: inset 0 -4px 0 rgba(34, 197, 94, 0.78);
}

.calendar-day.is-partial,
.agenda-week-day.is-partial {
  border-color: rgba(245, 158, 11, 0.64);
  background:
    linear-gradient(180deg, rgba(245, 158, 11, 0.12), transparent 72%),
    var(--wow-bg-elevated, #0f172a);
}

.calendar-day.is-partial {
  box-shadow: inset 0 -4px 0 rgba(245, 158, 11, 0.72);
}

.calendar-day.is-empty,
.agenda-week-day.is-empty {
  border-color: rgba(239, 68, 68, 0.46);
  background:
    linear-gradient(180deg, rgba(239, 68, 68, 0.09), transparent 72%),
    var(--wow-bg-elevated, #0f172a);
}

.calendar-day.is-empty {
  box-shadow: inset 0 -4px 0 rgba(239, 68, 68, 0.62);
}

.calendar-day.is-before-start,
.calendar-day.is-outside-month,
.agenda-week-day.is-before-start {
  border-color: var(--wow-border, #d8e2ec);
  background: #ffffff;
  box-shadow: none;
  color: #0f172a;
}

.calendar-day.is-outside-month {
  cursor: default;
  opacity: 0.72;
}

.calendar-day.is-before-start strong,
.calendar-day.is-before-start > span,
.calendar-day.is-before-start .calendar-badges small,
.calendar-day.is-outside-month strong,
.agenda-week-day.is-before-start strong {
  color: #334155;
}

.agenda-week-day.is-before-start .agenda-checks span {
  border-color: #d8e2ec;
  background: #f8fafc;
  color: #64748b;
}

.calendar-day strong {
  color: var(--wow-text-strong, #f9fafb);
}

.calendar-day > span {
  color: var(--wow-text-muted, #9ca3af);
  font-size: var(--wow-text-xs, 0.75rem);
}

.calendar-badges {
  display: grid;
  gap: 4px;
}

.calendar-badges small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--wow-text-muted, #9ca3af);
  font-size: var(--wow-text-xs, 0.75rem);
}

.calendar-badges svg {
  width: 13px;
  height: 13px;
  color: var(--wow-accent, #22d3ee);
}

.agenda-day-history {
  display: grid;
  gap: var(--wow-space-4, 16px);
}

.agenda-day-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--wow-space-3, 12px);
}

.agenda-history-section {
  padding: var(--wow-space-5, 20px);
}

.agenda-history-section .card-heading {
  margin-bottom: var(--wow-space-3, 12px);
}

.agenda-history-empty,
.agenda-history-note {
  margin: 0;
  color: var(--wow-text-muted, #9ca3af);
  line-height: 1.5;
}

.agenda-history-note {
  margin-top: var(--wow-space-3, 12px);
  padding: var(--wow-space-3, 12px);
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-bg-elevated, #0f172a);
}

.agenda-history-list {
  max-height: none;
}

.agenda-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--wow-space-3, 12px);
}

.agenda-detail-grid div {
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-bg-elevated, #0f172a);
  padding: var(--wow-space-3, 12px);
}

.agenda-detail-grid span {
  display: block;
  margin-bottom: 4px;
  color: var(--wow-text-muted, #9ca3af);
  font-size: var(--wow-text-xs, 0.75rem);
  font-weight: var(--wow-weight-semibold, 600);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.agenda-detail-grid strong {
  color: var(--wow-text-strong, #f9fafb);
}

.admin-overview {
  margin-bottom: var(--wow-space-4, 16px);
}

.admin-home {
  display: grid;
  gap: var(--wow-space-4, 16px);
}

.admin-hero {
  padding: var(--wow-space-5, 20px);
}

.admin-hero h3,
.admin-hero p {
  margin: 0;
}

.admin-hero h3 {
  margin-top: var(--wow-space-3, 12px);
  color: var(--wow-text-strong, #0f172a);
  font-size: var(--wow-text-2xl, 1.5rem);
}

.admin-hero p {
  margin-top: 4px;
  color: var(--wow-text-muted, #64748b);
}

.admin-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wow-space-3, 12px);
}

.admin-summary-grid .metric-card {
  min-height: 112px;
  padding: var(--wow-space-4, 16px);
}

.admin-quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--wow-space-3, 12px);
}

.admin-quick-card {
  min-height: 132px;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  justify-items: start;
  gap: var(--wow-space-2, 8px);
  padding: var(--wow-space-4, 16px);
  border: 1px solid var(--wow-border, #d6e2ef);
  background: var(--wow-surface, #ffffff);
  color: var(--wow-text, #334155);
  cursor: pointer;
  text-align: left;
}

.admin-quick-card:hover {
  border-color: var(--wow-accent, #0891b2);
  background: var(--wow-accent-soft, rgba(8, 145, 178, 0.1));
  color: var(--wow-accent, #0891b2);
}

.admin-quick-card > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-accent-soft, rgba(8, 145, 178, 0.12));
  color: var(--wow-accent, #0891b2);
}

.admin-quick-card svg {
  width: 17px;
  height: 17px;
}

.admin-quick-card strong {
  color: var(--wow-text-strong, #0f172a);
}

.admin-quick-card small,
.admin-maintenance-note {
  color: var(--wow-text-muted, #64748b);
  line-height: 1.4;
}

.admin-quick-card > svg:last-child {
  align-self: end;
  color: var(--wow-text-muted, #64748b);
}

.admin-compact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  gap: var(--wow-space-4, 16px);
  align-items: start;
}

.admin-compact-grid .donation-admin-card {
  margin-bottom: 0;
}

.branding-admin-card {
  grid-column: 1 / -1;
  padding: var(--wow-space-5, 20px);
}

.branding-admin-card .card-heading {
  align-items: center;
  margin-bottom: var(--wow-space-4, 16px);
  border: 1px solid var(--wow-border, #d6e2ef);
  border-radius: var(--wow-radius-xl, 16px);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--wow-accent, #f43f46) 7%, transparent), transparent 64%),
    var(--wow-bg-elevated, #ffffff);
  padding: var(--wow-space-4, 16px);
  text-align: left;
}

.branding-admin-card .card-heading > div {
  min-width: 0;
}

.branding-admin-card .card-heading h3,
.branding-admin-card .card-heading p {
  text-align: left;
}

.branding-admin-heading small {
  display: inline-flex;
  width: max-content;
  margin-bottom: 2px;
  color: var(--wow-accent, #f43f46);
  font-size: 0.72rem;
  font-weight: var(--wow-weight-black, 800);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.branding-admin-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.58fr) minmax(0, 1.42fr);
  gap: var(--wow-space-5, 20px);
  align-items: stretch;
}

.branding-preview-card {
  display: grid;
  gap: var(--wow-space-4, 16px);
  border: 1px solid color-mix(in srgb, var(--branding-preview-color, var(--wow-accent, #f43f46)) 30%, var(--wow-border, #d6e2ef));
  border-radius: var(--wow-radius-xl, 16px);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--branding-preview-color, var(--wow-accent, #f43f46)) 12%, transparent), transparent 68%),
    var(--wow-bg-elevated, #ffffff);
  padding: var(--wow-space-4, 16px);
  box-shadow: var(--wow-shadow-sm, 0 8px 22px rgba(15, 23, 42, 0.06));
}

.branding-preview-top {
  display: grid;
  gap: 2px;
}

.branding-preview-top span,
.branding-color-chip small {
  color: var(--wow-text-muted, #64748b);
  font-size: 0.78rem;
  font-weight: var(--wow-weight-bold, 700);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.branding-preview-top small {
  color: var(--wow-text-soft, #64748b);
}

.branding-preview-window {
  overflow: hidden;
  border: 1px solid var(--wow-border, #d6e2ef);
  border-radius: var(--wow-radius-lg, 12px);
  background: var(--wow-bg, #f8fafc);
}

.branding-preview-strip {
  height: 6px;
  background: var(--branding-preview-color, var(--wow-accent, #f43f46));
}

.branding-preview-body {
  display: flex;
  gap: var(--wow-space-3, 12px);
  align-items: center;
  min-height: 94px;
  padding: var(--wow-space-4, 16px);
}

.branding-preview-mark {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--branding-preview-color, var(--wow-accent, #f43f46));
  color: #ffffff;
  font-weight: var(--wow-weight-black, 800);
}

.branding-preview-body strong {
  display: block;
  margin: 2px 0;
  color: var(--wow-text-strong, #0f172a);
}

.branding-preview-body small {
  color: var(--wow-text-muted, #64748b);
}

.branding-color-chip {
  display: flex;
  gap: var(--wow-space-3, 12px);
  align-items: center;
  width: max-content;
  max-width: 100%;
  border: 1px solid var(--wow-border, #d6e2ef);
  border-radius: 999px;
  background: var(--wow-bg-elevated, #ffffff);
  padding: 8px 12px 8px 8px;
}

.branding-color-chip > span {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--branding-preview-color, var(--wow-accent, #f43f46));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
}

.branding-color-chip strong {
  display: block;
  color: var(--wow-text-strong, #0f172a);
  font-size: 0.92rem;
  text-transform: uppercase;
}

.branding-admin-form {
  display: grid;
  gap: var(--wow-space-3, 12px);
  align-content: start;
  border: 1px solid var(--wow-border, #d6e2ef);
  border-radius: var(--wow-radius-xl, 16px);
  background: var(--wow-bg-elevated, #ffffff);
  padding: var(--wow-space-5, 20px);
}

.branding-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(96px, 120px) minmax(132px, 160px);
  gap: var(--wow-space-3, 12px);
  align-items: end;
}

.branding-field {
  display: grid;
  gap: 8px;
  color: var(--wow-text-strong, #0f172a);
  font-weight: var(--wow-weight-bold, 700);
  text-align: left;
}

.branding-field input {
  text-align: left;
}

.branding-field input[type="text"],
.branding-field input[type="color"] {
  width: 100%;
  min-height: 42px;
}

.branding-field input[type="color"] {
  cursor: pointer;
  padding: 5px;
}

.branding-upload-card {
  display: flex;
  gap: var(--wow-space-3, 12px);
  align-items: center;
  min-height: 70px;
  border: 1px dashed color-mix(in srgb, var(--wow-accent, #f43f46) 42%, var(--wow-border, #d6e2ef));
  border-radius: var(--wow-radius-lg, 12px);
  background: color-mix(in srgb, var(--wow-accent, #f43f46) 5%, var(--wow-bg-elevated, #ffffff));
  color: var(--wow-text, #24364b);
  cursor: pointer;
  padding: var(--wow-space-3, 12px);
  text-align: left;
}

.branding-upload-card input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.branding-upload-card > span {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--wow-accent, #f43f46) 14%, #ffffff);
  color: var(--wow-accent, #f43f46);
}

.branding-upload-card strong {
  display: block;
  margin-bottom: 2px;
  color: var(--wow-text-strong, #0f172a);
}

.branding-upload-card small {
  color: var(--wow-text-muted, #64748b);
}

.branding-checkline {
  display: flex;
  gap: var(--wow-space-2, 8px);
  align-items: center;
  color: var(--wow-text, #24364b);
  font-weight: var(--wow-weight-medium, 500);
}

.branding-checkline input {
  width: 18px;
  height: 18px;
}

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

.branding-actions .wow-btn {
  min-width: 190px;
}

.branding-form-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 240px);
  gap: var(--wow-space-3, 12px);
  align-items: stretch;
}

.branding-side-actions {
  display: grid;
  gap: var(--wow-space-3, 12px);
  align-content: stretch;
}

.branding-side-actions .branding-checkline {
  min-height: 34px;
  justify-content: center;
  border: 1px solid var(--wow-border, #d6e2ef);
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-bg, #f8fafc);
  padding: 8px 10px;
}

.branding-side-actions .wow-btn {
  width: 100%;
  min-height: 42px;
}

.branding-form-message {
  min-height: 20px;
  margin: 0;
  color: var(--wow-text-muted, #64748b);
  font-size: var(--wow-text-sm, 0.875rem);
}

.branding-form-message:empty {
  display: none;
}

.branding-form-message[data-type="info"] {
  color: var(--wow-accent, #f43f46);
}

.branding-form-message[data-type="error"] {
  color: var(--wow-danger, #ef4444);
}

.admin-maintenance-card {
  display: grid;
  gap: var(--wow-space-4, 16px);
  padding: var(--wow-space-5, 20px);
}

.admin-maintenance-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-maintenance-note {
  margin: 0;
}

.admin-grid {
  align-items: start;
}

.admin-filters {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) repeat(2, minmax(140px, 180px));
  gap: var(--wow-space-2, 8px);
  margin-bottom: var(--wow-space-3, 12px);
}

.admin-media-card {
  overflow: visible;
}

.admin-media-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wow-space-4, 16px);
}

.admin-media-section {
  min-width: 0;
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-lg, 12px);
  background: var(--wow-bg-elevated, #0f172a);
  padding: var(--wow-space-4, 16px);
}

.admin-media-list {
  display: grid;
  gap: var(--wow-space-3, 12px);
  max-height: calc(100vh - 360px);
  min-height: 260px;
  overflow: auto;
  padding-right: 4px;
}

.admin-exercises-stack .admin-media-list {
  max-height: calc(100vh - 300px);
}

.admin-media-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--wow-space-3, 12px);
  padding: var(--wow-space-3, 12px);
}

.admin-media-preview {
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-md, 8px);
  background:
    linear-gradient(135deg, rgba(34, 211, 238, 0.08), transparent 48%),
    var(--wow-bg, #0b0f1a);
}

.admin-media-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.admin-media-preview > div {
  display: grid;
  gap: 6px;
  justify-items: center;
  color: var(--wow-text-muted, #9ca3af);
  font-size: var(--wow-text-xs, 0.75rem);
}

.admin-media-preview svg {
  width: 24px;
  height: 24px;
  color: var(--wow-accent, #22d3ee);
}

.admin-media-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.admin-media-copy strong,
.admin-media-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-media-copy span {
  color: var(--wow-text-muted, #9ca3af);
  font-size: var(--wow-text-xs, 0.75rem);
  overflow-wrap: anywhere;
  white-space: normal;
}

.admin-media-copy,
.admin-media-actions,
.admin-user-row,
.log-item,
.meal-group,
.modal-panel,
.recipe-card,
.routine-card {
  min-width: 0;
}

.admin-media-upload {
  position: relative;
  inset: auto;
  justify-content: center;
  box-shadow: none;
}

.admin-media-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wow-space-2, 8px);
  justify-content: flex-end;
}

.admin-media-actions .wow-btn,
.admin-media-actions .image-upload-control {
  min-height: 34px;
}

.admin-library-stack {
  display: grid;
  gap: var(--wow-space-4, 16px);
}

.admin-register-card .tracker-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-register-card .tracker-form .full,
.admin-register-card .tracker-form button {
  grid-column: 1 / -1;
}

.admin-ranking-card .tracker-form {
  grid-template-columns: minmax(220px, 1fr) 180px minmax(230px, auto);
  align-items: end;
}

.admin-ranking-form .full {
  grid-column: 1 / -1;
}

.ranking-limit-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wow-space-2, 8px);
  align-items: end;
}

.admin-ranking-preview-card {
  display: grid;
  gap: var(--wow-space-4, 16px);
  padding: var(--wow-space-5, 20px);
}

.admin-notification-form {
  align-items: end;
}

.admin-notification-row {
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
}

.admin-notification-row small {
  display: block;
  max-width: 72ch;
}

.admin-notification-icon {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-accent-soft, rgba(8, 145, 178, 0.12));
  color: var(--wow-accent, #0891b2);
}

.admin-notification-icon svg {
  width: 18px;
  height: 18px;
}

.admin-notification-icon--success {
  background: rgba(34, 197, 94, 0.14);
  color: #16a34a;
}

.admin-notification-icon--warn {
  background: rgba(245, 158, 11, 0.15);
  color: #b45309;
}

.admin-notification-icon--danger {
  background: rgba(239, 68, 68, 0.14);
  color: #ef4444;
}

.admin-exercise-form textarea {
  min-height: 86px;
  resize: vertical;
}

.admin-exercises-list {
  max-height: 360px;
  overflow: auto;
  padding-right: 4px;
}

.admin-exercise-row small {
  display: block;
  margin-top: 4px;
  color: var(--wow-text-muted, #52677c);
  overflow-wrap: anywhere;
}

.admin-user-row {
  align-items: center;
}

.admin-users-list {
  max-height: calc(100vh - 260px);
}

.admin-user-modal-form {
  grid-template-columns: 1fr;
}

.admin-user-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wow-space-2, 8px);
  justify-content: flex-end;
  align-items: center;
}

.admin-user-actions .wow-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.admin-visibility-badge {
  border-color: transparent;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

.admin-visibility-badge--visible {
  background: color-mix(in srgb, var(--wow-success, #10b981) 14%, transparent);
  color: #047857;
}

.admin-visibility-badge--hidden {
  background: color-mix(in srgb, var(--wow-text-muted, #64748b) 13%, transparent);
  color: var(--wow-text-muted, #64748b);
}

.admin-user-form-message {
  margin: 0;
  padding: var(--wow-space-3, 12px);
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-bg-elevated, #0f172a);
  color: var(--wow-text, #d1d5db);
  line-height: 1.4;
}

.admin-user-form-message[data-type="error"] {
  border-color: color-mix(in srgb, #ef4444 45%, var(--wow-border, #253043));
  background: color-mix(in srgb, #ef4444 10%, var(--wow-bg-elevated, #0f172a));
  color: #ef4444;
}

.suggestion-filter {
  grid-template-columns: minmax(160px, 220px);
  margin-bottom: 0;
}

.suggestions-layout {
  grid-template-columns: 1fr;
  align-items: start;
}

.metric-card,
.progress-card,
.tool-card,
.log-card,
.guide-card,
.chart-card,
.recipe-card,
.routine-card,
.routine-option-card,
.meal-group,
.recommendation,
.note-box,
.empty-state {
  min-width: 0;
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-lg, 12px);
  background: var(--wow-surface, #111827);
  box-shadow: none;
  overflow-wrap: anywhere;
}

.wow-card {
  border-color: var(--wow-border, #253043);
  background: var(--wow-surface, #111827);
}

.metric-card,
.progress-card,
.tool-card,
.log-card,
.guide-card,
.chart-card,
.recipe-card,
.routine-card,
.routine-option-card {
  padding: var(--wow-space-5, 20px);
}

.module-form-card,
.module-history-card {
  align-self: start;
}

.module-form-card .tracker-form {
  margin: 0;
}

.training-log-grid {
  align-items: stretch;
  margin: var(--wow-space-6, 24px) 0 var(--wow-space-5, 20px);
}

.training-log-grid .module-form-card,
.training-log-grid .module-history-card {
  align-self: stretch;
}

.training-entry-form {
  align-items: end;
}

.training-entry-form label {
  align-self: start;
}

.training-submit {
  width: 100%;
  align-self: end;
}

.training-history-card {
  display: flex;
  flex-direction: column;
}

.training-history-card .log-list {
  flex: 1 1 auto;
}

.training-history-card .empty-state {
  min-height: 176px;
  display: grid;
  place-items: center;
}

.tracker-entry-card .tracker-form {
  margin-top: var(--wow-space-2, 8px);
}

.tracker-entry-card,
.tracker-layout .log-card {
  align-self: start;
}

.module-history-card .log-list {
  max-height: 520px;
}

.compact-empty-list {
  max-height: none;
}

.compact-empty-list .rich-empty {
  min-height: 176px;
  padding: var(--wow-space-5, 20px);
}

.metric-card::before,
.progress-card::before {
  display: none;
}

.metric-card {
  display: grid;
  gap: var(--wow-space-2, 8px);
  min-height: 92px;
}

.progress-card {
  position: relative;
  display: grid;
  gap: var(--wow-space-2, 8px);
  min-height: 132px;
  overflow: visible;
}

.progress-card::after {
  content: "";
  position: absolute;
  top: var(--wow-space-5, 20px);
  right: var(--wow-space-5, 20px);
  width: 34px;
  height: 34px;
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-accent-soft, rgba(34, 211, 238, 0.12));
}

.progress-card > svg {
  position: absolute;
  top: calc(var(--wow-space-5, 20px) + 8px);
  right: calc(var(--wow-space-5, 20px) + 8px);
  z-index: 1;
  width: 18px;
  height: 18px;
  color: var(--wow-accent, #22d3ee);
}

.metric-card span,
.progress-card span,
.wow-stat__label {
  color: var(--wow-text-muted, #9ca3af);
}

.metric-card strong,
.progress-card strong,
.wow-stat__value {
  color: var(--wow-text-strong, #f9fafb);
}

.metric-card .wow-stat__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--wow-text-xs, 0.75rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.metric-card .wow-stat__value {
  display: grid;
  gap: 6px;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  line-height: 1.1;
}

.metric-note {
  width: fit-content;
  border-radius: var(--wow-radius-full, 999px);
  padding: 3px 8px;
  background: var(--wow-accent-soft, rgba(34, 211, 238, 0.12));
  color: var(--wow-accent, #0891b2);
  font-size: var(--wow-text-xs, 0.75rem);
  font-weight: var(--wow-weight-semibold, 600);
  line-height: 1.2;
}

.metric-note--good {
  background: rgba(34, 197, 94, 0.14);
  color: #16a34a;
}

.metric-note--warn {
  background: rgba(245, 158, 11, 0.16);
  color: #b45309;
}

.metric-note--danger {
  background: rgba(239, 68, 68, 0.14);
  color: #dc2626;
}

.metric-note--info {
  background: var(--wow-accent-soft, rgba(34, 211, 238, 0.12));
  color: var(--wow-accent, #0891b2);
}

.progress-card span {
  font-size: var(--wow-text-xs, 0.75rem);
  font-weight: var(--wow-weight-semibold, 600);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.progress-card strong {
  font-size: var(--wow-text-2xl, 1.5rem);
  line-height: 1.1;
}

.progress-card p {
  margin: 0;
  color: var(--wow-text, #d1d5db);
  line-height: 1.45;
}

.metric-help {
  position: relative;
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-full, 999px);
  background: var(--wow-bg-elevated, #0f172a);
  color: var(--wow-text-muted, #9ca3af);
  cursor: help;
  padding: 0;
  font-size: 11px;
  line-height: 1;
}

.metric-help::before,
.metric-help::after {
  display: none;
}

.floating-tooltip {
  position: fixed;
  z-index: 1000;
  width: max-content;
  max-width: min(320px, calc(100vw - 24px));
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-text-strong, #f9fafb);
  color: var(--wow-bg, #0b0f1a);
  box-shadow: var(--wow-shadow-lg, 0 18px 40px rgba(0, 0, 0, 0.25));
  padding: var(--wow-space-2, 8px) var(--wow-space-3, 12px);
  opacity: 0;
  pointer-events: none;
  white-space: normal;
  text-align: left;
  font-size: var(--wow-text-xs, 0.75rem);
  font-weight: var(--wow-weight-medium, 500);
  line-height: 1.45;
  text-transform: none;
  letter-spacing: 0;
  transform: translateY(4px);
  transition:
    opacity var(--wow-transition-fast, 120ms ease),
    transform var(--wow-transition-fast, 120ms ease);
}

.floating-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 10px;
  height: 10px;
  background: var(--wow-text-strong, #f9fafb);
  transform: translateX(-50%) rotate(45deg);
}

.floating-tooltip[data-placement="top"]::after {
  bottom: -5px;
  border-right: 1px solid var(--wow-border, #253043);
  border-bottom: 1px solid var(--wow-border, #253043);
}

.floating-tooltip[data-placement="bottom"]::after {
  top: -5px;
  border-left: 1px solid var(--wow-border, #253043);
  border-top: 1px solid var(--wow-border, #253043);
}

.floating-tooltip[data-placement="right"]::after {
  top: 50%;
  left: -5px;
  border-left: 1px solid var(--wow-border, #253043);
  border-bottom: 1px solid var(--wow-border, #253043);
  transform: translateY(-50%) rotate(45deg);
}

.floating-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.metric-help:hover,
.metric-help:focus-visible {
  border-color: var(--wow-accent, #22d3ee);
  color: var(--wow-accent, #22d3ee);
}

@media (min-width: 901px) {
  .intro-panel [data-tooltip]::before,
  .intro-panel [data-tooltip]::after,
  .tab-button.wow-sidebar__item[data-tooltip]::after {
    display: none !important;
  }
}

.tool-card:hover,
.log-card:hover,
.progress-card:hover,
.metric-card:hover,
.recipe-card:hover,
.routine-card:hover,
.quick-card:hover {
  border-color: var(--wow-border-strong, #374151);
  background: var(--wow-surface-hover, #1f2937);
}

.recipe-card,
.routine-card,
.quick-card,
.choice-grid button {
  transition:
    border-color var(--wow-transition-base, 180ms ease),
    background var(--wow-transition-base, 180ms ease),
    transform var(--wow-transition-base, 180ms ease);
}

.recipe-card,
.routine-card {
  cursor: pointer;
}

.recipe-card:hover,
.routine-card:hover,
.quick-card:hover,
.choice-grid button:hover {
  transform: translateY(-1px);
}

.card-heading {
  display: flex;
  gap: var(--wow-space-3, 12px);
  align-items: flex-start;
  margin-bottom: var(--wow-space-4, 16px);
}

.card-heading span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-accent-soft, rgba(34, 211, 238, 0.12));
  color: var(--wow-accent, #22d3ee);
  font-weight: var(--wow-weight-bold, 700);
}

.card-heading span svg {
  width: 16px;
  height: 16px;
}

.subsection-heading {
  display: flex;
  gap: var(--wow-space-3, 12px);
  align-items: flex-start;
  margin: var(--wow-space-5, 20px) 0 var(--wow-space-3, 12px);
}

.subsection-heading > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-accent-soft, rgba(34, 211, 238, 0.12));
  color: var(--wow-accent, #22d3ee);
}

.subsection-heading svg {
  width: 16px;
  height: 16px;
}

.subsection-heading h3,
.subsection-heading p {
  margin: 0;
}

.subsection-heading h3 {
  color: var(--wow-text-strong, #f9fafb);
  font-size: var(--wow-text-base, 1rem);
}

.subsection-heading p {
  margin-top: 3px;
  color: var(--wow-text-muted, #9ca3af);
  font-size: var(--wow-text-sm, 0.875rem);
}

.plan-strategy,
.macro-panel {
  padding: var(--wow-space-5, 20px);
}

.plan-strategy {
  display: grid;
  gap: var(--wow-space-3, 12px);
}

.plan-strategy h3 {
  margin: 0;
  color: var(--wow-text-strong, #f9fafb);
  font-size: var(--wow-text-xl, 1.25rem);
}

.plan-strategy p {
  margin: 0;
  color: var(--wow-text, #d1d5db);
  line-height: 1.55;
}

.plan-facts {
  display: grid;
  gap: var(--wow-space-3, 12px);
  margin: var(--wow-space-2, 8px) 0 0;
}

.plan-facts div {
  border-top: 1px solid var(--wow-border, #253043);
  padding-top: var(--wow-space-3, 12px);
}

.plan-facts dt {
  color: var(--wow-text-muted, #9ca3af);
  font-size: var(--wow-text-xs, 0.75rem);
  font-weight: var(--wow-weight-semibold, 600);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.plan-facts dd {
  margin: 4px 0 0;
  color: var(--wow-text, #d1d5db);
  line-height: 1.45;
}

.training-energy-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wow-space-2, 8px);
  margin: var(--wow-space-2, 8px) 0 0;
  padding: 0;
  list-style: none;
}

.training-energy-summary li {
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-bg-elevated, #0f172a);
  padding: var(--wow-space-3, 12px);
}

.training-energy-summary span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--wow-text-muted, #9ca3af);
  font-size: var(--wow-text-xs, 0.75rem);
  font-weight: var(--wow-weight-semibold, 600);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.training-energy-summary .metric-help {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  letter-spacing: 0;
  text-transform: none;
}

.training-energy-summary strong {
  display: block;
  margin-top: 4px;
  color: var(--wow-text-strong, #f9fafb);
  font-size: var(--wow-text-sm, 0.875rem);
  line-height: 1.35;
}

.supplement-panel {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--wow-space-4, 16px);
  padding: var(--wow-space-5, 20px);
}

.supplement-panel .card-heading {
  align-items: center;
  padding-bottom: var(--wow-space-4, 16px);
  border-bottom: 1px solid var(--wow-border, #d6e2ee);
}

.supplement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--wow-space-3, 12px);
}

.supplement-card {
  --supplement-tone: var(--wow-accent, #0ea5e9);
  display: grid;
  gap: var(--wow-space-3, 12px);
  align-content: start;
  border: 1px solid color-mix(in srgb, var(--supplement-tone) 28%, var(--wow-border, #d6e2ee));
  border-radius: var(--wow-radius-lg, 12px);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--supplement-tone) 9%, transparent), transparent 62%),
    var(--wow-surface, #ffffff);
  padding: var(--wow-space-4, 16px);
}

.supplement-card--protein {
  --supplement-tone: #2563eb;
}

.supplement-card--strength {
  --supplement-tone: #7c3aed;
}

.supplement-card--energy {
  --supplement-tone: #f59e0b;
}

.supplement-card--hydration {
  --supplement-tone: #0891b2;
}

.supplement-card--endurance {
  --supplement-tone: #ea580c;
}

.supplement-card--recovery {
  --supplement-tone: #16a34a;
}

.supplement-card--health {
  --supplement-tone: #0ea5e9;
}

.supplement-card--sleep {
  --supplement-tone: #6366f1;
}

.supplement-card--joint {
  --supplement-tone: #b45309;
}

.supplement-card--digestive {
  --supplement-tone: #15803d;
}

.supplement-card header {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: var(--wow-space-3, 12px);
  align-items: center;
}

.supplement-card header > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--wow-radius-md, 8px);
  background: color-mix(in srgb, var(--supplement-tone) 16%, transparent);
  color: var(--supplement-tone);
}

.supplement-card header svg {
  width: 19px;
  height: 19px;
}

.supplement-card strong {
  display: block;
  color: var(--wow-text-strong, #0f172a);
}

.supplement-card small {
  display: inline-flex;
  width: fit-content;
  margin-top: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--supplement-tone) 14%, transparent);
  color: var(--supplement-tone);
  font-size: var(--wow-text-xs, 0.75rem);
  font-weight: var(--wow-weight-semibold, 600);
  padding: 4px 8px;
}

.supplement-card p,
.supplement-card dd,
.supplement-footnote {
  margin: 0;
  color: var(--wow-text-muted, #52677c);
  line-height: 1.45;
}

.supplement-card dl {
  display: grid;
  gap: var(--wow-space-2, 8px);
  margin: 0;
}

.supplement-card dl div {
  border-top: 1px solid var(--wow-border, #d6e2ee);
  padding-top: var(--wow-space-2, 8px);
}

.supplement-card dt {
  color: var(--wow-text-strong, #0f172a);
  font-size: var(--wow-text-xs, 0.75rem);
  font-weight: var(--wow-weight-bold, 700);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.supplement-card dd {
  margin-top: 3px;
}

.supplement-footnote {
  border-top: 1px solid var(--wow-border, #d6e2ee);
  padding-top: var(--wow-space-3, 12px);
  font-size: var(--wow-text-sm, 0.875rem);
}

.supplements-module,
.admin-supplements-stack {
  display: grid;
  gap: var(--wow-space-5, 20px);
}

.supplements-hero,
.supplement-type-panel,
.supplement-admin-panel,
.supplement-checklist {
  padding: var(--wow-space-5, 20px);
}

.supplements-hero--store {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--wow-primary, #f43f46) 9%, transparent), transparent 58%),
    var(--wow-surface, #ffffff);
}

.store-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wow-space-3, 12px);
  margin-top: var(--wow-space-4, 16px);
}

.store-hero-stats span {
  min-width: 0;
  display: grid;
  gap: 2px;
  border: 1px solid var(--wow-border, #d6e2ee);
  border-radius: var(--wow-radius-md, 10px);
  background: color-mix(in srgb, var(--wow-bg-muted, #eef6fb) 60%, transparent);
  color: var(--wow-text-muted, #64748b);
  padding: 12px 14px;
}

.store-hero-stats strong {
  color: var(--wow-text-strong, #0f172a);
  font-size: 1.35rem;
  line-height: 1;
}

.store-context-panel {
  display: grid;
  gap: var(--wow-space-3, 12px);
  margin-bottom: var(--wow-space-5, 20px);
  border: 1px solid color-mix(in srgb, var(--wow-primary, #f43f46) 22%, var(--wow-border, #d8d1c8));
  border-radius: var(--wow-radius-lg, 12px);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--wow-primary, #f43f46) 7%, transparent), transparent 56%),
    var(--wow-surface, #ffffff);
  padding: var(--wow-space-4, 16px);
}

.store-context-intro {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: var(--wow-space-3, 12px);
  align-items: center;
}

.store-context-intro > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--wow-radius-md, 10px);
  background: color-mix(in srgb, var(--wow-primary, #f43f46) 15%, transparent);
  color: var(--wow-primary, #f43f46);
}

.store-context-intro p,
.store-context-intro h4,
.store-context-intro small {
  min-width: 0;
  margin: 0;
}

.store-context-intro p {
  color: var(--wow-primary, #f43f46);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.store-context-intro h4 {
  color: var(--wow-text-strong, #0f172a);
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  line-height: 1.2;
}

.store-context-intro small {
  display: block;
  color: var(--wow-text-muted, #52677c);
  line-height: 1.4;
}

.store-context-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--wow-space-3, 12px);
}

.store-context-card {
  --store-context-tone: var(--wow-primary, #f43f46);
  min-width: 0;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
  border: 1px solid color-mix(in srgb, var(--store-context-tone) 22%, var(--wow-border, #d8d1c8));
  border-radius: var(--wow-radius-md, 10px);
  background: color-mix(in srgb, var(--wow-surface, #ffffff) 92%, var(--store-context-tone) 8%);
  padding: 10px;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.store-context-card--high {
  --store-context-tone: #10b981;
}

.store-context-card--medium {
  --store-context-tone: #f59e0b;
}

.store-context-card--low {
  --store-context-tone: #64748b;
}

.store-context-card--neutral {
  --store-context-tone: var(--wow-primary, #f43f46);
}

.store-context-card:hover,
.store-context-card:focus-visible {
  border-color: var(--store-context-tone);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--store-context-tone) 14%, transparent);
  transform: translateY(-2px);
}

.store-context-media {
  min-width: 0;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--store-context-tone) 20%, var(--wow-border, #d8d1c8));
  border-radius: var(--wow-radius-sm, 8px);
  background: color-mix(in srgb, var(--wow-surface, #ffffff) 85%, var(--store-context-tone) 15%);
  overflow: hidden;
}

.store-context-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}

.store-context-media span {
  max-width: 90%;
  color: color-mix(in srgb, var(--store-context-tone) 45%, transparent);
  font-size: 0.72rem;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.store-context-copy {
  min-width: 0;
  display: grid;
  gap: 6px;
  align-content: space-between;
}

.store-context-copy small,
.store-context-copy strong,
.store-context-copy p,
.store-context-copy footer {
  min-width: 0;
}

.store-context-copy small {
  display: block;
  color: var(--wow-text-muted, #64748b);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.store-context-copy strong {
  display: -webkit-box;
  color: var(--wow-text-strong, #0f172a);
  font-size: 0.9rem;
  line-height: 1.15;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.store-context-copy p {
  display: -webkit-box;
  margin: 0;
  color: var(--wow-text-muted, #52677c);
  font-size: 0.78rem;
  line-height: 1.3;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.store-context-copy footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.store-context-copy footer span {
  border-radius: 999px;
  background: color-mix(in srgb, var(--store-context-tone) 15%, transparent);
  color: var(--store-context-tone);
  font-size: 0.68rem;
  font-weight: 800;
  padding: 4px 8px;
  white-space: nowrap;
}

.store-context-copy footer b {
  color: var(--wow-text-strong, #0f172a);
  font-size: 0.82rem;
  white-space: nowrap;
}

.supplement-type-panel {
  display: grid;
  gap: var(--wow-space-4, 16px);
}

.supplement-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--wow-space-3, 12px);
}

.supplement-type-card {
  --supplement-tone: var(--wow-accent, #0ea5e9);
  display: grid;
  gap: var(--wow-space-3, 12px);
  align-content: start;
  border: 1px solid color-mix(in srgb, var(--supplement-tone) 24%, var(--wow-border, #d6e2ee));
  border-radius: var(--wow-radius-lg, 12px);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--supplement-tone) 7%, transparent), transparent 62%),
    var(--wow-surface, #ffffff);
  padding: var(--wow-space-4, 16px);
}

.supplement-type-card header {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: var(--wow-space-3, 12px);
  align-items: center;
}

.supplement-type-card header > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--wow-radius-md, 8px);
  background: color-mix(in srgb, var(--supplement-tone) 15%, transparent);
  color: var(--supplement-tone);
}

.supplement-type-card strong,
.supplement-type-card small,
.supplement-type-card p {
  min-width: 0;
  overflow-wrap: anywhere;
}

.supplement-type-card strong {
  display: block;
  color: var(--wow-text-strong, #0f172a);
}

.supplement-type-card small,
.supplement-type-card p {
  margin: 0;
  color: var(--wow-text-muted, #52677c);
  line-height: 1.45;
}

.supplements-priority-grid,
.supplement-checklist-grid,
.supplement-brand-grid {
  display: grid;
  gap: var(--wow-space-3, 12px);
}

.supplements-priority-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.supplements-priority-grid span,
.supplement-checklist-grid p {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--wow-space-3, 12px);
  border: 1px solid var(--wow-border, #d6e2ee);
  border-radius: var(--wow-radius-lg, 12px);
  background: color-mix(in srgb, var(--wow-accent-soft, #e0f2fe) 45%, transparent);
  color: var(--wow-text, #0f172a);
  padding: var(--wow-space-3, 12px);
  line-height: 1.35;
}

.supplements-priority-grid strong,
.supplement-checklist-grid svg {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-accent-soft, #e0f2fe);
  color: var(--wow-accent, #0891b2);
}

.supplement-checklist-grid p {
  align-items: flex-start;
  margin: 0;
}

.supplement-checklist-grid svg {
  padding: 7px;
}

.supplement-brand-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.supplement-brand-card {
  min-width: 0;
  display: grid;
  gap: var(--wow-space-3, 12px);
  align-content: start;
  border: 1px solid var(--wow-border, #d6e2ee);
  border-radius: var(--wow-radius-lg, 12px);
  background: var(--wow-surface, #ffffff);
  padding: var(--wow-space-4, 16px);
}

.supplement-brand-card header {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: var(--wow-space-3, 12px);
  align-items: center;
}

.supplement-brand-card header > span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-accent-soft, #e0f2fe);
  color: var(--wow-accent, #0891b2);
}

.supplement-brand-card strong,
.supplement-brand-card small,
.supplement-brand-card dd,
.supplement-brand-card p {
  min-width: 0;
  overflow-wrap: anywhere;
}

.supplement-brand-card small,
.supplement-brand-card dd,
.supplement-brand-card p {
  color: var(--wow-text-muted, #52677c);
}

.supplement-brand-card dl {
  display: grid;
  gap: var(--wow-space-2, 8px);
  margin: 0;
}

.supplement-brand-card dt {
  color: var(--wow-text-strong, #0f172a);
  font-size: var(--wow-text-xs, 0.75rem);
  font-weight: var(--wow-weight-bold, 700);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.supplement-brand-card dd,
.supplement-brand-card p {
  margin: 0;
  line-height: 1.45;
}

.supplement-brand-link {
  width: fit-content;
}

.storefront-shopbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px 22px;
  align-items: end;
}

.storefront-filter-group {
  display: grid;
  gap: 8px;
}

.storefront-filter-group--objective {
  grid-column: 1 / 2;
}

.storefront-filter-group p {
  margin: 0;
  color: var(--wow-text-muted, #64748b);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.36em;
  text-transform: uppercase;
}

.storefront-toolbar,
.storefront-objectives {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.storefront-filter,
.storefront-objective {
  min-height: 28px;
  border: 1px solid var(--wow-border, #d8d1c8);
  border-radius: 0;
  background: var(--wow-surface, #ffffff);
  color: var(--wow-text-strong, #0f172a);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 13px;
  cursor: pointer;
}

.storefront-filter:hover,
.storefront-objective:hover,
.storefront-cart:hover,
.store-cart-button:hover {
  border-color: var(--wow-primary, #f43f46);
  color: var(--wow-primary, #f43f46);
}

.storefront-filter.is-active {
  border-color: var(--wow-text-strong, #111827);
  background: var(--wow-text-strong, #111827);
  color: var(--wow-surface, #ffffff);
}

.storefront-objective {
  border-color: transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--wow-bg-muted, #f4f1ec) 78%, var(--wow-surface, #fff));
  padding-inline: 12px;
}

.storefront-objective.is-active {
  background: var(--wow-primary, #f43f46);
  color: var(--wow-surface, #ffffff);
}

.storefront-cart {
  min-height: 39px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--wow-text-strong, #111827);
  background: transparent;
  color: var(--wow-text-strong, #111827);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 9px 18px;
}

.storefront-cart svg {
  width: 16px;
  height: 16px;
}

.storefront-result-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--wow-border, #d8d1c8);
  color: var(--wow-text-muted, #64748b);
  font-size: 0.86rem;
}

.storefront-result-line strong {
  color: var(--wow-text-strong, #0f172a);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.store-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 250px));
  justify-content: start;
  gap: clamp(16px, 1.8vw, 24px);
  align-items: start;
  margin-top: 10px;
}

.store-product-card {
  min-width: 0;
  display: grid;
  gap: 9px;
  border: 1px solid var(--wow-border, #d8d1c8);
  border-radius: 10px;
  background: var(--wow-surface, #ffffff);
  padding: 10px;
  box-shadow: 0 14px 30px color-mix(in srgb, var(--wow-shadow, #0f172a) 7%, transparent);
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.store-product-media {
  display: grid;
  place-items: center;
  min-height: 150px;
  max-height: 180px;
  aspect-ratio: 1 / 0.82;
  border: 1px solid var(--wow-border, #d8d1c8);
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--wow-surface, #ffffff) 92%, var(--wow-bg-muted, #f4f1ec)), color-mix(in srgb, var(--wow-surface, #ffffff) 72%, var(--wow-bg-muted, #f4f1ec)));
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.store-product-card:hover,
.store-product-card:focus-visible {
  border-color: color-mix(in srgb, var(--wow-primary, #f43f46) 55%, var(--wow-border, #d8d1c8));
  box-shadow: 0 18px 36px color-mix(in srgb, var(--wow-shadow, #0f172a) 12%, transparent);
  transform: translateY(-2px);
}

.store-product-card:hover .store-product-media,
.store-product-card:focus-visible .store-product-media {
  border-color: var(--wow-primary, #f43f46);
}

.store-product-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
}

.store-product-media > div {
  display: grid;
  place-items: center;
  text-align: center;
}

.store-product-placeholder span {
  max-width: 86%;
  color: color-mix(in srgb, var(--wow-text-muted, #64748b) 22%, transparent);
  font-size: clamp(1.4rem, 2.1vw, 2.1rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.store-product-copy {
  display: grid;
  gap: 5px;
}

.store-product-copy small {
  color: var(--wow-text-muted, #64748b);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.store-product-copy strong {
  color: var(--wow-text-strong, #0f172a);
  font-size: 1rem;
  line-height: 1.2;
}

.store-product-copy b {
  color: var(--wow-primary, #f43f46);
  font-size: 1.12rem;
  line-height: 1;
}

.store-product-card footer {
  margin-top: 4px;
  padding: 0;
  border: 0;
}

.store-cart-button {
  width: 100%;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--wow-text-strong, #111827);
  border-radius: 0;
  background: transparent;
  color: var(--wow-text-strong, #111827);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 8px 10px;
  cursor: pointer;
}

.store-cart-button:hover,
.store-cart-button:focus-visible,
.store-cart-button--solid {
  background: var(--wow-text-strong, #111827);
  color: var(--wow-surface, #ffffff);
}

.store-cart-button[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.store-product-modal {
  max-width: min(980px, 94vw);
}

.store-detail-layout {
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.1fr);
  gap: var(--wow-space-5, 20px);
}

.store-detail-media {
  min-height: 360px;
  display: grid;
  place-items: center;
  border: 1px solid var(--wow-border, #d8d1c8);
  background: color-mix(in srgb, var(--wow-surface, #ffffff) 82%, var(--wow-bg-muted, #f4f1ec));
}

.store-detail-media--gallery {
  align-content: start;
  gap: 10px;
  padding: 10px;
}

.store-detail-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.store-detail-gallery-main {
  width: 100%;
  min-height: 330px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--wow-surface, #ffffff) 86%, var(--wow-bg-muted, #f4f1ec));
  overflow: hidden;
}

.store-detail-gallery-main img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 330px;
  object-fit: cover;
}

.store-detail-thumbs {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  gap: 8px;
}

.store-detail-thumbs img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border: 1px solid var(--wow-border, #d8d1c8);
  border-radius: var(--wow-radius-sm, 6px);
  object-fit: cover;
}

.store-detail-media span {
  color: color-mix(in srgb, var(--wow-text-muted, #64748b) 24%, transparent);
  font-size: clamp(1.8rem, 3vw, 3rem);
  font-weight: 900;
  text-transform: uppercase;
}

.store-detail-info {
  display: grid;
  align-content: start;
  gap: var(--wow-space-3, 12px);
}

.store-detail-info > small {
  color: var(--wow-text-muted, #64748b);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.store-detail-info h3 {
  margin: 0;
  color: var(--wow-text-strong, #0f172a);
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  letter-spacing: 0.02em;
}

.store-detail-info > strong {
  color: var(--wow-primary, #f43f46);
  font-size: 1.6rem;
}

.store-detail-info p,
.store-detail-info dd,
.store-advice-note,
.store-advice-card p,
.store-advice-list p {
  color: var(--wow-text-muted, #52677c);
  line-height: 1.45;
}

.store-detail-pills,
.store-detail-info dl,
.store-detail-advice {
  display: grid;
  gap: var(--wow-space-3, 12px);
}

.store-detail-pills {
  display: flex;
  flex-wrap: wrap;
}

.store-detail-pills span {
  border-radius: 999px;
  background: var(--wow-bg-muted, #eef6fb);
  color: var(--wow-text-muted, #52677c);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 9px;
}

.store-detail-info dl {
  margin: 0;
}

.store-detail-info dl div {
  border-top: 1px solid var(--wow-border, #d6e2ee);
  padding-top: var(--wow-space-2, 8px);
}

.store-detail-info dt,
.store-detail-advice h4 {
  color: var(--wow-text-strong, #0f172a);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.store-detail-info dd {
  margin: 3px 0 0;
}

.store-detail-advice {
  margin-top: var(--wow-space-5, 20px);
}

.store-detail-advice section {
  display: grid;
  gap: var(--wow-space-3, 12px);
  border: 1px solid var(--wow-border, #d6e2ee);
  border-radius: var(--wow-radius-md, 10px);
  padding: var(--wow-space-4, 16px);
}

.store-detail-advice h4 {
  margin: 0;
}

.store-advice-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: var(--wow-space-3, 12px);
}

.store-advice-card > span,
.store-advice-list svg {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-accent-soft, #e0f2fe);
  color: var(--wow-accent, #0891b2);
  padding: 8px;
}

.store-advice-card strong {
  display: block;
  color: var(--wow-text-strong, #0f172a);
}

.store-advice-card p,
.store-advice-card small,
.store-advice-list p,
.store-advice-note {
  margin: 0;
}

.store-advice-list {
  display: grid;
  gap: var(--wow-space-2, 8px);
}

.store-advice-list p {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: var(--wow-space-3, 12px);
  align-items: center;
}

.store-admin-image-field .image-upload-control {
  min-height: 92px;
}

.store-admin-image-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.store-admin-image-preview:empty {
  display: none;
}

.store-admin-image-preview img,
.store-admin-image-thumb img {
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid var(--wow-border, #d8d1c8);
  border-radius: var(--wow-radius-md, 10px);
  object-fit: cover;
  background: var(--wow-bg-muted, #f4f1ec);
}

.store-admin-image-thumb {
  position: relative;
  display: grid;
  gap: 6px;
  margin: 0;
  min-width: 0;
}

.store-admin-image-thumb button {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid var(--wow-border, #d8d1c8);
  border-radius: 999px;
  background: color-mix(in srgb, var(--wow-surface, #ffffff) 90%, transparent);
  color: var(--wow-text-strong, #0f172a);
  padding: 0;
  cursor: pointer;
}

.store-admin-image-thumb button svg {
  width: 14px;
  height: 14px;
}

.store-admin-image-thumb--saved img {
  border-color: color-mix(in srgb, var(--wow-success, #16a34a) 35%, var(--wow-border, #d8d1c8));
}

.store-admin-image-thumb figcaption {
  color: var(--wow-text-muted, #52677c);
  font-size: 0.72rem;
  font-weight: 800;
  text-align: center;
}

.store-admin-image-note {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--wow-danger, #f43f46);
  font-size: 0.78rem;
  font-weight: 800;
}

.admin-supplement-row small {
  display: block;
  margin-top: 4px;
  color: var(--wow-text-muted, #52677c);
  overflow-wrap: anywhere;
}

.admin-supplement-row {
  display: grid;
  grid-template-columns: 72px minmax(260px, 1fr) 120px auto;
  gap: 12px;
  align-items: center;
  min-height: 0;
  padding: 10px 12px;
}

.admin-supplement-thumb {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 1px solid var(--wow-border, #d8d1c8);
  border-radius: var(--wow-radius-sm, 6px);
  background: color-mix(in srgb, var(--wow-surface, #fff) 82%, var(--wow-bg-muted, #f4f1ec));
  overflow: hidden;
}

.admin-supplement-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}

.admin-supplement-thumb span {
  color: var(--wow-primary, #f43f46);
  font-size: 0.8rem;
  font-weight: 900;
}

.admin-supplement-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.admin-supplement-title-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.admin-supplement-main strong,
.admin-supplement-main span,
.admin-supplement-main small {
  overflow-wrap: anywhere;
}

.admin-supplement-title-line strong {
  color: var(--wow-text-strong, #0f172a);
  font-size: 0.98rem;
}

.admin-supplement-main > span {
  color: var(--wow-text-muted, #52677c);
  font-size: 0.88rem;
  font-weight: 700;
}

.admin-supplement-main > small {
  display: -webkit-box;
  margin-top: 0;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.admin-supplement-meta {
  display: grid;
  justify-items: end;
  gap: 4px;
  white-space: nowrap;
}

.admin-supplement-meta strong {
  color: var(--wow-primary, #f43f46);
  font-size: 1rem;
}

.admin-supplement-meta small {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-weight: 800;
}

.admin-supplement-meta svg {
  width: 14px;
  height: 14px;
}

.admin-supplement-row .admin-user-actions {
  display: flex;
  flex-wrap: nowrap;
  min-width: 0;
}

.admin-supplement-row .admin-user-actions .wow-btn {
  min-height: 34px;
  padding: 7px 10px;
  justify-content: center;
}

.inline-note--success {
  border-color: color-mix(in srgb, var(--wow-success, #16a34a) 35%, var(--wow-border, #d6e2ee));
  background: color-mix(in srgb, var(--wow-success, #16a34a) 9%, var(--wow-surface, #ffffff));
}

.detail-section {
  display: grid;
  gap: var(--wow-space-4, 16px);
  margin-top: var(--wow-space-6, 24px);
}

.detail-heading {
  display: flex;
  gap: var(--wow-space-3, 12px);
  align-items: flex-start;
}

.detail-heading > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-accent-soft, rgba(34, 211, 238, 0.12));
  color: var(--wow-accent, #22d3ee);
}

.detail-heading svg {
  width: 17px;
  height: 17px;
}

.detail-heading h3 {
  margin: 0;
  color: var(--wow-text-strong, #f9fafb);
  font-size: var(--wow-text-xl, 1.25rem);
}

.detail-heading p {
  margin: 4px 0 0;
  color: var(--wow-text-muted, #9ca3af);
}

.detail-heading--compact {
  margin-bottom: 0;
}

.plan-detail-switcher {
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-xl, 16px);
  background: var(--wow-bg, #020617);
  padding: var(--wow-space-5, 20px);
}

.plan-detail-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wow-space-3, 12px);
}

.plan-detail-tabs button {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 3px var(--wow-space-3, 12px);
  align-items: center;
  min-height: 78px;
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-lg, 12px);
  background: var(--wow-bg-elevated, #0f172a);
  color: var(--wow-text, #d1d5db);
  cursor: pointer;
  padding: var(--wow-space-4, 16px);
  text-align: left;
  transition:
    border-color var(--wow-transition-fast, 120ms ease),
    background var(--wow-transition-fast, 120ms ease),
    box-shadow var(--wow-transition-fast, 120ms ease),
    transform var(--wow-transition-fast, 120ms ease);
}

.plan-detail-tabs button:hover {
  border-color: var(--wow-border-strong, #374151);
  background: var(--wow-surface-hover, #1f2937);
  transform: translateY(-1px);
}

.plan-detail-tabs button.is-active {
  border-color: var(--wow-accent, #22d3ee);
  background: var(--wow-accent-soft, rgba(34, 211, 238, 0.12));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wow-accent, #22d3ee) 20%, transparent);
}

.plan-detail-tabs button svg {
  grid-row: span 2;
  width: 18px;
  height: 18px;
  color: var(--wow-accent, #22d3ee);
}

.plan-detail-tabs button span {
  min-width: 0;
  color: var(--wow-text-strong, #f9fafb);
  font-weight: var(--wow-weight-bold, 700);
  line-height: 1.25;
}

.plan-detail-tabs button small {
  min-width: 0;
  color: var(--wow-text-muted, #9ca3af);
  font-size: var(--wow-text-xs, 0.75rem);
  line-height: 1.35;
}

.plan-detail-content {
  min-width: 0;
}

.plan-detail-panel {
  display: grid;
  gap: var(--wow-space-4, 16px);
}

.inline-note {
  display: flex;
  gap: var(--wow-space-3, 12px);
  align-items: flex-start;
  padding: var(--wow-space-4, 16px);
}

.inline-note > svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--wow-accent, #22d3ee);
}

.inline-note p,
.safety-list p {
  margin: 0;
  color: var(--wow-text, #d1d5db);
  line-height: 1.55;
}

.safety-list {
  display: grid;
  gap: var(--wow-space-3, 12px);
  padding: var(--wow-space-4, 16px);
}

.safety-list strong,
.safety-list p {
  display: flex;
  gap: var(--wow-space-2, 8px);
  align-items: flex-start;
}

.safety-list svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--wow-accent, #22d3ee);
  margin-top: 2px;
}

.card-heading h3 {
  margin: 0 0 4px;
  color: var(--wow-text-strong, #f9fafb);
  font-size: var(--wow-text-base, 1rem);
}

.card-heading p,
label small,
.log-item span,
.recipe-card small,
.routine-card small,
.quick-card span {
  color: var(--wow-text-muted, #9ca3af);
}

/* Forms */
label {
  display: grid;
  gap: var(--wow-space-2, 8px);
  min-width: 0;
  color: var(--wow-text, #d1d5db);
  font-size: var(--wow-text-sm, 0.875rem);
  font-weight: var(--wow-weight-medium, 500);
}

.field-label {
  color: var(--wow-text, #d1d5db);
  font-size: var(--wow-text-sm, 0.875rem);
  font-weight: var(--wow-weight-semibold, 600);
}

.field-has-error input:not([type="hidden"]),
.field-has-error select,
.field-has-error textarea,
.field-has-error .select-combobox,
.field-has-error .wow-segmented,
.field-has-error .choice-grid,
.field-has-error .multi-choice-select,
.field-has-error.target-date-field {
  border-color: var(--wow-danger, #ef4444) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wow-danger, #ef4444) 13%, transparent);
}

.field-has-error,
.field-has-error > span,
.field-has-error > .field-label {
  color: var(--wow-danger, #ef4444);
}

.target-date-field {
  display: grid;
  gap: var(--wow-space-3, 12px);
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-lg, 12px);
  background: color-mix(in srgb, var(--wow-accent, #f43f46) 4%, var(--wow-surface, #111827));
  padding: var(--wow-space-4, 16px);
}

.target-date-controls {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wow-space-3, 12px);
}

.target-date-chip-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--wow-space-3, 12px);
}

.target-date-chip {
  position: relative;
  min-width: 0;
  min-height: 72px;
  display: grid;
  gap: 4px;
  align-content: center;
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-bg-elevated, #0f172a);
  color: var(--wow-text, #d1d5db);
  cursor: pointer;
  padding: var(--wow-space-3, 12px) var(--wow-space-4, 16px);
  text-align: left;
  transition:
    border-color var(--wow-transition-fast, 120ms ease),
    background var(--wow-transition-fast, 120ms ease),
    color var(--wow-transition-fast, 120ms ease),
    transform var(--wow-transition-fast, 120ms ease);
}

.target-date-chip::before {
  content: "";
  position: absolute;
  top: var(--wow-space-3, 12px);
  right: var(--wow-space-3, 12px);
  width: 12px;
  height: 12px;
  border: 1px solid var(--wow-border-strong, #374151);
  border-radius: 999px;
  background: var(--wow-surface, #111827);
}

.target-date-chip strong {
  color: var(--wow-text-strong, #f9fafb);
  font-size: var(--wow-text-sm, 0.875rem);
  line-height: 1.25;
  padding-right: 18px;
}

.target-date-chip span {
  color: var(--wow-text-muted, #9ca3af);
  font-size: var(--wow-text-xs, 0.75rem);
  line-height: 1.35;
}

.target-date-chip:hover {
  border-color: color-mix(in srgb, var(--wow-accent, #f43f46) 45%, var(--wow-border, #253043));
  transform: translateY(-1px);
}

.target-date-chip.is-selected {
  border-color: var(--wow-accent, #f43f46);
  background: color-mix(in srgb, var(--wow-accent, #f43f46) 10%, var(--wow-bg-elevated, #0f172a));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wow-accent, #f43f46) 20%, transparent);
}

.target-date-chip.is-selected::before {
  border-color: var(--wow-accent, #f43f46);
  background: var(--wow-accent, #f43f46);
  box-shadow: inset 0 0 0 3px var(--wow-bg-elevated, #0f172a);
}

.target-date-chip.is-selected strong {
  color: var(--wow-accent, #f43f46);
}

.target-date-custom {
  max-width: 340px;
}

.stack-form,
.tracker-form,
.form-grid,
.diagnosis-grid,
.nutrition-fields,
.searchable-select,
.wow-select {
  min-width: 0;
}

.wow-label {
  color: var(--wow-text, #d1d5db);
}

.field-label-line {
  display: flex !important;
  align-items: center;
  gap: 6px;
  min-width: 0;
  vertical-align: middle;
}

.field-help-trigger {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  border-color: color-mix(in srgb, var(--wow-accent, #f43f46) 24%, var(--wow-border, #d6dbe4));
  background: color-mix(in srgb, var(--wow-accent, #f43f46) 8%, var(--wow-surface, #ffffff));
  color: var(--wow-accent, #f43f46);
  font-size: 10px;
  font-weight: var(--wow-weight-bold, 700);
  transform: translateY(-1px);
}

.inline-help-hidden {
  display: none !important;
}

input,
select,
textarea,
.select-combobox {
  width: 100%;
  min-height: 40px;
  padding: 0 var(--wow-space-3, 12px);
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-surface, #111827);
  color: var(--wow-text, #d1d5db);
  box-shadow: none;
}

.password-field {
  position: relative;
  display: block;
  width: 100%;
}

.password-field input {
  padding-right: 46px;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 7px;
  width: 32px;
  height: 32px;
  min-height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--wow-radius-sm, 6px);
  background: transparent;
  color: var(--wow-text-muted, #9ca3af);
  cursor: pointer;
}

.password-toggle:hover,
.password-toggle:focus-visible {
  background: var(--wow-accent-soft, rgba(244, 63, 70, 0.12));
  color: var(--wow-accent, #f43f46);
}

.password-toggle svg {
  width: 18px;
  height: 18px;
}

textarea {
  padding-top: var(--wow-space-3, 12px);
  padding-bottom: var(--wow-space-3, 12px);
}

input[type="checkbox"],
input[type="radio"],
input[type="file"] {
  width: auto;
  min-height: initial;
  padding: 0;
}

input:focus,
select:focus,
textarea:focus,
.select-combobox:focus {
  border-color: var(--wow-accent, #22d3ee);
  outline: 3px solid var(--wow-accent-soft, rgba(34, 211, 238, 0.12));
  outline-offset: 0;
}

::placeholder {
  color: var(--wow-text-muted, #9ca3af);
  opacity: 0.78;
}

select.wow-input {
  appearance: auto;
}

select[data-compact-multi] {
  display: none !important;
}

select.native-select-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  clip-path: inset(50%);
}

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

.searchable-select {
  position: relative;
  width: 100%;
}

.searchable-select .select-combobox {
  padding-right: 40px;
}

.searchable-select--compact .select-combobox {
  min-height: 44px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.searchable-select--multi .select-combobox {
  cursor: pointer;
}

.searchable-select::after {
  content: "";
  position: absolute;
  top: 16px;
  right: 15px;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--wow-text-muted, #9ca3af);
  border-bottom: 1.5px solid var(--wow-text-muted, #9ca3af);
  transform: rotate(45deg);
  pointer-events: none;
}

.select-options {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 90;
  display: none;
  gap: 2px;
  overflow: auto;
  max-height: 260px;
  padding: 6px;
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-surface, #111827);
  box-shadow: var(--wow-shadow-lg, 0 18px 40px rgba(0, 0, 0, 0.25));
}

.searchable-select.open .select-options {
  display: grid;
}

.select-option {
  width: 100%;
  min-height: 34px;
  border: 0;
  border-radius: calc(var(--wow-radius-md, 8px) - 2px);
  background: transparent;
  color: var(--wow-text, #d1d5db);
  cursor: pointer;
  padding: 8px 10px;
  text-align: left;
}

.select-option-group {
  padding: 8px 10px 4px;
  color: var(--wow-text-muted, #64748b);
  font-size: var(--wow-text-xs, 0.75rem);
  font-weight: var(--wow-weight-bold, 700);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.searchable-select--multi .select-option {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
}

.select-check {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--wow-border-strong, #374151);
  border-radius: 5px;
  color: var(--wow-accent, #22d3ee);
  font-size: 12px;
  font-weight: var(--wow-weight-bold, 700);
}

.select-option.active .select-check {
  border-color: var(--wow-accent, #22d3ee);
  background: var(--wow-accent-soft, rgba(34, 211, 238, 0.12));
}

.select-option:hover,
.select-option.active {
  background: var(--wow-accent-soft, rgba(34, 211, 238, 0.12));
  color: var(--wow-accent, #22d3ee);
}

.select-option.empty {
  cursor: default;
  color: var(--wow-text-muted, #9ca3af);
}

.wow-select {
  position: relative;
  width: 100%;
}

.wow-select__trigger {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: var(--wow-space-2, 8px);
  padding: var(--wow-space-2, 8px) var(--wow-space-3, 12px);
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-surface, #111827);
  color: var(--wow-text, #d1d5db);
  cursor: pointer;
  text-align: left;
}

.wow-select__trigger:hover {
  border-color: var(--wow-border-strong, #374151);
}

.wow-select--open .wow-select__trigger,
.wow-select__trigger:focus-visible {
  border-color: var(--wow-accent, #22d3ee);
  outline: 3px solid var(--wow-accent-soft, rgba(34, 211, 238, 0.12));
}

.wow-select__value {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.wow-select__placeholder {
  overflow: hidden;
  color: var(--wow-text-muted, #9ca3af);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wow-select__caret {
  flex: 0 0 auto;
  color: var(--wow-text-muted, #9ca3af);
  transition: transform var(--wow-transition-fast, 120ms ease);
}

.wow-select--open .wow-select__caret {
  transform: rotate(180deg);
}

.wow-select__caret svg {
  width: 16px;
  height: 16px;
}

.wow-select__menu {
  position: absolute;
  z-index: 90;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  display: none;
  overflow: hidden;
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-surface, #111827);
  box-shadow: var(--wow-shadow-lg, 0 14px 40px rgba(0, 0, 0, 0.28));
}

.wow-select--open .wow-select__menu {
  display: grid;
}

.wow-select__search {
  display: flex;
  align-items: center;
  gap: var(--wow-space-2, 8px);
  padding: var(--wow-space-2, 8px) var(--wow-space-3, 12px);
  border-bottom: 1px solid var(--wow-border, #253043);
  color: var(--wow-text-muted, #9ca3af);
}

.wow-select__search svg {
  width: 15px;
  height: 15px;
}

.wow-select__search input {
  min-height: 32px;
  padding: 0 var(--wow-space-1, 4px);
  border: 0;
  background: transparent;
  outline: 0;
}

.wow-select__search input:focus {
  border: 0;
  outline: 0;
}

.wow-select__options {
  max-height: 240px;
  display: grid;
  gap: 2px;
  overflow-y: auto;
  margin: 0;
  padding: var(--wow-space-1, 4px);
  list-style: none;
}

.wow-select__option {
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: var(--wow-space-2, 8px);
  padding: var(--wow-space-2, 8px) var(--wow-space-3, 12px);
  border-radius: calc(var(--wow-radius-md, 8px) - 2px);
  color: var(--wow-text, #d1d5db);
  cursor: pointer;
  user-select: none;
}

.wow-select__option:hover {
  background: var(--wow-surface-hover, #1f2937);
}

.wow-select__option--selected {
  background: var(--wow-accent-soft, rgba(34, 211, 238, 0.12));
  color: var(--wow-accent, #22d3ee);
  font-weight: var(--wow-weight-semibold, 600);
}

.wow-select__check {
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--wow-border-strong, #374151);
  border-radius: 5px;
  color: transparent;
}

.wow-select__check svg {
  width: 12px;
  height: 12px;
}

.wow-select__option--selected .wow-select__check {
  border-color: var(--wow-accent, #22d3ee);
  background: var(--wow-accent, #22d3ee);
  color: var(--wow-text-inverse, #031318);
}

.wow-select__option-body {
  min-width: 0;
}

.wow-select__chip {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--wow-accent-soft, rgba(34, 211, 238, 0.12));
  color: var(--wow-accent, #22d3ee);
  font-size: var(--wow-text-xs, 0.75rem);
  font-weight: var(--wow-weight-semibold, 600);
}

.wow-select__chip-remove {
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0;
}

.wow-select__chip-remove svg {
  width: 11px;
  height: 11px;
}

.wow-select__empty {
  padding: var(--wow-space-5, 20px);
  color: var(--wow-text-muted, #9ca3af);
  text-align: center;
}

.wow-select__empty[hidden] {
  display: none;
}

.wow-select-native-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  clip-path: inset(50%);
}

.segmented-field {
  align-content: start;
}

.segmented-field > span {
  color: var(--wow-text, #d1d5db);
  font-size: var(--wow-text-sm, 0.875rem);
  font-weight: var(--wow-weight-medium, 500);
}

.segmented-field .wow-segmented {
  min-height: 42px;
  border-color: var(--wow-border, #253043);
  background: var(--wow-bg-elevated, #0f172a);
}

.segmented-field .wow-segmented__btn {
  min-height: 34px;
  border: 0;
  color: var(--wow-text-muted, #9ca3af);
}

.segmented-field .wow-segmented__btn:focus-visible {
  outline: 3px solid var(--wow-accent-soft, rgba(34, 211, 238, 0.12));
  outline-offset: 2px;
}

.segmented-field .wow-segmented__btn--active {
  background: var(--wow-accent, #22d3ee);
  color: var(--wow-text-inverse, #0b0f1a);
}

.segmented-field .wow-segmented__btn svg {
  width: 16px;
  height: 16px;
}

.segmented-field .wow-help {
  color: var(--wow-danger, #ef4444);
}

.segmented-field .segmented-error {
  border-color: var(--wow-danger, #ef4444);
}

.primary-action,
.secondary-action,
.modal-close,
.help-panel summary,
.log-item button {
  min-height: 40px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--wow-space-2, 8px);
  border-radius: var(--wow-radius-md, 8px);
  padding: 0 var(--wow-space-4, 16px);
  font-size: var(--wow-text-sm, 0.875rem);
  font-weight: var(--wow-weight-medium, 500);
  box-shadow: none;
  cursor: pointer;
  white-space: nowrap;
}

.primary-action svg,
.secondary-action svg,
.modal-close svg,
.log-item button svg,
.image-upload-control svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.primary-action {
  border: 1px solid var(--wow-accent, #22d3ee);
  background: var(--wow-accent, #22d3ee);
  color: var(--wow-text-inverse, #0b0f1a);
}

.secondary-action,
.modal-close,
.help-panel summary {
  border: 1px solid var(--wow-border, #253043);
  background: var(--wow-surface, #111827);
  color: var(--wow-text, #d1d5db);
}

.help-panel {
  margin-bottom: var(--wow-space-4, 16px);
}

.help-panel summary {
  width: max-content;
  list-style: none;
}

.help-panel summary::-webkit-details-marker {
  display: none;
}

.help-panel[open] summary {
  border-color: var(--wow-accent, #22d3ee);
  background: var(--wow-accent-soft, rgba(34, 211, 238, 0.12));
  color: var(--wow-accent, #22d3ee);
}

.help-panel .guide-card {
  margin-top: var(--wow-space-3, 12px);
  padding: var(--wow-space-5, 20px);
}

.modal-close.wow-modal__close {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
}

/* Choices */
.choice-block {
  display: grid;
  gap: var(--wow-space-3, 12px);
}

.choice-block > span {
  color: var(--wow-text-strong, #f9fafb);
  font-weight: var(--wow-weight-semibold, 600);
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wow-space-3, 12px);
}

.body-type-grid {
  grid-template-columns: repeat(5, minmax(150px, 1fr));
}

#injuryChoices {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.choice-grid button,
.quick-card {
  min-height: 54px;
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-lg, 12px);
  background: var(--wow-surface, #111827);
  color: var(--wow-text, #d1d5db);
  cursor: pointer;
  padding: var(--wow-space-3, 12px);
  text-align: left;
}

.choice-grid button {
  display: grid;
  gap: 4px;
  align-content: center;
  text-align: center;
}

.choice-grid button small {
  display: block;
  color: var(--wow-text-muted, #9ca3af);
  font-size: var(--wow-text-xs, 0.75rem);
  font-weight: var(--wow-weight-regular, 400);
  line-height: 1.35;
}

.body-type-grid button {
  min-height: 86px;
  padding: var(--wow-space-3, 12px);
}

.body-type-grid button strong {
  line-height: 1.25;
}

.choice-grid button.selected {
  border-color: var(--wow-accent, #22d3ee);
  background: var(--wow-accent-soft, rgba(34, 211, 238, 0.12));
  color: var(--wow-accent, #22d3ee);
}

.choice-grid button.selected small {
  color: var(--wow-text, #d1d5db);
}

.choice-field .wow-help {
  color: var(--wow-danger, #ef4444);
}

.choice-field .segmented-error button {
  border-color: var(--wow-danger, #ef4444);
}

/* Lists */
.log-list {
  display: grid;
  gap: var(--wow-space-3, 12px);
  max-height: 390px;
  overflow: auto;
}

.admin-base-library-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wow-space-3, 12px);
  margin-top: var(--wow-space-3, 12px);
  padding: 10px 12px;
  border: 1px solid var(--wow-border, #d6e0ea);
  border-radius: var(--wow-radius-md, 10px);
  background: color-mix(in srgb, var(--wow-bg-muted, #eef6fb) 72%, transparent);
}

.admin-base-library-heading strong {
  color: var(--wow-text-strong, #0f172a);
  font-size: 0.9rem;
}

.admin-base-library-heading span {
  color: var(--wow-text-muted, #64748b);
  font-size: 0.82rem;
}

.admin-recipe-row--base {
  background: color-mix(in srgb, var(--wow-bg-muted, #eef6fb) 42%, transparent);
}

.log-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--wow-space-3, 12px);
  align-items: start;
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-lg, 12px);
  background: var(--wow-bg-elevated, #0f172a);
  padding: var(--wow-space-3, 12px);
}

.log-item > div {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.log-item strong,
.recipe-card strong,
.routine-card strong,
.quick-card strong {
  color: var(--wow-text-strong, #f9fafb);
}

.eating-out-grid .quick-card.eating-out-card {
  display: grid;
  grid-template-rows: auto auto auto auto;
  align-content: start;
  align-items: start;
  gap: var(--wow-space-2, 8px);
  min-height: 156px;
  height: auto;
  padding: var(--wow-space-4, 16px);
  overflow: hidden;
  white-space: normal;
}

.eating-out-grid .quick-card.eating-out-card strong,
.eating-out-grid .quick-card.eating-out-card b,
.eating-out-grid .quick-card.eating-out-card small {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

.log-item button {
  border: 1px solid var(--wow-danger, #ef4444);
  background: var(--wow-danger-soft, rgba(239, 68, 68, 0.12));
  color: var(--wow-danger, #ef4444);
}

.log-item small {
  color: var(--wow-text-muted, #9ca3af);
  line-height: 1.45;
}

.log-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wow-space-2, 8px);
}

.log-badges .wow-badge {
  justify-content: center;
  min-height: 24px;
}

.progress-photo-section {
  display: grid;
  gap: var(--wow-space-3, 12px);
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-lg, 12px);
  background: var(--wow-bg-elevated, #0f172a);
  padding: var(--wow-space-4, 16px);
}

.progress-photo-section .subsection-heading {
  margin: 0;
}

.progress-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wow-space-3, 12px);
}

.progress-photo-upload {
  position: relative;
  min-height: 132px;
  display: grid;
  place-items: center;
  gap: 4px;
  overflow: hidden;
  border: 1px dashed var(--wow-border-strong, #374151);
  border-radius: var(--wow-radius-lg, 12px);
  background:
    linear-gradient(rgba(15, 23, 42, 0.72), rgba(15, 23, 42, 0.72)),
    var(--preview-image, var(--wow-surface, #111827));
  background-position: center;
  background-size: cover;
  color: var(--wow-text, #d1d5db);
  cursor: pointer;
  padding: var(--wow-space-3, 12px);
  text-align: center;
}

body[data-theme="light"] .progress-photo-upload {
  background:
    linear-gradient(rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.72)),
    var(--preview-image, var(--wow-surface, #ffffff));
}

.progress-photo-upload:hover {
  border-color: var(--wow-accent, #22d3ee);
}

.progress-photo-upload input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.progress-photo-upload span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-accent-soft, rgba(34, 211, 238, 0.12));
  color: var(--wow-accent, #22d3ee);
}

.progress-photo-upload svg {
  width: 18px;
  height: 18px;
}

.progress-photo-upload strong {
  color: var(--wow-text-strong, #f9fafb);
}

.progress-photo-upload small {
  max-width: 100%;
  overflow: hidden;
  color: var(--wow-text-muted, #9ca3af);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.progress-photo-upload.has-image {
  border-style: solid;
}

.progress-photo-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 92px));
  gap: var(--wow-space-2, 8px);
}

.progress-photo-strip figure {
  margin: 0;
}

.progress-photo-strip img {
  width: 100%;
  aspect-ratio: 3 / 4;
  display: block;
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-md, 8px);
  object-fit: cover;
}

.progress-photo-strip figcaption {
  margin-top: 4px;
  color: var(--wow-text-muted, #9ca3af);
  font-size: var(--wow-text-xs, 0.75rem);
  text-align: center;
}

.monthly-photo-card {
  margin-bottom: var(--wow-space-5, 20px);
  padding: var(--wow-space-5, 20px);
}

.monthly-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wow-space-4, 16px);
}

.monthly-photo-entry {
  display: grid;
  gap: var(--wow-space-3, 12px);
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-lg, 12px);
  background: var(--wow-bg-elevated, #0f172a);
  padding: var(--wow-space-4, 16px);
}

.monthly-photo-entry header {
  display: flex;
  justify-content: space-between;
  gap: var(--wow-space-3, 12px);
  align-items: center;
}

.monthly-photo-entry header strong {
  color: var(--wow-text-strong, #f9fafb);
  text-transform: capitalize;
}

.monthly-photo-entry header span {
  color: var(--wow-text-muted, #9ca3af);
  font-size: var(--wow-text-sm, 0.875rem);
}

.monthly-photo-entry .progress-photo-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.meal-group {
  display: grid;
  gap: var(--wow-space-2, 8px);
  padding: var(--wow-space-3, 12px);
}

.recipe-meal-selector {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--wow-space-3, 12px);
  margin-bottom: var(--wow-space-4, 16px);
}

.recipe-meal-button {
  display: grid;
  gap: 5px;
  justify-items: start;
  min-height: 112px;
  padding: var(--wow-space-3, 12px) var(--wow-space-4, 16px);
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-lg, 12px);
  background: var(--wow-bg-elevated, #0f172a);
  color: var(--wow-text, #d1d5db);
  cursor: pointer;
  text-align: left;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.recipe-meal-button:hover {
  border-color: var(--wow-border-strong, #374151);
  background: var(--wow-surface-hover, #1f2937);
  transform: translateY(-1px);
}

.recipe-meal-button.is-active {
  border-color: var(--wow-accent, #22d3ee);
  background: var(--wow-accent-soft, rgba(34, 211, 238, 0.12));
  color: var(--wow-text-strong, #f9fafb);
}

.recipe-meal-button span {
  font-weight: var(--wow-weight-semibold, 700);
}

.recipe-meal-button em {
  color: var(--wow-text-strong, #f9fafb);
  font-size: var(--wow-text-sm, 0.875rem);
  font-style: normal;
  font-weight: var(--wow-weight-semibold, 600);
  line-height: 1.25;
}

.recipe-meal-button small {
  color: var(--wow-text-muted, #9ca3af);
}

.recipe-meal-button.is-active small {
  color: var(--wow-accent, #22d3ee);
}

.recipe-meal-button .recipe-meal-hint {
  max-width: 100%;
  color: var(--wow-text-muted, #9ca3af);
  line-height: 1.35;
}

.recipe-meal-button.is-active em {
  color: var(--wow-text-strong, #f9fafb);
}

.recipe-meal-button.is-active .recipe-meal-hint {
  color: var(--wow-text, #d1d5db);
}

.recipe-groups {
  display: grid;
  gap: var(--wow-space-4, 16px);
}

.recipe-meal-panel[hidden] {
  display: none;
}

.meal-group header,
.recipe-card header,
.routine-card header {
  display: flex;
  justify-content: space-between;
  gap: var(--wow-space-3, 12px);
  align-items: flex-start;
}

.routine-card-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--wow-space-2, 8px);
}

.routine-burn-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-color: color-mix(in srgb, var(--energy, #f59e0b) 36%, var(--wow-border, #253043));
  background: color-mix(in srgb, var(--energy, #f59e0b) 12%, var(--wow-bg-elevated, #0f172a));
  color: var(--energy, #f59e0b);
}

.routine-burn-badge svg {
  width: 13px;
  height: 13px;
}

.recipe-card {
  display: flex;
  flex-direction: column;
  gap: var(--wow-space-3, 12px);
  min-height: 420px;
}

.recipe-card header {
  padding-bottom: var(--wow-space-3, 12px);
  border-bottom: 1px solid var(--wow-border, #253043);
}

.recipe-card header strong {
  min-width: 0;
  max-width: 58%;
  line-height: 1.25;
}

.recipe-card header .wow-badge {
  flex: 0 0 auto;
  border-radius: 999px;
  white-space: nowrap;
}

.recipe-card .wow-card__body,
.routine-card .wow-card__body,
.meal-group .wow-card__body {
  display: grid;
  gap: var(--wow-space-2, 8px);
}

.recipe-card .wow-card__body {
  flex: 1;
  align-content: start;
  padding: var(--wow-space-3, 12px);
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-bg-elevated, #0f172a);
}

.recipe-purpose {
  margin: calc(var(--wow-space-2, 8px) * -0.5) 0 0;
  color: var(--wow-text-muted, #9ca3af);
  font-size: var(--wow-text-sm, 0.875rem);
  line-height: 1.4;
}

.recipe-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.recipe-tag-filter {
  display: grid;
  gap: var(--wow-space-3, 12px);
  margin-bottom: var(--wow-space-4, 16px);
  padding: var(--wow-space-3, 12px);
  border: 1px solid color-mix(in srgb, var(--wow-border, #d8e2ef) 82%, var(--wow-accent, #f43f46));
  border-radius: var(--wow-radius-md, 8px);
  background: linear-gradient(135deg, color-mix(in srgb, var(--wow-accent, #f43f46) 5%, transparent), transparent 48%), var(--wow-bg-elevated, #ffffff);
}

.recipe-tag-filter > div:first-child {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--wow-space-2, 8px);
}

.recipe-tag-filter strong {
  color: var(--wow-text-strong, #0f172a);
  font-size: var(--wow-text-sm, 0.875rem);
}

.recipe-tag-filter span {
  color: var(--wow-text-muted, #64748b);
  font-size: var(--wow-text-xs, 0.75rem);
}

.recipe-tag-filter__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wow-space-2, 8px);
}

.recipe-tag-filter__group {
  display: grid;
  gap: var(--wow-space-2, 8px);
}

.recipe-tag-filter__group > small {
  color: var(--wow-text-muted, #64748b);
  font-size: var(--wow-text-xs, 0.75rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.recipe-tag {
  --recipe-tag-bg: color-mix(in srgb, var(--wow-text-muted, #64748b) 10%, var(--wow-bg-elevated, #ffffff));
  --recipe-tag-color: var(--wow-text-strong, #0f172a);
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  max-width: 100%;
  border: 1px solid color-mix(in srgb, var(--recipe-tag-color) 8%, transparent);
  border-radius: 999px;
  background: var(--recipe-tag-bg);
  color: var(--recipe-tag-color);
  padding: 5px 10px;
  font-size: 0.68rem;
  font-weight: var(--wow-weight-black, 800);
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

button.recipe-tag {
  appearance: none;
  font-family: inherit;
  cursor: pointer;
}

.recipe-tag.is-active,
.recipe-filter-chip.is-active {
  outline: 2px solid color-mix(in srgb, var(--recipe-tag-color, var(--wow-accent, #f43f46)) 44%, transparent);
  outline-offset: 2px;
}

.recipe-filter-chip {
  --recipe-tag-bg: color-mix(in srgb, var(--wow-text-muted, #64748b) 10%, var(--wow-bg-elevated, #ffffff));
  --recipe-tag-color: var(--wow-text-strong, #0f172a);
  --recipe-tag-solid: var(--recipe-tag-color);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  border: 1px solid color-mix(in srgb, var(--recipe-tag-solid) 22%, var(--wow-border, #d8e2ef));
  border-radius: 999px;
  background: var(--recipe-tag-bg);
  color: var(--recipe-tag-color);
  padding: 7px 12px;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: var(--wow-weight-black, 800);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.recipe-filter-chip::before {
  content: "";
  display: inline-grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--recipe-tag-solid) 34%, var(--wow-border, #d8e2ef));
  border-radius: 999px;
  background: color-mix(in srgb, var(--recipe-tag-solid) 6%, var(--wow-bg-elevated, #ffffff));
}

.recipe-filter-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--recipe-tag-solid) 13%, transparent);
}

.recipe-filter-chip small {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--recipe-tag-color) 12%, var(--wow-bg-elevated, #ffffff));
  color: var(--recipe-tag-color);
  font-size: 0.68rem;
  font-weight: var(--wow-weight-black, 800);
}

.recipe-filter-chip.is-active {
  border-color: color-mix(in srgb, var(--recipe-tag-solid) 82%, transparent);
  background: var(--recipe-tag-solid);
  color: #ffffff;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--recipe-tag-solid) 24%, transparent);
  outline: 0;
}

.recipe-filter-chip.is-active::before {
  content: "✓";
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 900;
}

.recipe-filter-chip.is-active small {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.recipe-filter-clear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  border: 1px solid var(--wow-border, #d8e2ef);
  border-radius: 999px;
  background: var(--wow-bg-elevated, #ffffff);
  color: var(--wow-text-muted, #64748b);
  padding: 7px 11px;
  font-family: inherit;
  font-size: var(--wow-text-sm, 0.875rem);
  font-weight: var(--wow-weight-semibold, 600);
  cursor: pointer;
}

.recipe-filter-clear svg {
  width: 14px;
  height: 14px;
}

.recipe-tag--protein {
  --recipe-tag-bg: color-mix(in srgb, #0ea5e9 13%, var(--wow-bg-elevated, #ffffff));
  --recipe-tag-color: #0369a1;
}

.recipe-tag--low-carb {
  --recipe-tag-bg: color-mix(in srgb, #14b8a6 12%, var(--wow-bg-elevated, #ffffff));
  --recipe-tag-color: #0f766e;
}

.recipe-tag--fast {
  --recipe-tag-bg: color-mix(in srgb, #f59e0b 14%, var(--wow-bg-elevated, #ffffff));
  --recipe-tag-color: #b45309;
}

.recipe-tag--budget {
  --recipe-tag-bg: var(--wow-accent, #f43f46);
  --recipe-tag-color: #ffffff;
  border-color: color-mix(in srgb, var(--wow-accent, #f43f46) 65%, transparent);
}

.recipe-tag--light {
  --recipe-tag-bg: color-mix(in srgb, #22c55e 13%, var(--wow-bg-elevated, #ffffff));
  --recipe-tag-color: #15803d;
}

.recipe-tag--fiber {
  --recipe-tag-bg: color-mix(in srgb, #84cc16 14%, var(--wow-bg-elevated, #ffffff));
  --recipe-tag-color: #4d7c0f;
}

.recipe-tag--vegetarian {
  --recipe-tag-bg: color-mix(in srgb, #10b981 14%, var(--wow-bg-elevated, #ffffff));
  --recipe-tag-color: #047857;
}

.recipe-tag--energy {
  --recipe-tag-bg: color-mix(in srgb, #a855f7 12%, var(--wow-bg-elevated, #ffffff));
  --recipe-tag-color: #7e22ce;
}

.recipe-filter-chip--protein {
  --recipe-tag-bg: color-mix(in srgb, #0ea5e9 13%, var(--wow-bg-elevated, #ffffff));
  --recipe-tag-color: #0369a1;
  --recipe-tag-solid: #0ea5e9;
}

.recipe-filter-chip--low-carb {
  --recipe-tag-bg: color-mix(in srgb, #14b8a6 12%, var(--wow-bg-elevated, #ffffff));
  --recipe-tag-color: #0f766e;
  --recipe-tag-solid: #14b8a6;
}

.recipe-filter-chip--fast {
  --recipe-tag-bg: color-mix(in srgb, #f59e0b 14%, var(--wow-bg-elevated, #ffffff));
  --recipe-tag-color: #b45309;
  --recipe-tag-solid: #f59e0b;
}

.recipe-filter-chip--budget {
  --recipe-tag-bg: var(--wow-accent, #f43f46);
  --recipe-tag-color: #ffffff;
  --recipe-tag-solid: var(--wow-accent, #f43f46);
}

.recipe-filter-chip--light {
  --recipe-tag-bg: color-mix(in srgb, #22c55e 13%, var(--wow-bg-elevated, #ffffff));
  --recipe-tag-color: #15803d;
  --recipe-tag-solid: #22c55e;
}

.recipe-filter-chip--fiber {
  --recipe-tag-bg: color-mix(in srgb, #84cc16 14%, var(--wow-bg-elevated, #ffffff));
  --recipe-tag-color: #4d7c0f;
  --recipe-tag-solid: #84cc16;
}

.recipe-filter-chip--vegetarian {
  --recipe-tag-bg: color-mix(in srgb, #10b981 14%, var(--wow-bg-elevated, #ffffff));
  --recipe-tag-color: #047857;
  --recipe-tag-solid: #10b981;
}

.recipe-filter-chip--energy {
  --recipe-tag-bg: color-mix(in srgb, #a855f7 12%, var(--wow-bg-elevated, #ffffff));
  --recipe-tag-color: #7e22ce;
  --recipe-tag-solid: #a855f7;
}

.recipe-filter-chip--rating {
  --recipe-tag-bg: color-mix(in srgb, #f59e0b 12%, var(--wow-bg-elevated, #ffffff));
  --recipe-tag-color: #92400e;
  --recipe-tag-solid: #f59e0b;
}

.recipe-filter-chip--rating.is-active {
  background: #d97706;
  border-color: #b45309;
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.16);
}

.recipe-filter-chip--rating.is-active::before {
  border-color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.recipe-filter-chip--rating.is-active small {
  background: #ffffff;
  color: #92400e;
  text-shadow: none;
}

.modal-recipe-tags-card {
  padding: var(--wow-space-4, 16px);
}

.recipe-image-frame {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  height: 148px;
  min-height: 148px;
  margin: calc(var(--wow-space-5, 20px) * -1) calc(var(--wow-space-5, 20px) * -1) var(--wow-space-4, 16px);
  border-bottom: 1px solid var(--wow-border, #253043);
  background:
    linear-gradient(135deg, rgba(34, 211, 238, 0.08), transparent 48%),
    var(--wow-bg, #0b0f1a);
}

.recipe-image-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.recipe-image-placeholder {
  display: grid;
  gap: 6px;
  justify-items: center;
  color: var(--wow-text-muted, #9ca3af);
  font-size: var(--wow-text-xs, 0.75rem);
  padding-bottom: 44px;
}

.recipe-image-placeholder svg {
  width: 22px;
  height: 22px;
  color: var(--wow-accent, #22d3ee);
}

.admin-upload-control {
  position: absolute;
  left: var(--wow-space-3, 12px);
  right: var(--wow-space-3, 12px);
  bottom: var(--wow-space-2, 8px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  justify-content: center;
  padding: 0 var(--wow-space-3, 12px);
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-md, 8px);
  background: color-mix(in srgb, var(--wow-bg-elevated, #0f172a) 86%, transparent);
  color: var(--wow-text, #d1d5db);
  cursor: pointer;
  font-size: var(--wow-text-sm, 0.875rem);
  font-weight: var(--wow-weight-medium, 500);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  box-shadow: none;
  backdrop-filter: blur(6px);
}

.admin-upload-control svg,
.admin-upload-control i[data-lucide] {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  order: 0;
}

.admin-upload-control:hover {
  border-color: var(--wow-border-strong, #374151);
  background: var(--wow-surface-hover, #1f2937);
}

.admin-upload-control input,
.image-upload-control input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.exercise-card-actions .admin-upload-control {
  position: relative;
  right: auto;
  bottom: auto;
  box-shadow: none;
}

.modal-recipe-image-card {
  padding: 0;
  overflow: hidden;
}

.modal-recipe-image-card .recipe-image-frame {
  margin: 0;
  min-height: 240px;
  border-bottom: 0;
}

.food-log-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
}

.food-log-image {
  width: 72px;
  height: 72px;
  display: block;
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-md, 8px);
  object-fit: cover;
}

.admin-image-field small {
  display: block;
  margin-top: 6px;
  color: var(--wow-text-muted, #9ca3af);
  font-size: var(--wow-text-xs, 0.75rem);
}

.admin-only {
  display: none;
}

body[data-role="admin"] .wow-sidebar__group.admin-only {
  display: block;
}

body[data-role="admin"] .admin-image-field.admin-only {
  display: grid;
}

.recipe-card ul,
.routine-card ul,
.guide-card ol {
  margin: 0;
  padding-left: 20px;
  color: var(--wow-text-muted, #9ca3af);
  line-height: 1.6;
}

.empty-state {
  padding: var(--wow-space-6, 24px);
  color: var(--wow-text-muted, #9ca3af);
  text-align: center;
}

.form-message {
  min-height: 20px;
  margin: 0;
  color: var(--wow-accent, #22d3ee);
  font-size: var(--wow-text-sm, 0.875rem);
}

.plan-success-message,
.plan-success-banner {
  color: #22c55e;
}

.plan-success-banner {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: var(--wow-space-2, 8px);
  margin-bottom: var(--wow-space-4, 16px);
  padding: var(--wow-space-3, 12px) var(--wow-space-4, 16px);
  border: 1px solid rgba(34, 197, 94, 0.35);
  border-radius: var(--wow-radius-md, 8px);
  background: rgba(34, 197, 94, 0.1);
  font-weight: var(--wow-weight-semibold, 600);
}

.plan-success-banner svg {
  width: 18px;
  height: 18px;
}

.suggestion-item p {
  margin: var(--wow-space-2, 8px) 0 0;
  color: var(--wow-text, #d1d5db);
  line-height: 1.55;
  white-space: pre-wrap;
}

.suggestion-item span {
  color: var(--wow-text-muted, #9ca3af);
}

.suggestion-item {
  align-items: start;
}

.suggestion-item--admin {
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.suggestion-item--admin:hover,
.suggestion-item--admin:focus-visible {
  border-color: color-mix(in srgb, var(--wow-accent, #0891b2) 48%, var(--wow-border, #d6e2ef));
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  outline: none;
  transform: translateY(-1px);
}

.suggestion-response {
  display: grid;
  gap: var(--wow-space-2, 8px);
  margin-top: var(--wow-space-3, 12px);
  padding: var(--wow-space-3, 12px);
  border: 1px solid color-mix(in srgb, var(--wow-accent, #0891b2) 28%, var(--wow-border, #d6e2ef));
  border-radius: var(--wow-radius-md, 8px);
  background: color-mix(in srgb, var(--wow-accent, #0891b2) 8%, var(--wow-surface, #ffffff));
}

.suggestion-response strong {
  color: var(--wow-text-strong, #0f172a);
  font-size: var(--wow-text-sm, 0.875rem);
}

.suggestion-response p,
.suggestion-response small {
  margin: 0;
  color: var(--wow-text-muted, #64748b);
  line-height: 1.5;
}

.suggestion-admin-action {
  width: min(180px, 100%);
  display: grid;
  gap: var(--wow-space-2, 8px);
  align-self: start;
}

.suggestion-admin-action small {
  color: var(--wow-text-muted, #64748b);
  line-height: 1.35;
  text-align: right;
}

.log-item .suggestion-open-button {
  width: 100%;
  justify-content: center;
  border-color: color-mix(in srgb, var(--wow-accent, #0891b2) 32%, var(--wow-border, #d6e2ef));
  background: color-mix(in srgb, var(--wow-accent, #0891b2) 8%, var(--wow-surface, #ffffff));
  color: var(--wow-accent-strong, #075985);
}

.log-item .suggestion-open-button:hover {
  border-color: var(--wow-accent, #0891b2);
  background: color-mix(in srgb, var(--wow-accent, #0891b2) 13%, var(--wow-surface, #ffffff));
}

.suggestion-modal-original {
  display: grid;
  gap: var(--wow-space-3, 12px);
  margin-bottom: var(--wow-space-4, 16px);
  padding: var(--wow-space-4, 16px);
  border: 1px solid var(--wow-border, #d6e2ef);
  border-radius: var(--wow-radius-lg, 12px);
  background: color-mix(in srgb, var(--wow-accent, #0891b2) 5%, var(--wow-surface, #ffffff));
}

.suggestion-modal-original > div {
  display: grid;
  gap: 4px;
}

.suggestion-modal-original strong {
  color: var(--wow-text-strong, #0f172a);
}

.suggestion-modal-original span,
.suggestion-modal-original p {
  margin: 0;
  color: var(--wow-text-muted, #64748b);
  line-height: 1.55;
}

.suggestion-modal-original p {
  color: var(--wow-text, #334155);
  white-space: pre-wrap;
}

.suggestion-modal-form {
  grid-template-columns: 1fr;
}

.suggestion-modal-form textarea {
  min-height: 112px;
}

.suggestion-modal-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wow-space-3, 12px);
}

.suggestions-admin-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wow-space-3, 12px);
  margin-bottom: var(--wow-space-4, 16px);
}

.video-embed {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-md, 8px);
  background: #000;
}

.video-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.modal-video-card {
  grid-column: 1 / -1;
}

.exercise-video-preview {
  margin-top: var(--wow-space-3, 12px);
}

.exercise-video-admin,
.admin-media-video {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--wow-space-2, 8px);
  align-items: center;
  margin-top: var(--wow-space-3, 12px);
}

.admin-media-video {
  grid-column: 1 / -1;
  width: 100%;
}

.rich-empty {
  display: grid;
  justify-items: center;
  gap: var(--wow-space-2, 8px);
}

.rich-empty span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-accent-soft, rgba(34, 211, 238, 0.12));
  color: var(--wow-accent, #22d3ee);
}

.rich-empty svg {
  width: 20px;
  height: 20px;
}

.rich-empty strong {
  color: var(--wow-text-strong, #f9fafb);
}

.rich-empty p {
  max-width: 340px;
  margin: 0;
  color: var(--wow-text-muted, #9ca3af);
  line-height: 1.45;
}

/* Progress and charts */
.bar,
.meter {
  overflow: hidden;
  border-radius: var(--wow-radius-full, 999px);
  background: var(--wow-bg, #0b0f1a);
}

.bar,
.meter {
  height: 8px;
}

.bar div,
.meter div {
  height: 100%;
  background: var(--wow-accent, #22d3ee);
  border-radius: inherit;
  transition: width var(--wow-transition-base, 180ms ease);
}

.macro-bars {
  display: grid;
  gap: var(--wow-space-3, 12px);
}

.macro-row {
  display: grid;
  grid-template-columns: 88px 1fr 64px;
  gap: var(--wow-space-3, 12px);
  align-items: center;
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-bg-elevated, #0f172a);
  padding: var(--wow-space-3, 12px);
}

.macro-row--protein {
  border-color: color-mix(in srgb, var(--protein, #2563eb) 36%, var(--wow-border, #253043));
}

.macro-row--carbs {
  border-color: color-mix(in srgb, var(--accent, #22d3ee) 36%, var(--wow-border, #253043));
}

.macro-row--fat {
  border-color: color-mix(in srgb, var(--energy, #f59e0b) 36%, var(--wow-border, #253043));
}

.macro-row--protein .bar {
  background: color-mix(in srgb, var(--protein, #2563eb) 16%, var(--wow-bg, #0b0f1a));
}

.macro-row--carbs .bar {
  background: color-mix(in srgb, var(--accent, #22d3ee) 16%, var(--wow-bg, #0b0f1a));
}

.macro-row--fat .bar {
  background: color-mix(in srgb, var(--energy, #f59e0b) 16%, var(--wow-bg, #0b0f1a));
}

.macro-row--protein strong,
.macro-row--protein span {
  color: var(--protein, #2563eb);
}

.macro-row--carbs strong,
.macro-row--carbs span {
  color: var(--accent, #22d3ee);
}

.macro-row--fat strong,
.macro-row--fat span {
  color: var(--energy, #f59e0b);
}

.macro-row strong {
  color: var(--wow-text-strong, #f9fafb);
  font-size: var(--wow-text-sm, 0.875rem);
}

.macro-row span {
  color: var(--wow-text-strong, #f9fafb);
  font-weight: var(--wow-weight-bold, 700);
  text-align: right;
}

.bar-chart {
  display: grid;
  grid-template-columns: repeat(7, minmax(30px, 1fr));
  gap: var(--wow-space-2, 8px);
  height: 180px;
  align-items: end;
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-lg, 12px);
  background: var(--wow-bg-elevated, #0f172a);
  padding: var(--wow-space-4, 16px);
}

.chart-column {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: var(--wow-space-2, 8px);
  height: 100%;
  color: var(--wow-text-muted, #9ca3af);
  font-size: var(--wow-text-xs, 0.75rem);
  text-align: center;
}

.chart-fill {
  align-self: end;
  min-height: 12px;
  border-radius: var(--wow-radius-md, 8px) var(--wow-radius-md, 8px) 0 0;
  background: var(--wow-accent, #22d3ee);
}

.routine-options {
  display: grid;
  gap: var(--wow-space-4, 16px);
}

.routine-option-card header {
  display: flex;
  justify-content: space-between;
  gap: var(--wow-space-3, 12px);
  align-items: flex-start;
  margin-bottom: var(--wow-space-4, 16px);
}

.routine-option-card h4 {
  margin: 0 0 4px;
  color: var(--wow-text-strong, #f9fafb);
  font-size: var(--wow-text-lg, 1.125rem);
}

.routine-option-card p {
  margin: 0;
  color: var(--wow-text-muted, #9ca3af);
  line-height: 1.45;
}

/* Upload / nutrition */
.file-upload-field input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  clip-path: inset(50%);
}

.file-upload-control {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px var(--wow-space-3, 12px);
  align-items: center;
  min-height: 74px;
  border: 1px dashed var(--wow-border-strong, #374151);
  border-radius: var(--wow-radius-lg, 12px);
  background: var(--wow-bg-elevated, #0f172a);
  cursor: pointer;
  padding: var(--wow-space-4, 16px);
  transition:
    border-color var(--wow-transition-base, 180ms ease),
    background var(--wow-transition-base, 180ms ease);
}

.nutrition-upload-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wow-space-3, 12px);
}

.nutrition-upload-button {
  width: 100%;
  appearance: none;
  color: inherit;
  font: inherit;
  text-align: left;
}

.file-upload-control:hover {
  border-color: var(--wow-accent, #22d3ee);
  background: var(--wow-accent-soft, rgba(34, 211, 238, 0.12));
}

.file-upload-control svg {
  grid-row: span 2;
  width: 24px;
  height: 24px;
  color: var(--wow-accent, #22d3ee);
}

.file-upload-control strong {
  color: var(--wow-text-strong, #f9fafb);
}

.file-upload-control small {
  color: var(--wow-text-muted, #9ca3af);
}

.nutrition-preview,
.exercise-image-card {
  overflow: hidden;
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-lg, 12px);
  background: var(--wow-bg-elevated, #0f172a);
}

.nutrition-preview img,
.exercise-image-card img {
  display: block;
  width: 100%;
  object-fit: contain;
}

.nutrition-preview img {
  max-height: 260px;
}

.exercise-image-card img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.exercise-image-placeholder {
  display: grid;
  gap: var(--wow-space-2, 8px);
  place-items: center;
  min-height: 150px;
  color: var(--wow-text-muted, #9ca3af);
  background:
    linear-gradient(135deg, rgba(34, 211, 238, 0.06), transparent 45%),
    var(--wow-bg, #0b0f1a);
}

.exercise-image-placeholder svg {
  width: 24px;
  height: 24px;
  color: var(--wow-accent, #22d3ee);
}

.exercise-image-placeholder span {
  font-size: var(--wow-text-sm, 0.875rem);
}

.exercise-image-card > div:last-child {
  display: grid;
  gap: var(--wow-space-3, 12px);
  padding: var(--wow-space-4, 16px);
}

.exercise-index {
  color: var(--wow-text-muted, #9ca3af);
  font-size: var(--wow-text-xs, 0.75rem);
  font-weight: var(--wow-weight-semibold, 600);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.exercise-image-card__title {
  display: flex;
  gap: var(--wow-space-2, 8px);
  align-items: center;
  justify-content: space-between;
}

.exercise-image-card__title strong {
  min-width: 0;
}

.exercise-review-panel {
  margin-top: var(--wow-space-2, 8px);
}

.exercise-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wow-space-2, 8px);
  align-items: center;
  justify-content: space-between;
}

.image-upload-control {
  display: inline-flex;
  justify-self: start;
  align-items: center;
  gap: var(--wow-space-2, 8px);
  min-height: 36px;
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-md, 8px);
  padding: 0 var(--wow-space-3, 12px);
  color: var(--wow-text, #d1d5db);
  cursor: pointer;
}

.image-upload-control input {
  display: none;
}

.ocr-status {
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-lg, 12px);
  background: var(--wow-bg-elevated, #0f172a);
  color: var(--wow-text-muted, #9ca3af);
  padding: var(--wow-space-3, 12px);
  font-size: var(--wow-text-sm, 0.875rem);
}

/* Modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: var(--wow-space-5, 20px);
  background: rgba(0, 0, 0, 0.62);
}

.modal-panel {
  width: min(920px, 100%);
  max-height: min(760px, calc(100vh - 40px));
  overflow: auto;
  border: 1px solid var(--wow-border, #253043);
  border-radius: var(--wow-radius-lg, 12px);
  background: var(--wow-surface, #111827);
  box-shadow: var(--wow-shadow-xl, 0 24px 70px rgba(0, 0, 0, 0.35));
  padding: var(--wow-space-5, 20px);
}

#exerciseModal .modal-panel {
  width: min(820px, 100%);
  max-height: min(760px, calc(100vh - 40px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

#exerciseModal .modal-panel > header {
  flex: 0 0 auto;
  margin: 0;
  padding: var(--wow-space-5, 20px);
}

#exerciseModal .wow-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: auto;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  padding: var(--wow-space-5, 20px);
  padding-top: var(--wow-space-4, 16px);
}

.exercise-modal-summary {
  display: grid;
  gap: var(--wow-space-2, 8px);
  margin-bottom: var(--wow-space-4, 16px);
}

.exercise-modal-summary__item {
  --exercise-summary-tone: var(--wow-accent, #0891b2);
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: var(--wow-space-3, 12px);
  align-items: center;
  min-height: 56px;
  border: 1px solid color-mix(in srgb, var(--exercise-summary-tone) 24%, var(--wow-border, #d6e2ef));
  border-radius: var(--wow-radius-md, 8px);
  background: color-mix(in srgb, var(--exercise-summary-tone) 6%, var(--wow-surface, #ffffff));
  padding: var(--wow-space-3, 12px);
}

.exercise-modal-summary__item--burn {
  --exercise-summary-tone: #0ea5e9;
}

.exercise-modal-summary__item--admin {
  --exercise-summary-tone: #0891b2;
}

.exercise-modal-summary__item > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--wow-radius-md, 8px);
  background: color-mix(in srgb, var(--exercise-summary-tone) 13%, transparent);
  color: var(--exercise-summary-tone);
}

.exercise-modal-summary__item svg {
  width: 18px;
  height: 18px;
}

.exercise-modal-summary__item strong {
  display: block;
  margin-bottom: 2px;
  color: var(--wow-text-strong, #0f172a);
  font-size: var(--wow-text-sm, 0.875rem);
}

.exercise-modal-summary__item p {
  margin: 0;
  color: var(--wow-text-muted, #64748b);
  font-size: var(--wow-text-sm, 0.875rem);
  line-height: 1.4;
}

.exercise-modal-grid {
  gap: var(--wow-space-4, 16px);
}

#exerciseModal .exercise-image-card {
  contain: layout paint style;
  content-visibility: auto;
  contain-intrinsic-size: 320px 310px;
}

.modal-panel > header {
  display: flex;
  justify-content: space-between;
  gap: var(--wow-space-4, 16px);
  align-items: flex-start;
  margin-bottom: var(--wow-space-4, 16px);
  padding-bottom: var(--wow-space-4, 16px);
  border-bottom: 1px solid var(--wow-border, #253043);
}

.modal-recipe-grid {
  display: grid;
  gap: var(--wow-space-4, 16px);
}

.modal-recipe-grid .wow-card {
  padding: var(--wow-space-5, 20px);
}

.modal-recipe-grid h3,
.modal-recipe-grid ul,
.modal-recipe-grid ol {
  margin-top: 0;
}

.modal-recipe-grid li {
  color: var(--wow-text-muted, #9ca3af);
  line-height: 1.65;
}

.recipe-review-panel {
  display: grid;
  gap: var(--wow-space-4, 16px);
}

.recipe-review-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--wow-space-4, 16px);
}

.recipe-review-panel__header p,
.recipe-review-message {
  margin: 4px 0 0;
  color: var(--wow-text-muted, #64748b);
  font-size: var(--wow-text-sm, 0.875rem);
  line-height: 1.45;
}

.recipe-review-score {
  display: grid;
  justify-items: end;
  gap: 4px;
  min-width: 92px;
}

.recipe-review-score strong {
  color: var(--wow-text-strong, #0f172a);
  font-size: 1.5rem;
  line-height: 1;
}

.recipe-review-form {
  display: grid;
  gap: var(--wow-space-3, 12px);
}

.recipe-review-form fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.recipe-review-form legend,
.recipe-review-form label {
  color: var(--wow-text-strong, #0f172a);
  font-weight: var(--wow-weight-semibold, 600);
}

.recipe-rating-input {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.recipe-rating-input label {
  cursor: pointer;
}

.recipe-rating-input input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.recipe-rating-input span {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  border: 1px solid var(--wow-border, #d7e2ef);
  border-radius: var(--wow-radius-md, 8px);
  background: var(--wow-bg-elevated, #fff);
  color: #f59e0b;
  padding: 6px 10px;
  font-weight: var(--wow-weight-bold, 700);
}

.recipe-rating-input input:checked + span,
.recipe-rating-input span:hover {
  border-color: #f59e0b;
  background: color-mix(in srgb, #f59e0b 13%, var(--wow-bg-elevated, #fff));
}

.recipe-review-form textarea {
  min-height: 90px;
  resize: vertical;
}

.recipe-comments-list {
  display: grid;
  gap: var(--wow-space-3, 12px);
}

.recipe-comments-list article {
  display: grid;
  gap: 6px;
  border: 1px solid var(--wow-border, #d7e2ef);
  border-radius: var(--wow-radius-md, 8px);
  padding: var(--wow-space-3, 12px);
  background: color-mix(in srgb, var(--wow-bg-elevated, #fff) 85%, var(--wow-accent, #22d3ee));
}

.recipe-comments-list article > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.recipe-comments-list p {
  margin: 0;
  color: var(--wow-text-muted, #64748b);
  line-height: 1.45;
}

.modal-recipe-benefit-card,
.modal-infusion-benefit-card {
  border-color: color-mix(in srgb, #14b8a6 30%, var(--wow-border, #d6e2ef));
  background:
    linear-gradient(135deg, color-mix(in srgb, #14b8a6 9%, transparent), transparent 70%),
    var(--wow-surface, #ffffff);
}

.modal-recipe-benefit-card li,
.modal-infusion-benefit-card p {
  margin: 0 0 var(--wow-space-3, 12px);
  color: var(--wow-text, #1f2937);
  line-height: 1.55;
}

.modal-recipe-benefit-card ul {
  margin-bottom: 0;
}

.modal-infusion-benefit-card small {
  display: block;
  margin-top: var(--wow-space-3, 12px);
  color: var(--wow-text-muted, #64748b);
  line-height: 1.45;
}

/* Responsive */
@media (max-width: 1180px) {
  .daily-dashboard,
  .plan-grid,
  .admin-summary-grid,
  .admin-quick-grid,
  .public-visibility-grid,
  .agenda-summary,
  .agenda-actions,
  .mini-summary,
  .recipe-grid,
  .light-recipes-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .recipe-meal-selector,
  .light-recipe-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .plan-grid.training-metrics-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .meal-guide-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .body-type-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .plan-summary-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-summary-grid,
  .admin-summary-grid,
  .admin-quick-grid,
  .dashboard-recent-list,
  .dashboard-module-grid,
  .dashboard-support-grid,
  .agenda-day-summary,
  .agenda-detail-grid,
  .dashboard-grid,
  .weekly-review-grid,
  .level-grid,
  .plan-stage-grid,
  .progress-pillars-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-clean-grid,
  .dashboard-main-grid,
  .admin-compact-grid,
  .branding-admin-layout {
    grid-template-columns: 1fr;
  }

  .branding-form-grid {
    grid-template-columns: minmax(0, 1fr) minmax(96px, 140px) minmax(132px, 160px);
  }

  .branding-form-bottom {
    grid-template-columns: 1fr;
  }

  .dashboard-quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-card--today,
  .dashboard-card--insights {
    grid-column: auto;
    grid-row: auto;
  }

  .agenda-layout {
    grid-template-columns: 1fr;
  }

  .dashboard-card--wide,
  .dashboard-card--actions {
    grid-column: span 2;
  }

  .account-hero {
    grid-template-columns: 1fr;
  }

  .form-grid,
  .diagnosis-grid,
  .multi-select-row,
  .tool-grid,
  .module-grid,
  .progress-measures-grid,
  .meals-layout,
  .meals-workspace,
  .meal-tools-grid,
  .tracker-layout,
  .tracker-layout.adjusted,
  .tracker-form,
  .tracker-form.adjusted,
  .nutrition-fields,
  .nutrition-scan-card .nutrition-fields,
  .nutrition-scan-card .stack-form,
  .light-recipes-header {
    grid-template-columns: 1fr;
  }

  .supplement-grid {
    grid-template-columns: 1fr;
  }

  .store-context-grid {
    grid-template-columns: 1fr;
  }

  .store-context-card {
    grid-template-columns: 86px minmax(0, 1fr);
  }

  .store-hero-stats {
    grid-template-columns: 1fr;
  }

  .store-product-grid {
    grid-template-columns: 1fr;
  }

  .store-product-card {
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: stretch;
    gap: 10px 12px;
  }

  .store-product-media {
    min-height: 112px;
    max-height: none;
    aspect-ratio: 1;
    grid-row: span 2;
  }

  .store-product-copy {
    align-content: center;
  }

  .store-product-card footer {
    align-self: end;
    margin-top: 0;
  }

  .store-detail-layout {
    grid-template-columns: 1fr;
  }

  .store-detail-media {
    min-height: 260px;
  }

  .nutrition-scan-card .file-upload-field,
  .nutrition-scan-card .nutrition-preview,
  .nutrition-scan-card .ocr-status,
  .nutrition-scan-card .nutrition-insight,
  .nutrition-scan-card label:has(textarea),
  .nutrition-scan-card .nutrition-fields,
  .nutrition-actions {
    grid-column: 1;
    grid-row: auto;
  }

  .nutrition-actions {
    grid-template-columns: 1fr;
  }

  .admin-register-card .tracker-form,
  .admin-ranking-card .tracker-form {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 1180px) and (min-width: 901px) {
  .app-shell {
    padding-left: calc(var(--cf-sidebar-collapsed) + var(--wow-space-6, 24px));
  }

  .intro-panel.wow-sidebar {
    width: var(--cf-sidebar-collapsed);
    overflow: visible;
  }

  .brand-row.wow-sidebar__brand {
    height: auto;
    justify-content: center;
    flex-direction: row;
    padding: var(--wow-space-3, 12px) 0;
  }

  .brand-row > div:nth-child(2),
  .nav-text,
  .wow-sidebar__group-header,
  .user-chip span,
  .logout-text {
    display: none;
  }

  .wow-sidebar__nav {
    overflow: visible;
    padding: var(--wow-space-2, 8px);
  }

  .tab-button.wow-sidebar__item {
    position: relative;
    width: 40px;
    height: 40px;
    justify-content: center;
    margin: 0 auto;
    padding: 0;
  }

  .tab-button.wow-sidebar__item::after {
    position: absolute;
    z-index: 140;
    top: 50%;
    left: calc(100% + 12px);
    min-width: max-content;
    padding: 7px 10px;
    border: 1px solid var(--wow-border, #253043);
    border-radius: var(--wow-radius-md, 8px);
    background: var(--wow-bg-elevated, #0f172a);
    color: var(--wow-text-strong, #f9fafb);
    box-shadow: var(--wow-shadow-lg, 0 16px 32px rgba(0, 0, 0, 0.22));
    content: attr(data-tooltip);
    font-size: var(--wow-text-xs, 0.75rem);
    font-weight: var(--wow-weight-semibold, 600);
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) translateX(-4px);
    transition:
      opacity var(--wow-transition-fast, 120ms ease),
      transform var(--wow-transition-fast, 120ms ease);
    white-space: nowrap;
  }

  .tab-button.wow-sidebar__item:hover::after,
  .tab-button.wow-sidebar__item:focus-visible::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }

  .sidebar-footer {
    padding: var(--wow-space-2, 8px);
    gap: var(--wow-space-2, 8px);
  }

  .sidebar-footer-actions {
    display: flex;
    justify-content: flex-start;
  }

  .sidebar-theme-toggle {
    width: 40px;
    height: 40px;
    justify-content: center;
    margin: 0 auto;
    padding: 0;
  }

  .user-chip {
    min-height: auto;
    display: grid;
    justify-content: center;
    padding: var(--wow-space-1, 4px);
    border: 0;
    background: transparent;
  }

  .user-chip[hidden] {
    display: none !important;
  }

  .user-chip button {
    width: 40px;
    height: 40px;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--wow-border, #253043);
    border-radius: var(--wow-radius-md, 8px);
    background: var(--wow-surface, #111827);
  }

  .app-header.wow-appbar {
    left: var(--cf-sidebar-collapsed);
    grid-template-columns: minmax(180px, 1fr) minmax(410px, auto);
  }
}

@media (max-width: 900px) {
  .storefront-shopbar {
    grid-template-columns: 1fr;
  }

  .storefront-filter-group--objective,
  .storefront-cart {
    grid-column: auto;
  }

  .storefront-cart {
    width: fit-content;
  }

  .admin-supplement-row {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 12px;
  }

  .admin-supplement-thumb {
    width: 54px;
    height: 54px;
  }

  .admin-supplement-meta,
  .admin-supplement-row .admin-user-actions {
    grid-column: 1 / -1;
    justify-items: start;
  }

  .admin-supplement-row .admin-user-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    flex-wrap: wrap;
  }

  .app-shell,
  .app-shell.sidebar-collapsed {
    padding: var(--wow-space-3, 12px);
  }

  .plan-grid.training-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .goal-projection-summary {
    grid-template-columns: 1fr;
  }

  .target-date-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .target-date-controls {
    grid-template-columns: 1fr;
  }

  .target-date-chip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .goal-projection-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .plan-mode-options,
  .custom-plan-columns,
  .custom-plan-meta {
    grid-template-columns: 1fr;
  }

  .plan-mode-bar {
    align-items: flex-start;
    flex-direction: column;
  }

  .plan-mode-bar__actions {
    width: 100%;
    justify-content: flex-start;
  }

  .supplements-priority-grid {
    grid-template-columns: 1fr;
  }

  .supplement-brand-grid {
    grid-template-columns: 1fr;
  }

  .public-visibility-grid {
    grid-template-columns: 1fr;
  }

  .account-hero-stats,
  .account-export-grid,
  .language-switch {
    grid-template-columns: 1fr;
  }

  .admin-media-layout {
    grid-template-columns: 1fr;
  }

  .admin-media-list {
    max-height: none;
  }

  .suggestions-admin-summary,
  .exercise-video-admin,
  .admin-media-video,
  .auth-register-fields {
    grid-template-columns: 1fr;
  }

  .admin-users-list,
  .module-history-card .log-list {
    max-height: none;
  }

  .intro-panel.wow-sidebar,
  .app-shell.sidebar-collapsed .intro-panel.wow-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 120;
    width: min(288px, calc(100vw - 56px));
    height: 100vh;
    border: 0;
    border-right: 1px solid var(--wow-border, #253043);
    border-radius: 0;
    margin: 0;
    transform: translateX(-100%);
    transition: none;
    box-shadow: var(--wow-shadow-xl, 0 24px 70px rgba(0, 0, 0, 0.35));
  }

  .app-shell.mobile-menu-open .intro-panel.wow-sidebar,
  .app-shell.mobile-menu-open.sidebar-collapsed .intro-panel.wow-sidebar {
    transform: translateX(0);
  }

  #appShell.mobile-menu-open > #sidebarMenu.intro-panel.wow-sidebar {
    left: 0;
    transform: translateX(0) !important;
  }

  .mobile-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: block;
    border: 0;
    background: rgba(15, 23, 42, 0.48);
    backdrop-filter: blur(2px);
  }

  .mobile-menu-backdrop[hidden] {
    display: none !important;
  }

  .brand-row.wow-sidebar__brand {
    height: 72px;
    min-height: 72px;
  }

  .app-shell.sidebar-collapsed .brand-row > div:nth-child(2),
  .app-shell.sidebar-collapsed .user-chip,
  .app-shell.sidebar-collapsed .nav-text {
    display: initial;
  }

  .app-shell.sidebar-collapsed .user-chip span {
    display: initial;
  }

  .app-shell.sidebar-collapsed .user-chip {
    display: flex;
    justify-content: space-between;
    padding: var(--wow-space-2, 8px);
    border: 1px solid var(--wow-border, #253043);
    background: var(--wow-surface, #111827);
  }

  .app-shell.sidebar-collapsed .user-chip button {
    width: auto;
    height: 28px;
    padding: 0 var(--wow-space-3, 12px);
    border: 0;
    background: transparent;
  }

  .app-shell.sidebar-collapsed .user-chip[hidden] {
    display: none !important;
  }

  .app-shell.sidebar-collapsed .intro-panel [data-tooltip]::before,
  .app-shell.sidebar-collapsed .intro-panel [data-tooltip]::after {
    display: none;
  }

  .app-header.wow-appbar,
  .app-shell.sidebar-collapsed .app-header.wow-appbar {
    position: sticky;
    top: var(--wow-space-3, 12px);
    left: auto;
    right: auto;
    height: auto;
    min-height: 72px;
    grid-template-columns: 40px minmax(0, 1fr);
    border: 1px solid var(--wow-border, #253043);
    border-radius: var(--wow-radius-lg, 12px);
    margin-bottom: var(--wow-space-3, 12px);
    background: color-mix(in srgb, var(--wow-bg-elevated, #0f172a) 94%, transparent);
    box-shadow: var(--wow-shadow-sm, 0 6px 18px rgba(15, 23, 42, 0.08));
    backdrop-filter: blur(10px);
    padding: var(--wow-space-3, 12px);
  }

  .mobile-menu-button {
    display: inline-flex;
    width: 40px;
    height: 40px;
    padding: 0;
    color: var(--wow-text-muted, #9ca3af);
  }

  .header-metrics {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .header-tools {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) 42px;
    width: 100%;
  }

  .header-notification-panel {
    right: 0;
  }

  .intro-panel .tabs.wow-sidebar__nav,
  .app-shell.sidebar-collapsed .intro-panel .tabs.wow-sidebar__nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sidebar-footer,
  .app-shell.sidebar-collapsed .sidebar-footer {
    padding: var(--wow-space-3, 12px);
  }

  .sidebar-footer-actions,
  .app-shell.sidebar-collapsed .sidebar-footer-actions {
    display: flex;
    justify-content: start;
  }

  .sidebar-theme-toggle,
  .sidebar-collapse-button,
  .app-shell.sidebar-collapsed .sidebar-theme-toggle,
  .app-shell.sidebar-collapsed .sidebar-collapse-button {
    width: 32px;
    height: 32px;
    justify-content: center;
    margin: 0;
    padding: 0;
  }

  .sidebar-donation-button,
  .app-shell.sidebar-collapsed .sidebar-donation-button {
    width: auto;
    min-width: 116px;
    flex: 0 1 auto;
    justify-content: center;
    margin: 0;
    padding: 0 var(--wow-space-3, 12px);
    gap: var(--wow-space-2, 8px);
  }

  .app-shell.sidebar-collapsed .sidebar-donation-button .donation-button__text {
    display: inline;
  }

  .choice-grid,
  #injuryChoices,
  .body-type-grid,
  .routine-grid,
  .quick-grid,
  .reward-missions-grid,
  .reward-dashboard-actions,
  .exercise-image-grid {
    grid-template-columns: 1fr;
  }

  .ranking-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--wow-space-2, 8px);
  }

  .ranking-points {
    justify-items: end;
  }

  .ranking-achievements {
    grid-column: 1 / -1;
    justify-self: start;
    min-width: 0;
    padding-left: 92px;
    text-align: left;
  }

  .calendar-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calendar-weekdays {
    display: none;
  }

  .agenda-month-header {
    align-items: stretch;
    flex-direction: column;
  }

  .agenda-month-controls {
    width: 100%;
    justify-content: space-between;
  }

  .agenda-month-controls strong {
    min-width: 0;
    flex: 1 1 auto;
  }

  .admin-filters {
    grid-template-columns: 1fr;
  }

  .modal-recipe-grid {
    grid-template-columns: 1fr;
  }

  .recipe-card header strong {
    max-width: none;
  }

  .target-measure-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .eating-out-grid {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  }

  .recipe-card {
    min-height: auto;
  }

  .monthly-progression-card {
    grid-template-columns: 1fr;
  }

  .training-time-body {
    grid-template-columns: 1fr;
  }

  .custom-plan-section--schedule,
  .custom-meal-section--source,
  .custom-workout-section--schedule,
  .custom-workout-section--exercise,
  .custom-workout-section--metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .app-shell,
  .app-shell.sidebar-collapsed {
    padding: var(--wow-space-2, 8px);
  }

  .admin-media-item {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .admin-media-preview {
    width: 56px;
    height: 56px;
  }

  .admin-media-actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  .admin-media-actions .wow-btn,
  .admin-media-actions .image-upload-control {
    flex: 1 1 140px;
  }

  .plan-detail-switcher {
    padding: var(--wow-space-4, 16px);
  }

  .progress-share-actions .wow-btn,
  .progress-share-modal-actions .wow-btn {
    width: 100%;
  }

  .progress-share-network-grid,
  .progress-share-photo-grid {
    grid-template-columns: 1fr;
  }

  .nutrition-upload-options {
    grid-template-columns: 1fr;
  }

  .branding-admin-card,
  .branding-admin-form,
  .branding-preview-card {
    padding: var(--wow-space-4, 16px);
  }

  .branding-form-grid {
    grid-template-columns: 1fr;
  }

  .branding-form-bottom {
    grid-template-columns: 1fr;
  }

  .branding-actions .wow-btn {
    width: 100%;
  }

  .plan-detail-tabs {
    grid-template-columns: 1fr;
  }

  .account-hero,
  .account-card {
    padding: var(--wow-space-4, 16px);
  }

  .account-hero-main {
    align-items: flex-start;
  }

  .account-avatar {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }

  .account-export-secondary button {
    flex: 1 1 120px;
  }

  .admin-media-copy strong,
  .admin-media-copy span {
    white-space: normal;
  }

  .admin-user-row {
    grid-template-columns: 1fr;
  }

  .admin-user-actions {
    justify-content: stretch;
  }

  .admin-user-actions .wow-btn {
    flex: 1 1 130px;
  }

  .exercise-video-admin,
  .admin-media-video,
  .suggestions-admin-summary,
  .auth-register-fields {
    grid-template-columns: 1fr;
  }

  .exercise-video-admin .wow-btn,
  .admin-media-video .wow-btn {
    width: 100%;
    justify-content: center;
  }

  .log-item button,
  .admin-user-actions,
  .monthly-photo-entry header {
    width: 100%;
  }

  .monthly-photo-entry header {
    align-items: flex-start;
    flex-direction: column;
  }

  .daily-dashboard,
  .plan-grid,
  .agenda-summary,
  .agenda-actions,
  .mini-summary,
  .recipe-grid,
  .light-recipes-grid,
  .recipe-meal-selector,
  .light-recipe-tabs,
  .meal-guide-steps,
  .header-metrics,
  .weekly-review-grid,
  .level-grid,
  .plan-stage-grid,
  .progress-pillars-grid,
  .photo-compare-grid,
  .dashboard-quick-grid,
  .intro-panel .tabs.wow-sidebar__nav,
  .app-shell.sidebar-collapsed .intro-panel .tabs.wow-sidebar__nav {
    grid-template-columns: 1fr;
  }

  .meal-food-row {
    grid-template-columns: 1fr;
  }

  .recipe-meal-form {
    grid-template-columns: 1fr;
  }

  .custom-plan-form,
  .custom-plan-section--schedule,
  .custom-meal-section--source,
  .custom-meal-section--amount,
  .custom-workout-section--schedule,
  .custom-workout-section--exercise,
  .custom-workout-section--metrics,
  .plan-mode-metrics,
  .custom-plan-summary {
    grid-template-columns: 1fr;
  }

  .meal-row-remove {
    width: 100%;
  }

  .eating-out-grid {
    grid-template-columns: 1fr;
    max-height: none;
    padding-right: 0;
  }

  .eating-out-grid .quick-card.eating-out-card {
    min-height: auto;
  }

  .light-recipes-note {
    align-items: flex-start;
    flex-direction: column;
  }

  .meal-tools-header,
  .card-heading,
  .exercise-modal-summary__item {
    align-items: flex-start;
  }

  .app-header.wow-appbar,
  .app-shell.sidebar-collapsed .app-header.wow-appbar {
    top: var(--wow-space-2, 8px);
    min-height: 64px;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: var(--wow-space-3, 12px);
    margin-bottom: var(--wow-space-3, 12px);
    padding: var(--wow-space-2, 8px);
  }

  .mobile-menu-button {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: var(--wow-radius-md, 8px);
    background: var(--wow-accent-soft, rgba(34, 211, 238, 0.12));
    color: var(--wow-text-muted, #64748b);
  }

  .app-header .eyebrow {
    font-size: 0.72rem;
    line-height: 1.1;
  }

  .app-header .wow-appbar__title {
    font-size: 1.25rem;
    line-height: 1.15;
  }

  .header-metrics {
    display: grid;
    grid-template-columns: 44px;
    width: auto;
  }

  .header-metrics article {
    display: none;
  }

  .header-tools {
    grid-column: 3;
    grid-row: 1;
    width: auto;
    justify-self: end;
    grid-template-columns: 44px 44px;
  }

  .header-reward-badge {
    min-width: 44px;
    width: 44px;
    height: 44px;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    justify-items: center;
    padding: 0;
  }

  .header-reward-badge > span {
    grid-row: auto;
  }

  .header-reward-badge strong,
  .header-reward-badge small {
    display: none;
  }

  .header-notification-button {
    width: 44px;
    height: 44px;
    min-height: 44px;
  }

  .header-notification-panel {
    position: fixed;
    top: 78px;
    right: var(--wow-space-2, 8px);
    left: var(--wow-space-2, 8px);
    width: auto;
    max-height: calc(100vh - 96px);
  }

  .plan-grid.training-metrics-grid {
    grid-template-columns: 1fr;
  }

  .diagnosis-section {
    padding: var(--wow-space-4, 16px);
  }

  .diagnosis-actions {
    padding: 0;
  }

  .diagnosis-actions .primary-action {
    width: 100%;
  }

  .agenda-week-day {
    align-items: flex-start;
    flex-direction: column;
  }

  .agenda-checks {
    justify-content: flex-start;
  }

  .dashboard-hero {
    display: grid;
  }

  .dashboard-donation-card {
    grid-template-columns: 1fr;
  }

  .donation-options {
    grid-template-columns: 1fr;
  }

  .donation-modal-hero,
  .donation-option {
    grid-template-columns: 1fr;
  }

  .donation-option {
    justify-items: start;
  }

  .dashboard-summary-grid,
  .dashboard-recent-list,
  .dashboard-main-grid,
  .dashboard-clean-grid,
  .dashboard-module-grid,
  .dashboard-support-grid,
  .dashboard-mini-grid,
  .agenda-day-summary,
  .agenda-detail-grid,
  .dashboard-grid,
  .dashboard-actions {
    grid-template-columns: 1fr;
  }

  .admin-maintenance-actions {
    grid-template-columns: 1fr;
  }

  .progress-photo-grid {
    grid-template-columns: 1fr;
  }

  .meal-final-action {
    align-items: stretch;
    flex-direction: column;
  }

  .monthly-photo-grid {
    grid-template-columns: 1fr;
  }

  .calendar-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-card--wide,
  .dashboard-card--actions {
    grid-column: auto;
  }

  .header-metrics article:nth-child(3) strong {
    max-width: none;
  }

  .log-item,
  .meal-group header,
  .recipe-card header,
  .routine-card header,
  .modal-panel > header {
    grid-template-columns: 1fr;
    display: grid;
  }

  .suggestion-admin-action {
    width: 100%;
  }

  .suggestion-admin-action small {
    text-align: left;
  }

  .suggestion-modal-actions {
    grid-template-columns: 1fr;
  }

  .routine-card-badges {
    justify-content: flex-start;
  }

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

  .target-measure-list,
  .target-measure-values,
  .progress-status-values,
  .monthly-progression-stats,
  .target-date-grid,
  .target-date-chip-grid,
  .goal-projection-timeline,
  .training-energy-summary {
    grid-template-columns: 1fr;
  }

  .modal-backdrop {
    align-items: end;
    padding: var(--wow-space-2, 8px);
  }

  .modal-panel {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    border-radius: var(--wow-radius-md, 8px);
  }

  #exerciseModal .modal-panel {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }

  #exerciseModal .modal-panel > header,
  #exerciseModal .wow-modal__body {
    padding: var(--wow-space-4, 16px);
  }

  .exercise-card-actions {
    align-items: stretch;
  }

  .recipe-image-frame {
    min-height: 150px;
  }

  .admin-upload-control {
    position: absolute;
    left: var(--wow-space-3, 12px);
    right: var(--wow-space-3, 12px);
    bottom: var(--wow-space-2, 8px);
    margin: 0;
  }

  .modal-recipe-image-card .admin-upload-control {
    margin: 0;
  }

  .food-log-item {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .food-log-item button {
    grid-column: 1 / -1;
  }

  .food-log-image {
    width: 56px;
    height: 56px;
  }

  .exercise-card-actions .image-upload-control {
    width: 100%;
    justify-content: center;
  }
}