/* ========================================
   时尚大气风格 - 全局样式（完全支持主题切换和所有浏览器）
   ======================================== */

/* 基础全局样式（与主题无关的部分） */
: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);
    
    /* 兼容性变量 - 确保旧浏览器也能显示 */
    --bg-primary-fallback: #0A0A14;
    --bg-secondary-fallback: #1E1E2D;
    --bg-card-fallback: rgba(255,255,255,0.05);
    --text-primary-fallback: #FFFFFF;
    --text-secondary-fallback: rgba(255,255,255,0.7);
    --text-muted-fallback: rgba(255,255,255,0.5);
    --border-color-fallback: rgba(255,255,255,0.1);
    --primary-color-fallback: #FFB800;
    --primary-color-dark-fallback: #FF9800;
}

/* 全局样式重置 - 最大程度兼容性 */
*,
*::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;
}

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;
}

a {
    color: var(--text-primary);
    text-decoration: none;
    transition: var(--transition);
}

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

/* ========================================
   全局头部导航样式 - 完全浏览器兼容
   ======================================== */
.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 48px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 48px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100000;
    -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;
    box-sizing: border-box;
}

.logo {
    font-size: 22px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 2px;
}

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

/* 城市选择器触发按钮 - 完全浏览器兼容，稳定布局 */
.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: 10000 !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: 1000 !important;
}

.nav-menu {
    display:-webkit-box;display:-ms-flexbox;display:flex;
    gap:4px;
    margin-left:auto;
}

.nav-link {
    padding:10px 22px;
    border-radius:20px;
    font-weight:500;
    font-size:14px;
    position:relative;
    overflow:hidden;
    -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;
}

.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:12px;
    margin-left:24px;
}

.auth-btn {
    padding:10px 24px;
    border-radius:22px;
    font-weight:600;
    font-size:14px;
    -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;
}

.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;
}

/* ========================================
   响应式设计
   ======================================== */
@media (max-width:1200px) {
    .grid-4 {
        -ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3, 1fr);
    }
}

@media (max-width:992px) {
    .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 20px;
        gap:20px;
    }
    .content-box {
        margin:20px;
        padding:24px;
    }
}

@media (max-width:768px) {
    .grid-4, .grid-3, .grid-2 {
        -ms-grid-columns:1fr;grid-template-columns:1fr;
    }
    .nav-menu {
        display:none;
    }
    .content-box {
        margin:16px;
        padding:20px;
    }
}

/* ========================================
   动画效果 - 完全浏览器兼容
   ======================================== */
@-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;
}