/* ============================================================
   数字资产身后处置系统 · 全局样式（多主题）
   设计基调：明亮 · 温暖 · 治愈 · 安心
   主题通过 <html data-theme="..."> 切换，变量级联生效
   适用：用户前台 / 审核后台 / 客服后台 / 线下后台 / 总后台
   ============================================================ */

/* ---------- 默认主题：晴日（sunset） ----------
   设计意图：阳光不是"黄"，而是"光"。
   底色走清爽的灰蓝天光（去黄去浊），主色用明朗的太阳金，
   再用天空蓝 / 薄荷绿 / 珊瑚橙做点缀 —— 晴朗、有希望、不沉重。
   ------------------------------------------------------------ */
:root {
    /* 主色系 —— 太阳金 */
    --brand: #F2A33C;
    --brand-deep: #B96B0A;
    --brand-light: #FFC978;
    --brand-soft: #FFF4E2;

    /* 光感装饰（阳光 / 蓝天 / 薄荷 / 珊瑚，供首页与卡片使用） */
    --sun: #FFD166;
    --sun-soft: #FFF8E7;
    --sky: #7FC4F5;
    --sky-soft: #EAF5FE;
    --mint: #6FD3AE;
    --mint-soft: #E8F9F2;
    --coral: #FF9B7A;
    --coral-soft: #FFEFE9;

    --glow-1: rgba(255, 205, 110, .58);
    --glow-2: rgba(140, 200, 255, .42);
    --glow-3: rgba(120, 225, 190, .30);
    --hero-tint: #FFFDF8;
    --card-tint: #FFFFFF;

    /* 中性色系（清爽灰蓝，替代原来的暖米黄） */
    --ink: #1F2A37;
    --ink-soft: #475467;
    --canvas: #F6F9FC;
    --canvas-2: #FFFFFF;
    --canvas-3: #EFF5FA;
    --line: #E3EAF2;
    --line-soft: #EFF4F9;
    --text: #1F2A37;
    --muted: #667085;
    --faint: #98A2B3;

    /* 按钮主色（保证白字对比度） */
    --btn-primary: #E08A0B;
    --btn-primary-hover: #C4740A;
    --btn-focus-rgb: 242, 163, 60;

    --paper: #FFFFFF;
    --elev-sm: 0 1px 2px rgba(31, 42, 55, .04), 0 1px 3px rgba(31, 42, 55, .05);
    --elev-md: 0 6px 18px rgba(31, 42, 55, .07);
    --elev-lg: 0 18px 44px rgba(31, 42, 55, .10);
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 18px;
    --ease: cubic-bezier(.16, 1, .3, 1);

    /* Bootstrap 主题色（主色 + 中性随主题，辅助色全局一致） */
    --bs-body-bg: #F6F9FC;
    --bs-body-color: #1F2A37;
    --bs-border-color: #E3EAF2;
    --bs-light: #F2F6FA;
    --bs-light-rgb: 242, 246, 250;
    --bs-dark: #1F2A37;
    --bs-dark-rgb: 31, 42, 55;

    --bs-primary: #F2A33C;
    --bs-primary-rgb: 242, 163, 60;
    --bs-primary-text-emphasis: #B96B0A;
    --bs-primary-bg-subtle: #FFF4E2;
    --bs-primary-border-subtle: #FFDFB0;

    --bs-link-color: #B96B0A;
    --bs-link-color-rgb: 185, 107, 10;
    --bs-link-hover-color: #96560A;

    /* 辅助色（语义状态色，跨主题一致；整体提亮） */
    --bs-secondary: #7A8699;
    --bs-secondary-rgb: 122, 134, 153;
    --bs-secondary-text-emphasis: #4A5566;
    --bs-secondary-bg-subtle: #F0F3F7;
    --bs-secondary-border-subtle: #DDE4EC;
    --bs-success: #3FA46A;
    --bs-success-rgb: 63, 164, 106;
    --bs-success-text-emphasis: #1F7A45;
    --bs-success-bg-subtle: #E6F7EE;
    --bs-success-border-subtle: #BFE9D2;
    --bs-info: #3E8FD0;
    --bs-info-rgb: 62, 143, 208;
    --bs-info-text-emphasis: #1F6FB2;
    --bs-info-bg-subtle: #E8F3FD;
    --bs-info-border-subtle: #C6E0F7;
    --bs-warning: #E9A23B;
    --bs-warning-rgb: 233, 162, 59;
    --bs-warning-text-emphasis: #A9660C;
    --bs-warning-bg-subtle: #FFF3DE;
    --bs-warning-border-subtle: #FFDCA8;
    --bs-danger: #E0644C;
    --bs-danger-rgb: 224, 100, 76;
    --bs-danger-text-emphasis: #B5452F;
    --bs-danger-bg-subtle: #FDECE9;
    --bs-danger-border-subtle: #F8CFC7;
}

/* ---------- 主题：新绿（green） ---------- */
html[data-theme="green"] {
    --brand: #45A96F; --brand-deep: #2C7A4C; --brand-light: #86D8A6; --brand-soft: #E8F8EF;
    --ink: #1E2E26; --ink-soft: #43544B;
    --canvas: #F5FAF7; --canvas-2: #FFFFFF; --canvas-3: #EBF5EF; --line: #DEEBE3; --line-soft: #EDF5F0;
    --text: #1E2E26; --muted: #5F7268; --faint: #9BAEA4;
    --btn-primary: #3D9563; --btn-primary-hover: #2F7C50; --btn-focus-rgb: 69, 169, 111;
    --elev-sm: 0 1px 2px rgba(31, 42, 55, .04), 0 1px 3px rgba(31, 42, 55, .05);
    --elev-md: 0 6px 18px rgba(31, 42, 55, .07);
    --elev-lg: 0 18px 44px rgba(31, 42, 55, .10);
    --bs-body-bg: #F5FAF7; --bs-body-color: #1E2E26; --bs-border-color: #DEEBE3;
    --bs-light: #EBF5EF; --bs-light-rgb: 235, 245, 239; --bs-dark: #1E2E26; --bs-dark-rgb: 30, 46, 38;
    --bs-primary: #45A96F; --bs-primary-rgb: 69, 169, 111;
    --bs-primary-text-emphasis: #2C7A4C; --bs-primary-bg-subtle: #E8F8EF; --bs-primary-border-subtle: #C2E9D3;
    --bs-link-color: #2C7A4C; --bs-link-color-rgb: 44, 122, 76; --bs-link-hover-color: #1F5C38;
    --sun: #A8E6C4; --sun-soft: #EFFAF4;
    --glow-1: rgba(150, 225, 180, .48); --glow-2: rgba(170, 215, 245, .38);
    --hero-tint: #F7FCF9; --card-tint: #FFFFFF;
}

