/* =============================================================================
 * theme.css — 优品订阅卡配色（与 App uni.scss 设计系统统一）
 *
 * 只覆盖颜色（背景 / 文字 / 描边 / 阴影色），不改布局、字号与交互。
 * 全站启用：在 custom.css 及各页面 css（article / faq / cards / reg）之后加载，
 * 见 layouts/common.php。
 * 取值：Royal Amethyst（品牌紫）+ Champagne Gold（少量点缀），
 * 网站以浅色为主：原深色大区块全部改为白 / 浅紫灰底，紫色仅用于按钮、图标、强调文字。
 * 部分模板里写了内联色值（eyebrow、头像、页脚 logo），此处用 !important 覆盖。
 * ============================================================================= */

:root {
    /* 品牌紫（对应 $brand-*） */
    --primary: #6338C4;        /* $brand-500 */
    --primary-dark: #4E2FA3;   /* $brand-600 */
    --primary-light: #814FE0;  /* $brand-400 */
    /* 原「强调色」变量：浅底上统一为品牌紫，保证可读 */
    --gold: #6338C4;
    --gold-light: #6338C4;
    /* 原深色变量：只在文字上使用时等价于 $text-strong，深色背景在下方逐一改浅 */
    --dark: #1A1526;           /* $text-strong */
    --dark-2: #2A2435;         /* $text-primary */
    --mid: #6B6478;            /* $text-secondary */
    --light-bg: #F6F4FA;       /* $bg-page */
    --white: #FFFFFF;
    --text: #2A2435;           /* $text-primary */
    --text-muted: #6B6478;     /* $text-secondary */
    --border: #E4E0EC;         /* $border-card */
    --border-light: #EAE7F0;   /* $border-hairline */
    --shadow: 0 2px 8px rgba(43, 24, 87, 0.05), 0 10px 28px rgba(43, 24, 87, 0.06);  /* $shadow-card */
    --shadow-deep: 0 14px 34px rgba(43, 24, 87, 0.10);

    /* 新增：本文件内部使用的设计系统 token */
    --brand-50: #F6F2FC;
    --brand-100: #EDE6FA;
    --brand-200: #D3C4F2;
    --brand-700: #3D2482;
    --gold-400: #DCB65E;
    --gold-500: #C79A3E;
    --gold-100: #F8EED3;
    --text-weak: #9A93A8;
    --surface-2: #F0EDF6;
    --gold-600: #A67F2A;
    --gold-ink: #3A2A08;
    --success: #2E9E6B;
    --success-soft: #E6F5EE;
}

body {
    background: var(--light-bg);
}

/* ===== 通用 ===== */
.section-dark {
    background: var(--white);
    color: var(--text);
}

.section-dark .section-header h2 {
    color: var(--dark);
}

.section-dark .section-header p {
    color: var(--text-muted);
}

.section-header .eyebrow {
    color: var(--primary) !important;
    background: var(--brand-50) !important;
}

/* 主按钮：品牌紫实色（对应 App 主按钮） */
.btn-primary,
.btn-gold {
    background: var(--primary);
    color: var(--white);
}

.btn-primary:hover,
.btn-gold:hover {
    background: var(--primary-dark);
    box-shadow: 0 6px 16px rgba(99, 56, 196, 0.28);  /* $shadow-btn */
}

.btn-outline {
    border-color: var(--brand-200);
    color: var(--primary);
    background: var(--white);
}

.btn-outline:hover {
    background: var(--brand-50);
    border-color: var(--primary);
}

/* ===== 顶部公告条：浅紫底 ===== */
.announcement {
    background: var(--brand-50);
    animation: none;
    color: var(--primary-dark);
    border-bottom: 1px solid var(--brand-100);
}

.announcement a {
    color: var(--primary);
    font-weight: 600;
}

/* ===== 导航 ===== */
header {
    border-bottom-color: var(--border-light);
}

header.scrolled {
    box-shadow: 0 2px 12px rgba(43, 24, 87, 0.05);  /* $shadow-tabbar */
}

.logo-icon {
    background: var(--primary);
    box-shadow: none;
}

.nav-links a:hover {
    background: var(--brand-50);
    color: var(--primary);
}

.hamburger span {
    background: var(--dark);
}

