/* Apple-style: системные шрифты (SF Pro на macOS/iOS) */
* {
    margin: 0;
    padding: 0;
    color: #FFD400;
    box-sizing: border-box;
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Видимый фокус для клавиатурной навигации */
:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--primary-color, #FFD400);
    outline-offset: 2px;
}
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--primary-color, #FFD400);
    outline-offset: 2px;
}

:is(body.theme-airy, body.theme-ember) :focus-visible { outline-color: var(--primary-color); }
body.theme-white :focus-visible,
body.theme-aqua :focus-visible { outline-color: var(--primary-color); }

/* Шкала типографики (6 размеров) */
:root {
    --font-xs: 11px;
    --font-sm: 13px;
    --font-base: 15px;
    --font-md: 16px;
    --font-lg: 18px;
    --font-xl: 20px;
    --font-2xl: 24px;
    --font-display: 28px;
    /* Отступы по модулю 8px (Apple grid) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    /* Apple: радиусы скругления */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    /* Apple: мягкие тени */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Цветовые переменные для тем */
:root {
    --on-primary: #0A0A0A;
    --font-display: 'Unbounded', 'Onest', system-ui, sans-serif;
    --font-body: 'Onest', system-ui, -apple-system, sans-serif;
    --primary-color: #FFD400;
    --primary-dark: #FFC400;
    --primary-light: #FFE14D;
    --bg-dark: #0A0A0A;
    --bg-gradient-start: #0A0A0A;
    --bg-gradient-end: #141414;
    --text-color: #FFD400;
    --text-light: #fff;
}

/* Воздушная тема - переменные (синяя версия темной темы) */
body.theme-airy {
    --primary-color: #4a9eff;
    --primary-dark: #2d7dd2;
    --primary-light: #6bb3ff;
    --bg-dark: #0a0a1a;
    --bg-gradient-start: #1a1a2e;
    --bg-gradient-end: #16213e;
    --text-color: #4a9eff;
    --text-light: #fff;
    --accent-soft: #5ba3ff;
    --accent-lavender: #6bb3ff;
    --accent-peach: #4a9eff;
    --light-peach: rgba(74, 158, 255, 0.3);
    --light-cream: rgba(74, 158, 255, 0.2);
    --theme-accent-rgb: 74, 158, 255;
}

/* Тема Ember - тёплый оранжево-красный градиент (по референсу) */
body.theme-ember {
    --primary-color: #ff8c42;
    --primary-dark: #e85d04;
    --primary-light: #ffb347;
    --bg-dark: #0f0a08;
    --bg-gradient-start: #ff6b35;
    --bg-gradient-end: #8b3a2a;
    --text-color: #ff8c42;
    --text-light: #fff;
    --accent-soft: #ffa366;
    --accent-lavender: #ffb347;
    --accent-peach: #ff8c42;
    --light-peach: rgba(255, 107, 53, 0.3);
    --light-cream: rgba(255, 107, 53, 0.2);
    --theme-accent-rgb: 255, 107, 53;
}

/* Theme Ember: белые акценты — заголовки, лого, кнопки, карточки, модалки */
body.theme-ember .logo-text,
body.theme-ember .dhyana-title,
body.theme-ember .asana-title,
body.theme-ember .journey-title,
body.theme-ember .arati-title,
body.theme-ember .profile-title,
body.theme-ember .settings-title,
body.theme-ember .card-title,
body.theme-ember .section-title,
body.theme-ember .settings-section-title,
body.theme-ember .mantra-text {
    color: #fff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

body.theme-ember .logo-icon {
    filter: brightness(0) invert(1);
}

body.theme-ember .burger-line {
    background: #fff !important;
}

body.theme-ember .burger-menu:hover .burger-line {
    background: rgba(255, 255, 255, 0.9) !important;
}

body.theme-ember .start-meditation-btn,
body.theme-ember .start-asana-btn {
    background: #fff !important;
    border-color: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important;
}

body.theme-ember .start-meditation-btn span,
body.theme-ember .start-asana-btn span {
    color: #e85d04 !important;
}

body.theme-ember .start-meditation-btn svg,
body.theme-ember .start-asana-btn svg,
body.theme-ember .start-meditation-btn svg path,
body.theme-ember .start-meditation-btn svg circle,
body.theme-ember .start-asana-btn svg path,
body.theme-ember .start-asana-btn svg circle {
    color: #e85d04 !important;
    stroke: #e85d04 !important;
    fill: #e85d04 !important;
}

body.theme-ember .start-meditation-btn:hover,
body.theme-ember .start-asana-btn:hover {
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
}

body.theme-ember .count-display {
    background: #fff !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
}

body.theme-ember .count-display,
body.theme-ember .big-count,
body.theme-ember .count-ratio,
body.theme-ember .tap-hint {
    color: #333 !important;
    text-shadow: none !important;
}

body.theme-ember .today-stats-card,
body.theme-ember .weekly-stats-card,
body.theme-ember .stat-card,
body.theme-ember .progress-card,
body.theme-ember .today-stats-card h2,
body.theme-ember .week-stats-card h2 {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    color: #333 !important;
}

body.theme-ember .today-stats-card .stat-label,
body.theme-ember .week-stats-card .stat-label,
body.theme-ember .stat-label,
body.theme-ember .day-time,
body.theme-ember .todayDate {
    color: #555 !important;
}

body.theme-ember .stat-value,
body.theme-ember .stats-value {
    color: #e85d04 !important;
}

body.theme-ember .fullscreen-menu .menu-overlay {
    background: rgba(255, 255, 255, 0.96) !important;
}

body.theme-ember .menu-item-text,
body.theme-ember .menu-item-icon {
    color: #333 !important;
}

body.theme-ember .menu-close {
    color: #333 !important;
}

body.theme-ember .pranayama-select-dropdown,
body.theme-ember .mode-select-list {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
}

body.theme-ember .pranayama-select-trigger,
body.theme-ember .mode-select-trigger,
body.theme-ember .pranayama-select-option,
body.theme-ember .mode-select-option,
body.theme-ember .pranayama-select-label,
body.theme-ember .pranayama-select-value {
    color: #333 !important;
}

body.theme-ember .pranayama-select-option:hover,
body.theme-ember .mode-select-option:hover {
    background: rgba(232, 93, 4, 0.08) !important;
}

body.theme-ember .mode-select-arrow {
    color: #333 !important;
}

body.theme-ember .arati-text-modal-content,
body.theme-ember .rituals-text-modal .modal-content,
body.theme-ember .achaman-body,
body.theme-ember .angas-body {
    background: #fff !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #333 !important;
}

body.theme-ember .arati-text-modal .modal-title,
body.theme-ember .rituals-text-modal .modal-title,
body.theme-ember .arati-text-body,
body.theme-ember .achaman-intro,
body.theme-ember .angas-section {
    color: #333 !important;
}

body.theme-ember .arati-text-modal .modal-close,
body.theme-ember .rituals-text-modal .modal-close {
    color: #555 !important;
}

body.theme-ember .arati-text-modal .modal-close:hover,
body.theme-ember .rituals-text-modal .modal-close:hover {
    color: #e85d04 !important;
}

body.theme-ember .manual-input-modal .modal-content {
    background: #fff !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
}

body.theme-ember .manual-input-modal .modal-title,
body.theme-ember .manual-input-modal .modal-header,
body.theme-ember .manual-input-modal .time-label,
body.theme-ember .manual-input-modal .modal-cancel-btn,
body.theme-ember .manual-input-modal .modal-save-btn {
    color: #333 !important;
}

body.theme-ember .manual-input-modal .modal-close {
    color: #555 !important;
}

body.theme-ember .manual-input-modal .modal-close:hover {
    color: #e85d04 !important;
}

body.theme-ember .history-calendar-modal .modal-content,
body.theme-ember .history-calendar-modal .modal-title {
    background: #fff !important;
    color: #333 !important;
}

body.theme-ember .history-calendar-modal .modal-close {
    color: #555 !important;
}

body.theme-ember .card,
body.theme-ember .tracker-card,
body.theme-ember .timings-card {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
}

body.theme-ember .card-title,
body.theme-ember .timing-label,
body.theme-ember .timing-time {
    color: #333 !important;
}

body.theme-ember .week-day,
body.theme-ember .calendar-day {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

body.theme-ember .week-day .day-label,
body.theme-ember .day-label {
    color: #555 !important;
}

body.theme-ember .week-day.today .day-label,
body.theme-ember .calendar-day.today .day-label {
    color: #e85d04 !important;
}

body.theme-ember .day-bar {
    background: rgba(232, 93, 4, 0.3) !important;
}

body.theme-ember .day-bar.has-data {
    background: #e85d04 !important;
}

body.theme-ember .practice-info-modal-content,
body.theme-ember .practice-info-modal-body {
    background: #fff !important;
    color: #333 !important;
}

body.theme-ember .practice-info-modal-title {
    color: #333 !important;
}

body.theme-ember .practice-info-modal-close {
    color: #555 !important;
}

body.theme-ember .practice-info-modal-close:hover {
    color: #e85d04 !important;
}

body.theme-ember .tilaka-image-modal-content {
    background: #fff !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
}

body.theme-ember .tilaka-image-modal-header {
    border-bottom-color: rgba(0, 0, 0, 0.1) !important;
}

body.theme-ember .tilaka-image-modal-title {
    color: #333 !important;
}

body.theme-ember .tilaka-image-modal-body {
    background: #fff !important;
}

body.theme-ember .tilaka-image-modal-close {
    color: #555 !important;
}

body.theme-ember .tilaka-image-modal-close:hover {
    color: #e85d04 !important;
}

body.theme-ember .trataka-card {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
}

body.theme-ember .trataka-card-title {
    color: #333 !important;
}

body.theme-ember .trataka-preview-dot-inner {
    background: #e85d04 !important;
}

body.theme-ember .asana-card,
body.theme-ember .exercise-selector .asana-card {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
}

body.theme-ember .asana-card-title,
body.theme-ember .exercise-selector .asana-card-title {
    color: #333 !important;
}

body.theme-ember .asana-card-subtitle,
body.theme-ember .exercise-selector .asana-card-subtitle {
    color: #555 !important;
}

body.theme-ember .rituals-title {
    color: #fff !important;
}

body.theme-ember .rituals-hint {
    color: rgba(255, 255, 255, 0.8) !important;
}

body.theme-ember .japa-settings-panel,
body.theme-ember .tracker-section {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
}

body.theme-ember .japa-settings-panel .section-title,
body.theme-ember .tracker-section .section-title {
    color: #333 !important;
}

body.theme-ember .arati-text-link {
    color: #e85d04 !important;
}

body.theme-ember .translation-block,
body.theme-ember [class*="translation"] {
    background: rgba(232, 93, 4, 0.12) !important;
    color: #333 !important;
}

body.theme-ember .manual-input-modal .time-input,
body.theme-ember .manual-input-modal .date-input {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
    color: #333 !important;
}

body.theme-ember .book-nav-btn {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    color: #333 !important;
}

body.theme-ember .book-nav-btn:hover:not(:disabled) {
    background: #fff !important;
}

body.theme-ember .reader-chapter-prev,
body.theme-ember .reader-chapter-next {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    color: #333 !important;
}

body.theme-ember .reader-chapter-prev:hover:not(:disabled),
body.theme-ember .reader-chapter-next:hover:not(:disabled) {
    background: #fff !important;
}

body.theme-ember .reader-chapter-prev svg,
body.theme-ember .reader-chapter-next svg {
    stroke: #333 !important;
}

body.theme-ember .history-calendar-modal {
    background: rgba(0, 0, 0, 0.5) !important;
}

body.theme-ember .history-calendar-modal .modal-content {
    background: #fff !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
}

body.theme-ember .history-calendar-modal .modal-title,
body.theme-ember .history-calendar-modal .calendar-nav-btn {
    color: #333 !important;
}

body.theme-ember .history-calendar-modal .calendar-nav-btn {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
}

body.theme-ember .history-calendar-modal .calendar-nav-btn:hover {
    background: rgba(232, 93, 4, 0.1) !important;
}

body.theme-ember .profile-edit-modal .modal-content,
body.theme-ember .profile-add-practice-modal-content {
    background: #fff !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
}

body.theme-ember .profile-edit-modal .modal-title,
body.theme-ember .profile-add-practice-modal .modal-title,
body.theme-ember .profile-edit-modal .modal-header,
body.theme-ember .profile-edit-modal .stat-label,
body.theme-ember .profile-edit-modal .stat-value,
body.theme-ember .profile-add-practice-modal .menu-item-text {
    color: #333 !important;
}

body.theme-ember .tilaka-image-modal-content {
    background: #fff !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
}

body.theme-ember .tilaka-image-modal-title {
    color: #333 !important;
}

body.theme-ember .tilaka-image-modal-close {
    color: #555 !important;
}

body.theme-ember .tilaka-image-modal-close:hover {
    color: #e85d04 !important;
}

body.theme-ember .duration-dropdown,
body.theme-ember .unified-duration-dropdown {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
}

body.theme-ember .duration-dropdown option,
body.theme-ember .unified-duration-dropdown option {
    color: #333 !important;
}

body.theme-ember .nav-item.active .nav-label,
body.theme-ember .nav-item.active .nav-icon svg,
body.theme-ember .nav-item.active .nav-icon svg path,
body.theme-ember .nav-item.active .nav-icon svg circle {
    color: #fff !important;
    stroke: #fff !important;
}

body.theme-ember .arati-card {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
}

body.theme-ember .arati-card .arati-name,
body.theme-ember .arati-card .arati-time {
    color: #333 !important;
}

body.theme-ember .history-btn {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    color: #333 !important;
}

body.theme-ember .history-btn:hover {
    background: #fff !important;
}

body.theme-ember .today-stats-card .stat-item--editable:hover {
    background: rgba(232, 93, 4, 0.1) !important;
}

body.theme-ember .today-stats-card .stat-item--editable:active {
    background: rgba(232, 93, 4, 0.15) !important;
}

body.theme-ember .day-wake-time .day-time-icon,
body.theme-ember .day-wake-time svg,
body.theme-ember .day-wake .day-time-icon,
body.theme-ember .day-wake svg {
    color: #e85d04 !important;
}

body.theme-ember .day-wake-time .day-time-text,
body.theme-ember .day-wake .day-time-text {
    color: #555 !important;
}

body.theme-ember .weekly-chart,
body.theme-ember .arati-weekly-stats {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Белая тема - переменные (Apple-стиль) */
body.theme-white {
    --primary-color: #c97600;
    --primary-dark: #a06200;
    --primary-light: #e09400;
    --bg-dark: #F5F5F7;
    --bg-gradient-start: #F5F5F7;
    --bg-gradient-end: #EBEBED;
    --text-color: #1D1D1F;
    --text-light: #1D1D1F;
    --accent-soft: #d4a040;
    --accent-lavender: #e09400;
    --accent-peach: #c97600;
    --light-peach: rgba(201, 118, 0, 0.2);
    --light-cream: rgba(201, 118, 0, 0.12);
}

/* Бирюзовая тема - светлая с зелено-бирюзовым акцентом (Apple-стиль) */
body.theme-aqua {
    --primary-color: #30CBBA;
    --primary-dark: #0A7E80;
    --primary-light: #4dd9c9;
    --bg-dark: #F0FAF9;
    --bg-gradient-start: #F0FAF9;
    --bg-gradient-end: #E8F5F3;
    --text-color: #1D1D1F;
    --text-light: #1D1D1F;
    --accent-soft: #5ce0d0;
    --accent-lavender: #4dd9c9;
    --accent-peach: #30CBBA;
    --light-peach: rgba(48, 203, 186, 0.2);
    --light-cream: rgba(48, 203, 186, 0.12);
}

/* Белая тема - базовые переопределения (Apple: тёмный текст #1D1D1F) */
body.theme-white *,
body.theme-aqua * {
    transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
    color: #1D1D1F;
}

:is(body.theme-white, body.theme-aqua) .card-title,
:is(body.theme-white, body.theme-aqua) .section-title,
:is(body.theme-white, body.theme-aqua) .stat-title,
:is(body.theme-white, body.theme-aqua) .timing-label,
:is(body.theme-white, body.theme-aqua) .timing-time,
:is(body.theme-white, body.theme-aqua) .timer-label,
:is(body.theme-white, body.theme-aqua) .circles-label,
:is(body.theme-white, body.theme-aqua) .day-label,
:is(body.theme-white, body.theme-aqua) .day-number,
:is(body.theme-white, body.theme-aqua) .week-day-label,
:is(body.theme-white, body.theme-aqua) .arati-week-label,
:is(body.theme-white, body.theme-aqua) .nav-label,
:is(body.theme-white, body.theme-aqua) .tap-hint,
:is(body.theme-white, body.theme-aqua) .logo-text,
:is(body.theme-white, body.theme-aqua) .mantra-text,
:is(body.theme-white, body.theme-aqua) .dhyana-title,
:is(body.theme-white, body.theme-aqua) .asana-title,
:is(body.theme-white, body.theme-aqua) .journey-title,
:is(body.theme-white, body.theme-aqua) .arati-title,
:is(body.theme-white, body.theme-aqua) .profile-title,
:is(body.theme-white, body.theme-aqua) .settings-title,
:is(body.theme-white, body.theme-aqua) .card-header svg,
:is(body.theme-white, body.theme-aqua) .timing-item svg,
:is(body.theme-white, body.theme-aqua) .today-stats-card,
:is(body.theme-white, body.theme-aqua) .week-stats-card,
:is(body.theme-white, body.theme-aqua) .progress-card,
:is(body.theme-white, body.theme-aqua) .stats-item,
:is(body.theme-white, body.theme-aqua) .stats-label,
:is(body.theme-white, body.theme-aqua) .arati-name,
:is(body.theme-white, body.theme-aqua) .arati-time,
:is(body.theme-white, body.theme-aqua) .status-text,
:is(body.theme-white, body.theme-aqua) .arati-btn span,
:is(body.theme-white, body.theme-aqua) .arati-text-link,
:is(body.theme-white, body.theme-aqua) .todayDate,
:is(body.theme-white, body.theme-aqua) .today-stats-card h2,
:is(body.theme-white, body.theme-aqua) .week-stats-card h2,
:is(body.theme-white, body.theme-aqua) .language-name,
:is(body.theme-white, body.theme-aqua) .language-name-small,
:is(body.theme-white, body.theme-aqua) .settings-section-title,
:is(body.theme-white, body.theme-aqua) .menu-item-text,
:is(body.theme-white, body.theme-aqua) .count-display,
:is(body.theme-white, body.theme-aqua) .big-count,
:is(body.theme-white, body.theme-aqua) .count-ratio,
:is(body.theme-white, body.theme-aqua) .section-title,
:is(body.theme-white, body.theme-aqua) .timer-value,
:is(body.theme-white, body.theme-aqua) .timer-label,
:is(body.theme-white, body.theme-aqua) .stats-value,
:is(body.theme-white, body.theme-aqua) .stat-value,
:is(body.theme-white, body.theme-aqua) .stat-label,
:is(body.theme-white, body.theme-aqua) .week-day .day-label,
:is(body.theme-white, body.theme-aqua) .day-time,
:is(body.theme-white, body.theme-aqua) .calendar-day,
:is(body.theme-white, body.theme-aqua) .summary-label {
    color: #333 !important;
}
:is(body.theme-white, body.theme-aqua) .summary-value {
    color: var(--primary-color) !important;
}

/* Apple: вторичный текст */
:is(body.theme-white, body.theme-aqua) .stat-label,
:is(body.theme-white, body.theme-aqua) .today-practices-empty-hint,
:is(body.theme-white, body.theme-aqua) .card-date,
:is(body.theme-white, body.theme-aqua) .day-time {
    color: #86868B !important;
}
:is(body.theme-white, body.theme-aqua) .week-day.today .day-label {
    color: var(--primary-color) !important;
}

:is(body.theme-white, body.theme-aqua) .logo-text,
:is(body.theme-white, body.theme-aqua) .burger-line,
:is(body.theme-white, body.theme-aqua) .nav-item.active .nav-label,
:is(body.theme-white, body.theme-aqua) .nav-item.active .nav-icon svg,
:is(body.theme-white, body.theme-aqua) .nav-item.active .nav-icon svg path,
:is(body.theme-white, body.theme-aqua) .nav-item.active .nav-icon svg circle,
:is(body.theme-white, body.theme-aqua) .nav-item.active .nav-icon svg line,
:is(body.theme-white, body.theme-aqua) .nav-item.active .nav-icon svg polygon,
:is(body.theme-white, body.theme-aqua) .nav-item.active .nav-icon svg polyline {
    color: var(--primary-color) !important;
}

:is(body.theme-white, body.theme-aqua) .burger-line {
    background: var(--primary-color) !important;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                top 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease,
                background 0.2s ease !important;
}

:is(body.theme-white, body.theme-aqua) .burger-menu:hover .burger-line {
    background: var(--primary-light) !important;
}

:is(body.theme-white, body.theme-aqua) .burger-menu.active .burger-line:nth-child(2) {
    transition: opacity 0.2s ease, transform 0.25s ease !important;
}

/* Apple: светлые карточки — белый фон, мягкая тень, без тяжёлой рамки */
:is(body.theme-white, body.theme-aqua) .card,
:is(body.theme-white, body.theme-aqua) .tracker-card,
:is(body.theme-white, body.theme-aqua) .timings-card,
:is(body.theme-white, body.theme-aqua) .today-stats-card,
:is(body.theme-white, body.theme-aqua) .weekly-stats-card,
:is(body.theme-white, body.theme-aqua) .stat-card,
:is(body.theme-white, body.theme-aqua) .progress-card {
    background: #FFFFFF !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
}
body.theme-white .today-stats-card,
body.theme-white .weekly-stats-card,
body.theme-white .stat-card {
    border-color: rgba(201, 118, 0, 0.15) !important;
}

:is(body.theme-white, body.theme-aqua) .card:hover,
:is(body.theme-white, body.theme-aqua) .tracker-card:hover,
:is(body.theme-white, body.theme-aqua) .timings-card:hover {
    box-shadow: var(--shadow-md) !important;
}

/* Apple: нижняя навигация — прозрачный с лёгким blur */
:is(body.theme-white, body.theme-aqua) .bottom-nav {
    background: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
}

:is(body.theme-white, body.theme-aqua) .nav-item .nav-icon svg,
:is(body.theme-white, body.theme-aqua) .nav-item .nav-icon svg path,
:is(body.theme-white, body.theme-aqua) .nav-item .nav-icon svg circle,
:is(body.theme-white, body.theme-aqua) .nav-item .nav-icon svg line,
:is(body.theme-white, body.theme-aqua) .nav-item .nav-icon svg polygon,
:is(body.theme-white, body.theme-aqua) .nav-item .nav-icon svg polyline {
    color: #86868B !important;
}

:is(body.theme-white, body.theme-aqua) .nav-item:hover .nav-icon svg,
:is(body.theme-white, body.theme-aqua) .nav-item:hover .nav-icon svg path,
:is(body.theme-white, body.theme-aqua) .nav-item:hover .nav-icon svg circle,
:is(body.theme-white, body.theme-aqua) .nav-item:hover .nav-icon svg line,
:is(body.theme-white, body.theme-aqua) .nav-item:hover .nav-icon svg polygon,
:is(body.theme-white, body.theme-aqua) .nav-item:hover .nav-icon svg polyline {
    color: var(--primary-color) !important;
}

:is(body.theme-white, body.theme-aqua) .theme-circle {
    border-color: rgba(0, 0, 0, 0.2) !important;
}

:is(body.theme-white, body.theme-aqua) .theme-circle.active {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 2px var(--primary-color) !important;
}

:is(body.theme-white, body.theme-aqua) .theme-check {
    background: var(--primary-color) !important;
    border-color: rgba(255, 255, 255, 0.8) !important;
}

:is(body.theme-white, body.theme-aqua) .theme-check svg,
:is(body.theme-white, body.theme-aqua) .theme-check svg polyline {
    stroke: #fff !important;
}

/* Светлая тема: рамка, фон и тени счётчика джапы */
:is(body.theme-white, body.theme-aqua) .count-display {
    border-color: rgba(0, 0, 0, 0.08) !important;
    background: #FFFFFF !important;
    box-shadow: var(--shadow-md);
}
:is(body.theme-white, body.theme-aqua) .count-display,
:is(body.theme-white, body.theme-aqua) .big-count,
:is(body.theme-white, body.theme-aqua) .count-ratio,
:is(body.theme-white, body.theme-aqua) .tap-hint,
:is(body.theme-white, body.theme-aqua) .mantra-counter {
    text-shadow: none !important;
}

:is(body.theme-white, body.theme-aqua) .timer-value,
:is(body.theme-white, body.theme-aqua) .timer-label,
:is(body.theme-white, body.theme-aqua) .pranayama-timer-value,
:is(body.theme-white, body.theme-aqua) .pranayama-phase-label,
:is(body.theme-white, body.theme-aqua) .pranayama-total-time,
:is(body.theme-white, body.theme-aqua) .pranayama-phase-timer .pranayama-timer-value {
    text-shadow: none !important;
}

:is(body.theme-white, body.theme-aqua) .dhyana-title,
:is(body.theme-white, body.theme-aqua) .asana-title,
:is(body.theme-white, body.theme-aqua) .section-title,
:is(body.theme-white, body.theme-aqua) .tracker-title,
:is(body.theme-white, body.theme-aqua) .card-title,
:is(body.theme-white, body.theme-aqua) .journey-title,
:is(body.theme-white, body.theme-aqua) .arati-title,
:is(body.theme-white, body.theme-aqua) .profile-title,
:is(body.theme-white, body.theme-aqua) .settings-title,
:is(body.theme-white, body.theme-aqua) .settings-section-title,
:is(body.theme-white, body.theme-aqua) .mantra-text.rotating-title,
:is(body.theme-white, body.theme-aqua) #japaTitle {
    text-shadow: none !important;
}

:is(body.theme-white, body.theme-aqua) .language-option {
    background: #FFFFFF !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #1D1D1F !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm) !important;
}

:is(body.theme-white, body.theme-aqua) .language-option:hover,
:is(body.theme-white, body.theme-aqua) .language-option.active {
    border-color: var(--primary-color) !important;
    background: rgba(201, 118, 0, 0.06) !important;
    box-shadow: 0 0 0 1px var(--primary-color) !important;
}
body.theme-aqua .language-option:hover,
body.theme-aqua .language-option.active {
    background: rgba(48, 203, 186, 0.06) !important;
}

:is(body.theme-white, body.theme-aqua) .fullscreen-menu .menu-overlay {
    background: rgba(255, 255, 255, 0.92) !important;
}

:is(body.theme-white, body.theme-aqua) .menu-close {
    color: var(--primary-color) !important;
}

:is(body.theme-white, body.theme-aqua) .start-meditation-btn,
:is(body.theme-white, body.theme-aqua) .start-asana-btn {
    background: var(--primary-color) !important;
    color: #fff !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: 0 4px 14px rgba(201, 118, 0, 0.35) !important;
}
body.theme-aqua .start-meditation-btn,
body.theme-aqua .start-asana-btn {
    box-shadow: 0 4px 14px rgba(48, 203, 186, 0.35) !important;
}

:is(body.theme-white, body.theme-aqua) .start-meditation-btn span,
:is(body.theme-white, body.theme-aqua) .start-asana-btn span,
:is(body.theme-white, body.theme-aqua) .start-meditation-btn svg,
:is(body.theme-white, body.theme-aqua) .start-asana-btn svg {
    color: #fff !important;
}

:is(body.theme-white, body.theme-aqua) .duration-btn.active,
:is(body.theme-white, body.theme-aqua) .sound-btn.active,
:is(body.theme-white, body.theme-aqua) .pranayama-btn.active {
    background: rgba(201, 118, 0, 0.25) !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}

:is(body.theme-white, body.theme-aqua) .duration-btn.active span,
:is(body.theme-white, body.theme-aqua) .sound-btn.active span,
:is(body.theme-white, body.theme-aqua) .pranayama-btn.active span {
    color: var(--primary-color) !important;
}

:is(body.theme-white, body.theme-aqua) .reset-meditation-btn,
:is(body.theme-white, body.theme-aqua) .reset-meditation-btn span,
:is(body.theme-white, body.theme-aqua) .reset-meditation-btn svg {
    color: #555 !important;
}

:is(body.theme-white, body.theme-aqua) .reset-meditation-btn:hover {
    background: rgba(0, 0, 0, 0.08) !important;
    color: #333 !important;
}

:is(body.theme-white, body.theme-aqua) .progress-ring-fill {
    stroke: var(--primary-color) !important;
}

:is(body.theme-white, body.theme-aqua) .progress-ring-bg {
    stroke: rgba(0, 0, 0, 0.12) !important;
}

:is(body.theme-white, body.theme-aqua) .top-header {
    background: transparent !important;
}

/* Apple: светлые dhyana-item и arati-card */
:is(body.theme-white, body.theme-aqua) .dhyana-item {
    background: #FFFFFF !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: var(--shadow-sm) !important;
}
:is(body.theme-white, body.theme-aqua) .dhyana-item:hover {
    box-shadow: var(--shadow-md) !important;
}
:is(body.theme-white, body.theme-aqua) .dhyana-item.active {
    border-color: var(--primary-color) !important;
    background: rgba(201, 118, 0, 0.08) !important;
    box-shadow: 0 0 0 1px var(--primary-color) !important;
}
body.theme-aqua .dhyana-item.active {
    background: rgba(48, 203, 186, 0.08) !important;
}
:is(body.theme-white, body.theme-aqua) .dhyana-item .dhyana-label,
:is(body.theme-white, body.theme-aqua) .dhyana-item .dhyana-icon,
:is(body.theme-white, body.theme-aqua) .dhyana-item svg {
    color: #86868B !important;
}

:is(body.theme-white, body.theme-aqua) .dhyana-item.active .dhyana-label,
:is(body.theme-white, body.theme-aqua) .dhyana-item.active .dhyana-icon,
:is(body.theme-white, body.theme-aqua) .dhyana-item.active svg,
:is(body.theme-white, body.theme-aqua) .dhyana-item.active svg path,
:is(body.theme-white, body.theme-aqua) .dhyana-item.active svg circle,
:is(body.theme-white, body.theme-aqua) .dhyana-item.active svg line {
    color: var(--primary-color) !important;
}

/* Apple: arati-card на светлой теме */
:is(body.theme-white, body.theme-aqua) .arati-card {
    background: #FFFFFF !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: var(--shadow-sm) !important;
}
:is(body.theme-white, body.theme-aqua) .arati-card:hover {
    box-shadow: var(--shadow-md) !important;
}
:is(body.theme-white, body.theme-aqua) .arati-card.arati-done {
    border-color: var(--primary-color) !important;
    background: rgba(201, 118, 0, 0.06) !important;
}
body.theme-aqua .arati-card.arati-done {
    background: rgba(48, 203, 186, 0.06) !important;
}

:is(body.theme-white, body.theme-aqua) .mode-select-trigger {
    background: rgba(0, 0, 0, 0.04) !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    color: #1D1D1F !important;
    border-radius: var(--radius-md) !important;
}

:is(body.theme-white, body.theme-aqua) .mode-select-list {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
}

:is(body.theme-white, body.theme-aqua) .mode-select-option {
    color: #333 !important;
}

:is(body.theme-white, body.theme-aqua) .mode-select-option:hover,
:is(body.theme-white, body.theme-aqua) .mode-select-option.active {
    background: rgba(201, 118, 0, 0.12) !important;
    color: var(--primary-color) !important;
}

/* Светлая тема: кнопка «минус» круг — цвет как у текста, не белый */
:is(body.theme-white, body.theme-aqua) .minus-circle-btn {
    background: rgba(0, 0, 0, 0.06) !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
    color: #333 !important;
}
:is(body.theme-white, body.theme-aqua) .minus-circle-btn:hover {
    background: rgba(0, 0, 0, 0.1) !important;
    border-color: rgba(201, 118, 0, 0.35) !important;
}
:is(body.theme-white, body.theme-aqua) .minus-circle-icon {
    border-color: #333 !important;
}
:is(body.theme-white, body.theme-aqua) .minus-circle-icon-inner {
    background: #333 !important;
}
:is(body.theme-white, body.theme-aqua) .minus-circle-text {
    color: #333 !important;
}

/* Светлая тема: карточки пранаямы, тратаки, асаны и упражнений — светлый фон, тёмный текст */
:is(body.theme-white, body.theme-aqua) .pranayama-card {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}
:is(body.theme-white, body.theme-aqua) .pranayama-card-title {
    color: var(--primary-color) !important;
    text-shadow: none !important;
}
:is(body.theme-white, body.theme-aqua) .pranayama-card-subtitle {
    color: #555 !important;
}
:is(body.theme-white, body.theme-aqua) .trataka-card {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}
:is(body.theme-white, body.theme-aqua) .trataka-card-title {
    color: var(--primary-color) !important;
    text-shadow: none !important;
}
:is(body.theme-white, body.theme-aqua) .asana-card,
:is(body.theme-white, body.theme-aqua) .exercise-selector .asana-card {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}
:is(body.theme-white, body.theme-aqua) .asana-card-title,
:is(body.theme-white, body.theme-aqua) .exercise-selector .asana-card-title {
    color: var(--primary-color) !important;
    text-shadow: none !important;
}
:is(body.theme-white, body.theme-aqua) .asana-card-subtitle,
:is(body.theme-white, body.theme-aqua) .exercise-selector .asana-card-subtitle {
    color: #555 !important;
}

/* Белая тема: модальное окно «История» (календарь) */
:is(body.theme-white, body.theme-aqua) .history-calendar-modal {
    background: rgba(0, 0, 0, 0.4);
}
:is(body.theme-white, body.theme-aqua) .calendar-modal-content {
    background: #fff !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
:is(body.theme-white, body.theme-aqua) .history-calendar-modal .modal-header {
    border-bottom-color: rgba(0, 0, 0, 0.1) !important;
}
:is(body.theme-white, body.theme-aqua) .history-calendar-modal .modal-title {
    color: #333 !important;
    text-shadow: none !important;
}
:is(body.theme-white, body.theme-aqua) .history-calendar-modal .modal-close {
    color: #555 !important;
}
:is(body.theme-white, body.theme-aqua) .history-calendar-modal .modal-close:hover {
    color: var(--primary-color) !important;
}
:is(body.theme-white, body.theme-aqua) .calendar-body {
    background: transparent;
}
:is(body.theme-white, body.theme-aqua) .calendar-month-title {
    color: #333 !important;
    text-shadow: none !important;
}
:is(body.theme-white, body.theme-aqua) .calendar-weekday {
    color: #555 !important;
}
:is(body.theme-white, body.theme-aqua) .calendar-nav-btn {
    background: rgba(0, 0, 0, 0.06) !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
    color: var(--primary-color) !important;
}
:is(body.theme-white, body.theme-aqua) .calendar-nav-btn:hover {
    background: rgba(201, 118, 0, 0.1) !important;
    border-color: var(--primary-color) !important;
}
:is(body.theme-white, body.theme-aqua) .calendar-nav-btn svg {
    stroke: currentColor;
}
:is(body.theme-white, body.theme-aqua) .calendar-day {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: #333 !important;
}
:is(body.theme-white, body.theme-aqua) .calendar-day.empty {
    color: #999 !important;
}
:is(body.theme-white, body.theme-aqua) .calendar-day.today {
    border-color: var(--primary-color) !important;
    background: rgba(201, 118, 0, 0.08) !important;
    color: #333 !important;
}
:is(body.theme-white, body.theme-aqua) .calendar-day.has-data {
    border-color: var(--primary-color) !important;
    background: rgba(201, 118, 0, 0.12) !important;
    color: #333 !important;
}
:is(body.theme-white, body.theme-aqua) .calendar-day.selected {
    border-color: var(--primary-color) !important;
    background: rgba(201, 118, 0, 0.18) !important;
    box-shadow: 0 0 0 2px rgba(201, 118, 0, 0.2);
    color: #333 !important;
}
:is(body.theme-white, body.theme-aqua) .calendar-day:hover:not(.empty) {
    background: rgba(201, 118, 0, 0.12) !important;
}
:is(body.theme-white, body.theme-aqua) .calendar-day .day-number {
    color: #333 !important;
}
:is(body.theme-white, body.theme-aqua) .calendar-day .day-wake {
    color: #b8860b !important;
}
:is(body.theme-white, body.theme-aqua) .calendar-day .day-bedtime {
    color: #5b4dcc !important;
}

:is(body.theme-white, body.theme-aqua) .calendar-day .day-detail {
    color: var(--primary-dark) !important;
}

/* Белая тема: модальное окно текста бхаджана (арати) */
:is(body.theme-white, body.theme-aqua) .arati-text-modal-content {
    background: #fff !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
:is(body.theme-white, body.theme-aqua) .arati-text-modal .modal-header {
    border-bottom-color: rgba(0, 0, 0, 0.1) !important;
}
:is(body.theme-white, body.theme-aqua) .arati-text-modal .modal-title {
    color: #333 !important;
    text-shadow: none !important;
}
:is(body.theme-white, body.theme-aqua) .arati-text-modal .modal-close {
    color: #555 !important;
}
:is(body.theme-white, body.theme-aqua) .arati-text-modal .modal-close:hover {
    color: var(--primary-color) !important;
}
:is(body.theme-white, body.theme-aqua) .tilaka-image-modal-content {
    background: #fff !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
:is(body.theme-white, body.theme-aqua) .tilaka-image-modal-header {
    border-bottom-color: rgba(0, 0, 0, 0.1) !important;
}
:is(body.theme-white, body.theme-aqua) .tilaka-image-modal-title {
    color: #333 !important;
}
:is(body.theme-white, body.theme-aqua) .tilaka-image-modal-close {
    color: #555 !important;
}
:is(body.theme-white, body.theme-aqua) .tilaka-image-modal-close:hover {
    color: var(--primary-color) !important;
}
:is(body.theme-white, body.theme-aqua) .tilaka-image-modal-body {
    background: #fff !important;
}
:is(body.theme-airy, body.theme-ember) .tilaka-image-modal-content {
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%) !important;
    border-color: rgba(var(--theme-accent-rgb), 0.4) !important;
}
:is(body.theme-airy, body.theme-ember) .tilaka-image-modal-header {
    border-bottom-color: rgba(var(--theme-accent-rgb), 0.25) !important;
}
:is(body.theme-airy, body.theme-ember) .tilaka-image-modal-title {
    color: var(--primary-color) !important;
}
:is(body.theme-airy, body.theme-ember) .tilaka-image-modal-close {
    color: var(--primary-color) !important;
}
:is(body.theme-airy, body.theme-ember) .tilaka-image-modal-close:hover {
    color: #6bb3ff !important;
}
:is(body.theme-airy, body.theme-ember) .tilaka-image-modal-body {
    background: rgba(26, 26, 46, 0.5) !important;
}
:is(body.theme-white, body.theme-aqua) .achaman-steps {
    color: #333 !important;
}
:is(body.theme-white, body.theme-aqua) .achaman-steps strong {
    color: var(--primary-color) !important;
}
:is(body.theme-white, body.theme-aqua) .achaman-steps em {
    color: #444 !important;
}
:is(body.theme-white, body.theme-aqua) .achaman-note {
    background: rgba(0, 0, 0, 0.06) !important;
    color: #555 !important;
}
:is(body.theme-white, body.theme-aqua) .achaman-footnote {
    color: #777 !important;
}
:is(body.theme-white, body.theme-aqua) .achaman-intro {
    color: #444 !important;
}
:is(body.theme-white, body.theme-aqua) .achaman-mantras-title {
    color: var(--primary-color) !important;
}
:is(body.theme-white, body.theme-aqua) .achaman-mantras-list {
    color: #333 !important;
}
:is(body.theme-white, body.theme-aqua) .tulasi-puja-subtitle {
    color: var(--primary-color) !important;
}
:is(body.theme-white, body.theme-aqua) .prasadam-subtitle {
    color: var(--primary-color) !important;
}
:is(body.theme-white, body.theme-aqua) .prasadam-mantra-num {
    color: var(--primary-color) !important;
}
:is(body.theme-white, body.theme-aqua) .prasadam-mantra-text {
    color: #333 !important;
}
:is(body.theme-white, body.theme-aqua) .angas-author {
    color: var(--primary-color) !important;
}
:is(body.theme-white, body.theme-aqua) .angas-section {
    color: var(--primary-color) !important;
}
:is(body.theme-white, body.theme-aqua) .angas-list {
    color: #333 !important;
}
:is(body.theme-white, body.theme-aqua) .angas-note {
    background: rgba(0, 0, 0, 0.06) !important;
    color: #555 !important;
}
:is(body.theme-white, body.theme-aqua) .angas-conclusion {
    color: #444 !important;
}
:is(body.theme-white, body.theme-aqua) .angas-intro {
    color: #444 !important;
}
:is(body.theme-white, body.theme-aqua) .angas-list li.angas-item-important {
    background: rgba(201, 118, 0, 0.12) !important;
    border-left-color: var(--primary-color) !important;
}
:is(body.theme-airy, body.theme-ember) .rituals-text-modal .achaman-note,
:is(body.theme-airy, body.theme-ember) .rituals-text-modal .angas-note,
:is(body.theme-airy, body.theme-ember) .rituals-text-modal .angas-list li.angas-item-important {
    background: rgba(var(--theme-accent-rgb), 0.15) !important;
}
:is(body.theme-airy, body.theme-ember) .rituals-text-modal .angas-list li.angas-item-important {
    border-left-color: var(--primary-color) !important;
}
:is(body.theme-white, body.theme-aqua) .arati-text-body {
    background: transparent;
}
:is(body.theme-white, body.theme-aqua) .practice-info-modal-content {
    background: #fff !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
:is(body.theme-white, body.theme-aqua) .practice-info-modal-header {
    border-bottom-color: rgba(0, 0, 0, 0.1) !important;
}
:is(body.theme-white, body.theme-aqua) .practice-info-modal-title {
    color: #333 !important;
}
:is(body.theme-white, body.theme-aqua) .practice-info-modal-close {
    background: rgba(0, 0, 0, 0.06) !important;
    color: #555 !important;
}
:is(body.theme-white, body.theme-aqua) .practice-info-modal-close:hover {
    background: rgba(0, 0, 0, 0.1) !important;
    color: var(--primary-color) !important;
}
:is(body.theme-white, body.theme-aqua) .practice-info-modal-body {
    color: #333 !important;
}
:is(body.theme-white, body.theme-aqua) .practice-info-modal-body em {
    color: var(--primary-dark) !important;
}
:is(body.theme-white, body.theme-aqua) .practice-info-modal-body strong {
    color: var(--primary-color) !important;
}
:is(body.theme-white, body.theme-aqua) .practice-info-namaparadha-footer {
    border-top-color: rgba(0, 0, 0, 0.12) !important;
}
:is(body.theme-white, body.theme-aqua) .practice-info-modal-body .practice-info-highlight-block {
    background: rgba(0, 0, 0, 0.06) !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
}
:is(body.theme-white, body.theme-aqua) .practice-info-modal-body .practice-info-highlight-block p {
    color: #333 !important;
}
body.theme-aqua .practice-info-modal-body .practice-info-highlight-block {
    background: rgba(48, 203, 186, 0.12) !important;
    border-color: rgba(48, 203, 186, 0.35) !important;
}
:is(body.theme-white, body.theme-aqua) .arati-text-number {
    color: var(--primary-color) !important;
}
:is(body.theme-white, body.theme-aqua) .arati-text-section {
    color: var(--primary-color) !important;
}
:is(body.theme-white, body.theme-aqua) .arati-text-sanskrit {
    font-weight: 700;
    color: #333 !important;
}
:is(body.theme-white, body.theme-aqua) .arati-text-translation {
    color: #333 !important;
    background: rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(0, 0, 0, 0.08);
}
:is(body.theme-white, body.theme-aqua) .arati-translation-toggle {
    color: var(--primary-color) !important;
}
:is(body.theme-white, body.theme-aqua) .arati-translation-toggle:hover {
    text-decoration: underline;
}
:is(body.theme-white, body.theme-aqua) .arati-show-all {
    color: var(--primary-color) !important;
    border-top-color: rgba(0, 0, 0, 0.12);
}
:is(body.theme-white, body.theme-aqua) .arati-show-all:hover {
    color: var(--primary-dark) !important;
}
:is(body.theme-white, body.theme-aqua) .arati-today-stats {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}
:is(body.theme-white, body.theme-aqua) .arati-stat-label {
    color: #555 !important;
}
:is(body.theme-white, body.theme-aqua) .arati-stat-value {
    color: #333 !important;
}

/* Белая тема: модальное окно подтверждения */
:is(body.theme-white, body.theme-aqua) .confirm-modal-overlay {
    background: rgba(0, 0, 0, 0.4);
}
:is(body.theme-white, body.theme-aqua) .confirm-modal {
    background: #fff !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
:is(body.theme-white, body.theme-aqua) .confirm-modal-title {
    color: #333 !important;
    text-shadow: none !important;
}
:is(body.theme-white, body.theme-aqua) .confirm-modal-text {
    color: #555 !important;
}
:is(body.theme-white, body.theme-aqua) .confirm-modal-icon {
    background: rgba(201, 118, 0, 0.12) !important;
    border-color: rgba(201, 118, 0, 0.3) !important;
    color: var(--primary-color) !important;
}
:is(body.theme-white, body.theme-aqua) .confirm-modal-icon svg {
    stroke: var(--primary-color) !important;
}
:is(body.theme-white, body.theme-aqua) .confirm-modal-btn-cancel {
    background: rgba(0, 0, 0, 0.06) !important;
    border-color: rgba(0, 0, 0, 0.2) !important;
    color: #555 !important;
}
:is(body.theme-white, body.theme-aqua) .confirm-modal-btn-cancel:hover {
    background: rgba(0, 0, 0, 0.1) !important;
    border-color: rgba(0, 0, 0, 0.3) !important;
    color: #333 !important;
}
:is(body.theme-white, body.theme-aqua) .confirm-modal-btn-confirm {
    background: rgba(201, 118, 0, 0.15) !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}
:is(body.theme-white, body.theme-aqua) .confirm-modal-btn-confirm:hover {
    background: rgba(201, 118, 0, 0.25) !important;
    border-color: var(--primary-dark) !important;
    color: var(--primary-dark) !important;
    box-shadow: 0 4px 12px rgba(201, 118, 0, 0.2);
}

/* Белая тема: общие модальные окна (Ввести время, История подъёмов на journey) */
:is(body.theme-white, body.theme-aqua) .manual-input-modal {
    background: rgba(0, 0, 0, 0.4);
}
:is(body.theme-white, body.theme-aqua) .manual-input-modal .modal-content,
:is(body.theme-white, body.theme-aqua) .modal-overlay + .modal-content {
    background: #fff !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
:is(body.theme-white, body.theme-aqua) .manual-input-modal .modal-header,
:is(body.theme-white, body.theme-aqua) .manual-input-modal .modal-title,
:is(body.theme-white, body.theme-aqua) .manual-input-modal .modal-close {
    border-bottom-color: rgba(0, 0, 0, 0.1);
    color: #333 !important;
}
:is(body.theme-white, body.theme-aqua) .manual-input-modal .modal-close:hover {
    color: var(--primary-color) !important;
}
:is(body.theme-white, body.theme-aqua) .manual-input-modal .time-label,
:is(body.theme-white, body.theme-aqua) .manual-input-modal .date-input,
:is(body.theme-white, body.theme-aqua) .manual-input-modal .time-input {
    color: #333 !important;
}
:is(body.theme-white, body.theme-aqua) .manual-input-modal .time-input,
:is(body.theme-white, body.theme-aqua) .manual-input-modal .date-input {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
    color: #333 !important;
}
:is(body.theme-white, body.theme-aqua) .manual-input-modal .time-input:focus,
:is(body.theme-white, body.theme-aqua) .manual-input-modal .date-input:focus {
    border-color: var(--primary-color) !important;
}
:is(body.theme-white, body.theme-aqua) .manual-input-modal .modal-footer {
    border-top-color: rgba(0, 0, 0, 0.1);
}
:is(body.theme-white, body.theme-aqua) .manual-input-modal .modal-cancel-btn,
:is(body.theme-white, body.theme-aqua) .manual-input-modal .modal-save-btn {
    color: #333 !important;
}
:is(body.theme-white, body.theme-aqua) .manual-input-modal .modal-cancel-btn {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(201, 118, 0, 0.35) !important;
    color: #b86a00 !important;
}
:is(body.theme-white, body.theme-aqua) .manual-input-modal .modal-cancel-btn:hover {
    background: rgba(201, 118, 0, 0.1) !important;
    border-color: rgba(201, 118, 0, 0.5) !important;
    color: #c97600 !important;
}
:is(body.theme-white, body.theme-aqua) .manual-input-modal .modal-save-btn {
    background: rgba(201, 118, 0, 0.15) !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}
:is(body.theme-white, body.theme-aqua) .manual-input-modal .modal-save-btn:hover {
    background: rgba(201, 118, 0, 0.25) !important;
    color: var(--primary-dark) !important;
}

/* Белая тема: кнопка «История» на journey */
:is(body.theme-white, body.theme-aqua) .history-btn {
    background: rgba(201, 118, 0, 0.08) !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}
:is(body.theme-white, body.theme-aqua) .history-btn:hover {
    background: rgba(201, 118, 0, 0.15) !important;
    border-color: var(--primary-dark) !important;
    color: var(--primary-dark) !important;
}
:is(body.theme-white, body.theme-aqua) .history-btn svg,
:is(body.theme-white, body.theme-aqua) .history-btn svg path,
:is(body.theme-white, body.theme-aqua) .history-btn svg circle,
:is(body.theme-white, body.theme-aqua) .history-btn svg line,
:is(body.theme-white, body.theme-aqua) .history-btn svg polygon,
:is(body.theme-white, body.theme-aqua) .history-btn svg polyline {
    stroke: var(--primary-color) !important;
    color: var(--primary-color) !important;
}
:is(body.theme-white, body.theme-aqua) .history-btn:hover svg,
:is(body.theme-white, body.theme-aqua) .history-btn:hover svg path,
:is(body.theme-white, body.theme-aqua) .history-btn:hover svg circle,
:is(body.theme-white, body.theme-aqua) .history-btn:hover svg line,
:is(body.theme-white, body.theme-aqua) .history-btn:hover svg polygon,
:is(body.theme-white, body.theme-aqua) .history-btn:hover svg polyline {
    stroke: var(--primary-dark) !important;
    color: var(--primary-dark) !important;
}

:is(body.theme-white, body.theme-aqua) .progress-reset-btn {
    background: rgba(0, 0, 0, 0.06) !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
    color: #555 !important;
}
:is(body.theme-white, body.theme-aqua) .progress-reset-btn:hover {
    background: rgba(201, 118, 0, 0.12) !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}
:is(body.theme-white, body.theme-aqua) .progress-reset-btn svg {
    stroke: currentColor;
}

body {
    background: var(--bg-dark);
    min-height: 100vh;
    min-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding: 0;
    margin: 0;
    -webkit-tap-highlight-color: transparent;
    padding-bottom: env(safe-area-inset-bottom);
    transition: background 0.3s ease;
}

.app-container {
    max-width: 100%;
    margin: 0 auto;
    background: linear-gradient(180deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
    min-height: 100vh;
    min-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    position: relative;
    /* Отступ снизу под высоту фиксированного нижнего меню */
    padding-bottom: calc(70px + env(safe-area-inset-bottom));
    transition: background 0.3s ease;
}

/* Верхняя шапка — Apple: чистый, воздушный */
.top-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) var(--space-5);
    background: transparent;
    position: relative;
    z-index: 1002;
}

/* Логотип */
.logo {
    display: flex;
    align-items: center;
    gap: 0px;
}

.logo-icon {
    flex-shrink: 0;
    padding-top: 4px;
    margin-left: -7px;
}

.logo-text {
    font-size: 16px;
    font-weight: 600;
    color: #FFD400;
    letter-spacing: 0.5px;
}

/* Бургер-меню: плавная анимация в крестик, ровное выравнивание */
.burger-menu {
    width: 30px;
    height: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 20;
    position: relative;
}

.burger-line {
    width: 100%;
    height: 2.5px;
    background: #FFD400;
    border-radius: 2px;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                top 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease,
                background 0.2s ease;
    display: block;
    position: absolute;
    left: 0;
    transform-origin: 50% 50%;
}

/* Три полоски: верх, центр, низ (все в px для плавной анимации) */
.burger-line:nth-child(1) {
    top: 7px;
}

.burger-line:nth-child(2) {
    top: 14.75px;  /* центр 32px: 14.75 + 1.25 = 16 */
}

.burger-line:nth-child(3) {
    top: 22.5px;
}

.burger-menu:hover .burger-line {
    background: #FFE14D;
}

/* Крестик: верхняя и нижняя линии в центр (16px), поворот ±45° */
.burger-menu.active .burger-line:nth-child(1) {
    top: 14.75px;
    transform: rotate(45deg);
}

.burger-menu.active .burger-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
    transition: opacity 0.2s ease, transform 0.25s ease;
}

.burger-menu.active .burger-line:nth-child(3) {
    top: 14.75px;
    transform: rotate(-45deg);
}

/* Полноэкранное меню */
.fullscreen-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fullscreen-menu.active {
    opacity: 1;
    visibility: visible;
}

.menu-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
}

.menu-close {
    width: 35px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #FFD400;
    transition: all 0.3s ease;
    z-index: 1001;
    position: relative;
    padding: 0;
}

.menu-close:hover {
    color: #FFE14D;
}

.menu-close svg {
    width: 32px;
    height: 32px;
    stroke: currentColor;
}

.menu-nav {
    position: relative;
    z-index: 1001;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 50px;
    width: 100%;
    padding: 40px 20px;
    animation: menuFadeIn 0.5s ease-out;
}

@keyframes menuFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.menu-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 15px 25px;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 15px;
}

.menu-item:hover {
    color: #FFD400;
    transform: translateY(-3px);
}

.menu-item:active {
    transform: translateY(-1px);
}

.menu-item-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}

.menu-item-icon svg {
    width: 100%;
    height: 100%;
}

.menu-item-text {
    font-size: 22px;
    font-weight: 600;
    color: inherit;
    letter-spacing: 0.5px;
}

/* Статусная строка */
.status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    font-size: 14px;
    color: #fff;
    background: transparent;
}

.status-indicators {
    display: flex;
    align-items: center;
    gap: 4px;
}

.signal-bars {
    font-size: 12px;
    letter-spacing: 2px;
}

/* Основной контент — одинаковые отступы у Джапы и Дхьяны */
.mantra-counter,
.dhyana-content {
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
}

.mantra-counter {
    flex: 1;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-height: 0;
    overflow-y: auto;
}
/* Отступ панели настроек джапы — как в режиме практик (dhyana), без избыточного отступа */
/* z-index выше count-display (10), чтобы кнопки плюс/минус всегда были кликабельны */
.mantra-counter .settings-icons-container {
    margin-bottom: 10px;
    z-index: 50;
}

/* Мантра */
.mantra-display {
    text-align: center;
    /* margin-bottom: 10px; */
    min-height: 1.2em;
    display: flex;
    height: 3rem;
    align-items: center;
    justify-content: center;
}

/* Фиксированная высота блока заголовка на Дхьяне — при ротации санскрит ↔ русский таймер не смещается */
.dhyana-content .mantra-display {
    min-height: 3rem;
    height: 3rem;
    flex-shrink: 0;
}

.mantra-text {
    font-size: 32px;
    color: #FFD400;
    font-weight: 500;
    margin: 0;
    /* margin-top: 10px; */
    /* Фиксированная высота под самый большой вариант заголовка,
       чтобы при смене языка ничего не прыгало */
    min-height: 2.2rem;
    line-height: 2.2rem;
    display: inline-block;
    vertical-align: middle;
    text-shadow: 0 2px 10px rgba(255, 212, 0, 0.4);
}

/* Кнопка добавления прочитанных кругов */
.add-circles-btn {
    width: 100%;
    max-width: 282px;
    padding: 12px 13px 14px;
    border: 2px solid #FFD400;
    border-radius: 25px;
    background: rgba(0, 0, 0, 0.2);
    color: #FFD400;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s;
}

.add-circles-btn:hover {
    background: rgba(255, 212, 0, 0.1);
}

/* Форма добавления кругов */
.add-circles-form {
    width: 100%;
    max-width: 275px;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5);
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 212, 0, 0.25);
    box-shadow: var(--shadow-sm);
}

