/* ==========================================================================
   Trading OS — gaya khusus per halaman
   ========================================================================== */

/* ==========================================================================
   OVERVIEW
   ========================================================================== */

.overview {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: var(--sp-4) var(--sp-4) var(--sp-5);
}

/* --- KPI strip --- */

.kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--edge);
  border: 1px solid var(--edge);
}

.kpi {
  padding: 13px var(--sp-4) 14px;
  background: var(--bg-panel);
}

.kpi__label {
  display: block;
  margin-bottom: 8px;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--tx-faint);
}

.kpi__value {
  display: block;
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--tx-hi);
}

.kpi__note {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-sm);
  letter-spacing: .04em;
  color: var(--tx-dim);
}

.kpi--accent .kpi__value { color: var(--amber); }

/* --- dua kolom --- */

.cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 286px;
  gap: 14px;
}

.cols__stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

/* --- meter bersegmen --- */

.meter { padding: 9px var(--sp-3); }
.meter + .meter { border-top: 1px solid var(--grid-soft); }

.meter__head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: var(--fs-sm);
}

.meter__label { color: var(--tx-faint); letter-spacing: .08em; }
.meter__value { color: var(--tx-hi); }

.bar { display: flex; gap: 2px; }

.bar span {
  flex: 1;
  height: 7px;
  background: var(--bg-hi);
}

.bar span.is-filled { background: var(--amber); box-shadow: 0 0 7px rgba(255, 180, 84, .5); }
.bar--cyan span.is-filled { background: var(--cyan); box-shadow: 0 0 7px rgba(92, 213, 224, .45); }
.bar--up span.is-filled { background: var(--up); box-shadow: 0 0 7px rgba(63, 217, 127, .45); }

/* --- daftar engine --- */

.engine {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 6px var(--sp-3);
  font-size: var(--fs-md);
}

.engine + .engine { border-top: 1px solid var(--grid-soft); }
.engine__name { color: var(--tx); letter-spacing: .04em; }

.engine__status {
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.engine__status--ok   { color: var(--up); }
.engine__status--mock { color: var(--amber); }
.engine__status--idle,
.engine__status--off  { color: var(--tx-faint); }

/* --- event log --- */

.log {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px var(--sp-3) 10px;
  font-size: 10.5px;
}

.log__row {
  display: grid;
  grid-template-columns: 62px 52px 1fr;
  gap: var(--sp-2);
}

.log__time { color: var(--tx-faint); }

.log__tag {
  padding-top: 1px;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .1em;
}

.log__tag--i { color: var(--cyan-dim); }
.log__tag--k { color: var(--amber-dim); }
.log__tag--g { color: var(--up); }
.log__msg { color: var(--tx-dim); }

/* ==========================================================================
   TRADING
   ========================================================================== */

.trading {
  flex: 1;
  display: grid;
  min-height: 0;
  grid-template-columns: var(--watch-w) minmax(0, 1fr) var(--ticket-w);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "watch chart ticket"
    "watch tabs  ticket";
}

.trading__watch {
  grid-area: watch;
  min-width: 0;
  background: var(--bg-panel);
  border-right: 1px solid var(--edge);
}

.trading__chart {
  grid-area: chart;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.trading__tabs {
  grid-area: tabs;
  min-width: 0;
  background: var(--bg-panel);
  border-top: 1px solid var(--edge);
}

.trading__ticket {
  grid-area: ticket;
  min-width: 0;
  background: var(--bg-panel);
  border-left: 1px solid var(--edge);
}

/* --- mode manual / auto --- */

.mode { display: flex; }

.mode button {
  padding: 4px var(--sp-3);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tx-dim);
  background: var(--bg-raise);
  border: 1px solid var(--grid);
  cursor: pointer;
}

.mode button + button { border-left: none; }

.mode button[aria-pressed="true"] {
  color: var(--amber);
  background: rgba(255, 180, 84, .13);
  border-color: var(--amber-dim);
}

/* --- watchlist --- */

.wl__search {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 7px var(--sp-3);
  font-size: var(--fs-md);
  color: var(--tx-faint);
  border-bottom: 1px solid var(--grid);
}

.wl__search span { color: var(--amber-dim); }

.wl__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px var(--sp-2);
  padding: 7px var(--sp-3);
  border-bottom: 1px solid var(--grid-soft);
}

