* { box-sizing: border-box; }
:root{
  --bg:#0b0f14;
  --panel:#111827;
  --panel2:#0b1220;
  --line:#1f2937;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --blue:#2563eb;
  --green:#16a34a;
  --red:#dc2626;
}
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", sans-serif; background:var(--bg); color:var(--text); }
.app { display:flex; height:100vh; }

.left { flex: 1; background:var(--bg); padding:8px; min-width: 0; }
.right { width: 420px; background:var(--panel); border-left:1px solid var(--line); display:flex; flex-direction:column; min-width: 0; }

#chartWrap { height:100%; display:flex; flex-direction:column; gap:8px; }
.chart { flex: 1; min-height: 0; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.chart-atr { flex: 0 0 24%; }

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px; border-bottom:1px solid var(--line);
  gap:10px;
}
.brand{ font-weight:800; letter-spacing:0.3px; }
.topbar-right{ display:flex; gap:10px; align-items:center; }

/* v4.5.23: prevent topbar action buttons text wrapping */
.topbar-right .btn{
  width:auto;
  padding:6px 8px;
  font-size:11px;
  line-height:1.1;
  white-space:nowrap;
}

.pill{
  font-size:12px; padding:6px 10px; border-radius:999px;
  border:1px solid var(--line); background:var(--panel2); color:var(--text);
}
.pill.error{
  border-color: var(--red);
  color: var(--red);
}


.tabs { display:flex; gap:8px; padding:10px; border-bottom:1px solid var(--line); }
.tab { flex:1; padding:10px; border-radius:10px; border:1px solid var(--line); background:var(--panel2); color:var(--text); cursor:pointer; }
.tab.active { background:#1f2937; }

.tabBody { display:none; padding:12px; overflow:auto; min-height:0; }
.tabBody.active { display:block; }

.box { background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:12px; margin-bottom:12px; box-sizing:border-box; overflow-x:hidden; }
.box h3 { margin:0 0 10px 0; font-size:14px; color:#cbd5e1; }

.row { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.row label { font-size:12px; color:var(--muted); }
.row input, .row select {
  padding:10px; border-radius:10px; border:1px solid var(--line); background:var(--bg); color:var(--text);
}

.grid2 { display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap:10px; width:auto; max-width:100%; box-sizing:border-box; }
.grid2 > * { min-width:0; width:100%; }
.row-inline { display:flex; gap:8px; align-items:stretch; margin-bottom:10px; }
.row-inline .btn { flex:1; }

.btn { width:100%; padding:10px; border-radius:10px; border:1px solid var(--line); background:var(--panel); color:var(--text); cursor:pointer; }
.btn.primary { background:var(--blue); border-color:#1d4ed8; }

.logBox { height: calc(100vh - 180px); border:1px solid var(--line); border-radius:12px; background:var(--bg); overflow:auto; padding:10px; }
#logLines { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:12px; line-height:1.4; }
.logLine { margin-bottom:6px; white-space:pre-wrap; color:#cbd5e1; }

/* trade widget */
.trade-widget { display:flex; flex-direction:column; gap:8px; font-size:13px; }
.tw-row { display:flex; justify-content:space-between; gap:10px; }
.trade-widget .label { color:var(--muted); }
.trade-widget .value { font-weight:800; }

/* table */
.tableWrap{ border:1px solid var(--line); border-radius:12px; overflow:auto; background:var(--bg); }
.tbl{ width:100%; border-collapse:collapse; font-size:12px; }
.tbl th, .tbl td{ border-bottom:1px solid #111827; padding:8px 10px; white-space:nowrap; }
.tbl th{ position:sticky; top:0; background:#0f172a; z-index:2; text-align:left; color:#cbd5e1; }
.tbl td{ color:#d1d5db; }
.tbl td.msg{ white-space:pre-wrap; min-width:240px; }

/* modal */
.modal{ position:fixed; inset:0; display:none; z-index:100; }
.modal[aria-hidden="false"]{ display:block; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,0.6); }
.modal-panel{
  position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
  width:min(520px, calc(100vw - 24px));
  background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px;
}
.modal-title{ font-weight:900; margin-bottom:10px; }
.modal-actions{ display:flex; gap:10px; margin-top:6px; }
.modal-actions .btn{ flex:1; }

/* toast */
.toastWrap{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display:flex;
  flex-direction:column;
  gap:8px;
  z-index:200;
  width: min(520px, calc(100vw - 24px));
}
.toast{
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  background: rgba(17, 24, 39, 0.96);
  color: var(--text);
  display:flex;
  gap:10px;
  align-items:flex-start;
  opacity: 1;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.toast.hide{ opacity:0; transform: translateY(6px); }
.toast .badge{
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  background: var(--panel2);
  color: var(--text);
}
.toast.info .badge{ border-color:#334155; }
.toast.success .badge{ border-color:#14532d; }
.toast.warning .badge{ border-color:#7c2d12; }
.toast.error .badge{ border-color:#7f1d1d; }
.toast .msg{ white-space:pre-wrap; font-size:13px; line-height:1.35; }

/* -----------------------
   Mobile responsive
----------------------- */
@media (max-width: 980px){
  .app{ flex-direction:column; height:100dvh; }
  .left{ padding:8px; }
  .right{ width:auto; border-left:none; border-top:1px solid var(--line); height: 48vh; }
  .logBox{ height: 38vh; }
  .chart-atr{ flex: 0 0 28%; }
}

@media (max-width: 520px){
  .grid2{ grid-template-columns: 1fr; }
  .row-inline{ flex-direction:column; }
  .right{ height: 52vh; }
  .tabs{ position:sticky; top:0; background:var(--panel); z-index:5; }
}

.pill.balance{
  min-width: 200px;
  text-align: center;
}

/* -----------------
   Login / Account
------------------ */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.login-box {
  width: 420px;
  max-width: 100%;
}