:root {
  color-scheme: light;
  --ht-font: "Plus Jakarta Sans", Inter, Manrope, "Segoe UI", system-ui, sans-serif;
  --ht-bg: #f3f6f9;
  --ht-surface: #ffffff;
  --ht-surface-soft: #f5f3ff;
  --ht-surface-raised: #ffffff;
  --ht-primary: #6d4aff;
  --ht-primary-strong: #5736ea;
  --ht-primary-soft: #ede9fe;
  --ht-text: #0f172a;
  --ht-muted: #64748b;
  --ht-border: #e5e7eb;
  --ht-line: rgba(15, 23, 42, .1);
  --ht-shadow: 0 18px 44px rgba(15, 23, 42, .08);
  --ht-shadow-soft: 0 12px 28px rgba(15, 23, 42, .06);
  --ht-radius: 20px;
  --ht-radius-sm: 14px;
  --ht-focus: 0 0 0 .22rem rgba(109, 74, 255, .2);
  --ht-app-container: 1320px;
}

body.theme-dark {
  color-scheme: dark;
  --ht-bg: #08111c;
  --ht-surface: #0d1825;
  --ht-surface-soft: #111f2e;
  --ht-surface-raised: #142335;
  --ht-primary: #7c5cff;
  --ht-primary-strong: #9a83ff;
  --ht-primary-soft: rgba(124, 92, 255, .16);
  --ht-text: #f1f5f9;
  --ht-muted: #94a3b8;
  --ht-border: #243447;
  --ht-line: rgba(148, 163, 184, .2);
  --ht-shadow: 0 20px 54px rgba(0, 0, 0, .34);
  --ht-shadow-soft: 0 12px 32px rgba(0, 0, 0, .26);
  --ht-focus: 0 0 0 .22rem rgba(124, 92, 255, .28);
}

html {
  background: var(--ht-bg);
}

body.hr-body {
  min-height: 100vh;
  background: var(--ht-bg) !important;
  color: var(--ht-text) !important;
  font-family: var(--ht-font);
  letter-spacing: 0;
}

body.hr-body,
button,
input,
select,
textarea {
  font-family: var(--ht-font);
}

body.hr-body a {
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

body.hr-body img,
body.hr-body video,
body.hr-body iframe {
  max-width: 100%;
}

body.hr-body :focus-visible {
  outline: 0;
  box-shadow: var(--ht-focus);
}

.ht-page-band {
  background:
    radial-gradient(circle at 10% 4%, rgba(124, 92, 255, .13), transparent 26%),
    radial-gradient(circle at 92% 0%, rgba(45, 212, 191, .08), transparent 24%),
    var(--ht-bg);
}

body.theme-dark .ht-page-band {
  background:
    radial-gradient(circle at 10% 0%, rgba(124, 92, 255, .18), transparent 28%),
    radial-gradient(circle at 88% 8%, rgba(45, 212, 191, .08), transparent 26%),
    var(--ht-bg);
}

.ht-surface,
.surface-card,
.story-surface,
.story-panel,
.hero-card,
.filter-card,
.wishlist-item-card,
.content-card,
.settings-shell .content-card,
.settings-shell .address-card,
.settings-shell .wallet-row,
.dashboard-shell .surface-card,
.bucket-page .surface-card,
.bucket-page .sidebar-card,
.footprint-page .surface-card,
.footprint-feed-page .surface-card {
  background: var(--ht-surface) !important;
  border: 1px solid var(--ht-border) !important;
  border-radius: var(--ht-radius) !important;
  color: var(--ht-text) !important;
  box-shadow: var(--ht-shadow-soft) !important;
}

.ht-card-hover,
.story-surface,
.wishlist-item-card,
.dashboard-shell .surface-card {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.ht-card-hover:hover,
.story-surface:hover,
.wishlist-item-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ht-shadow) !important;
  border-color: color-mix(in srgb, var(--ht-primary) 30%, var(--ht-border)) !important;
}

