/* ========================================
   时尚大气风格 - 全局样式
   ======================================== */

/* 基础全局样式 */
:root {
    /* 系统颜色 */
    --success: #67C23A;
    --warning: #E6A23C;
    --danger: #F56C6C;
    --info: #409EFF;
    
    /* 阴影 */
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.2);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.3);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.4);
    
    /* 圆角 */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    
    /* 过渡动画 */
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* 深色主题变量（默认）—— P2 全量收敛拍板：旧名别名化指向二代语义令牌 */
    --bg-primary: var(--color-bg-page);
    --bg-secondary: var(--color-bg-card);
    --bg-card: var(--color-bg-card);
    --bg-hover: var(--color-bg-hover);
    --text-primary: var(--color-text-primary);
    --text-secondary: var(--color-text-secondary);
    --text-muted: var(--color-text-muted);
    --border-color: var(--color-border);
    --border: var(--color-border);
    --primary-color: var(--color-primary);
    --primary-color-dark: var(--color-primary-active);
    --primary: var(--color-primary);
    --primary-dark: var(--color-primary-active);
    --primary-light: var(--color-primary-light);
    --bg-dark: var(--color-bg-page);
    --bg-hover-dark: var(--color-bg-hover);
    --white: #FFFFFF;
}

/* 浅色主题 —— P2 全量收敛拍板：旧名别名化，浅色野生值(#c9a227/#888/#f5f6f7)退役 */
:root[data-theme="light"],
[data-theme="light"] {
    --bg-primary: var(--color-bg-page);
    --bg-secondary: var(--color-bg-card);
    --bg-card: var(--color-bg-card);
    --bg-hover: var(--color-bg-hover);
    --text-primary: var(--color-text-primary);
    --text-secondary: var(--color-text-secondary);
    --text-muted: var(--color-text-muted);
    --border-color: var(--color-border);
    --border: var(--color-border);
    --primary-color: var(--color-primary);
    --primary-color-dark: var(--color-primary-active);
    --primary: var(--color-primary);
    --primary-dark: var(--color-primary-active);
    --primary-light: var(--color-primary-light);
    --bg-dark: var(--color-bg-page);
    --bg-hover-dark: var(--color-bg-hover);
    --white: #1a1a1a; /* 既有污染（AGENTS.md 铁律：需白处硬写 #fff），待单独治理 */
}

/* 全局样式重置 */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    width: 100%;
}

