/* Deep admin extensions: traffic analytics, maps, CRM, and customer profiles */
.admin-ext-section { margin: 16px 0; }
.admin-ext-grid { display: grid; gap: 16px; }
.admin-ext-grid.two-one { grid-template-columns: 1.55fr .8fr; }
.admin-ext-grid.equal-maps { grid-template-columns: 1fr 1fr; }
.admin-ext-grid.equal { grid-template-columns: 1fr 1fr; margin-top: 16px; }
.traffic-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-bottom: 14px; }
.traffic-kpi-row > div { padding: 11px; border: 1px solid var(--line-2); border-radius: 9px; background: #F7F9FA; }
.traffic-kpi-row span, .traffic-stat-list span { display: block; color: var(--muted); font-size: 8px; font-weight: 750; text-transform: uppercase; }
.traffic-kpi-row strong { display: block; margin-top: 4px; color: var(--ink); font-family: var(--mono); font-size: 15px; }
.traffic-stat-list { display: grid; }
.traffic-stat-list > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-top: 1px solid var(--line-2); }
.traffic-stat-list > div:first-child { border-top: 0; }
.traffic-stat-list strong { color: var(--ink); font-family: var(--mono); font-size: 11px; }
.traffic-trend { width: 100%; height: 210px; overflow: visible; }
.world-map, .china-map { display: block; width: 100%; max-height: 310px; }
.china-map { max-height: 350px; }
.world-map .continent, .china-map .china-outline { fill: #E9EEF3; stroke: #B6C1CC; stroke-width: .6; vector-effect: non-scaling-stroke; }
.china-map .hainan { fill: #E9EEF3; stroke: #B6C1CC; stroke-width: .6; }
.map-marker { cursor: pointer; }
.map-marker circle { fill: var(--hosonic-blue); fill-opacity: .78; stroke: #fff; stroke-width: .8; vector-effect: non-scaling-stroke; transition: fill-opacity .18s ease; }
.map-marker:hover circle { fill-opacity: 1; }
.map-marker text { fill: #334155; font-family: var(--mono); font-size: 3.1px; font-weight: 700; text-anchor: middle; paint-order: stroke; stroke: #fff; stroke-width: .8; }
.china-marker circle { fill: #1F3EC5; }
.china-marker text { font-size: 3.4px; }
.map-legend { display: flex; flex-wrap: wrap; gap: 7px 12px; margin-top: 8px; color: var(--muted); font-size: 8px; }
.map-legend span { display: inline-flex; align-items: center; gap: 5px; }
.map-legend i { width: 6px; height: 6px; border-radius: 50%; background: var(--hosonic-blue); }
.crm-onboarding { display: grid; grid-template-columns: 1.35fr .75fr; gap: 16px; margin-bottom: 16px; }
.lifecycle-flow { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding: 6px 2px 2px; }
.lifecycle-flow > i { color: #A8B3C1; font-size: 12px; font-style: normal; }
.lifecycle-step { min-width: 112px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #F7F9FA; }
.lifecycle-step > span { color: #8A96A5; font-family: var(--mono); font-size: 8px; }
.lifecycle-step strong { display: block; margin-top: 8px; font-size: 10px; }
.lifecycle-step b { display: block; margin-top: 4px; color: var(--hosonic-blue); font-family: var(--mono); font-size: 18px; }
.lifecycle-step.green b { color: var(--success); }
.lifecycle-step.yellow b { color: var(--warning); }
.profile-queue { display: grid; }
.profile-queue-row { display: grid; grid-template-columns: 29px 1fr 80px 34px; align-items: center; gap: 9px; width: 100%; padding: 10px 0; border: 0; border-top: 1px solid var(--line-2); background: transparent; text-align: left; }
.profile-queue-row:first-child { border-top: 0; }
.profile-queue-row strong { display: block; color: var(--ink); font-size: 10px; }
.profile-queue-row span { display: block; color: var(--muted); font-size: 8px; }
.profile-queue-row b { color: var(--hosonic-blue); font-family: var(--mono); font-size: 9px; text-align: right; }
.completion-mini { height: 5px; overflow: hidden; border-radius: 99px; background: #E9EEF3; }
.completion-mini i { display: block; height: 100%; border-radius: inherit; background: var(--hosonic-blue); }
.completion-cell { display: grid; grid-template-columns: 70px 30px; align-items: center; gap: 7px; color: var(--muted); font-size: 9px; }
.tier-badge { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; font-family: var(--mono); font-size: 10px; font-weight: 850; }
.tier-a { color: #fff; background: var(--hosonic-blue); }
.tier-b { color: var(--hosonic-blue); background: #EEF2FF; }.customer-profile-link { border: 0; background: transparent; padding: 0; text-align: left; color: inherit; }
.customer-profile-link:hover strong { color: var(--hosonic-blue); }
.crm-lifecycle-grid { grid-template-columns: 1.2fr .8fr; }
.lifecycle-stat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.lifecycle-stat-grid > div { padding: 11px; border-radius: 9px; background: #F7F9FA; }
.lifecycle-stat-grid span { display: block; color: var(--muted); font-size: 8px; }
.lifecycle-stat-grid strong { display: block; margin-top: 4px; color: var(--ink); font-family: var(--mono); font-size: 16px; }
.completion-overview { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 18px; }
.completion-ring, .profile-score { position: relative; display: grid; place-items: center; width: 112px; height: 112px; border-radius: 50%; background: conic-gradient(var(--hosonic-blue) calc(var(--value) * 1%), #E9EEF3 0); }
.completion-ring::before, .profile-score::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: #fff; }
.completion-ring strong, .profile-score strong { position: relative; z-index: 1; font-family: var(--mono); font-size: 18px; }
.completion-ring span, .profile-score span { position: absolute; z-index: 1; top: 65%; color: var(--muted); font-size: 8px; }
.customer-profile-modal { grid-template-columns: 1fr !important; }
.profile-header-card { display: grid; grid-template-columns: 112px 1fr auto; align-items: center; gap: 18px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: #F7F9FA; }
.profile-header-card h3 { margin: 7px 0 3px; font-size: 20px; }
.profile-header-card p { margin: 0; font-size: 10px; }
.profile-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.profile-tags span { padding: 4px 7px; border-radius: 4px; color: var(--hosonic-blue); background: #EEF2FF; font-size: 8px; }
.profile-contact { display: grid; gap: 5px; text-align: right; color: var(--muted); font-size: 9px; }
.profile-contact a { color: var(--hosonic-blue); }
.profile-data-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.profile-data-grid > div { padding: 11px; border-radius: 9px; background: #F7F9FA; }
.profile-data-grid span { display: block; color: var(--muted); font-size: 8px; }
.profile-data-grid strong { display: block; margin-top: 3px; font-size: 10px; }
.profile-section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.profile-section-title h4 { margin: 0; font-size: 13px; }
.customer-activity-list { display: grid; margin-top: 8px; }
.customer-activity-list > div { display: grid; grid-template-columns: 92px 62px 1fr; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line-2); }
.customer-activity-list time { color: var(--muted); font-family: var(--mono); font-size: 8px; }
.customer-activity-list strong { font-size: 10px; }
.form-modal, .search-results-modal { grid-template-columns: 1fr !important; }
.search-result-group h4 { display: flex; justify-content: space-between; margin: 0 0 8px; font-size: 13px; }
.search-result-group h4 span { color: var(--hosonic-blue); font-family: var(--mono); }
.search-result-group > button, .search-result-group > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 10px 11px; border: 1px solid var(--line-2); border-radius: 8px; background: #F9FBFC; text-align: left; }
.search-result-group > button + button, .search-result-group > div + div { margin-top: 6px; }
.search-result-group strong { font-size: 10px; }
.search-result-group span, .search-result-group p { color: var(--muted); font-size: 9px; }
@media (max-width: 980px) { .admin-ext-grid.two-one, .admin-ext-grid.equal-maps, .admin-ext-grid.equal, .crm-onboarding, .crm-lifecycle-grid { grid-template-columns: 1fr; } .traffic-kpi-row, .profile-data-grid { grid-template-columns: repeat(2, 1fr); } .lifecycle-stat-grid { grid-template-columns: repeat(3, 1fr); } .profile-header-card { grid-template-columns: 90px 1fr; } .profile-contact { grid-column: 1/-1; text-align: left; } }
@media (max-width: 620px) { .traffic-kpi-row, .profile-data-grid, .lifecycle-stat-grid { grid-template-columns: 1fr; } .completion-overview { grid-template-columns: 1fr; justify-items: center; } .profile-queue-row { grid-template-columns: 29px 1fr auto; } .profile-queue-row .completion-mini { display: none; } .customer-activity-list > div { grid-template-columns: 1fr; gap: 4px; } }

/* CRM Pro command center */
.crm-pro { margin-top: 16px; }
.crm-pro-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; border-radius: 8px; background: #fff; box-shadow: 0 2px 4px rgba(24,33,47,.07); }
.crm-pro-search { position: relative; flex: 1 1 240px; min-width: 180px; }
.crm-pro-search .icon { position: absolute; left: 12px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); color: #8190A3; }
.crm-pro-search input { width: 100%; height: 38px; padding: 0 12px 0 36px; border: 1px solid #dfe6ef; border-radius: 8px; background: #F7F9FC; font-size: 11px; outline: none; }
.crm-pro-search input:focus { border-color: #a4c3df; background: #fff; box-shadow: 0 0 0 3px rgba(43,79,224,.06); }
.crm-pro-select { height: 38px; padding: 0 10px; border: 1px solid #dfe6ef; border-radius: 8px; background: #fff; color: #52627A; font-size: 10px; }
.crm-pro-result { margin-left: auto; color: #7A8797; font-size: 10px; white-space: nowrap; }
.crm-pro-kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin: 14px 0; }
.crm-pro-kpi { padding: 16px; border-radius: 8px; background: #fff; box-shadow: 0 2px 4px rgba(24,33,47,.07); }
.crm-pro-kpi span { display: block; color: #7A8797; font-size: 9px; font-weight: 750; text-transform: uppercase; }
.crm-pro-kpi strong { display: block; margin-top: 8px; color: #263B58; font-family: var(--mono); font-size: 22px; }
.crm-pro-kpi small { display: block; margin-top: 4px; color: #8A96A5; font-size: 9px; }
.crm-pro-grid { display: grid; grid-template-columns: 1.15fr 1fr .95fr; gap: 14px; margin: 14px 0; }
.crm-pro-card { min-width: 0; }
.crm-segment-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.crm-segment-card { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; padding: 12px; border: 1px solid #E4E9EF; border-radius: 8px; background: #FBFCFD; text-align: left; cursor: pointer; }
.crm-segment-card span { color: #536276; font-size: 10px; font-weight: 750; }
.crm-segment-card strong { color: #263B58; font-family: var(--mono); font-size: 18px; text-align: right; }
.crm-segment-card small { grid-column: 1/-1; color: #8A96A5; font-size: 8px; }
.crm-segment-card:hover { border-color: rgba(43,79,224,.35); background: #F5F7FF; }
.crm-segment-card.vip { border-left: 3px solid #D4A017; }
.crm-segment-card.repeat { border-left: 3px solid #2B4FE0; }
.crm-segment-card.new { border-left: 3px solid #18A7B8; }
.crm-segment-card.risk { border-left: 3px solid #D65466; }
.crm-action-list { display: grid; gap: 2px; }
.crm-action-row { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; gap: 9px; align-items: center; width: 100%; padding: 9px 0; border: 0; border-top: 1px solid #EDF0F3; background: none; text-align: left; cursor: pointer; }
.crm-action-row:first-child { border-top: 0; }
.crm-action-icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--hosonic-blue); background: #EEF2FF; font-size: 11px; }
.crm-action-row strong { display: block; color: #263B58; font-size: 10px; }
.crm-action-row span { display: block; margin-top: 2px; overflow: hidden; color: #7A8797; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.crm-action-row b { color: #263B58; font-family: var(--mono); font-size: 9px; }
.crm-stage-health { display: grid; gap: 9px; }
.crm-stage-row { display: grid; grid-template-columns: 1fr 86px auto; gap: 8px; align-items: center; }
.crm-stage-row > div:first-child { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 9px; }
.crm-stage-row > div:first-child span { flex: none; width: 7px; height: 7px; border-radius: 50%; }
.crm-stage-row > div:first-child strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-stage-row small { color: #8A96A5; font-family: var(--mono); }
.crm-stage-bar { height: 5px; overflow: hidden; border-radius: 999px; background: #EDF0F4; }
.crm-stage-bar i { display: block; height: 100%; border-radius: inherit; background: var(--hosonic-blue); }
.crm-stage-row b { color: #536276; font-family: var(--mono); font-size: 8px; text-align: right; }
.crm-health-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #EDF0F3; }
.crm-health-metrics span { display: block; color: #8A96A5; font-size: 8px; }
.crm-health-metrics strong { display: block; margin-top: 3px; color: #263B58; font-family: var(--mono); font-size: 13px; }
.crm-pro-customers { margin-top: 14px; }
.crm-table-scroll { overflow-x: auto; }
.crm-customer-table { min-width: 980px; }
.crm-customer-cell { display: flex; align-items: center; gap: 9px; min-width: 180px; }
.crm-customer-cell strong { display: block; font-size: 10px; }
.crm-customer-cell span { display: block; margin-top: 2px; color: #8A96A5; font-size: 8px; }
.crm-number { font-family: var(--mono); font-size: 10px; }
.crm-health-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; padding: 3px 7px; border-radius: 999px; font-family: var(--mono); font-size: 8px; font-weight: 750; }
.crm-health-badge.green { color: #087A55; background: #E7F7F0; }
.crm-health-badge.amber { color: #A05B00; background: #FFF3DF; }
.crm-health-badge.red { color: #B4233B; background: #FDE8EC; }
@media (max-width: 1100px) { .crm-pro-grid { grid-template-columns: 1fr 1fr; } .crm-pro-card:last-child { grid-column: 1/-1; } }
@media (max-width: 760px) { .crm-pro-kpis { grid-template-columns: 1fr 1fr; } .crm-pro-grid { grid-template-columns: 1fr; } .crm-pro-card:last-child { grid-column: auto; } .crm-pro-result { margin-left: 0; } .crm-pro-select { flex: 1 1 140px; } }
@media (max-width: 480px) { .crm-pro-kpis { grid-template-columns: 1fr; } .crm-segment-grid { grid-template-columns: 1fr; } .crm-health-metrics { grid-template-columns: 1fr; } .crm-pro-toolbar { padding: 10px; } }