/* ---------- 主题：晴空（sky） ---------- */
html[data-theme="sky"] {
    --brand: #3E96DC; --brand-deep: #1F6FB2; --brand-light: #84C2EE; --brand-soft: #E8F4FD;
    --ink: #1B2A38; --ink-soft: #40566B;
    --canvas: #F5F9FD; --canvas-2: #FFFFFF; --canvas-3: #EBF3FB; --line: #DDE9F4; --line-soft: #EDF4FB;
    --text: #1B2A38; --muted: #5C7185; --faint: #9BADBE;
    --btn-primary: #2E86CC; --btn-primary-hover: #2370AC; --btn-focus-rgb: 62, 150, 220;
    --elev-sm: 0 1px 2px rgba(31, 42, 55, .04), 0 1px 3px rgba(31, 42, 55, .05);
    --elev-md: 0 6px 18px rgba(31, 42, 55, .07);
    --elev-lg: 0 18px 44px rgba(31, 42, 55, .10);
    --bs-body-bg: #F5F9FD; --bs-body-color: #1B2A38; --bs-border-color: #DDE9F4;
    --bs-light: #EBF3FB; --bs-light-rgb: 235, 243, 251; --bs-dark: #1B2A38; --bs-dark-rgb: 27, 42, 56;
    --bs-primary: #3E96DC; --bs-primary-rgb: 62, 150, 220;
    --bs-primary-text-emphasis: #1F6FB2; --bs-primary-bg-subtle: #E8F4FD; --bs-primary-border-subtle: #C2DFF6;
    --bs-link-color: #1F6FB2; --bs-link-color-rgb: 31, 111, 178; --bs-link-hover-color: #17548A;
    --sun: #A9D9F7; --sun-soft: #EFF7FE;
    --glow-1: rgba(160, 210, 250, .45); --glow-2: rgba(255, 220, 150, .30);
    --hero-tint: #F7FBFF; --card-tint: #FFFFFF;
}

/* ---------- 主题：薰衣草（lavender） ---------- */
html[data-theme="lavender"] {
    --brand: #8B6FD6; --brand-deep: #6A4FB5; --brand-light: #B9A3ED; --brand-soft: #F1ECFC;
    --ink: #241F33; --ink-soft: #4B4460;
    --canvas: #F8F7FC; --canvas-2: #FFFFFF; --canvas-3: #F1EEFA; --line: #E5DFF2; --line-soft: #F1EDFA;
    --text: #241F33; --muted: #6B6483; --faint: #A9A2BE;
    --btn-primary: #7A5ACB; --btn-primary-hover: #6547AE; --btn-focus-rgb: 139, 111, 214;
    --elev-sm: 0 1px 2px rgba(31, 42, 55, .04), 0 1px 3px rgba(31, 42, 55, .05);
    --elev-md: 0 6px 18px rgba(31, 42, 55, .07);
    --elev-lg: 0 18px 44px rgba(31, 42, 55, .10);
    --bs-body-bg: #F8F7FC; --bs-body-color: #241F33; --bs-border-color: #E5DFF2;
    --bs-light: #F1EEFA; --bs-light-rgb: 241, 238, 250; --bs-dark: #241F33; --bs-dark-rgb: 36, 31, 51;
    --bs-primary: #8B6FD6; --bs-primary-rgb: 139, 111, 214;
    --bs-primary-text-emphasis: #6A4FB5; --bs-primary-bg-subtle: #F1ECFC; --bs-primary-border-subtle: #DCCFF7;
    --bs-link-color: #6A4FB5; --bs-link-color-rgb: 106, 79, 181; --bs-link-hover-color: #543D92;
    --sun: #D3C4F5; --sun-soft: #F7F3FE;
    --glow-1: rgba(200, 180, 245, .42); --glow-2: rgba(255, 215, 165, .28);
    --hero-tint: #FBF9FE; --card-tint: #FFFFFF;
}

/* ---------- 主题：云灰（slate） ---------- */
html[data-theme="slate"] {
    --brand: #64748B; --brand-deep: #475569; --brand-light: #9AA8BA; --brand-soft: #EEF2F6;
    --ink: #1B2530; --ink-soft: #46525F;
    --canvas: #F7F9FB; --canvas-2: #FFFFFF; --canvas-3: #EEF2F6; --line: #E1E7EE; --line-soft: #EFF3F7;
    --text: #1B2530; --muted: #64717F; --faint: #9FABB8;
    --btn-primary: #55647A; --btn-primary-hover: #435061; --btn-focus-rgb: 100, 116, 139;
    --elev-sm: 0 1px 2px rgba(31, 42, 55, .04), 0 1px 3px rgba(31, 42, 55, .05);
    --elev-md: 0 6px 18px rgba(31, 42, 55, .07);
    --elev-lg: 0 18px 44px rgba(31, 42, 55, .10);
    --bs-body-bg: #F7F9FB; --bs-body-color: #1B2530; --bs-border-color: #E1E7EE;
    --bs-light: #EEF2F6; --bs-light-rgb: 238, 242, 246; --bs-dark: #1B2530; --bs-dark-rgb: 27, 37, 48;
    --bs-primary: #64748B; --bs-primary-rgb: 100, 116, 139;
    --bs-primary-text-emphasis: #475569; --bs-primary-bg-subtle: #EEF2F6; --bs-primary-border-subtle: #D7DFE7;
    --bs-link-color: #475569; --bs-link-color-rgb: 71, 85, 105; --bs-link-hover-color: #33415A;
    --sun: #CBD8E4; --sun-soft: #F2F6FA;
    --glow-1: rgba(180, 200, 220, .40); --glow-2: rgba(255, 220, 170, .24);
    --hero-tint: #FAFCFE; --card-tint: #FFFFFF;
}

