/*
 * Canonical pure-black theme. This file is intentionally loaded after both the
 * legacy bundle and every page stylesheet so old glass highlights cannot leak
 * back into dark mode.
 */
body:is([data-theme="dark"], .theme-active-dark) {
    color-scheme: dark;
    --bg: #000;
    --surface: #050505;
    --surface-2: #0b0b0b;
    --ink: #f4f4f5;
    --muted: #a1a1aa;
    --line: rgba(255, 255, 255, 0.13);
    --border: rgba(255, 255, 255, 0.13);
    --shadow: none;
    --glass: #050505;
    --glass-strong: #080808;
    --glass-border: rgba(255, 255, 255, 0.13);
    --glass-shadow: none;
    --glass-bg: #050505;
    --glass-bg-strong: #080808;
    --glass-bg-soft: #030303;
    --glass-border-bright: rgba(255, 255, 255, 0.13);
    --glass-highlight: transparent;
    --glass-shadow-soft: none;
    --glass-shadow-deep: none;
    --ui-glass-panel: #050505;
    --ui-soft-border: rgba(255, 255, 255, 0.13);
    --ui-soft-shadow: none;
    --dark-ui-bg: #000;
    --dark-ui-surface: #050505;
    --dark-ui-surface-strong: #080808;
    --dark-ui-surface-soft: #0b0b0b;
    --dark-ui-row: #080808;
    --dark-ui-row-hover: #101010;
    --dark-ui-border: rgba(255, 255, 255, 0.13);
    --dark-ui-border-strong: rgba(255, 255, 255, 0.20);
    --dark-ui-text: #f4f4f5;
    --dark-ui-muted: #a1a1aa;
    --liquid-glass-bg: #050505;
    --liquid-glass-bg-strong: #080808;
    --liquid-glass-clear: #050505;
    --liquid-glass-border: rgba(255, 255, 255, 0.13);
    --liquid-glass-shadow: none;
    --ios-glass-bg: #050505;
    --ios-glass-border: rgba(255, 255, 255, 0.13);
    --ios-active-bg: #101010;
    --ios-shadow: none;
    color: var(--ink);
    background: #000 !important;
    background-image: none !important;
}

body.login-body.login-body-has-bg:is([data-theme="dark"], .theme-active-dark) {
    background:
        linear-gradient(135deg, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.68)),
        var(--login-bg-image, none) center / cover no-repeat fixed !important;
}

/* No raised or milky highlights in the black theme. Borders and focus rings
   carry hierarchy instead of light inset shadows. */
body:is([data-theme="dark"], .theme-active-dark) *,
body:is([data-theme="dark"], .theme-active-dark) *::before,
body:is([data-theme="dark"], .theme-active-dark) *::after {
    text-shadow: none !important;
    box-shadow: none !important;
}

