/* Arc colors derive from arc.io's official palette: protocol navy,
 * validator blue, cipher violet, quantum plum, blockstream gold and token sand.
 * Paint only: product geometry is shared with the Robinhood theme.
 */
html[data-chain-theme='arc'] {
  color-scheme: dark;
  --ff-bg: #10182b;
  --ff-panel: #19253f;
  --ff-surface: #263553;
  --ff-text: #f1f4f8;
  --ff-muted: #b1bfd1;
  --ff-accent: #ffcc6f;
  --ff-accent-deep: #e9a13f;
  --ff-on-accent: #1b3158;
  --ff-header: #10182bee;
  --ff-inset: #17223a;
  --ff-raised: #25314d;
  --ff-control: #7d91ac;
  --ff-subtle: #acc6e9;
  --ff-accent-hover: #ffdb98;
  --ff-hover-border: #acc6e9;
  --ff-secondary: #b1bfd1;
  --ff-soft-text: #9fb1c8;
  --ff-deep: #111b30;
  --ff-dashed: #acc6e960;
  --ff-highlight: #263553;
  --ff-secondary-light: #bdcbe0;
  --ff-soft-panel: #1d2945;
  --ff-label: #d5e0e7;
  --ff-label-soft: #c4d3e7;
  --ff-hint: #9aaec8;
  --ff-well: #11192c;
  --ff-raised-strong: #323754;
  --ff-secondary-pale: #c5cce1;
  --ff-label-accent: #ddd6dd;
  --ff-disabled: #697e9b;
  --ff-scrim: #070d1eb8;
  --ff-caption: #d5e0e7;
  --ff-meter: #664c88;
  --ff-meter-track: #412c5c;
  --ff-accent-05: #ffcc6f05;
  --ff-accent-08: #ffcc6f08;
  --ff-accent-09: #ffcc6f09;
  --ff-accent-0b: #ffcc6f0b;
  --ff-accent-0d: #ffcc6f0d;
  --ff-accent-10: #ffcc6f10;
  --ff-accent-12: #ffcc6f12;
  --ff-accent-22: #ffcc6f22;
  --ff-accent-27: #ffcc6f27;
  --ff-accent-28: #ffcc6f28;
  --ff-accent-3b: #ffcc6f3b;
  --ff-accent-77: #ffcc6f77;
}
html[data-chain-theme='arc'] :is(body.foodfarm-ui, body.indexes-page) {
  --color-accent: #ffcc6f;
  --color-accent-fill: #ffcc6f;
  --color-accent-readable: #ffcc6f;
  --color-accent-hover: #ffdb98;
  --color-accent-pressed: #e9a13f;
  --color-accent-fill-hover: #ffdb98;
  --color-accent-soft: #ffcc6f0d;
  --color-accent-border: #ffcc6f3b;
  --color-accent-glow: #ffcc6f22;
  --color-on-accent: #1b3158;
  --iv-control: #7d91ac;
}
html[data-chain-theme='arc'] .network-control:hover,
html[data-chain-theme='arc'] .network-control:focus-within {
  border-color: #acc6e9;
  background: #acc6e90d;
  box-shadow: none;
}
/* The same selector is available on every product, including narrow screens. */
:is(.foodfarm-ui, .indexes-page) .network-control {
  display: inline-flex;
  padding-right: 20px;
  flex-shrink: 0;
}
:is(.foodfarm-ui, .indexes-page) .network-control::after {
  right: 3px;
}
.indexes-page .network-control {
  padding-left: 0;
  border: 0;
}
.indexes-page .network-control select {
  font-size: 12px;
  font-weight: 500;
}
.network-control:focus-within {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}
/* Enhanced picker: the native select remains the no-script fallback. */
html[data-chain-theme] :is(.foodfarm-ui, .indexes-page) .network-control[data-enhanced] {
  position: relative;
  padding: 0;
  gap: 0;
  border: 0;
  background: none;
  box-shadow: none;
  outline: none;
}
.network-control[data-enhanced]::after,
.network-control[data-enhanced] > i,
.network-control[data-enhanced] > select {
  display: none;
}
.ff-network-trigger {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 8px 11px;
  border: 1px solid #ffffff21;
  border-radius: 6px;
  background: var(--panel);
  box-shadow: none;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.ff-network-trigger:hover,
.ff-network-trigger[aria-expanded='true'] {
  border-color: var(--lime);
  background: var(--ink-3, var(--panel));
}
.ff-network-trigger:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}
.ff-network-mark {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 1px solid currentColor;
  border-radius: 7px;
  color: #c6f777;
  background: #c6f7770b;
}
.ff-network-mark[data-network-mark='arc'] {
  color: #ffcc6f;
  background: #ffcc6f0b;
}
.ff-network-mark svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ff-network-chevron {
  width: 13px;
  height: 13px;
  margin-left: 2px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.15s;
}
.ff-network-trigger[aria-expanded='true'] .ff-network-chevron {
  transform: rotate(180deg);
}
.ff-network-popup {
  position: absolute;
  z-index: 250;
  top: calc(100% + 10px);
  right: 0;
  width: 270px;
  max-width: calc(100vw - 28px);
  padding: 8px;
  border: 1px solid #ffffff24;
  border-radius: 15px;
  background: var(--panel-solid);
  box-shadow:
    0 16px 40px #0005,
    0 2px 6px #0003,
    inset 0 1px #ffffff05;
}
.ff-network-eyebrow {
  margin: 7px 9px 10px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.ff-network-option {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 11px;
  padding: 12px 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ff-network-option + .ff-network-option {
  margin-top: 3px;
}
.ff-network-option[aria-selected='true'] {
  background: var(--ff-accent-08, #c6f77708);
  border-color: var(--ff-accent-22, #c6f77722);
}
.ff-network-option:hover {
  background: #ffffff08;
}
.ff-network-option:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: -2px;
}
.ff-network-option .ff-network-mark {
  width: 32px;
  height: 32px;
  border-color: #ffffff17;
  border-radius: 9px;
}
.ff-network-option .ff-network-mark svg {
  width: 23px;
  height: 23px;
}
.ff-network-option-copy {
  flex: 1;
  min-width: 0;
}
.ff-network-option-copy > b {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
}
.ff-network-option-copy > span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}
.network-control .ff-network-status {
  display: inline-block;
  padding: 3px 5px;
  border: 1px solid #ffffff17;
  border-radius: 4px;
  color: var(--muted);
  background: #ffffff05;
  font-size: 8px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
}
.network-control .ff-network-status[data-status='live'] {
  color: #c6f777;
  background: #c6f7770b;
  border-color: #c6f77722;
}
.network-control .ff-network-status[data-status='soon'] {
  color: #ffcc6f;
  background: #ffcc6f0b;
  border-color: #ffcc6f22;
}
.ff-network-check {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--lime);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  visibility: hidden;
}
.ff-network-option[aria-selected='true'] .ff-network-check {
  visibility: visible;
}
@media (max-width: 480px) {
  .ff-network-trigger {
    gap: 6px;
    padding-inline: 8px;
    font-size: 11px;
  }
  .ff-network-trigger .ff-network-mark {
    width: 18px;
    height: 18px;
    border-radius: 5px;
  }
  .ff-network-trigger .ff-network-mark svg {
    width: 14px;
    height: 14px;
  }
  .ff-network-chevron {
    width: 10px;
    height: 10px;
    margin-left: 0;
  }
}
.foodfarm-subnav .price-mode-control {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: var(--muted);
  border: 0;
  background: transparent;
}
.foodfarm-subnav .price-mode-control select {
  min-height: 32px;
}
@media (max-width: 380px) {
  .foodfarm-ui .wallet-cluster {
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
  }
  .foodfarm-ui .wallet-cluster .network-control {
    order: 2;
  }
}
.native-currency-icon {
  width: 32px;
  height: 32px;
  vertical-align: middle;
  margin-right: 8px;
}
.arc-launch-note {
  color: var(--text);
}
html[data-chain-theme='arc'] .stocks-platform-orbit {
  background: radial-gradient(ellipse at 60% 30%, #412c5c70, transparent 75%), var(--ff-inset);
}
html[data-chain-theme='arc'] :is(.orbit-core, .orbit-node) {
  color: var(--text);
  background: #1b3158;
  border-color: #acc6e933;
  box-shadow: none;
}
html[data-chain-theme='arc'] .orbit-core {
  background: #412c5c;
}
html[data-chain-theme='arc']
  .foodfarm-ui
  :is(
    .orbit-core small,
    .orbit-core em,
    .orbit-node small,
    .orbit-node em,
    .stocks-platform-stats span,
    .stocks-platform-stats small,
    .stocks-hero-note,
    .fee-flow small,
    label small,
    footer small,
    .stocks-directory-summary,
    .stock-quote-status,
    .stocks-sort
  ) {
  color: var(--muted);
}
html[data-chain-theme='arc'] .foodfarm-ui :is(.orbit-node b, .stocks-platform-stats b) {
  color: var(--text);
}

/* The sprout-and-link mark is shared across products and network themes. */
:is(.foodfarm-ui, .indexes-page, .farm-stocks-teaser-page) .brand-mark {
  object-fit: contain;
  background: none;
  border-radius: 0;
  padding: 0;
}
:is(.foodfarm-ui, .indexes-page, .farm-stocks-teaser-page) .brand b { font-weight: 600; }
:is(.foodfarm-ui, .indexes-page, .farm-stocks-teaser-page) .brand :is(.brand-food, i) { color: #86c989; }
:is(.foodfarm-ui, .indexes-page, .farm-stocks-teaser-page) .brand-wordmark { width: 140px; height: auto; }
@media (max-width: 480px) {
  :is(.foodfarm-ui, .indexes-page, .farm-stocks-teaser-page) .brand-wordmark { width: 112px; }
}

/* Four surface levels: page, grouped content, action panels, and overlays.
 * Neutral highlights establish depth without competing with financial signals. */
body:is(.foodfarm-ui, .indexes-page) {
  --ff-shadow-panel: 0 2px 4px #00000040, 0 18px 36px -16px #000000c0, inset 0 1px 0 #ffffff12;
  --ff-shadow-action: 0 4px 8px #00000040, 0 24px 48px -20px #000000e0, inset 0 1px 0 #ffffff18;
  --ff-shadow-inset: inset 0 2px 5px #00000035, 0 1px 0 #ffffff05;
  --muted: var(--ff-depth-muted, #bfcac2);
  --ff-void: #020607;
  --ff-void-haze: #24434a24;
  position: relative;
  isolation: isolate;
  background: var(--ink);
}
html[data-chain-theme='arc'] body:is(.foodfarm-ui, .indexes-page) {
  --ff-void: #02040a;
  --ff-void-haze: #23375524;
  --ff-depth-muted: #c3cede;
}
/* Open, almost-black space. All detail belongs to the projected particle volume. */
body:is(.foodfarm-ui, .indexes-page)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 64% 22%, var(--ff-void-haze), transparent 62%),
    var(--ff-void);
}
body:is(.foodfarm-ui, .indexes-page)::after {
  content: none;
}
.foodfarm-atmosphere {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}
@media (forced-colors: active) {
  .foodfarm-atmosphere { display: none; }
}
:is(.foodfarm-ui, .indexes-page) .site-header {
  background: linear-gradient(#ffffff03, #ffffff00), var(--ink);
  box-shadow: 0 1px 0 #ffffff05, 0 5px 18px #00000018;
}
:is(.foodfarm-ui, .indexes-page) :is(.foodfarm-subnav, .iv-subnav) {
  background: #00000012;
  box-shadow: inset 0 1px 0 #00000025;
}
html[data-chain-theme] :is(.foodfarm-ui, .indexes-page) :is(
  .farm-card, .stock-farm-card, .panel-card, .action-card, .wizard-card,
  .stock-create-card, .stock-create-preview, .preview-card,
  .launch-sheet, .yield-receipt, .iv-index-card, .iv-panel, .iv-hero-art
) {
  background: linear-gradient(145deg, #ffffff05, #ffffff00 60%), var(--panel);
  border-color: #ffffff1c;
  box-shadow: var(--ff-shadow-panel);
}
html[data-chain-theme] .foodfarm-ui :is(.launch-sheet, .yield-receipt) {
  border-top-color: var(--lime);
  border-inline: 1px solid #ffffff0b;
}
html[data-chain-theme] :is(.foodfarm-ui, .indexes-page) :is(
  .trade-card, .action-card, .iv-action-panel, .iv-order-panel, .iv-detail-trade
) {
  background: linear-gradient(160deg, #ffffff07, #ffffff00 65%), var(--panel);
  box-shadow: var(--ff-shadow-action);
}
.foodfarm-ui :is(.protocol-strip, .stocks-platform-stats, .farm-stock-metrics) {
  background: linear-gradient(180deg, #ffffff04, #00000005);
  box-shadow: inset 0 1px 0 #ffffff04, 0 6px 18px -16px #000000b0;
}
html[data-chain-theme] .foodfarm-ui .curve-card {
  background: linear-gradient(180deg, #00000006, #00000016);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--ff-shadow-inset);
}
.foodfarm-ui .curve-card .panel-heading { padding: 18px; }
.foodfarm-ui .market-chart,
.foodfarm-ui .farm-stock-chart-wrap { background: #0000000c; }
html[data-chain-theme] :is(.foodfarm-ui, .indexes-page) :is(
  input:not([type='checkbox'], [type='radio'], [type='range']), textarea,
  .stocks-amount-input, .trade-input, .amount-input, .iv-amount
) {
  background: var(--ff-well, #101612);
  border-color: #ffffff1a;
  box-shadow: var(--ff-shadow-inset);
}
html[data-chain-theme] :is(.foodfarm-ui, .indexes-page) :is(
  .stocks-amount-input, .trade-input, .amount-input, .iv-amount
) input { background: transparent; box-shadow: none; }
:is(.foodfarm-ui, .indexes-page) :is(.button-primary, .iv-primary) {
  background: linear-gradient(180deg, #ffffff18, #ffffff00 75%), var(--lime);
  box-shadow: inset 0 1px 0 #ffffff38, 0 2px 3px #00000025;
}
:is(.foodfarm-ui, .indexes-page) :is(.button-primary, .iv-primary):active {
  box-shadow: inset 0 2px 4px #00000020;
}
:is(.foodfarm-ui, .indexes-page) :is(.ff-network-trigger, .button-wallet, .iv-secondary) {
  box-shadow: inset 0 1px 0 #ffffff08, 0 2px 4px #0000001c;
}
:is(.foodfarm-ui, .indexes-page) :is(dialog, .wallet-menu, .ff-network-popup, .iv-modal) {
  box-shadow: 0 16px 60px #00000070, 0 3px 9px #00000035, inset 0 1px 0 #ffffff0e;
}

.indexes-page .iv-trade .iv-panel { box-shadow: var(--ff-shadow-action); }

/* A little elevation on interactive surfaces, with quiet feedback on controls. */
html[data-chain-theme] :is(.foodfarm-ui, .indexes-page) :is(.farm-card, .stock-farm-card, .iv-index-card) {
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
:is(.foodfarm-ui, .indexes-page) :is(.button, .iv-button, .ff-network-trigger, .connection-switch button) {
  transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
:is(.foodfarm-ui, .indexes-page) :is(.main-nav a, .foodfarm-subnav a, .foodfarm-subnav button, .iv-subnav a) {
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}
html[data-chain-theme] :is(.foodfarm-ui, .indexes-page) :is(.home-product, .farm-card, .stock-farm-card, .iv-index-card):focus-within {
  border-color: color-mix(in srgb, var(--lime) 34%, var(--panel));
  box-shadow: var(--ff-shadow-action);
}
@media (hover: hover) and (pointer: fine) {
  html[data-chain-theme] :is(.foodfarm-ui, .indexes-page) :is(.home-product, .farm-card, .stock-farm-card, .iv-index-card):hover {
    border-color: color-mix(in srgb, var(--lime) 28%, var(--panel));
    box-shadow: var(--ff-shadow-action);
  }
  :is(.foodfarm-ui, .indexes-page) :is(.button, .iv-button, .ff-network-trigger):not(:disabled, [aria-disabled='true']):hover {
    border-color: color-mix(in srgb, var(--lime) 36%, var(--panel));
    box-shadow: inset 0 1px 0 #ffffff16, 0 5px 12px #00000035;
  }
  :is(.foodfarm-ui, .indexes-page) :is(.main-nav a, .connection-switch button):hover {
    color: var(--text);
    background-color: #ffffff05;
  }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html[data-chain-theme] :is(.foodfarm-ui, .indexes-page) :is(.farm-card, .stock-farm-card, .iv-index-card):hover {
    transform: translateY(-2px);
  }
  :is(.foodfarm-ui, .indexes-page) :is(.button, .iv-button, .ff-network-trigger):not(:disabled, [aria-disabled='true']):hover {
    transform: translateY(-1px);
  }
  :is(.foodfarm-ui, .indexes-page) :is(.button, .iv-button, .ff-network-trigger):not(:disabled, [aria-disabled='true']):active {
    transform: translateY(0);
  }
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  html[data-chain-theme] :is(.foodfarm-ui, .indexes-page) :is(.farm-card, .stock-farm-card, .iv-index-card, .button, .iv-button):hover {
    transform: none;
  }
}

@media (max-width: 600px) {
  .indexes-page .iv-header { grid-template-columns: minmax(0, 1fr) auto; }
  .indexes-page .iv-header .main-nav { min-width: 0; max-width: 100%; overflow-x: auto; }
  .indexes-page .iv-header-actions { min-width: 0; gap: 7px; }
  .indexes-page .iv-header-actions > .iv-button { min-width: 0; padding-inline: 9px; font-size: 11px; white-space: nowrap; }
  .indexes-page .iv-header .brand { font-size: 16px; gap: 5px; }
  .indexes-page .iv-header .brand-mark { width: 27px; height: 30px; }
  .indexes-page .iv-header .main-nav a { padding-inline: 10px; }
}
@media (max-width: 600px) {
  .indexes-page .iv-header { gap: 10px; padding-inline: 14px; }
}
@media (max-width: 380px) {
  .indexes-page .ff-network-trigger > span:not(.ff-network-mark) { display: none; }
  .indexes-page .brand-wordmark { width: 96px; }
}
@media (max-width: 480px) {
  :is(.foodfarm-ui, .indexes-page) .site-header .main-nav a {
    padding-inline: 8px;
    font-size: 11px;
  }
  .indexes-page .main-nav .iv-beta { display: none; }
}