:root {
  color-scheme: dark;
  --bg: #0e1117;
  --panel: #161b22;
  --panel-alt: #1c2330;
  --border: #2a3140;
  --text: #e6e9ef;
  --muted: #8b96a5;
  --up: #3ddc84;
  --down: #ff5c5c;
  --accent: #4f8cff;
  /* Price-direction colors only, kept separate from --up/--down (which stay
     literal green/red for unrelated "good/bad" UI like connection status and
     error text) — Taiwan market convention is reversed: red = 漲, green = 跌. */
  --price-up: #ff5c5c;
  --price-down: #3ddc84;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  position: sticky;
  top: 0;
  z-index: 5;
}

header .title { display: flex; align-items: baseline; gap: 10px; }
header h1 { font-size: 16px; margin: 0; font-weight: 600; }
header .symbol { color: var(--muted); font-size: 13px; }

.sim-badge {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 10px;
  background: #3a2f10;
  color: #e2b53c;
  border: 1px solid #5a4a1a;
}

.session-badge {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 10px;
  background: #17233a;
  color: var(--accent);
  border: 1px solid #2a3f66;
}

.price-readout { display: flex; gap: 12px; align-items: center; }
.price-readout .mid-row { display: flex; align-items: baseline; gap: 8px; }
.price-readout .mid { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.price-readout .chg { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.price-readout .chg.up { color: var(--price-up); }
.price-readout .chg.down { color: var(--price-down); }
.price-readout .ba { display: flex; gap: 6px; }

.ba-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.15;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ba-item .ba-label { font-size: 9px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.8; }
.ba-item.bid { background: rgba(255, 92, 92, 0.14); color: var(--price-up); }
.ba-item.ask { background: rgba(61, 220, 132, 0.14); color: var(--price-down); }

.price-readout .ohl { display: flex; gap: 10px; }
.ohl-item {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.ohl-item .ohl-label { font-size: 10px; color: var(--muted); }

.status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--down);
  display: inline-block;
  margin-right: 6px;
}
.status-dot.connected { background: var(--up); }

main {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 16px;
  padding: 16px;
  max-width: 1400px;
  margin: 0 auto;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
}

.panel h2 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0 0 10px;
}

#chart-panel { padding: 10px; }

