:root {
  --blue: #409eff;
  --blue-strong: #2f8df5;
  --blue-soft: #edf6ff;
  --text: #303133;
  --muted: #909399;
  --line: #ebeef5;
  --line-dark: #dcdfe6;
  --bg: #f3f4fa;
  --panel: #ffffff;
  --green: #67c23a;
  --orange: #e6a23c;
  --red: #f56c6c;
  --sidebar: 150px;
  --topbar: 38px;
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  color: var(--text);
  font-size: 12px;
}

* { box-sizing: border-box; }
html, body, #app { margin: 0; min-height: 100%; height: 100%; }
body { background: var(--bg); }
button, input, select { font: inherit; }
button { cursor: pointer; }

.app-shell { display: flex; height: 100vh; min-width: 1180px; overflow: hidden; }
.sidebar {
  width: var(--sidebar); flex: 0 0 var(--sidebar); background: #fff;
  border-right: 1px solid var(--line-dark); display: flex; flex-direction: column;
}
.brand { height: var(--topbar); display:flex; align-items:center; gap:7px; padding:0 10px; border-bottom:1px solid var(--line); font-weight:600; }
.brand-mark { width:19px; height:19px; border-radius:4px; background:#2f6be6; color:#fff; display:grid; place-items:center; font-size:11px; font-weight:700; }
.brand-title { letter-spacing:.2px; }
.nav { padding: 6px 0; overflow:auto; }
.nav-item { height:36px; display:flex; align-items:center; gap:9px; padding:0 13px; color:#303133; text-decoration:none; white-space:nowrap; border-left:2px solid transparent; }
.nav-item:hover { background:#f6f9ff; color:var(--blue); }
.nav-item.active { color:var(--blue); background:#f5f9ff; border-left-color:var(--blue); }
.nav-icon { width:15px; text-align:center; color:inherit; font-size:13px; opacity:.9; }
.content-shell { flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar { height:var(--topbar); flex:0 0 var(--topbar); background:#fff; border-bottom:1px solid var(--line-dark); display:flex; align-items:center; justify-content:space-between; padding:0 10px 0 13px; }
.crumb { display:flex; align-items:center; gap:8px; color:#303133; }
.crumb-icon { font-size:11px; }
.top-actions { display:flex; align-items:center; gap:11px; color:#606266; }
.top-action { border:0; background:transparent; color:#606266; padding:2px 4px; }
.top-action:hover { color:var(--blue); }
.user { font-size:11px; color:#606266; }
.logout { border:1px solid var(--line-dark); background:#fff; border-radius:3px; height:24px; padding:0 8px; color:#606266; }
.logout:hover { border-color:var(--blue); color:var(--blue); }
.main { flex:1; overflow:auto; padding:0 7px 18px; background:var(--bg); }
.page-head { height:43px; display:flex; align-items:center; justify-content:space-between; }
.page-title { font-size:17px; font-weight:600; letter-spacing:.2px; }
.page-tools { display:flex; align-items:center; gap:8px; }
.page-head-note { color:#909399; margin-right:6px; }

.panel { background:var(--panel); border:1px solid var(--line); border-radius:4px; margin-bottom:8px; }
.filters { padding:8px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.filters.tight { padding:7px 8px; }
.filter-control { height:25px; min-width:110px; border:1px solid var(--line-dark); border-radius:3px; background:#fff; color:#606266; padding:0 9px; outline:none; }
.filter-control:focus { border-color:var(--blue); }
.filter-control.wide { min-width:250px; flex:1; }
.filter-control.date { min-width:138px; }
.filter-label { color:#909399; margin-left:2px; }
.date-range { display:flex; align-items:center; gap:5px; }
.date-range .filter-control { min-width:138px; }
.range-sep { color:#909399; }
.spacer { flex:1; }
.btn { height:25px; padding:0 11px; border:1px solid var(--line-dark); border-radius:3px; background:#fff; color:#606266; display:inline-flex; align-items:center; justify-content:center; gap:4px; white-space:nowrap; }
.btn:hover { color:var(--blue); border-color:#b3d8ff; }
.btn.primary { color:#fff; border-color:var(--blue); background:var(--blue); }
.btn.primary:hover { background:var(--blue-strong); }
.btn.success { color:#fff; border-color:var(--green); background:var(--green); }
.btn.danger { color:#fff; border-color:var(--red); background:var(--red); }
.btn.mini { height:21px; padding:0 6px; font-size:11px; }
.btn.link { color:var(--blue); border:0; background:transparent; padding:0 3px; }
.btn.link:hover { text-decoration:underline; }

.table-panel { padding:8px; overflow:hidden; }
.table-scroll { width:100%; overflow:auto; }
table { width:100%; border-collapse:collapse; table-layout:auto; background:#fff; }
th, td { border:1px solid var(--line); height:33px; padding:5px 9px; text-align:left; white-space:nowrap; font-size:11px; color:#606266; }
th { height:27px; color:#909399; font-weight:500; background:#fff; }
tbody tr:hover { background:#f8fbff; }
.empty { height:42px; text-align:center; color:#909399; }
.sms-text-cell { max-width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:default; }
.pager { display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:10px 2px 1px; color:#909399; }
.pager button { min-width:54px; height:25px; border:1px solid var(--line-dark); border-radius:3px; background:#fff; color:#606266; }
.pager button:disabled { color:#c0c4cc; background:#f5f7fa; cursor:not-allowed; }
.pager select { height:25px; border:1px solid var(--line-dark); border-radius:3px; color:#606266; background:#fff; }
.status { display:inline-flex; align-items:center; min-height:19px; border-radius:3px; padding:1px 6px; font-size:11px; }
.status.green { color:#67c23a; background:#f0f9eb; border:1px solid #e1f3d8; }
.status.red { color:#f56c6c; background:#fef0f0; border:1px solid #fde2e2; }
.status.blue { color:#409eff; background:#ecf5ff; border:1px solid #d9ecff; }
.status.orange { color:#e6a23c; background:#fdf6ec; border:1px solid #faecd8; }
.status.gray { color:#909399; background:#f4f4f5; border:1px solid #e9e9eb; }
.copy { cursor:pointer; color:#909399; margin-left:4px; font-size:11px; }
.copy:hover { color:var(--blue); }
.action-cell { display:flex; align-items:center; gap:10px; }
.action-link { color:var(--blue); border:0; background:transparent; padding:0; }
.action-link:hover { text-decoration:underline; }
.action-link.danger { color:var(--red); }
.checkbox { width:13px; height:13px; vertical-align:middle; accent-color:var(--blue); }

.metrics { display:grid; grid-template-columns:repeat(11,minmax(96px,1fr)); gap:8px; padding:0 0 8px; }
.metric-card { min-height:58px; border:1px solid var(--line); border-radius:4px; background:#fff; padding:9px 10px; }
.metric-label { color:#909399; margin-bottom:7px; white-space:nowrap; }
.metric-value { font-size:18px; color:#303133; line-height:1; }
.metric-row-2 { grid-template-columns:repeat(6,minmax(112px,1fr)); }
.section-title { font-size:14px; font-weight:600; padding:10px 10px 7px; }
.table-subtitle { color:#909399; padding:0 10px 8px; }
.tabs { display:flex; align-items:center; border-bottom:1px solid var(--line); height:34px; gap:26px; padding-left:3px; }
.tab { height:34px; border:0; border-bottom:2px solid transparent; background:transparent; color:#606266; padding:0 2px; }
.tab.active { color:var(--blue); border-bottom-color:var(--blue); }
.segmented { display:flex; height:25px; }
.segment { min-width:79px; border:0; background:#f5f7fa; color:#606266; padding:0 12px; }
.segment:first-child { border-radius:3px 0 0 3px; }
.segment:last-child { border-radius:0 3px 3px 0; }
.segment.active { background:var(--blue); color:#fff; }
.dash-filter { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:8px; }
.dash-filter .filter-control { min-width:180px; }

.error-banner { display:flex; align-items:center; gap:10px; background:#fff5f5; border:1px solid #fbc4c4; color:#b42318; padding:7px 10px; margin:7px 0 0; border-radius:3px; }
.error-banner button { margin-left:auto; color:#1769aa; border:0; background:transparent; text-decoration:underline; white-space:nowrap; }
.loading { color:#909399; padding:32px; text-align:center; }
.toast { position:fixed; top:50px; right:20px; z-index:20; background:#303133; color:#fff; padding:8px 13px; border-radius:3px; box-shadow:0 3px 10px rgba(0,0,0,.15); opacity:0; transform:translateY(-6px); pointer-events:none; transition:.18s; }
.toast.show { opacity:1; transform:translateY(0); }
.modal-backdrop { position:fixed; inset:0; z-index:30; background:rgba(0,0,0,.28); display:grid; place-items:center; }
.modal { width:460px; max-width:calc(100vw - 30px); background:#fff; border-radius:4px; box-shadow:0 8px 30px rgba(0,0,0,.2); }
.modal-wide { width:760px; }
.modal-content { max-height:62vh; overflow:auto; }
.modal-content pre { margin:0; white-space:pre-wrap; word-break:break-word; font:12px/1.6 Consolas, "Microsoft YaHei", monospace; color:#606266; }
.secret-view { color:#9c2c2c !important; background:#fff7f7; padding:10px; border:1px solid #fde2e2; border-radius:3px; }
.modal-head { height:42px; display:flex; align-items:center; justify-content:space-between; padding:0 16px; border-bottom:1px solid var(--line); font-size:14px; font-weight:600; }
.modal-close { border:0; background:transparent; color:#909399; font-size:19px; }
.modal-body { padding:16px; }
.form-row { display:flex; align-items:center; margin-bottom:12px; }
.form-row label { width:82px; color:#606266; }
.form-row input, .form-row select, .form-row textarea { flex:1; min-width:0; border:1px solid var(--line-dark); border-radius:3px; min-height:28px; padding:5px 8px; outline:none; }
.form-row textarea { min-height:68px; resize:vertical; }
.modal-foot { display:flex; justify-content:flex-end; gap:8px; padding:10px 16px; border-top:1px solid var(--line); }
.login-wrap { height:100vh; display:grid; place-items:center; background:#f1f4fa; }
.login-card { width:360px; background:#fff; border:1px solid var(--line); border-radius:5px; padding:28px; box-shadow:0 8px 26px rgba(44,62,80,.08); }
.login-card h1 { margin:0 0 7px; font-size:21px; }
.login-card p { margin:0 0 22px; color:#909399; }
.login-card input { width:100%; height:34px; border:1px solid var(--line-dark); border-radius:3px; padding:0 10px; margin-bottom:12px; }
.login-card .btn { width:100%; height:34px; }
.login-error { min-height:18px; color:var(--red); margin-bottom:8px; }

.skeleton-group { max-width: 900px; margin: 0 auto; }
.skeleton-bar { height: 14px; background: linear-gradient(90deg, #ebeef5 25%, #f3f4fa 50%, #ebeef5 75%); background-size: 400% 100%; border-radius: 3px; margin-bottom: 10px; animation: skeleton-pulse 1.2s ease-in-out infinite; }
.skeleton-bar.wide { width: 100%; }
.skeleton-bar:not(.wide) { width: 30%; }
.skeleton-row { display: flex; gap: 10px; margin-bottom: 14px; }
.skeleton-row .skeleton-bar { flex: 1; }
.skeleton-table { margin-top: 18px; }
.skeleton-table .skeleton-bar { height: 28px; margin-bottom: 6px; }
@keyframes skeleton-pulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.refreshing { opacity: .55; pointer-events: none; transition: opacity .15s; }

@media (max-width: 1400px) {
  :root { --sidebar: 150px; }
  th, td { padding-left:7px; padding-right:7px; }
  .metrics { grid-template-columns:repeat(6,minmax(105px,1fr)); }
}