:root {
  --bg: #0a0a0a;
  --fg: #c0c0c0;
  --accent: #ffffff;
  --font: -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --border: color-mix(in srgb, var(--fg) 10%, transparent);
  --border-hover: color-mix(in srgb, var(--fg) 18%, transparent);
  --muted: #666;
  --dim: #444;
  --surface: color-mix(in srgb, var(--fg) 4%, transparent);
  --green: #4ade80;
  --blue: #60a5fa;
  --purple: #a78bfa;
  --red: #ef4444;
  --yellow: #fbbf24;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
}

body {
  max-width: 960px;
  margin: 0 auto;
  padding: 4em 3em 4em 3em;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1, h2, h3 {
  color: var(--accent);
  font-weight: normal;
  margin-bottom: 0.5em;
}

h1 {
  font-size: 1.5em;
  margin-bottom: 1em;
}

h2 {
  font-size: 1.2em;
  text-transform: lowercase;
}

p {
  margin-bottom: 1em;
}

main {
  flex: 1;
}

/* hide number input spinners */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

/* top bar — network navigation */

#top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3em;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 0.5ch;
  padding: 0 2em;
  z-index: 100;
}
#top-bar > #praxis-menu-dropdown {
  position: fixed;
  top: 3em;
  right: 1em;
}

.site-identity {
  color: var(--accent);
  font-size: 0.9em;
  text-decoration: none;
}

.site-identity:hover {
  text-decoration: none;
  color: var(--fg);
}

/* --- praxis mark menu --- */

.praxis-mark {
  width: 1.15em;
  height: 1.15em;
  display: block;
}

#praxis-menu-trigger {
  display: flex;
  align-items: center;
  gap: 0;
  cursor: pointer;
  position: relative;
  margin-left: auto;
}

#praxis-menu-btn {
  background: none;
  border: none;
  color: var(--fg);
  cursor: pointer;
  padding: 0.3em;
  display: flex;
  align-items: center;
  font-size: 1.2em;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

#praxis-menu-label {
  color: var(--fg);
  font-family: -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.85em;
  font-weight: 600;
  letter-spacing: -0.02em;
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity 0.25s ease, max-width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

#praxis-menu-trigger:hover #praxis-menu-btn,
#praxis-menu-trigger.menu-open #praxis-menu-btn {
  opacity: 1;
}

#praxis-menu-trigger:hover #praxis-menu-label,
#praxis-menu-trigger.menu-open #praxis-menu-label {
  opacity: 1;
  max-width: 5em;
  margin-right: 0.5ch;
}

/* dropdown — two-column grid when logged in */
#praxis-menu-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-width: 180px;
  padding: 0.5em 0;
  z-index: 101;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  display: grid;
  grid-template-columns: 1fr;
}

#praxis-menu-dropdown.praxis-dropdown-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
}

/* Logged-in dropdown — single column, three flat full-width buttons.
   Balance/address header, three nav buttons at equal visual weight, muted
   footer with switchers + sign-out. No section labels, no nesting. */
#praxis-menu-dropdown.menu-logged-in {
  min-width: 300px;
  padding: 0.35em 0;
}
#praxis-menu-dropdown.menu-logged-in > * { grid-column: 1 / -1; }
#praxis-menu-dropdown.menu-logged-in #praxis-nav-section { display: none; }
#praxis-menu-dropdown.menu-logged-in .praxis-menu-row { display: none; }

.dd-nav { display: flex; flex-direction: column; padding: 0.35em 0; }
/* Nuclear normalization: every property that could vary between
 * <button> and <a> is set on both explicitly. Fixed rem sizes so no
 * em-cascade shenanigans, and font-weight pinned to 500 on both the
 * container and the label so <button>'s bolder UA default can't win. */
a.dd-nav-btn,
button.dd-nav-btn {
  display: flex !important;
  align-items: center !important;
  gap: 0.9rem !important;
  width: 100% !important;
  padding: 0.9rem 1.1rem !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--fg) !important;
  font-family: inherit !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: -0.005em !important;
  text-decoration: none !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: background 0.12s, color 0.12s !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  margin: 0 !important;
}
a.dd-nav-btn .dd-nav-label,
button.dd-nav-btn .dd-nav-label {
  flex: 1 1 auto;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  font-family: inherit !important;
}
a.dd-nav-btn .dd-nav-icon,
button.dd-nav-btn .dd-nav-icon {
  color: var(--dim);
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  font-size: 1.25rem !important;
  line-height: 1 !important;
  transition: color 0.12s;
}
.dd-nav-btn .dd-nav-icon svg { width: 1em; height: 1em; display: block; }
/* Focus/hover reach the full row edge-to-edge — no margin, no
 * border-radius carveout — so the whole button reads as one target. */
a.dd-nav-btn:hover,
button.dd-nav-btn:hover,
a.dd-nav-btn:focus-visible,
button.dd-nav-btn:focus-visible {
  background: color-mix(in srgb, var(--fg) 9%, transparent) !important;
  outline: none;
}
a.dd-nav-btn:hover .dd-nav-icon,
button.dd-nav-btn:hover .dd-nav-icon,
a.dd-nav-btn:focus-visible .dd-nav-icon,
button.dd-nav-btn:focus-visible .dd-nav-icon { color: var(--accent); }
a.dd-nav-btn:hover .dd-nav-label,
button.dd-nav-btn:hover .dd-nav-label,
a.dd-nav-btn:focus-visible .dd-nav-label,
button.dd-nav-btn:focus-visible .dd-nav-label { color: var(--fg); }

.dd-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.55em 1.25ch 0.35em;
  margin-top: 0.15em;
  border-top: 1px solid color-mix(in srgb, var(--fg) 6%, transparent);
}
.dd-footer-switchers { display: flex; gap: 4px; }
.dd-signout {
  background: none; border: none;
  padding: 0.35rem 0.65rem;
  border-radius: 4px;
  color: var(--dim); font-family: inherit; font-size: 0.78em;
  cursor: pointer; transition: color 0.12s, background 0.12s;
}
.dd-signout:hover,
.dd-signout:focus-visible {
  background: color-mix(in srgb, var(--fg) 9%, transparent);
  color: var(--fg);
  outline: none;
}

/* Praxis hub tab strip — prepended to /network, /projects, /library.
   Three text links; active gets accent + a thin underline. Sits above the
   page content, flush to the left column so it reads as a nav row, not a
   card. */
.praxis-hub-nav { display: flex; gap: 1.5ch; margin: 0 0 1.2em; padding: 0 0 0.4em; border-bottom: 1px solid color-mix(in srgb, var(--fg) 6%, transparent); }
.praxis-hub-tab { color: var(--dim); text-decoration: none; font-size: 0.9em; padding: 0.25em 0.15ch; border-bottom: 2px solid transparent; margin-bottom: -0.42em; transition: color 0.12s, border-color 0.12s; }
.praxis-hub-tab:hover { color: var(--fg); }
.praxis-hub-tab-active { color: var(--fg); border-color: var(--accent); }

#praxis-menu-dropdown a {
  display: block;
  padding: 0.3em 1.5ch;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.85em;
  transition: color 0.15s;
}

#praxis-menu-dropdown a:hover {
  color: var(--fg);
}

.praxis-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 0.4em 1ch;
}

.praxis-menu-section {
  border-top: 1px solid var(--border);
  padding-top: 0.3em;
}

.praxis-menu-section-label {
  color: var(--muted);
  font-size: 0.65em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.4em 1.5ch 0;
}

.praxis-menu-row {
  display: flex;
  gap: 4px;
  padding: 0.4em 1.5ch;
}

/* bottom bar: manage + sign out */
#praxis-menu-bottom {
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5em 1.5ch 0.4em;
  white-space: nowrap;
}

/* top bar switchers (next to praxis mark) */
#top-bar-switchers {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 0.75ch;
  border-left: 1px solid var(--border);
  margin-left: 0.75ch;
  padding-top: 0.1em;
  padding-bottom: 0.1em;
}
#top-bar-switchers .lang-switcher {
  margin-left: 0;
}

/* hide the standalone .praxis-menu-row when bottom bar is present */
.menu-logged-in > .praxis-menu-row {
  display: none;
}

/* hide old network-nav class if any remain */
.network-nav {
  display: none;
}

/* top bar bell (next to praxis mark) */
.top-bar-bell {
  position: relative;
  color: var(--fg);
  font-size: 1.1em;
  opacity: 0.6;
  transition: opacity 0.15s;
  text-decoration: none;
  display: flex;
  align-items: center;
  margin-left: auto;
  margin-right: 0.75ch;
}
.top-bar-bell + #praxis-menu-trigger {
  margin-left: 0;
}
.top-bar-bell:hover {
  opacity: 1;
}

/* sign-in / balance section at top of dropdown */
.wallet-top-signin {
  padding: 0.6em 1.5ch;
}
.wallet-top-signin .top-bar-signin {
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  font-size: 0.9em;
}

/* wallet items inline in praxis dropdown */
#top-bar-wallet {
  display: flex;
  flex-direction: column;
}
#top-bar-wallet:empty {
  display: none;
}

#top-bar-wallet-top .wallet-greeting {
  display: flex;
  align-items: center;
  gap: 1.25ch;
  padding: 1em 1.75ch 0.4em;
  font-size: 1em;
  color: var(--fg);
  font-weight: 400;
  letter-spacing: -0.005em;
}
.wallet-greeting-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.4em;
  height: 3.4em;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  background: color-mix(in srgb, var(--fg) 10%, transparent);
  color: var(--fg);
  font-size: 0.85em;
  font-weight: 500;
  object-fit: cover;
}
img.wallet-greeting-avatar { padding: 0; }
.wallet-greeting-name {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.25;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#top-bar-wallet-top .wallet-top-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.35em 1.75ch 0.85em;
  border-bottom: 1px solid var(--border);
}

.wallet-menu-balance {
  color: var(--accent);
  font-size: 1em;
  font-variant-numeric: tabular-nums;
}

.wallet-menu-addr {
  display: inline-flex;
  align-items: center;
  gap: 0.3ch;
  background: none;
  border: none;
  color: var(--dim);
  font-family: inherit;
  font-size: 0.75em;
  cursor: pointer;
  padding: 0;
}
.wallet-menu-addr:hover {
  color: var(--muted);
}
.wallet-menu-addr i {
  font-size: 0.85em;
}

.wallet-menu-link {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.85em;
  padding: 0.3em 1.5ch;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  transition: color 0.15s;
  box-sizing: border-box;
}
.wallet-menu-link:hover {
  color: var(--fg);
}
.wallet-menu-signout {
  color: var(--dim);
  font-size: 0.85em;
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  padding: 0.3em 0;
}

/* floating owner dock — left edge */

.owner-dock {
  position: fixed;
  left: 0;
  /* Center in the visible content area (below 3em fixed header) not the full viewport */
  top: calc(50% + 1.5em);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 0 2em;
  z-index: 200;
}

.dock-btn {
  background: none;
  border: none;
  color: var(--dim);
  cursor: pointer;
  font-size: 1.1em;
  padding: 0.3em;
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: color 0.15s;
}

.dock-btn:hover,
.dock-btn.active {
  color: var(--accent);
}

.dock-tools {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1em;
}

/* Section links pop out to the right of the dock, vertical column.
   Animated with opacity+translate for smooth in/out. */
.dock-sections {
  position: absolute;
  left: 100%;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3em;
  padding: 0.5em 1ch;
  background: var(--bg);
  border: 1px solid var(--border);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  z-index: 201;
}

.dock-sections.expanded {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.dock-section-link {
  color: var(--dim);
  font-size: 0.8em;
  text-decoration: none;
}

.dock-section-link:hover {
  color: var(--accent);
}

/* feed mode: dock is position:fixed, override body left padding to clear dock */
body.feed-mode,
body.feed-mode-pending {
  padding-left: 3.5em;
}

/* show dock with anti-flash */
.feed-mode-pending .owner-dock,
.feed-mode .owner-dock {
  display: flex;
}

/* mobile: dock becomes horizontal bottom tab bar */
@media (max-width: 768px) {
  .owner-dock {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    transform: none !important;
    flex-direction: row !important;
    justify-content: space-around !important;
    align-items: center !important;
    padding: 0.4em 0 calc(0.4em + env(safe-area-inset-bottom)) !important;
    background: var(--bg) !important;
    border-top: 1px solid var(--border) !important;
    gap: 0 !important;
    z-index: 300 !important;
  }
  .dock-btn {
    font-size: 1.3em;
    padding: 0.5em;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }
  /* hide section links in bottom bar (they're in the menu sheet) */
  .dock-sections { display: none !important; }
  .dock-tools {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-around !important;
    width: 100% !important;
    gap: 0 !important;
  }
  /* hide the portfolio nav on mobile (links are in menu) */
  .portfolio-nav { display: none !important; }
  /* push page content above the bottom bar */
  body { padding-bottom: 60px !important; }
  /* push player above the bottom bar */
  body:has(#global-player.active) .owner-dock { bottom: 44px !important; }
  body:has(#global-player.active) { padding-bottom: 104px !important; }

  body.feed-mode,
  body.feed-mode-pending {
    padding-left: 1em;
  }
}

/* bottom nav — portfolio sections */

.portfolio-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 0.75em 1em;
  text-align: center;
  z-index: 100;
}

.portfolio-nav a {
  margin: 0 1.2ch;
  color: var(--muted);
  font-size: 0.8em;
  text-decoration: none;
}

.portfolio-nav a:hover {
  color: var(--fg);
}

hr {
  border: none;
  margin: 3em 0;
}

footer {
  margin-top: 4em;
  padding-top: 2em;
  color: var(--muted);
}

footer a {
  color: var(--muted);
}

.praxis-badge {
  display: inline-block;
  padding: 0.2em 0.8em;
  border: 1px solid var(--border);
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.7em;
  color: var(--dim);
  text-decoration: none;
  letter-spacing: 0.05em;
  margin-top: 0.75em;
}

.praxis-badge:hover {
  color: var(--fg);
  border-color: var(--border-hover);
  text-decoration: none;
}

.header-row {
  display: flex;
  align-items: flex-start;
  gap: 1.5em;
}
.header-pic {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 50%;
  flex-shrink: 0;
}
.header-text {
  flex: 1;
  min-width: 0;
}
@media (max-width: 600px) {
  .header-pic { width: 110px; height: 110px; }
  .header-row { gap: 1em; }
}

.bio, .artist-bio {
  color: var(--fg);
  margin-bottom: 1em;
  max-width: 80ch;
}

.bio.bio-clamped, .artist-bio.bio-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  cursor: pointer;
}

.bio.expanded, .artist-bio.expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  cursor: auto;
}

.bio-read-more {
  color: var(--dim);
  font-size: 0.8em;
  cursor: pointer;
  margin-top: 0.25em;
}

.bio-read-more:hover {
  color: var(--accent);
}

/* music */

.alias {
  margin-bottom: 2em;
}

.alias-name {
  color: var(--accent);
  margin-bottom: 0.5em;
}

.album {
  display: flex;
  align-items: center;
  gap: 1.5ch;
  margin-bottom: 0.5em;
}

.album img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  image-rendering: auto;
}


.album-detail img,
section img {
  max-width: 100%;
  height: auto;
}

.album-detail img {
  max-width: 400px;
}

.album-info {
  color: var(--fg);
}

.album-title {
  color: var(--accent);
}

.album-year {
  color: var(--muted);
}

/* credits */

/* Gallery mosaic grid */
.gallery-grid {
  columns: 3;
  column-gap: 0.75em;
}
.gallery-item {
  break-inside: avoid;
  margin-bottom: 0.75em;
}
.gallery-item img {
  width: 100%;
  display: block;
  aspect-ratio: 1;
  object-fit: cover;
  cursor: zoom-in;
  transition: opacity 0.15s;
}
.gallery-item img:hover {
  opacity: 0.85;
}
.gallery-caption {
  font-size: 0.8em;
  color: var(--muted);
  padding: 0.3em 0 0.1em;
  line-height: 1.4;
}

/* Gallery lightbox */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
.gallery-lightbox img {
  max-width: 92vw;
  max-height: 92vh;
  object-fit: contain;
  box-shadow: 0 8px 64px rgba(0,0,0,0.8);
}
.gallery-lightbox-close {
  position: fixed;
  top: 1em;
  right: 1.5em;
  color: #fff;
  font-size: 2em;
  cursor: pointer;
  line-height: 1;
  opacity: 0.7;
  background: none;
  border: none;
  padding: 0;
}
.gallery-lightbox-close:hover { opacity: 1; }
.gallery-lightbox-caption {
  position: fixed;
  bottom: 1.5em;
  left: 0;
  right: 0;
  text-align: center;
  color: rgba(255,255,255,0.7);
  font-size: 0.85em;
  pointer-events: none;
}

.credit {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2ch;
  padding: 0.35em 0;
  align-items: baseline;
}

.credit-title {
  color: var(--accent);
  font-style: italic;
}

.credit-title .credit-year {
  font-style: normal;
  color: var(--dim);
  font-size: 0.85em;
}

.credit-role {
  color: var(--fg);
}

.credit-dir {
  color: var(--muted);
  font-size: 0.9em;
}

.credit-detail {
  color: var(--fg);
}

/* engineering */

.project {
  margin-bottom: 1em;
}

.project-name {
  color: var(--accent);
}

.project-role {
  color: var(--fg);
}

/* store */

.store-item {
  margin-bottom: 2em;
  padding: 1em 0;
}

.store-item-title {
  color: var(--accent);
}

.store-item-price {
  color: var(--fg);
  margin: 0.25em 0;
}

.buy-btn {
  background: var(--fg);
  border: none;
  color: var(--bg);
  font-family: inherit;
  font-size: 0.9em;
  padding: 0.5em 2ch;
  cursor: pointer;
  margin-top: 0.5em;
  border-radius: 6px;
  font-weight: 500;
  transition: opacity 0.15s;
}

.buy-btn:hover {
  opacity: 0.85;
}

.buy-btn:disabled, .buy-btn.btn-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  border-color: var(--dim);
  color: var(--dim);
}

.buy-btn:disabled:hover, .buy-btn.btn-disabled:hover {
  background: none;
  color: var(--dim);
}

/* blog */

.post-list {
  list-style: none;
}

.post-list li {
  margin-bottom: 1em;
}

.post-list time {
  color: var(--muted);
  margin-right: 2ch;
}

.post-body {
  margin-top: 1em;
  max-width: 72ch;
}

.post-body p {
  margin-bottom: 1em;
}

.post-body blockquote {
  border-left: 2px solid var(--border-hover);
  padding-left: 2ch;
  color: var(--fg);
  margin: 1em 0;
}

.post-body code {
  background: var(--surface);
  padding: 0.1em 0.5ch;
}

.post-body pre {
  background: var(--surface);
  padding: 1em;
  overflow-x: auto;
  margin: 1em 0;
}

/* reading list */

.reading-list {
  list-style: none;
}

.reading-list li {
  margin-bottom: 1em;
}

.reading-list .book-title {
  color: var(--accent);
}

.reading-list .book-author {
  color: var(--fg);
}

.reading-list .book-note {
  color: var(--muted);
  display: block;
}

/* wallet */

#wallet-status {
  color: var(--muted);
  font-size: 0.85em;
  margin-top: 0.5em;
}

/* unread message dot on dock */
.dock-msg-dot {
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 6px;
  background: #ef4444;
  border-radius: 50%;
  pointer-events: none;
  font-size: 0;
  overflow: hidden;
  line-height: 0;
}

/* dm panel */

.dm-badge {
  display: none;
  position: absolute;
  top: -4px;
  right: -6px;
  background: var(--red);
  color: var(--accent);
  font-size: 0.6em;
  font-weight: bold;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  font-style: normal;
}

#dm-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 380px;
  max-width: 100vw;
  height: 70vh;
  background: var(--bg);
  border-right: 1px solid var(--border-hover);
  border-top: 1px solid var(--border-hover);
  z-index: 201;
  transition: transform 0.2s ease;
  display: flex;
  flex-direction: column;
}

#dm-panel.dm-closed {
  transform: translateX(-100%);
  pointer-events: none;
}

#dm-panel.dm-open {
  transform: translateX(0);
  pointer-events: auto;
}

.dm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75em 1em;
  border-bottom: 1px solid var(--border);
  color: var(--accent);
  font-size: 0.95em;
  flex-shrink: 0;
}

.dm-icon-btn {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 0.25em;
  font-size: 1.1em;
}

.dm-icon-btn:hover {
  color: var(--accent);
}

#dm-list-view {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.dm-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85em;
  padding: 0.5em 1em;
}

.dm-tab:hover {
  color: var(--fg);
}

.dm-tab-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

#dm-tabs {
  gap: 0;
  flex-shrink: 0;
}

#dm-convo-list {
  flex: 1;
  overflow-y: auto;
}

#dm-project-list {
  flex: 1;
  overflow-y: auto;
}

.dm-convo-item {
  padding: 0.75em 1em;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.dm-convo-item:hover {
  background: var(--surface);
}

.dm-convo-peer {
  color: var(--accent);
  font-size: 0.9em;
}

.dm-convo-preview {
  color: var(--muted);
  font-size: 0.8em;
  margin-top: 0.2em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dm-convo-time {
  color: var(--dim);
  font-size: 0.75em;
  margin-top: 0.1em;
}

#dm-convo-view {
  flex: 1;
  flex-direction: column;
  overflow: hidden;
}

#dm-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1em;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.dm-msg {
  display: flex;
  flex-direction: column;
  max-width: 75%;
}

.dm-msg-mine {
  align-self: flex-end;
  align-items: flex-end;
}

.dm-msg-theirs {
  align-self: flex-start;
  align-items: flex-start;
}

.dm-bubble {
  background: var(--surface);
  border: 1px solid var(--border-hover);
  padding: 0.6em 1.2em;
  font-size: 0.95em;
  line-height: 1.5;
  word-break: break-word;
  width: fit-content;
  min-width: 3em;
}

.dm-msg-mine .dm-bubble {
  border-radius: 16px 16px 4px 16px;
  color: var(--accent);
}

.dm-msg-theirs .dm-bubble {
  border-radius: 16px 16px 16px 4px;
  color: var(--fg);
}

/* Sonner-style toast notifications */
.toast-container {
  position: fixed;
  bottom: 50px;
  right: 16px;
  z-index: 9998;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  pointer-events: none;
  max-width: 360px;
  width: 360px;
}
.toast-item {
  pointer-events: auto;
  background: var(--bg, #0a0a0a);
  border: 1px solid var(--border, #333);
  color: var(--fg, #c0c0c0);
  padding: 0.9em 1.2em;
  font-size: 0.85em;
  font-family: inherit;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  opacity: 0;
  transform: translateY(16px) scale(0.96);
  transition: all 0.3s cubic-bezier(0.21, 1.02, 0.73, 1);
  width: 100%;
}
.toast-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.toast-exit {
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.3s ease-in;
}
.toast-success { border-left: 3px solid var(--green, #4ade80); }
.toast-error { border-left: 3px solid #ef4444; }
.toast-message { border-left: 3px solid var(--accent, #a78bfa); }
@media (max-width: 480px) {
  .toast-container { left: 16px; right: 16px; width: auto; max-width: none; bottom: 60px; }
}

/* DM contact picker (new message / group) */
.msg-picker-header {
  display: flex;
  align-items: center;
  gap: 0.75ch;
  padding: 0.75em 1em;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 0.9em;
}
.msg-picker-back {
  background: none;
  border: none;
  color: var(--fg);
  cursor: pointer;
  font-size: 1.1em;
  padding: 0;
  display: flex;
}
.msg-picker-search {
  width: 100%;
  padding: 0.6em 1em;
  background: var(--surface);
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--fg);
  font-family: inherit;
  font-size: 0.85em;
  outline: none;
  box-sizing: border-box;
}
.msg-picker-search::placeholder { color: var(--dim); }

/* Compose new conversation modal */
.msg-compose-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.msg-compose-sheet {
  background: var(--bg, #0a0a0a);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.5em;
  min-width: 300px;
  max-width: 420px;
  width: 90%;
}
.msg-compose-overlay {
  animation: msg-overlay-in 0.2s ease-out;
}
@keyframes msg-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.msg-compose-sheet {
  animation: msg-sheet-in 0.25s cubic-bezier(0.21, 1.02, 0.73, 1);
  transform-origin: center;
}
@keyframes msg-sheet-in {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.msg-compose-option {
  display: flex;
  align-items: center;
  gap: 0.75ch;
  width: 100%;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--fg);
  font-family: inherit;
  font-size: 0.95em;
  padding: 0.85em 1.1em;
  cursor: pointer;
  margin-bottom: 0.5em;
  transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.1s;
}
.msg-compose-option:hover { border-color: var(--accent); color: var(--accent); }
.msg-compose-option:active { transform: scale(0.98); }
.msg-compose-cancel {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.85em;
  padding: 0.6em;
  cursor: pointer;
  margin-top: 0.25em;
  transition: color 0.15s;
}
.msg-compose-cancel:hover { color: var(--fg); }
/* Picker steps inside modal — slide transition */
.msg-compose-sheet .msg-picker-header { border-bottom: 1px solid var(--border); padding: 0.75em 1em; }
.msg-compose-sheet .msg-picker-search { border-bottom: 1px solid var(--border); }
.msg-compose-sheet .msg-convo-item {
  padding: 0.75em 1em;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  font-size: 0.9em;
  transition: background 0.12s;
}
.msg-compose-sheet .msg-convo-item:hover { background: var(--surface); }
.msg-compose-sheet .msg-picker-list,
.msg-compose-sheet > div[style*="padding"] {
  animation: msg-step-in 0.2s ease-out;
}
@keyframes msg-step-in {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}
/* Menu re-entry (back button) */
.msg-compose-sheet > h3 {
  animation: msg-step-back 0.2s ease-out;
}
@keyframes msg-step-back {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}

/* DM image attachments — no border, download button on hover */
.dm-img-wrap .dm-img-download {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.2s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.dm-img-wrap:hover .dm-img-download { opacity: 1; }
.dm-img-download:hover { background: rgba(0,0,0,0.85); }
/* Always show on touch devices */
@media (hover: none) { .dm-img-wrap .dm-img-download { opacity: 1; } }

/* Also remove padding from bubble when it contains only an image */
/* Image-only messages: no padding. Mixed text+image: keep padding on text */
.dm-bubble:has(.dm-img-wrap):not(:has(.dm-img-wrap ~ br)):not(:has(br ~ .dm-img-wrap)) { padding: 0; overflow: hidden; }
.dm-bubble .dm-img-wrap { margin: 0.3em -1.2em; width: calc(100% + 2.4em); }
.dm-bubble .dm-img-wrap:first-child { margin-top: -0.6em; }
.dm-bubble .dm-img-wrap:last-child { margin-bottom: -0.6em; }

/* OG link preview cards in DM messages — edge-to-edge, no bubble padding */
/* OG cards in mixed messages get negative margin to go edge-to-edge */
.dm-bubble .dm-og-card { margin: 0.3em -1.2em; width: calc(100% + 2.4em); }
.dm-bubble .dm-og-card:last-child { margin-bottom: -0.6em; }
.dm-og-card {
  display: block;
  text-decoration: none;
  color: inherit;
  min-width: 260px;
}
.dm-og-card img {
  width: 100%;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  display: block;
}
.dm-og-domain {
  padding: 0.5em 0.8em;
  font-size: 0.85em;
  color: var(--accent);
}

.dm-time {
  font-size: 0.7em;
  color: var(--dim);
  margin-top: 0.15em;
}

#dm-send-form {
  display: flex;
  gap: 0.5em;
  padding: 0.75em 1em;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

#dm-input {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border-hover);
  color: var(--fg);
  font-family: inherit;
  font-size: 0.9em;
  padding: 0.7em 1.5ch;
  border-radius: 999px;
}

#dm-input:focus {
  outline: none;
  border-color: var(--muted);
}

/* --- Pay bar (Apple Cash style) — shared between dm + messages --- */
.pay-bar-panel {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.4em;
  padding: 1.5em 1.2em 1em;
  border-top: 1px solid var(--border);
}
.pay-stepper-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2em;
  width: 100%;
}
.pay-step-btn {
  width: 2.4em; height: 2.4em;
  border-radius: 50%;
  border: 1px solid var(--border-hover);
  background: var(--surface, rgba(255,255,255,0.05));
  color: var(--fg);
  font-size: 1.3em;
  font-weight: 600;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s, background 0.15s;
  flex-shrink: 0;
  line-height: 1;
}
.pay-step-btn:hover { border-color: var(--muted); background: rgba(255,255,255,0.08); }
.pay-step-btn:active { transform: scale(0.92); }
.pay-display {
  font-size: 3em;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.02em;
  text-align: center;
  min-width: 2ch;
}
.pay-keypad-wrap {
  display: none;
  align-items: baseline;
  justify-content: center;
  gap: 0.3ch;
}
.pay-eth-input {
  background: none; border: none; color: var(--fg);
  font-family: inherit; font-size: 3em; font-weight: 600;
  padding: 0; outline: none; text-align: right;
  width: 5ch; min-width: 3ch; max-width: 12ch;
}
.pay-eth-input::placeholder { color: var(--dim); }
.pay-currency-label { color: var(--dim); font-size: 1.6em; font-weight: 500; }
.pay-conversion-line {
  color: var(--dim); font-size: 0.85em;
  min-height: 1.2em; margin-bottom: 0.15em;
}
.pay-mode-toggle {
  background: none; border: none; color: var(--accent);
  font-family: inherit; font-size: 0.8em;
  cursor: pointer; padding: 0.3em 0;
  opacity: 0.8; transition: opacity 0.15s;
}
.pay-mode-toggle:hover { opacity: 1; }
.pay-balance-line {
  color: var(--dim); font-size: 0.8em;
  min-height: 1.2em; margin-bottom: 0.3em;
}
.pay-actions {
  display: flex; gap: 0.6em; width: 100%;
}
.pay-action-btn {
  flex: 1; border: none; border-radius: 999px;
  padding: 0.75em 1ch; font-family: inherit;
  font-size: 0.9em; font-weight: 600;
  cursor: pointer; transition: opacity 0.15s;
  text-align: center;
}
.pay-request-btn {
  background: var(--surface, rgba(255,255,255,0.06));
  color: var(--fg);
  border: 1px solid var(--border-hover);
}
.pay-request-btn:hover { opacity: 0.85; }
.pay-send-btn {
  background: var(--accent); color: var(--bg);
}
.pay-send-btn:hover { opacity: 0.85; }
.pay-send-btn:disabled, .pay-request-btn:disabled { opacity: 0.4; cursor: default; }
.pay-cancel-link {
  background: none; border: none; color: var(--dim);
  font-family: inherit; font-size: 0.8em;
  cursor: pointer; padding: 0.4em 0; margin-top: 0.2em;
}
.pay-cancel-link:hover { color: var(--muted); }
.pay-bar-panel.pay-over-balance .pay-display,
.pay-bar-panel.pay-over-balance .pay-eth-input,
.pay-bar-panel.pay-over-balance .pay-balance-line { color: #e74c3c; }
.pay-bar-panel.pay-over-balance .pay-send-btn { opacity: 0.4; cursor: default; }

/* --- Payment cards in chat --- */
.pay-card {
  background: var(--surface, rgba(255,255,255,0.05));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1em 1.2em;
  min-width: 180px; max-width: 240px;
}
.pay-card-header {
  display: flex; align-items: center; gap: 0.5ch;
  font-size: 0.75em; color: var(--dim);
  margin-bottom: 0.6em; font-weight: 500;
}
.pay-card-header i { font-size: 1.3em; }
.pay-card-amount {
  font-size: 1.6em; font-weight: 700;
  color: var(--fg); margin-bottom: 0.15em;
}
.pay-card-eth {
  font-size: 0.8em; color: var(--dim);
  margin-bottom: 0.6em;
}
.pay-card-status {
  font-size: 0.75em; color: var(--dim);
  display: flex; align-items: center; gap: 0.3ch;
}
.pay-card-status.sent { color: var(--accent); }
.pay-card-accept-btn {
  background: var(--accent); color: var(--bg);
  border: none; border-radius: 999px;
  padding: 0.5em 1.5ch; font-family: inherit;
  font-size: 0.85em; font-weight: 600;
  cursor: pointer; transition: opacity 0.15s;
  width: 100%;
}
.pay-card-accept-btn:hover { opacity: 0.85; }
.pay-card-accept-btn:disabled { opacity: 0.4; cursor: default; }

#dm-new-section {
  padding: 0 1em 0.5em;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  body {
    padding: 4em 1.5em 6em;
  }
  .project-tiers {
    flex-direction: column;
  }
  .tier-card {
    min-width: unset;
  }
  /* touch targets — 44px minimum */
  .buy-btn, .follow-btn, .dm-btn {
    padding: 0.5em 1.2ch;
    font-size: 0.85em;
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .network-nav a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .top-bar-connect {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* portfolio nav becomes bottom bar on mobile */
  .portfolio-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    transform: none;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0.75em 1em;
    background: var(--bg);
    border-top: 1px solid var(--border);
    z-index: 150;
  }
  .portfolio-nav a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font-size: 0.85em;
  }
  /* mobile: hide praxis menu + bell, show hamburger */
  #praxis-menu-trigger { display: none; }
  #praxis-menu-dropdown { display: none; }
  .top-bar-bell { display: none; }
  #top-bar-switchers { display: none; }
  .network-nav a { display: none; }
  .network-nav .lang-switcher { display: none; }
  .network-nav > span:last-child { display: none; }
  .network-nav { margin-left: auto; gap: 0.5ch; }
  #mobile-menu-btn { display: flex !important; margin-left: auto; }

  #mobile-menu-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg);
    border-top: 1px solid var(--border);
    border-radius: 12px 12px 0 0;
    padding: 1em 1.5em calc(1em + env(safe-area-inset-bottom));
    z-index: 500;
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 60vh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    pointer-events: none;
  }
  #mobile-menu-sheet.open {
    transform: translateY(0);
    pointer-events: auto;
  }
  body:has(#global-player.active) #mobile-menu-sheet {
    padding-bottom: calc(50px + env(safe-area-inset-bottom));
  }
  .mobile-menu-section {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
  }
  .mobile-menu-section + .mobile-menu-section {
    border-top: 1px solid var(--border);
    padding-top: 1em;
  }
  .mobile-menu-section-title {
    color: var(--muted);
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.25em;
  }
  .mobile-menu-item {
    color: var(--fg);
    font-size: 0.9em;
    text-decoration: none;
    padding: 0.4em 0;
    min-height: 32px;
    display: flex;
    align-items: center;
    gap: 0.75ch;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    width: 100%;
    text-align: left;
  }
  .mobile-menu-item:hover { color: var(--accent); }
  .mobile-menu-item i { font-size: 1em; color: var(--muted); }
  .mobile-menu-balance {
    color: var(--accent);
    font-size: 1em;
    padding: 0.3em 0;
    font-variant-numeric: tabular-nums;
  }
  #mobile-menu-sheet a,
  #mobile-menu-sheet button {
    color: var(--fg);
    font-size: 0.9em;
    text-decoration: none;
    padding: 0.4em 0;
    min-height: 32px;
    display: flex;
    align-items: center;
  }
  #mobile-menu-sheet a:hover { color: var(--accent); }
  #mobile-menu-sheet .lang-switcher {
    font-size: 1em;
    min-height: 44px;
  }

  #mobile-menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 499;
  }
  #mobile-menu-overlay.open { display: block; }
  /* form inputs fill width */
  .project-input, .join-input, .tier-qty {
    font-size: 16px; /* prevent iOS zoom */
  }
  /* settings panel full width on mobile */
  .settings-inner {
    padding: 0 1em 4em;
  }
  .settings-subpage-header { padding: 0.75em 0 1em; }
  .settings-swatch { width: 34px; height: 34px; }
  #s-template-cards { grid-template-columns: 1fr !important; }
  /* gallery grid responsive */
  .gallery-grid {
    columns: 2;
  }
  /* compose panel mobile padding */
  .compose-panel-inner {
    padding: 0 1em;
  }
  /* script toolbar touch targets */
  .script-toolbar { flex-wrap: wrap; }
  .script-toolbar button {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* additional touch targets */
  .compose-fmt { min-height: 44px; }
  .projects-filter, .projects-list-filter {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .library-tag {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .track-play-btn {
    min-height: 44px;
    min-width: 44px;
  }
}

/* mobile menu: hidden on desktop, visible on mobile via media query */
@media (min-width: 769px) {
  #mobile-menu-btn { display: none !important; }
  #mobile-menu-sheet { display: none !important; }
  #mobile-menu-overlay { display: none !important; }
}

/* mobile menu sections */
.mobile-menu-section {
  padding: 0.75em 0;
  border-bottom: 1px solid var(--border);
}
.mobile-menu-section:last-child {
  border-bottom: none;
}
#mobile-menu-portfolio a {
  display: flex;
  align-items: center;
  gap: 1ch;
  padding: 0.75em 0;
  color: var(--fg);
  text-decoration: none;
  font-size: 0.95em;
  min-height: 44px;
  cursor: pointer;
}
#mobile-menu-portfolio a:hover { color: var(--accent); }
.mobile-menu-section-title {
  color: var(--dim);
  font-size: 0.7em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.75em;
}
.mobile-menu-divider {
  border-top: 1px solid var(--border);
  margin: 0.5em 0;
}
#mobile-portfolio-nav a {
  display: block;
  padding: 0.4em 0;
  color: var(--fg);
  text-decoration: none;
  font-size: 0.9em;
}
#mobile-portfolio-nav a:hover { color: var(--accent); }
.mobile-menu-item {
  display: flex;
  align-items: center;
  gap: 1ch;
  padding: 0.5em 0;
  color: var(--fg);
  text-decoration: none;
  font-size: 0.9em;
  min-height: 36px;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  width: 100%;
  text-align: left;
}

@media (max-width: 480px) {
  #dm-panel {
    width: 100vw;
    height: 100vh;
  }
  #top-bar {
    padding: 0 0.75em;
  }
  body {
    padding: 4em 1em 6em;
  }
  .template-grid {
    grid-template-columns: 1fr;
  }
  /* gallery grid single column on small phones */
  .gallery-grid {
    columns: 1;
  }
  /* feed compose fills width */
  .feed-compose textarea {
    min-height: 80px;
  }
  /* project cards no overflow */
  .project-card-header {
    flex-direction: column;
    gap: 0.25em;
  }
  .project-funding-text {
    flex-direction: column;
    gap: 0.15em;
  }
  .album img {
    width: 60px;
    height: 60px;
  }
  /* player compact on phones */
  #global-player {
    padding: 0 0.75em;
    gap: 0.75ch;
    font-size: 0.8em;
  }
  #global-player .player-info {
    max-width: 15ch;
  }
  /* modal overlays constrained */
  .wallet-dropdown, .domain-dropdown {
    max-width: 100vw;
  }
  /* library search fill */
  .library-search {
    width: 100%;
  }
  /* dock + player overlap fix */
  body:has(#global-player.active) .owner-dock { bottom: 44px; }
}

