/* 数据大屏详情页（后台侧）私有样式 · admin/css/data_screen.css · 2026-09-09
 * 浅色默认；body.ds-dark 变体为暗色投屏风。仅本页使用，不污染全局。
 * 主色：#16a34a（绿）系，无刺眼高饱和色；按钮一律 ym-btn 统一类。
 */
.ds-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:2px 0 14px; }
.ds-title { display:flex; align-items:center; gap:10px; }
.ds-h1 { font-size:18px; font-weight:700; margin:0; }
.ds-h1 a { color:inherit; text-decoration:none; }
.ds-live { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:#b91c1c; background:#fef2f2; border:1px solid #fecaca; border-radius:20px; padding:2px 9px; }
.ds-dot { width:6px; height:6px; border-radius:50%; background:#dc2626; animation:dsPulse 1.6s infinite; }
@keyframes dsPulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.ds-upd { font-size:11px; color:#94a3b8; }
.ds-actions { margin-left:auto; display:flex; align-items:center; gap:10px; }
.ds-theme-btn { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:8px; border:1px solid #cbd5e1; background:#fff; color:#334155; font-size:13px; text-decoration:none; cursor:pointer; transition:all .15s; }
.ds-theme-btn:hover { background:#f1f5f9; border-color:#94a3b8; }
.ds-theme-btn:active { transform:scale(.97); }
body.ds-dark .ds-theme-btn { background:#1f2937; border-color:#334155; color:#cbd5e1; }
body.ds-dark .ds-theme-btn:hover { background:#1e293b; border-color:#475569; }
.ds-manage { display:inline-flex; align-items:center; gap:10px; }
/* 自绘开关 .sw（隐藏原 input） */
.sw { position:relative; display:inline-flex; align-items:center; gap:6px; cursor:pointer; user-select:none; font-size:12px; color:#475569; }
.sw input { position:absolute; opacity:0; width:0; height:0; }
.sw i { width:34px; height:18px; border-radius:20px; background:#cbd5e1; position:relative; transition:background .2s; flex:none; }
.sw i::after { content:''; position:absolute; left:2px; top:2px; width:14px; height:14px; border-radius:50%; background:#fff; transition:left .2s; box-shadow:0 1px 2px rgba(0,0,0,.2); }
.sw input:checked + i { background:#16a34a; }
.sw input:checked + i::after { left:18px; }
.sw input:focus-visible + i { outline:2px solid #16a34a; outline-offset:2px; }
.sw em { font-style:normal; }
.ds-settings { background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; padding:10px 14px; margin-bottom:14px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:12px; }
.ds-st { color:#475569; }
.ds-chips { display:inline-flex; gap:6px; flex-wrap:wrap; }
.ds-chip { display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid #cbd5e1; border-radius:20px; padding:3px 12px; cursor:pointer; font-size:12px; color:#334155; }
.ds-chip.on { background:#f0fdf4; border-color:#16a34a; color:#15803d; }
.ds-chip input { accent-color:#16a34a; }
.ds-tip { color:#16a34a; font-size:12px; }
/* 虚拟演示角标（全员可见，提示当前为演示数据） */
.ds-virt { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; color:#92400e; background:#fef3c7; border:1px solid #fed7aa; border-radius:20px; padding:2px 9px; }
.ds-virt b { font-weight:700; }
/* 虚拟设置行（仅 boss/admin） */
.ds-vrow { margin-top:-6px; }
.ds-num { width:64px; padding:4px 8px; border:1px solid #d1d5db; border-radius:6px; background:#fff; color:#334155; font-size:12px; }
.ds-num:focus { outline:none; border-color:#16a34a; box-shadow:0 0 0 3px rgba(22,163,74,.12); }
.ds-sel { padding:4px 6px; border:1px solid #d1d5db; border-radius:6px; background:#fff; color:#334155; font-size:12px; }
.ds-sel:focus { outline:none; border-color:#16a34a; box-shadow:0 0 0 3px rgba(22,163,74,.12); }
.ds-vprev { color:#15803d; font-size:12px; }
.ds-vnote { color:#94a3b8; font-size:11px; }
/* 虚拟订单飘屏（COD 单页风格浮层，仅虚拟模式出现） */
.ds-marquee { position:fixed; right:16px; bottom:16px; z-index:2147483000; display:flex; flex-direction:column; gap:8px; pointer-events:none; max-width:320px; }
.ds-marquee .m { background:#fff; border:1px solid #e2e8f0; border-left:3px solid #16a34a; border-radius:8px; padding:8px 12px; font-size:12px; color:#334155; box-shadow:0 4px 14px rgba(15,23,42,.12); animation:dsIn .35s ease-out; }
.ds-marquee .m .mm { color:#64748b; }
.ds-marquee .m .mv { color:#b45309; font-weight:700; }
.ds-marquee .m .mtag { display:inline-block; background:#fef3c7; color:#92400e; border-radius:4px; padding:0 4px; font-size:10px; margin-right:4px; }
@keyframes dsIn { from { opacity:0; transform:translateX(24px); } to { opacity:1; transform:translateX(0); } }
/* 订单流里的模拟条目标记 */
.ds-feed .tag { display:inline-block; background:#fef3c7; color:#92400e; border-radius:4px; padding:0 4px; font-size:10px; margin-right:4px; }
.ds-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:14px; }
.ds-kpi { background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:14px 16px; }
.ds-kpi-t { font-size:12px; color:#64748b; }
.ds-kpi-v { font-size:26px; font-weight:700; color:#0f172a; margin:6px 0 2px; line-height:1.15; }
.ds-kpi-s { font-size:11px; color:#94a3b8; }
.ds-kpi-s.up { color:#16a34a; }
.ds-kpi-s.down { color:#dc2626; }
.ds-grid { display:grid; grid-template-columns:repeat(6,1fr); grid-auto-flow:row dense; gap:12px; }
.ds-card { background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:14px 16px; }
.ds-card-h { font-size:13px; font-weight:700; color:#0f172a; margin-bottom:10px; display:flex; align-items:baseline; gap:8px; }
.ds-card-sub { font-size:11px; color:#94a3b8; font-weight:400; }
.ds-trend { grid-column:span 3; }
.ds-rank { grid-column:span 3; }
.ds-feed { grid-column:span 2; }
.ds-health { grid-column:span 2; }
.ds-ad { grid-column:span 2; }
.ds-trend-bars { display:flex; align-items:flex-end; gap:8px; height:190px; }
.ds-bar { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; height:100%; }
.ds-bar .b { width:100%; max-width:44px; border-radius:6px 6px 0 0; background:#bbf7d0; position:relative; min-height:2px; transition:background .2s; }
.ds-bar .b.today { background:#16a34a; }
.ds-bar .b:hover { background:#86efac; }
.ds-bar .b.today:hover { background:#15803d; }
.ds-bar .v { font-size:10px; color:#64748b; }
.ds-bar .d { font-size:10px; color:#94a3b8; }
.ds-bar .g { font-size:9px; color:#b45309; }
.ds-table { width:100%; border-collapse:collapse; font-size:12px; }
.ds-table th, .ds-table td { text-align:left; padding:5px 6px; border-bottom:1px solid #f1f5f9; }
.ds-table th { color:#94a3b8; font-weight:600; }
.ds-table .r { text-align:right; }
.ds-feed-list { list-style:none; margin:0; padding:0; max-height:280px; overflow:auto; }
.ds-feed-list li { font-size:12px; color:#334155; padding:7px 0; border-bottom:1px dashed #f1f5f9; }
.ds-feed-list li:last-child { border-bottom:none; }
.ds-feed .amt { color:#b45309; font-weight:700; }
.ds-feed .ago { color:#94a3b8; font-size:11px; }
.ds-feed .nm { color:#64748b; font-size:11px; }
.ds-empty { border:1px dashed #e2e8f0; border-radius:8px; padding:22px 10px; text-align:center; color:#94a3b8; font-size:12px; }
.ds-note { margin-top:14px; font-size:11px; color:#94a3b8; }
.ds-hidden { display:none; }

/* ============ 签收健康度（鲸麦 jm / 有迈 oc 双体系切换，状态快照口径） ============ */
.ds-h-tabs { display:flex; gap:6px; margin-bottom:10px; }
.ds-h-tab { appearance:none; border:1px solid #e2e8f0; background:#f8fafc; color:#475569; font-size:12px; line-height:1; padding:6px 12px; border-radius:999px; cursor:pointer; transition:background .15s, color .15s, border-color .15s, transform .05s; }
.ds-h-tab:hover { background:#f1f5f9; color:#0f172a; }
.ds-h-tab:active { transform:scale(.96); }
.ds-h-tab.on { background:#16a34a; border-color:#16a34a; color:#fff; font-weight:600; }
.ds-h-head { display:flex; align-items:baseline; gap:10px; margin-bottom:10px; }
.ds-h-rate { display:flex; align-items:baseline; gap:4px; }
.ds-h-rate b { font-size:24px; font-weight:700; color:#0f172a; line-height:1.1; }
.ds-h-rate span { font-size:11px; color:#94a3b8; }
.ds-h-tot { font-size:11px; color:#64748b; margin-left:auto; }
.ds-h-list { display:flex; flex-direction:column; gap:6px; }
.ds-h-row { display:flex; align-items:center; gap:8px; font-size:11px; }
.ds-h-lab { width:56px; flex:none; color:#64748b; }
.ds-h-bar { flex:1; height:7px; border-radius:4px; background:#f1f5f9; overflow:hidden; }
.ds-h-i { display:block; height:100%; border-radius:4px; background:#cbd5e1; }
.ds-h-i.ds-h-signed { background:#16a34a; }
.ds-h-i.ds-h-shipping { background:#0369a1; }
.ds-h-i.ds-h-pending { background:#d97706; }
.ds-h-i.ds-h-returned { background:#94a3b8; }
.ds-h-i.ds-h-refunded { background:#dc2626; }
.ds-h-i.ds-h-issue { background:#b91c1c; }
.ds-h-i.ds-h-unknown { background:#e2e8f0; }
.ds-h-val { width:44px; flex:none; text-align:right; color:#334155; }
.ds-h-note { margin-top:9px; font-size:10px; color:#94a3b8; line-height:1.4; }

/* ============ 广告火力（账号级 fb_account） ============ */
.ds-a-head { display:flex; align-items:baseline; gap:8px; margin-bottom:4px; }
.ds-a-cost { font-size:24px; font-weight:700; color:#0f172a; line-height:1.1; }
.ds-a-sub { font-size:11px; color:#94a3b8; }
.ds-a-delta { font-style:normal; color:#64748b; }
.ds-a-meta { font-size:11px; color:#64748b; margin-bottom:10px; }
.ds-a-meta b { color:#334155; }
.ds-a-list { display:flex; flex-direction:column; gap:6px; }
.ds-a-row { display:flex; align-items:center; gap:8px; font-size:11px; }
.ds-a-name { width:88px; flex:none; color:#64748b; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ds-a-bar { flex:1; height:7px; border-radius:4px; background:#f1f5f9; overflow:hidden; }
.ds-a-i { display:block; height:100%; border-radius:4px; background:#86efac; }
.ds-a-val { width:56px; flex:none; text-align:right; color:#334155; }
.ds-a-note { margin-top:9px; font-size:10px; color:#94a3b8; line-height:1.4; }

/* ============ 暗色投屏变体（?theme=dark，body.ds-dark） ============ */
body.ds-dark { background:#0f172a; }
body.ds-dark .app-content { }
body.ds-dark .ds-h1 { color:#f1f5f9; }
body.ds-dark .ds-live { background:#1f2937; border-color:#7f1d1d; color:#fecaca; }
body.ds-dark .ds-upd, body.ds-dark .ds-note, body.ds-dark .ds-kpi-s, body.ds-dark .ds-card-sub,
body.ds-dark .ds-bar .g, body.ds-dark .ds-bar .d { color:#64748b; }
body.ds-dark .ds-kpi, body.ds-dark .ds-card { background:#1f2937; border-color:#1e293b; }
body.ds-dark .ds-kpi-t, body.ds-dark .ds-table th { color:#64748b; }
body.ds-dark .ds-kpi-v, body.ds-dark .ds-card-h, body.ds-dark .ds-table td, body.ds-dark .ds-feed-list li { color:#e2e8f0; }
body.ds-dark .ds-feed-list li { border-bottom-color:#1e293b; }
body.ds-dark .ds-feed .amt { color:#d97706; }
body.ds-dark .ds-table th, body.ds-dark .ds-table td { border-bottom-color:#1e293b; }
body.ds-dark .ds-empty { border-color:#1e293b; color:#64748b; }
body.ds-dark .ds-settings { background:#1f2937; border-color:#1e293b; }
body.ds-dark .ds-st, body.ds-dark .sw em { color:#cbd5e1; }
body.ds-dark .ds-chip { background:#0f172a; border-color:#334155; color:#cbd5e1; }
body.ds-dark .ds-chip.on { background:#14532d; border-color:#16a34a; color:#86efac; }
body.ds-dark .ds-bar .b { background:#14532d; }
body.ds-dark .ds-bar .b.today { background:#16a34a; }
body.ds-dark .ds-num, body.ds-dark .ds-sel { background:#0f172a; border-color:#334155; color:#cbd5e1; }
body.ds-dark .ds-vprev { color:#86efac; }
body.ds-dark .ds-marquee .m { background:#1f2937; border-color:#1e293b; border-left-color:#16a34a; color:#e2e8f0; }
body.ds-dark .ds-marquee .m .mm { color:#94a3b8; }
body.ds-dark .ds-marquee .m .mv { color:#d97706; }
body.ds-dark .ds-h-rate b, body.ds-dark .ds-a-cost { color:#f1f5f9; }
body.ds-dark .ds-h-lab, body.ds-dark .ds-h-tot, body.ds-dark .ds-a-name,
body.ds-dark .ds-a-meta, body.ds-dark .ds-a-sub, body.ds-dark .ds-a-delta { color:#64748b; }
body.ds-dark .ds-h-bar, body.ds-dark .ds-a-bar { background:#0f172a; }
body.ds-dark .ds-h-val, body.ds-dark .ds-a-val { color:#e2e8f0; }
body.ds-dark .ds-a-meta b { color:#cbd5e1; }
body.ds-dark .ds-h-note, body.ds-dark .ds-a-note { color:#64748b; }
body.ds-dark .ds-h-tab { border-color:#334155; background:#1e293b; color:#94a3b8; }
body.ds-dark .ds-h-tab:hover { background:#334155; color:#e2e8f0; }
body.ds-dark .ds-h-tab.on { background:#16a34a; border-color:#16a34a; color:#fff; }
body.ds-dark .ds-a-i { background:#16a34a; }
body.ds-dark .ds-h-i.ds-h-unknown { background:#334155; }

/* ============ 县市分布地图（SVG，与 DEMO 同款外观） ============ */
/* 县市地理卡（2026-09-10 六市场上线时重构：地图+排行合并为通栏「左图右榜」） */
.ds-geo { grid-column:span 6; }
.ds-geo-body { display:flex; gap:18px; align-items:stretch; }
.ds-geo-map { flex:1.2; min-width:0; }
.ds-geo-list { flex:1; min-width:0; }
.ds-geo-list-h { font-size:12px; font-weight:700; color:#334155; margin-bottom:6px; display:flex; align-items:baseline; gap:8px; }
.ds-geo-map svg { width:100%; height:auto; max-height:520px; display:block; }
.ds-demo-badge { display:inline-flex; align-items:center; font-size:10px; font-weight:700; color:#92400e; background:#fef3c7; border:1px solid #fed7aa; border-radius:20px; padding:1px 8px; margin-left:auto; }
.ds-geo-toggle { display:none; align-items:center; height:24px; padding:0 10px; font-size:11px; font-weight:600; color:#15803d; background:#f0fdf4; border:1px solid #bbf7d0; border-radius:6px; cursor:pointer; }
.ds-geo-toggle:hover { background:#dcfce7; border-color:#16a34a; }
.ds-geo-toggle:active { transform:scale(.95); }
.ds-map-wrap { position:relative; }
.ds-geo .co { stroke:#fff; stroke-width:.5; cursor:pointer; transition:opacity .15s; }
.ds-geo .co:hover { opacity:.72; }
.ds-geo .lb { font-size:8px; fill:#334155; pointer-events:none; text-anchor:middle; }
.ds-map-tip { position:absolute; z-index:5; background:#0f172a; color:#f1f5f9; border-radius:8px; padding:7px 10px; font-size:11px; line-height:1.5; pointer-events:none; opacity:0; transition:opacity .12s; white-space:nowrap; box-shadow:0 6px 18px rgba(15,23,42,.28); }
.ds-map-tip.show { opacity:1; }
.ds-map-tip .nm { font-weight:700; }
.ds-map-tip .nm span { color:#94a3b8; font-weight:400; }
.ds-map-tip .row { color:#94a3b8; }
.ds-map-tip .row b { color:#f1f5f9; }
.ds-map-legend { display:flex; align-items:center; gap:6px; font-size:10px; color:#94a3b8; margin-top:8px; }
.ds-map-legend i { display:inline-block; width:14px; height:9px; border-radius:2px; }
/* 多市场切换（地图卡内独立一行，2026-09-10 市场扩到 8 个后移出标题行防挤压） */
.ds-map-co { display:flex; flex-wrap:wrap; gap:5px; margin:-2px 0 10px; }
.ds-map-co:empty { display:none; }
button.ds-chip { font:inherit; line-height:1.4; }
button.ds-chip:hover { border-color:#16a34a; }
button.ds-chip:active { transform:scale(.96); }
.ds-co-list { list-style:none; margin:0; padding:0; max-height:520px; overflow:auto; }
.ds-co-row { display:flex; align-items:center; gap:8px; font-size:12px; padding:6px 0; border-bottom:1px dashed #f1f5f9; cursor:default; }
.ds-co-row:last-child { border-bottom:none; }
.ds-co-row.on { background:#f0fdf4; }
.ds-co-row .nm { width:66px; flex:none; color:#334155; }
.ds-co-row .bar { flex:1; height:7px; border-radius:4px; background:#f1f5f9; overflow:hidden; }
.ds-co-row .bar i { display:block; height:100%; border-radius:4px; background:#22c55e; }
.ds-co-row .od { width:66px; flex:none; text-align:right; color:#334155; }
.ds-co-row .am { width:76px; flex:none; text-align:right; color:#b45309; }
body.ds-dark .ds-geo .co { stroke:#0f172a; }
body.ds-dark .ds-geo .lb { fill:#94a3b8; }
body.ds-dark .ds-map-co button.ds-chip { background:#0f172a; border-color:#334155; color:#cbd5e1; }
body.ds-dark .ds-map-co button.ds-chip.on { background:#14532d; border-color:#16a34a; color:#86efac; }
body.ds-dark .ds-co-row .nm, body.ds-dark .ds-co-row .od { color:#e2e8f0; }
body.ds-dark .ds-co-row.on { background:#14532d; }
body.ds-dark .ds-co-row .bar { background:#0f172a; }
body.ds-dark .ds-co-row { border-bottom-color:#1e293b; }

/* 移动端（375px 纵向堆叠） */
@media (max-width:768px) {
  .ds-kpis { grid-template-columns:repeat(2,1fr); }
  .ds-grid { grid-template-columns:1fr; }
  .ds-trend, .ds-rank, .ds-feed, .ds-health, .ds-ad, .ds-geo { grid-column:span 1; }
  .ds-head { align-items:flex-start; }
  .ds-geo-toggle { display:inline-flex; }
  /* 移动端默认只看排行条形，地图点「显示地图」切换（47/82 行政区缩略图在窄屏看不清分区） */
  .ds-geo-map { display:none; }
  .ds-geo-body { flex-direction:column; }
  .ds-geo-body.m-map .ds-geo-map { display:block; }
  .ds-geo-body.m-map .ds-geo-list { display:none; }
  .ds-geo-map svg { max-height:320px; }
  .ds-co-list { max-height:300px; }
}