@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
:root {
    /* 腾讯云风格配色 */
    --bg-base: linear-gradient(180deg, #f0f7ff 0%, #e8f4ff 50%, #f5f9ff 100%);
    --bg-surface: #ffffff;
    --bg-elevated: #ffffff;
    --border-subtle: rgba(0, 102, 255, 0.08);
    --border-default: rgba(0, 102, 255, 0.12);
    --border-strong: rgba(0, 102, 255, 0.2);
    --shadow-sm: 0 2px 8px rgba(0, 102, 255, 0.06);
    --shadow-md: 0 8px 24px rgba(0, 102, 255, 0.08);
    --shadow-lg: 0 16px 48px rgba(0, 102, 255, 0.12);
    --text-base: #1a1a1a;
    --text-muted: #666666;
    --accent: #0066ff;
    --accent-dark: #0052cc;
    --surface-soft: #f5f9ff;
    --tencent-blue: #0066ff;
    --tencent-blue-light: #e6f0ff;
    --tencent-orange: #ff6a00;
}

html {
    scroll-behavior: smooth;
}

body.app-shell {
    margin: 0;
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', sans-serif;
    background: #f0f7ff;
    background: linear-gradient(180deg, #f0f7ff 0%, #e8f4ff 30%, #f8fbff 70%, #ffffff 100%);
    background-attachment: fixed;
    color: var(--text-base);
}

body, input, select, button, textarea {
    font-family: inherit;
}

img {
    max-width: 100%;
    display: block;
}

::selection {
    background: rgba(0, 102, 255, 0.15);
}

.module-primary,
.module-secondary,
.module-tertiary {
    background: #ffffff;
    border-radius: 12px;
}

.module-primary {
    border: 1px solid rgba(0, 102, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0, 102, 255, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
}

.module-secondary {
    border: 1px solid rgba(0, 102, 255, 0.08);
    box-shadow: 0 2px 12px rgba(0, 102, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.03);
}

.module-tertiary {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 102, 255, 0.06);
    box-shadow: 0 2px 8px rgba(0, 102, 255, 0.04);
    backdrop-filter: blur(12px);
}

.card-hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.metric-value {
    background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 腾讯云风格：收益用橙色强调，亏损用蓝色 */
.metric-value-positive { 
    background: linear-gradient(135deg, #ff6a00 0%, #ff8533 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}
.metric-value-negative { 
    background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.pulse-dot {
    animation: pulse 2s infinite ease-in-out;
}

.status-dot-online {
    background: #00b578;
}

.status-dot-refreshing {
    background: #0066ff;
}

.status-dot-error {
    background: #ef4444;
}

.status-dot-offline {
    background: #9ca3af;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(1.08); }
}

.refresh-btn {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease;
}

.refresh-btn:hover {
    transform: rotate(180deg);
}

.modal-backdrop {
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(6px);
}

.modal-card {
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.modal-header {
    border-bottom: 1px solid rgba(229, 231, 235, 0.9);
}

.btn-primary {
    background-color: var(--accent);
    color: #fff;
}

.btn-primary:hover {
    background-color: var(--accent-dark);
}

.btn-muted {
    background-color: #f8fafc;
    color: var(--text-muted);
}

#login-page {
    min-height: 100vh;
}

#app-page {
    min-height: 100vh;
}

#login-error {
    transition: opacity 0.24s ease;
}

#upload-area:hover {
    background: rgba(0, 110, 255, 0.04);
}

#toast {
    transition: opacity 0.2s ease, transform 0.2s ease;
    will-change: opacity, transform;
}

@media (max-width: 640px) {
    #login-page,
    #login-modal {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    #login-page > div,
    #login-modal > div {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ===== 暗色模式 ===== */
body.dark-mode.app-shell {
    background: linear-gradient(180deg, #0d1421 0%, #1a1a2e 40%, #16213e 100%) !important;
    color: #dce6f0 !important;
}

/* 顶部导航栏 */
body.dark-mode #app-page > div:first-child {
    background: #16213e !important;
    border-bottom-color: #0f3460 !important;
}
body.dark-mode h1.text-\[\#1a1a1a\],
body.dark-mode .text-\[\#1a1a1a\] { color: #dce6f0 !important; }
body.dark-mode .text-\[\#374151\] { color: #b0c4d8 !important; }
body.dark-mode .text-\[\#4b5563\] { color: #8a9ab0 !important; }
body.dark-mode .text-\[\#6b7280\] { color: #7a8fa8 !important; }
body.dark-mode .text-\[\#9ca3af\] { color: #4a6080 !important; }
body.dark-mode .text-\[\#d1d5db\] { color: #2a4060 !important; }
body.dark-mode .text-gray-900  { color: #dce6f0 !important; }
body.dark-mode .text-gray-700  { color: #a8b8c8 !important; }
body.dark-mode .text-gray-600  { color: #8a9ab0 !important; }
body.dark-mode .text-gray-500  { color: #6a8098 !important; }
body.dark-mode .text-gray-400  { color: #4a6080 !important; }

/* 卡片背景 */
body.dark-mode .module-primary {
    background: #1c2d4a !important;
    border-color: #0f3460 !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
}
body.dark-mode .module-secondary {
    background: #16273e !important;
    border-color: #0a2540 !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3) !important;
}
body.dark-mode .module-tertiary {
    background: rgba(22,33,62,0.95) !important;
    border-color: #0a2540 !important;
}

/* 通用白色/浅灰背景 */
body.dark-mode .bg-white         { background-color: #1c2d4a !important; }
body.dark-mode .bg-gray-50        { background-color: #172030 !important; }
body.dark-mode .bg-\[\#f8fafc\]   { background-color: #172030 !important; }
body.dark-mode .bg-\[\#f9fafb\]   { background-color: #172030 !important; }
body.dark-mode .bg-\[\#f5f7fa\]   { background-color: #172030 !important; }
body.dark-mode .bg-\[\#f5f9ff\]   { background-color: #0e1e30 !important; }
body.dark-mode .bg-\[\#f3f4f6\]   { background-color: #162030 !important; }
body.dark-mode .bg-\[\#F5F7FA\]   { background-color: #172030 !important; }

/* 蓝色浅背景徽章 */
body.dark-mode .bg-\[\#e6f0ff\]   { background-color: #0a2545 !important; }
body.dark-mode .bg-\[\#eff6ff\]   { background-color: #0a2545 !important; }

/* 边框 */
body.dark-mode .border-\[\#f3f4f6\]  { border-color: #0f2235 !important; }
body.dark-mode .border-\[\#e5e9ef\]  { border-color: #1a3050 !important; }
body.dark-mode .border-\[\#E5E9EF\]  { border-color: #1a3050 !important; }
body.dark-mode .border-\[\#e5e7eb\]  { border-color: #1a3050 !important; }
body.dark-mode .border-gray-100    { border-color: #0f2235 !important; }
body.dark-mode .border-gray-200    { border-color: #1a3050 !important; }

/* 输入框 */
body.dark-mode input:not([type=checkbox]):not([type=radio]),
body.dark-mode select,
body.dark-mode textarea {
    background-color: #172030 !important;
    border-color: #1e3558 !important;
    color: #c8d8e8 !important;
}
body.dark-mode input::placeholder { color: #3a5070 !important; }

/* 基金列表项 */
body.dark-mode .hover\:bg-\[\#f5f9ff\]:hover { background-color: #1a2e48 !important; }
body.dark-mode .hover\:bg-blue-50:hover    { background-color: #0a2545 !important; }
body.dark-mode .hover\:bg-red-50:hover     { background-color: #2a0f0f !important; }
body.dark-mode .hover\:bg-purple-50:hover  { background-color: #1a0a2a !important; }

/* 徽章文字 */
body.dark-mode span.bg-\[\#f3f4f6\].text-\[\#6b7280\] { background-color: #162030 !important; color: #7a8fa8 !important; }

/* ECharts 图表背景融入 */
body.dark-mode canvas { filter: brightness(0.95); }

/* AI 分析内容 */
.ysbai-analysis-body { color: #374151; }
.ysbai-analysis-body strong { color: #1a1a1a; }
.ysbai-ts { color: #9ca3af; }
body.dark-mode .ysbai-analysis-body { color: #b0c4d8 !important; }
body.dark-mode .ysbai-analysis-body strong { color: #dce6f0 !important; }
body.dark-mode .ysbai-ts { color: #4a6080 !important; }
body.dark-mode #ysbai-inline-body button { color: #818cf8 !important; background: #1e2d50 !important; }