/* === Habit check-in pending state: instant per-card feedback === */
.habit-checkin-pending {
    opacity: 0.68;
    transition: opacity 0.12s ease;
}
.habit-checkin-pending .checkin-btn,
.habit-checkin-pending .btn-outline-primary {
    pointer-events: none;
}

/* Telegram Mini App Styles */
:root {
    --tg-bg-color: #ffffff;
    --tg-text-color: #1a1a1a;
    --tg-hint-color: #6c757d;
    --tg-link-color: #2481cc;
    --tg-button-color: #2481cc;
    --tg-button-text-color: #ffffff;
    --tg-secondary-bg-color: #f8f9fa;
    --tg-border-color: #dee2e6;

    /* === Health Habits Hero brand foundation === */
    --hhh-bg-page: #F8F7F4;
    --hhh-surface: #FFFFFF;
    --hhh-surface-soft: #D3E6E4;
    --hhh-border: #E3E8E7;

    --hhh-teal-deep: #1D5A6C;
    --hhh-teal-muted: #54818E;
    --hhh-aqua: #43A0A5;
    --hhh-mist: #ABC0C5;
    --hhh-mint: #D3E6E4;

    --hhh-text-primary: #1D5A6C;
    --hhh-text-secondary: #54818E;
    --hhh-text-muted: #7E9BA3;
    --hhh-text-on-dark: #FFFFFF;
    --hhh-text-on-dark-secondary: #D6E1E4;

    --hhh-reward-soft: #C38B72;
    --hhh-reward-main: #A8644B;
    --hhh-reward-hover: #9E5D47;

    --hhh-dark-bg: #163F4C;
    --hhh-dark-surface: #1D5A6C;
    --hhh-dark-card: #245F71;
    --hhh-dark-card-active: #2A6E7C;
    --hhh-dark-border: rgba(255, 255, 255, 0.10);

    /* Header surface tokens */
    --hhh-header-bg: #1D5A6C;
    --hhh-header-text: #FFFFFF;
    --hhh-header-subtle: #D6E1E4;
    --hhh-header-surface: rgba(255, 255, 255, 0.10);
    --hhh-header-surface-hover: rgba(255, 255, 255, 0.16);
    --hhh-header-border: rgba(255, 255, 255, 0.12);

    /* === Semantic UI tokens (light mode) === */
    --color-page-bg: var(--hhh-bg-page);
    --color-surface: var(--hhh-surface);
    --color-surface-soft: var(--hhh-surface-soft);
    --color-border: var(--hhh-border);

    --color-text-primary: var(--hhh-text-primary);
    --color-text-secondary: var(--hhh-text-secondary);
    --color-text-muted: var(--hhh-text-muted);

    --color-action-primary: var(--hhh-reward-main);
    --color-action-primary-hover: var(--hhh-reward-hover);
    --color-action-secondary: var(--hhh-teal-deep);

    --color-progress: var(--hhh-aqua);
    --color-progress-secondary: var(--hhh-teal-muted);
    --color-reward: var(--hhh-reward-soft);
    --color-interactive: var(--hhh-teal-deep);
    --color-interactive-text: #ffffff;

    /* Override Bootstrap primary to teal (eliminates all BS blue: focus rings, bg-primary, etc.) */
    --bs-primary: #1D5A6C;
    --bs-primary-rgb: 29, 90, 108;
    --bs-btn-focus-shadow-rgb: 29, 90, 108;
    --bs-link-color: #1D5A6C;
    --bs-link-color-rgb: 29, 90, 108;

    --color-icon-primary: var(--hhh-aqua);
    --color-icon-secondary: var(--hhh-teal-muted);

    /* Statistics tokens (light) */
    --color-stat-value: #43A0A5;
    --color-stat-value-strong: #1D5A6C;
    --color-stat-label: #7E9BA3;
    --color-stat-track: #E3E8E7;
    --color-stat-progress: #43A0A5;
    --color-stat-progress-strong: #54818E;

    /* Premium / Pro surface tokens (light) */
    --color-premium-surface: #FFF9EA;
    --color-premium-surface-soft: #F8F0D8;
    --color-premium-border: #DEC17B;
    --color-premium-accent: #B8892D;
    --color-premium-text: #5E4918;
    --color-premium-icon: #C49A3A;

    /* Semantic status data colors (light) */
    --color-status-high: #2F8C69;
    --color-status-high-text: #FFFFFF;
    --color-status-medium: #C69A3A;
    --color-status-medium-text: #2F260F;
    --color-status-low: #C85A68;
    --color-status-low-text: #FFFFFF;

    /* Monthly results (light) */
    --color-monthly-surface: #DDF1F2;
    --color-monthly-border: #43A0A5;

    /* Settings info card (light) */
    --color-settings-info-surface: #CFE2DB;
    --color-settings-info-border: #9FC1B6;
    --color-settings-info-text: #214A3F;

    /* Calendar state tokens (light) */
    --color-calendar-none: #EEF1F2;
    --color-calendar-partial: #F3E3B0;
    --color-calendar-good: #A8D8DB;
    --color-calendar-perfect: #2A8A93;
    --color-calendar-future: #F8F7F4;
    --color-calendar-selected: #1D5A6C;
    --color-calendar-none-text: #54818E;
    --color-calendar-partial-text: #6C5520;
    --color-calendar-good-text: #1D5A6C;
    --color-calendar-perfect-text: #FFFFFF;

    /* Plan cards (light) */
    --color-plan-free-surface: #F4F8F7;
    --color-plan-free-border: #ABC0C5;
    --color-plan-free-price: #1D5A6C;
    --color-plan-pro-surface: #FFF7E2;
    --color-plan-pro-surface-strong: #F8E9B6;
    --color-plan-pro-border: #C9A64E;
    --color-plan-pro-title: #5E4918;
    --color-plan-pro-price: #B8892D;
    --color-plan-current-bg: #EACB67;
    --color-plan-current-text: #4F3D10;
    --color-plan-active-bg: #DDF1E9;
    --color-plan-active-border: #95C9B7;
    --color-plan-active-text: #356A5C;

    /* Billing options (light) */
    --color-billing-surface: #FFFFFF;
    --color-billing-border: #ABC0C5;
    --color-billing-selected-surface: #E8F3EF;
    --color-billing-selected-border: #54818E;
    --color-billing-price: #1D5A6C;
    --color-billing-save-bg: #5DA77C;
    --color-billing-save-text: #FFFFFF;

    /* Promo card (light) */
    --color-promo-surface: #F4F8F7;
    --color-promo-border: #ABC0C5;

    /* Danger / cancel (light) */
    --color-danger-text: #B64755;
    --color-danger-hover: #963846;
}

/* Prevent horizontal overflow on all screens */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--color-page-bg);
    color: var(--tg-text-color);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.container-fluid {
    padding: 0;
    max-width: 100%;
}

/* Header */
.header-wrapper {
    position: sticky;
    top: 0;
    z-index: 1000;
    /* Use both env() and JavaScript-set CSS variables for maximum compatibility */
    padding-top: max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px), var(--tg-content-safe-area-inset-top, 0px));
    background: var(--hhh-header-bg);
}

.header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
    min-height: 60px;
    background: var(--hhh-header-bg);
    color: var(--hhh-header-text);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    gap: 1rem;
}

.header-left {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.network-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    font-size: 0.7rem;
    background: rgba(255,255,255,0.2);
    border-radius: 12px;
    color: white;
    white-space: nowrap;
}

.network-badge.offline {
    background: rgba(220,53,69,0.8);
}

.network-badge.syncing {
    background: rgba(255,193,7,0.8);
}

.network-badge.synced {
    background: rgba(40,167,69,0.8);
}

.header-icon-mobile {
    display: none;
    font-size: 1.25rem;
    color: white;
    flex-shrink: 0;
}

.header-icon-desktop {
    display: inline;
    vertical-align: middle;
    margin-right: 2px;
}

.hh-mark {
    vertical-align: middle;
    flex-shrink: 0;
}

.header-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-text {
    display: inline;
}

/* Header Actions (PRO & Settings) */
.header-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.header-action-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    padding: 0.25rem 0.5rem;
    color: var(--hhh-header-text);
    text-decoration: none;
    transition: all 0.2s ease;
    border-radius: 8px;
    background: var(--hhh-header-surface);
    backdrop-filter: blur(10px);
}

.header-action-link:hover {
    background: var(--hhh-header-surface-hover);
    transform: translateY(-2px);
    color: var(--hhh-header-text);
}

.header-action-link:focus {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

.header-action-link.active {
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

.header-action-link i {
    font-size: 1.25rem;
    margin-bottom: 0.15rem;
}

.header-action-link[data-tab="subscription"] i {
    color: #ffd700;
    filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.5));
}

.header-action-link[data-tab="subscription"].active {
    background: rgba(255, 215, 0, 0.2);
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.5);
}

