/* Theme Variables */
:root {
  --bg: #111113; --bg2: #1c1c1e; --bg3: #2c2c2e; --border: rgba(255,255,255,.10);
  --text: #f5f5f7; --muted: #98989f; --muted2: #6e6e73;
  --card-hover: #FF385C; --card-sel: #FF385C; --card-sel-bg: rgba(255,56,92,.10);
  --popup-bg: rgba(28,28,30,.85); --popup-text: #f5f5f7;
  --bar-bg: rgba(255,255,255,.10); --accent: #FF385C;
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.08);
  --shadow-md: 0 2px 12px rgba(0,0,0,.15);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.2);
  --shadow-xl: 0 16px 48px rgba(0,0,0,.3);
  --ease: cubic-bezier(.2,.8,.2,1);
  --duration: .25s;
}
.light {
  --bg: #ffffff; --bg2: #ffffff; --bg3: #f7f7f7; --border: #ebebeb;
  --text: #222222; --muted: #717171; --muted2: #b0b0b0;
  --card-hover: #222222; --card-sel: #222222; --card-sel-bg: rgba(0,0,0,.04);
  --popup-bg: #ffffff; --popup-text: #222222;
  --bar-bg: #f0f0f0; --accent: #222222;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 2px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 6px 16px rgba(0,0,0,.12);
  --shadow-xl: 0 6px 20px rgba(0,0,0,.15);
}

/* Base */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif;
  background: var(--bg); color: var(--text);
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
  display: flex; flex-direction: column; height: 100vh;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

/* Ad Banner */
.sidebar-ad-placeholder {
  background: var(--bg3); border: 1px dashed var(--border);
  border-radius: var(--radius-sm); padding: 12px 16px; margin-top: 8px;
  font-size: .65rem; color: var(--muted2); text-align: center;
}
.sidebar-ad-placeholder a { color: var(--accent); text-decoration: none; }
.sidebar-ad-placeholder a:hover { text-decoration: underline; }

#app { display: flex; flex: 1; min-height: 0; }

/* Left Sidebar */
#sidebar {
  width: 370px; min-width: 370px; background: var(--bg2);
  display: flex; flex-direction: column;
  box-shadow: 1px 0 0 var(--border);
  overflow-y: auto; transition: background var(--duration) var(--ease);
}

/* Top Bar */
#top-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: var(--bg2);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 0 var(--border); flex-shrink: 0;
  gap: 12px; transition: background var(--duration) var(--ease);
  position: relative; z-index: 1001;
}
.top-bar-left {
  display: flex; align-items: center; gap: 12px; min-width: 0;
}
.top-bar-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.top-bar-text { min-width: 0; }
.top-bar-text h1 {
  font-size: 1.1rem; font-weight: 700; white-space: nowrap;
  color: var(--text);
}
.top-bar-text p {
  font-size: .75rem; color: var(--muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.top-bar-right {
  display: flex; gap: 8px; align-items: center; flex-shrink: 0;
  position: relative;
}
.top-bar-badge {
  font-size: .65rem; font-weight: 600; color: var(--muted);
  background: var(--bg3); border-radius: var(--radius-lg);
  padding: 4px 12px; white-space: nowrap;
}
.top-bar-badge:empty { display: none; }
/* Top-bar buttons (theme + lang) — always visible */
.topbar-btn {
  display: inline-flex;
  background: var(--bg3); border: none;
  border-radius: var(--radius-sm); padding: 6px 8px; cursor: pointer;
  color: var(--text); font-size: .75rem;
  transition: all var(--duration) var(--ease);
  align-items: center; justify-content: center;
}
.topbar-btn:hover { background: var(--bar-bg); }
.topbar-lang-btn { font-weight: 700; font-size: .7rem; padding: 6px 10px; }

/* Top-bar auth button (always visible when not logged in) */
.topbar-auth-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--accent); color: #fff; border: none;
  border-radius: var(--radius-lg); padding: 6px 14px;
  font-size: .75rem; font-weight: 600; cursor: pointer;
  transition: all var(--duration) var(--ease);
  white-space: nowrap; flex-shrink: 0;
}
.topbar-auth-btn:hover { filter: brightness(1.15); }
.topbar-auth-btn svg { flex-shrink: 0; }
/* Logged-in state */
.topbar-auth-btn.logged-in {
  background: rgba(255,105,135,.12); border: 1px solid rgba(255,105,135,.25);
  color: var(--text); padding: 4px 10px 4px 4px; position: relative;
}
.topbar-auth-btn.logged-in:hover { background: rgba(255,105,135,.2); filter: none; }
.topbar-auth-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(255,105,135,.25), rgba(255,80,120,.15));
  color: #ff6987; font-size: .75rem; font-weight: 700;
}
.topbar-auth-email {
  font-size: .7rem; font-weight: 600; max-width: 120px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 960px) {
  .topbar-auth-email { max-width: 80px; }
}
/* Topbar auth dropdown menu */
.topbar-auth-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  padding: 12px 16px; min-width: 200px; z-index: 1100;
  animation: settingsFadeIn .2s var(--ease);
}
.topbar-auth-menu-email {
  font-size: .8rem; font-weight: 500; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar-auth-menu-synced {
  font-size: .65rem; color: #34C759; font-weight: 500; margin-bottom: 10px;
}
.topbar-auth-menu-logout {
  display: block; width: 100%; padding: 6px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: transparent; color: var(--muted); font-size: .75rem;
  font-weight: 500; cursor: pointer; transition: background var(--duration) var(--ease);
}
.topbar-auth-menu-logout:hover { background: var(--border); }

/* Mobile profile panel (bottom-sheet) */
.profile-panel-content { padding: 8px 0; }
.profile-panel-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
.profile-panel-avatar {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(255,105,135,.25), rgba(255,80,120,.15));
  color: #ff6987; font-size: 1rem; font-weight: 700;
}
.profile-panel-info { min-width: 0; }
.profile-panel-email {
  font-size: .85rem; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.profile-panel-synced {
  font-size: .7rem; color: #34C759; font-weight: 500;
}
.profile-panel-logout {
  display: block; width: 100%; padding: 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: transparent; color: var(--muted); font-size: .8rem;
  font-weight: 500; cursor: pointer; transition: background var(--duration) var(--ease);
}
.profile-panel-logout:hover { background: var(--border); }

/* Top-bar profile button */
.top-bar-profile {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,105,135,.12); border: 1px solid rgba(255,105,135,.25);
  border-radius: var(--radius-lg); padding: 5px 12px 5px 5px;
  cursor: pointer; color: var(--text);
  transition: all var(--duration) var(--ease);
}
.top-bar-profile:hover { background: rgba(255,105,135,.2); }
.top-bar-profile-avatar {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,105,135,.25), rgba(255,80,120,.15));
  color: #ff6987; flex-shrink: 0;
  font-size: .8rem; line-height: 1;
}
.light .top-bar-profile-avatar {
  background: linear-gradient(135deg, #ffe0e6, #ffd1db);
}
.top-bar-profile-name {
  font-size: .75rem; font-weight: 600; white-space: nowrap;
}
.top-bar-profile-chevron {
  flex-shrink: 0; color: var(--muted2);
  transition: transform var(--duration) var(--ease);
}
/* Top-bar profile wrapper (for popover positioning) */
.top-bar-profile-wrap { position: relative; }

/* Profile popover (desktop only — contains scoring controls) */
.profile-popover {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 340px; max-height: calc(100vh - 100px);
  overflow-y: auto;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 0;
  z-index: 1000;
  opacity: 0; transform: translateY(-4px);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
  pointer-events: none;
  scrollbar-width: thin;
  scrollbar-color: var(--muted2) transparent;
}
.profile-popover.open {
  opacity: 1; transform: translateY(0);
  pointer-events: auto;
}
.light .profile-popover {
  background: #fff; box-shadow: 0 4px 24px rgba(0,0,0,.12);
}
.profile-popover-body { padding: 0; }
.profile-popover-body .metric-section { padding: 12px; box-shadow: none; }
.profile-popover-body .filter-radio { padding: 6px 8px; }
.profile-popover-body .filter-radio-icon { width: 30px; height: 30px; font-size: .9rem; border-radius: 8px; }
.profile-popover-body .filter-radio-check { width: 18px; height: 18px; }
.profile-popover-body .filter-radio-check::after { top: 2px; left: 2px; width: 10px; height: 10px; }
.profile-popover-body .filter-check-text > span { font-size: .8rem; }
.profile-popover-body .filter-check-text small { font-size: .6rem; }
.profile-popover-body .customize-toggle { font-size: .7rem; padding: 6px 0; }
.profile-popover-body .ideal-slider-section { gap: 0; margin-bottom: 8px; }
.profile-popover-body .metric-card { padding: 10px 0; }
.profile-popover-body .ideal-check-label { font-size: .7rem; }
.profile-popover-body .ideal-val { font-size: .7rem; width: 48px; }
.profile-popover-body .imp-pill { font-size: .5rem; padding: 2px 0; }
.profile-popover-body .metric-toggle-track { width: 24px; height: 14px; border-radius: 7px; }
.profile-popover-body .metric-toggle-thumb { width: 10px; height: 10px; }
.profile-popover-body .metric-toggle.active .metric-toggle-thumb { transform: translateX(10px); }
.profile-popover-open .top-bar-profile { background: var(--bar-bg); }
.profile-popover-open .top-bar-profile-chevron { transform: rotate(180deg); }

/* Top-bar profile chips — hidden, replaced by cleaner profile indicator */
.top-bar-profile-chips { display: none; }
.top-bar-profile-chip { display: none; }

/* Profile Bar (mobile summary below header) */
.profile-bar {
  display: none; /* hidden on desktop, shown on mobile */
  align-items: center; gap: 8px;
  padding: 6px 12px;
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
  font-size: .7rem; color: var(--muted);
  cursor: pointer;
  transition: background var(--duration) var(--ease);
}
.profile-bar:hover { background: var(--bar-bg); }
.profile-bar:empty { display: none !important; }
.profile-bar-info {
  display: flex; align-items: center; gap: 8px;
  min-width: 0; flex: 1;
}
.profile-bar-avatar {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,56,92,.2), rgba(255,56,92,.15));
  color: var(--accent); flex-shrink: 0;
}
.light .profile-bar-avatar { background: linear-gradient(135deg, #e8f0fe, #ede8ff); }
.profile-bar-name {
  font-weight: 700; font-size: .75rem; color: var(--text);
  white-space: nowrap;
}
.profile-bar-chips {
  display: flex; align-items: center; gap: 4px;
}
.profile-bar-chip {
  display: inline-flex; align-items: center;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 6px; padding: 1px 6px;
  font-size: .6rem; font-weight: 600; color: var(--muted);
  white-space: nowrap;
}
.profile-bar-change {
  font-size: .65rem; font-weight: 600; color: var(--accent);
  white-space: nowrap; flex-shrink: 0;
  background: none; border: none; cursor: pointer;
}

/* Scoring highlight animation (when scrolling to profile from top-bar) */
@keyframes scoring-highlight {
  0%   { background: rgba(255,56,92,.18); box-shadow: inset 0 0 0 2px var(--accent), 0 0 20px rgba(255,56,92,.15); }
  40%  { background: rgba(255,56,92,.10); box-shadow: inset 0 0 0 2px rgba(255,56,92,.5), 0 0 10px rgba(255,56,92,.08); }
  100% { background: transparent; box-shadow: inset 0 0 0 2px transparent, 0 0 0 transparent; }
}
#sidebar-scoring.highlight {
  animation: scoring-highlight 2s var(--ease) forwards;
  border-radius: var(--radius-md);
}

/* Desktop: sidebar-scoring visible as first section */
@media (min-width: 961px) {
  #sidebar-scoring { display: block !important; }
  .top-bar-profile-wrap { display: none !important; }
}
/* Mobile: sidebar-scoring hidden (metric-section moves to mobile panel) */
@media (max-width: 960px) {
  #sidebar-scoring { display: none !important; }
}

/* View Toggle (map/list) */
.view-toggle {
  display: none;
  flex-shrink: 0;
  background: var(--bg2);
  padding: 4px 8px;
  gap: 4px;
}
.view-toggle-btn {
  flex: 1; padding: 8px 0;
  border: none; border-radius: var(--radius-sm);
  background: transparent; color: var(--muted2);
  font-size: .85rem; font-weight: 600;
  cursor: pointer; transition: all var(--duration) var(--ease);
  text-align: center;
}
.view-toggle-btn:hover { color: var(--text); background: var(--bg3); }
.view-toggle-btn.active {
  background: var(--accent); color: #fff;
}

.sidebar-footer {
  margin-top: auto; padding: 12px 16px;
  box-shadow: 0 -1px 0 var(--border);
  font-size: .75rem; color: var(--muted2);
  display: flex; flex-direction: column; gap: 10px;
}
.sidebar-footer-credits {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: .65rem;
}
.footer-author {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--muted); text-decoration: none; font-weight: 600;
  font-size: .65rem;
  transition: color var(--duration) var(--ease);
}
.footer-author:hover { color: var(--accent); }
.footer-sep { color: var(--muted2); opacity: .3; }
.footer-claude {
  color: var(--muted2); display: inline-flex; align-items: center; gap: 4px;
  font-size: .65rem;
}