/* ===== HERO：浅色渐变（$grad-header-soft），去掉深色大底 ===== */
.hero {
    background: linear-gradient(180deg, #F1EAFB 0%, #F6F4FA 100%);
}

.hero-bg {
    background: radial-gradient(ellipse 50% 70% at 75% 45%, rgba(99, 56, 196, 0.08) 0%, transparent 60%);
}

.hero-decor {
    border-color: rgba(99, 56, 196, 0.10);
}

.hero-decor::after {
    border-color: rgba(99, 56, 196, 0.06);
}

.hero-badge {
    background: var(--white);
    border-color: var(--brand-200);
    color: var(--primary);
}

.hero-title {
    color: var(--dark);
}

.hero-title .highlight {
    color: var(--primary);
}

.hero-title .highlight::after {
    background: var(--gold-400);
    opacity: 0.7;
}

.hero-desc {
    color: var(--text-muted);
}

.hero-stats {
    border-top-color: var(--border);
}

.stat strong {
    color: var(--dark);
}

.stat strong em {
    color: var(--primary);
}

.stat span {
    color: var(--text-muted);
}

/* 卡面：保留紫色卡面（小面积），对应 $grad-card-virtual */
.card-visual {
    background: linear-gradient(135deg, #6E43D6 0%, #3D2482 60%, #2B1857 100%);
    box-shadow: 0 14px 34px rgba(20, 10, 40, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.card-visual::after {
    background: rgba(220, 182, 94, 0.10);
}

.card-chip {
    background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
}

/* ===== 信任条 ===== */
.trust-bar {
    border-bottom-color: var(--border-light);
}

.trust-item i {
    color: var(--primary);
}

/* ===== 关于我们：数据面板改浅色 ===== */
.about-img-inner {
    background: var(--brand-50);
    border: 1px solid var(--brand-100);
}

.about-img-inner::before {
    background: radial-gradient(ellipse at 30% 30%, rgba(99, 56, 196, 0.06) 0%, transparent 60%);
}

.about-icon-main {
    color: rgba(99, 56, 196, 0.06);
}

.about-card-mini {
    background: var(--white);
    border-color: var(--border);
    box-shadow: var(--shadow);
}

.about-card-mini i {
    color: var(--primary);
}

.about-card-mini strong {
    color: var(--dark);
}

.about-card-mini span {
    color: var(--text-muted);
}

.about-badge {
    background: var(--gold-400);
    color: #3A2A08;  /* $gold-ink */
    box-shadow: 0 6px 16px rgba(199, 154, 62, 0.32);  /* $shadow-accent */
}

.about-points li {
    border-bottom-color: var(--border-light);
}

.about-points li i {
    color: var(--primary);
}

/* ===== 六大优势 ===== */
.why-card {
    border-color: var(--border);
}

.why-card::before {
    background: var(--primary);
}

.why-icon {
    background: var(--brand-50);
}

.why-icon i {
    color: var(--primary);
}

/* ===== 卡片种类（原深色） ===== */
.products-dark .product-card {
    background: var(--white);
    border: 1px solid var(--border);
}

.products-dark .product-card:hover {
    border-color: var(--brand-200);
    box-shadow: var(--shadow-deep);
}

.product-card-top {
    background: var(--brand-50);
    border-bottom: 1px solid var(--brand-100);
}

.product-card-top::after {
    background: rgba(99, 56, 196, 0.05);
}

.tag-plus {
    background: var(--white);
    color: var(--primary);
    border: 1px solid var(--brand-200);
}

.product-card-top h3 {
    color: var(--dark);
}

.product-card-top p {
    color: var(--text-muted);
}

.product-price .amount {
    color: var(--primary);
}

.product-price .unit {
    color: var(--text-muted);
}

.products-dark .product-scene {
    color: var(--text-weak);
}

.products-dark .product-features li {
    color: var(--text);
    border-bottom-color: var(--border-light);
}

.products-dark .product-features li i,
.product-features li i {
    color: var(--primary);
}

.products-note {
    color: var(--text-muted);
}

.products-note a {
    color: var(--primary);
}

/* ===== 面向企业（原深色） ===== */
.section-enterprise {
    background: var(--light-bg);
    border-top: 1px solid var(--border-light);
}

.ent-item {
    background: var(--white);
    border-color: var(--border);
}

.ent-item:hover {
    border-color: var(--brand-200);
    box-shadow: var(--shadow);
}

.ent-icon {
    background: var(--brand-50);
    color: var(--primary);
}

.ent-item h4 {
    color: var(--dark);
}

.ent-item p {
    color: var(--text-muted);
}

/* ===== 办理流程 ===== */
.process-steps::before {
    background: linear-gradient(90deg, var(--border), var(--brand-200), var(--border));
}

.step-num {
    border-color: var(--border);
}

.step-num i {
    color: var(--primary);
}

.process-step:hover .step-num {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 0 0 8px var(--brand-50);
}

.step-index {
    background: var(--primary);
}

.process-step h4 {
    color: var(--dark);
}

/* ===== 用户评价（原深色） ===== */
#testimonials {
    background: var(--light-bg);
}

.testimonial {
    background: var(--white);
    border-color: var(--border);
}

.testimonial:hover {
    background: var(--white);
    box-shadow: var(--shadow);
}

.testimonial-stars {
    color: var(--gold-500);
}

.testimonial p {
    color: var(--text);
}

.author-avatar {
    background: var(--brand-100) !important;
    color: var(--primary) !important;
}

.author-info strong {
    color: var(--dark);
}

.author-info span {
    color: var(--text-weak);
}

/* ===== 常见问题 ===== */
#faq {
    background: var(--white);
}

.faq-item {
    border-color: var(--border);
}

.faq-question {
    color: var(--dark);
}

.faq-question:hover {
    background: var(--brand-50);
}

.faq-question.active {
    color: var(--primary);
    background: var(--brand-50);
}

.faq-question i {
    color: var(--primary);
}

.faq-answer-inner {
    border-top-color: var(--border-light);
}

.faq-answer-inner a {
    color: var(--primary);
}

/* ===== 下载 CTA：浅紫底卡片，去掉深色大块 ===== */
#apply {
    background: var(--light-bg);
}

.cta-banner {
    background: var(--brand-50);
    border: 1px solid var(--brand-100);
}

.cta-banner::before {
    background: rgba(99, 56, 196, 0.05);
}

.cta-banner::after {
    background: rgba(220, 182, 94, 0.10);
}

.cta-banner h2 {
    color: var(--dark);
}

.cta-banner p {
    color: var(--text-muted);
}

/* ===== 合作伙伴（原深色） ===== */
.partner-logo {
    background: var(--white);
    border-color: var(--border);
    color: var(--text-muted);
}

.partner-logo:hover {
    color: var(--primary);
    border-color: var(--brand-200);
}

/* ===== 联系我们 ===== */
#contact {
    background: var(--light-bg);
}

