/* 腾讯娱乐 · 管理后台样式 */
:root{
  --bg:#070d18; --bg2:#0a1421; --panel:#0c1727; --panel2:#101e31; --line:rgba(255,255,255,.07);
  --line2:rgba(255,255,255,.12); --txt:#e9effb; --dim:#8298b8; --dim2:#5d7699;
  --blue:#3b82f6; --blue-d:#1d4ed8; --green:#34d399; --red:#f87171; --amber:#fbbf24;
  --r:13px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--txt); font-size:14px; line-height:1.5;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{cursor:pointer;color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit;font-size:13px}
input,select{
  font-family:inherit;font-size:13px;color:var(--txt);background:#0b1727;
  border:1px solid var(--line2);border-radius:9px;padding:10px 12px;outline:none;transition:.15s;
}
input::placeholder{color:#4e6788}
input:focus,select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,130,246,.15);background:#0d1b2d}
h1,h2,h3,p{margin:0}
.sprite{display:none}
.ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ================= 登录 ================= */
.login{
  position:fixed; inset:0; z-index:900; display:flex; background:var(--bg);
  overflow:auto;
}
.login[hidden]{display:none}
.lg-left{
  flex:1 1 46%; min-width:0; position:relative; padding:48px 54px; display:flex; flex-direction:column;
  background:
    radial-gradient(120% 90% at 10% 0%, rgba(59,130,246,.28), transparent 55%),
    radial-gradient(90% 80% at 95% 100%, rgba(29,78,216,.22), transparent 60%),
    linear-gradient(160deg,#0a1830,#060b14 70%);
  border-right:1px solid var(--line);
}
.lg-left::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:38px 38px;mask-image:radial-gradient(70% 60% at 40% 30%,#000,transparent 78%);
}
.lg-brand{display:flex;align-items:center;gap:12px;position:relative;z-index:1}
.mark{
  width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:20px;color:#fff;font-style:normal;
  background:linear-gradient(150deg,#4f93ff,#1d4ed8);box-shadow:0 8px 22px rgba(37,99,235,.45);
}
.bt b{display:block;font-size:15px;letter-spacing:.3px}
.bt small{display:block;color:var(--dim2);font-size:9.5px;letter-spacing:2.2px;margin-top:3px}
.lg-hero{margin:auto 0;position:relative;z-index:1;padding:30px 0}
.lg-hero h2{font-size:30px;letter-spacing:.5px;line-height:1.25}
.lg-hero>p{color:#93a9c8;margin-top:12px;font-size:13.5px}
.lg-feat{list-style:none;padding:0;margin:26px 0 0}
.lg-feat li{display:flex;align-items:center;gap:10px;color:#b3c7e2;font-size:13px;margin-bottom:13px}
.lg-feat .ic{color:#5ea0ff;width:17px;height:17px}
.lg-copy{color:#43597a;font-size:11.5px;position:relative;z-index:1}
.lg-right{flex:1 1 54%;display:flex;align-items:center;justify-content:center;padding:40px 24px;background:var(--bg)}
.lg-card{
  width:100%;max-width:384px;padding:6px 4px;
}
.lg-card h1{font-size:22px;letter-spacing:.3px}
.lg-sub{color:var(--dim);font-size:12.5px;margin:8px 0 26px}
.fld{display:block;margin-bottom:16px}
.fld>span{display:block;font-size:12px;color:#9fb4d1;margin-bottom:8px;letter-spacing:.2px}
.fld input{width:100%;padding:12px 14px;font-size:14px;border-radius:10px}
#abtn{
  width:100%;margin-top:6px;padding:13px;border-radius:10px;font-size:15px;font-weight:700;letter-spacing:2px;
  color:#fff;background:linear-gradient(150deg,#3f8bff,#1d4ed8);
  box-shadow:0 10px 26px rgba(37,99,235,.35);transition:.16s;
}
#abtn:hover{filter:brightness(1.08)}
#abtn:active{transform:translateY(1px)}
#abtn:disabled{opacity:.65;cursor:default}
.lg-msg{color:#ff8f8f;font-size:12.5px;margin-top:14px;min-height:18px;text-align:center}

/* ================= 布局 ================= */
.layout{display:flex;min-height:100vh}
.layout[hidden]{display:none!important}
.side{
  width:224px;flex:none;position:fixed;top:0;bottom:0;left:0;z-index:20;
  background:linear-gradient(180deg,#0b1626,#080f1b);
  border-right:1px solid var(--line);display:flex;flex-direction:column;
}
.s-brand{display:flex;align-items:center;gap:11px;padding:20px 18px;border-bottom:1px solid var(--line)}
.s-brand .mark{width:34px;height:34px;border-radius:10px;font-size:17px}
.s-brand b{display:block;font-size:14px}
.s-brand small{display:block;color:var(--dim2);font-size:10px;margin-top:2px;letter-spacing:.5px}
.side nav{padding:12px 10px;flex:1;overflow:auto}
.nav{
  display:flex;align-items:center;gap:11px;padding:11px 12px;margin-bottom:3px;border-radius:10px;
  color:#93a9c8;font-size:13.5px;position:relative;transition:.15s;
}
.nav .ic{color:#6d88ac;transition:.15s}
.nav:hover{background:rgba(255,255,255,.045);color:#dbe8fa}
.nav:hover .ic{color:#9fc0ea}
.nav.active{background:linear-gradient(90deg,rgba(59,130,246,.20),rgba(59,130,246,.04));color:#dcebff;font-weight:600}
.nav.active .ic{color:#5ea0ff}
.nav.active::before{content:"";position:absolute;left:-10px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--blue)}
.s-foot{padding:12px 14px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:8px}
.who{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#a9bdd8;min-width:0}
.who span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avt{width:26px;height:26px;border-radius:8px;background:linear-gradient(150deg,#2f6fe8,#1d4ed8);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff}
#logout{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#7b93b5}
#logout:hover{background:rgba(248,113,113,.14);color:#ff9a9a}

.shell{flex:1;min-width:0;margin-left:224px;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:15;height:60px;display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;background:rgba(7,13,24,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
}
.tb-left{display:flex;align-items:center;gap:12px;min-width:0}
.tb-left h2{font-size:16px;font-weight:600;letter-spacing:.3px}
.tb-tag{font-size:11px;color:var(--dim2);border:1px solid var(--line2);padding:2px 8px;border-radius:20px}
.tb-right{display:flex;align-items:center;gap:8px}
.iconbtn{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#93a9c8;border:1px solid var(--line)}
.iconbtn:hover{background:rgba(255,255,255,.05);color:#fff}
.dot-live{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(52,211,153,.18);animation:pulse 1.8s infinite}
@keyframes pulse{50%{opacity:.35}}
.live-txt{font-size:12px;color:var(--dim)}

.content{flex:1;padding:22px 24px 70px;max-width:1500px;width:100%}
.view[hidden]{display:none!important}
.view>h2{display:none}

/* ================= 卡片 ================= */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(182px,1fr));gap:13px;margin-bottom:16px}
.card{
  background:linear-gradient(165deg,#0d1a2b,#0a1422);border:1px solid var(--line);border-radius:var(--r);
  padding:15px 16px 16px;position:relative;overflow:hidden;transition:.18s;
}
.card::after{content:"";position:absolute;inset:0;border-radius:var(--r);pointer-events:none;
  background:radial-gradient(120% 90% at 100% 0%,rgba(59,130,246,.10),transparent 60%)}
.card:hover{border-color:rgba(59,130,246,.35);transform:translateY(-1px)}
.c-top{display:flex;align-items:center;gap:8px;color:var(--dim);font-size:12px;margin-bottom:12px}
.c-ico{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:rgba(59,130,246,.14);color:#6ea8ff}
.c-ico .ic{width:14px;height:14px}
.c-ico.g{background:rgba(52,211,153,.14);color:#4fd8a4}
.c-ico.p{background:rgba(168,85,247,.16);color:#c084fc}
.c-ico.y{background:rgba(251,191,36,.15);color:#fcd34d}
.c-ico.v{background:rgba(56,189,248,.15);color:#67d3f7}
.c-ico.c{background:rgba(244,114,182,.15);color:#f9a8d4}
.card b{display:block;font-size:23px;font-weight:700;letter-spacing:.4px;font-variant-numeric:tabular-nums}
.card small{display:block;color:var(--dim2);font-size:11.5px;margin-top:7px}
.card.hl{background:linear-gradient(165deg,#0c2130,#0a1725);border-color:rgba(52,211,153,.24)}
.card.hl b{color:var(--green)}
.card.hl b.neg{color:var(--red)}

/* ================= 面板 ================= */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-bottom:14px}
.p-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.p-head h3{font-size:14px;font-weight:600;color:#dce8fa}
.muted{color:var(--dim2);font-size:11.8px;line-height:1.7}
.row{display:flex;align-items:center;gap:10px;margin-top:12px}
.row:first-child{margin-top:0}
.row.wrap{flex-wrap:wrap}
.row.right{justify-content:flex-end;margin-top:18px}
.fld-inline{display:flex;align-items:center;gap:7px;color:#9fb4d1;font-size:12.5px}
.mini{width:120px}

.btn{
  padding:9px 17px;border-radius:9px;font-weight:600;font-size:13px;color:#fff;
  background:linear-gradient(150deg,#3f8bff,#1d4ed8);box-shadow:0 6px 16px rgba(37,99,235,.28);transition:.15s;
}
.btn:hover{filter:brightness(1.09)}
.btn:active{transform:translateY(1px)}
.btn.danger{background:linear-gradient(150deg,#fb7185,#dc2626);box-shadow:0 6px 16px rgba(220,38,38,.25)}
.btn.ghost{background:#132135;color:#a9c1de;border:1px solid var(--line2);box-shadow:none}
.btn.ghost:hover{background:#17293f;color:#fff}
.btn.sm{padding:5px 11px;font-size:12px;border-radius:7px;box-shadow:none}

.quick{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:linear-gradient(120deg,rgba(59,130,246,.16),rgba(12,23,39,.9) 60%);border-color:rgba(59,130,246,.32)}
.q-title{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14.5px;margin-bottom:7px}
.q-title .ic{color:#fcd34d}
.q-tip{color:#8fa9c9;font-size:12.5px;display:flex;flex-wrap:wrap;gap:6px 18px}
.q-tip .qi{white-space:nowrap;position:relative}
.q-tip .qi+.qi::before{content:"·";position:absolute;left:-11px;color:#3f5a7d}
.q-tip b{color:#ffd166}

/* 模式选择 */
.mode-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:11px}
.mode{
  display:flex;align-items:flex-start;gap:10px;background:#0e1c2e;border:1px solid var(--line2);
  border-radius:11px;padding:14px;cursor:pointer;transition:.15s;
}
.mode:hover{background:#112238;border-color:rgba(59,130,246,.4)}
.mode input{margin:3px 0 0;accent-color:var(--blue);width:15px;height:15px;flex:none}
.mode b{font-size:13.5px}
.mode small{display:block;color:var(--dim2);font-size:11.5px;margin-top:6px;line-height:1.6}
.mode:has(input:checked){border-color:var(--blue);background:linear-gradient(150deg,rgba(59,130,246,.16),rgba(14,28,46,.9))}
.mode:has(input:checked) b{color:#cfe4ff}

.odds-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
.odds-grid label{display:block;color:#9fb4d1;font-size:12px}
.odds-grid input{width:100%;margin-top:6px}

/* 表格 */
.table-wrap{overflow:auto;max-height:470px;border:1px solid var(--line);border-radius:10px}
.table-wrap::-webkit-scrollbar{width:8px;height:8px}
.table-wrap::-webkit-scrollbar-thumb{background:#1d3050;border-radius:8px}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:12.8px}
th{
  position:sticky;top:0;z-index:2;background:#0e1c2e;text-align:left;padding:11px 12px;
  color:#7e97b8;font-weight:500;font-size:11.5px;white-space:nowrap;border-bottom:1px solid var(--line2);
}
td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.045);white-space:nowrap;color:#d3e2f5}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:rgba(59,130,246,.06)}
td.pos,.pos{color:var(--green)}
td.neg,.neg{color:var(--red)}

.code-balls{display:flex;gap:4px}
.code-balls i{
  width:22px;height:22px;border-radius:50%;font-style:normal;font-size:11.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(160deg,#ff6b6b,#d02a3a);
}
.code-balls i:nth-child(3){background:linear-gradient(160deg,#5aa9ff,#1a5fd0)}
.tag{display:inline-block;padding:2px 8px;border-radius:6px;font-size:11px;background:#152740;color:#8fa9c9}
.tag.g{background:rgba(52,211,153,.14);color:#4fd8a4}
.tag.r{background:rgba(248,113,113,.14);color:#ff9a9a}
.tag.b{background:rgba(59,130,246,.16);color:#7cb3ff}

.result{margin-top:14px;padding:13px 15px;background:#0e1c2e;border:1px solid rgba(251,191,36,.28);border-radius:10px;font-size:13px;line-height:2}
.result b{color:#ffd166}

/* 弹层 */
.modal{position:fixed;inset:0;z-index:700;background:rgba(3,8,16,.72);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px}
.modal[hidden]{display:none}
.modal-card{width:100%;max-width:360px;background:linear-gradient(170deg,#0d1a2b,#0a1422);border:1px solid var(--line2);border-radius:16px;padding:22px;box-shadow:0 30px 70px rgba(0,0,0,.6)}
.modal-card h3{font-size:15px;margin-bottom:6px}
.modal-card .fld{margin:16px 0 0}
.modal-card input{width:100%}
.toast{
  position:fixed;left:50%;bottom:34px;transform:translate(-50%,14px);z-index:800;
  background:#12243c;border:1px solid rgba(59,130,246,.55);color:#fff;padding:11px 20px;border-radius:10px;
  font-size:13px;opacity:0;pointer-events:none;transition:.22s;box-shadow:0 12px 30px rgba(0,0,0,.45);
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* 响应式 */
@media(max-width:1080px){
  .lg-left{padding:36px 34px}
  .lg-hero h2{font-size:24px}
}
@media(max-width:860px){
  .login{flex-direction:column}
  .lg-left{padding:26px 22px 20px;border-right:0;border-bottom:1px solid var(--line);flex:0 0 auto}
  .lg-hero{padding:16px 0 0}
  .lg-hero h2{font-size:20px}
  .lg-feat{display:none}
  .lg-copy{display:none}
  .lg-right{padding:26px 22px 46px;align-items:flex-start}

  .layout{flex-direction:column}
  .side{
    position:sticky;top:0;z-index:30;width:100%;flex-direction:column;align-items:stretch;
    border-right:0;border-bottom:1px solid var(--line);background:#08101c;backdrop-filter:blur(10px);
  }
  .s-brand{padding:11px 14px;border-bottom:0}
  .s-brand .mark{width:30px;height:30px;border-radius:9px;font-size:15px}
  .s-foot{position:absolute;right:10px;top:9px;border:0;padding:0;margin:0;gap:6px}
  .who span:last-child{display:none}
  .side nav{display:flex;gap:6px;padding:0 12px 10px;overflow-x:auto;flex:none;scrollbar-width:none}
  .side nav::-webkit-scrollbar{display:none}
  .nav{margin:0;padding:8px 13px;white-space:nowrap;background:rgba(255,255,255,.035);border-radius:9px;font-size:12.5px}
  .nav.active::before{display:none}
  .shell{margin-left:0}
  .topbar{position:static;padding:0 14px;height:52px;backdrop-filter:none}
  .content{padding:16px 14px 60px}
  .cards{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
  .card b{font-size:19px}
  .row .mini{width:100%}
}
@media(max-width:520px){
  .cards{grid-template-columns:1fr 1fr}
  .quick{flex-direction:column;align-items:flex-start}
  .q-right{width:100%}
  .q-right .btn{width:100%}
  .row input:not(.mini){flex:1 1 100%}
}

/* ================= 宽屏 · 宽短版（桌面更宽、纵向更扁） ================= */
@media(min-width:1200px){
  html{font-size:14px}
  .content{max-width:none;padding:16px 26px 48px}
  .shell{max-width:100%}

  /* 概览：卡片一行 6 个，扁一些 */
  .cards{grid-template-columns:repeat(6,1fr);gap:11px;margin-bottom:12px}
  .card{padding:11px 13px}
  .card b{font-size:21px;margin-top:6px}
  .card .c-top{font-size:11.5px}

  /* 概览页：数据面板左右并排，页面更短 */
  #v-dash{display:grid;grid-template-columns:1fr 1fr;gap:0 15px;align-items:start}
  #v-dash > .cards,
  #v-dash > .panel.quick,
  #v-dash > .panel.full{grid-column:1 / -1}
  .panel{padding:13px 15px;margin-bottom:13px}
  .p-head{margin-bottom:11px}
  .table-wrap{max-height:320px}
  table{font-size:12.5px}
  tbody td{padding:7px 10px}
  thead th{padding:8px 10px}

  .quick{padding:12px 15px}
  .mode-grid{grid-template-columns:repeat(3,1fr);gap:10px}

  /* 会员/流水/注单：表格撑满，横向滚动 */
  .filters{flex-wrap:nowrap}
}

@media(min-width:1600px){
  .cards{grid-template-columns:repeat(6,1fr)}
  .content{padding:18px 34px 52px}
}