.circles-input-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.circles-label {
    color: #fff;
    font-size: 14px;
}

.number-input-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.number-btn {
    width: 35px;
    height: 35px;
    border: 2px solid #FFD400;
    border-radius: 50%;
    background: transparent;
    color: #FFD400;
    font-size: 20px;
    cursor: pointer;
    /* display: flex; */
    justify-content: center;
    transition: all 0.3s;
    padding: 0;
}

.number-btn:hover {
    background: rgba(255, 212, 0, 0.2);
}

.number-btn:active {
    transform: scale(0.9);
}

.circles-input {
    flex: 1;
    background: transparent;
    border: 2px solid #FFD400;
    border-radius: 8px;
    padding: 8px 12px;
    color: #fff;
    font-size: 16px;
    text-align: center;
    min-width: 0;
}

.circles-input:focus {
    outline: none;
    border-color: #FFE14D;
}

.add-btn {
    width: 100%;
    padding: 12px 20px;
    border: none;
    border-radius: 25px;
    background: #FFD400;
    color: var(--on-primary);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.add-btn:hover {
    background: #FFE14D;
    transform: translateY(-2px);
}

.add-btn:active {
    transform: translateY(0);
}

/* Статистика прочитанных кругов */
.circles-stats {
    width: 100%;
    max-width: 275px;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 212, 0, 0.25);
    box-shadow: var(--shadow-sm);
}

.stats-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stats-label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
}

.stats-value {
    color: #FFD400;
    font-size: 16px;
    font-weight: 600;
}

/* Большой счетчик — z-index ниже кнопок (50), чтобы плюс/минус всегда кликабельны */
.count-display-wrapper {
    position: relative;
    width: 400px;
    height: 400px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 0;
}

/* Кнопка звукового сопровождения джапы */
.japa-audio-btn {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 212, 0, 0.15);
    border: 1.5px solid rgba(255, 212, 0, 0.4);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s;
    padding: 0;
    color: rgba(255, 255, 255, 0.7);
    z-index: 10;
}

.japa-audio-btn:hover {
    background: rgba(255, 212, 0, 0.25);
    border-color: rgba(255, 212, 0, 0.6);
    color: rgba(255, 255, 255, 0.9);
    transform: scale(1.1);
}

.japa-audio-btn:active {
    transform: scale(0.95);
}

.japa-audio-btn.active {
    background: rgba(255, 212, 0, 0.3);
    border-color: rgba(255, 212, 0, 0.7);
    color: #FFD400;
}

.japa-audio-btn svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 2;
}

:is(body.theme-airy, body.theme-ember) .japa-audio-btn {
    background: rgba(var(--theme-accent-rgb), 0.15);
    border-color: rgba(var(--theme-accent-rgb), 0.4);
    color: rgba(255, 255, 255, 0.7);
}

:is(body.theme-airy, body.theme-ember) .japa-audio-btn:hover {
    background: rgba(var(--theme-accent-rgb), 0.25);
    border-color: rgba(var(--theme-accent-rgb), 0.6);
    color: rgba(255, 255, 255, 0.9);
}

:is(body.theme-airy, body.theme-ember) .japa-audio-btn.active {
    background: rgba(var(--theme-accent-rgb), 0.3);
    border-color: rgba(var(--theme-accent-rgb), 0.7);
    color: var(--primary-color);
}

.count-display-core {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-ring-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 332px;
    height: 332px;
    pointer-events: none;
    z-index: 5;
}

.progress-ring {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.progress-ring-bg {
    fill: none;
    stroke: rgba(255, 212, 0, 0.25);
    stroke-width: 2;
}

.progress-ring-fill {
    fill: none;
    stroke: #FFE14D;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 352;
    stroke-dashoffset: 352;
    transition: stroke-dashoffset 0.25s ease-out;
}

.count-display {
    width: 280px;
    height: 280px;
    border: 3px solid #FFD400;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 10;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.count-display.tap-animation {
    animation: circlePulse 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes circlePulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.06);
    }
    100% {
        transform: scale(1);
    }
}

.count-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, transparent 48%, rgba(255, 212, 0, 0) 50%, rgba(255, 212, 0, 0.4) 55%, transparent 100%);
    opacity: 0;
    pointer-events: none;
    z-index: -1;
}

.count-glow.active {
    animation: glowPulse 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes glowPulse {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%);
        width: 280px;
        height: 280px;
    }
    15% {
        opacity: 1;
    }
    40% {
        opacity: 0.8;
        transform: translate(-50%, -50%);
        width: 450px;
        height: 450px;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%);
        width: 900px;
        height: 900px;
    }
}

.particles-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}


.minus-circle-container {
    margin-top: 25px;
    display: flex;
    justify-content: center;
}

.minus-circle-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    background: rgb(255 255 255 / 4%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    /* box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); */
}

.minus-circle-btn:hover {
    background: rgba(22, 22, 22, 0.95);
    border-color: rgba(255, 255, 255, 0.2);
}

.minus-circle-btn:active {
    transform: translateY(1px);
}

.minus-circle-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.minus-circle-icon-inner {
    width: 14px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
}

.minus-circle-text {
    color: #fff;
    white-space: nowrap;
}

.particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: #FFD400;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.8;
    box-shadow: 0 0 4px rgba(255, 212, 0, 0.6), 0 0 8px rgba(255, 212, 0, 0.4);
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 0;
}

.particle.small {
    width: 1.5px;
    height: 1.5px;
    opacity: 0.7;
}

.particle.medium {
    width: 2.5px;
    height: 2.5px;
    opacity: 0.75;
}

.particle.large {
    width: 4px;
    height: 4px;
    opacity: 0.85;
}

.big-count {
    font-size: clamp(44px, 12vw, 72px);
    font-weight: bold;
    color: #fff;
    line-height: 1;
    text-shadow: 0 2px 10px rgba(255, 212, 0, 0.4);
}

.count-ratio {
    font-size: 18px;
    color: #FFD400;
    margin-top: 10px;
}

.tap-hint {
    font-size: 13px;
    color: #fff;
    margin-top: 8px;
}

/* Страница Дхьяна — padding задан выше вместе с .mantra-counter */
.dhyana-content {
    flex: 1;
    padding-bottom: 6rem; /* 10px от нижнего меню до кнопки «Начать» */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    overflow-y: auto;
    min-height: 0;
}
/* Кнопки плюс/минус всегда поверх — z-index выше соседних блоков */
.dhyana-content .settings-icons-container {
    z-index: 50;
}
/* Верхние блоки не сжимаются; секция таймера занимает оставшееся место */
.dhyana-content > * {
    flex-shrink: 0;
}
.dhyana-content > .meditation-timer-section {
    flex: 1 1 0;
    flex-shrink: 1;
    min-height: 0;
}

.dhyana-title,
.asana-title {
    font-size: var(--font-display);
    color: #FFD400;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    letter-spacing: -0.02em;
    min-height: 1.2em;
    display: inline-block;
    text-shadow: 0 2px 8px rgba(255, 212, 0, 0.3);
}

.dhyana-grid {
    display: flex;
    flex-direction: row;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    margin-top: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.dhyana-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-3);
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 212, 0, 0.25);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.25s ease;
    transition: all 0.3s;
    flex: 1;
    min-width: 70px;
    max-width: 85px;
    /* Фиксированная высота, чтобы при переключении Чтение/Пранаяма/Тратак сетка не меняла высоту и таймер не смещался */
    min-height: 84px;
    box-sizing: border-box;
}

.dhyana-item:hover {
    background: rgba(255, 212, 0, 0.1);
    border-color: #FFD400;
    transform: translateY(-2px);
}