/* Sidebar Section Headings (unified) */
.sidebar-heading {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg3);
}
.sidebar-heading-icon {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px;
  background: var(--bar-bg); color: var(--text);
  flex-shrink: 0;
}
.sidebar-heading-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sidebar-heading-title {
  font-size: .9rem; font-weight: 700; color: var(--text);
  line-height: 1.2;
}
.sidebar-heading-sub {
  font-size: .7rem; color: var(--muted); line-height: 1.3;
}

/* Country Select */
.country-section { padding: 16px; box-shadow: 0 1px 0 var(--border); }
.country-section > label {
  font-size: .65rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); display: block; margin-bottom: 8px;
  font-weight: 600;
}
.country-combo { position: relative; margin-bottom: 12px; }
.country-input {
  width: 100%; padding: 10px 32px 10px 12px; border-radius: var(--radius-sm);
  border: none; background: var(--bg3);
  color: var(--text); font-size: .85rem; outline: none;
  transition: box-shadow var(--duration) var(--ease);
}
.country-input:focus { box-shadow: 0 0 0 3px rgba(255,56,92,.3); }
.country-input::placeholder { color: var(--muted2); }
.country-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--muted); font-size: 1rem;
  cursor: pointer; padding: 2px 4px; line-height: 1;
  border-radius: 50%; transition: color var(--duration) var(--ease);
}
.country-clear:hover { color: var(--text); }
.country-dropdown {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--bg2); backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border-radius: var(--radius-md); max-height: 240px; overflow-y: auto;
  z-index: 100; scrollbar-width: thin;
  scrollbar-color: var(--muted2) transparent;
  box-shadow: var(--shadow-lg);
}
.country-dropdown.open { display: block; }
.country-option-group {
  padding: 8px 12px 4px; font-size: .65rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); box-shadow: 0 -1px 0 var(--border);
}
.country-option-group:first-child { box-shadow: none; }
.country-option {
  padding: 8px 12px; font-size: .85rem; cursor: pointer;
  transition: background var(--duration) var(--ease);
  display: flex; align-items: center; justify-content: space-between;
  border-radius: var(--radius-sm); margin: 2px 4px;
}
.country-option:hover,
.country-option.highlighted {
  background: var(--accent); color: #fff;
}
.country-option:hover .option-count,
.country-option:hover .option-sub { color: rgba(255,255,255,.7); }
.option-count { font-size: .65rem; color: var(--muted2); font-weight: 500; }
.option-sub { font-size: .65rem; color: var(--muted2); font-weight: 400; }
.country-option-empty {
  padding: 8px 12px; font-size: .75rem; color: var(--muted2); font-style: italic;
}

/* Month Slider */
.slider-section { padding: 16px; box-shadow: 0 1px 0 var(--border); }
.slider-section label {
  font-size: .65rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); font-weight: 600;
}
.month-header {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 8px;
}
.month-value { font-size: .85rem; font-weight: 600; color: var(--text); }
.month-ticks {
  display: flex; justify-content: space-between;
  font-size: .65rem; color: var(--muted2); margin-top: 4px;
}

/* Dual-handle range slider */
.dual-range { position: relative; height: 24px; }
.dual-range-track {
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  height: 4px; background: var(--bg3); border-radius: 2px;
}
.dual-range-fill {
  position: absolute; top: 50%; transform: translateY(-50%);
  height: 4px; background: var(--accent); border-radius: 2px; opacity: .5;
}
.dual-range input[type="range"] {
  position: absolute; width: 100%; top: 0; margin: 0;
  height: 24px; background: transparent;
  pointer-events: none;
  -webkit-appearance: none; appearance: none;
}
.dual-range input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; background: transparent;
}
.dual-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  pointer-events: auto; cursor: pointer;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: none;
  box-shadow: 0 1px 4px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.1);
  margin-top: -8px; position: relative; z-index: 2;
}
.dual-range input[type="range"]::-moz-range-track {
  height: 4px; background: transparent; border: none;
}
.dual-range input[type="range"]::-moz-range-thumb {
  pointer-events: auto; cursor: pointer;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: none;
  box-shadow: 0 1px 4px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.1);
}
.dual-range input[type="range"]:disabled { opacity: .35; }
.dual-range input[type="range"]:disabled::-webkit-slider-thumb { cursor: not-allowed; }
.dual-range input[type="range"]:disabled::-moz-range-thumb { cursor: not-allowed; }
.dual-range.single-mode #month-slider-end,
.dual-range.single-mode .dual-range-fill { display: none; }

/* Month mode toggle (single / range) */
.month-mode-toggle {
  display: inline-flex; background: var(--bg3); border-radius: 8px;
  padding: 3px; gap: 2px; border: 1px solid var(--border);
}
.month-mode-btn {
  padding: 4px 10px; border-radius: 6px; border: none;
  background: transparent; color: var(--muted);
  font-size: .65rem; font-weight: 600; cursor: pointer;
  transition: all var(--duration) var(--ease);
}
.month-mode-btn.active {
  background: var(--bg2); color: var(--text);
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.month-header .month-mode-toggle { flex-shrink: 0; }

/* Season Badge */
.season-badge {
  display: inline-block; padding: 4px 10px; border-radius: var(--radius-sm);
  font-size: .65rem; font-weight: 600; margin-top: 8px;
}
.season-cool { background: rgba(255,56,92,.12); color: #FF385C; }
.season-hot  { background: rgba(255,159,10,.15); color: #ff9f0a; }
.season-rainy { background: rgba(94,92,230,.15); color: #bf5af2; }
.light .season-cool  { background: #f0f7ff; color: #0066cc; }
.light .season-hot   { background: #fff5eb; color: #cc5500; }
.light .season-rainy { background: #f3f0ff; color: #6644cc; }

/* Filter Checks */
.filter-section { padding: 16px; box-shadow: 0 1px 0 var(--border); }
.filter-section h3 {
  font-size: .65rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); margin-bottom: 8px;
  font-weight: 600;
}
.filter-check-list { display: flex; flex-direction: column; gap: 2px; }
.filter-check {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; border-radius: var(--radius-sm);
  cursor: pointer; transition: background var(--duration) var(--ease);
  border: none;
}
.filter-check:hover { background: var(--bg3); }
.filter-check-box {
  width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0;
  border: 2px solid var(--muted2);
  transition: all var(--duration) var(--ease);
  display: flex; align-items: center; justify-content: center;
}
.filter-check-box::after {
  content: '';
  width: 14px; height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 0; transition: opacity var(--duration) var(--ease);
}
.filter-check.active .filter-check-box {
  background: var(--accent); border-color: var(--accent);
}
.filter-check.active .filter-check-box::after { opacity: 1; }
.filter-check-text { display: flex; flex-direction: column; gap: 2px; }
.filter-check-text > span { font-size: .85rem; font-weight: 500; color: var(--text); }
.filter-check-text small { font-size: .65rem; color: var(--muted); line-height: 1.3; }
.filter-check.active .filter-check-text > span {
  color: var(--accent); font-weight: 600;
}
.filter-check-count {
  margin-left: auto; font-size: .75rem; color: var(--muted2);
  font-weight: 400; flex-shrink: 0;
}

/* Radio-style (single-select) */
.filter-radio {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: var(--radius-sm);
  cursor: pointer; transition: background var(--duration) var(--ease);
  border: none;
}
.filter-radio:hover { background: var(--bg3); }
/* Emoji icon (replaces old radio dot) */
.filter-radio-icon {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  background: var(--bg3); border: 1px solid var(--border);
  transition: all var(--duration) var(--ease);
}
.filter-radio.active .filter-radio-icon {
  background: rgba(255,56,92,.12); border-color: rgba(255,56,92,.25);
}
.filter-radio .filter-check-text { flex: 1; min-width: 0; }
/* Radio check circle (right side) */
.filter-radio-check {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--muted2);
  transition: all var(--duration) var(--ease);
  position: relative;
  margin-left: auto;
}
.filter-radio-check::after {
  content: ''; position: absolute;
  top: 3px; left: 3px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--accent);
  opacity: 0; transition: all var(--duration) var(--ease); transform: scale(.4);
}
.filter-radio.active .filter-radio-check { border-color: var(--accent); }
.filter-radio.active .filter-radio-check::after { opacity: 1; transform: scale(1); }
.filter-radio.active .filter-check-text > span {
  color: var(--accent); font-weight: 600;
}
/* Legacy: keep old dot style working if any remain */
.filter-radio-dot {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--muted2);
  transition: all var(--duration) var(--ease);
  position: relative;
}
.filter-radio-dot::after {
  content: ''; position: absolute;
  top: 3px; left: 3px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--accent);
  opacity: 0; transition: all var(--duration) var(--ease); transform: scale(.4);
}
.filter-radio.active .filter-radio-dot { border-color: var(--accent); }
.filter-radio.active .filter-radio-dot::after { opacity: 1; transform: scale(1); }

/* Customize toggle */
.customize-toggle {
  display: flex; align-items: center; gap: 4px;
  background: none; border: none; cursor: pointer;
  font-size: .75rem; font-weight: 500; color: var(--muted);
  padding: 8px 0; margin-top: 4px;
  transition: color var(--duration) var(--ease);
}
.customize-toggle:hover { color: var(--text); }
.customize-chevron { transition: transform var(--duration) var(--ease); }
.customize-toggle.open .customize-chevron { transform: rotate(180deg); }
.customize-panel { margin-top: 4px; }

/* Metric Sliders */
.metric-section { padding: 16px; box-shadow: 0 1px 0 var(--border); }
.metric-section h3 {
  font-size: .65rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); margin-bottom: 8px;
  font-weight: 600;
}
.ideal-slider-section { display: flex; flex-direction: column; gap: 0; margin-bottom: 12px; }
.ideal-slider-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px;
  transition: opacity var(--duration) var(--ease);
}
.ideal-slider-row .ideal-range { order: 1; }
.ideal-slider-row .ideal-hint { order: 2; }
.ideal-slider-row.disabled { opacity: .3; }
.ideal-slider-row.disabled .ideal-range { pointer-events: none; }
/* Metric header — name + toggle + value/hint */
.metric-header {
  display: flex; align-items: center; gap: 8px;
}
.metric-header-right {
  margin-left: auto; text-align: right; flex-shrink: 0;
}
.ideal-check-label {
  font-size: .75rem; font-weight: 600; color: var(--text);
}
/* Switch toggle */
.metric-toggle {
  cursor: pointer; display: flex; align-items: center; flex-shrink: 0;
}
.metric-toggle-track {
  width: 28px; height: 16px; border-radius: 8px;
  background: var(--muted2); position: relative;
  transition: background .2s var(--ease);
}
.metric-toggle.active .metric-toggle-track {
  background: var(--accent);
}
.metric-toggle-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff; position: absolute; top: 2px; left: 2px;
  transition: transform .2s var(--ease);
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.metric-toggle.active .metric-toggle-thumb {
  transform: translateX(12px);
}
/* Value in header right column */
.ideal-val {
  font-size: .75rem; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums;
}
/* Hint below value — right-aligned */
.ideal-hint {
  font-size: .6rem; color: var(--muted2);
  margin-top: 1px; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Slider on its own full-width line */
.ideal-range {
  width: 100%; flex: 0 0 100%; height: 3px; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background: rgba(255,255,255,.18); border-radius: 2px; outline: none;
  margin: 8px 0 0;
}
.light .ideal-range { background: #e0e0e0; }
.ideal-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 1.5px solid var(--accent);
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
  cursor: pointer;
}
.ideal-range::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 1.5px solid var(--accent);
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
  cursor: pointer;
}