.text-muted,
.small.text-muted,
p.text-muted {
  color: var(--ht-muted) !important;
}

.text-dark {
  color: var(--ht-text) !important;
}

.btn {
  border-radius: var(--ht-radius-sm);
  font-weight: 750;
}

.btn-primary,
.btn-dark,
.btn-success,
.btn-hero-primary,
.dark-cta,
.front-search-submit,
.hero-action:not(.secondary) {
  background: var(--ht-primary) !important;
  border-color: var(--ht-primary) !important;
  color: #fff !important;
  box-shadow: 0 12px 26px rgba(109, 74, 255, .22) !important;
}

.btn-primary:hover,
.btn-dark:hover,
.btn-success:hover,
.btn-hero-primary:hover,
.dark-cta:hover,
.front-search-submit:hover,
.hero-action:not(.secondary):hover {
  background: var(--ht-primary-strong) !important;
  border-color: var(--ht-primary-strong) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

.btn-outline-dark,
.btn-outline-secondary,
.btn-outline-primary {
  background: transparent !important;
  border-color: var(--ht-border) !important;
  color: var(--ht-text) !important;
}

.btn-outline-dark:hover,
.btn-outline-secondary:hover,
.btn-outline-primary:hover {
  background: var(--ht-primary-soft) !important;
  border-color: color-mix(in srgb, var(--ht-primary) 42%, var(--ht-border)) !important;
  color: var(--ht-primary-strong) !important;
}

.form-control,
.form-select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="url"],
input[type="number"] {
  background: var(--ht-surface-raised) !important;
  border: 1px solid var(--ht-border) !important;
  border-radius: var(--ht-radius-sm) !important;
  color: var(--ht-text) !important;
  min-height: 44px;
}

.form-control::placeholder,
textarea::placeholder,
input::placeholder {
  color: color-mix(in srgb, var(--ht-muted) 75%, transparent) !important;
}

.badge.text-bg-light,
.badge.bg-white,
.badge-soft,
.meta-pill,
.category-pill,
.hero-badge-soft,
.footprint-badge,
.story-tab,
.tab-pill,
.filter-btn,
.settings-shell .section-tabs .nav-link,
.bucket-page .bucket-ios-tabs .nav-link {
  background: var(--ht-primary-soft) !important;
  border: 1px solid color-mix(in srgb, var(--ht-primary) 20%, var(--ht-border)) !important;
  color: var(--ht-primary-strong) !important;
  border-radius: 999px !important;
}

.story-tab.is-active,
.story-tab:hover,
.tab-pill.active,
.filter-btn.active,
.settings-shell .section-tabs .nav-link.active,
.bucket-page .bucket-ios-tabs .nav-link.active,
.nav-pills .nav-link.active {
  background: var(--ht-primary) !important;
  border-color: var(--ht-primary) !important;
  color: #fff !important;
}

.ht-site-nav.navbar {
  background: color-mix(in srgb, var(--ht-surface) 88%, transparent) !important;
  border-color: var(--ht-border) !important;
  backdrop-filter: blur(18px);
}

.ht-site-nav .navbar-brand,
.ht-site-nav .nav-link,
.ht-site-nav .btn-link,
.ht-site-nav .link-dark,
.ht-site-nav .dropdown-toggle {
  color: var(--ht-text) !important;
}

.ht-site-nav .hr-primary-nav .nav-link {
  color: var(--ht-muted) !important;
  border-radius: 999px;
  font-weight: 750;
}

.ht-site-nav .hr-primary-nav .nav-link:hover,
.ht-site-nav .hr-primary-nav .nav-link.active {
  background: var(--ht-primary-soft) !important;
  color: var(--ht-primary-strong) !important;
}

.ht-theme-menu .dropdown-menu,
.dropdown-menu,
.modal-content,
.hr-market-popover {
  background: var(--ht-surface) !important;
  border: 1px solid var(--ht-border) !important;
  color: var(--ht-text) !important;
  box-shadow: var(--ht-shadow) !important;
}

