/* ============================================================
   主题样式（css/theme.css）
   ------------------------------------------------------------
   给「不走 ecs.css」的老页面用：用户控制台(user/index.php)、
   登录 / 注册页、管理员登录页。这些页面的配色有两种来源：
     · user 端页面在内联 <style> 的 :root 里定义了一整套 --color-* 变量
     · 管理员登录页是纯字面量颜色（.login-box 等选择器）
   所以这里做两件事：
     1) 定义一套与 ecs.css 同名的 --c-* 变量（供下面的浅色控件用，
        也让这些页面不必再依赖 ecs.css 的顺序）；
     2) 深色模式下覆盖上面两类配色。
   ★ html[data-theme="dark"] 的优先级高于 :root，
     所以即使内联 :root 出现在本文件之后也能被正确覆盖。
   ============================================================ */

/* ---------- 主题切换控件（与 ecs.css 中的定义保持一致，供老页面用） ---------- */
:root {
    --c-primary: #165dff;
    --c-primary-weak: #e8f3ff;
    --c-surface: #fff;
    --c-border: #e8eaed;
    --c-border-3: #c9cdd4;
    --c-text: #1d2129;
    --c-text-2: #4e5969;
    --c-shadow-2: rgba(0,0,0,.16);
    color-scheme: light;
}
html[data-theme="dark"] {
    --c-primary: #3c7eff;
    --c-primary-weak: #17294a;
    --c-surface: #1d2026;
    --c-border: #2e323b;
    --c-border-3: #3b4048;
    --c-text: #e6e7eb;
    --c-text-2: #b4b8c0;
    --c-shadow-2: rgba(0,0,0,.65);
    color-scheme: dark;
}

.theme-switch { position: relative; display: inline-block; }
.theme-switch .theme-btn {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--c-surface); border: 1px solid var(--c-border-3); color: var(--c-text-2);
    height: 30px; padding: 0 10px; border-radius: 4px; font-size: 13px;
    cursor: pointer; font-family: inherit; line-height: 1;
}
.theme-switch .theme-btn:hover { border-color: var(--c-primary); color: var(--c-primary); }
.theme-switch.open .theme-btn { border-color: var(--c-primary); color: var(--c-primary); }
.theme-switch .theme-btn .caret { font-size: 10px; opacity: .65; }
.theme-menu {
    display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 4000;
    min-width: 132px; padding: 4px;
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 6px;
    box-shadow: 0 8px 28px var(--c-shadow-2);
}
.theme-switch.open .theme-menu { display: block; }
.theme-menu .theme-opt {
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
    background: none; border: none; padding: 8px 10px; border-radius: 4px;
    font-size: 13px; color: var(--c-text); cursor: pointer; font-family: inherit; white-space: nowrap;
}
.theme-menu .theme-opt:hover { background: var(--c-primary-weak); color: var(--c-primary); }
.theme-menu .theme-opt .tick { width: 12px; color: var(--c-primary); font-size: 12px; }
.theme-menu .theme-opt.on { color: var(--c-primary); font-weight: 500; }

