/* =========================================================
   assets/site.css — 全站高级感暖色设计系统（单一配色源）
   ---------------------------------------------------------
   设计原则：
   1. 所有配色只走下方 :root 变量。用户给参考图后，仅改本文件
      :root 即可全站换色（前台 + 后台一起变）。
   2. 用 !important 中和 css/style.css 的旧闷灰规则与各页内联
      的紫/黑/绿/红/灰漏色（内联 <style> 非 !important，会被覆盖）。
   3. 大面用暖灰白/纯白，浓重暖色只做小点缀；按钮用深炭色，
      避免过去那种“大红色块铺满”的刺眼感。
   ========================================================= */

:root {
    /* 品牌主色：低饱和暖色，高级感，不刺眼 */
    --primary:        #8C5A4D;   /* 暖赭石 / 砖红，仅点缀 */
    --primary-dark:   #6B3D36;   /* 深一档 / hover */
    --accent:         #B8956A;   /* 暖沙，极少用 */
    --ink:            #3A3533;   /* 正文深灰黑 */

    /* 按钮主色：深炭暖黑，避免大色块 */
    --btn-bg:         #2C2A28;
    --btn-bg-hover:   #1C1B19;

    /* 背景与表面 */
    --bg-page:        #F2EFE9;   /* 暖灰白底，降明度 */
    --bg-card:        #ffffff;   /* 卡片纯白 */
    --bg-warm:        #F7F5F0;   /* 区块弱暖底 */

    /* 中性文字 */
    --muted:          #7A726C;   /* 次级文字 */
    --muted-light:    #A8A29E;   /* 占位 / 弱提示 */
    --line:           rgba(58, 53, 51, 0.08);   /* 极淡描边 */
    --shadow-soft:    0 8px 24px rgba(58, 53, 51, 0.06);

    /* RGB 分解 */
    --primary-rgb:        140, 90, 77;
    --primary-dark-rgb:   107, 61, 54;
    --accent-rgb:         184, 149, 106;
    --ink-rgb:            58, 53, 51;
    --btn-bg-rgb:         44, 42, 40;

    /* 圆角 / 字体 */
    --radius-sm:  12px;
    --radius:     20px;
    --radius-lg:  28px;
    --radius-pill: 40px;
    --font: 'Microsoft YaHei', 'PingFang SC', Arial, sans-serif;
}

/* ===================== 基础 ===================== */
body {
    background: var(--bg-page) !important;
    color: var(--ink) !important;
    font-family: var(--font);
}
h1, h2, h3, h4, h5, h6 { color: var(--ink) !important; }

/* ===================== 玻璃吸顶导航 =====================
   仅作用于前台「非深色」导航；后台 navbar-dark 保持原深色。 */
.navbar:not(.navbar-dark) {
    background: rgba(242, 239, 233, 0.72) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line) !important;
    transition: background .3s, box-shadow .3s;
}
.navbar:not(.navbar-dark).scrolled {
    background: rgba(242, 239, 233, 0.96) !important;
    box-shadow: 0 4px 20px rgba(var(--ink-rgb),0.06) !important;
}
.navbar:not(.navbar-dark) > .container {
    min-height: 72px; display: flex; align-items: center;
    justify-content: space-between; padding-top: 0; padding-bottom: 0;
}
.navbar:not(.navbar-dark) .navbar-brand { color: var(--ink) !important; font-weight: bold; }
.navbar:not(.navbar-dark) .navbar-brand i { color: var(--primary) !important; }
.navbar:not(.navbar-dark) .nav-link,
.navbar:not(.navbar-dark) .nav-item,
.navbar:not(.navbar-dark) .nav-link-custom {
    color: var(--ink) !important; display: flex; align-items: center;
}
.nav-link-custom {
    font-size: 15px; font-weight: 500; padding: 6px 14px !important;
    border-radius: 20px; transition: all .25s; color: var(--ink) !important;
}
.nav-link-custom:hover {
    background: rgba(var(--primary-rgb),0.08) !important;
    color: var(--primary) !important;
}
.navbar-nav { align-items: center; display: flex; height: 72px; }
.navbar-collapse { align-items: center; }

/* 导航 CTA 按钮 */
.btn-primary-custom {
    background: var(--btn-bg) !important;
    border: none !important;
    border-radius: 12px !important;
    color: #fff !important;
    font-size: 14px;
    transition: all .25s;
}
.btn-primary-custom:hover {
    background: var(--btn-bg-hover) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(var(--btn-bg-rgb),0.2) !important;
}

/* ===================== 容器留白 ===================== */
.container { max-width: 1160px; padding-top: 100px !important; padding-bottom: 50px !important; }