.header-action-link span {
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

/* Navigation */
.nav-tabs {
    position: sticky;
    /* Must match header-wrapper height: 60px base + whichever safe-area is largest.
       Using the same max() as header-wrapper's padding-top prevents overlap in Telegram. */
    top: max(calc(60px + env(safe-area-inset-top, 0px)),
             calc(60px + var(--tg-safe-area-inset-top, 0px)),
             calc(60px + var(--tg-content-safe-area-inset-top, 0px)));
    z-index: 999;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: 0;
    margin: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.nav-tabs::-webkit-scrollbar {
    display: none;
}

.nav-tabs-inner {
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 48px;
    padding: 0 0.25rem;
    gap: 0.25rem;
}

.nav-tabs .nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 60px;
    max-width: 100px;
    padding: 0.5rem 0.25rem;
    color: var(--color-text-muted) !important;
    border: none;
    font-size: 0.625rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
    border-bottom: 2px solid transparent;
}

.nav-tabs .nav-link i {
    font-size: 1.125rem;
    margin-bottom: 0.25rem;
}
.nav-tabs .nav-link .nav-emoji {
    font-size: 1.125rem;
    margin-bottom: 0.25rem;
    display: block;
    line-height: 1;
}

.nav-tabs .nav-link span {
    font-size: 0.625rem;
    line-height: 1;
}

.nav-tabs .nav-link.active {
    color: var(--color-icon-primary) !important;
    background: transparent;
    border-bottom-color: var(--color-icon-primary) !important;
}

.nav-tabs .nav-link:hover {
    color: var(--color-icon-primary) !important;
    background: rgba(67, 160, 165, 0.06);
}

/* Content */
.content {
    padding: 1rem;
    min-height: calc(100vh - 200px);
    max-width: 100%;
    overflow-x: hidden;
}

.tab-content {
    max-width: 100%;
    overflow-x: hidden;
}

/* Cards */
.card {
    border: 1px solid var(--tg-border-color);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    margin-bottom: 1rem;
    background: var(--tg-bg-color);
    max-width: 100%;
    overflow-x: hidden;
}

.card-header {
    background: var(--tg-secondary-bg-color);
    border-bottom: 1px solid var(--tg-border-color);
    padding: 1rem;
    font-weight: 600;
    color: var(--tg-text-color);
}

.card-body {
    padding: 1rem;
    color: var(--tg-text-color);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Progress bars */
.progress {
    height: 8px;
    border-radius: 4px;
    background: var(--color-stat-track);
    overflow: hidden;
}

.progress-bar {
    background: var(--color-progress);
    transition: width 0.3s ease;
}

/* Buttons */
.btn {
    border-radius: 8px;
    font-weight: 500;
    padding: 0.625rem 1.25rem;
    border: none;
    transition: all 0.2s ease;
}

.btn-primary {
    /* Override Bootstrap 5 button CSS custom properties */
    --bs-btn-bg: var(--color-interactive);
    --bs-btn-border-color: var(--color-interactive);
    --bs-btn-color: var(--color-interactive-text);
    --bs-btn-hover-bg: var(--hhh-teal-deep);
    --bs-btn-hover-border-color: var(--hhh-teal-deep);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-bg: var(--hhh-teal-deep);
    --bs-btn-active-border-color: var(--hhh-teal-deep);
    --bs-btn-focus-shadow-rgb: 29, 90, 108;
    background: var(--color-interactive);
    color: var(--color-interactive-text);
    border-color: var(--color-interactive);
}

.btn-primary:hover {
    background: var(--hhh-teal-deep);
    color: #ffffff;
    border-color: var(--hhh-teal-deep);
}

.btn-success {
    background: #28a745;
    color: white;
}

/* Checkin "done" button — matches header teal; text always white */
.checkin-btn.btn-success {
    background: var(--hhh-teal-deep);
    color: #ffffff;
    border-color: var(--hhh-teal-deep);
}
html[data-theme="dark"] .checkin-btn.btn-success {
    background: var(--hhh-aqua);
    color: var(--hhh-dark-bg);
    border-color: var(--hhh-aqua);
}

.btn-outline-primary {
    --bs-btn-color: var(--color-interactive);
    --bs-btn-border-color: var(--color-interactive);
    --bs-btn-hover-bg: var(--color-interactive);
    --bs-btn-hover-border-color: var(--color-interactive);
    --bs-btn-hover-color: var(--color-interactive-text);
    --bs-btn-active-bg: var(--color-interactive);
    --bs-btn-active-border-color: var(--color-interactive);
    --bs-btn-focus-shadow-rgb: 29, 90, 108;
    border: 1px solid var(--color-interactive);
    color: var(--color-interactive);
    background: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary:focus,
.btn-outline-primary.active {
    background: var(--color-interactive, var(--hhh-teal-deep));
    color: var(--color-interactive-text, #fff);
    border-color: var(--color-interactive, var(--hhh-teal-deep));
    box-shadow: none;
}

.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}

/* Habit cards */
.habit-card {
    border-left: 4px solid var(--color-action-secondary);
    transition: transform 0.2s ease;
    max-width: 100%;
    overflow-x: hidden;
}

.habit-card:hover {
    transform: translateY(-2px);
}

.habit-card.completed {
    border-left-color: var(--hhh-aqua);
    background: rgba(67, 160, 165, 0.08);
}

.habit-title {
    font-weight: 600;
    margin-bottom: 0.5rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

.habit-meta {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-bottom: 0.75rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.habit-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    max-width: 100%;
}

/* Stats */
.stat-card {
    text-align: center;
    padding: 1.5rem;
}

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-interactive, var(--hhh-teal-deep));
    line-height: 1;
}

.stat-label {
    font-size: 0.875rem;
    color: var(--tg-hint-color);
    margin-top: 0.25rem;
}

/* Calendar */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    background: var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    font-size: 0.875rem;
    font-weight: 500;
    position: relative;
    padding: 2px;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow: hidden;
    min-width: 0; /* Prevent flex items from overflowing */
}

.calendar-day.calendar-header {
    background: var(--color-surface-soft);
    font-weight: 600;
    color: var(--color-text-secondary);
    border-bottom: 2px solid var(--color-border);
}

.calendar-day.empty {
    background: transparent;
}

.calendar-day .day-number {
    font-weight: 600;
    margin-bottom: 2px;
}

.calendar-day .day-percentage {
    font-size: 0.7rem;
    font-weight: 500;
    opacity: 0.9;
}

.calendar-day.none {
    background: var(--color-calendar-none);
    color: var(--color-calendar-none-text);
}

.calendar-day.none .day-percentage {
    color: var(--color-calendar-none-text);
}

.calendar-day.partial {
    background: var(--color-calendar-partial);
    color: var(--color-calendar-partial-text);
    border: 1px solid var(--color-calendar-partial);
}

.calendar-day.partial .day-percentage {
    color: var(--color-calendar-partial-text);
}

.calendar-day.good {
    background: var(--color-calendar-good);
    color: var(--color-calendar-good-text);
    border: 1px solid var(--color-calendar-good);
}

.calendar-day.good .day-percentage {
    color: var(--color-calendar-good-text);
    background: rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    padding: 0 2px;
}

.calendar-day.perfect {
    background: var(--color-calendar-perfect);
    color: var(--color-calendar-perfect-text);
    border: 1px solid var(--color-calendar-perfect);
}

.calendar-day.perfect .day-percentage {
    color: var(--color-calendar-perfect-text);
    background: rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    padding: 0 2px;
}

.calendar-day.future {
    background: var(--color-calendar-future);
    color: var(--color-text-muted);
}

/* Today indicator — subtle teal ring, does not override status background or percentage */
.calendar-day.today {
    box-shadow: inset 0 0 0 2px var(--color-calendar-selected) !important;
    font-weight: 700;
}
.calendar-day.today .day-number {
    font-weight: 700;
}

/* CSS version marker (verify with: window.getComputedStyle(document.body,'::after').content) */
body::after {
    content: "css-20260430m-calendar-today-gentle";
    display: none;
}

/* Achievements */
.achievement-card {
    display: flex;
    align-items: center;
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    background: white;
}

.achievement-card.earned {
    border-color: #28a745;
    background: rgba(40, 167, 69, 0.05);
}

.achievement-icon {
    font-size: 2rem;
    margin-right: 1rem;
    color: var(--color-interactive);
}

.achievement-info h6 {
    margin: 0 0 0.25rem 0;
    font-weight: 600;
}

.achievement-info small {
    color: var(--tg-hint-color);
}

.achievement-xp {
    margin-left: auto;
    font-weight: 600;
    color: var(--color-interactive);
}

/* Forms */
.form-control {
    border-radius: 8px;
    border: 1px solid #ddd;
    padding: 0.75rem;
    font-size: 1rem;
}

.form-control:focus {
    border-color: var(--color-interactive);
    box-shadow: 0 0 0 0.2rem rgba(29, 90, 108, 0.25);
}

.form-label {
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--tg-text-color);
}

.form-check-label {
    color: var(--tg-text-color) !important;
    font-weight: 500;
}

/* Loading states */
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: var(--tg-hint-color);
}

.spinner-border {
    width: 2rem;
    height: 2rem;
    color: var(--color-interactive);
}

/* Empty states */
.empty-state {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--tg-text-color);
}

.empty-state-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

