/* =========================================================
   HOME-ED HUB THEMES
   ========================================================= */

/* =========================================================
   HOME-ED HUB DEFAULT
   ========================================================= */
:root,
:root[data-theme="home-ed-hub-default"]{
  --radius-xl: 22px;
  --radius-lg: 16px;
  --radius-md: 12px;

  --topbar-height: 84px;
  --bottombar-height: 90px;
  --max-width: 960px;

  --page-bg: #E3E3E3;
  --surface-main: #E3E3E3;
  --text-primary: #3B3427;
  --text-secondary: #726250;
  --line-soft: #9CA0A3;
  --accent-main: #82401D;
  --accent-text: #FFFFFF;
  --link-colour: #82401D;
  --heading-colour: #82401D;
  --text-on-light: #3B3427;
  --text-on-dark: #FFF8F2;
  --shadow: 0 10px 26px rgba(59, 52, 39, 0.08);

  --bg: var(--page-bg);
  --card: var(--surface-main);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --text-soft: var(--text-secondary);
  --border: var(--line-soft);
  --accent: var(--accent-main);
  --accent-ink: var(--accent-text);
  --link: var(--link-colour);
  --heading: var(--heading-colour);
  --ink-on-light: var(--text-on-light);
  --ink-on-dark: var(--text-on-dark);

  --paper: var(--surface-main);
  --cream: var(--page-bg);
  --brown: var(--text-primary);
  --driftwood: var(--text-secondary);
  --clay: var(--link-colour);

  --paper-shadow: 0 8px 20px rgba(59, 52, 39, 0.045), 0 1px 2px rgba(59, 52, 39, 0.03);
  --paper-shadow-soft: 0 4px 10px rgba(59, 52, 39, 0.035);
  --paper-shadow-popover: 0 18px 34px rgba(59, 52, 39, 0.13), 0 4px 10px rgba(59, 52, 39, 0.06);
  --paper-line: rgba(114, 98, 80, 0.20);
  --paper-line-soft: rgba(114, 98, 80, 0.13);
  --paper-fill: rgba(255,255,255,0.20);
  --paper-fill-strong: rgba(255,255,255,0.32);
  --paper-fill-soft: rgba(255,255,255,0.12);
  --paper-selected: rgba(130, 64, 29, 0.11);
  --paper-selected-strong: rgba(130, 64, 29, 0.18);
  --paper-selected-text: #5A2E17;
  --paper-highlight: rgba(255,255,255,0.44);
  --paper-lowlight: rgba(59, 52, 39, 0.035);
  --focus-ring: 0 0 0 3px rgba(130, 64, 29, 0.11);

  --bg-image:
    radial-gradient(circle at 9% 7%, rgba(255,255,255,0.54) 0%, rgba(255,255,255,0.20) 11%, transparent 27%),
    radial-gradient(circle at 91% 9%, rgba(255,255,255,0.44) 0%, rgba(255,255,255,0.14) 10%, transparent 24%),
    radial-gradient(circle at 15% 74%, rgba(130,64,29,0.026) 0 1px, transparent 1.6px),
    radial-gradient(circle at 74% 28%, rgba(92,116,104,0.022) 0 1px, transparent 1.6px),
    radial-gradient(circle at 59% 57%, rgba(125,145,156,0.020) 0 1px, transparent 1.6px),
    radial-gradient(circle at 84% 79%, rgba(114,98,80,0.020) 0 1px, transparent 1.6px),
    repeating-linear-gradient(0deg, rgba(59,52,39,0.010) 0px, rgba(59,52,39,0.010) 1px, transparent 1px, transparent 15px),
    repeating-linear-gradient(90deg, rgba(59,52,39,0.008) 0px, rgba(59,52,39,0.008) 1px, transparent 1px, transparent 15px),
    linear-gradient(180deg, #ECEBE8 0%, #E3E3E3 42%, #DDDCD7 100%);
  --bg-size: auto, auto, 180px 180px, 220px 220px, 240px 240px, 250px 250px, 15px 15px, 15px 15px, auto;
}

:root[data-theme="home-ed-hub-default"] body{
  background: var(--bg-image);
  background-size: var(--bg-size);
  color: var(--text);
}

:root[data-theme="home-ed-hub-default"] body::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,255,255,0.14), transparent 22%),
    radial-gradient(circle at 100% 0%, rgba(255,255,255,0.11), transparent 22%);
  opacity: 0.95;
}

:root[data-theme="home-ed-hub-default"] body::after{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle, rgba(59,52,39,0.020) 0.55px, transparent 0.75px),
    radial-gradient(circle, rgba(130,64,29,0.014) 0.5px, transparent 0.68px);
  background-size: 11px 11px, 17px 17px;
  background-position: 0 0, 5px 7px;
  mix-blend-mode: multiply;
  opacity: 0.19;
}

:root[data-theme="home-ed-hub-default"] .app-shell,
:root[data-theme="home-ed-hub-default"] .page-wrap,
:root[data-theme="home-ed-hub-default"] .content-stack,
:root[data-theme="home-ed-hub-default"] main{
  position: relative;
  z-index: 1;
}

:root[data-theme="home-ed-hub-default"] .topbar{
  background:
    linear-gradient(180deg, rgba(239,238,234,0.90), rgba(231,229,224,0.84));
  border-bottom: 1px solid rgba(114, 98, 80, 0.16);
  box-shadow:
    0 3px 14px rgba(59, 52, 39, 0.045),
    inset 0 1px 0 rgba(255,255,255,0.30);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

:root[data-theme="home-ed-hub-default"] .bottom-nav{
  background:
    linear-gradient(180deg, rgba(238,237,232,0.96), rgba(230,228,223,0.92));
  border-top: 1px solid rgba(114, 98, 80, 0.14);
  box-shadow:
    0 -4px 14px rgba(59, 52, 39, 0.04),
    inset 0 1px 0 rgba(255,255,255,0.26);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

:root[data-theme="home-ed-hub-default"] .brand-title{
  color: var(--heading);
  text-shadow: none;
}

:root[data-theme="home-ed-hub-default"] .brand-subtitle,
:root[data-theme="home-ed-hub-default"] .muted,
:root[data-theme="home-ed-hub-default"] .helper-copy,
:root[data-theme="home-ed-hub-default"] .helper-note,
:root[data-theme="home-ed-hub-default"] .report-note,
:root[data-theme="home-ed-hub-default"] .account-sub,
:root[data-theme="home-ed-hub-default"] .chip-label,
:root[data-theme="home-ed-hub-default"] .field-help,
:root[data-theme="home-ed-hub-default"] .field-note,
:root[data-theme="home-ed-hub-default"] .gallery-subtitle,
:root[data-theme="home-ed-hub-default"] .modal-copy,
:root[data-theme="home-ed-hub-default"] .quick-icon-label,
:root[data-theme="home-ed-hub-default"] .profile-meta,
:root[data-theme="home-ed-hub-default"] .today-event-sub,
:root[data-theme="home-ed-hub-default"] .calendar-list-meta,
:root[data-theme="home-ed-hub-default"] .day-header-subtitle,
:root[data-theme="home-ed-hub-default"] .notifications-popover-item-meta,
:root[data-theme="home-ed-hub-default"] .search-result-item span,
:root[data-theme="home-ed-hub-default"] .add-child-label{
  color: var(--muted);
}

:root[data-theme="home-ed-hub-default"] .card,
:root[data-theme="home-ed-hub-default"] .plan-card,
:root[data-theme="home-ed-hub-default"] .modal-card,
:root[data-theme="home-ed-hub-default"] .account-panel,
:root[data-theme="home-ed-hub-default"] .notifications-popover,
:root[data-theme="home-ed-hub-default"] .search-panel,
:root[data-theme="home-ed-hub-default"] .profile-card,
:root[data-theme="home-ed-hub-default"] .empty-panel,
:root[data-theme="home-ed-hub-default"] .photo-empty-state,
:root[data-theme="home-ed-hub-default"] .gallery-empty-state,
:root[data-theme="home-ed-hub-default"] .calendar-list-item,
:root[data-theme="home-ed-hub-default"] .week-day-block,
:root[data-theme="home-ed-hub-default"] .notifications-popover-item,
:root[data-theme="home-ed-hub-default"] .search-result-item,
:root[data-theme="home-ed-hub-default"] .attachment-pill,
:root[data-theme="home-ed-hub-default"] .toggle-row-wrap,
:root[data-theme="home-ed-hub-default"] .repeat-custom-wrap,
:root[data-theme="home-ed-hub-default"] .repeat-end-wrap{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06)),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(59,52,39,0.015)),
    var(--card);
  border: 1px solid var(--paper-line-soft);
  box-shadow:
    var(--paper-shadow),
    inset 0 1px 0 rgba(255,255,255,0.24);
}

:root[data-theme="home-ed-hub-default"] .card,
:root[data-theme="home-ed-hub-default"] .plan-card,
:root[data-theme="home-ed-hub-default"] .modal-card,
:root[data-theme="home-ed-hub-default"] .account-panel,
:root[data-theme="home-ed-hub-default"] .notifications-popover,
:root[data-theme="home-ed-hub-default"] .search-panel{
  border-radius: var(--radius-xl);
}

:root[data-theme="home-ed-hub-default"] .profile-card{
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.23), rgba(255,255,255,0.09)),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(59,52,39,0.02)),
    var(--card);
  box-shadow:
    0 6px 14px rgba(59,52,39,0.04),
    inset 0 1px 0 rgba(255,255,255,0.24);
}

:root[data-theme="home-ed-hub-default"] .profile-card.active-child{
  background:
    linear-gradient(180deg, rgba(130,64,29,0.08), rgba(130,64,29,0.04)),
    linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.08)),
    var(--card);
  border-color: rgba(130,64,29,0.22);
  box-shadow:
    0 6px 16px rgba(59,52,39,0.05),
    inset 0 0 0 1px rgba(130,64,29,0.12),
    inset 0 1px 0 rgba(255,255,255,0.22);
}

:root[data-theme="home-ed-hub-default"] .plan-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.06)),
    linear-gradient(135deg, rgba(130,64,29,0.05), rgba(114,98,80,0.03)),
    var(--card);
  border-color: rgba(114,98,80,0.15);
}

:root[data-theme="home-ed-hub-default"] .plan-label{
  background: rgba(130,64,29,0.10);
  color: var(--paper-selected-text);
  border: 1px solid rgba(130,64,29,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}

:root[data-theme="home-ed-hub-default"] .plan-heading,
:root[data-theme="home-ed-hub-default"] .section-title h2,
:root[data-theme="home-ed-hub-default"] .section-title h3,
:root[data-theme="home-ed-hub-default"] .calendar-month,
:root[data-theme="home-ed-hub-default"] .account-title,
:root[data-theme="home-ed-hub-default"] .modal-title,
:root[data-theme="home-ed-hub-default"] .day-header-title,
:root[data-theme="home-ed-hub-default"] .notifications-popover-title{
  color: var(--text);
}

:root[data-theme="home-ed-hub-default"] .icon-circle,
:root[data-theme="home-ed-hub-default"] .small-round-btn,
:root[data-theme="home-ed-hub-default"] .notifications-settings-btn,
:root[data-theme="home-ed-hub-default"] .notifications-mini-btn,
:root[data-theme="home-ed-hub-default"] .profile-menu-btn,
:root[data-theme="home-ed-hub-default"] .event-action-btn,
:root[data-theme="home-ed-hub-default"] .gallery-close-btn,
:root[data-theme="home-ed-hub-default"] .close-btn,
:root[data-theme="home-ed-hub-default"] .gallery-overlay-btn{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.14)),
    rgba(255,255,255,0.16);
  border: 1px solid var(--paper-line-soft);
  color: var(--text);
  box-shadow:
    0 2px 6px rgba(59,52,39,0.04),
    inset 0 1px 0 rgba(255,255,255,0.26);
}

:root[data-theme="home-ed-hub-default"] .icon-circle:hover,
:root[data-theme="home-ed-hub-default"] .small-round-btn:hover,
:root[data-theme="home-ed-hub-default"] .notifications-settings-btn:hover,
:root[data-theme="home-ed-hub-default"] .notifications-mini-btn:hover,
:root[data-theme="home-ed-hub-default"] .profile-menu-btn:hover,
:root[data-theme="home-ed-hub-default"] .event-action-btn:hover,
:root[data-theme="home-ed-hub-default"] .gallery-close-btn:hover,
:root[data-theme="home-ed-hub-default"] .close-btn:hover,
:root[data-theme="home-ed-hub-default"] .gallery-overlay-btn:hover{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0.16)),
    rgba(255,255,255,0.20);
}

:root[data-theme="home-ed-hub-default"] .action-btn,
:root[data-theme="home-ed-hub-default"] .modal-option-btn.primary{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0)),
    var(--accent-main);
  color: var(--accent-ink);
  border: 1px solid rgba(104,49,21,0.72);
  box-shadow:
    0 3px 8px rgba(59,52,39,0.08),
    inset 0 1px 0 rgba(255,255,255,0.14);
}

:root[data-theme="home-ed-hub-default"] .ghost-btn,
:root[data-theme="home-ed-hub-default"] .today-btn,
:root[data-theme="home-ed-hub-default"] .view-btn,
:root[data-theme="home-ed-hub-default"] .modal-option-btn.secondary,
:root[data-theme="home-ed-hub-default"] .profile-menu-dropdown-btn,
:root[data-theme="home-ed-hub-default"] .theme-btn{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.10)),
    rgba(255,255,255,0.18);
  color: var(--text);
  border: 1px solid var(--paper-line-soft);
  box-shadow:
    0 1px 4px rgba(59,52,39,0.03),
    inset 0 1px 0 rgba(255,255,255,0.24);
}

:root[data-theme="home-ed-hub-default"] .view-btn.active,
:root[data-theme="home-ed-hub-default"] .theme-btn.active,
:root[data-theme="home-ed-hub-default"] .bottom-nav-link.active{
  background:
    linear-gradient(180deg, rgba(130,64,29,0.12), rgba(130,64,29,0.07)),
    rgba(255,255,255,0.12);
  color: var(--paper-selected-text) !important;
  border-color: rgba(130,64,29,0.20);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    0 2px 5px rgba(59,52,39,0.04);
}

:root[data-theme="home-ed-hub-default"] .bottom-nav-link{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.08)),
    rgba(255,255,255,0.12);
  border: 1px solid rgba(114,98,80,0.12);
  color: var(--text);
  box-shadow:
    0 2px 8px rgba(59,52,39,0.035),
    inset 0 1px 0 rgba(255,255,255,0.22);
}

:root[data-theme="home-ed-hub-default"] .bottom-nav-link span,
:root[data-theme="home-ed-hub-default"] .bottom-nav-text{
  color: inherit;
}

:root[data-theme="home-ed-hub-default"] .quick-icon-btn{
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.26), rgba(255,255,255,0.10)),
    rgba(255,255,255,0.12);
  border: 1px solid var(--paper-line-soft);
  box-shadow:
    0 4px 10px rgba(59,52,39,0.04),
    inset 0 1px 0 rgba(255,255,255,0.24);
  color: var(--text);
}

:root[data-theme="home-ed-hub-default"] .search-input-wrap,
:root[data-theme="home-ed-hub-default"] .text-input,
:root[data-theme="home-ed-hub-default"] .select-input,
:root[data-theme="home-ed-hub-default"] .textarea-input{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.10)),
    rgba(255,255,255,0.16);
  border: 1px solid rgba(114,98,80,0.18);
  color: var(--text);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.24),
    0 1px 3px rgba(59,52,39,0.025);
}

:root[data-theme="home-ed-hub-default"] .text-input::placeholder,
:root[data-theme="home-ed-hub-default"] .textarea-input::placeholder,
:root[data-theme="home-ed-hub-default"] .search-input-wrap input::placeholder{
  color: rgba(114,98,80,0.78);
}

:root[data-theme="home-ed-hub-default"] .text-input:focus,
:root[data-theme="home-ed-hub-default"] .select-input:focus,
:root[data-theme="home-ed-hub-default"] .textarea-input:focus,
:root[data-theme="home-ed-hub-default"] .search-input-wrap input:focus,
:root[data-theme="home-ed-hub-default"] button:focus-visible,
:root[data-theme="home-ed-hub-default"] a:focus-visible{
  outline: none;
  box-shadow: var(--focus-ring), inset 0 1px 0 rgba(255,255,255,0.24);
  border-color: rgba(130,64,29,0.22);
}

:root[data-theme="home-ed-hub-default"] .profile-menu-dropdown,
:root[data-theme="home-ed-hub-default"] .account-panel,
:root[data-theme="home-ed-hub-default"] .notifications-popover{
  z-index: 99999;
}

:root[data-theme="home-ed-hub-default"] .profiles-row,
:root[data-theme="home-ed-hub-default"] .profile-card,
:root[data-theme="home-ed-hub-default"] .profile-menu-wrap{
  overflow: visible;
}

:root[data-theme="home-ed-hub-default"] .profile-menu-wrap{
  z-index: 120;
}

:root[data-theme="home-ed-hub-default"] .profile-menu-dropdown{
  background:
    linear-gradient(180deg, rgba(238,236,231,0.98), rgba(231,229,224,0.98));
  border: 1px solid rgba(114,98,80,0.16);
  box-shadow: var(--paper-shadow-popover);
}

:root[data-theme="home-ed-hub-default"] .profile-menu-dropdown-btn{
  background: transparent;
  color: var(--text);
  border: 1px solid transparent;
  box-shadow: none;
}

:root[data-theme="home-ed-hub-default"] .profile-menu-dropdown-btn:hover{
  background: rgba(130,64,29,0.08);
  color: var(--paper-selected-text);
  border-color: rgba(130,64,29,0.10);
}

:root[data-theme="home-ed-hub-default"] .theme-list{
  gap: 7px;
}

:root[data-theme="home-ed-hub-default"] .theme-btn{
  justify-content: flex-start;
  text-align: left;
  color: var(--text) !important;
}

:root[data-theme="home-ed-hub-default"] .theme-btn.active{
  color: var(--paper-selected-text) !important;
}

:root[data-theme="home-ed-hub-default"] .theme-btn,
:root[data-theme="home-ed-hub-default"] .theme-btn.active,
:root[data-theme="home-ed-hub-default"] .theme-btn:hover{
  text-shadow: none;
}

:root[data-theme="home-ed-hub-default"] .add-child-inline{
  min-width: 92px;
  width: auto;
  padding: 6px 4px 2px;
  gap: 8px;
  margin-left: auto;
}

:root[data-theme="home-ed-hub-default"] .add-child-circle{
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.08)),
    rgba(130,64,29,0.08);
  color: var(--paper-selected-text);
  border: 1px solid rgba(130,64,29,0.16);
  box-shadow:
    0 2px 6px rgba(59,52,39,0.03),
    inset 0 1px 0 rgba(255,255,255,0.20);
  font-size: 1.25rem;
}

:root[data-theme="home-ed-hub-default"] .add-child-label{
  color: var(--paper-selected-text);
  font-size: 0.82rem;
}

:root[data-theme="home-ed-hub-default"] .notifications-popover-item.unread{
  background:
    linear-gradient(180deg, rgba(130,64,29,0.08), rgba(130,64,29,0.04)),
    linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.08)),
    var(--card);
  border-color: rgba(130,64,29,0.18);
  box-shadow:
    0 4px 10px rgba(59,52,39,0.04),
    inset 0 0 0 1px rgba(130,64,29,0.08),
    inset 0 1px 0 rgba(255,255,255,0.22);
}

:root[data-theme="home-ed-hub-default"] .search-result-item strong,
:root[data-theme="home-ed-hub-default"] .notifications-popover-item-title,
:root[data-theme="home-ed-hub-default"] .profile-name,
:root[data-theme="home-ed-hub-default"] .profile-view-name,
:root[data-theme="home-ed-hub-default"] .today-event-title,
:root[data-theme="home-ed-hub-default"] .calendar-list-title,
:root[data-theme="home-ed-hub-default"] .day-events-modal-title,
:root[data-theme="home-ed-hub-default"] .event-line-title{
  color: inherit;
}

:root[data-theme="home-ed-hub-default"] .today-event-link,
:root[data-theme="home-ed-hub-default"] .calendar-list-event-btn,
:root[data-theme="home-ed-hub-default"] .day-events-modal-card,
:root[data-theme="home-ed-hub-default"] .event-line-btn{
  border-radius: 14px;
  box-shadow: none;
}

:root[data-theme="home-ed-hub-default"] .today-event-link{
  border-width: 1px;
}

:root[data-theme="home-ed-hub-default"] .calendar-card{
  overflow: visible;
}

:root[data-theme="home-ed-hub-default"] .calendar-grid-wrap{
  overflow: visible;
}

:root[data-theme="home-ed-hub-default"] .weekday{
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.05em;
}

:root[data-theme="home-ed-hub-default"] .calendar-day-link,
:root[data-theme="home-ed-hub-default"] .calendar-day-btn{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.17), rgba(255,255,255,0.06)),
    rgba(255,255,255,0.08);
  border: 1px solid rgba(114,98,80,0.12);
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 1px 2px rgba(59,52,39,0.015);
  overflow: hidden;
}

:root[data-theme="home-ed-hub-default"] .calendar-day-link.today,
:root[data-theme="home-ed-hub-default"] .calendar-day-btn.today{
  background:
    linear-gradient(180deg, rgba(130,64,29,0.06), rgba(130,64,29,0.03)),
    rgba(255,255,255,0.09);
  border-color: rgba(130,64,29,0.18);
  box-shadow:
    inset 0 0 0 1px rgba(130,64,29,0.08),
    inset 0 1px 0 rgba(255,255,255,0.16);
}

:root[data-theme="home-ed-hub-default"] .calendar-day-link:hover,
:root[data-theme="home-ed-hub-default"] .calendar-day-btn:hover{
  border-color: rgba(130,64,29,0.16);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.08)),
    rgba(255,255,255,0.10);
}

:root[data-theme="home-ed-hub-default"] .day-number{
  color: var(--text);
  font-weight: 700;
}

