/* ============================================================
   ECPM 趋势后台 · 潮流风格设计系统
   ============================================================ */
:root{
  --ink:#0c0c14; --ink-2:#3a3a4a; --muted:#7a7a90; --faint:#a8a8ba;
  --bg:#f4f3fb; --card:rgba(255,255,255,.78); --card-solid:#fff;
  --line:rgba(16,12,45,.07); --line-2:rgba(16,12,45,.12);
  --violet:#7c5cff; --pink:#ff4d8d; --cyan:#00d4ff; --lime:#c9ff4d;
  --grad:linear-gradient(120deg,#7c5cff 0%,#ff4d8d 55%,#ff8a3d 100%);
  --grad-soft:linear-gradient(120deg,rgba(124,92,255,.12),rgba(255,77,141,.10));
  --grad-cyan:linear-gradient(120deg,#00d4ff,#7c5cff);
  --ok:#00b884; --warn:#ff9f0a; --bad:#ff3b5c;
  --r-lg:22px; --r-md:16px; --r-sm:11px;
  --shadow:0 10px 40px rgba(30,16,80,.07);
  --shadow-lift:0 18px 50px rgba(30,16,80,.13);
  --side-w:236px; --side-w-min:78px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
  font-family:"Inter","HarmonyOS Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  color:var(--ink);background:var(--bg);font-size:14px;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(720px 520px at 8% -8%, rgba(124,92,255,.20), transparent 62%),
    radial-gradient(680px 480px at 96% 4%, rgba(255,77,141,.16), transparent 60%),
    radial-gradient(760px 620px at 70% 110%, rgba(0,212,255,.14), transparent 62%),
    linear-gradient(180deg,#f8f7ff,#f3f2fa 60%,#f6f5fb);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(12,12,20,.10) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.55),transparent 55%);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.55),transparent 55%);
}
::selection{background:rgba(124,92,255,.22);}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}
::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-thumb{background:rgba(16,12,45,.16);border-radius:9px;border:2px solid transparent;background-clip:content-box;}
::-webkit-scrollbar-track{background:transparent;}

/* ================= 登录 ================= */
.login{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;gap:0;}
.login-left{position:relative;margin:16px;border-radius:28px;overflow:hidden;
  background:linear-gradient(150deg,#0c0c14 0%,#1b1038 45%,#3a1050 100%);color:#fff;padding:42px;display:flex;flex-direction:column;justify-content:space-between;}
.login-left::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(124,92,255,.75),transparent 65%);filter:blur(18px);top:-160px;right:-160px;animation:float 9s ease-in-out infinite;}
.login-left::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,77,141,.55),transparent 65%);filter:blur(24px);bottom:-140px;left:-100px;animation:float 11s ease-in-out infinite reverse;}
@keyframes float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-26px,0)}}
.brand{display:flex;align-items:center;gap:12px;position:relative;z-index:2;}
.brand .logo{width:44px;height:44px;border-radius:14px;background:var(--grad);display:grid;place-items:center;font-weight:800;font-size:15px;letter-spacing:.5px;box-shadow:0 10px 30px rgba(255,77,141,.4);}
.brand b{font-size:16px;letter-spacing:.4px;}
.brand span{display:block;font-size:11px;color:rgba(255,255,255,.55);letter-spacing:2px;}
.login-hero{position:relative;z-index:2;}
.login-hero .kicker{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:2px;text-transform:uppercase;
  padding:7px 14px;border-radius:99px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#d9d4ff;}
.login-hero h1{font-size:52px;line-height:1.06;letter-spacing:-2px;margin:22px 0 16px;font-weight:800;}
.login-hero h1 em{font-style:normal;background:linear-gradient(100deg,#c9ff4d,#00d4ff 55%,#ff4d8d);-webkit-background-clip:text;background-clip:text;color:transparent;}
.login-hero p{color:rgba(255,255,255,.62);max-width:430px;line-height:1.85;font-size:14px;}
.login-metrics{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap;}
.login-metrics div{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);border-radius:16px;padding:14px 18px;backdrop-filter:blur(10px);}
.login-metrics b{display:block;font-size:22px;letter-spacing:-.5px;}
.login-metrics span{font-size:11px;color:rgba(255,255,255,.55);}
.login-right{display:grid;place-items:center;padding:32px;}
.login-card{width:100%;max-width:392px;}
.login-card .hi{font-size:13px;color:var(--muted);letter-spacing:1px;}
.login-card h2{font-size:30px;letter-spacing:-1px;margin:6px 0 26px;}
.login-card h2.login-title{font-size:24px;letter-spacing:-.4px;line-height:1.35;margin:6px 0 22px;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:7px;letter-spacing:.4px;}
.inp{width:100%;height:44px;border-radius:13px;border:1px solid var(--line-2);background:rgba(255,255,255,.8);
  padding:0 14px;font-size:14px;color:var(--ink);outline:none;transition:.2s var(--ease);}
.inp:focus{border-color:var(--violet);box-shadow:0 0 0 4px rgba(124,92,255,.13);background:#fff;}
.inp::placeholder{color:var(--faint);}
.login-row{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--muted);margin:4px 0 22px;}
.login-row label{display:flex;align-items:center;gap:7px;cursor:pointer;}
.login-row a{color:var(--violet);}
.btn-login{width:100%;height:48px;border:none;border-radius:14px;background:var(--grad);color:#fff;font-size:15px;font-weight:600;
  cursor:pointer;letter-spacing:.5px;box-shadow:0 12px 30px rgba(124,92,255,.32);transition:.22s var(--ease);}
.btn-login:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(255,77,141,.34);}
.login-tip{margin-top:18px;font-size:12px;color:var(--muted);text-align:center;line-height:1.9;}
.login-tip code{background:rgba(124,92,255,.10);color:var(--violet);padding:2px 7px;border-radius:6px;font-size:11.5px;}
.login-err{color:var(--bad);font-size:12.5px;min-height:18px;margin-bottom:6px;}

/* ================= 布局 ================= */
.app{display:none;}
.app.on{display:block;}
.sidebar{position:fixed;left:14px;top:14px;bottom:14px;width:var(--side-w);z-index:60;
  background:rgba(255,255,255,.82);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  border:1px solid rgba(255,255,255,.95);border-radius:24px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;padding:16px 12px;transition:width .28s var(--ease);}
.sidebar.mini{width:var(--side-w-min);}
.side-head{display:flex;align-items:center;gap:10px;padding:4px 8px 16px;border-bottom:1px solid var(--line);margin-bottom:10px;}
.side-head .logo{width:38px;height:38px;border-radius:12px;background:var(--grad);display:grid;place-items:center;color:#fff;font-weight:800;font-size:12px;flex:none;box-shadow:0 8px 20px rgba(124,92,255,.3);}
.side-head .txt{min-width:0;}
.side-head b{font-size:14px;display:block;white-space:nowrap;letter-spacing:.2px;}
.side-head span{font-size:10.5px;color:var(--faint);letter-spacing:1.4px;white-space:nowrap;}
.sidebar.mini .side-head .txt{display:none;}
.org-pill{margin:2px 4px 10px;padding:9px 11px;border-radius:12px;background:var(--grad-soft);
  border:1px solid rgba(124,92,255,.14);display:flex;align-items:center;gap:8px;font-size:12px;color:#5b47c9;font-weight:600;}
.org-pill i{font-style:normal;}
.sidebar.mini .org-pill span{display:none;}
.nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:2px 0 8px;}
.nav::-webkit-scrollbar{width:0;}
.nav a{position:relative;display:flex;align-items:center;gap:11px;height:41px;padding:0 11px;margin:3px 2px;border-radius:13px;
  color:var(--ink-2);font-size:13.5px;cursor:pointer;transition:.18s var(--ease);white-space:nowrap;}
.nav a .ic{width:22px;height:22px;display:grid;place-items:center;font-size:15px;flex:none;
  border-radius:7px;transition:.18s var(--ease);}
.nav a:hover{background:rgba(124,92,255,.07);color:var(--ink);}
.nav a.on{background:var(--grad);color:#fff;font-weight:600;box-shadow:0 10px 24px rgba(124,92,255,.28);}
.nav a.on .ic{background:rgba(255,255,255,.2);}
.sidebar.mini .nav a{justify-content:center;padding:0;}
.sidebar.mini .nav a .lb{display:none;}
.side-foot{border-top:1px solid var(--line);padding-top:10px;display:flex;align-items:center;gap:9px;cursor:pointer;border-radius:12px;}
.side-foot:hover{background:rgba(124,92,255,.06);}
.side-foot .av{width:30px;height:30px;border-radius:10px;background:var(--grad-cyan);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700;flex:none;}
.side-foot .nm{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.side-foot .rl{font-size:10.5px;color:var(--faint);}
.sidebar.mini .side-foot .nm,.sidebar.mini .side-foot .rl{display:none;}
.mini-btn{position:absolute;right:-13px;top:80px;width:26px;height:26px;border-radius:50%;background:#fff;
  border:1px solid var(--line-2);cursor:pointer;color:var(--muted);font-size:12px;display:grid;place-items:center;
  box-shadow:0 4px 14px rgba(16,12,45,.12);z-index:5;}
.mini-btn:hover{color:var(--violet);}

.main{margin-left:calc(var(--side-w) + 30px);padding:14px 18px 46px;transition:margin .28s var(--ease);min-height:100vh;}
.main.wide{margin-left:calc(var(--side-w-min) + 30px);}
.topbar{position:sticky;top:14px;z-index:40;display:flex;align-items:center;gap:12px;height:62px;padding:0 14px;
  border-radius:18px;background:rgba(255,255,255,.74);backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.95);box-shadow:var(--shadow);}
.page-h{font-size:15.5px;font-weight:700;letter-spacing:-.2px;white-space:nowrap;}
.page-h small{display:block;font-size:10.5px;color:var(--faint);font-weight:400;letter-spacing:1.4px;}
.marquee{flex:1;min-width:120px;overflow:hidden;height:34px;line-height:34px;border-radius:99px;
  background:rgba(124,92,255,.07);border:1px solid rgba(124,92,255,.12);position:relative;padding:0 14px;}
.marquee .track{display:inline-flex;align-items:center;white-space:nowrap;color:#5b47c9;font-size:12.5px;
  animation:scroll-l 26s linear infinite;position:absolute;left:0;}
.marquee .msg{display:inline-flex;gap:8px;align-items:center;padding-right:70px;}
.marquee .sep{color:#c9c6d8;font-size:8px;margin:0 22px;}
.marquee.off{display:none;}
@keyframes scroll-l{from{transform:translateX(0)}to{transform:translateX(-50%);}}
.tb-actions{margin-left:auto;display:flex;align-items:center;gap:10px;}
.icon-btn{width:36px;height:36px;border-radius:12px;border:1px solid var(--line-2);background:#fff;cursor:pointer;
  display:grid;place-items:center;font-size:15px;color:var(--ink-2);transition:.18s var(--ease);}
.icon-btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(16,12,45,.10);color:var(--violet);}
.user-chip{display:flex;align-items:center;gap:9px;padding:5px 12px 5px 5px;border-radius:99px;background:#fff;
  border:1px solid var(--line-2);cursor:pointer;transition:.18s var(--ease);}
.user-chip:hover{box-shadow:0 8px 18px rgba(16,12,45,.10);}
.user-chip .av{width:28px;height:28px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700;}
.user-chip .nm{font-size:12.5px;font-weight:500;}
.user-chip .rl{font-size:10px;color:var(--faint);}

/* ================= 通用组件 ================= */
.page{animation:page-in .45s var(--ease);}
@keyframes page-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.card{background:var(--card);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.92);
  border-radius:var(--r-lg);box-shadow:var(--shadow);padding:20px 22px;margin-bottom:16px;}
.card-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.card-head h3{font-size:14.5px;letter-spacing:-.1px;}
.card-head .sub{font-size:11.5px;color:var(--faint);}
.card-head .right{margin-left:auto;display:flex;gap:8px;align-items:center;}
.grid{display:grid;gap:14px;}
.g2{grid-template-columns:repeat(2,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}
.hero{position:relative;overflow:hidden;border-radius:26px;padding:26px 28px;margin-bottom:16px;color:#fff;
  background:linear-gradient(115deg,#0b0b14 0%,#241149 52%,#4a1140 100%);box-shadow:0 24px 60px rgba(24,10,60,.28);}
.hero::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;right:-90px;top:-190px;
  background:radial-gradient(circle,rgba(124,92,255,.7),transparent 64%);filter:blur(10px);}
.hero::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1px);
  background-size:22px 22px;opacity:.22;mask-image:linear-gradient(90deg,transparent,#000);}
.hero .k{font-size:11px;letter-spacing:2.4px;color:rgba(255,255,255,.55);text-transform:uppercase;}
.hero h2{font-size:24px;letter-spacing:-.8px;margin:8px 0 6px;position:relative;z-index:2;}
.hero p{font-size:12.5px;color:rgba(255,255,255,.6);max-width:620px;line-height:1.8;position:relative;z-index:2;}
.hero-stats{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;position:relative;z-index:2;}
.hero-stats div{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:11px 16px;backdrop-filter:blur(8px);min-width:120px;}
.hero-stats b{display:block;font-size:20px;letter-spacing:-.6px;}
.hero-stats span{font-size:10.5px;color:rgba(255,255,255,.55);}

.kpi{position:relative;overflow:hidden;background:var(--card);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.92);
  border-radius:20px;padding:18px;box-shadow:var(--shadow);transition:.25s var(--ease);}
.kpi:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);}
.kpi .top{display:flex;align-items:center;justify-content:space-between;}
.kpi .lb{font-size:12px;color:var(--muted);}
.kpi .ico{width:32px;height:32px;border-radius:11px;display:grid;place-items:center;font-size:15px;background:var(--grad-soft);}
.kpi .v{font-size:27px;font-weight:800;letter-spacing:-1.2px;margin-top:12px;font-variant-numeric:tabular-nums;}
.kpi .v small{font-size:13px;font-weight:600;color:var(--faint);letter-spacing:0;margin-left:2px;}
.kpi .ft{font-size:11.5px;color:var(--faint);margin-top:6px;display:flex;gap:6px;align-items:center;}
.up{color:var(--ok);font-weight:600;} .down{color:var(--bad);font-weight:600;}

.btn{height:38px;padding:0 16px;border-radius:12px;border:1px solid var(--line-2);background:#fff;color:var(--ink);
  font-size:13px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  transition:.18s var(--ease);white-space:nowrap;}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(16,12,45,.10);border-color:rgba(124,92,255,.3);}