/* label */

.label-credit {
  color: var(--muted);
  margin-top: 1em;
}

.label-credit a {
  color: var(--fg);
}

/* projects */

.project-card {
  border: 1px solid var(--border);
  padding: 1.5em;
  margin-bottom: 1.5em;
}

.project-card:hover {
  border-color: var(--border-hover);
}

.project-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.75em;
}

.project-card-title {
  color: var(--accent);
  font-weight: normal;
  font-size: 1.1em;
  margin-bottom: 0.25em;
}

.project-type-badge {
  color: var(--muted);
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 1ch;
}

.project-status-badge {
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.project-deadline {
  color: var(--dim);
  font-size: 0.8em;
  white-space: nowrap;
}

.project-description {
  color: var(--fg);
  font-size: 0.9em;
  margin-bottom: 1em;
  line-height: 1.5;
}

.project-team {
  margin-bottom: 1em;
}

.project-proposer {
  color: var(--muted);
  font-size: 0.85em;
  display: block;
  margin-bottom: 0.5em;
}

.project-proposer a {
  color: var(--fg);
}

.project-team-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}

.project-team-member {
  font-size: 0.85em;
}

.project-team-member a {
  color: var(--fg);
}

.project-split {
  color: var(--dim);
  font-size: 0.85em;
}

.project-funding {
  margin-bottom: 0.75em;
}

.project-funding-text {
  display: flex;
  justify-content: space-between;
  font-size: 0.85em;
  color: var(--fg);
  margin-bottom: 0.25em;
}

.project-progress-bar {
  width: 100%;
  height: 6px;
  background: var(--surface);
  border-radius: 3px;
  overflow: hidden;
}

.project-progress-fill {
  height: 100%;
  background: var(--green);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.project-funders {
  margin-bottom: 0.75em;
  font-size: 0.85em;
}

.project-funder {
  color: var(--fg);
  margin-right: 1.5ch;
}

.project-actions {
  display: flex;
  gap: 0.75ch;
  align-items: center;
  margin-top: 0.75em;
}

.project-fund-input {
  width: 8ch;
  background: var(--surface);
  border: 1px solid var(--border-hover);
  color: var(--fg);
  font-family: inherit;
  font-size: 0.9em;
  padding: 0.4em 0.5ch;
}

.project-input {
  width: 100%;
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 8%, transparent);
  color: var(--fg);
  font-family: inherit;
  font-size: 1em;
  padding: 0.85em 1.2ch;
  border-radius: 6px;
  transition: border-color 0.15s, background 0.15s;
}

.project-input:focus {
  outline: none;
  border-color: var(--accent);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
}

.project-input::placeholder {
  color: var(--dim);
}

.pd-glass {
  border: 1px solid color-mix(in srgb, var(--fg) 6%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  padding: 1.25em 1.5em;
  margin-bottom: 1.5em;
}
.pd-section-title {
  color: var(--muted);
  font-size: 0.7em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.85em;
  display: flex;
  align-items: center;
  gap: 0.3ch;
}
.pd-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6em 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9em;
}
.pd-row:last-child { border-bottom: none; }
.pd-timeline-item {
  display: flex;
  gap: 0.75em;
  padding: 0.5em 0;
  font-size: 0.85em;
  align-items: flex-start;
}
.pd-timeline-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-top: 0.4em;
  flex-shrink: 0;
}
.pd-edit-form { display: none; }
.pd-edit-form.active { display: block; }
.pd-edit-field { margin-bottom: 1em; }
.pd-edit-label {
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 0.4em;
}
.pd-credential-badge {
  font-size: 0.65em;
  font-weight: 600;
  text-transform: uppercase;
  padding: 0.2em 0.5em;
  border-radius: 3px;
  letter-spacing: 0.05em;
}
.pd-chat-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
  font-size: 0.85em;
  color: var(--fg);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.4em 0.8em;
  background: color-mix(in srgb, var(--fg) 3%, transparent);
}
.pd-chat-link:hover { border-color: var(--muted); }

.pd-tier {
  padding: 1.25em;
  border-bottom: 1px solid var(--border);
}
.pd-tier:last-child { border-bottom: none; }
.pd-tier-badge {
  font-size: 0.65em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.25em 0.6em;
  border-radius: 4px;
  display: inline-block;
}
.pd-tier-name {
  color: var(--accent);
  font-weight: 600;
  font-size: 1.05em;
  margin: 0.35em 0 0.15em;
}
.pd-tier-desc {
  color: var(--muted);
  font-size: 0.85em;
  line-height: 1.5;
  margin-bottom: 0.75em;
}
.pd-tier-price {
  font-weight: 700;
  color: var(--accent);
  font-size: 1.15em;
  font-variant-numeric: tabular-nums;
}
.pd-tier-meta {
  color: var(--dim);
  font-size: 0.8em;
  margin-top: 0.15em;
}
.pd-tier-footer {
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin-top: 1em;
}
.pd-qty-stepper {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.pd-qty-stepper button {
  background: transparent;
  border: none;
  color: var(--fg);
  font-family: inherit;
  font-size: 1em;
  width: 2.2em;
  height: 2.2em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pd-qty-stepper button:hover { background: color-mix(in srgb, var(--fg) 6%, transparent); }
.pd-qty-stepper input {
  width: 3ch;
  text-align: center;
  background: transparent;
  border: none;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  color: var(--fg);
  font-family: inherit;
  font-size: 0.95em;
  padding: 0.4em 0;
  -moz-appearance: textfield;
}
.pd-qty-stepper input::-webkit-inner-spin-button,
.pd-qty-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pd-tier-cta {
  flex: 1;
  background: var(--fg);
  color: var(--bg);
  border: none;
  font-family: inherit;
  font-size: 0.9em;
  font-weight: 500;
  padding: 0.6em 1.5ch;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity 0.15s;
}
.pd-tier-cta:hover { opacity: 0.85; }
.pd-tier-cta:disabled { opacity: 0.4; cursor: not-allowed; }
.pd-tier-cta.sold-out {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--dim);
  cursor: default;
}
@media (max-width: 600px) {
  .pd-tier-footer { flex-direction: column; align-items: stretch; }
}

/* Floating label field groups */
.field-group {
  position: relative;
  margin-bottom: 1em;
}
.field-group label {
  position: absolute;
  left: 1ch;
  top: 0.85em;
  color: var(--dim);
  font-size: 0.95em;
  pointer-events: none;
  transition: all 0.15s ease;
  background: var(--bg);
  padding: 0 0.4ch;
  z-index: 1;
}
.field-group input:focus + label,
.field-group input:not(:placeholder-shown) + label,
.field-group select:focus + label,
.field-group textarea:focus + label,
.field-group textarea:not(:placeholder-shown) + label,
.field-group .project-input:focus-within + label {
  top: -0.75em;
  font-size: 0.75em;
  color: var(--muted);
}
.field-group .project-input {
  margin-bottom: 0;
}

/* Tier card layout */
.propose-tier-row {
  margin-bottom: 0.75em;
}
.propose-tier-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.25em 1em 0.75em;
}
.propose-tier-card .remove-tier-btn {
  position: absolute;
  top: 0.4em;
  right: 0.5em;
  background: none;
  border: none;
  color: var(--dim);
  cursor: pointer;
  font-size: 1.2em;
  line-height: 1;
  z-index: 1;
}
.propose-tier-card .remove-tier-btn:hover {
  color: var(--red);
}
.tier-main-fields {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: 0.5em;
  margin-bottom: 0.25em;
}
.tier-main-fields .field-group {
  margin-bottom: 0.5em;
}
.tier-event-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5em;
}
.tier-event-details .field-group {
  margin-bottom: 0.5em;
}
.field-group .select-label {
  top: -0.75em;
  font-size: 0.75em;
  color: var(--muted);
}
#propose-image-add:hover {
  border-color: var(--fg);
  color: var(--fg);
}
/* Settings chevron rotation */
.propose-settings-chevron {
  transition: transform 0.2s;
}
details[open] .propose-settings-chevron {
  transform: rotate(180deg);
}
.propose-tier-row:only-child .remove-tier-btn,
.propose-team-row:only-child .remove-team-btn {
  opacity: 0.2;
  pointer-events: none;
}
.propose-team-row {
  display: grid;
  grid-template-columns: 3fr 1fr 2ch 1.5em;
  gap: 0.5em;
  margin-bottom: 0.5em;
  align-items: center;
}

.project-label {
  color: var(--fg);
  font-size: 1.1em;
  font-weight: 600;
  display: block;
  margin-bottom: 0.75em;
}

/* card-style selectable options for project settings (revenue share, completion mode) */
.project-card-group {
  margin: 1em 0;
  padding: 1.25em;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  border-radius: 8px;
}
.project-card-group + .project-card-group {
  margin-top: 0.75em;
}
.project-card-group-title {
  color: var(--accent);
  font-size: 0.85em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.25em;
}
.project-card-group-hint {
  color: var(--muted);
  font-size: 0.8em;
  margin: 0 0 1em;
  line-height: 1.4;
}

/* card option (styled checkbox/radio replacement) */
.project-option {
  display: block;
  position: relative;
  padding: 0.85em 1em 0.85em 2.75em;
  border: 1px solid var(--border-hover);
  border-radius: 6px;
  background: transparent;
  color: var(--fg);
  font-size: 0.9em;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  margin-bottom: 0.5em;
  border-radius: 8px;
}
.project-option:last-child { margin-bottom: 0; }
.project-option:hover {
  border-color: var(--muted);
}
.project-option .project-option-title {
  display: block;
  color: var(--fg);
  font-weight: normal;
}
.project-option .project-option-desc {
  display: block;
  color: var(--muted);
  font-size: 0.8em;
  margin-top: 0.25em;
  line-height: 1.4;
}

/* hide native input, render the box ourselves */
.project-option input[type="radio"],
.project-option input[type="checkbox"] {
  position: absolute;
  left: 1em;
  top: 0.95em;
  width: 14px;
  height: 14px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--border-hover);
  cursor: pointer;
  outline: none;
}
.project-option input[type="radio"]:hover,
.project-option input[type="checkbox"]:hover {
  border-color: var(--muted);
}
.project-option input[type="radio"]:checked,
.project-option input[type="checkbox"]:checked {
  border-color: var(--accent);
  background: var(--accent);
}
/* checkmark for checked state */
.project-option input[type="radio"]:checked::after,
.project-option input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0px;
  width: 4px;
  height: 8px;
  border: solid var(--bg, #0a0a0a);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.project-option:has(input:checked) {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.02);
}

/* compact card group for inline number inputs (e.g. dispute window) */
.project-card-row {
  display: flex;
  align-items: center;
  gap: 1ch;
  margin-top: 0.5em;
}
.project-card-row .project-input {
  width: 6ch;
  text-align: center;
}

/* settings: card-style status row (security, biometric, wallet links, etc.) */
.settings-status-card {
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 1em 1.25em;
  border: 1px solid var(--border);
  background: var(--surface, #0a0a0a);
  margin-top: 0.5em;
}
.settings-status-card .status-body {
  flex: 1;
  min-width: 0;
}
.settings-status-card .status-title {
  display: flex;
  align-items: center;
  gap: 0.6em;
  color: var(--fg);
  font-size: 0.9em;
}
.settings-status-card .status-desc {
  color: var(--muted);
  font-size: 0.78em;
  line-height: 1.45;
  margin-top: 0.3em;
}
.settings-status-card .status-action {
  flex-shrink: 0;
}

/* glowing status dot — green pulse when on, dim when off */
.status-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot.on {
  background: #4ade80;
  box-shadow: 0 0 6px rgba(74, 222, 128, 0.9), 0 0 14px rgba(74, 222, 128, 0.45);
  animation: status-dot-pulse 2.4s ease-in-out infinite;
}
.status-dot.off {
  background: transparent;
  border: 1px solid var(--border-hover, #333);
  box-shadow: none;
}
@keyframes status-dot-pulse {
  0%, 100% { box-shadow: 0 0 6px rgba(74, 222, 128, 0.9), 0 0 14px rgba(74, 222, 128, 0.45); }
  50%      { box-shadow: 0 0 4px rgba(74, 222, 128, 0.6), 0 0 10px rgba(74, 222, 128, 0.25); }
}
@media (prefers-reduced-motion: reduce) {
  .status-dot.on { animation: none; }
}

/* tiers */

.project-tiers {
  display: flex;
  gap: 1em;
  flex-wrap: wrap;
  margin-top: 0.75em;
}

.tier-card {
  border: 1px solid var(--border);
  padding: 1em;
  min-width: 160px;
  flex: 1;
}

.tier-card:hover {
  border-color: var(--border-hover);
}

.tier-card.tier-sold-out {
  opacity: 0.5;
}

.tier-header {
  margin-bottom: 0.5em;
}

.tier-name {
  color: var(--accent);
  font-size: 0.9em;
}

.tier-badge {
  font-size: 0.65em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15em 0.5em;
  border-radius: 2px;
  margin-right: 0.5ch;
}

.tier-ticket {
  background: var(--surface);
  color: var(--green);
  border: 1px solid var(--border-hover);
}

.tier-producer {
  background: var(--surface);
  color: var(--purple);
  border: 1px solid var(--border-hover);
}

.tier-price {
  color: var(--fg);
  font-size: 0.9em;
}

.tier-supply {
  color: var(--dim);
  font-size: 0.8em;
  margin-bottom: 0.5em;
}

.tier-actions {
  display: flex;
  gap: 0.5ch;
  align-items: center;
}

.domain-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border-hover);
  z-index: 10;
}

.domain-option {
  padding: 0.4em 1ch;
  color: var(--fg);
  cursor: pointer;
  font-size: 0.9em;
}

.domain-option:hover {
  background: var(--border-hover);
  color: var(--accent);
}

.tier-qty {
  width: 4ch;
  background: var(--surface);
  border: 1px solid var(--border-hover);
  color: var(--fg);
  font-family: inherit;
  font-size: 0.85em;
  padding: 0.3em 0.3ch;
  text-align: center;
}

/* feed */

.feed-balance {
  padding: 0.75em 0;
  margin-bottom: 1em;
  border-bottom: 1px solid var(--border);
  font-size: 0.9em;
  color: var(--fg);
}

.feed-compose {
  margin-bottom: 2em;
  padding-bottom: 1.5em;
  border-bottom: 1px solid var(--border);
}

.feed-compose input,
.feed-compose textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border-hover);
  color: var(--fg);
  font-family: inherit;
  font-size: 1em;
  padding: 0.5em 1ch;
  margin-bottom: 0.5em;
  resize: vertical;
}

.feed-compose input:focus,
.feed-compose textarea:focus {
  outline: none;
  border-color: var(--muted);
}

.feed-item {
  padding: 0;
  border-bottom: none;
}

.feed-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5em;
}

.feed-author {
  color: var(--accent);
  font-size: 0.85em;
}

.feed-time {
  color: var(--dim);
  font-size: 0.8em;
}

.feed-title {
  color: var(--accent);
  font-weight: normal;
  font-size: 1.1em;
  margin-bottom: 0.5em;
}

.feed-content {
  color: var(--fg);
  font-size: 0.9em;
  line-height: 1.6;
  max-height: 4.8em;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.3s ease;
  cursor: pointer;
}

.feed-content.expanded {
  max-height: none;
}

.feed-content-toggle {
  color: var(--dim);
  font-size: 0.8em;
  cursor: pointer;
  margin-top: 0.25em;
}

.feed-item.expandable {
  cursor: pointer;
}

.feed-project .project-funding {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.feed-project.expanded .project-funding {
  max-height: 200px;
  opacity: 1;
}

.feed-activity {
  padding: 0.75em 0;
  border-bottom: 1px solid var(--border);
}

.feed-activity-text {
  color: var(--muted);
  font-size: 0.85em;
}

.feed-activity-text .feed-author {
  color: var(--fg);
}

/* highlights */

.highlights-section {
  margin-bottom: 2.5em;
}
.highlights-view-all {
  display: inline-block;
  margin-top: 0.75em;
  color: var(--muted);
  font-size: 0.85em;
  text-decoration: none;
  transition: color 0.15s;
}
.highlights-view-all:hover {
  color: var(--accent);
}

.highlights-section h3 {
  color: var(--muted);
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.75em;
}

/* Music module discography highlights: 2x2 grid on desktop, 1 column on mobile */
.album-highlight-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2em 2ch;
}
/* Highlight albums: stacked layout (image on top, text below) matching
   the video grid's visual pattern. Overrides the default .album horizontal
   flex for the highlights section only. */
.album-highlight-grid .album.album-highlight {
  margin-bottom: 0;
  display: block;
}
.album-highlight-grid .album.album-highlight > div[style*="position:relative"] {
  display: inline-block;
  overflow: hidden;
  border-radius: 4px;
}
/* Cap album art at 240px so it doesn't dominate the page — the video
   thumbnails are naturally bounded by 16:9 aspect ratio but album art is
   1:1 and fills the full column width without a cap, which feels oversized
   relative to the credits/video sections around it. */
.album-highlight-grid .album.album-highlight img {
  width: 100%;
  max-width: 240px;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  margin-bottom: 0.25em;
}
.album-highlight-grid .album.album-highlight .album-info {
  font-size: 0.9em;
}
@media (max-width: 768px) {
  .album-highlight-grid {
    grid-template-columns: 1fr;
  }
}

/* domain search */

.domain-option-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75em 0;
  border-bottom: 1px solid var(--border);
  gap: 1em;
}

/* library */

.library-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-bottom: 1.5em;
}

.library-tag {
  color: var(--dim);
  font-size: 0.75em;
  padding: 0.2em 0.6em;
  border: 1px solid var(--border);
  cursor: pointer;
}

.library-tag:hover {
  color: var(--fg);
  border-color: var(--border-hover);
}

.library-item {
  padding: 1em 0;
  border-bottom: 1px solid var(--border);
}

.library-item-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.25em;
}

.library-item-title {
  color: var(--accent);
  font-size: 1em;
}

.library-item-date {
  color: var(--dim);
  font-size: 0.8em;
}

.library-item-meta {
  font-size: 0.85em;
  color: var(--muted);
  margin-bottom: 0.5em;
}

.library-item-author {
  margin-right: 1.5ch;
}

.library-item-contributor a {
  color: var(--muted);
}

.library-item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em;
}

.library-item-ipfs {
  color: var(--dim);
  font-size: 0.7em;
  font-family: monospace;
  margin-left: 0.5ch;
}

/* profile */

.profile {
  max-width: 640px;
}

.profile-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2em;
  margin-bottom: 1.5em;
}

.profile-identity {
  flex: 1;
  min-width: 0;
}

.profile-domain {
  color: var(--fg);
  font-weight: normal;
  font-size: 1.6em;
  margin: 0 0 0.15em 0;
  line-height: 1.2;
}

.profile-addr {
  display: block;
  color: var(--dim);
  font-size: 0.7em;
  opacity: 0.6;
  margin-bottom: 0.5em;
}

.profile-visit {
  color: var(--muted);
  font-size: 0.8em;
  text-decoration: none;
}

.profile-visit:hover {
  color: var(--accent);
}

.profile-actions {
  display: flex;
  gap: 0.5ch;
  flex-shrink: 0;
  padding-top: 0.3em;
}

.profile-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: inherit;
  font-size: 0.8em;
  padding: 0.35em 1.2ch;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.profile-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.profile-btn-follow {
  border-color: var(--accent);
  color: var(--accent);
}