.dhyana-item:active {
    transform: translateY(0) scale(0.98);
}

.dhyana-item.active {
    background: rgba(255, 212, 0, 0.2);
    border-color: #FFD400;
}

.dhyana-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFD400;
    width: 32px;
    height: 32px;
}

.dhyana-icon svg {
    width: 100%;
    height: 100%;
}

.dhyana-label {
    font-size: 12px;
    /* color: #fff; */
    font-weight: 500;
    text-align: center;
}

/* Выбор режима — кастомный выпадающий список в стиле сайта */
.mode-select-wrapper {
    width: 100%;
    max-width: 300px;
    margin-top: 4px;
    margin-bottom: 2px;
    position: relative;
}
.mode-select-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    font-size: 15px;
    font-weight: 500;
    color: #FFD400;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 212, 0, 0.35);
    border-radius: 14px;
    cursor: pointer;
    box-sizing: border-box;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 212, 0, 0.06);
    transition: border-color 0.2s, background-color 0.2s;
}
.mode-select-trigger:hover {
    border-color: rgba(255, 212, 0, 0.5);
    background: rgba(255, 212, 0, 0.06);
}
.mode-select-trigger:focus {
    outline: none;
    border-color: #FFD400;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 212, 0, 0.06), 0 0 0 2px rgba(255, 212, 0, 0.2);
}
.mode-select-value {
    flex: 1;
    text-align: left;
}
.mode-select-arrow {
    flex-shrink: 0;
    color: #FFD400;
    transition: transform 0.25s ease;
}
.mode-select-wrapper.open .mode-select-arrow {
    transform: rotate(180deg);
}
/* Список опций — в стиле карточек сайта */
.mode-select-list {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 100;
    display: none;
    flex-direction: column;
    background: rgba(14, 14, 14, 0.98);
    border: 1px solid rgba(255, 212, 0, 0.35);
    border-radius: 14px;
    padding: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(255, 212, 0, 0.15), inset 0 1px 0 rgba(255, 212, 0, 0.06);
    box-sizing: border-box;
}
.mode-select-wrapper.open .mode-select-list {
    display: flex;
}
.mode-select-option {
    padding: 12px 8px;
    font-size: 15px;
    font-weight: 500;
    color: #FFD400;
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s, color 0.2s;
}
.mode-select-option:hover {
    background: rgba(255, 212, 0, 0.12);
    color: #FFE14D;
}
.mode-select-option.active {
    background: rgba(255, 212, 0, 0.2);
    color: #FFE14D;
}
.mode-select-option:first-child {
    border-radius: 10px 10px 0 0;
}
.mode-select-option:last-child {
    border-radius: 0 0 10px 10px;
}

/* Карточки для Дхьяна */
.timings-card,
.tracker-card {
    width: 100%;
    max-width: 300px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-top: var(--space-2);
    border: 1px solid rgba(255, 212, 0, 0.2);
    box-shadow: var(--shadow-sm);
}

/* Отступ снизу, чтобы панель настроек не наплывала на таймер */
.dhyana-content .tracker-card {
    margin-bottom: 1.25rem;
}

.card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
    /* padding: 15px 20px; */
    /* margin: -20px -20px 0 -20px; */
    border-radius: 15px 15px 0 0;
    transition: background 0.3s;
}

.card-header:hover {
    background: rgba(255, 212, 0, 0.1);
}

.card-header svg {
    color: #fff;
    width: 20px;
    height: 20px;
}

.card-arrow {
    transition: transform 0.3s;
    margin-left: auto;
}

.tracker-card-content {
    margin-top: 20px;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card-title {
    font-size: 15px;
    color: #fff;
    font-weight: 600;
    margin: 0;
    background: rgb(255 255 255 / 4%) !important;
}

/* Рекомендуемое время */
.timings-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.timing-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.timing-item svg {
    color: #fff;
    width: 24px;
    height: 24px;
}

.timing-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
}

.timing-time {
    font-size: 14px;
    color: #fff;
    font-weight: 500;
}

/* Трекер медитации */
.tracker-section {
    margin-bottom: 0;
}

.tracker-section:last-child {
    margin-bottom: 0;
}

.section-title {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    margin-bottom: 12px;
}

/* Кнопки длительности */
.duration-buttons {
    display: flex;
    gap: 10px;
}

.exercise-reps-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.exercise-reps-input {
    width: 80px;
    padding: 10px 12px;
    font-size: 16px;
    font-weight: 600;
    border: 2px solid rgba(0,0,0,0.12);
    border-radius: 12px;
    text-align: center;
    -moz-appearance: textfield;
}
.exercise-reps-input::-webkit-outer-spin-button,
.exercise-reps-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.exercise-reps-suffix {
    font-size: 14px;
    color: var(--text-secondary, #86868B);
}

/* Выпадающий список аудиосопровождения джапы — в стиле практик (pranayama-select) */
.japa-recording-select-wrap {
    margin-top: 8px;
}

.duration-btn {
    flex: 1;
    padding: 12px 16px;
    border: none;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    position: relative;
}

.duration-btn.active {
    background: #FFD400;
    color: var(--on-primary) !important;
}

.duration-btn.active span {
    color: #fff !important;
}

.duration-btn.active svg {
    color: #fff !important;
}

.duration-btn.locked {
    opacity: 0.6;
    cursor: not-allowed;
}

.duration-btn.locked svg {
    width: 14px;
    height: 14px;
    color: #fff;
}

.duration-btn:not(.locked):not(.active):hover {
    background: rgba(255, 212, 0, 0.2);
}

/* Кнопки звука */
.sound-buttons {
    display: flex;
    gap: 10px;
}

.sound-btn {
    flex: 1;
    padding: 12px 16px;
    border: none;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.sound-btn.active {
    background: #FFD400;
    color: var(--on-primary) !important;
}

.sound-btn.active span {
    color: #fff !important;
}

.sound-btn.active svg {
    color: #fff !important;
    stroke: #fff !important;
}

.sound-btn.locked {
    opacity: 0.6;
    cursor: not-allowed;
}

.sound-btn.locked svg {
    width: 18px;
    height: 18px;
    color: #fff;
}

.sound-btn:not(.locked):not(.active):hover {
    background: rgba(255, 212, 0, 0.2);
}

.sound-btn svg {
    width: 18px;
    height: 18px;
    color: currentColor;
    stroke: currentColor;
}

/* Кнопки режимов пранаямы */
.pranayama-buttons {
    display: flex;
    gap: 10px;
}

.pranayama-btn {
    flex: 1;
    padding: 12px 16px;
    border: none;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff !important;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
}

.pranayama-btn.active {
    background: #FFD400;
    color: var(--on-primary) !important;
}

.pranayama-btn:not(.active):hover {
    background: rgba(255, 212, 0, 0.2);
}

.pranayama-btn span {
    color: inherit !important;
}

/* Настройки пранаямы: длительность и режим друг под другом, кастомные выпадающие списки (без вылета за экран) */
.pranayama-settings-wrap .section-title {
    display: none;
}
.pranayama-settings-stack {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.pranayama-setting-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pranayama-select-label {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    letter-spacing: 0.02em;
}
/* Обёртка: относительное позиционирование для выпадающего списка */
.pranayama-select-wrap {
    position: relative;
}
/* Скрытый нативный select (значение синхронизируется с кастомным UI) */
.pranayama-select-native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    appearance: none;
}
/* Кнопка-триггер: как раньше выглядел select, одна стрелка */
.pranayama-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
    user-select: none;
}
.pranayama-select-trigger:hover {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 212, 0, 0.4);
}
.pranayama-select-trigger:focus {
    outline: none;
    border-color: #FFD400;
    box-shadow: 0 0 0 2px rgba(255, 212, 0, 0.25);
}
.pranayama-select-value {
    flex: 1;
    text-align: left;
}
.pranayama-select-arrow {
    font-size: 10px;
    opacity: 0.8;
    margin-left: 8px;
    flex-shrink: 0;
}
/* Выпадающий список: ограничен по высоте, прокрутка, не выходит за экран */
.pranayama-select-dropdown {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 4px;
    max-height: min(220px, 50vh);
    overflow-y: auto;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(28, 28, 28, 0.98);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 100;
}
.pranayama-select-dropdown.is-open {
    display: block;
}
.pranayama-select-option {
    padding: 12px 14px;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.15s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}
.pranayama-select-option:hover {
    background: rgba(255, 212, 0, 0.2);
}
.pranayama-select-option.is-selected {
    background: rgba(255, 212, 0, 0.35);
    font-weight: 500;
}

/* Светлая тема: пранаяма селекты */
:is(body.theme-white, body.theme-aqua) .pranayama-select-label {
    color: #333;
}
:is(body.theme-white, body.theme-aqua) .pranayama-select-trigger {
    border-color: rgba(0, 0, 0, 0.15);
    background: rgba(0, 0, 0, 0.05);
    color: #333;
}
:is(body.theme-white, body.theme-aqua) .pranayama-select-trigger:hover {
    background-color: rgba(0, 0, 0, 0.08);
    border-color: rgba(201, 118, 0, 0.5);
}
:is(body.theme-white, body.theme-aqua) .pranayama-select-trigger:focus {
    border-color: #c97600;
    box-shadow: 0 0 0 2px rgba(201, 118, 0, 0.2);
}
:is(body.theme-white, body.theme-aqua) .pranayama-select-arrow {
    opacity: 0.7;
    color: #333;
}
:is(body.theme-white, body.theme-aqua) .pranayama-select-dropdown {
    border-color: rgba(0, 0, 0, 0.12);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
:is(body.theme-white, body.theme-aqua) .pranayama-select-option {
    color: #333;
}
:is(body.theme-white, body.theme-aqua) .pranayama-select-option:hover {
    background: rgba(201, 118, 0, 0.15);
}
:is(body.theme-white, body.theme-aqua) .pranayama-select-option.is-selected {
    background: rgba(201, 118, 0, 0.25);
}

:is(body.theme-airy, body.theme-ember) .pranayama-select-trigger {
    border-color: rgba(var(--theme-accent-rgb), 0.35);
    background: rgba(0, 0, 0, 0.25);
}
:is(body.theme-airy, body.theme-ember) .pranayama-select-trigger:hover {
    border-color: rgba(var(--theme-accent-rgb), 0.5);
    background: rgba(var(--theme-accent-rgb), 0.08);
}
:is(body.theme-airy, body.theme-ember) .pranayama-select-trigger:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(var(--theme-accent-rgb), 0.25);
}
:is(body.theme-airy, body.theme-ember) .pranayama-select-dropdown {
    border-color: rgba(var(--theme-accent-rgb), 0.35);
    background: rgba(26, 26, 46, 0.98);
}
:is(body.theme-airy, body.theme-ember) .pranayama-select-option:hover {
    background: rgba(var(--theme-accent-rgb), 0.2);
}
:is(body.theme-airy, body.theme-ember) .pranayama-select-option.is-selected {
    background: rgba(var(--theme-accent-rgb), 0.35);
}

/* Степпер повторений для упражнений (стрелки + ввод) */
.exercise-reps-stepper {
    display: flex;
    align-items: center;
    gap: 8px;
}
.exercise-reps-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
    color: inherit;
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s;
}
.exercise-reps-btn .exercise-reps-symbol {
    display: block;
    line-height: 1;
    transform: translateY(-0.06em);
}
.exercise-reps-btn:hover {
    background: rgba(255, 212, 0, 0.25);
    border-color: rgba(255, 212, 0, 0.5);
}
.exercise-reps-input {
    width: 72px;
    height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
    color: inherit;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    -moz-appearance: textfield;
}
.exercise-reps-input::-webkit-outer-spin-button,
.exercise-reps-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
:is(body.theme-white, body.theme-aqua) .exercise-reps-btn {
    border-color: rgba(0, 0, 0, 0.15);
    background: rgba(0, 0, 0, 0.05);
    color: #333;
}
:is(body.theme-white, body.theme-aqua) .exercise-reps-btn:hover {
    background: rgba(201, 118, 0, 0.15);
    border-color: rgba(201, 118, 0, 0.4);
}
body.theme-aqua .exercise-reps-btn {
    border-color: rgba(48, 203, 186, 0.35);
    background: rgba(48, 203, 186, 0.1);
    color: #0A7E80;
}
body.theme-aqua .exercise-reps-btn:hover {
    background: rgba(48, 203, 186, 0.2);
    border-color: rgba(48, 203, 186, 0.5);
    color: #30CBBA;
}
body.theme-aqua .exercise-reps-input {
    border-color: rgba(48, 203, 186, 0.35);
    background: rgba(48, 203, 186, 0.06);
    color: #333;
}
body.theme-white .exercise-reps-input {
    border-color: rgba(0, 0, 0, 0.15);
    background: rgba(0, 0, 0, 0.05);
    color: #333;
}
:is(body.theme-airy, body.theme-ember) .exercise-reps-btn {
    border-color: rgba(var(--theme-accent-rgb), 0.4);
    background: rgba(var(--theme-accent-rgb), 0.15);
    color: #8cc5ff;
}
:is(body.theme-airy, body.theme-ember) .exercise-reps-btn:hover {
    background: rgba(var(--theme-accent-rgb), 0.25);
    border-color: rgba(var(--theme-accent-rgb), 0.6);
    color: var(--primary-color);
}
:is(body.theme-airy, body.theme-ember) .exercise-reps-input {
    border-color: rgba(var(--theme-accent-rgb), 0.4);
    background: rgba(var(--theme-accent-rgb), 0.1);
    color: #fff;
}

/* Таймер медитации — на Дхьяне занимает оставшееся место, таймер по центру, кнопка «Начать» внизу */
.meditation-timer-section {
    width: 100%;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2px;
}
/* Секция таймера на странице Дхьяна: растягивается, таймер по центру, кнопки внизу */
.dhyana-content .meditation-timer-section {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.dhyana-content .meditation-timer-section .timer-display {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    width: 100%;
    min-width: 0;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.dhyana-content .meditation-timer-section .start-buttons {
    flex-shrink: 0;
    margin-top: auto; /* Кнопка «Начать» всегда прилипает к низу секции (в т.ч. Упражнения/Йога/Для глаз) */
}

.start-buttons {
    display: flex;
    gap: 10px;
    width: 100%;
    margin-top: 12px;
}

.start-buttons .start-meditation-btn,
.start-buttons .reset-meditation-btn {
    flex: 1;
}

.rotating-title {
    transition: opacity 0.25s ease;
    display: inline-block;
    /* Фиксированная высота под самый большой вариант заголовка,
       чтобы при смене языка ничего не прыгало */
    min-height: 2.2rem;
    line-height: 2.2rem;
    vertical-align: middle;
}

.rotating-title.fade-out {
    opacity: 0;
}

/* Русский/английский вариант заголовка — только размер */
.rotating-title.title-rus {
    font-size: 1.75rem;
}
/* Фиксированный отступ только для заголовка Статистики — чтобы не прыгал при смене санскрит/русский */
.profile-title.rotating-title.title-rus {
    margin-bottom: 0.75rem;
}

/* Блок таймера — фиксированные размеры, без сдвига после загрузки */
.timer-display {
    text-align: center;
    min-height: 140px;
    height: 140px;
    width: 100%;
    display: flex;
    padding: 1.5rem 0;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.timer-display-standard {
    min-height: 140px;
    height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}

.timer-value {
    font-size: 5rem;
    font-weight: bold;
    color: #fff;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: 2px;
    text-shadow: 0 2px 8px rgba(255, 212, 0, 0.3);
}

.timer-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin: 10px 0 0;
    background: none !important;
}

/* Выбор книги (режим «Чтение») — стрелки фиксированы по краям, центр под обложку и название */
.book-selector {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    justify-items: center;
    gap: 12px;
    width: 100%;
    flex: 1 0 100%;
    min-height: 140px;
    padding: 0.5rem 0;
    box-sizing: border-box;
}

.book-nav-btn {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 212, 0, 0.2);
    border: 2px solid rgba(255, 212, 0, 0.5);
    border-radius: 50%;
    color: #FFD400;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.book-nav-btn:hover {
    background: rgba(255, 212, 0, 0.35);
    transform: scale(1.05);
}

.book-nav-btn:active {
    transform: scale(0.98);
}

.book-nav-btn:disabled,
.book-nav-btn[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

:is(body.theme-airy, body.theme-ember) .book-nav-btn {
    background: rgba(var(--theme-accent-rgb), 0.2);
    border-color: rgba(var(--theme-accent-rgb), 0.5);
    color: var(--primary-color);
}

:is(body.theme-airy, body.theme-ember) .book-nav-btn:hover:not(:disabled) {
    background: rgba(var(--theme-accent-rgb), 0.35);
    border-color: rgba(var(--theme-accent-rgb), 0.7);
    color: #6bb3ff;
}

:is(body.theme-airy, body.theme-ember) .book-nav-btn svg {
    stroke: currentColor;
}

.book-cover-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 120px;
    width: 100%;
    max-width: 100%;
}

.book-cover {
    width: 120px;
    min-width: 120px;
    height: 170px;
    max-width: 45vw;
    flex-shrink: 0;
    background: linear-gradient(145deg, #1A1A1A 0%, #101010 100%);
    border: 2px solid rgba(255, 212, 0, 0.4);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
    overflow: hidden;
}

/* Когда обложка — картинка: без отступов и фона, только изображение на весь прямоугольник */
.book-cover:has(img) {
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
}

.book-cover .book-cover-img,
.book-cover img {
    width: 90%;
    height: 95%;
    object-fit: cover;
    display: block;
}

.book-cover-title {
    font-size: 14px;
    font-weight: 600;
    color: #FFD400;
    text-align: center;
    line-height: 1.3;
}

.book-selector-title {
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    text-align: center;
    line-height: 1.3;
}

/* Выбор пранаямы (по аналогии с выбором книги) */
.pranayama-selector {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    justify-items: center;
    gap: 12px;
    width: 100%;
    flex: 1 0 100%;
    min-height: 140px;
    padding: 0.5rem 0;
    box-sizing: border-box;
}

.pranayama-card-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 120px;
    width: 100%;
    max-width: 100%;
}

.pranayama-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    padding: 16px 20px;
    background: linear-gradient(145deg, #1A1A1A 0%, #101010 100%);
    border: 2px solid rgba(255, 212, 0, 0.4);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.pranayama-card-preview {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
    margin: 8px 0;
}

.pranayama-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pranayama-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #FFD400;
    text-align: center;
    line-height: 1.3;
}

.pranayama-card-subtitle {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 212, 0, 0.85);
    text-align: center;
    line-height: 1.3;
}

:is(body.theme-airy, body.theme-ember) .pranayama-card {
    background: linear-gradient(145deg, rgba(26, 26, 46, 0.9) 0%, rgba(22, 33, 62, 0.9) 100%);
    border-color: rgba(var(--theme-accent-rgb), 0.4);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

:is(body.theme-airy, body.theme-ember) .pranayama-card-title {
    color: var(--primary-color);
}

:is(body.theme-airy, body.theme-ember) .pranayama-card-subtitle {
    color: rgba(var(--theme-accent-rgb), 0.85);
}

/* Выбор объекта тратаки (по аналогии с пранаямой и книгами) */
.trataka-selector {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    justify-items: center;
    gap: 12px;
    width: 100%;
    flex: 1 0 100%;
    min-height: 140px;
    padding: 0.5rem 0;
    box-sizing: border-box;
}

.trataka-card-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 120px;
    width: 100%;
    max-width: 100%;
}

.trataka-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    padding: 16px 20px;
    background: linear-gradient(145deg, #1A1A1A 0%, #101010 100%);
    border: 2px solid rgba(255, 212, 0, 0.4);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.trataka-card-preview {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
}

.trataka-preview-dot {
    display: flex;
    align-items: center;
    justify-content: center;
}

.trataka-preview-dot-inner {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #000;
}

/* Инверсия: превью — белая точка на чёрном */
.trataka-preview-dot-inverted {
    background: #000;
}

.trataka-preview-dot-inner-inverted {
    background: #fff;
}

body.theme-default .trataka-preview-dot-inner {
    background: #FFD400;
}

.trataka-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.trataka-card-title {
    font-size: 16px;
    font-weight: 700;
    color: #FFD400;
    text-align: center;
    line-height: 1.3;
}

:is(body.theme-airy, body.theme-ember) .trataka-card {
    background: linear-gradient(145deg, rgba(26, 26, 46, 0.9) 0%, rgba(22, 33, 62, 0.9) 100%);
    border-color: rgba(var(--theme-accent-rgb), 0.4);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

:is(body.theme-airy, body.theme-ember) .trataka-card-title {
    color: var(--primary-color);
}

:is(body.theme-airy, body.theme-ember) .trataka-preview-dot-inner {
    background: #4a9eff;
}

/* Выбор асаны (режим «Асана» — по аналогии с пранаямой и тратакой) */
.asana-selector {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    justify-items: center;
    gap: 12px;
    width: 100%;
    flex: 1 0 100%;
    min-height: 140px;
    padding: 0.5rem 0;
    box-sizing: border-box;
}

.asana-card-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 120px;
    width: 100%;
    max-width: 100%;
}

.asana-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    padding: 16px 20px;
    background: linear-gradient(145deg, #1A1A1A 0%, #101010 100%);
    border: 2px solid rgba(255, 212, 0, 0.4);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.asana-card-preview {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
    margin: 8px 0;
}

.asana-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.asana-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #FFD400;
    text-align: center;
    line-height: 1.3;
}

.asana-card-subtitle {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 212, 0, 0.85);
    text-align: center;
    line-height: 1.3;
    max-width: 260px;
}

:is(body.theme-airy, body.theme-ember) .asana-card {
    background: linear-gradient(145deg, rgba(26, 26, 46, 0.9) 0%, rgba(22, 33, 62, 0.9) 100%);
    border-color: rgba(var(--theme-accent-rgb), 0.4);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

:is(body.theme-airy, body.theme-ember) .asana-card-title {
    color: var(--primary-color);
}

:is(body.theme-airy, body.theme-ember) .asana-card-subtitle {
    color: rgba(var(--theme-accent-rgb), 0.85);
}

/* Полноэкранная читалка — верстка и шрифты как PocketBook */
.reader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    background: #f5f0e8;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.reader-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    padding-top: calc(10px + env(safe-area-inset-top));
    padding-right: calc(16px + env(safe-area-inset-right));
    background: #f5f0e8;
    border-bottom: 1px solid #e0d8cc;
    min-height: 48px;
    position: relative;
}

.reader-title {
    font-size: 16px;
    font-weight: 600;
    color: #121212 !important;
    margin: 0;
    text-align: center;
}

.reader-close {
    position: absolute;
    top: 50%;
    right: calc(16px + env(safe-area-inset-right));
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: #000 !important;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.reader-close:hover {
    background: rgba(0, 0, 0, 0.06);
}

.reader-close svg {
    flex-shrink: 0;
    stroke: #000;
}

/* Колонка текста: боковые отступы в два раза меньше, как в PocketBook */
.reader-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 28px 5% 40px;
    padding-left: calc(5% + env(safe-area-inset-left));
    padding-right: calc(5% + env(safe-area-inset-right));
    padding-bottom: calc(40px + env(safe-area-inset-bottom));
    max-width: 36em;
    width: 100%;
    margin: 0 auto;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    line-height: 1.55;
    color: #121212;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    box-sizing: border-box;
}

/* Все элементы контента книги — в ширину, без горизонтального вылезания */
.reader-content * {
    max-width: 100%;
    box-sizing: border-box;
}

.reader-content img {
    max-width: 100%;
    height: auto;
}

.reader-content pre,
.reader-content code,
.reader-content p,
.reader-content h1,
.reader-content h2,
.reader-content h3,
.reader-content div,
.reader-content span {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

.reader-content h2 {
    font-size: 1.25em;
    font-weight: 700;
    margin: 1.8em 0 0.6em;
    color: #121212 !important;
    text-align: left;
    line-height: 1.35;
}

.reader-content p {
    margin: 0 0 0.75em;
    text-indent: 0;
    color: #000 !important;
    text-align: justify;
}

.reader-content p.verse,
.reader-content .verse-title,
.reader-content .verse-sanskrit,
.reader-content .verse-number,
.reader-content .verse-translation,
#readerContent .verse-title,
#readerContent .verse-sanskrit,
#readerContent .verse-number,
#readerContent .verse-translation {
    font-weight: 700 !important;
}

/* Бхагавад-гита: по умолчанию весь текст обычный, жирный только у заголовка стиха, санскрита и полного перевода */
#readerContent.reader-content-gita p,
#readerContent.reader-content-gita h2,
#readerContent.reader-content-gita h3 {
    font-weight: 400 !important;
}
#readerContent.reader-content-gita .verse-title,
#readerContent.reader-content-gita .verse-sanskrit,
#readerContent.reader-content-gita .verse-number,
#readerContent.reader-content-gita .verse-translation {
    font-weight: 700 !important;
}

/* После правил выше — комментарий всегда обычный (перебивает verse-sanskrit и инлайн 700) */
#readerContent .reader-commentary,
#readerContent .reader-commentary *,
#readerContent.reader-content-gita .reader-commentary,
#readerContent.reader-content-gita .reader-commentary * {
    font-weight: 400 !important;
}

.reader-content .reader-loading {
    text-align: center;
    padding: 2em;
    color: var(--primary-color);
}

.reader-content .reader-fallback-hint {
    font-size: 0.95em;
    margin: 1em 0;
    text-align: left;
}
.reader-content .reader-fallback-hint code {
    background: rgba(0,0,0,0.08);
    padding: 0.15em 0.4em;
    border-radius: 4px;
    font-size: 0.9em;
}
.reader-content .reader-select-file-btn {
    background: var(--primary-color);
    color: var(--on-primary);
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 1em;
    cursor: pointer;
}
.reader-content .reader-select-file-btn:hover {
    opacity: 0.9;
}

.reader-content p:first-child,
.reader-content h2 + p {
    text-indent: 0;
    color: #000;
}

.reader-content .verse-num {
    font-weight: 600;
    color: #121212;
    margin-right: 0.25em;
}

/* Панель навигации по главам (появляется по тапу) */
.reader-chapter-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
    padding-left: calc(20px + env(safe-area-inset-left));
    padding-right: calc(20px + env(safe-area-inset-right));
    background: rgba(245, 240, 232, 0.98);
    border-top: 1px solid #e0d8cc;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.06);
}

.reader-chapter-mode {
    min-width: 68px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.16);
    background: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    font-weight: 500;
    color: #121212;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
}

.reader-chapter-mode:active {
    background: rgba(0, 0, 0, 0.06);
}

.reader-chapter-prev,
.reader-chapter-next {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(18, 18, 18, 0.08);
    border: none;
    border-radius: 50%;
    color: #000 !important;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
}

.reader-chapter-prev:hover,
.reader-chapter-next:hover {
    background: rgba(18, 18, 18, 0.14);
}

.reader-chapter-prev:disabled,
.reader-chapter-next:disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.reader-chapter-prev svg,
.reader-chapter-next svg {
    display: block;
    stroke: #000;
}

:is(body.theme-airy, body.theme-ember) .reader-chapter-prev,
:is(body.theme-airy, body.theme-ember) .reader-chapter-next {
    background: rgba(var(--theme-accent-rgb), 0.15);
    color: #2d7dd2;
}

:is(body.theme-airy, body.theme-ember) .reader-chapter-prev:hover:not(:disabled),
:is(body.theme-airy, body.theme-ember) .reader-chapter-next:hover:not(:disabled) {
    background: rgba(var(--theme-accent-rgb), 0.25);
    color: var(--primary-color);
}

:is(body.theme-airy, body.theme-ember) .reader-chapter-prev svg,
:is(body.theme-airy, body.theme-ember) .reader-chapter-next svg {
    stroke: currentColor;
}

.reader-chapter-title {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    color: #000 !important;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Таймер пранаямы: основной строго по центру, общий (00:00) — вплотную к правому краю контейнера */
.timer-display-pranayama {
    text-align: center;
    margin: 0;
    padding: 0;
    min-height: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    position: relative;
}

.pranayama-phase-timer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 0;
    padding-bottom: 0;
    flex: 0 0 auto;
}

.pranayama-timer-value {
    font-size: 5rem;
    font-weight: bold;
    color: #fff;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: 2px;
    text-shadow: 0 2px 8px rgba(255, 212, 0, 0.3);
    margin-bottom: 0;
}

.pranayama-phase-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 0;
    margin-bottom: 0;
}

/* Общий таймер пранаямы — вплотную к правому краю контейнера, чуть выше центра */
.pranayama-total-timer {
    position: absolute;
    right: 0;
    top: -1.65em;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.78);
}

.pranayama-total-time {
    font-variant-numeric: tabular-nums;
}

:is(body.theme-airy, body.theme-ember) .pranayama-timer-value {
    color: #fff;
    text-shadow: 0 2px 8px rgba(var(--theme-accent-rgb), 0.3);
}

:is(body.theme-airy, body.theme-ember) .pranayama-phase-label {
    color: rgba(255, 255, 255, 0.8);
}

:is(body.theme-airy, body.theme-ember) .pranayama-total-time {
    color: rgba(255, 255, 255, 0.78);
}

.start-meditation-btn {
    width: 100%;
    padding: 16px 22px;
    border: none;
    border-radius: 25px;
    background: #FFD400;
    color: var(--on-primary) !important;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s;
    text-transform: uppercase;
}

.start-meditation-btn span {
    color: #fff !important;
}

.start-meditation-btn:hover {
    background: #FFE14D;
    transform: translateY(-2px);
}

.start-meditation-btn:active {
    transform: translateY(0);
}

.start-meditation-btn svg {
    width: 20px;
    height: 20px;
    color: #fff;
    stroke: #fff;
}

.reset-meditation-btn {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s;
    text-transform: uppercase;
}

.reset-meditation-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
}

.reset-meditation-btn:active {
    transform: translateY(1px);
}

/* Прогресс за сегодня — фиксированная минимальная высота, чтобы не было сдвига таймера при обновлении текста */
.progress-card {
    width: 100%;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    margin-top: 0;
    margin-bottom: 0;
    border: 1px solid rgba(255, 212, 0, 0.2);
    box-shadow: var(--shadow-sm);
    position: relative;
    min-height: 56px;
}

.progress-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
    margin-top: 0;
    padding-top: 0;
}

.progress-stats-single-line .progress-text {
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.progress-card-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
}

.progress-reset-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 212, 0, 0.15);
    border: 1.5px solid rgba(255, 212, 0, 0.4);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    padding: 0;
    color: rgba(255, 212, 0, 0.8);
}

.progress-add-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 212, 0, 0.15);
    border: 1.5px solid rgba(255, 212, 0, 0.4);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    padding: 0;
    color: rgba(255, 212, 0, 0.8);
}

.progress-add-btn:hover {
    background: rgba(255, 212, 0, 0.25);
    border-color: rgba(255, 212, 0, 0.6);
    color: #FFD400;
    transform: scale(1.1);
}

.progress-add-btn:active {
    transform: scale(0.95);
}

.progress-add-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2.5;
}

/* Ряд кнопок Дхьяна: минус, плюс, настройки + выбор режима в одну линию */
.dhyana-buttons-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 300px;
    /* margin-top: 4px; */
    margin-bottom: 5px;
    flex-wrap: nowrap;
    position: relative;
    z-index: 50;
    overflow-anchor: none;
}
.dhyana-buttons-row .settings-icons-container {
    flex-shrink: 0;
    margin-bottom: 0;
    width: auto;
    z-index: 50;
    align-items: center;
    transform: translateZ(0);
    backface-visibility: hidden;
}
.dhyana-buttons-row .mode-select-wrapper.mode-select-in-row {
    flex: 1;
    min-width: 0;
    margin-top: 0;
    margin-bottom: 0;
}
.dhyana-buttons-row .mode-select-in-row .mode-select-trigger {
    height: 40px;
    padding: 0 10px 0 12px;
    border-radius: 10px;
}
.dhyana-buttons-row .mode-select-in-row .mode-select-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Контейнер иконок настроек */
.settings-icons-container {
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: flex-start;
    /* margin-top: 5px; */
    margin-bottom: 40px;
    width: 100%;
    padding-left: 0;
    position: relative;
    z-index: 1;
}

