/* FAST - 交通预测页面样式（低保真） */
:root {
  --top-chrome-height: 132px;
  --glass-blue-bg: linear-gradient(180deg, rgba(37, 99, 235, 0.48) 0%, rgba(14, 116, 144, 0.34) 100%);
  --glass-blue-bg-strong: linear-gradient(180deg, rgba(29, 78, 216, 0.66) 0%, rgba(8, 145, 178, 0.5) 100%);
  --glass-blue-border: rgba(191, 219, 254, 0.55);
  --glass-blue-shadow: 0 14px 28px rgba(14, 116, 144, 0.2), inset 0 1px 0 rgba(255,255,255,0.24);
  --glass-blue-text: #eff6ff;
  --surface-bg: linear-gradient(180deg, #edf5ff 0%, #e7f1fb 100%);
  --surface-panel: linear-gradient(180deg, rgba(255,255,255,0.88) 0%, rgba(239,246,255,0.82) 100%);
  --surface-panel-strong: linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(226,240,255,0.9) 100%);
  --surface-border: rgba(148, 163, 184, 0.22);
  --surface-shadow: 0 14px 30px rgba(148, 163, 184, 0.14);
  --surface-text-soft: #516277;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background:
    radial-gradient(circle at top left, rgba(125, 211, 252, 0.2) 0%, rgba(125, 211, 252, 0) 34%),
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.18) 0%, rgba(96, 165, 250, 0) 30%),
    linear-gradient(180deg, #eef5fc 0%, #e4eef9 100%);
  color: #1a1a1a;
  line-height: 1.4;
  min-height: 100vh;
}
.hidden { display: none !important; }
.app {
  max-width: 1280px;
  margin: 0 auto;
  background: var(--surface-bg);
  min-height: 100vh;
  box-shadow: 0 24px 60px rgba(148, 163, 184, 0.18);
}

