:root {
  --interface-accent: #5ba4f5;
  --interface-accent-light: color-mix(in srgb, var(--interface-accent) 72%, white);
  --interface-accent-deep: color-mix(in srgb, var(--interface-accent) 62%, #05080b);
  --interface-accent-soft: color-mix(in srgb, var(--interface-accent) 18%, transparent);
  --interface-accent-surface: color-mix(in srgb, var(--interface-accent) 12%, #151e27);
  --interface-accent-glow: color-mix(in srgb, var(--interface-accent) 34%, transparent);
}

.legacy-appearance-control {
  display: none !important;
}

.interface-studio {
  margin-top: 24px;
  padding: 22px;
  border: 1px solid #33475a;
  border-radius: 18px;
  background: #111c27;
}

.interface-studio h2 {
  margin: 7px 0 6px;
  color: #f2f7fb;
  font: 700 22px/1.1 "DM Sans";
}

.interface-studio > p:not(.eyebrow) {
  margin: 0 0 17px;
  color: #91a2b2;
  font: 12px/1.5 "DM Sans";
}

.preset-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.preset-grid button {
  display: grid;
  gap: 4px;
  min-height: 68px;
  padding: 12px;
  border: 1px solid #3c5063;
  border-radius: 12px;
  background: #162330;
  color: #eaf2f8;
  text-align: left;
  cursor: pointer;
}

.preset-grid button:last-child {
  grid-column: 1 / -1;
}

.preset-grid button.active {
  border-color: var(--interface-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--interface-accent) 24%, transparent);
}

.preset-grid strong {
  font: 700 12px "DM Sans";
}

.preset-grid span {
  color: #8ea1b3;
  font: 10px "DM Sans";
}

.preset-accent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  color: #a8b7c5;
  font: 600 11px "DM Sans";
}

.preset-accent input {
  width: 46px;
  height: 34px;
  padding: 3px;
  border: 1px solid #40566a;
  border-radius: 9px;
  background: #162330;
}

.preset-reset {
  margin-top: 7px;
  padding: 5px 0;
  border: 0;
  background: transparent;
  color: #83bfff;
  font: 700 10px "DM Sans";
  cursor: pointer;
}

html[data-interface-preset] .primary-button,
html[data-interface-preset] .progress i,
html[data-interface-preset] .nav-item.active::before {
  background-color: var(--interface-accent);
}

/* Slot 01: preserve the established PowerTrack structure. */
html[data-interface-preset="classic"] body {
  --preset-surface: #17212b;
}

/* Slot 02: a quieter, single-column training-first layout. */
html[data-interface-preset="focus"] body {
  --preset-surface: #13241f;
}
html[data-interface-preset="focus"] #today-view {
  max-width: 780px;
  margin-inline: auto;
}
html[data-interface-preset="focus"] .stat-grid {
  grid-template-columns: 1fr;
}
html[data-interface-preset="focus"] .stat-card,
html[data-interface-preset="focus"] .volume-trend {
  background: #14251f;
}

/* Slot 03: a wider, information-rich dashboard. */
html[data-interface-preset="dashboard"] body {
  --preset-surface: #181c31;
}
html[data-interface-preset="dashboard"] main {
  max-width: 1500px;
}
html[data-interface-preset="dashboard"] .stat-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
html[data-interface-preset="dashboard"] .stat-card,
html[data-interface-preset="dashboard"] .volume-trend {
  background: #191f35;
}

/* Slot 04: reduced spacing for quick scanning and logging. */
html[data-interface-preset="compact"] .view {
  padding-top: 18px;
}
html[data-interface-preset="compact"] .hero {
  margin-bottom: 16px;
}
html[data-interface-preset="compact"] .stat-grid,
html[data-interface-preset="compact"] .macro-grid,
html[data-interface-preset="compact"] .mobile-panel-carousel {
  gap: 8px;
}
html[data-interface-preset="compact"] .stat-card,
html[data-interface-preset="compact"] .macro-card,
html[data-interface-preset="compact"] .mobile-swipe-panel {
  padding: 12px;
  border-radius: 10px;
}