.settings-icon-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 212, 0, 0.15);
    border: 1.5px solid rgba(255, 212, 0, 0.4);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
    padding: 0;
    color: rgba(255, 212, 0, 0.8);
}

.settings-icon-btn:hover {
    background: rgba(255, 212, 0, 0.25);
    border-color: rgba(255, 212, 0, 0.6);
    color: #FFD400;
    transform: scale(1.1);
}

.settings-icon-btn:active {
    transform: scale(0.95);
}

.settings-icon-btn.settings-inactive,
.settings-icon-btn:disabled {
    cursor: not-allowed;
    opacity: 0.4;
    background: rgba(255, 212, 0, 0.06) !important;
    border-color: rgba(255, 212, 0, 0.2) !important;
    color: rgba(255, 212, 0, 0.4) !important;
}
.settings-icon-btn.settings-inactive:hover,
.settings-icon-btn:disabled:hover {
    transform: none;
    background: rgba(255, 212, 0, 0.06) !important;
    border-color: rgba(255, 212, 0, 0.2) !important;
}

.settings-icon-btn.active {
    background: rgba(255, 212, 0, 0.3);
    border-color: rgba(255, 212, 0, 0.7);
    color: #FFD400;
    transform: none;
}

.settings-icon-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2;
}

:is(body.theme-airy, body.theme-ember) .progress-add-btn {
    background: rgba(var(--theme-accent-rgb), 0.15);
    border-color: rgba(var(--theme-accent-rgb), 0.4);
    color: rgba(var(--theme-accent-rgb), 0.8);
}

:is(body.theme-airy, body.theme-ember) .progress-add-btn:hover {
    background: rgba(var(--theme-accent-rgb), 0.25);
    border-color: rgba(var(--theme-accent-rgb), 0.6);
    color: var(--primary-color);
}

:is(body.theme-airy, body.theme-ember) .settings-icon-btn {
    background: rgba(var(--theme-accent-rgb), 0.15);
    border-color: rgba(var(--theme-accent-rgb), 0.4);
    color: rgba(var(--theme-accent-rgb), 0.8);
}

:is(body.theme-airy, body.theme-ember) .settings-icon-btn:hover {
    background: rgba(var(--theme-accent-rgb), 0.25);
    border-color: rgba(var(--theme-accent-rgb), 0.6);
    color: var(--primary-color);
}

:is(body.theme-airy, body.theme-ember) .settings-icon-btn.active {
    background: rgba(var(--theme-accent-rgb), 0.3);
    border-color: rgba(var(--theme-accent-rgb), 0.7);
    color: var(--primary-color);
}

:is(body.theme-airy, body.theme-ember) .settings-icon-btn.settings-inactive,
:is(body.theme-airy, body.theme-ember) .settings-icon-btn:disabled {
    background: rgba(var(--theme-accent-rgb), 0.06) !important;
    border-color: rgba(var(--theme-accent-rgb), 0.2) !important;
    color: rgba(var(--theme-accent-rgb), 0.4) !important;
}

:is(body.theme-airy, body.theme-ember) .settings-icon-btn.settings-inactive:hover,
:is(body.theme-airy, body.theme-ember) .settings-icon-btn:disabled:hover {
    background: rgba(var(--theme-accent-rgb), 0.06) !important;
    border-color: rgba(var(--theme-accent-rgb), 0.2) !important;
}

.progress-reset-btn:hover {
    background: rgba(255, 212, 0, 0.25);
    border-color: rgba(255, 212, 0, 0.6);
    color: #FFD400;
    transform: scale(1.1);
}

.progress-reset-btn:active {
    transform: scale(0.95);
}

.progress-reset-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2.5;
}

.progress-add-btn:hover {
    background: rgba(255, 212, 0, 0.25);
    border-color: rgba(255, 212, 0, 0.6);
    color: #FFD400;
    transform: scale(1.1);
}

.progress-add-btn:active {
    transform: scale(0.95);
}

.progress-add-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2.5;
}

.progress-card .card-title {
    font-size: 15px;
    color: #fff;
    font-weight: 600;
    margin: 0;
}

.progress-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 0;
    margin-top: 0;
}

.progress-text {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    /* line-height: 1.5; */
}

/* Модальное окно подтверждения */
.confirm-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: var(--space-5);
    animation: overlayFadeIn 0.2s ease-out;
}

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

.confirm-modal {
    background: linear-gradient(180deg, rgba(14, 14, 14, 0.95) 0%, rgba(20, 20, 20, 0.95) 100%);
    border: 2px solid rgba(255, 212, 0, 0.4);
    border-radius: 20px;
    padding: 30px 25px;
    max-width: min(400px, 92vw);
    width: 100%;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 212, 0, 0.2);
    animation: modalFadeIn 0.25s ease-out;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.confirm-modal-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 212, 0, 0.15);
    border: 2px solid rgba(255, 212, 0, 0.4);
    border-radius: 50%;
    color: #FFD400;
}

.confirm-modal-title {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 15px 0;
    text-shadow: 0 2px 8px rgba(255, 212, 0, 0.3);
}

.confirm-modal-text {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
    margin: 0 0 25px 0;
}

.confirm-modal-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.confirm-modal-btn {
    flex: 1;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    border: 2px solid;
}

.confirm-modal-btn-cancel {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.8);
}

.confirm-modal-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}

.confirm-modal-btn-confirm {
    background: rgba(255, 212, 0, 0.2);
    border-color: rgba(255, 212, 0, 0.6);
    color: #FFD400;
}

.confirm-modal-btn-confirm:hover {
    background: rgba(255, 212, 0, 0.3);
    border-color: rgba(255, 212, 0, 0.8);
    color: #FFD400;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 212, 0, 0.3);
}

.confirm-modal-btn:active {
    transform: translateY(0) scale(0.98);
}

:is(body.theme-airy, body.theme-ember) .confirm-modal {
    background: linear-gradient(180deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.95) 100%);
    border-color: rgba(var(--theme-accent-rgb), 0.4);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(var(--theme-accent-rgb), 0.2);
}

:is(body.theme-airy, body.theme-ember) .confirm-modal-icon {
    background: rgba(var(--theme-accent-rgb), 0.15);
    border-color: rgba(var(--theme-accent-rgb), 0.4);
    color: var(--primary-color);
}

:is(body.theme-airy, body.theme-ember) .confirm-modal-title {
    text-shadow: 0 2px 8px rgba(var(--theme-accent-rgb), 0.3);
}

:is(body.theme-airy, body.theme-ember) .confirm-modal-btn-confirm {
    background: rgba(var(--theme-accent-rgb), 0.2);
    border-color: rgba(var(--theme-accent-rgb), 0.6);
    color: var(--primary-color);
}

:is(body.theme-airy, body.theme-ember) .confirm-modal-btn-confirm:hover {
    background: rgba(var(--theme-accent-rgb), 0.3);
    border-color: rgba(var(--theme-accent-rgb), 0.8);
    color: #6bb3ff;
    box-shadow: 0 4px 12px rgba(var(--theme-accent-rgb), 0.3);
}

/* Кнопка «i» — инструкция по практике (рядом с настройками) */
.practice-info-btn .practice-info-btn-text {
    font-size: 16px;
    font-weight: 700;
    font-style: italic;
    line-height: 1;
}

/* Модальное окно с инструкцией по практике */
.practice-info-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1002;
    padding: var(--space-5);
    overflow-y: auto;
    animation: overlayFadeIn 0.2s ease-out;
}

.practice-info-modal-content {
    background: linear-gradient(180deg, #1A1A1A 0%, #121212 100%);
    border-radius: 20px;
    width: 100%;
    max-width: min(500px, 92vw);
    max-height: 90vh;
    border: 2px solid rgba(255, 212, 0, 0.35);
    overflow: hidden;
    animation: modalFadeIn 0.3s ease-out;
    display: flex;
    flex-direction: column;
}

.practice-info-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 212, 0, 0.2);
}

.practice-info-modal-title {
    font-size: 18px;
    font-weight: 600;
    color: #FFD400;
    margin: 0;
}

.practice-info-modal-close {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 212, 0, 0.2);
    color: #FFD400;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.practice-info-modal-close:hover {
    background: rgba(255, 212, 0, 0.35);
    color: #FFE14D;
}

.practice-info-modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}
.practice-info-modal-body p { margin: 0 0 12px 0; }
.practice-info-modal-body p:last-child { margin-bottom: 0; }
.practice-info-modal-body em { color: rgba(255, 212, 0, 0.95); font-style: italic; }
.practice-info-modal-body strong { color: #FFD400; }
.practice-info-modal-body ul { margin: 12px 0; padding-left: 22px; }
.practice-info-modal-body ol { margin: 12px 0; padding-left: 22px; }
.practice-info-modal-body li { margin-bottom: 6px; }
.practice-info-modal-body .practice-info-highlight-block {
    display: block;
    margin: 16px 0;
    padding: 16px;
    background: rgba(255, 212, 0, 0.15);
    border: 1px solid rgba(255, 212, 0, 0.45);
    border-radius: 8px;
}
.practice-info-modal-body .practice-info-highlight-block p {
    margin: 0;
}
.practice-info-namaparadha-footer { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255, 212, 0, 0.25); font-size: 14px; }

/* Модальное окно 10 оскорблений: убираем лишний отступ внизу */
.namaparadhas-modal-body { flex: 0 1 auto; gap: 12px; }
.namaparadhas-modal-body .practice-info-namaparadha-footer { margin-top: 12px; padding-top: 12px; margin-bottom: 0; }


:is(body.theme-airy, body.theme-ember) .practice-info-modal-content {
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%) !important;
    border-color: rgba(var(--theme-accent-rgb), 0.35);
}
:is(body.theme-airy, body.theme-ember) .practice-info-modal-body {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.9) !important;
}
:is(body.theme-airy, body.theme-ember) .practice-info-modal-body p,
:is(body.theme-airy, body.theme-ember) .practice-info-modal-body li {
    color: rgba(255, 255, 255, 0.9) !important;
}
:is(body.theme-airy, body.theme-ember) .practice-info-namaparadha-footer {
    border-top-color: rgba(var(--theme-accent-rgb), 0.25) !important;
}
:is(body.theme-airy, body.theme-ember) .practice-info-modal-body .practice-info-highlight-block {
    background: rgba(var(--theme-accent-rgb), 0.15) !important;
    border-color: rgba(var(--theme-accent-rgb), 0.45) !important;
}
:is(body.theme-airy, body.theme-ember) .practice-info-modal-body .practice-info-highlight-block p {
    color: rgba(255, 255, 255, 0.9) !important;
}
:is(body.theme-airy, body.theme-ember) .practice-info-modal-header {
    border-bottom-color: rgba(var(--theme-accent-rgb), 0.2);
}
:is(body.theme-airy, body.theme-ember) .practice-info-modal-title {
    color: var(--primary-color);
}
:is(body.theme-airy, body.theme-ember) .practice-info-modal-close {
    background: rgba(var(--theme-accent-rgb), 0.2);
    color: var(--primary-color);
}
:is(body.theme-airy, body.theme-ember) .practice-info-modal-close:hover {
    background: rgba(var(--theme-accent-rgb), 0.35);
    color: #6bb3ff;
}

/* Недавние сессии */
.sessions-card {
    width: 100%;
    max-width: 300px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    padding: 20px;
    margin-top: 10px;
    margin-bottom: 20px;
}

.sessions-empty {
    padding: 20px 0;
    text-align: center;
}

.sessions-empty p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
    margin: 0;
}

/* Режим чтения */
.reading-add-section {
    width: 100%;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    /* margin-bottom: 18px; */
}

.add-reading-time-btn {
    width: 100%;
    padding: 12px 13px 14px;
    border: 2px solid #FFD400;
    border-radius: 25px;
    background: rgba(0, 0, 0, 0.2);
    color: #FFD400 !important;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s;
    margin-bottom: 1rem;
}

.add-reading-time-btn:focus {
    outline: none;
}

.add-reading-time-btn:hover {
    background: rgba(255, 212, 0, 0.1);
    transform: translateY(-2px);
}

.add-reading-time-btn:active {
    transform: translateY(0);
}

.add-reading-time-btn svg {
    width: 20px;
    height: 20px;
    color: #FFD400;
    stroke: #FFD400;
}

.add-reading-time-btn span {
    color: #FFD400 !important;
}

/* Форма добавления времени чтения */
.add-reading-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    border: 1px solid rgba(255, 212, 0, 0.3);
}

.reading-input-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.reading-label {
    color: #fff;
    font-size: 14px;
}

.reading-time-input {
    flex: 1;
    background: transparent;
    border: 2px solid #FFD400;
    border-radius: 8px;
    padding: 8px 12px;
    color: #fff !important;
    font-size: 16px;
    text-align: center;
    min-width: 0;
    width: 80px;
}

.reading-time-input:focus {
    outline: none;
    border-color: #FFE14D;
}

.reading-unit {
    color: #fff;
    font-size: 16px;
    padding: 0 10px;
}

.reading-input-group .number-input-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Нижняя навигация — Apple Tab Bar: glassmorphism */
.bottom-nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: var(--space-2) 0;
    padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom));
    background: rgba(16, 16, 16, 0.75);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid rgba(255, 212, 0, 0.15);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 100;
    flex-shrink: 0;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 10px 12px;
    transition: all 0.3s;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
}

.nav-item.active {
    color: #FFD400;
}

.nav-item.active .nav-icon {
    opacity: 1;
    transform: scale(1.1);
}

.nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: all 0.3s;
    width: 24px;
    height: 24px;
}

.nav-icon svg {
    width: 100%;
    height: 100%;
    color: inherit;
}

.nav-icon-stars {
    width: 44px;
    display: flex;
    gap: 2px;
    align-items: center;
    justify-content: center;
}

.nav-icon-stars svg {
    width: 20px;
    height: 20px;
}

.nav-item.active .nav-icon {
    opacity: 1;
}

.nav-label {
    font-size: 13px;
    text-transform: capitalize;
}

.nav-item:hover {
    color: #FFD400;
}

.nav-item:hover .nav-icon {
    opacity: 1;
}

/* Breakpoint 600px — переход к планшетному интерфейсу */
@media (min-width: 600px) {
    .confirm-modal { max-width: 450px; }
    .practice-info-modal-content { max-width: 500px; }
    .manual-input-modal .modal-content,
    .arati-text-modal .modal-content { max-width: 480px; }
}

/* Адаптивность */
@media (max-width: 500px) {
    .mantra-text {
        font-size: 28px;
        min-height: 2.2rem;
        line-height: 2.2rem;
    }
    
    .count-display-wrapper {
        width: min(310px, 85vw);
        height: min(350px, 96vw);
        margin-top: 20px;
        margin-bottom: calc(20px + env(safe-area-inset-bottom));
    }
    
    .count-display {
        width: min(300px, 80vw);
        height: min(300px, 80vw);
    }
    
    .progress-ring-wrapper {
        width: min(332px, 88vw) !important;
        height: min(332px, 88vw) !important;
    }
    
    .big-count {
        font-size: clamp(40px, 14vw, 58px);
    }
    
    .dhyana-title {
        font-size: 28px;
        line-height: 1.2;
        min-height: 1.2em;
    }
    
    .dhyana-grid {
        gap: 10px;
        max-width: 100%;
        justify-content: space-between;
        display: flex;
        /* padding: 0 10px; */
    }
    
    .dhyana-item {
        padding: 12px 8px;
        min-width: 64px;
        max-width: 144px;
        min-height: 84px;
        box-sizing: border-box;
    }
    
    .dhyana-icon {
        width: 28px;
        height: 28px;
    }
    
    .dhyana-label {
        font-size: 12px;
    }
    
    .timings-card,
    .tracker-card {
        max-width: 100%;
        padding: 15px;
        border: 2px solid rgba(255, 212, 0, 0.3);
    }
    
    .timings-grid {
        gap: 10px;
    }
    
    .timing-time {
        font-size: 12px;
    }
    
    .duration-buttons,
    .sound-buttons {
        gap: 8px;
    }
    
    .duration-btn,
    .sound-btn {
        padding: 10px 12px;
        font-size: 12px;
        margin-bottom: 10px;
    }
    
    .bottom-nav {
        padding: 6px 8px;
        padding-bottom: calc(6px + env(safe-area-inset-bottom));
    }
    
    .mantra-counter {
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }
    
    .nav-item {
        padding: 8px 10px;
    }
    
    .nav-icon {
        width: 22px;
        height: 22px;
    }
    
    .nav-icon-stars {
        width: 40px;
    }
    
    .nav-icon-stars svg {
        width: 18px;
        height: 18px;
    }
    
    .nav-label {
        font-size: 12px;
    }
}

/* Адаптивность для планшетов */
@media (min-width: 768px) {
    .app-container {
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
    }
    
    .mantra-counter {
        padding: 0 24px 24px;
    }
    
    .count-display-wrapper {
        width: min(420px, 70vw);
        height: min(420px, 70vw);
        margin-top: var(--space-5);
    }
    
    .count-display {
        width: 340px;
        height: 340px;
    }
    
    .progress-ring-wrapper {
        width: 360px !important;
        height: 360px !important;
    }
    
    .big-count {
        font-size: 56px;
    }
    
    .progress-card,
    .tracker-card {
        max-width: 100%;
    }
    
    .bottom-nav {
        right: auto;
        width: 100%;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
        left: 50%;
        transform: translateX(-50%);
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    }
    
    .japa-recording-select-wrap {
        max-width: 100%;
    }
    
    .dhyana-content {
        padding: 0 24px;
    }
    
    .arati-cards {
        width: 100%;
    }
    
    .confirm-modal { max-width: 500px; }
    .practice-info-modal-content { max-width: 500px; }
    .manual-input-modal .modal-content,
    .arati-text-modal .modal-content { max-width: 500px; }
}

/* Десктоп: уменьшаем масштаб, чтобы всё влезало на экран */
@media (min-width: 1024px) {
    .app-container {
        max-width: 480px;
    }
    
    .top-header {
        padding: var(--space-2) var(--space-3);
    }
    
    .logo-text {
        font-size: 14px;
    }
    
    .dhyana-title,
    .asana-title,
    .journey-title,
    .arati-title,
    .rituals-title,
    .profile-title,
    .settings-title {
        font-size: 22px;
    }
    
    .dhyana-content {
        padding: 0 16px;
        padding-bottom: 5rem;
        gap: 8px;
    }
    
    .dhyana-item {
        padding: var(--space-2) var(--space-2);
        min-width: 60px;
        max-width: 72px;
        min-height: 70px;
    }
    
    .dhyana-icon {
        width: 26px;
        height: 26px;
    }
    
    .dhyana-item .dhyana-label {
        font-size: 11px;
    }
    
    .journey-content {
        padding: var(--space-3);
        gap: var(--space-2);
        padding-bottom: 5rem;
    }
    
    .asana-card {
        padding: 12px;
    }
    
    .asana-card-title {
        font-size: 14px;
    }
    
    .asana-card-subtitle {
        font-size: 10px;
    }
    
    .asana-card-preview {
        width: 64px;
        height: 64px;
    }
    
    .bottom-nav {
        max-width: 480px;
        padding: 4px 0;
        padding-bottom: calc(4px + env(safe-area-inset-bottom));
    }
    
    .nav-item {
        padding: 6px 8px;
    }
    
    .nav-icon {
        width: 20px;
        height: 20px;
    }
    
    .nav-icon-stars {
        width: 36px;
    }
    
    .nav-icon-stars svg {
        width: 16px;
        height: 16px;
    }
    
    .nav-label {
        font-size: 11px;
    }
    
    .tracker-card,
    .progress-card {
        padding: 14px;
    }
    
    .stat-title {
        font-size: 18px;
    }
    
    .app-container {
        padding-bottom: calc(58px + env(safe-area-inset-bottom));
    }
    
    .start-meditation-btn,
    .start-asana-btn {
        padding: 12px 18px;
        font-size: 13px;
    }
    
    .start-meditation-btn svg,
    .start-asana-btn svg {
        width: 18px;
        height: 18px;
    }
    
    .timings-card,
    .tracker-card {
        padding: 12px;
    }
    
    .dhyana-today-stat-item {
        margin-top: 8px;
    }
    
    .asana-selector .book-nav-btn svg {
        width: 22px;
        height: 22px;
    }
}

/* Страница Подъём (Journey) */
.journey-content {
    flex: 1;
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    min-height: 0;
    overflow: hidden;
    padding-bottom: 6rem;
}
.journey-content > .journey-title {
    flex-shrink: 0;
}

.journey-title {
    font-size: var(--font-display);
    color: #FFD400;
    font-weight: 600;
    height: 3rem;
    margin: 0;
    text-align: center;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 8px rgba(255, 212, 0, 0.3);
}

/* Карточка статуса */
.sleep-status-card {
    width: 100%;
    max-width: 300px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    border: 2px solid rgba(255, 212, 0, 0.3);
}

.status-icon {
    width: 64px;
    height: 64px;
    color: #FFD400;
    display: flex;
    align-items: center;
    justify-content: center;
}

.status-info {
    text-align: center;
}

.status-title {
    font-size: 22px;
    color: #fff;
    font-weight: 600;
    margin: 0 0 5px 0;
}

.status-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

/* Кнопки действий */
.action-buttons {
    width: 100%;
    /* max-width: 332px; */
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.action-btn {
    flex: 1;
    padding: 10px 12px;
    border: 2px solid #FFD400;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.2);
    color: #FFD400;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all 0.3s;
}

.action-btn:hover {
    background: rgba(255, 212, 0, 0.1);
    transform: translateY(-2px);
}

.action-btn:active {
    transform: translateY(0);
}

.action-btn svg {
    width: 20px;
    height: 20px;
}

.action-btn.active {
    background: #FFD400;
    color: var(--on-primary);
    border-color: #FFD400;
}

/* Карточка статистики сегодня — не сжимается */
.journey-content .today-stats-card {
    flex-shrink: 0;
}
.today-stats-card {
    width: 100%;
    background: rgba(0, 0, 0, 0.25);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    border: 1px solid rgba(255, 212, 0, 0.2);
    box-shadow: var(--shadow-md);
}

.today-stats-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
}

.dhyana-today-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin-top: 12px;
    padding: 6px 8px;
}

.dhyana-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 12px;
}

.dhyana-today-stats .dhyana-history-link {
    display: inline-block;
    margin-top: 10px;
    padding: 6px 14px;
    background: rgba(255, 212, 0, 0.15);
    border: 1px solid rgba(255, 212, 0, 0.4);
    border-radius: 10px;
    color: #FFD400;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
}

.dhyana-history-link:hover {
    background: rgba(255, 212, 0, 0.25);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 15px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
/* Выравнивание значений в блоке «Сегодня» — столбец «Сон» не съезжает вверх */
.today-stats-card .stat-item {
    align-items: center;
    justify-content: flex-start;
}
/* У нередактируемого столбца (Сон) тот же вертикальный отступ, что у Подъём/Отбой */
.today-stats-card .stat-item:not(.stat-item--editable) {
    padding: 6px 8px;
    box-sizing: border-box;
}
.today-stats-card .stat-value {
    min-height: 1.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.stat-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

.stat-value {
    font-size: 18px;
    color: #FFD400;
    font-weight: 600;
}

/* Подъём: клик по значению Подъём/Отбой открывает ввод времени */
.today-stats-card .stat-item--editable {
    cursor: pointer;
    border-radius: 10px;
    padding: 6px 8px;
    transition: background 0.2s;
}
.today-stats-card .stat-item--editable:hover {
    background: rgba(255, 212, 0, 0.1);
}
.today-stats-card .stat-item--editable:active {
    background: rgba(255, 212, 0, 0.15);
}
.today-stats-card .stat-value--editable {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
}

/* Недельная статистика — на странице Подъём растягивается на оставшуюся высоту */
.journey-content .weekly-stats-card {
    flex: 1 1 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.journey-content .weekly-stats-card .weekly-chart {
    flex: 1;
    min-height: auto;
}
.weekly-stats-card {
    width: 100%;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    border: 1px solid rgba(255, 212, 0, 0.25);
}

.weekly-chart {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 8px;
    min-height: 96px;
    padding: 10px 0 0;
    overflow-x: hidden;
}

.week-day {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-height: 80px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s;
}

.week-day.selected {
    background: rgba(255, 212, 0, 0.1);
    border-radius: 8px;
    padding: 2px;
}

.day-bar {
    width: 100%;
    background: rgba(255, 212, 0, 0.3);
    border-radius: 5px 5px 0 0;
    min-height: 10px;
    transition: all 0.3s;
}

.day-bar.has-data {
    background: #FFD400;
}

.day-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.78);
    margin-top: 5px;
    font-weight: 500;
}

.week-day.today .day-label {
    color: #FFD400;
    font-weight: 600;
}

.day-time {
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    min-width: 0;
    position: absolute;
    left: 0;
    right: 0;
}

/* Подъём сверху (жёлтый), отбой снизу (синий) — только иконки, время нейтральным */
.day-wake-time {
    top: -28px;
    color: inherit;
}

.day-wake-time .day-time-icon,
.day-wake-time svg {
    color: #FFE14D !important;
    stroke: #FFE14D !important;
}

.day-wake-time .day-time-text {
    color: rgba(255, 255, 255, 0.75);
}

.day-bedtime-time {
    top: -18px;
    color: inherit;
}

.day-bedtime-time .day-time-icon,
.day-bedtime-time svg {
    color: #8866ff !important;
    stroke: #8866ff !important;
}

.day-bedtime-time .day-time-text {
    color: rgba(255, 255, 255, 0.75);
}

/* История календаря — только иконки в цвете */
.calendar-day .day-wake {
    color: inherit;
}

.calendar-day .day-wake .day-time-icon,
.calendar-day .day-wake svg {
    color: #FFE14D !important;
    stroke: #FFE14D !important;
}

.calendar-day .day-wake .day-time-text {
    color: rgba(255, 255, 255, 0.75);
}

.calendar-day .day-bedtime {
    color: inherit;
}

.calendar-day .day-bedtime .day-time-icon,
.calendar-day .day-bedtime svg {
    color: #8866ff !important;
    stroke: #8866ff !important;
}

.calendar-day .day-bedtime .day-time-text {
    color: rgba(255, 255, 255, 0.75);
}

.day-time-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

.day-time-icon {
    flex-shrink: 0;
}

.week-day {
    min-height: 57px;
}

.weekly-summary {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 0px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 212, 0, 0.2);
}

.summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.summary-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

.summary-value {
    font-size: 15px;
    color: #FFD400;
    font-weight: 600;
}

/* Кнопка истории */
/* Кнопка «История» прижата к низу экрана с отступом 6rem (3rem на малых экранах) */
.journey-content .history-btn {
    flex-shrink: 0;
    margin-top: 10px;
    margin-bottom: 0;
}
.history-btn {
    width: 100%;
    max-width: 300px;
    margin-top: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border: 1px solid rgba(255, 212, 0, 0.4);
    border-radius: var(--radius-lg);
    background: rgba(0, 0, 0, 0.2);
    color: #FFD400;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s;
}

.history-btn:hover {
    background: rgba(255, 212, 0, 0.1);
    transform: translateY(-2px);
}

.history-btn:active {
    transform: translateY(0);
}

.history-btn svg {
    width: 20px;
    height: 20px;
}

/* Модальное окно с календарём */
.history-calendar-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    padding: 20px;
    overflow-y: auto;
}

.calendar-modal-content {
    background: #1A1A1A;
    border-radius: 20px;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    border: 2px solid rgba(255, 212, 0, 0.3);
    overflow: hidden;
    animation: modalSlideIn 0.3s ease-out;
    display: flex;
    flex-direction: column;
}

.calendar-body {
    padding: 14px;
    overflow-y: auto;
    flex: 1;
}

.calendar-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    gap: 10px;
}

.calendar-nav-btn {
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 212, 0, 0.3);
    border-radius: 10px;
    color: #FFD400;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
}

.calendar-nav-btn:hover {
    background: rgba(255, 212, 0, 0.1);
    border-color: #FFD400;
}

.calendar-month-title {
    font-size: 16px;
    color: #fff;
    font-weight: 600;
    margin: 0;
    flex: 1;
    text-align: center;
}

.calendar-grid {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    margin-bottom: 4px;
}

.calendar-weekday {
    text-align: center;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
    padding: 4px 0;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    min-height: 200px;
}

.calendar-day {
    aspect-ratio: 1;
    min-height: 47px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 212, 0, 0.2);
    border-radius: 8px;
    padding: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    font-size: 11px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s;
    overflow: hidden;
}

.calendar-day.empty {
    opacity: 0.3;
    cursor: default;
}

.calendar-day.today {
    border-color: #FFD400;
    border-width: 2px;
    background: rgba(255, 212, 0, 0.1);
}

.calendar-day.has-data {
    border-color: #FFD400;
    background: rgba(255, 212, 0, 0.15);
}

.calendar-day.selected {
    border-color: #FFD400;
    border-width: 2px;
    background: rgba(255, 212, 0, 0.25);
    box-shadow: 0 0 10px rgba(255, 212, 0, 0.3);
}

.calendar-day:not(.empty) {
    cursor: pointer;
}
.calendar-day:hover:not(.empty) {
    background: rgba(255, 212, 0, 0.2);
    transform: scale(1.05);
}

.day-number {
    font-size: 13px;
    color: #fff;
    font-weight: 600;
    line-height: 1.2;
}

/* История: подъём/отбой — только иконки в цвете, время нейтральным */
.day-wake {
    font-size: 8px;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    min-width: 0;
    text-align: center;
    line-height: 1.1;
}

.day-wake .day-time-icon,
.day-wake svg {
    color: #FFE14D !important;
    stroke: #FFE14D !important;
}

.day-wake .day-time-text {
    color: rgba(255, 255, 255, 0.75);
}

.day-bedtime {
    font-size: 8px;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    min-width: 0;
    text-align: center;
    line-height: 1.1;
}

.day-bedtime .day-time-icon,
.day-bedtime svg {
    color: #8866ff !important;
    stroke: #8866ff !important;
}

.day-bedtime .day-time-text {
    color: rgba(255, 255, 255, 0.75);
}

.calendar-day-time {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.calendar-day-time .day-time-icon {
    flex-shrink: 0;
}

.day-detail {
    display: block;
    font-size: 8px;
    color: #FFE14D;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    text-align: center;
    line-height: 1.1;
    flex-shrink: 1;
}

/* Кнопки ручного ввода */
.manual-input-buttons {
    width: 100%;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.manual-btn {
    width: 100%;
    padding: 12px 20px;
    border: 2px solid rgba(255, 212, 0, 0.5);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.1);
    color: rgba(255, 212, 0, 0.8);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s;
}

.manual-btn:hover {
    background: rgba(255, 212, 0, 0.1);
    border-color: #FFD400;
    color: #FFD400;
}

.manual-btn:active {
    transform: translateY(1px);
}

.manual-btn svg {
    width: 16px;
    height: 16px;
}

/* Модальное окно для ручного ввода */
.manual-input-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: var(--space-5);
    animation: overlayFadeIn 0.2s ease-out;
}

.modal-content {
    background: #1A1A1A;
    border-radius: 20px;
    width: 100%;
    max-width: min(400px, 92vw);
    border: 2px solid rgba(255, 212, 0, 0.3);
    overflow: hidden;
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid rgba(255, 212, 0, 0.2);
}

.modal-title {
    font-size: 18px;
    color: #fff;
    font-weight: 600;
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s;
}

.modal-close:hover {
    color: #FFD400;
}

.modal-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.time-input-group,
.date-input-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.time-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.time-input,
.date-input {
    width: 100%;
    padding: 12px 15px;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 212, 0, 0.3);
    border-radius: 10px;
    color: #fff;
    font-size: 16px;
    transition: border-color 0.3s;
}

.time-input:focus,
.date-input:focus {
    outline: none;
    border-color: #FFD400;
}

