/* 结界云 · B4 主题（夜樱 / 日间暖白）
   加载在 ui.css 之后，覆盖配色并增加顾客端分栏布局。
   日间 06:00-18:00 由 theme.js 给 <html> 加 data-theme="day"。 */

:root {
  --bg: #0b0c1c;
  --bg-2: #090817;
  --panel: #141326;
  --panel-2: #191830;
  --raise: #221f3a;
  --line: rgba(255, 255, 255, .10);
  --line-2: rgba(255, 255, 255, .06);

  --ink: #f2edf7;
  --sub: #b3aac6;
  --dim: #7d7593;

  --gold: #f3a6c4;
  --gold-2: #ffd7e8;
  --gold-soft: rgba(243, 166, 196, .12);

  --jade: #8fe3d2;
  --jade-soft: rgba(143, 227, 210, .12);
  --verm: #f08a8a;
  --verm-soft: rgba(240, 138, 138, .12);
  --sky: #9db8e8;
  --sky-soft: rgba(157, 184, 232, .12);
  --violet: #b9a0ff;
  --violet-soft: rgba(185, 160, 255, .12);
  --warn: #f3c78a;
  --warn-rgb: 243, 199, 138;
}

html[data-theme="day"] {
  --bg: #fdf6f8;
  --bg-2: #f8eef3;
  --panel: #fffdf9;
  --panel-2: #faf3f7;
  --raise: #f4eaf0;
  --line: rgba(70, 45, 70, .12);
  --line-2: rgba(70, 45, 70, .07);

  --ink: #2d2633;
  --sub: #7c7086;
  --dim: #a79bb0;

  --gold: #c25b86;
  --gold-2: #a8436c;
  --gold-soft: rgba(194, 91, 134, .10);
  --jade: #2f8f7b;
  --jade-soft: rgba(47, 143, 123, .10);
  --verm: #b34b3e;
  --verm-soft: rgba(179, 75, 62, .09);
  --sky: #3d6f9e;
  --sky-soft: rgba(61, 111, 158, .10);
  --violet: #7761c4;
  --violet-soft: rgba(119, 97, 196, .10);
  --warn: #a9762e;
  --warn-rgb: 169, 118, 46;
}

/* ------------------------------------------------ 基础夜色 */

body { background: var(--bg); color: var(--ink); }

body::before {
  background:
    radial-gradient(900px 560px at 8% -12%, rgba(243, 166, 196, .14), transparent 62%),
    radial-gradient(820px 540px at 102% -4%, rgba(185, 160, 255, .12), transparent 60%),
    radial-gradient(700px 700px at 60% 120%, rgba(143, 227, 210, .06), transparent 65%);
}

body::after {
  background-image:
    linear-gradient(rgba(255, 255, 255, .02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .02) 1px, transparent 1px);
}

