/* ============================================================
   腾云电子城后台 · 暗色数据中台风 · base.css
   ============================================================ */

:root{
  --bg-app:        #0a0e1a;
  --bg-panel:      #131722;
  --bg-card:       #1a1f2e;
  --bg-card-2:     #161b29;
  --bg-hover:      #1e2436;
  --border:        rgba(255,255,255,0.06);
  --border-strong: rgba(255,255,255,0.12);
  --text:          #f1f5f9;
  --text-2:        #94a3b8;
  --text-3:        #64748b;
  --brand:         #ff8a3d;
  --brand-2:       #ff6b00;
  --brand-glow:    0 0 24px rgba(255,107,0,0.35);
  --green:         #00d97e;
  --blue:          #3b82f6;
  --red:           #ff3b30;
  --yellow:        #f5a623;
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px;
  --sidebar-w: 240px;
  --topbar-h: 64px;
  --glass-bg: rgba(19,23,34,0.72);
  --glass-blur: blur(12px);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
  background: var(--bg-app);
  color: var(--text);
  font-size:14px; line-height:1.5;
  -webkit-font-smoothing: antialiased;
}
a{ color:inherit; text-decoration:none; }
code{ font-family: SFMono-Regular, Consolas, monospace; }
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:#2a3142; border-radius:8px; }
::-webkit-scrollbar-track{ background:transparent; }

/* ====== 侧边栏 ====== */
.sidebar{
  position:fixed; top:0; left:0; bottom:0; width:var(--sidebar-w);
  background: linear-gradient(180deg,#0e1320 0%, #0a0e1a 100%);
  border-right: 1px solid var(--border);
  display:flex; flex-direction:column;
  z-index:50;
}
.sidebar-logo{
  height: var(--topbar-h);
  display:flex; align-items:center; gap:10px;
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
}
.sidebar-logo .logo-icon{ font-size:24px; filter: drop-shadow(0 0 8px rgba(255,107,0,.6)); }
.sidebar-logo .logo-text{ font-size:14px; font-weight:700; color:var(--text); line-height:1.2; }
.sidebar-logo .logo-text small{ color:var(--text-3); font-size:10px; letter-spacing:1px; font-weight:400; }

.sidebar-nav{ flex:1; overflow-y:auto; padding:12px 10px; }
.nav-item{
  display:flex; align-items:center; gap:12px;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size:13px; font-weight:500;
  margin-bottom:2px;
  transition: background .15s, color .15s;
}
.nav-item .ic{ font-size:16px; width:20px; text-align:center; flex-shrink:0; }
.nav-item:hover{ background: var(--bg-hover); color:var(--text); }
.nav-item.active{
  background: linear-gradient(90deg, rgba(255,107,0,0.18) 0%, rgba(255,107,0,0.04) 100%);
  color: var(--brand);
  box-shadow: inset 2px 0 0 var(--brand-2);
}

.sidebar-footer{ padding: 12px 10px; border-top:1px solid var(--border); }
.logout-btn{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:var(--r-sm);
  color:var(--text-2); font-size:13px;
}
.logout-btn:hover{ background: rgba(255,59,48,.12); color:var(--red); }

/* ====== 主区域 / 顶栏 / 内容 ====== */
.main{ margin-left: var(--sidebar-w); min-height:100vh; display:flex; flex-direction:column; }
.topbar{
  height: var(--topbar-h);
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 24px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--border);
}
.topbar-title h1{ font-size:16px; font-weight:600; color:var(--text); }
.topbar-title .meta{ font-size:12px; color:var(--text-3); margin-top:2px; }
.topbar-actions{ display:flex; gap:10px; align-items:center; }
.menu-toggle{ display:none; background:var(--bg-card-2); border:1px solid var(--border); padding:8px 10px; border-radius:var(--r-sm); cursor:pointer; color:var(--text); font-size:14px; }

.content{ padding: 24px; max-width: 1500px; width:100%; margin:0 auto; flex:1; }

/* ====== 卡片 ====== */
.card{
  background: var(--bg-card);
  border:1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px 22px;
  margin-bottom: 18px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.25);
}
.card h2{ font-size:15px; font-weight:600; margin-bottom:6px; color:var(--text); }
.card h1{ font-size:20px; font-weight:600; margin-bottom:6px; color:var(--text); }
.card .sub{ font-size:12px; color:var(--text-3); margin-bottom:14px; }
.sub{ font-size:13px; color:var(--text-3); margin-bottom:16px; }
h1{ font-size:20px; font-weight:600; }

