:root {
  color-scheme: dark;
  --bg: #0d111b; --panel: #151c29; --panel-2: #1c2636; --line: #29354a;
  --text: #e6edf7; --muted: #98a9c1; --gold: #f5c76b; --green: #6de2b1;
  --blue: #80b6ff; --red: #ff929c; --status: #aecfff; --primary: #80b6ff;
  font: 14px/1.5 "Segoe UI", system-ui, sans-serif;
}

/* ---- bảng màu phụ (tự sinh từ màu cứng cũ): chủ đề tối = giá trị gốc; sáng = bản đảo độ sáng ---- */
:root {
  --c01: #19263b;
  --c02: #122540;
  --c03: #80b6ff20;
  --c04: #6de2b112;
  --c05: #1a2535;
  --c06: #8495af;
  --c07: #101825;
  --c08: #80b6ff80;
  --c09: #6de2b170;
  --c10: #263348;
  --c11: #263247;
  --c12: #1a2434;
  --c13: #1d293c;
  --c14: #19322f50;
  --c15: #253b5850;
  --c16: #253b58;
  --c17: #2b3a50;
  --c18: #293b54;
  --c19: #405675;
  --c20: #10233d;
  --c21: #a1caff;
  --c22: #ff929c70;
  --c23: #350f16;
  --c24: #80b6ff15;
  --c25: #3a4b65;
  --c26: #0009;
  --c27: #060b16c9;
  --c28: #1c2b3b;
  --c29: #80b6ff12;
  --c30: #071b31;
  --c31: #092b17;
  --c32: #6de2b110;
  --c33: #6de2b140;
  --c34: #80b6ff08;
  --c35: #ff929c0a;
  --c36: #f5c76b0a;
  --c37: #b39aff;
  --c38: #111b30;
  --c39: #22304a;
  --c40: #ffffff08;
  --c41: #6de2b10a;
  --c42: #1d293b;
  --c43: #3e526f;
  --c44: #2c405b;
  --c45: #1c354c;
  --c46: #78baff;
  --c47: #000a;
  --c48: #ffffff0a;
  --c49: #78baff25;
  --c50: #a4d1ff;
  --c51: #fff;
  --c52: #e7f0fb;
  --c53: #dce8f9;
  --c54: #80b6ff55;
  --c55: #80b6ff0a;
  --c56: #492831;
  --c57: #ff8494;
  --c58: #ff627b;
  --c59: #ff627b25;
  --c60: #ffb7c2;
  --c61: #ff929c60;
  --c62: #f5c76b60;
  --c63: #6de2b150;
  --c64: #121a28;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f5f9; --panel: #ffffff; --panel-2: #f5f7fb; --line: #dde3ec;
  --text: #1b2433; --muted: #5b6a80; --gold: #8a5d00; --green: #0b7a52;
  --blue: #1a57c4; --red: #c0283f; --status: #2a5aa8; --primary: #2f6fe0;
  --c01: #edeff3;  /* surface: #19263b */
  --c02: #f5f7fa;  /* text: #122540 */
  --c03: #80b6ff13;  /* shadow: #80b6ff20 */
  --c04: #6de2b10b;  /* shadow: #6de2b112 */
  --c05: #eef0f4;  /* surface: #1a2535 */
  --c06: #50617b;  /* text: #8495af */
  --c07: #f3f4f7;  /* surface: #101825 */
  --c08: #0062e65a;  /* border: #80b6ff80 */
  --c09: #26bf7f4e;  /* border: #6de2b170 */
  --c10: #e8ebef;  /* surface: #263348 */
  --c11: #dee1e6;  /* border: #263247 */
  --c12: #eef0f4;  /* surface: #1a2434 */
  --c13: #eceef2;  /* surface: #1d293c */
  --c14: #33ccba24;  /* surface: #19322f50 */
  --c15: #3375cc24;  /* surface: #253b5850 */
  --c16: #e5e8ee;  /* surface: #253b58 */
  --c17: #e6e9ed;  /* surface: #2b3a50 */
  --c18: #e5e8ee;  /* surface: #293b54 */
  --c19: #ccd1d8;  /* border: #405675 */
  --c20: #f5f7fa;  /* text: #10233d */
  --c21: #d7dde5;  /* surface: #a1caff */
  --c22: #e600154e;  /* border: #ff929c70 */
  --c23: #faf5f6;  /* text: #350f16 */
  --c24: #006cff0d;  /* surface: #80b6ff15 */
  --c25: #d2d6dc;  /* border: #3a4b65 */
  --c26: #0000005c;  /* shadow: #0009 */
  --c27: #47536b24;  /* surface: #060b16c9 */
  --c28: #eceff3;  /* surface: #1c2b3b */
  --c29: #006cff0d;  /* surface: #80b6ff12 */
  --c30: #f5f7fa;  /* text: #071b31 */
  --c31: #f5faf7;  /* text: #092b17 */
  --c32: #2ad58d0d;  /* surface: #6de2b110 */
  --c33: #26bf7f2e;  /* border: #6de2b140 */
  --c34: #006cff0d;  /* surface: #80b6ff08 */
  --c35: #ff00170d;  /* surface: #ff929c0a */
  --c36: #efa5100d;  /* surface: #f5c76b0a */
  --c37: #190066;  /* text: #b39aff */
  --c38: #f0f2f6;  /* surface: #111b30 */
  --c39: #e8ebf0;  /* surface: #22304a */
  --c40: #ac39392e;  /* border: #ffffff08 */
  --c41: #2ad58d0d;  /* surface: #6de2b10a */
  --c42: #eceff2;  /* surface: #1d293b */
  --c43: #ced3d9;  /* border: #3e526f */
  --c44: #e3e7ec;  /* surface: #2c405b */
  --c45: #e9edf0;  /* surface: #1c354c */
  --c46: #aec6e0;  /* border: #78baff */
  --c47: #00000066;  /* shadow: #000a */
  --c48: #ffffff06;  /* shadow: #ffffff0a */
  --c49: #007dff11;  /* surface: #78baff25 */
  --c50: #003266;  /* text: #a4d1ff */
  --c51: #242424;  /* text: #fff */
  --c52: #0d2f59;  /* text: #e7f0fb */
  --c53: #0d2c59;  /* text: #dce8f9 */
  --c54: #0062e63b;  /* border: #80b6ff55 */
  --c55: #006cff0d;  /* surface: #80b6ff0a */
  --c56: #efe8e9;  /* surface: #492831 */
  --c57: #e0aeb4;  /* border: #ff8494 */
  --c58: #e0aeb6;  /* border: #ff627b */
  --c59: #ff002911;  /* surface: #ff627b25 */
  --c60: #660010;  /* text: #ffb7c2 */
  --c61: #e6001543;  /* border: #ff929c60 */
  --c62: #d7940f43;  /* border: #f5c76b60 */
  --c63: #26bf7f38;  /* border: #6de2b150 */
  --c64: #f2f4f6;  /* surface: #121a28 */
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { background: radial-gradient(ellipse at 10% 0%, var(--c01) 0, transparent 45%), var(--bg); color: var(--text); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
[hidden], .modal .row[hidden] { display: none !important; }
.app { display: flex; flex-direction: column; gap: 18px; min-height: 100dvh; padding: 24px 28px 18px; max-width: 1920px; margin: auto; }
.app-head, .brand, .head-actions, .panel-head, .panel-title, .panel-actions, .workspace-toolbar, .bulk-toolbar, .bar, .bar-actions, .dialog-heading { display: flex; align-items: center; }
.app-head, .panel-head, .bar, .dialog-heading { justify-content: space-between; }
.app-head { gap: 20px; }
.brand { gap: 12px; }
.brand-mark { display: grid; place-items: center; width: 44px; height: 44px; background: var(--primary); color: var(--c02); font-size: 26px; font-weight: 800; border-radius: 13px; box-shadow: 0 4px 24px var(--c03); }
h1 { font-size: 21px; letter-spacing: -.5px; line-height: 1.25; margin: 0; }
h1 span { color: var(--muted); font-size: 14px; font-weight: 400; letter-spacing: 0; margin-left: 7px; }
.brand p { color: var(--muted); font-size: 12px; margin: 3px 0 0; }
.head-actions { gap: 14px; }
.connection { font-size: 12px; color: var(--muted); display: flex; gap: 7px; align-items: center; }
.connection::before { content: ""; width: 7px; height: 7px; background: var(--gold); border-radius: 50%; flex-shrink: 0; }
.connection.connected::before { background: var(--green); box-shadow: 0 0 0 4px var(--c04); }
.stats { display: grid; grid-template-columns: 1.5fr 1.3fr 1fr 1fr 1fr; gap: 12px; }
.stat-card { padding: 16px 19px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(130deg, var(--c05), var(--panel)); display: flex; flex-direction: column; gap: 3px; }
.stat-card > span { font-size: 12px; color: var(--muted); }
.stat-card b { font-size: clamp(19px, 2vw, 27px); letter-spacing: -.6px; font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat-card small { font-size: 11px; color: var(--muted); }
.red { color: var(--red); }
.gold { color: var(--gold); } .blue { color: var(--blue); } .green { color: var(--green); } .muted { color: var(--muted); }
.workspace-toolbar { gap: 10px; }
.search-field { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; flex: 1; max-width: 510px; padding: 0 12px; }
.search-field span { font-size: 23px; color: var(--muted); }
.search-field input { border: 0; background: transparent; width: 100%; min-width: 0; padding: 10px 0; color: var(--text); outline-offset: 0; }
input::placeholder, textarea::placeholder { color: var(--c06); opacity: 1; }
select, .modal input:not([type=checkbox]), .modal textarea, .log-tools input { background: var(--c07); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; min-width: 0; }
.workspace-toolbar > .btn { margin-left: auto; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; min-width: 0; overflow: hidden; }
.main-panel { border-top: 2px solid var(--c08); }
.sub-panel { border-top: 2px solid var(--c09); }
.grow { flex: 1; }
.panel-head { padding: 14px 16px; gap: 12px; flex-wrap: wrap; }
.panel-title { gap: 9px; flex-wrap: wrap; }
.panel-head h2 { margin: 0; font-size: 15px; font-weight: 650; }
.role-dot { width: 8px; height: 8px; border-radius: 50%; }
.main-dot { background: var(--blue); } .sub-dot { background: var(--green); }
.count-chip { background: var(--c10); color: var(--muted); border: 1px solid var(--line); padding: 2px 8px; border-radius: 6px; font-size: 11px; font-variant-numeric: tabular-nums; }
.panel-caption { color: var(--muted); font-size: 12px; margin-left: 7px; }
.panel-actions { gap: 6px; flex-wrap: wrap; }
.bulk-toolbar { gap: 7px; flex-wrap: wrap; padding: 0 16px 12px; }
.bulk-toolbar > span { font-size: 12px; margin-right: 3px; }
.table-wrap { overflow: auto; max-height: 42vh; scrollbar-gutter: stable; }
.main-panel .table-wrap { max-height: 27vh; }
.grid { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; }
.grid th, .grid td { padding: 12px 13px; text-align: left; border-bottom: 1px solid var(--c11); white-space: nowrap; }
.grid th { background: var(--c12); color: var(--muted); font-weight: 500; font-size: 12px; position: sticky; top: 0; z-index: 1; }
.grid tbody tr:last-child td { border-bottom: 0; }
.grid tbody tr:hover { background: var(--c13); }
.grid tbody tr.selected { background: var(--c14); }
#tblMain tbody tr.selected { background: var(--c15); }
.grid tbody tr.ctx-on { background: var(--c16); }
.c-pm { width: 54px; } .c-chk { width: 38px; } .c-stt { width: 48px; }
.c-proxy { min-width: 145px; } .c-num { min-width: 112px; } .c-status { min-width: 220px; }
td.num, th.c-num { text-align: right; font-variant-numeric: tabular-nums; }
td.num { font-weight: 600; } td.bal { color: var(--green); }
td.account-name { font-weight: 600; color: var(--blue); }
#tblSub td.account-name { color: var(--green); }
td.status { color: var(--status); max-width: 300px; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
td.status.err { color: var(--red); }
td.proxy { color: var(--muted); max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
td.edit { cursor: text; min-width: 105px; }
td.edit:hover { background: var(--c17); }
td input.inline { width: 100%; min-width: 110px; background: var(--bg); color: var(--text); border: 1px solid var(--primary); border-radius: 4px; padding: 5px 6px; }
td.empty { color: var(--muted); text-align: center; padding: 28px 18px; white-space: normal; }
.btn, .pm, .icon-btn, .act { border: 1px solid var(--line); background: var(--panel-2); color: var(--text); border-radius: 8px; padding: 9px 15px; line-height: 1.5; white-space: nowrap; }
.btn:hover, .pm:hover, .icon-btn:hover, .act:hover { background: var(--c18); border-color: var(--c19); }
.btn.compact { padding: 6px 11px; font-size: 12px; min-height: 32px; }
.btn.subtle { background: transparent; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--c20); font-weight: 700; }
.btn.primary:hover { background: var(--c21); }
.btn.danger { border-color: var(--c22); color: var(--red); }
.btn.primary.danger { background: var(--red); color: var(--c23); }
.danger-quiet { color: var(--red); }
.btn:disabled, .pm:disabled { opacity: .42; cursor: not-allowed; }
.pm { width: 30px; height: 30px; padding: 0; font-size: 19px; line-height: 1; }
.eye { background: transparent; border: 0; color: var(--muted); cursor: pointer; padding: 4px; line-height: 1; min-width: 26px; min-height: 26px; border-radius: 5px; }
.eye:hover, .eye[aria-pressed=true] { color: var(--blue); background: var(--c24); }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; flex-shrink: 0; vertical-align: middle; }
.bar { gap: 16px; padding: 15px 0 8px; margin-top: auto; position: sticky; bottom: 0; z-index: 5; background: var(--bg); }
.bar-info { min-width: 0; }
.bar-status { font-size: 12px; color: var(--text); max-width: 70ch; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bar-info small { color: var(--muted); font-size: 11px; display: block; margin-top: 3px; }
.bar-actions { gap: 10px; flex-shrink: 0; flex-wrap: wrap; }
#btnStart { min-width: 150px; }
.activity-chip { font-size: 12px; color: var(--green); white-space: nowrap; }
.modal { background: var(--panel); color: var(--text); border: 1px solid var(--c25); border-radius: 16px; padding: 24px; width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; box-shadow: 0 24px 100px var(--c26); }
.modal.wide { width: min(1000px, calc(100vw - 32px)); }
.modal::backdrop { background: var(--c27); backdrop-filter: blur(5px); }
.modal h3 { margin: 0 0 18px; font-size: 20px; font-weight: 650; letter-spacing: -.4px; }
.modal .row { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; min-width: 0; }
.modal label { font-size: 12px; color: var(--muted); }
.modal input:not([type=checkbox]), .modal textarea, .modal select { width: 100%; }
.modal textarea { resize: vertical; line-height: 1.7; font-family: Consolas, monospace; }
.hint { color: var(--muted); font-size: 12px; margin: 0 0 10px; white-space: pre-line; overflow-wrap: anywhere; }
.modal-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.modal-actions .spacer { flex: 1; } .modal-actions .hint { margin: 0; }
.seg { display: flex; gap: 6px; }
.seg button { flex: 1; padding: 9px; color: var(--muted); background: var(--c07); border: 1px solid var(--line); border-radius: 8px; }
.seg button.on { color: var(--blue); border-color: var(--blue); background: var(--c24); }
.pw-field { position: relative; } .pw-field input { padding-right: 42px !important; }
.pw-field .eye { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); }
label.check { display: flex; align-items: center; gap: 8px; color: var(--text); cursor: pointer; }
.option-card { background: var(--c28); padding: 12px; border: 1px solid var(--line); border-radius: 8px; margin: 4px 0 10px; }
.option-card:has(:checked) { border-color: var(--blue); background: var(--c29); }
#askMsg { white-space: pre-line; word-break: break-word; font-size: 14px; color: var(--text); }
.log-tools { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.log-tools input { flex: 1; min-width: 130px; }
.logbox { height: 50vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--c07); font: 12px/1.7 Consolas, monospace; }
.logbox > div { padding: 9px 12px; border-bottom: 1px solid var(--c11); white-space: pre-line; overflow-wrap: anywhere; }
.logbox .t { color: var(--muted); margin-right: 10px; }
.logbox .l-error, #pipelineLog .l-error { color: var(--red); }
.logbox .l-warn, #pipelineLog .l-warn { color: var(--gold); }
.log-role-main { --log-role-color: var(--blue); } .log-role-sub { --log-role-color: var(--green); } .log-role-system { --log-role-color: var(--muted); }
.log-role-badge { display: inline-block; color: var(--log-role-color); border: 1px solid currentColor; border-radius: 4px; padding: 1px 6px; margin-right: 6px; font-size: 10px; line-height: 1.5; font-weight: 700; white-space: nowrap; }
.log-role-main .log-role-badge { color: var(--c30); background: var(--blue); border-color: var(--blue); }
.log-role-sub .log-role-badge { color: var(--c31); background: var(--green); border-color: var(--green); }
.log-legend { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 12px 0; font-size: 11px; color: var(--muted); }
.log-legend .log-role-main { color: var(--blue); } .log-legend .log-role-sub { color: var(--green); }
.logbox .log-role-main { border-left: 3px solid var(--blue); } .logbox .log-role-sub { border-left: 3px solid var(--green); }
.pipeline-modal.wide { width: min(1280px, calc(100vw - 32px)); }
.dialog-heading { gap: 15px; margin-bottom: 22px; }
.dialog-heading h3 { margin: 3px 0 0; }
.eyebrow { color: var(--blue); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; }
.pipeline-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 26px; }
.pipeline-setup, .pipeline-monitor { min-width: 0; }
.pipeline-monitor { padding-left: 24px; border-left: 1px solid var(--line); }
.pipeline-config { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.section-label { font-size: 13px; font-weight: 600; margin: 0 0 16px; }
.section-label > span { font-size: 10px; color: var(--muted); border: 1px solid var(--line); border-radius: 5px; padding: 3px 5px; margin-right: 7px; }
.pipeline-accounts { border: 1px solid var(--line); border-radius: 8px; margin: 0 0 12px; padding: 12px; min-width: 0; }
.pipeline-accounts legend { font-size: 12px; padding: 0 5px; color: var(--green); }
.pipeline-sub-list { max-height: 180px; overflow: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
.pipeline-sub-list label { display: flex; gap: 8px; align-items: center; padding: 9px 7px; border: 1px solid transparent; border-radius: 6px; cursor: pointer; color: var(--text); }
.pipeline-sub-list label:hover { background: var(--panel-2); }
.pipeline-sub-list label:has(:checked) { background: var(--c32); border-color: var(--c33); }
.pipeline-sub-list label:has(:disabled:not(:checked)) { opacity: .5; }
.pipeline-sub-list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pipeline-sub-list small { display: block; color: var(--muted); font-variant-numeric: tabular-nums; }
.run-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.run-summary > div { background: var(--c07); border: 1px solid var(--line); padding: 12px; border-radius: 8px; }
.run-summary span { display: block; font-size: 11px; color: var(--muted); }
.run-summary b { display: block; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#pipelineProgress { width: 100%; height: 6px; display: block; margin: 12px 0 16px; accent-color: var(--blue); border: 0; border-radius: 6px; overflow: hidden; }
#pipelineProgress::-webkit-progress-bar { background: var(--line); } #pipelineProgress::-webkit-progress-value { background: var(--blue); }
#pipelineStatus { border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: 8px; padding: 12px; background: var(--c34); color: var(--text); min-height: 52px; }
#pipelineStatus[data-tone=error] { border-left-color: var(--red); background: var(--c35); }
#pipelineStatus[data-tone=done] { border-left-color: var(--green); }
#pipelineStatus[data-tone=warn] { border-left-color: var(--gold); background: var(--c36); }
#pipelineGameCount { display: block; font-size: 11px; margin-top: 3px; }
.pipeline-log-wrap { height: 340px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.pipeline-round-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0 7px; font-size: 11px; color: var(--text); }
.pipeline-round-legend span:nth-child(2) { color: var(--c37); }
.pipeline-round-legend span:nth-child(3) { color: var(--red); }
.pipeline-round-wrap { height: 340px; overflow: auto; border: 1px solid var(--line); border-radius: 6px; background: var(--c38); }
#pipelineRounds { min-width: 620px; font-size: 12px; font-variant-numeric: tabular-nums; }
#pipelineRounds th { padding: 7px 8px; background: var(--c39); white-space: nowrap; font-size: 11px; text-align: left; }
#pipelineRounds td { padding: 6px 8px; vertical-align: top; white-space: nowrap; border-bottom: 1px solid var(--c40); }
#pipelineRounds td.num { text-align: right; }
#pipelineRounds .round-status { min-width: 150px; max-width: 320px; white-space: pre-line; overflow-wrap: anywhere; }
#pipelineRounds .round-running .round-status { color: var(--c37); }
#pipelineRounds .round-error .round-status { color: var(--red); }
#pipelineRounds .round-warn .round-status { color: var(--gold); }
.round-account { cursor: help; }
.pipeline-details { margin-top: 12px; }
.pipeline-details summary { cursor: pointer; color: var(--muted); margin-bottom: 8px; font-size: 12px; }
.pipeline-main-progress { margin: 12px 0; font-size: 12px; }
.pipeline-main-progress > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.pipeline-main-progress .done b { color: var(--green); }
.bank-modal.wide { width: min(650px, calc(100vw - 24px)); }
.bank-linked { display: grid; gap: 8px; margin: 14px 0; }
.bank-linked-account { text-align: left; display: grid; gap: 5px; background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 7px; padding: 10px; cursor: pointer; }
.bank-linked-account span { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.bank-modal .modal-actions { flex-wrap: wrap; }
.bank-history-modal.wide { width: min(950px, calc(100vw - 24px)); }
.bank-history-wrap { max-height: 55vh; overflow: auto; border: 1px solid var(--line); border-radius: 7px; }
.bank-history-pager { display: flex; align-items: center; gap: 10px; }
#bankHistoryTable { min-width: 610px; font-size: 12px; }
#bankHistoryTable th, #bankHistoryTable td { padding: 8px; vertical-align: top; }
#bankHistoryTable td { white-space: pre-line; overflow-wrap: anywhere; max-width: 220px; }
#bankHistoryTable small { display: block; color: var(--muted); margin-top: 4px; }
.bank-history-state { display: inline-block; color: var(--text); font-weight: 600; }
.bank-history-state-pink { color: #ff9bfa; }
.bank-history-state-yellow { color: #ffff00; }
.bank-history-state-orange { color: #ffa500; }
#bankHistoryTable .bank-history-state small { color: inherit; opacity: .8; font-size: 10px; font-weight: 400; }
:root[data-theme="light"] .bank-history-state-pink { color: #a0187e; }
:root[data-theme="light"] .bank-history-state-yellow { color: #795900; }
:root[data-theme="light"] .bank-history-state-orange { color: #a14e00; }
.bank-history-pager { justify-content: flex-end; margin-top: 8px; }
.bank-history-pager .hint { margin: 0; }
#pipelineLog { font-size: 12px; }
#pipelineLog th, #pipelineLog td { text-align: left; white-space: normal; padding: 10px; vertical-align: top; }
#pipelineLog td:first-child { white-space: nowrap; color: var(--muted); width: 78px; font-size: 11px; }
#pipelineLog td:nth-child(2) { overflow-wrap: anywhere; width: 120px; }
#pipelineLog .log-account { color: var(--log-role-color); font-weight: 600; }
#pipelineLog .log-role-main { background: var(--c29); } #pipelineLog .log-role-sub { background: var(--c41); }
#pipelineLog .log-role-main td:first-child { border-left: 3px solid var(--blue); }
#pipelineLog .log-role-sub td:first-child { border-left: 3px solid var(--green); }
#pipelineLog .l-info td:last-child, .logbox .l-info { color: var(--log-role-color); }
#pipelineLog td:last-child { white-space: pre-line; overflow-wrap: anywhere; }
.pipeline-log-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; gap: 10px; }
.pipeline-modal .modal-actions { position: sticky; bottom: -24px; background: var(--panel); padding-bottom: 12px; z-index: 3; }
.hist-wrap { max-height: 55vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.ctx { position: fixed; z-index: 100; min-width: 235px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow: auto; padding: 6px; background: var(--c42); border: 1px solid var(--c43); border-radius: 10px; box-shadow: 0 12px 50px var(--c26); }
.ctx button { display: block; width: 100%; text-align: left; border: 0; background: none; color: var(--text); padding: 9px 10px; border-radius: 5px; font-size: 13px; }
.ctx button:hover, .ctx button:focus-visible { background: var(--c44); }
.ctx button.danger { color: var(--red); }
.ctx button i { display: inline-block; width: 22px; font-style: normal; text-align: center; margin-right: 6px; color: var(--muted); }
.ctx button[data-count]:not([data-count=""])::after { content: " · " attr(data-count); color: var(--muted); font-size: 11px; }
.ctx hr { border: 0; border-top: 1px solid var(--line); margin: 5px 0; }
.toast-region { position: fixed; inset: 24px 24px auto auto; margin: 0; padding: 0; border: 0; background: transparent; color: var(--text); display: flex; flex-direction: column; gap: 10px; width: min(480px, calc(100vw - 32px)); max-width: min(480px, calc(100vw - 32px)); overflow: visible; z-index: 150; pointer-events: none; }
.toast-region[popover]:not(:popover-open) { display: none; }
.toast { display: flex; align-items: flex-start; gap: 12px; background: var(--c45); border: 1px solid var(--c46); border-left: 5px solid var(--c46); padding: 17px; border-radius: 12px; box-shadow: 0 12px 40px var(--c47), 0 0 0 1px var(--c48); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; pointer-events: none; animation: toast-enter .18s ease-out; }
.toast-icon { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--c49); color: var(--c50); font-size: 19px; font-weight: 800; }
.toast-content { flex: 1; min-width: 0; }
.toast-content strong { display: block; margin-bottom: 4px; color: var(--c51); font-size: 15px; }
.toast-content > span { white-space: pre-line; color: var(--c52); }
.toast-close { border: 0; padding: 3px; background: transparent; color: var(--c53); font-size: 22px; line-height: 1; cursor: pointer; pointer-events: auto; }
.toast-close:hover { color: var(--text); }
.dialog-retry { display: block; margin-top: 10px; }
.dialog-loading { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 12px; border: 1px solid var(--c54); border-radius: 8px; background: var(--c55); color: var(--blue); font-size: 13px; }
.loading-spinner, button[aria-busy=true]::before { content: ""; display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: loading-spin .8s linear infinite; flex-shrink: 0; }
button[aria-busy=true]::before { margin-right: 7px; vertical-align: -3px; }
.modal [inert] { opacity: .6; }
@keyframes loading-spin { to { transform: rotate(360deg); } }
@keyframes toast-enter { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .loading-spinner, button[aria-busy=true]::before { animation-duration: 2s; } .toast { animation: none; } }
.toast.error { background: var(--c56); border-color: var(--c57); border-left-color: var(--c58); }
.toast.error .toast-icon { background: var(--c59); color: var(--c60); }
.form-error { border: 1px solid var(--c61); border-left: 3px solid var(--red); background: var(--c35); color: var(--red); padding: 12px; border-radius: 8px; white-space: pre-line; overflow-wrap: anywhere; font-size: 13px; }
.duplicate-list { list-style: none; margin: 12px 0; padding: 0; max-height: 240px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.duplicate-list li { padding: 10px 12px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.duplicate-list li:last-child { border-bottom: 0; }
.duplicate-list small { display: block; color: var(--muted); font-size: 12px; }
input[aria-invalid=true] { border-color: var(--red) !important; }
@media (min-width: 1500px) { .table-wrap { max-height: 48vh; } }
@media (max-width: 1000px) {
  .app { padding: 20px 16px 16px; gap: 14px; } .stat-card { padding: 14px; }
  .pipeline-layout { grid-template-columns: 1fr; gap: 20px; } .pipeline-monitor { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); padding-top: 20px; }
  .pipeline-log-wrap { height: 270px; } .pipeline-close-hint { display: none; }
  .panel-caption { margin-left: 0; } .bar-info small { max-width: 45ch; }
}
@media (max-width: 650px) {
  .app { padding: 14px 10px; gap: 12px; } .app-head { align-items: flex-start; }
  h1 { font-size: 19px; } h1 span { display: none; } .brand-mark { width: 38px; height: 38px; }
  .head-actions { gap: 8px; flex-direction: column-reverse; align-items: flex-end; } .connection { font-size: 10px; }
  .stats { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; } .stat-card { grid-column: span 2; padding: 11px; }
  .stat-card:nth-child(-n+2) { grid-column: span 3; } .stat-card b { font-size: 22px; } .stat-card small { display: none; }
  .workspace-toolbar { flex-wrap: wrap; } .search-field { flex-basis: 100%; max-width: none; } .workspace-toolbar select { flex: 1; width: 0; }
  .panel-head { padding: 12px; } .panel-caption { display: none; } #selectedCount, #selectedMainCount { display: inline; } .panel-actions { width: 100%; }
  .bulk-toolbar { padding: 0 12px 12px; gap: 6px; } .bulk-toolbar > span { width: 100%; }
  .bar { flex-direction: column; align-items: stretch; padding: 8px 0 0; gap: 10px; } .bar-actions { justify-content: flex-end; } .bar-info small { display: none; }
  .bar-status { max-width: 90vw; } #btnStart { min-width: 140px; } .activity-chip { margin-right: auto; font-size: 11px; }
  .modal { padding: 18px; width: calc(100vw - 20px); max-height: calc(100dvh - 20px); border-radius: 12px; }
  .modal.wide, .pipeline-modal.wide { width: calc(100vw - 20px); } .pipeline-modal .modal-actions { bottom: -18px; }
  .pipeline-config { gap: 0 10px; } .pipeline-sub-list { grid-template-columns: 1fr; }
  .modal-actions .check { font-size: 11px; } .modal-actions > .spacer { min-width: 0; }
  .log-tools input { flex-basis: 100%; } .log-tools select { flex: 1; width: 0; }
  .grid td, .grid th { padding: 10px; } .toast-region { top: 16px; bottom: auto; right: 16px; }
}
@media (prefers-reduced-motion: no-preference) { .btn { transition: background .15s, border-color .15s; } }

/* ---- trang đăng nhập + thông tin user ---- */
.login-page { display: grid; place-items: center; min-height: 100dvh; padding: 24px 16px; }
.login-card { width: min(100%, 380px); padding: 28px 26px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(130deg, var(--c05), var(--panel)); display: flex; flex-direction: column; gap: 22px; }
.login-card .brand { gap: 12px; }
.login-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.login-field label { font-size: 12px; color: var(--muted); }
.login-field input { width: 100%; background: var(--c07); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; min-width: 0; }
.login-pw { display: flex; gap: 8px; }
.login-pw .icon-btn { flex-shrink: 0; }
.login-error { margin: 0 0 14px; color: var(--red); font-size: 13px; }
.login-submit { width: 100%; padding: 11px 15px; }
.login-note { margin: 0; color: var(--muted); font-size: 12px; text-align: center; }
.user-badge { font-size: 12px; color: var(--muted); }

/* ---- phân quyền, hạn sử dụng, quản lý người dùng ---- */
.no-perm { display: none !important; }
.expiry-chip { font-size: 12px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.expiry-chip.warn { color: var(--gold); border-color: var(--c62); }
.expiry-chip.bad { color: var(--red); border-color: var(--c22); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 18px; }
.kv dt { color: var(--muted); font-size: 12px; } .kv dd { margin: 0; }
.modal h4 { margin: 4px 0 12px; font-size: 14px; font-weight: 600; }
.user-create { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 12px; align-items: end; }
.users-wrap { max-height: 38vh; }
.users-grid select, .users-grid input[type=date] { background: var(--c07); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; font-size: 12px; }
.grid td.user-actions { display: flex; flex-wrap: wrap; gap: 6px; min-width: 170px; max-width: 210px; white-space: normal; border-bottom: 0; }
.pill { font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); }
.pill.ok { color: var(--green); border-color: var(--c63); } .pill.bad { color: var(--red); border-color: var(--c61); }
.roles-legend { margin-top: 14px; display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.roles-legend b { color: var(--text); }
.modal .users-grid select, .modal .users-grid input[type=date] { width: auto; min-width: 128px; }

/* ---- pool proxy ---- */
.pool-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 14px; align-items: start; }
.pool-cols section { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pool-cols h4 { margin: 0; }
.pool-cols .hint { margin: 0; }
.pool-wrap { max-height: 28vh; }
@media (max-width: 720px) { .pool-cols { grid-template-columns: 1fr; } }
.modal input[type=radio] { width: auto; flex-shrink: 0; margin: 0; }
.pool-cols section > .btn { align-self: flex-start; }
.pool-empty { margin-top: 4px; padding-top: 8px; border-top: 1px dashed var(--line); }
.pool-assign-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pick-modes { display: flex; gap: 22px; margin-bottom: 14px; }
.modal textarea#pickText { font-family: Consolas, monospace; }
.pipeline-list-tools { display: flex; justify-content: flex-end; margin: -4px 0 8px; }

/* ---- tối ưu điện thoại / màn cảm ứng ---- */
@media (max-width: 650px) {
  /* Thanh tiêu đề: logo một dòng, các nút xếp ngang tự xuống dòng (trước đây xếp dọc 5 nút ~190px). */
  .app-head { flex-wrap: wrap; row-gap: 10px; align-items: center; }
  .head-actions { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 6px; align-items: center; }
  .head-actions .connection { order: -1; width: 100%; justify-content: flex-start; }
  /* Bảng người dùng thành thẻ: không còn bị cắt cột Thao tác phải cuộn ngang mới thấy. */
  .users-wrap { max-height: none; overflow: visible; }
  .users-grid thead { display: none; }
  .users-grid, .users-grid tbody, .users-grid tr { display: block; width: 100%; }
  .users-grid tr { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; background: var(--c64); }
  .users-grid td { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 0; padding: 5px 0; white-space: normal; }
  .users-grid td::before { content: attr(data-label); color: var(--muted); font-size: 12px; flex-shrink: 0; }
  .users-grid td:first-child { font-size: 15px; padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
  .users-grid td:first-child::before, .grid td.user-actions::before { content: none; }
  .grid td.user-actions { max-width: none; min-width: 0; padding-top: 10px; justify-content: flex-start; }
}
/* Vùng chạm tối thiểu ~40px cho ô tick, nút ⋯ và nút mắt trên màn cảm ứng / điện thoại. */
@media (pointer: coarse), (max-width: 650px) {
  .grid input[type=checkbox], .pipeline-sub-list input[type=checkbox], .modal .check input[type=checkbox] { width: 22px; height: 22px; }
  .icon-btn, .eye, [data-menu], .grid .act { min-width: 40px; min-height: 40px; }
  .btn.compact { min-height: 38px; }
  .grid td, .grid th { padding-top: 6px; padding-bottom: 6px; }
}

/* ---- nút đổi giao diện sáng/tối ---- */
.theme-corner { position: fixed; top: 14px; right: 14px; }
#btnTheme { min-width: 38px; }

/* ---- chi tiết trạng thái ---- */
.status-meta { margin: -10px 0 12px; color: var(--muted); font-size: 12px; }
.status-box { padding: 12px 14px; border: 1px solid var(--line); border-left-width: 4px; border-radius: 8px; background: var(--panel-2);
  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 40vh; overflow: auto; user-select: text; }
.status-box[data-tone=error] { border-left-color: var(--red); } .status-box[data-tone=warn] { border-left-color: var(--gold); }
.status-box[data-tone=ok] { border-left-color: var(--green); }
.status-tip { margin: 12px 0 0; }
.status-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* ---- thanh dưới cố định không che nội dung khi cuộn / focus bàn phím ---- */
html { scroll-padding-bottom: 96px; }
.bar { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
.app { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }

/* ---- bảng lịch sử rút tiền: tiêu đề cột số căn phải như dữ liệu, cột ngắn co theo nội dung, cột dài tự xuống dòng ---- */
#bankHistoryTable th:nth-child(1), #bankHistoryTable td:nth-child(1),
#bankHistoryTable th:nth-child(2), #bankHistoryTable td:nth-child(2),
#bankHistoryTable th:nth-child(4), #bankHistoryTable td:nth-child(4) { width: 1%; white-space: nowrap; }
#bankHistoryTable th:nth-child(2), #bankHistoryTable td:nth-child(2) { padding-right: 28px; }
#bankHistoryTable td:nth-child(3), #bankHistoryTable td:nth-child(5) { white-space: normal; overflow-wrap: anywhere; }
#bankHistoryTable td small { display: block; margin-top: 2px; color: var(--muted); }

/* ---- hộp thông báo (chỉ dùng biến màu) ---- */
#btnNotifs { position: relative; min-width: 38px; }
.notif-badge { position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--red); color: var(--bg); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.notif-list { display: grid; gap: 10px; max-height: 55vh; overflow: auto; margin-bottom: 4px; }
.notif-empty { padding: 28px 0; text-align: center; margin: 0; }
.notif { border: 1px solid var(--line); border-left-width: 4px; border-radius: 8px; padding: 10px 12px; background: var(--panel-2); }
.notif[data-level=error] { border-left-color: var(--red); } .notif[data-level=warn] { border-left-color: var(--gold); }
.notif[data-level=info] { border-left-color: var(--green); }
.notif header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.notif header time { margin-left: auto; font-size: 12px; }
.notif-new { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--primary); color: var(--bg); }
.notif-count { font-size: 11px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.notif-msg { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.notif-tip { margin: 6px 0 0; }
.notif-actions { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- tinh chỉnh giao diện sáng: nền thoáng, ô nhập trắng, lớp mờ nhẹ ---- */
:root[data-theme="light"] body { background: var(--bg); }
:root[data-theme="light"] .modal::backdrop { background: rgba(30, 41, 59, .22); backdrop-filter: blur(3px); }
:root[data-theme="light"] .modal { border-color: var(--line); box-shadow: 0 18px 56px rgba(30, 41, 59, .20); }
:root[data-theme="light"] select,
:root[data-theme="light"] .modal input:not([type=checkbox]):not([type=radio]),
:root[data-theme="light"] .modal textarea,
:root[data-theme="light"] .log-tools input,
:root[data-theme="light"] .login-field input { background: var(--panel); border-color: #cdd5e1; }
:root[data-theme="light"] .stat-card,
:root[data-theme="light"] .panel { box-shadow: 0 1px 2px rgba(30, 41, 59, .05); }

/* Hướng dẫn nhanh (❓) */
.guide-modal { width: min(560px, calc(100vw - 32px)); }
.guide-sec { padding: 10px 0; border-bottom: 1px solid var(--line); }
.guide-sec:last-of-type { border-bottom: 0; }
.guide-sec h4 { margin: 0 0 6px; font-size: 14px; }
.guide-sec p, .guide-sec li { margin: 0 0 4px; font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }
.guide-sec ul { margin: 0 0 4px; padding-left: 20px; }
.guide-sec code { font-family: Consolas, monospace; font-size: 12px; background: var(--c10); border: 1px solid var(--line); padding: 1px 5px; border-radius: 4px; }
@keyframes guide-pulse { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 4px var(--c24); } }
#btnGuide.guide-new { animation: guide-pulse 1.8s ease-in-out infinite; border-color: var(--blue); }
@media (prefers-reduced-motion: reduce) { #btnGuide.guide-new { animation: none; } }

/* ---- điện thoại: bảng acc thành thẻ, header gọn, thanh dưới một hàng (2026-10-27) ---- */
@media (max-width: 650px) {
  .app-head { position: relative; }
  .head-actions .connection { position: absolute; top: 4px; right: 0; width: auto; order: 0; font-size: 11px; }
  .head-actions { gap: 6px; }
  .head-actions .lbl { display: none; }                       /* Kho Proxy / Người dùng / Cài đặt chỉ còn biểu tượng (có title + aria-label) */
  .head-actions .btn.compact { min-width: 42px; padding-left: 9px; padding-right: 9px; }

  /* Bảng acc: mỗi acc là một thẻ, thấy ngay Số dư / Két / Trạng thái, không phải cuộn ngang. */
  .panel .table-wrap, .main-panel .table-wrap { max-height: none; overflow: visible; }
  #tblMain, #tblSub, #tblMain tbody, #tblSub tbody { display: block; width: 100%; }
  #tblMain thead, #tblSub thead { display: block; position: static; }
  #tblMain thead tr, #tblSub thead tr { display: flex; align-items: center; gap: 14px; padding: 6px 12px; background: var(--c12); border-bottom: 1px solid var(--c11); }
  #tblMain thead th, #tblSub thead th { display: none; padding: 0; border: 0; background: transparent; position: static; }
  #tblMain thead th.c-chk, #tblSub thead th.c-chk, #tblMain thead th:nth-child(5), #tblSub thead th:nth-child(5) { display: flex; align-items: center; gap: 8px; width: auto; font-size: 12px; white-space: nowrap; }
  #tblMain thead th.c-chk::after, #tblSub thead th.c-chk::after { content: "Chọn tất cả"; color: var(--muted); }
  #tblMain tbody tr[data-id], #tblSub tbody tr[data-id] {
    display: grid; grid-template-columns: 44px 40px minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "pm chk acc acc" "st st st st" "bal bal safe safe" "pw pw px px";
    gap: 2px 8px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--c11);
  }
  #tblMain tbody tr[data-id] td, #tblSub tbody tr[data-id] td { padding: 3px 0; border: 0; white-space: normal; min-width: 0; max-width: none; overflow-wrap: anywhere; }
  tr[data-id] td:nth-child(1) { grid-area: pm; }
  tr[data-id] td:nth-child(2) { grid-area: chk; }
  tr[data-id] td:nth-child(3), tr[data-id] td:nth-child(6) { display: none; }   /* STT, tên nhân vật (ít quan trọng; vẫn tìm kiếm được) */
  tr[data-id] td:nth-child(4) { grid-area: acc; font-size: 15px; }
  tr[data-id] td:nth-child(10) { grid-area: st; font-size: 12px; padding: 6px 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  tr[data-id] td:nth-child(8) { grid-area: bal; } tr[data-id] td:nth-child(9) { grid-area: safe; }
  tr[data-id] td:nth-child(5) { grid-area: pw; } tr[data-id] td:nth-child(7) { grid-area: px; } tr[data-id] td:nth-child(6) { grid-area: dn; }
  tr[data-id] td:nth-child(5)::before, tr[data-id] td:nth-child(6)::before, tr[data-id] td:nth-child(7)::before,
  tr[data-id] td:nth-child(8)::before, tr[data-id] td:nth-child(9)::before { display: block; color: var(--muted); font-size: 11px; font-weight: 400; }
  tr[data-id] td:nth-child(5)::before { content: "Mật khẩu"; } tr[data-id] td:nth-child(6)::before { content: "Tên nhân vật"; }
  tr[data-id] td:nth-child(7)::before { content: "Proxy"; } tr[data-id] td:nth-child(8)::before { content: "Số dư"; } tr[data-id] td:nth-child(9)::before { content: "Két sắt"; }
  tr[data-id] td.num { text-align: left; font-size: 16px; }
  tr[data-id] td.edit { min-width: 0; }
  tr[data-id] td.proxy { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #tblMain tbody tr:has(td.empty) td, #tblSub tbody tr:has(td.empty) td { display: block; text-align: center; padding: 18px 0; }

  /* Thanh dưới: một hàng (trạng thái bên trái, nút bên phải) thay vì chiếm ~110px. */
  .bar { flex-direction: row; align-items: center; flex-wrap: nowrap; gap: 10px; padding: 8px 0 max(8px, env(safe-area-inset-bottom)); }
  .bar-info { flex: 1 1 auto; min-width: 0; }
  .bar-status { max-width: none; font-size: 12px; }
  .bar-actions { flex: none; }
  #btnStart { min-width: 0; }
}