/* ============================================================
   陪伴者设计系统 v2 · companion.css
   ------------------------------------------------------------
   叠加在 style.css 的 5 套主题变量之上，不推翻原有体系：
     1) 把"暖"再往前推一步：暖白底、暖棕墨、暖阴影、更大的圆角
     2) 引入贯穿全站的「向导人格」：气泡对话、手绘感描边、陪伴卡
     3) 把流程从「卡片网格」升级为「步骤时间轴」——每一步讲清
        「要做什么 / 要准备什么 / 大概多久 / 你会拿到什么」
     4) 可访问性硬指标（design_review 复测必须 0 问题）：
        - 全站文字对比度 ≥ 4.5:1
        - 所有可点区域 ≥ 44×44
        - 保留键盘焦点环（不写 outline:none）
        - prefers-reduced-motion 兜底
        - 提供 main / nav 语义地标
   约束：间距一律 4px 网格；字号固定 7 级阶梯
   加载顺序：bootstrap → style.css → companion.css
   ============================================================ */

:root {
    /* ---------- 间距：4px 网格 ---------- */
    --cp-s1: 4px;
    --cp-s2: 8px;
    --cp-s3: 12px;
    --cp-s4: 16px;
    --cp-s5: 20px;
    --cp-s6: 24px;
    --cp-s7: 28px;
    --cp-s8: 32px;
    --cp-s10: 40px;
    --cp-s12: 48px;
    --cp-s14: 56px;
    --cp-s16: 64px;
    --cp-s18: 72px;

    /* ---------- 字号：7 级阶梯 ---------- */
    --cp-fs-sm: 0.875rem;    /* 14px 辅助文字 */
    --cp-fs-base: 1rem;      /* 16px 正文 */
    --cp-fs-md: 1.125rem;    /* 18px 卡片标题 */
    --cp-fs-lg: 1.25rem;     /* 20px 小节标题 */
    --cp-fs-xl: 1.5rem;      /* 24px 区块标题 */
    --cp-fs-2xl: 2rem;       /* 32px 大标题 */
    --cp-fs-3xl: 2.5rem;     /* 40px Hero */

    /* ---------- 画布与墨色 ---------- */
    --cp-canvas: #FFFCF7;
    --cp-canvas-2: #FFFFFF;
    --cp-canvas-warm: #FFF7EC;
    --cp-ink: #33291F;       /* 暖棕黑，暖白底对比度 13:1 */
    --cp-ink-soft: #6B5B4B;  /* 6.1:1 */
    --cp-ink-faint: #7F6E5A; /* 4.8:1 —— 次要文字的下限，不要再调浅 */
    --cp-line: #F0E4D4;
    --cp-line-soft: #F7EFE4;

    /* ---------- 陪伴色板 ---------- */
    --cp-sun: #F0A63C;
    --cp-sun-deep: #9A5606;  /* 白底 5.7:1，用于文字与主按钮 */
    --cp-sun-wash: #FFF3E0;
    --cp-nav-bg: rgba(255, 252, 247, .92);
    --cp-sprout: #6FAF86;
    --cp-sprout-ink: #4E8E66;
    --cp-sprout-wash: #EAF6EF;
    --cp-sky: #6FAEDC;
    --cp-sky-ink: #3F7FB0;
    --cp-sky-wash: #E9F3FB;
    --cp-clay: #DA8A72;
    --cp-clay-ink: #B5644C;
    --cp-clay-wash: #FBEDE8;

    /* ---------- 圆角与阴影 ---------- */
    --cp-r-sm: 12px;
    --cp-r-md: 16px;
    --cp-r-lg: 24px;
    --cp-r-pill: 999px;
    --cp-elev-1: 0 1px 2px rgba(150, 110, 60, .05), 0 2px 8px rgba(150, 110, 60, .06);
    --cp-elev-2: 0 8px 24px rgba(150, 110, 60, .09);
    --cp-elev-3: 0 16px 48px rgba(150, 110, 60, .13);

    --cp-leading: 1.75;
    --cp-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ============================================================
   主题适配层：让 --cp-* 跟随 style.css 的 5 套主题
   ------------------------------------------------------------
   背景：companion.css 最初把画布/墨色/主色写成了固定的暖色，
   而 style.css 的 5 套主题只重定义 --canvas/--ink/--brand 等旧令牌。
   结果是切到「新绿/晴空/薰衣草/云灰」时，新组件仍是暖白 + 金黄，
   与旧组件的新色调**两套色系打架**。
   这里按主题重定义"承载色相"的几个令牌；间距、字号、圆角、结构令牌
   保持全局不变（与色相无关）。
   注意：文字色只取各主题的 --ink / --ink-soft / --muted，
   **不取 --faint**（5 套主题的 --faint 都在 2.4–3.1:1，达不到 4.5:1）。
   ============================================================ */

html[data-theme="green"] {
    --cp-canvas: #F5FAF7;      --cp-canvas-warm: #EAF6EF;
    --cp-ink: #1E2E26;         --cp-ink-soft: #43544B;   --cp-ink-faint: #5F7268;
    --cp-line: #DEEBE3;        --cp-line-soft: #EDF5F0;
    --cp-sun: #45A96F;         --cp-sun-deep: #2C7A4C;   --cp-sun-wash: #E8F8EF;
    --cp-nav-bg: #F5FAF7;
    --cp-elev-1: var(--elev-sm); --cp-elev-2: var(--elev-md); --cp-elev-3: var(--elev-lg);
}

html[data-theme="sky"] {
    --cp-canvas: #F5F9FD;      --cp-canvas-warm: #EBF3FB;
    --cp-ink: #1B2A38;         --cp-ink-soft: #40566B;   --cp-ink-faint: #5C7185;
    --cp-line: #DDE9F4;        --cp-line-soft: #EDF4FB;
    --cp-sun: #3E96DC;         --cp-sun-deep: #1F6FB2;   --cp-sun-wash: #E8F4FD;
    --cp-nav-bg: #F5F9FD;
    --cp-elev-1: var(--elev-sm); --cp-elev-2: var(--elev-md); --cp-elev-3: var(--elev-lg);
}

html[data-theme="lavender"] {
    --cp-canvas: #F8F7FC;      --cp-canvas-warm: #F1EEFA;
    --cp-ink: #241F33;         --cp-ink-soft: #4B4460;   --cp-ink-faint: #6B6483;
    --cp-line: #E5DFF2;        --cp-line-soft: #F1EDFA;
    --cp-sun: #8B6FD6;         --cp-sun-deep: #6A4FB5;   --cp-sun-wash: #F1ECFC;
    --cp-nav-bg: #F8F7FC;
    --cp-elev-1: var(--elev-sm); --cp-elev-2: var(--elev-md); --cp-elev-3: var(--elev-lg);
}

html[data-theme="slate"] {
    --cp-canvas: #F7F9FB;      --cp-canvas-warm: #EEF2F6;
    --cp-ink: #1B2530;         --cp-ink-soft: #46525F;   --cp-ink-faint: #64717F;
    --cp-line: #E1E7EE;        --cp-line-soft: #EFF3F7;
    --cp-sun: #64748B;         --cp-sun-deep: #475569;   --cp-sun-wash: #EEF2F6;
    --cp-nav-bg: #F7F9FB;
    --cp-elev-1: var(--elev-sm); --cp-elev-2: var(--elev-md); --cp-elev-3: var(--elev-lg);
}

/* 主色按钮/链接的 hover：各主题取自己更深的那个色，别再用写死的棕色 */
:root                      { --cp-sun-deep-hover: #7E4504; }
html[data-theme="green"]    { --cp-sun-deep-hover: #1F5C38; }
html[data-theme="sky"]      { --cp-sun-deep-hover: #17548A; }
html[data-theme="lavender"] { --cp-sun-deep-hover: #543D92; }
html[data-theme="slate"]    { --cp-sun-deep-hover: #33415A; }

/* ---------- 基础语气 ---------- */
body {
    background: var(--cp-canvas);
    color: var(--cp-ink);
    font-size: var(--cp-fs-base);
    line-height: var(--cp-leading);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 { color: var(--cp-ink); line-height: 1.4; }
h1 { font-size: var(--cp-fs-3xl); font-weight: 800; }
h2 { font-size: var(--cp-fs-2xl); font-weight: 800; }
h3 { font-size: var(--cp-fs-md); font-weight: 700; }

p, li, .cp-field, .form-label, .form-text { line-height: var(--cp-leading); }

/* ---------- 可访问性兜底 ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* 键盘焦点：暖色可见环。
   注意：不要给任何控件写 outline:none —— :where() 特异性为 0，
   一旦写了就会把键盘用户的焦点提示整片吃掉（design_review 会报 WCAG 2.4.7）。 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid rgba(154, 86, 6, .65);
    outline-offset: 2px;
    border-radius: var(--cp-r-sm);
}

/* 行内小链接撑到可点尺寸（WCAG 2.5.8） */
.cp-tap {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--cp-s3);
    margin: 0 calc(var(--cp-s3) * -1);
}

/* 移动端汉堡菜单补可访问名称（视觉不变） */
.cp-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- 顶部导航 ---------- */
.cp-topnav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--cp-nav-bg);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1.5px solid var(--cp-line);
}

.cp-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--cp-s2);
    min-height: 44px;
    font-weight: 700;
    color: var(--cp-ink);
    text-decoration: none;
}
.cp-brand svg { color: var(--cp-sun-deep); flex: 0 0 auto; }

.cp-navlink {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--cp-s3);
    color: var(--cp-ink-soft);
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--cp-r-sm);
    transition: color .18s var(--cp-ease), background-color .18s var(--cp-ease);
}
.cp-navlink:hover { color: var(--cp-sun-deep); background: var(--cp-sun-wash); }
/* 当前所在页。高亮必须落在 .cp-navlink 上，不能换成 Bootstrap 的 .nav-link.active：
   Bootstrap 的 .active{color:#fff} 会被后代 <a> 继承成白字压白底。 */
