* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --bg:   #060608;
  --bg2:  #0d0e12;
  --bg3:  #16181f;
  --bdr:  #1e2028;
  --txt:  #d1d4dc;
  --txt2: #787b86;
  --up:   #26a69a;
  --dn:   #ef5350;
  --acc:  #2962ff;
  --star: #f9c74f;
}
body {
  background: var(--bg); color: var(--txt);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  display: flex; flex-direction: column; height: 100vh; overflow: hidden; font-size: 12px;
}

/* ── TOPBAR ── */
#topbar {
  display: flex; align-items: center; padding: 0 12px; height: 46px;
  background: var(--bg2); border-bottom: 1px solid var(--bdr); gap: 14px; flex-shrink: 0;
}
.sym-block { display: flex; align-items: baseline; gap: 6px; }
.sym-name  { font-size: 15px; font-weight: 700; color: var(--txt); }
.sym-sub   { font-size: 11px; color: var(--txt2); }
.vsep      { width: 1px; height: 22px; background: var(--bdr); flex-shrink: 0; }
.ohlc-wrap { display: flex; gap: 10px; }
.ohlc-item { display: flex; gap: 3px; font-size: 12px; }
.ol { color: var(--txt2); }
.ov { color: var(--txt); }
.ov-up { color: var(--up); font-weight: 600; }
.ov-dn { color: var(--dn); font-weight: 600; }
.spacer { flex: 1; }
#topbar-actions {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.topbar-btn {
  display: flex; align-items: center; gap: 5px;
  background: #1e2536; border: 1px solid #363d52; color: #9da8c0;
  padding: 5px 11px; border-radius: 6px; cursor: pointer;
  font-size: 11px; font-weight: 500; letter-spacing: 0.02em;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.topbar-btn:hover {
  background: #252d42; border-color: #4e5a7a; color: #d1d4dc;
}
.tf-grp { display: flex; gap: 1px; }
.tf-btn {
  background: transparent; border: none; color: var(--txt2);
  padding: 4px 8px; border-radius: 4px; cursor: pointer; font-size: 12px; transition: all .15s;
}
.tf-btn:hover, .tf-btn.active { background: var(--bg3); color: var(--txt); font-weight: 600; }

/* ── MAIN ── */
#main { display: flex; flex: 1; overflow: hidden; }

/* ── TOOLBAR ── */
#toolbar {
  width: 46px; background: var(--bg2); border-right: 1px solid var(--bdr);
  display: flex; flex-direction: column; align-items: center; padding: 8px 0; gap: 2px; flex-shrink: 0;
}
.tool-btn {
  width: 32px; height: 32px; background: transparent; border: none;
  color: var(--txt2); border-radius: 4px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 15px; transition: all .15s;
}
.tool-btn:hover { background: var(--bg3); color: var(--txt); }
.tool-sep { width: 28px; height: 1px; background: var(--bdr); margin: 4px 0; }

/* ── CHART AREA ── */
#chart-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
#chart-grid { flex: 1; min-height: 0; }
#chart-main { flex: 1; position: relative; min-height: 0; }

/* ── 4분할 레이아웃 ── */
#chart-grid {
  width: 100%; flex: 1; display: grid;
  grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  gap: 2px; background: #1e2028; min-height: 0;
}
.panel-cell {
  position: relative; overflow: hidden; background: var(--bg);
  display: flex; flex-direction: column; min-height: 0;
}
.panel-ct { flex: 1; min-height: 150px; width: 100%; }
.panel-sub-area { display: flex; flex-direction: column; flex-shrink: 0; }
.panel-cell.pnl-active::after {
  content: ''; position: absolute; inset: 0;
  border: 2px solid #0D9488;
  box-shadow: inset 0 0 8px rgba(13,148,136,0.15);
  pointer-events: none; z-index: 20;
}
/* 단일(1분할) 모드: 활성 패널만 표시, chart-main+sub-charts 세로 배치 */
body.single-layout #chart-grid {
  display: flex; flex-direction: column;
}
body.single-layout .panel-cell { display: none; }
body.single-layout .panel-cell.pnl-active {
  display: flex; flex-direction: column; flex: 1; min-height: 0;
}
body.single-layout .panel-cell.pnl-active::after { display: none; }

/* 전체화면 */
body.is-fullscreen #topbar,
body.is-fullscreen #toolbar,
body.is-fullscreen #h-resizer,
body.is-fullscreen #sidebar { display: none !important; }
body.is-fullscreen #main { height: 100vh; }

#layout-btn { font-size: 14px !important; padding: 3px 9px !important; }
#layout-btn.single-mode { color: var(--acc) !important; font-weight: 700; }
#fullscreen-btn { font-size: 15px !important; padding: 3px 10px !important; }
#pct-0 { position: absolute; inset: 0; overflow: hidden; }
/* panel header overlay */
.panel-hd {
  position: absolute; top: 4px; left: 6px; z-index: 10;
  display: flex; gap: 5px; align-items: center;
  user-select: none; pointer-events: auto; cursor: pointer;
}
body.single-layout .panel-hd { display: none; }
.ph-sym { font-size: 11px; font-weight: 700; color: var(--txt); }
.ph-tf  { font-size: 10px; color: var(--txt2); }
.ph-price { font-size: 10px; color: var(--txt2); font-family: monospace; }
.ph-chg { font-size: 10px; font-weight: 600; }
/* panel config popup */
.pnl-cfg-popup {
  position: absolute; top: 26px; left: 4px; z-index: 100;
  background: var(--bg2); border: 1px solid var(--bdr);
  border-radius: 6px; padding: 8px; width: 220px;
  box-shadow: 0 4px 16px rgba(0,0,0,.55); display: none;
}
.pnl-cfg-popup.open { display: block; }
.pnl-cfg-search {
  width: 100%; box-sizing: border-box;
  background: var(--bg3); border: 1px solid var(--bdr);
  color: var(--txt); border-radius: 4px; padding: 4px 6px;
  font-size: 11px; margin-bottom: 6px; outline: none;
}
.pnl-cfg-list { max-height: 130px; overflow-y: auto; margin-bottom: 6px; }
.pnl-cfg-item { padding: 3px 6px; border-radius: 3px; cursor: pointer; font-size: 11px; color: var(--txt2); }
.pnl-cfg-item:hover { background: var(--bg3); color: var(--txt); }
.pnl-cfg-item.selected { background: var(--bg3); color: var(--acc); font-weight: 700; }
.pnl-cfg-tfs { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 7px; }
.pnl-cfg-tf {
  background: var(--bg3); border: 1px solid var(--bdr);
  color: var(--txt2); border-radius: 3px; padding: 2px 7px; font-size: 10px; cursor: pointer;
}
.pnl-cfg-tf.active { background: var(--acc); color: #fff; border-color: var(--acc); }
.pnl-cfg-apply {
  width: 100%; background: var(--acc); color: #fff;
  border: none; border-radius: 4px; padding: 5px;
  font-size: 11px; cursor: pointer; font-weight: 600;
}
.pnl-cfg-apply:hover { opacity: .85; }
#chart-legend {
  position: absolute; top: 8px; left: 8px; z-index: 10;
  font-size: 11px; line-height: 1.9; pointer-events: none;
  background: rgba(19,23,34,.82); padding: 5px 8px; border-radius: 4px;
}
.leg-row { display: flex; align-items: center; gap: 5px; }
.leg-line { width: 16px; height: 2px; display: inline-block; border-radius: 1px; }
/* ── RESIZERS ── */
#v-resizer {
  height: 8px; flex-shrink: 0; cursor: ns-resize;
  background: var(--bdr); position: relative; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
#v-resizer::after {
  content: ''; display: block;
  width: 36px; height: 3px; border-radius: 2px;
  background: var(--txt2); opacity: .5; transition: opacity .15s;
}
#v-resizer:hover::after, #v-resizer.dragging::after { opacity: 1; background: #fff; }
#v-resizer:hover, #v-resizer.dragging { background: var(--acc); }

#h-resizer {
  width: 8px; flex-shrink: 0; cursor: ew-resize;
  background: var(--bdr); position: relative; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
#h-resizer::after {
  content: ''; display: block;
  width: 3px; height: 36px; border-radius: 2px;
  background: var(--txt2); opacity: .5; transition: opacity .15s;
}
#h-resizer:hover::after, #h-resizer.dragging::after { opacity: 1; background: #fff; }
#h-resizer:hover, #h-resizer.dragging { background: var(--acc); }

