/* 经营数据 —— 取自 origin/main store-management/_components/* 与 components/dashboard/kpi-metric-card.tsx 的 Tailwind class、
 * globals.css @theme（brand-500 #3DCAB1、brand-700 #0F766E、ink-strong #0A1629、ink-muted #64748B、ink-subtle #94A3B8）。所有类名 db- 前缀。 */
.db-full { position: absolute; inset: 0; }
.db-main { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #F9FAFB; }
.db-top { flex: none; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 32px; background: #fff; }
.db-hl { display: flex; align-items: center; gap: 12px; }
.db-hl h1 { margin: 0; font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.025em; color: #0A1629; }
.db-trig { color: #94A3B8; }
.db-hr { display: flex; align-items: center; gap: 8px; }
.db-seg { display: inline-flex; gap: 4px; border-radius: 12px; background: #EEF0F2; padding: 4px; }
.db-seg span { height: 32px; padding: 0 12px; border-radius: 8px; display: inline-flex; align-items: center; font-size: 13px; font-weight: 500; color: #64748B; white-space: nowrap; }
.db-seg span.on { background: #fff; color: #0A1629; font-weight: 600; box-shadow: 0 1px 2px rgba(10, 22, 41, .08); }
.db-date { height: 46px; padding: 0 16px; border-radius: 8px; border: 1px solid #E5E7EB; background: #fff; display: inline-flex; align-items: center; gap: 8px; font-size: 16px; color: #1C3E60; font-variant-numeric: tabular-nums; white-space: nowrap; }
.db-date.open { border-color: #3DCAB1; }
.db-vp { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.db-col { position: absolute; left: 0; right: 0; top: 0; padding: 4px 32px 40px; display: flex; flex-direction: column; gap: 24px; }
.db-card { background: #fff; border: 1px solid #E5E7EB; border-radius: 16px; box-shadow: 0 2px 8px rgba(10, 22, 41, .04); }
.db-skel { display: block; height: 14px; border-radius: 7px; background: #EEF1F4; }
.db-skel.s { width: 60%; } .db-skel.w160 { width: 160px; height: 20px; }
.db-stub { padding: 24px; display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }

/* 日期弹层 */
.db-pop { position: absolute; z-index: 45; right: 32px; top: 112px; width: 620px; border-radius: 12px; border: 1px solid #E5E7EB; background: #fff; box-shadow: 0 12px 32px rgba(10, 22, 41, .14); padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; animation: db-pop .2s ease; }
.db-pq { display: flex; gap: 8px; flex-wrap: wrap; }
.db-pq span { height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid #E5E7EB; display: inline-flex; align-items: center; font-size: 13px; color: #1C3E60; }
.db-pq span.on { background: #D4F4EE; border-color: #3DCAB1; color: #3DCAB1; font-weight: 600; }
.db-mons { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.db-mon > b { display: block; text-align: center; font-size: 14px; font-weight: 600; color: #0A1629; margin-bottom: 8px; }
.db-wk, .db-days { display: grid; grid-template-columns: repeat(7, 1fr); }
.db-wk span { text-align: center; font-size: 12px; color: #94A3B8; height: 26px; line-height: 26px; }
.db-d { height: 34px; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #1C3E60; border-radius: 8px; font-variant-numeric: tabular-nums; }
.db-d.dis { color: #CBD5E1; }
.db-d.mid { background: #E7F7EF; border-radius: 0; color: #0F766E; }
.db-d.end { background: #3DCAB1; color: #fff; font-weight: 600; }
.db-d.today:not(.end) { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
@keyframes db-pop { from { opacity: 0; transform: translateY(-4px); } }

/* KPI 行 */
.db-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
/* KUE-1457：礼品卡售卡单列一行（store-management-content.tsx：text-xs font-medium text-ink-muted -mt-2） */
.db-gcl { margin: -8px 0 0; font-size: 12px; line-height: 16px; font-weight: 500; color: #64748B; }
.db-kpi { padding: 20px; display: flex; flex-direction: column; gap: 12px; transition: border-color .2s; }
.db-kpi.hov { border-color: #3DCAB1; }
.db-kh { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 500; color: #64748B; }
.db-kc { color: #94A3B8; } .db-kpi.hov .db-kc { color: #0F766E; }
.db-kb { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.db-kv { display: flex; flex-direction: column; gap: 8px; flex: none; }
.db-kv b { font-size: 30px; line-height: 38px; font-weight: 700; color: #0A1629; white-space: nowrap; font-variant-numeric: tabular-nums; }
.db-dl { align-self: flex-start; border-radius: 999px; padding: 2px 8px; font-size: 12px; font-weight: 600; white-space: nowrap; font-style: normal; }
.db-dl.up { background: #DEF6F1; color: #047857; } .db-dl.down { background: #FEECED; color: #DC2626; } .db-dl.mute { background: #F3F4F6; color: #94A3B8; }
.db-bars { height: 40px; max-width: 96px; min-width: 0; display: flex; align-items: flex-end; justify-content: flex-end; gap: 3px; flex: 0 1 auto; overflow: hidden; }
.db-bars i { border-radius: 2px; flex: none; }

/* 经营健康度 */
.db-sec { display: flex; flex-direction: column; gap: 12px; }
.db-sec h3 { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; color: #0A1629; }
.db-hrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.db-hc { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-radius: 16px; border: 1px solid #E5E7EB; background: #fff; }
.db-hi { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.db-hi.brand { background: #E7F7EF; color: #0F766E; } .db-hi.warn { background: #FEF3C7; color: #B45309; } .db-hi.info { background: #E0F2FE; color: #0369A1; }
.db-ht { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.db-ht span { font-size: 13px; font-weight: 500; color: #64748B; }
.db-ht small { font-size: 12px; color: #64748B; font-variant-numeric: tabular-nums; }
/* KUE-1482：回头客占比 / 客户复购率下面的口径说明 */
.db-help { font-size: 12px; line-height: 1.4; color: #64748B; font-variant-numeric: normal; }
.db-hc > b { font-size: 24px; font-weight: 700; color: #0A1629; font-variant-numeric: tabular-nums; }

/* 营收趋势 + 时段分布 */
.db-row2 { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; }
.db-trend, .db-heat { padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; position: relative; }
.db-th { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.db-th h3 { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; color: #0A1629; }
.db-th small { font-size: 12px; color: #64748B; }
.db-th > div > small { display: block; margin-top: 2px; }
.db-ts { display: flex; align-items: center; gap: 20px; }
.db-tbig { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.db-tbig b { font-size: 30px; line-height: 38px; font-weight: 700; color: #0A1629; font-variant-numeric: tabular-nums; }
.db-tbig .db-dl { align-self: center; }
.db-tbig small { font-size: 12px; color: #64748B; }
.db-vl { width: 1px; height: 40px; background: #EEF1F4; flex: none; }
.db-cap { display: flex; gap: 20px; }
.db-cap div { display: flex; flex-direction: column; gap: 2px; }
.db-cap b { font-size: 20px; font-weight: 600; color: #0A1629; font-variant-numeric: tabular-nums; }
.db-cap small { font-size: 12px; color: #64748B; white-space: nowrap; }
.db-chart { position: relative; height: 200px; }
.db-ax text { font-size: 12px; fill: #94A3B8; font-family: inherit; }
.db-ttip { position: absolute; transform: translateX(-50%); background: #fff; border: 1px solid #E5E7EB; border-radius: 8px; box-shadow: 0 6px 16px rgba(10, 22, 41, .1); padding: 8px 10px; font-size: 12px; color: #1C3E60; white-space: nowrap; display: flex; flex-direction: column; gap: 2px; }
.db-ttip small { color: #64748B; }
.db-ttip span { display: flex; align-items: center; gap: 6px; }
.db-ttip i { width: 8px; height: 8px; border-radius: 50%; background: #2CA791; }
.db-leg { display: flex; align-items: center; gap: 4px; flex: none; }
.db-leg i { width: 12px; height: 12px; border-radius: 3px; }
.db-leg small { font-size: 11px; color: #94A3B8; margin: 0 2px; }
.db-hm { position: relative; display: grid; grid-template-columns: 28px repeat(11, 1fr); gap: 4px; align-items: center; }
.db-hm i { height: 26px; border-radius: 6px; transition: background .15s; }
.db-hm i.on { outline: 2px solid #0F766E; outline-offset: 1px; }
.db-hd { font-size: 12px; color: #64748B; }
.db-hm small { font-size: 11px; color: #94A3B8; text-align: left; }
.db-htip { position: absolute; z-index: 5; background: #0A1629; color: #fff; font-size: 12px; padding: 4px 8px; border-radius: 6px; white-space: nowrap; pointer-events: none; }

/* 环形图行 */
.db-drow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; min-height: 288px; }
.db-drow.ph { min-height: 288px; }
.db-dcard { display: flex; flex-direction: column; min-height: 288px; position: relative; }
.db-dh { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #EDEFF0; }
.db-dh h3 { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; color: #0A1629; }
.db-link { font-size: 13px; font-weight: 500; color: #0F766E; }
.db-db { flex: 1; display: flex; align-items: center; gap: 18px; padding: 20px; position: relative; }
.db-dn { position: relative; width: 140px; height: 140px; flex: none; }
.db-dc { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.db-dc b { font-size: 20px; font-weight: 700; color: #0A1629; font-variant-numeric: tabular-nums; }
.db-dc small { font-size: 11px; color: #64748B; text-align: center; max-width: 80px; line-height: 1.2; }
.db-lg { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.db-lg > div { display: flex; align-items: center; gap: 8px; font-size: 13px; border-radius: 6px; }
.db-lg i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.db-lg span { flex: 1; min-width: 0; color: #1C3E60; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-lg small { color: #64748B; font-size: 13px; font-variant-numeric: tabular-nums; }
.db-dtip { position: absolute; left: 92px; top: 26px; z-index: 5; background: #fff; border: 1px solid #E5E7EB; border-radius: 8px; box-shadow: 0 6px 16px rgba(10, 22, 41, .12); padding: 6px 10px; display: flex; gap: 6px; align-items: baseline; font-size: 12px; white-space: nowrap; }
.db-dtip b { color: #0A1629; font-weight: 600; } .db-dtip small { color: #64748B; }
.db-qs { flex: 1; display: flex; flex-direction: column; gap: 16px; }
.db-qs > div { display: flex; flex-direction: column; gap: 2px; }
.db-qs small { font-size: 12px; color: #64748B; }
.db-qs b { font-size: 20px; font-weight: 700; color: #0A1629; }
.db-qs em { font-style: normal; font-size: 13px; font-weight: 500; color: #64748B; margin-left: 2px; }
.db-stars { color: #F59E0B; font-size: 14px; letter-spacing: 1px; }

/* 明细抽屉 */
.db-sheet { position: absolute; z-index: 50; right: 0; top: 0; bottom: 0; width: 800px; background: #fff; border-radius: 16px 0 0 16px; box-shadow: -12px 0 32px rgba(10, 22, 41, .12); display: flex; flex-direction: column; animation: db-slide .32s ease; overflow: hidden; }
@keyframes db-slide { from { transform: translateX(60px); opacity: 0; } }
.db-shh { display: flex; align-items: center; justify-content: space-between; padding: 32px 32px 0; }
.db-shh h2 { margin: 0; font-size: 22px; font-weight: 400; color: #0A1629; }
.db-x { width: 40px; height: 40px; border-radius: 8px; background: #F4F9FD; color: #0A1629; display: inline-flex; align-items: center; justify-content: center; opacity: .7; }
.db-rule { margin: 24px 32px; border-bottom: 1px solid #F1F2F4; }
.db-shb { padding: 0 32px 24px; display: flex; flex-direction: column; overflow: hidden; }
.db-shd { margin: 0 0 20px; font-size: 14px; color: #64748B; }
.db-shd b { color: #3DCAB1; font-weight: 600; font-size: 18px; margin: 0 2px; }
.db-stabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid #E5E7EB; }
.db-stabs span { text-align: center; padding: 12px 0; font-size: 16px; font-weight: 500; color: #4B5563; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.db-stabs span.on { color: #3DCAB1; border-color: #3DCAB1; }
.db-gcs { margin-top: 24px; display: flex; flex-direction: column; gap: 20px; }
.db-gc { border: 1px solid #F1F8F4; border-radius: 12px; box-shadow: 0 6px 58px rgba(196, 203, 214, .1); background: #fff; }
.db-gh { display: flex; align-items: flex-start; justify-content: space-between; padding: 18px 26px 8px; }
.db-gh > small { font-size: 16px; color: #718296; flex: none; margin-left: 16px; }
.db-gt { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.db-gt b { font-size: 16px; font-weight: 500; color: #1C3E60; }
.db-tag { min-width: 74px; height: 26px; padding: 0 12px; border-radius: 13px; background: #3DCAB1; color: #fff; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
.db-tag.pkg { background: #7599FD; }
.db-rf { border-radius: 999px; background: #FEF2F2; color: #DC2626; font-size: 12px; padding: 2px 8px; }
.db-gl { font-size: 16px; color: #1C3E60; }
.db-gd { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: #4B5563; }
.db-gtot { padding: 0 27px 14px; font-size: 16px; color: #4B5563; }
.db-gtot b { color: #3DCAB1; font-weight: 500; margin-left: 4px; }
.db-qts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
.db-qt { background: #F8FFFE; border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.db-qt small { font-size: 14px; color: #64748B; }
.db-qt b { font-size: 24px; font-weight: 600; color: #3DCAB1; }
.db-qt em { font-style: normal; font-size: 14px; font-weight: 400; color: #64748B; margin-left: 6px; }
.db-qbox { border: 1px solid #F1F2F4; border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.db-qbox h4, .db-rvt h4 { margin: 0 0 8px; font-size: 16px; font-weight: 500; color: #24242C; }
.db-qd { display: flex; align-items: center; gap: 12px; }
.db-qd > span:first-child { width: 64px; display: flex; align-items: center; gap: 4px; font-size: 14px; color: #64748B; }
.db-qd > span:first-child i { font-style: normal; color: #F9A825; font-size: 12px; }
.db-qbar { flex: 1; height: 8px; border-radius: 999px; background: #F1F2F4; overflow: hidden; }
.db-qbar i { display: block; height: 8px; border-radius: 999px; background: #3DCAB1; }
.db-qd small { width: 64px; text-align: right; font-size: 14px; color: #64748B; }
.db-rvt { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.db-rvt h4 { margin: 0; } .db-rvt small { font-size: 14px; color: #64748B; }
.db-rv { border: 1px solid #F1F8F4; border-radius: 12px; box-shadow: 0 6px 58px rgba(196, 203, 214, .1); padding: 20px 24px; margin-bottom: 16px; }
.db-rvh { display: flex; align-items: center; }
.db-av { width: 40px; height: 40px; border-radius: 50%; background: rgba(61, 202, 177, .1); color: #3DCAB1; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.db-rvn { margin-left: 11px; font-size: 16px; color: #808DA1; white-space: nowrap; }
.db-rs { margin-left: 24px; color: #F9A825; font-size: 14px; letter-spacing: 1px; }
.db-rs i { font-style: normal; color: #E5E7EB; }
.db-rvh > b { margin-left: 8px; font-size: 18px; font-weight: 600; }
.db-rvh > small { margin-left: auto; font-size: 16px; color: #718296; }
.db-rv p { margin: 14px 0 0; background: #F8FFFE; border-radius: 8px; padding: 12px 14px; font-size: 14px; color: #1C3E60; }