.cp-navlink.active,
.cp-navlink[aria-current="page"] { color: var(--cp-sun-deep); background: var(--cp-sun-wash); }
.cp-navlink.active { box-shadow: inset 0 0 0 1.5px var(--cp-line); }

/* ---------- 用户中心外壳（user/_header.php + _footer.php） ---------- */
/* 主题切换器与用户名菜单来自 theme_switcher_html()，是 Bootstrap 的 btn-sm，
   桌面端按原样呈现，触屏与窄屏下把命中区撑到 44px 高，不改模块与视觉密度。 */
@media (max-width: 991.98px), (pointer: coarse) {
    .cp-topnav .navbar-toggler { min-height: 44px; }
    .cp-topnav .btn-sm { min-height: 44px; }
    .cp-topnav .dropdown-item { min-height: 44px; display: flex; align-items: center; }
}
/* 窄屏展开后的整行菜单：文字不再折行 */
@media (max-width: 991.98px) {
    .cp-topnav .cp-navlink { padding: var(--cp-s2) var(--cp-s3); }
}

/* ---------- 向导气泡 ---------- */
.cp-guide {
    display: flex;
    gap: var(--cp-s3);
    align-items: flex-start;
    margin-bottom: var(--cp-s5);
}

.cp-guide-avatar {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(150deg, var(--cp-sun-wash), #fff);
    border: 2px solid var(--cp-line);
    display: grid;
    place-items: center;
    box-shadow: var(--cp-elev-1);
}
.cp-guide-avatar svg { width: 26px; height: 26px; }

.cp-bubble {
    position: relative;
    flex: 1 1 auto;
    background: #fff;
    border: 1.5px solid var(--cp-line);
    border-radius: var(--cp-r-lg) var(--cp-r-lg) var(--cp-r-lg) var(--cp-s1);
    padding: var(--cp-s4) var(--cp-s5);
    box-shadow: var(--cp-elev-1);
}
.cp-bubble::before {
    content: "";
    position: absolute;
    left: -8px;
    top: var(--cp-s4);
    width: 12px; height: 12px;
    background: #fff;
    border-left: 1.5px solid var(--cp-line);
    border-bottom: 1.5px solid var(--cp-line);
    transform: rotate(45deg);
}
.cp-bubble > p:last-child { margin-bottom: 0; }

.cp-bubble-title {
    font-weight: 700;
    color: var(--cp-ink);
    margin-bottom: var(--cp-s1);
}

/* ---------- Hero ---------- */
.cp-hero {
    position: relative;
    overflow: hidden;
    /* 用主题自带的光晕令牌，切主题时 Hero 会跟着变色（原先是写死的暖色渐变） */
    background:
        radial-gradient(1100px 460px at 12% -12%, var(--glow-1, rgba(255, 214, 140, .55)), transparent 62%),
        radial-gradient(900px 420px at 92% 4%, var(--glow-2, rgba(160, 210, 245, .40)), transparent 60%),
        radial-gradient(700px 380px at 62% 108%, var(--glow-3, rgba(150, 220, 190, .28)), transparent 62%),
        linear-gradient(180deg, var(--hero-tint, #FFFDF8) 0%, var(--cp-canvas) 68%);
    padding: var(--cp-s18) 0 var(--cp-s14);
}

.cp-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--cp-s2);
    background: #fff;
    border: 1.5px solid var(--cp-line);
    color: var(--cp-sun-deep);
    border-radius: var(--cp-r-pill);
    padding: var(--cp-s1) var(--cp-s4);
    font-size: var(--cp-fs-sm);
    font-weight: 600;
    box-shadow: var(--cp-elev-1);
}

.cp-hero h1 {
    font-size: clamp(var(--cp-fs-2xl), 4.2vw, var(--cp-fs-3xl));
    margin: var(--cp-s5) 0 var(--cp-s3);
    letter-spacing: -.01em;
}

.cp-hero h1 .cp-hl {
    background: linear-gradient(180deg, transparent 62%, rgba(240, 166, 60, .32) 62%);
    padding: 0 var(--cp-s1);
}

.cp-hero-lead {
    font-size: var(--cp-fs-md);
    color: var(--cp-ink-soft);
    max-width: 40em;
    margin-bottom: var(--cp-s2);
}

.cp-hero-sub {
    color: var(--cp-ink-faint);
    font-size: var(--cp-fs-sm);
    margin-bottom: var(--cp-s6);
}

.cp-hero-art { display: grid; place-items: center; }
.cp-hero-art svg { width: 100%; max-width: 420px; height: auto; }

/* ---------- 按钮 ---------- */
.cp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cp-s2);
    min-height: 52px;
    padding: var(--cp-s3) var(--cp-s6);
    border-radius: var(--cp-r-pill);
    border: 1.5px solid transparent;
    font-weight: 700;
    font-size: var(--cp-fs-base);
    text-decoration: none;
    cursor: pointer;
    transition: transform .18s var(--cp-ease), box-shadow .18s var(--cp-ease), background-color .18s var(--cp-ease);
}

