:root {
  color-scheme: dark;
  --bg: #080c12;
  --surface: #101720;
  --surface-2: #131c28;
  --surface-3: #0c131c;
  --line: #283548;
  --line-soft: #1c2735;
  --text: #dce4ee;
  --muted: #8492a5;
  --blue: #60aaf7;
  --blue-dark: #142b44;
  --green: #46ce89;
  --green-dark: #12291f;
  --red: #f17676;
  --red-dark: #321b20;
  --amber: #e5b554;
  --amber-dark: #2b2416;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #05080d; color: var(--text); font-family: "Segoe UI", "Microsoft YaHei", sans-serif; letter-spacing: 0; }
button, input, select { font: inherit; letter-spacing: 0; }
button { cursor: pointer; }
.hidden { visibility: hidden; }

.stage {
  position: absolute;
  width: 2560px;
  height: 1440px;
  transform-origin: top left;
  padding: 12px 14px 14px;
  display: grid;
  grid-template-rows: 52px 50px minmax(0, 1fr);
  gap: 9px;
  background: var(--bg);
}

.topbar { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 0 4px 7px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #427bb8; border-radius: 4px; color: var(--blue); background: #12253a; font-size: 17px; font-weight: 800; }
.brand-mark.large { width: 46px; height: 46px; font-size: 23px; }
h1 { margin: 0; font-size: 20px; font-weight: 650; }
.subtitle { color: var(--muted); font-size: 11px; }
.runtime { display: flex; align-items: center; gap: 20px; color: #a1adbc; font-size: 14px; font-variant-numeric: tabular-nums; }
.positive { color: var(--green); }
.negative { color: var(--red) !important; }
.warning-text { color: var(--amber) !important; }
.muted { color: var(--muted); }

.toolbar { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); }
.button, .select, .icon-button { height: 35px; padding: 0 12px; border: 1px solid #35445a; border-radius: 4px; background: #141d29; color: #cad5e1; font-size: 13px; white-space: nowrap; }
.button:hover, .icon-button:hover { border-color: #58718f; color: #fff; }
.button:disabled { opacity: .38; cursor: not-allowed; }
.button.primary { color: #a9d3ff; border-color: #356495; background: var(--blue-dark); }
.button.safe { color: #93dfba; border-color: #2e6a51; background: var(--green-dark); }
.button.warning { color: #efd084; border-color: #735c2e; background: var(--amber-dark); }
.button.danger { color: #ffabab; border-color: #7b3740; background: var(--red-dark); }
.voice-button.active { color: #93dfba; border-color: #2e6a51; background: var(--green-dark); }
.voice-button.pending { color: #efd084; border-color: #735c2e; background: var(--amber-dark); }
.icon-button { height: 29px; padding: 0 9px; font-size: 11px; }
.select { min-width: 126px; }
.segments { display: flex; height: 35px; border: 1px solid #35445a; border-radius: 4px; overflow: hidden; }
.segment { min-width: 54px; padding: 0 10px; border: 0; border-right: 1px solid #35445a; background: #121a25; color: #93a0b1; }
.segment:last-child { border: 0; }
.segment.active { color: #b5d9ff; background: #193149; }
.online-only { display: flex; align-items: center; gap: 6px; color: #9ba8b8; font-size: 13px; }
.online-only input, .account-check { width: 15px; height: 15px; accent-color: #4c9de9; }
.spacer { flex: 1; }
.divider { width: 1px; height: 27px; margin: 0 3px; background: var(--line); }
.selected-count { min-width: 48px; color: var(--blue); font-size: 12px; }

.account-grid { min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 9px; }
.account-card { position: relative; min-width: 0; min-height: 0; display: grid; grid-template-rows: 58px 48px 44px minmax(0, 1fr) 43px; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); }
.account-card.selected { border-color: #3e83c9; box-shadow: inset 0 0 0 1px #285d92; }
.account-card.risk { border-color: #8a3b45; }
.account-card.offline { opacity: .7; }
.account-head { display: flex; align-items: center; gap: 8px; padding: 0 10px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.account-identity { width: 155px; min-width: 0; display: grid; gap: 3px; line-height: 1; }
.account-owner { overflow: hidden; color: #e4ebf3; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.account-sub { min-width: 0; display: flex; align-items: center; gap: 7px; overflow: hidden; color: #8fa0b4; font-size: 11px; white-space: nowrap; }
.account-sub b { flex: none; color: #b9c6d5; font-size: 12px; }
.account-sub em { overflow: hidden; color: #718196; font-style: normal; text-overflow: ellipsis; }
.symbol-tag, .host-tag, .type-tag, .license-tag { height: 24px; display: inline-flex; align-items: center; padding: 0 7px; border: 1px solid #39495e; border-radius: 3px; color: #9cabbc; font-size: 10px; white-space: nowrap; }
.symbol-tag { max-width: 78px; overflow: hidden; color: #9fd4ff; border-color: #35698f; background: #122a40; font-size: 11px; font-weight: 700; text-overflow: ellipsis; }
.host-tag { max-width: 75px; overflow: hidden; text-overflow: ellipsis; }
.type-tag.live { color: #8ddcb4; border-color: #2a5a45; background: #11271f; }
.type-tag.demo { color: #e7c36f; border-color: #65502b; background: #292315; }
.license-tag { padding: 0 5px; color: #aab8c8; background: #19222d; }
.license-tag.active { color: #8fdcb5; border-color: #2b654b; background: #11271f; }
.license-tag.expired { color: #ff9696; border-color: #7b3740; background: #321b20; }
.license-tag.unlicensed { color: #9aa8b8; }
.head-spacer { flex: 1; }
.heartbeat { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.margin-level { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.account-money { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; padding: 0 11px; border-bottom: 1px solid var(--line-soft); background: var(--surface-3); color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.account-money span:nth-child(2) { text-align: center; }
.account-money span:last-child { text-align: right; }
.account-money small { color: #6f8094; font-size: 9px; }
.account-money b { margin-left: 5px; color: #d2dbe5; font-size: 16px; }

.mode-tag { height: 23px; display: inline-flex; align-items: center; padding: 0 7px; border: 1px solid #354357; border-radius: 3px; color: #aab5c2; font-size: 11px; }
.mode-tag.run { color: #8bdcb2; border-color: #28563f; background: #10261e; }
.mode-tag.pause { color: #c1cad4; background: #1a232e; }
.mode-tag.smooth { color: #8cdcb5; border-color: #28563f; background: #10261e; }
.mode-tag.breakeven { color: #ebc66e; border-color: #63502a; background: #292315; }
.position-summary { min-width: 0; display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); background: #0d141e; }
.position-side { min-width: 0; display: grid; grid-template-columns: 38px 62px 44px 64px minmax(48px, 1fr); align-items: center; gap: 5px; padding: 0 8px; color: #8897a9; font-size: 10px; font-variant-numeric: tabular-nums; }
.position-side + .position-side { border-left: 1px solid var(--line); }
.position-side strong { color: var(--blue); font-size: 12px; }
.position-side.sell strong { color: #ee947d; }
.position-side .mode-tag { height: 20px; justify-content: center; padding: 0 4px; font-size: 9px; }
.position-side b { color: #c5d0dc; font-size: 11px; text-align: right; white-space: nowrap; }
.position-side em { overflow: hidden; font-size: 11px; font-style: normal; font-weight: 700; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.position-table { min-width: 0; min-height: 0; display: grid; grid-template-rows: 27px minmax(0, 1fr); padding: 0 7px 5px; overflow: hidden; }
.position-grid { min-width: 0; display: grid; grid-template-columns: 1.2fr 1.35fr .55fr .62fr 1.05fr .85fr .85fr 1.05fr .85fr 25px; align-items: center; }
.position-table-head { color: #718196; border-bottom: 1px solid #334155; background: #101923; font-size: 10px; }
.position-table-head span { min-width: 0; padding: 0 3px; text-align: right; white-space: nowrap; }
.position-table-head span:first-child, .position-table-head span:nth-child(2), .position-table-head span:nth-child(3) { text-align: left; }
.position-table-body { min-height: 0; overflow-x: hidden; overflow-y: auto; scrollbar-color: #3b4c61 #111923; scrollbar-width: thin; }
.position-row { min-height: 27px; border-bottom: 1px solid #222f3e; color: #9aa8b8; font-size: 10px; font-variant-numeric: tabular-nums; }
.position-row:nth-child(even) { background: #0d151f; }
.position-row:hover { background: #172333; }
.position-row > span, .position-row > time, .position-row > b, .position-row > strong { min-width: 0; overflow: hidden; padding: 0 3px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.position-row .ticket, .position-row time { color: #c3ceda; text-align: left; }
.position-row time { color: #8796a8; }
.position-type { text-align: left !important; text-transform: lowercase; }
.position-type.buy { color: #68b7ff; }
.position-type.sell { color: #ee947d; }
.ticket-close { width: 21px; height: 21px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 2px; background: transparent; color: #7f8da0; font-size: 17px; line-height: 1; }
.ticket-close:hover { color: #ff8c8c; background: #3a1d24; }
.position-empty { height: 100%; display: grid; place-items: center; color: #657489; font-size: 12px; }
.card-controls { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; padding: 5px 7px; border-top: 1px solid var(--line); background: var(--surface-3); }
.card-action { min-width: 0; padding: 0 2px; border: 1px solid #314055; border-radius: 3px; background: #141d28; color: #a3afbd; font-size: 11px; }
.card-action:hover { border-color: #58708d; color: white; }
.card-action.be { color: #e8c66f; border-color: #5f4d29; background: #282115; }
.card-action.exit { color: #8fdcb5; border-color: #2b5943; background: #11261e; }
.offline-cover { position: absolute; inset: 106px 0 43px; display: none; align-items: center; justify-content: center; color: #ff9b9b; background: rgba(8, 12, 18, .78); font-size: 16px; font-weight: 700; z-index: 2; }
.account-card.offline .offline-cover { display: flex; }
.empty-dashboard { grid-column: 1 / -1; grid-row: 1 / -1; display: grid; place-items: center; border: 1px dashed #34445a; color: var(--muted); font-size: 18px; }

.login-screen, .modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: #070b11; }
.login-screen.hidden { display: none; }
.login-panel { width: 390px; padding: 27px; border: 1px solid #34445a; border-radius: 6px; background: var(--surface); box-shadow: 0 24px 70px rgba(0, 0, 0, .5); }
.login-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.login-brand h2, .modal h2 { margin: 0; font-size: 20px; }
.login-brand p, .modal p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.login-panel label, .form-body label { display: grid; gap: 7px; margin-top: 15px; color: #aeb9c7; font-size: 12px; }
.login-panel input, .form-body input { width: 100%; height: 40px; padding: 0 11px; border: 1px solid #38485d; border-radius: 4px; outline: none; background: #0b121b; color: var(--text); }
.login-panel input:focus, .form-body input:focus { border-color: #4f91d1; }
.login-button { width: 100%; height: 42px; margin-top: 18px; border: 1px solid #3f76ad; border-radius: 4px; background: #173552; color: #c4e1ff; font-weight: 700; }
.form-error { min-height: 17px; margin: 10px 0 -4px !important; color: var(--red) !important; font-size: 11px !important; }

.modal { display: none; background: rgba(4, 7, 11, .8); }
.modal.open { display: flex; }
.modal-panel { overflow: hidden; border: 1px solid #3c4e65; border-radius: 6px; background: var(--surface); box-shadow: 0 24px 70px rgba(0, 0, 0, .55); }
.layout-panel { width: 850px; }
.license-panel { width: 900px; }
.voice-panel { width: 1180px; }
.password-panel { width: 450px; }
.confirm-panel { width: 520px; }
.modal-panel header { min-height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.modal-panel footer { height: 58px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 0 16px; border-top: 1px solid var(--line); background: var(--surface-3); }
.slot-list { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 16px; }
.slot { height: 65px; display: grid; grid-template-columns: 62px 1fr 80px 54px; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface-3); }
.slot strong { color: var(--blue); font-size: 11px; }
.slot select { min-width: 0; height: 34px; padding: 0 8px; border: 1px solid #35455a; border-radius: 3px; background: #141d29; color: var(--text); }
.slot-host { overflow: hidden; color: #9daabc; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.slot-type { text-align: center; color: var(--muted); font-size: 9px; }
.license-table-head, .license-row { display: grid; grid-template-columns: 2fr 1.1fr .65fr .8fr 1fr; align-items: center; gap: 10px; }
.license-table-head { height: 34px; padding: 0 18px; color: #718196; border-bottom: 1px solid var(--line); background: #0d141e; font-size: 10px; }
.license-list { max-height: 590px; min-height: 160px; padding: 10px 16px; overflow-y: auto; }
.license-row { min-height: 50px; padding: 0 8px; border-bottom: 1px solid var(--line-soft); color: #9daabc; font-size: 11px; }
.license-account { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.license-account strong { overflow: hidden; color: #d8e1eb; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.license-account small { color: #7e8da0; font-variant-numeric: tabular-nums; }
.license-state { width: 58px; height: 24px; display: inline-grid; place-items: center; border: 1px solid #3a485b; border-radius: 3px; color: #9aa8b8; background: #18212c; font-size: 10px; }
.license-state.active { color: #8fdcb5; border-color: #2b654b; background: #11271f; }
.license-state.expired { color: #ff9696; border-color: #7b3740; background: #321b20; }
.license-row input[type="date"] { width: 150px; height: 34px; padding: 0 8px; border: 1px solid #35455a; border-radius: 3px; outline: none; color: #d4dde7; background: #101923; color-scheme: dark; }
.license-row input[type="date"]:focus { border-color: #4f91d1; }
.license-empty { height: 160px; display: grid; place-items: center; color: var(--muted); }
.voice-global-toolbar { height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: 1px solid var(--line); background: #0d141e; }
.voice-rate { display: flex; align-items: center; gap: 12px; color: #aeb9c7; font-size: 12px; }
.voice-rate input { width: 300px; accent-color: #4f9fe8; }
.voice-rate output { width: 58px; color: #b8dcff; font-size: 13px; font-variant-numeric: tabular-nums; }
.voice-workspace { height: 530px; display: grid; grid-template-columns: 300px minmax(0, 1fr); }
.voice-account-pane { min-width: 0; display: grid; grid-template-rows: 34px minmax(0, 1fr); border-right: 1px solid var(--line); background: #0c131c; }
.voice-account-head { display: flex; align-items: center; justify-content: space-between; padding: 0 14px; color: #718196; border-bottom: 1px solid var(--line); font-size: 10px; }
.voice-account-list { min-height: 0; padding: 6px; overflow-y: auto; }
.voice-account-item { width: 100%; min-height: 62px; display: grid; grid-template-columns: minmax(0, 1fr) 48px; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid transparent; border-bottom-color: var(--line-soft); background: transparent; color: #9aa8b8; text-align: left; }
.voice-account-item:hover { background: #121d29; }
.voice-account-item.selected { border-color: #356495; background: #14283c; }
.voice-account-item strong, .voice-account-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-account-item strong { color: #d8e2ec; font-size: 13px; }
.voice-account-item small { margin-top: 5px; color: #728298; font-size: 10px; }
.voice-account-state { height: 23px; display: grid; place-items: center; border: 1px solid #445164; border-radius: 3px; color: #8795a6; background: #151d27; font-size: 10px; }
.voice-account-state.on { color: #8fdcb5; border-color: #2b654b; background: #11271f; }
.voice-editor-pane { min-width: 0; min-height: 0; display: grid; grid-template-rows: 60px 34px minmax(0, 1fr) 48px; }
.voice-editor-head { display: flex; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.voice-editor-head strong, .voice-editor-head span { display: block; }
.voice-editor-head strong { color: #e1e9f2; font-size: 15px; }
.voice-editor-head span { margin-top: 5px; color: #7e8da0; font-size: 10px; }
.voice-switch { display: flex; align-items: center; gap: 9px; color: #cbd5e0; font-size: 13px; }
.voice-switch input { width: 17px; height: 17px; accent-color: #47bd7f; }
.voice-rule-head, .voice-rule-row { display: grid; grid-template-columns: 150px 120px minmax(0, 1fr) 36px; align-items: center; gap: 12px; }
.voice-rule-head { height: 34px; padding: 0 18px; color: #718196; border-bottom: 1px solid var(--line); font-size: 10px; }
.voice-rule-list { min-height: 0; padding: 6px 18px; overflow-y: auto; }
.voice-rule-row { min-height: 52px; border-bottom: 1px solid var(--line-soft); }
.voice-rule-row input { width: 100%; height: 35px; padding: 0 9px; border: 1px solid #35455a; border-radius: 3px; outline: none; color: #d7e0ea; background: #101923; }
.voice-rule-row input:focus { border-color: #4f91d1; }
.voice-rule-row input[type="number"] { font-variant-numeric: tabular-nums; }
.voice-rule-remove { width: 29px; height: 29px; display: grid; place-items: center; padding: 0; border: 1px solid #573039; border-radius: 3px; color: #dc858b; background: #28171b; font-size: 17px; }
.voice-rule-remove:hover { color: #fff; border-color: #8b4650; background: #3b1d24; }
.voice-add-row { height: 48px; display: flex; align-items: center; padding: 0 18px; border-top: 1px solid var(--line-soft); }
.form-body { padding: 8px 20px 18px; }
.confirm-panel header { min-height: 105px; }
.confirm-panel #confirmText { margin-top: 10px; color: #c1cbd7; font-size: 12px; line-height: 1.7; }

.toast-area { position: fixed; right: 18px; bottom: 18px; z-index: 80; display: grid; gap: 8px; }
.toast { min-width: 260px; max-width: 440px; padding: 12px 14px; border: 1px solid #3c536b; border-radius: 4px; background: #101a26; color: #d5dee8; box-shadow: 0 12px 35px rgba(0,0,0,.4); font-size: 12px; }
.toast.error { border-color: #7a3841; color: #ffaaaa; background: #27171b; }

@media (max-aspect-ratio: 16/10) {
  .stage { width: 1920px; height: 1200px; }
}