/* Juicebox Protocol Directory — Craigslist-style CSS */
/* All colors as variables for auditability */

:root {
  /* ── Brand Palette ── */
  --c-teal: #0b6262;
  --c-green: #2a6144;
  --c-pink: #88152d;
  --c-black: #2c2018;
  --c-orange: #88401d;
  --c-teal-light: #6ec4c4;
  --c-green-light: #82b89e;
  --c-pink-light: #eda3b0;
  --c-black-light: #7d6858;
  --c-orange-light: #cca080;

  /* ── Mapped Variables ── */
  --bg: #f6c9c0;
  --card-bg: #fcd0c2;
  --input-bg: #fcd0c2;
  --text: var(--c-black);
  --muted: #684f40;
  --muted-2: #735145;
  --muted-3: #765246;
  --muted-4: #e8bfae;
  --write: var(--c-green);
  --read: var(--c-orange);
  --badge-write: var(--c-orange);
  --badge-payable: var(--c-green);
  --badge-read: var(--c-orange);
  --payable-bg: var(--c-green-light);
  --payable-border: var(--c-green-light);
  --transact-bg: var(--c-green);
  --query-bg: var(--c-orange);
  --simulate-bg: #f6c9c0;
  --simulate-text: var(--c-black-light);
  --error: var(--c-pink);
  --warning: var(--c-orange);
  --selected-bg: var(--c-teal-light);
  --selected-border: var(--c-teal);
  --testnet-selected-bg: var(--c-orange-light);
  --testnet-selected-border: var(--c-orange);
  --pill-bg: #f8d0c0;
  --pill-border: #d8a898;
  --focus-ring: var(--c-orange);
  --depth-bg-0: #f7cfc0;
  --depth-bg-1: #f2c0b0;
}

/* Reset */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* Monospace font sampler — sits in-flow at the very bottom of the page (reachable only by scrolling down). */
.font-selector {
  margin: 28px 8px 16px auto;
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 6px;
  background: var(--card-bg);
  border: 1px solid var(--c-pink-light);
  border-radius: 5px;
  opacity: 1;
}
.font-selector:hover { opacity: 1; }
.font-selector-label { font-size: 11px; font-weight: bold; color: var(--muted-2); }
.font-selector-sel {
  font-family: inherit;
  font-size: 11px;
  color: var(--text);
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  max-width: 140px;
}

/* Base */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--app-font, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
  font-size: 14px;
  line-height: 1.5;
}

/* Links: inherit the text colour, go teal only on hover. */
a { color: inherit; }
a:hover { color: var(--c-teal); }

/* Clickables: browsers default button/select to cursor:default — pointer whenever enabled. */
button {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: inherit;
  font: inherit;
}
button:not(:disabled),
[role="button"]:not([aria-disabled="true"]),
summary,
select:not(:disabled) { cursor: pointer; }

/* Palette display */
.palette {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 6px;
  margin-bottom: 12px;
}

.palette-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(44,32,24,0.15);
}

/* Focus ring — accessibility */
:focus-visible {
  /* Override component-level :focus resets so keyboard focus never disappears. */
  outline: 3px solid var(--focus-ring) !important;
  outline-offset: 2px;
}

/* Header */
#header {
  position: relative;
  text-align: center;
  padding: 24px 16px 12px;
  border-bottom: 1px solid var(--c-orange-light);
}

.header-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 36px;
}


.header-center {
  text-align: center;
}

#header h1 {
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 1px;
  color: var(--c-black);
  margin: 0;
}


.subtitle {
  font-size: 14px;
  color: var(--muted);
  margin-top: 4px;
}

.subtitle span {
  display: block;
}

.risk-notice {
  font-size: 10px;
  color: var(--muted-2);
  margin-top: 6px;
}

.audit-link {
  font-size: 10px;
  margin-top: 4px;
}

.audit-link a,
.risk-notice a {
  color: var(--muted-2);
  text-decoration: none;
  cursor: pointer;
}

.audit-link a:hover,
.risk-notice a:hover {
  color: var(--c-teal);
}
/* Keep the "[copy system audit prompt]" link on one line (wrap it as a whole). */
#audit-prompt-link { white-space: nowrap; }

/* In-form chain selector */
.fn-chain-selector {
  padding: 8px 12px;
  border-top: 1px solid var(--muted-4);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}


.chain-pills-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.chain-pill {
  background: none;
  border: 1px solid var(--muted-4);
  padding: 4px 12px;
  color: var(--c-pink);
  border-radius: 2px;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
}

.chain-pill.selected {
  background: var(--c-pink-light);
  border-color: var(--c-orange-light);
  color: var(--c-black);
}

.chain-pill.testnet {
  color: var(--c-orange);
}

.chain-pill.testnet.selected {
  background: var(--testnet-selected-bg);
  border-color: var(--testnet-selected-border);
  color: var(--warning);
}

.chain-pill:hover {
  font-weight: bold;
}

.custom-rpc-toggle {
  background: none;
  border: none;
  color: var(--muted-3);
  font-family: inherit;
  font-size: 9px;
  cursor: pointer;
  padding: 2px 0;
}

.custom-rpc-toggle:hover {
  color: var(--muted);
}

.custom-rpc-row {
  width: 100%;
}

.custom-rpc-input {
  font-size: 10px;
  padding: 3px 6px;
  color: var(--muted);
}


/* Tabs */
#tabs {
  display: flex;
  align-items: center;
  touch-action: pan-x;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  border-bottom: none;
  margin: 8px 20px 0;
}

.tab {
  padding: 8px 16px;
  color: var(--c-black);
  cursor: pointer;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: inherit;
  font-size: 11px;
  font-weight: bold;
}

.tab.active {
  color: var(--c-teal);
  border-bottom-color: var(--c-teal);
}

.tab:hover {
  color: var(--c-teal);
}

/* Tab content */
.tab-content {
  display: none;
  padding: 16px 20px;
}

.tab-content.active {
  display: block;
}

/* Section headers */
.section-header {
  font-weight: bold;
  font-size: 12px;
  margin: 12px 0 8px;
  padding: 0;
}

.section-header.transact {
  color: var(--c-teal);
}

.section-header.read {
  color: var(--c-teal);
}

/* Category headers (Full Directory) */
.category-header {
  color: var(--c-teal);
  font-weight: bold;
  font-size: 12px;
  margin: 16px 0 8px;
}

/* Contract sections */
.contract-section {
  margin-bottom: 2px;
  border-bottom: 1px solid var(--c-orange-light);
}

.contract-summary {
  padding: 4px 0;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

.contract-summary:hover {
  background: rgba(44,32,24,0.03);
}

.contract-name {
  color: var(--c-orange);
  font-weight: bold;
  min-width: 0;
  overflow-wrap: anywhere;
}

.contract-fn-count {
  color: var(--muted-2);
  font-size: 10px;
}

.contract-address {
  appearance: none;
  background: none;
  border: 0;
  color: var(--muted-2);
  cursor: copy;
  font: inherit;
  font-size: 10px;
  margin: 0;
  overflow-wrap: anywhere;
  padding: 0;
  text-align: left;
}

.contract-address::before {
  content: '[';
}

.contract-address::after {
  content: ']';
}

.contract-address:hover,
.contract-address:focus-visible,
.contract-address.copied {
  color: var(--c-pink);
  text-decoration: underline;
}

.contract-addresses {
  color: var(--muted-2);
  font-size: 10px;
}

.contract-addresses > summary {
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.contract-addresses > summary::-webkit-details-marker {
  display: none;
}

.contract-addresses > summary:hover {
  color: var(--c-pink);
  text-decoration: underline;
}

.contract-address-list {
  display: grid;
  gap: 3px 10px;
  grid-template-columns: max-content minmax(0, 1fr);
  padding: 5px 0 3px 18px;
}

.contract-address-row {
  display: contents;
}

.contract-address-chain {
  color: var(--text);
}

.contract-notice {
  color: var(--text);
  font-size: 12px;
  line-height: 1.5;
  padding: 2px 0 4px 18px;
}

.contract-content {
  padding-left: 12px;
  border-left: 1px solid var(--muted-4);
  margin-left: 6px;
}

/* Address override for per-project contracts */
.address-override {
  margin: 8px 0;
  padding: 8px;
  background-color: var(--card-bg);
  border: 1px solid var(--c-orange-light);
  border-radius: 2px;
}

/* Function rows */
.fn-row {
  margin-bottom: 1px;
  border-bottom: 1px solid var(--c-orange-light);
}

.fn-summary {
  padding: 4px 0;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 6px;
}

.fn-summary:hover {
  background: rgba(44,32,24,0.03);
}

.fn-arrow {
  color: var(--muted);
  font-size: 10px;
  width: 12px;
}

.fn-name-preview {
  font-weight: bold;
}

.fn-name-preview.write {
  color: var(--c-pink);
}

.fn-name-preview.read {
  color: var(--c-pink);
}

.fn-name {
  font-weight: bold;
}

.fn-contract-hint {
  color: var(--muted-3);
  font-size: 9px;
  margin-left: auto;
}

.fn-hint {
  width: 100%;
  padding-left: 18px;
  color: var(--text);
  font-size: 13px;
}

.toggle-row {
  display: flex;
  gap: 16px;
}

.show-more-toggle {
  color: var(--muted-2);
  font-size: 10px;
  padding: 8px 0;
  cursor: pointer;
  text-align: left;
}

.show-more-toggle:hover {
  color: var(--text);
}

/* Function forms */
.function-form {
  border: 1px solid var(--c-orange-light);
  border-radius: 3px;
  margin: 4px 0 8px;
  background-color: var(--card-bg);
  color: var(--text);
}


.fn-name {
  font-weight: bold;
}

.fn-name.write {
  color: var(--c-pink);
}

.fn-name.read {
  color: var(--c-pink);
}

.fn-contract {
  color: var(--muted-3);
  font-size: 9px;
}

/* Badges */
.badge {
  font-size: 11px;
  padding: 0 4px;
  border-radius: 2px;
  margin-left: 6px;
}

.badge.write {
  color: var(--badge-write);
  border: 1px solid var(--badge-write);
}

.badge.payable {
  color: var(--badge-payable);
  border: 1px solid var(--badge-payable);
}

.badge.read {
  color: var(--badge-read);
  border: 1px solid var(--badge-read);
}

/* NatSpec documentation */
.fn-natspec {
  padding: 8px 12px;
  background: var(--card-bg);
}

.natspec-notice {
  color: var(--text);
  font-size: 13px;
  line-height: 1.4;
}

.natspec-details {
  color: var(--muted-3);
  font-size: 10px;
  margin-top: 4px;
  line-height: 1.4;
}

/* Parameter description hint */
.param-description {
  color: var(--muted-3);
  font-size: 10px;
  margin-bottom: 4px;
  line-height: 1.4;
}

/* Form inputs */
.fn-inputs {
  padding: 12px;
}

.input-group {
  margin-bottom: 16px;
}

.input-label {
  color: var(--muted-2);
  font-size: 11px;
  font-weight: bold;
  margin-bottom: 2px;
  display: block;
}

.type-hint {
  color: var(--c-orange);
  font-weight: normal;
}

.field {
  background: var(--input-bg);
  border: 1px solid var(--c-black-light);
  padding: 6px 8px;
  border-radius: 3px;
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  width: 100%;
  display: block;
}

.field:focus {
  border-color: var(--c-black);
  outline: none;
}

.field.optional-field {
  border-color: var(--c-orange-light);
}

.field.optional-field:focus {
  border-color: var(--c-orange);
}

/* Cap field widths by type */
.field.numeric-field {
  max-width: 320px;
}

.field.address-field {
  max-width: 320px;
}

.field.string-field {
  max-width: 320px;
  resize: vertical;
  min-height: 24px;
}

.field.uri-field {
  max-width: 480px;
  resize: vertical;
  min-height: 24px;
}

.field.bytes-field {
  max-width: 480px;
  resize: vertical;
  min-height: 28px;
  font-size: 11px;
  word-break: break-all;
}

/* Token/beneficiary pills */
.token-pills {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.pill {
  background: none;
  border: 1px solid var(--muted-4);
  padding: 2px 8px;
  color: var(--c-pink);
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
  font-size: 10px;
}

.pill:hover {
  font-weight: bold;
}

.pill.selected {
  background: var(--c-teal-light);
  border-color: var(--c-teal);
  color: var(--c-black);
}

.pill.pill-connect {
  border-color: var(--c-green);
  color: var(--c-green);
}

/* Resolved address display */
.resolved-address {
  background: var(--input-bg);
  border: 1px solid var(--muted-4);
  padding: 3px 8px;
  border-radius: 2px;
  color: var(--muted-3);
  font-size: 10px;
}

/* Field + decimal input inline */
.field-with-decimals {
  display: flex;
  gap: 6px;
  align-items: center;
}

.field-with-decimals .field {
  flex: 1;
}

.decimal-field-label {
  color: var(--muted-3);
  font-size: 9px;
  flex-shrink: 0;
}

/* Decimal helper row */
.decimal-helper {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.decimal-label {
  color: var(--muted);
  font-size: 9px;
}

.decimal-pills {
  display: flex;
  gap: 2px;
}

.decimal-pill {
  background: none;
  border: 1px solid var(--muted-4);
  padding: 0 6px;
  color: var(--c-pink);
  border-radius: 2px;
  cursor: pointer;
  font-family: inherit;
  font-size: 9px;
}

.decimal-pill.selected {
  background: var(--c-pink-light);
  border-color: var(--c-orange-light);
  color: var(--c-black);
}

.decimal-input {
  width: 36px !important;
  max-width: 36px !important;
  padding: 1px 4px;
  font-size: 9px;
  text-align: center;
  color: var(--muted);
}

/* Conversion hint */
.conversion-hint {
  font-size: 9px;
  color: var(--muted);
  margin-top: 2px;
}

/* Payable msg.value */
.value-separator {
  border-top: none;
  margin: 10px 0;
}

.payable-label {
  color: var(--c-green);
}


.payable-field {
  background: var(--input-bg);
  border-color: var(--write);
  color: var(--text);
}

/* Tuple (struct) groups */
.tuple-group {
  border: 1px solid var(--muted-4);
  border-radius: 3px;
  margin-bottom: 8px;
  padding: 8px;
  background: var(--card-bg);
}

.tuple-label {
  color: var(--text);
  font-size: 10px;
  font-weight: bold;
  margin-bottom: 6px;
}

/* Array groups */
.array-group {
  margin-bottom: 10px;
}

.array-item {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  margin-bottom: 4px;
}

.array-index {
  color: var(--muted);
  font-size: 10px;
  min-width: 24px;
  padding-top: 4px;
}

.array-controls {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}

.btn-array-add, .btn-array-remove {
  background: var(--card-bg);
  border: 1px solid var(--c-orange-light);
  color: var(--muted);
  padding: 2px 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  border-radius: 3px;
}

.btn-array-add:hover { color: var(--c-green); border-color: var(--c-green); }
.btn-array-remove:hover { color: var(--c-pink); border-color: var(--c-pink); }

/* Action buttons */
.fn-actions {
  padding: 8px 12px 12px;
  display: flex;
  gap: 8px;
}

.btn {
  padding: 6px 20px;
  border-radius: 2px;
  font-weight: bold;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  border: none;
}

.btn-transact {
  background: var(--transact-bg);
  color: var(--bg);
}

.btn-query {
  background: var(--query-bg);
  color: var(--bg);
}

.btn-simulate {
  background: none;
  color: var(--c-green);
  border: 1px solid var(--c-green);
}

.btn-connect {
  background: var(--transact-bg);
  color: var(--bg);
}


.btn:hover {
  opacity: 0.9;
}

/* Results */
.fn-output {
  padding: 0 12px;
}

.result-box {
  background: var(--card-bg);
  border: 1px solid var(--c-orange-light);
  padding: 8px;
  border-radius: 3px;
  font-size: 10px;
  margin-bottom: 12px;
}

.result-row {
  padding: 1px 0;
}

.result-label {
  color: var(--muted);
}

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

.result-annotation {
  color: var(--muted-2);
}

.result-nested {
  padding-left: 12px;
}

.copyable {
  cursor: pointer;
}

.copyable:hover {
  color: var(--badge-read);
}

.copyable.copied {
  color: var(--write);
}

/* Transaction success */
.tx-success {
  color: var(--write);
  padding: 8px;
  background: var(--c-green-light);
  border: 1px solid var(--c-green);
  border-radius: 3px;
  font-size: 11px;
  margin-bottom: 12px;
}

.sim-success {
  color: var(--write);
  font-size: 11px;
  margin-bottom: 8px;
}

/* Errors */
.error-box {
  padding: 8px;
  border-radius: 2px;
  font-size: 11px;
  margin-bottom: 12px;
}

.error-box.error {
  color: var(--error);
  background: var(--c-pink-light);
  border: 1px solid var(--c-pink);
}

.error-box.warning {
  color: var(--c-orange);
  background: var(--c-orange-light);
  border: 1px solid var(--c-orange);
}

.error-box.muted {
  color: var(--muted);
  background: var(--card-bg);
  border: 1px solid var(--c-orange-light);
}

/* Footer */
footer {
  text-align: center;
  padding: 24px 16px;
  color: var(--muted-3);
  font-size: 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--muted-4);
  margin-top: 40px;
}

.footer-logo img {
  width: 200px;
  height: 200px;
}

.footer-meta {
  display: flex;
  justify-content: center;
  gap: 16px;
}
.footer-meta a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.footer-meta a:hover { color: var(--c-teal); }
.footer-open-source { margin: 0; font-size: 10px; color: var(--muted-2); }
.footer-open-source a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.footer-open-source a:hover { color: var(--c-teal); }
.footer-terms { margin: 0; max-width: 680px; font-size: 10px; line-height: 1.5; color: var(--muted-2); }
.time-zone-note {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  margin-top: 5px; color: var(--muted-2); font-size: 10px; line-height: 1.4;
}
.time-zone-select {
  min-height: 28px; max-width: 100%; padding: 3px 24px 3px 7px;
  border: 1px solid var(--muted-4); background-color: var(--card-bg); color: var(--muted);
  font: inherit; cursor: pointer;
}
.time-zone-select:hover { border-color: var(--muted-2); color: var(--text); }
.time-zone-select:focus-visible { outline: 1px solid var(--c-teal); outline-offset: 1px; }
/* Safe-queue DELEGATECALL warning badge */
.backoffice-warn { color: var(--warning); font-weight: 600; }

/* Checkbox styling for bool inputs */
input[type="checkbox"].field {
  width: auto;
  display: inline;
}

/* --- Components tab --- */

.component-wrapper {
  max-width: var(--c-max-width, 520px);
  border: var(--c-border-width, 1px) solid var(--c-border, var(--c-orange-light));
  border-radius: var(--c-radius, 3px);
  background: var(--c-bg, var(--card-bg));
  color: var(--c-text, var(--text));
  font-family: var(--c-font, inherit);
  font-size: var(--c-label-size, 12px);
  margin-bottom: 20px;
  flex-shrink: 0;
}

.component-wrapper.component-wrapper-wide {
  max-width: var(--c-max-width-wide, 820px);
}

/* Cascade radius to ALL inner elements */
.component-wrapper .chain-pill,
.component-wrapper .pill,
.component-wrapper .field,
.component-wrapper .btn,
.component-wrapper .pay-preview,
.component-wrapper .network-dropdown,
.component-wrapper .token-dropdown,
.component-wrapper .pay-memo,
.component-wrapper .pay-beneficiary-input {
  border-radius: var(--c-radius, 3px);
}
.component-wrapper .pay-amount-input {
  border-radius: var(--c-radius, 3px) 0 0 var(--c-radius, 3px);
}
.component-wrapper .pay-currency-btn {
  border-radius: 0;
}
.component-wrapper .pay-btn {
  border-radius: 0 var(--c-radius, 3px) var(--c-radius, 3px) 0;
}
/* Cascade max-width to inner fields */
.component-wrapper .field {
  max-width: calc(var(--c-max-width, 520px) - var(--c-padding, 14px) * 2);
}

/* Cascade input bg to fields */
.component-wrapper .field {
  background: var(--c-input-bg, var(--input-bg));
  color: var(--c-text, var(--text));
  border-color: var(--c-field-border, var(--c-black-light));
  font-size: var(--c-body-size, 12px);
}

.component-wrapper .field.optional-field {
  border-color: var(--c-optional-border, var(--c-orange-light));
}

.component-wrapper .field.payable-field {
  border-color: var(--write);
}

/* Cascade font sizes by role */
.component-wrapper .input-label,
.component-wrapper .component-section .input-label {
  font-size: var(--c-label-size, 12px);
  color: var(--c-text, var(--text));
}

.component-wrapper .chain-pill.selected,
.component-wrapper .pill.selected {
  border-color: var(--c-accent, var(--c-green));
  color: var(--c-accent, var(--c-green));
  background: color-mix(in srgb, var(--c-accent, var(--c-green)) 10%, var(--card-bg));
}

.component-wrapper .chain-pill,
.component-wrapper .pill {
  border-color: var(--c-border, var(--pill-border));
  background: var(--c-input-bg, var(--pill-bg));
  font-size: var(--c-body-size, 10px);
}

.component-wrapper .fn-actions {
  flex-wrap: wrap;
}

.component-wrapper .btn {
  font-size: var(--c-body-size, 12px);
}

.component-wrapper .btn-transact,
.component-wrapper .btn-connect {
  background: var(--c-accent, var(--transact-bg));
}

.component-wrapper .btn-query {
  background: var(--c-accent, var(--query-bg));
}

.component-wrapper .network-dropdown,
.component-wrapper .token-dropdown {
  background-color: var(--c-input-bg, var(--card-bg));
  color: var(--c-text, var(--text));
  border-color: var(--c-border, var(--c-teal-light));
  font-size: var(--c-body-size, 11px);
}

/* Styled selects inside components */
.component-wrapper select.field {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23666'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 24px;
  cursor: pointer;
}


/* Cascade border-width to inner elements */
.component-wrapper .field,
.component-wrapper .chain-pill,
.component-wrapper .pill,
.component-wrapper .pay-preview {
  border-width: var(--c-border-width, 1px);
}

/* Permission note below action button */
.component-permission-note {
  color: var(--muted-3);
  font-size: inherit;
  margin-top: 6px;
  width: 100%;
  flex-basis: 100%;
}

.component-body {
  padding: var(--c-padding, 14px);
}

.component-wrapper .pay-preview {
  background: var(--c-input-bg, var(--card-bg));
  border-color: var(--c-border, var(--c-teal-light));
  color: var(--c-text, var(--text));
}

/* Components top bar */


/* Style editor panel — absolute within tab, top-right */

.style-editor {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  padding: 10px 14px;
  background: var(--card-bg);
  border: 1px solid var(--c-orange-light);
  border-radius: 3px;
  font-size: 10px;
  max-width: 240px;
  box-shadow: 0 2px 8px rgba(44,32,24,0.08);
}

@media (max-width: 600px) {
  .style-editor {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: none;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 -4px 16px rgba(44,32,24,0.15);
    max-height: 70vh;
    overflow-y: auto;
  }

  .style-editor-grid {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px 12px !important;
  }
}

.style-editor-close {
  position: absolute;
  top: 4px;
  right: 6px;
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  color: var(--muted-3);
  cursor: pointer;
  padding: 4px 6px;
  z-index: 11;
}

.style-editor-close:hover {
  color: var(--text);
}


.style-editor-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.style-editor-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.style-editor-label {
  color: var(--muted-2);
  font-size: 9px;
  min-width: 55px;
  flex-shrink: 0;
}

.style-editor-color-group {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 1;
}

.style-editor-color {
  width: 22px;
  height: 18px;
  border: 1px solid var(--c-orange-light);
  border-radius: 2px;
  padding: 0;
  cursor: pointer;
  background: none;
  flex-shrink: 0;
}

.style-editor-hex {
  width: 62px;
  border: 1px solid var(--c-orange-light);
  border-radius: 2px;
  padding: 1px 3px;
  font-family: inherit;
  font-size: 9px;
  color: var(--text);
  background: var(--input-bg);
}

.style-editor-hex:focus {
  border-color: var(--focus-ring);
}

.style-editor-range {
  width: 60px;
  height: 8px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--c-black-light);
  border-radius: 4px;
  background: transparent;
}

.style-editor-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--c-black);
  border: none;
  cursor: pointer;
}

.style-editor-range::-moz-range-track {
  height: 8px;
  border: 1px solid var(--c-black-light);
  border-radius: 4px;
  background: transparent;
}

.style-editor-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--c-black);
  cursor: pointer;
  border: none;
}

.style-editor-value {
  color: var(--muted-3);
  font-size: 9px;
  min-width: 28px;
  text-align: right;
}

.style-editor-select {
  border: 1px solid var(--c-orange-light);
  background: var(--input-bg);
  color: var(--text);
  font-family: inherit;
  font-size: 9px;
  padding: 1px 4px;
  border-radius: 2px;
  cursor: pointer;
}

.style-editor-section {
  font-size: 8px;
  font-weight: bold;
  color: var(--muted-3);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 6px;
  margin-bottom: 2px;
  border-top: 1px solid var(--muted-4);
  padding-top: 6px;
}


.component-section {
  margin-bottom: 14px;
}

.component-section:last-child {
  margin-bottom: 0;
}

.component-section .input-label {
  margin-bottom: 4px;
}

/* Pay preview box */
.pay-preview {
  background: var(--card-bg);
  border: 1px solid var(--c-orange-light);
  border-radius: 3px;
  padding: 10px;
  font-size: 11px;
}

.pay-preview .preview-row {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
}

.pay-preview .preview-label {
  color: var(--muted);
}

.pay-preview .preview-value {
  color: var(--text);
  font-weight: bold;
}

/* Buyback indicator badges */


/* Component status messages */
.component-status {
  font-size: 10px;
  color: var(--muted-2);
  padding: 4px 0;
}

.component-discovering {
  color: var(--read);
}


/* Inline token dropdown */
.token-dropdown {
  position: absolute;
  right: 1px;
  top: 1px;
  bottom: 1px;
  border: none;
  border-left: 1px solid var(--muted-4);
  background: var(--card-bg);
  color: var(--text);
  font-family: inherit;
  font-size: 11px;
  font-weight: bold;
  padding: 0 10px;
  cursor: pointer;
  border-radius: 0 var(--c-radius, 3px) var(--c-radius, 3px) 0;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23666'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 24px;
}

.token-dropdown:hover {
  background-color: var(--muted-4);
}

.token-dropdown:focus {
  outline: none;
  border-left-color: var(--focus-ring);
}

/* Inline network dropdown */
.network-dropdown {
  border: none;
  background: none;
  color: var(--muted-2);
  font-family: inherit;
  font-size: 10px;
  cursor: pointer;
  padding: 0 16px 0 2px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23999'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
}

.network-dropdown:hover {
  color: var(--text);
}

.network-dropdown:focus {
  outline: none;
}

/* Component picker pills */


/* Dashboard grid */


/* Permission selector */
.permission-group {
  margin-bottom: 8px;
}

.permission-group-header {
  font-size: 9px;
  font-weight: bold;
  color: var(--muted-2);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 4px 0 2px;
  border-bottom: 1px solid var(--c-border, var(--muted-4));
  margin-bottom: 2px;
}

.permission-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  cursor: pointer;
  font-size: 10px;
}

.permission-row:hover {
  background: rgba(44,32,24,0.02);
}

.permission-row input[type="checkbox"] {
  margin: 0;
  flex-shrink: 0;
}

.permission-id {
  color: var(--muted-3);
  font-size: 9px;
  min-width: 16px;
  text-align: right;
}

.permission-name {
  font-weight: bold;
  color: var(--c-text, var(--text));
  min-width: 120px;
}

.permission-desc {
  color: var(--muted-2);
  font-size: 9px;
}

/* Ruleset config sections */
.config-fieldset {
  border: 1px solid var(--c-border, var(--muted-4));
  border-radius: var(--c-radius, 3px);
  padding: 10px;
  margin-bottom: 10px;
}

