/* ===========================================
   RESET & MOBILE-FIRST BASE
=========================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #222;
    background: #fafafa;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s ease;
}

/* 容器：移动端默认窄边距 */
.container {
    width: 100%;
    padding: 0 16px;
    margin: 0 auto;
}

/* 平板+ */
@media (min-width: 768px) {
    .container {
        padding: 0 24px;
    }
}

/* 桌面+ */
@media (min-width: 1024px) {
    .container {
        max-width: 1200px;
        padding: 0 32px;
    }
}

/* 通用组件：按钮 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.95rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    line-height: 1.4;
}

.btn:hover {
    transform: translateY(-2px);
}

/* 通用组件：卡片 */
.card {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    border: 1px solid #eee;
}

/* 通用网格 */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.grid-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 576px) {
    .grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 通用头部 */
.site-header {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid #e0e0e0;
}

.header-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 0;
    gap: 16px;
}

.logo {
    font-weight: 700;
    font-size: 1.5rem;
    color: #0063e6;
}

.main-nav ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    gap: 12px;
    justify-content: center;
}

.main-nav a {
    color: #333;
    font-weight: 500;
    font-size: 0.95rem;
    padding: 6px 12px;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.main-nav a:hover {
    color: #0063e6;
    background: #f0f5ff;
}

@media (min-width: 768px) {
    .header-inner {
        flex-direction: row;
        justify-content: space-between;
        padding: 20px 0;
    }
    
    .main-nav ul {
        gap: 16px;
    }
}

/* 通用底部 */
.site-footer {
    background: #181818;
    color: #eee;
    padding: 48px 0 24px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

.footer-col h4 {
    color: #ccc;
    margin-bottom: 16px;
    font-size: 1.1rem;
}

.footer-col p {
    line-height: 1.5;
    opacity: 0.9;
}

.footer-col ul {
    list-style: none;
}

.footer-col ul li {
    margin-bottom: 10px;
}

.footer-col a {
    opacity: 0.85;
}

.footer-col a:hover {
    opacity: 1;
}

.sub-footer {
    text-align: center;
    margin-top: 32px;
    opacity: 0.9;
    font-size: 0.9rem;
}

@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr;
        gap: 48px;
    }
}

/* ===========================================
   首页：HOME PAGE
=========================================== */
.home-page {
    --primary: #0063e6;
    --primary-dark: #004bbd;
    --text-main: #333;
    --text-muted: #666;
}

