/* Compact Appearance setting and the persistent Fieldnote dark palette. */
.appearance-settings-card { padding: 14px 16px; box-shadow: none; }
.appearance-settings-card .card-title-row { margin-bottom: 8px; }
.appearance-setting-row { display: flex; align-items: center; gap: 10px; }
.appearance-setting-icon { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--green-pale); color: var(--green); font-size: 15px; }
.appearance-setting-copy { flex: 1; min-width: 0; }
.appearance-setting-copy strong { display: block; font: 700 12px Manrope, sans-serif; }
.appearance-setting-copy span { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.appearance-setting-status { color: #909890; font-size: 10px; }
.theme-toggle { position: relative; width: 38px; height: 22px; flex: none; padding: 2px; border: 0; border-radius: 99px; background: #d9ded7; cursor: pointer; transition: background .18s ease; }
.theme-toggle::after { content: ""; display: block; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px #20332626; transition: transform .18s ease; }
.theme-toggle.is-on { background: #789273; }
.theme-toggle.is-on::after { transform: translateX(16px); }
.theme-toggle:focus-visible { outline: 3px solid #96b292; outline-offset: 3px; }

body.dark-mode {
  color-scheme: dark;
  --ink: #edf2eb;
  --muted: #a2aea4;
  --line: #35443a;
  --paper: #171f1b;
  --white: #202a24;
  --green: #a2bb98;
  --green-dark: #d8e5d4;
  --green-pale: #29392e;
  --orange: #e3a176;
  --orange-pale: #3b2d24;
  --blue: #9db6bb;
  --blue-pale: #27383b;
  --shadow: 0 10px 28px rgba(5, 12, 8, .26);
  background: var(--paper);
  color: var(--ink);
}

body.dark-mode .app-shell,
body.dark-mode .main-area,
body.dark-mode .content-wrap,
body.dark-mode .page { background: var(--paper); color: var(--ink); }
body.dark-mode .main-area { background-image: none; }
body.dark-mode .sidebar { background-image: none; }
body.dark-mode .sidebar,
body.dark-mode .mobile-nav { background: #131a16; border-color: var(--line); }
body.dark-mode .brand,
body.dark-mode .page-heading h1,
body.dark-mode .card-title,
body.dark-mode .settings-nav button,
body.dark-mode .nav-item { color: var(--ink); }
body.dark-mode .side-caption,
body.dark-mode .eyebrow,
body.dark-mode .page-heading p,
body.dark-mode .subtle,
body.dark-mode .profile span,
body.dark-mode .field label,
body.dark-mode .field-help,
body.dark-mode .note,
body.dark-mode .metric-label,
body.dark-mode .metric-unit,
body.dark-mode .chart-labels,
body.dark-mode .legend-row,
body.dark-mode .marker-row span { color: var(--muted); }
body.dark-mode .nav-item:hover,
body.dark-mode .nav-item.active,
body.dark-mode .settings-nav button.active,
body.dark-mode .mobile-nav-item.active { color: #e0eadc; background: #29372d; }
body.dark-mode .privacy-note,
body.dark-mode .insight-card,
body.dark-mode .advice-card,
body.dark-mode .training-advice,
body.dark-mode .note-card,
body.dark-mode .recovery-card { background: #202c23; border-color: #35493a; color: #aab7aa; }
body.dark-mode .privacy-note strong,
body.dark-mode .insight-card strong,
body.dark-mode .advice-card strong,
body.dark-mode .training-advice strong,
body.dark-mode .note-card strong { color: #deead9; }
body.dark-mode .card,
body.dark-mode .kpi-card,
body.dark-mode .metric-card,
body.dark-mode .chart-card,
body.dark-mode .settings-content .card,
body.dark-mode .training-summary-tile,
body.dark-mode .training-frequency,
body.dark-mode .training-activity-card,
body.dark-mode .training-plan-editor,
body.dark-mode .training-plan-session,
body.dark-mode .overview-add-card,
body.dark-mode .nutrition-card { background: var(--white); border-color: var(--line); box-shadow: var(--shadow); }
body.dark-mode .button,
body.dark-mode .date-pill,
body.dark-mode .icon-button,
body.dark-mode .mobile-settings,
body.dark-mode .quick-link,
body.dark-mode .history-day,
body.dark-mode .calendar-day,
body.dark-mode .stat-tile,
body.dark-mode .training-plan-day,
body.dark-mode .plan-type-choice,
body.dark-mode .plan-library-row,
body.dark-mode .planned-activity-suggestion,
body.dark-mode .connection-card,
body.dark-mode .workout-card,
body.dark-mode .add-row input,
body.dark-mode .field input,
body.dark-mode .field select { background: #202a24; border-color: var(--line); color: var(--ink); }
body.dark-mode .button:hover,
body.dark-mode .quick-link:hover { background: #29372e; border-color: #526653; }
body.dark-mode .button.primary { background: #54735e; border-color: #54735e; color: #f5f7f1; }
body.dark-mode .button.soft,
body.dark-mode .goal-chip.selected,
body.dark-mode .training-plan-day.selected,
body.dark-mode .plan-type-choice.selected { background: #29392e; border-color: #435847; color: #dce8d8; }
body.dark-mode .training-hero { background: #171f1b; }
body.dark-mode .training-mannequin:before { background: radial-gradient(ellipse, rgba(142, 166, 139, .13), transparent 70%); }
body.dark-mode .training-summary-tile { background: rgba(32, 42, 36, .82); border-color: var(--line); }
body.dark-mode .training-summary-tile strong,
body.dark-mode .training-frequency-title h2,
body.dark-mode .editor-title-row h3,
body.dark-mode .training-plan-heading h2,
body.dark-mode .plan-library-copy strong,
body.dark-mode .planned-exercise-top strong { color: var(--ink); }
body.dark-mode .training-frequency>p,
body.dark-mode .training-plan-heading p,
body.dark-mode .editor-title-row p,
body.dark-mode .plan-field-label,
body.dark-mode .plan-library-note,
body.dark-mode .planned-prescription label,
body.dark-mode .sport-plan-grid label,
body.dark-mode .custom-exercise-fields label { color: var(--muted); }
body.dark-mode .training-plan-editor,
body.dark-mode .training-plan-session,
body.dark-mode .planned-exercise,
body.dark-mode .custom-exercise-form,
body.dark-mode .plan-empty-session,
body.dark-mode .rest-plan-note,
body.dark-mode .run-plan-note,
body.dark-mode .plan-session-tip { background: #202a24; border-color: var(--line); color: var(--muted); }
body.dark-mode .plan-muscle-chip,
body.dark-mode .plan-library-tools input,
body.dark-mode .plan-library-tools select,
body.dark-mode .planned-prescription input,
body.dark-mode .sport-plan-grid input,
body.dark-mode .sport-plan-grid select,
body.dark-mode .custom-exercise-fields input,
body.dark-mode .custom-exercise-fields select { background: #17211b; border-color: var(--line); color: var(--ink); }
body.dark-mode .plan-muscle-chip.selected { background: #3b3029; border-color: #6d5140; color: #e1b08a; }
body.dark-mode .overview-plan-day { background: #26332b; }
body.dark-mode .overview-plan-day.today { background: #314636; box-shadow: inset 0 0 0 1px #4f6d54; }
body.dark-mode .overview-plan-day span,
body.dark-mode .overview-plan-day small { color: var(--muted); }
body.dark-mode .overview-plan-day strong { color: #d6e4d1; }
body.dark-mode .planned-suggestion-copy strong,
body.dark-mode .plan-session-tip strong,
body.dark-mode .run-plan-note strong,
body.dark-mode .rest-plan-note strong { color: #d6e4d1; }
body.dark-mode .planned-suggestion-copy>span:last-child,
body.dark-mode .planned-suggestion-state,
body.dark-mode .run-plan-note p,
body.dark-mode .rest-plan-note p,
body.dark-mode .plan-session-tip p { color: var(--muted); }
body.dark-mode .planned-suggestion-exercise { background: #26332b; border-color: var(--line); }
body.dark-mode .planned-suggestion-exercise strong { color: var(--ink); }
body.dark-mode .plan-library-thumb { background-color: #344239; }
body.dark-mode .training-plan-status,
body.dark-mode .plan-saved-tag { background: #29392e; color: #c8ddc3; }
body.dark-mode .muscle-choice-grid label { background: #202a24; border-color: var(--line); color: var(--muted); }
body.dark-mode .heat-cell { color: var(--ink); }
body.dark-mode .heat-cell span { color: rgba(237, 242, 235, .8); }
body.dark-mode .muscle-highlight-note { color: #c8b8a8 !important; }
body.dark-mode .training-device-status strong,
body.dark-mode .training-device-status>div span,
body.dark-mode .training-devices-heading { color: var(--muted); }
body.dark-mode .account-field label { color: var(--muted); }
body.dark-mode .account-field input { background: #17211b; border-color: var(--line); color: var(--ink); }
body.dark-mode .field input::placeholder,
body.dark-mode .add-row input::placeholder { color: #7f8e82; }
body.dark-mode .goal-chip,
body.dark-mode .tag,
body.dark-mode .plan-saved-tag,
body.dark-mode .training-plan-status { background: #29352d; border-color: var(--line); color: #c2d0c0; }
body.dark-mode .tag button { color: #c2d0c0; }
body.dark-mode .food-entry,
body.dark-mode .saved-entry,
body.dark-mode .activity-row,
body.dark-mode .marker-row,
body.dark-mode .plan-item,
body.dark-mode .day-summary,
body.dark-mode .activity,
body.dark-mode .entry-divider { border-color: var(--line); }
body.dark-mode .food-info strong,
body.dark-mode .food-cal,
body.dark-mode .saved-entry strong,
body.dark-mode .entry-main strong,
body.dark-mode .metric-main,
body.dark-mode .kpi-value,
body.dark-mode .legend-row strong,
body.dark-mode .marker-row strong,
body.dark-mode .plan-text strong,
body.dark-mode .activity-row strong,
body.dark-mode .training-plan-day strong { color: var(--ink); }
body.dark-mode .food-info span,
body.dark-mode .food-cal span,
body.dark-mode .entry-main span,
body.dark-mode .activity-row span,
body.dark-mode .plan-text span,
body.dark-mode .plan-amount,
body.dark-mode .empty-state { color: var(--muted); }
body.dark-mode .calendar-day.selected,
body.dark-mode .history-day.selected { background: #3c5d48; border-color: #55785e; color: #e7eee3; }
body.dark-mode .calendar-day.selected strong,
body.dark-mode .history-day.selected strong { color: #f1f5ee; }
body.dark-mode .progress-track,
body.dark-mode .progress,
body.dark-mode .heat-0 { background: #3b493f; }
body.dark-mode .donut:before,
body.dark-mode .score-ring:before { background: var(--white); }
body.dark-mode .workout-art,
body.dark-mode .activity-icon,
body.dark-mode .training-summary-icon { background: #382d25; color: var(--orange); }
body.dark-mode .modal-backdrop { background: rgba(4, 10, 7, .72); }
body.dark-mode .modal,
body.dark-mode .account-card { background: #202a24; border-color: var(--line); color: var(--ink); }
body.dark-mode .modal h2,
body.dark-mode .modal label,
body.dark-mode .account-card h1 { color: var(--ink); }
body.dark-mode .upload-zone { background: #26332b; border-color: #536b56; color: var(--muted); }
body.dark-mode .upload-zone strong { color: #d6e3d2; }
body.dark-mode .device-footnote { border-color: var(--line); color: var(--muted); }
body.dark-mode .device-footnote button,
body.dark-mode .small-link,
body.dark-mode .detail-link { color: var(--green); }
body.dark-mode .toast { background: #344f3b; color: #f2f5ef; }
body.dark-mode .appearance-settings-card .subtle,
body.dark-mode .appearance-setting-status { color: var(--muted); }
body.dark-mode .theme-toggle { background: #455148; }
body.dark-mode .theme-toggle.is-on { background: #789273; }

@media (max-width: 390px) {
  .appearance-setting-row { gap: 8px; }
  .appearance-setting-copy span { max-width: 180px; }
}