.chart-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 2px 4px 8px;
}
.chart-modes { display: flex; gap: 6px; }
.chart-mode-btn {
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--panel-alt);
  color: var(--muted);
  cursor: pointer;
}
.chart-mode-btn.active { background: #17233a; color: var(--accent); border-color: var(--accent); }

#chart-interval-group.hidden { display: none; }
.chart-interval-btn {
  padding: 4px 9px;
  font-size: 11px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.chart-interval-btn.active { background: var(--panel-alt); color: var(--text); border-color: #3a4356; }

.chart-bbands-toggle {
  padding: 4px 9px;
  font-size: 11px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.chart-bbands-toggle.active { background: var(--panel-alt); color: var(--text); border-color: #3a4356; }
.chart-subpanel-select {
  padding: 3px 6px;
  font-size: 11px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--panel-alt);
  color: var(--text);
  cursor: pointer;
}

.chart-legend { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

.chart-canvas-wrap { position: relative; }
#chart-container { width: 100%; height: 460px; }

.chart-subpanel-legend { margin-top: 6px; }
.chart-subpanel-legend.hidden { display: none; }

.chart-tooltip {
  position: absolute;
  top: 8px;
  pointer-events: none;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 9px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text);
  white-space: nowrap;
}
.chart-tooltip.hidden { display: none; }

.chart-empty {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--muted);
  font-size: 13px;
  pointer-events: none;
}
.chart-empty.hidden { display: none; }

.session-toast {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: #17233a;
  color: var(--accent);
  border: 1px solid #2a3f66;
  border-radius: 10px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.session-toast.visible { opacity: 1; }

.sidebar { display: flex; flex-direction: column; gap: 14px; }

.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
}
.stat-grid .label { color: var(--muted); font-size: 12px; }
.stat-grid .value { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }

.up { color: var(--price-up); }
.down { color: var(--price-down); }

.depth-ladder { display: flex; flex-direction: column; gap: 1px; font-size: 12px; }
.depth-side { display: flex; flex-direction: column; gap: 1px; }
.depth-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 2px 6px;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  border-radius: 3px;
}
.depth-row .depth-price { font-weight: 600; z-index: 1; }
.depth-row .depth-qty { text-align: right; color: var(--muted); z-index: 1; }
.depth-row.ask .depth-price { color: var(--price-down); }
.depth-row.bid .depth-price { color: var(--price-up); }
.depth-bar {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}
.depth-row.ask .depth-bar { background: rgba(61, 220, 132, 0.12); }
.depth-row.bid .depth-bar { background: rgba(255, 92, 92, 0.12); }
.depth-mid-gap { height: 6px; }
.depth-empty { color: var(--muted); font-size: 12px; }

.tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.tab-btn {
  flex: 1;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--panel-alt);
  color: var(--muted);
  cursor: pointer;
  font-weight: 600;
}
.tab-btn.active.buy { background: #3a1616; color: var(--price-up); border-color: #5c1f1f; }
.tab-btn.active.sell { background: #123a26; color: var(--price-down); border-color: #1f5c3c; }

.field { margin-bottom: 10px; }
.field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.field input, .field select {
  width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--panel-alt);
  color: var(--text);
  font-size: 13px;
}
.field-row { display: flex; gap: 10px; }
.field-row .field { flex: 1; }

button.submit {
  width: 100%;
  padding: 10px;
  border-radius: 6px;
  border: none;
  font-weight: 700;
  cursor: pointer;
  font-size: 14px;
}
button.submit.buy { background: var(--price-up); color: #2c0505; }
button.submit.sell { background: var(--price-down); color: #06210f; }
button.submit:disabled { opacity: 0.5; cursor: not-allowed; }

.hidden { display: none !important; }

table { width: 100%; border-collapse: collapse; font-size: 12px; }
th, td { text-align: right; padding: 5px 4px; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
th:first-child, td:first-child { text-align: left; }
th { color: var(--muted); font-weight: 500; }
.empty-row td { text-align: center; color: var(--muted); padding: 10px; }

.mini-btn {
  padding: 3px 8px;
  font-size: 11px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--panel-alt);
  color: var(--text);
  cursor: pointer;
}
.mini-btn:hover { border-color: var(--accent); }

.wide-panels { grid-column: 1 / -1; }

.record-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.record-tab-btn {
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--panel-alt);
  color: var(--muted);
  cursor: pointer;
}
.record-tab-btn.active { background: #17233a; color: var(--accent); border-color: var(--accent); }
.record-tab-content.hidden { display: none; }

@media (max-width: 900px) {
  main { grid-template-columns: 1fr; }
  /* Chart pinned to the top on mobile — checking price action is the first
     thing a user wants on a small screen; the account/order-ticket/position
     column and the holdings/orders/history tables follow below it. */
  #chart-panel { order: 1; }
  .sidebar { order: 2; }
  .wide-panels { order: 3; }
}

@media (max-width: 640px) {
  /* Header packed .title and .header-right into one unwrapped row, so on
     narrow screens they'd fight for space until .title got squeezed to
     near-zero width — CJK text has no spaces to break on, so it wrapped one
     character per line instead of failing gracefully. Stacking the two
     halves (each free to wrap internally) fixes it at the root. */
  header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 14px;
  }
  header .title,
  .header-right {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .header-right { justify-content: flex-start; }
  .price-readout { flex-wrap: wrap; gap: 4px 14px; }
  .price-readout .mid { font-size: 19px; }

  .stat-grid { grid-template-columns: 1fr 1fr; }
  /* .kpi-grid's unconditional 4-column rule is declared later in this file
     (source order wins ties over media-query rules at equal specificity),
     so this override needs !important to actually take effect here. */
  .kpi-grid { grid-template-columns: 1fr 1fr !important; }
  .kpi-value { font-size: 20px; }

  .modal-backdrop { padding: 16px; }
  .modal { max-height: 85vh; }

  .table-toolbar { flex-direction: column; align-items: stretch; }
  .table-toolbar-actions { justify-content: space-between; }
  #user-search { flex: 1; min-width: 0; }

  /* A 9-column table has no room to breathe on a phone — horizontal
     scroll works, but the least essential columns (淨值/未實現損益) just
     add scrolling distance to reach the action button, so drop them. */
  th.col-equity, td.col-equity,
  th.col-upnl, td.col-upnl {
    display: none;
  }
}

.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px;
}

.auth-card h1 { font-size: 18px; margin: 0 0 4px; }
.auth-card .sub { color: var(--muted); font-size: 13px; margin-bottom: 20px; }

.auth-error {
  background: #3a1616;
  border: 1px solid #5c1f1f;
  color: var(--down);
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 6px;
  margin-bottom: 14px;
}
.auth-error.hidden { display: none; }

.auth-switch { text-align: center; margin-top: 14px; font-size: 13px; color: var(--muted); }
.auth-switch a { color: var(--accent); cursor: pointer; text-decoration: none; }

.header-right { display: flex; align-items: center; gap: 14px; }
.link-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  text-decoration: none;
}
.link-btn:hover { border-color: var(--accent); }

.user-menu { position: relative; }
.avatar-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--panel-alt);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-btn:hover { border-color: var(--accent); }

.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  z-index: 6;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.user-dropdown.hidden { display: none; }
.user-dropdown-info { padding: 8px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.user-dropdown-name { font-size: 13px; font-weight: 700; color: var(--text); }
.user-dropdown-email { font-size: 12px; color: var(--muted); margin-top: 2px; }
.user-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--text);
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
}
.user-dropdown-item:hover { background: var(--panel); }

