/* =============================================================================
   VOLTERA — design system
   -----------------------------------------------------------------------------
   Obsidian canvas, editorial display serif, and a single warm accent. Depth is
   built from 1px borders and surface-tone shifts, never drop shadows. Radius is
   a signal: 2px for anything you act on, 10px for cards and image tiles, pill
   reserved for status so the soft geometry stays rare.

   The only chromatic element is Ember Gold and the molten gradient. The volatility
   ramp in config.js runs fog -> gold, so a quiet market is grey and a violent one
   glows. No blues, greens or purples anywhere.
   ========================================================================== */
@import url('../assets/fonts.css');

:root {
  /* surfaces, dark to light */
  --obsidian: #000000;
  --carbon: #030304;
  --inkwell: #08080a;
  --graphite: #121317;
  --slate: #1c1d22;

  /* strokes and text, low to high emphasis */
  --iron: #2e3038;
  --steel: #464853;
  --fog: #5e616e;
  --ash: #777a88;
  --silver: #9194a1;
  --pearl: #acafb9;
  --chalk: #cdcdcd;
  --bone: #e2e3e9;
  --paper: #ffffff;

  /* the accent */
  --ember: #cc9166;
  --molten: #ae9357;
  --glow: #fff0cc;
  --molten-grad: linear-gradient(103deg, rgb(174, 147, 87), rgb(255, 240, 204) 40%, rgb(174, 147, 87) 70%, rgba(189, 157, 79, 0));

  /* semantic. Money needs a loss colour; brick is the warm neighbour of gold
     so the palette stays in one family. Never used for decoration. */
  --pos: #cc9166;
  --neg: #b8604f;

  /* Glass. The motion backdrop shows through every surface, so panels are
     translucent tints of the surface colours rather than solid fills. */
  --glass-1: rgba(8, 10, 13, 0.44);     /* panels sitting directly on video */
  --glass-2: rgba(18, 19, 23, 0.46);    /* raised: inputs, buttons */
  --glass-3: rgba(28, 29, 34, 0.62);    /* active / selected */
  --glass-head: rgba(3, 3, 4, 0.58);    /* table heads, nav, footers */
  --blur: saturate(160%) blur(22px);

  --r-sharp: 2px;    /* buttons, inputs, nav items, inline links */
  --r-card: 10px;    /* cards and image tiles only */
  --r-pill: 9999px;  /* status tags and category chips only */

  --maxw: 1200px;
  --gut: 24px;

  --sans: 'Inter', -apple-system, system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --display: 'Bodoni Moda', 'Ivy Presto', 'Didot', 'Times New Roman', Georgia, serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* minor third, base 15px */
  --t-xs: 11px;
  --t-sm: 12.5px;
  --t-base: 15px;
  --t-md: 18px;
  --t-lg: 21.6px;
  --t-xl: 25.9px;
  --t-2xl: 31.1px;
  --t-3xl: 37.3px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* ------------------------------------------------------------- backdrop --- */
.backdrop { position: fixed; inset: 0; z-index: -2; overflow: hidden; background: var(--obsidian); }
.backdrop video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* the clip is cool-neutral; warm and dim it so it sits under the gold accent */
  filter: saturate(0.72) brightness(0.82) contrast(1.04) sepia(0.12);
}
/* Keeps body text at contrast no matter what frame is playing. */
.backdrop-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(130% 90% at 50% 0%, rgba(0,0,0,0.18), rgba(0,0,0,0.55) 72%),
    rgba(0, 0, 0, 0.12);
}

body {
  margin: 0;
  background: transparent;
  color: var(--bone);
  font-family: var(--sans);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
p { margin: 0; }

/* Display type owns everything at 52px and up. Inter never sets a headline. */
h1, h2, .display {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.032em;
  line-height: 1.02;
  margin: 0;
}
h1 { font-size: clamp(42px, 6.2vw, 88px); }
h2 { font-size: clamp(36px, 4.6vw, 64px); }

/* Below the display threshold Inter takes over. */
h3, h4 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--t-md);
  letter-spacing: -0.018em;
  line-height: 1.28;
  margin: 0;
}

em, .em {
  font-family: var(--display);
  font-style: italic;
  color: var(--ember);
}

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }

.eyebrow {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ash);
}

.lede {
  color: var(--silver);
  font-size: var(--t-md);
  font-weight: 300;
  line-height: 1.6;
  max-width: 58ch;
}

.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: -0.02em;
}
.pos { color: var(--pos); }
.neg { color: var(--neg); }
.dim { color: var(--fog); }