#sub-charts-area { display: flex; flex-direction: column; flex-shrink: 0; }
.sub-item { display: flex; flex-direction: column; flex-shrink: 0; }
.sub-wrap { height: 130px; position: relative; flex-shrink: 0; overflow: hidden; }
.sub-wrap > div:first-child { position: absolute; inset: 0; overflow: hidden; }
.sub-label { position: absolute; top: 4px; left: 8px; z-index: 10; font-size: 11px; color: var(--txt2); pointer-events: none; }
.v-resizer-sub {
  height: 8px; flex-shrink: 0; cursor: ns-resize;
  background: var(--bdr); position: relative; z-index: 10;
  display: flex; align-items: center; justify-content: center; transition: background .15s;
}
.v-resizer-sub::after {
  content: ''; display: block; width: 36px; height: 3px; border-radius: 2px;
  background: var(--txt2); opacity: .5; transition: opacity .15s;
}
.v-resizer-sub:hover::after, .v-resizer-sub.dragging::after { opacity: 1; background: #fff; }
.v-resizer-sub:hover, .v-resizer-sub.dragging { background: var(--acc); }

/* ── SIDEBAR ── */
#sidebar {
  width: 300px; background: var(--bg2); border-left: 1px solid var(--bdr);
  display: flex; flex-direction: column; flex-shrink: 0;
}
#sb-header {
  display: flex; align-items: center; padding: 8px 10px; gap: 6px;
  border-bottom: 1px solid var(--bdr); flex-shrink: 0;
}
#sb-title { font-size: 12px; font-weight: 600; color: var(--txt); flex: 1; }
#fav-count { font-size: 11px; color: var(--txt2); }

#wl-cols {
  display: flex; padding: 4px 8px;
  font-size: 11px; color: var(--txt2); border-bottom: 1px solid var(--bdr); flex-shrink: 0;
}
.wc-star  { width: 19px; flex-shrink: 0; }
.wc-sym   { flex: 1; }
.wc-price { width: 84px; text-align: right; cursor: pointer; user-select: none; }
.wc-chg   { width: 72px; text-align: right; cursor: pointer; user-select: none; }
.wc-price:hover, .wc-chg:hover { color: var(--txt); }
.wc-active { color: var(--txt); }

#watchlist { flex: 1; overflow-y: auto; min-height: 0; }
#watchlist::-webkit-scrollbar { width: 4px; }
#watchlist::-webkit-scrollbar-track { background: var(--bg2); }
#watchlist::-webkit-scrollbar-thumb { background: var(--bg3); border-radius: 2px; }
#wl-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; height: 200px; color: var(--txt2); font-size: 13px; text-align: center;
}
#wl-empty button {
  background: var(--acc); border: none; color: #fff;
  padding: 6px 16px; border-radius: 4px; cursor: pointer; font-size: 12px;
}
.wi {
  display: flex; align-items: center; padding: 6px 8px;
  cursor: pointer; border-bottom: 1px solid #1a1e2d; transition: background .1s;
}
.wi:hover  { background: var(--bg3); }
.wi.active { background: #1f2a3d; border-left: 2px solid var(--acc); padding-left: 6px; }
.wi-sym {
  flex: 1; min-width: 0; font-size: 12px; font-weight: 600; color: var(--txt);
  display: flex; align-items: center; gap: 4px; overflow: hidden;
}
.wi-star  { background: none; border: none; cursor: pointer; padding: 0; margin-right: 4px; color: var(--star); font-size: 11px; line-height: 1; flex-shrink: 0; opacity: 0.75; transition: opacity .15s, color .15s; }
.wi-star:hover { opacity: 1; color: #e74c3c; }
.wi-base  { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wi-usdt  { font-size: 10px; color: var(--txt2); font-weight: 400; }
.wi-kr    { display: block; font-size: 10px; color: var(--txt2); font-weight: 400; margin-top: 1px; }
.mi-kr    { display: block; font-size: 10px; color: var(--txt2); margin-top: 1px; }
.wi-price { width: 84px; text-align: right; font-size: 11px; color: var(--txt); font-variant-numeric: tabular-nums; }
.wi-chg   { width: 72px; text-align: right; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.c-up { color: var(--up); }
.c-dn { color: var(--dn); }

/* ── MODAL ── */
#modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.65); z-index: 1000;
  align-items: center; justify-content: center;
}
#modal-overlay.open { display: flex; }
#modal {
  background: var(--bg2); border: 1px solid var(--bdr); border-radius: 8px;
  width: 560px; max-height: 82vh; display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
#modal-head {
  display: flex; align-items: center; padding: 14px 18px;
  border-bottom: 1px solid var(--bdr); gap: 10px; flex-shrink: 0;
}
#modal-head h2 { font-size: 14px; font-weight: 700; flex: 1; }
#modal-close {
  background: transparent; border: none; color: var(--txt2);
  font-size: 20px; cursor: pointer; line-height: 1; padding: 2px 6px; border-radius: 4px;
}
#modal-close:hover { background: var(--bg3); color: var(--txt); }
#modal-controls {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-bottom: 1px solid var(--bdr); flex-shrink: 0;
}
#modal-search {
  flex: 1; background: var(--bg3); border: 1px solid var(--bdr); border-radius: 4px;
  color: var(--txt); padding: 6px 10px; font-size: 12px; outline: none;
}
#modal-search:focus { border-color: var(--acc); }
#modal-search::placeholder { color: var(--txt2); }
.modal-filter-btn {
  background: var(--bg3); border: 1px solid var(--bdr); color: var(--txt2);
  padding: 5px 12px; border-radius: 4px; cursor: pointer; font-size: 11px; transition: all .15s;
}
.modal-filter-btn.active { background: var(--acc); border-color: var(--acc); color: #fff; }
#modal-list-head {
  display: flex; padding: 5px 16px; font-size: 11px; color: var(--txt2);
  border-bottom: 1px solid var(--bdr); flex-shrink: 0;
}
.mh-sym   { flex: 1; }
.mh-price { width: 90px; text-align: right; }
.mh-chg   { width: 70px; text-align: right; }
.mh-vol   { width: 66px; text-align: right; }
.mh-star  { width: 36px; text-align: center; }
#modal-list { flex: 1; overflow-y: auto; }
#modal-list::-webkit-scrollbar { width: 4px; }
#modal-list::-webkit-scrollbar-track { background: var(--bg2); }
#modal-list::-webkit-scrollbar-thumb { background: var(--bg3); border-radius: 2px; }
#modal-count { padding: 5px 16px; font-size: 11px; color: var(--txt2); border-bottom: 1px solid var(--bdr); }
.mi {
  display: flex; align-items: center; padding: 7px 16px;
  border-bottom: 1px solid #1a1e2d; transition: background .1s;
}
.mi:hover { background: var(--bg3); }
.mi-sym   { flex: 1; font-size: 12px; font-weight: 600; color: var(--txt); }
.mi-usdt  { font-size: 10px; color: var(--txt2); font-weight: 400; margin-left: 2px; }
.mi-price { width: 90px; text-align: right; font-size: 12px; color: var(--txt); font-variant-numeric: tabular-nums; }
.mi-chg   { width: 70px; text-align: right; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mi-vol   { width: 66px; text-align: right; font-size: 11px; color: var(--txt2); }
.mi-star  { width: 36px; text-align: center; }
.star-btn {
  background: transparent; border: none; cursor: pointer;
  font-size: 16px; line-height: 1; padding: 2px 4px; border-radius: 3px;
  transition: transform .15s;
}
.star-btn:hover { transform: scale(1.3); }
.star-btn.on  { color: var(--star); }
.star-btn.off { color: var(--txt2); }
#modal-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; border-top: 1px solid var(--bdr); flex-shrink: 0;
}
#modal-fav-count { font-size: 12px; color: var(--txt2); }
#modal-done {
  background: var(--acc); border: none; color: #fff;
  padding: 7px 22px; border-radius: 4px; cursor: pointer; font-size: 13px; font-weight: 600;
}
#modal-done:hover { opacity: .85; }
#toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  background: #ef5350; color: #fff; padding: 9px 20px; border-radius: 6px;
  font-size: 13px; font-weight: 600; z-index: 2000; pointer-events: none;
  opacity: 0; transition: opacity .25s;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
}
#toast.show { opacity: 1; }
.star-btn.limit { color: #3a3f50; cursor: not-allowed; }
.star-btn.limit:hover { transform: none; }
#fav-bar-wrap { display: flex; align-items: center; gap: 8px; }
#fav-bar { flex: 1; height: 4px; background: var(--bg3); border-radius: 2px; overflow: hidden; }
#fav-bar-fill { height: 100%; background: var(--acc); border-radius: 2px; transition: width .3s; }
#fav-bar-wrap.full #fav-bar-fill { background: var(--dn); }

/* ── CHART TF GROUP ── */
#chart-tf-grp {
  display: flex; flex-shrink: 0; flex-wrap: wrap; gap: 1px;
  padding: 3px 6px; background: var(--bg2);
  border-bottom: 1px solid var(--bdr); overflow-x: auto;
}
#chart-tf-grp .tf-btn { font-size: 11px; padding: 3px 7px; }
#hist-loading {
  position: absolute; top: 36px; right: 8px; z-index: 20;
  background: rgba(19,23,34,.85); color: var(--txt2);
  padding: 4px 10px; border-radius: 4px; font-size: 11px;
  display: none; align-items: center; gap: 6px;
}
#hist-loading.show { display: flex; }
.mini-spin {
  width: 10px; height: 10px; border: 2px solid var(--bg3);
  border-top-color: var(--acc); border-radius: 50%;
  animation: spin .6s linear infinite;
}
#no-more-data {
  position: absolute; top: 36px; right: 8px; z-index: 20;
  background: rgba(19,23,34,.85); color: var(--txt2);
  padding: 4px 10px; border-radius: 4px; font-size: 11px;
  display: none;
}
#no-more-data.show { display: block; }