.admin-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  max-width: 1400px;
  margin: 0 auto;
}

.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kpi-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  border-top: 3px solid var(--accent);
}
.kpi-label {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
  /* CJK labels have no spaces to wrap on, so a narrow card would otherwise
     wrap them one character per line; truncate instead. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kpi-value { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }

.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.table-toolbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#user-search {
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--panel-alt);
  color: var(--text);
  font-size: 13px;
  min-width: 200px;
}

.mini-btn-primary { background: var(--accent); color: #06122b; border-color: var(--accent); font-weight: 700; }
.mini-btn-primary:hover { opacity: 0.9; }

.admin-table-wrap { overflow-x: auto; }
tr.clickable { cursor: pointer; }
tr.clickable:hover { background: var(--panel-alt); }
tr.row-hidden { display: none; }

.clickable-card { cursor: pointer; border-radius: 8px; margin: -6px; padding: 6px; transition: background 0.1s; }
.clickable-card:hover { background: var(--panel-alt); }
.clickable-card-hint { text-align: right; font-size: 11px; color: var(--accent); margin-top: 8px; }
.badge { padding: 2px 7px; border-radius: 8px; font-size: 11px; }
.badge.admin { background: #1a2f52; color: #7db2ff; }
.badge.user { background: #23293a; color: var(--muted); }
.badge.disabled { background: #3a1616; color: var(--down); }
.badge.editable { background: #17233a; color: var(--accent); white-space: nowrap; }

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center; z-index: 10;
}
.modal-backdrop.hidden { display: none; }
.modal {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 20px; width: 100%; max-width: 480px; max-height: 80vh; overflow-y: auto;
}
.modal h2 { margin-top: 0; }
.modal-close { float: right; cursor: pointer; color: var(--muted); }