.profile-btn-follow.profile-btn-active {
  background: var(--accent);
  color: var(--bg, #111);
}

.profile-btn-follow.profile-btn-active:hover {
  background: transparent;
  color: var(--accent);
}

.profile-btn-dm {
  border-color: var(--muted);
  color: var(--muted);
}

.profile-btn-dm:hover {
  border-color: var(--fg);
  color: var(--fg);
}

.profile-btn-block {
  border-color: transparent;
  color: var(--dim);
  font-size: 0.7em;
  opacity: 0.5;
}

.profile-btn-block:hover {
  opacity: 1;
  color: #ef4444;
  border-color: #ef4444;
}

.profile-btn-block.profile-btn-blocked {
  opacity: 0.7;
  color: var(--muted);
  border-color: var(--muted);
}

.profile-btn-load {
  margin-top: 0.75em;
  font-size: 0.75em;
  color: var(--muted);
}

.profile-stats {
  display: flex;
  align-items: center;
  gap: 0.7ch;
  color: var(--dim);
  font-size: 0.8em;
  margin-bottom: 2.5em;
}

.profile-stats-sep {
  opacity: 0.4;
}

.profile-section {
  margin-bottom: 2.5em;
}

.profile-section h3 {
  color: var(--dim);
  font-size: 0.75em;
  text-transform: lowercase;
  letter-spacing: 0.05em;
  margin-bottom: 1em;
  font-weight: normal;
}

.credential-item {
  padding: 0.5em 0;
  font-size: 0.9em;
}

.credential-item + .credential-item {
  border-top: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
}

.credential-role {
  color: var(--purple);
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 1ch;
}

.credential-project {
  color: var(--accent);
}

.credential-type {
  color: var(--dim);
  font-size: 0.8em;
  margin-left: 1ch;
}

/* Collection two-column layout */
body:has(.collection-container) {
  max-width: 1200px;
  padding-left: 1em;
  padding-right: 1em;
}
.collection-container {
  display: flex;
  min-height: calc(100vh - 4em);
  padding: 0 1em;
}
.collection-sidebar {
  width: 200px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  padding: 1em 0.75em;
  overflow-y: auto;
  max-height: calc(100vh - 4em);
  position: sticky;
  top: 3.5em;
}
.collection-sidebar .project-input {
  margin-bottom: 0.75em;
  font-size: 0.85em;
  padding: 0.6em 0.8ch;
}
.collection-main {
  flex: 1;
  padding: 1em 1.5em;
  min-width: 0;
}
.collection-main-header {
  display: flex;
  align-items: center;
  gap: 0.5ch;
  margin-bottom: 1em;
  font-size: 1.1em;
  font-weight: 600;
}
.collection-artist-item {
  padding: 0.6em 0.75em;
  cursor: pointer;
  border-radius: 8px;
  font-size: 0.9em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.1s;
  color: var(--fg);
}
.collection-artist-item:hover {
  background: var(--border);
}
.collection-artist-item.active {
  background: var(--surface);
  color: var(--accent);
}
.collection-back-btn {
  display: none;
  background: none;
  border: none;
  color: var(--fg);
  cursor: pointer;
  font-size: 1.2em;
  padding: 0.2em;
  align-items: center;
}

@media (max-width: 768px) {
  .collection-container {
    flex-direction: column;
  }
  .collection-sidebar {
    width: 100%;
    max-height: none;
    position: static;
    border-right: none;
  }
  .collection-main {
    display: none;
    padding: 1em;
  }
  .collection-container.collection-active .collection-sidebar {
    display: none;
  }
  .collection-container.collection-active .collection-main {
    display: block;
  }
  .collection-back-btn {
    display: inline-flex !important;
  }
}

/* Collection grid/list views */
.collection-grid-view { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; }
.collection-list-view { display: flex; flex-direction: column; gap: 0.5em; }

.collection-card { border: 1px solid color-mix(in srgb, var(--fg) 6%, transparent); overflow: hidden; border-radius: 12px; background: color-mix(in srgb, var(--fg) 4%, transparent); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); }
.collection-card .card-art { aspect-ratio: 1; overflow: hidden; background: var(--surface); position: relative; display: flex; align-items: center; justify-content: center; }
.collection-card .card-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.collection-card .card-info { padding: 0.6em 0.75em; }
.collection-card .card-title { color: var(--fg); font-weight: 600; font-size: 0.85em; text-decoration: none; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.collection-card .card-artist { color: var(--muted); font-size: 0.75em; text-decoration: none; display: block; margin-top: 0.15em; }
.collection-card .card-actions { display: flex; gap: 0.5ch; margin-top: 0.4em; align-items: center; }

.card-type-badge { position: absolute; top: 0.4em; right: 0.4em; background: rgba(0,0,0,0.7); color: #c0c0c0; font-size: 0.65em; padding: 0.15em 0.5ch; text-transform: uppercase; letter-spacing: 0.05em; }

/* Collection card span-2 for video and album types */
/* All cards same size in 2-column grid — no spanning */
.collection-card[data-span="2"] { grid-column: span 1; }
.collection-card[data-span="2"] .card-art { aspect-ratio: 1; }
.collection-card[data-media-type="video"] { grid-column: span 1; }
.collection-card[data-media-type="video"] .card-art { aspect-ratio: 2/1; }

.collection-row { display: flex; gap: 1ch; padding: 0.6em 0.75em; border: 1px solid var(--border); align-items: center; }
.collection-row .row-art { width: 48px; height: 48px; flex-shrink: 0; overflow: hidden; background: var(--surface); display: flex; align-items: center; justify-content: center; }
.collection-row .row-art img { width: 100%; height: 100%; object-fit: cover; }
.collection-row .row-info { flex: 1; min-width: 0; }
.collection-row .card-title { color: var(--fg); font-size: 0.9em; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.collection-row .card-artist { color: var(--muted); font-size: 0.8em; text-decoration: none; }
.collection-row .card-actions { display: flex; gap: 0.75ch; align-items: center; flex-shrink: 0; }
.collection-row .row-download { color: var(--dim); font-size: 0.9em; }

/* Works for sale — card grid */
.works-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1em;
}
@media (max-width: 768px) { .works-grid { grid-template-columns: repeat(2, 1fr); } }
.works-card {
  border: 1px solid color-mix(in srgb, var(--fg) 6%, transparent);
  border-radius: 12px;
  overflow: hidden;
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
}
.works-card-art {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
  background: var(--surface);
}
.works-card-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.works-card-art a { display: block; width: 100%; height: 100%; }
.works-card-info { padding: 1em; display: flex; flex-direction: column; gap: 0.25em; }
.works-card-title {
  color: var(--fg);
  font-weight: 600;
  font-size: 1.15em;
  text-decoration: none;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.works-card-artist { color: var(--dim); font-size: 0.8em; }
.works-card-meta { color: var(--muted); font-size: 0.8em; }
.works-card-actions { display: flex; gap: 0.5ch; margin-top: 0.35em; justify-content: flex-end; align-items: center; }

/* Span-2 cards (video, album) — aspect-ratio 2/1 so art height matches 1-col square cards */
.works-card[data-span="2"] { grid-column: span 2; }
.works-card[data-span="2"] .works-card-art { aspect-ratio: 2/1; }

/* Album badge overlay */
.works-album-badge { position: absolute; top: 0.4em; right: 0.4em; background: rgba(0,0,0,0.7); color: #fff; font-size: 0.65em; padding: 0.2em 0.6em; border-radius: 2px; z-index: 1; }
/* Video play centering in cards — override global .video-lazy aspect-ratio */
.works-card .works-card-video-overlay.video-lazy { position: absolute; inset: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; aspect-ratio: unset; max-width: none; }
.works-card-play.media-play-overlay,
.works-card-play.media-play-overlay:hover { position: static; top: auto; left: auto; transform: none; }
.works-card-play.media-play-overlay:hover { transform: scale(1.15); }

.collection-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1em; flex-wrap: wrap; gap: 0.5em; }
.collection-view-toggle { display: flex; gap: 0.25ch; }
.view-toggle-btn { background: none; border: 1px solid var(--border); color: var(--muted); font-size: 1em; padding: 0.3em 0.5em; cursor: pointer; display: flex; align-items: center; }
.view-toggle-btn.active { border-color: var(--accent); color: var(--accent); }

/* Passport stamps — circular wax-seal style */
.stamps-section { border: 1px solid var(--border); padding: 0.75em 1em; margin-bottom: 1.5em; }
.stamps-row { display: flex; gap: 0.5em; overflow-x: auto; padding: 0.5em 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; align-items: center; }
.stamps-row::-webkit-scrollbar { display: none; }
.stamp { width: 56px; height: 56px; flex-shrink: 0; border-radius: 50%; position: relative; overflow: hidden; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; border: 2px solid var(--border); }
.stamp:hover { transform: scale(1.15); box-shadow: 0 0 0 2px var(--accent); z-index: 1; }
.stamp-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.25; }
.stamp-content { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.2em; }
.stamp-artist { font-weight: 700; font-size: 0.5em; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.stamp-action { color: var(--muted); font-size: 0.4em; text-align: center; }
.stamp-hash, .stamp-date { display: none; }
.stamps-label { color: var(--dim); font-size: 0.75em; flex-shrink: 0; margin-right: 0.5em; }

.collection-badges { display: flex; gap: 0.75ch; margin-bottom: 1.25em; flex-wrap: wrap; }
.credential-badge { display: inline-flex; align-items: center; gap: 0.5ch; padding: 0.5em 1ch; border: 1px solid var(--border); font-size: 0.85em; color: var(--fg); background: rgba(255,255,255,0.03); }
.credential-badge i { color: var(--accent); font-size: 1.1em; }
.badge-backed { border-color: var(--green, #4ade80); }
.badge-backed i { color: var(--green, #4ade80); }
.badge-contributed i { color: #a78bfa; }
.badge-contributed { border-color: #a78bfa; }

/* Album grouping in collection */
.collection-album-card .card-type-badge { background: var(--accent); color: var(--bg); font-weight: 600; }
.collection-album-list { border: 1px solid color-mix(in srgb, var(--fg) 6%, transparent); border-radius: 12px; margin-bottom: 0.75em; overflow: hidden; background: color-mix(in srgb, var(--fg) 4%, transparent); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); }
.album-list-header { display: flex; gap: 1em; padding: 0.75em; align-items: center; border-bottom: 1px solid color-mix(in srgb, var(--fg) 8%, transparent); }
.album-list-art { width: 80px; height: 80px; object-fit: cover; flex-shrink: 0; }
.album-list-info { display: flex; flex-direction: column; gap: 0.15em; }
.album-tracklist { padding: 0; }
.album-track { display: flex; align-items: center; gap: 0.75ch; padding: 0.5em 0.75em; border-bottom: 1px solid color-mix(in srgb, var(--fg) 6%, transparent); }
.album-track:last-child { border-bottom: none; }
.album-track .track-num { color: var(--dim); font-size: 0.8em; min-width: 2ch; text-align: right; }
.album-track .track-title { flex: 1; font-size: 0.9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.album-track .track-dl { color: var(--dim); font-size: 0.85em; flex-shrink: 0; }

@media (max-width: 480px) {
  .collection-grid-view { grid-template-columns: repeat(2, 1fr); gap: 0.5em; }
  .collection-card .card-info { padding: 0.4em 0.5em; }
  .collection-card .card-title { font-size: 0.75em; }
}

.profile-post-card {
  display: block;
  text-decoration: none;
  padding: 0.75em 0;
  transition: opacity 0.15s;
}

.profile-post-card + .profile-post-card {
  border-top: 1px solid color-mix(in srgb, var(--border) 30%, transparent);
}

.profile-post-card:hover {
  opacity: 0.75;
}

.profile-post-title {
  display: block;
  color: var(--fg);
  font-size: 0.95em;
  margin-bottom: 0.2em;
}

.profile-post-date {
  display: block;
  color: var(--dim);
  font-size: 0.75em;
  margin-bottom: 0.3em;
}

.profile-post-preview {
  display: block;
  color: var(--muted);
  font-size: 0.8em;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}

.profile-chip {
  display: inline-block;
  color: var(--fg);
  font-size: 0.8em;
  padding: 0.25em 0.8ch;
  border: 1px solid var(--border);
  border-radius: 100px;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}

.profile-chip:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.profile-back {
  margin-top: 3em;
  padding-top: 1em;
}

.profile-back a {
  color: var(--dim);
  font-size: 0.8em;
  text-decoration: none;
}

.profile-back a:hover {
  color: var(--accent);
}

/* feed mode — owner is logged in, site becomes a feed */

.feed-mode #portfolio-highlights,
.feed-mode-pending #portfolio-highlights,
.feed-mode #portfolio-cv,
.feed-mode-pending #portfolio-cv {
  display: none !important;
}

#feed {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  gap: 1.5em;
}

.feed-mode #feed,
.feed-mode-pending #feed {
  display: flex !important;
  flex-direction: column;
  gap: 1.5em;
}

.feed-mode .portfolio-nav,
.feed-mode-pending .portfolio-nav,
.feed-mode footer,
.feed-mode-pending footer {
  display: none !important;
}

/* left side nav — replaces footer nav */
.portfolio-nav {
  position: fixed;
  left: 0;
  right: auto; /* override the bottom-bar rule that sets right:0 — without this
                   the nav stretches full-width as an invisible click-blocking overlay */
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4em;
  padding: 0 2em;
  z-index: 150;
  bottom: auto;
  border-top: none;
  background: none;
}

.portfolio-nav a {
  color: var(--dim);
  font-size: 0.8em;
  text-decoration: none;
  margin: 0;
}

.portfolio-nav a:hover {
  color: var(--accent);
}

/* hide left side nav when dock is visible (dock replaces it with tools + section links) */
body:has(.owner-dock) .portfolio-nav {
  display: none !important;
}

/* mobile: revert left-side nav to bottom bar */
@media (max-width: 768px) {
  .portfolio-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    transform: none;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0.75em 1em;
    background: var(--bg);
    border-top: 1px solid var(--border);
    z-index: 150;
  }
}

/* compact header in feed mode — small name, hide bio */
.feed-mode header:not(#top-bar),
.feed-mode-pending header:not(#top-bar) {
  margin-bottom: 0 !important;
}

.feed-mode header:not(#top-bar) h1,
.feed-mode-pending header:not(#top-bar) h1 {
  font-size: 1.3em !important;
  margin-bottom: 0.25em !important;
}

.feed-mode header:not(#top-bar) .bio,
.feed-mode header:not(#top-bar) .artist-bio,
.feed-mode-pending header:not(#top-bar) .bio,
.feed-mode-pending header:not(#top-bar) .artist-bio {
  display: none !important;
}
.feed-mode .header-pic,
.feed-mode-pending .header-pic {
  display: none !important;
}

/* blog post cards in feed — override the generic .feed-item border/padding
   since the card has its own contained styling. Without this the .feed-item
   border-bottom + the card's border stack visually into a double outline. */
.feed-item.feed-post-card {
  border-bottom: none;
  padding: 0;
  margin-bottom: 0.75em;
}

/* Rich media cards in feed */
.feed-media-card {
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  padding: 0;
  display: flex;
  gap: 0;
}
.feed-media-card-art {
  flex-shrink: 0;
  width: 160px;
  min-height: 160px;
  background: var(--surface);
  align-self: stretch;
  overflow: hidden;
}
.feed-media-card-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feed-media-card-info {
  flex: 1;
  padding: 1em 1.25em;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
/* Glass effect on bordered feed items (listed media, library cards) */
.feed-item[style*="border"] {
  border-color: color-mix(in srgb, var(--fg) 6%, transparent) !important;
  border-radius: 12px;
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
}
.feed-media-card-actions { display: flex; gap: 0.75ch; align-items: center; flex-wrap: wrap; margin-top: 0.25em; }
/* Collected cards — horizontal, square art with play overlay */
.feed-collected-card {
  border: 1px solid color-mix(in srgb, var(--fg) 6%, transparent);
  border-radius: 12px;
  overflow: hidden;
  padding: 0;
  display: flex;
  gap: 0;
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
}
.feed-collected-art-wrap {
  flex-shrink: 0;
  width: 160px;
  height: 160px;
  position: relative;
}
.feed-collected-art-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Shared play overlay — used across feed, collection, works, supporter cards */
.media-play-overlay,
.feed-collected-play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0,0,0,0.65);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
  transition: transform 0.15s, background 0.15s;
  z-index: 2;
}
.media-play-overlay:hover,
.feed-collected-play-overlay:hover { transform: translate(-50%, -50%) scale(1.15); background: rgba(0,0,0,0.85); }
/* Video play overlay — larger, always visible */
.media-play-overlay--video {
  width: 56px;
  height: 56px;
  font-size: 22px;
}
.feed-collected-body {
  flex: 1;
  padding: 1em 1.25em;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  justify-content: center;
}
.feed-collected-actions {
  display: flex;
  gap: 0.5em;
  margin-top: 0.4em;
}
/* collected-btn now just aliases feed-card-btn */
.feed-collected-btn { /* legacy — use feed-card-btn instead */ }
.feed-collected-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3ch;
  font-size: 0.75em;
  background: var(--fg, #222);
  color: var(--bg, #fff);
  padding: 0.2em 0.7ch;
  border-radius: 3px;
  font-weight: 600;
}
@media (max-width: 600px) {
  .feed-collected-card { flex-direction: column; }
  .feed-collected-art-wrap { width: 100% !important; height: auto !important; }
  .feed-collected-art-wrap img:not(.feed-card-avatar) { width: 100% !important; height: auto !important; aspect-ratio: 1; }
}

/* Shared markdown editor */
.md-editor-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.3em;
}
.md-fmt {
  background: none;
  border: 1px solid var(--border);
  color: var(--fg);
  cursor: pointer;
  padding: 0.25em 0.6ch;
  font-family: inherit;
  font-size: 0.85em;
  border-radius: 3px;
  transition: border-color 0.15s;
}
.md-fmt:hover { border-color: var(--accent); }

/* Universal card action button */
.feed-card-btn {
  background: var(--fg, #222);
  color: var(--bg, #fff);
  border: none;
  font-family: inherit;
  font-size: 0.9em;
  font-weight: 600;
  padding: 0.6em 2.5ch;
  cursor: pointer;
  border-radius: 4px;
  transition: opacity 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4ch;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}
.feed-card-btn:hover { opacity: 0.75; }
.feed-card-btn.green { background: var(--accent, #a78bfa); color: var(--bg, #fff); }
.feed-price-label { color: var(--dim); font-size: 0.8em; }
.feed-buy-btn { /* inherits from .feed-card-btn.green */ }
.feed-buy-btn:disabled { opacity: 0.5; cursor: default; }
.feed-batch-tracklist { margin-top: 0.5em; font-size: 0.85em; }
.feed-batch-track { display: flex; align-items: center; gap: 0.75ch; padding: 0.3em 0; border-bottom: 1px solid var(--border); }
.feed-batch-track:last-child { border-bottom: none; }
.feed-batch-track-num { color: var(--dim); font-size: 0.85em; min-width: 2ch; text-align: right; }

/* batch card: larger art for album covers */
.feed-batch-card .feed-media-card-art { width: 160px; min-height: 160px; }

@media (max-width: 600px) {
  .feed-media-card { flex-direction: column; }
  .feed-media-card-art { width: 100% !important; min-height: 0; max-height: none; }
  .feed-media-card-art img { width: 100%; height: auto; aspect-ratio: 1; }
  .feed-batch-card .feed-media-card-art { width: 100% !important; min-height: 0; }
}

.feed-article {
  border: 1px solid var(--border);
  padding: 0;
  margin-bottom: 0;
  overflow: hidden;
  border-radius: 6px;
}

.feed-item {
  margin-bottom: 0;
}

.feed-separator {
  text-align: center;
  color: var(--dim);
  font-size: 0.6em;
  padding: 1em 0;
  user-select: none;
}

.feed-separator:last-child {
  display: none;
}

/* Flush media at top of post cards */
.feed-article .video-lazy {
  width: 100% !important;
  display: block !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
.feed-article .video-lazy video,
.feed-article .video-lazy img {
  width: 100% !important;
  display: block;
  border-radius: 0 !important;
}
.feed-article > a > img {
  width: 100%;
  display: block;
  border-radius: 0;
  margin: 0;
  max-height: 350px;
  object-fit: cover;
}

.feed-media-wrap {
  display: block;
  line-height: 0;
  font-size: 0;
}
.feed-media-wrap .video-lazy > div {
  display: none !important;
}
.feed-media-wrap .video-lazy {
  margin: 0 !important;
  border-radius: 0 !important;
}

.feed-article:hover {
  border-color: var(--border-hover, var(--dim));
}

/* Reply cards in feed — visually subordinate to original posts */
.feed-reply-card {
  border: 1px solid var(--border);
  border-left: 2px solid var(--dim);
  padding: 0.75em 1em !important;
  margin-bottom: 0.5em;
  opacity: 0.85;
}

.feed-reply-card:hover {
  border-color: var(--border-hover, var(--dim));
  opacity: 1;
}

.feed-reply-context {
  color: var(--dim);
  font-size: 0.8em;
  margin-bottom: 0.4em;
}

.feed-reply-context a {
  color: var(--muted);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 0.15em;
}

/* Reply-in-context on post detail page */
.post-parent-quote {
  border: 1px solid var(--border);
  border-left: 3px solid var(--dim);
  padding: 1em 1.25em;
  margin-bottom: 1.5em;
  font-size: 0.9em;
}

.post-parent-quote .parent-meta {
  color: var(--dim);
  font-size: 0.85em;
  margin-bottom: 0.5em;
}

.post-parent-quote .parent-meta a {
  color: var(--muted);
}

.post-parent-quote .parent-title {
  font-weight: bold;
  color: var(--fg);
  margin-bottom: 0.4em;
}

.post-parent-quote .parent-preview {
  color: var(--muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-parent-quote .parent-link {
  color: var(--accent);
  font-size: 0.85em;
  margin-top: 0.5em;
  display: inline-block;
}

.post-reply-separator {
  color: var(--dim);
  font-size: 0.85em;
  margin: 1em 0;
  padding-bottom: 0.5em;
  border-bottom: 1px solid var(--border);
}

/* Blog index reply count */
.post-reply-count {
  color: var(--dim);
  font-size: 0.85em;
  margin-left: 0.5ch;
  cursor: pointer;
}

.post-reply-count:hover {
  color: var(--muted);
}

.post-replies-inline {
  list-style: none;
  padding: 0;
  margin: 0.25em 0 0 1.5em;
  font-size: 0.9em;
}

.post-replies-inline li {
  padding: 0.15em 0;
  color: var(--dim);
}

.post-replies-inline li a {
  color: var(--muted);
}

/* Blog post pages — readable typography,
   comfortable reading width, and paragraph indentation. */
.post-page-body {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.2em;
  line-height: 1.9;
  max-width: 65ch;
  padding: 0;
  color: var(--fg);
}

.post-page-body p {
  margin-bottom: 1.8em;
}

.post-page-body h2, .post-page-body h3 {
  margin-top: 2.5em;
  margin-bottom: 0.75em;
  color: var(--fg);
  letter-spacing: -0.02em;
}

.post-page-body blockquote {
  border-left: 3px solid var(--accent);
  margin: 2em 0;
  padding: 0.75em 0 0.75em 1.5em;
  color: var(--muted);
  font-style: italic;
  line-height: 1.7;
}

.post-page-body hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 3em 0;
}

/* project cards in feed — prominent, encouraging */

.feed-project-card {
  border: 1px solid var(--border) !important;
  padding: 1.5em !important;
  margin: 0.5em 0;
  background: var(--surface);
}

.feed-project-card:hover {
  border-color: var(--border-hover) !important;
}

.feed-project-type {
  color: var(--dim);
  font-size: 0.7em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.5em;
}

.feed-project-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.25em;
}

.feed-project-title {
  color: var(--accent);
  font-size: 1.3em;
  font-weight: normal;
  text-decoration: none;
}

.feed-project-title:hover {
  text-decoration: underline;
}

.feed-project-proposer {
  color: var(--muted);
  font-size: 0.8em;
  margin-bottom: 0.75em;
}

.feed-project-proposer a {
  color: var(--fg);
}

.feed-project-desc {
  color: var(--fg);
  font-size: 0.9em;
  line-height: 1.5;
  margin-bottom: 1em;
  max-width: 65ch;
}

.feed-project-funding {
  padding-top: 0.75em;
  border-top: 1px solid var(--border);
}

.feed-project-funding-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85em;
  margin-bottom: 0.4em;
}

.feed-project-funded {
  color: var(--fg);
}

/* write button in top bar */
#write-toggle:hover {
  color: var(--accent) !important;
}

/* compose panel — full screen slide-up */
.compose-panel {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--bg);
  transform: translateY(100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
}

.compose-panel.compose-open {
  transform: translateY(0);
}

.compose-panel.compose-full-page {
  position: relative;
  transform: none;
  z-index: auto;
  min-height: calc(100vh - 4em);
  inset: auto;
}
.compose-panel.compose-full-page .compose-panel-inner {
  padding: 2.5em 3em;
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--fg) 6%, transparent);
  margin: 1em 0 3em;
}
@media (max-width: 768px) {
  .compose-panel.compose-full-page .compose-panel-inner {
    padding: 1.5em;
  }
}

.compose-panel-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: 680px;
  width: 100%;
  margin: 0 auto;
  padding: 0 2em;
  overflow-y: auto;
  min-height: 0;
}

.compose-header {
  display: flex;
  align-items: center;
  gap: 1.5ch;
  padding: 1.5em 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5em;
}

.compose-close-btn {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 1.2em;
  padding: 0.2em;
  display: flex;
  align-items: center;
}

.compose-close-btn:hover { color: var(--accent); }

.compose-label {
  flex: 1;
  color: var(--muted);
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.compose-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  cursor: text;
}

.compose-title {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--fg);
  font-family: inherit;
  font-size: 2em;
  font-weight: 700;
  padding: 0.3em 0;
  margin-bottom: 0.5em;
  outline: none;
  letter-spacing: -0.02em;
}

.compose-title::placeholder { color: var(--dim); opacity: 0.5; }

.compose-content {
  flex: 1;
  width: 100%;
  min-height: 0;
  background: transparent;
  border: none;
  color: var(--fg);
  font-family: inherit;
  font-size: 1.05em;
  line-height: 1.8;
  padding: 0;
  resize: none;
  outline: none;
}

.compose-content::placeholder { color: var(--dim); opacity: 0.4; }

.compose-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5ch;
  padding: 1em 0;
  border-top: 1px solid var(--border);
  margin-top: 1em;
}

.compose-tool {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  font-size: 1em;
  padding: 0.3em 0.6em;
  display: flex;
  align-items: center;
}

.compose-tool:hover {
  color: var(--accent);
  border-color: var(--muted);
}

.compose-format-bar {
  display: flex;
  gap: 0.25ch;
  padding: 0.3em 0;
  margin-bottom: 0.5em;
  opacity: 0.5;
  transition: opacity 0.2s;
}
.compose-format-bar:hover,
.compose-content:focus ~ .compose-format-bar,
.compose-body:focus-within .compose-format-bar {
  opacity: 1;
}

.compose-fmt {
  background: none;
  border: 1px solid transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9em;
  padding: 0.2em 0.5em;
  display: flex;
  align-items: center;
}

.compose-fmt:hover {
  color: var(--accent);
  border-color: var(--border);
}

.compose-preview {
  flex: 1;
  min-height: 50vh;
  max-height: 60vh;
  overflow-y: auto;
  font-size: 1em;
  line-height: 1.8;
  color: var(--fg);
  max-width: 65ch;
  padding-bottom: 2em;
}

.compose-preview p {
  margin-bottom: 1em;
}

.compose-preview img {
  max-width: 100%;
  margin: 1em 0;
}

/* /write route page — full-page compose editor */
#write-page {
  min-height: calc(100vh - 6em);
  display: flex;
  flex-direction: column;
  width: 816px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 1em;
  box-sizing: border-box;
}
body:has(#write-page) { padding-left: 0 !important; padding-right: 0 !important; max-width: none !important; }
.write-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
}
@media (max-width: 768px) {
  .write-inner { padding: 0 1em; }
}
.write-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1em 0;
}
.write-back-btn {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 1.3em;
  padding: 0.2em;
  display: flex;
  align-items: center;
}
.write-back-btn:hover { color: var(--fg); }
.write-actions { display: flex; align-items: center; gap: 0.75ch; }
.write-btn {
  font-family: inherit;
  font-size: 0.85em;
  padding: 0.45em 1.8ch;
  cursor: pointer;
  border-radius: 4px;
  border: none;
  transition: opacity 0.15s;
}
.write-btn:hover { opacity: 0.8; }
.write-btn-secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
}
.write-btn-primary {
  background: var(--fg);
  color: var(--bg);
  font-weight: 600;
}
.write-editor {
  flex: 1;
  display: flex;
  flex-direction: column;
  cursor: text;
}
.write-title {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--fg);
  font-family: inherit;
  font-size: 2.2em;
  font-weight: 700;
  padding: 0.2em 0;
  margin-bottom: 0.3em;
  outline: none;
  letter-spacing: -0.02em;
}
.write-title::placeholder { color: var(--dim); opacity: 0.4; }
.write-content {
  flex: 1;
  width: 100%;
  min-height: 50vh;
  background: transparent;
  border: none;
  color: var(--fg);
  font-family: inherit;
  font-size: 1.05em;
  line-height: 1.8;
  padding: 0;
  resize: none;
  outline: none;
}
.write-content::placeholder { color: var(--dim); opacity: 0.3; }
.write-format-bar {
  display: flex;
  gap: 0.5ch;
  align-items: center;
  padding: 0.4em 0;
  margin-bottom: 0.5em;
}
#write-page .compose-preview {
  color: var(--fg);
  font-size: 1.05em;
  line-height: 1.8;
  padding: 0.5em 0;
  cursor: text;
  min-height: 40vh;
  flex: 1;
}
#write-page .compose-preview img { max-width: 100%; border-radius: 4px; }
#write-page .compose-preview blockquote { border-left: 2px solid var(--accent); padding-left: 1em; color: var(--muted); }
.write-footer {
  display: none; /* removed from HTML, kept for compat */
}

/* post page — full article view */

.post-page-header {
  margin-bottom: 2.5em;
  padding-bottom: 0;
  border-bottom: none;
}
.post-page-actions {
  display: flex;
  align-items: center;
  gap: 1.2ch;
  padding: 0.5em 0 1.5em;
  margin-top: 0.75em;
  font-size: 1.3em;
  line-height: 1;
  height: 1.3em;
}
.post-page-actions span,
.post-page-actions button {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0;
  margin: 0;
}
.post-page-actions svg,
.post-page-actions i {
  display: block;
  width: 1em;
  height: 1em;
  line-height: 1;
}

.post-page-title {
  color: var(--fg);
  font-weight: 700;
  font-size: 2.8em;
  line-height: 1.15;
  margin-bottom: 0.4em;
  letter-spacing: -0.03em;
}

.post-page-meta {
  color: var(--dim);
  font-size: 0.95em;
  display: flex;
  align-items: center;
  gap: 0.5ch;
}

.post-page-meta a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
}

.post-page-meta a:hover {
  color: var(--accent);
}

.post-page-meta time {
  color: var(--dim);
}

/* Merged into the canonical .post-page-body block at line ~2172.
   This duplicate was overriding the text-indent rule. */

.post-page-body img {
  max-width: min(100vw - 4em, 900px);
  width: min(100vw - 4em, 900px);
  margin: 2em calc(-1 * max((min(100vw - 4em, 900px) - 65ch) / 2, 0px));
  display: block;
  border-radius: 4px;
}

.post-page-body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Post replies — Substack-style comments */
.post-reply {
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
  padding: 1.5em 0;
}
.post-reply:last-child {
  border-bottom: none;
}

/* Reply form */
#post-reply-form textarea {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--fg) 15%, transparent);
  border-radius: 10px;
  color: var(--fg);
  font-family: inherit;
  font-size: 0.95em;
  line-height: 1.6;
  padding: 0.85em 1.2ch;
  width: 100%;
  resize: vertical;
  transition: border-color 0.15s;
}
#post-reply-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}
#post-reply-form textarea::placeholder {
  color: var(--dim);
}
#post-reply-form button[type="submit"] {
  border-radius: 8px;
}

.post-reference {
  margin-top: 2em;
  padding-top: 1.5em;
  border-top: 1px solid var(--border);
  font-size: 0.85em;
}

.post-ref-label {
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8em;
  margin-right: 0.5ch;
}

.post-ref-title {
  color: var(--accent);
}

.post-ref-author {
  color: var(--muted);
}

/* journal */

.journal-entry {
  padding: 1em 0;
  border-bottom: 1px solid var(--border);
}

.journal-entry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5em;
}

.journal-entry-name {
  color: var(--accent);
  font-size: 0.9em;
}

.journal-entry-preview {
  color: var(--muted);
  font-size: 0.85em;
  line-height: 1.5;
}

/* graph */

.network-toggle {
  background: none;
  border: none;
  color: var(--dim);
  font-family: inherit;
  font-size: 0.85em;
  cursor: pointer;
  padding: 0;
}

.network-toggle.active {
  color: var(--accent);
}

.network-toggle:hover {
  color: var(--fg);
}

/* network cards */

.network-search-input {
  width: 100%;
  max-width: 500px;
  background: #1a1a1a;
  border: 1px solid #333;
  color: #c0c0c0;
  font-family: inherit;
  font-size: 0.9em;
  padding: 0.6em 1.2ch;
  border-radius: 8px;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s;
}

.network-search-input:focus {
  border-color: var(--accent);
}

.nc-stats {
  color: var(--dim);
  font-size: 0.8em;
  letter-spacing: 0.03em;
  margin-bottom: 0.75em;
  text-align: center;
}

.nc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75em;
  padding: 0;
  margin: 0;
  list-style: none;
}

@media (max-width: 600px) {
  .nc-grid {
    grid-template-columns: 1fr;
  }
  .nc-og {
    height: 80px;
  }
  .nc-btn {
    min-height: 36px;
    min-width: 36px;
  }
}

.nc-item {
  list-style: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s;
}

.nc-item:hover {
  border-color: var(--accent, #00ff41);
}

.nc-og {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
  border-radius: 8px 8px 0 0;
  background: #111;
}

.nc-body {
  padding: 0.75em 1ch;
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}

.nc-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.nc-item { cursor: pointer; }

.nc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5ch;
}

.nc-domain {
  font-weight: 600;
  font-size: 0.95em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nc-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.25em;
  gap: 0.5ch;
}

.nc-btns {
  display: flex;
  gap: 0.4ch;
}

.nc-btn {
  font-size: 0.75em !important;
  padding: 0.2em 0.7em !important;
  border-radius: 6px !important;
}

.nc-btn-filled {
  background: #111 !important;
  color: #fff !important;
  border-color: #111 !important;
}

.nc-badge {
  font-size: 0.65em;
  padding: 0.15em 0.6ch;
  border-radius: 4px;
  white-space: nowrap;
}

.nc-badge-artist {
  border: 1px solid var(--accent);
  color: var(--accent);
  opacity: 0.7;
}