/* Expert preset card */
.expert-preset-card {
    background: var(--tg-bg-color, #fff);
    border-radius: 16px;
    margin: 0.5rem 0 1rem;
}
.expert-preset-header {
    gap: 10px;
}
.expert-preset-badge {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}
.expert-preset-habits-list {
    padding-left: 0;
    margin-bottom: 0;
}
.expert-preset-habit-item {
    padding: 4px 0;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Achievement styles */
.achievement-item {
    display: flex;
    align-items: center;
    padding: 12px;
    margin-bottom: 8px;
    border-radius: 8px;
    background: var(--tg-secondary-bg-color);
    border: 1px solid var(--tg-border-color);
}

.achievement-item.locked {
    opacity: 0.6;
}

/* Fix locked achievements readability - THEME-AWARE */
/* Light mode: black text for contrast on light backgrounds */
html:not([data-theme="dark"]) .achievement-card:not(.earned) h6,
html:not([data-theme="dark"]) .achievement-card:not(.earned) small,
html:not([data-theme="dark"]) .achievement-card:not(.earned) .achievement-info h6,
html:not([data-theme="dark"]) .achievement-card:not(.earned) .achievement-info small,
html:not([data-theme="dark"]) .achievement-item.locked h6,
html:not([data-theme="dark"]) .achievement-item.locked small,
html:not([data-theme="dark"]) .achievement-item.locked .achievement-title,
html:not([data-theme="dark"]) .achievement-item.locked .achievement-description {
    color: #000000 !important;
    opacity: 0.7 !important;
}

.achievement-icon {
    font-size: 2rem;
    margin-right: 12px;
}

.achievement-title {
    font-weight: 600;
    color: var(--tg-text-color) !important;
    margin-bottom: 2px;
}

.achievement-description {
    font-size: 0.9rem;
    color: var(--tg-hint-color) !important;
}

/* Calendar legend */
.calendar-legend {
    display: flex;
    justify-content: space-around;
    margin-top: 1rem;
    font-size: 0.8rem;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--tg-text-color) !important;
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    border: 2px solid var(--color-border);
}

/* Modal improvements */
.modal-content {
    background: var(--tg-bg-color);
    border: 1px solid var(--tg-border-color);
    color: var(--tg-text-color);
}

.modal-header {
    border-bottom: 1px solid var(--tg-border-color);
}

.modal-title {
    color: var(--tg-text-color) !important;
}

.btn-close {
    filter: invert(var(--tg-text-color));
}

/* Text contrast fixes */
.text-muted,
.text-secondary {
    color: var(--tg-hint-color) !important;
}

.text-danger {
    color: #dc3545 !important;
}

/* Underline initial phrases in statistics explanations */
.stat-explanation strong {
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 576px) {
    .header {
        padding: 0.65rem 0.75rem;
        min-height: 56px;
        gap: 0.75rem;
    }
    
    .header-title {
        font-size: 0.8rem;
    }
    
    .header-actions {
        gap: 0.6rem;
    }
    
    .header-action-link {
        min-width: 48px;
        padding: 0.25rem 0.4rem;
    }
    
    .header-action-link i {
        font-size: 1.15rem;
    }
    
    .header-action-link span {
        font-size: 0.6rem;
    }
    
    .nav-tabs .nav-link {
        min-width: 55px;
    }
    
    .nav-tabs .nav-link span {
        font-size: 0.6rem;
    }
    
    .content {
        padding: 0.75rem;
    }
    
    .card-body {
        padding: 0.75rem;
    }
    
    .habit-actions {
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .stat-number {
        font-size: 1.5rem;
    }
    
    .stat-label {
        font-size: 0.75rem;
        line-height: 1.1;
        word-wrap: break-word;
        hyphens: auto;
    }
    
    /* Mobile Calendar Optimizations */
    .calendar-grid {
        gap: 1px;
        margin: 0 -0.25rem; /* Allow grid to use full width */
    }
    
    .calendar-day {
        font-size: 0.75rem;
        padding: 1px;
        min-height: 36px; /* Ensure minimum touch target */
        aspect-ratio: 1;
    }
    
    .calendar-day.calendar-header {
        font-size: 0.7rem;
        font-weight: 700;
        min-height: 28px;
    }
    
    .calendar-day .day-number {
        font-size: 0.75rem;
        margin-bottom: 1px;
    }
    
    .calendar-day .day-percentage {
        font-size: 0.6rem;
        padding: 0 1px;
    }
    
    /* Ensure no horizontal overflow */
    .card {
        overflow: hidden;
    }
    
    .card-body {
        overflow-x: hidden;
    }
}

/* Extra small devices (portrait phones, less than 400px) */
@media (max-width: 400px) {
    .header {
        padding: 0.6rem 0.5rem;
        min-height: 54px;
        gap: 0.5rem;
    }
    
    .header-title {
        font-size: 0.75rem;
    }
    
    .header-actions {
        gap: 0.5rem;
    }
    
    .header-action-link {
        min-width: 45px;
        padding: 0.2rem 0.35rem;
    }
    
    .header-action-link i {
        font-size: 1.1rem;
        margin-bottom: 0.1rem;
    }
    
    .header-action-link span {
        font-size: 0.55rem;
    }
    
    .nav-tabs .nav-link {
        min-width: 50px;
        padding: 0.4rem 0.2rem;
    }
    
    .nav-tabs .nav-link i {
        font-size: 1rem;
    }
    
    .nav-tabs .nav-link span {
        font-size: 0.55rem;
    }
    
    .calendar-grid {
        gap: 0.5px;
        margin: 0 -0.5rem;
    }
    
    .calendar-day {
        font-size: 0.7rem;
        padding: 0.5px;
        min-height: 32px;
    }
    
    .calendar-day.calendar-header {
        font-size: 0.65rem;
        min-height: 24px;
    }
    
    .calendar-day .day-number {
        font-size: 0.7rem;
    }
    
    .calendar-day .day-percentage {
        font-size: 0.55rem;
    }
    
    .stat-label {
        font-size: 0.7rem;
        line-height: 1.0;
        word-wrap: break-word;
        hyphens: auto;
    }
    
    .stat-number {
        font-size: 1.3rem;
    }
}

/* Ultra small devices (≤340px) - collapse title to icon only */
@media (max-width: 340px) {
    .header {
        padding: 0.55rem 0.4rem;
        min-height: 52px;
        gap: 0.4rem;
    }
    
    .header-icon-mobile {
        display: inline;
    }
    
    .header-title {
        display: none;
    }
    
    .header-actions {
        gap: 0.4rem;
    }
    
    .header-action-link {
        min-width: 42px;
        padding: 0.2rem 0.3rem;
    }
    
    .header-action-link i {
        font-size: 1rem;
        margin-bottom: 0.1rem;
    }
    
    .header-action-link span {
        font-size: 0.5rem;
    }
    
    .nav-tabs .nav-link {
        min-width: 45px;
        padding: 0.35rem 0.15rem;
    }
    
    .nav-tabs .nav-link span {
        font-size: 0.5rem;
    }
}

/* Light theme toggle */
[data-theme="light"] {
    --tg-bg-color: #ffffff;
    --tg-text-color: #1a1a1a;
    --tg-hint-color: #6c757d;
    --tg-secondary-bg-color: #f8f9fa;
    --tg-border-color: #dee2e6;
}

/* Dark theme support */
html[data-theme="dark"] {
    --tg-bg-color: #1a1a1a;
    --tg-text-color: #e9ecef;
    --tg-hint-color: #adb5bd;
    --tg-secondary-bg-color: #2d2d2d;
    --tg-border-color: #495057;

    /* === HHH semantic tokens — dark mode overrides === */
    --color-page-bg: var(--hhh-dark-bg);
    --color-surface: var(--hhh-dark-surface);
    --color-surface-soft: var(--hhh-dark-card);
    --color-border: var(--hhh-dark-border);

    --color-text-primary: var(--hhh-text-on-dark);
    --color-text-secondary: var(--hhh-text-on-dark-secondary);
    --color-text-muted: var(--hhh-mist);

    --color-action-primary: var(--hhh-reward-main);
    --color-action-primary-hover: var(--hhh-reward-hover);
    --color-action-secondary: var(--hhh-aqua);

    --color-progress: #52B8BD;
    --color-progress-secondary: var(--hhh-mist);
    --color-reward: var(--hhh-reward-soft);
    --color-interactive: var(--hhh-aqua);
    --color-interactive-text: var(--hhh-dark-bg);

    /* Override Bootstrap primary to teal in dark mode */
    --bs-primary: #43A0A5;
    --bs-primary-rgb: 67, 160, 165;
    --bs-btn-focus-shadow-rgb: 67, 160, 165;
    --bs-link-color: #43A0A5;
    --bs-link-color-rgb: 67, 160, 165;

    --color-icon-primary: var(--hhh-aqua);
    --color-icon-secondary: var(--hhh-mint);

    /* Statistics tokens (dark) */
    --color-stat-value: #43A0A5;
    --color-stat-value-strong: #D3E6E4;
    --color-stat-label: #ABC0C5;
    --color-stat-track: rgba(255, 255, 255, 0.14);
    --color-stat-progress: #43A0A5;
    --color-stat-progress-strong: #54818E;

    /* Premium / Pro surface tokens (dark) */
    --color-premium-surface: #1D2A30;
    --color-premium-surface-soft: #27363B;
    --color-premium-border: #C49A3A;
    --color-premium-accent: #E0BF63;
    --color-premium-text: #FFF1C5;
    --color-premium-icon: #E0BF63;

    /* Semantic status data colors (dark) */
    --color-status-high: #4BA67D;
    --color-status-high-text: #FFFFFF;
    --color-status-medium: #D7AE55;
    --color-status-medium-text: #1D1A10;
    --color-status-low: #DC6F7B;
    --color-status-low-text: #FFFFFF;

    /* Monthly results (dark) */
    --color-monthly-surface: #1C3D47;
    --color-monthly-border: #43A0A5;

    /* Settings info card (dark) */
    --color-settings-info-surface: #C7DBD4;
    --color-settings-info-border: #93B8AA;
    --color-settings-info-text: #17352D;

    /* Calendar state tokens (dark) */
    --color-calendar-none: #2B3A40;
    --color-calendar-partial: #665734;
    --color-calendar-good: #236D7A;
    --color-calendar-perfect: #5EC4CB;
    --color-calendar-future: #1D2E34;
    --color-calendar-selected: #D3E6E4;
    --color-calendar-none-text: #D6E1E4;
    --color-calendar-partial-text: #FFF1C5;
    --color-calendar-good-text: #FFFFFF;
    --color-calendar-perfect-text: #FFFFFF;

    /* Plan cards (dark) */
    --color-plan-free-surface: #182B34;
    --color-plan-free-border: #345868;
    --color-plan-free-price: #D3E6E4;
    --color-plan-pro-surface: #253638;
    --color-plan-pro-surface-strong: #31423E;
    --color-plan-pro-border: #C9A64E;
    --color-plan-pro-title: #FFF1C5;
    --color-plan-pro-price: #E0BF63;
    --color-plan-current-bg: #C9A64E;
    --color-plan-current-text: #1D1A10;
    --color-plan-active-bg: #1D423B;
    --color-plan-active-border: #4E8F7A;
    --color-plan-active-text: #B7D9CF;

    /* Billing options (dark) */
    --color-billing-surface: #1D2E34;
    --color-billing-border: #54818E;
    --color-billing-selected-surface: #243F3D;
    --color-billing-selected-border: #43A0A5;
    --color-billing-price: #D3E6E4;
    --color-billing-save-bg: #4E8F7A;
    --color-billing-save-text: #FFFFFF;

    /* Promo card (dark) */
    --color-promo-surface: #1D2E34;
    --color-promo-border: #54818E;

    /* Danger / cancel (dark) */
    --color-danger-text: #E07882;
    --color-danger-hover: #F09AA1;
}

html[data-theme="dark"] .card {
    background: var(--tg-secondary-bg-color);
    border-color: var(--tg-border-color);
    }
    
    /* Improve form label contrast in dark theme */
    .form-check-label {
        color: var(--tg-text-color) !important;
        opacity: 0.95;
        font-weight: 500;
    }
    
    .calendar-day {
        background: var(--tg-secondary-bg-color);
        border: 1px solid var(--tg-border-color);
        color: var(--tg-text-color);
    }
    
    .form-control {
        background: var(--tg-secondary-bg-color);
        border-color: var(--tg-border-color);
        color: var(--tg-text-color);
    }
    
    .form-control:focus {
        background: var(--tg-secondary-bg-color);
        border-color: var(--color-interactive);
        color: var(--tg-text-color);
    }
    
    /* Make input fields LIGHT in dark theme for better readability */
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    input[placeholder*="code"],
    input[placeholder*="Code"],
    input[placeholder*="CODE"],
    #promoCodeInput,
    .habit-input,
    input.form-control {
        background: #ffffff !important;
        color: #000000 !important;
        border: 1px solid #dee2e6 !important;
    }
    
    /* Also make sure focus states are light */
    input[type="text"]:focus,
    input[type="number"]:focus,
    input[type="email"]:focus,
    input[type="password"]:focus,
    #promoCodeInput:focus,
    .habit-input:focus,
    input.form-control:focus {
        background: #ffffff !important;
        color: #000000 !important;
        border-color: var(--color-interactive) !important;
        box-shadow: 0 0 0 0.2rem rgba(29, 90, 108, 0.25) !important;
    }
    
    /* Fix achievement text visibility in dark theme */
    .achievement-title,
    .achievement-description,
    .settings-label,
    .form-check-label {
        color: var(--tg-text-color) !important;
    }
    
    /* Settings section text fixes */
    .settings-item label,
    .settings-item span,
    .notification-text {
        color: var(--tg-text-color) !important;
    }
    
    /* Fix FREE/PRO plan descriptions in dark mode */
    .free-plan p,
    .plan-comparison p,
    .upgrade-preview p,
    .comparison-table p {
        color: var(--tg-text-color) !important;
    }
    
    /* REMOVED - These were too broad and affected multiple sections */
    
    /* TARGET SPECIFIC SUBSCRIPTION FEATURE LISTS - MAKE BLACK */
    /* Pro Plan feature items in subscription comparison */
    .subscription-card.pro-card .feature-item,
    .subscription-card.pro-card .feature-list .feature-item,
    .pro-card .feature-item,
    .pro-card div.feature-item {
        color: #000000 !important;
        opacity: 1 !important;
    }
    
    /* Free Plan feature items - REMOVED conflicting dark theme rules */
    
    /* REMOVE OVERLY BROAD RULES - These were affecting both FREE and PRO sections indiscriminately */
    
    /* Ensure PRO stats explanations stay readable */
    .small.text-muted.mb-2,
    p.small.text-muted.mb-2,
    p.small.text-muted.mb-1,
    p.small.text-muted.mb-3:not(.subscription-card):not(.free-plan):not(.pro-plan) {
        color: var(--tg-hint-color) !important;
    }
}

/* Subscription page styles */
.subscription-card {
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 1.5rem;
    background: #f8f9fa;
    transition: all 0.3s ease;
    height: 100%;
}

.subscription-card.active {
    border-color: #28a745;
    background: #f0fff4;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.2);
}

.subscription-card.pro-card {
    background: linear-gradient(135deg, #fff3cd, #ffeaa7);
    border-color: #ffc107;
}

.subscription-card.pro-card.active {
    border-color: #ffc107;
    background: linear-gradient(135deg, #fff3cd, #ffeaa7);
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
}

.subscription-card.expired {
    border: 2px solid #dc3545;
    background: linear-gradient(135deg, #ffebee, #f8f9fa);
    opacity: 0.9;
}

.expired-actions .btn {
    font-size: 0.875rem;
}

.badge.bg-danger {
    background-color: #dc3545 !important;
}

.active-pro-actions .btn {
    font-size: 0.875rem;
}

.cancelled-pro-actions {
    text-align: center;
}

.cancelled-pro-actions .text-warning {
    font-size: 0.8rem;
}

.price-tag, .price-option {
    text-align: center;
}

.price {
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
}

.period {
    color: #666;
    font-size: 0.9rem;
}

.price-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.price-option.recommended {
    background: #e8f5e8;
    border: 1px solid #28a745;
    border-radius: 6px;
    padding: 0.5rem;
    position: relative;
}

.clickable-price {
    cursor: pointer;
    transition: all 0.2s ease;
}

.clickable-price:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #f8f9fa;
}

/* REMOVED - These rules were forcing black text on subscription headers in dark mode */

/* REMOVED - This was forcing Pro Plan descriptions to black in dark mode too */

.save-badge {
    background: #28a745;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    position: absolute;
    top: -8px;
    right: 8px;
    max-width: calc(100% - 16px);
}

.btn-upgrade {
    background: linear-gradient(135deg, #ffc107, #ff9800);
    border: none;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-upgrade:hover {
    background: linear-gradient(135deg, #e0a800, #f57c00);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(255, 193, 7, 0.3);
}

.feature-list {
    max-width: 300px;
    margin: 0 auto;
}

.feature-item {
    padding: 0.5rem 0;
    border-bottom: 1px solid #eee;
    font-size: 0.9rem;
}

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

/* Disabled habit styles for expired PRO subscriptions */
.habit-disabled {
    opacity: 0.6;
    background-color: #f8f9fa;
    pointer-events: none;
}

.habit-disabled .card-body {
    position: relative;
}

.habit-disabled .habit-title {
    text-decoration: line-through;
    color: #6c757d;
}

.habit-disabled .habit-actions {
    color: #6c757d;
    font-style: italic;
}

.badge.bg-warning {
    background-color: #ffc107 !important;
    color: #212529;
}

/* Restore dark theme fallback for preview */
@media (prefers-color-scheme: dark) {
    html:not([data-theme]) {
        --tg-bg-color: #1a1a1a;
        --tg-text-color: #e9ecef;
        --tg-hint-color: #adb5bd;
        --tg-secondary-bg-color: #2d2d2d;
        --tg-border-color: #495057;
    }
}

/* REMOVED - These were old conflicting rules */

/* REMOVED - Old broken selectors - replaced with architect solution below */

/* Ensure FREE PLAN text stays normal theme color - do NOT force black in dark theme */
html[data-theme="dark"] .free-plan,
html[data-theme="dark"] .subscription-card:not(.pro-card) {
    color: var(--tg-text-color) !important;
}

html[data-theme="dark"] .subscription-card:not(.pro-card) p,
html[data-theme="dark"] .subscription-card:not(.pro-card) .text-muted {
    color: var(--tg-hint-color) !important;
}

/* ========================================= */
/* FINAL ARCHITECT SOLUTION - EXPLICIT CLASSES WITH THEME-AWARE SELECTORS */
/* These rules MUST be at the end of the file to override all other rules */
/* ========================================= */

/* Light theme (no data-theme attribute): Force PRO text to black */
html:not([data-theme="dark"]) .pro-plan-desc,
html:not([data-theme="dark"]) .pro-diamond-desc,
html:not([data-theme="dark"]) .promo-note {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    opacity: 1 !important;
}

/* Dark theme: Keep FREE plan text white */
html[data-theme="dark"] .free-plan-desc {
    color: var(--tg-text-color) !important;
    -webkit-text-fill-color: var(--tg-text-color) !important;
    opacity: 1 !important;
}

/* Override .text-muted for these specific classes in case they retain that class */
html:not([data-theme="dark"]) .pro-plan-desc.text-muted,
html:not([data-theme="dark"]) .pro-diamond-desc.text-muted,
html:not([data-theme="dark"]) .promo-note.text-muted {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    opacity: 1 !important;
}

html[data-theme="dark"] .free-plan-desc.text-muted {
    color: var(--tg-text-color) !important;
    -webkit-text-fill-color: var(--tg-text-color) !important;
    opacity: 1 !important;
}

/* ========================================= */
/* UNDO SNACKBAR STYLES */
/* ========================================= */

.undo-snackbar {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #323232;
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    animation: slideUp 0.3s ease-out;
    max-width: 90%;
}

.undo-snackbar-content {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 14px;
}

.undo-snackbar .btn {
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.undo-snackbar.fade-out {
    animation: fadeOut 0.3s ease-out;
    opacity: 0;
}

@keyframes slideUp {
    from {
        transform: translateX(-50%) translateY(100px);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* ========================================= */
/* GLOBAL OVERFLOW PREVENTION RULES */
/* ========================================= */

/* Ensure all images respect container width */
img {
    max-width: 100%;
    height: auto;
}

/* Prevent inputs from overflowing */
input, textarea, select {
    max-width: 100%;
}

/* Ensure all Bootstrap rows don't overflow */
.row {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Ensure all containers respect viewport */
.container, .container-fluid {
    max-width: 100%;
    overflow-x: hidden;
}

/* Ensure modals don't cause overflow */
.modal-dialog {
    max-width: calc(100% - 2rem);
    margin: 1rem auto;
}

/* Ensure tables are responsive */
table {
    max-width: 100%;
    overflow-x: auto;
    display: block;
}

/* Long text handling */
p, span, div {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Ensure all position relative containers constrain absolute children */
.position-relative {
    overflow: hidden;
}

/* ========================================
   Optimistic Update Animation
   ======================================== */

/* Subtle pulse animation for optimistic UI updates */
@keyframes optimisticPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(36, 129, 204, 0.4);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(36, 129, 204, 0);
        transform: scale(1.02);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(36, 129, 204, 0);
        transform: scale(1);
    }
}

.optimistic-pulse {
    animation: optimisticPulse 1.5s ease-in-out infinite;
    background-color: rgba(36, 129, 204, 0.05) !important;
    transition: background-color 0.3s ease;
}

/* ========================================
   Skeleton Loading UI
   ======================================== */

.skeleton-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--tg-border-color);
}

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

.skeleton-content {
    flex: 1;
    padding-right: 12px;
}

.skeleton-line {
    background: linear-gradient(90deg, #e8e8e8 25%, #f0f0f0 50%, #e8e8e8 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s infinite;
    border-radius: 4px;
}

.skeleton-title {
    height: 16px;
    width: 60%;
    margin-bottom: 8px;
}

.skeleton-subtitle {
    height: 12px;
    width: 40%;
}

.skeleton-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(90deg, #e8e8e8 25%, #f0f0f0 50%, #e8e8e8 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s infinite;
    flex-shrink: 0;
}

@keyframes skeletonShimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* ========================================= */
/* DARK THEME CONTRAST HIERARCHY FIX */
/* CSS-only - preserves light theme unchanged */
/* ========================================= */

html[data-theme="dark"] {
    /* Text color tokens for dark theme hierarchy */
    --dt-text-strong: #ffffff;       /* Titles, headings - highest contrast */
    --dt-text-primary: #e9ecef;      /* Primary body text - high contrast */
    --dt-text-secondary: #adb5bd;    /* Secondary/help text - medium contrast */
    --dt-text-muted: #8a9199;        /* Muted/placeholder - lower but readable */
    --dt-text-disabled: #6c757d;     /* Disabled states - visually disabled */
}

/* === HEADINGS & TITLES === */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .modal-title,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .header-title {
    color: var(--dt-text-strong) !important;
}

/* === PRIMARY BODY TEXT === */
html[data-theme="dark"] body,
html[data-theme="dark"] p,
html[data-theme="dark"] .card-text,
html[data-theme="dark"] li,
html[data-theme="dark"] label,
html[data-theme="dark"] .form-check-label,
html[data-theme="dark"] .settings-label,
html[data-theme="dark"] .notification-text,
html[data-theme="dark"] .feature-item,
html[data-theme="dark"] .feature-list {
    color: var(--dt-text-primary) !important;
}

/* === SECONDARY/HELP TEXT === */
html[data-theme="dark"] small:not(.badge),
html[data-theme="dark"] .form-text,
html[data-theme="dark"] .help-text,
html[data-theme="dark"] .card-subtitle,
html[data-theme="dark"] .text-secondary {
    color: var(--dt-text-secondary) !important;
}

/* === MUTED TEXT (Bootstrap override) === */
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-body-secondary {
    color: var(--dt-text-muted) !important;
}

/* === DISABLED STATES === */
html[data-theme="dark"] .disabled,
html[data-theme="dark"] [disabled],
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .btn:disabled {
    color: var(--dt-text-disabled) !important;
    opacity: 0.7;
}

/* === BADGES & PILLS - Ensure readability === */
html[data-theme="dark"] .badge,
html[data-theme="dark"] .pill,
html[data-theme="dark"] .tag {
    color: #ffffff !important;
}

html[data-theme="dark"] .badge.bg-secondary {
    background-color: #495057 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .badge.bg-light,
html[data-theme="dark"] .badge.bg-white {
    background-color: #495057 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .badge.bg-info {
    background-color: #0dcaf0 !important;
    color: #000000 !important;
}

html[data-theme="dark"] .badge.bg-warning {
    background-color: #ffc107 !important;
    color: #000000 !important;
}

html[data-theme="dark"] .badge.bg-success {
    background-color: #198754 !important;
    color: #ffffff !important;
}

/* === FREE PLAN SECTION - Light text on dark bg === */
html[data-theme="dark"] .free-plan *,
html[data-theme="dark"] .subscription-card:not(.pro-card) *,
html[data-theme="dark"] .subscription-card:not(.pro-card) p,
html[data-theme="dark"] .subscription-card:not(.pro-card) li,
html[data-theme="dark"] .subscription-card:not(.pro-card) .feature-item {
    color: var(--dt-text-primary) !important;
}

html[data-theme="dark"] .free-plan h5,
html[data-theme="dark"] .free-plan h6,
html[data-theme="dark"] .subscription-card:not(.pro-card) h5,
html[data-theme="dark"] .subscription-card:not(.pro-card) h6 {
    color: var(--dt-text-strong) !important;
}

html[data-theme="dark"] .free-plan .text-muted,
html[data-theme="dark"] .subscription-card:not(.pro-card) .text-muted {
    color: var(--dt-text-muted) !important;
}

/* === SETTINGS PAGE - Labels and captions === */
html[data-theme="dark"] .settings-item label,
html[data-theme="dark"] .settings-item span,
html[data-theme="dark"] .settings-item p,
html[data-theme="dark"] .settings-section label,
html[data-theme="dark"] .settings-section span,
html[data-theme="dark"] .notification-label,
html[data-theme="dark"] .notification-description {
    color: var(--dt-text-primary) !important;
}

html[data-theme="dark"] .settings-item small,
html[data-theme="dark"] .settings-section small,
html[data-theme="dark"] .settings-caption {
    color: var(--dt-text-secondary) !important;
}

/* === PROMO CODE & FORM HELP TEXT === */
html[data-theme="dark"] .input-group + small,
html[data-theme="dark"] .form-group small,
html[data-theme="dark"] .promo-help-text {
    color: var(--dt-text-secondary) !important;
}

/* === FIX LOCKED ACHIEVEMENTS - readable on dark bg === */
html[data-theme="dark"] .achievement-item.locked,
html[data-theme="dark"] .achievement-card:not(.earned) {
    background: var(--tg-secondary-bg-color) !important;
    opacity: 0.85 !important;
}

html[data-theme="dark"] .achievement-item.locked *,
html[data-theme="dark"] .achievement-card:not(.earned) h6,
html[data-theme="dark"] .achievement-card:not(.earned) .achievement-info h6,
html[data-theme="dark"] .achievement-card:not(.earned) .achievement-title {
    color: var(--dt-text-secondary) !important;
}

html[data-theme="dark"] .achievement-card:not(.earned) small,
html[data-theme="dark"] .achievement-card:not(.earned) .achievement-info small,
html[data-theme="dark"] .achievement-card:not(.earned) .achievement-description {
    color: var(--dt-text-muted) !important;
}

html[data-theme="dark"] .achievement-card:not(.earned) .achievement-xp {
    color: var(--dt-text-secondary) !important;
}

/* === CHECKBOX/TOGGLE LABELS === */
html[data-theme="dark"] .form-check label,
html[data-theme="dark"] .form-switch label,
html[data-theme="dark"] .custom-control-label {
    color: var(--dt-text-primary) !important;
}

/* === CALENDAR & STATS === */
html[data-theme="dark"] .stat-label,
html[data-theme="dark"] .stat-value {
    color: var(--dt-text-primary) !important;
}

html[data-theme="dark"] .calendar-day.today,
body.dark .calendar-day.today,
.dark .calendar-day.today {
    box-shadow: inset 0 0 0 2px var(--color-calendar-selected) !important;
}

html[data-theme="dark"] .legend-item {
    color: var(--color-text-secondary) !important;
}

/* === NAV TABS === */
html[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--color-text-muted) !important;
}

html[data-theme="dark"] .nav-tabs .nav-link.active {
    color: var(--color-icon-primary) !important;
    border-bottom-color: var(--color-icon-primary) !important;
}

/* === SKELETON LOADING (Dark variant) === */
html[data-theme="dark"] .skeleton-line,
html[data-theme="dark"] .skeleton-circle {
    background: linear-gradient(90deg, #3a3a3a 25%, #4a4a4a 50%, #3a3a3a 75%);
    background-size: 200% 100%;
}

/* === DARK THEME: Completed Button Text Contrast Fix === */
html[data-theme="dark"] .btn-success {
    color: #003300 !important;  /* Dark green text for WCAG AA contrast on green bg */
}

/* === DARK THEME: Calendar — colors via --color-calendar-* tokens === */
/* Token overrides are declared in html[data-theme="dark"] :root block above;
   no per-cell hardcoded values needed here. */
html[data-theme="dark"] .calendar-day.none {
    background: var(--color-calendar-none) !important;
    color: var(--color-calendar-none-text) !important;
}
html[data-theme="dark"] .calendar-day.partial {
    background: var(--color-calendar-partial) !important;
    color: var(--color-calendar-partial-text) !important;
    border-color: var(--color-calendar-partial) !important;
}
html[data-theme="dark"] .calendar-day.good {
    background: var(--color-calendar-good) !important;
    color: var(--color-calendar-good-text) !important;
    border-color: var(--color-calendar-good) !important;
}
html[data-theme="dark"] .calendar-day.perfect {
    background: var(--color-calendar-perfect) !important;
    color: var(--color-calendar-perfect-text) !important;
    border-color: var(--color-calendar-perfect) !important;
}

/* === DARK THEME: Bot Notifications Block Text Contrast Fix === */
/* Scoped to .bot-notify-card only - override muted/disabled styling */
html[data-theme="dark"] .bot-notify-card h6,
html[data-theme="dark"] .bot-notify-card p,
html[data-theme="dark"] .bot-notify-card .small,
html[data-theme="dark"] .bot-notify-card .text-muted,
html[data-theme="dark"] .bot-notify-card [class*="muted"] {
    color: rgba(0, 0, 0, 0.88) !important;
    opacity: 1 !important;
    --bs-text-opacity: 1 !important;
}

/* === Daily Focus Block === */
.daily-focus-card {
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 10px;
}
.daily-focus-header {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 5px;
}
.daily-focus-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.daily-focus-message {
    font-size: 0.93rem;
    color: var(--color-text-primary);
    line-height: 1.4;
}
.daily-focus-category {
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 3px;
}
.daily-focus-insight {
    font-size: 0.80rem;
    color: var(--color-text-secondary);
}

.daily-focus-assess-nudge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 10px;
    background: rgba(29,90,108,0.07);
    border-radius: 8px;
    border-left: 3px solid var(--color-interactive, #1D5A6C);
}
.daily-focus-assess-text {
    font-size: 0.78rem;
    color: var(--color-text-primary);
    flex: 1;
}
.daily-focus-assess-btn {
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    background: var(--color-interactive, #1D5A6C);
    border: none;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

/* === Resource section (Ресурс tab) === */
.resource-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 14px;
}
.resource-directions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.resource-direction-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--color-surface-soft);
    border-radius: 10px;
    padding: 10px 12px;
}
.resource-direction-icon {
    flex-shrink: 0;
    margin-top: 1px;
}
.resource-direction-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 2px;
}
.resource-direction-desc {
    font-size: 0.80rem;
    color: var(--color-text-secondary);
    line-height: 1.35;
}

.resource-info-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 10px;
}

.resource-info-text {
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    line-height: 1.55;
}

/* === Statistics screen — HHH visual patch (iteration 2) === */

/* A. Top metric cards — stat values and labels */
#stats-content .stat-number {
    color: var(--color-stat-value) !important;
}
#stats-content .stat-label {
    color: var(--color-stat-label) !important;
}

/* B. Habit breakdown progress bars — override Bootstrap bg-success */
#stats-content .progress-bar {
    background: var(--color-stat-progress) !important;
}

/* C. Free Pro teaser card — premium warm surface, not yellow banner */
#stats-content .card.border-warning {
    border-color: var(--color-premium-border) !important;
    background: var(--color-surface);
}
html[data-theme="dark"] #stats-content .card.border-warning {
    background: var(--color-premium-surface) !important;
}

/* D. Pro card header — premium soft surface */
#stats-content .bg-warning.bg-opacity-10 {
    background: var(--color-premium-surface-soft) !important;
    color: var(--color-text-primary);
}