.ht-theme-option {
  display: flex;
  align-items: center;
  gap: .65rem;
}

.ht-theme-option.is-active {
  color: var(--ht-primary-strong) !important;
  background: var(--ht-primary-soft) !important;
}

.hr-footer {
  background: var(--ht-surface) !important;
  color: var(--ht-text) !important;
  border-color: var(--ht-border) !important;
}

.hr-footer .container {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.hr-footer a,
.hr-footer .link-secondary {
  color: var(--ht-muted) !important;
}

.story-save-btn,
.ht-heart-btn,
[data-wishlist-toggle].story-save-btn {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, .72) !important;
  background: rgba(255, 255, 255, .94) !important;
  color: #475569 !important;
  box-shadow: 0 14px 30px rgba(15, 23, 42, .16) !important;
}

.story-save-btn:hover,
.ht-heart-btn:hover,
[data-wishlist-toggle].story-save-btn:hover,
.story-save-btn.is-active,
.story-save-btn[data-wishlisted="1"],
.ht-heart-btn.is-active,
.ht-heart-btn[data-wishlisted="1"] {
  color: #e11d48 !important;
  border-color: rgba(225, 29, 72, .24) !important;
}

.story-reading-btn.is-active,
.story-reading-btn[data-wishlisted="1"] {
  color: #e11d48 !important;
}

.ht-dashboard-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.account-sidebar-shell .sidebar-col,
.account-sidebar-shell .sidebar-footprint {
  background: var(--ht-surface) !important;
  border-color: var(--ht-border) !important;
  border-radius: var(--ht-radius) !important;
  color: var(--ht-text) !important;
  box-shadow: var(--ht-shadow-soft) !important;
}

.account-sidebar-shell .nav-link {
  color: var(--ht-muted) !important;
  min-height: 44px;
}

.account-sidebar-shell .nav-link:hover {
  background: var(--ht-primary-soft) !important;
  color: var(--ht-primary-strong) !important;
}

.account-sidebar-shell .nav-link.active {
  background: var(--ht-primary) !important;
  color: #fff !important;
}

.bucket-page,
.footprint-page,
.footprint-feed-page,
.wishlist-shell,
.shop-page,
.tour-page,
.passport-page,
.history-page {
  color: var(--ht-text);
}

.bucket-page.container-fluid,
.footprint-page.container-fluid,
.footprint-feed-page.container-fluid,
.passport-page.container,
.history-page.container,
.wishlist-shell.container,
.shop-page.container,
.tour-page.container {
  box-sizing: border-box;
  width: min(var(--ht-app-container), calc(100vw - 24px)) !important;
  max-width: var(--ht-app-container) !important;
  margin-inline: auto !important;
  padding-inline: 12px !important;
}

.bucket-page .ht-app-content,
.footprint-page .ht-app-content,
.footprint-feed-page .ht-app-content,
.wishlist-shell .col-lg-9,
.dashboard-shell .col-lg-9 {
  padding-inline: clamp(0px, 1vw, 10px);
}

.bucket-page .bucket-main-layout,
.footprint-feed-page .row.g-4.align-items-start,
.history-page .row.g-4.align-items-start,
.passport-page .row.g-4.align-items-start {
  gap: 18px;
}

.bucket-page .planned-dream-card,
.bucket-page .curve-list,
.bucket-page .curve-card,
.bucket-page .progress-stat-card,
.bucket-page .planned-stack-mini,
.footprint-page .country-card,
.footprint-page .stat-small,
.footprint-page .stat-big,
.footprint-page .footprint-actions-card,
.footprint-feed-page .feed-row,
.footprint-feed-page .tool-link,
.history-page .stat-pill,
.history-page .history-card,
.passport-page .stat-box,
.shop-page .product-card,
.tour-page .deal-card {
  background: var(--ht-surface-raised) !important;
  border-color: var(--ht-border) !important;
  color: var(--ht-text) !important;
  box-shadow: none !important;
}

