/* ==========================================================================
   A股棱镜 · 视觉增强层 (Vision Layer)
   --------------------------------------------------------------------------
   概念：深空观测台 —— 夜空做底 / 极光点题 / 玻璃做仪表 / 等宽数字做精密

   加载位置：base.html 中位于 responsive.css **之后**（最高优先级）。

   ⚠️ 设计纪律（为什么这样约束自己）：
     1. **只增强，不重排**。27 个模板里是内联样式，布局与配色已自洽；
        本层不碰布局、不改组件主色，避免大范围视觉回归。
     2. **只在基础层发力**（body / 标题 / 表格 / 表单 / 滚动条 / 焦点态 /
        选区 / 动效）—— 这些位置全站共享，改一处全站受益、风险最低。
     3. **动效克制**：只做 120~220ms 的颜色/阴影/位移过渡，不做位移式入场
        动画（长研报页滚动时容易晕）。
     4. **性能优先**：星尘用内联 SVG data-uri（零请求）；毛玻璃只用在
        少量关键容器并用 @supports 渐进增强；服务器内存仅 1.6G，
        移动端低端机也不能被特效拖垮。
     5. **无障碍不可妥协**：焦点态始终可见，尊重 prefers-reduced-motion，
        触摸目标 ≥44px。
   ========================================================================== */

/* ==========================================================================
   1. 深空背景：极光带 + 星尘 + 底部深空
   ========================================================================== */
body {
    background-color: var(--bg-body);
    /* 三层叠加：顶部品牌极光 / 右侧靛紫极光 / 星尘噪点 */
    background-image:
        radial-gradient(120% 90% at 50% -25%, rgba(56, 189, 248, 0.16), transparent 58%),
        radial-gradient(90% 70% at 100% 12%, rgba(129, 140, 248, 0.10), transparent 52%),
        radial-gradient(80% 60% at 0% 100%, rgba(56, 189, 248, 0.06), transparent 50%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.028'/%3E%3C/svg%3E");
    background-attachment: fixed;
    color: var(--text-body);
    font-family: var(--font-sans);
    /* 中文正文行高比英文需要更松，1.6 在长文里偏挤 */
    line-height: var(--leading-relaxed);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ==========================================================================
   2. 排版层级
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-snug);
    text-wrap: balance;              /* 标题折行更均匀，避免「最后一个字单独一行」*/
}

h1 { font-size: var(--text-3xl); line-height: var(--leading-tight); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5, h6 { font-size: var(--text-md); }

/* 段落：中文长文需要更大的段间距，否则会糊成一片 */
p {
    margin-bottom: var(--space-4);
    text-wrap: pretty;               /* 避免最后一行只剩一个字 */
}

/* ==========================================================================
   3. 数字：金融数据的灵魂
   全局开启等宽数字 —— 表格/列表里数字不对齐，整页的「专业感」就崩了。
   ====================================================================== */
body {
    font-variant-numeric: var(--font-feature-numeric);
    font-feature-settings: var(--font-feature-numeric);
}

/* 明确指定为数值展示的元素（价格、涨跌幅、市值、评分等）用等宽字体 */
.num, .price, .pct, .change, .ratio, .market-cap,
.stat-value, .metric-value, .score, td, th {
    font-variant-numeric: var(--font-feature-numeric);
}
/* 表格数字列右对齐 —— 金融表格的基本礼仪 */
table td:not(:first-child):not(:last-child),
.table td:not(:first-child):not(:last-child) {
    font-variant-numeric: var(--font-feature-numeric);
}

/* ==========================================================================
   4. 玻璃仪表盘质感
   ⚠️ 只对「独立的大容器」加毛玻璃，卡片网格不加（否则整屏都是模糊层，
      在低端机上会明显掉帧）。用 @supports 渐进增强。
   ====================================================================== */
@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
    /* 顶部导航 / 吸顶栏：半透明毛玻璃是现代深色站的基础质感 */
    header.navbar,
    .navbar,
    .top-bar,
    .site-header {
        background: rgba(13, 20, 36, 0.72) !important;
        -webkit-backdrop-filter: blur(14px) saturate(140%);
        backdrop-filter: blur(14px) saturate(140%);
        border-bottom: 1px solid var(--border-subtle);
        box-shadow: var(--shadow-sm);
    }
    .modal-content,
    .dropdown-menu,
    .popover {
        background: rgba(21, 30, 51, 0.94) !important;
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
        border: 1px solid var(--border-default);
    }
}