:is(body.theme-airy, body.theme-ember) .time-input,
:is(body.theme-airy, body.theme-ember) .date-input {
    border-color: rgba(var(--theme-accent-rgb), 0.4);
    background: rgba(0, 0, 0, 0.25);
}
:is(body.theme-airy, body.theme-ember) .time-input:focus,
:is(body.theme-airy, body.theme-ember) .date-input:focus {
    border-color: var(--primary-color);
}
:is(body.theme-airy, body.theme-ember) .manual-input-modal .modal-content {
    border-color: rgba(var(--theme-accent-rgb), 0.35);
}
:is(body.theme-airy, body.theme-ember) .manual-input-modal .modal-header {
    border-bottom-color: rgba(var(--theme-accent-rgb), 0.2);
}
:is(body.theme-airy, body.theme-ember) .manual-input-modal .modal-close:hover {
    color: var(--primary-color);
}

.time-input::-webkit-calendar-picker-indicator,
.date-input::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

.modal-footer {
    display: flex;
    gap: 10px;
    padding: 20px;
    border-top: 1px solid rgba(255, 212, 0, 0.2);
}

.modal-cancel-btn,
.modal-save-btn {
    flex: 1;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.modal-cancel-btn {
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 212, 0, 0.3);
    color: rgba(255, 255, 255, 0.7);
}

.modal-cancel-btn:hover {
    background: rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 212, 0, 0.5);
    color: #fff;
}

.modal-save-btn {
    background: #FFD400;
    border: 2px solid #FFD400;
    color: var(--on-primary);
}

.modal-save-btn:hover {
    background: #FFE14D;
    border-color: #FFE14D;
}

/* Окно редактирования дня в профиле — стили в духе сайта */
.profile-edit-modal .modal-content {
    background: var(--card-bg, rgba(26, 26, 26, 0.98));
    border: 1px solid rgba(255, 212, 0, 0.25);
    border-radius: var(--radius-lg);
}

.profile-edit-modal .modal-header {
    border-bottom: 1px solid rgba(255, 212, 0, 0.2);
    padding: var(--space-4) var(--space-5);
}

.profile-edit-modal .modal-title {
    color: var(--text-primary, #fff);
    font-size: 18px;
}

.profile-edit-modal .modal-body {
    padding: var(--space-5);
    gap: var(--space-4);
}

/* Кнопка «Отмена» в модалке профиля — заметный outline-стиль */
.profile-edit-modal .modal-cancel-btn {
    background: rgba(255, 212, 0, 0.12);
    border-color: rgba(255, 212, 0, 0.5);
    color: rgba(255, 255, 255, 0.95);
}

.profile-edit-modal .modal-cancel-btn:hover {
    background: rgba(255, 212, 0, 0.2);
    border-color: rgba(255, 212, 0, 0.65);
    color: #fff;
}

.profile-edit-summary {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: var(--space-2);
}

.profile-edit-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.profile-edit-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.profile-edit-item-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    flex-shrink: 0;
    min-width: 0;
}

.profile-edit-item-input {
    width: 80px;
    min-width: 80px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 212, 0, 0.3);
    border-radius: 10px;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
}

.profile-edit-item-input:focus {
    outline: none;
    border-color: #FFD400;
    box-shadow: 0 0 0 2px rgba(255, 212, 0, 0.2);
}

.profile-edit-item-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.profile-edit-item-unit {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    min-width: 36px;
}

:is(body.theme-white, body.theme-aqua) .profile-edit-item-unit {
    color: rgba(0, 0, 0, 0.45);
}

.profile-edit-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 20px;
    margin-top: var(--space-4);
    background: linear-gradient(135deg, rgba(255, 212, 0, 0.15) 0%, rgba(255, 212, 0, 0.08) 100%);
    border: 1px solid rgba(255, 212, 0, 0.4);
    border-radius: 12px;
    color: #FFE14D;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(255, 212, 0, 0.1);
}

.profile-edit-add-btn:hover {
    background: linear-gradient(135deg, rgba(255, 212, 0, 0.22) 0%, rgba(255, 212, 0, 0.12) 100%);
    border-color: rgba(255, 212, 0, 0.6);
    color: #FFE97A;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 212, 0, 0.2);
}

.profile-edit-add-btn:active {
    transform: translateY(0);
}

.profile-edit-add-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.95;
}

.profile-edit-add-btn-text {
    letter-spacing: 0.02em;
}

/* Модальное окно выбора практики для добавления */
.profile-add-practice-modal .profile-add-practice-modal-content {
    max-width: min(360px, 92vw);
}

.profile-add-practice-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.profile-add-practice-option {
    display: block;
    width: 100%;
    padding: 14px 18px;
    text-align: left;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 212, 0, 0.2);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.95);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.profile-add-practice-option:hover {
    background: rgba(255, 212, 0, 0.15);
    border-color: rgba(255, 212, 0, 0.4);
}

:is(body.theme-white, body.theme-aqua) .profile-edit-add-btn {
    background: linear-gradient(135deg, rgba(201, 118, 0, 0.12) 0%, rgba(201, 118, 0, 0.06) 100%);
    border-color: rgba(201, 118, 0, 0.35);
    color: #b86a00;
}

:is(body.theme-white, body.theme-aqua) .profile-edit-add-btn:hover {
    background: linear-gradient(135deg, rgba(201, 118, 0, 0.18) 0%, rgba(201, 118, 0, 0.1) 100%);
    border-color: rgba(201, 118, 0, 0.5);
    color: #c97600;
}

:is(body.theme-white, body.theme-aqua) .profile-add-practice-option {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.12);
    color: #333;
}

:is(body.theme-white, body.theme-aqua) .profile-add-practice-option:hover {
    background: rgba(201, 118, 0, 0.1);
    border-color: rgba(201, 118, 0, 0.3);
}

:is(body.theme-airy, body.theme-ember) .profile-edit-add-btn {
    background: linear-gradient(135deg, rgba(var(--theme-accent-rgb), 0.15) 0%, rgba(var(--theme-accent-rgb), 0.08) 100%);
    border-color: rgba(var(--theme-accent-rgb), 0.45);
    color: #7ab8ff;
}

:is(body.theme-airy, body.theme-ember) .profile-edit-add-btn:hover {
    background: linear-gradient(135deg, rgba(var(--theme-accent-rgb), 0.22) 0%, rgba(var(--theme-accent-rgb), 0.12) 100%);
    border-color: rgba(var(--theme-accent-rgb), 0.6);
    color: #a3d0ff;
    box-shadow: 0 4px 12px rgba(var(--theme-accent-rgb), 0.2);
}

:is(body.theme-airy, body.theme-ember) .profile-add-practice-option:hover {
    background: rgba(var(--theme-accent-rgb), 0.12);
    border-color: rgba(var(--theme-accent-rgb), 0.35);
}

body.theme-aqua .profile-edit-add-btn {
    background: linear-gradient(135deg, rgba(48, 203, 186, 0.15) 0%, rgba(48, 203, 186, 0.08) 100%);
    border-color: rgba(48, 203, 186, 0.45);
    color: var(--primary-color);
}

body.theme-aqua .profile-edit-add-btn:hover {
    background: linear-gradient(135deg, rgba(48, 203, 186, 0.22) 0%, rgba(48, 203, 186, 0.12) 100%);
    border-color: rgba(48, 203, 186, 0.65);
}

body.theme-aqua .profile-add-practice-option:hover {
    background: rgba(48, 203, 186, 0.12);
    border-color: rgba(48, 203, 186, 0.35);
}

:is(body.theme-white, body.theme-aqua) .profile-edit-summary {
    color: rgba(0, 0, 0, 0.5);
}

:is(body.theme-white, body.theme-aqua) .profile-edit-item-label {
    color: rgba(0, 0, 0, 0.75);
}

:is(body.theme-white, body.theme-aqua) .profile-edit-modal .modal-content {
    border-color: rgba(0, 0, 0, 0.12) !important;
}

:is(body.theme-white, body.theme-aqua) .profile-edit-modal .modal-header {
    border-bottom-color: rgba(0, 0, 0, 0.1) !important;
}

:is(body.theme-white, body.theme-aqua) .profile-add-practice-modal .modal-content {
    border-color: rgba(0, 0, 0, 0.12) !important;
}

:is(body.theme-white, body.theme-aqua) .profile-add-practice-modal .modal-header {
    border-bottom-color: rgba(0, 0, 0, 0.1) !important;
}

:is(body.theme-white, body.theme-aqua) .profile-edit-item-input {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.15);
    color: #333;
}

:is(body.theme-white, body.theme-aqua) .profile-edit-item-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
}

:is(body.theme-airy, body.theme-ember) .profile-edit-modal .modal-content {
    border-color: rgba(var(--theme-accent-rgb), 0.35);
}

:is(body.theme-airy, body.theme-ember) .profile-edit-modal .modal-header {
    border-bottom-color: rgba(var(--theme-accent-rgb), 0.2);
}

:is(body.theme-airy, body.theme-ember) .profile-edit-item-input {
    border-color: rgba(var(--theme-accent-rgb), 0.4);
}

:is(body.theme-airy, body.theme-ember) .profile-edit-item-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(var(--theme-accent-rgb), 0.2);
}

:is(body.theme-airy, body.theme-ember) .profile-add-practice-modal .modal-content {
    border-color: rgba(var(--theme-accent-rgb), 0.35);
}

:is(body.theme-airy, body.theme-ember) .profile-add-practice-modal .modal-header {
    border-bottom-color: rgba(var(--theme-accent-rgb), 0.2);
}

:is(body.theme-airy, body.theme-ember) .profile-add-practice-option {
    border-color: rgba(var(--theme-accent-rgb), 0.25);
}

:is(body.theme-airy, body.theme-ember) .profile-edit-modal .modal-cancel-btn {
    background: rgba(var(--theme-accent-rgb), 0.12);
    border-color: rgba(var(--theme-accent-rgb), 0.5);
    color: rgba(255, 255, 255, 0.95);
}

:is(body.theme-airy, body.theme-ember) .profile-edit-modal .modal-cancel-btn:hover {
    background: rgba(var(--theme-accent-rgb), 0.2);
    border-color: rgba(var(--theme-accent-rgb), 0.65);
    color: #fff;
}

body.theme-aqua .profile-edit-modal .modal-cancel-btn {
    background: rgba(48, 203, 186, 0.12);
    border-color: rgba(48, 203, 186, 0.5);
    color: var(--primary-color);
}

body.theme-aqua .profile-edit-modal .modal-cancel-btn:hover {
    background: rgba(48, 203, 186, 0.2);
    border-color: rgba(48, 203, 186, 0.65);
}

body.theme-aqua .profile-edit-modal .modal-content {
    border-color: rgba(48, 203, 186, 0.35);
}

body.theme-aqua .profile-edit-modal .modal-header {
    border-bottom-color: rgba(48, 203, 186, 0.2);
}

body.theme-aqua .profile-add-practice-modal .modal-content {
    border-color: rgba(48, 203, 186, 0.35);
}

body.theme-aqua .profile-add-practice-modal .modal-header {
    border-bottom-color: rgba(48, 203, 186, 0.2);
}

body.theme-aqua .profile-add-practice-option {
    border-color: rgba(48, 203, 186, 0.3);
}

body.theme-aqua .profile-edit-item-input {
    border-color: rgba(48, 203, 186, 0.4);
}

body.theme-aqua .profile-edit-item-input:focus {
    border-color: var(--primary-color);
}

/* Страница Ритуалы */
.rituals-content {
    flex: 1;
    padding: 20px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 19px;
    overflow-y: auto;
    min-height: 0;
}

.rituals-title {
    font-size: var(--font-display);
    color: #FFD400;
    font-weight: 600;
    margin: 0;
    height: 3rem;
    text-align: center;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 8px rgba(255, 212, 0, 0.3);
}

.rituals-cards {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rituals-cards-extra {
    margin-top: 0;
}

.rituals-card {
    pointer-events: none;
    opacity: 0.85;
}

.rituals-card-clickable {
    pointer-events: auto;
    opacity: 1;
}

.rituals-hint {
    font-size: var(--font-sm);
    color: rgba(255, 212, 0, 0.7);
    text-align: center;
    margin-top: 8px;
    width: 100%;
}

:is(body.theme-airy, body.theme-ember) .rituals-title { color: var(--primary-color); text-shadow: 0 2px 8px rgba(var(--theme-accent-rgb), 0.3); }
:is(body.theme-airy, body.theme-ember) .rituals-hint { color: rgba(255, 255, 255, 0.6); }
body.theme-white .rituals-title,
body.theme-aqua .rituals-title { color: var(--primary-color); text-shadow: none; }
body.theme-white .rituals-hint,
body.theme-aqua .rituals-hint { color: rgba(0, 0, 0, 0.5); }

/* Страница Арати */
.arati-content {
    flex: 1;
    padding: 20px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: space-between; */
    gap: 19px;
    overflow-y: auto;
    min-height: 0;
}

.arati-title {
    font-size: var(--font-display);
    color: #FFD400;
    font-weight: 600;
    margin: 0;
    height: 3rem;
    text-align: center;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 8px rgba(255, 212, 0, 0.3);
}

/* Карточки арати */
.arati-cards {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.arati-show-all {
    display: inline-block;
    margin-top: calc(var(--space-4) / 2);
    margin-bottom: calc(var(--space-2) / 2);
    padding-top: calc(var(--space-4) / 2);
    border-top: 1px solid rgba(255, 212, 0, 0.25);
    font-size: var(--font-sm);
    color: rgba(255, 212, 0, 0.9);
    text-decoration: none;
    cursor: pointer;
    align-self: center;
    width: 100%;
    text-align: center;
}

.arati-show-all:hover {
    text-decoration: underline;
}

:is(body.theme-airy, body.theme-ember) .arati-show-all {
    border-top-color: rgba(var(--theme-accent-rgb), 0.35);
    color: rgba(255, 255, 255, 0.9);
}

:is(body.theme-airy, body.theme-ember) .arati-show-all:hover {
    color: var(--primary-color);
}

.arati-cards-extra {
    margin-top: 0;
}

.arati-card {
    width: 100%;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    border: 1px solid rgba(255, 212, 0, 0.25);
    box-shadow: var(--shadow-sm);
    transition: all 0.25s ease;
    cursor: pointer;
}

.arati-card.arati-done {
    border-color: #FFD400;
    background: rgba(255, 212, 0, 0.1);
}

.arati-card.arati-not-done {
    border-color: rgba(255, 212, 0, 0.5);
    opacity: 0.7;
}

.arati-card-simple {
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    border: 2px solid rgba(255, 212, 0, 0.3);
    background: rgba(0, 0, 0, 0.2);
    padding: 13px;
    border-radius: 15px;
    width: 100%;
    color: inherit;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.arati-card-simple:hover {
    border-color: rgba(255, 212, 0, 0.6);
}

.arati-card-simple:focus,
.arati-card-simple:focus-visible,
.arati-card-simple:active {
    outline: none !important;
    box-shadow: none !important;
}

/* Убираем пунктирную обводку фокуса у всех элементов внутри карточек бхаджанов */
.arati-cards button,
.arati-cards button:focus,
.arati-cards button:focus-visible,
.arati-cards button:active,
.arati-cards button *,
.arati-cards .arati-name,
.arati-cards .arati-dot,
.arati-cards .arati-show-all,
.arati-cards .arati-show-all:focus,
.arati-cards .arati-show-all:focus-visible {
    outline: none !important;
    outline-width: 0 !important;
    outline-offset: 0 !important;
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
}

.arati-card-simple .arati-header {
    margin-bottom: 0;
}

.arati-card-simple .arati-name {
    flex: 1;
    margin: 0;
}

.arati-time {
    font-size: 13px;
    line-height: 1.2;
    opacity: 0.8;
    color: inherit;
    white-space: nowrap;
    flex-shrink: 0;
    max-width: 95px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.arati-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.35);
    transition: background 0.3s;
}

.arati-dot.opened {
    background: #22c55e;
}

.arati-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    pointer-events: none;
}

.arati-header * {
    pointer-events: auto;
}

.arati-name {
    font-size: 15px;
    color: #fff;
    font-weight: 600;
    margin: 0;
}

.arati-status {
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
}

.status-indicator.done {
    background: #FFD400;
    box-shadow: 0 0 8px rgba(255, 212, 0, 0.6);
}

.status-indicator.not-done {
    background: #ff4444;
    box-shadow: 0 0 8px rgba(255, 68, 68, 0.6);
}

.status-text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

.arati-actions {
    display: flex;
    gap: 10px;
    pointer-events: none;
    margin-top: 15px;
}

.arati-actions * {
    pointer-events: auto;
}

.arati-btn {
    flex: 1;
    padding: 10px 5px;
    border: 2px solid rgba(255, 212, 0, 0.5);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
    color: rgba(255, 212, 0, 0.8);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    transition: all 0.3s;
    position: relative;
}

.arati-btn span {
    position: relative;
    z-index: 1;
}

.arati-btn svg {
    position: relative;
    z-index: 1;
}

.arati-btn:hover {
    background: rgba(255, 212, 0, 0.1);
    border-color: #FFD400;
    color: #FFD400;
}

.arati-btn:active {
    transform: translateY(1px);
}

.arati-btn svg {
    width: 18px;
    height: 18px;
}

.done-btn.active {
    background: #FFD400 !important;
    color: var(--on-primary) !important;
    border-color: #FFD400 !important;
    font-weight: 600;
}

.done-btn.active span {
    color: #fff !important;
}

.done-btn.active svg {
    color: #fff !important;
    stroke: #fff !important;
}

.not-done-btn.active {
    background: #FFD400 !important;
    color: var(--on-primary) !important;
    border-color: #FFD400 !important;
    font-weight: 600;
}

.not-done-btn.active span {
    color: #fff !important;
}

.not-done-btn.active svg {
    color: #fff !important;
    stroke: #fff !important;
}

/* Кнопка открытия текста арати */
.arati-text-btn {
    width: 100%;
    margin-top: 12px;
    padding: 10px 15px;
    border: 2px solid #FFD400;
    border-radius: 10px;
    background: #FFD400;
    color: var(--on-primary) !important;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.3s;
}

.arati-text-btn:hover {
    background: #FFE14D;
    border-color: #FFE14D;
    transform: translateY(-2px);
}

.arati-text-btn:active {
    transform: translateY(0);
}

.arati-text-btn svg {
    width: 16px;
    height: 16px;
    stroke: #fff !important;
    color: #fff !important;
}

.arati-text-btn span {
    color: #fff !important;
}

/* Текстовая ссылка для открытия текста арати */
.arati-text-link {
    display: block;
    margin: 9px 0 0;
    /* padding: 8px 0; */
    color: #FFD400 !important;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s;
    border: none;
    background: transparent;
}

.arati-text-link:hover {
    color: #FFE14D !important;
    text-decoration: underline;
}

.arati-text-link:active {
    color: #FFD400 !important;
}

/* Модальное окно с текстом арати */
.arati-text-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1002;
    padding: 20px;
    overflow-y: auto;
}

.arati-text-modal-content {
    background: #1A1A1A;
    border-radius: 20px;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    border: 2px solid rgba(255, 212, 0, 0.3);
    overflow: hidden;
    animation: modalSlideIn 0.3s ease-out;
    display: flex;
    flex-direction: column;
}

.arati-text-body {
    padding: 15px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* Модальное окно с изображением тилаки */
.tilaka-image-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1002;
    padding: 20px;
    overflow-y: auto;
    cursor: pointer;
}

.tilaka-image-modal-content {
    background: #1A1A1A;
    border-radius: 20px;
    max-width: min(95vw, 600px);
    max-height: 90vh;
    border: 2px solid rgba(255, 212, 0, 0.3);
    overflow: hidden;
    animation: modalSlideIn 0.3s ease-out;
    display: flex;
    flex-direction: column;
    cursor: default;
}

.tilaka-image-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 212, 0, 0.2);
}

.tilaka-image-modal-title {
    font-size: 1.1rem;
    color: #FFD400;
    margin: 0;
}

.tilaka-image-modal-close {
    background: none;
    border: none;
    color: #FFD400;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

.tilaka-image-modal-close:hover {
    color: #FFE14D;
}

.tilaka-image-modal-body {
    padding: 12px;
    overflow: auto;
}

.tilaka-image-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* Полный ачаман — нумерованный список */
.achaman-body {
    line-height: 1.7;
}
.achaman-steps {
    margin: 0 0 1em;
    padding-left: 1.4em;
    color: rgba(255, 255, 255, 0.95);
}
.achaman-steps li {
    margin-bottom: 0.8em;
}
.achaman-steps strong {
    color: #FFD400;
}
.achaman-steps em {
    font-style: italic;
    color: rgba(255, 255, 255, 0.9);
}
.achaman-note {
    margin: 1em 0 0.5em;
    padding: 10px 12px;
    background: rgba(255, 212, 0, 0.08);
    border-radius: 8px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
}
.achaman-footnote {
    margin: 0.5em 0 0;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}

.achaman-intro {
    margin: 0 0 1em;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
}
.achaman-mantras-title {
    margin: 1em 0 0.5em;
    font-size: 0.95rem;
    color: #FFD400;
}
.achaman-mantras-list {
    margin: 0;
    padding-left: 1.2em;
}
.achaman-mantras-list li {
    margin-bottom: 0.5em;
}

.tulasi-puja-subtitle {
    margin: 0 0 0.8em;
    font-size: 1rem;
    color: #FFD400;
}
.tulasi-puja-steps ul {
    margin: 0.4em 0 0.6em;
    padding-left: 1.2em;
}
.tulasi-puja-steps ul.tulasi-mantras {
    margin-top: 0.6em;
}
.tulasi-puja-steps li {
    margin-bottom: 0.4em;
}
.tulasi-puja-steps li li {
    margin-bottom: 0.25em;
}

/* Предложение прасада */
.prasadam-subtitle {
    margin: 0 0 0.8em;
    font-size: 1rem;
    color: #FFD400;
}
.prasadam-mantras {
    margin-top: 1em;
}
.prasadam-mantra-block {
    margin-bottom: 1.2em;
}
.prasadam-mantra-num {
    display: inline-block;
    min-width: 1.5em;
    font-weight: 600;
    color: #FFD400;
}
.prasadam-mantra-text {
    margin: 0.3em 0 0 0;
    font-family: 'Times New Roman', serif;
    font-size: 0.95rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.95);
    white-space: pre-line;
}

/* 64 анги преданного служения */
.angas-author {
    margin: 0 0 1em;
    font-size: 0.95rem;
    color: #FFD400;
    font-style: italic;
}
.angas-section {
    margin: 1em 0 0.5em;
    font-size: 0.95rem;
    color: #FFD400;
}
.angas-section:first-of-type {
    margin-top: 0;
}
.angas-list {
    margin: 0 0 0.5em;
    padding-left: 1.5em;
    color: rgba(255, 255, 255, 0.95);
}
.angas-list li {
    margin-bottom: 0.35em;
}
.angas-note {
    margin: 0.8em 0;
    padding: 10px 12px;
    background: rgba(255, 212, 0, 0.08);
    border-radius: 8px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
}
.angas-conclusion {
    margin: 1em 0 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
}
.angas-intro {
    margin: 0 0 0.8em;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
}
.angas-list li.angas-item-important {
    margin-top: 0.1em;
    padding: 0.5em 0.6em;
    background: rgba(255, 212, 0, 0.12);
    border-radius: 8px;
    border-left: 3px solid #FFD400;
}

/* Блок стиха без лишней обёртки — текст сразу в модальном окне */
.arati-verse {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 0;
}

.arati-verse:last-child {
    margin-bottom: 0;
}

.arati-translation-toggle {
    font-size: 14px;
    color: #FFD400;
    cursor: pointer;
    text-decoration: none;
    margin-top: 4px;
}

.arati-translation-toggle:hover {
    text-decoration: underline;
}

.arati-translation-hidden {
    display: none;
}

.arati-text-number {
    font-size: 14px;
    color: #FFD400;
    font-weight: 600;
}

.arati-text-section {
    font-size: 13px;
    color: rgba(255, 212, 0, 0.9);
    font-weight: 600;
    margin: 8px 0 4px 0;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Текст стиха — без фона, жирный */
.arati-text-sanskrit {
    font-size: 0.9rem;
    color: #fff;
    font-family: 'Times New Roman', serif;
    font-weight: 700;
    line-height: 1.8;
    white-space: pre-line;
}

.arati-text-translation {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    padding: 10px;
    background: rgba(255, 212, 0, 0.05);
    border-radius: 8px;
}

/* Статистика арати */
.arati-today-stats {
    width: 100%;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    padding: 20px;
    border: 1px solid rgba(255, 212, 0, 0.3);
}

.arati-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 15px;
}

.arati-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.arati-stat-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

.arati-stat-value {
    font-size: 18px;
    color: #FFD400;
    font-weight: 600;
}

/* Недельная статистика арати */
.arati-weekly-stats {
    width: 100%;
    /* max-width: 300px; */
    background: rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    padding: 20px;
    border: 1px solid rgba(255, 212, 0, 0.3);
}

/* Полноэкранный режим тратака */
.trataka-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Чёрный фон для полноэкранного режима с изображением */
.trataka-overlay.trataka-overlay-image {
    background: #000000;
}

.trataka-overlay.trataka-overlay-image .trataka-close {
    color: #ffffff;
}

.trataka-overlay.trataka-overlay-image .trataka-close svg {
    stroke: #ffffff;
}

.trataka-dot {
    width: 20px;
    height: 20px;
    background: #000000;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Инверсия: белая точка на чёрном фоне */
.trataka-dot.trataka-dot-inverted {
    background: #ffffff;
}

.trataka-overlay.trataka-overlay-image .trataka-dot.trataka-dot-inverted {
    background: #ffffff;
}

.trataka-image-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width:  min(90vw, 400px);
    height: 70vh;
    max-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.trataka-image-wrap .trataka-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.trataka-close {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #333333;
    z-index: 10001;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: opacity 0.3s;
}

.trataka-close svg {
    width: 32px;
    height: 32px;
}

.trataka-close:hover {
    opacity: 0.7;
}

.trataka-close svg {
    stroke: currentColor;
}

:is(body.theme-airy, body.theme-ember) .trataka-close {
    color: #333333;
}

:is(body.theme-airy, body.theme-ember) .trataka-close svg {
    stroke: #333333;
}

/* Видеоплеер чакр */
.chakra-video-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.92);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.chakra-video-wrap {
    position: relative;
    width: 100%;
    max-width: 900px;
    max-height: 100%;
}

.chakra-video-wrap video {
    width: 100%;
    height: auto;
    max-height: calc(100vh - 80px);
    border-radius: 8px;
    background: #000;
}

.chakra-video-close {
    position: absolute;
    top: -48px;
    right: 0;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s, background 0.2s;
}

.chakra-video-close:hover {
    opacity: 0.9;
    background: rgba(255, 255, 255, 0.25);
}

.chakra-video-close svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
}

.card-title-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
}

.weekly-stats-card .card-title-wrapper {
    margin-bottom: var(--space-2);
}

.card-date {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.78);
    font-weight: 400;
    margin-top: 2px;
}

.arati-weekly-grid {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 50px;
}

.arati-week-day {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s;
    padding: 4px;
    border-radius: 8px;
}

.arati-week-day.selected {
    background: rgba(255, 212, 0, 0.1);
}

.arati-week-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.78);
}

.arati-week-day.today .arati-week-label {
    color: #FFD400;
    font-weight: 600;
}

.arati-week-bars {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.arati-week-bar {
    width: 100%;
    height: 12px;
    background: rgba(255, 212, 0, 0.2);
    border-radius: 3px;
    transition: all 0.3s;
}

.arati-week-bar.done {
    background: #FFD400;
}

.arati-week-bar.not-done {
    background: #ff4444;
}

/* Календарь арати */
.day-arati-symbols {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin-top: 2px;
}

.day-arati {
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    line-height: 1;
}

.day-arati.done {
    color: #FFD400;
}

.day-arati.not-done {
    color: #ff4444;
}

/* Статистика (ранее Профиль) */
.profile-content {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    overflow-y: auto;
    padding-bottom: calc(100px + env(safe-area-inset-bottom));
}


.stat-card-today {
    min-height: 390px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
}

.stat-card-today .today-practices-list {
    flex: 1;
    min-height: 120px;
}

.profile-show-all {
    display: block;
    margin-top: 4px;
    margin-bottom: 4px;
    padding-top: 12px;
    padding-bottom: 12px;
    border-top: 1px solid rgba(255, 212, 0, 0.25);
    font-size: var(--font-sm);
    color: rgba(255, 212, 0, 0.9);
    text-decoration: none;
    cursor: pointer;
    width: 100%;
    text-align: center;
}

.profile-show-all:hover {
    text-decoration: underline;
}

.profile-detailed-stats {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
}

.profile-stats-hint {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 8px 0;
    text-align: center;
}

:is(body.theme-white, body.theme-aqua) .profile-stats-hint {
    color: rgba(0, 0, 0, 0.45);
}

:is(body.theme-airy, body.theme-ember) .profile-stats-hint {
    color: rgba(255, 255, 255, 0.55);
}

/* Единый блок — кликабельные строки в подробной статистике */
.profile-stats-list {
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(255, 212, 0, 0.12);
    border-radius: 12px;
    overflow: hidden;
}

.profile-stat-row-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease;
}

.profile-stat-row-btn:last-child {
    border-bottom: none;
}

.profile-stat-row-btn:hover {
    background: rgba(255, 212, 0, 0.1);
}

.profile-stat-row-icon {
    flex-shrink: 0;
    opacity: 0.85;
}

.profile-stat-row-title {
    flex-shrink: 0;
    font-weight: 600;
    font-size: 15px;
    min-width: 90px;
}

.profile-stat-row-value {
    flex: 1;
    margin-left: auto;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
    text-align: right;
}

.profile-stat-row-value .profile-stat-label {
    font-size: 14px;
}

.profile-stat-row-chevron {
    flex-shrink: 0;
    font-size: 18px;
    font-weight: 300;
    opacity: 0.6;
    margin-left: 4px;
}

.profile-stat-row-btn:hover .profile-stat-row-chevron {
    opacity: 1;
}

:is(body.theme-airy, body.theme-ember) .profile-stats-list {
    background: rgba(0, 0, 0, 0.15);
    border-color: rgba(var(--theme-accent-rgb), 0.15);
}