/* ── CHART SETTINGS MODAL ── */
#cs-modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.65); z-index: 1000;
  align-items: center; justify-content: center;
}
#cs-modal-overlay.open { display: flex; }
#cs-modal {
  background: var(--bg2); border: 1px solid var(--bdr); border-radius: 8px;
  width: 440px; max-height: 82vh; display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
#cs-modal-head {
  display: flex; align-items: center; padding: 14px 18px;
  border-bottom: 1px solid var(--bdr); gap: 10px; flex-shrink: 0;
}
#cs-modal-head h2 { font-size: 14px; font-weight: 700; flex: 1; }
#cs-modal-close {
  background: transparent; border: none; color: var(--txt2);
  font-size: 20px; cursor: pointer; line-height: 1; padding: 2px 6px; border-radius: 4px;
}
#cs-modal-close:hover { background: var(--bg3); color: var(--txt); }
#cs-body { padding: 12px 16px 16px; overflow-y: auto; }
#cs-modal-footer {
  display: flex; align-items: center; justify-content: flex-end;
  padding: 10px 16px; border-top: 1px solid var(--bdr); flex-shrink: 0;
}
#cs-modal-done {
  background: var(--acc); border: none; color: #fff;
  padding: 7px 22px; border-radius: 4px; cursor: pointer; font-size: 13px; font-weight: 600;
}
#cs-modal-done:hover { opacity: .85; }
.cs-section { margin-bottom: 8px; }
.cs-section:last-child { margin-bottom: 0; }
.cs-section-title { font-size: 10px; color: var(--txt2); margin-bottom: 5px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.cs-items { display: flex; flex-wrap: wrap; gap: 3px 6px; }
.cs-item {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--txt); cursor: pointer;
  padding: 3px 7px; border-radius: 3px; transition: background .1s;
  border: 1px solid transparent;
}
.cs-item:hover { background: var(--bg3); }
.cs-item input[type="checkbox"]:checked + .cs-dot ~ span,
.cs-item input[type="checkbox"]:checked ~ span { color: var(--txt); }
.cs-item input { cursor: pointer; accent-color: var(--acc); margin: 0; }
.cs-dot { width: 12px; height: 3px; border-radius: 1px; display: inline-block; flex-shrink: 0; }
.cs-item.lower-item { border: 1px solid var(--bdr); background: var(--bg3); }
.cs-item.lower-item input:checked { accent-color: var(--acc); }
input[type="radio"] { accent-color: var(--acc); cursor: pointer; margin: 0; }
.cs-group-row { display: flex; align-items: center; gap: 2px; }
.cs-group-hd { flex: 1; }
.cs-detail-btn {
  background: transparent; border: 1px solid var(--bdr); color: var(--txt2);
  width: 22px; height: 22px; border-radius: 3px; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 12px; transition: all .15s;
}
.cs-detail-btn:hover, .cs-detail-btn.active { background: var(--acc); border-color: var(--acc); color: #fff; }
.cs-detail-panel {
  margin-top: 5px; padding: 7px 8px; background: #0e1118; border-radius: 4px;
  border: 1px solid var(--bdr); display: none; flex-direction: column; gap: 3px;
}
.cs-detail-panel.open { display: flex; }
.cs-ma-line { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.cs-ma-line input[type="checkbox"] { flex-shrink: 0; }
.cs-ma-line input[type="color"] {
  width: 22px; height: 18px; border: 1px solid var(--bdr); border-radius: 3px;
  padding: 1px; cursor: pointer; background: var(--bg3); flex-shrink: 0;
}
.cs-ma-line input[type="number"] {
  width: 46px; background: var(--bg2); border: 1px solid var(--bdr); color: var(--txt);
  border-radius: 3px; padding: 2px 4px; font-size: 11px; text-align: center;
}
.cs-ma-line input[type="number"]:focus { outline: none; border-color: var(--acc); }
.cs-ma-label { font-size: 11px; color: var(--txt2); width: 16px; text-align: right; }
.cs-ma-line.off .cs-ma-label,
.cs-ma-line.off input[type="number"] { opacity: .4; }
.cs-detail-header {
  display: flex; gap: 6px; padding: 0 0 4px; border-bottom: 1px solid var(--bdr);
  font-size: 10px; color: var(--txt2); margin-bottom: 2px;
}
.cs-dh-on  { width: 14px; }
.cs-dh-col { width: 22px; text-align: center; }
.cs-dh-lbl { width: 16px; }
.cs-dh-per { flex: 1; }
.cs-dh-wid { width: 30px; text-align: right; }
.cs-ma-line .ma-width { width: 30px; }

/* ── TRADE PANEL ── */
#trade-panel {
  flex-shrink: 0; border-top: 1px solid var(--bdr); background: var(--bg2);
}
.tp-chevron { font-size: 10px; color: var(--txt2); transition: transform .2s; }
.tp-chevron.open { transform: rotate(90deg); }
.tp-body {
  display: none; flex-direction: column; gap: 8px;
  padding: 10px 12px 14px; max-height: 600px; overflow-y: auto;
}
.tp-body.open { display: flex; }
.tp-body::-webkit-scrollbar { width: 4px; }
.tp-body::-webkit-scrollbar-track { background: var(--bg2); }
.tp-body::-webkit-scrollbar-thumb { background: var(--bg3); border-radius: 2px; }
.tp-side-row { display: flex; gap: 0; border-radius: 4px; overflow: hidden; border: 1px solid var(--bdr); }
.tp-side-btn {
  flex: 1; padding: 9px 0; font-size: 14px; font-weight: 700; border: none;
  cursor: pointer; background: var(--bg3); color: var(--txt2); transition: all .15s;
}
.tp-side-btn.tp-buy.active  { background: #26a69a; color: #fff; }
.tp-side-btn.tp-sell.active { background: #ef5350; color: #fff; }
.tp-side-btn:not(.active):hover { background: var(--bg); color: var(--txt); }
.tp-type-row { display: flex; gap: 5px; }
.tp-type-btn {
  flex: 1; padding: 6px 0; font-size: 12px; border: 1px solid var(--bdr);
  background: var(--bg3); color: var(--txt2); border-radius: 3px; cursor: pointer;
}
.tp-type-btn.active { border-color: var(--acc); color: var(--acc); }
.tp-row { display: flex; align-items: center; gap: 8px; }
.tp-row label { font-size: 12px; color: var(--txt2); width: 46px; flex-shrink: 0; }
.tp-input-wrap {
  flex: 1; display: flex; align-items: center;
  background: var(--bg3); border: 1px solid var(--bdr); border-radius: 3px; overflow: hidden;
}
.tp-input-wrap input {
  flex: 1; background: transparent; border: none; color: var(--txt);
  font-size: 13px; padding: 6px 8px; outline: none; min-width: 0;
}
.tp-input-wrap:focus-within { border-color: var(--acc); }
.tp-input-wrap span {
  font-size: 11px; color: var(--txt2); padding: 0 8px 0 2px; white-space: nowrap;
}
.tp-pct-row { display: flex; gap: 4px; }
.tp-pct-btn {
  flex: 1; padding: 5px 0; font-size: 11px; border: 1px solid var(--bdr);
  background: var(--bg3); color: var(--txt2); border-radius: 3px; cursor: pointer;
}
.tp-pct-btn:hover { border-color: var(--acc); color: var(--acc); }
.tp-tpsl-toggle {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; color: var(--txt2); cursor: pointer; padding: 2px 0;
}
.tp-tpsl-toggle:hover { color: var(--txt); }
.tp-tpsl-body { display: none; flex-direction: column; gap: 7px; }
.tp-tpsl-body.open { display: flex; }
.tp-balance-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--txt2); padding: 3px 0;
}
#tp-balance { flex: 1; text-align: right; color: var(--txt); font-weight: 600; font-size: 13px; }
.tp-refresh-btn {
  background: none; border: none; color: var(--txt2); cursor: pointer;
  font-size: 15px; padding: 0 2px; line-height: 1;
}
.tp-refresh-btn:hover { color: var(--acc); }
.tp-order-btn {
  padding: 11px 0; font-size: 14px; font-weight: 700; border: none;
  border-radius: 4px; cursor: pointer; color: #fff; transition: opacity .15s;
}
.tp-order-btn:hover { opacity: .85; }
.tp-order-btn:disabled { opacity: .4; cursor: not-allowed; }
.tp-order-btn.tp-buy-color  { background: #26a69a; }
.tp-order-btn.tp-sell-color { background: #ef5350; }
.tp-status {
  font-size: 11px; text-align: center; padding: 2px 0; min-height: 16px;
  border-radius: 3px;
}
.tp-status.ok   { color: #26a69a; }
.tp-status.err  { color: #ef5350; }
.tp-status.info { color: var(--txt2); }
.tp-ob-btn {
  padding: 7px 0; font-size: 13px; font-weight: 600; border: 1px solid var(--bdr);
  background: var(--bg3); color: var(--txt2); border-radius: 4px; cursor: pointer; width: 100%;
}
.tp-ob-btn:hover { border-color: var(--acc); color: var(--acc); }
.tp-ob-btn.active { border-color: var(--acc); color: var(--acc); background: var(--bg); }

/* 호가창 */
#ob-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
#ob-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 8px; border-bottom: 1px solid var(--bdr); flex-shrink: 0;
  background: var(--bg2);
}
#ob-title { font-size: 12px; font-weight: 700; color: var(--txt); }
#ob-close { background: none; border: none; color: var(--txt2); font-size: 16px; cursor: pointer; line-height: 1; padding: 0 2px; }
#ob-close:hover { color: var(--txt); }
#ob-depth-bar {
  display: flex; align-items: center; gap: 3px; padding: 4px 8px;
  border-bottom: 1px solid var(--bdr); flex-shrink: 0; background: var(--bg2);
}
#ob-depth-label { font-size: 10px; color: var(--txt2); margin-right: 2px; white-space: nowrap; }
.ob-depth-btn {
  background: transparent; border: 1px solid transparent; color: var(--txt2);
  padding: 2px 6px; border-radius: 3px; font-size: 10px; cursor: pointer; transition: all .15s;
}
.ob-depth-btn:hover { color: var(--txt); background: var(--bg3); }
.ob-depth-btn.active { border-color: var(--acc); color: var(--acc); background: var(--bg3); font-weight: 600; }
#ob-col-hd {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  padding: 3px 8px; font-size: 10px; color: var(--txt2);
  border-bottom: 1px solid var(--bdr); flex-shrink: 0;
}
#ob-col-hd span:nth-child(2), #ob-col-hd span:nth-child(3) { text-align: right; }
#ob-asks-wrap { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
#ob-bids-wrap { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; }
.ob-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  padding: 2px 8px; font-size: 11px; font-family: monospace; position: relative;
  cursor: pointer; line-height: 1.6;
}
.ob-row:hover { background: rgba(255,255,255,.05); }
.ob-bar { position: absolute; top: 0; bottom: 0; right: 0; opacity: .13; pointer-events: none; }
.ob-ask .ob-bar { background: #ef5350; }
.ob-bid .ob-bar { background: #26a69a; }
.ob-ask .ob-price { color: #ef5350; font-weight: 600; }
.ob-bid .ob-price { color: #26a69a; font-weight: 600; }
.ob-qty, .ob-cum { text-align: right; color: var(--txt); }
#ob-mid {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px; flex-shrink: 0;
  border-top: 1px solid var(--bdr); border-bottom: 1px solid var(--bdr);
  background: rgba(255,255,255,.02);
}
#ob-mid-arrow { font-size: 12px; line-height: 1; }
#ob-mid-price { font-size: 16px; font-weight: 700; font-family: monospace; letter-spacing: .3px; }
#ob-mid-price.up { color: #26a69a; }
#ob-mid-price.down { color: #ef5350; }
#ob-mid-price.flat { color: var(--txt); }
.ob-mid-info { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex: 1; }
.ob-mid-mark, .ob-mid-spd { font-size: 10px; color: var(--txt2); }
.ob-mid-mark span, .ob-mid-spd span { color: var(--txt); }

/* Loading */
#loading {
  position: absolute; inset: 0; background: var(--bg);
  display: flex; align-items: center; justify-content: center; z-index: 200;
}
.ld-inner { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--txt2); font-size: 13px; }
.spinner { width: 34px; height: 34px; border: 3px solid var(--bg3); border-top-color: var(--acc); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── LinReg toggle ── */
#lr-toggle-btn.lr-active { color: #f7c948; font-weight: 700; background: var(--bg3); }
#lr-settings-btn { font-size: 13px; }

/* ── LinReg Settings Modal ── */
#lr-modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.65); z-index: 1000;
  align-items: center; justify-content: center;
}
#lr-modal-overlay.open { display: flex; }
#lr-modal {
  background: var(--bg2); border: 1px solid var(--bdr); border-radius: 8px;
  width: 340px; display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
#lr-modal-head {
  display: flex; align-items: center; padding: 14px 18px;
  border-bottom: 1px solid var(--bdr); gap: 10px; flex-shrink: 0;
}
#lr-modal-head h2 { font-size: 14px; font-weight: 700; flex: 1; color: var(--txt); }
#lr-modal-close {
  background: transparent; border: none; color: var(--txt2);
  font-size: 20px; cursor: pointer; line-height: 1; padding: 2px 6px; border-radius: 4px;
}
#lr-modal-close:hover { background: var(--bg3); color: var(--txt); }
#lr-tab-bar {
  display: flex; border-bottom: 1px solid var(--bdr);
  padding: 0 12px; flex-shrink: 0;
}
.lr-tab {
  background: transparent; border: none; color: var(--txt2);
  padding: 10px 12px; font-size: 13px; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .15s;
}
.lr-tab:hover { color: var(--txt); }
.lr-tab.active { color: var(--txt); border-bottom-color: var(--acc); font-weight: 600; }
.lr-tab-content { padding: 14px 16px; display: none; flex-direction: column; gap: 10px; overflow-y: auto; max-height: 400px; }
.lr-tab-content.active { display: flex; }
.lr-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; color: var(--txt);
}
.lr-row label { display: flex; align-items: center; gap: 7px; cursor: pointer; font-size: 13px; color: var(--txt); }
.lr-row input[type="checkbox"] { accent-color: var(--acc); cursor: pointer; width: 14px; height: 14px; }
.lr-num-inp {
  width: 66px; background: var(--bg3); border: 1px solid var(--bdr); color: var(--txt);
  border-radius: 4px; padding: 4px 8px; font-size: 13px; text-align: right; outline: none;
}
.lr-num-inp:focus { border-color: var(--acc); }
.lr-section { display: flex; flex-direction: column; gap: 8px; }
.lr-section-head { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--txt); font-weight: 600; }
.lr-section-head input[type="checkbox"] { accent-color: var(--acc); cursor: pointer; width: 14px; height: 14px; }
.lr-color-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 0 2px 20px; font-size: 13px; color: var(--txt2);
}
.lr-color-input {
  width: 32px; height: 24px; border: 1px solid var(--bdr); border-radius: 4px;
  padding: 2px; cursor: pointer; background: var(--bg3);
}
.lr-divider { height: 1px; background: var(--bdr); margin: 4px 0; }
.lr-vis-group { display: flex; flex-direction: column; gap: 4px; }
.lr-vis-label { font-size: 10px; color: var(--txt3); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 2px; }
.lr-sel {
  background: var(--bg3); border: 1px solid var(--bdr); color: var(--txt);
  border-radius: 4px; padding: 4px 8px; font-size: 12px; outline: none; cursor: pointer;
}
#lr-modal-footer {
  display: flex; justify-content: flex-end;
  padding: 10px 16px; border-top: 1px solid var(--bdr); flex-shrink: 0;
}
#lr-modal-done {
  background: var(--acc); border: none; color: #fff;
  padding: 7px 22px; border-radius: 4px; cursor: pointer; font-size: 13px; font-weight: 600;
}
#lr-modal-done:hover { opacity: .85; }
.cs-num-inp {
  width: 46px; background: var(--bg2); border: 1px solid var(--bdr); color: var(--txt);
  border-radius: 3px; padding: 2px 4px; font-size: 11px; text-align: center; outline: none;
}
.cs-num-inp:focus { border-color: var(--acc); }
select.cs-num-inp { width: 58px; cursor: pointer; }