.contact-grid {
    background: var(--white);
    border-color: var(--border);
}

.contact-list li {
    border-bottom-color: var(--border-light);
}

.contact-icon {
    background: var(--brand-50);
}

.contact-icon i {
    color: var(--primary);
}

.contact-list strong {
    color: var(--text-muted);
}

.contact-list span {
    color: var(--dark);
}

/* ===== 页脚：浅色 ===== */
footer {
    background: var(--white);
    color: var(--text-muted);
    border-top: 1px solid var(--border);
}

footer .logo-text strong {
    color: var(--dark) !important;
}

.social-btn {
    background: var(--surface-2);
    border-color: var(--border-light);
    color: var(--text-muted);
}

.social-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

.footer-col h5 {
    color: var(--dark);
}

.footer-col ul li a {
    color: var(--text-muted);
}

.footer-col ul li a:hover {
    color: var(--primary);
}

.footer-bottom {
    border-top-color: var(--border-light);
    color: var(--text-weak);
}

.footer-icp a {
    color: var(--text-weak);
}

.footer-icp a:hover {
    color: var(--primary);
}

/* ===== 返回顶部 ===== */
.back-top {
    background: var(--primary);
    box-shadow: 0 4px 14px rgba(43, 24, 87, 0.14);  /* $shadow-float */
}

.back-top:hover {
    background: var(--primary-dark);
}

/* ===== 移动端菜单 ===== */
.mobile-nav a {
    border-bottom-color: var(--border-light);
}

.mobile-nav a i {
    color: var(--primary);
}

/* =============================================================================
 * 以下为首页以外页面
 * ============================================================================= */

/* ===== 首页同款模块（订阅卡专题 / 企业页复用） ===== */
.article-img,
.article-mini-img {
    background: var(--brand-50);
}

.article-img,
.article-img-icon,
.article-mini-img i {
    color: rgba(99, 56, 196, 0.18);
}

