/* ═══════════════════════════════════════════════════════════
   六合彩 ML 预测系统 · 全站响应式样式表（移动优先重设计）
   设计原则：
   - 仅导航栏（NAV）使用蓝色渐变点缀，内容区浅灰白底、白色卡片
   - 移动优先：手机/平板/桌面三档断点，导航横向滚动胶囊化，表格触摸友好
   - 保留全部历史 class 名称以兼容既有页面与 JS
   ═══════════════════════════════════════════════════════════ */

/* ─── 全局 CSS 变量（主题色板 + 设计令牌） ─── */
:root{
    --bg:#f3f5f9;            /* 页面底色（浅灰白，内容区不再有蓝） */
    --bg2:#eef1f6;          /* 次级底色（更浅的灰） */
    --bg3:#e7ebf2;          /* 渐变收底色（底部稍深灰） */
    --card:#FFFFFF;         /* 卡片 内容背景色（白色） */
    --card2:#f4f7fb;        /* 卡片内嵌/次级（极浅蓝灰） */
    --line:#dde3ec;         /* 边框（浅灰蓝） */
    --tx:#1c2b3a;           /* 主文字（深灰蓝，保证白底可读） */
    --mut:#7a8ba3;          /* 次要文字（中灰蓝） */
    --acc:#24A1FF;          /* 主强调 按钮颜色（亮蓝） */
    --acc2:#0f82e8;         /* 次强调 按钮渐变收色 */
    --ok:#2fd573;           /* 成功绿 */
    --warn:#f5a623;         /* 橙黄 */
    --red:#f2555a;          /* 红 */
    --purple:#8b5cf6;       /* 紫 */
    --gold:#f5c451;         /* 金 */
    --glow:rgba(36,161,255,.14);
    --glass:rgba(255,255,255,.6);
    --nav1:#2b7ff0;         /* 导航栏渐变起始（蓝） */
    --nav2:#0f6fe0;         /* 导航栏渐变收底（深蓝） */

    /* 设计令牌（新增） */
    --header-h:56px;        /* 顶栏高度 */
    --radius-lg:16px;       /* 大圆角（卡片） */
    --radius-md:12px;       /* 中圆角（控件/小卡） */
    --radius-sm:9px;        /* 小圆角（输入） */
    --shadow-sm:0 2px 8px rgba(15,111,224,.06);
    --shadow-md:0 6px 24px rgba(15,111,224,.08);
    --shadow-lg:0 12px 40px rgba(15,111,224,.14);
    --tap:44px;             /* 最小触控尺寸 */
    --maxw:1180px;          /* 内容最大宽度（PC 居中留白） */
}

*{box-sizing:border-box;margin:0;padding:0}

/* ─── 页面主体：浅灰白底 + 顶部极淡蓝光晕 ─── */
body{
    background:
        radial-gradient(1000px 420px at 50% -120px, rgba(36,161,255,.10), transparent 60%),
        linear-gradient(180deg,var(--bg2) 0%,var(--bg) 55%,var(--bg3) 100%);
    background-attachment:fixed;
    color:var(--tx);font-family:"Microsoft YaHei","PingFang SC",sans-serif;
    min-height:100vh;font-size:14px;line-height:1.55;
    -webkit-text-size-adjust:100%;
    transition:background .3s;
}

/* 内容容器：PC 居中限宽，手机自然铺满 */
.wrap{max-width:var(--maxw);margin:0 auto;padding:16px}

h1{font-size:21px;display:flex;align-items:center;gap:10px;margin-bottom:6px}
.sub{color:var(--mut);font-size:13px;margin-bottom:18px}