/* ===================== 通用卡片（覆盖旧灰卡） ===================== */
.card-custom,
.feature-item,
.tool-item,
.feature-block,
.privacy-block,
.verify-block,
.member-block,
.video-section,
.sidebar-panel,
.success-panel,
.alert-custom,
.pricing-card,
.plan-card,
.star-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-soft) !important;
    color: var(--ink) !important;
}
.card-custom h3,
.feature-item .feature-name,
.tool-item .tool-name,
.feature-block h4,
.privacy-block h4,
.verify-block h4,
.member-block h4 { color: var(--ink) !important; }

.feature-item .feature-desc,
.tool-item .tool-desc,
.card-custom p,
.feature-block p { color: var(--muted) !important; }

.feature-item .feature-icon,
.tool-item .tool-icon,
.feature-item i,
.privacy-block .feature-icon,
.verify-block .feature-icon,
.member-block .feature-icon,
.card-custom .feature-icon { color: var(--primary) !important; }

.feature-item:hover,
.tool-item:hover,
.card-custom:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 30px rgba(var(--ink-rgb),0.1) !important;
}

/* ===================== Hero / 标题区 ===================== */
.hero-section,
.feature-section { background: transparent !important; }
.hero-title { color: var(--ink) !important; font-weight: 800; letter-spacing: -0.02em; }
.hero-subtitle,
.hero-slogan,
.pipeline-subtitle,
.pricing-subtitle,
.case-info span,
.feature-desc,
.tool-desc { color: var(--muted) !important; }

/* Hero CTA：深色主按钮 + 弱边框次按钮 */
.hero-cta { display: flex; gap: 16px; align-items: center; margin: 28px 0 18px; flex-wrap: wrap; }
.btn-hero-primary {
    background: var(--btn-bg) !important;
    color: #fff !important; border: none;
    border-radius: var(--radius-pill);
    padding: 14px 32px; font-size: 16px; font-weight: 600; text-decoration: none;
    transition: all .3s; box-shadow: 0 8px 22px rgba(var(--btn-bg-rgb),0.18);
}
.btn-hero-primary:hover { transform: translateY(-3px); color: #fff !important; box-shadow: 0 12px 30px rgba(var(--btn-bg-rgb),0.24); }
.btn-hero-ghost {
    background: transparent !important; color: var(--ink) !important;
    border: 1.5px solid var(--line) !important;
    border-radius: var(--radius-pill); padding: 14px 28px; font-size: 16px;
    font-weight: 600; text-decoration: none; transition: all .3s;
}
.btn-hero-ghost:hover { background: rgba(var(--ink-rgb),0.04) !important; transform: translateY(-3px); color: var(--ink) !important; }

/* ===================== 流水线 / 步骤 ===================== */
.pipeline-card,
.step-badge {
    background: var(--bg-card) !important;
    border: 1px solid var(--line) !important;
    box-shadow: var(--shadow-soft) !important;
    color: var(--ink) !important;
}
.pipeline-step,
.pipeline-output,
.pipeline-output strong,
.pipeline-name,
.pipeline-desc { color: var(--primary) !important; }
.step-badge, .step-badge span { color: var(--ink) !important; }
.step-badge.active,
.step-badge.completed {
    background: rgba(var(--primary-rgb),0.08) !important;
    border: 2px solid var(--primary) !important;
}
.step-badge.pending { background: rgba(150,150,150,0.12) !important; border: 2px solid #bbb !important; }
.step-badge.pending span { color: #888 !important; }
.step-arrow { color: var(--muted-light) !important; }
.step-link { color: var(--muted) !important; text-decoration: none; }
.step-link:hover { color: var(--primary) !important; }

/* ===================== 状态栏 ===================== */
.status-bar {
    background: var(--bg-card) !important;
    border: 1px solid var(--line) !important;
    box-shadow: var(--shadow-soft) !important;
    border-radius: var(--radius) !important;
}
.status-item .label { color: var(--muted) !important; }
.status-item .value { color: var(--ink) !important; }

/* ===================== 表格 ===================== */
.table-custom { width: 100%; border-collapse: collapse; margin: 20px 0; }
.table-custom th {
    background: var(--ink) !important; color: #fff !important; font-weight: bold;
    padding: 15px; text-align: center; border: 1px solid var(--line) !important;
}
.table-custom td {
    background: var(--bg-card) !important; color: var(--muted) !important;
    padding: 15px; text-align: center; border: 1px solid var(--line) !important;
}
.table-custom td:first-child { text-align: left; font-weight: 500; color: var(--ink) !important; }

/* ===================== 成功 / 状态 / 警告 ===================== */
.success-panel { background: rgba(var(--primary-rgb),0.06) !important; border: 1px solid rgba(var(--primary-rgb),0.15) !important; }
.success-icon { color: var(--primary) !important; }
.status-badge {
    background: rgba(var(--primary-rgb),0.10) !important;
    color: var(--primary) !important;
}
.alert-custom {
    background: rgba(var(--primary-rgb),0.06) !important;
    border: 1px solid rgba(var(--primary-rgb),0.18) !important;
    color: var(--primary) !important;
}
.alert-success { background: rgba(var(--primary-rgb),0.08) !important; border-color: rgba(var(--primary-rgb),0.2) !important; color: var(--primary) !important; }
.alert-danger, .alert-warning { background: rgba(var(--primary-dark-rgb),0.08) !important; border-color: rgba(var(--primary-dark-rgb),0.2) !important; color: var(--primary-dark) !important; }
.alert-info { background: rgba(var(--primary-rgb),0.06) !important; border-color: rgba(var(--primary-rgb),0.18) !important; color: var(--primary) !important; }

/* 通用 Bootstrap alert 兜底 */
.alert { border-radius: var(--radius-sm) !important; }

/* ===================== 返回 / 链接 ===================== */
.back-btn, .nav-back, .step-link, .nav-link-custom { color: var(--primary) !important; text-decoration: none; }
.back-btn:hover, .step-link:hover { color: var(--primary-dark) !important; }
.back-btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px; margin-bottom: 20px;
}

/* ===================== 表单 ===================== */
.form-control {
    background: #fff !important;
    border: 1px solid var(--line) !important;
    color: var(--ink) !important;
    border-radius: var(--radius-sm) !important;
    padding: 12px 15px;
}
.form-control:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb),0.2) !important;
}
.form-control::placeholder { color: var(--muted-light) !important; }