/* ── Bot Settings Modal ── */
#bot-modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.65); z-index: 1000;
  align-items: center; justify-content: center;
}
#bot-modal-overlay.open { display: flex; }
#bot-modal {
  background: var(--bg2); border: 1px solid var(--bdr); border-radius: 8px;
  width: 420px; max-height: 92vh; display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
#bot-modal-head {
  display: flex; align-items: center; padding: 12px 16px;
  border-bottom: 1px solid var(--bdr);
}
#bot-modal-head h2 { font-size: 14px; font-weight: 700; flex: 1; color: var(--txt); }
#bot-modal-close {
  background: transparent; border: none; color: var(--txt2);
  font-size: 20px; cursor: pointer; line-height: 1; padding: 2px 6px; border-radius: 4px;
}
#bot-modal-close:hover { background: var(--bg3); color: var(--txt); }
#bot-modal-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; flex: 1; min-height: 0; }
.bot-dir-group { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.bot-dir-btn {
  display: flex; align-items: center; justify-content: center;
  gap: 5px; padding: 6px 0; border-radius: 4px; cursor: pointer;
  border: 1px solid var(--bdr); background: var(--bg); font-size: 12px; color: var(--txt2);
  transition: all .15s;
}
.bot-dir-btn input[type=radio] { display: none; }
.bot-dir-btn:has(input:checked) { border-color: var(--acc); color: var(--txt); background: var(--bg3); font-weight: 600; }
.bot-dir-btn:hover { border-color: var(--txt2); color: var(--txt); }
#bot-modal-ctrl {
  display: flex; align-items: center; justify-content: space-between; margin-top: 2px;
}
#bot-modal-ctrl .bot-info { font-size: 11px; color: var(--txt2); line-height: 1.6; }
#bot-modal-ctrl .bot-info b { color: var(--txt); }
.bot-section { margin-bottom: 10px; }
.bot-section-label {
  font-size: 10px; color: var(--txt2); text-transform: uppercase;
  letter-spacing: .5px; margin-bottom: 6px; font-weight: 600;
}
.bot-field { display: flex; flex-direction: column; gap: 3px; margin-bottom: 6px; }
.bot-field label { font-size: 11px; color: var(--txt2); }
.bot-field input, .bot-field select {
  width: 100%; background: var(--bg); border: 1px solid var(--bdr); color: var(--txt);
  border-radius: 4px; padding: 5px 8px; font-size: 12px; outline: none;
}
.bot-field input:focus, .bot-field select:focus { border-color: var(--acc); }
.bot-field-select {
  width: 100%; background: var(--bg); border: 1px solid var(--bdr); color: var(--txt);
  border-radius: 4px; padding: 6px 8px; font-size: 12px; outline: none;
}
.bot-field-select:focus { border-color: var(--acc); }
.bot-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#bot-status-pill {
  font-size: 11px; padding: 2px 8px; border-radius: 10px;
  background: var(--bg); color: var(--txt2); border: 1px solid var(--bdr);
}
.bot-tf-group { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.bot-tf-btn {
  display: flex; align-items: center; justify-content: center;
  padding: 5px 0; border-radius: 4px; cursor: pointer;
  border: 1px solid var(--bdr); background: var(--bg); font-size: 11px; color: var(--txt2);
  transition: all .15s;
}
.bot-tf-btn input[type=radio] { display: none; }
.bot-tf-btn:has(input:checked) { border-color: var(--acc); color: var(--txt); background: var(--bg3); font-weight: 600; }
.bot-tf-btn:hover { border-color: var(--txt2); color: var(--txt); }
.bot-btn-row { display: flex; gap: 8px; }
.bot-btn-row button {
  flex: 1; padding: 9px 0; font-size: 13px; font-weight: 700; border: none;
  border-radius: 4px; cursor: pointer; color: #fff; transition: opacity .15s;
}
.bot-btn-row button:hover:not(:disabled) { opacity: .85; }
.bot-btn-row button:disabled { opacity: .35; cursor: not-allowed; }
#bot-start-btn { background: #26a69a; }
#bot-stop-btn  { background: #ef5350; }
@keyframes joybot-pulse {
  0%, 100% { color: var(--txt2); text-shadow: none; }
  50% { color: #39ff14; text-shadow: 0 0 6px #39ff14, 0 0 12px #39ff1480; }
}
#bot-open-btn.running {
  animation: joybot-pulse 1.4s ease-in-out infinite;
}
.bot-trade-mode-group { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bot-trade-mode-btn {
  display: flex; align-items: center; justify-content: center;
  gap: 5px; padding: 7px 0; border-radius: 4px; cursor: pointer;
  border: 1px solid var(--bdr); background: var(--bg); font-size: 12px; color: var(--txt2);
  font-weight: 600; transition: all .15s;
}
.bot-trade-mode-btn input[type=radio] { display: none; }
.bot-trade-mode-btn.paper:has(input:checked) {
  border-color: #26a69a; color: #26a69a; background: rgba(38,166,154,.12);
}
.bot-trade-mode-btn.live:has(input:checked) {
  border-color: #ef5350; color: #ef5350; background: rgba(239,83,80,.12);
}
.bot-trade-mode-btn:hover { border-color: var(--txt2); color: var(--txt); }
#bot-live-warning {
  display: none; margin-top: 5px; padding: 6px 8px; border-radius: 4px;
  background: rgba(239,83,80,.1); border: 1px solid rgba(239,83,80,.3);
  color: #ef5350; font-size: 11px; line-height: 1.5;
}
#bot-live-warning.show { display: block; }
#bot-paper-badge {
  display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 6px;
  border-radius: 8px; background: rgba(38,166,154,.2); color: #26a69a;
  border: 1px solid rgba(38,166,154,.4); margin-left: 6px; vertical-align: middle;
}
#bot-paper-badge.live {
  background: rgba(239,83,80,.2); color: #ef5350; border-color: rgba(239,83,80,.4);
}
#bot-server-status {
  font-size: 10px; padding: 2px 6px; border-radius: 8px;
  background: rgba(239,83,80,.15); color: #ef5350; border: 1px solid rgba(239,83,80,.3);
}
#bot-server-status.ok {
  background: rgba(38,166,154,.15); color: #26a69a; border-color: rgba(38,166,154,.3);
}
#bot-log {
  margin-top: 6px; background: var(--bg); border: 1px solid var(--bdr);
  border-radius: 4px; padding: 6px 8px; font-size: 11px; color: var(--txt2);
  height: 90px; overflow-y: auto; white-space: pre-wrap; font-family: monospace;
  line-height: 1.5;
}

