/* ================= 核心主题变量 ================= */
:root {
    --bg-body: #050505;
    --bg-card: #131315;
    --text-main: #ffffff;
    --text-unit: #8b92a0;   
    --border-color: #27272a;
    --color-up: #ef4444;    
    --color-down: #10b981;  
    --gold-primary: #eab308;
    --gold-text: #eab308;   
    --gold-glow: rgba(234, 179, 8, 0.35); 
    --gold-unselected: #a16207; 
    --silver-primary: #cbd5e1;
    --silver-text: #e2e8f0; 
    --silver-glow: rgba(148, 163, 184, 0.45); 
    --silver-unselected: #6b7280; 

    --active-primary: var(--gold-primary);
    --active-glow: var(--gold-glow);
    --active-text: var(--gold-text);
}

body.light-mode {
    --bg-body: #f3f4f6;
    --bg-card: #ffffff;
    --text-main: #111827;
    --text-unit: #4b5563;   
    --border-color: #e5e7eb;
    --color-up: #dc2626;    
    --color-down: #047857;  
    --gold-text: #b45309;   
    --silver-text: #475569; 
    --gold-unselected: #d97706;
    --silver-unselected: #9ca3af;
    --gold-glow: rgba(234, 179, 8, 0.22);
    --silver-glow: rgba(148, 163, 184, 0.32);
}

body.theme-gold { --active-primary: var(--gold-primary); --active-glow: var(--gold-glow); --active-text: var(--gold-text); }
body.theme-silver { --active-primary: var(--silver-primary); --active-glow: var(--silver-glow); --active-text: var(--silver-text); }

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
body {
    background-color: var(--bg-body); color: var(--text-main);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    min-height: 100vh; display: flex; flex-direction: column;
    transition: background-color 0.4s ease, color 0.4s ease; overflow-x: hidden; 
}

.container { 
    max-width: 1200px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; flex: 1; 
    padding: 12px 16px 20px 16px; position: relative; 
}
a { text-decoration: none; }