/* 库存提示（user/index.php 的套餐卡片里） */
.stock-row {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 0 auto 14px; padding: 5px 14px; border-radius: 20px;
    font-size: 13px; font-weight: 600;
    background: rgba(16,185,129,.10); color: #0f9d69;
    border: 1px solid rgba(16,185,129,.25);
}
.stock-row strong { font-size: 15px; }
.stock-row .stock-dot {
    width: 8px; height: 8px; border-radius: 50%; background: currentColor;
    box-shadow: 0 0 0 3px rgba(16,185,129,.18);
}
.stock-row-full {
    background: rgba(239,68,68,.10); color: #dc2626;
    border-color: rgba(239,68,68,.28);
}
.stock-row-full .stock-dot { box-shadow: 0 0 0 3px rgba(239,68,68,.18); }
html[data-theme="dark"] .stock-row { background: #14312a; color: #6fe3ab; border-color: #1d5a41; }
html[data-theme="dark"] .stock-row-full { background: #3a2024; color: #ff8a8a; border-color: #5c2f2f; }

/* ============================================================
   用户控制台首页（user/index.php）专用的「外观」外观
   ------------------------------------------------------------
   该页的按钮是「圆角 2px 描边 + 主色文字」的 .btn-secondary 风格，
   顶栏那套 30px 高的小按钮放在这里显得格格不入，所以给一个变体：
   尺寸、圆角、描边、字重都对齐 .btn.btn-secondary.btn-sm。
   ============================================================ */
.theme-switch-legacy .theme-btn {
    /* ★ 尺寸必须与该页的「退出登录 / 管理云电脑」完全一致：
       它们最终是 .btn-sm 的 38px 高 + 8px/16px 内边距 + 8px 圆角，
       之前沿用顶栏那套 33px 小按钮，放在一起明显大小不一。 */
    height: 38px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    border: 2px solid var(--color-border, #e0e7ff);
    background: var(--color-white, #fff);
    color: var(--color-primary, #4f46e5);
    gap: 6px;
}
.theme-switch-legacy .theme-btn:hover {
    border-color: var(--color-primary, #4f46e5);
    background: var(--color-primary-light, #eeedff);
    color: var(--color-primary, #4f46e5);
}
.theme-switch-legacy.open .theme-btn {
    border-color: var(--color-primary, #4f46e5);
    background: var(--color-primary-light, #eeedff);
    color: var(--color-primary, #4f46e5);
}
.theme-switch-legacy .theme-menu {
    /* 与首页的圆角风格保持一致 */
    border-radius: 10px;
    padding: 5px;
    min-width: 140px;
}
.theme-switch-legacy .theme-menu .theme-opt {
    border-radius: 7px;
    padding: 9px 12px;
    font-size: 13px;
    color: var(--color-text, #1e1b4b);
}
.theme-switch-legacy .theme-menu .theme-opt:hover {
    background: var(--color-primary-light, #eeedff);
    color: var(--color-primary, #4f46e5);
}
.theme-switch-legacy .theme-menu .theme-opt .tick { color: var(--color-primary, #4f46e5); }
.theme-switch-legacy .theme-menu .theme-opt.on { color: var(--color-primary, #4f46e5); }

/* ============================================================
   深色：user 端老页面（user/index.php、login.php、register.php）
   这些页面用的是 --color-* 那套变量名，这里整体重映射。
   ============================================================ */
html[data-theme="dark"] {
    --color-primary: #6d8bff;
    --color-primary-dark: #93a8ff;
    --color-primary-light: #1e2544;
    --color-accent: #fbbf24;
    --color-accent-light: #3a2f13;
    --color-success: #34d399;
    --color-success-light: #14312a;
    --color-danger: #f87171;
    --color-danger-light: #3a2020;
    --color-text: #e8eaf2;
    --color-text-secondary: #b6bccb;
    --color-text-muted: #8b93a5;
    --color-bg: #14161c;
    --color-white: #1d2026;
    --color-border: #2e323b;
    --color-border-light: #262a32;
}

/* user 端老页面里少数写死的背景/文字（渐变、body 底色等） */
html[data-theme="dark"] body { background: var(--color-bg); color: var(--color-text); }
html[data-theme="dark"] .site-header,
html[data-theme="dark"] .navbar,
html[data-theme="dark"] .footer { background: var(--color-white); border-color: var(--color-border); }
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea { background: #23262e; color: var(--color-text); border-color: var(--color-border); }
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--color-text-muted); }
html[data-theme="dark"] table { color: var(--color-text); }
html[data-theme="dark"] th { background: #23262e; }
html[data-theme="dark"] tr:nth-child(even) td { background: #1a1d23; }

/* ============================================================
   user 端老页面的按钮（user/index.php 等）
   ------------------------------------------------------------
   ★ 这里必须用「多重类名」提高优先级，原因（实测）：
     user/css/style.css 里同时存在
         .btn-secondary       { background:#f3f4f6; color:#374151 }
         .btn-secondary:hover { background:#9DA0A4; color:#111827 }
         .btn-sm              { background: 紫色渐变; color:#fff }
     而页面内联样式又写了一份 .btn-secondary。
     结果是「退出登录 / 管理云电脑」这类 class="btn btn-secondary btn-sm" 的按钮
     在深色主题下会出现：底色还是白的、鼠标移上去文字变成近黑色（#111827）压深底，
     完全看不清。所以深色下统一在这里显式覆盖，光靠 --color-* 变量不够。
   ============================================================ */
html[data-theme="dark"] .btn.btn-secondary,
html[data-theme="dark"] .btn.btn-outline,
html[data-theme="dark"] a.btn.btn-secondary {
    background: #1d2026;
    background-image: none;          /* 压掉 .btn-sm 的紫色渐变 */
    color: #b9c6ff;
    border: 2px solid #3a3f52;
    box-shadow: none;
}
html[data-theme="dark"] .btn.btn-secondary:hover,
html[data-theme="dark"] .btn.btn-outline:hover,
html[data-theme="dark"] a.btn.btn-secondary:hover {
    background: #2b3142;
    background-image: none;
    color: #e2e8ff;                  /* 深底配浅字，绝不再用 #111827 */
    border-color: #6d8bff;
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
/* 「立即开通」这类主按钮在各主题下都保持白字（渐变底不随主题变） */
html[data-theme="dark"] .btn.btn-primary { color: #fff; }

/* ============================================================
   深色：网站首页 index.php（落地页）
   它同样用 --color-* 变量 + 少量写死的浅色底，这里补齐写死的部分。
   ============================================================ */
html[data-theme="dark"] body { background-color: #14161c; background-image: none; }
html[data-theme="dark"] .header {
    background: linear-gradient(135deg, #1d2026 0%, #1b1e27 100%);
    border-color: #2e323b;
}
html[data-theme="dark"] .header::after { opacity: .5; }
html[data-theme="dark"] .header-title { color: var(--color-primary-dark); }
html[data-theme="dark"] .card-highlight {
    background: linear-gradient(135deg, #1e2230 0%, #1b1e27 100%);
    border-color: #2e323b;
}
html[data-theme="dark"] .hardware-item { background: #1d2026; border-color: #2e323b; }
html[data-theme="dark"] .hardware-item:hover { background: #23262e; border-color: #3a4055; }
html[data-theme="dark"] .price-card { background: #1d2026; border-color: #2e323b; }
html[data-theme="dark"] .tech-note { background: #1d2026; border-color: #2e323b; }
html[data-theme="dark"] .footer { background: #1d2026; border-color: #2e323b; }
/* 小色块图标（浅色底 + 深色字）在深色下文字太暗，统一提高亮度 */
html[data-theme="dark"] .title-icon.icon-hardware { background: #10283a; color: #6bc7ff; }
html[data-theme="dark"] .title-icon.icon-price    { background: #33280f; color: #ffca6b; }
html[data-theme="dark"] .title-icon.icon-renew    { background: #3a1f2c; color: #ff9ec4; }
html[data-theme="dark"] .title-icon.icon-notice   { background: #262a32; color: #b6bccb; }
html[data-theme="dark"] .title-icon.icon-tech     { background: #1e2544; color: #a8b6ff; }
html[data-theme="dark"] .price-save { background: #14312a; color: #6fe3ab; }
/* 「开通续费」右侧面板：原来是半透明白底，深色下会变成一块浅灰，文字对比度极差 */
html[data-theme="dark"] .combined-right { background: rgba(255,255,255,.04); border-left-color: #2e323b; }
html[data-theme="dark"] .combined-right::before { background: linear-gradient(180deg, transparent 0%, #3a3f52 20%, #3a3f52 80%, transparent 100%); }
html[data-theme="dark"] .combined-price-big { color: #a8b6ff; }
html[data-theme="dark"] .combined-price-sub { color: #b6bccb; }
html[data-theme="dark"] .combined-price-desc { color: var(--color-text-secondary); }
html[data-theme="dark"] .combined-price-badge { background: #14312a; color: #6fe3ab; }

/* 支付结果页 return_url.php（内联样式 + 少量写死颜色） */
html[data-theme="dark"] body { color: var(--color-text); }
html[data-theme="dark"] .countdown { color: #8b93a5; }

/* ============================================================
   深色：用户控制台首页（user/index.php）
   该页大量使用「白色 / 极浅紫」的渐变底（这是它本来的设计语言），
   只靠 --color-* 变量覆盖不到，所以在主题样式里按类名补齐。
   ============================================================ */
html[data-theme="dark"] body { background-color: #14161c; }
html[data-theme="dark"] body::before { opacity: .75; }

html[data-theme="dark"] .hardware-showcase {
    background: linear-gradient(135deg, #1d2026 0%, #1a1c24 100%);
    border-color: #2e323b;
}
html[data-theme="dark"] .hardware-header { border-bottom-color: #2e323b; }
html[data-theme="dark"] .hardware-header h3 { color: var(--color-text); }
html[data-theme="dark"] .hw-card { background: #23262e; border-color: #2e323b; }
html[data-theme="dark"] .hw-card:hover { border-color: #3f4a6b; }
html[data-theme="dark"] .hw-card-value { color: var(--color-text); }

html[data-theme="dark"] .package-compact { background: #1d2026; border-color: #2e323b; }
html[data-theme="dark"] .package-compact:hover { border-color: var(--color-primary); }

html[data-theme="dark"] .renew-card { background: #1d2026; border-color: #2a2e36; }
html[data-theme="dark"] .renew-card:hover { background: #23262e; border-color: #3f4a6b; }
html[data-theme="dark"] .renew-card.recommend { background: #2c2416; border-color: #7a5a1a; }

html[data-theme="dark"] .vm-panel {
    background: linear-gradient(135deg, #1d2026 0%, #1b1e26 100%);
    border-color: #2e323b;
}
html[data-theme="dark"] .status-badge.inactive { background: #2a2e36; }
html[data-theme="dark"] .qrcode-card { background: #1d2026; }
html[data-theme="dark"] .security-note { background: #1d2026; border-color: #262a32; }
html[data-theme="dark"] .alert {
    background: #14312a; border-color: #1d5a41; color: #8ce8bf;
}
html[data-theme="dark"] .alert-icon { color: #34d399; }
html[data-theme="dark"] .benefit-tag { background: #1e2544; color: #a8b6ff; }
/* 套餐规格小标签：原本是浅灰底 + 深字，深色下必须一起翻过来，否则浅字压浅底看不见 */
html[data-theme="dark"] .spec-row { background: transparent; }
html[data-theme="dark"] .spec-item { background: #23262e; color: var(--color-text-secondary); }
html[data-theme="dark"] .spec-item strong { color: var(--color-text); }

/* 页面里少数「浅色描边 / 浅色对话框」 */
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-outline { border-color: #3a3f52; }
html[data-theme="dark"] .login-box,
html[data-theme="dark"] .form-card { background: #1d2026; }

/* ============================================================
   深色：管理员登录页（admin/login.php，纯字面量样式）
   ============================================================ */
html[data-theme="dark"] .login-box { background: #1d2026; box-shadow: 0 0 20px rgba(0,0,0,.55); }
html[data-theme="dark"] .login-box h2 { color: #e6e7eb; }
html[data-theme="dark"] .input-group label { color: #b4b8c0; }
html[data-theme="dark"] .input-group input {
    background: #23262e; color: #e6e7eb; border-color: #3b4048;
}
html[data-theme="dark"] .input-group input:focus { border-color: #3c7eff; }
html[data-theme="dark"] .login-btn { background: #3c7eff; }
html[data-theme="dark"] .login-btn:hover { background: #5b93ff; }
html[data-theme="dark"] .error { color: #ff6b6b; }

/* 深色下的滚动条 */
html[data-theme="dark"] { scrollbar-color: #454a54 #1d2026; }
html[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: #1d2026; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #454a54; border-radius: 5px; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #565c67; }

/* ============================================================
   深色补充（第二轮巡检）
   ------------------------------------------------------------
   背景：这些元素在浅色下靠"浅底 + 深字"，而深色主题里文字变成了浅色，
   底色却还是写死的浅色 → 变成"浅字压浅底"看不清／鼠标悬停像白色高亮。
   ============================================================ */

/* 首页「年付套餐」卡：.price-card.recommend 自带浅黄渐变底，必须换成深琥珀底 */
html[data-theme="dark"] .price-card.recommend {
    background: linear-gradient(180deg, #2a2413 0%, #221d0f 100%);
    border-color: #7a5a12;
}
html[data-theme="dark"] .price-card.recommend:hover { border-color: #f59e0b; box-shadow: 0 12px 32px rgba(245,158,11,.18); }
html[data-theme="dark"] .price-card:hover { border-color: #3f4a6b; }
html[data-theme="dark"] .price-month,
html[data-theme="dark"] .price-unit { color: #e8eaf2; }
html[data-theme="dark"] .price-num { color: #a8b6ff; }
html[data-theme="dark"] .price-save { background: #14312a; color: #6fe3ab; }
html[data-theme="dark"] .badge-recommend { box-shadow: 0 4px 12px rgba(0,0,0,.5); }

/* 旗舰硬件配置卡里的 2×2 硬件块：hover 原本写死 white */
html[data-theme="dark"] .hardware-grid-2x2 .hardware-item:hover { background: #23262e; border-color: #3a4055; }

/* 「使用须知」「技术说明」列表项 */
html[data-theme="dark"] .tip-item { background: #23262e; border-color: #2e323b; color: #c3c9d6; }
html[data-theme="dark"] .tip-list { color: #c3c9d6; }

/* 用户控制台「需要帮助？」卡片（.qrcode-card）：底色为浅色时浅字看不见 */
html[data-theme="dark"] .qrcode-card { background: #1d2026; border-color: #2e323b; }
html[data-theme="dark"] .qrcode-card h4 { color: #e8eaf2; }
html[data-theme="dark"] .qrcode-tip { color: #8b93a5; }
html[data-theme="dark"] .security-note { background: #1d2026; border-color: #2e323b; color: #c3c9d6; }

/* 通用兜底：任何卡片在深色下 hover 都不该变成白底 */
html[data-theme="dark"] .card:hover { border-color: #3a4055; }
html[data-theme="dark"] .card-highlight { background: linear-gradient(135deg, #1e2230 0%, #1b1e27 100%); }

/* ★ 用户控制台首页：外观按钮与「退出登录」严格同高、同基线 */
.dashboard-actions .theme-switch { display: flex; align-items: center; height: 38px; }
.dashboard-actions .theme-switch .theme-btn { height: 38px; }
/* ?????????????????????????????????????????? */
html[data-theme="dark"] .price-card,
html[data-theme="dark"] .price-card.recommend,
html[data-theme="dark"] .price-wrap { color: #e8eaf2; }
/* ★ 用户控制台首页：外观按钮与「退出登录」顶部对齐
   实测根因：该页 style.css 给 .btn 加了 margin-top:8px（首页主按钮需要与上方内容留间距），
   而外观按钮是 .theme-switch 里的按钮、没有这个外边距 —— 结果容器被撑高 8px，
   两个按钮的顶部相差 4px（视觉上"外观略高"）。这里把这一排里的按钮外边距清零。 */
.dashboard-actions .btn,
.dashboard-actions .theme-switch { margin: 0; }
.dashboard-actions .btn { margin-top: 0; }
/* 价格卡文字：用更高优先级压掉继承来的深色文字（原规则被 .price-wrap .price-card 之类盖过） */
html[data-theme="dark"] body .price-card,
html[data-theme="dark"] body .price-card.recommend,
html[data-theme="dark"] body .price-wrap .price-card { color: #e8eaf2 !important; }
html[data-theme="dark"] body .price-card .price-month,
html[data-theme="dark"] body .price-card .price-unit,
html[data-theme="dark"] body .price-card .price-num { color: #e8eaf2 !important; }
html[data-theme="dark"] body .price-card .price-num { color: #a8b6ff !important; }
/* ============================================================
   ★ 用户控制台首页顶栏按钮（退出登录 / 管理云电脑）
   实测：该页 style.css 的 .btn-secondary / .btn-sm 与页面内联样式层层叠加，
   之前的深色规则在某些渲染路径下压不住（出现"白底 + 深紫字"）。
   这里用「body + !important」锁定：深色主题下这两个按钮一律深底浅字。
   ============================================================ */
html[data-theme="dark"] body .dashboard-actions a.btn,
html[data-theme="dark"] body .dashboard-actions .btn.btn-secondary,
html[data-theme="dark"] body .vm-panel .btn.btn-secondary {
    background: #1d2026 !important;
    background-image: none !important;
    color: #b9c6ff !important;
    border: 2px solid #3a3f52 !important;
    box-shadow: none !important;
}
html[data-theme="dark"] body .dashboard-actions a.btn:hover,
html[data-theme="dark"] body .dashboard-actions .btn.btn-secondary:hover,
html[data-theme="dark"] body .vm-panel .btn.btn-secondary:hover {
    background: #2b3142 !important;
    color: #e2e8ff !important;
    border-color: #6d8bff !important;
}
/* ============================================================
   首页（index.php）
   ============================================================ */

/* ① 使用须知容器：实测 .tip-list 自带浅色底 rgb(248,250,252)，
      而里面的 .tip-item 已是深色 → 深色下露出大片浅色缝隙，看起来杂乱。
      深色主题下把容器设为透明，让卡片深色底透出来。 */
html[data-theme="dark"] .tip-list { background: transparent; }

/* ② 首页顶栏的「外观」按钮：与该页 .btn.btn-outline 完全同风格
      （尺寸、圆角、描边、字重一致，避免又一个"大小不一"的问题） */
.theme-switch-home .theme-btn {
    height: auto;
    padding: 11px 24px;
    font-size: 15px;
    font-weight: 600;
    border-radius: var(--radius, 12px);
    border: 2px solid #e0e7ff;
    background: var(--color-white, #fff);
    color: var(--color-primary, #4f46e5);
    gap: 7px;
    letter-spacing: .2px;
    line-height: 1.7;   /* 与该页 .btn 一致（实测不设会矮 7px） */
}
.theme-switch-home .theme-btn:hover,
.theme-switch-home.open .theme-btn {
    border-color: var(--color-primary, #4f46e5);
    background: var(--color-primary-light, #eeedff);
    color: var(--color-primary, #4f46e5);
}
.theme-switch-home .theme-menu { border-radius: var(--radius, 12px); padding: 5px; min-width: 132px; }
.theme-switch-home .theme-menu .theme-opt { border-radius: 8px; padding: 9px 12px; font-size: 14px; color: var(--color-text, #1e1b4b); }
.theme-switch-home .theme-menu .theme-opt:hover { background: var(--color-primary-light, #eeedff); color: var(--color-primary, #4f46e5); }
.theme-switch-home .theme-menu .theme-opt .tick { color: var(--color-primary, #4f46e5); }
html[data-theme="dark"] .theme-switch-home .theme-btn { border-color: #3a3f52; background: #1d2026; color: #b9c6ff; }
html[data-theme="dark"] .theme-switch-home .theme-btn:hover,
html[data-theme="dark"] .theme-switch-home.open .theme-btn { border-color: #6d8bff; background: #2b3142; color: #e2e8ff; }
/* 首页外观下拉：改为 fixed 定位
   实测原因：首页 .header 带 overflow:hidden（用于裁掉装饰渐变），
   而下拉菜单是 absolute 定位在按钮下方 → 直接被卡片裁掉，选项看不见点不到。
   改为 fixed 后不再受祖先 overflow 影响，位置由 theme.js 按按钮实时计算。 */
.theme-switch-home .theme-menu {
    position: fixed;
    top: auto;
    right: auto;
    left: auto;
    z-index: 9999;
}
/* ============================================================
   品牌图标 / 返回首页 / 右上角外观按钮（登录、注册、找回密码等卡片式页面共用）
   ============================================================ */
.brand-logo .brand-img { width: 64px; height: 64px; display: block; object-fit: contain; background: none; border-radius: 0; }
.back-home { text-align: center; margin: 14px 0 0; }
.back-home a { font-size: 13px; color: var(--c-text-3, #9aa1b1); text-decoration: none; }
.back-home a:hover { color: var(--c-primary, #4f46e5); }
.login-theme-switch { position: fixed; top: 18px; right: 20px; z-index: 20; }
@media (max-width: 480px) { .login-theme-switch { top: 12px; right: 12px; } }
/* ============================================================
   深色兜底：卡片与表单控件（注册页 / 找回密码页等卡片式页面）
   ------------------------------------------------------------
   实测：注册页在深色下 .card 仍是 rgb(255,255,255) 纯白、输入框是浅灰，
   原因是这些页面的内联样式在 theme.css 之后又写了浅色值。
   这里用「html[data-theme] + body + 元素」提高优先级，保证一定压住；
   表单控件用 !important 兜底（客户最直接看到的就是输入框发白）。
   ============================================================ */
html[data-theme="dark"] body .card { background: #1d2026; border-color: #2e323b; }
html[data-theme="dark"] body .card-wrapper { background: transparent; }
html[data-theme="dark"] body .form-input,
html[data-theme="dark"] body input.form-input,
html[data-theme="dark"] body textarea.form-input,
html[data-theme="dark"] body select.form-input {
    background: #23262e !important;
    color: #e8eaf2 !important;
    border-color: #3a3f52 !important;
}
html[data-theme="dark"] body .form-input::placeholder { color: #7f8798 !important; }
html[data-theme="dark"] body .form-input:focus { border-color: #6d8bff !important; background: #262a33 !important; }
html[data-theme="dark"] body .form-label { color: #c3c9d6; }
html[data-theme="dark"] body .brand-title { color: #e8eaf2 !important; }
html[data-theme="dark"] body .brand-subtitle { color: #8b93a5 !important; }

/* ============================================================
   右上角操作区：首页 + 外观（登录 / 注册 / 找回密码 / 改密等页面共用）
   ============================================================ */
.top-right-actions { position: fixed; top: 18px; right: 20px; z-index: 30; display: flex; align-items: center; gap: 10px; }
.top-right-actions .home-link {
    display: inline-flex; align-items: center; gap: 6px;
    height: 38px; padding: 0 14px; box-sizing: border-box;
    font-size: 13px; font-weight: 600; text-decoration: none;
    border-radius: 10px; border: 1px solid var(--c-border, #e5e7eb);
    background: var(--c-card, #fff); color: var(--c-text-2, #4b5563);
    transition: all .2s ease; white-space: nowrap;
}
.top-right-actions .home-link:hover { border-color: var(--c-primary, #4f46e5); color: var(--c-primary, #4f46e5); background: var(--c-primary-weak, #f5f6ff); }
html[data-theme="dark"] .top-right-actions .home-link { background: #1d2026; border-color: #3a3f52; color: #b9c6ff; }
html[data-theme="dark"] .top-right-actions .home-link:hover { background: #2b3142; border-color: #6d8bff; color: #e2e8ff; }
@media (max-width: 480px) { .top-right-actions { top: 12px; right: 12px; gap: 8px; } .top-right-actions .home-link { padding: 0 10px; } }
/* ============================================================
   租期状态配色（用户端 / 后台共用）
   已到期=红、宽限中/24 小时内=橙、7 天内=黄、正常=绿、未设置=灰
   ============================================================ */
[data-f="expire_state"], [data-f="expire_state2"] {
    display: inline-block; padding: 2px 10px; border-radius: 999px;
    font-weight: 700; font-size: 12.5px; line-height: 1.7; border: 1px solid transparent;
}
.lease-none     { background: #f1f3f7; color: #6b7280; border-color: #e3e7ee; }
.lease-ok       { background: #e8f8ef; color: #067647; border-color: #b7e8cd; }
.lease-soon     { background: #fff8e6; color: #9a6700; border-color: #ffe3a3; }
.lease-urgent   { background: #fff1e6; color: #b54708; border-color: #ffd4b3; }
.lease-expired  { background: #fdeceb; color: #b42318; border-color: #f8c9c4; }
.lease-extra    { margin-left: 6px; font-size: 12px; color: #8b93a5; font-weight: 400; }
html[data-theme="dark"] .lease-none    { background: #23262e; color: #9aa3b2; border-color: #32363f; }
html[data-theme="dark"] .lease-ok      { background: #123126; color: #6fe3ab; border-color: #1e5440; }
html[data-theme="dark"] .lease-soon    { background: #33290f; color: #f0c860; border-color: #5c4a17; }
html[data-theme="dark"] .lease-urgent  { background: #3a2411; color: #ffb27a; border-color: #6b3f1a; }
html[data-theme="dark"] .lease-expired { background: #3a1d1d; color: #ff9b93; border-color: #6b2b2b; }
html[data-theme="dark"] .lease-extra   { color: #8b93a5; }
.lease-countdown { margin-left: 6px; font-size: 12px; font-weight: 600; color: #b54708; }
html[data-theme="dark"] .lease-countdown { color: #ffb27a; }

/* ============================================================
   公众号二维码卡片（登录 / 注册 / 找回密码页共用）
   ============================================================ */
.wx-qrcode {
    display: flex; gap: 14px; align-items: center;
    margin: 18px 0 0; padding: 14px;
    border: 1px solid var(--c-border, #e5e7eb); border-radius: 12px;
    background: var(--c-card, #fff);
}
.wx-qrcode img {
    width: 96px; height: 96px; flex: none; display: block;
    object-fit: contain; border-radius: 8px; background: #fff;
}
.wx-qrcode b { display: block; font-size: 14px; margin-bottom: 4px; color: var(--c-text, #1f2937); }
.wx-qrcode p { margin: 0; font-size: 12.5px; line-height: 1.75; color: var(--c-text-3, #8b93a5); }
.wx-qrcode p b { display: inline; color: var(--c-primary, #4f46e5); }
html[data-theme="dark"] .wx-qrcode { background: #1d2026; border-color: #2e323b; }
html[data-theme="dark"] .wx-qrcode b { color: #e8eaf2; }
@media (max-width: 420px) { .wx-qrcode { flex-direction: column; text-align: center; } }
/* ============================================================
   认证页统一版式（登录 / 注册 / 找回密码）
   ------------------------------------------------------------
   解决两个问题：
     ① 卡片过窄导致内容拥挤 → 加宽卡片 + 加大内边距与字段间距
     ② 取码说明把关键词夹在句子里、换行后很难读
        → 改成「三步指引」，关键词做成不换行标签
   ============================================================ */
.card.auth-card { max-width: 560px; padding: 40px 36px 32px; }
@media (max-width: 600px) { .card.auth-card { padding: 26px 18px 22px; } }

/* 三步指引 */
.wx-steps {
    margin: 0 0 20px; padding: 16px 18px;
    border: 1px solid #e6e9ff; border-radius: 14px;
    background: linear-gradient(180deg, #f7f8ff 0%, #f4f5ff 100%);
}
.wx-step { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.7; color: #4b5563; }
.wx-step + .wx-step { margin-top: 12px; }
.wx-step .n {
    flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%;
    background: #4f46e5; color: #fff; font-size: 12px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.wx-step .t { flex: 1 1 auto; min-width: 0; }
.wx-step .t b { display: block; margin-bottom: 3px; color: #1f2937; font-weight: 700; font-size: 13.5px; }
.wx-kw {
    display: inline-block; margin-top: 2px; padding: 2px 10px;
    border: 1px solid #c7d2fe; border-radius: 8px; background: #fff;
    color: #4338ca; font-weight: 700; font-size: 13.5px;
    letter-spacing: .4px; white-space: nowrap;
}
html[data-theme="dark"] .wx-steps { background: #1b1e27; border-color: #2e323b; }
html[data-theme="dark"] .wx-step { color: #b6bccb; }
html[data-theme="dark"] .wx-step .t b { color: #e8eaf2; }
html[data-theme="dark"] .wx-kw { background: #23262e; border-color: #3a3f52; color: #b9c6ff; }
html[data-theme="dark"] .card.auth-card { background: #1d2026; }

/* 字段间距统一放宽一点 */
.card.auth-card .form-group { margin-bottom: 18px; }
.card.auth-card .form-group:last-of-type { margin-bottom: 22px; }
.card.auth-card .wx-qrcode { margin-top: 20px; }
/* ============================================================
   认证页「宽版」布局（登录 / 注册 / 找回密码）
   ------------------------------------------------------------
   覆盖上面的窄卡片方案：宽屏用 960px 宽卡片 + 两列表单，
   把原本"挤在一列"的内容舒展开；窄屏再逐级收成单列。
   ============================================================ */
.card.auth-card {
    width: 100%;
    max-width: 960px;
    padding: 44px 48px 36px;
    box-sizing: border-box;
}
.card.auth-card .brand-area { margin-bottom: 26px; }

/* 表单：宽屏两列 */
.card.auth-card form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 22px;
    align-items: start;
}
.card.auth-card form .form-group { margin-bottom: 0; min-width: 0; }
.card.auth-card form .form-group.pw-group,
.card.auth-card form .form-group.wide { grid-column: 1 / -1; }
.card.auth-card form button[type="submit"],
.card.auth-card form .btn-submit { grid-column: 1 / -1; width: 100%; }
.card.auth-card form input[type="hidden"] { display: none; }

/* 三步指引：宽屏横排三列（更像"流程条"，不再一长条文字） */
.wx-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px 20px;
    padding: 20px 22px;
    margin-bottom: 24px;
}
.wx-step { display: flex; gap: 10px; align-items: flex-start; }
.wx-step + .wx-step { margin-top: 0; }

/* 二维码：宽屏横排、更大更清晰 */
.wx-qrcode { margin-top: 24px; padding: 18px 20px; gap: 18px; }
.wx-qrcode img { width: 112px; height: 112px; }
.wx-qrcode p { font-size: 13px; }

/* ---------- 中屏：收成单列 ---------- */
@media (max-width: 860px) {
    .card.auth-card { padding: 30px 22px 26px; }
    .card.auth-card form { grid-template-columns: 1fr; gap: 18px; }
    .wx-steps { grid-template-columns: 1fr; gap: 12px; padding: 16px 18px; }
    .wx-step + .wx-step { margin-top: 0; }
}

/* ---------- 窄屏（手机）：进一步压缩、二维码竖排居中 ---------- */
@media (max-width: 520px) {
    .card.auth-card { padding: 24px 16px 22px; border-radius: 14px; }
    .card.auth-card .brand-area { margin-bottom: 20px; }
    .brand-title { font-size: 20px; }
    .brand-subtitle { font-size: 12.5px; }
    .wx-steps { padding: 14px 14px; }
    .wx-step { font-size: 13px; }
    .wx-qrcode { flex-direction: column; align-items: center; text-align: center; padding: 16px; }
    .wx-qrcode img { width: 132px; height: 132px; }
    .wx-qrcode b { font-size: 14px; }
    .wx-qrcode p { font-size: 12.5px; }
    /* 手机端点击区域更大更好点 */
    .card.auth-card .form-input { height: 46px; }
    .card.auth-card form button[type="submit"] { height: 46px; }
}
/* ============================================================
   认证页：放开外层容器的宽度限制（真正决定页面宽窄的是 .card-wrapper）
   ============================================================ */
.card-wrapper.auth-wrap {
    max-width: 1000px;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}
@media (max-width: 600px) {
    .card-wrapper.auth-wrap { padding-left: 12px; padding-right: 12px; }
}
/* ============================================================
   认证页（最终定稿）
   ------------------------------------------------------------
   ① 表单用「单列」：两列虽然省高度，但容易让人分不清每个框填什么
   ② 卡片宽度取 760px：既比原来的 440px 宽敞，又不至于一行拉得太长
   ③ 三步指引横排（760px 放得下三列），二维码卡片只做"扫码"提示，不再重复关键词
   ============================================================ */
.card.auth-card {
    max-width: 760px;
    padding: 40px 44px 32px;
    box-sizing: border-box;
}
.card.auth-card form { display: block; }              /* 关键：取消两列栅格 */
.card.auth-card form .form-group { margin-bottom: 18px; min-width: 0; }
.card.auth-card form button[type="submit"],
.card.auth-card form .btn-submit { width: 100%; }
.card.auth-card form input[type="hidden"] { display: none; }

/* 三步指引：宽屏横排三列（更紧凑的"流程条"） */
.wx-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 20px 22px; }

/* 二维码：只做扫码提示，横排、图片放大一点 */
.wx-qrcode { margin-top: 22px; padding: 18px 20px; gap: 18px; align-items: center; }
.wx-qrcode img { width: 112px; height: 112px; }
.wx-qrcode p { font-size: 13px; line-height: 1.7; }

@media (max-width: 860px) {
    .card.auth-card { padding: 30px 22px 26px; }
    .wx-steps { grid-template-columns: 1fr; gap: 12px; padding: 16px 18px; }
}
@media (max-width: 520px) {
    .card.auth-card { padding: 24px 16px 22px; }
    .wx-qrcode { flex-direction: column; text-align: center; }
    .wx-qrcode img { width: 132px; height: 132px; }
    .card.auth-card .form-input, .card.auth-card form button[type="submit"] { height: 46px; }
}