.config-fieldset-title {
  font-size: 10px;
  font-weight: bold;
  color: var(--muted-2);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.config-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.config-row .input-label {
  width: 170px;
  flex-shrink: 0;
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
}

.config-row .field {
  flex: 1;
  min-width: 200px;
  max-width: 420px;
}

.config-row-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
  font-size: 11px;
}

.config-row-checkbox input[type="checkbox"] {
  margin: 0;
}

/* Slider controls in config rows */
.config-slider {
  flex: 1;
  max-width: 120px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  border: 1px solid var(--c-black-light);
  border-radius: 4px;
  background: transparent;
}

.config-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--c-black);
  border: none;
  cursor: pointer;
}

.config-slider::-moz-range-track {
  height: 8px;
  border: 1px solid var(--c-black-light);
  border-radius: 4px;
  background: transparent;
}

.config-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--c-black);
  cursor: pointer;
  border: none;
}

.config-slider-input {
  width: 48px;
  border: 1px solid var(--c-black-light);
  background: var(--c-input-bg, var(--input-bg));
  color: var(--c-text, var(--text));
  font-family: inherit;
  font-size: 10px;
  padding: 2px 4px;
  text-align: right;
  border-radius: var(--c-radius, 3px);
}

.config-slider-input:focus {
  outline: none;
  border-color: var(--c-black);
}

.config-percent-suffix {
  font-size: 10px;
  color: var(--muted-3);
}

.currency-pills {
  display: flex;
  gap: 4px;
}

/* Pretty / Raw view selector */
.fn-view-selector {
  margin-bottom: 8px;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.fn-component-title {
  font-weight: bold;
  font-size: 13px;
  color: var(--muted-1);
  margin-right: 4px;
}

.fn-view-dropdown {
  border: none;
  background: none;
  color: var(--c-black-light);
  font-family: inherit;
  font-size: 10px;
  cursor: pointer;
  padding: 0 16px 0 0;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%237d6858'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
}

.fn-view-dropdown:hover {
  color: var(--muted);
}

.fn-view-dropdown:focus {
  outline: none;
}

/* Copy prompt link in view selector */
.fn-copy-prompt {
  display: inline-block;
  color: var(--c-pink);
  font-size: 10px;
  cursor: pointer;
  text-decoration: none;
  margin: 0;
}

.fn-copy-prompt:hover {
  color: var(--c-black);
}

/* Style editor to the right of component */
.style-toggle-btn {
  color: var(--c-black-light);
  font-size: 10px;
  text-decoration: none;
  margin: 0;
}
.style-toggle-btn:hover {
  color: var(--muted);
}

.style-inline-wrap {
  margin-bottom: 8px;
}

.style-editor-inline {
  position: static;
  z-index: auto;
  padding: 6px 8px;
  background: var(--card-bg);
  border: 1px solid var(--c-orange-light);
  border-radius: 3px;
  font-size: 9px;
  box-shadow: none;
}

.style-editor-inline .style-editor-close {
  position: static;
  float: right;
  font-size: 14px;
  line-height: 1;
  margin: -2px 0 0 4px;
}

.style-editor-inline .style-editor-grid {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2px 12px;
}

.style-editor-inline .style-editor-section {
  width: 100%;
  margin-top: 4px;
  padding-top: 4px;
}

.style-editor-inline .style-editor-row {
  display: inline-flex;
  margin-right: 8px;
}

.style-editor-reset {
  color: var(--muted-3);
  font-size: 9px;
  text-decoration: none;
  margin-top: 10px;
  display: inline-block;
}

.style-editor-reset:hover {
  color: var(--muted);
}

/* Multiple rulesets */
.ruleset-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.ruleset-remove {
  border: none;
  background: none;
  color: var(--muted-3);
  font-family: inherit;
  font-size: 10px;
  cursor: pointer;
  padding: 2px 6px;
}

.ruleset-remove:hover {
  color: var(--error);
}

.add-ruleset-btn {
  border: 1px dashed var(--muted-4);
  background: none;
  color: var(--muted-2);
  font-family: inherit;
  font-size: 10px;
  cursor: pointer;
  padding: 6px 12px;
  width: 100%;
  margin: 8px 0;
  border-radius: var(--c-radius, 3px);
}

.add-ruleset-btn:hover {
  border-color: var(--muted-2);
  color: var(--text);
}

/* Nested editors (splits, fund access limits) */
.nested-editor {
  padding-left: 12px;
  margin-top: 8px;
}

.nested-group {
  border-left: 2px solid var(--muted-4);
  padding: 6px 0 6px 14px;
  margin-bottom: 14px;
}

.nested-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: bold;
  margin-bottom: 8px;
  letter-spacing: 0.3px;
}

.nested-index {
  color: var(--muted-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.5px;
}

/* datetime-local field — used for splits' "locked until" field */
.config-row .field.datetime-field {
  font-family: inherit;
  font-size: 12px;
  padding: 4px 6px;
  max-width: 260px;
}

.config-row .datetime-clear {
  font-size: 10px;
  color: var(--muted-2);
  text-decoration: none;
  margin-left: 4px;
}

.config-row .datetime-clear:hover {
  color: var(--c-pink);
  text-decoration: underline;
}

/* Ruleset fieldset header — share the same #N treatment as nested splits/groups */
.ruleset-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

/* Multi-chain picker for Launch */
.chain-multi-section {
  margin-top: 18px;
}

.chain-multi-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.nested-item {
  border-left: 1px solid var(--muted-4);
  padding: 6px 0 6px 12px;
  margin: 10px 0;
}

.nested-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

.add-nested-btn {
  border: none;
  background: none;
  color: var(--muted-3);
  font-family: inherit;
  font-size: 10px;
  cursor: pointer;
  padding: 2px 0;
  margin-top: 4px;
}

.add-nested-btn:hover {
  color: var(--text);
}

/* --- Learn, Build & Why guide tabs --- */

.guide-wrap {
  max-width: 720px;
}

.guide-agent-prompt {
  margin: 0 0 20px;
  color: var(--muted-2);
  font-size: 14px;
  line-height: 1.5;
}

.guide-agent-prompt button {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-weight: bold;
  text-decoration: underline;
  text-decoration-color: var(--c-teal);
  text-underline-offset: 4px;
  cursor: pointer;
}

.guide-agent-prompt button:hover {
  color: var(--c-teal);
}

.why-wrap {
  max-width: 760px;
}

.why-hero {
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--c-teal);
}

.why-kicker {
  color: var(--c-teal);
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.why-title {
  color: var(--text);
  font-size: 24px;
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: 10px;
}


/* Story (chapter) styling for the Why? page */


/* Paired project ID + chain field (pretty action components) */
.project-chain-section .project-chain-wrap {
  margin: 4px 0 6px;
}

.project-chain-section .project-chain-summary {
  color: var(--muted-2);
  font-size: 11px;
  text-decoration: none;
  cursor: pointer;
}

.project-chain-section .project-chain-summary:hover {
  color: var(--c-pink);
  text-decoration: underline;
}

.project-chain-section .project-chain-picker {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.project-chain-section .project-chain-select {
  margin-top: 6px;
}

/* "Wants" version of the Why? page */
.why-wants .why-hero {
  text-align: left;
  border-bottom-color: var(--c-orange-light);
}

.why-wants-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 24px;
}

.why-want {
  margin: 0;
  padding-left: 16px;
  border-left: 2px solid var(--c-teal);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
}

/* Poem rendering for the Why? page */


/* Table of Contents */
.guide-toc {
  border: 1px solid var(--c-orange-light);
  background: var(--card-bg);
  padding: 12px 16px;
  margin-bottom: 20px;
}

.guide-toc-title {
  font-weight: bold;
  font-size: 12px;
  color: var(--c-black);
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.guide-toc-group-label {
  font-weight: bold;
  font-size: 12px;
  color: var(--c-teal);
  margin-top: 4px;
  margin-bottom: 2px;
}

.guide-toc-link {
  display: block;
  color: var(--c-pink);
  text-decoration: none;
  font-size: 13px;
  /* WCAG 2.2 target-size floor without changing the compact guide rhythm. */
  min-height: 24px;
  padding: 3px 0;
  cursor: pointer;
}

.guide-toc-link:hover {
  color: var(--c-pink);
  font-weight: bold;
}

.guide-toc-link.indent {
  padding-left: 16px;
  color: var(--muted);
}

.guide-toc-link.indent:hover {
  color: var(--c-pink);
  font-weight: bold;
}

/* Part headers (Life of a Project, Life of a Revnet) */
.guide-part-header {
  font-weight: bold;
  font-size: 16px;
  color: var(--c-teal);
  letter-spacing: 1px;
  margin: 28px 0 8px;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--c-teal);
}

/* Sections */
.guide-section {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--c-orange-light);
}

.guide-section:last-child {
  border-bottom: none;
}

.guide-section-title {
  font-weight: bold;
  font-size: 15px;
  color: var(--c-pink);
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
/* Per-section link icon — sits right after the title, small + muted so it doesn't compete with the header. */
.guide-copy-link {
  display: inline-flex; align-items: center;
  color: var(--muted-2); background: none; border: none; cursor: pointer;
  padding: 0 2px; opacity: 0.5; flex: 0 0 auto;
}
.guide-copy-link:hover { opacity: 1; color: var(--c-teal); }
.guide-copy-link--ok { opacity: 1; color: var(--c-teal); }
.guide-info a, .guide-text a { color: var(--c-teal); text-decoration: none; border-bottom: 1px solid currentColor; }
/* "[copy build prompt]" text link, tight in the card's bottom-right corner (no padding of its own). */
.comp-prompt-foot { display: flex; justify-content: flex-end; box-sizing: border-box; width: 100%; margin-left: auto; padding: 0; margin-top: 12px; }
.comp-prompt-foot--left { justify-content: flex-start; }
.comp-prompt-link { font-family: inherit; font-size: 11px; color: var(--muted-2); background: none; border: none; cursor: pointer; padding: 0; opacity: 1; white-space: nowrap; }
.comp-prompt-link:hover { opacity: 1; color: var(--c-teal); }
.comp-prompt-link--ok { opacity: 1; color: var(--c-teal); }
/* In a modal/form the tag sits right under the submit button — give it room to breathe. */
.modal-panel > .comp-prompt-foot { margin-top: 14px; }
/* Inside the create wizard, match .create-foot's horizontal padding so the link right-aligns with Next. */
.create-sheet > .comp-prompt-foot { padding: 0 22px; }
/* Pre-deploy export: a small right-aligned action above the full-width Launch button. */
.create-predeploy-export-row { display: flex; justify-content: flex-end; margin: 14px 0 10px; }
.create-predeploy-export { font-size: 12px; }

/* "On [Mainnets ▾]" row — the network dropdown sits inline with the label, pay-box style. */
.create-net-row { display: flex; align-items: baseline; gap: 8px; margin-top: 18px; }
.create-net-row .create-label { margin: 0; }
.create-net-row .paybox-select {
  font-size: 13px; padding-right: 22px;
  background-position: calc(100% - 11px) 50%, calc(100% - 6px) 50%;
}

.guide-text {
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 8px;
}

/* Diagrams */
.guide-diagram {
  background: var(--card-bg);
  border: 1px solid var(--c-orange-light);
  margin: 10px 0;
  overflow-x: auto;
}

.guide-diagram-title {
  font-weight: bold;
  font-size: 11px;
  color: var(--muted-2);
  letter-spacing: 1px;
  padding: 6px 10px 0;
}

.guide-diagram-pre {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
  padding: 6px 10px 8px;
  white-space: pre;
  margin: 0;
}

/* Contract tables */


/* Property tables */
.guide-prop-table {
  margin: 8px 0;
  border: 1px solid var(--c-orange-light);
  background: var(--card-bg);
}

.guide-prop-title {
  font-weight: bold;
  font-size: 11px;
  color: var(--muted-2);
  letter-spacing: 1px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--c-orange-light);
}

.guide-prop-row {
  display: flex;
  gap: 12px;
  padding: 4px 10px;
  border-bottom: 1px solid var(--c-orange-light);
  align-items: baseline;
}

.guide-prop-row:last-child {
  border-bottom: none;
}

.guide-prop-name {
  font-size: 12px;
  color: var(--warning);
  min-width: 140px;
  flex-shrink: 0;
}

.guide-prop-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

/* Function reference tables */
.guide-fn-table {
  margin: 8px 0;
  border: 1px solid var(--c-orange-light);
  background: var(--card-bg);
}

.guide-fn-title {
  font-weight: bold;
  font-size: 11px;
  color: var(--muted-2);
  letter-spacing: 1px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--c-orange-light);
}

.guide-fn-row {
  display: flex;
  gap: 12px;
  padding: 4px 10px;
  border-bottom: 1px solid var(--c-orange-light);
  align-items: baseline;
}

.guide-fn-row:last-child {
  border-bottom: none;
}

.guide-fn-name {
  font-size: 12px;
  color: var(--read);
  min-width: 0;
  flex: 1;
  word-break: break-all;
}

.guide-fn-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  flex: 1;
}

/* Code blocks */
.guide-code {
  margin: 10px 0;
  border: 1px solid var(--c-teal-light);
  background: var(--card-bg);
  overflow-x: auto;
}

.guide-code-title {
  font-weight: bold;
  font-size: 11px;
  color: var(--warning);
  letter-spacing: 0.5px;
  padding: 6px 10px 0;
}

.guide-code-pre {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text);
  padding: 6px 10px 8px;
  white-space: pre;
  margin: 0;
}

/* Info boxes */
.guide-info {
  background: var(--c-pink-light);
  border: none;
  color: var(--c-pink);
  font-size: 12px;
  font-weight: bold;
  line-height: 1.5;
  padding: 8px 10px;
  margin: 8px 0;
}

/* Step lists */
.guide-steps {
  margin: 8px 0;
}

.guide-step {
  display: flex;
  gap: 8px;
  padding: 4px 0;
  align-items: baseline;
}

.guide-step-num {
  font-weight: bold;
  font-size: 12px;
  color: var(--write);
  min-width: 16px;
  text-align: right;
  flex-shrink: 0;
}

.guide-step-text {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  
  
  .guide-prop-row,
  .guide-fn-row {
    flex-direction: column;
    gap: 2px;
  }

  .guide-prop-name,
  .guide-fn-name {
    min-width: auto;
  }
}

/* --- Discover tab --- */