:is(body.theme-airy, body.theme-ember) .profile-stat-row-btn {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

:is(body.theme-airy, body.theme-ember) .profile-stat-row-btn:hover {
    background: rgba(var(--theme-accent-rgb), 0.12);
}

:is(body.theme-white, body.theme-aqua) .profile-stats-list {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

:is(body.theme-white, body.theme-aqua) .profile-stat-row-btn {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

:is(body.theme-white, body.theme-aqua) .profile-stat-row-btn:hover {
    background: rgba(0, 0, 0, 0.06) !important;
}

:is(body.theme-white, body.theme-aqua) .profile-stat-row-value {
    color: rgba(0, 0, 0, 0.65);
}

body.theme-aqua .profile-stats-list {
    border-color: rgba(48, 203, 186, 0.2) !important;
}

:is(body.theme-airy, body.theme-ember) .profile-show-all {
    border-top-color: rgba(var(--theme-accent-rgb), 0.35);
    color: rgba(255, 255, 255, 0.9);
}

:is(body.theme-airy, body.theme-ember) .profile-show-all:hover {
    color: var(--primary-color);
}

:is(body.theme-white, body.theme-aqua) .profile-show-all {
    border-top-color: rgba(0, 0, 0, 0.12);
    color: var(--primary-color);
}

:is(body.theme-white, body.theme-aqua) .profile-show-all:hover {
    color: var(--primary-dark);
}

.profile-title {
    font-size: var(--font-display);
    color: #FFD400;
    font-weight: 600;
    margin: 0 0 var(--space-3) 0;
    text-align: center;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 8px rgba(255, 212, 0, 0.3);
    /* Фиксируем минимальную высоту, чтобы отступ не прыгал при смене санскрит↔русский */
    min-height: 2.2rem;
    display: inline-block;
}

.today-practices-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.today-practice-item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    font-size: 14px;
    gap: 4px 0;
}

.today-practice-item .practice-name {
    font-weight: 500;
}

.today-practice-item .practice-detail {
    flex-basis: 100%;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 2px;
    line-height: 1.4;
}

:is(body.theme-white, body.theme-aqua) .today-practice-item {
    background: rgba(0, 0, 0, 0.04) !important;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

:is(body.theme-white, body.theme-aqua) .today-practice-item .practice-detail {
    color: rgba(0, 0, 0, 0.5);
}

/* Практики с детализацией: заголовок без значения, строки название | значение */
.today-practice-item--with-details {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
}

.today-practice-item--with-details .practice-header-row {
    display: flex;
    align-items: center;
}

.today-practice-item--with-details .practice-header-row .practice-name {
    font-weight: 500;
}

.today-practice-item--with-details .practice-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 12px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
}

.today-practice-item--with-details .practice-detail-name {
    flex: 1;
    min-width: 0;
}

.today-practice-item--with-details .practice-detail-value {
    font-weight: 600;
    color: #FFD400;
    margin-left: 8px;
}

:is(body.theme-white, body.theme-aqua) .today-practice-item--with-details .practice-detail-row {
    color: rgba(0, 0, 0, 0.55);
}

body.theme-white .today-practice-item--with-details .practice-detail-value {
    color: var(--primary-color) !important;
}

body.theme-aqua .today-practice-item--with-details .practice-detail-value {
    color: var(--primary-color) !important;
}

:is(body.theme-airy, body.theme-ember) .today-practice-item--with-details .practice-detail-value {
    color: var(--primary-color) !important;
}

.today-practice-item .practice-value {
    font-weight: 600;
    color: #FFD400;
}

:is(body.theme-airy, body.theme-ember) .today-practice-item .practice-value {
    color: var(--primary-color) !important;
}

body.theme-white .today-practice-item .practice-value {
    color: var(--primary-color) !important;
}

body.theme-aqua .today-practice-item .practice-value {
    color: var(--primary-color) !important;
}

.today-practices-empty {
    padding: var(--space-5);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.today-practices-empty-text {
    color: rgba(255, 255, 255, 0.82);
    font-size: var(--font-sm);
}

.today-practices-empty-hint {
    font-size: var(--font-xs);
    color: rgba(255, 255, 255, 0.65);
}

:is(body.theme-airy, body.theme-ember) .today-practices-empty-text { color: rgba(255, 255, 255, 0.82); }
:is(body.theme-airy, body.theme-ember) .today-practices-empty-hint { color: rgba(255, 255, 255, 0.62); }

:is(body.theme-white, body.theme-aqua) .today-practices-empty-text { color: rgba(0, 0, 0, 0.65); }
:is(body.theme-white, body.theme-aqua) .today-practices-empty-hint { color: rgba(0, 0, 0, 0.45); }

/* Кнопка установки PWA в профиле */
.install-app-btn {
    margin-top: 10px;
    padding: 10px 16px;
    border-radius: 999px;
    border: 2px solid rgba(255, 212, 0, 0.7);
    background: rgba(0, 0, 0, 0.25);
    color: #FFF0A0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.25s ease;
}

.install-app-btn svg {
    flex-shrink: 0;
}

.install-app-btn:hover {
    background: rgba(255, 212, 0, 0.15);
    border-color: #FFD400;
}

.install-app-btn:active {
    transform: translateY(1px);
}

.stat-header-with-nav {
    justify-content: space-between;
}

.stat-day-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.stat-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid rgba(255, 212, 0, 0.4);
    border-radius: 8px;
    background: rgba(255, 212, 0, 0.08);
    color: #FFD400;
    cursor: pointer;
    transition: all 0.2s;
}

.stat-nav-btn:hover:not(:disabled) {
    background: rgba(255, 212, 0, 0.15);
}

.stat-nav-btn:disabled {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.15);
    color: rgba(0, 0, 0, 0.35);
    opacity: 0.9;
    cursor: not-allowed;
}

body.theme-aqua .stat-nav-btn {
    border-color: rgba(48, 203, 186, 0.5);
    background: rgba(48, 203, 186, 0.08);
    color: var(--primary-color);
}

:is(body.theme-airy, body.theme-ember) .stat-nav-btn {
    border-color: rgba(var(--theme-accent-rgb), 0.5);
    background: rgba(var(--theme-accent-rgb), 0.08);
    color: var(--primary-color);
}

:is(body.theme-airy, body.theme-ember) .stat-nav-btn:hover:not(:disabled) {
    background: rgba(var(--theme-accent-rgb), 0.15);
}

body.theme-aqua .stat-nav-btn:hover:not(:disabled) {
    background: rgba(48, 203, 186, 0.15);
}

body.theme-aqua .stat-nav-btn:disabled,
body.theme-white .stat-nav-btn:disabled {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.12);
    color: rgba(0, 0, 0, 0.35);
}

body.theme-white .stat-nav-btn {
    border-color: rgba(201, 118, 0, 0.4);
    background: rgba(201, 118, 0, 0.08);
    color: #c97600;
}

.stat-card {
    width: 100%;
    background: rgba(0, 0, 0, 0.25);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    border: 1px solid rgba(255, 212, 0, 0.2);
    box-shadow: var(--shadow-md);
    transition: box-shadow 0.3s ease, transform 0.25s ease;
}

.stat-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.stat-card-highlight {
    border-color: #FFD400;
    background: rgba(255, 212, 0, 0.1);
}

.stat-header {
    display: flex;
    align-items: center;
    gap: 5px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 212, 0, 0.2);
}

.stat-icon {
    width: 20px;
    height: 20px;
    color: #FFD400;
    stroke: #FFD400;
    flex-shrink: 0;
}

.stat-title {
    font-size: 17px;
    color: #fff;
    font-weight: 600;
    margin: 0;
}

.stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.stat-row.profile-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 4px;
}

.stat-item-inline {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.profile-stat-line {
    display: inline;
    white-space: nowrap;
}

.profile-stat-label {
    font-weight: 400;
    font-size: 15px;
}

.profile-stat-value {
    font-weight: 600;
}

.profile-history-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: rgba(255, 212, 0, 0.12);
    border: 1px solid rgba(255, 212, 0, 0.35);
    border-radius: var(--radius-md);
    color: #FFD400;
    font-size: var(--font-sm);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.profile-history-btn:hover {
    background: rgba(255, 212, 0, 0.2);
}

:is(body.theme-airy, body.theme-ember) .profile-history-btn {
    background: rgba(var(--theme-accent-rgb), 0.2);
    border-color: rgba(var(--theme-accent-rgb), 0.5);
    color: var(--primary-color);
}

:is(body.theme-airy, body.theme-ember) .profile-history-btn:hover {
    background: rgba(var(--theme-accent-rgb), 0.3);
}

:is(body.theme-white, body.theme-aqua) .profile-history-btn {
    background: rgba(201, 118, 0, 0.15);
    border-color: rgba(201, 118, 0, 0.5);
    color: #c97600;
}

:is(body.theme-white, body.theme-aqua) .profile-history-btn:hover {
    background: rgba(201, 118, 0, 0.25);
}

/* Бирюзовая тема — светлая с зелено-бирюзовым акцентом (расширяет белую) */
body.theme-aqua .theme-circle.active {
    box-shadow: 0 0 0 2px var(--primary-color) !important;
}
body.theme-aqua .language-option.active {
    background: rgba(48, 203, 186, 0.08) !important;
}
body.theme-aqua .duration-btn.active,
body.theme-aqua .sound-btn.active,
body.theme-aqua .pranayama-btn.active {
    background: rgba(48, 203, 186, 0.25) !important;
}
body.theme-aqua .mode-select-trigger {
    border-color: rgba(48, 203, 186, 0.35) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(48, 203, 186, 0.06);
}
body.theme-aqua .mode-select-trigger:hover {
    border-color: rgba(48, 203, 186, 0.5) !important;
    background: rgba(48, 203, 186, 0.06) !important;
}
body.theme-aqua .mode-select-trigger:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(48, 203, 186, 0.06), 0 0 0 2px rgba(48, 203, 186, 0.2);
}
body.theme-aqua .mode-select-wrapper.open .mode-select-trigger {
    border-color: var(--primary-color) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(48, 203, 186, 0.2);
}
body.theme-aqua .mode-select-arrow {
    color: var(--primary-color) !important;
}
body.theme-aqua .mode-select-list {
    border-color: rgba(48, 203, 186, 0.35) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(48, 203, 186, 0.15);
}
body.theme-aqua .mode-select-option:hover,
body.theme-aqua .mode-select-option.active {
    background: rgba(48, 203, 186, 0.12) !important;
}
body.theme-aqua .dhyana-item {
    border-color: rgba(48, 203, 186, 0.2) !important;
}
body.theme-aqua .dhyana-item:hover {
    border-color: var(--primary-color) !important;
    background: rgba(48, 203, 186, 0.1) !important;
}
body.theme-aqua .dhyana-item.active {
    border-color: var(--primary-color) !important;
    background: rgba(48, 203, 186, 0.2) !important;
}
body.theme-aqua .minus-circle-btn:hover {
    border-color: rgba(48, 203, 186, 0.35) !important;
}
body.theme-aqua .calendar-nav-btn:hover {
    background: rgba(48, 203, 186, 0.1) !important;
}
body.theme-aqua .calendar-day.today {
    background: rgba(48, 203, 186, 0.08) !important;
}
body.theme-aqua .calendar-day.has-data {
    background: rgba(48, 203, 186, 0.12) !important;
}
body.theme-aqua .calendar-day.selected {
    background: rgba(48, 203, 186, 0.18) !important;
    box-shadow: 0 0 0 2px rgba(48, 203, 186, 0.2);
}
body.theme-aqua .calendar-day:hover:not(.empty) {
    background: rgba(48, 203, 186, 0.12) !important;
}
body.theme-aqua .confirm-modal-icon {
    background: rgba(48, 203, 186, 0.12) !important;
    border-color: rgba(48, 203, 186, 0.3) !important;
}
body.theme-aqua .confirm-modal-btn-confirm {
    background: rgba(48, 203, 186, 0.15) !important;
}
body.theme-aqua .confirm-modal-btn-confirm:hover {
    background: rgba(48, 203, 186, 0.25) !important;
    box-shadow: 0 4px 12px rgba(48, 203, 186, 0.2);
}
body.theme-aqua .manual-input-modal .modal-save-btn {
    background: rgba(48, 203, 186, 0.15) !important;
}
body.theme-aqua .manual-input-modal .modal-save-btn:hover {
    background: rgba(48, 203, 186, 0.25) !important;
}
body.theme-aqua .manual-input-modal .modal-cancel-btn {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(48, 203, 186, 0.45) !important;
    color: var(--primary-color) !important;
}
body.theme-aqua .manual-input-modal .modal-cancel-btn:hover {
    background: rgba(48, 203, 186, 0.12) !important;
    border-color: rgba(48, 203, 186, 0.65) !important;
    color: var(--primary-color) !important;
}
body.theme-aqua .history-btn {
    background: rgba(48, 203, 186, 0.08) !important;
}
body.theme-aqua .history-btn:hover {
    background: rgba(48, 203, 186, 0.15) !important;
}
body.theme-aqua .progress-reset-btn:hover {
    background: rgba(48, 203, 186, 0.12) !important;
}
body.theme-aqua .card:hover,
body.theme-aqua .tracker-card:hover,
body.theme-aqua .timings-card:hover {
    border-color: rgba(48, 203, 186, 0.3) !important;
}
body.theme-aqua .pranayama-select-trigger:hover {
    border-color: rgba(48, 203, 186, 0.5);
}
body.theme-aqua .pranayama-select-trigger:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(48, 203, 186, 0.2);
}
body.theme-aqua .pranayama-select-option:hover {
    background: rgba(48, 203, 186, 0.15);
}
body.theme-aqua .pranayama-select-option.is-selected {
    background: rgba(48, 203, 186, 0.25);
}
body.theme-aqua .today-practice-item .practice-value {
    color: var(--primary-color);
}
body.theme-aqua .profile-history-btn {
    background: rgba(48, 203, 186, 0.15);
    border-color: rgba(48, 203, 186, 0.5);
    color: var(--primary-color);
}
body.theme-aqua .profile-history-btn:hover {
    background: rgba(48, 203, 186, 0.25);
}
body.theme-aqua .theme-circle {
    border-color: rgba(0, 0, 0, 0.2) !important;
}

/* Логотип — фильтр оранжевый→бирюзовый */
body.theme-aqua .logo-icon {
    filter: hue-rotate(145deg) saturate(1.15) brightness(0.98);
}

/* Подъём: блоки Сегодня и Неделя */
body.theme-aqua .today-stats-card,
body.theme-aqua .weekly-stats-card {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(48, 203, 186, 0.35) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

body.theme-aqua .weekly-summary {
    border-top-color: rgba(48, 203, 186, 0.25) !important;
}

:is(body.theme-airy, body.theme-ember) .weekly-summary {
    border-top-color: rgba(var(--theme-accent-rgb), 0.35) !important;
}
body.theme-aqua .today-stats-card .stat-label {
    color: rgba(0, 0, 0, 0.6) !important;
}
body.theme-aqua .today-stats-card .stat-value,
body.theme-aqua .stat-value {
    color: var(--primary-color) !important;
}
body.theme-aqua .today-stats-card .stat-item--editable:hover {
    background: rgba(48, 203, 186, 0.1) !important;
}
body.theme-aqua .today-stats-card .stat-item--editable:active {
    background: rgba(48, 203, 186, 0.15) !important;
}
body.theme-aqua .week-day .day-label {
    color: rgba(0, 0, 0, 0.6) !important;
}
body.theme-aqua .day-time {
    color: rgba(0, 0, 0, 0.5) !important;
}
/* Подъём/отбой: иконки в цвете, время нейтральным (светлые темы) */
body.theme-aqua .day-wake-time .day-time-icon,
body.theme-aqua .day-wake-time svg,
body.theme-aqua .day-wake .day-time-icon,
body.theme-aqua .day-wake svg {
    color: #b8860b !important;
    stroke: #b8860b !important;
}
body.theme-aqua .day-wake-time .day-time-text,
body.theme-aqua .day-wake .day-time-text {
    color: rgba(0, 0, 0, 0.5) !important;
}
body.theme-aqua .day-bedtime-time .day-time-icon,
body.theme-aqua .day-bedtime-time svg,
body.theme-aqua .day-bedtime .day-time-icon,
body.theme-aqua .day-bedtime svg {
    color: #5b4dcc !important;
    stroke: #5b4dcc !important;
}
body.theme-aqua .day-bedtime-time .day-time-text,
body.theme-aqua .day-bedtime .day-time-text {
    color: rgba(0, 0, 0, 0.5) !important;
}
body.theme-white .day-wake-time .day-time-icon,
body.theme-white .day-wake-time svg,
body.theme-white .day-wake .day-time-icon,
body.theme-white .day-wake svg {
    color: #b8860b !important;
    stroke: #b8860b !important;
}
body.theme-white .day-wake-time .day-time-text,
body.theme-white .day-wake .day-time-text {
    color: rgba(0, 0, 0, 0.5) !important;
}
body.theme-white .day-bedtime-time .day-time-icon,
body.theme-white .day-bedtime-time svg,
body.theme-white .day-bedtime .day-time-icon,
body.theme-white .day-bedtime svg {
    color: #5b4dcc !important;
    stroke: #5b4dcc !important;
}
body.theme-white .day-bedtime-time .day-time-text,
body.theme-white .day-bedtime .day-time-text {
    color: rgba(0, 0, 0, 0.5) !important;
}
body.theme-aqua .week-day.selected {
    background: rgba(48, 203, 186, 0.12) !important;
}
body.theme-aqua .day-bar {
    background: rgba(48, 203, 186, 0.3) !important;
}
body.theme-aqua .day-bar.has-data {
    background: var(--primary-color) !important;
}

/* Джапа: кнопка музыкального сопровождения */
body.theme-aqua .japa-audio-btn {
    background: rgba(48, 203, 186, 0.15);
    border-color: rgba(48, 203, 186, 0.4);
    color: rgba(0, 0, 0, 0.7);
}
body.theme-aqua .japa-audio-btn:hover {
    background: rgba(48, 203, 186, 0.25);
    border-color: rgba(48, 203, 186, 0.6);
    color: rgba(0, 0, 0, 0.9);
}
body.theme-aqua .japa-audio-btn.active {
    background: rgba(48, 203, 186, 0.3);
    border-color: rgba(48, 203, 186, 0.7);
    color: var(--primary-color);
}

/* Джапа: кнопки плюс/минус и настройки */
body.theme-aqua .settings-icon-btn {
    background: rgba(48, 203, 186, 0.15);
    border-color: rgba(48, 203, 186, 0.4);
    color: rgba(0, 0, 0, 0.75);
}
body.theme-aqua .settings-icon-btn:hover {
    background: rgba(48, 203, 186, 0.25);
    border-color: rgba(48, 203, 186, 0.6);
    color: var(--primary-color);
}
body.theme-aqua .settings-icon-btn.active {
    background: rgba(48, 203, 186, 0.3);
    border-color: rgba(48, 203, 186, 0.7);
    color: var(--primary-color);
}

body.theme-aqua .settings-icon-btn.settings-inactive,
body.theme-aqua .settings-icon-btn:disabled {
    background: rgba(48, 203, 186, 0.06) !important;
    border-color: rgba(48, 203, 186, 0.2) !important;
    color: rgba(48, 203, 186, 0.4) !important;
}

body.theme-aqua .settings-icon-btn.settings-inactive:hover,
body.theme-aqua .settings-icon-btn:disabled:hover {
    background: rgba(48, 203, 186, 0.06) !important;
    border-color: rgba(48, 203, 186, 0.2) !important;
}

body.theme-aqua .progress-add-btn {
    background: rgba(48, 203, 186, 0.15);
    border-color: rgba(48, 203, 186, 0.4);
    color: var(--primary-color);
}
body.theme-aqua .progress-add-btn:hover {
    background: rgba(48, 203, 186, 0.25);
    border-color: rgba(48, 203, 186, 0.6);
}

/* Джапа: кнопка минус повторение (полные стили) */
body.theme-aqua .minus-circle-btn {
    background: rgba(48, 203, 186, 0.08);
    border-color: rgba(48, 203, 186, 0.35);
    color: #333;
}
body.theme-aqua .minus-circle-btn:hover {
    background: rgba(48, 203, 186, 0.18);
    border-color: rgba(48, 203, 186, 0.5);
}
body.theme-aqua .minus-circle-icon {
    border-color: var(--primary-color);
}
body.theme-aqua .minus-circle-icon-inner {
    background: var(--primary-color);
}
body.theme-aqua .minus-circle-text {
    color: #333;
}

/* Джапа: круг прогресса — тень/подсветка */
body.theme-aqua .progress-ring-bg {
    stroke: rgba(48, 203, 186, 0.2) !important;
}
body.theme-aqua .count-display {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(48, 203, 186, 0.1);
}

/* Сброс прогресса */
body.theme-aqua .progress-reset-btn {
    background: rgba(48, 203, 186, 0.08);
    border-color: rgba(48, 203, 186, 0.35);
    color: var(--primary-color);
}
body.theme-aqua .progress-reset-btn:hover {
    border-color: rgba(48, 203, 186, 0.5);
}

/* Дхьяна: ссылка истории */
body.theme-aqua .dhyana-today-stats .dhyana-history-link {
    background: rgba(48, 203, 186, 0.15);
    border-color: rgba(48, 203, 186, 0.4);
    color: var(--primary-color);
}
body.theme-aqua .dhyana-history-link:hover {
    background: rgba(48, 203, 186, 0.25);
}

/* Частицы анимации джапы */
body.theme-aqua .particle {
    background: var(--primary-color);
    box-shadow: 0 0 4px rgba(48, 203, 186, 0.6), 0 0 8px rgba(48, 203, 186, 0.4);
}

/* Прогресс за сегодня (дисплей в джапе и практиках) */
body.theme-aqua .progress-card {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(48, 203, 186, 0.35) !important;
}

/* Практики: стрелки влево/вправо (главы, выбор книги) */
body.theme-aqua .reader-chapter-prev,
body.theme-aqua .reader-chapter-next {
    background: rgba(48, 203, 186, 0.15);
    color: var(--primary-dark);
}
body.theme-aqua .reader-chapter-prev:hover:not(:disabled),
body.theme-aqua .reader-chapter-next:hover:not(:disabled) {
    background: rgba(48, 203, 186, 0.25);
    color: var(--primary-color);
}
body.theme-aqua .reader-chapter-prev svg,
body.theme-aqua .reader-chapter-next svg {
    stroke: currentColor;
}
body.theme-aqua .book-nav-btn {
    background: rgba(48, 203, 186, 0.2);
    border-color: rgba(48, 203, 186, 0.5);
    color: var(--primary-color);
}
body.theme-aqua .book-nav-btn:hover:not(:disabled) {
    background: rgba(48, 203, 186, 0.35);
    border-color: rgba(48, 203, 186, 0.7);
    color: var(--primary-dark);
}
body.theme-aqua .book-nav-btn svg {
    stroke: currentColor;
}

/* Бхаджаны: карточки и рамки */
body.theme-aqua .arati-card {
    border-color: rgba(48, 203, 186, 0.25) !important;
}
body.theme-aqua .arati-card.arati-done {
    border-color: rgba(48, 203, 186, 0.6);
    background: rgba(48, 203, 186, 0.1) !important;
}
body.theme-aqua .arati-card.arati-not-done {
    border-color: rgba(48, 203, 186, 0.4);
}
body.theme-aqua .arati-card-simple:hover {
    border-color: rgba(48, 203, 186, 0.6);
}
body.theme-aqua .arati-btn {
    background: rgba(48, 203, 186, 0.08) !important;
    border-color: rgba(48, 203, 186, 0.4) !important;
}
body.theme-aqua .arati-btn:hover {
    background: rgba(48, 203, 186, 0.15) !important;
    border-color: var(--primary-color) !important;
}
body.theme-aqua .arati-btn span,
body.theme-aqua .arati-btn svg {
    color: #333 !important;
}
body.theme-aqua .arati-btn.active span,
body.theme-aqua .arati-btn.active svg {
    color: #fff !important;
}
body.theme-aqua .arati-today-stats {
    border-color: rgba(48, 203, 186, 0.35) !important;
}
body.theme-aqua .arati-stat-value {
    color: var(--primary-color) !important;
}
body.theme-aqua .arati-week-day {
    background: rgba(0, 0, 0, 0.04) !important;
}
body.theme-aqua .arati-week-day.selected {
    background: rgba(48, 203, 186, 0.15) !important;
    border-color: rgba(48, 203, 186, 0.4);
}
body.theme-aqua .arati-week-label {
    color: rgba(0, 0, 0, 0.6) !important;
}
body.theme-aqua .arati-week-day.today .arati-week-label {
    color: var(--primary-color) !important;
}
body.theme-aqua .arati-week-bar {
    background: rgba(48, 203, 186, 0.2) !important;
}
body.theme-aqua .arati-week-bar.done {
    background: var(--primary-color) !important;
}
body.theme-aqua .arati-weekly-stats {
    border-color: rgba(48, 203, 186, 0.3) !important;
}
body.theme-aqua .arati-name {
    color: #333 !important;
}
body.theme-aqua .arati-time {
    color: #555 !important;
}

/* Статистика (профиль): карточки и контент */
body.theme-aqua .stat-card {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(48, 203, 186, 0.35) !important;
}
body.theme-aqua .stat-card:hover {
    border-color: rgba(48, 203, 186, 0.5);
}
body.theme-aqua .stat-card-highlight {
    border-color: var(--primary-color);
    background: rgba(48, 203, 186, 0.08) !important;
}
body.theme-aqua .stat-header {
    border-bottom-color: rgba(48, 203, 186, 0.25);
}
body.theme-aqua .stat-icon {
    color: var(--primary-color);
    stroke: var(--primary-color);
}
body.theme-aqua .stat-title {
    color: #333 !important;
}
body.theme-aqua .today-practice-item {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(48, 203, 186, 0.12);
}
body.theme-aqua .profile-stat-value {
    color: var(--primary-color) !important;
}
body.theme-aqua .profile-stat-label {
    color: #555 !important;
}
body.theme-aqua .install-app-btn {
    border-color: rgba(48, 203, 186, 0.5);
    background: rgba(48, 203, 186, 0.08);
    color: var(--primary-dark);
}
body.theme-aqua .install-app-btn:hover {
    background: rgba(48, 203, 186, 0.15);
    border-color: var(--primary-color);
}

/* Настройки: тень в блоках выбора языка */
body.theme-aqua .language-option:hover,
body.theme-aqua .language-option.active {
    background: rgba(48, 203, 186, 0.08) !important;
}
body.theme-aqua .language-option.active {
    box-shadow: 0 0 15px rgba(48, 203, 186, 0.3);
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.stat-card-highlight {
    margin-top: 10px;
}

.stat-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 400;
}

.stat-value {
    font-size: 20px;
    color: #FFD400;
    font-weight: 600;
}

.arati-card:first-child {
    /* margin-top: 10px; */
}



/* Адаптивность для профиля и подъёма */
@media (max-width: 480px) {
    .profile-content {
        padding: 20px;
        gap: 15px;
    }

    .profile-title {
        font-size: 28px;
        line-height: 1.2;
        min-height: 1.2em;
    }

    .stat-card {
        max-width: 100%;
        padding: 10px 15px;
    }

    .stat-card:first-child {
        margin-top: 10px;
    }

    .stat-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .stat-value {
        font-size: 18px;
    }

    .journey-content {
        /* padding: var(--space-4); */
    }

    .today-stats-card,
    .weekly-stats-card {
        padding: var(--space-3);
    }

    .weekly-chart {
        gap: 5px;
        padding: 8px 0 0;
    }

    .day-time {
        font-size: 9px;
    }
}

/* На невысоких экранах — меньший отступ до кнопки «История» */
@media (max-height: 700px) {
    .journey-content {
        padding-bottom: 3rem;
    }
}

/* Дополнительная адаптивность для очень маленьких экранов */
@media (max-width: 380px) {
    .count-display-wrapper {
        width: min(280px, 90vw);
        height: min(320px, 102vw);
        margin-top: 25px;
    }

    .timings-card, .tracker-card {
        margin: 0;
        padding: 10px 15px;
    }

    .stats-grid {
        margin-top: 10px;
    }

    .week-day {
        min-height: 40px;
    }

    .day-time {
        font-size: 9px;
    }

    .journey-content {
        padding: var(--space-3);
    }

    .today-stats-card,
    .weekly-stats-card {
        padding: var(--space-3);
    }

    .weekly-chart {
        height: 47px;
        min-height: 70px;
        margin: 0;
        gap: 4px;
        padding: 6px 0 0;
    }

    .summary-item {
        gap: 1px;
    }

    .arati-weekly-stats {
        padding: 15px 20px;
    }

    .arati-weekly-grid {
        margin-top: 18px;
    }

    .arati-name {
        font-size: 15px;
        margin-top: 1px;
    }

    .arati-btn {
        padding: 8px 5px;
    }

    .arati-card {
        padding: 12px 15px;
        gap: 11px;
    }

    .history-btn {
        margin-top: 7px;
    }

    .journey-content {
        padding-bottom: 3rem;
    }

    .today-stats-card {
        /* padding: 15px; */
    }

    .progress-card {
        margin: 0;
    }

    .dhyana-icon svg {
        width: 80%;
        height: 80%;
    }

    .action-btn {
        padding: 5px 12px;
        gap: 1px;
    }

    .dhyana-item {
        gap: 1px;
        padding: 5px 8px;
        min-height: 60px;
        box-sizing: border-box;
    }

    .add-reading-time-btn {
        padding: 10px 18px;
    }

    .reading-add-section {
        margin-bottom: 0;
    }

    .timer-label {
        margin: 10px 0 40px;
    }

    .count-display {
        width: min(260px, 83vw);
        height: min(260px, 83vw);
    }
    
    .progress-ring-wrapper {
        width: min(290px, 93vw) !important;
        height: min(290px, 93vw) !important;
    }
    
    .big-count {
        font-size: clamp(40px, 18vw, 56px);
    }
    
    .count-ratio {
        font-size: clamp(14px, 4vw, 18px);
    }
    
    .tap-hint {
        font-size: clamp(11px, 3vw, 13px);
    }
}

/* Дополнительная адаптивность для очень маленьких и низких экранов
   (например, телефоны с небольшой высотой окна браузера).
   Здесь ещё чуть уменьшаем круг, чтобы он не вылезал за нижний край,
   но на более высоких телефонах размер остаётся прежним. */
@media (max-width: 400px) and (max-height: 700px) {
    .mantra-counter {
        padding: 14px;
        /* padding-bottom: calc(14px + 52px + env(safe-area-inset-bottom)); */
        gap: 6px;
    }

    .dhyana-content {
        padding: 14px;
        padding-bottom: 3rem; /* 10px от нижнего меню */
        gap: 6px;
    }

    .mantra-text {
        font-size: 26px;
    }

    .circles-stats {
        max-width: 260px;
        padding: 10px;
    }

    .stats-label {
        font-size: 12px;
    }

    .stats-value {
        font-size: 14px;
    }

    .add-circles-btn {
        max-width: 260px;
        padding: 10px 12px;
        font-size: 15px;
    }

    .add-circles-form {
        max-width: 260px;
        padding: 12px;
        gap: 12px;
    }

    .circles-input {
        font-size: 16px;
        padding: 6px 10px;
    }

    .count-display-wrapper {
        width: min(260px, 80vw);
        height: min(280px, 88vw);
        margin-top: 40px;
        margin-bottom: calc(10px + env(safe-area-inset-bottom));
    }

    .count-display {
        width: min(220px, 70vw);
        height: min(220px, 70vw);
    }

    .progress-ring-wrapper {
        width: min(250px, 80vw) !important;
        height: min(250px, 80vw) !important;
    }

    .big-count {
        font-size: clamp(34px, 14vw, 46px);
    }

    .count-ratio {
        font-size: clamp(13px, 3.4vw, 16px);
        margin-top: 6px;
    }

    .tap-hint {
        font-size: clamp(10px, 3vw, 12px);
        margin-top: 6px;
    }
}

/* Поддержка устройств с вырезом экрана */
@supports (padding: max(0px)) {
    .app-container {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
    
    .mantra-counter,
    .dhyana-content,
    .journey-content,
    .arati-content,
    .rituals-content,
    .profile-content {
        padding-left: max(20px, calc(20px + env(safe-area-inset-left)));
        padding-right: max(20px, calc(20px + env(safe-area-inset-right)));
        gap: 8px;
    }
    
    .menu-close {
        width: 35px;
        height: 36px;
    }
    
    .menu-close svg {
        width: 28px;
        height: 28px;
    }
    
    .menu-nav {
        flex-direction: column;
        gap: 10px;
        padding: 30px 20px;
    }
    
    .menu-item {
        padding: 15px 20px;
        width: 100%;
        max-width: 100%;
    }
    
    .menu-item-icon {
        width: 28px;
        height: 28px;
    }
    
    .menu-item-text {
        font-size: 18px;
    }
    
    .settings-content {
        padding: 15px;
        gap: 20px;
    }
    
    .settings-title {
        font-size: 28px;
    }
    
    .settings-section-title {
        font-size: 16px;
    }
    
    .language-card {
        padding: 12px 15px;
    }
    
    .language-name {
        font-size: 16px;
    }
    
    .language-name-small {
        font-size: 13px;
    }
    
    .change-language-btn {
        padding: 12px 15px;
        font-size: 15px;
    }
    
    .themes-grid {
        gap: 12px;
    }
    
    .language-selector {
        flex-direction: column;
        gap: 10px;
    }
    
    .language-option {
        padding: 10px 12px;
        flex-direction: row;
        text-align: left;
    }
    
    .language-option .language-info {
        align-items: flex-start;
    }
    
    .language-option .language-name {
        font-size: 13px;
    }
    
    .language-option .language-name-small {
        font-size: 11px;
    }
}

/* Страница настроек */
.settings-content {
    display: flex;
    flex-direction: column;
    gap: 25px;
    padding: 20px;
    padding-bottom: 145px;
    width: 100%;
    max-width: 100%;
}

.settings-title {
    font-size: var(--font-display);
    color: #FFD400;
    font-weight: 600;
    margin: 0;
    text-align: center;
    line-height: 1.2;
    min-height: 1.2em;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 8px rgba(255, 212, 0, 0.3);
}

.settings-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.settings-section-title {
    font-size: var(--font-lg);
    font-weight: 600;
    color: #fff;
    margin: 0;
    letter-spacing: -0.02em;
}

/* Карточка языка */
.language-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    background: rgba(0, 0, 0, 0.2);
    border: 2px solid rgba(255, 212, 0, 0.3);
    border-radius: 15px;
    transition: all 0.3s ease;
}

.language-card.active {
    border-color: #FFD400;
    background: rgba(255, 212, 0, 0.1);
}

.language-flag {
    width: 32px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 4px;
    overflow: hidden;
}

.language-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.language-name {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
}

.language-name-small {
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
}

/* Кнопка смены языка */
.change-language-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 20px;
    background: rgba(0, 0, 0, 0.2);
    border: 2px solid rgba(255, 212, 0, 0.3);
    border-radius: 15px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.change-language-btn:hover {
    border-color: #FFD400;
    background: rgba(255, 212, 0, 0.1);
    color: #FFD400;
}

.change-language-btn svg:first-child {
    width: 20px;
    height: 20px;
    color: inherit;
}

.change-language-btn svg:last-child {
    width: 16px;
    height: 16px;
    color: inherit;
}

/* Информационный блок */
.info-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 15px;
    background: rgba(255, 212, 0, 0.1);
    border: 2px solid rgba(255, 212, 0, 0.3);
    border-radius: 12px;
    color: #FFE14D;
    font-size: 13px;
    line-height: 1.4;
}

