:root{
  --bg:#0f1226;
  --card:#171a38;
  --muted:#aeb5d6;
  --text:#eef1ff;
  --accent:#7c9cff;
  --accent-2:#80e0a7;
  --danger:#ff6b6b;
  --warning:#ffb020;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
a{color:var(--accent);text-decoration:none}
.container{
  max-width: min(1600px, 96vw);  /* 原来是 1100px */
  margin: 0 auto;
  padding: 16px;
}
.header{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
.brand{font-weight:800;letter-spacing:.5px;font-size:20px}
.nav a{margin-right:16px;opacity:.9}
.card{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:18px;box-shadow:0 8px 30px rgba(0,0,0,.25)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.col-4{grid-column:span 4}
.col-3{grid-column:span 3}

.col-6{grid-column:span 6}
.col-8{grid-column:span 8}
.col-12{grid-column:span 12}
.kpi{display:flex;align-items:center;justify-content:space-between}
.kpi h3{margin:0 0 6px 0;font-size:14px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.8px}
.kpi .val{font-size:28px;font-weight:800}
.badge{display:inline-block;padding:4px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);color:var(--muted);font-size:12px}
.btn{appearance:none;border:none;background:var(--accent);color:#0a0d1c;padding:12px 16px;border-radius:12px;font-weight:700;cursor:pointer;transition:transform .05s ease, opacity .2s ease;display:inline-flex;align-items:center;gap:8px}
.btn:hover{opacity:.95}
.btn:active{transform:translateY(1px)}
.btn.secondary{background:#2a2e58;color:var(--text)}
.btn.danger{background:var(--danger);color:white}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.14);color:var(--text)}
.input, select, textarea{width:100%;padding:12px 14px;background:#0f1233;border:1px solid rgba(255,255,255,.12);border-radius:12px;color:var(--text);outline:none}
.label{display:block;margin:6px 0 6px 2px;font-size:14px;color:var(--muted);font-weight:600}
.table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px;
  table-layout: auto;
}
.table thead th{
  font-size: 13px;
  color: var(--muted);
  text-align: left;
  padding: 0 10px 6px 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  white-space: nowrap;     /* 强制不换行 */
}
.table tbody tr{ background: var(--card); }
.table tbody td{
  padding: 12px 10px;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  white-space: nowrap;     /* 强制不换行 */
}
.table tbody tr:first-child td{ border-top-left-radius:10px; border-top-right-radius:10px }
.table tbody tr:last-child  td{ border-bottom-left-radius:10px; border-bottom-right-radius:10px }

.footer{opacity:.7;margin-top:24px;text-align:center}
.notice{padding:10px 12px;border:1px dashed rgba(255,255,255,.25);border-radius:8px;color:var(--muted);font-size:13px}
hr.sep{border:none;border-top:1px solid rgba(255,255,255,.08);margin:16px 0}
.tag{background:#1f2350;border:1px solid rgba(255,255,255,.14);padding:6px 8px;border-radius:8px;font-size:12px}
@media (max-width: 900px){
  .scroll-x{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .scroll-x .table{
    min-width: 100vw;      /* 在手机上可横向拖动查看全部列 */
  }
}

/* （可选）数值列右对齐，阅读更清晰 */
.td-num{ text-align:right; }
/* ---------- Responsive upgrades ---------- */

/* 更灵活的 KPI 栅格：auto-fit 最小 220px 自动换行 */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

/* 大表格开启横向滚动：避免小屏溢出 */
.scroll-x{
  width: 100%;
  overflow-x: visible;     /* 关键：PC 端不出现底部横向滚动条 */
}
.scroll-x .table{
  min-width: 0;            /* 关键：PC 端不强制最小宽度 */
}

/* 小屏下的卡片内边距和标题字号稍降，提升可读性 */
@media (max-width: 768px) {
  .container { padding: 12px; }
  .card { padding: 14px; }
  .kpi .val { font-size: 24px; }
  .header { gap:10px; }
  .header .brand { font-size: 18px; }
  .btn { width: 100%; justify-content: center; }
  .btn.ghost { width: auto; } /* 顶部操作按钮可保留原样 */
  .table thead th, .table tbody td { padding: 10px 8px; }
}

/* 顶部按钮区域在小屏自动换行且保持间距 */
.actions-wrap {
  display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:flex-end;
}

/* 卡片标题更统一的风格（可选） */
.card h3 { margin-top: 0; letter-spacing:.3px; }

/* 表格单元格禁止强制换行的列可使用 .nowrap */
.nowrap { white-space: nowrap; }

/* 更高级感的分隔（细线+淡光） */
.hr-soft {
  border: none;
  border-top: 1px solid rgba(255,255,255,.08);
  margin: 12px 0 16px;
}

/* 更通用的列类（可替代 col-3/4/6/12 的僵硬布局） */
.row { display:grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
@media (max-width: 900px){ .row > * { grid-column: span 12; } }
/* 居中容器型卡片：限制最大宽度并居中 */
.card-center {
  max-width: 960px;           /* 可按需调成 900/1000/1200 */
  margin-left: auto;
  margin-right: auto;
}

/* 表单栅格：默认单列（移动端） */
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px 16px;             /* 行间距 12、列间距 16 */
}

/* PC 端两列 */
@media (min-width: 900px){
  .form-grid.two-col {
    grid-template-columns: 1fr 1fr;    /* 两列 */
  }
}

/* 表单控件全宽，避免“过长边” */
.form-grid .input,
.form-grid select,
.form-grid input[type="text"],
.form-grid input[type="number"],
.form-grid input[type="date"] {
  width: 100%;
}

/* 提交按钮所在行占满两列并居中 */
.form-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: 10px;
}

/* 账户列表卡片也居中显示（比表单稍宽一点） */
.card-center-wide {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}