@media (max-width: 700px) {
  .preset-grid {
    grid-template-columns: 1fr;
  }
  .preset-grid button:last-child {
    grid-column: auto;
  }
  html[data-interface-preset="dashboard"] .stat-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* === Detailed visual direction for the five independent slots === */

/* 01 · CLASSIC — warm, mature, familiar. */
html[data-interface-preset="classic"] body,
html[data-interface-preset="classic"] .app-shell,
html[data-interface-preset="classic"] main {
  background: #14161a;
  color: #f4f0e8;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
html[data-interface-preset="classic"] .sidebar,
html[data-interface-preset="classic"] .topbar {
  border-color: #ffffff14;
  background: #17191e;
}
html[data-interface-preset="classic"] .stat-card,
html[data-interface-preset="classic"] .macro-card,
html[data-interface-preset="classic"] .volume-trend,
html[data-interface-preset="classic"] .mobile-swipe-panel,
html[data-interface-preset="classic"] .weekly-coach-card,
html[data-interface-preset="classic"] .food-scan-card,
html[data-interface-preset="classic"] .modal-card,
html[data-interface-preset="classic"] .profile-modal {
  border: 1px solid #ffffff16;
  border-radius: 13px;
  background: #1b1e23;
  box-shadow: inset 0 1px #ffffff08, 0 8px 24px #00000020;
}
html[data-interface-preset="classic"] .eyebrow,
html[data-interface-preset="classic"] .stat-label,
html[data-interface-preset="classic"] .nav-group {
  font-family: Inter, system-ui, sans-serif;
  font-weight: 750;
  letter-spacing: .12em;
}
html[data-interface-preset="classic"] .primary-button,
html[data-interface-preset="classic"] .progress i,
html[data-interface-preset="classic"] .nav-item.active::before {
  background: var(--interface-accent);
  color: #1a1205;
}
html[data-interface-preset="classic"] .nav-item.active {
  color: #fff4dd;
}
html[data-interface-preset="classic"] .volume-bar i {
  background: var(--interface-accent);
}

/* 02 · FOCUS — quiet, editorial, one priority per viewport. */
html[data-interface-preset="focus"] body,
html[data-interface-preset="focus"] .app-shell,
html[data-interface-preset="focus"] main {
  background: #0a0a0b;
  color: #f2f0ea;
}
html[data-interface-preset="focus"] main {
  scroll-behavior: smooth;
}
html[data-interface-preset="focus"] .sidebar {
  width: 76px;
  border-color: #ffffff0d;
  background: #0a0a0b;
}
html[data-interface-preset="focus"] .sidebar .brand,
html[data-interface-preset="focus"] .sidebar .nav-group,
html[data-interface-preset="focus"] .sidebar .nav-item:not(.active) {
  font-size: 0;
}
html[data-interface-preset="focus"] .sidebar .nav-item {
  justify-content: center;
  min-height: 54px;
  padding-inline: 0;
}
html[data-interface-preset="focus"] .sidebar .nav-symbol {
  margin: 0;
}
html[data-interface-preset="focus"] .sidebar-foot {
  display: none;
}
html[data-interface-preset="focus"] #today-view,
html[data-interface-preset="focus"] .view:not(#today-view) {
  max-width: 760px;
  margin-inline: auto;
}
html[data-interface-preset="focus"] .hero {
  min-height: 54vh;
  align-content: center;
  padding-block: 11vh;
}
html[data-interface-preset="focus"] .hero h1,
html[data-interface-preset="focus"] .page-title h1 {
  max-width: 690px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(46px, 7vw, 88px);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.045em;
}
html[data-interface-preset="focus"] .hero-actions {
  margin-top: 34px;
}
html[data-interface-preset="focus"] .hero-actions button:not(.primary-button) {
  border-color: transparent;
  background: transparent;
  color: #777873;
}
html[data-interface-preset="focus"] .stat-grid {
  display: flex;
  gap: 0;
  padding-block: 18px;
  border-block: 1px solid #ffffff12;
}
html[data-interface-preset="focus"] .stat-card,
html[data-interface-preset="focus"] .volume-trend,
html[data-interface-preset="focus"] .macro-card,
html[data-interface-preset="focus"] .mobile-swipe-panel {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
html[data-interface-preset="focus"] .stat-card + .stat-card {
  border-left: 1px solid #ffffff12;
}
html[data-interface-preset="focus"] .progress i {
  background: var(--interface-accent) !important;
}
html[data-interface-preset="focus"] .stat-card strong,
html[data-interface-preset="focus"] #total-volume {
  color: #f2f0ea;
}
html[data-interface-preset="focus"] .volume-trend {
  margin-top: 72px;
}
html[data-interface-preset="focus"] .view,
html[data-interface-preset="focus"] .modal-backdrop {
  transition: opacity .32s ease, transform .32s ease;
}

/* 03 · DASHBOARD — dense analytical console. */
html[data-interface-preset="dashboard"] body,
html[data-interface-preset="dashboard"] .app-shell,
html[data-interface-preset="dashboard"] main {
  background-color: #0d1117;
  background-image: linear-gradient(#ffffff05 1px, transparent 1px), linear-gradient(90deg, #ffffff05 1px, transparent 1px);
  background-size: 24px 24px;
  color: #e6edf3;
  font-size: 13px;
}
html[data-interface-preset="dashboard"] .sidebar,
html[data-interface-preset="dashboard"] .topbar {
  border-color: #30363d;
  background: #0d1117ee;
}
html[data-interface-preset="dashboard"] .view {
  max-width: 1440px;
}
html[data-interface-preset="dashboard"] .hero {
  padding-block: 22px;
}
html[data-interface-preset="dashboard"] .hero h1,
html[data-interface-preset="dashboard"] .page-title h1 {
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1;
}
html[data-interface-preset="dashboard"] .stat-grid,
html[data-interface-preset="dashboard"] .macro-grid {
  gap: 10px;
}
html[data-interface-preset="dashboard"] .stat-card,
html[data-interface-preset="dashboard"] .macro-card,
html[data-interface-preset="dashboard"] .volume-trend,
html[data-interface-preset="dashboard"] .mobile-swipe-panel,
html[data-interface-preset="dashboard"] .weekly-coach-card,
html[data-interface-preset="dashboard"] .food-scan-card {
  border: 1px solid #30363d;
  border-top: 3px solid var(--interface-accent);
  border-radius: 6px;
  background: #121820;
  box-shadow: none;
}
html[data-interface-preset="dashboard"] .macro-card.protein { border-top-color: #f778ba; }
html[data-interface-preset="dashboard"] .macro-card.carbs { border-top-color: #58a6ff; }
html[data-interface-preset="dashboard"] .macro-card.fats { border-top-color: #d2a8ff; }
html[data-interface-preset="dashboard"] .macro-card.caffeine { border-top-color: #ffa657; }
html[data-interface-preset="dashboard"] .stat-card strong,
html[data-interface-preset="dashboard"] .macro-card strong,
html[data-interface-preset="dashboard"] input[type="number"] {
  font-family: "DM Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
html[data-interface-preset="dashboard"] .nav-item,
html[data-interface-preset="dashboard"] button,
html[data-interface-preset="dashboard"] .view {
  transition-duration: .08s !important;
}

/* 04 · COMPACT — fast, low-light, row-first input. */
html[data-interface-preset="compact"] body,
html[data-interface-preset="compact"] .app-shell,
html[data-interface-preset="compact"] main {
  background: #0b0c0e;
  color: #fff;
  font-family: "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
}
html[data-interface-preset="compact"] .sidebar,
html[data-interface-preset="compact"] .topbar {
  border-color: #292d31;
  background: #0d0f11;
}
html[data-interface-preset="compact"] .view {
  padding-top: 12px;
}
html[data-interface-preset="compact"] .page-title,
html[data-interface-preset="compact"] .hero {
  margin-bottom: 10px;
}
html[data-interface-preset="compact"] .hero h1,
html[data-interface-preset="compact"] .page-title h1 {
  font-family: "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  font-size: clamp(30px, 5vw, 48px);
  line-height: .95;
  letter-spacing: -.025em;
}
html[data-interface-preset="compact"] .stat-grid,
html[data-interface-preset="compact"] .macro-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 5px;
}
html[data-interface-preset="compact"] .stat-card,
html[data-interface-preset="compact"] .macro-card,
html[data-interface-preset="compact"] .mobile-swipe-panel,
html[data-interface-preset="compact"] .volume-trend,
html[data-interface-preset="compact"] .weekly-coach-card,
html[data-interface-preset="compact"] .food-scan-card {
  min-height: 0;
  padding: 10px;
  border: 0;
  border-bottom: 1px solid #292d31;
  border-radius: 0;
  background: #101214;
  box-shadow: none;
}
html[data-interface-preset="compact"] input,
html[data-interface-preset="compact"] select,
html[data-interface-preset="compact"] button {
  min-height: 44px;
  border-radius: 5px;
}
html[data-interface-preset="compact"] form,
html[data-interface-preset="compact"] .set-row,
html[data-interface-preset="compact"] .exercise-row {
  gap: 5px;
}
html[data-interface-preset="compact"] *,
html[data-interface-preset="compact"] *::before,
html[data-interface-preset="compact"] *::after {
  transition-duration: 0s !important;
}

@media (max-width: 800px) {
  html[data-interface-preset="focus"] .sidebar {
    width: 100% !important;
  }
  html[data-interface-preset="focus"] .sidebar .nav-item:not(.active) {
    font-size: inherit;
  }
  html[data-interface-preset="focus"] .hero {
    min-height: 60vh;
    padding-block: 14vh 9vh;
  }
  html[data-interface-preset="focus"] .nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
  }
  html[data-interface-preset="focus"] .nav-item,
  html[data-interface-preset="focus"] .sidebar .nav-item:not(.active) {
    min-width: 0;
    padding-inline: 2px;
    font-size: 9px;
    letter-spacing: -.02em;
  }
  html[data-interface-preset="focus"] .stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  html[data-interface-preset="dashboard"] .macro-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html[data-interface-preset="compact"] .macro-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Accent engine: one choice produces a coordinated family of shades. */
html[data-interface-preset] body.design-refresh .primary-button,
html[data-interface-preset] .primary-button {
  border-color: var(--interface-accent-deep) !important;
  background: var(--interface-accent) !important;
  color: #071018 !important;
  box-shadow: 0 6px 0 var(--interface-accent-deep), 0 11px 24px var(--interface-accent-glow) !important;
}
html[data-interface-preset] body.design-refresh .primary-button:hover,
html[data-interface-preset] .primary-button:hover {
  background: var(--interface-accent-light) !important;
  filter: saturate(1.05);
}
html[data-interface-preset] body.design-refresh .primary-button:active,
html[data-interface-preset] .primary-button:active {
  transform: translateY(3px);
  box-shadow: 0 3px 0 var(--interface-accent-deep), 0 6px 14px var(--interface-accent-glow) !important;
}
html[data-interface-preset] .nav-item.active {
  border-color: var(--interface-accent-deep);
  background: var(--interface-accent-soft);
  color: var(--interface-accent-light);
  box-shadow: inset 3px 0 var(--interface-accent);
}
html[data-interface-preset] .nav-item.active .nav-symbol,
html[data-interface-preset] .brand-mark,
html[data-interface-preset] .text-link,
html[data-interface-preset] .add-set,
html[data-interface-preset] .add-exercise,
html[data-interface-preset] .preset-reset {
  color: var(--interface-accent) !important;
}
html[data-interface-preset] .progress i,
html[data-interface-preset] body.design-refresh .progress i,
html[data-interface-preset] .volume-bar i {
  background: linear-gradient(90deg, var(--interface-accent-deep), var(--interface-accent-light)) !important;
}
html[data-interface-preset] .profile-avatar-preview {
  border-color: var(--interface-accent);
  background: linear-gradient(145deg, var(--interface-accent), var(--interface-accent-deep));
  box-shadow: 0 0 0 4px var(--interface-accent-soft), 0 10px 24px var(--interface-accent-glow);
}
html[data-interface-preset] .stock-avatar.selected {
  border-color: var(--interface-accent-light);
  box-shadow: 0 0 0 3px var(--interface-accent-soft);
}
html[data-interface-preset] .nutrient-tabs button.active,
html[data-interface-preset] [role="tab"][aria-selected="true"],
html[data-interface-preset] .recovery-actions button.active {
  border-color: var(--interface-accent-deep) !important;
  background: var(--interface-accent) !important;
  color: #071018 !important;
  box-shadow: 0 3px 0 var(--interface-accent-deep) !important;
}
html[data-interface-preset] input:focus,
html[data-interface-preset] select:focus,
html[data-interface-preset] textarea:focus,
html[data-interface-preset] button:focus-visible {
  outline-color: var(--interface-accent) !important;
  border-color: var(--interface-accent) !important;
  box-shadow: 0 0 0 3px var(--interface-accent-soft);
}
html[data-interface-preset] #profile-form > .primary-button {
  background: linear-gradient(180deg, var(--interface-accent-light), var(--interface-accent)) !important;
  box-shadow: 0 7px 0 var(--interface-accent-deep), 0 13px 26px var(--interface-accent-glow) !important;
}
html[data-interface-preset] #profile-form > .primary-button:active {
  box-shadow: 0 3px 0 var(--interface-accent-deep), 0 7px 15px var(--interface-accent-glow) !important;
}
html[data-interface-preset] .account-identity,
html[data-interface-preset] .interface-studio,
html[data-interface-preset] .account-manage-form {
  border-color: color-mix(in srgb, var(--interface-accent) 42%, #33475a);
}
html[data-interface-preset] .account-identity span,
html[data-interface-preset] .interface-studio > .eyebrow {
  color: var(--interface-accent-light);
}
html[data-interface-preset] .accent-card {
  border-color: var(--interface-accent-deep) !important;
  background: linear-gradient(145deg, var(--interface-accent-deep), var(--interface-accent-surface)) !important;
}
html[data-interface-preset] .preset-grid button.active {
  border-color: var(--interface-accent);
  background: var(--interface-accent-surface);
  box-shadow: 0 0 0 3px var(--interface-accent-soft), inset 0 -3px var(--interface-accent-deep);
}

@media (prefers-reduced-motion: reduce) {
  html[data-interface-preset] *,
  html[data-interface-preset] *::before,
  html[data-interface-preset] *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}