body {
  background: #0E1116;
  color: #C9D1D9;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 13px;
}
.num { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }

.panel { background: #151A21; border: 1px solid #262D37; border-radius: 8px; padding: 12px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.panel-title { font-size: 13px; font-weight: 600; color: #E6EDF3; }
.panel-note { font-size: 11px; color: #8B949E; }

.item { background: #1B2129; border: 1px solid #262D37; border-radius: 6px; padding: 8px 10px; transition: border-color .15s; }
.item.clickable { cursor: pointer; }
.item.clickable:hover { border-color: #3D4654; }
.item.selected { border-color: #6CA0DC; }

.tag { font-size: 10px; padding: 0 5px; border-radius: 3px; background: #232A35; color: #8B949E; white-space: nowrap; }
.side { font-size: 10px; font-weight: 600; padding: 1px 5px; border-radius: 3px; }
.side-buy  { color: #3FB68B; background: rgba(63,182,139,.12); }
.side-sell { color: #E5534B; background: rgba(229,83,75,.12); }

.pill { padding: 2px 8px; border-radius: 4px; font-size: 11px; color: #8B949E; border: 1px solid transparent; }
.pill:hover { color: #E6EDF3; }
.pill.is-active { background: #232A35; border-color: #303844; color: #E6EDF3; }

.icon-btn { padding: 4px; border-radius: 4px; color: #8B949E; }
.icon-btn:hover { color: #E6EDF3; background: #1F262F; }
.icon-btn.is-active { color: #E6EDF3; background: #232A35; }

.btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 6px;
  border: 1px solid #262D37; background: #1B2129; color: #C9D1D9; font-size: 12px; }
.btn:hover { border-color: #3D4654; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.is-active { border-color: #6CA0DC; color: #E6EDF3; }
.btn-primary { background: #6CA0DC; border-color: #6CA0DC; color: #0E1116; font-weight: 500; }
.btn-primary:hover { background: #7DAEE3; }
.btn-danger { background: #E5534B; border-color: #E5534B; color: #0E1116; font-weight: 500; }

.field { width: 100%; background: #0E1116; border: 1px solid #262D37; border-radius: 6px; padding: 7px 9px;
  color: #E6EDF3; font-size: 12px; outline: none; }
.field:focus { border-color: #6CA0DC; }

.bar { height: 4px; background: #262D37; border-radius: 2px; overflow: hidden; display: flex; }
.bar > div { height: 100%; }

.overlay { background: rgba(21,26,33,.94); border: 1px solid #262D37; border-radius: 6px; }
#signalTickerText { transition: opacity .2s; }

body.compact .panel { padding: 8px; }
body.compact .item  { padding: 6px 8px; }

.skeleton { background: linear-gradient(90deg,#1B2129 0%,#222934 50%,#1B2129 100%); background-size: 200% 100%;
  animation: sk 1.2s infinite; border-radius: 6px; height: 44px; }
@keyframes sk { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.prose-ai p { margin: 0 0 .6em; }
.prose-ai ul { list-style: disc; padding-left: 1.1em; margin: 0 0 .6em; }
.prose-ai li { margin: .15em 0; }
.prose-ai strong { color: #E6EDF3; }

#loginStatus[data-kind="error"] { color: #E5534B; }
#loginStatus[data-kind="ok"] { color: #3FB68B; }

/* ---- header: tautan menu & dropdown ---- */
.nav-link { display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px; border-radius: 6px;
  color: #8B949E; font-size: 12px; white-space: nowrap; transition: color .15s, background .15s; }
.nav-link:hover { color: #E6EDF3; background: #161B22; }
.nav-link.is-active { color: #E6EDF3; background: #1B2129; box-shadow: inset 0 -2px 0 #6CA0DC; }
.dd { position: relative; }
.dd-chev { width: 12px; height: 12px; opacity: .7; transition: transform .15s; }
.dd.open > [data-dd-btn] .dd-chev { transform: rotate(180deg); }
.dd-menu { position: absolute; top: calc(100% + 8px); z-index: 60; padding: 4px; background: #151A21;
  border: 1px solid #262D37; border-radius: 8px; box-shadow: 0 16px 40px rgba(0,0,0,.55); }
.dd-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 6px; font-size: 12px;
  color: #C9D1D9; text-align: left; white-space: nowrap; }
.dd-item:hover { background: #1F262F; color: #E6EDF3; }
.dd-item.is-active { background: #1B2129; color: #E6EDF3; box-shadow: inset 2px 0 0 #6CA0DC; }
.dd-item > svg { width: 14px; height: 14px; color: #8B949E; flex-shrink: 0; }
.dd-sep { height: 1px; background: #262D37; margin: 4px 2px; }
.dd-label { padding: 6px 10px 2px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #6E7681; }
.dd-badge { margin-left: auto; font-family: 'IBM Plex Mono', monospace; font-size: 10px; line-height: 15px; padding: 0 5px;
  border-radius: 3px; background: #D1A04B; color: #0E1116; }
.nav-link .dd-badge { margin-left: 2px; }
.acct-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 6px; font-size: 12px;
  color: #C9D1D9; border: 1px solid #262D37; background: #151A21; white-space: nowrap; }
.acct-btn:hover, .dd.open > .acct-btn { border-color: #3D4654; }

/* kolom dashboard yang bergulir sendiri: guliran berhenti di ujung kolom, tidak "menular" ke halaman */
.col-scroll { overscroll-behavior: contain; scrollbar-gutter: stable; }
.col-scroll > * { flex-shrink: 0; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #262D37; border-radius: 3px; }
input[type=range] { accent-color: #6CA0DC; }
.errorlist { color: #E5534B; font-size: 11px; margin-top: 4px; }