/* ═══ 顶栏 App Bar（替代原 topbar，sticky 玻璃拟态） ═══ */
.topbar{
    position:sticky;top:0;z-index:60;
    display:flex;align-items:center;gap:10px;
    height:var(--header-h);padding:0 14px;
    background:rgba(255,255,255,.82);
    backdrop-filter:saturate(180%) blur(14px);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
    border-bottom:1px solid var(--line);
    box-shadow:0 1px 0 rgba(15,111,224,.06), 0 6px 20px rgba(15,111,224,.05);
}
.topbar .brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:15px;color:var(--tx);white-space:nowrap}
.topbar .brand .logo{
    width:30px;height:30px;border-radius:9px;flex-shrink:0;
    background:linear-gradient(135deg,var(--nav1),var(--nav2));
    display:flex;align-items:center;justify-content:center;font-size:16px;
    box-shadow:0 4px 12px rgba(15,111,224,.35);
}
.topbar .brand small{display:block;font-weight:500;font-size:10px;color:var(--mut);line-height:1}
.topbar .top-sub{color:#4d6a8f;font-size:12px;margin-left:2px}
.userbox{display:flex;align-items:center;gap:8px;margin-left:auto}
.userbox .uname{color:var(--tx);font-weight:bold;font-size:13px;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.userbox .btn.ghost{padding:6px 10px;font-size:12px}

/* 汉堡按钮（移动端显示，桌面隐藏） */
.menu-btn{
    display:none;width:var(--tap);height:var(--tap);flex-shrink:0;
    border:none;background:transparent;border-radius:10px;cursor:pointer;
    align-items:center;justify-content:center;color:var(--tx);
}
.menu-btn:hover{background:rgba(36,161,255,.10)}
.menu-btn .bars{width:20px;height:14px;position:relative}
.menu-btn .bars i{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:var(--tx);transition:.25s}
.menu-btn .bars i:nth-child(1){top:0}
.menu-btn .bars i:nth-child(2){top:6px}
.menu-btn .bars i:nth-child(3){top:12px}

/* 移动端用户菜单弹出层 */
.user-menu{
    position:fixed;top:var(--header-h);right:10px;z-index:70;
    background:var(--card);border:1px solid var(--line);border-radius:14px;
    box-shadow:var(--shadow-lg);padding:8px;min-width:200px;
    display:none;flex-direction:column;gap:4px;
}
.user-menu.open{display:flex;animation:pop .15s ease}
@keyframes pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.user-menu .um-head{padding:8px 10px;border-bottom:1px solid var(--line);margin-bottom:4px}
.user-menu .um-head .u{font-weight:700}
.user-menu .um-head .v{font-size:11px;color:var(--mut)}
.user-menu button{text-align:left;width:100%;border:none;background:transparent;color:var(--tx);
    padding:10px 10px;border-radius:9px;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:8px}
.user-menu button:hover{background:rgba(36,161,255,.10)}

/* ─── 数据源切换（Pill） ─── */
.ds-switch{display:flex;align-items:center;gap:6px}
.ds-pill{display:inline-flex;align-items:center;gap:4px;background:linear-gradient(135deg,rgba(36,161,255,.18),rgba(36,161,255,.10));border:1px solid var(--acc);color:#0f6fd6;font-size:12px;font-weight:600;padding:6px 12px;border-radius:20px;cursor:pointer;transition:all .2s;box-shadow:0 0 10px var(--glow);white-space:nowrap;flex-shrink:0}
.ds-pill:hover{border-color:var(--acc2);box-shadow:0 0 14px rgba(36,161,255,.28)}
.ds-pill.ds-lao6{background:linear-gradient(135deg,rgba(245,196,81,.28),rgba(245,166,35,.20));border-color:var(--gold);color:#8a5b00;box-shadow:0 0 10px rgba(245,196,81,.25)}
/* ─── 数据源切换弹窗（居中弹窗，替代原绝对定位下拉：手机上不再贴边/被裁切，一次点击即可确认） ─── */
.ds-modal{position:fixed;inset:0;background:rgba(15,30,50,.45);z-index:320;display:flex;align-items:center;justify-content:center;padding:16px;animation:dsFade .16s ease-out}
@keyframes dsFade{from{opacity:0}to{opacity:1}}
@keyframes dsPop{from{transform:translateY(10px) scale(.98);opacity:.55}to{transform:none;opacity:1}}
.ds-modal-card{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);width:440px;max-width:100%;max-height:92vh;overflow:auto;animation:dsPop .18s ease-out}
.ds-modal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px 8px}
.ds-modal-head h3{margin:0;font-size:16px;color:var(--tx)}
.ds-modal-x{background:transparent;border:none;color:var(--mut);font-size:15px;line-height:1;cursor:pointer;padding:6px 9px;border-radius:8px}
.ds-modal-x:hover{background:var(--card2);color:var(--tx)}
.ds-modal-sub{padding:0 18px 12px;font-size:12px;color:var(--mut);line-height:1.7}
.ds-modal-opts{display:flex;flex-direction:column;gap:10px;padding:0 18px}
.ds-modal-opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;background:var(--card2);border:1.5px solid var(--line);border-radius:12px;padding:13px 14px;color:var(--tx);font-size:14px;transition:border-color .15s,background .15s,box-shadow .15s;font-family:inherit}
.ds-modal-opt:hover{border-color:var(--acc)}
.ds-modal-opt.picked{border-color:var(--acc);background:linear-gradient(135deg,rgba(36,161,255,.14),rgba(36,161,255,.05));box-shadow:0 0 0 1px var(--acc) inset}
.ds-modal-opt .dot{position:relative;width:18px;height:18px;border-radius:50%;border:2px solid var(--line);flex-shrink:0;transition:border-color .15s}
.ds-modal-opt.picked .dot{border-color:var(--acc)}
.ds-modal-opt.picked .dot::after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--acc)}
.ds-modal-opt .t{display:block;font-weight:600}
.ds-modal-opt .d{display:block;font-size:11.5px;color:var(--mut);margin-top:3px;line-height:1.55}
.ds-modal-opt .cur{margin-left:auto;flex-shrink:0;font-size:11px;padding:2px 8px;border-radius:10px;background:rgba(34,197,94,.16);color:#15803d;border:1px solid rgba(34,197,94,.35)}
.ds-modal-hint{display:none;margin:12px 18px 0;font-size:12px;line-height:1.6;color:#b9740a;background:rgba(245,166,35,.12);border:1px solid rgba(245,166,35,.35);border-radius:9px;padding:8px 10px}
.ds-modal-foot{display:flex;gap:10px;justify-content:flex-end;padding:16px 18px 18px}
.ds-modal-ok{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;border:none}
.ds-modal-ok:disabled{opacity:.5;cursor:not-allowed;filter:grayscale(.35)}
@media (max-width:480px){
    .ds-modal{padding:10px;align-items:flex-end}
    .ds-modal-card{width:100%;border-radius:16px 16px 12px 12px}
    .ds-modal-foot{flex-direction:column-reverse}
    .ds-modal-foot .btn{width:100%}
}
.ds-tag{display:inline-block;font-size:11px;padding:2px 8px;border-radius:12px;margin-left:8px;vertical-align:1px}
.ds-tag.ds-lao6{background:rgba(245,196,81,.22);color:#8a5b00;border:1px solid rgba(245,196,81,.45)}
.ds-tag.ds-liu{background:rgba(36,161,255,.14);color:#0f6fd6;border:1px solid rgba(36,161,255,.35)}
.vip-badge{display:inline-flex;align-items:center;gap:3px;background:linear-gradient(135deg,#f5c451,#f0a020);color:#241a03;font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;box-shadow:0 0 10px rgba(245,196,81,.4);white-space:nowrap;flex-shrink:0}
.vip-badge.gray{background:#eef2f8;color:#7a8ba3;box-shadow:none}

/* ─── 页面内导航：横向滚动胶囊条（替代原整条蓝底 nav） ─── */
.nav{
    display:flex;gap:8px;align-items:center;
    padding:6px;margin:0 0 16px;
    background:var(--card);border:1px solid var(--line);border-radius:14px;
    box-shadow:var(--shadow-sm);
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
}
.nav::-webkit-scrollbar{display:none}
.nav a,.nav .ds-pill{
    flex:0 0 auto;white-space:nowrap;text-decoration:none;
    padding:9px 16px;border-radius:999px;font-size:13px;font-weight:600;
    color:var(--mut);background:transparent;border:1px solid transparent;cursor:pointer;transition:all .18s;
}
.nav a:hover{color:var(--acc);background:rgba(36,161,255,.08)}
.nav a.active{
    color:#fff;background:linear-gradient(135deg,var(--acc),var(--acc2));
    box-shadow:0 4px 14px rgba(36,161,255,.30);
}
.nav .spacer{flex:1 1 auto}
/* admin 页面隐藏 base 顶栏数据源切换（页面内 #adminDsPill 代替，避免双切换冲突） */
.page-admin .topbar .ds-switch{display:none}

/* ═══ 卡片与按钮 ═══ */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px;margin-bottom:16px;box-shadow:var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.8)}
.card h2{font-size:15px;margin-bottom:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card h2 .btn{margin-left:auto}
.btn{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;border:none;padding:10px 18px;border-radius:var(--radius-sm);cursor:pointer;font-size:13px;font-weight:600;margin-right:8px;box-shadow:0 4px 14px rgba(36,161,255,.28);transition:all .2s;min-height:var(--tap);display:inline-flex;align-items:center;justify-content:center}
.btn:hover{filter:brightness(1.12);box-shadow:0 6px 18px rgba(36,161,255,.38)}
.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;filter:none}
.btn.green{background:linear-gradient(135deg,#2fd573,#1fae5a)}.btn.green:hover{filter:brightness(1.1);box-shadow:0 6px 18px rgba(47,213,115,.35)}
.btn.purple{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}.btn.purple:hover{filter:brightness(1.12);box-shadow:0 6px 18px rgba(139,92,246,.4)}
.btn.orange{background:linear-gradient(135deg,#f5a623,#e08900);color:#1d1200}.btn.orange:hover{filter:brightness(1.08);box-shadow:0 6px 18px rgba(245,166,35,.35)}
.btn.danger{background:linear-gradient(135deg,#f2555a,#dc3d42)}.btn.danger:hover{filter:brightness(1.1);box-shadow:0 6px 18px rgba(242,85,90,.35)}
.btn.gold{background:linear-gradient(135deg,#f5c451,#f0a020);color:#241a03;font-weight:700}.btn.gold:hover{filter:brightness(1.05);box-shadow:0 6px 18px rgba(245,196,81,.4)}
.btn.sm{padding:7px 12px;font-size:12px;min-height:34px;margin-right:6px;box-shadow:none}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--mut);box-shadow:none}
.btn.ghost:hover{border-color:var(--acc);color:var(--acc);background:rgba(255,255,255,.6);box-shadow:none}

/* ─── 表格 ─── */
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:center;vertical-align:middle}
th{color:var(--mut);font-weight:600;font-size:12px;white-space:nowrap;background:var(--card2)}
tr:hover td{background:rgba(36,161,255,.05)}
.badge{font-size:11px;padding:3px 10px;border-radius:20px;display:inline-block;white-space:nowrap}
.badge.running{background:rgba(36,161,255,.14);color:#0f6fd6}
.badge.success{background:rgba(47,213,115,.16);color:#128a44}
.badge.failed{background:rgba(242,85,90,.15);color:#c92f35}
.badge.pending{background:rgba(245,166,35,.16);color:#b9740a}
.badge.hit{background:rgba(47,213,115,.16);color:#128a44}
.badge.miss{background:rgba(139,92,246,.15);color:#6d3fd8}

/* 表格包裹：横向滚动 + 触摸友好 */
.tbl-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.tbl-wrap table{min-width:520px;border-collapse:collapse}
.tbl-wrap table.min-w680{min-width:680px}
.tbl-wrap table.min-w600{min-width:600px}

/* ─── 其他组件 ─── */
.log-box{background:#f6f9fd;border:1px solid var(--line);border-radius:8px;padding:10px;max-height:240px;overflow-y:auto;font-family:Consolas,monospace;font-size:12px;color:#23466e;white-space:pre-wrap;word-break:break-all}
input,select{background:#ffffff;border:1px solid var(--line);color:var(--tx);padding:10px 12px;border-radius:var(--radius-sm);font-size:14px;transition:border-color .2s,box-shadow .2s;width:100%;min-height:var(--tap);max-width:100%}
input:focus,select:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(36,161,255,.15)}
input[type=checkbox],input[type=radio]{width:auto;min-height:0}
#toast{position:fixed;top:14px;right:14px;background:linear-gradient(135deg,#1f8fe6,#24A1FF);color:#fff;padding:12px 20px;border-radius:10px;display:none;z-index:99;font-size:14px;box-shadow:0 4px 20px rgba(0,0,0,.25)}
.lock-card{position:relative;overflow:hidden}
.lock-card::after{content:"🔒 VIP 专属内容，开通 VIP 后可见完整预测";position:absolute;inset:0;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--gold);backdrop-filter:blur(3px);text-align:center;padding:20px}

/* ─── 登录/注册页（不继承 base 的独立页面） ─── */
.auth-body{
    background:
        radial-gradient(900px 420px at 50% -100px, rgba(36,161,255,.12), transparent 60%),
        linear-gradient(180deg,#eef1f6 0%,#f3f5f9 55%,#e7ebf2 100%);
    font-family:"Microsoft YaHei","PingFang SC",sans-serif;
    min-height:100vh;display:flex;justify-content:center;align-items:center;padding:16px;
}
.auth-box{background:#ffffff;border:1px solid var(--line);border-radius:18px;padding:32px 30px;width:400px;max-width:100%;box-shadow:var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.8)}
.auth-box .shield{text-align:center;font-size:44px;margin-bottom:10px}
.auth-box h2{color:var(--tx);text-align:center;margin-bottom:6px;font-size:22px}
.auth-box .sub{text-align:center;color:var(--mut);font-size:13px;margin-bottom:22px}
.auth-box input{margin-bottom:14px}
.auth-box .email-row{display:flex;gap:8px;margin-bottom:14px}
.auth-box .email-row input{flex:1;margin-bottom:0}
.auth-box .btn-code{width:auto;flex-shrink:0;padding:0 14px;border:none;border-radius:var(--radius-sm);
    background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;font-size:13px;cursor:pointer;
    white-space:nowrap;transition:opacity .2s;box-shadow:0 6px 20px rgba(36,161,255,.25);min-height:var(--tap)}
.auth-box .btn-code:hover{opacity:.9}
.auth-box .btn-code:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}
.auth-box button{width:100%;padding:13px;border:none;border-radius:var(--radius-sm);background:linear-gradient(135deg,var(--acc),var(--acc2));
    color:#fff;font-size:15px;cursor:pointer;transition:opacity .2s;box-shadow:0 6px 20px rgba(36,161,255,.25);min-height:var(--tap);font-weight:600}
.auth-box button:hover{opacity:.9}
.auth-box .tip{text-align:center;margin-top:16px;font-size:13px;color:var(--mut)}
.auth-box .tip a{color:#0f6fd6;text-decoration:none}
.auth-box .tip a:hover{text-decoration:underline}
.auth-box .err{color:#c92f35;font-size:12.5px;min-height:18px;margin-bottom:6px;text-align:center}
.auth-box .init-tip{margin-top:14px;padding:10px 12px;background:#f2f7ff;border:1px dashed #c9e0f8;border-radius:10px;font-size:12px;color:#5a7a9e;line-height:1.7}
.auth-box .init-tip b{color:#b9740a}
.auth-toast{position:fixed;top:20px;left:50%;transform:translateX(-50%);padding:10px 22px;border-radius:8px;color:#fff;font-size:14px;z-index:200;display:none}
.auth-toast.ok{background:#1fae5a}.auth-toast.err{background:#dc3d42}

/* ── 滑块验证码（浅色适配，三个登录页共用） ── */
.slider-captcha{border:1px solid var(--line);border-radius:10px;margin-bottom:14px;background:#f2f7ff;overflow:hidden;user-select:none}
.sc-head{display:flex;justify-content:space-between;align-items:center;padding:6px 12px;border-bottom:1px solid var(--line)}
.sc-title{font-size:13px;color:var(--mut);font-weight:600}
.sc-refresh{cursor:pointer;font-size:16px;color:#8aa3c0;line-height:1;padding:2px 4px;transition:transform .3s}
.sc-refresh:hover{color:#0f6fd6;transform:rotate(180deg)}
.sc-body{position:relative;width:100%;padding:10px}
.sc-bg{position:relative;width:100%;aspect-ratio:300/160;border-radius:8px;overflow:hidden;background:#eaf3ff}
@supports not (aspect-ratio: 1 / 1){.sc-bg{height:0;padding-top:53.33%}}
.sc-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@supports not (inset: 0){.sc-bg img,.sc-track-bg{left:0;top:0;right:0;bottom:0}}
.sc-piece{position:absolute;z-index:3;pointer-events:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}
.sc-piece img{width:100%;height:100%;display:block}
.sc-piece.success{opacity:0;transition:opacity .35s}
.sc-hint{font-size:12px;color:#8aa3c0;text-align:center;padding:2px 0 8px}
.sc-track{position:relative;height:40px;margin:0;border:1px solid var(--line);border-radius:8px;background:#ffffff;cursor:pointer}
.sc-track-bg{position:absolute;inset:0;border-radius:8px;background:transparent}
.sc-track-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:8px;background:rgba(47,213,115,.18)}
.sc-slider{position:absolute;left:0;top:0;width:46px;height:38px;display:flex;align-items:center;justify-content:center;background:#eaf3ff;border:1px solid var(--line);border-radius:7px;font-size:15px;color:#5a7a9e;cursor:grab;transition:box-shadow .15s}
.sc-slider:hover{box-shadow:0 2px 8px rgba(36,161,255,.22)}
.sc-slider.dragging{cursor:grabbing;box-shadow:0 2px 10px rgba(36,161,255,.28)}
.sc-slider.verified{background:linear-gradient(135deg,#2fd573,#1fae5a);color:#fff;border-color:#1fae5a;cursor:default}
.sc-slider.failed{background:#f2555a;color:#fff;border-color:#f2555a}
.sc-status{display:none;font-size:12.5px;text-align:center;padding:2px 0 8px}
.sc-status.ok{display:block;color:#2fd573}
.sc-status.err{display:block;color:#f2555a}
.sc-status .sc-check{font-size:14px}

/* ─── 首页（index）页面级样式 ─── */
.z-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.z-item{background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:12px;text-align:center}
.z-item .z{font-size:26px;font-weight:bold}
.z-item .nums{color:var(--mut);font-size:12px;margin-top:6px;letter-spacing:2px}
.prob-bar{height:6px;background:#dfe6f0;border-radius:3px;margin-top:6px;overflow:hidden}
.prob-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--acc2));border-radius:3px}
.prob{color:var(--ok);font-size:12px;font-weight:bold}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:16px}
.num-chip{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;line-height:32px;border-radius:50%;background:var(--card2);border:1px solid var(--line);font-size:12px;text-align:center;margin:2px;box-shadow:0 2px 8px rgba(15,111,224,.10);flex-shrink:0}
.num-chip.tema{background:rgba(242,85,90,.15);border-color:var(--red);color:#c92f35;font-weight:bold}
.num-chip.bo-red{background:linear-gradient(135deg,#f2555a,#c42f3a);border-color:#c42f3a;color:#fff;font-weight:bold}
.num-chip.bo-blue{background:linear-gradient(135deg,#4f8cff,#3a5fd0);border-color:#3a5fd0;color:#fff;font-weight:bold}
.num-chip.bo-green{background:linear-gradient(135deg,#2fd573,#1fae5a);border-color:#1fae5a;color:#fff;font-weight:bold}
.num-chip.bo-num{background:linear-gradient(135deg,#4a6c8e,#33485e);border-color:#33485e;color:#fff}
.combo-list{max-height:260px;overflow-y:auto}
.combo-item{display:flex;justify-content:space-between;padding:6px 8px;border-bottom:1px solid var(--line);font-size:13px;font-family:Consolas,monospace;gap:8px}
.combo-item .p{color:var(--ok);white-space:nowrap}
.pool-chip{display:inline-block;padding:3px 9px;margin:2px;border-radius:14px;background:var(--card2);border:1px solid var(--line);font-size:12px}
.pool-chip.top{background:rgba(36,161,255,.14);border-color:var(--acc);color:#0f6fd6}
.acc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.acc-item{background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:12px;text-align:center}
.acc-item .lb{font-size:11px;color:var(--mut);margin-bottom:4px}
.acc-item .val{font-size:20px;font-weight:bold}
.acc-item .cmp{font-size:11px;color:var(--mut);margin-top:2px}
.acc-item .cmp.up{color:var(--ok)}
.acc-item .cmp.down{color:var(--red)}
.pred-hit{color:var(--ok);font-weight:bold}
.pred-miss{color:var(--red);font-weight:bold}
.pred-pend{color:var(--warn)}
.sample-warn{display:flex;align-items:center;gap:6px;background:rgba(245,166,35,.12);border:1px solid rgba(245,166,35,.35);border-radius:8px;padding:8px 12px;font-size:12px;color:var(--gold);margin-bottom:12px}
.loading{color:var(--mut);padding:20px;text-align:center}

/* ═══════════════════════════════════════════════
   响应式断点（移动优先）
   ═══════════════════════════════════════════════ */

/* 平板及以下：启用汉堡用户菜单，顶栏精简 */
@media (max-width:860px){
    .topbar .top-sub{display:none}
    .topbar .brand small{display:none}
    .menu-btn{display:inline-flex}
    .userbox{margin-left:auto}
    .userbox .uname-wrap,.userbox .vip-badge,.userbox .btn.ghost{display:none}
    .userbox .ds-pill{display:inline-flex}
    .topbar{padding:0 10px;gap:6px}
}

/* 手机：进一步压缩间距、字号、控件尺寸 */
@media (max-width:600px){
    .wrap{padding:12px}
    h1{font-size:18px}
    .card{padding:14px;border-radius:14px}
    .card h2{font-size:14px}
    .grid-2{grid-template-columns:1fr}
    .z-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
    .z-item .z{font-size:22px}
    .num-chip{width:30px;height:30px;line-height:30px;font-size:11px}
    .nav{margin-bottom:12px;padding:5px}
    .nav a,.nav .ds-pill{padding:8px 13px;font-size:12.5px}
    .btn{width:100%;margin-right:0;margin-bottom:8px}
    .btn.sm{width:auto;margin-right:6px;margin-bottom:6px}
    .card h2 .btn{margin-left:0}
    /* 控件组：移动端自动纵向堆叠 */
    .row-wrap{display:flex;flex-direction:column;gap:10px}
    .row-wrap > *{width:100%!important}
    .tbl-wrap table{min-width:560px}
    .tbl-wrap table.min-w680{min-width:560px}
    .tbl-wrap table.min-w600{min-width:480px}
    input,select{padding:11px 12px;font-size:15px;margin-bottom:10px}
    /* 滑块验证码触控加大 */
    .sc-track{height:46px}
    .sc-slider{width:50px;height:44px;font-size:17px}
    .sc-hint,.sc-status{font-size:12.5px}
    .auth-box{padding:26px 18px;border-radius:14px;margin-top:4vh}
    .auth-box h2{font-size:20px}
    .auth-box .email-row{flex-wrap:wrap}
    .auth-box .email-row input{flex:1 1 100%}
    .auth-box .btn-code{width:100%}
}
@media (max-width:400px){
    .z-grid{grid-template-columns:repeat(2,1fr);gap:8px}
    .combo-item{font-size:11px;padding:5px 4px}
    .tbl-wrap table{min-width:460px}
    .tbl-wrap table.min-w600{min-width:440px}
    .num-chip{width:28px;height:28px;line-height:28px}
}

/* PC 大屏：内容限宽居中，留白更舒适 */
@media (min-width:1181px){
    h1{font-size:23px}
    .card{padding:22px}
}