/* ============================================================
   UI Refresh 2026-08-30 方案C（亮白专业 · Stripe / Coinbase 参考）
   ------------------------------------------------------------
   覆盖式样式表：必须以 <link> 形式放在 <head> 最后加载，
   依靠级联顺序覆盖布局内联 <style> 与 @vite(app.css) 的旧样式。
   纯视觉层：不改任何表单 name / action / 路由 / JS。
   设计令牌：
     主色唯一 #0052ff（hover #0043cc）· 近黑 #0a0b0d · 次级灰 #4b5563
     边框 #e5e7eb · 页面底 #f8fafc · 卡片纯白 · 圆角 12px
     按钮 pill / 高 44px · 输入框高 44px / 圆角 8px
   ============================================================ */

/* ── 1. 设计令牌（ur- 前缀，避免与主题变量冲突） ── */
:root {
    --ur-primary: #0052ff;
    --ur-primary-hover: #0043cc;
    --ur-primary-soft: #eff6ff;
    --ur-primary-soft-hover: #f5f8ff;
    --ur-primary-glow: rgba(0, 82, 255, 0.12);
    --ur-text: #0a0b0d;
    --ur-muted: #4b5563;
    --ur-faint: #9ca3af;
    --ur-border: #e5e7eb;
    --ur-input-border: #d1d5db;
    --ur-bg: #f8fafc;
    --ur-card: #ffffff;
    --ur-radius: 12px;
    --ur-radius-sm: 8px;
    --ur-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.05);
}

/* 亮色主题：重映射布局内联 <style> 使用的变量，整站组件自动跟随方案C。
   选择器带属性条件，特异性高于布局的裸 :root，且文件加载更靠后。 */
:root[data-theme="light"],
:root:not([data-theme]) {
    --primary: #0052ff;
    --primary-light: #eff6ff;
    --primary-dark: #0043cc;
    --accent: #0052ff;
    --accent-dark: #0043cc;
    --bg: #f8fafc;
    --card: #ffffff;
    --border: #e5e7eb;
    --text: #0a0b0d;
    --muted: #4b5563;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.08), 0 12px 32px rgba(0, 0, 0, 0.08);
    --radius: 12px;
    --radius-sm: 8px;
}

/* 暗色主题：同样统一到主色（背景仍保留深色），避免蓝绿混用 */
:root[data-theme="dark"] {
    --primary: #0052ff;
    --primary-dark: #0043cc;
    --accent: #0052ff;
    --accent-dark: #0043cc;
    --primary-light: #172554;
}

/* ── 2. 全局基础 ── */
body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, "PingFang SC", "Helvetica Neue", sans-serif;
    background: var(--ur-bg);
    color: var(--ur-text);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    letter-spacing: -0.02em;
}

a {
    color: var(--ur-primary);
}

a:hover {
    color: var(--ur-primary-hover);
}

::selection {
    background: rgba(0, 82, 255, 0.15);
}

/* ── 3. 按钮：主色唯一 · pill · 高44px ── */
.btn {
    border-radius: 9999px;
    min-height: 44px;
    padding: 11px 22px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.btn-sm {
    min-height: 34px;
    padding: 7px 16px;
    font-size: 13px;
}

.btn-xs {
    min-height: 28px;
    padding: 4px 12px;
    font-size: 12px;
}

.btn-primary,
.btn-accent {
    background: var(--ur-primary);
    border-color: var(--ur-primary);
    color: #fff;
}

.btn-primary:hover,
.btn-accent:hover {
    background: var(--ur-primary-hover);
    border-color: var(--ur-primary-hover);
    color: #fff;
}

.btn-outline,
.btn-default {
    background: #fff;
    color: var(--ur-primary);
    border: 1.5px solid var(--ur-primary);
}

.btn-outline:hover,
.btn-default:hover {
    background: var(--ur-primary-soft);
    border-color: var(--ur-primary-hover);
    color: var(--ur-primary-hover);
}

.btn:disabled,
.btn.disabled,
.btn.submitting {
    background: #d1d5db;
    border-color: #d1d5db;
    color: #fff;
    cursor: not-allowed;
    opacity: 1;
}

.btn-outline:disabled,
.btn-default:disabled {
    background: #f3f4f6;
    border-color: #e5e7eb;
    color: #9ca3af;
}

/* 缺货态按钮：保持灰调，不吃主色描边 */
.btn-outline.ur-soldout,
.btn-outline.ur-soldout:hover {
    background: #f9fafb;
    border-color: #e5e7eb;
    color: #9ca3af;
    cursor: default;
}

/* 大号主行动按钮（结算页唯一焦点） */
.ur-cta-lg {
    min-height: 50px;
    padding: 13px 28px;
    font-size: 16px;
}

/* ── 4. 表单：高44px · 圆角8px · 聚焦主色描边+外发光 ── */
input.form-control,
input.pn-input,
select.form-control,
select.pn-input {
    height: 44px;
    border-radius: var(--ur-radius-sm);
    border: 1px solid var(--ur-input-border);
    color: var(--ur-text);
    font-size: 14px;
}

textarea.form-control,
textarea.pn-input {
    border-radius: var(--ur-radius-sm);
    border: 1px solid var(--ur-input-border);
    color: var(--ur-text);
    font-size: 14px;
}

.form-control::placeholder,
.pn-input::placeholder {
    color: #9ca3af;
}

.form-control:focus,
.pn-input:focus {
    border-color: var(--ur-primary);
    box-shadow: 0 0 0 3px var(--ur-primary-glow);
    outline: none;
}

input[type="radio"],
input[type="checkbox"] {
    accent-color: var(--ur-primary);
}

.form-label,
.pn-label {
    color: var(--ur-text);
    font-weight: 600;
}

.form-hint {
    color: var(--ur-muted);
}

.form-label .req {
    color: #dc2626;
}

/* ── 5. 卡片 / 标题 / 表格 ── */
.pn-card {
    border: 1px solid var(--ur-border);
    border-radius: var(--ur-radius);
    box-shadow: var(--ur-shadow-card);
}

.pn-card-title {
    letter-spacing: -0.01em;
}

.pn-page-title {
    letter-spacing: -0.02em;
    font-weight: 700;
}

/* configure 页使用无 pn- 前缀的 .page-header */
.page-header h1 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ur-text);
}