body:is([data-theme="dark"], .theme-active-dark) :is(a, button, input, select, textarea, summary):focus-visible {
    outline: 2px solid color-mix(in srgb, var(--primary) 78%, #fff) !important;
    outline-offset: 2px !important;
}

body:is([data-theme="dark"], .theme-active-dark)[data-page="nutrition"] .nutrition-meal-food-picker-search > label:focus-within {
    outline: 0;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 78%, #fff);
}
body:is([data-theme="dark"], .theme-active-dark)[data-page="nutrition"] .nutrition-meal-food-picker-search > label input:focus-visible {
    outline: 0 !important;
}

body:is([data-theme="dark"], .theme-active-dark) :where(
    .topbar,
    .bottom-nav,
    .mobile-liquid-nav,
    .floating-log > summary,
    .panel,
    .hero-panel,
    .metric-card,
    .chart-card,
    .pending-card,
    .mini-card,
    .compact-panel,
    .glass-panel,
    .motivation-band,
    .user-edit-card,
    .settings-nav-item,
    .settings-preference-group,
    .app-page-hero,
    .app-modal-card,
    .confirm-modal-card,
    .topbar-context-panel,
    .add-menu-panel,
    .user-menu-panel,
    .kebab-menu-panel,
    .calendar-view-panel,
    .modal-card,
    .drawer-card,
    .sheet-card,
    .entry-mode-tabs,
    .table-wrap,
    .calendar-empty-state,
    .gallery-empty,
    .photo-comment-item,
    .photo-comments-empty,
    [class$="-card"],
    [class*="-card "],
    [class$="-panel"],
    [class*="-panel "]
) {
    color: var(--ink) !important;
    border-color: var(--line) !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body:is([data-theme="dark"], .theme-active-dark) :where(
    .panel,
    .hero-panel,
    .metric-card,
    .chart-card,
    .glass-panel,
    .app-page-hero,
    .app-modal-card,
    .confirm-modal-card,
    .topbar-context-panel,
    .add-menu-panel,
    .user-menu-panel,
    .kebab-menu-panel
)::before {
    background-image: none !important;
}

/* CUIDADO: los dos últimos selectores son un catch-all. `[class$="-row"]` y
   `[class*="-row "]` reclaman CUALQUIER clase que termine en `-row`, presente o
   futura, y lo hacen con `!important`, así que ganan a cualquier regla de
   página que no lleve `!important` — da igual lo específica que sea.
   Hoy no rompe ninguna pantalla, pero conviene saber por qué:

   - `background-image: none` apunta al elemento, NO a sus pseudo-elementos. Un
     degradado en `::before` (el velo de .social-person-row y de
     .profile-identity-row) sobrevive.
   - `background-color: #080808` sí gana, pero un `<img>` hijo se pinta POR
     ENCIMA del fondo del padre, así que las portadas de usuario se siguen
     viendo. Por eso Social y Perfil aguantan.

   La trampa: una fila que use `background-image` como superficie (en vez de un
   `<img>` hijo) se volverá negra en oscuro sin causa aparente. Si necesitas una
   así, sácala de aquí con una regla posterior en este mismo fichero, p. ej.
   `body:is([data-theme="dark"], .theme-active-dark) .mi-fila {
        background-color: transparent !important; }`
   (misma especificidad, gana por orden). Verificado el 16/08/2026 sobre Perfil,
   Social, Entreno, Notificaciones, Ajustes, Equipo e Inicio. */
body:is([data-theme="dark"], .theme-active-dark) :where(
    .leaderboard-row,
    .dashboard-week-row,
    .settings-row,
    .compact-list-item,
    .notification-card,
    .member-row,
    .goal-row,
    .history-row,
    [class$="-row"],
    [class*="-row "]
) {
    color: var(--ink) !important;
    border-color: var(--line) !important;
    background-color: #080808 !important;
    background-image: none !important;
}

/* Friends is one photographic surface, not a set of generic dark list rows.
   Keep the canonical row reset everywhere else, but let this card's single
   frosted veil reveal the shared backdrop underneath. The rows stay fully
   transparent: a per-row gradient made each one pick up a different slice of
   the backdrop, so four identical rows read as four different surfaces. */
body:is([data-theme="dark"], .theme-active-dark) .social-circle-overview .social-person-row,
body:is([data-theme="dark"], .theme-active-dark) .social-circle-overview .social-person-row:nth-child(even) {
    background-color: transparent !important;
    background-image: none !important;
}

body:is([data-theme="dark"], .theme-active-dark) .social-circle-overview .social-person-row:is(:hover, :focus-visible) {
    background-color: rgb(23 36 48 / .5) !important;
    background-image: none !important;
}

/* Notifications needs its own dark hierarchy. The generic card/row reset above
   otherwise flattens read and unread items into the same surface, paints the
   metadata row as a solid strip, and leaves the app icon with its light fill. */
body:is([data-theme="dark"], .theme-active-dark)[data-page="notifications"] {
    --notification-accent: #5eead4;
    --notification-mint: #000;
    --notification-row: #080808;
    --notification-unread: #0b1715;
}

body:is([data-theme="dark"], .theme-active-dark)[data-page="notifications"] .notifications-panel {
    border-color: transparent !important;
    background-color: transparent !important;
}

body:is([data-theme="dark"], .theme-active-dark)[data-page="notifications"] .notifications-inbox {
    background-color: var(--notification-mint) !important;
}

body:is([data-theme="dark"], .theme-active-dark)[data-page="notifications"] .notifications-date-list {
    border-color: var(--line);
    background-color: var(--surface);
}

body:is([data-theme="dark"], .theme-active-dark)[data-page="notifications"] .notification-card {
    background-color: var(--notification-row) !important;
}

body:is([data-theme="dark"], .theme-active-dark)[data-page="notifications"] .notification-card.is-unread {
    background-color: var(--notification-unread) !important;
}

body:is([data-theme="dark"], .theme-active-dark)[data-page="notifications"] :is(.notification-meta-row, .notification-reader-title-row) {
    color: var(--muted) !important;
    border-color: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

body:is([data-theme="dark"], .theme-active-dark)[data-page="notifications"] :is(
    .notifications-mark-all,
    .notifications-manage-shortcut,
    .notifications-filter-tabs button[aria-selected="true"],
    .notifications-filter-tabs button[aria-selected="true"] strong,
    .notification-meta-row em,
    .notification-main:is(:hover, :focus-visible) > strong,
    .notification-reader-back:is(:hover, :focus-visible)
) {
    color: var(--notification-accent);
}

body:is([data-theme="dark"], .theme-active-dark)[data-page="notifications"] :is(
    .notifications-mark-all,
    .notifications-manage-shortcut
):is(:hover, :focus-visible) {
    background-color: color-mix(in srgb, var(--notification-accent) 10%, transparent);
}

body:is([data-theme="dark"], .theme-active-dark)[data-page="notifications"] .notifications-filter-tabs button[aria-selected="true"] {
    background-color: #111 !important;
}

body:is([data-theme="dark"], .theme-active-dark)[data-page="notifications"] .notifications-filter-tabs button[aria-selected="true"] strong {
    background-color: color-mix(in srgb, var(--notification-accent) 12%, var(--surface));
}

body:is([data-theme="dark"], .theme-active-dark)[data-page="notifications"] :is(
    .notification-icon,
    .notification-reader-icon,
    .notifications-settings-title > span,
    .notifications-settings-card-icon,
    .notifications-empty-state > span
) {
    color: var(--notification-accent);
    background-color: color-mix(in srgb, #14b8a6 16%, var(--surface));
}

body:is([data-theme="dark"], .theme-active-dark)[data-page="notifications"] .notification-tone-action :is(.notification-icon, .notification-meta-row em) {
    color: #fdba74;
}

body:is([data-theme="dark"], .theme-active-dark)[data-page="notifications"] .notification-tone-action .notification-icon {
    background-color: color-mix(in srgb, #c2410c 20%, var(--surface));
}

body:is([data-theme="dark"], .theme-active-dark)[data-page="notifications"] .notification-tone-nutrition-ai :is(.notification-icon, .notification-meta-row em) {
    color: #c4b5fd;
}

body:is([data-theme="dark"], .theme-active-dark)[data-page="notifications"] .notification-tone-nutrition-ai .notification-icon {
    background-color: color-mix(in srgb, #7c3aed 20%, var(--surface));
}

body:is([data-theme="dark"], .theme-active-dark)[data-page="notifications"] :is(.notification-tone-social, .notification-tone-progress) :is(.notification-icon, .notification-meta-row em) {
    color: #93c5fd;
}

body:is([data-theme="dark"], .theme-active-dark)[data-page="notifications"] :is(.notification-tone-social, .notification-tone-progress) .notification-icon {
    background-color: color-mix(in srgb, #2563eb 18%, var(--surface));
}

body:is([data-theme="dark"], .theme-active-dark)[data-page="notifications"] .notification-tone-app .notification-icon {
    color: #cbd5e1;
    background-color: color-mix(in srgb, #64748b 18%, var(--surface));
}

body:is([data-theme="dark"], .theme-active-dark) :where(input, select, textarea) {
    color: var(--ink) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    background: #0a0a0a !important;
    background-image: none !important;
}

body:is([data-theme="dark"], .theme-active-dark) :where(input, textarea)::placeholder {
    color: #71717a !important;
    opacity: 1;
}

body:is([data-theme="dark"], .theme-active-dark) option {
    color: var(--ink);
    background: #080808;
}

body:is([data-theme="dark"], .theme-active-dark) :where(.btn-ghost, .btn-secondary:not(.proof-photo-submit), .icon-btn) {
    color: var(--ink) !important;
    border-color: var(--line) !important;
    background-color: #0a0a0a !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body:is([data-theme="dark"], .theme-active-dark) :where(.btn-primary, .proof-photo-submit, [aria-current="page"].active) {
    color: #fff !important;
    background-color: var(--primary) !important;
    background-image: none !important;
}

body:is([data-theme="dark"], .theme-active-dark) :where(.badge, .chip, .pill) {
    border-color: var(--line) !important;
    background-color: #101010 !important;
    background-image: none !important;
}

body:is([data-theme="dark"], .theme-active-dark) :where(table, thead, tbody, tr, th, td) {
    border-color: var(--line) !important;
}

body:is([data-theme="dark"], .theme-active-dark) :where(table, tbody, td) {
    color: var(--ink) !important;
    background-color: var(--surface) !important;
    background-image: none !important;
}

body:is([data-theme="dark"], .theme-active-dark) :where(thead, th) {
    color: var(--muted) !important;
    background-color: #0b0b0b !important;
    background-image: none !important;
}

body:is([data-theme="dark"], .theme-active-dark) :where(tbody tr:nth-child(even), tbody tr:nth-child(even) td) {
    background-color: #080808 !important;
}

body:is([data-theme="dark"], .theme-active-dark) :where(
    .confirm-modal,
    .app-modal,
    .modal-backdrop,
    .sheet-backdrop,
    .workouts-filter-backdrop
) {
    background-color: rgba(0, 0, 0, 0.82) !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Daily training data: force every nested section onto the same black scale. */
body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) {
    --entry-border: rgba(255, 255, 255, 0.13);
    --entry-soft: #080808;
    --entry-field: #0d0d0d;
    --entry-shadow: none;
    --meal-page-border: rgba(255, 255, 255, 0.13);
    --meal-page-soft: #080808;
    --meal-page-field: #0d0d0d;
    --meal-pitch-panel: #050505;
    --meal-pitch-card: #080808;
    --meal-pitch-field: #0d0d0d;
    --meal-pitch-raised: #101010;
    --meal-pitch-border: rgba(255, 255, 255, 0.13);
    --dc-navy: #f4f4f5;
    --dc-muted: #a1a1aa;
    --dc-line: rgba(255, 255, 255, 0.13);
    --dc-soft: #101010;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) :where(
    .entry-data-panel,
    .entry-data-toolbar,
    .entry-form-section,
    .entry-metric-field,
    .entry-weight-control,
    .workout-repeater,
    .entry-workout-toggle,
    .workout-row,
    .entry-habits-disclosure,
    .entries-toggles .check,
    .entry-notes-field,
    .entry-reason-section .conditional-reason,
    .entry-form-actions,
    .proof-photo-panel,
    .proof-photo-main-card,
    .proof-photo-side-card,
    .proof-photo-upload-label,
    .photo-nutrition-panel,
    .proof-photo-form-actions
) {
    color: var(--ink) !important;
    border-color: var(--line) !important;
    background-color: var(--surface) !important;
    background-image: none !important;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) :where(
    .entry-data-toolbar,
    .entry-form-section,
    .entry-metric-field,
    .entry-weight-control,
    .workout-repeater,
    .entry-habits-disclosure,
    .entry-notes-field,
    .entry-reason-section .conditional-reason,
    .proof-photo-main-card,
    .proof-photo-side-card,
    .photo-nutrition-panel
) {
    background-color: #080808 !important;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) :where(
    .entry-date-nav input,
    .entry-date-time-row input,
    .entry-data-form input:not([type="checkbox"]):not([type="radio"]),
    .entry-data-form select,
    .entry-data-form textarea,
    .proof-photo-form input:not([type="file"]),
    .proof-photo-form select,
    .photo-placeholder
) {
    color: var(--ink) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    background: #0d0d0d !important;
}

/* Daily check-in and its Apple Health / custom-metric libraries use their own
   component namespace. Keep those literal light surfaces on the same black
   scale as the rest of Entries so dates and disclosure copy retain contrast. */
body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) :where(
    .dc-date-bar,
    .dc-snapshot,
    .dc-disclosure,
    .dc-update-workspace,
    .dc-update-trigger,
    .dc-view-switch,
    .dc-view-switch button,
    .dc-quick-entry select,
    .dc-quick-value > span,
    .dc-quick-value input,
    .dc-library-header,
    .dc-metrics-section,
    .dc-library-group,
    .dc-library-tools,
    .dc-library-empty,
    .dc-manual-metrics,
    .dc-manual-metric,
    .dc-metrics-grid-head,
    .dc-metrics-manage-list,
    .dc-metric-manage-row,
    .dc-synced-metrics-list,
    .dc-synced-metric-row,
    .dc-search-field,
    .dc-add-metric,
    .dc-notes textarea,
    .dc-mic-button,
    .dc-health-tabs button,
    .dc-filter-tabs button,
    .dc-inline-input input,
    .dc-custom-control > input,
    .dc-custom-control > select,
    .dc-multi-choice summary,
    .dc-multi-choice > div,
    .dc-metrics-tools select,
    .dc-metric-organize-controls button
) {
    color: var(--ink) !important;
    border-color: var(--line) !important;
    background-color: #080808 !important;
    background-image: none !important;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) :where(
    .dc-disclosure-panel,
    .dc-customize-link,
    .dc-list-link,
    .dc-library-group > div,
    .dc-health-library-row,
    .dc-manual-metric,
    .dc-metric-manage-row,
    .dc-synced-metric-row,
    .dc-archived-row,
    .dc-metrics-manage-list,
    .dc-manual-metrics
) {
    border-color: var(--line) !important;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .dc-metrics-grid-head,
body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .dc-manual-metric:is(:hover, :focus-within) {
    background-color: #101817 !important;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) :where(
    .dc-section-icon,
    .dc-metric-icon,
    .dc-empty-state > span
) {
    background: color-mix(in srgb, var(--dc-accent, var(--dc-teal)) 18%, #080808) !important;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) :where(
    .dc-health-tabs button[aria-selected="true"],
    .dc-filter-tabs button.is-active,
    .dc-view-switch button[aria-selected="true"],
    .dc-section-action:hover,
    .dc-icon-button:hover,
    .dc-metric-row-actions button:hover,
    .dc-organize-banner
) {
    background-color: #101817 !important;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .dc-update-head h2 {
    color: var(--ink) !important;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .dc-update-trigger:is(:hover, :focus-visible) {
    background-color: #101817 !important;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) :where(.dc-update-panel, .dc-update-trigger-icon) {
    border-color: var(--line) !important;
    background-color: #0b1413 !important;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .dc-update-trigger-copy strong {
    color: var(--ink) !important;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .dc-table-mode-note {
    color: #8be5d9 !important;
    background: #0c2421 !important;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .dc-health-metric:hover {
    border-color: color-mix(in srgb, var(--dc-accent, var(--dc-teal)) 42%, var(--line)) !important;
    background: color-mix(in srgb, var(--dc-accent, var(--dc-teal)) 10%, #080808) !important;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .dc-library-alert,
body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .dc-inline-notice {
    color: #f3cb70 !important;
    border-color: rgba(243, 203, 112, .28) !important;
    background: #171206 !important;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) :where(
    .dc-segmented-progress span,
    .dc-target-bar
) {
    background-color: #242424 !important;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .daily-checkin.is-loading-day::after {
    color: var(--ink) !important;
    background: rgba(0, 0, 0, .82) !important;
}

/* Workouts had its own glass cards; keep them black without touching media. */
body[data-page="workouts"]:is([data-theme="dark"], .theme-active-dark) :where(
    .workouts-screen,
    .workouts-panel,
    .workouts-routine-card,
    .workouts-library-card,
    .workouts-session-exercise,
    .workouts-stat-card,
    .workouts-rest-timer,
    .workouts-week-agenda,
    .workouts-filter-sheet,
    .workouts-add-routine-dialog
) {
    color: var(--ink) !important;
    border-color: var(--line) !important;
    background-color: var(--surface) !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Training is the page canvas itself, not another dark card inside it. */
body[data-page="workouts"]:is([data-theme="dark"], .theme-active-dark) .workouts-screen {
    border-color: transparent !important;
    background-color: transparent !important;
}

body[data-page="workouts"]:is([data-theme="dark"], .theme-active-dark) .workouts-view-list > .workouts-hero {
    border-color: transparent !important;
    background-color: transparent !important;
}

/* Preserve real user media even though its containing card is flattened. */
body:is([data-theme="dark"], .theme-active-dark) :where(
    img,
    video,
    canvas,
    .profile-cover-media,
    .login-background-media,
    .workouts-exercise-media,
    .photo-card-media
) {
    background-image: initial;
}

/* Entries > Custom metric is a self-contained sheet. Its redesign originally
   shipped with literal light colours, which left a white header and controls
   floating over a black form in dark mode. Keep every layer in one dark tonal
   family while preserving the metric colour as the only accent. */
body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .custom-metric-flow-dialog {
    color: #f4f7f8 !important;
    border-color: rgba(173, 199, 205, .2) !important;
    background: #0b1118 !important;
    box-shadow: 0 26px 72px rgba(0, 0, 0, .56) !important;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .custom-metric-flow-dialog :is(
    .custom-metric-dialog-card,
    .custom-metric-dialog-head,
    .custom-metric-dialog-content,
    .custom-metric-dialog-actions
) {
    color: #f4f7f8 !important;
    background: #0b1118 !important;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .custom-metric-flow-dialog .custom-metric-dialog-actions {
    border-color: rgba(173, 199, 205, .16) !important;
    box-shadow: 0 -12px 28px rgba(0, 0, 0, .2) !important;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .custom-metric-flow-dialog :is(
    .custom-metric-dialog-title h2,
    .custom-metric-stepper button[aria-current="step"],
    .custom-metric-preview strong,
    .custom-metric-preview > b,
    .custom-metric-advanced > button,
    .custom-metric-switch-group strong,
    .custom-metric-create-another strong,
    .custom-metric-privacy-row strong,
    .custom-metric-library > header h3,
    .custom-metric-library-item,
    .custom-metric-library-manage,
    .custom-metric-icon-sheet h3,
    .custom-metric-unsaved h3,
    .custom-metric-log-editor > header strong
) {
    color: #f4f7f8 !important;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .custom-metric-flow-dialog :is(
    .custom-metric-dialog-title p,
    .custom-metric-stepper button,
    .custom-metric-section-label,
    .custom-metric-preview em,
    .custom-metric-preview > b small,
    .custom-metric-fields > label,
    .custom-metric-fields > label em,
    .custom-metric-fields > label > small,
    fieldset > legend,
    .custom-metric-advanced > button small,
    .custom-metric-switch-group small,
    .custom-metric-create-another small,
    .custom-metric-privacy-row small,
    .custom-metric-library > header p:last-child,
    .custom-metric-library-item small,
    .custom-metric-library-manage small,
    .custom-metric-unsaved p,
    .custom-metric-log-editor > header em,
    .custom-metric-log-editor > p,
    .custom-metric-log-control > label > span:first-child,
    .custom-metric-log-control legend,
    [data-custom-metric-footer-context],
    [data-custom-metric-library-actions] small
) {
    color: #9fb0be !important;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .custom-metric-flow-dialog :is(
    .custom-metric-mode-tabs,
    .custom-metric-segments,
    .custom-metric-advanced,
    .custom-metric-switch-group,
    .custom-metric-privacy-row,
    .custom-metric-create-another,
    .custom-metric-library-list,
    .custom-metric-library-manage
) {
    border-color: rgba(173, 199, 205, .18) !important;
    background: #101922 !important;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .custom-metric-flow-dialog :is(
    .custom-metric-mode-tabs button[aria-selected="true"],
    .custom-metric-segments input:checked + span,
    .custom-metric-advanced > button,
    .custom-metric-library-item,
    .custom-metric-log-input,
    .custom-metric-log-choices label,
    .custom-metric-icon-option > span,
    .custom-metric-icon-sheet > div,
    .custom-metric-unsaved > div
) {
    color: #f4f7f8 !important;
    border-color: rgba(173, 199, 205, .2) !important;
    background: #121d27 !important;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .custom-metric-flow-dialog :is(
    .custom-metric-fields input,
    .custom-metric-fields select,
    .custom-metric-fields textarea,
    .custom-metric-log-input input,
    .custom-metric-log-input select,
    .custom-metric-log-input textarea
) {
    color: #f4f7f8 !important;
    border-color: rgba(173, 199, 205, .22) !important;
    background: #101922 !important;
    color-scheme: dark;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .custom-metric-flow-dialog :is(
    .custom-metric-fields input,
    .custom-metric-fields textarea
)::placeholder {
    color: #748695 !important;
    opacity: 1;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .custom-metric-flow-dialog .custom-metric-preview {
    border-color: color-mix(in srgb, var(--custom-metric-preview-color) 35%, rgba(173, 199, 205, .2)) !important;
    background: color-mix(in srgb, var(--custom-metric-preview-color) 8%, #101922) !important;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .custom-metric-flow-dialog .custom-metric-preview > span:first-child,
body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .custom-metric-flow-dialog .custom-metric-library-swatch {
    background: color-mix(in srgb, var(--custom-metric-preview-color, var(--custom-metric-option-color, #18a999)) 16%, #121d27) !important;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .custom-metric-flow-dialog :is(
    .dialog-close,
    .custom-metric-icon-sheet header button
) {
    color: #f4f7f8 !important;
    background: #17232e !important;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .custom-metric-flow-dialog .custom-metric-stepper button > span {
    color: #c4d0d8 !important;
    background: #17232e !important;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .custom-metric-flow-dialog .custom-metric-stepper button[aria-current="step"] > span {
    color: #fff !important;
    background: #079987 !important;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .custom-metric-flow-dialog .custom-metric-stepper button.is-complete > span {
    color: #27c5b1 !important;
    background: transparent !important;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .custom-metric-flow-dialog .custom-metric-segments span {
    color: #dbe4e8 !important;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .custom-metric-flow-dialog .custom-metric-switch-group > label + label,
body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .custom-metric-flow-dialog .custom-metric-library-item {
    border-color: rgba(173, 199, 205, .14) !important;
}
body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .custom-metric-flow-dialog .custom-metric-library-group-label { color: #fda4af !important; border-color: rgba(173, 199, 205, .14) !important; background: #13090c !important; }

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .custom-metric-flow-dialog :is(
    .custom-metric-form-section,
    .custom-metric-step-panel
) {
    color: #f4f7f8 !important;
    background: transparent !important;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .custom-metric-flow-dialog .custom-metric-dialog-actions [data-custom-metric-create-actions] > p {
    color: #c8d3da !important;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .custom-metric-flow-dialog .custom-metric-log-editor {
    border-color: rgba(173, 199, 205, .16) !important;
    background: #0f1821 !important;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .custom-metric-flow-dialog .custom-metric-library-item.is-logging,
body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .custom-metric-flow-dialog .custom-metric-log-choices label:has(input:checked) {
    color: #74e0d1 !important;
    border-color: rgba(39, 197, 177, .55) !important;
    background: #112925 !important;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .custom-metric-flow-dialog .custom-metric-log-input small {
    color: #9fb0be !important;
}

/* Week studio uses its own visual language and literal light surfaces. Resolve
   those tokens and surfaces explicitly so dark mode remains one continuous
   workspace instead of alternating white cards and black editor rows. */
body[data-page="week_editor"]:is([data-theme="dark"], .theme-active-dark) {
    --ws-ink: #f2f6f7;
    --ws-muted: #9dadb9;
    --ws-teal: #20b8a5;
    --ws-teal-dark: #32c7b3;
    --ws-teal-soft: rgba(32, 184, 165, .13);
    --ws-purple: #a47cff;
    --ws-purple-soft: rgba(133, 89, 238, .15);
    --ws-amber: #f2aa3c;
    --ws-line: rgba(174, 199, 205, .18);
    --ws-card: #090d11;
    --ws-bg: #000;
    color: var(--ws-ink) !important;
    background: #000 !important;
    background-image: radial-gradient(circle at 8% 3%, rgba(32, 184, 165, .08), transparent 22rem) !important;
}

body[data-page="week_editor"]:is([data-theme="dark"], .theme-active-dark) :is(
    .week-studio-history,
    .week-studio-more > summary,
    .week-studio-more-menu,
    .week-studio-user,
    .week-studio-range,
    .week-studio-progress,
    .week-studio-board-card,
    .week-studio-day-editor,
    .week-studio-actions,
    .week-studio-actions > span,
    .week-studio-sheet > section
) {
    color: var(--ws-ink) !important;
    border-color: var(--ws-line) !important;
    background: #090d11 !important;
    background-image: none !important;
    box-shadow: none !important;
}

body[data-page="week_editor"]:is([data-theme="dark"], .theme-active-dark) :is(
    .week-studio-row-label,
    .week-studio-cell,
    .week-studio-readonly,
    .week-studio-customize-list,
    .week-studio-customize-list > div,
    .week-studio-input-unit,
    .week-studio-custom-habits [data-custom-habit-manage-row]
) {
    color: var(--ws-ink) !important;
    border-color: var(--ws-line) !important;
    background: #0d1319 !important;
}

body[data-page="week_editor"]:is([data-theme="dark"], .theme-active-dark) :is(
    .week-studio-fields input,
    .week-studio-fields select,
    .week-studio-fields textarea,
    .week-studio-extra-workouts input,
    .week-studio-extra-workouts select,
    .week-studio-custom-habits [data-custom-habit-form] input
) {
    color: var(--ws-ink) !important;
    border-color: rgba(174, 199, 205, .24) !important;
    background: #0e151c !important;
    color-scheme: dark;
}

body[data-page="week_editor"]:is([data-theme="dark"], .theme-active-dark) :is(
    .week-studio-choice span,
    .week-studio-habit-chips label span,
    .week-studio-multi-choice label span
) {
    color: var(--ws-ink) !important;
    border-color: rgba(174, 199, 205, .22) !important;
    background: #0d1319 !important;
}

body[data-page="week_editor"]:is([data-theme="dark"], .theme-active-dark) :is(
    .week-studio-choice input:checked + span,
    .week-studio-habit-chips label input:checked + span,
    .week-studio-multi-choice label input:checked + span,
    .week-studio-manage-metrics,
    .week-studio-sheet footer button
) {
    color: #66d8c9 !important;
    border-color: rgba(32, 184, 165, .55) !important;
    background: rgba(32, 184, 165, .13) !important;
}

body[data-page="week_editor"]:is([data-theme="dark"], .theme-active-dark) .week-studio-sheet footer .is-primary {
    color: #03110f !important;
    background: #2bc4b0 !important;
}

body[data-page="week_editor"]:is([data-theme="dark"], .theme-active-dark) :is(
    .week-studio-sheet header > button,
    .week-studio-custom-habits [data-custom-habit-manage-row] button
) {
    color: var(--ws-ink) !important;
    background: #17212b !important;
}

body[data-page="week_editor"]:is([data-theme="dark"], .theme-active-dark) .week-studio-progress-track,
body[data-page="week_editor"]:is([data-theme="dark"], .theme-active-dark) .week-studio-empty-ring {
    border-color: rgba(174, 199, 205, .3) !important;
    background: #19232c !important;
}

body[data-page="week_editor"]:is([data-theme="dark"], .theme-active-dark) .week-studio-habit-ring::before {
    background: #0d1319 !important;
}

body[data-page="week_editor"]:is([data-theme="dark"], .theme-active-dark) .week-studio-workout-dot {
    color: var(--ws-purple) !important;
    border-color: rgba(164, 124, 255, .4) !important;
    background: var(--ws-purple-soft) !important;
}

body[data-page="week_editor"]:is([data-theme="dark"], .theme-active-dark) .week-studio-day-head.is-selected-column,
body[data-page="week_editor"]:is([data-theme="dark"], .theme-active-dark) .week-studio-cell.is-selected-column {
    border-color: rgba(32, 184, 165, .55) !important;
    background: rgba(32, 184, 165, .1) !important;
}

body[data-page="week_editor"]:is([data-theme="dark"], .theme-active-dark) .week-studio-sheet-backdrop {
    background: rgba(0, 0, 0, .7) !important;
}

@media (prefers-color-scheme: dark) {
    body[data-theme="auto"] {
        color-scheme: dark;
        --bg: #000;
        --surface: #050505;
        --surface-2: #0b0b0b;
        --ink: #f4f4f5;
        --muted: #a1a1aa;
        --line: rgba(255, 255, 255, 0.13);
        --border: rgba(255, 255, 255, 0.13);
        --shadow: none;
        --glass: #050505;
        --glass-strong: #080808;
        --glass-border: rgba(255, 255, 255, 0.13);
        --glass-shadow: none;
        --dark-ui-bg: #000;
        --dark-ui-surface: #050505;
        --dark-ui-surface-strong: #080808;
        --dark-ui-row: #080808;
        --dark-ui-row-hover: #101010;
        --dark-ui-border: rgba(255, 255, 255, 0.13);
        --dark-ui-text: #f4f4f5;
        --dark-ui-muted: #a1a1aa;
        color: var(--ink);
        background: #000 !important;
        background-image: none !important;
    }

    body[data-theme="auto"] *,
    body[data-theme="auto"] *::before,
    body[data-theme="auto"] *::after {
        text-shadow: none !important;
        box-shadow: none !important;
    }
}