.wl__row:hover { background: var(--bg-raise); }
.wl__row:focus-visible { outline-offset: -1px; }

.wl__row--active {
  padding-left: 10px;
  background: linear-gradient(90deg, rgba(255, 180, 84, .1), transparent);
  border-left: 2px solid var(--amber);
}

.wl__symbol { font-size: var(--fs-md); font-weight: 500; letter-spacing: .05em; color: var(--tx-hi); }
.wl__price  { font-size: var(--fs-md); text-align: right; color: var(--tx-hi); }
.wl__name   { font-size: 9.5px; letter-spacing: .06em; color: var(--tx-faint); }
.wl__change { font-size: 9.5px; text-align: right; }

/* --- toolbar chart --- */

.charttools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: 6px var(--sp-3);
  border-bottom: 1px solid var(--grid);
}

.charttools .seg button.tool { padding: 3px 7px; font-size: var(--fs-md); line-height: 1; }

.indicators {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  padding: 6px var(--sp-3);
  border-bottom: 1px solid var(--grid);
}

.ind {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 7px;
  font-size: 9.5px;
  letter-spacing: .1em;
  color: var(--tx-dim);
  border: 1px solid var(--grid);
}

.ind__swatch { width: 12px; height: 2px; }
.ind--add { color: var(--tx-faint); border-style: dashed; }

.symhead {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: 9px var(--sp-3) 7px;
}

.symhead__symbol { font-size: var(--fs-lg); font-weight: 600; letter-spacing: .12em; color: var(--tx-hi); }
.symhead__price  { font-size: var(--fs-lg); }
.symhead__change { font-size: 10.5px; }
.symhead__ohlc   { font-size: var(--fs-sm); letter-spacing: .06em; color: var(--tx-faint); }

.chartbox {
  position: relative;
  flex: 1;
  min-height: 380px;
  background: linear-gradient(rgba(255, 180, 84, .018), transparent 55%);
}

/* --- tab bawah --- */

.tabs {
  display: flex;
  border-bottom: 1px solid var(--grid);
}

.tabs button {
  padding: 8px var(--sp-3);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tx-dim);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.tabs button:hover { color: var(--amber); }
.tabs button:focus-visible { outline-offset: -2px; }

.tabs button[aria-selected="true"] {
  color: var(--amber);
  background: rgba(255, 180, 84, .05);
  border-bottom-color: var(--amber);
}

.tabs__spacer { flex: 1; }

.tabs__agg {
  padding: 8px var(--sp-3);
  font-size: var(--fs-sm);
  letter-spacing: .08em;
  color: var(--tx-faint);
}

/* --- order ticket --- */

.ticket__types {
  display: flex;
  gap: 1px;
  padding: 8px var(--sp-3) 0;
}

.ticket__types button {
  flex: 1;
  padding: 4px 0;
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tx-dim);
  background: var(--bg-raise);
  border: 1px solid var(--grid);
  cursor: pointer;
}

.ticket__types button[aria-pressed="true"] {
  color: var(--amber);
  background: rgba(255, 180, 84, .12);
  border-color: var(--amber-dim);
}

.bidask {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--sp-2);
  padding: var(--sp-3);
}

.bidask button {
  padding: 11px 6px;
  text-align: center;
  background: transparent;
  border: 1px solid;
  cursor: pointer;
}

.bidask button span {
  display: block;
  margin-bottom: 4px;
  font-size: var(--fs-xs);
  letter-spacing: .2em;
  opacity: .75;
}

.bidask button b { display: block; font-size: 16px; font-weight: 500; }

.bidask__sell { color: var(--down); border-color: var(--down-dim); }
.bidask__sell:hover { background: rgba(255, 94, 82, .1); }
.bidask__buy  { color: var(--up); border-color: var(--up-dim); }
.bidask__buy:hover { background: rgba(63, 217, 127, .1); }

.bidask__spread {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.bidask__spread i { font-style: normal; font-size: 8.5px; letter-spacing: .16em; color: var(--tx-faint); }
.bidask__spread b { font-size: var(--fs-base); font-weight: 500; color: var(--amber); }

.field {
  display: grid;
  grid-template-columns: 74px 1fr;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px var(--sp-3);
}

.field__label {
  font-size: 9.5px;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--tx-faint);
}