.discover-header {
  background: var(--c-pink-light);
  border: none;
  color: var(--c-pink);
  font-size: 12px;
  font-weight: bold;
  line-height: 1.5;
  padding: 8px 10px;
  margin-bottom: 12px;
  display: inline-block;
}
.discover-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.discover-search {
  display: block;
  flex: 1;
  max-width: 440px;
}
.discover-search input {
  width: 100%;
  min-height: 38px;
  box-sizing: border-box;
  border: 1px solid var(--c-orange-light);
  background: var(--card-bg);
  color: var(--text);
  font: inherit;
  padding: 8px 11px;
}
.discover-search input:focus {
  outline: 1px solid var(--c-pink);
  border-color: var(--c-pink);
}
.discover-search-empty {
  color: var(--muted);
  font-size: 12px;
  padding: 10px 0;
}
.discover-account-hit {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 440px;
  margin-bottom: 12px;
  padding: 8px 11px;
  background: var(--card-bg);
  border: 1px solid var(--c-orange-light);
  cursor: pointer;
  font-size: 13px;
}
.discover-account-hit:hover,
.discover-account-hit:focus {
  outline: 1px solid var(--c-pink);
  border-color: var(--c-pink);
}
.discover-account-hit-avatar { width: 18px; height: 18px; border-radius: 50%; flex: none; }
.discover-account-hit-kicker { color: var(--muted-2); font-weight: bold; white-space: nowrap; }
.discover-account-hit-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.discover-account-hit-sub { color: var(--muted-2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.discover-account-hit-view { margin-left: auto; color: var(--c-teal); white-space: nowrap; }

.discover-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.discover-card {
  width: 400px;
  background: var(--card-bg);
  border: 1px solid var(--c-orange-light);
  padding: 12px 14px;
}

.discover-card:hover {
  border-color: var(--c-pink);
}

/* Last-session values remain readable while Bendystraw confirms them. */
.revalidating {
  opacity: 0.72;
  background-image: linear-gradient(90deg, transparent 25%, rgba(255, 255, 255, 0.3) 50%, transparent 75%);
  background-size: 220% 100%;
  animation: revalidating-sweep 3.6s ease-in-out infinite;
}
@keyframes revalidating-sweep {
  from { background-position: 110% 0; }
  to { background-position: -110% 0; }
}

.discover-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.discover-card-logo {
  width: 28px;
  height: 28px;
  border-radius: 3px;
  color: var(--bg);
  font-weight: bold;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.discover-card-name {
  font-weight: bold;
  font-size: 13px;
  color: var(--text);
}


.discover-card-desc {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 10px;
}

.discover-card-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px 12px;
}

.discover-stat-label {
  font-size: 9px;
  color: var(--muted-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.discover-stat-value {
  font-size: 11px;
  font-weight: bold;
  color: var(--text);
}

/* -- Project Detail Page -- */

.project-detail {
  max-width: 1200px;
}

.project-detail-columns {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.project-detail-left {
  width: 384px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.project-detail-right {
  flex: 1;
  min-width: 0;
}

/* Pay Panel */

.pay-amount-row {
  display: flex;
  gap: 0;
  margin-bottom: 10px;
}

.pay-amount-input {
  flex: 1;
  font-family: inherit;
  font-size: 16px;
  font-weight: bold;
  padding: 8px 10px;
  border: 2px solid var(--write);
  border-right: none;
  background: var(--card-bg);
  color: var(--text);
  min-width: 0;
}

.pay-amount-input::-webkit-outer-spin-button,
.pay-amount-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.pay-amount-input[type=number] {
  -moz-appearance: textfield;
}

.pay-amount-input:focus {
  outline: none;
  border-color: var(--write);
}

.pay-currency-btn {
  font-family: inherit;
  font-size: 12px;
  font-weight: bold;
  padding: 8px 26px 8px 14px;
  width: auto;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
  background:
    linear-gradient(45deg, transparent 50%, var(--muted-2) 50%) calc(100% - 16px) 50% / 5px 5px no-repeat,
    linear-gradient(135deg, var(--muted-2) 50%, transparent 50%) calc(100% - 11px) 50% / 5px 5px no-repeat,
    var(--card-bg);
  border: 2px solid var(--write);
  border-right: none;
  color: var(--muted-2);
  cursor: pointer;
}

.pay-currency-btn:hover {
  color: var(--text);
}

.pay-btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: bold;
  padding: 8px 20px;
  border: 2px solid var(--write);
  background: var(--c-green-light);
  color: var(--text);
  cursor: pointer;
}

.pay-btn:hover {
  opacity: 0.9;
}

.pay-you-get {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
}

.pay-you-link {
  border-bottom: 1px dotted var(--muted);
  cursor: pointer;
  font-weight: bold;
  color: var(--text);
}

.pay-you-link:hover {
  border-bottom-color: var(--c-teal);
  color: var(--c-teal);
}

.pay-beneficiary-wrap {
  margin-bottom: 10px;
}

.pay-beneficiary-input {
  width: 100%;
  padding: 6px 8px;
  font-family: inherit;
  font-size: 11px;
  border: 1px solid var(--c-black-light);
  background: var(--input-bg);
  color: var(--text);
  border-radius: 2px;
}

.pay-beneficiary-input:focus {
  outline: none;
  border-color: var(--c-black);
}

.pay-memo {
  width: 100%;
  font-family: inherit;
  font-size: 12px;
  padding: 6px 8px;
  border: 2px solid var(--c-orange-light);
  background: var(--card-bg);
  color: var(--text);
}

.pay-memo::placeholder {
  color: var(--muted-3);
}

.pay-memo:focus {
  outline: none;
  border-color: var(--c-orange);
}


.detail-back {
  display: inline-block;
  font-size: 20px;
  line-height: 1;
  font-family: inherit;
  color: var(--c-black);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  margin-bottom: 12px;
}

.detail-back:hover {
  color: var(--c-teal);
}

.project-detail-header {
  margin-bottom: 16px;
}

.project-contract-audit {
  margin: -4px 0 18px;
}

.project-contract-warning {
  border: 1px solid var(--c-orange);
  background: rgba(184, 96, 46, 0.08);
  color: var(--c-orange);
  padding: 10px 12px;
}

.project-contract-warning-title {
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.project-contract-warning-copy {
  font-size: 12px;
  line-height: 1.45;
  color: var(--c-orange);
  margin-bottom: 8px;
}

.project-contract-warning-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.project-contract-warning-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  line-height: 1.45;
}

.project-contract-warning-left {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-width: 190px;
  color: var(--text);
  font-weight: bold;
}

.project-contract-warning-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}

.project-contract-warning-note {
  color: var(--muted-2);
}

@media (max-width: 600px) {
  .discover-top { flex-wrap: wrap; }
  .discover-search {
    order: 3;
    flex-basis: 100%;
    max-width: none;
  }
  .project-contract-warning-row {
    flex-direction: column;
    gap: 3px;
  }
  .project-contract-warning-left {
    min-width: 0;
  }
  .project-contract-warning-right {
    align-items: flex-start;
    text-align: left;
  }
}

.detail-head-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.detail-logo {
  width: 64px;
  height: 64px;
  border-radius: 4px;
  color: var(--bg);
  font-weight: bold;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}


.detail-name-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}

.detail-sym {
  font-weight: bold;
  font-size: 20px;
  color: var(--text);
}

.detail-name {
  font-weight: normal;
  font-size: 18px;
  color: var(--text);
}

.detail-tagline {
  font-size: 13px;
  color: var(--muted-2);
  margin: 2px 0 0;
  line-height: 1.35;
}

.detail-head-stats {
  font-size: 13px;
  color: var(--muted-2);
  margin-top: 4px;
}
.detail-head-stats strong { color: var(--text); font-weight: bold; }

/* USD balance with per-chain hover breakdown */
.usd-balance { position: relative; display: inline-block; }
.usd-balance-fig { color: var(--text); font-weight: bold; }
.usd-balance--has-pop .usd-balance-fig {
  cursor: default;
}
.usd-balance-pop {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  z-index: 40;
  min-width: 200px;
  padding: 8px 10px;
  background: var(--card-bg);
  border: 1px solid var(--c-pink-light);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(44, 32, 24, 0.12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.usd-balance--has-pop:hover .usd-balance-pop {
  opacity: 1;
  visibility: visible;
}
.usd-balance-pop-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
  line-height: 1.7;
  white-space: nowrap;
}
.usd-balance-pop-chain { color: var(--muted-2); }
.usd-balance-pop-amt { color: var(--text); font-variant-numeric: tabular-nums; }
.usd-balance-pop-row--empty { opacity: 0.5; }
.usd-balance-pop-total {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--c-pink-light);
  font-weight: bold;
}
.usd-balance-pop-total .usd-balance-pop-chain { color: var(--text); }

.detail-head-meta {
  font-size: 12px;
  color: var(--muted-2);
  margin-top: 5px; /* each meta row is its own block (Flavor|On / Operator / Site); matches the Discover card */
}
.detail-head-meta a { color: inherit; }
.detail-head-meta a:hover { color: var(--c-teal); }
.detail-head-lbl { color: var(--muted-2); }
.detail-head-val { color: var(--text); font-weight: bold; }
/* Inline "|" separator (stat line: "$X balance | N owners"). Same pink-light + spacing as the meta-line pairs. */
.detail-head-sep { color: var(--c-pink-light); margin: 0 7px; }
/* Keep each "label: value" together when the meta line wraps (no orphaned labels), and draw the
   "|" separator INSIDE each pair (via ::after) so it trails the previous line on a wrap rather than
   starting the next line. Pairs are joined by a single breakable space (the wrap point). */
.detail-head-pair { white-space: nowrap; }
.detail-head-pair:not(:last-child)::after { content: '|'; color: var(--c-pink-light); margin-left: 7px; }
.detail-head-url { white-space: normal; overflow-wrap: anywhere; } /* long site URLs may still break */
.detail-about-desc { margin-bottom: 12px; }
.detail-about-para { margin: 0 0 10px; }
.detail-about-para:last-child { margin-bottom: 0; }
.detail-about-empty { color: var(--muted-2); font-style: italic; }
.detail-about-logo {
  display: block; width: 72px; height: 72px; object-fit: cover; border-radius: 4px;
  border: 1px solid var(--c-orange-light); margin-bottom: 10px;
}
.detail-about-tagline { font-size: 13px; color: var(--text); margin-bottom: 10px; line-height: 1.4; }
.detail-about-links { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.about-link-row { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; font-size: 12px; }
.about-link-key { color: var(--muted-2); white-space: nowrap; }
.about-link-url { color: var(--muted-2); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; min-width: 0; }
.about-link-url:hover { color: var(--c-teal); }

/* Safe badge — small clickable icon shown next to an address that resolves to a Gnosis Safe. */
.address-with-safe { display: inline-flex; align-items: center; gap: 4px; }
.safe-badge-slot { display: inline-flex; align-items: center; vertical-align: -0.15em; }
.safe-badge {
  display: inline-flex; align-items: center; justify-content: center; padding: 0; margin-left: 2px;
  background: none; border: none; cursor: pointer; color: var(--muted-2); vertical-align: -0.15em;
}
.safe-badge svg { width: 13px; height: 13px; display: block; }
.safe-badge:hover { color: var(--c-teal); }
/* Safe details modal. */
.safe-modal .safe-policy { font-size: 13px; color: var(--text); margin-bottom: 10px; }
.safe-modal .safe-policy strong { color: var(--c-teal); }
.safe-modal .safe-addr { margin-bottom: 14px; }
.safe-addr-raw { display: block; color: var(--muted-2); font-size: 12px; margin-top: 2px; word-break: break-all; }
.safe-signers-label { font-size: 11px; color: var(--muted-2); margin-bottom: 6px; }
.safe-signers { display: flex; flex-direction: column; gap: 6px; }
.safe-signer { font-size: 12px; }
.safe-applink { display: inline-block; margin-top: 14px; font-size: 12px; color: var(--muted-2); text-decoration: underline; }
.safe-applink:hover { color: var(--c-teal); }

/* Operator CTAs — subtle underlined text actions, no buttons. */
.detail-about-foot { display: flex; justify-content: flex-start; margin-top: 10px; }
.shop-foot { justify-content: flex-start; align-items: center; gap: 14px; }
.shop-collection-addr { font-size: 11px; color: var(--muted-2); }
.shop-config { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--c-orange-light); }
.shop-config summary { cursor: pointer; color: var(--text); font-size: 12px; font-weight: bold; list-style-position: inside; }
.shop-config-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 0; }
.shop-config-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; font-size: 12px; }
.shop-config-row dt { color: var(--muted-2); }
.shop-config-row dd { margin: 0; color: var(--text); font-weight: bold; }
.shop-config-unavailable { margin-top: 10px; color: var(--muted-2); font-size: 12px; }
.operator-cta {
  font-size: 11px; color: var(--muted-2); text-decoration: underline; cursor: pointer;
  text-underline-offset: 2px;
}
.operator-cta:hover { color: var(--c-teal); }

/* Edit-description modal. */
.operator-edit .operator-gate {
  font-size: 12px; color: var(--c-pink); background: var(--c-pink-light);
  border: none; font-weight: bold; padding: 8px 10px; margin-bottom: 12px; line-height: 1.5;
}
.operator-gate-addr { font-weight: bold; }
.operator-edit-label { font-size: 12px; font-weight: bold; color: var(--text); margin-bottom: 4px; }
.operator-edit-textarea {
  width: 100%; box-sizing: border-box; font-family: inherit; font-size: 12px; line-height: 1.5;
  padding: 8px 10px; border: 1px solid var(--c-orange-light); background: var(--card-bg);
  color: var(--text); border-radius: 2px; resize: vertical;
}
.operator-edit-textarea:focus { outline: none; border-color: var(--c-teal); }
/* Custom-properties JSON editor: keep the operator's indentation, and read as inert while it loads. */
.operator-edit-json { white-space: pre; overflow-x: auto; tab-size: 2; }
.operator-edit-json:disabled { color: var(--muted-2); cursor: progress; }
.operator-edit-across { font-size: 11px; color: var(--muted-2); margin-top: 8px; line-height: 1.4; }
.project-handle-location { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.project-handle-location a { color: inherit; text-decoration: underline; }
.operator-edit-hint { color: var(--muted-2); font-weight: normal; }
.operator-edit-hint a { text-decoration: underline; }
.operator-edit-jwt {
  width: 100%; box-sizing: border-box; font-family: inherit; font-size: 12px;
  padding: 7px 10px; margin-top: 4px; border: 1px solid var(--c-orange-light);
  background: var(--card-bg); color: var(--text); border-radius: 2px;
}
.operator-edit-jwt:focus { outline: none; border-color: var(--c-teal); }
/* A little breathing room between consecutive fields. */
.operator-edit-jwt, .operator-edit-textarea, .operator-cat-select { margin-bottom: 14px; }
.operator-chain-addresses {
  display: grid; gap: 6px; margin: 4px 0 8px;
}
.operator-chain-address-row {
  display: grid; grid-template-columns: minmax(116px, 0.75fr) minmax(0, 2fr);
  gap: 10px; align-items: start; padding: 6px 0;
}
.operator-chain-address-row.disabled { opacity: 0.5; }
.operator-chain-address-chain {
  display: inline-flex; align-items: center; gap: 8px; min-height: 34px;
  font-size: 12px; color: var(--text); font-weight: bold; min-width: 0;
}
.operator-chain-address-chain .chain-logo { width: 16px; height: 16px; flex: 0 0 16px; margin: 0; }
.operator-chain-address-field { min-width: 0; }
.operator-chain-address-input { margin: 0; }
.operator-chain-address-compact {
  margin-top: 4px; font-size: 11px;
}
.operator-chain-address-compact .operator-chain-addresses {
  margin-top: 6px;
}
.operator-chain-address-foot {
  display: flex; justify-content: flex-end; margin-top: 2px;
}
.operator-chain-address-toggle {
  display: inline-block; margin-top: 2px;
}
.operator-edit-token-name {
  min-height: 16px; margin-top: 3px; font-size: 11px; line-height: 1.35;
  color: var(--muted-2); overflow-wrap: anywhere;
}
.operator-edit-token-name.warn { color: var(--c-pink); font-weight: bold; }
.operator-edit .operator-edit-label { margin-top: 12px; }
.operator-edit .operator-edit-label:first-child { margin-top: 0; }
.operator-edit-logo { display: flex; align-items: center; gap: 10px; margin-top: 4px; margin-bottom: 24px; }
.operator-edit-logo-prev {
  width: 40px; height: 40px; object-fit: cover; border: 1px solid var(--c-orange-light); background: var(--card-bg);
}
.operator-edit-audio-prev { display: flex; align-items: center; justify-content: center; box-sizing: border-box; color: var(--c-teal); font-size: 25px; line-height: 1; }
.operator-edit-logo-file { font-size: 11px; color: var(--muted-2); flex: 1 1 auto; min-width: 0; }
.operator-edit-logo-clear { flex: 0 0 auto; color: var(--muted-2); text-decoration: none; font-size: 13px; line-height: 1; padding: 0 4px; }
.operator-edit-logo-clear:hover { color: var(--c-pink); }
.operator-edit-mediamsg { font-size: 11px; color: var(--muted-2); margin-top: 6px; line-height: 1.45; }
.operator-edit-mediamsg.warn { color: var(--c-orange); }
.operator-edit-mediamsg.ok { color: var(--c-green); }
.operator-adv-toggle { display: inline-block; margin-top: 12px; font-size: 11px; }
.operator-cat-select {
  display: block; width: 100%; box-sizing: border-box; font-family: inherit; font-size: 12px;
  padding: 7px 28px 7px 10px; border: 1px solid var(--c-orange-light); background: var(--card-bg); color: var(--text); border-radius: 2px;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237d5a4e' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 10px 6px;
}
.operator-cat-select:focus { outline: none; border-color: var(--c-teal); }
.operator-cat-add { margin-top: 6px; }
.operator-cat-names { display: flex; flex-direction: column; gap: 6px; }
.operator-cat-namerow { display: flex; align-items: center; gap: 6px; }
.operator-cat-namerow .splits-edit-addr { flex: 1 1 auto; min-width: 0; }
.operator-cat-another { display: inline-block; margin-top: 6px; font-size: 11px; }
.operator-cat-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
.operator-cat-add .operator-edit-status { margin-top: 6px; }
.cat-id { font-size: 11px; color: var(--muted-2); min-width: 24px; }

@media (max-width: 560px) {
  .operator-chain-address-row { grid-template-columns: 1fr; gap: 4px; }
  .operator-chain-address-chain { min-height: 0; }
}
.operator-edit-adv { margin-top: 10px; }
.operator-edit-adv .operator-edit-label:first-child { margin-top: 0; }
.operator-split-section { margin-top: -6px; margin-bottom: 24px; }
.operator-flag-row { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text); cursor: pointer; margin-top: 8px; }
.operator-flag-row.disabled { opacity: 0.4; cursor: not-allowed; }
.operator-flag-row input { accent-color: var(--c-teal); }
.operator-edit-sub { font-size: 11px; color: var(--muted-2); margin: 2px 0 5px; line-height: 1.4; }
.operator-reserve-freqrow { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text); margin-top: 4px; }
.operator-inline-num { width: 80px; flex: 0 0 auto; margin: 0 !important; }
.operator-inline-addr { flex: 1 1 auto; min-width: 0; margin: 0 !important; }
.operator-inv-section { margin-bottom: 24px; }
.operator-flag-sub { font-size: 11px; color: var(--muted-2); margin: 1px 0 0 19px; line-height: 1.4; }
.operator-edit-status { font-size: 11px; color: var(--muted-2); margin-top: 10px; word-break: break-word; }
.operator-edit-status.pending { color: var(--c-teal); }
.operator-edit-status.error { color: var(--c-pink); }
.operator-edit-status.success { color: var(--c-green); }
.operator-edit-actions { display: flex; justify-content: flex-end; gap: 16px; align-items: center; margin-top: 12px; }
.relayr-pending-panel { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--c-teal); background: color-mix(in srgb, var(--c-teal) 5%, transparent); font-size: 11px; }
.relayr-pending-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--text); }
.relayr-pending-count { color: var(--c-teal); white-space: nowrap; }
.relayr-pending-count.err { color: var(--c-pink); }
.relayr-pending-meta { margin-top: 5px; color: var(--muted-2); overflow-wrap: anywhere; }
.relayr-pending-meta code { color: var(--text); font-family: inherit; }
.relayr-pending-chains { margin-top: 8px; border-top: 1px solid var(--c-orange-light); }
.relayr-pending-chain { display: flex; justify-content: space-between; gap: 12px; padding-top: 6px; }
.relayr-pending-chain-state { text-align: right; }
.relayr-pending-chain-state.ok { color: var(--c-green); }
.relayr-pending-chain-state.err { color: var(--c-pink); }
.relayr-pending-chain-state.pending { color: var(--c-teal); }
.relayr-pending-note { margin-top: 9px; color: var(--muted-2); line-height: 1.4; }
.relayr-pending-action, .relayr-pending-clear { font: inherit; cursor: pointer; }
.relayr-pending-action { border: 0; padding: 0; background: none; }
.relayr-pending-action:disabled { cursor: wait; opacity: 0.6; }
.relayr-pending-clear { border: 0; padding: 0; background: none; color: var(--muted-2); text-decoration: underline; }
.relayr-pending-panel .relayr-pending-clear { display: inline-block; margin-top: 10px; }
/* Staged multi-item list in the "Add items for sale" modal. */
.tier-staged { border: 1px solid var(--c-orange-light); padding: 10px 14px; margin-top: 16px; }
.tier-staged-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 0; font-size: 13px; }
.operator-edit-submit {
  font-family: inherit; font-size: 13px; font-weight: bold; padding: 6px 18px;
  border: 2px solid var(--write); background: var(--c-green-light); color: var(--c-black);
  text-decoration: none; display: inline-block;
}
.operator-edit-submit:hover { color: var(--c-black); opacity: 0.9; }
.operator-edit-submit.disabled { opacity: 0.55; cursor: wait; }
.extras-body { max-width: 760px; }
.extras-payer-copy { color: var(--muted-2); margin-bottom: 10px; max-width: 68ch; }
.extras-label { margin-top: 12px; }
.extras-address, .extras-memo, .extras-select { width: 100%; box-sizing: border-box; }
.extras-address { margin-bottom: 0; }
.extras-body .operator-edit-token-name:empty { min-height: 0; margin-top: 0; }
.extras-body .operator-chain-address-compact { margin-top: 2px; margin-bottom: 8px; }
.extras-behavior-select {
  width: auto; min-width: 160px; padding-right: 34px;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237d6858' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: calc(100% - 12px) center;
}
.extras-payer-sub { font-size: 11px; color: var(--muted-2); margin: 3px 0 6px; }
.extras-checkbox-row { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text); cursor: pointer; margin-top: 2px; }
.extras-checkbox-row input { accent-color: var(--c-teal); }
.extras-editable-row { margin-top: 12px; }
.extras-conditional-fields { margin-top: 6px; }
.extras-more { margin-top: 12px; }
.extras-more > summary { display: inline-block; font-size: 12px; color: var(--muted-2); text-decoration: underline; cursor: pointer; list-style: none; }
.extras-more > summary::-webkit-details-marker { display: none; }
.extras-more > summary:hover { color: var(--text); }
.extras-chain-disabled { opacity: 0.55; cursor: default; }
.extras-chain-missing { color: var(--muted-3); font-size: 11px; }
.extras-actions { margin-top: 14px; }
.extras-payers { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--c-orange-light); }
.extras-payers-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.extras-payers-body { margin-top: 8px; font-size: 12px; color: var(--muted-2); }
.extras-payers-table { border: 1px solid var(--c-orange-light); color: var(--text); overflow-x: auto; }
.extras-payers-row { display: grid; grid-template-columns: minmax(108px, 0.8fr) minmax(160px, 1.4fr) minmax(120px, 0.9fr) minmax(126px, 0.8fr); gap: 12px; align-items: center; min-width: 560px; padding: 10px 12px; border-bottom: 1px solid var(--bg); }
.extras-payers-row:last-child { border-bottom: none; }
.extras-payers-row--head { background: var(--bg); color: var(--muted-2); font-weight: bold; text-transform: uppercase; letter-spacing: 0.04em; padding-top: 8px; padding-bottom: 8px; }
.extras-payers-chain { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.extras-payers-chain .chain-logo { width: 14px; height: 14px; flex: 0 0 auto; }
.extras-payers-address, .extras-payers-row > div { min-width: 0; }
.extras-payers-main { font-weight: bold; color: var(--text); }
.extras-payers-sub { margin-top: 3px; color: var(--muted-2); font-size: 11px; line-height: 1.35; }
.extras-payers-amount { text-align: right; }

/* Edit-splits modal: chain checkboxes + recipient rows. */
.splits-edit-chains { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 4px; }
.splits-edit-chain { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text); cursor: pointer; }
.splits-edit-chain input { accent-color: var(--c-teal); }
.splits-edit-chain img, .splits-edit-chain svg { width: 14px; height: 14px; }
.splits-edit-rows { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
/* Row reads "Split [%] to [recipient]" like the create flow. Top-aligned so the inputs stay level even
   when the recipient box grows (ENS hint / chip); labels nudged down to center against the input text. */
.splits-edit-row { display: flex; align-items: flex-start; gap: 6px; }
.splits-edit-item { margin-bottom: 4px; }
.splits-edit-lead, .splits-edit-to { font-size: 12px; color: var(--muted-2); flex: 0 0 auto; padding-top: 7px; }
.splits-edit-lead { width: 56px; }
.splits-edit-recipbox { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.splits-edit-recipbox > .splits-edit-addr { width: 100%; box-sizing: border-box; flex: 0 0 auto; }
.splits-edit-addr {
  flex: 1 1 auto; min-width: 0; font-family: inherit; font-size: 12px; padding: 6px 8px;
  border: 1px solid var(--c-orange-light); background: var(--card-bg); color: var(--text); border-radius: 2px;
}
.splits-edit-pct {
  width: 64px; font-family: inherit; font-size: 12px; padding: 6px 6px; text-align: right;
  border: 1px solid var(--c-orange-light); background: var(--card-bg); color: var(--text); border-radius: 2px;
}
.splits-edit-addr:focus, .splits-edit-pct:focus { outline: none; border-color: var(--c-teal); }
.splits-edit-pctsign { font-size: 11px; color: var(--muted-2); flex: 0 0 auto; padding-top: 8px; }
/* Hide the native number-spinner on operator form inputs. */
.splits-edit-pct::-webkit-outer-spin-button, .splits-edit-pct::-webkit-inner-spin-button,
.operator-edit-jwt::-webkit-outer-spin-button, .operator-edit-jwt::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.splits-edit-pct, .operator-edit-jwt[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.splits-edit-rm { color: var(--muted-2); text-decoration: none; font-size: 12px; padding: 7px 2px 0; flex: 0 0 auto; }
.splits-edit-rm:hover { color: var(--c-pink); }
.splits-edit-add { display: inline-block; margin-top: 8px; font-size: 11px; }
.splits-edit-benef { margin-top: 4px; }
.splits-edit-benef .splits-edit-addr { width: 100%; box-sizing: border-box; }
/* Tier "Split sales" recipient rows: "[%] % to [recipient] ✕", with project name + beneficiary lines. */
.tier-split-row { margin-bottom: 10px; }
.tier-split-line { display: flex; align-items: center; gap: 6px; }
.tier-split-line .splits-edit-pct { width: 64px; flex: 0 0 auto; }
.tier-split-to { font-size: 12px; color: var(--muted-2); flex: 0 0 auto; }
.tier-split-recip { width: 100%; min-width: 0; }
.tier-split-benef { margin-top: 6px; padding-left: 70px; }
.tier-split-benef .splits-edit-addr { width: 100%; box-sizing: border-box; }
.splits-edit-total { font-size: 11px; color: var(--muted-2); margin-top: 8px; }
.splits-edit-total.error { color: var(--c-pink); }
.splits-edit-hint { font-size: 11px; color: var(--muted-2); margin: 2px 0 4px; word-break: break-all; }
.splits-edit-hint.warn { color: var(--c-pink); }
/* Prose hints wrap on words; break-all above is for long 0x strings only. */
.splits-edit-hint--prose { word-break: normal; }
.splits-edit-chip { font-family: inherit; font-size: 11px; font-weight: bold; padding: 2px 9px; margin: 4px 0 2px; align-self: flex-start;
  border: 1px solid var(--c-black-light); background: transparent; color: var(--muted-2); border-radius: 2px; cursor: pointer; }
.splits-edit-chip:hover { color: var(--text); border-color: var(--write); }
.splits-edit-chip.active { color: var(--c-teal); border-color: var(--c-teal); }
.detail-about-list { margin: 0 0 10px; padding-left: 22px; }
.detail-about-list:last-child { margin-bottom: 0; }
.detail-about-li { margin: 0 0 5px; }
.detail-about-li:last-child { margin-bottom: 0; }
.detail-address-link { text-decoration: underline; }

/* "Use your <SYM>" actions + modals (Ops tab) */
.ops-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* "You" card: per-chain position table (reuses .detail-ops-table) + the action buttons below it. */
.you-card .ops-actions { margin-top: 16px; }
.you-empty { margin-bottom: 4px; }
.you-connect { margin-top: 10px; }
.you-footnote { margin-top: 8px; font-size: 11px; color: var(--muted-3); }
.ops-action-btn {
  font-family: inherit; font-size: 13px; font-weight: bold; padding: 8px 16px; cursor: pointer;
  border: 2px solid var(--c-teal); background: transparent; color: var(--c-black);
}
.ops-action-btn:hover { text-shadow: 0 0 0.6px currentColor; }
.ops-action-btn:disabled { opacity: 0.5; cursor: default; }
.ops-action-btn:disabled:hover { text-shadow: none; }
/* Wallet-action buttons (Cash out / Get a loan / …) are primary, like Pay: green fill, light fade on hover. */
.ops-actions .ops-action-btn { border-color: var(--write); background: var(--c-green-light); color: var(--c-black); }
.ops-actions .ops-action-btn:hover { opacity: 0.9; text-shadow: none; }

/* Modals are native <dialog>s opened with showModal(). The browser's top layer paints them above
   everything else — including the create overlay (200) — so no z-index is needed, and the page behind
   goes inert. The global reset zeroes the UA `margin: auto`, so the geometry the old overlay produced
   (centered, 48px from the top, 16px side gutters) is restated here. The page behind still scrolls,
   as it did before; long modals scroll inside themselves. */
.modal-dialog {
  position: fixed; top: 0; right: 0; bottom: auto; left: 0;
  margin: 48px auto; width: calc(100% - 32px); max-width: 480px; max-height: calc(100% - 96px);
  overflow-y: auto; padding: 0;
  background: var(--card-bg); border: 3px solid var(--c-black-light); color: var(--text);
  box-shadow: 0 10px 44px rgba(44, 32, 24, 0.35);
}
/* Replaces the dimming overlay div. */
.modal-dialog::backdrop { background: rgba(44, 32, 24, 0.45); }
/* Content box: padding lives here, not on the dialog, so only true backdrop clicks target the dialog. */
.modal-panel { padding: 18px 20px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.modal-title { font-size: 18px; font-weight: bold; color: var(--text); }
.modal-close { background: none; border: none; font-size: 16px; color: var(--muted-2); cursor: pointer; line-height: 1; }
.modal-close:hover { color: var(--text); }
.modal-body { font-size: 12px; color: var(--text); }
.modal-label { font-size: 12px; font-weight: bold; color: var(--text); margin: 10px 0 4px; }
.modal-balance { font-size: 11px; color: var(--muted-2); margin-bottom: 8px; }
/* A card whose read failed. Distinct from a card that is absent because the project has no
   such thing — see markCardUnavailable. */
.card-unavailable { font-size: 12px; color: var(--muted-2); padding: 8px 0; }
.payout-summary { width: 100%; table-layout: fixed; border-collapse: collapse; margin: 4px 0 12px; font-size: 12px; }
.payout-summary th, .payout-summary td { padding: 6px 0; border-bottom: 1px solid var(--muted-4); }
.payout-summary th { width: 48%; color: var(--muted-2); font-weight: normal; text-align: left; }
.payout-summary td { color: var(--text); font-weight: normal; text-align: right; overflow-wrap: anywhere; }
.payout-summary-max th, .payout-summary-max td { color: var(--text); font-weight: bold; }
.access-currency-row { display: flex; align-items: center; gap: 8px; }
.access-currency-row[hidden] { display: none; }
.access-currency-row .modal-label { margin: 0; }
.ops-preview { font-size: 13px; color: var(--text); margin: 10px 0 4px; min-height: 16px; }
.payout-preview { min-height: 0; font-size: 11px; color: var(--muted-2); }
.ops-preview-line { line-height: 1.5; }
.ops-preview-recv { font-weight: bold; }
.ops-preview-fee, .ops-preview-feetok { font-size: 12px; color: var(--muted-2); }
.ops-preview-feetok { padding-left: 2px; }
.fee-project-link { color: var(--c-teal); text-decoration: underline; }
.ops-preview-lock { font-weight: bold; color: var(--c-pink); }

/* Cash-out success summary (replaces the form once the tx confirms). */
.cashout-success { display: flex; flex-direction: column; gap: 4px; }
.cashout-success-title { font-size: 20px; font-weight: bold; color: var(--text); }
.cashout-success-sub { font-size: 13px; color: var(--muted-2); margin-bottom: 8px; }
.cashout-success-reclbl { font-size: 11px; color: var(--muted-2); text-transform: uppercase; letter-spacing: 0.04em; }
.cashout-success-amount { font-size: 28px; font-weight: bold; color: var(--c-teal); line-height: 1.1; }
.cashout-success-extra { font-size: 13px; color: var(--text); margin-top: 2px; }
.cashout-success-tx { margin-top: 12px; font-size: 12px; }
.ops-inrow { display: flex; align-items: stretch; gap: 0; }
.ops-amount {
  flex: 1; min-width: 0; font-family: inherit; font-size: 16px; font-weight: bold; padding: 8px 10px;
  border: 2px solid var(--write); border-right: none; background: var(--card-bg); color: var(--text);
}
.ops-amount:focus { outline: none; }
.ops-amount::-webkit-outer-spin-button, .ops-amount::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ops-amount[type=number] { -moz-appearance: textfield; }
.ops-unit {
  display: flex; align-items: center; padding: 0 12px; font-weight: bold; font-size: 12px;
  border: 2px solid var(--write); background: var(--card-bg); color: var(--muted-2);
}
/* Single bordered field that holds an amount input + inline suffix (and optional Max), so the suffix
   isn't a separate box. Defaults to a shorter width; --grow stretches full width (add-liquidity/range). */
.ops-field { display: flex; align-items: stretch; border: 2px solid var(--write); background: var(--card-bg); width: 200px; max-width: 100%; min-width: 0; }
.ops-field--grow { width: 100%; flex: 1 1 0; min-width: 0; }
/* Add-liquidity: project token + accounting token side-by-side. */
.lp-add-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lp-add-col { min-width: 0; }
.ops-field .ops-amount { border: none; background: transparent; }
.ops-field .ops-unit { border: none; background: transparent; padding: 0 12px 0 4px; }
.ops-field .lp-max { border: none; }
.ops-chainrow { margin-bottom: 8px; }
/* Min/Max range row: two bordered fields with a plain "to" between them (not its own box). */
.ops-rangerow { display: flex; align-items: stretch; gap: 8px; }
.ops-between { display: flex; align-items: center; padding: 0 4px; font-size: 12px; color: var(--muted-2); }
/* Price-range chart labels in the site font, not the SVG default. */
.lp-graph-svg text { font-family: var(--app-font, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace); }
.ops-percent { display: flex; gap: 6px; justify-content: flex-end; margin-top: 8px; }
/* Max-slippage control on the cash-out pool routes: label pinned left, preset buttons right. */
.ops-slippage { justify-content: flex-start; align-items: center; }
.ops-slippage-lbl { margin-right: auto; font-size: 12px; color: var(--muted); }
.ops-percent-btn.active { color: var(--text); border-color: var(--write); background: rgba(0, 0, 0, 0.05); }
.ops-slippage-custom {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px 6px;
  border: 1px solid var(--c-black-light); color: var(--muted-2); font-size: 11px;
}
.ops-slippage-custom input {
  width: 38px; border: 0; padding: 0; background: transparent; color: inherit;
  font: inherit; text-align: right; outline: none;
}
/* Add-liquidity range graph + inline Max buttons */
.lp-graph { margin: 8px 0 4px; position: relative; }
.lp-graph-holder { width: 100%; }
.lp-graph-tip { position: absolute; top: 0; pointer-events: none; background: var(--c-black); color: var(--card-bg); font-size: 11px; padding: 4px 8px; border-radius: 3px; white-space: nowrap; z-index: 5; }
.lp-graph-svg { display: block; width: 100%; height: auto; overflow: visible; }
.lp-add-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lp-max {
  font-family: inherit; font-size: 11px; font-weight: bold; padding: 0; cursor: pointer;
  border: none; background: transparent; color: var(--c-black-light);
}
.lp-max:hover { color: var(--text); }
.ops-percent-btn {
  font-family: inherit; font-size: 11px; font-weight: bold; padding: 4px 10px; cursor: pointer;
  border: 1px solid var(--c-black-light); background: transparent; color: var(--muted-2); border-radius: 2px;
}
.ops-percent-btn:hover { color: var(--text); border-color: var(--write); }
/* Cross-chain accounting knowledge (Settlement) */
.xchain-knowledge { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.xchain-block { display: flex; flex-direction: column; gap: 4px; }
.xchain-head { display: flex; align-items: center; gap: 6px; font-weight: bold; font-size: 12px; color: var(--text); }
/* Match the Composition/Bridges tables: orange outline, bg-filled header, bg-coloured row dividers.
   Left-aligned to the "{chain} knows" heading icon (no indent). */
/* overflow-x: auto so the absolute "also syncs …" note (which can extend past the last column) is clipped
   to the table and reachable by horizontal scroll, never spilling into the page. */
.gossip-table { margin: 6px 0 0 0; font-size: 12px; border: 1px solid var(--c-orange-light); padding-bottom: 16px; overflow-x: auto; }
.gossip-row {
  display: grid;
  /* Each row is its OWN grid, so a bare `1fr` (= minmax(auto,1fr)) sizes column 1 to the chain NAME's
     min-content — long names (Arbitrum) widen that row's first column and shift every value out of line
     vs short names (Base). Fixed-LENGTH minimums (minmax(92px,…) / minmax(0,…)) are content-independent,
     so every row resolves identical columns and the numbers align. */
  /* Columns: Chain · Status · Sync · Supply · Balance · Snapshot (status + sync lead so they show first). */
  grid-template-columns: minmax(92px, 0.7fr) minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.8fr);
  gap: 10px;
  align-items: center;
  padding: 11px 14px;
  border-top: 1px solid var(--bg);
}
.gossip-head { background: var(--bg); border-top: none; }
.gossip-head .gossip-cell { color: var(--muted-2); font-size: 10px; font-weight: bold; letter-spacing: 0.5px; text-transform: uppercase; }
.gossip-cell { font-variant-numeric: tabular-nums; text-align: right; color: var(--text); }
.gossip-cell:first-child { text-align: left; }
.gossip-peer { display: flex; align-items: center; gap: 6px; }
.gossip-sync-cell { text-align: right; }
/* Note overlays BELOW the button (absolute, anchored to the button wrapper) so it doesn't grow the row —
   rows stay aligned. Left-aligned with the button, it extends rightward (off the table edge if long). */
.gossip-sync-wrap { position: relative; display: inline-block; }
/* Right-anchored under the button so a long note grows LEFTWARD and stays inside the table (no horizontal
   overflow / header-bg gap). The right offset is the trailing padding after the text. */
.gossip-sync-note { position: absolute; top: 100%; right: 4px; margin-top: 3px; font-size: 10px; color: var(--muted-2); white-space: nowrap; }
.xchain-status { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.xchain-status-label { font-size: 11px; white-space: nowrap; }
.xchain-status-label--synced { color: var(--c-green); }
.xchain-status-label--slight { color: var(--c-green); }
.xchain-status-label--danger { color: var(--c-pink); font-weight: bold; }
.xchain-status-label--unknown { color: var(--c-muted); }
.xchain-sync {
  font-family: inherit;
  font-size: 11px;
  color: var(--text);
  background: var(--card-bg);
  border: 1px solid var(--write);
  border-radius: 0;
  padding: 3px 8px;
  cursor: pointer;
  white-space: nowrap;
}
.xchain-sync:hover { background: var(--c-green-light); }
.xchain-sync:disabled { opacity: 0.6; cursor: default; }

.bridge-types { display: flex; flex-wrap: wrap; gap: 6px; }
.ops-bridge-row { margin-top: 10px; }
.ops-bridge-note { margin-top: 6px; font-size: 11px; color: var(--muted-2); line-height: 1.6; }
.ops-bridge-note a { color: var(--c-teal); }
.move-backing { color: var(--text); }
.move-backing strong { font-weight: bold; }

/* ── Loan modal: variable fee structure + summary ── */
.loan-section { margin-top: 18px; border-top: 1px solid var(--c-orange-light); padding-top: 12px; }
.loan-section-head { display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-size: 12px; font-weight: bold; color: var(--text); }
.loan-caret { color: var(--muted-2); font-size: 9px; }
.loan-section-body { margin-top: 12px; }
.loan-prepaid-label { font-size: 12px; font-weight: bold; color: var(--text); margin-bottom: 8px; }
/* Track: orange filled portion (left of thumb, 6px) over a thinner dark remainder (4px). The orange
   width is driven by --loan-pct, set in JS as the thumb moves. Input height holds the 16px thumb so
   it stays vertically centered on the track (gradient lives on the track pseudo, not the input). */
.loan-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 16px; background: transparent; outline: none; cursor: pointer; }
.loan-slider::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background:
    linear-gradient(to right, var(--c-orange) 0 var(--loan-pct, 0%), rgba(44,32,24,0) var(--loan-pct, 0%)),
    linear-gradient(var(--c-black-light), var(--c-black-light)) left center / 100% 4px no-repeat;
}
.loan-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--c-orange); cursor: pointer; border: none; margin-top: -5px; }
.loan-slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--c-orange); cursor: pointer; border: none; }
.loan-slider::-moz-range-track { height: 4px; border-radius: 2px; background: var(--c-black-light); }
.loan-slider::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--c-orange); }
.loan-slider-labels { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted-2); margin-top: 6px; }
.loan-fee-chart { margin-top: 12px; position: relative; }
.loan-fee-svg { display: block; width: 100%; height: auto; }
.loan-fee-cursor { position: absolute; width: 1px; background: rgba(184, 96, 46, 0.5); pointer-events: none; }
.loan-fee-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--c-orange); transform: translate(-50%, -50%); box-shadow: 0 0 0 2px var(--card-bg); pointer-events: none; }
.loan-fee-tip { position: absolute; background: var(--c-black); color: var(--card-bg); font-size: 10px; line-height: 1.45; padding: 5px 8px; border-radius: 3px; pointer-events: none; max-width: 190px; z-index: 3; }
.loan-fee-tip-t { font-weight: bold; }
.loan-fee-caption { text-align: center; font-size: 11px; color: var(--muted-2); margin-top: 6px; }
.loan-source-row { align-items: center; gap: 8px; }
.loan-source-row[hidden], .loan-decision[hidden] { display: none; }
.loan-source-select { width: auto; max-width: 100%; min-width: 0; }
.loan-decision { margin-top: 14px; }
.loan-decision-title { font-size: 12px; font-weight: bold; color: var(--text); margin-bottom: 2px; }
.loan-decision-table { margin-bottom: 6px; }
.loan-decision-table th { width: 30%; }
.loan-decision-note { font-size: 10px; line-height: 1.5; color: var(--muted-2); }
.loan-summary { margin-top: 16px; border-top: 1px solid var(--c-orange-light); padding-top: 12px; }
.loan-summary-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; padding: 3px 0; }
.loan-summary-k { color: var(--muted-2); }
.loan-summary-v { color: var(--text); text-align: right; }
.loan-summary-feetok { font-size: 11px; color: var(--muted-2); padding: 0 0 2px 2px; }
.loan-summary-feetok:empty { display: none; }
.loan-summary-net .loan-summary-k, .loan-summary-net .loan-summary-v { font-weight: bold; color: var(--text); }
.loan-summary-net { border-top: 1px dashed var(--c-orange-light); margin-top: 4px; padding-top: 6px; }
.loan-summary-bullets { margin: 10px 0 0; padding-left: 18px; font-size: 11px; color: var(--muted-2); line-height: 1.6; }
.modal-status { font-size: 11px; color: var(--muted-2); margin-top: 10px; word-break: break-word; }
.modal-status.error { color: var(--c-pink); }
.modal-status.success { color: var(--c-green); font-weight: bold; }
.tx-confirm-status { font-size: 12px; color: var(--muted-2); margin-top: 10px; word-break: break-word; }
.tx-confirm-status.pending { color: var(--c-teal); }
.tx-status-hash { color: inherit; text-decoration: underline; }
.tx-status-hash:hover { text-decoration: underline; opacity: 0.8; }
.tx-confirm-status.error { color: var(--c-pink); }
.tx-confirm-status.success { color: var(--c-green); }
.splits-status.error { color: var(--c-pink); }
.splits-status.success { color: var(--c-green); }

