/* ==========================================================================
   Screen-Specific Styles (Screens 1 to 17 & Profile)
   ========================================================================== */

/* --------------------------------------------------------------------------
   SCREEN-01: Welcome / Onboarding
   -------------------------------------------------------------------------- */
.welcome-screen {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-page);
  z-index: 100;
  box-sizing: border-box;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  text-align: center;
  padding: 0;
}

.welcome-screen-inner {
  min-height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.welcome-logo-wrap {
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.welcome-logo-badge {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--accent-primary);
  color: var(--text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  box-shadow: var(--shadow-glow);
  margin-bottom: 6px;
}

.welcome-logo-img {
  width: 48px;
  height: 48px;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.18));
  margin-bottom: 6px;
  display: block;
  border: none;
  background: transparent;
}

.welcome-brand-name {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.5px;
}

.welcome-art-container {
  flex: 1;
  max-height: 280px;
  margin: var(--space-md) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.welcome-art-container svg {
  width: 100%;
  max-height: 100%;
}

.welcome-text-wrap {
  margin-bottom: var(--space-xl);
}

.welcome-title {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
  line-height: 1.25;
}

.welcome-desc {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.5;
  max-width: 290px;
  margin: 0 auto;
}

.welcome-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: var(--space-lg);
}

.welcome-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--border-subtle);
  transition: all var(--transition-fast);
}

.welcome-dot.active {
  width: 20px;
  background: var(--accent-primary);
}

/* --------------------------------------------------------------------------
   SCREEN-05: Quick Templates Grid
   -------------------------------------------------------------------------- */
.templates-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: var(--space-md) 0;
}

.template-card {
  position: relative;
  width: 100%;
  text-align: left;
  font: inherit;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
}

.custom-template-card {
  padding-right: 56px;
}

.template-action {
  position: absolute;
  top: 6px;
  right: 32px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--bg-card-subtle);
  color: var(--text-secondary);
  cursor: pointer;
}

.template-action-danger {
  right: 4px;
  color: var(--accent-rose);
}

.template-card:active {
  transform: scale(0.96);
  border-color: var(--accent-primary);
  background: var(--accent-primary-subtle);
}

.template-icon {
  font-size: 1.4rem;
}

.template-info {
  display: flex;
  flex-direction: column;
}

.template-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
}

.template-subtitle {
  font-size: 0.74rem;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   SCREEN-07: Finish Day (Tags & Review)
   -------------------------------------------------------------------------- */
.day-tags-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: var(--space-sm) 0 var(--space-md) 0;
}

.day-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--radius-full);
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--text-primary);
}

.day-tag-remove {
  color: var(--text-muted);
  cursor: pointer;
}

.day-tag-add {
  border-style: dashed;
  color: var(--accent-primary);
  cursor: pointer;
}

.comment-textarea {
  width: 100%;
  min-height: 80px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-subtle);
  background: var(--bg-card-subtle);
  color: var(--text-primary);
  font-size: 0.92rem;
  resize: vertical;
  margin-bottom: var(--space-lg);
}

.comment-textarea:focus {
  border-color: var(--accent-primary);
  background: var(--bg-card);
}

/* --------------------------------------------------------------------------
   SCREEN-08 & 09: Day Result & Micro-experiment triggers
   -------------------------------------------------------------------------- */
.result-weather-art {
  width: 88px;
  height: 88px;
  margin: 0 auto var(--space-sm) auto;
}

.result-score-title {
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
  color: var(--text-primary);
  margin-bottom: var(--space-lg);
}

.experiment-triggers-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: var(--space-md) 0;
}

.experiment-trigger-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary);
}

.btn-dual-row {
  display: flex;
  gap: 10px;
  margin-top: var(--space-md);
}

/* --------------------------------------------------------------------------
   SCREEN-10: Micro-Experiment Result (3 large options)
   -------------------------------------------------------------------------- */
.exp-feedback-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: var(--space-lg) 0;
}

.exp-feedback-btn {
  padding: 16px 20px;
  border-radius: var(--radius-md);
  font-size: 1.05rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1.5px solid transparent;
  transition: all var(--transition-fast);
}

.exp-feedback-btn.yes {
  background: #d4ebd9;
  color: #1e5a32;
  border-color: #aed9b6;
}

.exp-feedback-btn.neutral {
  background: #fdf3d8;
  color: #7d5b16;
  border-color: #f6e2af;
}

.exp-feedback-btn.worse {
  background: #fde2df;
  color: #8c2e28;
  border-color: #f9c4c0;
}

.exp-feedback-btn:active {
  transform: scale(0.97);
}

/* --------------------------------------------------------------------------
   SCREEN-12: Calendar & History
   -------------------------------------------------------------------------- */
.calendar-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}

.calendar-month-label {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  text-align: center;
  margin-bottom: var(--space-lg);
}

.cal-weekday {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 4px 0;
}

.cal-day-cell {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  cursor: pointer;
  position: relative;
  transition: all var(--transition-fast);
}

.cal-day-cell:active {
  background: var(--bg-card-hover);
}

.cal-day-cell.selected {
  background: var(--accent-primary);
  color: var(--text-inverse);
  font-weight: 700;
}

.cal-day-cell.other-month {
  color: var(--text-muted);
  opacity: 0.4;
}

.cal-day-num {
  font-size: 0.82rem;
}

.cal-day-emoji {
  font-size: 0.68rem;
  line-height: 1;
}

.cal-day-count {
  min-height: 0.72rem;
  font-size: 0.62rem;
  line-height: 1;
  color: var(--accent-primary);
  font-weight: 700;
}

.cal-day-cell.selected .cal-day-count {
  color: var(--text-inverse);
}

/* --------------------------------------------------------------------------
   SCREENS 13-17: Ascetic Habits Tracker
   -------------------------------------------------------------------------- */
.ascetic-view {
  width: 100%;
  box-sizing: border-box;
}

.ascetic-archive-wrapper {
  width: 100%;
  box-sizing: border-box;
}

/* Metallic Molding Frame (3D Chrome Bezel with Glossy Glass Finish) */
.ascetic-big-card {
  width: 100%;
  box-sizing: border-box;
  position: relative;
  border-radius: 20px;
  padding: 10px 14px 10px;
  text-align: center;
  margin-bottom: var(--space-sm);
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s ease, padding 0.2s ease;
  overflow: hidden;

  /* Real 3D metallic chrome molding border */
  border: 2px solid transparent;
  background:
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    linear-gradient(135deg, #FFFFFF 0%, #CBD5E1 25%, #64748B 50%, #CBD5E1 75%, #FFFFFF 100%) border-box;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.18),
    inset 0 1px 1.5px rgba(255, 255, 255, 0.9),
    inset 0 -1px 1.5px rgba(0, 0, 0, 0.10),
    0 3px 10px rgba(0, 0, 0, 0.08);
}

/* Glossy reflection on upper portion (блеск/блик как на референсе) */
.ascetic-big-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 48%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.08) 65%, transparent 100%);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  pointer-events: none;
  z-index: 1;
}

.ascetic-big-card > * {
  position: relative;
  z-index: 2;
}

/* Collapsed state: forms a sleek 3D metallic pill button */
.ascetic-big-card.collapsed {
  padding: 8px 13px 5px !important;
  border-radius: 20px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.22),
    inset 0 1px 2px rgba(255, 255, 255, 0.95),
    inset 0 -1px 2px rgba(0, 0, 0, 0.14),
    0 4px 12px rgba(0, 0, 0, 0.09);
}

.ascetic-big-card.collapsed:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.25),
    inset 0 1.5px 2px rgba(255, 255, 255, 1),
    inset 0 -1.5px 2px rgba(0, 0, 0, 0.18),
    0 6px 16px rgba(0, 0, 0, 0.13);
}