:root[data-theme="home-ed-hub-default"] .day-event-pill,
:root[data-theme="home-ed-hub-default"] .calendar-tube{
  border-radius: 8px;
  box-shadow: none;
  border-width: 1px;
}

:root[data-theme="home-ed-hub-default"] .day-event-title,
:root[data-theme="home-ed-hub-default"] .calendar-tube-title,
:root[data-theme="home-ed-hub-default"] .calendar-tube-time{
  color: inherit;
}

:root[data-theme="home-ed-hub-default"] .day-more-events,
:root[data-theme="home-ed-hub-default"] .more-events-pill{
  color: var(--muted);
}

:root[data-theme="home-ed-hub-default"] .view-switch,
:root[data-theme="home-ed-hub-default"] .calendar-controls,
:root[data-theme="home-ed-hub-default"] .plan-actions,
:root[data-theme="home-ed-hub-default"] .recent-photos-actions,
:root[data-theme="home-ed-hub-default"] .modal-options{
  gap: 10px;
}

:root[data-theme="home-ed-hub-default"] .child-chip,
:root[data-theme="home-ed-hub-default"] .weekday-chip,
:root[data-theme="home-ed-hub-default"] .select-button,
:root[data-theme="home-ed-hub-default"] .filter-button,
:root[data-theme="home-ed-hub-default"] .choice-button,
:root[data-theme="home-ed-hub-default"] .chip-button{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.20), rgba(255,255,255,0.08)),
    rgba(255,255,255,0.12);
  color: var(--text);
  border: 1px solid rgba(114,98,80,0.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 1px 3px rgba(59,52,39,0.02);
}

:root[data-theme="home-ed-hub-default"] .child-chip.active,
:root[data-theme="home-ed-hub-default"] .weekday-chip.active,
:root[data-theme="home-ed-hub-default"] .select-button.selected,
:root[data-theme="home-ed-hub-default"] .select-button[aria-selected="true"],
:root[data-theme="home-ed-hub-default"] .select-button[aria-pressed="true"],
:root[data-theme="home-ed-hub-default"] .filter-button.selected,
:root[data-theme="home-ed-hub-default"] .filter-button[aria-selected="true"],
:root[data-theme="home-ed-hub-default"] .filter-button[aria-pressed="true"],
:root[data-theme="home-ed-hub-default"] .choice-button.selected,
:root[data-theme="home-ed-hub-default"] .choice-button[aria-selected="true"],
:root[data-theme="home-ed-hub-default"] .choice-button[aria-pressed="true"],
:root[data-theme="home-ed-hub-default"] .chip-button.selected,
:root[data-theme="home-ed-hub-default"] .chip-button[aria-selected="true"],
:root[data-theme="home-ed-hub-default"] .chip-button[aria-pressed="true"]{
  background:
    linear-gradient(180deg, rgba(130,64,29,0.16), rgba(130,64,29,0.10)),
    rgba(255,255,255,0.08) !important;
  color: var(--paper-selected-text) !important;
  border-color: rgba(130,64,29,0.26) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 0 0 1px rgba(130,64,29,0.10),
    0 1px 3px rgba(59,52,39,0.02) !important;
  font-weight: 700;
}

:root[data-theme="home-ed-hub-default"] .colour-chip{
  border-color: rgba(114,98,80,0.18);
  box-shadow:
    0 2px 6px rgba(59,52,39,0.04),
    inset 0 1px 0 rgba(255,255,255,0.18);
}

:root[data-theme="home-ed-hub-default"] .colour-chip.active::after{
  border-color: rgba(255,255,255,0.92);
  box-shadow: 0 0 0 1px rgba(59,52,39,0.18);
}

:root[data-theme="home-ed-hub-default"] .photo-tile,
:root[data-theme="home-ed-hub-default"] .gallery-tile{
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.08)),
    rgba(255,255,255,0.10);
  border: 1px solid rgba(114,98,80,0.14);
  box-shadow:
    0 2px 8px rgba(59,52,39,0.03),
    inset 0 1px 0 rgba(255,255,255,0.18);
}

:root[data-theme="home-ed-hub-default"] .photo-tile.selected{
  border-color: rgba(130,64,29,0.24);
  box-shadow:
    inset 0 0 0 2px rgba(130,64,29,0.14),
    0 3px 8px rgba(59,52,39,0.03);
}

:root[data-theme="home-ed-hub-default"] .photo-select-badge{
  background:
    linear-gradient(180deg, rgba(238,236,231,0.96), rgba(231,229,224,0.96));
  color: var(--text);
  border-color: rgba(114,98,80,0.16);
}

:root[data-theme="home-ed-hub-default"] .photo-tile.selected .photo-select-badge{
  background: var(--accent-main);
  color: var(--accent-ink);
  border-color: rgba(104,49,21,0.72);
}

:root[data-theme="home-ed-hub-default"] .modal-backdrop{
  background: rgba(59,52,39,0.18);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

:root[data-theme="home-ed-hub-default"] .divider{
  background: linear-gradient(90deg, transparent, rgba(156,160,163,0.38), rgba(130,64,29,0.10), rgba(156,160,163,0.38), transparent);
}

:root[data-theme="home-ed-hub-default"] .toggle-row-wrap,
:root[data-theme="home-ed-hub-default"] .attachment-pill,
:root[data-theme="home-ed-hub-default"] .search-input-wrap,
:root[data-theme="home-ed-hub-default"] .notifications-popover-empty,
:root[data-theme="home-ed-hub-default"] .search-result-item,
:root[data-theme="home-ed-hub-default"] .empty-panel,
:root[data-theme="home-ed-hub-default"] .photo-empty-state,
:root[data-theme="home-ed-hub-default"] .gallery-empty-state{
  border-radius: 16px;
}

:root[data-theme="home-ed-hub-default"] .calendar-list-item,
:root[data-theme="home-ed-hub-default"] .week-day-block,
:root[data-theme="home-ed-hub-default"] .day-events-modal-card{
  border-radius: 14px;
}

:root[data-theme="home-ed-hub-default"] .calendar-list-item[style],
:root[data-theme="home-ed-hub-default"] .today-event-link[style],
:root[data-theme="home-ed-hub-default"] .calendar-list-event-btn[style],
:root[data-theme="home-ed-hub-default"] .calendar-tube[style],
:root[data-theme="home-ed-hub-default"] .day-event-pill[style],
:root[data-theme="home-ed-hub-default"] .day-events-modal-card[style]{
  background-clip: padding-box;
}

:root[data-theme="home-ed-hub-default"] .event-line-btn,
:root[data-theme="home-ed-hub-default"] .calendar-list-event-btn,
:root[data-theme="home-ed-hub-default"] .today-event-link,
:root[data-theme="home-ed-hub-default"] .day-events-open-btn{
  background: transparent !important;
  box-shadow: none !important;
}

:root[data-theme="home-ed-hub-default"] .switch .slider{
  background: rgba(156,160,163,0.42);
  box-shadow: inset 0 1px 2px rgba(59,52,39,0.06);
}

:root[data-theme="home-ed-hub-default"] .switch .slider::before{
  background: rgba(255,255,255,0.96);
  box-shadow: 0 2px 6px rgba(59,52,39,0.14);
}

:root[data-theme="home-ed-hub-default"] .switch input:checked + .slider{
  background: rgba(130,64,29,0.72);
}

:root[data-theme="home-ed-hub-default"] a{
  color: var(--link);
  text-decoration-color: rgba(130,64,29,0.24);
  text-underline-offset: 0.15em;
}

:root[data-theme="home-ed-hub-default"] ::selection{
  background: rgba(130,64,29,0.14);
  color: var(--text);
}

/* =========================================================
   AFTER RAIN
   ========================================================= */
:root[data-theme="after-rain"]{
  --page-bg:
    linear-gradient(180deg, rgba(255,255,255,0.18), transparent 22%),
    radial-gradient(circle at 14% 10%, rgba(255,255,255,0.28) 0 10%, transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(214,232,219,0.22) 0 8%, transparent 24%),
    linear-gradient(145deg, #6F8976 0%, #7E9A84 38%, #8CA78E 68%, #A9BBA7 100%);
  --surface-main: rgba(235,242,234,0.80);
  --text-primary: #2F3D31;
  --text-secondary: #6D7F70;
  --line-soft: rgba(120,142,123,0.34);
  --accent-main: #6F8F72;
  --accent-text: #FFFFFF;
  --link-colour: #516754;
  --heading-colour: #2F3D31;
  --text-on-light: #2F3D31;
  --text-on-dark: #F7FBF7;
  --shadow: 0 12px 28px rgba(46,67,50,0.14);

  --paper-line-soft: rgba(96,118,100,0.18);
  --glass-line: rgba(255,255,255,0.28);
}
:root[data-theme="after-rain"] body{
  background:
    repeating-linear-gradient(96deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 22px),
    var(--page-bg);
}
:root[data-theme="after-rain"] body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(circle at 20% 24%, rgba(255,255,255,0.24) 0 1px, transparent 2px),
    radial-gradient(circle at 60% 30%, rgba(255,255,255,0.14) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 68%, rgba(255,255,255,0.16) 0 1px, transparent 2px);
  background-size: 130px 130px, 170px 170px, 210px 210px;
  opacity: .55;
}
:root[data-theme="after-rain"] .topbar,
:root[data-theme="after-rain"] .bottom-nav{
  background: linear-gradient(180deg, rgba(225,235,228,0.72), rgba(214,227,219,0.62));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-color: rgba(98,120,103,0.18);
}
:root[data-theme="after-rain"] .card,
:root[data-theme="after-rain"] .plan-card,
:root[data-theme="after-rain"] .modal-card,
:root[data-theme="after-rain"] .account-panel,
:root[data-theme="after-rain"] .notifications-popover,
:root[data-theme="after-rain"] .search-panel,
:root[data-theme="after-rain"] .profile-card,
:root[data-theme="after-rain"] .empty-panel,
:root[data-theme="after-rain"] .calendar-list-item,
:root[data-theme="after-rain"] .week-day-block,
:root[data-theme="after-rain"] .search-result-item{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.32), rgba(255,255,255,0.12)),
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(111,137,118,0.06)),
    rgba(235,242,234,0.76);
  border: 1px solid rgba(110,138,115,0.20);
  box-shadow: 0 10px 28px rgba(46,67,50,0.11), inset 0 1px 0 rgba(255,255,255,0.32);
}
:root[data-theme="after-rain"] .action-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0)), var(--accent-main);
  border-color: rgba(72,96,78,0.58);
  box-shadow: 0 6px 16px rgba(66,92,71,0.16);
}
:root[data-theme="after-rain"] .ghost-btn,
:root[data-theme="after-rain"] .theme-btn,
:root[data-theme="after-rain"] .view-btn,
:root[data-theme="after-rain"] .bottom-nav-link,
:root[data-theme="after-rain"] .icon-circle,
:root[data-theme="after-rain"] .small-round-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.30), rgba(255,255,255,0.12));
  border-color: rgba(110,138,115,0.18);
  box-shadow: 0 4px 12px rgba(46,67,50,0.08), inset 0 1px 0 rgba(255,255,255,0.32);
}
:root[data-theme="after-rain"] .calendar-day-link,
:root[data-theme="after-rain"] .calendar-day-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.26), rgba(255,255,255,0.10));
  border-color: rgba(110,138,115,0.16);
}

/* =========================================================
   ANCIENT FOREST
   ========================================================= */
:root[data-theme="ancient-forest"]{
  --page-bg:
    radial-gradient(circle at 50% 40%, rgba(74,104,81,0.14), transparent 24%),
    linear-gradient(180deg, rgba(0,0,0,0.16), transparent 26%),
    linear-gradient(160deg, #0B120D 0%, #111A14 30%, #18241C 62%, #243127 100%);
  --surface-main: rgba(42,55,45,0.82);
  --text-primary: #E7E2D4;
  --text-secondary: #A7A491;
  --line-soft: rgba(84,100,84,0.34);
  --accent-main: #5B745A;
  --accent-text: #F8F5EE;
  --link-colour: #A1B59A;
  --heading-colour: #E7E2D4;
  --text-on-light: #202A22;
  --text-on-dark: #F8F5EE;
  --shadow: 0 16px 34px rgba(0,0,0,0.34);
}
:root[data-theme="ancient-forest"] body{
  background:
    linear-gradient(90deg, rgba(0,0,0,0.16) 0 7%, transparent 7% 16%, rgba(0,0,0,0.11) 16% 22%, transparent 22% 36%, rgba(0,0,0,0.13) 36% 41%, transparent 41% 58%, rgba(0,0,0,0.09) 58% 65%, transparent 65% 78%, rgba(0,0,0,0.13) 78% 84%, transparent 84%),
    var(--page-bg);
}
:root[data-theme="ancient-forest"] body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(circle at 24% 28%, rgba(122,153,116,0.09), transparent 18%),
    radial-gradient(circle at 76% 36%, rgba(110,134,99,0.08), transparent 16%),
    radial-gradient(circle at 50% 52%, rgba(255,255,255,0.035), transparent 22%);
  opacity:.9;
}
:root[data-theme="ancient-forest"] .topbar,
:root[data-theme="ancient-forest"] .bottom-nav{
  background: linear-gradient(180deg, rgba(13,20,16,0.84), rgba(18,27,21,0.76));
  border-color: rgba(104,123,101,0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
:root[data-theme="ancient-forest"] .card,
:root[data-theme="ancient-forest"] .plan-card,
:root[data-theme="ancient-forest"] .modal-card,
:root[data-theme="ancient-forest"] .account-panel,
:root[data-theme="ancient-forest"] .notifications-popover,
:root[data-theme="ancient-forest"] .search-panel,
:root[data-theme="ancient-forest"] .profile-card,
:root[data-theme="ancient-forest"] .empty-panel,
:root[data-theme="ancient-forest"] .calendar-list-item,
:root[data-theme="ancient-forest"] .week-day-block,
:root[data-theme="ancient-forest"] .search-result-item{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)),
    linear-gradient(180deg, rgba(31,46,37,0.76), rgba(24,37,29,0.88));
  border: 1px solid rgba(103,121,101,0.17);
  box-shadow: 0 14px 30px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.07);
}
:root[data-theme="ancient-forest"] .action-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0)), var(--accent-main);
  border-color: rgba(134,160,132,0.28);
  box-shadow: 0 8px 18px rgba(0,0,0,0.22);
}
:root[data-theme="ancient-forest"] .ghost-btn,
:root[data-theme="ancient-forest"] .theme-btn,
:root[data-theme="ancient-forest"] .view-btn,
:root[data-theme="ancient-forest"] .bottom-nav-link,
:root[data-theme="ancient-forest"] .icon-circle,
:root[data-theme="ancient-forest"] .small-round-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border-color: rgba(103,121,101,0.17);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
}
:root[data-theme="ancient-forest"] .calendar-day-link,
:root[data-theme="ancient-forest"] .calendar-day-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015)), rgba(26,37,29,0.66);
  border-color: rgba(103,121,101,0.14);
}

/* =========================================================
   ARCTIC
   ========================================================= */
:root[data-theme="arctic"]{
  --page-bg:
    radial-gradient(circle at 24% 10%, rgba(255,255,255,0.56), transparent 18%),
    radial-gradient(circle at 82% 16%, rgba(225,242,250,0.34), transparent 22%),
    linear-gradient(155deg, #C6D8E4 0%, #D7E6EE 34%, #E7F1F6 68%, #F4FAFD 100%);
  --surface-main: rgba(248,252,254,0.82);
  --text-primary: #36515F;
  --text-secondary: #6E8793;
  --line-soft: rgba(150,185,204,0.34);
  --accent-main: #7DB5D1;
  --accent-text: #FFFFFF;
  --link-colour: #4D7F96;
  --heading-colour: #36515F;
  --text-on-light: #304A56;
  --text-on-dark: #F8FCFE;
  --shadow: 0 12px 28px rgba(93,132,153,0.14);
}
:root[data-theme="arctic"] body{
  background:
    linear-gradient(135deg, rgba(255,255,255,0.15) 0 20%, transparent 20% 100%),
    repeating-linear-gradient(140deg, rgba(255,255,255,0.10) 0 2px, transparent 2px 26px),
    var(--page-bg);
}
:root[data-theme="arctic"] body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(circle at 14% 24%, rgba(255,255,255,0.50) 0 1.2px, transparent 2px),
    radial-gradient(circle at 68% 34%, rgba(255,255,255,0.34) 0 1px, transparent 2px),
    radial-gradient(circle at 86% 76%, rgba(217,236,246,0.28) 0 1px, transparent 2px);
  background-size: 120px 120px, 150px 150px, 190px 190px;
  opacity:.7;
}
:root[data-theme="arctic"] .topbar,
:root[data-theme="arctic"] .bottom-nav{
  background: linear-gradient(180deg, rgba(240,249,252,0.74), rgba(228,241,247,0.62));
  border-color: rgba(142,181,198,0.18);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
:root[data-theme="arctic"] .card,
:root[data-theme="arctic"] .plan-card,
:root[data-theme="arctic"] .modal-card,
:root[data-theme="arctic"] .account-panel,
:root[data-theme="arctic"] .notifications-popover,
:root[data-theme="arctic"] .search-panel,
:root[data-theme="arctic"] .profile-card,
:root[data-theme="arctic"] .empty-panel,
:root[data-theme="arctic"] .calendar-list-item,
:root[data-theme="arctic"] .week-day-block,
:root[data-theme="arctic"] .search-result-item{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.50), rgba(255,255,255,0.16)),
    rgba(244,250,253,0.74);
  border: 1px solid rgba(157,194,210,0.18);
  box-shadow: 0 10px 26px rgba(93,132,153,0.10), inset 0 1px 0 rgba(255,255,255,0.62);
}
:root[data-theme="arctic"] .action-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0)), var(--accent-main);
  border-color: rgba(82,126,146,0.40);
}
:root[data-theme="arctic"] .ghost-btn,
:root[data-theme="arctic"] .theme-btn,
:root[data-theme="arctic"] .view-btn,
:root[data-theme="arctic"] .bottom-nav-link,
:root[data-theme="arctic"] .icon-circle,
:root[data-theme="arctic"] .small-round-btn,
:root[data-theme="arctic"] .quick-icon-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.46), rgba(255,255,255,0.16));
  border-color: rgba(157,194,210,0.18);
  box-shadow: 0 4px 10px rgba(93,132,153,0.06), inset 0 1px 0 rgba(255,255,255,0.58);
}
:root[data-theme="arctic"] .calendar-day-link,
:root[data-theme="arctic"] .calendar-day-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0.14));
  border-color: rgba(157,194,210,0.16);
}

/* =========================================================
   AUTUMN
   ========================================================= */
:root[data-theme="autumn"]{
  --page-bg:
    radial-gradient(circle at 14% 18%, rgba(255,205,148,0.12), transparent 18%),
    radial-gradient(circle at 84% 20%, rgba(126,52,29,0.10), transparent 20%),
    linear-gradient(180deg, #A05A36 0%, #8F4E2F 30%, #743D28 66%, #5D2E21 100%);
  --surface-main: #B99F93;
  --text-primary: #2F261F;
  --text-secondary: #6E5E55;
  --line-soft: #6D5850;
  --accent-main: #9E3B2A;
  --accent-text: #FFFFFF;
  --link-colour: #70241E;
  --heading-colour: #2F261F;
  --text-on-light: #2F261F;
  --text-on-dark: #FFF4EE;
  --shadow: 0 12px 28px rgba(52,27,20,0.18);
}
:root[data-theme="autumn"] body{
  background:
    radial-gradient(16px 9px at 12% 68%, rgba(207,135,73,0.11) 0 60%, transparent 66%),
    radial-gradient(18px 10px at 22% 78%, rgba(126,52,29,0.14) 0 60%, transparent 66%),
    radial-gradient(15px 8px at 34% 72%, rgba(191,108,54,0.11) 0 60%, transparent 66%),
    radial-gradient(18px 10px at 58% 80%, rgba(92,46,31,0.14) 0 60%, transparent 66%),
    radial-gradient(15px 8px at 76% 74%, rgba(207,135,73,0.10) 0 60%, transparent 66%),
    radial-gradient(18px 10px at 88% 82%, rgba(126,52,29,0.14) 0 60%, transparent 66%),
    radial-gradient(circle at 18% 30%, rgba(255,232,198,0.06) 0 1px, transparent 2px),
    radial-gradient(circle at 68% 22%, rgba(255,232,198,0.05) 0 1px, transparent 2px),
    linear-gradient(180deg, transparent 0%, transparent 60%, rgba(61,31,22,0.08) 100%),
    var(--page-bg);
}
:root[data-theme="autumn"] .topbar,
:root[data-theme="autumn"] .bottom-nav{
  background: linear-gradient(180deg, rgba(164,108,82,0.86), rgba(119,67,46,0.76));
  border-color: rgba(109,88,80,0.16);
}
:root[data-theme="autumn"] .card,
:root[data-theme="autumn"] .plan-card,
:root[data-theme="autumn"] .modal-card,
:root[data-theme="autumn"] .account-panel,
:root[data-theme="autumn"] .notifications-popover,
:root[data-theme="autumn"] .search-panel,
:root[data-theme="autumn"] .profile-card,
:root[data-theme="autumn"] .empty-panel,
:root[data-theme="autumn"] .calendar-list-item,
:root[data-theme="autumn"] .week-day-block,
:root[data-theme="autumn"] .search-result-item{
  background:
    linear-gradient(180deg, rgba(255,243,233,0.18), rgba(255,243,233,0.05)),
    rgba(184,158,145,0.72);
  border: 1px solid rgba(109,88,80,0.18);
  box-shadow: 0 12px 28px rgba(52,27,20,0.10), inset 0 1px 0 rgba(255,243,233,0.20);
}
:root[data-theme="autumn"] .action-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0)), var(--accent-main);
  border-color: rgba(112,36,30,0.34);
}
:root[data-theme="autumn"] .ghost-btn,
:root[data-theme="autumn"] .theme-btn,
:root[data-theme="autumn"] .view-btn,
:root[data-theme="autumn"] .bottom-nav-link,
:root[data-theme="autumn"] .icon-circle,
:root[data-theme="autumn"] .small-round-btn{
  background: linear-gradient(180deg, rgba(255,243,233,0.22), rgba(255,243,233,0.06));
  border-color: rgba(109,88,80,0.16);
}
:root[data-theme="autumn"] .quick-icon-label{
  color: rgba(255,244,238,0.92);
  text-shadow: 0 1px 3px rgba(61,31,22,0.32);
}