/* ── 거래내역 모달 ── */
#trade-modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.65); z-index: 1000;
  align-items: center; justify-content: center;
}
#trade-modal-overlay.open { display: flex; }
#trade-modal {
  background: var(--bg2); border: 1px solid var(--bdr); border-radius: 8px;
  width: min(760px, 96vw); max-height: 80vh; display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
#trade-modal-head {
  display: flex; align-items: center; padding: 12px 16px;
  border-bottom: 1px solid var(--bdr); flex-shrink: 0;
}
#trade-modal-head h2 { font-size: 14px; font-weight: 700; flex: 1; color: var(--txt); }
#trade-modal-close {
  background: transparent; border: none; color: var(--txt2);
  font-size: 20px; cursor: pointer; line-height: 1; padding: 2px 6px; border-radius: 4px;
}
#trade-modal-close:hover { background: var(--bg3); color: var(--txt); }
#trade-clear-btn {
  background: transparent; border: 1px solid var(--bdr); color: var(--txt2);
  font-size: 11px; padding: 3px 8px; border-radius: 4px; cursor: pointer; margin-right: 8px;
}
#trade-clear-btn:hover { border-color: var(--dn); color: var(--dn); }
#trade-modal-summary {
  display: flex; gap: 20px; padding: 10px 16px;
  border-bottom: 1px solid var(--bdr); flex-shrink: 0; flex-wrap: wrap;
}
.trade-sum-item { display: flex; flex-direction: column; gap: 2px; }
.trade-sum-label { font-size: 10px; color: var(--txt2); text-transform: uppercase; letter-spacing: .4px; }
.trade-sum-val   { font-size: 13px; font-weight: 700; color: var(--txt); }
.trade-sum-val.up { color: var(--up); }
.trade-sum-val.dn { color: var(--dn); }
#trade-modal-body { overflow-y: auto; flex: 1; }
#trade-table { width: 100%; border-collapse: collapse; font-size: 11px; }
#trade-table thead th {
  position: sticky; top: 0; background: var(--bg2);
  padding: 8px 10px; text-align: right; color: var(--txt2);
  font-weight: 600; border-bottom: 1px solid var(--bdr); white-space: nowrap;
}
#trade-table thead th:first-child,
#trade-table thead th:nth-child(2),
#trade-table thead th:nth-child(3) { text-align: left; }
#trade-table tbody tr { border-bottom: 1px solid rgba(255,255,255,.04); }
#trade-table tbody tr:hover { background: var(--bg3); }
#trade-table tbody td { padding: 7px 10px; color: var(--txt); text-align: right; white-space: nowrap; }
#trade-table tbody td:first-child,
#trade-table tbody td:nth-child(2),
#trade-table tbody td:nth-child(3) { text-align: left; }
.td-long  { color: #26a69a; font-weight: 700; }
.td-short { color: #ef5350; font-weight: 700; }
.td-up    { color: var(--up); }
.td-dn    { color: var(--dn); }
.td-mode  { font-size: 10px; padding: 1px 5px; border-radius: 8px; margin-left: 4px; vertical-align: middle; }
.td-mode.paper { background: rgba(38,166,154,.2); color: #26a69a; }
.td-mode.live  { background: rgba(239,83,80,.2);  color: #ef5350; }
#trade-empty {
  padding: 40px; text-align: center; color: var(--txt2); font-size: 12px;
}

/* ── 거래소 설정 모달 ── */
#exchange-modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.65); z-index: 1000;
  align-items: center; justify-content: center;
}
#exchange-modal-overlay.open { display: flex; }
#exchange-modal {
  background: var(--bg2); border: 1px solid var(--bdr); border-radius: 8px;
  width: 380px; display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
#exchange-modal-head {
  display: flex; align-items: center; padding: 12px 16px;
  border-bottom: 1px solid var(--bdr);
}
#exchange-modal-head h2 { font-size: 14px; font-weight: 700; flex: 1; color: var(--txt); }
#exchange-modal-close {
  background: transparent; border: none; color: var(--txt2);
  font-size: 20px; cursor: pointer; line-height: 1; padding: 2px 6px; border-radius: 4px;
}
#exchange-modal-close:hover { background: var(--bg3); color: var(--txt); }
#exchange-modal-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.exchange-section-label {
  font-size: 10px; color: var(--txt2); text-transform: uppercase;
  letter-spacing: .5px; margin-bottom: 6px; font-weight: 600;
}
.exchange-grp { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 6px; }
.exchange-btn {
  display: flex; align-items: center; justify-content: center;
  padding: 8px 0; border-radius: 4px; cursor: pointer;
  border: 1px solid var(--bdr); background: var(--bg); font-size: 11px; color: var(--txt2);
  transition: all .15s;
}
.exchange-btn input[type=radio] { display: none; }
.exchange-btn:has(input:checked) { border-color: var(--acc); color: var(--txt); background: var(--bg3); font-weight: 600; }
.exchange-btn:hover { border-color: var(--txt2); color: var(--txt); }
.exchange-input {
  width: 100%; background: var(--bg); border: 1px solid var(--bdr); color: var(--txt);
  border-radius: 4px; padding: 8px 10px; font-size: 12px; outline: none;
}
.exchange-input:focus { border-color: var(--acc); }
.exchange-input::placeholder { color: var(--txt2); }
#exchange-saved-list { display: flex; flex-direction: column; gap: 4px; }
.exchange-saved-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px; background: var(--bg); border: 1px solid var(--bdr);
  border-radius: 4px; font-size: 11px;
}
.exchange-saved-item .ex-name { color: var(--txt); font-weight: 600; }
.exchange-saved-item .ex-status { color: var(--txt2); font-size: 10px; }
.exchange-saved-item .ex-status.ok { color: var(--up); }
.exchange-saved-item .ex-remove {
  background: none; border: none; color: var(--txt2); cursor: pointer; font-size: 14px;
  padding: 2px 4px; border-radius: 3px;
}
.exchange-saved-item .ex-remove:hover { background: var(--dn); color: #fff; }
.exchange-status { font-size: 11px; text-align: center; min-height: 16px; }
.exchange-status.ok { color: var(--up); }
.exchange-status.err { color: var(--dn); }
#exchange-modal-footer {
  display: flex; justify-content: space-between;
  padding: 10px 16px; border-top: 1px solid var(--bdr);
}
#exchange-modal-footer button {
  padding: 7px 16px; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: 600;
  border: none; transition: opacity .15s;
}
#exchange-save-btn { background: var(--acc); color: #fff; }
#exchange-delete-btn { background: transparent; border: 1px solid var(--bdr) !important; color: var(--txt2); }
#exchange-delete-btn:hover { border-color: var(--dn) !important; color: var(--dn); }
#exchange-modal-footer button:hover { opacity: .85; }
/* #btn-exchange-settings 개별 스타일 제거 — .topbar-btn 공통 클래스로 통일 */