/* E. Free Pro teaser: CTA button — terracotta, not yellow gradient */
#stats-content .btn.btn-warning {
    background: var(--color-action-primary) !important;
    border-color: var(--color-action-primary) !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
}
#stats-content .btn.btn-warning:hover {
    background: var(--color-action-primary-hover) !important;
    border-color: var(--color-action-primary-hover) !important;
    box-shadow: none !important;
}

/* F. Weekly trend bars — aqua, not Bootstrap yellow */
#stats-content .day-bar {
    background-color: var(--color-stat-progress) !important;
}

/* G. 30-day efficiency badges — semantic status tokens */
#stats-content .badge.bg-success {
    background-color: var(--color-status-high) !important;
    color: var(--color-status-high-text) !important;
}
#stats-content .badge.bg-warning {
    background-color: var(--color-status-medium) !important;
    color: var(--color-status-medium-text) !important;
}
#stats-content .badge.bg-danger {
    background-color: var(--color-status-low) !important;
    color: var(--color-status-low-text) !important;
}

/* H. Monthly results card — teal accent, not cyan Bootstrap */
#stats-content .card.border-info {
    border-color: var(--color-monthly-border) !important;
}
#stats-content .bg-info.bg-opacity-10 {
    background: var(--color-monthly-surface) !important;
}
#stats-content .btn.btn-info {
    background: var(--color-action-secondary) !important;
    border-color: var(--color-action-secondary) !important;
    color: var(--hhh-text-on-dark) !important;
}
#stats-content .btn.btn-info:hover {
    background: var(--hhh-teal-muted) !important;
    border-color: var(--hhh-teal-muted) !important;
}