/* ---------- 基础 ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif;
    background: var(--canvas);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    letter-spacing: .01em;
}
::selection { background: var(--brand-soft); color: var(--brand-deep); }

a { color: var(--bs-link-color); text-decoration: none; }
a:hover { color: var(--bs-link-hover-color); }

h1, h2, h3, h4, h5, h6 { color: var(--text); font-weight: 600; letter-spacing: -.01em; }

/* 表单 / 按钮：统一圆角与聚焦态 */
.form-control, .form-select, .input-group-text {
    border-radius: var(--r-sm);
    border-color: var(--line);
}
.form-control:focus, .form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(var(--btn-focus-rgb), .14);
}
.form-label { color: var(--text); font-weight: 500; }
.btn { border-radius: var(--r-sm); transition: transform .16s var(--ease), box-shadow .16s var(--ease), background-color .16s var(--ease), border-color .16s var(--ease); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible, a:focus-visible, .nav-link:focus-visible, .form-control:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    box-shadow: none;
}

/* 主色按钮用变量（随主题），辅助色按钮硬编码（语义一致） */
.btn-primary {
    --bs-btn-bg: var(--btn-primary); --bs-btn-border-color: var(--btn-primary);
    --bs-btn-hover-bg: var(--btn-primary-hover); --bs-btn-hover-border-color: var(--btn-primary-hover);
    --bs-btn-active-bg: var(--btn-primary-hover); --bs-btn-active-border-color: var(--btn-primary-hover);
    --bs-btn-disabled-bg: var(--btn-primary); --bs-btn-disabled-border-color: var(--btn-primary);
    --bs-btn-focus-shadow-rgb: var(--btn-focus-rgb);
}
.btn-outline-primary {
    --bs-btn-color: var(--btn-primary); --bs-btn-border-color: var(--btn-primary);
    --bs-btn-hover-bg: var(--btn-primary); --bs-btn-hover-border-color: var(--btn-primary);
    --bs-btn-active-bg: var(--btn-primary); --bs-btn-active-border-color: var(--btn-primary);
    --bs-btn-disabled-color: var(--btn-primary); --bs-btn-disabled-border-color: var(--btn-primary);
    --bs-btn-focus-shadow-rgb: var(--btn-focus-rgb);
}
/* 主按钮：阳光渐变（金 → 橙），让"行动号召"真正有光 */
.btn-primary {
    background-image: linear-gradient(135deg, #F8B44E 0%, #E58E0C 100%);
    border-color: transparent;
    box-shadow: 0 2px 10px rgba(var(--btn-focus-rgb), .28);
}
.btn-primary:hover,
.btn-primary:focus {
    background-image: linear-gradient(135deg, #F0A63C 0%, #CE7B08 100%);
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(var(--btn-focus-rgb), .34);
}
.btn-primary:active,
.btn-primary.active {
    background-image: linear-gradient(135deg, #E59A2E 0%, #BC6E06 100%) !important;
    border-color: transparent !important;
}
.btn-primary:disabled, .btn-primary.disabled {
    background-image: linear-gradient(135deg, #F3C88A 0%, #E0AE6A 100%);
}
.btn-secondary {
    --bs-btn-bg: #8A8077; --bs-btn-border-color: #8A8077; --bs-btn-hover-bg: #6B5F52;
    --bs-btn-hover-border-color: #6B5F52; --bs-btn-active-bg: #6B5F52; --bs-btn-active-border-color: #6B5F52;
    --bs-btn-disabled-bg: #8A8077; --bs-btn-disabled-border-color: #8A8077; --bs-btn-focus-shadow-rgb: 138, 128, 119;
}
.btn-outline-secondary {
    --bs-btn-color: #5C554E; --bs-btn-border-color: #C9BFB3; --bs-btn-hover-bg: #8A8077;
    --bs-btn-hover-border-color: #8A8077; --bs-btn-active-bg: #8A8077; --bs-btn-active-border-color: #8A8077;
    --bs-btn-focus-shadow-rgb: 138, 128, 119;
}
.btn-success {
    --bs-btn-bg: #6E9E7E; --bs-btn-border-color: #6E9E7E; --bs-btn-hover-bg: #5A8668;
    --bs-btn-hover-border-color: #5A8668; --bs-btn-active-bg: #5A8668; --bs-btn-active-border-color: #5A8668;
    --bs-btn-disabled-bg: #6E9E7E; --bs-btn-disabled-border-color: #6E9E7E; --bs-btn-focus-shadow-rgb: 110, 158, 126;
}
.btn-outline-success {
    --bs-btn-color: #4E7A5E; --bs-btn-border-color: #6E9E7E; --bs-btn-hover-bg: #6E9E7E;
    --bs-btn-hover-border-color: #6E9E7E; --bs-btn-active-bg: #6E9E7E; --bs-btn-active-border-color: #6E9E7E;
    --bs-btn-focus-shadow-rgb: 110, 158, 126;
}
.btn-info {
    --bs-btn-color: #fff; --bs-btn-bg: #7A93A8; --bs-btn-border-color: #7A93A8; --bs-btn-hover-bg: #627A8E;
    --bs-btn-hover-border-color: #627A8E; --bs-btn-active-bg: #627A8E; --bs-btn-active-border-color: #627A8E;
    --bs-btn-disabled-bg: #7A93A8; --bs-btn-disabled-border-color: #7A93A8; --bs-btn-focus-shadow-rgb: 122, 147, 168;
}
.btn-outline-info {
    --bs-btn-color: #56708A; --bs-btn-border-color: #7A93A8; --bs-btn-hover-bg: #7A93A8;
    --bs-btn-hover-border-color: #7A93A8; --bs-btn-active-bg: #7A93A8; --bs-btn-active-border-color: #7A93A8;
    --bs-btn-focus-shadow-rgb: 122, 147, 168;
}
.btn-warning {
    --bs-btn-color: #fff; --bs-btn-bg: #D9A05B; --bs-btn-border-color: #D9A05B; --bs-btn-hover-bg: #C0873F;
    --bs-btn-hover-border-color: #C0873F; --bs-btn-active-bg: #C0873F; --bs-btn-active-border-color: #C0873F;
    --bs-btn-disabled-bg: #D9A05B; --bs-btn-disabled-border-color: #D9A05B; --bs-btn-focus-shadow-rgb: 217, 160, 91;
}
.btn-outline-warning {
    --bs-btn-color: #A9743A; --bs-btn-border-color: #D9A05B; --bs-btn-hover-bg: #D9A05B;
    --bs-btn-hover-border-color: #D9A05B; --bs-btn-active-bg: #D9A05B; --bs-btn-active-border-color: #D9A05B;
    --bs-btn-focus-shadow-rgb: 217, 160, 91;
}
.btn-danger {
    --bs-btn-bg: #C97B6A; --bs-btn-border-color: #C97B6A; --bs-btn-hover-bg: #AF6251;
    --bs-btn-hover-border-color: #AF6251; --bs-btn-active-bg: #AF6251; --bs-btn-active-border-color: #AF6251;
    --bs-btn-disabled-bg: #C97B6A; --bs-btn-disabled-border-color: #C97B6A; --bs-btn-focus-shadow-rgb: 201, 123, 106;
}
.btn-outline-danger {
    --bs-btn-color: #9E5A4A; --bs-btn-border-color: #C97B6A; --bs-btn-hover-bg: #C97B6A;
    --bs-btn-hover-border-color: #C97B6A; --bs-btn-active-bg: #C97B6A; --bs-btn-active-border-color: #C97B6A;
    --bs-btn-focus-shadow-rgb: 201, 123, 106;
}
.btn-dark {
    --bs-btn-bg: #3A3532; --bs-btn-border-color: #3A3532; --bs-btn-hover-bg: #2A2623;
    --bs-btn-hover-border-color: #2A2623; --bs-btn-active-bg: #2A2623; --bs-btn-active-border-color: #2A2623;
    --bs-btn-focus-shadow-rgb: 58, 53, 50;
}

/* ---------- 后台整体布局（清爽版：白侧栏 + 天光内容区） ---------- */
.app-wrap { display: flex; min-height: 100vh; }
.app-side {
    width: 224px;
    background: var(--paper);
    color: var(--ink-soft);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    border-right: 1px solid var(--line);
}
.app-side .brand {
    padding: 20px 20px;
    color: var(--ink);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .02em;
    border-bottom: 1px solid var(--line-soft);
    display: flex;
    align-items: center;
    gap: 8px;
    /* 顶部一缕阳光，让后台也有温度 */
    background: linear-gradient(135deg, #FFF6E4 0%, #FFFDF8 55%, #F3F9FF 100%);
}
.app-side .brand i { color: var(--brand); }
.app-side .nav-title {
    padding: 18px 20px 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--faint);
}
.app-side .nav-link {
    color: var(--ink-soft);
    padding: 10px 18px;
    font-size: 14px;
    border-radius: 10px;
    margin: 2px 10px;
    display: flex;
    align-items: center;
    position: relative;
    transition: background-color .16s var(--ease), color .16s var(--ease);
}
.app-side .nav-link i { width: 20px; margin-right: 10px; font-size: 14px; text-align: center; }
.app-side .nav-link:hover { color: var(--brand-deep); background: var(--brand-soft); }
.app-side .nav-link.active {
    color: var(--brand-deep);
    background: linear-gradient(90deg, var(--brand-soft) 0%, #FFFAF1 100%);
    font-weight: 600;
}
.app-side .nav-link.active::before {
    content: "";
    position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
    width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--brand);
}

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-topbar {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(1.6) blur(8px);
    padding: 14px 28px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 10;
}
.app-content { padding: 24px 28px; flex: 1; background: var(--canvas); }
.app-footer { padding: 14px 28px; font-size: 12px; color: var(--faint); border-top: 1px solid var(--line); background: var(--paper); }

/* ---------- 卡片 ---------- */
.card {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--elev-sm);
    background: var(--paper);
}
.card .card-header {
    background: transparent;
    border-bottom: 1px solid var(--line-soft);
    font-weight: 600;
    font-size: 15px;
    padding: 16px 20px;
}
.card .card-body { padding: 20px; }

/* ---------- 统计卡片（白底 + 色条 + 柔和色晕） ---------- */
.stat-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 20px 22px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--elev-sm);
    transition: box-shadow .18s var(--ease), transform .18s var(--ease);
}
.stat-card:hover { box-shadow: var(--elev-md); transform: translateY(-2px); }
.stat-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--sc, var(--brand)); }
.stat-card::after {
    content: ""; position: absolute; right: -42px; top: -42px;
    width: 118px; height: 118px; border-radius: 50%;
    background: var(--sc, var(--brand)); opacity: .055; pointer-events: none;
}
.stat-card .num { font-size: 28px; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; position: relative; }
.stat-card .label { font-size: 13px; color: var(--muted); margin-top: 4px; position: relative; }
.stat-blue   { --sc: #3E8FD0; }
.stat-green  { --sc: #3FA46A; }
.stat-orange { --sc: #E9A23B; }
.stat-red    { --sc: #E0644C; }
.stat-purple { --sc: #8B6FD6; }
.stat-cyan   { --sc: #2FA3A3; }
.stat-card.stat-blue::before, .stat-card.stat-green::before, .stat-card.stat-orange::before,
.stat-card.stat-red::before, .stat-card.stat-purple::before, .stat-card.stat-cyan::before { background: var(--sc); }
.stat-card.stat-blue .num, .stat-card.stat-green .num, .stat-card.stat-orange .num,
.stat-card.stat-red .num, .stat-card.stat-purple .num, .stat-card.stat-cyan .num { color: var(--sc); }

/* ---------- 徽章（方角、柔和、语义化） ---------- */
.badge-soft {
    padding: 4px 9px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
}
.badge-green  { background: #E6F7EE; color: #1F7A45; }
.badge-red    { background: #FDECE9; color: #B5452F; }
.badge-orange { background: #FFF3DE; color: #A9660C; }
.badge-blue   { background: #E8F3FD; color: #1F6FB2; }
.badge-gray   { background: #F0F3F7; color: #4A5566; }
.badge-purple { background: #F1ECFC; color: #6A4FB5; }
.badge-cyan   { background: #E4F6F5; color: #1E7F7A; }

/* ---------- 表格 ---------- */
.table { --bs-table-bg: transparent; }
.table th {
    background: var(--canvas-3);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-soft);
    white-space: nowrap;
    letter-spacing: .02em;
    border-bottom: 1px solid var(--line);
    padding: 12px 16px;
}
.table td { font-size: 13.5px; vertical-align: middle; padding: 12px 16px; border-color: var(--line-soft); }
.table-hover tbody tr:hover { background: var(--canvas-3); }

/* ---------- 登录页（天光 + 阳光） ---------- */
.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(760px 380px at 82% -6%, var(--glow-1), rgba(255, 255, 255, 0) 62%),
        radial-gradient(620px 340px at 8% 88%, var(--glow-2), rgba(255, 255, 255, 0) 62%),
        linear-gradient(165deg, var(--sky-soft) 0%, var(--hero-tint) 48%, var(--canvas) 100%);
    padding: 24px;
}
.login-box {
    width: 100%;
    max-width: 410px;
    background: var(--paper);
    border-radius: var(--r-lg);
    padding: 38px 34px;
    border: 1px solid var(--line);
    box-shadow: var(--elev-lg);
}
.login-box h4 { font-weight: 700; margin-bottom: 6px; }
.login-box .sub { color: var(--faint); font-size: 13px; margin-bottom: 26px; }
.captcha-img { height: 40px; cursor: pointer; border: 1px solid var(--line); border-radius: 10px; }

/* ---------- 前台 ---------- */
.site-nav {
    background: rgba(255, 255, 255, .9);
    backdrop-filter: saturate(1.6) blur(10px);
    border-bottom: 1px solid var(--line);
}
.site-nav .navbar-brand { color: var(--ink); font-weight: 700; letter-spacing: .01em; }
.site-nav .navbar-brand i { color: var(--brand); }
.site-nav .nav-link { color: var(--ink-soft); border-radius: 10px; padding: 8px 14px; }
.site-nav .nav-link:hover { color: var(--brand-deep); background: var(--brand-soft); }
.site-nav .nav-link.active { color: var(--brand-deep); background: var(--brand-soft); }
.site-nav .navbar-toggler { border-color: var(--line); }
.site-nav .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(31,42,55,.7)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }

.hero {
    background: linear-gradient(180deg, var(--brand-soft) 0%, var(--canvas) 100%);
    color: var(--text);
    padding: 80px 0;
}
.hero h1 { font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.hero .lead { color: var(--muted); }

.feature-card {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--elev-sm);
    height: 100%;
    background: var(--paper);
    transition: box-shadow .18s var(--ease), transform .18s var(--ease);
}
.feature-card:hover { box-shadow: var(--elev-md); transform: translateY(-3px); }

.legal-bar {
    background: var(--sky-soft);
    color: var(--bs-info-text-emphasis);
    font-size: 12px;
    padding: 9px 16px;
    text-align: center;
    border-bottom: 1px solid var(--line);
}
.user-panel { max-width: 960px; margin: 30px auto; }
.check-box {
    border: 2px dashed var(--line);
    border-radius: var(--r-md);
    padding: 28px;
    text-align: center;
    background: var(--paper);
}
.countdown-num { font-size: 44px; font-weight: 700; color: var(--brand); letter-spacing: -.01em; }

/* ---------- 主题切换器 ---------- */
.theme-dot {
    width: 15px; height: 15px; border-radius: 50%; display: inline-block; flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}
.theme-menu { min-width: 220px; }
.theme-menu .dropdown-item {
    display: flex; align-items: center; gap: 10px; padding: 9px 14px; font-size: 13px; border-radius: 8px;
}
.theme-menu .dropdown-item:hover { background: var(--line-soft); }
.theme-menu .dropdown-item.active { background: var(--brand-soft); }
.theme-menu .t-name { font-weight: 500; color: var(--text); }
.theme-menu .t-desc { font-size: 11px; color: var(--muted); }

/* ---------- 响应式 ---------- */
@media (max-width: 768px) {
    .app-side { width: 62px; }
    .app-side .brand, .app-side .nav-title { display: none; }
    .app-side .nav-link span { display: none; }
    .app-side .nav-link { justify-content: center; padding: 12px 0; margin: 2px 8px; }
    .app-side .nav-link i { margin-right: 0; }
    .app-topbar { padding: 12px 16px; }
    .app-content { padding: 18px 16px; }
    .hero { padding: 56px 0; }
}

/* ---------- 推荐勋章 ---------- */
.badge-icon {
    width: 52px; height: 52px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 22px; flex-shrink: 0;
    box-shadow: var(--elev-sm);
}
.badge-cell {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 18px 8px;
    height: 100%;
    transition: box-shadow .18s var(--ease), transform .18s var(--ease);
}
.badge-cell:hover { box-shadow: var(--elev-sm); transform: translateY(-2px); }
.badge-owned { background: var(--brand-soft); }
.badge-locked { opacity: .65; }
.badge-locked .badge-icon { filter: grayscale(1); }

/* ---------- 思维导图 ---------- */
.mindmap { padding: 8px 0 4px; }
.mm-root {
    display: inline-block; padding: 10px 22px; border-radius: 22px;
    background: var(--brand); color: #fff; font-weight: 700; font-size: 15px;
    box-shadow: var(--elev-sm);
}
.mm-root i { margin-right: 6px; }
.mm-tree {
    display: flex; justify-content: center; gap: 14px; flex-wrap: wrap;
    margin-top: 22px; position: relative;
}
.mm-tree::before { /* 根到分支的横线 */
    content: ''; position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
    width: 2px; height: 11px; background: var(--line);
}
.mm-branch {
    flex: 1 1 180px; max-width: 250px; min-width: 160px;
    border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px;
    background: var(--paper); position: relative;
}
.mm-branch::before { /* 分支上的连接点 */
    content: ''; position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
    width: 8px; height: 8px; border-radius: 50%; background: var(--brand);
}
.mm-node {
    font-weight: 600; font-size: 13.5px; color: var(--brand);
    margin-bottom: 8px; text-align: center; padding-bottom: 6px;
    border-bottom: 1px dashed var(--line);
}
.mm-leaf {
    font-size: 12.5px; color: var(--text); padding: 3px 0;
    display: flex; align-items: flex-start; gap: 6px;
}
.mm-leaf i { color: var(--muted); font-size: 11px; margin-top: 3px; flex-shrink: 0; }

/* ============================================================
   首页 · 晴日版（Sunny）
   设计思路：阳光不是"黄"，而是"光"。
   Hero 铺一片天空蓝 → 阳光金 → 暖白的天光；卡片用四色点缀
   （太阳金 / 晴空蓝 / 薄荷绿 / 珊瑚橙），让整页明亮、有呼吸感。
   所有颜色走主题变量，切换主题时自动跟随。
   ============================================================ */

/* ---------- Hero：一片晴朗的天空 ---------- */
.hp-hero {
    position: relative;
    overflow: hidden;
    padding: 92px 0 104px;
    text-align: center;
    background:
        radial-gradient(900px 420px at 88% -14%, rgba(255, 214, 130, .78), rgba(255, 255, 255, 0) 62%),
        radial-gradient(680px 380px at 6% -4%, rgba(150, 205, 250, .58), rgba(255, 255, 255, 0) 64%),
        radial-gradient(720px 420px at 50% 120%, rgba(150, 232, 200, .40), rgba(255, 255, 255, 0) 66%),
        linear-gradient(180deg, #F1F9FF 0%, #FFFCF3 48%, var(--canvas) 100%);
}
.hp-hero > .container { position: relative; z-index: 2; }
/* 太阳 */
.hp-hero::before {
    content: "";
    position: absolute; z-index: 0;
    top: -130px; right: 5%;
    width: 340px; height: 340px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 213, 98, .95) 0%, rgba(255, 226, 145, .50) 44%, rgba(255, 238, 185, 0) 72%);
    pointer-events: none;
}
/* 斜射的光带 */
.hp-hero::after {
    content: "";
    position: absolute; z-index: 1;
    left: -20%; right: -20%; top: -80%; height: 150%;
    transform: rotate(-14deg);
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 252, 228, .58) 38%,
        rgba(255, 255, 255, .32) 52%,
        rgba(255, 255, 255, 0) 100%);
    opacity: .78; pointer-events: none;
}
/* 底部柔弧，把天光收进正文 */
.hp-hero .hp-hero-wave {
    position: absolute; left: 0; right: 0; bottom: -1px; z-index: 3;
    width: 100%; height: 72px; display: block; pointer-events: none;
}
.hp-hero .hp-hero-wave path { fill: #EAF5FE; }

.hp-eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12.5px; font-weight: 500;
    color: var(--brand-deep);
    background: rgba(255, 255, 255, .9);
    border: 1px solid #FFE0AE;
    border-radius: 999px; padding: 7px 17px; margin-bottom: 20px;
    box-shadow: 0 4px 16px rgba(242, 163, 60, .16);
}
.hp-eyebrow i { color: #F5A623; }

.hp-hero h1 {
    font-size: clamp(28px, 4.4vw, 44px);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ink);
    margin-bottom: 18px;
    line-height: 1.24;
}
.hp-hero h1 .hp-hl {
    background: linear-gradient(115deg, #F2A33C 0%, #FF8A3D 52%, #EF9A1E 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hp-lead {
    color: var(--ink-soft);
    font-size: 16px; line-height: 2;
    max-width: 730px; margin: 0 auto 30px;
}
.hp-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 28px; }
.hp-cta .btn { padding: 12px 30px; font-size: 15px; font-weight: 600; }

.hp-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.hp-chip {
    font-size: 12.5px; font-weight: 500; color: var(--ink-soft);
    background: rgba(255, 255, 255, .94);
    border: 1px solid var(--line);
    border-radius: 999px; padding: 8px 16px;
    box-shadow: 0 2px 10px rgba(31, 42, 55, .05);
}
.hp-chip i { margin-right: 7px; }
.hp-chip:nth-child(1) i { color: #3FA46A; }
.hp-chip:nth-child(2) i { color: #3E96DC; }
.hp-chip:nth-child(3) i { color: #F2A33C; }
.hp-chip:nth-child(4) i { color: #FF8F6B; }
.hp-minor { font-size: 12.5px; color: var(--muted); }
.hp-minor a { color: var(--brand-deep); text-decoration: none; border-bottom: 1px dashed var(--brand-light); }

/* ---------- 家属安抚条 ---------- */
.hp-empathy {
    background: linear-gradient(90deg, #EAF5FE 0%, #F6FBFF 50%, #EAF5FE 100%);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 16px 0;
}
.hp-empathy p { font-size: 13.5px; color: var(--ink-soft); text-align: center; line-height: 1.95; margin: 0; }
.hp-empathy i { color: #3E96DC; }
.hp-empathy a { color: #1F6FB2; }

/* ---------- 通用标题（带一道彩色小横杠，给页面节奏） ---------- */
.hp-h2 {
    position: relative;
    font-size: 25px; font-weight: 700; color: var(--ink);
    letter-spacing: -.015em; margin-bottom: 22px; padding-bottom: 16px;
}
.hp-h2::after {
    content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0;
    width: 48px; height: 4px; border-radius: 4px;
    background: linear-gradient(90deg, #F2A33C 0%, #FFC978 40%, #7FC4F5 100%);
}
.hp-sub { font-size: 13.5px; color: var(--muted); line-height: 1.95; max-width: 720px; margin: 0 auto; }
.hp-section-alt { background: linear-gradient(180deg, #F3FAFF 0%, var(--canvas) 100%); }

/* ---------- 服务卡片（四色点缀） ---------- */
.hp-card {
    --accent: #F2A33C;
    --accent-2: #FFC978;
    --accent-soft: #FFF1DA;
    --accent-glow: rgba(242, 163, 60, .30);
    position: relative;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 30px 24px 26px;
    height: 100%;
    overflow: hidden;
    box-shadow: var(--elev-sm);
    transition: box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
}
.hp-card::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
}
.hp-card::after {
    content: ""; position: absolute; right: -38px; top: -38px; width: 120px; height: 120px;
    border-radius: 50%; background: var(--accent-soft); opacity: .8; pointer-events: none;
}
.hp-card:hover { box-shadow: var(--elev-md); transform: translateY(-4px); border-color: var(--accent-2); }
.hp-card.c1 { --accent: #F2A33C; --accent-2: #FFC978; --accent-soft: #FFF1DA; --accent-glow: rgba(242, 163, 60, .30); }
.hp-card.c2 { --accent: #3E96DC; --accent-2: #8CC8F2; --accent-soft: #E6F3FD; --accent-glow: rgba(62, 150, 220, .28); }
.hp-card.c3 { --accent: #3FA46A; --accent-2: #86D8A6; --accent-soft: #E4F7EC; --accent-glow: rgba(63, 164, 106, .26); }
.hp-card.c4 { --accent: #FF8F6B; --accent-2: #FFC0A8; --accent-soft: #FFEDE6; --accent-glow: rgba(255, 143, 107, .28); }
.hp-ico {
    position: relative; z-index: 1;
    width: 52px; height: 52px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 21px; margin-bottom: 18px; color: #fff;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    box-shadow: 0 8px 20px var(--accent-glow);
}
.hp-card h3 { position: relative; z-index: 1; font-size: 16.5px; font-weight: 700; color: var(--ink); margin-bottom: 9px; }
.hp-card p { position: relative; z-index: 1; font-size: 13.5px; color: var(--ink-soft); line-height: 1.95; margin: 0; }

/* ---------- 办理流程（连接线上的四张卡） ---------- */
.hp-flow { position: relative; }
.hp-flow::before {
    content: ""; position: absolute; left: 5%; right: 5%; top: 48px; height: 2px;
    background: linear-gradient(90deg, #FFE6BE 0%, #CFE9FB 50%, #CCF0DF 100%);
    z-index: 0;
}
.hp-step {
    position: relative; z-index: 1;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 26px 24px 24px;
    height: 100%;
    box-shadow: var(--elev-sm);
    transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}
.hp-step:hover { box-shadow: var(--elev-md); transform: translateY(-3px); }
.hp-step-no {
    width: 46px; height: 46px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    /* 【修复】原来是 color:#fff 压在 #FFC978→#E58E0C 的浅金渐变上，
       最浅处对比度只有约 1.5:1（design_review 实测报 1:1），序号几乎看不见。
       改为深棕金，最浅处 5.5:1、最深处 8:1+，四套配色都安全。
       注：首页已改用 companion.css 的 .cp-step-no，这里保留是为了不影响其他可能复用的页面。 */
    font-weight: 800; font-size: 17px; color: #7A3F03;
    background: linear-gradient(140deg, #FFE0B0 0%, #FFC978 100%);
    box-shadow: 0 8px 20px rgba(242, 163, 60, .34), 0 0 0 6px #FFF8EC;
    margin-bottom: 16px;
}
.hp-step h3 { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.hp-step-ico { color: #F2A33C; font-size: 14px; }
.hp-step p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.95; margin: 0; }
/* 四步各用一种颜色，呼应"阳光 + 天光" */
.hp-flow > div:nth-child(1) .hp-step-no { background: linear-gradient(140deg, #FFC978 0%, #E58E0C 100%); box-shadow: 0 8px 20px rgba(242, 163, 60, .34), 0 0 0 6px #FFF8EC; }
.hp-flow > div:nth-child(2) .hp-step-no { background: linear-gradient(140deg, #8CC8F2 0%, #2E86CC 100%); box-shadow: 0 8px 20px rgba(62, 150, 220, .30), 0 0 0 6px #EFF8FF; }
.hp-flow > div:nth-child(3) .hp-step-no { background: linear-gradient(140deg, #86D8A6 0%, #2F8F58 100%); box-shadow: 0 8px 20px rgba(63, 164, 106, .28), 0 0 0 6px #EFFBF4; }
.hp-flow > div:nth-child(4) .hp-step-no { background: linear-gradient(140deg, #FFC0A8 0%, #F0734A 100%); box-shadow: 0 8px 20px rgba(255, 143, 107, .30), 0 0 0 6px #FFF4EF; }
.hp-flow > div:nth-child(2) .hp-step-ico { color: #3E96DC; }
.hp-flow > div:nth-child(3) .hp-step-ico { color: #3FA46A; }
.hp-flow > div:nth-child(4) .hp-step-ico { color: #FF8F6B; }

/* ---------- 隐私与安全（天光面板 + 白卡） ---------- */
.hp-assure {
    position: relative; overflow: hidden;
    background:
        radial-gradient(620px 300px at 92% -14%, rgba(150, 205, 250, .42), rgba(255, 255, 255, 0) 62%),
        radial-gradient(520px 280px at 4% 114%, rgba(150, 232, 200, .36), rgba(255, 255, 255, 0) 64%),
        linear-gradient(180deg, #F6FCFF 0%, #FFFFFF 100%);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 40px 32px 34px;
}
.hp-assure-item {
    display: flex; gap: 14px;
    background: var(--paper);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    padding: 20px;
    height: 100%;
    box-shadow: var(--elev-sm);
    transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}
.hp-assure-item:hover { box-shadow: var(--elev-md); transform: translateY(-2px); }
.hp-assure-item > i {
    flex-shrink: 0;
    width: 40px; height: 40px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    background: var(--brand-soft); color: var(--brand-deep);
}
.hp-assure .row > div:nth-child(1) .hp-assure-item > i { background: #E4F7EC; color: #1F7A45; }
.hp-assure .row > div:nth-child(2) .hp-assure-item > i { background: #E6F3FD; color: #1F6FB2; }
.hp-assure .row > div:nth-child(3) .hp-assure-item > i { background: #FFF1DA; color: #B96B0A; }
.hp-assure-item h4 { font-size: 14.5px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.hp-assure-item p { font-size: 13px; color: var(--ink-soft); line-height: 1.9; margin: 0; }

/* ---------- 套餐 ---------- */
.hp-plan {
    position: relative;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 30px 26px;
    height: 100%; display: flex; flex-direction: column;
    box-shadow: var(--elev-sm);
    transition: box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
}
.hp-plan:hover { box-shadow: var(--elev-md); transform: translateY(-3px); }
.hp-plan h3 { font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 14px; }
.hp-plan-price { font-size: 30px; font-weight: 800; color: var(--brand-deep); letter-spacing: -.02em; }
.hp-plan small { font-size: 12.5px; color: var(--muted); }
.hp-plan ul { list-style: none; padding: 0; margin: 20px 0 22px; flex: 1; }
.hp-plan li { font-size: 13px; color: var(--ink-soft); padding: 9px 0; border-bottom: 1px dashed var(--line-soft); }
.hp-plan li:last-child { border-bottom: 0; }
.hp-plan li i { color: #3FA46A; width: 16px; margin-right: 8px; }

.hp-plan-hot {
    border-color: transparent;
    background: linear-gradient(180deg, #FFFCF3 0%, #FFFFFF 46%);
    box-shadow: 0 18px 44px rgba(242, 163, 60, .22);
    transform: translateY(-6px);
}
.hp-plan-hot:hover { transform: translateY(-9px); }
.hp-plan-hot::before {
    content: ""; position: absolute; inset: 0; border-radius: var(--r-lg);
    padding: 2px;
    background: linear-gradient(135deg, #FFD08A 0%, #F2A33C 48%, #FFE3B4 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    pointer-events: none;
}
.hp-plan-badge {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(135deg, #FFB44E 0%, #E58E0C 100%);
    color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .04em;
    padding: 5px 16px; border-radius: 999px;
    box-shadow: 0 6px 16px rgba(242, 163, 60, .38);
    white-space: nowrap;
}

/* ---------- 说明 / FAQ / 页脚 ---------- */
.hp-note {
    background: linear-gradient(180deg, #F5FBFF 0%, #FFFFFF 100%);
    border: 1px solid var(--line);
    border-left: 4px solid #7FC4F5;
    border-radius: var(--r-md);
    padding: 22px 24px;
}
.hp-note h5 { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 9px; }
.hp-note h5 i { color: #3E96DC; }
.hp-note p { font-size: 12.5px; color: var(--muted); line-height: 1.95; margin: 0; }

.hp-faq .accordion-item {
    border: 1px solid var(--line);
    border-radius: var(--r-md) !important;
    margin-bottom: 12px; overflow: hidden; background: var(--paper);
    box-shadow: var(--elev-sm);
}
.hp-faq .accordion-button {
    font-size: 14.5px; font-weight: 600; color: var(--ink);
    background: var(--paper); box-shadow: none; padding: 18px 20px;
}
.hp-faq .accordion-button:not(.collapsed) {
    color: var(--brand-deep);
    background: linear-gradient(180deg, #FFF8EC 0%, #FFFDF9 100%);
}
.hp-faq .accordion-button:focus { box-shadow: none; border-color: var(--line); }
.hp-faq .accordion-body { color: var(--ink-soft); }
.hp-faq .accordion-button::after { background-size: 1rem; }

.hp-legal {
    background: linear-gradient(180deg, #F7FCFF 0%, #F1F9FF 100%);
    border-top: 1px solid var(--line);
    padding: 18px; text-align: center; font-size: 12px; color: var(--muted); line-height: 1.95;
}

@media (max-width: 991px) {
    .hp-flow::before { display: none; }
    .hp-plan-hot { transform: none; }
    .hp-plan-hot:hover { transform: translateY(-3px); }
}
@media (max-width: 767px) {
    .hp-hero { padding: 64px 0 78px; }
    .hp-hero::before { width: 210px; height: 210px; top: -90px; right: -30px; }
    .hp-hero h1 { font-size: 26px; }
    .hp-lead { font-size: 14.5px; }
    .hp-cta .btn { padding: 11px 22px; font-size: 14px; }
    .hp-assure { padding: 26px 18px 22px; }
    .hp-card { padding: 26px 20px 22px; }
    .hp-step { padding: 22px 20px; }
    .hp-plan { padding: 26px 22px; }
}