/* ========== 顶栏 ========== */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  border-bottom: 1px solid rgba(191, 219, 254, 0.58);
  gap: 16px;
  flex-wrap: nowrap; /* changed */
  background: #ffffff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
  z-index: 4200;
}
.logo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.25rem; color: inherit; text-decoration: none; cursor: pointer; }
.header-center-links { display: flex; align-items: center; gap: 18px; margin-left: 12px; margin-right: auto; }
.header-center-link { font-size: 16px; font-weight: 800; letter-spacing: 0.05em; color: #315272; text-decoration: none; }
.header-center-link:hover { color: #12385f; }
.brand-logo-img {
  width: 152px;
  height: 62px;
  max-height: 62px;
  object-fit: contain;
  display: block;
}
.brand-logo-text { display: none; }
.header-right { display: flex; align-items: center; gap: 16px; position: relative; z-index: 4300; }
.header-right span { cursor: pointer; }
.guest-auth-actions { display: flex; align-items: center; gap: 10px; }
.guest-auth-actions.hidden { display: none !important; }
.btn-header-secondary,
.btn-header-login {
  background: var(--glass-blue-bg);
  color: var(--glass-blue-text);
  padding: 10px 20px;
  border-radius: 14px;
  border: 1px solid var(--glass-blue-border);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--glass-blue-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-shadow: 0 1px 2px rgba(15, 23, 42, 0.24);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.btn-header-secondary:hover,
.btn-header-login:hover {
  background: var(--glass-blue-bg-strong);
  color: #ffffff;
  border-color: rgba(219, 234, 254, 0.72);
  box-shadow: 0 18px 32px rgba(37, 99, 235, 0.26), inset 0 1px 0 rgba(255,255,255,0.28);
  transform: translateY(-1px);
}
.user-menu-wrap { display: flex; align-items: center; gap: 4px; position: relative; cursor: pointer; z-index: 4400; }
.user-menu-wrap.hidden { display: none !important; }
#header-login-btn.hidden { display: none !important; }
.user-dropdown { display: none; position: absolute; top: 100%; right: 0; margin-top: 8px; min-width: 220px; background: #fff; border: 2px solid #1a1a1a; border-radius: 6px; padding: 12px 0; box-shadow: 0 12px 30px rgba(15,23,42,0.18); z-index: 4500; }
.user-menu-wrap.open .user-dropdown { display: block; }
.user-dropdown-head { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; color: #666; padding: 0 16px 6px; }
.user-dropdown-name { font-size: 16px; font-weight: 700; padding: 0 16px 12px; border-bottom: 1px solid #eee; margin-bottom: 8px; }
.user-dropdown-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: 14px; color: #1a1a1a; text-decoration: none; border: none; background: none; width: 100%; text-align: left; cursor: pointer; font-family: inherit; }
.user-dropdown-item:hover { background: #f5f5f5; }
.user-dropdown-item.logout { color: #dc2626; font-weight: 500; }
.icon-profile { width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3C/svg%3E") center/contain no-repeat; flex-shrink: 0; }
.icon-saved { width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2'%3E%3Cpath d='M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3Cpath d='M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16'/%3E%3Cpath d='M16 21h5v-5'/%3E%3C/svg%3E") center/contain no-repeat; flex-shrink: 0; }
.icon-settings { width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E") center/contain no-repeat; flex-shrink: 0; }
.icon-logout { width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E") center/contain no-repeat; flex-shrink: 0; }
.icon-envelope { width: 18px; height: 18px; flex-shrink: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E") center/contain no-repeat; }
.icon-lock { width: 18px; height: 18px; flex-shrink: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center/contain no-repeat; }
.icon-people { width: 18px; height: 18px; flex-shrink: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E") center/contain no-repeat; }

/* 图标（简化形状） */
.icon-pin { display: inline-block; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center/contain no-repeat; }
.icon-pin.small { width: 12px; height: 12px; }
.icon-search { width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") center/contain no-repeat; flex-shrink: 0; }
.icon-bell { width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E") center/contain no-repeat; }
.icon-user {
  width: 28px;
  height: 28px;
  border: 1px solid #d1d5db;
  border-radius: 50%;
  background: #f8fafc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.8'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20a8 8 0 0 1 16 0'/%3E%3C/svg%3E") center/72% no-repeat;
}
.icon-chevron-down { width: 16px; height: 16px; border: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat; }
.icon-trend-up { width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2'%3E%3Cpath d='m22 7-8.5 8.5-5-5L2 17'/%3E%3Cpath d='M16 7h6v6'/%3E%3C/svg%3E") center/contain no-repeat; }
.icon-warning { width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2'%3E%3Cpath d='m10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") center/contain no-repeat; }
.icon-warning.red { filter: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2'%3E%3Cpath d='m10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") center/contain no-repeat; }
.icon-chart { width: 24px; height: 24px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M18 17V9'/%3E%3Cpath d='M13 17V5'/%3E%3Cpath d='M8 17v-3'/%3E%3C/svg%3E") center/contain no-repeat; }
.icon-cloud { width: 24px; height: 24px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2'%3E%3Cpath d='M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9z'/%3E%3C/svg%3E"); }
.icon-cloud.big { width: 48px; height: 48px; background-size: contain; }
.icon-plane { width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2'%3E%3Cpath d='M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.5c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2l-1.8-8.2L16 11l8.2 1.8c.5.1.9-.1 1.2-.4.3-.4.4-.9.2-1.4z'/%3E%3C/svg%3E") center/contain no-repeat; }
.icon-info { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid #333; border-radius: 50%; font-size: 11px; font-weight: 700; vertical-align: middle; }
.icon-info::after { content: "i"; }
.icon-close { font-size: 1.25rem; cursor: pointer; }
.icon-traffic { display: inline-block; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Ccircle cx='12' cy='7' r='1.5' fill='%23ef4444'/%3E%3Ccircle cx='12' cy='12' r='1.5' fill='%23eab308'/%3E%3Ccircle cx='12' cy='17' r='1.5' fill='%2322c55e'/%3E%3C/svg%3E") center/contain no-repeat; }
.icon-bell.large { width: 64px; height: 64px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='1.5'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E") center/contain no-repeat; margin: 0 auto 16px; display: block; }
.icon-humidity, .icon-wind, .icon-pressure, .icon-visibility { width: 24px; height: 24px; display: block; margin-bottom: 4px; background: #6b9dc7; border-radius: 4px; }
.icon-rain { width: 32px; height: 32px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b9dc7' stroke-width='2'%3E%3Cpath d='M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9z'/%3E%3Cpath d='M10 22v-4'/%3E%3Cpath d='M14 22v-4'/%3E%3Cpath d='M12 18v-4'/%3E%3C/svg%3E") center/contain no-repeat; }

/* 主导航 */

.modern-navbar {
  display: flex;
  justify-content: flex-start;
  align-items: center; 
  padding: 0 24px;
  min-height: 88px; 
  background-color: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  gap: 48px;

  flex-wrap: nowrap;
  overflow: visible;
}

.modern-navbar .nav-tab, 
.modern-navbar .nav-dropbtn {
  display: flex !important;
  align-items: center !important;
  height: 48px !important;
  box-sizing: border-box !important;
}

.modern-navbar .brand-logo-img {
  height: 52px !important; 
  width: auto !important;
  margin-bottom: 0 !important;
}

.nav-center {
  display: flex;
  gap: 20px;
  align-items: center;
  height: 100%;
  margin: 0;
  padding: 0;

  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
}

.modern-navbar .header-right {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  margin: 0 0 0 auto !important;

  flex: 0 0 auto;
  white-space: nowrap;
  flex-wrap: nowrap;
}

.user-menu-wrap,
.guest-auth-actions {
  flex-shrink: 0;
}


.nav-tab {
  text-decoration: none;
  color: #64748b;
  font-weight: 600;
  font-size: 14px;
  height: 100%;
  display: flex;
  align-items: center;
  border-bottom: 2px solid transparent; 
  background: none;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  padding: 0 4px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.nav-tab:hover {
  color: #0f172a;
  background: none;
  box-shadow: none;
  transform: none;
}

.nav-tab.active {
  color: #2563eb; 
  font-weight: 700;
  background: none;
  box-shadow: none;
  border-bottom: 2px solid #2563eb;
}

.nav-dropdown {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.nav-dropbtn {
  color: #64748b;
  font-weight: 600;
  font-size: 14px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 4px;
  height: 100%;
}

.nav-dropdown:hover .nav-dropbtn {
  color: #0f172a;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 64px;
  left: 0;
  background-color: #ffffff;
  min-width: 180px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  border: 1px solid #e2e8f0;
  border-radius: 0 0 8px 8px;
  z-index: 1000;
  overflow: hidden;
}

.dropdown-content a {
  color: #475569;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.1s;
}

.dropdown-content a:hover {
  background-color: #f8fafc;
  color: #2563eb;
}

.nav-dropdown:hover .dropdown-content {
  display: block;
}

.nav-dropdown {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.nav-dropbtn {
  color: #64748b;
  font-weight: 600;
  font-size: 14px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 4px;
  height: 48px;
}

.nav-dropdown:hover .nav-dropbtn,
.nav-dropdown.open .nav-dropbtn {
  color: #0f172a;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #ffffff;
  min-width: 180px;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.14);
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  z-index: 5000;
  overflow: hidden;
  padding: 6px;
}

.dropdown-content a {
  color: #475569;
  padding: 10px 12px;
  text-decoration: none;
  display: block;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  transition: background 0.1s;
}

.dropdown-content a:hover {
  background-color: #f8fafc;
  color: #2563eb;
}

.nav-dropdown:hover .dropdown-content,
.nav-dropdown.open .dropdown-content {
  display: block;
}

@media (max-width: 1050px) {
  .modern-navbar {
    gap: 24px;
    padding: 0 18px;
  }

  .nav-center {
    gap: 14px;
  }

  .nav-tab,
  .nav-dropbtn {
    font-size: 13px;
    padding: 0 2px;
  }

  .modern-navbar .brand-logo-img {
    height: 46px !important;
  }

  .modern-navbar .header-right {
    gap: 10px;
  }
}


@media (max-width: 900px) {
  .modern-navbar {
    gap: 16px;
  }

  .nav-center {
    gap: 10px;
  }

  .nav-tab,
  .nav-dropbtn {
    font-size: 12px;
  }

  .modern-navbar .brand-logo-img {
    height: 40px !important;
  }
}


.home-pricing-actions {
  margin-top: auto;
  padding-top: 18px;
}

.home-plan-btn {
  width: 100%;
  min-height: 40px;
  border: 1px solid rgba(94, 234, 212, 0.45);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.72);
  color: #e2e8f0;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: 
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.home-plan-btn.featured {
  background: #5eead4;
  color: #0f172a;
}

.home-plan-btn:hover {
  background: rgba(94, 234, 212, 0.18);
  border-color: rgba(94, 234, 212, 0.9);
  color: #ffffff;
  box-shadow: 0 0 18px rgba(94, 234, 212, 0.35);
  transform: translateY(-1px);
}

.home-plan-btn.featured:hover {
  background: #7ff7e8;
  color: #07111f;
  box-shadow: 0 0 22px rgba(94, 234, 212, 0.55);
  transform: translateY(-1px);
}
/* 页面容器 */
.page {
  display: none;
  padding: 24px;
  background: transparent;
}
.page.active { display: block; }

#dashboard,
#map-view,
#route-planner,
#weather,
#habit-routes,
#alerts,
#alert-detail,
#profile,
#settings,
#admin-users,
.auth-page {
  background: transparent;
}

.summary-card,
.recent-updates-card,
.evidence-card,
.profile-page-card,
.settings-page-card,
.auth-card,
.weather-card,
.route-details-panel,
.alert-card,
.business-page-card,
.route-favorite-item,
.route-favorites-panel,
.camera-sidebar,
.map-area,
.route-map-area,
.feedback-sidebar,
.feedback-card,
.users-admin-card,
.users-table-wrap,
.feedback-history-wrap,
.habit-route-card,
.habit-route-panel,
.modal-box {
  background: var(--surface-panel) !important;
  border-color: var(--surface-border) !important;
  box-shadow: var(--surface-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.panel-sub,
.alerts-sub,
.weather-desc,
.profile-email,
.business-desc,
.saved-empty,
.route-favorite-item .meta,
.panel-row .label {
  color: var(--surface-text-soft);
}