.bucket-page .planned-dream-card,
.footprint-feed-page .feed-row,
.history-page .history-card {
  border-radius: 16px !important;
}

.bucket-page .bucket-chip-link,
.bucket-page .progress-stat-icon,
.footprint-page .meta-pill,
.footprint-feed-page .meta-pill,
.shop-page .pill-button,
.tour-page .filter-chip,
.wishlist-shell .filter-btn {
  background: var(--ht-primary-soft) !important;
  border: 1px solid color-mix(in srgb, var(--ht-primary) 20%, var(--ht-border)) !important;
  color: var(--ht-primary-strong) !important;
}

.bucket-page .bucket-sidebar,
.footprint-page .sidebar-stats,
.footprint-feed-page .feed-sidebar,
.history-page .sidebar-stack,
.passport-page .passport-sidebar {
  top: 86px !important;
}

body.theme-dark .ht-site-nav.navbar {
  background: rgba(8, 17, 28, .88) !important;
}

body.theme-dark .hr-footer .container {
  background: transparent !important;
}

body.theme-dark .account-sidebar-shell .sidebar-col,
body.theme-dark .account-sidebar-shell .sidebar-footprint {
  background: linear-gradient(180deg, #0b1522, #08111c) !important;
}

body.theme-dark .bucket-page .hero-form-wrapper,
body.theme-dark .bucket-page .bucket-ios-tabs,
body.theme-dark .bucket-page .bucket-empty-state,
body.theme-dark .bucket-page .dream-photo-preview,
body.theme-dark .footprint-page #worldMapContainer,
body.theme-dark .passport-page #worldMapContainer,
body.theme-dark .footprint-feed-page .composer-input,
body.theme-dark .history-page .passport-mini,
body.theme-dark .shop-page .hero-panel.digital,
body.theme-dark .shop-page .hero-panel.physical,
body.theme-dark .tour-page .hero-shell,
body.theme-dark .tour-page .featured-shell {
  background: var(--ht-surface-soft) !important;
  border-color: var(--ht-border) !important;
  color: var(--ht-text) !important;
}

body.theme-dark .footprint-page #worldMapContainer path,
body.theme-dark .passport-page #worldMapContainer path,
body.theme-dark .footprint-page #heroMap path {
  fill: #273748;
  stroke: #34465b;
}

body.theme-dark .bucket-page .dream-photo-card,
body.theme-dark .footprint-feed-page .thumb,
body.theme-dark .history-page .history-photo,
body.theme-dark .passport-page .map-shell {
  border-color: var(--ht-border) !important;
}

body.theme-dark .modal-body-shell,
body.theme-dark .footprint-modal .upload-panel,
body.theme-dark .footprint-modal .metric-box,
body.theme-dark .footprint-modal .notes-shell,
body.theme-dark .bg-light,
body.theme-dark .bg-light-subtle,
body.theme-dark .bg-white {
  background: var(--ht-surface) !important;
  color: var(--ht-text) !important;
  border-color: var(--ht-border) !important;
}

body.theme-dark .btn-close {
  filter: invert(1) grayscale(100%);
}

body.theme-dark .shop-page .product-card > a,
body.theme-dark .tour-page .deal-media,
body.theme-dark .history-page .history-flag {
  background: #111f2e !important;
}

.ht-mobile-bottom-nav {
  display: none;
}

.dashboard-shell .hero,
.stories-hero,
.footprint-feed-page .feed-hero,
.wishlist-shell .hero-card,
.settings-shell .hero-card {
  background:
    radial-gradient(circle at 86% 12%, rgba(124, 92, 255, .16), transparent 28%),
    linear-gradient(135deg, var(--ht-surface) 0%, var(--ht-surface-soft) 100%) !important;
  border: 1px solid var(--ht-border) !important;
  color: var(--ht-text) !important;
}