/* Inline links: ember text, ember underline, 2px radius on the focus box. */
.link {
  color: var(--ember);
  border-bottom: 1px solid rgba(204, 145, 102, 0.42);
  border-radius: var(--r-sharp);
  transition: border-color 0.18s ease;
}
.link:hover { border-bottom-color: var(--ember); }

/* --------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--r-sharp);
  border: 1px solid var(--iron);
  background: var(--glass-2);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  color: var(--bone);
  font-family: inherit;
  font-size: 14px;
  font-weight: 450;
  letter-spacing: -0.012em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.btn:hover { background: var(--glass-3); border-color: var(--steel); color: var(--paper); }

/* The filled white CTA. Scarce by design: at most one per viewport. */
.btn-fill {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--obsidian);
  font-weight: 500;
}
.btn-fill:hover { background: var(--bone); border-color: var(--bone); color: var(--obsidian); }

.btn-ghost { background: rgba(8,10,13,0.42); border-color: var(--iron); color: var(--pearl); }
.btn-ghost:hover { background: var(--glass-2); border-color: var(--steel); color: var(--bone); }
.btn-lg { height: 46px; padding: 0 22px; font-size: 15px; }
.btn-sm { height: 30px; padding: 0 11px; font-size: var(--t-sm); }

/* Status tags and category chips: the only pills in the system. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  border: 1px solid currentColor;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.dot { width: 5px; height: 5px; border-radius: var(--r-pill); background: currentColor; }


/* ----------------------------------------------------------------- nav ---- */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: 1px solid var(--iron);
  background: var(--glass-head);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}
.nav-in { height: 60px; display: flex; align-items: center; gap: 22px; }
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-size: 21px;
  letter-spacing: -0.02em;
  color: var(--paper);
}
.brand svg { display: block; }
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: 20px; }
.nav-links a {
  padding: 6px 10px;
  border-radius: var(--r-sharp);
  font-size: 14px;
  color: var(--silver);
  transition: color 0.16s ease, background 0.16s ease;
}
.nav-links a:hover { color: var(--bone); background: rgba(255,255,255,0.06); }
.nav-cta { margin-left: auto; display: flex; gap: 8px; }
.nav-div { width: 1px; height: 20px; background: var(--steel); }

/* ---------------------------------------------------------------- hero ---- */
.hero {
  position: relative;
  border-bottom: 1px solid var(--iron);
  overflow: hidden;
  min-height: 660px;
  display: flex;
  align-items: flex-end;
}
/* The product plate fills the right two-thirds and sits behind the headline. */
.hero-plate {
  position: absolute;
  right: max(-60px, calc(50% - 720px));
  top: 58px;
  width: min(62%, 860px);
  pointer-events: none;
  opacity: 1;
  mask-image: linear-gradient(102deg, transparent 2%, #000 24%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(102deg, transparent 2%, #000 24%, #000 92%, transparent 100%);
}
/* Scrim so the editorial headline stays legible where it crosses the plate.
   The composition is headline-over-mockup, not headline-beside-mockup. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(96deg,
    rgba(0, 0, 0, 0.82) 0%,
    rgba(0, 0, 0, 0.66) 26%,
    rgba(0, 0, 0, 0.34) 40%,
    rgba(0, 0, 0, 0.08) 52%,
    transparent 62%);
}
/* and a short fade into the section below, so the plate does not butt the border */
.hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 140px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,0.72), transparent);
}
/* padding-block, not the shorthand: the horizontal gutter belongs to .wrap and
   the shorthand would silently reset it. */
.hero-in { position: relative; z-index: 2; padding-block: 150px 84px; width: 100%; }
.hero h1 { max-width: 18ch; }
.hero .lede { margin-top: 22px; max-width: 44ch; }
.hero-cta { display: flex; align-items: center; gap: 10px; margin-top: 34px; flex-wrap: wrap; }
.hero-tag { margin-bottom: 24px; }