/* ================= 头部与 LOGO ================= */
.header { display: flex; justify-content: space-between; align-items: center; padding: 4px 0 14px 0; z-index: 10; }
.brand-logo {
    display: inline-flex; align-items: center; background-color: #222222;
    padding: 4px 6px 4px 10px; border-radius: 12px; border: 1px solid #3f3f46;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3); user-select: none; letter-spacing: 0.5px;
}
body.light-mode .brand-logo { box-shadow: 0 4px 12px rgba(0,0,0,0.15); border-color: #111; }
.logo-text-gold { color: #facc15; font-size: 1.15rem; font-weight: 900; }
.logo-text-silver { color: #e2e8f0; font-size: 1.15rem; font-weight: 900; margin-right: 8px; margin-left: 2px; }
.logo-badge { background-color: #facc15; color: #000; font-style: italic; font-weight: 900; font-size: 1.05rem; padding: 2px 8px; border-radius: 8px; box-shadow: inset 0 -1px 2px rgba(0,0,0,0.25); }

.theme-toggle { position: relative; width: 52px; height: 26px; background-color: #1f1f22; border: 1px solid #3f3f46; border-radius: 13px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 0 5px; transition: all 0.3s ease; }
body.light-mode .theme-toggle { background-color: #f3f4f6; border-color: #d1d5db; }
.theme-toggle svg { width: 14px; height: 14px; z-index: 2; opacity: 0.8; color: var(--text-main); transition: color 0.3s ease; }
body.light-mode .theme-toggle svg { color: #111827; }
.theme-slider { position: absolute; top: 1px; left: 1px; width: 22px; height: 22px; background-color: #3f3f46; border-radius: 50%; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease; z-index: 1; }
body.light-mode .theme-slider { transform: translateX(26px); background-color: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }

.title-wrapper { text-align: center; margin-bottom: 12px; z-index: 10; position: relative; }
.page-title { font-size: 1.2rem; font-weight: 700; color: var(--text-main); letter-spacing: 0.5px; }

/* ================= 选项卡架构 ================= */
.tabs-wrapper { position: relative; margin-bottom: 14px; z-index: 5; }
.tabs-container { display: flex; justify-content: space-between; position: relative; height: 40px; }
.tab-btn { width: 100px; text-align: center; line-height: 40px; z-index: 10; cursor: pointer; user-select: none; font-size: 1.1rem; font-weight: bold; transition: color 0.3s; }
#btn-gold { color: var(--gold-unselected); padding: 1px 0 0 30px; } 
#btn-silver { color: var(--silver-unselected); padding: 1px 30px 0 0; }
body.theme-gold #btn-gold { color: var(--gold-text); }
body.theme-silver #btn-silver { color: var(--silver-text); }

.tabs-bg-layer { position: absolute; top: 0; left: 0; width: 100%; height: 40px; pointer-events: none; z-index: 2; }
.bg-comp-gold { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.4s ease; }
body.theme-gold .bg-comp-gold { opacity: 1; }
.g-rect { position: absolute; left: 0; top: 0; width: 100px; height: 40px; background: var(--gold-glow); }
.g-svg { position: absolute; left: 100px; top: 0; width: 60px; height: 40px; }
.svg-fill-gold { fill: var(--gold-glow); }
.svg-line-gold { fill: none; stroke: var(--gold-primary); stroke-width: 2px; }
.g-line-top { position: absolute; left: 0; top: 0; width: 105px; height: 2px; background: var(--gold-primary); }
.g-line-bottom { position: absolute; left: 145px; right: 0; top: 38px; height: 2px; background: var(--gold-primary); }

.bg-comp-silver { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.4s ease; }
body.theme-silver .bg-comp-silver { opacity: 1; }
.s-rect { position: absolute; right: 0; top: 0; width: 100px; height: 40px; background: var(--silver-glow); }
.s-svg { position: absolute; right: 100px; top: 0; width: 60px; height: 40px; }
.svg-fill-silver { fill: var(--silver-glow); }
.svg-line-silver { fill: none; stroke: var(--silver-primary); stroke-width: 2px; }
.s-line-top { position: absolute; right: 0; top: 0; width: 105px; height: 2px; background: var(--silver-primary); }
.s-line-bottom { position: absolute; left: 0; right: 145px; top: 38px; height: 2px; background: var(--silver-primary); }

.tab-glow-transition { height: 40px; background: linear-gradient(to bottom, var(--active-glow), transparent); margin-bottom: -30px; position: relative; z-index: 1; pointer-events: none; transition: background 0.4s ease; }

/* ================= 布局与组件 ================= */
.carousel-viewport { width: 100%; overflow: hidden; flex: 1; position: relative; z-index: 10; }
.carousel-track { display: flex; width: 200%; transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1); will-change: transform; }
.carousel-item { width: 50%; display: flex; flex-direction: column; gap: 10px; }

.breadcrumb { font-size: 0.95rem; color: var(--text-unit); margin-bottom: 12px; display: flex; align-items: center; gap: 6px; font-weight: 500; }
.breadcrumb a { color: var(--text-main); font-weight: bold; transition: opacity 0.3s; }
.breadcrumb a:hover { opacity: 0.7; }
.breadcrumb span { color: var(--text-unit); }
.breadcrumb span:last-child { color: var(--text-unit); font-weight: normal; }

.price-card { background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px; padding: 16px 18px 18px 18px; text-align: center; box-shadow: 0 4px 20px rgba(0,0,0,0.15); margin-bottom: 8px;}
.price-card.compact { padding: 10px; }
.price-card.chart-card { margin-top: 6px; padding: 16px; }

.card-title-group { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 10px; }
.card-title { font-size: 1.1rem; font-weight: 700; color: var(--text-main); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.card-title::before { content: '◆'; font-size: 0.55rem; color: var(--active-primary); transition: color 0.3s ease; }
.card-title a { color: inherit; text-decoration: none; transition: opacity 0.3s ease; }
.card-title a:hover { opacity: 0.8; }

.trade-badge { font-size: 0.65rem; padding: 1px 5px; border-radius: 4px; cursor: pointer; font-weight: normal; display: inline-block; vertical-align: middle; transition: opacity 0.2s; }
.trade-badge:active { opacity: 0.7; }
.badge-open { background-color: rgba(16, 185, 129, 0.15); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); }
.badge-closed { background-color: rgba(139, 146, 160, 0.15); color: #8b92a0; border: 1px solid rgba(139, 146, 160, 0.3); }

.card-subtitle { font-size: 0.8rem; color: var(--text-unit); }
.price-unit { font-size: 0.85rem; font-weight: 500; color: var(--text-unit); margin-top: 4px; }
.price-display { margin-bottom: 6px; }
.price-main { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size: 2.8rem; font-weight: 700; line-height: 1; color: var(--color-up); font-variant-numeric: tabular-nums; letter-spacing: -1px; transition: color 0.3s ease; display: inline-block; position: relative; }

.price-main.anim-up { animation: priceJumpUp 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.price-main.anim-down { animation: priceJumpDown 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes priceJumpUp { 0% { transform: translateY(12px); opacity: 0.35; } 60% { transform: translateY(-3px); opacity: 1; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes priceJumpDown { 0% { transform: translateY(-12px); opacity: 0.35; } 60% { transform: translateY(3px); opacity: 1; } 100% { transform: translateY(0); opacity: 1; } }

.change-info { display: flex; justify-content: center; align-items: center; gap: 10px; font-size: 1rem; font-weight: 600; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.high-low-info { display: flex; justify-content: center; align-items: center; gap: 16px; font-size: 0.85rem; color: var(--text-unit); margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.high-low-info.no-mb { margin-bottom: 0 !important; }
.hl-val { font-weight: 600; color: var(--text-main); }
.change-divider { width: 1px; height: 10px; background-color: var(--border-color); }

.action-btn { display: flex; justify-content: center; align-items: center; width: fit-content; margin: 0 auto; padding: 7px 40px; border-radius: 20px; border: 1px solid transparent; background-color: transparent; font-size: 0.85rem; font-weight: bold; text-decoration: none; transition: all 0.3s ease; }
body.theme-gold .action-btn { border-color: rgba(234,179,8,0.3); color: var(--gold-text); }
body.theme-silver .action-btn { border-color: rgba(148,163,184,0.4); color: var(--silver-text); }
body.theme-gold .action-btn:hover, body.theme-gold .action-btn:active, 
body.theme-silver .action-btn:hover, body.theme-silver .action-btn:active {
    background-color: var(--active-primary); color: #000; border-color: var(--active-primary);
}

.loading-text { font-size: 1.8rem; color: var(--text-unit); }

/* ================= 图表区域 ================= */
.chart-header-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.chart-header-bottom { display: flex; justify-content: center; align-items: center; margin-top: 2px; width: 100%; max-width: 100%; overflow: hidden; }
.chart-title { font-size: 0.95rem; font-weight: bold; color: var(--text-main); }

.chart-type-selector { display: flex; gap: 6px; }
.type-btn { background: var(--bg-body); border: 1px solid var(--border-color); color: var(--text-unit); padding: 4px 10px; font-size: 0.85rem; border-radius: 6px; cursor: pointer; transition: all 0.2s; font-weight: bold; }
.type-btn.active, .type-btn:hover { background: var(--active-primary); color: #000; border-color: var(--active-primary); }

.timeframe-selector { 
    display: flex; gap: 4px; flex-wrap: nowrap; justify-content: center; width: 100%; 
    overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch;
}
.timeframe-selector::-webkit-scrollbar { display: none; }

.tf-btn { background: var(--bg-body); border: 1px solid var(--border-color); color: var(--text-unit); padding: 5px 12px; font-size: 0.8rem; border-radius: 6px; cursor: pointer; transition: all 0.2s; font-weight: bold; white-space: nowrap; }
.tf-btn.active, .tf-btn:hover { background: var(--active-primary); color: #000; border-color: var(--active-primary); }

/* 图表容器重定义，强制白底居中，适配图片 */
.chart-box { 
    width: 100%; height: 350px; background: #ffffff; border-radius: 8px; overflow: hidden; 
    border: 1px solid var(--border-color); display: flex; justify-content: center; align-items: center; 
}
/* 暗色模式下新浪纯白走势图强制反转颜色 */
body:not(.light-mode) .chart-box img {
    filter: invert(0.92) hue-rotate(180deg) contrast(1.1);
}

/* 弹窗 */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(6px); display: none; justify-content: center; align-items: center; z-index: 1000; padding: 20px; }
.modal-content { background: var(--bg-card); border: 1px solid var(--border-color); padding: 20px; border-radius: 16px; width: 100%; max-width: 320px; box-shadow: 0 12px 40px rgba(0,0,0,0.6); text-align: center; animation: modalPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes modalPop { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-title { font-size: 1.05rem; font-weight: bold; margin-bottom: 10px; color: var(--text-main); }
.modal-body { font-size: 0.85rem; color: var(--text-unit); line-height: 1.5; margin-bottom: 16px; text-align: left; background: rgba(128,128,128,0.05); padding: 12px; border-radius: 8px; }
.modal-btn { width: 100%; padding: 8px 0; background: var(--active-primary); border: none; border-radius: 10px; font-weight: bold; cursor: pointer; color: #000; font-size: 0.9rem; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }

.footer-section { margin-top: 14px; padding: 14px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; text-align: center; position: relative; z-index: 10; }
.seo-title { font-size: 0.9rem; font-weight: bold; color: var(--text-unit); margin-bottom: 6px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.seo-title::before, .seo-title::after { content: '◆'; font-size: 0.45rem; color: var(--border-color); }
.seo-text { font-size: 0.75rem; color: var(--text-unit); line-height: 1.5; margin-bottom: 8px; }
.copyright { font-size: 0.7rem; color: var(--text-unit); line-height: 1.6; padding-top: 2rem;}

@media (max-width: 768px) { 
    body { padding: 4px; } 
    .price-main { font-size: 2.6rem; }
    .chart-box { height: 280px; } 

    .timeframe-selector { gap: 2px; justify-content: flex-start; }
    .tf-btn { padding: 4px 5px; font-size: 0.75rem; }

    .tabs-wrapper { margin-left: -20px; margin-right: -20px; }
}

.header-controls { display: flex; align-items: center; gap: 14px; }
.bookmark-btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; background-color: transparent; border-radius: 50%; color: var(--text-unit); cursor: pointer; transition: all 0.3s ease; }
.bookmark-btn:hover { color: var(--active-primary); }
.bookmark-btn:active { background-color: rgba(128,128,128,0.15); transform: scale(0.95); }
.bookmark-btn svg { width: 18px; height: 18px; }

.share-section { display: flex; justify-content: center; margin: 16px 0 12px 0; border-top: 1px dashed var(--border-color); padding-top: 16px; }
.share-btn { display: flex; align-items: center; gap: 6px; padding: 8px 24px; border-radius: 20px; font-size: 0.9rem; font-weight: bold; cursor: pointer; background-color: var(--bg-body); border: 1px solid var(--border-color); color: var(--text-main); transition: all 0.2s; }
.share-btn:active, .share-btn:hover { background-color: var(--active-primary); color: #000; border-color: var(--active-primary); }