.info-box svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
    color: #FFD400;
}

/* Сетка тем */
.themes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    width: 100%;
}

.theme-circle {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 3px solid rgba(255, 212, 0, 0.3);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
}

.theme-circle.active {
    border-color: #FFD400;
    box-shadow: 0 0 20px rgba(255, 212, 0, 0.5);
}

.theme-circle.locked {
    cursor: not-allowed;
    opacity: 0.6;
}

.theme-color {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.theme-check {
    position: absolute;
    top: 6px;
    right: 6px;
    color: var(--on-primary);
    background: #FFD400;
    border-radius: 50%;
    padding: 2px;
    width: 30px;
    height: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.9), 0 0 0 3px rgba(255, 255, 255, 0.8), inset 0 1px 3px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.7);
    z-index: 10;
}

.theme-check svg {
    filter: 
        drop-shadow(0 0 3px rgba(0, 0, 0, 1))
        drop-shadow(0 0 3px rgba(0, 0, 0, 1))
        drop-shadow(0 0 2px rgba(0, 0, 0, 1))
        drop-shadow(0 2px 4px rgba(0, 0, 0, 1));
    stroke-width: 3.5;
    width: 100%;
    height: 100%;
    color: #fff !important;
    stroke: #fff !important;
    paint-order: stroke fill;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.theme-check svg polyline {
    stroke: #fff !important;
    fill: none !important;
}

.theme-lock {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, 0.8);
    width: 24px;
    height: 24px;
}

/* Селектор языка */
.language-selector {
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: 100%;
}

.language-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 15px;
    background: rgba(0, 0, 0, 0.2);
    border: 2px solid rgba(255, 212, 0, 0.3);
    border-radius: 12px;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    flex: 1;
    min-width: 0;
}

.language-option:hover {
    border-color: #FFD400;
    background: rgba(255, 212, 0, 0.1);
}

.language-option.active {
    border-color: #FFD400;
    background: rgba(255, 212, 0, 0.15);
    box-shadow: 0 0 15px rgba(255, 212, 0, 0.3);
}

.language-option .language-flag {
    width: 28px;
    height: 20px;
    flex-shrink: 0;
}

.language-option .language-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    width: 100%;
}