/* Metric cards — light container */
.metric-card {
  padding: 14px 0;
  transition: opacity var(--duration) var(--ease);
  border-bottom: 1px solid var(--border);
}
.metric-card:last-child { border-bottom: none; }
.metric-card[data-metric] .ideal-slider-row { padding: 0; }
.metric-card.disabled { opacity: .35; }
.metric-card.disabled .importance-row { pointer-events: none; }

/* Importance pills inline after slider */
.importance-row {
  display: flex; align-items: center; gap: 6px;
  margin-top: 6px;
}
.importance-label {
  font-size: .5rem; color: var(--muted2);
  letter-spacing: .02em; flex-shrink: 0;
  writing-mode: horizontal-tb;
}
.importance-pills {
  display: flex; gap: 4px; flex: 1;
}
.imp-pill {
  flex: 1; padding: 3px 0;
  font-size: .55rem; font-weight: 500; letter-spacing: .02em;
  background: transparent; border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px; color: var(--muted2);
  cursor: pointer; transition: all .15s var(--ease);
  text-align: center; line-height: 1.3;
}
.light .imp-pill { border-color: rgba(0,0,0,.1); }
.imp-pill:hover { border-color: rgba(255,255,255,.25); color: var(--text); }
.light .imp-pill:hover { border-color: rgba(0,0,0,.2); }
.imp-pill.active {
  background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25);
  color: var(--text);
}
.light .imp-pill.active {
  background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.18);
  color: #333;
}

.metric-tune { margin-top: 4px; }
.weight-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px; transition: opacity var(--duration) var(--ease);
}
.weight-hint {
  font-size: .65rem; color: var(--muted2); line-height: 1.4; margin: 0 0 8px;
}
.weight-row.disabled { opacity: .25; pointer-events: none; }
.weight-label {
  font-size: .75rem; font-weight: 500; color: var(--muted);
  width: 40px; flex-shrink: 0;
}
.weight-slider {
  flex: 1; accent-color: var(--accent); cursor: pointer; height: 4px;
  appearance: none; -webkit-appearance: none;
  background: var(--bg3); border-radius: 2px; outline: none;
}
.weight-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: none;
  box-shadow: 0 1px 4px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.1);
  cursor: pointer;
}
.weight-slider::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: none;
  box-shadow: 0 1px 4px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.1);
  cursor: pointer;
}
.weight-value {
  font-size: .75rem; font-weight: 500; color: var(--muted);
  width: 34px; text-align: right; flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.metric-normalized {
  font-size: .65rem; color: var(--muted2); margin-top: 4px; min-height: 14px;
}
/* Map score labels */
.map-score-label {
  background: none; border: none;
  font-weight: 800;
  display: flex !important; align-items: center; justify-content: center;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
  color: #fff; pointer-events: none;
  white-space: nowrap; line-height: 1;
}

/* Heart marker for favorited cities */
.map-heart-marker {
  background: none !important; border: none !important;
  cursor: pointer;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.4));
}
.map-heart-marker svg { display: block; overflow: visible; }

/* SVG Icon Utilities */
.metric-icon, .ui-icon { display: inline-flex; vertical-align: -2px; flex-shrink: 0; }
.cost-label { font-weight: 700; letter-spacing: .02em; }
.type-badge {
  display: inline-block; padding: 2px 8px; border-radius: var(--radius-sm);
  font-size: .65rem; font-weight: 600; background: var(--bg3);
  color: var(--muted);
}
.live-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #30d158; margin-right: 4px; vertical-align: middle;
  animation: live-dot-pulse 2s ease-in-out infinite;
}
@keyframes live-dot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}
.best-month-badge .ui-icon { vertical-align: -1px; color: #ff9f0a; }

/* Live Mode */
.live-btn-inline { margin-top: 8px; }
.live-btn {
  width: 100%; padding: 8px 12px; border-radius: var(--radius-sm);
  border: none; background: var(--bg3);
  color: var(--text); font-size: .75rem; font-weight: 600;
  cursor: pointer; transition: all var(--duration) var(--ease);
}
.live-btn:hover { background: var(--bar-bg); }
.live-btn.active {
  background: rgba(48,209,88,.15); color: #30d158;
  animation: live-pulse 2s ease-in-out infinite;
}
.light .live-btn.active {
  background: #f0fff4; color: #248a3d;
}
@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(48,209,88,.3); }
  50% { box-shadow: 0 0 0 4px rgba(48,209,88,.08); }
}
.live-badge {
  display: inline-block; background: rgba(48,209,88,.15); color: #30d158;
  font-size: .65rem; font-weight: 700; padding: 2px 6px;
  border-radius: var(--radius-sm); margin-left: 4px; vertical-align: middle;
}
.light .live-badge { background: #f0fff4; color: #248a3d; }

/* Legend */
.legend-section { display: none; }
.map-legend {
  display: none;
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  z-index: 800;
  background: var(--popup-bg); backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--radius-md); padding: 8px 16px;
  box-shadow: var(--shadow-lg);
  min-width: 180px; max-width: 280px;
  pointer-events: none;
}
.map-legend-title {
  display: block; font-size: .65rem; font-weight: 600;
  color: var(--muted); margin-bottom: 4px;
  text-align: center; white-space: nowrap;
}
.map-legend-bar {
  height: 6px; border-radius: 3px;
  background: linear-gradient(to right, #64d2ff, #30d158, #ffd60a, #ff9f0a, #ff453a);
  margin-bottom: 4px;
}
.map-legend-labels {
  display: flex; justify-content: space-between;
  font-size: .65rem; color: var(--muted);
}

/* Score legend on map */
.score-legend {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  z-index: 800;
  display: flex; align-items: center; gap: 8px;
  background: var(--popup-bg); backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: var(--radius-pill); padding: 8px 14px;
  box-shadow: 0 4px 24px rgba(0,0,0,.4); border: 1px solid var(--border-hi);
}
.score-legend-dot {
  border-radius: 50%; flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.6);
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.light .score-legend {
  background: rgba(255,255,255,.92); border-color: #e0e0e0;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 20px rgba(0,0,0,.1);
}
.light .score-legend-dot { border-color: rgba(0,0,0,.12); }
.light .score-legend-item { color: #555; }

/* Affiliate Links */
.affiliate-section { padding: 16px; box-shadow: 0 1px 0 var(--border); }
.safetywing-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: var(--radius-md);
  background: rgba(255,56,92,.06);
  text-decoration: none; color: var(--text);
  transition: all var(--duration) var(--ease);
}
.safetywing-banner:hover {
  background: rgba(255,56,92,.10); transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.light .safetywing-banner { background: #f7f7f7; border: 1px solid #ebebeb; }
.light .safetywing-banner:hover { background: #f0f0f0; }
.sw-icon { display: inline-flex; align-items: center; flex-shrink: 0; color: var(--accent); }
.sw-text { flex: 1; min-width: 0; }
.sw-text strong { font-size: .85rem; display: block; }
.sw-text small { font-size: .65rem; color: var(--muted); }
.sw-arrow { font-size: .85rem; color: var(--accent); flex-shrink: 0; }


/* Map */
#map-container { flex: 1; min-width: 300px; position: relative; }
#map { height: 100%; width: 100%; }

/* Dark mode: invert + hue-rotate Voyager tiles for a Google Maps dark-like look */
.dark-tiles {
  filter: invert(1) hue-rotate(180deg) brightness(.95) contrast(1.1) saturate(.3);
}

/* City Panel */
#city-panel {
  width: 380px; min-width: 380px;
  overflow: visible;
  transition: width .35s var(--ease), min-width .35s var(--ease);
  position: relative; flex-shrink: 0;
}
.city-panel-inner {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  background: var(--bg2); overflow: hidden;
  box-shadow: -1px 0 0 var(--border);
  transition: opacity var(--duration) var(--ease);
}
#city-panel.collapsed { width: 0; min-width: 0; }
#city-panel.collapsed .city-panel-inner { opacity: 0; pointer-events: none; }

/* Tab that sticks out when collapsed */
.city-panel-tab {
  position: absolute; top: 12px; right: 0;
  transform: translateX(100%); z-index: 800;
  background: var(--bg2);
  box-shadow: var(--shadow-md);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 16px 8px; cursor: pointer;
  writing-mode: vertical-rl; text-orientation: mixed;
  font-size: .65rem; font-weight: 700; color: var(--muted);
  letter-spacing: .06em;
  transition: all var(--duration) var(--ease);
  display: none;
}
.city-panel-tab:hover { color: var(--accent); background: var(--bg3); }
#city-panel.collapsed .city-panel-tab { display: flex; align-items: center; gap: 8px; }

.city-panel-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 20px 24px 16px; flex-shrink: 0;
  position: relative;
}
.city-panel-header-left { display: flex; flex-direction: column; gap: 2px; }
.city-panel-title {
  font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em;
  line-height: 1.2; color: var(--text);
}
.city-panel-toggle {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--bg2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .2s var(--ease);
  flex-shrink: 0; margin-top: 2px;
  color: var(--text); font-size: .8rem; padding: 0; line-height: 1;
}
.city-panel-toggle:hover { background: var(--bg3); border-color: var(--muted2); transform: scale(1.05); }
.city-count {
  font-size: .8125rem; color: var(--muted); font-weight: 400; margin-top: 2px;
}
.city-panel-header::after {
  content: ''; position: absolute; bottom: 0; left: 24px; right: 24px;
  height: 1px; background: var(--border);
}
#city-list {
  flex: 1; overflow-y: auto; padding: 8px 24px 24px;
  display: flex; flex-direction: column; gap: 16px;
  scrollbar-width: thin; scrollbar-color: var(--muted2) transparent;
}

/* City Cards — Airbnb style */
.city-card {
  background: transparent; border-radius: 0;
  cursor: pointer; transition: opacity var(--duration) var(--ease);
  border: none; overflow: visible; flex-shrink: 0;
  box-shadow: none;
}
.city-card:hover { opacity: .88; }
.city-card.selected { opacity: 1; }
.city-card.selected .city-card-carousel {
  box-shadow: 0 0 0 2px var(--card-sel);
}

/* Card image carousel */
.city-card-carousel {
  position: relative; width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 12px; overflow: hidden;
  background: var(--bg3); flex-shrink: 0;
}
.city-card-img {
  width: 100%; height: 100%; object-fit: cover;
  display: block; transition: opacity .3s ease;
}

/* Fav button — Airbnb style */
.fav-btn.card-fav {
  position: absolute; top: 10px; right: 10px;
  background: rgba(0,0,0,.3); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-radius: 50%;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; opacity: 1;
  transition: transform .15s ease, background .15s ease;
  z-index: 4; border: none; cursor: pointer; color: #fff;
}
.fav-btn.card-fav:active { background: rgba(0,0,0,.5); }
.fav-btn.card-fav:hover { transform: scale(1.1); }
.fav-btn.card-fav svg { width: 22px; height: 22px; }

/* Card carousel arrows — hidden on desktop, visible on mobile */
.card-carousel-prev, .card-carousel-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,.92); border: .5px solid rgba(0,0,0,.06);
  box-shadow: 0 1px 4px rgba(0,0,0,.14);
  display: none; align-items: center; justify-content: center;
  cursor: pointer; color: #222; font-size: .9rem; font-weight: 600;
  z-index: 3; padding: 0; line-height: 1;
}
.card-carousel-prev { left: 8px; }
.card-carousel-next { right: 8px; }