/* "Juicing…" pending state: a spinning indicator while a tx is in flight / awaiting confirmation. */
@keyframes juice-spin { to { transform: rotate(360deg); } }
.modal-status.pending, .paybox-status.pending { color: var(--c-teal); }
.modal-status.pending::before, .paybox-status.pending::before {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 7px;
  vertical-align: -1px;
  border: 2px solid var(--c-teal);
  border-right-color: transparent;
  border-radius: 50%;
  animation: juice-spin 0.7s linear infinite;
}
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.modal-submit {
  font-family: inherit; font-size: 14px; font-weight: bold; padding: 8px 22px; cursor: pointer;
  border: 2px solid var(--write); background: var(--c-green-light); color: var(--text);
}
.modal-submit:hover { opacity: 0.9; }
.modal-submit:disabled { opacity: 0.5; cursor: default; }

/* Rulesets & Funds (owned projects) */
.rf-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.rf-headleft { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.rf-synced { font-size: 10px; color: var(--muted-2); font-weight: normal; }
.rf-chainselect {
  font-family: inherit; font-size: 11px; font-weight: bold; padding: 3px 8px;
  border: 1px solid var(--c-black-light); background: var(--card-bg); color: var(--text); border-radius: 2px;
}
.rf-chainselect:focus { outline: none; border-color: var(--write); }
.rf-queue-btn { margin-top: 0; flex: 0 0 auto; }
.rf-arrow {
  font-family: inherit; font-size: 12px; font-weight: bold; padding: 2px 9px; cursor: pointer;
  border: 1px solid var(--c-black-light); background: transparent; color: var(--muted-2); border-radius: 2px;
}
.rf-arrow:hover { color: var(--text); border-color: var(--write); }
.rf-arrow:disabled { opacity: 0.3; cursor: default; }
.rf-arrow:disabled:hover { color: var(--muted-2); border-color: var(--c-black-light); }
.rf-titlebar { margin-bottom: 12px; }
.rf-title-main { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; }
.rf-title-line { display: flex; align-items: baseline; gap: 10px; }
.rf-title-line .rf-arrow { align-self: center; }
.rf-title-meta { grid-column: 2; }
.rf-title-cycle { font-size: 20px; font-weight: bold; color: var(--text); }
.rf-title-ctx { font-size: 12px; font-weight: bold; color: var(--c-teal); }
.rf-title-meta { font-size: 11px; color: var(--muted-2); margin-top: 3px; }
.rf-title-meta .bo-sep { color: var(--c-pink-light); }
.rf-rulesbox { background: transparent; padding: 10px 12px; }
.rf-section { font-size: 12px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--text); margin: 12px 0 6px; }
.rf-section:first-of-type { margin-top: 0; }
.rf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 32px; align-items: start; }
.rf-col { min-width: 0; }
.rf-col .rf-section { margin-top: 14px; }
.rf-col .rf-section:first-child { margin-top: 4px; }
/* FUNDS ACCESS lives in a sub-container; its first section header should keep the normal section gap. */
.rf-col .rf-fa .rf-section:first-child { margin-top: 14px; }
.rf-diff { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.rf-diff-old { color: var(--c-pink); background: rgba(196,53,80,0.10); padding: 1px 6px; border-radius: 2px; }
.rf-diff-new { color: var(--c-green); background: rgba(61,122,90,0.12); padding: 1px 6px; border-radius: 2px; }
.rf-funds-col { min-width: 0; }
.rf-funds-label { font-size: 11px; color: var(--muted-2); margin-bottom: 2px; }
.rf-funds-big { font-size: 20px; font-weight: bold; color: var(--text); margin-bottom: 8px; }
.rf-funds-mid { font-size: 16px; font-weight: bold; color: var(--text); }
.rf-perchain { margin-bottom: 8px; }
.rf-perchain-row { display: flex; justify-content: space-between; align-items: center;
  padding: 5px 0; border-top: 1px solid var(--bg); font-size: 12px; }
.rf-perchain-name { display: flex; align-items: center; gap: 7px; }
.rf-perchain-val { font-weight: bold; }
.rf-funds-sub { font-size: 11px; color: var(--muted-2); }
.rf-ruleset-link { color: inherit; text-decoration: underline; cursor: pointer; }
.rf-ruleset-link:hover { color: var(--c-teal); }
.rf-upcoming-notice {
  margin: 4px 12px 12px;
  padding: 10px 12px;
  border: 1px solid var(--c-orange);
  background: rgba(184, 96, 46, 0.08);
}
.rf-upcoming-head { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; }
.rf-upcoming-title { font-size: 13px; font-weight: bold; color: var(--c-orange); }
.rf-upcoming-time { font-size: 11px; color: var(--muted-2); }
.rf-upcoming-view { grid-row: 1 / span 2; grid-column: 2; white-space: nowrap; }
.rf-upcoming-diff { margin-top: 8px; }
.rf-upcoming-diff .detail-ruleset-key { color: var(--text); }

/* Sub-tabs (e.g. Owners → All / Splits / Auto issue) */
/* Secondary tab row — a smaller mirror of the main tabs, left-aligned with them (the main tab labels
   start 14px in due to button padding, so the sub-tab row matches with padding-left). Each sub-tab keeps
   its own underline: faint when inactive, teal when active. */

/* Owners → All */
.owners-intro { margin-bottom: 14px; }
.owners-load,
.owners-empty {
  color: var(--muted-2);
}
.owners-distribution {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin-top: 8px;
}
.owners-chart-panel {
  min-width: 0;
  text-align: center;
}
.owners-pie-slice { cursor: pointer; }
/* More specific than the default `.owners-pie-svg .owners-pie-slice` fill below, so hover wins. */
.owners-pie-svg .owners-pie-slice.is-hover { fill: var(--c-pink); }
.owners-pie-tip {
  position: absolute; pointer-events: none; z-index: 5; white-space: nowrap;
  background: var(--c-black); color: var(--card-bg); font-size: 11px; line-height: 1.4;
  padding: 4px 7px; border-radius: 3px; text-align: left;
}
.owners-pie-svg {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}
.owners-pie-svg path {
  stroke: var(--card-bg);
  stroke-width: 1.25;
}
/* Colorless donut: no fills, slices distinguished by their borders only.
   Scoped under .owners-pie-svg so it beats the `.owners-pie-svg path` (card-bg) divider rule. */
.owners-pie-svg .owners-pie-slice { fill: var(--c-pink-light); stroke: var(--card-bg); stroke-width: 0.75; }
.owners-pie-center {
  text-anchor: middle;
  fill: var(--text);
  font-family: inherit;
  font-weight: bold;
}
.owners-pie-center-main { font-size: 22px; }
.owners-pie-center-sub {
  font-size: 10px;
  fill: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.owners-chart-total {
  color: var(--muted-2);
  font-size: 11px;
  margin-top: 4px;
}
.owners-table-outer { min-width: 0; }
/* Account search-with-chips above a table. */
.acct-search { margin: 0 0 10px; }
.acct-search-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.acct-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--c-orange-light); border: 1px solid var(--c-orange); color: var(--text); font-size: 11px; padding: 1px 4px 1px 7px; }
.acct-chip-label { white-space: nowrap; }
.acct-chip-x { background: none; border: none; color: var(--text); cursor: pointer; font-size: 13px; line-height: 1; padding: 0 1px; opacity: 0.6; }
.acct-chip-x:hover { opacity: 1; }
.acct-search-box { position: relative; max-width: 360px; }
.acct-search-input { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 13px; padding: 7px 10px; background: var(--bg); border: 1px solid var(--muted-4); color: var(--text); }
.acct-search-input:focus { outline: none; border-color: var(--c-teal); }
.acct-search-menu { position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 40; background: var(--card-bg); border: 1px solid var(--muted-4); max-height: 260px; overflow-y: auto; }
.acct-search-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; cursor: pointer; font-size: 13px; }
.acct-search-item:hover { background: var(--bg); }
.acct-search-item-addr { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-search-item-sub { color: var(--muted-2); font-weight: bold; white-space: nowrap; }
.acct-search-empty { padding: 8px 10px; color: var(--muted-2); font-size: 12px; }
.owners-table-wrap {
  min-width: 0;
  overflow-x: auto;
  border: 1px solid var(--c-orange-light);
}
/* Paginated-list footer nav — centered text buttons (matches the subtab / text-button style). */
.list-pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.list-page-btn { background: none; border: none; font-family: inherit; font-size: 12px; color: var(--muted-2); padding: 4px 8px; cursor: pointer; }
.list-page-btn:hover:not(:disabled) { color: var(--c-teal); }
.list-page-btn:disabled { opacity: 0.35; cursor: default; }
.list-page-indicator { font-size: 12px; color: var(--muted-2); padding: 0 4px; }
.owners-table {
  min-width: 460px;
}
.owners-row {
  display: grid;
  grid-template-columns: 1.5fr 0.9fr 1fr 0.8fr;
  gap: 12px;
  align-items: center;
  padding: 11px 14px;
  border-bottom: 1px solid var(--c-orange-light);
  font-size: 12px;
}
.owners-row:last-child { border-bottom: none; }
.owners-row-link { cursor: pointer; }
.owners-row-link:hover { background: rgba(44,32,24,0.03); }
.owners-head {
  background: var(--bg);
  color: var(--muted-2);
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.owners-account {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.owners-account .detail-address {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.owners-amm-tag {
  margin-left: 7px; font-size: 9px; font-weight: bold; letter-spacing: 0.5px;
  padding: 1px 6px; border: 1px solid var(--c-teal); color: var(--c-teal); border-radius: 2px;
}
.lp-comp-legend { margin-top: 10px; font-size: 12px; }
.lp-comp-legend-h { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 4px; }
.lp-comp-legend-row { display: flex; align-items: center; gap: 7px; margin: 2px 0; }
.lp-comp-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; }
/* Bridge transactions: per-row Claim / Execute action */
.bridge-action { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bridge-action-stat { font-size: 11px; color: var(--muted-2); }
.bridge-track-link { font-size: 11px; color: var(--muted-2); text-decoration: none; white-space: nowrap; }
.bridge-track-link:hover { color: var(--c-teal); }
.bridge-eta { flex-basis: 100%; }
/* One Execute per from→to pair, below that pair's rows. */
.bridge-group-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; border-top: 1px solid var(--c-orange-light);
}
.bridge-group-foot-lbl { font-size: 11px; color: var(--muted-2); margin-right: auto; }
.lp-amm-title {
  font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--muted-2); margin-bottom: 8px;
  display: flex; align-items: baseline; gap: 10px;
}
.lp-amm-title .owners-amm-tag { margin-left: 0; }
.lp-amm-title-addr { font-size: 11px; font-weight: normal; letter-spacing: 0; text-transform: none; color: var(--muted); }
.splithook-chain { margin-top: 14px; }
.splithook-head { display: flex; align-items: center; gap: 7px; font-weight: bold; font-size: 12px; margin-bottom: 4px; }
.splithook-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.lp-amm-row { display: flex; gap: 24px; align-items: stretch; flex-wrap: wrap; margin-top: 14px; }
.lp-amm-leftcol { flex: 0 0 300px; }
.lp-amm-row .owners-chart-panel { width: 100%; }
.lp-amm-rightcol { flex: 1; min-width: 320px; display: flex; flex-direction: column; }
.lp-amm-rightcol .lp-pos-table-wrap { flex: 0 0 auto; }
.lp-amm-rightcol .lp-depth { margin-top: auto; }
.lp-amm-bartitle { margin: 14px 0 8px; } /* appearance via .detail-card-title */
.lp-pos-table { min-width: 320px; }
.lp-pos-table .owners-row { grid-template-columns: 1.6fr 1fr 1fr 0.6fr; }
/* "Your LP positions" carries two more columns than the pool tables, plus its
   actions — without its own template the cells wrap onto a second row. */
.lp-mine-table { min-width: 720px; }
.lp-mine-table .owners-row { grid-template-columns: 0.8fr 0.9fr 1.4fr 1.2fr 1.2fr auto; }
.lp-mine-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* Loans table — 8 columns (Address, Collateral, Borrowed, Opened, Prepaid, Prepaid until, Outstanding fee, Expires). */
.loans-table { min-width: 860px; }
.loans-row { grid-template-columns: 1.4fr 1fr 0.9fr 0.7fr 0.7fr 1fr 1fr 1fr; }
.loans-table-mine .loans-row { grid-template-columns: 1.3fr 0.9fr 0.85fr 0.65fr 0.6fr 0.9fr 0.95fr 0.9fr 0.7fr; }
.loans-muted { color: var(--muted-2); }
.loans-fee { color: var(--c-orange); font-weight: bold; }
.loans-act { text-align: right; }
.loans-repay-btn { font-family: inherit; font-size: 11px; font-weight: bold; padding: 4px 12px; border: 2px solid var(--write); background: var(--c-green-light); color: var(--c-black); cursor: pointer; }
.loans-repay-btn:hover { opacity: 0.9; }
.you-loans { margin-top: 18px; }
.you-loans-title { font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-2); margin-bottom: 8px; }
.lp-pos-count { margin-left: 7px; font-size: 10px; color: var(--muted-2); }
.lp-bar-wrap { width: 100%; }
.lp-bar { display: flex; height: 22px; border-radius: 3px; overflow: hidden; border: 1px solid var(--c-orange-light); }
.lp-bar-seg { height: 100%; }
.owners-balance strong { color: var(--text); }
.owners-chains {
  display: inline-flex;
  align-items: center;
}
/* Overlap the chain icons in table cells, like the activity filter. */
.owners-chains .chain-logo { width: 16px; height: 16px; border-radius: 50%; margin-left: -5px; box-shadow: 0 0 0 1.5px var(--bg); }
.owners-chains .chain-logo:first-child { margin-left: 0; }
.owners-chains .chain-logo svg { width: 16px; height: 16px; display: block; }
.owners-paid { color: var(--text); }
.owners-footnote {
  grid-column: 1 / -1;
  color: var(--muted-2);
  font-size: 11px;
  margin-top: -8px;
}
@media (max-width: 900px) {
  .owners-distribution {
    grid-template-columns: 1fr;
  }
  .owners-chart-panel {
    max-width: 340px;
    width: 100%;
    margin: 0 auto;
  }
}

/* Owners → Splits */
.splits-wrap { display: flex; flex-direction: column; }
.splits-intro { font-size: 12px; color: var(--muted-2); line-height: 1.6; margin-bottom: 14px; }
.splits-stagerow { display: flex; gap: 18px; margin-bottom: 8px; }
.splits-stage-btn {
  font-family: inherit; font-size: 12px; font-weight: bold; color: var(--muted-2);
  background: none; border: none; padding: 4px 0; cursor: pointer; border-bottom: 2px solid transparent;
}
.splits-stage-btn:hover { color: var(--text); }
.splits-stage-btn.active { color: var(--text); border-bottom-color: var(--c-black-light); }
.splits-current-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-teal); margin-left: 6px; vertical-align: middle; }
.splits-limit { font-size: 12px; color: var(--muted-2); margin-bottom: 12px; }
.splits-chain-foot { display: flex; justify-content: flex-end; margin-top: 6px; }
.splits-table { border: 1px solid var(--c-orange-light); }
.splits-row { display: grid; grid-template-columns: 2fr 1.4fr 1.6fr; gap: 16px; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--c-orange-light); font-size: 12px; }
.splits-row:last-child { border-bottom: none; }
.splits-head { background: var(--bg); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--muted-2); font-weight: bold; }
.splits-acct { color: var(--text); }
.splits-acct-inner { display: inline; }
.split-hook-label { color: var(--muted-3); font-weight: normal; font-size: 0.85em; }
.split-hook-label.known { color: var(--c-teal); }
.split-project-recipient { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; vertical-align: top; }
.split-project-link { color: var(--c-teal); font-weight: bold; text-decoration: underline; text-underline-offset: 2px; }
.split-project-route, .split-project-beneficiary { color: var(--muted-2); font-size: 10px; line-height: 1.25; }
.split-project-beneficiary { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 3px; }
.split-project-beneficiary.warn { color: var(--c-orange); }
.splits-pct strong { color: var(--text); }
.splits-muted { color: var(--muted-3); font-weight: normal; }
.splits-pend { color: var(--text); }
/* Standalone column header, then one block per chain with a small gap between blocks. */
.splits-tablewrap { display: flex; flex-direction: column; gap: 22px; }
/* Each chain block: an UNBOXED [chain name … Distribute] row sitting atop its bordered table. */
.splits-chain-block { display: flex; flex-direction: column; gap: 5px; }
.splits-chainrow {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 0; /* align name/Distribute with the table's outer border, not its inner content */
}
.splits-chain-head { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: bold; color: var(--muted-2); }
.splits-chain-foot { display: flex; align-items: center; gap: 8px; }
/* Compact per-chain Distribute button; idle (disabled) gets a light-black border, not a dimmed teal one. */
.splits-cta { font-size: 11px; padding: 5px 12px; border-width: 1px; }
.ops-action-btn.splits-cta:disabled { opacity: 1; border-color: var(--c-black-light); color: var(--muted-2); }
.ops-action-btn.splits-cta:disabled:hover { color: var(--muted-2); }
.splits-cta { margin-top: 0; }

/* Onchain info as a key/value grid (mirrors the stat tiles) */
.detail-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.detail-info-head {
  grid-column: 1 / -1; font-size: 9px; color: var(--muted-3); text-transform: uppercase;
  letter-spacing: 0.5px; font-weight: bold; margin-bottom: -6px;
}
.detail-info-label {
  font-size: 9px; color: var(--muted-3); text-transform: uppercase; letter-spacing: 0.5px;
  display: flex; align-items: center; gap: 5px;
}
.detail-info-chainname { text-transform: none; letter-spacing: 0; font-size: 11px; color: var(--muted-2); }
.detail-info-value { font-size: 12px; font-weight: bold; color: var(--text); margin-top: 3px; }
.detail-info-value a { color: inherit; font-weight: bold; }
.detail-info-value a:hover { color: var(--c-teal); }
.detail-info-chainrow { display: flex; align-items: center; gap: 6px; }
.detail-info-chainid { font-size: 12px; font-weight: bold; color: var(--text); }
.detail-info-chain { cursor: pointer; }
.detail-info-chain:hover .detail-info-chainname,
.detail-info-chain:hover .detail-info-chainid { color: var(--c-teal); }
.detail-address-copy {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  max-width: 100%;
}
.detail-full-address {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.address-copy-btn {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--c-orange-light);
  border-radius: 3px;
  background: transparent;
  color: var(--muted-2);
  cursor: pointer;
}
.address-copy-btn:hover,
.address-copy-btn.copied {
  color: var(--c-teal);
  border-color: var(--c-teal);
}
.copy-icon {
  position: relative;
  width: 13px;
  height: 13px;
  display: inline-block;
}
.copy-icon::before,
.copy-icon::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border: 1.5px solid currentColor;
  border-radius: 1px;
  background: var(--card-bg);
}
.copy-icon::before {
  left: 1px;
  top: 3px;
}
.copy-icon::after {
  left: 4px;
  top: 0;
}

.detail-chain-logos { display: inline-flex; gap: 2px; align-items: center; vertical-align: middle; }
.discover-chain-logos { display: inline-flex; gap: 2px; align-items: center; vertical-align: middle; }
.discover-card-meta { font-size: 12px; color: var(--muted-2); margin-top: 5px; }
.discover-card-lbl { color: var(--muted-2); }
.discover-card-val { color: var(--text); font-weight: bold; }
.discover-card-pair { white-space: nowrap; }
.discover-card-pair:not(:last-child)::after { content: '|'; color: var(--c-pink-light); margin-left: 7px; }
.discover-card-on { margin-bottom: 12px; }
.chain-logo-link { cursor: pointer; }
.chain-logo-link:hover { opacity: 0.7; }
.chain-logo { width: 15px; height: 15px; line-height: 0; display: inline-flex; }
.chain-logo svg { display: block; }


/* Stats bar */


/* Sub-tabs */
.project-detail-tabbar {
  position: relative;
  display: flex;
  align-items: stretch;
  margin-bottom: 16px;
}
.project-detail-tabs {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  gap: 0;
  border-bottom: none;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  touch-action: pan-x;
}
.project-detail-tabs::-webkit-scrollbar { display: none; }

.detail-tab-btn {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  flex: 0 0 auto;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: inherit;
  font-size: 11px;
  font-weight: bold;
  color: var(--muted-2);
  padding: 6px 14px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.detail-tab-btn:hover {
  color: var(--c-teal);
}

.detail-tab-btn.active {
  color: var(--c-teal);
  border-bottom-color: var(--c-teal);
}

.detail-tab-overflow {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
}
.detail-tab-overflow-button {
  display: inline-flex; width: 42px; min-height: 40px; padding: 0 10px;
  align-items: center; justify-content: center;
  border: none; border-bottom: 2px solid transparent; background: none;
  color: var(--muted-2); font-family: inherit; font-size: 22px; font-weight: bold;
  line-height: 1; cursor: pointer;
}
.detail-tab-overflow-button:hover,
.detail-tab-overflow-button.active { color: var(--c-teal); }
.detail-tab-overflow-button.active { border-bottom-color: var(--c-teal); }
.detail-tab-overflow-item[hidden] { display: none; }

/* Owners subtabs: lazy panes (All / Market / Settlement / Splits / Auto Issuance / Loans). */
.owners-subtabs {
  display: flex; flex-wrap: wrap; gap: 2px;
}
.owners-subtab {
  background: none; border: none; border-bottom: 2px solid transparent;
  font-family: inherit; font-size: 11px; font-weight: bold; color: var(--muted-2);
  padding: 7px 12px; cursor: pointer; text-transform: uppercase; letter-spacing: 0.5px;
}
.owners-subtab:hover { color: var(--c-teal); }
/* Active = teal text + teal underline (matching the main tabs). The full-width container line stays removed. */
.owners-subtab.active { color: var(--c-teal); border-bottom-color: var(--c-teal); }
.funds-token-tab { display: inline-flex; align-items: baseline; gap: 8px; }
.funds-token-tab-balance {
  color: var(--muted-2); font-weight: normal; letter-spacing: 0; text-transform: none;
}
.owners-subgroup { display: flex; flex-direction: column; gap: 16px; }

/* Content area */
.project-detail-content {
  min-height: 200px;
}

.detail-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Skeleton loaders: subtle shimmer ghost blocks ── */
.skel {
  position: relative;
  overflow: hidden;
  background: rgba(44, 32, 24, 0.06);
  border-radius: 0; /* square ghost blocks; the pie ghost (.skel-circle) keeps its radius */
}
.skel::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  animation: skel-shimmer 1.5s ease-in-out infinite;
}
@keyframes skel-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}
.skel-circle { border-radius: 50%; }
.skel-table .detail-ops-row { align-items: center; }

.detail-card {
  background: var(--card-bg);
  border: 1px solid var(--c-orange-light);
  padding: 12px 14px;
}

.detail-card-title {
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted-2);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--c-orange-light);
}

.detail-card-body {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.6;
}

/* ── Spacious layout (juicy-vision style): the LEFT column (pay + activity) drops its card boxes in
   favor of whitespace + a thin rule, and a single vertical divider splits it from the content. The tab
   SECTIONS on the right keep their bordered cards. Scoped to `.detail-spacious` so it's easy to revert. ── */
.detail-spacious .project-detail-columns { gap: 0; align-items: stretch; }
.detail-spacious .project-detail-left { padding: 4px 14px 0 0; gap: 0; }
.detail-spacious .project-detail-right { padding: 4px 0 0 12px; }
/* Left column only: strip card chrome; separate stacked blocks (pay / activity) with a thin rule + space. */
.detail-spacious .project-detail-left .detail-card { background: none; border: none; padding: 0; }
/* …but the pay section gets a subtle light-pink panel fill (after the reset → wins on equal specificity). */
.detail-spacious .project-detail-left .paybox { background: var(--card-bg); border: 1px solid var(--c-green-light); padding: 14px 16px; }
/* no underline under any section title in the spacious layout */
.detail-spacious .detail-card-title { border-bottom: none; padding-bottom: 0; }
.detail-spacious .project-detail-left .detail-card-title { margin-bottom: 12px; }
/* space (no rule) between stacked left-column blocks (pay / activity) */
.detail-spacious .project-detail-left > .detail-card + .detail-card { margin-top: 20px; padding-top: 8px; }
/* Right column keeps bordered section cards — just a touch more breathing room around the tabs/sections. */
.detail-spacious .detail-section { gap: 16px; }
.detail-spacious .project-detail-tabs { margin-bottom: 20px; }

/* Activity rows */