/* =========================================================
   BUSH
   ========================================================= */
:root[data-theme="bush"]{
  --page-bg:
    radial-gradient(circle at 22% 18%, rgba(240,223,176,0.14), transparent 18%),
    radial-gradient(circle at 78% 30%, rgba(145,130,62,0.12), transparent 24%),
    linear-gradient(150deg, #9EA071 0%, #AFB08C 42%, #BFC09B 74%, #D2C39C 100%);
  --surface-main: rgba(253,245,229,0.82);
  --text-primary: #635B1D;
  --text-secondary: #7E6A43;
  --line-soft: rgba(207,177,129,0.34);
  --accent-main: #828537;
  --accent-text: #FDF5E5;
  --link-colour: #806132;
  --heading-colour: #635B1D;
  --text-on-light: #4A4418;
  --text-on-dark: #FFFBEF;
  --shadow: 0 10px 26px rgba(79,73,28,0.12);
}
:root[data-theme="bush"] body{
  background:
    radial-gradient(circle at 16% 74%, rgba(116,108,44,0.12) 0 1.2px, transparent 2px),
    radial-gradient(circle at 72% 26%, rgba(184,154,91,0.10) 0 1.2px, transparent 2px),
    repeating-linear-gradient(0deg, rgba(106,97,45,0.028) 0 1px, transparent 1px 16px),
    var(--page-bg);
}
:root[data-theme="bush"] .topbar,
:root[data-theme="bush"] .bottom-nav{
  background: linear-gradient(180deg, rgba(240,233,205,0.80), rgba(228,220,188,0.70));
  border-color: rgba(134,116,61,0.16);
}
:root[data-theme="bush"] .card,
:root[data-theme="bush"] .plan-card,
:root[data-theme="bush"] .modal-card,
:root[data-theme="bush"] .account-panel,
:root[data-theme="bush"] .notifications-popover,
:root[data-theme="bush"] .search-panel,
:root[data-theme="bush"] .profile-card,
:root[data-theme="bush"] .empty-panel,
:root[data-theme="bush"] .calendar-list-item,
:root[data-theme="bush"] .week-day-block,
:root[data-theme="bush"] .search-result-item{
  background:
    linear-gradient(180deg, rgba(255,251,238,0.22), rgba(255,251,238,0.08)),
    rgba(248,240,220,0.76);
  border: 1px solid rgba(180,152,93,0.18);
  box-shadow: 0 10px 24px rgba(79,73,28,0.08), inset 0 1px 0 rgba(255,251,238,0.24);
}
:root[data-theme="bush"] .action-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0)), var(--accent-main);
  border-color: rgba(96,100,34,0.48);
}
:root[data-theme="bush"] .ghost-btn,
:root[data-theme="bush"] .theme-btn,
:root[data-theme="bush"] .view-btn,
:root[data-theme="bush"] .bottom-nav-link,
:root[data-theme="bush"] .icon-circle,
:root[data-theme="bush"] .small-round-btn{
  background: linear-gradient(180deg, rgba(255,250,236,0.24), rgba(255,250,236,0.10));
  border-color: rgba(180,152,93,0.16);
}

/* =========================================================
   BUSHFIRE SUNSET
   ========================================================= */
:root[data-theme="bushfire-sunset"]{
  --page-bg:
    radial-gradient(circle at 72% 18%, rgba(255,175,98,0.22), transparent 16%),
    radial-gradient(circle at 16% 82%, rgba(186,52,30,0.18), transparent 24%),
    linear-gradient(155deg, #3A1716 0%, #5C2320 34%, #89322A 70%, #C45A35 100%);
  --surface-main: rgba(122,49,40,0.84);
  --text-primary: #FFE2C8;
  --text-secondary: #E2B08E;
  --line-soft: rgba(201,108,78,0.34);
  --accent-main: #FF8A3B;
  --accent-text: #FFF8F1;
  --link-colour: #FFC07A;
  --heading-colour: #FFE2C8;
  --text-on-light: #331915;
  --text-on-dark: #FFF4EA;
  --shadow: 0 14px 30px rgba(0,0,0,0.28);
}
:root[data-theme="bushfire-sunset"] body{
  background:
    radial-gradient(circle at 18% 22%, rgba(255,195,116,0.18) 0 1px, transparent 2px),
    radial-gradient(circle at 58% 72%, rgba(255,122,58,0.14) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 44%, rgba(255,205,152,0.10) 0 1px, transparent 2px),
    var(--page-bg);
}
:root[data-theme="bushfire-sunset"] body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background: linear-gradient(180deg, rgba(0,0,0,0.08), transparent 26%);
  opacity:.9;
}
:root[data-theme="bushfire-sunset"] .topbar,
:root[data-theme="bushfire-sunset"] .bottom-nav{
  background: linear-gradient(180deg, rgba(70,27,24,0.84), rgba(86,34,29,0.76));
  border-color: rgba(230,146,102,0.16);
}
:root[data-theme="bushfire-sunset"] .card,
:root[data-theme="bushfire-sunset"] .plan-card,
:root[data-theme="bushfire-sunset"] .modal-card,
:root[data-theme="bushfire-sunset"] .account-panel,
:root[data-theme="bushfire-sunset"] .notifications-popover,
:root[data-theme="bushfire-sunset"] .search-panel,
:root[data-theme="bushfire-sunset"] .profile-card,
:root[data-theme="bushfire-sunset"] .empty-panel,
:root[data-theme="bushfire-sunset"] .calendar-list-item,
:root[data-theme="bushfire-sunset"] .week-day-block,
:root[data-theme="bushfire-sunset"] .search-result-item{
  background:
    linear-gradient(180deg, rgba(255,226,200,0.08), rgba(255,226,200,0.02)),
    linear-gradient(180deg, rgba(135,55,43,0.84), rgba(99,39,33,0.92));
  border: 1px solid rgba(232,144,97,0.17);
  box-shadow: 0 14px 30px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,231,209,0.08);
}
:root[data-theme="bushfire-sunset"] .action-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0)), var(--accent-main);
  border-color: rgba(255,192,129,0.26);
  box-shadow: 0 8px 18px rgba(0,0,0,0.18);
}
:root[data-theme="bushfire-sunset"] .ghost-btn,
:root[data-theme="bushfire-sunset"] .theme-btn,
:root[data-theme="bushfire-sunset"] .view-btn,
:root[data-theme="bushfire-sunset"] .bottom-nav-link,
:root[data-theme="bushfire-sunset"] .icon-circle,
:root[data-theme="bushfire-sunset"] .small-round-btn{
  background: linear-gradient(180deg, rgba(255,231,209,0.08), rgba(255,231,209,0.02));
  border-color: rgba(232,144,97,0.15);
}

/* =========================================================
   CAMPFIRE
   ========================================================= */
:root[data-theme="campfire"]{
  --page-bg:
    radial-gradient(circle at 50% 100%, rgba(217,108,61,0.30), transparent 26%),
    radial-gradient(circle at 50% 85%, rgba(241,161,94,0.16), transparent 18%),
    linear-gradient(180deg, #1B1411 0%, #241A16 28%, #33231C 62%, #4A342A 100%);
  --surface-main: rgba(86,60,47,0.82);
  --text-primary: #F6E4CC;
  --text-secondary: #C9AF95;
  --line-soft: rgba(146,103,80,0.34);
  --accent-main: #D96C3D;
  --accent-text: #FFF8F2;
  --link-colour: #F1A15E;
  --heading-colour: #F6E4CC;
  --text-on-light: #2E211B;
  --text-on-dark: #FFF4EA;
  --shadow: 0 14px 30px rgba(0,0,0,0.34);
}
:root[data-theme="campfire"] body{
  background:
    radial-gradient(circle at 50% 94%, rgba(255,177,103,0.18) 0 2px, transparent 3px),
    radial-gradient(circle at 42% 88%, rgba(255,122,64,0.10) 0 1.2px, transparent 2px),
    radial-gradient(circle at 58% 86%, rgba(255,208,155,0.12) 0 1.1px, transparent 2px),
    linear-gradient(180deg, rgba(0,0,0,0.10), transparent 26%),
    var(--page-bg);
}
:root[data-theme="campfire"] .topbar,
:root[data-theme="campfire"] .bottom-nav{
  background: linear-gradient(180deg, rgba(33,23,19,0.90), rgba(47,33,27,0.80));
  border-color: rgba(190,132,92,0.16);
}
:root[data-theme="campfire"] .card,
:root[data-theme="campfire"] .plan-card,
:root[data-theme="campfire"] .modal-card,
:root[data-theme="campfire"] .account-panel,
:root[data-theme="campfire"] .notifications-popover,
:root[data-theme="campfire"] .search-panel,
:root[data-theme="campfire"] .profile-card,
:root[data-theme="campfire"] .empty-panel,
:root[data-theme="campfire"] .calendar-list-item,
:root[data-theme="campfire"] .week-day-block,
:root[data-theme="campfire"] .search-result-item{
  background:
    linear-gradient(180deg, rgba(255,229,204,0.08), rgba(255,229,204,0.02)),
    linear-gradient(180deg, rgba(86,60,47,0.88), rgba(63,45,36,0.92));
  border: 1px solid rgba(185,129,89,0.15);
  box-shadow: 0 14px 28px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,233,210,0.08);
}
:root[data-theme="campfire"] .action-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0)), var(--accent-main);
  border-color: rgba(241,161,94,0.24);
}
:root[data-theme="campfire"] .ghost-btn,
:root[data-theme="campfire"] .theme-btn,
:root[data-theme="campfire"] .view-btn,
:root[data-theme="campfire"] .bottom-nav-link,
:root[data-theme="campfire"] .icon-circle,
:root[data-theme="campfire"] .small-round-btn{
  background: linear-gradient(180deg, rgba(255,229,204,0.08), rgba(255,229,204,0.02));
  border-color: rgba(185,129,89,0.14);
}

/* =========================================================
   CITY NIGHT
   ========================================================= */
:root[data-theme="city-night"]{
  --page-bg:
    radial-gradient(circle at 10% 16%, rgba(197,163,105,0.28), transparent 8%),
    radial-gradient(circle at 18% 32%, rgba(197,163,105,0.18), transparent 7%),
    radial-gradient(circle at 26% 22%, rgba(197,163,105,0.24), transparent 8%),
    radial-gradient(circle at 34% 38%, rgba(197,163,105,0.16), transparent 7%),
    radial-gradient(circle at 44% 18%, rgba(197,163,105,0.26), transparent 9%),
    radial-gradient(circle at 52% 30%, rgba(197,163,105,0.18), transparent 7%),
    radial-gradient(circle at 60% 20%, rgba(197,163,105,0.24), transparent 8%),
    radial-gradient(circle at 68% 36%, rgba(197,163,105,0.16), transparent 7%),
    radial-gradient(circle at 78% 18%, rgba(197,163,105,0.28), transparent 9%),
    radial-gradient(circle at 86% 30%, rgba(197,163,105,0.18), transparent 7%),
    radial-gradient(circle at 94% 20%, rgba(197,163,105,0.24), transparent 8%),
    radial-gradient(circle at 50% 0%, rgba(197,163,105,0.08), transparent 40%),
    linear-gradient(180deg, #020304 0%, #07090A 28%, #0B0D0E 60%, #14181A 100%);
  --surface-main: rgba(24,28,30,0.76);
  --text-primary: #ECF2E8;
  --text-secondary: #A4AAA1;
  --line-soft: rgba(58,62,64,0.42);
  --accent-main: #C5A369;
  --accent-text: #0B0D0E;
  --link-colour: #E0BE85;
  --heading-colour: #ECF2E8;
  --text-on-light: #1A1C1D;
  --text-on-dark: #ECF2E8;
  --shadow: 0 16px 36px rgba(0,0,0,0.45);
}
:root[data-theme="city-night"] body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), transparent 18%),
    radial-gradient(circle at 50% 8%, rgba(197,163,105,0.08), transparent 22%);
}
:root[data-theme="city-night"] .topbar,
:root[data-theme="city-night"] .bottom-nav{
  background: linear-gradient(180deg, rgba(6,8,9,0.92), rgba(13,16,18,0.84));
  border-color: rgba(197,163,105,0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
:root[data-theme="city-night"] .card,
:root[data-theme="city-night"] .plan-card,
:root[data-theme="city-night"] .modal-card,
:root[data-theme="city-night"] .account-panel,
:root[data-theme="city-night"] .notifications-popover,
:root[data-theme="city-night"] .search-panel,
:root[data-theme="city-night"] .profile-card,
:root[data-theme="city-night"] .empty-panel,
:root[data-theme="city-night"] .calendar-list-item,
:root[data-theme="city-night"] .week-day-block,
:root[data-theme="city-night"] .search-result-item{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)),
    linear-gradient(180deg, rgba(21,24,26,0.92), rgba(14,16,18,0.96));
  border: 1px solid rgba(197,163,105,0.13);
  box-shadow: 0 16px 34px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.05);
}
:root[data-theme="city-night"] .action-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0)), var(--accent-main);
  border-color: rgba(224,190,133,0.26);
  box-shadow: 0 8px 18px rgba(0,0,0,0.28);
}
:root[data-theme="city-night"] .ghost-btn,
:root[data-theme="city-night"] .theme-btn,
:root[data-theme="city-night"] .view-btn,
:root[data-theme="city-night"] .bottom-nav-link,
:root[data-theme="city-night"] .icon-circle,
:root[data-theme="city-night"] .small-round-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border-color: rgba(197,163,105,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

/* =========================================================
   COTTAGE GARDEN
   ========================================================= */
:root[data-theme="cottage-garden"]{
  --page-bg:
    radial-gradient(circle at 18% 16%, rgba(157,108,120,0.14), transparent 18%),
    radial-gradient(circle at 82% 20%, rgba(122,160,120,0.10), transparent 22%),
    linear-gradient(145deg, #D9D2C3 0%, #E2DBCF 42%, #EFE7DE 100%);
  --surface-main: rgba(250,245,239,0.82);
  --text-primary: #4A3C33;
  --text-secondary: #857468;
  --line-soft: rgba(198,183,168,0.34);
  --accent-main: #9D6C78;
  --accent-text: #FFFFFF;
  --link-colour: #7B6154;
  --heading-colour: #4A3C33;
  --text-on-light: #40332B;
  --text-on-dark: #FFF8F8;
  --shadow: 0 12px 28px rgba(110,91,78,0.10);
}

:root[data-theme="cottage-garden"] body{
  background:
    radial-gradient(120px 68px at 10% 16%, rgba(170,148,129,0.18) 0 58%, rgba(170,148,129,0.08) 59% 66%, transparent 67%),
    radial-gradient(136px 74px at 34% 12%, rgba(176,154,136,0.18) 0 58%, rgba(176,154,136,0.08) 59% 66%, transparent 67%),
    radial-gradient(128px 72px at 60% 18%, rgba(170,148,129,0.17) 0 58%, rgba(170,148,129,0.08) 59% 66%, transparent 67%),
    radial-gradient(132px 76px at 86% 14%, rgba(180,160,142,0.18) 0 58%, rgba(180,160,142,0.08) 59% 66%, transparent 67%),

    radial-gradient(132px 74px at 20% 40%, rgba(173,151,133,0.17) 0 58%, rgba(173,151,133,0.08) 59% 66%, transparent 67%),
    radial-gradient(142px 80px at 48% 36%, rgba(183,163,145,0.18) 0 58%, rgba(183,163,145,0.08) 59% 66%, transparent 67%),
    radial-gradient(128px 72px at 74% 42%, rgba(172,150,132,0.17) 0 58%, rgba(172,150,132,0.08) 59% 66%, transparent 67%),

    radial-gradient(136px 76px at 8% 64%, rgba(178,157,140,0.18) 0 58%, rgba(178,157,140,0.08) 59% 66%, transparent 67%),
    radial-gradient(128px 72px at 34% 60%, rgba(170,148,130,0.16) 0 58%, rgba(170,148,130,0.08) 59% 66%, transparent 67%),
    radial-gradient(142px 80px at 60% 66%, rgba(182,161,143,0.18) 0 58%, rgba(182,161,143,0.08) 59% 66%, transparent 67%),
    radial-gradient(130px 74px at 86% 62%, rgba(171,149,131,0.17) 0 58%, rgba(171,149,131,0.08) 59% 66%, transparent 67%),

    radial-gradient(136px 76px at 18% 88%, rgba(178,157,140,0.17) 0 58%, rgba(178,157,140,0.08) 59% 66%, transparent 67%),
    radial-gradient(130px 74px at 46% 90%, rgba(170,148,130,0.16) 0 58%, rgba(170,148,130,0.08) 59% 66%, transparent 67%),
    radial-gradient(144px 82px at 76% 88%, rgba(183,163,145,0.18) 0 58%, rgba(183,163,145,0.08) 59% 66%, transparent 67%),

    radial-gradient(circle at 14% 20%, rgba(255,255,255,0.08) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 28%, rgba(255,255,255,0.06) 0 1px, transparent 2px),
    radial-gradient(circle at 40% 74%, rgba(157,108,120,0.05) 0 1px, transparent 2px),

    var(--page-bg);
}

:root[data-theme="cottage-garden"] .topbar,
:root[data-theme="cottage-garden"] .bottom-nav{
  background: linear-gradient(180deg, rgba(248,242,236,0.84), rgba(237,228,220,0.72));
  border-color: rgba(167,145,131,0.16);
}

:root[data-theme="cottage-garden"] .card,
:root[data-theme="cottage-garden"] .plan-card,
:root[data-theme="cottage-garden"] .modal-card,
:root[data-theme="cottage-garden"] .account-panel,
:root[data-theme="cottage-garden"] .notifications-popover,
:root[data-theme="cottage-garden"] .search-panel,
:root[data-theme="cottage-garden"] .profile-card,
:root[data-theme="cottage-garden"] .empty-panel,
:root[data-theme="cottage-garden"] .calendar-list-item,
:root[data-theme="cottage-garden"] .week-day-block,
:root[data-theme="cottage-garden"] .search-result-item{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.36), rgba(255,255,255,0.12)),
    linear-gradient(135deg, rgba(157,108,120,0.04), rgba(122,160,120,0.03) 60%, rgba(255,255,255,0) 100%),
    rgba(250,245,239,0.80);
  border: 1px solid rgba(198,183,168,0.18);
  box-shadow:
    0 10px 24px rgba(110,91,78,0.07),
    inset 0 1px 0 rgba(255,255,255,0.34);
}

:root[data-theme="cottage-garden"] .action-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0)), var(--accent-main);
  border-color: rgba(126,92,103,0.42);
}

:root[data-theme="cottage-garden"] .ghost-btn,
:root[data-theme="cottage-garden"] .theme-btn,
:root[data-theme="cottage-garden"] .view-btn,
:root[data-theme="cottage-garden"] .bottom-nav-link,
:root[data-theme="cottage-garden"] .icon-circle,
:root[data-theme="cottage-garden"] .small-round-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0.12));
  border-color: rgba(198,183,168,0.16);
}

/* =========================================================
   DESERT DUSK
   ========================================================= */
:root[data-theme="desert-dusk"]{
  --page-bg:
    radial-gradient(circle at 78% 18%, rgba(236,197,139,0.12), transparent 18%),
    linear-gradient(155deg, #7B5C43 0%, #9A7758 40%, #B48C66 74%, #D1A678 100%);
  --surface-main: rgba(203,166,116,0.80);
  --text-primary: #3C2E22;
  --text-secondary: #745F41;
  --line-soft: rgba(158,123,75,0.34);
  --accent-main: #4C3B23;
  --accent-text: #E8BD92;
  --link-colour: #745F41;
  --heading-colour: #3C2E22;
  --text-on-light: #3C2E22;
  --text-on-dark: #FFF3E5;
  --shadow: 0 12px 26px rgba(71,51,32,0.14);
}
:root[data-theme="desert-dusk"] body{
  background:
    repeating-linear-gradient(0deg, rgba(122,93,56,0.030) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(90deg, rgba(236,197,139,0.024) 0 1px, transparent 1px 24px),
    var(--page-bg);
}
:root[data-theme="desert-dusk"] .topbar,
:root[data-theme="desert-dusk"] .bottom-nav{
  background: linear-gradient(180deg, rgba(219,183,134,0.78), rgba(203,166,116,0.68));
  border-color: rgba(121,92,52,0.16);
}
:root[data-theme="desert-dusk"] .card,
:root[data-theme="desert-dusk"] .plan-card,
:root[data-theme="desert-dusk"] .modal-card,
:root[data-theme="desert-dusk"] .account-panel,
:root[data-theme="desert-dusk"] .notifications-popover,
:root[data-theme="desert-dusk"] .search-panel,
:root[data-theme="desert-dusk"] .profile-card,
:root[data-theme="desert-dusk"] .empty-panel,
:root[data-theme="desert-dusk"] .calendar-list-item,
:root[data-theme="desert-dusk"] .week-day-block,
:root[data-theme="desert-dusk"] .search-result-item{
  background:
    linear-gradient(180deg, rgba(255,243,223,0.16), rgba(255,243,223,0.06)),
    rgba(217,182,131,0.74);
  border: 1px solid rgba(128,97,58,0.17);
  box-shadow: 0 10px 24px rgba(71,51,32,0.08), inset 0 1px 0 rgba(255,243,223,0.18);
}
:root[data-theme="desert-dusk"] .action-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0)), var(--accent-main);
  border-color: rgba(69,54,28,0.54);
}
:root[data-theme="desert-dusk"] .ghost-btn,
:root[data-theme="desert-dusk"] .theme-btn,
:root[data-theme="desert-dusk"] .view-btn,
:root[data-theme="desert-dusk"] .bottom-nav-link,
:root[data-theme="desert-dusk"] .icon-circle,
:root[data-theme="desert-dusk"] .small-round-btn{
  background: linear-gradient(180deg, rgba(255,243,223,0.20), rgba(255,243,223,0.08));
  border-color: rgba(128,97,58,0.15);
}
:root[data-theme="desert-dusk"] .quick-icon-label{
  color: rgba(255,244,227,0.92);
  text-shadow: 0 1px 3px rgba(71,51,32,0.28);
}