.cp-btn-primary {
    background: var(--cp-sun-deep);
    color: #fff;
    box-shadow: 0 8px 20px rgba(154, 86, 6, .26);
}
.cp-btn-primary:hover {
    background: var(--cp-sun-deep-hover);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(154, 86, 6, .32);
}

.cp-btn-ghost {
    background: #fff;
    color: var(--cp-sun-deep);
    border-color: var(--cp-line);
    box-shadow: var(--cp-elev-1);
}
.cp-btn-ghost:hover {
    background: var(--cp-sun-wash);
    color: var(--cp-sun-deep);
    transform: translateY(-2px);
}

/* 等待短信倒计时等不可用态：保持文字对比度 ≥ 4.5:1（不要加 .btn，
   否则会被 Bootstrap 的 65% 透明度打到 4.5:1 以下） */
.cp-btn[disabled],
.cp-btn:disabled {
    background: var(--cp-canvas-warm);
    border-color: var(--cp-line);
    color: var(--cp-ink);
    box-shadow: none;
    cursor: not-allowed;
    opacity: 1;
    transform: none;
}
.cp-btn-primary[disabled],
.cp-btn-primary:disabled {
    background: var(--cp-canvas-warm);
    color: var(--cp-ink);
}

/* ---------- 步骤时间轴 ---------- */
.cp-flow {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cp-flow::before {
    content: "";
    position: absolute;
    left: 24px;
    top: var(--cp-s6);
    bottom: var(--cp-s6);
    width: 4px;
    border-radius: var(--cp-s1);
    background: linear-gradient(180deg,
        var(--cp-sun) 0%,
        rgba(240, 166, 60, .55) 18%,
        var(--cp-line) 55%,
        var(--cp-line) 100%);
}

.cp-step {
    position: relative;
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: var(--cp-s5);
    padding-bottom: var(--cp-s6);
}
.cp-step:last-child { padding-bottom: 0; }

.cp-step-no {
    position: relative;
    z-index: 1;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: var(--cp-fs-md);
    color: var(--cp-sun-deep);
    background: #fff;
    border: 3px solid var(--cp-sun);
    box-shadow: 0 0 0 var(--cp-s2) var(--cp-canvas), var(--cp-elev-1);
}

.cp-step-done .cp-step-no {
    color: #fff;
    /* 底色用比 --cp-sprout-ink 更深一档的绿：--cp-sprout-ink(#4E8E66) 上的白字
       只有 3.9:1，达不到「所有文字 ≥ 4.5:1」；#2F6F4A 是 5.8:1（与 .btn-success 同色） */
    background: #2F6F4A;
    border-color: #2F6F4A;
}

.cp-step-body {
    background: #fff;
    border: 1.5px solid var(--cp-line);
    border-radius: var(--cp-r-md);
    padding: var(--cp-s5);
    box-shadow: var(--cp-elev-1);
    transition: transform .2s var(--cp-ease), box-shadow .2s var(--cp-ease), border-color .2s var(--cp-ease);
}
.cp-step-body:hover {
    transform: translateX(4px);
    border-color: rgba(240, 166, 60, .5);
    box-shadow: var(--cp-elev-2);
}

.cp-step-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cp-s2);
    margin-bottom: var(--cp-s1);
}

.cp-step-title { font-size: var(--cp-fs-md); font-weight: 700; margin: 0; }

.cp-step-time {
    display: inline-flex;
    align-items: center;
    gap: var(--cp-s1);
    font-size: var(--cp-fs-sm);
    font-weight: 600;
    color: var(--cp-ink-soft);
    background: var(--cp-canvas-warm);
    border: 1px solid var(--cp-line);
    border-radius: var(--cp-r-pill);
    padding: 2px var(--cp-s3);
}

.cp-step-desc {
    color: var(--cp-ink-soft);
    margin: 0 0 var(--cp-s3);
    font-size: var(--cp-fs-base);
}

.cp-step-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--cp-s2);
}