/* API 설정 탭 */
#api-tab-bar {
  display: flex; gap: 6px; padding: 14px 16px 12px;
  background: var(--bg2);
}
.api-tab-btn {
  flex: 1; padding: 9px 6px; font-size: 11.5px; font-weight: 600;
  background: var(--bg3); border: 1px solid var(--bdr); border-radius: 10px;
  color: var(--txt2); cursor: pointer; transition: all .18s;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  letter-spacing: .3px;
}
.api-tab-btn:hover {
  color: #0D9488; background: rgba(13,148,136,.08);
  border-color: #0D9488; transform: translateY(-1px);
}
.api-tab-btn.active {
  color: #fff; background: linear-gradient(135deg, #0D9488, #0F766E);
  border-color: #0D9488;
  box-shadow: 0 3px 12px rgba(13,148,136,.4);
  transform: translateY(-1px);
}
.api-tab-btn .tab-icon { font-size: 14px; }
.api-tab-panel { display: flex; flex-direction: column; gap: 12px; }

/* ── ZLS 설정 모달 ── */
#zls-modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.65); z-index: 1100;
  align-items: center; justify-content: center;
}
#zls-modal-overlay.open { display: flex; }
#zls-modal {
  background: #1a1b22; border: 1px solid var(--bdr); border-radius: 8px;
  width: 380px; max-height: 88vh; display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.8);
}
#zls-modal-head {
  display: flex; align-items: center; padding: 12px 16px;
  border-bottom: 1px solid var(--bdr);
}
#zls-modal-head h3 {
  flex: 1; font-size: 13px; font-weight: 700; color: var(--txt); margin: 0;
}
#zls-modal-head h3 span {
  display: inline-block; background: var(--acc); color: #fff;
  font-size: 10px; padding: 1px 5px; border-radius: 3px; margin: 0 6px; vertical-align: middle;
}
#zls-modal-close {
  background: transparent; border: none; color: var(--txt2);
  font-size: 18px; cursor: pointer; padding: 2px 6px; border-radius: 4px;
}
#zls-modal-close:hover { background: var(--bg3); color: var(--txt); }
.zls-tabs {
  display: flex; border-bottom: 1px solid var(--bdr); padding: 0 16px;
}
.zls-tab {
  padding: 8px 12px; font-size: 12px; color: var(--txt2); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; border-left: none; border-right: none; border-top: none;
}
.zls-tab.active { color: var(--txt); border-bottom-color: var(--acc); font-weight: 600; }
.zls-tab-content { display: none; padding: 14px 16px; overflow-y: auto; flex: 1; }
.zls-tab-content.active { display: block; }
.zls-sec-label {
  font-size: 9px; color: var(--txt2); text-transform: uppercase; letter-spacing: .8px;
  font-weight: 700; margin: 10px 0 6px;
}
.zls-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.zls-row label { font-size: 12px; color: var(--txt); flex: 1; }
.zls-row input[type=number] {
  width: 80px; background: var(--bg); border: 1px solid var(--bdr); color: var(--txt);
  border-radius: 4px; padding: 5px 8px; font-size: 12px; outline: none;
}
.zls-row input[type=number]:focus { border-color: var(--acc); }
.zls-row select {
  background: var(--bg); border: 1px solid var(--bdr); color: var(--txt);
  border-radius: 4px; padding: 5px 8px; font-size: 12px; outline: none; flex: 1;
}
.zls-vis-row {
  display: flex; align-items: center; gap: 8px; padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.zls-vis-row input[type=checkbox] { width: 14px; height: 14px; accent-color: var(--acc); flex-shrink: 0; }
.zls-vis-row .zls-vis-name { flex: 1; font-size: 12px; color: var(--txt); }
.zls-vis-row input[type=color] {
  width: 28px; height: 22px; border: 1px solid var(--bdr); border-radius: 3px;
  padding: 0 2px; background: var(--bg); cursor: pointer; flex-shrink: 0;
}
.zls-vis-marker { font-size: 14px; flex-shrink: 0; width: 20px; text-align: center; }
#zls-modal-footer {
  display: flex; gap: 8px; padding: 10px 16px;
  border-top: 1px solid var(--bdr); justify-content: flex-end;
}
.zls-foot-btn {
  padding: 6px 18px; border-radius: 4px; font-size: 12px; font-weight: 600; cursor: pointer; border: none;
}
#zls-reset-btn { background: var(--bg3); color: var(--txt2); margin-right: auto; }
#zls-cancel-btn { background: var(--bg3); color: var(--txt2); }
#zls-ok-btn { background: var(--acc); color: #fff; }