.article-cat {
    background: var(--primary);
}

.tag-item:hover {
    background: var(--primary);
    border-color: var(--primary);
}

/* ===== 列表页 / 问答列表页 顶部横幅（article.css / faq.css 的 .page-hero） ===== */
.page-hero {
    background: linear-gradient(180deg, #F1EAFB 0%, #F6F4FA 100%);
    border-bottom: 1px solid var(--border-light);
}

.page-hero::before {
    background: radial-gradient(ellipse 50% 100% at 80% 50%, rgba(99, 56, 196, 0.07) 0%, transparent 60%);
}

.page-hero-label,
.page-hero .hero-eyebrow {
    background: var(--white);
    border-color: var(--brand-200);
    color: var(--primary);
}

.page-hero h1 {
    color: var(--dark);
}

.page-hero p {
    color: var(--text-muted);
}

.page-hero .seo-crumbs,
.page-hero .seo-crumbs a {
    color: var(--text-muted);
}

.hero-stat strong {
    color: var(--dark);
}

.hero-stat strong em {
    color: var(--primary);
}

.hero-stat span {
    color: var(--text-muted);
}

/* ===== 文章列表 ===== */
.cat-tab .count {
    background: var(--brand-50);
    color: var(--primary);
}

.featured-img,
.art-thumb,
.card-img,
.rel-thumb,
.art-cover {
    background: var(--brand-50);
}

.featured-img::before,
.art-thumb-overlay,
.card-img::before,
.art-cover::before {
    background: radial-gradient(ellipse at 40% 40%, rgba(99, 56, 196, 0.06) 0%, transparent 65%);
}

.featured-img i,
.art-thumb i,
.card-img i,
.rel-thumb i,
.art-cover i {
    color: rgba(99, 56, 196, 0.15);
}

.feat-hot {
    background: var(--gold-400);
    color: var(--gold-ink);
}

.pill-tips {
    background: var(--brand-50);
    color: var(--primary);
}

/* 热门排行序号：1 紫、2 金、3 浅紫 */
.hot-num.n1,
.n1 {
    background: var(--primary);
    color: var(--white);
}

.hot-num.n2,
.n2 {
    background: var(--gold-400);
    color: var(--gold-ink);
}

.hot-num.n3 {
    background: var(--brand-100);
    color: var(--primary);
}

.hot-num.other {
    background: var(--surface-2);
}

/* 文章页自带的简版页脚（若使用） */
.footer-inner p,
.footer-inner a {
    color: var(--text-weak);
}

.footer-inner a:hover {
    color: var(--primary);
}

/* ===== 文章详情 ===== */
.art-hero {
    background: linear-gradient(180deg, #F1EAFB 0%, #F6F4FA 100%);
    border-bottom: 1px solid var(--border-light);
}

.art-hero::before {
    background: radial-gradient(ellipse 55% 80% at 80% 60%, rgba(99, 56, 196, 0.07) 0%, transparent 60%);
}

.hero-cat {
    background: var(--primary);
    color: var(--white);
}

.hero-hot {
    background: var(--gold-100);
    color: var(--gold-600);
    border-color: rgba(199, 154, 62, 0.35);
}

.art-hero h1 {
    color: var(--dark);
}

.info-item {
    color: var(--text-muted);
}

.info-item i {
    color: var(--text-weak);
}

.art-hero .seo-crumbs,
.art-hero .seo-crumbs a,
.art-hero .seo-crumbs .cur,
.art-hero .seo-crumbs .sep {
    color: var(--text-muted);
}

.art-hero .seo-crumbs a:hover {
    color: var(--primary);
}

.read-progress {
    background: var(--primary);
}

.tag-pill:hover {
    background: var(--primary);
    border-color: var(--primary);
}

/* 正文表格：深色表头改浅紫 */
.table-wrap {
    border-color: var(--border);
}

.table-wrap table,
.table-wrap tbody td,
.table-wrap tbody td:nth-child(2) {
    color: var(--text);
}

.table-wrap thead tr {
    background: var(--brand-50);
}

.table-wrap thead td {
    color: var(--dark);
    border-bottom: 1px solid var(--brand-100);
}

.table-wrap thead td:first-child {
    color: var(--text-muted);
}

.table-wrap thead td:nth-child(2) {
    color: var(--primary);
}

.table-wrap thead td strong {
    color: var(--dark) !important;
}

.table-wrap tbody tr {
    border-bottom-color: var(--border-light);
}

.table-wrap tbody tr:hover,
.table-wrap tbody tr:nth-child(even):hover td {
    background: var(--brand-50);
}

.table-wrap tbody tr:nth-child(even) td {
    background: rgba(246, 244, 250, 0.6);
}

.table-wrap tbody td:first-child {
    color: var(--text-muted);
    background: var(--light-bg);
    border-right-color: var(--border-light);
}

.table-wrap tbody td:nth-child(2) {
    background: rgba(99, 56, 196, 0.03);
}

.table-wrap tbody tr:hover td:nth-child(2) {
    background: rgba(99, 56, 196, 0.06);
}

.table-wrap td strong {
    color: var(--dark);
}

/* ===== 问答页（faq.css） ===== */
.cat-money {
    background: var(--brand-50);
    color: var(--primary);
}

.callout-tip {
    background: var(--brand-50);
    border-color: var(--brand-100);
}

.callout-tip i,
.callout-tip p {
    color: var(--primary-dark);
}

.ans-badge {
    background: var(--primary);
    box-shadow: 0 3px 10px rgba(99, 56, 196, 0.22);
}

/* 侧栏下载卡：深色改浅紫 */
.cta-side {
    background: var(--brand-50);
    border: 1px solid var(--brand-100);
}

.cta-side::before {
    background: rgba(99, 56, 196, 0.06);
}

.cta-side i.main-icon {
    color: var(--primary);
}

.cta-side h4 {
    color: var(--dark);
}

.cta-side p {
    color: var(--text-muted);
}

.cta-btn-gold {
    background: var(--primary);
    color: var(--white);
}

.cta-btn-outline {
    border-color: var(--brand-200);
    color: var(--primary);
    background: var(--white);
}

.cta-btn-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* ===== 卡片页（cards.css） ===== */
.hero-cd {
    background: linear-gradient(180deg, #F1EAFB 0%, #F6F4FA 100%);
}

.hero-cd::before {
    background: radial-gradient(ellipse 60% 80% at 70% 60%, rgba(99, 56, 196, 0.07) 0%, transparent 60%);
}

.hero-cd .hero-eyebrow {
    background: var(--white);
    border-color: var(--brand-200);
    color: var(--primary);
}

.hero-cd h1 {
    color: var(--dark);
}

.hero-cd h1 em {
    color: var(--primary);
}

.hero-cd .hero-desc {
    color: var(--text-muted);
}

.hero-cd .seo-crumbs,
.hero-cd .seo-crumbs a {
    color: var(--text-muted);
}

.h-pill {
    background: var(--white);
    border-color: var(--border);
    color: var(--text);
}

.h-pill i {
    color: var(--primary);
}

.h-pill.hot {
    background: var(--gold-100);
    border-color: rgba(199, 154, 62, 0.35);
    color: var(--gold-600);
}

.h-pill.hot i {
    color: var(--gold-500);
}

.btn-ghost {
    border-color: var(--brand-200);
    color: var(--primary);
    background: var(--white);
}

.btn-ghost:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--brand-50);
}

/* 卡面保留深色（对应 App：虚拟卡紫色、实体卡黑色），属于小面积展示 */
.card-virtual,
.cdb-virtual {
    background: linear-gradient(135deg, #6E43D6 0%, #3D2482 60%, #2B1857 100%);
}

.card-physical,
.cdb-physical {
    background: linear-gradient(135deg, #2A2140 0%, #171325 55%, #0E0A18 100%);
}

.cf-chip {
    background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
}

.badge-physical {
    background: rgba(220, 182, 94, 0.18);
    color: var(--gold-400);
    border-color: rgba(220, 182, 94, 0.35);
}

.eyebrow-dark {
    background: var(--brand-50);
    color: var(--primary);
}

.cdb-row-val.green,
.compare .val-good {
    color: var(--success);
}

.cdb-row-val .tag-free {
    background: var(--success-soft);
    color: var(--success);
}

.cdb-row-val.gold,
.compare .val-mid {
    color: var(--gold-600);
}

.cdb-row-val .tag-pct {
    background: var(--brand-50);
    color: var(--primary);
}

.compare .val-bad {
    color: #D64545;
}

.btn-dark:hover {
    box-shadow: 0 6px 16px rgba(26, 21, 38, 0.2);
}

.sell-card::after {
    background: var(--primary);
}

/* 对比表：深色表头改浅紫 */
.compare thead tr {
    background: var(--brand-50);
}

.compare th {
    color: var(--dark);
}

.compare th:first-child {
    color: var(--text-muted);
}

.compare th.col-u {
    color: var(--primary);
}

.compare tbody tr:hover {
    background: var(--brand-50);
}

.compare .col-highlight {
    background: rgba(99, 56, 196, 0.04);
}

/* 用户评价 */
.review-card {
    background: var(--white);
    border-color: var(--border);
}

.review-card:hover {
    background: var(--white);
    box-shadow: var(--shadow);
}

.review-stars {
    color: var(--gold-500);
}

.review-text {
    color: var(--text);
}

.review-highlight {
    background: var(--brand-50);
    border-color: var(--brand-100);
    color: var(--primary);
}

.review-av {
    background: var(--brand-100) !important;
    color: var(--primary) !important;
}

.review-author strong {
    color: var(--dark);
}

.review-author span {
    color: var(--text-weak);
}

/* 底部 CTA */
.cta-section {
    background: var(--brand-50);
    border-top: 1px solid var(--brand-100);
}

.cta-section::before {
    background: radial-gradient(ellipse 60% 80% at 60% 50%, rgba(99, 56, 196, 0.06) 0%, transparent 60%);
}

.cta-inner h2 {
    color: var(--dark);
}

.cta-inner p {
    color: var(--text-muted);
}

.cta-note,
.cta-note i {
    color: var(--text-weak);
}

/* 模板内联了白色半透明按钮，这里覆盖为浅色描边按钮 */
.cta-buttons .btn:not(.btn-gold) {
    background: var(--white) !important;
    color: var(--primary) !important;
    border-color: var(--brand-200) !important;
}

/* 卡片页 Hero 内的信任条 */
.hero-cd .trust-bar,
.trust-bar {
    background: var(--white);
    border-top-color: var(--border-light);
}

.trust-item {
    color: var(--text-muted);
}

/* ===== 注册 / 下载页（reg.css） ===== */
.reg-btn-primary {
    background: var(--primary);
    box-shadow: 0 6px 16px rgba(99, 56, 196, 0.28);
}

.reg-done-icon {
    background: var(--brand-50);
}

.reg-dl:hover {
    background: var(--brand-50);
}

.reg-modal-mask {
    background: rgba(26, 21, 38, 0.48);  /* $overlay-scrim */
}

.dl-page {
    background: var(--light-bg);
    color: var(--text);
}

.dl-hero {
    background: linear-gradient(180deg, #F1EAFB 0%, #F6F4FA 100%);
}

.dl-eyebrow {
    background: var(--white);
    color: var(--primary);
    border: 1px solid var(--brand-200);
}

.dl-hero-text h1,
.dl-title h2,
.dl-step h4,
.dl-tip h3 {
    color: var(--dark);
}

.dl-hero-text p,
.dl-title p,
.dl-step p,
.dl-tip p {
    color: var(--text-muted);
}

.dl-btn {
    background: var(--white);
    border-color: var(--border);
    color: var(--dark);
}

.dl-btn:hover {
    border-color: var(--primary);
    background: var(--brand-50);
    color: var(--dark);
}

.dl-btn.disabled:hover {
    border-color: var(--border);
    background: var(--white);
}

.dl-btn i {
    color: var(--primary);
}

.dl-btn em {
    color: var(--text-weak);
}

/* 手机模型保留深色边框，屏幕改浅色 */
.dl-phone {
    background: var(--white);
    border-color: #1A1526;
    box-shadow: 0 0 0 2px rgba(26, 21, 38, 0.06), 0 14px 34px rgba(43, 24, 87, 0.14);
}

.dl-phone-empty {
    color: var(--text-weak);
}

.dl-phone-empty i,
.dl-step-icon,
.dl-tip-icon {
    color: var(--primary);
}

.dl-step {
    background: var(--white);
    border-color: var(--border);
}

.dl-step-icon,
.dl-tip-icon {
    background: var(--brand-50);
}

.dl-step-icon b {
    background: var(--primary);
    color: var(--white);
}

.dl-tip {
    background: var(--brand-50);
    border-color: var(--brand-100);
}