/* === Journey inline (inside progress card) === */
#journey-info {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(0,0,0,0.07);
}
.journey-info-row {
    font-size: 0.82rem;
    color: #555e6d;
    margin-bottom: 2px;
}
.journey-stage-row {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--hhh-teal-deep);
}

/* Dark theme */
html[data-theme="dark"] #journey-info {
    border-top-color: rgba(255,255,255,0.07);
}
html[data-theme="dark"] .journey-info-row {
    color: #8b95a3;
}
html[data-theme="dark"] .journey-stage-row {
    color: var(--hhh-aqua);
}

/* === Settings screen — HHH visual patch (iteration 2) === */

/* A. Card header text */
#settings-content .card-header h5 {
    color: var(--color-text-primary);
}

/* B. Language select — form-control */
#settings-content .form-control {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}
#settings-content .form-control:focus {
    border-color: var(--hhh-aqua);
    box-shadow: 0 0 0 0.2rem rgba(67, 160, 165, 0.18);
}
html[data-theme="dark"] #settings-content .form-control {
    background: var(--color-surface-soft);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}
html[data-theme="dark"] #settings-content .form-control:focus {
    border-color: var(--hhh-aqua) !important;
    box-shadow: 0 0 0 0.2rem rgba(67, 160, 165, 0.22) !important;
}

