/* ============================================================
   🌓 深浅模式：跟随系统 prefers-color-scheme（浅色锁已移除）
   —— :root 声明 color-scheme: light dark，UA 不再自动反色；
      共享组件（登录/支付弹窗/PC 二维码/拼图验证码）深色皮肤
      见本文件底部 "🌙 深色模式" 段
   ============================================================ */
:root{
    color-scheme: light dark; /* ← 告诉 UA：本页面已适配 light + dark 两套 color scheme */
    --ink:#1E293B;
    --ink-soft:#475569;
    --orange:#F97316;
    --red:#EF4444;
    --amber:#F59E0B;
    --green:#10B981;
    --blue:#3B82F6;
    --purple:#8B5CF6;
}

*{
    box-sizing:border-box;margin:0;padding:0;
    -webkit-font-smoothing:antialiased;
    -webkit-tap-highlight-color: transparent;
}

html{
    /* 浅色基底下仍显式给 html 白底，避免个别浏览器默认 canvas 干扰；深色见下方 @media(dark) */
    background: #ffffff;
    color: var(--ink);
}

body{
    /* body 保留项目各自的浅色渐变/配色；若项目本身没配 → 兜底纯白 */
    background-color: #ffffff;
}

html,body{
    margin:0;padding:0;
    font-family:"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
    color:var(--ink);
    width:100%;min-height:100%;
    -webkit-text-size-adjust:100%;text-size-adjust:100%;
}


/* ===== 公共样式：szjjpt9 登录/验证码 通用 （index.html 和 success.html 共用） ===== */