/* =========================================================
   FIRST FROST
   ========================================================= */
:root[data-theme="first-frost"]{
  --page-bg:
    radial-gradient(circle at 16% 14%, rgba(255,255,255,0.60), transparent 24%),
    radial-gradient(circle at 84% 22%, rgba(214,228,236,0.28), transparent 24%),
    radial-gradient(circle at 50% 100%, rgba(198,214,223,0.14), transparent 30%),
    linear-gradient(155deg, #F3F7F8 0%, #F8FBFC 42%, #EAF1F4 100%);
  --surface-main: rgba(255,255,255,0.90);
  --text-primary: #5C6770;
  --text-secondary: #95A0A8;
  --line-soft: rgba(188,199,207,0.34);
  --accent-main: #C6D7E1;
  --accent-text: #34424B;
  --link-colour: #7F919C;
  --heading-colour: #5C6770;
  --text-on-light: #546069;
  --text-on-dark: #FCFEFF;
  --shadow: 0 10px 26px rgba(130,147,157,0.10);
}
:root[data-theme="first-frost"] body{
  background:
    radial-gradient(circle at 4% 12%, rgba(255,255,255,0.68) 0 1px, transparent 2px),
    radial-gradient(circle at 10% 28%, rgba(255,255,255,0.58) 0 1px, transparent 2px),
    radial-gradient(circle at 18% 18%, rgba(255,255,255,0.54) 0 1px, transparent 2px),
    radial-gradient(circle at 26% 34%, rgba(218,231,239,0.34) 0 1px, transparent 2px),
    radial-gradient(circle at 34% 12%, rgba(255,255,255,0.52) 0 1px, transparent 2px),
    radial-gradient(circle at 42% 26%, rgba(255,255,255,0.44) 0 1px, transparent 2px),
    radial-gradient(circle at 50% 16%, rgba(218,231,239,0.30) 0 1px, transparent 2px),
    radial-gradient(circle at 58% 30%, rgba(255,255,255,0.50) 0 1px, transparent 2px),
    radial-gradient(circle at 66% 14%, rgba(255,255,255,0.42) 0 1px, transparent 2px),
    radial-gradient(circle at 74% 28%, rgba(218,231,239,0.28) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 18%, rgba(255,255,255,0.52) 0 1px, transparent 2px),
    radial-gradient(circle at 90% 32%, rgba(255,255,255,0.42) 0 1px, transparent 2px),
    radial-gradient(circle at 12% 62%, rgba(255,255,255,0.46) 0 1px, transparent 2px),
    radial-gradient(circle at 24% 72%, rgba(218,231,239,0.28) 0 1px, transparent 2px),
    radial-gradient(circle at 38% 58%, rgba(255,255,255,0.42) 0 1px, transparent 2px),
    radial-gradient(circle at 52% 78%, rgba(255,255,255,0.36) 0 1px, transparent 2px),
    radial-gradient(circle at 68% 68%, rgba(218,231,239,0.26) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 74%, rgba(255,255,255,0.46) 0 1px, transparent 2px),
    var(--page-bg);
}
:root[data-theme="first-frost"] .topbar,
:root[data-theme="first-frost"] .bottom-nav{
  background: linear-gradient(180deg, rgba(250,253,254,0.84), rgba(240,247,250,0.72));
  border-color: rgba(187,200,208,0.16);
}
:root[data-theme="first-frost"] .card,
:root[data-theme="first-frost"] .plan-card,
:root[data-theme="first-frost"] .modal-card,
:root[data-theme="first-frost"] .account-panel,
:root[data-theme="first-frost"] .notifications-popover,
:root[data-theme="first-frost"] .search-panel,
:root[data-theme="first-frost"] .profile-card,
:root[data-theme="first-frost"] .empty-panel,
:root[data-theme="first-frost"] .calendar-list-item,
:root[data-theme="first-frost"] .week-day-block,
:root[data-theme="first-frost"] .search-result-item{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.66), rgba(255,255,255,0.24)),
    rgba(255,255,255,0.78);
  border: 1px solid rgba(188,199,207,0.18);
  box-shadow: 0 10px 24px rgba(130,147,157,0.07), inset 0 1px 0 rgba(255,255,255,0.78);
}
:root[data-theme="first-frost"] .action-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0)), var(--accent-main);
  border-color: rgba(111,129,141,0.32);
}
:root[data-theme="first-frost"] .ghost-btn,
:root[data-theme="first-frost"] .theme-btn,
:root[data-theme="first-frost"] .view-btn,
:root[data-theme="first-frost"] .bottom-nav-link,
:root[data-theme="first-frost"] .icon-circle,
:root[data-theme="first-frost"] .small-round-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.60), rgba(255,255,255,0.22));
  border-color: rgba(188,199,207,0.17);
}

/* =========================================================
   FLOWER FIELDS
   ========================================================= */
:root[data-theme="flower-fields"]{
  --page-bg:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,0.20), transparent 18%),
    radial-gradient(circle at 78% 24%, rgba(202,155,175,0.12), transparent 22%),
    linear-gradient(180deg, #F3EEE8 0%, #E9E6DC 38%, #E2D8E4 72%, #D8CFDA 100%);
  --surface-main: #D8CFDA;
  --text-primary: #4A3B60;
  --text-secondary: #7B6572;
  --line-soft: #DBADB2;
  --accent-main: #CA9BAF;
  --accent-text: #FFFFFF;
  --link-colour: #665E60;
  --heading-colour: #4A3B60;
  --text-on-light: #4A3B60;
  --text-on-dark: #FFF8FC;
  --shadow: 0 10px 26px rgba(97,77,117,0.12);
}
:root[data-theme="flower-fields"] body{
  background:
    radial-gradient(circle at 14% 72%, rgba(202,155,175,0.16) 0 5px, transparent 7px),
    radial-gradient(circle at 18% 76%, rgba(255,255,255,0.84) 0 2px, transparent 4px),
    radial-gradient(circle at 22% 76%, rgba(255,255,255,0.84) 0 2px, transparent 4px),
    radial-gradient(circle at 20% 70%, rgba(255,255,255,0.84) 0 2px, transparent 4px),
    radial-gradient(circle at 76% 66%, rgba(219,173,178,0.16) 0 5px, transparent 7px),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,0.84) 0 2px, transparent 4px),
    radial-gradient(circle at 84% 70%, rgba(255,255,255,0.84) 0 2px, transparent 4px),
    radial-gradient(circle at 82% 64%, rgba(255,255,255,0.84) 0 2px, transparent 4px),
    radial-gradient(circle at 42% 82%, rgba(202,155,175,0.12) 0 4px, transparent 6px),
    radial-gradient(circle at 46% 86%, rgba(255,255,255,0.78) 0 2px, transparent 4px),
    radial-gradient(circle at 50% 86%, rgba(255,255,255,0.78) 0 2px, transparent 4px),
    radial-gradient(circle at 48% 80%, rgba(255,255,255,0.78) 0 2px, transparent 4px),
    linear-gradient(180deg, transparent 0%, transparent 72%, rgba(173,198,146,0.08) 100%),
    var(--page-bg);
}
:root[data-theme="flower-fields"] .topbar,
:root[data-theme="flower-fields"] .bottom-nav{
  background: linear-gradient(180deg, rgba(245,239,243,0.88), rgba(227,217,231,0.76));
  border-color: rgba(202,155,175,0.14);
}
:root[data-theme="flower-fields"] .card,
:root[data-theme="flower-fields"] .plan-card,
:root[data-theme="flower-fields"] .modal-card,
:root[data-theme="flower-fields"] .account-panel,
:root[data-theme="flower-fields"] .notifications-popover,
:root[data-theme="flower-fields"] .search-panel,
:root[data-theme="flower-fields"] .profile-card,
:root[data-theme="flower-fields"] .empty-panel,
:root[data-theme="flower-fields"] .calendar-list-item,
:root[data-theme="flower-fields"] .week-day-block,
:root[data-theme="flower-fields"] .search-result-item{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.38), rgba(255,255,255,0.14)),
    rgba(229,221,233,0.76);
  border: 1px solid rgba(219,173,178,0.18);
  box-shadow: 0 10px 24px rgba(97,77,117,0.07), inset 0 1px 0 rgba(255,255,255,0.40);
}
:root[data-theme="flower-fields"] .action-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0)), var(--accent-main);
  border-color: rgba(151,112,127,0.34);
}
:root[data-theme="flower-fields"] .ghost-btn,
:root[data-theme="flower-fields"] .theme-btn,
:root[data-theme="flower-fields"] .view-btn,
:root[data-theme="flower-fields"] .bottom-nav-link,
:root[data-theme="flower-fields"] .icon-circle,
:root[data-theme="flower-fields"] .small-round-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.40), rgba(255,255,255,0.14));
  border-color: rgba(219,173,178,0.16);
}

/* =========================================================
   FOREST
   ========================================================= */
:root[data-theme="forest"]{
  --page-bg:
    radial-gradient(circle at 22% 18%, rgba(122,135,125,0.12), transparent 18%),
    linear-gradient(160deg, #3C403E 0%, #494C4A 38%, #575B59 72%, #686C69 100%);
  --surface-main: rgba(119,120,113,0.78);
  --text-primary: #F0EFF4;
  --text-secondary: #D0CCD3;
  --line-soft: rgba(41,45,53,0.34);
  --accent-main: #4E6573;
  --accent-text: #F0EFF4;
  --link-colour: #89A1AE;
  --heading-colour: #F0EFF4;
  --text-on-light: #1A292C;
  --text-on-dark: #F0EFF4;
  --shadow: 0 12px 28px rgba(0,0,0,0.22);
}
:root[data-theme="forest"] body{
  background:
    linear-gradient(90deg, rgba(22,28,24,0.10) 0 8%, transparent 8% 18%, rgba(22,28,24,0.08) 18% 24%, transparent 24% 40%, rgba(22,28,24,0.08) 40% 48%, transparent 48% 64%, rgba(22,28,24,0.08) 64% 72%, transparent 72%),
    var(--page-bg);
}
:root[data-theme="forest"] .topbar,
:root[data-theme="forest"] .bottom-nav{
  background: linear-gradient(180deg, rgba(54,58,56,0.86), rgba(67,72,69,0.78));
  border-color: rgba(147,161,170,0.12);
}
:root[data-theme="forest"] .card,
:root[data-theme="forest"] .plan-card,
:root[data-theme="forest"] .modal-card,
:root[data-theme="forest"] .account-panel,
:root[data-theme="forest"] .notifications-popover,
:root[data-theme="forest"] .search-panel,
:root[data-theme="forest"] .profile-card,
:root[data-theme="forest"] .empty-panel,
:root[data-theme="forest"] .calendar-list-item,
:root[data-theme="forest"] .week-day-block,
:root[data-theme="forest"] .search-result-item{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
    linear-gradient(180deg, rgba(104,107,100,0.88), rgba(84,87,81,0.90));
  border: 1px solid rgba(157,171,180,0.12);
  box-shadow: 0 14px 28px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.07);
}
:root[data-theme="forest"] .action-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0)), var(--accent-main);
  border-color: rgba(137,161,174,0.24);
}
:root[data-theme="forest"] .ghost-btn,
:root[data-theme="forest"] .theme-btn,
:root[data-theme="forest"] .view-btn,
:root[data-theme="forest"] .bottom-nav-link,
:root[data-theme="forest"] .icon-circle,
:root[data-theme="forest"] .small-round-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border-color: rgba(157,171,180,0.11);
}

/* =========================================================
   GALAXY
   ========================================================= */
:root[data-theme="galaxy"]{
  --page-bg:
    radial-gradient(circle at 20% 20%, rgba(123,34,146,0.22), transparent 20%),
    radial-gradient(circle at 80% 30%, rgba(88,72,175,0.18), transparent 24%),
    radial-gradient(circle at 50% 80%, rgba(196,185,224,0.08), transparent 22%),
    linear-gradient(160deg, #09040F 0%, #140518 28%, #1E1038 62%, #0D092B 100%);
  --surface-main: rgba(19,16,46,0.82);
  --text-primary: #D4CBEC;
  --text-secondary: #9B93C8;
  --line-soft: rgba(113,84,173,0.34);
  --accent-main: #8A47C2;
  --accent-text: #F7F2FF;
  --link-colour: #CDBDFF;
  --heading-colour: #E6DEFF;
  --text-on-light: #F1EBFF;
  --text-on-dark: #F3EEFF;
  --shadow: 0 14px 30px rgba(0,0,0,0.38);
}
:root[data-theme="galaxy"] body{
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,0.50) 0 1px, transparent 2px),
    radial-gradient(circle at 32% 44%, rgba(255,255,255,0.22) 0 1px, transparent 2px),
    radial-gradient(circle at 62% 22%, rgba(255,255,255,0.30) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 68%, rgba(255,255,255,0.18) 0 1px, transparent 2px),
    var(--page-bg);
}
:root[data-theme="galaxy"] body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(circle at 22% 26%, rgba(162,97,255,0.10), transparent 18%),
    radial-gradient(circle at 78% 34%, rgba(100,126,255,0.10), transparent 18%);
}
:root[data-theme="galaxy"] .topbar,
:root[data-theme="galaxy"] .bottom-nav{
  background: linear-gradient(180deg, rgba(15,8,33,0.90), rgba(20,11,43,0.80));
  border-color: rgba(141,93,210,0.16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
:root[data-theme="galaxy"] .card,
:root[data-theme="galaxy"] .plan-card,
:root[data-theme="galaxy"] .modal-card,
:root[data-theme="galaxy"] .account-panel,
:root[data-theme="galaxy"] .notifications-popover,
:root[data-theme="galaxy"] .search-panel,
:root[data-theme="galaxy"] .profile-card,
:root[data-theme="galaxy"] .empty-panel,
:root[data-theme="galaxy"] .calendar-list-item,
:root[data-theme="galaxy"] .week-day-block,
:root[data-theme="galaxy"] .search-result-item{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)),
    linear-gradient(180deg, rgba(34,22,74,0.84), rgba(18,14,53,0.94));
  border: 1px solid rgba(113,84,173,0.16);
  box-shadow: 0 16px 34px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.05);
}
:root[data-theme="galaxy"] .action-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0)), var(--accent-main);
  border-color: rgba(205,189,255,0.18);
}
:root[data-theme="galaxy"] .ghost-btn,
:root[data-theme="galaxy"] .theme-btn,
:root[data-theme="galaxy"] .view-btn,
:root[data-theme="galaxy"] .bottom-nav-link,
:root[data-theme="galaxy"] .icon-circle,
:root[data-theme="galaxy"] .small-round-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border-color: rgba(113,84,173,0.14);
}

/* =========================================================
   GOLDEN HOUR
   ========================================================= */
:root[data-theme="golden-hour"]{
  --page-bg:
    radial-gradient(circle at 82% 14%, rgba(255,232,168,0.32), transparent 16%),
    radial-gradient(circle at 24% 84%, rgba(223,132,72,0.12), transparent 20%),
    linear-gradient(180deg, #F2C17B 0%, #E6AD74 30%, #D18A57 64%, #B86F45 100%);
  --surface-main: rgba(248,226,195,0.84);
  --text-primary: #5B331D;
  --text-secondary: #956544;
  --line-soft: rgba(205,150,98,0.34);
  --accent-main: #E07A37;
  --accent-text: #FFF8EF;
  --link-colour: #A35626;
  --heading-colour: #5B331D;
  --text-on-light: #4B2E1D;
  --text-on-dark: #FFF8EF;
  --shadow: 0 10px 26px rgba(131,80,46,0.16);
}
:root[data-theme="golden-hour"] body{
  background:
    radial-gradient(circle at 80% 14%, rgba(255,246,216,0.56) 0 3px, rgba(255,246,216,0.18) 3px 10px, transparent 12px),
    radial-gradient(circle at 74% 20%, rgba(255,215,140,0.18) 0 2px, transparent 4px),
    radial-gradient(circle at 64% 24%, rgba(255,246,216,0.14) 0 1.5px, transparent 3px),
    radial-gradient(circle at 18% 28%, rgba(255,255,255,0.10) 0 1px, transparent 2px),
    radial-gradient(circle at 36% 40%, rgba(255,255,255,0.08) 0 1px, transparent 2px),
    radial-gradient(circle at 58% 58%, rgba(255,255,255,0.08) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 52%, rgba(255,255,255,0.08) 0 1px, transparent 2px),
    linear-gradient(110deg, transparent 0 70%, rgba(255,237,192,0.12) 71%, transparent 74% 100%),
    var(--page-bg);
}
:root[data-theme="golden-hour"] .topbar,
:root[data-theme="golden-hour"] .bottom-nav{
  background: linear-gradient(180deg, rgba(251,232,200,0.86), rgba(237,203,155,0.74));
  border-color: rgba(205,150,98,0.16);
}
:root[data-theme="golden-hour"] .card,
:root[data-theme="golden-hour"] .plan-card,
:root[data-theme="golden-hour"] .modal-card,
:root[data-theme="golden-hour"] .account-panel,
:root[data-theme="golden-hour"] .notifications-popover,
:root[data-theme="golden-hour"] .search-panel,
:root[data-theme="golden-hour"] .profile-card,
:root[data-theme="golden-hour"] .empty-panel,
:root[data-theme="golden-hour"] .calendar-list-item,
:root[data-theme="golden-hour"] .week-day-block,
:root[data-theme="golden-hour"] .search-result-item{
  background:
    linear-gradient(180deg, rgba(255,250,235,0.36), rgba(255,250,235,0.12)),
    rgba(248,226,195,0.76);
  border: 1px solid rgba(205,150,98,0.18);
  box-shadow: 0 12px 26px rgba(131,80,46,0.08), inset 0 1px 0 rgba(255,248,230,0.34);
}
:root[data-theme="golden-hour"] .action-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0)), var(--accent-main);
  border-color: rgba(163,86,38,0.34);
}
:root[data-theme="golden-hour"] .ghost-btn,
:root[data-theme="golden-hour"] .theme-btn,
:root[data-theme="golden-hour"] .view-btn,
:root[data-theme="golden-hour"] .bottom-nav-link,
:root[data-theme="golden-hour"] .icon-circle,
:root[data-theme="golden-hour"] .small-round-btn{
  background: linear-gradient(180deg, rgba(255,247,224,0.34), rgba(255,247,224,0.12));
  border-color: rgba(205,150,98,0.16);
}

/* =========================================================
   HONEY
   ========================================================= */
:root[data-theme="honey"]{
  --page-bg:
    radial-gradient(circle at 22% 16%, rgba(255,225,133,0.16), transparent 18%),
    linear-gradient(145deg, #C89B39 0%, #D9B45C 42%, #E4C46F 74%, #F1D98C 100%);
  --surface-main: rgba(241,224,174,0.82);
  --text-primary: #47341A;
  --text-secondary: #8B7140;
  --line-soft: rgba(205,170,100,0.34);
  --accent-main: #B97D21;
  --accent-text: #FFF8EE;
  --link-colour: #8A5E1D;
  --heading-colour: #47341A;
  --text-on-light: #3D2E18;
  --text-on-dark: #FFF8EE;
  --shadow: 0 10px 26px rgba(112,79,27,0.14);
}
:root[data-theme="honey"] body{
  background:
    radial-gradient(circle at 14% 24%, rgba(255,241,188,0.16) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 30%, rgba(177,120,33,0.10) 0 1px, transparent 2px),
    repeating-linear-gradient(30deg, rgba(138,94,29,0.11) 0 2px, transparent 2px 26px),
    repeating-linear-gradient(150deg, rgba(138,94,29,0.11) 0 2px, transparent 2px 26px),
    repeating-linear-gradient(90deg, rgba(138,94,29,0.08) 0 2px, transparent 2px 26px),
    var(--page-bg);
}
:root[data-theme="honey"] .topbar,
:root[data-theme="honey"] .bottom-nav{
  background: linear-gradient(180deg, rgba(249,233,186,0.84), rgba(235,211,143,0.72));
  border-color: rgba(165,117,38,0.16);
}
:root[data-theme="honey"] .card,
:root[data-theme="honey"] .plan-card,
:root[data-theme="honey"] .modal-card,
:root[data-theme="honey"] .account-panel,
:root[data-theme="honey"] .notifications-popover,
:root[data-theme="honey"] .search-panel,
:root[data-theme="honey"] .profile-card,
:root[data-theme="honey"] .empty-panel,
:root[data-theme="honey"] .calendar-list-item,
:root[data-theme="honey"] .week-day-block,
:root[data-theme="honey"] .search-result-item{
  background:
    linear-gradient(180deg, rgba(255,249,223,0.22), rgba(255,249,223,0.08)),
    rgba(245,229,181,0.74);
  border: 1px solid rgba(205,170,100,0.18);
  box-shadow: 0 10px 24px rgba(112,79,27,0.08), inset 0 1px 0 rgba(255,249,223,0.24);
}
:root[data-theme="honey"] .action-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0)), var(--accent-main);
  border-color: rgba(138,94,29,0.44);
}
:root[data-theme="honey"] .ghost-btn,
:root[data-theme="honey"] .theme-btn,
:root[data-theme="honey"] .view-btn,
:root[data-theme="honey"] .bottom-nav-link,
:root[data-theme="honey"] .icon-circle,
:root[data-theme="honey"] .small-round-btn{
  background: linear-gradient(180deg, rgba(255,249,223,0.24), rgba(255,249,223,0.08));
  border-color: rgba(205,170,100,0.16);
}

