@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Noto+Sans+KR:wght@400;500&display=swap');

:root {
  color-scheme: light dark;
  --desk-bg: light-dark(#e7ece9, #0e1512);
  --desk-surface: light-dark(#ffffff, #17201c);
  --desk-surface-alt: light-dark(#f2f6f3, #1d2823);
  --desk-line: light-dark(#cdd8d2, #33423b);
  --desk-text: light-dark(#17221d, #e7f0eb);
  --desk-muted: light-dark(#66746d, #9eafa6);
  --desk-green: light-dark(#087c4b, #3bd28d);
  --desk-green-soft: light-dark(#e0f5e9, #153b2a);
  --desk-red: light-dark(#c23842, #ff7d85);
  --desk-red-soft: light-dark(#fbe8e9, #472329);
  --desk-amber: light-dark(#9b6500, #f0ba57);
  --desk-amber-soft: light-dark(#f7efd9, #3a321d);
  --desk-blue: light-dark(#236c94, #78c7ee);
  font-family: "Noto Sans KR", sans-serif;
  font-size: 13px;
  color: var(--desk-text);
  background: var(--desk-bg);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
button, input { font: inherit; }
button { color: inherit; }

.app-shell {
  width: 100%;
  height: 100%;
  min-width: 0;
  display: grid;
  grid-template-rows: 54px 66px 36px minmax(0, 1fr) 30px;
  padding: 0 12px;
  overflow: hidden;
  background: var(--desk-bg);
}

.topbar {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  border-bottom: 1px solid var(--desk-line);
}

.brand { display: flex; align-items: center; gap: 9px; white-space: nowrap; font-weight: 500; }
.exchange-switch {
  height: 30px;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--desk-line);
  border-radius: 7px;
  background: var(--desk-surface);
}
.exchange-button {
  align-self: stretch;
  min-width: 53px;
  padding: 0 9px;
  border: 0;
  color: var(--desk-muted);
  background: transparent;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.exchange-button:hover { color: var(--desk-text); background: var(--desk-surface-alt); }
.exchange-button.active { color: light-dark(#ffffff, #08110d); background: var(--desk-green); }
.exchange-divider { color: var(--desk-line); font-family: "IBM Plex Mono", monospace; }
.brand-desk { color: var(--desk-text); }

.live-status { min-width: 0; display: flex; align-items: center; gap: 16px; color: var(--desk-muted); white-space: nowrap; }
.live-item { display: inline-flex; align-items: center; gap: 6px; }
.status-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; }
.status-dot.ok { background: var(--desk-green); }
.status-dot.error { background: var(--desk-red); }
.status-dot.wait { background: var(--desk-amber); }

.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; white-space: nowrap; }
.sync-time { color: var(--desk-muted); }
.button {
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid var(--desk-line);
  border-radius: 7px;
  color: var(--desk-text);
  background: var(--desk-surface);
  cursor: pointer;
}
.button:hover { background: var(--desk-surface-alt); }
.button:disabled { opacity: .55; cursor: default; }
.button.primary { color: light-dark(#ffffff, #08110d); background: var(--desk-green); border-color: var(--desk-green); }
.button.danger { color: var(--desk-red); }

.account-strip {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: center;
  background: var(--desk-surface);
  border-bottom: 1px solid var(--desk-line);
}
.account-item {
  min-width: 0;
  padding: 0 14px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  white-space: nowrap;
  border-right: 1px solid var(--desk-line);
}
.account-item:last-child { border-right: 0; }
.account-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--desk-muted); }
.account-item strong { font-family: "IBM Plex Mono", monospace; font-size: 15px; font-weight: 500; }

.activity-strip {
  min-width: 0;
  display: grid;
  grid-template-columns: .85fr 1.2fr 1.45fr;
  align-items: center;
  color: var(--desk-muted);
  background: var(--desk-surface-alt);
  border-bottom: 1px solid var(--desk-line);
}
.activity-strip > div { min-width: 0; padding: 0 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-right: 1px solid var(--desk-line); }
.activity-strip > div:last-child { border-right: 0; }
.activity-strip strong { color: var(--desk-text); font-weight: 500; }

.dashboard-grid {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(120px, var(--row-one-track, 1.08fr)) 10px minmax(120px, var(--row-two-track, .92fr)) 10px minmax(120px, var(--row-three-track, .58fr));
  padding: 10px 0;
}
.dashboard-row {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(220px, var(--left-track, 1.12fr)) 10px minmax(220px, var(--right-track, .88fr));
}
.column-resizer, .row-resizer {
  position: relative;
  z-index: 5;
  touch-action: none;
  outline: none;
}
.column-resizer { cursor: col-resize; }
.row-resizer { cursor: row-resize; }
.column-resizer::after, .row-resizer::after {
  content: "";
  position: absolute;
  border-radius: 5px;
  background: var(--desk-line);
  transition: background-color .15s ease, transform .15s ease;
}
.column-resizer::after { top: 16px; bottom: 16px; left: 4px; width: 2px; }
.row-resizer::after { top: 4px; right: 16px; left: 16px; height: 2px; }
.column-resizer:hover::after, .column-resizer:focus-visible::after,
.row-resizer:hover::after, .row-resizer:focus-visible::after,
.column-resizer.is-active::after, .row-resizer.is-active::after {
  background: var(--desk-green);
  transform: scale(1.35);
}
body.is-resizing { user-select: none; }
body.is-resizing-column { cursor: col-resize; }
body.is-resizing-row { cursor: row-resize; }
.panel {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 40px minmax(0, 1fr);
  overflow: hidden;
  background: var(--desk-surface);
  border: 1px solid var(--desk-line);
  border-radius: 10px;
}
.panel-head { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 12px; border-bottom: 1px solid var(--desk-line); }
.panel-title { min-width: 0; display: flex; align-items: center; gap: 7px; font-weight: 500; white-space: nowrap; }
.panel-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--desk-muted); }
.info-button { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; color: var(--desk-muted); background: transparent; cursor: pointer; }
.info-button:hover { color: var(--desk-blue); background: var(--desk-surface-alt); }
.panel-body { min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--desk-line) transparent; }
.panel-body::-webkit-scrollbar { width: 7px; }
.panel-body::-webkit-scrollbar-thumb { border-radius: 6px; background: var(--desk-line); }

.data-table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.data-table th, .data-table td { height: 37px; padding: 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; border-bottom: 1px solid var(--desk-line); }
.data-table th { position: sticky; top: 0; z-index: 2; height: 32px; color: var(--desk-muted); background: var(--desk-surface-alt); font-weight: 400; }
.data-table tbody tr:hover { background: var(--desk-surface-alt); }
.num { text-align: right !important; font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; }
.mono { font-family: "IBM Plex Mono", monospace; }
.positive { color: var(--desk-green) !important; }
.negative { color: var(--desk-red) !important; }

.positions-table th:nth-child(1) { width: 12%; }
.positions-table th:nth-child(2) { width: 8%; }
.positions-table th:nth-child(3) { width: 9%; }
.positions-table th:nth-child(4), .positions-table th:nth-child(5) { width: 10%; }
.positions-table th:nth-child(6) { width: 6%; }
.positions-table th:nth-child(7) { width: 9%; }
.positions-table th:nth-child(8) { width: 10%; }
.positions-table th:nth-child(9) { width: 7%; }
.positions-table th:nth-child(10) { width: 11%; }
.positions-table th:nth-child(11) { width: 8%; }
.orders-table th:nth-child(1) { width: 12%; }
.orders-table th:nth-child(2) { width: 16%; }
.orders-table th:nth-child(3) { width: 10%; }
.orders-table th:nth-child(4) { width: 13%; }
.orders-table th:nth-child(5) { width: 13%; }
.orders-table th:nth-child(6) { width: 11%; }
.orders-table th:nth-child(7) { width: 9%; }
.orders-table th:nth-child(8), .orders-table th:nth-child(9) { width: 8%; }
.positions-table th, .positions-table td,
.orders-table th, .orders-table td { padding-right: 5px; padding-left: 5px; }
.fills-table th:nth-child(1) { width: 17%; }
.fills-table th:nth-child(2) { width: 15%; }
.fills-table th:nth-child(3) { width: 17%; }
.fills-table th:nth-child(4) { width: 15%; }
.fills-table th:nth-child(5) { width: 13%; }
.fills-table th:nth-child(6) { width: 11%; }
.fills-table th:nth-child(7) { width: 12%; }
.armed-orders-table th:nth-child(1) { width: 20%; }
.armed-orders-table th:nth-child(2) { width: 16%; }
.armed-orders-table th:nth-child(3) { width: 11%; }
.armed-orders-table th:nth-child(4) { width: 13%; }
.armed-orders-table th:nth-child(5) { width: 11%; }
.armed-orders-table th:nth-child(6),
.armed-orders-table th:nth-child(7) { width: 10%; }
.armed-orders-table th:nth-child(8) { width: 9%; }
.armed-orders-table th, .armed-orders-table td { padding-right: 4px; padding-left: 4px; font-size: 12px; }
.armed-symbol { min-width: 0; display: flex; align-items: center; gap: 5px; }
.armed-symbol .mono { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.side-tag, .state-tag { display: inline-block; min-width: 42px; padding: 2px 6px; border-radius: 5px; text-align: center; font-size: 11px; }
.side-tag.long, .state-tag.success { color: var(--desk-green); background: var(--desk-green-soft); }
.side-tag.short, .state-tag.error { color: var(--desk-red); background: var(--desk-red-soft); }
.side-tag.both, .state-tag.system, .state-tag.wait { color: var(--desk-amber); background: var(--desk-amber-soft); }
.state-tag.neutral { color: var(--desk-blue); background: var(--desk-surface-alt); }
.mini-button { min-width: 42px; height: 24px; padding: 1px 7px; border: 1px solid var(--desk-line); border-radius: 6px; color: var(--desk-red); background: transparent; cursor: pointer; }
.mini-button:hover { background: var(--desk-red-soft); }
.mini-button.danger-action { border-color: color-mix(in srgb, var(--desk-red) 45%, var(--desk-line)); }
.mini-button:disabled { opacity: .5; cursor: default; }

.event-list { padding: 0 12px; }
.event-row { min-width: 0; min-height: 48px; display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 10px; border-bottom: 1px solid var(--desk-line); }
.event-time { color: var(--desk-muted); font-family: "IBM Plex Mono", monospace; }
.event-main { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-main strong { font-weight: 500; }
.event-main span { margin-left: 7px; color: var(--desk-muted); }
.empty-row td { height: 90px; text-align: center; color: var(--desk-muted); }
.empty-event { min-height: 90px; display: grid; place-items: center; color: var(--desk-muted); }

.footer-line { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; overflow: hidden; white-space: nowrap; color: var(--desk-muted); border-top: 1px solid var(--desk-line); }
.footer-line span { overflow: hidden; text-overflow: ellipsis; }

.dialog { width: min(520px, calc(100% - 32px)); max-height: calc(100% - 48px); padding: 0; overflow: hidden; color: var(--desk-text); background: var(--desk-surface); border: 1px solid var(--desk-line); border-radius: 12px; box-shadow: 0 18px 50px light-dark(rgb(29 44 36 / 22%), rgb(0 0 0 / 48%)); }
.settings-dialog { width: min(620px, calc(100% - 32px)); }
.dialog::backdrop { background: light-dark(rgb(19 32 25 / 42%), rgb(0 0 0 / 62%)); }
.dialog-head, .dialog-foot { min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px; border-bottom: 1px solid var(--desk-line); }
.dialog-head strong { font-weight: 500; }
.dialog-body { max-height: 65vh; padding: 16px; overflow-y: auto; color: var(--desk-muted); }
.dialog-foot { justify-content: flex-end; border-top: 1px solid var(--desk-line); border-bottom: 0; }
.dialog-close { width: 28px; height: 28px; padding: 0; border: 0; color: var(--desk-muted); background: transparent; cursor: pointer; }
.settings-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.settings-section + .settings-section { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--desk-line); }
.settings-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.settings-section-head strong { color: var(--desk-text); font-weight: 500; }
.settings-section-head span { color: var(--desk-muted); font-size: 12px; }
.field { min-width: 0; display: block; }
.field.full { grid-column: 1 / -1; }
.field span { display: block; margin-bottom: 5px; }
.field input { width: 100%; min-height: 34px; padding: 6px 9px; border: 1px solid var(--desk-line); border-radius: 7px; color: var(--desk-text); background: var(--desk-bg); }
.configured-line { min-height: 20px; margin-top: 12px; color: var(--desk-muted); }
.toast { position: fixed; right: 18px; bottom: 18px; z-index: 50; display: none; max-width: min(420px, calc(100% - 36px)); padding: 9px 12px; border: 1px solid var(--desk-line); border-radius: 8px; color: var(--desk-text); background: var(--desk-surface); box-shadow: 0 8px 26px light-dark(rgb(29 44 36 / 16%), rgb(0 0 0 / 42%)); }
.toast.show { display: block; }
.toast.error { color: var(--desk-red); }

@media (max-width: 1180px) {
  .account-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .account-item:nth-child(3) { border-right: 0; }
  .account-item:nth-child(-n+3) { align-self: stretch; border-bottom: 1px solid var(--desk-line); }
  .live-item.slack, .sync-time { display: none; }
  .hide-medium { display: none; }
}

@media (max-width: 850px) {
  :root { font-size: 12px; }
  .topbar { gap: 10px; }
  .live-status { gap: 8px; }
  .activity-strip { grid-template-columns: .75fr 1.25fr; }
  .activity-strip > div:last-child { display: none; }
  .hide-compact { display: none; }
}

@media (max-width: 620px) {
  html, body { height: auto; min-height: 100%; overflow: auto; }
  .app-shell { height: auto; min-height: 100vh; grid-template-rows: auto; padding: 0 8px; overflow: visible; }
  .topbar { min-height: 94px; grid-template-columns: 1fr auto; }
  .live-status { grid-column: 1 / -1; grid-row: 2; padding-bottom: 10px; }
  .top-actions .button:first-of-type { display: none; }
  .account-strip { min-height: 150px; grid-template-columns: 1fr 1fr; }
  .account-item { min-height: 48px; }
  .account-item:nth-child(2n) { border-right: 0; }
  .account-item:nth-child(3) { border-right: 1px solid var(--desk-line); }
  .account-item:nth-child(-n+4) { border-bottom: 1px solid var(--desk-line); }
  .activity-strip { min-height: 64px; grid-template-columns: 1fr; }
  .activity-strip > div { min-height: 32px; display: flex; align-items: center; gap: 5px; border-right: 0; border-bottom: 1px solid var(--desk-line); }
  .dashboard-grid { display: grid; grid-template-rows: none; gap: 10px; }
  .dashboard-row { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .column-resizer, .row-resizer { display: none; }
  .panel { height: 310px; }
  .footer-line { min-height: 42px; }
  .footer-line span:last-child { display: none; }
  .settings-form { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
  .event-row { grid-template-columns: 58px minmax(0, 1fr) auto; }
}