.activity-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.activity-head .detail-card-title { margin-bottom: 0; }
.activity-filters {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.activity-filter-select {
  font-family: inherit; font-size: 13px; cursor: pointer;
  height: 18px; line-height: 18px; vertical-align: middle;
  padding: 0 13px 0 0; color: var(--c-black-light);
  border: none; outline: none; box-shadow: none;
  -webkit-appearance: none; appearance: none;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' fill='none' stroke='%237d6858' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right center;
}
.activity-filter-select:hover { opacity: 1; }
.activity-filter-select:focus { outline: none; border: none; box-shadow: none; }

.activity-ms { position: relative; display: inline-flex; align-items: center; }
.activity-ms-trigger { text-align: left; display: inline-flex; align-items: center; }
.activity-chain-stack { display: inline-flex; align-items: center; }
.activity-chain-stack .chain-logo {
  width: 16px; height: 16px; border-radius: 50%; margin-left: -5px;
  box-shadow: 0 0 0 1.5px var(--bg);
}
.activity-chain-stack .chain-logo:first-child { margin-left: 0; }
.activity-chain-stack .chain-logo svg { width: 16px; height: 16px; display: block; }
.activity-chain-menu {
  position: absolute; top: 100%; right: 0; margin-top: 6px; z-index: 40;
  min-width: 150px; padding: 6px;
  background: var(--card-bg); border: 1px solid var(--c-green-light);
}
.activity-chain-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 6px; font-size: 13px; color: var(--c-black-light); cursor: pointer;
}
.activity-chain-opt:hover { background: var(--c-orange-light); }
.activity-chain-opt input { cursor: pointer; margin: 0; }
.activity-chain-opt .chain-logo { width: 14px; height: 14px; display: inline-flex; }
.activity-chain-opt .chain-logo svg { width: 14px; height: 14px; }
.activity-chain-all { border-bottom: 1px solid var(--c-orange-light); margin-bottom: 2px; }

.activity-feed {
  display: flex;
  flex-direction: column;
  max-height: 390px;
  overflow-y: auto;
  /* keep the scrollbar from sitting on top of the chain bubbles / amounts on the right edge */
  padding-right: 12px;
}

.activity-empty {
  color: var(--muted-2);
}

.activity-row {
  display: flex;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--depth-bg-1);
}

.activity-row:last-child { border-bottom: none; }

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

.activity-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
  color: var(--muted-3);
}

/* The actor on the meta line's left side (the time sits right). The gap
   matches the mono font's word space so the chip reads like the next word. */
.activity-meta-left {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.activity-meta a {
  color: var(--muted-3);
  text-decoration: none;
}

.activity-meta a:hover {
  color: var(--c-teal);
  text-decoration: underline;
}

.activity-side {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
/* Safe multisig queue */
.backoffice-intro { margin-bottom: 12px; }
.operator-safe-groups { display: contents; }
.backoffice-chain { margin-bottom: 14px; }
.backoffice-chain-head { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: bold; color: var(--muted-2); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.backoffice-chain-head .chain-logo { width: 15px; height: 15px; }
.backoffice-chain-link { font-size: 12px; color: var(--c-teal); opacity: 0.7; text-decoration: none; margin-left: 2px; }
.backoffice-chain-link:hover { opacity: 1; }
.backoffice-list { display: flex; flex-direction: column; }
.backoffice-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--bg); }
.backoffice-label { font-weight: bold; color: var(--text); font-size: 13px; }
.backoffice-sub { font-size: 12px; color: var(--muted-2); }
.backoffice-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.backoffice-safe-tx { white-space: nowrap; }
.backoffice-signed { font-size: 12px; color: var(--muted-2); }
.backoffice-none { font-size: 13px; color: var(--muted-2); }
.backoffice-batch { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.backoffice-batch:empty { display: none; }
.bo-sep { color: var(--muted-3); margin: 0 7px; background: var(--depth-bg-0); padding: 0 4px; border-radius: 2px; }
/* Account card (per-chain owner/operator + type + Safe details) */
.account-chain { padding: 10px 0; border-top: 1px solid var(--bg); }
.account-chain:first-child { border-top: none; padding-top: 0; }
.account-head { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted-2); margin-bottom: 6px; }
.account-head .chain-logo { width: 15px; height: 15px; }
.account-kv { display: flex; flex-direction: column; gap: 3px; }
.account-kvrow { font-size: 13px; color: var(--muted-2); display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.account-k { color: var(--muted-2); white-space: nowrap; }
.account-v { color: var(--text); min-width: 0; }
.account-signers { font-weight: normal; }
.account-signers .address-link, .account-signers strong { font-weight: bold; }
.account-actions { margin-top: 8px; }
.project-handle-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.project-handle-actions .operator-cta:disabled { opacity: 0.45; cursor: wait; }
.project-handle-card .powers-label a { color: inherit; text-decoration: none; }
.project-handle-card .powers-label a:hover { color: var(--c-teal); }
.project-handle-record {
  margin-top: 12px; padding: 10px 12px; border: 1px solid var(--muted-4); background: var(--bg);
}
.project-handle-record .operator-cta + .operator-cta { margin-left: 14px; }
/* Instant full-address tooltip on hover (no native-title delay). */
/* Compact single-line Token card atop the holders view — labeled value segments. */
.token-line { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 13px; color: var(--text); }
.token-line-seg { display: inline-flex; align-items: center; gap: 6px; }
.token-line-key {
  font-size: 11px; text-transform: none; letter-spacing: 0.5px; color: var(--muted-2);
}
.token-line-val { font-weight: bold; }
.token-line .bo-sep { color: var(--c-pink-light); margin: 0 2px; }
.token-empty-state { max-width: 720px; }
.token-empty-title { font-size: 15px; font-weight: bold; color: var(--text); margin-bottom: 5px; }
.token-empty-copy { font-size: 12px; line-height: 1.55; color: var(--muted-2); }

/* Claim-credits modal — one row per chain with credits. */
.claim-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.claim-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.claim-row-chain { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.claim-row-chain .chain-logo { width: 16px; height: 16px; }
.claim-row-amt { font-size: 13px; color: var(--muted-2); }
.claim-row-btn { margin-left: auto; }
.claim-row-status { flex-basis: 100%; font-size: 12px; color: var(--muted-2); }
.claim-row-status.pending { color: var(--c-teal); }

.detail-address { position: relative; }
/* An authority that could not be READ, styled like the other "we could not verify this" copy so it never
   reads as a confirmed absence. */
.authority-unavailable { color: var(--c-pink); }
.addr-tip {
  position: absolute; left: 0; top: 100%; margin-top: 4px; z-index: 60; white-space: nowrap;
  background: var(--c-black); color: var(--bg); padding: 4px 8px; font-size: 12px;
  display: none; max-width: min(320px, calc(100vw - 16px)); overflow-wrap: anywhere;
}
/* display:none (not visibility:hidden) so the off-flow tip adds nothing to page width
   when idle; on touch screens there is no hover, so it stays out of the way entirely. */
.detail-address:hover > .addr-tip { display: block; }
/* Generic instant hover tooltip (no native-title delay) — same look as .addr-tip. */
.has-instant-tip { position: relative; }
.instant-tip { position: absolute; left: 0; top: 100%; margin-top: 4px; z-index: 60; white-space: nowrap;
  background: var(--c-black); color: var(--bg); padding: 4px 8px; font-size: 12px; display: none; }
.has-instant-tip:hover > .instant-tip { display: block; }
.backoffice-batch-note { font-size: 13px; color: var(--muted-2); }
.relayr-preview {
  --relayr-preview-cols: minmax(112px, 0.85fr) 64px minmax(0, 2fr);
  display: grid; grid-template-columns: var(--relayr-preview-cols);
  margin-bottom: 12px; border: 1px solid rgba(47, 35, 29, 0.28);
}
.relayr-preview-head,
.relayr-preview-row { display: grid; grid-column: 1 / -1; grid-template-columns: var(--relayr-preview-cols); align-items: center; }
.relayr-preview-head {
  min-height: 32px; background: rgba(47, 35, 29, 0.07); color: var(--muted-2);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}
.relayr-preview-head > div,
.relayr-preview-row > div { padding: 8px 10px; min-width: 0; }
.relayr-preview-row { min-height: 42px; border-top: 1px solid rgba(47, 35, 29, 0.16); font-size: 13px; color: var(--text); }
.relayr-preview-chain { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.relayr-preview-chain .chain-logo { width: 16px; height: 16px; flex: 0 0 16px; margin: 0; }
.relayr-preview-nonce {
  color: var(--muted-2); font-variant-numeric: tabular-nums; text-align: right;
}
.relayr-preview-details { display: flex; align-items: baseline; gap: 10px; justify-content: space-between; }
.relayr-preview-label { min-width: 0; overflow-wrap: anywhere; font-weight: bold; }
.relayr-preview-status { flex: 0 0 auto; min-width: 64px; text-align: right; font-size: 12px; color: var(--muted-2); }
.relayr-preview-status.ok { color: var(--c-teal); }
.relayr-preview-status.err { color: var(--c-pink); }
.relayr-preview-status.pending { color: var(--muted-2); }
.relayr-choice { margin: 8px 0; }

.activity-chains { display: inline-flex; align-items: center; gap: 2px; }
/* Several chains read as one action: full-size icons overlapped like an
   avatar stack — leftmost on top — each still its own tx link. */
.activity-chains--stacked { gap: 0; }
.activity-chains--stacked .activity-chain-link + .activity-chain-link,
.activity-chains--stacked > img + img,
.activity-chains--stacked > img + .activity-chain-link,
.activity-chains--stacked .activity-chain-link + img { margin-left: -6px; }
.activity-chains--stacked .activity-chain-link:hover { z-index: 10 !important; }
.token-on-chains { display: inline-flex; align-items: center; gap: 6px; }
.token-on-chains .chain-logo { width: 18px; height: 18px; display: inline-flex; }
.token-on-chains .chain-logo svg { width: 18px; height: 18px; display: block; }
.activity-chain-link { display: inline-flex; opacity: 0.85; }
.activity-chain-link:hover { opacity: 1; }

/* The bold flow amount inside the leading "[in/out] amount" cluster. The
   line box matches the tag chip's bordered height (16px + 2px border) so the
   pair reads as one centered line. */
.activity-amount-value {
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  color: var(--text);
}

/* The prefixed actor under the flow cluster: "From/To/By <address>". */
.activity-actor {
  margin-top: 2px;
  font-size: 10px;
  color: var(--muted-3);
  overflow-wrap: anywhere;
}

.activity-tag {
  border: 1px solid var(--c-teal);
  color: var(--c-teal);
  padding: 0 4px;
  font-size: 9px;
  line-height: 16px;
}

.activity-tag--out {
  border-color: var(--c-pink);
  color: var(--c-pink);
}

.activity-line {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* Merged same-tx rows: the memo is the headline, the actions are fine-print bullets. */
.activity-grouped-memo {
  margin-top: 12px;
  font-size: 12px;
  color: var(--text);
  overflow-wrap: anywhere;
}

.activity-bullets {
  margin: 2px 0 0;
}

/* Bullets directly after the actor line (no memo between) get the same air. */
.activity-actor + .activity-bullets {
  margin-top: 12px;
  padding-left: 0;
  font-size: 11px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* Token amounts inside bullets: same color, slightly heavier. */
.activity-em {
  font-weight: 600;
}

.activity-bullets li {
  margin-top: 2px;
  /* Hand-rolled marker: the dot sits flush left while wrapped lines keep
     hanging-indent alignment with the first line's text. */
  list-style: none;
  position: relative;
  padding-left: 14px;
}

.activity-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
}

.activity-memo {
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* Ruleset / key-value rows */
.detail-ruleset-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px solid var(--depth-bg-1);
  font-size: 11px;
}

.detail-ruleset-row:last-child {
  border-bottom: none;
}

.detail-ruleset-key {
  color: var(--muted);
}

.detail-ruleset-val {
  color: var(--text);
  font-weight: bold;
  text-align: right;
}

/* An unconfigured split group states its routing in prose — never as a synthesized 100% row. */
.splits-empty-note { font-size: 11px; color: var(--muted-2); margin: 2px 0 4px; word-break: normal; }
.splits-empty-note + .splits-empty-note { margin-top: 6px; }

/* Payouts table: percent · recipient · current amount. */
/* Funds bottom: Payouts | Surplus allowance side by side, with a bg-color vertical divider between. */
.funds-bottom-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); column-gap: 0; row-gap: 18px; align-items: start; }
.funds-bottom-grid > .rf-funds-col { align-self: start; }
.funds-bottom-grid > .rf-funds-col:first-child { padding-right: 32px; }
.funds-bottom-grid > .rf-funds-col + .rf-funds-col { border-left: 1px solid var(--bg); padding-left: 32px; }
.funds-chain-table { margin-top: 6px; }
.funds-chain-row {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; align-items: center; gap: 8px;
  padding: 5px 0; border-bottom: 1px solid var(--depth-bg-1); font-size: 11px;
}
.funds-chain-row:last-child { border-bottom: none; }
.funds-chain-head { color: var(--muted-2); text-transform: uppercase; letter-spacing: 0.5px; font-size: 10px; }
.funds-chain-row > span:nth-child(n+2) { text-align: right; white-space: nowrap; }
.funds-chain-name { display: flex; align-items: center; gap: 7px; min-width: 0; }
.payouts-table { margin-top: 4px; }
.payouts-row {
  display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 10px;
  padding: 5px 0; border-bottom: 1px solid var(--depth-bg-1); font-size: 11px;
}
.payouts-row:last-child { border-bottom: none; }
.payouts-head { color: var(--muted-2); text-transform: uppercase; letter-spacing: 0.5px; font-size: 10px; }
.payouts-pct { font-weight: bold; color: var(--text); }
.payouts-recipient { color: var(--text); min-width: 0; overflow: hidden; }
.payouts-amt { color: var(--muted); text-align: right; white-space: nowrap; }

/* 600px so the detail columns stack at the SAME width Activity becomes a subtab (renderProjectDetail's
   activityAsTab) — otherwise there's an in-between range with the Activity card wedged above the tabs. */
@media (max-width: 600px) {
  .discover-card {
    width: 100%;
  }

  .project-detail-header {
    flex-direction: column;
  }

  .project-detail-columns {
    flex-direction: column;
  }

  .project-detail-left {
    width: 100%;
  }
}

/* ── API source links + inline source view ───────────────────────────────── */

.contract-source-link,
.fn-source-link {
  color: var(--muted-2);
  font-size: 10px;
  text-decoration: none;
  margin-left: 4px;
  white-space: nowrap;
  align-self: baseline;
}

.contract-source-link:hover,
.fn-source-link:hover {
  color: var(--c-pink);
  text-decoration: underline;
}

.fn-expanded {
  padding: 0 12px 8px;
}

/* Collapsible sections (overview / source / transaction) */

.fn-section {
  margin: 4px 0;
  border: 1px solid var(--c-orange-light);
  border-radius: 3px;
  background: var(--card-bg);
}

.fn-section-header {
  padding: 4px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 10px;
  color: var(--muted-2);
}

.fn-section-header:hover {
  background: rgba(44,32,24,0.03);
}

.fn-section[data-open="true"] .fn-section-header,
.fn-section .fn-section-body:not([style*="none"]) {
  /* visual cue that body is open */
}

.fn-section-arrow {
  width: 10px;
  color: var(--muted-2);
}

.fn-section-label {
  font-weight: bold;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.fn-section-meta {
  color: var(--muted-4);
  font-size: 9px;
  margin-left: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.fn-section-body {
  /* no top divider — the header sits flush with the body */
}

/* Overview body */

.fn-overview {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fn-overview-sig {
  margin: 0;
  padding: 8px 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--c-teal-light);
  border-radius: 3px;
  overflow-x: auto;
}

.fn-overview-sig code {
  font-family: inherit;
  font-size: inherit;
  background: none;
  padding: 0;
  color: inherit;
}

.fn-overview-notice {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text);
}

.fn-overview-details {
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted-3);
}

.fn-overview-params {
  margin: 0;
  font-size: 10px;
  line-height: 1.4;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 2px 8px;
}

.fn-overview-params dt {
  font-weight: bold;
  color: var(--c-orange);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.fn-overview-params dd {
  margin: 0;
  color: var(--muted-3);
}

/* Source body (extends the generic section body) */

.fn-source-body {
  padding: 0;
}

.fn-source-code {
  margin: 8px;
  padding: 8px 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.45;
  white-space: pre;
  overflow-x: auto;
  max-height: 360px;
  overflow-y: auto;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--c-teal-light);
  border-radius: 3px;
}

.fn-source-code code {
  font-family: inherit;
  font-size: inherit;
  background: none;
  padding: 0;
}

/* ── Compact actionable form (used inside API tab function rows) ────────── */

.function-form.fn-form-compact {
  margin: 0;
  border: none;
  border-radius: 0;
  font-size: 11px;
  background: transparent;
}


.function-form.fn-form-compact .fn-name {
  font-size: 11px;
}

.function-form.fn-form-compact .fn-contract {
  font-size: 9px;
}

.function-form.fn-form-compact .fn-natspec {
  padding: 4px 8px;
}

.function-form.fn-form-compact .natspec-notice {
  font-size: 11px;
  line-height: 1.35;
}

.function-form.fn-form-compact .natspec-details {
  font-size: 10px;
  margin-top: 2px;
  line-height: 1.35;
}

.function-form.fn-form-compact .fn-inputs {
  padding: 6px 8px;
}

.function-form.fn-form-compact .input-group {
  margin-bottom: 8px;
}

.function-form.fn-form-compact .input-label {
  font-size: 10px;
  margin-bottom: 1px;
}

.function-form.fn-form-compact .param-description {
  font-size: 10px;
  margin-bottom: 2px;
  line-height: 1.3;
}

.function-form.fn-form-compact .field {
  padding: 3px 6px;
  font-size: 11px;
}

.function-form.fn-form-compact .badge {
  font-size: 9px;
  padding: 0 3px;
}

/* ─── DATA tab — Bendystraw catalog ────────────────────────────────────── */
/* Visually mirrors ACTIONS: .fn-row + .fn-summary + .fn-inputs + .fn-actions
   styles cascade from their existing rules. Below are only the bits unique
   to data: settings strip, query result tables, load-more. */

.bendystraw-settings {
  margin: 0 0 16px;
  padding: 0;
}
.bendystraw-settings-note {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
  margin-bottom: 12px;
}
.bendystraw-settings-note a { color: inherit; }
.bendystraw-settings-note a:hover { color: var(--c-teal); }

.bendystraw-settings-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
/* Data row content sits beneath .fn-summary on expand. The ACTIONS form
   stacks 12px fn-inputs padding + 16px input-group margin + 8px+12px fn-actions
   padding, which adds up to ~36px of dead space around the QUERY button.
   Tighten everything for the data-tab context. */
.data-row-content {
  padding: 10px 12px 8px;
}
.data-row-content .fn-inputs {
  padding: 0;
}
.data-row-content .input-group {
  margin-bottom: 8px;
}
.data-row-content .input-group:last-child {
  margin-bottom: 0;
}
.data-row-content .project-chain-pair {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--muted-4);
  margin-bottom: 10px;
}
.data-row-content .data-project-chain-label {
  margin-top: 8px;
}
.data-row-content .data-field-help {
  margin-top: 4px;
  color: var(--muted-2);
  font-size: 10px;
  line-height: 1.4;
}
.data-query-notes {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-left: 2px solid var(--c-teal);
  color: var(--muted-2);
  font-size: 10px;
  line-height: 1.5;
}
.data-query-notes > div + div {
  margin-top: 4px;
}
.data-row-content .fn-actions {
  padding: 0;
  margin-top: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* Chain selector sits inline inside an .input-group, not between sections like
   in the ACTIONS form — drop the divider + outer padding it ships with. */
.data-row-content .fn-chain-selector {
  padding: 0;
  border-top: none;
  margin-top: 4px;
}

/* Status text next to the QUERY button. */
.data-card-status {
  font-size: 11px;
  color: var(--muted);
}
.data-card-status.error {
  color: var(--error);
}
.data-query-copy-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.data-query-copy-link {
  flex: 0 0 auto;
}

.data-card-result {
  margin-top: 10px;
  overflow-x: auto;
}
.data-empty {
  color: var(--muted);
  font-size: 11px;
  padding: 8px 0;
}
.data-result-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  font-family: inherit;
  border: 1px solid var(--c-orange-light);
  border-radius: 3px;
  overflow: hidden;
}
.data-result-table th,
.data-result-table td {
  text-align: left;
  padding: 4px 8px;
  border-bottom: 1px solid var(--c-orange-light);
  vertical-align: top;
  white-space: nowrap;
}
.data-result-table thead th {
  color: var(--muted);
  font-weight: normal;
  text-transform: uppercase;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  background: color-mix(in srgb, var(--c-pink-light) 30%, var(--card-bg));
}
.data-result-table.single th {
  width: 140px;
  white-space: nowrap;
  background: color-mix(in srgb, var(--c-pink-light) 20%, var(--card-bg));
  color: var(--muted);
  font-weight: normal;
}
.data-result-table tbody tr:hover td {
  background: color-mix(in srgb, var(--c-pink-light) 15%, transparent);
}
.data-load-more {
  margin-top: 10px;
  font-size: 11px;
  padding: 3px 12px;
}

/* Cell formatters */
.data-cell-address,
.data-cell-txhash {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--c-teal);
}
.data-cell-address.muted { color: var(--muted); }
.data-cell-time {
  color: var(--muted);
}
.data-cell-bigint {
  font-variant-numeric: tabular-nums;
}
.data-cell-bool {
  font-weight: bold;
}
.data-cell-chain {
  color: var(--c-green);
}
.data-cell-uri {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--c-teal);
}
.data-cell-json {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  max-width: 260px;
}
.data-cell-json summary {
  cursor: pointer;
  color: var(--c-teal);
}
.data-cell-json pre {
  background: rgba(44,32,24,0.03);
  padding: 6px;
  margin: 4px 0 0 0;
  font-size: 10px;
  max-height: 240px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
}
.data-cell-svg {
  width: 60px;
  height: 60px;
  display: inline-block;
}
.data-cell-svg svg {
  width: 100%;
  height: 100%;
}


/* Revnet badge + stage rows (discover tab) */
.detail-address { white-space: nowrap; }

/* Revnet stage countdown + auto-issuance controls */
.detail-check-btn {
  font-size: 11px; font-weight: bold; letter-spacing: 0.5px; padding: 3px 12px; cursor: pointer;
  color: var(--text); background: var(--pill-bg);
  border: 1px solid var(--pill-border); border-radius: 2px;
}
.detail-check-btn:hover { border-color: var(--c-teal); color: var(--c-teal); }
.detail-check-btn:disabled { opacity: 0.6; cursor: default; }
.autoissue-tablewrap {
  border: 1px solid var(--c-orange-light);
  container-type: inline-size;
  max-width: 100%;
  overflow-x: auto;
}
.autoissue-table {
  width: 100%;
  min-width: 820px;
}
.autoissue-row {
  display: grid;
  grid-template-columns: 112px 76px minmax(140px, 1fr) 120px 130px 150px;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--c-orange-light);
  font-size: 12px;
}
.autoissue-row:last-child {
  border-bottom: none;
}
.autoissue-head {
  background: var(--bg);
  color: var(--muted-2);
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.autoissue-chain,
.autoissue-account,
.autoissue-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.autoissue-account .detail-address {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.autoissue-amount {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}
.autoissue-muted {
  color: var(--muted-3);
  font-size: 10px;
}
.autoissue-btn {
  padding: 5px 12px;
  font-size: 11px;
  border-width: 1px;
}
.autoissue-row > span:last-child {
  justify-content: flex-start;
}
.autoissue-distributed {
  color: var(--muted-2);
}
.autoissue-distributed a {
  color: var(--muted-2);
  text-decoration: none;
}
.autoissue-distributed a:hover {
  color: var(--c-teal);
  text-decoration: underline;
}

/* Cross-chain Ops table */
/* Per-chain settlement table — matches the owners/market table chrome (wrapping border + filled head). */
.detail-ops-table { margin-top: 10px; font-size: 12px; border: 1px solid var(--c-orange-light); }
/* minmax with fixed-LENGTH minimums (not bare `1fr` = minmax(auto,1fr)) so columns are content-independent
   and align across rows — otherwise a short chain name (Base) gets a narrower col 1 than a long one
   (Arbitrum) and the per-row values don't line up. */
.detail-ops-row { display: grid; grid-template-columns: minmax(92px, 0.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--c-orange-light); }
.detail-ops-row.detail-ops-3 { grid-template-columns: minmax(92px, 0.5fr) minmax(0, 1fr) minmax(0, 1fr); }
.detail-ops-row.detail-ops-5 { grid-template-columns: minmax(88px, 0.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.8fr); }
.detail-ops-row:last-child { border-bottom: none; }
.lp-remove-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--c-orange-light); }
.lp-remove-row:last-child { border-bottom: none; }
.lp-remove-head { font-weight: bold; }
.detail-ops-head { background: var(--bg); color: var(--muted-2); font-size: 10px; font-weight: bold; letter-spacing: 0.5px; text-transform: uppercase; }
.detail-ops-total { font-weight: bold; }
.detail-ops-cell:not(:first-child) { text-align: right; }
.detail-ops-chain { display: inline-flex; align-items: center; gap: 8px; }
.detail-ops-sub { display: block; color: var(--muted-3); font-size: 10px; margin-top: 1px; }
/* Bridges variant: 2 columns (Chains / Type), all left-aligned. */
.bridges-table .detail-ops-row { grid-template-columns: 2fr 0.6fr; }
.bridges-table .detail-ops-cell { text-align: left; }
.bridge-pair { display: inline-flex; align-items: center; gap: 8px; }
.bridge-pair-arrow { color: var(--c-black-light); display: inline-flex; align-items: center; }

.bridge-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.bridge-title {
  flex: 1;
  margin-bottom: 0;
}

.bridge-filter {
  border: 1px solid var(--c-orange-light);
  background: var(--card-bg);
  color: var(--text);
  font: inherit;
  font-size: 11px;
  padding: 5px 8px;
  min-width: 130px;
}

.bridge-empty {
  color: var(--muted-2);
}

.bridge-table-wrap {
  overflow-x: auto;
}

.bridge-table {
  min-width: 760px;
  font-size: 11px;
}

.bridge-row {
  display: grid;
  grid-template-columns: 1fr 0.9fr 1.5fr 1.1fr 1.1fr 0.9fr 0.7fr;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid var(--depth-bg-1);
}

.bridge-row:last-child {
  border-bottom: none;
}