/* ------------------------------------------------------------ sections ---- */
section { border-bottom: 1px solid var(--iron); background: rgba(0, 0, 0, 0.12); }
.sec { padding-block: clamp(84px, 10vw, 150px); }
.sec-head { max-width: 68ch; }
.sec-head h2 { margin-top: 12px; }
.sec-head .lede { margin-top: 20px; }
.sec-row { display: flex; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.sec-row .sec-head { flex: 1 1 480px; }

/* ---------------------------------------------------------------- board --- */
.tools { display: flex; align-items: center; gap: 10px; margin: 40px 0 14px; flex-wrap: wrap; }
.seg {
  display: flex;
  border: 1px solid var(--iron);
  border-radius: var(--r-sharp);
  overflow: hidden;
  background: var(--glass-1);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}
.seg button {
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-right: 1px solid var(--iron);
  background: transparent;
  color: var(--ash);
  font-family: inherit;
  font-size: var(--t-sm);
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}
.seg button:last-child { border-right: 0; }
.seg button:hover { color: var(--bone); background: rgba(255,255,255,0.05); }
.seg button.on { background: var(--glass-3); color: var(--paper); }
.tools-note { margin-left: auto; font-size: var(--t-sm); color: var(--fog); }

.board {
  border: 1px solid var(--iron);
  border-radius: var(--r-card);
  background: var(--glass-1);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  overflow: hidden;
}
.board-scroll { overflow-x: auto; }
table.vol { width: 100%; border-collapse: collapse; min-width: 940px; }
table.vol thead th {
  text-align: right;
  padding: 12px 14px;
  background: var(--glass-head);
  border-bottom: 1px solid var(--iron);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ash);
  white-space: nowrap;
}
table.vol thead th:first-child, table.vol tbody td:first-child { text-align: left; padding-left: 20px; }
table.vol thead th:last-child, table.vol tbody td:last-child { text-align: right; padding-right: 20px; }
table.vol tbody td {
  text-align: right;
  padding: 14px;
  border-bottom: 1px solid var(--iron);
  font-size: 13.5px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
table.vol tbody tr:last-child td { border-bottom: 0; }
table.vol tbody tr { transition: background 0.15s ease; }
table.vol tbody tr:hover { background: rgba(255,255,255,0.04); }

.m-name { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.m-name strong { font-weight: 500; font-size: 14px; letter-spacing: -0.015em; color: var(--bone); }
.m-name span { font-size: var(--t-xs); color: var(--fog); letter-spacing: 0; }
.lvl { font-size: 17px; font-weight: 400; letter-spacing: -0.03em; }
.spark { display: block; }

.board-foot {
  padding: 13px 20px;
  background: var(--glass-head);
  border-top: 1px solid var(--iron);
  font-size: var(--t-sm);
  color: var(--fog);
  line-height: 1.6;
}

/* --------------------------------------------------------------- cards ---- */
.rail-scroll { margin-top: 44px; overflow-x: auto; scrollbar-width: none; }
.rail-scroll::-webkit-scrollbar { display: none; }
.rail-row { display: flex; gap: 14px; width: max-content; padding-bottom: 4px; }
.rcard {
  width: 300px;
  border: 1px solid var(--iron);
  border-radius: var(--r-card);
  background: var(--glass-1);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  overflow: hidden;
  flex: none;
}
.rcard-vis {
  aspect-ratio: 4 / 3;
  background: rgba(0,0,0,0.28);
  border-bottom: 1px solid var(--iron);
  position: relative;
  overflow: hidden;
}
.rcard-body { padding: 16px 18px 20px; }
.rcard-body h3 { margin-bottom: 7px; }
.rcard-body p { font-size: 13.5px; color: var(--silver); font-weight: 300; line-height: 1.55; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 44px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 44px; }
.card {
  border: 1px solid var(--iron);
  border-radius: var(--r-card);
  background: var(--glass-1);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  overflow: hidden;
}
.card-vis {
  height: 188px;
  background: rgba(0, 0, 0, 0.28);
  border-bottom: 1px solid var(--iron);
  display: grid;
  place-items: center;
  overflow: hidden;
}
/* the artwork is a mark, not an illustration: it should not fill the tile */
.card-vis svg { width: auto; height: 112px; max-width: 70%; }
.card-body { padding: 20px 22px 24px; }
.card-body .eyebrow { margin-bottom: 12px; }
.card-body h3 { margin-bottom: 9px; }
.card-body p { font-size: 13.5px; color: var(--silver); font-weight: 300; line-height: 1.58; }

.kv {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--iron);
  font-size: 13.5px;
}
.kv:last-child { border-bottom: 0; }
.kv span:first-child { color: var(--fog); }
.kv span:last-child { color: var(--bone); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* ---------------------------------------------------------------- math ---- */
.math-grid { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 56px; align-items: start; margin-top: 44px; }
.formula {
  border: 1px solid var(--iron);
  border-radius: var(--r-card);
  background: var(--glass-1);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  padding: 24px 26px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.95;
  color: var(--silver);
  overflow-x: auto;
  white-space: pre;
}
.formula .hl { color: var(--bone); }
.formula .gd { color: var(--ember); }
.formula .cm { color: var(--steel); }

/* ----------------------------------------------------------------- cta ---- */
.cta { padding-block: clamp(96px, 11vw, 160px); text-align: center; }
.cta h2 { max-width: 17ch; margin: 14px auto 0; }
.cta .lede { margin: 20px auto 0; }

/* Input paired with an adjacent filled CTA, identical 2px radius, no gap. */
.pair { display: flex; justify-content: center; margin-top: 34px; }
.pair-in { display: flex; width: min(460px, 100%); }
.pair input {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--iron);
  border-right: 0;
  border-radius: var(--r-sharp) 0 0 var(--r-sharp);
  background: var(--glass-2);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  color: var(--bone);
  font-family: inherit;
  font-size: 14.5px;
  outline: none;
  transition: border-color 0.16s ease;
}
.pair input::placeholder { color: var(--fog); }
.pair-in:focus-within input { border-color: var(--steel); }
.pair .btn { border-radius: 0 var(--r-sharp) var(--r-sharp) 0; height: 46px; padding: 0 20px; }
.pair-hint { margin-top: 12px; font-size: var(--t-sm); color: var(--fog); }

/* -------------------------------------------------------------- ticker ---- */
.ticker {
  overflow: hidden;
  border-top: 1px solid var(--iron);
  background: var(--glass-head);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}
.ticker-track { display: flex; width: max-content; animation: slide 52s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.tick {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 14px 24px;
  border-right: 1px solid var(--iron);
  font-size: 13px;
  white-space: nowrap;
}
.tick b { font-weight: 500; color: var(--bone); }

/* -------------------------------------------------------------- footer ---- */
footer { padding: 48px 0 60px; }
.foot-in { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.foot-links { display: flex; gap: 6px; margin-left: auto; }
.foot-links a {
  padding: 5px 9px;
  border-radius: var(--r-sharp);
  font-size: 13.5px;
  color: var(--ash);
  transition: color 0.16s ease, background 0.16s ease;
}
.foot-links a:hover { color: var(--bone); background: var(--inkwell); }
.legal {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--iron);
  font-size: var(--t-sm);
  color: var(--steel);
  line-height: 1.7;
  max-width: 92ch;
}

/* ----------------------------------------------------------- responsive --- */
@media (max-width: 1080px) {
  .hero-plate { opacity: 0.26; right: -150px; width: 74%; }
  .math-grid { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 900px) {
  .hero-plate { display: none; }
  .nav-links { display: none; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .hero { min-height: 0; }
  .hero-in { padding-block: 96px 72px; }
}
@media (max-width: 560px) {
  :root { --gut: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .backdrop video { display: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ----------------------------------------------------------- hero plate --- */
/* The product mockup behind the headline. Real board data, styled as the
   dashboard it will be: index header, molten chart, market list, term table. */
.plate {
  border: 1px solid var(--iron);
  border-radius: var(--r-card);
  background: var(--glass-1);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  overflow: hidden;
}
.pl-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 12px;
}
.pl-label { font-size: var(--t-sm); color: var(--fog); margin-bottom: 4px; }
.pl-big {
  font-size: 40px;
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 1;
}
.pl-chart { padding: 0 4px; line-height: 0; }
.pl-list { border-top: 1px solid var(--iron); }
.pl-row {
  display: grid;
  grid-template-columns: 62px 1fr auto 76px;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  border-bottom: 1px solid var(--iron);
  font-size: 13px;
}
.pl-row:last-child { border-bottom: 0; }
.pl-sym { color: var(--bone); font-weight: 500; }
.pl-sub { color: var(--steel); font-size: var(--t-xs); }
.pl-chg { text-align: right; font-size: 12px; }
.pl-term { border-top: 1px solid var(--iron); background: rgba(0,0,0,0.32); }
.pl-term-head, .pl-term-row {
  display: grid;
  grid-template-columns: 1fr repeat(3, 68px);
  gap: 10px;
  padding: 9px 20px;
  font-size: 12px;
}
.pl-term-head {
  color: var(--steel);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--iron);
}
.pl-term-head span:not(:first-child), .pl-term-row span:not(:first-child) { text-align: right; }
.pl-term-row span:first-child { color: var(--bone); }
.pl-term-row span:not(:first-child) { color: var(--silver); }

.rcard-vis svg { width: 78%; height: auto; display: block; margin: 0 auto; }
.rcard-vis { display: grid; place-items: center; }

/* ---------------------------------------------------------------- logos --- */
/* Real marks for the underlyings, served locally. A dark-on-transparent logo
   is inverted so it survives the obsidian canvas. */
.logo {
  width: 20px;
  height: 20px;
  border-radius: var(--r-sharp);
  object-fit: contain;
  flex: none;
  display: block;
}
.logo.inv { filter: invert(1); }

.m-cell { display: flex; align-items: center; gap: 11px; text-align: left; }

.under { display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; }
.under .u-sym { font-size: 11px; color: var(--steel); letter-spacing: 0.04em; }
.under .u-px { font-size: 12.5px; color: var(--pearl); }
.under .u-chg { font-size: 11px; min-width: 46px; text-align: right; }

.pl-sym { display: flex; align-items: center; gap: 8px; }
.pl-label { display: flex; align-items: center; gap: 8px; }
.tick .logo { width: 15px; height: 15px; align-self: center; }

/* ---------------------------------------------------------------- wallet -- */
/* The one place the system allows a shadow: a contact shadow on modals. */
.w-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: w-fade 0.16s ease;
}
@keyframes w-fade { from { opacity: 0; } }

.w-modal {
  width: min(400px, 100%);
  border: 1px solid var(--iron);
  border-radius: var(--r-card);
  background: rgba(8, 10, 13, 0.92);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: 0 24px 60px var(--carbon);
  overflow: hidden;
}
.w-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--iron);
}
.w-head h3 { font-size: var(--t-md); color: var(--bone); }
.w-sub { margin-top: 4px; font-size: var(--t-sm); color: var(--fog); }
.w-close {
  flex: none;
  width: 28px; height: 28px;
  border: 1px solid var(--iron);
  border-radius: var(--r-sharp);
  background: transparent;
  color: var(--ash);
  font-size: 17px; line-height: 1;
  cursor: pointer; font-family: inherit;
  transition: color 0.14s ease, border-color 0.14s ease;
}
.w-close:hover { color: var(--bone); border-color: var(--steel); }
.w-body { padding: 16px 18px 20px; }

.w-loading, .w-empty { font-size: 13.5px; color: var(--silver); line-height: 1.6; }

.w-list { display: flex; flex-direction: column; gap: 8px; }
.w-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--iron);
  border-radius: var(--r-sharp);
  background: var(--glass-2);
  color: var(--bone);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
  transition: background 0.16s ease, border-color 0.16s ease;
}
.w-item:hover { background: var(--glass-3); border-color: var(--steel); }
.w-item.is-busy { opacity: 0.7; pointer-events: none; }
.w-icon { width: 26px; height: 26px; border-radius: var(--r-sharp); flex: none; object-fit: contain; }
.w-icon-fb {
  display: grid; place-items: center;
  background: var(--slate); color: var(--pearl);
  font-size: 13px; font-weight: 500; text-transform: uppercase;
}
.w-name { flex: 1; font-weight: 450; }
.w-go { font-size: var(--t-sm); color: var(--fog); }

