:root {
  --bg: #eef7ff;
  --page-gradient: linear-gradient(to right top, #edf4f8 0%, #e9f4ff 46%, #dcecff 100%);
  --panel: #ffffff;
  --ink: #18284a;
  --muted: #8a96aa;
  --line: #dde6f2;
  --primary: #0053d1;
  --primary-dark: #053fc8;
  --primary-bright: #1d8cff;
  --primary-soft: #e4f2ff;
  --primary-wash: #f4fbff;
  --success: #00b96b;
  --warning: #fa8c16;
  --danger: #ff4d4f;
  --purple: #5d6bff;
  --shadow: 0 8px 18px rgba(31, 69, 128, .08);
}

* { box-sizing: border-box; }
html, body, #root { min-height: 100%; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--page-gradient);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 16px;
}
button, input { font: inherit; }
button { border: 0; cursor: pointer; background: transparent; color: inherit; }
input {
  width: 280px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid #cfd9ea;
  border-radius: 6px;
  color: var(--ink);
  background: #fff;
  outline: none;
}
input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(52, 120, 246, .12); }
.app { min-width: 1440px; min-height: 100vh; }

.topbar {
  height: 74px;
  display: grid;
  grid-template-columns: 258px 138px 1fr 208px;
  align-items: center;
  gap: 18px;
  padding: 0 14px;
  background: transparent;
  border-top: 4px solid #1f314f;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand img { width: 34px; height: 34px; border-radius: 0; }
.brand strong {
  display: block;
  color: #14284b;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0;
  white-space: nowrap;
}
.game-select {
  width: 138px;
  height: 52px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 9px;
  padding: 0 10px;
  border: 1px solid rgba(198, 211, 230, .95);
  border-radius: 10px;
  background: rgba(255,255,255,.9);
  box-shadow: var(--shadow);
  text-align: left;
}
.game-select .game-avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, #0053d1, #57d1fb);
  font-size: 15px;
  font-weight: 800;
}
.game-select b, .game-select small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-select b { color: var(--ink); font-size: 16px; line-height: 20px; }
.game-select small { color: #708099; font-size: 13px; line-height: 16px; }
.game-select em { color: #52617a; font-style: normal; transform: translateY(-1px); }
.topnav { height: 100%; display: flex; align-items: center; gap: 36px; }
.topnav button {
  position: relative;
  height: 100%;
  padding: 0 12px;
  color: var(--ink);
  font-size: 22px;
  font-weight: 700;
}
.topnav button.active:after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  height: 3px;
  border-radius: 4px;
  background: var(--primary);
}
.profile { position: relative; display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.header-download {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 0;
  color: var(--primary);
  background: transparent;
  box-shadow: none;
}
.header-download svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.header-download:hover { color: var(--primary-dark); background: transparent; }
.profile .avatar {
  height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 6px;
  border-radius: 10px;
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow);
}
.profile .avatar span {
  line-height: 42px;
}
.profile .avatar em {
  width: 7px;
  height: 7px;
  display: block;
  border-right: 1.5px solid #52617a;
  border-bottom: 1.5px solid #52617a;
  transform: rotate(45deg) translateY(-2px);
  transform-origin: center;
}
.profile i, .profile-head i {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--primary);
  font-style: normal;
  font-weight: 800;
}
.profile .grid {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  color: #72809a;
  background: rgba(255,255,255,.55);
  font-size: 20px;
}
.profile-panel {
  position: absolute;
  z-index: 10;
  top: 46px;
  right: 46px;
  width: 300px;
  padding: 16px;
  border: 1px solid #d8e2f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 38px rgba(30, 54, 98, .16);
}
.profile-head { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.profile-head i { width: 46px; height: 46px; font-size: 20px; }
.profile-head b { display: block; font-size: 16px; }
.profile-head span { color: var(--muted); font-size: 14px; }
.profile-actions { display: flex; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.profile-actions button {
  height: 30px;
  padding: 0 12px;
  border: 1px solid #d8e2f0;
  border-radius: 6px;
  background: #fff;
}
.logout { width: 100%; height: 34px; margin-top: 10px; color: #52617a; }

.body { display: grid; grid-template-columns: 258px minmax(0, 1fr); }
.sidebar {
  min-height: calc(100vh - 74px);
  padding: 18px 8px 16px;
  background: transparent;
}
.sidebar h2 {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 8px;
  padding: 0 18px;
  color: var(--primary-dark);
  font-size: 18px;
  font-weight: 800;
}
.sidebar > button {
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 22px;
  border-radius: 10px;
  color: #344764;
  font-size: 18px;
  text-align: left;
}
.sidebar > button i {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  color: #526e9e;
  font-style: normal;
  font-size: 14px;
}
.sidebar > button.active {
  color: var(--primary);
  background: linear-gradient(90deg, #e2f3ff, #d9e9ff);
  font-weight: 800;
}

main { min-width: 0; padding: 0 12px 26px 0; }
.tabs {
  height: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 0 0 10px 10px;
  background: rgba(255,255,255,.62);
}
.tabs button {
  height: 32px;
  padding: 0 16px;
  border-radius: 8px;
  color: #8793a7;
  background: rgba(42, 68, 103, .07);
  font-size: 16px;
}
.tabs button.active, .tabs button.system-tab {
  color: var(--primary-dark);
  border: 1px solid rgba(52,120,246,.25);
  background: var(--primary-soft);
  font-weight: 800;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.metric {
  min-height: 104px;
  padding: 18px 16px;
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}
.metric span, .metric small { display: block; color: var(--muted); }
.metric strong { display: block; margin: 10px 0; color: var(--ink); font-size: 30px; line-height: 1; }
.metric.blue strong { color: #203463; }
.metric.green small { color: var(--success); }
.metric.orange small { color: var(--warning); }
.metric.purple small { color: var(--purple); }
.metric.red small { color: var(--danger); }

.trend-card, .table-card, .system-panel {
  margin-top: 16px;
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card-title {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
}
.card-title h3 { margin: 0; color: #152747; font-size: 19px; font-weight: 800; }
.card-title > div, .filters { display: flex; align-items: center; gap: 8px; }
.card-title button, .filters button {
  height: 36px;
  padding: 0 14px;
  border: 1px solid #d4deec;
  border-radius: 6px;
  color: #4d5d76;
  background: #fff;
  font-size: 15px;
}
.filters button:last-child { color: var(--primary); }
.chart {
  height: 258px;
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding: 28px 34px 42px;
  background: linear-gradient(#fff 0 24%, #f8fbff 24% 25%, #fff 25% 49%, #f8fbff 49% 50%, #fff 50% 74%, #f8fbff 74% 75%, #fff 75%);
}
.chart i {
  position: relative;
  flex: 1;
  min-width: 10px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #ff7a2f, rgba(255,122,47,.08));
}
.chart i:nth-child(2n) { background: linear-gradient(180deg, #3478f6, rgba(52,120,246,.08)); }
.chart span {
  position: absolute;
  left: 50%;
  bottom: -25px;
  transform: translateX(-50%);
  color: #a3adbf;
  font-size: 14px;
  white-space: nowrap;
}

.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 2500px; }
th, td {
  height: 52px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
th {
  color: #33415d;
  background: #f5f7fb;
  font-weight: 800;
  font-size: 15px;
}
td { color: #31405a; font-size: 15px; }
.table-card > table { min-width: 900px; }
.tag {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
}
.tag.success { color: #169456; background: #e9f8f0; }
.tag.warning { color: #d46b08; background: #fff4e6; }
.tag.danger { color: var(--danger); background: #fff1f0; }
.tag.default { color: #7f8aa0; background: #eef2f7; }
.ops { color: var(--primary); font-weight: 800; word-spacing: 8px; }
.primary-action {
  height: 34px;
  padding: 0 16px;
  border-radius: 6px;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-bright));
  font-weight: 800;
  box-shadow: 0 8px 16px rgba(0, 83, 209, .16);
}
.card-title .primary-action,
.system-toolbar .primary-action,
.version-page .primary-action {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--primary), var(--primary-bright));
}

.system-panel { padding-bottom: 14px; }
.system-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  padding: 16px 20px;
}
.system-grid article {
  min-height: 104px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--primary-wash);
}
.system-grid b, .system-grid span, .system-grid small { display: block; }
.system-grid span { margin: 8px 0; color: var(--primary); font-size: 20px; font-weight: 800; }
.system-grid small { color: var(--muted); }

.menu-card { box-shadow: var(--shadow); }
.menu-section-head {
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
  background: #f7f9fd;
}
.menu-section-head h3 { margin: 0 8px 0 0; color: #152747; font-size: 20px; font-weight: 800; }
.menu-section-head button {
  height: 44px;
  margin-left: auto;
  padding: 0 20px;
  border-radius: 6px;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-bright));
  font-weight: 800;
}
.pill {
  height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 15px;
}
.pill.blue { color: #1d6dd8; background: #eaf2ff; border: 1px solid #c8ddff; }
.pill.green { color: #389e0d; background: #f0ffe8; border: 1px solid #d9f7be; }
.pill.orange { color: #d46b08; background: #fff7e6; border: 1px solid #ffe7ba; }
.pill.gray { color: #7f8aa0; background: #eef2f7; border: 1px solid #dde6f2; }
.menu-tree { padding: 18px 18px 20px; }
.menu-row {
  min-height: 76px;
  display: grid;
  grid-template-columns: 24px 28px 160px minmax(0, 1fr) 160px;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  color: #31405a;
  font-size: 16px;
}
.menu-row.parent {
  grid-template-columns: 24px 28px minmax(0, 1fr) 160px;
}
.menu-row i {
  color: #8392aa;
  font-style: normal;
  text-align: center;
}
.menu-row b { font-weight: 700; }
.menu-row small {
  width: fit-content;
  max-width: 760px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid #ffe0b2;
  border-radius: 5px;
  color: #fa8c16;
  background: #fff8ef;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.menu-row em {
  color: #64748f;
  font-style: normal;
  text-align: right;
  word-spacing: 10px;
}
.menu-row.child {
  grid-template-columns: 28px 120px minmax(0, 1fr) 160px;
  padding-left: 38px;
}

.system-toolbar {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}
.compact-table table { min-width: 980px; }
.compact-table td:first-child b { margin-right: 8px; }
.lock {
  display: inline-flex;
  height: 20px;
  align-items: center;
  padding: 0 6px;
  border-radius: 4px;
  color: var(--primary);
  background: var(--primary-soft);
  font-size: 14px;
  font-weight: 700;
}
.note-card {
  margin-top: 16px;
  padding: 14px 22px;
  border-radius: 8px;
  color: var(--primary-dark);
  background: rgba(228, 242, 255, .86);
  box-shadow: var(--shadow);
}
.note-card p { margin: 6px 0; }
.account-layout {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 16px;
  margin-top: 16px;
}
.group-card {
  min-height: 530px;
  padding: 16px;
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}
.group-title {
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  color: var(--ink);
  font-size: 19px;
}
.group-title button { color: var(--primary); font-size: 18px; }
.group-card > button {
  width: 100%;
  height: 50px;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) 44px 70px;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border-radius: 7px;
  color: #344764;
  text-align: left;
}
.group-card > button.active {
  color: var(--primary-dark);
  background: var(--primary-soft);
  font-weight: 800;
}
.group-card em, .group-card i {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
}
.group-card small { color: #6d7b93; }
.group-card i { color: #7d8aa1; text-align: right; }
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #9aa7ba;
}
.dot.all { background: var(--primary); }
.dot.blue { background: #1d8cff; }
.dot.purple { background: #8b5cf6; }
.dot.pink { background: #ec4899; }
.dot.navy { background: #1d4fb8; }
.dot.gray { background: #9aa7ba; }
.account-table { margin-top: 0; }
.account-table table { min-width: 1250px; }
.status-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.version-page {
  margin-top: 16px;
  border-radius: 8px;
  background: transparent;
}
.version-page > .card-title {
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}
.version-card {
  margin-top: 16px;
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.version-card.hidden-game { opacity: .62; }
.version-head {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
  background: #f7faff;
}
.version-head > div {
  display: flex;
  align-items: center;
  gap: 10px;
}
.game-avatar.small {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), #57d1fb);
  font-size: 13px;
  font-weight: 800;
}
.version-head em, .version-row em {
  color: #64748f;
  font-style: normal;
  word-spacing: 10px;
}
.version-row {
  min-height: 72px;
  display: grid;
  grid-template-columns: 180px 140px minmax(0, 1fr) 160px;
  align-items: center;
  gap: 12px;
  padding: 0 22px 0 82px;
  border-bottom: 1px solid var(--line);
}
.version-row.hidden-version { opacity: .58; }
.currency {
  width: fit-content;
  height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid #ffe0b2;
  border-radius: 5px;
  color: #fa8c16;
  background: #fff8ef;
}
.version-row small { color: #6f7d94; }

@media (max-width: 1440px) {
  .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* System management frame replication */
body {
  background: var(--page-gradient);
  font-size: 14px;
}
.app { min-width: 1440px; }
.topbar {
  height: 56px;
  grid-template-columns: 190px 116px 1fr 190px;
  gap: 16px;
  padding: 0 14px 0 31px;
}
.brand { gap: 9px; }
.brand img { width: 24px; height: 24px; }
.brand strong { font-size: 18px; }
.game-select {
  width: 102px;
  height: 42px;
  grid-template-columns: 34px minmax(0, 1fr) 12px;
  gap: 7px;
  padding: 0 8px;
}
.game-select .game-avatar { width: 30px; height: 30px; font-size: 13px; }
.game-select b { font-size: 13px; line-height: 16px; }
.game-select small { font-size: 11px; line-height: 14px; }
.topnav { gap: 28px; }
.topnav button { font-size: 16px; padding: 0 9px; }
.topnav button.active:after { left: 17px; right: 17px; bottom: 10px; }
.profile .avatar { height: 36px; box-shadow: none; background: transparent; }
.profile .avatar span { line-height: 36px; }
.profile .avatar em { width: 7px; height: 7px; transform: rotate(45deg) translateY(-2px); }
.profile i, .profile-head i { width: 30px; height: 30px; }
.profile .grid { display: none; }
.body { grid-template-columns: 190px minmax(0, 1fr); }
.sidebar {
  min-height: calc(100vh - 56px);
  padding: 8px 7px;
}
.sidebar h2 {
  height: 34px;
  margin: 0 0 6px;
  padding: 0 33px;
  font-size: 14px;
}
.sidebar > button {
  height: 36px;
  gap: 0;
  padding: 0 33px;
  border-radius: 6px;
  font-size: 14px;
}
.sidebar > button i { display: none; }
main { padding: 0 8px 18px 0; }
.tabs {
  height: 35px;
  gap: 8px;
  padding: 0 11px;
  border-radius: 0 0 6px 6px;
}
.tabs button {
  height: 25px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 13px;
}
.system-tabs button.active {
  color: var(--primary-dark);
  border: 1px solid rgba(0, 83, 209, .24);
  background: var(--primary-soft);
}
.channel-layout {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 12px;
  margin-top: 13px;
  min-height: calc(100vh - 104px);
}
.inner-nav {
  min-height: calc(100vh - 104px);
  border-radius: 4px;
  background: #fff;
  overflow: hidden;
}
.inner-nav h3 {
  height: 54px;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  color: #17233f;
  font-size: 14px;
  font-weight: 800;
}
.inner-nav button {
  width: 100%;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 21px;
  color: #303744;
  font-size: 13px;
  text-align: left;
}
.inner-nav button.active { color: var(--primary-dark); }
.inner-nav button em {
  color: inherit;
  font-style: normal;
  font-size: 16px;
}
.channel-panel {
  min-height: calc(100vh - 104px);
  padding: 18px 16px 18px;
  border: 1px solid #d4e3ef;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.channel-panel-head {
  min-height: 60px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.channel-panel-head h3 {
  margin: 0 0 8px;
  color: #111a2d;
  font-size: 14px;
  font-weight: 800;
}
.channel-panel-head p {
  margin: 0;
  color: #8b95a5;
  font-size: 14px;
}
.channel-panel .primary-action {
  height: 32px;
  padding: 0 14px;
  border-radius: 4px;
  font-size: 13px;
}
.sub-tabs {
  height: 40px;
  display: flex;
  align-items: flex-end;
  gap: 36px;
  border-bottom: 1px solid #cfd9e8;
}
.sub-tabs button {
  position: relative;
  height: 32px;
  color: #303744;
  font-size: 13px;
}
.sub-tabs button.active {
  color: var(--primary-dark);
  font-weight: 700;
}
.sub-tabs button.active:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--primary);
}
.channel-table {
  width: 100%;
  min-width: 0;
  margin-top: 27px;
  table-layout: fixed;
}
.channel-table th,
.channel-table td {
  height: 36px;
  padding: 0 12px;
  font-size: 14px;
}
.channel-table th {
  color: #1f2937;
  background: #f3f6fa;
}
.channel-table td small {
  margin-left: 8px;
  color: #99a2b0;
  font-size: 10px;
}
.channel-table th:nth-last-child(2),
.channel-table td:nth-last-child(2) { width: 120px; }
.channel-table th:last-child,
.channel-table td:last-child { width: 110px; }
.tag {
  height: 22px;
  padding: 0 8px;
  border-radius: 4px;
  font-size: 14px;
}
.link-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--primary-dark);
}
.link-actions button {
  color: var(--primary-dark);
  font-size: 14px;
}
.link-actions .danger-link { color: #ff7b88; }
.code-tag {
  display: inline-flex;
  height: 24px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(0, 83, 209, .35);
  border-radius: 4px;
  color: var(--primary-dark);
  background: #f4fbff;
}
.panel-bottom-line {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 18px;
  height: 1px;
  background: var(--line);
}
.channel-panel { position: relative; }

/* Dropdown filters */
.header-game-filter {
  position: relative;
  width: 118px;
  height: 42px;
  display: block;
  padding: 0;
  border: 1px solid rgba(198, 211, 230, .95);
  border-radius: 10px;
  background: rgba(255,255,255,.9);
  box-shadow: var(--shadow);
}
.game-select-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}
.game-select-trigger {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 8px;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
}
.game-select-trigger img {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(198, 211, 230, .9);
}
.game-select-trigger span {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.game-select-trigger i,
.game-select-menu button:after {
  width: 7px;
  height: 7px;
  display: block;
  border-right: 1.5px solid #52617a;
  border-bottom: 1.5px solid #52617a;
  transform: rotate(45deg) translateY(-2px);
  transform-origin: center;
  content: "";
}
.game-select-menu {
  position: absolute;
  z-index: 35;
  top: calc(100% + 6px);
  left: 0;
  width: 154px;
  padding: 6px;
  border: 1px solid #d8e2f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(30, 54, 98, .16);
}
.game-select-menu button {
  width: 100%;
  height: 38px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  border-radius: 6px;
  color: #344764;
  text-align: left;
}
.game-select-menu button:after { display: none; }
.game-select-menu img {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  object-fit: cover;
}
.game-select-menu button:hover,
.game-select-menu button.active {
  color: var(--primary-dark);
  background: var(--primary-soft);
}
.filter-select {
  position: relative;
  min-width: 120px;
}
.header-game-filter .filter-select {
  min-width: 0;
}
.select-trigger {
  width: 100%;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid #d4deec;
  border-radius: 6px;
  color: #344764;
  background: #fff;
  line-height: 1;
}
.header-game-filter .select-trigger {
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}
.select-trigger span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.select-trigger i {
  width: 7px;
  height: 7px;
  display: block;
  flex: 0 0 auto;
  border-right: 1.5px solid #52617a;
  border-bottom: 1.5px solid #52617a;
  transform: rotate(45deg) translateY(-2px);
  transform-origin: center;
}
.select-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  padding: 6px;
  border: 1px solid #d8e2f0;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(30, 54, 98, .16);
}
.select-menu button {
  width: 100%;
  height: 30px;
  display: block;
  padding: 0 10px;
  border-radius: 4px;
  color: #344764;
  text-align: left;
  white-space: nowrap;
}
.select-menu button:hover,
.select-menu button.active {
  color: var(--primary-dark);
  background: var(--primary-soft);
}
.filters .filter-select { width: 160px; }
.user-list-toolbar {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  padding: 0 0 0 18px;
  background: transparent;
  box-shadow: none;
}
.user-list-title {
  display: flex;
  align-items: center;
  min-width: 160px;
}
.user-list-title h3 {
  margin: 0;
  color: #152747;
  font-size: 19px;
  font-weight: 800;
}
.user-list-filters {
  flex: 1;
  justify-content: flex-end;
}
.user-list-filters input {
  width: min(320px, 34vw);
  height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  color: #33415d;
  background: transparent;
}
.user-list-filters input:focus {
  box-shadow: none;
}
.user-list-filters .select-trigger {
  border: 0;
  border-radius: 0;
  background: transparent;
}
.user-list-table-card {
  margin-top: 0;
  border-radius: 8px;
}
.user-list-toolbar + .user-list-table-card {
  margin-top: 0;
}
.simple-select {
  height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid #d7deea;
  border-radius: 4px;
  background: #fff;
  color: #66758d;
  white-space: nowrap;
}
.simple-select i {
  width: 7px;
  height: 7px;
  display: block;
  border-right: 1.5px solid #8c99ac;
  border-bottom: 1.5px solid #8c99ac;
  transform: rotate(45deg) translateY(-2px);
  transform-origin: center;
}

/* User list and detail drawer */
.user-table { min-width: 2300px; }
.clickable-row { cursor: pointer; }
.clickable-row:hover td { background: #f7fbff; }
.ops button {
  color: var(--primary);
  font-weight: 800;
}
.drawer-mask {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(12, 24, 48, .16);
}
.user-drawer {
  position: fixed;
  z-index: 41;
  top: 0;
  right: 0;
  width: min(980px, 78vw);
  height: 100vh;
  background: #fff;
  box-shadow: -16px 0 36px rgba(20, 38, 70, .18);
  display: flex;
  flex-direction: column;
}
.user-drawer header {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, #f8fcff, #eef7ff);
}
.user-drawer h3,
.user-drawer p,
.user-drawer h4 { margin: 0; }
.user-drawer h3 { color: #14284b; font-size: 18px; }
.user-drawer p { margin-top: 6px; color: #7b8798; font-size: 14px; }
.user-drawer header button {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  color: #64748b;
  font-size: 22px;
}
.drawer-split {
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
}
.drawer-info,
.drawer-timeline {
  min-height: 0;
  overflow: auto;
  padding: 22px;
}
.drawer-info {
  border-right: 1px solid var(--line);
  background: #fbfdff;
}
.drawer-info h4,
.drawer-timeline h4 {
  color: #14284b;
  font-size: 15px;
  margin-bottom: 16px;
}
.drawer-info dl { margin: 0; }
.drawer-info dl div {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 10px;
  min-height: 34px;
  align-items: start;
  border-bottom: 1px solid #edf2f7;
}
.drawer-info dt {
  color: #8a96aa;
  font-size: 14px;
  line-height: 34px;
}
.drawer-info dd {
  margin: 0;
  color: #26364f;
  font-size: 13px;
  line-height: 34px;
  word-break: break-all;
}
.drawer-timeline ol {
  position: relative;
  margin: 0;
  padding: 0 0 0 18px;
  list-style: none;
}
.drawer-timeline ol:before {
  content: "";
  position: absolute;
  left: 4px;
  top: 5px;
  bottom: 0;
  width: 1px;
  background: #d9e5f2;
}
.drawer-timeline li {
  position: relative;
  padding: 0 0 22px 18px;
}
.drawer-timeline li:before {
  content: "";
  position: absolute;
  left: -18px;
  top: 4px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--primary);
  border-radius: 50%;
  background: #fff;
}
.drawer-timeline time {
  display: block;
  color: #6f7d94;
  font-size: 14px;
  margin-bottom: 6px;
}
.drawer-timeline b {
  display: block;
  color: #14284b;
  font-size: 14px;
  margin-bottom: 7px;
}
.drawer-timeline p {
  padding: 10px 12px;
  border: 1px solid #e0e8f2;
  border-radius: 6px;
  background: #f8fbff;
  color: #40516c;
  font-size: 13px;
  line-height: 1.6;
}

/* System setting pages */
.menu-list-card {
  margin-top: 13px;
  border: 1px solid #d8e5ee;
  border-radius: 3px;
  background: #fff;
  overflow: hidden;
}
.menu-list-head {
  height: 56px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  background: #f7f8fb;
}
.menu-list-head h3 {
  margin: 0 8px 0 0;
  color: #17233f;
  font-size: 16px;
}
.menu-list-head .primary-action {
  margin-left: auto;
  height: 34px;
  border-radius: 4px;
}
.menu-list-row {
  height: 76px;
  display: grid;
  grid-template-columns: 20px 24px minmax(0, 1fr) 160px;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  color: #334155;
}
.menu-list-row b { font-weight: 500; }
.menu-list-row em {
  color: #64748b;
  font-style: normal;
  text-align: right;
  word-spacing: 12px;
}
.system-toolbar {
  height: 48px;
  margin-top: 13px;
  padding: 0;
}
.system-toolbar input { width: 280px; }
.compact-table {
  margin-top: 10px;
  border-radius: 0;
  box-shadow: none;
}
.compact-table table,
.account-table table { min-width: 0; table-layout: fixed; }
.compact-table th,
.compact-table td,
.account-table th,
.account-table td {
  height: 42px;
  padding: 0 12px;
  font-size: 13px;
}
.note-card {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 4px;
  box-shadow: none;
}
.account-layout {
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 12px;
  margin-top: 13px;
}
.group-card {
  min-height: calc(100vh - 118px);
  padding: 14px 12px;
  border-radius: 0;
  box-shadow: none;
}
.group-title {
  height: 38px;
  margin-bottom: 10px;
  padding: 0 0 0 2px;
  font-size: 16px;
}
.group-card > button {
  height: 44px;
  grid-template-columns: 14px minmax(0, 1fr) 48px 62px;
  border-radius: 4px;
}
.account-table {
  margin-top: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: auto;
}
.account-table .card-title {
  min-height: 44px;
  padding: 0 0 12px;
  border-bottom: 0;
}
.account-table .primary-action { height: 34px; }
.account-table table { min-width: 1400px; }
.check {
  width: 14px;
  height: 14px;
  display: inline-block;
  border: 1px solid #cfd8e6;
  border-radius: 2px;
  background: #fff;
}
.icon-actions {
  color: #64748b;
  word-spacing: 10px;
}
.pager {
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 0 10px;
  color: #303744;
  border-top: 1px solid var(--line);
}
.pager button {
  height: 30px;
  min-width: 64px;
  padding: 0 12px;
  border: 1px solid #cfd8e6;
  border-radius: 5px;
  background: #fff;
}
.status-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 13px;
}
.status-cards .metric {
  min-height: 84px;
  padding: 16px 24px;
}
.status-cards .metric strong { font-size: 28px; }
.apply-filter {
  height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding: 0 16px;
  background: #fff;
}
.apply-filter button {
  width: 140px;
  height: 34px;
  border: 1px solid #d4deec;
  border-radius: 5px;
  color: #8a96aa;
  background: #fff;
  text-align: left;
  padding: 0 14px;
}
.apply-filter input { width: 220px; }
.pass-actions {
  color: #52c41a;
  word-spacing: 10px;
}
.pass-actions::first-letter { color: #52c41a; }
.version-page {
  margin-top: 13px;
}
.version-tip {
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-radius: 4px;
  color: #fa8c16;
  background: #fff7e6;
}
.version-action {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.version-action .primary-action { height: 34px; }
.version-card {
  margin-top: 12px;
  border-radius: 0;
  box-shadow: none;
  border: 1px solid var(--line);
}
.version-head {
  min-height: 56px;
  padding: 0 36px;
}
.version-row {
  min-height: 54px;
  grid-template-columns: 110px 120px minmax(0, 1fr) 140px;
  padding: 0 28px 0 64px;
}
.game-avatar.small { width: 32px; height: 32px; }

/* Login interaction demo */
.login-demo-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 14px;
  margin-top: 13px;
}
.login-demo-main,
.reference-panel {
  border: 1px solid #d8e5ee;
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}
.login-demo-main { padding: 16px; }
.login-demo-title {
  min-height: 58px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.login-demo-title h3,
.reference-panel h3 {
  margin: 0 0 8px;
  color: #14233f;
  font-size: 18px;
}
.login-demo-title p,
.reference-panel p {
  margin: 0;
  color: #7b8798;
  font-size: 13px;
}
.channel-switch {
  display: inline-flex;
  padding: 3px;
  border: 1px solid #d5e1ef;
  border-radius: 8px;
  background: #f7fbff;
}
.channel-switch button {
  height: 30px;
  min-width: 58px;
  padding: 0 12px;
  border-radius: 6px;
  color: #637085;
  font-weight: 700;
}
.channel-switch button.active {
  color: #fff;
  background: linear-gradient(135deg, #18c5aa, #70dce6);
}
.phone-and-rules {
  display: grid;
  grid-template-columns: 390px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin-top: 10px;
}
.phone-frame {
  width: 375px;
  margin: 0 auto;
  padding: 12px;
  border-radius: 34px;
  background: #111827;
  box-shadow: 0 22px 50px rgba(17, 24, 39, .22);
}
.phone-screen {
  position: relative;
  height: 812px;
  overflow: hidden;
  border-radius: 26px;
  background: #f7fffc;
}
.mini-status {
  position: absolute;
  z-index: 8;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  pointer-events: none;
}
.mini-status b {
  width: 42px;
  height: 12px;
  margin-left: auto;
  margin-right: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, #fff 0 8px, transparent 8px 12px, #fff 12px 20px, transparent 20px 24px, #fff 24px 32px, transparent 32px 36px, #fff 36px);
}
.mini-status i {
  width: 18px;
  height: 14px;
  border: 3px solid #fff;
  border-top: 0;
  border-left-color: transparent;
  border-right-color: transparent;
  border-radius: 0 0 12px 12px;
}
.mini-status em {
  width: 24px;
  height: 13px;
  border: 2px solid #fff;
  border-radius: 4px;
}
.mini-capsule {
  position: absolute;
  z-index: 9;
  top: 54px;
  right: 20px;
  width: 82px;
  height: 34px;
  display: grid;
  grid-template-columns: 36px 1px 1fr;
  align-items: center;
  gap: 9px;
  padding: 0 9px;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 18px;
  color: #fff;
}
.mini-capsule i {
  height: 18px;
  background: rgba(255,255,255,.7);
}
.mini-capsule b {
  width: 20px;
  height: 20px;
  border: 4px solid #fff;
  border-radius: 50%;
}
.mini-back {
  position: absolute;
  z-index: 9;
  top: 58px;
  left: 18px;
  color: #fff;
  font-size: 46px;
  line-height: 1;
}
.mini-login-screen,
.mini-form-screen {
  position: relative;
  height: 100%;
  padding: 96px 25px 28px;
  color: #053d39;
  background:
    radial-gradient(circle at 82% 24%, rgba(255,255,255,.38) 0 90px, transparent 91px),
    linear-gradient(160deg, #35d3ae 0%, #84e1e8 33%, #f8fffb 76%);
}
.mini-login-screen h2,
.mini-form-screen h2 {
  position: absolute;
  top: 62px;
  left: 0;
  right: 0;
  margin: 0;
  color: #fff;
  text-align: center;
  font-size: 24px;
  letter-spacing: 0;
}
.login-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 34px;
}
.login-hero b,
.login-hero strong {
  display: block;
  color: #063f3a;
  font-size: 34px;
  line-height: 1.16;
}
.login-hero strong { font-size: 38px; }
.brand-orb {
  width: 104px;
  height: 92px;
  display: grid;
  place-items: center;
  border-radius: 46% 52% 46% 54%;
  color: #fff;
  background: linear-gradient(135deg, #b6de3f, #059e85);
  box-shadow: inset 0 0 18px rgba(0,0,0,.18), 0 18px 34px rgba(0, 132, 113, .22);
  font-size: 42px;
  font-weight: 900;
}
.mini-brand-title {
  margin: 88px 0 24px;
  color: #20bcb0;
  font-size: 36px;
  line-height: 1.08;
  text-align: center;
  font-weight: 900;
}
.login-actions {
  display: grid;
  gap: 14px;
}
.login-actions button,
.form-submit,
.sheet-actions button,
.secondary-wide,
.locked-feature {
  height: 58px;
  border-radius: 30px;
  color: #fff;
  background: linear-gradient(135deg, #16c7a8, #38e2d5);
  font-size: 20px;
  font-weight: 900;
  box-shadow: 0 12px 22px rgba(24, 199, 179, .18);
}
.login-actions button:nth-child(2) {
  background: linear-gradient(135deg, #57cad7, #75e6df);
}
.login-actions button:nth-child(3),
.login-actions .guest,
.sheet-actions .light,
.privacy-modal .light,
.auth-cancel {
  color: #20bca5;
  background: #c9f7eb;
  box-shadow: none;
}
.login-tip {
  position: relative;
  margin-top: 26px;
  padding: 14px 16px;
  border-radius: 3px;
  color: #fff;
  background: rgba(128, 128, 128, .45);
  font-size: 15px;
  line-height: 1.55;
}
.mini-agree {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #a8a8a8;
  font-size: 14px;
}
.mini-agree input {
  width: 18px;
  height: 18px;
  accent-color: #22c7b3;
}
.mini-form-screen .form-title {
  margin-top: 80px;
  color: #fff;
  font-size: 22px;
}
.mini-input {
  width: 100%;
  height: 58px;
  margin-top: 22px;
  padding: 0 28px;
  border: 0;
  border-radius: 30px;
  color: #333;
  background: #fff;
  font-size: 20px;
}
.code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  gap: 12px;
  align-items: end;
}
.code-row button {
  height: 56px;
  border-radius: 28px;
  color: #fff;
  background: linear-gradient(135deg, #1fc5ac, #6ddbe3);
  font-weight: 900;
}
.mini-form-screen .form-submit {
  width: 75%;
  margin: 100px auto 0;
  display: block;
}
.mini-form-screen p,
.login-sheet p {
  color: #8a8a8a;
  font-size: 13px;
  line-height: 1.55;
}
.modal-mask,
.sheet-mask {
  position: absolute;
  z-index: 20;
  inset: 0;
  background: rgba(0,0,0,.48);
}
.privacy-modal,
.auth-sheet {
  position: absolute;
  z-index: 24;
  left: 30px;
  right: 30px;
  top: 145px;
  padding: 26px 22px 24px;
  border-radius: 10px;
  background: #fff;
  text-align: center;
}
.privacy-modal.compact { top: 250px; }
.privacy-brand,
.auth-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
}
.privacy-brand span,
.mini-logo {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #00a887;
  font-weight: 900;
}
.privacy-modal h3,
.auth-sheet h3 {
  margin: 0 0 14px;
  color: #333;
  font-size: 23px;
}
.privacy-modal p {
  margin: 0 0 18px;
  color: #454545;
  font-size: 16px;
  line-height: 1.62;
  text-align: left;
}
.privacy-modal .privacy-links {
  color: #11a995;
  text-align: center;
  font-weight: 800;
}
.privacy-modal button,
.auth-sheet button {
  width: 100%;
  height: 50px;
  margin-top: 10px;
  border-radius: 25px;
  color: #fff;
  background: linear-gradient(135deg, #16c7a8, #35ded0);
  font-size: 18px;
  font-weight: 900;
}
.auth-sheet {
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  border-radius: 24px 24px 0 0;
  text-align: left;
}
.auth-head { justify-content: flex-start; margin-bottom: 16px; }
.auth-head i {
  margin-left: auto;
  color: #999;
  font-style: normal;
}
.auth-sheet h3 { text-align: left; }
.auth-sheet p { color: #8b8b8b; }
.auth-sheet button {
  height: 58px;
  color: #222;
  background: #fff;
  border-radius: 0;
  box-shadow: 0 1px 0 #eee;
}
.auth-sheet button small {
  display: block;
  color: #17a66a;
}
.auth-sheet .auth-cancel {
  margin-top: 16px;
  color: #222;
  background: #fff;
  border-radius: 4px;
}
.login-sheet {
  position: absolute;
  z-index: 22;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 610px;
  padding: 28px 20px 32px;
  border-radius: 24px 24px 0 0;
  background: #fff;
}
.login-sheet h3 {
  margin: 0;
  color: #111;
  font-size: 24px;
  text-align: center;
}
.login-sheet > p {
  margin: 8px 0 18px;
  text-align: center;
}
.login-sheet > p b { color: #ff3333; }
.sheet-close {
  position: absolute;
  top: 24px;
  right: 22px;
  color: #666;
  font-size: 32px;
}
.recent-label {
  margin: 18px 0 8px;
  color: #222;
  font-size: 18px;
}
.game-picker-list,
.role-picker-list {
  display: grid;
  gap: 12px;
}
.game-picker-list button,
.role-picker-list button {
  min-height: 78px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #f8f8f8;
  text-align: left;
}
.game-picker-list span,
.role-picker-list span {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #bc7d46, #78442e);
  font-size: 20px;
  font-weight: 900;
}
.game-picker-list b,
.role-picker-list b {
  display: block;
  color: #111;
  font-size: 20px;
}
.game-picker-list small,
.role-picker-list small {
  color: #8c8c8c;
  font-size: 14px;
}
.game-picker-list em {
  color: #18b09b;
  font-style: normal;
}
.letter-index {
  position: absolute;
  right: 10px;
  top: 146px;
  width: 14px;
  color: #8190a4;
  font-size: 14px;
  line-height: 1.8;
  word-break: break-all;
}
.role-picker-list button.selected i {
  width: 24px;
  height: 24px;
  border: 3px solid #68dce0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px #fff;
  background: #68dce0;
}
.role-picker-list button:not(.selected) i {
  width: 24px;
  height: 24px;
  border: 2px solid #cfcfcf;
  border-radius: 50%;
}
.switch-link {
  width: 100%;
  margin: 14px 0;
  color: #08a2ff;
  font-size: 17px;
  font-weight: 800;
}
.sheet-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.empty-figure {
  width: 94px;
  height: 94px;
  display: grid;
  place-items: center;
  margin: 38px auto 20px;
  border-radius: 50%;
  color: #8da6c6;
  background: #eef3f8;
  font-size: 34px;
}
.empty-title {
  display: block;
  margin-bottom: 28px;
  color: #858585;
  text-align: center;
  font-size: 20px;
}
.server-select {
  width: 100%;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 28px;
  padding: 0 28px;
  border-radius: 30px;
  color: #aaa;
  background: #f1f1f1;
  font-size: 20px;
  text-align: left;
}
.mini-home-screen,
.mini-member-screen {
  height: 100%;
  padding: 90px 18px 24px;
  background: #fff;
}
.mini-home-screen:before,
.member-head:before {
  content: "";
  position: absolute;
  left: -40px;
  right: -40px;
  top: 0;
  height: 250px;
  border-radius: 0 0 50% 50%;
  background: linear-gradient(160deg, #18cdb2, #82edd7);
}
.mini-home-head,
.member-head {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) 110px;
  align-items: center;
  gap: 12px;
  color: #fff;
}
.guest-avatar,
.role-avatar {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #23b7ad;
  background: #eef8f7;
  font-size: 30px;
  font-weight: 900;
}
.mini-home-head b,
.member-head b {
  font-size: 24px;
}
.mini-home-head button,
.member-head button {
  height: 45px;
  border-radius: 24px;
  color: #053d39;
  background: #fff;
  font-size: 18px;
  font-weight: 900;
}
.post-card {
  position: relative;
  z-index: 2;
  min-height: 118px;
  margin-top: 18px;
  padding: 20px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, #c97050, #7d6a83);
  overflow: hidden;
}
.post-card:first-of-type { margin-top: 86px; }
.post-card b,
.post-card span { display: block; }
.post-card b { font-size: 22px; }
.post-card span { margin-top: 10px; font-size: 20px; }
.art-card {
  background:
    linear-gradient(135deg, rgba(210,96,60,.2), rgba(30,30,70,.36)),
    radial-gradient(circle at 72% 30%, #ffe4a6, transparent 32%),
    linear-gradient(135deg, #d26d4a, #514f81);
}
.locked-feature,
.secondary-wide {
  width: 100%;
  margin-top: 18px;
}
.member-head small {
  display: block;
  margin-top: 4px;
  color: rgba(255,255,255,.86);
}
.member-card,
.trust-card,
.gift-list,
.risk-note {
  position: relative;
  z-index: 2;
}
.member-card {
  margin-top: 84px;
  padding: 22px;
  border-radius: 10px;
  color: #5d390b;
  background: linear-gradient(135deg, #fff3c2, #f1b967);
  box-shadow: 0 16px 28px rgba(143, 92, 26, .16);
}
.member-card span {
  display: inline-flex;
  height: 28px;
  align-items: center;
  padding: 0 10px;
  border-radius: 6px;
  background: rgba(255,255,255,.45);
  font-weight: 900;
}
.member-card b,
.member-card small {
  display: block;
  margin-top: 10px;
}
.trust-card {
  margin-top: 14px;
  padding: 14px;
  border-radius: 8px;
  color: #0f766e;
  background: #e9fffb;
}
.trust-card b,
.trust-card span { display: block; }
.gift-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
.gift-list article {
  min-height: 66px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #edf1f5;
  border-radius: 8px;
  background: #fff;
}
.gift-list b,
.gift-list small { display: block; }
.gift-list small { margin-top: 6px; color: #858b96; }
.risk-note {
  margin-top: 14px;
  padding: 12px;
  border-radius: 8px;
  color: #8a4b04;
  background: #fff8e6;
  line-height: 1.55;
}
.interaction-panel {
  display: grid;
  gap: 12px;
}
.interaction-panel section {
  padding: 14px 16px;
  border: 1px solid #dce7f2;
  border-radius: 8px;
  background: #f9fcff;
}
.interaction-panel h4 {
  margin: 0 0 10px;
  color: #14233f;
  font-size: 15px;
}
.interaction-panel dl {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 8px 12px;
  margin: 0;
}
.interaction-panel dt { color: #8a96aa; }
.interaction-panel dd { margin: 0; color: #24324a; font-weight: 700; }
.interaction-panel ul,
.interaction-panel ol {
  margin: 0;
  padding-left: 18px;
  color: #4b5b73;
  line-height: 1.7;
}
.reference-panel {
  padding: 14px;
  max-height: calc(100vh - 118px);
  overflow: auto;
}
.reference-panel figure {
  margin: 14px 0 0;
  border: 1px solid #e3ebf4;
  border-radius: 8px;
  overflow: hidden;
  background: #f7fbff;
}
.reference-panel img {
  display: block;
  width: 100%;
}
.reference-panel figcaption {
  padding: 8px 10px;
  color: #4b5b73;
  font-weight: 800;
}

/* joylink framework alignment */
:root {
  --el-border-radius-base: 6px;
  --el-color-primary: var(--primary);
  --el-color-primary-rgb: 0, 83, 209;
  --el-color-primary-light-5: #80ace8;
  --el-color-primary-light-7: #b3cbf1;
  --el-color-primary-light-8: #cce0f6;
  --el-color-primary-light-9: #e5f0fb;
  --el-color-primary-dark-2: var(--primary-dark);
  --el-text-color-primary: #23345f;
  --el-text-color-regular: #415175;
  --el-text-color-secondary: #7d8aa5;
  --el-text-color-placeholder: #a4afc3;
  --el-bg-color: #ffffff;
  --el-border-color: #e2e7f0;
  --el-border-color-light: #eaedf4;
  --el-border-color-lighter: #f0f3f8;
  --wb-page-bg:
    radial-gradient(circle at top right, rgba(205, 225, 255, .7), transparent 32%),
    linear-gradient(180deg, #eef5ff 0%, #f5f8fc 52%, #f8fbff 100%);
  --wb-panel-strong: #ffffff;
  --wb-table-header-bg: #f7f8fb;
  --wb-table-row-hover-bg: rgba(var(--el-color-primary-rgb), .05);
  --wb-shell-control-bg: rgba(255,255,255,.56);
  --wb-shell-control-hover-bg: rgba(255,255,255,.82);
  --wb-card-shadow: 0 8px 24px rgba(31, 42, 68, .05);
  --wb-popover-shadow: 0 12px 32px rgba(15, 23, 42, .14);
  --wb-radius-lg: 12px;
  --wb-radius-md: 10px;
  --wb-topbar-height: 60px;
}

body {
  background: var(--wb-page-bg);
  font-size: 14px;
  line-height: 1.5;
}

button,
input,
table,
textarea,
select,
.sidebar,
.tabs,
.profile-panel,
.user-drawer,
.version-page,
.channel-panel {
  font-size: 14px;
}

input {
  height: 32px;
  border-color: var(--el-border-color);
  border-radius: var(--el-border-radius-base);
  color: var(--el-text-color-primary);
}

.app { background: transparent; }

.topbar {
  height: var(--wb-topbar-height);
  grid-template-columns: 180px 168px 1fr 150px;
  gap: 8px;
  padding: 0 20px 0 0;
  border-top: 0;
  background: transparent;
}

.brand {
  gap: 8px;
  padding-left: 14px;
}

.brand img {
  width: 24px;
  height: 24px;
}

.brand strong {
  color: var(--el-text-color-primary);
  font-size: 14px;
  font-weight: 700;
}

.topnav {
  gap: 0;
  height: var(--wb-topbar-height);
}

.topnav button {
  height: var(--wb-topbar-height);
  padding: 0 17px;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  font-weight: 500;
}

.topnav button.active {
  color: var(--el-text-color-primary);
  font-weight: 600;
}

.topnav button.active:after {
  left: 50%;
  right: auto;
  bottom: 12px;
  width: 20px;
  height: 3px;
  transform: translateX(-50%);
  background: var(--el-color-primary);
}

.header-game-filter {
  width: 168px;
  height: 36px;
  border: 1px solid rgba(var(--el-color-primary-rgb), .16);
  border-radius: 999px;
  background: var(--wb-shell-control-bg);
  box-shadow: none;
}

.header-game-filter:hover {
  background: var(--wb-shell-control-hover-bg);
  border-color: rgba(var(--el-color-primary-rgb), .3);
  box-shadow: 0 4px 12px rgba(var(--el-color-primary-rgb), .08);
}

.game-select-trigger {
  grid-template-columns: 26px minmax(0, 1fr) 10px;
  gap: 8px;
  padding: 0 12px 0 6px;
}

.game-select-trigger img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  box-shadow: none;
}

.game-select-trigger span {
  color: var(--el-text-color-primary);
  font-size: 14px;
  font-weight: 600;
}

.game-select-trigger i {
  border-color: var(--el-text-color-secondary);
}

.game-select-menu.game-version-menu {
  width: 674px;
  left: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--el-border-color-lighter);
  border-radius: var(--wb-radius-md);
  background: var(--el-bg-color);
  box-shadow: var(--wb-popover-shadow);
}

.game-menu-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--el-border-color-lighter);
  background: #fff;
}

.game-menu-tools input {
  width: 220px;
  height: 32px;
  font-size: 14px;
}

.game-menu-tools label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--el-text-color-secondary);
  white-space: nowrap;
}

.game-menu-tools .check {
  width: 12px;
  height: 12px;
  border: 1px solid var(--el-border-color);
  border-radius: 3px;
  background: #fff;
}

.game-menu-tools .check.on {
  border-color: var(--el-color-primary);
  background: var(--el-color-primary);
  box-shadow: inset 0 0 0 2px #fff;
}

.game-menu-tools button {
  height: 32px;
  padding: 0 12px;
  border-radius: var(--el-border-radius-base);
  color: var(--el-color-primary);
  background: var(--el-color-primary-light-9);
  font-weight: 600;
}

.game-menu-body {
  display: grid;
  gap: 0;
  padding: 8px 0;
}

.game-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: flex-start;
  gap: 8px;
  min-height: 44px;
  padding: 7px 12px;
}

.game-row.active {
  background: rgba(var(--el-color-primary-rgb), .04);
}

.game-row-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--el-text-color-primary);
}

.game-row-name img {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  object-fit: cover;
}

.game-row-name strong {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.version-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 1px;
}

.version-item {
  height: 28px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--el-text-color-regular);
  background: transparent;
  font-size: 14px;
  white-space: nowrap;
}

.version-item:hover {
  color: var(--el-color-primary);
  background: var(--el-color-primary-light-9);
}

.version-item.active {
  color: var(--el-color-primary);
  border-color: var(--el-color-primary-light-7);
  background: var(--el-color-primary-light-9);
  font-weight: 600;
}

.profile .avatar {
  height: 36px;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
  font-size: 14px;
}

.profile .avatar i {
  width: 32px;
  height: 32px;
  background: var(--el-color-primary);
}

.grid,
.header-download {
  width: 32px;
  height: 32px;
}

.main {
  padding: 0 16px 16px;
}

.sidebar {
  padding-top: 8px;
}

.sidebar h2,
.sidebar button {
  font-size: 14px;
}

.tabs {
  height: 36px;
  border-radius: var(--wb-radius-md);
}

.tabs button {
  height: 26px;
  font-size: 14px;
}

.user-list-toolbar {
  min-height: 44px;
  gap: 12px;
  margin-top: 12px;
  padding: 0;
}

.user-list-title h3 {
  color: var(--el-text-color-primary);
  font-size: 14px;
  font-weight: 700;
}

.user-list-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.user-list-filters input,
.user-list-filters .select-trigger,
.apply-filter input,
.apply-filter button,
.filters input,
.filters .select-trigger {
  height: 32px;
  border: 1px solid var(--el-border-color);
  border-radius: var(--el-border-radius-base);
  background: var(--el-bg-color);
  color: var(--el-text-color-primary);
  font-size: 14px;
  box-shadow: none;
}

.user-list-filters input {
  width: 220px;
}

.select-trigger {
  padding: 0 10px;
  color: var(--el-text-color-primary);
}

.select-trigger i,
.select-menu button:after {
  border-color: var(--el-text-color-secondary);
}

.select-menu {
  top: calc(100% + 4px);
  padding: 4px;
  border-color: var(--el-border-color-lighter);
  border-radius: var(--el-border-radius-base);
  box-shadow: var(--wb-popover-shadow);
}

.select-menu button {
  height: 30px;
  font-size: 14px;
  border-radius: 4px;
}

.select-menu button:hover,
.select-menu button.active {
  color: var(--el-color-primary);
  background: var(--el-color-primary-light-9);
}

.table-card,
.user-list-table-card,
.compact-table {
  border: 0;
  border-radius: var(--wb-radius-lg);
  background: var(--wb-panel-strong);
  box-shadow: var(--wb-card-shadow);
}

table {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

th {
  height: 44px;
  color: var(--el-text-color-secondary);
  background: var(--wb-table-header-bg);
  font-size: 14px;
  font-weight: 600;
}

td {
  color: var(--el-text-color-regular);
  font-size: 14px;
}

tbody tr:hover td {
  background: var(--wb-table-row-hover-bg);
}

.tag,
.pill,
.currency,
.pager,
.ops,
.link-actions button,
.pass-actions,
.version-row,
.version-head,
.channel-panel,
.inner-nav,
.system-toolbar,
.menu-row {
  font-size: 14px;
}

body [class],
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body p,
body th,
body td,
body button,
body input,
body label,
body small,
body strong,
body b,
body em,
body span {
  font-size: 14px;
}

.game-select-trigger img,
.game-row-name img,
.profile .avatar i,
.brand img {
  font-size: 0;
}

/* Header typography overrides */
.topbar .brand strong {
  font-size: 18px;
  line-height: 22px;
}

.topbar .topnav button,
.topbar .topnav button span {
  font-size: 16px;
  line-height: 20px;
}

.topbar .profile .avatar {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  min-width: max-content;
  white-space: nowrap;
}

.topbar .profile .avatar span,
.topbar .profile .avatar em {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Game and version selector: Tiangong layout with Joylink colors */
.game-select-menu.game-version-menu {
  width: 674px;
  border-color: rgba(var(--el-color-primary-rgb), .18);
  border-radius: 8px;
  background: rgba(255, 255, 255, .98);
}

.game-menu-tools {
  height: 52px;
  gap: 16px;
  padding: 10px 14px;
  border-bottom-color: rgba(var(--el-color-primary-rgb), .14);
  background: rgba(var(--el-color-primary-rgb), .045);
}

.game-menu-tools input {
  width: 200px;
  height: 28px;
  padding: 0 10px;
  border-color: #cbd9e8;
  border-radius: 6px;
  background: rgba(255, 255, 255, .9);
}

.game-menu-tools label {
  gap: 8px;
  color: #415175;
  font-weight: 500;
}

.game-menu-tools .check {
  position: relative;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border-radius: 2px;
}

.game-menu-tools .check.on {
  box-shadow: none;
}

.game-menu-tools .check.on::after {
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
  content: "";
}

.game-select-menu.game-version-menu .game-menu-tools button {
  width: auto;
  height: 30px;
  display: inline-flex;
  grid-template-columns: none;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-left: auto;
  padding: 0 14px;
  border: 1px solid rgba(var(--el-color-primary-rgb), .34);
  border-radius: 6px;
  color: var(--el-color-primary);
  background: rgba(255, 255, 255, .76);
  text-align: center;
}

.game-menu-body {
  display: block;
  padding: 0 14px;
}

.game-row {
  grid-template-columns: 118px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 51px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(var(--el-color-primary-rgb), .13);
}

.game-row:last-child {
  border-bottom: 0;
}

.game-row.active {
  background: transparent;
}

.game-row-name {
  gap: 8px;
}

.game-row-name img {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}

.game-row-name strong {
  color: #283b5f;
  font-weight: 700;
}

.version-list {
  display: grid;
  grid-template-columns: repeat(3, 124px);
  gap: 7px 8px;
  padding: 0;
}

.game-select-menu.game-version-menu .version-item {
  width: 124px;
  height: 30px;
  display: inline-flex;
  grid-template-columns: none;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0 10px;
  border: 1px solid #cddbea;
  border-radius: 6px;
  color: #415175;
  background: #f8fbfe;
  text-align: center;
}

.game-select-menu.game-version-menu .version-item:hover {
  color: var(--el-color-primary);
  border-color: rgba(var(--el-color-primary-rgb), .5);
  background: var(--el-color-primary-light-9);
}

.game-select-menu.game-version-menu .version-item.active {
  color: #fff;
  border-color: var(--el-color-primary);
  background: var(--el-color-primary);
  font-weight: 700;
}

/* User tag settings */
.tag-config-toolbar {
  align-items: center;
}

.compact-action {
  height: 32px;
  padding: 0 14px;
  border-radius: var(--el-border-radius-base);
  font-weight: 700;
}

.tag-config-card table {
  min-width: 1160px;
}

.tag-config-card {
  height: calc(100vh - 164px);
  min-height: 360px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.tag-config-card .table-scroll {
  min-height: 0;
  flex: 1;
  overflow: auto;
}

.tag-config-card thead th {
  position: sticky;
  z-index: 3;
  top: 0;
}

.tag-config-card .tag-pagination {
  position: sticky;
  z-index: 4;
  bottom: 0;
  flex: 0 0 58px;
}

.user-list-table-card:not(.tag-config-card) {
  height: calc(100vh - 164px);
  min-height: 360px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.user-list-table-card:not(.tag-config-card) .table-scroll {
  min-height: 0;
  flex: 1;
  overflow: auto;
}

.user-list-table-card:not(.tag-config-card) thead th {
  position: sticky;
  z-index: 3;
  top: 0;
}

.user-list-table-card:not(.tag-config-card) .user-pagination {
  position: sticky;
  z-index: 4;
  bottom: 0;
  flex: 0 0 58px;
}

.tag-config-card td:first-child b {
  color: var(--el-text-color-primary);
  font-weight: 700;
}

.field-param-text {
  max-width: 260px;
  overflow: hidden;
  color: var(--el-text-color-regular);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operation-time {
  color: var(--el-text-color-secondary);
  white-space: nowrap;
}

.tag-config-card .ops {
  white-space: nowrap;
}

.tag-config-card .ops button + button {
  margin-left: 12px;
}

.tag-config-card .ops .danger-link {
  color: #ff4d4f;
}

.field-type {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  color: var(--el-color-primary);
  background: var(--el-color-primary-light-9);
  border: 1px solid var(--el-color-primary-light-7);
}

.switch-control {
  position: relative;
  width: 38px;
  height: 20px;
  border-radius: 999px;
  background: #c8d2e1;
  transition: background .18s ease;
}

.switch-control span {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(20, 38, 68, .22);
  transition: transform .18s ease;
}

.switch-control.on {
  background: var(--el-color-primary);
}

.switch-control.on span {
  transform: translateX(18px);
}

.field-modal-mask {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(15, 23, 42, .24);
}

.field-modal {
  position: fixed;
  z-index: 71;
  top: 50%;
  left: 50%;
  width: 640px;
  max-width: calc(100vw - 48px);
  transform: translate(-50%, -50%);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .22);
  overflow: visible;
}

.field-modal header {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  border-bottom: 1px solid var(--el-border-color-lighter);
}

.field-modal h3 {
  margin: 0;
  color: var(--el-text-color-primary);
  font-weight: 700;
}

.field-modal header button {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--el-text-color-secondary);
}

.field-modal header button:hover {
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}

.field-form {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.field-form label {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

.field-form label > span {
  padding-top: 8px;
  color: var(--el-text-color-regular);
  font-weight: 600;
}

.field-form label em {
  color: var(--danger);
  font-style: normal;
}

.field-form input,
.field-form textarea,
.field-form .select-trigger {
  width: 100%;
  height: 32px;
  border: 1px solid var(--el-border-color);
  border-radius: var(--el-border-radius-base);
  background: #fff;
  color: var(--el-text-color-primary);
  font-size: 14px;
}

.field-form textarea {
  min-height: 72px;
  padding: 8px 10px;
  resize: vertical;
  outline: none;
  font-family: inherit;
}

.field-form textarea:focus {
  border-color: var(--el-color-primary);
  box-shadow: 0 0 0 2px rgba(var(--el-color-primary-rgb), .12);
}

.field-form .filter-select {
  width: 100%;
}

.param-cell {
  position: relative;
  display: inline-flex;
  max-width: 360px;
}

.param-cell > button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--el-border-color);
  border-radius: var(--el-border-radius-base);
  color: var(--el-text-color-regular);
  background: #fff;
}

.param-cell > button i {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-right: 1.5px solid var(--el-text-color-secondary);
  border-bottom: 1.5px solid var(--el-text-color-secondary);
  transform: rotate(45deg) translateY(-2px);
}

.param-cell > button:hover {
  color: var(--el-color-primary);
  border-color: var(--el-color-primary-light-7);
  background: var(--el-color-primary-light-9);
}

.param-detail-popover {
  position: absolute;
  z-index: 45;
  top: calc(100% + 8px);
  left: 0;
  width: 420px;
  padding: 12px;
  border: 1px solid var(--el-border-color-lighter);
  border-radius: var(--wb-radius-md);
  background: #fff;
  box-shadow: var(--wb-popover-shadow);
}

.param-detail-popover h4 {
  margin: 0 0 10px;
  color: var(--el-text-color-primary);
  font-weight: 700;
}

.param-detail-popover p {
  margin: 10px 0 0;
  color: var(--el-text-color-secondary);
  line-height: 1.5;
}

.warehouse-param-list,
.param-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.warehouse-param-list span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 0 8px;
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 999px;
  background: #f8fbff;
}

.warehouse-param-list b,
.param-options b {
  color: var(--el-color-primary);
  font-family: "SF Mono", SFMono-Regular, Consolas, monospace;
  font-weight: 700;
}

.warehouse-param-list em {
  color: var(--el-text-color-secondary);
  font-style: normal;
}

.source-toggle {
  position: relative;
  display: inline-flex;
  gap: 6px;
  padding: 3px;
  overflow: hidden;
  border: 1px solid var(--el-border-color);
  border-radius: var(--el-border-radius-base);
  background: var(--el-fill-color-light);
}

.source-toggle::before {
  position: absolute;
  z-index: 0;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 12px) / 2);
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(31, 42, 68, .1);
  transition: transform .2s ease;
  content: "";
}

.source-toggle.external::before {
  transform: translateX(calc(100% + 6px));
}

.source-toggle button {
  position: relative;
  z-index: 1;
  height: 28px;
  padding: 0 14px;
  border-radius: 4px;
  color: var(--el-text-color-secondary);
  transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}

.source-toggle button.active {
  color: var(--el-color-primary);
  background: transparent;
  box-shadow: none;
  font-weight: 700;
}

.param-picker {
  display: grid;
  gap: 10px;
}

.field-source-panel {
  min-width: 0;
  animation: field-source-panel-in .2s ease both;
}

@keyframes field-source-panel-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.internal-param-picker,
.internal-param-select {
  position: relative;
  width: 100%;
}

.internal-param-trigger {
  width: 100%;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 10px;
  border: 1px solid var(--el-border-color);
  border-radius: var(--el-border-radius-base);
  color: var(--el-text-color-placeholder);
  background: #fff;
  text-align: left;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.internal-param-trigger:hover,
.internal-param-trigger.open {
  border-color: var(--el-color-primary);
  box-shadow: 0 0 0 2px rgba(var(--el-color-primary-rgb), .1);
}

.internal-param-trigger > span {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  white-space: nowrap;
}

.internal-param-trigger b,
.single-param-options b {
  color: var(--el-color-primary);
  font-family: "SF Mono", SFMono-Regular, Consolas, monospace;
  font-weight: 700;
}

.internal-param-trigger em,
.single-param-options em {
  overflow: hidden;
  color: var(--el-text-color-regular);
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.internal-param-trigger > i {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-right: 1.5px solid var(--el-text-color-secondary);
  border-bottom: 1.5px solid var(--el-text-color-secondary);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .18s ease;
}

.internal-param-trigger.open > i {
  transform: rotate(225deg) translate(-1px, -1px);
}

.internal-param-popover {
  position: absolute;
  z-index: 82;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  overflow: hidden;
  border: 1px solid var(--el-border-color);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--wb-popover-shadow);
  animation: field-source-panel-in .16s ease both;
}

.internal-param-search {
  padding: 10px;
  border-bottom: 1px solid var(--el-border-color-lighter);
  background: #f8fbff;
}

.field-form .internal-param-search input {
  height: 32px;
  padding: 0 10px;
  background: #fff;
}

.single-param-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  max-height: 236px;
  overflow-y: auto;
  padding: 4px 0;
}

.param-options.single-param-options button {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: #fff;
  text-align: left;
}

.param-options.single-param-options button[hidden] {
  display: none;
}

.single-param-options button > span {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.single-param-options button > i {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border: 1px solid var(--el-border-color);
  border-radius: 50%;
}

.param-options.single-param-options button:hover,
.param-options.single-param-options button.active {
  color: var(--el-color-primary);
  background: var(--el-color-primary-light-9);
}

.single-param-options button.active > i {
  border: 4px solid var(--el-color-primary);
  background: #fff;
}

.param-search-empty {
  margin: 0;
  padding: 24px 12px;
  color: var(--el-text-color-placeholder);
  text-align: center;
}

.param-search-empty[hidden] {
  display: none;
}

.external-param-picker textarea {
  margin-top: 0;
}

.param-picker-head {
  color: var(--el-text-color-secondary);
  font-weight: 600;
}

.param-options button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--el-border-color);
  border-radius: 999px;
  color: var(--el-text-color-regular);
  background: #fff;
}

.param-options button span {
  color: var(--el-text-color-secondary);
}

.param-options button:hover,
.param-options button.active {
  border-color: var(--el-color-primary-light-7);
  color: var(--el-color-primary);
  background: var(--el-color-primary-light-9);
}

.param-options button.active span {
  color: var(--el-color-primary);
}

.field-modal footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 18px 18px;
  border-top: 1px solid var(--el-border-color-lighter);
}

.field-modal footer button {
  height: 32px;
  padding: 0 16px;
  border-radius: var(--el-border-radius-base);
  border: 1px solid var(--el-border-color);
  background: #fff;
}

.field-modal footer .primary-action {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-bright));
}

.field-form-error {
  margin: -4px 0 0 124px;
  color: #ff4d4f;
}

.delete-field-mask {
  position: fixed;
  z-index: 86;
  inset: 0;
  background: rgba(15, 23, 42, .28);
}

.delete-field-confirm {
  position: fixed;
  z-index: 87;
  top: 50%;
  left: 50%;
  width: 420px;
  max-width: calc(100vw - 40px);
  padding: 24px 24px 20px;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 20px 54px rgba(15, 23, 42, .24);
  text-align: center;
}

.delete-field-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
  border-radius: 50%;
  color: #ff4d4f;
  background: #fff1f2;
  font-weight: 800;
}

.delete-field-confirm h3 {
  margin: 0;
  color: var(--el-text-color-primary);
  font-weight: 700;
}

.delete-field-confirm p {
  margin: 10px 0 6px;
  color: var(--el-text-color-primary);
}

.delete-field-confirm > span {
  display: block;
  color: var(--el-text-color-secondary);
  line-height: 1.6;
}

.delete-field-confirm footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}

.delete-field-confirm footer button {
  height: 32px;
  padding: 0 16px;
  border: 1px solid var(--el-border-color);
  border-radius: var(--el-border-radius-base);
  background: #fff;
}

.delete-field-confirm footer .confirm-delete {
  border-color: #ff4d4f;
  color: #fff;
  background: #ff4d4f;
}

/* User list field configuration */
.field-settings-trigger {
  height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 11px;
  border: 1px solid var(--el-border-color);
  border-radius: var(--el-border-radius-base);
  color: var(--el-color-primary);
  background: rgba(255, 255, 255, .72);
  white-space: nowrap;
}

.field-settings-trigger:hover {
  border-color: var(--el-color-primary-light-7);
  background: var(--el-color-primary-light-9);
}

.field-settings-trigger span {
  color: var(--el-color-primary);
  font-size: 16px;
}

.source-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--el-color-primary-light-7);
  border-radius: 4px;
  color: var(--el-color-primary);
  background: var(--el-color-primary-light-9);
  white-space: nowrap;
}

.source-badge.external {
  border-color: #e3d5f6;
  color: #7d52b8;
  background: #f7f1ff;
}

.field-settings-mask {
  position: fixed;
  z-index: 84;
  inset: 0;
  background: rgba(20, 34, 58, .28);
  backdrop-filter: blur(1px);
}

.field-settings-modal {
  position: fixed;
  z-index: 85;
  top: 50%;
  left: 50%;
  width: 960px;
  max-width: calc(100vw - 48px);
  height: 660px;
  max-height: calc(100vh - 48px);
  display: grid;
  grid-template-rows: 64px minmax(0, 1fr) 62px;
  overflow: hidden;
  transform: translate(-50%, -50%);
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 24px 64px rgba(24, 42, 78, .24);
}

.field-settings-modal > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid var(--el-border-color-lighter);
}

.field-settings-modal > header h3,
.field-settings-modal > header p,
.field-settings-column-head h4,
.field-source-list h4 {
  margin: 0;
}

.field-settings-modal > header h3 {
  color: var(--el-text-color-primary);
  font-weight: 700;
}

.field-settings-modal > header p {
  margin-top: 2px;
  color: var(--el-text-color-secondary);
}

.field-settings-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--el-text-color-secondary);
  font-size: 20px;
}

.field-settings-close:hover {
  color: var(--el-color-primary);
  background: var(--el-color-primary-light-9);
}

.field-settings-body {
  min-height: 0;
  display: grid;
  grid-template-columns: 178px minmax(300px, 1fr) 322px;
}

.field-source-list {
  padding: 18px 12px;
  border-right: 1px solid var(--el-border-color-lighter);
  background: #f7f9fc;
}

.field-source-list h4 {
  padding: 0 10px 12px;
  color: var(--el-text-color-secondary);
  font-weight: 600;
}

.field-source-list > button {
  width: 100%;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  border-radius: 6px;
  color: var(--el-text-color-regular);
  text-align: left;
}

.field-source-list > button + button {
  margin-top: 4px;
}

.field-source-list > button em {
  color: var(--el-text-color-placeholder);
  font-style: normal;
}

.field-source-list > button:hover,
.field-source-list > button.active {
  color: var(--el-color-primary);
  background: var(--el-color-primary-light-9);
}

.field-source-list > button.active {
  font-weight: 700;
}

.field-source-list > button.active em {
  color: var(--el-color-primary);
}

.field-available-panel,
.field-selected-panel {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 54px auto minmax(0, 1fr);
}

.field-available-panel {
  border-right: 1px solid var(--el-border-color-lighter);
}

.field-selected-panel {
  grid-template-rows: 54px minmax(0, 1fr);
  background: #fbfcfe;
}

.field-settings-column-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  border-bottom: 1px solid var(--el-border-color-lighter);
}

.field-settings-column-head h4 {
  color: var(--el-text-color-primary);
  font-weight: 700;
}

.field-settings-column-head span {
  color: var(--el-text-color-secondary);
  white-space: nowrap;
}

.field-settings-search {
  padding: 10px 14px;
  border-bottom: 1px solid var(--el-border-color-lighter);
}

.field-settings-search input {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--el-border-color);
  border-radius: var(--el-border-radius-base);
  background: #fff;
}

.field-settings-search input:focus {
  border-color: var(--el-color-primary);
  box-shadow: 0 0 0 2px rgba(var(--el-color-primary-rgb), .1);
}

.field-check-list,
.selected-field-list {
  min-height: 0;
  overflow-y: auto;
  padding: 6px 10px 12px;
}

.field-check-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  gap: 6px 8px;
  padding: 10px 12px 14px;
}

.field-check-list > label {
  min-width: 0;
  height: 38px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 0 9px;
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}

.field-check-list > label:hover {
  border-color: var(--el-color-primary-light-7);
  background: var(--el-color-primary-light-9);
}

.field-check-list > label[hidden],
.field-search-empty[hidden] {
  display: none;
}

.field-check-list input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.field-check-list label > i {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border: 1px solid #c6d1e0;
  border-radius: 3px;
  background: #fff;
}

.field-check-list input:checked + i {
  border-color: var(--el-color-primary);
  background: var(--el-color-primary);
}

.field-check-list input:checked + i::after {
  width: 4px;
  height: 8px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg) translate(-1px, -1px);
  content: "";
}

.selected-field-row > span {
  min-width: 0;
}

.field-check-list label > b,
.selected-field-row b {
  display: block;
  overflow: hidden;
  color: var(--el-text-color-primary);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.field-check-list label > b {
  font-weight: 500;
}

.field-check-list small,
.selected-field-row small {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: var(--el-text-color-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.field-search-empty,
.selected-field-empty {
  margin: 0;
  padding: 34px 12px;
  color: var(--el-text-color-placeholder);
  text-align: center;
}

.field-check-list > .field-search-empty {
  grid-column: 1 / -1;
}

.selected-field-list {
  padding: 8px 10px 14px;
}

.selected-field-row {
  min-height: 48px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 6px;
  background: #fff;
}

.selected-field-row + .selected-field-row {
  margin-top: 6px;
}

.selected-field-row.dragging {
  opacity: .46;
}

.selected-field-row.drag-over {
  border-color: var(--el-color-primary);
  box-shadow: inset 0 2px 0 var(--el-color-primary);
}

.drag-handle {
  color: #aab5c6;
  font-style: normal;
  cursor: grab;
}

.field-sort-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.field-sort-actions button {
  width: 25px;
  height: 25px;
  border-radius: 4px;
  color: var(--el-text-color-secondary);
}

.field-sort-actions button:hover:not(:disabled) {
  color: var(--el-color-primary);
  background: var(--el-color-primary-light-9);
}

.field-sort-actions button:disabled {
  color: #d5dbe5;
  cursor: not-allowed;
}

.field-sort-actions .remove-field:hover {
  color: var(--danger);
  background: #fff1f2;
}

.field-settings-modal > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 20px;
  border-top: 1px solid var(--el-border-color-lighter);
  background: #fff;
}

.field-settings-modal > footer > span {
  color: var(--el-text-color-secondary);
}

.field-settings-modal > footer > div {
  display: flex;
  gap: 10px;
}

.field-settings-modal > footer button {
  height: 32px;
  padding: 0 18px;
  border: 1px solid var(--el-border-color);
  border-radius: var(--el-border-radius-base);
  background: #fff;
}

.field-settings-modal > footer .primary-action {
  border-color: var(--el-color-primary);
  color: #fff;
  background: var(--el-color-primary);
}

.field-settings-modal > footer .primary-action:disabled {
  border-color: #cbd5e1;
  background: #cbd5e1;
  cursor: not-allowed;
}

@media (max-width: 900px) {
  .field-settings-body {
    grid-template-columns: 142px minmax(260px, 1fr) 280px;
  }
  .field-settings-modal {
    max-width: calc(100vw - 24px);
  }
  .field-check-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* User list pagination, aligned with Tiangong */
.user-pagination {
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 14px;
  border-top: 1px solid var(--el-border-color-lighter);
  color: var(--el-text-color-primary);
  background: #fff;
}

.user-pagination button,
.user-pagination input,
.user-pagination select {
  height: 32px;
  border: 1px solid transparent;
  border-radius: var(--el-border-radius-base);
  color: var(--el-text-color-primary);
  background: #fff;
  font-variant-numeric: tabular-nums;
}

.user-pagination button {
  min-width: 32px;
  padding: 0 10px;
}

.user-pagination button:hover:not(:disabled):not(.active) {
  color: var(--el-color-primary);
  background: var(--el-color-primary-light-9);
}

.user-pagination button.active {
  border-color: var(--el-color-primary);
  color: #fff;
  background: var(--el-color-primary);
  font-weight: 700;
}

.user-pagination button.ghost {
  color: var(--el-text-color-secondary);
  background: #f3f6fa;
}

.user-pagination button:disabled {
  color: #c3cbd7;
  cursor: not-allowed;
}

.user-pagination button.ellipsis {
  background: transparent;
}

.user-pagination select {
  min-width: 96px;
  padding: 0 28px 0 10px;
  border-color: var(--el-border-color);
  outline: none;
}

.user-pagination input {
  width: 56px;
  padding: 0 8px;
  border-color: var(--el-border-color);
  text-align: center;
  outline: none;
}

.user-pagination select:focus,
.user-pagination input:focus {
  border-color: var(--el-color-primary);
  box-shadow: 0 0 0 2px rgba(var(--el-color-primary-rgb), .1);
}

@media (max-width: 760px) {
  .user-pagination {
    justify-content: flex-start;
    overflow-x: auto;
  }
}