.cp-meta-item {
    display: flex;
    gap: var(--cp-s2);
    align-items: flex-start;
    background: var(--cp-canvas-warm);
    border-radius: var(--cp-r-sm);
    padding: var(--cp-s3) var(--cp-s4);
    font-size: var(--cp-fs-sm);
    color: var(--cp-ink-soft);
}
.cp-meta-item svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: var(--cp-s1); }
.cp-meta-item b { color: var(--cp-ink); }

/* ---------- 卡片 ---------- */
.cp-card {
    background: #fff;
    border: 1.5px solid var(--cp-line);
    border-radius: var(--cp-r-lg);
    padding: var(--cp-s6);
    height: 100%;
    box-shadow: var(--cp-elev-1);
    transition: transform .22s var(--cp-ease), box-shadow .22s var(--cp-ease);
}
.cp-card:hover { transform: translateY(-4px); box-shadow: var(--cp-elev-2); }

.cp-card-ico {
    width: 56px;
    height: 56px;
    border-radius: var(--cp-r-md);
    display: grid;
    place-items: center;
    margin-bottom: var(--cp-s4);
    background: var(--cp-sun-wash);
}
.cp-card-ico svg { width: 28px; height: 28px; }
.cp-card-ico.is-sprout { background: var(--cp-sprout-wash); }
.cp-card-ico.is-sky    { background: var(--cp-sky-wash); }
.cp-card-ico.is-clay   { background: var(--cp-clay-wash); }

.cp-card h3 { margin: 0 0 var(--cp-s2); }
.cp-card p { color: var(--cp-ink-soft); margin: 0; font-size: var(--cp-fs-sm); }

/* ---------- 区块 ---------- */
.cp-section { padding: var(--cp-s18) 0; }
.cp-section-warm { background: var(--cp-canvas-warm); }

.cp-section-head {
    text-align: center;
    max-width: 46em;
    margin: 0 auto var(--cp-s10);
}
.cp-section-head h2 { margin: 0 0 var(--cp-s3); }
.cp-section-head p { color: var(--cp-ink-soft); margin: 0; }

.cp-rule {
    width: 56px;
    height: 4px;
    border-radius: var(--cp-s1);
    margin: 0 auto var(--cp-s4);
    background: linear-gradient(90deg, var(--cp-sun), var(--cp-sprout));
}

/* ---------- 表单 ---------- */
.cp-field {
    display: block;
    width: 100%;
    min-height: 52px;
    padding: var(--cp-s3) var(--cp-s4);
    font-size: var(--cp-fs-base);
    color: var(--cp-ink);
    background: #fff;
    border: 1.5px solid var(--cp-line);
    border-radius: var(--cp-r-md);
    transition: border-color .18s var(--cp-ease), box-shadow .18s var(--cp-ease);
}
.cp-field::placeholder { color: var(--cp-ink-faint); }
.cp-field:focus {
    border-color: var(--cp-sun);
    box-shadow: 0 0 0 4px rgba(240, 166, 60, .16);
}

.cp-label {
    display: block;
    font-weight: 600;
    font-size: var(--cp-fs-sm);
    margin-bottom: var(--cp-s2);
    color: var(--cp-ink);
}

.cp-help { font-size: var(--cp-fs-sm); color: var(--cp-ink-faint); margin-top: var(--cp-s2); }