/* Status-aware metallic molding reflections (сохраняем цветовую гамму приложения) */
.ascetic-big-card.tier-gold {
  background:
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    linear-gradient(135deg, #FEF08A 0%, #F59E0B 30%, #92400E 55%, #FCD34D 80%, #FFFBEB 100%) border-box;
  box-shadow:
    0 0 0 1px rgba(180, 83, 9, 0.35),
    inset 0 1px 1.8px rgba(255, 255, 255, 0.9),
    inset 0 -1px 1.5px rgba(146, 64, 14, 0.25),
    0 4px 14px rgba(245, 158, 11, 0.16);
}

.ascetic-big-card.tier-amber {
  background:
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    linear-gradient(135deg, #FEF3C7 0%, #EAB308 30%, #854D0E 55%, #FDE047 80%, #FFFFFF 100%) border-box;
  box-shadow:
    0 0 0 1px rgba(161, 98, 7, 0.3),
    inset 0 1px 1.5px rgba(255, 255, 255, 0.85),
    inset 0 -1px 1.5px rgba(133, 77, 14, 0.2),
    0 3px 12px rgba(234, 179, 8, 0.14);
}

.ascetic-big-card.tier-emerald {
  background:
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    linear-gradient(135deg, #D1FAE5 0%, #10B981 30%, #064E3B 55%, #6EE7B7 80%, #FFFFFF 100%) border-box;
  box-shadow:
    0 0 0 1px rgba(6, 78, 59, 0.32),
    inset 0 1px 1.8px rgba(255, 255, 255, 0.9),
    inset 0 -1px 1.5px rgba(6, 78, 59, 0.25),
    0 4px 14px rgba(16, 185, 129, 0.16);
}

.ascetic-big-card.tier-green {
  background:
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    linear-gradient(135deg, #E2E8F0 0%, #34D399 30%, #475569 55%, #A7F3D0 80%, #FFFFFF 100%) border-box;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.18),
    inset 0 1px 1.5px rgba(255, 255, 255, 0.85),
    inset 0 -1px 1.5px rgba(0, 0, 0, 0.12),
    0 3px 10px rgba(16, 185, 129, 0.10);
}

.ascetic-big-card.tier-archive {
  background:
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    linear-gradient(135deg, #FEF3C7 0%, #F59E0B 35%, #78350F 60%, #FBBF24 85%, #FFFBEB 100%) border-box;
  box-shadow:
    0 0 0 1px rgba(180, 83, 9, 0.35),
    inset 0 1px 1.5px rgba(255, 255, 255, 0.85),
    inset 0 -1px 1.5px rgba(120, 53, 15, 0.22),
    0 3px 10px rgba(245, 158, 11, 0.12);
}

/* Dark mode adjustments for metallic molding */
[data-theme="dark"] .ascetic-big-card {
  background:
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    linear-gradient(135deg, #94A3B8 0%, #475569 25%, #1E293B 55%, #475569 80%, #CBD5E1 100%) border-box;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5),
    inset 0 1px 1px rgba(255, 255, 255, 0.3),
    inset 0 -1px 2px rgba(0, 0, 0, 0.5),
    0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .ascetic-big-card::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 60%, transparent 100%);
}

.toggle-ascetic-unit-btn {
  height: 16px !important;
  min-height: 16px !important;
  max-height: 16px !important;
  padding: 0 5px !important;
  font-size: 0.65rem !important;
  font-weight: 750 !important;
  line-height: 16px !important;
  border-radius: 999px !important;
  border: 1px solid var(--border-subtle) !important;
  background: var(--bg-card-subtle) !important;
  color: var(--accent-primary) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  outline: none !important;
  overflow: hidden !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  box-shadow: none !important;
}

.toggle-ascetic-unit-btn:hover {
  background: var(--bg-card-hover) !important;
}

.ascetic-counter-number {
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--accent-primary);
  line-height: 1;
  margin: 2px 0 0 0;
}

.ascetic-counter-label {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-top: 1px;
}

.ascetic-milestones-line {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin: 10px 0 6px 0;
  padding: 0 8px;
}

.ascetic-milestone-point {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.72rem;
  color: var(--text-muted);
  gap: 4px;
  z-index: 2;
}

.ascetic-milestone-point.passed {
  color: var(--accent-primary);
  font-weight: 700;
}

.milestone-dot {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  background: var(--bg-card-subtle);
  border: 2px solid var(--border-subtle);
}

.ascetic-milestone-point.passed .milestone-dot {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
}

/* --------------------------------------------------------------------------
   Profile & Settings Screen
   -------------------------------------------------------------------------- */
.profile-section-title {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin: var(--space-lg) 0 var(--space-sm) 0;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-subtle);
}

/* Remove top border from the very first section title */
.profile-section-title.profile-section-first {
  border-top: none;
  padding-top: 0;
}

.profile-section-title[role="button"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}

.profile-section-title[role="button"]::after {
  content: '⌄';
  font-size: 1.1rem;
  line-height: 1;
  transition: transform var(--transition-fast);
}

.profile-section-title[role="button"][aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.profile-section-title[role="button"]:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

.theme-selector-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: var(--space-md);
}

.theme-selector-grid-4 {
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.theme-selector-grid-3 {
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.theme-badge-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 4px;
  min-height: 46px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-subtle);
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.theme-selector-grid-4 .theme-badge-btn {
  padding: 6px 2px;
}

.theme-selector-grid-4 .theme-badge-btn span {
  font-size: 0.69rem;
  letter-spacing: -0.15px;
  line-height: 1.15;
}

.theme-selector-grid-3 .theme-badge-btn span {
  font-size: 0.74rem;
  line-height: 1.18;
}

.theme-badge-btn:hover {
  transform: translateY(-1px);
}

.theme-badge-btn.active {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  border-width: 2px;
}

.theme-badge-btn span {
  font-size: 0.75rem;
  font-weight: 750;
  line-height: 1.18;
  text-align: center;
  white-space: normal;
  word-break: normal;
  display: block;
}

.lang-selector-row {
  display: flex;
  gap: 6px;
  margin-bottom: var(--space-md);
  width: 100%;
  box-sizing: border-box;
}

.lang-btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 4px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-subtle);
  background: var(--bg-card);
  font-size: 0.80rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
  transition: all var(--transition-fast);
}

.lang-btn.active {
  background: var(--accent-primary-subtle);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

/* ==========================================================================
   TELEGRAM-STYLE THEMATIC DOODLE WALLPAPERS, MODALS & CARDS
   ========================================================================== */

/* 1. ☀️ Sun Gold */
[data-theme="sun_gold"] .app-viewport-wrapper {
  background-color: #F8F1DE;
  background-image: none;
}
[data-theme="sun_gold"] .mobile-app-container,
[data-theme="sun_gold"] .modal-sheet {
  background-color: #FDF8ED !important;
  background-image: 
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODAgMzgwIiB3aWR0aD0iMzgwIiBoZWlnaHQ9IjM4MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRDk3NzA2IiBzdHJva2Utd2lkdGg9IjEuMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBvcGFjaXR5PSIwLjEyIj4gPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjUsIDIwKSByb3RhdGUoLTgsIDE2LCAxNikiPjxjaXJjbGUgY3g9IjE2IiBjeT0iMTYiIHI9IjEwIi8+PGxpbmUgeDE9IjE2IiB5MT0iMCIgeDI9IjE2IiB5Mj0iNCIvPjxsaW5lIHgxPSIxNiIgeTE9IjI4IiB4Mj0iMTYiIHkyPSIzMiIvPjxsaW5lIHgxPSIwIiB5MT0iMTYiIHgyPSI0IiB5Mj0iMTYiLz48bGluZSB4MT0iMjgiIHkxPSIxNiIgeDI9IjMyIiB5Mj0iMTYiLz48bGluZSB4MT0iNSIgeTE9IjUiIHgyPSI4IiB5Mj0iOCIvPjxsaW5lIHgxPSIyNCIgeTE9IjI0IiB4Mj0iMjciIHkyPSIyNyIvPjwvZz4gPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTI1LCAzOCkgcm90YXRlKDEyLCAxNCwgMTQpIj48cGF0aCBkPSJNMCw4IEwyMiw4IEwyMCwyMiBRMTEsMjYgMiwyMiBaIi8+PHBhdGggZD0iTTIyLDExIFEyNywxMSAyNywxNiBRMjcsMjEgMjAsMjEiLz48cGF0aCBkPSJNNSwxIFE3LDQgNSw3IE0xMSwxIFExMyw0IDExLDcgTTE3LDEgUTE5LDQgMTcsNyIvPjwvZz4gPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjI1LCAxNSkgcm90YXRlKC0xNSwgMTYsIDE2KSI+PHBvbHlnb24gcG9pbnRzPSIxMiwwIDE1LDggMjQsMTIgMTUsMTYgMTIsMjQgOSwxNiAwLDEyIDksOCIvPjwvZz4gPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzIwLCAzMikgcm90YXRlKDcsIDE2LCAxNikiPjxwYXRoIGQ9Ik00LDAgTDI0LDAgTDIyLDE1IFExNCwyMSA2LDE1IFoiLz48cGF0aCBkPSJNNCw0IFEtMiw0IC0yLDkgUS0yLDE0IDUsMTMiLz48cGF0aCBkPSJNMjQsNCBRMzAsNCAzMCw5IFEzMCwxNCAyMywxMyIvPjxsaW5lIHgxPSIxNCIgeTE9IjE5IiB4Mj0iMTQiIHkyPSIyNCIvPjxsaW5lIHgxPSI4IiB5MT0iMjQiIHgyPSIyMCIgeTI9IjI0Ii8+PC9nPiA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3MCwgMTEwKSByb3RhdGUoMTAsIDE2LCAxNCkiPjxwYXRoIGQ9Ik0wLDQgUTEzLDAgMTUsMTMgUTE3LDAgMzAsNCBMMzAsMjIgUTE3LDE4IDE1LDI2IFExMywxOCAwLDIyIFoiLz48bGluZSB4MT0iMTUiIHkxPSIxMyIgeDI9IjE1IiB5Mj0iMjYiLz48L2c+IDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE3NSwgMTI1KSByb3RhdGUoLTYsIDE0LCAxNCkiPjxwYXRoIGQ9Ik0xNCwyNCBRMCwxNCAwLDYgQTYsNiAwIDAsMSAxNCw1IEE2LDYgMCAwLDEgMjgsNiBRMjgsMTQgMTQsMjQgWiIvPjwvZz4gPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjgwLCA5NSkgcm90YXRlKDE0LCAxMiwgMTIpIj48cGF0aCBkPSJNMTEsMjIgUTExLDggNCw4IFExMSw4IDExLDAgUTExLDggMTgsOCBRMTEsOCAxMSwyMiIvPiA8cGF0aCBkPSJNNSwyMiBMMTcsMjIiLz48L2c+IDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM1NSwgMTIwKSByb3RhdGUoLTEyLCAxNCwgMTQpIj48Y2lyY2xlIGN4PSIxNCIgY3k9IjE0IiByPSIxMyIvPjxjaXJjbGUgY3g9IjkiIGN5PSIxMCIgcj0iMS41IiBmaWxsPSIjRDk3NzA2Ii8+PGNpcmNsZSBjeD0iMTkiIGN5PSIxMCIgcj0iMS41IiBmaWxsPSIjRDk3NzA2Ii8+PHBhdGggZD0iTTgsMTcgUTE0LDIyIDIwLDE3Ii8+PC9nPiA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxOCwgMTk1KSByb3RhdGUoLTE0LCAxMiwgMTQpIj48cGF0aCBkPSJNNSwxMyBBOSw5IDAgMSwxIDE5LDEzIEMxNywxNiAxNywxOSAxNywyMSBMNywyMSBDNywxOSA3LDE2IDUsMTMgWiIvPjxsaW5lIHgxPSI4IiB5MT0iMjQiIHgyPSIxNiIgeTI9IjI0Ii8+PC9nPiA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMTgsIDIxNSkgcm90YXRlKDgsIDE2LCAxNikiPjxjaXJjbGUgY3g9IjE0IiBjeT0iMTEiIHI9IjkiLz48cG9seWxpbmUgcG9pbnRzPSI4LDE5IDUsMjkgMTQsMjQgMjMsMjkgMjAsMTkiLz48L2c+IDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIzMCwgMTkwKSByb3RhdGUoLTEwLCAxOCwgMTIpIj48cGF0aCBkPSJNMCwyMCBBMTYsMTYgMCAwLDEgMzIsMjAiLz48cGF0aCBkPSJNNSwyMCBBMTEsMTEgMCAwLDEgMjcsMjAiLz48cGF0aCBkPSJNMTAsMjAgQTYsNiAwIDAsMSAyMiwyMCIvPjwvZz4gPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzI1LCAyMTApIHJvdGF0ZSgxNSwgMTQsIDE0KSI+PGNpcmNsZSBjeD0iMTQiIGN5PSIxNiIgcj0iMTEiLz48bGluZSB4MT0iMTQiIHkxPSIxNiIgeDI9IjE0IiB5Mj0iOSIvPjxsaW5lIHgxPSIxNCIgeTE9IjE2IiB4Mj0iMTkiIHkyPSIxNiIvPjxwYXRoIGQ9Ik01LDQgTDIsMSBNMjMsNCBMMjYsMSIvPjwvZz4gPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjUsIDMwNSkgcm90YXRlKDEyLCAxNCwgMTQpIj48Y2lyY2xlIGN4PSIxNCIgY3k9IjE0IiByPSIxMyIvPjxjaXJjbGUgY3g9IjE0IiBjeT0iMTQiIHI9IjciLz48Y2lyY2xlIGN4PSIxNCIgY3k9IjE0IiByPSIyIiBmaWxsPSIjRDk3NzA2Ii8+PC9nPiA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNjUsIDI5MCkgcm90YXRlKC04LCAxNCwgMTQpIj48cGF0aCBkPSJNNSwxNSBMNSw1IEEyLDIgMCAwLDEgOSw1IEw5LDEzIEEyLDIgMCAwLDEgMTMsMTMgTDEzLDMgQTIsMiAwIDAsMSAxNywzIEwxNywxMyBBMiwyIDAgMCwxIDIxLDEzIEwyMSw3IEEyLDIgMCAwLDEgMjUsNyBMMjUsMTkgUTIzLDI4IDE1LDI4IFE1LDI4IDUsMTUgWiIvPjwvZz4gPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjY1LCAzMTApIHJvdGF0ZSgxNiwgMTQsIDE0KSI+PGNpcmNsZSBjeD0iMTQiIGN5PSIxNCIgcj0iOSIvPjxsaW5lIHgxPSIxNCIgeTE9IjAiIHgyPSIxNCIgeTI9IjMiLz48bGluZSB4MT0iMTQiIHkxPSIyNSIgeDI9IjE0IiB5Mj0iMjgiLz48bGluZSB4MT0iMCIgeTE9IjE0IiB4Mj0iMyIgeTI9IjE0Ii8+PGxpbmUgeDE9IjI1IiB5MT0iMTQiIHgyPSIyOCIgeTI9IjE0Ii8+PC9nPiA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNTAsIDI5NSkgcm90YXRlKC0xMCwgMTQsIDE0KSI+PHBvbHlnb24gcG9pbnRzPSIxMCwwIDEzLDcgMjAsMTAgMTMsMTMgMTAsMjAgNywxMyAwLDEwIDcsNyIvPjwvZz4gPC9zdmc+"),
    radial-gradient(ellipse at 85% 5%, rgba(245, 158, 11, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 15% 95%, rgba(251, 191, 36, 0.12) 0%, transparent 50%) !important;
  background-size: 380px 380px, auto, auto !important;
  background-repeat: repeat, no-repeat, no-repeat !important;
}
[data-theme="sun_gold"] .card,
[data-theme="sun_gold"] .hero-card,
[data-theme="sun_gold"] .rhythm-card,
[data-theme="sun_gold"] .timeline-entry-custom,
[data-theme="sun_gold"] .timeline-entry {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 251, 235, 0.96) 50%, rgba(254, 243, 199, 0.96) 100%) !important;
  border: 1.8px solid #F59E0B !important;
  border-left: 5px solid #D97706 !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(10px);
}
[data-theme="sun_gold"] .btn-primary {
  background: linear-gradient(135deg, #F59E0B 0%, #EA580C 100%) !important;
  box-shadow: 0 4px 18px rgba(234, 88, 12, 0.38) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 14px !important;
  color: #FFFFFF !important;
}
[data-theme="sun_gold"] .btn-outline {
  border: 1.8px solid #D97706 !important;
  background: rgba(254, 243, 199, 0.7) !important;
  color: #9A3412 !important;
  font-weight: 700 !important;
  border-radius: 14px !important;
}

/* 2. 🌸 Sakura Pink */
[data-theme="sakura_pink"] .app-viewport-wrapper {
  background-color: #F8EBEF;
  background-image: none;
}
[data-theme="sakura_pink"] .mobile-app-container,
[data-theme="sakura_pink"] .modal-sheet {
  background-color: #FDF1F5 !important;
  background-image: 
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODAgMzgwIiB3aWR0aD0iMzgwIiBoZWlnaHQ9IjM4MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRTExRDQ4IiBzdHJva2Utd2lkdGg9IjEuMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBvcGFjaXR5PSIwLjEyIj4gPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjUsIDIwKSByb3RhdGUoLTEwLCAxNiwgMTYpIj48Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSIzLjUiIGZpbGw9IiNFMTFENDgiLz48cGF0aCBkPSJNMTYsMTIgUTEyLDAgMTYsMCBRMjAsMCAxNiwxMiIvPjxwYXRoIGQ9Ik0yMCwxNSBRMzIsMTEgMzIsMTUgUTMyLDE5IDIwLDE3Ii8+PHBhdGggZD0iTTE4LDIwIFEyNiwzMCAyMiwzMiBRMTgsMzIgMTYsMjAiLz48cGF0aCBkPSJNMTQsMjAgUTYsMzIgMiwzMCBRMCwyNiAxNCwxOSIvPjxwYXRoIGQ9Ik0xMiwxNSBRMCwxMSAwLDE1IFEwLDE5IDEyLDE3Ii8+PC9nPiA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMzAsIDM1KSByb3RhdGUoMTQsIDE1LCAxNSkiPjxwYXRoIGQ9Ik0zLDkgTDAsMCBMOSw0IFExNCwzIDE4LDQgTDI3LDAgTDI0LDkgUTI5LDE4IDIzLDI1IFExNCwyOSA0LDI1IFEtMiwxOCAzLDkgWiIvPjxjaXJjbGUgY3g9IjgiIGN5PSIxNCIgcj0iMS4zIiBmaWxsPSIjRTExRDQ4Ii8+PGNpcmNsZSBjeD0iMTkiIGN5PSIxNCIgcj0iMS4zIiBmaWxsPSIjRTExRDQ4Ii8+PHBvbHlsaW5lIHBvaW50cz0iMTIsMTggMTMuNSwyMCAxNSwxOCIvPjwvZz4gPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjM1LCAxOCkgcm90YXRlKC04LCAxNCwgMTQpIj48Y2lyY2xlIGN4PSI3IiBjeT0iMjAiIHI9IjYiLz48Y2lyY2xlIGN4PSIyMSIgY3k9IjE4IiByPSI2Ii8+PHBhdGggZD0iTTcsMTQgUTE0LDUgMTgsMCBRMjAsNyAyMSwxMiIvPjwvZz4gPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzI1LCAzMCkgcm90YXRlKDEyLCAxNSwgMTApIj48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMjgiIGhlaWdodD0iMTgiIHJ4PSIzIi8+PHBvbHlsaW5lIHBvaW50cz0iMCwwIDE0LDExIDI4LDAiLz48L2c+IDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDcwLCAxMTApIHJvdGF0ZSgtMTUsIDE1LCAxNSkiPjxwb2x5Z29uIHBvaW50cz0iMTQsMCAyMCwxMSAzMSw3IDIwLDE2IDI1LDI3IDE0LDIwIDIsMjcgNywxNiAtMyw3IDcsMTEiLz48L2c+IDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE3NSwgMTIwKSByb3RhdGUoOSwgMTIsIDE0KSI+PHBhdGggZD0iTTEzLDAgUTIyLDUgMjAsMTYgUTEzLDI2IDEzLDI2IFExMywyNiA1LDE2IFEzLDUgMTMsMCBaIi8+PGNpcmNsZSBjeD0iOSIgY3k9IjkiIHI9IjAuNyIgZmlsbD0iI0UxMUQ0OCIvPjxjaXJjbGUgY3g9IjE3IiBjeT0iOSIgcj0iMC43IiBmaWxsPSIjRTExRDQ4Ii8+PC9nPiA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNzUsIDk1KSByb3RhdGUoLTEyLCAxNSwgMTUpIj48cGF0aCBkPSJNMTMsNSBRMywtNCAwLDUgUTAsMTYgMTMsMTMgWiIvPjxwYXRoIGQ9Ik0xNSw1IFEyNSwtNCAyOCw1IFEyOCwxNiAxNSwxMyBaIi8+PGxpbmUgeDE9IjE0IiB5MT0iMyIgeDI9IjE0IiB5Mj0iMjIiLz48L2c+IDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM1NSwgMTE1KSByb3RhdGUoMTAsIDE0LCAxMCkiPjxjaXJjbGUgY3g9IjE0IiBjeT0iOSIgcj0iMi41Ii8+PHBhdGggZD0iTTExLDkgTDAsMiBMMCwxNiBaIi8+PHBhdGggZD0iTTE3LDkgTDI4LDIgTDI4LDE2IFoiLz48L2c+IDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIwLCAyMDApIHJvdGF0ZSgxNCwgMTQsIDE0KSI+PHBhdGggZD0iTTEzLDIyIFEwLDEzIDAsNSBBNSw1IDAgMCwxIDEzLDQgQTUsNSAwIDAsMSAyNiw1IFEyNiwxMyAxMywyMiBaIi8+PHBvbHlnb24gcG9pbnRzPSIzMCwyIDMxLDUgMzQsNiAzMSw3IDMwLDEwIDI5LDcgMjYsNiAyOSw1IiBmaWxsPSIjRTExRDQ4Ii8+PC9nPiA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMjAsIDIxNSkgcm90YXRlKC04LCAxNiwgMTQpIj48cGF0aCBkPSJNNSwxMSBRNSwyNCAyMCwyNCBRMjYsMjQgMjYsMTUgTDUsMTUgWiIvPjxyZWN0IHg9IjEwIiB5PSI3IiB3aWR0aD0iMTAiIGhlaWdodD0iNCIgcng9IjIiLz48L2c+IDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIyNSwgMTk1KSByb3RhdGUoMTIsIDE2LCAxMCkiPjxwYXRoIGQ9Ik0wLDEzIFExNCw5IDMwLDE4Ii8+PGNpcmNsZSBjeD0iNyIgY3k9IjExIiByPSIyLjUiLz48Y2lyY2xlIGN4PSIxOCIgY3k9IjEwIiByPSIyLjUiLz48Y2lyY2xlIGN4PSIyNiIgY3k9IjE2IiByPSIyLjUiLz48L2c+IDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMyNSwgMjEwKSByb3RhdGUoLTE0LCAxNCwgMTApIj48cGF0aCBkPSJNNSwxNCBRMSwxNCAxLDExIFExLDcgNSw3IFE3LDIgMTIsMyBRMTgsMCAyMSw1IFEyNSw1IDI1LDExIFEyNywxNCAyMSwxNiBaIi8+PC9nPiA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2NSwgMzA1KSByb3RhdGUoLTEwLCAxNiwgMTYpIj48Y2lyY2xlIGN4PSIxNCIgY3k9IjE0IiByPSIzIiBmaWxsPSIjRTExRDQ4Ii8+PHBhdGggZD0iTTE0LDEwIFExMCwwIDE0LDAgUTE4LDAgMTQsMTAiLz48cGF0aCBkPSJNMTgsMTMgUTI4LDkgMjgsMTMgUTI4LDE3IDE4LDE1Ii8+PHBhdGggZD0iTTE2LDE3IFEyMywyNiAyMCwyOCBRMTYsMjggMTQsMTciLz48cGF0aCBkPSJNMTIsMTcgUTUsMjggMiwyNiBRMCwyMiAxMiwxNiIvPjwvZz4gPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTY1LCAyOTApIHJvdGF0ZSgxNSwgMTQsIDE0KSI+PHBhdGggZD0iTTEyLDIyIFEwLDEzIDAsNSBBNSw1IDAgMCwxIDEyLDQgQTUsNSAwIDAsMSAyNCw1IFEyNCwxMyAxMiwyMiBaIi8+PC9nPiA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNzAsIDMxMCkgcm90YXRlKC02LCAxNCwgMTQpIj48Y2lyY2xlIGN4PSI3IiBjeT0iMTgiIHI9IjUiLz48Y2lyY2xlIGN4PSIxOSIgY3k9IjE2IiByPSI1Ii8+PHBhdGggZD0iTTcsMTMgUTEzLDUgMTYsMCBRMTgsNyAxOSwxMSIvPjwvZz4gPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzUwLCAyOTUpIHJvdGF0ZSgxMiwgMTQsIDE0KSI+PHBvbHlnb24gcG9pbnRzPSIxMiwwIDE3LDkgMjYsNiAxNywxNCAyMSwyNCAxMiwxNyAyLDI0IDYsMTQgLTIsNiA2LDkiLz48L2c+IDwvc3ZnPg=="),
    radial-gradient(ellipse at 85% 5%, rgba(251, 113, 133, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 15% 95%, rgba(244, 114, 182, 0.12) 0%, transparent 50%) !important;
  background-size: 380px 380px, auto, auto !important;
  background-repeat: repeat, no-repeat, no-repeat !important;
}
[data-theme="sakura_pink"] .card,
[data-theme="sakura_pink"] .hero-card,
[data-theme="sakura_pink"] .rhythm-card,
[data-theme="sakura_pink"] .timeline-entry-custom,
[data-theme="sakura_pink"] .timeline-entry {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 241, 242, 0.96) 50%, rgba(255, 228, 230, 0.96) 100%) !important;
  border: 1.8px solid #FB7185 !important;
  border-left: 5px solid #E11D48 !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 20px rgba(244, 114, 182, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(10px);
}
[data-theme="sakura_pink"] .btn-primary {
  background: linear-gradient(135deg, #FB7185 0%, #E11D48 100%) !important;
  box-shadow: 0 4px 18px rgba(225, 29, 72, 0.38) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 999px !important;
  color: #FFFFFF !important;
}
[data-theme="sakura_pink"] .btn-outline {
  border: 1.8px solid #E11D48 !important;
  background: rgba(255, 228, 230, 0.7) !important;
  color: #9F1239 !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
}

/* 3. 🌿 Emerald Zen */
[data-theme="emerald_zen"] .app-viewport-wrapper {
  background-color: #E5F3EA;
  background-image: none;
}
[data-theme="emerald_zen"] .mobile-app-container,
[data-theme="emerald_zen"] .modal-sheet {
  background-color: #EFF9F3 !important;
  background-image: 
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODAgMzgwIiB3aWR0aD0iMzgwIiBoZWlnaHQ9IjM4MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMTZBMzRBIiBzdHJva2Utd2lkdGg9IjEuMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBvcGFjaXR5PSIwLjEyIj4gPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjUsIDIwKSByb3RhdGUoLTgsIDE0LCAxNCkiPjxwYXRoIGQ9Ik0xNCwyNCBDNiwyMCAzLDEzIDYsNyBDMTAsMTMgMTQsMTggMTQsMjQgWiIvPjxwYXRoIGQ9Ik0xNCwyNCBDMjEsMjAgMjQsMTMgMjEsNyBDMTcsMTMgMTQsMTggMTQsMjQgWiIvPjxwYXRoIGQ9Ik0xNCwyNCBDMTAsMTYgMTAsNyAxNCwyIEMxOCw3IDE4LDE2IDE0LDI0IFoiLz48L2c+IDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEzMCwgMzApIHJvdGF0ZSgxNCwgOCwgMTYpIj48bGluZSB4MT0iOCIgeTE9IjAiIHgyPSI4IiB5Mj0iMzAiIHN0cm9rZS13aWR0aD0iMi4yIi8+PGxpbmUgeDE9IjQiIHkxPSI5IiB4Mj0iMTIiIHkyPSI5Ii8+PGxpbmUgeDE9IjQiIHkxPSIxOSIgeDI9IjEyIiB5Mj0iMTkiLz48cGF0aCBkPSJNOCw5IFExNyw0IDIyLDcgUTE1LDExIDgsOSIvPjwvZz4gPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjMwLCAyMCkgcm90YXRlKC0xMiwgMTQsIDE0KSI+PGVsbGlwc2UgY3g9IjE0IiBjeT0iMjIiIHJ4PSIxMyIgcnk9IjUuNSIvPjxlbGxpcHNlIGN4PSIxNCIgY3k9IjEzIiByeD0iOSIgcnk9IjQiLz48ZWxsaXBzZSBjeD0iMTQiIGN5PSI1IiByeD0iNSIgcnk9IjIuNSIvPjwvZz4gPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzI1LCAzNSkgcm90YXRlKDksIDE0LCAxNCkiPjxwYXRoIGQ9Ik0xNCwyNiBRNCwxOCA1LDUgUTE0LDAgMjIsNSBRMjQsMTggMTQsMjYgWiIvPjxsaW5lIHgxPSIxNCIgeTE9IjIiIHgyPSIxNCIgeTI9IjI2Ii8+PC9nPiA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3MCwgMTEwKSByb3RhdGUoLTE0LCAxNCwgMTIpIj48cGF0aCBkPSJNMiw3IFEyLDIyIDE1LDIyIFEyOCwyMiAyOCw3IFoiLz48bGluZSB4MT0iMCIgeTE9IjciIHgyPSIzMCIgeTI9IjciLz48L2c+IDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE3MCwgMTI1KSByb3RhdGUoMTAsIDE0LCAxNCkiPjxwYXRoIGQ9Ik05LDAgUTE2LDExIDE2LDE2IEE3LDcgMCAwLDEgMiwxNiBRMiwxMSA5LDAgWiIvPjwvZz4gPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjc1LCA5NSkgcm90YXRlKC02LCAxNCwgMTQpIj48bGluZSB4MT0iMTQiIHkxPSIzIiB4Mj0iMTQiIHkyPSIyNSIgc3Ryb2tlLXdpZHRoPSIxLjYiLz48ZWxsaXBzZSBjeD0iNiIgY3k9IjkiIHJ4PSI2IiByeT0iMi4yIiB0cmFuc2Zvcm09InJvdGF0ZSgtMTUsIDYsIDkpIi8+IDxlbGxpcHNlIGN4PSIyMiIgY3k9IjkiIHJ4PSI2IiByeT0iMi4yIiB0cmFuc2Zvcm09InJvdGF0ZSgxNSwgMjIsIDkpIi8+PC9nPiA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNTUsIDExNSkgcm90YXRlKDE2LCAxNCwgMTQpIj48Y2lyY2xlIGN4PSIxNCIgY3k9IjE0IiByPSIxMyIvPjxwYXRoIGQ9Ik0xNCwxIEExMywxMyAwIDAsMSAxNCwyNyBBNi41LDYuNSAwIDAsMSAxNCwxNCBBNi41LDYuNSAwIDAsMCAxNCwxIFoiIGZpbGw9IiMxNkEzNEEiLz48Y2lyY2xlIGN4PSIxNCIgY3k9IjciIHI9IjIuMiIgZmlsbD0iI0ZGRkZGRiIvPjwvZz4gPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjAsIDIwMCkgcm90YXRlKDEyLCAxNCwgMTQpIj48cGF0aCBkPSJNMTUsMjIgUTEzLDEzIDcsMTEgUTExLDcgMTUsOSBRMTksMyAyMyw3IFExOSwxMyAxNSwyMiBaIi8+PHJlY3QgeD0iNSIgeT0iMjIiIHdpZHRoPSIxOCIgaGVpZ2h0PSI1IiByeD0iMiIvPjwvZz4gPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTIwLCAyMTUpIHJvdGF0ZSgtMTAsIDE0LCAxNCkiPjxwYXRoIGQ9Ik01LDExIEE5LDkgMCAwLDEgMjMsMTEgWiIvPjxsaW5lIHgxPSIxNCIgeTE9IjAiIHgyPSIxNCIgeTI9IjUiLz48bGluZSB4MT0iMTQiIHkxPSIxMSIgeDI9IjE0IiB5Mj0iMjMiLz48L2c+IDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIyNSwgMTk1KSByb3RhdGUoOCwgMTQsIDE0KSI+PHBhdGggZD0iTTE0LDI2IEwxNCwxNiBRMiwxMyAzLDIgUTE0LDkgMTQsMyBRMTQsOSAyNCwyIFEyNiwxMyAxNCwxNiBaIi8+PC9nPiA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMjUsIDIxMCkgcm90YXRlKC0xNSwgMTQsIDEyKSI+PHBhdGggZD0iTTMsMTMgUTEzLDIgMjQsOSBRMTgsMjAgMywxMyBaIi8+PHBvbHlnb24gcG9pbnRzPSIzLDEzIDAsNyAwLDE4Ii8+PC9nPiA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2NSwgMzA1KSByb3RhdGUoMTQsIDE0LCAxNCkiPjxwYXRoIGQ9Ik0xNCwyNCBDNiwyMCAzLDEzIDYsNyBDMTAsMTMgMTQsMTggMTQsMjQgWiIvPjxwYXRoIGQ9Ik0xNCwyNCBDMjEsMjAgMjQsMTMgMjEsNyBDMTcsMTMgMTQsMTggMTQsMjQgWiIvPjxwYXRoIGQ9Ik0xNCwyNCBDMTAsMTYgMTAsNyAxNCwyIEMxOCw3IDE4LDE2IDE0LDI0IFoiLz48L2c+IDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE2NSwgMjkwKSByb3RhdGUoLTgsIDgsIDE2KSI+PGxpbmUgeDE9IjgiIHkxPSIwIiB4Mj0iOCIgeTI9IjMwIiBzdHJva2Utd2lkdGg9IjIuMiIvPjxwYXRoIGQ9Ik04LDkgUTE3LDQgMjIsNyBRMTUsMTEgOCw5Ii8+PC9nPiA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNzAsIDMxMCkgcm90YXRlKDEwLCAxNCwgMTQpIj48ZWxsaXBzZSBjeD0iMTQiIGN5PSIyMiIgcng9IjEzIiByeT0iNS41Ii8+PGVsbGlwc2UgY3g9IjE0IiBjeT0iMTMiIHJ4PSI5IiByeT0iNCIvPjxlbGxpcHNlIGN4PSIxNCIgY3k9IjUiIHJ4PSI1IiByeT0iMi41Ii8+PC9nPiA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNTAsIDI5NSkgcm90YXRlKC0xMiwgMTQsIDE0KSI+PHBhdGggZD0iTTksMCBRMTYsMTEgMTYsMTYgQTcsNyAwIDAsMSAyLDE2IFEyLDExIDksMCBaIi8+PC9nPiA8L3N2Zz4="),
    radial-gradient(ellipse at 85% 5%, rgba(34, 197, 94, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 15% 95%, rgba(74, 222, 128, 0.12) 0%, transparent 50%) !important;
  background-size: 380px 380px, auto, auto !important;
  background-repeat: repeat, no-repeat, no-repeat !important;
}
[data-theme="emerald_zen"] .card,
[data-theme="emerald_zen"] .hero-card,
[data-theme="emerald_zen"] .rhythm-card,
[data-theme="emerald_zen"] .timeline-entry-custom,
[data-theme="emerald_zen"] .timeline-entry {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(240, 253, 244, 0.96) 50%, rgba(220, 252, 231, 0.96) 100%) !important;
  border: 1.8px solid #4ADE80 !important;
  border-left: 5px solid #16A34A !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 20px rgba(34, 197, 94, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(10px);
}
[data-theme="emerald_zen"] .btn-primary {
  background: linear-gradient(135deg, #22C55E 0%, #15803D 100%) !important;
  box-shadow: 0 4px 18px rgba(21, 128, 61, 0.38) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 14px !important;
  color: #FFFFFF !important;
}
[data-theme="emerald_zen"] .btn-outline {
  border: 1.8px solid #16A34A !important;
  background: rgba(220, 252, 231, 0.7) !important;
  color: #14532D !important;
  font-weight: 700 !important;
  border-radius: 14px !important;
}

/* 4. 🎯 Sky Focus */
[data-theme="sky_focus"] .app-viewport-wrapper {
  background-color: #E2F0F9;
  background-image: none;
}
[data-theme="sky_focus"] .mobile-app-container,
[data-theme="sky_focus"] .modal-sheet {
  background-color: #EEF7FC !important;
  background-image: 
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODAgMzgwIiB3aWR0aD0iMzgwIiBoZWlnaHQ9IjM4MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDI4NEM3IiBzdHJva2Utd2lkdGg9IjEuMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBvcGFjaXR5PSIwLjEyIj4gPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjUsIDIwKSByb3RhdGUoLTEwLCAxNSwgMTQpIj48cG9seWdvbiBwb2ludHM9IjE1LDAgMzAsMTEgMjQsMjggNiwyOCAwLDExIi8+PGxpbmUgeDE9IjAiIHkxPSIxMSIgeDI9IjMwIiB5Mj0iMTEiLz48bGluZSB4MT0iMTUiIHkxPSIwIiB4Mj0iOSIgeTI9IjExIi8+PGxpbmUgeDE9IjE1IiB5MT0iMCIgeDI9IjIxIiB5Mj0iMTEiLz48L2c+IDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEzMCwgMzUpIHJvdGF0ZSgxNSwgMTQsIDE0KSI+PHBvbHlnb24gcG9pbnRzPSI1LDUgMjMsMCAyNSw5IDcsMTQiIHRyYW5zZm9ybT0icm90YXRlKC0yNSwgMTQsIDcpIi8+PGxpbmUgeDE9IjEyIiB5MT0iMTQiIHgyPSI1IiB5Mj0iMjgiLz48bGluZSB4MT0iMTYiIHkxPSIxNCIgeDI9IjIzIiB5Mj0iMjgiLz48L2c+IDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIzNSwgMTgpIHJvdGF0ZSgtOCwgMTQsIDE0KSI+PGNpcmNsZSBjeD0iMTQiIGN5PSIxNCIgcj0iMTMiLz48Y2lyY2xlIGN4PSIxNCIgY3k9IjE0IiByPSI4Ii8+PGNpcmNsZSBjeD0iMTQiIGN5PSIxNCIgcj0iMyIvPjwvZz4gPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzI1LCAzMCkgcm90YXRlKDEyLCAxNSwgMTMpIj48cG9seWdvbiBwb2ludHM9IjE1LDMgMzAsMjUgMCwyNSIvPjxsaW5lIHgxPSIxNSIgeTE9IjMiIHgyPSIxNSIgeTI9IjAiLz48cG9seWdvbiBwb2ludHM9IjE1LDAgMjAsMiAxNSw0IiBmaWxsPSIjMDI4NEM3Ii8+PC9nPiA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3MCwgMTEwKSByb3RhdGUoLTEyLCAxNCwgMTQpIj48Y2lyY2xlIGN4PSIxNCIgY3k9IjE0IiByPSIxMyIvPjxwb2x5Z29uIHBvaW50cz0iMTQsMyAxNywxNCAxNCwyNSAxMSwxNCIgZmlsbD0iIzAyODRDNyIvPjwvZz4gPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTc1LCAxMjApIHJvdGF0ZSgxNCwgMTIsIDE0KSI+PHBhdGggZD0iTTUsMTMgQTksOSAwIDEsMSAxOSwxMyBDMTcsMTYgMTcsMTkgMTcsMjEgTDcsMjEgQzcsMTkgNywxNiA1LDEzIFoiLz48bGluZSB4MT0iOCIgeTE9IjI0IiB4Mj0iMTYiIHkyPSIyNCIvPjwvZz4gPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjc1LCA5NSkgcm90YXRlKC02LCAxMiwgMTQpIj48bGluZSB4MT0iMyIgeTE9IjIiIHgyPSIyMiIgeTI9IjIiLz48bGluZSB4MT0iMyIgeTE9IjI2IiB4Mj0iMjIiIHkyPSIyNiIvPjxwYXRoIGQ9Ik01LDIgTDIwLDIgTDEzLDE0IEwyMCwyNiBMNSwyNiBMMTMsMTQgWiIvPjwvZz4gPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzU1LCAxMTUpIHJvdGF0ZSgxNiwgMTQsIDE0KSI+PHBhdGggZD0iTTEzLDAgUTIyLDUgMjIsMTYgTDE3LDIwIEwxMywxNiBMOSwyMCBMNCwxNiBRNCw1IDEzLDAgWiIvPjxjaXJjbGUgY3g9IjEzIiBjeT0iOSIgcj0iMi41Ii8+PC9nPiA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMCwgMjAwKSByb3RhdGUoMTAsIDEyLCAxNCkiPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyOCIgcng9IjMiLz48cG9seWxpbmUgcG9pbnRzPSIzLDcgNiwxMCAxMSw0Ii8+PGxpbmUgeDE9IjEzIiB5MT0iNyIgeDI9IjIwIiB5Mj0iNyIvPjxwb2x5bGluZSBwb2ludHM9IjMsMTUgNiwxOCAxMSwxMiIvPjxsaW5lIHgxPSIxMyIgeTE9IjE1IiB4Mj0iMjAiIHkyPSIxNSIvPjwvZz4gPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTIwLCAyMTUpIHJvdGF0ZSgtMTQsIDE0LCAxNCkiPjxjaXJjbGUgY3g9IjE0IiBjeT0iMTYiIHI9IjExIi8+PGxpbmUgeDE9IjE0IiB5MT0iMTYiIHgyPSIyMCIgeTI9IjExIi8+PGxpbmUgeDE9IjE0IiB5MT0iNSIgeDI9IjE0IiB5Mj0iMSIvPjwvZz4gPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjI1LCAxOTUpIHJvdGF0ZSgxMiwgMTQsIDE0KSI+PHBvbHlnb24gcG9pbnRzPSIxNSwzIDI4LDI2IDIsMjYiLz48bGluZSB4MT0iMCIgeTE9IjE2IiB4Mj0iOCIgeTI9IjE1Ii8+PGxpbmUgeDE9IjIwIiB5MT0iMTYiIHgyPSIzMiIgeTI9IjExIi8+PGxpbmUgeDE9IjIwIiB5MT0iMTYiIHgyPSIzMiIgeTI9IjIxIi8+PC9nPiA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMjUsIDIxMCkgcm90YXRlKC04LCAxNSwgMTMpIj48cG9seWxpbmUgcG9pbnRzPSIwLDIyIDcsMTUgMTUsMTkgMjQsMyAzMCw3Ii8+PGxpbmUgeDE9IjAiIHkxPSIyNiIgeDI9IjMwIiB5Mj0iMjYiLz48L2c+IDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY1LCAzMDUpIHJvdGF0ZSgxNCwgMTUsIDE0KSI+PHBvbHlnb24gcG9pbnRzPSIxNSwwIDMwLDExIDI0LDI4IDYsMjggMCwxMSIvPjxsaW5lIHgxPSIwIiB5MT0iMTEiIHgyPSIzMCIgeTI9IjExIi8+PC9nPiA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNjUsIDI5MCkgcm90YXRlKC0xMiwgMTQsIDE0KSI+PGNpcmNsZSBjeD0iMTQiIGN5PSIxNCIgcj0iMTMiLz48Y2lyY2xlIGN4PSIxNCIgY3k9IjE0IiByPSI4Ii8+PGNpcmNsZSBjeD0iMTQiIGN5PSIxNCIgcj0iMyIvPjwvZz4gPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjcwLCAzMTApIHJvdGF0ZSg4LCAxNCwgMTQpIj48cGF0aCBkPSJNMTMsMCBRMjIsNSAyMiwxNiBMMTcsMjAgTDEzLDE2IEw5LDIwIEw0LDE2IFE0LDUgMTMsMCBaIi8+PC9nPiA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNTAsIDI5NSkgcm90YXRlKC0xNCwgMTQsIDE0KSI+PGNpcmNsZSBjeD0iMTQiIGN5PSIxNCIgcj0iMTMiLz48cG9seWdvbiBwb2ludHM9IjE0LDMgMTcsMTQgMTQsMjUgMTEsMTQiIGZpbGw9IiMwMjg0QzciLz48L2c+IDwvc3ZnPg=="),
    radial-gradient(ellipse at 85% 5%, rgba(14, 165, 233, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 15% 95%, rgba(56, 189, 248, 0.12) 0%, transparent 50%) !important;
  background-size: 380px 380px, auto, auto !important;
  background-repeat: repeat, no-repeat, no-repeat !important;
}
[data-theme="sky_focus"] .card,
[data-theme="sky_focus"] .hero-card,
[data-theme="sky_focus"] .rhythm-card,
[data-theme="sky_focus"] .timeline-entry-custom,
[data-theme="sky_focus"] .timeline-entry {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(240, 249, 255, 0.96) 50%, rgba(224, 242, 254, 0.96) 100%) !important;
  border: 1.8px solid #38BDF8 !important;
  border-left: 5px solid #0284C7 !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 20px rgba(14, 165, 233, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(10px);
}
[data-theme="sky_focus"] .btn-primary {
  background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%) !important;
  box-shadow: 0 4px 18px rgba(2, 132, 199, 0.38) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 14px !important;
  color: #FFFFFF !important;
}
[data-theme="sky_focus"] .btn-outline {
  border: 1.8px solid #0284C7 !important;
  background: rgba(224, 242, 254, 0.7) !important;
  color: #075985 !important;
  font-weight: 700 !important;
  border-radius: 14px !important;
}

/* 5. 🔮 Lavender Magic */
[data-theme="lavender_magic"] .app-viewport-wrapper {
  background-color: #EEE4F8;
  background-image: none;
}
[data-theme="lavender_magic"] .mobile-app-container,
[data-theme="lavender_magic"] .modal-sheet {
  background-color: #F6F1FD !important;
  background-image: 
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODAgMzgwIiB3aWR0aD0iMzgwIiBoZWlnaHQ9IjM4MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjOTMzM0VBIiBzdHJva2Utd2lkdGg9IjEuMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBvcGFjaXR5PSIwLjEyIj4gPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjUsIDIwKSByb3RhdGUoLTEyLCAxNCwgMTQpIj48Y2lyY2xlIGN4PSIxNCIgY3k9IjEzIiByPSIxMiIvPjxwYXRoIGQ9Ik03LDkgQTYsNiAwIDAsMSAxNiw1Ii8+PHBhdGggZD0iTTQsMjUgUTE0LDIwIDI0LDI1IEwyMiwyOSBRMTQsMjcgNiwyOSBaIi8+PC9nPiA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMzAsIDM1KSByb3RhdGUoMTQsIDE0LCAxNCkiPjxwYXRoIGQ9Ik0xMSwwIEExNSwxNSAwIDAsMCAyNiwyMiBBMTUsMTUgMCAxLDEgMTEsMCBaIi8+PHBvbHlnb24gcG9pbnRzPSIyNCwzIDI1LDcgMjksOCAyNSw5IDI0LDEzIDIzLDkgMTksOCAyMyw3IiBmaWxsPSIjOTMzM0VBIi8+PC9nPiA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMzUsIDE4KSByb3RhdGUoLTgsIDEzLCAxNCkiPjxwYXRoIGQ9Ik0xMCwwIEwxNiwwIEwxNiw1IEwyNCwyMCBRMjIsMjggMTMsMjggUTMsMjggMiwyMCBMMTAsNSBaIi8+PGxpbmUgeDE9IjQiIHkxPSIxOCIgeDI9IjIyIiB5Mj0iMTgiLz48L2c+IDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMyNSwgMzApIHJvdGF0ZSgxMCwgMTMsIDE0KSI+PHJlY3QgeD0iMyIgeT0iMCIgd2lkdGg9IjIyIiBoZWlnaHQ9IjI4IiByeD0iMyIvPjxsaW5lIHgxPSI4IiB5MT0iMCIgeDI9IjgiIHkyPSIyOCIvPjwvZz4gPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNzAsIDExMCkgcm90YXRlKDE2LCAxNCwgMTQpIj48bGluZSB4MT0iMiIgeTE9IjI2IiB4Mj0iMjIiIHkyPSI1IiBzdHJva2Utd2lkdGg9IjEuOCIvPjxwb2x5Z29uIHBvaW50cz0iMjIsNSAyNCwwIDI2LDUgMzEsNyAyNiw5IDI0LDE0IDIyLDkgMTcsNyIgZmlsbD0iIzkzMzNFQSIvPjwvZz4gPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTc1LCAxMjApIHJvdGF0ZSgtMTAsIDE0LCAxNCkiPjxwYXRoIGQ9Ik01LDUgTDAsMCBMNSwyIFExMywwIDIwLDIgTDI2LDAgTDIwLDUgUTI0LDE1IDIwLDI0IFExMywyOCA1LDI0IFEyLDE1IDUsNSBaIi8+PGNpcmNsZSBjeD0iOCIgY3k9IjExIiByPSIzLjUiLz48Y2lyY2xlIGN4PSIxNyIgY3k9IjExIiByPSIzLjUiLz48L2c+IDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI3NSwgOTUpIHJvdGF0ZSgxMiwgMTQsIDE0KSI+PGNpcmNsZSBjeD0iMyIgY3k9IjUiIHI9IjIiIGZpbGw9IiM5MzMzRUEiLz48Y2lyY2xlIGN4PSIxNCIgY3k9IjIiIHI9IjIiIGZpbGw9IiM5MzMzRUEiLz48Y2lyY2xlIGN4PSIyNSIgY3k9IjkiIHI9IjIiIGZpbGw9IiM5MzMzRUEiLz48Y2lyY2xlIGN4PSIxOCIgY3k9IjIyIiByPSIyIiBmaWxsPSIjOTMzM0VBIi8+PHBvbHlsaW5lIHBvaW50cz0iMyw1IDE0LDIgMjUsOSAxOCwyMiIvPjwvZz4gPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzU1LCAxMTUpIHJvdGF0ZSgtMTQsIDE0LCAxNCkiPjxjaXJjbGUgY3g9IjE0IiBjeT0iMTQiIHI9IjkiLz48ZWxsaXBzZSBjeD0iMTQiIGN5PSIxNCIgcng9IjE2IiByeT0iNC41IiB0cmFuc2Zvcm09InJvdGF0ZSgtMjAsIDE0LCAxNCkiLz4gPC9nPiA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMCwgMjAwKSByb3RhdGUoOCwgMTQsIDE0KSI+PHBhdGggZD0iTTE1LDAgUTIyLDE2IDI2LDIyIEwzLDIyIFE3LDE2IDE1LDAgWiIvPjxlbGxpcHNlIGN4PSIxNSIgY3k9IjIyIiByeD0iMTUiIHJ5PSIzLjUiLz48L2c+IDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyMCwgMjE1KSByb3RhdGUoLTEyLCAxNCwgMTQpIj48cG9seWdvbiBwb2ludHM9IjEzLDAgMTYsNSAxNSwyNiA5LDI2IDcsNSIvPjxwb2x5Z29uIHBvaW50cz0iNSw3IDksMTEgNywyNiAyLDI2IDEsMTEiLz48cG9seWdvbiBwb2ludHM9IjIwLDUgMjQsOSAyMiwyNiAxNywyNiAxNiw5Ii8+PC9nPiA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMjUsIDE5NSkgcm90YXRlKDE1LCAxNCwgMTQpIj48cGF0aCBkPSJNMyw5IFExLDI0IDE0LDI0IFEyNywyNCAyNSw5IFoiLz48bGluZSB4MT0iMCIgeTE9IjkiIHgyPSIyOSIgeTI9IjkiLz48Y2lyY2xlIGN4PSI5IiBjeT0iMyIgcj0iMi4yIiBmaWxsPSIjOTMzM0VBIi8+PGNpcmNsZSBjeD0iMTYiIGN5PSIxIiByPSIyLjYiIGZpbGw9IiM5MzMzRUEiLz48L2c+IDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMyNSwgMjEwKSByb3RhdGUoLTYsIDE0LCAxNCkiPjxwYXRoIGQ9Ik0yNCwwIFE5LDUgMywyNCBMNSwyOCBMOSwyNCBRMTgsMTYgMjQsMCBaIi8+PC9nPiA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2NSwgMzA1KSByb3RhdGUoLTE0LCAxNCwgMTQpIj48cGF0aCBkPSJNMTEsMCBBMTUsMTUgMCAwLDAgMjYsMjIgQTE1LDE1IDAgMSwxIDExLDAgWiIvPjwvZz4gPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTY1LCAyOTApIHJvdGF0ZSgxMiwgMTQsIDE0KSI+PGNpcmNsZSBjeD0iMTQiIGN5PSIxMyIgcj0iMTIiLz48cGF0aCBkPSJNNCwyNSBRMTQsMjAgMjQsMjUgTDIyLDI5IFExNCwyNyA2LDI5IFoiLz48L2c+IDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI3MCwgMzEwKSByb3RhdGUoLTgsIDE0LCAxNCkiPjxjaXJjbGUgY3g9IjE0IiBjeT0iMTQiIHI9IjkiLz48ZWxsaXBzZSBjeD0iMTQiIGN5PSIxNCIgcng9IjE2IiByeT0iNC41IiB0cmFuc2Zvcm09InJvdGF0ZSgtMjAsIDE0LCAxNCkiLz4gPC9nPiA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNTAsIDI5NSkgcm90YXRlKDE0LCAxNCwgMTQpIj48cGF0aCBkPSJNMTAsMCBMMTYsMCBMMTYsNSBMMjQsMjAgUTIyLDI4IDEzLDI4IFEzLDI4IDIsMjAgTDEwLDUgWiIvPjwvZz4gPC9zdmc+"),
    radial-gradient(ellipse at 85% 5%, rgba(168, 85, 247, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 15% 95%, rgba(192, 132, 252, 0.12) 0%, transparent 50%) !important;
  background-size: 380px 380px, auto, auto !important;
  background-repeat: repeat, no-repeat, no-repeat !important;
}
[data-theme="lavender_magic"] .card,
[data-theme="lavender_magic"] .hero-card,
[data-theme="lavender_magic"] .rhythm-card,
[data-theme="lavender_magic"] .timeline-entry-custom,
[data-theme="lavender_magic"] .timeline-entry {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(250, 245, 255, 0.96) 50%, rgba(243, 232, 255, 0.96) 100%) !important;
  border: 1.8px solid #C084FC !important;
  border-left: 5px solid #9333EA !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 20px rgba(168, 85, 247, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(10px);
}
[data-theme="lavender_magic"] .btn-primary {
  background: linear-gradient(135deg, #9333EA 0%, #7E22CE 100%) !important;
  box-shadow: 0 4px 18px rgba(147, 51, 234, 0.40) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 14px !important;
  color: #FFFFFF !important;
}
[data-theme="lavender_magic"] .btn-outline {
  border: 1.8px solid #9333EA !important;
  background: rgba(243, 232, 255, 0.7) !important;
  color: #581C87 !important;
  font-weight: 700 !important;
  border-radius: 14px !important;
}

/* 6. 🌌 Cyber Neon */
[data-theme="cyber_neon"] .app-viewport-wrapper {
  background-color: #04060E;
  background-image: none;
}
[data-theme="cyber_neon"] .mobile-app-container,
[data-theme="cyber_neon"] .modal-sheet {
  background-color: #070B16 !important;
  background-image: 
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODAgMzgwIiB3aWR0aD0iMzgwIiBoZWlnaHQ9IjM4MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDZCNkQ0IiBzdHJva2Utd2lkdGg9IjEuMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBvcGFjaXR5PSIwLjE0Ij4gPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjUsIDIwKSByb3RhdGUoLTEwLCAyMSwgMTUpIj48cmVjdCB4PSIwIiB5PSI0IiB3aWR0aD0iNDIiIGhlaWdodD0iMjQiIHJ4PSI5Ii8+PGxpbmUgeDE9IjciIHkxPSIxNiIgeDI9IjE2IiB5Mj0iMTYiLz48bGluZSB4MT0iMTEuNSIgeTE9IjExLjUiIHgyPSIxMS41IiB5Mj0iMjAuNSIvPjxjaXJjbGUgY3g9IjI5IiBjeT0iMTMiIHI9IjIiIGZpbGw9IiMwNkI2RDQiLz48Y2lyY2xlIGN4PSIzNCIgY3k9IjE5IiByPSIyIiBmaWxsPSIjMDZCNkQ0Ii8+PC9nPiA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMzAsIDM1KSByb3RhdGUoMTUsIDEwLCAxNCkiPjxwb2x5Z29uIHBvaW50cz0iMTAsMCAwLDE0IDgsMTQgNSwyNiAxOSwxMCAxMCwxMCIgZmlsbD0iIzA2QjZENCIvPjwvZz4gPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjM1LCAxOCkgcm90YXRlKC04LCAxNiwgMTYpIj48cmVjdCB4PSI1IiB5PSI1IiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHJ4PSIzIi8+PHJlY3QgeD0iMTAiIHk9IjEwIiB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHJ4PSIyIi8+PGxpbmUgeDE9IjgiIHkxPSIwIiB4Mj0iOCIgeTI9IjUiLz48bGluZSB4MT0iMTciIHkxPSIwIiB4Mj0iMTciIHkyPSI1Ii8+PGxpbmUgeDE9IjI2IiB5MT0iMCIgeDI9IjI2IiB5Mj0iNSIvPjxsaW5lIHgxPSI4IiB5MT0iMjkiIHgyPSI4IiB5Mj0iMzQiLz48bGluZSB4MT0iMTciIHkxPSIyOSIgeDI9IjE3IiB5Mj0iMzQiLz48bGluZSB4MT0iMjYiIHkxPSIyOSIgeDI9IjI2IiB5Mj0iMzQiLz48L2c+IDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMyNSwgMzApIHJvdGF0ZSgxMiwgMTgsIDEyKSI+PHBhdGggZD0iTTAsNyBRMTgsLTIgMzYsNyBMMzYsMjEgUTE4LDI3IDAsMjEgWiIvPjxjaXJjbGUgY3g9IjEwIiBjeT0iMTIiIHI9IjQiLz48Y2lyY2xlIGN4PSIyNiIgY3k9IjEyIiByPSI0Ii8+PC9nPiA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3MCwgMTEwKSByb3RhdGUoLTE0LCAxNCwgMTUpIj48cG9seWdvbiBwb2ludHM9IjE0LDAgMjcsNyAyNywyMyAxNCwzMCAwLDIzIDAsNyIvPjxjaXJjbGUgY3g9IjE0IiBjeT0iMTUiIHI9IjMuNSIgZmlsbD0iIzA2QjZENCIvPjwvZz4gPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTc1LCAxMjApIHJvdGF0ZSgxMCwgMTMsIDEzKSI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjI2IiBoZWlnaHQ9IjI2IiByeD0iMyIvPjxyZWN0IHg9IjUiIHk9IjAiIHdpZHRoPSIxNiIgaGVpZ2h0PSI5Ii8+PHJlY3QgeD0iNSIgeT0iMTMiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxMCIgcng9IjEiLz48L2c+IDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI3NSwgOTUpIHJvdGF0ZSgtNiwgMTYsIDE2KSI+PGNpcmNsZSBjeD0iMTYiIGN5PSIxNiIgcj0iMTIiLz48Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSI1Ii8+PGxpbmUgeDE9IjE2IiB5MT0iMCIgeDI9IjE2IiB5Mj0iNyIvPjxsaW5lIHgxPSIxNiIgeTE9IjI1IiB4Mj0iMTYiIHkyPSIzMiIvPjxsaW5lIHgxPSIwIiB5MT0iMTYiIHgyPSI3IiB5Mj0iMTYiLz48bGluZSB4MT0iMjUiIHkxPSIxNiIgeDI9IjMyIiB5Mj0iMTYiLz48L2c+IDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM1NSwgMTE1KSByb3RhdGUoMTQsIDE0LCAxNCkiPjxwb2x5Z29uIHBvaW50cz0iMTQsMCAyOCwxNCAxNCwyOCAwLDE0Ii8+PC9nPiA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMCwgMjAwKSByb3RhdGUoMTIsIDE0LCAxNCkiPjxwYXRoIGQ9Ik02LDkgQTEwLDEwIDAgMSwwIDIyLDkiLz48bGluZSB4MT0iMTQiIHkxPSIyIiB4Mj0iMTQiIHkyPSIxMiIvPjwvZz4gPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTIwLCAyMTUpIHJvdGF0ZSgtMTAsIDEzLCAxMikiPjxyZWN0IHg9IjAiIHk9IjUiIHdpZHRoPSIyNSIgaGVpZ2h0PSIxOSIgcng9IjMiLz48Y2lyY2xlIGN4PSI2IiBjeT0iMTMiIHI9IjIiIGZpbGw9IiMwNkI2RDQiLz48Y2lyY2xlIGN4PSIxOSIgY3k9IjEzIiByPSIyIiBmaWxsPSIjMDZCNkQ0Ii8+PGxpbmUgeDE9IjYiIHkxPSIyMCIgeDI9IjE5IiB5Mj0iMjAiLz48L2c+IDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIyNSwgMTk1KSByb3RhdGUoOCwgMTYsIDEyKSI+PHBvbHlsaW5lIHBvaW50cz0iOSwwIDAsMTAgOSwyMCIvPjxwb2x5bGluZSBwb2ludHM9IjIzLDAgMzIsMTAgMjMsMjAiLz48bGluZSB4MT0iMTgiIHkxPSIyIiB4Mj0iMTQiIHkyPSIxOCIvPjwvZz4gPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzI1LCAyMTApIHJvdGF0ZSgtMTUsIDE0LCAxNCkiPjxwb2x5Z29uIHBvaW50cz0iMTQsMCAxNyw5IDI3LDkgMjAsMTUgMjMsMjQgMTQsMTkgNSwyNCA4LDE1IDEsOSAxMSw5IiBmaWxsPSIjMDZCNkQ0Ii8+PC9nPiA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2NSwgMzA1KSByb3RhdGUoLTgsIDIxLCAxNSkiPjxyZWN0IHg9IjAiIHk9IjQiIHdpZHRoPSI0MiIgaGVpZ2h0PSIyNCIgcng9IjkiLz48Y2lyY2xlIGN4PSIyOSIgY3k9IjEzIiByPSIyIiBmaWxsPSIjMDZCNkQ0Ii8+PGNpcmNsZSBjeD0iMzQiIGN5PSIxOSIgcj0iMiIgZmlsbD0iIzA2QjZENCIvPjwvZz4gPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTY1LCAyOTApIHJvdGF0ZSgxMiwgMTAsIDE0KSI+PHBvbHlnb24gcG9pbnRzPSIxMCwwIDAsMTQgOCwxNCA1LDI2IDE5LDEwIDEwLDEwIiBmaWxsPSIjMDZCNkQ0Ii8+PC9nPiA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNzAsIDMxMCkgcm90YXRlKC0xNCwgMTYsIDE2KSI+PGNpcmNsZSBjeD0iMTYiIGN5PSIxNiIgcj0iMTIiLz48Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSI1Ii8+PC9nPiA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNTAsIDI5NSkgcm90YXRlKDEwLCAxNCwgMTUpIj48cG9seWdvbiBwb2ludHM9IjE0LDAgMjcsNyAyNywyMyAxNCwzMCAwLDIzIDAsNyIvPjwvZz4gPC9zdmc+"),
  radial-gradient(ellipse at 50% 0%, rgba(6, 182, 212, 0.15) 0%, transparent 55%),
  linear-gradient(180deg, #070B16 0%, #0A1020 100%) !important;
  background-size: 380px 380px, auto, auto !important;
  background-repeat: repeat, no-repeat, no-repeat !important;
}
[data-theme="cyber_neon"] .card,
[data-theme="cyber_neon"] .hero-card,
[data-theme="cyber_neon"] .rhythm-card,
[data-theme="cyber_neon"] .timeline-entry-custom,
[data-theme="cyber_neon"] .timeline-entry {
  background: linear-gradient(135deg, rgba(16, 23, 42, 0.94) 0%, rgba(11, 18, 33, 0.96) 100%) !important;
  border: 1.8px solid #06B6D4 !important;
  border-left: 5px solid #22D3EE !important;
  box-shadow: 0 0 22px rgba(6, 182, 212, 0.28), inset 0 0 14px rgba(6, 182, 212, 0.08) !important;
  border-radius: 18px !important;
  backdrop-filter: blur(10px);
}
[data-theme="cyber_neon"] .btn-primary {
  background: linear-gradient(135deg, #06B6D4 0%, #0891B2 100%) !important;
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.50) !important;
  border: 1.5px solid rgba(103, 232, 249, 0.7) !important;
  border-radius: 14px !important;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.6) !important;
  color: #FFFFFF !important;
}
[data-theme="cyber_neon"] .btn-outline {
  border: 1.8px solid #06B6D4 !important;
  background: rgba(6, 182, 212, 0.14) !important;
  color: #22D3EE !important;
  border-radius: 14px !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   Evening Finish Day Card (Always high contrast night gradient)
   ========================================================================== */

.evening-finish-card,
[data-theme] .evening-finish-card {
  background: linear-gradient(135deg, #1E1B4B 0%, #312E81 50%, #1E293B 100%) !important;
  border: 1.5px solid rgba(251, 191, 36, 0.45) !important;
  border-left: 5px solid #F59E0B !important;
  box-shadow: 0 8px 24px rgba(30, 27, 75, 0.35) !important;
  color: #FFFFFF !important;
}

.evening-finish-card .evening-card-title,
[data-theme] .evening-finish-card .evening-card-title {
  color: #FFFFFF !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
}

.evening-finish-card .evening-card-desc,
[data-theme] .evening-finish-card .evening-card-desc {
  color: rgba(255, 255, 255, 0.90) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.evening-finish-card .evening-card-btn,
[data-theme] .evening-finish-card .evening-card-btn {
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.4) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
}

/* ==========================================================================
   Screen: Results & Daily Summary
   ========================================================================== */

.results-view {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding-bottom: 24px;
}

.results-subnav {
  display: flex;
  gap: 4px;
  background: var(--bg-card-subtle, rgba(0, 0, 0, 0.04));
  padding: 3px;
  border-radius: 14px;
  margin-bottom: 8px;
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.05));
  width: 100%;
  box-sizing: border-box;
}

.results-tab-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 10px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.84rem;
  font-weight: 700;
  border-radius: 11px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: inherit;
}

.results-tab-btn.active {
  background: var(--bg-card, #ffffff);
  color: var(--text-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.results-hero-card {
  background: var(--bg-card, #ffffff);
  border-radius: 22px;
  padding: 14px 10px 14px 10px;
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
  box-shadow: var(--shadow-sm, 0 4px 16px rgba(0, 0, 0, 0.04));
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.results-donut-container {
  position: relative;
  width: 196px;
  height: 196px;
  margin: 4px auto 14px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.results-donut-svg {
  width: 100%;
  height: 100%;
  transform: rotate(0deg);
  overflow: visible;
}

.results-donut-bg {
  fill: none;
  stroke: var(--border-subtle, rgba(0, 0, 0, 0.05));
  stroke-width: 9.5;
}

.results-donut-segment {
  cursor: pointer;
  pointer-events: stroke;
  transition: stroke-width 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), stroke-dashoffset 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), stroke-dasharray 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease, filter 0.2s ease;
}

.results-donut-segment:hover {
  stroke-width: 12.5;
  filter: drop-shadow(0 2px 8px currentColor);
}

.results-donut-segment.active-segment {
  stroke-width: 13;
  filter: drop-shadow(0 0 10px currentColor);
}

.results-donut-segment.dimmed-segment {
  opacity: 0.45;
  stroke-width: 8;
}

.results-donut-sparkle {
  position: absolute;
  top: 36px;
  right: 18px;
  font-size: 1.15rem;
  pointer-events: none;
  opacity: 0.85;
  animation: gentle-float 3s ease-in-out infinite alternate;
}

.results-donut-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  width: 124px;
}

.results-donut-number {
  font-size: 2.85rem;
  font-weight: 850;
  line-height: 1;
  color: var(--text-primary);
  letter-spacing: -1.2px;
}

.results-donut-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-top: 3px;
}

.results-donut-status {
  font-size: 0.82rem;
  font-weight: 750;
  color: var(--accent-primary);
  margin-top: 5px;
  letter-spacing: -0.2px;
}

.results-category-tabs {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
  width: 100% !important;
  margin-top: 4px;
  box-sizing: border-box !important;
}

.results-cat-card {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: 25% !important;
  box-sizing: border-box !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 7px 1px !important;
  border-radius: 13px;
  background: var(--bg-card-subtle, rgba(0, 0, 0, 0.03));
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: inherit;
}

.results-cat-card:hover {
  background: var(--bg-card-subtle, rgba(0, 0, 0, 0.06));
}

.results-cat-card.active {
  background: var(--bg-card, #ffffff);
  border-color: var(--accent-primary);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.results-cat-card .cat-label {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 2px;
  white-space: nowrap;
  letter-spacing: -0.25px;
  max-width: 100%;
  text-align: center;
}

.results-cat-card .cat-val {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 0.96rem;
  font-weight: 800;
  color: var(--text-primary);
}

.results-cat-card .cat-val.gold { color: #d97706; }
.results-cat-card .cat-val.green { color: #16a34a; }
.results-cat-card .cat-val.purple { color: #9333ea; }
.results-cat-card .cat-val.blue { color: #0284c7; }

.results-cat-card .cat-icon {
  font-size: 0.9rem;
}

.results-list-section {
  width: 100%;
}

.results-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 0 4px;
}

.results-list-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.3px;
  margin: 0;
}

.results-list-count {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 600;
}

.results-reset-filter-btn {
  background: var(--bg-card-subtle, rgba(0, 0, 0, 0.06));
  border: none;
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
}

.results-reset-filter-btn:hover {
  color: var(--text-primary);
  background: var(--border-subtle, rgba(0, 0, 0, 0.12));
}

.results-plus-list {
  display: flex;
  flex-direction: column;
}

.results-plus-list-card {
  background: var(--bg-card, #ffffff);
  border-radius: 20px;
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.06));
  box-shadow: var(--shadow-sm, 0 4px 16px rgba(0, 0, 0, 0.04));
  overflow: hidden;
}

.results-plus-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.06));
  cursor: pointer;
  transition: background 0.15s ease;
}

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

.results-plus-row:hover {
  background: var(--bg-card-subtle, rgba(0, 0, 0, 0.025));
}

.results-plus-badge {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 800;
  flex-shrink: 0;
}

.results-plus-badge.green {
  background: #16a34a;
  color: #ffffff;
}

.results-plus-badge.gold {
  background: #f59e0b;
  color: #ffffff;
}

.results-plus-badge.purple {
  background: #9333ea;
  color: #ffffff;
}

.results-plus-badge.blue {
  background: #0ea5e9;
  color: #ffffff;
}

.results-plus-text {
  flex: 1;
  font-size: 0.92rem;
  font-weight: 550;
  color: var(--text-primary);
  line-height: 1.35;
  word-break: break-word;
}

.results-plus-right-val {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-muted, #64748b);
  flex-shrink: 0;
}

.results-empty-card {
  text-align: center;
  padding: 36px 16px;
  border-radius: 20px;
}

/* ==========================================================================
   Health Facts Bottom Button & Modal Styles
   ========================================================================== */

.today-facts-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 4px;
  margin-bottom: 20px;
  padding: 2px 0;
  transform-origin: left bottom;
  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
  will-change: transform, opacity;
}

.today-facts-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, #FF416C 0%, #8A2387 35%, #00B4DB 70%, #00F2FE 100%);
  background-size: 200% 200%;
  color: #FFFFFF !important;
  font-size: 0.86rem;
  font-weight: 750;
  letter-spacing: 0.2px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(138, 35, 135, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.3) inset;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease, filter 0.18s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.today-facts-btn:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 18px rgba(138, 35, 135, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.4) inset;
}

.today-facts-btn:active {
  transform: scale(0.94);
  filter: brightness(0.95);
}

.today-facts-btn .facts-icon {
  font-size: 1rem;
  line-height: 1;
  display: inline-block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Modal: Health Facts (Fullscreen) */
#health-facts-modal {
  padding: 0 !important;
  align-items: stretch !important;
}

.health-facts-modal-sheet {
  width: 100%;
  max-width: 600px;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  overflow: hidden;
  border-radius: 0 !important;
  background: var(--bg-page);
  border: none !important;
}

.health-facts-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.health-facts-header {
  padding: calc(var(--safe-top, 0px) + 14px) 18px 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-card);
  flex-shrink: 0;
}

.health-facts-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: none;
  font-size: 0.88rem;
  font-weight: 750;
  color: var(--accent-primary);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: all 0.15s ease;
  user-select: none;
}

.health-facts-back-btn:hover {
  background: var(--accent-primary-subtle);
}

.health-facts-back-btn:active {
  transform: translateX(-2px);
}

.health-facts-lang-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px 4px 16px;
  background: var(--bg-card-subtle, rgba(0, 0, 0, 0.015));
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.health-facts-lang-pill {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.76rem;
  font-weight: 700;
  border: 1.5px solid var(--border-subtle);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.health-facts-lang-pill.active {
  background: var(--accent-primary);
  color: #ffffff;
  border-color: var(--accent-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.health-facts-menu-scroll {
  padding: 14px 18px 24px 18px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  -webkit-overflow-scrolling: touch;
}

.health-facts-menu-prompt {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-bottom: 4px;
}

.health-facts-menu-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.health-facts-menu-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-primary);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.health-facts-menu-card:active {
  transform: scale(0.98);
}

.health-facts-menu-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  flex-shrink: 0;
  color: #ffffff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}

.health-facts-menu-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.health-facts-menu-title {
  font-size: 0.94rem;
  font-weight: 750;
  color: var(--text-primary);
  line-height: 1.25;
}

.health-facts-menu-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 1px;
}

.health-facts-menu-badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--bg-card-subtle);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

.health-facts-menu-stages {
  font-size: 0.70rem;
  font-weight: 600;
  color: var(--text-muted);
}

.health-facts-menu-lead {
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.health-facts-menu-arrow {
  font-size: 0.92rem;
  color: var(--text-muted);
  font-weight: 700;
  flex-shrink: 0;
  transition: transform 0.15s ease, color 0.15s ease;
}

.health-facts-menu-card:hover .health-facts-menu-arrow {
  transform: translateX(3px);
  color: var(--accent-primary);
}

.health-facts-nav-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.health-facts-topic-counter {
  font-size: 0.76rem;
  font-weight: 750;
  color: var(--text-muted);
  padding: 2px 8px;
  background: var(--bg-card-subtle);
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  user-select: none;
}

@keyframes healthSlideInRight {
  from { opacity: 0.55; transform: translateX(28px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes healthSlideInLeft {
  from { opacity: 0.55; transform: translateX(-28px); }
  to { opacity: 1; transform: translateX(0); }
}

.health-slide-right {
  animation: healthSlideInRight 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.health-slide-left {
  animation: healthSlideInLeft 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.health-facts-scroll-body {
  padding: 16px 18px 24px 18px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  -webkit-overflow-scrolling: touch;
}

.health-facts-hero-banner {
  padding: 14px 16px;
  border-radius: 16px;
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.health-timeline-container {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-left: 18px;
  margin-top: 4px;
}

.health-timeline-container::before {
  content: '';
  position: absolute;
  top: 10px;
  bottom: 14px;
  left: 6px;
  width: 2px;
  background: var(--border-subtle);
  border-radius: 2px;
}

.health-timeline-node-item {
  position: relative;
  margin-bottom: 14px;
}

.health-timeline-node-item:last-child {
  margin-bottom: 0;
}

.health-timeline-bullet {
  position: absolute;
  left: -18px;
  top: 12px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 2px solid var(--accent-primary);
  box-shadow: 0 0 0 2px var(--bg-page);
  z-index: 2;
}

.health-timeline-node-item.is-major .health-timeline-bullet {
  background: #F59E0B;
  border-color: #F59E0B;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.6), 0 0 0 2px var(--bg-page);
}

.health-timeline-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 10px 14px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.health-timeline-node-item.is-major .health-timeline-card {
  border-color: rgba(245, 158, 11, 0.45);
  background: linear-gradient(135deg, var(--bg-card) 0%, rgba(245, 158, 11, 0.05) 100%);
  box-shadow: 0 3px 12px rgba(245, 158, 11, 0.08);
}

.health-timeline-tag {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--accent-primary-subtle);
  color: var(--accent-primary);
  margin-bottom: 4px;
}

.health-timeline-node-item.is-major .health-timeline-tag {
  background: rgba(245, 158, 11, 0.15);
  color: #D97706;
}

.health-timeline-fact-text {
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--text-primary);
  font-weight: 500;
}