:root{
  --bg:#0e1020; --panel:#171a2e; --panel2:#1e2238; --line:#2a2f4a;
  --txt:#e8ebff; --sub:#9aa3c7; --accent:#7c5cff; --accent2:#27e0c0;
  --bad:#ff6b8a; --good:#39d98a; --warn:#ffb454; --radius:16px;
  --shadow:0 16px 50px rgba(0,0,0,.45);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:"PingFang SC","Microsoft YaHei",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:radial-gradient(1200px 600px at 80% -10%,rgba(124,92,255,.18),transparent 60%),
             radial-gradient(900px 500px at -10% 10%,rgba(39,224,192,.12),transparent 55%),
             var(--bg);
  color:var(--txt); min-height:100vh; line-height:1.5;
  color-scheme:dark; /* 原生日期/下拉控件弹出深色风格 */
}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
input,select,textarea{font-family:inherit;}
.container{max-width:1180px; margin:0 auto; padding:18px 20px 60px;}

/* ---------- header ---------- */
.topbar{display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px; background:linear-gradient(90deg,rgba(124,92,255,.16),rgba(39,224,192,.10));
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30; backdrop-filter:blur(8px);}
.logo{font-size:22px; font-weight:800; letter-spacing:.5px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text; background-clip:text; color:transparent;}
.logo small{font-size:12px; color:var(--sub); -webkit-text-fill-color:var(--sub); margin-left:8px; font-weight:500;}
.navlink{color:var(--sub); font-size:14px; padding:8px 14px; border-radius:10px; transition:.2s;}
.navlink:hover{color:var(--txt); background:var(--panel2);}

/* ---------- ad slots ---------- */
.ad-slot{position:relative;}
.ad-box{position:relative; border:1px dashed var(--line); border-radius:12px;
  background:linear-gradient(120deg,rgba(124,92,255,.10),rgba(39,224,192,.06));
  color:var(--txt); display:flex; align-items:center; justify-content:center;
  min-height:60px; overflow:hidden; text-align:center; padding:10px;}
.ad-box img{max-width:100%; max-height:100%; border-radius:8px; display:block;}
.ad-box a{display:flex; align-items:center; justify-content:center; width:100%; height:100%;}
.ad-tag{position:absolute; top:6px; left:8px; font-size:10px; letter-spacing:1px;
  color:var(--sub); background:rgba(0,0,0,.35); padding:2px 7px; border-radius:6px; z-index:2;}
.ad-close{position:absolute; top:4px; right:6px; z-index:3; width:22px; height:22px;
  display:flex; align-items:center; justify-content:center; border:none; cursor:pointer;
  background:rgba(0,0,0,.45); color:var(--sub); font-size:17px; line-height:1; border-radius:50%; transition:.18s;}