/* ---------- 承诺条 ---------- */
.cp-promise {
    display: flex;
    gap: var(--cp-s3);
    align-items: flex-start;
    background: linear-gradient(135deg, #fff, var(--cp-sprout-wash));
    border: 1.5px solid var(--cp-line);
    border-radius: var(--cp-r-md);
    padding: var(--cp-s4) var(--cp-s5);
}
.cp-promise svg { flex: 0 0 auto; width: 24px; height: 24px; margin-top: var(--cp-s1); }
.cp-promise b { display: block; margin-bottom: var(--cp-s1); }
.cp-promise span { color: var(--cp-ink-soft); font-size: var(--cp-fs-sm); }

/* ---------- 链接与折叠面板配色 ----------
   根因：style.css 把 --bs-link-color 定为 #B96B0A，压在暖白 / 暖黄底上只有 3.7–4.0:1，
   design_review 一次报了 9 处不达标。这里不逐处覆盖，而是把"链接色"这个令牌
   本身提到达标值（5.2:1），后续页面自动继承。 */
a {
    color: var(--cp-sun-deep);
    text-decoration-color: rgba(154, 86, 6, .35);
}
a:hover { color: var(--cp-sun-deep-hover); }

.accordion-button { color: var(--cp-ink); }
.accordion-button:not(.collapsed) {
    color: var(--cp-sun-deep);
    background-color: var(--cp-sun-wash);
}
.accordion-button:focus { box-shadow: 0 0 0 4px rgba(240, 166, 60, .20); }
.accordion-body { color: var(--cp-ink-soft); }

/* 粗指针（触屏）下把小控件撑到 44px；桌面端保持信息密度 */
@media (pointer: coarse) {
    .btn-sm { min-height: 44px; }
}
/* 例外：下拉触发器在导航里，鼠标点也不该太小（design_review 会按 44px 建议值报） */
.dropdown-toggle.btn-sm { min-height: 44px; }

/* ---------- 移动端 ---------- */
@media (max-width: 767.98px) {
    .cp-hero { padding: var(--cp-s12) 0 var(--cp-s10); }
    .cp-section { padding: var(--cp-s12) 0; }
    .cp-step { grid-template-columns: 40px 1fr; gap: var(--cp-s3); }
    .cp-step-no { width: 40px; height: 40px; font-size: var(--cp-fs-base); }
    .cp-flow::before { left: 20px; }
    .cp-step-body { padding: var(--cp-s4); }
    .cp-card { padding: var(--cp-s5); }
    /* 例外：顶部/子导航里的 .cp-navlink 保持内容宽度，
       否则移动端每行只放得下一个入口，横向胶囊导航会被撑成竖排名单。 */
    .cp-btn { width: 100%; }
    .cp-navlink { width: auto; }
    .cp-shell .cp-guide { max-width: 100%; }

    /* 触屏命中区：窄视口下一律放大到 44px。
       为什么不只靠 @media (pointer: coarse)：触屏笔记本 / 二合一设备常报
       pointer:fine，只按指针类型判断会漏掉这批用户；
       而且放在断点里也能被自动化测量验证到。 */
    .btn-sm,
    .btn-group-sm > .btn,
    .dropdown-toggle.btn-sm,
    .card-header a,
    .card-header .btn-link,
    .page-link,
    .cp-navlink { min-height: 44px; }
    .page-link { min-width: 44px; }
}

/* 动效偏好：关掉位移，只留颜色变化 */
@media (prefers-reduced-motion: reduce) {
    .cp-card:hover, .cp-btn:hover, .cp-step-body:hover { transform: none; }
}

/* ============================================================
   控制台 / 门户皮肤
   ------------------------------------------------------------
   作用：admin（20 页）、audit、customer_service、service 这些后台页面
   大量使用 Bootstrap 原生类（.card/.table/.btn/.badge/.form-control…），
   且各自内联导航、没有共用外壳。这一层**不改任何 HTML**，
   只重写这些通用类的皮肤，让它们一次性获得：
     · 暖色调统一（与 C 端同一套令牌）
     · 可达标的文字对比度（原 .btn-primary 是白字压 #F2A33C，仅约 1.9:1）
     · 够大的点击目标与表单控件
   后台偏工具性，所以这里**不引入向导气泡**，只做视觉与可用性统一。
   ============================================================ */

/* ---------- 主色按钮：白字必须压得住 ---------- */
.btn-primary {
    --bs-btn-bg: var(--cp-sun-deep);
    --bs-btn-border-color: var(--cp-sun-deep);
    --bs-btn-hover-bg: var(--cp-sun-deep-hover);
    --bs-btn-hover-border-color: var(--cp-sun-deep-hover);
    --bs-btn-active-bg: #6B3A03;
    --bs-btn-active-border-color: #6B3A03;
    --bs-btn-disabled-bg: #C9B49B;
    --bs-btn-disabled-border-color: #C9B49B;
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: #fff;
    min-height: 40px;
}

.btn-outline-primary {
    --bs-btn-color: var(--cp-sun-deep);
    --bs-btn-border-color: #E4C79A;
    --bs-btn-hover-bg: var(--cp-sun-wash);
    --bs-btn-hover-border-color: var(--cp-sun-deep);
    --bs-btn-hover-color: var(--cp-sun-deep);
    --bs-btn-active-bg: var(--cp-sun-wash);
    --bs-btn-active-color: var(--cp-sun-deep);
    min-height: 40px;
}

.text-primary { color: var(--cp-sun-deep) !important; }
.link-primary { color: var(--cp-sun-deep) !important; }

/* 语义按钮：Bootstrap 原色做底会把白字压到 4.5:1 以下
   （btn-success #198754 / btn-danger #DC3545 的白字都只有 3.8–4.3:1），
   这里换成同族更深一档的底，语义不变、对比达标。
   btn-warning 本来就是深字浅底（约 8.9:1），保持不动。 */
.btn-success {
    --bs-btn-bg: #2F6F4A;
    --bs-btn-border-color: #2F6F4A;
    --bs-btn-hover-bg: #275C3D;
    --bs-btn-hover-border-color: #275C3D;
    --bs-btn-active-bg: #204D33;
    --bs-btn-active-border-color: #204D33;
    --bs-btn-disabled-bg: #9DBFAC;
    --bs-btn-disabled-border-color: #9DBFAC;
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: #fff;
}
.btn-danger {
    --bs-btn-bg: #A83620;
    --bs-btn-border-color: #A83620;
    --bs-btn-hover-bg: #8E2B18;
    --bs-btn-hover-border-color: #8E2B18;
    --bs-btn-active-bg: #7A2413;
    --bs-btn-active-border-color: #7A2413;
    --bs-btn-disabled-bg: #D3A79C;
    --bs-btn-disabled-border-color: #D3A79C;
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: #fff;
}
/* 描边版危险按钮：浅底深字，同样不写 outline:none */
.btn-outline-danger {
    --bs-btn-color: #A83620;
    --bs-btn-border-color: #E7BDB3;
    --bs-btn-hover-bg: var(--cp-clay-wash);
    --bs-btn-hover-border-color: #A83620;
    --bs-btn-hover-color: #8E2B18;
    --bs-btn-active-bg: var(--cp-clay-wash);
    --bs-btn-active-color: #8E2B18;
    min-height: 40px;
}

/* ---------- 文本语义色：把 Bootstrap 原色换到达标值 ----------
   Bootstrap 的 .text-warning(#FFC107) / .text-success(#198754) / .text-info(#0DCAF0) /
   .text-danger(#DC3545) 在暖白底上分别只有 2.2 / 3.8 / 1.9 / 4.3 : 1，
   而后台页面里 .text-warning 常用在 .card-header 上，直接就是白底黄字。
   这里统一换成同族更深一档的墨色（都带 !important，与 Bootstrap 工具类的机制一致）。 */
.text-warning { color: #7A4A03 !important; }                 /* 7.5:1 */
.text-success { color: #2F6F4A !important; }                 /* 6.0:1 */
.text-danger  { color: #A83620 !important; }                 /* 6.6:1 */
.text-info    { color: #3F7FB0 !important; }                 /* 4.6:1 */
.text-secondary { color: var(--cp-ink-soft) !important; }    /* 6.1:1（Bootstrap 是半透明黑，暖底上会偏灰蓝） */
.text-body, .text-dark { color: var(--cp-ink) !important; }

/* ---------- .badge-soft 语义底色（style.css 里浅底深字）----------
   style.css 的 .badge-orange(#A9660C on #FFF3DE) 只有 4.16:1，
   差一点没到 4.5:1；这里把它与整套徽章统一收到暖色令牌上（`!important` 是为了
   压过 style.css，它的规则与 .badge-soft 单类选择器同权重、靠加载顺序取胜）。 */
.badge-soft { border-radius: var(--cp-r-pill); font-weight: 600; }
.badge-orange { background: var(--cp-sun-wash)    !important; color: #8A5205 !important; } /* 5.6:1 */
.badge-green  { background: var(--cp-sprout-wash) !important; color: #26603F !important; } /* 7.2:1 */
.badge-red    { background: var(--cp-clay-wash)   !important; color: #8E3419 !important; } /* 7.8:1 */
.badge-blue   { background: var(--cp-sky-wash)    !important; color: #22587F !important; } /* 7.6:1 */
.badge-cyan   { background: var(--cp-sky-wash)    !important; color: #1E6B66 !important; } /* 6.3:1 */
.badge-purple { background: #F1ECFC !important; color: #5B3FA6 !important; }               /* 7.4:1 */
.badge-gray   { background: #F2EFEA !important; color: #5A4F43 !important; }               /* 7.1:1 */

/* 后台里的小按钮也要能点得中 */
.btn { border-radius: var(--cp-r-sm); }
.btn-sm { min-height: 34px; }
@media (pointer: coarse) { .btn-sm { min-height: 44px; } }

/* ---------- 卡片 ---------- */
.card {
    border: 1.5px solid var(--cp-line);
    border-radius: var(--cp-r-lg);
    background: #fff;
    box-shadow: var(--cp-elev-1);
}
.card-header {
    background: var(--cp-canvas-warm);
    border-bottom: 1.5px solid var(--cp-line);
    font-weight: 700;
    color: var(--cp-ink);
    border-radius: var(--cp-r-lg) var(--cp-r-lg) 0 0 !important;
}
.card-footer { background: var(--cp-canvas-warm); border-top: 1.5px solid var(--cp-line); }
.card-body { color: var(--cp-ink); }

/* ---------- 表格：后台最密集的界面 ---------- */
.table {
    --bs-table-border-color: var(--cp-line-soft);
    --bs-table-hover-bg: var(--cp-canvas-warm);
    color: var(--cp-ink);
    margin-bottom: 0;
}
.table > thead > tr > th {
    background: var(--cp-canvas-warm);
    color: var(--cp-ink-soft);
    font-weight: 700;
    font-size: var(--cp-fs-sm);
    border-bottom: 1.5px solid var(--cp-line);
    white-space: nowrap;
}
.table > tbody > tr > td,
.table > tbody > tr > th {
    vertical-align: middle;
    padding: var(--cp-s3) var(--cp-s3);
}
.table > tbody > tr > td { color: var(--cp-ink-soft); }
.table > tbody > tr > td strong,
.table > tbody > tr > td b { color: var(--cp-ink); }
/* 表格里的次要说明文字不要过浅 */
.table .text-muted, .text-muted { color: var(--cp-ink-faint) !important; }
.table-responsive { border-radius: var(--cp-r-md); }

/* 【修复】不少列表页的 <table> 没有包在 .table-responsive 里，
   窄屏下会把整页撑出横向滚动（实测代理端 390px 越界 306px）。
   这里给未包装的表格兜一层：小屏下自身可横向滚动，页面不再溢出。 */
@media (max-width: 767.98px) {
    .card > .table,
    .card-body > .table,
    main > .table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
}

/* 卡片头部的小链接：默认行高只有 23px，够不到 24×24 的下限 */
.card-header a,
.card-header .btn-link {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
}
@media (pointer: coarse) {
    .card-header a,
    .card-header .btn-link { min-height: 44px; }
}

/* ---------- 徽章：改成深字浅底的语义色（原白字压亮色不达标） ----------
   注：浅底上的文字要用"深色版"，不能直接用 --cp-*-ink（那是白底口径）。
   这里每一组都在自己的浅底上复算过，均 ≥ 5.8:1。 */
.badge {
    font-weight: 600;
    border-radius: var(--cp-r-pill);
    padding: .35em .75em;
}
.badge.bg-primary, .badge.text-bg-primary { background: var(--cp-sun-wash) !important; color: #8A5205 !important; }
.badge.bg-success, .badge.text-bg-success { background: var(--cp-sprout-wash) !important; color: #26603F !important; }
.badge.bg-info,    .badge.text-bg-info    { background: var(--cp-sky-wash) !important;    color: #22587F !important; }
.badge.bg-danger,  .badge.text-bg-danger  { background: var(--cp-clay-wash) !important;   color: #9E3B22 !important; }
.badge.bg-warning, .badge.text-bg-warning { background: var(--cp-sun-wash) !important;    color: #8A5205 !important; }
.badge.bg-secondary, .badge.text-bg-secondary { background: #F0EDE7 !important; color: #4A4137 !important; }
/* 同一套语义色在 .badge-soft（style.css 自定义类）上也要生效 */
.badge-soft.badge-green, .badge-soft.badge-success { background: var(--cp-sprout-wash) !important; color: #26603F !important; }
.badge-soft.badge-blue,  .badge-soft.badge-info    { background: var(--cp-sky-wash) !important;    color: #22587F !important; }
.badge-soft.badge-purple { background: #EFE9FA !important; color: #523B85 !important; }
.badge-soft.badge-red,   .badge-soft.badge-danger  { background: var(--cp-clay-wash) !important;   color: #9E3B22 !important; }
.badge-soft.badge-orange,.badge-soft.badge-warning { background: var(--cp-sun-wash) !important;    color: #8A5205 !important; }
.badge-soft.badge-cyan   { background: #E4F3F4 !important; color: #1F6E78 !important; }

/* ---------- 表单控件：与 C 端 .cp-field 同一手感 ---------- */
.form-control, .form-select {
    min-height: 44px;
    border: 1.5px solid var(--cp-line);
    border-radius: var(--cp-r-md);
    color: var(--cp-ink);
    background-color: #fff;
}
.form-control:focus, .form-select:focus {
    border-color: var(--cp-sun);
    box-shadow: 0 0 0 4px rgba(240, 166, 60, .16);
}
.form-control-sm, .form-select-sm { min-height: 38px; border-radius: var(--cp-r-sm); }
.form-label { color: var(--cp-ink); font-weight: 600; }
.form-text { color: var(--cp-ink-faint); }
.form-check-input:checked { background-color: var(--cp-sun-deep); border-color: var(--cp-sun-deep); }
/* 单/复选框默认 16×16，低于 WCAG 2.5.8 的 24×24 下限（虽然 label 也可点，
   但控件本体过小对触屏和运动障碍用户不友好）。 */
.form-check-input { width: 24px; height: 24px; margin-top: .1em; flex: 0 0 auto; }
.form-check { padding-left: 2em; min-height: 32px; display: flex; align-items: center; gap: var(--cp-s2); }
.form-check .form-check-input { margin-left: -2em; }
.form-check-label { cursor: pointer; }

/* ---------- 导航（后台的侧栏 / 顶部胶囊） ---------- */
.app-side {
    background: #fff;
    border-right: 1.5px solid var(--cp-line);
}
.app-side .nav-link { color: var(--cp-ink-soft); border-radius: var(--cp-r-sm); font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.app-side .nav-link:hover { background: var(--cp-sun-wash); color: var(--cp-sun-deep); }
.app-side .nav-link.active { background: var(--cp-sun-wash); color: var(--cp-sun-deep); }

.nav-tabs { border-bottom: 1.5px solid var(--cp-line); }
.nav-tabs .nav-link {
    color: var(--cp-ink-soft);
    font-weight: 600;
    min-height: 44px;
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
}
.nav-tabs .nav-link:hover { color: var(--cp-sun-deep); border-bottom-color: #E4C79A; }
.nav-tabs .nav-link.active {
    color: var(--cp-sun-deep);
    background: transparent;
    border-bottom-color: var(--cp-sun);
}
.nav-pills .nav-link { min-height: 44px; display: inline-flex; align-items: center; color: var(--cp-ink-soft); font-weight: 600; }
.nav-pills .nav-link.active { background: var(--cp-sun-deep); color: #fff; }
.dropdown-menu {
    border: 1.5px solid var(--cp-line);
    border-radius: var(--cp-r-md);
    box-shadow: var(--cp-elev-2);
    padding: var(--cp-s2);
}
.dropdown-item { border-radius: var(--cp-r-sm); min-height: 40px; display: flex; align-items: center; color: var(--cp-ink-soft); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--cp-sun-wash); color: var(--cp-sun-deep); }
.dropdown-item.active, .dropdown-item:active { background: var(--cp-sun-deep); color: #fff; }

/* ---------- 提示条：深字浅底 ---------- */
.alert { border-radius: var(--cp-r-md); border-width: 1.5px; }
.alert-success { background: var(--cp-sprout-wash); border-color: #BFE3CE; color: #26603F; }
.alert-info    { background: var(--cp-sky-wash);    border-color: #C3DDF3; color: #22587F; }
.alert-warning { background: var(--cp-sun-wash);    border-color: #F0D6A8; color: #7A4A03; }
.alert-danger  { background: var(--cp-clay-wash);   border-color: #F1C9BC; color: #8E3419; }
.alert-secondary { background: #F4F1EC; border-color: #E3DCD2; color: #5A4F43; }

/* ---------- 统计卡片（style.css 里的 .stat-card 系列） ---------- */
.stat-card {
    background: #fff;
    border: 1.5px solid var(--cp-line);
    border-radius: var(--cp-r-lg);
    box-shadow: var(--cp-elev-1);
}
.stat-card .stat-num, .stat-card h3, .stat-card .h3 { color: var(--cp-ink); }
.stat-card .label { color: var(--cp-ink-faint); }

/* 【修复】原实现直接拿左边的色条色 --sc 当数字颜色，白底上只有 2.17:1；
   而 .countdown-num 更写死了 color:#fff，压在白色卡片上等于隐形（实测 1:1）。
   这里保留 --sc 做左侧色条，数字改用同色系的深色（全部 ≥ 5.9:1）。
   用 !important 是因为页面里存在内联 color:#fff，需要覆盖它。 */
.stat-card.stat-blue   .num, .stat-card.stat-blue   .countdown-num { color: #22587F !important; }
.stat-card.stat-green  .num, .stat-card.stat-green  .countdown-num { color: #26603F !important; }
.stat-card.stat-orange .num, .stat-card.stat-orange .countdown-num { color: #8A5205 !important; }
.stat-card.stat-red    .num, .stat-card.stat-red    .countdown-num { color: #8E3419 !important; }
.stat-card.stat-purple .num, .stat-card.stat-purple .countdown-num { color: #523B85 !important; }
.stat-card.stat-cyan   .num, .stat-card.stat-cyan   .countdown-num { color: #1F6E78 !important; }
/* 没有配色类时的兜底 */
.stat-card .num, .stat-card .countdown-num { color: var(--cp-ink); }

/* ---------- 分页 / 标签 / 列表组 ---------- */
.pagination { --bs-pagination-color: var(--cp-sun-deep); --bs-pagination-hover-color: var(--cp-sun-deep-hover); --bs-pagination-hover-bg: var(--cp-sun-wash); --bs-pagination-active-bg: var(--cp-sun-deep); --bs-pagination-active-border-color: var(--cp-sun-deep); --bs-pagination-border-color: var(--cp-line); }
.page-link { min-height: 40px; min-width: 40px; display: inline-flex; align-items: center; justify-content: center; }
.list-group-item { border-color: var(--cp-line-soft); color: var(--cp-ink-soft); }
.list-group-item.active { background: var(--cp-sun-deep); border-color: var(--cp-sun-deep); }

/* ---------- 模态框 ---------- */
.modal-content { border: 1.5px solid var(--cp-line); border-radius: var(--cp-r-lg); }
.modal-header { background: var(--cp-canvas-warm); border-bottom: 1.5px solid var(--cp-line); border-radius: var(--cp-r-lg) var(--cp-r-lg) 0 0; }
.modal-footer { border-top: 1.5px solid var(--cp-line); }

/* ---------- 后台侧栏/内容区容器 ---------- */
.bg-light, .bg-body-tertiary { background-color: var(--cp-canvas-warm) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--cp-line) !important; }
hr { border-color: var(--cp-line); opacity: 1; }
code, kbd, pre { color: #8E3419; background: var(--cp-canvas-warm); border-radius: var(--cp-r-sm); padding: 1px 6px; }
pre code { padding: 0; }

/* ============================================================
   门户外壳（audit / customer_service / service 三个 _header.php 共用）
   ------------------------------------------------------------
   这三个门户原先各自内联侧栏导航，本层配合新建的 _header.php：
     · 顶栏复用 C 端 .cp-topnav 的观感（吸顶 + 毛玻璃）
     · 内容区用 .cp-console-body 提供统一留白与最大宽度
     · 页脚用 .cp-foot
   只写新增类，不动上面已有的皮肤。
   ============================================================ */

.cp-console {
    background: var(--cp-canvas);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.cp-console-body {
    flex: 1 1 auto;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--cp-s8) var(--cp-s4) var(--cp-s12);
}
/* 登录页等窄栏内容 */
.cp-console-narrow { max-width: 560px; }

@media (max-width: 767.98px) {
    .cp-console-body { padding: var(--cp-s6) var(--cp-s4) var(--cp-s10); }
}
/* 触屏与窄屏下导航整行排列，命中区保持 44px */
@media (max-width: 991.98px) {
    .cp-topnav .navbar-nav { gap: var(--cp-s1); padding: var(--cp-s2) 0; }
    .cp-topnav .cp-user { width: 100%; justify-content: space-between; padding: var(--cp-s2) 0 0; }
}
.cp-topnav .cp-user {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cp-s2);
}

/* 门户页脚：比 C 端轻，一行版权 + 业务口径说明 */
.cp-foot {
    border-top: 1.5px solid var(--cp-line);
    background: var(--cp-canvas-warm);
    padding: var(--cp-s5) var(--cp-s4);
    text-align: center;
    color: var(--cp-ink-soft);
    font-size: var(--cp-fs-sm);
}
.cp-foot p { margin: 0 0 var(--cp-s1); }
.cp-foot p:last-child { margin-bottom: 0; }
.cp-foot a { color: var(--cp-sun-deep); }

/* 门户里的小节标题（取代原先的卡片 title 写法） */
.cp-block-title {
    display: flex;
    align-items: center;
    gap: var(--cp-s2);
    margin: 0 0 var(--cp-s4);
    font-size: var(--cp-fs-md);
    font-weight: 700;
    color: var(--cp-ink);
}

/* 表格贴在 .cp-card 里时，不要顶到圆角外 */
.cp-card > .table-responsive { margin: 0 calc(var(--cp-s1) * -1); }

/* 定义列表（工单详情的关键信息：左标签右值，窄屏自动换行） */
.cp-dl {
    display: grid;
    grid-template-columns: 132px 1fr;
    gap: var(--cp-s2) var(--cp-s4);
    margin: 0;
    font-size: var(--cp-fs-sm);
}
.cp-dl dt { color: var(--cp-ink-soft); font-weight: 600; }
.cp-dl dd { margin: 0; color: var(--cp-ink); word-break: break-word; }
@media (max-width: 575.98px) {
    .cp-dl { grid-template-columns: 1fr; gap: var(--cp-s1); }
    .cp-dl dd { margin-bottom: var(--cp-s3); }
}

/* ---------- 会话时间线（客服端 msg_detail.php） ---------- */
.cp-thread {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--cp-s4);
}
.cp-thread-item {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: var(--cp-s4);
    align-items: start;
}
.cp-thread-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--cp-r-pill);
    display: grid;
    place-items: center;
    background: var(--cp-sun-wash);
    color: var(--cp-sun-deep);
    font-size: var(--cp-fs-sm);
    font-weight: 700;
}
/* 头像里的首字是文字，必须 ≥ 4.5:1：
   --cp-sprout-ink(#4E8E66) 在 --cp-sprout-wash 上只有 3.5:1、
   --cp-sky-ink(#3F7FB0) 在 --cp-sky-wash 上只有 3.8:1，所以这里各深一档。 */
.cp-thread-item.is-service .cp-thread-avatar { background: var(--cp-sprout-wash); color: #2F6F4A; }  /* 5.1:1 */
.cp-thread-item.is-platform .cp-thread-avatar { background: var(--cp-sky-wash); color: #2C6491; }     /* 5.3:1 */
/* 用户侧发言：暖白底 + 阳光字，与客服 / 平台两侧区分 */
.cp-thread-item.is-user .cp-thread-avatar { background: var(--cp-canvas-warm); color: var(--cp-ink-soft); }
.cp-thread-body {
    background: var(--cp-canvas-warm);
    border: 1.5px solid var(--cp-line);
    border-radius: var(--cp-r-md);
    padding: var(--cp-s4);
}
.cp-thread-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--cp-s2);
    margin-bottom: var(--cp-s2);
}
.cp-thread-who { font-weight: 700; color: var(--cp-ink); }
.cp-thread-when { color: var(--cp-ink-faint); font-size: var(--cp-fs-sm); }
/* 平台终审那一条是浅蓝底：--cp-ink-faint 压在 --cp-sky-wash 上只有 4.36:1，深一档到 5.4:1 */
.cp-thread-item.is-platform .cp-thread-when { color: var(--cp-ink-soft); }
.cp-thread-text { margin: 0; white-space: pre-wrap; color: var(--cp-ink-soft); }
.cp-thread-item.is-platform .cp-thread-body { background: var(--cp-sky-wash); border-color: #C3DDF3; }

/* 空状态里的引导气泡：去掉多余下边距，避免卡片底部空一块 */
.cp-guide.is-flush { margin-bottom: 0; }
.cp-actions { display: flex; flex-wrap: wrap; gap: var(--cp-s3); }
.cp-actions .cp-btn { flex: 1 1 160px; }

/* ============================================================
   页脚合规信息（全站统一）
   ------------------------------------------------------------
   承载中国大陆经营性网站的必需展示项：
     · 经营主体与地址
     · ICP 备案号（链接工信部备案系统）
     · 公安联网备案号（链接全国互联网安全管理服务平台）
     · 增值电信业务经营许可证号
     · 对外联系方式
   由 function.php 的 site_legal_footer() 生成，
   C 端 / 用户中心 / 三个门户 / 总后台共用这一套样式。
   ============================================================ */
.cp-legal {
    margin-top: var(--cp-s6);
    padding-top: var(--cp-s4);
    border-top: 1px solid var(--cp-line-soft);
    font-size: var(--cp-fs-sm);
    line-height: 1.85;
    color: var(--cp-ink-faint);
    text-align: center;
}
.cp-legal p { margin: 0 0 var(--cp-s1); }
.cp-legal p:last-child { margin-bottom: 0; }
.cp-legal a {
    color: var(--cp-ink-soft);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    /* 行内元素的盒子高度随字号浮动，实测只有 20px，够不到 WCAG 2.5.8 的 24×24；
       改成 inline-block + min-height 让点击区有确定下限（不依赖断点）。 */
    display: inline-block;
    min-height: 24px;
    padding: 1px 2px;
}
.cp-legal a:hover { color: var(--cp-sun-deep); border-bottom-color: currentColor; }
.cp-legal a:focus-visible { outline: 3px solid var(--cp-sun); outline-offset: 2px; border-radius: 3px; }
.cp-legal-name { font-weight: 600; color: var(--cp-ink-soft); }
/* 备案号/许可证这类法定展示项给足对比度，不要用更浅的灰 */
.cp-legal-filing { color: var(--cp-ink-faint); }
/* 窄屏：再放大到触屏建议的 44px（仅备案号那行比较宽松，不会把行距撑得太散） */
@media (max-width: 767.98px) {
    .cp-legal a { min-height: 44px; display: inline-flex; align-items: center; }
}