.btn:active{transform:none;}
.btn.primary{background:var(--grad);border:none;color:#fff;box-shadow:0 10px 24px rgba(124,92,255,.26);font-weight:600;}
.btn.primary:hover{box-shadow:0 14px 30px rgba(255,77,141,.3);}
.btn.dark{background:#0c0c14;border-color:#0c0c14;color:#fff;}
.btn.ghost{background:transparent;border-color:transparent;color:var(--violet);}
.btn.ghost:hover{background:rgba(124,92,255,.08);box-shadow:none;}
.btn.danger{color:var(--bad);}
.btn.danger:hover{border-color:rgba(255,59,92,.4);background:rgba(255,59,92,.05);}
.btn.sm{height:31px;padding:0 11px;font-size:12px;border-radius:9px;}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none;}

.seg{display:inline-flex;background:rgba(16,12,45,.05);border-radius:12px;padding:3px;gap:2px;}
.seg button{border:none;background:transparent;height:30px;padding:0 13px;border-radius:9px;font-size:12.5px;color:var(--muted);cursor:pointer;transition:.18s var(--ease);}
.seg button.on{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 3px 10px rgba(16,12,45,.10);}

/* 开关（显示 / 隐藏游戏名称） */
.switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none;
  font-size:12.5px;color:var(--muted);white-space:nowrap;transition:color .18s var(--ease);}