.nc-badge-audience {
  border: 1px solid #886644;
  color: #886644;
}
.nc-audience-avatar {
  width: 100%;
  aspect-ratio: 1200 / 630;
  background: var(--surface, #1a1a1a);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5em;
  font-weight: 700;
  color: var(--dim, #555);
  border-bottom: 1px solid var(--border);
}

.nc-sentinel {
  text-align: center;
  padding: 1em;
  color: var(--dim);
  font-size: 0.85em;
  list-style: none;
}

.network-invites-btn {
  font-size: 0.8em;
  padding: 0.3em 1.2ch;
  border-radius: 6px;
}

/* CV — clean text resume on homepage */

.cv {
  margin-top: 2em;
}

.cv-section {
  margin-bottom: 2em;
}

.cv-section h3 {
  color: var(--muted);
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.75em;
  padding-bottom: 0.25em;
  border-bottom: 1px solid var(--border);
}

.cv-item {
  margin-bottom: 0.5em;
  font-size: 0.9em;
}

.cv-title {
  color: var(--accent);
}

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

/* settings panel */

.settings-panel {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--bg);
  transform: translateY(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
}

.settings-panel.settings-open {
  transform: translateY(0);
}

.settings-inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 3em 4em;
}

.settings-header {
  display: flex;
  align-items: center;
  gap: 1.5ch;
  padding: 1.5em 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5em;
}

.settings-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5em;
}

.settings-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.95em;
  padding: 0.75em 2ch;
  cursor: pointer;
}

.settings-tab:hover { color: var(--fg); }
.settings-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.settings-field {
  margin-bottom: 1.75em;
}

.settings-label {
  display: block;
  color: var(--muted);
  font-size: 0.9em;
  margin-bottom: 0.6em;
}

.settings-module {
  border: 1px solid var(--border);
  padding: 1.5em 1.75em 1.25em;
  margin-bottom: 1em;
  background: rgba(255,255,255,0.015);
  transition: border-color 0.15s;
}
.settings-module:hover {
  border-color: var(--muted);
}

.settings-module-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.settings-module-header label {
  display: flex;
  align-items: center;
  gap: 0.6ch;
  font-size: 1em;
  cursor: pointer;
}
.settings-module-header input[type="checkbox"] {
  accent-color: var(--accent);
  width: 1em;
  height: 1em;
}
.settings-module-header .module-actions {
  display: flex;
  align-items: center;
  gap: 0.4ch;
}
.settings-module-header .module-actions button {
  background: none;
  border: 1px solid transparent;
  color: var(--dim);
  font-family: inherit;
  font-size: 0.75em;
  padding: 0.2em 0.5ch;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.settings-module-header .module-actions button:hover {
  color: var(--fg);
  border-color: var(--border);
}

/* second-line "display name" input row inside a settings-module */
.module-label-row {
  display: flex;
  align-items: center;
  gap: 1ch;
  margin-top: 0.75em;
  padding-top: 0.75em;
  border-top: 1px solid var(--border);
}
.module-label-row label {
  color: var(--dim);
  font-size: 0.75em;
  white-space: nowrap;
}
.module-label-input {
  flex: 1;
  max-width: 280px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: inherit;
  font-size: 0.85em;
  padding: 0.35em 0.75ch;
}
.module-label-input:focus {
  outline: none;
  border-color: var(--muted);
}
.module-label-input::placeholder {
  color: var(--dim);
}

.editor-item {
  padding: 1em 0;
  border-bottom: 1px solid var(--border);
}

/* Sub-page module editor */
.settings-subpage {
  animation: settings-subpage-in 0.2s ease;
}
@keyframes settings-subpage-in {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
.settings-subpage-header {
  display: flex;
  align-items: center;
  gap: 1ch;
  padding: 1em 0 1.25em;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5em;
}
.settings-subpage-back {
  background: none;
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: inherit;
  font-size: 0.9em;
  padding: 0.4em 1ch;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5ch;
  transition: border-color 0.15s;
}
.settings-subpage-back:hover { border-color: var(--accent); color: var(--accent); }
.settings-subpage-title { font-size: 1.1em; color: var(--accent); }

/* Card-style editor items */
.editor-card {
  border: 1px solid var(--border);
  padding: 1.25em;
  margin-bottom: 0.75em;
  background: rgba(255,255,255,0.015);
  transition: border-color 0.15s;
}
.editor-card:hover { border-color: var(--muted); }
.editor-card-header { display: flex; align-items: center; gap: 1ch; margin-bottom: 0.75em; }
.editor-card-thumb { width: 56px; height: 56px; object-fit: cover; border: 1px solid var(--border); flex-shrink: 0; }
.editor-card-title { flex: 1; font-size: 0.95em; color: var(--fg); }

/* Template selector cards */
.template-card {
  border: 1px solid var(--border);
  padding: 1.25em;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.template-card:hover { border-color: var(--muted); }
.template-card.active { border-width: 2px; border-color: var(--fg); background: rgba(0,0,0,0.05); position: relative; }
.template-card.active::after { content: '\2713'; position: absolute; top: 0.5em; right: 0.75em; font-size: 1.1em; color: var(--fg); }
.template-card-name { font-size: 1em; color: var(--accent); display: block; margin-bottom: 0.3em; }
.template-card-desc { font-size: 0.85em; color: var(--fg); display: block; margin-bottom: 0.2em; }
.template-card-style { font-size: 0.8em; color: var(--dim); }

/* Theme color swatches */
.settings-swatch {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--border);
  cursor: pointer;
  padding: 0;
  transition: transform 0.2s, border-color 0.2s;
  display: inline-block;
}
.settings-swatch:hover { transform: scale(1.15); }
.settings-swatch.active { border-color: var(--accent); transform: scale(1.15); }

/* Font preview cards */
.font-preview-card {
  border: 1px solid var(--border);
  padding: 1.25em;
  cursor: pointer;
  transition: border-color 0.15s;
  margin-bottom: 0.5em;
}
.font-preview-card:hover { border-color: var(--muted); }
.font-preview-card.active { border-color: var(--accent); }

/* loading skeletons */
@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.3; }
}

.skeleton {
  background: var(--surface);
  border-radius: 2px;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.skeleton-text { height: 0.9em; margin-bottom: 0.75em; }
.skeleton-title { height: 1.2em; width: 60%; margin-bottom: 1em; }
.skeleton-block { height: 4em; margin-bottom: 1em; }

#graph-canvas {
  background: var(--bg);
}

/* messages page — two-column layout */

.messages-container {
  display: flex;
  /* Extend horizontally to viewport edges (body has 3em horizontal padding).
     Vertically: flush with the fixed #top-bar (3em tall, bottom at y=3em).
     Body padding-top is 4em so we pull up by 1em to sit directly below the
     nav. Extend down through body's bottom padding so the chat touches the
     player bar with no gap. */
  height: calc(100vh - 3em);
  margin: -1em -3em -4em -3em;
  overflow: hidden;
}

.messages-sidebar {
  width: 280px;
  min-width: 280px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#messages-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.messages-sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1em;
  color: var(--accent);
  font-size: 0.9em;
}

.messages-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.messages-chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75em 1.5em;
  border-bottom: 1px solid var(--border);
  color: var(--accent);
  font-size: 0.9em;
}

.messages-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 1.5em;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.messages-send-form {
  display: flex;
  gap: 0.5em;
  padding: 0.75em 1.5em;
  align-items: center;
  border-top: 1px solid var(--border);
}
.messages-send-form .dock-btn { font-size: 1.3em; }

.messages-send-form input,
.messages-send-form textarea {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: inherit;
  font-size: 0.9em;
  padding: 0.7em 1.5ch;
  border-radius: 999px;
}

.messages-send-form input:focus,
.messages-send-form textarea:focus {
  outline: none;
  border-color: var(--muted);
}

/* messages page pay bar uses shared .pay-bar-panel styles above */


.msg-convo-item {
  padding: 0.75em 1em;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.75em;
}

.msg-convo-item:hover,
.msg-convo-item.active {
  background: var(--surface);
}

.msg-convo-avatar {
  width: 2.8em; height: 2.8em;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85em; font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  overflow: hidden;
  position: relative;
}
.msg-convo-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  position: absolute; top: 0; left: 0;
}
.msg-convo-body {
  flex: 1;
  min-width: 0;
}
.group-chips-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em;
  margin-bottom: 0.5em;
}
.group-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.2em 0.6em;
  background: var(--accent);
  color: var(--bg);
  font-size: 0.75em;
  border-radius: 1em;
  font-weight: 500;
}
.msg-member-row {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.4em 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.msg-member-row:hover {
  background: var(--surface);
}
.msg-member-row .msg-convo-avatar {
  width: 1.8em;
  height: 1.8em;
  font-size: 0.8em;
}

.msg-convo-peer {
  color: var(--accent);
  font-size: 0.85em;
}

.msg-convo-preview {
  color: var(--muted);
  font-size: 0.8em;
  margin-top: 0.15em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msg-convo-time {
  color: var(--dim);
  font-size: 0.7em;
  margin-top: 0.1em;
}

.msg-reaction {
  font-size: 0.75em;
  margin-top: 0.15em;
  opacity: 0.8;
}

.msg-reply-quote {
  font-size: 0.75em;
  color: var(--dim);
  border-left: 2px solid var(--border);
  padding-left: 0.75ch;
  margin-bottom: 0.25em;
  max-width: 75%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msg-sender {
  font-size: 0.7em;
  color: var(--accent);
  margin-bottom: 0.15em;
}

.msg-convo-group .msg-convo-peer::before {
  content: '# ';
  color: var(--dim);
}

/* messages: reuse dm bubble styles from existing CSS */

#messages-chat-active {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#messages-chat-active .messages-msgs {
  flex: 1;
  min-height: 0;
}

#messages-chat-active .messages-send-form {
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .messages-container {
    flex-direction: column;
    height: calc(100vh - 3.5em);
    margin: 0 -1.5em;
  }
  .messages-sidebar {
    width: 100%;
    max-height: none;
    height: calc(100vh - 3.5em - 3em); /* subtract top bar + dock */
    border-right: none;
    border-bottom: none;
    display: flex;
  }
  .messages-chat {
    display: none;
    height: calc(100vh - 3.5em - 3em); /* subtract top bar + dock */
  }
  .messages-send-form {
    position: sticky;
    bottom: 0;
    background: var(--bg, #0a0a0a);
    padding: 0.5em 1em;
    z-index: 10;
  }
  .pay-bar-panel {
    position: sticky;
    bottom: 3em;
    z-index: 10;
  }
  .messages-container.chat-active .messages-sidebar {
    display: none;
  }
  .messages-container.chat-active .messages-chat {
    display: flex;
  }
  .messages-back-btn {
    display: inline-flex !important;
    background: none;
    border: none;
    color: var(--fg);
    cursor: pointer;
    font-size: 1.2em;
    padding: 0.2em;
    margin-right: 0.5ch;
    align-items: center;
  }
  .messages-msgs {
    padding: 1em !important;
  }
  .messages-send-form {
    padding: 0.5em 0.75em !important;
    gap: 0.3em !important;
  }
  .dm-bubble {
    font-size: 1em !important;
  }
  /* message input sticky above bottom nav */
  .messages-send-form {
    position: sticky !important;
    bottom: 0 !important;
    background: var(--bg) !important;
    z-index: 10 !important;
    padding-bottom: calc(0.5em + env(safe-area-inset-bottom)) !important;
  }
  /* hide EN/USD selectors on mobile (they go in hamburger menu) */
  .lang-switcher { display: none !important; }
}
@media (max-width: 480px) {
  .messages-container { margin: 0 -1em; }
}

/* Album detail + track player */
.album-clickable:hover { opacity: 0.85; }
.album-detail {
  padding: 0.75em 0 1.5em 0;
  margin-bottom: 1em;
  border-bottom: 1px solid var(--border);
}
.album-tracks { display: flex; flex-direction: column; gap: 0.25em; }
.album-track {
  display: flex;
  align-items: center;
  gap: 1ch;
  padding: 0.4em 0;
  font-size: 0.9em;
}
.track-title { color: var(--fg); }
.track-duration { color: var(--dim); font-size: 0.85em; }
.track-player { display: none; }
.track-play-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: inherit;
  font-size: 0.75em;
  padding: 0.15em 0.8ch;
  cursor: pointer;
  margin-left: auto;
}
.track-play-btn:hover { border-color: var(--accent); color: var(--accent); }
.album-track.playing { background: color-mix(in srgb, var(--accent) 8%, transparent); border-radius: 4px; }
.album-track.playing .track-title { color: var(--accent); }
.album-track.playing .track-num { color: var(--accent); }
.album-track.playing .track-play-btn { border-color: var(--accent); color: var(--accent); }
.album-links {
  display: flex;
  gap: 1.5ch;
  margin-top: 0.75em;
  padding-top: 0.5em;
}
.album-link {
  color: var(--dim);
  font-size: 0.8em;
  text-decoration: none;
}
.album-link:hover { color: var(--accent); }

/* Global persistent player */
#global-player {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: var(--bg);
  border-top: 1px solid var(--border);
  display: none;
  align-items: center;
  gap: 1.5ch;
  padding: 0 2em;
  z-index: 9999;
  font-size: 0.85em;
}
#global-player.active { display: flex; }
#global-player .player-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: inherit;
  font-size: 0.85em;
  padding: 0.1em 0.8ch;
  cursor: pointer;
  min-width: 4.5ch;
  text-align: center;
}
#global-player .player-btn:hover { border-color: var(--accent); color: var(--accent); }
#global-player .player-info {
  display: flex;
  gap: 0.5ch;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 30ch;
}
#global-player .player-artist { color: var(--dim); }
#global-player .player-progress {
  flex: 1;
  height: 3px;
  background: var(--border);
  cursor: pointer;
  position: relative;
  min-width: 60px;
}
#global-player .player-progress-fill {
  height: 100%;
  background: var(--accent);
  width: 0%;
  pointer-events: none;
}
#global-player .player-time { color: var(--dim); white-space: nowrap; font-size: 0.9em; }

/* Mobile: progress bar as thin line across top of player, single row */
@media (max-width: 768px) {
  #global-player {
    position: fixed !important;
  }
  #global-player {
    padding-top: 0.4em !important;
    padding-bottom: calc(0.4em + env(safe-area-inset-bottom, 0px)) !important;
    height: auto !important;
  }
  #global-player #gp-progress-wrap {
    position: absolute !important;
    top: 0; left: 0; right: 0;
    flex: none !important;
    width: 100% !important;
    height: 3px !important;
    min-width: 0 !important;
    border-radius: 0 !important;
    margin: 0;
    z-index: 1;
  }
  #global-player #gp-progress-fill { border-radius: 0 !important; }
  #global-player #gp-progress-buffer { border-radius: 0 !important; }
  #global-player #gp-time { display: none; }
}

/* push content up when player is visible */
body:has(#global-player.active) { padding-bottom: calc(4em + 50px) !important; }
body:has(#global-player.active) .owner-dock { bottom: 48px; }
/* Player sits just above the dock (or at bottom if no dock) */
@media (max-width: 768px) {
  /* Dock stays at bottom:0, player sits above it */
  body:has(#global-player.active) .owner-dock { bottom: 0 !important; z-index: 9998 !important; }
  body:has(.owner-dock) #global-player.active { bottom: 52px !important; }
  body:not(:has(.owner-dock)) #global-player.active { bottom: 0 !important; }
  body:has(.owner-dock):has(#global-player.active) { padding-bottom: 110px !important; }
  body:not(:has(.owner-dock)):has(#global-player.active) { padding-bottom: 50px !important; }
  body:has(#global-player[style*="flex"]) .portfolio-nav { padding-bottom: calc(0.75em + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 769px) {
  #global-player.active { bottom: 0 !important; }
}
/* Messages view height: shrink when player is active so the compose input
   stays above the fixed player bar (40px). */
body:has(#global-player.active) .messages-container { height: calc(100vh - 3em - 40px); }
@media (max-width: 768px) {
  body:has(#global-player.active) .messages-container { height: calc(100vh - 3em - 40px); }
}

/* Portfolio section links in the dock — collapsed by default, toggled
   via the portfolio icon. Keeps the dock compact without losing access. */
/* dock-sections visibility is now controlled by opacity+pointer-events
   in the base rule — the .expanded class toggles those. No display:none
   needed (it would break the CSS transition). */
body:has(#messages-page) .portfolio-nav { display: none; }

/* Video player container — consistent sizing before/after load */
.video-player { max-width: 100%; }
.video-player video {
  max-width: 100%;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  display: block;
  background: var(--bg);
  object-fit: contain;
}
.video-lazy {
  max-width: 100%;
  aspect-ratio: 16 / 9;
}
.video-lazy img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* Video section layout — featured + grid */
.video-featured {
  margin-bottom: 2em;
}
.video-featured .video-player {
  width: 100%;
}
.video-caption {
  margin-top: 0.4em;
  font-size: 0.85em;
  color: var(--fg);
}
.video-caption .video-title {
  color: var(--accent);
}
.video-caption .video-year {
  color: var(--muted);
}
.video-caption .video-collabs {
  color: var(--muted);
  margin-left: 0.5ch;
}
.video-desc {
  color: var(--muted);
  font-size: 0.85em;
  margin-top: 0.3em;
}
.video-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5em;
}
.video-grid .video-item {
  min-width: 0;
}
@media (max-width: 600px) {
  .video-grid {
    grid-template-columns: 1fr;
  }
  .script-dialogue { margin-left: 10%; margin-right: 10%; }
  .script-paren { margin-left: 15%; margin-right: 15%; }
}

/* Track duration */
.track-duration {
  color: var(--muted);
  font-size: 0.8em;
  margin-left: 0.5ch;
}

/* PiP video thumbnail */
#pip-container {
  position: fixed;
  bottom: 48px;
  right: 1em;
  width: 240px;
  z-index: 501;
  border: 1px solid var(--border);
  display: none;
}
#pip-container.active { display: block; }
#pip-container video { width: 100%; display: block; }

/* style the inline video when it's in PiP mode */
video:picture-in-picture + *, video:-webkit-picture-in-picture + * { display: none; }
video[style*="display: none"] ~ * { }
/* center Chrome's "Playing in picture-in-picture" overlay */
video { background: var(--bg); }

/* SPA loading fade */
main.spa-loading { opacity: 0.5; transition: opacity 0.15s; }

/* Language switcher */
.lang-switcher {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.7em;
  padding: 0.2em 0.3ch;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
#currency-switcher {
  margin-left: 4px;
}
.lang-switcher:hover { border-color: var(--muted); color: var(--fg); }
.lang-switcher:focus { outline: none; border-color: var(--accent); }

/* RTL support */
[dir="rtl"] #top-bar { flex-direction: row-reverse; }
[dir="rtl"] .network-nav { flex-direction: row-reverse; }
[dir="rtl"] #praxis-menu-trigger { flex-direction: row-reverse; }
[dir="rtl"] #top-bar > #praxis-menu-dropdown { right: auto; left: 1em; }
[dir="rtl"] .portfolio-nav { direction: rtl; }
[dir="rtl"] .owner-dock { left: auto; right: 0; }
[dir="rtl"] .feed-item-header { flex-direction: row-reverse; }
[dir="rtl"] .feed-activity-text { direction: rtl; }
[dir="rtl"] .compose-header { flex-direction: row-reverse; }
[dir="rtl"] .compose-format-bar { direction: rtl; }
[dir="rtl"] .messages-container { flex-direction: row-reverse; }
[dir="rtl"] .messages-sidebar { border-right: none; border-left: 1px solid var(--border); }
[dir="rtl"] .dm-bubble-self { margin-left: 0; margin-right: auto; }
[dir="rtl"] .dm-bubble-peer { margin-right: 0; margin-left: auto; }
[dir="rtl"] .settings-panel { direction: rtl; }
[dir="rtl"] .settings-tabs { direction: rtl; }
[dir="rtl"] .project-input { direction: rtl; }
[dir="rtl"] .journal-entry-header { flex-direction: row-reverse; }
[dir="rtl"] .credit { direction: rtl; }
[dir="rtl"] .project { direction: rtl; }

/* notifications */
.notif-badge {
  position: absolute;
  top: -0.2em;
  right: -0.3em;
  background: var(--red);
  color: var(--accent);
  font-size: 0.55em;
  min-width: 1.4em;
  height: 1.4em;
  line-height: 1.4em;
  text-align: center;
  border-radius: 50%;
  font-weight: bold;
  pointer-events: none;
}

#dock-notifications {
  position: relative;
}

.notif-panel {
  position: absolute;
  left: 3em;
  top: -2em;
  background: var(--bg);
  border: 1px solid var(--border);
  width: 28ch;
  max-height: 60vh;
  overflow-y: auto;
  z-index: 300;
  font-size: 0.85em;
}

.notif-header {
  padding: 0.5em 1ch;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.9em;
}

.notif-empty {
  padding: 1.5em 1ch;
  color: var(--dim);
  text-align: center;
}

.notif-item {
  display: block;
  padding: 0.5em 1ch;
  border-bottom: 1px solid var(--border);
  color: var(--fg);
  text-decoration: none;
  transition: background 0.1s;
}

.notif-item:hover {
  background: var(--surface);
  text-decoration: none;
}

.notif-item.notif-unread {
  border-left: 2px solid var(--accent);
}

.notif-item:not(.notif-unread) {
  opacity: 0.55;
}

.notif-page-row:not(.notif-unread) {
  opacity: 0.55;
}

.notif-text {
  line-height: 1.4;
}

@media (max-width: 768px) {
  .notif-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 3.5em;
    top: auto;
    width: 100%;
    max-height: 50vh;
  }
}

[dir="rtl"] .notif-panel { left: auto; right: 3em; }
[dir="rtl"] .notif-item.notif-unread { border-left: none; border-right: 2px solid var(--accent); }
[dir="rtl"] .notif-page-row.notif-unread { border-left: none; border-right: 2px solid var(--accent); }

/* projects view toggle */
.projects-toggle {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9em;
}

.projects-toggle.active {
  color: var(--accent);
}

.projects-toggle:hover {
  color: var(--fg);
}

/* projects map */
#projects-map {
  border-radius: 2px;
  background: var(--surface);
}

#projects-map .leaflet-tile-pane,
#propose-location-map .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(0.6) contrast(1.3);
}
#projects-map .leaflet-popup-content-wrapper {
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 2px;
  box-shadow: none;
}

#projects-map .leaflet-popup-tip {
  background: var(--surface);
  border: 1px solid var(--border);
}

#projects-map .leaflet-popup-close-button {
  color: var(--muted);
}

/* map filter buttons */
.projects-map-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-bottom: 1em;
  align-items: center;
}

.projects-filter,
.projects-list-filter {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.8em;
  padding: 0.25em 1ch;
}

.projects-filter.active,
.projects-list-filter.active {
  color: var(--accent);
  border-color: var(--accent);
}

.projects-filter:hover,
.projects-list-filter:hover {
  color: var(--fg);
  border-color: var(--border-hover);
}

/* no-location project items */
.project-no-loc-item {
  padding: 0.3em 0;
  font-size: 0.9em;
}

.project-no-loc-item a {
  color: var(--fg);
}

/* marker cluster overrides for dark theme */
.marker-cluster-small {
  background-color: rgba(192, 192, 192, 0.3);
}
.marker-cluster-small div {
  background-color: rgba(192, 192, 192, 0.6);
  color: var(--bg);
}
.marker-cluster-medium {
  background-color: rgba(74, 222, 128, 0.3);
}
.marker-cluster-medium div {
  background-color: rgba(74, 222, 128, 0.6);
  color: var(--bg);
}
.marker-cluster-large {
  background-color: rgba(96, 165, 250, 0.3);
}
.marker-cluster-large div {
  background-color: rgba(96, 165, 250, 0.6);
  color: var(--bg);
}

/* propose form mini map */
#propose-location-map {
  border-radius: 2px;
  background: var(--surface);
}

#propose-location-map .leaflet-popup-content-wrapper {
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 2px;
  box-shadow: none;
}

#propose-location-map .leaflet-popup-tip {
  background: var(--surface);
  border: 1px solid var(--border);
}

#propose-location-map .leaflet-control-zoom a {
  background: var(--surface);
  color: var(--fg);
  border-color: var(--border);
}

#propose-location-map .leaflet-control-zoom a:hover {
  background: var(--border-hover);
}

#propose-location-map .leaflet-control-attribution {
  background: rgba(10, 10, 10, 0.7);
  color: var(--dim);
  font-size: 0.7em;
}

#propose-location-map .leaflet-control-attribution a {
  color: var(--muted);
}

/* radius slider */
#propose-radius-row {
  display: flex;
  align-items: center;
  gap: 1ch;
}

#propose-radius {
  -webkit-appearance: none;
  appearance: none;
  height: 2px;
  background: var(--border);
  outline: none;
  flex: 1;
}

#propose-radius::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--fg);
  cursor: pointer;
  border: none;
}

#propose-radius::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--fg);
  cursor: pointer;
  border: none;
}

/* Universal loading animation */
.praxis-loader {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4em 0;
  color: var(--dim);
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 1.2em;
}
.praxis-loader::after {
  content: '~';
  animation: spin-ascii 1s steps(4) infinite;
}
@keyframes spin-ascii {
  0% { content: '~'; }
  25% { content: '\00B7'; }
  50% { content: '\25C7'; }
  75% { content: '\25CB'; }
}

/* script mode — screenplay editor */

.script-editor {
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
  line-height: 1.5;
  min-height: 60vh;
  max-width: 680px;
  padding: 1em 0;
  outline: none;
  color: var(--fg);
  white-space: pre-wrap;
  word-wrap: break-word;
}

.script-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--border-hover);
  pointer-events: none;
}

/* per-line placeholder — ghost text when a line is empty (matches Celtx) */
.script-line.line-empty::after {
  content: attr(data-placeholder);
  color: var(--border-hover);
  pointer-events: none;
  font-style: normal;
  font-weight: normal;
  text-transform: none;
  text-decoration: none;
}

.script-line {
  padding: 0.1em 0;
  min-height: 1.5em;
}

.script-page-break {
  height: 0;
  border: none;
  border-top: 1px dashed var(--border-hover);
  margin: 1.5em -1em;
  padding: 0;
  position: relative;
  pointer-events: none;
  user-select: none;
}
.script-page-break::after {
  content: "page " attr(data-page);
  position: absolute;
  right: 0;
  top: -0.7em;
  font-family: var(--font);
  font-size: 0.65em;
  color: var(--border-hover);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: var(--bg);
  padding: 0 0.5ch;
}

.script-scene {
  text-transform: uppercase;
  font-weight: bold;
  color: var(--accent);
  margin-top: 1.5em;
  text-align: left;
}

.script-action {
  color: var(--fg);
}

/* Screenplay margins: Celtx/Final Draft standard on 8.5x11 page
   Text area is 1.5" left to 7.5" right = 6" wide
   Character: 3.7" from page left = 2.2" into text = 37% of 6"
   Dialogue:  2.5" from page left = 1.0" into text, right at 6" = 17%/25%
   Paren:     3.1" from page left = 1.6" into text = 27%, right at 5.6" = 32% */
.script-character {
  text-transform: uppercase;
  text-align: center;
  color: var(--accent);
  margin-top: 1em;
}

.script-dialogue {
  margin-left: 17%;
  margin-right: 17%;
  color: var(--fg);
}

.script-paren {
  margin-left: 25%;
  margin-right: 25%;
  text-align: center;
  color: var(--dim);
  font-style: italic;
}

.script-transition {
  text-align: right;
  text-transform: uppercase;
  color: var(--dim);
  margin-top: 1em;
}

/* shot — camera direction, uppercase left-aligned */
.script-shot {
  text-transform: uppercase;
  color: var(--fg);
}

/* text — production notes, lyrics, misc */
.script-text {
  color: var(--dim);
}

/* dual dialogue — two characters speaking in parallel columns
   (Fountain convention: second character line marked with trailing `^`) */
.dual-dialogue {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
  margin: 1em 0;
}
.dual-dialogue-col {
  min-width: 0;
}
.dual-dialogue-col .script-character,
.dual-dialogue-col .fountain-character {
  text-align: center;
  margin-top: 0;
}
.dual-dialogue-col .script-dialogue,
.dual-dialogue-col .fountain-dialogue {
  margin-left: 0;
  margin-right: 0;
}
.dual-dialogue-col .script-paren,
.dual-dialogue-col .fountain-paren {
  margin-left: 10%;
  margin-right: 10%;
}
@media (max-width: 600px) {
  .dual-dialogue { grid-template-columns: 1fr; }
}

/* stage play / teleplay element types */
.script-act {
  text-transform: uppercase;
  font-weight: bold;
  text-decoration: underline;
  text-align: center;
  color: var(--accent);
  font-size: 1.1em;
  margin-top: 2em;
}

.script-direction {
  font-style: italic;
  color: var(--dim);
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 0.5em;
}

/* title page fields — centered, vertically spaced like Celtx */
.script-tp-title {
  text-align: center;
  margin-top: 30vh;
  font-size: 1.1em;
}
.script-tp-credit {
  text-align: center;
  margin-top: 0.5em;
  color: var(--dim);
  font-style: italic;
}
.script-tp-author {
  text-align: center;
}
.script-tp-source {
  text-align: center;
  margin-top: 4em;
  color: var(--dim);
}

/* zen mode — full-page distraction-free editing */
body.zen-mode #top-bar,
body.zen-mode #owner-dock,
body.zen-mode .owner-dock,
body.zen-mode footer,
body.zen-mode .portfolio-nav,
body.zen-mode #mobile-menu-btn,
body.zen-mode #journal-save-status,
body.zen-mode #script-page-count,
body.zen-mode #script-export-pdf,
body.zen-mode #script-zen,
body.zen-mode #journal-publish,
body.zen-mode #journal-back,
body.zen-mode #journal-filename,
body.zen-mode .script-toolbar,
body.zen-mode .script-outline-panel {
  display: none !important;
}
body.zen-mode main {
  padding: 0;
  margin: 0;
  max-width: none;
}
body.zen-mode main > div {
  max-width: none !important;
  padding: 0;
}
body.zen-mode .script-editor {
  min-height: 100vh;
  max-width: 680px;
  margin: 0 auto;
  padding: 3em 1em;
  box-sizing: border-box;
}
.zen-toggle {
  background: none;
  border: none;
  color: var(--dim);
  cursor: pointer;
  font-size: 1em;
  padding: 0.2em 0.5ch;
  opacity: 0.5;
}
.zen-toggle:hover { opacity: 1; }
.zen-exit {
  display: none;
}
body.zen-mode .zen-exit {
  display: block;
  position: fixed;
  top: 0.8em;
  right: 0.8em;
  z-index: 200;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--dim);
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.7em;
  padding: 0.2em 0.8ch;
  opacity: 0;
  transition: opacity 0.3s;
}
body.zen-mode:hover .zen-exit { opacity: 0.4; }
body.zen-mode .zen-exit:hover { opacity: 1; }

.script-type-indicator {
  display: inline-block;
  color: var(--dim);
  font-size: 0.7em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: var(--font);
  min-width: 10ch;
}

.script-toolbar {
  display: flex;
  align-items: center;
  gap: 1.5ch;
  padding: 0.75em 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1em;
  font-family: var(--font);
}

.script-toolbar button {
  background: none;
  border: 1px solid var(--border);
  color: var(--dim);
  font-family: inherit;
  font-size: 0.8em;
  padding: 0.2em 1ch;
  cursor: pointer;
}

.script-toolbar button:hover {
  color: var(--accent);
  border-color: var(--border-hover);
}

.script-toolbar button.active {
  color: var(--accent);
  border-color: var(--accent);
}

