:root {
  --synapse-green: #198754;
  --synapse-red: #c23b3b;
  --synapse-amber: #b7791f;
  --synapse-blue: #2f6fed;
  --synapse-ink: #1f2937;
  --synapse-muted: #667085;
  --synapse-surface: #ffffff;
  --synapse-border: #e7ebf2;
  --synapse-radius: 10px;
  --synapse-shadow: 0 4px 18px rgba(16,24,40,.06);
}

body, button, input, select, textarea {
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif;
}

.sidebar-brand { min-height: 100px !important; height: auto !important; padding: .85rem .9rem 1rem; letter-spacing: -.01em; white-space: normal; overflow: visible !important; align-items: flex-start; line-height: 1.35; }
.sidebar-brand .align-middle { display: block; flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; word-break: break-word; font-size: .94rem; font-weight: 700; padding-bottom: .25rem; }
.sidebar-brand .brand-mark {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  margin-right: 9px;
  margin-top: .1rem;
  flex: 0 0 28px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 6px;
  color: #8ec5ff;
}
.sidebar .sidebar-link { padding-top: .6rem; padding-bottom: .6rem; border-radius: 6px; margin: 2px 10px; }
.sidebar .sidebar-item.active > .sidebar-link { background: rgba(59,125,221,.16); box-shadow: inset 3px 0 0 #6ea8fe; }
.sidebar .sidebar-header { margin-top: 1.25rem; font-size: .68rem; letter-spacing: .04em; text-transform: none; }
.content { padding: 1.5rem 1.5rem 2.25rem; }
.content > * { max-width: 1440px; margin-left: auto; margin-right: auto; }
.page-header { margin-bottom: 1.15rem; }
.page-header h1 { margin: 0; font-size: 1.65rem; font-weight: 700; letter-spacing: -.025em; color: var(--synapse-ink); }
.page-header .page-subtitle { max-width: 860px; margin: .4rem 0 0; color: var(--synapse-muted); font-size: .84rem; line-height: 1.6; }
.metric-card { border: 0; border-radius: 7px; }
.metric-card .metric-icon { width: 38px; height: 38px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; }
.metric-card .metric-label { color: #667085; font-size: .8rem; }
.metric-card .metric-value { color: #182230; font-size: 1.55rem; font-weight: 650; line-height: 1.2; }
.card { border: 1px solid var(--synapse-border); border-radius: var(--synapse-radius); box-shadow: var(--synapse-shadow); overflow: hidden; }
.card-header { background: var(--synapse-surface); padding: .9rem 1.15rem; border-bottom: 1px solid var(--synapse-border); }
.card-header .card-title { font-size: .98rem; font-weight: 650; margin: 0; }
.card-caption { color: #6b7280; font-size: .78rem; margin-top: .25rem; }
.card-body { padding: 1.1rem 1.15rem; }
.card-footer { padding: .75rem 1.15rem; border-top: 1px solid var(--synapse-border); }
.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table thead th { color: #667085; font-size: .74rem; font-weight: 650; letter-spacing: .02em; text-transform: none; white-space: nowrap; border-bottom-width: 1px; }
.table tbody td { color: #344054; font-size: .84rem; border-color: #edf0f4; }
.table-hover > tbody > tr:hover > * { --bs-table-accent-bg: #f8faff; }
.form-label { color: #475467; font-size: .8rem; font-weight: 600; }
.form-control, .form-select { min-height: 2.45rem; border-color: #d9dee8; border-radius: 6px; font-size: .84rem; }
.form-control:focus, .form-select:focus { border-color: #7ea6ef; box-shadow: 0 0 0 .2rem rgba(59,125,221,.12); }
.btn { border-radius: 6px; font-size: .82rem; font-weight: 600; }
.btn-sm { padding: .38rem .62rem; }
.btn-success { box-shadow: 0 2px 5px rgba(25,135,84,.15); }
.btn-danger { box-shadow: 0 2px 5px rgba(194,59,59,.12); }
.btn-outline-primary, .btn-outline-danger, .btn-outline-success { background: #fff; }
.table > :not(caption) > * > * { vertical-align: middle; }
.status-chip { display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px; padding: .22rem .55rem; font-size: .76rem; font-weight: 600; }
.status-chip::before { content: ""; width: .42rem; height: .42rem; border-radius: 50%; background: currentColor; }
.status-pending { color: var(--synapse-amber); background: #fff7e8; }
.status-success { color: var(--synapse-green); background: #eaf7f0; }
.status-danger { color: var(--synapse-red); background: #fff0f0; }
.status-info { color: var(--synapse-blue); background: #edf4ff; }
.btn-success { background-color: var(--synapse-green); border-color: var(--synapse-green); }
.btn-danger { background-color: var(--synapse-red); border-color: var(--synapse-red); }
.auth-shell { min-height: 100vh; background: #f5f7fb; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.auth-panel { width: 100%; max-width: 440px; border: 0; border-radius: 8px; box-shadow: 0 10px 28px rgba(16,24,40,.10); }
.auth-brand { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.5rem; color: #1e293b; font-weight: 700; font-size: 1.15rem; }
.auth-brand .brand-mark { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; background: #eaf2ff; color: var(--synapse-blue); border-radius: 7px; }
.auth-note { color: #667085; font-size: .82rem; line-height: 1.65; }
.chart-wrap { position: relative; height: 272px; }
.empty-row { padding: 2.5rem 1rem !important; color: #667085; text-align: center; }

/* Bootstrap's JavaScript bundle includes Modal/Pagination behavior, while
   the trimmed AdminKit stylesheet does not ship those component rules. Keep
   dialogs out of card/grid flow and make the server-rendered pager usable. */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1055;
  display: none;
  width: 100%;
  height: 100%;
  padding: 1.5rem .75rem;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
}
.modal.show { display: block; }
.modal.fade { opacity: 0; transition: opacity .15s linear; }
.modal.fade.show { opacity: 1; }
.modal-dialog {
  position: relative;
  width: auto;
  max-width: 500px;
  margin: 1.75rem auto;
  pointer-events: none;
  transform: translateY(-12px);
  transition: transform .2s ease-out;
}
.modal.show .modal-dialog { transform: none; }
.modal-dialog.modal-lg { max-width: 800px; }
.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(16,24,40,.12);
  border-radius: 8px;
  outline: 0;
  box-shadow: 0 .75rem 2rem rgba(16,24,40,.18);
}
.modal-header, .modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .9rem 1.1rem;
  border-color: #edf0f4;
}
.modal-header { border-bottom: 1px solid #edf0f4; }
.modal-footer { border-top: 1px solid #edf0f4; gap: .5rem; }
.modal-body { position: relative; flex: 1 1 auto; padding: 1rem 1.1rem; }
.modal-title { margin: 0; font-size: 1rem; font-weight: 650; color: var(--synapse-ink); }
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: #142033;
}
.modal-backdrop.show { opacity: .48; }
body.modal-open { overflow: hidden; }
.btn-close {
  width: 1.25rem;
  height: 1.25rem;
  padding: .25rem;
  border: 0;
  opacity: .55;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M.293.293a1 1 0 1 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 1 1-1.414 1.414L8 9.414 1.707 15.707A1 1 0 0 1 .293 14.293L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3E%3C/svg%3E") center/1em auto no-repeat;
}
.btn-close:hover { opacity: .85; }
.card-body > .pagination,
.card > .pagination { margin: 0; }
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem;
  margin: 0;
  padding: .85rem 1.1rem;
  list-style: none;
}
.pagination li { display: inline-flex; }
.pagination a, .pagination span {
  display: inline-flex;
  min-width: 2.15rem;
  height: 2.15rem;
  align-items: center;
  justify-content: center;
  padding: .25rem .6rem;
  border: 1px solid #d8dee8;
  border-radius: 5px;
  background: #fff;
  color: #475467;
  font-size: .82rem;
  line-height: 1;
}
.pagination a:hover { border-color: var(--synapse-blue); color: var(--synapse-blue); background: #f5f8ff; }
.pagination .active span { border-color: var(--synapse-blue); background: var(--synapse-blue); color: #fff; }
.pagination .disabled span { color: #a0a9b8; background: #f8fafc; cursor: not-allowed; }
.pagination .pagination-info { border: 0; background: transparent; color: #667085; }
.table-responsive { overflow-x: auto; }
.user-table { min-width: 1480px; table-layout: fixed; }
.user-table th, .user-table td { vertical-align: middle; overflow: hidden; }
.user-table th:nth-child(1), .user-table td:nth-child(1) { width: 16%; }
.user-table th:nth-child(2), .user-table td:nth-child(2) { width: 10%; }
.user-table th:nth-child(3), .user-table td:nth-child(3) { width: 11%; }
.user-table th:nth-child(4), .user-table td:nth-child(4) { width: 8%; }
.user-table th:nth-child(5), .user-table td:nth-child(5) { width: 12%; }
.user-table th:nth-child(6), .user-table td:nth-child(6) { width: 10%; }
.user-table th:nth-child(7), .user-table td:nth-child(7) { width: 9%; }
.user-table th:nth-child(8), .user-table td:nth-child(8) { width: 9%; }
.user-table th:nth-child(9), .user-table td:nth-child(9) { width: 7%; }
.user-table th:nth-child(10), .user-table td:nth-child(10) { width: 18%; min-width: 240px; overflow: visible; }
.task-progress-cell { display: flex; flex-direction: column; justify-content: center; gap: .35rem; width: 100%; min-width: 0; max-width: none; }
.task-progress-cell .progress { height: 7px; width: 100%; min-width: 0; margin: 0; }
.task-progress-cell > span { min-width: 0; text-align: left; color: #667085; font-size: .78rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.user-table td.user-contact-col { overflow: hidden; }
.user-table td.user-contact-col span, .user-table td.user-contact-col small { max-width: 100%; min-width: 0; white-space: nowrap; }
.user-table .btn-group { display: inline-flex; align-items: center; justify-content: flex-end; gap: .35rem; white-space: nowrap; }
.user-table .btn-group form { display: block; margin: 0; }
.user-table .btn-group .btn { min-width: 0; padding-left: .55rem; padding-right: .55rem; white-space: nowrap; }
.task-cycle-table { min-width: 1200px; table-layout: fixed; }
.task-cycle-table th, .task-cycle-table td { vertical-align: middle; }
.task-cycle-table th:nth-child(1), .task-cycle-table td:nth-child(1) { width: 19%; }
.task-cycle-table th:nth-child(2), .task-cycle-table td:nth-child(2) { width: 11%; }
.task-cycle-table th:nth-child(3), .task-cycle-table td:nth-child(3) { width: 9%; }
.task-cycle-table th:nth-child(4), .task-cycle-table td:nth-child(4) { width: 18%; }
.task-cycle-table th:nth-child(5), .task-cycle-table td:nth-child(5) { width: 12%; }
.task-cycle-table th:nth-child(6), .task-cycle-table td:nth-child(6) { width: 15%; white-space: nowrap; }
.task-cycle-table th:nth-child(7), .task-cycle-table td:nth-child(7) { width: 16%; min-width: 202px; white-space: nowrap; }
.task-cycle-table .task-progress-cell { margin: 0 auto; }
.media-uploader { display:flex; align-items:center; gap:12px; padding:10px; border:1px dashed #cfd7e6; border-radius:8px; background:#fbfcfe; }
.media-uploader [data-media-preview] { width:52px; height:52px; object-fit:contain; border:1px solid #e2e8f0; border-radius:7px; background:#fff; }
.media-uploader [data-media-meta] { display:block; color:#667085; font-size:.76rem; margin-top:3px; }
.media-uploader input[type=file] { display:none; }
.media-uploader .btn { white-space:nowrap; }
.service-icon { width:40px; height:40px; object-fit:contain; border-radius:9px; border:1px solid #e7ebf2; background:#f7f9fc; padding:5px; }
.service-url { max-width:280px; color:var(--synapse-blue); }
.user-picker, .finance-user-picker { position:relative; }
.user-results { position:absolute; z-index:20; left:0; right:0; top:100%; background:#fff; border:1px solid #d9dee8; border-radius:6px; box-shadow:0 8px 20px rgba(16,24,40,.12); max-height:220px; overflow:auto; }
.user-result { display:block; width:100%; border:0; background:#fff; padding:10px 12px; text-align:left; color:#344054; font-size:.82rem; }
.user-result:hover { background:#f5f8ff; color:var(--synapse-blue); }
.user-result-empty { padding:10px 12px; color:#98a2b3; font-size:.8rem; }
.content-pagers { margin-top:12px; }
.brand-preview { border:1px solid #e7ebf2; border-radius:12px; padding:20px; background:linear-gradient(145deg,#f8fbff,#fff); }
.browser-preview { border:1px solid #dfe5ef; border-radius:8px; background:#eef2f7; padding:7px 10px 0; height:52px; }
.browser-tab { display:flex; align-items:center; gap:8px; background:#fff; border:1px solid #e2e8f0; border-bottom:0; border-radius:7px 7px 0 0; padding:8px 12px; width:fit-content; min-width:170px; font-size:.78rem; color:#344054; }
.browser-tab img { width:18px; height:18px; object-fit:contain; }
.app-brand-preview { display:flex; align-items:center; gap:14px; border:1px solid #e7ebf2; border-radius:10px; padding:16px; background:#fff; }
.app-brand-preview img { width:60px; height:60px; object-fit:contain; border-radius:10px; background:#f7f9fc; padding:6px; }
.app-brand-preview strong { display:block; color:#1f2937; font-size:1.05rem; }
.app-brand-preview span { display:block; color:#98a2b3; font-size:.76rem; margin-top:4px; }
.media-tile { border:1px solid #e7ebf2; border-radius:9px; padding:8px; background:#fff; height:100%; }
.media-thumb { aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; background:#f7f9fc; border-radius:7px; overflow:hidden; }
.media-thumb img { max-width:100%; max-height:100%; object-fit:contain; }
.media-name { margin-top:8px; font-size:.78rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.media-meta { margin-top:3px; color:#98a2b3; font-size:.68rem; }
.toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.toolbar .filters { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.nav-tabs { border-bottom:1px solid #dfe5ef; gap:4px; }
.nav-tabs .nav-link { border:0; border-bottom:2px solid transparent; color:#667085; padding:.65rem .9rem; border-radius:6px 6px 0 0; }
.nav-tabs .nav-link:hover { color:var(--synapse-blue); background:#f5f8ff; }
.nav-tabs .nav-link.active { color:var(--synapse-blue); background:#fff; border-bottom-color:var(--synapse-blue); font-weight:650; }
.list-group-item { border-color:#edf0f4; padding:.9rem 1.1rem; }
.sidebar { background:linear-gradient(180deg,#19283a 0%,#223449 100%); }
.navbar-bg { border-bottom:1px solid #e7ebf2; box-shadow:0 1px 2px rgba(16,24,40,.03); }
.footer { border-top:1px solid #e7ebf2; background:#fff; }
.content > .row { --bs-gutter-y: 1rem; }
.content > .row > .modal { width: 100%; max-width: none; padding-left: .75rem; padding-right: .75rem; }
.content > .row > .modal.show { display: block; }

/* Agent team tree: data is lazy-loaded and the visual hierarchy mirrors the
   only enabled relationship (agent -> direct user). */
.team-tree-shell { padding: 1.1rem 1.15rem 1.2rem; background: linear-gradient(145deg,#fbfdff 0%,#f5f8fe 100%); }
.team-tree-root { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.05rem; border: 1px solid #d9e5fa; border-radius: 10px; background: #fff; box-shadow: 0 5px 15px rgba(40,77,130,.06); }
.team-tree-root-main { display: flex; align-items: center; min-width: 0; gap: .75rem; }
.team-tree-avatar { display: inline-flex; flex: 0 0 auto; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 10px; color: #1d5eb8; background: #e8f1ff; font-weight: 750; }
.team-tree-title { min-width: 0; color: #243b5a; font-size: .92rem; font-weight: 700; }
.team-tree-meta { margin-top: .18rem; overflow: hidden; color: #667085; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.team-tree-children { position: relative; margin: .1rem 0 0 1.2rem; padding: .8rem 0 0 1.55rem; border-left: 2px solid #d8e5f7; }
.team-tree-children::before { position: absolute; top: 0; left: -2px; width: 1.1rem; border-top: 2px solid #d8e5f7; content: ""; }
.team-tree-list { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.team-tree-member { position: relative; display: flex; align-items: center; justify-content: space-between; gap: .85rem; padding: .75rem .85rem; border: 1px solid #e2eaf4; border-radius: 8px; background: #fff; }
.team-tree-member::before { position: absolute; top: 50%; left: -1.65rem; width: 1.6rem; border-top: 1px solid #d8e5f7; content: ""; }
.team-tree-member-main { display: flex; min-width: 0; align-items: center; gap: .65rem; }
.team-tree-member-name { overflow: hidden; color: #344054; font-size: .84rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.team-tree-member-meta { margin-top: .16rem; overflow: hidden; color: #8a94a6; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.team-tree-amount { flex: 0 0 auto; color: #2f5c96; font-size: .78rem; font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; }
.team-tree-empty { padding: .85rem; border: 1px dashed #cbd8e9; border-radius: 8px; color: #7a8699; background: rgba(255,255,255,.72); font-size: .8rem; }
.team-tree-note { margin: .8rem 0 0; color: #7a8699; font-size: .75rem; line-height: 1.55; }
.team-member-table { min-width: 840px; table-layout: fixed; }
.team-member-table th:nth-child(1), .team-member-table td:nth-child(1) { width: 13%; }
.team-member-table th:nth-child(2), .team-member-table td:nth-child(2) { width: 26%; }
.team-member-table th:nth-child(3), .team-member-table td:nth-child(3) { width: 18%; }
.team-member-table th:nth-child(4), .team-member-table td:nth-child(4) { width: 14%; }
.team-member-table th:nth-child(5), .team-member-table td:nth-child(5) { width: 18%; white-space: nowrap; }
.team-member-table th:nth-child(6), .team-member-table td:nth-child(6) { width: 11%; }

.telegram-card { max-width: 880px; overflow: hidden; }
.telegram-body { padding: .35rem 1.35rem 0; }
.telegram-row { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: .65rem 1.75rem; padding: 1.15rem 0; border-bottom: 1px solid #eef1f6; align-items: start; }
.telegram-row:last-child { border-bottom: 0; }
.telegram-label { padding-top: .35rem; color: #344054; font-size: .92rem; font-weight: 650; }
.telegram-main .form-control { max-width: 520px; }
.telegram-hint { margin-top: .4rem; color: #98a2b3; font-size: .78rem; line-height: 1.55; }
.telegram-actions { display: flex; justify-content: flex-end; gap: .7rem; padding: 1rem 1.35rem 1.2rem; border-top: 1px solid #eef1f6; background: #fcfdff; }
.telegram-flash { max-width: 880px; }
.telegram-card .form-switch .form-check-input { width: 2.5rem; height: 1.35rem; cursor: pointer; }

@media (max-width: 575.98px) {
  .content { padding: 1rem .75rem 1.5rem; }
  .page-header h1 { font-size: 1.25rem; }
  .chart-wrap { height: 230px; }
  .modal { padding: .75rem; }
  .modal-dialog, .modal-dialog.modal-lg { max-width: none; margin: .5rem auto; }
  .team-tree-root, .team-tree-member { align-items: flex-start; flex-direction: column; }
  .team-tree-root .btn, .team-tree-amount { align-self: flex-start; }
  .telegram-row { grid-template-columns: 1fr; gap: .4rem; }
  .telegram-label { padding-top: 0; }
  .telegram-actions { justify-content: stretch; }
  .telegram-actions .btn { flex: 1; }
}