/* 卡片：顶部内高光 + hover 抬升。这是「有厚度」的关键，比单纯加阴影高级 */
.card,
.report-card,
.panel,
.stat-card,
.box {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-sm), var(--shadow-inset);
    transition: transform var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
}
/* hover 抬升要克制：2px 位移 + 边框变亮，够察觉、不晃眼 */
@media (hover: hover) and (pointer: fine) {
    .card:hover,
    .stat-card:hover,
    .panel:hover {
        transform: translateY(-2px);
        border-color: var(--border-brand);
        box-shadow: var(--shadow-md), var(--shadow-inset), var(--glow-brand);
    }
}

/* ==========================================================================
   5. 交互反馈：所有可点元素 100~200ms 内响应
   ========================================================================== */
a, button, .btn, input, select, textarea, [role="button"] {
    transition: color var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}

/* 焦点态：键盘用户必须始终看得见当前位置 */
:focus-visible {
    outline: 2px solid var(--brand-400);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}
/* 鼠标点击不显示焦点环（:focus-visible 已处理），但表单控件要保留内发光 */
input:focus, select:focus, textarea:focus {
    border-color: var(--border-brand) !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.14);
    outline: none;
}

/* ==========================================================================
   6. 研报正文（长文阅读体验 —— 这是用户停留最久的页面）
   ====================================================================== */
.markdown-body,
.report-content,
#reportContent {
    font-size: var(--text-md);
    line-height: var(--leading-loose);
    color: var(--text-body);
    letter-spacing: var(--tracking-normal);
}
.markdown-body h2,
.markdown-body h3 {
    margin-top: var(--space-8);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-subtle);
}
.markdown-body strong { color: var(--text-primary); font-weight: 600; }
.markdown-body ul, .markdown-body ol { padding-left: var(--space-6); }
.markdown-body li { margin-bottom: var(--space-2); }
.markdown-body blockquote {
    border-left: 3px solid var(--brand-400);
    background: rgba(56, 189, 248, 0.06);
    padding: var(--space-3) var(--space-4);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--text-secondary);
}
.markdown-body code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--bg-inset);
    padding: 2px 6px;
    border-radius: var(--radius-xs);
    border: 1px solid var(--border-subtle);
}
/* 表格：深色下必须给足对比度，否则密集数字会糊成一片 */
.markdown-body table,
.report-content table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border-default);
    font-size: var(--text-sm);
}
.markdown-body thead, .report-content thead { background: var(--bg-surface-2); }
.markdown-body th, .markdown-body td,
.report-content th, .report-content td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
    text-align: left;
}
.markdown-body th, .report-content th {
    color: var(--text-primary);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
}
.markdown-body tbody tr, .report-content tbody tr { transition: background-color var(--dur-fast) var(--ease-out); }
.markdown-body tbody tr:hover, .report-content tbody tr:hover {
    background: rgba(56, 189, 248, 0.05);
}

/* ==========================================================================
   7. 表单控件（统一内腔 + 圆角）
   ========================================================================== */
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="search"], input[type="date"],
select, textarea {
    background: var(--bg-inset) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-sans);
}
input::placeholder, textarea::placeholder { color: var(--text-tertiary); }
label { color: var(--text-secondary); font-size: var(--text-sm); }

/* ==========================================================================
   8. 表格通用（后台表格 / 台账）
   ========================================================================== */
table { border-collapse: separate; border-spacing: 0; }
table thead th {
    background: var(--bg-surface-2);
    color: var(--text-primary);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    font-size: var(--text-xs);
    text-transform: uppercase;
}
table tbody tr { border-bottom: 1px solid var(--border-subtle); }
table tbody tr:hover { background: rgba(56, 189, 248, 0.05); }