/* Script auto-complete dropdown */
.script-autocomplete {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  z-index: 100;
  min-width: 15ch;
  max-width: 40ch;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
}
.script-autocomplete-item {
  padding: 0.4em 1ch;
  cursor: pointer;
  color: var(--fg);
}
.script-autocomplete-item:hover,
.script-autocomplete-item.active {
  background: var(--border);
  color: var(--accent);
}

/* Scene outline panel */
.script-outline-panel {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.5em 0;
  margin-bottom: 1em;
  max-height: 30vh;
  overflow-y: auto;
}
.script-outline-item {
  padding: 0.3em 1ch;
  font-size: 0.85em;
  color: var(--dim);
  cursor: pointer;
  font-family: 'Courier New', Courier, monospace;
  text-transform: uppercase;
}
.script-outline-item:hover { color: var(--fg); background: var(--surface); }
.script-outline-item.active {
  color: var(--accent);
  border-left: 2px solid var(--accent);
  padding-left: calc(1ch - 2px);
}

/* Journal markdown editor size override */
#journal-md-container .md-editor-textarea {
  min-height: 60vh;
  line-height: 1.8;
  border: none;
  resize: none;
}

/* cash out guide — exchange region cards */
.cashout-region {
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 0.75em;
  overflow: hidden;
}
.cashout-region-label {
  background: var(--surface);
  padding: 0.5em 1ch;
  font-size: 0.85em;
  color: var(--fg);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}
.cashout-region-body {
  padding: 0.75em 1ch;
  font-size: 0.85em;
  color: var(--dim);
  line-height: 1.8;
}
.cashout-region-body strong {
  color: var(--fg);
}

/* screenplay rendering in blog posts */
.post-page-body .fountain-scene {
  text-transform: uppercase;
  font-weight: bold;
  font-family: 'Courier New', Courier, monospace;
  margin-top: 1.5em;
  text-align: left;
}
.post-page-body .fountain-action {
  font-family: 'Courier New', Courier, monospace;
  margin-top: 0.5em;
  text-align: left;
}
.post-page-body .fountain-character {
  text-transform: uppercase;
  font-family: 'Courier New', Courier, monospace;
  text-align: center;
  margin-top: 1em;
}
.post-page-body .fountain-dialogue {
  font-family: 'Courier New', Courier, monospace;
  margin-left: 17%;
  margin-right: 17%;
}
.post-page-body .fountain-paren {
  font-family: 'Courier New', Courier, monospace;
  margin-left: 25%;
  margin-right: 25%;
  text-align: center;
  font-style: italic;
  color: var(--dim);
}
.post-page-body .fountain-transition {
  text-align: right;
  text-transform: uppercase;
  font-family: 'Courier New', Courier, monospace;
  color: var(--dim);
  margin-top: 1em;
}
.post-page-body .fountain-blank {
  height: 1em;
}
.post-page-body .fountain-shot {
  text-transform: uppercase;
  font-family: 'Courier New', Courier, monospace;
  margin-top: 1em;
}
.post-page-body .fountain-text {
  font-family: 'Courier New', Courier, monospace;
  margin-top: 0.5em;
  color: var(--dim);
}
.post-page-body .fountain-act {
  text-transform: uppercase;
  font-weight: bold;
  text-decoration: underline;
  text-align: center;
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.1em;
  margin-top: 2em;
  margin-bottom: 0.5em;
}

/* stage play rendering in blog posts */
.post-page-body .stageplay-act {
  text-transform: uppercase;
  font-weight: bold;
  text-decoration: underline;
  text-align: center;
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.1em;
  margin-top: 2em;
  margin-bottom: 0.5em;
}
.post-page-body .stageplay-scene {
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
  font-family: 'Courier New', Courier, monospace;
  margin-top: 1.5em;
}
.post-page-body .stageplay-direction {
  font-family: 'Courier New', Courier, monospace;
  font-style: italic;
  color: var(--dim);
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 0.5em;
}
.post-page-body .stageplay-character {
  text-transform: uppercase;
  font-weight: bold;
  font-family: 'Courier New', Courier, monospace;
  margin-top: 1em;
  text-align: left;
}
.post-page-body .stageplay-dialogue {
  font-family: 'Courier New', Courier, monospace;
  margin-left: 5%;
}
.post-page-body .stageplay-paren {
  font-family: 'Courier New', Courier, monospace;
  font-style: italic;
  margin-left: 5%;
  color: var(--dim);
}
.post-page-body .stageplay-action {
  font-family: 'Courier New', Courier, monospace;
  text-align: left;
  margin-top: 0.5em;
}
.post-page-body .stageplay-blank {
  height: 1em;
}

/* --- Modal overlay / bottom sheet system ---
   iOS-style enter animation on the overlay (fade) and the dialog
   (scale + rise). Add `.is-closing` on dismiss for the reverse. */
