/* ═══════════════════════════════════════════════════════════
   六合彩 ML 预测系统 · 全站样式表
   设计规范（参考 example.jpg）：
   - 仅导航栏（NAV）使用蓝色渐变，内容区不再有蓝色背景
   - 内容区为浅灰白底（#f3f5f9），卡片白色
   - 主按钮保留蓝色渐变，其余彩色按钮（绿/紫/橙/红/金）按语义保留
   ═══════════════════════════════════════════════════════════ */

/* ─── 全局 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;          /* 导航栏渐变收底（深蓝） */
}

*{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",sans-serif;padding:20px;min-height:100vh;
    transition:background .3s;
}

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

/* ─── 导航栏：全宽蓝色渐变条，贴合参考图设计 ─── */
.nav{
    display:flex;gap:6px;margin:-20px -20px 20px -20px;padding:0 20px;flex-wrap:wrap;align-items:center;
    background:linear-gradient(135deg,var(--nav1),var(--nav2));
    box-shadow:0 4px 20px rgba(15,111,224,.35);
}
.nav a{
    color:#fff;text-decoration:none;padding:13px 16px;font-size:13px;transition:all .2s;
    border-bottom:3px solid transparent;opacity:.85;
}
.nav a:hover{opacity:1;background:rgba(255,255,255,.14)}
.nav a.active{border-bottom-color:#fff;background:rgba(255,255,255,.12);opacity:1;font-weight:600}
.nav .spacer{flex:1}
.nav .ds-pill{color:#fff;background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.55);box-shadow:none}

/* ─── 顶部用户信息条 ─── */
.topbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.topbar .sub{color:#4d6a8f}
.userbox{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 14px;font-size:13px;box-shadow:0 4px 18px rgba(15,111,224,.08)}
.userbox .uname{color:var(--tx);font-weight:bold}
.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:3px 12px;border-radius:20px;cursor:pointer;transition:all .2s;box-shadow:0 0 10px var(--glow)}
.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-menu{position:absolute;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 40px rgba(15,111,224,.18);padding:6px;z-index:100;min-width:130px}
.ds-menu .ds-opt{display:block;width:100%;text-align:left;background:transparent;border:none;color:var(--tx);padding:8px 12px;border-radius:8px;font-size:13px;cursor:pointer}
.ds-menu .ds-opt:hover{background:rgba(36,161,255,.10)}
.ds-menu .ds-opt.active{background:linear-gradient(135deg,rgba(36,161,255,.22),rgba(36,161,255,.12));color:#0f6fd6;font-weight:600}
.ds-tag{display:inline-block;font-size:11px;padding:1px 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:2px 9px;border-radius:20px;box-shadow:0 0 10px rgba(245,196,81,.4)}
.vip-badge.gray{background:#eef2f8;color:#7a8ba3;box-shadow:none}

/* ─── 卡片与按钮 ─── */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:16px;
    box-shadow:0 6px 24px rgba(15,111,224,.06), inset 0 1px 0 rgba(255,255,255,.8)}
.card h2{font-size:15px;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.btn{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;border:none;padding:8px 18px;border-radius:9px;cursor:pointer;font-size:13px;margin-right:8px;box-shadow:0 4px 14px rgba(36,161,255,.28);transition:all .2s}
.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:4px 10px;font-size:12px}
.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:7px 8px;border-bottom:1px solid var(--line);text-align:center;vertical-align:middle}
th{color:var(--mut);font-weight:normal;font-size:12px}
tr:hover td{background:rgba(36,161,255,.05)}
.badge{font-size:11px;padding:2px 10px;border-radius:20px;display:inline-block}
.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}

/* ─── 其他组件 ─── */
.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:7px 10px;border-radius:8px;font-size:13px;transition:border-color .2s,box-shadow .2s}
input:focus,select:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(36,161,255,.15)}
#toast{position:fixed;top:20px;right:20px;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)}

/* ─── 登录/注册页（不继承 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",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:16px;padding:36px 38px;width:380px;max-width:100%;
    box-shadow:0 22px 60px rgba(15,111,224,.14), 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:24px}
.auth-box input{width:100%;padding:11px 13px;margin-bottom:14px;border:1px solid var(--line);border-radius:9px;
    font-size:14px;transition:border-color .2s,box-shadow .2s;background:#ffffff;color:var(--tx)}
.auth-box input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(36,161,255,.15)}
.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:9px;
    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)}
.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:12px;border:none;border-radius:9px;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)}
.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}

/* ── Cloudflare 风格滑块验证码（浅色适配，三个登录页共用） ── */
.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}
/* Chrome <88 无 aspect-ratio 兜底：用 padding-top 等比撑高 */
@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:38px;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:44px;height:36px;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(180px,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(420px,1fr));gap:16px}
.num-chip{display:inline-block;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)}
.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:5px 8px;border-bottom:1px solid var(--line);font-size:13px;font-family:Consolas,monospace}
.combo-item .p{color:var(--ok)}
.pool-chip{display:inline-block;padding:2px 8px;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}
.tbl-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl-wrap table{min-width:520px}
.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:10px 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}

/* ─── 后台（admin）页面级样式 ─── */
.tbl-wrap table.min-w680{min-width:680px}

/* ═══ 全局移动端适配（各页面可叠加自身规则） ═══ */
@media (max-width:768px){
    body{padding:14px}
    .nav{margin:-14px -14px 16px -14px;padding:0 14px}
    .nav a{padding:12px 10px;font-size:12px;flex:1;text-align:center}
    .topbar{flex-direction:column;align-items:flex-start}
    .userbox{width:100%;justify-content:space-between}
    h1{font-size:18px}
    .card{padding: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:28px;height:28px;line-height:28px;font-size:11px}
    .auth-body{padding:16px 12px;align-items:flex-start}
    .auth-box{width:100%;max-width:100%;padding:28px 20px;border-radius:12px;margin-top:6vh}
    .auth-box h2{font-size:20px}
    .auth-box input{padding:13px 13px;font-size:15px}
    .auth-box button{padding:13px;font-size:16px}
    .sc-track{height:44px}
    .sc-slider{width:48px;height:42px;font-size:17px}
    .sc-hint,.sc-status{font-size:12.5px}
    #baselineBox{grid-template-columns:1fr !important}
    .tbl-wrap table{min-width:640px}
    .btn.sm{padding:3px 8px;font-size:11px}
}
@media (max-width:480px){
    body{padding:10px}
    .nav{margin:-10px -10px 14px -10px;padding:0 10px;gap:4px}
    .nav a{padding:11px 4px;font-size:11px}
    h1{font-size:16px}
    .card{padding:12px}
    .userbox{padding:6px 10px;font-size:12px}
    .z-grid{grid-template-columns:repeat(2,1fr);gap:8px}
    .combo-item{font-size:11px;padding:4px 4px}
    .tbl-wrap table{min-width:460px}
    input,select{max-width:100%}
    .tbl-wrap table.min-w680{min-width:600px}
}