/* Neo Trading Desk — gaya kartu gelap seperti acuan Neo Desk Server.
 * Bukan gaya terminal: font sans sistem, teks putih/abu-abu, kartu
 * gelap membulat dengan bayangan lembut, tanpa teks hijau terminal,
 * tanpa JSON mentah, tanpa judul huruf besar. */
* { box-sizing: border-box; }
html { background: #050607; }
body {
  margin: 0;
  background: #050607;
  color: #f2f4f7;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* designfix: tidak ada geser horizontal apa pun */
}
button {
  font: inherit;
  color: #f2f4f7;
  background: #1b222c;
  border: 1px solid #2a3442;
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
}
button:hover { background: #232c38; }
button:disabled { opacity: 0.55; cursor: default; }
.page-head {
  padding: 20px 16px 8px;
  max-width: 720px;
  margin: 0 auto;
}
.page-head h1 { font-size: 24px; line-height: 1.25; margin: 0 0 4px; font-weight: 700; }
.page-head p { margin: 0; color: #8d99a8; font-size: 14px; }
main {
  max-width: 720px;
  margin: 0 auto;
  padding: 12px 16px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.card {
  background: #12161d;
  border: 1px solid #1f2733;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  min-width: 0;
  overflow-wrap: anywhere;
}
.card h2 {
  font-size: 20px;
  line-height: 1.3;
  margin: 0 0 12px;
  font-weight: 700;
}
.card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
}
.card-head h2 { margin-bottom: 12px; }
.count { color: #8d99a8; font-size: 14px; white-space: nowrap; }
.muted { color: #8d99a8; }
.small { font-size: 14px; }
.note { color: #8d99a8; font-size: 14px; margin: 0 0 12px; }
.error { color: #f2a0a0; font-size: 14px; margin: 12px 0 0; }
.error:empty { display: none; }
.hidden { display: none !important; }
.rows { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* designfix — akar kerusakan foto Bos: label lama `flex: 0 0 auto`
 * (tidak boleh menyusut) + nilai tanpa min-width/break membuat baris
 * lebih lebar dari kartu, kartu lebih lebar dari layar, label terpotong
 * di tepi kiri dan nilai meluber ke kanan. Sekarang label boleh
 * menyusut dan nilai boleh membungkus; tidak ada baris yang boleh
 * melebihi lebar kartu. */
.row { display: flex; justify-content: space-between; gap: 16px; min-width: 0; }
.row .label { color: #8d99a8; flex: 1 1 auto; min-width: 0; }
.row .value { text-align: right; flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.row .value input { max-width: 100%; box-sizing: border-box; }
.btn-wide { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.btn-row button { flex: 1 1 40%; }
.wallet-address {
  word-break: break-all;
  color: #dbe4ee;
  background: #1a212b;
  border: 1px solid #232c38;
  border-radius: 12px;
  padding: 10px 12px;
  margin: 0 0 12px;
}
/* Grid Agen: 2 kolom, kartu dalam dengan titik warna seperti acuan. */
.agent-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.agent {
  background: #1a212b;
  border: 1px solid #232c38;
  border-radius: 14px;
  padding: 16px;
  min-height: 108px;
}
.agent-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.agent-name { font-size: 19px; font-weight: 700; display: flex; align-items: center; gap: 9px; }
.agent-status { color: #8d99a8; font-size: 14px; }
.agent-desc { color: #8d99a8; margin: 0; font-size: 15px; }
.dot { width: 13px; height: 13px; border-radius: 50%; flex: 0 0 auto; }
.dot-scout { background: #38bdf8; }
.dot-filter { background: #fbbf24; }
.dot-analyst { background: #a78bfa; }
.dot-executor { background: #34d399; }
.dot-risk { background: #c084fc; }
.dot-logger { background: #2dd4bf; }
/* Daftar kartu dalam (proposal, posisi, trade, watchlist, event, WD).
 * buyfix (permintaan Bos): daftar panjang di-scroll DI DALAM kartunya
 * sendiri, bukan memanjangkan halaman. Judul + jumlah item ada di
 * .card-head DI LUAR .list, jadi header tidak ikut ter-scroll hilang.
 * .rows (Wallet, sesi, feed) sengaja TIDAK di-scroll: itu baris status
 * pendek, bukan daftar tak berbatas. */
.list { display: flex; flex-direction: column; gap: 12px; max-height: 360px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding-right: 4px; min-width: 0; }
.item {
  background: #1a212b;
  border: 1px solid #232c38;
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.item-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; min-width: 0; }
.item-title { font-weight: 700; font-size: 17px; }
.item-meta { color: #8d99a8; font-size: 14px; }
.item .mint { color: #8d99a8; font-size: 13px; word-break: break-all; }
.badge {
  display: inline-block;
  font-size: 13px;
  color: #f2c94c;
  background: #2a2413;
  border: 1px solid #4a3d17;
  border-radius: 999px;
  padding: 2px 10px;
  margin-top: 2px;
}
.empty { color: #8d99a8; margin: 0; }
.event-time { color: #8d99a8; }
.event-kind { color: #c9d2dc; font-weight: 700; letter-spacing: 0.02em; }
@media (min-width: 640px) {
  .page-head h1 { font-size: 26px; }
  .card { padding: 20px; }
}
/* designfix — layar HP sempit: baris label-nilai di-stack (label di atas,
 * nilai di bawahnya selebar kartu) supaya tidak ada label terpotong dan
 * tidak ada nilai yang meluber; grid Agen jadi 1 kolom. */
@media (max-width: 520px) {
  .page-head { padding-left: 12px; padding-right: 12px; }
  main { padding-left: 12px; padding-right: 12px; }
  .card { padding: 14px; }
  .row { flex-direction: column; gap: 2px; }
  .row .value { text-align: left; }
  .agent-grid { grid-template-columns: 1fr; }
  .agent { min-height: 0; }
}