/* ── GridBot 모달 ── */
#grid-modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.65); z-index: 1000;
  align-items: center; justify-content: center;
}
#grid-modal-overlay.open { display: flex; }
#grid-modal {
  background: var(--bg2); border: 1px solid var(--bdr); border-radius: 10px;
  width: 460px; max-height: 92vh; overflow-y: auto; display: flex; flex-direction: column;
  box-shadow: 0 24px 64px rgba(0,0,0,.7);
}
#grid-modal-head {
  display: flex; align-items: center; padding: 12px 16px;
  border-bottom: 1px solid var(--bdr); position: sticky; top: 0;
  background: var(--bg2); z-index: 1;
}
#grid-modal-head h2 { font-size: 14px; font-weight: 700; flex: 1; color: var(--txt); margin: 0; }
#grid-modal-close {
  background: transparent; border: none; color: var(--txt2);
  font-size: 20px; cursor: pointer; line-height: 1; padding: 2px 6px; border-radius: 4px;
}
#grid-modal-close:hover { background: var(--bg3); color: var(--txt); }
#grid-modal-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 0; }
.grid-type-tabs { display: flex; gap: 0; border: 1px solid var(--bdr); border-radius: 6px; overflow: hidden; margin-bottom: 12px; }
.grid-type-tab {
  flex: 1; padding: 7px 0; text-align: center; font-size: 12px; font-weight: 600;
  color: var(--txt2); cursor: pointer; background: var(--bg); border: none;
  transition: all .15s;
}
.grid-type-tab.active { background: var(--acc); color: #fff; }
.grid-dir-group { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.grid-dir-btn {
  display: flex; align-items: center; justify-content: center;
  padding: 7px 0; border-radius: 5px; cursor: pointer;
  border: 1px solid var(--bdr); background: var(--bg); font-size: 12px;
  color: var(--txt2); font-weight: 600; transition: all .15s;
}
.grid-dir-btn input[type=radio] { display: none; }
.grid-dir-btn.long:has(input:checked)    { border-color: var(--up); color: var(--up); background: rgba(38,166,154,.12); }
.grid-dir-btn.short:has(input:checked)   { border-color: var(--dn); color: var(--dn); background: rgba(239,83,80,.12); }
.grid-dir-btn.neutral:has(input:checked) { border-color: #f9c74f; color: #f9c74f; background: rgba(249,199,79,.10); }
.grid-dir-btn:hover { border-color: var(--txt2); color: var(--txt); }
.grid-row { display: flex; gap: 8px; margin-bottom: 8px; }
.grid-field { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.grid-field label { font-size: 10px; color: var(--txt2); font-weight: 600; }
.grid-field input, .grid-field select {
  width: 100%; background: var(--bg); border: 1px solid var(--bdr); color: var(--txt);
  border-radius: 4px; padding: 6px 8px; font-size: 12px; outline: none; box-sizing: border-box;
}
.grid-field input:focus, .grid-field select:focus { border-color: var(--acc); }
.grid-field .grid-input-wrap { position: relative; }
.grid-field .grid-input-wrap input { padding-right: 40px; }
.grid-field .grid-input-unit {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: 10px; color: var(--txt2); pointer-events: none;
}
.grid-cur-btn {
  background: transparent; border: 1px solid var(--bdr); color: var(--txt2);
  border-radius: 4px; padding: 6px 10px; font-size: 10px; cursor: pointer;
  white-space: nowrap; transition: all .15s; align-self: flex-end;
}
.grid-cur-btn:hover { border-color: var(--acc); color: var(--acc); }
.grid-run-group { display: flex; gap: 6px; }
.grid-run-btn {
  flex: 1; padding: 6px 0; text-align: center; font-size: 11px; font-weight: 600;
  border: 1px solid var(--bdr); border-radius: 4px; cursor: pointer;
  background: var(--bg); color: var(--txt2); transition: all .15s;
}
.grid-run-btn.active { border-color: var(--acc); color: var(--acc); background: rgba(41,98,255,.1); }
.grid-info-box {
  background: var(--bg); border: 1px solid var(--bdr); border-radius: 6px;
  padding: 10px 12px; margin-bottom: 10px; display: grid;
  grid-template-columns: 1fr 1fr; gap: 6px 16px;
}
.grid-info-item { display: flex; justify-content: space-between; align-items: center; }
.grid-info-label { font-size: 10px; color: var(--txt2); }
.grid-info-val { font-size: 11px; font-weight: 600; color: var(--txt); }
.grid-btn-row { display: flex; gap: 8px; margin-bottom: 10px; }
.grid-btn-row button {
  flex: 1; padding: 9px 0; font-size: 13px; font-weight: 700; border: none;
  border-radius: 5px; cursor: pointer; color: #fff; transition: opacity .15s;
}
.grid-btn-row button:hover:not(:disabled) { opacity: .82; }
.grid-btn-row button:disabled { opacity: .3; cursor: not-allowed; }
#grid-start-btn { background: #26a69a; }
#grid-stop-btn  { background: #ef5350; }
#grid-open-btn.running { animation: joybot-pulse 1.4s ease-in-out infinite; }
#grid-log {
  background: var(--bg); border: 1px solid var(--bdr);
  border-radius: 4px; padding: 6px 8px; font-size: 11px; color: var(--txt2);
  height: 80px; overflow-y: auto; white-space: pre-wrap; font-family: monospace;
  line-height: 1.5;
}
#grid-paper-badge {
  display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 6px;
  border-radius: 8px; background: rgba(38,166,154,.2); color: #26a69a;
  border: 1px solid rgba(38,166,154,.4); margin-left: 6px; vertical-align: middle;
}
#grid-paper-badge.live { background: rgba(239,83,80,.2); color: #ef5350; border-color: rgba(239,83,80,.4); }

/* ── 필터 설정 ── */
/* ── 전략 프리셋 ─────────────────────────────────────────── */
.bot-strategy-group { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.bot-strategy-btn {
  display: flex; flex-direction: column; gap: 3px;
  padding: 9px 10px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--bdr); background: var(--bg);
  transition: all .15s;
}
.bot-strategy-btn input[type=radio] { display: none; }
.bot-strategy-btn:has(input:checked) {
  border-color: var(--acc); background: var(--bg3);
}
.bot-strategy-btn:hover { border-color: var(--txt2); }
.bot-strategy-name {
  font-size: 12px; font-weight: 700; color: var(--txt);
}
.bot-strategy-btn:has(input:checked) .bot-strategy-name { color: var(--acc); }
.bot-strategy-desc {
  font-size: 10px; color: var(--txt2); line-height: 1.3;
}
.bot-strategy-tags {
  display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px;
}
.bot-strategy-tags span {
  font-size: 9px; padding: 1px 5px; border-radius: 3px;
  background: var(--bg2); color: var(--txt2); border: 1px solid var(--bdr);
}
.bot-strategy-btn:has(input:checked) .bot-strategy-tags span {
  background: rgba(38,166,154,.12); color: var(--acc); border-color: rgba(38,166,154,.3);
}

.bot-filter-main {
  background: var(--bg); border: 1px solid var(--bdr); border-radius: 6px;
  padding: 8px 10px; margin-bottom: 8px;
}
.bot-filter-main-top {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px;
}
.bot-filter-main-top span:first-child { font-size: 11px; font-weight: 700; color: var(--txt); }
.bot-filter-disp {
  background: var(--bg3); border: 1px solid var(--bdr); color: var(--acc);
  border-radius: 3px; padding: 3px 6px; font-size: 12px; font-weight: 700;
  text-align: center; font-family: monospace; min-width: 36px;
}
.bot-filter-main .bot-filter-fields { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.bot-filter-main .bot-filter-field { display: flex; flex-direction: column; gap: 3px; }
.bot-filter-main .bot-filter-field label { font-size: 9px; color: var(--txt2); }
.bot-filter-row {
  background: var(--bg); border: 1px solid var(--bdr);
  border-radius: 6px; padding: 8px 10px; margin-bottom: 7px;
  display: flex; flex-direction: column; gap: 0;
}
.bot-filter-row.disabled .bot-filter-fields,
.bot-filter-row.disabled .bot-filter-reset { opacity: 0.4; pointer-events: none; }
.bot-filter-row-top { display: flex; align-items: center; gap: 7px; }
.bot-filter-check { width: 14px; height: 14px; accent-color: var(--acc); cursor: pointer; flex-shrink: 0; }
.bot-filter-title { font-size: 11px; font-weight: 700; color: var(--txt); flex: 0 0 46px; }
.bot-filter-fields { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; flex: 1; }
.bot-filter-field { display: flex; flex-direction: column; gap: 2px; }
.bot-filter-field label { font-size: 9px; color: var(--txt2); white-space: nowrap; }
.bot-filter-field select,
.bot-filter-field input[type=number] {
  width: 100%; background: var(--bg2); border: 1px solid var(--bdr); color: var(--txt);
  border-radius: 3px; padding: 3px 5px; font-size: 11px; outline: none; box-sizing: border-box;
}
.bot-filter-field select:focus,
.bot-filter-field input[type=number]:focus { border-color: var(--acc); }
.bot-filter-reset {
  flex-shrink: 0; background: transparent; border: 1px solid var(--bdr);
  color: var(--txt2); border-radius: 3px; padding: 3px 7px;
  font-size: 10px; cursor: pointer; white-space: nowrap;
}
.bot-filter-reset:hover { color: var(--acc); border-color: var(--acc); }
.bot-filter-desc {
  margin-top: 7px; padding: 5px 8px;
  background: rgba(255,255,255,0.025); border-left: 2px solid rgba(100,149,237,.5);
  border-radius: 0 3px 3px 0; font-size: 9px; color: var(--txt2); line-height: 1.8;
}
.bot-filter-desc b { color: #9ab0cc; }

/* ================================================================
   모바일 반응형 (768px 이하)
   ================================================================ */
@media (max-width: 768px) {
  /* 전체 레이아웃 세로 방향으로 변경 */
  #main { flex-direction: column; }

  /* 드래그 리사이저 숨김 */
  #h-resizer { display: none; }

  /* 툴바 숨김 */
  #toolbar { display: none; }

  /* 차트 영역: 남은 공간 채우기 */
  #chart-area { flex: 1; min-height: 0; }

  /* 사이드바: 하단 패널, 내용에 따라 자동 높이 (최대 55vh) */
  #sidebar {
    width: 100%; height: auto; max-height: 55vh;
    border-left: none; border-top: 1px solid var(--bdr);
    flex-shrink: 0; overflow-y: auto;
  }

  /* 즐겨찾기 목록: 3줄 정도로 제한 */
  #watchlist { max-height: 110px; min-height: 0; overflow-y: auto; }

  /* 트레이드 패널: 높이 제한 해제하여 전체 표시 */
  .tp-body { max-height: none; overflow-y: visible; padding-bottom: 16px; }

  /* 탑바 버튼 텍스트 축소 */
  .topbar-btn { font-size: 10px; padding: 4px 6px; }
  #topbar-actions { gap: 4px; }
  #ohlc-info { display: none; }

  /* ── 모달 전체화면 ── */
  #bot-modal {
    width: 100vw; height: 100dvh; border-radius: 0;
    max-height: 100dvh;
  }
  #bot-modal-body {
    overflow-y: auto; flex: 1; min-height: 0; padding-bottom: 24px;
  }

  #trade-modal {
    width: 100vw; height: 100dvh; border-radius: 0;
    max-height: 100dvh;
  }
  #trade-modal-body { overflow-y: auto; flex: 1; min-height: 0; }

  /* 종목설정 모달 */
  #modal {
    width: 100vw; height: 100dvh; border-radius: 0;
    max-height: 100dvh;
  }
  #modal-list { flex: 1; min-height: 0; overflow-y: auto; }

  /* 차트설정 모달 */
  #cs-modal {
    width: 100vw; height: 100dvh; border-radius: 0;
    max-height: 100dvh;
  }
  #cs-body { overflow-y: auto; flex: 1; min-height: 0; }

  /* LinReg 설정 모달 */
  #lr-modal {
    width: 100vw; height: 100dvh; border-radius: 0;
    max-height: 100dvh;
  }
  .lr-tab-content { max-height: none; flex: 1; min-height: 0; overflow-y: auto; }

  /* 거래소 설정 모달 */
  #exchange-modal {
    width: 100vw; height: 100dvh; border-radius: 0;
    max-height: 100dvh;
  }
  #exchange-modal-body { overflow-y: auto; flex: 1; min-height: 0; }
}