.switch:hover{color:var(--ink-2);}
.switch input{position:absolute;opacity:0;width:0;height:0;pointer-events:none;}
.switch .tr{position:relative;flex:none;width:36px;height:20px;border-radius:20px;
  background:rgba(16,12,45,.16);transition:background .22s var(--ease);}
.switch .tr::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:#fff;box-shadow:0 2px 6px rgba(16,12,45,.28);transition:transform .22s var(--ease);}
.switch input:checked + .tr{background:var(--grad);}
.switch input:checked + .tr::after{transform:translateX(16px);}
.switch input:focus-visible + .tr{box-shadow:0 0 0 3px rgba(124,92,255,.28);}
.chip{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:99px;font-size:11.5px;font-weight:600;}
.chip.ok{background:rgba(0,184,132,.12);color:#00996d;}
.chip.warn{background:rgba(255,159,10,.14);color:#b87400;}
.chip.bad{background:rgba(255,59,92,.11);color:#d92749;}
.chip.blue{background:rgba(0,212,255,.14);color:#0086a8;}
.chip.violet{background:rgba(124,92,255,.12);color:#5b47c9;}
.chip.gray{background:rgba(16,12,45,.06);color:var(--muted);}

.filters{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;}
.f{display:flex;flex-direction:column;gap:6px;}
.f label{font-size:11px;color:var(--muted);letter-spacing:.4px;padding-left:2px;}
.inp,.sel{height:38px;border-radius:11px;border:1px solid var(--line-2);background:rgba(255,255,255,.9);
  padding:0 12px;font-size:13px;outline:none;color:var(--ink);transition:.18s var(--ease);}
.inp:focus,.sel:focus{border-color:var(--violet);box-shadow:0 0 0 4px rgba(124,92,255,.11);}
.sel{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' stroke='%237a7a90' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:30px;}
textarea.inp{height:auto;padding:10px 12px;line-height:1.7;resize:vertical;}

.tbl-wrap{overflow-x:auto;border-radius:14px;}
table.tbl{width:100%;border-collapse:separate;border-spacing:0 4px;font-size:12.5px;}
table.tbl th{text-align:left;font-weight:500;color:var(--muted);font-size:11.5px;padding:9px 12px;white-space:nowrap;
  background:rgba(16,12,45,.035);letter-spacing:.2px;}
table.tbl th:first-child{border-radius:10px 0 0 10px;}
table.tbl th:last-child{border-radius:0 10px 10px 0;}
table.tbl td{padding:11px 12px;background:rgba(255,255,255,.62);border-top:1px solid transparent;border-bottom:1px solid transparent;white-space:nowrap;}
table.tbl tbody tr{transition:.15s var(--ease);}
table.tbl tbody tr:hover td{background:#fff;box-shadow:0 6px 18px rgba(16,12,45,.05);}
table.tbl tbody tr:hover td:first-child{border-radius:10px 0 0 10px;}
table.tbl tbody tr:hover td:last-child{border-radius:0 10px 10px 0;}
/* ===== 广告明细表 .tbl-ad（2026-11-12 改版，仅此一张表，不影响其他表格） =====
   F 款：去掉行内小卡片感，整行独立浮起；表头用全站主渐变紫→粉→橙
   字号比通用表格大一档：正文 12.5→14px，表头 11.5→14px，行距 11→15px */
table.tbl.tbl-ad{border-spacing:0 8px;font-size:14px;}
table.tbl.tbl-ad thead tr{background:linear-gradient(120deg,#6a45f0 0%,#ea3d7a 54%,#ef7433 100%);}
table.tbl.tbl-ad th{background:transparent;color:#fff;font-weight:600;font-size:14px;
  letter-spacing:.4px;padding:13px 15px;text-shadow:0 1px 3px rgba(50,10,70,.34);}
table.tbl.tbl-ad th:first-child{border-radius:11px 0 0 11px;}
table.tbl.tbl-ad th:last-child{border-radius:0 11px 11px 0;}
table.tbl.tbl-ad td{padding:15px;background:#f7f5ff;
  border-top:1px solid #e6e1fa;border-bottom:1px solid #e6e1fa;}
table.tbl.tbl-ad td:first-child{border-left:1px solid #e6e1fa;border-radius:11px 0 0 11px;}
table.tbl.tbl-ad td:last-child{border-right:1px solid #e6e1fa;border-radius:0 11px 11px 0;}
table.tbl.tbl-ad tbody tr{transition:transform .16s var(--ease),box-shadow .16s var(--ease);}
table.tbl.tbl-ad tbody tr:hover td{background:#f0ecff;border-color:#cdc3f8;box-shadow:0 10px 26px rgba(124,92,255,.20);}
table.tbl.tbl-ad .mono{font-size:12.5px;}
table.tbl.tbl-ad .chip.violet{background:rgba(124,92,255,.16);color:#4b34bd;}

.mono{font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;font-size:11.5px;letter-spacing:-.1px;}
.num{font-variant-numeric:tabular-nums;}
.t-strong{font-weight:600;}
.t-muted{color:var(--muted);}
.empty{padding:48px 0;text-align:center;color:var(--faint);font-size:12.5px;}
.empty .big{font-size:34px;display:block;margin-bottom:10px;opacity:.5;}
.pager{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:14px;font-size:12px;color:var(--muted);flex-wrap:wrap;}
.pager .pg{min-width:30px;height:30px;border-radius:9px;border:1px solid var(--line-2);background:#fff;cursor:pointer;font-size:12px;color:var(--ink-2);}
.pager .pg.on{background:var(--grad);border:none;color:#fff;font-weight:600;}

.sw{position:relative;width:42px;height:24px;flex:none;display:inline-block;cursor:pointer;}
.sw input{opacity:0;width:0;height:0;}
.sw i{position:absolute;inset:0;border-radius:99px;background:rgba(16,12,45,.15);transition:.22s var(--ease);}
.sw i::after{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;border-radius:50%;background:#fff;transition:.22s var(--ease);box-shadow:0 2px 5px rgba(16,12,45,.22);}
.sw input:checked + i{background:var(--grad);}
.sw input:checked + i::after{transform:translateX(18px);}

.tabs{display:flex;gap:4px;padding:4px;background:rgba(16,12,45,.045);border-radius:14px;overflow-x:auto;}
.tabs button{border:none;background:transparent;height:34px;padding:0 16px;border-radius:10px;font-size:12.5px;color:var(--muted);
  cursor:pointer;white-space:nowrap;transition:.18s var(--ease);}
.tabs button.on{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 4px 12px rgba(16,12,45,.09);}
.subtabs{display:flex;gap:20px;border-bottom:1px solid var(--line);margin-bottom:16px;}
.subtabs span{padding:9px 1px;font-size:12.5px;color:var(--muted);cursor:pointer;position:relative;}
.subtabs span.on{color:var(--ink);font-weight:600;}
.subtabs span.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2.5px;border-radius:3px;background:var(--grad);}

/* 表单栅格 */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px 16px;}
.form-grid .full{grid-column:1/-1;}
.form-grid label{display:flex;flex-direction:column;gap:6px;font-size:11.5px;color:var(--muted);}
.hint{font-size:11px;color:var(--faint);line-height:1.7;}
.note{border-radius:12px;padding:11px 14px;font-size:11.5px;line-height:1.85;}
.note.warn{background:rgba(255,159,10,.09);border:1px solid rgba(255,159,10,.22);color:#94600a;}
.note.info{background:rgba(0,212,255,.08);border:1px solid rgba(0,212,255,.2);color:#0a6c86;}
.note.violet{background:var(--grad-soft);border:1px solid rgba(124,92,255,.16);color:#5442b8;}
.note b{color:inherit;}

/* 弹窗 */
.mask{position:fixed;inset:0;z-index:200;background:rgba(8,6,20,.42);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:20px;animation:fade .2s ease;}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{width:520px;max-width:100%;max-height:88vh;overflow:auto;background:#fff;border-radius:24px;
  box-shadow:0 40px 100px rgba(10,5,40,.32);animation:pop .3s var(--ease);position:relative;}
.sheet.wide{width:680px;}
.sheet.narrow{width:420px;}
@keyframes pop{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.sheet-head{display:flex;align-items:center;padding:20px 22px 14px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:2;border-radius:24px 24px 0 0;}
.sheet-head h3{font-size:15px;letter-spacing:-.2px;}
.sheet-head .x{margin-left:auto;width:30px;height:30px;border-radius:9px;border:none;background:rgba(16,12,45,.05);cursor:pointer;font-size:16px;color:var(--muted);}
.sheet-head .x:hover{background:rgba(255,59,92,.1);color:var(--bad);}
.sheet-body{padding:18px 22px;}
.sheet-foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 22px 20px;position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line);}
.copybox{display:flex;gap:8px;}
.copybox .inp{flex:1;font-family:Consolas,monospace;font-size:11.5px;background:#f7f6fd;color:var(--ink-2);}
.kv{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:12.5px;}
.kv:last-child{border:none;}
.kv span{color:var(--muted);}
.kv b{font-weight:600;text-align:right;word-break:break-all;}

/* 大屏 */
.screen{background:radial-gradient(900px 500px at 50% -10%,rgba(124,92,255,.28),transparent 60%),#06060f;
  border-radius:26px;padding:24px;color:#dfe3ff;position:relative;overflow:hidden;min-height:calc(100vh - 130px);}
.screen::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(124,92,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(124,92,255,.08) 1px,transparent 1px);
  background-size:44px 44px;mask-image:radial-gradient(circle at 50% 30%,#000,transparent 78%);opacity:.55;pointer-events:none;}
.screen-head{text-align:center;margin-bottom:20px;position:relative;}
.screen-head h2{font-size:22px;letter-spacing:8px;font-weight:700;background:linear-gradient(100deg,#fff,#9f8bff 50%,#00d4ff);-webkit-background-clip:text;background-clip:text;color:transparent;}
.screen-head p{font-size:10.5px;letter-spacing:3px;color:#5d5f8a;margin-top:6px;}
.screen .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px;}
.screen .kpi-d{background:rgba(255,255,255,.045);border:1px solid rgba(124,92,255,.2);border-radius:16px;padding:15px 16px;position:relative;overflow:hidden;}
.screen .kpi-d::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--grad-cyan);}
.screen .kpi-d .v{font-size:25px;font-weight:800;letter-spacing:-.8px;color:#8ef0ff;text-shadow:0 0 22px rgba(0,212,255,.42);font-variant-numeric:tabular-nums;}
.screen .kpi-d .v.gold{color:#ffd36e;text-shadow:0 0 22px rgba(255,211,110,.4);}
.screen .kpi-d .k{font-size:10.5px;color:#7379a8;margin-top:5px;letter-spacing:1px;}
.panel-d{background:rgba(255,255,255,.035);border:1px solid rgba(124,92,255,.18);border-radius:16px;padding:14px 16px;}
.panel-d h4{font-size:11.5px;color:#9aa0d0;letter-spacing:1.4px;font-weight:500;margin-bottom:10px;display:flex;align-items:center;gap:6px;}
.panel-d h4::before{content:"";width:3px;height:11px;border-radius:2px;background:var(--grad-cyan);}
.bar-row{display:flex;align-items:center;gap:9px;font-size:11.5px;color:#8b91c4;margin:9px 0;}
.bar-row .n{width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#cfd4ff;}
.bar-row .b{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.07);overflow:hidden;}
.bar-row .b i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#7c5cff,#00d4ff);}
.bar-row .v{width:82px;text-align:right;color:#8ef0ff;font-size:10.5px;font-variant-numeric:tabular-nums;}
.log-line{display:flex;gap:10px;font-family:Consolas,monospace;font-size:11px;padding:6px 0;border-bottom:1px dashed rgba(255,255,255,.06);}
.log-line .t{color:#5d5f8a;flex:none;}
.log-line .lv{flex:none;width:44px;}
.log-line .m{color:#b9bee8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lv-info{color:#8ef0ff;} .lv-warn{color:#ffd36e;} .lv-error{color:#ff7d9c;}

/* 图表 */
.chart-wrap{position:relative;width:100%;}
canvas.chart{width:100%;display:block;}
.legend{display:flex;gap:14px;font-size:11.5px;color:var(--muted);flex-wrap:wrap;}
.legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px;}

/* 卡列表 */
.game-card{background:var(--card);border:1px solid rgba(255,255,255,.92);border-radius:18px;padding:16px;box-shadow:var(--shadow);
  transition:.25s var(--ease);cursor:pointer;position:relative;overflow:hidden;}
.game-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);}
.game-card .gh{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.game-card .gav{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:15px;font-weight:700;color:#fff;background:var(--grad);flex:none;}
.game-card .gn{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.game-card .ga{font-size:10.5px;color:var(--faint);font-family:Consolas,monospace;}
.game-card .gr{font-size:23px;font-weight:800;letter-spacing:-.8px;}
.game-card .gs{display:flex;gap:12px;margin-top:10px;font-size:11px;color:var(--muted);}
.game-card .gs b{color:var(--ink);font-weight:600;}

/* 上传头像 */
.avatar-box{display:flex;align-items:center;gap:14px;}
.avatar-lg{width:72px;height:72px;border-radius:22px;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:26px;font-weight:700;overflow:hidden;}
.avatar-lg img{width:100%;height:100%;object-fit:cover;}

/* 权限矩阵 */
.perm-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-height:300px;overflow:auto;padding:4px;}
.perm-item{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:9px 11px;font-size:12px;cursor:pointer;transition:.15s;}
.perm-item:hover{background:rgba(124,92,255,.05);}
.perm-item input{accent-color:var(--violet);}

/* 代码块 */
pre.code{background:#0c0c14;color:#c9d1ff;border-radius:14px;padding:16px;font-size:11.5px;line-height:1.85;overflow:auto;font-family:Consolas,monospace;}
pre.code .k{color:#ff8ab3;} pre.code .s{color:#c9ff4d;} pre.code .c{color:#6c7194;}

.toast{position:fixed;left:50%;top:22px;transform:translate(-50%,-14px);z-index:400;background:#0c0c14;color:#fff;
  padding:11px 20px;border-radius:13px;font-size:12.5px;box-shadow:0 16px 40px rgba(10,6,30,.3);opacity:0;transition:.28s var(--ease);pointer-events:none;}
.toast.on{opacity:1;transform:translate(-50%,0);}
.toast.err{background:linear-gradient(120deg,#ff3b5c,#ff7a3d);}

.dropdown{position:absolute;right:0;top:44px;background:#fff;border-radius:14px;border:1px solid var(--line);box-shadow:0 18px 46px rgba(16,12,45,.16);padding:6px;min-width:160px;z-index:80;display:none;}
.dropdown.on{display:block;animation:pop .2s var(--ease);}
.dropdown a{display:block;padding:9px 12px;border-radius:9px;font-size:12.5px;cursor:pointer;}
.dropdown a:hover{background:rgba(124,92,255,.08);color:var(--violet);}
.dropdown .div{height:1px;background:var(--line);margin:5px 4px;}

.search-dd{position:absolute;left:0;right:auto;top:42px;background:#fff;border-radius:13px;border:1px solid var(--line);
  box-shadow:0 18px 40px rgba(16,12,45,.16);max-height:230px;overflow-y:auto;overflow-x:hidden;z-index:70;display:none;padding:5px;
  min-width:100%;width:max-content;max-width:360px;}
.search-dd.on{display:block;}
/* 下拉展开时把所在卡片抬到同级卡片之上，否则会被下面的卡片盖住看不见选项 */
.card.dd-open{position:relative;z-index:30;}
.search-dd div{padding:8px 10px;border-radius:9px;font-size:12.5px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.search-dd div:hover{background:rgba(124,92,255,.08);}
.search-dd div b{font-weight:500;min-width:0;overflow-wrap:anywhere;}
.search-dd div span{color:var(--faint);font-size:10.5px;font-family:Consolas,monospace;flex:0 0 auto;white-space:nowrap;}
.rel{position:relative;}

@media (max-width:1180px){
  .g4{grid-template-columns:repeat(2,1fr);}
  .screen .kpis{grid-template-columns:repeat(2,1fr);}
  .login{grid-template-columns:1fr;}
  .login-left{display:none;}
}
@media (max-width:900px){
  #menu-toggle{display:grid !important;}
  .sidebar{transform:translateX(-110%);transition:.3s var(--ease);}
  .sidebar.open{transform:none;}
  .main,.main.wide{margin-left:0;}
  .g3,.g2,.form-grid{grid-template-columns:1fr;}
  .g4{grid-template-columns:1fr 1fr;}
  .login-hero h1{font-size:34px;}
  .marquee{display:none;}
}

/* 配置行 */
.cfg-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px dashed var(--line);}
.cfg-row:last-child{border-bottom:none;}
.cfg-row b{font-size:13px;font-weight:600;}
.cfg-row .hint{margin-top:3px;max-width:420px;}
.perm-item input{width:15px;height:15px;}

/* 登录页服务端状态 */
.srv-status{margin-top:12px;display:flex;align-items:center;gap:8px;font-size:11.5px;line-height:1.5;
  color:var(--muted);background:rgba(124,92,255,.05);border:1px solid var(--line);padding:9px 12px;border-radius:12px;}
.srv-status i{width:7px;height:7px;border-radius:50%;background:var(--faint);flex:none;transition:.3s;}
.srv-status.on{color:#0a8f6a;background:rgba(0,184,132,.07);border-color:rgba(0,184,132,.22);}
.srv-status.on i{background:var(--ok);box-shadow:0 0 0 3px rgba(0,184,132,.16);}
.srv-status.off{color:#c22a48;background:rgba(255,59,92,.06);border-color:rgba(255,59,92,.2);}
.srv-status.off i{background:var(--bad);box-shadow:0 0 0 3px rgba(255,59,92,.14);}
.srv-status code{font-family:"SFMono-Regular",Consolas,monospace;font-size:11px;background:rgba(16,12,45,.06);
  padding:1px 5px;border-radius:5px;color:var(--ink-2);}

/* ---- 投放链路流程（游戏专属连接弹窗） ---- */
.flow{position:relative;padding-top:1px;}
.flow-step{position:relative;display:flex;gap:9px;padding-bottom:9px;}
.flow-step:last-child{padding-bottom:0;}
.flow-step::before{content:"";position:absolute;left:9.5px;top:21px;bottom:0;width:1px;
  background:rgba(124,92,255,.32);}
.flow-step:last-child::before{display:none;}
.flow-step i{flex:0 0 19px;height:19px;border-radius:50%;background:rgba(124,92,255,.17);
  color:#453199;font-style:normal;font-size:10.5px;font-weight:700;line-height:19px;
  text-align:center;position:relative;z-index:1;}
.flow-step>div{flex:1;min-width:0;font-size:12px;line-height:1.7;color:#372a7e;}
.flow-step b{font-weight:700;}
.flow-step .mono{margin-top:4px;color:#4a3a9c;word-break:break-all;
  background:rgba(124,92,255,.09);border-radius:6px;padding:5px 8px;}

/* ---- 游戏专属连接弹窗（列表「功能」） ---- */
.gl-kv{margin-bottom:10px;}
.gl-kv label{display:block;font-size:11.5px;color:var(--muted);margin-bottom:2px;}
.gl-kv b{display:block;font-size:14px;font-weight:700;color:var(--ink);letter-spacing:-.1px;}
.gl-kv b.mono{font-family:"SFMono-Regular",Consolas,ui-monospace,monospace;font-size:12.5px;
  font-weight:600;color:#1a7fd4;letter-spacing:.2px;word-break:break-all;}
.gl-tabs{display:flex;gap:26px;border-bottom:1px solid var(--line-2);margin:14px 0 16px;}
.gl-tabs a{position:relative;padding:0 1px 11px;font-size:13px;color:var(--muted);
  cursor:pointer;transition:color .18s var(--ease);user-select:none;}
.gl-tabs a:hover{color:var(--ink-2);}
.gl-tabs a.on{color:var(--ink);font-weight:600;}
.gl-tabs a.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  border-radius:2px;background:var(--bad);}
.gl-sec{font-size:11.5px;color:var(--muted);margin-bottom:8px;}