.field__hint {
  grid-column: 2;
  justify-self: start;
  margin-top: -2px;
  padding: 1px 6px;
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  color: var(--cyan-dim);
  border: 1px dashed var(--cyan-dim);
}

.input {
  display: flex;
  background: var(--bg);
  border: 1px solid var(--grid);
}

.input:focus-within { border-color: var(--amber-dim); }

.input input {
  width: 100%;
  min-width: 0;
  padding: 5px 8px;
  font-size: var(--fs-base);
  font-variant-numeric: tabular-nums;
  color: var(--tx-hi);
  background: transparent;
  border: none;
}

.input input:focus { outline: none; }

.input__unit {
  align-self: center;
  padding: 5px 8px;
  font-size: 9.5px;
  letter-spacing: .1em;
  color: var(--tx-faint);
}

.input button {
  width: 24px;
  font-size: 13px;
  line-height: 1;
  color: var(--tx-dim);
  background: var(--bg-raise);
  border: none;
  border-left: 1px solid var(--grid);
  cursor: pointer;
}

.input button:hover { color: var(--amber); }
.input button:focus-visible { outline-offset: -1px; }

.calc {
  margin-top: 6px;
  padding: 9px var(--sp-3) 11px;
  border-top: 1px solid var(--grid);
}

.calc__row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 3px 0;
  font-size: var(--fs-md);
}

.calc__k { color: var(--tx-faint); letter-spacing: .06em; }
.calc__v { color: var(--tx-hi); }
.calc__row--total .calc__v { font-size: 13px; color: var(--amber); }

.guard {
  padding: 9px var(--sp-3) 11px;
  border-top: 1px solid var(--grid);
}

.guard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.guard__label { color: var(--tx-faint); }
.guard__verdict { color: var(--up); }

.guard__list { display: flex; flex-direction: column; gap: 3px; }

.guard__item {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  font-size: 10.5px;
  color: var(--tx-dim);
}

.guard__value { color: var(--up); }
.guard__value--warn { color: var(--amber); }

/* --- depth ladder --- */

.dom { border-top: 1px solid var(--grid); }

.dom__row {
  display: grid;
  grid-template-columns: 1fr 74px 1fr;
  align-items: center;
  gap: 6px;
  padding: 2px var(--sp-3);
  font-size: 10.5px;
}

.dom__price { text-align: center; color: var(--tx-hi); }

.dom__bid,
.dom__ask { position: relative; height: 11px; }

.dom__bid .dom__fill {
  position: absolute;
  inset: 0 0 0 auto;
  background: rgba(63, 217, 127, .16);
}

.dom__ask .dom__fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: rgba(255, 94, 82, .16);
}

.dom__vol {
  position: relative;
  display: block;
  padding: 0 4px;
  color: var(--tx-dim);
}

.dom__bid .dom__vol { text-align: right; }

.dom__mid {
  display: grid;
  grid-template-columns: 1fr 74px 1fr;
  gap: 6px;
  padding: 3px var(--sp-3);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  color: var(--tx-faint);
  border-block: 1px solid var(--grid);
}

.dom__mid .dom__price { color: var(--amber); }

/* ==========================================================================
   MODUL BELUM DIPASANG & ERROR
   ========================================================================== */

.module {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 56px var(--sp-4);
}

.module__card {
  width: 100%;
  max-width: 620px;
  padding: 28px 30px 30px;
}

.module__eyebrow {
  font-size: var(--fs-xs);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--amber-dim);
}

.module__title {
  margin: 12px 0 14px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tx-hi);
}

.module__summary {
  max-width: 56ch;
  margin-bottom: 22px;
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--tx);
}

.module__rows { border-top: 1px solid var(--grid); }

.module__row {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: var(--sp-3);
  padding: 9px 0;
  border-bottom: 1px solid var(--grid-soft);
  font-size: var(--fs-md);
}

.module__k {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--tx-faint);
  padding-top: 2px;
}

.module__v { color: var(--tx-hi); }
.module__v--dim { color: var(--tx-dim); }

.module__actions {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: 22px;
}

.module__actions a {
  padding: 7px 14px;
  font-size: 9.5px;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--tx-dim);
  border: 1px solid var(--grid);
}

