:root {
  --bg:      #0e1117;
  --panel:   #161a23;
  --panel-2: #1c212c;
  --line:    #242a36;
  --text:    #d6dae3;
  --muted:   #767c8a;
  --up:      #26a37b;
  --down:    #e05252;
  --accent:  #3b7ddd;
  --row-h:   34px;
  --listw:   340px;
  font-size: 15px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button { font: inherit; cursor: pointer; border-radius: 6px; border: 1px solid transparent; }
button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.primary { background: var(--accent); color: #fff; padding: 6px 12px; border: none; }
.primary:hover { background: #4b8bea; }
.ghost { background: transparent; color: var(--muted); padding: 6px 10px; border: 1px solid var(--line); }
.ghost:hover { color: var(--text); border-color: #36404f; }
.icon {
  background: transparent; color: var(--muted); border: none;
  width: 28px; height: 28px; display: grid; place-items: center;
  font-size: 17px; line-height: 1; flex: none;
}
.icon:hover { color: var(--text); background: var(--panel-2); }

.app { display: flex; height: 100%; }

/* ================= chart pane ================= */

.chartpane {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--line);
}

.chart-head {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.chart-head .lg { width: 26px; height: 26px; }
.chart-id { min-width: 0; }
.chart-title { display: flex; align-items: baseline; gap: 7px; }
.chart-title #chSym { font-size: 1rem; font-weight: 600; }
.chart-sub {
  font-size: .76rem; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw;
}
.chart-quote { margin-left: auto; text-align: right; display: flex; align-items: baseline; gap: 9px; }
.q-last { font-size: 1.15rem; font-weight: 600; }
.q-chg { font-size: .84rem; }

.tfbar {
  display: flex; align-items: center; gap: 2px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.tf {
  background: transparent; color: var(--muted); border: none;
  padding: 4px 11px; font-size: .8rem; border-radius: 5px;
}
.tf:hover { background: var(--panel-2); color: var(--text); }
.tf[aria-selected="true"] { background: var(--accent); color: #fff; }

.chart-wrap { flex: 1; position: relative; min-height: 0; }
#chart { position: absolute; inset: 0; }
.chart-msg {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: .85rem; color: var(--muted);
  background: var(--bg); text-align: center; padding: 20px;
}
.chart-msg[hidden] { display: none; }

.ohlcbar {
  height: 26px; display: flex; align-items: center; gap: 14px;
  padding: 0 14px; font-size: .74rem; color: var(--muted);
  border-top: 1px solid var(--line); background: var(--panel);
}
.ohlcbar b { font-weight: 500; color: var(--text); }

/* ================= watchlist pane ================= */

.listpane {
  width: var(--listw); flex: none;
  display: flex; flex-direction: column;
  background: var(--bg);
}

.topbar {
  display: flex; align-items: center; gap: 2px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.spacer { flex: 1; }
#wlSelect {
  background: transparent; color: var(--text); border: none;
  font-size: .92rem; font-weight: 600; padding: 3px 2px; max-width: 150px;
}
#wlSelect option { background: var(--panel); }

.pip { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); display: block; }
.pip.live  { background: var(--up); box-shadow: 0 0 0 3px rgba(38,163,123,.16); }
.pip.stale { background: #c9922f; }
.pip.bad   { background: var(--down); }

.colhead {
  display: grid; grid-template-columns: 1fr 74px 60px 62px; gap: 4px;
  padding: 5px 10px; font-size: .71rem; color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.colhead .r { text-align: right; }

.list { flex: 1; overflow-y: auto; }
.list::-webkit-scrollbar { width: 9px; }
.list::-webkit-scrollbar-thumb { background: #2b323f; border-radius: 5px; }

.section { border-bottom: 1px solid var(--line); }
.sec-head {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; background: var(--panel);
  cursor: pointer; user-select: none;
}
.sec-head .chev { color: var(--muted); font-size: .7rem; transition: transform .14s; }
.section.collapsed .chev { transform: rotate(-90deg); }
.section.collapsed .rows { display: none; }
.sec-name {
  font-size: .76rem; font-weight: 600; color: #9aa2b1;
  background: transparent; border: none; padding: 0; min-width: 2ch;
}
.sec-name:focus { outline: none; color: var(--text); }
.sec-count { font-size: .7rem; color: var(--muted); }
.sec-head .icon { margin-left: auto; opacity: 0; width: 22px; height: 22px; font-size: 15px; }
.sec-head:hover .icon { opacity: 1; }
.section.dragover-sec > .sec-head { background: #1f2735; }

.row {
  display: grid; grid-template-columns: 1fr 74px 60px 62px; gap: 4px;
  align-items: center; height: var(--row-h); padding: 0 10px;
  cursor: pointer; position: relative;
}
.row:hover { background: var(--panel-2); }
.row.active { background: #1f2735; box-shadow: inset 2px 0 0 0 var(--accent); }
.row.dragging { opacity: .4; }
.row.drop-before { box-shadow: inset 0 2px 0 0 var(--accent); }
.row.drop-after  { box-shadow: inset 0 -2px 0 0 var(--accent); }

.sym-cell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.logo { width: 20px; height: 20px; border-radius: 50%; flex: none; background: var(--panel-2); object-fit: contain; }
.sym-wrap { min-width: 0; display: flex; align-items: baseline; gap: 5px; }
.sym { font-size: .82rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exch { font-size: .6rem; color: var(--muted); border: 1px solid var(--line); border-radius: 3px; padding: 0 3px; flex: none; }
.num { text-align: right; font-size: .8rem; }
.up { color: var(--up); } .down { color: var(--down); } .flat { color: var(--muted); }

.row .del {
  position: absolute; right: 1px; opacity: 0;
  width: 22px; height: 22px; font-size: 14px; background: var(--panel-2);
}
.row:hover .del { opacity: .75; }
.row .del:hover { opacity: 1; color: var(--down); }

@keyframes tickUp   { from { background: rgba(38,163,123,.22); } to { background: transparent; } }
@keyframes tickDown { from { background: rgba(224,82,82,.22); }  to { background: transparent; } }
.tick-up   { animation: tickUp .55s ease-out; }
.tick-down { animation: tickDown .55s ease-out; }

.empty { padding: 14px 10px; color: var(--muted); font-size: .78rem; }

.statusbar {
  padding: 5px 10px; font-size: .7rem; color: var(--muted);
  background: var(--panel); border-top: 1px solid var(--line);
}

/* ================= overlays ================= */

.overlay[hidden] { display: none; }
.overlay {
  position: fixed; inset: 0; z-index: 30;
  background: rgba(6,8,12,.62);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 8vh 14px 14px;
}
.panel {
  width: 100%; max-width: 560px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 18px 48px rgba(0,0,0,.5); overflow: hidden;
}
.search-head { display: flex; gap: 6px; padding: 10px; border-bottom: 1px solid var(--line); }
#searchInput {
  flex: 1; background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; font-size: .95rem;
}
#searchSection {
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px; padding: 0 6px; max-width: 150px;
}
.results { list-style: none; margin: 0; padding: 0; max-height: 46vh; overflow-y: auto; }
.results li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; }
.results li.active, .results li:hover { background: var(--panel-2); }
.results .r-name {
  color: var(--muted); font-size: .8rem; margin-left: auto; text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46%;
}
.results .added { color: var(--up); font-size: .75rem; }

.hint { margin: 0; padding: 9px 12px; font-size: .74rem; color: var(--muted); border-top: 1px solid var(--line); }
.hint code { color: #9aa2b1; }

.status-panel { padding: 16px; }
.status-panel h2 { margin: 0 0 10px; font-size: 1rem; font-weight: 600; }
.status-panel dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0 0 14px; font-size: .82rem; }
.status-panel dt { color: var(--muted); }
.status-panel dd { margin: 0; }
.tokenlabel { display: block; font-size: .78rem; color: var(--muted); margin-bottom: 5px; }
.tokenrow { display: flex; gap: 6px; }
#tokenInput {
  flex: 1; background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px;
}
.statusfoot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.status-panel .hint { border: none; padding: 9px 0 0; }

/* ================= narrow screens ================= */

@media (max-width: 860px) {
  :root { --row-h: 40px; }
  .app { flex-direction: column; }
  .chartpane { border-right: none; border-bottom: 1px solid var(--line); height: 54vh; flex: none; }
  .listpane { width: 100%; flex: 1; min-height: 0; }
  .chart-sub { max-width: 52vw; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}