/* ============================================
   后台界面样式 —— 复刻 pay.wanghuwe 风格
   基于 Bootstrap 5.3.3 + Bootstrap Icons
   ============================================ */
:root {
  --sidebar-w: 240px;
  --primary: #4f6ef7;
  --primary-dark: #3b56d8;
  --bg: #f4f6fb;
  --sidebar-bg: #1b1f3a;
  --sidebar-text: #aab1d0;
  --card-shadow: 0 4px 16px rgba(20,40,100,.08);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; color:#26304b; }

.app-layout { display: flex; min-height: 100vh; }

/* 侧边栏 */
.sidebar {
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  display: flex; flex-direction: column;
  position: fixed; top:0; bottom:0; left:0; z-index:100;
  transition: transform .25s;
}
.sidebar-brand {
  display:flex; align-items:center; gap:10px;
  padding: 20px 20px; font-size:18px; font-weight:700; color:#fff;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.sidebar-brand i { font-size:22px; color: var(--primary); }
.sidebar-nav { flex:1; padding:14px 10px; overflow-y:auto; }
.nav-item {
  display:flex; align-items:center; gap:12px;
  padding:11px 14px; margin-bottom:4px; border-radius:9px;
  color:var(--sidebar-text); text-decoration:none; font-size:14.5px;
  transition: all .15s;
}
.nav-item i { font-size:18px; width:20px; text-align:center; }
.nav-item:hover { background:rgba(255,255,255,.06); color:#fff; }
.nav-item.active { background:var(--primary); color:#fff; box-shadow:0 4px 12px rgba(79,110,247,.4); }
.sidebar-foot { padding:14px; border-top:1px solid rgba(255,255,255,.06); }

/* 主区域 */
.main { flex:1; margin-left: var(--sidebar-w); display:flex; flex-direction:column; min-width:0; }
.topbar {
  height:60px; background:#fff; display:flex; align-items:center; gap:12px;
  padding:0 22px; border-bottom:1px solid #eef0f6; position:sticky; top:0; z-index:50;
}
.page-title { font-weight:600; }
.content { padding:22px; }

/* 卡片 */
.card { border:none; border-radius:14px; box-shadow:var(--card-shadow); }
.card-header { background:#fff; border-bottom:1px solid #eef0f6; font-weight:600; border-radius:14px 14px 0 0 !important; }
.table thead th { font-size:13px; color:#7a86a5; font-weight:600; border-bottom:2px solid #eef0f6; background:#fafbfe; white-space:nowrap; }
.table td { vertical-align:middle; }
.table th:first-child, .table td:first-child { padding-left: 1.2rem; }
.badge-soft { padding:5px 10px; border-radius:20px; font-weight:500; font-size:12px; }

/* 按钮 */
.btn-primary { background:var(--primary); border-color:var(--primary); }
.btn-primary:hover { background:var(--primary-dark); border-color:var(--primary-dark); }
.btn { border-radius:8px; }

/* 统计卡片 */
.stat-card { border-radius:14px; padding:20px; color:#fff; position:relative; overflow:hidden; box-shadow:var(--card-shadow); }
.stat-card .num { font-size:30px; font-weight:700; }
.stat-card .lbl { font-size:14px; opacity:.9; }
.stat-card i { position:absolute; right:16px; top:16px; font-size:34px; opacity:.35; }
.bg-grad-1 { background:linear-gradient(135deg,#4f6ef7,#7a4ff7); }
.bg-grad-2 { background:linear-gradient(135deg,#18c08d,#2fd8a8); }
.bg-grad-3 { background:linear-gradient(135deg,#f5a623,#f77a3b); }
.bg-grad-4 { background:linear-gradient(135deg,#eb4d5c,#f07a8f); }
.bg-grad-5 { background:linear-gradient(135deg,#5b6c8f,#7b8db0); }

/* 筛选条 */
.filter-bar { background:#fff; border-radius:12px; padding:14px 16px; box-shadow:var(--card-shadow); display:flex; flex-wrap:wrap; gap:10px; align-items:center; }

/* 登录页 */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#1b1f3a 0%, #3b56d8 100%); }
.login-card { width:400px; background:#fff; border-radius:18px; padding:40px 36px; box-shadow:0 20px 60px rgba(0,0,0,.3); }

/* 图片缩略 */
.img-thumb-sm { width:64px; height:64px; object-fit:cover; border-radius:8px; border:1px solid #eef0f6; }

/* 详情表格 */
.detail-table td { padding:10px 14px; }
.detail-table .k { background:#fafbfe; width:200px; color:#7a86a5; font-weight:600; }

@media (max-width: 991px){
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left:0; }
}

/* 表格列宽拖拽分界线 */
.table-resizable thead th,
.table-resizable tbody td { border-right: 1px solid #dfe4ef; }
.table-resizable thead th:last-child,
.table-resizable tbody td:last-child { border-right: none; }
.col-resizer { position: absolute; top: 0; right: 0; bottom: 0; width: 14px; margin-right: -7px; cursor: col-resize; z-index: 10; }
.col-resizer:before { content: ''; position: absolute; left: 6px; top: 4px; bottom: 4px; width: 3px; background: #4f6ef7; border-radius: 1px; opacity: 0; transition: opacity .15s; }
.col-resizer:hover:before, .col-resizer:active:before, th.resizing-col .col-resizer:before { opacity: 1; }
th.resizing-col { background: #eef1fc !important; }
body.resizing, body.resizing * { cursor: col-resize !important; user-select: none !important; }

/* 图表 */
.chart-bars { display:flex; align-items:flex-end; gap:10px; height:190px; padding-top:22px; }
.chart-bars .bar { flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:100%; }
.chart-bars .bar .bar-col { width:72%; max-width:46px; border-radius:6px 6px 0 0; background:linear-gradient(180deg,#4f6ef7,#7a4ff7); position:relative; }
.chart-bars .bar .bar-col:hover { filter:brightness(1.08); }
.chart-bars .bar .bar-col span { position:absolute; top:-20px; left:50%; transform:translateX(-50%); font-size:12px; font-weight:700; color:#4f6ef7; white-space:nowrap; }
.chart-bars .bar .bar-day { font-size:12px; color:#888; margin-top:8px; }
.seg-bar { display:flex; height:22px; border-radius:6px; overflow:hidden; margin:12px 0 16px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.04); }
.seg-bar > div { transition:flex-basis .3s; }
.legend-dot { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; }
.pending-list-row:hover { background:#f7f9ff; }

/* 列表 Logo 缩略图 */
.img-logo { width:44px; height:44px; object-fit:cover; border-radius:10px; border:1px solid #eef0f6; background:#f6f8ff; display:block; }

/* 页面底部备案信息 */
.app-footer { margin-top: 22px; padding: 16px 20px; border-top: 1px solid #eef0f6; border-radius: 12px; background: #fff; box-shadow: 0 2px 10px rgba(20,40,100,.05); text-align: center; }
.app-footer .company { font-size: 14px; font-weight: 600; color: #5b6c8f; letter-spacing: .5px; }
.app-footer .beian { margin-top: 8px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 18px; font-size: 12.5px; color: #8a90a6; }

/* ===== 网站连接页：网站卡片 ===== */
.site-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
.site-card {
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:10px; padding:24px 18px; background:#fff; border-radius:14px;
  box-shadow:var(--card-shadow); color:#26304b; text-decoration:none; transition:transform .15s, box-shadow .15s;
}
.site-card:hover { transform:translateY(-4px); box-shadow:0 10px 24px rgba(20,40,100,.12); color:#26304b; text-decoration:none; }
.site-card .icon { width:52px; height:52px; border-radius:12px; object-fit:contain; }
.site-card .name { font-weight:600; font-size:15px; }
.site-card .desc { font-size:12.5px; color:#7a86a5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* 登录页微信按钮 */
.btn-wechat { background:#07c160; border-color:#07c160; color:#fff; font-weight:600; }
.btn-wechat:hover { background:#06ad56; border-color:#06ad56; color:#fff; }
.login-divider { text-align:center; color:#c0c4cc; margin:16px 0 4px; font-size:13px; }

/* 微信绑定状态卡片 */
.bind-status { display:flex; align-items:center; gap:14px; }
.bind-status .avatar-lg { width:56px; height:56px; border-radius:50%; object-fit:cover; }