/* =========================================================
   JASMINE
   ========================================================= */
:root[data-theme="jasmine"]{
  --page-bg:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,0.24), transparent 18%),
    radial-gradient(circle at 84% 18%, rgba(149,40,79,0.10), transparent 20%),
    radial-gradient(circle at 52% 84%, rgba(95,122,82,0.08), transparent 24%),
    linear-gradient(180deg, #F3F4F2 0%, #EFE9E2 44%, #E6DED6 100%);
  --surface-main: rgba(248,245,241,0.82);
  --text-primary: #674A2F;
  --text-secondary: #8A7F7F;
  --line-soft: rgba(180,150,145,0.28);
  --accent-main: #95284F;
  --accent-text: #FFF9FA;
  --link-colour: #95284F;
  --heading-colour: #674A2F;
  --text-on-light: #674A2F;
  --text-on-dark: #FFF9FA;
  --shadow: 0 12px 28px rgba(85,58,50,0.10);
}
:root[data-theme="jasmine"] body{
  background:
    radial-gradient(circle at 16% 22%, rgba(255,255,255,0.90) 0 3px, rgba(255,255,255,0.36) 3px 6px, transparent 7px),
    radial-gradient(circle at 74% 20%, rgba(255,255,255,0.90) 0 3px, rgba(255,255,255,0.34) 3px 6px, transparent 7px),
    radial-gradient(circle at 82% 72%, rgba(255,255,255,0.88) 0 3px, rgba(255,255,255,0.32) 3px 6px, transparent 7px),
    radial-gradient(circle at 28% 74%, rgba(255,255,255,0.86) 0 3px, rgba(255,255,255,0.30) 3px 6px, transparent 7px),
    radial-gradient(circle at 18% 24%, rgba(246,222,232,0.80) 0 2px, transparent 4px),
    radial-gradient(circle at 76% 22%, rgba(246,222,232,0.78) 0 2px, transparent 4px),
    radial-gradient(circle at 84% 74%, rgba(246,222,232,0.76) 0 2px, transparent 4px),
    radial-gradient(circle at 30% 76%, rgba(246,222,232,0.76) 0 2px, transparent 4px),
    radial-gradient(24% 100% at 8% 50%, rgba(95,122,82,0.07) 0%, transparent 74%),
    radial-gradient(20% 100% at 24% 50%, rgba(95,122,82,0.05) 0%, transparent 74%),
    radial-gradient(24% 100% at 46% 50%, rgba(95,122,82,0.06) 0%, transparent 74%),
    radial-gradient(20% 100% at 68% 50%, rgba(95,122,82,0.05) 0%, transparent 74%),
    radial-gradient(24% 100% at 88% 50%, rgba(95,122,82,0.06) 0%, transparent 74%),
    var(--page-bg);
}
:root[data-theme="jasmine"] .topbar,
:root[data-theme="jasmine"] .bottom-nav{
  background: linear-gradient(180deg, rgba(250,247,244,0.90), rgba(241,235,229,0.76));
  border-color: rgba(149,40,79,0.10);
}
:root[data-theme="jasmine"] .card,
:root[data-theme="jasmine"] .plan-card,
:root[data-theme="jasmine"] .modal-card,
:root[data-theme="jasmine"] .account-panel,
:root[data-theme="jasmine"] .notifications-popover,
:root[data-theme="jasmine"] .search-panel,
:root[data-theme="jasmine"] .profile-card,
:root[data-theme="jasmine"] .empty-panel,
:root[data-theme="jasmine"] .calendar-list-item,
:root[data-theme="jasmine"] .week-day-block,
:root[data-theme="jasmine"] .search-result-item{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.52), rgba(255,255,255,0.16)),
    linear-gradient(135deg, rgba(149,40,79,0.03), rgba(95,122,82,0.03) 54%, rgba(255,255,255,0) 100%),
    rgba(248,244,239,0.80);
  border: 1px solid rgba(188,156,149,0.18);
  box-shadow: 0 10px 24px rgba(103,74,47,0.07), inset 0 1px 0 rgba(255,255,255,0.42);
}
:root[data-theme="jasmine"] .action-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0)), var(--accent-main);
  border-color: rgba(120,33,63,0.42);
}
:root[data-theme="jasmine"] .ghost-btn,
:root[data-theme="jasmine"] .theme-btn,
:root[data-theme="jasmine"] .view-btn,
:root[data-theme="jasmine"] .bottom-nav-link,
:root[data-theme="jasmine"] .icon-circle,
:root[data-theme="jasmine"] .small-round-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0.14));
  border-color: rgba(188,156,149,0.16);
}

/* =========================================================
   LAVENDER DUSK
   ========================================================= */
:root[data-theme="lavender-dusk"]{
  --page-bg:
    radial-gradient(circle at 20% 18%, rgba(218,207,242,0.14), transparent 20%),
    radial-gradient(circle at 80% 24%, rgba(109,93,148,0.14), transparent 24%),
    linear-gradient(155deg, #6B627C 0%, #7D748B 40%, #8F86A0 74%, #A79DB8 100%);
  --surface-main: rgba(216,209,222,0.82);
  --text-primary: #3E3550;
  --text-secondary: #7D7286;
  --line-soft: rgba(183,172,191,0.34);
  --accent-main: #9B87B3;
  --accent-text: #FFFFFF;
  --link-colour: #6A5A7E;
  --heading-colour: #3E3550;
  --text-on-light: #352D42;
  --text-on-dark: #FAF7FD;
  --shadow: 0 10px 26px rgba(67,58,83,0.14);
}
:root[data-theme="lavender-dusk"] body{
  background:
    radial-gradient(circle at 8% 14%, rgba(255,255,255,0.18) 0 1px, transparent 2px),
    radial-gradient(circle at 18% 22%, rgba(255,255,255,0.18) 0 1px, transparent 2px),
    radial-gradient(circle at 30% 10%, rgba(218,207,242,0.16) 0 1px, transparent 2px),
    radial-gradient(circle at 44% 28%, rgba(255,255,255,0.12) 0 1px, transparent 2px),
    radial-gradient(circle at 58% 14%, rgba(123,108,163,0.12) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 30%, rgba(218,207,242,0.13) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 18%, rgba(255,255,255,0.16) 0 1px, transparent 2px),
    radial-gradient(circle at 90% 42%, rgba(123,108,163,0.10) 0 1px, transparent 2px),
    radial-gradient(circle at 16% 72%, rgba(255,255,255,0.12) 0 1px, transparent 2px),
    radial-gradient(circle at 36% 84%, rgba(218,207,242,0.12) 0 1px, transparent 2px),
    radial-gradient(circle at 62% 76%, rgba(255,255,255,0.10) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 74%, rgba(123,108,163,0.10) 0 1px, transparent 2px),
    var(--page-bg);
}
:root[data-theme="lavender-dusk"] .topbar,
:root[data-theme="lavender-dusk"] .bottom-nav{
  background: linear-gradient(180deg, rgba(223,216,233,0.82), rgba(205,197,219,0.70));
  border-color: rgba(135,122,164,0.16);
}
:root[data-theme="lavender-dusk"] .card,
:root[data-theme="lavender-dusk"] .plan-card,
:root[data-theme="lavender-dusk"] .modal-card,
:root[data-theme="lavender-dusk"] .account-panel,
:root[data-theme="lavender-dusk"] .notifications-popover,
:root[data-theme="lavender-dusk"] .search-panel,
:root[data-theme="lavender-dusk"] .profile-card,
:root[data-theme="lavender-dusk"] .empty-panel,
:root[data-theme="lavender-dusk"] .calendar-list-item,
:root[data-theme="lavender-dusk"] .week-day-block,
:root[data-theme="lavender-dusk"] .search-result-item{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.10)),
    rgba(225,219,232,0.74);
  border: 1px solid rgba(183,172,191,0.18);
  box-shadow: 0 10px 24px rgba(67,58,83,0.07), inset 0 1px 0 rgba(255,255,255,0.30);
}
:root[data-theme="lavender-dusk"] .action-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0)), var(--accent-main);
  border-color: rgba(106,90,126,0.40);
}
:root[data-theme="lavender-dusk"] .ghost-btn,
:root[data-theme="lavender-dusk"] .theme-btn,
:root[data-theme="lavender-dusk"] .view-btn,
:root[data-theme="lavender-dusk"] .bottom-nav-link,
:root[data-theme="lavender-dusk"] .icon-circle,
:root[data-theme="lavender-dusk"] .small-round-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.10));
  border-color: rgba(183,172,191,0.16);
}
:root[data-theme="lavender-dusk"] .quick-icon-label{
  color: rgba(255,248,255,0.92);
  text-shadow: 0 1px 3px rgba(67,58,83,0.26);
}

/* =========================================================
   LOTUS
   ========================================================= */
:root[data-theme="lotus"]{
  --page-bg:
    radial-gradient(circle at 24% 18%, rgba(226,204,208,0.10), transparent 20%),
    radial-gradient(circle at 78% 22%, rgba(103,145,124,0.12), transparent 24%),
    linear-gradient(150deg, #3F5C50 0%, #4D6E5F 38%, #5F8171 72%, #779686 100%);
  --surface-main: rgba(228,216,214,0.82);
  --text-primary: #142115;
  --text-secondary: #8A7661;
  --line-soft: rgba(189,171,154,0.34);
  --accent-main: #CF98A4;
  --accent-text: #FFFFFF;
  --link-colour: #D27D95;
  --heading-colour: #142115;
  --text-on-light: #2E2B28;
  --text-on-dark: #FFF8FA;
  --shadow: 0 10px 26px rgba(44,65,56,0.14);
}
:root[data-theme="lotus"] body{
  background:
    radial-gradient(circle at 16% 74%, rgba(226,204,208,0.10) 0 1px, transparent 2px),
    radial-gradient(circle at 68% 28%, rgba(255,255,255,0.08) 0 1px, transparent 2px),
    repeating-linear-gradient(0deg, rgba(31,56,46,0.024) 0 1px, transparent 1px 20px),
    var(--page-bg);
}
:root[data-theme="lotus"] .topbar,
:root[data-theme="lotus"] .bottom-nav{
  background: linear-gradient(180deg, rgba(223,211,209,0.82), rgba(209,196,193,0.70));
  border-color: rgba(122,117,110,0.16);
}
:root[data-theme="lotus"] .card,
:root[data-theme="lotus"] .plan-card,
:root[data-theme="lotus"] .modal-card,
:root[data-theme="lotus"] .account-panel,
:root[data-theme="lotus"] .notifications-popover,
:root[data-theme="lotus"] .search-panel,
:root[data-theme="lotus"] .profile-card,
:root[data-theme="lotus"] .empty-panel,
:root[data-theme="lotus"] .calendar-list-item,
:root[data-theme="lotus"] .week-day-block,
:root[data-theme="lotus"] .search-result-item{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.08)),
    rgba(236,225,223,0.72);
  border: 1px solid rgba(189,171,154,0.18);
  box-shadow: 0 10px 24px rgba(44,65,56,0.07), inset 0 1px 0 rgba(255,255,255,0.24);
}
:root[data-theme="lotus"] .action-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0)), var(--accent-main);
  border-color: rgba(162,112,126,0.40);
}
:root[data-theme="lotus"] .ghost-btn,
:root[data-theme="lotus"] .theme-btn,
:root[data-theme="lotus"] .view-btn,
:root[data-theme="lotus"] .bottom-nav-link,
:root[data-theme="lotus"] .icon-circle,
:root[data-theme="lotus"] .small-round-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.08));
  border-color: rgba(189,171,154,0.16);
}

/* =========================================================
   MEADOW SPRING
   ========================================================= */
:root[data-theme="meadow-spring"]{
  --page-bg:
    radial-gradient(circle at 18% 16%, rgba(255,247,229,0.22), transparent 18%),
    radial-gradient(circle at 82% 18%, rgba(167,181,128,0.14), transparent 20%),
    linear-gradient(180deg, #EEE7D7 0%, #DDD3BF 36%, #CFC9B5 70%, #C0B69F 100%);
  --surface-main: rgba(230,226,214,0.82);
  --text-primary: #3A2C1F;
  --text-secondary: #8C8474;
  --line-soft: rgba(183,173,154,0.34);
  --accent-main: #A3474B;
  --accent-text: #FFFFFF;
  --link-colour: #704840;
  --heading-colour: #3A2C1F;
  --text-on-light: #2D241B;
  --text-on-dark: #FFF7F5;
  --shadow: 0 10px 26px rgba(88,67,52,0.10);
}
:root[data-theme="meadow-spring"] body{
  background:
    radial-gradient(circle at 10% 82%, rgba(163,71,75,0.08) 0 1.3px, transparent 2.6px),
    radial-gradient(circle at 16% 78%, rgba(255,247,229,0.26) 0 1.5px, transparent 2.8px),
    radial-gradient(circle at 24% 84%, rgba(167,181,128,0.08) 0 1.2px, transparent 2.4px),
    radial-gradient(circle at 34% 80%, rgba(163,71,75,0.06) 0 1px, transparent 2px),
    radial-gradient(circle at 48% 86%, rgba(255,247,229,0.18) 0 1.3px, transparent 2.6px),
    radial-gradient(circle at 62% 82%, rgba(167,181,128,0.08) 0 1.2px, transparent 2.4px),
    radial-gradient(circle at 76% 84%, rgba(163,71,75,0.07) 0 1.1px, transparent 2.2px),
    radial-gradient(circle at 88% 78%, rgba(255,247,229,0.22) 0 1.4px, transparent 2.8px),

    linear-gradient(180deg, transparent 0%, transparent 68%, rgba(167,181,128,0.10) 100%),
    radial-gradient(120% 40% at 50% 10%, rgba(255,255,255,0.14), transparent 70%),

    var(--page-bg);
}
:root[data-theme="meadow-spring"] .topbar,
:root[data-theme="meadow-spring"] .bottom-nav{
  background: linear-gradient(180deg, rgba(241,235,223,0.86), rgba(227,219,202,0.74));
  border-color: rgba(183,173,154,0.16);
}
:root[data-theme="meadow-spring"] .card,
:root[data-theme="meadow-spring"] .plan-card,
:root[data-theme="meadow-spring"] .modal-card,
:root[data-theme="meadow-spring"] .account-panel,
:root[data-theme="meadow-spring"] .notifications-popover,
:root[data-theme="meadow-spring"] .search-panel,
:root[data-theme="meadow-spring"] .profile-card,
:root[data-theme="meadow-spring"] .empty-panel,
:root[data-theme="meadow-spring"] .calendar-list-item,
:root[data-theme="meadow-spring"] .week-day-block,
:root[data-theme="meadow-spring"] .search-result-item{
  background:
    linear-gradient(180deg, rgba(255,250,241,0.30), rgba(255,250,241,0.10)),
    rgba(230,226,214,0.74);
  border: 1px solid rgba(183,173,154,0.18);
  box-shadow: 0 10px 24px rgba(88,67,52,0.06), inset 0 1px 0 rgba(255,250,241,0.30);
}
:root[data-theme="meadow-spring"] .action-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0)), var(--accent-main);
  border-color: rgba(112,72,64,0.34);
}
:root[data-theme="meadow-spring"] .ghost-btn,
:root[data-theme="meadow-spring"] .theme-btn,
:root[data-theme="meadow-spring"] .view-btn,
:root[data-theme="meadow-spring"] .bottom-nav-link,
:root[data-theme="meadow-spring"] .icon-circle,
:root[data-theme="meadow-spring"] .small-round-btn{
  background: linear-gradient(180deg, rgba(255,250,241,0.30), rgba(255,250,241,0.10));
  border-color: rgba(183,173,154,0.16);
}

/* =========================================================
   MISTY MORNING
   ========================================================= */
:root[data-theme="misty-morning"]{
  --page-bg:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,0.34), transparent 22%),
    radial-gradient(circle at 82% 26%, rgba(229,232,228,0.26), transparent 24%),
    linear-gradient(155deg, #C9CEC8 0%, #D7DBD5 42%, #E7EAE6 100%);
  --surface-main: rgba(244,246,242,0.86);
  --text-primary: #535952;
  --text-secondary: #8A918A;
  --line-soft: rgba(187,194,186,0.34);
  --accent-main: #A8B0A7;
  --accent-text: #FFFFFF;
  --link-colour: #727A72;
  --heading-colour: #535952;
  --text-on-light: #4B514A;
  --text-on-dark: #FCFDFC;
  --shadow: 0 10px 26px rgba(110,117,109,0.10);
}
:root[data-theme="misty-morning"] body{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22), transparent 24%),
    radial-gradient(circle at 14% 26%, rgba(255,255,255,0.26) 0 1.2px, transparent 2px),
    radial-gradient(circle at 72% 24%, rgba(255,255,255,0.18) 0 1px, transparent 2px),
    var(--page-bg);
}
:root[data-theme="misty-morning"] body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.16), transparent 18%),
    radial-gradient(circle at 50% 32%, rgba(255,255,255,0.18), transparent 34%);
  opacity:.9;
}
:root[data-theme="misty-morning"] .topbar,
:root[data-theme="misty-morning"] .bottom-nav{
  background: linear-gradient(180deg, rgba(246,248,245,0.86), rgba(233,238,232,0.74));
  border-color: rgba(187,194,186,0.16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
:root[data-theme="misty-morning"] .card,
:root[data-theme="misty-morning"] .plan-card,
:root[data-theme="misty-morning"] .modal-card,
:root[data-theme="misty-morning"] .account-panel,
:root[data-theme="misty-morning"] .notifications-popover,
:root[data-theme="misty-morning"] .search-panel,
:root[data-theme="misty-morning"] .profile-card,
:root[data-theme="misty-morning"] .empty-panel,
:root[data-theme="misty-morning"] .calendar-list-item,
:root[data-theme="misty-morning"] .week-day-block,
:root[data-theme="misty-morning"] .search-result-item{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.50), rgba(255,255,255,0.18)),
    rgba(244,246,242,0.76);
  border: 1px solid rgba(187,194,186,0.18);
  box-shadow: 0 10px 22px rgba(110,117,109,0.06), inset 0 1px 0 rgba(255,255,255,0.56);
}
:root[data-theme="misty-morning"] .action-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0)), var(--accent-main);
  border-color: rgba(114,122,114,0.28);
}
:root[data-theme="misty-morning"] .ghost-btn,
:root[data-theme="misty-morning"] .theme-btn,
:root[data-theme="misty-morning"] .view-btn,
:root[data-theme="misty-morning"] .bottom-nav-link,
:root[data-theme="misty-morning"] .icon-circle,
:root[data-theme="misty-morning"] .small-round-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.50), rgba(255,255,255,0.16));
  border-color: rgba(187,194,186,0.17);
}

/* =========================================================
   MOONLIGHT
   ========================================================= */
:root[data-theme="moonlight"]{
  --page-bg:
    radial-gradient(circle at 78% 18%, rgba(255,255,255,0.22), rgba(255,255,255,0.06) 20%, transparent 30%),
    radial-gradient(circle at 22% 14%, rgba(214,226,236,0.10), transparent 16%),
    radial-gradient(circle at 82% 20%, rgba(122,142,163,0.12), transparent 20%),
    linear-gradient(160deg, #1C242B 0%, #2A313C 36%, #36404D 72%, #425060 100%);

  --surface-main: rgba(233,240,246,0.82);
  --text-primary: #26313A;
  --text-secondary: #667382;
  --line-soft: rgba(158,171,184,0.34);
  --accent-main: #7A8EA3;
  --accent-text: #FFFFFF;
  --link-colour: #516679;
  --heading-colour: #26313A;
  --text-on-light: #26313A;
  --text-on-dark: #F5F8FB;
  --shadow: 0 12px 28px rgba(37,49,59,0.18);
}

:root[data-theme="moonlight"] body{
  background:
    radial-gradient(circle at 78% 18%, rgba(255,255,255,0.95) 0 12px, rgba(255,255,255,0.35) 13px 28px, transparent 40px),
    radial-gradient(circle at 78% 18%, rgba(255,255,255,0.20), transparent 120px),

    radial-gradient(circle at 12% 22%, rgba(255,255,255,0.7) 0 1px, transparent 2px),
    radial-gradient(circle at 24% 38%, rgba(255,255,255,0.6) 0 1px, transparent 2px),
    radial-gradient(circle at 46% 18%, rgba(255,255,255,0.7) 0 1px, transparent 2px),
    radial-gradient(circle at 64% 34%, rgba(255,255,255,0.6) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 48%, rgba(255,255,255,0.6) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 72%, rgba(173,197,216,0.5) 0 1px, transparent 2px),
    radial-gradient(circle at 32% 78%, rgba(255,255,255,0.6) 0 1px, transparent 2px),
    radial-gradient(circle at 18% 64%, rgba(255,255,255,0.5) 0 1px, transparent 2px),
    radial-gradient(circle at 58% 82%, rgba(255,255,255,0.5) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 68%, rgba(255,255,255,0.5) 0 1px, transparent 2px),

    radial-gradient(60% 40% at 20% 40%, rgba(255,255,255,0.05), transparent 70%),
    radial-gradient(60% 40% at 70% 70%, rgba(122,142,163,0.08), transparent 70%),

    var(--page-bg);
}

:root[data-theme="moonlight"] .topbar,
:root[data-theme="moonlight"] .bottom-nav{
  background: linear-gradient(180deg, rgba(29,36,44,0.88), rgba(39,48,59,0.78));
  border-color: rgba(158,171,184,0.14);
}

:root[data-theme="moonlight"] .card,
:root[data-theme="moonlight"] .plan-card,
:root[data-theme="moonlight"] .modal-card,
:root[data-theme="moonlight"] .account-panel,
:root[data-theme="moonlight"] .notifications-popover,
:root[data-theme="moonlight"] .search-panel,
:root[data-theme="moonlight"] .profile-card,
:root[data-theme="moonlight"] .empty-panel,
:root[data-theme="moonlight"] .calendar-list-item,
:root[data-theme="moonlight"] .week-day-block,
:root[data-theme="moonlight"] .search-result-item{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.44), rgba(255,255,255,0.14)),
    rgba(230,238,244,0.74);
  border: 1px solid rgba(158,171,184,0.18);
  box-shadow: 0 12px 26px rgba(37,49,59,0.10), inset 0 1px 0 rgba(255,255,255,0.46);
}