.dashboard-shell .metric-value,
.stat-number,
.compact-social-value,
.settings-shell .wallet-stat .value {
  color: var(--ht-text) !important;
}

.dashboard-shell .metric-label,
.stat-label,
.compact-social-label {
  color: var(--ht-muted) !important;
}

.ht-progress-ring {
  --progress: 0;
  width: 118px;
  aspect-ratio: 1;
  border-radius: 999px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background:
    radial-gradient(circle, var(--ht-surface) 58%, transparent 59%),
    conic-gradient(var(--ht-primary) calc(var(--progress) * 1%), var(--ht-border) 0);
  box-shadow: inset 0 0 0 1px var(--ht-border);
}

.ht-progress-ring span {
  color: var(--ht-text);
  font-size: 1.55rem;
  font-weight: 900;
}

.ht-mini-map {
  min-height: 178px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  border-radius: var(--ht-radius);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--ht-primary) 14%, transparent), transparent),
    var(--ht-surface-soft);
  border: 1px solid var(--ht-border);
  color: var(--ht-text);
}

.ht-mini-map i {
  font-size: clamp(3rem, 9vw, 5.4rem);
  color: var(--ht-primary);
}

.ht-mini-map strong,
.ht-mini-map span {
  display: block;
}

.ht-mini-map span {
  color: var(--ht-muted);
  max-width: 220px;
}

.story-content {
  max-width: 820px;
}

.story-content iframe,
.story-panel iframe {
  background: #000;
}

.hr-auth-modal .modal-content {
  background: var(--ht-surface) !important;
  color: var(--ht-text) !important;
  border-radius: 24px !important;
}

.hr-auth-switch {
  background: var(--ht-surface-soft) !important;
  border: 1px solid var(--ht-border) !important;
}

.hr-auth-switch__item {
  color: var(--ht-muted) !important;
}

.hr-auth-switch__item.is-active {
  background: var(--ht-primary) !important;
  color: #fff !important;
}

.hr-auth-social__btn {
  background: var(--ht-surface-raised) !important;
  border-color: var(--ht-border) !important;
  color: var(--ht-text) !important;
}

.skeleton,
.story-skeleton {
  background: linear-gradient(90deg, var(--ht-surface-soft) 25%, color-mix(in srgb, var(--ht-surface-soft) 70%, var(--ht-border)) 37%, var(--ht-surface-soft) 63%) !important;
  background-size: 400% 100% !important;
}

.ht-sticky-sidebar {
  position: sticky !important;
  top: 92px;
  align-self: start;
  max-height: calc(100vh - 108px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.ht-sticky-sidebar::-webkit-scrollbar {
  display: none;
}

@media (max-width: 991.98px) {
  .ht-sticky-sidebar {
    position: static !important;
    max-height: none;
    overflow: visible;
  }

  .ht-dashboard-layout {
    display: block;
  }

  .account-sidebar-shell {
    display: none;
  }

  .hr-main {
    padding-bottom: 78px;
  }

  .ht-mobile-bottom-nav {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 1040;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    padding: 8px;
    background: color-mix(in srgb, var(--ht-surface) 92%, transparent);
    border: 1px solid var(--ht-border);
    border-radius: 22px;
    box-shadow: var(--ht-shadow);
    backdrop-filter: blur(18px);
  }

  .ht-mobile-bottom-nav a,
  .ht-mobile-bottom-nav button {
    min-height: 48px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: var(--ht-muted);
    display: grid;
    place-items: center;
    gap: 2px;
    text-decoration: none;
    font-size: .72rem;
    font-weight: 750;
  }

  .ht-mobile-bottom-nav i {
    font-size: 1.08rem;
  }

  .ht-mobile-bottom-nav .active {
    background: var(--ht-primary-soft);
    color: var(--ht-primary-strong);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}