:root {
  --bg: #10141c;
  --card: #181e2a;
  --line: #2a3346;
  --text: #e8edf7;
  --muted: #93a0b8;
  --acc: #3d8bfd;
  --acc-press: #2c6fd1;
  --ok: #2f9e6b;
  --danger: #d45454;
  --warn: #c4922a;
  --radius: 10px;
  /* tema warna: permukaan yang dulu hardcoded (nilai gelap sama persis) */
  --top-bg: #141a24;
  --surface: #141a24;
  --input-bg: #10151f;
  --btn-bg: #222a3a;
  --side-bg: #121826;
  --elev: #1a2230;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

.boot-loading {
  background: var(--elev);
  color: #c5d0e6;
  padding: 0.65rem 1rem;
  text-align: center;
  font: 600 14px/1.4 system-ui, -apple-system, sans-serif;
  border-bottom: 1px solid #2a3548;
}
.boot-loading[hidden] { display: none !important; }

body {
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
}
a { color: var(--acc); text-decoration: none; }
.login-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login-card { width: min(420px, 100%); }
.trust-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 18px;
  min-height: 44px;
  font-size: 15px;
}
.trust-row input { width: 22px; height: 22px; }
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--top-bg);
  position: sticky;
  top: 0;
}
.brand { font-weight: 700; letter-spacing: 0.02em; overflow-wrap: anywhere; }
nav { display: flex; gap: 16px; align-items: center; }
nav a { color: var(--muted); }
nav a.active { color: var(--text); font-weight: 600; }
.inline { display: inline; margin: 0; }
.linkish {
  background: none; border: 0; color: var(--muted); cursor: pointer;
  font: inherit; padding: 0;
}
.wrap { max-width: 1080px; margin: 0 auto; padding: 22px; display: grid; gap: 16px; }
.wrap.narrow { max-width: 760px; }
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 18px 16px;
}
.grow { width: 100%; }
.kicker { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
h1, h2 { margin: 0 0 8px; }
h1 { font-size: 22px; }
h2 { font-size: 18px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.status-head { display: flex; justify-content: space-between; align-items: center; }
.dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: #5b6578; box-shadow: 0 0 0 4px #5b657822;
}
.dot.on { background: var(--ok); box-shadow: 0 0 0 4px #2f9e6b33; }
.dot.off { background: #5b6578; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 6px; }
.btn {
  border: 1px solid var(--line);
  background: var(--btn-bg);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  font: inherit;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.primary { background: var(--acc); border-color: var(--acc); color: #fff; }
.btn.primary:hover:not(:disabled) { background: var(--acc-press); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.val { font-size: 22px; font-weight: 650; margin-top: 6px; }
.val.sub { font-size: 16px; font-weight: 600; margin-top: 2px; color: var(--text); }
.deposit-cash {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.deposit-cash .kicker { margin-bottom: 2px; }
.alert {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #202838;
}
.alert.error { border-color: #7a3030; background: #2a1717; color: #f1c4c4; }
.alert.ok { border-color: #2f6b4d; background: #163024; color: #c6f0d9; }
.alert.warn { border-color: #7a6230; background: #2a2314; color: #f0e2b8; }
label { display: block; margin: 10px 0 4px; font-size: 14px; }
input[type="text"], input[type="password"], input[type="number"] {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 8px;
  padding: 9px 10px;
  font: inherit;
}
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.mode-box { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.radio, .check { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0; }
code { background: var(--input-bg); padding: 1px 5px; border-radius: 4px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); }
pre.log {
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--input-bg);
  border-radius: 8px;
  padding: 10px;
  font-size: 12px;
  max-height: 260px;
  overflow: auto;
  margin: 8px 0 0;
}
.form h2 { margin-top: 18px; }
@media (max-width: 640px) {
  .fields { grid-template-columns: 1fr; }
  .top { flex-direction: column; align-items: flex-start; gap: 8px; }
}
.btn.small { padding: 5px 10px; font-size: 13px; }
.cell-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.add-pair { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-top: 16px; }
.add-pair label { margin: 0; flex: 1; min-width: 180px; }
.add-pair label.copy-from { flex: 1.5; min-width: 220px; }
.add-pair .add-pair-hint { flex-basis: 100%; margin: 4px 0 0; }
.badge {
  font-size: 12px; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--line); text-transform: uppercase; letter-spacing: 0.04em;
}
.badge.test { color: #c6f0d9; border-color: #2f6b4d; background: #163024; }
.badge.live { color: #f1c4c4; border-color: #7a3030; background: #2a1717; }
.wrap { max-width: 1120px; }

input[type="text"], input[type="password"], input[type="number"], select {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 8px;
  padding: 9px 10px;
  font: inherit;
}
select { appearance: auto; }

.reentries { margin-top: 14px; display: grid; gap: 10px; }
.reentry-row {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr;
  gap: 8px 16px;
  align-items: end;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
.reentry-row .check { margin: 0 0 8px; }

.usdt-need {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
.usdt-need .kicker { margin-bottom: 4px; }
.usdt-need-total {
  font-size: 1.35rem;
  font-weight: 650;
  letter-spacing: 0.01em;
}
.usdt-need .muted { margin-top: 4px; }
@media (max-width: 640px) {
  .reentry-row { grid-template-columns: 1fr; }
}

.col-act { text-align: right; white-space: nowrap; width: 1%; }
tr.row-edit td { background: #1c2636; }
.row-btns { margin: 14px 0 0; }
.form .btn { margin-right: 8px; margin-top: 10px; }

tr.row-run td { background: #163024; }
tr.row-wait td { background: #2a2214; }
#running-line { margin-top: 8px; }
#running-line a { margin-right: 4px; }


/* mobile-friendly */
html { -webkit-text-size-adjust: 100%; }
.top { z-index: 30; }
.table-wrap { -webkit-overflow-scrolling: touch; }

@media (max-width: 720px) {
  .top {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 12px;
    padding-top: max(10px, env(safe-area-inset-top));
  }
  nav { flex-wrap: wrap; gap: 4px 10px; width: 100%; }
  nav a, nav .linkish {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 6px 4px;
  }
  .wrap { padding: 12px; padding-bottom: max(18px, env(safe-area-inset-bottom)); gap: 12px; }
  .card { padding: 14px 12px 12px; }
  .status-head { align-items: flex-start; gap: 8px; }
  .status-head h2 { font-size: 18px; }
  .grid { grid-template-columns: 1fr 1fr; }
  .val { font-size: 18px; overflow-wrap: anywhere; }
  .fields, .reentry-row { grid-template-columns: 1fr; }
  .btn, .btn.small {
    min-height: 42px;
    padding: 10px 14px;
    font-size: 15px;
  }
  .actions { gap: 8px; }
  .actions form { flex: 1 1 46%; }
  .actions .btn { width: 100%; }
  .cell-actions { width: 100%; }
  .cell-actions .btn { flex: 1 1 30%; }
  .add-pair { flex-direction: column; align-items: stretch; }
  .add-pair label { min-width: 0; }
  .add-pair .btn { width: 100%; }
  input[type="text"], input[type="password"], input[type="number"], select {
    font-size: 16px;
    min-height: 44px;
  }
  .form .btn { margin-right: 0; width: 100%; }
  .row-btns .btn { display: inline-block; width: 100%; text-align: center; }

  table.stack thead { display: none; }
  table.stack, table.stack tbody, table.stack tr, table.stack td {
    display: block;
    width: 100%;
  }
  table.stack tr[hidden],
  table.stack tr.row-hide {
    display: none !important;
  }
  table.stack tr {
    border: 1px solid var(--line);
    border-radius: 8px;
    margin: 0 0 12px;
    padding: 8px 10px;
    background: var(--surface);
  }
  table.stack td {
    border-bottom: 0;
    padding: 7px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
  }
  table.stack td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 12px;
    flex: 0 0 34%;
  }
  table.stack td.cell-actions,
  table.stack td.col-act {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  table.stack td.cell-actions::before,
  table.stack td.col-act::before { flex: 0 0 100%; }
  .table-wrap:has(table.stack) { overflow: visible; }
}

@media (max-width: 420px) {
  .grid { grid-template-columns: 1fr; }
}

.pnl-pos { color: #3ecf8e; }
.pnl-neg { color: #e05a5a; }

.lot-note { margin-top: 0.25rem; line-height: 1.35; }

.card-link {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  background: var(--card);
  color: inherit;
  cursor: pointer;
  padding: 14px 16px;
  border-radius: var(--radius);
}
.card-link .kicker { margin-bottom: 4px; }
.card-link.is-on {
  border-color: var(--acc);
  box-shadow: 0 0 0 1px var(--acc);
}
.card-link:active { transform: none; }

.status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  vertical-align: middle;
}
.status-dot.on { background: var(--ok); box-shadow: 0 0 0 3px #2f9e6b33; }
.status-dot.stop { background: var(--danger); box-shadow: 0 0 0 3px #d4545433; }
.status-dot.wait { background: #F0A93E; box-shadow: 0 0 0 3px #F0A93E33; }
.status-dot.idle { background: #4a9ea0; box-shadow: 0 0 0 3px #4a9ea033; }
.cell-status { text-align: center; width: 2.2rem; }
.phase-wait { color: #F0A93E; }
.phase-open { color: var(--ok); }
.phase-stop { color: var(--danger); }
.phase-idle { color: #4a9ea0; }
/* panel-129: pair sudah kena limit slot (tidak ada entry berikutnya) */
.phase-open.phase-full, .phase-full { color: #d36bff; font-weight: 700; }

.status-quad {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.status-quad .card h2 { margin: 4px 0 0; font-size: 20px; }
.acct-mini {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  font-size: 12px;
  color: var(--muted);
}
.acct-mini li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0;
  border-bottom: 1px solid #ffffff0d;
}
.acct-mini li span { color: var(--text); }
@media (max-width: 980px) {
  .status-quad { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .status-quad { grid-template-columns: 1fr; }
}

.tx-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.tx-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  min-height: 40px;
  font-size: 13px;
  color: var(--muted);
}
.tx-check input { width: 18px; height: 18px; }
.tx-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
  align-items: center;
}
.tx-filters .tx-pills { margin: 4px 0 8px; }
.tx-pills, .tx-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 12px;
}
.tx-pill, .tx-chip {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  border-radius: 999px;
  padding: 8px 12px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  min-height: 36px;
}
.tx-pill.on, .tx-chip.on {
  background: #2a2450;
  border-color: #6d5bff;
  color: #c8c4ff;
}
.tx-table thead th {
  background: #16343f;
  color: #7fd4e8;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tx-badge {
  display: inline-block;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 650;
}
.tx-badge.beli { background: #163024; color: #3ecf8e; }
.tx-badge.jual { background: #2a1717; color: #f1a0a0; }
.tx-badge.closed { background: #2a2f3a; color: #c5cddb; }
.tx-badge.pindah { background: #242830; color: #8b93a3; }
.tx-move {
  margin-left: 6px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 1px 7px;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  min-height: 0;
  line-height: 1.3;
  vertical-align: middle;
}
.tx-move:hover { color: var(--text); border-color: #6d5bff; }
.tx-date { color: var(--muted); font-size: 12px; }
.tx-more { display: inline-block; margin-top: 12px; }
.tx-more[hidden] { display: none !important; }
@media (max-width: 640px) {
  .tx-pill, .tx-chip { min-height: 44px; }
}
.unit { color: var(--muted); font-size: 12px; font-weight: 400; }
.pnl-pct { font-size: 11px; font-weight: 500; opacity: 0.9; }


/* DUM-style portfolio chrome (panel-34) */
.port-body { background: #0f141c; }
.port-shell {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  align-items: start;
  min-height: calc(100vh - 56px);
}
.port-side {
  position: sticky;
  top: 56px;
  height: calc(100vh - 56px);
  overflow: auto;
  padding: 16px 14px 24px;
  border-right: 1px solid var(--line);
  background: var(--side-bg);
}
.port-main.wrap {
  max-width: none;
  margin: 0;
  padding: 18px 22px 28px;
}
.port-seg {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3px;
  background: var(--elev);
  border-radius: 10px;
  padding: 3px;
  margin-bottom: 14px;
}
.port-seg-btn {
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 6px;
  border-radius: 8px;
  cursor: pointer;
  min-height: 36px;
}
.port-seg-btn.on {
  background: #2a3346;
  color: var(--text);
}
.port-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 8px 8px;
  border-radius: 10px;
  cursor: pointer;
  min-height: 48px;
}
.port-item:hover { background: var(--elev); }
.port-item.active { background: #1e2a3e; }
.port-item .port-name {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.port-item.active .port-name { font-weight: 650; }

.port-item-row {
  display: flex;
  align-items: center;
  gap: 2px;
  width: 100%;
}
.port-item-row .port-item { flex: 1; min-width: 0; }
.port-move {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 0 0 auto;
}
.port-move-btn {
  border: 0;
  background: transparent;
  color: var(--muted, #8b9bb4);
  cursor: pointer;
  font-size: 10px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
  min-width: 22px;
  min-height: 18px;
}
.port-move-btn:hover:not(:disabled) { background: var(--elev); color: #fff; }
.port-move-btn:disabled { opacity: 0.25; cursor: default; }
.wallet-avatar {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.port-hd {
  font-weight: 650;
  font-size: 13px;
  margin: 12px 6px 6px;
}
.port-alloc {
  margin-top: 18px;
  padding: 14px;
}
.port-alloc-title {
  font-weight: 650;
  font-size: 14px;
  margin-bottom: 10px;
}
.port-donut {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 8px auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.port-donut-hole {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--card);
}
.port-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.port-leg {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
}
.port-leg-left {
  display: flex;
  gap: 6px;
  min-width: 0;
  align-items: flex-start;
}
.port-leg-val {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.port-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}
.port-hide { display: none !important; }

@media (max-width: 900px) {
  .port-shell { grid-template-columns: 1fr; }
  .port-side {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 12px;
  }
  .port-wallets {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    overflow: visible;
    padding-bottom: 4px;
  }
  .port-wallets .port-item-row {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--line);
    background: var(--elev);
    border-radius: 10px;
  }
  .port-wallets .port-item {
    flex: 1;
    width: auto;
    min-width: 0;
    border: 0;
    background: transparent;
  }
  .port-side > .port-item { width: 100%; }
  .port-alloc { margin-top: 12px; }
  .port-main.wrap { padding: 12px; }
}

.status-quad {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 1100px) {
  .status-quad { grid-template-columns: 1fr 1fr; }
}
.wallet-panel { margin-bottom: 4px; }
.wallet-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 16px;
  margin-top: 10px;
}
.wallet-stats .small-val { font-size: 18px; margin-top: 2px; }
.wallet-kas-link { grid-column: 1 / -1; margin-top: 4px; }
@media (max-width: 700px) {
  .wallet-stats { grid-template-columns: 1fr 1fr; }
}

.pair-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 10px;
}
.pair-head .kicker { margin: 0; }
tr.pair-sec td {
  background: #161d2a;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9aa8bd;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
tr.pair-sec[data-sec="futures"] td {
  border-top: 2px solid #3a465c;
  margin-top: 4px;
}
tr.pair-empty td { color: var(--muted); background: transparent; }
@media (max-width: 640px) {
  table.stack tr.pair-sec,
  table.stack tr.pair-empty {
    border: 0;
    background: transparent;
    margin: 4px 0 8px;
    padding: 0;
    box-shadow: none;
  }
  table.stack tr.pair-sec td,
  table.stack tr.pair-empty td {
    display: block;
    padding: 10px 2px 6px;
    border: 0;
    background: transparent;
    border-bottom: 1px solid var(--line);
  }
  table.stack tr.pair-sec[data-sec="futures"] td {
    border-top: 2px solid #3a465c;
    margin-top: 8px;
  }
  table.stack tr.pair-sec td::before,
  table.stack tr.pair-empty td::before { content: none; display: none; }
}

.tp-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 80;
  padding: 16px;
}
.tp-modal[hidden] { display: none !important; }
.tp-modal-card {
  width: min(380px, 100%);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
}
.tp-modal-card .row-btns { display: flex; gap: 8px; }
.tp-modal-card .row-btns .btn { flex: 1; }
@media (max-width: 640px) {
  .tp-modal-card .row-btns .btn { width: auto; }
}

.tp-lots { margin: 8px 0 12px; display: flex; flex-direction: column; gap: 6px; }
.tp-lot {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0;
  font-size: 13px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--side-bg);
}
.tp-lot input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; }

.lev { font-size: 11px; color: var(--muted); font-weight: 600; margin-left: 6px; letter-spacing: 0; }
.sz { font-size: 11px; color: var(--muted); margin-left: 6px; }
.sz::after { content: " USDT"; font-size: 10px; }

/* panel-50: denser dashboard so spot+futures fit one screen */

@media (min-width: 901px) {
  .port-shell {
    grid-template-columns: 212px minmax(0, 1fr);
    min-height: calc(100vh - 48px);
  }
  .port-side {
    top: 48px;
    height: calc(100vh - 48px);
    padding: 10px 8px 16px;
  }
  .port-seg {
    margin-bottom: 8px;
    padding: 2px;
  }
  .port-seg-btn {
    padding: 5px 4px;
    min-height: 0;
    font-size: 12px;
  }
  .port-item {
    padding: 4px 6px;
    min-height: 0;
    gap: 8px;
  }
  .wallet-avatar {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    font-size: 11px;
  }
  .port-item .port-name { font-size: 12px; }
  .port-hd {
    margin: 8px 6px 4px;
    font-size: 12px;
  }
  .port-alloc {
    margin-top: 10px;
    padding: 8px;
  }
  .port-donut {
    width: 72px;
    height: 72px;
  }
  .port-donut-hole {
    width: 42px;
    height: 42px;
  }
  .port-legend { gap: 4px; }
  .top { padding: 8px 16px; }
  .port-main.wrap { padding: 10px 14px 16px; }
  .status-quad {
    gap: 8px;
    margin-bottom: 8px;
  }
  .status-quad .card { padding: 8px 10px; }
  .status-quad .card h2 {
    font-size: 15px;
    margin: 2px 0 0;
  }
  .status-quad .val {
    font-size: 16px;
    margin-top: 2px;
  }
  .status-quad .muted.small { display: none; }
  .port-main table {
    font-size: 13px;
    line-height: 1.25;
  }
  .port-main th,
  .port-main td { padding: 4px 6px; }
  .port-main tr.pair-sec td { padding: 5px 8px; }
  .port-main .lot-note { display: none; }
  .port-main .lot-tip {
    border-bottom: 1px dotted rgba(255,255,255,0.28);
    cursor: default;
  }
  .btn.small {
    padding: 3px 8px;
    font-size: 12px;
  }
  .cell-actions { gap: 4px; }
  .pair-head { margin-bottom: 6px; }
  .tx-pill {
    padding: 4px 10px;
    min-height: 0;
  }
  .tx-move {
    padding: 0 6px;
    font-size: 10px;
  }
  .port-tp { margin-top: 8px; padding: 8px; }
  .port-tp .port-alloc-title { margin-bottom: 6px; font-size: 12px; }
  .port-tp-head, .port-tp-row { font-size: 10px; }
  .port-near { margin-top: 8px; padding: 8px; }
  .port-near .port-alloc-title { margin-bottom: 6px; font-size: 12px; }
  .port-near-l1 { font-size: 10px; }
  .port-near-l2 { font-size: 9px; }
}

@media (max-width: 900px) {
  .port-side {
    padding: 8px;
    overflow: visible;
    height: auto;
  }
  .port-item { min-height: 40px; }
  .port-tp,
  .port-near {
    overflow: visible;
    max-height: none;
  }
}

/* panel-51: compact hover popup of saved pair rules on dashboard name */
.rule-tip {
  display: inline;
}
.rule-tip a {
  border-bottom: 1px dotted rgba(61, 139, 253, 0.45);
}
.rule-pop {
  position: fixed;
  z-index: 120;
  max-width: 300px;
  width: max-content;
  max-height: min(340px, 62vh);
  overflow: auto;
  padding: 9px 11px 8px;
  background: #151b27;
  border: 1px solid #3a465c;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
  font-size: 12px;
  line-height: 1.35;
  color: var(--text);
  pointer-events: auto;
}
.rule-pop[hidden] { display: none !important; }
.rule-pop-title {
  font-weight: 650;
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 0.01em;
}
.rule-pop-line {
  color: var(--text);
  margin: 1px 0;
}
.rule-pop-slot {
  display: grid;
  grid-template-columns: 46px 64px 72px minmax(52px, 1fr);
  gap: 2px 6px;
  font-variant-numeric: tabular-nums;
  color: #c5d0e0;
  margin: 1px 0;
}
.rule-pop-foot {
  margin-top: 7px;
  font-size: 10px;
  color: var(--muted);
}

/* Period report (panel-54) */
.wrap.rpt-wrap { max-width: 1180px; }
.rpt-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.rpt-head h1 { margin: 0 0 6px; }
.rpt-export {
  border-radius: 999px;
  padding: 8px 16px;
  white-space: nowrap;
}
.rpt-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
}
.rpt-tab {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  border-radius: 999px;
  padding: 8px 16px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  min-height: 36px;
}
.rpt-tab.on {
  background: #2a3346;
  color: var(--text);
  border-color: #4a5870;
}
.rpt-card { padding: 0; overflow: hidden; }
.rpt-card .table-wrap { margin: 0; }
.rpt-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}
.rpt-table thead th {
  background: #00d4e8;
  color: #0a1218;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.01em;
  padding: 10px 10px;
  white-space: nowrap;
  border-bottom: 0;
}
.rpt-table td {
  padding: 11px 10px;
  border-bottom: 1px solid var(--line);
}
.rpt-table tbody tr:hover { background: #1c2433; }
.rpt-dash { color: var(--muted); }
.rpt-empty { text-align: center; color: var(--muted); padding: 28px 8px; }
@media (max-width: 640px) {
  .rpt-tab { min-height: 44px; }
}

/* panel-83: report sidebar + expandable period detail */
.rpt-table tbody tr.rpt-row { cursor: pointer; }
.rpt-table tbody tr.rpt-row.open { background: #1e2a3e; }
.rpt-table tbody tr.rpt-row.open:hover { background: #223049; }
.rpt-table tbody tr.rpt-detail { background: #0f1520; }
.rpt-table tbody tr.rpt-detail:hover { background: #0f1520; }
.rpt-table tbody tr.rpt-detail > td {
  padding: 0;
  border-bottom: 1px solid var(--line);
}
.rpt-detail-wrap {
  padding: 10px 12px 14px;
  overflow-x: auto;
}
.rpt-detail-empty {
  padding: 14px 12px;
  font-size: 13px;
}
.rpt-detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.rpt-detail-table thead th {
  background: #1a2434;
  color: var(--muted);
  font-weight: 600;
  font-size: 11px;
  padding: 7px 8px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.rpt-detail-table td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--elev);
  white-space: nowrap;
}
.rpt-detail-table tbody tr:hover { background: #151c2a; }
.rpt-kind {
  display: inline-block;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  background: var(--elev);
  color: var(--text);
}
.rpt-kind-beli { background: #163528; color: #6ee7a8; }
.rpt-kind-jual { background: #3a1d24; color: #f5a3ad; }
.rpt-kind-closed { background: #1c2a44; color: #8eb6ff; }
.rpt-kind-setor { background: #1a2e2a; color: #5eead4; }
.rpt-kind-tarik { background: #33261a; color: #fbbf77; }

/* panel-58: compact last-5 TP recap under Alokasi */
.port-tp { margin-top: 12px; padding: 10px 8px 8px; }
.port-tp .port-alloc-title { margin-bottom: 8px; font-size: 13px; }
.port-tp-head,
.port-tp-row {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr) minmax(0, 0.85fr) minmax(0, 1fr);
  gap: 3px 4px;
  align-items: baseline;
  font-size: 11px;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.port-tp-head {
  color: var(--muted);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.port-tp-head span:nth-child(3),
.port-tp-head span:nth-child(4),
.port-tp-px,
.port-tp-pnl { text-align: right; }
.port-tp-row {
  padding: 4px 0;
  border-top: 1px solid var(--line);
}
.port-tp-pair,
.port-tp-acc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.port-tp-pnl { font-weight: 650; }
.port-tp-pct {
  display: block;
  font-weight: 500;
  font-size: 9px;
  opacity: 0.85;
}
.port-tp-empty { font-size: 11px; padding: 4px 0 2px; }
@media (max-width: 900px) {
  .port-tp-head,
  .port-tp-row {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 0.95fr) minmax(0, 1.15fr);
  }
  .port-tp-pair,
  .port-tp-acc,
  .port-tp-px,
  .port-tp-pnl { order: 0; width: auto; flex: none; }
  .port-tp-pct { display: inline; font-size: 9px; margin-left: 3px; }
  .port-tp-px { color: inherit; text-align: right; font-size: inherit; }
}

/* panel-59: nearest-TP / open sell card under TP terakhir */
.port-near { margin-top: 12px; padding: 10px 8px 8px; }
.port-near .port-alloc-title { margin-bottom: 8px; font-size: 13px; }
.port-near-row {
  padding: 5px 0 4px;
  border-top: 1px solid var(--line);
}
.port-near-l1 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 11px;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.port-near-id {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.port-near-pair { color: var(--text); font-weight: 650; }
.port-near-acc { color: var(--muted); }
.port-near-right {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  font-variant-numeric: tabular-nums;
}
.port-near-pct {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.port-near-pnl {
  font-size: 10px;
  font-weight: 650;
  line-height: 1.2;
}
.port-near-l2 {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.3;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.port-near-empty { font-size: 11px; padding: 4px 0 2px; }

/* panel-60: cash shortfall vs next re-entry slot */
#usdt-card.is-warn {
  border-color: var(--danger);
  box-shadow: 0 0 0 1px #d4545433;
}
#usdt-card.is-warn > .kicker { color: var(--danger); }
#usdt-list li.is-warn,
#usdt-list li.is-warn span {
  color: var(--danger);
  font-weight: 650;
}
#usdt-cash-warn {
  margin: 6px 0 0;
  color: var(--danger);
  font-size: 11px;
  line-height: 1.3;
}
.status-quad #usdt-cash-warn { display: block; }
.status-quad #usdt-cash-warn[hidden] { display: none; }
.wallet-panel.is-warn { border-color: var(--danger); }
.wallet-panel.is-warn > .kicker { color: var(--danger); }
.wallet-cash-warn {
  grid-column: 1 / -1;
  margin-top: 4px;
  color: var(--danger);
  font-size: 11px;
  line-height: 1.3;
}


.lot-tip { display: inline; }


/* panel-77: iOS / PWA install tip + standalone chrome */
.pwa-tip {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 200;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 12px 12px 14px;
  background: #1a2333;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.45);
}
.pwa-tip-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  line-height: 1.35;
}
.pwa-tip-body strong { font-size: 14px; }
.pwa-tip-body span { color: var(--muted); }
.pwa-tip-body em { color: var(--text); font-style: normal; font-weight: 600; }
.pwa-tip-x {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
}
html.pwa-standalone body {
  min-height: 100dvh;
}
html.pwa-standalone .top {
  padding-top: max(10px, env(safe-area-inset-top));
}
html.pwa-standalone .wrap,
html.pwa-standalone .login-body {
  padding-bottom: max(18px, env(safe-area-inset-bottom));
}


/* panel-78: symbol filter pills under mode filter */
.pair-filters {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.pair-sym-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.pair-sym-pills .tx-pill {
  font-size: 12px;
  padding: 5px 10px;
}
.pair-sym-pills .tx-pill.on {
  background: var(--acc);
  border-color: var(--acc);
  color: #fff;
}
/* panel-130: status filter pills wrap with mode/symbol filters */
#pair-status-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
#pair-status-pills .tx-pill {
  font-size: 12px;
  padding: 5px 10px;
}
td[data-label="Entry"] {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) {
  .pair-head { align-items: stretch; }
  .pair-filters { width: 100%; }
}


/* panel-79: pull-to-refresh (PWA / mobile) */
.ptr-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 250;
  display: flex;
  justify-content: center;
  pointer-events: none;
  transform: translateY(-120%);
  transition: transform 0.18s ease;
}
.ptr-bar.show {
  transform: translateY(0);
}
.ptr-bar.arm {
  transform: translateY(0);
}
.ptr-pill {
  margin-top: max(8px, env(safe-area-inset-top));
  padding: 8px 14px;
  border-radius: 999px;
  background: #1a2333;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}
.ptr-bar.busy .ptr-pill { color: var(--text); }
.btn.ptr-refresh {
  min-width: 40px;
  padding: 6px 10px;
}
html.pwa-standalone .top .ptr-refresh { display: inline-flex; }
.ptr-refresh { display: none; }
@media (max-width: 900px) {
  .ptr-refresh { display: inline-flex; }
}


/* panel-81: force-hide filtered rows (portrait stack cards) */
table.stack tr.row-hide,
table.stack tr[hidden],
tr.row-hide {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* panel-84: Periode | Banding akun */
.rpt-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.rpt-refresh {
  border-radius: 999px;
  padding: 8px 14px;
  white-space: nowrap;
}
.rpt-refresh.busy {
  opacity: 0.65;
  pointer-events: none;
}
.rpt-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
}
.rpt-mode {
  border: 1px solid var(--line);
  background: #10161f;
  color: var(--muted);
  border-radius: 10px;
  padding: 9px 18px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  min-height: 40px;
}
.rpt-mode.on {
  background: #1e3a5f;
  color: #dbeafe;
  border-color: #3b82f6;
}
/* panel-85: banding scope segment (port-seg style) + grain disable */
.rpt-scope-tabs {
  display: block;
  margin: 14px 0 0;
  width: 100%;
}
.rpt-scope-tabs[hidden] { display: none !important; }
.rpt-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  background: var(--elev);
  border-radius: 10px;
  padding: 3px;
  width: 100%;
  max-width: 420px;
}
.rpt-seg-btn {
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  min-height: 40px;
  white-space: nowrap;
}
.rpt-seg-btn.on {
  background: #1e3a5f;
  color: #dbeafe;
}
.rpt-scope-note {
  display: block;
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--muted);
}
.rpt-scope-note[hidden] { display: none !important; }
.rpt-tabs.disabled {
  opacity: 0.45;
}
.rpt-tabs.disabled .rpt-tab,
.rpt-tab.disabled {
  cursor: not-allowed;
  pointer-events: none;
}
.port-shell.rpt-banding {
  grid-template-columns: 1fr;
}
.port-shell.rpt-banding .port-side {
  display: none !important;
}
.rpt-compare-table th.sortable {
  cursor: pointer;
  user-select: none;
}
.rpt-compare-table th.sortable::after {
  content: "";
  margin-left: 4px;
  opacity: 0.35;
  font-size: 10px;
}
.rpt-compare-table th.sort-asc::after { content: "▲"; opacity: 0.9; }
.rpt-compare-table th.sort-desc::after { content: "▼"; opacity: 0.9; }
.rpt-cmp-row.overview {
  background: #162033;
  font-weight: 650;
}
.rpt-cmp-row.overview:hover { background: #1a2740; }
.rpt-cmp-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 120px;
}
.rpt-cmp-name strong { font-weight: 650; }
.rpt-cmp-name .muted { font-size: 12px; }
.rpt-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.rpt-badge {
  display: inline-block;
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.rpt-badge-aktif { background: #1e3a5f; color: #93c5fd; }
.rpt-badge-profit { background: #163528; color: #6ee7a8; }
.rpt-badge-efisien { background: #3b2a14; color: #fbbf77; }
@media (max-width: 720px) {
  .rpt-mode { min-height: 44px; flex: 1; text-align: center; }
  .rpt-head-actions { width: 100%; }
  .rpt-refresh, .rpt-export { flex: 1; text-align: center; }
  .rpt-seg { max-width: none; }
  .rpt-seg-btn { min-height: 44px; font-size: 14px; }
  .rpt-scope-note { font-size: 12px; }
}


/* panel-87: dashboard bulk actions */
.bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
}
.bulk-bar .btn {
  min-height: 44px;
}
.bulk-bar .bulk-stop {
  border-color: #7a4a4a;
  color: #f1c4c4;
  background: #2a1c1c;
}
.bulk-bar .bulk-stop:hover:not(:disabled) {
  background: #3a2424;
}
.bulk-bar .bulk-hint {
  flex: 1 1 160px;
}
.bulk-bar.is-busy .btn {
  opacity: 0.55;
  cursor: wait;
}
.bulk-bar #bulk-form {
  display: none;
}
@media (max-width: 720px) {
  .bulk-bar .btn {
    flex: 1 1 auto;
    min-width: 44px;
  }
}

/* panel-100 price tracker — no scrollbar */
.watch-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: visible;
  max-height: none;
}
.watch-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: 6px 8px;
  font-size: 12px;
  line-height: 1.3;
}
.watch-sym {
  font-weight: 650;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.watch-last {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}
.watch-chg {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
  min-width: 4.5em;
}
.watch-pct { opacity: 0.95; }
.watch-x {
  border: 0;
  background: transparent;
  color: var(--muted, #8b93a7);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0 2px;
  flex-shrink: 0;
}
.watch-x:hover { color: #f1c4c4; }
.watch-add {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  align-items: center;
}
.watch-add input {
  flex: 1;
  min-width: 0;
  background: var(--input-bg);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 8px;
  padding: 6px 8px;
  font: inherit;
  font-size: 12px;
}
#watch-err { margin-top: 6px; color: #f1c4c4; }

/* panel-110: Fee reserve */
.fr-poll { max-width: 220px; margin-bottom: 16px; display: block; }
.fr-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  margin: 12px 0 8px;
}
.fr-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 14px 12px;
  background: var(--surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.fr-card.fr-on {
  border-color: #2f9e6b;
  box-shadow: 0 0 0 1px #2f9e6b44;
}
.fr-card.fr-off { opacity: 0.92; }
.fr-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.fr-name { font-weight: 700; font-size: 16px; }
.fr-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.fr-fields label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.fr-fields input {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
}
.fr-live {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  margin-bottom: 10px;
}
.fr-live .val { font-weight: 600; font-size: 14px; }
.fr-meta { display: grid; gap: 2px; }
.fr-err { color: #f1c4c4; }
.fr-log { margin: 8px 0 0; padding-left: 18px; color: var(--muted); font-size: 13px; }
.fr-log li { margin: 4px 0; }

.fr-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}
.fr-toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.fr-toggle-ui {
  position: relative;
  width: 72px;
  height: 36px;
  border-radius: 999px;
  background: #3a4256;
  border: 1px solid #5b6578;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #c8d0e0;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.fr-toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e8edf7;
  box-shadow: 0 1px 4px #0008;
  transition: left 0.15s ease;
}
.fr-toggle-on { opacity: 0.35; }
.fr-toggle-off { opacity: 1; }
.fr-toggle-input:checked + .fr-toggle-ui {
  background: #1e6b48;
  border-color: #2f9e6b;
  color: #c6f0d9;
}
.fr-toggle-input:checked + .fr-toggle-ui .fr-toggle-knob { left: 39px; }
.fr-toggle-input:checked + .fr-toggle-ui .fr-toggle-on { opacity: 1; }
.fr-toggle-input:checked + .fr-toggle-ui .fr-toggle-off { opacity: 0.35; }
.fr-toggle-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.fr-card.fr-on .fr-toggle-label { color: #2f9e6b; }
@media (max-width: 640px) {
  .fr-fields { grid-template-columns: 1fr; }
  .fr-live { grid-template-columns: 1fr 1fr; }
}

/* panel-113: Banding akun month-over-month */
.rpt-compare-table.rpt-mom-on th.rpt-mom-col,
.rpt-compare-table.rpt-mom-on td.rpt-mom-col {
  white-space: nowrap;
}
.rpt-mom-hist {
  display: block;
  margin-top: 2px;
  font-weight: 500;
  letter-spacing: 0.01em;
}


/* panel-114: mode ringan (mobile / future-proof) */
.light-mode-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
  color: #c9d6f0;
  border: 1px solid #3a4a66;
  background: #1a2233;
  vertical-align: middle;
}
body.tp-light .light-mode-badge { display: inline-block; }
#light-mode-toggle.on-light {
  border-color: #3a5a8a;
  color: #c9d6f0;
  background: #1a2233;
}
@media (max-width: 640px) {
  #light-mode-toggle {
    font-size: 12px;
    padding: 5px 8px;
  }
}


/* ---------------------------------------------------------------------------
   panel-121: dasbor atas lebih rapat — kartu ringkas di kiri, daftar Sisa USDT
   per akun sendiri di kanan, PnL terbuka + direalisasi satu kartu, filter mode
   + pair satu baris, tombol massal di kanan. Tabel Posisi naik ke atas.
--------------------------------------------------------------------------- */
.light-mode-badge[hidden] { display: none; }
.dash-top .card-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.dash-top .card-hd .kicker { margin: 0; }
.dash-top .card-hd .btn.small { padding: 2px 8px; font-size: 11px; min-height: 0; }
.dash-top .val { white-space: nowrap; font-variant-numeric: tabular-nums; }
.dash-pnl .pnl-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}
.dash-pnl .pnl-half + .pnl-half {
  border-left: 1px solid var(--line);
  padding-left: 10px;
}
.dash-usdt .acct-mini { margin-top: 6px; }
.dash-usdt .acct-mini li {
  font-size: 12px;
  padding: 2px 0;
  line-height: 1.35;
}
.dash-usdt .acct-mini li span { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pair-filter-sep { display: none; }

@media (min-width: 901px) {
  .status-quad.dash-top {
    grid-template-columns:
      minmax(0, 1.15fr) repeat(3, minmax(0, 1fr)) minmax(200px, 1fr) minmax(215px, 1.1fr);
    grid-template-areas:
      "stat dep cash port watch usdt"
      "stat cex pnl  pnl  watch usdt";
    align-items: stretch;
    gap: 8px;
    margin-bottom: 8px;
  }
  .dash-status { grid-area: stat; }
  .dash-dep { grid-area: dep; }
  .dash-cash { grid-area: cash; }
  .dash-port { grid-area: port; }
  .dash-cex { grid-area: cex; }
  .dash-pnl { grid-area: pnl; }
  .dash-watch { grid-area: watch; }
  .dash-usdt { grid-area: usdt; }
  .dash-top > .card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    margin: 0;
  }
  .dash-top > .dash-watch,
  .dash-top > .dash-usdt { justify-content: flex-start; }
  .dash-top .kicker { font-size: 11px; margin-bottom: 2px; }
  .dash-top .val { font-size: 17px; }
  .dash-status .status-head { align-items: flex-start; gap: 6px; }
  .dash-status .status-head h2 { font-size: 15px; line-height: 1.3; }
  .dash-status .light-mode-badge { margin: 4px 0 0; }
  .dash-watch .watch-list { margin-top: 4px; gap: 2px; }
  .dash-watch .watch-row { font-size: 12px; line-height: 1.25; gap: 4px 6px; }
  .dash-watch .watch-chg { min-width: 3.8em; }
  .dash-watch .watch-add { margin-top: 6px; }
  .dash-watch .watch-add input { padding: 3px 6px; }
  .dash-watch .watch-add .btn.small { padding: 2px 8px; }
  .dash-usdt .acct-mini li { font-size: 11.5px; padding: 1px 0; }

  /* Posisi: judul kecil, lalu mode + pair + tombol massal satu baris */
  .pos-card { padding-top: 10px; }
  .pos-card .pair-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-bottom: 6px;
  }
  .pos-card .pair-head > .kicker { flex: 1 1 auto; margin: 0; order: 1; }
  .pos-card .pair-filters {
    order: 3;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    width: 100%;
    flex: 0 0 100%;
    min-width: 0;
  }
  .pos-card .pair-filters .tx-pills { margin: 0; }
  .pos-card .pair-filter-sep {
    display: inline-block;
    width: 1px;
    height: 20px;
    background: var(--line);
    margin: 0 2px;
  }
  .pos-card .tx-pill,
  .pos-card .pair-sym-pills .tx-pill,
  .pos-card #pair-status-pills .tx-pill { padding: 3px 10px; font-size: 12px; }
  .pos-card .bulk-bar {
    order: 2;
    width: auto;
    margin: 0 0 0 auto;
    flex: 0 0 auto;
    gap: 6px;
  }
  .pos-card .bulk-bar .btn { min-height: 28px; padding: 3px 10px; }
  .pos-card .bulk-bar .bulk-hint { display: none; }
}

/* layar laptop kecil: 3 kolom kartu + Sisa USDT tetap di kanan */
@media (min-width: 901px) and (max-width: 1199px) {
  .status-quad.dash-top {
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(200px, 1fr);
    grid-template-areas:
      "stat dep   cash  usdt"
      "port cex   watch usdt"
      "pnl  pnl   watch usdt";
  }
}

/* HP / tablet: tumpuk rapi, angka kecil 2 kolom */
@media (max-width: 900px) {
  .status-quad.dash-top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "stat  stat"
      "dep   cash"
      "port  cex"
      "pnl   pnl"
      "usdt  watch";
    gap: 8px;
  }
  .dash-status { grid-area: stat; }
  .dash-dep { grid-area: dep; }
  .dash-cash { grid-area: cash; }
  .dash-port { grid-area: port; }
  .dash-cex { grid-area: cex; }
  .dash-pnl { grid-area: pnl; }
  .dash-watch { grid-area: watch; }
  .dash-usdt { grid-area: usdt; }
  .dash-top > .card { min-width: 0; margin: 0; padding: 10px 12px; }
  .dash-top .val { font-size: 17px; }
  .dash-top .muted.small { display: none; }
  .dash-status .status-head h2 { font-size: 16px; }
  .pos-card .pair-filters { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; }
  .pos-card .pair-filter-sep { display: none; }
}
@media (max-width: 640px) {
  .status-quad.dash-top {
    grid-template-areas:
      "stat  stat"
      "dep   cash"
      "port  cex"
      "pnl   pnl"
      "usdt  usdt"
      "watch watch";
  }
  .dash-top .val { font-size: 15px; }
  .dash-top .kicker { font-size: 10.5px; }
}

/* panel-121: cegah konten utama melebar melewati layar di laptop kecil (~1024px) —
   tabel posisi tetap geser di dalam .table-wrap, bukan seluruh halaman */
.port-main.wrap > * { min-width: 0; }
@media (min-width: 901px) and (max-width: 1199px) {
  .status-quad.dash-top { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(180px, 1fr); }
}

/* panel-121: kartu Status — badge LIVE di pojok kanan, judul + badge "Mode ringan"
   pakai lebar penuh kartu (tidak turun 3–4 baris) */
@media (min-width: 901px) {
  .dash-status .status-head { position: relative; display: block; }
  .dash-status .status-head > div { padding-right: 0; }
  .dash-status .status-head .kicker { padding-right: 52px; min-height: 18px; }
  .dash-status #mode-badge { position: absolute; top: -2px; right: 0; }
  .dash-status .light-mode-badge:not([hidden]) {
    display: table;
    margin: 3px 0 2px;
    padding: 1px 7px;
    font-size: 9.5px;
    white-space: nowrap;
  }
}
@media (min-width: 901px) {
  .dash-status #mode-badge { font-size: 10px; padding: 2px 8px; line-height: 1.4; }
  .dash-status .light-mode-badge:not([hidden]) { margin-top: 6px; }
}


/* panel-127: template slot re-entry (chip + preview popover / panel) */
.slot-tpl {
  position: relative;
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #121824;
  display: grid;
  gap: 8px;
}
.slot-tpl-hd { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.slot-tpl-hd .kicker { margin: 0; }
.slot-tpl-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tpl-chip {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  font: inherit; font-size: 13px;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.tpl-chip:hover, .tpl-chip:focus-visible { border-color: var(--acc); outline: none; }
.tpl-chip.on { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc) inset; }
.tpl-chip-n {
  min-width: 18px; padding: 0 5px;
  border-radius: 999px;
  background: #1d2533;
  color: var(--muted);
  font-size: 11px; text-align: center;
}
.slot-tpl-pop {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0f141d;
  display: grid; gap: 8px;
}
.slot-tpl-pop[hidden] { display: none; }
.slot-tpl-pop.float {
  position: absolute;
  z-index: 40;
  width: 360px; max-width: calc(100% - 4px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
}
.slot-tpl-pop-hd { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; overflow-wrap: anywhere; }
.slot-tpl-pop-body { max-height: 300px; overflow: auto; }
.slot-tpl-pop-body p { margin: 0; }
.slot-tpl-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.slot-tpl-tbl th, .slot-tpl-tbl td { padding: 3px 6px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.slot-tpl-tbl th { color: var(--muted); font-weight: 600; font-size: 11.5px; }
.slot-tpl-tbl th:first-child, .slot-tpl-tbl td:first-child { text-align: left; }
.slot-tpl-tbl tr:last-child td { border-bottom: 0; }
.slot-tpl-pop-act { display: flex; flex-wrap: wrap; gap: 6px; }
.form .slot-tpl-pop-act .btn { margin: 0; width: auto; }
.slot-tpl-pop-act #slot-tpl-del { margin-left: auto; }
.slot-tpl-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.slot-tpl-row input[type="text"] { flex: 1 1 220px; width: auto; min-width: 0; }
.form .slot-tpl-row .btn { margin: 0; white-space: nowrap; }
.slot-tpl-note { margin: 0; }
.slot-tpl-note.ok { color: #c6f0d9; }
.slot-tpl-note.warn { color: #f0e2b8; }
.slot-tpl-note.err { color: #f1c4c4; }
@media (max-width: 640px) {
  .slot-tpl-row { flex-direction: column; align-items: stretch; }
  .slot-tpl-row input[type="text"] { flex: 1 1 auto; width: 100%; }
  .form .slot-tpl-row .btn { width: 100%; }
  .tpl-chip { padding: 8px 12px; font-size: 14px; }
  .slot-tpl-pop.float { position: static; width: auto; max-width: none; box-shadow: none; }
  .form .slot-tpl-pop-act .btn { flex: 1 1 30%; min-height: 40px; }
  .slot-tpl-pop-act #slot-tpl-del { margin-left: 0; }
}

/* panel-134: tombol Detail di kolom Akun, tepat setelah nama akun */
.cell-akun .akun-with-detail {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}
.cell-akun .akun-name { overflow-wrap: anywhere; }
.cell-akun .btn.small { flex: 0 0 auto; }
@media (max-width: 720px) {
  table.stack td.cell-akun { align-items: center; }
  table.stack td.cell-akun .akun-with-detail {
    flex: 1 1 auto;
    justify-content: flex-end;
  }
  table.stack td.cell-akun .btn.small {
    flex: 0 0 auto;
    width: auto;
  }
}

/* panel-135: Per ticker breakdown on Laporan */
.port-shell.rpt-ticker .port-side { display: block; }
.rpt-ticker-table td:first-child { white-space: nowrap; }
.rpt-ticker-table td:nth-child(2),
.rpt-ticker-table td:nth-child(3),
.rpt-ticker-table td:nth-child(4) { text-align: right; }
.rpt-ticker-table th:nth-child(2),
.rpt-ticker-table th:nth-child(3),
.rpt-ticker-table th:nth-child(4) { text-align: right; }

/* ==========================================================================
   Tema warna TERANG — html[data-theme="light"] (static/theme.js, localStorage
   "tp_color_theme"). Default tetap gelap (:root di atas).
   CATATAN: ini BUKAN "Mode ringan" (body.tp-light = payload polling ringan).
   ========================================================================== */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f5f9;
  --card: #ffffff;
  --line: #d5dce7;
  --text: #18202d;
  --muted: #5a677d;
  --acc: #2563eb;
  --acc-press: #1d4ed8;
  --ok: #1f8a5a;
  --danger: #c93c3c;
  --warn: #b07a12;
  --top-bg: #ffffff;
  --surface: #f7f9fc;
  --input-bg: #ffffff;
  --btn-bg: #eef1f6;
  --side-bg: #ffffff;
  --elev: #eef2f7;
}
html[data-theme="light"] .boot-loading { color: #2c4a7a; border-bottom-color: #c9d6ea; background: #eaf1fc; }
html[data-theme="light"] .top { box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06); }
html[data-theme="light"] .alert { background: #eef2f7; }
html[data-theme="light"] .alert.error { border-color: #e3a5a5; background: #fdecec; color: #8f1f1f; }
html[data-theme="light"] .alert.ok { border-color: #9fd6b9; background: #e8f6ee; color: #17603d; }
html[data-theme="light"] .alert.warn { border-color: #e5cf95; background: #fdf5e2; color: #7a5410; }
html[data-theme="light"] .badge.test { color: #17603d; border-color: #9fd6b9; background: #e8f6ee; }
html[data-theme="light"] .badge.live { color: #8f1f1f; border-color: #e3a5a5; background: #fdecec; }
html[data-theme="light"] tr.row-edit td { background: #e8f0fb; }
html[data-theme="light"] tr.row-run td { background: #e8f6ee; }
html[data-theme="light"] tr.row-wait td { background: #fdf5e2; }
html[data-theme="light"] .pnl-pos { color: #15803d; }
html[data-theme="light"] .pnl-neg { color: #c62828; }
html[data-theme="light"] .phase-wait { color: #b7791f; }
html[data-theme="light"] .phase-idle { color: #2b7f81; }
html[data-theme="light"] .phase-open.phase-full,
html[data-theme="light"] .phase-full { color: #9b30c9; }
html[data-theme="light"] .acct-mini li { border-bottom-color: var(--line); }
html[data-theme="light"] .tx-pill.on,
html[data-theme="light"] .tx-chip.on { background: #ebe8ff; border-color: #6d5bff; color: #4433c9; }
html[data-theme="light"] .pair-sym-pills .tx-pill.on { background: var(--acc); border-color: var(--acc); color: #fff; }
html[data-theme="light"] .tx-table thead th { background: #dff3f8; color: #0d5c6e; }
html[data-theme="light"] .tx-badge.beli { background: #e3f5ea; color: #15803d; }
html[data-theme="light"] .tx-badge.jual { background: #fdecec; color: #b42318; }
html[data-theme="light"] .tx-badge.closed { background: #eceff4; color: #3c4657; }
html[data-theme="light"] .tx-badge.pindah { background: #f0f1f4; color: #667085; }
html[data-theme="light"] .port-body { background: var(--bg); }
html[data-theme="light"] .port-seg-btn.on { background: #ffffff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12); }
html[data-theme="light"] .port-item.active { background: #e3ecfa; }
html[data-theme="light"] .port-move-btn:hover:not(:disabled) { background: var(--elev); color: var(--text); }
html[data-theme="light"] tr.pair-sec td { background: #eef2f7; color: #4b5870; }
html[data-theme="light"] tr.pair-sec[data-sec="futures"] td { border-top-color: #c5cede; }
@media (max-width: 640px) {
  html[data-theme="light"] table.stack tr.pair-sec[data-sec="futures"] td { border-top-color: #c5cede; }
}
html[data-theme="light"] .tp-modal { background: rgba(15, 23, 42, 0.38); }
@media (min-width: 901px) {
  html[data-theme="light"] .port-main .lot-tip { border-bottom-color: rgba(15, 23, 42, 0.3); }
}
html[data-theme="light"] .rule-pop { background: #ffffff; border-color: var(--line); box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16); }
html[data-theme="light"] .rule-pop-slot { color: #2d3748; }
html[data-theme="light"] .rpt-tab.on { background: #e3ecfa; border-color: #9db6dd; }
html[data-theme="light"] .rpt-table thead th { background: #c9f1f7; color: #083b45; }
html[data-theme="light"] .rpt-table tbody tr:hover { background: #f1f5fb; }
html[data-theme="light"] .rpt-table tbody tr.rpt-row.open { background: #e3ecfa; }
html[data-theme="light"] .rpt-table tbody tr.rpt-row.open:hover { background: #d9e5f8; }
html[data-theme="light"] .rpt-table tbody tr.rpt-detail,
html[data-theme="light"] .rpt-table tbody tr.rpt-detail:hover { background: #f7f9fc; }
html[data-theme="light"] .rpt-detail-table thead th { background: #eef2f7; }
html[data-theme="light"] .rpt-detail-table td { border-bottom-color: var(--line); }
html[data-theme="light"] .rpt-detail-table tbody tr:hover { background: #f1f5fb; }
html[data-theme="light"] .rpt-kind-beli { background: #e3f5ea; color: #15803d; }
html[data-theme="light"] .rpt-kind-jual { background: #fdecef; color: #b4233a; }
html[data-theme="light"] .rpt-kind-closed { background: #e5edff; color: #2f5bd3; }
html[data-theme="light"] .rpt-kind-setor { background: #e0f7f3; color: #0f766e; }
html[data-theme="light"] .rpt-kind-tarik { background: #fdf0e1; color: #b45309; }
html[data-theme="light"] .pwa-tip { background: #ffffff; box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16); }
html[data-theme="light"] .ptr-pill { background: #ffffff; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.14); }
html[data-theme="light"] .rpt-mode { background: #ffffff; }
html[data-theme="light"] .rpt-mode.on { background: #dbeafe; color: #1e3a8a; border-color: #3b82f6; }
html[data-theme="light"] .rpt-seg-btn.on { background: #dbeafe; color: #1e3a8a; }
html[data-theme="light"] .rpt-cmp-row.overview { background: #eef4fd; }
html[data-theme="light"] .rpt-cmp-row.overview:hover { background: #e3ecfa; }
html[data-theme="light"] .rpt-badge-aktif { background: #dbeafe; color: #1e40af; }
html[data-theme="light"] .rpt-badge-profit { background: #e3f5ea; color: #15803d; }
html[data-theme="light"] .rpt-badge-efisien { background: #fdf0e1; color: #b45309; }
html[data-theme="light"] .bulk-bar .bulk-stop { border-color: #e3a5a5; color: #b42318; background: #fdecec; }
html[data-theme="light"] .bulk-bar .bulk-stop:hover:not(:disabled) { background: #fadcdc; }
html[data-theme="light"] .watch-x:hover,
html[data-theme="light"] #watch-err,
html[data-theme="light"] .fr-err { color: #b42318; }
html[data-theme="light"] .fr-toggle-ui { background: #d5dce7; border-color: #b8c2d3; color: #3c4657; }
html[data-theme="light"] .fr-toggle-knob { background: #ffffff; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.3); }
html[data-theme="light"] .fr-toggle-input:checked + .fr-toggle-ui { background: #2f9e6b; border-color: #2f9e6b; color: #ffffff; }
html[data-theme="light"] .fr-card.fr-on .fr-toggle-label { color: #1f8a5a; }
html[data-theme="light"] .light-mode-badge,
html[data-theme="light"] #light-mode-toggle.on-light { color: #2c4a7a; border-color: #b8c9e6; background: #eaf1fc; }
html[data-theme="light"] .slot-tpl { background: #f7f9fc; }
html[data-theme="light"] .tpl-chip-n { background: #eef2f7; }
html[data-theme="light"] .slot-tpl-pop { background: #ffffff; }
html[data-theme="light"] .slot-tpl-pop.float { box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16); }
html[data-theme="light"] .slot-tpl-note.ok { color: #17603d; }
html[data-theme="light"] .slot-tpl-note.warn { color: #7a5410; }
html[data-theme="light"] .slot-tpl-note.err { color: #b42318; }

/* Tombol tema (Terang / Gelap) — label dipilih CSS supaya tidak berkedip */
.theme-toggle { white-space: nowrap; }
.theme-toggle .tt-to-dark { display: none; }
html[data-theme="light"] .theme-toggle .tt-to-light { display: none; }
html[data-theme="light"] .theme-toggle .tt-to-dark { display: inline; }
.theme-toggle-float {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: 12px;
  z-index: 50;
}