/* 游戏运营台 · Operations Console
 * 深色高密度后台：侧栏导航 + 列表工作区 + 右侧管理操作。
 * 保留 RedeemHistory 使用的 .tableWrap / .rh-* 类名。
 */

:root {
  --bg: #0b111c;
  --bg-2: #101827;
  --panel: #141d2e;
  --panel-2: #18233a;
  --line: #243247;
  --line-soft: #1c2740;
  --text: #e6ecf5;
  --muted: #8b9bb4;
  --accent: #4b8cf5;
  --accent-soft: rgba(75, 140, 245, .14);
  --gold: #e8c473;
  --green: #3ddc97;
  --red: #ff7b7b;
  --warn: #f5a623;
  --radius: 12px;
  --shadow: 0 20px 44px rgba(3, 7, 14, .55);
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(1100px 620px at 12% -8%, #16233a 0%, transparent 60%),
    radial-gradient(900px 520px at 95% 0%, #14202f 0%, transparent 55%),
    var(--bg);
  color: var(--text);
  font: 14px/1.55 -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

code, kbd, pre, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
code { background: rgba(255, 255, 255, .07); padding: 1px 5px; border-radius: 5px; font-size: 12px; }

kbd {
  background: #1d2a41;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 11.5px;
  color: #c8d6ea;
}

a { color: var(--accent); }

/* ---------------- buttons ---------------- */

button {
  font: inherit;
  cursor: pointer;
  border-radius: 9px;
  border: 1px solid transparent;
  padding: 9px 15px;
  background: var(--accent);
  color: #fff;
  transition: filter .15s ease, background .15s ease, border-color .15s ease, transform .05s ease;
}
button:hover { filter: brightness(1.07); }
button:active { transform: translateY(1px); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid rgba(75, 140, 245, .65);
  outline-offset: 1px;
}
button:disabled { opacity: .55; cursor: not-allowed; filter: none; }

button.primary { background: linear-gradient(180deg, #3f83f3, #2b63cf); font-weight: 600; box-shadow: 0 8px 20px rgba(43, 99, 207, .28); }
button.ghost { background: rgba(255, 255, 255, .035); border-color: var(--line); color: var(--text); }
button.ghost:hover { background: rgba(255, 255, 255, .08); }
button.danger { background: linear-gradient(180deg, #e05555, #b93c3c); }
button.danger.ghost { background: rgba(255, 123, 123, .12); border-color: rgba(255, 123, 123, .4); color: #ffb0b0; }
button.small { padding: 5px 10px; font-size: 12px; }
button.wide { width: 100%; padding: 11px 15px; }

/* ---------------- shell ---------------- */

.shell { display: grid; grid-template-columns: 258px minmax(0, 1fr); min-height: 100vh; }

.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 16px;
  background: linear-gradient(180deg, #111a2a, #0c1420);
  border-right: 1px solid var(--line);
  overflow: auto;
}

.brand { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
.brandMark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(145deg, #25344d, #16233a);
  border: 1px solid var(--line);
  color: var(--gold);
  font-size: 18px;
}
.brand strong { display: block; font-size: 12px; letter-spacing: 2px; color: #cbd8ea; }
.brand small { color: var(--muted); font-size: 11.5px; }

.identity {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 10px 11px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  font-size: 12px;
}
.identity .dot { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgba(61, 220, 151, .7); flex: 0 0 auto; }
.identity b { display: block; color: var(--text); font-size: 12.5px; overflow-wrap: anywhere; }
.identity small { color: var(--muted); }

.navSearch input { width: 100%; background: #0e1725; border: 1px solid var(--line); border-radius: 9px; padding: 8px 11px; color: var(--text); font-size: 12.5px; }

nav { display: flex; flex-direction: column; gap: 2px; }
.navGroup { margin-top: 10px; }
.navGroup > h5 {
  margin: 0 0 5px;
  padding: 0 8px;
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #64809f;
  font-weight: 600;
}
.navItem {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: #b6c6da;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
}
.navItem:hover { background: rgba(255, 255, 255, .05); color: #eaf1fb; }
.navItem.selected { background: linear-gradient(90deg, rgba(75, 140, 245, .22), rgba(75, 140, 245, .06)); color: #fff; box-shadow: inset 2px 0 0 var(--accent); }
.navItem .navName { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navItem .navTag { font-size: 10px; color: var(--muted); border: 1px solid var(--line); padding: 0 5px; border-radius: 999px; }
.navEmpty { color: var(--muted); font-size: 12px; padding: 8px 10px; }

.recent { border-top: 1px solid var(--line-soft); padding-top: 10px; }
.recent h4 { margin: 0 0 6px; font-size: 10.5px; letter-spacing: 1.2px; color: #64809f; text-transform: uppercase; }
.recent ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; max-height: 180px; overflow: auto; }
.recent li { font-size: 11.5px; color: var(--muted); border-left: 2px solid var(--line); padding-left: 7px; overflow-wrap: anywhere; }
.recent li.ok { border-color: rgba(61, 220, 151, .5); }
.recent li.err { border-color: rgba(255, 123, 123, .55); color: #ffb3b3; }

.sidebarFoot { margin-top: auto; display: flex; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.sidebarFoot button { flex: 1; }

main { padding: 24px 26px 40px; min-width: 0; }

/* ---------------- login ---------------- */

.loginCard {
  max-width: 460px;
  margin: 8vh auto;
  padding: 30px 28px 24px;
  background: linear-gradient(180deg, rgba(23, 34, 52, .85), #101827);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.eyebrow { font-size: 11px; letter-spacing: 2.4px; color: #6f8bad; text-transform: uppercase; }
.loginCard h1 { margin: 8px 0 6px; font-size: 24px; }
.loginCard form { display: flex; flex-direction: column; gap: 4px; margin-top: 18px; }
.loginCard label { margin: 10px 0; }
.note { color: var(--muted); font-size: 12.5px; }
.note.tiny { font-size: 11.5px; }

/* ---------------- page head ---------------- */

.pageHead { margin-bottom: 16px; }
.crumb { font-size: 11.5px; color: #6f8bad; letter-spacing: .4px; margin-bottom: 6px; }
.pageTitleRow { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.pageTitleRow h2 { margin: 0 0 4px; font-size: 23px; letter-spacing: .3px; }
.pageTitleRow p { margin: 0; color: var(--muted); font-size: 13px; max-width: 78ch; }
.toolbar { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------- cards ---------------- */

.card {
  background: linear-gradient(180deg, rgba(24, 35, 56, .92), rgba(17, 25, 40, .96));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: 0 10px 28px rgba(4, 8, 16, .35);
  min-width: 0;
}
.cardHead { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cardHead h3 { margin: 0; font-size: 15px; }
.cardHead .meta { margin-left: auto; }

.columns { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; margin-top: 16px; }
.listCard { padding-bottom: 12px; }
.actionCard { position: sticky; top: 18px; }

/* ---------------- KPI ---------------- */

.kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 12px; margin-top: 16px; }
.kpiCard {
  background: linear-gradient(160deg, rgba(32, 47, 74, .85), rgba(18, 27, 43, .9));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 15px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.kpiCard .label { font-size: 11.5px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.kpiCard .value { font-size: 25px; font-weight: 700; letter-spacing: .5px; }
.kpiCard .foot { font-size: 11px; color: #6f8bad; }
.kpiCard.actionable { cursor: pointer; }
.kpiCard.actionable:hover { border-color: rgba(75, 140, 245, .5); }
.kpiCard.stale .value { color: var(--muted); }
.quickCard { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 10px; }
.quickCard .quickTitle { font-size: 12px; color: var(--muted); letter-spacing: .4px; }
.quickLinks { display: flex; gap: 8px; flex-wrap: wrap; }
.quickLinks button { background: rgba(255, 255, 255, .04); border-color: var(--line); color: var(--text); }
.quickNote { font-size: 11.5px; color: #6f8bad; margin: 0; }

/* ---------------- forms ---------------- */

label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: #9fb0c7; font-weight: 600; margin: 8px 0; }
input, select, textarea {
  font: inherit;
  font-weight: 400;
  width: 100%;
  background: #0d1725;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 9px 11px;
  color: var(--text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder, textarea::placeholder { color: #5f7590; }
input:focus, select:focus, textarea:focus { border-color: #3f83f3; box-shadow: 0 0 0 3px rgba(63, 131, 243, .16); outline: none; }
input[type="checkbox"] { width: auto; }
textarea { min-height: 92px; resize: vertical; line-height: 1.5; font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; }

.queryForm { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.queryForm label { margin: 0; }
.queryForm .grow { flex: 1 1 300px; min-width: 220px; }
.queryForm .narrow { flex: 0 0 auto; }
.queryForm .narrow input { width: 84px; text-align: center; }
.queryForm .narrow select { width: 84px; }
.queryForm button { height: 38px; white-space: nowrap; }
.cursorInput { max-width: 260px; }

.listTools { display: flex; gap: 10px; align-items: center; margin: 10px 0 4px; flex-wrap: wrap; }
.listTools input { flex: 1 1 260px; max-width: 460px; }
.listTools .meta { color: var(--muted); font-size: 11.5px; }

.summary { margin: 8px 0; border: 1px solid var(--line-soft); border-radius: 10px; padding: 8px 11px; background: rgba(255, 255, 255, .02); }
.summary summary { cursor: pointer; font-size: 12px; color: #9fb0c7; }
.summary pre { margin: 8px 0 0; max-height: 240px; overflow: auto; font-size: 11.5px; line-height: 1.55; white-space: pre-wrap; color: #b9c8dc; }

/* ---------------- fields ---------------- */

.fields { display: flex; flex-direction: column; gap: 2px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field .fieldLabel { font-size: 12px; color: #9fb0c7; font-weight: 600; display: flex; flex-direction: row; gap: 6px; align-items: baseline; }
.field .fieldLabel .req { color: var(--red); }
.field .hint { font-size: 11px; color: #6f8bad; margin: 0; }
.field.error input, .field.error select, .field.error textarea { border-color: rgba(255, 123, 123, .65); }
.field .fieldError { font-size: 11.5px; color: #ff9d9d; margin: 0; }
.field .fieldOut { display: flex; gap: 8px; align-items: center; }

.switch { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: #b9c8dc; font-weight: 500; }
.switch input { appearance: none; width: 40px; height: 22px; border-radius: 999px; background: #24334b; border: 1px solid var(--line); position: relative; transition: background .15s ease; cursor: pointer; padding: 0; }
.switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #8b9bb4; transition: transform .15s ease, background .15s ease; }
.switch input:checked { background: rgba(61, 220, 151, .28); border-color: rgba(61, 220, 151, .5); }
.switch input:checked::after { transform: translateX(18px); background: var(--green); }

.dtRow { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.dtRow input { flex: 1 1 190px; }
.dtRow button { padding: 6px 9px; font-size: 11.5px; }
.dtValue { font-size: 11px; color: #6f8bad; }

.fieldError { color: #ff9d9d; font-size: 12.5px; margin: 6px 0 0; }
.hint { color: #6f8bad; font-size: 11.5px; margin: 2px 0 10px; }

.receiptBox { margin-top: 14px; border-top: 1px solid var(--line-soft); padding-top: 10px; }
.receiptBox summary { cursor: pointer; font-size: 12px; color: #9fb0c7; }
.receiptBox pre { margin: 8px 0 0; max-height: 240px; overflow: auto; font-size: 11.5px; white-space: pre-wrap; color: #b9c8dc; background: #0d1725; border: 1px solid var(--line-soft); border-radius: 9px; padding: 10px; }

/* ---------------- tables ---------------- */

.tableWrap { overflow: auto; max-height: 62vh; border: 1px solid var(--line-soft); border-radius: 10px; background: rgba(9, 14, 23, .5); }
table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
th, td { padding: 9px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-soft); max-width: 320px; overflow-wrap: anywhere; }
th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #162033;
  color: #93a7c1;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
th:hover { color: #d7e4f6; }
th.sorted { color: var(--accent); }
th .sortMark { margin-left: 4px; font-size: 10px; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: rgba(75, 140, 245, .08); }
tbody tr.selected { background: rgba(75, 140, 245, .16); box-shadow: inset 2px 0 0 var(--accent); }
tbody tr:last-child td { border-bottom: 0; }
td .cellNote { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
td .idCell { display: flex; gap: 6px; align-items: center; }
td .idText { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; }
td .copyBtn { padding: 1px 6px; font-size: 10.5px; border-radius: 5px; }
td pre { margin: 0; max-height: 120px; max-width: 320px; overflow: auto; font-size: 11px; line-height: 1.5; white-space: pre-wrap; color: #b9c8dc; }
details.jsonBox summary { cursor: pointer; color: var(--muted); font-size: 11.5px; }

.pill { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.pill.ok { color: var(--green); border-color: rgba(61, 220, 151, .42); background: rgba(61, 220, 151, .1); }
.pill.off { color: #ff9d9d; border-color: rgba(255, 123, 123, .42); background: rgba(255, 123, 123, .1); }
.pill.warn { color: var(--warn); border-color: rgba(245, 166, 35, .42); background: rgba(245, 166, 35, .1); }
.pill.info { color: #9fc7ff; border-color: rgba(75, 140, 245, .42); background: rgba(75, 140, 245, .1); }

.badge { font-size: 11px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.badge.ok { color: var(--green); border-color: rgba(61, 220, 151, .45); }
.badge.warn { color: var(--warn); border-color: rgba(245, 166, 35, .45); }

.meta { font-size: 12px; color: var(--muted); }

/* skeleton */
.skeleton td { padding: 12px 10px; }
.skLine { height: 11px; border-radius: 6px; background: linear-gradient(90deg, #1b2740 25%, #24344f 37%, #1b2740 63%); background-size: 400% 100%; animation: sk 1.2s ease-in-out infinite; }
@keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.empty { border: 1px dashed var(--line); border-radius: 10px; padding: 26px; text-align: center; color: var(--muted); font-size: 12.5px; }
.errorBox { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; border: 1px solid rgba(255, 123, 123, .4); background: rgba(255, 123, 123, .08); color: #ffc0c0; border-radius: 10px; padding: 10px 12px; margin: 8px 0; font-size: 12.5px; }
.errorBox b { color: #ff9d9d; }
.errorBox button { margin-left: auto; }

.pager { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.pager .meta { margin: 0 auto 0 0; }

.pageFoot { margin-top: 14px; }
#status { display: block; min-height: 20px; font-size: 12.5px; color: var(--green); overflow-wrap: anywhere; }
#status.err { color: #ff9d9d; }
#status.warn { color: var(--warn); }

/* ---------------- batch ---------------- */

.batchCard { margin-top: 16px; }
.batchCard #batchMeta { color: var(--gold); }
#generatedCodes { font: 13px/1.7 ui-monospace, Menlo, monospace; max-height: 280px; min-height: 140px; letter-spacing: .4px; }
.batchActions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }

/* ---------------- toast ---------------- */

.toast-host { position: fixed; top: 74px; right: 18px; z-index: 90; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.toast {
  pointer-events: auto;
  max-width: min(520px, 86vw);
  background: rgba(22, 33, 52, .97);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 9px 13px;
  font-size: 12.5px;
  color: #dbe6f5;
  box-shadow: var(--shadow);
  animation: rise .16s ease-out;
  overflow-wrap: anywhere;
}
.toast.err { border-left-color: var(--red); color: #ffc2c2; }
.toast.ok { border-left-color: var(--green); }
.toast.warn { border-left-color: var(--warn); color: #ffd9a1; }
@keyframes rise { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------------- modal ---------------- */

.modal { position: fixed; inset: 0; z-index: 100; background: rgba(4, 8, 14, .72); display: grid; place-items: center; padding: 20px; }
.modalCard {
  width: min(520px, 96vw);
  background: linear-gradient(180deg, #19253a, #121b2a);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 22px 22px 18px;
}
.modalCard h3 { margin: 0 0 8px; font-size: 17px; }
.modalCard p { margin: 0 0 10px; color: #b9c8dc; font-size: 13px; }
.facts { margin: 0 0 14px; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 5px 10px; font-size: 12.5px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.modalActions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }
.helpList { margin: 0 0 12px; padding-left: 18px; color: #b9c8dc; font-size: 13px; display: flex; flex-direction: column; gap: 6px; }

/* ---------------- redeem history（沿用原有类名，深色适配） ---------------- */

#redeemHistory { margin-top: 16px; }
.rh-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.rh-bar h3 { margin: 0 auto 0 0; font-size: 15px; }
.rh-bar label { min-width: 150px; margin: 0 auto 0 0; flex-direction: row; align-items: center; gap: 8px; }
.rh-filter { display: flex; gap: 10px; max-width: 560px; margin: 16px 0; }
.rh-filter input { flex: 1; }
.rh-meta { padding: 10px 0; }
.rh-meta h2 { font-size: 21px; margin: 0 0 6px; }
.rh-stats { display: grid; grid-template-columns: repeat(6, minmax(90px, 1fr)); gap: 10px; }
.rh-stats > div { border: 1px solid var(--line); background: rgba(75, 140, 245, .07); border-radius: 10px; padding: 12px 14px; display: grid; gap: 4px; }
.rh-stats strong { font-size: 24px; color: #9fc7ff; }
.rh-stats span { color: var(--muted); font-size: 11.5px; }
.rh-table { max-height: none; }
.rh-table td { white-space: pre-line; min-width: 95px; }
.rh-table td:first-child { min-width: 210px; }
.rh-table small { display: block; margin-top: 6px; font: 11px/1.6 ui-monospace, Menlo, monospace; color: #718399; overflow-wrap: anywhere; }
.rh-table .rh-code { font: 13px/1.7 ui-monospace, Menlo, monospace; min-width: 280px; max-width: 380px; overflow-wrap: anywhere; }
.rh-table button { white-space: nowrap; }
.rh-pager { display: flex; align-items: center; gap: 14px; margin: 16px 0; color: var(--muted); font-size: 12.5px; }
.rh-error { border: 1px solid rgba(255, 123, 123, .45); background: rgba(255, 123, 123, .08); border-radius: 10px; padding: 14px; color: #ffc0c0; }
#redeemClaimDetails:not(:empty) { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
#redeemClaimDetails table { background: rgba(75, 140, 245, .05); }

/* ---------------- responsive ---------------- */

@media (max-width: 1180px) {
  .columns { grid-template-columns: minmax(0, 1fr); }
  .actionCard { position: static; }
}

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  nav { flex-direction: row; flex-wrap: wrap; }
  .navGroup { width: 100%; }
  .navItem { width: auto; }
  .sidebarFoot { margin-top: 6px; }
  main { padding: 18px 14px 32px; }
  .queryForm .grow { flex-basis: 100%; }
  .rh-stats { grid-template-columns: repeat(3, 1fr); }
  .facts { grid-template-columns: 80px minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rh-stats { grid-template-columns: repeat(2, 1fr); }
  .toast-host { left: 12px; right: 12px; align-items: stretch; }
  .toast { max-width: none; }
}

/* 受控单人透视（godview.js）样式：2026-11-13 合并保留 */
#godviewPanel{margin-top:24px}.gv-bar{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap;border-bottom:1px solid #e1e6ed;padding-bottom:18px}.gv-bar h3{margin:0 0 6px}.gv-bar .note{margin:0;max-width:720px}.gv-form{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.gv-form input{width:170px;font:15px/1.4 ui-monospace,monospace;letter-spacing:1px}.gv-form button{white-space:nowrap}.gv-head{display:grid;gap:16px;margin:20px 0}.gv-title{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.gv-title h3{margin:0}.gv-tags,.gv-badges{display:flex;gap:6px;flex-wrap:wrap}.gv-badge{display:inline-block;border:1px solid #cbd5e1;border-radius:999px;padding:2px 9px;font-size:11px;font-weight:600;color:#4a5d72;background:#f7faff}.gv-badge.stage{background:#eaf1fa;border-color:#b9d2ef;color:#1d4f88}.gv-badge.target{background:#2063b4;border-color:#2063b4;color:#fff}.gv-badge.dealer{background:#fff4d6;border-color:#e7c76a;color:#7a5b00}.gv-badge.turn{background:#e7f7ee;border-color:#95d5b2;color:#146c43}.gv-badge.folded{background:#f1f3f5;color:#7b8794}.gv-badge.allin{background:#fde8e8;border-color:#f3b4b4;color:#a11d1d}.gv-badge.muted{color:#7b8794}.gv-stats{display:grid;grid-template-columns:repeat(6,minmax(84px,1fr));gap:10px}.gv-stats>div{border:1px solid #dbe5f0;background:#f7faff;border-radius:8px;padding:12px;display:grid;gap:4px;min-width:0}.gv-stats strong{font-size:18px;color:#17456f;overflow-wrap:anywhere}.gv-stats span{font-size:11px;color:#697b8d}.gv-board-card,.gv-seats-card,.gv-payouts{margin-top:24px;padding-top:20px;border-top:1px solid #e1e6ed}.gv-board-card h4,.gv-seats-card h4,.gv-payouts h4{margin:0 0 12px;font-size:14px}.gv-board{display:flex;gap:10px;flex-wrap:wrap}.gv-card{display:inline-flex;align-items:center;justify-content:center;min-width:52px;height:72px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;font:700 20px/1 ui-monospace,monospace;box-shadow:0 1px 2px rgba(15,35,60,.08)}.gv-card.red{color:#b42318;border-color:#efc2be;background:#fff8f7}.gv-card.black{color:#192638}.gv-card.empty{color:#b7c2cf;background:#f7f9fb;border-style:dashed;box-shadow:none}.gv-seat-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}.gv-seat-head h4{margin:0}.gv-seat-head .note{margin:0;max-width:620px}.gv-seats{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:12px;margin-top:14px}.gv-seat{border:1px solid #dbe5f0;border-radius:10px;background:#fbfdff;padding:14px;display:grid;gap:10px;min-width:0}.gv-seat.target{border-color:#2063b4;background:#f0f6ff;box-shadow:0 0 0 2px rgba(32,99,180,.16)}.gv-seat.turn{box-shadow:0 0 0 2px rgba(20,108,67,.16)}.gv-seat.folded{opacity:.62;background:#f5f6f7}.gv-seat-top{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}.gv-seat-top strong{font-size:12px;color:#4a5d72}.gv-who{display:grid;gap:2px;min-width:0}.gv-who span{font-weight:600;overflow-wrap:anywhere}.gv-who small{font:11px/1.4 ui-monospace,monospace;color:#7b8794}.gv-hole{display:flex;gap:8px;min-height:72px;align-items:center}.gv-hole .gv-card{min-width:48px;height:66px;font-size:18px}.gv-empty{font-size:12px;color:#8a99a8}.gv-seat-meta{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:11px;color:#697b8d}.gv-footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:22px;padding-top:14px;border-top:1px dashed #dbe5f0;font-size:11px;color:#7b8794}.gv-payouts div{font:13px/1.8 ui-monospace,monospace;color:#146c43}@media(max-width:1100px){.gv-stats{grid-template-columns:repeat(3,1fr)}}@media(max-width:650px){.gv-bar{display:block}.gv-form{margin-top:12px}.gv-form input{flex:1;width:auto}.gv-stats{grid-template-columns:repeat(2,1fr)}.gv-seats{grid-template-columns:1fr}}