/* C. Threshold slider — track + thumb */
#settings-content .form-range {
    accent-color: var(--hhh-aqua);
}
#settings-content .form-range::-webkit-slider-runnable-track {
    background: var(--color-stat-track);
    border-radius: 4px;
    height: 6px;
}
#settings-content .form-range::-webkit-slider-thumb {
    background: var(--hhh-aqua);
    border: 2px solid var(--hhh-aqua);
    box-shadow: none;
}
#settings-content .form-range::-webkit-slider-thumb:hover {
    background: var(--hhh-teal-deep);
    border-color: var(--hhh-teal-deep);
}
#settings-content .form-range::-moz-range-track {
    background: var(--color-stat-track);
    border-radius: 4px;
    height: 6px;
}
#settings-content .form-range::-moz-range-thumb {
    background: var(--hhh-aqua);
    border-color: var(--hhh-aqua);
}

/* D. Checkboxes — checked + focus ring */
#settings-content .form-check-input:checked {
    background-color: var(--hhh-aqua);
    border-color: var(--hhh-aqua);
}
#settings-content .form-check-input:focus {
    border-color: var(--hhh-aqua);
    box-shadow: 0 0 0 0.2rem rgba(67, 160, 165, 0.2);
}

/* E. PRO badge in settings — premium gold, not Bootstrap yellow */
#settings-content .badge.bg-warning {
    background-color: var(--color-premium-border) !important;
    color: var(--color-premium-text) !important;
}
html[data-theme="dark"] #settings-content .badge.bg-warning {
    background-color: var(--color-premium-border) !important;
    color: var(--color-premium-text) !important;
}

/* F. Bot notify info card — HHH info surface, not Bootstrap alert colors */
#settings-content .bot-notify-card {
    background: var(--color-settings-info-surface) !important;
    border-color: var(--color-settings-info-border) !important;
    color: var(--color-settings-info-text);
}
#settings-content .bot-notify-card h6,
#settings-content .bot-notify-card p,
#settings-content .bot-notify-card .small,
#settings-content .bot-notify-card .text-muted {
    color: var(--color-settings-info-text) !important;
    opacity: 1 !important;
}
#settings-content .bot-notify-card i {
    color: var(--hhh-teal-deep);
}

/* F. Bot buttons — teal outline, not Bootstrap blue/green */
#settings-content .bot-notify-card .btn-outline-primary,
#settings-content .bot-notify-card .btn-outline-success {
    color: var(--hhh-teal-deep) !important;
    border-color: var(--hhh-teal-deep) !important;
    background: transparent !important;
}
#settings-content .bot-notify-card .btn-outline-primary:hover,
#settings-content .bot-notify-card .btn-outline-success:hover {
    background: var(--hhh-teal-deep) !important;
    color: #FFFFFF !important;
}

/* G. Contact links and icons — teal, not browser-blue */
#settings-content .text-primary {
    color: var(--hhh-teal-deep) !important;
}
#settings-content a.text-primary:hover {
    color: var(--hhh-teal-muted) !important;
}

/* H. Dark mode — bot card uses light mint surface with dark text (readable) */
html[data-theme="dark"] #settings-content .bot-notify-card {
    background: var(--color-settings-info-surface) !important;
    border-color: var(--color-settings-info-border) !important;
}
html[data-theme="dark"] #settings-content .bot-notify-card h6,
html[data-theme="dark"] #settings-content .bot-notify-card p,
html[data-theme="dark"] #settings-content .bot-notify-card .small,
html[data-theme="dark"] #settings-content .bot-notify-card .text-muted,
html[data-theme="dark"] #settings-content .bot-notify-card [class*="muted"] {
    color: var(--color-settings-info-text) !important;
    opacity: 1 !important;
}
html[data-theme="dark"] #settings-content .bot-notify-card i {
    color: var(--color-settings-info-text);
}
html[data-theme="dark"] #settings-content .bot-notify-card .btn-outline-primary,
html[data-theme="dark"] #settings-content .bot-notify-card .btn-outline-success {
    color: var(--color-settings-info-text) !important;
    border-color: var(--color-settings-info-border) !important;
}
html[data-theme="dark"] #settings-content .bot-notify-card .btn-outline-primary:hover,
html[data-theme="dark"] #settings-content .bot-notify-card .btn-outline-success:hover {
    background: var(--color-settings-info-border) !important;
    color: var(--color-settings-info-text) !important;
}
html[data-theme="dark"] #settings-content .text-primary {
    color: var(--hhh-mist) !important;
}
html[data-theme="dark"] #settings-content a.text-primary:hover {
    color: var(--hhh-text-on-dark-secondary) !important;
}