:root[data-theme="moonlight"] .action-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0)), var(--accent-main);
  border-color: rgba(81,102,121,0.36);
}

:root[data-theme="moonlight"] .ghost-btn,
:root[data-theme="moonlight"] .theme-btn,
:root[data-theme="moonlight"] .view-btn,
:root[data-theme="moonlight"] .bottom-nav-link,
:root[data-theme="moonlight"] .icon-circle,
:root[data-theme="moonlight"] .small-round-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.40), rgba(255,255,255,0.14));
  border-color: rgba(158,171,184,0.16);
}

/* =========================================================
   MOUNTAIN PEAK
   ========================================================= */
:root[data-theme="mountain-peak"]{
  --page-bg:
    radial-gradient(circle at 18% 16%, rgba(255,255,255,0.24), transparent 20%),
    linear-gradient(155deg, #ACADB7 0%, #C0C0CA 42%, #D2D0D5 74%, #E3DEDD 100%);
  --surface-main: rgba(226,221,218,0.84);
  --text-primary: #525364;
  --text-secondary: #7F88A0;
  --line-soft: rgba(205,204,209,0.34);
  --accent-main: #525364;
  --accent-text: #FFFFFF;
  --link-colour: #6078AC;
  --heading-colour: #525364;
  --text-on-light: #525364;
  --text-on-dark: #FAFAFC;
  --shadow: 0 10px 26px rgba(83,84,101,0.10);
}
:root[data-theme="mountain-peak"] body{
  background:
    radial-gradient(120% 44% at 20% 100%, rgba(109,116,136,0.16) 0 32%, transparent 33%),
    radial-gradient(120% 42% at 54% 100%, rgba(92,100,121,0.14) 0 30%, transparent 31%),
    radial-gradient(120% 40% at 84% 100%, rgba(123,129,149,0.12) 0 28%, transparent 29%),
    radial-gradient(120% 28% at 50% 78%, rgba(255,255,255,0.16) 0 32%, transparent 33%),
    linear-gradient(180deg, rgba(255,255,255,0.12), transparent 24%),
    var(--page-bg);
}
:root[data-theme="mountain-peak"] .topbar,
:root[data-theme="mountain-peak"] .bottom-nav{
  background: linear-gradient(180deg, rgba(239,236,236,0.86), rgba(223,220,222,0.74));
  border-color: rgba(175,176,187,0.16);
}
:root[data-theme="mountain-peak"] .card,
:root[data-theme="mountain-peak"] .plan-card,
:root[data-theme="mountain-peak"] .modal-card,
:root[data-theme="mountain-peak"] .account-panel,
:root[data-theme="mountain-peak"] .notifications-popover,
:root[data-theme="mountain-peak"] .search-panel,
:root[data-theme="mountain-peak"] .profile-card,
:root[data-theme="mountain-peak"] .empty-panel,
:root[data-theme="mountain-peak"] .calendar-list-item,
:root[data-theme="mountain-peak"] .week-day-block,
:root[data-theme="mountain-peak"] .search-result-item{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.40), rgba(255,255,255,0.14)),
    rgba(232,228,226,0.76);
  border: 1px solid rgba(205,204,209,0.18);
  box-shadow: 0 10px 22px rgba(83,84,101,0.06), inset 0 1px 0 rgba(255,255,255,0.42);
}
:root[data-theme="mountain-peak"] .action-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0)), var(--accent-main);
  border-color: rgba(82,83,100,0.40);
}
:root[data-theme="mountain-peak"] .ghost-btn,
:root[data-theme="mountain-peak"] .theme-btn,
:root[data-theme="mountain-peak"] .view-btn,
:root[data-theme="mountain-peak"] .bottom-nav-link,
:root[data-theme="mountain-peak"] .icon-circle,
:root[data-theme="mountain-peak"] .small-round-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.40), rgba(255,255,255,0.14));
  border-color: rgba(205,204,209,0.16);
}

/* =========================================================
   MUSHROOM
   ========================================================= */
:root[data-theme="mushroom"]{
  --page-bg:
    radial-gradient(circle at 20% 18%, rgba(96,74,60,0.08), transparent 20%),
    radial-gradient(circle at 76% 24%, rgba(158,91,82,0.10), transparent 18%),
    linear-gradient(145deg, #9D8D80 0%, #B8AA9C 42%, #CBBDB0 76%, #DDD1C7 100%);
  --surface-main: rgba(233,224,214,0.82);
  --text-primary: #49392F;
  --text-secondary: #7D6B60;
  --line-soft: rgba(200,183,167,0.34);
  --accent-main: #9E5B52;
  --accent-text: #FFFFFF;
  --link-colour: #6E5347;
  --heading-colour: #49392F;
  --text-on-light: #3F3129;
  --text-on-dark: #FFF8F5;
  --shadow: 0 10px 26px rgba(73,57,47,0.12);
}
:root[data-theme="mushroom"] body{
  background:
    radial-gradient(circle at 14% 24%, rgba(73,57,47,0.08) 0 1.2px, transparent 2.4px),
    radial-gradient(circle at 22% 30%, rgba(158,91,82,0.10) 0 2px, transparent 4px),
    radial-gradient(circle at 30% 34%, rgba(255,242,232,0.16) 0 1px, transparent 2px),

    radial-gradient(circle at 72% 20%, rgba(73,57,47,0.07) 0 1.2px, transparent 2.4px),
    radial-gradient(circle at 78% 26%, rgba(158,91,82,0.09) 0 2px, transparent 4px),
    radial-gradient(circle at 84% 30%, rgba(255,242,232,0.14) 0 1px, transparent 2px),

    radial-gradient(circle at 18% 78%, rgba(73,57,47,0.06) 0 1px, transparent 2px),
    radial-gradient(circle at 64% 72%, rgba(158,91,82,0.07) 0 1.6px, transparent 3px),

    repeating-radial-gradient(circle at 50% 50%, rgba(73,57,47,0.020) 0 1px, transparent 1px 14px),
    var(--page-bg);
}
:root[data-theme="mushroom"] .topbar,
:root[data-theme="mushroom"] .bottom-nav{
  background: linear-gradient(180deg, rgba(235,227,218,0.84), rgba(220,210,200,0.72));
  border-color: rgba(154,134,121,0.16);
}
:root[data-theme="mushroom"] .card,
:root[data-theme="mushroom"] .plan-card,
:root[data-theme="mushroom"] .modal-card,
:root[data-theme="mushroom"] .account-panel,
:root[data-theme="mushroom"] .notifications-popover,
:root[data-theme="mushroom"] .search-panel,
:root[data-theme="mushroom"] .profile-card,
:root[data-theme="mushroom"] .empty-panel,
:root[data-theme="mushroom"] .calendar-list-item,
:root[data-theme="mushroom"] .week-day-block,
:root[data-theme="mushroom"] .search-result-item{
  background:
    linear-gradient(180deg, rgba(255,248,241,0.20), rgba(255,248,241,0.08)),
    repeating-linear-gradient(8deg, rgba(96,74,60,0.018) 0 2px, transparent 2px 9px),
    rgba(239,231,221,0.76);
  border: 1px solid rgba(200,183,167,0.20);
  box-shadow: 0 10px 22px rgba(73,57,47,0.08), inset 0 1px 0 rgba(255,248,241,0.22);
}
:root[data-theme="mushroom"] .action-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0)), var(--accent-main);
  border-color: rgba(110,83,71,0.40);
}
:root[data-theme="mushroom"] .ghost-btn,
:root[data-theme="mushroom"] .theme-btn,
:root[data-theme="mushroom"] .view-btn,
:root[data-theme="mushroom"] .bottom-nav-link,
:root[data-theme="mushroom"] .icon-circle,
:root[data-theme="mushroom"] .small-round-btn{
  background: linear-gradient(180deg, rgba(255,248,241,0.22), rgba(255,248,241,0.08));
  border-color: rgba(200,183,167,0.16);
}

/* =========================================================
   OCEAN
   ========================================================= */
:root[data-theme="ocean"]{
  --page-bg:
    radial-gradient(circle at top left, rgba(255,255,255,0.22), transparent 24%),
    radial-gradient(circle at 78% 20%, rgba(96,147,160,0.14), transparent 20%),
    linear-gradient(180deg, #DDE7EA 0%, #C7D8DE 38%, #C9C3B9 68%, #B8C3C8 100%);
  --surface-main: rgba(245,249,250,0.82);
  --text-primary: #0B2A33;
  --text-secondary: #5C8792;
  --line-soft: rgba(122,157,168,0.28);
  --accent-main: #2F5E6B;
  --accent-text: #FFFFFF;
  --link-colour: #2F5E6B;
  --heading-colour: #0B2A33;
  --text-on-light: #0B2A33;
  --text-on-dark: #F6FCFE;
  --shadow: 0 12px 28px rgba(45,92,105,0.14);
}

:root[data-theme="ocean"] body{
  background:
    radial-gradient(120% 60% at 10% 20%, rgba(255,255,255,0.10) 0 2px, transparent 3px),
    radial-gradient(120% 60% at 70% 30%, rgba(47,94,107,0.08) 0 2px, transparent 3px),

    radial-gradient(120% 40% at 50% 12%, rgba(255,255,255,0.12) 0%, transparent 60%),
    radial-gradient(120% 40% at 50% 28%, rgba(255,255,255,0.10) 0%, transparent 60%),
    radial-gradient(120% 40% at 50% 46%, rgba(255,255,255,0.08) 0%, transparent 60%),
    radial-gradient(120% 40% at 50% 64%, rgba(47,94,107,0.06) 0%, transparent 60%),
    radial-gradient(120% 40% at 50% 82%, rgba(47,94,107,0.05) 0%, transparent 60%),

    var(--page-bg);
}

:root[data-theme="ocean"] .topbar,
:root[data-theme="ocean"] .bottom-nav{
  background: linear-gradient(180deg, rgba(235,245,248,0.84), rgba(220,235,240,0.72));
  border-color: rgba(122,157,168,0.16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

:root[data-theme="ocean"] .card,
:root[data-theme="ocean"] .plan-card,
:root[data-theme="ocean"] .modal-card,
:root[data-theme="ocean"] .account-panel,
:root[data-theme="ocean"] .notifications-popover,
:root[data-theme="ocean"] .search-panel,
:root[data-theme="ocean"] .profile-card,
:root[data-theme="ocean"] .empty-panel,
:root[data-theme="ocean"] .calendar-list-item,
:root[data-theme="ocean"] .week-day-block,
:root[data-theme="ocean"] .search-result-item{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0.14)),
    rgba(243,248,249,0.74);
  border: 1px solid rgba(122,157,168,0.17);
  box-shadow: 0 12px 26px rgba(45,92,105,0.08), inset 0 1px 0 rgba(255,255,255,0.46);
}

:root[data-theme="ocean"] .action-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0)), var(--accent-main);
  border-color: rgba(27,66,78,0.42);
}

:root[data-theme="ocean"] .ghost-btn,
:root[data-theme="ocean"] .theme-btn,
:root[data-theme="ocean"] .view-btn,
:root[data-theme="ocean"] .bottom-nav-link,
:root[data-theme="ocean"] .icon-circle,
:root[data-theme="ocean"] .small-round-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0.14));
  border-color: rgba(122,157,168,0.16);
}

/* =========================================================
   RAINBOW
   ========================================================= */
:root[data-theme="rainbow"]{
  --page-bg:
    linear-gradient(135deg, #7EA8DA 0%, #9C8BCB 20%, #C88AB8 40%, #E39A6D 60%, #E6C15A 80%, #8FBF7A 100%);
  --surface-main: rgba(255,255,255,0.82);
  --text-primary: #3F2F2F;
  --text-secondary: #6F5F5F;
  --line-soft: rgba(120,90,80,0.25);
  --accent-main: #D96A43;
  --accent-text: #FFF8F3;
  --link-colour: #D6A437;
  --heading-colour: #5E8C57;
  --text-on-light: #3F2F2F;
  --text-on-dark: #FFF8F3;
  --shadow: 0 10px 26px rgba(0,0,0,0.12);
}
:root[data-theme="rainbow"] body{
  background:
    linear-gradient(112deg, transparent 0 34%, rgba(255,255,255,0.12) 38%, transparent 44% 100%),
    linear-gradient(118deg, transparent 0 46%, rgba(255,255,255,0.10) 50%, transparent 56% 100%),
    radial-gradient(circle at 18% 22%, rgba(255,255,255,0.20) 0 1px, transparent 2px),
    radial-gradient(circle at 76% 26%, rgba(255,255,255,0.18) 0 1px, transparent 2px),
    radial-gradient(circle at 64% 72%, rgba(255,255,255,0.14) 0 1px, transparent 2px),
    var(--page-bg);
}
:root[data-theme="rainbow"] .topbar,
:root[data-theme="rainbow"] .bottom-nav{
  background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.62));
  border-color: rgba(255,255,255,0.24);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
:root[data-theme="rainbow"] .card,
:root[data-theme="rainbow"] .plan-card,
:root[data-theme="rainbow"] .modal-card,
:root[data-theme="rainbow"] .account-panel,
:root[data-theme="rainbow"] .notifications-popover,
:root[data-theme="rainbow"] .search-panel,
:root[data-theme="rainbow"] .profile-card,
:root[data-theme="rainbow"] .empty-panel,
:root[data-theme="rainbow"] .calendar-list-item,
:root[data-theme="rainbow"] .week-day-block,
:root[data-theme="rainbow"] .search-result-item{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.52), rgba(255,255,255,0.20)),
    rgba(255,255,255,0.66);
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow: 0 12px 26px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.58);
}
:root[data-theme="rainbow"] .action-btn{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0)),
    linear-gradient(90deg, #D96A43 0%, #E39A6D 34%, #E6C15A 68%, #8FBF7A 100%);
  border-color: rgba(217,106,67,0.28);
}
:root[data-theme="rainbow"] .ghost-btn,
:root[data-theme="rainbow"] .theme-btn,
:root[data-theme="rainbow"] .view-btn,
:root[data-theme="rainbow"] .bottom-nav-link,
:root[data-theme="rainbow"] .icon-circle,
:root[data-theme="rainbow"] .small-round-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.46), rgba(255,255,255,0.16));
  border-color: rgba(255,255,255,0.26);
}

/* =========================================================
   RAINFOREST
   ========================================================= */
:root[data-theme="rainforest"]{
  --page-bg:
    radial-gradient(circle at 18% 16%, rgba(94,153,109,0.14), transparent 20%),
    radial-gradient(circle at 82% 22%, rgba(132,184,143,0.08), transparent 18%),
    linear-gradient(160deg, #10241B 0%, #173327 30%, #21513B 66%, #2E684D 100%);
  --surface-main: rgba(36,74,54,0.84);
  --text-primary: #EEF2E6;
  --text-secondary: #B6C5B2;
  --line-soft: rgba(87,126,100,0.34);
  --accent-main: #79B08B;
  --accent-text: #102018;
  --link-colour: #B7D8BE;
  --heading-colour: #EEF2E6;
  --text-on-light: #183025;
  --text-on-dark: #F3F8F0;
  --shadow: 0 12px 28px rgba(0,0,0,0.26);
}
:root[data-theme="rainforest"] body{
  background:
    linear-gradient(90deg, rgba(7,29,18,0.10) 0 9%, transparent 9% 18%, rgba(7,29,18,0.08) 18% 25%, transparent 25% 42%, rgba(7,29,18,0.08) 42% 48%, transparent 48% 64%, rgba(7,29,18,0.08) 64% 71%, transparent 71%),
    radial-gradient(circle at 18% 24%, rgba(120,177,133,0.08) 0 1px, transparent 2px),
    radial-gradient(circle at 76% 32%, rgba(198,230,205,0.05) 0 1px, transparent 2px),
    var(--page-bg);
}
:root[data-theme="rainforest"] .topbar,
:root[data-theme="rainforest"] .bottom-nav{
  background: linear-gradient(180deg, rgba(19,48,34,0.88), rgba(24,59,42,0.78));
  border-color: rgba(130,184,145,0.14);
}
:root[data-theme="rainforest"] .card,
:root[data-theme="rainforest"] .plan-card,
:root[data-theme="rainforest"] .modal-card,
:root[data-theme="rainforest"] .account-panel,
:root[data-theme="rainforest"] .notifications-popover,
:root[data-theme="rainforest"] .search-panel,
:root[data-theme="rainforest"] .profile-card,
:root[data-theme="rainforest"] .empty-panel,
:root[data-theme="rainforest"] .calendar-list-item,
:root[data-theme="rainforest"] .week-day-block,
:root[data-theme="rainforest"] .search-result-item{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
    linear-gradient(180deg, rgba(47,96,70,0.84), rgba(27,62,45,0.92));
  border: 1px solid rgba(121,176,139,0.16);
  box-shadow: 0 14px 28px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.07);
}
:root[data-theme="rainforest"] .action-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0)), var(--accent-main);
  border-color: rgba(183,216,190,0.18);
}
:root[data-theme="rainforest"] .ghost-btn,
:root[data-theme="rainforest"] .theme-btn,
:root[data-theme="rainforest"] .view-btn,
:root[data-theme="rainforest"] .bottom-nav-link,
:root[data-theme="rainforest"] .icon-circle,
:root[data-theme="rainforest"] .small-round-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border-color: rgba(121,176,139,0.14);
}

/* =========================================================
   RAINY DAY
   ========================================================= */
:root[data-theme="rainy-day"]{
  --page-bg:
    linear-gradient(160deg, #6E7A84 0%, #7A8790 38%, #8F9AA2 72%, #A8B0B6 100%);
  --surface-main: rgba(223,228,232,0.86);
  --text-primary: #37434A;
  --text-secondary: #748089;
  --line-soft: rgba(153,165,173,0.34);
  --accent-main: #607480;
  --accent-text: #FFFFFF;
  --link-colour: #4F646E;
  --heading-colour: #37434A;
  --text-on-light: #37434A;
  --text-on-dark: #F8FBFC;
  --shadow: 0 10px 26px rgba(72,84,91,0.14);
}
:root[data-theme="rainy-day"] body{
  background:
    radial-gradient(circle at 14% 22%, rgba(255,255,255,0.12) 0 2px, rgba(255,255,255,0.05) 2px 6px, transparent 6px),
    radial-gradient(circle at 38% 42%, rgba(255,255,255,0.10) 0 2px, rgba(255,255,255,0.04) 2px 5px, transparent 5px),
    radial-gradient(circle at 74% 28%, rgba(255,255,255,0.10) 0 2px, rgba(255,255,255,0.04) 2px 6px, transparent 6px),
    repeating-linear-gradient(100deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 24px),
    linear-gradient(180deg, rgba(255,255,255,0.12), transparent 24%),
    var(--page-bg);
}
:root[data-theme="rainy-day"] .topbar,
:root[data-theme="rainy-day"] .bottom-nav{
  background: linear-gradient(180deg, rgba(232,238,241,0.82), rgba(216,224,228,0.70));
  border-color: rgba(153,165,173,0.16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
:root[data-theme="rainy-day"] .card,
:root[data-theme="rainy-day"] .plan-card,
:root[data-theme="rainy-day"] .modal-card,
:root[data-theme="rainy-day"] .account-panel,
:root[data-theme="rainy-day"] .notifications-popover,
:root[data-theme="rainy-day"] .search-panel,
:root[data-theme="rainy-day"] .profile-card,
:root[data-theme="rainy-day"] .empty-panel,
:root[data-theme="rainy-day"] .calendar-list-item,
:root[data-theme="rainy-day"] .week-day-block,
:root[data-theme="rainy-day"] .search-result-item{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.40), rgba(255,255,255,0.14)),
    rgba(231,236,239,0.74);
  border: 1px solid rgba(153,165,173,0.18);
  box-shadow: 0 10px 24px rgba(72,84,91,0.07), inset 0 1px 0 rgba(255,255,255,0.44);
}
:root[data-theme="rainy-day"] .action-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0)), var(--accent-main);
  border-color: rgba(79,100,110,0.36);
}
:root[data-theme="rainy-day"] .ghost-btn,
:root[data-theme="rainy-day"] .theme-btn,
:root[data-theme="rainy-day"] .view-btn,
:root[data-theme="rainy-day"] .bottom-nav-link,
:root[data-theme="rainy-day"] .icon-circle,
:root[data-theme="rainy-day"] .small-round-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.40), rgba(255,255,255,0.14));
  border-color: rgba(153,165,173,0.16);
}

/* =========================================================
   RIVER
   ========================================================= */