.pn-table th {
    color: var(--ur-muted);
    background: var(--ur-bg);
}

/* 价格数字统一等宽对齐 */
.ur-money,
.pn-order-row span:last-child,
.summary-row span:last-child,
.pn-product-price {
    font-variant-numeric: tabular-nums;
}

/* ── 6. 导航栏 ── */
.pn-brand-dot {
    background: var(--ur-primary);
}

.pn-brand {
    letter-spacing: -0.02em;
}

/* 店铺“最受欢迎”角标统一到主色（原为绿色强调色） */
.pn-popular {
    background: var(--ur-primary);
}

/* ── 7. 登录 / 注册（独立全页模板） ── */
.login-box,
.register-box {
    max-width: 440px;
}

.register-box {
    max-width: 520px;
}

/* 品牌区：logo + 站名放大居中，标题 700 字重近黑 */
.login-logo {
    text-align: center;
    margin-bottom: 28px;
}

.login-logo img {
    max-height: 72px !important;
    margin-bottom: 10px;
}

.login-logo h1 {
    font-size: 32px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: var(--ur-text) !important;
    margin: 0 0 6px;
}

.login-logo p {
    font-size: 14px;
    color: var(--ur-muted);
}

.login-box .card,
.register-box .card {
    background: var(--ur-card);
    border: 1px solid var(--ur-border);
    border-radius: var(--ur-radius);
    box-shadow: var(--ur-shadow-card);
}

.login-box .card-body,
.register-box .card-body {
    padding: 32px;
}

.login-box .form-label,
.register-box .form-label {
    font-weight: 600;
    color: var(--ur-text);
    margin-bottom: 6px;
}

.login-box .btn,
.register-box .btn {
    border-radius: 9999px;
    min-height: 44px;
    font-size: 14px;
    font-weight: 600;
}

/* 主按钮：主色 pill 实心 */
.login-box .btn-primary,
.register-box .btn-primary {
    background: var(--ur-primary);
    border-color: var(--ur-primary);
    color: #fff;
}

.login-box .btn-primary:hover,
.register-box .btn-primary:hover {
    background: var(--ur-primary-hover);
    border-color: var(--ur-primary-hover);
}

.login-box .btn:disabled,
.register-box .btn:disabled {
    background: #d1d5db;
    border-color: #d1d5db;
    color: #fff;
    cursor: not-allowed;
}

/* 微信扫码登录：降为次按钮（白底主色文字主色描边）。
   模板只改了 class；!important 用于压过该按钮原有的内联绿色。 */
.login-box .ur-btn-wechat {
    background: #fff !important;
    border: 1.5px solid var(--ur-primary) !important;
    color: var(--ur-primary) !important;
}

.login-box .ur-btn-wechat:hover {
    background: var(--ur-primary-soft) !important;
    border-color: var(--ur-primary-hover) !important;
    color: var(--ur-primary-hover) !important;
}

.login-box .ur-btn-wechat svg path {
    fill: var(--ur-primary);
}

/* 「记住我」「忘记密码」同行两端对齐（结构原本即 flex，仅润色） */
.remember-row {
    margin: 2px 0 18px;
}