.module__actions a:hover { color: var(--amber); border-color: var(--amber-dim); }
.module__actions a.is-primary { color: var(--amber); border-color: var(--amber-dim); }

/* ==========================================================================
   RESPONSIF
   ========================================================================== */

@media (max-width: 1220px) {
  .trading {
    grid-template-columns: minmax(0, 1fr) var(--ticket-w);
    grid-template-areas:
      "chart ticket"
      "tabs  ticket"
      "watch watch";
  }

  .trading__watch {
    border-right: none;
    border-top: 1px solid var(--edge);
  }

  .cols { grid-template-columns: minmax(0, 1fr); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .trading {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "chart"
      "ticket"
      "tabs"
      "watch";
  }

  .trading__ticket {
    border-left: none;
    border-top: 1px solid var(--edge);
  }

  .kpis { grid-template-columns: 1fr; }
}

/* ==========================================================================
   HALAMAN DAFTAR — Markets, Positions, Orders, History, Accounts
   ========================================================================== */

.page {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: var(--sp-4) var(--sp-4) var(--sp-5);
}

.kpis--wide { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.kpi--sm .kpi__value { font-size: 18px; }

/* --- baris filter --- */

.filters { display: flex; gap: 1px; flex-wrap: wrap; }

.filters a {
  padding: 4px 10px;
  font-size: 9.5px;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--tx-dim);
  background: var(--bg-raise);
  border: 1px solid var(--grid);
}

.filters a:hover { color: var(--amber); border-color: var(--amber-dim); }

.filters a.is-active {
  color: var(--amber);
  background: rgba(255, 180, 84, .12);
  border-color: var(--amber-dim);
}

/* --- pil status --- */

.st {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid;
}

.st--connected { color: var(--up); border-color: rgba(63, 217, 127, .35); }
.st--pending   { color: var(--amber); border-color: var(--amber-dim); border-style: dashed; }
.st--working   { color: var(--cyan); border-color: var(--cyan-dim); }

/* --- kartu akun --- */

.acct {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-3);
  padding: 12px var(--sp-3) 14px;
}

.acct + .acct { border-top: 1px solid var(--grid); }

.acct__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.acct__label { font-size: 13px; letter-spacing: .06em; color: var(--tx-hi); }

.acct__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px var(--sp-4);
}

.acct__field { display: flex; flex-direction: column; gap: 2px; }

.acct__k {
  font-size: var(--fs-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tx-faint);
}

.acct__v { font-size: var(--fs-md); color: var(--tx-hi); }

.acct__actions {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: stretch;
}

.acct__actions .btn-ghost { text-align: center; padding: 4px 10px; }

/* --- alur pairing --- */

.pair { padding: 12px var(--sp-3) 14px; }

.pair__token {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
  padding: 11px 14px;
  background: var(--bg);
  border: 1px dashed var(--amber-dim);
}

.pair__token b {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--amber);
  text-shadow: 0 0 14px rgba(255, 180, 84, .32);
}

.pair__token span { font-size: var(--fs-sm); color: var(--tx-faint); letter-spacing: .08em; }

.pair__note {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--tx-dim);
  max-width: 62ch;
}

.pair__steps { counter-reset: pairstep; display: flex; flex-direction: column; }

.pair__step {
  counter-increment: pairstep;
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--grid-soft);
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--tx);
}

.pair__step::before {
  content: counter(pairstep, decimal-leading-zero);
  padding-top: 2px;
  font-size: 9.5px;
  color: var(--amber-dim);
}

.pair__step em { font-style: normal; color: var(--tx-hi); }

/* --- alasan keluar posisi --- */

.reason {
  padding: 1px 6px;
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tx-dim);
  border: 1px solid var(--grid);
}

.reason--tp { color: var(--up); border-color: rgba(63, 217, 127, .3); }
.reason--sl { color: var(--down); border-color: rgba(255, 94, 82, .3); }

/* --- keadaan kosong di dalam panel --- */

.empty { padding: 38px var(--sp-3); text-align: center; }

.empty__title {
  margin-bottom: 9px;
  font-size: var(--fs-base);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tx-dim);
}

.empty__text {
  max-width: 54ch;
  margin: 0 auto;
  font-size: var(--fs-md);
  line-height: 1.75;
  color: var(--tx-faint);
}

@media (max-width: 1220px) {
  .kpis--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .kpis--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acct { grid-template-columns: minmax(0, 1fr); }
  .acct__actions { flex-direction: row; flex-wrap: wrap; }
}

/* ==========================================================================
   GERBANG — masuk, daftar, penyiapan
   ========================================================================== */

.gate {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5);
  padding: 48px var(--sp-4);
}

.gate__brand {
  display: flex;
  align-items: center;
  gap: 11px;
}

.gate__card { width: 100%; max-width: 400px; }
.gate__card--wide { max-width: 720px; }

.gate__foot {
  font-size: var(--fs-sm);
  letter-spacing: .1em;
  color: var(--tx-faint);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
}

.form--tight { padding: var(--sp-3); }

.form__field { display: flex; flex-direction: column; gap: 5px; }

.form__label {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--tx-faint);
}

.form__input {
  padding: 9px 11px;
  font-size: var(--fs-base);
  color: var(--tx-hi);
  background: var(--bg);
  border: 1px solid var(--grid);
}

.form__input:focus {
  outline: none;
  border-color: var(--amber-dim);
  box-shadow: 0 0 0 1px var(--amber-dim);
}

.form__hint { font-size: var(--fs-sm); color: var(--tx-faint); }
.form__hint--error { color: var(--down); }

.form__notice,
.form__error {
  padding: 9px 12px;
  font-size: var(--fs-md);
  line-height: 1.6;
  border: 1px solid;
}

.form__notice { color: var(--cyan); border-color: var(--cyan-dim); background: rgba(92, 213, 224, .06); }
.form__error  { color: var(--down); border-color: var(--down-dim); background: rgba(255, 94, 82, .06); }

.form__submit {
  margin-top: var(--sp-1);
  padding: 10px 14px;
  font-size: var(--fs-md);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-align: center;
  color: var(--amber);
  background: rgba(255, 180, 84, .1);
  border: 1px solid var(--amber-dim);
  cursor: pointer;
}

.form__submit:hover { background: rgba(255, 180, 84, .18); }

.form__foot {
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--tx-faint);
}

.form__foot a { color: var(--amber); }
.form__foot a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Spanduk pesan di dalam dashboard
   -------------------------------------------------------------------------- */

.banner {
  padding: 10px var(--sp-3);
  font-size: var(--fs-md);
  border: 1px solid;
}

.banner--ok    { color: var(--up); border-color: rgba(63, 217, 127, .3); background: rgba(63, 217, 127, .06); }
.banner--error { color: var(--down); border-color: var(--down-dim); background: rgba(255, 94, 82, .06); }

/* --------------------------------------------------------------------------
   Halaman penyiapan
   -------------------------------------------------------------------------- */

.setup { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }

.setup__lede {
  max-width: 62ch;
  font-size: var(--fs-md);
  line-height: 1.75;
  color: var(--tx);
}

.setup__step {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--grid);
}

.setup__mark {
  padding-top: 2px;
  font-size: var(--fs-md);
  color: var(--tx-faint);
}

.setup__step.is-done .setup__mark { color: var(--up); }
.setup__step.is-done .setup__title { color: var(--tx-dim); }

.setup__title {
  margin-bottom: 5px;
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--tx-hi);
}

.setup__text {
  max-width: 60ch;
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--tx-dim);
}

.setup__text em { font-style: normal; color: var(--tx-hi); }

.setup__code {
  overflow-x: auto;
  margin-top: 10px;
  padding: 11px 13px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.8;
  color: var(--amber);
  background: var(--bg);
  border: 1px solid var(--grid);
}

.setup__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--grid);
}

.setup__actions .form__submit { margin: 0; }

.setup__link { font-size: var(--fs-md); color: var(--tx-faint); }
.setup__link:hover { color: var(--amber); }

/* --------------------------------------------------------------------------
   Tombol keluar di header
   -------------------------------------------------------------------------- */

.pagehead__logout { display: inline-flex; }

.chip--action {
  cursor: pointer;
  font-family: var(--mono);
  background: transparent;
}

.chip--action:hover { color: var(--amber); border-color: var(--amber-dim); }

.st--offline { color: var(--tx-dim); border-color: var(--grid); }