:root {
  --bg: #f5f6f8; --panel: #fff; --text: #1d2330; --muted: #6b7385; --line: #e2e5ea;
  --accent: #2856d8; --accent-text: #fff; --ok: #1f8a4c; --warn: #b7791f; --bad: #c53030; --chip: #eef1f6;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #14171d; --panel: #1c2028; --text: #e6e9ef; --muted: #9aa3b5; --line: #2c323d;
    --accent: #5b82f0; --chip: #262c37; }
}
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); }
header { display: flex; align-items: center; gap: 16px; padding: 10px 20px; background: var(--panel); border-bottom: 1px solid var(--line); flex-wrap: wrap; position: sticky; top: 0; z-index: 5; }
header h1 { font-size: 16px; margin: 0 12px 0 0; }
.spacer { flex: 1; }
/* Menu doc chia nhom ben trai; man hep thi menu thanh hang ngang cuon duoc. */
.layout { display: flex; align-items: flex-start; }
aside { width: 210px; flex: none; position: sticky; top: 53px; max-height: calc(100vh - 53px); overflow-y: auto; padding: 14px 10px;
  border-right: 1px solid var(--line); background: var(--panel); min-height: calc(100vh - 53px); }
.menu-group { margin-bottom: 14px; }
.menu-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 0 10px 4px; }
aside button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 7px 10px; border-radius: 6px; color: var(--text); cursor: pointer; font: inherit; }
aside button:hover { background: var(--chip); }
aside button.on { background: var(--accent); color: var(--accent-text); font-weight: 600; }
.content { flex: 1; min-width: 0; }
.page-title { font-size: 18px; margin: 18px 20px 0; }
main { padding: 14px 20px 20px; max-width: 1400px; }
@media (max-width: 760px) {
  .layout { display: block; }
  aside { width: auto; position: static; min-height: 0; max-height: none; display: flex; gap: 4px; overflow-x: auto; padding: 8px; border-right: 0; border-bottom: 1px solid var(--line); }
  .menu-group { display: flex; gap: 4px; margin: 0; }
  .menu-title { display: none; }
  aside button { white-space: nowrap; width: auto; }
  main { padding: 12px; }
  .page-title { margin: 12px 12px 0; }
}
td.actions { min-width: 170px; max-width: 260px; }
td.actions .btn { margin: 1px 2px; }
button.btn.danger { color: var(--bad); }
tr.dim td { opacity: .55; }
.card.click, .chip.click { cursor: pointer; }
code.secret { font-size: 13px; padding: 3px 6px; background: var(--bg); border-radius: 4px; word-break: break-all; user-select: all; }
.row-actions.left { justify-content: flex-start; margin: 0 0 12px; }
.pad { padding: 20px; }
.muted { color: var(--muted); }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 16px; margin-bottom: 16px; overflow-x: auto; }
.panel h2 { font-size: 15px; margin: 0 0 12px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px; }
.card .v { font-size: 22px; font-weight: 650; font-variant-numeric: tabular-nums; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 12px; color: var(--muted); font-weight: 600; white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.click { cursor: pointer; }
tr.click:hover td { background: var(--chip); }
.chip { display: inline-block; padding: 1px 8px; border-radius: 10px; background: var(--chip); font-size: 12px; margin: 1px 2px 1px 0; white-space: nowrap; }
.chip.ok { color: var(--ok); } .chip.warn { color: var(--warn); } .chip.bad { color: var(--bad); }
button.btn, .btn { background: var(--accent); color: var(--accent-text); border: 0; border-radius: 6px; padding: 7px 14px; cursor: pointer; font: inherit; }
button.btn.ghost { background: var(--chip); color: var(--text); }
button.btn.small { padding: 3px 10px; font-size: 13px; }
button:disabled { opacity: .5; cursor: default; }
form.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 16px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
label.check { flex-direction: row; align-items: center; gap: 8px; color: var(--text); }
input, select, textarea { font: inherit; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); }
textarea { min-height: 60px; }
.full { grid-column: 1 / -1; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; margin-bottom: 12px; }
.filters label { min-width: 140px; }
.err { color: var(--bad); margin: 8px 0; }
.ok-msg { color: var(--ok); margin: 8px 0; }
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; z-index: 10; }
.modal { background: var(--panel); border-radius: 10px; padding: 20px; width: min(900px, 100%); border: 1px solid var(--line); }
.modal h2 { margin-top: 0; font-size: 16px; }
.row-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.login { max-width: 360px; margin: 80px auto; }
.diff { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
.diff .from { color: var(--bad); text-decoration: line-through; }
.diff .to { color: var(--ok); }
.pager { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
pre { white-space: pre-wrap; word-break: break-all; font-size: 12px; background: var(--bg); padding: 8px; border-radius: 6px; }
/* Lich su nap: dong loi to do nhat; moi ma loi mot mau (teamclient chot 2026-10-17). */
tr.row-err td { background: rgba(217, 48, 54, .07); }
tr.row-err.click:hover td { background: rgba(217, 48, 54, .14); }
.chip.code { border-left: 3px solid currentColor; font-weight: 600; }
.code-TOKEN_INVALID { color: #d93036; }
.code-INTERNAL_ERROR { color: #9b1c1c; }
.code-BAD_REQUEST { color: #c2378a; }
.code-UNKNOWN_PACKAGE { color: #7c3aed; }
.code-UNKNOWN_PRODUCT { color: #5b5bd6; }
.code-ALREADY_CONSUMED { color: #8d6748; }
.code-PURCHASE_CANCELED { color: #e0671b; }
.code-PURCHASE_REFUNDED { color: #be185d; }
.code-TEST_NOT_ALLOWED { color: #0b74c7; }
.code-PLAYER_NOT_FOUND { color: #b7791f; }
.code-STORE_UNAVAILABLE { color: #8a8f00; }
.code-GAME_DB_UNAVAILABLE { color: #0f8f8f; }
.code-OTHER { color: var(--muted); }
@media (prefers-color-scheme: dark) {
  .code-TOKEN_INVALID { color: #ff6b6f; } .code-INTERNAL_ERROR { color: #f28b82; } .code-BAD_REQUEST { color: #f075c0; }
  .code-UNKNOWN_PACKAGE { color: #b18cff; } .code-UNKNOWN_PRODUCT { color: #9ea1ff; } .code-ALREADY_CONSUMED { color: #d0a77f; }
  .code-PURCHASE_CANCELED { color: #ff9a4d; } .code-PURCHASE_REFUNDED { color: #ff6fa8; } .code-TEST_NOT_ALLOWED { color: #5cb3ff; }
  .code-STORE_UNAVAILABLE { color: #d0d457; } .code-GAME_DB_UNAVAILABLE { color: #4fd1d1; }
  tr.row-err td { background: rgba(255, 107, 111, .08); }
}
/* Canh bao no tien dong tren man hinh chinh. */
.alert { border: 1px solid var(--bad); border-left: 5px solid var(--bad); background: var(--panel); border-radius: 8px; padding: 14px 16px; margin-bottom: 16px; overflow-x: auto; }
.alert h2 { color: var(--bad); font-size: 15px; margin: 0 0 6px; }
.legend { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 10px; }
.code-ORDER_CANCELED { color: var(--muted); }
.code-ORDER_ERROR { color: #c2410c; }
.code-ORDER_EXPIRED { color: #6b7280; }
@media (prefers-color-scheme: dark) { .code-ORDER_ERROR { color: #fb923c; } .code-ORDER_EXPIRED { color: #9ca3af; } }
.small { font-size: 12px; }