:root {
  --bg: #050a14;
  --bg2: #071223;
  --panel: rgba(13, 27, 48, .72);
  --panel-b: rgba(86, 148, 224, .18);
  --txt: #e8f2ff;
  --txt-2: #9fb6d4;
  --txt-3: #6d86a6;
  --blue: #3b8cff;
  --cyan: #4fd8f5;
  --green: #31e0a5;
  --gold: #ffb64d;
  --pink: #ff6b8a;
  --purple: #9d7bff;
  --radius: 14px;
  --shadow: 0 12px 40px rgba(0, 0, 0, .45);
}

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

body {
  font-family: -apple-system, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  background:
    radial-gradient(1200px 700px at 12% -10%, rgba(45, 110, 220, .28), transparent 60%),
    radial-gradient(900px 600px at 100% 0%, rgba(0, 190, 190, .18), transparent 55%),
    radial-gradient(800px 600px at 50% 120%, rgba(120, 70, 220, .18), transparent 60%),
    linear-gradient(180deg, #04080f, #060c17 40%, #04080f);
  color: var(--txt);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(rgba(90, 150, 230, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90, 150, 230, .045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 50% 30%, #000 40%, transparent 85%);
}

#app { position: relative; z-index: 1; padding: 16px 20px 26px; max-width: 1860px; margin: 0 auto; }

/* ---------------------------------------------------------------- 顶栏 */
.topbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 16px; border-radius: var(--radius);
  background: linear-gradient(100deg, rgba(20, 42, 74, .85), rgba(9, 20, 36, .7));
  border: 1px solid var(--panel-b);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(120, 180, 255, .12);
  position: sticky; top: 10px; z-index: 40; backdrop-filter: blur(14px);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand .logo {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(135deg, #2f86ff, #26e2c0); font-weight: 800; font-size: 16px;
  color: #03121f; box-shadow: 0 6px 18px rgba(47, 134, 255, .45);
}
.brand h1 { font-size: 17px; letter-spacing: .5px; font-weight: 700; }
.brand h1 small { display: block; font-size: 10.5px; color: var(--txt-3); letter-spacing: 2.6px; font-weight: 500; margin-top: 2px; }

.filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-left: 6px; }
.seg { display: flex; background: rgba(10, 22, 40, .8); border: 1px solid var(--panel-b); border-radius: 10px; overflow: hidden; }
.seg button {
  background: transparent; border: 0; color: var(--txt-2); padding: 7px 12px; font-size: 12.5px;
  cursor: pointer; transition: .18s; font-family: inherit;
}
.seg button:hover { color: #fff; background: rgba(70, 140, 230, .16); }
.seg button.on { color: #fff; background: linear-gradient(180deg, rgba(59, 140, 255, .55), rgba(59, 140, 255, .25)); box-shadow: inset 0 -2px 0 var(--cyan); }

select, input[type="text"], input[type="date"] {
  background: rgba(10, 22, 40, .85); border: 1px solid var(--panel-b); color: var(--txt);
  border-radius: 9px; padding: 7px 10px; font-size: 12.5px; font-family: inherit; outline: none;
}
select:focus, input:focus { border-color: rgba(90, 180, 255, .6); box-shadow: 0 0 0 3px rgba(59, 140, 255, .16); }

.spacer { flex: 1; }
.actions { display: flex; gap: 8px; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 9px; padding: 8px 13px;
  font-size: 12.5px; font-family: inherit; cursor: pointer; border: 1px solid var(--panel-b);
  background: rgba(20, 40, 68, .8); color: var(--txt); transition: .18s;
}
.btn:hover { transform: translateY(-1px); border-color: rgba(90, 180, 255, .55); box-shadow: 0 6px 18px rgba(0, 60, 140, .35); }
.btn.primary { background: linear-gradient(135deg, #2f86ff, #1f6fe0); border-color: transparent; color: #fff; font-weight: 600; }
.btn.ghost { background: transparent; }
.clock { font-size: 12px; color: var(--txt-3); font-variant-numeric: tabular-nums; min-width: 128px; text-align: right; }

/* ---------------------------------------------------------------- KPI */
.kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin: 16px 0; }
.kpi {
  position: relative; overflow: hidden; padding: 14px 16px 10px; border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(20, 44, 76, .85), rgba(8, 18, 32, .8));
  border: 1px solid var(--panel-b); box-shadow: var(--shadow);
}
.kpi::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120px 60px at 100% 0, var(--accent, #3b8cff)33, transparent 70%);
}
.kpi .k-label { font-size: 12px; color: var(--txt-3); letter-spacing: .6px; display: flex; align-items: center; gap: 6px; }
.kpi .k-label i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent, #3b8cff); box-shadow: 0 0 10px var(--accent, #3b8cff); }
.kpi .k-value { font-size: 27px; font-weight: 750; margin: 6px 0 2px; letter-spacing: -.4px; font-variant-numeric: tabular-nums; }
.kpi .k-value small { font-size: 13px; color: var(--txt-2); font-weight: 500; margin-left: 3px; }
.kpi .k-foot { font-size: 11.5px; color: var(--txt-3); display: flex; justify-content: space-between; align-items: center; }
.kpi canvas { position: absolute; right: 0; bottom: 0; width: 46%; height: 34px; opacity: .75; }
.up { color: var(--green); } .down { color: var(--pink); }

/* ---------------------------------------------------------------- 面板 */
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; }
.card {
  position: relative; border-radius: var(--radius); padding: 12px 14px 6px; overflow: hidden;
  background: linear-gradient(165deg, rgba(17, 34, 58, .86), rgba(7, 15, 28, .82));
  border: 1px solid var(--panel-b); box-shadow: var(--shadow);
}
.card::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent, #3b8cff), transparent);
  opacity: .8;
}
.card-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.card-h h3 { font-size: 13.5px; font-weight: 650; letter-spacing: .5px; display: flex; align-items: center; gap: 8px; }
.card-h h3::before { content: ""; width: 3px; height: 13px; border-radius: 2px; background: var(--accent, #3b8cff); box-shadow: 0 0 10px var(--accent, #3b8cff); }
.card-h .hint { font-size: 11.5px; color: var(--txt-3); }
.chart-box { position: relative; width: 100%; }
.chart-box canvas { display: block; width: 100%; height: 100%; }
.tip {
  position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; transition: opacity .12s;
  background: rgba(6, 16, 30, .95); border: 1px solid rgba(90, 160, 240, .35); border-radius: 9px;
  padding: 8px 10px; font-size: 12px; box-shadow: 0 10px 26px rgba(0, 0, 0, .55);
  min-width: 130px; z-index: 20; backdrop-filter: blur(6px);
}
.tip .tip-h { color: #cfe6ff; font-weight: 600; margin-bottom: 5px; font-size: 12px; }
.tip .tip-r { display: flex; align-items: center; gap: 6px; color: var(--txt-2); line-height: 1.7; }
.tip .tip-r i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.tip .tip-r b { margin-left: auto; color: #fff; font-variant-numeric: tabular-nums; }

#cTrend { height: 300px; }
#cDonut { height: 244px; }
#cAcc { height: 244px; }
#cScatter { height: 244px; }

/* ---------------------------------------------------------------- 表格 */
.table-wrap { max-height: 420px; overflow: auto; margin: 4px -4px 0; }
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
thead th {
  position: sticky; top: 0; z-index: 2; background: #0c1c31; color: var(--txt-2);
  font-weight: 600; text-align: left; padding: 9px 10px; border-bottom: 1px solid rgba(90, 150, 220, .22);
  white-space: nowrap; cursor: pointer; user-select: none; font-size: 12px;
}
thead th:hover { color: #fff; }
thead th.num, tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody td { padding: 8px 10px; border-bottom: 1px solid rgba(80, 130, 190, .09); color: var(--txt-2); }
tbody tr:hover td { background: rgba(60, 130, 220, .10); color: var(--txt); }
tbody td.title { color: var(--txt); max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag { display: inline-block; padding: 1px 7px; border-radius: 20px; font-size: 11px; border: 1px solid; }
.tag.demo { color: var(--gold); border-color: rgba(255, 182, 77, .45); background: rgba(255, 182, 77, .1); }
.tag.imp { color: var(--green); border-color: rgba(49, 224, 165, .45); background: rgba(49, 224, 165, .1); }
.rank { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; font-size: 11px; background: rgba(90, 150, 230, .16); color: #cfe4ff; }

.pager { display: flex; align-items: center; gap: 8px; justify-content: flex-end; padding: 10px 2px 6px; font-size: 12px; color: var(--txt-3); }
.pager button { background: rgba(20, 40, 68, .8); border: 1px solid var(--panel-b); color: var(--txt); border-radius: 7px; padding: 4px 10px; cursor: pointer; font-family: inherit; font-size: 12px; }
.pager button:disabled { opacity: .35; cursor: default; }

/* ---------------------------------------------------------------- 水印层 */
#wm {
  position: fixed; inset: 0; z-index: 9990; pointer-events: none; opacity: .5;
  background-repeat: repeat; mix-blend-mode: screen;
}
#wmTip { position: fixed; right: 18px; bottom: 16px; z-index: 9991; font-size: 11px; color: rgba(150, 180, 215, .55); pointer-events: none; }

/* ---------------------------------------------------------------- 弹层/提示 */
.mask {
  position: fixed; inset: 0; background: rgba(2, 8, 16, .72); backdrop-filter: blur(6px);
  display: none; place-items: center; z-index: 9995;
}
.mask.show { display: grid; }
.modal {
  width: min(520px, 92vw); border-radius: 16px; padding: 20px 22px;
  background: linear-gradient(165deg, #0d1e34, #071322); border: 1px solid rgba(90, 160, 240, .3);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .7);
}
.modal h2 { font-size: 16px; margin-bottom: 6px; }
.modal p { font-size: 12.5px; color: var(--txt-3); line-height: 1.7; margin-bottom: 14px; }
.drop {
  border: 1.5px dashed rgba(90, 160, 240, .45); border-radius: 12px; padding: 26px; text-align: center;
  color: var(--txt-2); font-size: 13px; cursor: pointer; transition: .18s; background: rgba(20, 44, 76, .3);
}
.drop.hot { border-color: var(--cyan); background: rgba(60, 150, 255, .14); color: #fff; }
.modal .row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.progress { height: 4px; border-radius: 4px; background: rgba(90, 150, 230, .18); overflow: hidden; margin-top: 14px; display: none; }
.progress.on { display: block; }
.progress > i { display: block; height: 100%; width: 30%; border-radius: 4px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); animation: run 1.1s linear infinite; }
@keyframes run { from { transform: translateX(-100%); } to { transform: translateX(400%); } }

#toast { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast {
  padding: 9px 16px; border-radius: 10px; font-size: 13px; color: #eaf4ff;
  background: rgba(12, 30, 52, .96); border: 1px solid rgba(90, 170, 250, .45);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .5); animation: pop .25s ease;
}
.toast.err { border-color: rgba(255, 107, 138, .55); }
.toast.ok { border-color: rgba(49, 224, 165, .55); }
@keyframes pop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

@media (max-width: 1500px) { .kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1080px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .grid > * { grid-column: span 12 !important; }
}

/* ---------------------------------------------------------------- 验证码闸门 */
.gate { position: fixed; inset: 0; z-index: 99998; display: grid; place-items: center;
  background: rgba(3, 8, 16, .93); backdrop-filter: blur(10px); }
.gate[hidden] { display: none; }
.gate-card { width: min(430px, 92vw); padding: 26px 26px 18px; border-radius: 18px; text-align: center;
  background: linear-gradient(165deg, #0e2138, #071322); border: 1px solid rgba(90, 160, 240, .32);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .7); }
.gate-ico { font-size: 26px; }
.gate-card h2 { font-size: 18px; margin: 6px 0 8px; }
.gate-card p { font-size: 12.5px; color: var(--txt-3); line-height: 1.7; margin-bottom: 14px; }
.cap-row { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 12px; }
.cap-row img { height: 44px; border-radius: 8px; cursor: pointer; border: 1px solid rgba(90, 160, 240, .3); background: #0c1a2c; }
.cap-math { height: 44px; line-height: 44px; padding: 0 16px; border-radius: 8px; background: #0c1a2c;
  border: 1px solid rgba(90, 160, 240, .3); color: #cfe6ff; letter-spacing: 2px; }
#capInput { width: 100%; text-align: center; padding: 10px; border-radius: 10px; letter-spacing: 4px; }
.gate-err { color: var(--pink); font-size: 12px; min-height: 18px; margin-top: 6px; }
.gate-btn { width: 100%; justify-content: center; margin-top: 4px; padding: 10px; }
.gate-foot { margin-top: 14px; font-size: 11.5px; color: var(--txt-3); display: flex; gap: 8px; align-items: center; justify-content: center; }
.gate-foot input { background: transparent; border: 1px solid rgba(90, 160, 240, .25); border-radius: 8px;
  padding: 5px 8px; color: var(--txt); font-size: 12px; width: 150px; }

/* ---------------------------------------------------------------- 日期查询 */
.daterange { display: flex; align-items: center; gap: 4px; color: var(--txt-3); font-size: 12px; }
.daterange input { width: 132px; padding: 6px 8px; }
td.mono { font-variant-numeric: tabular-nums; font-size: 11.5px; color: #9fb6d4;
  max-width: 176px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td.date { font-variant-numeric: tabular-nums; color: #cfe4ff; }

/* ---------------------------------------------------------------- 后台页 */
.admin { max-width: 1180px; margin: 0 auto; padding: 18px 20px 40px; }
.admin h2 { font-size: 15px; margin-bottom: 10px; }
.panel { border-radius: var(--radius); padding: 16px 18px; margin-bottom: 14px;
  background: linear-gradient(165deg, rgba(17, 34, 58, .86), rgba(7, 15, 28, .82));
  border: 1px solid var(--panel-b); box-shadow: var(--shadow); }
.panel .row2 { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.stat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.stat > div { background: rgba(12, 26, 44, .7); border: 1px solid var(--panel-b); border-radius: 10px; padding: 10px 12px; }
.stat b { display: block; font-size: 20px; margin-top: 2px; }
.stat span { font-size: 11.5px; color: var(--txt-3); }
.filelist { font-size: 12.5px; color: var(--txt-2); line-height: 1.9; }
.filelist code { color: #9fd7ff; }

/* ---------------------------------------------------------------- 三栏布局（左筛选 / 中曲线 / 右日期折叠） */
.layout { display: grid; grid-template-columns: 292px minmax(0, 1fr) 384px; gap: 12px; align-items: start; }
.col-left, .col-right { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.panel-pad { padding: 12px 14px 16px; }
.filters-v { display: flex; flex-direction: column; gap: 9px; }
.filters-v label { display: block; font-size: 11.5px; color: var(--txt-3); margin-bottom: 4px; letter-spacing: .3px; }
.filters-v select, .filters-v input[type="text"], .filters-v input[type="date"] { width: 100%; }
.hint-inline { color: #51708f; font-size: 10.5px; }
.seg-full { width: 100%; }
.seg-full button { flex: 1; padding: 6px 0; font-size: 12px; }
.btn-block { width: 100%; justify-content: center; margin-top: 2px; padding: 9px; }

.kpi-mini { position: relative; overflow: hidden; padding: 13px 15px 8px; border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(20, 44, 76, .88), rgba(8, 18, 32, .82));
  border: 1px solid var(--panel-b); box-shadow: var(--shadow); }
.kpi-mini::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(130px 60px at 100% 0, var(--accent, #3b8cff)33, transparent 70%); }
.kpi-mini .k-label { font-size: 12px; color: var(--txt-3); display: flex; align-items: center; gap: 6px; }
.kpi-mini .k-label i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.kpi-mini .k-value { font-size: 28px; font-weight: 750; margin: 5px 0 2px; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.kpi-mini .k-foot { font-size: 11.5px; color: var(--txt-3); padding-bottom: 6px; }
.kpi-mini canvas { position: absolute; right: 0; bottom: 0; width: 55%; height: 32px; opacity: .7; }

.center-card { height: calc(100vh - 150px); min-height: 420px; display: flex; flex-direction: column; }
.chart-flex { flex: 1; min-height: 220px; }
#cTrend { width: 100%; height: 100%; }

.day-list { flex: 1; overflow: auto; margin: 2px -6px 6px; padding-right: 4px; }
.day-item { border-bottom: 1px solid rgba(80, 130, 190, .12); }
.day-head { display: flex; align-items: center; gap: 8px; padding: 10px 6px; cursor: pointer; border-radius: 8px; }
.day-head:hover { background: rgba(60, 130, 220, .10); }
.day-head .caret { color: var(--txt-3); font-size: 9px; transition: transform .2s; }
.day-item.open .caret { transform: rotate(90deg); color: var(--cyan); }
.day-head .d { font-size: 13px; color: #d7e9ff; font-variant-numeric: tabular-nums; }
.day-head .cnt { font-size: 10.5px; color: var(--txt-3); }
.day-head .r { margin-left: auto; font-size: 13px; font-weight: 650; color: #8ee9c6; font-variant-numeric: tabular-nums; }
.day-body { display: none; padding: 0 6px 10px 18px; }
.day-item.open .day-body { display: block; }
.proj-row { padding: 8px 10px; margin-bottom: 6px; border-radius: 9px;
  background: rgba(12, 26, 44, .62); border: 1px solid var(--panel-b); }
.proj-row .name { font-size: 12.5px; color: #e8f2ff; margin-bottom: 5px; display: flex; align-items: center; gap: 6px; }
.proj-row .pid { font-size: 10.5px; color: var(--txt-3); font-variant-numeric: tabular-nums; }
.proj-row .nums { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--txt-3); }
.proj-row .nums b { color: #eaf4ff; font-variant-numeric: tabular-nums; font-weight: 600; }
.day-list::-webkit-scrollbar { width: 6px; }
.day-list::-webkit-scrollbar-thumb { background: rgba(90, 150, 220, .3); border-radius: 3px; }

@media (max-width: 1400px) {
  .layout { grid-template-columns: 264px minmax(0, 1fr) 330px; }
}
@media (max-width: 1180px) {
  .layout { grid-template-columns: 1fr; }
  .center-card { height: 460px; }
}
/* 左栏过高时可滚动（小屏幕 / 1080p 以下） */
.col-left { max-height: calc(100vh - 132px); overflow: auto; }
.col-left::-webkit-scrollbar { width: 6px; }
.col-left::-webkit-scrollbar-thumb { background: rgba(90, 150, 220, .3); border-radius: 3px; }
.kpi-mini .k-value { font-size: 26px; }
@media (max-height: 940px) {
  .filters-v { gap: 7px; }
  .kpi-mini { padding: 10px 14px 6px; }
  .kpi-mini .k-value { font-size: 23px; }
}
/* 防止 flex 挤压卡片：保持自然高度，超出时整列滚动 */
.col-left > *, .col-right > * { flex: none; }
.col-left { scrollbar-width: thin; }
/* ---------------------------------------------------------------- 三栏（新：中栏放三个总量 + 曲线） */
.layout { grid-template-columns: 264px minmax(0, 1fr) 372px; }
.col-center { display: flex; flex-direction: column; gap: 12px; height: calc(100vh - 124px); min-height: 540px; }
.kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.kpi-big { position: relative; overflow: hidden; padding: 18px 20px 12px; border-radius: 16px;
  background: linear-gradient(160deg, rgba(24, 50, 84, .92), rgba(8, 18, 32, .86));
  border: 1px solid var(--panel-b); box-shadow: var(--shadow); }
.kpi-big::before { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: .95; }
.kpi-big::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(200px 100px at 100% 0, var(--accent)33, transparent 70%); }
.kpi-big .k-label { position: relative; font-size: 13px; color: var(--txt-2); display: flex; align-items: center; gap: 7px; letter-spacing: .6px; }
.kpi-big .k-label i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.kpi-big .k-value { position: relative; font-size: 40px; font-weight: 800; letter-spacing: -1.2px; margin: 8px 0 4px;
  font-variant-numeric: tabular-nums; color: #eaf5ff; text-shadow: 0 0 24px rgba(90, 170, 255, .35); }
.kpi-big .k-foot { position: relative; font-size: 12px; color: var(--txt-3); }
.kpi-big canvas { position: absolute; right: 0; bottom: 0; width: 58%; height: 44px; opacity: .5; }
.chart-card { flex: 1; min-height: 320px; display: flex; flex-direction: column; }
@media (max-width: 1400px) {
  .layout { grid-template-columns: 246px minmax(0, 1fr) 330px; }
  .kpi-big .k-value { font-size: 32px; }
}
@media (max-width: 1180px) {
  .col-center { height: auto; }
  .kpi-row { grid-template-columns: 1fr; }
  .chart-card { height: 420px; }
}
/* 左栏与曲线卡片底部对齐（高度撑满整列） */
.col-left { height: calc(100vh - 124px); max-height: none; overflow: auto; }
.col-left > .card { flex: 1 1 auto; display: flex; flex-direction: column; }
.col-left .filters-v { flex: 1 1 auto; }
.col-left #btnQuery { margin-top: auto; }
@media (max-width: 1180px) { .col-left { height: auto; } }
/* 示例数据提示条 + 已应用条件 */
.notice { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
  padding: 8px 12px; border-radius: 10px; font-size: 12.5px; color: #ffd699;
  background: rgba(255, 182, 77, .10); border: 1px solid rgba(255, 182, 77, .40); }
.notice[hidden] { display: none; }
.notice b { color: #ffb64d; }
.notice .btn { padding: 4px 10px; font-size: 12px; }
.applied { font-size: 11.5px; color: var(--txt-3); padding: 2px 0 8px; letter-spacing: .2px; }
.applied.stale { color: #ffb64d; }
.tag.mixed { color: #9fd7ff; border-color: rgba(90, 170, 250, .5); background: rgba(90, 170, 250, .12); }
.day-head .src { margin-left: 2px; transform: scale(.92); transform-origin: left center; }
/* ---------------------------------------------------------------- 左栏：筛选 + 收益排行榜 */
.col-left { gap: 12px; }
.card-filters { flex: 0 0 auto; }
.card-board { flex: 1 1 auto; min-height: 190px; display: flex; flex-direction: column; padding-bottom: 8px; }
.board-list { flex: 1 1 auto; overflow: auto; margin: 2px -4px 0; padding-right: 2px; }
.board-list::-webkit-scrollbar { width: 6px; }
.board-list::-webkit-scrollbar-thumb { background: rgba(90, 150, 220, .3); border-radius: 3px; }

.lb-row { display: flex; align-items: center; gap: 9px; padding: 7px 6px; border-radius: 9px; cursor: pointer; transition: .16s; }
.lb-row:hover { background: rgba(60, 130, 220, .14); }
.lb-row .rk { flex: none; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center;
  font-size: 11px; color: #b9d3ee; background: rgba(90, 150, 230, .14); font-variant-numeric: tabular-nums; }
.lb-row .rk.top1 { background: linear-gradient(135deg, #ffd166, #ff9f1c); color: #2a1a00; font-weight: 700; }
.lb-row .rk.top2 { background: linear-gradient(135deg, #d8e4f0, #9fb3c8); color: #17222e; font-weight: 700; }
.lb-row .rk.top3 { background: linear-gradient(135deg, #e6a86b, #bf7a3c); color: #201003; font-weight: 700; }
.lb-row .who { flex: 1 1 auto; min-width: 0; }
.lb-row .nick { font-size: 12.5px; color: #e8f2ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-row .sub { font-size: 10.5px; color: var(--txt-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.lb-row .bar { height: 3px; border-radius: 2px; background: rgba(90, 150, 230, .12); margin-top: 4px; overflow: hidden; }
.lb-row .bar i { display: block; height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, rgba(59, 140, 255, .5), #4fd8f5); }
.lb-row .amt { flex: none; font-size: 12.5px; font-weight: 650; color: #8ee9c6; font-variant-numeric: tabular-nums; }
/* 排行榜行高微调 + 清除筛选 */
.lb-row { padding: 8px 6px; }
.lb-row .sub { line-height: 1.4; margin-top: 2px; }
.lb-row .bar { margin-top: 5px; }
.applied .clear-f { color: #4fd8f5; text-decoration: none; cursor: pointer; margin-left: 4px; }
.applied .clear-f:hover { text-decoration: underline; }
/* 修正：左栏两张卡的高度分配（选择器优先级要压过 .col-left > .card） */
.col-left > .card.card-filters { flex: 0 0 auto; height: auto; overflow: visible; }
.col-left > .card.card-board { flex: 1 1 auto; min-height: 190px; overflow: hidden; }
.col-left .filters-v { flex: 0 0 auto; }
.col-left #btnQuery { margin-top: 6px; }
/* 登录表单 + 当前用户 */
.gate-card input { width: 100%; margin-bottom: 8px; padding: 9px 10px; text-align: left; }
#capInput { text-align: center !important; letter-spacing: 3px; }
.whoami { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--txt-2); }
.whoami em { display: inline-block; margin-left: 6px; font-style: normal; font-size: 10.5px;
  padding: 1px 6px; border-radius: 20px; color: #9fd7ff; border: 1px solid rgba(90, 170, 250, .45);
  background: rgba(90, 170, 250, .12); }
.whoami a { color: var(--txt-3); cursor: pointer; text-decoration: none; }
.whoami a:hover { color: var(--cyan); }
/* 分销商名下视频号面板 */
tr.acct-panel > td { padding: 0 !important; border-bottom: 1px solid rgba(80,130,190,.16) !important; }
tr.acct-panel[hidden] { display: none; }
.acct-panel-in { padding: 12px 14px 14px; background: rgba(9, 20, 36, .72); }
.acct-panel-in textarea { background: rgba(10, 22, 40, .85); border: 1px solid var(--panel-b);
  border-radius: 8px; color: var(--txt); padding: 8px; font-size: 12px; font-family: inherit; outline: none; }
.acct-panel-in textarea:focus { border-color: rgba(90, 180, 255, .6); }
.acct-panel-in table { font-size: 12px; }
.acct-panel-in table th { background: rgba(12, 28, 48, .9); }
/* 视频号弹窗 */
.acct-modal { width: min(640px, 94vw) !important; }
.ac-form { display: flex; gap: 8px; margin-bottom: 8px; align-items: flex-start; }
.ac-form input { flex: 1 1 auto; }
.ac-form textarea { flex: 1 1 auto; height: 58px; background: rgba(10, 22, 40, .85);
  border: 1px solid var(--panel-b); border-radius: 9px; color: var(--txt); padding: 8px 10px;
  font-size: 12.5px; font-family: inherit; outline: none; resize: vertical; }
.ac-form textarea:focus { border-color: rgba(90, 180, 255, .6); }
.acct-modal .modal { }
.btn:disabled, .btn[disabled] { opacity: .35; cursor: not-allowed; }
.btn:disabled:hover { transform: none; box-shadow: none; border-color: var(--panel-b); }
/* 「＋ 视频号」按钮更显眼 */
.btn.accent { background: rgba(79, 216, 245, .14); border-color: rgba(79, 216, 245, .55); color: #bfefff; font-weight: 600; }
.btn.accent:hover { background: rgba(79, 216, 245, .24); border-color: #4fd8f5; box-shadow: 0 6px 18px rgba(0, 160, 200, .28); }
.whoami .me { color: #d7e9ff; }
/* ---------------------------------------------------------------- 查询条件：提高对比度（原来太暗） */
.filters-v label { color: #9db8d6; font-weight: 500; }
.filters-v input[type="text"], .filters-v input[type="date"] {
  color: #eaf5ff; background: rgba(14, 32, 54, .96);
  border: 1px solid rgba(96, 168, 246, .48);
  font-weight: 500;
}
.filters-v input[type="text"]::placeholder { color: #7c95b2; }
.filters-v input[type="date"]:hover, .filters-v input[type="text"]:hover { border-color: rgba(120, 200, 255, .7); }
.filters-v input[type="date"]:focus, .filters-v input[type="text"]:focus {
  border-color: #4fd8f5; box-shadow: 0 0 0 3px rgba(79, 216, 245, .18); background: rgba(18, 40, 66, .98);
}
.filters-v input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.7); opacity: .9; cursor: pointer;
}
.seg button { color: #cfe0f5; }
.seg button.on { color: #fff; }
.hint-inline { color: #7fa0c4; }

/* 排行榜：0 收益也显示（弱化但可读） */
.lb-row.is-zero .nick { color: #b7c6d8; }
.lb-row.is-zero .sub { color: #6d86a6; }
.lb-row.is-zero .rk { background: rgba(90, 150, 230, .08); color: #8fa6bd; }
.lb-row .amt.zero { color: #7f93a9; font-weight: 500; }
.lb-row.is-zero .bar { background: rgba(90, 150, 230, .07); }
/* 排行榜标题/提示不换行（追加样式） */
.card-board .card-h h3 { white-space: nowrap; }
.card-board .card-h .hint { max-width: 64%; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; text-align: right; }

/* 排行榜：0 收益分隔线 */
.lb-divider { margin: 8px 2px 6px; padding: 5px 8px; border-radius: 7px; font-size: 11px;
  color: #ffb64d; background: rgba(255, 182, 77, .10); border: 1px solid rgba(255, 182, 77, .28); text-align: center; }

/* 查询 / 清除筛选 并排一行 */
.btn-row { display: flex; gap: 8px; margin-top: 2px; }
.btn-row .btn { flex: 1 1 0; justify-content: center; padding: 9px 8px; }
.btn.clear-btn { border-color: rgba(255, 107, 138, .45); color: #ffc2ce; background: rgba(255, 107, 138, .08); }
.btn.clear-btn:hover:not(:disabled) { border-color: #ff6b8a; background: rgba(255, 107, 138, .18); color: #fff;
  box-shadow: 0 6px 18px rgba(200, 40, 80, .25); }

/* 清除筛选：禁用态也别太虚 */
.btn.clear-btn:disabled { opacity: .5; border-color: rgba(255, 107, 138, .3); color: #d9a7b2; }

/* ---------------------------------------------------------------- 手机 / 窄屏自适应 */
@media (max-width: 900px) {
  #app { padding: 10px 10px 18px; }
  .topbar { position: static; padding: 10px 12px; gap: 10px; }
  .brand h1 { font-size: 15px; }
  .brand small { font-size: 9.5px; letter-spacing: 1.6px; }
  .actions { flex-wrap: wrap; gap: 6px; width: 100%; justify-content: flex-start; }
  .actions .clock { display: none; }
  .whoami { margin-right: auto; font-size: 11.5px; }

  .layout { grid-template-columns: 1fr; gap: 10px; }
  .col-center { order: -1; height: auto !important; min-height: 0; }
  .col-left { height: auto !important; max-height: none; overflow: visible; }
  .col-left > .card.card-filters,
  .col-left > .card.card-board,
  .col-right > .card,
  .center-card { height: auto !important; min-height: 0; }

  .kpi-row { grid-template-columns: 1fr; gap: 8px; }
  .kpi-big { padding: 12px 14px 10px; }
  .kpi-big .k-value { font-size: 26px; letter-spacing: -.6px; }
  .kpi-big canvas { height: 36px; opacity: .45; }

  .chart-card { height: 340px; }
  .day-list { max-height: 380px; }
  .board-list { max-height: 420px; }

  .filters-v { gap: 8px; }
  .filters-v input, .filters-v select { font-size: 14px; padding: 9px 10px; }
  .seg-full button { font-size: 13px; padding: 8px 0; }
  .btn { padding: 9px 12px; font-size: 13.5px; }
  .btn-row .btn { padding: 10px 8px; }

  .modal, .acct-modal { width: 94vw !important; padding: 16px 16px 12px; }
  .modal p { font-size: 12px; }
  .ac-form { flex-direction: column; }
  .ac-form textarea, .ac-form input { width: 100% !important; }
  .gate-card { width: 92vw; padding: 20px 18px 14px; }
  .notice { font-size: 11.5px; gap: 6px; }
  .notice .btn { padding: 5px 9px; font-size: 11.5px; }

  .card-h h3 { font-size: 13px; }
  .card-board .card-h .hint { max-width: 52%; }
}

@media (max-width: 480px) {
  .brand small { display: none; }
  .kpi-big .k-value { font-size: 23px; }
  .chart-card { height: 300px; }
  .lb-row { gap: 7px; padding: 7px 4px; }
  .lb-row .nick { font-size: 12px; }
  .lb-row .sub { font-size: 10px; }
  .lb-row .amt { font-size: 12px; }
  .btn-row { gap: 6px; }
  .btn { padding: 8px 10px; font-size: 13px; }
  .day-head .cnt { display: none; }
}

/* 后台页同样自适应 */
@media (max-width: 900px) {
  .admin { padding: 10px 10px 24px; }
  .admin .topbar { position: static; }
  .panel { padding: 12px 12px; }
  .stat { grid-template-columns: repeat(2, 1fr) !important; }
  .form-row input, .form-row select { width: 100% !important; }
  .form-row { flex-direction: column; align-items: stretch; }
  .table-wrap { overflow-x: auto; }
  table { font-size: 11.5px; }
  thead th, tbody td { padding: 7px 6px; }
  .acct-panel-in { padding: 10px; }
  .acct-panel-in textarea { width: 100% !important; }
  .acct-panel-in .form-row { flex-direction: column; }
}

/* ---------------------------------------------------------------- 移动端细节修正 */
.card-h .hint { max-width: 58%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
@media (max-width: 900px) {
  .admin .clock { display: none; }
  .admin .topbar .actions { width: 100%; justify-content: flex-end; }
  .stat > div b { font-size: 15px; overflow-wrap: anywhere; }
  #app, .admin { overflow-x: hidden; }
  .gate-card h2 { font-size: 16px; }
  .toast { font-size: 12.5px; max-width: 92vw; text-align: center; }
}

/* 弹窗在手机上必须完全贴合视口 */
@media (max-width: 900px) {
  .mask { padding: 10px; }
  .modal, .acct-modal { width: 100% !important; max-width: 100% !important; padding: 14px 14px 10px !important; }
  .modal h2 { font-size: 15.5px; }
  .modal p { font-size: 11.5px; line-height: 1.65; }
  .acct-modal .table-wrap { width: 100%; margin: 8px 0 0; }
  .acct-modal table { min-width: 320px; }
  .acct-modal thead th, .acct-modal tbody td { padding: 7px 5px; font-size: 11.5px; }
}

/* 手机上的弹窗：底部抽屉式，宽度锁死 100vw */
@media (max-width: 900px) {
  .mask { padding: 0; place-items: end stretch; align-content: end; }
  .modal, .acct-modal {
    width: 100vw !important; max-width: 100vw !important; min-width: 0 !important;
    border-radius: 16px 16px 0 0 !important; max-height: 90vh; overflow-y: auto; overflow-x: hidden;
    padding: 16px 14px 14px !important;
  }
  .modal p, .modal h2, .acct-modal p { max-width: 100%; word-break: break-word; }
  .acct-modal .table-wrap { width: 100%; max-width: 100%; margin: 8px 0 0; }
  .acct-modal .ac-form { width: 100%; max-width: 100%; }
  .acct-modal .ac-form input, .acct-modal .ac-form textarea { width: 100% !important; }
}

/* 手机弹窗：flex 底部抽屉，宽度严格等于视口减去边距 */
@media (max-width: 900px) {
  .mask { display: flex !important; align-items: flex-end; justify-content: center;
    padding: 0 12px 0 !important; }
  .modal, .acct-modal {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    margin: 0 !important; border-radius: 16px 16px 0 0 !important;
    max-height: 88vh; overflow-y: auto; overflow-x: hidden;
    padding: 16px 14px 16px !important;
  }
  .modal *, .acct-modal * { max-width: 100%; }
  .modal p { word-break: break-word; }
  .acct-modal .table-wrap { width: 100%; margin: 8px 0 0; }
}

/* 修正：手机端 .mask 默认必须隐藏，只有 .show 时才是底部抽屉 */
@media (max-width: 900px) {
  .mask { display: none !important; padding: 0 !important; }
  .mask.show { display: flex !important; align-items: flex-end; justify-content: center;
    padding: 0 12px 0 !important; }
}

/* 排行榜：选中态（主账号点了哪个分销商） */
.lb-row.is-active { background: rgba(79, 216, 245, .12); box-shadow: inset 0 0 0 1px rgba(79, 216, 245, .45); }
.lb-row.is-active .nick { color: #8ef0ff; }
.lb-row.is-active .rk { background: rgba(79, 216, 245, .25); color: #d8fbff; }

/* 视频号批量导入提示 */
.ac-tip { font-size: 11px; color: var(--txt-3); line-height: 1.6; margin: -2px 0 8px; }
.ac-tip code { color: #9fd7ff; background: rgba(90, 170, 250, .1); padding: 0 3px; border-radius: 3px; }
/* 批量粘贴提示：两行式 */
.ac-tip { font-size: 11.5px; color: var(--txt-3); line-height: 1.9; margin: -2px 0 8px; }
.ac-tip code { color: #9fd7ff; background: rgba(90, 170, 250, .1); padding: 1px 5px; border-radius: 4px;
  font-family: Consolas, "Courier New", monospace; letter-spacing: .5px; }
.ac-tip .ac-eg { color: #7f9cb8; }
/* 收入构成小卡（前端看板） */
.kpi-row-sub { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 10px; }
.kpi-sub {
  position: relative; padding: 14px 16px 12px; border-radius: 14px; overflow: hidden;
  background: linear-gradient(160deg, rgba(22, 34, 54, .92), rgba(14, 22, 36, .96));
  border: 1px solid rgba(120, 170, 220, .14);
}
.kpi-sub::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent, #4fd8f5); opacity: .85;
}
.kpi-sub .k-label { font-size: 12.5px; color: var(--txt-2); display: flex; align-items: center; gap: 7px; }
.kpi-sub .k-label i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent, #4fd8f5);
  box-shadow: 0 0 8px var(--accent, #4fd8f5); }
.kpi-sub .k-value-s { font-size: 26px; font-weight: 700; letter-spacing: .3px; margin: 6px 0 4px;
  color: #eaf4ff; font-variant-numeric: tabular-nums; }
.kpi-sub .k-foot { font-size: 11.5px; color: var(--txt-3); line-height: 1.5; }
@media (max-width: 900px) {
  .kpi-row-sub { grid-template-columns: 1fr; }
  .kpi-sub .k-value-s { font-size: 22px; }
}
/* [hidden] 要能压过 .kpi-row 的 display:grid */
.kpi-row-sub[hidden] { display: none !important; }
/* ---------------- 中间明细卡 ---------------- */
.detail-card { margin-bottom: 12px; }
.detail-card .card-h { display: flex; align-items: center; gap: 10px; }
.detail-card .card-h h3 { margin: 0; font-size: 14px; }
.detail-card .d-cnt { font-size: 11.5px; color: var(--txt-3); margin-left: auto; }
.detail-card .icon-btn {
  width: 26px; height: 26px; border-radius: 8px; border: 1px solid rgba(120,170,220,.2);
  background: rgba(16,26,42,.9); color: var(--txt-2); cursor: pointer; line-height: 1;
}
.detail-card .icon-btn:hover { color: #ff9c9c; border-color: rgba(255,120,120,.45); }
.detail-body { padding: 0 12px 12px; }
.d-table-wrap { max-height: 380px; overflow: auto; }
.dtable { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; }
.dtable thead th {
  position: sticky; top: 0; z-index: 2; white-space: nowrap; cursor: pointer; user-select: none;
  background: #101c2e; color: #9fb6cf; font-weight: 600; text-align: left;
  padding: 8px 10px; border-bottom: 1px solid rgba(120,170,220,.16);
}
.dtable thead th.num { text-align: right; }
.dtable thead th i { font-style: normal; opacity: .35; margin-left: 4px; font-size: 10px; }
.dtable thead th.on { color: #8ef0ff; }
.dtable thead th.on i { opacity: 1; }
.dtable thead th:hover { color: #cfeaff; }
.dtable tbody td {
  padding: 7px 10px; border-bottom: 1px solid rgba(120,170,220,.07);
  color: #d9e6f5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px;
}
.dtable tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }

.dtable tbody tr:hover td { background: rgba(79,216,245,.06); }
.detail-body canvas { width: 100%; height: 360px; display: block; }
.seg { display: inline-flex; border: 1px solid rgba(120,170,220,.2); border-radius: 9px; overflow: hidden; }
.seg button {
  padding: 4px 12px; font-size: 12px; background: transparent; border: 0; color: var(--txt-3); cursor: pointer;
}
.seg button.on { background: rgba(79,216,245,.16); color: #9ceaff; }
@media (max-width: 900px) {
  .d-table-wrap { max-height: 300px; }
  .dtable { font-size: 11.5px; }
}
.dtable tbody td.dim { color: #5d748c; }
/* 明细表：更紧凑 + 横向滚动条可见 */
.d-tip { font-size: 11px; color: var(--txt-3); margin: 0 0 6px; }
.dtable { font-size: 11.5px; }
.dtable thead th { padding: 7px 8px; }
.dtable tbody td { padding: 6px 8px; }
.d-table-wrap { scrollbar-width: thin; }
.d-table-wrap::-webkit-scrollbar { height: 9px; width: 9px; }
.d-table-wrap::-webkit-scrollbar-thumb { background: rgba(120,170,220,.28); border-radius: 6px; }
.d-table-wrap::-webkit-scrollbar-track { background: transparent; }
/* 明细表定宽 + 省略号 */
.dtable { table-layout: fixed; width: 100%; }
.dtable thead th, .dtable tbody td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dtable thead th { max-width: none; }
/* hidden 要压得过 .card 的 display */
.card[hidden] { display: none !important; }
/* 明细里 canvas / 表格的 hidden 必须真的隐藏（否则会和图表叠在一起） */
.detail-body canvas[hidden] { display: none !important; }
.d-table-wrap[hidden] { display: none !important; }
/* 明细卡撑满中间栏（不要下面留一大片空白） */
#detailCard { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#detailCard[hidden] { display: none !important; }
#detailCard .detail-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#detailCard .d-table-wrap { flex: 1 1 auto; min-height: 0; max-height: none; }
#detailCard .detail-body canvas { flex: 1 1 auto; min-height: 240px; height: auto; }
@media (max-width: 900px) {
  #detailCard { flex: 0 0 auto; }
  #detailCard .d-table-wrap { max-height: 320px; }
}
/* 右侧「按日期」：点击提示 + 可点行的视觉反馈 */
.day-tip {
  font-size: 11px; color: #7fa6c8; background: rgba(79, 216, 245, .07);
  border: 1px dashed rgba(79, 216, 245, .22); border-radius: 8px;
  padding: 6px 9px; margin: 0 10px 8px; line-height: 1.5;
}
.proj-row { cursor: pointer; position: relative; transition: background .15s, box-shadow .15s; }
.proj-row::after {
  content: "›"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  color: #4fd8f5; opacity: 0; font-size: 16px; transition: opacity .15s, right .15s;
}
.proj-row:hover { background: rgba(79, 216, 245, .09); box-shadow: inset 0 0 0 1px rgba(79, 216, 245, .3); }
.proj-row:hover::after { opacity: 1; right: 4px; }
.proj-row:active { background: rgba(79, 216, 245, .16); }
/* ===== 明细表格排版优化（覆盖前面的紧凑样式，写在最后生效） ===== */
#detailCard .detail-body { padding: 2px 14px 14px; }
.dtable { font-size: 12.5px; border-collapse: separate; border-spacing: 0; }
.dtable thead th {
  padding: 11px 12px; font-size: 11.5px; letter-spacing: .4px; color: #9fb6cf;
  background: #0f1a29; border-bottom: 1px solid rgba(120,170,220,.24);
}
.dtable thead th i { margin-left: 5px; font-size: 9px; }
.dtable tbody td {
  padding: 10px 12px; line-height: 1.55; color: #dbe8f7;
  border-bottom: 1px solid rgba(120,170,220,.055);
}
.dtable tbody tr:nth-child(even) td { background: rgba(255,255,255,.016); }
.dtable tbody tr:hover td { background: rgba(79,216,245,.075); }
/* 日期列：等宽 + 淡化 + 固定，横向滚动时不跑掉 */
.dtable th:first-child, .dtable td:first-child {
  position: sticky; left: 0; z-index: 3; background: #0d1826;
  font-family: Consolas, "Courier New", monospace; font-size: 11.5px; color: #93aac4;
}
.dtable thead th:first-child { background: #0f1a29; color: #9fb6cf; }
.dtable tbody tr:nth-child(even) td:first-child { background: #101c2b; }
.dtable tbody tr:hover td:first-child { background: #12222f; }
/* 数字列 */
.dtable tbody td.num { font-variant-numeric: tabular-nums; color: #e4f1ff; }
.dtable tbody td.num.money { color: #a8ecc0; font-weight: 600; }
.dtable tbody td.dim { color: #536b83; }
/* 表格最小宽度：列不被压扁，窄屏横向滚动（日期列 sticky 一直可见） */
.dtable { min-width: 1040px; }
#detailCard .d-table-wrap { overflow: auto; }
.day-tip-link { color: #6fe3ff; text-decoration: none; border-bottom: 1px dashed rgba(111,227,255,.5); margin-left: 6px; }
.day-tip-link:hover { color: #b3f4ff; }
/* 「点我看全部明细」独立成一行，做成按钮样式，避免和上面提示串在一起 */
.day-tip { line-height: 1.7; }
.day-tip-link {
  display: inline-block; margin-top: 7px; padding: 4px 12px; border-radius: 7px;
  background: rgba(79,216,245,.13); border: 1px solid rgba(79,216,245,.38);
  color: #9ceaff; font-size: 11.5px; text-decoration: none; transition: all .15s;
}
.day-tip-link:hover { background: rgba(79,216,245,.24); border-color: rgba(79,216,245,.7); color: #d5f7ff; }
.day-tip-link:active { transform: translateY(1px); }
/* 收入口径切换（全部号 / 剧场号） */
.seg-scope { margin-right: 8px; }
.seg-scope button { padding: 4px 10px; font-size: 11.5px; }
/* logo 换成图片（前端顶部） */
.brand .logo {
  width: 34px; height: 34px; border-radius: 10px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #c9181f; box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 4px 14px rgba(201,24,31,.35);
}
.brand .logo img { width: 100%; height: 100%; object-fit: cover; display: block; }