.language-option .language-name {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.language-option .language-name-small {
    font-size: 11px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
}

.sanskrit-flag {
    font-size: 18px;
    font-weight: 600;
    color: #FFD400;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 20px;
}

/* Воздушная тема - стили для всех элементов */
:is(body.theme-airy, body.theme-ember) * {
    transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
    color: #fff;
}

/* Текст для синей темы - белый для читаемости на темном фоне */
:is(body.theme-airy, body.theme-ember) .card-title,
:is(body.theme-airy, body.theme-ember) .section-title,
:is(body.theme-airy, body.theme-ember) .timing-label,
:is(body.theme-airy, body.theme-ember) .timing-time,
:is(body.theme-airy, body.theme-ember) .timer-label,
:is(body.theme-airy, body.theme-ember) .circles-label,
:is(body.theme-airy, body.theme-ember) .day-label,
:is(body.theme-airy, body.theme-ember) .day-number,
:is(body.theme-airy, body.theme-ember) .week-day-label,
:is(body.theme-airy, body.theme-ember) .arati-week-label,
:is(body.theme-airy, body.theme-ember) .nav-label,
:is(body.theme-airy, body.theme-ember) .tap-hint,
:is(body.theme-airy, body.theme-ember) .minus-circle-btn {
    background: none !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .minus-circle-btn:hover {
    background: rgba(var(--theme-accent-rgb), 0.1) !important;
    border-color: rgba(var(--theme-accent-rgb), 0.3) !important;
}

:is(body.theme-airy, body.theme-ember) .minus-circle-btn:active {
    background: rgba(var(--theme-accent-rgb), 0.2) !important;
    border-color: var(--primary-color) !important;
}

/* Переопределяем inline стили для синей темы */
:is(body.theme-airy, body.theme-ember) .minus-circle-btn[style*="background"] {
    background: rgba(var(--theme-accent-rgb), 0.2) !important;
}

:is(body.theme-airy, body.theme-ember) .minus-circle-btn[style*="#ff6b6b"],
:is(body.theme-airy, body.theme-ember) .minus-circle-btn[style*="rgb(255, 107, 107)"] {
    background: rgba(var(--theme-accent-rgb), 0.2) !important;
}

:is(body.theme-airy, body.theme-ember) .minus-circle-icon {
    border-color: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .minus-circle-icon-inner {
    background: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .minus-circle-text,
:is(body.theme-airy, body.theme-ember) .card-header svg,
:is(body.theme-airy, body.theme-ember) .timing-item svg,
:is(body.theme-airy, body.theme-ember) .today-stats-card,
:is(body.theme-airy, body.theme-ember) .week-stats-card,
:is(body.theme-airy, body.theme-ember) .progress-card,
:is(body.theme-airy, body.theme-ember) .stats-item,
:is(body.theme-airy, body.theme-ember) .stats-label,
:is(body.theme-airy, body.theme-ember) .arati-name,
:is(body.theme-airy, body.theme-ember) .status-text,
:is(body.theme-airy, body.theme-ember) .arati-btn span,
:is(body.theme-airy, body.theme-ember) .arati-text-link,
:is(body.theme-airy, body.theme-ember) .todayDate,
:is(body.theme-airy, body.theme-ember) .today-stats-card h2,
:is(body.theme-airy, body.theme-ember) .week-stats-card h2,
:is(body.theme-airy, body.theme-ember) .language-name,
:is(body.theme-airy, body.theme-ember) .language-name-small,
:is(body.theme-airy, body.theme-ember) .settings-section-title {
    color: #fff !important;
}

/* Общее правило для всех элементов с белым цветом */
:is(body.theme-airy, body.theme-ember) [style*="color: #fff"],
:is(body.theme-airy, body.theme-ember) [style*="color: white"],
:is(body.theme-airy, body.theme-ember) [style*="color:#fff"],
:is(body.theme-airy, body.theme-ember) [style*="color:white"] {
    color: var(--text-light) !important;
}

:is(body.theme-airy, body.theme-ember) .logo-text {
    color: var(--primary-color) !important;
}

:is(body.theme-airy, body.theme-ember) .burger-line {
    background: var(--primary-color) !important;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                top 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease,
                background 0.2s ease !important;
}

:is(body.theme-airy, body.theme-ember) .burger-menu:hover .burger-line {
    background: var(--primary-light) !important;
}

:is(body.theme-airy, body.theme-ember) .burger-menu.active .burger-line:nth-child(2) {
    transition: opacity 0.2s ease, transform 0.25s ease !important;
}

/* Логотип SVG - заменяем оранжевые цвета на синие через CSS фильтры */
/* Оранжевый (#ff8800) -> Синий (#4a9eff): hue-rotate примерно 200-210 градусов */
body.theme-airy .logo-icon {
    filter: hue-rotate(200deg) saturate(1.1) brightness(0.95);
}

body.theme-ember .logo-icon {
    filter: brightness(0) invert(1);
}

:is(body.theme-airy, body.theme-ember) .mantra-text {
    color: var(--primary-color);
    text-shadow: 0 2px 10px rgba(var(--theme-accent-rgb), 0.4);
}

:is(body.theme-airy, body.theme-ember) .dhyana-title,
:is(body.theme-airy, body.theme-ember) .asana-title,
:is(body.theme-airy, body.theme-ember) .journey-title,
:is(body.theme-airy, body.theme-ember) .arati-title,
:is(body.theme-airy, body.theme-ember) .profile-title,
:is(body.theme-airy, body.theme-ember) .settings-title {
    color: var(--primary-color);
    text-shadow: 0 2px 8px rgba(var(--theme-accent-rgb), 0.3);
}

:is(body.theme-airy, body.theme-ember) .mode-select-trigger {
    color: #8cc5ff;
    background: rgba(0, 0, 0, 0.25);
    border-color: rgba(var(--theme-accent-rgb), 0.35);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(var(--theme-accent-rgb), 0.08);
}
:is(body.theme-airy, body.theme-ember) .mode-select-trigger:hover {
    border-color: rgba(var(--theme-accent-rgb), 0.5);
    background: rgba(var(--theme-accent-rgb), 0.06);
}
:is(body.theme-airy, body.theme-ember) .mode-select-trigger:focus {
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(var(--theme-accent-rgb), 0.08), 0 0 0 2px rgba(var(--theme-accent-rgb), 0.2);
}
:is(body.theme-airy, body.theme-ember) .mode-select-arrow {
    color: #8cc5ff;
}
:is(body.theme-airy, body.theme-ember) .mode-select-list {
    background: rgba(26, 26, 46, 0.98);
    border-color: rgba(var(--theme-accent-rgb), 0.35);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(var(--theme-accent-rgb), 0.15), inset 0 1px 0 rgba(var(--theme-accent-rgb), 0.08);
}
:is(body.theme-airy, body.theme-ember) .mode-select-option {
    color: #8cc5ff;
}
:is(body.theme-airy, body.theme-ember) .mode-select-option:hover {
    background: rgba(var(--theme-accent-rgb), 0.12);
    color: #b3d7ff;
}
:is(body.theme-airy, body.theme-ember) .mode-select-option.active {
    background: rgba(var(--theme-accent-rgb), 0.2);
    color: #b3d7ff;
}

:is(body.theme-airy, body.theme-ember) .card {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(var(--theme-accent-rgb), 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(var(--theme-accent-rgb), 0.2);
}

:is(body.theme-airy, body.theme-ember) .card:hover {
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4), 0 3px 10px rgba(var(--theme-accent-rgb), 0.3);
}

:is(body.theme-airy, body.theme-ember) .card-title {
    color: #fff;
}

:is(body.theme-airy, body.theme-ember) .card-header {
    background: rgba(0, 0, 0, 0.1) !important;
    border-bottom: 1px solid rgba(var(--theme-accent-rgb), 0.2) !important;
}

:is(body.theme-airy, body.theme-ember) .card-header:hover {
    background: rgba(var(--theme-accent-rgb), 0.1) !important;
}

:is(body.theme-airy, body.theme-ember) .tracker-card,
:is(body.theme-airy, body.theme-ember) .timings-card {
    border-color: rgba(var(--theme-accent-rgb), 0.3) !important;
    border: 1px solid rgba(var(--theme-accent-rgb), 0.3) !important;
}

:is(body.theme-airy, body.theme-ember) .start-meditation-btn,
:is(body.theme-airy, body.theme-ember) .start-asana-btn {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%) !important;
    border-color: var(--primary-dark);
    box-shadow: 0 4px 15px rgba(var(--theme-accent-rgb), 0.4);
}

:is(body.theme-airy, body.theme-ember) .start-meditation-btn span,
:is(body.theme-airy, body.theme-ember) .start-asana-btn span,
:is(body.theme-airy, body.theme-ember) .start-meditation-btn svg,
:is(body.theme-airy, body.theme-ember) .start-asana-btn svg {
    color: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .start-meditation-btn:hover,
:is(body.theme-airy, body.theme-ember) .start-asana-btn:hover {
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-color) 100%);
    box-shadow: 0 6px 20px rgba(var(--theme-accent-rgb), 0.5);
    transform: translateY(-2px);
}

:is(body.theme-airy, body.theme-ember) .duration-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(var(--theme-accent-rgb), 0.3);
    color: #fff;
}

:is(body.theme-airy, body.theme-ember) .duration-btn.active {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%) !important;
    border-color: var(--primary-dark) !important;
    box-shadow: 0 3px 10px rgba(var(--theme-accent-rgb), 0.3) !important;
    color: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .duration-btn.active span,
:is(body.theme-airy, body.theme-ember) .duration-btn.active svg {
    color: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .sound-btn.active {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%) !important;
    border-color: var(--primary-dark) !important;
    box-shadow: 0 3px 10px rgba(var(--theme-accent-rgb), 0.3) !important;
    color: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .sound-btn.active span,
:is(body.theme-airy, body.theme-ember) .sound-btn.active svg {
    color: #fff !important;
    stroke: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .pranayama-btn.active {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%) !important;
    border-color: var(--primary-dark) !important;
    box-shadow: 0 3px 10px rgba(var(--theme-accent-rgb), 0.3) !important;
    color: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .duration-btn.active span,
:is(body.theme-airy, body.theme-ember) .sound-btn.active span,
:is(body.theme-airy, body.theme-ember) .pranayama-btn.active span {
    color: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .duration-btn:hover:not(.active) {
    background: rgba(var(--theme-accent-rgb), 0.15) !important;
    border-color: var(--primary-color) !important;
}

:is(body.theme-airy, body.theme-ember) .sound-btn:hover:not(.active) {
    background: rgba(var(--theme-accent-rgb), 0.15) !important;
    border-color: var(--primary-color) !important;
}

:is(body.theme-airy, body.theme-ember) .pranayama-btn:hover:not(.active) {
    background: rgba(var(--theme-accent-rgb), 0.15) !important;
    border-color: var(--primary-color) !important;
}

:is(body.theme-airy, body.theme-ember) .nav-item {
    color: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .nav-item .nav-icon {
    color: #fff !important;
    opacity: 0.8 !important;
}

:is(body.theme-airy, body.theme-ember) .nav-item .nav-icon svg {
    color: #fff !important;
    stroke: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .nav-item .nav-icon svg path,
:is(body.theme-airy, body.theme-ember) .nav-item .nav-icon svg circle,
:is(body.theme-airy, body.theme-ember) .nav-item .nav-icon svg line,
:is(body.theme-airy, body.theme-ember) .nav-item .nav-icon svg polygon,
:is(body.theme-airy, body.theme-ember) .nav-item .nav-icon svg polyline {
    stroke: #fff !important;
    fill: none !important;
}

:is(body.theme-airy, body.theme-ember) .nav-item .nav-label {
    color: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .nav-item:hover {
    color: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .nav-item:hover .nav-icon {
    color: #fff !important;
    opacity: 1 !important;
}

:is(body.theme-airy, body.theme-ember) .nav-item:hover .nav-icon svg {
    color: #fff !important;
    stroke: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .nav-item:hover .nav-icon svg path,
:is(body.theme-airy, body.theme-ember) .nav-item:hover .nav-icon svg circle,
:is(body.theme-airy, body.theme-ember) .nav-item:hover .nav-icon svg line,
:is(body.theme-airy, body.theme-ember) .nav-item:hover .nav-icon svg polygon,
:is(body.theme-airy, body.theme-ember) .nav-item:hover .nav-icon svg polyline {
    stroke: #fff !important;
    fill: none !important;
}

:is(body.theme-airy, body.theme-ember) .nav-item.active {
    color: var(--primary-color) !important;
}

:is(body.theme-airy, body.theme-ember) .nav-item.active .nav-icon {
    color: var(--primary-color) !important;
    opacity: 1 !important;
}

:is(body.theme-airy, body.theme-ember) .nav-item.active .nav-icon svg {
    color: var(--primary-color) !important;
    stroke: var(--primary-color) !important;
}

:is(body.theme-airy, body.theme-ember) .nav-item.active .nav-icon svg path,
:is(body.theme-airy, body.theme-ember) .nav-item.active .nav-icon svg circle,
:is(body.theme-airy, body.theme-ember) .nav-item.active .nav-icon svg line,
:is(body.theme-airy, body.theme-ember) .nav-item.active .nav-icon svg polygon,
:is(body.theme-airy, body.theme-ember) .nav-item.active .nav-icon svg polyline {
    stroke: var(--primary-color) !important;
    fill: none !important;
}

:is(body.theme-airy, body.theme-ember) .nav-item.active .nav-label {
    color: var(--primary-color) !important;
}

:is(body.theme-airy, body.theme-ember) .nav-icon-stars svg {
    color: #fff !important;
    stroke: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .nav-icon-stars svg path,
:is(body.theme-airy, body.theme-ember) .nav-icon-stars svg circle,
:is(body.theme-airy, body.theme-ember) .nav-icon-stars svg line,
:is(body.theme-airy, body.theme-ember) .nav-icon-stars svg polygon,
:is(body.theme-airy, body.theme-ember) .nav-icon-stars svg polyline {
    stroke: #fff !important;
    fill: none !important;
}

:is(body.theme-airy, body.theme-ember) .nav-item.active .nav-icon-stars svg {
    color: var(--primary-color) !important;
    stroke: var(--primary-color) !important;
}

:is(body.theme-airy, body.theme-ember) .nav-item.active .nav-icon-stars svg path,
:is(body.theme-airy, body.theme-ember) .nav-item.active .nav-icon-stars svg circle,
:is(body.theme-airy, body.theme-ember) .nav-item.active .nav-icon-stars svg line,
:is(body.theme-airy, body.theme-ember) .nav-item.active .nav-icon-stars svg polygon,
:is(body.theme-airy, body.theme-ember) .nav-item.active .nav-icon-stars svg polyline {
    stroke: var(--primary-color) !important;
    fill: none !important;
}

:is(body.theme-airy, body.theme-ember) .bottom-nav {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(var(--theme-accent-rgb), 0.2);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}

:is(body.theme-airy, body.theme-ember) .top-header {
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
}

:is(body.theme-airy, body.theme-ember) .fullscreen-menu {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.98) 0%, rgba(22, 33, 62, 0.98) 100%);
    backdrop-filter: blur(20px);
}

:is(body.theme-airy, body.theme-ember) .menu-item-text {
    color: #fff;
}

:is(body.theme-airy, body.theme-ember) .menu-item-icon {
    color: var(--primary-color) !important;
}

:is(body.theme-airy, body.theme-ember) .menu-item-icon svg {
    color: var(--primary-color) !important;
    stroke: var(--primary-color) !important;
    fill: none !important;
}

:is(body.theme-airy, body.theme-ember) .menu-item:hover .menu-item-icon,
:is(body.theme-airy, body.theme-ember) .menu-item:hover .menu-item-icon svg {
    color: var(--primary-light) !important;
    stroke: var(--primary-light) !important;
}

:is(body.theme-airy, body.theme-ember) .menu-item {
    color: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .menu-item:hover {
    color: var(--primary-color) !important;
}

:is(body.theme-airy, body.theme-ember) .menu-item-icon {
    color: var(--primary-color);
}

:is(body.theme-airy, body.theme-ember) .menu-close {
    color: var(--primary-color);
}

:is(body.theme-airy, body.theme-ember) .theme-circle {
    border-color: rgba(var(--theme-accent-rgb), 0.3) !important;
}

:is(body.theme-airy, body.theme-ember) .theme-circle.active {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 25px rgba(var(--theme-accent-rgb), 0.6) !important;
}

:is(body.theme-airy, body.theme-ember) .language-option {
    border-color: rgba(var(--theme-accent-rgb), 0.3) !important;
    background: rgba(0, 0, 0, 0.2) !important;
}

:is(body.theme-airy, body.theme-ember) .language-option:hover {
    border-color: var(--primary-color) !important;
    background: rgba(var(--theme-accent-rgb), 0.1) !important;
}

:is(body.theme-airy, body.theme-ember) .language-option.active {
    border-color: var(--primary-color) !important;
    background: rgba(var(--theme-accent-rgb), 0.15) !important;
    box-shadow: 0 0 15px rgba(var(--theme-accent-rgb), 0.3) !important;
}

:is(body.theme-airy, body.theme-ember) .theme-check {
    background: var(--primary-color) !important;
    color: #fff !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.8), 0 0 0 2px rgba(255, 255, 255, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

:is(body.theme-airy, body.theme-ember) .theme-check svg {
    color: #fff !important;
    stroke: #fff !important;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.8));
}

:is(body.theme-airy, body.theme-ember) .count-display {
    background: rgba(0, 0, 0, 0.2);
    border-color: var(--primary-color);
    box-shadow: 0 4px 20px rgba(var(--theme-accent-rgb), 0.2);
}

:is(body.theme-airy, body.theme-ember) .big-count {
    color: #fff;
    text-shadow: 0 2px 10px rgba(var(--theme-accent-rgb), 0.4);
}

:is(body.theme-airy, body.theme-ember) .count-ratio {
    color: var(--primary-color);
}

:is(body.theme-airy, body.theme-ember) .tap-hint {
    color: #fff;
}

:is(body.theme-airy, body.theme-ember) .add-circles-btn {
    background: rgba(0, 0, 0, 0.2) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .add-circles-btn:hover {
    background: rgba(var(--theme-accent-rgb), 0.1) !important;
    border-color: var(--primary-color) !important;
}

:is(body.theme-airy, body.theme-ember) .add-circles-btn span,
:is(body.theme-airy, body.theme-ember) .add-circles-btn svg {
    color: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .history-btn {
    background: rgba(0, 0, 0, 0.2) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .history-btn:hover {
    background: rgba(var(--theme-accent-rgb), 0.1) !important;
    border-color: var(--primary-color) !important;
}

:is(body.theme-airy, body.theme-ember) .history-btn svg {
    color: #fff !important;
    stroke: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .history-btn svg path,
:is(body.theme-airy, body.theme-ember) .history-btn svg circle,
:is(body.theme-airy, body.theme-ember) .history-btn svg rect,
:is(body.theme-airy, body.theme-ember) .history-btn svg line,
:is(body.theme-airy, body.theme-ember) .history-btn svg polygon,
:is(body.theme-airy, body.theme-ember) .history-btn svg polyline {
    stroke: #fff !important;
    fill: none !important;
}

:is(body.theme-airy, body.theme-ember) .progress-ring-bg {
    stroke: rgba(var(--theme-accent-rgb), 0.25);
}

:is(body.theme-airy, body.theme-ember) .progress-ring-fill {
    stroke: var(--primary-color);
}

:is(body.theme-airy, body.theme-ember) .section-title {
    color: rgba(255, 255, 255, 0.8);
}

:is(body.theme-airy, body.theme-ember) .timer-value {
    color: #fff;
    text-shadow: 0 2px 8px rgba(var(--theme-accent-rgb), 0.3);
}

:is(body.theme-airy, body.theme-ember) .timer-label {
    color: rgba(255, 255, 255, 0.7);
}

:is(body.theme-airy, body.theme-ember) .reset-meditation-btn,
:is(body.theme-airy, body.theme-ember) .reset-meditation-btn span,
:is(body.theme-airy, body.theme-ember) .reset-meditation-btn svg {
    background: rgba(0, 0, 0, 0.2);
    border-color: var(--primary-color);
    color: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .reset-meditation-btn:hover {
    background: rgba(var(--theme-accent-rgb), 0.1);
}

/* Карточки прогресса и статистики */
:is(body.theme-airy, body.theme-ember) .progress-card,
:is(body.theme-airy, body.theme-ember) .today-stats-card,
:is(body.theme-airy, body.theme-ember) .week-stats-card,
:is(body.theme-airy, body.theme-ember) .weekly-stats-card,
:is(body.theme-airy, body.theme-ember) .arati-weekly-stats {
    background: rgba(0, 0, 0, 0.2) !important;
    border-color: rgba(var(--theme-accent-rgb), 0.3) !important;
    border: 1px solid rgba(var(--theme-accent-rgb), 0.3) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(var(--theme-accent-rgb), 0.2);
}

:is(body.theme-airy, body.theme-ember) .progress-reset-btn {
    background: rgba(var(--theme-accent-rgb), 0.15) !important;
    border-color: rgba(var(--theme-accent-rgb), 0.4) !important;
    color: rgba(var(--theme-accent-rgb), 0.8) !important;
}

:is(body.theme-airy, body.theme-ember) .progress-reset-btn:hover {
    background: rgba(var(--theme-accent-rgb), 0.25) !important;
    border-color: rgba(var(--theme-accent-rgb), 0.6) !important;
    color: var(--primary-color) !important;
}

:is(body.theme-airy, body.theme-ember) .progress-add-btn {
    background: rgba(var(--theme-accent-rgb), 0.15) !important;
    border-color: rgba(var(--theme-accent-rgb), 0.4) !important;
    color: rgba(var(--theme-accent-rgb), 0.8) !important;
}

:is(body.theme-airy, body.theme-ember) .progress-add-btn:hover {
    background: rgba(var(--theme-accent-rgb), 0.25) !important;
    border-color: rgba(var(--theme-accent-rgb), 0.6) !important;
    color: var(--primary-color) !important;
}

:is(body.theme-airy, body.theme-ember) .progress-add-btn {
    background: rgba(var(--theme-accent-rgb), 0.15) !important;
    border-color: rgba(var(--theme-accent-rgb), 0.4) !important;
    color: rgba(var(--theme-accent-rgb), 0.8) !important;
}

:is(body.theme-airy, body.theme-ember) .progress-add-btn:hover {
    background: rgba(var(--theme-accent-rgb), 0.25) !important;
    border-color: rgba(var(--theme-accent-rgb), 0.6) !important;
    color: var(--primary-color) !important;
}

:is(body.theme-airy, body.theme-ember) .circles-stats {
    border-color: rgba(var(--theme-accent-rgb), 0.3) !important;
}

:is(body.theme-airy, body.theme-ember) .circles-stats * {
    border-color: rgba(var(--theme-accent-rgb), 0.3) !important;
}

:is(body.theme-airy, body.theme-ember) .action-btn {
    background: rgba(0, 0, 0, 0.2) !important;
    border-color: var(--primary-color) !important;
    border: 2px solid var(--primary-color) !important;
    color: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .action-btn:hover {
    background: rgba(var(--theme-accent-rgb), 0.1) !important;
    border-color: var(--primary-color) !important;
}

:is(body.theme-airy, body.theme-ember) .action-btn.active {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%) !important;
    border-color: var(--primary-dark) !important;
    color: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .action-btn svg {
    color: #fff !important;
    stroke: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .action-btn svg path,
:is(body.theme-airy, body.theme-ember) .action-btn svg circle,
:is(body.theme-airy, body.theme-ember) .action-btn svg rect,
:is(body.theme-airy, body.theme-ember) .action-btn svg line,
:is(body.theme-airy, body.theme-ember) .action-btn svg polygon,
:is(body.theme-airy, body.theme-ember) .action-btn svg polyline {
    stroke: #fff !important;
    fill: none !important;
}

:is(body.theme-airy, body.theme-ember) .action-btn.active svg {
    color: #fff !important;
    stroke: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .action-btn.active svg path,
:is(body.theme-airy, body.theme-ember) .action-btn.active svg circle,
:is(body.theme-airy, body.theme-ember) .action-btn.active svg rect,
:is(body.theme-airy, body.theme-ember) .action-btn.active svg line,
:is(body.theme-airy, body.theme-ember) .action-btn.active svg polygon,
:is(body.theme-airy, body.theme-ember) .action-btn.active svg polyline {
    stroke: #fff !important;
    fill: none !important;
}

:is(body.theme-airy, body.theme-ember) .stats-item,
:is(body.theme-airy, body.theme-ember) .stats-label {
    color: rgba(255, 255, 255, 0.8) !important;
}

:is(body.theme-airy, body.theme-ember) .stats-value {
    color: var(--primary-color) !important;
}

/* Карточки статистики профиля */
:is(body.theme-airy, body.theme-ember) .stat-card {
    border-color: rgba(var(--theme-accent-rgb), 0.3) !important;
}

:is(body.theme-airy, body.theme-ember) .stat-card:hover {
    border-color: rgba(var(--theme-accent-rgb), 0.5) !important;
}

:is(body.theme-airy, body.theme-ember) .stat-card-highlight {
    border-color: var(--primary-color) !important;
    background: rgba(var(--theme-accent-rgb), 0.1) !important;
}

:is(body.theme-airy, body.theme-ember) .stat-header {
    border-bottom-color: rgba(var(--theme-accent-rgb), 0.2) !important;
}

:is(body.theme-airy, body.theme-ember) .stat-icon {
    color: var(--primary-color) !important;
    stroke: var(--primary-color) !important;
    fill: none !important;
}

:is(body.theme-airy, body.theme-ember) .stat-value {
    color: var(--primary-color) !important;
}

:is(body.theme-airy, body.theme-ember) .stat-label {
    color: rgba(255, 255, 255, 0.6) !important;
}

:is(body.theme-airy, body.theme-ember) .install-app-btn {
    border-color: rgba(var(--theme-accent-rgb), 0.7) !important;
    color: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .install-app-btn:hover {
    background: rgba(var(--theme-accent-rgb), 0.15) !important;
    border-color: var(--primary-color) !important;
}

:is(body.theme-airy, body.theme-ember) .install-app-btn svg {
    color: var(--primary-color) !important;
    stroke: var(--primary-color) !important;
}

:is(body.theme-airy, body.theme-ember) .add-reading-time-btn {
    background: rgba(0, 0, 0, 0.2) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .add-reading-time-btn * {
    color: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .add-reading-time-btn span {
    color: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .add-reading-time-btn:hover {
    background: rgba(var(--theme-accent-rgb), 0.1) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .add-reading-time-btn:hover * {
    color: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .add-reading-time-btn:hover span {
    color: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .add-btn {
    background: var(--primary-color) !important;
    color: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .add-btn:hover {
    background: var(--primary-light) !important;
    transform: translateY(-2px);
}

:is(body.theme-airy, body.theme-ember) .add-btn:active {
    transform: translateY(0);
}

:is(body.theme-airy, body.theme-ember) .add-reading-time-btn svg {
    color: #fff !important;
    fill: #fff !important;
    stroke: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .dhyana-item {
    border-color: rgba(var(--theme-accent-rgb), 0.3) !important;
}

:is(body.theme-airy, body.theme-ember) .dhyana-item.active {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%) !important;
    border-color: var(--primary-dark) !important;
}

:is(body.theme-airy, body.theme-ember) .dhyana-item:hover:not(.active) {
    border-color: var(--primary-color) !important;
    background: rgba(var(--theme-accent-rgb), 0.1) !important;
}

:is(body.theme-airy, body.theme-ember) .dhyana-item .dhyana-label {
    color: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .dhyana-item.active .dhyana-label {
    color: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .dhyana-icon {
    color: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .dhyana-item .dhyana-icon {
    color: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .dhyana-item svg {
    color: #fff !important;
    stroke: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .dhyana-item svg circle,
:is(body.theme-airy, body.theme-ember) .dhyana-item svg path,
:is(body.theme-airy, body.theme-ember) .dhyana-item svg line {
    stroke: #fff !important;
    fill: none !important;
}

:is(body.theme-airy, body.theme-ember) .dhyana-item.active .dhyana-icon {
    color: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .dhyana-item.active svg {
    color: #fff !important;
    stroke: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .dhyana-item.active svg circle,
:is(body.theme-airy, body.theme-ember) .dhyana-item.active svg path,
:is(body.theme-airy, body.theme-ember) .dhyana-item.active svg line {
    stroke: #fff !important;
    fill: none !important;
}

/* Недельные графики и календари */
:is(body.theme-airy, body.theme-ember) .week-day {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

:is(body.theme-airy, body.theme-ember) .week-day.selected {
    background: rgba(var(--theme-accent-rgb), 0.2);
    border: 2px solid var(--primary-color);
}

:is(body.theme-airy, body.theme-ember) .day-bar {
    background: rgba(var(--theme-accent-rgb), 0.3);
}

:is(body.theme-airy, body.theme-ember) .day-bar.has-data {
    background: var(--primary-color);
}

:is(body.theme-airy, body.theme-ember) .day-label {
    color: rgba(255, 255, 255, 0.6) !important;
}

:is(body.theme-airy, body.theme-ember) .week-day.today .day-label {
    color: var(--primary-color) !important;
}

:is(body.theme-airy, body.theme-ember) .day-time {
    color: rgba(255, 255, 255, 0.8) !important;
}

:is(body.theme-airy, body.theme-ember) .calendar-day {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(var(--theme-accent-rgb), 0.3);
}

:is(body.theme-airy, body.theme-ember) .calendar-day.today {
    border-color: var(--primary-color);
    background: rgba(var(--theme-accent-rgb), 0.15);
}

:is(body.theme-airy, body.theme-ember) .calendar-day.has-data {
    border-color: var(--primary-color);
    background: rgba(var(--theme-accent-rgb), 0.2);
}

:is(body.theme-airy, body.theme-ember) .calendar-day.selected {
    background: rgba(var(--theme-accent-rgb), 0.3);
    border-color: var(--primary-color);
    box-shadow: 0 0 10px rgba(var(--theme-accent-rgb), 0.4);
}

:is(body.theme-airy, body.theme-ember) .calendar-nav-btn {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(var(--theme-accent-rgb), 0.3) !important;
    color: var(--primary-color) !important;
}

:is(body.theme-airy, body.theme-ember) .calendar-nav-btn:hover {
    background: rgba(var(--theme-accent-rgb), 0.1) !important;
    border-color: var(--primary-color) !important;
}

:is(body.theme-airy, body.theme-ember) .calendar-nav-btn svg {
    color: var(--primary-color) !important;
    stroke: var(--primary-color) !important;
}

:is(body.theme-airy, body.theme-ember) .calendar-nav-btn:hover svg {
    color: var(--primary-light) !important;
    stroke: var(--primary-light) !important;
}

:is(body.theme-airy, body.theme-ember) .calendar-day:hover:not(.empty) {
    background: rgba(var(--theme-accent-rgb), 0.25);
}

:is(body.theme-airy, body.theme-ember) .day-number {
    color: #fff !important;
}

/* Карточки арати */
:is(body.theme-airy, body.theme-ember) .arati-card {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(var(--theme-accent-rgb), 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(var(--theme-accent-rgb), 0.2);
}

:is(body.theme-airy, body.theme-ember) .arati-card.arati-done {
    border-color: rgba(var(--theme-accent-rgb), 0.5);
    background: rgba(0, 0, 0, 0.25);
}

:is(body.theme-airy, body.theme-ember) .arati-card.arati-not-done {
    border-color: rgba(var(--theme-accent-rgb), 0.3);
}

:is(body.theme-airy, body.theme-ember) .arati-btn {
    background: rgba(0, 0, 0, 0.2) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .arati-btn:hover {
    background: rgba(var(--theme-accent-rgb), 0.1) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .arati-btn.active {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%) !important;
    border-color: var(--primary-dark) !important;
    color: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .arati-btn span,
:is(body.theme-airy, body.theme-ember) .arati-btn svg {
    color: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .arati-btn.active span,
:is(body.theme-airy, body.theme-ember) .arati-btn.active svg {
    color: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .arati-name {
    color: #fff !important;
    font-size: 15px;
}

:is(body.theme-airy, body.theme-ember) .status-text {
    color: rgba(255, 255, 255, 0.8) !important;
}

:is(body.theme-airy, body.theme-ember) .arati-btn {
    background: rgba(0, 0, 0, 0.2) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .arati-btn:hover {
    background: rgba(var(--theme-accent-rgb), 0.1) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .arati-btn.active {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%) !important;
    border-color: var(--primary-dark) !important;
    color: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .arati-btn span,
:is(body.theme-airy, body.theme-ember) .arati-btn svg {
    color: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .arati-btn.active span,
:is(body.theme-airy, body.theme-ember) .arati-btn.active svg {
    color: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .arati-text-link {
    color: var(--primary-color) !important;
}

:is(body.theme-airy, body.theme-ember) .arati-text-link:hover {
    color: var(--primary-dark) !important;
}

/* Модальное окно с текстом арати - синяя тема */
:is(body.theme-airy, body.theme-ember) .arati-text-modal-content {
    border-color: rgba(var(--theme-accent-rgb), 0.3) !important;
}

:is(body.theme-airy, body.theme-ember) .arati-translation-toggle {
    color: var(--primary-color) !important;
}

:is(body.theme-airy, body.theme-ember) .arati-translation-toggle:hover {
    color: var(--primary-dark) !important;
}

:is(body.theme-airy, body.theme-ember) .arati-text-number {
    color: var(--primary-color) !important;
}

:is(body.theme-airy, body.theme-ember) .arati-text-section {
    color: var(--primary-color) !important;
}

:is(body.theme-airy, body.theme-ember) .arati-text-translation {
    background: rgba(var(--theme-accent-rgb), 0.05) !important;
}

:is(body.theme-airy, body.theme-ember) .arati-today-stats {
    border-color: rgba(var(--theme-accent-rgb), 0.3) !important;
}

/* Недельные графики арати */
:is(body.theme-airy, body.theme-ember) .arati-week-day {
    background: rgba(0, 0, 0, 0.1) !important;
}

:is(body.theme-airy, body.theme-ember) .arati-week-day.selected {
    background: rgba(var(--theme-accent-rgb), 0.2) !important;
    border: 2px solid var(--primary-color) !important;
}

:is(body.theme-airy, body.theme-ember) .arati-week-day.today .arati-week-label {
    color: var(--primary-color) !important;
}

:is(body.theme-airy, body.theme-ember) .arati-week-bar {
    background: rgba(var(--theme-accent-rgb), 0.2) !important;
}

:is(body.theme-airy, body.theme-ember) .arati-week-bar.done {
    background: var(--primary-color) !important;
}

:is(body.theme-airy, body.theme-ember) .arati-week-bar.not-done {
    background: rgba(255, 68, 68, 0.6) !important;
}

/* Индикаторы статуса */
:is(body.theme-airy, body.theme-ember) .status-indicator.done {
    background: var(--primary-color);
}

:is(body.theme-airy, body.theme-ember) .status-indicator.not-done {
    background: rgba(var(--theme-accent-rgb), 0.3);
}

:is(body.theme-airy, body.theme-ember) .status-indicator.not-set {
    background: rgba(var(--theme-accent-rgb), 0.2);
}

/* Формы и инпуты */
:is(body.theme-airy, body.theme-ember) .add-circles-form,
:is(body.theme-airy, body.theme-ember) .circles-input,
:is(body.theme-airy, body.theme-ember) .number-btn {
    background: rgba(0, 0, 0, 0.2);
    border-color: var(--primary-color);
    color: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .number-btn:hover {
    background: rgba(var(--theme-accent-rgb), 0.1);
}

:is(body.theme-airy, body.theme-ember) .circles-input:focus {
    border-color: var(--primary-light);
    box-shadow: 0 0 10px rgba(var(--theme-accent-rgb), 0.3);
}

/* Модальные окна */
:is(body.theme-airy, body.theme-ember) .modal-overlay {
    background: rgba(10, 10, 26, 0.95);
    backdrop-filter: blur(10px);
}

:is(body.theme-airy, body.theme-ember) .modal-content {
    background: rgb(0 0 0 / 79%);
    border-color: rgba(var(--theme-accent-rgb), 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

:is(body.theme-airy, body.theme-ember) .modal-title {
    color: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .modal-header {
    border-bottom-color: rgba(var(--theme-accent-rgb), 0.2) !important;
}

:is(body.theme-airy, body.theme-ember) .modal-close:hover {
    color: var(--primary-color) !important;
}

:is(body.theme-airy, body.theme-ember) .modal-btn,
:is(body.theme-airy, body.theme-ember) .modal-save-btn,
:is(body.theme-airy, body.theme-ember) .modal-cancel-btn {
    background: rgba(0, 0, 0, 0.2);
    border-color: var(--primary-color);
    color: #fff !important;
}

:is(body.theme-airy, body.theme-ember) .modal-btn:hover,
:is(body.theme-airy, body.theme-ember) .modal-save-btn:hover {
    background: rgba(var(--theme-accent-rgb), 0.1);
}

:is(body.theme-airy, body.theme-ember) .modal-save-btn {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    color: #fff !important;
}

/* Иконки в календаре арати */
:is(body.theme-airy, body.theme-ember) .day-arati.done {
    color: var(--primary-color) !important;
}

:is(body.theme-airy, body.theme-ember) .day-arati.not-done {
    color: rgba(var(--theme-accent-rgb), 0.6) !important;
}



/* ==========================================================================
   Sadhana AI Pro 2.0 — чёрно-жёлтая основная тема и десктопная раскладка
   ========================================================================== */
html { scrollbar-color: #3A3A3A #0A0A0A; }
::selection { background: #FFD400; color: #0A0A0A; }
:focus-visible { outline: 2px solid #FFD400; outline-offset: 3px; }
.logo-text, .dhyana-title, .asana-title, .journey-title, .arati-title, .rituals-title, .profile-title, .settings-title, .japa-title, .page-title, h1 {
    font-family: var(--font-display);
    letter-spacing: -.02em;
}
html.theme-default body, body.theme-default { color: #F5F5F0; }
html.theme-default .app-container {
    background: #0A0A0A;
    background-image: radial-gradient(700px 420px at 100% -80px, rgba(255, 212, 0, .12), transparent 70%);
    background-repeat: no-repeat;
}
html.theme-default .bottom-nav { background: rgba(14, 14, 14, .94); border-top: 1px solid #2B2B2B; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

/* ---------- Компьютер: боковое меню вместо нижнего, широкая рабочая область ---------- */
@media (min-width: 1024px) {
    :root { --side: 264px; --content: 920px; }
    .app-container {
        max-width: none;
        box-shadow: none;
        padding-left: calc(var(--side) + max(32px, (100vw - var(--side) - var(--content)) / 2));
        padding-right: max(32px, (100vw - var(--side) - var(--content)) / 2);
        padding-bottom: 48px;
    }
    .top-header { position: static; padding: 20px 0 0; min-height: 64px; justify-content: flex-end; }
    .top-header .logo { position: fixed; left: 28px; top: 26px; z-index: 1003; gap: 12px; }
    .logo-text { font-size: 15px; font-weight: 700; }
    .bottom-nav {
        position: fixed; left: 0; right: auto; top: 0; bottom: 0;
        width: var(--side); max-width: none; height: 100vh; margin: 0;
        transform: none; border-radius: 0;
        display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 6px;
        padding: 104px 16px 24px;
        border-top: 0; border-right: 1px solid #2B2B2B;
    }
    html.theme-default .bottom-nav { background: #0E0E0E; border-top: 0; }
    .bottom-nav .nav-item {
        flex: 0 0 auto; flex-direction: row; justify-content: flex-start; align-items: center; gap: 14px;
        width: 100%; min-height: 52px; padding: 0 16px; border-radius: 14px;
        transition: background-color .2s, color .2s;
    }
    .bottom-nav .nav-item .nav-label { font-size: 15px; font-weight: 600; }
    .bottom-nav .nav-item .nav-icon { width: 28px; display: inline-flex; justify-content: center; }
    html.theme-default .bottom-nav .nav-item:hover { background: #1A1A1A; }
    html.theme-default .bottom-nav .nav-item.active { background: #FFD400; color: #0A0A0A; }
    html.theme-default .bottom-nav .nav-item.active .nav-label,
    html.theme-default .bottom-nav .nav-item.active .nav-icon,
    html.theme-default .bottom-nav .nav-item.active svg { color: #0A0A0A; stroke: #0A0A0A; }
    .dhyana-title, .asana-title, .journey-title, .arati-title, .rituals-title, .profile-title, .settings-title, .japa-title { font-size: 34px; text-align: left; }
    .count-display-wrapper { width: min(460px, 52vh); height: min(460px, 52vh); }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Основная тема: читаемость */
html.theme-default body { --text-color: #F5F5F0; }
html.theme-default .dhyana-title, html.theme-default .asana-title, html.theme-default .journey-title, html.theme-default .arati-title,
html.theme-default .rituals-title, html.theme-default .profile-title, html.theme-default .settings-title, html.theme-default .japa-title,
html.theme-default .logo-text { color: #FFD400; text-shadow: none; }
html.theme-default .start-button, html.theme-default .start-btn, html.theme-default [class*="start-button"], html.theme-default [class*="start-btn"] { background: #FFD400; color: #0A0A0A; box-shadow: 0 14px 30px -14px rgba(255, 212, 0, .7); }
html.theme-default .start-button *, html.theme-default .start-btn *, html.theme-default [class*="start-button"] *, html.theme-default [class*="start-btn"] * { color: #0A0A0A; stroke: #0A0A0A; }
html.theme-default .bottom-nav .nav-item { color: #A8A8A0; }
html.theme-default .bottom-nav .nav-item.active { color: #FFD400; }
@media (min-width: 1024px) {
    html.theme-default .bottom-nav .nav-item:hover { color: #F5F5F0; }
    html.theme-default .bottom-nav .nav-item.active { color: #0A0A0A; }
    .theme-circle { max-width: 132px; max-height: 132px; }
    .theme-circles, .theme-grid, .themes-grid { justify-content: flex-start; gap: 20px; }
}
html.theme-default .start-btn-icon { background: none !important; box-shadow: none !important; }
html.theme-default #startButtonText, html.theme-default [class*="start-btn"] span, html.theme-default [class*="start-button"] span { color: #0A0A0A !important; text-shadow: none !important; }
html.theme-default [class*="start-btn"]:not(svg), html.theme-default [class*="start-button"]:not(svg) { border-radius: 16px; }
html.theme-default .bottom-nav .nav-item .nav-label, html.theme-default .bottom-nav .nav-item .nav-icon { color: #A8A8A0 !important; }
html.theme-default .bottom-nav .nav-item.active .nav-label, html.theme-default .bottom-nav .nav-item.active .nav-icon { color: #FFD400 !important; }
@media (min-width: 1024px) {
    html.theme-default .bottom-nav .nav-item.active .nav-label, html.theme-default .bottom-nav .nav-item.active .nav-icon { color: #0A0A0A !important; }
    html.theme-default .bottom-nav .nav-item:not(.active):hover .nav-label { color: #F5F5F0 !important; }
}
html.theme-default [class$="-title"], html.theme-default h1 { text-shadow: none; }


/* ==========================================================================
   Панель «Сегодня» (js/today.js). Цвета берёт из переменных темы.
   ========================================================================== */
.td-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin-left: auto; margin-right: 12px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(128, 128, 128, .35); background: rgba(128, 128, 128, .12); color: inherit; font: 600 13px/1 var(--font-body, inherit); cursor: pointer; font-variant-numeric: tabular-nums; z-index: 20; position: relative; transition: border-color .2s, background-color .2s; }
.td-chip:hover { border-color: var(--primary-color); }
.td-chip svg { width: 16px; height: 16px; fill: none; stroke: var(--primary-color); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.td-chip b { font-weight: 700; }
.td-chip span { padding-left: 8px; border-left: 1px solid rgba(128, 128, 128, .4); color: var(--primary-color); }
.td-backdrop { position: fixed; inset: 0; z-index: 2000; background: rgba(0, 0, 0, .6); opacity: 0; pointer-events: none; transition: opacity .3s; }
.td-panel { position: fixed; z-index: 2001; top: 0; right: 0; bottom: 0; width: min(380px, 100vw); padding: 20px 20px 32px; overflow-y: auto; overscroll-behavior: contain; background: #0E0E0E; color: #F5F5F0; border-left: 1px solid #2B2B2B; transform: translateX(100%); transition: transform .4s cubic-bezier(.16, 1, .3, 1); font-family: var(--font-body, system-ui, sans-serif); }
.td-open .td-panel { transform: none; }
.td-open .td-backdrop { opacity: 1; pointer-events: auto; }
body.theme-white .td-panel, body.theme-aqua .td-panel { background: #FFFFFF; color: #1A1A1A; border-color: #E2E2E2; }
.td-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.td-head h2 { margin: 0; font: 700 20px/1.1 var(--font-display, inherit); letter-spacing: -.02em; color: var(--primary-color); text-shadow: none; }
.td-close { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 12px; background: rgba(128, 128, 128, .14); color: inherit; cursor: pointer; }
.td-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.td-hero { display: flex; align-items: center; gap: 18px; }
.td-ring { position: relative; width: 112px; height: 112px; flex: none; }
.td-ring svg { width: 100%; height: 100%; rotate: -90deg; fill: none; stroke-width: 10; stroke: rgba(128, 128, 128, .22); }
.td-ring__v { stroke: var(--primary-color); stroke-linecap: round; transition: stroke-dashoffset .8s cubic-bezier(.16, 1, .3, 1); }
.td-ring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 28px/1 var(--font-display, inherit); letter-spacing: -.03em; }
.td-ring small { font-size: 14px; margin-left: 2px; opacity: .7; }
.td-streak { margin: 0; font-size: 15px; }
.td-streak b { font: 700 30px/1 var(--font-display, inherit); color: var(--primary-color); margin-right: 4px; }
.td-streak span { display: block; margin-top: 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; opacity: .65; }
.td-muted { margin: 6px 0 0; font-size: 13px; line-height: 1.45; opacity: .7; }
.td-left { margin: 16px 0 0; padding: 12px 14px; border-radius: 14px; background: rgba(128, 128, 128, .12); font-size: 14px; line-height: 1.4; }
.td-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.td-row { display: block; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(128, 128, 128, .25); color: inherit; text-decoration: none; transition: border-color .2s; }
.td-row:hover { border-color: var(--primary-color); }
.td-row__top { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.td-row__top span { opacity: .75; font-variant-numeric: tabular-nums; white-space: nowrap; }
.td-row.is-done .td-row__top span { color: var(--primary-color); opacity: 1; font-weight: 600; }
.td-bar { display: block; height: 6px; margin-top: 10px; border-radius: 6px; background: rgba(128, 128, 128, .22); overflow: hidden; }
.td-bar i { display: block; height: 100%; border-radius: 6px; background: var(--primary-color); transition: width .6s cubic-bezier(.16, 1, .3, 1); }
.td-h { margin: 24px 0 10px; font: 600 12px/1 var(--font-body, inherit); text-transform: uppercase; letter-spacing: .1em; opacity: .6; }
.td-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
.td-week li { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; opacity: .75; }
.td-week__bar { display: flex; align-items: flex-end; width: 100%; height: 64px; border-radius: 8px; background: rgba(128, 128, 128, .14); overflow: hidden; }
.td-week__bar i { display: block; width: 100%; background: var(--primary-color); border-radius: 8px 8px 0 0; opacity: .55; }
.td-week .is-today { opacity: 1; font-weight: 700; color: var(--primary-color); }
.td-week .is-today .td-week__bar i { opacity: 1; }
.td-week .is-future { opacity: .35; }
.td-goals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.td-goals label { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; font-size: 12px; line-height: 1.3; opacity: .9; }
.td-goals input { width: 100%; min-height: 44px; padding: 0 10px; border-radius: 12px; border: 1px solid rgba(128, 128, 128, .35); background: transparent; color: inherit; font: 600 16px/1 var(--font-body, inherit); }
.td-goals input:focus { outline: none; border-color: var(--primary-color); }
.td-total { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.td-total li { padding: 12px; border-radius: 14px; background: rgba(128, 128, 128, .12); font-size: 12px; line-height: 1.3; }
.td-total b { display: block; margin-bottom: 4px; font: 700 20px/1 var(--font-display, inherit); color: var(--primary-color); }
.td-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.td-actions button { flex: 1 1 140px; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(128, 128, 128, .35); background: transparent; color: inherit; font: 600 14px/1 var(--font-body, inherit); cursor: pointer; transition: border-color .2s, background-color .2s; }
.td-actions button:hover { border-color: var(--primary-color); background: rgba(128, 128, 128, .12); }
.td-msg { min-height: 18px; margin: 10px 0 0; font-size: 13px; color: var(--primary-color); }
.td-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.td-keyhint { margin: 14px 0 0; text-align: center; font-size: 13px; opacity: .65; }
.td-keyhint kbd { display: inline-block; padding: 3px 8px; border-radius: 6px; border: 1px solid rgba(128, 128, 128, .5); font: 600 12px/1.2 var(--font-body, inherit); }
#countDisplay:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 6px; }

@media (max-width: 1023px) {
    .td-panel { top: auto; left: 0; width: 100%; max-height: 88vh; border-left: 0; border-top: 1px solid #2B2B2B; border-radius: 22px 22px 0 0; transform: translateY(100%); padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
    .td-chip { margin-right: 10px; min-height: 36px; padding: 0 10px; }
}
/* Широкий экран: панель закреплена справа и видна всегда */
@media (min-width: 1440px) {
    :root { --today: 360px; }
    .td-panel { transform: none; width: var(--today); z-index: 5; }
    .td-backdrop, .td-chip, .td-close { display: none; }
    .app-container { padding-right: calc(var(--today) + max(32px, (100vw - var(--side) - var(--today) - var(--content)) / 2)); padding-left: calc(var(--side) + max(32px, (100vw - var(--side) - var(--today) - var(--content)) / 2)); }
}


/* ==========================================================================
   Sadhana AI Pro 3.0 — доводка основной темы до уровня портфолио:
   крупная типографика, плотные карточки вместо тонких рамок, «дышащий» счётчик.
   ========================================================================== */
html.theme-default .app-container { background-image: radial-gradient(900px 560px at 50% -140px, rgba(255, 212, 0, .16), transparent 70%); }

/* Заголовок экрана */
html.theme-default .rotating-title, html.theme-default .mantra-text, html.theme-default [class$="-title"].rotating-title {
  font: 800 clamp(2rem, 4.2vw, 3.5rem)/1.02 var(--font-display) !important; letter-spacing: -.035em !important; color: #F5F5F0 !important; text-shadow: none !important;
}
html.theme-default .mantra-display { height: auto; min-height: 0; margin-bottom: 18px; }

/* Карточки: плотная поверхность вместо жёлтой проволоки */
html.theme-default :is(.progress-card, .tracker-card, .today-stats-card, .weekly-stats-card, .arati-card, .ritual-card, .rituals-card, .stats-card, .profile-card, .settings-section, .history-btn, .language-option, .lang-option) {
  background: #141414 !important; border: 1px solid #2B2B2B !important; border-radius: 22px !important; box-shadow: none !important;
}
html.theme-default .progress-card { padding: 16px 20px !important; }
html.theme-default .progress-text { font-size: 16px !important; color: #A8A8A0 !important; }
html.theme-default .progress-text span { color: #F5F5F0 !important; font-weight: 600; }
html.theme-default .progress-text span[id] { color: #FFD400 !important; font-family: var(--font-display); }

/* Кнопки-инструменты */
html.theme-default :is(.settings-icon-btn, .progress-reset-btn, .japa-audio-btn) {
  width: 48px !important; height: 48px !important; border-radius: 16px !important; background: #1C1C1C !important; border: 1px solid #2B2B2B !important; color: #F5F5F0 !important; box-shadow: none !important; transition: border-color .2s, background-color .2s, translate .3s cubic-bezier(.16, 1, .3, 1) !important;
}
html.theme-default .japa-audio-btn { border-radius: 50% !important; }
html.theme-default :is(.settings-icon-btn, .progress-reset-btn, .japa-audio-btn):hover { border-color: #FFD400 !important; translate: 0 -2px; }
html.theme-default :is(.settings-icon-btn, .progress-reset-btn, .japa-audio-btn) svg { color: #FFD400; stroke: currentColor; }
html.theme-default .settings-icons-container { gap: 10px !important; }

/* Счётчик джапы: крупный, с мягким свечением, «дышит» в покое */
html.theme-default .count-display {
  border: 0 !important; background: radial-gradient(circle at 50% 38%, #26210A 0%, #121109 46%, #0A0A0A 72%) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 212, 0, .28), inset 0 -40px 80px -30px rgba(255, 212, 0, .22), 0 0 90px -10px rgba(255, 212, 0, .38) !important;
  animation: sd-breathe 6s ease-in-out infinite; transition: scale .18s cubic-bezier(.16, 1, .3, 1) !important;
}
html.theme-default .count-display:active { scale: .975; }
@keyframes sd-breathe { 50% { box-shadow: inset 0 0 0 1px rgba(255, 212, 0, .4), inset 0 -40px 90px -30px rgba(255, 212, 0, .34), 0 0 130px 0 rgba(255, 212, 0, .5); } }
html.theme-default .big-count { font: 800 clamp(4rem, 10vw, 7.5rem)/1 var(--font-display) !important; letter-spacing: -.05em !important; color: #F5F5F0 !important; text-shadow: none !important; font-variant-numeric: tabular-nums; }
html.theme-default .count-ratio { margin-top: 8px; font: 700 clamp(1rem, 1.6vw, 1.375rem)/1 var(--font-display) !important; color: #FFD400 !important; letter-spacing: -.02em; }
html.theme-default .tap-hint { margin-top: 12px; font-size: 13px !important; color: #8C8C84 !important; }
html.theme-default .progress-ring-bg { stroke: #1F1F1F !important; }
html.theme-default .progress-ring-fill { stroke: #FFD400 !important; filter: drop-shadow(0 0 6px rgba(255, 212, 0, .8)); transition: stroke-dashoffset .35s cubic-bezier(.16, 1, .3, 1) !important; }
html.theme-default .td-keyhint { color: #8C8C84; }

/* Списки: бхаджаны и справочник */
html.theme-default .arati-cards, html.theme-default .rituals-cards { gap: 8px !important; }
html.theme-default :is(.arati-card, .ritual-card) { min-height: 68px !important; padding: 0 22px !important; display: flex; align-items: center; cursor: pointer; transition: border-color .2s, translate .35s cubic-bezier(.16, 1, .3, 1), background-color .2s !important; }
html.theme-default :is(.arati-card, .ritual-card):hover { border-color: #FFD400 !important; translate: 6px 0; background: #181818 !important; }
html.theme-default :is(.arati-name, .ritual-name) { font: 600 17px/1.25 var(--font-body) !important; color: #F5F5F0 !important; }
html.theme-default .arati-dot { width: 12px !important; height: 12px !important; background: #3A3A3A !important; }
html.theme-default :is(.arati-show-all, .rituals-show-all, .profile-show-all, [class$="show-all"]) { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; font-size: 15px !important; font-weight: 600; color: #FFD400 !important; text-decoration: underline; text-underline-offset: 4px; }

/* Подъём и статистика */
html.theme-default .card-title { font: 700 20px/1.2 var(--font-display) !important; letter-spacing: -.02em; color: #F5F5F0 !important; background: none !important; }
html.theme-default :is(.stat-label, .summary-label, .card-date) { font-size: 13px !important; color: #A8A8A0 !important; }
html.theme-default .stat-value { font: 700 clamp(1.5rem, 2.6vw, 2.25rem)/1.1 var(--font-display) !important; color: #FFD400 !important; letter-spacing: -.03em; }
html.theme-default .summary-value { font: 700 18px/1.2 var(--font-display) !important; color: #F5F5F0 !important; }
html.theme-default :is(.today-stats-card, .weekly-stats-card) { padding: 22px 24px !important; }
html.theme-default .day-bar { background: #1F1F1F !important; border-radius: 8px !important; }
html.theme-default .day-label { font-size: 12px !important; color: #A8A8A0 !important; }
html.theme-default .week-day.today .day-label { color: #FFD400 !important; font-weight: 700; }
html.theme-default .history-btn { min-height: 60px !important; font: 700 16px/1 var(--font-body) !important; color: #F5F5F0 !important; transition: border-color .2s, translate .3s cubic-bezier(.16, 1, .3, 1) !important; }
html.theme-default .history-btn:hover { border-color: #FFD400 !important; translate: 0 -3px; }

/* Главная кнопка практики */
html.theme-default [class*="start-meditation-btn"], html.theme-default .start-buttons button {
  min-height: 64px !important; padding: 0 34px !important; border-radius: 20px !important; font: 800 15px/1 var(--font-body) !important; letter-spacing: .04em !important;
}

/* Панель «Сегодня»: крупнее и плотнее */
html.theme-default .td-panel { background: #0C0C0C; }
html.theme-default .td-head h2 { font-size: 24px; }
html.theme-default .td-row, html.theme-default .td-left, html.theme-default .td-total li { background: #141414; border-color: #2B2B2B; border-radius: 18px; }
html.theme-default .td-row__top { font-size: 15px; }
html.theme-default .td-left { font-size: 15px; }
html.theme-default .td-bar { height: 8px; }
html.theme-default .td-goals label { font-size: 13px; }
html.theme-default .td-total li { font-size: 13px; }
html.theme-default .td-total b { font-size: 24px; }
html.theme-default .td-week__bar { height: 76px; border-radius: 10px; background: #141414; }
html.theme-default .td-ring { width: 124px; height: 124px; }
html.theme-default .td-ring__v { filter: drop-shadow(0 0 6px rgba(255, 212, 0, .7)); }

@media (min-width: 1024px) {
  :root { --side: 272px; --content: 860px; }
  html.theme-default body { font-size: 16px; }
  html.theme-default .bottom-nav { padding-top: 112px; gap: 4px; }
  html.theme-default .bottom-nav .nav-item { min-height: 56px; border-radius: 16px; }
  html.theme-default .bottom-nav .nav-item .nav-label { font-size: 16px !important; }
  html.theme-default .logo-text { font-size: 17px !important; }
  html.theme-default .top-header .logo { top: 30px; }
  html.theme-default .count-display-wrapper { width: min(520px, 58vh) !important; height: min(520px, 58vh) !important; margin-inline: auto; }
  html.theme-default .count-display-core { width: 100% !important; height: 100% !important; }
  html.theme-default .progress-ring-wrapper { width: 86% !important; height: 86% !important; }
  html.theme-default .count-display { width: 80% !important; height: 80% !important; }
  html.theme-default .rotating-title, html.theme-default .mantra-text { text-align: left !important; }
  html.theme-default .mantra-display { justify-content: flex-start !important; width: 100%; }
}
@media (min-width: 1440px) { :root { --today: 392px; } }
@media (prefers-reduced-motion: reduce) { html.theme-default .count-display { animation: none; } }

/* Заголовок экрана не наезжает на первую карточку */
html.theme-default h1.rotating-title { height: auto !important; min-height: 0 !important; margin: 0 0 20px !important; padding: 0 !important; position: static !important; }
@media (min-width: 1024px) {
  html.theme-default h1.rotating-title { width: 100%; margin-bottom: 26px !important; }
  html.theme-default :is(.journey-content, .arati-content, .rituals-content, .profile-content, .dhyana-content, .asana-content, .settings-content) { padding-top: 8px !important; }
}

/* Счётчик всегда остаётся кругом, при любой высоте окна */
@media (min-width: 1024px) {
  html.theme-default .count-display-wrapper { height: auto !important; aspect-ratio: 1; }
  html.theme-default .count-display-core { height: auto !important; aspect-ratio: 1; }
  html.theme-default .progress-ring-wrapper { height: auto !important; aspect-ratio: 1; }
  html.theme-default .count-display { height: auto !important; aspect-ratio: 1; }
}