/* Card carousel dots */
.card-dots {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 4px; z-index: 3;
}
.card-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,.5); transition: all .2s ease;
}
.card-dot.active { background: #fff; transform: scale(1.2); }

/* Score badge — on the image, bottom-left, neutral (no color) */
.city-card-score {
  position: absolute; bottom: 8px; left: 8px;
  display: flex; align-items: baseline; gap: 3px;
  padding: 5px 10px; border-radius: 8px;
  font-size: 1rem; font-weight: 800; line-height: 1;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
  color: #fff; z-index: 3;
}
.city-card-score-max { font-size: .6rem; font-weight: 600; opacity: .55; }

/* Card body — clean Airbnb layout */
.city-card-body {
  padding: 8px 2px 0; flex: 1; min-width: 0;
}
.city-card-header {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.city-card-name {
  font-weight: 600; font-size: .85rem; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  color: var(--text);
}
.city-card-country {
  flex-shrink: 0; font-size: .78rem; color: var(--muted); font-weight: 400;
  line-height: 1.3;
}
.city-card-meta {
  display: flex; align-items: center; gap: 4px;
  margin-top: 3px; color: var(--muted); font-size: .78rem;
}
.city-card-meta-item {
  display: inline-flex; align-items: center; gap: 2px;
  white-space: nowrap;
}
.city-card-meta-item svg { opacity: .5; flex-shrink: 0; }
.city-card-meta-sep { color: var(--muted2); font-size: .7rem; }
.city-card-price {
  margin-left: auto; font-size: .88rem; font-weight: 700;
  color: var(--text); white-space: nowrap;
}
.city-card-price small {
  font-weight: 400; color: var(--muted); font-size: .68rem;
}

/* Weather chips (used in preview cards & popups) */
.weather-chip {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--bg3); border-radius: 4px;
  padding: 2px 6px; font-size: .65rem; font-weight: 600;
  color: var(--text); white-space: nowrap;
}
.weather-chip svg { opacity: .5; }

/* Score Badges */
.city-score {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px 8px; border-radius: var(--radius-sm); font-weight: 700; font-size: .65rem;
}
.score-great { background: rgba(48,209,88,.15); color: #30d158; }
.score-good  { background: rgba(255,214,10,.12); color: #ffd60a; }
.score-ok    { background: rgba(255,159,10,.12); color: #ff9f0a; }
.score-avoid { background: rgba(255,69,58,.12); color: #ff453a; }
.light .score-great { background: rgba(52,199,89,.1); color: #248a3d; }
.light .score-good  { background: rgba(255,204,0,.1); color: #a05a00; }
.light .score-ok    { background: rgba(255,149,0,.1); color: #c93400; }
.light .score-avoid { background: rgba(255,59,48,.08); color: #d70015; }

/* Light mode — Airbnb-style overrides */
.light #sidebar { box-shadow: 1px 0 0 #ebebeb; }
.light #top-bar { box-shadow: 0 1px 0 #ebebeb; backdrop-filter: none; }
.light .city-card-carousel { background: #f0f0f0; }
.light .country-input { background: #f7f7f7; border: 1px solid #ebebeb; }
.light .country-input:focus { box-shadow: 0 0 0 2px rgba(0,0,0,.12); }
.light .topbar-btn { background: #f7f7f7; }
.light .topbar-btn:hover { background: #ebebeb; }
.light .filter-check:hover { background: #f7f7f7; }
.light .filter-radio:hover { background: #f7f7f7; }
.light .city-panel-inner { box-shadow: -1px 0 0 #ebebeb; }
.light .city-panel-header { box-shadow: 0 1px 0 #ebebeb; }
.light .itin-city-card:hover { background: #f7f7f7; }

/* Map Popups — Minimalist Airbnb Style */
.custom-popup .leaflet-popup-content-wrapper {
  background: var(--popup-bg); color: var(--popup-text);
  border-radius: 16px; padding: 0; overflow: hidden;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 2px 8px rgba(0,0,0,.08), 0 8px 30px rgba(0,0,0,.12);
  border: 1px solid rgba(255,255,255,.08);
}
.custom-popup .leaflet-popup-tip { background: var(--popup-bg); }
.custom-popup .leaflet-popup-content { margin: 0; width: 380px !important; }
.popup-carousel {
  position: relative; overflow: hidden;
  border-radius: 16px 16px 0 0;
  background: var(--bg3);
}
.popup-carousel .popup-img { border-radius: 0; }
.popup-img { width: 100%; height: 180px; object-fit: cover; border-radius: 16px 16px 0 0; }
.popup-actions {
  position: absolute; top: 8px; right: 8px; z-index: 5;
  display: flex; gap: 6px;
}
.popup-close-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0,0,0,.35); border: none; color: #fff;
  font-size: 1.2rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background .15s ease, transform .15s ease;
}
.popup-close-btn:hover { background: rgba(0,0,0,.65); transform: scale(1.1); }

/* Carousel dots */
.popup-dots {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 5px; z-index: 3;
}
.popup-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.5); transition: all .2s ease;
}
.popup-dot.active { background: #fff; transform: scale(1.15); }

/* Carousel arrows */
.carousel-prev, .carousel-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,.9); border: .5px solid rgba(0,0,0,.08);
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #222; font-size: .8rem;
  opacity: 0; transition: opacity .2s ease, transform .15s ease; z-index: 3;
}
.popup-carousel:hover .carousel-prev,
.popup-carousel:hover .carousel-next { opacity: 1; }
.carousel-prev:hover, .carousel-next:hover { transform: translateY(-50%) scale(1.06); }
.carousel-prev { left: 8px; }
.carousel-next { right: 8px; }

/* Score pill — consistent with city-card-score */
.popup-carousel-score {
  position: absolute; bottom: 10px; left: 10px;
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 5px 10px; border-radius: 8px;
  background: rgba(0,0,0,.65); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
  color: #fff; font-size: 1rem; font-weight: 800; line-height: 1; z-index: 3;
}
.popup-score-max { font-size: .6rem; font-weight: 600; opacity: .6; }
.popup-score-label { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-left: 2px; }

/* Content body */
.popup-content { padding: 14px 16px 12px; }
.popup-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 8px; margin-bottom: 2px;
}
.popup-name { font-size: 1rem; font-weight: 700; color: var(--text); line-height: 1.25; letter-spacing: -.01em; }
.popup-location { font-size: .82rem; color: var(--muted); font-weight: 400; line-height: 1.3; }

/* Weather strip */
.popup-weather {
  display: flex; gap: 0; margin: 10px 0 0;
  padding: 10px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.popup-wx {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; position: relative;
  text-align: center; min-width: 0; padding: 0 4px;
}
.popup-wx + .popup-wx::before {
  content: ''; position: absolute; left: 0; top: 15%; bottom: 15%;
  width: 1px; background: var(--border);
}
.popup-wx-icon {
  display: flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; color: var(--muted); opacity: .6;
}
.popup-wx-val {
  font-size: .85rem; font-weight: 700; color: var(--text);
  line-height: 1.2; text-align: center;
}
.popup-wx-label {
  font-size: .65rem; color: var(--muted2); font-weight: 500;
  text-align: center; line-height: 1.3;
}

/* Compact nomad row */
.popup-nomad {
  display: flex; gap: 0; margin: 0; padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.popup-nd {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 2px; position: relative;
}
.popup-nd + .popup-nd::before {
  content: ''; position: absolute; left: 0; top: 15%; bottom: 15%;
  width: 1px; background: var(--border);
}
.popup-nd-val { font-size: .9rem; font-weight: 700; color: var(--text); line-height: 1; }
.popup-nd-val small { font-size: .6rem; font-weight: 500; color: var(--muted); }
.popup-nd-label {
  font-size: .58rem; color: var(--muted2); font-weight: 500;
  text-transform: uppercase; letter-spacing: .04em;
}

/* Footer CTA */
.popup-cta {
  display: block; text-align: center; margin: 10px 0 2px; padding: 9px 0;
  font-size: .78rem; font-weight: 700; color: var(--text); text-decoration: none;
  cursor: pointer; border: 1px solid var(--border); background: transparent;
  border-radius: 8px; width: 100%; transition: all .15s ease; letter-spacing: -.01em;
}
.popup-cta:hover { background: var(--bg3); border-color: var(--text); }

/* Light mode — Airbnb-clean popups */
.light .custom-popup .leaflet-popup-content-wrapper {
  background: #fff; color: #222; border-radius: 16px;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.08), 0 8px 30px rgba(0,0,0,.12);
  border: 1px solid #ebebeb;
}
.light .custom-popup .leaflet-popup-tip { background: #fff; }
.light .popup-carousel { background: #f7f7f7; border-radius: 16px 16px 0 0; }
.light .popup-content { padding: 14px 16px 12px; }
.light .popup-name { font-size: 1rem; font-weight: 700; color: #222; }
.light .popup-location { color: #717171; }
.light .popup-weather { border-color: #ebebeb; }
.light .popup-wx + .popup-wx::before { background: #ebebeb; }
.light .popup-wx-icon { color: #717171; }
.light .popup-wx-val { color: #222; }
.light .popup-wx-label { color: #b0b0b0; }
.light .popup-nomad { border-color: #ebebeb; }
.light .popup-nd + .popup-nd::before { background: #ebebeb; }
.light .popup-nd-val { color: #222; }
.light .popup-nd-val small { color: #b0b0b0; }
.light .popup-nd-label { color: #b0b0b0; }
.light .popup-cta {
  background: #fff; border-color: #ebebeb; color: #222;
}
.light .popup-cta:hover { background: #f7f7f7; border-color: #222; }

/* Light mode — mobile panel & preview */
.light #mobile-panel {
  background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none;
  border-radius: 12px 12px 0 0; box-shadow: 0 -4px 20px rgba(0,0,0,.12);
}
.light #mobile-panel-header { background: #f7f7f7; box-shadow: 0 1px 0 #ebebeb; border-radius: 12px 12px 0 0; }
.light .panel-apply-btn { background: #FF385C; border-radius: 8px; }
.light .panel-apply-btn:hover { background: #E0003A; }
.light .panel-footer-action { background: #fff; box-shadow: 0 -1px 0 #ebebeb; }
.light .panel-close-btn { background: #f7f7f7; color: #717171; }
.light .panel-close-btn:hover { background: #ebebeb; color: #222; }
.light .panel-reset-btn { background: #f7f7f7; color: #717171; }
.light #mobile-panel-backdrop { background: rgba(0,0,0,.25); backdrop-filter: blur(2px); }
.light #preview-card { background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.15); border: 1px solid #ebebeb; border-radius: 12px; }
.light .preview-body { padding: 14px; }
.light .preview-name { font-size: .9rem; color: #222; }
.light .preview-country { color: #717171; }
.light .preview-desc { color: #717171; }
.light .preview-details { color: #999; }
.light .mobile-trip-fab { background: #FF385C; }
.light .mobile-trip-fab:hover { background: #E0003A; }

/* Map hover tooltip — rich card */
.city-hover-card {
  background: var(--popup-bg) !important; color: var(--popup-text) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: var(--radius-sm) !important;
  padding: 0 !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.5) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  white-space: nowrap;
  z-index: 1000 !important;
}
.city-hover-card::before { border-top-color: var(--popup-bg) !important; }
.city-hover-card .hover-inner { padding: 8px 11px; display: flex; flex-direction: column; gap: 2px; }
.city-hover-card .hover-name { font-weight: 700; font-size: .72rem; }
.city-hover-card .hover-meta { color: var(--muted); font-size: .6rem; }
.light .city-hover-card {
  background: #fff !important; color: #222 !important;
  border: 1px solid #ebebeb !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.1) !important;
}
.light .city-hover-card::before { border-top-color: #fff !important; }
.light .city-hover-card .hover-label,
.light .city-hover-card .hover-meta { color: #888; }

/* Tooltips */
.has-tooltip { position: relative; }
.has-tooltip::after {
  content: attr(data-tooltip);
  position: absolute; left: 50%; bottom: 100%;
  transform: translateX(-50%) translateY(-4px);
  background: var(--bg2); color: var(--text);
  border-radius: var(--radius-sm); padding: 8px 12px;
  font-size: .75rem; font-weight: 400; line-height: 1.4;
  white-space: normal; width: max-content; max-width: 240px;
  pointer-events: none; opacity: 0;
  transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease);
  z-index: 9999;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.has-tooltip:hover::after {
  opacity: 1; transform: translateX(-50%) translateY(-8px);
}
.has-tooltip[data-tooltip=""]::after { display: none; }
@media (hover: none) { .has-tooltip::after { display: none; } }

/* Responsive */
@media (max-width: 1200px) {
  #sidebar { width: 310px; min-width: 310px; }
  #city-panel { width: 320px; min-width: 320px; }
}

/* Mobile Bottom Sheet (legacy) */
#mobile-sheet { display: none !important; }
.sheet-handle, .sheet-tabs, .sheet-tab, .sheet-body { display: none; }

/* Filter Chips Bar (mobile) */
.filter-chips-bar {
  display: none;
  background: var(--bg);
  box-shadow: 0 1px 0 var(--border);
  flex-shrink: 0;
  position: relative; z-index: 10;
}
.filter-chips {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.filter-chips::-webkit-scrollbar { display: none; }

/* Filters trigger button */
.filter-trigger-btn {
  display: inline-flex; align-items: center; gap: 6px;
  flex-shrink: 0; padding: 8px 16px;
  border-radius: var(--radius-lg);
  border: none; background: var(--bg3);
  color: var(--text); font-size: .85rem; font-weight: 600;
  cursor: pointer;
  transition: background var(--duration) var(--ease);
  white-space: nowrap;
}
.filter-trigger-btn:active { opacity: .7; }
.filter-trigger-btn .filter-trigger-icon { display: inline-flex; align-items: center; }
.filter-trigger-btn .filter-trigger-badge {
  background: var(--accent); color: #fff;
  font-size: .65rem; font-weight: 700;
  min-width: 16px; height: 16px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 4px; margin-left: 4px;
}
.filter-trigger-btn.has-active {
  background: rgba(255,56,92,.12);
}
.light .filter-trigger-btn.has-active {
  background: #f0f0f0; border: 1px solid #222;
}

/* Chips divider */
.filter-chips-divider {
  width: 1px; height: 20px;
  background: var(--border); flex-shrink: 0;
}

/* Individual filter chips */
.filter-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 16px; border-radius: var(--radius-lg);
  border: none; background: var(--bg3);
  font-size: .75rem; font-weight: 500; color: var(--text);
  white-space: nowrap; flex-shrink: 0; cursor: pointer;
  transition: background var(--duration) var(--ease);
}
.filter-chip:active { opacity: .7; }
.filter-chip.active {
  background: rgba(255,56,92,.10);
  color: var(--accent); font-weight: 600;
}
.light .filter-chip { background: #f7f7f7; border: 1px solid #ebebeb; }
.light .filter-chip.active {
  background: #fff; border-color: #222; color: #222;
}
.filter-chip.profile-chip {
  background: rgba(255,105,135,.12); border: 1px solid rgba(255,105,135,.25);
  color: var(--accent); font-weight: 600;
}
.light .filter-chip.profile-chip {
  background: rgba(255,56,92,.08); border-color: rgba(255,56,92,.3);
}

/* Profile chip (inside filter chips bar, mobile) */
.profile-chip {
  background: linear-gradient(135deg, rgba(255,45,85,.12), rgba(230,92,120,.1)) !important;
  color: #ff2d55 !important; font-weight: 600 !important;
  gap: 5px !important;
}
.profile-chip svg { flex-shrink: 0; }
.light .profile-chip {
  background: linear-gradient(135deg, #fff0f3, #ffecf0) !important;
  color: #d1265a !important;
  border-color: #f0c0cc !important;
}

/* Mobile Trip FAB */
.mobile-trip-fab {
  display: flex;
  position: fixed; bottom: 16px; right: 16px; z-index: 8996;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--accent); border: none; color: #fff;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  align-items: center; justify-content: center;
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.mobile-trip-fab:active { transform: scale(.9); }
.mobile-trip-fab:hover { box-shadow: var(--shadow-xl); }
/* Panel close button */
.panel-close-btn {
  background: none; border: none;
  color: var(--muted2); font-size: 1.2rem;
  cursor: pointer; padding: 4px 8px;
  border-radius: var(--radius-sm); transition: all var(--duration) var(--ease);
  line-height: 1; flex-shrink: 0;
}
.panel-close-btn:hover { color: var(--text); background: var(--bg3); }

/* Panel section divider */
.panel-section-divider {
  padding: 16px 16px 8px;
  font-size: .85rem; font-weight: 700;
  letter-spacing: .04em; color: var(--text);
  box-shadow: 0 -1px 0 var(--border);
}
.panel-section-divider:first-child { box-shadow: none; }

/* Panel profile explainer (mobile scoring panel) */
.panel-profile-explainer {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.panel-profile-explainer:empty { display: none; }
.panel-profile-metrics {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.panel-profile-metric {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg3); border-radius: 6px;
  padding: 5px 10px; font-size: .7rem; font-weight: 600;
  color: var(--text);
}
.panel-profile-metric svg { color: var(--muted); }
.panel-profile-month {
  background: none; border: 1px dashed var(--border);
  color: var(--muted); font-weight: 500;
}
.panel-profile-values { margin-top: 6px; }

/* Hide labels inside mobile panel */
#mobile-panel-body .month-header label,
#mobile-panel-body .country-section > label,
#mobile-panel-body .filter-section > h3,
#mobile-panel-body .metric-section > h3,
#mobile-panel-body .sidebar-heading { display: none; }

/* Mobile panel month slider */
#mobile-panel-body .dual-range { height: 32px; }
#mobile-panel-body .dual-range-track { height: 6px; border-radius: 3px; }
#mobile-panel-body .dual-range-fill { height: 6px; border-radius: 3px; }
#mobile-panel-body .dual-range input[type="range"] { height: 32px; }
#mobile-panel-body .dual-range input[type="range"]::-webkit-slider-thumb {
  width: 24px; height: 24px;
  box-shadow: 0 2px 6px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.1);
  margin-top: -9px;
}
#mobile-panel-body .dual-range input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px;
  box-shadow: 0 2px 6px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.1);
}
#mobile-panel-body .month-ticks { font-size: .65rem; }
#mobile-panel-body .month-value { font-size: .85rem; }

/* Mobile Panel */
#mobile-panel {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 8998;
  background: var(--bg2);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  box-shadow: var(--shadow-xl);
  height: 45vh;
  max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  transform: translateY(100%); opacity: 0;
  transition: transform var(--duration) var(--ease), opacity .18s var(--ease);
  will-change: transform, height;
}
#mobile-panel.open { transform: translateY(0); opacity: 1; }
#mobile-panel.dragging { transition: none; }

#mobile-panel-header {
  flex-shrink: 0; touch-action: none; cursor: grab;
  background: var(--bg3);
  box-shadow: 0 1px 0 var(--border);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.panel-footer-action {
  flex-shrink: 0; padding: 8px 16px 12px;
  box-shadow: 0 -1px 0 var(--border);
  background: var(--bg2);
}
.panel-apply-btn {
  width: 100%; padding: 14px 0;
  background: var(--accent); color: #fff; border: none;
  border-radius: var(--radius-md); font-size: .85rem; font-weight: 700;
  cursor: pointer; transition: opacity var(--duration) var(--ease);
}
.panel-apply-btn:active { opacity: .8; }

.panel-handle {
  display: flex; justify-content: center; padding: 8px 0 0;
}
.panel-handle span {
  width: 36px; height: 5px; border-radius: 3px;
  background: var(--muted2); opacity: .25;
}
.panel-header-row {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; padding: 8px 12px; gap: 8px;
}
.panel-header-row > :first-child { justify-self: start; }
.panel-header-row > :last-child { justify-self: end; }
.panel-title {
  text-align: center;
  font-size: .85rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text);
}
.panel-title-group {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.panel-title-main {
  font-size: .85rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text);
}
.panel-title-sub {
  font-size: .72rem; font-weight: 500; color: var(--muted);
  text-transform: none; letter-spacing: 0;
}
/* Panel header buttons */
.panel-close-btn {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex-shrink: 0;
  background: var(--bg2); border: none;
  border-radius: var(--radius-sm); cursor: pointer;
  color: var(--muted); transition: all var(--duration) var(--ease);
  padding: 0; font-size: 1.15rem; line-height: 1;
}
.panel-close-btn:hover { color: var(--text); background: var(--bg3); }
.panel-reset-btn {
  display: flex; align-items: center; gap: 4px;
  height: 32px; flex-shrink: 0;
  background: var(--bg2); border: none;
  border-radius: var(--radius-sm); cursor: pointer;
  color: var(--muted); transition: all var(--duration) var(--ease);
  padding: 0 12px; font-size: .75rem; font-weight: 600;
  white-space: nowrap; line-height: 1;
}
.panel-reset-btn svg { flex-shrink: 0; stroke: currentColor; }
.panel-reset-btn:hover { color: #ff453a; background: rgba(255,69,58,.08); }
.panel-reset-btn[hidden] { display: none; }

#mobile-panel-body {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--muted2) transparent;
}
#mobile-panel-backdrop {
  display: none; position: fixed; inset: 0; z-index: 8997;
  background: rgba(0,0,0,.4);
  opacity: 0; transition: opacity var(--duration) var(--ease);
  pointer-events: none;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
#mobile-panel-backdrop.open { opacity: 1; pointer-events: auto; }

/* Mobile Preview Card */
#preview-card { display: none; }

@keyframes preview-slide-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 960px) {
  #preview-card {
    display: block;
    position: fixed;
    bottom: 8px; left: 8px; right: 8px;
    z-index: 9001;
    border-radius: var(--radius-md);
    background: var(--bg2);
    box-shadow: var(--shadow-xl);
    animation: preview-slide-up .25s var(--ease);
    padding: 0; overflow: hidden;
  }
  #preview-card[hidden] { display: none; }

  #preview-content { display: flex; flex-direction: column; cursor: pointer; }

  .preview-img-wrap {
    position: relative; width: 100%; height: 120px;
    background: var(--bg3); flex-shrink: 0;
  }
  .light .preview-img-wrap { background: #f7f7f7; }
  .preview-img { width: 100%; height: 120px; object-fit: cover; display: block; }

  .preview-img-wrap .preview-score {
    position: absolute; bottom: 8px; left: 8px;
    display: inline-flex; align-items: baseline; gap: 4px;
    padding: 4px 12px; border-radius: var(--radius-md);
    font-weight: 800; font-size: .85rem;
    background: rgba(0,0,0,.65) !important;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--shadow-md);
    color: #fff !important;
  }
  .preview-score-label {
    font-size: .65rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .03em; opacity: .85;
  }

  .preview-actions {
    position: absolute; top: 8px; right: 8px;
    display: flex; gap: 8px; z-index: 2;
  }
  .fav-btn.preview-fav,
  .preview-close-btn {
    background: rgba(0,0,0,.35); color: #fff;
    border-radius: 50%; width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    padding: 0; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: none; cursor: pointer;
    transition: transform var(--duration) var(--ease), background var(--duration) var(--ease);
  }
  .fav-btn.preview-fav:hover,
  .preview-close-btn:hover {
    transform: scale(1.12); background: rgba(0,0,0,.6);
  }
  .preview-close-btn { font-size: 1.15rem; line-height: 1; }
  #preview-close { display: none; }

  .preview-body { padding: 12px; display: flex; flex-direction: column; gap: 4px; }
  .preview-top-row {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
  }
  .preview-name {
    font-weight: 700; font-size: .85rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  }
  .preview-country {
    flex-shrink: 0; font-size: .65rem; color: var(--muted); font-weight: 600;
  }
  .preview-chips {
    display: flex; gap: 4px; flex-wrap: wrap;
  }
  .preview-desc {
    font-size: .7rem; color: var(--muted); margin-top: 2px;
  }
  .preview-details {
    font-size: .7rem; color: var(--muted2); margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
}

@media (min-width: 961px) {
  #preview-card { display: none !important; }
}

@media (max-width: 960px) {
  body.map-page { overflow: hidden; }
  body { overflow-x: hidden; }

  .filter-chips-bar { display: block; }
  #mobile-panel { display: flex; flex-direction: column; }
  #mobile-panel-backdrop { display: block; }
  #mobile-sheet { display: none !important; }

  .top-bar-profile-wrap { display: none !important; }
  .profile-popover { display: none !important; }
  /* topbar-btn already visible by default */
  #top-bar { padding: 8px 12px; flex-shrink: 0; }
  .top-bar-text p { display: none; }
  .top-bar-text h1 { font-size: .85rem; }
  .top-bar-logo svg { width: 20px; height: 20px; }
  .top-bar-badge { display: none; }

  .view-toggle { display: flex; flex-shrink: 0; }
  .filter-chips-bar { flex-shrink: 0; }

  #app { flex-direction: column; min-height: 0; }
  #sidebar { display: none; }
  #city-panel { display: none; }

  body.mobile-list-view #map-container { display: none; }
  body.mobile-list-view #city-panel {
    display: flex !important; flex-direction: column;
    flex: 1; width: 100%; min-width: unset; min-height: 0;
  }
  body.mobile-list-view .city-panel-inner {
    border-right: none; box-shadow: none; min-height: 0;
    overflow-x: hidden; overflow-y: auto;
  }
  body.mobile-list-view .city-panel-tab,
  body.mobile-list-view .city-panel-toggle { display: none; }
  body.mobile-list-view #preview-card { display: none !important; }
  body.mobile-list-view .mobile-trip-fab { display: flex; }
  body.mobile-list-view #city-list {
    padding: 14px; gap: 20px 12px; padding-bottom: 16px;
    display: grid; grid-template-columns: repeat(2, 1fr);
    align-items: start;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }
  body.mobile-list-view .city-card {
    min-width: 0;
  }

  #map-container { flex: 1; width: 100% !important; min-width: unset !important; min-height: unset !important; padding-bottom: 0; }

  .country-section { padding: 12px 16px; }
  .country-input { font-size: 16px; }
  .slider-section { padding: 12px 16px; }
  .affiliate-section { padding: 8px 16px; }
  .sidebar-footer { padding: 8px 16px; font-size: .65rem; }
  #city-list { padding: 16px; gap: 24px; }
  .city-panel-header { padding: 12px; }
  .country-section, .filter-section, .metric-section { padding: 12px 16px; }

  .filter-check { padding: 10px 12px; border-radius: var(--radius-sm); }
  .filter-check-box { width: 22px; height: 22px; }
  .filter-check-text > span { font-size: .85rem; }
  .filter-check-text small { font-size: .65rem; }

  .filter-radio { padding: 10px 12px; border-radius: var(--radius-sm); }
  .filter-radio-icon { width: 38px; height: 38px; font-size: 1.1rem; }
  .filter-radio-check { width: 22px; height: 22px; }
  .filter-radio-check::after { top: 4px; left: 4px; width: 10px; height: 10px; }
  .filter-radio-dot { width: 22px; height: 22px; }
  .filter-radio-dot::after { top: 4px; left: 4px; width: 10px; height: 10px; }

  .customize-toggle { font-size: .85rem; padding: 12px 0; }

  .metric-card { padding: 18px 0; }
  .ideal-check-label { font-size: .85rem; }
  .ideal-val { font-size: .85rem; width: 60px; }
  .ideal-range { margin: 10px 0 0; height: 4px; }
  .importance-row { margin-top: 8px; }
  .imp-pill { font-size: .65rem; padding: 4px 0; }
  .metric-toggle-track { width: 32px; height: 18px; border-radius: 9px; }
  .metric-toggle-thumb { width: 14px; height: 14px; }
  .metric-toggle.active .metric-toggle-thumb { transform: translateX(14px); }
  .weight-value { font-size: .75rem; }

  .month-value { font-size: .85rem; }

  #city-list { padding: 16px; gap: 20px; }
  .city-card-carousel { aspect-ratio: 1 / 1; border-radius: 12px; }
  .fav-btn.card-fav { width: 30px; height: 30px; top: 8px; right: 8px; }
  .fav-btn.card-fav svg { width: 20px; height: 20px; }
  .city-card-body { padding: 10px 4px 0; }
  .city-card-name { font-size: .82rem; }
  .city-card-country { font-size: .72rem; }
  .city-card-meta { font-size: .72rem; margin-top: 5px; }
  .city-card-price { font-size: .78rem; }
  .city-card-score { font-size: .85rem; padding: 4px 8px; }
  .card-carousel-prev, .card-carousel-next { display: none; }

  .leaflet-popup-content-wrapper { max-width: 340px; }
  .popup-img { height: 110px; }
  .popup-carousel-score { font-size: .85rem; padding: 4px 8px; }
  .fav-btn.popup-fav { width: 32px; height: 32px; top: 8px; right: 8px; }
}

@media (max-width: 400px) {
  .filter-check-text > span { font-size: .75rem; }
  .filter-check-text small { font-size: .65rem; }
}

/* Favorites Button */
.fav-btn {
  background: none; border: none; cursor: pointer;
  padding: 2px; line-height: 0; vertical-align: middle;
  transition: transform var(--duration) var(--ease);
  color: var(--muted); display: inline-flex; align-items: center;
}
.fav-btn:hover { transform: scale(1.2); }
.fav-btn svg { display: block; }

.fav-btn.popup-fav {
  background: rgba(0,0,0,.35); color: #fff;
  border-radius: 50%; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: transform var(--duration) var(--ease), background var(--duration) var(--ease);
}
.fav-btn.popup-fav:hover { transform: scale(1.12); background: rgba(0,0,0,.6); }

@keyframes fav-slide-in {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fav-slide-out {
  from { opacity: 1; transform: translateX(0); max-height: 60px; }
  to { opacity: 0; transform: translateX(20px); max-height: 0; padding: 0 12px; margin: 0; }
}

/* Share toast */
.share-toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  z-index: 10000;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px; border-radius: var(--radius-lg);
  background: #30d158; color: #fff;
  font-size: .85rem; font-weight: 600;
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  opacity: 0; transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.share-toast svg { flex-shrink: 0; stroke: #fff; }
.share-toast.share-toast-show {
  opacity: 1; transform: translateX(-50%) translateY(0);
  animation: toast-in .35s var(--ease);
}
.share-toast.share-toast-hide {
  opacity: 0; transform: translateX(-50%) translateY(12px);
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(18px) scale(.95); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* Best Month Badge (city cards) */
.best-month-badge {
  background: var(--bg3); border-radius: var(--radius-sm);
  padding: 2px 8px; font-size: .65rem;
  color: var(--muted); white-space: nowrap;
}

/* Share Button */
#share-btn {
  background: var(--bg3); border: none;
  border-radius: var(--radius-lg); padding: 6px 12px; cursor: pointer;
  font-size: .85rem; color: var(--text);
  transition: all var(--duration) var(--ease);
}
#share-btn:hover { background: var(--bar-bg); }

/* ─── Trip Panel — Airbnb style ─── */
#trip-panel {
  width: 380px; min-width: 380px;
  overflow: hidden;
  transition: width .35s var(--ease), min-width .35s var(--ease);
  position: relative; flex-shrink: 0;
}
.trip-panel-inner {
  width: 380px; min-width: 380px; height: 100%;
  display: flex; flex-direction: column;
  background: var(--bg2); overflow: hidden;
  box-shadow: -1px 0 0 var(--border);
  transition: opacity var(--duration) var(--ease);
}
#trip-panel.trip-panel-collapsed { width: 0; min-width: 0; }
#trip-panel.trip-panel-collapsed .trip-panel-inner { opacity: 0; pointer-events: none; }
.trip-panel-tab { display: none !important; }

/* Header */
.trip-panel-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 20px 24px 16px; flex-shrink: 0;
}
.trip-header-left { display: flex; flex-direction: column; gap: 2px; }
.trip-title {
  font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em;
  line-height: 1.2; color: var(--text);
}
.trip-subtitle {
  font-size: .8125rem; color: var(--muted); font-weight: 400; margin-top: 2px;
}
.trip-close-btn {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--bg2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .2s var(--ease);
  flex-shrink: 0; margin-top: 2px;
}
.trip-close-btn:hover {
  background: var(--bg3); border-color: var(--muted2); transform: scale(1.05);
}
.trip-close-btn:active { transform: scale(.95); }
.trip-close-btn svg { color: var(--text); }

/* Separator */
.trip-separator {
  height: 1px; background: var(--border); margin: 0 24px; flex-shrink: 0;
}

/* Timeline */
#itinerary-timeline {
  flex: 1; overflow-y: auto; padding: 8px 0;
  display: flex; flex-direction: column;
  scrollbar-width: thin; scrollbar-color: var(--muted2) transparent;
}
#mobile-panel-body #itinerary-timeline { flex: none; overflow-y: visible; }

/* Month groups */
.itin-month-block { padding: 12px 24px 4px; }
.itin-month-label {
  font-size: .6875rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: 12px;
}

/* City cards — Airbnb style */
.itin-city-card {
  display: flex; gap: 14px; padding: 12px;
  border-radius: var(--radius-md); cursor: pointer;
  transition: all .2s var(--ease); position: relative;
  animation: fav-slide-in .25s var(--ease);
}
.itin-city-card:hover { background: var(--bg3); }
.itin-city-card:active { transform: scale(.985); }
.itin-city-card.removing {
  animation: fav-slide-out .25s ease-in forwards; pointer-events: none;
}
.itin-city-img {
  width: 72px; height: 72px; border-radius: var(--radius-sm);
  object-fit: cover; flex-shrink: 0;
}
.itin-city-body {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  justify-content: center; gap: 3px;
}
.itin-city-name {
  font-size: .9375rem; font-weight: 600; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.itin-city-meta {
  display: flex; align-items: center; gap: 6px;
}
.itin-city-location {
  font-size: .8125rem; color: var(--muted); font-weight: 400;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.itin-city-score {
  font-size: .75rem; font-weight: 600; color: var(--muted2);
  flex-shrink: 0;
}
.itin-city-detail {
  font-size: .75rem; color: var(--muted2); font-weight: 400;
  display: flex; align-items: center; gap: 6px; margin-top: 1px;
}
.itin-city-detail .sep { color: var(--border); }
.itin-city-remove {
  position: absolute; top: 8px; right: 8px;
  width: 24px; height: 24px; border-radius: 50%;
  border: none; background: var(--bg2); box-shadow: 0 1px 4px rgba(0,0,0,.1);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0; transform: scale(.8);
  transition: all .2s var(--ease);
}
.itin-city-card:hover .itin-city-remove { opacity: 1; transform: scale(1); }
.itin-city-remove:hover { background: rgba(255,69,58,.1); }
.itin-city-remove:hover svg { color: #FF385C; }
.itin-city-remove svg { color: var(--muted); }

/* Empty state */
.trip-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 16px; padding: 64px 32px;
  text-align: center;
}
.trip-empty[hidden] { display: none; }
#mobile-panel-body .trip-empty { min-height: 200px; padding: 40px 24px; }
.trip-empty-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255,56,92,.08);
  display: flex; align-items: center; justify-content: center;
}
.trip-empty-icon svg { color: #FF385C; }
.trip-empty-title {
  font-size: 1.125rem; font-weight: 700; color: var(--text);
}
.trip-empty-desc {
  font-size: .875rem; color: var(--muted); line-height: 1.5; max-width: 260px;
}

/* Footer — Share CTA */
.trip-footer {
  padding: 16px 24px; flex-shrink: 0;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
  background: var(--bg2);
}
.trip-footer[hidden] { display: none; }
.trip-footer-info { flex: 1; min-width: 0; }
.trip-footer-count { font-size: .9375rem; font-weight: 700; color: var(--text); }
.trip-footer-months { font-size: .75rem; color: var(--muted); font-weight: 400; }
.trip-share-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: #FF385C; color: #fff; border: none;
  border-radius: var(--radius-sm); padding: 12px 24px;
  font-size: .875rem; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: all .2s var(--ease);
  flex-shrink: 0; letter-spacing: -.01em;
}
.trip-share-btn:hover {
  background: #E31C5F; transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255,56,92,.3);
}
.trip-share-btn:active { transform: translateY(0) scale(.97); box-shadow: none; }
.trip-clear-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--bg2);
  cursor: pointer; transition: all .2s var(--ease); flex-shrink: 0;
}
.trip-clear-btn:hover { border-color: var(--muted); background: var(--bg3); }
.trip-clear-btn svg { color: var(--muted); }
.trip-clear-btn:hover svg { color: var(--text); }

@media (max-width: 1200px) {
  #trip-panel { width: 320px; min-width: 320px; }
  .trip-panel-inner { width: 320px; min-width: 320px; }
}
@media (max-width: 960px) {
  #trip-panel { display: none; }
  .itin-city-remove {
    opacity: 1; transform: scale(1);
    width: 32px; height: 32px;
    background: var(--bg3);
  }
}

/* Very small screens: hide title text to give space to profile pill */
@media (max-width: 600px) {
  .top-bar-text { display: none; }
  .topbar-btn { width: 28px; height: 28px; padding: 4px; }
  .topbar-lang-btn { padding: 4px 6px; }
  #top-bar { overflow: hidden; }
  .top-bar-right { flex-shrink: 1; min-width: 0; overflow: hidden; }
  .top-bar-profile-wrap { min-width: 0; overflow: hidden; }
  .top-bar-profile { min-width: 0; overflow: hidden; }
  .top-bar-profile-name { overflow: hidden; text-overflow: ellipsis; }
}

/* ════════════════════════════════════════════════════
   Settings menu (gear icon popover / bottom sheet)
   ════════════════════════════════════════════════════ */

.settings-btn-wrap { position: relative; }

.settings-popover {
  display: none; position: absolute; top: calc(100% + 8px); right: 0;
  width: 280px; background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  z-index: 1100; overflow: hidden;
  animation: settingsFadeIn .2s var(--ease);
}
.settings-popover.open { display: block; }
@keyframes settingsFadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

.settings-menu { padding: 12px 0; }
.settings-menu-title {
  padding: 0 16px 8px; font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
}
.settings-divider { height: 1px; background: var(--border); margin: 8px 0; }

.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px; gap: 12px;
}
.settings-row-label {
  display: flex; align-items: center; gap: 8px;
  font-size: .8rem; font-weight: 500; color: var(--text);
}
.settings-toggle {
  display: flex; background: var(--bg3); border-radius: 20px;
  padding: 2px; gap: 0; overflow: hidden;
}
.settings-toggle-opt {
  padding: 4px 12px; border-radius: 18px; border: none; background: transparent;
  color: var(--muted); font-size: .7rem; font-weight: 600;
  cursor: pointer; transition: all var(--duration) var(--ease);
  white-space: nowrap;
}
.settings-toggle-opt.active {
  background: var(--accent); color: #fff;
}
.light .settings-toggle-opt.active {
  background: var(--accent); color: #fff;
}

/* Mobile: settings in the mobile-panel bottom sheet */
@media (max-width: 960px) {
  .settings-popover { display: none !important; }
}

/* ════════════════════════════════════════════════════
   Auth Modal
   ════════════════════════════════════════════════════ */

.auth-modal {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .25s var(--ease);
}
.auth-modal.auth-modal-open {
  opacity: 1; pointer-events: auto;
}
.auth-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.auth-modal-content {
  position: relative; z-index: 1;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px 24px;
  width: 380px; max-width: 92vw;
  box-shadow: var(--shadow-xl);
  transform: translateY(12px);
  transition: transform .25s var(--ease);
}
.auth-modal-open .auth-modal-content {
  transform: translateY(0);
}
.auth-modal-close {
  position: absolute; top: 12px; right: 12px;
  background: none; border: none; color: var(--muted);
  font-size: 1.4rem; cursor: pointer; line-height: 1;
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; transition: background .15s;
}
.auth-modal-close:hover { background: var(--bg3); }

/* Auth value proposition */
.auth-value-prop {
  text-align: center; margin-bottom: 20px;
}
.auth-value-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,56,92,.1); color: #FF385C;
  margin-bottom: 12px;
}
.auth-value-title {
  font-size: 1.05rem; font-weight: 700; color: var(--text);
  margin-bottom: 6px;
}
.auth-value-desc {
  font-size: .8rem; color: var(--muted); line-height: 1.5;
  margin-bottom: 14px;
}
.auth-value-features {
  display: flex; justify-content: center; gap: 16px; flex-wrap: wrap;
}
.auth-feature {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .7rem; font-weight: 500; color: var(--text);
  background: var(--bg3); padding: 5px 10px;
  border-radius: 16px; white-space: nowrap;
}
.auth-feature svg { color: var(--accent); flex-shrink: 0; }

/* Mobile: full-height bottom-sheet style */
@media (max-width: 960px) {
  .auth-modal { align-items: flex-end; }
  .auth-modal-content {
    width: 100%; max-width: 100%;
    max-height: 95vh; max-height: 95dvh;
    overflow-y: auto;
    border-radius: 16px 16px 0 0;
    padding: 20px 20px calc(env(safe-area-inset-bottom, 20px) + 24px);
    -webkit-overflow-scrolling: touch;
  }
  /* Compact value prop on mobile */
  .auth-value-icon { width: 40px; height: 40px; margin-bottom: 8px; }
  .auth-value-icon svg { width: 22px; height: 22px; }
  .auth-value-title { font-size: .95rem; margin-bottom: 4px; }
  .auth-value-desc { font-size: .75rem; margin-bottom: 10px; }
  .auth-value-prop { margin-bottom: 14px; }
  .auth-value-features { gap: 8px; }
  .auth-feature { font-size: .65rem; padding: 4px 8px; }
  .auth-modal:has(.board-modal-content) {
    align-items: center;
  }
  .board-modal-content {
    width: calc(100% - 40px); border-radius: var(--radius-md);
    padding: 24px 20px;
  }
  .board-modal-cancel,
  .board-modal-content .auth-submit-btn {
    min-height: 44px;
  }
}

/* Auth tabs */
.auth-tabs {
  display: flex; gap: 0; margin-bottom: 20px;
  border-bottom: 1px solid var(--border); padding-bottom: 0;
}
.auth-tab {
  flex: 1; padding: 10px 0; background: none; border: none;
  color: var(--muted); font-size: .85rem; font-weight: 600;
  cursor: pointer; border-bottom: 2px solid transparent;
  transition: all .2s var(--ease);
}
.auth-tab.active {
  color: var(--text); border-bottom-color: var(--accent);
}

/* Auth forms */
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-form[hidden] { display: none; }
.auth-input {
  width: 100%; padding: 12px 14px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text);
  font-size: .85rem; font-family: inherit;
  transition: border-color .2s;
  outline: none;
}
.auth-input:focus { border-color: var(--accent); }
.auth-input::placeholder { color: var(--muted2); }

.auth-submit-btn {
  width: 100%; padding: 12px; border: none;
  background: var(--accent); color: #fff;
  border-radius: var(--radius-sm); font-size: .85rem;
  font-weight: 600; cursor: pointer;
  transition: opacity .2s;
}
.auth-submit-btn:hover { opacity: .9; }
.auth-submit-btn:disabled { opacity: .5; cursor: not-allowed; }

.auth-divider {
  display: flex; align-items: center; gap: 12px;
  color: var(--muted2); font-size: .75rem;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

.auth-google-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 11px; border: 1px solid var(--border);
  background: var(--bg3); color: var(--text);
  border-radius: var(--radius-sm); font-size: .85rem;
  font-weight: 500; cursor: pointer;
  transition: background .2s;
}
.auth-google-btn:hover { background: var(--border); }

.auth-error {
  padding: 8px 12px; background: rgba(255,56,92,.1);
  border: 1px solid rgba(255,56,92,.2); border-radius: var(--radius-sm);
  color: #FF385C; font-size: .8rem;
}
.auth-success {
  padding: 8px 12px; background: rgba(52,199,89,.1);
  border: 1px solid rgba(52,199,89,.2); border-radius: var(--radius-sm);
  color: #34C759; font-size: .8rem;
}

/* ── Settings auth row ── */
.settings-auth-row {
  padding: 10px 16px; display: flex; align-items: center;
  justify-content: space-between; gap: 10px;
}
.settings-auth-info {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.settings-auth-email {
  font-size: .8rem; font-weight: 500; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.settings-auth-synced {
  font-size: .65rem; color: #34C759; font-weight: 500;
}
.settings-signin-btn, .settings-signout-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 14px; border: 1px solid var(--border);
  background: var(--bg3); color: var(--text);
  border-radius: 20px; font-size: .75rem; font-weight: 600;
  cursor: pointer; transition: background .2s;
  white-space: nowrap;
}
.settings-signin-btn:hover, .settings-signout-btn:hover {
  background: var(--border);
}
.settings-signout-btn {
  color: var(--muted); font-weight: 500;
}

/* ════════════════════════════════════════════════════
   Board Header (Airbnb Wishlist style)
   ════════════════════════════════════════════════════ */

.board-header {
  padding: 16px 24px 14px;
  border-bottom: 1px solid var(--border);
  position: relative; z-index: 2;
}
/* Row 1: Board name + chevron (clickable → dropdown) */
.board-header-row {
  display: flex; align-items: center; gap: 6px;
  cursor: pointer; padding: 4px 0;
}
.board-header-row:hover .board-header-name { color: var(--accent); }
.board-header-name {
  font-size: .95rem; font-weight: 700; color: var(--text);
  transition: color .15s;
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.board-header-chevron {
  flex-shrink: 0; color: var(--muted);
  transition: transform .2s var(--ease);
}
.board-header-chevron.open { transform: rotate(180deg); }

/* Row 2: description (if exists) */
.board-header-desc {
  font-size: .75rem; color: var(--muted); font-weight: 400;
  line-height: 1.4; margin-top: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Row 3: count + action icons */
.board-header-meta {
  display: flex; align-items: center; gap: 4px;
  margin-top: 8px;
}
.board-header-count {
  flex: 1; font-size: .7rem; color: var(--muted2); font-weight: 500;
}
.board-action-btn {
  width: 28px; height: 28px; border-radius: 50%;
  background: none; border: 1px solid transparent;
  color: var(--muted2); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .15s; flex-shrink: 0;
}
.board-action-btn:hover { background: var(--bg3); color: var(--text); border-color: var(--border); }
.board-action-btn.danger:hover { color: #FF385C; border-color: rgba(255,56,92,.3); }

/* Board dropdown — absolute overlay */
@keyframes board-dd-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
.board-dropdown {
  position: absolute; top: 100%; left: 16px; right: 16px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  z-index: 100; max-height: 320px; overflow-y: auto;
  padding: 4px;
  animation: board-dd-in .15s var(--ease);
}
.board-dropdown[hidden] { display: none; }

.board-dropdown-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 8px 10px;
  background: none; border: none; color: var(--text);
  font-size: .78rem; text-align: left; cursor: pointer;
  border-radius: 6px; transition: background .15s;
}
.board-dropdown-item:hover { background: rgba(255,255,255,.05); }
.board-dropdown-item.active { color: var(--accent); font-weight: 600; }
.dd-check {
  width: 16px; flex-shrink: 0; color: var(--accent); opacity: 0;
}
.board-dropdown-item.active .dd-check { opacity: 1; }
.dd-name {
  flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.dd-count { font-size: .65rem; color: var(--muted2); flex-shrink: 0; }
.board-dropdown-sep {
  border: none; border-top: 1px solid var(--border);
  margin: 4px 0;
}
.board-dropdown-create {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 8px 10px;
  background: none; border: none; color: var(--accent);
  font-size: .78rem; font-weight: 600; text-align: left;
  cursor: pointer; border-radius: 6px; transition: background .15s;
}
.board-dropdown-create:hover { background: rgba(255,56,92,.06); }

/* ════════════════════════════════════════════════════
   Board Modal (create/edit)
   ════════════════════════════════════════════════════ */

.board-modal-content {
  width: 360px; max-width: 100%;
}
.board-modal-title {
  font-size: .95rem; font-weight: 700; color: var(--text);
  margin-bottom: 16px;
}
.board-desc-input {
  resize: vertical; min-height: 50px;
}
.board-modal-actions {
  display: flex; gap: 10px; margin-top: 8px;
}
.board-modal-cancel {
  flex: 1; padding: 10px; border: 1px solid var(--border);
  background: var(--bg3); color: var(--text);
  border-radius: var(--radius-sm); font-size: .8rem;
  font-weight: 500; cursor: pointer;
  transition: background .2s;
}
.board-modal-cancel:hover { background: var(--border); }

/* Delete board modal */
.delete-board-modal-content { text-align: center; }
.delete-board-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,56,92,.1); color: #FF385C;
  margin-bottom: 12px;
}
.delete-board-msg {
  font-size: .85rem; color: var(--muted); line-height: 1.5;
  margin-bottom: 8px;
}
.delete-board-name-wrap {
  font-size: .85rem; color: var(--text); margin-bottom: 16px;
}
.delete-board-btn {
  background: #FF385C !important;
}
.delete-board-btn:hover { opacity: .9; }
.delete-board-btn:disabled { opacity: .5; }

/* ════════════════════════════════════════════════════
   Board Picker (multi-board popover)
   ════════════════════════════════════════════════════ */

.board-picker {
  position: fixed; z-index: 10001;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  padding: 12px; min-width: 200px; max-width: 280px;
}
.board-picker-title {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); margin-bottom: 8px;
}
.board-picker-list { display: flex; flex-direction: column; gap: 6px; }
.board-picker-item {
  display: flex; align-items: center; gap: 8px;
  font-size: .8rem; color: var(--text); cursor: pointer;
  padding: 6px 8px; border-radius: 6px; transition: background .15s;
}
.board-picker-item:hover { background: var(--bg3); }
.board-picker-item input[type="checkbox"] {
  accent-color: var(--accent);
}

/* ════════════════════════════════════════════════════
   Status Chips (pill-shaped with tinted bg)
   ════════════════════════════════════════════════════ */

.board-status-chip {
  display: inline-flex; align-items: center; gap: 3px;
  border: none; cursor: default;
  font-size: .65rem; font-weight: 600; line-height: 1;
  padding: 3px 8px; border-radius: 10px;
  white-space: nowrap; margin-top: 2px; width: fit-content;
}
.board-status-chip[data-status="want_to_go"] {
  background: rgba(255,56,92,.1); color: #FF385C;
}
.board-status-chip[data-status="visited"] {
  background: rgba(52,199,89,.1); color: #34C759;
}
.board-status-chip[data-status="favorite"] {
  background: rgba(255,214,10,.1); color: #E5A500;
}

/* ════════════════════════════════════════════════════
   Board Notes (inline expandable)
   ════════════════════════════════════════════════════ */

.board-city-notes-preview {
  font-size: .7rem; color: var(--muted); margin-top: 3px;
  font-style: italic; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer; display: flex; align-items: center; gap: 4px;
  transition: color .15s;
}
.board-city-notes-preview:hover { color: var(--text); }
.board-city-notes-preview svg { flex-shrink: 0; opacity: .5; }

.board-add-note-link {
  font-size: .7rem; color: var(--muted2);
  cursor: pointer; margin-top: 3px;
  background: none; border: none; padding: 0;
  font-family: inherit; transition: color .15s;
}
.board-add-note-link:hover { color: var(--muted); }

.board-notes-input {
  width: 100%; margin-top: 6px; padding: 8px 10px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text);
  font-size: .75rem; font-family: inherit;
  resize: vertical; min-height: 48px;
  outline: none; transition: border-color .15s;
}
.board-notes-input:focus { border-color: var(--accent); }
.board-notes-input::placeholder { color: var(--muted2); }

/* ════════════════════════════════════════════════════
   Board City Card overrides
   ════════════════════════════════════════════════════ */

/* Larger image for board cards */
.board-city-card .itin-city-img {
  width: 80px; height: 80px; border-radius: 12px;
}
/* Remove button — top-right corner of card */
.board-city-card .itin-city-remove {
  position: absolute; top: 8px; right: 0;
  width: 24px; height: 24px;
  background: none; box-shadow: none;
  z-index: 2; opacity: 0; transition: opacity .15s;
}
.board-city-card:hover .itin-city-remove { opacity: 1; }
.board-city-card .itin-city-remove:hover { background: rgba(255,69,58,.15); }
/* Separator between board cards */
.board-city-card { border-bottom: 1px solid var(--border); border-radius: 0; }
.board-city-card:last-child { border-bottom: none; }
.board-city-card:hover { background: rgba(255,255,255,.02); }

/* ════════════════════════════════════════════════════
   Board Empty State
   ════════════════════════════════════════════════════ */

.board-empty-state {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 12px;
  padding: 48px 24px; text-align: center;
}
.board-empty-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--bg3);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted2); opacity: .7;
}
.board-empty-title {
  font-size: .85rem; font-weight: 600; color: var(--text);
  line-height: 1.4;
}
.board-empty-subtitle {
  font-size: .75rem; color: var(--muted); line-height: 1.4;
}
.board-create-first-btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px; padding: 10px 20px;
  background: var(--accent); color: #fff; border: none;
  border-radius: 20px; font-size: .8rem; font-weight: 600;
  cursor: pointer; transition: opacity .2s; font-family: inherit;
}
.board-create-first-btn:hover { opacity: .9; }
.board-create-first-btn svg { flex-shrink: 0; }

/* ════════════════════════════════════════════════════
   Shared Board Banner
   ════════════════════════════════════════════════════ */

.shared-board-banner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px; margin-bottom: 12px;
  background: rgba(255,56,92,.08); border: 1px solid rgba(255,56,92,.15);
  border-radius: var(--radius-sm); gap: 10px;
}
.shared-board-info {
  display: flex; flex-direction: column; gap: 2px;
  font-size: .8rem; color: var(--text); min-width: 0;
}
.shared-board-viewing {
  font-size: .65rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted);
}
.shared-board-by {
  font-size: .7rem; color: var(--muted);
}
.shared-board-copy {
  padding: 6px 12px; border: none;
  background: var(--accent); color: #fff;
  border-radius: 16px; font-size: .75rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: opacity .2s;
}
.shared-board-copy:hover { opacity: .9; }

/* ════════════════════════════════════════════════════
   Collaborative Board — Notifications Bell
   ════════════════════════════════════════════════════ */

.notif-btn-wrap {
  position: relative;
}
.notif-btn {
  position: relative;
}
.notif-badge {
  position: absolute; top: -2px; right: -2px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--accent); color: #fff;
  border-radius: 8px; font-size: .6rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  line-height: 1; pointer-events: none;
}
.notif-dropdown {
  position: absolute; top: 100%; right: 0; margin-top: 6px;
  width: 320px; max-height: 360px; overflow-y: auto;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  z-index: 1000; padding: 8px 0;
}
.notif-dropdown-title {
  padding: 8px 14px; font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted);
}
.notif-list { display: flex; flex-direction: column; }
.notif-item {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  transition: background .15s;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: rgba(255,255,255,.03); }
.notif-item-text {
  font-size: .8rem; color: var(--text); line-height: 1.4;
}
.notif-item-text strong { font-weight: 600; }
.notif-item-actions {
  display: flex; gap: 8px;
}
.notif-accept-btn, .notif-decline-btn {
  padding: 4px 12px; border: none; border-radius: 12px;
  font-size: .7rem; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: opacity .15s;
}
.notif-accept-btn {
  background: var(--accent); color: #fff;
}
.notif-decline-btn {
  background: var(--bg3); color: var(--muted);
}
.notif-accept-btn:hover, .notif-decline-btn:hover { opacity: .85; }
.notif-empty {
  padding: 20px 14px; text-align: center;
  font-size: .8rem; color: var(--muted2);
}

/* ════════════════════════════════════════════════════
   Collaborative Board — Invite Modal
   ════════════════════════════════════════════════════ */

.invite-modal-content { max-width: 420px; }
.invite-board-name {
  font-size: .8rem; color: var(--muted); margin-bottom: 14px;
  font-style: italic;
}
.invite-label {
  display: block; font-size: .75rem; font-weight: 600;
  color: var(--text); margin-bottom: 4px; margin-top: 12px;
}
.invite-emails-input {
  resize: vertical; min-height: 48px; font-family: inherit;
}
.invite-hint {
  display: block; font-size: .65rem; color: var(--muted2);
  margin-top: 2px; margin-bottom: 8px;
}
.invite-role-select {
  width: 100%; padding: 8px 10px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text);
  font-size: .8rem; font-family: inherit; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.invite-members-section {
  margin-top: 16px; padding-top: 12px;
  border-top: 1px solid var(--border);
}
.invite-members-title {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); margin-bottom: 8px;
}
.invite-members-list {
  display: flex; flex-direction: column; gap: 4px;
}
.invite-member-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: var(--radius-sm);
  font-size: .8rem;
}
.invite-member-row:hover { background: rgba(255,255,255,.03); }
.invite-member-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--bg3); display: flex; align-items: center;
  justify-content: center; font-size: .65rem; font-weight: 700;
  color: var(--muted); flex-shrink: 0;
}
.invite-member-info {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
}
.invite-member-name {
  font-size: .8rem; font-weight: 500; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.invite-member-email {
  font-size: .65rem; color: var(--muted2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.invite-member-role {
  font-size: .6rem; font-weight: 600; padding: 2px 6px;
  border-radius: 8px; background: var(--bg3); color: var(--muted);
  text-transform: uppercase; letter-spacing: .02em;
}
.invite-member-status {
  font-size: .6rem; font-weight: 600; padding: 2px 6px;
  border-radius: 8px;
}
.invite-member-status.pending {
  background: rgba(255,159,10,.12); color: #ff9f0a;
}
.invite-member-status.accepted {
  background: rgba(52,199,89,.12); color: #34C759;
}
.invite-member-remove {
  background: none; border: none; color: var(--muted2);
  cursor: pointer; padding: 2px; opacity: 0;
  transition: opacity .15s, color .15s;
}
.invite-member-row:hover .invite-member-remove { opacity: 1; }
.invite-member-remove:hover { color: #ff453a; }
.invite-feedback {
  margin-top: 8px; padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: .8rem; font-weight: 500;
}
.invite-feedback.success {
  background: rgba(52,199,89,.1); color: #34C759;
}
.invite-feedback.error {
  background: rgba(255,69,58,.1); color: #ff453a;
}

/* ════════════════════════════════════════════════════
   Collaborative Board — Invite Button & "Added by"
   ════════════════════════════════════════════════════ */

.board-invite-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border: 1px solid var(--border);
  background: transparent; color: var(--muted);
  border-radius: 14px; font-size: .65rem; font-weight: 600;
  cursor: pointer; transition: all .15s; font-family: inherit;
}
.board-invite-btn:hover {
  border-color: var(--accent); color: var(--accent);
}
.board-members-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: .65rem; color: var(--muted); margin-left: 4px;
}
.board-members-badge svg { opacity: .6; }
.board-city-added-by {
  font-size: .6rem; color: var(--muted2); margin-top: 2px;
  display: flex; align-items: center; gap: 3px;
}
.board-city-added-by .added-by-avatar {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg3); display: inline-flex; align-items: center;
  justify-content: center; font-size: .45rem; font-weight: 700;
  color: var(--muted);
}

/* ════════════════════════════════════════════════════
   Migration Prompt
   ════════════════════════════════════════════════════ */

.migrate-message {
  font-size: .85rem; color: var(--muted); line-height: 1.5;
  margin-bottom: 16px;
}