* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0f1117;
  --bg2: #181c24;
  --bg3: #1e2330;
  --border: #2a3045;
  --text: #e2e8f0;
  --text-muted: #8896a5;
  --primary: #3b82f6;
  --primary-dark: #2563eb;
  --success: #22c55e;
  --danger: #ef4444;
  --warning: #f59e0b;
  --online: #22c55e;
  --offline: #64748b;
  --radius: 6px;
}

body {
  font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* Topbar */
.topbar {
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
  padding: 8px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.topbar-left { display: flex; align-items: center; gap: 12px; }
.topbar-right { display: flex; align-items: center; gap: 12px; color: var(--text-muted); }
.logo { font-size: 15px; font-weight: bold; color: var(--primary); }

.badge {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: bold;
}
.badge-online { background: rgba(34,197,94,.2); color: var(--online); }
.badge-offline { background: rgba(100,116,139,.2); color: var(--offline); }

/* Tab Nav */
.tab-nav {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 2px;
  padding: 6px 12px 0;
  flex-shrink: 0;
}
.tab-btn {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  padding: 6px 16px;
  cursor: pointer;
  font-size: 13px;
  transition: all .2s;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }

/* Tab Content */
.tab-content {
  display: none;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.tab-content.active {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Stats tab: avoid ISP block clipping on desktop */
#tab-mystats.active {
  overflow-y: auto;
  overflow-x: hidden;
}
#tab-mystats .stats-page {
  min-height: max-content;
  overflow: visible;
  padding-bottom: 16px;
}

/* Main Layout
   列：号码列 | 分隔条 | 操作面板
   行：号码列表(1fr) | 关怀(auto) | 属性(auto) | 最近通话(auto) */
.main-layout {
  display: grid;
  grid-template-columns: 240px 6px 1fr;
  grid-template-rows: 1fr auto auto auto;
  gap: 0;
  flex: 1;
  overflow: hidden;
  padding: 8px;
  column-gap: 0;
  min-width: 0;
}

/* 各格子位置 */
.panel-numbers     { grid-column: 1; grid-row: 1; }
.main-resize-handle{ grid-column: 2; grid-row: 1 / 5; }
#panel-action      { grid-column: 3; grid-row: 1 / 5; }
.care-panel        { grid-column: 1; grid-row: 2; margin-top: 4px; }
.attr-panel        { grid-column: 1; grid-row: 3; margin-top: 4px; }
.recent-calls-panel{ grid-column: 1; grid-row: 4; margin-top: 4px; border-top: none; }

/* 拖拽分隔条 */
.main-resize-handle {
  width: 6px;
  cursor: col-resize;
  background: var(--border);
  border-radius: 3px;
  margin: 0 2px;
  transition: background .15s;
  align-self: stretch;
}
.main-resize-handle:hover { background: var(--primary); }

.panel {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.panel-header {
  padding: 8px 12px;
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 12px;
  flex-shrink: 0;
}
.panel-actions { display: flex; gap: 6px; align-items: center; }
.panel-actions-numbers { flex-wrap: wrap; justify-content: flex-end; }

/* Device List */
.device-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
}
.device-item {
  padding: 8px 10px;
  border-radius: var(--radius);
  margin-bottom: 4px;
  cursor: pointer;
  border: 1px solid var(--border);
  transition: all .15s;
}
.device-item:hover { border-color: var(--primary); }
.device-item.selected { background: rgba(59,130,246,.15); border-color: var(--primary); }
.device-no { font-weight: bold; font-size: 14px; }
.device-no.online { color: var(--primary); }
.device-no.offline { color: var(--offline); }
.device-sim { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.device-status-dot {
  display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; margin-right: 4px;
}
.dot-online { background: var(--online); }
.dot-offline { background: var(--offline); }

/* Number List */
.numbers-stats {
  padding: 6px 12px;
  display: flex;
  gap: 16px;
  color: var(--text-muted);
  font-size: 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.numbers-stats b { color: var(--text); }

.number-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px;
}
.number-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .15s;
}
.number-item:hover { background: var(--bg3); border-color: var(--border); }
.number-item.selected { background: rgba(59,130,246,.12); border-color: var(--primary); }
.num-phone { font-family: 'Consolas', monospace; font-size: 14px; letter-spacing: 1px; }
.num-city { color: var(--text-muted); font-size: 11px; }
.num-tag { font-size: 10px; padding: 1px 5px; border-radius: 3px; }
.tag-intent { background: rgba(245,158,11,.2); color: var(--warning); }
.tag-add_wechat { background: rgba(59,130,246,.2); color: var(--primary); }
.tag-wechat_active { background: rgba(34,197,94,.2); color: var(--success); }
.tag-wechat_added { background: rgba(34,197,94,.3); color: var(--success); }

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* Action Panel */
.panel-action { padding: 12px; gap: 10px; overflow-y: auto; }
.current-number-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  text-align: center;
}
.num-display {
  font-size: 22px;
  font-family: 'Consolas', monospace;
  font-weight: bold;
  letter-spacing: 2px;
  color: var(--text);
}
.num-location { color: var(--text-muted); font-size: 12px; margin-top: 4px; }

.form-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.form-row label { color: var(--text-muted); width: 60px; flex-shrink: 0; font-size: 12px; }

.sim-buttons { display: flex; gap: 6px; }
.btn-sim {
  padding: 4px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all .15s;
}
.btn-sim.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.btn-call {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  background: var(--success);
  border: none;
  border-radius: var(--radius);
  color: white;
  cursor: pointer;
  font-weight: bold;
  transition: all .15s;
}
.btn-call:hover:not(:disabled) { filter: brightness(1.1); }
.btn-call:disabled { opacity: .4; cursor: not-allowed; }

/* Calling Panel */
.calling-panel {
  background: rgba(34,197,94,.08);
  border: 1px solid rgba(34,197,94,.3);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
}
.calling-info { font-size: 16px; font-weight: bold; margin-bottom: 8px; }
.calling-icon { font-size: 20px; margin-right: 8px; animation: pulse 1s infinite; }
.calling-timer { font-size: 28px; font-family: 'Consolas', monospace; color: var(--success); margin-bottom: 12px; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}

/* Remark Panel */
.remark-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.remark-title { font-weight: bold; font-size: 13px; }
.quick-remarks { display: flex; flex-wrap: wrap; gap: 5px; }
.quick-remark-btn {
  padding: 3px 10px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  transition: all .15s;
}
.quick-remark-btn:hover { border-color: var(--primary); color: var(--primary); }
.quick-remark-btn.selected { outline: 2px solid var(--primary); outline-offset: 1px; box-shadow: 0 0 0 3px rgba(59,130,246,.25); }
.quick-remark-btn.appended { outline: 2px solid #10b981; outline-offset: 1px; box-shadow: 0 0 0 3px rgba(16,185,129,.2); }

.remark-textarea {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 8px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  min-height: 60px;
}
.remark-textarea:focus { outline: none; border-color: var(--primary); }

.tag-section label { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; display: block; }
.tag-buttons { display: flex; flex-wrap: wrap; gap: 5px; }
.btn-tag {
  padding: 3px 8px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  transition: all .15s;
}
.btn-tag.selected { outline: 2px solid var(--warning); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(251,191,36,.3); font-weight: 600; }

.action-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 14px; /* 与上方元素拉开间距 */
}
.action-buttons .btn {
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 600;
}

/* Panel Page */
.panel-page {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.page-toolbar { display: flex; gap: 8px; align-items: center; }

/* ========== 拨打记录工具栏 ========== */
.log-toolbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--border);
}
.log-toolbar-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.log-total-badge {
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2px 10px;
  white-space: nowrap;
}
.log-status-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.log-status-btn {
  border-radius: 12px;
  transition: background .15s, color .15s, border-color .15s;
}
.log-status-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* Data Table */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.data-table th, .data-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}
.data-table th { background: var(--bg3); color: var(--text-muted); font-weight: normal; }
.data-table tr:hover td { background: rgba(255,255,255,.03); }