/* ========== 加载遮罩 ========== */
.mask {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
    justify-content: center;
    align-items: center;
}
.mask.show { display: flex; }
.loading-spinner {
    width: 44px; height: 44px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #ff5e3a;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ========== 提示消息 ========== */
.toast {
    display: none;
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.78);
    color: #fff;
    padding: 12px 22px;
    border-radius: 8px;
    font-size: 14px;
    z-index: 1000;
    text-align: center;
    max-width: 80%;
}
.toast.show { display: block; animation: fadeInOut 2.5s ease; }
@keyframes fadeInOut {
    0% { opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { opacity: 0; }
}

/* ========== 手机号登录弹窗 ========== */
.login-modal {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1001;
    justify-content: center;
    align-items: center;
    padding: 20px;
}
.login-modal.show { display: flex; }
.login-box {
    background: #fff;
    border-radius: 16px;
    padding: 24px 20px 20px;
    width: 340px;
    max-width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}
/* 支付成功页使用内联登录卡时：去掉弹窗层背景，改为在背景图上的白色卡片 */
.login-modal.inline {
    position: static;
    background: transparent;
    padding: 0;
    justify-content: flex-start;
    align-items: flex-start;
}
.login-modal.inline.show { display: block; }
.login-modal.inline .login-box {
    width: 100%;
    box-shadow: 0 6px 24px rgba(0,0,0,0.08);
}

.login-box h3 {
    font-size: 18px;
    margin-bottom: 18px;
    text-align: center;
    color: #1a2332;
    font-weight: 700;
}
.login-box input {
    width: 100%;
    height: 44px;
    border: 1px solid #e3e8f0;
    border-radius: 10px;
    padding: 0 14px;
    font-size: 15px;
    margin-bottom: 12px;
    outline: none;
    transition: border-color 0.2s;
    -webkit-appearance: none;
    appearance: none;
    touch-action: manipulation;
    background: #fff;
}
.login-box input:focus { border-color: #2e5bff; }
.login-code-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.login-code-row input { flex: 1; margin-bottom: 0; }
.login-code-btn {
    flex-shrink: 0;
    min-width: 108px;
    height: 44px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #2e5bff, #6c8cff);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.login-code-btn:disabled { background: #cdd5e0; cursor: not-allowed; }
.login-submit {
    width: 100%;
    height: 46px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #ff9a3c, #ff5e3a);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 14px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    box-shadow: 0 4px 14px rgba(255,94,58,0.25);
}
.login-submit:active { opacity: 0.85; }
.login-submit:disabled { background: #cdd5e0; cursor: not-allowed; box-shadow: none; }
.login-tip-row {
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
    margin: 8px 0 4px;
    text-align: left;
}
.login-tip-row em { color: #ff5e3a; font-style: normal; font-weight: 600; }
.login-close {
    text-align: center;
    margin-top: 14px;
    font-size: 13px;
    color: #93a3b8;
    cursor: pointer;
}
.login-actions {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #94a3b8;
}
.login-actions a { color: #2e5bff; text-decoration: none; cursor: pointer; }

/* ===== 拼图验证码：样式与 DOM 统一由规范组件 sliderCaptcha.js + sliderCaptcha.css（cap-* 类）接管 =====
   历史上此处的 .captcha-modal/.captcha-panel/.slider-track 等内联皮肤已废弃（组件运行时注入 cap-* DOM），
   几何修复（面板锁 310px、object-fit:initial、is-ok/is-fail/is-loading 状态）均在 sliderCaptcha.css 单一真源中维护。 */

/* ========== 支付方式选择弹窗 (通用) ========== */
.pay-chooser-mask{
    display:none;position:fixed;inset:0;
    background:rgba(0,0,0,0.5);z-index:1004;
    align-items:flex-end;justify-content:center;
}
.pay-chooser-mask.show{display:flex;}
.pay-chooser-mask.pc{align-items:center;}
.pay-chooser-sheet{
    width:100%;max-width:750px;background:#fff;
    border-radius:20px 20px 0 0;padding:8px 0 18px;
    transform:translateY(100%);
    transition:transform .25s cubic-bezier(.22,.61,.36,1);
    box-shadow:0 -4px 24px rgba(0,0,0,.12);
    max-height:80vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.pay-chooser-sheet.show{transform:translateY(0);}
.pay-chooser-sheet.pc{
    width:340px;max-width:calc(100% - 40px);
    border-radius:18px;padding:18px 0 8px;
    transform:translateY(20px) scale(.95);opacity:0;
    transition:transform .25s ease, opacity .25s ease;
}
.pay-chooser-sheet.pc.show{transform:translateY(0) scale(1);opacity:1;}
.pcs-handle{width:40px;height:4px;margin:0 auto 10px;background:#e3e8f0;border-radius:2px;}
.pay-chooser-sheet.pc .pcs-handle{display:none;}
.pcs-title{text-align:center;font-size:16px;font-weight:700;color:#1a2332;margin-bottom:6px;padding:4px 20px;}
.pcs-list{padding:4px 0;}
.pcs-item{
    display:flex;align-items:center;gap:14px;
    padding:14px 20px;cursor:pointer;
    transition:background .15s;-webkit-tap-highlight-color:transparent;
}
.pcs-item:active{background:#f7f8fa;}
@media(hover:hover){.pcs-item:hover{background:#f7f8fa;}}
.pcs-ic{
    width:44px;height:44px;border-radius:12px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.pcs-ic svg{width:28px;height:28px;display:block;}
.pcs-ic-wx{background:#07C160;}
.pcs-ic-ali{background:#1677FF;}
.pcs-ic-img{width:44px;height:44px;border-radius:12px;display:block;object-fit:cover;background:#fff;}
.pcs-name{flex:1;min-width:0;}
.pcs-main{font-size:15px;font-weight:700;color:#1a2332;line-height:1.3;}
.pcs-sub{font-size:12px;color:#8b99b0;font-weight:500;margin-top:2px;}
.pcs-arrow{font-size:24px;color:#c3cbd8;font-weight:400;transform:translateY(-1px);}
.pcs-cancel{
    display:block;width:calc(100% - 40px);margin:14px auto 0;
    height:44px;border-radius:12px;border:none;
    background:#f2f4f8;color:#475569;
    font-size:15px;font-weight:600;cursor:pointer;
    -webkit-tap-highlight-color:transparent;transition:background .15s;
}
.pcs-cancel:active{background:#e6e9ef;}

/* ========== PC 二维码支付弹窗 ========== */
.pay-qr-modal{display:none;position:fixed;inset:0;z-index:1005;align-items:center;justify-content:center;}
.pay-qr-modal.show{display:flex;}
.pqm-mask{position:absolute;inset:0;background:rgba(0,0,0,0.55);}
.pqm-box{
    position:relative;z-index:1;background:#fff;border-radius:20px;
    width:340px;max-width:calc(100% - 40px);padding:26px 24px 22px;
    box-shadow:0 20px 60px rgba(0,0,0,.2);text-align:center;
    animation:pqmIn .28s cubic-bezier(.22,.61,.36,1);
}
@keyframes pqmIn{from{transform:translateY(14px) scale(.95);opacity:0;}to{transform:translateY(0) scale(1);opacity:1;}}
.pqm-close{
    position:absolute;top:10px;right:14px;
    width:28px;height:28px;line-height:26px;text-align:center;
    font-size:24px;color:#94a3b8;cursor:pointer;border-radius:50%;
    transition:background .15s, color .15s;
}
.pqm-close:hover{background:#f2f4f8;color:#475569;}
.pqm-title{font-size:18px;font-weight:800;color:#1a2332;margin-bottom:4px;}
.pqm-tip{font-size:13px;color:#64748b;margin-bottom:18px;}
.pqm-qr-wrap{
    position:relative;width:240px;height:240px;margin:0 auto 14px;
    padding:10px;background:#fff;border-radius:16px;
    border:1.5px solid #eef2f7;box-shadow:0 4px 16px rgba(0,0,0,.06);
}
.pqm-qr{width:100%;height:100%;display:block;border-radius:10px;background:#fafbfc;}
.pqm-logo{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:44px;height:44px;padding:4px;box-sizing:border-box;
    background:#fff;border-radius:12px;overflow:hidden;
    box-shadow:0 2px 10px rgba(0,0,0,.1);
}
.pqm-amount{display:flex;align-items:baseline;justify-content:center;gap:8px;margin-bottom:10px;}
.pqm-amount-label{font-size:13px;color:#64748b;font-weight:600;}
.pqm-amount-val{font-family:"Helvetica Neue",Arial,sans-serif;font-size:28px;font-weight:900;color:#EF4444;line-height:1;}
.pqm-status{
    display:inline-flex;align-items:center;gap:8px;
    font-size:13px;color:#64748b;font-weight:600;
    padding:4px 12px;border-radius:12px;background:#f7f8fa;margin-bottom:6px;
}
.pqm-dot{width:8px;height:8px;border-radius:50%;background:#F59E0B;animation:pqmBlink 1.2s ease-in-out infinite;}
@keyframes pqmBlink{0%,100%{opacity:1;}50%{opacity:.35;}}
.pqm-refresh{display:inline-block;margin-top:6px;font-size:12px;color:#64748b;text-decoration:none;transition:color .15s;}
.pqm-refresh:hover{text-decoration:underline;}
@media(max-width:380px){
    .pqm-box{padding:22px 18px 18px;}
    .pqm-qr-wrap{width:210px;height:210px;}
}

/* ============================================================
   🌙 深色模式（prefers-color-scheme: dark）· 共享组件深色皮肤
   —— 设计基调：深海军蓝卡片 #131C33 + 主文字 #E6EDF8 + 次文字 #9FB0CC
   —— 同时为 sliderCaptcha.css（cap-*）供给宿主令牌：
      --bg-elev / --line / --ink / --mut / --bg-chip / --bg-tab / --bgblue /
      --deep / --grad / --ok-* / --warn-* / --shadow-card（令牌名勿改）
   —— 硬约束（禁止改动）：
      1. 二维码相关容器必须保持浅底才可扫描：
         .pqm-qr-wrap / .pqm-qr / .pqm-logo / .pay-success-box .qr-img / 白底 logo 图片
      2. 品牌图标底色不变：微信绿 #07C160 / 支付宝蓝 #1677FF
      3. 深色下遮罩加深至 rgba(0,0,0,.7)
   —— 注：页面若在自己的内联 <style> 中重声明了同名 :root 令牌（如 --ink/--red），
      因源码顺序在后、会覆盖本文件同名令牌，须在页面自身的 dark 段中同步重映射。
   ============================================================ */
@media (prefers-color-scheme: dark) {
    :root{
        --ink:#E6EDF8;
        --ink-soft:#9FB0CC;
        --orange:#FB923C;
        --red:#F87171;
        --amber:#F0B85C;
        --green:#34D399;
        --blue:#6AA5DF;
        --purple:#A78BFA;
        /* cap-* 宿主令牌（sliderCaptcha.css 靠这些变量取色） */
        --bg-elev:#131C33;
        --line:#2A3752;
        --mut:#93A4C3;
        --bg-chip:#1B2740;
        --bg-tab:#182338;
        --bgblue:rgba(59,130,246,.18);
        --deep:#60A5FA;
        --grad:linear-gradient(135deg,#2563EB,#4F8FF7);
        --ok:#34D399;
        --ok-bg:rgba(16,185,129,.12);
        --ok-line:rgba(52,211,153,.45);
        --warn:#F87171;
        --warn-bg:rgba(239,68,68,.12);
        --warn-line:rgba(248,113,113,.45);
        --shadow-card:0 24px 60px rgba(0,0,0,.55);
    }
    html{ background:#0B1222; color:var(--ink); }
    body{ background-color:#0B1222; color:var(--ink); }

    /* ===== 遮罩加深 ===== */
    .mask,.login-modal,.pay-chooser-mask{ background:rgba(0,0,0,.7); }
    .pqm-mask{ background:rgba(0,0,0,.72); }

    /* ===== 加载/提示 ===== */
    .loading-spinner{ border-color:#2A3752; }
    .toast{ background:rgba(8,12,22,.9); }

    /* ===== 手机号登录弹窗 ===== */
    .login-box{ background:#131C33; box-shadow:0 10px 40px rgba(0,0,0,.55); }
    .login-modal.inline .login-box{ box-shadow:0 6px 24px rgba(0,0,0,.45); }
    .login-box h3{ color:#E6EDF8; }
    .login-box input{ background:#0E1730; border-color:#2A3752; color:#E6EDF8; }
    .login-box input::placeholder{ color:#5F7195; }
    .login-box input:focus{ border-color:#5B9BE8; }
    .login-code-btn:disabled,.login-submit:disabled{ background:#24324F; color:#8AA0C4; }
    .login-tip-row{ color:#9FB0CC; }
    .login-tip-row em{ color:#FF7A55; }
    .login-close{ color:#8298BD; }
    .login-actions{ color:#8298BD; }
    .login-actions a{ color:#6AA2FF; }

    /* ===== 支付方式选择弹窗 ===== */
    .pay-chooser-sheet{ background:#131C33; box-shadow:0 -4px 24px rgba(0,0,0,.55); }
    .pcs-handle{ background:#2A3752; }
    .pcs-title{ color:#E6EDF8; }
    .pcs-main{ color:#E6EDF8; }
    .pcs-sub{ color:#93A4C3; }
    .pcs-arrow{ color:#4A5A7A; }
    .pcs-item:active{ background:#1B2740; }
    @media (hover:hover){ .pcs-item:hover{ background:#1B2740; } }
    .pcs-cancel{ background:#1B2740; color:#C7D4EC; }
    .pcs-cancel:active{ background:#24324F; }
    /* 品牌图标底色不变：.pcs-ic-wx #07C160 / .pcs-ic-ali #1677FF / .pcs-ic-img 白底 logo 保持浅底 */

    /* ===== 支付成功盒（payKit 共用皮肤） ===== */
    .pay-success-box{ background:#131C33; color:#E6EDF8; box-shadow:0 10px 40px rgba(0,0,0,.55); }
    .pay-success-box .pcs-title,.pay-success-box .pcs-main{ color:#E6EDF8; }
    .pay-success-box .pcs-sub{ color:#93A4C3; }

    /* ===== PC 二维码支付弹窗 ===== */
    .pqm-box{ background:#131C33; border:1px solid #2A3752; box-shadow:0 20px 60px rgba(0,0,0,.6); }
    .pqm-close{ color:#8298BD; }
    .pqm-close:hover{ background:#1B2740; color:#E6EDF8; }
    .pqm-title{ color:#E6EDF8; }
    .pqm-tip{ color:#9FB0CC; }
    .pqm-amount-label{ color:#9FB0CC; }
    .pqm-amount-val{ color:#F87171; }
    .pqm-status{ color:#AAB9D6; background:#1B2740; }
    .pqm-refresh{ color:#9FB0CC; }
    /* 二维码浅底保留（硬约束，必须可扫）：显式重申白底，防层叠意外 */
    .pqm-qr-wrap{ background:#ffffff; border-color:#eef2f7; }
    .pqm-qr{ background:#fafbfc; }
    .pqm-logo{ background:#ffffff; }
    .pay-success-box .qr-img{ background:#ffffff; }

    /* ===== 拼图验证码 cap-*：组件白底小件的硬编码浅色 → 深色（图片面板除外） ===== */
    .cap-refresh{ background:rgba(255,255,255,.16); color:#E6EDF8; }
    .cap-refresh:hover{ background:rgba(255,255,255,.28); color:#E6EDF8; }
    .cap-loading{ background:rgba(19,28,51,.65); }
}