.remember-row label {
    color: var(--ur-muted);
}

.remember-row input[type="checkbox"] {
    width: 15px;
    height: 15px;
}

.remember-row a {
    color: var(--ur-primary);
    font-weight: 500;
}

.remember-row a:hover {
    color: var(--ur-primary-hover);
    text-decoration: underline;
}

.register-link,
.login-link {
    color: var(--ur-muted);
    font-size: 13.5px;
}

.register-link a,
.login-link a {
    color: var(--ur-primary);
    font-weight: 600;
}

.register-link a:hover,
.login-link a:hover {
    color: var(--ur-primary-hover);
    text-decoration: underline;
}

/* 微信弹窗内的邮箱验证码小按钮：降为次按钮观感（不动 id/逻辑） */
#wxMailSubmit {
    background: var(--ur-primary) !important;
    border-radius: 9999px;
    min-height: 40px;
}

/* ── 8. 购物车空态：图标放大 + 大号主色 pill ── */
.pn-empty-icon {
    font-size: 64px;
    line-height: 1;
    margin-bottom: 18px;
    opacity: 0.9;
}

.pn-empty .btn-primary {
    min-height: 48px;
    padding: 12px 32px;
    font-size: 15px;
}

/* ── 9. 订单摘要明细（购物车 / 结算） ── */
.pn-order-row {
    font-size: 13.5px;
    color: var(--ur-text);
}

.pn-order-row .key {
    color: var(--ur-muted);
}

/* 总计行：24px 加粗主色，页面最强价格焦点
   !important 用于压过模板内原有的内联 font-size / color */
.ur-total-row {
    border-bottom: none;
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--ur-border);
}

.ur-total-row > span:first-child {
    font-weight: 700;
    font-size: 15px;
}

