/* 客服余量管理 - 统一样式。基础元素 → 布局 → 模块 → 响应式，所有 CSS 都在这里维护。 */
:root {
  --primary:#2563eb; --primary-dark:#1d4ed8; --primary-light:#eff6ff;
  --success:#15803d; --danger:#dc2626; --warning:#92400e;
  --bg:#f3f6fb; --card:#fff; --text:#0f172a; --muted:#64748b;
  --border:#e2e8f0; --shadow:0 2px 14px rgba(15,23,42,.055); --radius:13px;
}
* { box-sizing:border-box }
html { color-scheme:light }
body { margin:0; min-height:100vh; font-family:system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif; background:var(--bg); color:var(--text) }
button,input,select { font:inherit }
button { cursor:pointer }
button:disabled { cursor:not-allowed; opacity:.55 }
input,select { width:100%; min-width:0; padding:10px 12px; background:#fff; border:1px solid #cbd5e1; border-radius:9px; color:var(--text); outline:none }
input:focus, select:focus { border-color:var(--primary); box-shadow:0 0 0 3px #dbeafe }
label { font-size:13px; font-weight:600; color:#475569 }
h1,h2,h3,h4,p { margin-top:0 }
h1 { font-size:23px; margin-bottom:8px }
h2 { font-size:21px; margin-bottom:5px }
h3 { font-size:16px; margin-bottom:0 }
.hidden { display:none !important }
.muted { color:var(--muted) }
.small { font-size:12px }
.center { text-align:center }
.card { background:var(--card); border:1px solid #edf1f6; border-radius:var(--radius); box-shadow:var(--shadow) }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:9px 15px; border-radius:9px; font-size:13px; font-weight:650; border:1px solid transparent; background:#fff; white-space:nowrap; transition:background .18s }
.btn-primary { color:white; background:var(--primary) }
.btn-primary:hover:not(:disabled) { background:var(--primary-dark) }
.btn-ghost { border-color:var(--border); color:#475569 }
.btn-ghost:hover:not(:disabled) { border-color:#93b4ec; color:var(--primary); background:#f8fbff }
.btn-small { padding:6px 10px; font-size:12px }
.btn-full { width:100%; padding:12px }
.text-button,.link-btn { border:0; background:transparent; color:var(--primary); padding:5px; font-size:13px }
.text-button:hover,.link-btn:hover { text-decoration:underline }
.stack { display:flex; flex-direction:column; gap:10px }

/* 登录、首次初始化 */
.auth-page { min-height:100vh; background:linear-gradient(130deg,#172554,#2563eb 60%,#60a5fa); display:grid; place-items:center; padding:26px }
.auth-card { width:min(420px,100%); padding:34px; text-align:center; box-shadow:0 22px 70px #17255455 }
.auth-logo { width:60px; height:60px; margin:0 auto 14px; display:grid; place-items:center; border-radius:18px; background:#dbeafe; font-size:29px }
.auth-subtitle { font-size:13px; margin-bottom:24px }
.auth-card .stack { text-align:left }
.section-caption { font-weight:700; margin-bottom:15px }
.auth-help { font-size:12px; margin:15px 0 0; line-height:1.7 }
.auth-card .btn-full { margin-top:6px }
.checkbox-row { display:flex; align-items:flex-start; gap:8px; font-weight:400; line-height:1.6 }
.checkbox-row input { width:15px; margin-top:4px; flex:0 0 15px }

/* 顶部导航 */
.site-header { background:#fff; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:5 }
.header-inner { max-width:1500px; padding:13px 26px; margin:auto; display:flex; justify-content:space-between; align-items:center; gap:20px }
.brand { display:flex; gap:10px; align-items:center; font-weight:750; white-space:nowrap }
.brand-icon { width:35px; height:35px; display:grid; place-items:center; border-radius:9px; background:var(--primary-light) }
.tabs { display:flex; gap:5px; padding:5px; border-radius:10px; background:#f1f5f9 }
.tab { padding:9px 16px; background:transparent; border:0; border-radius:7px; color:#64748b; font-weight:650; font-size:13px; white-space:nowrap }
.tab.active { color:var(--primary); background:#fff; box-shadow:0 1px 5px #00000015 }
.user-menu { display:flex; align-items:center; gap:10px; white-space:nowrap; font-size:13px }
.avatar,.cs-avatar { display:grid; place-items:center; flex:0 0 auto; width:34px; height:34px; border-radius:50%; background:#dbeafe; color:var(--primary); font-weight:700 }

/* 主区域 */
.main-content { max-width:1230px; margin:auto; padding:27px 24px 58px }
.toolbar { display:flex; align-items:center; justify-content:space-between; gap:15px; flex-wrap:wrap; margin-bottom:17px }
.toolbar p { margin-bottom:0; line-height:1.6 }
.toolbar-actions { display:flex; flex-wrap:wrap; gap:9px }
.notice { padding:11px 14px; background:#fffbeb; border:1px solid #fde68a; color:var(--warning); border-radius:9px; font-size:12px; line-height:1.65; margin-bottom:17px }
.table-card { overflow:hidden }
.table-wrap { overflow-x:auto }
table { width:100%; border-collapse:collapse; }
.quota-table { min-width:750px }
th { text-align:left; background:#f8fafc; color:#475569; font-weight:650; padding:14px 15px; font-size:13px; white-space:nowrap; border-bottom:1px solid var(--border) }
td { padding:14px 15px; border-bottom:1px solid #f1f5f9; font-size:13px }
tbody tr:last-child td { border-bottom:0 }
tbody tr:hover { background:#fafcff }
.cs-cell { display:flex; align-items:center; gap:11px }
.cs-details { display:flex; flex-direction:column; gap:4px }
.cs-details strong { font-size:14px }
.default-hint { color:#94a3b8; font-size:11px }
.avatar-tone-0 { background:#2563eb; color:#fff }
.avatar-tone-1 { background:#16a34a; color:#fff }
.avatar-tone-2 { background:#d97706; color:#fff }
.avatar-tone-3 { background:#dc2626; color:#fff }
.avatar-tone-4 { background:#7c3aed; color:#fff }
.avatar-tone-5 { background:#0ea5e9; color:#fff }
.total-number { font-size:18px; font-weight:800; color:var(--primary) }
.quota-cell { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px }
.quota-tag { display:inline-flex; min-width:50px; align-items:center; justify-content:center; padding:5px 10px; font-weight:750; border-radius:999px }
.quota-tag.ok { color:#15803d; background:#dcfce7 }
.quota-tag.zero { color:var(--danger); background:#fef2f2 }
.quota-tag.na { color:#94a3b8; background:#f1f5f9; font-weight:500 }
.btn-claim { padding:6px 16px; border:0; color:#fff; border-radius:8px; font-weight:650; font-size:12px }
.btn-claim.km { background:#0284c7 }
.btn-claim.sz { background:#16a34a }
.btn-claim.gy { background:#d97706 }
.btn-claim:disabled { color:#94a3b8; background:#e2e8f0 }
.row-actions { display:flex; justify-content:center; gap:6px }
.danger-text { color:var(--danger) }
.empty { text-align:center; padding:32px; color:#94a3b8 }

/* 溢出流量设置 */
.overflow-card { margin-top:23px; padding:18px 21px }
.card-heading { display:flex; align-items:center; gap:13px; flex-wrap:wrap; border-bottom:1px solid var(--border); padding-bottom:13px }
.overflow-row { display:flex; align-items:center; gap:16px; padding:13px 0; border-bottom:1px solid #f1f5f9; flex-wrap:wrap; font-size:13px }
.overflow-row:last-child { border-bottom:0 }
.city-pill { border-radius:999px; display:inline-flex; justify-content:center; width:55px; padding:5px 3px; font-weight:700; font-size:12px }
.city-pill.km { color:#0369a1; background:#e0f2fe }
.city-pill.sz { color:#15803d; background:#dcfce7 }
.city-pill.gy { color:#b45309; background:#fef3c7 }
.overflow-row select { width:190px }
.current-assignment { color:#15803d; font-size:12px }
.overflow-actions { display:flex; justify-content:flex-end; gap:10px; padding-top:12px }

/* 历史记录 & 用户管理 */
.records-toolbar { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; padding:18px; border-bottom:1px solid var(--border) }
.filter-group { display:flex; flex-direction:column; gap:6px; min-width:130px }
.filter-group input { min-width:145px }
.records-table { min-width:580px }
.pagination { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-top:1px solid var(--border); gap:12px }
.pagination>div { display:flex; gap:7px }
.user-status { font-weight:650; color:#15803d }
.user-status.disabled { color:var(--danger) }

/* 弹窗 & 消息 */
dialog.modal { border:0; border-radius:14px; background:white; color:var(--text); width:min(500px,calc(100vw - 28px)); max-height:calc(100vh - 24px); padding:0; box-shadow:0 18px 70px #0f172a44 }
dialog::backdrop { background:#0f172a88 }
.modal-heading { display:flex; align-items:center; justify-content:space-between; padding:17px 20px; border-bottom:1px solid var(--border) }
.modal-close { border:0; color:#94a3b8; background:none; padding:0 5px; font-size:28px; line-height:1 }
.modal-body { padding:21px; }
.modal-body p:last-child { margin-bottom:0 }
.confirm-message { font-size:15px; line-height:1.8 }
.modal-footer { display:flex; gap:9px; justify-content:flex-end; padding:14px 20px; background:#f8fafc; border-top:1px solid var(--border) }
.form-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; overflow:auto }
.form-field { display:flex; flex-direction:column; gap:7px }
.form-field.full, .form-section.full { grid-column:1/-1 }
.form-section { font-size:13px; font-weight:700; margin:10px 0 0; color:var(--primary); padding-bottom:9px; border-bottom:1px dashed var(--border) }
.form-section#remainingTitle { color:#b45309 }
.toast { position:fixed; z-index:20; top:75px; left:50%; transform:translate(-50%,-12px); background:#0f172a; color:#fff; border-radius:999px; padding:10px 22px; opacity:0; pointer-events:none; transition:all .2s; text-align:center; max-width:min(500px,95vw); box-shadow:0 6px 26px #0f172a38; font-size:13px }
.toast.show { opacity:1; transform:translate(-50%,0) }
.toast.error { background:#b91c1c }
.toast.success { background:#15803d }

/* 小屏幕：导航可换行，内容可横向滚动，不挤坏表格 */
@media (max-width:980px) {
 .header-inner { flex-wrap:wrap; gap:10px; padding:12px 16px }
 .tabs { order:3; width:100%; overflow:auto }
 .main-content { padding:18px 14px 40px }
}
@media (max-width:550px) {
 .brand { font-size:14px }
 .user-menu { gap:5px; margin-left:auto }
 .user-name { max-width:60px; overflow:hidden; text-overflow:ellipsis }
 .avatar { width:29px; height:29px }
 .tab { flex:1; padding:10px; font-size:12px }
 h2 { font-size:18px }
 .toolbar-actions { width:100% }
 .overflow-card { padding:15px }
 .overflow-row { gap:10px }
 .overflow-row select { width:100%; flex:1 0 155px }
 .form-grid { grid-template-columns:repeat(3,minmax(0,1fr)) }
 .form-grid input { padding:8px 5px }
 .records-toolbar { gap:9px }
 .filter-group { min-width:110px; flex:1 }
}