/* ── AI 비서 버튼 ── */
#ai-chat-btn { border-color: var(--acc); color: var(--acc); }
#ai-chat-btn:hover { background: rgba(41,98,255,.2); }
#ai-chat-btn.disabled { opacity: .4; pointer-events: none; }

/* ── AI ON/OFF 토글 스위치 ── */
.ai-toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.ai-toggle-switch input { opacity: 0; width: 0; height: 0; }
.ai-toggle-slider {
  position: absolute; inset: 0; background: var(--bdr);
  border-radius: 24px; cursor: pointer; transition: .3s;
}
.ai-toggle-slider::before {
  content: ''; position: absolute; width: 18px; height: 18px;
  left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .3s;
}
.ai-toggle-switch input:checked + .ai-toggle-slider { background: var(--acc); }
.ai-toggle-switch input:checked + .ai-toggle-slider::before { transform: translateX(20px); }

/* ── AI 비서 모달 ── */
#ai-modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.6); z-index: 2000;
  align-items: center; justify-content: center;
}
#ai-modal-overlay.open { display: flex; }
#ai-modal {
  background: var(--bg2); border: 1px solid var(--bdr);
  border-radius: 12px; width: 640px; height: 72vh;
  max-width: 95vw; max-height: 88vh;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 80px rgba(0,0,0,.7);
  animation: aiModalIn .2s ease;
}
@keyframes aiModalIn { from { opacity:0; transform:translateY(-16px) scale(.97); } to { opacity:1; transform:none; } }
#ai-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--bdr);
  font-size: 14px; font-weight: 700; flex-shrink: 0;
}
#ai-model-select {
  background: var(--bg3); border: 1px solid var(--bdr); color: var(--txt);
  border-radius: 5px; padding: 4px 8px; font-size: 11px; cursor: pointer;
}
.ai-head-btn {
  background: var(--bg3); border: 1px solid var(--bdr); color: var(--txt);
  border-radius: 5px; padding: 4px 8px; font-size: 13px; cursor: pointer;
  transition: border-color .2s;
}
.ai-head-btn:hover { border-color: var(--acc); }
#ai-modal-close {
  background: none; border: none; color: var(--txt2);
  font-size: 20px; cursor: pointer; padding: 0 4px; line-height: 1;
}
#ai-modal-close:hover { color: var(--txt); }
#ai-chat-messages {
  flex: 1; overflow-y: auto; padding: 16px; display: flex;
  flex-direction: column; gap: 10px; min-height: 0;
}
.ai-msg {
  max-width: 80%; padding: 10px 14px; border-radius: 12px;
  font-size: 13px; line-height: 1.6; word-break: break-word;
}
.ai-msg.user {
  align-self: flex-end; background: var(--acc); color: #fff;
  border-radius: 12px 12px 2px 12px;
}
.ai-msg.bot {
  align-self: flex-start; background: var(--bg3); color: var(--txt);
  border-radius: 12px 12px 12px 2px; display: flex; flex-direction: column; gap: 4px;
}
.ai-tg-badge {
  font-size: 10px; color: #26a69a; font-weight: 600;
}
.ai-msg.thinking { color: var(--txt2); font-style: italic; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:.4} 50%{opacity:1} }
#ai-quick-btns {
  display: flex; gap: 6px; padding: 8px 14px; flex-wrap: wrap;
  flex-shrink: 0; border-top: 1px solid var(--bdr);
}
#ai-quick-btns button {
  padding: 5px 10px; border-radius: 5px; border: 1px solid var(--bdr);
  background: var(--bg3); color: var(--txt2); font-size: 11px;
  cursor: pointer; transition: all .2s;
}
#ai-quick-btns button:hover { border-color: var(--acc); color: var(--acc); }
#ai-chat-input-row {
  display: flex; gap: 8px; padding: 10px 14px;
  border-top: 1px solid var(--bdr); flex-shrink: 0;
}
#ai-chat-input {
  flex: 1; padding: 9px 12px; border-radius: 7px;
  border: 1px solid var(--bdr); background: var(--bg3);
  color: var(--txt); font-size: 13px; outline: none;
}
#ai-chat-input:focus { border-color: var(--acc); }
#ai-send-btn {
  padding: 9px 18px; border-radius: 7px; border: none;
  background: var(--acc); color: #fff; font-size: 13px;
  font-weight: 700; cursor: pointer; transition: opacity .2s;
}
#ai-send-btn:hover { opacity: .85; }
.ai-masked-notice {
  display: block; font-size: 10px; color: #f9c74f;
  margin-top: 4px; opacity: .8;
}