:root[data-theme="river"]{
  --page-bg:
    radial-gradient(circle at 18% 14%, rgba(220,239,243,0.18), transparent 16%),
    radial-gradient(circle at 78% 22%, rgba(126,170,182,0.12), transparent 18%),
    linear-gradient(180deg, #A9C0C8 0%, #8AB0B8 34%, #789EA8 68%, #688B96 100%);
  --surface-main: rgba(182,200,210,0.82);
  --text-primary: #1D2923;
  --text-secondary: #58764E;
  --line-soft: rgba(151,188,201,0.34);
  --accent-main: #3A626A;
  --accent-text: #FFFFFF;
  --link-colour: #324A30;
  --heading-colour: #1D2923;
  --text-on-light: #1D2923;
  --text-on-dark: #F7FBFC;
  --shadow: 0 10px 26px rgba(49,87,94,0.12);
}
:root[data-theme="river"] body{
  background:
    radial-gradient(circle at 8% 16%, rgba(255,255,255,0.18) 0 2px, rgba(255,255,255,0.08) 2px 6px, transparent 6px),
    radial-gradient(circle at 14% 34%, rgba(255,255,255,0.16) 0 1.6px, rgba(255,255,255,0.07) 1.6px 5px, transparent 5px),
    radial-gradient(circle at 22% 58%, rgba(255,255,255,0.14) 0 2px, rgba(255,255,255,0.06) 2px 6px, transparent 6px),
    radial-gradient(circle at 30% 22%, rgba(255,255,255,0.12) 0 1.4px, rgba(255,255,255,0.05) 1.4px 4px, transparent 4px),
    radial-gradient(circle at 40% 74%, rgba(58,98,106,0.10) 0 2px, rgba(58,98,106,0.05) 2px 6px, transparent 6px),
    radial-gradient(circle at 52% 28%, rgba(255,255,255,0.14) 0 1.8px, rgba(255,255,255,0.06) 1.8px 5px, transparent 5px),
    radial-gradient(circle at 62% 82%, rgba(255,255,255,0.12) 0 1.5px, rgba(255,255,255,0.05) 1.5px 4px, transparent 4px),
    radial-gradient(circle at 72% 18%, rgba(255,255,255,0.14) 0 2px, rgba(255,255,255,0.06) 2px 5px, transparent 5px),
    radial-gradient(circle at 82% 46%, rgba(58,98,106,0.10) 0 2px, rgba(58,98,106,0.05) 2px 5px, transparent 5px),
    radial-gradient(circle at 90% 72%, rgba(255,255,255,0.12) 0 1.5px, rgba(255,255,255,0.05) 1.5px 4px, transparent 4px),
    radial-gradient(140% 26% at 50% 14%, rgba(255,255,255,0.12) 0 24%, transparent 25%),
    radial-gradient(140% 26% at 50% 34%, rgba(255,255,255,0.10) 0 24%, transparent 25%),
    radial-gradient(140% 26% at 50% 56%, rgba(255,255,255,0.08) 0 24%, transparent 25%),
    radial-gradient(140% 26% at 50% 78%, rgba(58,98,106,0.06) 0 24%, transparent 25%),
    var(--page-bg);
}
:root[data-theme="river"] .topbar,
:root[data-theme="river"] .bottom-nav{
  background: linear-gradient(180deg, rgba(220,234,239,0.84), rgba(201,220,227,0.72));
  border-color: rgba(128,166,179,0.16);
}
:root[data-theme="river"] .card,
:root[data-theme="river"] .plan-card,
:root[data-theme="river"] .modal-card,
:root[data-theme="river"] .account-panel,
:root[data-theme="river"] .notifications-popover,
:root[data-theme="river"] .search-panel,
:root[data-theme="river"] .profile-card,
:root[data-theme="river"] .empty-panel,
:root[data-theme="river"] .calendar-list-item,
:root[data-theme="river"] .week-day-block,
:root[data-theme="river"] .search-result-item{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0.12)),
    rgba(204,220,228,0.72);
  border: 1px solid rgba(151,188,201,0.18);
  box-shadow: 0 10px 24px rgba(49,87,94,0.07), inset 0 1px 0 rgba(255,255,255,0.36);
}
:root[data-theme="river"] .action-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0)), var(--accent-main);
  border-color: rgba(50,74,48,0.24);
}
:root[data-theme="river"] .ghost-btn,
:root[data-theme="river"] .theme-btn,
:root[data-theme="river"] .view-btn,
:root[data-theme="river"] .bottom-nav-link,
:root[data-theme="river"] .icon-circle,
:root[data-theme="river"] .small-round-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0.12));
  border-color: rgba(151,188,201,0.16);
}

/* =========================================================
   ROSE CLAY
   ========================================================= */
:root[data-theme="rose-clay"]{
  --page-bg:
    radial-gradient(circle at 18% 16%, rgba(255,235,228,0.16), transparent 18%),
    linear-gradient(160deg, #C89F95 0%, #D7B3A8 38%, #E3C2B8 70%, #EED8D0 100%);
  --surface-main: #EED8D0;
  --text-primary: #5A3D38;
  --text-secondary: #93736D;
  --line-soft: #C9AAA2;
  --accent-main: #B86D5C;
  --accent-text: #FFFFFF;
  --link-colour: #8A564C;
  --heading-colour: #5A3D38;
  --text-on-light: #513732;
  --text-on-dark: #FFF7F5;
  --shadow: 0 10px 26px rgba(97,67,61,0.10);
}
:root[data-theme="rose-clay"] body{
  background:
    radial-gradient(circle at 14% 24%, rgba(255,255,255,0.08) 0 1px, transparent 2px),
    radial-gradient(circle at 74% 28%, rgba(138,86,76,0.06) 0 1px, transparent 2px),
    radial-gradient(circle at 52% 68%, rgba(184,109,92,0.05) 0 1.2px, transparent 2.4px),
    repeating-linear-gradient(8deg, rgba(126,83,73,0.020) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(98deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 11px),
    var(--page-bg);
}
:root[data-theme="rose-clay"] .topbar,
:root[data-theme="rose-clay"] .bottom-nav{
  background: linear-gradient(180deg, rgba(241,220,212,0.86), rgba(226,200,191,0.74));
  border-color: rgba(185,140,130,0.16);
}
:root[data-theme="rose-clay"] .card,
:root[data-theme="rose-clay"] .plan-card,
:root[data-theme="rose-clay"] .modal-card,
:root[data-theme="rose-clay"] .account-panel,
:root[data-theme="rose-clay"] .notifications-popover,
:root[data-theme="rose-clay"] .search-panel,
:root[data-theme="rose-clay"] .profile-card,
:root[data-theme="rose-clay"] .empty-panel,
:root[data-theme="rose-clay"] .calendar-list-item,
:root[data-theme="rose-clay"] .week-day-block,
:root[data-theme="rose-clay"] .search-result-item{
  background:
    linear-gradient(180deg, rgba(255,245,241,0.24), rgba(255,245,241,0.08)),
    repeating-linear-gradient(12deg, rgba(138,86,76,0.018) 0 2px, transparent 2px 10px),
    rgba(238,216,208,0.76);
  border: 1px solid rgba(201,170,162,0.22);
  box-shadow: 0 10px 24px rgba(97,67,61,0.07), inset 0 1px 0 rgba(255,245,241,0.24);
}
:root[data-theme="rose-clay"] .action-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0)), var(--accent-main);
  border-color: rgba(138,86,76,0.34);
}
:root[data-theme="rose-clay"] .ghost-btn,
:root[data-theme="rose-clay"] .theme-btn,
:root[data-theme="rose-clay"] .view-btn,
:root[data-theme="rose-clay"] .bottom-nav-link,
:root[data-theme="rose-clay"] .icon-circle,
:root[data-theme="rose-clay"] .small-round-btn{
  background: linear-gradient(180deg, rgba(255,245,241,0.28), rgba(255,245,241,0.10));
  border-color: rgba(201,170,162,0.18);
}

/* =========================================================
   SEASHELL
   ========================================================= */
:root[data-theme="seashell"]{
  --page-bg:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,0.30), transparent 20%),
    radial-gradient(circle at 82% 20%, rgba(201,167,154,0.10), transparent 20%),
    linear-gradient(150deg, #D4C8BE 0%, #DDD2C7 42%, #E8DDD5 74%, #F4EAE3 100%);
  --surface-main: rgba(243,232,223,0.82);
  --text-primary: #4B3B34;
  --text-secondary: #8D786E;
  --line-soft: rgba(214,192,179,0.34);
  --accent-main: #C9A79A;
  --accent-text: #FFFFFF;
  --link-colour: #8D6C62;
  --heading-colour: #4B3B34;
  --text-on-light: #43342E;
  --text-on-dark: #FFF9F7;
  --shadow: 0 10px 26px rgba(88,71,62,0.08);
}
:root[data-theme="seashell"] body{
  background:
    radial-gradient(circle at 14% 24%, rgba(255,255,255,0.26) 0 1px, transparent 2px),
    radial-gradient(circle at 76% 30%, rgba(201,167,154,0.10) 0 1px, transparent 2px),
    radial-gradient(120% 36% at 0% 50%, rgba(255,255,255,0.07) 0%, transparent 60%),
    radial-gradient(120% 36% at 100% 50%, rgba(255,255,255,0.06) 0%, transparent 60%),
    repeating-radial-gradient(circle at 50% 120%, rgba(255,255,255,0.05) 0 2px, transparent 2px 24px),
    var(--page-bg);
}
:root[data-theme="seashell"] .topbar,
:root[data-theme="seashell"] .bottom-nav{
  background: linear-gradient(180deg, rgba(249,242,236,0.86), rgba(237,227,219,0.74));
  border-color: rgba(199,177,165,0.16);
}
:root[data-theme="seashell"] .card,
:root[data-theme="seashell"] .plan-card,
:root[data-theme="seashell"] .modal-card,
:root[data-theme="seashell"] .account-panel,
:root[data-theme="seashell"] .notifications-popover,
:root[data-theme="seashell"] .search-panel,
:root[data-theme="seashell"] .profile-card,
:root[data-theme="seashell"] .empty-panel,
:root[data-theme="seashell"] .calendar-list-item,
:root[data-theme="seashell"] .week-day-block,
:root[data-theme="seashell"] .search-result-item{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.36), rgba(255,255,255,0.12)),
    linear-gradient(90deg, rgba(255,255,255,0.04), rgba(201,167,154,0.03), rgba(255,255,255,0.04)),
    rgba(248,239,232,0.76);
  border: 1px solid rgba(214,192,179,0.18);
  box-shadow: 0 10px 22px rgba(88,71,62,0.05), inset 0 1px 0 rgba(255,255,255,0.38);
}
:root[data-theme="seashell"] .action-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0)), var(--accent-main);
  border-color: rgba(141,108,98,0.32);
}
:root[data-theme="seashell"] .ghost-btn,
:root[data-theme="seashell"] .theme-btn,
:root[data-theme="seashell"] .view-btn,
:root[data-theme="seashell"] .bottom-nav-link,
:root[data-theme="seashell"] .icon-circle,
:root[data-theme="seashell"] .small-round-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.36), rgba(255,255,255,0.12));
  border-color: rgba(214,192,179,0.16);
}

/* =========================================================
   STORM
   ========================================================= */
:root[data-theme="storm"]{
  --page-bg:
    radial-gradient(60% 24% at 18% 18%, rgba(238,244,248,0.16), transparent 70%),
    radial-gradient(52% 22% at 78% 16%, rgba(206,218,228,0.12), transparent 72%),
    linear-gradient(180deg, #3B4652 0%, #495561 26%, #596471 54%, #69747F 78%, #7A8893 100%);
  --surface-main: rgba(195,205,214,0.78);
  --text-primary: #24303A;
  --text-secondary: #5C6974;
  --line-soft: rgba(104,119,131,0.36);
  --accent-main: #566A7C;
  --accent-text: #FFFFFF;
  --link-colour: #485867;
  --heading-colour: #24303A;
  --text-on-light: #24303A;
  --text-on-dark: #F7FAFC;
  --shadow: 0 16px 34px rgba(20,26,32,0.22);
}
:root[data-theme="storm"] body{
  background:
    radial-gradient(36% 16% at 14% 20%, rgba(32,39,46,0.34) 0%, rgba(32,39,46,0.24) 36%, transparent 72%),
    radial-gradient(34% 14% at 34% 15%, rgba(46,55,64,0.28) 0%, rgba(46,55,64,0.18) 38%, transparent 74%),
    radial-gradient(42% 18% at 58% 22%, rgba(35,43,50,0.30) 0%, rgba(35,43,50,0.18) 42%, transparent 76%),
    radial-gradient(36% 15% at 82% 16%, rgba(43,52,61,0.28) 0%, rgba(43,52,61,0.16) 40%, transparent 74%),
    linear-gradient(115deg, transparent 0 44%, rgba(248,252,255,0.00) 44.4%, rgba(248,252,255,0.18) 44.8%, rgba(190,220,255,0.10) 45.1%, rgba(248,252,255,0.00) 45.5%, transparent 46% 100%),
    linear-gradient(108deg, transparent 0 62%, rgba(248,252,255,0.00) 62.4%, rgba(248,252,255,0.10) 62.8%, rgba(198,224,255,0.06) 63.1%, rgba(248,252,255,0.00) 63.5%, transparent 64% 100%),
    radial-gradient(circle at 22% 68%, rgba(255,255,255,0.04) 0 1px, transparent 2px),
    radial-gradient(circle at 74% 74%, rgba(255,255,255,0.03) 0 1px, transparent 2px),
    var(--page-bg);
}
:root[data-theme="storm"] .topbar,
:root[data-theme="storm"] .bottom-nav{
  background: linear-gradient(180deg, rgba(63,74,86,0.86), rgba(80,93,106,0.74));
  border-color: rgba(167,181,193,0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
:root[data-theme="storm"] .card,
:root[data-theme="storm"] .plan-card,
:root[data-theme="storm"] .modal-card,
:root[data-theme="storm"] .account-panel,
:root[data-theme="storm"] .notifications-popover,
:root[data-theme="storm"] .search-panel,
:root[data-theme="storm"] .profile-card,
:root[data-theme="storm"] .empty-panel,
:root[data-theme="storm"] .calendar-list-item,
:root[data-theme="storm"] .week-day-block,
:root[data-theme="storm"] .search-result-item{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.26), rgba(255,255,255,0.08)),
    rgba(203,213,221,0.68);
  border: 1px solid rgba(121,137,150,0.20);
  box-shadow: 0 14px 30px rgba(23,30,37,0.14), inset 0 1px 0 rgba(255,255,255,0.30);
}
:root[data-theme="storm"] .action-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0)), var(--accent-main);
  border-color: rgba(72,88,103,0.38);
}
:root[data-theme="storm"] .ghost-btn,
:root[data-theme="storm"] .theme-btn,
:root[data-theme="storm"] .view-btn,
:root[data-theme="storm"] .bottom-nav-link,
:root[data-theme="storm"] .icon-circle,
:root[data-theme="storm"] .small-round-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.10));
  border-color: rgba(121,137,150,0.18);
}

/* =========================================================
   SUNRISE
   ========================================================= */
:root[data-theme="sunrise"]{
  --page-bg:
    radial-gradient(circle at 18% 16%, rgba(255,244,232,0.18), transparent 18%),
    linear-gradient(150deg, #8EA3B3 0%, #9CAFBE 38%, #C9BEC1 70%, #EFCBC3 100%);
  --surface-main: rgba(239,203,195,0.82);
  --text-primary: #64818E;
  --text-secondary: #8D6F72;
  --line-soft: rgba(201,208,216,0.34);
  --accent-main: #F3BBB0;
  --accent-text: #64818E;
  --link-colour: #D08F86;
  --heading-colour: #64818E;
  --text-on-light: #506975;
  --text-on-dark: #FFF8F7;
  --shadow: 0 10px 26px rgba(92,120,133,0.12);
}
:root[data-theme="sunrise"] body{
  background:
    linear-gradient(180deg, rgba(255,249,243,0.18), transparent 22%),
    radial-gradient(circle at 16% 24%, rgba(255,255,255,0.20) 0 1px, transparent 2px),
    radial-gradient(circle at 76% 30%, rgba(243,187,176,0.11) 0 1px, transparent 2px),
    var(--page-bg);
}
:root[data-theme="sunrise"] .topbar,
:root[data-theme="sunrise"] .bottom-nav{
  background: linear-gradient(180deg, rgba(245,228,223,0.84), rgba(229,214,213,0.72));
  border-color: rgba(174,180,192,0.16);
}
:root[data-theme="sunrise"] .card,
:root[data-theme="sunrise"] .plan-card,
:root[data-theme="sunrise"] .modal-card,
:root[data-theme="sunrise"] .account-panel,
:root[data-theme="sunrise"] .notifications-popover,
:root[data-theme="sunrise"] .search-panel,
:root[data-theme="sunrise"] .profile-card,
:root[data-theme="sunrise"] .empty-panel,
:root[data-theme="sunrise"] .calendar-list-item,
:root[data-theme="sunrise"] .week-day-block,
:root[data-theme="sunrise"] .search-result-item{
  background:
    linear-gradient(180deg, rgba(255,248,246,0.28), rgba(255,248,246,0.10)),
    rgba(244,225,220,0.74);
  border: 1px solid rgba(201,208,216,0.18);
  box-shadow: 0 10px 24px rgba(92,120,133,0.06), inset 0 1px 0 rgba(255,248,246,0.30);
}
:root[data-theme="sunrise"] .action-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0)), var(--accent-main);
  border-color: rgba(170,136,132,0.30);
}
:root[data-theme="sunrise"] .ghost-btn,
:root[data-theme="sunrise"] .theme-btn,
:root[data-theme="sunrise"] .view-btn,
:root[data-theme="sunrise"] .bottom-nav-link,
:root[data-theme="sunrise"] .icon-circle,
:root[data-theme="sunrise"] .small-round-btn{
  background: linear-gradient(180deg, rgba(255,248,246,0.28), rgba(255,248,246,0.10));
  border-color: rgba(201,208,216,0.16);
}

/* =========================================================
   SUNSET
   ========================================================= */
:root[data-theme="sunset"]{
  --page-bg:
    radial-gradient(circle at 74% 16%, rgba(255,214,150,0.10), transparent 14%),
    radial-gradient(circle at 50% 58%, rgba(244,124,60,0.12), transparent 26%),
    linear-gradient(180deg, #0A1820 0%, #0C1F26 24%, #11424A 58%, #1E6C67 100%);
  --surface-main: rgba(25,95,98,0.84);
  --text-primary: #E7D6BD;
  --text-secondary: #C6B395;
  --line-soft: rgba(201,173,140,0.26);
  --accent-main: #F47C3C;
  --accent-text: #FFFFFF;
  --link-colour: #F1995E;
  --heading-colour: #F0DEC7;
  --text-on-light: #1A2E32;
  --text-on-dark: #FFF4E7;
  --shadow: 0 14px 30px rgba(0,0,0,0.30);
}
:root[data-theme="sunset"] body{
  background:
    radial-gradient(42% 18% at 50% 62%, rgba(255,158,92,0.22) 0%, rgba(255,158,92,0.10) 36%, rgba(255,158,92,0.00) 72%),
    radial-gradient(28% 10% at 50% 64%, rgba(255,218,162,0.22) 0%, rgba(255,218,162,0.08) 42%, transparent 76%),
    radial-gradient(16% 8% at 78% 18%, rgba(255,236,205,0.14) 0%, rgba(255,236,205,0.05) 48%, transparent 78%),
    linear-gradient(90deg, transparent 0 28%, rgba(255,214,160,0.04) 40%, transparent 54% 100%),
    radial-gradient(circle at 16% 24%, rgba(255,255,255,0.06) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 30%, rgba(255,255,255,0.04) 0 1px, transparent 2px),
    linear-gradient(180deg, rgba(255,255,255,0.05), transparent 22%),
    var(--page-bg);
}
:root[data-theme="sunset"] .topbar,
:root[data-theme="sunset"] .bottom-nav{
  background: linear-gradient(180deg, rgba(14,34,40,0.88), rgba(24,72,76,0.74));
  border-color: rgba(201,173,140,0.14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
:root[data-theme="sunset"] .card,
:root[data-theme="sunset"] .plan-card,
:root[data-theme="sunset"] .modal-card,
:root[data-theme="sunset"] .account-panel,
:root[data-theme="sunset"] .notifications-popover,
:root[data-theme="sunset"] .search-panel,
:root[data-theme="sunset"] .profile-card,
:root[data-theme="sunset"] .empty-panel,
:root[data-theme="sunset"] .calendar-list-item,
:root[data-theme="sunset"] .week-day-block,
:root[data-theme="sunset"] .search-result-item{
  background:
    linear-gradient(180deg, rgba(255,244,228,0.14), rgba(255,244,228,0.05)),
    rgba(28,104,104,0.72);
  border: 1px solid rgba(201,173,140,0.18);
  box-shadow: 0 12px 28px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,244,228,0.14);
}
:root[data-theme="sunset"] .action-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0)), var(--accent-main);
  border-color: rgba(241,153,94,0.34);
}
:root[data-theme="sunset"] .ghost-btn,
:root[data-theme="sunset"] .theme-btn,
:root[data-theme="sunset"] .view-btn,
:root[data-theme="sunset"] .bottom-nav-link,
:root[data-theme="sunset"] .icon-circle,
:root[data-theme="sunset"] .small-round-btn{
  background: linear-gradient(180deg, rgba(255,244,228,0.16), rgba(255,244,228,0.05));
  border-color: rgba(201,173,140,0.16);
}

/* =========================================================
   VOLCANO
   ========================================================= */
:root[data-theme="volcano"]{
  --page-bg:
    radial-gradient(circle at 50% 100%, rgba(229,41,4,0.18), transparent 18%),
    radial-gradient(circle at 58% 82%, rgba(178,57,29,0.16), transparent 14%),
    linear-gradient(165deg, #050101 0%, #0B0202 28%, #1A0404 58%, #360605 100%);
  --surface-main: rgba(63,10,8,0.84);
  --text-primary: #FBC692;
  --text-secondary: #B86953;
  --line-soft: rgba(151,55,29,0.34);
  --accent-main: #D94A1E;
  --accent-text: #FFFFFF;
  --link-colour: #FF6A3A;
  --heading-colour: #FBC692;
  --text-on-light: #210E0D;
  --text-on-dark: #FFF0E2;
  --shadow: 0 14px 32px rgba(0,0,0,0.34);
}
:root[data-theme="volcano"] body{
  background:
    radial-gradient(circle at 20% 26%, rgba(255,178,102,0.12) 0 1px, transparent 2px),
    radial-gradient(circle at 74% 78%, rgba(217,74,30,0.12) 0 1px, transparent 2px),
    linear-gradient(180deg, rgba(0,0,0,0.18), transparent 24%),
    var(--page-bg);
}
:root[data-theme="volcano"] .topbar,
:root[data-theme="volcano"] .bottom-nav{
  background: linear-gradient(180deg, rgba(18,4,4,0.92), rgba(34,7,7,0.82));
  border-color: rgba(217,74,30,0.14);
}
:root[data-theme="volcano"] .card,
:root[data-theme="volcano"] .plan-card,
:root[data-theme="volcano"] .modal-card,
:root[data-theme="volcano"] .account-panel,
:root[data-theme="volcano"] .notifications-popover,
:root[data-theme="volcano"] .search-panel,
:root[data-theme="volcano"] .profile-card,
:root[data-theme="volcano"] .empty-panel,
:root[data-theme="volcano"] .calendar-list-item,
:root[data-theme="volcano"] .week-day-block,
:root[data-theme="volcano"] .search-result-item{
  background:
    linear-gradient(180deg, rgba(255,198,146,0.08), rgba(255,198,146,0.02)),
    linear-gradient(180deg, rgba(82,13,10,0.86), rgba(45,8,7,0.94));
  border: 1px solid rgba(217,74,30,0.16);
  box-shadow: 0 14px 30px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,198,146,0.08);
}
:root[data-theme="volcano"] .action-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0)), var(--accent-main);
  border-color: rgba(255,106,58,0.22);
}
:root[data-theme="volcano"] .ghost-btn,
:root[data-theme="volcano"] .theme-btn,
:root[data-theme="volcano"] .view-btn,
:root[data-theme="volcano"] .bottom-nav-link,
:root[data-theme="volcano"] .icon-circle,
:root[data-theme="volcano"] .small-round-btn{
  background: linear-gradient(180deg, rgba(255,198,146,0.08), rgba(255,198,146,0.02));
  border-color: rgba(217,74,30,0.13);
}