.praxis-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1em;
  animation: praxis-modal-fade-in 0.22s ease-out;
}
.praxis-modal-overlay.is-closing { animation: praxis-modal-fade-out 0.18s ease-in forwards; }
.praxis-modal-overlay > .praxis-modal-dialog {
  animation: praxis-modal-scale-in 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.praxis-modal-overlay.is-closing > .praxis-modal-dialog {
  animation: praxis-modal-scale-out 0.18s ease-in forwards;
}
@keyframes praxis-modal-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes praxis-modal-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes praxis-modal-scale-in {
  from { opacity: 0; transform: scale(0.94) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes praxis-modal-scale-out {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.96); }
}
.praxis-modal-overlay.z-10001 {
  z-index: 10001;
}
.praxis-modal-dialog {
  background: color-mix(in srgb, var(--fg, #c0c0c0) 6%, var(--bg, #0a0a0a));
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border: 1px solid color-mix(in srgb, var(--fg, #c0c0c0) 10%, transparent);
  border-radius: 16px;
  color: var(--fg, #c0c0c0);
  padding: 2em;
  max-width: 440px;
  width: 95%;
}
.praxis-modal-dialog h3 { color: var(--accent, #fff); }

/* --- Branded signing modal (wallet unlock, etc.) ---
   Compact iOS-style sheet: Praxis mark up top, big title, generous
   input, primary/secondary button pair. Rounded, animated,
   feels like a system sheet. */
.praxis-unlock-mark {
  display: block;
  margin: 0 auto 1em;
  width: 54px;
  height: 54px;
  color: var(--fg);
}
/* Extra ancestor bumps specificity so we beat the shared
   '.praxis-modal-dialog h3 { color: var(--accent) }' rule that was
   painting the title green. Title is fg, not accent — accent is
   reserved for the one focal moment per screen. */
.praxis-modal-dialog .praxis-unlock-title {
  color: var(--fg);
  font-size: 1.35em;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-align: center;
  margin: 0 0 0.25em;
}
.praxis-unlock-sub {
  color: var(--dim);
  font-size: 0.9em;
  text-align: center;
  margin: 0 0 1.6em;
}
.praxis-unlock-input {
  width: 100%;
  background: color-mix(in srgb, var(--bg, #0a0a0a) 60%, transparent);
  border: 1px solid var(--border, #333);
  border-radius: 12px;
  color: var(--fg, #c0c0c0);
  font-family: inherit;
  font-size: 1.1em;
  padding: 0.9em 1em;
  margin-bottom: 0.8em;
  box-sizing: border-box;
  transition: border-color 0.15s, background 0.15s;
}
.praxis-unlock-input:focus {
  outline: none;
  border-color: var(--fg, #c0c0c0);
  background: color-mix(in srgb, var(--bg, #0a0a0a) 40%, transparent);
}
/* Error state: red border + subtle shake. Border alone tells the
   eye WHAT is wrong; motion is the momentary signal. No error text
   pushes the button down — layout stays stable per design
   philosophy principle 9. The shared '.praxis-modal-dialog
   input[type="password"] { border: ... !important }' rule beats a
   normal border-color, so we !important the error color to win. */
.praxis-modal-dialog .praxis-unlock-input.is-error {
  border-color: #ef4444 !important;
  animation: praxis-input-shake 0.28s ease-in-out;
}
@keyframes praxis-input-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-4px); }
  40%      { transform: translateX(3px); }
  60%      { transform: translateX(-2px); }
  80%      { transform: translateX(1px); }
}
/* Reserved space for a screen-reader-visible label. Off-screen so
   assistive tech still announces the error without shifting the
   dialog. */
.praxis-unlock-error {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.praxis-unlock-actions {
  display: flex;
  gap: 0.5em;
  flex-direction: column;
}
/* Extra specificity via .praxis-modal-dialog ancestor beats the
   shared '.praxis-modal-dialog button' rule that otherwise wins by
   0-2-1 specificity and hides our primary button text (color: --fg
   on background: --fg == invisible). */
.praxis-modal-dialog .praxis-unlock-btn-primary {
  background: var(--fg);
  color: var(--bg);
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 1em;
  font-weight: 500;
  padding: 0.85em 1.6em;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}
.praxis-modal-dialog .praxis-unlock-btn-primary:hover { opacity: 0.9; }
.praxis-modal-dialog .praxis-unlock-btn-primary:active { transform: scale(0.98); }
.praxis-modal-dialog .praxis-unlock-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.praxis-modal-dialog .praxis-unlock-btn-secondary {
  background: none;
  color: var(--dim);
  border: none;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.95em;
  padding: 0.7em 1em;
  cursor: pointer;
  transition: color 0.15s;
}
.praxis-modal-dialog .praxis-unlock-btn-secondary:hover { color: var(--fg); }
.praxis-modal-dialog .praxis-unlock-switch {
  background: none;
  border: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.82em;
  padding: 0.5em 0;
  cursor: pointer;
  text-align: center;
  width: 100%;
  margin-top: 1em;
}
.praxis-modal-dialog .praxis-unlock-switch:hover { color: var(--fg); }
.praxis-modal-dialog input[type="text"],
.praxis-modal-dialog input[type="password"],
.praxis-modal-dialog select {
  background: color-mix(in srgb, var(--bg, #0a0a0a) 60%, transparent) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  color: var(--fg, #c0c0c0) !important;
}
.praxis-modal-dialog button {
  color: var(--fg, #c0c0c0);
  border-color: var(--border);
  border-radius: 6px;
}

/* Purchase confirmation wizard overlay */
.wizard-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg, #0a0a0a);
  z-index: 10001;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: wizard-slide-up 0.4s ease-out;
}
.wizard-overlay.closing {
  animation: wizard-slide-down 0.3s ease-in forwards;
}
@keyframes wizard-slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
@keyframes wizard-slide-down {
  from { transform: translateY(0); }
  to { transform: translateY(100%); }
}
/* Purchase amount selection buttons */
.purchase-amount-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: inherit;
  font-size: 0.9em;
  padding: 0.6em 0.5em;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s;
  font-weight: 500;
}
.purchase-amount-btn:hover { border-color: var(--accent); color: var(--accent); }
.purchase-amount-btn.selected {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
  font-weight: 600;
}

.wizard-close {
  position: fixed;
  top: 1em;
  right: 1.5em;
  background: none;
  border: none;
  color: #555;
  font-size: 1.8em;
  cursor: pointer;
  padding: 0.5em;
  line-height: 1;
  z-index: 10002;
}
.wizard-close:hover { color: #fff; }

@media (max-width: 768px) {
  .praxis-modal-overlay {
    align-items: flex-end !important;
  }
  .praxis-modal-dialog {
    max-width: 100%;
    width: 100%;
    border-radius: 12px 12px 0 0;
    border-bottom: none;
    padding-bottom: calc(2em + env(safe-area-inset-bottom));
    max-height: 85vh;
    overflow-y: auto;
  }
}

/* --- Funding bottom sheet (always slides up from bottom) --- */
.funding-sheet-overlay {
  align-items: flex-end !important;
  justify-content: center !important;
}
.funding-sheet {
  max-width: 500px;
  width: 100%;
  padding: 1.5em 1.5em calc(1em + env(safe-area-inset-bottom));
  border-radius: 16px 16px 0 0;
  border-bottom: none;
  max-height: 85vh;
  overflow-y: auto;
  animation: slideUp 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
.funding-sheet::before {
  content: '';
  display: block;
  width: 36px;
  height: 4px;
  background: #333;
  border-radius: 2px;
  margin: 0 auto 1em;
}
@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.funding-sheet-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2em; }
.funding-sheet-header h3 { margin: 0; font-size: 1em; font-weight: 400; color: var(--fg, #c0c0c0); }
.funding-sheet-needed { font-size: 0.85em; color: var(--accent, #00ff41); }
.funding-section-label { font-size: 0.75em; color: var(--dim, #666); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.6em; }
.funding-chains { display: flex; flex-direction: column; gap: 0.4em; margin-bottom: 1.2em; }
.funding-chain-row { display: flex; align-items: center; justify-content: space-between; padding: 0.5em 0.6em; border: 1px solid var(--border, #333); background: var(--bg, #0a0a0a); }
.funding-chain-row:hover { border-color: var(--dim, #666); }
.funding-chain-info { display: flex; align-items: center; gap: 0.6em; }
.funding-chain-name { font-size: 0.85em; color: var(--fg, #c0c0c0); min-width: 6em; }
.funding-chain-balance { font-size: 0.85em; color: var(--dim, #666); }
.funding-chain-balance.sufficient { color: var(--accent, #00ff41); }
.funding-bridge-btn { background: none; border: 1px solid var(--accent, #00ff41); color: var(--accent, #00ff41); font-family: inherit; font-size: 0.8em; padding: 0.25em 0.7em; cursor: pointer; white-space: nowrap; }
.funding-bridge-btn:hover { background: var(--accent, #00ff41); color: #000; }
.funding-bridge-btn:disabled { opacity: 0.4; cursor: default; }
.funding-bridge-btn:disabled:hover { background: none; color: var(--accent, #00ff41); }
.funding-chain-row.no-balance { opacity: 0.4; }
.funding-fiat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5em; margin-bottom: 1.2em; }
.funding-fiat-btn { display: flex; align-items: center; justify-content: center; gap: 0.4em; padding: 0.6em 0.4em; border: 1px solid var(--border, #333); background: var(--bg, #0a0a0a); color: var(--fg, #c0c0c0); font-family: inherit; font-size: 0.82em; cursor: pointer; }
.funding-fiat-btn:hover { border-color: var(--accent, #00ff41); color: var(--accent, #00ff41); }
.funding-fiat-btn i { font-size: 1.1em; }
.funding-status { font-size: 0.85em; color: var(--muted, #888); min-height: 1.5em; margin-bottom: 0.8em; }
.funding-status.error { color: var(--red, #a44); }
.funding-status.success { color: var(--accent, #00ff41); }
.funding-cancel-btn { display: block; width: 100%; background: none; border: 1px solid var(--border, #333); color: var(--dim, #666); font-family: inherit; font-size: 0.85em; padding: 0.5em; cursor: pointer; }
.funding-cancel-btn:hover { border-color: var(--dim, #666); color: var(--fg, #c0c0c0); }
.funding-loading { display: flex; align-items: center; justify-content: center; padding: 2em; color: var(--dim, #666); font-size: 0.85em; }

/* Invites sheet */
.invites-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg, #0a0a0a);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: slideUp 0.4s ease-out;
}
.invites-overlay.closing {
  animation: wizard-slide-down 0.3s ease-in forwards;
}
@keyframes wizard-slide-down {
  from { transform: translateY(0); }
  to { transform: translateY(100%); }
}
.invites-close {
  position: fixed;
  top: 1em;
  right: 1.5em;
  background: none;
  border: none;
  color: var(--dim, #555);
  font-size: 1.8em;
  cursor: pointer;
  padding: 0.5em;
  line-height: 1;
  z-index: 10001;
}
.invites-close:hover { color: var(--fg, #fff); }
.invites-sheet {
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
  padding: 3em 2em;
  flex: 1;
}
.invites-title {
  color: var(--accent, #fff);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  margin: 0 0 0.5em;
}
.invites-count {
  color: var(--fg, #c0c0c0);
  font-size: 0.9em;
  margin: 0 0 1.5em;
}
.invite-row {
  padding: 0.6em 0;
  border-bottom: 1px solid var(--border, #222);
}
.invite-row:has(.invite-card-inline) {
  border-bottom: none;
  padding: 0;
  flex-shrink: 0;
}
.invite-cards-scroll {
  display: flex;
  gap: 1em;
  overflow-x: auto;
  padding: 0.5em 0 1em;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scroll-snap-type: x mandatory;
}
.invite-cards-scroll .invite-row {
  scroll-snap-align: start;
  min-width: 280px;
  max-width: 320px;
}
.invite-card-inline {
  border: 1px solid var(--border, #222);
  border-radius: 8px;
  overflow: hidden;
}
.invite-card-inline.claimed {
  opacity: 0.4;
  pointer-events: none;
  position: relative;
}
.invite-card-inline.claimed::after {
  content: 'claimed';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--fg);
  font-size: 1.2em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  z-index: 1;
}
.invite-card-preview img {
  display: block;
  width: 100%;
}
.invite-card-controls {
  padding: 0.75em;
}
.invite-code {
  color: var(--fg, #c0c0c0);
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.85em;
  min-width: 10ch;
}
.invite-code.redeemed {
  color: var(--dim, #444);
  text-decoration: line-through;
}
.invite-badge {
  font-size: 0.75em;
  color: var(--dim, #666);
}
.invite-badge.sponsored {
  color: var(--accent, #00ff41);
}
.invite-action {
  background: none;
  border: 1px solid var(--border, #333);
  color: var(--fg, #c0c0c0);
  font-family: inherit;
  font-size: 0.8em;
  padding: 0.3em 1ch;
  cursor: pointer;
  margin-left: auto;
  transition: border-color 0.2s;
}
.invite-action:hover { border-color: var(--dim, #666); }

@media (max-width: 768px) {
  .funding-sheet { max-width: 100%; width: 100%; }
  .funding-fiat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* === Funding sheet — non-crypto-first redesign === */
.funding-help { font-size: 0.78em; color: var(--dim, #666); margin: 0 0 0.8em 0; line-height: 1.45; }
.funding-fiat-btn { padding: 0.85em 0.5em; font-size: 0.9em; transition: border-color 0.15s, color 0.15s; }
.funding-fiat-btn.primary { border-color: var(--accent); color: var(--accent); }
.funding-fiat-btn.primary:hover { background: var(--accent); color: #000; }
.funding-fiat-btn i { font-size: 1.2em; }
.funding-advanced { margin: 1em 0 0.8em; border-top: 1px solid var(--border, #222); padding-top: 0.9em; }
.funding-advanced summary { font-size: 0.8em; color: var(--muted, #888); cursor: pointer; padding: 0.3em 0; list-style: none; user-select: none; }
.funding-advanced summary::-webkit-details-marker { display: none; }
.funding-advanced summary::before { content: '▸ '; color: var(--dim, #666); transition: transform 0.15s; display: inline-block; }
.funding-advanced[open] summary::before { content: '▾ '; }
.funding-advanced summary:hover { color: var(--fg); }
.funding-show-all { display: block; width: 100%; margin-top: 0.4em; padding: 0.4em; background: none; border: 1px dashed var(--border, #333); color: var(--dim, #666); font-family: inherit; font-size: 0.75em; cursor: pointer; }
.funding-show-all:hover { color: var(--fg); border-color: var(--dim, #666); }

/* === Bridge / funding sheet polish === */
.funding-chain-row { transition: border-color 0.15s, background 0.15s; }
.funding-bridge-amt { width: 7ch; background: var(--bg, #0a0a0a); border: 1px solid var(--border, #333); color: var(--fg, #c0c0c0); font-family: inherit; font-size: 0.85em; padding: 0.25em 0.5ch; text-align: right; }
.funding-bridge-amt:focus { outline: none; border-color: var(--accent); }
.funding-progress { padding: 0.75em 1em; border: 1px solid var(--accent); background: rgba(0, 255, 65, 0.04); margin-bottom: 0.8em; font-size: 0.85em; color: var(--fg); display: flex; align-items: center; gap: 0.6em; }
.funding-progress .ph-spinner { animation: spin 1s linear infinite; }
.funding-progress.success { border-color: var(--accent); background: rgba(0, 255, 65, 0.06); }
.funding-progress.error { border-color: var(--red, #a44); background: rgba(170, 68, 68, 0.06); color: var(--red, #a44); }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* === Funding doc modal (vault-save-doc layout) ===
 * Full-page scrollable doc. Provider rows are the CTA — one row per method,
 * whole row is a tap target ≥ 44px. Chain-bridge section is tucked inside a
 * <details> because most artists won't need it. Reuses .vault-save-* type
 * scale from the send/receive modals so hierarchy stays consistent. */
.funding-doc-overlay { padding: 0; }
.funding-doc { max-width: 520px; }
.funding-doc .funding-progress { margin: 0; }
.funding-doc .funding-provider-list {
  margin-top: 0.55em;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.funding-doc .funding-fiat-btn.funding-provider-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.9em;
  width: 100%;
  min-height: 60px;
  padding: 0.85em 1em;
  text-align: left;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  background: color-mix(in srgb, var(--fg) 3%, transparent);
  color: var(--fg);
  font-size: 0.95em;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.05s;
}
.funding-doc .funding-provider-row:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.funding-doc .funding-provider-row:active { transform: translateY(1px); }
.funding-doc .funding-provider-icon {
  flex: 0 0 auto;
  width: 2.4em;
  height: 2.4em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  color: var(--fg);
}
.funding-doc .funding-provider-icon i { font-size: 1.3em; line-height: 1; }
.funding-doc .funding-provider-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  line-height: 1.3;
}
.funding-doc .funding-provider-name {
  font-size: 0.98em;
  font-weight: 500;
  color: var(--fg);
  letter-spacing: -0.005em;
}
.funding-doc .funding-provider-blurb {
  font-size: 0.78em;
  color: var(--dim);
  font-weight: 400;
  line-height: 1.4;
}
.funding-doc .funding-provider-arrow {
  flex: 0 0 auto;
  color: var(--dim);
  font-size: 1em;
  transition: transform 0.15s, color 0.15s;
}
.funding-doc .funding-provider-row:hover .funding-provider-arrow {
  color: var(--accent);
  transform: translateX(2px);
}

/* Chain rows inside the doc — align to the doc's typography, no card look */
.funding-doc .funding-advanced { margin-top: 0.4em; border-top-color: color-mix(in srgb, var(--fg) 8%, transparent); }
.funding-doc .funding-advanced summary { font-size: 0.82em; color: var(--muted); }
.funding-doc .funding-chains { margin-top: 0.4em; }
.funding-doc .funding-chain-row {
  padding: 0.6em 0.75em;
  border: 1px solid color-mix(in srgb, var(--fg) 8%, transparent);
  border-radius: 8px;
  background: transparent;
  gap: 0.6em;
  flex-wrap: wrap;
}
.funding-doc .funding-chain-info { min-width: 0; flex: 1 1 auto; }
.funding-doc .funding-chain-name { font-size: 0.9em; min-width: 0; }
.funding-doc .funding-chain-icon-slot {
  display: inline-block;
  width: 1.4em;
  text-align: center;
  color: var(--dim);
  margin-right: 0.4ch;
  font-variant-numeric: tabular-nums;
}
.funding-doc .funding-chain-sub {
  display: inline-block;
  font-size: 0.72em;
  color: var(--dim);
  margin-left: 0.5ch;
}
.funding-doc .funding-chain-balance {
  font-size: 0.85em;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.funding-doc .funding-chain-balance.sufficient { color: var(--green, var(--accent)); }
.funding-doc .funding-bridge-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.4ch;
  flex-wrap: nowrap;
}
.funding-doc .funding-bridge-amt {
  width: 7ch;
  min-height: 34px;
  border-radius: 6px;
}
.funding-doc .funding-bridge-btn {
  min-height: 34px;
  padding: 0.35em 0.75em;
  border-radius: 6px;
}
.funding-doc .funding-help-centered { text-align: center; padding: 0.5em; }

/* Bottom-of-doc secondary action — sits inside .vault-save-actions, so it
 * gets the same block spacing as the primary CTA in the send/receive docs.
 * Rendered as a quiet text button, not a filled one — this isn't the story. */
.funding-doc .vault-save-actions { margin-top: 0.6em; }
.funding-doc .funding-cancel-btn {
  display: block;
  width: 100%;
  min-height: 44px;
  background: none;
  border: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
  color: var(--dim);
  font-family: inherit;
  font-size: 0.9em;
  padding: 0.7em;
  cursor: pointer;
  border-radius: 10px;
  transition: color 0.15s, border-color 0.15s;
}
.funding-doc .funding-cancel-btn:hover { color: var(--fg); border-color: color-mix(in srgb, var(--fg) 25%, transparent); }

@media (max-width: 560px) {
  .funding-doc .funding-provider-row { padding: 0.9em; }
  .funding-doc .funding-provider-blurb { font-size: 0.75em; }
  .funding-doc .funding-chain-row { padding: 0.65em 0.7em; }
  .funding-doc .funding-bridge-amt { width: 6ch; }
}

/* === Ramp modal (Peer-style) === */
.ramp-dialog { max-width: 460px; width: 100%; padding: 0; border: 1px solid var(--border, #333); background: var(--bg, #0a0a0a); }
.ramp-header { display: flex; align-items: center; justify-content: space-between; padding: 0.9em 1.1em; border-bottom: 1px solid var(--border, #222); }
.ramp-header-back { background: none; border: none; color: var(--dim, #666); font-size: 1.1em; cursor: pointer; padding: 0.25em; }
.ramp-header-back:hover { color: var(--fg); }
.ramp-header-title { font-size: 0.95em; color: var(--fg, #c0c0c0); letter-spacing: 0.02em; text-transform: uppercase; font-weight: 500; }
.ramp-header-spacer { width: 1.6em; }
.ramp-tabs { display: flex; gap: 0; padding: 0.5em 1.1em 0; }
.ramp-tab { flex: 1; background: none; border: none; border-bottom: 1px solid transparent; padding: 0.6em 0; color: var(--dim, #666); font-family: inherit; font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; }
.ramp-tab.active { color: var(--fg); border-bottom-color: var(--accent); }
.ramp-tab:hover:not(.active) { color: var(--muted, #888); }
.ramp-body { padding: 1.1em; }

/* Step indicator */
.ramp-steps { display: flex; align-items: center; gap: 0; padding: 1em 1.1em 1.5em; }
.ramp-step { display: flex; flex-direction: column; align-items: center; gap: 0.4em; flex: 0 0 auto; }
.ramp-step-icon { width: 2em; height: 2em; border-radius: 50%; border: 1px solid var(--border, #333); display: flex; align-items: center; justify-content: center; font-size: 0.9em; color: var(--dim, #666); background: var(--bg, #0a0a0a); }
.ramp-step.active .ramp-step-icon { border-color: var(--accent); color: var(--accent); background: rgba(0, 255, 65, 0.05); }
.ramp-step.done .ramp-step-icon { border-color: var(--accent); color: var(--accent); background: var(--accent); color: #000; }
.ramp-step-label { font-size: 0.7em; color: var(--dim, #666); text-transform: uppercase; letter-spacing: 0.05em; }
.ramp-step.active .ramp-step-label, .ramp-step.done .ramp-step-label { color: var(--fg); }
.ramp-step-line { flex: 1; height: 1px; background: var(--border, #333); margin: 0 0.4em; align-self: flex-start; margin-top: 1em; }
.ramp-step-line.done { background: var(--accent); }

/* Buy form */
.ramp-input-card { border: 1px solid var(--border, #333); padding: 0.9em 1em; margin-bottom: 0.6em; background: var(--bg, #050505); }
.ramp-input-label { font-size: 0.7em; color: var(--dim, #666); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.4em; }
.ramp-input-row { display: flex; align-items: center; justify-content: space-between; gap: 0.8em; }
.ramp-amount-input { background: none; border: none; color: var(--fg, #c0c0c0); font-family: inherit; font-size: 1.6em; font-weight: 500; width: 100%; padding: 0; outline: none; -moz-appearance: textfield; }
.ramp-amount-input::-webkit-outer-spin-button, .ramp-amount-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ramp-currency-pill { display: inline-flex; align-items: center; gap: 0.4ch; padding: 0.35em 0.8ch; border: 1px solid var(--border, #333); color: var(--fg); font-size: 0.85em; flex-shrink: 0; }
.ramp-method-pill { display: inline-flex; align-items: center; gap: 0.4ch; padding: 0.4em 0.9ch; border: 1px solid var(--border, #333); background: none; color: var(--fg); font-family: inherit; font-size: 0.85em; cursor: pointer; }
.ramp-method-pill:hover { border-color: var(--accent); }
.ramp-method-pill .ph { font-size: 1em; }
.ramp-receive-meta { display: flex; justify-content: space-between; margin-top: 0.4em; font-size: 0.75em; color: var(--dim, #666); }

.ramp-rate-row { display: flex; align-items: center; gap: 0.6em; padding: 0.7em 0.9em; border: 1px solid var(--border, #333); margin: 0.6em 0; cursor: pointer; }
.ramp-rate-row:hover { border-color: var(--dim, #666); }
.ramp-rate-info { flex: 1; display: flex; align-items: center; gap: 0.6em; }
.ramp-rate-text { font-size: 0.9em; color: var(--fg); }
.ramp-rate-best { font-size: 0.7em; color: var(--accent); border: 1px solid var(--accent); padding: 0.1em 0.5ch; text-transform: uppercase; letter-spacing: 0.04em; }
.ramp-rate-arrow { color: var(--dim, #666); font-size: 0.85em; }
.ramp-rate-meta { display: flex; align-items: center; gap: 0.6em; font-size: 0.75em; color: var(--dim, #666); margin-top: 0.3em; }

.ramp-primary-btn { display: block; width: 100%; padding: 0.85em; border: none; background: var(--accent); color: #000; font-family: inherit; font-size: 0.9em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; margin-top: 0.8em; }
.ramp-primary-btn:hover { opacity: 0.9; }
.ramp-primary-btn:disabled { background: var(--border, #333); color: var(--dim, #666); cursor: not-allowed; }
.ramp-secondary-btn { display: block; width: 100%; padding: 0.7em; border: 1px solid var(--border, #333); background: none; color: var(--dim, #666); font-family: inherit; font-size: 0.85em; cursor: pointer; margin-top: 0.5em; }
.ramp-secondary-btn:hover { border-color: var(--dim, #666); color: var(--fg); }

/* Quote selector modal */
.ramp-quote-list { display: flex; flex-direction: column; gap: 0.4em; max-height: 60vh; overflow-y: auto; }
.ramp-quote-row { display: flex; align-items: center; justify-content: space-between; padding: 0.8em 0.9em; border: 1px solid var(--border, #333); cursor: pointer; }
.ramp-quote-row:hover { border-color: var(--dim, #666); }
.ramp-quote-row.selected { border-color: var(--accent); background: rgba(0, 255, 65, 0.04); }
.ramp-quote-amount { font-size: 1.05em; color: var(--fg); font-weight: 500; }
.ramp-quote-rate { font-size: 0.75em; color: var(--dim, #666); margin-top: 0.2em; }
.ramp-quote-right { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25em; }
.ramp-quote-handle { font-size: 0.7em; color: var(--dim, #666); padding: 0.15em 0.5ch; border: 1px solid var(--border, #333); }
.ramp-quote-method { font-size: 0.75em; color: var(--muted, #888); }
.ramp-quote-discount { font-size: 0.7em; color: var(--dim, #666); }
.ramp-quote-discount.negative { color: var(--red, #a44); }
.ramp-method-filters { display: flex; gap: 0.3em; flex-wrap: wrap; padding-bottom: 0.8em; margin-bottom: 0.8em; border-bottom: 1px solid var(--border, #222); }
.ramp-method-filter { padding: 0.3em 0.7ch; border: 1px solid var(--border, #333); background: none; color: var(--dim, #666); font-family: inherit; font-size: 0.75em; cursor: pointer; }
.ramp-method-filter:hover { color: var(--fg); }
.ramp-method-filter.active { border-color: var(--accent); color: var(--accent); }

/* Complete payment screen */
.ramp-timer { display: flex; align-items: center; gap: 0.5ch; padding: 0.7em 0.9em; border: 1px solid var(--border, #333); font-size: 0.85em; color: var(--muted, #888); margin-bottom: 1em; }
.ramp-timer .ph { font-size: 1em; }
.ramp-instructions { margin-bottom: 1em; }
.ramp-instructions h4 { margin: 0 0 0.5em 0; font-size: 0.9em; color: var(--fg); font-weight: 500; }
.ramp-instructions ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5em; }
.ramp-instructions li { display: flex; align-items: flex-start; gap: 0.6ch; font-size: 0.85em; color: var(--fg); }
.ramp-instructions li .ph-check { color: var(--accent); margin-top: 0.15em; }
.ramp-instructions li .ph-x { color: var(--red, #a44); margin-top: 0.15em; }
.ramp-instructions strong { color: var(--fg); }
.ramp-memo-row { display: flex; align-items: center; gap: 0.5ch; padding: 0.6em 0.9em; border: 1px solid var(--border, #333); background: var(--bg, #050505); margin-bottom: 1em; font-size: 0.85em; }
.ramp-memo-label { color: var(--dim, #666); }
.ramp-memo-value { color: var(--fg); font-weight: 500; flex: 1; }
.ramp-memo-btn { background: none; border: none; color: var(--dim, #666); cursor: pointer; padding: 0.2em; font-size: 0.95em; }
.ramp-memo-btn:hover { color: var(--accent); }
.ramp-confirm-row { display: flex; align-items: flex-start; gap: 0.5ch; margin-bottom: 0.8em; font-size: 0.8em; color: var(--muted, #888); cursor: pointer; }
.ramp-confirm-row input { margin: 0.2em 0 0 0; accent-color: var(--accent); }
.ramp-target { padding: 0.9em 1em; border: 1px solid var(--accent); background: rgba(0, 255, 65, 0.04); margin-bottom: 1em; }
.ramp-target-label { font-size: 0.75em; color: var(--dim, #666); margin-bottom: 0.3em; }
.ramp-target-value { font-size: 1.1em; color: var(--accent); font-weight: 500; }
.ramp-qr-wrap { display: flex; justify-content: center; margin: 1em 0 0.5em; }
.ramp-qr-wrap > div { background: #fff; padding: 0.6em; border: 1px solid var(--border, #333); display: inline-block; line-height: 0; }
.ramp-qr-wrap svg { display: block; }
.ramp-target-link { display: block; text-align: center; font-size: 0.8em; color: var(--accent); text-decoration: none; padding: 0.3em 0; margin-bottom: 0.3em; }
.ramp-target-link:hover { text-decoration: underline; }
.ramp-help { font-size: 0.78em; color: var(--dim, #666); margin: 0.4em 0; line-height: 1.45; }

/* Verify screen */
.ramp-verify-list { display: flex; flex-direction: column; gap: 0; margin-bottom: 1em; }
.ramp-verify-item { display: flex; align-items: flex-start; gap: 0.8em; padding: 0.7em 0; border-bottom: 1px solid var(--border, #222); }
.ramp-verify-item:last-child { border-bottom: none; }
.ramp-verify-item-icon { width: 1.6em; height: 1.6em; border-radius: 50%; border: 1px solid var(--border, #333); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--dim, #666); }
.ramp-verify-item-icon.done { border-color: var(--accent); color: var(--accent); }
.ramp-verify-item-icon.active { border-color: var(--accent); color: var(--accent); animation: pulse 1.5s ease-in-out infinite; }
.ramp-verify-item-content { flex: 1; }
.ramp-verify-item-title { font-size: 0.9em; color: var(--fg); }
.ramp-verify-item-sub { font-size: 0.75em; color: var(--dim, #666); margin-top: 0.15em; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

.ramp-status-msg { padding: 0.7em 0.9em; border: 1px solid var(--border, #333); font-size: 0.8em; color: var(--muted, #888); margin-bottom: 0.8em; }
.ramp-status-msg.error { border-color: var(--red, #a44); color: var(--red, #a44); }
.ramp-status-msg.success { border-color: var(--accent); color: var(--accent); }

/* --- Ramp doc modal (onramp/offramp full-screen shell) ---
 * Mirrors .vault-save-doc from earnings.js. Provider rows are the small
 * repeating unit: icon (fixed) + name/fee body (flex) + right-side affordance.
 * Rows are vertical, not a grid — content earns its size. */
.ramp-doc .ramp-tabs-doc { display: flex; gap: 0; padding: 0 0 1.25em; margin-bottom: 0.5em; border-bottom: 1px solid color-mix(in srgb, var(--fg) 8%, transparent); }
.ramp-doc .ramp-tab { flex: 1; padding: 0.55em 0; letter-spacing: 0.08em; }

.ramp-provider-section { display: flex; flex-direction: column; gap: 0.55em; }
.ramp-provider-section .vault-save-field-label { display: block; margin-bottom: 0.1em; }

.ramp-provider-list { display: flex; flex-direction: column; gap: 0.35em; }

.ramp-provider-row {
  display: flex;
  align-items: center;
  gap: 0.85em;
  width: 100%;
  padding: 0.85em 1em;
  min-height: 44px; /* mobile touch target */
  background: color-mix(in srgb, var(--fg) 3%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 8%, transparent);
  border-radius: 10px;
  color: var(--fg);
  font-family: inherit;
  font-size: 0.95em;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.ramp-provider-row:hover:not(:disabled) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.ramp-provider-row:disabled { opacity: 0.4; cursor: not-allowed; }
.ramp-provider-row.active,
.ramp-provider-row-selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.ramp-provider-icon { flex: 0 0 auto; display: inline-flex; width: 1.6em; justify-content: center; font-size: 1.3em; color: var(--fg); }
.ramp-provider-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.15em; }
.ramp-provider-name { font-size: 0.95em; color: var(--fg); font-weight: 500; }
.ramp-provider-fee { font-size: 0.78em; color: var(--dim); line-height: 1.35; }
.ramp-provider-soon { color: var(--dim); font-size: 0.78em; font-weight: 400; margin-left: 0.35ch; }
.ramp-provider-caret { color: var(--dim); font-size: 0.9em; flex: 0 0 auto; }
.ramp-provider-change { color: var(--accent); font-size: 0.78em; letter-spacing: 0.02em; flex: 0 0 auto; }
.ramp-provider-check { color: var(--accent); flex: 0 0 auto; display: inline-flex; }

.ramp-rate-row-doc { border-radius: 10px; margin: 0; }

.ramp-pending-banner {
  display: flex; align-items: center; gap: 0.6em; flex-wrap: wrap;
  padding: 0.65em 0.85em;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  color: var(--fg);
  font-size: 0.82em;
}
.ramp-pending-banner > span { flex: 1 1 12ch; }
.ramp-pending-banner .ramp-method-pill { font-size: 0.75em; padding: 0.28em 0.7ch; }
.ramp-method-pill.ramp-danger { border-color: var(--red, #a44); color: var(--red, #a44); }
.ramp-withdraw-btn.ramp-danger { font-size: 0.75em; padding: 0.3em 0.8ch; }

@media (max-width: 560px) {
  .ramp-doc .ramp-tab { font-size: 0.75em; }
  .ramp-provider-row { padding: 0.75em 0.85em; font-size: 0.92em; }
  .ramp-provider-name { font-size: 0.92em; }
  .ramp-provider-fee { font-size: 0.75em; }
  .ramp-provider-icon { font-size: 1.2em; width: 1.4em; }
  .ramp-pending-banner { font-size: 0.78em; padding: 0.55em 0.7em; }
}

@media (max-width: 480px) {
  .ramp-dialog { max-width: 100%; }
}

/* Supporter homepage — masonry grid + top artists */
/* Supporter collection — full viewport width */
#supporter-collection-section {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  padding: 1.5em 1em;
}
#supporter-collection-section h3 { padding: 0 0.5em; }
.masonry-grid { column-count: 4; column-gap: 6px; padding: 0; }
.masonry-tile { break-inside: avoid; margin-bottom: 6px; overflow: hidden; position: relative; cursor: pointer; display: block; text-decoration: none; color: var(--fg); }
.masonry-tile img { width: 100%; display: block; }
.masonry-tile-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.8)); padding: 0.75em; }
.my-artists-section { margin-bottom: 2em; }
.top-artists-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1em; }
.top-artist-card { display: flex; flex-direction: column; align-items: center; gap: 0.5em; padding: 1em; border: 1px solid var(--border); text-decoration: none; color: var(--fg); }
.top-artist-card:hover { border-color: var(--accent); }
@media (max-width: 900px) { .masonry-grid { column-count: 3; } }
@media (max-width: 600px) { .masonry-grid { column-count: 2; } .top-artists-grid { grid-template-columns: repeat(2, 1fr); } }

/* --- Vault --- */
/* --- Vault — the document. See docs/design-philosophy.md.
 * Reads top to bottom. No panels competing. Typography carries hierarchy.
 * Every section earns its size from the number it holds. */

.vault-doc {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2.5em;
}

/* The lead: total balance is the biggest number on the page. */
.vault-lead { }
.vault-lead-label {
  font-size: 0.72em;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 0.25em;
  /* flex, not inline-flex — the label needs to stay block-level so the
     total-balance value below it doesn't push up onto the same row. */
  display: flex;
  align-items: center;
  gap: 0.6em;
}
.vault-privacy-toggle {
  background: none;
  border: none;
  color: var(--dim);
  cursor: pointer;
  padding: 0.15em;
  font-size: 1.2em;
  line-height: 1;
  transition: color 0.15s;
}
.vault-privacy-toggle:hover { color: var(--fg); }

/* Blur every monetary value in the vault while private mode is on.
   Un-blurs on hover so users can peek without toggling. Balance,
   earned/spent/net chips, chain rows, savings values, income/
   outflow, history rows — all covered by one selector list. */
.vault-doc.is-private .vault-lead-value,
.vault-doc.is-private .vault-lead-chip,
.vault-doc.is-private .vault-lead-row-bal,
.vault-doc.is-private .vault-lead-row-fiat,
.vault-doc.is-private [data-vault-private],
.vault-doc.is-private .vault-cashout-row-note,
.vault-doc.is-private .vault-history-row-amt {
  filter: blur(9px);
  transition: filter 0.25s;
  cursor: pointer;
}
.vault-doc.is-private .vault-lead-value:hover,
.vault-doc.is-private .vault-lead-chip:hover,
.vault-doc.is-private .vault-lead-row-bal:hover,
.vault-doc.is-private .vault-lead-row-fiat:hover,
.vault-doc.is-private [data-vault-private]:hover,
.vault-doc.is-private .vault-cashout-row-note:hover,
.vault-doc.is-private .vault-history-row-amt:hover {
  filter: none;
}
.vault-lead-value {
  font-size: 3.4em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}
/* Total-balance toggle — clicking the number opens the chain breakdown
 * inline. The caret rotates on open so the affordance reads clearly. */
.vault-lead-toggle {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4ch;
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--fg);
  font-family: inherit;
  cursor: pointer;
  margin-bottom: 0.6em;
}
.vault-lead-caret {
  font-size: 0.9em;
  color: var(--dim);
  transition: transform 0.2s ease, color 0.15s;
  display: inline-block;
  transform: translateY(-0.2em);
}
.vault-lead-toggle:hover .vault-lead-caret { color: var(--fg); }
.vault-lead-toggle-open .vault-lead-caret { transform: translateY(-0.2em) rotate(180deg); }

/* Inline chain breakdown revealed under the total balance. */
.vault-lead-breakdown {
  margin: 0.4em 0 1em;
  padding: 0.9em 0 0.4em;
  border-top: 1px solid color-mix(in srgb, var(--fg) 6%, transparent);
  font-variant-numeric: tabular-nums;
  animation: vault-lead-slide 0.18s ease;
}
@keyframes vault-lead-slide {
  from { opacity: 0; transform: translateY(-2px); }
  to { opacity: 1; transform: translateY(0); }
}
.vault-lead-row {
  display: grid;
  grid-template-columns: 1fr auto 6em;
  gap: 1em;
  align-items: baseline;
  padding: 0.45em 0;
  font-size: 0.92em;
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 3%, transparent);
}
.vault-lead-row:last-child { border-bottom: 0; }
.vault-lead-row-name { color: var(--fg); }
.vault-lead-row-bal { color: var(--fg); }
.vault-lead-row-fiat { color: var(--dim); text-align: right; }
.vault-lead-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.6em;
  font-size: 0.95em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  margin-bottom: 1em;
}
.vault-lead-chip-key {
  color: var(--dim);
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-right: 0.5ch;
}

/* Actions are verbs — small, subordinate to the number. */
.vault-lead-verbs {
  display: flex;
  gap: 1.4em;
  font-size: 0.9em;
  padding-top: 0.5em;
  border-top: 1px solid color-mix(in srgb, var(--fg) 6%, transparent);
}
.vault-verb {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--dim);
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  transition: color 0.12s;
  text-decoration: none;
}
.vault-verb:hover,
.vault-verb:focus-visible {
  color: var(--fg);
  outline: none;
}
.vault-verb:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Section — an act in the document. */
.vault-act { }
.vault-act-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1em;
  margin-bottom: 0.9em;
  padding-bottom: 0.5em;
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 6%, transparent);
}
.vault-act-title {
  font-size: 0.72em;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 500;
  margin: 0;
}
.vault-act-badge {
  font-size: 0.75em;
  color: var(--green);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* Savings figure: a headline treatment for the balance. */
.vault-act-figure {
  font-size: 1.5em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.35em;
}

/* Coin figure: the BOLD glyph inline with the number, no pill/border —
 * the mark is the identity, kept quiet enough that typography still leads. */
.vault-coin-figure {
  display: inline-flex;
  align-items: center;
  gap: 0.55ch;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
}
.vault-coin-mark {
  display: inline-flex;
  align-items: center;
  margin-right: 0;
  transform: none;
}
.vault-coin-mark svg { width: 1.2em; height: 1.2em; display: block; }
.vault-coin-figure .vault-act-figure-unit { margin-left: 0.15ch; }
.vault-coin-figure .vault-act-figure-secondary { margin-left: 0.6ch; }
.vault-act-figure-main {
  font-weight: 700;
  letter-spacing: -0.015em;
}
.vault-act-figure-unit {
  color: var(--dim);
  font-weight: 500;
  font-size: 0.7em;
}
.vault-act-figure-secondary {
  color: var(--dim);
  font-weight: 400;
  font-size: 0.6em;
  margin-left: 0.4ch;
}
.vault-act-figure-empty {
  color: var(--dim);
  font-weight: 400;
}

/* Savings empty state — give BOLD a visible identity so an artist who
 * hasn't deposited yet knows what they're being offered. Subtle green
 * wash + coin mark + one-line pitch. NOT a chunky card — just enough
 * texture to read as "a thing you can put money into". */
.vault-savings-empty {
  display: flex;
  align-items: flex-start;
  gap: 1em;
  padding: 1em 1.1em;
  border: 1px solid color-mix(in srgb, var(--green) 25%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--green) 5%, transparent);
  margin: 0.5em 0 1em;
}
.vault-savings-empty-mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
}
.vault-savings-empty-mark svg { width: 44px; height: 44px; display: block; }
.vault-savings-empty-copy { flex: 1 1 auto; min-width: 0; }
.vault-savings-empty-title {
  font-size: 1.05em;
  color: var(--fg);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.2;
  margin-bottom: 0.35em;
}
.vault-savings-empty-teaser {
  font-size: 0.88em;
  color: var(--muted);
  line-height: 1.55;
}

/* Loud, unmissable error status inside the save modal. Anything less
 * lets a failure slip past the user's eye. */
.vault-save-status-error {
  color: var(--fg) !important;
  padding: 0.75em 1em !important;
  border: 1px solid #cc3333 !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, #cc3333 8%, transparent) !important;
  margin-top: 0.75em !important;
  line-height: 1.55 !important;
  font-size: 0.92em !important;
}
.vault-save-status-error strong { color: #ff6666; font-weight: 700; }

/* Success status — green ribbon so the user CAN'T miss it. */
.vault-save-status-done {
  color: var(--fg) !important;
  padding: 0.75em 1em !important;
  border: 1px solid color-mix(in srgb, var(--green) 45%, transparent) !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--green) 10%, transparent) !important;
  margin-top: 0.75em !important;
  line-height: 1.55 !important;
  font-size: 0.95em !important;
}
.vault-save-status-done strong { color: var(--green); font-weight: 700; }
.vault-save-btn-done {
  background: var(--green) !important;
  color: #000 !important;
  cursor: default !important;
}
.vault-save-step-done .vault-save-step-idx {
  background: var(--green) !important;
  color: #000 !important;
  border-color: var(--green) !important;
}
.vault-save-step-done .vault-save-step-label { color: var(--fg) !important; }

/* Progressive-disclosure pool table (vault view). Collapsed by default
 * when the user has no deposits — the list of "rETH / ETH / wstETH
 * stability pools" is jargon on first read. */
.vault-pool-table-toggle {
  background: transparent;
  border: 0;
  padding: 0.55em 0;
  color: var(--dim);
  font-family: inherit;
  font-size: 0.85em;
  cursor: pointer;
  transition: color 0.12s;
  display: block;
}
.vault-pool-table-toggle:hover,
.vault-pool-table-toggle:focus-visible { color: var(--fg); outline: none; }
.vault-act-yield {
  font-size: 0.9em;
  color: var(--muted);
  margin-bottom: 0.75em;
  font-variant-numeric: tabular-nums;
}
.vault-act-sub {
  font-size: 0.82em;
  color: var(--dim);
  margin-top: 0.1em;
  font-variant-numeric: tabular-nums;
}

/* Pool table — sits inline in the savings section, no box. */
.vault-pool-table {
  margin: 1em 0 0.75em;
  font-variant-numeric: tabular-nums;
}
.vault-pool-table-head {
  display: grid;
  grid-template-columns: 1fr 4em 5em;
  gap: 0.5em;
  font-size: 0.68em;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 6%, transparent);
}
.vault-pool-line {
  display: grid;
  grid-template-columns: 1fr 4em 5em;
  gap: 0.5em;
  padding: 0.55em 0;
  font-size: 0.9em;
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 3%, transparent);
}
.vault-pool-line:last-child { border-bottom: 0; }
.vault-pool-line-active { color: var(--green); }
.vault-pool-line-apr { color: var(--muted); text-align: right; }
.vault-pool-line-tvl { color: var(--dim); text-align: right; }
.vault-pool-line-badge {
  display: inline-block;
  margin-left: 0.4ch;
  padding: 0.05em 0.5ch;
  border-radius: 3px;
  background: color-mix(in srgb, var(--green) 15%, transparent);
  color: var(--green);
  font-size: 0.75em;
  font-weight: 500;
}

/* 4-column pool table variant (name / APR / 30d / size). Wide enough
 * that "apr" / "30d" / "size" headers never wrap. Keeps the 3-col
 * default so existing renderers don't break. */
.vault-pool-line-4col,
.vault-pool-table-head-4 {
  grid-template-columns: 1fr 3.2em 3.2em 4em !important;
}
.vault-pool-table-head { grid-template-columns: 1fr 4em 5em; }
.vault-pool-line-badge {
  background: color-mix(in srgb, var(--green) 20%, transparent);
  color: var(--green);
  font-size: 0.7em;
  font-weight: 500;
  padding: 0.1em 0.6ch;
  border-radius: 999px;
  margin-left: 0.5ch;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Active-pool row (user has money in this pool). Small green dot in
 * front of the name, user's amount reads as a caption underneath.
 * Scales the same whether they're in one pool or all four. */
.vault-pool-line-name-you {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.65ch;
  min-width: 0;
}
.vault-pool-line-dot {
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--green);
  flex: 0 0 auto;
  margin-top: 0.4em;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 20%, transparent);
}
.vault-pool-line-name-main { display: block; color: var(--fg); }
.vault-pool-line-you-sub {
  display: block;
  color: var(--green);
  font-size: 0.72em;
  font-variant-numeric: tabular-nums;
  margin-top: 0.05em;
  letter-spacing: 0.01em;
}

/* Rates-updated meta row + "how this works" toggle. */
.vault-pool-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1em;
  padding-top: 0.6em;
  margin-top: 0.3em;
  font-size: 0.75em;
  color: var(--dim);
}
.vault-pool-meta-toggle {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--dim);
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  transition: color 0.12s;
}
.vault-pool-meta-toggle:hover,
.vault-pool-meta-toggle:focus-visible { color: var(--fg); outline: none; }

/* "How BOLD savings work" — progressive disclosure. Plain-English mechanics,
 * links to Liquity docs, growth projection. Reads as a short essay, not a
 * spec sheet. */
.vault-savings-how {
  margin-top: 1em;
  padding: 1em 0 0.4em;
  border-top: 1px solid color-mix(in srgb, var(--fg) 6%, transparent);
}
.vault-savings-how-title {
  font-size: 0.7em;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 500;
  margin: 0 0 0.75em;
}
.vault-savings-how-body p {
  font-size: 0.88em;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 0.85em;
}
.vault-savings-how-body p strong {
  color: var(--fg);
  font-weight: 600;
}

/* Section-scoped CTA — subordinate to the section it acts on. */
.vault-act-cta {
  margin-top: 0.75em;
  background: transparent;
  border: 0;
  padding: 0.35em 0;
  color: var(--green);
  font-family: inherit;
  font-size: 0.95em;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.12s;
}
.vault-act-cta:hover,
.vault-act-cta:focus-visible {
  color: var(--fg);
  outline: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Chains: a compact 3-column table, one line per chain. */
.vault-chain-table {
  display: flex;
  flex-direction: column;
  font-variant-numeric: tabular-nums;
}
.vault-chain-line {
  display: grid;
  grid-template-columns: 1fr auto 6em;
  gap: 1em;
  align-items: baseline;
  padding: 0.55em 0;
  font-size: 0.95em;
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 3%, transparent);
}
.vault-chain-line:last-child { border-bottom: 0; }
.vault-chain-line-name { color: var(--fg); }
.vault-chain-line-bal { color: var(--fg); }
.vault-chain-line-fiat { color: var(--dim); text-align: right; }

/* Income + outflow — two columns because the two sides are the same idea. */
.vault-flow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2em;
  margin-bottom: 1.4em;
}
@media (max-width: 560px) { .vault-flow { grid-template-columns: 1fr; gap: 1.4em; } }
.vault-flow-col { display: flex; flex-direction: column; }
.vault-flow-label {
  font-size: 0.68em;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.55em;
}
.vault-flow-line {
  display: flex;
  justify-content: space-between;
  padding: 0.4em 0;
  font-size: 0.88em;
  color: var(--fg);
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 3%, transparent);
  font-variant-numeric: tabular-nums;
}
.vault-flow-line:last-child { border-bottom: 0; }

/* Activity: a bounded timeline. Not a panel. */
.vault-activity-label {
  font-size: 0.68em;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0.5em 0 0.4em;
}
.vault-history-inline {
  max-height: 260px;
  overflow-y: auto;
  border: 0 !important;
  border-radius: 0 !important;
}
.vault-history-inline .vault-tx {
  padding: 0.55em 0;
  border-color: color-mix(in srgb, var(--fg) 3%, transparent);
}
.vault-history-inline .vault-tx:last-child { border-bottom: 0; }

/* Real album/media thumbnail in the activity row — square, small, so the
 * sale reads as "this record" not "media sale". */
.vault-tx-thumb {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--fg) 5%, transparent);
}
.vault-tx-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Unclaimed callout — one line of attention. */
.vault-unclaimed-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em 1em;
  padding: 0.75em 0;
  border-top: 1px solid color-mix(in srgb, var(--green) 25%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--green) 25%, transparent);
  background: transparent;
}
.vault-unclaimed-line { font-size: 0.95em; color: var(--fg); flex: 1 1 auto; min-width: 0; }
.vault-unclaimed-line strong { color: var(--green); font-weight: 700; }
.vault-unclaimed-verbs { display: flex; gap: 1em; font-size: 0.9em; flex: 0 0 auto; }
.vault-unclaimed-status { color: var(--muted); font-size: 0.85em; margin: 0.35em 0 0; flex: 0 0 100%; }

.vault-hero { margin-bottom: 1.5em; }
.vault-total-label { font-size: 0.7em; color: var(--dim); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 0.15em; }
.vault-total-value { font-size: 2.2em; font-weight: 700; color: var(--fg); line-height: 1.15; font-variant-numeric: tabular-nums; margin-bottom: 0.6em; }
.vault-hero-summary { display: flex; gap: 1em; margin-bottom: 1em; flex-wrap: wrap; padding: 0.75em 0.9em; border: 1px solid var(--border); border-radius: 8px; }
.vault-hero-chip { display: flex; flex-direction: column; gap: 0.1em; }
.vault-hero-chip-label { font-size: 0.62em; color: var(--dim); text-transform: uppercase; letter-spacing: 0.09em; }
.vault-hero-chip-value { font-size: 0.95em; font-weight: 600; font-variant-numeric: tabular-nums; }
.vault-tokens { display: flex; flex-direction: column; gap: 0.5em; margin-bottom: 1em; padding: 0.75em; border: 1px solid var(--border); border-radius: 8px; }
.vault-token { display: flex; align-items: center; gap: 0.75em; padding: 0.35em 0; }
.vault-token-icon { width: 24px; height: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.vault-token-icon svg { width: 24px; height: 24px; }
.vault-token-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.vault-token-name { font-size: 0.85em; font-weight: 600; color: var(--fg); }
.vault-token-chain { font-size: 0.65em; color: var(--dim); }
.vault-token-amounts { display: flex; flex-direction: column; align-items: flex-end; }
.vault-token-bal { font-size: 0.85em; color: var(--fg); font-variant-numeric: tabular-nums; }
.vault-token-fiat { font-size: 0.7em; color: var(--dim); font-variant-numeric: tabular-nums; }
.vault-actions { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5em; }
@media (max-width: 720px) { .vault-actions { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 460px) { .vault-actions { grid-template-columns: repeat(2, 1fr); } }
.vault-action-btn { flex: 1; background: none; border: 1px solid var(--border); color: var(--fg); font-family: inherit; font-size: 0.8em; padding: 0.65em 0; cursor: pointer; border-radius: 6px; display: flex; align-items: center; justify-content: center; gap: 0.4ch; transition: border-color 0.15s, color 0.15s; }
.vault-action-btn:hover { border-color: var(--accent); color: var(--accent); }
.vault-action-btn i { font-size: 1.1em; }
.vault-savings { border: 1px solid color-mix(in srgb, var(--green) 20%, var(--border)); border-radius: 10px; padding: 1em; margin-bottom: 1.5em; background: color-mix(in srgb, var(--green) 3%, transparent); }
.vault-savings-header { display: flex; align-items: center; gap: 0.65em; margin-bottom: 0.65em; }
.vault-savings-icon { width: 32px; height: 32px; flex-shrink: 0; }
.vault-savings-icon svg { width: 32px; height: 32px; }
.vault-savings-title { font-size: 0.85em; font-weight: 600; color: var(--fg); }
.vault-savings-sub { font-size: 0.7em; color: var(--dim); }
.vault-savings-bal { font-size: 1.4em; font-weight: 700; font-variant-numeric: tabular-nums; margin-bottom: 0.15em; line-height: 1.15; letter-spacing: -0.01em; }
.vault-savings-fiat { color: var(--dim); font-size: 0.7em; font-weight: 500; margin-left: 0.35ch; }
.vault-savings-yield { display: flex; align-items: baseline; gap: 0.5ch; margin-bottom: 0.55em; padding: 0.35em 0.6ch; border-radius: 5px; background: color-mix(in srgb, var(--green) 8%, transparent); }
.vault-savings-yield-value { font-size: 0.95em; font-weight: 700; color: var(--green); font-variant-numeric: tabular-nums; }
.vault-savings-yield-unit { font-size: 0.72em; font-weight: 500; color: var(--green); opacity: 0.75; margin-left: 0.15ch; }
.vault-savings-yield-sep { color: var(--dim); font-size: 0.7em; opacity: 0.6; }
.vault-savings-yield-year { font-size: 0.75em; color: var(--muted); font-variant-numeric: tabular-nums; }
.vault-savings-yield-empty { font-size: 0.8em; color: var(--dim); margin-bottom: 0.75em; padding: 0.4em 0.6ch; border-radius: 5px; background: color-mix(in srgb, var(--green) 5%, transparent); }
.vault-savings-position { color: var(--dim); font-size: 0.78em; margin-top: 0.15em; font-variant-numeric: tabular-nums; }
.vault-savings-apr { display: flex; flex-direction: column; align-items: flex-end; }
.vault-apr-value { font-size: 1.15em; font-weight: 700; color: var(--green); font-variant-numeric: tabular-nums; }
.vault-apr-label { font-size: 0.6em; color: var(--dim); text-transform: uppercase; letter-spacing: 0.08em; }
.vault-pools { display: flex; flex-direction: column; gap: 0.1em; margin: 0.85em 0 0.75em; padding: 0.35em 0.5em; border: 1px solid color-mix(in srgb, var(--green) 12%, var(--border)); border-radius: 8px; }
.vault-pools-head { display: grid; grid-template-columns: 1fr 60px 60px; gap: 1ch; font-size: 0.62em; color: var(--dim); text-transform: uppercase; letter-spacing: 0.09em; padding: 0.3em 0.15em; border-bottom: 1px solid color-mix(in srgb, var(--fg) 5%, transparent); }
.vault-pools-head span:nth-child(2), .vault-pools-head span:nth-child(3) { text-align: right; }
.vault-pool-row { display: grid; grid-template-columns: 1fr 60px 60px; gap: 1ch; align-items: center; padding: 0.4em 0.15em; font-variant-numeric: tabular-nums; border-radius: 4px; }
.vault-pool-row-active { background: color-mix(in srgb, var(--green) 6%, transparent); }
.vault-pool-name { font-size: 0.85em; color: var(--fg); display: flex; align-items: center; gap: 0.5ch; }
.vault-pool-badge { display: inline-flex; align-items: center; padding: 0.05em 0.5ch; border-radius: 3px; background: color-mix(in srgb, var(--green) 20%, transparent); color: var(--green); font-size: 0.75em; font-weight: 600; }
.vault-pool-apr { font-size: 0.85em; font-weight: 600; color: var(--green); text-align: right; }
.vault-pool-tvl { font-size: 0.75em; color: var(--dim); text-align: right; }
.vault-save-cta { width: 100%; background: var(--green); border: none; color: var(--bg); font-family: inherit; font-size: 0.88em; font-weight: 600; padding: 0.7em 0; cursor: pointer; border-radius: 8px; transition: opacity 0.15s, transform 0.05s; display: flex; align-items: center; justify-content: center; gap: 0.4ch; }
.vault-save-cta:hover { opacity: 0.9; }
.vault-save-cta:active { transform: translateY(1px); }
.vault-save-cta i { font-size: 1.05em; }
.vault-unclaimed { border: 1px solid color-mix(in srgb, var(--green) 30%, var(--border)); border-radius: 8px; padding: 1em; margin-bottom: 1.5em; background: color-mix(in srgb, var(--green) 3%, transparent); }
.vault-unclaimed-header { font-size: 0.75em; color: var(--green); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.6em; display: flex; align-items: center; gap: 0.5ch; }
.vault-unclaimed-row { display: flex; justify-content: space-between; align-items: center; padding: 0.35em 0; font-size: 0.85em; }
.vault-claim-btn { background: none; border: 1px solid var(--green); color: var(--green); font-family: inherit; font-size: 0.8em; padding: 0.2em 1ch; cursor: pointer; border-radius: 4px; transition: background 0.15s; }
.vault-claim-btn:hover { background: color-mix(in srgb, var(--green) 10%, transparent); }
.vault-section { margin-bottom: 1.5em; }
.vault-section-title { font-size: 0.7em; color: var(--dim); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 0.6em; }
.vault-stats { display: flex; gap: 2em; margin-bottom: 1em; flex-wrap: wrap; }
.vault-stat-value { font-size: 1.15em; font-weight: 600; font-variant-numeric: tabular-nums; }
.vault-stat-label { font-size: 0.75em; color: var(--dim); }
.vault-breakdown { display: flex; flex-direction: column; }
.vault-breakdown-row { display: flex; justify-content: space-between; align-items: center; padding: 0.45em 0; border-bottom: 1px solid color-mix(in srgb, var(--fg) 4%, transparent); font-size: 0.85em; }
.vault-breakdown-row:last-child { border-bottom: none; }
.vault-breakdown-label { color: var(--muted); display: flex; align-items: center; gap: 0.5ch; }
.vault-breakdown-val { font-variant-numeric: tabular-nums; }
.vault-history { max-height: 60vh; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; }
.vault-tx { display: flex; align-items: center; gap: 0.75em; padding: 0.65em 0.75em; border-bottom: 1px solid color-mix(in srgb, var(--fg) 4%, transparent); }
.vault-tx:last-child { border-bottom: none; }
.vault-tx-icon { width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--fg) 5%, transparent); display: flex; align-items: center; justify-content: center; font-size: 0.8em; flex-shrink: 0; }
.vault-tx-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vault-tx-label { font-size: 0.8em; color: var(--fg); }
.vault-tx-detail { font-size: 0.7em; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vault-tx-right { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
.vault-tx-amount { font-size: 0.8em; font-variant-numeric: tabular-nums; }
.vault-tx-time { font-size: 0.65em; color: var(--dim); }
.vault-modal-title { font-size: 1em; font-weight: 600; margin: 0 0 0.25em; }
.vault-modal-sub { font-size: 0.8em; color: var(--dim); margin: 0 0 1em; }
.vault-addr-box { font-family: monospace; font-size: 0.75em; word-break: break-all; padding: 0.75em; border: 1px solid var(--border); border-radius: 6px; margin-bottom: 0.75em; color: var(--muted); background: color-mix(in srgb, var(--fg) 3%, transparent); }
.vault-modal-btn { width: 100%; background: none; border: 1px solid var(--border); color: var(--fg); font-family: inherit; font-size: 0.85em; padding: 0.6em 0; cursor: pointer; border-radius: 6px; display: flex; align-items: center; justify-content: center; gap: 0.4ch; transition: border-color 0.15s; }
.vault-modal-btn:hover { border-color: var(--accent); color: var(--accent); }
.vault-modal-btn-primary { border-color: var(--accent); color: var(--accent); }
.vault-modal-btn-primary:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.vault-modal-btn:disabled { opacity: 0.4; cursor: default; }
.vault-swap-fields { display: flex; flex-direction: column; gap: 0.75em; }
.vault-field-label { font-size: 0.7em; color: var(--dim); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.25em; display: block; }
.vault-field-row { display: flex; align-items: center; gap: 0.5em; }
.vault-field-token { display: flex; align-items: center; gap: 0.35ch; font-size: 0.85em; font-weight: 600; flex-shrink: 0; }
.vault-field-token svg { width: 20px; height: 20px; }
.vault-field-input { flex: 1; background: none; border: 1px solid var(--border); color: var(--fg); font-family: inherit; font-size: 1em; padding: 0.5em 0.6ch; border-radius: 6px; text-align: right; min-width: 0; }
.vault-field-input:focus { outline: none; border-color: var(--accent); }
.vault-field-input-full { text-align: left; width: 100%; }
.vault-field-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 0.2em; }
.vault-field-fiat { font-size: 0.75em; color: var(--dim); }
.vault-field-max { background: none; border: none; color: var(--accent); font-family: inherit; font-size: 0.75em; cursor: pointer; padding: 0; }
.vault-field-output { font-size: 1em; color: var(--dim); text-align: right; flex: 1; }
/* --- Save dialog --- */
/* Save-to-BOLD — full-page slide-up. Uses .wizard-overlay for the sheet.
   Body content is centered and constrained so the layout reads like a
   finance app (Betterment / Wealthfront), not a wide dashboard. */
.vault-save-overlay { padding: 0; }
.vault-save-close { color: var(--dim); }
.vault-save-close:hover { color: var(--fg); }
/* --- Save modal (redesigned per docs/design-philosophy.md) ---
 * Single-column narrative. Amount is the hero. Steps + summary reveal
 * progressively when the user has entered an amount. Send modal reuses
 * the amount field styles, so keep those generic.
 *
 * Grid layout kept for compatibility with the old vault-save-page users;
 * new doc uses .vault-save-doc which never grids. */
.vault-save-doc {
  max-width: 520px;
  width: 100%;
  margin: 0 auto;
  padding: 3.2em 1.4em 3em;
  box-sizing: border-box;
}
/* Mobile: shrink outer padding, keep breathing room around the hero.
 * Touch targets stay ≥ 44px because the buttons already use 1em+ padding. */
@media (max-width: 560px) {
  .vault-save-doc { padding: 3.6em 1.1em 5em; }
  .vault-save-lead h1 { font-size: 1.2em; }
  .vault-save-amount-input { font-size: 2em; }
  .vault-save-doc-body { gap: 1.5em; }
}

/* Receive modal — QR + monospace address block. */
/* QR sits at a size that reads instantly — big enough to scan from a
   phone across the room, small enough that it doesn't hijack the page.
   The white background is a functional necessity (contrast); the tiny
   inset padding keeps the quiet zone honest without turning the QR
   into a hero. */
.vault-recv-qr {
  display: flex;
  justify-content: center;
  align-self: center;
  padding: 0.6em;
  background: #fff;
  border-radius: 10px;
  width: fit-content;
  margin: 0.5em auto 0;
}
.vault-recv-qr svg { width: 200px; height: 200px; display: block; }
/* Address is a number — no box, no chrome. Monospace + tabular-nums so
   the character grid reads cleanly; centered so eye lands on it after
   the QR. `.vault-save-field-label` above provides the "your address"
   caption in .vault-save-field-label's default muted style. */
.vault-recv-addr {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  letter-spacing: 0.02em;
  color: var(--fg);
  word-break: break-all;
  line-height: 1.5;
  text-align: center;
  margin-top: 0.3em;
  max-width: 34ch;
  margin-left: auto;
  margin-right: auto;
}
/* Ghost copy button — utility, not a money-movement CTA. Sits below
   the address as a plain link-styled action so the QR + address stay
   the story of the page. */
.vault-recv-copy {
  align-self: center;
  background: none;
  border: 0;
  padding: 0.4em 0.8ch;
  color: var(--dim);
  font-family: inherit;
  font-size: 0.9em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
  transition: color 0.12s;
  margin-top: 0.4em;
}
.vault-recv-copy:hover, .vault-recv-copy:focus-visible {
  color: var(--fg);
  outline: none;
}
.vault-recv-copy i { font-size: 1em; }
/* Tighter doc for the receive dialog so the three elements
   (QR + address + copy) sit as one legible block, not spread across
   the viewport. */
.vault-recv-doc { max-width: 420px; }
.vault-recv-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6em;
  padding-top: 0.4em;
}
.vault-save-lead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
  margin-bottom: 0.4em;
}
.vault-save-lead-title { display: flex; align-items: center; gap: 0.6ch; }
.vault-save-lead-mark { display: inline-flex; }
.vault-save-lead-mark svg { width: 22px; height: 22px; }
.vault-save-lead h1 {
  font-size: 1.35em; font-weight: 700; color: var(--fg);
  letter-spacing: -0.02em; margin: 0; line-height: 1;
}
.vault-save-lead-apr {
  font-size: 0.9em;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.vault-save-lead-apr span {
  color: var(--green);
  font-size: 1.2em;
  font-weight: 700;
  margin-right: 0.35ch;
}
.vault-save-lead-sub {
  font-size: 0.9em;
  color: var(--muted);
  line-height: 1.55;
  margin: 0 0 1.75em;
  max-width: 46ch;
}
.vault-save-lead-sub .vault-save-learnmore { color: var(--accent); text-decoration: none; margin-left: 0.35em; font-weight: 500; }
.vault-save-lead-sub .vault-save-learnmore:hover { text-decoration: underline; text-underline-offset: 3px; }

.vault-save-doc-body {
  display: flex;
  flex-direction: column;
  gap: 1.75em;
}

.vault-save-from { }
.vault-save-from .vault-save-field-label { display: block; margin-bottom: 0.35em; }
.vault-save-from .vault-chain-row-current { background: color-mix(in srgb, var(--fg) 3%, transparent); }

/* Send modal "to" field — full-width, borderless, matches the amount input. */
.vault-save-to-input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
  padding: 0.4em 0;
  color: var(--fg);
  font-family: inherit;
  font-size: 1.05em;
  font-weight: 500;
  outline: none;
  box-sizing: border-box;
  margin-top: 0.35em;
}
.vault-save-to-input::placeholder { color: color-mix(in srgb, var(--fg) 25%, transparent); font-weight: 400; }
.vault-save-to-input:focus { border-bottom-color: var(--accent); }

/* Amount — the hero of the modal. Typography does the heavy lifting. */
.vault-save-amount { }
.vault-save-amount-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5em;
}
.vault-save-amount-row {
  display: flex;
  align-items: center;
  gap: 0.8em;
  padding: 0.35em 0 0.5em;
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
}
.vault-save-amount-input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--fg);
  font-family: inherit;
  font-size: 2.4em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  outline: none;
}
.vault-save-amount-input::placeholder { color: color-mix(in srgb, var(--fg) 22%, transparent); }
.vault-save-amount-token {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
  font-size: 0.9em;
  color: var(--dim);
  font-weight: 500;
}
.vault-save-amount-token svg { width: 20px; height: 20px; }
.vault-save-amount-foot {
  display: flex;
  align-items: center;
  gap: 0.75ch;
  margin-top: 0.55em;
  font-size: 0.9em;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.vault-save-amount-arrow { color: color-mix(in srgb, var(--fg) 30%, transparent); }
.vault-save-amount-foot .vault-save-output { color: var(--fg); font-weight: 500; }
.vault-save-amount-foot .vault-save-output-empty { color: var(--dim); font-weight: 400; }
.vault-save-amount-bold-mark { display: inline-flex; }
.vault-save-amount-bold-mark svg { width: 16px; height: 16px; }
.vault-save-rate { font-size: 0.78em; color: var(--dim); margin-top: 0.2em; min-height: 1em; }

.vault-save-pools .vault-save-field-label { display: block; margin-bottom: 0.55em; }
.vault-pool-cards-doc { border-radius: 0; padding: 0; gap: 0.15em; }

.vault-save-progress .vault-save-field-label { display: block; margin-bottom: 0.4em; }
.vault-save-summary { padding-top: 0.5em; border-top: 1px solid color-mix(in srgb, var(--fg) 8%, transparent); }
.vault-save-summary .vault-summary-list { margin: 0; }

.vault-save-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  margin-top: 0.5em;
}
.vault-save-withdraw {
  text-align: center;
  font-size: 0.78em;
  color: var(--dim);
  margin: 0;
}
/* Old page/hero/body kept for backward compat with any remaining callers.
 * The doc layout above is the canonical one. */
.vault-save-page { max-width: 480px; width: 100%; margin: 0 auto; padding: 3.2em 1.4em 3em; box-sizing: border-box; }

.vault-save-hero { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 0.75em; margin-bottom: 0.75em; }
.vault-save-icon { display: flex; align-items: center; justify-content: center; }
.vault-save-icon svg { width: 34px; height: 34px; }
.vault-save-headtext { min-width: 0; }
.vault-save-title { font-size: 1.15em; font-weight: 600; color: var(--fg); letter-spacing: -0.015em; margin: 0; line-height: 1.15; }
.vault-save-sub { font-size: 0.78em; color: var(--dim); margin: 0.1em 0 0; line-height: 1.35; }
.vault-save-apr { display: grid; grid-template-columns: auto; justify-items: end; align-items: baseline; padding-left: 0.5em; row-gap: 0.05em; }
.vault-save-apr-caption { font-size: 0.6em; color: var(--dim); letter-spacing: 0.06em; text-transform: uppercase; }
.vault-save-apr-value { font-size: 1.2em; font-weight: 600; color: var(--green); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1; }
.vault-save-apr-unit { font-size: 0.62em; color: color-mix(in srgb, var(--green) 70%, var(--dim)); letter-spacing: 0.08em; text-transform: uppercase; }

.vault-save-explainer { font-size: 0.82em; color: var(--muted); line-height: 1.55; margin: 0 0 1.6em; }
.vault-save-learnmore { color: var(--accent); text-decoration: none; margin-left: 0.35em; white-space: nowrap; font-weight: 500; }
.vault-save-learnmore:hover { text-decoration: underline; }
.vault-save-learnmore::after { content: ' →'; }

.vault-save-body { display: flex; flex-direction: column; gap: 0.7em; }
.vault-save-field { padding: 0.7em 0.85em; background: color-mix(in srgb, var(--fg) 3%, transparent); border: none; border-radius: 12px; margin-bottom: 0; }

/* Summary — receipt-style breakdown so the user can see WHY their usable
   balance differs from their total balance. */
.vault-summary-field { padding: 0.85em 0.95em; background: color-mix(in srgb, var(--fg) 3%, transparent); border-radius: 12px; }
.vault-summary-list { margin: 0.5em 0 0; padding: 0; }
.vault-summary-row { display: flex; justify-content: space-between; align-items: baseline; padding: 0.4em 0; gap: 1em; }
.vault-summary-row + .vault-summary-row { border-top: 1px solid color-mix(in srgb, var(--fg) 5%, transparent); }
.vault-summary-row dt { font-size: 0.83em; color: var(--muted); margin: 0; }
.vault-summary-row dd { font-size: 0.85em; color: var(--fg); font-variant-numeric: tabular-nums; margin: 0; text-align: right; }
.vault-summary-sub { color: var(--dim); font-size: 0.85em; font-weight: 400; }
.vault-summary-total dt { color: var(--fg); font-weight: 500; }
.vault-summary-total dd { color: var(--fg); font-weight: 600; }
.vault-summary-val-empty { color: var(--dim) !important; font-weight: 400 !important; font-size: 0.83em !important; }

/* Desktop layout — two-column grid above 900px so the form column stays
   near swap-card width but the summary/pools/steps get their own column
   instead of stacking below. Below 900px everything reverts to a single
   column and reads as a mobile sheet. */
@media (min-width: 900px) {
  .vault-save-page { max-width: 860px; padding-top: 3.6em; }
  .vault-save-body { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.1em; row-gap: 0.9em; align-items: start; }
  .vault-save-col-full { grid-column: 1 / -1; }
  .vault-save-col-left { grid-column: 1; }
  .vault-save-col-right { grid-column: 2; }
  .vault-save-hero { grid-template-columns: 40px 1fr auto; gap: 0.9em; }
  .vault-save-icon svg { width: 40px; height: 40px; }
  .vault-save-title { font-size: 1.35em; }
  .vault-save-sub { font-size: 0.85em; }
  .vault-save-apr-value { font-size: 1.5em; }
  .vault-save-explainer { font-size: 0.9em; }
}
@media (min-width: 1100px) {
  .vault-save-page { max-width: 960px; }
}
.vault-save-field-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.35em; }
.vault-save-field-label { font-size: 0.72em; color: var(--dim); letter-spacing: 0.02em; }
.vault-save-input-row { display: flex; align-items: center; gap: 0.5em; }
.vault-save-input { flex: 1; background: none; border: none; color: var(--fg); font-family: inherit; font-size: 1.6em; font-weight: 600; padding: 0; min-width: 0; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.vault-save-input:focus { outline: none; }
.vault-save-input::placeholder { color: var(--dim); opacity: 0.35; }
.vault-save-output { flex: 1; font-size: 1.6em; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.vault-save-token { display: flex; align-items: center; gap: 0.3em; font-size: 0.82em; font-weight: 600; color: var(--fg); background: color-mix(in srgb, var(--fg) 8%, transparent); border-radius: 20px; padding: 0.3em 0.6em 0.3em 0.3em; flex-shrink: 0; }
.vault-save-token svg { width: 18px; height: 18px; }
.vault-save-fiat { font-size: 0.72em; color: var(--dim); min-height: 1em; font-variant-numeric: tabular-nums; }

/* Send-modal chain badge — small pill in the header row that
   expands a per-chain breakdown when clicked. Same visual grammar
   as the cashout balance-hero source picker. */
.send-chain-badge {
  background: none;
  border: 1px solid var(--border, color-mix(in srgb, var(--fg) 14%, transparent));
  border-radius: 999px;
  color: var(--fg);
  font-family: inherit;
  font-size: 0.82em;
  padding: 0.35em 0.9em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  transition: border-color 0.15s;
}
.send-chain-badge:hover { border-color: var(--fg); }
.send-chain-caret { color: var(--dim); font-size: 0.85em; transition: transform 0.15s; }
.send-chain-badge[aria-expanded="true"] .send-chain-caret { transform: rotate(180deg); }
.send-source-breakdown {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  margin: 0.4em 0 0.8em;
}
.send-source-breakdown[hidden] { display: none; }

/* Fiat-first amount row — the currency symbol sits inline with a
   massive number, and 'you're sending X ETH' lives below in the
   dim conversion line. Mirrors the cashout amount input. */
.send-amount-row-fiat {
  display: flex;
  align-items: baseline;
  gap: 0.2ch;
}
.send-amount-currency {
  color: color-mix(in srgb, var(--fg) 45%, transparent);
  font-size: 1.6em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.send-amount-row-fiat .vault-save-amount-input {
  flex: 1;
  font-variant-numeric: tabular-nums;
}
.vault-save-arrow { text-align: center; color: var(--dim); padding: 0.2em 0; font-size: 0.85em; margin: -0.15em 0; position: relative; z-index: 1; }
/* Pool selector cards */
.vault-pool-cards { display: flex; flex-direction: column; gap: 0.3em; margin-top: 0.4em; margin-bottom: 0.5em; }
.vault-pool-card { display: block; padding: 0.5em 0.7em; background: color-mix(in srgb, var(--fg) 3%, transparent); border: 1.5px solid transparent; border-radius: 10px; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.vault-pool-card:hover { border-color: color-mix(in srgb, var(--green) 30%, transparent); }
.vault-pool-card-selected { border-color: var(--green); background: color-mix(in srgb, var(--green) 6%, transparent); }
.vault-pool-card-top { display: flex; justify-content: space-between; align-items: center; }
.vault-pool-card-name { font-size: 0.8em; font-weight: 500; color: var(--fg); }
.vault-pool-card-apy { font-size: 0.82em; font-weight: 700; color: var(--green); font-variant-numeric: tabular-nums; }
.vault-pool-card-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 0.15em; }
.vault-pool-card-tvl { font-size: 0.65em; color: var(--dim); font-variant-numeric: tabular-nums; }
.vault-pool-card-7d { font-size: 0.65em; color: var(--dim); font-variant-numeric: tabular-nums; }
/* Chain picker — "From" accordion. Reads like a bank's From-Account selector. */
.vault-chain-picker { padding: 0.65em 0.85em; background: color-mix(in srgb, var(--fg) 3%, transparent); border-radius: 12px; }
.vault-chain-row { width: 100%; display: flex; align-items: center; gap: 0.65em; padding: 0.5em 0.15em; background: none; border: none; color: var(--fg); font-family: inherit; text-align: left; cursor: pointer; border-radius: 8px; transition: background 0.12s; font-size: 0.9em; }
.vault-chain-row:hover:not(:disabled) { background: color-mix(in srgb, var(--fg) 5%, transparent); }
.vault-chain-picker-static .vault-chain-row { cursor: default; padding-left: 0.15em; }
.vault-chain-picker-static .vault-chain-row:hover { background: none; }
.vault-chain-row-current { padding: 0.45em 0.35em; }
.vault-chain-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; }
.vault-chain-icon svg { width: 24px; height: 24px; }
.vault-chain-name { flex: 1; font-weight: 500; color: var(--fg); }
.vault-chain-bal { color: var(--dim); font-size: 0.9em; font-variant-numeric: tabular-nums; }
.vault-chain-bal-empty { opacity: 0.55; }
.vault-chain-chev { display: inline-flex; align-items: center; justify-content: center; color: var(--dim); margin-left: 0.3em; transition: transform 0.15s; }
.vault-chain-picker[aria-expanded="true"] .vault-chain-chev { transform: rotate(180deg); }
.vault-chain-list { margin-top: 0.4em; padding-top: 0.4em; border-top: 1px solid color-mix(in srgb, var(--fg) 7%, transparent); display: flex; flex-direction: column; gap: 0.1em; }
.vault-chain-row-selected { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.vault-chain-check { color: var(--accent); font-size: 0.9em; margin-left: 0.3em; }
.vault-caret { display: block; }

/* Merged swap card — one bordered container, top = Amount, bottom = You'll receive.
   The divider is a subtle line broken by a small circular pill with a down caret,
   so the two halves read as one continuous flow. */
.vault-swap-card { background: color-mix(in srgb, var(--fg) 3%, transparent); border-radius: 14px; overflow: hidden; }
.vault-swap-half { padding: 0.85em 0.95em; }
.vault-swap-send { padding-bottom: 0.55em; }
.vault-swap-receive { padding-top: 0.55em; }
.vault-swap-divider { position: relative; height: 1px; margin: 0 0.95em; background: color-mix(in srgb, var(--fg) 8%, transparent); overflow: visible; }
.vault-swap-divider-pill { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 50%; background: var(--bg); border: 1px solid color-mix(in srgb, var(--fg) 10%, transparent); display: flex; align-items: center; justify-content: center; color: var(--dim); z-index: 1; }
.vault-save-output-empty { color: var(--dim); opacity: 0.5; }

/* Pool cards — transparent border by default, faint accent on hover, full accent when selected.
   Uses :has() so the label wraps a hidden radio and the label itself becomes the source of truth. */
.vault-pool-cards { display: flex; flex-direction: column; gap: 0.35em; margin-top: 0.4em; }
.vault-pool-card { position: relative; display: block; padding: 0.55em 0.75em; background: color-mix(in srgb, var(--fg) 3%, transparent); border: 1.5px solid transparent; border-radius: 10px; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.vault-pool-card:hover { border-color: color-mix(in srgb, var(--accent) 25%, transparent); }
.vault-pool-card-selected,
.vault-pool-card:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.vault-pool-card:not(.vault-pool-card-selected):not(:has(input:checked)) { border-color: transparent; }
.vault-pool-card:not(.vault-pool-card-selected):not(:has(input:checked)):hover { border-color: color-mix(in srgb, var(--accent) 25%, transparent); }

/* Steps — receipt-style, brighter chips */
.vault-steps-field { padding: 0.85em 0.95em; background: color-mix(in srgb, var(--fg) 3%, transparent); border-radius: 12px; }
.vault-save-steps { list-style: none; margin: 0.5em 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5em; }
.vault-save-step { display: flex; align-items: center; gap: 0.7em; font-size: 0.85em; color: var(--fg); transition: color 0.2s; }
.vault-save-step-idx { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-size: 0.75em; font-weight: 700; font-variant-numeric: tabular-nums; flex-shrink: 0; transition: background 0.2s, color 0.2s; }
.vault-save-step-label { flex: 1; }
.vault-save-step-active .vault-save-step-idx { background: var(--accent); color: var(--bg); }
.vault-save-step-done { color: var(--green); }
.vault-save-step-done .vault-save-step-idx { background: var(--green); color: var(--bg); }
.vault-save-step-error .vault-save-step-idx { background: color-mix(in srgb, var(--red, #d97a7a) 18%, transparent); color: var(--red, #d97a7a); }

/* Primary action — accent-filled, prominent. Withdraw reassurance sits directly above. */
.vault-save-actions { margin-top: 0.9em; }
.vault-save-withdraw { text-align: center; font-size: 0.78em; color: var(--muted); margin: 0 0 0.55em; }
.vault-save-btn { width: 100%; background: var(--accent); border: 1px solid var(--accent); color: var(--bg); font-family: inherit; font-size: 0.98em; font-weight: 600; padding: 0.95em 0; cursor: pointer; border-radius: 10px; transition: opacity 0.15s, background 0.15s, color 0.15s; letter-spacing: -0.005em; }
.vault-save-btn:hover:not(:disabled) { opacity: 0.88; }
.vault-save-btn:disabled { opacity: 0.4; cursor: default; background: none; color: var(--dim); border-color: color-mix(in srgb, var(--fg) 12%, transparent); }
.vault-save-btn-done { background: color-mix(in srgb, var(--green) 18%, transparent); border-color: var(--green); color: var(--green); }
.vault-save-status { font-size: 0.75em; color: var(--muted); text-align: center; min-height: 1em; margin-top: 0.5em; }

/* Quiet the preset pills — they're shortcuts, not actions. */
.vault-presets { display: flex; gap: 0.3em; }
.vault-preset { background: color-mix(in srgb, var(--fg) 6%, transparent); border: none; color: var(--muted); font-family: inherit; font-size: 0.72em; font-weight: 500; padding: 0.28em 0.7em; border-radius: 6px; cursor: pointer; transition: background 0.15s, color 0.15s; letter-spacing: 0.01em; }
.vault-preset:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }

.vault-pools-field { padding: 0.7em 0.85em; background: color-mix(in srgb, var(--fg) 3%, transparent); border-radius: 12px; }

/* Vault page — chain rows get thin dividers to break up the visual monotone. */
.vault-token { display: flex; align-items: center; gap: 0.8em; padding: 0.75em 0.15em; }
.vault-tokens .vault-token + .vault-token { border-top: 1px solid color-mix(in srgb, var(--fg) 6%, transparent); }
/* Vault title reads as a page heading, not a link. */
.vault-total-label + h1, .vault-page h1.vault-title { color: var(--fg); }
.vault-save-bal { font-size: 0.72em; color: var(--dim); font-variant-numeric: tabular-nums; }
.vault-save-field-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 0.35em; }
.vault-presets { display: flex; gap: 0.3em; }
.vault-preset { background: color-mix(in srgb, var(--fg) 6%, transparent); border: none; color: var(--muted); font-family: inherit; font-size: 0.7em; padding: 0.25em 0.6em; border-radius: 6px; cursor: pointer; transition: background 0.15s, color 0.15s; }
.vault-preset:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.vault-qr { width: 160px; height: 160px; margin: 0.8em auto; border-radius: 10px; overflow: hidden; }
@media (max-width: 600px) {
  .vault-total-value { font-size: 1.6em; }
  .vault-action-btn span { font-size: 0.85em; }
  .vault-stats { gap: 1em; }
  .vault-save-dialog { max-width: 100% !important; margin: 0 0.5em; }
  .vault-save-input { font-size: 1.3em; }
  .vault-save-output { font-size: 1.3em; }
  .vault-qr { width: 140px; height: 140px; }
  .vault-preset { padding: 0.35em 0.7em; font-size: 0.75em; }
}

/* ─────────────────────────────────────────────────────────────
 * Ticket pass — buyer-facing full-screen ticket at /ticket.
 * Design philosophy: content earns its size (event title is the
 * hero); hierarchy through typography, not boxes; borders only for
 * real containers (the pass IS a real container, so it gets one).
 * ───────────────────────────────────────────────────────────── */
#ticket-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2em 1em;
  background: var(--bg);
}
.ticket-pass {
  width: 100%;
  max-width: 420px;
  background: color-mix(in srgb, var(--fg) 4%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
  border-radius: 20px;
  padding: 2em 1.75em 1.5em;
  display: flex;
  flex-direction: column;
  gap: 1.4em;
  box-shadow: 0 20px 60px -30px color-mix(in srgb, black 60%, transparent);
}
.ticket-pass-head { display: flex; flex-direction: column; gap: 0.35em; }
.ticket-pass-eyebrow {
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.7em;
  font-weight: 500;
}
.ticket-pass-title {
  margin: 0;
  font-size: 1.6em;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.ticket-pass-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em 1.5em;
}
.ticket-pass-field { display: flex; flex-direction: column; gap: 0.2em; min-width: 0; }
.ticket-pass-field-wide { grid-column: 1 / -1; }
.ticket-pass-field-label {
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.65em;
  font-weight: 500;
}
.ticket-pass-field-value {
  color: var(--fg);
  font-size: 1em;
  font-weight: 500;
  overflow-wrap: break-word;
}
/* Perforation dots — visual metaphor of a torn ticket edge. Purely
   decorative, aria-hidden. Kept subtle so it reads as texture, not
   ornament. */
.ticket-pass-perforation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0;
  margin: 0.3em -1.75em;
  padding: 0 0.5em;
  position: relative;
}
.ticket-pass-perforation::before,
.ticket-pass-perforation::after {
  content: '';
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
  flex-shrink: 0;
  margin-top: 0;
}
.ticket-pass-perforation::before { margin-left: -12px; }
.ticket-pass-perforation::after { margin-right: -12px; }
.ticket-pass-perforation span {
  width: 6px;
  height: 1px;
  background: color-mix(in srgb, var(--fg) 15%, transparent);
}
.ticket-pass-code {
  display: flex;
  align-items: center;
  gap: 1.2em;
}
.ticket-pass-qr {
  background: #fff;
  padding: 0.5em;
  border-radius: 8px;
  flex-shrink: 0;
}
.ticket-pass-qr svg { width: 130px; height: 130px; display: block; }
.ticket-pass-serial {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  min-width: 0;
}
.ticket-pass-foot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75em;
  margin: 0.3em 0 0;
}
.ticket-wallet-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5ch;
  padding: 0.85em 1em;
  background: var(--fg);
  color: var(--bg);
  border: 0;
  border-radius: 10px;
  font-size: 0.95em;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.12s;
}
.ticket-wallet-btn:hover { opacity: 0.88; }
.ticket-wallet-btn i { font-size: 1.15em; }
.ticket-pass-footnote {
  margin: 0;
  color: var(--dim);
  font-size: 0.8em;
  text-align: center;
  line-height: 1.4;
}
@media (max-width: 480px) {
  .ticket-pass { padding: 1.5em 1.25em 1.25em; border-radius: 16px; }
  .ticket-pass-title { font-size: 1.4em; }
  .ticket-pass-qr svg { width: 120px; height: 120px; }
  #ticket-page { padding: 1em 0.5em; }
}
/* Print style — a real ticket can be printed if the buyer prefers
   paper. Hide everything else on the page, drop the dark chrome. */
@media print {
  body { background: white; }
  .ticket-pass {
    background: white;
    color: black;
    border-color: #ccc;
    box-shadow: none;
    max-width: 4in;
    margin: 0 auto;
  }
  .ticket-pass-title, .ticket-pass-field-value, .ticket-pass-eyebrow, .ticket-pass-field-label { color: black; }
  .ticket-wallet-btn, .ticket-pass-footnote { display: none; }
}

/* ─────────────────────────────────────────────────────────────
 * Cash out — the /cashout offramp sheet. Full-page bottom sheet
 * matching the vault-save-doc pattern; primary content is the
 * amount + platform + quote; nothing else on the page competes.
 * ───────────────────────────────────────────────────────────── */
.cashout-sheet {
  max-width: 520px;
  margin: 0 auto;
  padding: 1.5em 1em 4em;
  display: flex;
  flex-direction: column;
  gap: 1.2em;
}
.cashout-lead { display: flex; flex-direction: column; gap: 0.4em; }
.cashout-lead h1 {
  margin: 0;
  font-size: 1.6em;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.cashout-sub {
  margin: 0;
  color: var(--dim);
  font-size: 0.92em;
  line-height: 1.5;
}
.cashout-balance-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.6em 0 0.2em;
}
.cashout-balance-sub {
  color: var(--dim);
  font-size: 0.72em;
  padding-bottom: 0.6em;
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 8%, transparent);
  margin-bottom: 0.4em;
}
.cashout-resume { margin-bottom: 0.6em; }
.cashout-amount-conversion {
  color: var(--dim);
  font-size: 0.78em;
  padding-top: 0.25em;
  font-variant-numeric: tabular-nums;
}
.cashout-payee-row {
  display: flex;
  align-items: center;
  gap: 0.5ch;
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
}
.cashout-payee-row:focus-within { border-bottom-color: var(--fg); }
.cashout-payee-row .cashout-payee-input {
  flex: 1;
  min-width: 0;
  border-bottom: 0;
}
.cashout-payee-check {
  font-size: 1.1em;
  font-weight: 600;
  min-width: 1em;
  text-align: center;
}
.cashout-platform[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.cashout-platform[disabled]:hover { background: transparent; }
.cashout-payee-scan {
  background: transparent;
  border: 0;
  color: var(--dim);
  font-size: 1.15em;
  padding: 0.2em 0.4ch;
  cursor: pointer;
  transition: color 0.12s;
}
.cashout-payee-scan:hover { color: var(--fg); }
.cashout-payee-scanner {
  margin-top: 0.6em;
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}
/* Explicit display:flex above beat the UA [hidden]{display:none}
   rule on tie specificity, so the QR scanner was leaking through
   even when the JS set .hidden=true. Same for the payee field. */
.cashout-payee-scanner[hidden],
.cashout-field[hidden] { display: none; }
.cashout-payee-scanner video {
  width: 100%;
  max-width: 360px;
  border-radius: 8px;
  background: #000;
  display: block;
}
.cashout-payee-scanner button {
  align-self: flex-start;
  background: none;
  border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  border-radius: 6px;
  color: var(--dim);
  font-family: inherit;
  font-size: 0.85em;
  padding: 0.3em 0.8em;
  cursor: pointer;
}
.cashout-payee-scanner button:hover { color: var(--fg); border-color: var(--fg); }
.cashout-balance-label {
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.7em;
}
.cashout-balance-value {
  color: var(--fg);
  /* Promoted from 1.1em — this is the pre-flight sanity check for
     the amount the user is about to enter. Big enough to read at a
     glance, still smaller than the .cashout-amount-input hero. */
  font-size: 1.4em;
  font-weight: 500;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.cashout-body {
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding-top: 0.4em;
}
.cashout-field { display: flex; flex-direction: column; gap: 0.35em; }
.cashout-field-label {
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.7em;
}
.cashout-amount-row {
  display: flex;
  align-items: baseline;
  gap: 0.4ch;
  padding: 0.4em 0;
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
}
.cashout-amount-currency {
  color: var(--dim);
  font-size: 1.6em;
  font-weight: 300;
}
.cashout-amount-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--fg);
  font-family: inherit;
  font-size: 2em;
  font-weight: 400;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  padding: 0;
}
.cashout-amount-token {
  color: var(--dim);
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.cashout-platforms {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.5em;
}
.cashout-platform {
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
  padding: 0.7em 0.8em;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  border-radius: 8px;
  color: var(--fg);
  font-family: inherit;
  font-size: 0.9em;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.cashout-platform:hover { background: color-mix(in srgb, var(--fg) 4%, transparent); }
.cashout-platform i { font-size: 1.15em; color: var(--dim); }
.cashout-platform-active {
  border-color: var(--fg);
  background: color-mix(in srgb, var(--fg) 6%, transparent);
}
.cashout-platform-active i { color: var(--fg); }
.cashout-payee-input {
  background: transparent;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  outline: none;
  color: var(--fg);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1em;
  padding: 0.4em 0;
}
.cashout-payee-input:focus { border-bottom-color: var(--fg); }
.cashout-quote {
  padding: 0.8em 0.9em;
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}
.cashout-quote-row { display: flex; justify-content: space-between; align-items: baseline; }
.cashout-quote-label { color: var(--dim); font-size: 0.85em; }
.cashout-quote-amount {
  color: var(--green);
  font-size: 1.3em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* Reserved line height so an empty ETA doesn't collapse and refill
   as the quote hydrates (principle 9). */
.cashout-quote-eta { color: var(--dim); font-size: 0.8em; min-height: 1em; }
.cashout-btn {
  width: 100%;
  /* Fixed min-height so the button label swap across the seven
     states (`enter an amount` → `pick a payout method` → `only $X
     available` → `$3.00 minimum` → `cash out $Y` → `preparing…` →
     `try again`) doesn't reflow the section around it. */
  min-height: 3em;
  padding: 0.95em 1em;
  background: var(--green);
  border: 0;
  border-radius: 10px;
  color: var(--bg);
  font-family: inherit;
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s, background 0.15s;
}
.cashout-btn:hover:not(:disabled) { opacity: 0.9; }
.cashout-btn:disabled {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  color: var(--dim);
  cursor: default;
}
.cashout-btn-done { background: var(--green); color: var(--bg); }
.cashout-status {
  margin: 0;
  color: var(--dim);
  font-size: 0.85em;
  text-align: center;
  min-height: 1.2em;
}
.cashout-loading { color: var(--dim); font-size: 0.85em; }
.cashout-ext-toggle {
  background: none;
  border: none;
  color: var(--dim);
  font-family: inherit;
  font-size: 0.8em;
  padding: 0.5em 0 0;
  cursor: pointer;
  text-align: left;
  align-self: flex-start;
}
.cashout-ext-toggle:hover { color: var(--fg); }

/* Cross-chain source picker — attached to the balance-sub line.
   "0.005 ETH on Optimism · change" reads as one sentence; the
   `change` toggle expands a per-chain breakdown below. */
.cashout-balance-sub .cashout-source-toggle {
  background: none;
  border: none;
  color: var(--accent, var(--fg));
  font-family: inherit;
  font-size: inherit;
  padding: 0;
  margin-left: 0.4em;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent, var(--fg)) 40%, transparent);
  text-underline-offset: 3px;
}
.cashout-balance-sub .cashout-source-toggle:hover { color: var(--fg); }
.cashout-source-breakdown {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  margin: 0.6em 0 0.2em;
}
.cashout-source-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.8em;
  background: none;
  border: none;
  padding: 0.55em 0.7em;
  border-radius: 6px;
  cursor: pointer;
  color: var(--fg);
  font-family: inherit;
  font-size: 0.88em;
  text-align: left;
}
.cashout-source-row:hover { background: color-mix(in srgb, var(--fg) 5%, transparent); }
.cashout-source-row.is-picked {
  background: color-mix(in srgb, var(--accent, var(--fg)) 8%, transparent);
  outline: 1px solid color-mix(in srgb, var(--accent, var(--fg)) 24%, transparent);
}
.cashout-source-row-name { font-variant-numeric: tabular-nums; }
.cashout-source-row-tag {
  color: var(--green, #4ec9b0);
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.05em 0.4em;
  border: 1px solid color-mix(in srgb, var(--green, #4ec9b0) 40%, transparent);
  border-radius: 3px;
  margin-left: 0.35em;
  vertical-align: middle;
}
.cashout-source-row-chain { color: var(--dim); font-size: 0.92em; }
.cashout-source-row-fiat { color: var(--dim); font-variant-numeric: tabular-nums; }

/* Cash-out pending page — vault-language, its own /cashout render
   path when the wallet has one or more live deposits. Big number
   owns the top; each pending item is a card below; a small
   affordance opens the entry form for another concurrent cash-out.
   Same tokens the vault uses so this reads as the same document. */
.cashout-doc {
  max-width: 640px;
  margin: 0 auto;
  padding: 1.5em 1em 4em;
  display: flex;
  flex-direction: column;
  gap: 2em;
}
.cashout-pending-hero {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  padding: 0.5em 0 0.2em;
}
.cashout-pending-hero-label {
  color: var(--dim);
  font-size: 0.78em;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.cashout-pending-hero-value {
  color: var(--fg);
  font-size: 2.6em;
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.cashout-pending-list {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
}
.cashout-pending-card {
  display: flex;
  flex-direction: column;
  gap: 1.2em;
  padding: 1.2em 0;
  border-top: 1px solid var(--border, color-mix(in srgb, var(--fg) 10%, transparent));
}
/* Safety + cancel + meta-foot animate to zero height when the card
   reaches a terminal state, so the card gracefully settles instead
   of snapping shorter (principle 9). max-height is generous enough
   that any real content transitions from natural to zero. Every
   collapsible section uses the same transition, so it feels like
   one motion rather than three cascading pops. */
.cashout-pending-card-safety,
.cashout-pending-card-cancel,
.cashout-pending-card-foot {
  overflow: hidden;
  max-height: 24em;
  opacity: 1;
  transition: max-height 0.35s ease, opacity 0.28s ease, margin 0.35s ease, padding 0.35s ease;
}
.cashout-pending-card.is-done .cashout-pending-card-safety,
.cashout-pending-card.is-done .cashout-pending-card-cancel,
.cashout-pending-card.is-returned .cashout-pending-card-safety,
.cashout-pending-card.is-returned .cashout-pending-card-cancel {
  max-height: 0;
  opacity: 0;
  margin: 0;
  padding: 0;
}
.cashout-pending-card:first-child { border-top: none; padding-top: 0.4em; }
.cashout-pending-card-head { display: flex; flex-direction: column; gap: 0.3em; }
.cashout-pending-card-title {
  color: var(--fg);
  font-size: 1.05em;
  font-weight: 500;
}
.cashout-pending-card-sub { color: var(--dim); font-size: 0.88em; }
.cashout-pending-card-body {
  color: var(--fg);
  font-size: 0.95em;
  line-height: 1.55;
  margin: 0;
}
.cashout-pending-card-body strong { color: var(--fg); font-weight: 500; }
.cashout-pending-card-safety {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}
.cashout-pending-card-safety li {
  color: var(--dim);
  font-size: 0.85em;
  line-height: 1.4;
  padding-left: 1.3em;
  position: relative;
}
.cashout-pending-card-safety li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--green, #4ec9b0);
}
.cashout-pending-card-foot {
  display: flex;
  align-items: center;
  gap: 0.6em;
  color: var(--dim);
  font-size: 0.78em;
  padding-top: 0.2em;
}
.cashout-pending-meta-key {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.9em;
}
.cashout-pending-meta-val {
  color: var(--fg);
  font-family: inherit;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cashout-pending-copy {
  background: none;
  border: none;
  color: var(--dim);
  cursor: pointer;
  padding: 0.2em 0.4em;
  font-size: 1.1em;
  line-height: 1;
}
.cashout-pending-copy:hover { color: var(--fg); }
.cashout-pending-card.is-done .cashout-pending-card-title { color: var(--green, #4ec9b0); }
.cashout-pending-card.is-returned .cashout-pending-card-title { color: var(--dim); }
/* Terminal-state cancel + safety fade via the max-height transition
   above (rather than a raw `display: none` snap), so the card
   settles instead of jerking on state change. */
.cashout-pending-card.is-done .cashout-inflight-steps { opacity: 0.6; }
.cashout-pending-card-cancel {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  padding-top: 0.2em;
}
.cashout-pending-card-cancel button {
  align-self: flex-start;
  padding-left: 0;
  font-size: 0.85em;
}
.cashout-pending-card-cancel-status {
  color: var(--dim);
  font-size: 0.82em;
  margin: 0;
  min-height: 1.1em;
}

/* Pending-card progress track — surfaces partial-fill state
   (multiple buyers filling one deposit) so the primary story
   becomes "\$13 of \$14.64 delivered" instead of a generic
   "confirming payment". Track is always in the DOM even when
   hidden so the layout doesn't shift (principle 9). */
.cashout-pending-progress {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}
.cashout-pending-progress-track {
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  overflow: hidden;
}
.cashout-pending-progress-fill {
  height: 100%;
  background: var(--green, #4ec9b0);
  border-radius: 999px;
  transition: width 0.4s ease-out;
}
.cashout-pending-progress-detail {
  display: flex;
  justify-content: space-between;
  color: var(--dim);
  font-size: 0.82em;
  font-variant-numeric: tabular-nums;
}
.cashout-pending-card.is-partial .cashout-pending-card-title { color: var(--green, #4ec9b0); }
.cashout-pending-actions {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  align-items: flex-start;
  padding-top: 0.4em;
}
.cashout-link {
  background: none;
  border: none;
  color: var(--fg);
  font-family: inherit;
  font-size: 0.95em;
  cursor: pointer;
  padding: 0.3em 0;
  text-align: left;
}
.cashout-link:hover { color: var(--accent, var(--fg)); }
.cashout-link-muted { color: var(--dim); }
.cashout-link-muted:hover { color: var(--fg); }
/* Red text for the confirmed-destructive action inside the inline
   cancel affordance. Meaning-carrying per principle 6: this action
   is irreversible, so it earns the "user must act (and know it)"
   color that the vault otherwise reserves for warning states. */
.cashout-link-danger { color: var(--red, #d84a4a); font-weight: 500; }
.cashout-link-danger:hover { color: var(--red, #d84a4a); text-decoration: underline; }
.cashout-link-danger:disabled { opacity: 0.55; cursor: default; }

/* Inline cancel confirm — replaces the native browser confirm()
   snap-out. The question is a plain typographic line and the two
   actions are inline text links, so the ceremony reads as part of
   the card, not a modal dialog on top of it. */
.cashout-pending-card-cancel-confirm {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  padding: 0.4em 0 0.2em;
}
.cashout-pending-card-cancel-question {
  color: var(--fg);
  font-size: 0.9em;
  line-height: 1.45;
}
.cashout-pending-card-cancel-actions {
  display: flex;
  gap: 1.2ch;
  align-items: baseline;
}

/* Progress steps — four dots joined by a hair-thin line. Filled
   dots for completed steps, the ring for the active one, hollow
   for future. Reads like a receipt, not a spinner. */
.cashout-inflight-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}
.cashout-inflight-steps::before {
  content: '';
  position: absolute;
  top: 0.42em;
  left: 12.5%;
  right: 12.5%;
  height: 1px;
  background: var(--border, color-mix(in srgb, var(--fg) 12%, transparent));
  z-index: 0;
}
.cashout-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
  z-index: 1;
}
.cashout-step-dot {
  width: 0.85em;
  height: 0.85em;
  border-radius: 50%;
  border: 1px solid var(--border, color-mix(in srgb, var(--fg) 24%, transparent));
  background: var(--bg);
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.cashout-step-label {
  color: var(--dim);
  font-size: 0.72em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  line-height: 1.2;
}
.cashout-step.is-done .cashout-step-dot {
  background: var(--green, #4ec9b0);
  border-color: var(--green, #4ec9b0);
}
.cashout-step.is-active .cashout-step-dot {
  border-color: var(--green, #4ec9b0);
  background: var(--bg);
  transform: scale(1.15);
  animation: cashout-step-pulse 1.6s ease-in-out infinite;
}
.cashout-step.is-active .cashout-step-label { color: var(--fg); }
@keyframes cashout-step-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green, #4ec9b0) 40%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--green, #4ec9b0) 0%, transparent); }
}

.cashout-inflight-body {
  color: var(--fg);
  font-size: 0.95em;
  line-height: 1.55;
}
.cashout-inflight-body strong { color: var(--fg); font-weight: 500; }

.cashout-inflight-safety {
  list-style: none;
  padding: 0.9em 1em;
  margin: 0;
  border-radius: 10px;
  background: color-mix(in srgb, var(--fg) 3%, transparent);
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.cashout-inflight-safety li {
  color: var(--dim);
  font-size: 0.85em;
  line-height: 1.4;
  padding-left: 1.4em;
  position: relative;
}
.cashout-inflight-safety li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--green, #4ec9b0);
}

.cashout-inflight-meta {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.5em 0.7em;
  border: 1px dashed var(--border, color-mix(in srgb, var(--fg) 14%, transparent));
  border-radius: 8px;
  font-size: 0.8em;
}
.cashout-inflight-meta-label {
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75em;
}
.cashout-inflight-deposit-id {
  color: var(--fg);
  font-family: inherit;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cashout-inflight-copy {
  background: none;
  border: none;
  color: var(--dim);
  cursor: pointer;
  padding: 0.2em 0.4em;
  font-size: 1.1em;
  line-height: 1;
}
.cashout-inflight-copy:hover { color: var(--fg); }

.cashout-btn-ghost {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--border, color-mix(in srgb, var(--fg) 18%, transparent));
}
.cashout-btn-ghost:hover:not(:disabled) {
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  opacity: 1;
}

/* In-flight cashout section on the vault. Sits between the balance
   lead and the savings block. Each row updates in place via the
   Peer SDK's watch() loop until it hits a terminal state.

   Per design-philosophy principle 3 (hierarchy through typography,
   not boxes) the section carries no background and no radius —
   it reads as an inline part of the vault flow, separated from
   savings by whitespace and a bottom rule the same way `savings`
   and `activity` are. Rows are typographic list items, not chips. */
.vault-cashout-banner {
  display: flex;
  flex-direction: column;
  gap: 0.55em;
  margin: 1em 0 0.6em;
  padding: 0 0 0.9em;
  border-bottom: 1px solid var(--border);
}
.vault-cashout-title {
  color: var(--dim);
  letter-spacing: -0.005em;
  font-size: 0.95em;
  font-weight: 500;
}
.vault-cashout-list { display: flex; flex-direction: column; gap: 0.65em; }

/* Money-moving row — the amount + destination is the headline
   (principle 1 'content earns its size'), state is its own tiny label,
   a thin progress bar visualizes partial fills (principle 4 'numbers
   are first-class'). No background; hover just lifts the headline. */
.vault-cashout-row {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  padding: 0.15em 0;
  color: var(--fg);
  text-decoration: none;
}
.vault-cashout-row:hover .vault-cashout-row-headline { color: var(--accent); }
.vault-cashout-row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.8ch;
}
.vault-cashout-row-headline {
  color: var(--fg);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: 0.98em;
  transition: color 0.12s;
}
.vault-cashout-row-state {
  font-size: 0.78em;
  letter-spacing: -0.005em;
  color: var(--dim);
}
.vault-cashout-progress {
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  overflow: hidden;
}
.vault-cashout-progress-fill {
  height: 100%;
  background: var(--green, #4ec9b0);
  border-radius: 999px;
  transition: width 0.4s ease-out;
}
.vault-cashout-progress-detail {
  display: flex;
  justify-content: space-between;
  color: var(--dim);
  font-size: 0.75em;
  font-variant-numeric: tabular-nums;
}
.vault-cashout-row[data-state="delivered"] .vault-cashout-row-headline { color: var(--green, #4ec9b0); }
.vault-cashout-row[data-state="returned"] .vault-cashout-row-headline { color: var(--muted); }

/* Legacy row-note kept for older card renders / any straggler
   callers so they don't 404 the selector list. */
.vault-cashout-row-note {
  color: var(--dim);
  font-size: 0.78em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60ch;
}
.vault-cashout-row-link {
  color: var(--dim);
  text-decoration: none;
  font-size: 0.9em;
  transition: color 0.12s;
}
.vault-cashout-row-link:hover { color: var(--fg); }

/* ─────────────────────────────────────────────────────────────
 * Design catalog — /design. Internal review tool. Kept close to
 * the vault-doc pattern so the catalog itself doesn't drift from
 * its own principles.
 * ───────────────────────────────────────────────────────────── */
.design-catalog {
  max-width: 900px;
  margin: 0 auto;
  padding: 2em 1.25em 5em;
  display: flex;
  flex-direction: column;
  gap: 2.5em;
}
.design-lead { display: flex; flex-direction: column; gap: 0.4em; margin-bottom: 0.5em; }
.design-eyebrow {
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.7em;
}
.design-lead h1 { margin: 0; font-size: 1.8em; font-weight: 600; letter-spacing: -0.01em; }
.design-lead-sub { margin: 0.3em 0 0; color: var(--dim); font-size: 0.95em; line-height: 1.5; max-width: 60ch; }
.design-section { display: flex; flex-direction: column; gap: 1em; }
.design-section-title {
  margin: 0 0 0.15em;
  font-size: 0.85em;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 500;
  padding-bottom: 0.5em;
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 8%, transparent);
}
.design-block {
  display: flex;
  flex-direction: column;
  gap: 0.65em;
  padding: 0.5em 0;
}
.design-block h3 {
  margin: 0;
  font-size: 0.8em;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 500;
}
.design-swatch-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.5em;
}
.design-swatch {
  height: 64px;
  border-radius: 8px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 0.5em 0.7em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75em;
}
.design-type-row { display: flex; flex-direction: column; gap: 0.4em; }
.design-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em 0.8em;
  align-items: center;
}
.design-input-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em 0.8em;
  align-items: center;
}
.design-foot {
  margin-top: 1em;
  padding-top: 1em;
  border-top: 1px solid color-mix(in srgb, var(--fg) 8%, transparent);
  color: var(--dim);
  font-size: 0.9em;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.design-foot code {
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  padding: 0.15em 0.4ch;
  border-radius: 4px;
  font-size: 0.9em;
}

/* ============================================================
   /art detail page — shared primitives
   ------------------------------------------------------------
   Extracted from six vanity renderers where these patterns were
   repeated inline. Uniform title clamp, cover cap, description
   rhythm, awards accent, and external-link chrome so every media
   type reads with the same typographic voice. Numbers wear
   `.art-num` for tabular figures — the philosophy's "first-class
   numbers" rule applied everywhere prices, years, ISBNs, page
   counts, runtimes, supply, and durations appear.
   ============================================================ */
.art-title {
  font-size: clamp(1.5em, 4vw, 2em);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 0.35em;
  line-height: 1.15;
}
.art-cover { margin-bottom: 1.5em; }
.art-cover img {
  max-width: 100%;
  max-height: 400px;
  display: block;
  border-radius: 6px;
}
/* Gallery is an exception — the image IS the piece, no crop. */
.art-cover.art-cover-full img { max-height: none; }
.art-meta {
  color: var(--muted);
  margin-bottom: 1em;
  font-variant-numeric: tabular-nums;
}
.art-meta-secondary {
  color: var(--dim);
  font-size: 0.85em;
  margin-bottom: 0.75em;
  font-variant-numeric: tabular-nums;
}
.art-description {
  color: var(--fg);
  font-size: 0.95em;
  line-height: 1.6;
  margin-bottom: 1.25em;
  max-width: 62ch;
}
.art-excerpt {
  color: var(--fg);
  font-size: 0.95em;
  line-height: 1.65;
  font-style: italic;
  margin-bottom: 1.25em;
  max-width: 62ch;
}
.art-awards {
  color: var(--green, var(--accent));
  font-size: 0.85em;
  margin-bottom: 0.75em;
}
.art-external {
  color: var(--muted);
  font-size: 0.9em;
  text-decoration: none;
}
.art-external:hover { color: var(--fg); text-decoration: underline; }
.art-num { font-variant-numeric: tabular-nums; }
/* Every buy-button / price span across the app renders through
   `data-fiat-primary` or `data-eth-wei`, so this single rule
   gives every price a tabular figure without asking each renderer
   to remember — principle 4 lands globally, not per-renderer. */
[data-fiat-primary="true"], [data-eth-wei] { font-variant-numeric: tabular-nums; }
/* Reserved async slots — PDF viewer and collectors list arrive
   after the on-chain detail lands, so we hold their vertical
   footprint from first paint to avoid principle-9 shifts. */
.art-pdf-slot { min-height: 60vh; margin-bottom: 1.5em; }
.art-collectors-slot { min-height: 3.2em; margin-top: 1.5em; }
/* Music-album overflow menu — hover state via CSS instead of the
   inline onmouseover handlers each row used to carry (self-XSS-
   adjacent pattern, and it violated principle 3's "hierarchy
   through typography, not boxes"). */
.track-overflow-item { transition: background 0.1s; }
.track-overflow-item:hover { background: var(--border); }
/* On-chain media title + external artist attribution — same voice
   as the vanity renderers so hopping between them is seamless. */
.art-onchain-title { font-size: clamp(1.4em, 3.5vw, 1.8em); font-weight: 600; letter-spacing: -0.02em; margin: 0 0 0.35em; }
.art-onchain-supply { color: var(--dim); font-size: 0.85em; font-variant-numeric: tabular-nums; }

/* --- Art detail — follow-up refactor (dispatch helper, ghost
   download, on-tenant links, extracted wrappers). --- */

/* Cover wrapper needs to be inline-block + position:relative for
   the on-chain play-overlay button to anchor. Harmless on the
   other renderers where nothing is anchored inside. */
.art-cover { position: relative; display: inline-block; }
.art-cover-full { display: block; }

/* Tracklist rows earn separation through vertical rhythm, not a
   per-row border. One rule at the top of the list marks its
   start; whitespace between rows carries the read. Principle 3. */
.art-tracklist { border-top: 1px solid var(--border); }
.album-track {
  display: flex;
  align-items: center;
  gap: 0.75ch;
  padding: 0.55em 0;
}

/* Music album hero — cover-then-metadata columns that stack on
   mobile. The inline <style> block the render function used to
   emit now lives here. */
.art-album-hero {
  display: flex;
  gap: 2em;
  align-items: flex-start;
  margin-bottom: 2em;
  text-align: left;
}
.art-album-hero-cover { flex-shrink: 0; width: min(300px, 45%); }
.art-album-hero-cover img { width: 100%; display: block; border-radius: 6px; }
.art-album-hero-meta { flex: 1; min-width: 0; }
@media (max-width: 600px) {
  #art-page { margin-top: -2em; }
  .art-album-hero { flex-direction: column; align-items: flex-start; gap: 1em; }
  .art-album-hero-cover { width: 100%; }
  .art-album-hero-cover img { width: 100%; display: block; }
}

/* Repeated buy+ref row wrapper — extracted from six renderers. */
.art-action-row {
  margin-bottom: 1.5em;
  display: flex;
  gap: 1ch;
  align-items: center;
  flex-wrap: wrap;
}

/* Download / secondary action — subordinate to the primary buy so
   the eye picks up buy first (principle 1). Reads as a muted
   inline text link with icon, not a chunky pill. */
.art-action-ghost {
  background: transparent;
  border: 0;
  color: var(--dim);
  font-size: 0.85em;
  padding: 0.3em 0;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
  cursor: pointer;
  font-family: inherit;
}
.art-action-ghost:hover { color: var(--fg); }

/* Base link chrome for art detail — muted, no underline, fg on
   hover. Used by the on-chain artist attribution, collector row,
   and any other in-tenant nav link inside the detail page. */
.art-detail-link {
  color: var(--muted);
  text-decoration: none;
}
.art-detail-link:hover { color: var(--fg); }

/* Compact buy variant for per-track album buys — smaller than
   the primary album buy without becoming a second-class citizen. */
.track-buy-btn-compact { font-size: 0.7em; }

/* Video-lazy poster frame reserves the 16:9 up front so the swap
   to <video> doesn't jerk (principle 9). */
.art-video-lazy-frame {
  aspect-ratio: 16 / 9;
  background: #111;
  overflow: hidden;
}

/* ============================================================
   Post page — author bio card + related posts
   ------------------------------------------------------------
   Sits below the post body and above the replies. Reads as "if
   you liked this piece, here's who wrote it — follow them, tip
   them, keep reading." Substack anchors the same moment with
   its author byline card at the end of every post.
   ============================================================ */
.post-author-card {
  display: flex;
  gap: 1.2em;
  align-items: flex-start;
  padding: 1.5em 0;
  margin: 2em 0 1em;
  border-top: 1px solid var(--border);
}
.post-author-avatar-link {
  flex-shrink: 0;
  display: block;
  text-decoration: none;
}
.post-author-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: color-mix(in srgb, var(--fg) 6%, transparent);
}
.post-author-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dim);
  font-size: 1.8em;
}
.post-author-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3em;
}
.post-author-name {
  color: var(--fg);
  font-size: 1.1em;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
}
.post-author-name:hover { color: var(--accent); }
.post-author-domain {
  color: var(--dim);
  font-size: 0.85em;
}
.post-author-bio {
  color: var(--fg);
  font-size: 0.95em;
  line-height: 1.55;
  max-width: 60ch;
  margin: 0.35em 0 0;
}
.post-author-subscribe-hint {
  color: var(--muted);
  font-size: 0.85em;
  margin-top: 0.35em;
  font-style: italic;
}
.post-author-actions {
  display: flex;
  gap: 0.8ch;
  margin-top: 0.75em;
  flex-wrap: wrap;
}
.post-author-follow-btn,
.post-author-tip-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: inherit;
  font-size: 0.9em;
  padding: 0.45em 1.2ch;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.post-author-follow-btn:hover,
.post-author-tip-btn:hover {
  background: color-mix(in srgb, var(--fg) 5%, transparent);
  border-color: var(--fg);
}
.post-author-tip-btn { color: var(--green, var(--accent)); border-color: color-mix(in srgb, var(--green, var(--accent)) 30%, var(--border)); }
.post-author-tip-btn:hover { color: var(--green, var(--accent)); border-color: var(--green, var(--accent)); }

.post-related-posts {
  margin: 2.5em 0 1em;
  padding-top: 1.5em;
  border-top: 1px solid var(--border);
}
.post-related-title {
  color: var(--dim);
  font-size: 0.9em;
  font-weight: 500;
  letter-spacing: -0.005em;
  margin: 0 0 1em;
}
.post-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1em;
}
.post-related-card {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  padding: 0.8em 0.9em;
  color: var(--fg);
  text-decoration: none;
  border-radius: 6px;
  background: color-mix(in srgb, var(--fg) 3%, transparent);
  transition: background 0.12s;
}
.post-related-card:hover { background: color-mix(in srgb, var(--fg) 6%, transparent); }
.post-related-card-title {
  font-size: 0.95em;
  font-weight: 500;
  line-height: 1.4;
  color: var(--fg);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-related-card-date {
  color: var(--dim);
  font-size: 0.8em;
  font-variant-numeric: tabular-nums;
}