/* ============================================================
   RADAR — papan pantau koin Pons
   Sengaja dibuat beda dari landing: padat, seperti terminal data,
   bukan halaman jualan.
   ============================================================ */
.page-radar { background:
  radial-gradient(120% 70% at 85% -10%, rgba(180,20,30,.20), transparent 60%),
  var(--bg); min-height: 100vh; }

.rd-wrap { max-width: var(--max); margin: 0 auto; padding: 96px clamp(18px,4vw,48px) 90px; }

/* ---------- kepala ---------- */
.rd-head { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: 40px;
  align-items: end; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.rd-head h1 { margin: 12px 0 14px; font: 900 clamp(34px,4.6vw,62px)/.95 var(--f-display); text-transform: uppercase; color: #fff; }
.rd-head h1 em { font-style: normal; background: linear-gradient(180deg,#ffd9d4,var(--ice));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.rd-head .lead { font-size: 15px; max-width: 54ch; }

.rd-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.rd-stats div { padding: 14px 14px 12px; border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(10,23,51,.6), rgba(12,3,4,.6));
  clip-path: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }
.rd-stats b { display: block; font: 900 30px/1 var(--f-display); color: #fff; font-variant-numeric: tabular-nums; }
.rd-stats span { display: block; margin-top: 5px; font: 600 9px/1.3 var(--f-ui);
  letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }

/* ---------- baris alat ---------- */
.rd-bar-top { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin: 22px 0 12px; }
.rd-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.rd-tab { height: 34px; padding: 0 15px; border: 1px solid var(--line); background: transparent;
  color: var(--silver); font: 600 11px/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.rd-tab:hover { color: #fff; border-color: var(--line-2); }
.rd-tab.on { color: #0b0304; background: var(--ice); border-color: var(--ice); }
.rd-time { font-size: 11px; color: var(--faint); letter-spacing: .06em; }

.rd-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 14px;
  font: 500 10.5px/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.rd-legend span { display: inline-flex; align-items: center; gap: 7px; }
.rd-legend i { width: 16px; height: 3px; }
.sw-bar { background: linear-gradient(90deg,var(--ultra),var(--ice)); }
.sw-close { background: var(--amber); }
.sw-grad { background: #ff8a7a; box-shadow: 0 0 8px rgba(255,120,110,.7); }

/* ---------- daftar ---------- */
.rd-list { display: grid; gap: 6px; transition: opacity .2s; }
.rd-list.busy { opacity: .55; }
.rd-empty { padding: 48px 16px; text-align: center; color: var(--mute); font-size: 14px; }

.rd-row { display: grid; align-items: center; gap: 14px; padding: 12px 16px;
  grid-template-columns: 38px minmax(0,1.5fr) minmax(130px,1.6fr) 130px 110px 96px;
  border: 1px solid var(--line); background: rgba(8,16,38,.45);
  text-decoration: none; color: inherit; transition: border-color .15s, background .15s, transform .15s; }
.rd-row:hover { border-color: var(--line-2); background: rgba(40,8,10,.6); transform: translateX(2px); }
.rd-row.is-close { border-left: 2px solid var(--amber); }
.rd-row.is-grad { border-left: 2px solid #ff8a7a; }

.rd-tok { width: 38px; height: 38px; display: grid; place-items: center; flex: none;
  font: 700 12px/1 var(--f-ui); color: #fff; letter-spacing: .04em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.rd-id { display: grid; gap: 3px; min-width: 0; }
.rd-id b { font: 700 15px/1.2 var(--f-ui); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-id small { font: 500 11.5px/1 var(--f-mono); color: var(--mute); }

.rd-bar { position: relative; height: 22px; background: rgba(255,59,59,.09);
  border: 1px solid var(--line); overflow: hidden; }
.rd-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg,var(--ultra),var(--ice)); }
.rd-row.is-close .rd-bar i { background: linear-gradient(90deg,#d08b2a,var(--amber)); }
.rd-row.is-grad .rd-bar i { background: linear-gradient(90deg,#b82319,#ff8a7a); }
.rd-bar em { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal;
  font: 600 10.5px/1 var(--f-mono); letter-spacing: .08em; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.65); }

.rd-eth { font: 500 13px/1.3 var(--f-mono); color: #fff; text-align: right; }
.rd-eth i { display: block; font-style: normal; font-size: 10.5px; color: var(--faint); }
.rd-vol { font: 500 13px/1 var(--f-mono); color: var(--ice); text-align: right; }
.rd-vol i { font-style: normal; font-size: 10px; color: var(--faint); }
.rd-vol.muted { color: var(--faint); }
.rd-addr { font-size: 11px; color: var(--faint); text-align: right; }

.rd-note { margin: 26px 0 0; font-size: 12px; line-height: 1.6; color: var(--faint); max-width: 78ch; }

/* ---------- layar sedang & kecil ---------- */
@media (max-width: 1040px) {
  .rd-head { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .rd-row { grid-template-columns: 34px minmax(0,1.3fr) minmax(110px,1.4fr) 110px 92px; }
  .rd-addr { display: none; }
}
@media (max-width: 720px) {
  .rd-wrap { padding-top: 84px; }
  .rd-stats { grid-template-columns: repeat(2,1fr); }
  .rd-row { grid-template-columns: 34px minmax(0,1fr) 88px; gap: 10px; row-gap: 8px; }
  .rd-bar { grid-column: 1 / -1; }
  .rd-eth { text-align: left; grid-column: 2 / 3; }
  .rd-vol { grid-column: 3 / 4; }
}