/* ============================================================
 * 众泰云 — 权威现代设计层（tiance-modern.css）
 * ------------------------------------------------------------
 * 定位：全站视觉统一升级的「塔尖覆盖层」。必须最后加载，
 *       在 nav-fix.css / market.css 之后，作为最终视觉权威。
 *
 * 原则：
 *  1. 只增强视觉属性（背景/圆角/阴影/颜色/排版/过渡），不触碰结构
 *     （display/position/flex/width/height/margin/padding）——杜绝破链。
 *  2. 复用 tokens.css / variables.css 的 CSS 变量，保持单一设计源。
 *  3. 尊重 prefers-reduced-motion 与 WCAG 对比度。
 *  4. 覆盖不破坏：所有规则均以「同质增强」为基调，不覆盖关键布局。
 * ============================================================ */

/* ----------------------------------------------------------
   1. 设计令牌覆盖层（统一品牌色阶 + 阴影 + 圆角）
   ---------------------------------------------------------- */
:root {
    /* 品牌主色：深海青（teal）——现代、可信、有科技感 */
    --brand-50:  #effaf9;
    --brand-100: #d7f2f0;
    --brand-200: #aee5e1;
    --brand-300: #7fd3cd;
    --brand-400: #38b6b0;
    --brand-500: #0E7C7B;
    --brand-600: #0b6766;
    --brand-700: #095a59;
    --brand-800: #0a4a49;
    --brand-900: #0b3a39;

    /* 辅助强调色：琥珀金（升级/推荐/亮点） */
    --gold-400: #f5b64a;
    --gold-500: #e89b2e;
    --gold-100: #fdf3e3;

    /* 现代阴影体系（柔和、有层次） */
    --shadow-ring:     0 0 0 3px rgba(14, 124, 123, 0.18);
    --shadow-sm-soft:  0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.06);
    --shadow-md-soft:  0 4px 12px rgba(16, 24, 40, 0.07), 0 2px 4px rgba(16, 24, 40, 0.05);
    --shadow-lg-soft:  0 12px 32px rgba(16, 24, 40, 0.10), 0 4px 8px rgba(16, 24, 40, 0.06);
    --shadow-accent:   0 8px 24px rgba(14, 124, 123, 0.28);

    /* 圆角体系（批15 F5 清偿：--radius-xl 收敛至 tokens-authoritative.css
       单一事实源 xl20，本文件不再重复定义；--radius-lg-md 为本文件独有） */
    --radius-lg-md:    14px;

    /* 文本层级 */
    --grad-brand:      linear-gradient(135deg, #0E7C7B 0%, #0a646c 55%, #0b5f74 100%);
    --grad-brand-soft: linear-gradient(135deg, #effaf9 0%, #e6f6f5 100%);
}

/* ----------------------------------------------------------
   2. 全局排版精修
   ---------------------------------------------------------- */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    letter-spacing: 0.011em;
}

::selection {
    background: rgba(14, 124, 123, 0.22);
    color: inherit;
}

/* ----------------------------------------------------------
   3. 按钮 — 现代、精致、有呼吸感
   ---------------------------------------------------------- */
.btn {
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: transform var(--duration-160) var(--ease-out, ease-out),
                box-shadow var(--duration-160) var(--ease-out, ease-out),
                background-color var(--duration-160) ease,
                border-color var(--duration-160) ease,
                color var(--duration-160) ease;
    will-change: transform;
}
.btn:active {
    transform: translateY(0) scale(0.985);
}

/* 主按钮：品牌渐变 + 柔和投影 */
.btn-primary {
    background: var(--grad-brand);
    border: none;
    color: #fff;
    box-shadow: var(--shadow-accent);
}
.btn-primary:hover {
    background: linear-gradient(135deg, #0b6a69 0%, #08555c 55%, #0a5060 100%);
    box-shadow: 0 10px 28px rgba(14, 124, 123, 0.34);
    transform: translateY(-1px);
}
.btn-primary:focus-visible {
    outline: none;
    box-shadow: var(--shadow-ring), var(--shadow-accent);
}

/* 幽灵/次级按钮 */
.btn-ghost,
.btn-outline {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(6px);
}
.btn-ghost:hover,
.btn-outline:hover {
    background: #fff;
    border-color: var(--brand-300);
    box-shadow: var(--shadow-sm-soft);
    transform: translateY(-1px);
}

/* 危险按钮 */
.btn-danger {
    box-shadow: 0 6px 18px rgba(239, 68, 68, 0.22);
}
.btn-danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(239, 68, 68, 0.30);
}

/* ----------------------------------------------------------
   4. 卡片 — 柔和阴影、悬浮抬升、层次分明
   ---------------------------------------------------------- */
.card {
    border-radius: var(--radius-lg-md, 14px);
    border: 1px solid rgba(17, 24, 39, 0.07);
    box-shadow: var(--shadow-sm-soft);
    transition: transform var(--duration-220) var(--ease-out, ease-out),
                box-shadow var(--duration-220) var(--ease-out, ease-out),
                border-color var(--duration-220) ease;
}
.card:hover {
    box-shadow: var(--shadow-md-soft);
    border-color: rgba(14, 124, 123, 0.18);
    transform: translateY(-3px);
}