/* ===================== 按钮统一：深炭主色 ===================== */
.btn-action, .btn-verify, .btn-red {
    background: var(--btn-bg) !important; color: #fff !important;
    border: none !important; border-radius: var(--radius-sm) !important;
    transition: all .3s;
}
.btn-action:hover, .btn-verify:hover, .btn-red:hover {
    background: var(--btn-bg-hover) !important; color: #fff !important;
    transform: translateY(-2px); box-shadow: 0 5px 15px rgba(var(--btn-bg-rgb),0.2) !important;
}
.btn-buy { background: var(--accent) !important; color: #fff !important; border: none !important; }
.btn-buy:hover { background: #9E7D56 !important; color: #fff !important; transform: translateY(-2px); }
.btn-tools {
    background: var(--btn-bg) !important;
    color: #fff !important; border: none !important;
    border-radius: var(--radius-pill) !important;
}
.btn-tools:hover { background: var(--btn-bg-hover) !important; transform: translateY(-3px); box-shadow: 0 8px 25px rgba(var(--btn-bg-rgb),0.25) !important; }

/* ===================== Footer：浅色高级感 ===================== */
footer {
    background: var(--bg-card) !important;
    border-top: 1px solid var(--line) !important;
    color: var(--muted) !important;
    text-align: center; padding: 40px 20px 25px; font-size: 14px;
}
footer a { color: var(--muted) !important; text-decoration: none; margin: 0 10px; }
footer a:hover { color: var(--primary) !important; }

/* ===================== 侧边悬浮 ===================== */
.sidebar-btn { background: var(--btn-bg) !important; color: #fff !important; border: none !important; border-radius: 12px; font-weight: bold; }
.sidebar-btn:hover { background: var(--btn-bg-hover) !important; }
.sidebar-panel {
    background: var(--bg-card) !important; border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important; box-shadow: 0 10px 40px rgba(var(--ink-rgb),0.1) !important;
}
.sidebar-panel h5, .sidebar-panel .price, .sidebar-panel p, .sidebar-panel span { color: var(--ink) !important; }
.sidebar-panel .price, .sidebar-panel .福利 { color: var(--primary) !important; }

/* ===================== 漏色兜底（内联 style 里残留的紫/黑/绿/红） ===================== */
[style*="#667eea"], [style*="#764ba2"], [style*="102, 126, 234"], [style*="102,126,234"] {
    background: var(--primary) !important; border-color: var(--primary) !important;
}
[style*="#801c1c"] { color: var(--primary-dark) !important; }
[style*="#43e97b"] { color: var(--accent) !important; background: transparent !important; }
[style*="#f5576c"] { color: var(--primary) !important; background: rgba(var(--primary-rgb),0.06) !important; }

/* ===================== 动效基类（配合 assets/anim.css） ===================== */
.hover-lift { transition: transform .28s ease, box-shadow .28s ease; }
.hover-lift:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(var(--ink-rgb), .12); }
.btn-press { transition: transform .12s ease, box-shadow .12s ease; }
.btn-press:active { transform: scale(.96); }