.home-page .hero-section {
    background: linear-gradient(135deg, #0063e6, #0080ff);
    color: white;
    padding: 60px 0;
    text-align: center;
}

.home-page .hero-content h1 {
    font-size: 2.2rem;
    margin-bottom: 16px;
    line-height: 1.2;
}

.home-page .hero-content p {
    font-size: 1.1rem;
    opacity: 0.95;
    margin-bottom: 28px;
    max-width: 600px;
    margin: 0 auto 28px;
}

.home-page .hero-keywords {
    margin-bottom: 32px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.home-page .hero-keywords span {
    background: rgba(255,255,255,0.15);
    padding: 6px 14px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid rgba(255,255,255,0.25);
}

.home-page .cta-button {
    background: white;
    color: var(--primary);
    padding: 12px 32px;
    border-radius: 50px;
    font-weight: 600;
}

.home-page .cta-button:hover {
    box-shadow: 0 6px 20px rgba(0,99,230,0.25);
}

.home-page .nav-intro {
    padding: 60px 0;
}

.home-page .nav-intro h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 40px;
    color: var(--text-main);
}

.home-page .nav-card {
    border-top: 3px solid var(--primary);
    text-align: center;
    transition: transform 0.25s ease;
}

.home-page .nav-card:hover {
    transform: translateY(-4px);
}

.home-page .nav-card h3 {
    color: var(--primary);
    margin-bottom: 12px;
    font-size: 1.2rem;
}

.home-page .nav-card p {
    color: var(--text-muted);
    margin-bottom: 18px;
    font-size: 0.95rem;
}

.home-page .card-link {
    color: var(--primary);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.home-page .features-section {
    padding: 60px 0;
    background: #fff;
    border-radius: 24px;
    margin: 40px 0;
}

.home-page .features-section h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 40px;
    color: var(--text-main);
}

.home-page .feature-block {
    text-align: center;
    padding: 24px;
    border-radius: 16px;
    background: linear-gradient(to bottom right, #eff5ff, #edfdff);
    border: 1px solid #ebfbff;
}

.home-page .icon-box {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #0080ff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin: 0 auto 20px;
}

.home-page .feature-block h3 {
    color: var(--text-main);
    margin-bottom: 12px;
    font-size: 1.15rem;
}

.home-page .feature-block p {
    color: var(--text-muted);
    line-height: 1.5;
}

.home-page .faq-section {
    padding: 60px 0;
}

.home-page .faq-section h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 40px;
    color: var(--text-main);
}

.home-page .faq-list dt {
    font-weight: 700;
    color: var(--text-main);
    margin-top: 24px;
    font-size: 1.1rem;
}

.home-page .faq-list dd {
    color: var(--text-muted);
    margin-top: 8px;
    padding-left: 16px;
    border-left: 3px solid var(--primary);
}

@media (min-width: 768px) {
    .home-page .hero-content h1 {
        font-size: 2.8rem;
    }
    
    .home-page .nav-intro h2,
    .home-page .features-section h2,
    .home-page .faq-section h2 {
        font-size: 2.4rem;
    }
}

/* ===========================================
   欧易官网页：OFFICIAL PAGE
=========================================== */
.official-page {
    --primary: #0052cc;
    --text-title: #002966;
    --text-body: #344563;
}

.official-page .hero-official {
    background: linear-gradient(145deg, #007acc, #001f4d);
    color: white;
    padding: 60px 24px;
    border-radius: 20px;
    margin: 40px auto;
    text-align: center;
    max-width: 900px;
}

.official-page .hero-official h1 {
    font-size: 2.2rem;
    margin-bottom: 16px;
    line-height: 1.2;
}

.official-page .hero-official p {
    font-size: 1.1rem;
    opacity: 0.95;
    margin-bottom: 24px;
}

.official-page .hero-keywords-official {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.official-page .hero-keywords-official span {
    background: rgba(166, 209, 251, 0.25);
    color: #e0f0ff;
    padding: 6px 14px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid rgba(255,255,255,0.3);
}

.official-page .official-info {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin: 60px auto;
}

.official-page .official-card h2 {
    color: var(--text-title);
    margin-bottom: 16px;
    font-size: 1.3rem;
}

.official-page .official-card p,
.official-page .official-card li {
    color: var(--text-body);
    line-height: 1.5;
}

.official-page .articles-section h2 {
    text-align: center;
    color: var(--text-title);
    font-size: 2rem;
    margin-bottom: 40px;
}

.official-page .article-item {
    transition: transform 0.25s ease;
}

.official-page .article-item:hover {
    transform: translateY(-4px);
}

.official-page .article-item h3 {
    color: var(--text-title);
    margin-bottom: 12px;
    font-size: 1.2rem;
}

.official-page .read-more {
    color: var(--primary);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

@media (min-width: 768px) {
    .official-page .hero-official h1 {
        font-size: 2.6rem;
    }
    
    .official-page .official-info {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }
    
    .official-page .articles-section h2 {
        font-size: 2.2rem;
    }
}

/* ===========================================
   下载页：DOWNLOAD PAGE
=========================================== */
.download-page {
    --primary: #663399;
    --primary-dark: #522580;
    --text-heading: #331e72;
    --text-body: #444;
}

.download-page .download-header {
    background: #f9f8fc;
}

.download-page .hero-download {
    background: linear-gradient(160deg, #836fff, #553c9f);
    color: white;
    padding: 60px 24px;
    border-radius: 20px;
    margin: 40px auto;
    text-align: center;
    max-width: 800px;
}

.download-page .hero-download h1 {
    font-size: 2.2rem;
    margin-bottom: 16px;
    line-height: 1.2;
}

.download-page .hero-download p {
    font-size: 1.05rem;
    opacity: 0.95;
    margin-bottom: 24px;
}

.download-page .hero-keywords-download {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.download-page .hero-keywords-download span {
    background: rgba(197, 178, 241, 0.25);
    color: #f0e9ff;
    padding: 6px 14px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid rgba(255,255,255,0.25);
}

.download-page .platform-selector {
    margin: 60px auto;
}

.download-page .platform-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 32px;
}

.download-page .tab-btn {
    padding: 10px 20px;
    border: none;
    background: #eceaff;
    color: var(--text-heading);
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.download-page .tab-btn.active {
    background: #7353ba;
    color: white;
}

.download-page .platform-content {
    display: none;
}

.download-page .platform-content.active {
    display: block;
}

.download-page .download-card {
    text-align: center;
    max-width: 500px;
    margin: 0 auto;
}

.download-page .download-card h3 {
    color: var(--text-heading);
    margin-bottom: 16px;
    font-size: 1.3rem;
}

.download-page .download-card ul {
    list-style: none;
    margin-bottom: 20px;
    color: var(--text-body);
    line-height: 1.5;
}

.download-page .download-card code {
    background: #efe9ff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.9rem;
}

.download-page .download-btn {
    background: var(--primary);
    color: white;
    padding: 12px 28px;
    border-radius: 6px;
}

.download-page .download-btn:hover {
    background: var(--primary-dark);
}

.download-page .steps-flow {
    margin: 60px auto;
}

.download-page .steps-flow h2 {
    text-align: center;
    color: var(--text-heading);
    font-size: 2rem;
    margin-bottom: 40px;
}

.download-page .step {
    text-align: center;
    padding: 24px;
    border-radius: 16px;
    background: linear-gradient(135deg, #f5f2ff, #ede7ff);
}

.download-page .step-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 auto 16px;
}

.download-page .step h3 {
    color: var(--text-heading);
    margin-bottom: 8px;
    font-size: 1.1rem;
}

.download-page .step p {
    color: var(--text-body);
    line-height: 1.5;
}

@media (min-width: 768px) {
    .download-page .hero-download h1 {
        font-size: 2.5rem;
    }
}

/* ===========================================
   手机端页：MOBILE PAGE
=========================================== */
.mobile-page {
    --primary: #dc3545;
    --text-heading: #831010;
    --text-body: #555;
}

.mobile-page .mobile-header {
    background: #fff9f9;
}

.mobile-page .hero-mobile {
    background: linear-gradient(150deg, #ea5455, #ce3132);
    color: white;
    padding: 60px 24px;
    border-radius: 20px;
    margin: 40px auto;
    text-align: center;
    max-width: 800px;
}

.mobile-page .hero-mobile h1 {
    font-size: 2.2rem;
    margin-bottom: 16px;
    line-height: 1.2;
}

.mobile-page .hero-mobile p {
    font-size: 1.05rem;
    opacity: 0.95;
    margin-bottom: 24px;
}

.mobile-page .hero-keywords-mobile {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.mobile-page .hero-keywords-mobile span {
    background: rgba(225, 175, 173, 0.25);
    color: #ffdfdf;
    padding: 6px 14px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid rgba(255,255,255,0.25);
}

.mobile-page .platform-comparison {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin: 60px auto;
}

.mobile-page .platform-item {
    text-align: center;
    padding: 24px;
    border: 1px solid #ffeaea;
    border-radius: 16px;
    transition: transform 0.25s ease;
}

.mobile-page .platform-item:hover {
    transform: translateY(-4px);
}

.mobile-page .platform-icon {
    font-size: 2rem;
    margin-bottom: 16px;
}

.mobile-page .platform-item h3 {
    color: var(--text-heading);
    margin-bottom: 12px;
    font-size: 1.2rem;
}

.mobile-page .platform-item ul {
    list-style: none;
    margin-bottom: 16px;
    color: var(--text-body);
    line-height: 1.5;
}

.mobile-page .platform-link {
    color: var(--primary);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mobile-page .app-features {
    margin: 60px auto;
}

.mobile-page .app-features h2 {
    text-align: center;
    color: var(--text-heading);
    font-size: 2rem;
    margin-bottom: 40px;
}

.mobile-page .diagram-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
    justify-content: center;
}

.mobile-page .diagram-item {
    flex: 1 1 200px;
    background: #ffeaea;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.mobile-page .diagram-item h3 {
    color: var(--text-heading);
    margin-bottom: 8px;
    font-size: 1.1rem;
}

.mobile-page .diagram-item p {
    color: var(--text-body);
    line-height: 1.5;
}

@media (min-width: 568px) {
    .mobile-page .platform-comparison {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .mobile-page .hero-mobile h1 {
        font-size: 2.5rem;
    }
}

/* ===========================================
   安卓APK页：APK PAGE
=========================================== */
.apk-page {
    --primary: #ff9500;
    --primary-dark: #de8100;
    --text-heading: #382400;
    --text-body: #554433;
    --alert-bg: #ffeaea;
    --alert-text: #dc3545;
}

.apk-page .apk-header {
    background: #fffbf6;
}

.apk-page .hero-apk {
    background: linear-gradient(150deg, #ff6932, #ff8800);
    color: white;
    padding: 60px 24px;
    border-radius: 20px;
    margin: 40px auto;
    text-align: center;
    max-width: 800px;
}

.apk-page .hero-apk h1 {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 16px;
    line-height: 1.2;
}

.apk-page .hero-apk p {
    font-size: 1.05rem;
    opacity: 0.95;
    margin-bottom: 24px;
}

.apk-page .hero-keywords-apk {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.apk-page .hero-keywords-apk span {
    background: rgba(255, 255, 255, 0.15);
    color: #fffaf0;
    padding: 6px 14px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid rgba(255,255,255,0.25);
}

.apk-page .alert-banner {
    display: flex;
    align-items: center;
    background: var(--alert-bg);
    color: var(--alert-text);
    padding: 16px 20px;
    border-radius: 8px;
    margin: 32px auto;
    font-weight: 600;
    max-width: 800px;
}

.apk-page .alert-icon {
    margin-right: 10px;
    font-size: 1.2rem;
}

.apk-page .apk-main {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    margin: 60px auto;
}

.apk-page .apk-download-card h2 {
    color: var(--text-heading);
    font-size: 1.4rem;
    margin-bottom: 20px;
}

.apk-page .apk-meta {
    margin-bottom: 24px;
}

.apk-page .meta-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}

.apk-page .meta-label {
    color: var(--text-body);
    font-weight: 600;
}

.apk-page .meta-value {
    color: var(--text-heading);
    font-family: monospace;
    font-size: 0.95rem;
}

.apk-page .apk-dl-btn {
    background: var(--primary);
    color: white;
    padding: 12px 28px;
    border-radius: 6px;
    font-weight: 600;
}

.apk-page .apk-dl-btn:hover {
    background: var(--primary-dark);
}

.apk-page .apk-steps {
    background: linear-gradient(135deg, #fffaf3, #feedda);
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #fce5cb;
}

.apk-page .apk-steps h2 {
    color: var(--text-heading);
    font-size: 1.4rem;
    margin-bottom: 20px;
}

.apk-page .apk-step-list {
    counter-reset: step-counter;
    list-style: none;
}

.apk-page .apk-step-list > li {
    position: relative;
    padding-left: 36px;
    margin-bottom: 20px;
}

.apk-page .apk-step-list > li::before {
    counter-increment: step-counter;
    content: counter(step-counter);
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
}

.apk-page .apk-step-list h3 {
    color: var(--text-heading);
    font-size: 1.1rem;
    margin-bottom: 4px;
}

.apk-page .apk-step-list p {
    color: var(--text-body);
    line-height: 1.5;
}

.apk-page .apk-warnings {
    background: #fff6f6;
    border: 1px solid #fcd7d7;
    border-radius: 12px;
    padding: 24px;
    margin: 60px auto;
    max-width: 800px;
}

.apk-page .apk-warnings h2 {
    color: var(--alert-text);
    font-size: 1.4rem;
    margin-bottom: 16px;
}

.apk-page .warning-list {
    color: var(--alert-text);
    line-height: 1.5;
    padding-left: 20px;
}

.apk-page .warning-list li {
    margin-bottom: 8px;
}

@media (min-width: 768px) {
    .apk-page .apk-main {
        grid-template-columns: 1fr 1fr;
    }
    
    .apk-page .hero-apk h1 {
        font-size: 2.5rem;
    }
}

/* ===========================================
   交易所页：EXCHANGE PAGE
=========================================== */
.exchange-page {
    --primary: #056ffa;
    --accent: #06bef9;
    --bg-body: #071923;
    --card-bg: #091d2e;
    --card-border: #073052;
    --text-heading: #bee3ff;
    --text-body: #abc3e3;
}

.exchange-page body {
    background: var(--bg-body);
    color: var(--text-body);
}

.exchange-page .exchange-header {
    background: var(--bg-body);
    border-bottom: 1px solid var(--card-border);
}

.exchange-page .logo {
    color: var(--accent);
}

.exchange-page .main-nav a {
    color: var(--text-body);
}

.exchange-page .main-nav a:hover {
    color: var(--accent);
}

.exchange-page .hero-exchange {
    background: linear-gradient(150deg, #083463, #051935);
    color: white;
    padding: 60px 24px;
    border-radius: 20px;
    margin: 40px auto;
    text-align: center;
    max-width: 800px;
}

.exchange-page .hero-exchange h1 {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 16px;
    line-height: 1.2;
}

.exchange-page .hero-exchange p {
    font-size: 1.05rem;
    opacity: 0.95;
    margin-bottom: 24px;
}

.exchange-page .hero-keywords-exchange {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.exchange-page .hero-keywords-exchange span {
    background: rgba(90, 156, 255, 0.2);
    color: #addaff;
    padding: 6px 14px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid rgba(255,255,255,0.15);
}

.exchange-page .product-cards {
    margin: 60px auto;
}

.exchange-page .product-cards h2 {
    text-align: center;
    color: var(--text-heading);
    font-size: 2rem;
    margin-bottom: 40px;
}

.exchange-page .product-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    padding: 24px;
    border-radius: 12px;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.exchange-page .product-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
}

.exchange-page .product-card h3 {
    color: var(--text-heading);
    margin-bottom: 12px;
    font-size: 1.2rem;
}

.exchange-page .product-card ul {
    list-style: none;
    margin-bottom: 16px;
    line-height: 1.5;
}

.exchange-page .product-card li {
    color: var(--text-body);
    margin-bottom: 6px;
}

.exchange-page .product-link {
    color: var(--accent);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.exchange-page .trading-ui-demo {
    margin: 60px auto;
}

.exchange-page .trading-ui-demo h2 {
    text-align: center;
    color: var(--text-heading);
    font-size: 2rem;
    margin-bottom: 40px;
}

.exchange-page .ui-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 800px;
    margin: 0 auto;
}

.exchange-page .ui-panel {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 20px;
    min-height: 140px;
}

.exchange-page .ui-panel h4 {
    color: var(--text-heading);
    margin-bottom: 8px;
}

.exchange-page .ui-panel p {
    color: var(--text-body);
    line-height: 1.5;
}

.exchange-page .fee-summary {
    margin: 60px auto;
}

.exchange-page .fee-summary h2 {
    text-align: center;
    color: var(--text-heading);
    font-size: 2rem;
    margin-bottom: 32px;
}

.exchange-page .fee-table-wrapper {
    overflow-x: auto;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
}

.exchange-page .fee-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.exchange-page .fee-table th,
.exchange-page .fee-table td {
    padding: 10px 12px;
    text-align: center;
    border-bottom: 1px solid var(--card-border);
}

.exchange-page .fee-table th {
    color: var(--text-heading);
    font-weight: 600;
}

.exchange-page .fee-table td {
    color: var(--text-body);
}

.exchange-page .footnote {
    text-align: center;
    color: var(--text-body);
    opacity: 0.9;
    margin-top: 16px;
    font-size: 0.9rem;
}

@media (min-width: 768px) {
    .exchange-page .hero-exchange h1 {
        font-size: 2.5rem;
    }
    
    .exchange-page .ui-layout {
        grid-template-columns: 2fr 1fr;
        grid-template-rows: auto auto;
        gap: 20px;
    }
    
    .exchange-page .chart-panel { grid-column: 1 / 2; grid-row: 1 / 3; }
    .exchange-page .orderbook-panel { grid-column: 2 / 3; grid-row: 1 / 2; }
    .exchange-page .trade-form-panel { grid-column: 2 / 3; grid-row: 2 / 3; }
    .exchange-page .positions-panel { grid-column: 1 / 3; grid-row: 3 / 4; }
}

/* ===========================================
   注册页：REGISTER PAGE
=========================================== */
.register-page {
    --primary: #009688;
    --text-heading: #014940;
    --text-body: #446865;
    --card-secondary: #e0f2f1;
}

.register-page .register-header {
    background: #f0f9f8;
}

.register-page .hero-register {
    background: linear-gradient(150deg, #4db6ac, #079992);
    color: white;
    padding: 60px 24px;
    border-radius: 20px;
    margin: 40px auto;
    text-align: center;
    max-width: 800px;
}

.register-page .hero-register h1 {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 16px;
    line-height: 1.2;
}

.register-page .hero-register p {
    font-size: 1.05rem;
    opacity: 0.95;
    margin-bottom: 24px;
}

.register-page .hero-keywords-register {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.register-page .hero-keywords-register span {
    background: rgba(255, 255, 255, 0.15);
    color: #e0f7f5;
    padding: 6px 14px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid rgba(255,255,255,0.25);
}

.register-page .register-flow {
    margin: 60px auto;
}

.register-page .register-flow h2 {
    text-align: center;
    color: var(--text-heading);
    font-size: 2rem;
    margin-bottom: 40px;
}

.register-page .flow-chart {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
    max-width: 800px;
    margin: 0 auto;
}

.register-page .flow-step {
    border: 1px solid var(--card-secondary);
    padding: 20px;
    text-align: center;
    border-radius: 12px;
    flex: 1 1 160px;
}

.register-page .step-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-weight: 600;
    font-size: 1rem;
}

.register-page .flow-step h3 {
    color: var(--text-heading);
    margin-bottom: 8px;
    font-size: 1.1rem;
}

.register-page .flow-step p {
    color: var(--text-body);
    line-height: 1.5;
    font-size: 0.9rem;
}

.register-page .arrow {
    color: var(--primary);
    font-weight: 600;
    font-size: 1.1rem;
}

.register-page .material-prep {
    margin: 60px auto;
}

.register-page .material-prep h2 {
    text-align: center;
    color: var(--text-heading);
    font-size: 2rem;
    margin-bottom: 32px;
}

.register-page .materials-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    justify-content: center;
}

.register-page .material-item {
    background: var(--card-secondary);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.register-page .material-item h3 {
    color: var(--text-heading);
    margin-bottom: 8px;
    font-size: 1.1rem;
}

.register-page .material-item p {
    color: var(--text-body);
    line-height: 1.5;
    font-size: 0.9rem;
}

.register-page .form-demo {
    margin: 60px auto;
}

.register-page .form-demo h2 {
    text-align: center;
    color: var(--text-heading);
    font-size: 2rem;
    margin-bottom: 32px;
}

.register-page .demo-form-wrapper {
    border: 1px solid var(--card-secondary);
    padding: 24px;
    border-radius: 12px;
    max-width: 500px;
    margin: 0 auto;
}

.register-page .field-group {
    margin-bottom: 16px;
}

.register-page .field-group label {
    display: block;
    color: var(--text-heading);
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 0.95rem;
}

.register-page .field-group input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 1rem;
}

.register-page .agreement-line {
    display: flex;
    align-items: center;
    margin: 16px 0;
    color: var(--text-body);
    font-size: 0.95rem;
}

.register-page .agreement-line input {
    width: auto;
    margin-right: 8px;
}

.register-page .demo-submit-btn {
    background: var(--primary);
    color: white;
    padding: 12px 28px;
    border-radius: 6px;
    font-weight: 600;
    cursor: not-allowed;
    opacity: 0.7;
    width: 100%;
}

@media (min-width: 476px) {
    .register-page .materials-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .register-page .hero-register h1 {
        font-size: 2.5rem;
    }
    
    .register-page .materials-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .register-page .arrow {
        display: block;
    }
}

@media (max-width: 767px) {
    .register-page .arrow {
        display: none;
    }
}

/* ===========================================
   电脑端页：PC CLIENT PAGE
=========================================== */
.pc-client-page {
    --primary: #ffae00;
    --accent: #ffca5c;
    --bg-body: #1a1a1a;
    --card-bg: #252525;
    --card-border: #454545;
    --text-heading: #ffca5c;
    --text-body: #cccccc;
}

.pc-client-page body {
    background: var(--bg-body);
    color: var(--text-body);
}

.pc-client-page .pc-client-header {
    background: var(--bg-body);
    border-bottom: 1px solid #393939;
}

.pc-client-page .logo {
    color: var(--primary);
}

.pc-client-page .main-nav a {
    color: var(--text-body);
}

.pc-client-page .main-nav a:hover {
    color: var(--primary);
}

.pc-client-page .hero-pc-client {
    background: linear-gradient(150deg, #805e00, #604400);
    color: white;
    padding: 60px 24px;
    border-radius: 20px;
    margin: 40px auto;
    text-align: center;
    max-width: 800px;
}

.pc-client-page .hero-pc-client h1 {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 16px;
    line-height: 1.2;
}

.pc-client-page .hero-pc-client p {
    font-size: 1.05rem;
    opacity: 0.95;
    margin-bottom: 24px;
}

.pc-client-page .hero-keywords-pc-client {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.pc-client-page .hero-keywords-pc-client span {
    background: rgba(121, 93, 36, 0.25);
    color: #fed893;
    padding: 6px 14px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid rgba(255,255,255,0.15);
}

.pc-client-page .pc-benefits {
    margin: 60px auto;
}

.pc-client-page .pc-benefits h2 {
    text-align: center;
    color: var(--text-heading);
    font-size: 2rem;
    margin-bottom: 40px;
}

.pc-client-page .benefit-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    padding: 24px;
    border-radius: 12px;
    transition: border-color 0.25s ease;
}

.pc-client-page .benefit-card:hover {
    border-color: var(--primary);
}

.pc-client-page .benefit-card h3 {
    color: var(--text-heading);
    margin-bottom: 12px;
    font-size: 1.2rem;
}

.pc-client-page .benefit-card p {
    color: var(--text-body);
    line-height: 1.5;
}

.pc-client-page .pc-ui-simulate {
    margin: 60px auto;
}

.pc-client-page .pc-ui-simulate h2 {
    text-align: center;
    color: var(--text-heading);
    font-size: 2rem;
    margin-bottom: 40px;
}

.pc-client-page .desktop-layout {
    display: flex;
    flex-direction: column;
    max-width: 800px;
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--card-border);
}

.pc-client-page .sim-sidebar {
    width: 100%;
    background: var(--card-bg);
    padding: 20px;
    border-bottom: 1px solid var(--card-border);
}

.pc-client-page .sidebar-menu {
    color: var(--text-body);
    padding: 10px 14px;
    margin-bottom: 8px;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.2s ease;
    font-size: 0.95rem;
}

.pc-client-page .sidebar-menu:hover {
    background: #494949;
}

.pc-client-page .account-switch {
    color: var(--primary);
    font-weight: 600;
    margin-top: 16px;
    padding: 10px 14px;
    cursor: pointer;
    font-size: 0.95rem;
}

.pc-client-page .sim-main-area {
    flex: 1;
    background: var(--card-bg);
    padding: 20px;
}

.pc-client-page .top-bar-sim {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    color: var(--text-heading);
    font-weight: 600;
    margin-bottom: 16px;
    gap: 10px;
}

.pc-client-page .chart-placeholder,
.pc-client-page .order-entry-sim {
    background: rgba(0, 18, 32, 0.3);
    border: 1px solid #565656;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    color: #aaa;
    text-align: center;
    font-size: 0.9rem;
}

.pc-client-page .shortcuts-guide {
    margin: 60px auto;
}

.pc-client-page .shortcuts-guide h2 {
    text-align: center;
    color: var(--text-heading);
    font-size: 2rem;
    margin-bottom: 32px;
}

.pc-client-page .shortcut-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    justify-content: center;
}

.pc-client-page .shortcut-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--card-bg);
    border-radius: 8px;
    padding: 14px;
    border: 1px solid var(--card-border);
}

.pc-client-page .shortcut-item kbd {
    background: #474747;
    color: var(--primary);
    padding: 5px 9px;
    border-radius: 4px;
    font-family: monospace;
    font-weight: 600;
    font-size: 0.85rem;
    min-width: 38px;
    text-align: center;
}

.pc-client-page .shortcut-item span {
    color: var(--text-body);
    font-size: 0.95rem;
}

.pc-client-page .pc-articles {
    margin: 60px auto;
}

.pc-client-page .pc-articles h2 {
    text-align: center;
    color: var(--text-heading);
    font-size: 2rem;
    margin-bottom: 40px;
}

.pc-client-page .pc-article-grid article {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    padding: 24px;
    border-radius: 12px;
    transition: border-color 0.25s ease;
}

.pc-client-page .pc-article-grid article:hover {
    border-color: var(--primary);
}

.pc-client-page .pc-article-grid h3 {
    color: var(--text-heading);
    font-size: 1.2rem;
    margin-bottom: 12px;
}

.pc-client-page .pc-article-grid p {
    color: var(--text-body);
    line-height: 1.5;
}

@media (min-width: 768px) {
    .pc-client-page .hero-pc-client h1 {
        font-size: 2.5rem;
    }
    
    .pc-client-page .desktop-layout {
        flex-direction: row;
        height: 400px;
    }
    
    .pc-client-page .sim-sidebar {
        width: 220px;
        border-right: 1px solid var(--card-border);
        border-bottom: none;
    }
    
    .pc-client-page .shortcut-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .pc-client-page .shortcut-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ===========================================
   APP页：APP PAGE — 最终页
=========================================== */
.app-page {
    --primary: #9050e9;
    --text-heading: #451582;
    --text-body: #574766;
    --card-alt: #f3ebff;
}

.app-page .app-header {
    background: #faf5ff;
    border-bottom: 1px solid #eadfff;
}

.app-page .hero-app {
    background: linear-gradient(150deg, #a885ed, #855ad6);
    color: white;
    padding: 60px 24px;
    border-radius: 20px;
    margin: 40px auto;
    text-align: center;
    max-width: 800px;
}

.app-page .hero-app h1 {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 16px;
    line-height: 1.2;
}

.app-page .hero-app p {
    font-size: 1.05rem;
    opacity: 0.95;
    margin-bottom: 24px;
}

.app-page .hero-keywords-app {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.app-page .hero-keywords-app span {
    background: rgba(255, 255, 255, 0.15);
    color: #ecdfff;
    padding: 6px 14px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid rgba(255,255,255,0.25);
}

.app-page .app-core-func {
    margin: 60px auto;
}

.app-page .app-core-func h2 {
    text-align: center;
    color: var(--text-heading);
    font-size: 2rem;
    margin-bottom: 40px;
}

.app-page .func-list {
    max-width: 600px;
    margin: 0 auto;
}

.app-page .func-card {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--card-alt);
    padding: 24px;
    margin-bottom: 16px;
    border-radius: 16px;
    transition: transform 0.25s ease;
}

.app-page .func-card:hover {
    transform: translateY(-4px);
}

.app-page .func-icon {
    font-size: 2rem;
    margin-right: 20px;
    width: 50px;
    text-align: center;
}

.app-page .func-text h3 {
    color: var(--text-heading);
    margin-bottom: 8px;
    font-size: 1.2rem;
}

.app-page .func-text p {
    color: var(--text-body);
    line-height: 1.5;
    font-size: 0.95rem;
}

.app-page .floating-action-sim {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 99;
}

.app-page .fab {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    cursor: pointer;
    user-select: none;
    transition: transform 0.2s ease;
}

.app-page .fab:hover {
    transform: scale(1.07);
}

.app-page .gesture-tips {
    margin: 60px auto;
    background: var(--card-alt);
    border-radius: 16px;
    padding: 24px;
    max-width: 600px;
}

.app-page .gesture-tips h2 {
    text-align: center;
    color: var(--text-heading);
    font-size: 1.8rem;
    margin-bottom: 24px;
}

.app-page .tip-list {
    list-style: none;
    color: var(--text-body);
    line-height: 1.5;
}

.app-page .tip-list li {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
}

.app-page .tip-list strong {
    color: var(--text-heading);
}

.app-page .app-articles {
    margin: 60px auto;
}

.app-page .app-articles h2 {
    text-align: center;
    color: var(--text-heading);
    font-size: 2rem;
    margin-bottom: 40px;
}

.app-page .app-article-grid article {
    background: #fff;
    border: 1px solid var(--card-alt);
    padding: 24px;
    border-radius: 16px;
    transition: transform 0.25s ease;
}

.app-page .app-article-grid article:hover {
    transform: translateY(-4px);
}

.app-page .app-article-grid h3 {
    color: var(--text-heading);
    font-size: 1.2rem;
    margin-bottom: 12px;
}

.app-page .app-article-grid p {
    color: var(--text-body);
    line-height: 1.5;
}

@media (min-width: 768px) {
    .app-page .hero-app h1 {
        font-size: 2.5rem;
    }
    
    .app-page .app-article-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 通用响应式补丁 */
@media (max-width: 767px) {
    .hidden-mobile {
        display: none !important;
    }
    
    .main-nav ul {
        gap: 8px;
    }
    
    .main-nav a {
        font-size: 0.9rem;
        padding: 5px 10px;
    }
    
    .hero-content h1,
    .hero-official h1,
    .hero-download h1,
    .hero-mobile h1,
    .hero-apk h1,
    .hero-exchange h1,
    .hero-register h1,
    .hero-pc-client h1,
    .hero-app h1 {
        font-size: 1.8rem !important;
    }
    
    .card {
        padding: 20px;
    }
    
    .floating-action-sim {
        bottom: 20px;
        right: 20px;
    }
    
    .fab {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 12px;
    }
    
    .header-inner {
        padding: 12px 0;
    }
    
    .logo {
        font-size: 1.3rem;
    }
    
    .hero-section,
    .hero-official,
    .hero-download,
    .hero-mobile,
    .hero-apk,
    .hero-exchange,
    .hero-register,
    .hero-pc-client,
    .hero-app {
        padding: 40px 20px !important;
    }
}