.w-acct { margin-bottom: 14px; }
.w-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 13px;
  margin-bottom: 4px;
  border: 1px solid var(--iron);
  border-radius: var(--r-sharp);
  background: var(--glass-2);
  color: var(--bone);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.14s ease;
}
.w-copy:hover { border-color: var(--steel); }
.w-addr { font-size: 15px; letter-spacing: -0.01em; }
.w-copy-hint { font-size: var(--t-sm); color: var(--fog); }

.w-wide { width: 100%; margin-bottom: 12px; }
.w-links { display: flex; gap: 8px; }
.w-links .btn { flex: 1; }

.w-error {
  margin-top: 12px;
  padding: 9px 11px;
  border: 1px solid rgba(184, 96, 79, 0.42);
  border-radius: var(--r-sharp);
  background: rgba(184, 96, 79, 0.1);
  font-size: var(--t-sm);
  color: var(--neg);
  line-height: 1.5;
}

/* The connect button when the wallet is on the wrong chain. */
.btn.w-warn, .term-btn.w-warn {
  color: var(--ember);
  border-color: rgba(204, 145, 102, 0.55);
  background: rgba(204, 145, 102, 0.1);
}
.btn.w-warn:hover, .term-btn.w-warn:hover {
  color: var(--glow);
  border-color: var(--ember);
  background: rgba(204, 145, 102, 0.16);
}

/* The brand mark. The rounded corners are baked into the PNG's alpha; the
   border-radius here just keeps the hit area matching the artwork. */
.brand-mark {
  display: block;
  flex: none;
  border-radius: 22%;
  object-fit: contain;
}

.nav-links a.on { color: var(--ember); }

.w-hint { margin-top: 12px; font-size: 11.5px; color: var(--steel); line-height: 1.55; }
.btn.w-dc:hover { color: var(--neg); border-color: rgba(184, 96, 79, 0.5); }