body {
    background: #0A0A14;
    background: linear-gradient(135deg, var(--bg-primary, #0A0A14) 0%, var(--bg-secondary, #1E1E2D) 100%);
    color: var(--text-primary, #FFFFFF);
    font-size: 14px;
    line-height: 1.6;
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
    overflow-x: hidden;
    width: 100%;
    padding-top: 70px;
    margin: 0;
}

a {
    color: var(--color-text-primary);
    text-decoration: none;
    transition: var(--transition);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

a:hover {
    color: var(--color-primary);
}

button, input[type="button"], input[type="submit"], input[type="reset"] {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    cursor: pointer;
}

[onclick], [role="button"] {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* ========================================
   全局头部导航样式 - 完全浏览器兼容
   ======================================== */
.global-header,
.global-header * {
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
}

.global-header {
    width: 100%;
    height: 70px;
    min-height: 70px;
    background: #0A0A14;
    background: linear-gradient(180deg, var(--bg-primary, #0A0A14) 0%, var(--bg-secondary, #1E1E2D) 100%);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.1));
    padding: 0 32px !important;
    margin: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    gap: 16px !important;
    position: fixed !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif !important;
    z-index: 900 !important;
    -webkit-box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,0.3));
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

.logo {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    position: relative;
    flex-shrink: 0;
}

.logo-img {
    max-height: 40px;
    max-width: 160px;
    object-fit: contain;
    display: block;
}

.logo-text {
    font-weight: 900;
    letter-spacing: 2px;
}

/* 动态渐变文字效果 */
.gradient-text {
    background: linear-gradient(
        90deg,
        var(--color-primary) 0%,
        var(--color-gold-a-light) 25%,
        var(--color-primary) 50%,
        var(--color-gold-a-dark) 75%,
        var(--color-primary) 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-flow 4s linear infinite;
}

.gradient-text:hover {
    animation: gradient-flow 1.5s linear infinite;
    text-shadow: 0 0 30px rgba(184, 144, 64, 0.4); /* P3方案C 野生金→金A */
}

@keyframes gradient-flow {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: 200% center;
    }
}

/* Logo光晕效果 */
.logo::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 200%;
    transform: translateY(-50%);
    background: radial-gradient(ellipse at center, rgba(184, 144, 64, 0.2) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: -1;
    filter: blur(10px);
}

.logo:hover::before {
    opacity: 1;
}

/* Logo下划线动画 */
.logo::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-gold-a-light));
    transition: all 0.3s ease;
    transform: translateX(-50%);
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(184, 144, 64, 0.5);
}

.logo:hover::after {
    width: 100%;
}

.city-select-wrapper {
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* 城市选择器触发按钮 - 完全浏览器兼容，稳定布局 */
.city-trigger {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 16px !important;
    background: rgba(255,255,255,0.05) !important;
    background: var(--bg-card, rgba(255,255,255,0.05)) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border: 1px solid var(--border-color, rgba(255,255,255,0.1)) !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    -webkit-transition: all 0.3s ease !important;
    transition: all 0.3s ease !important;
    transition: var(--transition, all 0.3s ease) !important;
    min-width: 120px !important;
    white-space: nowrap !important;
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
    height: auto !important;
    line-height: 1.4 !important;
    position: relative !important;
    z-index: 1 !important;
}

.city-trigger:hover {
    border-color: #FFB800 !important;
    border-color: var(--primary-color, #FFB800) !important;
}

.city-trigger .city-icon {
    font-size: 16px !important;
    line-height: 1 !important;
    -ms-flex-negative: 0 !important;
    flex-shrink: 0 !important;
}

.city-trigger .city-name {
    color: #FFFFFF !important;
    color: var(--text-primary, #FFFFFF) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

.city-trigger .city-arrow {
    color: rgba(255,255,255,0.5) !important;
    color: var(--text-muted, rgba(255,255,255,0.5)) !important;
    font-size: 10px !important;
    -webkit-transition: all 0.3s ease !important;
    transition: all 0.3s ease !important;
    transition: var(--transition, all 0.3s ease) !important;
    -ms-flex-negative: 0 !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
}

.city-trigger:hover .city-arrow {
    -webkit-transform: rotate(180deg) !important;
    -ms-transform: rotate(180deg) !important;
    transform: rotate(180deg) !important;
}

/* 城市下拉面板 - 防止初始闪烁，完全兼容 */
.city-panel {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    width: 500px !important;
    max-width: 95vw !important;
    max-height: 500px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #1E1E2D !important;
    background: var(--bg-secondary, #1E1E2D) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border: 1px solid var(--border-color, rgba(255,255,255,0.1)) !important;
    border-radius: 12px !important;
    margin-top: 8px !important;
    -webkit-box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
    box-shadow: var(--shadow-lg, 0 8px 32px rgba(0,0,0,0.4)) !important;
    z-index: 950 !important;
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
}

.city-panel.show {
    display: block !important;
}

/* 防闪烁初始化规则 */
.city-selector * {
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
}

.city-selector {
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 950 !important;
}

.nav-menu {
    display:-webkit-box !important;display:-ms-flexbox !important;display:flex !important;
    gap:2px !important;
    margin-left:auto !important;
    flex:1 !important;
    justify-content:center !important;
}

.nav-link {
    padding:8px 16px !important;
    border-radius:20px !important;
    font-weight:500 !important;
    font-size:14px !important;
    position:relative !important;
    -webkit-transition:all 0.3s ease !important;transition:all 0.3s ease !important;transition:var(--transition, all 0.3s ease) !important;
    display:inline-flex !important;
    align-items:center !important;
    -webkit-box-sizing:border-box !important;box-sizing:border-box !important;
    color:#FFFFFF;color:var(--text-primary, #FFFFFF);
    white-space:nowrap !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif !important;
}

.nav-link:hover {
    background:rgba(255,255,255,0.05);background:var(--bg-card, rgba(255,255,255,0.05));
    color:#FFB800;color:var(--primary-color, #FFB800);
}

.auth-buttons {
    display:-webkit-box;display:-ms-flexbox;display:flex;
    gap:8px;
    margin-left:8px;
    flex-shrink:0;
}

.auth-btn {
    padding:8px 18px;
    border-radius:22px;
    font-weight:600;
    font-size:13px;
    -webkit-transition:all 0.3s ease;transition:all 0.3s ease;transition:var(--transition, all 0.3s ease);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    -webkit-box-sizing:border-box;box-sizing:border-box;
    flex-shrink:0;
    white-space:nowrap;
}

.login-btn {
    background:transparent;
    color:rgba(255,255,255,0.7);color:var(--text-secondary, rgba(255,255,255,0.7));
    border:1px solid rgba(255,255,255,0.1);border:1px solid var(--border-color, rgba(255,255,255,0.1));
}

.login-btn:hover {
    background:rgba(255,255,255,0.05);background:var(--bg-card, rgba(255,255,255,0.05));
    border-color:#FFB800;border-color:var(--primary-color, #FFB800);
    color:#FFB800;color:var(--primary-color, #FFB800);
}

.register-btn {
    background:#FFB800;background:linear-gradient(135deg, var(--primary-color, #FFB800) 0%, var(--primary-color-dark, #FF9800) 100%);
    color:#0A0A14;color:var(--bg-primary, #0A0A14);
    -webkit-box-shadow:0 4px 16px rgba(0,0,0,0.2);box-shadow:0 4px 16px rgba(0,0,0,0.2);
}

.register-btn:hover {
    -webkit-transform:translateY(-2px);-ms-transform:translateY(-2px);transform:translateY(-2px);
    -webkit-box-shadow:0 6px 24px rgba(0,0,0,0.3);box-shadow:0 6px 24px rgba(0,0,0,0.3);
    color:#0A0A14;color:var(--bg-primary, #0A0A14);
}

/* ========================================
   内容区块通用样式 - 完全浏览器兼容
   ======================================== */
.content-box {
    margin:24px 40px;
    padding:28px;
    background:rgba(255,255,255,0.05);background:var(--bg-card, rgba(255,255,255,0.05));
    border-radius:16px;border-radius:var(--radius-lg, 16px);
    border:1px solid rgba(255,255,255,0.1);border:1px solid var(--border-color, rgba(255,255,255,0.1));
    -webkit-box-shadow:0 4px 16px rgba(0,0,0,0.3);box-shadow:0 4px 16px rgba(0,0,0,0.3);box-shadow:var(--shadow-md, 0 4px 16px rgba(0,0,0,0.3));
    -webkit-box-sizing:border-box;box-sizing:border-box;
}

/* 区块标题 */
.section-title {
    color:#FFFFFF;color:var(--text-primary, #FFFFFF);
    font-size:20px;
    font-weight:600;
    margin-bottom:24px;
    display:-webkit-box;display:-ms-flexbox;display:flex;
    -webkit-box-align:center;-ms-flex-align:center;align-items:center;
    gap:10px;
}

.section-title::before {
    content:'';
    width:4px;
    height:20px;
    background:#FFB800;background:linear-gradient(180deg, var(--primary-color, #FFB800) 0%, var(--primary-color-dark, #FF9800) 100%);
    border-radius:2px;
    display:inline-block;
}

/* ========================================
   卡片样式 - 完全浏览器兼容
   ======================================== */
.card {
    background:rgba(255,255,255,0.05);background:var(--bg-card, rgba(255,255,255,0.05));
    padding:20px;
    border-radius:10px;border-radius:var(--radius-md, 10px);
    border:1px solid rgba(255,255,255,0.1);border:1px solid var(--border-color, rgba(255,255,255,0.1));
    -webkit-transition:all 0.3s ease;transition:all 0.3s ease;transition:var(--transition, all 0.3s ease);
    position:relative;
    overflow:hidden;
    -webkit-box-sizing:border-box;box-sizing:border-box;
}

.card::before {
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:3px;
    background:#FFB800;background:linear-gradient(90deg, transparent 0%, var(--primary-color, #FFB800) 50%, transparent 100%);
    opacity:0;
    -webkit-transition:all 0.3s ease;transition:all 0.3s ease;transition:var(--transition, all 0.3s ease);
}

.card:hover {
    -webkit-transform:translateY(-4px);-ms-transform:translateY(-4px);transform:translateY(-4px);
    -webkit-box-shadow:0 8px 32px rgba(0,0,0,0.4);box-shadow:0 8px 32px rgba(0,0,0,0.4);box-shadow:var(--shadow-lg, 0 8px 32px rgba(0,0,0,0.4));
}

.card:hover::before {
    opacity:1;
}

/* ========================================
   按钮样式 - 完全浏览器兼容
   ======================================== */
.btn {
    display:inline-block;
    background:#FFB800;background:linear-gradient(135deg, var(--primary-color, #FFB800) 0%, var(--primary-color-dark, #FF9800) 100%);
    color:#0A0A14;color:var(--bg-primary, #0A0A14);
    border:none;
    padding:10px 20px;
    border-radius:6px;border-radius:var(--radius-sm, 6px);
    font-weight:600;
    font-size:13px;
    cursor:pointer;
    -webkit-transition:all 0.3s ease;transition:all 0.3s ease;transition:var(--transition, all 0.3s ease);
    -webkit-box-shadow:0 2px 8px rgba(0,0,0,0.15);box-shadow:0 2px 8px rgba(0,0,0,0.15);
    -webkit-box-sizing:border-box;box-sizing:border-box;
}

.btn:hover {
    -webkit-transform:translateY(-2px);-ms-transform:translateY(-2px);transform:translateY(-2px);
    -webkit-box-shadow:0 4px 16px rgba(0,0,0,0.2);box-shadow:0 4px 16px rgba(0,0,0,0.2);
    color:#0A0A14;color:var(--bg-primary, #0A0A14);
}

.btn-outline {
    background:transparent;
    border:1px solid #FFB800;border:1px solid var(--primary-color, #FFB800);
    color:#FFB800;color:var(--primary-color, #FFB800);
    -webkit-box-shadow:none;box-shadow:none;
}

.btn-outline:hover {
    background:#FFB800;background:var(--primary-color, #FFB800);
    color:#0A0A14;color:var(--bg-primary, #0A0A14);
}

/* ========================================
   标签/筛选按钮样式 - 完全浏览器兼容
   ======================================== */
.tag-filter {
    display:-webkit-box;display:-ms-flexbox;display:flex;
    gap:10px;
    margin-bottom:28px;
    -ms-flex-wrap:wrap;flex-wrap:wrap;
}

.tag-btn {
    padding:8px 20px;
    background:rgba(255,255,255,0.05);background:var(--bg-card, rgba(255,255,255,0.05));
    color:rgba(255,255,255,0.7);color:var(--text-secondary, rgba(255,255,255,0.7));
    border:1px solid rgba(255,255,255,0.1);border:1px solid var(--border-color, rgba(255,255,255,0.1));
    border-radius:20px;
    font-size:13px;
    font-weight:500;
    -webkit-transition:all 0.3s ease;transition:all 0.3s ease;transition:var(--transition, all 0.3s ease);
    cursor:pointer;
    display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;
}

.tag-btn:hover {
    background:#1E1E2D;background:var(--bg-secondary, #1E1E2D);
    border-color:#FFB800;border-color:var(--primary-color, #FFB800);
    color:#FFB800;color:var(--primary-color, #FFB800);
}

.tag-btn.active {
    background:#FFB800;background:linear-gradient(135deg, var(--primary-color, #FFB800) 0%, var(--primary-color-dark, #FF9800) 100%);
    color:#0A0A14;color:var(--bg-primary, #0A0A14);
    border-color:transparent;
    font-weight:600;
    -webkit-box-shadow:0 2px 8px rgba(0,0,0,0.15);box-shadow:0 2px 8px rgba(0,0,0,0.15);
}

/* ========================================
   网格布局 - 完全浏览器兼容
   ======================================== */
.grid-2 {
    display:-ms-grid;display:grid;
    -ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2, 1fr);
    gap:20px;
}

.grid-3 {
    display:-ms-grid;display:grid;
    -ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3, 1fr);
    gap:20px;
}

.grid-4 {
    display:-ms-grid;display:grid;
    -ms-grid-columns:(1fr)[4];grid-template-columns:repeat(4, 1fr);
    gap:20px;
}

/* ========================================
   列表样式 - 完全浏览器兼容
   ======================================== */
.list-item {
    background:rgba(255,255,255,0.05);background:var(--bg-card, rgba(255,255,255,0.05));
    padding:20px;
    border-radius:10px;border-radius:var(--radius-md, 10px);
    border:1px solid rgba(255,255,255,0.1);border:1px solid var(--border-color, rgba(255,255,255,0.1));
    -webkit-transition:all 0.3s ease;transition:all 0.3s ease;transition:var(--transition, all 0.3s ease);
    display:-webkit-box;display:-ms-flexbox;display:flex;
    gap:20px;
    -webkit-box-align:center;-ms-flex-align:center;align-items:center;
    -webkit-box-sizing:border-box;box-sizing:border-box;
}

.list-item:hover {
    background:#1E1E2D;background:var(--bg-secondary, #1E1E2D);
    -webkit-transform:translateX(4px);-ms-transform:translateX(4px);transform:translateX(4px);
}

/* ========================================
   商家页面样式 - 完全浏览器兼容
   ======================================== */
.merchant-page {
    min-height:calc(100vh - 130px);
}

.hero-section {
    background:rgba(255,255,255,0.05);background:var(--bg-card, rgba(255,255,255,0.05));
    padding:48px 48px 32px;
    text-align:center;
    border-bottom:1px solid rgba(255,255,255,0.1);border-bottom:1px solid var(--border-color, rgba(255,255,255,0.1));
}

.hero-title {
    font-size:32px;
    font-weight:700;
    background:#FFB800;background:linear-gradient(135deg, var(--primary-color, #FFB800) 0%, var(--primary-color-dark, #FF9800) 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    margin-bottom:12px;
}

.hero-desc {
    color:rgba(255,255,255,0.7);color:var(--text-secondary, rgba(255,255,255,0.7));
    font-size:16px;
    margin-bottom:32px;
}

.search-bar {
    display:-webkit-box;display:-ms-flexbox;display:flex;
    -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
    gap:12px;
    max-width:600px;
    margin:0 auto;
}

.search-input-wrapper {
    -webkit-box-flex:1;-ms-flex:1;flex:1;
    display:-webkit-box;display:-ms-flexbox;display:flex;
    -webkit-box-align:center;-ms-flex-align:center;align-items:center;
    background:rgba(255,255,255,0.05);background:var(--bg-card, rgba(255,255,255,0.05));
    border:1px solid rgba(255,255,255,0.1);border:1px solid var(--border-color, rgba(255,255,255,0.1));
    border-radius:28px;
    padding:0 20px;
    -webkit-transition:all 0.3s ease;transition:all 0.3s ease;transition:var(--transition, all 0.3s ease);
    -webkit-box-sizing:border-box;box-sizing:border-box;
}

.search-input-wrapper:focus-within {
    border-color:#FFB800;border-color:var(--primary-color, #FFB800);
}

.search-input {
    -webkit-box-flex:1;-ms-flex:1;flex:1;
    background:transparent;
    border:none;
    outline:none;
    color:#FFFFFF;color:var(--text-primary, #FFFFFF);
    font-size:14px;
    padding:14px 0;
    -webkit-box-sizing:border-box;box-sizing:border-box;
}

.search-input::placeholder {
    color:rgba(255,255,255,0.5);color:var(--text-muted, rgba(255,255,255,0.5));
}

.search-btn {
    background:#FFB800;background:linear-gradient(135deg, var(--primary-color, #FFB800) 0%, var(--primary-color-dark, #FF9800) 100%);
    color:#0A0A14;color:var(--bg-primary, #0A0A14);
    border:none;
    padding:14px 32px;
    border-radius:28px;
    font-weight:600;
    font-size:14px;
    cursor:pointer;
    -webkit-transition:all 0.3s ease;transition:all 0.3s ease;transition:var(--transition, all 0.3s ease);
    -webkit-box-shadow:0 4px 16px rgba(0,0,0,0.15);box-shadow:0 4px 16px rgba(0,0,0,0.15);
    -webkit-box-sizing:border-box;box-sizing:border-box;
}

.search-btn:hover {
    -webkit-transform:translateY(-2px);-ms-transform:translateY(-2px);transform:translateY(-2px);
    -webkit-box-shadow:0 6px 24px rgba(0,0,0,0.2);box-shadow:0 6px 24px rgba(0,0,0,0.2);
}

.main-content {
    display:-webkit-box;display:-ms-flexbox;display:flex;
    gap:32px;
    padding:32px 48px;
}

.sidebar {
    width:260px;
    -ms-flex-negative:0;flex-shrink:0;
}

.filter-section {
    background:rgba(255,255,255,0.05);background:var(--bg-card, rgba(255,255,255,0.05));
    border-radius:16px;border-radius:var(--radius-lg, 16px);
    padding:24px;
    margin-bottom:16px;
    border:1px solid rgba(255,255,255,0.1);border:1px solid var(--border-color, rgba(255,255,255,0.1));
    -webkit-box-sizing:border-box;box-sizing:border-box;
}

.filter-title {
    color:#FFFFFF;color:var(--text-primary, #FFFFFF);
    font-size:14px;
    font-weight:600;
    margin-bottom:16px;
    padding-bottom:12px;
    border-bottom:1px solid rgba(255,255,255,0.1);border-bottom:1px solid var(--border-color, rgba(255,255,255,0.1));
}

.filter-list {
    display:-webkit-box;display:-ms-flexbox;display:flex;
    -webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column;
    gap:8px;
}

.filter-item {
    display:-webkit-box;display:-ms-flexbox;display:flex;
    -webkit-box-align:center;-ms-flex-align:center;align-items:center;
    gap:10px;
    padding:10px 12px;
    border-radius:8px;
    cursor:pointer;
    -webkit-transition:all 0.3s ease;transition:all 0.3s ease;transition:var(--transition, all 0.3s ease);
    position:relative;
    -webkit-box-sizing:border-box;box-sizing:border-box;
}

.filter-item:hover {
    background:#1E1E2D;background:var(--bg-secondary, #1E1E2D);
}

.filter-item.active {
    background:rgba(255,255,255,0.05);background:var(--bg-card, rgba(255,255,255,0.05));
    border:1px solid rgba(255,255,255,0.1);border:1px solid var(--border-color, rgba(255,255,255,0.1));
}

.filter-item input[type="radio"] {
    display:none;
}

.filter-item span:first-of-type {
    color:rgba(255,255,255,0.7);color:var(--text-secondary, rgba(255,255,255,0.7));
    font-size:14px;
    -webkit-box-flex:1;-ms-flex:1;flex:1;
}

.filter-item.active span:first-of-type {
    color:#FFB800;color:var(--primary-color, #FFB800);
}

.filter-item .count {
    color:rgba(255,255,255,0.5);color:var(--text-muted, rgba(255,255,255,0.5));
    font-size:12px;
    background:#1E1E2D;background:var(--bg-secondary, #1E1E2D);
    padding:2px 8px;
    border-radius:10px;
    -webkit-box-sizing:border-box;box-sizing:border-box;
}

.merchant-list {
    -webkit-box-flex:1;-ms-flex:1;flex:1;
}

.merchant-card {
    background:rgba(255,255,255,0.05);background:var(--bg-card, rgba(255,255,255,0.05));
    border-radius:16px;border-radius:var(--radius-lg, 16px);
    overflow:hidden;
    border:1px solid rgba(255,255,255,0.1);border:1px solid var(--border-color, rgba(255,255,255,0.1));
    -webkit-transition:all 0.3s ease;transition:all 0.3s ease;transition:var(--transition, all 0.3s ease);
}

.merchant-card:hover {
    -webkit-transform:translateY(-4px);-ms-transform:translateY(-4px);transform:translateY(-4px);
    -webkit-box-shadow:0 8px 32px rgba(0,0,0,0.4);box-shadow:0 8px 32px rgba(0,0,0,0.4);box-shadow:var(--shadow-lg, 0 8px 32px rgba(0,0,0,0.4));
}

.card-image {
    position:relative;
    height:180px;
    overflow:hidden;
    background:#1E1E2D;background:var(--bg-secondary, #1E1E2D);
}

.card-content {
    padding:20px;
    -webkit-box-sizing:border-box;box-sizing:border-box;
}

.card-header {
    display:-webkit-box;display:-ms-flexbox;display:flex;
    -webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;
    -webkit-box-align:center;-ms-flex-align:center;align-items:center;
    margin-bottom:12px;
}

.card-title {
    color:#FFFFFF;color:var(--text-primary, #FFFFFF);
    font-size:18px;
    font-weight:600;
}

.rating {
    display:-webkit-box;display:-ms-flexbox;display:flex;
    -webkit-box-align:center;-ms-flex-align:center;align-items:center;
    gap:4px;
}

.score {
    color:#FFB800;color:var(--primary-color, #FFB800);
    font-weight:600;
    font-size:14px;
}

.review-count {
    color:rgba(255,255,255,0.5);color:var(--text-muted, rgba(255,255,255,0.5));
    font-size:12px;
}

.card-tags {
    display:-webkit-box;display:-ms-flexbox;display:flex;
    -ms-flex-wrap:wrap;flex-wrap:wrap;
    gap:8px;
    margin-bottom:12px;
}

.card-tags .tag {
    background:#1E1E2D;background:var(--bg-secondary, #1E1E2D);
    color:rgba(255,255,255,0.7);color:var(--text-secondary, rgba(255,255,255,0.7));
    padding:4px 10px;
    border-radius:4px;
    font-size:12px;
    display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;
}

.card-desc {
    color:rgba(255,255,255,0.5);color:var(--text-muted, rgba(255,255,255,0.5));
    font-size:13px;
    line-height:1.6;
    margin-bottom:16px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.card-footer {
    display:-webkit-box;display:-ms-flexbox;display:flex;
    -webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;
    -webkit-box-align:center;-ms-flex-align:center;align-items:center;
    padding-top:16px;
    border-top:1px solid rgba(255,255,255,0.1);border-top:1px solid var(--border-color, rgba(255,255,255,0.1));
}

.location {
    color:rgba(255,255,255,0.5);color:var(--text-muted, rgba(255,255,255,0.5));
    font-size:12px;
}

.view-detail {
    color:#FFB800;color:var(--primary-color, #FFB800);
    font-size:13px;
    font-weight:500;
    -webkit-transition:all 0.3s ease;transition:all 0.3s ease;transition:var(--transition, all 0.3s ease);
    display:inline-block;
}

.view-detail:hover {
    margin-left:4px;
}

.pagination {
    display:-webkit-box;display:-ms-flexbox;display:flex;
    -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
    -webkit-box-align:center;-ms-flex-align:center;align-items:center;
    gap:8px;
    margin-top:40px;
    padding-top:24px;
    border-top:1px solid rgba(255,255,255,0.1);border-top:1px solid var(--border-color, rgba(255,255,255,0.1));
}

.page-btn {
    background:rgba(255,255,255,0.05);background:var(--bg-card, rgba(255,255,255,0.05));
    border:1px solid rgba(255,255,255,0.1);border:1px solid var(--border-color, rgba(255,255,255,0.1));
    color:rgba(255,255,255,0.7);color:var(--text-secondary, rgba(255,255,255,0.7));
    padding:10px 18px;
    border-radius:8px;
    font-size:14px;
    cursor:pointer;
    -webkit-transition:all 0.3s ease;transition:all 0.3s ease;transition:var(--transition, all 0.3s ease);
    display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;
}

.page-btn:hover:not(.disabled) {
    border-color:#FFB800;border-color:var(--primary-color, #FFB800);
    color:#FFB800;color:var(--primary-color, #FFB800);
}

.page-btn.active {
    background:#FFB800;background:linear-gradient(135deg, var(--primary-color, #FFB800) 0%, var(--primary-color-dark, #FF9800) 100%);
    border-color:transparent;
    color:#0A0A14;color:var(--bg-primary, #0A0A14);
    font-weight:600;
}

.page-btn.disabled {
    opacity:0.4;
    cursor:not-allowed;
}

/* ========================================
   全局底部样式 - 完全浏览器兼容
   ======================================== */
.global-footer {
    width:100%;
    text-align:center;
    padding:32px 0;
    margin-top:60px;
    background:#1E1E2D;background:linear-gradient(180deg, transparent 0%, var(--bg-secondary, #1E1E2D) 100%);
    border-top:1px solid rgba(255,255,255,0.1);border-top:1px solid var(--border-color, rgba(255,255,255,0.1));
    -webkit-box-sizing:border-box;box-sizing:border-box;
}

.global-footer p {
    color:rgba(255,255,255,0.5);color:var(--text-muted, rgba(255,255,255,0.5));
    font-size:13px;
    margin:6px 0;
}

/* ========================================
   响应式设计 - 完善移动端适配
   ======================================== */

/* 大屏幕桌面端 (>1200px) */
@media (min-width: 1201px) {
    body {
        font-size: 15px;
    }
}

/* 中等屏幕 (992px - 1200px) */
@media (max-width: 1200px) {
    .grid-4 {
        -ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3, 1fr);
    }
    .global-header {
        padding: 0 24px;
        gap: 24px;
    }
    .content-box {
        margin: 20px 24px;
        padding: 24px;
    }
    .main-content {
        padding: 24px;
    }
}

/* 小屏幕平板端 (768px - 991px) */
@media (max-width: 992px) {
    html, body {
        font-size: 14px;
        overflow-x: hidden;
        width: 100%;
    }
    
    .grid-4 {
        -ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2, 1fr);
    }
    .grid-3 {
        -ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2, 1fr);
    }
    
    .global-header {
        padding: 0 16px;
        gap: 16px;
        height: 60px;
        min-height: 60px;
    }

    /* 头部缩为 60px，body 顶部预留同步修正（原恒 70px 导致顶部空洞） */
    body {
        padding-top: 60px;
    }
    
    .logo {
        font-size: 18px;
    }
    
    .content-box {
        margin: 16px;
        padding: 20px;
    }
    
    .section-title {
        font-size: 18px;
        margin-bottom: 20px;
    }
    
    .main-content {
        flex-direction: column;
        padding: 20px 16px;
        gap: 20px;
    }
    
    .sidebar {
        width: 100%;
    }
    
    .hero-section {
        padding: 32px 20px;
    }
    
    .hero-title {
        font-size: 26px;
    }
    
    .hero-desc {
        font-size: 14px;
    }
    
    .search-bar {
        padding: 0 16px;
    }
    
    .card-image {
        height: 150px;
    }
    
    .card-content {
        padding: 16px;
    }
    
    .card-title {
        font-size: 16px;
    }
}

/* 移动端 (<=768px) - 重点优化 */
@media (max-width: 768px) {
    html, body {
        font-size: 13px;
        overflow-x: hidden;
        width: 100%;
        -webkit-overflow-scrolling: touch;
    }
    
    * {
        max-width: 100%;
    }
    
    .grid-4, .grid-3, .grid-2 {
        -ms-grid-columns:1fr;grid-template-columns:1fr;
        gap: 12px;
    }
    
    /* 头部导航优化 */
    .global-header {
        padding: 0 12px;
        gap: 12px;
        height: 52px;
        min-height: 52px;
    }

    /* 头部缩为 52px，body 顶部预留同步修正 */
    body {
        padding-top: 52px;
    }
    
    .logo {
        font-size: 16px;
        letter-spacing: 1px;
    }
    
    .nav-menu {
        display: none;
    }
    
    .auth-buttons {
        margin-left: auto;
        gap: 8px;
    }
    
    .auth-btn {
        padding: 6px 14px;
        font-size: 12px;
        border-radius: 16px;
    }
    
    .city-trigger {
        min-width: 80px !important;
        padding: 6px 10px !important;
    }
    
    .city-trigger .city-name {
        font-size: 12px !important;
    }
    
    /* 内容区域优化 */
    .content-box {
        margin: 10px 12px;
        padding: 16px;
        border-radius: 12px;
    }
    
    .section-title {
        font-size: 16px;
        margin-bottom: 16px;
        gap: 8px;
    }
    
    .section-title::before {
        height: 16px;
        width: 3px;
    }
    
    /* 按钮优化 */
    .btn {
        padding: 8px 14px;
        font-size: 12px;
        border-radius: 5px;
    }
    
    .tag-btn {
        padding: 6px 12px;
        font-size: 12px;
        border-radius: 16px;
    }
    
    /* 卡片优化 */
    .card {
        padding: 14px;
        border-radius: 8px;
    }
    
    .card-title {
        font-size: 15px;
    }
    
    .card-desc {
        font-size: 12px;
        line-height: 1.5;
    }
    
    /* Hero区域优化 */
    .hero-section {
        padding: 24px 12px;
    }
    
    .hero-title {
        font-size: 22px;
        margin-bottom: 10px;
    }
    
    .hero-desc {
        font-size: 13px;
        margin-bottom: 20px;
    }
    
    .search-bar {
        padding: 0 12px;
        flex-direction: column;
        gap: 10px;
    }
    
    .search-input-wrapper {
        padding: 0 16px;
        border-radius: 24px;
    }
    
    .search-input {
        padding: 12px 0;
        font-size: 13px;
    }
    
    .search-btn {
        padding: 12px 24px;
        border-radius: 24px;
        font-size: 13px;
    }
    
    /* 主内容区域优化 */
    .main-content {
        flex-direction: column;
        padding: 16px 12px;
        gap: 16px;
    }
    
    .sidebar {
        width: 100%;
    }
    
    .filter-section {
        padding: 16px;
        border-radius: 12px;
        margin-bottom: 12px;
    }
    
    .filter-title {
        font-size: 13px;
        margin-bottom: 12px;
        padding-bottom: 8px;
    }
    
    .filter-item {
        padding: 8px 10px;
        border-radius: 6px;
        gap: 8px;
    }
    
    .filter-item span:first-of-type {
        font-size: 13px;
    }
    
    /* 商家卡片优化 */
    .merchant-card {
        border-radius: 12px;
    }
    
    .card-image {
        height: 120px;
    }
    
    .card-content {
        padding: 14px;
    }
    
    .card-header {
        margin-bottom: 10px;
    }
    
    .card-title {
        font-size: 15px;
    }
    
    .rating {
        gap: 3px;
    }
    
    .score {
        font-size: 13px;
    }
    
    .card-tags {
        gap: 6px;
        margin-bottom: 10px;
    }
    
    .card-tags .tag {
        padding: 3px 8px;
        font-size: 11px;
        border-radius: 3px;
    }
    
    .card-desc {
        margin-bottom: 12px;
        font-size: 12px;
    }
    
    .card-footer {
        padding-top: 12px;
        gap: 10px;
    }
    
    .location {
        font-size: 11px;
    }
    
    .view-detail {
        font-size: 12px;
    }
    
    /* 分页优化 */
    .pagination {
        gap: 6px;
        margin-top: 24px;
        padding-top: 16px;
    }
    
    .page-btn {
        padding: 8px 12px;
        font-size: 12px;
        border-radius: 6px;
        min-width: 36px;
        text-align: center;
    }
    
    /* 列表项优化 */
    .list-item {
        padding: 14px;
        gap: 12px;
        border-radius: 8px;
    }
    
    /* 底部优化 */
    .global-footer {
        padding: 20px 0;
        margin-top: 40px;
    }
    
    .global-footer p {
        font-size: 12px;
        margin: 4px 0;
    }
    
    /* 表格优化 */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    table.data-table {
        font-size: 12px;
    }
    
    table.data-table th,
    table.data-table td {
        padding: 8px 6px;
        word-break: break-word;
        white-space: nowrap;
    }
    
    table.data-table th {
        font-size: 11px;
    }
    
    /* 表单优化 */
    input, select, textarea {
        font-size: 13px;
        padding: 10px 12px;
        border-radius: 8px;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* 防止水平滚动 */
    .city-panel {
        width: 90vw !important;
        left: -40vw !important;
        margin-left: 50% !important;
    }
    
    /* 工具条优化 */
    .toolbar {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .toolbar-left {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .search-toolbar {
        flex-direction: column;
        gap: 10px;
    }
    
    .search-left {
        width: 100%;
        flex-direction: column;
        gap: 8px;
    }
    
    .search-input {
        width: 100%;
    }
    
    /* 字母筛选优化 */
    .alpha-filter {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
    }
    
    .alpha-btn {
        min-width: 32px;
        height: 32px;
        font-size: 12px;
        padding: 0 6px;
    }
    
    /* 数据表格容器 */
    .data-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 8px;
    }
    
    /* 复选框优化 */
    input[type="checkbox"] {
        width: 16px;
        height: 16px;
    }
    
    /* 单选框优化 */
    input[type="radio"] {
        width: 16px;
        height: 16px;
    }
}

/* 超小屏幕移动端 (<=480px) */
@media (max-width: 480px) {
    html, body {
        font-size: 12px;
    }
    
    .global-header {
        height: 48px;
        min-height: 48px;
        padding: 0 8px;
    }

    /* 头部缩为 48px，body 顶部预留同步修正 */
    body {
        padding-top: 48px;
    }
    
    .logo {
        font-size: 14px;
    }
    
    .content-box {
        margin: 8px 8px;
        padding: 12px;
    }
    
    .section-title {
        font-size: 14px;
    }
    
    .hero-title {
        font-size: 20px;
    }
    
    .hero-desc {
        font-size: 12px;
    }
    
    .card-image {
        height: 100px;
    }
    
    .card-content {
        padding: 12px;
    }
    
    .card-title {
        font-size: 14px;
    }
    
    .page-btn {
        padding: 6px 10px;
        font-size: 11px;
        min-width: 32px;
    }
}

/* 横屏模式优化 */
@media (max-height: 480px) and (orientation: landscape) {
    html, body {
        font-size: 12px;
    }
    
    .global-header {
        height: 44px;
        min-height: 44px;
    }
    
    .hero-section {
        padding: 16px 12px;
    }
    
    .hero-title {
        font-size: 18px;
    }
}

/* ========================================
   动画效果 - 完全浏览器兼容
   ======================================== */
@-webkit-keyframes fadeInUp {
    from {
        opacity:0;
        -webkit-transform:translateY(20px);transform:translateY(20px);
    }
    to {
        opacity:1;
        -webkit-transform:translateY(0);transform:translateY(0);
    }
}
@keyframes fadeInUp {
    from {
        opacity:0;
        -webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px);
    }
    to {
        opacity:1;
        -webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);
    }
}

.animate-fadeInUp {
    -webkit-animation:fadeInUp 0.5s ease-out;animation:fadeInUp 0.5s ease-out;
}

/* ========================================
   导航主题覆盖样式 - 确保下拉菜单和城市选择器支持主题切换
   ======================================== */

/* 公共头部导航下拉菜单 */
.dropdown-menu {
    background: var(--color-bg-card) !important;
    border-color: var(--color-border) !important;
}

.dropdown-item {
    color: var(--color-text-secondary) !important;
}

.dropdown-item:hover {
    background: var(--color-bg-hover) !important;
    color: var(--color-primary) !important;
}

.nav-dropdown .dropdown-menu {
    background: var(--color-bg-card) !important;
}

/* 城市选择器面板 */
#cityPanel,
.city-panel,
.city-select-panel {
    background: var(--color-bg-card) !important;
    border-color: var(--color-border) !important;
}

.city-panel-header,
.city-panel-title {
    background: var(--color-bg-card) !important;
    color: var(--color-primary) !important;
}

.city-panel-close {
    background: var(--color-bg-hover) !important;
    color: var(--color-text-secondary) !important;
    border-color: var(--color-border) !important;
}

.city-panel-close:hover {
    background: var(--color-danger) !important;
    color: white !important;
    border-color: var(--color-danger) !important;
}

.hot-cities,
.all-cities {
    background: var(--color-bg-card) !important;
}

.section-label {
    color: var(--color-text-muted) !important;
}

.city-tag,
.city-item {
    background: var(--color-bg-hover) !important;
    color: var(--color-text-secondary) !important;
    border-color: var(--color-border) !important;
}

.city-tag:hover,
.city-item:hover {
    background: rgba(230, 200, 136, 0.2) !important; /* P3方案C 暗态→金B */
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.alpha-nav,
.alpha-nav-buttons {
    background: rgba(184, 144, 64, 0.03) !important; /* P3方案C 野生金→金A */
}

.alpha-nav-btn {
    background: var(--color-bg-hover) !important;
    color: var(--color-text-secondary) !important;
    border-color: var(--color-border) !important;
}

.alpha-nav-btn:hover {
    background: rgba(184, 144, 64, 0.2) !important; /* P3方案C 野生金→金A */
    color: var(--color-primary) !important;
    border-color: rgba(184, 144, 64, 0.3) !important;
}

.city-letter {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-active)) !important;
    color: var(--color-bg-page) !important;
}

.city-disabled {
    background: rgba(34,197,94,0.08) !important;
    border: 1px dashed rgba(34,197,94,0.3) !important;
}

.partner-badge {
    background: rgba(34,197,94,0.9) !important;
    color: white !important;
}

/* 全局头部 */
.global-header,
.header {
    background: var(--color-bg-page) !important;
    border-color: var(--color-border) !important;
}

/* 页面主内容区域 - 避开固定导航栏
 * 说明：body 已由本文件提供响应式导航补偿(70/60/52/48px)，
 *       容器级 80px 补偿为历史重复，会造成 70+80=150px 顶部空洞。
 *       P1-R1 已移除前台 .container/.page-content/.content-area 的重复补偿，
 *       仅保留后台布局(admin_header)依赖的 .main-content。
 */
.main-content {
    padding-top: 80px !important;
}

/* 后台管理页面内容区域 */
.admin-content {
    padding-top: 90px !important;
}

/* 浅色主题下拉菜单特殊处理 */
[data-theme="light"] .dropdown-menu {
    background: #FFFFFF !important;
    border-color: #e0e0e0 !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15) !important;
}

[data-theme="light"] .nav-dropdown .dropdown-menu {
    background: #FFFFFF !important;
}

[data-theme="light"] .dropdown-item:hover {
    background: rgba(0,0,0,0.05) !important;
}

[data-theme="light"] .city-panel {
    background: #FFFFFF !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15) !important;
}

[data-theme="light"] .city-panel-close:hover {
    background: #F56C6C !important;
    color: white !important;
}

[data-theme="light"] .city-disabled {
    background: rgba(34,197,94,0.1) !important;
}

[data-theme="light"] .city-tag:hover,
[data-theme="light"] .city-item:hover {
    background: rgba(184, 144, 64, 0.15) !important; /* P3方案C 浅态→金A */
}

[data-theme="light"] .city-letter {
    color: #FFFFFF !important;
}

[data-theme="light"] .global-header,
[data-theme="light"] .header {
    background: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}