/* Template List */
.template-list { display: flex; flex-wrap: wrap; gap: 8px; }
.template-item {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.template-text { font-size: 13px; }
.template-actions { display: flex; gap: 4px; }

/* Settings Page */
.settings-page { max-width: 500px; }
.settings-page h3 { color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
.settings-page hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
.settings-msg { font-size: 12px; margin-top: 6px; color: var(--success); }
.hint { color: var(--text-muted); font-size: 12px; }

/* Form */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.form-group label { font-size: 12px; color: var(--text-muted); }
.form-input {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 7px 10px;
  font-size: 13px;
  font-family: inherit;
  width: 100%;
}
.form-input:focus { outline: none; border-color: var(--primary); }
.form-input[readonly] { opacity: .6; cursor: default; }

.select-sm {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 4px 8px;
  font-size: 12px;
}
.full-width { width: 100%; }

/* Buttons */
.btn {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg3);
  transition: background .15s, border-color .15s, color .15s,
              transform .1s ease, box-shadow .15s, filter .15s;
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  transition: all .15s;
  white-space: nowrap;
}
.btn:hover  { border-color: var(--primary); color: var(--primary); }
.btn:active { transform: scale(0.95); filter: brightness(0.88); }

.btn-primary         { background: var(--primary); border-color: var(--primary); color: white; }
.btn-primary:hover   { background: var(--primary-dark); color: white; border-color: var(--primary-dark); }
.btn-primary:active  { background: #1d4ed8; transform: scale(0.94); filter: none; }

.btn-danger          { background: var(--danger); border-color: var(--danger); color: white; }
.btn-danger:hover    { background: #dc2626; border-color: #dc2626; color: white; filter: none; }
.btn-danger:active   { background: #b91c1c; border-color: #b91c1c; transform: scale(0.94); filter: none; }

.btn-warning         { background: var(--warning); border-color: var(--warning); color: #000; }
.btn-warning:hover   { background: #d97706; border-color: #d97706; }
.btn-warning:active  { background: #b45309; transform: scale(0.94); filter: none; }

.btn-success         { background: var(--success); border-color: var(--success); color: white; }
.btn-success:hover   { background: #16a34a; border-color: #16a34a; color: white; }
.btn-success:active  { background: #15803d; border-color: #15803d; transform: scale(0.94); filter: none; }

.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-xs { padding: 3px 8px; font-size: 11px; }

/* ---- 点击成功反馈动画 ---- */
@keyframes flash-ok {
  0%   { box-shadow: 0 0 0 0   rgba(34,197,94,.9); transform: scale(1.0); }
  40%  { box-shadow: 0 0 0 10px rgba(34,197,94,0);  transform: scale(1.05); }
  100% { box-shadow: 0 0 0 0   rgba(34,197,94,0);  transform: scale(1.0); }
}
@keyframes flash-danger {
  0%   { box-shadow: 0 0 0 0   rgba(239,68,68,.9); transform: scale(1.0); }
  40%  { box-shadow: 0 0 0 10px rgba(239,68,68,0);  transform: scale(1.05); }
  100% { box-shadow: 0 0 0 0   rgba(239,68,68,0);  transform: scale(1.0); }
}
@keyframes flash-purple {
  0%   { box-shadow: 0 0 0 0   rgba(139,92,246,.9); transform: scale(1.0); }
  40%  { box-shadow: 0 0 0 10px rgba(139,92,246,0);  transform: scale(1.05); }
  100% { box-shadow: 0 0 0 0   rgba(139,92,246,0);  transform: scale(1.0); }
}
.btn-flash-ok     { animation: flash-ok     .5s ease-out forwards; }
.btn-flash-danger { animation: flash-danger .5s ease-out forwards; }
.btn-flash-purple { animation: flash-purple .5s ease-out forwards; }

/* Modal */
.modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.7);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}
.modal.hidden { display: none; }
.modal-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-width: 400px;
  max-width: 90vw;
}
.modal-sm { min-width: 300px; }
.modal-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}
.modal-body { padding: 16px; }
.modal-footer {
  padding: 16px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.modal-footer .btn {
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 600;
}
.btn-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  padding: 0 4px;
}

.hidden { display: none !important; }
.empty-tip { color: var(--text-muted); text-align: center; padding: 20px; font-size: 12px; }

/* Status colors */
.status-calling { color: var(--warning); }
.status-answered { color: var(--success); }
.status-no_answer { color: var(--text-muted); }
.status-failed { color: var(--danger); }
.status-hung_up { color: var(--text); }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* ========== Number List - 单行展示 ========== */
.number-list { flex: 1; overflow-y: auto; padding: 4px; }
.number-item {
  display: flex; flex-direction: row; align-items: center;
  padding: 5px 8px;
  border-radius: var(--radius);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .12s, border-color .12s;
  gap: 6px;
  min-width: 0;
}
.number-item:hover { background: var(--bg3); border-color: var(--border); }
.number-item.selected { background: rgba(59,130,246,.12); border-color: var(--primary); }

/* 手机号：等宽字体 + 稍大一点更易读 */
.num-phone {
  font-family: 'Consolas', monospace;
  font-size: 14px; font-weight: 600;
  letter-spacing: 1px;
  white-space: nowrap; flex-shrink: 0;
  color: var(--text);
}

/* 归属地：小胶囊 */
.num-city-badge {
  font-size: 10px;
  color: #8896a5;
  background: rgba(136,150,165,.12);
  border: 1px solid rgba(136,150,165,.2);
  padding: 1px 6px;
  border-radius: 999px;
  white-space: nowrap; flex-shrink: 0;
  letter-spacing: 0;
}

.num-isp-badge {
  font-size: 10px; padding: 1px 5px; border-radius: 999px;
  white-space: nowrap; flex-shrink: 0; font-weight: 500;
}
/* 操作面板内全称版：字号稍大 */
.num-isp-full {
  font-size: 11px; padding: 2px 8px;
}
.isp-cmcc { background: rgba(34,197,94,.12);  color: #22c55e; border: 1px solid rgba(34,197,94,.25); }
.isp-cucc { background: rgba(96,165,250,.12);  color: #60a5fa; border: 1px solid rgba(96,165,250,.25); }
.isp-ctcc { background: rgba(251,146,60,.12);  color: #fb923c; border: 1px solid rgba(251,146,60,.25); }
.isp-cbn  { background: rgba(167,139,250,.12); color: #a78bfa; border: 1px solid rgba(167,139,250,.25); }
.num-isp-badge:not(.isp-cmcc):not(.isp-cucc):not(.isp-ctcc):not(.isp-cbn) {
  background: rgba(148,163,184,.12); color: var(--text-muted); border: 1px solid var(--border);
}

.num-tag { font-size: 10px; padding: 1px 4px; border-radius: 3px; flex-shrink: 0; }
.tag-intent { background: rgba(245,158,11,.2); color: var(--warning); }
.tag-add_wechat { background: rgba(59,130,246,.2); color: var(--primary); }
.tag-wechat_active { background: rgba(34,197,94,.2); color: var(--success); }
.tag-wechat_added { background: rgba(34,197,94,.3); color: var(--success); }

.num-inline-remark {
  font-size: 11px; color: #60a5fa;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 110px; flex-shrink: 1;
}
.num-row-spacer { flex: 1; min-width: 0; }

/* 通话状态 + 时长 */
.num-call-meta {
  font-size: 11px; white-space: nowrap; flex-shrink: 0;
  font-weight: 600;
}
.num-call-meta em.num-dur {
  font-style: normal;
  font-size: 10px;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 2px;
}
/* 通话时间：淡色 */
.num-call-time {
  font-size: 10px; color: var(--text-muted);
  white-space: nowrap; flex-shrink: 0;
  margin-left: 3px;
}
.num-uncalled { color: var(--text-muted); opacity: .55; font-size: 11px; }

.btn-remark {
  flex-shrink: 0; opacity: 0; transition: opacity .15s;
  background: transparent; border-color: transparent; color: var(--text-muted);
  padding: 0 3px;
}
.number-item:hover .btn-remark { opacity: 1; }

/* 右侧备注预览 */
.num-remarks-preview {
  margin-top: 6px; display: flex; flex-direction: column; gap: 3px; text-align: left;
}
.remarks-preview-item {
  display: flex; gap: 5px; align-items: baseline;
  font-size: 11px; padding: 3px 0; border-bottom: 1px solid var(--border);
}
.rp-status { color: var(--success); min-width: 50px; }
.rp-dur { color: var(--text-muted); min-width: 36px; font-family: monospace; }
.rp-text { flex: 1; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-time { color: var(--text-muted); white-space: nowrap; }

/* ========== 最近通话记录面板 ========== */
.recent-calls-panel {
  /* border-top 由 grid margin-top 替代，移除原来的 flex 分隔线 */
  max-height: 220px;
  display: flex; flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg2);
}
.recent-calls-header {
  padding: 6px 12px;
  background: var(--bg3);
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--text-muted);
  flex-shrink: 0;
}
.recent-calls-header:hover { color: var(--text); }
.recent-calls-body {
  height: 180px; min-height: 60px; max-height: 500px;
  overflow-y: auto; resize: vertical;
}
.recent-calls-list { padding: 2px 4px; }
.recent-call-item {
  display: grid;
  grid-template-columns: 110px 80px 75px 48px 1fr 90px 24px;
  gap: 6px;
  padding: 4px 8px;
  font-size: 11px;
  border-bottom: 1px solid rgba(42,48,69,.5);
  align-items: center;
}
.recent-call-item:hover { background: var(--bg3); }
.selectable-row { cursor: pointer; }
.selectable-row.row-selected { background: rgba(59,130,246,.12) !important; outline: 1px solid rgba(59,130,246,.3); }
.rc-phone { font-family: monospace; color: var(--text); letter-spacing: .5px; }
.rc-loc { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-dur { font-family: monospace; color: var(--text-muted); }
.rc-remark { color: #93c5fd; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-time { color: var(--text-muted); white-space: nowrap; text-align: right; }

/* ========== 全局备注弹窗 ========== */
.modal-remark-box {
  min-width: 560px; max-width: 90vw;
  max-height: 85vh;
  display: flex; flex-direction: column;
}
.modal-remark-box .modal-body {
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
}

/* 历史备注列表 */
.remark-history-title {
  font-size: 11px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .5px;
  margin-bottom: 4px;
}
.remark-history-list {
  max-height: 180px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg);
}
.remark-history-item {
  padding: 6px 10px;
  border-bottom: 1px solid rgba(42,48,69,.6);
}
.remark-history-item:last-child { border-bottom: none; }
.rhi-top {
  display: flex; gap: 8px; font-size: 11px;
  color: var(--text-muted); margin-bottom: 2px;
}
.rhi-status { color: var(--success); }
.rhi-dur { font-family: monospace; }
.rhi-op { color: var(--primary); }
.rhi-time { margin-left: auto; }
.rhi-text { font-size: 13px; color: var(--text); }

/* panel-numbers 需要能撑满并允许 flex 布局 */
.panel-numbers {
  display: flex; flex-direction: column; overflow: hidden;
  min-width: 0;
}

/* ========== 操作面板重构 ========== */
.panel-action {
  overflow-y: auto; display: flex; flex-direction: column;
  min-width: 0; /* 允许 1fr 列内容收缩 */
}

/* 未选号码占位 */
.action-empty-tip {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 13px;
  padding: 20px;
}

/* 选中内容区 */
#action-content {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px; overflow-y: auto; flex: 1;
}

/* 号码信息卡 */
.current-number-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.num-loc-tag-row { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.display-call-meta {
  margin-top: 5px; display: flex; flex-wrap: wrap; gap: 8px;
  font-size: 11px; color: var(--text-muted);
}
.dmc-item { white-space: nowrap; }

/* 拨号区 */
.dial-section { display: flex; flex-direction: column; gap: 8px; }

/* 分割线 */
.action-divider {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: bold; color: var(--text-muted);
  border-top: 1px solid var(--border); padding-top: 8px; margin-top: 2px;
}

/* 内联备注历史 */
.inline-remark-history {
  max-height: 180px; overflow-y: auto;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.irh-empty { padding: 10px 12px; font-size: 12px; color: var(--text-muted); }
.irh-item {
  padding: 6px 10px;
  border-bottom: 1px solid rgba(42,48,69,.5);
}
.irh-item:last-child { border-bottom: none; }
.irh-meta {
  display: flex; gap: 6px; font-size: 11px;
  color: var(--text-muted); margin-bottom: 2px;
}
.irh-status { color: var(--success); }
.irh-dur { font-family: monospace; }
.irh-op { color: var(--primary); }
.irh-time { margin-left: auto; white-space: nowrap; }
.irh-text { font-size: 13px; color: var(--text); }

/* 备注面板（常驻，不再 hidden） */
.remark-panel { display: flex; flex-direction: column; gap: 8px; }

/* 备注输入行：文本框 + 清除按钮 */
.remark-input-row { display: flex; flex-direction: column; gap: 4px; }
.btn-clear-remark {
  align-self: flex-end;
  padding: 2px 10px; font-size: 11px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 4px; cursor: pointer;
  transition: all .15s;
}
.btn-clear-remark:hover { border-color: #ef4444; color: #ef4444; background: rgba(239,68,68,.08); }
.remark-title { font-weight: bold; font-size: 13px; }

/* ========== 顶部账户信息 ========== */
.account-info {
  font-size: 12px; color: var(--text-muted);
  cursor: pointer; padding: 3px 8px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: all .15s;
  white-space: nowrap;
}
.account-info:hover { border-color: var(--border); color: var(--text); }

/* ========== 账户统计弹窗 ========== */
.account-stat-grid { display: flex; flex-direction: column; gap: 0; }
.ast-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 0; border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.ast-row:last-child { border-bottom: none; }
.ast-label { color: var(--text-muted); }
.ast-val { color: var(--text); font-family: 'Consolas', monospace; font-size: 12px; }
.ast-muted { color: var(--text-muted); }
.ast-hl { color: #34d399; font-weight: bold; }
.ast-divider { height: 1px; background: var(--border); margin: 6px 0; }

/* ========== 关怀列表面板 ========== */

/* ========== 工单标签页 ========== */

/* --- 工具栏 --- */
.ticket-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ticket-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
}
.ticket-status-btns {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.ticket-status-btn {
  padding: 4px 12px;
  font-size: 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
}
.ticket-status-btn:hover { background: var(--bg2); color: var(--text); }
.ticket-status-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.ticket-total-badge {
  padding: 3px 10px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}
.ticket-btn-sync {
  background: #7c3aed;
  border-color: #7c3aed;
  color: #fff;
}
.ticket-btn-sync:hover { background: #6d28d9; border-color: #6d28d9; }
.ticket-sync-tip {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* --- 表格列宽 --- */
.tk-col-id        { width: 40px;  min-width: 36px;  color: var(--text-muted); }
.tk-col-no        { width: 100px; min-width: 90px;  font-family: monospace; }
.tk-col-phone     { width: 110px; min-width: 100px; }
.tk-col-submitter { width: 70px;  min-width: 60px; }
.tk-col-attr      { width: 90px;  min-width: 70px; max-width: 120px; }
.tk-col-remark    { max-width: 160px; }
.tk-col-status    { width: 70px;  min-width: 60px;  text-align: center; }
.tk-col-operator  { width: 70px;  min-width: 60px; }
.tk-col-loc       { width: 70px;  min-width: 60px; }
.tk-col-nick      { width: 90px;  min-width: 70px; color: #34d399; }
.tk-col-wid       { width: 100px; min-width: 80px; color: var(--text-muted); }
.tk-col-completer { width: 70px;  min-width: 60px; color: #a78bfa; }
.tk-col-time      { width: 130px; min-width: 110px; color: var(--text-muted); font-size: 11px; }
.tk-col-action    { width: 60px;  min-width: 54px;  text-align: center; }

/* 备注列超长截断 */
#ticket-table td.tk-col-remark {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- 状态徽章 --- */
.tk-status {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
  font-weight: 500;
}
.tk-pending   { background: rgba(239,68,68,.15);   color: #ef4444; }
.tk-replied   { background: rgba(234,179,8,.15);   color: #eab308; }
.tk-completed { background: rgba(34,197,94,.15);   color: #22c55e; }
.tk-expired   { background: rgba(148,163,184,.12); color: #94a3b8; }

/* --- 分页居中 --- */
.ticket-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.ticket-page-text {
  font-size: 13px;
  color: var(--text-muted);
  min-width: 90px;
  text-align: center;
}

/* 客户属性面板（主界面） */
.attr-panel {
  margin-top: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg2);
}
.attr-panel-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 12px; cursor: pointer;
  background: var(--bg3); font-size: 13px; font-weight: bold;
  color: #34d399;
  user-select: none;
  border-bottom: 1px solid var(--border);
  transition: background .15s;
}
.attr-panel-header:hover { background: rgba(52,211,153,.08); }
.attr-panel-body {
  height: 180px; min-height: 60px; max-height: 400px;
  overflow-y: auto; resize: vertical;
}
.attr-item {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 5px 12px;
  border-bottom: 1px solid rgba(42,48,69,.5);
  font-size: 12px;
  transition: background .12s;
}
.attr-item:hover { background: var(--bg3); }
.attr-phone { font-family: monospace; color: var(--text); letter-spacing: .4px; flex-shrink: 0; }
.attr-loc { color: var(--text-muted); font-size: 11px; flex-shrink: 0; }
.attr-remark { color: var(--text2); font-size: 11px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.care-panel {
  margin-top: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg2);
}
.care-panel-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 12px; cursor: pointer;
  background: var(--bg3); font-size: 13px; font-weight: bold;
  color: #f472b6;
  user-select: none;
  border-bottom: 1px solid var(--border);
  transition: background .15s;
}
.care-panel-header:hover { background: #2a1a2e; }
.care-panel-body {
  height: 220px; min-height: 80px; max-height: 500px;
  overflow-y: auto;
  resize: vertical;
}
.care-list { }
.care-item {
  display: flex; flex-direction: column; gap: 3px;
  padding: 7px 12px;
  border-bottom: 1px solid rgba(42,48,69,.5);
  font-size: 12px;
  transition: background .12s;
}
.care-item:hover { background: var(--bg3); }
.care-item:last-child { border-bottom: none; }

.ci-top-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
}
.care-phone { font-weight: bold; color: #f0abfc; }
.care-loc   { color: var(--text-muted); }
.ci-care-badge {
  font-size: 11px; color: #f472b6;
  background: rgba(244,114,182,.1);
  border: 1px solid rgba(244,114,182,.3);
  border-radius: 10px; padding: 1px 7px;
  white-space: nowrap;
}
.ci-mid-row { display: flex; align-items: center; gap: 6px; }
.ci-call-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-muted); }
.ci-no-call  { color: #3a4560; }
.ci-status   { color: var(--success); }
.ci-dur      { font-family: monospace; }
.ci-count    { color: var(--text-muted); }
.ci-ctime    { color: var(--text-muted); white-space: nowrap; }
.ci-remark-row {
  font-size: 11px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.btn-care-remove {
  margin-left: 6px;
  padding: 2px 8px; font-size: 11px;
  background: transparent; border: 1px solid #7c3f6e;
  color: #f472b6; border-radius: 4px; cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
}
.btn-care-remove:hover { background: #7c3f6e; color: #fff; }

/* ❤️ 按钮在最近通话记录中 */
.rc-care-btn {
  background: transparent; border: none;
  font-size: 14px; cursor: pointer;
  padding: 0 4px; line-height: 1;
  color: #4a3050;
  transition: color .15s, transform .1s;
  flex-shrink: 0;
}
.rc-care-btn:hover { color: #f472b6; transform: scale(1.2); }
.rc-care-btn.in-care { color: #f472b6; }
.rc-care-btn.in-care:hover { color: #a855f7; }

/* ========== 绑定设备平铺 ========== */
.bound-device-tiles {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 2px;
}
.device-tile {
  display: flex; flex-direction: column; gap: 2px;
  padding: 7px 10px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  min-width: 80px;
  transition: border-color .15s, background .15s;
  user-select: none;
}
.device-tile:hover { border-color: var(--primary); background: #1a2235; }
.device-tile.selected {
  border-color: var(--success);
  background: #0d2a1a;
}
.dt-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--success);
  margin-bottom: 2px;
}
.dt-no {
  font-size: 13px; font-weight: bold;
  color: var(--text);
}
.dt-sim {
  font-size: 10px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 设备管理表 绑定状态列 */
.bind-mine  { color: #34d399; font-size: 11px; }
.bind-other { color: #f87171; font-size: 11px; }
.bind-none  { color: var(--text-muted); font-size: 11px; }

/* ========== 模板标签页双列布局 ========== */
.tpl-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.tpl-section {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.tpl-section-header {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
  font-weight: bold; font-size: 13px;
  flex-shrink: 0;
}
.tpl-section-header .hint { font-weight: normal; }

/* 模板列表项重构（带预览） */
.template-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 12px;
  border-bottom: 1px solid rgba(42,48,69,.5);
  gap: 8px;
}
.template-item:last-child { border-bottom: none; }
.template-preview-btn {
  display: flex; align-items: center;
  padding: 3px 10px; border-radius: 6px;
  border: 1px solid var(--border);
  font-size: 12px; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 颜色选择器 */
.color-picker-row {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px;
}
.color-dot {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer; font-size: 11px; line-height: 20px;
  text-align: center; padding: 0;
  transition: transform .1s;
}
.color-dot:hover { transform: scale(1.15); }

/* 客户属性列表 */
.customer-tag-list { }
.customer-tag-list .template-item { }

/* ========== 客户标签页 ========== */
#customer-table { width: 100%; }
.cust-remark-cell {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--text2);
  cursor: default;
}

/* ========== 关怀列表标签页 ========== */
.care-history-table .care-td-remark {
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.care-history-table .care-td-time {
  font-size: 11px; color: var(--text-muted); white-space: nowrap;
}
.care-row-removed { opacity: .55; }
.care-badge-active {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  background: rgba(244,114,182,.15); border: 1px solid rgba(244,114,182,.4);
  color: #f472b6; font-size: 11px; white-space: nowrap;
}
.care-badge-removed {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  background: rgba(100,116,139,.15); border: 1px solid rgba(100,116,139,.3);
  color: var(--text-muted); font-size: 11px; white-space: nowrap;
}

/* ========== 发送短信区 ========== */
.sms-area {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px dashed rgba(96,165,250,.2);
}
.sms-row {
  display: flex; align-items: center; gap: 5px;
}
.sms-select {
  flex: 1; min-width: 0;
  height: 24px; padding: 0 4px;
  font-size: 11px; color: var(--text2);
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 4px; outline: none; cursor: pointer;
  max-width: 130px;
}
.sms-select:focus { border-color: #0ea5e9; }
.btn-sms {
  flex-shrink: 0;
  height: 24px; padding: 0 9px;
  font-size: 11px; font-weight: 600;
  background: #0ea5e9; border: 1px solid #0284c7;
  color: #fff; border-radius: 4px;
  cursor: pointer; white-space: nowrap;
  transition: background .15s;
}
.btn-sms:hover { background: #0284c7; }
.btn-sms:disabled { opacity: .55; cursor: not-allowed; }
/* 选中模板预览小标签 */
.sms-wechat-chip {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 5px; padding: 2px 7px;
  background: rgba(52,211,153,.08);
  border: 1px solid rgba(52,211,153,.22);
  border-radius: 20px;
  font-size: 11px; color: #34d399; line-height: 1.6;
}
.sms-wechat-chip .chip-id {
  font-weight: 700; letter-spacing: .5px;
}
.sms-wechat-chip .chip-sep {
  color: rgba(52,211,153,.4);
}
/* 发送结果卡 */
.sms-result-card {
  margin-top: 6px; padding: 5px 8px;
  border-radius: 5px;
  font-size: 11px; line-height: 1.7;
}
.sms-result-card.ok {
  background: rgba(52,211,153,.08);
  border: 1px solid rgba(52,211,153,.25);
}
.sms-result-card.fail {
  background: rgba(248,113,113,.08);
  border: 1px solid rgba(248,113,113,.25);
}
.sms-result-card .rc-status {
  font-weight: 700; font-size: 12px;
}
.sms-result-card .rc-status.ok  { color: #34d399; }
.sms-result-card .rc-status.fail { color: #f87171; }
.sms-result-card .rc-fields {
  display: flex; flex-wrap: wrap; gap: 6px 12px;
  margin-top: 3px; color: var(--text2);
}
.sms-result-card .rc-field span { color: var(--text-muted); font-size: 10px; }
.sms-result-card .rc-field b   { color: #e2e8f0; }

/* 微信模板列表项 */
.wtpl-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  gap: 8px;
}
.wtpl-item:last-child { border-bottom: none; }
.wtpl-main {
  flex: 1; min-width: 0;
}
/* ========== 号码池 ========== */
.pool-stats-row { gap: 10px; flex-wrap: wrap; }
.batch-fetch-status {
  padding: 6px 10px; margin: 0 0 6px;
  border-radius: 4px; font-size: 12px;
  background: rgba(96,165,250,.1); border: 1px solid rgba(96,165,250,.25);
  color: #60a5fa;
}
.batch-fetch-status.err {
  background: rgba(248,113,113,.1); border-color: rgba(248,113,113,.25); color: #f87171;
}
.num-pool-badge {
  display: inline-block; padding: 0 4px; border-radius: 3px;
  font-size: 9px; font-weight: 700; vertical-align: middle;
  margin-left: 2px;
}
.num-pool-badge.pool-a { background: rgba(96,165,250,.15); color: #60a5fa; }
.num-pool-badge.pool-b { background: rgba(52,211,153,.15); color: #34d399; }
.pool-settings-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px 20px; margin-bottom: 12px;
}
@media (max-width: 700px) { .pool-settings-grid { grid-template-columns: 1fr; } }

.wtpl-id {
  font-size: 13px; font-weight: 600; color: #34d399;
}
.wtpl-meta {
  font-size: 11px; color: var(--text-muted); margin-top: 2px;
  display: flex; gap: 8px;
}

/* ========== 工单状态：已作废 ========== */
.tk-cancelled { color: #94a3b8; background: rgba(148,163,184,.1); border: 1px solid rgba(148,163,184,.25); }

/* ========== 客户页：备注可点击 ========== */
.cust-remark-clickable {
  cursor: pointer; color: #e2e8f0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; max-width: 180px;
}
.cust-remark-clickable:hover { color: #60a5fa; text-decoration: underline; }

/* 通话记录徽章 */
.cust-call-badge {
  display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer; padding: 2px 5px; border-radius: 4px;
  background: rgba(96,165,250,.08); border: 1px solid rgba(96,165,250,.2);
  font-size: 11px; transition: background .15s;
}
.cust-call-badge:hover { background: rgba(96,165,250,.2); }
.cc-status { color: #e2e8f0; }
.cc-count  { color: #60a5fa; font-weight: 600; }

/* 通话历史弹窗行 */
.ch-item {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 0; border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.ch-item:last-child { border-bottom: none; }
.ch-time   { color: var(--text-muted); min-width: 130px; }
.ch-status { font-weight: 600; }
.ch-dur    { color: #60a5fa; min-width: 44px; }
.ch-remark { color: var(--text2); flex: 1; }

/* ========== 统计页 ========== */
.stats-page { display: flex; flex-direction: column; gap: 0; }

/* 顶部工具栏 */
.stats-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
  padding: 8px 0 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.stats-toolbar-title {
  font-size: 15px; font-weight: 700; color: var(--text);
  letter-spacing: .3px;
}
.stats-toolbar-range {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
.stats-range-label-hint {
  font-size: 12px; color: var(--text-muted); margin-right: 4px;
}
.stats-range-info {
  font-size: 11px; color: var(--text-muted); margin-left: 6px;
}
.stats-refresh-btn {
  background: transparent; border-color: var(--border); color: var(--text-muted);
  padding: 2px 7px;
}
.stats-refresh-btn:hover { color: var(--primary); border-color: var(--primary); }

/* 汇总卡片 */
.stats-summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px; margin-bottom: 16px;
}
.stat-card {
  background: var(--panel);
  border-radius: 10px;
  padding: 14px 12px 10px;
  text-align: center;
  border: 1px solid var(--border);
  border-top: 3px solid var(--card-color, #60a5fa);
  transition: transform .15s, box-shadow .15s;
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
.sc-icon  { font-size: 18px; margin-bottom: 6px; }
.sc-val   { font-size: 24px; font-weight: 800; line-height: 1; }
.sc-pct   { font-size: 12px; font-weight: 600; margin-top: 3px; opacity: .85; }
.sc-label { font-size: 11px; color: var(--text-muted); margin-top: 5px; }
.sc-sub   { font-size: 10px; color: var(--text-muted); opacity: .65; margin-top: 2px; }

/* 图表区：左大右小两列 */
.stats-charts-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 12px;
}
@media (max-width: 900px) {
  .stats-charts-grid { grid-template-columns: 1fr; }
}
.stats-chart-wrap {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 16px;
}
.stats-chart-wrap.stats-chart-tickets {
  margin-bottom: 8px;
}
.stats-chart-title {
  font-size: 12px; color: var(--text-muted);
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 6px;
}
.ticket-stats-summary {
  display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto;
}
.tss-pill {
  font-size: 11px; padding: 2px 8px; border-radius: 99px; border: 1px solid;
  font-weight: 600; white-space: nowrap;
}
.sct-dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; flex-shrink: 0;
}

.stats-range-btn        { color: var(--text-muted); background: transparent; border-color: var(--border); }
.stats-range-btn.active { color: #60a5fa; border-color: #60a5fa; background: rgba(96,165,250,.1); }

/* 客户表：微信位置 & 完成时间列 */
.cust-wx-loc      { font-size: 12px; color: #38bdf8; white-space: nowrap; }
.cust-completed-at{ font-size: 11px; color: var(--text-muted); white-space: nowrap; }

/* ================================================================
   PC 宽屏 (1280px+) 优化
   ================================================================ */
@media (min-width: 1280px) {
  body { font-size: 14px; }
  .tab-btn { padding: 7px 18px; font-size: 13px; }
  .topbar { padding: 9px 20px; }
  .main-layout { grid-template-columns: 280px 6px 1fr; padding: 10px; }
  .panel-header { padding: 10px 14px; font-size: 13px; }
  .number-item { padding: 6px 10px; }
  .num-phone { font-size: 14px; }
  .btn-call { padding: 14px; font-size: 17px; }
  #panel-action > * { max-width: 680px; }
}
@media (min-width: 1600px) {
  .main-layout { grid-template-columns: 320px 6px 1fr; }
  #panel-action > * { max-width: 760px; }
}

/* ================================================================
   移动端 (≤768px) — 竖排布局，操作面板全滚动
   ================================================================ */
@media (max-width: 768px) {

  /* 允许整页滚动 */
  body {
    height: auto;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
  }
  #app {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  /* ---- 顶栏压缩 ---- */
  .topbar { padding: 6px 10px; }
  .logo { font-size: 13px; }
  .topbar-right { gap: 6px; }
  .topbar-right #stats-display { display: none; } /* 隐藏今日统计节省空间 */
  .topbar-right .btn { padding: 4px 8px; font-size: 11px; }

  /* ---- Tab 导航横向滚动 ---- */
  .tab-nav {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    padding: 5px 8px 0;
    gap: 0;
    scrollbar-width: none;
  }
  .tab-nav::-webkit-scrollbar { display: none; }
  .tab-btn { padding: 6px 12px; font-size: 12px; flex-shrink: 0; }

  /* ---- Tab 内容区取消 overflow:hidden，让自然流撑高 ---- */
  .tab-content {
    display: none;
    flex-direction: column;
    overflow: visible;
    height: auto;
    flex: none;
  }
  .tab-content.active { display: flex; }

  /* ---- 主界面：竖排，顺序：号码列表 → 操作面板 → 关怀 → 属性 → 最近通话 ---- */
  .main-layout {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
    grid-template-rows: unset !important;
    gap: 6px;
    padding: 6px;
    height: auto;
    overflow: visible;
  }

  /* flexbox 排序 */
  .panel-numbers      { order: 1; }
  #panel-action       { order: 2; }
  .care-panel         { order: 3; }
  .attr-panel         { order: 4; }
  .recent-calls-panel { order: 5; }

  /* grid-column / grid-row 占位符清除 */
  .panel-numbers, #panel-action,
  .care-panel, .attr-panel, .recent-calls-panel {
    grid-column: unset !important;
    grid-row:    unset !important;
  }

  /* 号码列表：固定高度 */
  .panel-numbers {
    height: 40vh;
    min-height: 200px;
    max-height: 52vh;
    flex-shrink: 0;
    overflow: hidden;
  }

  /* 拖拽手柄 — 隐藏 */
  .main-resize-handle { display: none !important; }

  /* 操作面板：自然高度 */
  #panel-action {
    height: auto;
    max-height: none;
    overflow-y: visible;
    flex: none;
  }
  #panel-action > * { max-width: none !important; }

  /* 子面板：移动端默认展开，取消高度限制 */
  .care-panel-body,
  .attr-panel-body,
  .recent-calls-body {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    resize: none;
  }
  /* 子面板 margin-top 在 flex gap 已处理，清除 */
  .care-panel, .attr-panel, .recent-calls-panel { margin-top: 0; }
  /* 最近通话面板在移动端不限高 */
  .recent-calls-panel { max-height: none; }

  /* 操作面板各区域文字稍大，易于点击 */
  .btn-call { padding: 14px; font-size: 16px; }
  .btn-sim  { padding: 6px 18px; font-size: 14px; }
  .action-buttons .btn { padding: 10px 18px; font-size: 15px; }
  .quick-remark-btn { padding: 6px 12px; font-size: 13px; }
  .remark-textarea  { min-height: 80px; font-size: 14px; }

  /* 表格标签页：允许横向滚动 */
  .panel-page { overflow: visible; }
  .data-table { display: block; overflow-x: auto; }

  /* 号码列表条目高度稍增，易于点击 */
  .number-item { padding: 8px 10px; }
  .num-phone { font-size: 15px; }

  /* 设备卡片 */
  .bound-device-tile { min-width: 80px; padding: 8px 6px; }

  /* 拨号区各行间距 */
  .dial-section { gap: 10px; }
  .form-row { gap: 8px; }

  /* 弹窗 */
  .modal-box { margin: 10px; max-width: calc(100vw - 20px) !important; }

  /* 统计页图表单列 */
  .stats-charts-grid { grid-template-columns: 1fr !important; }
  .stats-summary-cards { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
}

/* ── 统计面板：运营商表 + 省份地图 ───────────────────────────────────── */
.stats-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 28px 0 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  flex-wrap: wrap;
}
.stats-map-isp-btns {
  display: flex;
  gap: 6px;
  margin-left: auto;
  flex-wrap: wrap;
}
.stats-isp-btn {
  opacity: .6;
  transition: opacity .15s;
}
.stats-isp-btn.active,
.stats-isp-btn:hover {
  opacity: 1;
}
.stats-loading {
  color: var(--text-muted);
  font-size: 12px;
  padding: 16px 0;
}

/* 运营商统计表 */
.stats-isp-wrap {
  overflow-x: auto;
  border-radius: 10px;
}
.isp-stats-table-wrap {
  overflow-x: auto;
}
.isp-stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.isp-stats-table th,
.isp-stats-table td {
  padding: 8px 14px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.isp-stats-table thead th {
  background: var(--surface2);
  color: var(--text);
  font-weight: 600;
  line-height: 1.6;
}
.isp-stats-table thead th:first-child { text-align: left; }
.isp-stats-table td.isp-metric-label {
  text-align: left;
  color: var(--text-muted);
  font-weight: 500;
  background: var(--surface2);
}
.isp-stats-table tbody tr:hover td {
  background: var(--hover);
}
.isp-cell-pct {
  color: var(--text-muted);
  font-size: 10px;
  margin-left: 3px;
}

/* 省份地图容器 */
.stats-province-map {
  width: 100%;
  min-height: 360px;
  height: 520px;
  border-radius: 12px;
  background: var(--surface2);
  overflow: hidden;
}

/* ISP 图表选择器 */
.isp-chart-selector {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.isp-sel-btn {
  opacity: .55;
  transition: opacity .15s, transform .1s;
}
.isp-sel-btn.active,
.isp-sel-btn:hover {
  opacity: 1;
}
.isp-sel-btn.active {
  box-shadow: 0 0 0 1px var(--border);
}

/* ISP 图表区域 — 固定高度确保 Chart.js 正常渲染 */
.isp-chart-area {
  display: flex;
  gap: 16px;
  align-items: stretch;
}
.isp-chart-left  { position: relative; flex: 1.6; min-width: 0; height: 260px; }
.isp-chart-right { position: relative; flex: 1;   min-width: 0; height: 260px; }

/* 总计详情行 */
.isp-avg-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.isp-avg-card {
  background: var(--surface2);
  border-radius: 8px;
  padding: 8px 12px;
  min-width: 120px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.isp-avg-line {
  font-size: 11px;
  color: var(--text-muted);
}
.isp-avg-line b { margin-left: 4px; }

/* 单运营商指标卡 */
.isp-stats-detail { margin-top: 12px; }
.isp-single-cards {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.isp-sc {
  background: var(--surface2);
  border-radius: 8px;
  padding: 10px 16px;
  min-width: 100px;
  text-align: center;
}
.isp-sc-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.isp-sc-val {
  font-size: 18px;
  font-weight: 700;
}

/* ISP 表格百分比小字（保留兼容） */
.isp-cell-pct {
  font-size: 10px;
  color: var(--text-muted);
  margin-left: 3px;
}
.isp-col-name {
  font-size: 10px;
  color: var(--text-muted);
}

/* 省份排行榜 */
/* 省份排行榜 — 三列 Grid */
.prov-rank-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 16px;
}
@media (max-width: 900px) {
  .prov-rank-grid { grid-template-columns: 1fr; }
}
.stats-prov-rank {
  margin-top: 20px;
}
.prov-rank-block {
  background: var(--surface2);
  border-radius: 10px;
  padding: 12px 14px;
}
.prov-rank-title {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 10px;
  letter-spacing: .3px;
}
.prov-rank-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.prov-rank-table th,
.prov-rank-table td {
  padding: 5px 6px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.prov-rank-table th {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 11px;
}
td.rank-no {
  font-weight: 700;
  width: 24px;
  text-align: center;
}
td.rank-prov {
  color: var(--text);
  font-weight: 500;
}
td.rank-val {
  font-weight: 700;
  text-align: right;
}
td.rank-pct {
  color: var(--text-muted);
  font-size: 11px;
  text-align: right;
}
td.rank-avg {
  color: #38bdf8;
  font-size: 11px;
  text-align: right;
  white-space: nowrap;
}
td.rank-bar-cell {
  width: 80px;
  padding: 4px 8px;
}
.rank-bar {
  height: 6px;
  border-radius: 3px;
  min-width: 2px;
}

/* 超小屏 (≤400px) 进一步压缩 */
@media (max-width: 400px) {
  .topbar-right .btn-danger { display: none; } /* 隐藏退出按钮，通过设置页退出 */
  .panel-numbers { height: 38vh; }
  .num-phone { font-size: 14px; }
}