.bridge-head {
  font-weight: bold;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.bridge-chain-pair {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.bridge-arrow {
  color: var(--muted-3);
}

.bridge-beneficiary {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bridge-num {
  text-align: left;
}

/* Outline chip (border + text, no fill): teal = claimed, orange = in-progress, light-black = other. */
.bridge-status {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 2px;
  background: transparent;
  border: 1px solid var(--c-black-light);
  color: var(--c-black-light);
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.bridge-status--claimed {
  background: transparent;
  border-color: var(--c-teal);
  color: var(--c-teal);
}

.bridge-status--pending,
.bridge-status--claimable {
  background: transparent;
  border-color: var(--c-orange);
  color: var(--c-orange);
}

.bridge-empty-row {
  padding: 14px 10px;
  color: var(--muted-2);
  text-align: center;
}

/* Per-card cross-chain badges (omnichain projects) */

/* Hero price chart (above the tabs, revnets) */
.price-hero { margin-bottom: 16px; }
.price-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.price-legend { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; flex: 1 1 100%; }
.price-chip {
  display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: bold;
  padding: 5px 12px; border-radius: 0; border: none; background: var(--bg);
}
.price-chip.active { color: var(--text); }
.price-chip.muted { color: var(--text); cursor: help; }
.price-chip-col { display: inline-flex; flex-direction: column; line-height: 1.3; }
.price-chip-label { font-weight: bold; }
.price-chip-val { font-size: 11px; font-weight: normal; color: var(--muted); white-space: nowrap; display: inline-block; min-width: 78px; }
.price-chip-unit { color: var(--muted-2); opacity: 0.8; }
.price-chip-skel { display: inline-block; height: 11px; vertical-align: middle; }
.price-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pc-issuance .price-dot { background: var(--c-teal-light); }
.pc-amm .price-dot { background: var(--c-orange); }
.pc-cashout .price-dot { background: var(--c-pink); }
.price-ranges { margin: 0; flex-wrap: wrap; align-items: center; }
.price-detail-row { display: flex; justify-content: flex-end; margin-top: 5px; }
.price-detail-toggle {
  position: relative; display: inline-flex; align-items: center;
  color: var(--c-teal);
}
.price-detail-toggle::after {
  content: ''; position: absolute; right: 1px; width: 6px; height: 6px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg); pointer-events: none;
}
.price-detail-select {
  appearance: none; field-sizing: content; padding: 2px 14px 2px 0; border: 0; border-radius: 0;
  background: transparent; color: inherit; cursor: pointer;
  font: inherit; font-size: 10px; font-weight: normal; white-space: nowrap;
}
.price-detail-select:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.price-detail-select:focus-visible { outline: 0; text-decoration: underline; text-underline-offset: 3px; }
.price-chart { width: 100%; }
/* Shop: 721 NFT tiers */
/* Shop tab: items grouped under category headings (juicy-vision), 3 per row, larger cards */
.shop-cat-group { margin: 0 0 26px; }
.shop-cat-heading { font-size: 14px; font-weight: bold; color: var(--text); margin: 6px 0 12px; }
/* Checkout bar is mobile-only (desktop keeps the Pay card visible in the left column). */
.shop-checkout-bar { display: none; }

/* Category filter chips leading the shop — multi-select, "All" is the default (active = teal). */
.shop-cat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px; }
.shop-cat-chip {
  font-family: inherit; font-size: 12px; font-weight: bold; padding: 6px 14px;
  border: 1px solid var(--c-orange-light); background: none; color: var(--muted-2);
  border-radius: 2px; cursor: pointer; white-space: nowrap;
}
.shop-cat-chip:hover { color: var(--c-teal); border-color: var(--c-teal); }
.shop-cat-chip.active { color: var(--c-teal); border-color: var(--c-teal); }
.shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.shop-tier { border: 1px solid var(--c-orange-light); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 0.2s, border-color 0.2s; }
.shop-tier.selected { border-color: var(--c-teal); }
.shop-tier.shop-tier-focus { border-color: var(--c-teal); box-shadow: 0 0 0 3px rgba(110,196,196,0.35); }
.shop-tier-img { aspect-ratio: 1; background: transparent; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.shop-tier-img img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.shop-tier-img video { width: 100%; height: 100%; object-fit: cover; background: var(--c-black); }
/* PDF previews (pdf.js canvas). Cards/thumbs: page one cropped like other media, anchored to the page top. */
.tier-pdf-canvas { width: 100%; height: 100%; object-fit: cover; object-position: top; background: #fff; display: block; }
/* Detail view: full page (contained) with a pager underneath. */
.tier-pdf-detail { width: 100%; height: 100%; display: flex; flex-direction: column; }
.tier-pdf-detail-page { flex: 1; min-height: 0; }
.tier-pdf-canvas--page { object-fit: contain; object-position: center; background: var(--card-bg); }
.tier-pdf-pager { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 4px 0; }
.tier-pdf-pager-label { font-size: 11px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.tier-media-text { width: 100%; height: 100%; margin: 0; overflow: auto; padding: 10px; box-sizing: border-box; font-size: 11px; line-height: 1.5; color: var(--c-black); background: var(--card-bg); white-space: pre-wrap; word-break: break-word; }
.tier-media-audio { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: var(--card-bg); padding: 8px; box-sizing: border-box; }
.tier-media-audio img { max-width: 100%; max-height: calc(100% - 36px); object-fit: contain; }
.tier-media-audio audio { width: 100%; }
.tier-media-audio-note { width: 100%; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; color: var(--c-teal); background: var(--card-bg); }
.tier-media-audio-note-glyph { font-family: Georgia, "Times New Roman", serif; font-size: clamp(38px, 10vw, 76px); line-height: 1; transform: translateY(-2%); }
.tier-media-badge { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; height: 100%; color: var(--muted-2); text-decoration: none; }
.tier-media-badge-ext { font-size: 14px; font-weight: bold; letter-spacing: 1px; padding: 6px 10px; border: 1px solid var(--c-orange-light); border-radius: 3px; }
a.tier-media-badge:hover .tier-media-badge-ext { color: var(--c-teal); border-color: var(--c-teal); }
.shop-tier-ph { font-size: 15px; color: var(--muted-3); }
.shop-tier-info { padding: 10px 12px 12px; }
.shop-tier-name { font-size: 14px; font-weight: bold; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-tier-description { color: var(--muted-2); font-size: 12px; line-height: 1.35; margin: -1px 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.shop-tier-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.shop-tier-pricecol { display: flex; flex-direction: column; min-width: 0; }
.shop-tier-price { font-size: 15px; font-weight: bold; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Tier discount: an enticing badge over the art + the original price struck through. */
.shop-tier-discount { position: absolute; top: 6px; left: 6px; background: var(--c-teal); color: var(--bg); font-size: 10px; font-weight: bold; padding: 2px 6px; border-radius: 3px; letter-spacing: 0.3px; z-index: 1; }
.shop-tier-price-orig { font-size: 11px; color: var(--muted-2); text-decoration: line-through; }
.paybox-shop-discount { position: absolute; top: 3px; left: 3px; background: var(--c-teal); color: var(--bg); font-size: 8px; font-weight: bold; padding: 1px 4px; border-radius: 2px; z-index: 1; }
/* Item-detail popup */
.tier-detail { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.tier-detail-art { aspect-ratio: 1; background: var(--card-bg); border-radius: 4px; display: flex; align-items: center; justify-content: center; overflow: hidden; max-height: 280px; position: relative; }
.tier-detail-art img, .tier-detail-art svg, .tier-detail-art video { width: 100%; height: 100%; object-fit: contain; }
.tier-detail-art video { background: var(--c-black); }
.tier-detail-name { font-size: 16px; font-weight: bold; word-break: break-word; }
.tier-detail-description { color: var(--muted-2); font-size: 13px; line-height: 1.45; white-space: pre-wrap; }
.tier-detail-price { display: flex; align-items: baseline; gap: 8px; }
.tier-detail-price-eff { font-size: 18px; font-weight: bold; }
.tier-detail-price-orig { font-size: 13px; color: var(--muted-2); text-decoration: line-through; }
.tier-detail-discount { background: var(--c-teal); color: var(--bg); font-size: 11px; font-weight: bold; padding: 2px 6px; border-radius: 3px; }
.tier-detail-section-h { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted-2); margin-bottom: 4px; }
.tier-detail-supply-row, .tier-detail-fact { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 2px 0; }
.tier-detail-supply-chain { display: inline-flex; align-items: center; gap: 3px; }
.tier-detail-supply-val, .tier-detail-fact-l { color: var(--muted-2); }
.tier-detail-op { display: flex; flex-direction: column; gap: 14px; }
.tier-detail-op-action { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.tier-detail-mint { align-self: flex-start; }
.tier-detail-op-note { max-width: 38rem; color: var(--muted-2); font-size: 11px; line-height: 1.45; }
.tier-detail-op-row { display: flex; align-items: center; gap: 8px; }
.tier-detail-op-input { width: 70px; }
.tier-detail-discount-field { margin: 0; }
.tier-detail-op-row .tier-detail-discount-input { flex: 0 0 88px; width: 88px; min-width: 0; box-sizing: border-box; }
.tier-detail-remove { align-self: flex-start; }
.tier-detail-buy { display: flex; align-items: center; gap: 8px; }
.tier-detail-soldout { font-size: 12px; color: var(--muted-2); }
.tier-detail-flag { padding: 4px 0; }
.tier-detail-flag-name { font-size: 13px; font-weight: bold; }
.tier-detail-flag-sub { font-size: 12px; color: var(--muted-2); }
/* "+ Add another item" — own line, divided from the current item's fields above. */
.tier-add-another { display: block; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--c-pink-light); }
/* Queue-ruleset 721-shop choice (keep / remove / new). */
.queue-shop-choice { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.queue-shop-opt { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.queue-shop-opt.disabled { opacity: 0.5; cursor: default; }
.queue-shop-opt-name { font-size: 13px; font-weight: bold; }
.queue-shop-opt-sub { font-size: 12px; color: var(--muted-2); }
/* Shop header: title left, "+ Add items" operator CTA top-right. */
.shop-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.shop-credits { margin: 8px 0 14px; padding: 8px 10px; border: 1px solid var(--c-teal); background: rgba(61, 145, 143, 0.06); }
.shop-credits .token-line-val { font-weight: bold; color: var(--c-teal); }
.shop-credits-note { flex-basis: 100%; margin-left: 0; font-size: 10px; color: var(--muted-2); }
.shop-head-add { font-size: 13px; white-space: nowrap; }
.shop-tier-supply { font-size: 11px; color: var(--muted-2); }
.shop-tier-transfer-paused { width: max-content; margin-top: 2px; border: 1px solid var(--border); border-radius: 999px; padding: 1px 6px; color: var(--c-amber); font-size: 10px; font-weight: 650; }
.shop-tier-step { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.shop-tier-stepbtn { width: 26px; height: 26px; border: 1px solid var(--c-orange-light); border-radius: 4px; background: none; color: var(--c-teal); font-size: 16px; font-weight: bold; line-height: 1; cursor: pointer; }
.shop-tier-stepbtn:hover:not(:disabled) { border-color: var(--c-teal); background: rgba(110,196,196,0.12); }
.shop-tier-stepbtn:disabled { color: var(--muted-3); cursor: default; }
.shop-tier-qty { min-width: 22px; text-align: center; font-size: 14px; font-weight: bold; color: var(--text); }
/* Mini-shop folded into the Pay card */
.paybox-shop { margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--c-orange-light); }
.paybox-shop-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.paybox-shop-label { font-size: 11px; font-weight: bold; color: var(--muted); }
.paybox-shop-all { font-size: 11px; color: var(--c-teal); background: none; border: none; cursor: pointer; padding: 0; }
.paybox-shop-all:hover { text-decoration: underline; }
/* top padding leaves room for the badge (sticks up 6px); overflow-x:auto would otherwise clip it */
.paybox-shop-strip { display: flex; gap: 8px; overflow-x: auto; padding: 8px 3px 4px; }
.paybox-shop-item { position: relative; flex: 0 0 auto; width: 72px; border: 1px solid var(--c-orange-light); border-radius: 4px; display: flex; flex-direction: column; }
.paybox-shop-thumb { width: 100%; aspect-ratio: 1; background: var(--card-bg); display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 3px 3px 0 0; overflow: hidden; position: relative; }
.paybox-shop-item:not(.soldout):hover { border-color: var(--c-teal); }
.paybox-shop-item.selected { border-color: var(--c-teal); }
.paybox-shop-item.soldout { opacity: 0.45; }
.paybox-shop-item.soldout .paybox-shop-thumb { cursor: default; }
.paybox-shop-thumb img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.paybox-shop-thumb video { width: 100%; height: 100%; object-fit: cover; background: var(--c-black); }
.paybox-shop-thumb .tier-media-badge-ext { font-size: 10px; padding: 3px 6px; }
.paybox-shop-thumb span { font-size: 11px; color: var(--muted-3); }
.paybox-shop-badge { position: absolute; top: -6px; right: -6px; z-index: 2; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--c-teal); color: var(--card-bg); font-size: 11px; font-weight: bold; line-height: 18px; text-align: center; }
.paybox-shop-foot { min-height: 20px; display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden; }
.paybox-shop-price { font-size: 10px; font-weight: bold; color: var(--text); padding: 3px 4px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.paybox-shop-step { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 1px 2px; }
.paybox-shop-stepbtn { width: 20px; height: 20px; border: none; background: none; color: var(--c-teal); font-size: 15px; font-weight: bold; cursor: pointer; line-height: 1; padding: 0; }
.paybox-shop-stepbtn:disabled { color: var(--muted-3); cursor: default; }
.paybox-shop-qty { font-size: 12px; font-weight: bold; color: var(--text); min-width: 14px; text-align: center; }
.paybox-nft-list { margin: 4px 0 2px; }
.paybox-nft-row { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: bold; color: var(--c-teal); margin: 2px 0; }
.paybox-nft-thumb { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 4px; overflow: hidden; background: var(--card-bg); display: inline-flex; align-items: center; justify-content: center; }
.paybox-nft-thumb img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
/* Settlement: per-route bridge infra (native / CCIP) */
.settlement-infra { font-size: 11px; color: var(--muted-2); margin: 4px 0 10px; }
.settlement-infra-tag { font-size: 9px; font-weight: bold; letter-spacing: 0.5px; text-transform: uppercase; padding: 1px 5px; border-radius: 2px; border: 1px solid var(--c-orange-light); }
.settlement-infra-tag--native { color: var(--c-orange); border-color: var(--c-orange); }
.settlement-infra-tag--ccip { color: var(--c-orange); border-color: var(--c-orange); }
/* Bottom subsection (activity feed) within a detail card */
.detail-subsection { margin-top: 24px; padding-top: 0; border-top: none; }
.detail-subsection-title { font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted-2); margin-bottom: 8px; }
/* Liquidity-by-price-band histogram */
.lp-depth { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--c-orange-light); }
.lp-depth-title { margin-bottom: 6px; } /* appearance via .detail-card-title */
.lp-depth-holder { width: 100%; position: relative; }
.lp-depth-svg { display: block; width: 100%; height: auto; }
.lp-depth-svg text { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; fill: var(--c-black-light); }
.lp-depth-tip { position: absolute; top: 4px; pointer-events: none; background: var(--c-black); color: var(--card-bg); font-size: 11px; line-height: 1.35; padding: 5px 8px; border-radius: 3px; white-space: nowrap; z-index: 5; }
.lp-depth-tip-price { font-weight: bold; }
.lp-depth-tip-amt { opacity: 0.85; }

/* Chart hover tooltip + guide line (both charts) */
.chart-wrap { position: relative; }
.chart-holder { width: 100%; position: relative; }
/* Chart axis years + "Today" — HTML overlays (not SVG text) so they stay at the regular font size
   regardless of the chart's responsive width. */
.chart-axis { position: absolute; bottom: 2px; font-size: 12px; color: var(--muted-2); pointer-events: none; }
.chart-axis-l { left: 4px; }
.chart-axis-r { right: 4px; }
.chart-today { position: absolute; top: 4px; font-size: 12px; font-weight: bold; color: var(--c-teal); white-space: nowrap; pointer-events: none; transform: translateX(3px); }
.chart-today-r { transform: translateX(calc(-100% - 3px)); }
.chart-guide { position: absolute; top: 0; bottom: 18px; width: 1px; background: rgba(44,32,24,0.4); pointer-events: none; }
/* Instant chip tooltips (native title has a fixed ~1s OS delay). Same look as the chart hover tip. */
.price-chip { position: relative; }
.price-chip[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 6px); left: 0; width: 320px; max-width: 74vw;
  background: var(--c-black); color: var(--card-bg); padding: 8px 10px;
  border-radius: 3px; font-size: 11px; line-height: 1.55; white-space: normal;
  pointer-events: none; z-index: 6;
}
.chart-tip {
  position: absolute; top: 4px; background: var(--c-black); color: var(--card-bg); padding: 6px 8px;
  border-radius: 3px; font-size: 10px; line-height: 1.5; pointer-events: none; white-space: nowrap; z-index: 5;
}
.chart-tip-date { font-weight: bold; margin-bottom: 2px; }
.chart-tip-row { display: flex; align-items: center; gap: 5px; }
.chart-tip-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.chart-tip-swatch { width: 7px; height: 7px; flex-shrink: 0; }

/* A term whose definition appears on hover. The dotted underline rather than an icon, for
   anything rendered AS TEXT: it attaches to the word being defined and adds no visual mass,
   which is what breaks down when several defined terms sit in a row. */
.concept-term { border-bottom: 1px dotted var(--muted-3); cursor: help; }
.concept-term:hover { border-bottom-color: var(--muted-2); }
th[data-tip] { position: relative; }
th[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 6px); left: 0; width: 300px; max-width: 74vw;
  background: var(--c-black); color: var(--card-bg); padding: 8px 10px;
  font-size: 11px; line-height: 1.55; font-weight: normal; white-space: normal;
  text-align: left; pointer-events: none; z-index: 6;
}

/* A small (!) carrying an always-true caveat about how to read a chart, so it does not spend a
   banner line. Anything saying data is MISSING stays inline instead. Reuses the chip tooltip. */
.chart-note-tip {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-left: auto; flex-shrink: 0;
  padding: 0; border: none; color: var(--muted-2);
  cursor: help; background: none;
}
.chart-note-tip:hover, .chart-note-tip:focus-visible { border-color: var(--muted-2); color: var(--text); outline: none; }
.chart-note-tip[data-tip]:hover::after,
.chart-note-tip[data-tip]:focus-visible::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 6px); right: 0; width: 320px; max-width: 74vw;
  background: var(--c-black); color: var(--card-bg); padding: 8px 10px;
  border-radius: 0; font-size: 11px; line-height: 1.55; white-space: normal;
  pointer-events: none; z-index: 6; text-align: left; font-weight: normal;
}

/* Popovers and hover callouts use the app's square geometry. */
.usd-balance-pop,
.owners-pie-tip,
.lp-graph-tip,
.loan-fee-tip,
.lp-depth-tip,
.price-chip[data-tip]:hover::after,
.chart-tip,
.addr-tip,
.instant-tip,
.cashout-tip,
.activity-chain-menu,
.acct-search-menu,
.wallet-menu {
  border-radius: 0;
}
.chart-tip-reason {
  width: 240px;
  max-width: 68vw;
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent);
  white-space: normal;
}

/* Token issuance card (revnet Stages tab) */
.issuance-rate { font-size: 20px; font-weight: bold; margin: 6px 0 2px; }
.issuance-sub { font-size: 12px; color: var(--muted-2); margin: 1px 0; }
.issuance-ranges { display: flex; gap: 4px; margin: 10px 0 6px; }
.issuance-range-btn {
  font-size: 10px; font-weight: bold; padding: 2px 8px; cursor: pointer;
  color: var(--muted-2); background: var(--pill-bg);
  border: 1px solid var(--pill-border, rgba(44,32,24,0.15)); border-radius: 2px;
}
.issuance-range-btn.active { color: var(--c-teal); border-color: var(--c-teal); }
.issuance-chart { width: 100%; }

/* Standalone market price chart (Owners → Market) — scaled to the trades, not the issuance ladder. */
.market-chart { margin: 0 0 22px; }
.market-chart-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.market-chart-price { font-size: 22px; font-weight: bold; margin: 4px 0 2px; }
.market-chart-change { font-size: 12px; font-weight: bold; color: var(--muted-2); min-height: 16px; }
.market-chart-change.is-up { color: var(--c-teal); }
.market-chart-change.is-down { color: var(--c-orange); }
.market-chart-controls { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.market-chart-ranges { margin: 0; }
.market-chart-body { margin-top: 10px; }
.market-chart-holder { width: 100%; position: relative; }
.market-chart-svg { display: block; width: 100%; height: auto; }
.market-chart-svg text { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; fill: var(--c-black-light); }
.market-chart-tip {
  position: absolute; top: 4px; pointer-events: none; background: var(--c-black); color: var(--card-bg);
  font-size: 11px; line-height: 1.35; padding: 5px 8px; border-radius: 0; white-space: nowrap; z-index: 5;
}
.market-chart-tip-price { font-weight: bold; }
.market-chart-tip-when { opacity: 0.85; }
.market-chart-note {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--c-orange-light);
  color: var(--muted-2); font-size: 11px; line-height: 1.5;
}

/* Ghost cards for the price/pool cards — the same shape their resolved form takes. */
.chart-ghost { display: flex; flex-direction: column; gap: 8px; }
.chart-ghost-price { margin: 0; }
.chart-ghost-change { margin: 0; }
.chart-ghost-plot { margin-top: 6px; }
.chart-ghost-rule { margin: 6px 0 2px; opacity: 0.5; }

/* Pool card — live price both directions + the ceiling/floor it trades between. */
.pool-price { margin: 0 0 22px; }
.pool-price-body { margin-top: 8px; }
.pool-price-main { font-size: 16px; font-weight: bold; }
.pool-price-sub { font-size: 13px; color: var(--muted-2); margin-top: 2px; }
.pool-price-rows { margin-top: 12px; border-top: 1px solid var(--c-orange-light); padding-top: 8px; }
.pool-price-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 2px 0; color: var(--muted-2); }
.pool-price-val { font-weight: bold; color: var(--text); }

/* Price chart dropped because the issuance unit can't convert onto the pair-token axis (no feed). */
.price-chart-unavailable { padding: 22px 14px; font-size: 12px; color: var(--muted); text-align: center; }

/* Past-rulesets expandable on the Rulesets tab: the card title doubles as the toggle. */
.rf-past-toggle { display: block; width: 100%; text-align: left; background: none; cursor: pointer; }
.rf-past-body { padding: 10px 0 2px; font-size: 12px; overflow-x: auto; }
.rf-past-table { width: 100%; }
.issuance-svg { display: block; }

/* Inline pay card (project detail, left column — slim) + shared routing tag / AMM subtext */
.paybox-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px 8px; flex-wrap: wrap; margin-bottom: 7px;
}
.paybox-payon {
  display: flex; align-items: baseline; flex-wrap: nowrap;
  font-size: 11px; color: var(--muted-2); min-width: 0; white-space: nowrap;
}
.paybox-payon-label { font-size: 11px; margin-right: 0.6ch; }
.paybox-chain-static, .paybox-curr-static {
  font-weight: bold; color: var(--text); font-size: 11px; display: inline-block;
  vertical-align: baseline; white-space: nowrap;
}
.paybox-chain-compact { font-size: 9px; }
/* Inline text-style chain/currency picker — underlined label + small caret, no box. */
.paybox-select {
  font-family: inherit; font-size: 11px; font-weight: bold; padding: 0 14px 0 0;
  max-width: 100%; min-width: 0; box-sizing: border-box;
  display: inline-block; vertical-align: baseline;
  appearance: none; -webkit-appearance: none;
  background:
    linear-gradient(45deg, transparent 50%, var(--muted-2) 50%) calc(100% - 9px) 50% / 5px 5px no-repeat,
    linear-gradient(135deg, var(--muted-2) 50%, transparent 50%) calc(100% - 4px) 50% / 5px 5px no-repeat,
    transparent;
  border: none; color: var(--text); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px;
}
.paybox-select:hover { color: var(--c-teal); }
.paybox-select:focus { outline: none; }
.paybox-select:focus-visible {
  outline: none !important;
  color: var(--c-teal);
}
.paybox-amount-row { display: flex; align-items: stretch; gap: 0; }
/* One bordered field holding the amount + an inline currency dropdown right after it. */
.paybox-field {
  flex: 1; min-width: 0; display: flex; align-items: center;
  border: 2px solid var(--write); border-right: none; background: var(--card-bg);
}
.paybox-amount {
  flex: 1; min-width: 0; box-sizing: border-box;
  font-family: inherit; font-size: 17px; font-weight: bold;
  padding: 6px 4px 6px 8px; border: none; background: transparent; color: var(--text);
}
.paybox-amount:focus,
.paybox-amount:focus-visible { outline: none !important; }
.paybox-amount::-webkit-outer-spin-button,
.paybox-amount::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.paybox-amount[type=number] { -moz-appearance: textfield; }
.paybox-curr-wrap { display: flex; align-items: center; padding: 0 8px 0 2px; min-width: 0; }
.paybox-curr-static { font-weight: bold; font-size: 13px; color: var(--muted-2); white-space: nowrap; }
.paybox-curr-wrap .paybox-select {
  font-size: 13px; color: var(--muted-2); text-decoration: none; padding: 0 14px 0 0;
}
.paybox-curr-wrap .paybox-select:hover { color: var(--text); }
.paybox-curr-wrap .paybox-select:focus-visible { color: var(--text); }
.paybox-btn {
  font-family: inherit; font-size: 13px; font-weight: bold; padding: 6px 18px; flex-shrink: 0;
  border: 2px solid var(--write); background: var(--c-green-light); color: var(--c-black); cursor: pointer;
}
.paybox-btn:hover { opacity: 0.9; }
.paybox-btn-idle { background: var(--card-bg); color: var(--muted-2); border-color: var(--c-green-light); cursor: not-allowed; }
.paybox-btn-idle:hover { opacity: 1; }

.paybox-rules-link {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  width: 100%;
  max-width: 100%;
  margin: 0 0 8px;
  padding: 5px 8px;
  border: 1px solid var(--c-orange);
  background: rgba(184, 96, 46, 0.08);
  color: var(--c-orange);
  font-size: 11px;
  text-decoration: none;
}
.paybox-rules-link:hover { color: var(--c-orange); background: rgba(184, 96, 46, 0.14); }
.paybox-rules-label { text-transform: uppercase; letter-spacing: 0.04em; }
.paybox-rules-time { color: var(--c-orange); font-weight: bold; font-size: 12px; }
.detail-spacious .project-detail-left > .paybox-rules-link + .paybox { margin-top: 0; }

/* Countdown banners shown above the pay box for project start and upcoming rule changes. */
.paybox-countdown {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px;
  padding: 8px 12px; border: 1px dashed var(--c-green-light); background: var(--card-bg);
}
.paybox-countdown-label { font-size: 11px; color: var(--muted-2); text-transform: uppercase; letter-spacing: 0.04em; }
.paybox-countdown-time { font-size: 15px; font-weight: bold; color: var(--c-teal); font-variant-numeric: tabular-nums; }

.paybox-feedback { margin: 8px 0; }
.paybox-nft-summary {
  margin: 10px 0 12px; padding: 7px 0;
  border-top: 1px solid var(--c-orange-light); border-bottom: 1px solid var(--c-orange-light);
}
.paybox-nft-summary-row { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; font-size: 11px; color: var(--muted-2); }
.paybox-nft-summary-label { min-width: 0; }
.paybox-nft-summary-value { color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.paybox-nft-summary-row.total { margin-top: 3px; padding-top: 5px; border-top: 1px solid var(--c-orange-light); font-weight: bold; }
.paybox-nft-summary-row.total .paybox-nft-summary-value { font-size: 12px; }
.paybox-nft-summary-row.credit .paybox-nft-summary-value,
.paybox-nft-summary-row.enough .paybox-nft-summary-value { color: var(--c-teal); }
.paybox-nft-summary-row.short,
.paybox-nft-summary-row.short .paybox-nft-summary-value { color: var(--c-pink); font-weight: bold; }
.paybox-nft-summary-row.muted .paybox-nft-summary-value { color: var(--muted); }
.paybox-yg-label { font-size: 11px; color: var(--muted-2); }
.paybox-yg-row { display: flex; align-items: center; gap: 11px; margin: 1px 0; flex-wrap: wrap; }
.paybox-yg-val { font-size: 16px; font-weight: bold; color: var(--text); }
.paybox-yg-val.muted { font-size: 12px; font-weight: normal; color: var(--muted); }
.paybox-splits {
  font-size: 11px; color: var(--muted-2); text-align: left; margin-top: 5px; font-weight: 600;
}
/* Action picker (Pay / Add to balance) — bold like the chain picker, sits at the right of the top row. */
.paybox-mode { font-weight: bold; color: var(--text); }
/* Add-to-balance "You get 0" — single compact line, no big bold value. */
.paybox-yg-zero { font-size: 12px; color: var(--muted-2); }
/* Router add-to-balance: the swap-landed amount estimate. */
.paybox-conv { font-size: 11px; color: var(--c-teal); margin-top: 3px; }
.paybox-conv.muted { color: var(--muted-2); }

/* Memo — subtle, optional, full-width at the bottom. */
.paybox-memo {
  width: 100%; box-sizing: border-box; font-family: inherit; font-size: 11px; padding: 5px 8px; margin: 8px 0 12px;
  border: 1px solid var(--bg); background: transparent; color: var(--text); border-radius: 2px;
}
.paybox-memo::placeholder { color: var(--muted); }
.paybox-memo:focus { outline: none; border-color: var(--c-black-light); }
.paybox-memo:focus-visible { outline: none !important; border-color: var(--c-teal); }
.paybox-status { font-size: 11px; margin-top: 6px; color: var(--muted-2); word-break: break-word; }
.paybox-status:empty { margin-top: 0; } /* keep the pay card's bottom padding equal to the top when idle */
.paybox-status.success { color: var(--c-teal); }
.paybox-status.error { color: var(--c-pink); }
.paybox-contract-warning {
  display: block;
  margin: 8px 0 0;
  padding: 7px 9px;
  border: 1px solid var(--c-orange);
  color: var(--c-orange);
  background: rgba(184, 96, 46, 0.08);
  font-size: 11px;
  line-height: 1.45;
}
.paybox-contract-warning.blocked {
  border-color: var(--c-pink);
  color: var(--c-pink);
  background: var(--c-pink-light);
  font-weight: bold;
}

/* Routing tag — shared by the project-page card and the Actions Pay component */
.pay-routing-tag {
  display: inline-block; font-family: inherit; font-size: 10px; font-weight: bold;
  letter-spacing: 0.5px; padding: 2px 7px; border-radius: 2px;
  background: rgba(44,32,24,0.06); color: var(--muted-2); border: 1px solid rgba(44,32,24,0.12);
}
.pay-routing-tag.amm {
  background: transparent; color: var(--c-orange); border-color: var(--c-orange);
}
.pay-routing-tag.direct, .paybox-route-direct {
  display: inline-block; font-family: inherit; font-size: 10px; font-weight: bold; letter-spacing: 0.5px; cursor: pointer;
  padding: 2px 7px; border-radius: 2px; background: transparent; color: var(--c-teal); border: 1px solid var(--c-teal);
}
.paybox-route-comparison {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px;
  padding-top: 8px; border-top: 1px solid var(--c-orange-light); font-size: 11px;
}
.paybox-route-comparison-item { display: flex; flex-direction: column; gap: 2px; }
.paybox-route-comparison-item span { color: var(--muted-2); }
.paybox-route-comparison-note { grid-column: 1 / -1; color: var(--muted-2); }
.pay-amm-sub { font-size: 11px; color: var(--muted-2); margin: 2px 0 0; }
.paybox-amm-fill { font-size: 11px; color: var(--muted-2); margin-top: 12px; }
.paybox-amm-cmp { font-size: 11px; color: var(--muted-2); margin-top: 2px; }
.pay-splits-line { font-size: 12px; color: var(--muted-2); margin: 4px 0; }

/* Terms table (revnet Terms tab) — one row per stage, horizontal columns */
/* Pull the table out to the card edges (card padding = 14px) so the active-row highlight bleeds
   end-to-end; cell padding is re-added at the first/last columns to keep content aligned. */
.terms-table-wrap { overflow-x: auto; margin: 0 -14px; }
.terms-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.terms-table th {
  text-align: left; font-weight: bold; color: var(--muted-2); font-size: 11px;
  padding: 6px 28px 6px 0; border-bottom: 1px solid var(--c-orange-light); white-space: nowrap;
}
.terms-table td {
  padding: 8px 28px 8px 0; border-bottom: 1px solid var(--c-orange-light);
  color: var(--text); vertical-align: top; white-space: nowrap;
}
.terms-table th:first-child, .terms-table td:first-child { padding-left: 14px; }
.terms-table th:last-child, .terms-table td:last-child { padding-right: 14px; }
.terms-table tbody tr:last-child td { border-bottom: none; }
/* Active stage: no row fill — just a pink dot beside the stage number. */
.terms-current-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--c-teal); margin-left: 7px; vertical-align: middle; }
.terms-stage { font-weight: bold; }
.terms-period { color: var(--text); }
.terms-sub { font-size: 10px; color: var(--muted-2); margin-top: 1px; }
.terms-issuance { display: flex; flex-direction: column; }
.terms-muted { color: var(--muted-2); }