::selection { background: rgba(243, 166, 196, .26); }
::-webkit-scrollbar-thumb { background: #2a2740; }
::-webkit-scrollbar-thumb:hover { background: #3a3654; }

html[data-theme="day"] body {
  background:
    radial-gradient(800px 520px at 8% -12%, rgba(194, 91, 134, .13), transparent 62%),
    radial-gradient(900px 600px at 100% -4%, rgba(119, 97, 196, .10), transparent 60%),
    radial-gradient(700px 500px at 60% 116%, rgba(47, 143, 123, .05), transparent 62%),
    linear-gradient(180deg, #fffafc, #fbf2f6 55%, #f8edf2);
}
html[data-theme="day"] body::before {
  background:
    radial-gradient(800px 520px at 8% -12%, rgba(194, 91, 134, .13), transparent 62%),
    radial-gradient(900px 600px at 100% -4%, rgba(119, 97, 196, .10), transparent 60%),
    radial-gradient(700px 500px at 60% 116%, rgba(47, 143, 123, .05), transparent 62%);
}
html[data-theme="day"] body::after {
  background-image:
    linear-gradient(rgba(70, 45, 80, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70, 45, 80, .035) 1px, transparent 1px);
}
html[data-theme="day"] ::selection { background: rgba(194, 91, 134, .20); }
html[data-theme="day"] ::-webkit-scrollbar-thumb { background: #d8cbd6; }
html[data-theme="day"] ::-webkit-scrollbar-thumb:hover { background: #c8b7c6; }

/* ------------------------------------------------ 顶栏 */

.topbar { background: rgba(11, 12, 28, .82); border-bottom-color: var(--line-2); }
html[data-theme="day"] .topbar { background: rgba(255, 250, 252, .86); border-bottom-color: var(--line); }

.brand-name {
  background: linear-gradient(90deg, var(--ink), var(--gold) 55%, var(--violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand-mark {
  background: linear-gradient(150deg, rgba(243, 166, 196, .22), rgba(185, 160, 255, .16));
  border-color: rgba(255, 255, 255, .14);
  box-shadow: 0 8px 24px rgba(185, 160, 255, .18);
}
html[data-theme="day"] .brand-mark {
  background: linear-gradient(150deg, rgba(194, 91, 134, .14), rgba(119, 97, 196, .10));
  border-color: rgba(70, 45, 70, .10);
  box-shadow: 0 6px 18px rgba(119, 97, 196, .10);
}

.nav a.on { background: rgba(243, 166, 196, .12); }
.nav a:hover { background: rgba(255, 255, 255, .04); }
html[data-theme="day"] .nav a.on { background: rgba(194, 91, 134, .10); }
html[data-theme="day"] .nav a:hover { background: rgba(70, 45, 70, .05); }

/* ------------------------------------------------ 按钮 / 表单 */

.btn:hover { border-color: rgba(185, 160, 255, .35); background: var(--raise); }
html[data-theme="day"] .btn:hover { border-color: #cfc0cc; background: var(--raise); }
.btn.ghost:hover { background: rgba(255, 255, 255, .05); }
html[data-theme="day"] .btn.ghost:hover { background: rgba(70, 45, 70, .05); }

.btn.primary {
  border-color: transparent;
  background: linear-gradient(90deg, #f3a6c4, #b9a0ff);
  color: #1d1430;
  box-shadow: 0 8px 24px rgba(185, 160, 255, .20);
}
.btn.primary:hover { background: linear-gradient(90deg, #f7b8d1, #c9b5ff); }
html[data-theme="day"] .btn.primary {
  background: linear-gradient(90deg, #c25b86, #7761c4);
  color: #fff;
  box-shadow: 0 8px 24px rgba(119, 97, 196, .18);
}
html[data-theme="day"] .btn.primary:hover { background: linear-gradient(90deg, #cf6a94, #8872d2); }

.btn.danger { color: #f0a79c; border-color: rgba(240, 138, 138, .35); background: rgba(240, 138, 138, .08); }
.btn.danger:hover { border-color: rgba(240, 138, 138, .55); background: rgba(240, 138, 138, .14); }
html[data-theme="day"] .btn.danger { color: #a53e32; border-color: #e2c3bd; background: #fbf0ee; }
html[data-theme="day"] .btn.danger:hover { border-color: #c98f86; background: #f6e4e1; }

.btn.caution {
  color: var(--warn);
  border-color: rgba(var(--warn-rgb), .45);
  background: rgba(var(--warn-rgb), .08);
}
.btn.caution:hover { border-color: var(--warn); background: rgba(var(--warn-rgb), .16); }

.input, .select, textarea.input { background: #121126; border-color: var(--line); color: var(--ink); }
.input::placeholder { color: #6c6485; }
.input:focus, .select:focus {
  border-color: rgba(243, 166, 196, .55);
  box-shadow: 0 0 0 3px rgba(243, 166, 196, .10);
}
.select option { background: #121126; color: var(--ink); }
.check input { background: #121126; border-color: rgba(255, 255, 255, .18); }
.check input:checked { background: var(--gold); border-color: var(--gold); }

html[data-theme="day"] .input,
html[data-theme="day"] .select,
html[data-theme="day"] textarea.input { background: #fffdf9; border-color: var(--line); color: var(--ink); }
html[data-theme="day"] .input::placeholder { color: #aaa294; }
html[data-theme="day"] .input:focus,
html[data-theme="day"] .select:focus {
  border-color: rgba(194, 91, 134, .55);
  box-shadow: 0 0 0 3px rgba(194, 91, 134, .10);
}
html[data-theme="day"] .select option { background: #fffdf9; color: var(--ink); }
html[data-theme="day"] .check input { background: #fffdf9; border-color: #cfc0cc; }
html[data-theme="day"] .check input:checked { background: var(--gold); border-color: var(--gold); }

/* ------------------------------------------------ 卡片 / 标签 */

.card {
  background: linear-gradient(180deg, #17162c, #121126);
  border-color: var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
html[data-theme="day"] .card {
  background: linear-gradient(180deg, #fffdf9, #fbf5f8);
  box-shadow: 0 10px 30px rgba(120, 70, 100, .06), inset 0 1px 0 rgba(255, 255, 255, .85);
}

.tag { background: #17152a; border-color: var(--line); }
html[data-theme="day"] .tag { background: #f9f2f6; }
.tag.warn {
  color: var(--warn);
  border-color: rgba(var(--warn-rgb), .34);
  background: rgba(var(--warn-rgb), .08);
}
.notice {
  border-color: rgba(var(--warn-rgb), .3);
  background: rgba(var(--warn-rgb), .08);
  color: var(--warn);
}

/* ------------------------------------------------ 登录门 */

.gate-card {
  background:
    radial-gradient(120% 90% at 50% -30%, rgba(243, 166, 196, .14), transparent 60%),
    linear-gradient(180deg, #17162c, #111024);
  border-color: var(--line);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.gate-seal {
  border-color: rgba(243, 166, 196, .4);
  background: radial-gradient(circle at 50% 30%, rgba(243, 166, 196, .22), rgba(185, 160, 255, .04));
  color: var(--gold);
  box-shadow: 0 0 40px rgba(243, 166, 196, .16);
}
html[data-theme="day"] .gate-card {
  background:
    radial-gradient(120% 90% at 50% -30%, rgba(194, 91, 134, .12), transparent 60%),
    linear-gradient(180deg, #fffdf9, #fbf3f7);
  box-shadow: 0 30px 80px rgba(120, 70, 100, .14), inset 0 1px 0 #fff;
}
html[data-theme="day"] .gate-seal {
  border-color: rgba(194, 91, 134, .35);
  background: radial-gradient(circle at 50% 30%, rgba(194, 91, 134, .16), rgba(119, 97, 196, .04));
  box-shadow: 0 0 30px rgba(194, 91, 134, .10);
}

/* ------------------------------------------------ 顾客端旧卡片（兼容） */

.hero-ring { background: linear-gradient(180deg, #17162c, #121126); }
html[data-theme="day"] .hero-ring { background: linear-gradient(180deg, #fffdf9, #fbf5f8); }

.acct { background: linear-gradient(180deg, #17162c, #121126); }
.acct:hover { border-color: rgba(243, 166, 196, .30); }
html[data-theme="day"] .acct { background: linear-gradient(180deg, #fffdf9, #fbf5f8); }
html[data-theme="day"] .acct:hover { border-color: rgba(194, 91, 134, .30); }

.orb {
  background: linear-gradient(145deg, #f3a6c4, #b9a0ff);
  color: #1d1430;
  box-shadow: 0 6px 18px rgba(185, 160, 255, .25);
}
html[data-theme="day"] .orb { box-shadow: 0 6px 16px rgba(119, 97, 196, .18); }

.ring .bg { stroke: #2a2740; }
html[data-theme="day"] .ring .bg { stroke: #eadbe4; }

.acct-own { border-color: rgba(243, 166, 196, .35); background: var(--gold-soft); color: var(--gold-2); }
html[data-theme="day"] .acct-own { border-color: rgba(194, 91, 134, .30); background: var(--gold-soft); color: var(--gold-2); }
.acct-own.off { border-color: var(--line); background: rgba(255, 255, 255, .03); }
html[data-theme="day"] .acct-own.off { border-color: #eadbe4; background: rgba(70, 45, 70, .03); }

.af-v { color: #fff; }
html[data-theme="day"] .af-v { color: var(--ink); }

.stat-box { background: #121126; border-color: var(--line); }
html[data-theme="day"] .stat-box { background: #fffdf9; }
.stat-v.strong { color: #fff; }
html[data-theme="day"] .stat-v.strong { color: var(--ink); }

.verify-box { border-color: rgba(240, 138, 138, .35); background: var(--verm-soft); }
.verify-title { color: #f0a79c; }
.verify-row .verify-code { color: #ffb3a8; }
html[data-theme="day"] .verify-title { color: #a53e32; }
html[data-theme="day"] .verify-row .verify-code { color: #a53e32; }

/* ------------------------------------------------ 管理端指标 / 设备 */

.stat { background: linear-gradient(180deg, #17162c, #121126); }
.stat::after { background: radial-gradient(circle, rgba(243, 166, 196, .12), transparent 68%); }
html[data-theme="day"] .stat { background: linear-gradient(180deg, #fffdf9, #fbf5f8); }
html[data-theme="day"] .stat::after { background: radial-gradient(circle, rgba(194, 91, 134, .10), transparent 68%); }

.emu-card { background: #121126; border-color: var(--line-2); }
html[data-theme="day"] .emu-card { background: #fffdf9; }

.cell { background: #1d1b34; border-color: #2a2740; }
.cell.queued { background: #2a2740; border-color: #383253; }
.cell.off { background: #151327; }
html[data-theme="day"] .cell { background: #efe6ec; border-color: #e2d3dc; }
html[data-theme="day"] .cell.queued { background: #e8dce4; border-color: #dac8d4; }
html[data-theme="day"] .cell.off { background: #f6eef3; }

.tbl th { background: #121126; border-bottom-color: var(--line); }
.tbl tbody tr:hover td { background: #18162e; }
html[data-theme="day"] .tbl th { background: #f9f2f6; }
html[data-theme="day"] .tbl tbody tr:hover td { background: #fcf7fa; }

/* ------------------------------------------------ 弹窗 / 二维码 / 表单 */

.overlay { background: rgba(4, 4, 12, .74); }
.modal {
  background: linear-gradient(180deg, #18162e, #121126);
  border-color: var(--line);
  box-shadow: 0 40px 110px rgba(0, 0, 0, .65);
}
.modal-close:hover { background: rgba(255, 255, 255, .06); }
html[data-theme="day"] .overlay { background: rgba(60, 40, 55, .35); }
html[data-theme="day"] .modal {
  background: linear-gradient(180deg, #fffdf9, #fbf5f8);
  box-shadow: 0 30px 90px rgba(60, 45, 25, .20);
}
html[data-theme="day"] .modal-close:hover { background: rgba(70, 45, 70, .06); }

.qr-shell { background: #fff; box-shadow: 0 18px 50px rgba(0, 0, 0, .45); }
.qr-placeholder { border-color: #2f2b48; background: #121126; }
.qr-step .n { border-color: #2f2b48; }
html[data-theme="day"] .qr-shell { box-shadow: 0 18px 50px rgba(120, 70, 100, .14); }
html[data-theme="day"] .qr-placeholder { border-color: #e2d3dc; background: #fdf7fa; }
html[data-theme="day"] .qr-step .n { border-color: #e2d3dc; }

.chip { background: #121126; border-color: var(--line); }
.chip:hover { border-color: rgba(185, 160, 255, .40); }
.chip.on { border-color: rgba(243, 166, 196, .50); background: var(--gold-soft); color: var(--gold-2); }
.rule-block { background: #121126; border-color: var(--line-2); }
html[data-theme="day"] .chip { background: #fbf5f8; }
html[data-theme="day"] .chip:hover { border-color: #cfc0cc; }
html[data-theme="day"] .chip.on { border-color: rgba(194, 91, 134, .45); background: var(--gold-soft); color: var(--gold-2); }
html[data-theme="day"] .rule-block { background: #fdf7fa; border-color: var(--line-2); }

.toast { background: #1a1830; border-color: var(--line); box-shadow: 0 18px 50px rgba(0, 0, 0, .5); }
.toast.bad { border-color: rgba(240, 138, 138, .35); color: #f0a79c; background: rgba(240, 138, 138, .10); }
html[data-theme="day"] .toast { background: #fffdf9; box-shadow: 0 14px 40px rgba(120, 70, 100, .16); }
html[data-theme="day"] .toast.bad { border-color: #e2c3bd; color: #a53e32; background: #fbf0ee; }

/* ------------------------------------------------ B4 顾客端分栏 */

.b4-wrap {
  position: relative;
  z-index: 1;
  width: min(1240px, calc(100% - 48px));
  margin: 0 auto;
  padding: 34px 0 76px;
}

.b4-main {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.b4-main > * { min-width: 0; }

.b4-list {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255, 255, 255, .045);
  backdrop-filter: blur(18px);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: sticky;
  top: 78px;
}
html[data-theme="day"] .b4-list {
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 18px 46px rgba(120, 70, 100, .08), inset 0 1px 0 rgba(255, 255, 255, .9);
}

.b4-list-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 2px 10px;
}
.b4-list-head h3 { font-size: 14px; font-weight: 700; letter-spacing: .08em; }
.b4-list-head > span {
  font-size: 10px;
  color: var(--gold);
  background: var(--gold-soft);
  border: 1px solid rgba(243, 166, 196, .22);
  padding: 2px 8px;
  border-radius: 999px;
}
html[data-theme="day"] .b4-list-head > span { border-color: rgba(194, 91, 134, .22); }
.b4-list-head .btn { margin-left: auto; }

.b4-list-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.b4-acct {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 16px;
  padding: 11px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
  transition: background .2s, border-color .2s;
}
.b4-acct:hover { background: rgba(255, 255, 255, .045); }
.b4-acct.on {
  border-color: rgba(243, 166, 196, .30);
  background: linear-gradient(120deg, rgba(243, 166, 196, .14), rgba(185, 160, 255, .08));
}
html[data-theme="day"] .b4-acct:hover { background: rgba(70, 45, 70, .04); }
html[data-theme="day"] .b4-acct.on {
  border-color: rgba(194, 91, 134, .28);
  background: linear-gradient(120deg, rgba(194, 91, 134, .10), rgba(119, 97, 196, .06));
}

.b4-avatar {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(145deg, var(--gold), var(--violet));
  box-shadow: 0 8px 20px rgba(185, 160, 255, .25);
  flex: 0 0 40px;
}
.b4-avatar.lg { width: 52px; height: 52px; border-radius: 16px; font-size: 22px; flex: 0 0 52px; }

.b4-acct .who { min-width: 0; flex: 1; }
.b4-acct .who b {
  display: block;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.b4-acct .who small {
  display: block;
  color: var(--dim);
  font-size: 9px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.b4-acct .tag { font-size: 9px; height: auto; padding: 3px 7px; flex: 0 0 auto; }

.b4-list-foot {
  margin-top: auto;
  color: var(--dim);
  font-size: 10px;
  text-align: center;
  padding: 10px 0 2px;
  border-top: 1px solid var(--line-2);
}

.b4-detail {
  border: 1px solid rgba(243, 166, 196, .20);
  border-radius: 24px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, rgba(243, 166, 196, .12), rgba(185, 160, 255, .07) 46%, rgba(255, 255, 255, .03));
  backdrop-filter: blur(20px);
  box-shadow: 0 26px 70px rgba(4, 5, 16, .5), inset 0 1px 0 rgba(255, 255, 255, .13);
}
html[data-theme="day"] .b4-detail {
  background: linear-gradient(120deg, rgba(194, 91, 134, .07), rgba(119, 97, 196, .04) 46%, #fffdfe);
  border-color: rgba(194, 91, 134, .18);
  box-shadow: 0 20px 54px rgba(120, 70, 100, .10), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.b4-detail::after {
  content: "";
  position: absolute;
  right: -110px;
  top: -130px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(243, 166, 196, .20), transparent 66%);
  pointer-events: none;
}
html[data-theme="day"] .b4-detail::after {
  background: radial-gradient(circle, rgba(194, 91, 134, .10), transparent 66%);
}

.b4-detail-head {
  display: flex;
  align-items: center;
  gap: 13px;
  position: relative;
  z-index: 1;
}
.b4-detail-head .who { min-width: 0; }
.b4-detail-head h2 { font-size: 22px; font-weight: 700; letter-spacing: .03em; }
.b4-detail-head .sub { color: var(--dim); font-size: 11px; margin-top: 4px; }
.b4-detail-head .tag { margin-top: 6px; }
.b4-detail-actions {
  margin-left: auto;
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.b4-hero {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 24px 0 20px;
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}
.b4-ring {
  --p: 0;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  flex: 0 0 108px;
  background: conic-gradient(from -90deg, var(--gold), var(--violet) calc(var(--p) * 1%), rgba(255, 255, 255, .10) 0);
}
.b4-ring::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: #121126;
  box-shadow: inset 0 0 30px rgba(185, 160, 255, .20);
}
html[data-theme="day"] .b4-ring {
  background: conic-gradient(from -90deg, var(--gold), var(--violet) calc(var(--p) * 1%), rgba(70, 45, 70, .08) 0);
}
html[data-theme="day"] .b4-ring::before {
  background: #fffafc;
  box-shadow: inset 0 0 30px rgba(119, 97, 196, .10);
}
.b4-ring span { position: relative; text-align: center; }
.b4-ring b { display: block; font-size: 24px; font-weight: 800; color: var(--ink); }
.b4-ring small { display: block; font-size: 9px; color: var(--dim); letter-spacing: .08em; margin-top: 2px; }

.b4-hero .k { color: var(--dim); font-size: 10px; letter-spacing: .12em; }
.b4-hero .big {
  font-size: 30px;
  font-weight: 800;
  margin-top: 5px;
  letter-spacing: .02em;
  white-space: nowrap;
  background: linear-gradient(90deg, #fff, #f3d2e0 45%, #cbb9ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html[data-theme="day"] .b4-hero .big {
  background: linear-gradient(90deg, #2d2633, #c25b86 45%, #7761c4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.b4-hero .sub { color: var(--dim); font-size: 11px; margin-top: 4px; }

.b4-gain { margin-left: auto; text-align: right; }
.b4-gain span { color: var(--dim); font-size: 10px; letter-spacing: .1em; }
.b4-gain b {
  display: block;
  font-size: 26px;
  font-weight: 800;
  color: var(--gold);
  margin-top: 4px;
  white-space: nowrap;
}
.b4-gain small { display: block; color: var(--dim); font-size: 10px; margin-top: 2px; }

.b4-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  position: relative;
  z-index: 1;
}
.b4-cell {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(13, 14, 30, .5);
}
html[data-theme="day"] .b4-cell { background: #fffdfe; }
.b4-cell span { display: block; color: var(--dim); font-size: 9px; letter-spacing: .1em; }
.b4-cell b { display: block; margin-top: 4px; font-size: 15px; font-weight: 700; color: var(--ink); }
.b4-cell b.pink { color: var(--gold); }
.b4-cell small { display: block; color: var(--dim); font-size: 9px; margin-top: 2px; }

.b4-detail .acct-own { margin-top: 14px; position: relative; z-index: 1; }
.b4-detail .verify-box { margin-top: 14px; position: relative; z-index: 1; }
.b4-timeline { margin-top: 16px; }

.b4-empty {
  border: 1px dashed var(--line);
  border-radius: 24px;
  padding: 60px 24px;
  text-align: center;
  background: rgba(255, 255, 255, .03);
}
html[data-theme="day"] .b4-empty { background: rgba(255, 255, 255, .55); }
.b4-empty h3 { font-size: 18px; margin-bottom: 8px; }
.b4-empty p { color: var(--dim); font-size: 12.5px; margin-bottom: 18px; }

@media (max-width: 980px) {
  .b4-wrap { width: calc(100% - 24px); padding: 16px 0 56px; }
  .b4-main { grid-template-columns: 1fr; gap: 10px; }
  .b4-list { position: static; padding: 10px; border-radius: 18px; }
  .b4-list-head { padding: 0 2px 8px; }
  .b4-list-head h3 { font-size: 13px; }
  .b4-list-body {
    flex-direction: row;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .b4-list-body::-webkit-scrollbar { display: none; }
  .b4-acct {
    flex: 0 0 auto;
    width: auto;
    min-width: 150px;
    max-width: 230px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .03);
  }
  html[data-theme="day"] .b4-acct { background: rgba(255, 255, 255, .6); }
  .b4-list-foot { display: none; }
  .b4-detail { padding: 18px; border-radius: 20px; }
  .b4-detail-head { flex-wrap: wrap; gap: 10px; }
  .b4-detail-head h2 { font-size: 18px; }
  .b4-detail-actions { margin-left: 0; width: 100%; justify-content: flex-start; }
  .b4-hero { gap: 14px; margin: 18px 0 14px; }
  .b4-ring { width: 76px; height: 76px; flex-basis: 76px; }
  .b4-ring::before { inset: 5px; }
  .b4-ring b { font-size: 16px; }
  .b4-hero .big { font-size: 22px; }
  .b4-gain { width: 100%; margin: 6px 0 0; text-align: left; padding-top: 10px; border-top: 1px solid var(--line-2); }
  .b4-gain b { font-size: 20px; }
  .b4-metrics { grid-template-columns: 1fr 1fr; gap: 8px; }
  .b4-cell { padding: 10px 11px; }
  .b4-cell b { font-size: 13px; }
  .b4-timeline { margin-top: 10px; }
}

/* ------------------------------------------------ 收益统计月表 */

.b4-monthbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  flex-wrap: wrap;
}
.b4-monthbar .month {
  font-size: 16px;
  font-weight: 700;
  min-width: 120px;
  text-align: center;
  color: var(--ink);
}
.b4-monthbar .spacer { flex: 1; }
.b4-monthbar .sum { color: var(--dim); font-size: 11px; }

.stats-table th { text-align: right; }
.stats-table th:first-child,
.stats-table td.day { text-align: left; }
.stats-table td.day {
  font-family: var(--num);
  color: var(--sub);
  white-space: nowrap;
}
.stats-table td.day small { color: var(--dim); font-size: 10px; }
.stats-table td.amount {
  font-family: var(--num);
  font-weight: 600;
  color: var(--ink);
  text-align: right;
  white-space: nowrap;
}
.stats-table td.amount.zero { color: var(--dim); font-weight: 400; }
.stats-table td.amount.total { color: var(--gold); font-weight: 700; }
.stats-table tr.today td { background: var(--gold-soft); }
.stats-table tfoot td {
  border-top: 1px solid var(--line);
  font-weight: 700;
  color: var(--ink);
  background: var(--panel-2);
}
/* 顾客端收益统计：五月/多资源卡片自适应一行 */
.b4-wrap .stats { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }