/* soltradingbot dashboard
   No framework. One typeface family (monospace), one accent per wallet, and a
   dot vocabulary that means the same thing everywhere: green fine, amber worth
   a look, red stop. */

:root {
  --bg: #0b0f14;
  --panel: #12181f;
  --panel-2: #161d26;
  --line: #232c38;
  --line-soft: #1a222c;
  --text: #ccd6e0;
  --text-dim: #7d8b9c;
  --text-faint: #566374;

  --green: #3fb950;
  --amber: #d29922;
  --red: #f85149;
  --blue: #4ea1ff;

  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Consolas,
    "Liberation Mono", Menlo, monospace;

  --radius: 6px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--blue);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 14px 18px 60px;
}

/* --- Status strip ----------------------------------------------------- */

.strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 9px 14px;
  position: sticky;
  top: 0;
  z-index: 40;
}

.strip-item {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  cursor: default;
}

.strip-label {
  color: var(--text-dim);
}

.strip-value {
  color: var(--text);
}

.strip-spacer {
  flex: 1;
}

.strip-config {
  color: var(--text-faint);
  font-size: 12px;
  white-space: nowrap;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-faint);
  flex: none;
  box-shadow: 0 0 0 0 currentColor;
}
.dot.green {
  background: var(--green);
}
.dot.amber {
  background: var(--amber);
}
.dot.red {
  background: var(--red);
  animation: pulse 1.8s ease-in-out infinite;
}
.dot.grey {
  background: var(--text-faint);
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

/* --- Banners ---------------------------------------------------------- */

.banner {
  margin-top: 12px;
  padding: 9px 14px;
  border-radius: var(--radius);
  border: 1px solid;
  display: flex;
  align-items: center;
  gap: 10px;
}
.banner strong {
  letter-spacing: 0.04em;
}
/* Sits at the far right of whichever banner it belongs to, and inherits its
   colour so it never reads as a separate control. */
.banner-close {
  margin-left: auto;
  flex: none;
  padding: 0 7px;
  line-height: 1.4;
  font-size: 15px;
  background: none;
  border-color: transparent;
  color: inherit;
  opacity: 0.55;
}
.banner-close:hover:not(:disabled) {
  opacity: 1;
  background: rgba(255, 255, 255, 0.06);
  border-color: transparent;
}
.banner.dry {
  background: rgba(78, 161, 255, 0.08);
  border-color: rgba(78, 161, 255, 0.35);
  color: #9dc9ff;
}
.banner.live {
  background: rgba(248, 81, 73, 0.08);
  border-color: rgba(248, 81, 73, 0.32);
  color: #ff9b95;
}
.banner.warn {
  background: rgba(210, 153, 34, 0.08);
  border-color: rgba(210, 153, 34, 0.35);
  color: #e8c46a;
}

/* --- Layout ----------------------------------------------------------- */

.cols {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 12px;
  margin-top: 12px;
}


@media (max-width: 920px) {
  .cols {
    grid-template-columns: minmax(0, 1fr);
  }
}







.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-top: 12px;
  overflow: hidden;
}
.cols .panel {
  margin-top: 0;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--panel-2);
}

.panel-title {
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.panel-body {
  padding: 12px 14px;
}

.panel details > summary {
  cursor: pointer;
  list-style: none;
}
.panel details > summary::-webkit-details-marker {
  display: none;
}

/* --- Forms ------------------------------------------------------------ */

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

label,
.field-label {
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-faint);
}

input,
select,
button,
textarea {
  font-family: var(--mono);
  font-size: 13px;
}

input[type='text'],
input[type='number'],
input[type='password'],
select,
textarea {
  background: #0a0e13;
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 4px;
  padding: 6px 8px;
  width: 100%;
  min-width: 0;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--blue);
}

input::placeholder {
  color: var(--text-faint);
}

.row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.row > * {
  flex: 1 1 130px;
}

.controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
@media (max-width: 560px) {
  .controls {
    grid-template-columns: minmax(0, 1fr);
  }
}

button {
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
button:hover:not(:disabled) {
  border-color: #3a4757;
  background: #1c242e;
}
button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

button.primary {
  background: rgba(63, 185, 80, 0.13);
  border-color: rgba(63, 185, 80, 0.45);
  color: #7ee08a;
}
button.primary:hover:not(:disabled) {
  background: rgba(63, 185, 80, 0.2);
}

button.danger {
  background: rgba(248, 81, 73, 0.12);
  border-color: rgba(248, 81, 73, 0.4);
  color: #ff9b95;
}
button.danger:hover:not(:disabled) {
  background: rgba(248, 81, 73, 0.19);
}

button.ghost {
  background: transparent;
}

button.tiny {
  padding: 2px 7px;
  font-size: 11px;
}

.btn-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.hint {
  color: var(--text-faint);
  font-size: 11.5px;
  margin-top: 6px;
  line-height: 1.45;
}

/*
 * Says who a panel's settings belong to. Set apart from the ordinary hints
 * because it answers a different question — not "what does this do" but
 * "am I allowed to change it, and who else does it affect".
 */
.scope-note {
  margin: 0 0 12px;
  padding: 7px 10px;
  border-left: 2px solid rgba(78, 161, 255, 0.5);
  background: rgba(78, 161, 255, 0.06);
  border-radius: 0 4px 4px 0;
  color: var(--text-dim, #9aa7b4);
}
.scope-note:empty {
  display: none;
}

/*
 * A position whose wallet key has been removed. Dimmed rather than hidden:
 * the tokens are still on chain and still yours, so hiding the row would be a
 * worse lie than showing it — but it must not sit among the tradeable ones
 * looking like something you can act on.
 */
/* --- Wallet privacy --------------------------------------------------- */

.audit-head {
  margin: 18px 0 8px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.audit-head:first-child {
  margin-top: 4px;
}

.wallet-risk {
  border: 1px solid var(--line, #1e2632);
  border-left-width: 3px;
  border-radius: 5px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.wallet-risk.good {
  border-left-color: rgba(63, 185, 80, 0.6);
}
.wallet-risk.warn {
  border-left-color: rgba(232, 196, 106, 0.7);
}
.wallet-risk.bad {
  border-left-color: rgba(248, 81, 73, 0.75);
}

.wallet-risk-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.risk-score {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.finding-list {
  margin: 6px 0 0;
  padding-left: 0;
  list-style: none;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-dim);
}
.finding-list li {
  padding: 2px 0;
}

/* The verdict word, so severity is readable without decoding a colour. */
.strength {
  font-size: 9.5px;
  letter-spacing: 0.07em;
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid;
  margin-right: 6px;
  vertical-align: 1px;
}
.strength.red {
  color: #f85149;
  border-color: rgba(248, 81, 73, 0.5);
}
.strength.amber {
  color: #e8c46a;
  border-color: rgba(232, 196, 106, 0.5);
}
.strength.grey {
  color: var(--text-faint);
  border-color: var(--line);
}

.audit-advice {
  margin-top: 8px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text);
  border-left: 2px solid var(--line);
  padding-left: 9px;
}

.link-row {
  border: 1px solid var(--line, #1e2632);
  border-radius: 5px;
  padding: 9px 12px;
  margin-bottom: 8px;
}
.link-head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.link-pair {
  font-weight: 500;
  color: var(--text);
  font-size: 12.5px;
}

/* --- Pagination ------------------------------------------------------- */

.pager {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  border-top: 1px solid var(--line, #1e2632);
  justify-content: flex-end;
  flex-wrap: wrap;
}
.pager.hidden {
  display: none;
}
.pager-btn {
  min-width: 28px;
  padding: 4px 8px;
  font-size: 11.5px;
  line-height: 1.2;
}
.pager-btn.current {
  border-color: #3f6fb9;
  color: var(--text);
  opacity: 1;
  cursor: default;
}
.pager-gap {
  color: var(--text-faint);
  padding: 0 2px;
  user-select: none;
}

/* A resolved ticker. Slightly brighter than an address, because it is the
   thing you actually read when scanning the table. */
.ticker {
  color: var(--text);
  font-weight: 500;
}
a.ticker {
  text-decoration: none;
}
a.ticker:hover {
  text-decoration: underline;
}
.token-ticker {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-right: 10px;
}
.token-ticker:empty {
  display: none;
}

.tag.orphaned {
  border-color: rgba(232, 196, 106, 0.5);
  color: #e8c46a;
}
.orphaned-row td {
  opacity: 0.65;
}

.danger-note {
  border-left: 2px solid rgba(248, 81, 73, 0.6);
  background: rgba(248, 81, 73, 0.07);
  padding: 8px 10px;
  border-radius: 0 4px 4px 0;
  margin: 10px 0;
  line-height: 1.5;
}

/*
 * What is saved right now, for fields whose value is a credential and so is
 * never sent back in full. Monospace because the masked tail is meant to be
 * compared character by character against the key you have in hand.
 */
.current-value {
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11.5px;
  color: var(--text-dim, #9aa7b4);
  margin: 0 0 8px;
  word-break: break-all;
}
.current-value:empty {
  display: none;
}

/* A disabled input should read as "not yours to change", not as broken. */
input:disabled,
select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* --- Wallets ---------------------------------------------------------- */

.wallet {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line-soft);
}
.wallet:last-child {
  border-bottom: none;
}

.wallet-swatch {
  width: 3px;
  align-self: stretch;
  border-radius: 2px;
  flex: none;
}

.wallet-main {
  flex: 1;
  min-width: 0;
}

.wallet-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wallet-key {
  color: var(--text-faint);
  font-size: 11.5px;
}

.wallet-bal {
  text-align: right;
  white-space: nowrap;
}

.wallet-bal .low {
  color: var(--amber);
}

/* --- Tables ----------------------------------------------------------- */

.table-scroll {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

th {
  text-align: left;
  font-weight: normal;
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
  white-space: nowrap;
}

tr:last-child td {
  border-bottom: none;
}

td.num,
th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.pos {
  color: var(--green);
}
.neg {
  color: var(--red);
}
.muted {
  color: var(--text-faint);
}

.token-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid;
}
.tag.armed {
  color: var(--green);
  border-color: rgba(63, 185, 80, 0.4);
  background: rgba(63, 185, 80, 0.1);
}
.tag.off {
  color: var(--text-faint);
  border-color: var(--line);
}
.tag.overlap {
  color: var(--amber);
  border-color: rgba(210, 153, 34, 0.45);
  background: rgba(210, 153, 34, 0.1);
}
.tag.dry {
  color: var(--blue);
  border-color: rgba(78, 161, 255, 0.4);
}

.empty {
  padding: 22px 14px;
  text-align: center;
  color: var(--text-faint);
}

/* --- Activity --------------------------------------------------------- */

/* Paged, not scrolled: a fixed 25 rows means the panel is the same height
   whether the bot has been up for a minute or a week. */
.feed {
  font-size: 12px;
}

.feed-row {
  display: flex;
  gap: 10px;
  padding: 4px 14px;
  border-bottom: 1px solid var(--line-soft);
  align-items: baseline;
}
.feed-row:last-child {
  border-bottom: none;
}

.feed-time {
  color: var(--text-faint);
  flex: none;
  font-size: 11px;
}

.feed-kind {
  color: var(--text-faint);
  flex: none;
  width: 66px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.feed-msg {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.feed-row.success .feed-msg {
  color: #7ee08a;
}
.feed-row.warn .feed-msg {
  color: #e8c46a;
}
.feed-row.error .feed-msg {
  color: #ff9b95;
}

/* --- Modal ------------------------------------------------------------ */

.modal-back {
  position: fixed;
  inset: 0;
  background: rgba(3, 6, 10, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}

.modal {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  max-width: 520px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--panel-2);
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.modal-body {
  padding: 16px;
}

.modal-body p {
  margin: 0 0 12px;
}

.kv {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  margin: 12px 0;
  font-size: 12.5px;
}
.kv dt {
  color: var(--text-faint);
}
.kv dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.hidden {
  display: none !important;
}

.toast-stack {
  position: fixed;
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 200;
  max-width: 380px;
}

.toast {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: 4px;
  padding: 9px 13px;
  font-size: 12.5px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  overflow-wrap: anywhere;
}
.toast.success {
  border-left-color: var(--green);
}
.toast.error {
  border-left-color: var(--red);
}
.toast.warn {
  border-left-color: var(--amber);
}
.toast.info {
  border-left-color: var(--blue);
}

.foot {
  margin-top: 26px;
  color: var(--text-faint);
  font-size: 11.5px;
  text-align: center;
}

/* --- Token workspace -------------------------------------------------- */

.workspace {
  border-color: #2c3847;
}

.mint-bar {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.mint-bar input {
  flex: 1;
  font-size: 13.5px;
  padding: 8px 10px;
}

.mint-bar button {
  flex: none;
  padding: 8px 16px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.chip {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 3px 10px;
  font-size: 11.5px;
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}
.chip:hover {
  border-color: var(--blue);
  color: var(--text);
}
.chip .chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
}

.token-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: var(--panel-2);
}

.token-id {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.token-mint {
  font-size: 13.5px;
  overflow-wrap: anywhere;
}

.token-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 0;
}
.token-stats > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.token-stats dt {
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.token-stats dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.inline-warn {
  padding: 8px 14px;
  background: rgba(210, 153, 34, 0.09);
  border-bottom: 1px solid rgba(210, 153, 34, 0.28);
  color: #e8c46a;
  font-size: 12px;
}

/* --- Bulk actions ----------------------------------------------------- */

.bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line-soft);
}

.bulk-label {
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-right: 2px;
}

.bulk-bar input {
  width: 88px;
  flex: none;
  padding: 4px 8px;
}

.bulk-sep {
  width: 1px;
  align-self: stretch;
  background: var(--line);
  margin: 0 4px;
}

.bulk-btn {
  padding: 4px 10px;
  font-size: 11.5px;
}

/* Armed state: first tap arms, second tap fires. No dialog, but a single
   mis-tap cannot empty every wallet. */
.bulk-btn.armed {
  background: rgba(248, 81, 73, 0.22);
  border-color: var(--red);
  color: #ffb3ae;
  animation: pulse 1s ease-in-out infinite;
}

/* --- Wallet trading table --------------------------------------------- */

.wallet-table td {
  padding: 7px 10px;
}

.wallet-table tr.busy {
  opacity: 0.5;
  pointer-events: none;
}

.wallet-table tr.flash-ok td {
  animation: flashok 1.1s ease-out;
}
.wallet-table tr.flash-err td {
  animation: flasherr 1.6s ease-out;
}

@keyframes flashok {
  from {
    background: rgba(63, 185, 80, 0.22);
  }
  to {
    background: transparent;
  }
}
@keyframes flasherr {
  from {
    background: rgba(248, 81, 73, 0.22);
  }
  to {
    background: transparent;
  }
}

.wallet-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wallet-name .bar {
  width: 3px;
  height: 18px;
  border-radius: 2px;
  flex: none;
}

.buy-cell {
  display: flex;
  gap: 5px;
  align-items: center;
}

.buy-cell input {
  width: 74px;
  padding: 4px 7px;
  text-align: right;
}

.buy-cell button {
  padding: 4px 12px;
  font-size: 11.5px;
  background: rgba(63, 185, 80, 0.13);
  border-color: rgba(63, 185, 80, 0.45);
  color: #7ee08a;
}
.buy-cell button:hover:not(:disabled) {
  background: rgba(63, 185, 80, 0.22);
}

.sell-group {
  display: flex;
  gap: 3px;
}

.sell-group button {
  padding: 4px 8px;
  font-size: 11.5px;
  min-width: 40px;
  background: rgba(248, 81, 73, 0.1);
  border-color: rgba(248, 81, 73, 0.3);
  color: #ff9b95;
}
.sell-group button:hover:not(:disabled) {
  background: rgba(248, 81, 73, 0.2);
  border-color: rgba(248, 81, 73, 0.55);
}
.sell-group button.all {
  background: rgba(248, 81, 73, 0.2);
  border-color: rgba(248, 81, 73, 0.5);
  font-weight: 600;
}

.mismatch {
  color: var(--amber);
  cursor: help;
  margin-left: 4px;
}

/* The held figure when it disagrees with the ledger. Marked, not alarmed: the
   number is correct — it is the chain — and only the cost basis behind it is
   incomplete. */
.mismatch-cell {
  color: var(--amber);
  cursor: help;
}

.row-note {
  font-size: 11px;
  color: var(--text-faint);
}

.pos-row {
  cursor: pointer;
}
.pos-row:hover td {
  background: rgba(78, 161, 255, 0.06);
}

/* --- Top bar and chain picker ------------------------------------------
 *
 * The picker sits in the header, pinned right, and is deliberately nowhere
 * near the page tabs. The tabs change what you are looking at; this changes
 * which network your money is on. Keeping them apart means a misclick between
 * neighbouring controls can never move you between chains.
 *
 * Closed, it still shows the chain's name and accent colour, so "which chain
 * am I on" is answered without opening anything.
 */

.topbar {
  display: flex;
  align-items: stretch;
  gap: 8px;
  position: sticky;
  top: 0;
  z-index: 40;
}

.topbar .strip {
  flex: 1;
  min-width: 0;
  position: static;
}

.chain-menu {
  position: relative;
  flex: none;
}

.chain-drop {
  position: relative;
  height: 100%;
}

.chain-trigger {
  --chain-accent: var(--blue);
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 0 12px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.12s, background 0.12s;
}

.chain-trigger:hover {
  border-color: var(--chain-accent);
}

.chain-drop.open .chain-trigger {
  border-color: var(--chain-accent);
  background: var(--panel-2);
}

.chain-swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--chain-accent);
  flex: none;
  box-shadow: 0 0 6px var(--chain-accent);
}

.chain-caret {
  color: var(--text-faint);
  font-size: 10px;
  transition: transform 0.12s;
}

.chain-drop.open .chain-caret {
  transform: rotate(180deg);
}

.chain-list {
  display: none;
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  min-width: 190px;
  padding: 4px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
  z-index: 60;
}

.chain-drop.open .chain-list {
  display: block;
}

.chain-option {
  --chain-accent: var(--blue);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 12.5px;
  color: var(--text-dim);
  text-decoration: none;
  white-space: nowrap;
}

.chain-option:hover {
  background: var(--panel);
  color: var(--text);
  text-decoration: none;
}

.chain-option.active {
  color: var(--text);
  background: var(--panel);
}

.chain-option-label {
  flex: 1;
  font-weight: 600;
}

/* The unit is shown next to each option because it is the thing that actually
   changes about every number on screen once you switch. */
.chain-option-unit {
  color: var(--text-faint);
  font-family: var(--mono);
  font-size: 11px;
}

@media (max-width: 700px) {
  .topbar {
    flex-wrap: wrap;
  }
  .chain-menu {
    width: 100%;
  }
  .chain-trigger {
    width: 100%;
    justify-content: space-between;
    padding: 8px 12px;
  }
  .chain-list {
    left: 0;
    right: 0;
  }
}

/* --- Tabs -------------------------------------------------------------- */

.tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  border-bottom: 1px solid var(--line);
}

.tab {
  padding: 7px 16px;
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-faint);
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 5px 5px 0 0;
  text-decoration: none;
  margin-bottom: -1px;
}
.tab:hover {
  color: var(--text);
  text-decoration: none;
}
.tab.active {
  color: var(--text);
  background: var(--panel);
  border-color: var(--line);
  border-bottom: 1px solid var(--panel);
}

.tab-spacer {
  flex: 1;
}

.tab-note {
  font-size: 11.5px;
  color: var(--text-faint);
  padding-right: 4px;
}

/* --- Quick buy / sell -------------------------------------------------- */

.quick-group {
  display: flex;
  gap: 3px;
  align-items: center;
}

.quick-buy {
  padding: 4px 9px;
  font-size: 11.5px;
  background: rgba(63, 185, 80, 0.12);
  border-color: rgba(63, 185, 80, 0.4);
  color: #7ee08a;
  white-space: nowrap;
}
.quick-buy:hover:not(:disabled) {
  background: rgba(63, 185, 80, 0.24);
  border-color: rgba(63, 185, 80, 0.7);
}

.manual-buy {
  display: flex;
  gap: 3px;
  margin-left: 5px;
  padding-left: 8px;
  border-left: 1px solid var(--line);
}
.manual-buy input {
  width: 68px;
  padding: 4px 6px;
  text-align: right;
}
.manual-buy button {
  padding: 4px 9px;
  font-size: 11.5px;
  background: rgba(63, 185, 80, 0.12);
  border-color: rgba(63, 185, 80, 0.4);
  color: #7ee08a;
}

.bulk-btn.buy {
  background: rgba(63, 185, 80, 0.13);
  border-color: rgba(63, 185, 80, 0.4);
  color: #7ee08a;
}

.bulk-progress {
  padding: 9px 14px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(78, 161, 255, 0.07);
  color: #9dc9ff;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.bulk-progress .bar {
  flex: 1;
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.bulk-progress .bar > span {
  display: block;
  height: 100%;
  background: var(--blue);
  transition: width 0.3s;
}

/* --- Settings ---------------------------------------------------------- */

.presets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.preset {
  text-align: left;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel-2);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.preset:hover {
  border-color: #3a4757;
}
.preset.active {
  border-color: var(--blue);
  background: rgba(78, 161, 255, 0.1);
}
.preset .preset-name {
  font-size: 12.5px;
  color: var(--text);
}
.preset .preset-summary {
  font-size: 11px;
  color: var(--text-faint);
  line-height: 1.35;
}
.preset .preset-nums {
  font-size: 10.5px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

/* --- Privacy audit ----------------------------------------------------- */

.audit {
  margin-top: 16px;
  border-top: 1px solid var(--line-soft);
  padding-top: 12px;
}

.audit-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 7px 0;
  border-bottom: 1px solid var(--line-soft);
}
.audit-row:last-child {
  border-bottom: none;
}

.audit-main {
  flex: 1;
  min-width: 0;
}
.audit-label {
  font-size: 12.5px;
}
.audit-detail {
  font-size: 11.5px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.audit-why {
  font-size: 11px;
  color: var(--text-faint);
  line-height: 1.4;
  margin-top: 2px;
}

.audit-scope {
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-radius: 5px;
}
.audit-scope h4 {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: normal;
}
.audit-scope li {
  font-size: 11.5px;
  color: var(--text-dim);
  line-height: 1.5;
  margin-bottom: 5px;
}
.audit-scope ul {
  margin: 0;
  padding-left: 16px;
}

/* --- Confirmation ------------------------------------------------------ */

.confirm-list {
  margin: 12px 0;
  border: 1px solid var(--line);
  border-radius: 5px;
  overflow: hidden;
  max-height: 260px;
  overflow-y: auto;
}
.confirm-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 11px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12.5px;
}
.confirm-row:last-child {
  border-bottom: none;
}
.confirm-row.skipped {
  color: var(--text-faint);
}
.confirm-row .amount {
  font-variant-numeric: tabular-nums;
}

.confirm-total {
  display: flex;
  justify-content: space-between;
  padding: 8px 11px;
  background: var(--panel-2);
  font-size: 13px;
  border-top: 1px solid var(--line);
}

/* --- Login ------------------------------------------------------------- */

.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.login-panel {
  width: 100%;
  max-width: 340px;
  margin-top: 0;
}

.who {
  font-size: 11.5px;
  color: var(--text-dim);
  padding-right: 8px;
}

.metric-good {
  color: var(--green);
}
.metric-warn {
  color: var(--amber);
}
.metric-bad {
  color: var(--red);
}

/* --- Funding ------------------------------------------------------------
 *
 * The linkability verdict is the reason the preview exists, so it is styled to
 * be read first — a plan that funds ten wallets from one address in one block
 * should look wrong before you read a single number.
 */
.fund-link {
  display: inline-block;
  margin: 8px 0 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.fund-link-low {
  color: #7ee081;
  background: rgba(63, 185, 80, 0.1);
  border: 1px solid rgba(63, 185, 80, 0.35);
}
.fund-link-moderate {
  color: #e8c46a;
  background: rgba(210, 153, 34, 0.1);
  border: 1px solid rgba(210, 153, 34, 0.35);
}
.fund-link-high {
  color: #ff9b95;
  background: rgba(248, 81, 73, 0.1);
  border: 1px solid rgba(248, 81, 73, 0.35);
}

.fund-note {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-dim);
}

#fund-source {
  min-height: 60px;
}


/* --- Bridge funding ------------------------------------------------------
   The root address is the one thing on this page you paste into an exchange
   withdrawal form, so it is shown in full and in a monospace face — a
   truncated address is one a person cannot check against what they pasted. */
.hop-address {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  word-break: break-all;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  user-select: all;
}

/* Restoring an existing phrase. Folded away behind a summary because it is
   the rarer path — you generate once and restore only when moving machines —
   and an always-open textarea next to "Generate" invites pasting into the
   wrong one. */
.hop-restore {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}

.hop-restore > summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--text-dim);
  user-select: none;
}

.hop-restore > summary:hover {
  color: var(--text);
}

.hop-restore textarea {
  width: 100%;
  margin-top: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  line-height: 1.6;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  resize: vertical;
}

/* The 24 words, laid out to be copied onto paper rather than skimmed. */
.hop-phrase {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  line-height: 1.9;
  word-spacing: 6px;
  padding: 12px 14px;
  margin-top: 8px;
  border: 1px solid #e8c46a;
  border-radius: 6px;
  background: rgba(232, 196, 106, 0.06);
  user-select: all;
}

.hop-root {
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
}

/* An anchor styled as a button, so "view on explorer" sits level with the
   real buttons beside it instead of hanging as a bare link. */
.button-like {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.fund-note-bad {
  color: #ff9aa8;
}

/* Recovery sits apart from the run controls: you reach for it when something
   has already gone wrong, and it should not read as part of the normal flow. */
.hop-recover {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

/* Same separation as recovery, but the rule is drawn in the danger colour: this
   block throws a key away and should not read like another settings row. */
/* The two halves of the send-out dialog. Ruled apart because they move money
   on different chains and confusing them is expensive. */
.exit-section {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}

.exit-section:first-of-type {
  border-top: none;
  padding-top: 0;
}

.hop-replace {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(248, 81, 73, 0.35);
}

/* Money that landed on Ethereum mainnet instead of the trading chain. Drawn
   under the real balance and only when non-zero, so it reads as a warning
   rather than as a second column everyone learns to ignore. */
.wallet-mainnet {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

/* Only coloured when there is actually something there. A permanently amber
   line is one people stop seeing. */
.wallet-mainnet-warn {
  color: #e8c46a;
}

/* --- Docs -----------------------------------------------------------------
   The one screen here that is read rather than scanned, so it gets a padded
   body and a capped line length. The first version put the content straight
   into .panel, which has no padding of its own — every other panel wraps its
   content in .panel-body — so the text ran flush into the border. */

.docs-body {
  padding: 18px 22px 26px;
  /* Caps the MEASURE, not the panel. Capping the panel left a narrow box with
     text jammed against both edges, which is the opposite of what a reading
     width is for. ~72 characters is the comfortable range. */
  max-width: 68ch;
  line-height: 1.7;
}

.docs-body h2 {
  margin: 34px 0 10px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  font-size: 16px;
  letter-spacing: 0.01em;
  color: var(--text);
}

.docs-body h2:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

.docs-body h3 {
  margin: 22px 0 6px;
  font-size: 13.5px;
  color: var(--text);
}

.docs-body p {
  margin: 0 0 12px;
}

.docs-body ul,
.docs-body ol {
  margin: 0 0 14px;
  padding-left: 20px;
}

.docs-body li {
  margin-bottom: 7px;
}

.docs-body code {
  font-size: 12px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  /* A long address must break rather than push the page sideways. */
  word-break: break-word;
}

/* Jump list. auto-fit collapses it to one column on a narrow screen without
   needing its own media query. */
.docs-toc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 4px 14px;
  margin: 0 0 26px;
  padding: 14px 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.02);
}

.docs-toc a {
  font-size: 12.5px;
  color: var(--text-dim);
  /* Comfortably tappable on a phone without looking padded on a desktop. */
  padding: 3px 0;
}

.docs-toc a:hover {
  color: var(--text);
}

/* Three weights of aside. The danger one is deliberately loud: someone
   skimming should still catch the parts that lose money. */
.docs-callout {
  margin: 0 0 16px;
  padding: 12px 15px;
  border-left: 3px solid var(--line);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: rgba(255, 255, 255, 0.03);
}

.docs-callout.warn {
  border-left-color: var(--amber);
  background: rgba(210, 153, 34, 0.08);
}

.docs-callout.danger {
  border-left-color: var(--red);
  background: rgba(248, 81, 73, 0.09);
}

/* Wrapped in its own scroller below, so the page itself never scrolls
   sideways on a phone. */
.docs-table {
  width: 100%;
  margin: 0 0 16px;
  border-collapse: collapse;
  font-size: 12.5px;
}

.docs-table th,
.docs-table td {
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line-soft);
}

.docs-table th {
  font-weight: 600;
  color: var(--text-dim);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.docs-table td:first-child {
  color: var(--text-dim);
}

.docs-rules li {
  margin-bottom: 11px;
}

.docs-end {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  color: var(--text-dim);
}

@media (max-width: 620px) {
  .docs-body {
    padding: 14px 14px 20px;
  }
  .docs-table {
    /* Scrolls inside itself. Making the TABLE scroll rather than the page is
       what keeps the body from moving sideways under a thumb. */
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* --- Cross-browser and mobile ---------------------------------------------
   The app was built and only ever looked at on a wide desktop screen. These
   are the things that break elsewhere. */

/* iOS Safari zooms the whole page when a focused input's font is under 16px,
   and then leaves it zoomed. Every input here is 13px, so tapping any field on
   an iPhone threw the layout off and the user had to pinch back. Only applies
   to touch devices so the desktop type scale is untouched. */
@media (hover: none) and (pointer: coarse) {
  input[type='text'],
  input[type='number'],
  input[type='password'],
  select,
  textarea {
    font-size: 16px;
  }

  /* Apple's minimum comfortable target. The tiny buttons were 2px/7px. */
  button {
    min-height: 34px;
  }
  button.tiny {
    min-height: 28px;
  }
}

/* Long addresses, hashes and token names are the one kind of content here that
   can be wider than a phone. Nothing may push the page sideways.

   NOT overflow-x: hidden on html/body. That makes them a scroll container,
   which silently kills position: sticky on every descendant — including the
   status strip at the top. It is the standard "fixed my horizontal scroll and
   broke my sticky header" trap, and I walked into it a minute ago.

   Overflow is handled where it originates instead: long strings wrap, and wide
   tables scroll inside themselves. */
code,
.mono,
.hop-address,
.wallet-address {
  overflow-wrap: anywhere;
}

@media (max-width: 700px) {
  .wrap {
    padding: 10px 12px 48px;
  }

  /* The tab bar overflowed once Docs was added as a fourth item. It scrolls
     horizontally now rather than wrapping into two rows and pushing the
     content down. */
  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar {
    display: none;
  }
  .tab {
    flex: none;
  }

  /* Sticky plus a tall wrapped strip eats a phone screen. */
  .strip {
    position: static;
    gap: 4px 12px;
    padding: 8px 10px;
  }

  .panel-body {
    padding: 10px 12px;
  }

  /* Buttons in a row go full width rather than squeezing to unreadable. */
  .btn-row > button {
    flex: 1 1 100%;
  }
}

/* Any table that is not already inside .table-scroll. Applied at the element
   level so a table added later cannot silently overflow. */
@media (max-width: 700px) {
  .table-scroll,
  .panel table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}

/* Firefox and Safari ignore scrollbar-color/-width silently; harmless there
   and stops the default heavy scrollbar on Chrome/Edge from cropping content. */
* {
  scrollbar-width: thin;
}

/* Safari wants the prefixed value first, then the standard one.
   Declaring ONLY the prefixed value here would have overridden the
   position: sticky set earlier in this file, because later rules win — the fix
   would have become the bug it was meant to prevent. */
.strip {
  position: -webkit-sticky;
  position: sticky;
}

/* Respect a reader who has asked for less motion. The red status dot pulses
   forever, which is exactly the kind of thing that setting exists for. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Launch panel (PONS, Robinhood only) ----------------------------------
   A <details> so it collapses out of the way. Most visits to this page are to
   buy something, and a launch form sitting open above the token box is a form
   in the way of the thing you came for. */
.launch-panel > summary {
  cursor: pointer;
  list-style: none;
}
.launch-panel > summary::-webkit-details-marker {
  display: none;
}
.launch-panel > summary::after {
  content: '▸';
  margin-left: auto;
  color: var(--text-faint);
}
.launch-panel[open] > summary::after {
  content: '▾';
}

/* The part that spends money, set apart from the metadata above it. */
.launch-deployer {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.02);
}

.launch-result {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-dim);
  overflow-wrap: anywhere;
}

.launch-warn {
  margin-top: 6px;
  padding-left: 8px;
  border-left: 2px solid var(--amber);
  color: #e8c46a;
}

.launch-panel textarea {
  resize: vertical;
}

/* --- Launch panel, laid out as three steps --------------------------------
   The first version was one long column of fifteen fields, which reads as a
   wall and gives no sense of what is required versus optional. Numbered steps
   separate the three decisions being made: what the token is, who pays for it,
   and who buys it afterwards. */

.launch-body {
  padding: 14px 16px 18px;
}

.launch-facts {
  margin: 0 0 14px;
  padding: 9px 12px;
  border-left: 2px solid rgba(78, 161, 255, 0.5);
  background: rgba(78, 161, 255, 0.06);
  border-radius: 0 4px 4px 0;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.5;
}

.launch-step {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--line-soft);
}
.launch-step:first-of-type {
  border-top: none;
  padding-top: 0;
}

.launch-step-n {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text-dim);
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.launch-step-body {
  flex: 1;
  min-width: 0;
}

.launch-step-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.launch-step-actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
}

/* Logo: preview beside the field, so a wrong or dead URL is visible before it
   becomes a permanent string on a token contract. */
.launch-logo-row {
  display: flex;
  gap: 12px;
  margin-top: 10px;
  align-items: flex-start;
}

.launch-logo-preview {
  flex: none;
  width: 64px;
  height: 64px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: #0a0e13;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  font-size: 10px;
  line-height: 1.3;
  color: var(--text-faint);
}
.launch-logo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.launch-logo-preview .bad {
  color: var(--red);
}

.launch-logo-fields {
  flex: 1;
  min-width: 0;
}

.launch-socials {
  margin-top: 12px;
}
.launch-socials > summary {
  cursor: pointer;
  font-size: 11.5px;
  color: var(--text-faint);
  list-style: none;
  user-select: none;
}
.launch-socials > summary::-webkit-details-marker {
  display: none;
}
.launch-socials > summary::before {
  content: '+ ';
}
.launch-socials[open] > summary::before {
  content: '− ';
}
.launch-socials > summary:hover {
  color: var(--text-dim);
}

/* The buy checklist. A wrapping grid rather than a list, because fifteen
   wallets stacked vertically pushes the Launch button off screen — and the
   button you need after ticking boxes should be visible while you tick them. */
.lp-wallets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 2px 8px;
  margin-top: 10px;
  max-height: 220px;
  overflow-y: auto;
}

.lp-wallet {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12.5px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
}
.lp-wallet:hover {
  background: rgba(255, 255, 255, 0.04);
}
.lp-wallet:has(input:checked) {
  background: rgba(63, 185, 80, 0.09);
}

.lp-wallet input[type='checkbox'] {
  width: auto;
  min-width: 0;
  margin: 0;
  flex: none;
  accent-color: var(--green);
}

.lp-wallet-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lp-wallet-bal {
  color: var(--text-faint);
  font-size: 11.5px;
  flex: none;
}

/* A wallet with nothing in it cannot buy. Dimmed rather than hidden, so it is
   obvious why ticking it would not help. */
.lp-wallet.empty .lp-wallet-name,
.lp-wallet.empty .lp-wallet-bal {
  color: var(--text-faint);
}

/* Not enough for the buy plus the gas reserve. Distinct from empty: the wallet
   has money in it, which is exactly why the shortfall is easy to miss. */
.lp-wallet.short {
  border-color: rgba(210, 153, 34, 0.5);
}

.lp-wallet-warn {
  color: var(--amber);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  flex: none;
  white-space: nowrap;
}

/* The buy summary turns amber when a picked wallet cannot cover its own buy. */
#lp-buy-summary.warn {
  color: var(--amber);
}

.launch-result {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-dim);
  overflow-wrap: anywhere;
}

.launch-warn {
  margin-top: 6px;
  padding-left: 8px;
  border-left: 2px solid var(--amber);
  color: #e8c46a;
}

.launch-panel textarea {
  resize: vertical;
}

@media (max-width: 620px) {
  .launch-step {
    gap: 8px;
  }
  .launch-body {
    padding: 12px;
  }
}