/* ============================================================
   Create-a-project wizard
   ============================================================ */

/* Entry button on the nav tab row */
/* Create: idle/unavailable (in tuning before launch) — light black. */
.discover-top-ctrls { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.discover-net-select {
  font-family: inherit; font-size: 13px; cursor: pointer;
  min-width: 5.5em; /* floor so the label never collapses to a sliver */
  padding: 0 13px 0 0; color: var(--c-black-light);
  border: none; outline: none; box-shadow: none;
  -webkit-appearance: none; appearance: none;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' fill='none' stroke='%237d6858' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right center;
}
.discover-net-select:hover { opacity: 1; }
.discover-net-select:focus { outline: none; border: none; box-shadow: none; }
.tab-create {
  font-family: inherit; font-size: 13px; font-weight: bold; cursor: pointer;
  padding: 4px 14px; background: transparent; color: var(--c-black);
  border: 2px solid var(--c-teal);
}
.tab-create:hover { color: var(--c-teal); }
/* Connect wallet: top-right of the site header, black. */
#header > #connect-btn {
  position: absolute; top: 18px; right: 16px; margin: 0;
  font-family: inherit; font-size: 13px; font-weight: bold; cursor: pointer;
  padding: 4px 14px; background: transparent; color: var(--c-black);
  border: 2px solid var(--c-black);
}
#header > #connect-btn:hover { text-shadow: 0 0 0.6px currentColor; }
#header > #connect-btn.connected { background: var(--c-black); color: var(--bg); }
#header > #connect-btn.viewing-as {
  background: var(--c-orange); border-color: var(--c-orange); color: var(--bg);
}

/* Connected-wallet dropdown (Copy address / Disconnect). Fixed to the viewport, anchored under the button. */
.wallet-menu {
  position: fixed; z-index: 1000; min-width: 150px; max-width: min(320px, calc(100vw - 16px));
  background: var(--c-black); border: 1px solid var(--c-black-light);
  box-shadow: 0 6px 24px rgba(44,32,24,0.25); padding: 4px;
}
.wallet-menu-item {
  display: block; width: 100%; text-align: left; font-family: inherit; font-size: 12px; font-weight: bold;
  cursor: pointer; padding: 7px 10px; background: transparent; color: var(--bg); border: none;
}
.wallet-menu-item:hover { background: var(--c-black-light); }
.wallet-menu-separator { margin: 4px 8px; border-top: 1px solid var(--c-black-light); }
/* Danger (Disconnect) reads light pink on the dark menu — palette --c-pink is invisible on --c-black. */
.wallet-menu-danger { color: var(--c-pink-light); }
.wallet-menu-link { text-decoration: none; }
.wallet-menu-note {
  padding: 8px 10px;
  color: var(--bg);
  font-size: 11px;
  line-height: 1.35;
}
.wallet-menu-note.wallet-menu-error {
  color: var(--c-pink-light);
  font-weight: bold;
}
.wallet-menu-balances {
  min-width: 220px; padding: 8px 10px; color: var(--bg); font-size: 11px;
  border-bottom: 1px solid var(--c-black-light);
}
.wallet-menu-balance-chain { margin-bottom: 5px; color: var(--c-teal-light); }
.wallet-menu-balance-row { display: flex; justify-content: space-between; gap: 20px; line-height: 1.6; }
.wallet-menu-balance-row strong { white-space: nowrap; color: var(--bg); }
.wallet-pick { display: flex; align-items: center; gap: 8px; }
.wallet-pick-icon { width: 18px; height: 18px; border-radius: 4px; flex: none; }

/* Overlay + sheet */
/* The wizard is a native <dialog> too: the top layer keeps it above the page and below any modal it
   spawns, with no z-index. It stays the full-viewport scroll container it always was; ::backdrop paints
   the dim the element itself used to. */
.create-overlay {
  position: fixed; inset: 0; margin: 0; border: none; background: transparent; color: var(--text);
  width: 100%; max-width: 100%; height: 100%; max-height: 100%;
  display: flex; align-items: flex-start; justify-content: center; padding: 32px 16px; overflow-y: auto;
}
.create-overlay:not([open]) { display: none; }
.create-overlay::backdrop { background: rgba(44, 32, 24, 0.5); }
.create-sheet {
  background: var(--bg); border: 3px solid var(--c-black-light); width: 100%; max-width: 480px;
  padding: 0 0 20px; box-shadow: 0 10px 40px rgba(44, 32, 24, 0.35);
}
.create-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px; border-bottom: 1px solid var(--c-orange-light);
}
.create-title { font-size: 13px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; color: var(--c-pink); }
.create-head-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; margin-right: 14px; }
.create-io-btn {
  font-family: inherit; font-size: 12px; cursor: pointer;
  padding: 0; background: none; border: none; color: var(--muted-2); text-decoration: underline;
}
.create-io-btn:hover { color: var(--c-black); }
.create-io-btn:disabled { opacity: 0.4; cursor: not-allowed; text-decoration: none; }
.create-close {
  font-family: inherit; font-size: 16px; line-height: 1; background: none; border: none;
  color: var(--muted-2); cursor: pointer; padding: 2px 6px;
}
.create-close:hover { color: var(--c-black); }

.create-wip {
  display: inline-block; margin: 14px 22px 0; padding: 8px 10px; font-size: 12px; line-height: 1.5;
  color: var(--c-pink); background: var(--c-pink-light); font-weight: bold;
}
.create-wip strong { color: var(--c-pink); }

/* Soft notice band — same treatment as the "Work in progress" banner (palette pink on pink-light, no harsh
   red border/wash). Used for per-chain signature notices and cautionary warnNote()s. */
.create-banner {
  display: block; padding: 8px 12px; margin: 12px 0; font-size: 12px; line-height: 1.5;
  color: var(--c-pink); background: var(--c-pink-light); font-weight: bold;
}
.create-banner strong { color: var(--c-pink); }

/* Powers card (Owner/Operator tab) — one row per owner-power flag. */
.powers-row { padding: 11px 0; }
.powers-row + .powers-row { border-top: 1px solid var(--muted-4); }
.powers-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.powers-label { font-weight: bold; color: var(--text); }
.powers-state { font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; }
.powers-state.on { color: var(--c-teal); }
.powers-state.off { color: var(--muted-3); }
.powers-desc { font-size: 12px; color: var(--muted-2); line-height: 1.5; margin-top: 3px; }
.powers-act { display: inline-block; margin-top: 8px; }
.powers-warn { font-size: 12px; font-weight: bold; color: var(--c-pink); line-height: 1.5; margin-top: 6px; }
/* Protocol Admin tab. Left-aligned (no auto-centering) like the other tabs. */
.admin-tab { max-width: 820px; }
.admin-head { margin-bottom: 16px; }
.admin-blurb { font-size: 13px; color: var(--muted-2); line-height: 1.55; }
.admin-blurb + .admin-blurb { margin-top: 8px; }
.admin-audit-link { display: inline-block; margin-top: 10px; font-size: 12px; color: var(--c-teal); cursor: pointer; }
.admin-lazy { display: flex; flex-direction: column; gap: 16px; }
/* No underline beneath the card titles on the admin tab. */
.admin-tab .detail-card-title { border-bottom: none; padding-bottom: 0; }
/* Admin power action buttons (one per onlyOwner tx). */
.admin-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.admin-act { font-size: 12px; }
/* Read-only list of what an operator can do — one row per power, label + plain-English context beneath. */
.perm-list { display: flex; flex-direction: column; gap: 9px; margin-top: 10px; }
.perm-list-item { display: flex; flex-direction: column; gap: 1px; }
.perm-list-name { font-size: 13px; font-weight: bold; color: var(--text); }
.perm-list-desc { font-size: 12px; color: var(--muted-2); line-height: 1.45; }
/* Which chains actually carry a power — a cross-chain union with no breakdown reads as "everywhere". */
.perm-list-chains { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 3px; }
.perm-list-chains .chain-logo { width: 13px; height: 13px; flex: 0 0 auto; margin: 0; }
.operator-edit-across.danger { color: var(--c-orange); font-weight: bold; }
/* Grant/revoke checklist (Add operator / Edit permissions modal) — checkbox + label + context per row. */
.perm-checklist { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 4px 18px; margin-top: 6px; max-height: 320px; overflow-y: auto; padding: 8px; border: 1px solid var(--muted-4); background: var(--bg); }
.perm-check { display: flex; align-items: flex-start; gap: 8px; color: var(--text); cursor: pointer; padding: 5px 2px; }
.perm-check input { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 2px; accent-color: var(--c-teal); cursor: pointer; }
.perm-check-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.perm-check-name { font-size: 12px; font-weight: bold; color: var(--text); }
.perm-check-desc { font-size: 11px; color: var(--muted-2); line-height: 1.4; }
/* Deliberate-confirmation gate for irreversible owner actions. */
.danger-confirm { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0; font-size: 12px; font-weight: bold; color: var(--c-pink); cursor: pointer; line-height: 1.5; }
.danger-confirm input { margin-top: 2px; }
.cta-disabled { opacity: 0.45; }

/* Cash-out "how it's calculated" breakdown. */
.ops-cash-breakdown { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--muted-4); font-size: 12px; }
.ops-cash-bd-head { font-weight: bold; color: var(--muted-2); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.ops-cash-bd-row { display: flex; justify-content: space-between; gap: 12px; color: var(--muted-2); line-height: 1.7; }
.ops-cash-bd-row span:last-child { color: var(--text); font-weight: bold; }
.ops-cash-bd-formula { margin-top: 6px; color: var(--muted-3); font-size: 11px; }

/* Cash-out / Move: per-chain balance tables (in a card) + the "Cash out on [chain], reclaim in [token]" line. */
.cashout-bal-table { margin: 4px 0 14px; padding: 12px 14px; background: var(--bg); border: 1px solid var(--muted-4); }
/* Section title (bold, dark) — visually distinct from the muted uppercase column headers. */
.cashout-bal-title { font-size: 13px; font-weight: bold; color: var(--text); margin-bottom: 4px; }
/* Owners-table-style rows: a row-grid each, with separators. */
.cashout-tbl-row { display: grid; gap: 12px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--muted-4); font-size: 12px; }
.cashout-tbl-row:last-child { border-bottom: none; }
.cashout-tbl-headrow { padding: 4px 0; }
.cashout-tbl-th { font-size: 10px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted-2); }
.cashout-tbl-th.num, .cashout-tbl-num { text-align: right; }
.cashout-tbl-num { font-weight: bold; color: var(--text); }
.cashout-tbl-chain { display: inline-flex; align-items: center; gap: 5px; color: var(--text); }
.move-backing-why { font-size: 12px; color: var(--muted-2); margin-top: 4px; }
.cashout-selrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 2px 0 6px; color: var(--muted-2); }
.cashout-reclaim { align-items: center; gap: 6px; }
.operator-edit-cur { font-size: 12px; color: var(--muted-2); margin-top: 10px; }
.create-split-chiprow { display: flex; gap: 6px; }

/* Funds: one block per accounting context (e.g. ETH + USDC). */
.rf-funds-token + .rf-funds-token { margin-top: 26px; border-top: 1px solid var(--muted-4); padding-top: 22px; }
.rf-funds-token-head { font-size: 12px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-teal); margin-bottom: 8px; }
/* Per-token sub-header inside the Rulesets-tab FUNDS ACCESS section. */

/* Stepper */
.create-stepper { display: flex; align-items: center; padding: 16px 22px 6px; flex-wrap: wrap; gap: 2px; }
.create-step-conn { flex: 1; height: 2px; min-width: 10px; background: var(--c-pink-light); }
.create-step-conn.done { background: var(--c-teal); }
.create-step-dot {
  display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: none; cursor: pointer; padding: 0 2px;
}
.create-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--c-orange-light); border: 2px solid var(--c-orange-light); }
.create-step-dot.active .create-dot { background: var(--c-teal); border-color: var(--c-teal); }
.create-step-dot.done .create-dot { background: var(--c-teal); border-color: var(--c-teal); }
.create-step-label { font-size: 9px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted-2); }
.create-step-dot.active .create-step-label { color: var(--c-black); }

/* Step body */
.create-step { padding: 10px 22px 4px; }
.create-step-head { margin-bottom: 14px; }
.create-step-desc { font-size: 13px; color: var(--muted-2); margin-top: 6px; line-height: 1.55; }

/* Fields */
.create-field { margin-bottom: 16px; }
.create-label { display: block; font-size: 12px; font-weight: bold; color: var(--c-black); margin-bottom: 6px; }
.create-optional { font-weight: normal; color: var(--muted-2); }
.create-input, .create-textarea { width: 100%; }
.create-input, .create-textarea, .create-amount-input, .create-amount-cur { border-radius: 0; }
/* Native <select>s: suppress the default arrow and draw a custom caret with symmetric padding. */
select.create-input, .create-amount-cur {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237d5a4e' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 10px 6px; padding-right: 26px;
}
/* Auto-width select — sizes tight to its content instead of filling the row (duration, approval condition). */
select.create-input-auto { width: auto; max-width: 100%; }
/* Approval condition: dropdown + (when custom) the address field inline on one row. */
.create-approval-row { display: flex; align-items: flex-start; gap: 8px; margin-top: 6px; }
.create-approval-row .create-input-auto { flex: 0 0 auto; }
.create-approval-addr { flex: 1 1 auto; min-width: 0; }
.create-textarea { min-height: 90px; resize: vertical; }
.create-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.create-hint { font-size: 11px; color: var(--muted-2); margin-top: 8px; line-height: 1.5; }
/* Consecutive subtext lines stay tight; only the first one (under a control) gets the full 8px gap. */
.create-hint + .create-hint { margin-top: 4px; }
.create-hint.warn { color: var(--c-pink); }
/* Resolved-ENS address shown small under an address field. */
.create-resolve-hint { font-size: 11px; color: var(--muted-2); margin-top: 4px; word-break: break-all; line-height: 1.4; }
.create-resolve-hint.ok { color: var(--c-black); }
.create-resolve-hint.warn { color: var(--c-pink); }
/* Column wrapper: address input with its resolve-hint directly below, left-aligned to the field. */
.create-recip-box { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.create-recip-box > .field { width: 100%; }
/* "to" + recipient field as one unit (so they wrap together — see the mobile rule). */
/* baseline so the "to" sits on the field's text line (centered against the input), not floating at its top. */
.create-split-tofield { display: flex; align-items: baseline; gap: 6px; flex: 1 1 auto; min-width: 0; }
/* "per" + currency selector kept together so they wrap as a unit ("per [ETH]"). 6px gap matches the row's
   flex gap, so the space after "per" reads the same as the space after "Issues". */
.create-inline-unit { display: inline-flex; align-items: center; gap: 6px; }
.create-suffix { font-size: 12px; color: var(--muted-2); white-space: nowrap; }

/* Inline pills */
.create-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.create-pill {
  font-family: inherit; font-size: 12px; font-weight: bold; cursor: pointer; padding: 5px 14px;
  background: transparent; border: 2px solid var(--c-orange-light); color: var(--muted-2);
}
.create-pill.selected { border-color: var(--c-teal); color: var(--c-teal); }

/* Toggles */
.create-toggle-row { margin: 12px 0; }
.create-toggle-disabled { opacity: 0.5; }
.create-toggle-disabled .create-toggle { cursor: default; }
/* A toggle as a subcard's first/last child already has the card's padding — drop the doubled margin so an
   only-child toggle (e.g. "Unlimited") is vertically symmetric. */
.create-subcard > .create-toggle-row:first-child { margin-top: 0; }
.create-subcard > .create-toggle-row:last-child { margin-bottom: 0; }

/* Pink warning zone — groups owner-power toggles that are major trust assumptions for supporters. */
.create-ai-chain-warn { color: var(--c-pink); }
.create-warn-zone { background: rgba(196, 53, 80, 0.09); border: 1px solid var(--c-pink); padding: 12px 16px 14px; margin: 14px 0; }
.create-warn-zone-head { font-size: 12px; font-weight: bold; color: var(--c-pink); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 4px; }
.create-warn-zone > .create-toggle-row:last-child { margin-bottom: 0; }
.create-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.create-toggle-label { font-size: 13px; font-weight: normal; color: var(--c-black); }

/* Collapsibles */
.create-collapse { margin-top: 14px; }
.create-collapse-head {
  font-family: inherit; font-size: 11px; font-weight: normal;
  color: var(--muted-2);
  background: none; border: none; cursor: pointer; padding: 4px 0;
  display: inline-flex; align-items: center; gap: 6px;
}
.create-collapse-head:hover { color: var(--c-teal); }
.create-collapse-label { text-decoration: underline; text-underline-offset: 2px; }
.create-add-link { display: inline-block; margin-top: 14px; }
.create-after-row { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--c-black); }
.create-after-select {
  font-family: inherit; font-size: 13px; cursor: pointer; padding: 6px 26px 6px 8px;
  border: 1px solid var(--c-black-light); background: var(--card-bg); color: var(--c-black);
  -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237d5a4e' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 10px 6px;
}
.create-collapse-caret { color: inherit; }

/* Image picker */

/* Tags */
.create-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.create-tag {
  font-family: inherit; font-size: 12px; cursor: pointer; padding: 4px 12px; border-radius: 0;
  background: transparent; border: 1px solid var(--c-orange-light); color: var(--muted-2);
}
.create-tag.selected { border-color: var(--c-teal); color: var(--c-teal); background: var(--c-teal-light); }

/* Subcards (payouts / token / reserved) */
/* Nested card: lighter bg band that breaks 12px past the parent stage card on each side (−28px margin minus
   the stage card's 2px border and 14px body padding). The left/right borders run full height; the TOP and
   BOTTOM borders show ONLY on the small overhang corner tabs — drawn as four 14px×2px background segments
   pinned to the four corners (origin: border-box). 14px = the 12px overhang + the stage card's 2px border,
   so each cap runs into the parent border and reads as a connected corner; the central top/bottom stay open
   so the card blends into the surrounding sections. Match the parent's 2px border weight. */
.create-subcard {
  background-color: var(--card-bg);
  background-image:
    linear-gradient(var(--c-orange-light), var(--c-orange-light)),
    linear-gradient(var(--c-orange-light), var(--c-orange-light)),
    linear-gradient(var(--c-orange-light), var(--c-orange-light)),
    linear-gradient(var(--c-orange-light), var(--c-orange-light));
  background-repeat: no-repeat;
  background-size: 14px 2px;
  background-position: top left, top right, bottom left, bottom right;
  background-origin: border-box;
  border: none;
  border-left: 2px solid var(--c-orange-light); border-right: 2px solid var(--c-orange-light);
  padding: 14px 16px; margin: 14px -28px;
}
/* A checkbox that opens a fat (subcard) section shares the subcard's darker fill as ONE connected block. The
   fill is painted by a ::before pseudo-element that runs full-bleed to the subcard's edges (side borders +
   top corner accents) and joins the subcard below with no gap — so the colour reaches the borders and
   connects. Because the fill is a pseudo-element BEHIND the content, the checkbox + text don't move at all
   between unchecked and checked: the row's own box (margin/padding) is unchanged. */
.create-toggle-row:has(+ .create-subcard) { position: relative; z-index: 0; margin-bottom: 0; }
.create-toggle-row:has(+ .create-subcard)::before {
  content: ''; position: absolute; z-index: -1;
  top: -10px; bottom: 0; left: -28px; right: -28px; /* extend up into the gap for breathing room; down to the subcard */
  background-color: var(--card-bg);
  border-left: 2px solid var(--c-orange-light); border-right: 2px solid var(--c-orange-light);
  background-image:
    linear-gradient(var(--c-orange-light), var(--c-orange-light)),
    linear-gradient(var(--c-orange-light), var(--c-orange-light));
  background-repeat: no-repeat; background-size: 14px 2px;
  background-position: top left, top right; background-origin: border-box;
}
.create-toggle-row:has(+ .create-subcard) + .create-subcard {
  margin-top: 0;
  background-image:
    linear-gradient(var(--c-orange-light), var(--c-orange-light)),
    linear-gradient(var(--c-orange-light), var(--c-orange-light));
  background-position: bottom left, bottom right;
}

/* NFT rows */

/* Deadline options */

/* Deploy step */
.create-chain-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.create-chain-pill {
  font-family: inherit; font-size: 12px; font-weight: bold; cursor: pointer; padding: 8px 16px;
  background: transparent; border: 2px solid var(--c-orange-light); color: var(--muted-2);
}
.create-chain-pill.selected { border-color: var(--c-teal); color: var(--c-teal); }
.create-review { background: var(--card-bg); border: 1px solid var(--c-orange-light); padding: 4px 14px; margin: 14px 0; }
.create-review-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--c-orange-light); }
.create-review-row:first-child { border-top: none; }
.create-review-k { font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted-2); }
.create-review-v { font-size: 13px; color: var(--c-black); text-align: right; white-space: pre-line; }
/* Multi-line bulleted value (e.g. a ruleset): stack the label above a left-aligned bullet list. */
.create-review-row.col { flex-direction: column; align-items: flex-start; gap: 6px; }
.create-review-bullets { font-size: 13px; color: var(--c-black); text-align: left; align-self: stretch; }
.create-review-bullet { padding: 2px 0; }
.create-tos { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--muted-2); margin: 12px 0; cursor: pointer; }
.create-tos > input { margin-top: 2px; } /* level the checkbox with the first line of the (wrapping) text */
.create-audit-link { color: var(--muted-2); text-decoration: none; cursor: pointer; white-space: nowrap; }
.create-audit-link:hover { color: var(--c-teal); }

/* Single live status line during deploy (replaces the growing log). */
.create-status { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0; font-size: 13px; color: var(--muted-2); min-width: 0; }
.create-status > span:last-child { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.create-spinner { flex-shrink: 0; }
.create-status.err { color: var(--c-pink); }
.create-quote-choice { margin: 14px 0; border: 1px solid var(--c-green-light); padding: 12px; }
.create-deploy-progress { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 12px; }
.create-deploy-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.create-deploy-ic { flex: 0 0 auto; text-align: center; font-weight: bold; font-size: 11px; }
.create-deploy-name { font-weight: bold; color: var(--text); flex: 1; }
.create-deploy-state { color: var(--muted-2); }
.create-deploy-ok { color: var(--c-teal); }
.create-deploy-err { color: var(--c-pink); }
.create-spinner {
  width: 13px; height: 13px; flex: 0 0 auto; border-radius: 50%;
  border: 2px solid var(--c-orange-light); border-top-color: var(--c-orange);
  animation: create-spin 0.7s linear infinite;
}
@keyframes create-spin { to { transform: rotate(360deg); } }

/* Success panel shown once deployed. */
.create-success { text-align: center; padding: 24px 8px 8px; }
.create-success-title { font-size: 18px; font-weight: bold; color: var(--c-black); margin-bottom: 8px; }
.create-success-sub { font-size: 13px; color: var(--muted-2); margin-top: 4px; }
.create-success .create-btn { width: 100%; }

/* Footer */
.create-foot { display: flex; justify-content: space-between; gap: 12px; padding: 16px 22px 4px; }
.create-btn {
  font-family: inherit; font-size: 13px; font-weight: bold; cursor: pointer; padding: 9px 20px;
  border: 2px solid var(--c-teal); background: transparent; color: var(--c-black);
}
.create-btn:hover { color: var(--c-teal); }
.create-btn.primary { background: var(--c-green-light); border-color: var(--write); color: var(--c-black); }
.create-btn.primary:hover { color: var(--c-black); opacity: 0.9; }
.create-btn.ghost { border-color: var(--c-orange-light); }
.create-btn.small { padding: 5px 12px; font-size: 12px; }
.create-btn.big { width: 100%; padding: 12px; margin-top: 6px; }
.create-btn:disabled { opacity: 0.5; cursor: default; }

/* Modal footer (shared by the confirm modal + discover modals) */
.create-modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }

@media (max-width: 560px) {
  .create-grid2 { grid-template-columns: 1fr; }
  /* Step labels all sit below the dots (no stagger — 5 steps fit in one row). Absolute-positioned so the
     dots stay vertically centered on the connector line. */
  .create-stepper { flex-wrap: nowrap; padding: 10px 10px 24px; }
  .create-step-dot { position: relative; }
  .create-step-label {
    position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%);
    width: max-content; max-width: 62px; text-align: center; font-size: 8px; line-height: 1.15;
  }
  /* End labels would overflow the sheet edge if centered on their near-edge dots — pin the first one
     left-aligned and the last one right-aligned so they stay inside. */
  .create-step-dot:first-of-type .create-step-label { left: 0; transform: none; text-align: left; }
  .create-step-dot:last-of-type .create-step-label { left: auto; right: 0; transform: none; text-align: right; }
}

/* Create wizard — full tx payload preview */
.create-payload {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px; line-height: 1.5; color: var(--c-black);
  background: var(--depth-bg-1); border: 1px solid var(--c-orange-light);
  padding: 12px 14px; margin: 8px 0; max-height: 320px; overflow: auto;
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* Safe proposal modal (per-chain decoded call + nonce picker) */
.safe-propose-list { display: flex; flex-direction: column; gap: 12px; margin: 10px 0; }
.safe-propose-chain { border: 1px solid var(--c-orange-light); padding: 10px 12px; }
.safe-propose-chain.safe-propose-skip { opacity: 0.6; }
.safe-propose-head { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted-2); margin-bottom: 6px; }
.safe-propose-head .chain-logo { width: 15px; height: 15px; }
.safe-propose-nonce { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--muted-2); flex-wrap: wrap; }
.safe-propose-noncelbl { font-weight: bold; color: var(--text); }
.safe-nonce-input { width: 80px; font-family: inherit; font-size: 13px; padding: 4px 6px; border: 2px solid var(--write); background: var(--card-bg); color: var(--text); }
.safe-nonce-input:focus { outline: none; }
.safe-propose-hint { color: var(--muted-2); }

/* Per-chain owner divergence */
.detail-head-ownerwarn { color: var(--c-pink); font-weight: bold; }
.detail-owner-warn { color: var(--c-pink); font-weight: bold; margin-bottom: 4px; }
.detail-owner-chainrow { display: flex; align-items: center; gap: 6px; margin: 2px 0; }
.detail-owner-chainrow .chain-logo { width: 14px; height: 14px; }

/* Confirm modal — legible decoded calldata */
.tx-decoded-list { margin: 8px 0; display: flex; flex-direction: column; gap: 10px; }
.tx-decoded-action { font-size: 13px; font-weight: bold; color: var(--c-black); }
.tx-decoded { border: 1px solid var(--c-orange-light); background: var(--card-bg); padding: 10px 12px; }
.tx-decoded-chain { font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted-2); margin-bottom: 4px; }
.tx-decoded-target { font-size: 11px; color: var(--muted-2); overflow-wrap: anywhere; margin-bottom: 6px; }
.tx-decoded-fn { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 13px; font-weight: bold; color: var(--c-black); }
.tx-decoded-arg { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; color: var(--c-black); padding-left: 14px; overflow-wrap: anywhere; }
.tx-decoded-argname { color: var(--muted-2); }
.tx-decoded-friendly .tx-decoded-arg {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: start;
  column-gap: 6px;
  padding-left: 0;
}
.tx-decoded-friendly .tx-decoded-argval { min-width: 0; overflow-wrap: anywhere; }
.tx-decoded-value { font-size: 12px; color: var(--muted-2); margin-top: 4px; }
.tx-decoded-unknown { font-size: 12px; color: var(--c-pink); }
.tx-rawdata { margin: 4px 0 8px; }
.tx-rawdata > summary { font-size: 12px; color: var(--muted-2); cursor: pointer; }
.pay-confirm-sequence {
  margin-bottom: 12px; padding: 10px 12px; border: 1px solid var(--c-orange-light);
  background: var(--depth-bg-1); font-size: 12px;
}
.pay-confirm-sequence-intro { color: var(--muted-2); line-height: 1.45; }
.pay-confirm-sequence-list { list-style: none; margin: 9px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pay-confirm-sequence-step { display: flex; align-items: center; gap: 8px; }
.pay-confirm-sequence-step > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.pay-confirm-sequence-step.active { color: var(--c-black); font-weight: bold; }
.pay-confirm-sequence-step.complete { color: var(--muted-2); }
.pay-confirm-sequence-number {
  display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center;
  border: 1px solid var(--c-teal); border-radius: 50%; color: var(--c-teal); font-size: 10px; font-weight: bold;
}
.pay-confirm-sequence-step.active .pay-confirm-sequence-number,
.pay-confirm-sequence-step.complete .pay-confirm-sequence-number {
  background: var(--c-teal); color: var(--card-bg);
}

/* Create wizard — Stages (revnet-style stacked ruleset cards) */
.create-stage-card { border: 2px solid var(--c-orange-light); margin-bottom: 12px; background: var(--card-bg); }
.create-stage-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; }
.create-stage-headtext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.create-stage-title { font-size: 14px; font-weight: bold; color: var(--c-black); }
.create-stage-sum { font-size: 12px; color: var(--muted-2); line-height: 1.6; white-space: pre-line; }
/* Hanging indent: the "• " sits in the negative text-indent, so a wrapped line aligns under the text. */
.create-sum-li { padding-left: 1.2em; text-indent: -1.2em; }

/* Cash-out tax presets + bonding-curve preview */
.create-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.create-chip {
  font-family: inherit; font-size: 12px; color: var(--text);
  background: var(--card-bg); border: 1px solid var(--c-orange-light); border-radius: 0;
  padding: 4px 9px; cursor: pointer;
}
.create-chip.active { background: var(--card-bg); border-color: var(--c-teal); color: var(--c-teal); }
.create-chip-stack { display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.2; min-width: 56px; }
.create-chip-sub { font-size: 10px; color: var(--muted-2); }
.create-chip.active .create-chip-sub { color: var(--c-teal); }
.cashout-curve-wrap { margin-top: 10px; max-width: 360px; position: relative; }
.cashout-dot { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--c-orange); transform: translate(-50%, -50%); pointer-events: none; }
.cashout-tip {
  position: absolute; transform: translateX(-50%); pointer-events: none; white-space: nowrap;
  background: var(--card-bg); border: 1px solid var(--c-orange-light); padding: 2px 6px;
  font-size: 10px; color: var(--text); z-index: 2;
}
.create-stage-caret { color: var(--muted-2); font-size: 12px; }
.create-stage-remove { background: none; border: none; color: var(--muted-2); cursor: pointer; font-size: 12px; padding: 2px 4px; }
.create-stage-remove:hover { color: var(--c-pink); }
.create-stage-body { padding: 4px 14px 14px; border-top: 1px solid var(--c-orange-light); background: var(--bg); }


/* Revnet stage editor */
.create-stage-editor { padding: 4px 14px 14px; border-top: 1px solid var(--c-orange-light); background: var(--bg); }
.create-rev-sec { margin-top: 16px; }
.create-rev-sec:first-child { margin-top: 6px; }
.create-rev-h { font-size: 14px; font-weight: bold; color: var(--c-black); margin-bottom: 4px; }
/* Vertical rhythm between the stacked inline rows in a revnet stage (issuance, cut, splits, auto-issuance). */
.create-rev-sec .create-inline-row { margin: 11px 0; }
.create-rev-sec .create-split-row { margin: 14px 0; }
.create-rev-sec .create-hint { margin: 8px 0; }
.create-add-btn {
  font-family: inherit; font-size: 11px; color: var(--muted-2); text-decoration: underline; text-underline-offset: 2px;
  background: none; border: none; padding: 6px 0; cursor: pointer; display: inline-block; margin: 6px 0;
}
.create-add-btn:hover { color: var(--c-teal); }
/* Tx-confirm note styled like the "Work in progress" banner. */
.tx-confirm-note {
  background: var(--c-pink-light); color: var(--c-pink); font-weight: bold;
  font-size: 12px; line-height: 1.5; padding: 8px 10px; margin: 10px 0;
}
.tx-confirm-desc {
  font-size: 12px; line-height: 1.55; color: var(--muted); margin: 0 0 10px;
}
.tx-copy-row { display: flex; justify-content: flex-end; margin-top: 12px; }
.tx-copy-btn { width: auto; }
.tx-copy-btn:disabled { cursor: not-allowed; opacity: 0.5; }
.tx-audit-prompt { margin: 6px 0 10px; }
.tx-audit-link { font-size: 11px; color: var(--muted-2); text-decoration: none; cursor: pointer; }
.tx-audit-link:hover { color: var(--c-teal); }

/* Create wizard — amount field with trailing currency selector (mirrors the Pay value field) */
.create-amount-row { display: flex; align-items: stretch; }
.create-amount-input { flex: 1; border-right: none; }
.create-amount-cur {
  font-family: inherit; font-size: 13px; font-weight: bold; cursor: pointer;
  /* background-color (not the `background` shorthand) so it doesn't wipe the caret background-image above. */
  border: 1px solid var(--c-black-light); border-left: none; background-color: var(--card-bg);
  color: var(--c-black); padding: 0 8px;
}
/* Inline "Issues [x] tokens per [unit]" row */
.create-inline-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--c-black); }
.create-inline-num { width: 90px; flex: 0 0 auto; border-radius: 0; }
/* Leave enough content width for decimal payout amounts after the field's horizontal padding. */
.create-payout-amt { width: 90px; }
.create-symbol-field { width: 25%; min-width: 96px; } /* token symbol is short — 1/4 width (floored for readability) */
.create-inline-row .create-amount-cur { border-left: 1px solid var(--c-black-light); padding: 6px 26px 6px 8px; font-size: 12px; }
/* Payout amount row: match the currency dropdown's height to the amount field; space the two lines. */
.create-split-row .create-amount-cur { border-left: 1px solid var(--c-black-light); padding: 6px 26px 6px 8px; font-size: 12px; }
/* Inline reserved-split rows: "Split [%] to [recipient]" */
/* Gap BETWEEN splits — larger than the ~4px line-break gap within a single split, so each split reads
   as its own block. */
.create-split-wrap { margin-top: 18px; }
.create-split-wrap:first-child { margin-top: 8px; }
/* Per-split lock — left-aligned with the row fields (lead width = 42px + 6px row gap), below the recipient. */
.create-split-lock { margin-top: 10px; margin-left: 48px; }
.create-split-lockcheck { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted-2); cursor: pointer; }
.create-split-lockcheck input { margin: 0; }
.create-split-lockdate { margin-top: 6px; max-width: 180px; display: block; }
.create-split-lock .create-hint { margin-top: 6px; }
/* Baseline so every part of the row — the "Split"/"… and" lead, the % box, "to", the recipient field and
   the ✕ — sits on the field's text line (reads centered against the inputs). The fund-market chip / ENS
   hint hang below in the recipient column without dragging the baseline down. */
.create-split-row { display: flex; align-items: baseline; gap: 6px; }
.create-split-lead, .create-split-to, .create-split-sign { font-size: 12px; color: var(--muted-2); flex: 0 0 auto; }
/* Fixed lead width so every row's fields line up regardless of "Payout" vs "… and". */
.create-split-lead { display: inline-block; width: 42px; }
.create-split-pct { width: 64px; flex: 0 0 auto; border-radius: 0; }
/* No spinner arrows on any create-flow number input (percent, ID, amount, per-chain id). */
.create-sheet input[type="number"]::-webkit-inner-spin-button, .create-sheet input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.create-sheet input[type="number"] { -moz-appearance: textfield; }
.create-inline-check { flex: 0 0 auto; width: 15px; height: 15px; margin: 0; cursor: pointer; accent-color: var(--c-teal); }
.create-inline-prompt { font-style: italic; color: var(--muted-2); }
/* Amount box with an inline suffix label (e.g. "[ 10 ] $TOKEN"), used in auto-issuance rows. */
.create-amt-suffix { display: inline-flex; align-items: center; border: 1px solid var(--c-orange-light); background: var(--card-bg); flex: 0 0 auto; }
.create-amt-suffix input { border: none; background: transparent; width: 84px; padding: 6px 4px 6px 8px; font-family: inherit; font-size: 13px; }
.create-amt-suffix-label { color: var(--muted-2); font-size: 12px; padding: 0 8px 0 2px; white-space: nowrap; }
.create-split-recip { flex: 1 1 auto; min-width: 0; border-radius: 0; }
.create-split-rm { background: none; border: none; cursor: pointer; color: var(--muted-2); font-size: 13px; flex: 0 0 auto; }
.create-split-rm:hover { color: var(--c-pink); }
.create-split-benef { margin-top: 6px; padding-left: 60px; }
.create-split-benef .field { border-radius: 0; }
/* Recipient picker: type dropdown on top, dependent fields beneath — all left-aligned with the dropdown. */
.create-split-picker { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; gap: 6px; }
.create-split-pickerhead { display: flex; align-items: flex-start; gap: 6px; }
.create-split-typesel { width: auto; min-width: 0; flex: 0 0 auto; }
.create-split-idnum { flex: 1 1 auto; min-width: 0; border-radius: 0; }
/* ID field + its per-chain control stacked, so the per-chain chain icons line up with the ID field's left. */
.create-split-idcol { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; gap: 6px; }
/* When the per-chain rows replace the inline ID field, drop the wrap's top margin so the first row is
   exactly level with the dropdown/% row. */
.create-split-idcol > .create-pcaddr { margin-top: 0; }
.create-split-subsel { flex: 1 1 auto; min-width: 0; }
/* Native selection behavior with a wrapping visual label: the transparent select keeps keyboard/mobile
   pickers intact, while the label may grow vertically instead of clipping the full route description. */
.create-wrap-select { position: relative; display: flex; align-items: center; width: 100%; min-height: 34px; height: auto; padding: 6px 30px 6px 8px; line-height: 1.35; cursor: pointer; }
.create-wrap-select-label { display: block; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.create-wrap-select-caret { position: absolute; right: 9px; top: 50%; width: 8px; height: 8px; border-right: 1.5px solid var(--muted-2); border-bottom: 1.5px solid var(--muted-2); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.create-wrap-select-native { position: absolute; inset: -1px; width: auto; height: auto; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.create-wrap-select:focus-within { outline: 2px solid var(--c-teal); outline-offset: -1px; }
.create-split-sublabel { font-size: 12px; color: var(--muted-2); margin-bottom: -2px; }
/* Inline labels in a picker head (e.g. "with project") stay on one line so the field fills the rest. */
/* Offset the bare-text label by the field's padding+border so its text lines up with the field's text. */
.create-split-pickerhead .create-split-sublabel { flex: 0 0 auto; white-space: nowrap; margin-bottom: 0; padding-top: 7px; }
.create-split-sub > .create-recip-box, .create-split-sub > .field, .create-split-sub > select { width: 100%; }
/* "same on all chains" per-address control + its expanded per-chain inputs. */
.create-pcaddr { margin-top: 2px; }
.create-pcaddr-collapsed { text-align: right; }
.create-pcaddr-toggle { font-size: 11px; color: var(--muted-2); text-decoration: underline; cursor: pointer; }
.create-pcaddr-toggle:hover { color: var(--c-teal); }
/* "Use same on all chains" sits below the per-chain rows, right-aligned like the "Set per chain" link. */
.create-pcaddr-foot { text-align: right; margin-top: 6px; }
.create-pcaddr-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.create-pcaddr-row:first-child { margin-top: 0; } /* top option lines up with the dropdown/% row it replaces */
.create-pcaddr-chain { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-start; }
.create-pcaddr-row .create-recip-box { flex: 1 1 auto; min-width: 0; }
.create-split-chip { font-family: inherit; font-size: 11px; font-weight: bold; padding: 2px 9px; margin-top: 6px; align-self: flex-start;
  border: 1px solid var(--c-black-light); background: transparent; color: var(--muted-2); border-radius: 2px; cursor: pointer; }
.create-split-chip:hover { color: var(--text); border-color: var(--write); }
.create-split-chip.active { color: var(--c-teal); border-color: var(--c-teal); }
.create-split-lphint { font-size: 11px; color: var(--muted-2); margin-top: 4px; }

.create-inline-toggle { color: var(--text); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.create-inline-toggle:hover { color: var(--c-teal); }

/* ── Table row dividers: subtle (site bg colour), inset to the row's content padding. No divider
   under the header (it would contrast the header fill). Table outline stays orange-light.
   Appended last so these override each table's own border-bottom. ── */
.owners-row, .detail-ops-row, .splits-row, .autoissue-row, .bridge-row { position: relative; border-bottom: none; }
.owners-row:not(.owners-head):not(:last-child)::after,
.detail-ops-row:not(.detail-ops-head):not(:last-child)::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 0; height: 1px; background: var(--bg); }
.splits-row:not(.splits-head):not(:last-child)::after,
.autoissue-row:not(.autoissue-head):not(:last-child)::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: 0; height: 1px; background: var(--bg); }
.bridge-row:not(.bridge-head):not(:last-child)::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 0; height: 1px; background: var(--bg); }
/* Terms table (real <table>): subtle dividers; no line under the header. */
.terms-table td { border-bottom-color: var(--bg); }
.terms-table th { border-bottom-color: transparent; }

/* ════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE LAYER
   App-wide phone/tablet rules in one auditable place. Component-local @media
   blocks still live next to their components above; this section holds the
   systemic rules (header, tab nav, page gutters, global data-dense grids and
   tables). Primary phone breakpoint: 600px; tablet tweaks at 900px.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Header — connect button drops into flow (centered) instead of being
     absolutely positioned top-right where it overlaps the wrapped title. */
  #header { padding: 16px 12px 10px; }
  #header > #connect-btn { position: static; display: block; margin: 0 auto 10px; width: fit-content; }
  #header h1 { font-size: 18px; letter-spacing: 0.5px; }
  .subtitle { font-size: 13px; }

  /* Split-recipient rows: the "0x… or project ID" field collapses to a couple chars when the whole row
     (Split [%] to [field] ✕) is forced onto one phone line. Wrap it to its own full-width line; keep the
     label/percent + remove-✕ on the first line (✕ pushed right). */
  .create-split-row { flex-wrap: wrap; }
  .create-split-row > .create-split-tofield { flex: 1 1 100%; order: 10; margin-top: 4px; }
  .create-split-row > .create-split-rm { order: 9; margin-left: auto; }

  /* Tab nav — single row that scrolls horizontally (preferred over wrapping to
     multiple lines). The row scrolls within itself; page width is unaffected. */
  #tabs {
    flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto;
    margin: 8px 0 0; padding: 0 12px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  #tabs::-webkit-scrollbar { display: none; }
  .tab { padding: 8px 12px; flex: 0 0 auto; white-space: nowrap; }

  /* Detail subtab row — space it from the stacked Pay card above, and scroll horizontally
     the same way as the top nav (Activity adds a 6th tab on phones). */
  .project-detail-tabbar { margin-top: 18px; }
  .project-detail-tabs { overflow-x: auto; scrollbar-width: none; }
  .project-detail-tabs::-webkit-scrollbar { display: none; }
  .detail-tab-btn { flex: 0 0 auto; white-space: nowrap; }

  /* Owners sub-subtab row (Accounts / Market / Settlement / …) — scroll instead of wrapping to 2 rows. */
  .owners-subtabs {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
    overscroll-behavior-x: contain; touch-action: pan-x;
  }
  .owners-subtabs::-webkit-scrollbar { display: none; }
  .owners-subtab { flex: 0 0 auto; white-space: nowrap; }

  /* Settlement / composition / "{chain} knows" tables: keep the fixed-fr columns above readable width
     and scroll horizontally instead of squishing (which caused awkward cell wraps + row 0-misalignment). */
  .detail-ops-table { overflow-x: auto; }
  .detail-ops-row { min-width: 440px; }
  .gossip-row { min-width: 520px; }

  /* Page gutters — reclaim the 40px side padding phones can't spare. */
  .tab-content { padding: 14px 12px; }

  /* Stacked detail columns: the desktop two-column gaps (left col padded on its RIGHT, right col padded
     on its LEFT) become lopsided once stacked — offsetting cards toward one screen edge. Drop the side
     paddings so cards sit in the symmetric tab-content gutters. */
  .detail-spacious .project-detail-left,
  .detail-spacious .project-detail-right { padding-left: 0; padding-right: 0; }

  /* Shop tiers — 3-across squeezes the price+stepper row below usable width on
     phones; drop to 2 so each card keeps a tappable quantity stepper. */
  .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  /* Shop section — drop the card-in-card chrome (the tab is already named SHOP and padded):
     no border/background/padding, and hide the redundant "Shop" title, so categories + items
     sit straight on the page background. */
  .shop-card { border: none; background: none; padding: 0; }
  .shop-card > .detail-card-title { display: none; }

  /* Shop tier card — stack name/price/supply, then the -/+ stepper UNDER everything (right-aligned), so
     the narrow 2-across card stops breaking "0.1 ETH" / "1000 left" awkwardly across the stepper. */
  .shop-tier-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .shop-tier-step { justify-content: flex-end; }

  /* Category chips — scroll horizontally instead of wrapping to many rows on phones. */
  .shop-cat-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .shop-cat-chips::-webkit-scrollbar { display: none; }
  .shop-cat-chip { flex: 0 0 auto; }

  /* Checkout bar — fixed to the bottom while shopping; jumps up to the Pay card (above the tabs). */
  .shop-checkout-bar.shown {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    margin: 0; border: none; border-top: 2px solid var(--c-black);
    background: var(--c-green); color: var(--card-bg);
    font-family: inherit; font-size: 15px; font-weight: bold; letter-spacing: 0.5px;
    padding: 15px; cursor: pointer; text-align: center;
  }
  .shop-checkout-bar.shown:active { background: var(--c-green-light); color: var(--c-black); }
}

/* Split lock row (create-flow parity): checkbox + date under the split row. */
.splits-edit-lockrow { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.splits-edit-lockcheck { display: flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
.splits-edit-lockdate { width: auto; font-size: 12px; padding: 4px 8px; }

/* Project-ID field inline beside the split row's type dropdown (create-flow parity). */
.splits-edit-idcol { display: flex; flex-direction: column; flex: 0 0 auto; }
.splits-edit-idcol .create-split-idnum { width: 90px; }

/* Shop → Customers subtab rows. */
.shop-cust-total { font-size: 12px; color: var(--muted-2); margin-bottom: 8px; }
.shop-cust-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; }
.shop-cust-who { flex: 0 0 auto; }
.shop-cust-what { flex: 1 1 auto; text-align: right; font-size: 12px; color: var(--muted-2); word-break: break-word; }

/* A shop item thumbnail (Customers subtab + redeem list). Mirrors .paybox-nft-thumb. */
.shop-cust-thumb { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 4px; overflow: hidden; background: var(--card-bg); display: inline-flex; align-items: center; justify-content: center; }
.shop-cust-thumb img, .shop-cust-thumb svg, .shop-cust-thumb video { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.shop-cust-thumb .shop-tier-ph { font-size: 9px; }
.shop-cust-thumb .tier-media-badge-ext { font-size: 8px; padding: 2px 4px; }
/* "You" owned items + Recent purchases feed: thumb · label · trailing value. */
.shop-cust-item-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.shop-cust-item-name { flex: 1 1 auto; font-size: 13px; word-break: break-word; }
/* Subtle separator between the customer-count and items-sold stats — matches the header meta pipes. */
.shop-sep { color: var(--c-pink-light); margin: 0 3px; }
/* "All" customers: a strip of the thumbnails each customer bought, with a ×N badge when >1. */
.shop-cust-thumbs { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.shop-cust-thumbs .shop-cust-thumb { width: 46px; height: 46px; }
.shop-cust-thumb-cell { position: relative; display: inline-flex; }
.shop-cust-thumb-badge { position: absolute; right: -4px; bottom: -4px; font-size: 9px; font-weight: bold; line-height: 1; padding: 2px 3px; border-radius: 3px; background: var(--c-black); color: var(--c-orange-light); }
/* Clickable NFT/address in the All list → holders / owned-items modal. */
.shop-cust-link { cursor: pointer; }
.shop-cust-link:hover { opacity: 0.7; }

/* Holders / owned-items modals. */
.shop-holders-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.shop-holders-title { font-size: 13px; font-weight: bold; }
.shop-holders-table .detail-ops-row { grid-template-columns: 1fr auto; }

/* Recent purchases: a standard bordered table. Wider first column for long item names. */
.shop-recent-wrap { margin-top: 14px; }
.shop-recent-row { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr) minmax(0, 0.8fr); }
.shop-recent-item { display: flex; align-items: center; gap: 8px; }

/* Redeem-items modal. */
.shop-redeem-link { display: inline-block; margin-top: 12px; }
.redeem-items { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 8px; max-height: 300px; overflow-y: auto; }
/* When there's more below the fold, fade the bottom edge so a mid-row cutoff reads as "scroll for more"
   (toggled by JS so short/fully-scrolled lists keep a crisp last row). */
.redeem-items.has-more { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent); }
.redeem-selall { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: bold; padding-bottom: 4px; }
.redeem-tier-head { display: flex; align-items: center; gap: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted-2); margin-top: 8px; }
.redeem-tier-head .shop-cust-thumb { width: 22px; height: 22px; }
.redeem-item-row { display: flex; align-items: center; gap: 6px; font-size: 12px; padding-left: 8px; cursor: pointer; }
.redeem-item-id { color: var(--muted-2); }

/* ── Account view (#account/<address-or-ens>) ─────────────────────────────── */
.account-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.account-avatar { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 44px; }
.account-head > .detail-address .detail-address-label { font-size: 16px; font-weight: bold; }
.account-you { font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; color: var(--c-teal); }
.account-viewas { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.account-viewas .field { width: min(240px, 60vw); }
.account-viewas-go {
  font-family: inherit; font-size: 12px; font-weight: bold; cursor: pointer;
  padding: 5px 12px; background: transparent; color: var(--c-black); border: 2px solid var(--c-black);
}
#tab-account .detail-card + .detail-card { margin-top: 18px; }
.account-activity-status { color: var(--muted-2); }
.account-load-more { display: block; margin-top: 10px; font-family: inherit; font-size: 12px; font-weight: bold; cursor: pointer; padding: 5px 12px; background: transparent; color: var(--c-black); border: 2px solid var(--c-black); }
.account-activity-proj { display: inline-block; font-size: 10px; color: var(--muted-3); text-decoration: none; margin-top: 2px; }
.account-activity-proj:hover { color: var(--c-teal); text-decoration: underline; }
.account-pending { margin-bottom: 12px; }
.account-pending-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted-2); margin-bottom: 4px; }
.account-pending-check { margin-top: 8px; }
.account-proj-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--depth-bg-1); }
.account-proj-row:last-child { border-bottom: none; }
.account-proj-link { font-weight: bold; color: var(--text); }
.account-proj-chain { font-size: 11px; color: var(--muted-3); }
.account-safe-badge { font-size: 11px; color: var(--muted-2); }
.account-granted-by { font-size: 12px; color: var(--muted-2); margin-top: 3px; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
/* Holdings tab: balance pushed to the row's right edge; per-tier item chips inline. */
.account-holding-balance { margin-left: auto; font-weight: bold; }
.account-holding-split { font-size: 12px; color: var(--muted-2); }
.account-holdings-cap { margin-top: 8px; font-size: 12px; color: var(--muted-2); }
.account-holding-item { font-size: 12px; color: var(--muted-2); }

/* --- View as (impersonation) mode --- */
/* Inline address/ENS prompt inside the dark dropdown menus. */
.viewas-prompt { padding: 7px 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.viewas-input {
  flex: 1 1 150px; min-width: 0; font-family: inherit; font-size: 12px; padding: 4px 6px;
  background: var(--bg); color: var(--text); border: 1px solid var(--c-black-light);
}
.viewas-go {
  font-family: inherit; font-size: 12px; font-weight: bold; cursor: pointer;
  padding: 4px 10px; background: var(--c-orange); color: var(--bg); border: none;
}
.viewas-err { flex-basis: 100%; font-size: 11px; color: var(--c-orange-light); }
.viewas-err:empty { display: none; }
/* Refused-transaction notice in the confirm modal. */
.tx-confirm-note.viewas-blocked { color: var(--c-orange); font-weight: bold; }
/* Account page: activate view-as for the viewed account. */
.account-siteas { border-color: var(--c-orange); color: var(--c-orange); }