/* ==========================================================================
   9. 涨跌语义色（⚠️ 红涨绿跌 —— 中国市场惯例）
   ====================================================================== */
.text-up, .up, .price-up, .change-up, .badge-up    { color: var(--up) !important; }
.text-down, .down, .price-down, .change-down, .badge-down { color: var(--down) !important; }
.text-flat, .flat                                    { color: var(--flat) !important; }
.bg-up    { background: var(--up-a) !important; }
.bg-down  { background: var(--down-a) !important; }

/* ==========================================================================
   10. 滚动条：细、低调、hover 才明显（深色站用系统默认滚动条很突兀）
   ========================================================================== */
* { scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, 0.35) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.28);
    border-radius: var(--radius-full);
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(56, 189, 248, 0.5); background-clip: content-box; }

/* ==========================================================================
   11. 文本选区：默认选区在深色底上很扎眼，换成品牌色淡高亮
   ========================================================================== */
::selection { background: rgba(56, 189, 248, 0.28); color: var(--text-primary); }

/* ==========================================================================
   12. 图片与分隔
   ========================================================================== */
img { max-width: 100%; height: auto; }
hr { border: none; border-top: 1px solid var(--border-subtle); margin: var(--space-6) 0; }

/* ==========================================================================
   13. 无障碍：尊重「减少动效」系统偏好
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   14. 触摸目标：移动端可点区域不小于 44×44
   ========================================================================== */
@media (pointer: coarse) {
    nav a, .nav-link, header a, .btn, button {
        min-height: var(--tap-min);
        display: inline-flex;
        align-items: center;
    }
}

/* ==========================================================================
   15. 打印：研报要能打印出来（用户常直接打印）
   ========================================================================== */
@media print {
    body {
        background: #fff !important;
        background-image: none !important;
        color: #111 !important;
    }
    header, nav, footer, .no-print, .btn, .fab { display: none !important; }
    a { text-decoration: underline; color: #111 !important; }
    .markdown-body, .report-content { color: #111 !important; font-size: 12pt; }
}

/* ==========================================================================
   16. 首页 Hero —— 记忆点：观测台同心环 + 交错入场
   纯 CSS 实现，不改 home.html 的结构（零回归风险）。
   同心环取自雷达/观测台意象，暗示「这里是在观测数据」；
   与极光渐变叠加后，首屏有了品牌专属的视觉签名，而不是通用 SaaS 模板感。
   ====================================================================== */
.hero { position: relative; isolation: isolate; }

/* 同心观测环：径向重复渐变画环，向下淡出避免喧宾夺主 */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        repeating-radial-gradient(
            circle at 50% 0%,
            transparent 0 72px,
            rgba(56, 189, 248, 0.055) 72px 73px
        );
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.35) 55%, transparent 85%);
            mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.35) 55%, transparent 85%);
}

/* 品牌强调元素：亮一档 + 光晕（不用整块渐变文字，避免对比度塌陷） */
.hero .hero-greeting b,
.hero .hero-greeting strong {
    color: var(--brand-300);
    text-shadow: 0 0 24px rgba(56, 189, 248, 0.45);
}

/* 交错入场：一次性轻微上浮；不做滚动视差（长页面会晕） */
@keyframes prismRiseIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}
.hero .hero-greeting { animation: prismRiseIn 620ms var(--ease-out) both; }
.hero .hero-actions    { animation: prismRiseIn 620ms var(--ease-out) 110ms both; }

/* 主行动按钮：hover 点亮，像仪表盘通电 */
.hero-actions .btn-hero:hover,
.btn-hero:hover {
    transform: translateY(-2px);
    box-shadow: var(--glow-brand-lg);
    border-color: var(--border-brand);
}

/* ==========================================================================
   17. 收尾：关键数据元素的辉光基调
   价格 / 涨跌幅 / 评分是金融站最容易出效果的一处，深色底上给一层克制的辉光，
   数字会「亮」起来 —— 但绝不用强模糊，只用 0.18 透明度，避免文字发虚。
   ====================================================================== */
.price, .change, .pct, .score, .stat-value {
    text-shadow: 0 0 18px rgba(56, 189, 248, 0.18);
}