/* 统计卡 */
.stats{ display:grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap:12px; margin-bottom:18px; }
.stat-card, .stat{
  background: var(--bg-card-2);
  border:1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
}
.stat-card .stat-label, .stat .k{ font-size:12px; color:var(--text-3); margin-bottom:6px; }
.stat-card .stat-value, .stat .v{ font-size:22px; font-weight:700; color:var(--text); }
.stat-value.orange, .stat.warn .v{ color: var(--brand); }
.stat-value.green,  .stat.ok .v{ color: var(--green); }
.stat-value.blue,   .stat.bad .v{ color: var(--red); }
.summary{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.summary-item, .summary .item{ background:var(--bg-card-2); border:1px solid var(--border); border-radius:var(--r-md); padding:12px 18px; min-width:160px; }
.summary-item .k, .summary .item .k{ font-size:12px; color:var(--text-3); }
.summary-item .v, .summary .item .v{ font-size:22px; font-weight:600; margin-top:4px; }
.summary-item .v.pos, .summary .item .v.pos{ color:var(--green); }
.summary-item .v.neg, .summary .item .v.neg{ color:var(--red); }

/* ====== 工具栏 ====== */
.toolbar{ display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin-bottom:14px; }
.toolbar > div{ min-width:0; }
.toolbar label{ font-size:12px; color:var(--text-3); display:block; margin-bottom:4px; }
.toolbar select, .toolbar input[type=text]{ width:200px; }
.search-bar{ margin-bottom:14px; }
.search-bar input{ width:100%; max-width:360px; }

/* ====== 表格 ====== */
.table-wrap{ background:var(--bg-card); border-radius:var(--r-lg); overflow:auto; box-shadow:0 4px 24px rgba(0,0,0,0.25); border:1px solid var(--border); }
table{ width:100%; border-collapse:collapse; font-size:13px; }
th{
  background: var(--bg-card-2);
  text-align:left; padding:11px 12px;
  color:var(--text-2); font-weight:600; font-size:12px;
  border-bottom:1px solid var(--border-strong);
  white-space:nowrap;
  position:sticky; top:0;
}
th:first-child, td:first-child{ text-align:left; }
td{ padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:middle; color:var(--text); }
tr:hover td{ background: var(--bg-hover); }
tr.wl-row td{ background: rgba(0,217,126,0.08); }
tr.wl-row:hover td{ background: rgba(0,217,126,0.12); }
td.pos, .v.pos, td[data-pos]{ color:var(--green); }
td.neg, .v.neg{ color:var(--red); }
.empty{ text-align:center; color:var(--text-3); padding:40px 0; font-size:13px; }
.tg{ font-family: monospace; color: var(--text-3); font-size: 12px; }
.usercol{ line-height:1.4; }
.usercol .main{ font-weight:500; color:var(--text); }
.usercol .sub{ color:var(--text-3); font-size:11px; }
.mono{ font-family: SFMono-Regular, Consolas, monospace; font-size:12px; }
.addr{ max-width:220px; word-break:break-all; font-family: SFMono-Regular, Consolas, monospace; font-size:12px; color:var(--text-2); }
.txid{ max-width:180px; word-break:break-all; font-family: SFMono-Regular, Consolas, monospace; font-size:11px; color:var(--text-3); }

/* ====== 徽章 / 状态 ====== */
.pill, .badge, .status, .tag, .wl-tag{
  display:inline-block; padding:3px 10px; border-radius:12px;
  font-size:12px; font-weight:600; white-space:nowrap;
  border:1px solid transparent; vertical-align:middle;
}
.pill.in{ background:rgba(255,138,61,.12); color:var(--brand); border-color:rgba(255,138,61,.3); }
.pill.out{ background:rgba(59,130,246,.12); color:var(--blue); border-color:rgba(59,130,246,.3); }
.pill.bal{ background:rgba(0,217,126,.12); color:var(--green); border-color:rgba(0,217,126,.3); }
.pill.pending, .badge.pending, .pill.in{ background:rgba(255,138,61,.12); color:var(--brand); border-color:rgba(255,138,61,.3); }
.pill.completed, .badge.issued, .pill.ok, .status.on{ background:rgba(0,217,126,.12); color:var(--green); border-color:rgba(0,217,126,.3); }
.pill.rejected, .badge.skipped, .pill.fail, .status.off{ background:rgba(255,59,48,.12); color:var(--red); border-color:rgba(255,59,48,.3); }
.badge.rollover{ background:rgba(59,130,246,.12); color:var(--blue); border-color:rgba(59,130,246,.3); }
.badge.off{ background:var(--bg-card-2); color:var(--text-3); border-color:var(--border); }
.wl-tag{ background:var(--green); color:#fff; margin-left:6px; padding:2px 8px; font-size:11px; }
.tag.first{ background:rgba(245,166,35,.12); color:var(--yellow); border-color:rgba(245,166,35,.3); }
.tag.reload{ background:rgba(0,217,126,.12); color:var(--green); border-color:rgba(0,217,126,.3); }

/* ====== 按钮系统 ====== */
.btn, button, input[type=submit]{
  display:inline-flex; align-items:center; gap:6px; justify-content:center;
  padding: 9px 18px; border:1px solid var(--border); border-radius:var(--r-sm);
  font-size:13px; font-weight:600; cursor:pointer; color:var(--text);
  background:var(--bg-card-2);
  transition: background .15s, border-color .15s, box-shadow .15s, transform .1s;
  font-family:inherit;
}
.btn:hover, button:hover{ background:var(--bg-hover); border-color:var(--border-strong); }
.btn-primary, .save, .m-save, .act-ok, .btn-primary[type=submit]{
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#fff; border:none; box-shadow: var(--brand-glow);
}
.btn-primary:hover, .save:hover, .act-ok:hover{ transform:translateY(-1px); box-shadow:0 6px 20px rgba(255,107,0,.45); }
.btn-danger, .act-no, .danger, .skip{
  background: transparent; color:var(--red); border:1px solid rgba(255,59,48,.4);
}
.btn-danger:hover, .act-no:hover, .danger:hover{ background:rgba(255,59,48,.12); }
.btn-success, .issue{ background:linear-gradient(135deg,#1ec97a,#00b86a); color:#fff; border:none; }
.btn-success:hover, .issue:hover{ box-shadow:0 4px 14px rgba(0,217,126,.35); transform:translateY(-1px); }
.btn-rollover, .roll{ background:linear-gradient(135deg,#4a90e2,#3b82f6); color:#fff; border:none; }
.btn-rollover:hover, .roll:hover{ box-shadow:0 4px 14px rgba(59,130,246,.35); transform:translateY(-1px); }
.btn-outline{ background:transparent; color:var(--brand); border:1px solid rgba(255,138,61,.4); }
.btn-sm, td.ops button{ padding:5px 10px; font-size:11px; }
.add-btn{ padding:9px 18px; background:rgba(255,138,61,.08); color:var(--brand); border:1px dashed rgba(255,138,61,.5); border-radius:var(--r-sm); font-size:13px; font-weight:500; cursor:pointer; }
.add-btn:hover{ background:rgba(255,138,61,.16); }
.del{ width:34px; height:34px; background:rgba(255,59,48,.1); color:var(--red); border:1px solid rgba(255,59,48,.3); border-radius:var(--r-sm); cursor:pointer; font-size:14px; }
.del:hover{ background:rgba(255,59,48,.2); }
.secondary{ background:var(--bg-card-2); color:var(--text); border:1px solid var(--border); }
.secondary:hover{ background:var(--bg-hover); }

/* ====== 表单 ====== */
input[type=text], input[type=number], input[type=password], input[type=url], input[type=date], input[type=search], input[type=tel], textarea, select{
  width:100%; padding:10px 12px;
  background: var(--bg-card-2);
  border:1px solid var(--border);
  border-radius: var(--r-sm);
  color:var(--text); font-size:14px; font-family:inherit;
  outline:none; transition: border-color .15s, box-shadow .15s;
}
textarea{ min-height:88px; resize:vertical; }
input:focus, textarea:focus, select:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(255,138,61,.15);
}
input[type=file]{ padding:8px; background:var(--bg-card-2); border-color:var(--border); }
input[type=checkbox]{ width:18px; height:18px; accent-color:var(--brand); }
label{ display:block; font-size:12px; color:var(--text-3); margin-bottom:6px; font-weight:500; }
.hint{ font-size:11px; color:var(--text-3); margin-top:8px; line-height:1.6; }
.hint code{ background:var(--bg-card-2); padding:1px 6px; border-radius:4px; color:var(--brand); }
.preview{ margin-top:10px; display:flex; align-items:center; gap:10px; background:var(--bg-card-2); padding:8px 12px; border-radius:var(--r-sm); }
.preview img{ max-height:72px; border-radius:var(--r-sm); }
.preview code{ font-size:12px; color:var(--text-3); }
.ok{ color:var(--green); font-size:13px; font-weight:500; margin-bottom:14px; }
.err{ color:var(--red); font-size:13px; font-weight:500; margin-bottom:14px; }
.actions{ margin-top:20px; display:flex; gap:12px; align-items:center; }
.row{ display:flex; gap:12px; margin-top:12px; }
.row > div{ flex:1; }

/* ====== 开关 ====== */
.switch-row{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.switch{ position:relative; width:44px; height:24px; display:inline-block; flex:0 0 auto; }
.switch input{ opacity:0; width:0; height:0; }
.slider{ position:absolute; cursor:pointer; inset:0; background:#2a3142; border-radius:24px; transition:.2s; }
.slider:before{ content:""; position:absolute; height:18px; width:18px; left:3px; top:3px; background:#cbd5e1; border-radius:50%; transition:.2s; }
.switch input:checked + .slider{ background: linear-gradient(135deg,var(--brand),var(--brand-2)); box-shadow:var(--brand-glow); }
.switch input:checked + .slider:before{ transform:translateX(20px); background:#fff; }
.switch-label{ font-size:14px; font-weight:500; color:var(--text); }
.saved{ padding:10px 14px; background:rgba(0,217,126,.1); color:var(--green); border:1px solid rgba(0,217,126,.25); border-radius:var(--r-sm); font-size:13px; margin-bottom:14px; }

/* ====== flash / 提示 ====== */
.flash, .saved-tip, .msg-tip{ border-radius:var(--r-md); padding:14px 18px; margin-bottom:16px; font-size:14px; border:1px solid transparent; }
.flash.success, .saved-tip{ background:rgba(0,217,126,.1); color:var(--green); border-color:rgba(0,217,126,.25); }
.flash.error, .err-tip{ background:rgba(255,59,48,.1); color:var(--red); border-color:rgba(255,59,48,.25); }
.flash.info, .msg-tip{ background:rgba(59,130,246,.1); color:var(--blue); border-color:rgba(59,130,246,.25); }
.flash .big{ font-size:20px; font-weight:600; margin:8px 0; }
.flash ul{ margin:8px 0 0 20px; }
.flash li{ margin:2px 0; }
.flash b{ color:var(--text); }

/* ====== 分页 ====== */
.pager, .pagination{ display:flex; gap:8px; align-items:center; justify-content:center; margin-top:16px; font-size:13px; flex-wrap:wrap; }
.pager a, .pagination a{ padding:7px 14px; background:var(--bg-card-2); border:1px solid var(--border); border-radius:var(--r-sm); color:var(--text); }
.pager a:hover, .pagination a:hover{ border-color:var(--brand); color:var(--brand); }
.pagination a.cur, .pager a.cur{ background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; border:none; }
.pager span, .pagination span{ color:var(--text-3); }

/* ====== 特殊容器 ====== */
.game-cfg-item, .ch-item, .run, .pbox, .bf-box, .lock{
  border:1px solid var(--border); border-radius:var(--r-md); padding:16px;
  background:var(--bg-card-2); margin-bottom:14px;
}
.ch-item{ display:flex; align-items:center; gap:12px; padding:12px 16px; }
.ch-info{ flex:1; min-width:0; }
.ch-name{ font-size:14px; font-weight:600; display:flex; align-items:center; gap:8px; color:var(--text); }
.ch-meta{ font-size:11px; color:var(--text-3); margin-top:3px; word-break:break-all; }
.gc-head{ font-size:14px; font-weight:600; color:var(--brand); margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.gc-sub{ font-size:12px; color:var(--text-3); font-weight:400; }
.btn-row{ display:flex; gap:8px; align-items:center; margin-bottom:10px; }
.btn-row .b-label{ flex:1.2; }
.btn-row .b-type{ width:96px; }
.btn-row .b-value{ flex:2; }
.btn-row .b-gt{ width:88px; }
.adj-form{ display:flex; gap:4px; align-items:center; }
.grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:768px){ .grid{ grid-template-columns:1fr; } }

/* ====== Modal ====== */
.modal-mask, .modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  display:none; align-items:flex-start; justify-content:center; z-index:100; padding:60px 16px;
}
.modal-mask.show, .modal-overlay.show{ display:flex; }
.modal{
  background: var(--bg-card); border:1px solid var(--border-strong); border-radius:var(--r-lg);
  width:100%; max-width:520px; max-height:80vh; overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.5); padding:24px;
}
.modal h3{ font-size:15px; margin-bottom:14px; color:var(--text); }
.modal .m-actions{ display:flex; gap:10px; margin-top:18px; }
.modal .m-actions button{ flex:1; padding:11px 0; }
.m-cancel{ background:var(--bg-card-2); color:var(--text); border:1px solid var(--border); }

/* ====== 登录页（无侧栏） ====== */
body.no-sidebar{ display:flex; align-items:center; justify-content:center; min-height:100vh; background:radial-gradient(ellipse at top, #131722 0%, #0a0e1a 70%); }
body.no-sidebar .sidebar, body.no-sidebar .topbar{ display:none; }
body.no-sidebar .main{ margin-left:0; }
body.no-sidebar .content{ max-width:360px; padding:0; }

/* ====== 响应式 ====== */
@media (max-width: 1024px){
  .sidebar{ transform:translateX(-100%); transition:transform .25s; }
  .sidebar.open{ transform:translateX(0); box-shadow:0 0 40px rgba(0,0,0,.6); }
  .main{ margin-left:0; }
  .topbar .menu-toggle{ display:inline-flex; }
}