/* === Pro / Subscription / Current Plan — HHH visual patch === */

/* ── A. Free Plan card ── */
#subscription-content .subscription-card:not(.pro-card) {
    background: var(--color-plan-free-surface) !important;
    border-color: var(--color-plan-free-border) !important;
}
#subscription-content .subscription-card:not(.pro-card).active {
    background: var(--color-plan-active-bg) !important;
    border-color: var(--color-plan-active-border) !important;
    box-shadow: 0 4px 12px rgba(53, 106, 92, 0.18) !important;
}
#subscription-content .subscription-card:not(.pro-card) .price {
    color: var(--color-plan-free-price) !important;
}

/* ── B. Pro Plan card ── */
#subscription-content .subscription-card.pro-card {
    background: var(--color-plan-pro-surface) !important;
    border-color: var(--color-plan-pro-border) !important;
}
#subscription-content .subscription-card.pro-card.active {
    background: var(--color-plan-pro-surface) !important;
    border-color: var(--color-plan-pro-border) !important;
    box-shadow: 0 4px 12px rgba(201, 166, 78, 0.25) !important;
}
#subscription-content .subscription-card.pro-card.expired {
    background: var(--color-plan-pro-surface-strong) !important;
    border-color: var(--color-danger-text) !important;
}
#subscription-content .subscription-card.pro-card h6 {
    color: var(--color-plan-pro-title) !important;
}
#subscription-content .subscription-card.pro-card .price {
    color: var(--color-plan-pro-price) !important;
}

/* ── C. "Current" badge on Free (bg-success) ── */
#subscription-content .subscription-card:not(.pro-card) .badge.bg-success {
    background-color: var(--color-plan-active-border) !important;
    color: var(--color-plan-active-text) !important;
}

/* ── D. "Current" badge on Pro (bg-warning) ── */
#subscription-content .subscription-card.pro-card .badge.bg-warning {
    background-color: var(--color-plan-current-bg) !important;
    color: var(--color-plan-current-text) !important;
}

/* ── E. "Expired" badge (bg-danger) ── */
#subscription-content .subscription-card .badge.bg-danger {
    background-color: var(--color-danger-text) !important;
    color: #FFFFFF !important;
}

/* ── F. Active Pro status notice ── */
#subscription-content .pro-status-info .text-success {
    color: var(--color-plan-active-text) !important;
}

/* ── G. Billing options ── */
#subscription-content .price-option {
    background: var(--color-billing-surface) !important;
    border-color: var(--color-billing-border) !important;
    border-width: 1px;
    border-style: solid;
    border-radius: 6px;
    padding: 0.5rem;
}
#subscription-content .price-option .price {
    color: var(--color-billing-price) !important;
}
#subscription-content .price-option.recommended {
    background: var(--color-billing-selected-surface) !important;
    border-color: var(--color-billing-selected-border) !important;
}

/* ── H. Save badge ── */
#subscription-content .save-badge {
    background: var(--color-billing-save-bg) !important;
    color: var(--color-billing-save-text) !important;
}

/* ── I. Upgrade button — terracotta, not yellow gradient ── */
#subscription-content .btn-upgrade {
    background: var(--color-action-primary) !important;
    color: #FFFFFF !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
#subscription-content .btn-upgrade:hover {
    background: var(--color-action-primary-hover) !important;
    box-shadow: 0 4px 8px rgba(168, 100, 75, 0.30) !important;
}

/* ── J. Cancel subscription button ── */
#subscription-content .btn-outline-danger {
    color: var(--color-danger-text) !important;
    border-color: var(--color-danger-text) !important;
    background: transparent !important;
}
#subscription-content .btn-outline-danger:hover {
    color: #FFFFFF !important;
    background: var(--color-danger-hover) !important;
    border-color: var(--color-danger-hover) !important;
}

/* ── K. Promo code card ── */
#subscription-content .card:has(#promoCodeInput) {
    background: var(--color-promo-surface) !important;
    border-color: var(--color-promo-border) !important;
}
#subscription-content .promo-help {
    color: var(--color-text-muted) !important;
}

/* ── L. Pro features section (diamond) ── */
#subscription-content #diamond .pro-section {
    background: var(--color-plan-pro-surface) !important;
    border-color: var(--color-plan-pro-border) !important;
}
#subscription-content #diamond .alert-success {
    background: var(--color-plan-active-bg) !important;
    border-color: var(--color-plan-active-border) !important;
    color: var(--color-plan-active-text) !important;
}

/* ── M. Period text ── */
#subscription-content .period {
    color: var(--color-text-muted) !important;
}

/* ── N. Dark mode — Free card text override ── */
html[data-theme="dark"] #subscription-content .subscription-card:not(.pro-card),
html[data-theme="dark"] #subscription-content .subscription-card:not(.pro-card) p,
html[data-theme="dark"] #subscription-content .subscription-card:not(.pro-card) .text-muted {
    color: var(--color-text-secondary) !important;
}
html[data-theme="dark"] #subscription-content .subscription-card:not(.pro-card) h6 {
    color: var(--color-text-primary) !important;
}

/* ── O. Dark mode — Pro card title text ── */
html[data-theme="dark"] #subscription-content .subscription-card.pro-card h6 {
    color: var(--color-plan-pro-title) !important;
}
html[data-theme="dark"] #subscription-content .subscription-card.pro-card p,
html[data-theme="dark"] #subscription-content .subscription-card.pro-card .text-muted {
    color: var(--hhh-mist) !important;
}

/* ── Habit Hero brand mark ──────────────────────────────────────────────── */
.habit-hero-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    vertical-align: middle;
}

.habit-hero-brand__mark {
    display: block;
    width: 40px;
    height: 30px;
    flex: 0 0 40px;
    object-fit: contain;
    object-position: center;
}

.habit-hero-brand__name {
    display: block;
    color: #FFFFFF;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.2px;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .habit-hero-brand {
        gap: 7px;
    }

    .habit-hero-brand__mark {
        width: 35px;
        height: 26px;
        flex-basis: 35px;
    }

    .habit-hero-brand__name {
        font-size: 15px;
    }
}