/* 品牌卡片（tiance-card） */
.tiance-card {
    border-radius: var(--radius-lg-md, 14px);
    border: 1px solid rgba(17, 24, 39, 0.07);
    box-shadow: var(--shadow-sm-soft);
    transition: transform var(--duration-220) var(--ease-out, ease-out),
                box-shadow var(--duration-220) var(--ease-out, ease-out);
}
.tiance-card:hover {
    box-shadow: var(--shadow-md-soft);
    transform: translateY(-3px);
}

.card-title,
.card-header h3 {
    letter-spacing: -0.01em;
}

/* 统计卡 */
.stat-card {
    border-radius: var(--radius-lg-md, 14px);
    border: 1px solid rgba(17, 24, 39, 0.07);
    box-shadow: var(--shadow-sm-soft);
    background: linear-gradient(180deg, #fff 0%, #fbfcfd 100%);
}
.stat-card-value {
    letter-spacing: -0.02em;
    font-weight: 700;
}

/* ----------------------------------------------------------
   5. 徽章 — 胶囊、柔和底色
   ---------------------------------------------------------- */
.badge,
.tiance-badge {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.badge-accent,
.tiance-badge-accent {
    background: var(--brand-50);
    color: var(--brand-600);
    box-shadow: inset 0 0 0 1px rgba(14, 124, 123, 0.14);
}
.badge-success {
    background: var(--color-success-light, #ecfdf5);
    color: var(--color-success, #10b981);
    box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.16);
}
.badge-warning {
    background: var(--gold-100, #fdf3e3);
    color: #b9680d;
    box-shadow: inset 0 0 0 1px rgba(232, 155, 46, 0.20);
}

/* ----------------------------------------------------------
   6. 表单 — 干净、聚焦环清晰
   ---------------------------------------------------------- */
.form-input,
.form-control,
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], input[type="search"],
select, textarea {
    border-radius: 10px;
    border: 1px solid rgba(17, 24, 39, 0.12);
    transition: border-color var(--duration-160) ease, box-shadow var(--duration-160) ease, background-color var(--duration-160) ease;
}
.form-input:focus,
.form-control:focus,
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--brand-400);
    box-shadow: var(--shadow-ring);
}

/* ----------------------------------------------------------
   7. 章节标题 — 强排版层级
   ---------------------------------------------------------- */
.section-title,
.tiance-h2-heading {
    letter-spacing: -0.02em;
    font-weight: 700;
    color: var(--color-text-primary, #1a1a2e);
}
.section-subtitle {
    max-width: 46em;
    color: var(--color-text-secondary, #6b7280);
    line-height: var(--leading-relaxed, 1.7);
}

/* 页头 */
.page-header {
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(17, 24, 39, 0.06);
}

/* ----------------------------------------------------------
   8. 数据表格 — 现代斑马纹 + 悬停
   ---------------------------------------------------------- */
.data-table {
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 12px;
    overflow: hidden;
}
.data-table thead th {
    background: var(--color-bg-tertiary, #f1f3f5);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 0.75rem;
    color: var(--color-text-secondary, #6b7280);
}
.data-table tbody tr:hover {
    background: var(--brand-50, #effaf9);
}

/* ----------------------------------------------------------
   9. 导航栏精修 — 玻璃拟态 + 柔和阴影
   ---------------------------------------------------------- */
.topnav {
    background: rgba(255, 255, 255, 0.82) !important;
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    backdrop-filter: blur(14px) saturate(180%);
    border-bottom: 1px solid rgba(17, 24, 39, 0.06);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}
.topnav__link {
    border-radius: 8px;
    padding: 6px 12px;
    transition: color var(--duration-150) ease, background-color var(--duration-150) ease;
}
.topnav__link:hover {
    background: var(--brand-50);
    color: var(--brand-600);
}
.topnav__link.active {
    color: var(--brand-600);
    background: var(--brand-50);
    font-weight: 600;
}

/* ----------------------------------------------------------
   10. 链接 — 品牌色 + 平滑过渡
   ---------------------------------------------------------- */
a {
    transition: color var(--duration-150) ease;
}
a:hover {
    color: var(--brand-600);
}

/* ----------------------------------------------------------
   11. 动效 — 克制、优雅、尊重减少动效
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .btn, .card, .tiance-card, .stat-card {
        transition: none !important;
        transform: none !important;
    }
}

/* ----------------------------------------------------------
   12. 深色模式适配
   ---------------------------------------------------------- */
[data-theme="dark"] body,
[data-theme="dark"] {
    --color-border: rgba(255, 255, 255, 0.10);
}
[data-theme="dark"] .card,
[data-theme="dark"] .tiance-card,
[data-theme="dark"] .stat-card {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}
[data-theme="dark"] .btn-ghost,
[data-theme="dark"] .btn-outline {
    background: rgba(255, 255, 255, 0.06);
    color: #e2e8f0;
}
[data-theme="dark"] .topnav {
    background: rgba(15, 23, 42, 0.82) !important;
}
[data-theme="dark"] .topnav__link:hover,
[data-theme="dark"] .topnav__link.active {
    background: rgba(14, 124, 123, 0.18);
    color: #7fd3cd;
}