.ad-close:hover{background:var(--bad); color:#fff; transform:scale(1.12);}
.ad-pop-mask{position:fixed; inset:0; background:rgba(6,8,18,.62); z-index:80;
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(3px);}
.ad-pop{position:relative; width:min(440px,90vw); max-width:94vw; max-height:92vh; background:var(--panel);
  border:1px solid var(--line); border-radius:18px; padding:26px 24px; box-shadow:var(--shadow); text-align:center;
  display:flex; flex-direction:column; align-items:center;}
.ad-pop-content{flex:1 1 auto; width:100%; min-height:0; display:flex; align-items:center; justify-content:center;
  overflow:auto; margin:6px 0;}
.ad-pop .close{position:absolute; top:10px; right:14px; background:none; border:none;
  color:var(--sub); font-size:22px; line-height:1;}
.ad-pop .close:hover{color:var(--txt);}
.ad-pop h3{margin:6px 0 8px; font-size:18px;}
.ad-pop p{color:var(--sub); margin:0 0 16px; font-size:14px;}
/* 「查看详情」独立成底部一排（与内容区分层，不再挤在内容区右侧） */
.ad-pop-foot{flex:0 0 auto; width:100%; display:flex; justify-content:center; margin-top:14px;}
.ad-pop .go{display:inline-flex; align-items:center; justify-content:center; min-width:210px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  color:#0b0e1c; font-weight:700; padding:11px 26px; border-radius:12px;
  box-shadow:0 10px 26px rgba(124,92,255,.34); transition:.18s;}
.ad-pop .go:hover{filter:brightness(1.06); transform:translateY(-1px);}

/* ---------- game hall layout ---------- */
.home-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:18px 0 8px; flex-wrap:wrap;}
.home-title{font-size:26px; font-weight:800;}
.home-title span{background:linear-gradient(90deg,var(--accent),var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.sub{color:var(--sub); font-size:13px; margin-top:4px;}
.homelayout{display:flex; gap:18px; align-items:flex-start;}
.sidecol{width:160px; flex:0 0 160px; display:flex; flex-direction:column; gap:14px;}
.sidecol .ad-box{min-height:240px;}
.maincol{flex:1 1 auto; min-width:0;}
@media(max-width:860px){
  .homelayout{flex-direction:column;}
  .sidecol{width:100%; flex-direction:row; flex:1 1 auto;}
  .sidecol .ad-box{min-height:90px; flex:1;}
}

.toolbar{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:6px 0 16px;}
.search-wrap{position:relative; flex:1 1 240px; min-width:180px;}
.search-ico{position:absolute; left:15px; top:50%; transform:translateY(-50%); font-size:14px; opacity:.65; pointer-events:none;}
.search{width:100%; padding:12px 16px 12px 40px; border-radius:999px;
  border:1px solid var(--line); background:var(--panel); color:var(--txt); font-size:14px; transition:.2s;}
.search::placeholder{color:var(--sub);}
.search:focus{outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(124,92,255,.22); background:var(--panel2);}
.sort-wrap{position:relative;}
.sort-ico{position:absolute; left:14px; top:50%; transform:translateY(-50%); font-size:13px; pointer-events:none;}
.sortsel{padding:12px 38px 12px 36px; border-radius:999px; border:1px solid var(--line);
  background:var(--panel); color:var(--txt); font-size:14px; transition:.2s;
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239aa3c7' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;}
.sortsel:focus{outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(124,92,255,.22); background-color:var(--panel2);}
.chips{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px;}
.chip{padding:7px 14px; border-radius:999px; border:1px solid var(--line);
  background:var(--panel); color:var(--sub); font-size:13px; transition:.18s;}
.chip:hover{color:var(--txt);}
.chip.active{background:linear-gradient(90deg,var(--accent),var(--accent2)); color:#0b0e1c; border-color:transparent; font-weight:700;}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px;}

/* ---------- 游戏卡片：悬停 / 选中态（重写版） ----------
   思路：外层 .card-wrap 固定 2px 内边距充当「渐变描边」，
   悬停时描边流动 + 整卡抬起 + 双色光晕 + 封面高光。
   全部用 background / box-shadow 实现，不用 mask，兼容性稳定。 */
.card-wrap{position:relative; display:block; padding:2px; border-radius:calc(var(--radius) + 3px);
  background:rgba(42,47,74,.55);
  transition:transform .26s cubic-bezier(.22,1,.36,1), box-shadow .26s ease, background .3s ease;}
.card{position:relative; display:block; height:100%; background:var(--panel);
  border:1px solid transparent; border-radius:var(--radius); overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
  transition:background .26s ease, box-shadow .26s ease;}

.card-wrap:hover,.card-wrap:focus-within{transform:translateY(-7px); z-index:5;
  background:linear-gradient(115deg,#7c5cff,#27e0c0,#ff6b8a,#7c5cff);
  background-size:300% 300%;
  animation:cardRing 3.4s linear infinite;
  box-shadow:0 0 0 1px rgba(124,92,255,.45), 0 20px 44px rgba(124,92,255,.34), 0 0 34px rgba(39,224,192,.26);}
@keyframes cardRing{0%{background-position:0% 50%;}100%{background-position:300% 50%;}}
/* 卡面随描边一起染上一层极淡的同色渐变，强化“被选中”的感觉 */
.card-wrap:hover .card,.card-wrap:focus-within .card{
  background:linear-gradient(160deg, rgba(124,92,255,.16), var(--panel) 52%, rgba(39,224,192,.13));}
/* 封面高光掠过 */
.cv::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s ease;
  background:linear-gradient(155deg, rgba(255,255,255,.28), transparent 52%, rgba(39,224,192,.20));}
.card-wrap:hover .cv::after,.card-wrap:focus-within .cv::after{opacity:1;}
.cv img{transition:transform .45s cubic-bezier(.22,1,.36,1);}
.card-wrap:hover .cv img,.card-wrap:focus-within .cv img{transform:scale(1.08);}

.cv{height:120px; display:flex; align-items:center; justify-content:center;
  background:#10132a; position:relative; overflow:hidden;}
.cv img{width:100%; height:100%; object-fit:cover;}
.cv .ph{font-size:40px; font-weight:800; color:#fff; text-shadow:0 4px 16px rgba(0,0,0,.4);}
.plays{position:absolute; bottom:8px; right:8px; font-size:11px; color:#fff;
  background:rgba(0,0,0,.5); padding:3px 8px; border-radius:8px;}
.card .body{padding:12px 13px 14px;}
.card .name{font-size:15px; font-weight:700; margin:0 0 3px;}
.card .cat{display:inline-block; font-size:11px; color:var(--accent2);
  background:rgba(39,224,192,.12); padding:2px 9px; border-radius:7px; margin-bottom:6px;}
.card .desc{font-size:12px; color:var(--sub); margin:0; height:32px; overflow:hidden;}
.card .playbtn{display:block; text-align:center; margin-top:11px; padding:9px;
  border-radius:11px; background:linear-gradient(90deg,var(--accent),var(--accent2));
  color:#0b0e1c; font-weight:700; font-size:13px; opacity:0; transform:translateY(8px); transition:.24s ease;}
.card-wrap:hover .playbtn,.card-wrap:focus-within .playbtn{opacity:1; transform:translateY(0);}
.card.disabled{opacity:.5;}
.card.disabled .playbtn{display:none;}

.empty{text-align:center; color:var(--sub); padding:50px 0;}

/* ---------- generic buttons & panels ---------- */
.btn{background:linear-gradient(90deg,var(--accent),var(--accent2)); color:#0b0e1c;
  font-weight:700; border:none; padding:10px 18px; border-radius:11px; font-size:14px; transition:.18s;}
.btn:hover{filter:brightness(1.08);}
.btn.ghost{background:var(--panel2); color:var(--txt); border:1px solid var(--line);}
.btn.ghost:hover{border-color:var(--accent);}
.btn.danger{background:transparent; color:var(--bad); border:1px solid var(--bad);}
.btn.sm{padding:6px 12px; font-size:12px; border-radius:9px;}
.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px;}
.muted{color:var(--sub); font-size:13px;}
.tag{display:inline-block; font-size:11px; padding:2px 9px; border-radius:7px;}
.tag.on{color:var(--good); background:rgba(57,217,138,.13);}
.tag.off{color:var(--sub); background:rgba(154,163,199,.12);}
.tag.bad{color:var(--bad); background:rgba(255,107,138,.13);}

/* ---------- login ---------- */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;}
.login-card{background:var(--panel); border:1px solid var(--line); border-radius:20px;
  padding:34px 36px; width:360px; box-shadow:var(--shadow);}
.login-card .logo{font-size:24px; text-align:center; display:block; margin-bottom:4px;}
.login-card h2{text-align:center; font-size:16px; color:var(--sub); font-weight:500; margin:0 0 22px;}
.login-card label{display:block; color:var(--sub); font-size:13px; margin-bottom:14px;}
.login-card input{width:100%; margin-top:6px; padding:11px 12px; border-radius:10px;
  border:1px solid var(--line); background:var(--bg); color:var(--txt); font-size:14px;}
.login-card .msg{text-align:center; font-size:13px; margin-top:12px; min-height:18px;}
.login-card .btn{width:100%; margin-top:4px;}
.login-card .captcha-row{display:flex; align-items:center; gap:10px; margin-top:6px;}
.login-card .captcha-row input{width:100%; margin-top:0; flex:1; min-width:0;
  padding:11px 12px; border-radius:10px; border:1px solid var(--line); background:var(--bg); color:var(--txt); font-size:14px;}
.login-card .captcha-row input:focus{outline:none; border-color:var(--accent);}
.login-card .captcha-img{height:42px; width:124px; flex:0 0 auto; border-radius:10px;
  border:1px solid var(--line); cursor:pointer; background:var(--bg); transition:.2s;}
.login-card .captcha-img:hover{border-color:var(--accent);}

/* ---------- admin console ---------- */
.admin-shell{display:flex; min-height:100vh;}
.sidebar{width:220px; flex:0 0 220px; background:var(--panel); border-right:1px solid var(--line);
  padding:18px 14px; position:sticky; top:0; height:100vh; overflow:auto;}
.sidebar .logo{font-size:18px; display:block; margin-bottom:18px;}
.menu{list-style:none; margin:0; padding:0;}
.menu li{padding:11px 14px; border-radius:11px; color:var(--sub); font-size:14px; margin-bottom:4px; cursor:pointer; transition:.16s;}
.menu li:hover{background:var(--panel2); color:var(--txt);}
.menu li.active{background:linear-gradient(90deg,rgba(124,92,255,.22),rgba(39,224,192,.12)); color:var(--txt); font-weight:700;}
.menu .spacer{height:18px;}
.menu .logout{color:var(--bad);}
.admin-main{flex:1; padding:24px 28px; overflow:auto; height:100vh;}
.admin-topbar{display:flex; align-items:center; justify-content:flex-end; gap:12px;
  margin:-24px -28px 18px; padding:14px 28px; position:sticky; top:0; z-index:20;
  background:linear-gradient(180deg, rgba(23,26,46,.96), rgba(23,26,46,.72));
  backdrop-filter:blur(6px); border-bottom:1px solid var(--line);}
.seg{display:flex; gap:10px; flex-wrap:wrap;}
.seg-item{display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border:1px solid var(--line);
  border-radius:10px; background:var(--bg); color:var(--sub); font-size:13px; cursor:pointer; transition:.18s;}
.seg-item:hover{border-color:var(--accent); color:var(--txt);}
.seg-item input{accent-color:var(--accent);}
.sec-title{font-size:20px; font-weight:800; margin:0 0 4px;}
.sec-sub{color:var(--sub); font-size:13px; margin:0 0 18px;}

.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:22px;}
.stat{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px 18px;}
.stat b{font-size:26px; font-weight:800; display:block;
  background:linear-gradient(90deg,var(--accent),var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.stat span{color:var(--sub); font-size:12px;}

/* ---------- 概览：KPI + 图表 ---------- */
.ov-head{display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:16px;}
.ov-stamp{font-size:12px; color:var(--sub); background:var(--panel); border:1px solid var(--line);
  padding:7px 12px; border-radius:999px; white-space:nowrap;}

.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; margin-bottom:20px;}
.kpi{position:relative; overflow:hidden; background:var(--panel); border:1px solid var(--line);
  border-radius:16px; padding:15px 18px 16px; transition:.22s;}
.kpi::before{content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--accent); opacity:.9;}
.kpi::after{content:""; position:absolute; right:-30px; top:-30px; width:90px; height:90px; border-radius:50%;
  background:radial-gradient(circle, rgba(124,92,255,.22), transparent 70%); pointer-events:none;}
.kpi:hover{transform:translateY(-3px); border-color:rgba(124,92,255,.5); box-shadow:0 14px 32px rgba(0,0,0,.38);}
.kpi-head{display:flex; align-items:center; gap:8px; margin-bottom:9px;}
.kpi-ico{width:26px; height:26px; flex:0 0 26px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  font-size:14px; background:rgba(124,92,255,.16);}
.kpi-label{font-size:12px; color:var(--sub); letter-spacing:.3px;}
.kpi b{display:block; font-size:27px; font-weight:800; line-height:1.15; letter-spacing:.5px;
  background:linear-gradient(92deg,#cdc4ff,#8a6cff 45%,#27e0c0);
  -webkit-background-clip:text; background-clip:text; color:transparent;}
.kpi-sub{display:block; margin-top:5px; font-size:12px; color:var(--sub);}
.kpi.tone-cyan::before{background:var(--accent2);} .kpi.tone-cyan .kpi-ico{background:rgba(39,224,192,.16);}
.kpi.tone-pink::before{background:var(--bad);} .kpi.tone-pink .kpi-ico{background:rgba(255,107,138,.16);}
.kpi.tone-amber::before{background:var(--warn);} .kpi.tone-amber .kpi-ico{background:rgba(255,180,84,.16);}
.kpi.tone-blue::before{background:#5aa9ff;} .kpi.tone-blue .kpi-ico{background:rgba(90,169,255,.16);}
.kpi.tone-green::before{background:var(--good);} .kpi.tone-green .kpi-ico{background:rgba(57,217,138,.16);}

.chart-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:14px;}
.chart-card{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:16px 18px 18px;
  display:flex; flex-direction:column;}
.chart-card.wide{grid-column:1/-1;}
.chart-body{flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; min-height:0;}
.chart-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px;}
.chart-head h4{margin:0; font-size:15px; font-weight:700;}
.chart-head p{margin:3px 0 0; font-size:12px; color:var(--sub);}
.chart-svg{width:100%; height:auto; display:block;}
.chart-empty{display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:26px 0; color:var(--sub); font-size:13px; text-align:center;}
.chart-empty span{font-size:26px; opacity:.75;}
.chart-empty p{margin:0;}
.chart-legend{display:flex; gap:14px; font-size:12px; color:var(--sub); flex-wrap:wrap;}
.chart-legend.inline{align-self:center; margin-top:2px;}
.chart-legend i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px;}
.lg-imp{background:linear-gradient(180deg,#9d85ff,#6d4cf0);}
.lg-clk{background:linear-gradient(180deg,#4ff0d4,#14a892);}

/* 排行条 */
.rank-list{display:flex; flex-direction:column; gap:13px; margin-top:6px;}
.rank-row{display:flex; align-items:center; gap:11px;}
.rank-no{width:24px; height:24px; flex:0 0 24px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; color:var(--sub); background:var(--panel2); border:1px solid var(--line);}
.rank-no.r1{color:#221500; background:linear-gradient(135deg,#ffd76e,#ffb454); border-color:transparent;}
.rank-no.r2{color:#1a1f33; background:linear-gradient(135deg,#e4eaff,#a9b6dd); border-color:transparent;}
.rank-no.r3{color:#221000; background:linear-gradient(135deg,#ffc7a8,#e08a5c); border-color:transparent;}
.rank-main{flex:1; min-width:0;}
.rank-top{display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:13px; margin-bottom:6px;}
.rank-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.rank-top b{color:var(--txt); font-variant-numeric:tabular-nums; flex:0 0 auto;}
.rank-top b em{font-style:normal; font-size:11px; color:var(--sub); margin-left:2px;}
.rank-track{height:8px; border-radius:99px; background:rgba(255,255,255,.06); overflow:hidden;}
.rank-track i{display:block; height:100%; border-radius:99px; transform-origin:left center;
  background:linear-gradient(90deg,#7c5cff,#27e0c0); animation:barIn .65s cubic-bezier(.22,1,.36,1) both;}

/* 广告位表现 */
.adperf{display:flex; flex-direction:column; gap:15px; margin-top:6px;}
.adperf-row{display:flex; flex-direction:column; gap:5px;}
.adperf-head{display:flex; align-items:center; gap:8px; font-size:13px;}
.adperf-head .dot{width:8px; height:8px; border-radius:50%; flex:0 0 8px;}
.adperf-head .nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.adperf-head .pos{font-size:11px; color:var(--sub); border:1px solid var(--line); padding:1px 7px; border-radius:6px; white-space:nowrap;}
.adperf-head .ctr{font-size:11px; font-weight:700; padding:2px 8px; border-radius:7px; white-space:nowrap;
  color:var(--sub); background:rgba(154,163,199,.12);}
.adperf-head .ctr.good{color:var(--good); background:rgba(57,217,138,.14);}
.adperf-head .ctr.mid{color:var(--warn); background:rgba(255,180,84,.14);}
.adperf-bars{position:relative; padding-right:52px;}
.pbar{position:relative; height:8px; border-radius:99px; background:rgba(255,255,255,.05); margin-top:5px;}
.pbar i{display:block; height:100%; border-radius:99px; transform-origin:left center;
  animation:barIn .6s cubic-bezier(.22,1,.36,1) both;}
.pbar.imp i{background:linear-gradient(90deg,#6d4cf0,#9d85ff);}
.pbar.clk i{background:linear-gradient(90deg,#14a892,#27e0c0);}
.pbar em{position:absolute; left:100%; top:50%; transform:translateY(-50%); margin-left:8px;
  font-style:normal; font-size:11px; color:var(--sub); font-variant-numeric:tabular-nums;}

/* 环形图 */
.donut-wrap{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:4px;}
.donut{width:152px; height:152px; flex:0 0 152px;}
.donut circle{transition:opacity .2s;}
.donut circle:hover{opacity:.82;}
.donut-legend{list-style:none; margin:0; padding:0; flex:1; min-width:132px;
  display:flex; flex-direction:column; gap:9px;}
.donut-legend li{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--sub);}
.donut-legend i{width:9px; height:9px; border-radius:3px; flex:0 0 9px;}
.donut-legend span{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.donut-legend b{color:var(--txt); font-variant-numeric:tabular-nums;}

/* 柱状图（新增玩家） */
rect.nb{transform-box:fill-box; transform-origin:bottom center; animation:barInY .6s cubic-bezier(.22,1,.36,1) both;}
@keyframes barIn{from{transform:scaleX(0); opacity:.35;} to{transform:scaleX(1); opacity:1;}}
@keyframes barInY{from{transform:scaleY(0); opacity:.35;} to{transform:scaleY(1); opacity:1;}}

/* ---------- 小文字按钮（移除封面 / 头像） ---------- */
.linkbtn{padding:6px 11px; border-radius:9px; background:transparent; border:1px dashed rgba(255,107,138,.45);
  color:var(--bad); font-size:12px; line-height:1.2; transition:.18s;}
.linkbtn:hover{background:rgba(255,107,138,.12); border-style:solid;}
.linkbtn[hidden]{display:none !important;}

/* ---------- 通用确认弹框 ---------- */
.confirm-modal{width:min(430px,94vw); text-align:center; padding:26px 24px 20px;}
.confirm-ico{width:56px; height:56px; margin:2px auto 14px; border-radius:18px;
  display:flex; align-items:center; justify-content:center; font-size:26px;
  background:rgba(124,92,255,.14); border:1px solid rgba(124,92,255,.35);}
.confirm-ico.danger{background:rgba(255,107,138,.13); border-color:rgba(255,107,138,.4);}
.confirm-modal h3{margin:0 0 10px; font-size:17px; text-align:center;}
.confirm-msg{color:var(--sub); font-size:13.5px; line-height:1.75;}
.confirm-msg b{color:var(--txt);}
.confirm-warn{margin-top:10px; font-size:12px; color:var(--warn); text-align:left;
  background:rgba(255,180,84,.10); border:1px solid rgba(255,180,84,.28); border-radius:10px; padding:8px 10px;}
.confirm-modal .foot{justify-content:center; margin-top:20px;}
.btn.danger-solid{background:linear-gradient(90deg,#ff5c7c,#ff8f6b); color:#210912;}
.btn.danger-solid:hover{filter:brightness(1.06);}

/* ---------- 重置密码弹框 ---------- */
.pwd-head{display:flex; gap:14px; align-items:flex-start;}
.pwd-ico{width:48px; height:48px; flex:0 0 48px; border-radius:15px; display:flex; align-items:center; justify-content:center;
  font-size:22px; background:linear-gradient(140deg, rgba(124,92,255,.28), rgba(39,224,192,.18)); border:1px solid var(--line);}
.pwd-head h3{margin:0; font-size:17px;}
.pwd-sub{margin:5px 0 0; font-size:12.5px; color:var(--sub); line-height:1.7;}
.pwd-sub b{color:var(--txt);}
.pw-wrap{position:relative;}
.pw-wrap input{width:100%; padding-right:46px;}
.pw-eye{position:absolute; right:6px; top:50%; transform:translateY(-50%); width:32px; height:32px;
  border:none; background:transparent; color:var(--sub); font-size:15px; opacity:.65; border-radius:8px; transition:.15s;}
.pw-eye:hover{opacity:1; background:var(--panel2); color:var(--txt);}
.pw-meter{height:6px; border-radius:99px; background:rgba(255,255,255,.07); overflow:hidden; margin-bottom:7px;}
.pw-meter i{display:block; height:100%; width:0; border-radius:99px; background:var(--bad);
  transition:width .22s ease, background .22s ease;}
.pw-meter i[data-level="2"]{background:var(--warn);}
.pw-meter i[data-level="3"]{background:#5aa9ff;}
.pw-meter i[data-level="4"]{background:var(--good);}
.pw-tip{font-size:12px; color:var(--sub);}
.modal-msg.ok{border-color:var(--good); color:var(--good);}

.tabs{display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap;}

.table{width:100%; border-collapse:collapse; background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden;}
.table th,.table td{padding:12px 14px; text-align:left; font-size:13px; border-bottom:1px solid var(--line);}
.table th{color:var(--sub); font-weight:600; background:var(--panel2);}
.table tr:last-child td{border-bottom:none;}
.table .thumb{width:54px; height:38px; object-fit:cover; border-radius:7px; background:#10132a;}
.table .thumb.ph{display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:16px;}
.rowact{display:flex; gap:6px; flex-wrap:wrap;}

/* ---------- 后台：搜索条（输入框 + 紧邻其后的搜索按钮） ---------- */
.admin-tools{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px;}
.admin-tools .grow{flex:1 1 auto;}
.searcher{display:flex; align-items:center; gap:9px; flex:1 1 300px; min-width:230px; max-width:520px;}
.searcher-in{position:relative; flex:1 1 auto; min-width:0;}
.searcher-in .ico{position:absolute; left:15px; top:50%; transform:translateY(-50%);
  font-size:13px; opacity:.6; pointer-events:none;}
.searcher input{width:100%; padding:11px 16px 11px 39px; border-radius:999px; border:1px solid var(--line);
  background:var(--panel); color:var(--txt); font-size:14px; transition:.2s;}
.searcher input::placeholder{color:var(--sub);}
.searcher input:focus{outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(124,92,255,.22); background:var(--panel2);}
.searcher .btn{flex:0 0 auto; white-space:nowrap;}
.tbl-count{font-size:12px; color:var(--sub); margin-top:10px;}
.tbl-count b{color:var(--txt);}

/* ---------- 后台：账号页 ---------- */
.acc-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:16px; align-items:start;}
.acc-card{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:20px 20px 18px;}
.acc-card h3{margin:0 0 4px; font-size:16px;}
.acc-card .hint{margin:0 0 16px; font-size:12.5px; color:var(--sub); line-height:1.7;}
.acc-who{display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:13px;
  background:var(--panel2); border:1px solid var(--line); margin-bottom:16px;}
.acc-ava{width:42px; height:42px; flex:0 0 42px; border-radius:13px; display:flex; align-items:center;
  justify-content:center; font-size:20px;
  background:linear-gradient(140deg,rgba(124,92,255,.35),rgba(39,224,192,.24)); border:1px solid var(--line);}
.acc-who .nm{font-size:14px; font-weight:700;}
.acc-who .rl{font-size:12px; color:var(--sub);}
.acc-foot{display:flex; justify-content:flex-end; gap:10px; margin-top:16px;}
.acc-card .modal-msg{margin-top:12px;}

/* forms */
.form-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px;}
.field label{display:block; color:var(--sub); font-size:13px; margin-bottom:6px;}
.field input,.field select,.field textarea{width:100%; padding:10px 12px; border-radius:10px;
  border:1px solid var(--line); background:var(--bg); color:var(--txt); font-size:14px;}
.field textarea{min-height:64px; resize:vertical;}
.note{font-size:12px; color:var(--warn); background:rgba(255,180,84,.10);
  border:1px solid rgba(255,180,84,.3); padding:9px 12px; border-radius:10px; margin:10px 0;}

.modal-mask{position:fixed; inset:0; background:rgba(6,8,18,.6); z-index:90;
  display:flex; align-items:center; justify-content:center; padding:20px;}
.modal{width:min(560px,95vw); max-height:90vh; overflow:auto; background:var(--panel);
  border:1px solid var(--line); border-radius:18px; padding:22px 24px; box-shadow:var(--shadow);}
.modal h3{margin:0 0 14px; font-size:18px;}
.modal .foot{display:flex; justify-content:flex-end; gap:10px; margin-top:18px;}
.modal-msg{display:none; margin-top:14px; padding:10px 12px; border-radius:10px;
  font-size:13px; background:rgba(255,255,255,.04); border:1px solid var(--line); color:var(--sub);}
.modal-msg.show{display:block;}
.modal-msg.err{border-color:var(--bad); color:#ffb4b4;}

/* 玩家头像与个人资料 */
.nav-avatar{width:26px;height:26px;border-radius:999px;object-fit:cover;display:inline-flex;
  align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;font-size:13px;font-weight:700;vertical-align:middle;margin-right:6px;}
.prof-av{display:flex;align-items:center;gap:14px;}
.prof-av-img{width:72px;height:72px;flex:0 0 72px;border-radius:14px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent2));border:1px solid var(--line);}
.prof-av-img img{width:100%;height:100%;object-fit:cover;}
.prof-av>div{flex:1;min-width:0;}

/* play page */
.play-top{display:flex; align-items:center; gap:14px; padding:12px 20px; background:var(--panel); border-bottom:1px solid var(--line);}
.play-top .ttl{font-size:16px; font-weight:700;}
.play-top .cnt{color:var(--sub); font-size:13px;}
.play-frame{flex:1; width:100%; border:none; background:#000; height:calc(100vh - 57px);}

.toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:var(--panel2); border:1px solid var(--line); color:var(--txt);
  padding:11px 20px; border-radius:12px; box-shadow:var(--shadow); z-index:120; font-size:14px;
  opacity:0; transition:.25s; pointer-events:none;}
.toast.show{opacity:1; transform:translateX(-50%) translateY(-4px);}
.toast.ok{border-color:var(--good);}
.toast.err{border-color:var(--bad);}

/* 卡片收藏按钮 */
.card-wrap{position:relative;display:block;}
.fav-btn{position:absolute;top:10px;right:10px;z-index:3;width:32px;height:32px;
  border-radius:999px;border:1px solid var(--line);background:rgba(0,0,0,.55);
  color:#fff;font-size:16px;line-height:1;cursor:pointer;transition:transform .15s,background .15s;}
.fav-btn:hover{transform:scale(1.1);}
.fav-btn.on{background:var(--accent);border-color:var(--accent);color:#fff;}

/* upload zone (游戏/封面上传) */
.upload-zone{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.upload-zone input[type=file]{display:none;}
.up-btn{display:inline-block; padding:9px 14px; border:1px dashed var(--line); border-radius:10px;
  background:var(--bg); color:var(--txt); font-size:13px; cursor:pointer; transition:.2s;}
.up-btn:hover{border-color:var(--accent); color:var(--accent);}
.upload-zone .or{color:var(--sub); font-size:13px;}
.picked{margin-top:10px; font-size:12px; color:var(--sub); line-height:1.9;}
.picked b{color:var(--txt);}
.picked code{background:var(--bg); border:1px solid var(--line); border-radius:6px;
  padding:2px 6px; margin:2px 3px 2px 0; display:inline-block;}
.ad-link,.ad-embed,.ad-popopts{display:contents;}