/* ── Resource Assessment ────────────────────────────────────────────────── */
.assessment-loading, .assessment-error {
    text-align: center;
    padding: 12px 0;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

.assessment-entry {
    display: flex;
    align-items: center;
    gap: 12px;
}
.assessment-entry-icon { font-size: 1.5rem; flex-shrink: 0; }
.assessment-entry-info { flex: 1; min-width: 0; }
.assessment-entry-title { font-size: 0.95rem; font-weight: 600; color: var(--color-text-primary); }
.assessment-entry-desc  { font-size: 0.80rem; color: var(--color-text-secondary); margin-top: 2px; }
.assessment-cooldown    { font-size: 0.75rem; color: var(--color-text-secondary); margin-top: 6px; line-height: 1.55; }

.btn-assessment-start {
    flex-shrink: 0;
    background: var(--color-progress);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.assessment-mini-result {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.assessment-dim {
    font-size: 0.80rem;
    color: var(--color-text-secondary);
    background: var(--color-background-secondary);
    border-radius: 6px;
    padding: 3px 8px;
}

/* ── Resource Dynamics ──────────────────────────────────────── */
.dynamics-block {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border, rgba(0,0,0,0.08));
}
.dynamics-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
}
.dynamics-no-data {
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    text-align: center;
    padding: 6px 0;
}

/* Sparklines grid */
.sparklines-grid {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 10px;
}
.sparkline-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.sparkline-icon { flex-shrink: 0; font-size: 0.75rem; width: 18px; text-align: center; }
.sparkline-svg  { flex: 1; min-width: 0; height: 24px; overflow: visible; }
.sparkline-pct  { font-size: 0.78rem; font-weight: 600; color: var(--color-text-primary); width: 32px; text-align: right; flex-shrink: 0; }
.sparkline-trend { font-size: 0.72rem; font-weight: 700; width: 36px; text-align: right; flex-shrink: 0; }
.trend-up   { color: #27ae60; }
.trend-down { color: #e74c3c; }
.trend-flat { color: var(--color-text-secondary); }

/* Spark SVG elements */
.spark-line { stroke-width: 1.8px; stroke-linecap: round; stroke-linejoin: round; }
.spark-line--drive      { stroke: var(--dim-drive,      #534AB7); }
.spark-line--balance    { stroke: var(--dim-balance,    #2E9E4F); }
.spark-line--energy     { stroke: var(--dim-energy,     #C07010); }
.spark-line--connection { stroke: var(--dim-connection, #0891B2); }
.spark-dot { fill: var(--color-text-secondary); }
.spark-dot-last { fill: var(--color-interactive); r: 3; }

/* 3-month history button */
.btn-dynamics-history {
    display: block;
    width: 100%;
    padding: 7px 12px;
    font-size: 0.80rem;
    font-weight: 500;
    color: var(--color-interactive);
    background: transparent;
    border: 1px solid var(--color-interactive);
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    margin-top: 2px;
    transition: background 0.15s, color 0.15s;
}
.btn-dynamics-history:active,
.btn-dynamics-history:hover {
    background: var(--color-interactive);
    color: #fff;
}
.btn-dynamics-history:disabled {
    opacity: 0.5;
    cursor: default;
}

/* History chart */
.hchart-wrap  { margin-top: 10px; }
.hchart-svg   { width: 100%; height: auto; display: block; }
.hchart-grid  { stroke: var(--color-border, rgba(0,0,0,0.08)); stroke-width: 1; stroke-dasharray: 3 3; }
.hchart-label { font-size: 8px; fill: var(--color-text-secondary); text-anchor: end; dominant-baseline: middle; }
.hchart-date  { font-size: 8px; fill: var(--color-text-secondary); text-anchor: middle; }
.hchart-line  { stroke-width: 2px; stroke-linecap: round; stroke-linejoin: round; }
.hchart-line--drive      { stroke: var(--dim-drive,      #534AB7); }
.hchart-line--balance    { stroke: var(--dim-balance,    #2E9E4F); }
.hchart-line--energy     { stroke: var(--dim-energy,     #C07010); }
.hchart-line--connection { stroke: var(--dim-connection, #0891B2); }
.hchart-dot { stroke: none; }
.hchart-dot--drive      { fill: var(--dim-drive,      #534AB7); }
.hchart-dot--balance    { fill: var(--dim-balance,    #2E9E4F); }
.hchart-dot--energy     { fill: var(--dim-energy,     #C07010); }
.hchart-dot--connection { fill: var(--dim-connection, #0891B2); }
.hchart-legend {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 6px;
}
.hchart-legend-item { display: flex; align-items: center; gap: 4px; font-size: 0.72rem; color: var(--color-text-secondary); }
.hchart-legend-icon { font-size: 0.72rem; }

/* PRO upsell in dynamics area (Free users) */
.dynamics-pro-upsell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--color-background-secondary);
    border-radius: 8px;
    border: 1px dashed var(--color-border);
}
.dynamics-pro-upsell-text { font-size: 0.78rem; color: var(--color-text-secondary); flex: 1; }
.dynamics-pro-upsell-btn {
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    background: var(--color-interactive);
    padding: 4px 10px;
    border-radius: 6px;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Assessment habit suggestions & dopamine block */
.habit-suggest-title { margin-top: 14px !important; }
.assessment-rec-list.habits { list-style: none; padding-left: 0; }
.assessment-rec-list.habits li { padding: 5px 0; font-size: 0.875rem; border-bottom: 1px solid var(--color-border); }
.assessment-rec-list.habits li:last-child { border-bottom: none; }

.assessment-dopamine-block {
    margin-top: 16px;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(83,74,183,0.08) 0%, rgba(8,145,178,0.08) 100%);
    border-left: 3px solid #534AB7;
    border-radius: 8px;
}
.assessment-dopamine-title {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 5px;
    color: var(--color-text-primary);
}
.assessment-dopamine-text {
    font-size: 0.80rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* Questionnaire */
.assessment-progress-bar {
    height: 4px;
    background: var(--color-background-secondary);
    border-radius: 2px;
    margin-bottom: 6px;
    overflow: hidden;
}
.assessment-progress-fill {
    height: 100%;
    background: var(--color-progress);
    border-radius: 2px;
    transition: width 0.3s ease;
}
.assessment-progress-label {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin-bottom: 14px;
}
.assessment-context-hint {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    background: var(--color-surface-secondary, rgba(0,0,0,0.04));
    border-left: 3px solid var(--color-interactive);
    border-radius: 4px;
    padding: 8px 12px;
    margin-bottom: 16px;
    line-height: 1.4;
}
html[data-theme="dark"] .assessment-context-hint {
    background: rgba(255,255,255,0.05);
}
.assessment-question { margin-bottom: 16px; }
.assessment-q-text {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: 8px;
    line-height: 1.4;
}
.assessment-answers { display: flex; flex-direction: column; gap: 5px; }
.assessment-answer-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid var(--color-border-tertiary);
    cursor: pointer;
    font-size: 0.82rem;
    color: var(--color-text-primary);
    transition: background 0.15s;
}
.assessment-answer-label input[type="radio"] { display: none; }
.assessment-answer-val {
    font-weight: 700;
    font-size: 0.80rem;
    color: var(--color-text-secondary);
    min-width: 14px;
}
.assessment-answer-label.selected {
    background: var(--color-progress-secondary, rgba(26,188,156,0.12));
    border-color: var(--color-progress);
    color: var(--color-text-primary);
}
.assessment-answer-label.selected .assessment-answer-val { color: var(--color-progress); }

.btn-assessment-next {
    width: 100%;
    margin-top: 8px;
    background: var(--color-progress);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 11px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}
.assessment-warn {
    font-size: 0.78rem;
    color: var(--color-danger, #e74c3c);
    margin-top: 6px;
    text-align: center;
}

/* Results */
.assessment-result-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 14px;
}
.assessment-result-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.assessment-result-label { font-size: 0.82rem; min-width: 90px; color: var(--color-text-primary); }
.assessment-result-bar-wrap {
    flex: 1;
    height: 8px;
    background: var(--color-background-secondary);
    border-radius: 4px;
    overflow: hidden;
}
.assessment-result-bar {
    height: 100%;
    background: var(--color-progress);
    border-radius: 4px;
    transition: width 0.5s ease;
}
.assessment-result-pct { font-size: 0.80rem; font-weight: 600; color: var(--color-text-secondary); min-width: 36px; text-align: right; }

.assessment-highlight {
    font-size: 0.82rem;
    padding: 6px 10px;
    border-radius: 8px;
    margin-top: 8px;
}
.assessment-highlight.strong {
    background: rgba(71,217,181,0.12);
    color: var(--color-text-primary);
}
.assessment-highlight.attn {
    background: rgba(108,92,231,0.10);
    color: var(--color-text-primary);
}
.assessment-rec-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-top: 12px;
    margin-bottom: 4px;
}
.assessment-rec-list {
    margin: 0;
    padding-left: 4px;
    list-style: none;
}
.assessment-rec-list li {
    font-size: 0.80rem;
    color: var(--color-text-secondary);
    padding: 2px 0;
}
.assessment-rec-list.limit li { color: var(--color-text-secondary); opacity: 0.85; }

/* === Unified dimension icon — used in habit cards, resource section, focus of day === */
.dim-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; }
.dim-icon i { font-size: 14px; line-height: 1; }
.dim-icon--drive      { background: #EEEDFE; color: #534AB7; }
.dim-icon--energy     { background: #FAEEDA; color: #BA7517; }
.dim-icon--balance    { background: #EAF3DE; color: #3B6D11; }
.dim-icon--connection { background: #E1F5EE; color: #0F6E56; }

/* Larger variant for resource section cards */
.dim-icon.dim-icon-lg { width: 38px; height: 38px; border-radius: 10px; }
.dim-icon.dim-icon-lg i { font-size: 20px; }

/* Preset habit dimension tags */
.sample-habit-title { display: block; font-size: 0.8rem; line-height: 1.2; }
.sample-habit-dims { display: flex; gap: 3px; margin-top: 4px; justify-content: center; }
.habit-dim-tag { display: inline-flex; }

/* Habit card: meta row with dims on right */
.habit-header { gap: 6px; margin-bottom: 2px; }
.habit-meta-row { display: flex; justify-content: space-between; align-items: center; margin-top: 2px; margin-bottom: 2px; }
.habit-meta { font-size: 0.85rem; }

/* Dims box — always 4 slots with border, active = colored, inactive = ghost */
.habit-dims-box { display: flex; align-items: center; gap: 3px; flex-shrink: 0; padding: 3px 5px; border-radius: 8px; border: 1px solid var(--color-border, rgba(0,0,0,0.12)); background: rgba(0,0,0,0.02); }
.habit-dim-slot { display: inline-flex; }
.habit-dim-slot:not(.active) .dim-icon { background: rgba(0,0,0,0.05); color: rgba(0,0,0,0.22); }
.habit-dim-slot:not(.active) .dim-icon i { opacity: 0.6; }
html[data-theme="dark"] .habit-dim-slot:not(.active) .dim-icon { background: rgba(255,255,255,0.09); color: rgba(255,255,255,0.32); }
html[data-theme="dark"] .habit-dim-slot:not(.active) .dim-icon i { opacity: 1; }
html[data-theme="dark"] .habit-dims-box { border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.04); }

/* Habit card header: title + reorder arrows */
.habit-reorder-btn { min-width: 42px; font-size: 24px; line-height: 1; padding: 6px 10px; font-weight: bold; background: var(--hhh-teal-deep); color: #fff; border-color: var(--hhh-teal-deep); }
html[data-theme="dark"] .habit-reorder-btn { background: var(--hhh-aqua); color: var(--hhh-dark-bg); border-color: var(--hhh-aqua); }
.habit-reorder-label { font-size: 0.62rem; color: var(--color-text-muted, #888); margin-top: 2px; white-space: nowrap; }

/* Tighter progress bar */
.habit-card .progress { margin-top: 3px !important; }
.habit-card .progress + small { font-size: 0.72rem; margin-bottom: 3px; display: block; }

/* Habit bottom row: delete + edit */
.habit-bottom-row { border-top: 1px solid var(--color-border, rgba(0,0,0,0.08)); padding-top: 6px; margin-top: 6px !important; }

.btn-assessment-done {
    width: 100%;
    margin-top: 14px;
    background: transparent;
    color: var(--color-primary, #6c5ce7);
    border: 1px solid var(--color-primary, #6c5ce7);
    border-radius: 10px;
    padding: 9px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}

/* ── Lucide icon sizing ────────────────────────────────────── */
.nav-tabs .nav-link .nav-emoji svg { width: 1.125rem; height: 1.125rem; }
.icon-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 6px; }
.icon-btn svg { width: 22px; height: 22px; pointer-events: none; }
.habit-icon svg { width: 18px; height: 18px; vertical-align: -0.15em; }
.assessment-entry-icon svg { width: 28px; height: 28px; }
.journey-info-row svg, .journey-stage-row svg, .daily-focus-assess-text svg { width: 15px; height: 15px; vertical-align: -0.1em; }
.dynamics-pro-upsell-text svg { width: 14px; height: 14px; vertical-align: -0.1em; }