/* =========================================================
   WATTLE
   ========================================================= */
:root[data-theme="wattle"]{
  --page-bg:
    radial-gradient(circle at 20% 18%, rgba(255,241,176,0.14), transparent 18%),
    radial-gradient(circle at 82% 24%, rgba(197,167,45,0.10), transparent 20%),
    linear-gradient(150deg, #AEB69B 0%, #BCC5AE 42%, #CDD3BE 74%, #E0E2D0 100%);
  --surface-main: rgba(230,223,193,0.82);
  --text-primary: #3E3A24;
  --text-secondary: #7E7A56;
  --line-soft: rgba(205,189,119,0.34);
  --accent-main: #C5A72D;
  --accent-text: #3A3016;
  --link-colour: #726233;
  --heading-colour: #3E3A24;
  --text-on-light: #352F1F;
  --text-on-dark: #FFFBEF;
  --shadow: 0 10px 26px rgba(86,80,45,0.10);
}
:root[data-theme="wattle"] body{
  background:
    radial-gradient(circle at 14% 26%, rgba(255,241,176,0.20) 0 2.2px, transparent 3.6px),
    radial-gradient(circle at 17% 29%, rgba(255,241,176,0.18) 0 2px, transparent 3.4px),
    radial-gradient(circle at 11% 30%, rgba(255,241,176,0.18) 0 2px, transparent 3.4px),
    radial-gradient(circle at 74% 22%, rgba(197,167,45,0.16) 0 2.2px, transparent 3.6px),
    radial-gradient(circle at 77% 25%, rgba(255,241,176,0.16) 0 2px, transparent 3.4px),
    radial-gradient(circle at 71% 26%, rgba(255,241,176,0.16) 0 2px, transparent 3.4px),
    radial-gradient(circle at 26% 78%, rgba(197,167,45,0.12) 0 1.8px, transparent 3px),
    radial-gradient(circle at 29% 81%, rgba(255,241,176,0.14) 0 1.6px, transparent 2.8px),
    var(--page-bg);
}
:root[data-theme="wattle"] .topbar,
:root[data-theme="wattle"] .bottom-nav{
  background: linear-gradient(180deg, rgba(242,237,214,0.84), rgba(228,222,193,0.72));
  border-color: rgba(184,169,101,0.16);
}
:root[data-theme="wattle"] .card,
:root[data-theme="wattle"] .plan-card,
:root[data-theme="wattle"] .modal-card,
:root[data-theme="wattle"] .account-panel,
:root[data-theme="wattle"] .notifications-popover,
:root[data-theme="wattle"] .search-panel,
:root[data-theme="wattle"] .profile-card,
:root[data-theme="wattle"] .empty-panel,
:root[data-theme="wattle"] .calendar-list-item,
:root[data-theme="wattle"] .week-day-block,
:root[data-theme="wattle"] .search-result-item{
  background:
    linear-gradient(180deg, rgba(255,252,239,0.24), rgba(255,252,239,0.08)),
    rgba(238,232,206,0.74);
  border: 1px solid rgba(205,189,119,0.18);
  box-shadow: 0 10px 22px rgba(86,80,45,0.06), inset 0 1px 0 rgba(255,252,239,0.26);
}
:root[data-theme="wattle"] .action-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0)), var(--accent-main);
  border-color: rgba(114,98,51,0.30);
}
:root[data-theme="wattle"] .ghost-btn,
:root[data-theme="wattle"] .theme-btn,
:root[data-theme="wattle"] .view-btn,
:root[data-theme="wattle"] .bottom-nav-link,
:root[data-theme="wattle"] .icon-circle,
:root[data-theme="wattle"] .small-round-btn{
  background: linear-gradient(180deg, rgba(255,252,239,0.24), rgba(255,252,239,0.08));
  border-color: rgba(205,189,119,0.16);
}

/* =========================================================
   WINTER
   ========================================================= */
:root[data-theme="winter"]{
  --page-bg:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,0.58), transparent 18%),
    radial-gradient(circle at 82% 18%, rgba(255,255,255,0.32), transparent 20%),
    linear-gradient(180deg, #FFF7F3 0%, #F8EFEA 34%, #EEE9EB 68%, #E2E2E6 100%);
  --surface-main: #E8E7E8;
  --text-primary: #32232F;
  --text-secondary: #8B838E;
  --line-soft: #D1C1BF;
  --accent-main: #F0AA81;
  --accent-text: #32232F;
  --link-colour: #9F6863;
  --heading-colour: #716B7E;
  --text-on-light: #2C252B;
  --text-on-dark: #FFF8F5;
  --shadow: 0 10px 26px rgba(102,81,84,0.10);
}
:root[data-theme="winter"] body{
  background:
    linear-gradient(90deg, transparent 49.2%, rgba(255,255,255,0.72) 49.2% 50.8%, transparent 50.8%) 8% 16% / 12px 12px no-repeat,
    linear-gradient(0deg, transparent 49.2%, rgba(255,255,255,0.72) 49.2% 50.8%, transparent 50.8%) 8% 16% / 12px 12px no-repeat,
    linear-gradient(45deg, transparent 49.3%, rgba(255,255,255,0.68) 49.3% 50.7%, transparent 50.7%) 8% 16% / 12px 12px no-repeat,
    linear-gradient(-45deg, transparent 49.3%, rgba(255,255,255,0.68) 49.3% 50.7%, transparent 50.7%) 8% 16% / 12px 12px no-repeat,

    linear-gradient(90deg, transparent 49.2%, rgba(255,255,255,0.58) 49.2% 50.8%, transparent 50.8%) 24% 38% / 10px 10px no-repeat,
    linear-gradient(0deg, transparent 49.2%, rgba(255,255,255,0.58) 49.2% 50.8%, transparent 50.8%) 24% 38% / 10px 10px no-repeat,
    linear-gradient(45deg, transparent 49.3%, rgba(255,255,255,0.54) 49.3% 50.7%, transparent 50.7%) 24% 38% / 10px 10px no-repeat,
    linear-gradient(-45deg, transparent 49.3%, rgba(255,255,255,0.54) 49.3% 50.7%, transparent 50.7%) 24% 38% / 10px 10px no-repeat,

    linear-gradient(90deg, transparent 49.2%, rgba(255,255,255,0.70) 49.2% 50.8%, transparent 50.8%) 46% 22% / 11px 11px no-repeat,
    linear-gradient(0deg, transparent 49.2%, rgba(255,255,255,0.70) 49.2% 50.8%, transparent 50.8%) 46% 22% / 11px 11px no-repeat,
    linear-gradient(45deg, transparent 49.3%, rgba(255,255,255,0.64) 49.3% 50.7%, transparent 50.7%) 46% 22% / 11px 11px no-repeat,
    linear-gradient(-45deg, transparent 49.3%, rgba(255,255,255,0.64) 49.3% 50.7%, transparent 50.7%) 46% 22% / 11px 11px no-repeat,

    linear-gradient(90deg, transparent 49.2%, rgba(255,255,255,0.56) 49.2% 50.8%, transparent 50.8%) 62% 54% / 10px 10px no-repeat,
    linear-gradient(0deg, transparent 49.2%, rgba(255,255,255,0.56) 49.2% 50.8%, transparent 50.8%) 62% 54% / 10px 10px no-repeat,
    linear-gradient(45deg, transparent 49.3%, rgba(255,255,255,0.52) 49.3% 50.7%, transparent 50.7%) 62% 54% / 10px 10px no-repeat,
    linear-gradient(-45deg, transparent 49.3%, rgba(255,255,255,0.52) 49.3% 50.7%, transparent 50.7%) 62% 54% / 10px 10px no-repeat,

    linear-gradient(90deg, transparent 49.2%, rgba(255,255,255,0.68) 49.2% 50.8%, transparent 50.8%) 84% 18% / 11px 11px no-repeat,
    linear-gradient(0deg, transparent 49.2%, rgba(255,255,255,0.68) 49.2% 50.8%, transparent 50.8%) 84% 18% / 11px 11px no-repeat,
    linear-gradient(45deg, transparent 49.3%, rgba(255,255,255,0.62) 49.3% 50.7%, transparent 50.7%) 84% 18% / 11px 11px no-repeat,
    linear-gradient(-45deg, transparent 49.3%, rgba(255,255,255,0.62) 49.3% 50.7%, transparent 50.7%) 84% 18% / 11px 11px no-repeat,

    linear-gradient(90deg, transparent 49.2%, rgba(255,255,255,0.58) 49.2% 50.8%, transparent 50.8%) 76% 74% / 10px 10px no-repeat,
    linear-gradient(0deg, transparent 49.2%, rgba(255,255,255,0.58) 49.2% 50.8%, transparent 50.8%) 76% 74% / 10px 10px no-repeat,
    linear-gradient(45deg, transparent 49.3%, rgba(255,255,255,0.54) 49.3% 50.7%, transparent 50.7%) 76% 74% / 10px 10px no-repeat,
    linear-gradient(-45deg, transparent 49.3%, rgba(255,255,255,0.54) 49.3% 50.7%, transparent 50.7%) 76% 74% / 10px 10px no-repeat,

    linear-gradient(90deg, transparent 49.2%, rgba(255,255,255,0.62) 49.2% 50.8%, transparent 50.8%) 18% 82% / 10px 10px no-repeat,
    linear-gradient(0deg, transparent 49.2%, rgba(255,255,255,0.62) 49.2% 50.8%, transparent 50.8%) 18% 82% / 10px 10px no-repeat,
    linear-gradient(45deg, transparent 49.3%, rgba(255,255,255,0.56) 49.3% 50.7%, transparent 50.7%) 18% 82% / 10px 10px no-repeat,
    linear-gradient(-45deg, transparent 49.3%, rgba(255,255,255,0.56) 49.3% 50.7%, transparent 50.7%) 18% 82% / 10px 10px no-repeat,

    radial-gradient(120% 55% at 50% 0%, rgba(255,255,255,0.24), transparent 56%),
    var(--page-bg);
}
:root[data-theme="winter"] .topbar,
:root[data-theme="winter"] .bottom-nav{
  background: linear-gradient(180deg, rgba(252,248,246,0.88), rgba(236,236,240,0.76));
  border-color: rgba(209,193,191,0.16);
}
:root[data-theme="winter"] .card,
:root[data-theme="winter"] .plan-card,
:root[data-theme="winter"] .modal-card,
:root[data-theme="winter"] .account-panel,
:root[data-theme="winter"] .notifications-popover,
:root[data-theme="winter"] .search-panel,
:root[data-theme="winter"] .profile-card,
:root[data-theme="winter"] .empty-panel,
:root[data-theme="winter"] .calendar-list-item,
:root[data-theme="winter"] .week-day-block,
:root[data-theme="winter"] .search-result-item{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.52), rgba(255,255,255,0.18)),
    rgba(239,238,241,0.78);
  border: 1px solid rgba(209,193,191,0.18);
  box-shadow: 0 12px 28px rgba(102,81,84,0.06), inset 0 1px 0 rgba(255,255,255,0.56);
}
:root[data-theme="winter"] .action-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0)), var(--accent-main);
  border-color: rgba(159,104,99,0.34);
}
:root[data-theme="winter"] .ghost-btn,
:root[data-theme="winter"] .theme-btn,
:root[data-theme="winter"] .view-btn,
:root[data-theme="winter"] .bottom-nav-link,
:root[data-theme="winter"] .icon-circle,
:root[data-theme="winter"] .small-round-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.48), rgba(255,255,255,0.18));
  border-color: rgba(209,193,191,0.16);
}

/* =========================================================
   FINAL GLOBAL ALIAS LAYER
   ========================================================= */
:root,
:root[data-theme]{
  --bg: var(--page-bg);
  --card: var(--surface-main);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --text-soft: var(--text-secondary);
  --border: var(--line-soft);
  --accent: var(--accent-main);
  --accent-ink: var(--accent-text);
  --link: var(--link-colour);
  --heading: var(--heading-colour);

  --ink-on-light: var(--text-on-light);
--ink-on-dark: var(--text-on-dark);

  --paper: var(--surface-main);
  --cream: var(--page-bg);
  --brown: var(--text-primary);
  --driftwood: var(--text-secondary);
  --clay: var(--link-colour);
}

/* =========================================================
   FORM + INPUT SAFETY LAYER
   ========================================================= */
.text-input,
.text-area,
.select-input,
.date-input-native,
.hunt-tool-select,
.search-input-wrap input,
input[type="date"],
input[type="text"],
input[type="search"],
textarea,
select{
  color: var(--text) !important;
  caret-color: var(--text) !important;
}

.text-input::placeholder,
.text-area::placeholder,
.search-input-wrap input::placeholder,
input[type="text"]::placeholder,
input[type="search"]::placeholder,
textarea::placeholder{
  color: color-mix(in srgb, var(--text) 55%, transparent) !important;
  opacity: 1 !important;
}

.text-input,
.text-area,
.select-input,
.date-input-native,
.hunt-tool-select,
.search-input-wrap,
input[type="date"],
input[type="text"],
input[type="search"],
textarea,
select{
  background: color-mix(in srgb, var(--card) 88%, white 12%) !important;
  border-color: color-mix(in srgb, var(--border) 75%, transparent) !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color: var(--text) !important;
  transition: background-color 9999s ease-in-out 0s;
  box-shadow: 0 0 0 1000px color-mix(in srgb, var(--card) 88%, white 12%) inset !important;
}

input[type="date"]::-webkit-calendar-picker-indicator{
  opacity: 0.8;
}

/* =========================================================
   DEFAULT INHERIT HELPERS
   ========================================================= */
.search-result-item strong,
.search-result-item span,
.notifications-popover-item-title,
.notifications-popover-item-meta,
.field-label,
.date-help,
.search-help,
.sort-panel-label,
.small-note{
  color: inherit;
}

.muted{
  color: var(--muted);
}

/* =========================================================
   SURFACE READABILITY
   ========================================================= */
.summary-box,
.summary-card,
.summary-mini-item,
.summary-mini-card,
.empty-panel,
.search-result-item,
.calendar-list-item,
.week-day-block,
.detail-box,
.plan-item,
.schedule-row,
.notifications-popover-empty,
.notifications-popover-item,
.attachment-pill,
.photo-preview-tile,
.gallery-tile,
.photo-tile,
.day-card,
.list-card,
.info-card{
  color: var(--text) !important;
}

.summary-box *,
.summary-card *,
.summary-mini-item *,
.summary-mini-card *,
.empty-panel *,
.search-result-item *,
.calendar-list-item *,
.week-day-block *,
.detail-box *,
.plan-item *,
.schedule-row *,
.notifications-popover-empty *,
.notifications-popover-item *,
.attachment-pill *,
.photo-preview-tile *,
.gallery-tile *,
.photo-tile *,
.day-card *,
.list-card *,
.info-card *{
  color: inherit !important;
}

.summary-box .muted,
.summary-card .muted,
.summary-mini-item .muted,
.empty-panel .muted,
.calendar-list-item .calendar-list-meta,
.schedule-row .schedule-row-note{
  color: var(--muted) !important;
}

/* =========================================================
   CONTROL READABILITY (FIXED)
   ========================================================= */
.ghost-btn,
.modal-option-btn.secondary,
.today-btn,
.summary-toggle-btn,
.small-round-btn,
.entry-tool,
.notifications-mini-btn,
.notifications-settings-btn,
.gallery-overlay-btn,
.gallery-close-btn,
.day-events-action-btn,
.profile-menu-btn,
.profile-menu-dropdown-btn,
.mini-inline-btn,
.hunt-tool-btn,
.hunt-set-btn,
.filter-btn,
.filter-chip,
.option-btn,
.option-chip,
.set-btn,
.set-chip,
.mode-btn,
.theme-btn,
.view-btn,
.weekday-chip,
.task-chip,
.child-chip,
.bottom-nav-link{
  color: var(--text) !important;
  background: color-mix(in srgb, var(--card) 92%, transparent) !important;
  border-color: color-mix(in srgb, var(--border) 70%, transparent) !important;
  box-shadow: none !important;
}

.ghost-btn *,
.modal-option-btn.secondary *,
.today-btn *,
.summary-toggle-btn *,
.small-round-btn *,
.entry-tool *,
.notifications-mini-btn *,
.notifications-settings-btn *,
.gallery-overlay-btn *,
.gallery-close-btn *,
.day-events-action-btn *,
.profile-menu-btn *,
.profile-menu-dropdown-btn *,
.mini-inline-btn *,
.hunt-tool-btn *,
.hunt-set-btn *,
.filter-btn *,
.filter-chip *,
.option-btn *,
.option-chip *,
.set-btn *,
.set-chip *,
.mode-btn *,
.theme-btn *,
.view-btn *,
.weekday-chip *,
.task-chip *,
.child-chip *,
.bottom-nav-link *{
  color: inherit !important;
}

/* =========================================================
   FILLED / SELECTED CONTROL READABILITY
   ========================================================= */
.mode-btn.active,
.view-btn.active,
.theme-btn.active,
.weekday-chip.active,
.task-chip.active,
.child-chip.active,
.bottom-nav-link.active,
.hunt-tool-btn.active,
.hunt-set-btn.active,
.filter-btn.active,
.filter-chip.active,
.option-btn.active,
.option-chip.active,
.set-btn.active,
.set-chip.active,
[aria-pressed="true"],
[aria-selected="true"],
[class*="mode-btn"].active,
[class*="view-btn"].active,
[class*="theme-btn"].active,
[class*="weekday-chip"].active,
[class*="task-chip"].active,
[class*="child-chip"].active,
[class*="filter-btn"].active,
[class*="filter-chip"].active,
[class*="option-btn"].active,
[class*="option-chip"].active,
[class*="set-btn"].active,
[class*="set-chip"].active{
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  border-color: color-mix(in srgb, var(--accent) 78%, black 22%) !important;
  box-shadow:
    0 6px 14px color-mix(in srgb, var(--accent) 22%, transparent) !important,
    inset 0 1px 0 color-mix(in srgb, white 14%, transparent) !important;
  font-weight: 700 !important;
}

.mode-btn.active *,
.view-btn.active *,
.theme-btn.active *,
.weekday-chip.active *,
.task-chip.active *,
.bottom-nav-link.active *,
.hunt-tool-btn.active *,
.hunt-set-btn.active *,
.filter-btn.active *,
.filter-chip.active *,
.option-btn.active *,
.option-chip.active *,
.set-btn.active *,
.set-chip.active *,
[aria-pressed="true"] *,
[aria-selected="true"] *,
[class*="mode-btn"].active *,
[class*="view-btn"].active *,
[class*="theme-btn"].active *,
[class*="weekday-chip"].active *,
[class*="task-chip"].active *,
[class*="filter-btn"].active *,
[class*="filter-chip"].active *,
[class*="option-btn"].active *,
[class*="option-chip"].active *,
[class*="set-btn"].active *,
[class*="set-chip"].active *{
  color: inherit !important;
}

/* =========================================================
   ACCENT BUTTONS
   ========================================================= */
.action-btn,
.modal-option-btn.primary{
  color: var(--accent-ink) !important;
}

.action-btn *,
.modal-option-btn.primary *{
  color: inherit !important;
}

/* =========================================================
   EVENT / INLINE COLOUR SAFETY
   ========================================================= */
.day-event-pill,
.calendar-list-event-btn,
.today-event-link,
.day-events-modal-card,
.detail-box[style]{
  color: var(--ink-on-dark) !important;
}

.day-event-pill *,
.calendar-list-event-btn *,
.today-event-link *,
.day-events-modal-card *,
.detail-box[style] *{
  color: inherit !important;
}

/* =========================================================
   DROPDOWNS
   ========================================================= */
select,
.select-input{
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
}

select option{
  color: var(--text) !important;
  background: var(--card) !important;
}

/* =========================================================
   ICON VISIBILITY
   ========================================================= */
.icon-svg{
  stroke: currentColor !important;
}

/* =========================================================
   SEARCH BAR
   ========================================================= */
.search-input-wrap{
  background: color-mix(in srgb, var(--card) 85%, white 15%) !important;
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent) !important;
}

.search-input-wrap input{
  background: transparent !important;
  border: 0 !important;
  color: var(--text) !important;
}

.search-input-wrap input::placeholder{
  color: color-mix(in srgb, var(--text) 55%, transparent) !important;
}

/* =========================================================
   FINAL TEXT CLEANUP
   ========================================================= */
.profile-name,
.entry-title,
.journal-entry-title,
.saved-entry-title{
  color: var(--text) !important;
}

.profile-meta,
.entry-date,
.entry-meta,
.entry-preview,
.journal-entry-date,
.journal-entry-meta,
.journal-entry-preview,
.saved-entry-date,
.saved-entry-meta,
.saved-entry-preview{
  color: var(--muted) !important;
}