/**
 * 现代化样式 - 非小号交易所排行
 * 全新设计风格，区别于传统模板
 */

/* 基础重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    line-height: 1.6;
    color: #ffffff;
    background: linear-gradient(135deg, #3C3B3F 0%, #605C3C 100%);
    min-height: 100vh;
}

/* ========== 全局动画 ========== */
@keyframes fadeInUp {
    0% { opacity: 0; transform: translateY(12px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes scaleIn {
    0% { opacity: 0; transform: scale(0.96); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes zoomIn {
    0% { opacity: 0; transform: scale(0.98); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes riseBar {
    0% { height: 0; }
    100% { height: var(--bar-height, 100%); }
}
/* 新增更生动动画 */
@keyframes bounceSoft {
    0%, 100% { transform: translateY(0); }
    30% { transform: translateY(-4px); }
    60% { transform: translateY(-2px); }
}
@keyframes floatY {
    0% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
    100% { transform: translateY(0); }
}
@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 0 rgba(255,255,255,0); }
    50% { box-shadow: 0 0 20px rgba(238, 222, 96, 0.35); }
}
@keyframes fadeInLeft { 0% {opacity:0; transform: translateX(-12px);} 100% {opacity:1; transform: translateX(0);} }
@keyframes fadeInRight { 0% {opacity:0; transform: translateX(12px);} 100% {opacity:1; transform: translateX(0);} }
@keyframes slideInScale { 0% {opacity:0; transform: translateY(10px) scale(0.98);} 100% {opacity:1; transform: translateY(0) scale(1);} }

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* 轻应用到现有组件（不改变布局） */
.nav-brand:hover { animation: bounceSoft 600ms ease-out both; }
.btn-refresh:hover, .exchange-actions .btn:hover { animation: bounceSoft 600ms ease-out both; }
.badge:hover { animation: pulseGlow 1000ms ease-in-out both; }
.ranking-grid .exchange-card { animation: slideInScale 500ms ease both; }
.ranking-grid .exchange-card:nth-child(2) { animation-delay: 60ms; }
.ranking-grid .exchange-card:nth-child(3) { animation-delay: 120ms; }
.ranking-grid .exchange-card:nth-child(4) { animation-delay: 180ms; }
.ranking-grid .exchange-card:nth-child(5) { animation-delay: 240ms; }
.chart-bars .chart-bar { animation: riseBar 800ms ease-out both; }
.chart-bars .chart-bar:nth-child(2) { animation-delay: 80ms; }
.chart-bars .chart-bar:nth-child(3) { animation-delay: 160ms; }
.chart-bars .chart-bar:nth-child(4) { animation-delay: 240ms; }
.chart-bars .chart-bar:nth-child(5) { animation-delay: 320ms; }
.exchange-badges { animation: fadeInRight 600ms ease both; }
.info-card { animation: fadeInLeft 600ms ease both; }
.tab-btn:hover, .filter-tab:hover, .stat-link:hover { animation: bounceSoft 500ms ease-out both; }

/* 可复用的动画工具类（可按需加到任何元素上） */
.anim-bounce { animation: bounceSoft 700ms ease-out both; }
.anim-float { animation: floatY 3s ease-in-out infinite; }
.anim-pulse { animation: pulseGlow 1200ms ease-in-out both; }
.anim-fade-in { animation: fadeIn 600ms ease both; }
.anim-fade-up { animation: fadeInUp 600ms ease both; }
.anim-fade-left { animation: fadeInLeft 600ms ease both; }
.anim-fade-right { animation: fadeInRight 600ms ease both; }
.anim-scale-in { animation: scaleIn 500ms ease both; }
.anim-zoom-in { animation: zoomIn 500ms ease both; }
.anim-delay-1 { animation-delay: 80ms; }
.anim-delay-2 { animation-delay: 160ms; }
.anim-delay-3 { animation-delay: 240ms; }
.anim-delay-4 { animation-delay: 320ms; }
.anim-delay-5 { animation-delay: 400ms; }

/* 导航栏 */
.navbar {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s ease;
}

.nav-brand:hover {
    opacity: 0.8;
}

.nav-logo {
    height: 40px;
    width: auto;
    border-radius: 8px;
}

.nav-title {
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, #f2f0fd, #eede60);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-menu {
    display: flex;
    gap: 2rem;
}

.nav-link {
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    position: relative;
}

.nav-link:hover,
.nav-link.active {
    color: #eede60;
    background: rgba(113, 128, 150, 0.1);
}

.nav-link.external::after {
    content: "↗";
    margin-left: 0.25rem;
    font-size: 0.8rem;
}

/* 主要内容 */
.main-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

/* 英雄区域 */
.hero-section {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 4rem 2rem;
    margin-bottom: 3rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

/* 关于我们页面使用单列布局 */
.about-page .hero-container {
    grid-template-columns: 1fr;
    text-align: center;
}

/* 交易所详情页面使用单列布局 */
.exchange-detail-page .hero-container {
    display: block;
}

/* 面包屑导航现代化设计 */
.breadcrumb-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.9rem;
}

.breadcrumb-link {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.05);
}

.breadcrumb-link:hover {
    color: white;
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

.breadcrumb-separator {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
    margin: 0 0.25rem;
}

.breadcrumb-current {
    color: white;
    font-weight: 600;
    padding: 0.5rem 1rem;
    background: rgba(102, 126, 234, 0.2);
    border-radius: 8px;
    border: 1px solid rgba(102, 126, 234, 0.3);
}

.hero-content {
    color: white;
}

.hero-title {
    font-size: 3.3rem;
    font-weight: 800;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #ffffff, #f0f0f0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.hero-subtitle {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: rgba(255, 255, 255, 0.9);
}

.hero-description {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
}

.hero-stats {
    display: flex;
    gap: 2rem;
}

.stat-item {
    text-align: center;
}

.stat-number {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: white;
}

.stat-label {
    font-size: 0.9rem;
    color: #718096;
}

.hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.chart-container {
    width: 300px;
    height: 200px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    height: 100%;
}

.chart-bar-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    height: 100%;
}

.chart-bar {
    width: 100%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 4px 4px 0 0;
    min-height: 20px;
    order: 1;
}

.chart-label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: 0.5rem;
    text-align: center;
    order: 2;
}

/* 不同柱子的颜色 */
.chart-bar-1 {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

.chart-bar-2 {
    background: linear-gradient(135deg, #f093fb, #f5576c);
}

.chart-bar-3 {
    background: linear-gradient(135deg, #4facfe, #00f2fe);
}

.chart-bar-4 {
    background: linear-gradient(135deg, #43e97b, #38f9d7);
}

.chart-bar-5 {
    background: linear-gradient(135deg, #fa709a, #fee140);
}


/* 筛选器 */
.filter-section {
    margin-bottom: 2rem;
}

.filter-container {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.filter-tabs {
    display: flex;
    gap: 1rem;
}

.filter-tab {
    padding: 0.75rem 1.5rem;
    border: 2px solid #e2e8f0;
    background: white;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #ffffff;
}

.filter-tab:hover {
    border-color: #718096;
    color: #718096;
}

.filter-tab.active {
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-color: transparent;
    color: white;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.filter-info {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
}

/* 排行榜 */
.ranking-section {
    margin-bottom: 3rem;
}

.ranking-container {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.ranking-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f7fafc;
}

.ranking-title {
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
}

.btn-refresh {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #6D6027, #a49d8d) !important;
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-refresh:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}

.icon {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.ranking-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1.5rem;
}

/* 交易所卡片 */
.exchange-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 1.5rem;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.exchange-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, #3C3B3F, #605C3C);
}

.exchange-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
    border-color: #718096;
}

.exchange-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding: 0.5rem 0;
    flex-wrap: nowrap;
    width: 100%;
}

.exchange-rank {
    background: linear-gradient(135deg, #6D6027, #a49d8d);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
}

.exchange-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}

.exchange-rank {
    flex-shrink: 0;
}

.exchange-logo {
    flex-shrink: 0;
}

.exchange-logo img {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    object-fit: cover;
}

.exchange-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
}

.exchange-name-link {
    text-decoration: underline;
    color: inherit;
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
    transition: opacity 0.3s ease;
}

.exchange-name-link:hover {
    opacity: 0.8;
}

.exchange-name {
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
    display: inline-block;
    white-space: nowrap;
}

.exchange-name-en {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.8rem;
    margin: 0;
    line-height: 1.2;
    display: inline-block;
    white-space: nowrap;
}


.exchange-stats {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    padding: 1rem 0;
}

.stat-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
    background: rgba(102, 126, 234, 0.05);
    border-radius: 8px;
    min-height: 60px;
    justify-content: center;
    padding-top: 1rem;
}

.stat-label {
    font-size: 0.8rem;
    color: #718096;
    font-weight: 500;
}

.stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
}

.stat-value.volume {
    color: #49ed95;
}

.stat-value.change.positive {
    color: #49ed95;
}

.stat-value.change.negative {
    color: #fba3a3;
}

.stat-link {
    color: #718096;
    text-decoration: none;
    font-weight: 600;
}

.stat-link:hover {
    text-decoration: underline;
}

/* 无数据状态 */
.no-data {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
    color: rgba(255, 255, 255, 0.8);
}

.no-data-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.no-data h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: #ffffff;
}

.no-data p {
    margin-bottom: 2rem;
}

/* 信息区域 */
.info-section {
    margin-bottom: 3rem;
}

.info-container {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* About page section polish */
.about-page .info-card { position: relative; overflow: hidden; }
.about-page .info-card h3 { margin: 0 0 1rem 0; font-weight: 800; font-size: 1.2rem; }
/* 去除顶部渐变分隔线 */
.about-page .info-card::before { content: none; }
.about-page .info-content p { margin: 0 0 .6rem 0; color: rgba(255,255,255,.9); line-height: 1.8; }
.about-page .info-content .info-split { display:grid; grid-template-columns: 1fr; gap: 1rem; }
.about-page .info-content .info-col { min-width:0; }
@media (min-width: 900px){
  .about-page .info-content .info-split { grid-template-columns: 1.1fr 1fr; align-items: start; }
}
.about-page .info-content ul { margin: .25rem 0 0 0; padding: 0; }
.about-page .info-content ul.feature-list { list-style: none; margin-left: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: .4rem 1rem; }
.about-page .info-content ul.feature-list li { position: relative; padding-left: 1.15rem; color: rgba(255,255,255,.9); line-height: 1.8; }
.about-page .info-content ul.feature-list li::before { content:""; position:absolute; left:0; top:.7rem; width:8px; height:8px; border-radius:50%; background: #eede60; box-shadow: 0 0 0 3px rgba(238,222,96,.18); }

@media (min-width: 992px){
  .about-page .info-section .info-container { padding: 2.25rem; }
}

/* —— 增加与主题呼应的轻量色彩与生动感（不改布局） —— */
/* 柔和的主题光晕：每个 info-card 角落添加轻微的径向渐变装饰 */
.about-page .info-card::after {
    content: "";
    position: absolute;
    right: -36px;
    top: -36px;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle at center, rgba(238,222,96,.22), rgba(238,222,96,0) 60%);
    filter: blur(6px);
    pointer-events: none;
}
.about-page .info-card .info-content::after {
    content: "";
    position: absolute;
    left: -36px;
    bottom: -36px;
    width: 140px;
    height: 140px;
    background: radial-gradient(circle at center, rgba(96,92,60,.18), rgba(96,92,60,0) 60%);
    filter: blur(8px);
    pointer-events: none;
}

/* 标题下细线强调（更小更克制，居中且与主题色呼应） */
.about-page .info-card h3::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin: .4rem auto 0 auto;
    background: linear-gradient(135deg, #f2f0fd, #eede60);
    border-radius: 3px;
    opacity: .85;
}

/* 特性卡片的主题化边框/投影，增强层次 */
.about-page .feature-card {
    border-color: rgba(238,222,96,.22);
    box-shadow: 0 6px 22px rgba(238,222,96,.12);
}
.about-page .feature-card:hover {
    box-shadow: 0 12px 28px rgba(238,222,96,.2);
}

/* 数据来源六卡片交替更明显的主题差异 */
.about-page .data-sources .feature-card:nth-child(odd) {
    background: rgba(238,222,96,.10);
    border-color: rgba(238,222,96,.28);
}
.about-page .data-sources .feature-card:nth-child(even) {
    background: rgba(96,92,60,.18);
    border-color: rgba(96,92,60,.32);
}

/* 联系方式卡片（主题风格） */
.contact-cards { display:grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap:1.5rem; margin-top:.5rem; }
.contact-card { background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); border-radius:16px; padding:1.5rem; display:flex; flex-direction:column; gap:.75rem; transition:transform .25s ease, box-shadow .25s ease, background .25s ease; }
.contact-card:hover { transform: translateY(-4px); background: rgba(255,255,255,0.1); box-shadow:0 12px 32px rgba(0,0,0,.18); }
.contact-card h4 { margin:0; font-size:1.1rem; color:#fff; }
.contact-card p { margin:0; color: rgba(255,255,255,.85); line-height:1.7; font-size:.9rem; }

.contact-lead { margin-bottom: 1rem; }
.contact-lead-title { margin:0 0 .25rem 0; font-size:1.25rem; font-weight:800; background: linear-gradient(135deg, #f2f0fd, #eede60); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip:text; }
.contact-lead-sub { margin:0; color: rgba(255,255,255,.85); }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.6rem 1.1rem; border-radius:10px; font-weight:700; text-decoration:none; cursor:pointer; white-space:nowrap; transition: all .25s ease; }
.btn-gradient { color:#111; background: linear-gradient(135deg, #f2f0fd, #eede60); border:1px solid rgba(255,255,255,.18); box-shadow:0 6px 18px rgba(226,230,177,.25); }
.btn-gradient:hover { transform: translateY(-2px); box-shadow:0 10px 28px rgba(226,230,177,.35); }
.btn-outline { color:#fff; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.28); }
.btn-outline:hover { transform: translateY(-2px); background: rgba(255,255,255,.1); }

.info-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
}

.info-content {
    display: row;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.info-item {
    padding: 1rem;
    background: #f7fafc;
    border-radius: 12px;
    border-left: 4px solid #667eea;
}

.info-item strong {
    color: #ffffff;
}

/* 筛选器样式 */
.filter-section {
    margin: 2rem 0;
}

.filter-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 1.5rem 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.filter-tabs {
    display: flex;
    gap: 1rem;
}

.filter-tab {
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.filter-tab:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.3);
}

.filter-tab.active {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.filter-info {
    display: flex;
    align-items: center;
}

.update-time {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    font-weight: 500;
}

/* 排行榜样式 */
.ranking-section {
    margin: 2rem 0;
}

.ranking-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.ranking-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.ranking-title {
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

.ranking-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.btn-refresh {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #6D6027, #a49d8d) !important;
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.btn-refresh:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.btn-refresh .icon {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* 排行榜网格和交易所卡片 */
.ranking-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1.5rem;
}

.exchange-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 1.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.exchange-card:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.exchange-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.exchange-rank {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #6D6027, #a49d8d);
    border-radius: 12px;
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.exchange-logo {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
}

.exchange-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

.exchange-info {
    flex: 1;
}

.exchange-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.25rem;
    text-decoration: underline;
    cursor: pointer;
    transition: color 0.3s ease;
}

.exchange-name:hover {
    color: #718096;
}

.exchange-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 1rem;
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-label {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

.stat-value {
    font-size: 0.9rem;
    color: #ffffff;
    font-weight: 600;
}

.stat-value.positive {
    color: #22c55e;
}

.stat-value.negative {
    color: #ef4444;
}

.stat-link {
    color: #718096;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.stat-link:hover {
    color: #4a5568;
}

/* 交易所徽章样式 */
.exchange-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.badge-trust {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
    border-color: rgba(34, 197, 94, 0.3);
}

.badge-trust:hover {
    background: linear-gradient(135deg, #16a34a, #15803d);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
}

.badge-type {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border-color: rgba(59, 130, 246, 0.3);
}

.badge-type:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.badge-country {
    background: linear-gradient(135deg, #a855f7, #9333ea);
    color: white;
    border-color: rgba(168, 85, 247, 0.3);
}

.badge-country:hover {
    background: linear-gradient(135deg, #9333ea, #7c3aed);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(168, 85, 247, 0.3);
}

/* 页脚 */
.footer {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin-top: 4rem;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 2rem 1rem;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-section h4 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1rem;
}

.footer-section p {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1rem;
    line-height: 1.6;
}

.footer-link {
    color: #718096;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: #4a5568;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 2rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .nav-container {
        padding: 0 1rem;
        flex-direction: column;
        gap: 1rem;
        height: auto;
        padding: 1rem;
    }
    
    .nav-menu {
        gap: 1rem;
    }
    
    .main-content {
        padding: 1rem;
    }
    
    .hero-container {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }
    
    /* 移动端面包屑导航 */
    .breadcrumb-nav {
        flex-wrap: wrap;
        gap: 0.25rem;
        padding: 0.75rem 1rem;
        font-size: 0.8rem;
    }
    
    .breadcrumb-link,
    .breadcrumb-current {
        padding: 0.25rem 0.5rem;
        font-size: 0.8rem;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-stats {
        justify-content: center;
    }
    
    .filter-container {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .ranking-header {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .ranking-grid {
        grid-template-columns: 1fr;
    }
    
    .exchange-header {
        flex-direction: row;
        text-align: left;
        gap: 0.5rem;
        flex-wrap: wrap;
    }
    
    .exchange-info {
        gap: 0.5rem;
        flex: 1;
        min-width: 200px;
    }
    
    .exchange-actions {
        flex-shrink: 0;
        margin-left: auto;
    }
    
    .stat-row {
        grid-template-columns: 1fr;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

/* 关于我们页面样式 */
.page-hero {
    text-align: center;
    padding: 4rem 0;
    margin-bottom: 2rem;
}

.page-title {
    font-size: 3rem;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
}

.page-subtitle {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0;
}

.about-section {
    margin-bottom: 3rem;
}

.section-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.section-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.section-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #667eea;
}

.section-content {
    color: #ffffff;
    line-height: 1.7;
}

.section-content p {
    margin-bottom: 1rem;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.feature-list li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    color: #ffffff;
}

.feature-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #48bb78;
    font-weight: bold;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.feature-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.1);
}

.feature-card h3 {
    color: #ffffff;
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.feature-card p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* 数据来源：交替背景色（1,3,5 / 2,4,6） */
.data-sources .feature-card:nth-child(odd) { background: rgba(255,255,255,0.06); }
.data-sources .feature-card:nth-child(even) { background: rgba(255,255,255,0.12); }

.contact-info {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 1rem;
}

.contact-info p {
    margin-bottom: 0.5rem;
    color: #ffffff;
}

.contact-info a {
    color: #718096;
    text-decoration: none;
}

.contact-info a:hover {
    text-decoration: underline;
}

.disclaimer {
    background: rgba(255, 243, 205, 0.3);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 1rem;
}

.disclaimer p {
    margin-bottom: 1rem;
    color: #DECEA0;
    font-size: 0.9rem;
    line-height: 1.6;
}

.main-site-link {
    text-align: center;
    margin-top: 2rem;
}

.main-site-link .btn-primary {
    display: inline-block;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    text-decoration: none;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.main-site-link .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

/* 交易所详情页面专用样式 */
.exchange-hero-layout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
    padding: 3rem 0;
    min-height: 200px;
}

/* 交易所详情页面专用的1:1比例布局 */
.exchange-detail-page .exchange-hero-layout {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.exchange-detail-page .exchange-left-section {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: nowrap;
    width: calc(65% - 1rem);
    flex-shrink: 0;
}

.exchange-logo-large {
    flex-shrink: 0;
}

.exchange-detail-page .exchange-logo-large {
    flex-shrink: 0;
    width: 80px;
}

.exchange-logo-large img {
    width: 80px;
    height: 80px;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 3px solid rgba(255, 255, 255, 0.2);
}

.default-icon {
    width: 80px;
    height: 80px;
    border-radius: 16px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 3px solid rgba(255, 255, 255, 0.2);
}

.default-icon i {
    font-size: 2rem;
    color: white;
}

.exchange-main-info {
    flex: 1;
    text-align: left;
    min-width: 0;
    overflow: hidden;
}

.exchange-detail-page .exchange-main-info {
    flex: 1;
    min-width: 0;
}

/* 交易所详情页面的标题样式 */
.exchange-detail-page .hero-title {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    margin-right: 1rem;
    display: inline-block;
    white-space: nowrap;
}

.exchange-detail-page .hero-subtitle {
    font-size: 1.2rem;
    font-weight: 500;
    margin: 0;
    display: inline-block;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.8);
}

/* 交易所详情页面的exchange-stats */
.exchange-detail-page .exchange-stats {
    display: flex;
    gap: 1rem;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

/* 排行榜页面的exchange-stats */
.ranking-section .exchange-stats {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 0;
    justify-content: flex-start;
}

.exchange-detail-page .exchange-right-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 1.5rem;
    /* width: calc(50% - 1rem); */
    flex-shrink: 0;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* padding: 1rem; */
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    min-width: 120px;
}

.stat-label {
    font-size: 0.9rem;
    color: #718096;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.stat-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: #ffffff;
}

.stat-value.positive {
    color: #10b981;
}

.stat-value.negative {
    color: #ef4444;
}

.exchange-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    max-width: 200px;
}

.exchange-actions .btn {
    padding: 0.625rem 1.25rem;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    flex: 1;
    justify-content: center;
    white-space: nowrap;
    font-size: 0.8rem;
}

.exchange-actions .btn-primary {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.exchange-actions .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
}

.exchange-actions .btn-secondary {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
}

.exchange-actions .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1.2rem;
    }
    
    .ranking-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .exchange-card {
        padding: 1rem;
    }
    
    .page-title {
        font-size: 2.5rem;
    }
    
    .section-card {
        padding: 1.5rem;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
    }
    
    /* 交易所详情页面响应式 */
    .exchange-hero-layout {
        flex-direction: column;
        gap: 2rem;
        padding: 2rem 0;
    }
    
    .exchange-left-section {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
        align-items: center;
    }
    
    .exchange-right-section {
        width: 100%;
        align-items: center;
        gap: 1rem;
    }
    
    /* 移动端排行榜页面的exchange-stats */
    .ranking-section .exchange-stats {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.5rem 0;
    }
    
    /* 移动端交易所详情页面的exchange-stats */
    .exchange-detail-page .exchange-stats {
        flex-direction: row;
        gap: 0.5rem;
        width: 100%;
        justify-content: center;
        flex-wrap: nowrap;
    }
    
    .stat-item {
        padding: 0.25rem;
        min-width: 80px;
        font-size: 0.9rem;
    }
    
    .exchange-actions {
        flex-direction: row;
        width: 100%;
        justify-content: center;
    }
    
    .exchange-actions .btn {
        flex: 1;
        justify-content: center;
    }
}

/* ===== 新的交易所详情页面样式 ===== */

/* 统计概览样式 */
.stats-overview-section {
    margin: 2rem 0;
}

.stats-overview-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.stats-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
}

.stat-overview-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.stat-overview-item:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.stat-overview-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, #181818, #BA8B02);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.75rem;
    box-shadow: 0 4px 15px rgb(226 230 177 / 30%);
    flex: 0 0 64px;
    flex-shrink: 0;
}

.stat-icon-svg { width: 28px; height: 28px; display: block; }

.stat-overview-item { display: flex; align-items: center; gap: 1rem; }

.stat-overview-content {
    flex: 1;
}

.stat-overview-number {
    font-size: 1.35rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 4px;
}

.stat-overview-number.positive {
    color: #22c55e;
}

.stat-overview-number.negative {
    color: #ef4444;
}

.stat-overview-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

/* 标签页样式 */
.tabs-section {
    margin: 2rem 0;
}

.tabs-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.tabs-nav {
    display: flex;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 4px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.tab-btn {
    flex: 1;
    padding: 12px 24px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.tab-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.15);
}

.tab-btn.active {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-weight: 600;
}

.tabs-content {
    margin-top: 2rem;
}

.tab-content {
    display: none;
    animation: fadeIn 0.3s ease-in-out;
}

.tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 交易所徽章样式 */
.exchange-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
}

.badge-trust {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.badge-type {
    background: rgba(59, 130, 246, 0.2);
    color: #3bccf6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.badge-country {
    background: rgba(168, 85, 247, 0.2);
    color: #cda1f7;
    border: 1px solid rgba(168, 85, 247, 0.3);
}

/* 信任评分显示 */
.trust-score-display {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.trust-score-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 8px 32px rgba(34, 197, 94, 0.3);
}

.trust-score-value {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
}

.trust-score-label {
    font-size: 0.875rem;
    opacity: 0.9;
    margin-top: 4px;
}

.trust-score-info {
    flex: 1;
}

.trust-score-rank {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.rank-label {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
}

.rank-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
}

.trust-score-description {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}

/* 统计卡片网格 */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.stat-card:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
}

.stat-info {
    flex: 1;
}

.stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    line-height: 1;
}

.stat-label {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 4px;
}

/* 信息网格 */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.info-item:hover {
    background: rgba(255, 255, 255, 0.12);
}

.info-label {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

.info-value {
    font-size: 0.875rem;
    color: #ffffff;
    font-weight: 600;
}

/* 交易对表格 */
.trading-pairs-table {
    margin-top: 1rem;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* 简介弹窗 */
.modal { position: fixed; inset: 0; z-index: 2147483647; }
.modal-backdrop { position: absolute; inset: 0; z-index: 1; background: transparent; }
.modal-content { position: relative; z-index: 2; max-width: 720px; margin: 10vh auto; background: #111111; border:1px solid #2a2a2a; border-radius: 16px; box-shadow: 0 16px 64px rgba(0,0,0,0.6); color:#fff; }
.modal-content { opacity: 0; transform: translateY(6px) scale(0.986); transition: opacity .65s cubic-bezier(.25,.8,.25,1), transform .65s cubic-bezier(.25,.8,.25,1), box-shadow .65s ease; will-change: opacity, transform; }
.modal.is-open .modal-content { opacity: 1; transform: translateY(0) scale(1); }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding: 1rem 1.25rem; border-bottom:1px solid rgba(255,255,255,0.12); }
.modal-body { padding: 1.25rem; line-height: 1.8; }
.modal-close { background: transparent; color:#fff; border:none; font-size: 1.25rem; cursor:pointer; }

/* ========== 动画挂载（附加，不改变布局） ========== */
.navbar, .nav-container, .nav-link { animation: fadeIn 500ms ease both; }
.nav-link { transition: transform .2s ease, opacity .2s ease, background .2s ease; }
.nav-link:hover { transform: translateY(-1px); }

.hero-container { animation: fadeInUp 600ms ease both; }
.hero-title { animation: fadeInUp 700ms ease both; }
.hero-subtitle { animation: fadeInUp 800ms ease both; }
.hero-description { animation: fadeInUp 900ms ease both; }
.hero-stats .stat-item { animation: scaleIn 700ms ease both; }
.hero-stats .stat-item:nth-child(2) { animation-delay: 80ms; }
.hero-stats .stat-item:nth-child(3) { animation-delay: 160ms; }
.hero-stats .stat-item:nth-child(4) { animation-delay: 240ms; }

.filter-container { animation: fadeIn 600ms ease both; }
.filter-tab { transition: transform .2s ease, background .2s ease, color .2s ease; }
.filter-tab:hover { transform: translateY(-1px); }

.ranking-container { animation: fadeInUp 600ms ease both; }
.ranking-header { animation: fadeIn 700ms ease both; }
.ranking-grid .exchange-card { animation: scaleIn 500ms ease both; }
.ranking-grid .exchange-card:nth-child(2) { animation-delay: 60ms; }
.ranking-grid .exchange-card:nth-child(3) { animation-delay: 120ms; }
.ranking-grid .exchange-card:nth-child(4) { animation-delay: 180ms; }
.ranking-grid .exchange-card:nth-child(5) { animation-delay: 240ms; }

.exchange-logo img { transition: transform .25s ease; }
.exchange-card:hover .exchange-logo img { transform: scale(1.06); }

.stat-link { transition: color .2s ease, transform .2s ease; }
.stat-link:hover { transform: translateY(-1px); }

.tabs-section, .tabs-content { animation: fadeIn 600ms ease both; }
.tab-btn { transition: transform .2s ease, background .2s ease, color .2s ease; }
.tab-btn:hover { transform: translateY(-1px); }

.info-card { animation: fadeInUp 600ms ease both; }
.info-grid .info-item { animation: fadeIn 700ms ease both; }
.info-grid .info-item:nth-child(2) { animation-delay: 60ms; }
.info-grid .info-item:nth-child(3) { animation-delay: 120ms; }
.info-grid .info-item:nth-child(4) { animation-delay: 180ms; }

.trading-pairs-table { animation: fadeIn 700ms ease both; }
.table-row { animation: fadeInUp 600ms ease both; }
.table-row:nth-child(2) { animation-delay: 40ms; }
.table-row:nth-child(3) { animation-delay: 80ms; }
.table-row:nth-child(4) { animation-delay: 120ms; }

.footer, .footer-content, .footer-bottom { animation: fadeIn 600ms ease both; }

/* 更明显的滚动淡入动画 */
.card-hidden {
    opacity: 0;
    transform: translateY(40px) scale(0.985);
    transition: opacity 0.6s cubic-bezier(.2,.8,.2,1), transform 0.6s cubic-bezier(.2,.8,.2,1);
    will-change: opacity, transform;
}
.card-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* 分层过渡：卡片内部元素在卡片出现后依次更柔和地显现 */
.exchange-card .exchange-header,
.exchange-card .exchange-info,
.exchange-card .exchange-stats {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .45s ease, transform .45s ease;
}

.exchange-card.card-visible .exchange-header {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .04s;
}

.exchange-card.card-visible .exchange-info {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .08s;
}

.exchange-card.card-visible .exchange-stats {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .12s;
}

.table-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    font-weight: 600;
    color: white;
    font-size: 0.875rem;
}

.table-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: background 0.3s ease;
}

.table-row:hover {
    background: rgba(255, 255, 255, 0.05);
}

.table-row:last-child {
    border-bottom: none;
}

.table-cell {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
}

.pair-name {
    color: white;
    font-weight: 500;
}

.pair-price {
    color: white;
}

.pair-volume {
    color: rgba(255, 255, 255, 0.8);
}

.pair-change.positive {
    color: #22c55e;
}

.pair-change.negative {
    color: #ef4444;
}

/* 社交媒体链接 */
.social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: white;
    text-decoration: none;
    transition: all 0.2s ease;
}

.social-link:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.social-icon { display:inline-flex; width: 20px; height: 20px; }
.social-icon svg { width: 100%; height: 100%; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.social-facebook:hover {
    background: rgba(24, 119, 242, 0.2);
    border-color: rgba(24, 119, 242, 0.3);
}

.social-twitter:hover {
    background: rgba(29, 161, 242, 0.2);
    border-color: rgba(29, 161, 242, 0.3);
}

.social-reddit:hover {
    background: rgba(255, 69, 0, 0.2);
    border-color: rgba(255, 69, 0, 0.3);
}

.social-telegram:hover {
    background: rgba(0, 136, 204, 0.2);
    border-color: rgba(0, 136, 204, 0.3);
}

.social-medium:hover {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(0, 0, 0, 0.3);
}

/* 状态更新 */
.status-updates {
    margin-top: 1rem;
}

.status-update {
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 1rem;
}

.status-update:last-child {
    margin-bottom: 0;
}

.update-content p {
    color: white;
    line-height: 1.6;
    margin-bottom: 0.5rem;
}

.update-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
}

.update-category {
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
}

/* 无数据状态 */
.no-data {
    text-align: center;
    padding: 3rem 1rem;
    color: rgba(255, 255, 255, 0.6);
}

.no-data p {
    font-size: 1rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .tabs-nav {
        flex-direction: column;
        gap: 4px;
    }
    
    .tab-btn {
        padding: 10px 16px;
    }
    
    .trust-score-display {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .info-grid {
        grid-template-columns: 1fr;
    }
    
    .table-header,
    .table-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .table-cell {
        justify-content: space-between;
        padding: 0.5rem 0;
    }
    
    .table-cell::before {
        content: attr(data-label);
        font-weight: 600;
        color: rgba(255, 255, 255, 0.7);
    }
    
    .social-links {
        flex-direction: column;
    }
}
/* 交易量趋势图样式 */
.chart-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
}

.chart-tab-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.chart-tab-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.3);
}

.chart-tab-btn.active {
    background: linear-gradient(135deg, #49ed95, #2dd4bf);
    color: #ffffff;
    border-color: #49ed95;
    box-shadow: 0 2px 8px rgba(73, 237, 149, 0.3);
}

.chart-container {
    position: relative;
    width: 100%;
    height: 400px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.chart-container canvas {
    border-radius: 8px;
}

/* 图表响应式 */
@media (max-width: 768px) {
    .chart-container {
        height: 300px;
        padding: 15px;
    }
    
    .chart-tabs {
        flex-direction: column;
        gap: 8px;
    }
    
    .chart-tab-btn {
        width: 100%;
        text-align: center;
    }
}