.ur-total-val {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: var(--ur-primary) !important;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* 购物车商品行：证书名 600（模板内联已有），价格放大等宽 */
.ur-price {
    font-variant-numeric: tabular-nums;
    font-size: 15px;
}

/* ── 10. 支付方式 / Billing Cycle：卡片式单选（分段选择器观感）
      选中态：主色边框 2px + 浅蓝底 #eff6ff（radio/onclick 功能不动） ── */
.pn-pay-option,
.cycle-option {
    background: var(--ur-card);
    border: 2px solid var(--ur-border);
    border-radius: var(--ur-radius);
    padding: 14px 16px;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.pn-pay-option:hover,
.cycle-option:hover {
    border-color: #9db9ff;
    background: var(--ur-primary-soft-hover);
}

.pn-pay-option.selected,
.cycle-option.selected {
    border-color: var(--ur-primary);
    background: var(--ur-primary-soft);
    box-shadow: 0 0 0 1px var(--ur-primary) inset;
}

.cycle-option {
    padding: 16px 10px;
}

.cycle-price {
    color: var(--ur-primary);
    font-weight: 700;
    font-size: 17px;
    font-variant-numeric: tabular-nums;
}

.cycle-label {
    color: var(--ur-muted);
}

/* 配置页订单摘要 */
.summary-row {
    border-bottom-color: var(--ur-border);
}

.summary-row:last-child {
    font-weight: 700;
}

#summaryTotal {
    color: var(--ur-primary) !important;
    font-size: 20px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

/* 商店产品卡价格 */
.pn-product-price {
    letter-spacing: -0.02em;
}

.pn-product-card .btn {
    min-height: 44px;
}

/* ── 11. 全局信任条（纯展示） ── */
.ur-trust {
    text-align: center;
    font-size: 12px;
    color: var(--ur-faint);
    margin-top: 18px;
    letter-spacing: 0.02em;
    user-select: none;
}

/* ── 12. 其它组件跟随主色 ── */
.gw-tab.active {
    background: var(--ur-primary);
    border-color: var(--ur-primary);
}

.pn-amount-btn:hover,
.pn-amount-btn.selected {
    border-color: var(--ur-primary);
    background: var(--ur-primary-soft);
    color: var(--ur-primary);
}

.pn-progress-fill {
    background: var(--ur-primary);
}

/* 聚焦可见性：键盘焦点环统一主色 */
.btn:focus-visible,
.pn-nav-link:focus-visible {
    outline: 2px solid var(--ur-primary);
    outline-offset: 2px;
}


/* ============================================================
   UI Refresh 2026-08-30 补充：登录/注册页科技感深色背景
   匹配主页hero风格：深蓝渐变 + 节点网络球体 + 网格
   实现：背景图(SD3.5本地渲染) + 深色玻璃拟态卡片
   仅命中含 .login-box 的页面（登录/注册），不影响其他页面
   ============================================================ */

/* ── 背景层：科技图 + 深蓝渐变叠加 ── */
:is(body:has(.login-box), body:has(.register-box)) {
    background:
        linear-gradient(135deg, rgba(8, 12, 36, 0.82) 0%, rgba(16, 22, 64, 0.62) 45%, rgba(6, 14, 44, 0.85) 100%),
        url('../images/auth-tech-bg.png') center / cover no-repeat fixed !important;
    background-color: #080c24 !important;
    min-height: 100vh;
}

/* ── 品牌区：白字 + 光晕，适配深底 ── */
:is(body:has(.login-box), body:has(.register-box)) .login-logo h1 {
    color: #ffffff !important;
    text-shadow: 0 2px 16px rgba(0, 82, 255, 0.55), 0 1px 3px rgba(0,0,0,.5);
    letter-spacing: -0.02em;
}
:is(body:has(.login-box), body:has(.register-box)) .login-logo p,
:is(body:has(.login-box), body:has(.register-box)) .text-muted {
    color: rgba(255, 255, 255, 0.72) !important;
}

/* ── 卡片：深色玻璃拟态（毛玻璃） ── */
:is(body:has(.login-box), body:has(.register-box)) .card {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 16px !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}
:is(body:has(.login-box), body:has(.register-box)) .card-body { padding: 32px 28px !important; }

/* ── 表单文字适配深底 ── */
:is(body:has(.login-box), body:has(.register-box)) .form-label {
    color: rgba(255, 255, 255, 0.88) !important;
    font-weight: 500;
}

/* ── 输入框：半透明玻璃 ── */
:is(body:has(.login-box), body:has(.register-box)) .form-control {
    background: rgba(255, 255, 255, 0.10) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    height: 44px;
    padding: 10px 14px !important;
    transition: border-color .18s, box-shadow .18s, background .18s;
}
:is(body:has(.login-box), body:has(.register-box)) .form-control::placeholder { color: rgba(255,255,255,0.45); }
:is(body:has(.login-box), body:has(.register-box)) .form-control:focus {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: #4d8dff !important;
    box-shadow: 0 0 0 3px rgba(0, 82, 255, 0.35) !important;
    outline: 0;
}

/* ── 主按钮：主色实心 + 发光（深底上加光晕提升科技感） ── */
:is(body:has(.login-box), body:has(.register-box)) .btn-primary {
    background: linear-gradient(180deg, #1a66ff 0%, #0052ff 100%) !important;
    border: none !important;
    border-radius: 9999px !important;
    height: 44px;
    font-weight: 600;
    box-shadow: 0 4px 18px rgba(0, 82, 255, 0.45) !important;
    transition: transform .15s, box-shadow .18s;
}
:is(body:has(.login-box), body:has(.register-box)) .btn-primary:hover {
    background: linear-gradient(180deg, #3577ff 0%, #0a44d6 100%) !important;
    box-shadow: 0 6px 26px rgba(0, 82, 255, 0.65) !important;
    transform: translateY(-1px);
}

/* ── 微信扫码按钮：玻璃描边次按钮 ── */
:is(body:has(.login-box), body:has(.register-box)) .ur-btn-wechat,
:is(body:has(.login-box), body:has(.register-box)) a[href*="wechat"] {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: 9999px !important;
    color: #ffffff !important;
    backdrop-filter: blur(8px);
}
:is(body:has(.login-box), body:has(.register-box)) .ur-btn-wechat:hover,
:is(body:has(.login-box), body:has(.register-box)) a[href*="wechat"]:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
}

/* ── 复选/链接/底部文字 ── */
:is(body:has(.login-box), body:has(.register-box)) a:not(.btn):not(.ur-btn-wechat) {
    color: #7db0ff !important;
}
:is(body:has(.login-box), body:has(.register-box)) a:not(.btn):hover { color: #a3c7ff !important; }
:is(body:has(.login-box), body:has(.register-box)) .form-check-label,
:is(body:has(.login-box), body:has(.register-box)) label:not(.form-label) {
    color: rgba(255, 255, 255, 0.78) !important;
}

/* ── 警告框（错误提示）适配深底 ── */
:is(body:has(.login-box), body:has(.register-box)) .alert {
    background: rgba(239, 68, 68, 0.16) !important;
    border: 1px solid rgba(239, 68, 68, 0.45) !important;
    color: #fda4a4 !important;
    border-radius: 8px;
}

/* ── 信任条：浅色微光 ── */
:is(body:has(.login-box), body:has(.register-box)) .ur-trust-bar {
    color: rgba(255, 255, 255, 0.55) !important;
    text-shadow: 0 1px 4px rgba(0,0,0,.6);
}

/* ── 不支持 :has 的浏览器兜底：维持原样式不破坏 ── */
@supports not (selector(:has(*))) {
    /* 降级：什么都不做，页面保持上一版白色方案 */
}
